/* humanoidrecord.com — one design (variant D, "Compare"), site-wide.
   See docs/ONTWERP.md for the contract these tokens implement. */

:root {
  /* Six-token color budget (docs/ONTWERP.md, ronde 4): paper, paper-2, ink,
     ink-2, demonstrated, shipped. `--focus` dropped (use --ink), `--rule`
     dropped (row separation is paper-2 zebra only; kop/totaalrij lines are
     --ink 1px), `--gap` dropped (no `promised_delivery` field exists in
     the data yet — returns as token 7 when it does, see timeline.js). */
  --paper: #F4F4F2;
  --paper-2: #EAE9E6;
  --ink: #0B0B0B;
  --ink-2: #3C4643;
  --demonstrated: #14406C;
  --shipped: #104924;

  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-13: 13px;
  --text-15: 15px;
  --text-19: 19px;
  --text-24: 24px;
  --text-30: 30px;
  --text-48: 48px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--text-15)/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.num, td.num, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--ink); }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -48px;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  text-decoration: none;
  z-index: 20;
  transition: top 0.12s ease;
}
.skip-link:focus { top: var(--space-2); }

/* Focus ring, everywhere, 2px ink with 2px offset */
a:focus-visible,
th[tabindex]:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Evidence stamps: shape carries the status, color is secondary */
.stamp { vertical-align: -3px; margin-right: 4px; }
.stamp--claimed { color: var(--ink); }
.stamp--demonstrated { color: var(--demonstrated); /* apca-op: #EAE9E6 */ }
.stamp--shipped { color: var(--shipped); /* apca-op: #EAE9E6 */ }

/* Footnote markers: mono, superscript, link straight to the source */
.fn {
  font-family: var(--font-mono);
  font-size: var(--text-13);
  vertical-align: super;
  margin-left: var(--space-1);
  color: var(--ink-2); /* apca-op: #EAE9E6 */
  text-decoration: none;
}
.fn:hover, .fn:focus-visible { text-decoration: underline; }
.fn:active { color: var(--ink); }

/* Signature timeline bar, shared across every page that draws one */
.tl-outline { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.tl-demonstrated { stroke: none; }
/* TODO(token 7 — gap): no record in data/*.json carries a
   `promised_delivery` field or a `promised-delivery` timeline event yet, so
   there is nothing to draw as overdue. When that field ships, reintroduce a
   `--gap` color token (budget goes to 7) and a `.tl-gap` fill rule here;
   see tools/timeline.js for the matching layout removal. */
.tl-today { fill: var(--ink-2); }
/* First delivery recorded: a filled disc on the axis, not a filled span —
   the source only proves one dated moment, not continuous delivery. */
.tl-deliver-mark { fill: var(--shipped); stroke: var(--paper); stroke-width: 0.75; }

.empty-cell { color: var(--ink-2); /* apca-op: #EAE9E6 */ }

/* Shared legend line under any timeline bar */
.tl-legend { font-size: var(--text-13); color: var(--ink-2); margin-top: var(--space-1); }

/* Row hover: an ink line on the left of the name cell, not just a
   background swap, so it stays visible on a zebra-striped (paper-2) row
   too. */
tbody tr:hover td.rowhead { box-shadow: inset 3px 0 0 var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- site chrome: header, nav, footer ------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ink);
  background: var(--paper-2);
  flex-wrap: wrap;
}
.site-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-19);
  color: var(--ink);
  text-decoration: none;
}
.site-title .dot { color: var(--ink-2); }
.site-nav { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-13); font-family: var(--font-sans); }
.site-nav a { text-decoration: none; color: var(--ink-2); padding: var(--space-1) 0; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink-2); }
.site-nav a:active { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

.site-footer {
  border-top: 1px solid var(--ink);
  padding: var(--space-4) var(--space-4) var(--space-8);
  color: var(--ink-2);
  font-size: var(--text-13);
  max-width: 1180px;
  margin: 0 auto;
}
.site-footer p { margin: var(--space-1) 0; }
.site-footer a { color: var(--ink-2); }

/* ---- page shell (every page: index, robot, shipping-reality,
   methodology, compare) ------------------------------------------------ */

.page { padding: var(--space-6) var(--space-4) var(--space-12); max-width: 1180px; margin: 0 auto; }

.page h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-30); margin: 0 0 var(--space-2); }
.page h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-24); margin: var(--space-8) 0 var(--space-3); }
.page .lede, .page .compare-subtitle {
  color: var(--ink-2);
  max-width: 72ch;
  margin: 0 0 var(--space-6);
  font-size: var(--text-15);
  line-height: 1.6;
}
/* Running prose (methodology paragraphs, intro copy): 15px content size at
   72ch/1.6, not the 16px page floor — see docs/ONTWERP.md, Typografie. */
.page p { max-width: 72ch; font-size: var(--text-15); line-height: 1.6; }
.page .crumb { font-family: var(--font-sans); font-size: var(--text-13); color: var(--ink-2); margin-bottom: var(--space-2); }
.page .crumb a { color: var(--ink-2); }

/* ---- silhouette row (index) / silhouette pair (robot + compare pages) */

.sil-row-scroll { overflow-x: auto; padding-bottom: var(--space-2); }
.sil-row, .compare-sil-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
}
.compare-sil-row { justify-content: center; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-6); }

.sil-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-1);
  position: relative;
}
.sil-figure figcaption { text-align: center; margin-top: var(--space-1); }
.sil-height { display: block; font-size: var(--text-13); white-space: nowrap; }
.sil-height--ghost { color: var(--ink-2); font-style: italic; }
.sil-height--human { color: var(--ink-2); }
/* One thin line under the whole row: each figure's own SVG draws its
   segment at the same shared GROUND_Y, so the segments line up into one
   groundline across the row (see silhouette.js ROW_MAX_CM / GROUND_Y). */
.sil-groundline { stroke: var(--ink-2); stroke-width: 1; }
.sil-name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-13);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.sil-name:hover { text-decoration: underline; }
.sil-name:active { color: var(--ink); text-decoration: underline; }

/* Evidence status carries the fill/stroke, not a caption color. */
.sil--claimed .sil-part { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 3 2; }
.sil--demonstrated .sil-part { stroke: var(--demonstrated); stroke-width: 1; }
.sil--shipped .sil-part { stroke: none; }
.sil--ghost .sil-part { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
.sil--human .sil-part { fill: none; stroke: var(--ink-2); stroke-width: 1; }

.sil-joint { stroke: none; }
.sil--claimed .sil-joint { fill: var(--ink); }
.sil--demonstrated .sil-joint { fill: var(--demonstrated); }
.sil--shipped .sil-joint { fill: var(--shipped); }
.sil--ghost .sil-joint { fill: var(--ink-2); }

.sil-payload { fill: var(--ink-2); }
.sil-battery { stroke: var(--ink-2); stroke-width: 2; }
.sil-hands { stroke: var(--ink); stroke-width: 1.2; fill: none; }

/* Selection (index only: human reference and unselectable figures never
   get .d-selectable) */
.sil-figure.d-selectable { cursor: pointer; }
.sil-figure.d-selectable:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sil-figure.d-selectable:active .sil-part { fill: var(--ink); }
.sil-figure.d-selectable.is-selected {
  box-shadow: inset 0 0 0 2px var(--ink);
  background: var(--paper-2);
}
.sil-figure.d-selectable.is-selected::after {
  content: "\2713";
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: var(--text-13);
  line-height: 1;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-1);
}

.d-select-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--paper-2);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-13);
  z-index: 5;
}
.d-counter { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.d-compare-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-13);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.d-compare-btn:disabled { cursor: default; border-color: var(--ink-2); color: var(--ink-2); }
.d-compare-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.d-compare-btn:not(:disabled):hover { background: var(--ink); color: var(--paper); }
.d-compare-btn:not(:disabled):active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- tables (index, robot, shipping-reality, compare) --------------- */

.table-scroll { overflow-x: auto; }
table.register {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: var(--text-15);
}
table.register thead th {
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-13);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--ink);
  cursor: default;
  white-space: nowrap;
}
table.register thead th[data-sort] { cursor: pointer; }
table.register thead th[data-sort]::after { content: " \2195"; font-size: var(--text-13); color: var(--ink-2); }
table.register thead th.is-sorted { font-weight: 600; text-decoration: underline; text-decoration-color: var(--ink); }
table.register thead th.is-sorted::after { color: var(--ink); }
table.register tbody td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
  white-space: nowrap;
}
table.register tbody td.quote { white-space: normal; max-width: 32ch; }
table.register tbody tr:nth-child(even) { background: var(--paper-2); }
table.register tbody tr:hover { background: var(--paper-2); }
table.register td.rowhead a { color: var(--ink); font-weight: 600; text-decoration: none; }
table.register td.rowhead a:hover { text-decoration: underline; }
table.register .tl-cell, table.register th.tl-head {
  position: sticky;
  left: 0;
  background: var(--paper);
  z-index: 1;
  box-shadow: 1px 0 0 var(--paper-2);
}
table.register tbody tr:nth-child(even) .tl-cell { background: var(--paper-2); }
table.register th.tl-head { background: var(--paper-2); vertical-align: bottom; padding: 0 var(--space-3) var(--space-1); }
.d-select-cell { white-space: nowrap; }
/* `position: relative` gives the visually-hidden label text a local
   containing block. Without it, the absolutely positioned span escapes to
   the initial containing block (the viewport) — harmless visually, but it
   makes this far-right table column inflate the *document's* scrollWidth
   on a narrow viewport, defeating `body { overflow-x: hidden }`. */
.d-select-label { display: flex; align-items: center; cursor: pointer; position: relative; }
.d-select-box { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
.legend { font-size: var(--text-13); color: var(--ink-2); margin-top: var(--space-4); }

/* ---- shipping-reality: stacked timeline instrument + core numbers ---- */

.stats { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0 0 var(--space-6); }
.stat { display: flex; flex-direction: column; }
.stat-n { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-48); line-height: 1; }
.stat-label { font-size: var(--text-13); color: var(--ink-2); max-width: 24ch; margin-top: var(--space-1); }

.instrument { margin-bottom: var(--space-8); }
.instrument-axis { margin-left: 200px; }
.instrument-table { border-collapse: collapse; width: 100%; min-width: 860px; }
.instrument-table td { padding: var(--space-1) 0; border: none; }
.instr-name {
  font-family: var(--font-sans);
  font-size: var(--text-13);
  width: 200px;
  min-width: 200px;
  text-align: right;
  padding-right: var(--space-3) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.instr-name a { color: var(--ink); text-decoration: none; }
.instr-name a:hover { text-decoration: underline; }
.instr-bar { width: 100%; }

/* ---- compare page: timeline overlay ---------------------------------- */

.timeline-overlay { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); overflow-x: auto; }
.overlay-axis { margin-left: 160px; }
.overlay-row { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.overlay-name { font-family: var(--font-sans); font-size: var(--text-13); width: 160px; flex: 0 0 160px; text-align: right; overflow: hidden; text-overflow: ellipsis; }

/* ---- compare page: evidence sheet ------------------------------------- */

.evidence-scroll { overflow-x: auto; }
table.evidence-sheet {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: var(--text-15);
}
table.evidence-sheet th, table.evidence-sheet td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  white-space: nowrap;
}
table.evidence-sheet thead th {
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-13);
  border-bottom: 1px solid var(--ink);
}
table.evidence-sheet tbody th[scope="row"] {
  font-family: var(--font-sans);
  font-weight: 600;
  background: var(--paper);
  position: sticky;
  left: 0;
  box-shadow: 1px 0 0 var(--paper-2);
}
/* Row separation is zebra only (paper-2 stripes), never a rule line —
   matches table.register. */
table.evidence-sheet tbody tr:nth-child(even) { background: var(--paper-2); }
table.evidence-sheet tbody tr:nth-child(even) th[scope="row"] { background: var(--paper-2); }
table.evidence-sheet .diff-cell { color: var(--ink-2); }
/* Source conflict is not a status: it gets no color of its own, just ink
   with a wavy underline, so every colored token keeps exactly one meaning. */
a.disagree { color: var(--ink); text-decoration: underline wavy; /* apca-op: #F4F4F2 */ }

.cite-block { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--ink); font-size: var(--text-13); color: var(--ink-2); }
.cite-block a { color: var(--ink-2); }
.endnotes { font-size: var(--text-13); color: var(--ink-2); padding-left: var(--space-6); }
.endnotes li { margin-bottom: var(--space-2); }
.endnotes a { color: var(--ink-2); }

.compare-back {
  display: block;
  padding: var(--space-2) var(--space-4);
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
  font-size: var(--text-13);
}
.compare-back a { color: var(--ink-2); text-decoration: none; }
.compare-back a:hover { color: var(--ink); text-decoration: underline; }
.compare-back a:active { color: var(--ink); }

.page h3, .page h4 { font-family: var(--font-sans); font-weight: 600; margin: var(--space-6) 0 var(--space-2); }
.page h3 { font-size: var(--text-19); }
.page h4 { font-size: var(--text-15); }

/* ---- compare (?r=) loading state -------------------------------------- */

.compare-loading { color: var(--ink-2); font-family: var(--font-sans); font-size: var(--text-15); }

/* ---- methodology (rendered from data/schema.md) ------------------------ */

.page pre { background: var(--paper-2); padding: var(--space-3); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-13); }
.page code { font-family: var(--font-mono); font-size: var(--text-13); }
.page ul { max-width: 72ch; color: var(--ink); font-size: var(--text-15); line-height: 1.6; }

/* ---- homepage intro: one-time "he lays down a record" walk-in ----
   Index (/) only. Default state below is already the final look — the
   walker stands in the row, the ledger is full width, every figure is
   visible — so no-JS and prefers-reduced-motion both get the end state for
   free. `html.d-intro-play`, added by d-intro.js only when motion is
   allowed and this session hasn't played it yet, replays the entrance.
   Transform/opacity only; see docs/ONTWERP.md, "Beweging". */

.d-record-figure { position: relative; }
.d-walker-svg { overflow: visible; }
.d-walk-leg, .d-walk-arm, .d-walk-torso { transform-box: fill-box; }

.d-ledger {
  height: 6px;
  margin: 0 0 var(--space-4);
  border: 1.5px solid var(--ink);
  box-sizing: border-box;
  transform-origin: left center;
}

html.d-intro-play #d-record .d-walker-svg { animation: d-walk-in 700ms linear both; }
html.d-intro-play #d-record .d-walk-leg--l { animation: d-step-a 700ms ease-in-out both; }
html.d-intro-play #d-record .d-walk-leg--r { animation: d-step-b 700ms ease-in-out both; }
html.d-intro-play #d-record .d-walk-arm--l { animation: d-step-b 700ms ease-in-out both; }
html.d-intro-play #d-record .d-walk-arm--r { animation: d-step-a 700ms ease-in-out both; }
html.d-intro-play #d-record .d-walk-torso { animation: d-bow 300ms 700ms ease-in both; }
html.d-intro-play #d-ledger { animation: d-ledger-in 800ms 700ms ease-out both; }
html.d-intro-play .d-intro-figure {
  animation: d-stand-up 80ms ease-out both;
  animation-delay: calc(1000ms + min(var(--d-order, 0) * 80ms, 420ms));
}

@keyframes d-walk-in {
  from { transform: translateX(-30vw); }
  to { transform: translateX(0); }
}
@keyframes d-step-a {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(22deg); }
  75% { transform: rotate(-22deg); }
}
@keyframes d-step-b {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-22deg); }
  75% { transform: rotate(22deg); }
}
@keyframes d-bow {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}
@keyframes d-ledger-in {
  0% { opacity: 0; transform: scaleX(0.05); }
  37.5% { opacity: 1; transform: scaleX(0.05); }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes d-stand-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.d-intro-play #d-record .d-walker-svg,
  html.d-intro-play #d-record .d-walk-leg--l,
  html.d-intro-play #d-record .d-walk-leg--r,
  html.d-intro-play #d-record .d-walk-arm--l,
  html.d-intro-play #d-record .d-walk-arm--r,
  html.d-intro-play #d-record .d-walk-torso,
  html.d-intro-play #d-ledger,
  html.d-intro-play .d-intro-figure {
    animation: none;
  }
}

@media (max-width: 480px) {
  .page { padding-left: var(--space-2); padding-right: var(--space-2); }
  .page h1 { font-size: var(--text-24); }
  .compare-sil-row { gap: var(--space-4); }
  .overlay-name { width: 96px; flex-basis: 96px; font-size: var(--text-13); }
  .overlay-axis { margin-left: 96px; }
  .instr-name { width: 96px; min-width: 96px; }
  .instrument-axis { margin-left: 96px; }
}