/* Hallmark · shape: app screen · genre: modern-minimal · theme: Console (deal 1/3, seed viva-preparation-study-notes-d2e4·f0c5d580·2026-10-25·r0)
 * nav: top bar plus a page sidebar (11 destinations) that folds into a menu under 60rem · signature: the annotated sketch, your exact lab code beside line-pinned notes · states: note focus and hover, details open, calculators, checklist done · console: graphite
 * axes: dark/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · v2.0.0
 * departure: simulation screenshots keep their colour because wire colours carry meaning; bench photographs take the theme's duotone */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 · weakest: H, a study tool has no hero; the first screen opens on the page title, one lead sentence and the page's own contents list */
/* Hallmark · sweep: Floor 0 FAIL · Reflex 0 · finish-review: in-thread (no subagent started) · 2 findings · 2 resolved (diagrams unreadable at 375, now scroll at a 620px minimum; system-diagram edge labels collided with boxes, re-laid out) */
/* Hallmark · dismissed F25 · the six-column link comparison on Foundations pins its first column with position: sticky, so the row name stays in view while the experiment columns scroll */
/* Hallmark · dismissed F1 · the straight quotes sit inside a literal AT command in the GSM diagram, AT+CMGS="+91XXXXXXXXXX", which must stay exactly as typed */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- shell ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill); }
.skip:focus-visible { top: var(--space-md); }

.topbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.topbar-in { max-width: var(--container); margin-inline: auto; padding: 0 var(--space-lg); min-height: 56px; display: flex; align-items: center; gap: var(--space-lg); }
.wordmark { font-weight: 500; text-decoration: none; color: var(--color-ink); }
.who { color: var(--color-muted); font-size: var(--text-sm); margin-left: auto; }
.menu { display: none; position: relative; }
.menu summary { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); cursor: pointer; list-style: none; font-weight: 500; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--color-paper-2); }
.menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.menu[open] ol { position: absolute; right: 0; top: calc(100% + var(--space-xs)); width: 18rem; margin: 0; padding: var(--space-xs); list-style: none; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); z-index: var(--z-dropdown); }

.shell { max-width: var(--container); margin-inline: auto; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-xl); padding: 0 var(--space-lg); }
.sidebar { position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; padding: var(--space-lg) 0; }
.sidebar ol, .menu ol { margin: 0; padding: 0; list-style: none; }
.sidebar a, .menu a { display: block; white-space: nowrap; padding: var(--space-xs) var(--space-sm); min-height: 40px; border-radius: var(--radius-pill); color: var(--color-muted); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.sidebar a:hover, .menu a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.sidebar a[aria-current="page"], .menu a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-ink); }

main { min-width: 0; padding: var(--space-xl) 0 var(--space-3xl); }
.doc { max-width: 1040px; }
.doc-head { margin-bottom: var(--space-xl); }
.doc-head h1 { font-size: var(--text-3xl); max-width: 24ch; }
.doc-head .lead { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lg); max-width: 60ch; }

@media (max-width: 60rem) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-md); }
  .sidebar { display: none; }
  .menu { display: block; }
  .who { display: none; }
  .topbar-in { justify-content: space-between; }
}

/* ---------- prose ---------- */
.doc > p, .doc section > p, .doc .prose p, .answer p, .callout p { color: var(--color-ink-2); line-height: 1.7; max-width: 62ch; }
.doc p + p, .answer p + p { margin-top: var(--space-sm); }
.doc h2 { font-size: var(--text-2xl); margin: var(--space-2xl) 0 var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); max-width: none; }
.doc h3 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-sm); }
.doc ul, .doc ol:not(.notes):not(.toc ol) { color: var(--color-ink-2); line-height: 1.7; max-width: 62ch; padding-left: var(--space-lg); margin: var(--space-sm) 0; }
.doc li + li { margin-top: var(--space-2xs); }
.doc a { text-decoration-color: var(--color-rule-2); }
.doc a:hover { color: var(--color-accent); }
strong { color: var(--color-ink); font-weight: 500; }
code { font-family: var(--font-outlier); font-size: 0.92em; color: var(--color-cool); background: var(--color-paper-3); padding: 0.05em 0.3em; border-radius: 4px; font-variant-numeric: tabular-nums slashed-zero; }

.toc { margin: 0 0 var(--space-xl); padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.toc-title { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-xs); }
.toc ol { margin: 0; padding-left: var(--space-lg); columns: 2 16rem; column-gap: var(--space-xl); color: var(--color-muted); }
.toc a { color: var(--color-ink-2); text-decoration: none; display: inline-block; padding: var(--space-3xs) 0; }
.toc a:hover { color: var(--color-accent); text-decoration: underline; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: var(--space-md) 0 var(--space-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
caption { text-align: left; color: var(--color-muted); padding-bottom: var(--space-xs); }
th, td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
thead th { color: var(--color-muted); font-weight: 500; white-space: nowrap; }
tbody th { color: var(--color-ink); font-weight: 500; }

/* ---------- figures ---------- */
.fig, .diagram { margin: var(--space-lg) 0; }
.fig img { border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); max-height: 520px; width: auto; }
.fig--photo img { filter: grayscale(1) contrast(1.08); }
figcaption { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); max-width: 62ch; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.figs .fig { margin: 0; }
@media (max-width: 40rem) { .figs { grid-template-columns: minmax(0, 1fr); } }

.diagram { overflow-x: auto; }
@media (max-width: 40rem) { .diagram svg { min-width: 620px; } }
.diagram svg { width: 100%; height: auto; max-width: 820px; background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.dg text { font-family: var(--font-body); font-size: 13px; fill: var(--color-ink-2); }
.dg .m { font-family: var(--font-outlier); font-size: 12px; fill: var(--color-cool); }
.dg .small { font-size: 11px; fill: var(--color-muted); }
.dg .t-amber { fill: var(--color-accent); }
.dg .t-cool { fill: var(--color-cool); }
.dg .t-muted { fill: var(--color-muted); }
.dg .box { fill: var(--color-paper-2); stroke: var(--color-rule-2); stroke-width: 1; }
.dg .box-amber { fill: var(--color-accent-soft); stroke: var(--color-accent); stroke-width: 1; }
.dg .box-cool { fill: var(--color-cool-soft); stroke: var(--color-cool); stroke-width: 1; }
.dg .wire { stroke: var(--color-ink-2); stroke-width: 1.5; fill: none; }
.dg .wire-amber { stroke: var(--color-accent); stroke-width: 2; fill: none; }
.dg .wire-cool { stroke: var(--color-cool); stroke-width: 2; fill: none; }
.dg .wire-dim { stroke: var(--color-rule-2); stroke-width: 1; fill: none; stroke-dasharray: 4 4; }
.dg .fill-amber { fill: var(--color-accent); }
.dg .fill-cool { fill: var(--color-cool); }
.dg .fill-ink { fill: var(--color-ink-2); }
.dg .fill-soft { fill: var(--color-cool-soft); }

/* ---------- callouts ---------- */
.callout { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-left-width: 3px; border-radius: var(--radius-pill); background: var(--color-paper-2); max-width: 68ch; }
.callout-title { color: var(--color-ink) !important; font-weight: 500; margin-bottom: var(--space-2xs); }
.callout--say { border-left-color: var(--color-accent); }
.callout--watch { border-left-color: var(--color-bad); }
.callout--note { border-left-color: var(--color-cool); }
.callout ul { margin: var(--space-xs) 0 0; }

/* ---------- the annotated sketch (signature) ---------- */
.sketch { margin: var(--space-xl) 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; background: var(--color-rule); display: grid; gap: var(--rule-hair); }
.sketch-head { background: var(--color-paper-2); padding: var(--space-sm) var(--space-lg); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-lg); }
.sketch-head h3 { margin: 0; font-size: var(--text-md); }
.sketch-meta { color: var(--color-muted); font-size: var(--text-sm); }
.sketch-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--rule-hair); }
.code { margin: 0; background: var(--color-paper-3); padding: var(--space-md) 0; overflow-x: auto; font-family: var(--font-outlier); font-size: 13px; line-height: 1.6; color: var(--color-ink-2); }
.code:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.ln { display: block; padding-right: var(--space-md); white-space: pre; transition: background-color var(--dur-micro) var(--ease-out); }
.ln-n { display: inline-block; width: 3.2em; padding-right: 1em; text-align: right; color: var(--color-muted); user-select: none; }
.ln.is-hot { background: var(--color-accent-soft); color: var(--color-ink); }
.ln.is-hot .ln-n { color: var(--color-accent); }
.notes { margin: 0; padding: var(--space-xs) 0; list-style: none; background: var(--color-paper-2); }
.notes li { padding: var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; cursor: default; transition: background-color var(--dur-micro) var(--ease-out); }
.notes li:last-child { border-bottom: 0; }
.notes li:hover, .notes li.is-hot { background: var(--color-paper-3); }
.notes li:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.notes .lines { display: block; font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-cool); margin-bottom: var(--space-3xs); font-variant-numeric: tabular-nums; }
.sketch--stack .sketch-body { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 60rem) { .sketch-body { grid-template-columns: minmax(0, 1fr); } }

/* ---------- viva questions ---------- */
.qa h3 { color: var(--color-ink); }
.qa details { border-top: var(--rule-hair) solid var(--color-rule); max-width: 68ch; }
.qa details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.qa summary { cursor: pointer; padding: var(--space-sm) var(--space-lg) var(--space-sm) 0; min-height: 44px; color: var(--color-ink); list-style: none; position: relative; line-height: 1.5; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: var(--space-xs); top: var(--space-sm); color: var(--color-muted); font-family: var(--font-outlier); }
.qa details[open] summary::after { content: "−"; }
.qa summary:hover { color: var(--color-accent); }
.qa summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.answer { padding: 0 0 var(--space-md); }

/* ---------- calculators ---------- */
.calc { margin: var(--space-lg) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rule-hair); background: var(--color-rule); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.calc > * { background: var(--color-paper-2); padding: var(--space-md) var(--space-lg); }
.calc label { display: block; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-xs); }
.calc input[type="range"] { width: 100%; accent-color: var(--color-accent); min-height: 44px; }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.calc output { display: block; font-family: var(--font-outlier); color: var(--color-cool); font-variant-numeric: tabular-nums slashed-zero; line-height: 1.7; }
.calc .reading { display: block; font-size: var(--text-2xl); color: var(--color-ink); margin-bottom: var(--space-xs); }
.calc svg { width: 100%; height: auto; }
@media (max-width: 40rem) { .calc { grid-template-columns: minmax(0, 1fr); } }

/* ---------- start page ---------- */
.doc .route { list-style: none; padding: 0; margin: var(--space-lg) 0; display: grid; gap: var(--rule-hair); background: var(--color-rule); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; max-width: none !important; }
.route li { background: var(--color-paper-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md) var(--space-lg); margin: 0 !important; }
.route a { color: var(--color-ink); font-weight: 500; text-decoration: none; }
.route a:hover { color: var(--color-accent); text-decoration: underline; }
.route p { color: var(--color-muted) !important; font-size: var(--text-sm); margin-top: var(--space-3xs); }
.done { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--color-muted); font-size: var(--text-sm); cursor: pointer; }
.done input { width: 18px; height: 18px; accent-color: var(--color-ok); }
.done input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 40rem) { .route li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } .toc { padding: var(--space-sm) var(--space-md); } .toc ol { columns: 1; padding-left: var(--space-md); } }

/* ---------- pager ---------- */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.pager a { display: block; padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); text-decoration: none; color: var(--color-ink); font-weight: 500; background: var(--color-paper-2); transition: background-color var(--dur-micro) var(--ease-out); }
.pager a:hover { background: var(--color-paper-3); }
.pager a span { display: block; color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }
.pager-next { text-align: right; grid-column: 2; }

/* ---------- pressed and disabled states ---------- */
.pager a:active, .menu summary:active, .qa summary:active, .sidebar a:active, .menu a:active { transform: translateY(1px); transition: transform var(--dur-micro) var(--ease-out); }
.calc input:disabled, .done input:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- objective spec ---------- */
.spec { margin: var(--space-lg) 0; display: grid; gap: var(--rule-hair); background: var(--color-rule); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.spec > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-md); background: var(--color-paper-2); padding: var(--space-sm) var(--space-lg); }
.spec dt { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.spec dd { margin: 0; color: var(--color-ink); line-height: 1.6; max-width: 62ch; }

/* ---------- design decisions ---------- */
.decisions { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; }
.decision { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); padding: var(--space-md) var(--space-lg); }
.decision h3 { margin: 0 0 var(--space-sm); font-size: var(--text-md); color: var(--color-ink); max-width: none; }
.decision dl { margin: 0; display: grid; gap: var(--space-xs); }
.decision dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-md); }
.decision dt { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.decision dd { margin: 0; color: var(--color-ink-2); line-height: 1.6; max-width: 62ch; }

/* ---------- steps with reasons ---------- */
.doc ol.steps { list-style: none; padding: 0; margin: var(--space-md) 0; counter-reset: step; max-width: 68ch; }
.steps li { counter-increment: step; position: relative; padding: var(--space-sm) 0 var(--space-sm) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); margin: 0 !important; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: var(--space-sm); font-family: var(--font-outlier); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.step-do { color: var(--color-ink) !important; line-height: 1.6; }
.step-why { color: var(--color-muted) !important; font-size: var(--text-sm); line-height: 1.6; margin-top: var(--space-2xs) !important; }

/* ---------- reading an artefact ---------- */
.reading-block { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; margin: var(--space-lg) 0; }
.reading-block .fig { margin: 0; }
.doc ul.reads { margin: 0; padding-left: var(--space-lg); }
.reads li { font-size: var(--text-sm); }

@media (max-width: 60rem) { .reading-block { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }
@media (max-width: 40rem) {
  .spec > div, .decision dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .steps li { padding-left: var(--space-xl); }
}

/* wide tables: the column that names the row stays in view while the rest scrolls */
tbody th[scope="row"], thead th:first-child { position: sticky; left: 0; background: var(--color-paper); z-index: var(--z-base); }
/* edge labels stay legible where they cross a line */
.dg text.m { paint-order: stroke; stroke: var(--color-paper-3); stroke-width: 4px; stroke-linejoin: round; }