/* ============================================================================
   DadPrep stylesheet — two design arms on one skeleton.

   Semantic tokens only. Arm A is the :root default; arm B retokenises under
   [data-arm="b"]. Components below reference tokens exclusively, so neither
   arm can drift structurally from the other — which is the whole point of the
   test. Layout, spacing scale and DOM order are identical in both.

   Self-contained on purpose: DadPrep is commercial and sits outside the ring,
   so a portfolio-wide _shared push must never be able to restyle it.
   ========================================================================== */

/* ======================================================== ARM A · "Paper" */
:root {
  --bg: #FBF9F5;
  --bg-2: #F4F1EA;
  --surface: #FFFFFF;
  --surface-2: #F7F4EE;
  --text: #14181B;
  --text-2: #414A50;
  --muted: #667077;
  --line: #E7E1D6;
  --line-2: #D6CEC0;
  --accent: #2C6E63;
  --accent-hover: #235A51;
  --accent-ink: #FFFFFF;
  --accent-soft: #EDF3F1;
  --accent-line: #B9D2CC;
  --warn-bg: #FBF2E7;
  --warn-line: #C57F2A;
  --bar-bg: #14181B;
  --bar-fg: #FBF9F5;
  --shadow: 0 1px 2px rgba(20,24,27,.04), 0 12px 28px -20px rgba(20,24,27,.30);
  --shadow-lift: 0 2px 6px rgba(20,24,27,.06), 0 18px 40px -24px rgba(20,24,27,.36);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --display-weight: 600;
  --display-tracking: -.014em;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius: 8px;
  --radius-sm: 5px;
  --rule-weight: 1px;

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 72px; --s8: 104px;
  --max: 1120px;
  --measure: 70ch;
  color-scheme: light;

  /* ---- AAA+++ Studio Premium (2026-08-04) ------------------------------
     The third voice, the motion curve and the keel. Shared by BOTH arms on
     purpose: the design test measures palette and type register, so every
     mechanic added here is added to A and B identically and the test stays
     readable. No new font file — the spec voice is the system mono stack. */
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
  --fs-mono: 13px;
  --track-mono: .08em;
  --t-fast: 140ms; --t-med: 220ms; --t-slow: 420ms;
  --ease-out: cubic-bezier(.25, 1, .4, 1);
  --keel: 44px;
}

/* =================================================== ARM B · "Night Shift" */
[data-arm="b"] {
  --bg: #101418;
  --bg-2: #151A20;
  --surface: #171D24;
  --surface-2: #1D242C;
  --text: #EDF0F3;
  --text-2: #B8C1CA;
  --muted: #8B96A1;
  --line: #262E37;
  --line-2: #333D48;
  --accent: #F0A73C;
  --accent-hover: #FFBB55;
  --accent-ink: #17120A;
  --accent-soft: #1E2129;
  --accent-line: #4A3D26;
  --warn-bg: #241C13;
  --warn-line: #C98A34;
  --bar-bg: #F0A73C;
  --bar-fg: #17120A;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 30px -20px rgba(0,0,0,.8);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 20px 44px -22px rgba(0,0,0,.9);

  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display-weight: 700;
  --display-tracking: -.03em;
  --radius: 6px;
  --radius-sm: 4px;
  color-scheme: dark;
}

/* ==================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17.5px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s4); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s3); top: var(--s3); background: var(--accent); color: var(--accent-ink); padding: var(--s2) var(--s3); z-index: 99; border-radius: var(--radius-sm); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Entrance motion. Two gates, deliberately: the class is only added by JS
   (so a no-JS reader gets the finished page) AND the rules only exist inside
   `prefers-reduced-motion: no-preference` (so a reduced-motion reader cannot
   be stranded looking at opacity:0 even if the class lands some other way). */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(10px); }
  .rv.in { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }

  /* Above-the-fold choreography: kicker → h1 → answer → range, 60ms apart.
     Opacity and ≤12px translate only — nothing that can move layout. */
  .doc-h .kicker, .doc-h h1, .doc-h .answer, .doc-h .rangeband { animation: dp-rise var(--t-slow) var(--ease-out) both; }
  .doc-h h1 { animation-delay: 60ms; }
  .doc-h .answer { animation-delay: 120ms; }
  .doc-h .rangeband { animation-delay: 180ms; }
  @keyframes dp-rise { from { opacity: 0; transform: translateY(12px); } }
}

/* ================================================================== header */
header.site {
  border-bottom: var(--rule-weight) solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  position: sticky; top: 0; z-index: 30;
}
header.site .bar { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: center; padding: var(--s3) var(--s4); }
.brand { text-decoration: none; color: var(--text); display: block; margin-right: auto; }
.brand span { font: var(--display-weight) 23px/1 var(--display); letter-spacing: var(--display-tracking); display: block; }
.brand small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; letter-spacing: .01em; }
header.site nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0; padding: 0; }
header.site nav a {
  color: var(--text-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 4px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
header.site nav a:hover { color: var(--accent); }
header.site nav a[aria-current] { color: var(--text); border-bottom-color: var(--accent); }

main { padding: var(--s6) 0 var(--s8); }

/* ============================================================== typography */
h1 {
  font: var(--display-weight) clamp(32px, 5vw, 50px)/1.1 var(--display);
  letter-spacing: var(--display-tracking); margin: 0 0 var(--s4); max-width: 19ch; text-wrap: balance;
}
h2 {
  font: var(--display-weight) clamp(22px, 2.6vw, 29px)/1.22 var(--display);
  letter-spacing: var(--display-tracking); margin: var(--s7) 0 var(--s3); max-width: 32ch; text-wrap: balance;
}
/* The keel. 2px × 44px of accent above every section head — the trades pair's
   smallest signature, and the one device that makes a page read as *anatomy*
   rather than a stack of paragraphs. Borrowed device, DadPrep's own colour. */
.doc h2::before, .related h2::before, .method h2::before, .sources h2::before, .faq h2::before {
  content: ""; display: block; width: var(--keel); height: 2px;
  background: var(--accent); margin-bottom: 14px;
}
.toc h2::before, .cta-end h2::before, .capture h2::before { display: none; }
h3 { font: 600 18.5px/1.35 var(--sans); letter-spacing: -.01em; margin: var(--s5) 0 var(--s2); }
p, ul, ol, dl, table, blockquote { max-width: var(--measure); }
p { margin: 0 0 var(--s3); }
ul, ol { margin: 0 0 var(--s3); padding-left: 1.3em; }
li { margin-bottom: var(--s2); }
li::marker { color: var(--muted); }
strong { font-weight: 600; color: var(--text); }

.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0 0 var(--s4); font: 400 12.5px/1.4 var(--mono); letter-spacing: .05em; color: var(--muted); }
.crumb li + li::before { content: "/"; margin-right: var(--s2); color: var(--line-2); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }

.doc-h { padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: var(--rule-weight) solid var(--line); }
/* The answer loses its box. It was a bordered alert shape; it is now open
   typography on paper with a single hairline under it — the answer is the
   page, not a callout inside the page. */
.answer {
  font-size: 19.5px; line-height: 1.58; color: var(--text-2);
  padding: 0 0 var(--s4); margin: var(--s4) 0 0;
  border-bottom: var(--rule-weight) solid var(--line); max-width: var(--measure);
}
.answer p:last-child { margin-bottom: 0; }
.byline {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  margin: var(--s4) 0 0; letter-spacing: .06em; text-transform: uppercase;
}
.byline .tag { color: var(--accent); }
.lede { font-size: 18.5px; }

/* trust row under the masthead on the homepage */
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: 0; margin: var(--s5) 0 0; max-width: none; font-size: 13.5px; color: var(--muted); }
.trust li { margin: 0; display: flex; align-items: center; gap: var(--s2); }
.trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

/* ===================================================================== toc */
.toc { background: var(--surface-2); border: var(--rule-weight) solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); margin: 0 0 var(--s6); max-width: var(--measure); }
.toc h2 { font: 600 11.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 var(--s2); }
.toc ol { margin: 0; font-size: 15px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ================================================================== blocks */
.note, .warn { border-radius: var(--radius); padding: var(--s3) var(--s4); margin: var(--s4) 0; max-width: var(--measure); font-size: 16.5px; }
.note { background: var(--accent-soft); border: var(--rule-weight) solid var(--accent-line); }
.warn { background: var(--warn-bg); border: var(--rule-weight) solid var(--warn-line); }
.note p:last-child, .warn p:last-child { margin-bottom: 0; }

blockquote { margin: var(--s5) 0; padding-left: var(--s4); border-left: 2px solid var(--line-2); color: var(--text-2); font-style: italic; font-size: 18px; }
blockquote cite { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: var(--s2); }

ol.steps { list-style: none; counter-reset: s; padding-left: 0; }
ol.steps li { counter-increment: s; position: relative; padding-left: 2.6em; margin-bottom: var(--s3); }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: .05em;
  width: 1.85em; height: 1.85em; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font: 600 13px/1 var(--sans);
}

dl.kv { margin: var(--s4) 0; max-width: var(--measure); }
dl.kv dt { font-weight: 600; margin-top: var(--s4); padding-top: var(--s3); border-top: var(--rule-weight) solid var(--line); }
dl.kv dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
dl.kv dd { margin: var(--s1) 0 0; color: var(--text-2); }

.tw { overflow-x: auto; margin: var(--s4) 0; max-width: var(--measure); }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: var(--s3); border-bottom: var(--rule-weight) solid var(--line); vertical-align: top; }
thead th { font: 600 11.5px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); border-bottom: 2px solid var(--line-2); padding-bottom: var(--s2); }
tbody th { font-weight: 500; color: var(--text); }

.faq details { border-bottom: var(--rule-weight) solid var(--line); max-width: var(--measure); }
.faq summary { cursor: pointer; padding: var(--s3) 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--s3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--accent); }
.faq details > div { padding-bottom: var(--s3); color: var(--text-2); }

.sources { margin-top: var(--s7); padding-top: var(--s4); border-top: var(--rule-weight) solid var(--line); }
.sources ul { font-size: 15px; }
.disclose { font-size: 12.5px; color: var(--muted); max-width: var(--measure); line-height: 1.55; }

/* ===================================================================== CTA */
.cta-inline {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: var(--s4); margin: var(--s6) 0; border-radius: 0 var(--radius) var(--radius) 0; max-width: var(--measure);
}
.cta-inline p { margin-bottom: var(--s2); font-size: 16.5px; }
.cta-link { font-weight: 600; white-space: nowrap; text-decoration: none; border-bottom: 2px solid var(--accent-line); }
.cta-link:hover { border-bottom-color: var(--accent); }

.cta-end {
  margin: var(--s8) 0 0; padding: var(--s6); background: var(--surface);
  border: var(--rule-weight) solid var(--line-2); border-top: 3px solid var(--accent);
  border-radius: var(--radius); max-width: var(--measure); box-shadow: var(--shadow-lift);
}
.cta-end h2 { margin-top: 0; font-size: clamp(23px, 2.4vw, 28px); }
.cta-end p { font-size: 17px; }
.cta-meta { font: 400 var(--fs-mono)/1.5 var(--mono); color: var(--muted); letter-spacing: var(--track-mono); text-transform: uppercase; font-variant-numeric: tabular-nums lining-nums; }
/* Elevation is a pointer, not decoration: exactly ONE object on any page
   floats — the end block, which is the only thing asking the reader to spend
   money. Buttons, cards and the capture panel are flat and get their weight
   from hairlines and surface steps instead. */
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font: 600 16px/1 var(--sans); padding: 15px var(--s6); border-radius: var(--radius-sm); border: 0; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out); box-shadow: none;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-sm { padding: 10px var(--s4); font-size: 14px; }
.btn-ghost { background: transparent; color: var(--text-2); border: var(--rule-weight) solid var(--line-2); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* The hero action row. Wraps rather than shrinks, because on a 360px phone two
   buttons side by side force the labels to two lines each and the pair stops
   reading as one primary and one alternative. */
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 0; }
.hero-cta .btn { flex: 0 0 auto; }
@media (max-width: 460px) { .hero-cta .btn { flex: 1 1 100%; text-align: center; } }

.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: var(--s4); align-items: center; justify-content: center; flex-wrap: wrap;
  background: var(--bar-bg); color: var(--bar-fg); padding: var(--s3) var(--s7) var(--s3) var(--s4);
  font: 500 14.5px/1.3 var(--sans); border-top: var(--rule-weight) solid var(--line-2);
  animation: rise .35s cubic-bezier(.22,.61,.36,1);
}
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sticky { animation: none; } }
.sticky p { margin: 0; max-width: none; }
/* The bar recommends a paid book, so the bar carries the disclosure too. */
.sticky .fine { color: var(--bar-fg); opacity: .78; font-size: 12px; max-width: 46ch; display: inline-block; }
.sticky .btn { background: var(--bar-fg); color: var(--bar-bg); box-shadow: none; }
.sticky .btn:hover { background: var(--bar-fg); opacity: .88; color: var(--bar-bg); }
.sticky .sx { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--bar-fg); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 10px; opacity: .7; }
.sticky .sx:hover { opacity: 1; }

/* =================================================================== cards */
.cards { list-style: none; padding: 0; margin: var(--s4) 0 0; max-width: none; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.cards li { margin: 0; }
.cards a {
  display: block; height: 100%; padding: var(--s4); background: var(--surface);
  border: var(--rule-weight) solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--text); position: relative;
  transition: border-color var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}
/* Card hover: the hairline darkens and an accent rule holds along the top
   edge. No lift, no scale, no shadow — nothing that moves, so CLS stays 0. */
.cards a::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--accent); opacity: 0; transition: opacity var(--t-med) var(--ease-out);
  border-radius: var(--radius) var(--radius) 0 0;
}
.cards a:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }
.cards a:hover::before, .cards a:focus-visible::before { opacity: 1; }
.cards strong { display: block; font: var(--display-weight) 17.5px/1.3 var(--display); letter-spacing: var(--display-tracking); margin-bottom: var(--s2); }
.cards span { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.cards em { display: block; font: 600 11px/1 var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .11em; color: var(--accent); margin-bottom: var(--s2); }
.cards.big { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards.big strong { font-size: 21px; }
.related, .stagemap, .toolmap { margin-top: var(--s7); }
.home .stagemap, .home .toolmap { margin-top: var(--s8); }

/* =================================================================== tools */
.tool-ui { margin: var(--s5) 0 var(--s6); }
.tool-bar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: var(--s4) 0; }
.tool-bar label { font-size: 14px; font-weight: 600; }
.tool-bar input { font: inherit; padding: 10px var(--s3); border: var(--rule-weight) solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.prog { margin: 0; font-size: 15px; color: var(--muted); }
.prog output { font-weight: 700; color: var(--accent); font-size: 17px; }

.checkgroup { border: var(--rule-weight) solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4) var(--s2); margin: 0 0 var(--s3); background: var(--surface); max-width: var(--measure); }
.checkgroup legend { font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; padding: 0 var(--s2); color: var(--accent); }
.checkgroup ul { list-style: none; padding: 0; margin: 0; }
.checkgroup li { margin: 0; border-bottom: var(--rule-weight) solid var(--bg-2); }
.checkgroup li:last-child { border-bottom: 0; }
.checkgroup label { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; cursor: pointer; font-size: 15.5px; line-height: 1.5; }
.checkgroup input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.checkgroup input:checked + span { color: var(--muted); text-decoration: line-through; }

.nowcard { background: var(--accent-soft); border: var(--rule-weight) solid var(--accent-line); border-radius: var(--radius); padding: var(--s4) var(--s5); margin: var(--s4) 0; max-width: var(--measure); }
.wkcard { border-bottom: var(--rule-weight) solid var(--line); padding: var(--s4) 0; max-width: var(--measure); }
.wkcard h3 { margin-top: 0; }
.wkcard.cur { border-left: 3px solid var(--accent); padding-left: var(--s4); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.wkcard p { font-size: 15.5px; margin-bottom: var(--s2); color: var(--text-2); }
.listh { margin-top: var(--s7); }

.tapgrid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); max-width: var(--measure); }
.tap { font: 600 15px/1.2 var(--sans); padding: var(--s5) var(--s2); background: var(--surface); border: var(--rule-weight) solid var(--line-2); border-radius: var(--radius); cursor: pointer; color: var(--text); transition: background .12s, color .12s, border-color .12s, transform .12s; }
.tap:hover { border-color: var(--accent); }
.tap:active, .tap.hit { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: scale(.97); }
.since { font-size: 17px; font-weight: 600; margin-top: var(--s4); }
.loglist { list-style: none; padding: 0; max-width: var(--measure); font-size: 15px; }
.loglist li { display: flex; gap: var(--s3); border-bottom: var(--rule-weight) solid var(--line); padding: var(--s2) 0; margin: 0; }
.loglist time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 4.4em; }
.loglist em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 13.5px; }

.namelist { padding-left: 1.5em; max-width: var(--measure); }
.namelist li { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; border-bottom: var(--rule-weight) solid var(--line); padding: var(--s2) 0; }
.namelist .empty { color: var(--muted); display: block; }
.row-actions { display: flex; gap: var(--s1); }
.row-actions button { background: none; border: var(--rule-weight) solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; width: 32px; height: 32px; color: var(--text-2); font-size: 14px; transition: border-color .12s, color .12s; }
.row-actions button:hover { border-color: var(--accent); color: var(--accent); }

.capture { background: var(--surface); border: var(--rule-weight) solid var(--line-2); border-radius: var(--radius); padding: var(--s5); margin: var(--s6) 0; max-width: var(--measure); box-shadow: none; }
.capture h3 { margin-top: 0; }
.capture form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.capture input { flex: 1 1 220px; font: inherit; padding: 13px var(--s3); border: var(--rule-weight) solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.capture .soon { color: var(--muted); font-size: 15px; margin-bottom: 0; }

/* ========================================================== the A/B page */
.armgrid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: none; list-style: none; padding: 0; }
.armgrid li { margin: 0; }
.armcard { display: block; padding: var(--s4); border: var(--rule-weight) solid var(--line-2); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text); }
.armcard[data-live="1"] { border-color: var(--accent); border-width: 2px; }
.armcard b { display: block; font: var(--display-weight) 19px/1.2 var(--display); letter-spacing: var(--display-tracking); }
.armcard span { display: block; color: var(--muted); font-size: 14.5px; margin: var(--s2) 0 var(--s3); }
.armcard .pill { display: inline-block; font: 600 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; padding: 6px 10px; border-radius: 100px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }

/* ================================================================== footer */
footer.site { border-top: var(--rule-weight) solid var(--line); background: var(--bg-2); padding: var(--s7) 0 var(--s8); margin-top: var(--s8); font-size: 14.5px; color: var(--text-2); }
footer.site .disc { max-width: var(--measure); font-size: 13px; color: var(--muted); line-height: 1.6; }
footer.site nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding: 0; margin: var(--s5) 0; max-width: none; }
footer.site a { color: var(--text-2); text-decoration: none; }
footer.site a:hover { color: var(--accent); text-decoration: underline; }
.fine { font-size: 12.5px; color: var(--muted); max-width: var(--measure); line-height: 1.6; }
p.disc { background: var(--surface-2); border: var(--rule-weight) solid var(--line); border-radius: var(--radius); padding: var(--s4); font-size: 13.5px; color: var(--text-2); }

/* ============================================ AAA+++ · the trust devices
   Ported by hand from the trades pair (_design/trades) into DadPrep's own
   palette and voice. DadPrep is site-local: no shared stylesheet reaches it,
   so these are re-expressed here rather than imported. Token VALUES match the
   portfolio's (140/220/420ms, the same ease, 2px×44px keel, one lift shadow)
   so the family resemblance is real; the colour and the register are ours. */

/* --- the specification voice ------------------------------------------- */
.spec, .kicker {
  font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.5;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted);
}
.kicker { color: var(--accent); margin: 0 0 var(--s2); }

/* Every figure on this site carries one of these, and it never renders
   without a date. A number with no provenance is a number we made up. */
.srcline {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  margin: var(--s3) 0 0; padding-top: var(--s2);
  border-top: var(--rule-weight) solid var(--line); max-width: var(--measure);
  font-variant-numeric: tabular-nums lining-nums;
}
.srcline a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); }
.srcline a:hover { color: var(--accent); }

/* --- the range above the fold -------------------------------------------
   The trades doctrine: state the real span before the scroll instead of a
   confident single number. On a new-dad site the thing the reader wants
   pinned down is *when*, and the honest answer is nearly always a window. */
.rangeband { margin: var(--s5) 0 0; max-width: var(--measure); }
.ranges {
  margin: 0; display: grid; gap: var(--s3) var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 2px solid var(--accent); padding-top: var(--s3); max-width: none;
}
.ranges > div { margin: 0; }
.ranges dt { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s1); }
.ranges dd { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ranges b {
  font: var(--display-weight) clamp(30px, 4.4vw, 42px)/1 var(--display);
  letter-spacing: var(--display-tracking); color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.ranges .unit { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-2); }
.ranges .qual { display: block; width: 100%; font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

/* --- the method mini-spec ------------------------------------------------
   Where the site makes a claim with a derivation, the derivation is visible,
   numbered and set in the spec voice. Prose methodology gets skipped. */
.method { margin-top: var(--s7); }
.method ol { list-style: none; counter-reset: m; padding: 0; margin: var(--s4) 0 0; max-width: var(--measure); }
.method li {
  counter-increment: m; position: relative; padding: var(--s3) 0 var(--s3) 3.2em;
  border-top: var(--rule-weight) solid var(--line); margin: 0; font-size: 16.5px;
}
.method li:last-child { border-bottom: var(--rule-weight) solid var(--line); }
.method li::before {
  content: counter(m, decimal-leading-zero); position: absolute; left: 0; top: var(--s3);
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); color: var(--accent);
}
.formula {
  font-family: var(--mono); font-size: 14px; line-height: 1.7; letter-spacing: .02em;
  background: var(--accent-soft); border-left: 2px solid var(--accent);
  padding: var(--s3) var(--s4); margin: var(--s4) 0 0; max-width: var(--measure);
  color: var(--text); overflow-x: auto;
}

/* --- the calm note ------------------------------------------------------
   This site shades into health, and a red alert box on a page a frightened
   parent just landed on is the wrong instrument. Hairline rules, spec-voice
   label, ordinary body text. It states a limit; it does not raise a pulse. */
.calm {
  border-top: var(--rule-weight) solid var(--line-2);
  border-bottom: var(--rule-weight) solid var(--line-2);
  padding: var(--s4) 0; margin: var(--s5) 0; max-width: var(--measure);
  background: none;
}
.calm .spec { display: block; margin-bottom: var(--s2); }
.calm p { font-size: 16.5px; color: var(--text-2); margin: 0; }
.calm p + p { margin-top: var(--s2); }

/* --- the breathing moment ----------------------------------------------- */
.breathe {
  margin: var(--s8) 0; padding: var(--s7) 0;
  border-top: var(--rule-weight) solid var(--line);
  border-bottom: var(--rule-weight) solid var(--line);
  max-width: none;
}
.breathe p {
  font: var(--display-weight) clamp(19px, 2.1vw, 25px)/1.45 var(--display);
  letter-spacing: var(--display-tracking); color: var(--text);
  max-width: 42ch; margin: 0 auto; text-align: center; text-wrap: balance;
}
.breathe .srcline { text-align: center; border: 0; margin-top: var(--s4); max-width: none; }

/* --- the draw underline -------------------------------------------------
   In-prose links draw their underline rather than swapping colour. */
/* Two stacked background rules: a resting hairline so the link is findable
   without relying on colour, and the accent rule that draws across it on
   hover. Backgrounds, not box-shadow — the shadow budget is spent. */
.doc p a, .doc li a, .doc dd a, .method a {
  text-decoration: none; color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent-line), var(--accent-line));
  background-position: 0 100%, 0 100%;
  background-size: 0 1px, 100% 1px;
  background-repeat: no-repeat;
  padding-bottom: 1px; transition: background-size var(--t-med) var(--ease-out);
}
.doc p a:hover, .doc li a:hover, .doc dd a:hover, .method a:hover { background-size: 100% 1px, 100% 1px; }

/* A button is not a prose link. The rule above is (0,1,2) and `.btn` is (0,1,0),
   so ANY .btn sitting inside a p/li/dd within .doc silently loses its colour to
   var(--accent) and gains the underline gradient — which paints accent text on
   an accent fill and makes the button unreadable. Found 2026-08-05 on the home
   hero. Opting buttons out here rather than at each call site, so the next
   button placed in prose can't reintroduce it. */
.doc p a.btn, .doc li a.btn, .doc dd a.btn, .method a.btn {
  color: var(--accent-ink); background-image: none; padding-bottom: 15px;
}
.doc p a.btn-ghost, .doc li a.btn-ghost, .doc dd a.btn-ghost, .method a.btn-ghost { color: var(--text-2); }
.doc p a.btn-ghost:hover, .doc li a.btn-ghost:hover, .doc dd a.btn-ghost:hover, .method a.btn-ghost:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .doc p a, .doc li a, .doc dd a, .method a { transition: none; }
}

/* --- numbers a reader compares are tabular ------------------------------- */
table, td, th, .num, .cta-meta, .prog output, .since { font-variant-numeric: tabular-nums lining-nums; }

/* --- the disclosure -----------------------------------------------------
   Promoted out of fine print. It sits beside the recommendation, at reading
   size, in ordinary sentences. A disclosure nobody reads is not a
   disclosure. */
.disclose {
  font-size: 15px; line-height: 1.6; color: var(--text-2);
  max-width: var(--measure); margin: var(--s3) 0 0;
  padding-left: var(--s3); border-left: 2px solid var(--line-2);
}
.cta-end .disclose { border-left-color: var(--accent-line); }
.disclose strong { color: var(--text); }

/* =================================================================== print */
@media print {
  header.site nav, footer.site nav, .sticky, .cta-inline, .cta-end, .related, .toc, .capture, .tool-bar { display: none !important; }
  header.site { position: static; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .rv { opacity: 1; transform: none; }
  .checkgroup { break-inside: avoid; border-color: #999; }
  a { text-decoration: none; color: #000; }
}

@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 var(--s3); }
  main { padding: var(--s5) 0 var(--s7); }
  header.site { position: static; }
  header.site .bar { padding: var(--s3); gap: var(--s3); }
  header.site nav ul { gap: var(--s3); }
  .brand { margin-right: 0; }
  .cta-end { padding: var(--s4); }
  .answer { font-size: 18px; padding-left: var(--s3); }
  .sticky { font-size: 13.5px; padding: var(--s2) var(--s6) var(--s2) var(--s3); gap: var(--s3); }
  h2 { margin-top: var(--s6); }
}