/**
 * The legal pages (Phase 190).
 *
 * These are documents rather than screens: privacy, terms and contact. They are
 * the pages a visitor reaches with no game running — sometimes deliberately,
 * sometimes because a crawler or a regulator is reading rather than playing —
 * so they are plain HTML with one small stylesheet. The contact page alone
 * loads a script, its problem-report module, which sends nothing until the
 * player presses Send; the others run no script at all.
 *
 * **This file lives in `public/`, not beside `game.css`.** `game.css` is
 * imported by `index.html` and therefore processed and content-hashed by Vite,
 * which is right for the app and wrong for a document whose URL has to be
 * stable enough to put in a sitemap and a privacy notice. `public/` is copied
 * verbatim, so `/legal.css` is `/legal.css` in every build.
 *
 * **Colours are spelled out, for the same reason `game.css` spells its one out:
 * CSS cannot import `src/styles/tokens.ts`.** That file says it is "the one hex
 * outside tokens.ts"; it is now one of two places, and all three must be kept in
 * step. The values here are `WORLD.plate` #0a0d11, `TEXT.primary` #e8eef5,
 * `FORCES.select` #5fd8f5, `UI.hudTextDim` #7a8296 and `UI.hudLine` #232c36.
 *
 * The faces are the game's own, served from `/fonts/`. Those files are copied
 * verbatim too, so unlike `game.css`'s Vite-processed URLs these paths are
 * stable. `font-display: swap` rather than `game.css`'s `block`: nothing here is
 * rasterised into a canvas, so a fallback face for one paint costs a document
 * nothing, while a blocked paint costs a reader the text.
 */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo-subset.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
}

body {
  margin: 0;
  background: #0a0d11;
  color: #e8eef5;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  /* Not a fixed px size: a legal document is the last place to override a
     reader who has set their browser's text larger. */
  font-size: 1rem;
  line-height: 1.65;
}

main {
  /* 68ch rather than a pixel width — the measure that matters is characters per
     line, and it stays right when the reader changes the size. */
  max-width: 68ch;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

h1 {
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 0.25rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2.25rem 0 0.5rem;
  color: #5fd8f5;
}

.about-heading { margin-block: 3rem 2rem; }
.about-heading p { font-size: .75rem; letter-spacing: .14em; color: #5fd8f5; }
.about-heading h1 { font-size: clamp(3rem, 10vw, 5rem); letter-spacing: -.04em; }
#maker { color: #91a1b5; font-size: .9rem; margin-top: -1rem; margin-bottom: 2rem; }
.intro { font-size: 1.2rem; }
.music-credits { columns: 2 15rem; padding-left: 1.25rem; }
.music-credits li { break-inside: avoid; }
.music-credits a { display: inline-block; padding-block: .4rem; }
.about-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 3rem; }
.about-links a, nav[aria-label="Game"] a { display: inline-flex; align-items: center; min-height: 44px; }

/* Back-link "Back to" fuses at every viewport: Archivo's space advance is narrow and the "k"/"t" pair have almost no side bearings, so the 3 px gap closes against the empty glyph space and the words read as one. Widens only this anchor's spaces. */
nav a[href="/"] { word-spacing: 0.15em; }

p, li {
  /* Long words in a URL or an address must wrap rather than push the page
     sideways on a phone. */
  overflow-wrap: anywhere;
}

a {
  color: #5fd8f5;
}

nav {
  border-bottom: 1px solid #232c36;
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
  /* Wraps to two lines on a narrow phone instead of overflowing. */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.updated {
  color: #7a8296;
  margin-top: 0;
}

footer {
  border-top: 1px solid #232c36;
  margin-top: 3rem;
  padding-top: 1rem;
  color: #7a8296;
}

table {
  border-collapse: collapse;
  width: 100%;
  /* A table is the one thing here that can genuinely need more width than the
     measure allows; let it scroll inside itself rather than move the page. */
  display: block;
  overflow-x: auto;
}

th, td {
  border: 1px solid #232c36;
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}