/* How Knots works: the docs.  The site's tokens (style.css); chart series
   validated with the dataviz validator against these surfaces (light
   #fafaf7, dark #181b1f): blue, orange, aqua.  Aqua sits under 3:1 on the
   light surface, so every series is labelled in text beside its marks. */
:root { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --band: rgba(87, 95, 104, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --band: rgba(156, 163, 170, .18); } }
:root[data-theme="dark"] { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --band: rgba(156, 163, 170, .18); }

body.docs { display: block; height: auto; }
.docs .brand h1 a { color: inherit; text-decoration: none; }
.toplinks a { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--select); text-decoration: none; text-transform: uppercase; }
.docwrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); max-width: 1180px; margin: 0 auto;
  padding: var(--space-6) max(16px, env(safe-area-inset-right, 0px)) var(--space-8) max(16px, env(safe-area-inset-left, 0px)); }
.toc { position: sticky; top: var(--space-4); align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; }
.toc ol { margin: var(--space-2) 0 var(--space-4); padding-left: 20px; font-size: 14px; line-height: 22px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover, .toc a.on { color: var(--select); }
.keytag { line-height: 22px; }
.doc { max-width: 760px; min-width: 0; }
.doc section { padding-bottom: var(--space-8); border-bottom: var(--stroke-hair) solid var(--rule); margin-bottom: var(--space-8); scroll-margin-top: var(--space-4); }
.doc section:last-child { border-bottom: 0; }
.doc h2 { font-size: 26px; line-height: 32px; font-weight: 600; margin: 0 0 var(--space-4); }
.doc h2 .num { font-family: var(--font-mono); font-size: 14px; color: var(--ink-muted); margin-right: var(--space-2); vertical-align: middle; }
.doc p, .doc li { font-size: 16px; line-height: 26px; }
.doc .lede { font-size: 19px; line-height: 30px; }
.doc code { font-family: var(--font-mono); font-size: 14px; background: var(--paper-raised); border: var(--stroke-hair) solid var(--rule); padding: 0 4px; border-radius: 2px; }
.doc mark { background: color-mix(in srgb, var(--select) 22%, transparent); color: inherit; padding: 0 2px; border-radius: 2px; }
.steps li { margin-bottom: var(--space-1); }
.tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; font-weight: 500; padding: 1px 6px; border-radius: 2px; border: var(--stroke-hair) solid; margin-right: var(--space-2); vertical-align: 1px; white-space: nowrap; }
.tag.ill { color: var(--ink-muted); border-color: var(--rule); }
.tag.mea { color: var(--select); border-color: var(--select); }

.fig { margin: var(--space-6) 0; background: var(--paper-raised); border: var(--stroke-hair) solid var(--rule); padding: var(--space-4); }
.fig figcaption { font-size: 13px; line-height: 19px; color: var(--ink-muted); margin-bottom: var(--space-3); }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig svg text { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-muted); }
.fig svg .ink { fill: var(--ink); }
.fig svg text.halo { paint-order: stroke; stroke: var(--paper-raised); stroke-width: 4px; stroke-linejoin: round; } .fig svg .strong { fill: var(--ink); font-weight: 500; }
.ctrls { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); font-size: 13px; }
.ctrls button, .ctrls select, .chip { font: 500 12px var(--font-mono); letter-spacing: .04em; background: var(--paper); color: var(--ink);
  border: var(--stroke-hair) solid var(--rule); border-radius: 2px; padding: 5px 10px; cursor: pointer; min-height: 30px; }
.ctrls button:hover, .chip:hover { border-color: var(--ink-muted); }
.ctrls button.primary { background: var(--select); color: #fff; border-color: var(--select); }
.ctrls label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); }
.ctrls input[type=range] { width: 180px; accent-color: var(--select); }
.readout { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.tablebtn { margin-left: auto; }
table.numbers { width: 100%; border-collapse: collapse; margin-top: var(--space-3); font-size: 13px; }
table.numbers th, table.numbers td { text-align: left; padding: 4px 8px; border-bottom: var(--stroke-hair) solid var(--grid); font-variant-numeric: tabular-nums; }
table.numbers th { font: 500 11px var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); }

/* the labelling game */
.knotpick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.exlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.exlist li { font: 13px/19px var(--font-mono); padding: 6px 8px; border: var(--stroke-hair) solid var(--grid); background: var(--paper); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-2); align-items: start; overflow-wrap: anywhere; }
.exlist .v { font-size: 10px; letter-spacing: .08em; font-weight: 500; padding-top: 2px; }
.exlist .v.f { color: var(--signal-ink); } .exlist .v.q { color: var(--ink-muted); }
.exlist mark { font-weight: 600; }
.exlist .guess { display: flex; gap: 4px; flex-wrap: wrap; }
.exlist .guess button { font: 500 11px var(--font-mono); padding: 2px 8px; border: var(--stroke-hair) solid var(--rule); background: var(--paper-raised); color: var(--ink); border-radius: 2px; cursor: pointer; }
.exlist .guess button.sel { background: var(--ink); color: var(--paper); }
.exlist li.right { border-color: var(--s3); } .exlist li.wrong { border-color: var(--signal); }
.agentlabel2 { border-left: 3px solid var(--select); padding: var(--space-2) var(--space-3); margin: var(--space-3) 0; background: var(--paper); font-size: 15px; line-height: 22px; }
.stage { font: 500 11px var(--font-mono); letter-spacing: .08em; color: var(--ink-muted); margin: var(--space-4) 0 var(--space-2); }
.score { font-size: 15px; line-height: 22px; margin-top: var(--space-3); }

canvas.anatomy { display: block; width: 100%; height: auto; margin-top: var(--space-3); cursor: crosshair; }
.anatomyinfo .cap { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.knotpick .eyebrow { align-self: center; margin: 0 2px 0 8px; }

/* the F1 explainer */
.cm { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; max-width: 580px; font-size: 13px; }
.cm .h { font: 500 11px var(--font-mono); color: var(--ink-muted); letter-spacing: .06em; align-self: end; }
.cm .cell { border: var(--stroke-hair) solid var(--rule); padding: 8px; background: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.docs .fig b { display: inline; font: inherit; font-weight: 600; }
.docs .cm .cell b { display: inline; font: 500 20px var(--font-mono); }
.cm .cell button { font: 500 14px var(--font-mono); width: 26px; height: 26px; border: var(--stroke-hair) solid var(--rule); background: var(--paper-raised); color: var(--ink); border-radius: 2px; cursor: pointer; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); max-width: 460px; }
.docs .metrics div b { display: block; font: 500 26px var(--font-mono); }
.metrics div span { font-size: 12px; color: var(--ink-muted); }

.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.quad .card { border: var(--stroke-hair) solid var(--rule); background: var(--paper-raised); padding: var(--space-3); font-size: 14px; line-height: 21px; }
.quad .card .eyebrow { display: block; margin-bottom: var(--space-1); }

.limits li { margin-bottom: var(--space-2); }
.glossary { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.glossary dt { font-weight: 600; } .glossary dd { margin: 0; color: var(--ink-muted); }
.tip { position: fixed; z-index: 10; pointer-events: none; max-width: 320px; background: var(--paper-raised); border: var(--stroke-hair) solid var(--rule);
  padding: 6px 10px; font-size: 12px; line-height: 17px; color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.tip b { font-family: var(--font-mono); }

@media (max-width: 640px) {
  .fig { overflow-x: auto; }
  .fig svg, .fig canvas.anatomy { min-width: 600px; }
}
@media (max-width: 900px) {
  .docwrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .toc { position: static; max-height: none; }
  .quad { grid-template-columns: minmax(0, 1fr); }
  .glossary { grid-template-columns: minmax(0, 1fr); }
  .glossary dd { margin-bottom: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }