/* ═══════════════════════════════════════════════════════
   MOBILE (≤920px) — phone rules shared by the old reel and the ring: the
   send button, Install (#ev-close), the wall (#finale), the exercise stickers.
   The reel itself: lantern-hero-mobile-reel.css; the ring: -ring-phone.css.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  /* --m-vgap: the one spacing token for gaps above/below the browser.
     --m-topbar mirrors the fixed .topbar's box (18px padding × 2 + 32.8px brand
     row); it is out of flow, so anything clearing it subtracts this by hand. */
  :root { --m-vgap: 12px; --m-topbar: 69px; }

  .m-only { display: block; }
  .d-only { display: none; }
  /* inline-safe mobile hide: trims dense in-article prose on phones only */
  .m-hide { display: none !important; }

  /* solid ink CTA: fill follows the surface (light paper → ink pill), overriding
     every .m-share-btn base visual. Elevation tier 1 — a resting surface. */
  .hh-send { background: var(--ink) !important; color: #fff !important; border: none !important; min-height: var(--cta-h) !important; padding: 0 var(--cta-px) !important; border-radius: var(--r-pill) !important; font-size: var(--fs-read) !important; font-weight: 700 !important; box-shadow: var(--shadow-1) !important; position: relative; overflow: hidden; touch-action: none; }
  .hh-send svg { stroke: #fff !important; }
  /* icon+label get their own stacking (above the wave's z-index:0) so the
     warm glow washes past them without ever obscuring the button's text */
  .hh-send svg, .hh-send span { position: relative; z-index: var(--z-base); }
  /* warm-wave touch feedback: lantern-phases.js spawns one .hh-wave per press,
     plus more along the finger's path — a trail, not one flat flash */
  .hh-send .hh-wave {
    position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border-radius: var(--r-circle); pointer-events: none; z-index: 0;
    background: radial-gradient(circle, rgba(255,190,110,.95), rgba(var(--amber-rgb),.55) 55%, rgba(var(--amber-rgb),0) 78%);
    transform: scale(0); animation: hhWave .8s cubic-bezier(.16,.7,.2,1) forwards;
  }
  /* held bright through the first 35% so overlapping waves read as one trail */
  @keyframes hhWave {
    0%   { transform: scale(0);  opacity: 1; }
    35%  { transform: scale(6);  opacity: .85; }
    100% { transform: scale(10); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .hh-send .hh-wave { display: none; } }
  /* ── CTA screen (#ev-close) mobile ─────────────────────────────── */

  /* solid paper background so the section properly covers the Everywhere
     screen during and after the phase transition */
  #ev-close { background: var(--paper, #f7f6f3); }

  /* content is tall now (headline + CTA + 6 cards + foot) — centre it between
     the absolute logo at top and the fixed navcluster at bottom */
  #ev-close .close-wrap {
    flex: 1 !important;
    /* 3 zones: [title + note] top, [button + cards] middle, foot bottom — the auto
       margins on .cta-dock and .m-cta-foot split the free space */
    justify-content: flex-start !important;
    padding-top: clamp(80px, 11.5vh, 104px) !important;  /* drops the title clear of the logo */
    padding-bottom: clamp(70px, 10vh, 100px) !important; /* clears bottom navcluster */
  }
  /* the note now rides directly under the h1 (JS moves it out of the button cluster) */
  #ev-close .close-wrap > .m-close-note {
    margin: 12px auto 0 !important; max-width: 92vw;
    font-size: var(--fs-eyebrow); line-height: 1.45; color: var(--ink-45, rgba(var(--ink-rgb),.5));
  }
  #ev-close .cta-dock { margin-top: auto !important; }   /* push the middle cluster down off the title+note */

  /* topbar install pill is useless on mobile (Chrome Web Store rejects it) */
  .topbar .pill { display: none !important; }
  /* the language toggle takes that corner: padding = thumb-sized hit area, the
     negative margins cancel it so the topbar keeps the height --m-topbar mirrors */
  .topbar .nav-links { pointer-events: auto; }
  .lang-switch-nav { padding: 10px 12px; margin: -10px -12px -10px 0; }
  /* pricing's "Add to Chrome" gives way to the "Send to desktop" button beside it */
  #pricing-cta { display: none !important; }

  /* ── Everywhere→Install seam: clear the wall fast, then ease the install chrome
     in as the six cards dock, instead of cross-fading one headline through the
     other. Only during .m-cta-flip (lantern-everywhere.js), so back-nav keeps the
     plain symmetric fade. */
  body.m-cta-flip #finale   { transition: opacity .3s ease; }
  body.m-cta-flip #ev-close { transition: opacity .46s ease .3s; }

  /* P1 inline share prompt (its margin is set by .hh-dock .m-hcta-note above) */
  .m-hcta-note {
    font-size: var(--fs-sm);
    color: var(--ink-45, rgba(var(--ink-rgb),.45));
    letter-spacing: .01em;
  }
  /* push Everywhere content below the fixed topbar */
  #finale { padding-top: calc(var(--nav, 72px) + 16px) !important; }

  /* hide nav on CTA — full vertical space for the 3+3+button layout */
  body.ph-cta .topbar { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
  /* …and reclaim its height: no nav offset (beats #ev-close's inline padding-top) */
  #ev-close { padding-top: 0 !important; }

  /* the share button, primary CTA on mobile: fill follows the surface — this base
     sits on the dark sections, so it is the white pill */
  .m-share-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: none; cursor: pointer; white-space: nowrap;
    font-family: var(--sans); font-weight: 600; font-size: var(--fs-read); letter-spacing: -.01em;
    min-height: var(--cta-h); padding: 0 var(--cta-px); border-radius: var(--r-pill);
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-1);
  }
  .m-share-btn:hover { background: var(--paper-2); }
  .m-share-btn svg { width: 18px; height: 18px; flex: none; }
  .m-share-btn:active { opacity: .88; }
  /* …except on the CTA screen, where it starts INK and the bead arrivals
     heat it to amber (inline background-color from lantern-cta-charge.js) */
  #ev-close .m-share-btn {
    background: var(--ink, #1a1714);
    /* label follows the fill for contrast: white while ink, ink once .blazing
       marks it fully amber, eased on the same .45s as the background */
    color: #fff;
    position: relative; overflow: hidden;
    /* resting = elevation tier 1, leaving .blazing a tier to rise to */
    box-shadow: var(--shadow-1);
    transition: background-color .45s ease, color .45s ease, box-shadow .45s ease, opacity var(--dur-1);
  }
  #ev-close .m-share-btn > span:not(.d1-warm),
  #ev-close .m-share-btn > svg { position: relative; z-index: 2; }
  /* lit state: one elevation tier above rest, plus the off-scale amber halo */
  #ev-close .m-share-btn.blazing {
    color: var(--ink);
    box-shadow: 0 18px 40px -12px rgba(var(--amber-rgb),.65), var(--shadow-2);
  }
  /* ── P5: comic beats for the self-playing exercise ───────────────── */
  .ex-bubble {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    z-index: 30; white-space: nowrap;
    font-family: var(--sans, 'General Sans', sans-serif);
    font-weight: 700; font-size: var(--fs-sm); letter-spacing: .01em;
    background: #fff; color: #c43c3c;
    border: 2px solid var(--ink); border-radius: var(--r-md);
    padding: 6px 11px;
    /* off-tier: hard-offset "sticker" shadow — comic ink, not elevation */
    box-shadow: 3px 3px 0 rgba(var(--ink-rgb),.85);
    transform: translateX(-50%) scale(.5) rotate(-4deg);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2,1.6,.35,1), opacity var(--dur-1) ease;
    pointer-events: none;
  }
  .ex-bubble::after {                /* the comic tail */
    content: ""; position: absolute; bottom: -6px; left: 50%;
    width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg);
    background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  }
  .ex-bubble.show { transform: translateX(-50%) scale(1) rotate(-4deg); opacity: 1; }

  .ex-success {
    position: fixed; left: 50%; top: 42%;
    z-index: var(--z-toast); text-align: center;
    background: #fff; border: 2px solid var(--ink); border-radius: var(--r-xl);
    padding: 22px 34px 20px;
    /* layer 1: off-tier sticker ink; layer 2: modal elevation tier */
    box-shadow: 5px 6px 0 rgba(var(--ink-rgb),.85), var(--shadow-4);
    transform: translate(-50%,-50%) scale(.55) rotate(2deg);
    opacity: 0;
    transition: transform .3s cubic-bezier(.2,1.5,.35,1), opacity .18s ease;
    pointer-events: none;
  }
  .ex-success.show { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1; }
  .ex-success .exs-ic {
    width: 44px; height: 44px; margin: 0 auto 10px;
    border-radius: var(--r-circle); background: var(--green, #2f9e5f); color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .ex-success .exs-ic svg { width: 24px; height: 24px; }
  .ex-success .exs-h {
    font-family: var(--sans, 'General Sans', sans-serif);
    font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--ink, #1a1714);
  }
  .ex-success .exs-sub {
    font-size: var(--fs-sm); color: var(--ink-45, rgba(var(--ink-rgb),.55)); margin-top: 3px;
  }

  /* ── Everywhere screen: logo + domain + 2 lines of live article text, so the
     simplify cascade is visible on mobile ── */
  .pg-head { display: none; }
  .pg-stack { display: grid; }
  .pg-stack > p { font-size: var(--fs-eyebrow); line-height: 1.42; -webkit-line-clamp: 2; }
  .pg-body { padding: 9px 13px 11px; }
  /* 2-column cards: width lives on .pg-float (the flex item) as half the wall
     minus half the gap, so two always fit; .pg fills its wrapper */
  .pg-float { width: min(190px, calc(50% - 6px)); }
  .pg {
    width: 100%;
    box-shadow: var(--shadow-1);
  }
  /* show all 6 (overrides the ≤600px display:none in lantern-v3.css) */
  .pg-float:nth-child(n+5) { display: block; }
  /* title forced onto ONE line — shrink to fit, never wrap */
  .ev-title { white-space: nowrap !important; font-size: clamp(18px, 6.6vw, 34px) !important; line-height: 1.05; margin-bottom: 10px; }
  /* stack from the top, under the logo */
  #finale.ev { justify-content: flex-start !important; }
  /* 2-column wall */
  .ev-wall { gap: 12px !important; max-width: 420px !important; }
  /* swipe-to-simplify hint (touch only) — mono micro-copy under the subtitle */
  .ev-swipe {
    display: block; margin: 26px 0 clamp(14px, 2vh, 22px);
    font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .12em;
    text-transform: uppercase; color: var(--amber-deep); z-index: 5;
  }
  .ev-swipe-arr { display: inline-block; animation: evSwipeArr 1.4s ease-in-out infinite; }
  @keyframes evSwipeArr { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

  /* ── CTA screen: button+note isolated at TOP, six pills in a 3×2 grid below,
        wires run UP into the button ─ */

  /* "Add to Chrome" can't install on a phone — the dock's "Send to desktop" is the CTA */
  #ev-close .d1-track { display: none !important; }

  /* a quiet brand mark top-left replaces the hidden topbar logo */
  #ev-close .m-cta-logo {
    display: flex; align-items: center; gap: 8px;
    position: absolute; top: 18px; left: 18px; z-index: 6;
    font-weight: 600; font-size: var(--fs-read); letter-spacing: -.01em;
    color: var(--ink, #1a1714);
  }
  #ev-close .m-cta-logo .lmark { width: 21px; height: 21px; }

  /* dock = vertical grid; JS puts .m-close-cta first (top), then the 3×2 pills,
     then .m-cta-foot (email + reassurance) last */
  #ev-close .cta-dock {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--m-vgap) 8px;
    position: relative !important;     /* anchors the .ev-wires overlay */
    inset: auto !important;
    width: 100%;
    z-index: var(--z-base) !important;
    pointer-events: none;
  }
  /* the button block: isolated full-width TOP row, generous air below so the
     wires have a clean lane up from the pills (no copy for them to cross) */
  #ev-close .cta-dock > .m-close-cta {
    grid-column: 1 / -1;
    order: 0;
    position: relative; z-index: 4;
    pointer-events: auto;
    display: flex !important;
    flex-direction: column; align-items: center; gap: var(--m-vgap);
    text-align: center;
    margin: 0 0 var(--m-vgap);
  }
  /* the Install screen fits in one screen: headline at the phase-title size, and
     no max-width cap so the <br> alone controls the two-line break */
  #ev-close .d1-headline { font-size: clamp(24px, 8vw, 31px) !important; line-height: 1.12; max-width: none !important; margin: 0 0 var(--m-vgap) !important; }
  #ev-close .m-close-cta .m-close-note {
    margin: 0; font-size: var(--fs-eyebrow); line-height: 1.45;
    color: var(--ink-45, rgba(var(--ink-rgb),.5));
  }
  /* foot: built in JS (lantern-cta-charge.js mLayout), dropped to the bottom band */
  #ev-close .m-cta-foot {
    width: 100%;
    margin-top: auto !important;   /* second auto margin — drops the foot to the bottom band */
    pointer-events: auto;
    display: flex; flex-direction: column; align-items: center; gap: 11px;
    text-align: center;
  }
  #ev-close .m-cta-foot .m-hero-hint {
    margin: 0; font-size: var(--fs-eyebrow); color: var(--ink-45, rgba(var(--ink-rgb),.5));
  }
  /* cards: grid items, floating on their own ellipse */
  @keyframes dkfloatM {
    0%   { transform: translateY(0px) rotate(.3deg); }
    25%  { transform: translateY(calc(var(--ay, 3px) * -.65)) rotate(0deg); }
    50%  { transform: translateY(calc(var(--ay, 3px) * -1)) rotate(-.3deg); }
    75%  { transform: translateY(calc(var(--ay, 3px) * -.65)) rotate(0deg); }
    100% { transform: translateY(0px) rotate(.3deg); }
  }
  #ev-close .dk-card {
    position: relative !important;
    left: auto !important; top: auto !important;
    /* kill the desktop dkFloat: its translate(-50%,-50%) would park a pre-.in card
       off its grid cell exactly when slotsMobile measures it. No !important, so
       .in's dkfloatM wins. */
    animation: none;
    transform: none;
    /* fit the 1fr cell; min-width:0 defeats the grid item's auto minimum */
    width: 100% !important; min-width: 0; box-sizing: border-box;
    /* solid: no desktop "recessed" wash on the small phone cards */
    opacity: 1 !important; filter: none !important;
  }
  #ev-close .dk-card.in {
    animation: dkfloatM var(--fd, 8s) ease-in-out var(--fdelay, 0s) infinite;
  }
  @media (prefers-reduced-motion: reduce) { #ev-close .dk-card.in { animation: none; } }
  /* top row: Translate · Exercises · Save  |  bottom row: Simplify · … · Immerse */
  #ev-close .dk-card[data-feat="translate"]  { order: 1; }
  #ev-close .dk-card[data-feat="exercises"]  { order: 2; }
  #ev-close .dk-card[data-feat="save"]       { order: 3; }
  #ev-close .dk-card[data-feat="simplify"]   { order: 4; }
  #ev-close .dk-card[data-feat="immerse"]    { order: 6; }
  /* compact: 3-col cards are narrower, trim padding so previews still fit */
  #ev-close .dk-in  { padding: 7px 8px 8px; }
  #ev-close .dk-top { margin-bottom: 4px; }
  #ev-close .dk-prev { display: flex; font-size: 9px; line-height: 1.3; min-height: 0; padding: 5px 6px; gap: 3px; overflow: hidden; }
  /* the rigid preview chips shrink and wrap to fit the narrow card */
  #ev-close .dk-prev > * { max-width: 100%; min-width: 0; }
  #ev-close .dkw  { flex-wrap: wrap; font-size: 9px; padding: 2px 5px; gap: 3px 5px; }
  #ev-close .dkw i { font-size: 8px; }
  #ev-close .dktr { flex-wrap: wrap; font-size: 9px; gap: 3px 5px; }
  #ev-close .dktr .s { flex-basis: 100%; }   /* source word on line 1, →translation on line 2 */
  #ev-close .dk-ic { width: 26px !important; height: 26px !important; border-radius: var(--r-sm) !important; } /* more breathing, same svg */

  /* normalise: every card's context text at 9px, every emphasised word at one size */
  #ev-close .dkcz,
  #ev-close .dksm,
  #ev-close .dkim { font-size: 9px !important; line-height: 1.4 !important; }
  #ev-close .dkw b,
  #ev-close .dkok,
  #ev-close .dktr .t,
  #ev-close .dkcz .gap,
  #ev-close .dksm b,
  #ev-close .dkim b { font-size: var(--fs-micro) !important; line-height: 1.25 !important; }
  /* "phenomenon", the longest highlighted word, needs a tighter pill */
  #ev-close .dkcz .gap { padding: 0 4px !important; }

  /* Simplify: 2 rows — struck text + arrow on row 1, the payoff on row 2 */
  #ev-close .dksm { row-gap: 2px !important; column-gap: 4px !important; align-items: baseline !important; }
  #ev-close .dksm s { font-size: 7.5px !important; }
  #ev-close .dksm b { flex-basis: 100% !important; }

  /* Save: the level badge sits in the card's top-right corner, so the word pill
     holds one line */
  #ev-close .dk-card[data-feat="save"] .dk-prev { position: relative; }
  #ev-close .dkw .cefr-b {
    position: absolute !important; top: 4px !important; right: 5px !important;
    font-size: 7px !important; padding: 1px 3px !important; border-radius: 3px !important;
  }

  /* the REAL wires: the desktop SVG bead engine, vertical geometry —
     absolute overlay across the whole 3+button+3 grid */
  #ev-close .ev-wires {
    display: block !important;       /* lantern-v3.css hides it under 980px */
    position: absolute !important;
    inset: 0 !important;
    width: 100%; height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 3;
  }
}