/* ============================================================================
   nav.css - the SHARED NAV rules, for pages that do not link site.css (the wiki
   links wiki.css instead, and site.css's resets would restyle its articles).
   ⚠️ THIS IS A VERBATIM COPY of the "SHARED CHROME" nav block in site.css plus its
   `.nav--hero` rule. src/nav-css-sync.test.mjs fails if the two drift, so change
   BOTH (edit site.css, then copy the block here) or the menu stops being identical.
   ========================================================================== */
/*NAVBLOCK-START*/
/* ==========================================================================
   ⭐ THE SHARED CHROME — nav + footer, lifted here 2026-07-27.
   --------------------------------------------------------------------------
   Chris: "universal nav and footer at the least — but we need a site that shares
   bodies with the subsystems like account manager, so it's not styled completely
   different."
   These rules used to live INSIDE index.astro's <style>, which meant the account
   pages could not see them and carried their own older copy instead: the pre-
   gradient `<span class="spark">` wordmark, "Devlog" after the rename, a dead
   "#" launcher CTA, and an `<i>L2</i>` footer mark. Hand-copied chrome drifts.
   Now `src/components/SiteNav.astro` + `SiteFooter.astro` render the markup and
   this file styles it, so every page and every subsystem share one chrome.
   ⚠️ index.astro still carries its own copy of these rules for its hero-specific
   overrides; they are identical here. If you change one, change both — or better,
   delete the page-local copy.
   ========================================================================== */
/* ---------------------------------------------------------------- NAV ---- */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(12px);
  background:rgba(11,10,24,.82); border-bottom:1px solid var(--line-soft);}
/* ⚠️ THE BAR TRACKS `--wrap` EXCEPT ON THE HOMEPAGE. The 1408/24 pairing exists
   so the bar meets the HOMEPAGE's hero card, which bleeds past --wrap; every other
   page has no such card, and inheriting that tuning put their wordmark 26px off
   (measured 2026-07-27: home 40, features 66). `.nav--hero` opts the homepage back
   in; everything else aligns to the wrap like its own content does. */
.nav-in{max-width:var(--wrap); margin:0 auto; padding:0 26px;
  display:flex; align-items:center; gap:16px; min-height:60px;}
/* Cormorant is a DISPLAY face — beautiful at the hero's 100px+, genuinely thin
   and hard to read at nav size. Chris: "the text is tiny thin hard to read."
   It was 21px at the font's DEFAULT weight (400). Fixed by going up in size AND
   weight rather than swapping the face — the header has to stay Cormorant to
   match the hero wordmark. 600 is a weight we already bundle, so no extra
   download. */
.nav-mark{font-family:var(--serif); font-size:23px; font-weight:600;
  letter-spacing:.005em; color:var(--starlight);
  text-decoration:none; display:inline-flex; align-items:center; min-height:44px;}
/* THE WORDMARK IS ONE MARK. The header used a blurple italic L2 while the hero
   used the launcher's amber-gold gradient — two different lockups for the same
   brand on the same page. The hero is the reference (it matches the launcher's
   --wm-gold/--wm-gold-deep), so the header follows it: same amber gradient,
   same upright L2. Chris, 2026-07-21: "we need to adopt our header styling as
   the golden rule."
   ⚠️ If the hero wordmark changes, change this with it. */
.nav-mark .l2{font-size:.82em; margin-right:2px;
  background:linear-gradient(180deg,#F6C67A,#E8A24C);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
/* `dream` carries the same blurple gradient as the hero, not a flat colour —
   all three parts of the mark match the hero exactly. */
/* match the HERO wordmark's 'dream' blurple (Chris likes it): the hero uses the
   tighter #8f93f5->#8188ff range, not the nav's original lighter near-white gradient. */
.nav-mark .dream{background:linear-gradient(180deg,#a9adfa,#8f93f5);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.nav-links{display:flex; align-items:center; gap:4px; flex-wrap:nowrap; white-space:nowrap;}
/* The vertical pipe between the brand and the menu (Chris: "our logo, and then
   maybe a vertical pipe, then list out the menu items"). */
.nav-pipe{width:1px; height:22px; background:rgba(136,148,247,.28); margin:0 14px 0 16px; flex:none;}
/* RIGHT GROUP — reserved for the two buttons (desktop): Account + the launcher. */
.nav-right{margin-left:auto; display:flex; align-items:center; gap:12px;}
.nav-right .nav-cta{color:#fff; background:var(--blurple);
  border:1px solid transparent; font-weight:600; padding:12px 18px;
  /* tighter glow — the old 30px/-14px halo bled up past the sticky nav and read as
     a glitch in Chrome (Chris QA). Smaller, downward-only. */
  box-shadow:0 6px 18px -10px rgba(88,101,242,.7);}
.nav-right .nav-cta .dl-os{color:#fff; background:rgba(10,9,23,.34);}
.nav-right .nav-cta:hover{background:#4752C4; color:#fff; border-color:transparent;}
.nav-right .nav-cta:hover .dl-os{background:rgba(10,9,23,.42); color:#fff;}
/* THE ACCOUNT CHIP — outlined, secondary to the launcher CTA; STAYS VISIBLE on
   mobile (Chris: the launcher collapses into the menu, Account does not). */
/* WEIGHT (Chris 2026-07-23): "the 600 weight just looks strange ... theres no
   inbetween its either super big and bold or if i go to like 500 it snaps to
   regular text ... lets go with non bold for it." That is the font, not taste:
   this button resolves to Arial, which ships only two weights — measured,
   400 and 500 render IDENTICALLY (50.59px) and 600 and 700 render IDENTICALLY
   (56px). So 600 already WAS bold and there is no middle step to reach.
   Going regular. */
.nav-account{display:inline-flex; align-items:center; gap:7px;
  color:var(--body,#e8e9f2); text-decoration:none; font-size:14px; font-weight:400;
  padding:10px 15px; border-radius:11px; min-height:42px;
  border:1px solid transparent; background:transparent;
  transition:background .16s ease, border-color .16s ease, color .16s ease;}
/* DESKTOP chip styling (mobile stays bare so no load-flash):
   - the ACCOUNT button gets the gold/ember FILL (Chris: like the old How-to-connect),
     dark ink, no sheen (clean filled, not the flashy hero button).
   - the DOWNLOAD chip stays the quiet blurple OUTLINE. */
@media (min-width:961px){
  .nav-account.nav-dl-chip{border-color:rgba(136,148,247,.38); background:rgba(136,148,247,.06); color:var(--body,#e8e9f2);}
  /* ACCOUNT = the gold ember fill (like the old How-to-connect): dark ink #2a1c07. */
  .nav-account:not(.nav-dl-chip){border:0; color:#2a1c07; font-weight:400;
    background:linear-gradient(180deg,var(--ember),var(--lantern));
    box-shadow:0 0 0 1px rgba(255,246,230,.22) inset, 0 8px 22px -12px rgba(246,198,122,.55);}
}
.nav-account .acct-i{width:15px; height:15px; flex:none;}
/* ACCOUNT FLYOUT (Chris): a dropdown with Log In / Sign Up. */
.acct-flyout{position:relative;}
.acct-flyout .nav-account{cursor:pointer;}
.acct-caret{width:13px; height:13px; flex:none; margin-left:-1px; transition:transform .18s ease;}
#acct-btn[aria-expanded="true"] .acct-caret{transform:rotate(180deg);}
.acct-menu{position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  min-width:170px; padding:6px; border-radius:12px;
  background:rgba(18,16,31,.97); border:1px solid rgba(217,169,106,.24);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8);
  display:none; flex-direction:column; gap:2px;}
#acct-btn[aria-expanded="true"] + .acct-menu{display:flex;}
/* Chris: open on HOVER (real pointers only). A padding bridge on the menu's top
   keeps it open while the cursor travels from the button down into it. */
@media (hover:hover){
  .acct-flyout:hover .acct-menu, .acct-flyout:focus-within .acct-menu{display:flex;}
  .acct-flyout:hover #acct-btn .acct-caret{transform:rotate(180deg);}
  .acct-menu{margin-top:0;}
  .acct-flyout::after{content:""; position:absolute; top:100%; right:0; width:100%; height:10px;}
}
.acct-menu a{display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:10px 12px; border-radius:8px; font-size:14px; font-weight:600;
  color:var(--body,#e8e9f2); white-space:nowrap;}
.acct-menu a svg{width:16px; height:16px; flex:none; color:var(--lantern);}
@media (hover:hover){ .acct-menu a:hover{background:rgba(217,169,106,.12); color:#fff;} }
/* HOVER only on real pointers. The gold ACCOUNT keeps its dark ink and just
   brightens the gold (matching connect-btn); the blurple DOWNLOAD chip keeps its
   blurple hover. (The old shared blurple hover was turning the gold button blue.) */
@media (hover:hover){
  .nav-account.nav-dl-chip:hover{color:var(--light-blurple); background:rgba(88,101,242,.22);
    border-color:rgba(136,148,247,.62);}
  .nav-account:not(.nav-dl-chip):hover{color:#2a1c07;
    background:linear-gradient(180deg,#FFD79A,var(--ember));}
}
/* mobile-drawer-only copies hidden on desktop — !important because the
   .nav-links a display rules otherwise win the cascade. */
a.nav-flyoutonly{display:none !important;}
/* keep the right CTA on one line */
.nav-right .nav-cta{white-space:nowrap;}
/* ADA (Chris 2026-07-23): "nav buttons like how to connect cant be gray they
   need to prolly be white for ada compliance." Measured: --greyple #9096b8 on the
   nav's dark ink is 6.76:1 — it does pass WCAG AA (4.5:1), but it sits under AAA
   (7:1) and reads washed out. --body #c9ccea measures 12.43:1 — AAA with room to
   spare. Used the palette's existing off-white rather than pure #fff (19.6:1),
   which is harsher on this dark theme for no real accessibility gain. */
.nav-links a{color:var(--body); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:11px 13px; border-radius:9px; min-height:44px; display:inline-flex; align-items:center;}
.nav-links a:hover{color:var(--light-blurple); background:rgba(136,148,247,.09);}
.nav-links a.nav-cta{color:var(--light-blurple); background:rgba(88,101,242,.18);
  border:1px solid rgba(136,148,247,.38);}
/* ⚠️ HOVER GOES DARKER, NOT LIGHTER. --blurple-hi (#6B78FF) fails WCAG AA with
   white text at 3.65:1; --blurple itself passes at 4.61:1 and #4752C4 (Discord's
   own hover) clears comfortably at 6.42:1. Lightening a blurple button on hover
   therefore BREAKS contrast at the exact moment the user is interacting with it.
   tools/contrast.mjs asserts this in every state. */
.nav-links a.nav-cta:hover{background:#4752C4; color:#fff; border-color:transparent;}

/* The download CTA. `gap:8px` and the icon size are what make it read as an
   action rather than another nav word. */
.nav-dl{gap:8px;}
.nav-dl .dl-i{width:15px; height:15px; flex:none;}
/* The platform, stated in the control itself rather than in a tooltip or a
   footnote — a Mac visitor learns what this is before clicking, not after.
   It is a quieter weight so the button still reads as one label. */
.nav-dl .dl-os{font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700;
  color:var(--light-blurple); background:rgba(136,148,247,.16);
  border-radius:20px; padding:2px 6px; line-height:1.5;}
.nav-dl:hover .dl-os{background:rgba(255,255,255,.2); color:#fff;}

/* ---- Mobile nav: the hamburger + drawer -----------------------------------
   MEASURED, not guessed: the wordmark + 4 links need 451px of bar to sit on one
   row (128px mark + 273px of links + 12px of inter-link gaps + the .nav-in gap
   and padding). Below ~560px that no longer fits, and "Read the wiki" wrapped to
   a second row and collided with the wordmark — Chris's own bug report from his
   iPhone Pro.

   ⚠️ RE-MEASURED 2026-07-21 when the nav CTA changed from "Read the wiki" to
   "Get the launcher · WINDOWS" (a wider control: it carries an icon and a
   platform pill). The link row grew, so the breakpoint was re-derived rather
   than assumed still valid — see the measurement in the report. The wiki link
   left the nav entirely (it now lives under the hero cards as a quiet aside),
   which returns most of the width the download button costs.

   Full collapse, not partial. Keeping one or two links visible would buy ~60px
   and re-break the moment a label changes; the destinations are equal-weight
   (Wiki / About / Devlog), and the download CTA must never be the ONE thing
   left on a cramped bar — a button that survives alone at 400px reads as the
   only thing the site wants from you. The button is hidden above the breakpoint
   and the drawer is display:none, so desktop is unchanged. */
.nav-toggle{display:none; margin-left:auto; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; padding:0; cursor:pointer;
  /* styled ON LOAD to match the Account chip beside it (Chris: the button looked
     plain until clicked — the old faint --line-soft border was barely visible; the
     nice look was only the hover state, which then stuck on touch). */
  background:transparent; border:0; border-radius:10px;
  color:var(--starlight);}
@media (hover:hover){ .nav-toggle:hover{background:rgba(136,148,247,.12); border-color:rgba(136,148,247,.5);} }
.nav-toggle .bars{display:block; width:18px; height:14px; position:relative;}
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span{
  content:""; position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:currentColor; transition:transform 180ms ease, opacity 140ms ease;}
.nav-toggle .bars::before{top:0;}
.nav-toggle .bars span{top:6px;}
.nav-toggle .bars::after{bottom:0;}
/* Open state morphs the three bars into an X — the affordance that the same
   control closes the menu. */
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bars span{opacity:0;}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:960px){
  .nav-toggle{display:inline-flex;}
  .nav-pipe{display:none;}
  /* Chris 2026-07-23: on mobile the DOWNLOAD button collapses into the drawer (its
     .nav-flyoutonly copy shows there); the ACCOUNT icon STAYS visible in the bar.
     So .nav-right keeps only the account chip. */
  .nav-right .nav-cta, .nav-right .nav-dl-chip{display:none;}
  /* Chris 2026-07-23: Account + hamburger sit TOGETHER on the far right. nav-right
     pushes to the right edge; the toggle drops its own margin-left:auto so it sits
     right BESIDE the account icon (was stranded mid-bar with a gap to the toggle). */
  /* Chris 2026-07-23: hamburger FIRST (left), Account SECOND (far right) — swapped
     via flex order so the DOM/a11y order is untouched. The toggle carries margin-
     left:auto to push the PAIR to the right; a 10px gap sits between them. */
  .nav-toggle{order:1; margin-left:auto; margin-right:-6px;}   /* tighten the pair (bare icons, 44px hit-areas overlap-pad) */
  .nav-right{order:2; margin-left:0; margin-right:-4px;}
  /* Chris 2026-07-23: on mobile the ACCOUNT is an ICON, not a big pill — a 44x44
     square matching the hamburger next to it. Hide the label, keep the person
     glyph centered. */
  .nav-account{width:44px; height:44px; padding:0; gap:0; justify-content:center;
    border-radius:10px; font-size:0;}
  .nav-account .acct-i{width:20px; height:20px;}
  /* Chris 2026-07-23: on mobile, menu + account are bare ICONS — no box border/fill. */
  .nav-toggle, .nav-account{border:0; background:transparent;}
  .nav-toggle:hover, .nav-account:hover{background:transparent;}
  a.nav-flyoutonly{display:flex !important;}
  .nav-links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    margin:0; padding:10px 14px 16px;
    /* OPAQUE, and no backdrop-filter. The sticky BAR is deliberately translucent
       (content scrolls under a 12px blur), but a drawer is a surface you read
       links off — at .97 alpha over the hero the wordmark and the stream text
       bled straight through it and the labels became unreadable. Caught by
       looking at the screenshot; every numeric assertion passed. Use the solid
       token so the panel is the page's own ground colour, not a wash of it. */
    background:var(--void); border-bottom:1px solid var(--line-soft);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  }
  /* ⚠️ A DRAWER TALLER THAN THE SCREEN MUST SCROLL ITSELF (2026-07-26). The
     wiki's panel hit this for real — 12 links made it 801px on an 852px phone,
     and with no max-height the touch fell THROUGH to the page behind it
     ("it scrolls the actual wiki rather than the menu"). This drawer has only
     four links (218px, measured) so it does not overflow today, but the failure
     is latent the moment a link is added. dvh not vh: on mobile Safari `vh` is
     the tallest viewport and would hide the last item under the URL bar. */
  .nav-links[data-open="true"]{display:flex; max-height:calc(100dvh - 96px);
    overflow-y:auto; overscroll-behavior:contain;}
  .nav-links a{width:100%; font-size:15.5px; padding:12px 14px; border-radius:10px;}
  .nav-links a.nav-cta{margin-top:6px; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span{transition:none;}
}

/* Phone: the homepage's tighter bar and drawer rows (were page-local in index.astro). */
@media (max-width:560px){
  .nav-in{min-height:56px; gap:8px;}
  .nav-links a{padding:11px 10px; font-size:13.5px;}
}
/* the homepage's bar, which must meet its wider hero card */
.nav--hero .nav-in{max-width:1408px; padding:0 24px;}
/*NAVBLOCK-END*/