/* ============================ MOBILE NAVIGATION ============================
   The drawer behind the burger (<=1340px, where 13-responsive.css hides .menu).

   It used to be a plain block of 13 grey text links that appeared with a bare
   display:none -> flex — no icons, no grouping, no active state, no motion, and
   a "Get Premium" that looked exactly like every other row. This file rebuilds
   it as a full-height sheet: grouped, icon-led rows that stagger in, the current
   page lit with its own accent, and the CTA pinned to the bottom rail.

   POSITIONING NOTE — the drawer is a child of <header>, and the header sets
   `backdrop-filter`, which makes it the containing block for *fixed* descendants
   as well as absolute ones. So `position:fixed` here would be trapped inside the
   ~63px header box, not the viewport. `position:absolute; top:100%` is the
   reliable form: the header IS the containing block, so the sheet lands exactly
   under it and `calc(100dvh - 100%)` (100% = the header's own height) fills the
   rest of the screen. Staying inside <header> also means every takeover mode
   that hides the header (body.writing-mode et al) hides the drawer for free.
   ========================================================================== */

/* Above the burger breakpoint the drawer does not exist at all. */
.mobile-menu{ display:none; }

@media (max-width:1340px){

  .mobile-menu{
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    height:calc(100dvh - 100%);
    z-index:5;
    background:
      radial-gradient(120% 42% at 50% 0%, rgba(198,242,78,.07), transparent 60%),
      linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 42%);
    border-top:1px solid var(--glass-line);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    overflow:hidden;

    /* Closed state. Kept in the DOM (rather than display:none) so the sheet can
       animate BOTH ways; pointer-events + visibility keep it untouchable and out
       of the tab order while it is closed. */
    visibility:hidden; pointer-events:none;
    opacity:0; transform:translateY(-14px);
    transition:
      opacity .2s ease,
      transform .42s cubic-bezier(.2,.9,.25,1),
      visibility 0s linear .25s;
  }
  .mobile-menu.open{
    visibility:visible; pointer-events:auto;
    opacity:1; transform:none;
    transition:
      opacity .18s ease,
      transform .46s cubic-bezier(.16,1.1,.3,1),
      visibility 0s;
  }

  /* soft accent bloom bleeding down from the header seam — pure decoration */
  .mm-glow{
    position:absolute; top:-40%; left:50%; width:150%; height:80%;
    transform:translateX(-50%);
    background:
      radial-gradient(closest-side, rgba(139,109,255,.16), transparent 72%);
    filter:blur(20px);
    pointer-events:none;
  }

  /* ---- scrolling list ------------------------------------------------- */
  .mm-scroll{
    flex:1 1 auto; min-height:0;                 /* min-height:0 or flex won't let it scroll */
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;                 /* don't chain the scroll to the page */
    padding:10px 16px 16px;
    display:flex; flex-direction:column; gap:1px;
    /* fade the last row out as it runs under the footer rail, so it reads as
       "there is more below" rather than a hard cut */
    -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 28px), transparent);
            mask-image:linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  }

  .mm-eyebrow{
    margin:12px 0 4px; padding:0 12px;
    font-family:'Hanken Grotesk','Native Emoji',sans-serif;
    font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); opacity:.72;
  }
  .mm-scroll > .mm-item:first-child + .mm-eyebrow{ margin-top:10px; }

  /* ---- a row ----------------------------------------------------------- */
  .mobile-menu .mm-item{
    position:relative;
    display:grid; grid-template-columns:38px 1fr auto auto;
    align-items:center; gap:12px;
    padding:8px 12px; min-height:50px;           /* comfortably past the 44px touch floor */
    border-radius:14px;
    text-decoration:none; color:var(--muted);
    font-family:'Hanken Grotesk','Native Emoji',sans-serif;
    font-weight:650; font-size:15.5px;
    -webkit-tap-highlight-color:transparent;
    transition:background .18s ease, color .18s ease, transform .13s ease;
  }
  /* The rail marker for the current page. It sits in the sheet's 16px gutter
     (left:-9px), NOT flush with the row: flush against the row's own tinted
     background it just read as a stray sliver rather than an indicator. */
  .mobile-menu .mm-item::before{
    content:""; position:absolute; left:-9px; top:50%;
    width:3px; height:0; border-radius:3px;
    background:var(--ic, var(--lime));
    box-shadow:0 0 12px -1px var(--ic, var(--lime));
    transform:translateY(-50%);
    transition:height .28s cubic-bezier(.2,.9,.25,1);
  }

  .mm-ic{
    width:38px; height:38px; border-radius:12px;
    display:grid; place-items:center;
    color:var(--ic, var(--lime));
    background:var(--glass);
    background:color-mix(in srgb, var(--ic, var(--lime)) 13%, transparent);
    border:1px solid var(--glass-line);
    border-color:color-mix(in srgb, var(--ic, var(--lime)) 24%, transparent);
    transition:background .18s ease, border-color .18s ease, transform .22s cubic-bezier(.2,.9,.25,1);
  }
  .mm-ic svg{ width:19px; height:19px; }

  .mm-label{ min-width:0; }

  .mm-badge{
    font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    padding:3px 7px; border-radius:99px; white-space:nowrap;
    color:var(--on-lime); background:var(--lime);
    box-shadow:0 2px 10px -3px rgba(198,242,78,.7);
  }

  .mm-go{
    width:17px; height:17px; color:var(--muted); opacity:.42;
    transition:transform .2s ease, opacity .2s ease;
  }

  /* Touch has no hover, so the press state carries the feedback. :active fires
     on tap; the hover arm is for the tablet/desktop widths this drawer also
     covers (up to 1340px). */
  .mobile-menu .mm-item:active{ transform:scale(.982); }
  .mobile-menu .mm-item:active,
  .mobile-menu .mm-item:hover,
  .mobile-menu .mm-item:focus-visible{
    color:var(--text);
    background:var(--glass);
  }
  .mobile-menu .mm-item:active .mm-ic,
  .mobile-menu .mm-item:hover .mm-ic{
    background:color-mix(in srgb, var(--ic, var(--lime)) 22%, transparent);
    border-color:color-mix(in srgb, var(--ic, var(--lime)) 40%, transparent);
    transform:translateY(-1px);
  }
  .mobile-menu .mm-item:active .mm-go,
  .mobile-menu .mm-item:hover .mm-go{ transform:translateX(3px); opacity:.8; }
  .mobile-menu .mm-item:focus-visible{ outline:2px solid var(--ic, var(--lime)); outline-offset:-2px; }

  /* ---- current page ----------------------------------------------------- */
  .mobile-menu .mm-item.active{
    color:var(--text);
    background:var(--glass);
    background:linear-gradient(
      90deg,
      color-mix(in srgb, var(--ic, var(--lime)) 15%, transparent),
      color-mix(in srgb, var(--ic, var(--lime)) 3%, transparent) 62%,
      transparent);
  }
  .mobile-menu .mm-item.active::before{ height:22px; }
  .mobile-menu .mm-item.active .mm-ic{
    color:var(--on-lime);
    background:var(--ic, var(--lime));
    border-color:transparent;
    box-shadow:0 6px 18px -6px color-mix(in srgb, var(--ic, var(--lime)) 75%, transparent);
  }
  .mobile-menu .mm-item.active .mm-go{ opacity:.75; }

  /* ---- the Library tile strip ------------------------------------------
     Same .mm-item, laid out as three stacked-icon tiles instead of rows, so it
     inherits every press / focus / active rule above and only has to undo the
     row-specific geometry. */
  .mm-tiles{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
    margin-top:2px;
  }
  .mobile-menu .mm-item.mm-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; min-height:0; padding:10px 6px;
    font-size:12.5px; font-weight:700; text-align:center;
    border:1px solid var(--glass-line);
    background:var(--glass);
  }
  .mobile-menu .mm-item.mm-tile::before{ display:none; }   /* the rail marker is a row idiom */
  .mm-tile .mm-ic{ width:32px; height:32px; border-radius:10px; }
  .mm-tile .mm-ic svg{ width:16px; height:16px; }
  .mobile-menu .mm-item.mm-tile.active{
    border-color:color-mix(in srgb, var(--ic, var(--lime)) 45%, transparent);
  }

  /* ---- pinned bottom rail ---------------------------------------------- */
  /* One row, not two stacked buttons: stacking cost 56px of vertical space and
     that was the difference between the Library tiles fitting on a 812px phone
     and being sliced in half. When the user is logged in updateAuthUI() sets
     .mm-login to display:none inline and the CTA simply flexes to full width. */
  .mm-foot{
    flex:0 0 auto;
    display:flex; align-items:stretch; gap:9px;
    padding:11px 16px max(13px, env(safe-area-inset-bottom));
    border-top:1px solid var(--glass-line);
    background:var(--bg);
  }
  .mm-login{ flex:0 0 auto; }
  .mm-premium{ flex:1 1 auto; }
  .mm-login{
    font-family:'Hanken Grotesk','Native Emoji',sans-serif;
    font-weight:700; font-size:15px;
    padding:12px 16px; min-height:46px; border-radius:13px;
    color:var(--text); background:transparent;
    border:1px solid var(--glass-line); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .18s ease, transform .13s ease;
  }
  .mm-login:active{ background:var(--glass); transform:scale(.985); }

  .mm-premium{
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Hanken Grotesk','Native Emoji',sans-serif;
    font-weight:800; font-size:15.5px;
    padding:13px 16px; min-height:50px; border-radius:14px;
    border:none; cursor:pointer;
    color:var(--on-lime);
    background:linear-gradient(120deg, var(--lime), var(--cyan) 78%);
    box-shadow:0 10px 26px -10px rgba(198,242,78,.65);
    -webkit-tap-highlight-color:transparent;
    transition:transform .13s ease, box-shadow .2s ease;
  }
  .mm-premium svg{ width:18px; height:18px; }
  .mm-premium:active{ transform:scale(.985); box-shadow:0 6px 16px -8px rgba(198,242,78,.6); }
  /* slow sheen sweep so the CTA is the one thing on screen that moves */
  .mm-premium-sheen{
    position:absolute; top:0; left:-60%; width:45%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-18deg); pointer-events:none;
  }
  .mobile-menu.open .mm-premium-sheen{ animation:mmSheen 3.6s ease-in-out 1s infinite; }
  @keyframes mmSheen{
    0%,72%  { left:-60%; }
    100%    { left:130%; }
  }

  /* ---- entrance stagger -------------------------------------------------
     Per the house rule, the hidden start state lives in the keyframes (plus
     `both`), never as a resting opacity:0 — an element parked at 0 that never
     gets its animation reads as a hole in the layout. */
  @keyframes mmRowIn{
    from{ opacity:0; transform:translateY(9px); }
    to  { opacity:1; transform:none; }
  }
  .mobile-menu.open .mm-item,
  .mobile-menu.open .mm-eyebrow,
  .mobile-menu.open .mm-foot{
    animation:mmRowIn .34s cubic-bezier(.2,.9,.25,1) both;
    animation-delay:calc(var(--i, 0) * 21ms + 60ms);
  }

  /* ---- light theme ------------------------------------------------------
     The old drawer hard-coded a dark panel while its text used --muted/--text,
     so hovering a row in light mode turned it invisible. Everything here is
     token-driven; light only needs the surface re-tinted. */
  :root[data-theme="light"] .mobile-menu{
    background:
      radial-gradient(120% 42% at 50% 0%, rgba(101,163,13,.08), transparent 60%),
      linear-gradient(180deg, #ffffff 0%, var(--bg) 60%);
    box-shadow:0 30px 60px -24px rgba(30,40,80,.28);
  }
  :root[data-theme="light"] .mm-glow{
    background:radial-gradient(closest-side, rgba(109,40,217,.12), transparent 72%);
  }
  :root[data-theme="light"] .mm-foot{ background:var(--bg-soft); }
  /* The badge + CTA glows are keyed to the DARK theme's #c6f24e. Left alone they
     halo a deep-olive button with electric yellow-green. (The ink stays dark on
     both: measured 6.35:1 on the lime end, 5.33:1 on the cyan end, and it is the
     same pairing the header's own .btn-primary uses.) */
  :root[data-theme="light"] .mm-badge{ box-shadow:0 2px 8px -3px rgba(101,163,13,.55); }
  :root[data-theme="light"] .mm-premium{ box-shadow:0 10px 24px -12px rgba(8,145,178,.55); }
  :root[data-theme="light"] .mm-premium:active{ box-shadow:0 6px 14px -9px rgba(8,145,178,.5); }
  :root[data-theme="light"] .mm-premium-sheen{
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  }

  /* ---- tablets and small laptops ----------------------------------------
     The burger covers everything below 1340px, so this sheet also has to face
     an 834px iPad and a 1280px laptop. Left full-bleed there the rows stretch
     the whole width and the chevron ends up a hand's width from its label.
     Centre the column with padding (rather than a max-width on the sheet) so
     the surface and the footer's hairline still run edge to edge. */
  @media (min-width:540px){
    .mm-scroll, .mm-foot{
      padding-left:calc((100% - 460px) / 2);
      padding-right:calc((100% - 460px) / 2);
    }
  }

  /* ---- very short screens (landscape phones) ---------------------------- */
  @media (max-height:560px){
    .mobile-menu .mm-item{ min-height:46px; padding:6px 12px; }
    .mm-eyebrow{ margin:9px 0 3px; }
  }

  /* ---- reduced motion ---------------------------------------------------- */
  @media (prefers-reduced-motion:reduce){
    .mobile-menu{ transition:opacity .01s, visibility 0s; transform:none; }
    .mobile-menu.open{ transform:none; }
    .mobile-menu.open .mm-item,
    .mobile-menu.open .mm-eyebrow,
    .mobile-menu.open .mm-foot{ animation:none; }
    .mobile-menu.open .mm-premium-sheen{ animation:none; }
  }
}

/* ============================ THE BURGER ============================
   Three bars that morph into an ✕.

   Both display arms are written as media queries and the base rule declares no
   display at all. This file loads LAST, so any unconditional display here wins
   on source order and breaks one end or the other: `display:none` would beat
   13-responsive.css's `@media (max-width:1400px){ .burger{display:block} }` and
   delete the only navigation a phone has, while `display:inline-flex` would beat
   the hide arm below and leave a burger sitting next to the full desktop menu at
   1440px. Two mutually exclusive arms make source order irrelevant.

   ⚠ THE 1400px HERE IS A DUPLICATE of the burger breakpoint in 13-responsive.css
   — and because this file loads later, THIS copy is the one that decides. Change
   the two together or the header loses its navigation outright: when the value
   was raised in 13 alone, `.menu` correctly hid from 1400px down while this stale
   1341px arm went on hiding `.burger` from 1341px up, so every viewport in
   1341–1400 (a 1366px laptop, for one) rendered a header with no menu AND no
   burger. Keep these two numbers, and the 1401 in 13-responsive.css, in step. */
.burger{
  background:none; border:none; cursor:pointer;
  align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:11px;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease;
}
@media (min-width:1401px){ .burger{ display:none; } }
@media (max-width:1400px){ .burger{ display:inline-flex; } }
.burger:hover{ background:var(--glass); }
.burger-box{
  display:block; position:relative; width:20px; height:14px; margin:0 auto;
}
.burger-box i{
  position:absolute; left:0; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .34s cubic-bezier(.2,.9,.25,1), opacity .18s ease, width .34s cubic-bezier(.2,.9,.25,1);
}
.burger-box i:nth-child(1){ top:0;    width:100%; }
.burger-box i:nth-child(2){ top:6px;  width:72%; }
.burger-box i:nth-child(3){ top:12px; width:100%; }
.burger:hover .burger-box i:nth-child(2){ width:100%; }
.burger[aria-expanded="true"] .burger-box i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-box i:nth-child(2){ opacity:0; transform:scaleX(.2); }
.burger[aria-expanded="true"] .burger-box i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion:reduce){
  .burger-box i{ transition:opacity .01s; }
}

/* While the drawer is open the page behind it must not scroll under the sheet.

   This has to go on <html>, and on the Y axis only:
   - `overflow:hidden` on BODY makes body a scroll container, so the sticky
     header starts sticking to body's scrollport instead of the viewport. On an
     already-scrolled page that yanked the header up by exactly scrollY, and the
     sheet — anchored to the header with top:100% — went with it, leaving a
     strip of live page showing along the bottom edge.
   - the axis matters too: 31-responsive-global.css deliberately sets
     `overflow-x:clip` on <html> (clip, not hidden, so no scroll container is
     created and sticky keeps working). Writing the shorthand here would undo
     that; `overflow-y` alone leaves the X axis clipped. */
html.mm-open{ overflow-y:hidden; }