/**
 * The standalone policy pages (privacy.html, terms.html).
 *
 * These are plain documents served outside the app — no shell, no components,
 * no bundle. They carried a byte-identical <style> block each: their own
 * system-ui stack, a hand-mixed grey text ramp, near-white rules and
 * Bootstrap-blue links. Two copies of a stylesheet that no check read and that
 * would drift the first time someone edited one page and not the other.
 *
 * One file now, on the app's tokens, so the legal pages follow the theme
 * instead of approximating it. No tokens were minted for them: every value here
 * already existed in theme.css, which is why the palette shifts slightly (links
 * are --primary, not Bootstrap blue) — that is the point.
 *
 * Pair it with theme.css, which defines the tokens:
 *   <link rel="stylesheet" href="/src/styles/theme.css" />
 *   <link rel="stylesheet" href="/src/styles/pages.css" />
 *
 * It lives beside theme.css rather than in public/ for the reason the smoke
 * test caught within a minute of it being written: the dev server's root is
 * the repo (public/*.html is REWRITTEN to, not served from, the root), while
 * in dist public/ IS the root. So `/pages.css` resolves in production and
 * 404s in development. `/src/styles/` is the one shape that holds in both —
 * the build copies src/styles/*.css to dist/src/styles/, which is why
 * index.html has always linked theme.css that way.
 */

body {
    /* The type roles are full `font` shorthands — weight, size, line-height and
       family in one token. */
    font: var(--body-medium);
    color: var(--on-surface);
    background: var(--surface);
    /* No token: the measure of a text column is not part of the scale. */
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8);
}

h1 {
    font: var(--headline);
    color: var(--on-surface);
    border-bottom: 1px solid var(--outline-variant);
    padding-bottom: var(--space-2);
}

h2 {
    font: var(--title-large);
    color: var(--on-surface);
    margin-top: var(--space-8);
}

a {
    color: var(--primary);
}

.back-link {
    display: inline-block;
    margin-bottom: var(--space-8);
    color: var(--on-surface-variant);
}

.last-updated {
    color: var(--on-surface-variant);
    font: var(--body-small);
    margin-top: var(--space-12);
    padding-top: var(--space-4);
    border-top: 1px solid var(--outline-variant);
}