/* Shared layout and components for the three Part 1 pages. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--font-sans); font-kerning: normal; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p, ul, ol { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--text-muted); }
strong { font-weight: 600; }
a { color: var(--tool-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
code { font: 500 0.88em var(--font-mono); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 6px; padding: 0.05em 0.35em; overflow-wrap: anywhere; }
pre { background: var(--surface); border: var(--stroke) solid var(--hairline); border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }
blockquote { margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--hairline); }
.mono, .mono-label { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono-label, .eyebrow { font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow { margin-bottom: var(--space-3); }
.muted { color: var(--text-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.js-show { display: none !important; }
.js .js-show { display: block !important; }
.js .js-hide { display: none !important; }
mark.unverified { background: none; color: var(--medium-text); font: 600 0.78em var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; border: 1px dashed var(--medium); border-radius: 4px; padding: 0 0.35em; white-space: nowrap; }
mark.todo { background: var(--medium-tint); color: var(--medium-text); font: 600 0.85em var(--font-mono); border: var(--stroke) dashed var(--medium); border-radius: 6px; padding: 0.1em 0.4em; }

.skip { position: absolute; left: var(--space-4); top: -60px; z-index: 50; background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-4); border-radius: 8px; border: var(--stroke) solid var(--tool); }
.skip:focus { top: var(--space-3); }

/* ---- top nav ---- */
.topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); }
.topnav-in { max-width: 1320px; margin: 0 auto; padding: 0 var(--space-5); height: 60px; display: flex; align-items: center; gap: var(--space-5); }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.brand-mark { width: 14px; height: 14px; border: 2px solid var(--tool); border-radius: 4px; box-shadow: inset 0 -5px 0 var(--tool); }
.brand-part { font: 500 0.72rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.topnav nav { margin-left: auto; }
.topnav ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.topnav li { margin: 0; }
.topnav nav a { display: block; padding: 6px 12px; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: 0.92rem; white-space: nowrap; }
.topnav nav a:hover { color: var(--text); background: var(--surface-2); }
.topnav nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--tool); }
.theme-btn { display: inline-flex; align-items: center; gap: 8px; font: 500 0.8rem var(--font-mono); color: var(--text-muted); background: none; border: var(--stroke) solid var(--hairline); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.theme-btn[hidden] { display: none; }
.theme-btn:hover { color: var(--text); border-color: var(--text-muted); }
.theme-ico { display: inline-flex; }
.theme-ico .icon { width: 16px; height: 16px; }
.theme-btn[data-next="light"] .i-dark, .theme-btn:not([data-next="light"]) .i-light { display: none; }
@media (max-width: 760px) {
  .topnav-in { height: auto; flex-wrap: wrap; padding: var(--space-2) var(--space-4); gap: var(--space-2) var(--space-3); }
  .brand-part { display: none; }
  .topnav nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .topnav nav a { padding: 6px 10px; font-size: 0.86rem; }
  .theme-btn { margin-left: auto; }
}

/* ---- brief layout ---- */
.layout { max-width: 1320px; margin: 0 auto; padding: 0 var(--space-5); display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); }
.sidenav { position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; padding: var(--space-7) 0 var(--space-5); }
.sidenav ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; border-left: 1px solid var(--hairline); }
.sidenav li { margin: 0; }
.sidenav a { display: block; padding: 6px 0 6px var(--space-4); margin-left: -1px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; font-size: 0.92rem; line-height: 1.35; }
.sidenav a .mono { font-size: 0.75rem; margin-right: 6px; }
.sidenav a:hover { color: var(--text); }
.sidenav a[aria-current="true"] { color: var(--text); border-left-color: var(--tool); }
main { min-width: 0; }
main:focus { outline: none; }
.page-brief main { max-width: 960px; padding-bottom: var(--space-8); }
@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sidenav { position: static; max-height: none; padding: var(--space-5) 0 0; }
  .sidenav ul { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
  .sidenav a { border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 12px; margin: 0; font-size: 0.85rem; }
  .sidenav a[aria-current="true"] { border-color: var(--tool); }
}

.hero { padding: var(--space-8) 0 var(--space-7); border-bottom: 1px solid var(--hairline); }
.hero h1 { margin-bottom: var(--space-5); }
.lead { font-size: 1.15rem; color: var(--text); max-width: var(--measure); }
.hero-problem { margin: var(--space-6) 0; padding: var(--space-5); border: var(--stroke) solid var(--hairline); border-left: 3px solid var(--analyst-ink); border-radius: var(--radius); background: var(--surface); max-width: var(--measure); }
.hero-problem .mono-label { display: block; margin-bottom: var(--space-2); }
.problem-sentence { font-size: 1.2rem; font-weight: 500; line-height: 1.45; }
.hero-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.btn { display: inline-block; padding: 10px 16px; border-radius: 10px; background: var(--tool); color: var(--on-tool); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost { background: none; color: var(--text); border: var(--stroke) solid var(--hairline); }
.btn.ghost:hover { border-color: var(--text-muted); }

.doc-section { padding: var(--space-8) 0 var(--space-4); border-bottom: 1px solid var(--hairline); }
.doc-section > p, .doc-section > ul, .doc-section > ol { max-width: var(--measure); }
.doc-section > ol > li::marker { font-family: var(--font-mono); font-size: 0.85em; }

/* tables */
.table-wrap { overflow-x: auto; margin: var(--space-5) 0; border: var(--stroke) solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.92rem; line-height: 1.45; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.table-wrap thead th { font: 500 0.72rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); }
.table-wrap tbody th { font-weight: 600; }
.table-wrap tr:last-child > * { border-bottom: 0; }
@media (max-width: 700px) { .table-wrap table { min-width: 640px; } }

/* figures */
.figure { margin: var(--space-6) 0; }
.figure figcaption { margin-top: var(--space-3); font-size: 0.85rem; color: var(--text-muted); }
.figure img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* flow diagram */
.flow { width: 100%; height: auto; display: block; font-family: var(--font-sans); overflow: visible; }
.flow-v { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 760px) { .flow-fig .flow-h { display: none; } .flow-fig .flow-v { display: block; } }
.fl-node rect { fill: var(--surface); stroke: var(--hairline); stroke-width: var(--stroke); }
.fl-node.k-tool rect { stroke: var(--tool); }
.fl-node.k-safe rect { stroke: var(--correct); }
.fl-node.k-human rect { stroke: var(--analyst-ink); }
.fl-node[data-node="analyst"] rect { fill: var(--analyst-tint); }
.fl-eyebrow { font: 500 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--text-muted); }
.k-tool .fl-eyebrow { fill: var(--tool-text); } .k-safe .fl-eyebrow { fill: var(--correct-text); } .k-human .fl-eyebrow { fill: var(--analyst-text); }
.fl-title { font: 600 21px var(--font-sans); fill: var(--text); }
.fl-title.sm { font-size: 17px; }
.fl-sub { font: 400 14.5px var(--font-sans); fill: var(--text-muted); }
.fl-edge { fill: none; stroke: var(--text-muted); stroke-width: var(--stroke); }
.fl-edge.an { stroke: var(--analyst-ink); } .fl-edge.sf { stroke: var(--correct); } .fl-edge.dash { stroke-dasharray: 5 5; }
.fl-head { fill: none; stroke: var(--text-muted); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.fl-head.an { stroke: var(--analyst-ink); } .fl-head.sf { stroke: var(--correct); }
.fl-dot { fill: var(--analyst-ink); }
.fl-label { font: 500 13px var(--font-mono); fill: var(--text-muted); }
.fl-label.an { fill: var(--analyst-text); } .fl-label.sf { fill: var(--correct-text); }
.fl-group path { fill: none; stroke: var(--hairline); stroke-width: var(--stroke); }
.fl-group.tool path { stroke: var(--tool); }
.fl-group text { font: 500 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--text-muted); }
.fl-group.tool text { fill: var(--tool-text); }
.step-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2) var(--space-4); }
.step-list li { margin: 0; }

/* chart */
.chart { width: 100%; max-width: 680px; height: auto; display: block; font-family: var(--font-sans); }
.ch-grid { stroke: var(--hairline); stroke-width: 1; }
.ch-base { stroke: var(--text-muted); stroke-width: var(--stroke); }
.ch-tick, .ch-axis { font: 400 12px var(--font-mono); fill: var(--text-muted); }
.ch-bar.b0 { fill: var(--tool); } .ch-bar.b1 { fill: var(--medium); }
.ch-val { font: 600 22px var(--font-mono); fill: var(--text); }
.ch-lab { font: 600 15px var(--font-sans); fill: var(--text); }
.ch-sub { font: 400 12px var(--font-sans); fill: var(--text-muted); }
.ch-target { stroke: var(--text); stroke-width: var(--stroke); stroke-dasharray: 6 5; }
.ch-tlab { font: 600 13px var(--font-mono); fill: var(--text); }

/* cards, chips */
.card { background: var(--surface); border: var(--stroke) solid var(--hairline); border-radius: var(--radius); padding: var(--space-5); }
.ptype-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.ptype-grid > li { margin: 0; }
.ptype { border-top: 3px solid var(--tool); }
.ptype h3 { font-size: 1.5rem; margin-bottom: var(--space-3); }
.chips { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { margin: 0; font: 500 0.78rem var(--font-mono); padding: 3px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--hairline); }
.ptype-rows { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.ptype-rows .mono-label { display: block; font-size: 0.68rem; margin-bottom: 2px; }
@media (max-width: 760px) { .ptype-grid { grid-template-columns: minmax(0, 1fr); } }

/* error-cost matrix */
.mx-wrap { margin: var(--space-6) 0 var(--space-4); overflow-x: auto; }
.matrix { width: 100%; border-collapse: separate; border-spacing: 8px; margin: -8px; min-width: 620px; table-layout: fixed; }
.matrix th { text-align: left; vertical-align: bottom; font-weight: 600; font-size: 0.95rem; padding: 4px 6px; }
.matrix thead th:first-child { width: 22%; }
.mx-corner .mono-label { font-size: 0.66rem; }
.mx-short { display: block; }
.mx-long { display: block; font: 400 0.75rem var(--font-mono); color: var(--text-muted); margin-top: 2px; }
.matrix tbody th { vertical-align: middle; }
.mx-grade { display: block; font-size: 1.02rem; }
.mx-note { display: block; font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.mx-cell { position: relative; padding: 0; vertical-align: stretch; height: 1px; }
.mx-btn { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 100%; height: 100%; min-height: 112px; text-align: left; font: inherit; font-size: 0.88rem; line-height: 1.4; color: var(--text); background: var(--surface); border: var(--stroke) solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; }
button.mx-btn { cursor: pointer; }
button.mx-btn:hover { border-color: var(--text-muted); }
button.mx-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.sev { display: inline-flex; align-items: center; gap: 6px; font: 600 0.72rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.sev-icon { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 4px; font-size: 0.7rem; letter-spacing: 0; border: 1px solid currentColor; }
.mx-text { color: var(--text); }
.sev-critical .mx-btn { background: var(--critical-tint); border-color: var(--critical); }
.sev-critical .sev, .mx-why li.sev-critical .sev { color: var(--critical-text); }
.sev-high .mx-btn { background: var(--bg); border-color: var(--critical); border-style: dashed; }
.sev-high .sev, .mx-why li.sev-high .sev { color: var(--critical-text); }
.sev-medium .mx-btn { background: var(--medium-tint); border-color: var(--medium); }
.sev-medium .sev, .mx-why li.sev-medium .sev { color: var(--medium-text); }
.sev-low .mx-btn { background: var(--surface-2); border-color: var(--low); }
.sev-low .sev, .mx-why li.sev-low .sev { color: var(--text-muted); }
.sev-desired .mx-btn { background: var(--correct-tint); border-color: var(--correct); }
.sev-desired .sev, .mx-why li.sev-desired .sev { color: var(--correct-text); }
.mx-detail { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border: var(--stroke) solid var(--hairline); border-radius: var(--radius); background: var(--surface); min-height: 96px; }
.mx-detail p:last-child, .mx-why p:last-child { margin-bottom: 0; }
.mx-detail blockquote, .mx-why blockquote { margin-top: var(--space-3); }
.mx-detail blockquote footer, .mx-why blockquote footer { font-size: 0.8rem; }
.mx-why { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.mx-why li { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.mx-why-h { margin-bottom: var(--space-2); }

/* explorer */
.explorer { margin: var(--space-6) 0; padding: var(--space-6); border-color: var(--hairline); }
.ex-badge { display: inline-flex; gap: 8px; align-items: center; font: 600 0.78rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--analyst-text); border: var(--stroke) solid var(--analyst-ink); border-radius: 8px; padding: 6px 10px; margin-bottom: var(--space-4); background: var(--analyst-tint); }
.ex-control label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.ex-row { display: flex; align-items: center; gap: var(--space-4); }
.ex-row input[type="range"] { flex: 1; accent-color: var(--tool); height: 28px; }
.ex-row output { font-size: 1.3rem; font-weight: 600; min-width: 3.5ch; }
.ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-5); align-items: start; }
@media (max-width: 820px) { .ex-grid { grid-template-columns: minmax(0, 1fr); } }
.ex-plot { width: 100%; height: auto; display: block; }
.ex-zone { fill: var(--correct-tint); stroke: var(--correct); stroke-width: 1; stroke-dasharray: 3 3; }
.ex-zonelab { font: 500 11px var(--font-mono); fill: var(--correct-text); }
.ex-qlab { font: 500 11px var(--font-mono); fill: var(--analyst-text); }
.ex-base, .ex-tick { stroke: var(--text-muted); stroke-width: 1; }
.ex-ticklab, .ex-axis { font: 400 11px var(--font-mono); fill: var(--text-muted); }
.ex-thr { stroke: var(--text); stroke-width: 2; }
.dot.g-BP { fill: var(--grade-bp); }
.dot.g-FP { fill: var(--surface); stroke: var(--grade-fp); stroke-width: 1.5; }
.dot.g-TP { fill: var(--grade-tp); }
.dot.closed.g-BP { fill: var(--correct); }
.dot.closed.g-FP { stroke: var(--correct); }
.dot.closed.g-TP { fill: var(--critical); stroke: var(--text); stroke-width: 1.5; }
.legend { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 0.82rem; color: var(--text-muted); }
.legend li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.lg-TP { color: var(--grade-tp); } .lg-BP { color: var(--grade-bp); } .lg-FP { color: var(--grade-fp); }
.lg-zone { width: 14px; height: 10px; border: 1px dashed var(--correct); background: var(--correct-tint); display: inline-block; }
.ex-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 20px; align-items: center; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-4); font-size: 0.92rem; }
.ex-line { margin-bottom: var(--space-2); }
.ex-num { font-weight: 600; font-size: 1.05rem; }
.ex-verdict { grid-column: 1 / -1; margin: var(--space-2) 0 0; padding: 8px 10px; border-radius: 8px; font-weight: 600; border: var(--stroke) solid; }
.ex-verdict.pass { color: var(--correct-text); border-color: var(--correct); background: var(--correct-tint); }
.ex-verdict.fail { color: var(--critical-text); border-color: var(--critical); background: var(--critical-tint); }
.ex-foot { font-size: 0.85rem; margin: var(--space-4) 0 0; }

.site-foot { padding: var(--space-6) 0; font-size: 0.85rem; color: var(--text-muted); }

.outro { padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }


a.url { overflow-wrap: anywhere; }

.mx-col { display: none; }
@media (max-width: 640px) {
  .matrix { min-width: 0; margin: 0; border-spacing: 0; }
  .matrix thead { display: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100%; }
  .matrix tr { margin-bottom: var(--space-5); }
  .matrix tbody th { padding: 0 0 var(--space-2); }
  .mx-grade, .mx-note { display: inline; margin-right: 8px; }
  .mx-cell { height: auto; margin-bottom: 8px; }
  .mx-btn { min-height: 0; }
  .mx-col { display: block; font-size: 0.66rem; }
  .ex-ticklab { font-size: 20px; } .ex-axis { font-size: 19px; }
  .ex-zonelab, .ex-qlab { display: none; }
}

/* ---- icons (IBM Carbon, inlined as <symbol>, coloured with currentColor) ---- */
.icon { width: var(--icon); height: var(--icon); fill: currentColor; flex: none; vertical-align: -0.28em; }
.eyebrow .icon, .mono-label .icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; }
.doc-section > .eyebrow { display: flex; align-items: center; color: var(--tool-text); }
.doc-section > .eyebrow .sec-ico { width: 24px; height: 24px; padding: 4px; box-sizing: content-box; border: var(--stroke) solid var(--hairline); border-radius: 8px; background: var(--surface); margin-right: 12px; }
.sidenav a { display: flex; align-items: baseline; gap: 0; }
.sidenav a .nav-ico { width: 16px; height: 16px; margin-right: 8px; align-self: center; color: var(--text-muted); }
.sidenav a[aria-current="true"] .nav-ico { color: var(--tool); }
.btn { display: inline-flex; align-items: center; gap: 8px; }
.btn .icon { width: 18px; height: 18px; }
.ptype .eyebrow { display: flex; align-items: center; color: var(--tool-text); }
.ptype .ptype-ico { width: 24px; height: 24px; }
.step-list li { display: flex; gap: 8px; align-items: baseline; }
.step-list .icon { width: 16px; height: 16px; color: var(--tool); align-self: center; }
.hero-problem .mono-label { display: flex; align-items: center; }
.hero-problem .mono-label .icon { color: var(--analyst-text); }
@media (max-width: 1000px) { .sidenav a .nav-ico { display: none; } }

/* ---- hero illustration (brief) ---- */
.hero-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: var(--space-6); align-items: center; }
.hero-art { margin: 0; padding: var(--space-4); border: var(--stroke) solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.hero-art figcaption { margin-top: var(--space-2); font-size: 0.66rem; }
@media (max-width: 1180px) { .hero-brief { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 460px; } }

/* ---- stage illustration (shared by brief hero, journey, poster) ---- */
.stage { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-sans); }
.sv-row { fill: var(--surface); stroke: var(--hairline-strong); stroke-width: var(--stroke); }
.sv-bar { fill: var(--hairline-strong); }
.sv-track { fill: var(--surface-2); } .sv-bar.strong { fill: var(--low); }
.sv-mono { font: 500 14px var(--font-mono); fill: var(--text-muted); letter-spacing: .04em; }
.sv-mono.sm { font-size: 12px; }
.sv-mono.big { font-size: 16px; }
.sv-mono.k { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--tool-text); }
.sv-mono.b { font-weight: 600; fill: var(--text); }
.sv-t { font: 600 19px var(--font-sans); fill: var(--text); }
.sv-h { font: 600 17px var(--font-sans); fill: var(--text); }
.sv-card { stroke-width: 2px; fill: var(--surface); stroke: var(--tool); transition: stroke .4s, fill .4s; }
.sv-badge { fill: var(--surface-2); stroke: var(--tool); stroke-width: var(--stroke); transition: stroke .4s; }
.sv-gate { stroke: var(--critical); stroke-width: 2px; stroke-dasharray: 7 6; }
.gate-t { fill: var(--critical-text); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.lane-t { fill: var(--correct-text); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.an-t { fill: var(--analyst-text); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.sv-arrow, .sv-brace { fill: none; stroke: var(--tool); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.sv-chip { fill: var(--surface-2); stroke: var(--hairline-strong); stroke-width: var(--stroke); }
.sv-chip.ok { fill: var(--correct-tint); stroke: var(--correct); }
.sv-picto { fill: var(--analyst-ink); }
.sv-handoff { fill: none; stroke: var(--correct); stroke-width: 2px; stroke-dasharray: 5 5; }

/* ---- journey ---- */
.page-journey main { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-5); }
.hero-journey { max-width: 900px; }
.picto { width: 48px; height: 48px; fill: currentColor; flex: none; }
.journey-strip { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.journey-strip li { margin: 0; }
.journey-strip a { display: grid; gap: 4px; justify-items: start; padding: var(--space-3); border: var(--stroke) solid var(--hairline); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; height: 100%; }
.journey-strip a:hover { border-color: var(--tool); }
.journey-strip .picto { width: 40px; height: 40px; color: var(--tool); }
.journey-strip li:last-child .picto { color: var(--analyst-ink); }
.journey-strip .js-t { font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
@media (max-width: 760px) { .journey-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .journey-strip .picto { width: 32px; height: 32px; } }

/* Default = JS off or reduced motion: stacked step cards, each with its own static picture. */
.scrolly { position: relative; isolation: isolate; padding: var(--space-7) 0; }
.stage-col { display: none; margin: 0; }
.steps { display: grid; gap: var(--space-5); max-width: 760px; }
.step { scroll-margin-top: 80px; }
.step-card { background: var(--surface); border: var(--stroke) solid var(--hairline); border-radius: var(--radius); padding: var(--space-5); }
.step h2 { font-size: 1.6rem; }
.step p { max-width: 62ch; }
.step-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.step-head .eyebrow { margin: 0; display: flex; align-items: center; color: var(--tool-text); }
.step-picto { width: 44px; height: 44px; color: var(--tool); }
.step[data-step="6"] .step-picto { color: var(--analyst-ink); }
.step .step-ico { width: 18px; height: 18px; }
.step-fig { margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.step-fig figcaption { margin-top: var(--space-2); font-size: 0.66rem; }
.step-link { margin: var(--space-4) 0 0; font-weight: 500; }
.step-link .icon { width: 16px; height: 16px; }
.facts { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.facts > div { display: grid; grid-template-columns: 20px auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--bg); }
.facts .icon { color: var(--tool); }
.facts dt, .facts dd { margin: 0; }
.facts dd { font: 500 0.95rem var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.stage-cap { margin: 0 0 var(--space-3); min-height: 48px; }
.stage-cap .cap { display: none; align-items: center; gap: var(--space-3); font-weight: 600; }
.cap-n { display: block; font: 500 0.72rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tool-text); }
.cap-picto { width: 44px; height: 44px; color: var(--tool); }
.cap-6 .cap-picto { color: var(--analyst-ink); }
.stage-sticky[data-state="1"] .cap-1 { display: flex; }
.stage-sticky[data-state="2"] .cap-2 { display: flex; }
.stage-sticky[data-state="3"] .cap-3 { display: flex; }
.stage-sticky[data-state="4"] .cap-4 { display: flex; }
.stage-sticky[data-state="5"] .cap-5 { display: flex; }
.stage-sticky[data-state="6"] .cap-6 { display: flex; }
.stage-note { font-size: 0.66rem; margin: var(--space-2) 0 0; }
.step-dots { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; gap: 6px; }
.step-dots li { margin: 0; }
.step-dots a { display: block; width: 28px; height: 6px; border-radius: 3px; background: var(--hairline-strong); }
.step-dots a[aria-current="step"] { background: var(--tool); }
.step-dots a:focus-visible { outline-offset: 4px; }
.progress { display: none; }

/* Scrollytelling (JS on, motion allowed): one sticky graphic, step cards scrolling past it.
   No overflow on any ancestor of the sticky element; svh units so mobile toolbars do not resize it.
   journey.js puts the trigger line at the graphic's vertical centre, so the active card sits beside it. */
.scrolly-js .stage-col { display: block; position: sticky; top: var(--nav-h, 60px); z-index: 1; }
.scrolly-js .stage-sticky { display: flex; flex-direction: column; justify-content: center; }
.scrolly-js .stage-live { display: block; width: 100%; height: auto; padding: var(--space-3); background: var(--surface); border: var(--stroke) solid var(--hairline); border-radius: var(--radius); box-sizing: border-box; }
.scrolly-js .steps { position: relative; z-index: 2; display: block; max-width: none; }
.scrolly-js .step { display: flex; align-items: center; }
.scrolly-js .step-card { width: 100%; transition: border-color .3s, box-shadow .3s; }
.scrolly-js .step.is-active .step-card { border-color: var(--tool); box-shadow: inset 3px 0 0 var(--tool); }
.scrolly-js .step-fig { display: none; }
@media (min-width: 900px) {
  .scrolly-js .scrolly { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-7); padding: 0; }
  .scrolly-js .stage-col { height: calc(100vh - var(--nav-h, 60px)); height: calc(100svh - var(--nav-h, 60px)); }
  .scrolly-js .stage-sticky { height: 100%; padding: var(--space-4) 0; }
  .scrolly-js .stage-live { max-height: calc(100svh - var(--nav-h, 60px) - 170px); }
  /* Each step is one screen tall minus the nav, so a centred card lines up with the centred graphic. */
  .scrolly-js .step { min-height: calc(72svh); }
  .scrolly-js .steps { padding: 14svh 0 22svh; }
}
/* Mobile: the graphic stays stuck at the top as a compact band; cards scroll up underneath it,
   back to back, and the active one sits right under the band. */
@media (max-width: 899px) {
  .scrolly-js .scrolly { display: block; padding: 0; }
  .scrolly-js .stage-col { background: var(--bg); border-bottom: 1px solid var(--hairline); margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); z-index: 3; }
  .scrolly-js .stage-sticky { padding: var(--space-2) 0; }
  .scrolly-js .stage-cap { min-height: 0; margin-bottom: var(--space-2); font-size: 0.9rem; }
  .scrolly-js .cap-picto { width: 28px; height: 28px; }
  .scrolly-js .stage-live { padding: 6px; max-height: 30svh; }
  .scrolly-js .stage-note, .scrolly-js .step-dots { display: none; }
  .scrolly-js .steps { padding-top: var(--space-3); }
  .scrolly-js .step { display: block; padding: 0 0 var(--space-3); }
  .scrolly-js .step:last-child { padding-bottom: 45svh; }
  .scrolly-js .step-picto { display: none; }
}
@media (max-width: 760px) { .page-journey main { padding: 0 var(--space-4); } }

/* Optional enhancement: reading progress bar on a CSS scroll timeline (fallback in journey.js). */
@media (prefers-reduced-motion: no-preference) {
  .scrolly-js .progress { display: block; position: fixed; inset: 0 0 auto; height: 3px; z-index: 50; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--tool); }
  @supports (animation-timeline: scroll()) {
    .scrolly-js .progress { animation: tl-grow linear both; animation-timeline: scroll(root); }
  }
}
@keyframes tl-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- print (brief and journey): light paper tokens come from tokens.css ---- */
@media print {
  body:not(.page-poster) { font-size: 11pt; }
  .topnav, .sidenav, .skip, .theme-btn, .hero-links, .js-show, .ex-control, .stage-col, .outro .btn { display: none !important; }
  .js .js-hide { display: block !important; }
  .layout { display: block; padding: 0; }
  .doc-section, .step, .card, figure, .mx-wrap, .table-wrap { break-inside: avoid; }
  .doc-section { padding: 18pt 0 6pt; }
  .hero { padding: 0 0 12pt; }
  a { color: inherit; }
  .scrolly-js .scrolly { display: block !important; }
  .step { min-height: 0 !important; display: block !important; margin: 0 0 12pt !important; border: 1px solid var(--hairline) !important; padding: 12pt !important; }
  .step-in { opacity: 1 !important; border: 0 !important; padding: 0 !important; }
  .step-fig { display: block !important; max-width: 110mm; }
  .flow-fig .flow-h { display: block !important; } .flow-fig .flow-v { display: none !important; }
}

/* problem-type cards (built from the doc table) */
.ptype-types { font: 500 0.78rem/1.4 var(--font-mono); color: var(--tool-text); margin: 0 0 var(--space-3); }
.chips li { white-space: normal; }
.ptype-tasks { margin: 0; display: grid; gap: 6px; font-size: 0.85rem; }
.ptype-tasks > div { display: grid; gap: 0; padding-top: 6px; border-top: 1px solid var(--hairline); }
.ptype-tasks dt { font-weight: 600; }
.ptype-tasks dd { margin: 0; color: var(--text-muted); }
/* a table cell quoted on the journey (a fragment, shown with its row and column) */
.cellq { margin: var(--space-4) 0; padding: 12px 14px; border: 1px solid var(--hairline); border-left: 3px solid var(--tool); border-radius: var(--radius-sm); background: var(--bg); }
.cellq dt { margin-bottom: 4px; }
.cellq dd { margin: 0; }