/* ============================================================================
   menu-v2 — a replacement mobile menu, built fresh.

   Deliberately namespaced .m2-* and kept in its own file so it cannot touch the
   live menu. Loaded AFTER v4.css purely to inherit its tokens and webfonts.

   Rules learned the hard way on 2026-08-10, all of which this obeys:
   - NO inline styles anywhere. style-src is 'self' with no unsafe-inline, so a
     style attribute set from JS is dropped silently. Every state is a class.
   - The tap highlight is never suppressed. -webkit-tap-highlight-color is the
     only feedback iOS gives before JS runs, and removing it made a tap feel dead.
   - The overlay covers the viewport, so there is no page behind it to half-paint
     while Safari unloads the old document, which is what made the old menu appear
     to dissolve mid-tap.
   - The panel scrolls itself and is capped to the viewport, so it cannot run off
     the bottom of a short phone and strand the last item.
   ============================================================================ */

/* ---------- header (test page only; the real header keeps its own styles) --- */
.m2-hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);}
.m2-hdr-in{display:flex;align-items:center;gap:12px;max-width:1152px;margin:0 auto;
           padding:14px 20px;padding-left:max(20px,env(safe-area-inset-left));
           padding-right:max(20px,env(safe-area-inset-right));}
.m2-hdr .logo{margin-right:auto;}

.m2-burger{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;
           background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);
           cursor:pointer;transition:background .12s ease,border-color .12s ease;}
.m2-burger:active{background:var(--coral-wash);border-color:var(--coral-line);}
.m2-burger:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

/* ---------- the overlay ---------------------------------------------------- */
/* [hidden] is spelled out because a display rule on the same element would beat
   the UA default and leave the menu permanently on screen. */
.m2-menu[hidden]{display:none;}
.m2-menu{position:fixed;inset:0;z-index:100;background:#fff;display:flex;flex-direction:column;
         /* dvh, because mobile browser chrome makes vh report a taller viewport than
            you actually get, which is how the old menu lost its last item. */
         height:100dvh;overscroll-behavior:contain;
         animation:m2in .18s var(--ease) both;}
@keyframes m2in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.m2-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;
        padding:14px 20px;padding-top:max(14px,env(safe-area-inset-top));
        padding-left:max(20px,env(safe-area-inset-left));
        padding-right:max(20px,env(safe-area-inset-right));
        border-bottom:1px solid var(--line);}
.m2-close{width:48px;height:48px;display:grid;place-items:center;background:#fff;
          border:1px solid var(--line);border-radius:12px;color:var(--ink);cursor:pointer;
          transition:background .12s ease,border-color .12s ease;}
.m2-close:active{background:var(--coral-wash);border-color:var(--coral-line);}
.m2-close:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

/* The scrolling middle. flex:1 with min-height:0 so it actually shrinks rather
   than pushing the footer off the bottom. */
.m2-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
           padding:8px 20px 20px;
           padding-left:max(20px,env(safe-area-inset-left));
           padding-right:max(20px,env(safe-area-inset-right));}

/* ---------- rows ----------------------------------------------------------- */
.m2-nav{display:flex;flex-direction:column;}
.m2-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
        min-height:56px;padding:8px 12px;margin-inline:-12px;border-radius:12px;
        font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-0.02em;
        color:var(--ink);text-decoration:none;cursor:pointer;
        transition:background-color .12s ease,color .12s ease;}
.m2-row:active{background-color:var(--coral-wash);color:var(--coral-ink);}
.m2-row:focus-visible{outline:3px solid var(--blue);outline-offset:-2px;}
.m2-row+.m2-row,.m2-group+.m2-row,.m2-row+.m2-group{border-top:1px solid var(--line);}

/* ---------- the Features disclosure ---------------------------------------- */
/* A native <details>, so it opens and closes with no JavaScript at all and is
   keyboard and screen-reader correct for free. */
.m2-group summary{list-style:none;}
.m2-group summary::-webkit-details-marker{display:none;}
.m2-chev{flex:0 0 auto;transition:transform .18s var(--ease);color:var(--ink-soft);}
.m2-group[open] .m2-chev{transform:rotate(180deg);}
.m2-group[open] summary{color:var(--coral-ink);}

.m2-sub{display:flex;flex-direction:column;padding:2px 0 10px;}
.m2-sub a{display:flex;align-items:center;min-height:48px;padding:6px 12px 6px 20px;
          margin-inline:-12px;border-radius:10px;
          font-size:16.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;
          transition:background-color .12s ease,color .12s ease;}
.m2-sub a:active{background-color:var(--coral-wash);color:var(--coral-ink);}
.m2-sub a:focus-visible{outline:3px solid var(--blue);outline-offset:-2px;}

/* ---------- pinned footer -------------------------------------------------- */
.m2-foot{flex:0 0 auto;display:grid;gap:10px;border-top:1px solid var(--line);
         padding:14px 20px;padding-bottom:max(14px,env(safe-area-inset-bottom));
         padding-left:max(20px,env(safe-area-inset-left));
         padding-right:max(20px,env(safe-area-inset-right));}
.m2-foot .btn{width:100%;justify-content:center;}
.m2-login{display:flex;align-items:center;justify-content:center;min-height:48px;
          font-weight:500;color:var(--ink-soft);text-decoration:none;border-radius:10px;
          transition:background-color .12s ease;}
.m2-login:active{background-color:var(--coral-wash);}

/* Set on <html> while the overlay is up. A class, never element.style, because
   the CSP drops inline styles without an error. */
html.m2-locked,html.m2-locked body{overflow:hidden;}

/* Desktop never sees any of this: the burger and the overlay are mobile-only. */
@media (min-width:981px){
  .m2-burger{display:none;}
  .m2-menu{display:none !important;}
}