/* ============================================================================
   Built Capable — the legal pages (privacy.html, terms.html)
   ----------------------------------------------------------------------------
   These two pages are plain static HTML in public/. They are not part of the
   Vite build, so they cannot link the app's hashed stylesheet, and for a page
   whose whole job is to be readable that is the right trade: no bundle, no
   JavaScript to render, nothing to go wrong on a slow connection.

   What it cost, before this file existed, was that they did not look like the
   app. Each page carried its own inline <style> with a hand-copied palette,
   and the copy had drifted:

     - Both named "Inter", "Archivo" and "IBM Plex Mono" and then never loaded
       a single one of them. The app self-hosts all three from /fonts (moved
       off Google Fonts so no visitor's IP goes to Google), and those
       @font-face rules live in src/index.css, which these pages do not link.
       So every word on the Privacy and Terms pages rendered in whatever
       generic sans the device happened to have.
     - --dim was #6c6961, the exact muted grey the app REPLACED for measuring
       4.33:1 against AA's 4.5. It is #68655d in the app.
     - Links and the eyebrow used #c9652d, the brand orange, which the app
       stopped using for text at 3.29:1 on cream. Accent-coloured text is
       --accent-text (#9f471e) there.
     - Headings were #20201d against #151513 body copy — a heading LIGHTER
       than the paragraph under it.
     - Sizes were fixed pixels, so iOS Dynamic Type and the browser's own
       font-size setting did nothing on the two pages a person is most likely
       to need to enlarge.
     - Dark mode answered only prefers-color-scheme, so setting the app to
       light on a dark phone gave you a dark Privacy page.

   Duplication is still duplication. The token values below are a hand-kept
   copy of src/index.css and tests/legal-pages.test.ts asserts every one of
   them matches, the way the dark-palette test already holds the app's own two
   copies together. Add a token here and it has to exist there with the same
   value, or the suite fails.
   ========================================================================= */

/* --- Fonts: the same self-hosted files the app uses ------------------------
   Copied from src/index.css including Google's unicode-range declarations, so
   the browser still fetches only the subset a page needs. Archivo and Inter
   are variable files covering 400-900 in one download each. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/archivo-400-900-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/archivo-400-900-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/inter-400-900-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/inter-400-900-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens: light (default) ---------------------------------------------- */
:root {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* In rem against the browser's root size, exactly as the app does it, so the
     reader's text-size setting actually moves the page. These were fixed
     pixels here, which is worst on a legal page: the copy someone enlarges is
     the copy they are trying hardest to read. */
  --t-micro: 0.75rem;
  --t-small: 0.8125rem;
  --t-body: 0.9375rem;
  --t-lead: 1.0625rem;
  --t-h3: 1.4375rem;
  --t-h1: 2rem;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --r-md: 18px;
  --r-pill: 999px;

  --bg: #f2ebdd;
  --surface: #faf7f0;
  --surface-2: #ece4d3;
  --fg: #151513;
  --fg-muted: #68655d;
  --border: #e0d8c7;
  --border-strong: #c2b8a6;
  --hairline: #e4ddce;
  --accent: #c9652d;
  --accent-text: #9f471e;
  --accent-on-dark: #e07a44;
  --warning: #8a4b12;
  --focus-ring: rgba(201, 101, 45, 0.5);
  --nav-bg: #1a1a17;
  --nav-fg: #ece7da;
  --nav-fg-muted: #97928699;
}

/* --- Tokens: dark --------------------------------------------------------- */
/* Two blocks, the same three-block shape the app uses. The attribute block is
   what the inline script in each page sets from the app's own
   `built-capable-theme` key, so the Privacy page follows the theme toggle in
   the app rather than only the OS. The media block is the answer with
   JavaScript off, and is guarded by :not([data-theme="light"]) so an explicit
   light choice still wins on a dark device. */
:root[data-theme="dark"] {
  --bg: #16160f;
  --surface: #1f1f18;
  --surface-2: #24241c;
  --fg: #f1eee4;
  --fg-muted: #a49e90;
  --border: #34332c;
  --border-strong: #47463c;
  --hairline: #26251f;
  --accent: #e07a44;
  --accent-text: #e07a44;
  --accent-on-dark: #e07a44;
  --warning: #e2a55b;
  --focus-ring: rgba(224, 122, 68, 0.6);
  --nav-bg: #101009;
  --nav-fg: #e8e3d6;
  --nav-fg-muted: #8b8677;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16160f;
    --surface: #1f1f18;
    --surface-2: #24241c;
    --fg: #f1eee4;
    --fg-muted: #a49e90;
    --border: #34332c;
    --border-strong: #47463c;
    --hairline: #26251f;
    --accent: #e07a44;
    --accent-text: #e07a44;
    --accent-on-dark: #e07a44;
    --warning: #e2a55b;
    --focus-ring: rgba(224, 122, 68, 0.6);
    --nav-bg: #101009;
    --nav-fg: #e8e3d6;
    --nav-fg-muted: #8b8677;
  }
}

/* --- Reset: the parts of the app's base the rules below rely on ----------- */
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- The app's top bar ----------------------------------------------------
   Same near-black bar, same plane triad, same 82px height, so arriving here
   from the app is arriving on a page of the app. The mark is unlit, which is
   the same call the sign-in gate makes (NO_PLANES): these pages have no
   training history to read, and an open triangle is the honest picture of
   that. It is a link back, which is what a logo in a header is for.

   The <line> coordinates in the HTML come from markSegment() in
   src/brand-mark.ts. They are the one number in these pages that is derived
   rather than chosen, and the geometry moved twice in September, so
   tests/legal-pages.test.ts recomputes them and asserts the markup matches. */
.legal-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  min-height: 82px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-bottom: 1px solid var(--nav-bg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  width: max-content;
  color: var(--nav-fg);
  text-decoration: none;
}
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; overflow: visible; }
.mark-side { stroke: currentColor; stroke-width: 5; stroke-linecap: round; opacity: .28; }
.brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1;
}
.brand small {
  display: block;
  color: var(--nav-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* --- The document ---------------------------------------------------------
   One column, still. The landing page's card surfaces are for panels of UI;
   wrapping nine sections of prose in nine bordered boxes would make a legal
   document harder to read, not more on-brand. What matches is the type, the
   palette, the chrome and the furniture. */
.wrap { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-7); }

/* The app's kicker: Inter, 13px, weight 600, sentence case. These pages had a
   mono uppercase eyebrow at 11px with 0.14em tracking — the style the app used
   to have and moved off. */
.section-kicker {
  margin: 0 0 var(--s-3);
  color: var(--accent-text);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

h1 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 800;
  /* The landing page's own h1 ramp, to the pixel: clamp(30px, 6.5vw, 46px).
     In rem here so it still answers the reader's text-size setting, which the
     app's literal-pixel version does not. */
  font-size: clamp(1.875rem, 6.5vw, 2.875rem);
  letter-spacing: -.03em;
  line-height: 1.02;
  color: var(--fg);
}
h2 {
  margin: var(--s-6) 0 var(--s-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--fg);
}
.updated { margin: 0; color: var(--fg-muted); font-family: var(--font-mono); font-size: var(--t-micro); }
/* No max-width, unlike the app's .authgate-lede it is modelled on. That 48ch
   is there to keep a lede narrow inside a wide two-column layout; the wrap
   here is already a 680px measure, so 48ch made the lede narrower than the
   body copy under it and broke the Terms lede across two lines with four
   words on the second. */
.lede { margin: var(--s-4) 0 0; color: var(--fg); font-size: var(--t-lead); line-height: 1.55; }
p { margin: var(--s-3) 0; }
ul { margin: var(--s-3) 0; padding-left: var(--s-5); }
li { margin: var(--s-2) 0; }
strong, b { font-weight: 700; }

a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The two aside blocks. Left-rule-plus-wash is the app's own `.library-note`
   idiom rather than a shape invented for these pages. */
.callout, .draft {
  margin: var(--s-5) 0 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout { border-left-color: var(--warning); font-size: var(--t-body); }
.draft { font-size: var(--t-small); color: var(--fg-muted); }
.draft strong, .callout b { color: var(--fg); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s-6) 0 var(--s-5); }

/* The landing page's own legal furniture, reused. It was a 12px uppercase mono
   link with no target size — on a phone the only way off this page. */
.legal-links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.legal-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--fg);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
}
.legal-links a:hover { border-color: var(--border-strong); color: var(--fg); }

/* Links inside a sentence still have to be reachable by a thumb — the same
   rule .app-foot a and .authgate-fine a get in the app, plus the min-width
   that rule is missing. "Stripe" measured 42px wide at every width, which is
   a 42x44 target: tall enough and still too narrow, and the height alone is
   what the app's version checks. Centred so the extra 2px falls either side
   of the word rather than all after it. */
.wrap p a, .wrap li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

@media (max-width: 640px) {
  .wrap { padding: var(--s-5) var(--s-4) var(--s-7); }
  /* Same call the app makes: below 560px the wordmark goes and the mark is the
     brand. Here it goes at the phone breakpoint because there is no nav
     competing for the row, so the name can stay a little longer. */
  .topbar { padding: 0 var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}