/* soyoki-menu.css — the mobile menu: works + util in ONE control (operator
   2026-09-21: "we can integrate them into one menu... a real hamburger menu
   with a drop down selection. i want mobile to feel like a well delivered
   mobile product"). Companion to soyoki-menu.js; loaded by the six shells.

   WHAT IT REPLACES. Two generations of mobile nav retire with this pair: the
   fold-dot (home's condensation engine, ported to the five subpages
   2026-09-08) and the dormant pill/sheet that engine had itself retired —
   deleted from every shell in the same commit, per A10: a superseded
   mechanism is removed, never annotated. Both carried only the works-index;
   the util links stayed in the left rail at 10px vertical type — ~10px tap
   targets against WCAG 2.5.8's 24px floor and the HIG's 44pt. One menu now
   carries both groups. The rail keeps the wordmark and the © line; its util
   links hide below 980 and their handlers stay wired — the menu PROXIES
   them, so each page's own behaviour (home's camera fly, the shells'
   showPage) keeps its single owner.

   MATERIAL: the family's one glass, the dot's own spec (operator 2026-09-08:
   quiet cream fill, real backdrop blur, one made hairline edge, one top
   light line, tight seat — no painted pearl, no drop shadow). Open, the
   surface takes the shell's ground through --sy-menu-bg so sk-02's cream
   page inverts with one token override instead of a fork; type inks ride the
   page's own --ink/--ink-dim/--hair, which already flip there.

   THE MORPH IS DRIVEN FROM JS (soyoki-menu.js) in SK-04's auth dialect —
   fork discipline: NO CSS transition may touch the box's size or the items'
   opacity (the fork's standing adjudication, recorded at soyoki-waitlist.js).
   The transitions declared here are the two things outside that contract:
   the button's entrance opacity, and the burger-to-X icon, which is an icon
   easing between two rest states, not the morphing box. */
@media (max-width:980px){
  .index{display:none!important}   /* the desktop works-dial steps aside — the menu carries the works. !important because the shells' boot rides the dial via inline transform/opacity writes. */
  .rail .util{display:none}        /* the util links live in the menu now; their nodes stay for the menu's proxy clicks (a display:none element still dispatches) */
  html body .chrome{z-index:8}     /* the family trap (shared CSS l.7): .chrome ships at z2 and .pages at z7, so without this the rail sits UNDER every panel and its tint. The retired dot blocks each carried this line; it moves here so the order — page < pages(7) < chrome(8) — has one owner on mobile as the shells' 981+ blocks give it one on desktop. */

  /* NO VESSEL (operator 2026-09-21: "don't put the hamburger icon in a circle").
     Closed, the control is three bare hairlines — the site's own line vocabulary,
     no glass, no edge. The sheet's material arrives WITH the open morph.
     THE LINES SENSE THEIR GROUND, the wordmark's own mechanism reused verbatim:
     soyoki-shared.js sets html.sy-gnd-warm/-dark through veils and the loader's
     cream sheet, and the rules below flip the ink exactly as .mark's do (same
     two colours, same .9s ease). At rest the ink is the page's own --ink through
     --sy-menu-ink, so sk-02's cream page reads dark and the dark shells read
     cream with no fork; sk-04 (light ground, scoped vars) sets the token
     locally. --sy-menu-lift is the scene lift for type over live material —
     the dark shells' drop shadow; the light pages set it to none. */
  #symenu{
    position:fixed;top:calc(env(safe-area-inset-top,0px) + 5px);right:16px;z-index:102;
    /* 14 -> 5 (operator 2026-09-25: "top aligned to the wordmark"). Measured,
       not eyeballed: the icon's first line sits 16.25px into the 44px box
       (centre 22 − translateY 5 − half-height .75), and the family mark's ink
       top is 22px — box top 5 + 16.25 ≈ 21 lands line 1 on the mark's cap.
       Family-wide, keyed to the shared .mark{top:22px}; sk-04 styles its own
       chrome and may re-seat locally if its mark differs. */
    box-sizing:border-box;width:44px;height:44px;overflow:hidden;
    background:transparent;border:1px solid transparent;border-radius:16px;
    transition:background-color .32s ease,border-color .32s ease,opacity .8s ease;
    /* 44px — the HIG floor the peer set clears everywhere. */
    opacity:0;   /* entrance only — arrives when the sheet lifts (JS), no ceremony */
  }
  #symenu.is-up{opacity:1}
  #symenu.is-open{
    width:min(78vw,320px);height:auto;max-height:calc(100dvh - 96px);border-radius:16px;
    background:var(--sy-menu-bg,rgba(14,13,11,.92));border-color:var(--hair);
    -webkit-backdrop-filter:blur(16px) saturate(1.06);backdrop-filter:blur(16px) saturate(1.06);
  }

  /* the toggle holds the top-right corner through the morph — the pill's own
     grammar ("the X holds the burger's corner while the pill grows leftward") */
  #symenuBtn{position:absolute;top:0;right:0;width:44px;height:44px;z-index:2;
    appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  #symenuBtn:focus-visible{outline:1px solid var(--ink-dim);outline-offset:4px;border-radius:22px}
  /* THE LINES' MOTION IS WAAPI (soyoki-menu.js morphIcon, the SK-04 spring) —
     NO transform/opacity transition here: that motion is JS-owned and two
     writers on one property is the documented trap. Only background-color
     transitions, for the ground-sense flip (the wordmark's mechanism). The
     rest geometry (l1 up, l3 down) is the base state the morph animates from
     and to. */
  #symenuBtn .ln{position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-0.75px 0 0 -8px;
    background:var(--sy-menu-ink,var(--ink));border-radius:1px;
    filter:var(--sy-menu-lift,drop-shadow(0 1px 6px rgba(0,0,0,.55)));
    transition:background-color .9s cubic-bezier(.4,0,.2,1)}
  html.sy-gnd-warm #symenuBtn .ln{background:rgb(106,101,90);filter:none}
  html.sy-gnd-dark #symenuBtn .ln{background:rgb(236,231,221)}
  #symenu.is-open #symenuBtn .ln{filter:none}   /* over the sheet's own ground the lift is done */
  #symenuBtn .l1{transform:translateY(-5px)}
  #symenuBtn .l3{transform:translateY(5px)}

  #symenuList{display:block;padding:50px 0 10px;max-height:calc(100dvh - 150px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  /* rows at >=44px through their own padding — the floor the menu exists to clear */
  #symenu .mi{display:flex;flex-direction:column;gap:3px;box-sizing:border-box;width:100%;
    margin:0;padding:12px 18px;border-bottom:1px solid var(--hair);
    background:transparent;text-align:left;text-decoration:none;color:var(--ink);
    opacity:.72;-webkit-tap-highlight-color:transparent}
  #symenu .mi:active{opacity:1}
  #symenu .mi:focus-visible{outline:1px solid var(--ink-dim);outline-offset:-2px}
  #symenu .mi.is-here{opacity:1}   /* the page you are on — lit, inert (JS), the rail's own nav-on grammar */
  #symenu .mi-nm{font-family:var(--grotesk);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
  #symenu .mi-st{font:400 12.5px/1.3 var(--serif);color:var(--ink-dim)}
  #symenu .mi-div{display:block;height:8px;border-bottom:0}   /* air between the two registers; the last work row's hairline is the seam */
  #symenu .mi-util{flex-direction:row;align-items:center;min-height:44px;padding:12px 18px;
    font-family:var(--grotesk);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
  #symenu .mi-util:active{color:var(--ink)}
  #symenu .mi:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  #symenu{transition:none}
  #symenuBtn .ln{transition:none}
}