/* docs-reader.css — the "Reader" layout over docs/guide.html, set in the firmware face.
   Load AFTER styles.css and the page's own <style>, on guide.html only:
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="docs-reader.css">

   What it changes, and nothing else:
   1. Everything stays in Ioskeley Mono, the firmware face. The line-height
      and measure do the work a proportional face would have done.
   2. One type scale, root 20px as before. Nothing on the page renders under
      14px except the search key cap and the drawing's dashed vault tag.
      Body 16, lede 20, h3 20, h2 32, labels 14, code 15.
   3. One column. Text, figures, code blocks, tables and callouts all share the
      same 720px measure. --figure is no longer wider than the prose.
   4. Rhythm. 72px between sections, 20px between blocks, 40px above an h3.

   No new font files. */

:root {
  /* the scale, in px at a 20px root */
  --t-label: 0.7rem;   /* 14 */
  --t-code:  0.75rem;  /* 15 */
  --t-small: 0.75rem;  /* 15  captions, notes' fine print */
  --t-body:  0.8rem;   /* 16 */
  --t-h3:    1rem;     /* 20 */
  --t-lede:  1rem;     /* 20 */
  --t-h2:    1.6rem;   /* 32 */
  --measure: 720px;
}

/* ---------- frame ---------- */
.shell { max-width: 1440px; padding-top: 48px; }
.docs-layout {
  grid-template-columns: 240px minmax(0, 1fr) 220px;
  gap: 48px;
}
.docs-body {
  width: 100%;
  max-width: var(--measure);
  justify-self: center;
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: 1.75;
}
.doc-card { --figure: 100%; }
.doc-card:not([hidden]) + .doc-card:not([hidden]) {
  margin-top: 72px;
  padding-top: 72px;
}
/* every block shares the measure; the column is the cap, not a ch count */
.doc-card > p, .doc-card > ul, .doc-card > ol, .doc-card > .eyebrow,
.doc-card .lede, .codeblock, .note, .danger, .try,
.docs-body .steps, .docs-body .feats,
.airgap figcaption, .derive figcaption, .gesture figcaption,
.pins figcaption, .matrix-wrap figcaption {
  max-width: none;
}

/* ---------- headings and labels (mono) ---------- */
.docs-head h1 {
  font-size: var(--t-label);
  margin-bottom: 32px;
}
.doc-card .eyebrow {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}
.doc-card h2 {
  font-family: var(--mono);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.doc-card h3 {
  font-family: var(--mono);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  margin: 40px 0 12px;
}
.doc-card .lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 24px;
}

/* ---------- body copy ---------- */
.doc-card p, .doc-card li { color: var(--muted); }
.doc-card > p { margin: 0 0 20px; }
.doc-card > ul, .doc-card > ol { margin: 0 0 20px; padding-left: 24px; }
.doc-card > ul li, .doc-card > ol li { margin-bottom: 8px; }
.doc-card strong { color: var(--ink); font-weight: 500; }
.doc-card a { border-bottom-color: var(--control); }
.power-note { color: var(--muted); }

code {
  font-size: var(--t-code);
  padding: 2px 6px;
}
pre {
  font-size: var(--t-code);
  line-height: 1.7;
  padding: 20px 22px;
}
.codeblock { margin: 20px 0; }
.copy-btn { font-size: var(--t-label); letter-spacing: 0.1em; padding: 6px 10px; }

.doc-card p.fp {
  font-size: 0.9rem;             /* 18 */
  letter-spacing: 0.04em;
  border-left: 2px solid var(--green);
  background: rgba(53, 208, 127, 0.05);
  padding: 10px 18px;
}

/* ---------- the four steps ---------- */
.docs-body .steps { margin: 24px 0 8px; }
.docs-body .steps li {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 4px 18px;
  padding-bottom: 28px;
}
.docs-body .steps li::before {
  width: 32px; height: 32px;
  font-size: 0.65rem;            /* 13, digits in a ring */
}
.docs-body .steps li::after { left: 16px; top: 40px; }
.docs-body .steps h3 { font-size: 0.9rem; margin: 5px 0 0; }   /* 18 */
.docs-body .steps p { font-size: var(--t-body); line-height: 1.7; }
.step-where { font-size: var(--t-label); letter-spacing: 0.14em; margin-top: 6px; }
.step-where svg { width: 14px; height: 14px; }

/* ---------- features ---------- */
.docs-body .feats { gap: 32px; margin-top: 28px; }
.docs-body .feats span { font-size: var(--t-label); letter-spacing: 0.16em; }
.docs-body .feats h3 { font-size: 0.9rem; margin: 0; }
.feat-ico { width: 18px; height: 18px; }

/* ---------- figures: same width as the text, captions readable ---------- */
.airgap, .derive, .gesture, .pins, .matrix-wrap, .shots, .shot-wide, .first-run {
  max-width: 100%;
  margin: 24px 0 8px;
}
.airgap figcaption, .derive figcaption, .gesture figcaption, .pins figcaption,
.matrix-wrap figcaption, .shots figcaption, .urqr figcaption, .first-run figcaption,
.shot-wide figcaption {
  font-size: var(--t-small);
  line-height: 1.55;
  margin-top: 12px;
}
.urqr { gap: 20px; margin-top: 16px; }
.urqr-stage { width: 128px; }
.urqr-count { font-size: var(--t-label); }
.pins-key li { font-size: var(--t-body); padding-left: 36px; }
.pins-key li::before { width: 24px; height: 24px; font-size: 0.65rem; }

/* the SVG diagrams are drawn at 560 units; at 720px that is 1.29x, so their
   8.5–12px labels land at 11–15px. Lift the small ones so nothing is under 14. */
.airgap .box-sub, .airgap .gap-label, .airgap .wire-label,
.derive .sub, .derive .vault-label { font-size: 11px; }   /* ×1.29 = 14 */
/* Two tracking values are a notch tighter than the handoff asked for, because
   measured at 720px its own sizes put two labels hard against their boxes.
   "SEED STAYS HERE" at 0.06em clears the 104-unit vault by 0.03 units, which
   reads as touching; 0.04em clears it by 1.6 and keeps 13.5px exactly.
   "shown on the home screen" at the original 0.04em stands 2.5 units PROUD of
   its box on each side; 0.01em puts it back inside by 1.5. Both keep their
   rendered size and both still read as tracked. */
.derive .sub { letter-spacing: 0.01em; }
.airgap .vault-label { font-size: 10.5px; letter-spacing: 0.04em; } /* the dashed tag; tracking is part of the drawing */
.airgap .box-title, .derive .ttl { font-size: 12.5px; }   /* 16 */
.derive .val { font-size: 12px; }                          /* 15 */

/* ---------- storage matrix ---------- */
.matrix { font-size: var(--t-small); }
.matrix th, .matrix td { padding: 12px 14px; }
.matrix thead th { font-size: var(--t-label); letter-spacing: 0.1em; }
.matrix tbody th span, .matrix td span { font-size: var(--t-label); letter-spacing: 0; }

/* ---------- callouts ---------- */
.note, .danger {
  font-family: var(--mono);
  font-size: var(--t-small);     /* 15 */
  line-height: 1.7;
  padding: 16px 18px 16px 48px;
  margin: 24px 0;
}
.note::before, .danger::before { width: 18px; height: 18px; left: 18px; top: 18px; }
.danger h3 { font-size: 0.9rem; margin: 0 0 10px; }
.danger li { margin-bottom: 8px; }
.try {
  font-size: var(--t-small);
  padding: 12px 16px;
  margin: 24px 0;
}
.try a { font-size: var(--t-label); }

/* ---------- rail and on-this-page (mono, 14px floor) ---------- */
.docs-rail { top: 80px; }
.rail-group { margin-top: 26px; }
.rail-group > summary { font-size: var(--t-label); letter-spacing: 0.16em; padding: 4px 0 8px; }
/* .rail-ico, its railPop animation, the brackets and the chevron are untouched */
.rail-ico { width: 16px; height: 16px; }
.docs-rail a { font-size: var(--t-label); padding: 7px 10px; margin-left: 0; line-height: 1.35; }
.docs-toc { width: 220px; top: 80px; }
.docs-toc p { font-size: var(--t-label); letter-spacing: 0.16em; margin-bottom: 12px; }
.docs-toc a { font-size: var(--t-label); padding: 6px 0 6px 12px; line-height: 1.4; }

/* ---------- header: leave it, except the floors ---------- */
#docs-q { font-size: var(--t-label); }
.docs-search kbd { font-size: 0.6rem; }   /* the one exception: a key cap, not text to read */
.topnav a { font-size: var(--t-label); }
.docs-results a { font-size: var(--t-small); }
.docs-results .crumb, .docs-results .snip, .docs-results .empty { font-size: var(--t-label); }

/* ---------- breakpoints ---------- */
@media (max-width: 1080px) {
  .docs-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .docs-toc { display: none; }
}
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .docs-body { max-width: none; }
  .doc-card h2 { font-size: 1.4rem; }
  .doc-card:not([hidden]) + .doc-card:not([hidden]) { margin-top: 48px; padding-top: 48px; }
}

/* ---------- paper ----------
   One topic at a time is right on the screen and wrong on paper: printing
   gave you whichever topic happened to be open, and the browser's own find
   searched only that one. Here the whole guide unfolds, the furniture goes,
   and the device's dark theme is swapped for ink on white. */
@media print {
  :root {
    color-scheme: light;
    --bg: #fff;
    --ink: #111;
    --muted: #333;
    --dim: #555;
    --panel: #fff;
    --panel-2: #fff;
    --key: #fff;
    --line: #bbb;
    --line-soft: #ccc;
    --control: #999;
    --accent: #000;
    --accent-bg: #fff;
  }

  body { background: #fff; }

  /* every topic prints, not only the one on screen */
  .docs-body .doc-card[hidden] { display: block !important; }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* the furniture is for the screen */
  .topbar,
  .docs-rail,
  .docs-toc,
  .docs-pager,
  .docs-search,
  .try,
  .gesture-play,
  .copy-btn { display: none !important; }

  .docs-layout { display: block; }
  .docs-body { max-width: none; }

  .doc-card { break-before: page; }
  .doc-card:first-child { break-before: auto; }
  .doc-card h2 { break-after: avoid; }
  figure, .danger, .note, .codeblock, .feats article { break-inside: avoid; }

  /* paper has no hover and no address bar, so a link says where it goes */
  a { color: inherit; }
  .doc-card a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }
}