/* ==========================================================================
   BYBRIANADAM.COM — site-wide chrome: nav, footer, Mia companion
   Production-readiness correction, 2026-09-04: nav.njk, footer.njk, and
   mia-companion.njk are all included unconditionally from base.njk (they
   render on every page), but their styling used to live only inside
   universe.css, which base.njk loads homepage-only (`page.url == "/"`). That
   left the nav, footer, and Mia control completely unstyled — bare browser-
   default links — on every non-homepage page (the existing build-log entry,
   and the new /privacy/ page). This file is the fix: the exact same dark
   nav/footer/Mia rules (including their own responsive and reduced-motion
   behavior), moved out of universe.css and into a stylesheet base.njk loads
   on every page, unconditionally. universe.css no longer defines any of
   these selectors — see its own header comment. `.glass` moved here too
   (rather than staying homepage-only) because two chrome elements that must
   render everywhere — `.nav-drawer` and `.mia-panel` — use it; homepage
   sections that also use `.glass` (command-center, follow-strip) still get
   it correctly, since this file loads on the homepage too.
   The --ice/--violet/--platinum/--glass/etc. custom properties these rules
   depend on are already defined site-wide in tokens.css (not homepage-only),
   so no new tokens were needed here.
   ========================================================================== */

.glass{ background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; backdrop-filter:blur(18px); box-shadow:0 30px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .3s ease; }
.glass:hover{ border-color:var(--glass-border-strong); }

/* ---------- Nav ---------- */
nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:24px 6vw; }
nav.scrolled{ background:rgba(2,4,10,.82); backdrop-filter:blur(16px); border-bottom:1px solid var(--glass-border); padding-top:16px; padding-bottom:16px; }
.wordmark{ position:relative; text-decoration:none; font-weight:300; font-size:13.5px; letter-spacing:.24em; color:var(--platinum); overflow:hidden; display:inline-block; opacity:.92; transition:color .3s ease, text-shadow .3s ease; }
.wordmark .sweep{ position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(233,236,240,0.5), transparent); transform:skewX(-20deg); animation:wmsweep 7s ease-in-out 2s 1; }
@keyframes wmsweep{ 0%{ left:-60%;} 22%{ left:130%;} 100%{ left:130%;} }
.wordmark:hover, .wordmark:focus-visible{ color:var(--ice); text-shadow:0 0 10px rgba(99,182,224,.5), 0 0 22px rgba(99,182,224,.25); }
.wordmark:hover .sweep, .wordmark:focus-visible .sweep{ animation:wmsweep .9s ease-out; }
.navlinks{ display:flex; gap:26px; }
.navlinks a{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--platinum-dim); text-decoration:none; transition:color .25s; font-weight:500; }
.navlinks a:hover{ color:var(--ice); }
/* Subscribe as "the clear action without an oversized conventional button": ice-colored and
   bolder than its siblings, plus a small dot so it reads as a distinct action at a glance — not
   a pill/button shape, no background fill. */
.navlinks a.nav-subscribe, .nav-drawer a.nav-subscribe, footer .f-links a.nav-subscribe{
  color:var(--ice); font-weight:700; display:inline-flex; align-items:center; gap:7px;
}
.navlinks a.nav-subscribe::before, .nav-drawer a.nav-subscribe::before, footer .f-links a.nav-subscribe::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--ice); box-shadow:0 0 6px var(--ice); flex-shrink:0;
}
.navlinks a.nav-subscribe:hover, .nav-drawer a.nav-subscribe:hover, footer .f-links a.nav-subscribe:hover{ color:var(--platinum); }
.navburger{ display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:8px; }
.navburger span{ width:16px; height:1px; background:var(--platinum); transition:transform .3s ease, opacity .3s ease; }
.navburger.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.navburger.open span:nth-child(2){ opacity:0; }
.navburger.open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
/* minimal premium mobile nav: slim toggle + compact glass dropdown, not a full-screen takeover */
.nav-drawer{ position:fixed; top:0; right:0; z-index:99; display:none; flex-direction:column; gap:2px;
  padding:70px 22px 18px; min-width:180px; border-radius:0 0 0 18px;
  opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.nav-drawer.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav-drawer a{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--platinum-dim); text-decoration:none; padding:10px 0; border-bottom:1px solid rgba(233,236,240,0.06); }
.nav-drawer a:last-child{ border-bottom:none; }
.nav-drawer a:hover, .nav-drawer a:active{ color:var(--ice); }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--glass-border); padding:30px 6vw; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; max-width:1440px; margin:0 auto; position:relative; z-index:2; }
.f-brand{ display:flex; align-items:baseline; gap:12px; }
.f-word{ font-size:12px; letter-spacing:.22em; color:var(--platinum); font-weight:500; }
.f-tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--platinum-dim); }
footer .f-links a{ font-size:11px; color:var(--platinum-dim); text-decoration:none; margin-left:20px; letter-spacing:.04em; }
footer .f-links a:hover{ color:var(--ice); }
/* WCAG AA fix, preview QA 2026-09-04: opacity:.6 on --platinum-dim measured 2.9:1 against --bg
   via axe-core (needs 4.5:1 for normal text). Reusing --platinum-faint (5.14:1). */
.f-legal{ width:100%; font-size:10px; color:var(--platinum-faint); letter-spacing:.03em; padding-top:14px; border-top:1px solid rgba(99,182,224,0.06); margin-top:6px; }

/* ===================== MIA AI — floating companion signal =====================
   Persistent, lightweight presence that travels with the visitor through the whole site
   (mia-companion.njk is included from base.njk unconditionally, not homepage-only). Intentionally
   NOT the future character (Brian's real Frenchie, eventually animated) — a small restrained
   signal that reserves her name/role until that character is built. */
.mia-companion{ position:fixed; right:26px; bottom:26px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  transition: bottom .5s cubic-bezier(.16,1,.3,1), right .5s cubic-bezier(.16,1,.3,1), opacity .4s ease, transform .4s ease; }
.mia-companion.raise{ bottom:96px; } /* steps up when footer/finale controls are near, so she never sits on top of them */
.mia-companion.hidden{ opacity:0; transform:translateY(10px) scale(.9); pointer-events:none; }

/* Increased visibility, Founder-directed homepage evolution 2026-09-04: stronger silver/ice rim
   (brighter, thicker outer ring via ::after) and a baseline box-shadow raised slightly so the
   resting signal reads clearly against any section background, not just on hover/focus. Sizing
   itself (46px desktop) already cleared the 44x44 minimum touch target; the mobile size below
   is bumped from 40px to 44px to clear it there too. */
.mia-signal{ position:relative; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--glass-border-strong);
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.9), rgba(233,236,240,.45) 30%, rgba(99,182,224,.22) 58%, rgba(122,104,199,.12) 80%, transparent 100%);
  box-shadow: 0 0 20px rgba(99,182,224,.42), 0 0 48px rgba(122,104,199,.22);
  cursor:pointer; outline:none; will-change:transform; transition: box-shadow .4s ease, transform .25s ease, border-color .3s ease; }
.mia-signal::after{ content:''; position:absolute; inset:-7px; border-radius:50%; border:1.5px solid rgba(233,236,240,0.32); }
.mia-signal .mia-signal-pulse{ position:absolute; inset:34%; border-radius:50%; background:rgba(255,255,255,.9); animation: miaSignalPulse 3.8s ease-in-out infinite; }
@keyframes miaSignalPulse{ 0%,100%{ opacity:.75; transform:scale(1);} 50%{ opacity:1; transform:scale(1.18);} }
.mia-signal:hover, .mia-signal.near, .mia-signal:focus-visible{ box-shadow: 0 0 26px rgba(99,182,224,.55), 0 0 60px rgba(122,104,199,.3); transform:scale(1.08); border-color:var(--ice); }
.mia-signal.open{ box-shadow: 0 0 30px rgba(99,182,224,.65), 0 0 70px rgba(122,104,199,.36); }
/* First-visit compact greeting (small phones only — see main.js), a few restrained expanding
   rings rather than the constant idle pulse above, so it reads as a one-time "notice me," not
   ongoing motion. */
.mia-signal.first-visit-pulse::before{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--ice); animation:miaFirstVisit 1.6s ease-out 2; }
@keyframes miaFirstVisit{ 0%{ transform:scale(1); opacity:.9;} 100%{ transform:scale(1.55); opacity:0;} }

.mia-hint{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--platinum-dim); opacity:0; transform:translateX(4px);
  transition:opacity .3s ease, transform .3s ease; white-space:nowrap; pointer-events:none; }
.mia-signal:hover ~ .mia-hint, .mia-companion:hover .mia-hint{ opacity:.7; transform:translateX(0); }
.mia-signal.first-visit-pulse ~ .mia-hint{ opacity:.95; transform:translateX(0); color:var(--platinum); }

.mia-panel{ position:absolute; right:0; bottom:60px; width:270px; max-width:78vw; padding:16px 16px 14px;
  opacity:0; transform:translateY(10px) scale(.97); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.mia-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.mia-panel-head{ display:flex; align-items:center; justify-content:space-between; }
.mia-panel-title{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--platinum); font-weight:600; }
.mia-panel-close{ background:none; border:none; color:var(--platinum-dim); font-size:13px; cursor:pointer; line-height:1; padding:2px; }
.mia-panel-close:hover{ color:var(--platinum); }
/* WCAG AA fix, preview QA 2026-09-04: opacity:.65 measured 3.24:1 (needs 4.5:1). */
.mia-panel-note{ font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--platinum-faint); margin-top:4px; }
.mia-panel-intro{ font-size:12px; color:var(--platinum-dim); line-height:1.6; margin-top:12px; }
.mia-prompts{ display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.mia-prompt{ text-align:left; font-size:11.5px; color:var(--platinum); background:rgba(255,255,255,.03); border:1px dashed var(--glass-border); border-radius:10px;
  padding:8px 10px; cursor:default; transition:border-color .25s ease, background .25s ease; }
.mia-prompt:hover, .mia-prompt:focus-visible{ border-color:var(--glass-border-strong); background:rgba(255,255,255,.06); }
.mia-prompt.picked{ border-color:var(--ice); color:var(--ice); }
.mia-panel-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:11px; border-top:1px solid var(--glass-border); }
/* WCAG AA fix, preview QA 2026-09-04: opacity:.55 measured 2.6:1 (needs 4.5:1) — the worst of
   this batch. */
.mia-future-note{ font-size:9px; color:var(--platinum-faint); line-height:1.5; max-width:170px; }
.mia-hide-btn{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--platinum-dim); background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.mia-hide-btn:hover{ color:var(--platinum); }

.mia-recall{ position:fixed; right:14px; bottom:14px; z-index:60; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--platinum-dim); background:var(--glass); border:1px dashed var(--glass-border); border-radius:14px; padding:6px 12px; cursor:pointer;
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.mia-recall.show{ opacity:.8; transform:translateY(0); pointer-events:auto; }
.mia-recall:hover{ opacity:1; color:var(--platinum); }

@media (prefers-reduced-motion: reduce){
  .wordmark .sweep{ animation:none; }
  .mia-signal-pulse{ animation:none; }
  .mia-companion{ transition:none; }
  .mia-signal.first-visit-pulse::before{ animation:none; opacity:0; }
}

@media (max-width:980px){
  .navlinks{ display:none; } .navburger{ display:flex; } .nav-drawer{ display:flex; }
  /* Mia simplifies to a small fixed presence — no drift/reposition math on touch viewports */
  .mia-companion{ right:16px; bottom:16px; }
  .mia-companion.raise{ bottom:16px; }
  .mia-signal{ width:44px; height:44px; } /* 44x44 minimum touch target */
  .mia-panel{ width:240px; }
}

@media (max-width:640px){
  /* ---- Mia: fixed, thumb-safe, panel fits viewport ---- */
  .mia-companion{ right:14px; bottom:14px; }
  .mia-companion.raise{ bottom:74px; }
  .mia-panel{ width:min(78vw, 260px); right:-6px; }
}