:root {
  color-scheme: dark;
  --bg: #101110;
  --surface: #191b18;
  --raised: #22251f;
  --ink: #eeeae0;
  --muted: #b1b3a7;
  --line: #3e4438;
  --lime: #c6f24e;
  --lime-hover: #d4ff70;
  --amber: #edbd70;
  --danger: #f2a49a;
  --paper: #eee6d4;
  --paper-ink: #292b24;
  --paper-muted: #626052;
  --paper-line: #bfb7a4;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-base: 1rem;
  --text-lg: 1.375rem;
  --text-title: clamp(2rem, 4vw, 3.25rem);
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --radius-sm: .375rem;
  --radius: .75rem;
  --pill: 999px;
  --sidebar-width: 14rem;
  --content-width: 78rem;
  --map-height: 470px;
  --control-height: 44px;
  --motion: 160ms ease;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font: var(--text-base)/1.6 var(--sans); }
button, input, select, textarea { font: inherit; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
button { min-height: var(--control-height); cursor: pointer; }
button, input, select, textarea { border: 1px solid var(--line); border-radius: var(--radius-sm); }
button { padding: var(--s2) var(--s4); background: var(--raised); color: var(--ink); transition: background var(--motion), border-color var(--motion); }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; }
button:disabled { color: var(--muted); }
a { color: var(--lime); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h2 { font: 400 var(--text-title)/1.12 var(--serif); letter-spacing: -.025em; }
h3 { font-size: var(--text-lg); font-weight: 600; }
p { max-width: 72ch; }
p + p { margin-top: var(--s4); }
small { font-size: var(--text-xs); }
svg { display: block; }

.app-shell { max-width: var(--content-width); min-height: 100vh; min-height: 100dvh; margin-inline: auto; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line); }
.topbar > div:first-child { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.brand-mark { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--lime); font-family: var(--mono); }
.topbar h1 { font-size: var(--text-lg); font-weight: 600; }
.topbar p, .site-footer { color: var(--muted); font-size: var(--text-xs); }
.status-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.badge, .solved-tag { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--pill); font: var(--text-xs)/1.5 var(--mono); }
.workspace { flex: 1; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { padding: var(--s6) var(--s4); border-right: 1px solid var(--line); }
.sidebar nav { display: grid; gap: var(--s2); }
.sidebar button[data-view] { width: 100%; text-align: left; background: transparent; border-color: transparent; border-left: 3px solid transparent; }
.sidebar button[data-view].active, .sidebar button[data-view][aria-current="page"] { border-left-color: var(--lime); background: var(--raised); font-weight: 600; }
.progress-block { margin-top: var(--s7); padding-inline: var(--s3); }
.progress-block p { margin-top: var(--s2); color: var(--muted); font-size: var(--text-xs); }
progress { display: block; width: 100%; height: var(--s2); overflow: hidden; border: 0; border-radius: var(--pill); background: var(--raised); accent-color: var(--lime); }
progress::-webkit-progress-bar { background: var(--raised); }
progress::-webkit-progress-value { background: var(--lime); }
progress::-moz-progress-bar { background: var(--lime); }
#main { min-width: 0; padding: var(--s7); }
#main > * + * { margin-top: var(--s5); }
.page-heading { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.eyebrow { color: var(--amber); font: var(--text-xs)/1.5 var(--mono); }
.lede { color: var(--muted); max-width: 60ch; }
.briefing { padding: var(--s6); background: var(--surface); border-left: 3px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0; }
.actions, .reader-toolbar, .archive-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.primary { background: var(--lime); color: var(--bg); border-color: var(--lime); font-weight: 600; }
.secondary { background: var(--raised); }
.quiet { background: transparent; color: var(--muted); border-color: transparent; text-decoration: underline; text-underline-offset: .25em; }
button:active:not(:disabled):not([aria-disabled="true"]) { border-style: inset; }
.site-footer { padding: var(--s4) var(--s6); border-top: 1px solid var(--line); }

/* Roads and nodes share the board's percentage coordinate system. */
.map-board { position: relative; isolation: isolate; height: var(--map-height); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.map-roads { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map-roads path { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map-roads path.visited { stroke: var(--muted); }
.map-roads path.locked { stroke-dasharray: 5 7; }
.map-node { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s2); width: clamp(7rem, 20%, 10rem); padding: var(--s3); text-align: left; background: var(--raised); }
.node-index { grid-row: span 2; align-self: start; color: var(--amber); font: var(--text-xs)/1.6 var(--mono); }
.node-name { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.node-type { grid-column: 2; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.map-node.locked { border-style: dashed; background: var(--surface); }
.map-node.locked .node-index::after { content: " /"; }
.map-node.visited { border-left: 3px solid var(--lime); }
.map-node.visited .node-index::after { content: " ✓"; }
.map-node.active, .map-node[aria-current="location"] { outline: 2px solid var(--lime); outline-offset: 3px; }
.map-node:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; z-index: 2; }
.map-legend { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); color: var(--muted); font-size: var(--text-xs); }
.map-legend > * { display: inline-flex; align-items: center; gap: var(--s2); }
.map-legend .locked { border-bottom: 1px dashed currentColor; }
.map-legend .visited::before { content: "✓"; }
.map-caption { color: var(--muted); font-size: var(--text-sm); }

.location-head { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); }
.document-list { list-style: none; padding: 0; margin: 0; }
.document-list li + li { margin-top: var(--s2); }
.document-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--s4); width: 100%; padding: var(--s4); background: var(--surface); text-align: left; }
.doc-number { color: var(--amber); font: var(--text-xs)/1.5 var(--mono); }
.doc-info { min-width: 0; }
.doc-info .document-title, .doc-info small { display: block; }
.doc-info .document-title { font-weight: 400; overflow-wrap: anywhere; }
.doc-info small, .doc-status { color: var(--muted); font-size: var(--text-xs); }
.document-row.visited .doc-status::before { content: "✓ "; }
.puzzle-list, .hint-stack { display: grid; gap: var(--s4); }
.puzzle-card, .deduction-card, .person-card { padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.puzzle-card > * + *, .deduction-card > * + * { margin-top: var(--s4); }
.puzzle-card > p, .deduction-card > p { color: var(--muted); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--text-sm); font-weight: 600; }
input:not([type="radio"]):not([type="checkbox"]), select, textarea { min-width: 0; width: 100%; min-height: var(--control-height); padding: var(--s3); background: var(--bg); color: var(--ink); }
textarea { min-height: 9rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="radio"], input[type="checkbox"] { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin: var(--s1) 0; accent-color: var(--lime); }
[aria-invalid="true"] { border-color: var(--danger); border-style: dashed; }
.feedback { color: var(--amber); font-size: var(--text-sm); overflow-wrap: anywhere; }
.feedback:empty { display: none; }
.feedback.error { color: var(--danger); border-left: 2px dashed currentColor; padding-left: var(--s3); }
.feedback.success { color: var(--lime); }
.feedback.success::before { content: "✓ "; }
.hint-box, .explanation, .notice { padding: var(--s4); background: var(--raised); border-left: 3px solid var(--amber); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.archive-toolbar input { flex: 1 1 15rem; }
.empty-state { padding: var(--s7) var(--s5); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }
.empty-state p { margin-inline: auto; }
.choices, .evidence-picker { display: grid; gap: var(--s2); padding: 0; border: 0; min-width: 0; }
.choice, .evidence-option { display: flex; align-items: start; gap: var(--s3); min-height: var(--control-height); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.choice span, .evidence-option span { min-width: 0; overflow-wrap: anywhere; }
.choice:has(input:checked), .evidence-option:has(input:checked) { background: var(--raised); border-color: var(--lime); }
.choice input:checked + span, .evidence-option input:checked + span { font-weight: 600; }
.choice:has(input:disabled), .evidence-option:has(input:disabled) { cursor: not-allowed; border-style: dashed; }
.deduction-card.solved, .puzzle-card.solved, .deduction-card:has(.solved-tag) { border-left: 3px solid var(--lime); }
.solved-tag { color: var(--lime); }
.solved-tag::before { content: "✓"; }
.notebook-note textarea { min-height: 17rem; line-height: 1.8; }

.document-paper { color-scheme: light; background: var(--paper); color: var(--paper-ink); padding: clamp(var(--s5), 5vw, var(--s8)); border-radius: var(--radius-sm); }
.paper-header { padding-bottom: var(--s5); border-bottom: 1px solid var(--paper-line); }
.paper-type { color: var(--paper-muted); font: var(--text-xs)/1.5 var(--mono); margin-bottom: var(--s3); }
.paper-header h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.paper-meta { margin-top: var(--s4); color: var(--paper-muted); font-size: var(--text-xs); }
.paper-body { padding-block: var(--s6); font: var(--text-lg)/1.8 var(--serif); overflow-wrap: anywhere; }
.paper-body p { max-width: 65ch; }
.paper-footer { border-top: 1px solid var(--paper-line); padding-top: var(--s4); color: var(--paper-muted); font: var(--text-xs)/1.6 var(--mono); }
.document-paper a { color: var(--paper-ink); }
.document-paper :focus-visible { outline-color: var(--paper-ink); }
.reader-toolbar { justify-content: space-between; }
.notice.warning { border-left-style: double; border-left-width: 6px; color: var(--amber); }
.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s4); }
.initials { display: grid; place-items: center; width: var(--s7); height: var(--s7); margin-bottom: var(--s4); background: var(--raised); border-radius: 50%; color: var(--amber); font: var(--text-sm)/1 var(--mono); }
.person-role { color: var(--amber); font-size: var(--text-xs); margin-block: var(--s2) var(--s4); }
.person-card p { color: var(--muted); font-size: var(--text-sm); }
.reward-card { padding: var(--s6); background: var(--paper); color: var(--paper-ink); border-radius: var(--radius); }
.reward-card > * + * { margin-top: var(--s4); }
.lock-code { display: inline-block; max-width: 100%; padding: var(--s3) var(--s5); border: 2px dashed var(--paper-muted); font: 600 var(--text-lg)/1.5 var(--mono); letter-spacing: .15em; overflow-wrap: anywhere; user-select: all; }
.case-closed { padding-block: var(--s5); border-block: 1px solid var(--line); }
.case-closed::before { content: "✓"; display: block; color: var(--lime); font-size: var(--text-lg); margin-bottom: var(--s3); }
.hint-stack details { border-bottom: 1px solid var(--line); padding-block: var(--s3); }
.hint-stack summary { min-height: var(--control-height); padding: var(--s2); cursor: pointer; font-weight: 600; }
.hint-stack details[open] summary { color: var(--amber); }
.hint-stack details p { padding: var(--s3) var(--s2) var(--s4); color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (hover: hover) {
  button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--raised); border-color: var(--muted); }
  .primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--lime-hover); border-color: var(--lime-hover); }
  .quiet:hover:not(:disabled) { color: var(--ink); }
  .choice:hover, .evidence-option:hover { border-color: var(--muted); }
}

@media (max-width: 760px) {
  .topbar { padding: var(--s4); align-items: start; flex-wrap: wrap; gap: var(--s4); }
  .topbar h1 { font-size: var(--text-base); }
  .status-group { margin-left: auto; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .sidebar { min-width: 0; padding: var(--s3) var(--s4); border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar nav { display: flex; overflow-x: auto; gap: var(--s2); padding: var(--s2); scroll-padding-inline: var(--s2); }
  .sidebar button[data-view] { flex: 0 0 auto; width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .sidebar button[data-view].active, .sidebar button[data-view][aria-current="page"] { border-bottom-color: var(--lime); }
  .progress-block { margin-top: var(--s3); padding-inline: var(--s2); }
  .progress-block p { margin-top: var(--s1); }
  #main { padding: var(--s6) var(--s4); }
  .briefing { padding: var(--s5); }
  .site-footer { padding-inline: var(--s4); }
  .map-node { width: 7rem; padding: var(--s2); gap: var(--s1); }
  .node-name { font-size: var(--text-xs); }
  .document-row { gap: var(--s3); grid-template-columns: 1.5rem minmax(0, 1fr); }
  .doc-status { grid-column: 2; }
  .puzzle-card, .deduction-card { padding: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .map-roads path { stroke: CanvasText; }
  .primary, .map-node.active, .choice:has(input:checked), .evidence-option:has(input:checked) { border-color: Highlight; }
  :focus-visible { outline-color: Highlight; }
}