/* THE SHARED NARROW HEADER — AG-SITE-HEADER-760-0904 (Sol's contract = ruling 5,
   ops/evidence/SOL-SALON-PAGE-CHECK-0904/REVIEW.md). One grammar for every public route at ≤760px:
   a pill with three cells — compact brand · one `Hear it work` proof CTA · a 44×44 `Open menu`
   button — and a drawer that carries `For salons` plus every destination the route's own header
   carried. ABOVE 760 THIS FILE DOES NOTHING: #nh is display:none and the route's header is untouched,
   so the 1440 geometry is identical by construction.

   WHY. At ≤760 the homepage pill was full, so `For salons` was hidden (AGB-SALON-PAGE-0904 flag 3) —
   the phone had no header path to /salon/. Sol ruled the fix a shell-wide header, not a /salon/ patch,
   and wrote the geometry down. The numbers below are his, verbatim. */

#nh{display:none}

@media (max-width:760px){
  /* The route's own header steps aside. narrow-header.js marks it .nh-hidden (never removes it — the
     drawer's rows proxy its links and buttons, and account.js still toggles #pubhead). */
  .nh-hidden{display:none !important}
  /* Routes whose header sat IN the flow (start, room, the legal pages, account) lose that height when
     it hides; the pill is out of flow, so the body is padded to keep the content below it. */
  body.nh-pad{padding-top:92px !important;box-sizing:border-box}

  #nh{display:block;position:absolute;top:12px;left:12px;right:12px;width:calc(100% - 24px);z-index:60;
    font-family:Inter,system-ui,-apple-system,sans-serif}
  #nh.nh-fixed{position:fixed}
  .nh-pill{min-height:68px;padding:8px 12px;border-radius:34px;box-sizing:border-box;
    display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:8px;align-items:center;
    background:rgba(11,13,17,.9);box-shadow:0 18px 44px rgba(10,10,13,.45);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#f8f6f1}
  .nh-brand{display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none;color:inherit;
    font-family:Fraunces,Georgia,serif;font-size:11px;letter-spacing:.22em;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:44px}
  .nh-brand b{color:#cfae62;font-weight:600}
  .nh-brand .pm{flex:0 0 auto;width:28px;height:28px;border-radius:50%;
    background:radial-gradient(circle at 32% 27%,#fff7e6 0%,#f0d488 16%,#cfae62 46%,#9a7a3a 76%,#4a3a1a 100%)}
  .nh-hear{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;
    border-radius:22px;background:#cfae62;color:#17120a;font-size:13px;font-weight:700;letter-spacing:.02em;
    text-decoration:none;white-space:nowrap;
    /* also a <button> on routes whose proof door is an on-page action (room.html → THE CALLS view) */
    border:0;margin:0;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
  .nh-menu{width:44px;height:44px;padding:0;margin:0;border:1px solid rgba(207,174,98,.45);border-radius:50%;
    background:rgba(207,174,98,.12);color:#f8f6f1;cursor:pointer;display:inline-grid;place-items:center}
  .nh-menu:focus-visible,.nh-hear:focus-visible,.nh-brand:focus-visible,.nh-drawer a:focus-visible,.nh-drawer button:focus-visible{
    outline:2px solid #f0d488;outline-offset:2px}
  .nh-menu i{display:block;width:18px;height:2px;background:currentColor;border-radius:1px;position:relative}
  .nh-menu i::before,.nh-menu i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:1px}
  .nh-menu i::before{top:-6px}.nh-menu i::after{top:6px}
  .nh-menu.nh-nudge{box-shadow:0 0 0 3px rgba(240,212,136,.35)}

  .nh-drawer{margin-top:8px;border-radius:22px;background:rgba(11,13,17,.97);box-shadow:0 18px 44px rgba(10,10,13,.5);
    padding:8px;display:flex;flex-direction:column;gap:2px;color:#f8f6f1;max-height:calc(100vh - 110px);overflow:auto;
    box-sizing:border-box}
  .nh-drawer[hidden]{display:none}
  .nh-drawer a,.nh-drawer button{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:14px;
    color:inherit;text-decoration:none;font:inherit;font-size:14px;font-weight:600;background:none;border:0;
    text-align:left;cursor:pointer;width:100%;box-sizing:border-box}
  .nh-drawer a:hover,.nh-drawer button:hover{background:rgba(207,174,98,.12)}
  .nh-drawer a[aria-current="page"]{color:#cfae62}
  .nh-drawer .nh-sep{height:1px;margin:6px 10px;background:rgba(207,174,98,.22)}
  .nh-drawer .nh-group{font-size:10px;letter-spacing:.18em;font-weight:700;color:rgba(248,246,241,.55);padding:10px 14px 2px}
}