/* wb-static.css · WB-FLEX FR6 step 5 (#6740) + FR10 step 3 (#6744): the static pages' shared skeleton.
 *
 * Until this file, eleven pages under web/public hand-copied the same block: the reset, the dark lock, the
 * navy body gradient, the brand lockup, the crumb and the footer (about, account-delete, coming-soon, podcast,
 * privacy, profile, seattle, status, status-providers, terms, welcome). front-door.tmpl.html and
 * coverage.tmpl.html still carry their own copy, because their output is regenerated by a bake.
 * Census: docs/flex/2026-10-08/fr6-fr10-census.md section 4.1, "static skeleton".
 *
 * Each page links this file after /wb-tokens.css and before its own <style>, so a page rule of the same
 * specificity wins: a page keeps only what differs (its body layout and spacing, its footer's spacing).
 *
 * Type and colour read the tokens in /wb-tokens.css, with the compact-tier px and the dark web palette as
 * fallbacks. Alex's rules:
 *   T1-T3  headings (and the brand wordmark) in the heading family, body text in system-ui;
 *          the footer and crumb are meta (13/18 below 600, 14/20 from 600).
 *   C1     nothing below 12 px.
 *   T6     colour by role only; ink-3 is for icons, never text, so the footer and crumb move to ink-2;
 *          links are blue; orange is the CTA and the accent.
 *
 * App mode is untouched: wb-tokens.css repaints body in html.yojowa-app and hides the lockup, crumb and
 * footer there, and the family rules below are scoped to the web, because the app keeps SF and Roboto (T3).
 * The FR1 site bar is generated (tools/csigp/site_bar_sync.py); nothing here edits it. Its wordmark is
 * named in the heading-family rule only so it keeps the face it had while it inherited the old body stack. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* issue #261: menu.js's floating button sits fixed top-left (safe-area inset + 12px offset + ~44px height);
   scroll-padding-top keeps an in-page anchor from landing underneath it. */
html { color-scheme: dark; min-height: 100%; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }

/* Locked "Companion Seat" scheme (issue #70): the navy world, its glow on the surface roles. */
body {
  font-family: var(--wb-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  background: radial-gradient(120% 130% at 50% 12%, var(--wb-web-surface-2, #1A2A4D) 0%, var(--wb-web-surface, #14213F) 42%, var(--wb-web-bg, #0E1830) 100%);
  color: var(--wb-web-ink, #EAF1FB);
  -webkit-font-smoothing: antialiased;
}

/* T3: headings and the wordmark in the heading family, on the web. The headings selector weighs what a bare
   `h1` does and the wordmark selector weighs nothing (:where), so a page's own font-family still wins. Two
   selectors, not one :is(): :is() takes its heaviest argument's weight, so `.lockup .wm` in the same list
   would let it outrank a page's `h1 { font-family }`. */
:where(html:not(.yojowa-app)) :is(h1, h2, h3, h4),
:where(html:not(.yojowa-app) :is(.lockup .wm, .lockup .home, .lockup .metro, .desktop-topbar-logo)) {
  font-family: var(--wb-font-heading, "Futura", "Jost", "Century Gothic", system-ui, sans-serif);
}

/* T6: links are blue. */
a { color: var(--wb-web-link, #4D90FF); }

/* The brand lockup, in its two shapes: the centred hero (.lockup .wm) and the page header (header.lockup a.home).
   Hidden under the FR1 site bar, which repeats it. A logo, not a step on the type ladder, so its sizes stay. */
.lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.lockup .wm { font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 650; letter-spacing: -0.02em; }
.lockup .metro {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--wb-web-link, #4D90FF); font-size: clamp(1rem, 3.4vw, 1.2rem); font-weight: 600;
  border-left: 1px solid var(--wb-web-line, #273456); padding-left: 14px;
}
header.lockup { gap: 12px; margin-bottom: 8px; }
header.lockup a.home {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--wb-web-ink, #EAF1FB); text-decoration: none;
  font-weight: 650; letter-spacing: -0.02em; font-size: 1.5rem;
}
header.lockup .metro { font-size: 0.95rem; padding-left: 12px; }

/* The crumb under the page-header lockup: meta, ink-2 (it was ink-3 at 12.8 px). */
.crumb {
  color: var(--wb-web-ink-2, #9FB2D0);
  font-size: var(--wb-text-meta, 13px); line-height: var(--wb-text-meta-lh, 18px);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 26px;
}

/* issue #261: an informational footer (links, no navigation state), in-flow, scrolling with the page.
   issue-4634: it wraps, or at 390 px its children squeeze into letter-columns and the row overflows.
   Meta, ink-2 (it was ink-3 at 12 px); its links are blue. */
footer {
  margin-top: 32px;
  padding: 14px 22px calc(env(safe-area-inset-bottom, 0px) + 14px);
  font-size: var(--wb-text-meta, 13px); line-height: var(--wb-text-meta-lh, 18px);
  color: var(--wb-web-ink-2, #9FB2D0);
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--wb-web-line, #273456);
}
footer a { color: var(--wb-web-link, #4D90FF); text-decoration: none; }
footer a:hover { color: var(--wb-web-ink, #EAF1FB); }