:root {
  --ink: #16232c;
  --ink-soft: #3c4b54;
  --muted: #5d696f;
  --paper: #f1ede3;
  --paper-deep: #e7dfd0;
  --panel: #fffdf7;
  --panel-cool: #f6f8f6;
  --line: #d3cab9;
  --line-strong: #aaa08f;
  --nav: #101c24;
  --nav-soft: #1d303a;
  --blue: #275f79;
  --blue-pale: #d9e9ef;
  --red: #9c4039;
  --red-pale: #f1dcda;
  --gold: #a97623;
  --gold-ink: #805516;
  --gold-pale: #f4e6c5;
  --green: #2f7259;
  --green-pale: #d9eade;
  --purple: #755079;
  --purple-pale: #eadced;
  --teal: #246b6b;
  --teal-pale: #d7e9e7;
  --shadow-sm: 0 4px 16px rgba(26, 36, 43, .08);
  --shadow-lg: 0 24px 70px rgba(13, 22, 29, .28);
  --radius: 14px;
  --topbar-h: 66px;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; overflow-x: clip; scroll-behavior: smooth; }
html:has(body[data-route]:not([data-route="overview"])) { scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; overflow-x: clip; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--blue); }
img, video { max-width: 100%; }
kbd { font: 600 .72rem/1 var(--font-code); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 300; top: 8px; left: 8px; transform: translateY(-150%); padding: 9px 13px; border-radius: 8px; background: white; color: var(--ink); }
.skip-link:focus { transform: translateY(0); }
:where(button, a, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.topbar :focus-visible, .primary-nav :focus-visible { outline-color: #efc77d; }

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 620px);
  align-items: center;
  gap: 20px;
  padding: 9px 18px;
  color: white;
  background: linear-gradient(100deg, #0f1a22, #203945);
  border-bottom: 3px solid #c49847;
  box-shadow: 0 4px 16px rgba(0,0,0,.24);
}
.brand-block { display: flex; flex-direction: column; min-width: 0; letter-spacing: .035em; }
.brand-block strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; }
.brand-kicker { color: #e7bd72; font-size: .63rem; font-weight: 800; letter-spacing: .16em; }
.global-search-area { position: relative; min-width: 0; }
.global-search { position: relative; display: flex; align-items: center; min-width: 0; }
.global-search input { width: 100%; height: 42px; padding: 0 46px 0 14px; color: var(--ink); background: #fff; border: 0; border-radius: 10px; outline: 2px solid transparent; box-shadow: inset 0 0 0 1px #0002; }
.global-search input:focus { outline-color: #e8b962; }
.global-search kbd { position: absolute; right: 10px; padding: 5px 7px; color: #65727b; background: #edf0ef; border: 1px solid #d6dada; border-radius: 5px; }
.search-results { position: absolute; z-index: 90; top: calc(100% + 8px); left: 0; right: 0; max-height: min(560px, calc(100dvh - var(--topbar-h) - 28px)); overflow: auto; padding: 8px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); scrollbar-gutter: stable; overscroll-behavior-y: auto; }
.search-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px 12px; color: var(--ink-soft); font-size: .82rem; }
.search-result { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 10px; width: 100%; padding: 12px 9px; color: var(--ink); background: transparent; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 7px; text-align: left; }
.search-result:hover, .search-result:focus-visible { background: var(--blue-pale); border-color: #9fc3d0; }
.search-result strong { font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.search-result small { grid-column: 2; color: var(--ink-soft); font-size: .76rem; line-height: 1.4; overflow-wrap: anywhere; }
.search-result-kind { align-self: start; padding: 4px 6px; color: #24566e; background: #e3eef1; border-radius: 5px; font-size: .69rem; font-weight: 800; }
.search-results-empty { padding: 12px; color: var(--muted); line-height: 1.5; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid #ffffff55; border-radius: 9px; color: white; background: #ffffff12; text-decoration: none; }
.icon-button { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--panel); font-size: 1.35rem; }
.icon-button:hover, .icon-button:focus-visible { background: var(--paper-deep); }

.app-shell { min-height: 100vh; padding-top: var(--topbar-h); }
.primary-nav {
  position: fixed;
  z-index: 60;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  width: 246px;
  overflow-y: auto;
  padding: 16px 12px 24px;
  color: #dce5e7;
  background: linear-gradient(180deg, var(--nav), #162833);
  border-right: 1px solid #ffffff12;
}
.primary-nav > a { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 7px; min-height: 42px; padding: 8px 10px; color: #dce5e7; border-radius: 9px; text-decoration: none; font-size: .9rem; }
.primary-nav > a span { color: #7f9aa5; font: 700 .68rem var(--font-code); }
.primary-nav > a:hover, .primary-nav > a:focus-visible { background: #ffffff12; }
.primary-nav > a.active { color: white; background: #ffffff1c; box-shadow: inset 3px 0 #d0a357; }
.primary-nav > a.active span { color: #f1c578; }
.nav-legend { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 5px 8px; margin: 18px 8px 0; padding: 14px 9px; color: #aabdc4; border-top: 1px solid #ffffff17; font-size: .72rem; }
.nav-evidence { margin: 14px 8px; border-top: 1px solid #ffffff25; padding-top: 8px; }
.nav-evidence > summary { min-height: 44px; padding: 12px 8px; border: 1px solid transparent; border-radius: 9px; color: #d5e1e5; font-size: .78rem; line-height: 1.5; cursor: pointer; overflow-wrap: anywhere; }
.nav-evidence > summary:hover { color: #fffdf8; background: #253d48; border-color: #69818b; }
#primaryNav .nav-evidence > summary:focus-visible { outline: 3px solid #d0a357; outline-offset: 3px; }
.nav-evidence .nav-legend { margin: 0; padding: 12px 8px; border: 0; row-gap: 9px; }

.workspace { min-height: calc(100vh - var(--topbar-h)); margin-left: 246px; padding: 28px clamp(18px, 3vw, 52px) 60px; outline: none; transition: margin-right .22s ease; }
body.inspector-open .workspace { margin-right: min(440px, 36vw); }
body.protection-inspector-open .workspace { margin-right: min(620px, 43vw); }
body.route-atlas .workspace { height: calc(100dvh - var(--topbar-h)); min-height: 0; padding-top: 16px; padding-bottom: 16px; overflow: hidden; }
body.route-atlas #routeContent { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; }
body.route-atlas.inspector-open .workspace { margin-right: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; margin: 0 0 18px; }
.page-title { margin: 4px 0 8px; font: 800 clamp(1.8rem, 3vw, 2.65rem)/1.12 var(--font-editorial); letter-spacing: -.035em; overflow-wrap: anywhere; }
.page-kicker, .inspector-kind { color: var(--gold-ink); font-size: .7rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.page-lead { max-width: 75ch; margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.65; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.button { color: white; background: var(--ink); border-color: var(--ink); }
.button:hover, .button:focus-visible { background: #30434d; }
.button.secondary { color: var(--ink); background: var(--panel); border-color: var(--line); }
.button.secondary:hover { background: var(--paper-deep); }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: grid;
  align-content: end;
  padding: clamp(26px, 5vw, 66px);
  color: white;
  background:
    radial-gradient(circle at 82% 18%, rgba(205, 159, 74, .2), transparent 26%),
    linear-gradient(130deg, #12232d, #285160 62%, #15333e);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.hero::before { content: ""; position: absolute; inset: 17px; border: 1px solid #ffffff20; border-radius: 15px; pointer-events: none; }
.hero h1 { position: relative; max-width: 900px; margin: 9px 0 18px; font: 800 clamp(2.5rem, 6vw, 6.2rem)/.86 var(--font-editorial); letter-spacing: -.055em; }
.hero p { position: relative; max-width: 880px; margin: 0; color: #dbe8ea; font-size: clamp(1rem, 1.7vw, 1.22rem); line-height: 1.55; }
.hero .page-kicker { position: relative; color: #efc77d; }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-top: 30px; }
.stat-card { min-height: 98px; padding: 15px; border: 1px solid #ffffff25; border-radius: 12px; color: inherit; background: #ffffff0d; backdrop-filter: blur(4px); text-align: left; }
.hero button.stat-card { cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.hero button.stat-card:hover, .hero button.stat-card:focus-visible { border-color: #efc77d; background: #ffffff18; outline: none; transform: translateY(-2px); }
.stat-card strong { display: block; margin-bottom: 3px; color: #ffe3ad; font-size: 1.65rem; }
.stat-card span { color: #d5e0e2; font-size: .8rem; }

.section-block { margin-top: 30px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.section-title h2 { margin: 0; font: 750 clamp(1.4rem, 2.5vw, 2.2rem) var(--font-editorial); }
.section-title p { margin: 0; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.card, .panel { color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card { padding: 18px; }
.card h3 { margin: 6px 0 8px; font-size: 1.05rem; }
.card p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.card.warning { border-left: 5px solid var(--red); background: #fff8f4; }
.panel.warning { margin: 18px 0; padding: 20px; border-left: 5px solid var(--red); background: #fff8f4; }
.card.success { border-left: 5px solid var(--green); }
.card.clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.card.clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 30px #17263018; }
.chip, .badge { display: inline-flex; align-items: center; max-width: 100%; border-radius: 99px; line-height: 1.1; }
.chip { gap: 6px; min-height: 31px; padding: 6px 10px; color: var(--ink); background: white; border: 1px solid var(--line); text-decoration: none; font-size: .82rem; }
button.chip:hover, button.chip:focus-visible { background: var(--paper-deep); border-color: var(--line-strong); }
.badge { padding: 4px 8px; color: var(--ink-soft); background: #eef0ed; border: 1px solid #d6dad5; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.badge.danger { color: #7b302b; background: var(--red-pale); border-color: #d7a6a2; }
.badge.open { color: #765416; background: var(--gold-pale); border-color: #ddc486; }
.badge.proven { color: #245d48; background: var(--green-pale); border-color: #9bc7ad; }
.evidence { position: relative; display: inline-grid; place-items: center; width: 23px; height: 23px; border: 1px solid currentColor; border-radius: 6px; font: 850 .72rem var(--font-code); cursor: help; }
.evidence:focus-visible { outline: 3px solid #d0a357; outline-offset: 2px; }
.evidence-tooltip { position: fixed; z-index: 120; width: min(290px, calc(100vw - 16px)); padding: 9px 10px; color: #f8f4e9; background: #18232b; border: 1px solid #4f6772; border-radius: 7px; box-shadow: 0 8px 20px #0004; font: 600 .76rem/1.35 var(--font-ui); text-align: left; pointer-events: none; }
.evidence-tooltip[hidden] { display: none; }
.ev-d { color: #22607e; background: var(--blue-pale); }
.ev-v { color: #72447b; background: var(--purple-pale); }
.ev-n { color: #176a69; background: var(--teal-pale); }
.ev-l { color: #286d4d; background: var(--green-pale); }
.ev-i { color: #896118; background: var(--gold-pale); }
.ev-u { color: #7b4743; background: #eadeda; }
.evidence-row { display: flex; flex-wrap: wrap; gap: 5px; }

.atlas-shell { --atlas-inspector-overlap: 0px; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(100%, 1280px); min-height: 0; height: min(100%, 720px); overflow: hidden; align-self: start; }
.atlas-shell > .atlas-toolbar { grid-row: 1; }
.atlas-shell > .atlas-viewport { grid-row: 2; }
.atlas-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #faf7ef; }
.atlas-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-toolbar .atlas-tabs + .atlas-tabs { margin-top: 6px; }
.atlas-tabs button, .tab-button { min-height: 33px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); background: white; }
.atlas-tabs button.active, .tab-button.active { color: white; background: var(--ink); border-color: var(--ink); }
@media (min-width: 901px) {
  body.atlas-inspector-open .atlas-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    padding-right: calc(14px + var(--atlas-inspector-overlap, 0px));
    transition: padding-right .2s ease;
  }
  body.atlas-inspector-open .atlas-toolbar > div:first-child { grid-row: 1; min-width: 0; max-width: 100%; }
}
.atlas-viewport { position: relative; min-height: 0; overflow: auto; overscroll-behavior: auto; background-color: #f8f5eb; background-image: linear-gradient(#183d4e0a 1px, transparent 1px), linear-gradient(90deg, #183d4e0a 1px, transparent 1px); background-size: 32px 32px; cursor: grab; scrollbar-color: #708893 #e5ded1; scrollbar-gutter: stable; }
.atlas-viewport.dragging { cursor: grabbing; }
.atlas-canvas { position: relative; min-width: 100%; min-height: 100%; transition: width .2s ease; }
.atlas-svg { display: block; max-width: none; }
.map-edge { fill: none; stroke: #718089; stroke-width: 3; vector-effect: non-scaling-stroke; }
.map-edge.ship-connection { stroke: #267b78; stroke-dasharray: 8 6; }
.ship-port rect { fill: #e7f2ee; stroke: #267b78; stroke-width: 2; }
.ship-port text { fill: #194b4d; text-anchor: middle; font-family: var(--font-ui); }
.ship-port-name { font-size: 16px; font-weight: 800; }
.ship-port-note { font-size: 11px; font-weight: 600; }
.ship-port:hover rect, .ship-port:focus-visible rect { fill: #193f45; stroke: #c49847; stroke-width: 3; }
.ship-port:hover text, .ship-port:focus-visible text { fill: #fffdf8; }
.ship-port:focus-visible { outline: none; }
.ship-connection-label { fill: #267b78; }
.map-edge.door { stroke: #a56834; stroke-dasharray: 10 6; }
.map-edge.special { stroke: var(--purple); stroke-dasharray: 4 7; }
.map-edge.vertical { stroke: var(--purple); stroke-width: 4; }
.map-edge.cross-view { stroke: #6c5879; stroke-width: 3.5; stroke-dasharray: 7 7; }
.edge-label.cross-view { fill: #654b71; }
.map-edge.sight { stroke: #087fa1; stroke-width: 3.5; stroke-dasharray: 4 7; opacity: .92; filter: drop-shadow(0 0 3px #56c8e080); }
.map-edge.sight:hover { stroke: #d24c3f; stroke-width: 5; opacity: 1; }
#sightArrow path { fill: #087fa1; }
.sight-edge-eye { pointer-events: none; filter: drop-shadow(0 2px 4px #13374744); }
.sight-edge-eye path { fill: #fff; stroke: #087fa1; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sight-edge-eye circle { fill: #087fa1; stroke: white; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sight-edge-label { fill: #086d8b; font: 850 12px var(--font-code); paint-order: stroke; stroke: #f8f5eb; stroke-width: 4px; text-anchor: middle; }
.map-edge.highlighted { stroke: var(--red); stroke-width: 6; }
.map-edge.selected-edge { stroke: #c28b2c; stroke-width: 5; filter: drop-shadow(0 0 4px #efc56d88); }
.edge-label { fill: #4a5961; font: 800 12px var(--font-ui); paint-order: stroke; stroke: #f8f5eb; stroke-width: 5px; stroke-linejoin: round; text-anchor: middle; }
.edge-label.vertical { fill: var(--purple); font-size: 12px; }
.edge-label.selected-edge-label { fill: #845b16; font-size: 12px; }
.room-node { cursor: pointer; outline: none; }
.room-node .room-card { fill: #fffdf7; stroke: var(--blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 4px 8px #1a2a351b); }
.room-node:hover .room-card, .room-node:focus .room-card { stroke: #e0a43b; stroke-width: 4; }
.room-node.neighbor .room-card { fill: #fff6dc; stroke: #b9832d; }
.room-node.selected .room-card { fill: var(--ink); stroke: #e2ad4e; stroke-width: 5; filter: drop-shadow(0 0 9px #dca94399) drop-shadow(0 8px 12px #17232c33); }
.room-node.reference .room-card { fill: #edf3f4; stroke-dasharray: 5 4; opacity: .95; }
.room-node.reference.selected .room-card { fill: var(--ink); stroke-dasharray: none; opacity: 1; }
.room-node .room-name { fill: var(--ink); font: 720 14px var(--font-ui); }
.room-node.selected text { fill: white; }
.room-hazard-tag rect { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.room-hazard-tag text { fill: white !important; font: 850 10px var(--font-code); text-anchor: middle; letter-spacing: .02em; }
.room-hazard-tag.cold rect { fill: #2d7f9b; stroke: #d4f3fb; }
.room-hazard-tag.critical rect { fill: #9b3f38; stroke: #f5c2bd; }
.room-hazard-tag.dark rect { fill: #414957; stroke: #c9d1dd; }
.room-sight-source rect { fill: #e9f7fa; stroke: #087fa1; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.room-sight-source path { fill: none; stroke: #087fa1; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.room-sight-source circle { fill: #087fa1; }
.room-risk-list { display: grid; gap: 9px; margin: 13px 0 17px; }
.room-risk { padding: 12px 14px; border: 1px solid #a7cbd5; border-left: 5px solid #2d7f9b; border-radius: 9px; background: #f1fafc; }
.room-risk-critical { border-color: #d7a6a2; border-left-color: var(--red); background: var(--red-pale); }
.room-risk-dark { border-color: #aeb9c8; border-left-color: #414957; background: #f0f3f7; }
.room-risk header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.room-risk header > strong { margin-right: auto; }
.room-risk-symbol { display: grid; place-items: center; width: 24px; height: 24px; color: white; background: #2d7f9b; border-radius: 50%; font: 900 .8rem var(--font-code); }
.room-risk-critical .room-risk-symbol { background: var(--red); }
.room-risk-dark .room-risk-symbol { background: #414957; }

/* Local atlas counterfactual, never an edit to original rooms or SAVE state. */
.atlas-toolbar .atlas-pipe-preview { grid-column:1 / -1; flex:1 0 100%; display:flex; align-items:center; gap:12px; padding-top:8px; border-top:1px solid var(--line); font-size:.83rem; line-height:1.4; white-space:normal; }
.atlas-pipe-preview > div { flex:1; min-width:0; }
.atlas-pipe-preview strong { color:var(--blue); }
.atlas-pipe-preview small { display:block; color:var(--muted); }
.atlas-pipe-preview button { flex:none; padding:6px 10px; font:inherit; }
.atlas-pipe-controls { display:flex; justify-content:center; gap:4px; height:40px; }
.atlas-pipe-controls button { display:flex; align-items:center; justify-content:center; gap:3px; min-width:0; padding:2px; border:1px solid #9ab9bf; border-radius:8px; background:#fffdf7; color:#173b43; font:600 9px var(--font-ui); cursor:pointer; }
.atlas-pipe-controls button small { display:block; font-size:9px; font-weight:400; }
.atlas-pipe-controls button:focus-visible { outline:3px solid #b77719; outline-offset:-2px; }
.atlas-pipe-controls button[aria-pressed="true"] { border-color:#9b3f38; }
.pipe-circle { position:relative; display:grid; place-items:center; flex:none; width:23px; height:23px; border:1px solid currentColor; border-radius:50%; background:#eef5f5; font:700 16px var(--font-ui); }
.pipe-circle.dark { color:#414957; }
.pipe-circle.cold { color:#206780; }
.pipe-circle.broken { background:#fbe9e5; }
.pipe-circle.broken::after { content:""; position:absolute; width:24px; height:2px; background:#9b3f38; transform:rotate(-45deg); }
body[data-route="atlas"] .atlas-svg .room-node.preview-cold .room-card { fill:#d4edf5; }
body[data-route="atlas"] .atlas-svg .room-node.preview-dark .room-card { fill:#414957; }
body[data-route="atlas"] .atlas-svg .room-node.preview-dark.preview-cold .room-card { fill:#284755; }
body[data-route="atlas"] .atlas-svg .room-node.preview-dark .room-name { fill:#fff; }
body[data-route="atlas"] .atlas-svg .room-node.preview-cold:not(.preview-dark) .room-name { fill:#173b43; }
.room-hazard-tag.pipe-effect rect { stroke-dasharray:3 2; }
.room-hazard-tag.pipe-effect text { font-size:8px; letter-spacing:0; }
.room-risk p { margin: 8px 0 5px; color: var(--ink-soft); line-height: 1.48; }
.room-risk small { color: var(--muted); line-height: 1.4; }
.atlas-tooltip { position: fixed; z-index: 66; width: min(330px, calc(100vw - 20px)); padding: 13px; color: var(--ink); background: #fffdf8f7; border: 1px solid #bda77f; border-radius: 11px; box-shadow: 0 18px 46px #111f2870; pointer-events: none; backdrop-filter: blur(6px); }
.atlas-tooltip[hidden] { display: none; }
.atlas-tooltip > strong { display: block; margin: 4px 0 9px; font: 750 1.08rem var(--font-editorial); }
.atlas-tooltip p { margin: 8px 0 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.35; }

.register-layout { display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); height: clamp(440px, calc(100dvh - var(--topbar-h) - 120px), 940px); min-height: 0; overflow: hidden; }
.register-list { overflow: auto; padding: 10px; border-right: 1px solid var(--line); background: #faf7f0; }
.register-list button { display: grid; width: 100%; grid-template-columns: auto 1fr; gap: 10px; padding: 10px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; text-align: left; }
.register-list button:hover, .register-list button.active { background: white; box-shadow: inset 0 0 0 1px var(--line); }
.register-content { min-width: 0; min-height: 0; overflow: auto; padding: 22px; scrollbar-gutter: stable; overscroll-behavior-y: auto; }
.register-content > h2 { margin: 8px 0 10px; font: 750 clamp(1.5rem, 2.4vw, 2.25rem) var(--font-editorial); }
.room-mobile-picker, .actor-mobile-picker { display: none; }
#roomRegisterList button, #actorRegisterList button, #relationRegisterList button { grid-template-columns: 2.5em minmax(0,1fr); align-items: start; }
#roomRegisterList button span, #actorRegisterList button span, #relationRegisterList button span { min-width: 0; overflow-wrap: anywhere; }
body[data-route="rooms"] #roomRegisterContent { display: grid; grid-template-rows: auto auto minmax(0,1fr); padding: 0; overflow: hidden; scrollbar-gutter: auto; }
.room-reading-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px 12px; }
.room-reading-head > div { min-width: 0; }
.room-reading-head h2 { margin: 8px 0 0; color: var(--route-deep); }
.room-reading-head > a { flex-shrink: 0; }
.room-reading-tabs { flex-wrap: wrap; overflow: visible; gap: 6px; padding: 10px 16px; }
.room-reading-tabs button { white-space: normal; }
.room-reading-body { min-width: 0; min-height: 0; overflow: auto; padding: 20px 22px; scrollbar-gutter: stable; }
.room-reading-body :is(p,.renderer-projection,.room-inventory,.culture-related) { max-width: 75ch; }
.room-reading-body > .card + .card { margin-top: 14px; }
.room-reading-body :is(pre,.quote) { overflow-wrap: anywhere; }
@media (max-width: 900px), (max-height: 650px) {
  body[data-route="rooms"] .room-register { display: block; height: auto; overflow: visible; }
  body[data-route="rooms"] .room-register > .register-list { display: block; min-height: 0; max-height: none; border-right: 0; }
  .room-register .filter-row, #roomRegisterList { display: none; }
  .room-mobile-picker { display: grid; gap: 6px; padding: 12px 16px; }
  .room-mobile-picker select { width: 100%; min-width: 0; min-height: 44px; }
  body[data-route="rooms"] #roomRegisterContent { display: block; overflow: visible; }
  .room-reading-body { overflow: visible; padding: 16px; }
  .room-reading-head { flex-wrap: wrap; padding: 16px; }
}
.quote { white-space: pre-wrap; font: 1rem/1.62 var(--font-editorial); color: var(--ink-soft); }
.renderer-condition { display: block; margin: 12px 0; padding: 11px 13px; color: var(--ink-soft); background: #fff6df; border-left: 3px solid var(--gold); border-radius: 0 7px 7px 0; }
.renderer-condition-label { display: block; margin-bottom: 5px; color: var(--gold-ink); font: 800 .75rem/1.4 var(--font-ui); }
.renderer-slot { display: inline; padding: 1px 5px; color: #623b61; background: var(--purple-pale); border-radius: 5px; font: 650 .84em/1.6 var(--font-ui); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.room-text-guide { margin: 0 0 14px; color: var(--muted); font: .88rem/1.55 var(--font-ui); }
.room-text-reading { max-width: 75ch; }
.renderer-projection-readable .renderer-condition-readable { margin: 9px 0; padding: 9px 12px; }
.renderer-projection-readable .renderer-condition-label { margin-bottom: 3px; text-transform: none; letter-spacing: 0; }
.renderer-projection-readable .renderer-slot-readable { padding: 0 3px; color: var(--muted); background: transparent; border-bottom: 1px dotted var(--muted); border-radius: 0; font: 700 .9em/1 var(--font-ui); cursor: help; }
.renderer-separator { display: block; margin: 8px 0; color: var(--muted); font: .75rem/1.4 var(--font-ui); }
.renderer-raw { margin: 13px 0; color: var(--ink-soft); font-size: .82rem; }
.renderer-raw > summary, .actor-sex-details > summary {
  padding: 8px 0; font: 750 .82rem/1.7 var(--font-ui);
  color: var(--ink-soft); cursor: pointer;
}
.renderer-raw pre { max-height: 360px; white-space: pre-wrap; overflow-wrap: anywhere; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 8px; margin: 15px 0; }
.metric-grid > div { padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #faf7ef; }
.metric-grid strong { display: block; color: var(--blue); font-size: 1.25rem; }
.metric-grid span { color: var(--muted); font-size: .76rem; }
.key-values { display: grid; grid-template-columns: minmax(135px, 210px) minmax(0,1fr); gap: 8px 14px; margin: 16px 0 23px; }
.key-values dt { color: var(--muted); font-size: .8rem; font-weight: 800; }
.key-values dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.actor-state-list { display: flex; flex-wrap: wrap; min-width: 0; gap: 7px; }
.actor-state-entry { display: inline-flex; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; gap: 6px; }
.actor-state-entry .evidence-row { margin: 0; }
.actor-state-link.chip { display: inline-block; min-width: 0; min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--route-line, var(--line)); border-radius: 999px; color: var(--route-accent-ink, var(--ink)); background: var(--route-soft, #fffdf8); font-size: .94em; font-weight: 650; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; text-decoration: none; }
.actor-state-link.chip:is(:hover, :focus-visible) { color: #fffdf8; background: var(--route-deep, #215347); border-color: var(--route-deep, #215347); text-decoration: none; }
.actor-state-link.chip:focus-visible { outline: 3px solid var(--route-accent, #327561); outline-offset: 3px; }
.actor-state-unlinked { overflow-wrap: anywhere; }
.actor-state { display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; max-width: 100%; gap: 6px; min-height: 31px; padding: 5px 8px; border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 8px; color: var(--ink-soft); background: #faf7ef; font-size: .75rem; }
.actor-state b { color: var(--blue); font: 850 .72rem var(--font-code); }
.actor-state .evidence-row { margin: 0; }
.actor-state-note { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.actor-sex-details { margin-top: 7px; font-size: .86rem; }
.actor-sex-details p { max-width: 70ch; line-height: 1.65; }
.actor-state-ability, .actor-state-perception { border-left-color: var(--teal); background: #f2faf7; }
.actor-state-protection, .actor-state-access, .actor-state-authority { border-left-color: var(--gold); background: #fff9eb; }
.actor-state-condition { border-left-color: var(--blue); }
.actor-state-unknown { border-left-color: #8f8692; background: #f3f0f2; }
.actor-capability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 10px; margin: 13px 0 17px; }
.actor-capability { padding: 14px; border: 1px solid var(--line); border-left: 5px solid var(--blue); border-radius: 10px; background: linear-gradient(145deg, #fff, #faf7ef); box-shadow: 0 4px 14px #2636410c; }
.actor-capability > header { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.actor-capability h4 { margin: 7px 0 8px; color: var(--ink); font: 750 1.03rem var(--font-editorial); }
.actor-capability p { margin: 0; color: var(--ink-soft); font-size: .79rem; line-height: 1.48; }
.actor-capability code { overflow-wrap: anywhere; }
.actor-capability-ability, .actor-capability-perception { border-left-color: var(--teal); }
.actor-capability-protection, .actor-capability-access, .actor-capability-authority { border-left-color: var(--gold); }
.actor-capability-blocker { border-left-color: var(--red); }
.actor-capability-unknown { border-left-color: #8f8692; }
.capability-availability, .capability-live { display: block; margin-top: 8px; color: var(--muted); font-size: .69rem; line-height: 1.4; }
.actor-unresolved { margin: 13px 0 19px; padding: 0 12px; border: 1px dashed #aaa0aa; border-radius: 9px; background: #f5f2f4; }
.actor-unresolved summary { padding: 11px 0; color: var(--ink-soft); cursor: pointer; font-weight: 800; }
.actor-unresolved ul { margin-top: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip.passive { cursor: default; background: #f3efe5; }
.warning-note { margin: 14px 0; padding: 11px 13px; border-left: 4px solid var(--gold); background: var(--gold-pale); color: var(--ink-soft); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.filter-row input, .filter-row select, .field { min-height: 39px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; }
.filter-row input { flex: 1; min-width: 190px; }
.meta-grid { display: grid; grid-template-columns: minmax(130px, 190px) 1fr; gap: 8px 14px; margin: 15px 0; }
.meta-grid dt { color: var(--muted); font-size: .82rem; font-weight: 800; }
.meta-grid dd { margin: 0; min-width: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.data-table th, .data-table td { padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { position: sticky; top: 0; z-index: 1; color: var(--ink-soft); background: #ede7da; }
.data-table tbody tr:hover { background: #fffaf0; }
.code, code { font-family: var(--font-code); }
code { padding: 2px 5px; border-radius: 4px; background: #ece7db; font-size: .88em; }
pre { overflow: auto; padding: 14px; border-radius: 10px; color: #e8f0f1; background: #17252d; }
pre code { padding: 0; background: transparent; }
.transition-command { display: inline-block; min-width: 4.8em; color: var(--blue); font-weight: 850; text-align: center; }
.transition-arrow { margin-left: 6px; color: var(--gold); font-size: 1.05rem; font-weight: 850; }

.cards.one-column { grid-template-columns: 1fr; }
.timeline-event { border-left: 5px solid var(--gold); }
.event-list { display: grid; gap: 12px; margin-top: 15px; }
.event-card { display: grid; grid-template-columns: 90px 1fr; gap: 15px; padding: 16px; border-left: 5px solid var(--gold); }

.combat-primer { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.35fr); gap: clamp(22px, 4vw, 50px); padding: clamp(22px, 3.5vw, 40px); color: #f5f1e8; background: linear-gradient(135deg, #172830, #263e45 68%, #34555a); }
.combat-primer-copy h2 { margin: 8px 0 13px; color: white; font: 750 clamp(1.7rem, 3vw, 2.65rem)/1.08 var(--font-editorial); }
.combat-primer-copy p { color: #d9e5e5; line-height: 1.62; }
.combat-primer .page-kicker { color: #efc77d; }
.combat-flow { position: relative; display: grid; gap: 8px; }
.combat-flow::before { position: absolute; top: 22px; bottom: 22px; left: 19px; width: 2px; background: linear-gradient(#efc77d, #8bc5bb); content: ""; }
.combat-flow article { position: relative; display: grid; grid-template-columns: 39px 1fr; gap: 13px; padding: 12px 13px 12px 0; border: 1px solid #ffffff18; border-radius: 10px; background: #ffffff08; }
.combat-flow article > span { z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; color: #1c3037; background: #efc77d; border-radius: 50%; font: 850 .68rem var(--font-code); }
.combat-flow strong { display: block; color: white; }
.combat-flow p { margin: 4px 0 7px; color: #ceddde; font-size: .8rem; line-height: 1.4; }
.combat-flow .evidence { background-color: #f8f4e9; }

.combat-core-grid { display: grid; grid-template-columns: minmax(270px, .9fr) minmax(0, 1.1fr); gap: 16px; margin-top: 18px; }
.combat-stats, .combat-melee, .combat-weapons, .combat-outcomes { padding: clamp(19px, 2.8vw, 30px); }
.combat-stats { background: linear-gradient(180deg, #fffdfa, #f3f7f6); }
.combat-stat { position: relative; display: grid; grid-template-columns: minmax(95px, .32fr) 1fr auto; align-items: start; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); }
.combat-stat:first-of-type { border-top: 0; }
.combat-stat strong { color: var(--teal); font-size: .85rem; }
.combat-stat p { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
.combat-melee { border-top: 5px solid var(--red); background: linear-gradient(160deg, #fffafa, #fffdfa); }
.combat-melee h2, .shoot-card h2, .shoot-notes h2 { margin: 7px 0 12px; font: 750 1.5rem var(--font-editorial); }
.combat-melee > p { color: var(--ink-soft); line-height: 1.58; }
.combat-formula { display: grid; gap: 6px; margin-top: 10px; padding: 12px; border: 1px solid #dbc7c2; border-radius: 9px; background: #fff; }
.combat-formula span { color: var(--red); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.combat-formula code { overflow-wrap: anywhere; color: var(--ink); font-size: .78rem; }
.combat-example { padding-left: 12px; border-left: 3px solid var(--gold); }
.combat-melee-notes { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }
.combat-melee-notes li::marker { color: var(--gold-deep); }

.combat-atlas { margin-top: 18px; overflow: hidden; border-top: 5px solid var(--teal); background: linear-gradient(180deg, #f9fcfb, #f4f0e8); }
.combat-atlas > summary { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: clamp(20px, 3vw, 31px); cursor: pointer; list-style: none; background: linear-gradient(120deg, #f3fbf8, #fffaf0); }
.combat-atlas > summary::-webkit-details-marker { display: none; }
.combat-atlas > summary:hover { background: linear-gradient(120deg, #eaf7f3, #fff6e5); }
.combat-atlas > summary h2 { margin: 5px 0 6px; font: 750 clamp(1.5rem, 2.5vw, 2.15rem) var(--font-editorial); }
.combat-atlas > summary p { max-width: 820px; margin: 0; color: var(--ink-soft); line-height: 1.5; }
.combat-open-label { flex: 0 0 auto; min-width: 85px; padding: 9px 14px; color: white; background: var(--teal); border-radius: 999px; text-align: center; font-size: .75rem; font-weight: 850; text-transform: uppercase; }
.combat-atlas[open] .combat-open-label::before { content: "schließen"; font-size: 0; }
.combat-atlas[open] .combat-open-label { font-size: 0; }
.combat-atlas[open] .combat-open-label::after { content: "schließen"; font-size: .75rem; }
.combat-atlas-body { padding: clamp(17px, 3vw, 30px); border-top: 1px solid var(--line); }
.combat-atlas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.combat-atlas-toolbar > div { display: flex; flex-wrap: wrap; gap: 6px; }
.combat-matchup { display: grid; grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); align-items: stretch; gap: 10px; }
.combatant-card { position: relative; padding: clamp(16px, 2vw, 22px); border: 1px solid #c8d7d4; border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); transition: border-color .16s, box-shadow .16s, transform .16s; }
.combatant-card > header { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; margin-bottom: 15px; }
.combatant-card > header h3 { margin: 3px 0 0; font: 750 1.25rem var(--font-editorial); }
.combatant-letter { display: grid; place-items: center; width: 36px; height: 36px; color: white; background: var(--teal); border-radius: 50%; font: 850 .8rem var(--font-code); }
.combatant-b .combatant-letter { background: var(--red); }
.combat-field { display: grid; gap: 5px; margin-top: 10px; }
.combat-field > span, .combat-adjustment-grid label > span { color: var(--ink-soft); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.combat-field select, .combat-select-search, .combat-adjustment-grid select, .combat-adjustment-grid input[type="number"] { width: 100%; min-width: 0; padding: 9px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fbfaf7; font: 750 .77rem var(--font-ui); }
.combat-select-search { padding: 7px 9px; font-weight: 600; }
.combat-adjustment-grid input[type="range"] { width: 100%; accent-color: var(--teal); }
.combat-field-pair { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9px; }
.combat-power { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 10px; color: #614300; border: 1px solid #dec67d; border-radius: 8px; background: var(--gold-pale); font-size: .75rem; font-weight: 750; }
.combat-power[hidden], .combat-range-pool[hidden] { display: none; }
.combatant-statline { display: grid; grid-template-columns: repeat(4, minmax(65px, 1fr)); gap: 5px; margin-top: 14px; }
.combatant-statline span { padding: 7px 5px; color: var(--muted); border: 1px solid #d9e3e0; border-radius: 7px; background: #f6faf9; text-align: center; font-size: .58rem; font-weight: 750; text-transform: uppercase; }
.combatant-statline b { display: block; margin-bottom: 2px; color: var(--teal); font: 850 .86rem var(--font-code); }
.combatant-statline .combat-weapon-bonus { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; text-transform: none; font-weight: 400; }
.combatant-b .combatant-statline b { color: var(--red); }
.combat-adjustments { margin-top: 12px; border-top: 1px solid var(--line); }
.combat-adjustments > summary { padding: 10px 0 0; color: var(--blue); cursor: pointer; font-size: .73rem; font-weight: 800; }
.combat-adjustment-grid { display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 9px; margin-top: 11px; }
.combat-adjustment-grid label { display: grid; gap: 4px; }
.combat-adjustment-grid .combat-check { display: flex; align-items: center; gap: 7px; padding: 7px 0; }
.combat-adjustment-grid .combat-check span { color: var(--ink-soft); font-size: .68rem; letter-spacing: 0; text-transform: none; }
.combat-field-help { display: grid; gap: 5px; margin-top: 12px; padding: 10px; color: var(--ink-soft); border-radius: 8px; background: #f2f6f5; font-size: .68rem; line-height: 1.4; }
.combat-field-help span { display: block; }
.combat-object-facts { margin-top: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #faf7ef; }
.combat-object-facts p { margin: 5px 0; color: var(--ink-soft); font-size: .74rem; line-height: 1.4; }
.combat-versus { display: grid; place-items: center; min-height: 100%; }
.combat-versus span { z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; color: white; background: linear-gradient(135deg, var(--teal), var(--red)); border: 5px solid #f4f0e8; border-radius: 50%; font: 900 .8rem var(--font-code); box-shadow: 0 4px 15px #23394435; }
.combat-versus i { position: absolute; width: 2px; height: 170px; background: linear-gradient(transparent, var(--line), transparent); }
.combat-results { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); gap: 10px; margin-top: 13px; }
.combat-results > article { padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #fffdfa; }
.combat-results > article:first-child { border-top: 4px solid var(--teal); }
.combat-results > article:last-child { border-top: 4px solid var(--red); }
.combat-results header h3 { margin: 5px 0 13px; font: 750 1.05rem var(--font-editorial); }
.combat-result-metrics { display: grid; grid-template-columns: repeat(2, minmax(100px,1fr)); gap: 7px; }
.combat-result-metrics > div { min-height: 86px; padding: 10px; border: 1px solid #e2ddd1; border-radius: 8px; background: white; }
.combat-result-metrics span { display: block; color: var(--muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.combat-result-metrics strong { display: block; margin: 6px 0 3px; color: var(--ink); font: 850 1rem var(--font-code); }
.combat-result-metrics small { color: var(--ink-soft); font-size: .66rem; line-height: 1.35; }
.combat-results > article > p { margin: 12px 0 0; color: var(--ink-soft); font-size: .75rem; line-height: 1.45; }
.combat-result-error { padding: 15px; color: #7b251f; border: 1px solid #e1b7b2; border-radius: 8px; background: #fff2f0; line-height: 1.45; }
.combat-result-divider { display: grid; place-items: center; }
.combat-result-divider span { writing-mode: vertical-rl; color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.combat-target-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; padding: 12px 14px; color: #e9f3f0; border-radius: 10px; background: linear-gradient(115deg,#173c45,#285a59); }
.combat-target-switch strong { display: block; margin-top: 3px; color: white; }
.combat-target-switch .page-kicker { color: #efc77d; }
.combat-target-switch > div:last-child { display: flex; gap: 5px; padding: 4px; border-radius: 999px; background: #ffffff12; }
.combat-target-switch button, .combat-lab-tabs button { padding: 8px 12px; color: #d9e8e5; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-weight: 800; }
.combat-target-switch button.active { color: #15383f; background: #f3ca7e; }
.combat-lab-tabs { display: flex; gap: 6px; margin-top: 17px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #e9efed; }
.combat-lab-tabs button { flex: 1; color: var(--ink-soft); border-radius: 7px; }
.combat-lab-tabs button.active { color: white; background: var(--teal); box-shadow: 0 2px 8px #19383f24; }
.combat-mode-note { margin: 10px 0 0; padding: 10px 12px; color: var(--ink-soft); border-left: 4px solid var(--gold); border-radius: 6px; background: #fff8e9; font-size: .75rem; line-height: 1.45; }
.combat-run-panel { margin-top: 12px; }
.combat-run-panel[hidden], #combatComparePanel[hidden] { display: none; }
.combat-run-toolbar { display: grid; grid-template-columns: minmax(200px,.35fr) minmax(0,1fr); gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.combat-run-toolbar > label { display: grid; gap: 5px; }
.combat-run-toolbar > label span { color: var(--ink-soft); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.combat-run-toolbar input { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: 800 .8rem ui-monospace,monospace; }
.combat-run-buttons { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; }
.combat-run-buttons .button { padding: 8px 10px; font-size: .7rem; }
.combat-run-readout { display: grid; grid-template-columns: 110px 190px 1fr; gap: 8px; margin-top: 9px; }
.combat-run-readout > div { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #f8f5ee; }
.combat-run-readout span, .combat-run-readout strong { display: block; }
.combat-run-readout span { color: var(--muted); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.combat-run-readout strong { margin-top: 4px; font: 800 .78rem ui-monospace,monospace; }
.combat-live-state { display: grid; grid-template-columns: repeat(2,minmax(220px,1fr)); gap: 9px; margin-top: 9px; }
.combat-live-actor, .combat-live-object { padding: 12px; border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: 9px; background: white; }
.combat-live-actor:nth-child(2), .combat-live-object { border-left-color: var(--red); }
.combat-live-actor.status-unconscious, .combat-live-actor.status-asleep { border-left-color: var(--gold); }
.combat-live-actor.status-dead, .combat-live-object.broken { border-left-color: #702923; background: #fff3f1; }
.combat-live-actor header, .combat-live-object header { display: flex; justify-content: space-between; gap: 9px; }
.combat-live-actor header span, .combat-live-object header span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.combat-live-actor > div, .combat-live-object > div { display: grid; grid-template-columns: repeat(3,minmax(70px,1fr)); gap: 5px; margin-top: 9px; }
.combat-live-actor > div span, .combat-live-object > div span { padding: 7px; color: var(--muted); border-radius: 6px; background: #f4f7f6; font-size: .61rem; }
.combat-live-actor > div b, .combat-live-object > div b { display: block; margin-top: 2px; color: var(--ink); font: 800 .76rem ui-monospace,monospace; }
.combat-log { margin-top: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.combat-log h3 { margin: 4px 0 0; font: 750 1.15rem Georgia,serif; }
.combat-log ol { display: grid; gap: 7px; max-height: 520px; margin: 12px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.combat-log li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 10px; border-left: 4px solid var(--line); border-radius: 7px; background: #faf8f3; }
.combat-log li > span { color: var(--muted); font: 800 .65rem ui-monospace,monospace; }
.combat-log li strong { font-size: .78rem; }
.combat-log li p { margin: 3px 0 0; color: var(--ink-soft); font-size: .71rem; line-height: 1.4; }
.combat-log .log-hit { border-left-color: var(--teal); }
.combat-log .log-miss { border-left-color: var(--blue); }
.combat-log .log-warning { border-left-color: var(--gold); }
.combat-log .log-danger { border-left-color: var(--red); background: #fff3f1; }
.combat-log .log-start { border-left-color: var(--purple); }
.combat-log .log-stop { border-left-color: #777; }
.combat-rankings, .combat-simulator-evidence { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.combat-rankings > summary, .combat-simulator-evidence > summary { padding: 14px 16px; color: var(--ink); cursor: pointer; font-weight: 800; }
.combat-ranking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px,1fr)); gap: 10px; padding: 0 16px 13px; }
.combat-ranking-grid article { padding: 12px; border-top: 4px solid var(--gold); border-radius: 8px; background: #faf7f0; }
.combat-ranking-grid h4 { margin: 4px 0 8px; font: 750 .95rem var(--font-editorial); }
.combat-ranking-grid ol { margin: 0; padding-left: 22px; }
.combat-ranking-grid li { padding: 4px 0; font-size: .7rem; }
.combat-ranking-grid li button { max-width: calc(100% - 62px); padding: 0; color: var(--blue); border: 0; background: transparent; text-align: left; cursor: pointer; }
.combat-ranking-grid li strong { float: right; color: var(--ink); font: 800 .68rem var(--font-code); }
.combat-rankings > p { margin: 0; padding: 0 16px 16px; color: var(--muted); }
.combat-simulator-evidence > div { padding: 0 18px 16px; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.combat-simulator-evidence li { margin: 7px 0; }

.combat-weapons { margin-top: 18px; }
.combat-weapons > p { max-width: 1000px; color: var(--ink-soft); line-height: 1.55; }
.combat-weapon-table td { vertical-align: top; }
.combat-weapon-table th:nth-child(2), .combat-weapon-table td:nth-child(2) { width: 120px; text-align: center; }
.combat-object-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.impact-value { display: inline-block; min-width: 70px; padding: 6px 8px; color: #5f3c00; background: var(--gold-pale); border: 1px solid #ddc486; border-radius: 7px; font: 850 .76rem var(--font-code); }

.combat-shoot-grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.shoot-card, .shoot-notes { padding: clamp(19px, 2.8vw, 28px); }
.shoot-card { border-top: 5px solid var(--purple); }
.shoot-card.shoot-1 { border-top-color: var(--red); }
.shoot-card p { color: var(--ink-soft); line-height: 1.55; }
.shoot-notes { grid-column: 1 / -1; color: #eaf4f2; background: linear-gradient(130deg, #205456, #173d47); }
.shoot-notes .page-kicker { color: #efc77d; }
.shoot-notes h2 { color: white; }
.shoot-notes ul { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 9px 28px; margin: 0; padding-left: 20px; }
.shoot-notes li { color: #d7e6e4; line-height: 1.5; }

.combat-outcomes { margin-top: 18px; }
.combat-outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.combat-outcome-grid article { padding: 14px; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 9px; background: #fbfaf6; }
.combat-outcome-grid strong { font: 750 1rem var(--font-editorial); }
.combat-outcome-grid p { min-height: 4em; margin: 7px 0 10px; color: var(--ink-soft); font-size: .8rem; line-height: 1.45; }

.mechanics-boundaries { margin-top: 18px; overflow: hidden; }
.mechanics-boundaries > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 22px; cursor: pointer; list-style: none; }
.mechanics-boundaries > summary::-webkit-details-marker { display: none; }
.mechanics-boundaries > summary:hover { background: #faf7ef; }
.mechanics-boundaries > summary h2 { margin: 4px 0 0; font: 750 1.35rem var(--font-editorial); }
.mechanics-boundaries > summary > span { padding: 6px 9px; color: var(--blue); border: 1px solid var(--line); border-radius: 999px; background: white; font-size: .72rem; font-weight: 800; }
.mechanics-boundaries[open] > summary > span { color: var(--green); }
.mechanics-boundaries > div { padding: 0 22px 22px; border-top: 1px solid var(--line); }
.mechanics-boundaries li { margin: 8px 0; color: var(--ink-soft); line-height: 1.5; }

.mechanics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.mechanics-card { display: flex; flex-direction: column; min-height: 245px; padding: 18px; border: 1px solid var(--line); border-top: 5px solid var(--blue); border-radius: 11px; background: #fffdfa; box-shadow: var(--shadow-sm); }
.mechanics-card.mechanics-tone-1 { border-top-color: var(--purple); }
.mechanics-card.mechanics-tone-2 { border-top-color: var(--teal); }
.mechanics-card.mechanics-tone-3 { border-top-color: var(--gold); }
.mechanics-card.featured { background: #fff9f7; border-top-color: var(--red); }
.mechanics-card h3 { margin: 11px 0 8px; font: 750 1.15rem var(--font-editorial); }
.mechanics-card p { flex: 1; color: var(--ink-soft); font-size: .84rem; line-height: 1.5; }
.mechanics-card .button { align-self: flex-start; }
.event-turn { color: var(--gold-ink); font: 850 .82rem var(--font-code); }

.dialogue-register .register-content { background: linear-gradient(180deg, #fffdf8, #f8f4eb); }
.dialogue-intro { max-width: 880px; color: var(--ink-soft); font: 1.02rem/1.65 var(--font-editorial); }
.dialogue-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0 24px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
.dialogue-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dialogue-legend i { display: inline-block; width: 19px; height: 5px; border-radius: 4px; background: var(--blue); }
.dialogue-legend .legend-narration { background: var(--green); }
.dialogue-legend .legend-condition { background: var(--gold); }
.dialogue-legend .legend-branch { background: var(--purple); }
.dialogue-legend .legend-open { background: var(--red); }
.dialogue-flow { display: grid; gap: 20px; }
.dialogue-group { padding: 18px; border: 1px solid var(--line); border-top: 5px solid var(--blue); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.dialogue-group-branching { border-top-color: var(--purple); }
.dialogue-group-conditional { border-top-color: var(--gold); }
.dialogue-group-action { border-top-color: var(--green); }
.dialogue-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.dialogue-group-head h3 { margin: 3px 0 0; font: 750 1.3rem/1.2 var(--font-editorial); }
.dialogue-node { display: grid; grid-template-columns: minmax(150px, 205px) minmax(0, 1fr); gap: 15px; margin: 11px 0; border: 1px solid #d8e2e4; border-left: 5px solid var(--blue); border-radius: 9px; background: #f7fafb; overflow: hidden; }
.dialogue-node.dialogue-narration { border-color: #d5e4dc; border-left-color: var(--green); background: #f5faf7; }
.dialogue-node.dialogue-unresolved { border: 1px dashed #c87870; border-left: 5px solid var(--red); background: #fff8f7; }
.dialogue-node-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px; border-right: 1px solid #d8e2e4; background: #edf4f5; }
.dialogue-narration .dialogue-node-meta { background: #eaf4ee; }
.dialogue-unresolved .dialogue-node-meta { background: #f8e8e6; }
.dialogue-node-meta strong { color: var(--blue); font-size: .88rem; }
.dialogue-narration .dialogue-node-meta strong { color: var(--green); }
.dialogue-unresolved .dialogue-node-meta strong { color: var(--red); }
.dialogue-node-body { min-width: 0; padding: 13px 15px; }
.dialogue-node blockquote, .dialogue-action blockquote { margin: 0; color: #243139; font: 1.04rem/1.62 var(--font-editorial); }
.dialogue-source { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; color: var(--muted); font: 700 .68rem var(--font-code); }
.dialogue-raw { margin-top: 9px; color: var(--muted); font-size: .76rem; }
.dialogue-raw summary { cursor: pointer; font-weight: 750; }
.dialogue-raw pre { margin: 7px 0 0; padding: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dialogue-condition { margin: 10px 0 14px; padding: 10px 13px; border-left: 4px solid var(--gold); border-radius: 0 7px 7px 0; background: var(--gold-pale); color: #57441f; }
.dialogue-action { margin: 12px 0; padding: 13px 15px; border-left: 5px solid var(--green); border-radius: 0 9px 9px 0; background: var(--green-pale); }
.dialogue-action > span { display: block; margin-bottom: 6px; color: var(--green); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.dialogue-rng { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px 14px; margin: 12px 0; padding: 13px 15px; border: 1px solid #cfb6d3; border-radius: 9px; background: var(--purple-pale); }
.dialogue-rng > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dialogue-rng > div:first-child { display: grid; gap: 4px; }
.dialogue-rng p { grid-column: 1 / -1; margin: 0; color: #5c4160; font-size: .82rem; }
.dialogue-branch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 15px; }
.dialogue-branch { min-width: 0; padding: 14px; border: 1px solid #d7c5da; border-top: 4px solid var(--purple); border-radius: 10px; background: #fcf8fd; }
.dialogue-branch > header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dialogue-branch h4 { margin: 2px 0 0; font: 750 1.05rem/1.25 var(--font-editorial); }
.branch-index { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: white; background: var(--purple); border-radius: 50%; font: 850 .72rem var(--font-code); }
.dialogue-branch .dialogue-node { grid-template-columns: 1fr; }
.dialogue-branch .dialogue-node-meta { border-right: 0; border-bottom: 1px solid #d8e2e4; }
.dialogue-probability { padding: 9px 11px; border-radius: 7px; color: #553b5a; background: #efe1f1; font-size: .82rem; }
.dialogue-probability span { color: var(--ink-soft); }
.dialogue-effects { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.dialogue-effects strong { width: 100%; color: var(--green); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.dialogue-effects span { padding: 6px 9px; border: 1px solid #b8d6c6; border-radius: 999px; background: var(--green-pale); font-size: .77rem; }
.dialogue-edges { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.dialogue-edges strong { width: 100%; color: var(--purple); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.dialogue-open-note { margin: 9px 0 0; padding: 8px 10px; border-left: 3px solid var(--red); color: #713b37; background: var(--red-pale); font-size: .78rem; }
.dialogue-family-guards, .dialogue-caveats { margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.dialogue-family-guards h3, .dialogue-caveats h3 { margin-top: 0; }
.dialogue-caveats { border-style: dashed; border-color: #c87870; background: #fff9f7; }
.status-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.step-index { display: grid; place-items: center; width: 36px; height: 36px; color: white; background: var(--ink); border-radius: 50%; font: 850 .78rem var(--font-code); }
.step-number { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; color: white; background: var(--ink); border-radius: 50%; font: 850 .78rem var(--font-code); }
.command-box { display: inline-block; max-width: 100%; margin: 5px 0; padding: 8px 10px; border: 1px solid #c2b9a9; border-radius: 7px; background: #f2ede2; font: 800 .82rem var(--font-code); overflow-wrap: anywhere; }

.walkthrough-boundary { padding: 22px; }
.walkthrough-boundary h2 { margin: 9px 0 7px; font: 750 1.45rem var(--font-editorial); }
.walkthrough-boundary p { max-width: 980px; margin: 0; color: var(--ink-soft); line-height: 1.58; }
.walkthrough-timing, .walkthrough-toolkit, .walkthrough-dependencies, .walkthrough-profiles { margin-top: 18px; padding: 22px; }
.walkthrough-overview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.walkthrough-overview-head h2 { margin: 4px 0 5px; font: 750 1.55rem var(--font-editorial); }
.walkthrough-overview-head p { max-width: 860px; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.walkthrough-disclosure { padding: 0; overflow: hidden; }
.walkthrough-disclosure > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 22px; cursor: pointer; list-style: none; }
.walkthrough-disclosure > details > summary::-webkit-details-marker { display: none; }
.walkthrough-disclosure > details > summary:hover { background: #faf7ef; }
.walkthrough-disclosure > details > summary:focus-visible { outline: 3px solid #d0a357; outline-offset: -4px; }
.walkthrough-disclosure h2 { margin: 4px 0 5px; font: 750 1.55rem var(--font-editorial); }
.walkthrough-disclosure summary p { max-width: 860px; margin: 0; color: var(--ink-soft); line-height: 1.5; }
.walkthrough-disclosure-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--blue); background: #fff; font-size: .75rem; font-weight: 800; }
.walkthrough-disclosure-toggle::after { content: "⌄"; font-size: 1rem; line-height: .7; transition: transform .16s ease; }
.walkthrough-disclosure details[open] .walkthrough-disclosure-toggle { color: var(--green); }
.walkthrough-disclosure details[open] .walkthrough-disclosure-toggle::after { transform: rotate(180deg); }
.walkthrough-disclosure details[open] .walkthrough-disclosure-toggle { font-size: 0; }
.walkthrough-disclosure details[open] .walkthrough-disclosure-toggle::before { content: "schließen"; font-size: .75rem; }
.walkthrough-disclosure-body { padding: 0 22px 22px; border-top: 1px solid var(--line); }
.walkthrough-disclosure-body > :first-child { margin-top: 17px; }
.timing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 9px; }
.timing-card { padding: 13px; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 9px; background: #fbfaf5; }
.timing-card.timing-zero { border-top-color: var(--green); }
.timing-card.timing-one { border-top-color: var(--blue); }
.timing-card.timing-prompt { border-top-color: var(--purple); }
.timing-card.timing-multi, .timing-card.timing-ongoing { border-top-color: var(--gold); }
.timing-card.timing-unknown { border-top-color: var(--red); border-top-style: dashed; }
.timing-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 9px; }
.timing-card p { min-height: 4.6em; margin: 10px 0 8px; color: var(--ink-soft); font-size: .8rem; line-height: 1.46; }
.timing-card > small { color: var(--muted); font: 700 .67rem var(--font-code); }
.turn-badge { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 5px 8px; color: #245d48; background: var(--green-pale); border: 1px solid #9bc7ad; border-radius: 6px; font: 800 .68rem var(--font-code); white-space: normal; }
.turn-normal { color: #22566f; background: var(--blue-pale); border-color: #a8cbd8; }
.turn-prompt { color: #68406e; background: var(--purple-pale); border-color: #cfb6d3; }
.turn-wait, .turn-sleep, .turn-ongoing { color: #765416; background: var(--gold-pale); border-color: #ddc486; }
.turn-open { color: #7b302b; background: var(--red-pale); border-color: #d7a6a2; border-style: dashed; }
.walkthrough-rules { margin-top: 13px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #f8f5ed; }
.walkthrough-rules h3 { margin: 0; font-size: .9rem; }
.walkthrough-rules li { margin: 7px 0; color: var(--ink-soft); line-height: 1.5; }
.toolkit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.toolkit-card { padding: 15px; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 9px; background: #f7fbfa; }
.toolkit-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.toolkit-card p { margin: 9px 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.5; }
.toolkit-card aside { padding: 9px 10px; color: #6f5019; background: var(--gold-pale); border-radius: 7px; font-size: .76rem; line-height: 1.42; }
.dependency-chain { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(205px, 1fr); gap: 24px; overflow-x: auto; padding: 2px 2px 12px; }
.dependency-node { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #faf8f1; }
.dependency-node:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -19px; color: var(--gold); font-weight: 900; transform: translateY(-50%); }
.dependency-node > span { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: var(--ink); border-radius: 50%; font: 800 .68rem var(--font-code); }
.dependency-node p { margin: 5px 0; color: var(--ink-soft); font-size: .79rem; line-height: 1.42; }
.dependency-node small { display: block; min-height: 2.8em; color: var(--green); font-size: .72rem; }
.dependency-node .evidence-row { margin-top: 8px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 10px; }
.profile-card { padding: 15px; border: 1px solid var(--line); border-top: 4px solid var(--line-strong); border-radius: 9px; background: #fbfaf6; }
.profile-card.recommended { border-top-color: var(--green); background: #f6faf7; }
.profile-card h3 { margin: 6px 0 8px; font: 750 1.08rem var(--font-editorial); }
.profile-card p { margin: 0 0 11px; color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }
.profile-card small { color: var(--muted); line-height: 1.4; }

.walkthrough-layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); align-items: start; min-height: 0; margin-top: 18px; overflow: visible; }
.walkthrough-register { position: sticky; top: calc(var(--topbar-h) + 12px); display: flex; flex-direction: column; align-self: start; max-height: calc(100vh - var(--topbar-h) - 24px); overflow: hidden; border-right: 1px solid var(--line); background: #f6f2e9; }
.walkthrough-register > header { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 8px; padding: 16px; background: #f6f2e9; border-bottom: 1px solid var(--line); }
.walkthrough-register > header strong { color: var(--muted); font-size: .76rem; }
.walkthrough-register nav { display: grid; min-height: 0; padding: 9px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #8b7757 #e7e0d2; touch-action: pan-y; }
.walkthrough-register nav::-webkit-scrollbar { width: 10px; }
.walkthrough-register nav::-webkit-scrollbar-track { background: #e7e0d2; }
.walkthrough-register nav::-webkit-scrollbar-thumb { background: #8b7757; border: 2px solid #e7e0d2; border-radius: 999px; }
.walkthrough-register button { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; width: 100%; padding: 11px 9px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 9px; text-align: left; }
.walkthrough-register button:hover, .walkthrough-register button:focus-visible { background: white; border-color: var(--line); }
.walkthrough-register button.active { color: white; background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.walkthrough-register button > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; color: var(--gold-ink); border: 1px solid currentColor; border-radius: 50%; font: 850 .69rem var(--font-code); }
.walkthrough-register button.active > span:first-child { color: #f3ca81; }
.walkthrough-register button > span:last-child { min-width: 0; }
.walkthrough-register button strong, .walkthrough-register button small { display: block; }
.walkthrough-register button strong { font-size: .83rem; line-height: 1.3; }
.walkthrough-register button small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: .67rem; line-height: 1.35; text-overflow: ellipsis; }
.walkthrough-register button.active small { color: #b9c8cd; }
.walkthrough-detail { min-width: 0; padding: clamp(18px, 2.8vw, 34px); background: linear-gradient(180deg, #fffdf8, #fbf9f3); }
.walkthrough-chapter-head { display: flex; align-items: flex-start; gap: 14px; }
.walkthrough-chapter-head h2 { margin: 5px 0 2px; font: 750 clamp(1.7rem, 3vw, 2.7rem)/1.08 var(--font-editorial); }
.walkthrough-summary { max-width: 940px; margin: 18px 0; color: var(--ink-soft); font: 1.08rem/1.62 var(--font-editorial); }
.walkthrough-objective { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 15px; border-left: 4px solid var(--blue); background: var(--blue-pale); border-radius: 0 8px 8px 0; }
.walkthrough-objective span { color: var(--blue); font-size: .69rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.walkthrough-objective p { margin: 0; line-height: 1.5; }
.walkthrough-room-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 3px; }
.walkthrough-section { margin-top: 28px; }
.walkthrough-section h3, .walkthrough-sources h3 { margin: 3px 0 10px; font: 750 1.3rem var(--font-editorial); }
.walkthrough-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.walkthrough-prerequisites { padding: 16px 18px; border: 1px solid var(--line); border-radius: 9px; background: #faf7ef; }
.walkthrough-prerequisites h3 { margin-top: 0; }
.walkthrough-prerequisites ul, .walkthrough-failures ul, .walkthrough-tests ul { margin-bottom: 0; padding-left: 20px; }
.walkthrough-prerequisites li, .walkthrough-failures li, .walkthrough-tests li { margin: 6px 0; color: var(--ink-soft); line-height: 1.45; }
.walkthrough-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.walkthrough-phases { display: grid; gap: 18px; }
.walkthrough-phase { overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); }
.walkthrough-phase.phase-verified { border-top-color: var(--green); }
.walkthrough-phase.phase-warning { border-top-color: var(--gold); }
.walkthrough-phase > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 18px 12px; }
.walkthrough-phase h4 { margin: 4px 0 0; font: 750 1.2rem var(--font-editorial); }
.walkthrough-phase-goal { margin: 0; padding: 0 18px 14px; color: var(--ink-soft); font: 1rem/1.52 var(--font-editorial); }
.walkthrough-phase dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 7px 12px; margin: 0; padding: 14px 18px; border-block: 1px solid var(--line); background: #faf7ef; }
.walkthrough-phase dt { color: var(--blue); font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.walkthrough-phase dd { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.42; }
.walkthrough-phase .walkthrough-table-wrap { border: 0; border-radius: 0; }
.walkthrough-input-line { display: flex; align-items: center; gap: 8px; }
.walkthrough-input-line .command-box { flex: 1; }
.walkthrough-repeat { flex: 0 0 auto; padding: 5px 7px; color: #fff8e8; background: var(--gold-ink); border-radius: 999px; font: 850 .7rem var(--font-code); }
.walkthrough-repeat-until { color: #fff; background: var(--purple); }
.walkthrough-until { margin: 0 0 8px; padding: 8px 10px; color: #503259; background: #f7eef9; border-left: 4px solid var(--purple); border-radius: 0 7px 7px 0; font-size: .78rem; line-height: 1.42; }
.walkthrough-until strong { color: var(--purple); text-transform: uppercase; letter-spacing: .04em; }
.walkthrough-command-table { min-width: 940px; background: white; }
.walkthrough-command-table th { top: auto; }
.walkthrough-command-table td { padding: 10px; }
.walkthrough-command-table td:nth-child(2) { width: 175px; }
.walkthrough-command-table td:nth-child(2) span { display: block; margin-top: 3px; color: var(--muted); font-size: .72rem; }
.walkthrough-command-table td:nth-child(3) { width: 235px; }
.walkthrough-command-table td:nth-child(4) { width: 130px; }
.walkthrough-command-table .turn-mode { display: block; margin-top: 5px; color: var(--muted); font: 700 .64rem var(--font-code); }
.walkthrough-command-table td p { min-width: 230px; margin: 0 0 7px; color: var(--ink-soft); line-height: 1.42; }
.walkthrough-command-number { color: var(--gold-ink); font: 850 .78rem var(--font-code); }
.walkthrough-command-table .command-box { margin: 0; color: #e9f2f3; background: #1c2d36; border-color: #1c2d36; }
.walkthrough-event-grid, .walkthrough-technical-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.walkthrough-event { padding: 15px; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 9px; background: #fffaf0; }
.walkthrough-event header, .walkthrough-technical-grid article header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.walkthrough-event h4 { margin: 0; font-size: .98rem; }
.walkthrough-event dl { display: grid; grid-template-columns: 83px minmax(0, 1fr); gap: 6px 9px; margin-bottom: 0; }
.walkthrough-event dt { color: var(--gold-ink); font-size: .69rem; font-weight: 850; text-transform: uppercase; }
.walkthrough-event dd { margin: 0; color: var(--ink-soft); font-size: .81rem; line-height: 1.4; }
.walkthrough-dialogues { display: grid; gap: 10px; }
.walkthrough-dialogue { padding: 15px 17px; border: 1px solid #b7cfda; border-left: 5px solid var(--blue); border-radius: 0 9px 9px 0; background: #f3f8fa; }
.walkthrough-dialogue-paraphrase { border-color: #cfb6d3; border-left-color: var(--purple); background: #fbf6fc; }
.walkthrough-dialogue-narration { border-color: #b8d6c6; border-left-color: var(--green); background: #f5faf7; }
.walkthrough-dialogue header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; }
.walkthrough-dialogue header > span { color: var(--muted); font: 700 .71rem var(--font-code); }
.walkthrough-dialogue header .evidence-row { margin-left: auto; }
.walkthrough-dialogue p { margin: 10px 0 7px; font: 1rem/1.55 var(--font-editorial); }
.walkthrough-dialogue small { color: var(--muted); }
.walkthrough-technical { padding: 17px; border: 1px solid #a9cbd5; border-radius: 10px; background: #f0f6f7; }
.walkthrough-technical { margin-top: 28px; }
.walkthrough-technical-grid article { padding: 12px; border: 1px solid #bed4da; border-radius: 8px; background: #fbfefe; }
.walkthrough-technical-grid article p { margin: 8px 0 0; color: var(--ink-soft); font: .79rem/1.48 var(--font-code); overflow-wrap: anywhere; }
.walkthrough-checkpoint { margin-top: 28px; padding: 18px; color: white; background: linear-gradient(120deg, #1b3947, #26596a); border-radius: 10px; box-shadow: var(--shadow-sm); }
.walkthrough-checkpoint > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.walkthrough-checkpoint .page-kicker { color: #f1c879; }
.walkthrough-checkpoint p { margin: 9px 0 0; color: #edf5f6; line-height: 1.55; }
.walkthrough-alternatives { display: grid; gap: 11px; }
.walkthrough-alternative { --branch: var(--line-strong); padding: 16px; border: 1px solid var(--line); border-left: 5px solid var(--branch); border-radius: 0 9px 9px 0; background: #fcfbf7; }
.walkthrough-alternative.alternative-story { --branch: var(--green); background: #f5faf7; }
.walkthrough-alternative.alternative-system { --branch: var(--blue); background: #f4f8fa; }
.walkthrough-alternative.alternative-experimental { --branch: var(--purple); background: #fbf6fc; }
.walkthrough-alternative.alternative-violence { --branch: var(--red); background: #fff7f5; }
.walkthrough-alternative.alternative-warning { --branch: var(--gold); background: #fffaf0; }
.walkthrough-alternative header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.walkthrough-alternative h4 { flex: 1; min-width: 180px; margin: 0; font-size: 1rem; }
.walkthrough-alternative > p { color: var(--ink-soft); line-height: 1.5; }
.walkthrough-alternative-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.walkthrough-alternative-columns strong { color: var(--branch); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.walkthrough-alternative-columns ol, .walkthrough-alternative-columns ul { margin: 6px 0 0; padding-left: 20px; }
.walkthrough-alternative-columns li { margin: 5px 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.4; }
.walkthrough-end-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.walkthrough-failures, .walkthrough-tests { padding: 16px; border: 1px solid #d7a6a2; border-radius: 9px; background: #fff8f7; }
.walkthrough-tests { border-color: #cfb6d3; background: #fbf7fc; }
.walkthrough-failures .page-kicker { color: var(--red); }
.walkthrough-tests .page-kicker { color: var(--purple); }
.walkthrough-sources { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.walkthrough-sources .button-row { justify-content: flex-end; margin: 0; }

.relation-mobile-picker { display: none; }
.relation-mobile-picker label { color: var(--route-accent-ink); font-weight: 650; }
.relation-mobile-picker select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 34px 8px 11px; color: var(--ink); background: #fffdf8; border: 1px solid var(--route-line); border-radius: 9px; }
body[data-route="relations"] #relationRegisterContent { display: grid; grid-template-rows: auto auto minmax(0,1fr); padding: 0; overflow: hidden; scrollbar-gutter: auto; }
.relation-reading-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px 12px; }
.relation-reading-head > div:first-child { min-width: 0; }
.relation-reading-head h2 { margin: 8px 0 0; color: var(--route-deep); }
.relation-reading-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.relation-tabs { flex-wrap: wrap; overflow: visible; gap: 6px; padding: 10px 16px; }
.relation-reading-body { min-width: 0; min-height: 0; overflow: auto; padding: 20px 22px; scrollbar-gutter: stable; container: relation-reader / inline-size; }
.relation-network-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
/* Use the actual reading width, also when the register or browser zoom changes. */
@container relation-reader (min-width: 58rem) {
  .relation-network-layout { grid-template-columns: minmax(0, 1.1fr) minmax(25rem, 1fr); }
}
.relation-explainer { max-width: 75ch; margin: 0 0 14px; color: var(--ink-soft); }
.relation-key { display: inline-block; width: 20px; height: 3px; margin: 0 5px 3px 1px; border-radius: 99px; background: currentColor; }
.relation-key-outgoing { color: var(--blue); }
.relation-key-incoming { color: var(--red); }
.relation-graph { width: min(720px, 100%); min-width: 0; min-height: 0; margin-inline: auto; overflow: auto; padding: 10px; border: 1px solid var(--route-line); border-radius: 12px; overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
.relation-svg { display: block; width: 100%; max-width: 560px; min-width: 440px; height: auto; margin-inline: auto; }
.relation-edge { stroke: #8ca0a8; stroke-width: 1.2; opacity: .5; }
.relation-edge.incoming { stroke: var(--red); }
.relation-edge.outgoing { stroke: var(--blue); }
.relation-node circle { fill: white; stroke: var(--line-strong); stroke-width: 1.5; }
.relation-node text { fill: var(--ink); font: 700 12px var(--font-ui); text-anchor: middle; dominant-baseline: middle; }
.relation-node.selected circle { fill: var(--ink); stroke: var(--ink); }
.relation-node.selected text { fill: white; }
/* Horizontal overflow must not trap vertical wheel input inside the table.
   The surrounding reading body (or page on mobile) owns vertical scrolling. */
.relation-table-scroll { min-width: 0; min-height: 0; max-width: 100%; max-height: none; overflow: auto; scrollbar-gutter: stable; overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
.relation-table th:first-child { min-width: 220px; }
.relation-table th:not(:first-child), .relation-table td:not(:first-child) { width: 74px; text-align: center; }
.relation-table td { vertical-align: middle; }
.relation-name-chip { justify-content: flex-start; text-align: left; }
.relation-direction { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; font-variant-numeric: tabular-nums; }
.relation-direction-outgoing { color: var(--blue); }
.relation-direction-incoming { color: var(--red); }
.relation-cell-marker { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid currentColor; border-radius: 999px; font: 800 var(--type-caption)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.relation-cell-outgoing { color: var(--blue); background: var(--blue-pale); }
.relation-cell-incoming { color: var(--red); background: var(--red-pale); }
.trust-guide { width: 100%; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--route-line); border-radius: 12px; background: #fffdf8; container: trust-guide / inline-size; }
.trust-guide > header { max-width: 75ch; }
.trust-guide .page-kicker { color: var(--route-deep); }
.trust-guide h3 { margin: 4px 0 8px; color: var(--route-deep); }
.trust-guide > header p { margin: 0 0 12px; color: var(--ink-soft); }
.trust-thresholds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trust-thresholds article { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: start; gap: 7px; padding: 8px; border: 1px solid var(--route-line); border-radius: 9px; background: #fffdf8; }
.trust-thresholds strong { display: grid; place-items: center; min-height: 28px; padding: 3px 6px; color: #fffdf8; background: var(--route-deep); border-radius: 999px; font: 650 var(--type-ui)/1.4 var(--font-ui); font-variant-numeric: tabular-nums; }
.trust-thresholds p { min-width: 0; margin: 0; color: var(--ink-soft); }
.trust-limit { margin: 12px 0 8px; padding-top: 10px; color: var(--ink-soft); border-top: 1px solid var(--route-line); }
.trust-guide .button-row { margin-bottom: 0; }
@container trust-guide (max-width: 22rem) {
  .trust-thresholds { grid-template-columns: minmax(0, 1fr); }
}

.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.music-grid { align-items: start; }
.media-card { overflow: hidden; }
.media-card .media-body { padding: 20px; }
.media-audio-card { border-top: 5px solid var(--blue); }
.media-audio-card:nth-child(2) { border-top-color: var(--red); }
.media-audio-card:nth-child(3) { border-top-color: var(--green); }
.media-audio-card h2 { min-height: 2.5em; margin: 8px 0; font: 750 1.35rem/1.18 var(--font-editorial); }
.media-role { min-height: 3.2em; color: var(--ink-soft); line-height: 1.5; }
.media-card audio { display: block; width: 100%; margin: 15px 0; }
.media-quickfacts { display: grid; gap: 7px; margin: 14px 0; }
.media-quickfacts div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 9px; padding-top: 7px; border-top: 1px solid var(--line); }
.media-quickfacts dt, .artifact-card dt { color: var(--muted); font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.media-quickfacts dd, .artifact-card dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.media-disclosure { margin: 14px -20px -20px; border-top: 1px solid var(--line); background: #f9f6ed; }
.media-disclosure summary { padding: 14px 20px; color: var(--blue); font-weight: 800; cursor: pointer; list-style-position: inside; }
.media-disclosure summary:hover, .media-disclosure summary:focus-visible { background: var(--blue-pale); }
.media-disclosure-body { padding: 2px 20px 20px; }
.media-disclosure-body h3 { margin: 18px 0 5px; color: var(--ink); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.media-disclosure-body p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.media-private-note { margin-top: 20px; padding: 16px; color: #382f49; background: var(--purple-pale); border: 1px solid #d4bfd8; border-radius: 11px; }
.media-private-note > span { display: block; margin-bottom: 8px; color: var(--purple); font-size: .67rem; font-weight: 850; letter-spacing: .11em; }
.media-private-note code { display: block; margin-bottom: 11px; padding: 9px 10px; color: #f8efe0; background: #2a2230; border-radius: 7px; font-size: 1rem; letter-spacing: .08em; }
.media-private-note p + p { margin-top: 9px; }
.media-boundary { margin: 16px 0; padding: 12px 14px; background: var(--gold-pale); border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0; }
.media-boundary p { margin-top: 4px; }
.media-provenance { margin: 13px 0 0; color: var(--muted); font: .68rem/1.45 var(--font-code); overflow-wrap: anywhere; }
.media-video { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 22px; align-items: center; margin: 26px 0; padding: 22px; }
.media-video h2 { margin: 8px 0; font: 750 1.45rem var(--font-editorial); }
.media-video video { width: 100%; max-height: 440px; background: #0b1013; border-radius: 10px; }
.music-comparison { margin: 26px 0; padding: 24px; }
.music-comparison .section-title { flex-wrap: wrap; }
.music-comparison .section-title > div { flex: 1 1 24rem; min-width: 0; }
.music-comparison .section-title h2 { min-width: 0; overflow-wrap: anywhere; }
.music-comparison .section-title > .button { flex: 0 1 auto; min-width: 0; min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.music-comparison .table-scroll { overflow-x: auto; }
.artifact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.artifact-card { display: flex; flex-direction: column; min-height: 310px; padding: 17px; background: #fffdf8; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.artifact-card h3 { margin: 5px 0 10px; font-size: 1rem; }
.artifact-type { color: var(--teal); font-size: .67rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.artifact-card > p { color: var(--ink-soft); line-height: 1.5; }
.artifact-card dl { display: grid; gap: 12px; margin: 4px 0 16px; }
.artifact-card dl div { display: grid; gap: 4px; }
.artifact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); }
.artifact-actions > span { margin-right: auto; color: var(--muted); font-size: .75rem; }
.graphics-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.graphics-guide { border-top: 4px solid var(--blue); }
.graphics-guide:nth-child(2) { border-top-color: var(--purple); }
.graphics-guide:nth-child(3) { border-top-color: var(--red); }
.graphics-guide:nth-child(4) { border-top-color: var(--green); }
.graphics-guide h3 { font: 750 1.12rem var(--font-editorial); }
.graphics-guide p { color: var(--ink-soft); line-height: 1.5; }
.compare-table { margin-top: 26px; padding: 22px; overflow-x: auto; }
.compare-table table { min-width: 1120px; }
.compare-table th:first-child { width: 235px; }
.media-picture-table tbody th { text-align: left; vertical-align: top; }
.media-picture-table tbody th strong, .media-picture-table tbody th span, .media-picture-table tbody th small { display: block; }
.media-picture-table tbody th strong { color: var(--blue); font: 850 .83rem var(--font-code); }
.media-picture-table tbody th span { margin: 5px 0; color: var(--ink); }
.media-picture-table tbody th small { color: var(--muted); font-weight: 500; line-height: 1.4; }
.image-zoom { display: grid; width: 230px; padding: 0; overflow: hidden; text-align: left; color: var(--ink); background: #101518; border: 1px solid #26363d; border-radius: 9px; }
.image-zoom img { display: block; width: 100%; height: 146px; object-fit: contain; background: #101518; image-rendering: pixelated; }
.image-zoom > span { display: grid; gap: 2px; padding: 9px 10px; color: #e8edef; background: #1c292f; }
.image-zoom > span strong { color: #f0c97f; font-size: .75rem; }
.image-zoom > span small { color: #b8c4c8; font-size: .68rem; }
.image-zoom:hover, .image-zoom:focus-visible { outline: 3px solid #d2a34e; outline-offset: 2px; }
.missing-media { display: grid; align-content: center; width: 230px; min-height: 198px; padding: 15px; color: #71453f; background: var(--red-pale); border: 1px dashed #bd756d; border-radius: 9px; }
.missing-media span { margin-top: 6px; font-size: .75rem; line-height: 1.4; }
.intro-table { min-width: 720px !important; }
.media-source-cards { margin-top: 24px; }
.media-source-cards .card { display: flex; flex-direction: column; min-height: 0; }
.protection-primer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 28px; margin-bottom: 18px; padding: clamp(22px, 3vw, 38px); overflow: hidden; background: linear-gradient(130deg, #fffdf8, #f2ead8); }
.protection-primer h2 { max-width: 720px; margin: 7px 0 12px; font: 750 clamp(1.55rem, 3vw, 2.8rem)/1.08 var(--font-editorial); }
.protection-primer-copy > p { max-width: 760px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }
.protection-primer blockquote { margin: 22px 0 0; padding: 16px 18px; color: #23404c; background: #e9f1f1; border-left: 5px solid var(--blue); border-radius: 0 10px 10px 0; font: 1.03rem/1.62 var(--font-editorial); }
.protection-steps { display: grid; gap: 10px; align-content: center; }
.protection-step { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; background: #ffffffc7; border: 1px solid var(--line); border-radius: 11px; }
.protection-step > span { display: grid; place-items: center; width: 38px; height: 38px; color: white; background: var(--ink); border-radius: 50%; font: 850 .72rem var(--font-code); }
.protection-step h3 { margin: 1px 0 4px; }
.protection-step p { margin: 0; color: var(--ink-soft); line-height: 1.48; }
.protection-records-button { margin-top: 10px; }
.protection-mechanism-content { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:28px; }
.protection-mechanism-content blockquote { margin:22px 0 0; padding:16px 18px; background:var(--route-soft); border-left:5px solid var(--route-accent); font:1.03rem/1.62 var(--font-editorial); }
.protection-comparison-content { min-width:0; }
.protection-comparison-content .table-scroll { overflow-x:auto; }
.protection-comparison-content table { min-width:860px; }
#protectionDetail { scroll-margin-top:calc(var(--topbar-h) + 16px); }
.protection-compare { margin-bottom: 28px; padding: 22px; }
.protection-compare .table-scroll { overflow-x: auto; }
.protection-compare table { min-width: 860px; }
.protection-cards { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.protection-card { position: relative; display: flex; flex-direction: column; min-height: 286px; overflow: hidden; border-top: 5px solid var(--blue); }
.protection-card[data-protection-card="amiga-razor-1911"] { border-top-color: var(--red); }
.protection-card[data-protection-card="amiga-crystal"] { border-top-color: var(--purple); }
.protection-card[data-protection-card="amiga-skid-row"] { border-top-color: var(--green); }
.protection-card .protection-kind { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.protection-card h3 { margin: 7px 0 9px; font: 750 1.28rem/1.15 var(--font-editorial); }
.protection-card p { flex: 1; margin-bottom: 18px; }
.protection-card .button { align-self: flex-start; }
.protection-card .protection-evidence-button { color: #7b403c; background: #fbeeea; border-color: #d8aaa3; box-shadow: 0 1px 0 #fff8; }
.protection-card .protection-evidence-button:hover, .protection-card .protection-evidence-button:focus-visible { color: #5b2c29; background: #f7dfd9; border-color: #bb776f; }
.protection-footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.protection-context { padding: 22px; }
.protection-context h2 { margin: 6px 0 12px; font: 750 1.4rem var(--font-editorial); }
.protection-context li { margin: 8px 0; color: var(--ink-soft); line-height: 1.5; }
.protection-detail-lead { margin: 2px 0 18px; color: var(--ink); font: 1.12rem/1.58 var(--font-editorial); }
.protection-detail-section { margin: 18px 0; padding-top: 2px; }
.protection-detail-section.technical { padding: 15px; background: var(--blue-pale); border-left: 4px solid var(--blue); border-radius: 0 9px 9px 0; }
.protection-detail-section ol, .protection-detail-section ul { padding-left: 22px; }
.protection-detail-section li { color: var(--ink-soft); line-height: 1.5; }
.protection-findings { display: grid; gap: 9px; }
.protection-finding { padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #faf8f1; }
.protection-finding header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.protection-finding p { margin: 7px 0 0; color: var(--ink-soft); line-height: 1.5; }
.protection-metaphor { margin: 22px 0; padding: 17px; color: #3d3150; background: var(--purple-pale); border: 1px solid #d6c1db; border-radius: 11px; }
.protection-metaphor span { color: var(--purple); font-size: .7rem; font-weight: 850; letter-spacing: .12em; }
.protection-metaphor p { margin: 7px 0 0; font: 1.05rem/1.58 var(--font-editorial); }
.protection-detail-section.boundaries { padding: 14px; background: var(--gold-pale); border-left: 4px solid var(--gold); border-radius: 0 9px 9px 0; }
.protection-records-dialog { width: min(1160px, calc(100vw - 34px)); max-height: min(820px, calc(100dvh - 34px)); padding: 0; overflow: hidden; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.protection-records-dialog::backdrop { background: rgba(30, 20, 20, .68); backdrop-filter: blur(3px); }
.protection-records-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.protection-records-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 18px 13px; background: linear-gradient(120deg, #fff8f4, #f4ece2); border-bottom: 1px solid var(--line); }
.protection-records-head > div { min-width: 0; }
.protection-records-head strong { display: block; margin: 4px 0 3px; font: 750 1.25rem var(--font-editorial); }
.protection-records-head p { margin: 0; color: var(--ink-soft); font-size: .84rem; }
.protection-records-body { min-height: 0; padding: 16px 18px; overflow: auto; }
.protection-records-body > .small { margin-top: 0; }
.protection-records-table-wrap { max-height: 440px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
.protection-records-table { min-width: 980px; margin: 0; }
.protection-records-table thead { position: sticky; z-index: 1; top: 0; }
.protection-records-table th, .protection-records-table td { padding: 7px 9px; white-space: nowrap; font-size: .78rem; }
.protection-records-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 15px; padding: 11px 18px; background: #f7f3e9; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .78rem; }
.protection-records-foot > span { min-width: 0; overflow-wrap: anywhere; }

/* Trivia & Zeitgeschichte */
body.culture-inspector-open .workspace { margin-right: min(680px, 46vw); }
body.culture-inspector-open .inspector { width: min(680px, 100vw); }
.culture-primer { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .7fr); gap: 26px; padding: 24px; border-left: 6px solid var(--gold); background: linear-gradient(120deg, #fffdf7, #f5ead2); }
.culture-primer h2 { margin: 4px 0 8px; font: 750 1.65rem var(--font-editorial); }
.culture-primer p { max-width: 880px; margin: 0; color: var(--ink-soft); line-height: 1.62; }
.culture-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 15px 0 0; }
.culture-stats button { display: grid; gap: 2px; min-height: 82px; padding: 13px 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 11px; text-align: left; box-shadow: var(--shadow-sm); }
.culture-stats button:hover, .culture-stats button:focus-visible { border-color: var(--gold); transform: translateY(-1px); }
.culture-stats strong { color: var(--blue); font: 800 1.65rem var(--font-editorial); }
.culture-stats span { color: var(--muted); font-size: .78rem; }
.culture-topics { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 10px; }
.culture-topic { display: grid; align-content: start; gap: 6px; min-height: 130px; padding: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-align: left; box-shadow: var(--shadow-sm); }
.culture-topic:hover, .culture-topic:focus-visible, .culture-topic.active { border-color: var(--blue); background: var(--blue-pale); }
.culture-topic strong { font: 750 1rem var(--font-editorial); }
.culture-topic span { color: var(--ink-soft); font-size: .78rem; line-height: 1.4; }
.culture-topic small { margin-top: auto; color: var(--blue); font-weight: 750; }
.culture-timeline { margin-top: 30px; padding: 21px; overflow: hidden; }
.culture-era-track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 8px; padding-top: 18px; }
.culture-era-track::before { content: ""; position: absolute; top: 7px; left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg, var(--line-strong), var(--gold)); }
.culture-era { position: relative; display: grid; gap: 3px; min-height: 68px; padding: 11px; color: var(--ink); background: #fbf8ef; border: 1px solid var(--line); border-radius: 9px; text-align: left; }
.culture-era::before { content: ""; position: absolute; top: -16px; left: 18px; width: 10px; height: 10px; background: var(--panel); border: 3px solid var(--gold); border-radius: 50%; }
.culture-era:hover, .culture-era:focus-visible, .culture-era.active { color: white; background: var(--ink); border-color: var(--ink); }
.culture-era strong { font-size: .84rem; }
.culture-era span { color: inherit; opacity: .78; font-size: .7rem; line-height: 1.35; }
.culture-controls { margin-top: 18px; padding: 17px; }
.culture-controls .filter-row { margin-bottom: 10px; }
.culture-controls select { min-width: 165px; }
.culture-confidence-filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.culture-confidence-filter legend { padding: 0 6px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.culture-confidence-filter label { display: flex; align-items: center; gap: 6px; font-size: .78rem; }
.culture-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.culture-dot.proven { background: var(--green); }
.culture-dot.context { background: var(--blue); }
.culture-dot.plausible { background: var(--gold); }
.culture-dot.speculative { background: var(--red); }
.culture-anchor-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 11px; color: #244c62; background: var(--blue-pale); border-radius: 8px; font-size: .8rem; }
.culture-anchor-filter button { color: var(--blue); background: transparent; border: 0; text-decoration: underline; }
.badge.culture-proven { color: #245d48; background: var(--green-pale); border-color: #9bc7ad; }
.badge.culture-context { color: #24566e; background: var(--blue-pale); border-color: #9fc3d0; }
.badge.culture-plausible { color: #765416; background: var(--gold-pale); border-color: #ddc486; }
.badge.culture-speculative { color: #7b302b; background: var(--red-pale); border-color: #d7a6a2; }
.culture-related { margin: 22px 0; padding: 15px; background: #f6f1e5; border: 1px solid #ddcfad; border-radius: 11px; }
.culture-related.compact { padding: 12px; }
.culture-related-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.culture-related-head h3 { margin: 3px 0 0 !important; }
.culture-backlinks { display: grid; gap: 6px; }
.culture-backlink { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; width: 100%; min-height: 44px; padding: 9px; color: var(--ink); background: #fffdf9; border: 1px solid var(--line); border-radius: 8px; text-align: left; text-decoration: none; }
.culture-backlink:is(:hover, :focus-visible) { border-color: var(--route-deep, var(--ink)); color: #fffdf8; background: var(--route-deep, var(--ink)); text-decoration: none; }
.culture-backlink:is(:hover, :focus-visible) :is(strong, small) { color: inherit; }
.culture-backlink span:last-child { display: grid; gap: 2px; }
.culture-backlink small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.culture-detail-id { margin: 8px 0 0; color: var(--muted); font: .68rem var(--font-code); overflow-wrap: anywhere; }
.culture-ai-boundary { margin: 14px 0 22px; padding: 13px; color: #644b16; background: var(--gold-pale); border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0; }
.culture-ai-boundary p { margin: 5px 0 0; font-size: .82rem; line-height: 1.5; }
.culture-detail-section { margin: 0 0 24px; }
.culture-detail-section > h3 { margin-top: 4px; }
.culture-reader-context { margin: 0; padding: 15px; color: #193d4f; background: var(--blue-pale); border: 1px solid #aac8d3; border-radius: 10px; font: 1rem/1.62 var(--font-editorial); }
.culture-text-block { margin: 10px 0; padding: 13px; background: #14232c; border: 1px solid #304751; border-radius: 10px; color: #edf4f4; }
.culture-text-block header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.culture-text-block header code { color: #9fb8c1; font-size: .65rem; }
.culture-text-block mark { display: inline-block; margin: 11px 0 4px; padding: 4px 6px; color: #3c2e0e; background: #f5d98e; border-radius: 4px; font-size: .78rem; }
.culture-text-block blockquote { margin: 8px 0; padding-left: 13px; white-space: pre-wrap; overflow-wrap: anywhere; color: white; border-left: 3px solid #70b7c9; font: .91rem/1.58 var(--font-editorial); }
.culture-text-block details { color: #bfd0d5; font-size: .74rem; }
.culture-text-block details summary { cursor: pointer; color: #e6bd70; }
.culture-text-block .key-values { margin-top: 10px; }
.culture-text-block .key-values dt { color: #9fb8c1; }
.culture-text-block .key-values dd { overflow-wrap: anywhere; color: white; }
.culture-date-line { padding: 9px 11px; background: #f5f1e8; border-radius: 7px; }
.culture-boundaries { padding: 14px; background: #fff7e6; border-left: 4px solid var(--gold); border-radius: 0 9px 9px 0; }
.culture-anchor-list { display: flex; flex-wrap: wrap; gap: 6px; }
.culture-manual-ref { margin: 9px 0; padding: 12px; background: #f7f2e6; border: 1px solid var(--line); border-radius: 9px; }
.culture-manual-ref strong { display: block; margin: 7px 0 0; }
.culture-manual-ref blockquote { margin: 7px 0 0; font: .9rem/1.5 var(--font-editorial); }
.source-note { display: inline-grid; gap: 2px; max-width: 100%; padding: 7px 9px; background: #f2eee4; border-radius: 7px; }
.source-note code { overflow-wrap: anywhere; font-size: .65rem; }
.source-note small { color: var(--muted); }
.external-source-list { display: grid; gap: 7px; margin-top: 12px; }
.external-source { display: grid; gap: 3px; padding: 10px; color: var(--ink); background: var(--panel-cool); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.external-source:hover { border-color: var(--blue); }
.external-source span { color: var(--muted); font-size: .74rem; line-height: 1.4; }
.culture-empty { grid-column: 1 / -1; }

.document-list { display: grid; gap: 6px; margin-top: 11px; }
.document-list button { display: grid; gap: 3px; width: 100%; padding: 9px 10px; color: var(--ink); background: #faf7ef; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.document-list button:hover { background: white; border-color: var(--line-strong); }
.document-list small { color: var(--muted); overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   Ermittlungsakte 02–14: gemeinsames Dossier- und Markenbild
   Modulfarben ordnen die Navigation. Beleg-, Status- und Richtungsfarben
   behalten unabhängig davon ihre fachliche Bedeutung.
   ------------------------------------------------------------------------- */
body {
  --route-accent: var(--gold);
  --route-accent-ink: var(--gold-ink);
  --route-secondary: var(--blue);
  --route-deep: #263943;
  --route-soft: #eee8dc;
  --route-line: #c9b992;
  --route-mark: "";
}
body[data-route="atlas"]       { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"02"; }
body[data-route="rooms"]       { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"03"; }
body[data-route="actors"]      { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"04"; }
body[data-route="relations"]   { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"05"; }
body[data-route="objects"]     { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"06"; }
body[data-route="dialogues"]   { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"07"; }
body[data-route="timeline"]    { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"08"; }
body[data-route="mechanics"]   { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"09"; }
body[data-route="walkthrough"] { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"10"; }
body[data-route="media"]       { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"11"; }
body[data-route="protection"]  { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"12"; }
body[data-route="trivia"]      { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"13"; }
body[data-route="research"]    { --route-accent:#216b78; --route-accent-ink:#16525d; --route-secondary:#b07a25; --route-deep:#183f48; --route-soft:#dcecee; --route-line:#9fc4ca; --route-mark:"14"; }

body[data-route]:not([data-route="overview"]) {
  background:
    radial-gradient(circle at 74% calc(var(--topbar-h) + 20px), var(--route-soft), transparent 29rem),
    var(--paper);
}

/* One compact heading for sections 02–15. The overview remains a separate hero.
   Shared outer alignment also keeps the atlas/worldflow headers from jumping. */
body[data-route]:not([data-route="overview"]) .workspace {
  padding-top: 16px;
  padding-left: clamp(18px, 3vw, 52px);
  padding-right: clamp(18px, 3vw, 52px);
}
body[data-route]:not([data-route="overview"]) #routeContent > .page-head {
  position: relative;
  isolation: isolate;
  min-height: 132px;
  align-items: center;
  gap: 10px 18px;
  margin: 0 0 10px;
  overflow: visible;
  padding: 10px 70px 10px 16px;
  background:
    linear-gradient(112deg, var(--route-soft) 0%, #fffdf8e8 56%, #fffdf7 100%),
    repeating-linear-gradient(90deg, transparent 0 47px, #16232c08 48px 49px);
  border: 1px solid var(--route-line);
  border-left: 6px solid var(--route-accent);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px #16232c10;
}
body[data-route]:not([data-route="overview"]) #routeContent > .page-head::before {
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: 5px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(90deg, var(--route-accent), var(--route-secondary) 46%, transparent 82%);
  content: "";
}
body[data-route]:not([data-route="overview"]) #routeContent > .page-head::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 17px;
  color: var(--route-deep);
  content: var(--route-mark);
  font: 900 4rem/1 var(--font-code);
  letter-spacing: -.12em;
  opacity: .065;
  transform: translateY(-52%);
  pointer-events: none;
}
body[data-route]:not([data-route="overview"]) #routeContent > .page-head > * { position: relative; z-index: 1; }
body[data-route]:not([data-route="overview"]) #routeContent > .page-head > div:first-child { flex: 1 1 26rem; min-width: 0; }
body[data-route]:not([data-route="overview"]) #routeContent > .page-head .page-actions { flex: 0 1 auto; }
body[data-route]:not([data-route="overview"]) #routeContent > .page-head .page-kicker { color: var(--route-accent-ink); }
body[data-route]:not([data-route="overview"]) #routeContent > .page-head .page-title {
  max-width: 100%;
  margin: 3px 0 4px;
  color: var(--route-deep);
}
body[data-route]:not([data-route="overview"]) #routeContent > .page-head :is(.page-title, .page-lead, .page-kicker) {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-route]:not([data-route="overview"]) #routeContent > .page-head .page-lead { max-width: 100%; }
body[data-route]:not([data-route="overview"]) #routeContent > .page-head .button {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--route-deep);
  background: #fffdf7d9;
  border-color: var(--route-line);
  font-weight: 650;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 3px 10px #16232c0d;
}
body[data-route]:not([data-route="overview"]) #routeContent > .page-head .button:is(:hover, :focus-visible) {
  color: #fffdf8;
  background: var(--route-deep);
  border-color: var(--route-deep);
}
body[data-route]:not([data-route="overview"]) #routeContent > .page-head .button:is(:hover, :focus-visible) > :not(.evidence):not(.evidence-row):not(.badge) { color: inherit; }

body[data-route]:not([data-route="overview"]) .primary-nav > a.active {
  color: white;
  background: linear-gradient(90deg, #ffffff22, #ffffff0d);
  box-shadow: inset 4px 0 var(--route-accent);
}
body[data-route]:not([data-route="overview"]) .primary-nav > a.active span { color: #f7e1b2; }
body[data-route]:not([data-route="overview"]) #routeContent > .panel { box-shadow: 0 8px 24px #16232c0e; }
body[data-route]:not([data-route="overview"]) .section-title h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--route-deep);
}
body[data-route]:not([data-route="overview"]) .section-title h2::before {
  flex: 0 0 5px;
  width: 5px;
  height: 1.08em;
  background: linear-gradient(var(--route-accent), var(--route-secondary));
  border-radius: 99px;
  content: "";
}
body[data-route]:not([data-route="overview"]) :where(button, a, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--route-accent);
  outline-offset: 2px;
}
body[data-route]:not([data-route="overview"]) .inspector { border-left-color: var(--route-line); }
body[data-route]:not([data-route="overview"]) .inspector-head {
  background: linear-gradient(110deg, var(--route-soft), #fffdf8);
  border-top: 5px solid var(--route-accent);
  border-bottom-color: var(--route-line);
}
body[data-route]:not([data-route="overview"]) .inspector-kind { color: var(--route-accent-ink); }
body[data-route]:not([data-route="overview"]) .inspector-tabs { background: var(--route-soft); border-bottom-color: var(--route-line); }
body[data-route]:not([data-route="overview"]) .inspector-tabs button.active { background: var(--route-deep); }

body[data-route="atlas"] #routeContent > .atlas-shell { border:1px solid var(--route-line); border-radius:12px; background:#fffdf8; box-shadow:none; }
body[data-route="atlas"] .atlas-tabs button.active { background: var(--route-deep); border-color: var(--route-deep); }
body[data-route="atlas"] .room-node.selected .room-card { fill: var(--route-deep); stroke: var(--route-secondary); }

/* Gemeinsame Registerakte: Filter bleibt stehen, nur die Aktenliste scrollt. */
body[data-route]:not([data-route="overview"]) .register-layout {
  border-color: var(--route-line);
  border-top: 5px solid var(--route-accent);
  box-shadow: 0 12px 34px #16232c13;
}
body[data-route]:not([data-route="overview"]) .register-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--route-soft), #faf7f0 190px);
  border-color: var(--route-line);
}
#roomRegisterList, #actorRegisterList, #relationRegisterList, #objectRegisterList, #dialogueRegisterList { min-height: 0; overflow: auto; padding-right: 2px; scrollbar-gutter: stable; overscroll-behavior-y: auto; }
body[data-route]:not([data-route="overview"]) .register-list .filter-row {
  position: relative;
  z-index: 2;
  margin: -10px -10px 8px;
  padding: 12px 10px 10px;
  background: #fffdf7d9;
  border-bottom: 1px solid var(--route-line);
  backdrop-filter: blur(7px);
}
body[data-route]:not([data-route="overview"]) .register-list .filter-row :is(input, select):focus { border-color: var(--route-accent); }
body[data-route]:not([data-route="overview"]) .register-list button { position: relative; min-height: 43px; margin: 2px 0; border: 1px solid transparent; }
body[data-route]:not([data-route="overview"]) .register-list button strong {
  min-width: 2.2em;
  color: var(--route-accent-ink);
  font: 850 .73rem/1.35 var(--font-code);
}
body[data-route]:not([data-route="overview"]) .register-list button:hover {
  background: #ffffffbd;
  border-color: var(--route-line);
  box-shadow: none;
}
body[data-route]:not([data-route="overview"]) .register-list button.active {
  color: white;
  background: var(--route-deep);
  border-color: var(--route-deep);
  box-shadow: inset 4px 0 var(--route-accent), 0 5px 14px #16232c20;
}
body[data-route]:not([data-route="overview"]) .register-list button.active strong { color: #fff2cb; }
body[data-route]:not([data-route="overview"]) .register-content {
  background: linear-gradient(145deg, #fffdf8 0%, #fffdf7 70%, var(--route-soft) 160%);
}
body[data-route]:not([data-route="overview"]) .register-content > h2 { color: var(--route-deep); }
body[data-route]:not([data-route="overview"]) .register-content > h3 {
  margin-top: 28px;
  padding-top: 12px;
  color: var(--route-deep);
  border-top: 1px solid var(--route-line);
}
body[data-route]:not([data-route="overview"]) .register-content > .card + .card { margin-top: 10px; }
body[data-route]:not([data-route="overview"]) .metric-grid > div {
  background: linear-gradient(145deg, white, var(--route-soft));
  border-color: var(--route-line);
  border-top: 3px solid var(--route-accent);
}
body[data-route]:not([data-route="overview"]) .metric-grid strong { color: var(--route-accent-ink); }
body[data-route]:not([data-route="overview"]) .quote {
  padding: 14px 16px;
  background: var(--route-soft);
  border-left: 5px solid var(--route-accent);
  border-radius: 0 9px 9px 0;
}

/* Figuren: die JS-Klassen heißen state-* und capability-*. */
.actor-state.state-ability, .actor-state.state-perception { border-left-color: var(--teal); background: #f2faf7; }
.actor-state.state-protection, .actor-state.state-access, .actor-state.state-authority { border-left-color: var(--gold); background: #fff9eb; }
.actor-state.state-condition, .actor-state.state-structure, .actor-state.state-mechanic { border-left-color: var(--blue); background: #f3f8fa; }
.actor-state.state-blocker { border-left-color: var(--red); background: #fff7f5; }
.actor-state.state-agenda, .actor-state.state-story { border-left-color: var(--purple); background: #fbf6fc; }
.actor-state.state-unknown { border-left-color: #8f8692; border-style: dashed; background: #f3f0f2; }
.actor-capability.capability-ability, .actor-capability.capability-perception { border-left-color: var(--teal); }
.actor-capability.capability-protection, .actor-capability.capability-access, .actor-capability.capability-authority { border-left-color: var(--gold); }
.actor-capability.capability-blocker { border-left-color: var(--red); }
.actor-capability.capability-agenda, .actor-capability.capability-story { border-left-color: var(--purple); }
.actor-capability.capability-condition, .actor-capability.capability-structure, .actor-capability.capability-mechanic { border-left-color: var(--blue); }
.actor-capability.capability-unknown { border-left-color: #8f8692; border-style: dashed; }
.actor-unresolved-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 7px; padding: 0 0 13px; }
.actor-unresolved-list > span { padding: 8px 9px; background: white; border: 1px solid #d9d1d8; border-radius: 7px; font-size: .75rem; }

/* Beziehungen teilen die Petrol-Bedienfamilie; Blau/Rot bleiben Richtungsbelege. */
body[data-route="relations"] .relation-graph { background: radial-gradient(circle at 50% 46%, white, var(--route-soft) 78%); }
body[data-route="relations"] .relation-node[data-relation-actor] { cursor: pointer; }
body[data-route="relations"] .relation-node circle { transition: fill .14s ease, stroke .14s ease, filter .14s ease; }
body[data-route="relations"] .relation-node[data-relation-actor]:hover circle,
body[data-route="relations"] .relation-node[data-relation-actor]:focus-visible circle { fill: #fff; stroke: var(--route-accent); stroke-width: 3; filter: drop-shadow(0 3px 5px #183f4833); }
body[data-route="relations"] .relation-node.relation-self circle { fill: var(--route-deep); stroke: var(--route-deep); stroke-width: 2.5; opacity: .78; }
body[data-route="relations"] .relation-node.relation-self text { fill: #fff; }
body[data-route="relations"] .relation-node.selected circle { fill: var(--route-deep); stroke: var(--route-secondary); stroke-width: 4; filter: drop-shadow(0 0 7px #b07a2566); }
body[data-route="relations"] .relation-table thead { background: var(--route-soft); }
body[data-route="relations"] .relation-table tbody tr:hover { background: #f1f8f8; }
body[data-route="relations"] .mechanic-note { border-left-color: var(--route-accent); }

/* Weltabläufe: Themen und konkrete Vorgänge statt einer globalen Spieluhr. */
.worldflow-explorer { display: block; overflow: visible; overflow-anchor: none; min-width: 0; min-height: 0; margin: 0; border: 0; background: transparent; }
.worldflow-reading { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; }
.worldflow-collection { min-width: 0; padding: 18px 22px 12px; border: 0; background: transparent; }
.worldflow-collection h2 { margin: 0 0 4px; color: var(--route-deep); }
.worldflow-collection p { max-width: 75ch; margin: 0; color: var(--ink-soft); font-size: var(--type-small); line-height: 1.6; }
.worldflow-compact-picker { display: none; min-width: 0; }
.worldflow-compact-picker > div { display: grid; gap: 4px; min-width: 0; }
.worldflow-index-filter label { color: var(--route-accent-ink); font-size: var(--type-small); font-weight: 650; }
.worldflow-index-filter select { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 8px 32px 8px 11px; border: 1px solid var(--route-line); border-radius: 9px; color: var(--ink); background: #fffdf8; }
.worldflow-index-filter input { display: block; width: 100%; min-width: 0; min-height: 39px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; }
.worldflow-index-filter input:focus { border-color: var(--route-accent); }
.worldflow-layout { display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; }
.worldflow-stage { min-width: 0; min-height: 0; padding: clamp(18px, 2.2vw, 30px); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; overflow-wrap: anywhere; background: transparent; border-radius: 0; scroll-padding: 16px; }
.worldflow-stage:focus-visible, .worldflow-index-list:focus-visible { outline: 3px solid var(--route-accent); outline-offset: -4px; }
.worldflow-hero { margin-bottom: 22px; animation: worldflow-reveal .18s ease-out; }
@keyframes worldflow-reveal { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.worldflow-hero .page-kicker { color: var(--route-accent-ink); }
.worldflow-hero h2 { margin: 8px 0 12px; color: var(--route-deep); text-wrap: balance; }
.worldflow-hero p { margin: 0; max-width: 76ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.worldflow-time { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; margin: 18px 0; border: 1px solid var(--route-line); border-radius: 9px; background: var(--route-soft); color: var(--ink-soft); font-size: var(--type-small); line-height: 1.5; }
.worldflow-time > :is(p, span) { flex: 1 1 220px; min-width: 0; margin: 0; }
.worldflow-time > :is(strong, .badge) { flex: 0 0 auto; color: var(--route-accent-ink); }
.worldflow-context { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 22px 0; }
.worldflow-context > * { min-width: 0; }
.worldflow-context h3, .worldflow-related h3 { margin: 0 0 10px; color: var(--route-deep); font-size: var(--type-small); font-weight: 700; }
.worldflow-actors { display: flex; flex-wrap: wrap; align-content: start; gap: 7px; }
.worldflow-actors .chip { display: inline-flex; align-items: center; min-height: 44px; margin: 0; line-height: 1.35; white-space: normal; text-align: left; }
.worldflow-rooms { display: grid; gap: 7px; }
.worldflow-room { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 3px 10px; width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--route-line); border-radius: 10px; background: #fffdf8; color: var(--route-accent-ink); text-align: left; line-height: 1.4; overflow-wrap: anywhere; }
.worldflow-room > span { display: grid; place-items: center; grid-row: 1 / 3; width: 22px; height: 22px; align-self: center; border-radius: 999px; color: var(--route-accent-ink); background: var(--route-soft); font: 800 var(--type-caption)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.worldflow-room > strong { min-width: 0; font-size: var(--type-ui); font-weight: 650; }
.worldflow-room > small { grid-column: 2; min-width: 0; color: var(--ink-soft); font-size: var(--type-meta); }
.worldflow-room:hover, .worldflow-room:focus-visible { color: #fffdf8; background: var(--route-deep); border-color: var(--route-deep); }
.worldflow-room:is(:hover, :focus-visible) > span { color: var(--route-deep); background: #f0c878; }
.worldflow-room:is(:hover, :focus-visible) > small { color: #e6f1f2; }
.worldflow-facts { margin: 18px 0; padding: 0 16px; border: 1px solid var(--route-line); border-radius: 10px; background: #fffdf8; font-size: var(--type-body); line-height: var(--type-leading); }
.worldflow-facts > summary { min-height: 44px; padding: 12px 0; color: var(--route-accent-ink); font-weight: 650; cursor: pointer; }
.worldflow-facts > dl { display: grid; grid-template-columns: minmax(105px, .3fr) minmax(0, 1fr); gap: 13px 20px; margin: 3px 0 17px; padding-top: 14px; border-top: 1px solid var(--route-line); }
.worldflow-facts dt { color: var(--ink-soft); font-weight: 800; }
.worldflow-facts dd { min-width: 0; margin: 0; }
.worldflow-facts ul { padding-left: 18px; }
.worldflow-facts li + li { margin-top: 6px; }
.worldflow-facts dd > :first-child { margin-top: 0; }
.worldflow-facts dd > :last-child { margin-bottom: 0; }
.worldflow-outcome { margin: 22px 0; padding: 17px 20px; border-left: 5px solid var(--teal); border-radius: 0 10px 10px 0; color: #23464a; background: linear-gradient(110deg, #dfede8, #f1f7f1); font-size: .96rem; line-height: 1.58; }
.worldflow-outcome :is(h3, strong) { color: #225758; }
.worldflow-outcome h3 { margin: 0 0 8px; font-size: 1rem; }
.worldflow-outcome p { margin: 5px 0 0; }
.worldflow-dialogues { margin: 22px 0; padding: 0 16px; border: 1px solid #bdcfd8; border-radius: 10px; background: #f0f6f7; }
.worldflow-dialogues > summary { display: list-item; min-height: 44px; padding: 13px 0; color: #28556a; font-weight: 800; cursor: pointer; }
.worldflow-dialogues > :last-child { margin-bottom: 17px; }
.worldflow-dialogues > section + section { margin-top: 18px; padding-top: 14px; border-top: 1px solid #bdcfd8; }
.worldflow-dialogues figure { margin: 11px 0 14px; }
.worldflow-dialogues figcaption { margin: 0 0 5px; color: #436676; font-size: .73rem; font-weight: 750; line-height: 1.4; }
.worldflow-dialogues blockquote { margin: 0; padding: 9px 15px; border-left: 3px solid #6393a7; color: #244855; background: #ffffffb0; font: 500 1rem/1.6 var(--font-editorial); white-space: pre-line; }
.worldflow-dialogues blockquote p { margin: 0 0 8px; }
.worldflow-dialogues blockquote p:last-child { margin-bottom: 0; }
.worldflow-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; }
.worldflow-related h3 { flex: 1 1 100%; }
.worldflow-related > div { display: flex; flex-wrap: wrap; gap: 7px; }
.worldflow-stage :is(.button, .chip):not(.passive) { min-height: 44px; padding: 8px 14px; border: 1px solid var(--route-line); border-radius: 10px; color: var(--route-accent-ink); background: #fffdf8; white-space: normal; text-align: left; }
.worldflow-stage :is(.button, .chip):not(.passive):is(:hover, :focus-visible) { color: #fffdf8; background: var(--route-deep); border-color: var(--route-deep); }
.worldflow-index { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); min-width: 0; min-height: 0; padding: 10px; overflow: hidden; border-right: 1px solid var(--route-line); border-radius: 0 0 0 12px; background: linear-gradient(180deg, var(--route-soft), #faf7f0 190px); }
.worldflow-index h3 { margin: 2px 0 9px; color: var(--route-deep); }
.worldflow-index-filter { display: grid; gap: 8px; min-width: 0; padding: 0; }
.worldflow-index-count { margin: 7px 0 5px; color: var(--ink-soft); font-size: var(--type-meta); line-height: 1.5; }
.worldflow-index-list { display: grid; grid-auto-rows: max-content; align-content: start; gap: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding-right: 2px; overscroll-behavior-y: contain; scrollbar-gutter: stable; scroll-padding: 8px; }
.worldflow-item { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; min-height: 43px; margin: 2px 0; padding: 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.worldflow-item > span:first-child { display: block; min-width: 2.2em; color: var(--route-accent-ink); background: transparent; font: 850 .73rem/1.35 var(--font-code); font-variant-numeric: tabular-nums; }
.worldflow-item strong { display: block; }
.worldflow-item small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--type-meta); line-height: 1.5; }
.worldflow-item:hover { border-color: var(--route-line); background: #ffffffbd; box-shadow: none; }
.worldflow-item[aria-current="true"] { border-color: var(--route-deep); color: white; background: var(--route-deep); box-shadow: inset 4px 0 var(--route-accent), 0 5px 14px #16232c20; }
.worldflow-item[aria-current="true"] > span:first-child { color: #fff2cb; background: transparent; }
.worldflow-item[aria-current="true"] small { color: #dceae7; }
.worldflow-index-filter select:focus-visible, .worldflow-item:focus-visible, .worldflow-room:focus-visible { outline: 3px solid var(--route-accent); outline-offset: 3px; }
.route-card { position: relative; overflow: hidden; border-top: 4px solid var(--route-accent); }
.route-card::after { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--route-accent), var(--route-secondary), transparent); content: ""; }
.route-card-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.route-card-number { display: grid; place-items: center; width: 34px; height: 34px; color: var(--route-accent-ink); background: var(--route-soft); border: 1px solid var(--route-line); border-radius: 50%; font: 850 .7rem var(--font-code); }
.route-card ol { padding-left: 20px; color: var(--ink-soft); }
.route-card li { margin: 6px 0; line-height: 1.42; }

/* Starke Spezialmodule behalten ihre semantischen Binnenfarben. */
body[data-route="mechanics"] .mechanics-card { border-top-color: var(--route-accent); }
body[data-route="mechanics"] .mechanics-card.featured { border-top-color: var(--red); }
body[data-route="walkthrough"] .walkthrough-layout { border-color: var(--route-line); border-top: 5px solid var(--route-accent); }
body[data-route="walkthrough"] .walkthrough-register button.active { background: var(--route-deep); border-color: var(--route-deep); box-shadow: inset 4px 0 var(--route-accent), var(--shadow-sm); }
body[data-route="walkthrough"] .walkthrough-timing { border-top: 4px solid var(--blue); }
body[data-route="walkthrough"] .walkthrough-toolkit { border-top: 4px solid var(--teal); }
body[data-route="walkthrough"] .walkthrough-dependencies { border-top: 4px solid var(--gold); }
body[data-route="walkthrough"] .walkthrough-profiles { border-top: 4px solid var(--green); }

body[data-route="media"] :is(.media-video, .music-comparison, .compare-table) { border-color: var(--route-line); border-top: 5px solid var(--route-accent); }
body[data-route="media"] .media-audio-card[data-platform="DOS"] { border-top-color: var(--gold); }
body[data-route="media"] .media-audio-card[data-platform="Amiga"] { border-top-color: #95517f; }
body[data-route="media"] .media-audio-card[data-platform="Atari ST"] { border-top-color: var(--teal); }
body[data-route="media"] .graphics-guide[data-platform*="DOS"] { border-top-color: var(--gold); }
body[data-route="media"] .graphics-guide[data-platform="Amiga"] { border-top-color: #95517f; }
body[data-route="media"] .graphics-guide[data-platform="Atari ST"] { border-top-color: var(--teal); }
body[data-route="media"] .media-video { color: white; background: linear-gradient(120deg, #142331, var(--route-deep)); }
body[data-route="media"] .media-video h2 { color: white; }
body[data-route="media"] .media-video p { color: #d9e5ed; }
body[data-route="media"] .media-source-cards .card { background: #fffdf8; border: 1px solid var(--route-line); border-radius: 12px; box-shadow: none; }
body[data-route="media"] .image-zoom:focus-visible { outline-color: var(--route-accent); }
body[data-route="media"] .media-picture-table { overflow: hidden; }
body[data-route="media"] .media-picture-table > .table-scroll { overflow-x: auto; scrollbar-gutter: stable; }
body[data-route="media"] .media-picture-table table { min-width:1120px; }
#mediaDetail { scroll-margin-top:calc(var(--topbar-h) + 16px); }
body[data-route="media"] .media-picture-table > .table-scroll th:first-child { position: sticky; left: 0; z-index: 2; background: var(--route-soft); box-shadow: 5px 0 8px #16232c0b; }

/* 11 keeps its comparison layout; controls share the room readers' Petrol UI.
   Platform, missing-resource and evidence colors remain semantic exceptions. */
body[data-route="media"] :is(.media-grid, .graphics-guides, .media-source-cards) {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
body[data-route="media"] .music-grid { grid-template-columns: minmax(0, 1fr); }
body[data-route="media"] .media-audio-card[data-platform] {
  border: 1px solid var(--route-line); border-radius: 12px; box-shadow: none;
}
body[data-route="media"] .media-summary {
  margin: 0 0 18px; padding: 16px 18px; color: var(--ink); background: var(--route-soft);
  border: 1px solid var(--route-line); border-radius: 12px;
}
body[data-route="media"] .media-summary > span,
body[data-route="media"] .media-card-label {
  display: block; margin-bottom: 7px; color: var(--route-accent-ink);
  font-size: .72rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase;
}
body[data-route="media"] .media-summary p,
body[data-route="media"] .media-section-lead { margin: 0; color: var(--ink-soft); line-height: 1.6; }
body[data-route="media"] .media-comparison-findings { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
body[data-route="media"] .media-comparison-findings .card { margin: 0; border: 1px solid var(--route-line); border-radius: 12px; box-shadow: none; }
body[data-route="media"] .media-source-card { align-items: stretch; padding: 18px; }
body[data-route="media"] .media-source-card h3 { margin: 0 0 9px; color: var(--route-deep); font: 750 1.1rem/1.25 var(--font-editorial); }
body[data-route="media"] .media-source-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
body[data-route="media"] .media-source-action { margin-top: auto; padding-top: 16px; }
body[data-route="media"] :is(.media-card, .graphics-guide, .media-source-cards .card, .media-video > div) { min-width: 0; }
body[data-route="media"] :is(.media-card, .graphics-guide) { border-color: var(--route-line); }
body[data-route="media"] .media-audio-card h2 { min-height: 0; color: var(--route-deep); }
body[data-route="media"] .media-role { min-height: 0; }
body[data-route="media"] .media-disclosure {
  margin: 14px 0 0; border: 1px solid var(--route-line); border-radius: 10px; background: var(--route-soft);
}
body[data-route="media"] .media-disclosure summary {
  min-height: 44px; padding: 10px 12px; border-radius: 10px; color: var(--route-accent-ink);
  overflow-wrap: anywhere;
}
body[data-route="media"] .media-disclosure summary:is(:hover, :focus-visible),
body[data-route="media"] .media-disclosure[open] > summary { color: #fffdf8; background: var(--route-deep); }
body[data-route="media"] .media-disclosure-body { padding: 2px 14px 14px; }
body[data-route="media"] :is(.media-disclosure-body h3, .graphics-guide h3) { color: var(--route-deep); }
body[data-route="media"] .compare-table .section-title { flex-wrap: wrap; align-items: center; }
body[data-route="media"] .compare-table .section-title > div { flex: 1 1 20rem; min-width: 0; }
body[data-route="media"] .table-scroll {
  max-width: 100%; overflow-x: auto; scrollbar-gutter: stable;
  scrollbar-color: var(--route-line) var(--route-soft);
}
body[data-route="media"] .data-table thead { color: var(--route-accent-ink); background: var(--route-soft); }
body[data-route="media"] .media-picture-table tbody th strong { color: var(--route-accent-ink); }
body[data-route="media"] .image-zoom { border-color: var(--route-line); border-radius: 10px; }
body[data-route="media"] .image-zoom > span { color: var(--route-accent-ink); background: #fffdf8; }
body[data-route="media"] .image-zoom > span strong { color: inherit; }
body[data-route="media"] .image-zoom > span small { color: var(--ink-soft); }
body[data-route="media"] .image-zoom:is(:hover, :focus-visible) { outline-color: var(--route-accent); }
body[data-route="media"] .image-zoom:is(:hover, :focus-visible) > span { color: #fffdf8; background: var(--route-deep); }
body[data-route="media"] .image-zoom:is(:hover, :focus-visible) > span small { color: inherit; }
body[data-route="media"] :is(.media-disclosure summary, .table-scroll):focus-visible { outline: 3px solid var(--route-accent); outline-offset: 3px; }
body[data-route="media"] :is(.media-image-head, .media-image-provenance) { background: var(--route-deep); border-color: var(--route-line); }
body[data-route="media"] :is(.media-image-head, .document-dialog-actions) .icon-button {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px;
  padding: 0; color: var(--route-accent-ink); background: #fffdf8; border: 1px solid var(--route-line); border-radius: 10px;
}
body[data-route="media"] :is(.media-image-head, .document-dialog-actions) .icon-button:is(:hover, :focus-visible) {
  color: #fffdf8; background: var(--route-accent-ink); outline: 3px solid var(--route-line); outline-offset: 3px;
}
@media (max-width: 680px) {
  body[data-route="media"] :is(.music-comparison, .compare-table, .media-video) { padding: 14px; }
  body[data-route="media"] .media-picture-table > .table-scroll th:first-child { position: static; }
}

body[data-route="protection"] :is(.protection-primer, .protection-compare) { border-color: var(--route-line); border-top: 5px solid var(--route-accent); }
body[data-route="protection"] .protection-primer { background: linear-gradient(130deg, #fffdf8, var(--route-soft)); }
body[data-route="protection"] .protection-step > span { background: var(--route-deep); }
body[data-route="protection"] .protection-context { border-top: 4px solid var(--route-accent); }
body[data-route="protection"] .protection-card[data-protection-card="dos-original"] { border-top-color: var(--gold); }
body[data-route="protection"] .protection-card[data-protection-card="atari-st"] { border-top-color: var(--teal); }
body[data-route="protection"] .protection-card[data-protection-card="amiga-original"] { border-top-color: #416a7b; }
body[data-route="protection"] .protection-card[data-protection-card="amiga-razor-1911"] { border-top-color: var(--red); }
body[data-route="protection"] .protection-card[data-protection-card="amiga-crystal"] { border-top-color: var(--purple); }
body[data-route="protection"] .protection-card[data-protection-card="amiga-skid-row"] { border-top-color: var(--green); }

body[data-route="trivia"] .culture-primer { border-color: var(--route-line); border-left-color: var(--route-accent); background: linear-gradient(120deg, #fffdf7, var(--route-soft)); }
body[data-route="trivia"] .culture-topic { border-top: 4px solid var(--route-accent); }
body[data-route="trivia"] .culture-topic:hover,
body[data-route="trivia"] .culture-topic:focus-visible,
body[data-route="trivia"] .culture-topic.active { border-color: var(--route-accent); background: var(--route-soft); box-shadow: 0 7px 18px #4a2d4a18; }
body[data-route="trivia"] .culture-timeline { border-top: 5px solid var(--route-accent); }

.technical-disclosure { overflow: hidden; background: #f7f3ea; border: 1px solid var(--route-line); border-radius: 9px; }
.technical-disclosure > summary { padding: 12px 14px; color: var(--route-accent-ink); background: var(--route-soft); cursor: pointer; font-weight: 800; }
.technical-disclosure > pre { margin: 0; border-radius: 0; }
.culture-backlink:focus-visible, .external-source:focus-visible { border-color: var(--route-accent); }

/* Quellen: independent topic navigation and document reading panes. */
/* Sources use the same control family as 02/03, without changing documents. */
body[data-route="research"] .document-dialog { border-color: var(--route-line); background: #fffdf8; }
body[data-route="research"] .document-dialog-head { background: var(--route-soft); border-color: var(--route-line); flex-wrap: wrap; }
body[data-route="research"] .document-dialog-head > div:first-child { flex: 1 1 220px; }
body[data-route="research"] #documentTitle { color: var(--route-deep); white-space: normal; overflow-wrap: anywhere; font: 650 var(--type-ui)/1.4 var(--font-ui); }
body[data-route="research"] .document-dialog-actions :is(.button, .icon-button) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  border: 1px solid var(--route-line); border-radius: 10px;
  color: var(--route-accent-ink); background: #fffdf8;
  font: 650 var(--type-ui)/var(--type-ui-leading) var(--font-ui);
}
body[data-route="research"] .document-dialog-actions .icon-button { padding: 8px; font-size: 1.25rem; }
body[data-route="research"] .document-dialog-actions :is(.button, .icon-button):is(:hover, :focus-visible) {
  color: #fffdf8; background: var(--route-deep); border-color: var(--route-deep);
}
body[data-route="research"] .document-dialog-actions :focus-visible { outline: 3px solid var(--route-accent); outline-offset: 3px; }
body[data-route="research"] #globalSearch { font: 600 var(--type-ui)/var(--type-ui-leading) var(--font-ui); }
/* Source register geometry is provided by RG-01/RD-01 in shell.css. */
body[data-route="research"] .research-group > span { min-width:0; overflow-wrap:anywhere; }
body[data-route="research"] .research-documents { align-content:start; gap:8px; min-width:0; margin:0; padding:0; }
body[data-route="research"] #researchDetail { scroll-margin-top:calc(var(--topbar-h) + 16px); }
body[data-route="research"] .research-documents button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--route-accent-ink);
  border: 1px solid var(--route-line);
  border-radius: 10px;
  background: #fffdf8;
}
body[data-route="research"] .research-documents button > span {
  min-width: 0;
  max-width: 75ch;
  color: inherit;
  font: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-route="research"] .research-documents button:is(:hover, :focus-visible) {
  border-color: var(--route-deep);
  background: var(--route-deep);
  color: #fffdf8;
}
body[data-route="research"] .research-explorer :is(a, button, select, [tabindex]):focus-visible {
  outline: 3px solid var(--route-accent);
  outline-offset: 3px;
}
@media print {
  body[data-route="research"] .research-documents button { break-inside:avoid; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

.inspector {
  position: fixed;
  z-index: 70;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -14px 0 40px #15222b20;
  transform: translateX(105%);
  transition: transform .22s ease;
}
body.inspector-open .inspector { transform: translateX(0); }
.inspector[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
body.protection-inspector-open .inspector { width: min(620px, 100vw); }
body.atlas-inspector-open .inspector { width: clamp(480px, 36vw, 560px); }
.inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.inspector-head h2 { margin: 3px 0 0; font: 750 1.45rem/1.1 var(--font-editorial); }
.inspector-head-actions { display: flex; gap: 7px; }
/* Room identity stays a passive badge; only the close control is interactive. */
body.room-inspector-open #inspectorKind.badge {
  color: var(--ink-soft);
  font: 800 var(--type-caption)/1.4 var(--font-ui);
  letter-spacing: .03em;
}
body.room-inspector-open #inspectorClose {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: #245d48;
  background: var(--green-pale);
  border-color: #9bc7ad;
  font: 600 1.5rem/1 var(--font-ui);
  text-align: center;
}
body.room-inspector-open #inspectorClose:is(:hover, :focus-visible) {
  color: #fffdf8;
  background: #245d48;
  border-color: #245d48;
}
body.room-inspector-open #inspectorClose:focus-visible { outline: 3px solid #245d48; outline-offset: 3px; }
.inspector-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #faf7ef; }
.inspector-tabs button { flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid transparent; border-radius: 7px; color: var(--ink-soft); background: transparent; font-size: .78rem; }
.inspector-tabs button.active { color: white; background: var(--ink); }
body.room-inspector-open .inspector-tabs { flex-wrap: wrap; overflow-x: visible; }
.room-inventory-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.tab-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; color: var(--ink-soft); background: #e7e3da; border-radius: 99px; font: 800 .63rem var(--font-code); }
.inspector-tabs button.active .tab-count { color: var(--ink); background: #f0c878; }
.inspector-body { min-height: 0; overflow: auto; padding: 18px; scrollbar-gutter: stable; overscroll-behavior-y: auto; }
.inspector-body h3 { margin: 20px 0 8px; font: 750 1.15rem var(--font-editorial); }
.inspector-body h3:first-child { margin-top: 0; }
.inspector-body ul { padding-left: 20px; }
.inspector-body li { margin: 6px 0; }

.document-dialog { width: min(1180px, calc(100vw - 34px)); height: min(860px, calc(100dvh - 34px)); padding: 0; overflow: hidden; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.document-dialog::backdrop { background: rgba(10, 18, 24, .72); backdrop-filter: blur(3px); }
.document-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr); }
.document-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: #f7f3e9; }
.document-dialog-head > div:first-child { min-width: 0; }
.document-dialog-head strong { display: block; max-width: 700px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-dialog-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.document-dialog iframe { width: 100%; height: 100%; border: 0; background: white; }
.media-image-dialog { width: min(1180px, calc(100vw - 34px)); max-height: calc(100vh - 34px); padding: 0; overflow: hidden; color: var(--ink); background: #10171b; border: 1px solid #53636a; border-radius: 16px; box-shadow: var(--shadow-lg); }
.media-image-dialog::backdrop { background: rgba(5, 10, 13, .86); backdrop-filter: blur(4px); }
.media-image-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.media-image-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; color: white; background: #17242b; border-bottom: 1px solid #405058; }
.media-image-head strong, .media-image-head span { display: block; }
.media-image-head strong { margin: 4px 0 2px; font: 750 1.1rem var(--font-editorial); }
.media-image-head #mediaImageMeta { color: #b6c3c8; font-size: .74rem; }
.media-image-stage { display: grid; place-items: center; min-height: 280px; padding: clamp(14px, 3vw, 34px); overflow: auto; background: radial-gradient(circle at center, #26343a, #090e11 70%); }
.media-image-stage img { width: auto; max-width: 100%; max-height: calc(100vh - 210px); object-fit: contain; image-rendering: pixelated; box-shadow: 0 16px 50px #000a; }
.media-image-provenance { margin: 0; padding: 10px 16px; overflow-wrap: anywhere; color: #aab8bd; background: #17242b; border-top: 1px solid #405058; font: .67rem/1.4 var(--font-code); }
.toast { position: fixed; z-index: 200; right: 18px; bottom: 18px; max-width: 360px; padding: 11px 14px; color: white; background: var(--ink); border-radius: 9px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(14px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.empty-state { display: grid; place-items: center; min-height: 360px; padding: 30px; color: var(--muted); text-align: center; }
.empty-state strong { display: block; color: var(--ink); font-size: 1.2rem; }
.mobile-only { display: none; }

@media (max-width: 1500px) {
}

@media (max-width: 1180px) {
  body.inspector-open .workspace { margin-right: 0; }
  body.protection-inspector-open .workspace { margin-right: 0; }
  body.culture-inspector-open .workspace { margin-right: 0; }
  .atlas-shell { width: 100%; height: 100%; }
  .inspector { width: min(500px, 92vw); }
  body.atlas-inspector-open .inspector { width: min(540px, 92vw); }
  body.culture-inspector-open .inspector { width: min(680px, 94vw); }
  .culture-topics { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 900px) {
  :root { --topbar-h: 62px; }
  .mobile-only { display: grid; }
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; padding: 8px 10px; }
  .brand-block { max-width: 260px; }
  .global-search-area { position: fixed; z-index: 90; top: calc(var(--topbar-h) + 8px); left: 10px; right: 10px; display: none; }
  body.search-open .global-search-area { display: block; }
  .search-results { max-height: calc(100dvh - var(--topbar-h) - 76px); }
  .protection-primer, .protection-footer-grid { grid-template-columns: 1fr; }
  .primary-nav { visibility: hidden; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 12px 0 35px #0005; }
  body.nav-open .primary-nav { visibility: visible; transform: translateX(0); }
  .workspace { margin-left: 0; padding: 24px 12px 50px; }
  body.route-atlas .workspace { padding: 10px 8px; }
  .hero { min-height: 430px; border-radius: 16px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  body[data-route]:not([data-route="overview"]) .workspace { padding-top: 12px; padding-left: 12px; padding-right: 12px; }
  body[data-route]:not([data-route="overview"]) #routeContent > .page-head { min-height: 0; align-items: stretch; padding: 10px 56px 10px 14px; }
  body[data-route]:not([data-route="overview"]) #routeContent > .page-head > div:first-child { flex-basis: auto; }
  body[data-route]:not([data-route="overview"]) #routeContent > .page-head::after { top: 12px; right: 12px; font-size: 3rem; transform: none; }
  .atlas-shell { grid-template-rows: auto minmax(0, 1fr); }
  .atlas-toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .atlas-toolbar > div:first-child { min-width: max-content; }
  body.atlas-inspector-open .inspector { width: min(560px, 94vw); }
  .register-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .register-content { max-height: none; overflow: visible; padding: 18px; }
  .register-list { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  body[data-route]:not([data-route="overview"]) .register-list { min-height: 220px; }
  .meta-grid { grid-template-columns: 1fr; }
  .meta-grid dd { margin-bottom: 8px; }
  .event-card { grid-template-columns: 1fr; gap: 5px; }
  .combat-primer, .combat-core-grid { grid-template-columns: 1fr; }
  .combat-matchup { grid-template-columns: 1fr; }
  .combat-versus { min-height: 46px; }
  .combat-versus i { width: 70%; height: 2px; }
  .combat-results { grid-template-columns: 1fr; }
  .combat-result-divider { min-height: 22px; }
  .combat-result-divider span { writing-mode: horizontal-tb; }
  .combat-run-toolbar { grid-template-columns: 1fr; }
  .combat-live-state { grid-template-columns: 1fr; }
  .combat-shoot-grid { grid-template-columns: 1fr; }
  .shoot-notes { grid-column: auto; }
  .dialogue-branch-grid { grid-template-columns: 1fr; }
  .media-video { grid-template-columns: 1fr; }
  .graphics-guides { grid-template-columns: 1fr; }
  .walkthrough-layout { grid-template-columns: 1fr; }
  .walkthrough-register { position: static; display: block; max-height: none; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .walkthrough-register > header, .walkthrough-register nav { position: static; }
  .walkthrough-register nav { grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); max-height: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: auto; overscroll-behavior-y: auto; scrollbar-gutter: auto; touch-action: pan-x pan-y; }
  .culture-primer { grid-template-columns: 1fr; }
  .culture-era-track { grid-template-columns: repeat(6, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
}

@media (max-width: 560px) {
  .brand-kicker { display: none; }
  .brand-block strong { font-size: .82rem; white-space: normal; line-height: 1.15; }
  .hero { padding: 24px; }
  body[data-route]:not([data-route="overview"]) #routeContent > .page-head { border-left-width: 4px; }
  body[data-route]:not([data-route="overview"]) #routeContent > .page-head .page-actions { width: 100%; }
  body[data-route]:not([data-route="overview"]) #routeContent > .page-head .page-actions .button { width: 100%; }
  .worldflow-collection { padding: 12px 14px; }
  .worldflow-context { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .worldflow-stage { padding: 20px 14px; }
  .worldflow-hero h2 { font-size: 1.6rem; }
  .worldflow-hero p { font-size: .92rem; }
  .worldflow-facts > dl { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .worldflow-facts dd { margin-bottom: 12px; }
  .worldflow-facts dd:last-child { margin-bottom: 0; }
  .worldflow-outcome { padding: 14px; }
  .culture-confidence-filter label { min-height: 44px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .atlas-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .combat-primer { padding: 21px 17px; }
  .combat-stat { grid-template-columns: 1fr; gap: 6px; }
  .combat-atlas > summary { align-items: flex-start; padding: 18px 15px; }
  .combat-atlas > summary p { display: none; }
  .combat-open-label { min-width: auto; padding: 7px 9px; }
  .combat-atlas-body { padding: 13px; }
  .combat-atlas-toolbar { align-items: stretch; flex-direction: column; }
  .combatant-card > header { grid-template-columns: 36px 1fr; }
  .combat-field-pair, .combat-adjustment-grid, .combat-result-metrics { grid-template-columns: 1fr; }
  .combatant-statline { grid-template-columns: repeat(2, minmax(70px,1fr)); }
  .combat-target-switch { align-items: stretch; flex-direction: column; }
  .combat-target-switch > div:last-child { display: grid; grid-template-columns: 1fr 1fr; border-radius: 9px; }
  .combat-lab-tabs { display: grid; grid-template-columns: 1fr; }
  .combat-run-readout { grid-template-columns: 1fr; }
  .combat-run-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .combat-live-actor > div, .combat-live-object > div { grid-template-columns: repeat(2,minmax(70px,1fr)); }
  .combat-log li { grid-template-columns: 1fr; }
  .shoot-notes ul { grid-template-columns: 1fr; }
  .combat-outcome-grid { grid-template-columns: 1fr; }
  .mechanics-boundaries > summary { align-items: flex-start; padding: 16px; }
  .mechanics-boundaries > div { padding: 0 16px 16px; }
  .dialogue-node { grid-template-columns: 1fr; }
  .dialogue-node-meta { border-right: 0; border-bottom: 1px solid #d8e2e4; }
  .dialogue-rng { grid-template-columns: 1fr; }
  .key-values { grid-template-columns: 1fr; gap: 3px; }
  .key-values dd { margin-bottom: 9px; }
  .walkthrough-timing, .walkthrough-toolkit, .walkthrough-dependencies, .walkthrough-profiles { padding: 16px; }
  .walkthrough-disclosure { padding: 0; }
  .walkthrough-disclosure > details > summary { align-items: flex-start; padding: 16px; }
  .walkthrough-disclosure-body { padding: 0 16px 16px; }
  .walkthrough-detail { padding: 18px 13px; }
  .walkthrough-phase > header { align-items: flex-start; flex-direction: column; }
  .walkthrough-phase dl { grid-template-columns: 1fr; }
  .walkthrough-phase dd { margin-bottom: 7px; }
  .walkthrough-alternative-columns, .walkthrough-end-grid { grid-template-columns: 1fr; }
  .walkthrough-sources { align-items: flex-start; flex-direction: column; }
  .walkthrough-sources .button-row { justify-content: flex-start; }
  .culture-stats { grid-template-columns: repeat(2, 1fr); }
  .culture-topics { grid-template-columns: 1fr; }
  .culture-related-head { flex-direction: column; }
  .culture-confidence-filter { display: grid; grid-template-columns: 1fr 1fr; }
  .document-dialog, .media-image-dialog, .protection-records-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .document-dialog-head { gap: 8px; padding: 10px; }
  .document-dialog-actions .button { padding: 7px; font-size: .75rem; }
}

/* Short windows and browser zoom keep the page scrollable with a usable map. */
@media (max-height: 760px), (max-width: 900px) {
  body.route-atlas .workspace { height: auto; min-height: calc(100dvh - var(--topbar-h)); overflow: visible; }
  body.route-atlas #routeContent { display: block; height: auto; }
  body.route-atlas .atlas-shell { height: auto; grid-template-rows: auto minmax(320px, 55dvh); }
  body.route-atlas .atlas-viewport { min-height: 320px; }
  .media-image-stage { min-height: 0; }
}
@media (max-height: 500px) {
  .inspector { overflow: auto; grid-template-rows: auto auto minmax(150px, 1fr); }
  .inspector-head { padding-top: 10px; padding-bottom: 8px; }
  .inspector-tabs { padding-block: 5px; }
  .media-image-dialog[open], .protection-records-dialog[open] { overflow: auto; grid-template-rows: auto minmax(120px, 1fr) auto; }
}

/* 12: existing dossiers and handbook table share the Petrol reading surfaces. */
body[data-route="protection"] .protection-primer {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
body[data-route="protection"] .protection-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
body[data-route="protection"] :is(.protection-step, .protection-context, .protection-finding) {
  min-width: 0; border-color: var(--route-line);
}
body[data-route="protection"] .protection-step {
  grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
}
body[data-route="protection"] :is(.protection-step > span, .protection-record-marker) {
  display: inline-grid; place-items: center; min-width: 22px; width: auto;
  height: 22px; padding: 0 4px; border-radius: 6px;
  font: 800 var(--type-caption)/1 var(--font-ui); font-variant-numeric: tabular-nums;
  color: var(--route-accent-ink); background: var(--route-soft);
  white-space: nowrap;
}
body[data-route="protection"] .protection-step > span {
  color: #fffdf8; background: var(--route-deep); margin-top: 3px;
}
body[data-route="protection"] :is(.protection-primer blockquote, .protection-detail-section.technical) {
  color: var(--route-deep); background: var(--route-soft); border-left-color: var(--route-accent);
}
body[data-route="protection"] :is(.protection-primer h2, .protection-context h2, .protection-card h3) {
  color: var(--route-deep);
}
body[data-route="protection"] .protection-finding header { flex-wrap: wrap; }
body[data-route="protection"] .protection-records-dialog { border-color: var(--route-line); }
body[data-route="protection"] :is(.protection-records-head, .protection-records-foot, #inspector .inspector-head) {
  background: var(--route-soft); border-color: var(--route-line);
}
body[data-route="protection"] :is(#inspectorClose, #protectionRecordsClose) {
  display: inline-grid; place-items: center; flex: 0 0 44px;
  width: 44px; height: 44px; padding: 0; border-radius: 10px;
  color: var(--route-accent-ink); background: #fffdf8; border: 1px solid var(--route-line);
}
body[data-route="protection"] :is(#inspectorClose, #protectionRecordsClose):is(:hover, :focus-visible) {
  color: #fffdf8; background: var(--route-deep); border-color: var(--route-deep);
}
body[data-route="protection"] :is(#inspectorClose, #protectionRecordsClose, .table-scroll, .inspector-tabs button):focus-visible {
  outline: 3px solid var(--route-accent); outline-offset: 3px;
}
body[data-route="protection"] .table-scroll {
  min-width: 0; scrollbar-color: var(--route-accent) var(--route-soft);
}
body[data-route="protection"] .protection-records-table-wrap {
  max-height: none; border-color: var(--route-line);
}
body[data-route="protection"] .protection-records-body {
  display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
}
body[data-route="protection"] .protection-records-table :is(th, td) {
  padding: 10px 12px; text-align: center;
}
body[data-route="protection"] .protection-records-table :is(th, td):nth-child(2),
body[data-route="protection"] .protection-records-table :is(th, td):nth-child(7) { text-align: left; }
body[data-route="protection"] .protection-records-table thead th {
  color: var(--route-deep); background: var(--route-soft);
}
@media (max-width: 1100px) {
  body[data-route="protection"] .protection-primer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px), (max-height: 650px) {
  body[data-route="protection"] .protection-records-dialog[open] {
    display: flex; flex-direction: column; overflow: auto;
  }
  body[data-route="protection"] .protection-records-body { display: block; overflow: visible; }
  body[data-route="protection"] .protection-records-table-wrap { max-height: 55dvh; }
}

/* Shared Petrol UI: room readers, figure register and relationships. Semantic
   badges, evidence colors, hazards and SVG map sizing remain independent. */
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent, body[data-route="media"] #routeContent, body[data-route="media"] .document-dialog-actions) :is(a.chip, button.chip, a.button, button.button):not(.passive) {
  min-height: 44px; padding: 8px 12px; gap: 6px;
  color: var(--route-accent-ink); background: #fffdf8;
  border: 1px solid var(--route-line); border-radius: 999px;
  text-decoration: none; white-space: normal; overflow-wrap: anywhere;
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent, body[data-route="media"] #routeContent, body[data-route="media"] .document-dialog-actions) :is(a.button, button.button):not(.passive) {
  padding: 8px 14px; border-radius: 10px;
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent, body[data-route="media"] #routeContent, body[data-route="media"] .document-dialog-actions) :is(a.chip, button.chip, a.button, button.button):not(.passive):is(:hover, :focus-visible) {
  color: #fffdf8; background: var(--route-deep); border-color: var(--route-deep);
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent, body[data-route="media"] #routeContent, body[data-route="media"] .document-dialog-actions) :is(a.chip, button.chip, a.button, button.button):not(.passive):focus-visible {
  outline: 3px solid var(--route-accent); outline-offset: 3px;
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent) .inspector-tabs {
  flex-wrap: wrap; gap: 6px; padding: 8px 12px; overflow: visible;
  background: var(--route-soft); border-color: var(--route-line);
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent) .inspector-tabs button {
  min-height: 44px; padding: 8px 12px; gap: 6px; border-radius: 10px;
  align-items: center; color: var(--route-accent-ink); border-color: transparent;
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent) .inspector-tabs button:is(:hover, :focus-visible) {
  background: #fffdf8; border-color: var(--route-line);
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent) .inspector-tabs button.active {
  color: #fffdf8; background: var(--route-deep); border-color: var(--route-deep);
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent) .tab-count {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  min-width: 22px; height: 22px; padding: 0 4px;
  font: 800 var(--type-caption)/1 var(--font-ui); font-variant-numeric: tabular-nums;
  color: var(--route-accent-ink); background: #fffdf8;
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent) .inspector-tabs button.active .tab-count {
  color: var(--route-deep); background: #f0c878;
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent) :is(.quote, .room-reading-head h2, .relation-reading-head h2, .dialogue-reading-head h2, #inspectorTitle) {
  color: var(--route-deep);
}
:is(body[data-route="protection"] #routeContent, body[data-route="protection"] #inspector, body[data-route="protection"] .protection-records-dialog, body[data-route="protection"] .document-dialog-actions, body[data-route="atlas"].room-inspector-open #inspector, body[data-route="rooms"] #roomRegisterContent, body[data-route="actors"] #actorRegisterContent, body[data-route="relations"] #relationRegisterContent, body[data-route="dialogues"] #dialogueRegisterContent) .quote {
  background: var(--route-soft); border-left-color: var(--route-accent);
}

/* Figures reuse the room controls without changing evidence or hazard colors. */
body[data-route="actors"] #actorRegisterContent .chip.passive {
  color: var(--route-accent-ink); background: var(--route-soft); border-color: var(--route-line);
  white-space: normal; overflow-wrap: anywhere;
}
body[data-route="actors"] #actorRegisterContent .actor-state-link { display: inline-flex; align-items: center; }
.actor-capability-source { margin: 0 0 10px; }
/* Noninteractive notation belongs to the same palette, but is not a button.
   Leave original game passages and raw JSON/code blocks untouched. */
body[data-route="actors"] #actorRegisterContent :is(.actor-capability, .actor-unresolved-list, .actor-state-note) code {
  color: var(--route-accent-ink); background: var(--route-soft);
  padding: 2px 6px; border: 0; border-radius: 6px;
  font: 500 var(--type-small)/1.5 var(--font-code);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
body[data-route="actors"] #actorRegisterContent button.chip.actor-function-link {
  font-family: var(--font-code);
}
.actor-unresolved-list { display: grid; gap: 10px; padding-bottom: 12px; }
.actor-unresolved-list > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body[data-route="actors"] #actorRegisterContent a.chip.actor-state-link.actor-inline-ref {
  display: inline; min-height: 24px; padding: 1px 7px;
  font-size: var(--type-inline-chip); line-height: 1.35;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
body[data-route="actors"] #actorRegisterContent .actor-capability-grid { grid-template-columns: repeat(auto-fit, minmax(min(245px, 100%), 1fr)); }
body[data-route="actors"] #actorRegisterContent .actor-capability { min-width: 0; border-color: var(--route-line); border-left-color: var(--route-accent); }
body[data-route="actors"] #actorRegisterContent .actor-capability.capability-blocker { border-left-color: var(--red); }
body[data-route="actors"] #actorRegisterContent .actor-capability.capability-unknown { border-left-color: #8f8692; }
body[data-route="actors"] #actorRegisterContent .actor-capability > header { flex-wrap: wrap; }
body[data-route="actors"] #actorRegisterContent > h2 { overflow-wrap: anywhere; }
body[data-route="actors"] #actorRegisterContent > .card + .card { margin-top: 14px; }
body[data-route="actors"] #actorRegisterContent :is(.quote, pre) { overflow-wrap: anywhere; }
/* Figure reader uses the object reader's facts, references and tab family.
   Only the body scrolls; names and navigation remain in view. */
body[data-route="actors"] #actorRegisterContent { padding: 0; min-height: 0; overflow: hidden; }
body[data-route="actors"] #actorRegisterContent > .actor-view {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; min-height: 0; overflow: hidden;
}
body[data-route="actors"] #actorRegisterContent .actor-reading-head { margin: 0; padding: 18px 22px 12px; }
.actor-reading-body { min-height: 0; padding: 20px 22px 24px; overflow: auto; scrollbar-gutter: stable; }
.actor-view .actor-aliases { color: var(--ink); }
/* Shared compact identity in figure dossiers and relationship records. */
.actor-identity { min-width: 0; }
.actor-identity > .badge { line-height: 1.4; }
.actor-identity .actor-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; min-width: 0; }
.actor-identity .actor-title-row > h2,
.actor-identity .actor-title-row > .actor-aliases { margin: 0; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.actor-view .actor-tabs a { gap: 6px; }
.actor-view .actor-tabs .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--obj-surface); color: var(--obj-ink); font-variant-numeric: tabular-nums; }
.actor-view .actor-tabs .active .tab-count { background: var(--obj-soft); }
.actor-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(125px, 100%), 1fr)); gap: 8px; margin: 12px 0; }
.actor-stat-grid > div { min-width: 0; padding: 12px; border: 1px solid var(--obj-line); border-radius: 11px; background: var(--obj-soft); }
.actor-stat-grid dt { color: var(--obj-deep); }
.actor-stat-grid dt span { display: block; color: var(--ink-soft); }
.actor-stat-grid dd { margin: 6px 0 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.actor-view .actor-values h3 .evidence-row { display: inline-flex; vertical-align: middle; }
/* Evidence belongs to its sentence/value, never a dedicated block row.
   Keep ordinary wrapping available on narrow screens. */
.actor-view .evidence-row { display: inline-flex; flex-wrap: nowrap; vertical-align: baseline; margin: 0 0 0 .25em; }
.actor-view .obj-facts > div > dd { display: block; }
.actor-view .obj-facts .obj-fact-value { display: inline; }
.actor-view .actor-state-list { display:flex; flex-wrap:wrap; gap:12px 7px; align-items:flex-start; }
.actor-view .actor-state-entry { display:inline-flex; line-height:1.4; }
.actor-view .actor-capability p { color: var(--ink); }
.actor-view .actor-capability :is(.capability-availability, .capability-live) { color: var(--ink-soft); }
.actor-view .obj-text-entry + .obj-text-entry { margin-top: 18px; }
.actor-mini .actor-reading-body { padding: 16px 0; overflow: visible; }
.actor-mini .actor-reading-head { padding: 0; }
@media print {
  body[data-route="actors"] #actorRegisterContent,
  body[data-route="actors"] #actorRegisterContent > .actor-view,
  .actor-reading-body { display: block; height: auto; overflow: visible; }
  .actor-tabs { display: none !important; }
}
@media (max-width: 900px), (max-height: 650px) {
  body[data-route="actors"] .actor-register { display: block; height: auto; overflow: visible; }
  body[data-route="actors"] .actor-register > .register-list { display: block; min-height: 0; max-height: none; border-right: 0; border-bottom: 1px solid var(--route-line); }
  #actorRegisterList { display: none; }
  body[data-route="actors"] .actor-register .filter-row { display: flex; margin: 0; padding: 12px 16px; }
  .actor-mobile-picker { display: grid; gap: 6px; padding: 12px 16px; }
  .actor-mobile-picker select { width: 100%; min-width: 0; min-height: 44px; }
  body[data-route="actors"] #actorRegisterContent { overflow: visible; padding: 0; }
  body[data-route="actors"] #actorRegisterContent > .actor-view { display: block; height: auto; overflow: visible; }
  body[data-route="actors"] #actorRegisterContent .actor-reading-head { padding: 16px; }
  .actor-reading-body { overflow: visible; padding: 16px; scrollbar-gutter: auto; }
}

/* Gesprächsbuch: dieselbe Petrol-Bedienfamilie wie Raum-, Figuren- und
   Beziehungsregister. Gesprächsarten behalten ihre semantischen Farben. */
body[data-route="dialogues"] .dialogue-register { grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); }
body[data-route="dialogues"] .dialogue-register > .register-list {
  grid-template-rows: auto minmax(0, 1fr);
}
body[data-route="dialogues"] .dialogue-filter {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
}
body[data-route="dialogues"] .dialogue-filter :is(input, select) {
  width: 100%; min-width: 0; min-height: 39px; padding: 8px 11px;
  color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 8px;
}
body[data-route="dialogues"] .dialogue-filter input { padding-right: 11px; }
body[data-route="dialogues"] .dialogue-filter select { padding-right: 34px; }
body[data-route="dialogues"] .dialogue-mobile-picker select {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px 34px 8px 11px;
  color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 8px;
}
body[data-route="dialogues"] .dialogue-count {
  margin: 0; color: var(--ink-soft); font-size: var(--type-small); line-height: 1.5;
}
body[data-route="dialogues"] .dialogue-mobile-picker { display: none; }
body[data-route="dialogues"] .dialogue-mobile-picker label { color: var(--route-accent-ink); font-weight: 650; }
body[data-route="dialogues"] #dialogueRegisterList {
  display: grid; grid-auto-rows: max-content; align-content: start; gap: 2px;
  overflow-x: hidden; scroll-padding: 4px;
}
body[data-route="dialogues"] #dialogueRegisterList button {
  grid-template-columns: 4.4em minmax(0, 1fr); align-items: start; gap: 10px;
  min-height: 43px; padding: 10px;
}
body[data-route="dialogues"] #dialogueRegisterList button > span {
  min-width: 0; line-height: inherit; overflow-wrap: anywhere;
}
body[data-route="dialogues"] #dialogueRegisterList .dialogue-register-id {
  white-space: nowrap;
}
body[data-route="dialogues"] #dialogueRegisterContent {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  padding: 0; overflow: hidden; scrollbar-gutter: auto;
  background: linear-gradient(145deg, #fffdf8 0%, #fffdf7 70%, var(--route-soft) 160%);
}
body[data-route="dialogues"] .dialogue-reading-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-width: 0; padding: 18px 22px 12px;
}
body[data-route="dialogues"] .dialogue-reading-head > div:first-child { min-width: 0; }
body[data-route="dialogues"] .dialogue-reading-head h2 { margin: 8px 0 0; color: var(--route-deep); }
body[data-route="dialogues"] .dialogue-reading-head .status-strip { flex: 0 0 auto; justify-content: flex-end; margin: 0; }
body[data-route="dialogues"] .dialogue-tabs { flex-wrap: wrap; gap: 6px; padding: 10px 16px; overflow: visible; }
body[data-route="dialogues"] .dialogue-tabs button { white-space: normal; }
body[data-route="dialogues"] .dialogue-reading-body {
  min-width: 0; min-height: 0; padding: 20px 22px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
  scrollbar-gutter: stable; scroll-padding: 18px;
}
body[data-route="dialogues"] .dialogue-reading-body > :is(p, dl, .condition-note, .technical-disclosure) { max-width: 75ch; }
body[data-route="dialogues"] .dialogue-intro { max-width: 75ch; color: var(--ink-soft); }
body[data-route="dialogues"] .dialogue-legend { border-color: var(--route-line); background: #fffdf8; }
body[data-route="dialogues"] .dialogue-legend .legend-speech { background: var(--route-accent); }
body[data-route="dialogues"] .dialogue-group:not(.dialogue-group-branching):not(.dialogue-group-conditional):not(.dialogue-group-action) { border-top-color: var(--route-accent); }
body[data-route="dialogues"] .dialogue-node:not(.dialogue-narration):not(.dialogue-unresolved) {
  border-color: var(--route-line); border-left-color: var(--route-accent); background: #f7fbfb;
}
body[data-route="dialogues"] .dialogue-node:not(.dialogue-narration):not(.dialogue-unresolved) .dialogue-node-meta {
  border-right-color: var(--route-line); background: var(--route-soft);
}
body[data-route="dialogues"] .dialogue-node:not(.dialogue-narration):not(.dialogue-unresolved) .dialogue-node-meta strong { color: var(--route-accent-ink); }
body[data-route="dialogues"] .dialogue-condition-overview { display: grid; gap: 14px; }
body[data-route="dialogues"] .dialogue-condition-card {
  min-width: 0; padding: 16px; border: 1px solid var(--route-line);
  border-left: 4px solid var(--route-accent); border-radius: 11px;
  background: #fffdf8; box-shadow: var(--shadow-sm);
}
body[data-route="dialogues"] .dialogue-condition-card > header,
body[data-route="dialogues"] .dialogue-condition-branch > header {
  display: flex; align-items: center; gap: 10px;
}
body[data-route="dialogues"] .dialogue-condition-card h3 { margin: 2px 0 0; color: var(--route-deep); }
body[data-route="dialogues"] .dialogue-step-marker {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  min-width: 22px; height: 22px; padding: 0 4px;
  color: #fffdf8; background: var(--route-deep); border-radius: 999px;
  font: 800 var(--type-caption)/1 var(--font-ui); font-variant-numeric: tabular-nums;
}
body[data-route="dialogues"] .dialogue-condition-branches {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; margin-top: 12px;
}
body[data-route="dialogues"] .dialogue-condition-branch {
  min-width: 0; padding: 12px; border: 1px solid #d7c5da;
  border-radius: 9px; background: #fcf8fd;
}
body[data-route="dialogues"] .dialogue-files .button-row { align-items: stretch; }
body[data-route="dialogues"] .dialogue-files .button-row > .button { flex: 0 1 260px; justify-content: center; }

@media (max-width: 1500px) {
  body[data-route="dialogues"] .dialogue-rng { grid-template-columns: minmax(0, 1fr); }
  body[data-route="dialogues"] .dialogue-rng > div { justify-content: flex-start; }
}

@media (max-width: 900px), (max-height: 650px) {
  body[data-route="dialogues"] .dialogue-register { display: block; height: auto; overflow: visible; }
  body[data-route="dialogues"] .dialogue-register > .register-list {
    display: block; min-height: 0; max-height: none; padding: 0; border-right: 0; border-bottom: 1px solid var(--route-line);
  }
  body[data-route="dialogues"] .dialogue-filter { margin: 0; padding: 12px 16px; }
  body[data-route="dialogues"] #dialogueRegisterList { display: none; }
  body[data-route="dialogues"] .dialogue-mobile-picker { display: grid; gap: 6px; padding: 0 16px 14px; }
  body[data-route="dialogues"] #dialogueRegisterContent { display: block; overflow: visible; }
  body[data-route="dialogues"] .dialogue-reading-head { flex-wrap: wrap; padding: 16px; }
  body[data-route="dialogues"] .dialogue-reading-head .status-strip { justify-content: flex-start; }
  body[data-route="dialogues"] .dialogue-reading-body { padding: 16px; overflow: visible; }
}

@media (max-width: 1180px), (max-height: 650px) {
  body[data-route="relations"] .relation-register { display: block; height: auto; overflow: visible; }
  body[data-route="relations"] .relation-register > .register-list { display: block; min-height: 0; max-height: none; padding: 0; border-right: 0; border-bottom: 1px solid var(--route-line); }
  body[data-route="relations"] .relation-register .filter-row,
  body[data-route="relations"] #relationRegisterList { display: none; }
  body[data-route="relations"] .relation-mobile-picker { display: grid; gap: 6px; padding: 12px 16px; }
  body[data-route="relations"] #relationRegisterContent { display: block; overflow: visible; }
  body[data-route="relations"] .relation-reading-head { flex-wrap: wrap; padding: 16px; }
  body[data-route="relations"] .relation-reading-actions { justify-content: flex-start; }
  body[data-route="relations"] .relation-reading-body { overflow: visible; padding: 16px; }
}

/* This reader has two independent scroll panes; its controls remain above them. */
@media screen {
  body[data-route="timeline"] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  body[data-route="timeline"] .app-shell { height: 100vh; height: 100dvh; min-height: 0; }
  body[data-route="timeline"] .workspace { height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); min-height: 0; margin-right: 0; padding: 12px clamp(12px, 2vw, 28px); overflow: hidden; }
  body[data-route="timeline"] #routeContent { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; height: 100%; min-width: 0; min-height: 0; }
  /* The grid gap supplies this spacing; type and padding use the shared head. */
  body[data-route="timeline"]:not([data-route="overview"]) #routeContent > .page-head { margin-bottom: 0; }
}
@media screen and (max-width: 900px) {
  body[data-route="timeline"] .workspace { padding: 10px; }
  .worldflow-stage { padding: 20px 17px; }
  .worldflow-context { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media screen and (max-width: 680px) {
  body[data-route="timeline"] #routeContent { gap: 8px; }
  .worldflow-collection { padding: 9px 12px; }
  .worldflow-collection h2 { font-size: 1rem; }
  .worldflow-collection p { font-size: .79rem; line-height: 1.4; }
  .worldflow-compact-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .worldflow-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .worldflow-index { display: block; border-right: 0; border-bottom: 1px solid var(--route-line); border-radius: 0; }
  .worldflow-index > h3, .worldflow-index-list { display: none; }
  .worldflow-stage { padding: 18px 13px; border-radius: 0 0 12px 12px; }
}
@media screen and (max-width: 460px) {
  .worldflow-compact-picker { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-height: 640px) {
  body[data-route="timeline"] .workspace { padding-top: 7px; padding-bottom: 7px; }
  body[data-route="timeline"] #routeContent { gap: 7px; }
  .worldflow-collection { padding-top: 7px; padding-bottom: 7px; }
  .worldflow-collection > p { display: block; }
  .worldflow-compact-picker { align-items: end; gap: 8px; margin-top: 6px; }
  .worldflow-stage { padding-top: 15px; }
}
/* Below this height, page scrolling is safer than shrinking the reader to a sliver. */
@media screen and (max-height: 650px), screen and (max-width: 680px) {
  body[data-route="timeline"] { height: auto; overflow-y: auto; }
  body[data-route="timeline"] .app-shell { height: auto; min-height: 100vh; }
  body[data-route="timeline"] .workspace { height: auto; overflow: visible; }
  body[data-route="timeline"] #routeContent { height: auto; grid-template-rows: auto auto; }
  body[data-route="timeline"] :is(.worldflow-explorer, .worldflow-layout, .worldflow-reading) { display: block; height: auto; overflow: visible; }
  body[data-route="timeline"] .worldflow-stage { overflow: visible; }
  body[data-route="timeline"] .worldflow-compact-picker { display: grid; }
  body[data-route="timeline"] .worldflow-index { display: block; border-right: 0; border-bottom: 1px solid var(--route-line); border-radius: 0; }
  body[data-route="timeline"] .worldflow-index-list { display: none; }
}

@media print {
  .topbar, .primary-nav, .inspector, .page-actions, .atlas-toolbar, .toast, .media-image-dialog { display: none !important; }
  .workspace { margin: 0 !important; padding: 0; }
  body { background: white; }
  .hero { min-height: auto; color: black; background: white; border: 2px solid #222; box-shadow: none; }
  .hero p, .hero .page-kicker, .stat-card span { color: #333; }
  .stat-card strong { color: #111; }
  .panel, .card { box-shadow: none; }
  .register-layout { display: block; height: auto; overflow: visible; }
  .register-list { display: none !important; }
  .register-content { height: auto; max-height: none; overflow: visible; }
  body[data-route="timeline"] .app-shell { padding-top: 0; }
  body[data-route="timeline"] #routeContent, .worldflow-explorer, .worldflow-layout, .worldflow-reading { display: block; height: auto; overflow: visible; }
  .worldflow-index { display: none; }
  .worldflow-stage { height: auto; max-height: none; overflow: visible; padding: 16px 0; }
}
/* Contextual explanations, shared between the atlas and game rules. */
.mechanic-notes { display:grid; gap:1rem; margin:1rem 0; min-width:0; }
.room-environment { min-width:0; border-left:3px solid var(--route-accent); }
.room-environment :is(p, ul) { max-width:75ch; }
.room-effects-list li { margin:.65rem 0; }
.mechanic-note { border-left:3px solid #397e98; min-width:0; overflow-wrap:anywhere; }
.mechanic-note h3 { margin:.2rem 0 .6rem; }
.mechanic-note details { margin:.75rem 0; }
.mechanic-note summary { cursor:pointer; font-weight:700; padding:.35rem 0; }
.mechanic-note li { margin:.65rem 0; line-height:1.6; }
.condition-note { margin:.6rem 0; color:var(--muted); font-size:.94rem; line-height:1.6; overflow-wrap:anywhere; }
body[data-route="mechanics"] .mechanic-notes.compact { grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); align-items:start; }

/* CBL-01 content grammar for every Worldflow event reader. RG-01 continues
   to own the left register; RD-01 continues to own the collection head and
   the non-interactive event band above this reading surface. */
body[data-route="timeline"] .worldflow-stage.cbl-reading {
  --cbl-ink:#16232c;
  --cbl-petrol:#183f48;
  --cbl-petrol-text:#16525d;
  --cbl-accent:#216b78;
  --cbl-soft:#dcecee;
  --cbl-line:#9fc4ca;
  --cbl-field:#fffdf8;
  --cbl-muted:#3c4b54;
  --cbl-gold:#f0c878;
  --cbl-cream:#fbf5e7;
  color:var(--cbl-ink);
  overflow-wrap:anywhere;
}
body[data-route="timeline"] .worldflow-stage.cbl-reading > article {
  box-sizing:border-box;
  width:100%;
  max-width:76ch;
  margin:0 auto;
  color:var(--cbl-ink);
  font:400 1.0625rem/1.72 var(--font-editorial);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading > article :is(p,ul,ol,dl) { max-width:76ch; }
body[data-route="timeline"] .worldflow-stage.cbl-reading > article h3 {
  color:var(--cbl-petrol);
  font:700 1.13rem/1.4 var(--font-ui);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading > article p {
  color:var(--cbl-ink);
  font:inherit;
}
body[data-route="timeline"] .worldflow-stage.cbl-reading > article :is(code,kbd) {
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding:.08em .28em;
  border:0;
  border-radius:4px;
  color:var(--cbl-petrol);
  background:#eef4f2;
  font:400 .9em/1.45 var(--font-code);
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Time is the compact input/result pair of the event. */
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-time {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px 14px;
  box-sizing:border-box;
  max-width:76ch;
  margin:1rem 0 1.35rem;
  padding:15px 17px;
  border:0;
  border-left:4px solid var(--cbl-gold);
  border-radius:0 10px 10px 0;
  color:var(--cbl-ink);
  background:var(--cbl-cream);
  font:400 .93rem/1.55 var(--font-ui);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-time strong {
  color:var(--cbl-petrol);
  font-family:var(--font-code);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-time span { color:var(--cbl-ink); }

/* Actors and locations are two equal CBL fact groups. */
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-context {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  max-width:76ch;
  margin:1.15rem 0 1.35rem;
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-context > section {
  box-sizing:border-box;
  min-width:0;
  padding:16px;
  border:1px solid var(--cbl-line);
  border-radius:12px;
  background:var(--cbl-field);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-context h3 { margin:0 0 .7rem; }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-actors { gap:8px; }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-actors .chip,
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-related .chip,
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-dialogues .button,
body[data-route="timeline"] .worldflow-stage.cbl-reading .technical-disclosure :is(.button,[data-open-doc]) {
  display:inline-flex;
  box-sizing:border-box;
  min-width:0;
  min-height:31px;
  max-width:100%;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:5px 10px;
  border:1px solid var(--cbl-line);
  border-radius:999px;
  color:var(--cbl-petrol-text);
  background:var(--cbl-field);
  font:650 .875rem/1.35 var(--font-ui);
  text-align:center;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
}
body[data-route="timeline"] .worldflow-stage.cbl-reading :is(.worldflow-actors .chip,.worldflow-related .chip,.worldflow-dialogues .button,.technical-disclosure .button,.technical-disclosure [data-open-doc]):not(:disabled):is(:hover,:focus-visible) {
  border-color:var(--cbl-petrol);
  color:var(--cbl-field);
  background:var(--cbl-petrol);
  text-decoration:none;
}
body[data-route="timeline"] .worldflow-stage.cbl-reading :is(.worldflow-actors .chip,.worldflow-related .chip,.worldflow-dialogues .button,.technical-disclosure .button,.technical-disclosure [data-open-doc]):focus-visible {
  outline:3px solid var(--cbl-accent);
  outline-offset:3px;
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-rooms { gap:8px; }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-room {
  border-color:var(--cbl-line);
  border-radius:12px;
  color:var(--cbl-petrol-text);
  background:var(--cbl-field);
  font-family:var(--font-ui);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-room > span {
  color:var(--cbl-petrol);
  background:var(--cbl-gold);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-room > small { color:var(--cbl-muted); }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-room:is(:hover,:focus-visible) {
  border-color:var(--cbl-petrol);
  color:var(--cbl-field);
  background:var(--cbl-petrol);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-room:is(:hover,:focus-visible) > small { color:#edf8f6; }

/* Consequence is the event's result card. */
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-outcome {
  box-sizing:border-box;
  max-width:76ch;
  margin:1.25rem 0;
  padding:16px 18px;
  border:1px solid var(--cbl-petrol);
  border-radius:12px;
  color:var(--cbl-petrol);
  background:#f7fbfa;
  font:400 1.08rem/1.65 var(--font-editorial);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-outcome :is(h3,strong,p) { color:inherit; }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-outcome h3 { margin:0 0 .55rem; }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-outcome p { margin:0; font:inherit; }

/* Preconditions and authored action form the CBL key/value block. */
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-facts {
  box-sizing:border-box;
  max-width:76ch;
  margin:1rem 0 1.35rem;
  padding:8px 17px 12px;
  border:0;
  border-left:4px solid var(--cbl-gold);
  border-radius:0 10px 10px 0;
  color:var(--cbl-ink);
  background:var(--cbl-cream);
  font:400 .93rem/1.55 var(--font-ui);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-facts > summary {
  min-height:31px;
  padding:7px 0 10px;
  color:var(--cbl-petrol);
  font:700 .875rem/1.45 var(--font-ui);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-facts > dl {
  grid-template-columns:minmax(120px,.7fr) minmax(0,2fr);
  gap:7px 19px;
  margin:0;
  padding-top:12px;
  border-top:1px solid #e4dcc7;
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-facts dt { color:var(--cbl-petrol); font-size:.875rem; }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-facts dd { color:var(--cbl-ink); font-size:.9rem; line-height:1.55; }

/* Original dialogue excerpts keep a distinct, readable quote-card role. */
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-dialogues {
  box-sizing:border-box;
  max-width:76ch;
  margin:1.25rem 0;
  padding:0 16px;
  border:1px solid var(--cbl-line);
  border-radius:12px;
  background:var(--cbl-field);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-dialogues > summary {
  color:var(--cbl-petrol);
  font:700 .875rem/1.45 var(--font-ui);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-dialogues > section + section { border-top-color:var(--cbl-line); }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-dialogues figcaption {
  color:var(--cbl-muted);
  font:700 .8rem/1.4 var(--font-ui);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-dialogues blockquote {
  margin:0;
  padding:16px 18px;
  border:1px solid var(--cbl-petrol);
  border-radius:12px;
  color:var(--cbl-petrol);
  background:#f7fbfa;
  font:400 1.08rem/1.65 var(--font-editorial);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-dialogues blockquote p { color:inherit; font:inherit; }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-dialogues .button { margin-top:10px; }

body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-related {
  gap:8px;
  max-width:76ch;
  margin:1.35rem 0 0;
}
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-related h3 { margin:0 0 .4rem; }
body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-related > div { gap:8px; }

/* The final disclosure is the CBL source/provenance ending, not another card. */
body[data-route="timeline"] .worldflow-stage.cbl-reading details.technical-disclosure {
  box-sizing:border-box;
  max-width:76ch;
  margin:2rem 0 0;
  padding:1rem 0 0;
  border:0;
  border-top:1px solid var(--cbl-line);
  border-radius:0;
  color:var(--cbl-muted);
  background:transparent;
  font:400 .85rem/1.55 var(--font-ui);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading details.technical-disclosure > summary {
  min-height:31px;
  padding:5px 0 10px;
  color:var(--cbl-petrol);
  font:700 .875rem/1.45 var(--font-ui);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading details.technical-disclosure[open] > summary {
  margin-bottom:12px;
  border-bottom:1px solid var(--cbl-line);
}
body[data-route="timeline"] .worldflow-stage.cbl-reading details.technical-disclosure p { color:inherit; font:inherit; }

@media (max-width:700px) {
  body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-context,
  body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-facts > dl { grid-template-columns:minmax(0,1fr); }
  body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-facts > dl { gap:5px; }
  body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-facts dd { margin-bottom:12px; }
  body[data-route="timeline"] .worldflow-stage.cbl-reading .worldflow-facts dd:last-child { margin-bottom:0; }
}
@media print {
  body[data-route="timeline"] .worldflow-stage.cbl-reading > article { max-width:none; font-size:10.5pt; line-height:1.55; }
  body[data-route="timeline"] .worldflow-stage.cbl-reading :is(.worldflow-time,.worldflow-context > section,.worldflow-outcome,.worldflow-facts,.worldflow-dialogues blockquote) { break-inside:avoid; }
}