/* The site shell — one header, one footer, every text page.
 *
 * WHY. 2026-10-15, his words: 「Guide、Price，还有你后面加的几个隐私页、协议页……
 * 我想你统一一下 Header 和 Footer，整个页面的头和尾的模式、样式……要不然我看这些
 * 样式都不一样，太不好看了。」 Before this file there were four shells: pricing had
 * `header.site` + `footer.site`, the legal pages had their own `.topbar`, the guide
 * had a TOC rail and NO footer at all, and the landing page had a third footer
 * (`.site-footer`) styled from its own critical-CSS block.
 *
 * SECOND PASS, same day, once the first one was on screen:
 *   「页头能不能设计得好看一点？我感觉 Price 页和 Guide 页的页 Header 不一样宽」
 *   「Footer 好像很潦草，这些地方最好有点设计感」
 *   「是不是要在所有有品牌字的地方加一个 Pro 的角标？这个 Pro 角标要精致设计一下」
 * The width complaint was the tell, and it was a real defect in the first pass:
 * `--chrome-w` was a PER-PAGE token (980 by default, guide.html overriding it
 * with rail+column+gutters), so "one shell" still rendered two widths and the
 * header stopped 90px short of the guide's own text. It is ONE number now,
 * declared here, and no page may override it — asserted in
 * src/__tests__/pages.test.ts, because a per-page width is exactly how this
 * comes back.
 *
 * WHY THERE ARE FALLBACK CHAINS IN EVERY COLOUR. The app and the guide use the
 * theme's real token names (`--text-secondary`, `--neon-cyan`, `--frost-border`);
 * pricing.html and legal.css use short aliases (`--muted`, `--cyan`, `--border`).
 * Both resolve to the same values — `guide-spec.test.ts` asserts that alias by
 * alias — so `var(--app-name, var(--alias, #literal))` reads correctly on every
 * page, and the literal is only a last resort. This file declares no theme
 * colours of its own: it cannot drift from theme.css, it just consumes it.
 *
 * The markup is mirrored in src/__tests__/pages.test.ts, which fails if any text
 * page's header or footer stops matching the others.
 */
:root {
  /* ONE frame for the header and the footer, the same number on every page.
     It is not an arbitrary round number: the guide's rail + column + its own two
     gutters add up to it (210 + 780 + 40 + 40), so the guide's text edges land
     exactly on this frame's padding — and every narrower page (pricing 900,
     legal 760) centres INSIDE the same frame instead of moving it. Widening a
     page's content must never widen the header. */
  --chrome-w: 1070px;
  --chrome-pad: 20px;
  --chrome-hair: var(--frost-border, var(--border, rgba(255, 255, 255, 0.08)));
  --chrome-cyan: var(--neon-cyan, var(--cyan, #00ffcc));
  --chrome-ink: var(--text-primary, var(--text, #e0e0ff));
  --chrome-soft: var(--text-secondary, var(--muted, #a0a0d0));
  --chrome-dim: var(--text-muted, #606090);

  /* Pro's gold. The app already locks Pro features in this colour family
     (`#d4b35a`, src/styles/*.css `.pro-upsell-lock`), so gold means Pro inside
     the instrument too and the badge borrows that meaning rather than inventing
     a second one. Deliberately NOT --neon-amber (#ffaa00): in the HUD amber
     means "a state wants your attention" (8vb / ↺ BANK B / ✊ MUTED), and a
     badge is not a warning. */
  --pro-ink: #2a1f06;
  --pro-face-top: #f6e2ae;
  --pro-face-mid: #e0b866;
  --pro-face-low: #c9a04a;
  --pro-edge: rgba(255, 240, 205, 0.45);
  --pro-glow: rgba(224, 184, 102, 0.22);
}

.site-head,
.site-foot {
  box-sizing: border-box;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  max-width: var(--chrome-w);
  margin: 0 auto;
  padding: 0 var(--chrome-pad);
}

/* ─── Header ─────────────────────────────────────────────────────────── */
.site-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 26px;
  min-height: 64px;
  border-bottom: 1px solid var(--chrome-hair);
}
/* The instrument rule: one hairline, with a short cyan segment fading out from
   under the wordmark. It marks the frame's left edge, which is also where the
   guide's contents rail starts — the accent is the thing that tells you the
   header and the page below it are the same width. */
.site-head::after {
  content: '';
  position: absolute;
  left: var(--chrome-pad);
  bottom: -1px;
  width: 92px;
  height: 1px;
  background: linear-gradient(90deg, var(--chrome-cyan), transparent);
  opacity: 0.85;
  pointer-events: none;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome-ink);
  text-decoration: none;
}
.site-brand:hover { color: var(--chrome-cyan); }

/* The Pro mark — the one thing a screenshot of this site has to carry that the
   free edition's does not. The free build at gesturesynthweld.com wears the
   same wordmark and nothing else, so the chip has to read at a glance at
   0.5rem. Four decisions do that: a FILLED face rather than a hairline (a 1px
   gold outline is invisible at this size), a gradient that darkens downward so
   it reads as a machined part lit from above, a hairline highlight on the top
   edge, and letterspacing matched to the wordmark's own so it sits in the same
   typographic system. */
.pro-badge {
  flex: none;
  padding: 3px 6px 3px;
  border-radius: 3px;
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pro-ink);
  background: linear-gradient(
    180deg,
    var(--pro-face-top) 0%,
    var(--pro-face-mid) 58%,
    var(--pro-face-low) 100%
  );
  box-shadow:
    inset 0 1px 0 var(--pro-edge),
    0 0 0 1px rgba(201, 160, 74, 0.55),
    0 1px 8px var(--pro-glow);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav a {
  position: relative;
  padding: 9px 11px;
  border-radius: 4px;
  color: var(--chrome-soft);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--chrome-cyan);
  background: rgba(0, 255, 204, 0.06);
}
/* The page you are on. `aria-current` is the honest signal — a class would let a
   copy-paste go stale without anything noticing. Underlined in cyan rather than
   merely recoloured: at 0.62rem, colour alone is a difference you have to look
   for, and the reader is looking for a position. */
.site-nav a[aria-current] { color: var(--chrome-cyan); }
.site-nav a[aria-current]::after {
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 1px;
  background: var(--chrome-cyan);
  opacity: 0.85;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
/* Three labelled columns over a rule, then the legal bar under a second rule.
   Before this it was one wrapping line of eight links, which is why it read as
   an afterthought: nothing in it said what kind of thing each link was. */
.site-foot {
  margin-top: 56px;
  border-top: 1px solid var(--chrome-hair);
  font-size: 0.75rem;
  color: var(--chrome-dim);
}
.site-foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr));
  gap: 26px 40px;
  padding-top: 30px;
}
.site-foot-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.site-foot-tag {
  margin: 0;
  /* Wide enough to hold the sentence on one line at desktop width — 34ch broke
     it after "your", which reads as a layout accident rather than a choice. */
  max-width: 60ch;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--chrome-dim);
}
.site-foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
/* The column heading: the same letterspaced micro-label the panels use, over a
   hairline that is only as wide as the word. */
.site-foot-label {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--chrome-hair);
  font-family: var(--font-display, 'Orbitron', monospace);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.site-foot a {
  color: var(--chrome-soft);
  text-decoration: none;
}
.site-foot a:hover { color: var(--chrome-cyan); }
.site-foot-col a { font-size: 0.78rem; }

.site-foot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  margin-top: 28px;
  padding: 14px 0 30px;
  border-top: 1px solid var(--chrome-hair);
}
/* The © line: dimmer than the links, so the eye goes to the links. */
.site-copy { color: var(--chrome-dim); }
.site-creem { color: var(--chrome-dim); }

/* A page-specific line above the links (the landing page's MIT/attribution
   note). Styled here so it cannot look like a different footer. */
.site-note {
  box-sizing: border-box;
  max-width: var(--chrome-w);
  margin: 30px auto 0;
  padding: 0 var(--chrome-pad);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--chrome-soft);
}
.site-note a { color: var(--chrome-cyan); }

/* The rail has no room below this, so the footer's columns fold into one. */
@media (max-width: 720px) {
  .site-foot-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .site-foot { margin-top: 44px; }
}

@media (max-width: 640px) {
  :root { --chrome-pad: 16px; }
  .site-head { min-height: 56px; }
  .site-brand { font-size: 0.72rem; letter-spacing: 0.16em; }
  .site-nav { font-size: 0.58rem; letter-spacing: 0.12em; }
  .site-nav a { padding: 8px 8px; }
  .site-nav a[aria-current]::after { left: 8px; right: 8px; }
}