/* ═══════════════════════════════════════════════════════════════════════════
   REVERBOT SITE CHROME — the ONE copy of the palette, the header (logo, links,
   Support menu, account chip, "Get the app"), the footer and the few base
   rules every page shares. Linked by every page, index.html included, as the
   LAST stylesheet in <head>, so nothing a page declares for itself can restyle
   the chrome by accident.

   WHY THIS FILE EXISTS (2026-10-06). The header and footer CSS used to live in
   two hand copies — index.html's inline <style> and assets/pages.css — and
   they drifted apart:
   - pages.css's `.nav-links a{color:var(--ink-dim)}` outranked its own
     `.btn-primary{color:#fff}`, so "Get the app" was washed-out blue-grey on
     every page but the home page (index.html hid it with !important);
   - the sub-pages laid the header out in the 860px article column, so it
     jumped 128px sideways between the home page and any other page;
   - nothing stopped the nav items shrinking, so the signed-in account chip
     squeezed "Get the app" into a two- or three-line blob ("warped"), and on
     a 390px phone the button wrapped or was pushed off the screen.
   Every rule below is scoped to header.nav or footer.site-footer, so page
   CSS (portal's .btn-primary, life-journal's bare `button`, …) cannot reach
   it, and the CTA has its own class, .nav-cta, for the same reason.

   THE MARKUP IS STAMPED INTO EVERY PAGE (there is no build step). The one
   copy is Website/_partials/header.html and footer.html; scripts/site-chrome.py
   --write puts them into every page (index.html's logo links to #top, every
   other page's to index.html), and scripts/deploy-site.sh publishes nothing
   while any page's copy differs. Edit the partial, never a page's copy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Palette: the only definition. Pages add tokens of their own (--maxw,
   --card-hover…) but never redefine these. --ink-faint was .42/.44 — about
   4:1 on the background, under the 4.5:1 small print needs; .55 is ~5.7:1. */
:root{
  --bg-0:#0a0a13; --bg-1:#14101f; --bg-2:#0d1a2e;
  --ink:#eef2ff; --ink-dim:rgba(238,242,255,.68); --ink-faint:rgba(238,242,255,.55);
  --line:rgba(238,242,255,.10);
  --cyan:#22d3ee; --blue:#3b82f6; --purple:#a78bfa; --green:#34d399; --amber:#fbbf24; --pink:#f472b6;
  --card:rgba(255,255,255,.035);
  --radius:18px;
  --chrome-maxw:1120px;
  --chrome-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  /* Native controls (checkboxes, select pop-ups, scrollbars) drawn dark. */
  color-scheme:dark;
}

/* ── The page itself ──
   The typeface applies everywhere, paper included: the pages no longer
   declare one of their own, so a screen-only font printed every page in
   Times. Only the dark colours stay on screen; paper is white. */
body{font-family:var(--chrome-font)}
@media screen{
  body{
    color:var(--ink);background-color:var(--bg-0);
    background-image:
      radial-gradient(1100px 600px at 85% -5%, rgba(34,211,238,.10), transparent 60%),
      radial-gradient(900px 700px at -10% 30%, rgba(167,139,250,.08), transparent 55%),
      radial-gradient(1000px 800px at 110% 85%, rgba(59,130,246,.07), transparent 60%),
      linear-gradient(160deg,var(--bg-1) 0%,var(--bg-0) 45%,var(--bg-2) 100%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
  }
}
/* Gradient text. The padding extends the clip box past the last glyph so its
   right edge (the "r" of "faster") is not cut off; the negative margin keeps
   whatever follows where it was. */
.grad{
  background:linear-gradient(92deg,var(--cyan),var(--blue) 60%,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.12em;margin-right:-.12em;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ── Header ──
   Font, size and line-height are stated here rather than inherited: pages set
   their own body type (1.65 line-height on sub-pages, 17px on life-journal),
   and the bar must measure the same everywhere — 72.5px tall, the logo at the
   left edge of a 1120px column and "Get the app" at its right edge. */
header.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(10,10,19,.72);border-bottom:1px solid var(--line);
  font-family:var(--chrome-font);font-size:16px;line-height:1.6;color:var(--ink);text-align:left;
}
header.nav .nav-inner{max-width:var(--chrome-maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:28px}
header.nav .nav-home{display:block;flex:none}
/* Logo is a pre-tinted PNG (white→sky gradient baked in) served as a plain
   <img> — CSS masks proved fragile across browsers (Safari/file:// blocking). */
header.nav .nav-logo{height:24px;width:auto;display:block}
header.nav .nav-links{display:flex;align-items:center;gap:22px;margin:0 0 0 auto;padding:0}
/* NOTHING IN THE ROW MAY SHRINK OR WRAP. Flexbox shrinks items to their
   min-content by default, which is what folded "Get the app" into a two-line
   oval and "Manage App" onto two lines. The row is sized to fit instead (see
   the breakpoints below), so nothing ever needs to give. */
header.nav .nav-links > *{flex:none;white-space:nowrap}
header.nav .nav-links a{color:var(--ink-dim);text-decoration:none;font-size:.92rem;transition:color .2s}
header.nav .nav-links a:hover,header.nav .nav-links a.active{color:var(--ink)}

/* "Get the app". Its own class: as `.btn-primary` it was restyled by every
   page that defines that class for its own buttons. White, always. */
header.nav .nav-links a.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;border:1px solid rgba(103,232,249,.35);
  background:linear-gradient(120deg,#0ea5b7,#2563eb);box-shadow:0 0 22px rgba(34,211,238,.25);
  color:#fff;font-size:.92rem;font-weight:600;line-height:1.6;text-decoration:none;
  transition:transform .15s,box-shadow .2s;
}
header.nav .nav-links a.nav-cta:hover{color:#fff;transform:translateY(-1px);box-shadow:0 0 32px rgba(34,211,238,.4)}
header.nav .nav-links a.nav-cta:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Support menu — click-to-open (see assets/nav.js for why not hover). The
   trigger is a <button>, so it has to be told the links' size and colour: it
   used to inherit the page's 16px full-white text and stood out of the row as
   if it were the current page. */
header.nav .has-menu{position:relative;display:inline-flex}
header.nav .has-menu .menu-top{
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  margin:0;padding:0;border:0;background:none;
  font:inherit;font-size:.92rem;line-height:1.6;color:var(--ink-dim);transition:color .2s;
}
header.nav .has-menu .menu-top:hover,header.nav .has-menu.open .menu-top{color:var(--ink)}
header.nav .has-menu .menu-top::after{content:"";flex:none;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.65;transition:transform .18s}
header.nav .has-menu.open .menu-top::after{transform:rotate(180deg)}
header.nav .has-menu .menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  min-width:200px;max-width:calc(100vw - 24px);padding:6px;border-radius:12px;z-index:80;
  background:#141a2b;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;text-align:left;
}
header.nav .has-menu.open .menu{opacity:1;visibility:visible;pointer-events:auto}
header.nav .has-menu .menu a{display:block;padding:10px 12px;border-radius:8px;white-space:nowrap;font-size:.95rem}
header.nav .has-menu .menu a:hover,header.nav .has-menu .menu a:focus-visible{background:rgba(255,255,255,.08);color:var(--ink)}

/* Account chip, injected by assets/nav.js for a signed-in visitor. The address
   sits in its own span so it can end in "…" (an ellipsis does not apply to a
   flex container's own text) and the caret stays outside the clipped box.
   The chip needs room the row only has from 1024px; narrower, nav.js puts the
   same two actions at the foot of the Support menu instead (.rb-acct). */
header.nav .rb-account .rb-email{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header.nav .rb-account .menu{min-width:170px}
header.nav .has-menu .menu .rb-acct{display:none}
header.nav .has-menu .menu .rb-acct-sep{height:1px;margin:6px 4px;background:var(--line)}
header.nav .has-menu .menu .rb-acct-who{padding:8px 12px 4px;font-size:.8rem;line-height:1.45;color:var(--ink-faint)}
header.nav .has-menu .menu .rb-acct-email{display:block;max-width:250px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:.88rem;color:var(--ink-dim)}
@media (max-width:1023.98px){
  header.nav .rb-account{display:none}
  header.nav .has-menu .menu .rb-acct{display:block}
}

/* Tablet: five links, Support and the button still fit from 721px with the
   gaps a little tighter. */
@media (max-width:860px){header.nav .nav-links{gap:16px}}
/* Phone: the plain links stand down; Support (Help, API keys, Contact, and
   the account) and "Get the app" stay. Modes and Earpieces are anchors on the
   home page; Manage App, Privacy and Contact are in every footer. */
@media (max-width:720px){
  header.nav .nav-links > a:not(.nav-cta){display:none}
  header.nav .nav-inner{gap:16px}
}
/* Small phones (iPhone mini / SE widths and most Androids): a 16px gutter. */
@media (max-width:380px){
  header.nav .nav-inner{padding-left:16px;padding-right:16px;gap:12px}
  header.nav .nav-links{gap:12px}
}
@media (max-width:350px){
  header.nav .nav-inner{padding-left:12px;padding-right:12px;gap:10px}
  header.nav .nav-links{gap:10px}
  header.nav .nav-logo{height:20px}
  header.nav .nav-links a.nav-cta{padding-left:14px;padding-right:14px}
}

/* ── Footer ── the home page's measurements, on every page. */
footer.site-footer{
  border-top:1px solid var(--line);padding:38px 24px;
  font-family:var(--chrome-font);font-size:.85rem;line-height:1.6;color:var(--ink-faint);text-align:left;
}
footer.site-footer .foot-inner{max-width:var(--chrome-maxw);margin:0 auto;padding:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px}
footer.site-footer .foot-brand{max-width:640px}
/* max-width is belt and braces: the file is 1278x292, and with no height the
   <img> once rendered at its natural size across the whole column. */
footer.site-footer .foot-logo{display:block;height:18px;width:auto;max-width:100%;margin:0 0 4px;opacity:.75}
footer.site-footer .foot-brand p{margin:10px 0 0;font-size:inherit;line-height:1.55;color:var(--ink-dim)}
/* One gap for wrapped rows, a wider one between links, so a wrapped row reads
   as part of the same group rather than a new line of its own. */
footer.site-footer .foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0}
footer.site-footer .foot-links a{color:var(--ink-dim);text-decoration:none}
footer.site-footer .foot-links a:hover{color:var(--ink)}
footer.site-footer .foot-legal{display:grid;gap:5px;line-height:1.5}
footer.site-footer .foot-legal a{color:var(--ink-dim);text-decoration:underline}
footer.site-footer .foot-support{color:var(--ink);font-weight:600}
/* All five links on one row on a 390px phone. */
@media (max-width:420px){footer.site-footer .foot-links{gap:6px 12px}}

/* ── Paper ──
   Backgrounds do not print, so the light-on-dark palette came out as pale
   grey text on white paper and the gradient words ("How to use Reverbot")
   not at all. On paper the scheme is light and the palette is redefined dark,
   so every rule that takes its colour from a token follows; the gradient words
   print as plain ink. The header (links and a button) and the footer's
   white logo are left off. A page's own print rules (portal.html's guide,
   the help guides') still apply on top. */
@media print{
  :root{
    color-scheme:light;
    --ink:#111; --ink-dim:#333; --ink-faint:#555; --line:rgba(0,0,0,.16);
    --cyan:#0e7490; --blue:#1d4ed8; --purple:#6d28d9; --green:#047857; --amber:#b45309; --pink:#be185d;
  }
  body{color:var(--ink)}
  .grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
  header.nav,footer.site-footer .foot-logo{display:none}
  /* Labels drawn white for the dark site: sign-in and key buttons, form
     buttons, the Jev timeline's bars, the notify page's device choice. */
  #login,#makekey,#refresh,#alive,main form button[type=submit],.seg,.pick span{color:var(--ink)}
}