/* The manual's stylesheet.

   ⛔ There is not one colour literal in this file. The palette arrives in
   tokens.generated.css, which build.sh lifts verbatim out of the site's own
   :root — so this document cannot drift from the app the way a fourth
   hand-copied palette would. desktop/scripts/check-brand.sh has nothing to
   check here on purpose.

   Type is Inter and IBM Plex Mono, both OFL. The brand's Helvetica Neue and
   SF Mono are macOS-only and not redistributable, and a PDF carries its fonts
   with it. See fonts/fonts.css. */

@import "./tokens.generated.css";
@import "./fonts/fonts.css";

:root {
  --page-w: 210mm;
  --page-h: 297mm;
  --margin-x: 17mm;
  --margin-top: 18mm;
  --margin-bot: 14mm;

  --f-display: "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Without this the dark ground is helpfully thrown away at print time and
     the whole manual arrives as black text on white. */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 10.2pt;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@page { size: A4; margin: 0; }

/* ── the page ─────────────────────────────────────────────────────────── */

.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  padding: var(--margin-top) var(--margin-x) var(--margin-bot);
  background: var(--paper);
  /* The 4 px dot screen the site and the app both stand on. */
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 4px 4px;
  overflow: hidden;
  break-after: page;
  page-break-after: always;
}
.page:last-of-type { break-after: auto; page-break-after: auto; }

/* Stacked and separated on screen so the document can be read before it is
   printed; the gaps vanish in print, where each .page is exactly one sheet. */
@media screen {
  body { background: #0d0c0a; padding: 24px 0; }
  .page { margin: 0 auto 24px; box-shadow: var(--shadow); }
}

.folio {
  position: absolute;
  left: var(--margin-x); right: var(--margin-x); bottom: 7mm;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-mono); font-size: 7pt;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 2.5mm;
}
.folio .n { font-variant-numeric: tabular-nums; }

/* ── the mark ─────────────────────────────────────────────────────────── */

.mark { display: inline-flex; gap: 2.6mm; align-items: flex-end; }
.mark i { display: block; width: 2.9mm; border-radius: .6mm; }
.mark i:nth-child(1) { background: var(--ch-r); }
.mark i:nth-child(2) { background: var(--ch-g); }
.mark i:nth-child(3) { background: var(--ch-b); }
.mark--sm i { height: 8mm; }
.mark--lg i { height: 26mm; width: 8.6mm; }

.wordmark {
  font-family: var(--f-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.02em;
}

/* ── cover ────────────────────────────────────────────────────────────── */

.cover { display: flex; flex-direction: column; justify-content: space-between; }
.cover .top { display: flex; align-items: flex-end; gap: 6mm; }
.cover h1 {
  font-family: var(--f-display); font-weight: 800;
  font-size: 40pt; line-height: .95; letter-spacing: -.03em;
  text-transform: uppercase; margin: 0 0 6mm;
}
.cover .sub {
  font-family: var(--f-display); font-weight: 600;
  font-size: 15pt; line-height: 1.25; color: var(--ink-soft);
  max-width: 38ch; margin: 0;
}
.cover .foot { font-family: var(--f-mono); font-size: 8pt; color: var(--ink-soft); }
.cover .foot b { color: var(--ink); font-weight: 400; }

/* ── headings ─────────────────────────────────────────────────────────── */

.kicker {
  font-family: var(--f-mono); font-size: 7.5pt;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 3mm;
}
h1.chapter {
  font-family: var(--f-display); font-weight: 800;
  font-size: 26pt; line-height: 1.02; letter-spacing: -.028em;
  text-transform: uppercase; margin: 0 0 5mm;
}
h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: 13pt; line-height: 1.2; letter-spacing: -.012em;
  margin: 7mm 0 2.5mm;
}
h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: 10.6pt; line-height: 1.25; margin: 5mm 0 1.5mm;
}
.lede {
  font-family: var(--f-display); font-weight: 600;
  font-size: 12pt; line-height: 1.4; color: var(--ink);
  margin: 0 0 5mm; max-width: 60ch;
}

p { margin: 0 0 3mm; max-width: 68ch; }
p.tight { margin-bottom: 1.5mm; }
strong { font-weight: 600; }
em { font-style: italic; color: var(--ink); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.num, code, kbd {
  font-family: var(--f-mono); font-size: .92em;
  font-variant-numeric: tabular-nums;
}
code { color: var(--ink); }

/* ── figures ──────────────────────────────────────────────────────────── */

figure { margin: 4mm 0 5mm; break-inside: avoid; }
.shot {
  border: 1px solid var(--line);
  border-radius: 2mm;
  background: var(--paper-inset);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.shot img { display: block; width: 100%; }
/* Until the real screenshots land, a slot that is obviously a slot. */
.shot--pending {
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 8pt; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
  border-style: dashed;
}
figcaption {
  font-family: var(--f-mono); font-size: 7.5pt; line-height: 1.5;
  color: var(--ink-soft); margin-top: 2.5mm;
}
figcaption b { color: var(--ink); font-weight: 400; }

/* ── callouts ─────────────────────────────────────────────────────────── */

.note, .warn, .stop {
  border-left: 2px solid var(--line);
  background: var(--paper-raised);
  border-radius: 0 1.5mm 1.5mm 0;
  padding: 3mm 4mm;
  margin: 4mm 0;
  break-inside: avoid;
  max-width: 68ch;
}
.note p:last-child, .warn p:last-child, .stop p:last-child { margin-bottom: 0; }
.warn { border-left-color: var(--selection); }
/* alarm is reserved by docs/brand.md for "this cannot be undone" — one use. */
.stop { border-left-color: var(--alarm); }
.note .lbl, .warn .lbl, .stop .lbl {
  display: block;
  font-family: var(--f-mono); font-size: 7pt;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 1.5mm; color: var(--ink-soft);
}
.warn .lbl { color: var(--selection); }
.stop .lbl { color: var(--alarm); }

/* ── tables ───────────────────────────────────────────────────────────── */

table {
  width: 100%; border-collapse: collapse;
  margin: 4mm 0 5mm; break-inside: avoid;
  font-size: 9pt;
}
th, td {
  text-align: left; vertical-align: top;
  padding: 2mm 3mm 2mm 0;
  border-bottom: 1px solid var(--line);
}
th {
  font-family: var(--f-mono); font-size: 7pt;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 400;
  border-bottom-color: var(--chassis);
}
td.n, th.n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── lists ────────────────────────────────────────────────────────────── */

ul, ol { margin: 0 0 3mm; padding-left: 5mm; max-width: 68ch; }
li { margin-bottom: 1.2mm; }
ul.plain { list-style: none; padding-left: 0; }
/* ⛔ The tick and the cross are DRAWN, not typed. U+2713 and U+2717 fall outside
   the latin and latin-ext subsets, so as characters they silently pulled Menlo
   and SF into the PDF — caught by pdffonts, not by eye. Nothing here needs a
   glyph that is not in the two embedded families. */
ul.check li { list-style: none; position: relative; padding-left: 7mm; }
ul.check li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 3.4mm; height: 3.4mm;
}
ul.check li.yes::before {
  width: 2mm; height: 3.4mm; top: .2em; left: .6mm;
  border-right: .55mm solid var(--ch-g);
  border-bottom: .55mm solid var(--ch-g);
  transform: rotate(40deg);
}
ul.check li.no::before {
  background:
    linear-gradient( 45deg, transparent 43%, var(--alarm) 43%, var(--alarm) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--alarm) 43%, var(--alarm) 57%, transparent 57%);
}

/* ── the channel chips, as on the site ────────────────────────────────── */

.bands { display: flex; gap: 6mm; margin: 3mm 0 4mm; }
.band {
  display: inline-flex; align-items: center; gap: 2mm;
  font-family: var(--f-mono); font-size: 8pt;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.band i { width: 2mm; height: 4mm; border-radius: .5mm; display: block; }
.band.r i { background: var(--ch-r); }
.band.g i { background: var(--ch-g); }
.band.b i { background: var(--ch-b); }

/* ── contents ─────────────────────────────────────────────────────────── */

.toc { margin-top: 4mm; }
.toc a {
  display: flex; align-items: baseline; gap: 3mm;
  text-decoration: none; padding: 1.8mm 0;
  border-bottom: 1px solid var(--line);
}
.toc .t { font-family: var(--f-display); font-weight: 600; font-size: 10.5pt; }
.toc .d { flex: 1; }
.toc .p { font-family: var(--f-mono); font-size: 8pt; color: var(--ink-soft); }
.toc .c {
  font-family: var(--f-mono); font-size: 8pt; color: var(--ink-soft);
  width: 7mm; flex: none;
}