/*
 * The document pages' stylesheet -- /about*.html, /privacy.html, /terms.html.
 *
 * ONE sheet, linked by every doc page, in place of the eleven hand-copied
 * <style> blocks those pages each carried. Eleven copies drift, and these
 * already had: a `var(--mono)` on `.doc code` naming a token retired in #118
 * (so it resolved to nothing and inherited --sans anyway -- the rule was
 * dead, not wrong); a 24px/14.5px type pair matching no step of the #152
 * scale; two hard-coded callout hexes; and `.sig--amber` declared on
 * about-wipe.html alone, so the same signal was available on one page out of
 * eleven. Site polish WP-C, docs/superpowers/specs/2026-09-18-site-polish-design.md
 * ("One system, one stylesheet").
 *
 * This file READS app/src/ui/styles.css's tokens and declares no palette of
 * its own beyond the two amber steps below. That file is the design and is
 * not improvised on; this one is only the doc pages' layer on top of it, and
 * is linked after it on every page so the cascade lands in that order.
 *
 * Shipped to dist/doc.css by tools/build.mjs (ROOT_FILES) and served on the
 * workshop host by infra/router.js.tftpl -- about-wipe.html is a doc page and
 * reaches the reader there too, so a sheet the workshop redirects away is
 * about-wipe.html with no styling at all.
 */

:root {
  /* The amber trio's other two steps. --amber itself is declared in
     styles.css; the -dim/-edge pair at 0.10/0.45 is the pattern EVERY trio in
     that file already uses (--coral, and all ten --cat-* accents), and
     224,168,62 IS --amber's own rgb -- no new hue and no new hex: these are
     the same two values --cat-timeline-dim/-edge and --cat-systems-dim/-edge
     hold, at the same hue, under a name that says which signal they are
     rather than which codex category borrowed them. Declared HERE rather than
     in the tokens block because another work package owns styles.css this
     pass; when that block grows the pair, delete these two lines and the
     var() references below keep working unchanged. */
  --amber-dim: rgba(224, 168, 62, 0.1);
  --amber-edge: rgba(224, 168, 62, 0.45);
}

.doc { max-width: 760px; margin: 0 auto; padding: 32px 20px 90px; }
/* --fs-title, not 24px. A page title is the same size in every tool (#152);
   24px was a sixth step nobody decided on, two px above the one that exists. */
.doc h1 { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.doc .lede { font-size: var(--fs-lede); color: var(--text-2); line-height: 1.6; margin: 0 0 34px; }
/* The three sizes still written in px are the LABEL register, not text: a
   caps, 0.11em-tracked section rule (h2), a caps column head (th), and the
   table's own body. #152 separates a label from data by caps, tracking and
   colour rather than by shrinking, so moving these is a decision about the
   scale itself and not this package's to make -- they are left exactly as the
   eleven blocks had them. */
.doc h2 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-3); margin: 38px 0 12px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.doc h3 { font-size: var(--fs-lede); font-weight: 600; margin: 22px 0 6px; }
/* --fs-lede (15px), not 14.5px -- the nearest real step, and half a pixel
   from where these pages already were.
   max-width in ch is the MEASURE: 70ch of running prose, about 630px at this
   size, inside a 720px column. It is set on the paragraph and the list item
   and nowhere else, so a table keeps the full column to lay its cells out in
   (`.doc table` is display:block with its own overflow, and a cell capped at
   70ch would wrap a row that fits). */
.doc p, .doc li { font-size: var(--fs-lede); color: var(--text-2); line-height: 1.65; max-width: 70ch; }
.doc p { margin: 0 0 12px; }
/* `ol` joined `ul` with the per-route guides (#501), whose "how to use it"
   section is a numbered list of three. One rule for both, so a numbered list
   and a bulleted one do not indent differently on the same page. */
.doc ul, .doc ol { margin: 0 0 12px; padding-left: 20px; }
.doc li { margin-bottom: 5px; }
.doc strong { color: var(--text); font-weight: 600; }
/* There is ONE typeface (#118). This rule used to say var(--mono), a token
   deleted when the mono register was retired, which resolved to nothing. */
.doc code { font-family: var(--sans); font-size: var(--fs-body); color: var(--text); }
.doc a { color: var(--amber); }
.doc table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 13.5px; }
.doc th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-4); padding: 0 12px 7px 0;
  border-bottom: 1px solid var(--border);
}
.doc td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hairline); color: var(--text-2); vertical-align: top; }
.doc td:first-child { color: var(--text); white-space: nowrap; }
.callout {
  border: 1px solid var(--border-bright); background: var(--surface);
  border-radius: 8px; padding: 14px 16px; margin: 0 0 16px;
}
.callout p:last-child { margin-bottom: 0; }
/* The same zero, for a callout whose last child is a LIST rather than a
   paragraph (about-bis.html's three kinds of claim). A no-op on every callout
   that already shipped -- each of those ends in a <p>. */
.callout ul:last-child { margin-bottom: 0; }
/* Was `border-color: #4a4234; background: #211d15;` with `color: #d8c294` on
   the text: three hexes that appear nowhere else on the site and answer to
   nothing. The amber trio says the same thing and moves when amber does. */
.callout--warn { border-color: var(--amber-edge); background: var(--amber-dim); }
.callout--warn p { color: var(--amber-bright); }
.back { display: inline-block; margin-bottom: 16px; font-size: 13px; padding: 10px 0; }
.doc table { display: block; overflow-x: auto; }
@media (max-width: 700px) {
  .doc th { font-size: 12px; }
  .doc td:first-child { white-space: normal; }
}
/* The claim signals, and they must never share a severity scale (styles.css's
   own header): --coral is a fix, --teal an upgrade or a measurement made
   here, --amber a middle answer that is still an answer, --text-4 a number
   repeated from somewhere else. All four are declared once now; .sig--amber
   used to exist on about-wipe.html alone. */
.sig { color: var(--teal); font-weight: 600; }
.sig--coral { color: var(--coral); }
.sig--amber { color: var(--amber); }
.sig--muted { color: var(--text-4); }
/* privacy.html and terms.html only: the "last updated" line under the policy. */
.updated { font-size: 12.5px; color: var(--text-4); margin-top: 30px; }

/* THE PER-ROUTE GUIDE (#501) IS GONE (#507). Its rules -- a top edge under
   the tool, and an h1 margin -- went with it: the copy a crawler reads lives
   inside the app root now, and nothing renders a second band under a working
   tool. The maintainer's words for what it looked like: cluttered.

   THE APP ROOT'S PLACEHOLDER (#505, and since #507 the whole of what a
   crawler reads): the page's h1 and its copy, inside <main id="app">, which
   the app's first render replaces with its own title band. `.doc` dresses it
   -- it is a heading and prose, which is what this sheet is for -- and this
   modifier only takes back the bottom padding that belongs under a whole
   document, because a footer ad rail sits under this one. With JavaScript on
   it lives for one paint; with JavaScript off it IS the page. */
.doc--placeholder { padding-bottom: 32px; }
/* A DATA PAGE'S PLACEHOLDER (#507) is the whole best-in-slot table, the three
   talent trees, the checklist or the raid's drops, rendered where the app's
   own view is about to be. The markup inside is the app's -- `bis-list__row`,
   `home__cons-line`, `changes__item`, the classes styles.css already dresses
   -- and this rule gives it the app's WIDTH too: 880px is what
   `.landing__inner--wide` gives the same table a second later, so the column
   does not jump sideways when the app takes the page. The 70ch measure on
   `p` and `li` above is untouched: prose stays readable, the table gets the
   room. */
.doc--data { max-width: 880px; }