/* ==========================================================================
   Interactive story layer (2026-09-24), on top of casefile.css.
   Scenes: case opens, the route (attack graph), evidence room, AI thread,
   model card, report to. Spec: docs/superpowers/specs/2026-09-24-interactive-story-design.md
   Hidden starting states exist only under html.motion (set by motion.js when
   JS runs and reduced motion is off) and, for JS-driven parts, only after the
   component is armed by investigation.js. Without either, everything is final.
   Only transform, opacity and stroke-dashoffset are animated.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --head-h: 62px;
  --rail-h: 0px;
}
@media (max-width: 1279px) { .scene-page { --rail-h: 34px; } }
/* Scroll anchoring would chase the caption text inside the sticky stage and
   feed back into the scroll position; every image has fixed dimensions, so
   anchoring is not needed on these pages. */
.scene-page { overflow-anchor: none; }
html:has(body.scene-page) { overflow-anchor: none; }

/* ---------- Scene rail ---------- */
.rail { position: fixed; z-index: 90; font-family: var(--cf-head); }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail a { text-decoration: none; color: var(--cf-muted); display: flex; align-items: center; }
.rail__n { font-family: var(--cf-mono); font-size: 12px; display: grid; place-items: center; border: 1px solid var(--cf-rule-2); background: var(--cf-ground); transition: background-color .18s, color .18s, border-color .18s; }
.rail a[aria-current] .rail__n { background: var(--cf-signal); border-color: var(--cf-signal); color: var(--cf-ink); }
.rail a:hover .rail__n { border-color: var(--cf-text); color: var(--cf-text); }
.rail__t { font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
@media (min-width: 1280px) {
  .rail { right: 16px; top: 50%; transform: translateY(-50%); }
  .rail ol { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
  .rail a { gap: 8px; flex-direction: row-reverse; min-height: 30px; }
  .rail__n { width: 32px; height: 26px; }
  .rail__t { background: var(--cf-ground); padding: 3px 7px; border: 1px solid var(--cf-rule-2); opacity: 0; transform: translateX(6px); transition: opacity .16s, transform .16s var(--ease-out); pointer-events: none; }
  .rail a:hover .rail__t, .rail a:focus-visible .rail__t { opacity: 1; transform: none; }
}
@media (max-width: 1279px) {
  .rail { left: 0; right: 0; bottom: 0; height: var(--rail-h); background: var(--cf-ground); border-top: 1px solid var(--cf-rule-2); }
  .rail ol { display: flex; height: 100%; overflow: hidden; }
  .rail a { min-width: 0; overflow: hidden; white-space: nowrap; }
  .rail li { flex: 1 1 0; min-width: 0; }
  .rail li:has(a[aria-current]) { flex-grow: 3.2; }
  .rail a { height: 100%; gap: 6px; padding: 0 6px; justify-content: center; border-right: 1px solid var(--cf-rule); }
  .rail__n { border: 0; background: transparent; width: auto; height: auto; }
  .rail a[aria-current] { box-shadow: inset 0 3px 0 var(--cf-signal); color: var(--cf-text); }
  .rail a[aria-current] .rail__n { background: transparent; color: var(--cf-signal); }
  .rail__t { display: none; overflow: hidden; text-overflow: ellipsis; }
  .rail a[aria-current] .rail__t { display: inline; }
  .scene-page .site-foot { padding-bottom: calc(36px + var(--rail-h)); }
}

/* ---------- Redaction bars that slide to show a harmless label ---------- */
.redact { position: relative; display: inline-block; vertical-align: -0.2em; background: transparent !important; color: transparent; font-size: 0; line-height: 0; overflow: hidden; box-shadow: none; cursor: help; user-select: none; min-width: 0; height: auto; }
.redact::before { content: attr(data-label); position: relative; display: inline-block; padding: 3px 7px 2px; font: 400 11.5px/1.2 var(--cf-mono); letter-spacing: .02em; white-space: nowrap; color: var(--cf-muted); border: 1px dashed currentColor; }
.redact:not([data-label])::before { content: "withheld"; }
.redact::after { content: ""; position: absolute; inset: 0; background: #000; box-shadow: inset 0 0 0 1px rgba(196, 214, 255, .3); transform-origin: 100% 50%; transition: transform .22s var(--ease-out); }
.redact:hover::after, .redact:focus-visible::after { transform: scaleX(0); }
.case__form .redact::before, .spec .redact::before { color: var(--cf-ink-muted); }
.case__form .redact::after { background: var(--cf-redact); box-shadow: none; }
.spec .redact::before { color: var(--cf-muted); }
.redact:focus-visible { outline-offset: 2px; }

/* ---------- Evidence tag lift, and scroll-driven arrival where supported ---------- */
.xtag { transition: transform .18s var(--ease-out), box-shadow .18s; }
.xtag:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .9); }
@supports (animation-timeline: view()) {
  .motion .exhibit > .xtag { animation: tag-in linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; }
}
@keyframes tag-in { from { opacity: 0; transform: translateX(-28px) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* ---------- Scene 1: the case opens ---------- */
.case__type { display: inline-block; }
.stamp--flat { transform: rotate(-2deg); font-size: 15px; border-width: 2px; padding: 1px 8px 0; }
.hook { margin-top: clamp(36px, 5vw, 64px); }
.hook__text { grid-column: 1 / span 8; }
.hook__k { font-family: var(--cf-head); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--cf-signal); margin: 0 0 8px; }
.hook__text p:nth-child(2) { font-size: clamp(20px, 2vw, 24px); line-height: 1.5; max-width: 50ch; }
.hook__want { font-family: var(--cf-head); font-size: 17px; line-height: 1.5; max-width: 60ch; padding: 12px 14px; border-left: 3px solid var(--cf-signal); background: var(--cf-ground-2); }
.hook__want b { color: var(--cf-text); }
@media (min-width: 1001px) { .hook .margin-note { grid-column: 10 / -1; } }
@media (max-width: 1000px) { .hook__text { grid-column: 1 / -1; } }

.motion .case__strip { animation: fade .5s ease-out both; }
.motion .case__type { clip-path: inset(0 100% 0 0); animation: type-in .95s steps(16, end) .2s forwards; }
.motion .case__subject .field-label { animation: fade .4s ease-out both; }
.motion .case__fields > div { opacity: 0; animation: rise .45s var(--ease-out) forwards; }
.motion .case__fields > div:nth-child(1) { animation-delay: .95s; }
.motion .case__fields > div:nth-child(2) { animation-delay: 1.01s; }
.motion .case__fields > div:nth-child(3) { animation-delay: 1.07s; }
.motion .case__fields > div:nth-child(4) { animation-delay: 1.13s; }
.motion .case__fields > div:nth-child(5) { animation-delay: 1.19s; }
.motion .case__fields > div:nth-child(6) { animation-delay: 1.25s; }
.motion .case__actions { opacity: 0; animation: rise .45s var(--ease-out) 1.35s forwards; }
.motion .case .stamp--land { opacity: 0; animation: stamp-land .42s cubic-bezier(.3, 1.35, .5, 1) 1.55s forwards; }
.motion .case__form { animation: thud .24s ease-out 1.8s; }
.motion .idcard { opacity: 0; animation: card-in .8s var(--ease-out) .45s forwards; }
@media (max-width: 1000px) { .motion .idcard { animation-name: card-in-flat; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes type-in { to { clip-path: inset(0 0 0 0); } }
@keyframes stamp-land { 0% { opacity: 0; transform: rotate(-14deg) scale(1.9); } 65% { opacity: 1; transform: rotate(-2deg) scale(.94); } 100% { opacity: 1; transform: rotate(-3deg) scale(1); } }
@keyframes thud { 45% { transform: translateY(2px); } }
@keyframes card-in { from { opacity: 0; transform: translateX(48px) rotate(7deg); } to { opacity: 1; transform: rotate(1.2deg); } }
@keyframes card-in-flat { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }

/* ---------- Scene 2: the route ---------- */
.route { position: relative; margin-top: clamp(20px, 3vw, 36px); }
.route__stage { padding: 0 0 20px; }
.route__grid { max-width: 1640px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; }
.route__figure { min-width: 0; }
@media (min-width: 1280px) { .scene-page .route__grid { padding-right: calc(var(--cf-gutter) + 44px); } }
.route__sheet { position: relative; background: var(--cf-ground-2); border: 1px solid var(--cf-rule-2); overflow: hidden; }
.route__sheet::before { content: ""; position: absolute; inset: -60px 0; pointer-events: none; background-image: linear-gradient(rgba(196, 214, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 214, 255, .035) 1px, transparent 1px); background-size: 40px 40px; transform: translateY(var(--grid-y, 0px)); }
.route__cam { position: relative; will-change: auto; }
.graph { display: block; width: 100%; height: auto; overflow: visible; }
.graph--tall { display: none; }

.graph .sheet { fill: transparent; stroke: none; }
.graph .gridfill { fill: url(#grid); }
.graph .gridline { stroke: rgba(196, 214, 255, .045); stroke-width: 1; }
.graph .axis line { stroke: rgba(196, 214, 255, .35); stroke-width: 1; }
.graph .axis line.col { stroke: rgba(196, 214, 255, .1); stroke-dasharray: 2 5; }
.graph .axis text { font: 400 13px var(--cf-mono); fill: var(--cf-muted); text-anchor: middle; }
.graph .lg-box { fill: var(--cf-ground); stroke: var(--cf-rule-2); stroke-width: 1; }
.graph .lg-rule { stroke: var(--cf-rule-2); stroke-width: 1; }
.graph .lg-head { font: 500 11px var(--cf-mono); fill: var(--cf-text); letter-spacing: .06em; }
.graph .lg-txt { font: 500 13px var(--cf-head); fill: var(--cf-muted); }
.graph .edge-line { stroke: rgba(196, 214, 255, .34); stroke-width: 1.2; fill: none; }
.graph .edge-line.hot, .graph .edge.hot .edge-line { stroke: var(--cf-hot); stroke-width: 2; }
.graph .arrowhead { fill: none; stroke: rgba(196, 214, 255, .5); stroke-width: 1.2; }
.graph .edge-label { font: 400 12.5px var(--cf-mono); fill: var(--cf-muted); text-anchor: middle; paint-order: stroke; stroke: var(--cf-ground-2); stroke-width: 5px; stroke-linejoin: round; }
.graph .edge.hot .edge-label { fill: var(--cf-hot); }
.graph .shape { fill: var(--cf-ground-2); stroke: var(--cf-text); stroke-width: 1.5; }
.graph .core { fill: var(--cf-text); }
.graph .ring { fill: none; stroke: var(--cf-hot); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.graph .tick { stroke: var(--cf-hot); stroke-width: 1.5; }
.graph .t-objective .shape, .graph .t-entry .shape { stroke: var(--cf-hot); stroke-width: 1.8; }
.graph .t-objective .core, .graph .t-entry .core { fill: var(--cf-hot); }
.graph .on-path.t-pivot .shape { fill: var(--cf-hot); stroke: var(--cf-hot); }
.graph .t-asset .shape { fill: var(--cf-ground-3); }
.graph .hit { fill: transparent; stroke: none; }
.graph .n-title { font: 600 15px var(--cf-head); font-stretch: 84%; fill: var(--cf-text); text-anchor: middle; }
.graph .n-meta { font: 400 11.5px var(--cf-mono); fill: var(--cf-muted); text-anchor: middle; }
.graph .t-objective .n-title { fill: var(--cf-hot); font-size: 16.5px; font-weight: 700; }
.graph .n-title.start, .graph .n-meta.start { text-anchor: start; }
.graph .node .n-title, .graph .node .n-meta { paint-order: stroke; stroke: var(--cf-ground-2); stroke-width: 4px; stroke-linejoin: round; }
.graph a.node { cursor: pointer; }
.graph a.node:focus { outline: none; }
.graph a.node:focus-visible .hit { stroke: var(--cf-hot); stroke-width: 2; stroke-dasharray: 3 3; fill: rgba(255, 122, 74, .12); }
.graph a.node:hover .n-title { fill: var(--cf-hot); }
.graph .node.is-now .hit, .graph .node.is-pinned .hit { stroke: var(--cf-tag); stroke-width: 1.5; stroke-dasharray: 3 3; fill: rgba(196, 214, 255, .06); }
.graph .trace { fill: none; stroke: var(--cf-hot); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.graph .scan { display: none; }
.graph .spine { stroke: rgba(196, 214, 255, .14); stroke-width: 1; }

/* Hover / focus tracing */
.graph.is-tracing .edge, .graph.is-tracing .node { opacity: .25; transition: opacity .15s; }
.graph.is-tracing .edge.is-lit, .graph.is-tracing .node.is-lit { opacity: 1; }
.graph.is-tracing .edge.is-lit .edge-line { stroke: var(--cf-text); stroke-width: 1.6; }
.graph.is-tracing .edge.hot.is-lit .edge-line { stroke: var(--cf-hot); }
.graph.is-tracing .edge.is-lit .edge-label { fill: var(--cf-text); }
.graph.is-tracing .traces { opacity: .3; }

/* Drawing state (armed by investigation.js in motion mode only) */
.route.is-armed .graph .node { opacity: 0; transform: scale(.35); transform-box: fill-box; transform-origin: center; transition: opacity .22s ease-out, transform .34s var(--ease-out); }
.route.is-armed .graph .node.is-on { opacity: 1; transform: none; }
.route.is-armed .graph .node:not(.is-on) { pointer-events: none; }
.graph.is-tracing .node.is-on:not(.is-lit) { opacity: .25; }
.route.is-armed .graph .edge-label { opacity: 0; transition: opacity .25s; }
.route.is-armed .graph .edge.is-done .edge-label { opacity: 1; }
.route.is-armed .graph .edge:not(.is-done) .edge-line { marker-end: none; }
.route.is-armed .graph .edge.hot .edge-line { stroke: rgba(196, 214, 255, .34); stroke-width: 1.2; }
.route.is-armed .graph.is-traced .edge.hot .edge-line { stroke: var(--cf-hot); stroke-width: 2; }
.route.is-armed .graph .edge.hot .edge-label { fill: var(--cf-muted); }
.route.is-armed .graph.is-traced .edge.hot .edge-label { fill: var(--cf-hot); }
.route.is-armed .graph .scan { display: block; stroke: var(--cf-hot); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.route.is-armed .graph.is-traced .t-objective .ring { animation: ring-pulse 1.1s ease-out 1; }
@keyframes ring-pulse { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(2.1); opacity: .15; } 100% { transform: scale(1); opacity: 1; } }

/* Sticky stage while the story runs */
.motion .route.is-armed { height: calc(23.6 * 30vh + 100vh); }
.motion .route.is-armed .route__stage { position: sticky; top: var(--head-h); height: calc(100vh - var(--head-h) - var(--rail-h)); height: calc(100svh - var(--head-h) - var(--rail-h)); display: flex; align-items: center; padding: 10px 0; }
.motion .route.is-armed .route__grid { width: 100%; }

/* Controls */
.route__controls { display: flex; align-items: center; gap: 12px; padding: 8px 0 0; font-family: var(--cf-head); font-size: 14px; color: var(--cf-muted); }
.route__controls[hidden] { display: none; }
.route__scrub-k { margin: 0; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cf-text); }
.route__scrub { flex: 1 1 auto; accent-color: var(--cf-signal); min-height: 32px; background: transparent; }
.route__scrub-hint { font-size: 13px; white-space: nowrap; }

/* Caption panel: an evidence tag on the dark ground */
.route__caption { background: var(--cf-tag); color: var(--cf-ink); padding: 0 18px 18px; position: relative; max-height: calc(100vh - var(--head-h) - var(--rail-h) - 24px); overflow: auto; }
.route__caption::before { content: ""; display: block; height: 10px; margin: 0 -18px 12px; background: radial-gradient(circle at 50% 5px, var(--cf-ground) 4px, transparent 4.5px), var(--cf-ink); }
.cap__ticker { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--cf-ink); margin-bottom: 12px; }
.cap__k { grid-column: 1 / -1; font-family: var(--cf-head); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cf-ink-muted); }
.cap__year { font-family: var(--cf-mono); font-weight: 500; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: var(--cf-stamp); font-variant-numeric: tabular-nums; }
.cap__year.is-exp { text-decoration: underline dashed 2px; text-underline-offset: 6px; }
.cap__step { font-family: var(--cf-mono); font-size: 13px; color: var(--cf-ink-muted); justify-self: end; padding-bottom: 4px; }
.cap__kind { font-family: var(--cf-head); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-stamp); margin: 0 0 4px; }
.cap__title { color: var(--cf-ink); font-weight: 800; font-stretch: 80%; font-size: 28px; line-height: 1.02; text-transform: uppercase; margin: 0 0 6px; }
.cap__title:focus { outline: none; }
.cap__date { font-family: var(--cf-mono); font-size: 13px; color: var(--cf-ink-muted); margin: 0 0 2px; }
.cap__where { font-family: var(--cf-head); font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.cap__story { font-size: 16.5px; line-height: 1.5; margin: 0 0 10px; }
.cap__via { font-family: var(--cf-head); font-size: 14px; color: var(--cf-ink-muted); margin: 0; padding-top: 8px; border-top: 1px solid var(--cf-ink-rule); }
.cap__via span { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--cf-ink); margin-right: 6px; }
.cap__via b { color: var(--cf-stamp); font-family: var(--cf-mono); font-weight: 500; }
.cap__extra:empty { display: none; }
.cap__extra { font-size: 15px; margin-top: 10px; }
.route__caption a { color: var(--cf-stamp); }
.route__caption a:hover { color: var(--cf-ink); }
.route__caption :focus-visible { outline-color: var(--cf-stamp); }
.cap__extra .rn__edges { list-style: none; margin: 0 0 8px; padding: 0; font: 400 13px/1.7 var(--cf-mono); color: var(--cf-ink-muted); }
.cap__extra .rn__edges .dir { display: inline-block; width: 3.2em; text-transform: uppercase; font-size: 11px; }
.cap__extra .rn__edges .tech { color: var(--cf-stamp); }
.cap__extra .rn__links { font-family: var(--cf-head); font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.cap__resume { margin-top: 12px; border-color: var(--cf-ink); color: var(--cf-ink); min-height: 40px; }
.cap__resume:hover { background: var(--cf-ink); color: var(--cf-tag); border-color: var(--cf-ink); }
.cap__resume[hidden] { display: none; }
.route__caption.is-pinned .cap__k::after { content: " . pinned"; color: var(--cf-stamp); }
.cap__live.swap-a { animation: cap-a .28s var(--ease-out); }
.cap__live.swap-b { animation: cap-b .28s var(--ease-out); }
@keyframes cap-a { from { opacity: .15; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cap-b { from { opacity: .15; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) and (min-width: 761px) {
  .route__grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .cap__story { font-size: 15.5px; }
}
@media (max-width: 760px) {
  .graph--wide { display: none; }
  .graph--tall { display: block; max-width: 460px; margin: 0 auto; }
  .graph--tall .n-title { font-size: 16px; }
  .graph--tall .n-meta { font-size: 12px; }
  .route__grid { grid-template-columns: 1fr; gap: 10px; }
  .route__controls { flex-wrap: wrap; }
  .route__scrub-hint { display: none; }
  .motion .route.is-armed .route__stage { align-items: stretch; padding: 8px 0; }
  .motion .route.is-armed .route__grid { grid-template-rows: minmax(0, 1fr) auto; height: 100%; align-items: stretch; }
  .motion .route.is-armed .route__figure { display: flex; flex-direction: column; min-height: 0; }
  .motion .route.is-armed .route__sheet { flex: 1 1 auto; min-height: 0; }
  .motion .route.is-armed .route__caption { max-height: 44vh; padding: 0 14px 12px; }
  .motion .route.is-armed .route__caption::before { margin: 0 -14px 8px; }
  .motion .route.is-armed .cap__year { font-size: 32px; }
  .motion .route.is-armed .cap__title { font-size: 22px; }
  .motion .route.is-armed .cap__story { font-size: 15px; margin-bottom: 6px; }
  .motion .route.is-armed .cap__via { display: none; }
  .motion .route.is-armed .route__caption:not(.is-pinned) .cap__story { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .motion .route.is-armed .route__cam { will-change: transform; }
}

/* Readout and the text version */
.readout { font-family: var(--cf-head); font-size: 15.5px; line-height: 1.9; margin: 22px 0 18px; padding: 10px 0; border-top: 1px solid var(--cf-rule-2); border-bottom: 1px solid var(--cf-rule-2); }
.readout__k { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cf-signal); margin-right: 8px; }
.readout .arrow { color: var(--cf-muted); margin: 0 4px; }
.astext { border-top: 2px solid var(--cf-text); }
.astext > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 14px 0; font-family: var(--cf-head); }
.astext > summary::-webkit-details-marker { display: none; }
.astext > summary::before { content: "+"; font-family: var(--cf-mono); color: var(--cf-signal); width: 1ch; }
.astext[open] > summary::before { content: "\2212"; }
.astext__t { font-weight: 700; font-stretch: 85%; font-size: 22px; }
.astext__m { color: var(--cf-muted); font-size: 15px; }
.route-list { list-style: none; margin: 0; padding: 0; }
.rn { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 28px; padding: 18px 0; border-top: 1px solid var(--cf-rule); }
.rn__meta { font-family: var(--cf-mono); font-size: 12.5px; color: var(--cf-muted); display: flex; flex-direction: column; gap: 2px; position: relative; padding-left: 22px; }
.rn__mark { position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border: 1.5px solid var(--cf-text); }
.rn.t-pivot .rn__mark { border-radius: 50%; }
.rn.t-asset .rn__mark { transform: rotate(45deg) scale(.85); }
.rn.t-entry .rn__mark, .rn.t-objective .rn__mark { border-color: var(--cf-signal); box-shadow: inset 0 0 0 3px var(--cf-ground), inset 0 0 0 6px var(--cf-signal); }
.rn.t-objective .rn__mark { border-radius: 50%; }
.rn.on-path.t-pivot .rn__mark { background: var(--cf-signal); border-color: var(--cf-signal); }
.rn__id { color: var(--cf-text); }
.rn.on-path .rn__type { color: var(--cf-signal); }
.rn__title { font-size: 21px; font-weight: 700; font-stretch: 85%; margin: 0 0 2px; }
.rn__where { font-family: var(--cf-head); color: var(--cf-muted); font-size: 15px; margin: 0 0 8px; }
.rn__story { max-width: 66ch; font-size: 17px; margin: 0 0 8px; }
.rn__edges { list-style: none; margin: 0 0 6px; padding: 0; font: 400 13px/1.75 var(--cf-mono); color: var(--cf-muted); }
.rn__edges .dir { display: inline-block; width: 3.2em; text-transform: uppercase; font-size: 11px; }
.rn__edges .tech { color: var(--cf-signal); }
.rn__links { font-family: var(--cf-head); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.rn:target { background: rgba(255, 122, 74, .06); box-shadow: -12px 0 0 rgba(255, 122, 74, .06); }
@media (max-width: 700px) { .rn { grid-template-columns: 1fr; } }

/* ---------- Scene 3: evidence room ---------- */
.figures--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures dt { font-variant-numeric: tabular-nums; }
.part__title--sm { font-size: clamp(24px, 2.6vw, 32px); }
.findings-block { margin-top: 56px; padding-top: 8px; }
.findings-block .part__no { color: var(--cf-signal); }

.tally { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 12px; border-top: 2px solid var(--cf-text); border-bottom: 1px solid var(--cf-rule-2); }
.tally > div { padding: 10px 12px 10px 0; }
.tally > div + div { padding-left: 12px; border-left: 1px solid var(--cf-rule); }
.tally dt { font-family: var(--cf-head); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cf-muted); }
.tally dd { margin: 2px 0 0; font-family: var(--cf-mono); font-size: clamp(26px, 3vw, 38px); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--cf-text); }
.tally__f dd { color: var(--cf-tag); }
.tally__m dd { color: var(--cf-signal); }
.tally__p dd { color: #3fe0b4; }
@media (max-width: 700px) { .tally dt { font-size: 11px; letter-spacing: .04em; overflow-wrap: anywhere; } .tally { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tally > div:nth-child(4) { border-left: 0; padding-left: 0; } .tally > div:nth-child(n+4) { border-top: 1px solid var(--cf-rule); } }
[data-tally].is-armed .ledger-cells li { opacity: 0; transform: translateY(-10px) scale(.94); transition: opacity .22s ease-out, transform .3s var(--ease-out); }
[data-tally].is-armed .ledger-cells li.is-in { opacity: 1; transform: none; }
[data-tally].is-armed .tally__p dd.is-checked { animation: checked .5s ease-out 1; }
@keyframes checked { 30% { transform: scale(1.18); } }

/* Inline evidence graph (was assets/img/evidence-graph.svg) */
.egraph { display: block; width: 100%; height: auto; }
.egraph .eg-bg { fill: var(--cf-ground-2); }
.sec--band .egraph .eg-bg { fill: var(--cf-ground); }
.egraph .eg-nd { fill: var(--cf-ground-3); stroke: rgba(196, 214, 255, .28); stroke-width: 1; }
.egraph .eg-hot { fill: var(--cf-ground-3); stroke: var(--cf-signal); stroke-width: 1.5; }
.egraph .eg-lb { font: 600 13px var(--cf-head); fill: var(--cf-tag); }
.egraph .eg-sm { font: 11.5px var(--cf-mono); fill: var(--cf-muted); }
.egraph .eg-id { font: 12.5px var(--cf-mono); fill: var(--cf-text); }
.egraph .eg-hd { font: 600 11px var(--cf-head); fill: var(--cf-muted); letter-spacing: .12em; }
.egraph .eg-e { stroke: #5f7396; stroke-width: 1; fill: none; marker-end: url(#eg-ah); }
.egraph .eg-es { stroke: var(--cf-signal); stroke-width: 1.3; fill: none; marker-end: url(#eg-ahs); }
.egraph .eg-ah { fill: #7f93b5; }
.egraph .eg-ahs { fill: var(--cf-signal); }
.egraph .eg-bar { fill: var(--cf-steel); }
.egraph .eg-barh { fill: var(--cf-signal); }
.egraph .eg-sc { font: 600 12.5px var(--cf-mono); fill: var(--cf-tag); }
.egraph .eg-rel { font: 11px var(--cf-head); fill: #7f93b5; }
.egraph .eg-row { cursor: pointer; transition: opacity .15s; }
.egraph .eg-row:focus { outline: none; }
.egraph .eg-row:focus-visible rect[class^="eg-nd"], .egraph .eg-row:focus-visible .eg-hot, .egraph .eg-row:focus-visible .eg-nd { stroke: var(--cf-tag); stroke-width: 2; stroke-dasharray: 4 3; }
.egraph.is-tracing .eg-row { opacity: .22; }
.egraph.is-tracing .eg-row.is-lit { opacity: 1; }
.egraph.is-tracing .eg-row.is-lit .eg-e, .egraph.is-tracing .eg-row.is-lit .eg-es { stroke: var(--cf-tag); stroke-width: 1.8; }
.egraph.is-tracing .eg-row.is-lit .eg-nd, .egraph.is-tracing .eg-row.is-lit .eg-hot { stroke: var(--cf-tag); stroke-width: 1.8; }
.egraph.is-tracing .eg-chain .eg-nd { stroke: var(--cf-tag); }
.data tbody tr { transition: background-color .15s; }
.data tbody tr.is-lit { background: rgba(255, 122, 74, .1); }
.data tbody tr.is-moving { position: relative; z-index: 1; }

/* ---------- Scene 4: AI thread, threat model ---------- */
.tm { margin-top: 18px; }
.tm__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--cf-head); font-size: 14.5px; color: var(--cf-muted); margin: 0 0 16px; }
.tm__label .stamp { color: var(--cf-signal); border-color: var(--cf-signal); }
.tm__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tm__flowwrap { position: relative; padding-bottom: 30px; }
.tm__flowwrap::after { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); bottom: 12px; border-top: 1px dashed rgba(196, 214, 255, .4); }
.tm__flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.tm__flow li::after { content: ""; position: absolute; left: 50%; bottom: -24px; width: 1px; height: 12px; background: rgba(196, 214, 255, .4); }
.tm__flow li:not(:last-child)::before { content: "\2192"; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); z-index: 2; font-family: var(--cf-mono); font-size: 13px; color: var(--cf-muted); }
.tm__flow li { position: relative; padding: 0 6px; display: flex; }
.tm__node { position: relative; z-index: 1; width: 100%; min-height: 104px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 10px 12px; background: var(--cf-ground); border: 1px solid var(--cf-rule-2); color: var(--cf-text); font-family: var(--cf-head); cursor: pointer; transition: border-color .15s, background-color .15s, transform .18s var(--ease-out); }
.sec--band .tm__node { background: var(--cf-ground-2); }
.tm__node:hover, .tm__node.is-on { border-color: var(--cf-signal); transform: translateY(-3px); }
.tm__node.is-on { background: var(--cf-ground-3); }
.tm__n { font-family: var(--cf-mono); font-size: 12px; color: var(--cf-signal); }
.tm__name { font-weight: 700; font-stretch: 85%; font-size: 17px; line-height: 1.1; }
.tm__sub { font-size: 13px; color: var(--cf-muted); line-height: 1.3; }
.tm__gate .tm__node { border-style: double; border-width: 3px; border-color: var(--cf-tag); }
.tm__ok { position: absolute; right: 6px; bottom: 6px; font-weight: 800; font-stretch: 75%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #3fe0b4; border: 2px solid currentColor; padding: 0 4px; transform: rotate(-6deg); opacity: 0; }
.tm__token { position: absolute; left: 0; bottom: 12px; width: calc(100% / 6); height: 0; pointer-events: none; z-index: 2; opacity: 0; }
.tm__token::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; background: var(--cf-signal); box-shadow: 0 0 0 4px rgba(255, 122, 74, .22); transform: rotate(45deg); }
.motion .tm.is-live .tm__token { animation: token-x 7s linear infinite; }
.motion .tm.is-live .tm__ok { animation: gate-ok 7s linear infinite; }
@keyframes token-x {
  0% { opacity: 0; transform: translateX(0); }
  4% { opacity: 1; transform: translateX(0); }
  14% { transform: translateX(100%); }
  26% { transform: translateX(200%); }
  38% { transform: translateX(300%); }
  50% { transform: translateX(400%); }
  70% { transform: translateX(400%); }
  82% { opacity: 1; transform: translateX(500%); }
  92% { opacity: 0; transform: translateX(500%); }
  100% { opacity: 0; transform: translateX(500%); }
}
@keyframes gate-ok { 0%, 58% { opacity: 0; transform: rotate(-6deg) scale(1.6); } 63% { opacity: 1; transform: rotate(-6deg) scale(1); } 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.tm__panel { background: var(--cf-tag); color: var(--cf-ink); padding: 14px 18px 16px; min-height: 150px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-content: start; }
.tm__panel > .tm__panel-k, .tm__panel > .tm__panel-empty { grid-column: 1 / -1; }
@media (max-width: 760px) { .tm__panel { grid-template-columns: 1fr; } }
.tm__panel-k { font-family: var(--cf-head); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cf-stamp); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--cf-ink); }
.tm__panel-empty { font-family: var(--cf-head); font-size: 15px; color: var(--cf-ink-muted); margin: 0; }
.tm__panel h5 { margin: 0 0 4px; font-family: var(--cf-head); font-size: 18px; font-weight: 700; font-stretch: 85%; color: var(--cf-ink); }
.tm__panel h5 span { font-family: var(--cf-mono); font-weight: 400; font-size: 13px; color: var(--cf-stamp); margin-right: 8px; }
.tm__panel .tm__t { padding: 8px 0 6px; }
.tm__panel p { font-size: 15.5px; margin: 0 0 4px; line-height: 1.45; }
.tm__panel .tm__src { font-family: var(--cf-head); font-size: 13.5px; color: var(--cf-ink-muted); }
.tm__panel a { color: var(--cf-stamp); }
.tm__panel.is-swap { animation: cap-a .25s var(--ease-out); }
.tm__text { margin-top: 18px; border-top: 1px solid var(--cf-rule-2); }
.tm__text > summary { cursor: pointer; padding: 12px 0; font-family: var(--cf-head); font-weight: 600; font-size: 15.5px; color: var(--cf-text); }
.sheet tr.is-lit td { color: var(--cf-text); background: rgba(255, 122, 74, .08); }
@media (max-width: 760px) {
  .tm__flowwrap { padding-bottom: 0; }
  .tm__flowwrap::after, .tm__flow li::after, .tm__flow li::before { display: none; }
  .tm__flow { grid-template-columns: 1fr; gap: 8px; }
  .tm__flow li { padding: 0; }
  .tm__node { min-height: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; padding: 10px 12px; }
  .tm__n { grid-row: span 2; }
  .tm__node:hover, .tm__node.is-on { transform: translateX(3px); }
  .tm__token { display: none; }
}

/* ---------- Scene 5: model card ---------- */
.mc-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; margin: 8px 0 28px; }
.mc-plate { background: var(--cf-tag); color: var(--cf-ink); padding: 16px 20px 18px; position: relative; }
.mc-plate__k { font-family: var(--cf-head); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cf-stamp); margin: 0 0 6px; }
.mc-plate__name { font-family: var(--cf-mono); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; margin: 0 0 4px; color: var(--cf-ink); overflow-wrap: anywhere; }
.mc-plate__name span { color: var(--cf-ink-muted); font-weight: 400; }
.mc-plate__rev { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--cf-mono); font-size: 13px; color: var(--cf-ink-muted); margin: 0 0 12px; }
.mc-license { display: flex; align-items: center; gap: 10px; font-family: var(--cf-mono); font-size: 14px; margin: 0 0 10px; }
.mc-license__k { color: var(--cf-ink-muted); }
.mc-plate__note { font-family: var(--cf-head); font-size: 15px; margin: 0 0 12px; }
.mc-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.mc-tags li { font-family: var(--cf-mono); font-size: 12px; padding: 2px 7px; border: 1px solid var(--cf-ink-rule); }
.usage { background: #060d19; border: 1px solid var(--cf-rule-2); display: flex; flex-direction: column; min-width: 0; }
.usage__h { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--cf-rule); font-family: var(--cf-head); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-muted); }
.usage__h span:first-child { color: var(--cf-signal); }
.usage__code { margin: 0; padding: 16px 14px 18px; overflow-x: auto; font: 400 14px/1.7 var(--cf-mono); color: var(--cf-text); flex: 1 1 auto; position: relative; }
.usage__code code { font-size: inherit; }
.tk-c { color: #7f93b5; }
.tk-k { color: var(--cf-signal); }
.tk-s { color: #3fe0b4; }
.usage__typed { position: absolute; left: 14px; top: 16px; right: 14px; white-space: pre; pointer-events: none; }
.usage__code.is-armed .usage__src, .usage__code.is-armed .usage__src * { color: transparent; }
.usage__code.is-armed .usage__typed::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; vertical-align: -0.18em; background: var(--cf-signal); }
.usage__code.is-typed .usage__typed::after { animation: caret 1s steps(2, end) 4 forwards; }
@keyframes caret { 50% { opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 900px) { .mc-head { grid-template-columns: 1fr; } }

.sheet-wrap { border-top: 2px solid var(--cf-text); }
.sheet-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cf-rule-2); font-family: var(--cf-head); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-muted); }
.sheet-bar[hidden] { display: none; }
.sheet-bar__all { font: 600 14px/1 var(--cf-head); letter-spacing: 0; text-transform: none; color: var(--cf-text); background: transparent; border: 1px solid var(--cf-rule-2); padding: 9px 12px; min-height: 40px; cursor: pointer; }
.sheet-bar__all:hover { border-color: var(--cf-text); }
.spec { border-bottom: 1px solid var(--cf-rule-2); }
.spec > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 28px; align-items: baseline; gap: 4px 14px; padding: 15px 0 14px; transition: background-color .15s; }
.spec > summary::-webkit-details-marker { display: none; }
.spec > summary:hover { background: rgba(196, 214, 255, .03); }
.spec > summary:hover .spec__t { color: var(--cf-signal); }
.spec__n { font-family: var(--cf-mono); font-size: 13px; color: var(--cf-signal); }
.spec__t { font-family: var(--cf-head); font-weight: 700; font-stretch: 82%; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.1; text-transform: uppercase; color: var(--cf-text); transition: color .15s; }
.spec__meta { font-family: var(--cf-mono); font-size: 12.5px; color: var(--cf-muted); text-align: right; }
.spec__sign { position: relative; width: 16px; height: 16px; align-self: center; justify-self: end; }
.spec__sign::before, .spec__sign::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--cf-text); transition: transform .2s var(--ease-out); }
.spec__sign::after { transform: rotate(90deg); }
.spec[open] .spec__sign::after { transform: rotate(0deg); }
.spec__body { padding: 0 0 26px 58px; max-width: 1000px; }
.spec[open] > .spec__body { animation: spec-open .32s var(--ease-out); }
@keyframes spec-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .spec > summary { grid-template-columns: 34px minmax(0, 1fr) 20px; }
  .spec__meta { grid-column: 2; grid-row: 2; text-align: left; }
  .spec__sign { grid-column: 3; grid-row: 1; }
  .spec__body { padding-left: 0; }
}
.spec__body > p { max-width: var(--cf-measure); }
.mc-sub { font-family: var(--cf-head); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-signal); margin: 22px 0 8px; }
.mc-small, .mc-note { font-family: var(--cf-head); font-size: 15px; color: var(--cf-muted); max-width: 72ch; margin-top: 12px; }
.mc-note b, .mc-small b { color: var(--cf-text); }
.mc-grid { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.mc-grid th { font-family: var(--cf-head); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cf-muted); text-align: left; padding: 8px 14px 8px 0; border-bottom: 2px solid var(--cf-text); }
.mc-grid td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--cf-rule); vertical-align: top; }
.mc-grid .r { text-align: right; }
.mc-grid td.mono { font-family: var(--cf-mono); font-size: 13.5px; }
.mc-grid td.d { color: var(--cf-signal); }
.mc-grid td.v { font-size: 16px; color: var(--cf-text); white-space: nowrap; }
.mc-grid .u { color: var(--cf-muted); font-size: 12.5px; }
.mc-grid tr.pending td { color: var(--cf-muted); border-bottom-style: dashed; }
.mc-grid--roles tr.live td:first-child { box-shadow: inset 3px 0 0 var(--cf-signal); padding-left: 8px; }
.mc-grid--roles { min-width: 640px; }
.mc-grid--results { min-width: 560px; }
.mc-grid--oos td:first-child { font-family: var(--cf-head); font-weight: 600; width: 44%; }
.mc-grid--oos td:last-child { color: var(--cf-muted); }
.mc-kv { width: 100%; border-collapse: collapse; font-size: 16px; }
.mc-kv th { width: 190px; text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--cf-rule); font-family: var(--cf-head); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-muted); }
.mc-kv th.mono { font-family: var(--cf-mono); letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--cf-signal); }
.mc-kv td { padding: 10px 0; border-bottom: 1px solid var(--cf-rule); }
.mc-kv td.mono { font-family: var(--cf-mono); font-size: 14px; }
.lin { display: inline-block; font-family: var(--cf-head); font-size: 15px; border: 1px solid var(--cf-rule-2); padding: 1px 7px; margin: 2px 0; }
.lin__a { color: var(--cf-signal); margin: 0 6px; }
@media (max-width: 560px) { .mc-kv th, .mc-kv td { display: block; width: auto; } .mc-kv th { border-bottom: 0; padding-bottom: 0; } }
.mc-lims { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cf-rule); max-width: 80ch; }
.mc-lims li { padding: 10px 0 10px 22px; border-bottom: 1px solid var(--cf-rule); position: relative; font-size: 17px; }
.mc-lims li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 2px; background: var(--cf-signal); }
.mc-log { max-height: 420px; overflow: auto; border: 1px solid var(--cf-rule-2); background: #060d19; }
.mc-log ol { list-style: none; margin: 0; padding: 6px 0; }
.mc-log li { display: grid; grid-template-columns: 104px 52px minmax(0, 1fr); gap: 10px; padding: 5px 14px; font: 400 13.5px/1.55 var(--cf-mono); color: var(--cf-text); }
.mc-log li:nth-child(even) { background: rgba(196, 214, 255, .025); }
.mc-log .t { color: var(--cf-muted); }
.mc-log .lv { color: #3fe0b4; }
.mc-log .major .lv, .mc-log .cur .lv { color: var(--cf-signal); }
.mc-log .major .msg, .mc-log .cur .msg { color: var(--cf-tag); font-weight: 500; }
.mc-log .pend { color: var(--cf-muted); }
.mc-log .pend .lv { color: #ffc857; }
@media (max-width: 600px) { .mc-log li { grid-template-columns: 84px minmax(0, 1fr); } .mc-log .lv { display: none; } }
.bib { border: 1px solid var(--cf-rule-2); background: #060d19; max-width: 820px; }
.bib__bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--cf-rule); font-family: var(--cf-head); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-muted); }
.bib__copy { font: 600 14px/1 var(--cf-head); color: var(--cf-ink); background: var(--cf-signal); border: 0; padding: 9px 14px; min-height: 36px; cursor: pointer; }
.bib__copy[hidden] { display: none; }
.bib__copy:hover { background: var(--cf-tag); }
.bib pre { margin: 0; padding: 14px; overflow-x: auto; font: 400 13.5px/1.6 var(--cf-mono); color: var(--cf-text); }
.bib__status { font-family: var(--cf-head); font-size: 14px; color: #3fe0b4; margin: 0; padding: 0 14px; min-height: 0; }
.bib__status:not(:empty) { padding: 8px 14px 10px; }
.mc-mail { margin: 8px 0 18px; }
.mc-mail a { font-family: var(--cf-head); font-weight: 800; font-stretch: 75%; font-size: clamp(28px, 4vw, 48px); text-decoration: none; color: var(--cf-text); border-bottom: 3px solid var(--cf-signal); }
.spec .linkrows { border-top-color: var(--cf-text); max-width: 820px; }
.spec .linkrows li { border-bottom-color: var(--cf-rule); }
.spec .linkrows a { color: var(--cf-text) !important; }
.spec .linkrows a span { color: var(--cf-muted); }
.card-more { margin-top: 24px; font-size: 18px; }

/* Full card page layout */
.mc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
.mc-index { position: sticky; top: calc(var(--head-h) + 20px); font-family: var(--cf-head); }
.mc-index__h { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cf-signal); margin: 0 0 6px; }
.mc-index ol { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--cf-rule-2); counter-reset: mci; }
.mc-index li { counter-increment: mci; }
.mc-index a { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--cf-rule); color: var(--cf-muted); text-decoration: none; font-size: 15px; }
.mc-index a::before { content: counter(mci, decimal-leading-zero); font-family: var(--cf-mono); font-size: 12px; color: var(--cf-signal); padding-top: 2px; }
.mc-index a:hover, .mc-index a[aria-current] { color: var(--cf-text); }
.mc-index a[aria-current] { box-shadow: inset 2px 0 0 var(--cf-signal); padding-left: 8px; }
.mc-index__meta { margin: 0; font-family: var(--cf-mono); font-size: 12.5px; }
.mc-index__meta div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.mc-index__meta dt { color: var(--cf-muted); }
.mc-index__meta dd { margin: 0; color: var(--cf-text); }
@media (max-width: 900px) { .mc-layout { grid-template-columns: 1fr; } .mc-index { position: static; } }

/* ---------- Scene 6: report ---------- */
.report__status { margin: 0 0 14px; }
.report .stamp { font-size: 26px; }
.motion .report__status.is-armed .stamp { opacity: 0; }
.motion .report__status.is-armed.in .stamp { animation: stamp-land .42s cubic-bezier(.3, 1.35, .5, 1) .1s forwards; }

/* ---------- Reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .xtag:hover, .tm__node:hover, .tm__node.is-on { transform: none; }
  .redact::after { transition: none; }
  .route__sheet::before { transform: none; }
}

/* ==========================================================================
   Scene pages (2026-09-24, second pass): plain-English lines, glossary,
   scene index on the first page, page transitions, ambient layer.
   ========================================================================== */
.plain { font-family: var(--cf-head); font-size: 16px; line-height: 1.5; color: var(--cf-text); max-width: 72ch; margin: 0 0 18px; padding: 8px 0 8px 14px; border-left: 3px solid #3fe0b4; }
.plain b { font-weight: 700; color: #3fe0b4; letter-spacing: .02em; }
.report .plain, .route__caption .plain, .mc-plate .plain { color: var(--cf-ink); border-left-color: #0b7a5c; }
.report .plain b { color: #085f47; }
.subfile .plain { margin-top: 16px; }
abbr[title] { text-decoration: underline dotted rgba(196, 214, 255, .55); text-underline-offset: 3px; cursor: help; }
.report abbr[title], .case__form abbr[title] { text-decoration-color: rgba(15, 26, 46, .5); }

.scene-ref { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--cf-head); font-size: 14px; color: var(--cf-muted); padding-top: 22px; padding-bottom: 0; margin: 0 auto; }
.scene-ref b { color: var(--cf-signal); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.scene-ref + .sec { border-top: 0; padding-top: clamp(24px, 4vw, 48px); }
.page-route .scene-ref + .sec, .page-evidence .scene-ref + .sec { padding-top: 28px; }

.scenes { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--cf-text); counter-reset: none; }
.scenes li { border-bottom: 1px solid var(--cf-rule-2); }
.scene-link { display: grid; grid-template-columns: 52px minmax(0, 220px) minmax(0, 1fr) 30px; gap: 4px 18px; align-items: baseline; padding: 18px 0; text-decoration: none; color: var(--cf-text); transition: background-color .15s; }
.scene-link:hover { background: rgba(196, 214, 255, .03); color: var(--cf-text); }
.scene-link__n { font-family: var(--cf-mono); font-size: 13px; color: var(--cf-signal); }
.scene-link__t { font-family: var(--cf-head); font-weight: 800; font-stretch: 80%; font-size: clamp(22px, 2.4vw, 28px); text-transform: uppercase; line-height: 1.05; }
.scene-link__d { font-size: 17px; color: var(--cf-text); }
.scene-link__go { font-family: var(--cf-mono); color: var(--cf-signal); transition: transform .18s var(--ease-out); justify-self: end; }
.scene-link:hover .scene-link__go, .scene-link:focus-visible .scene-link__go { transform: translateX(5px); }
.scene-link:hover .scene-link__t { color: var(--cf-signal); }
@media (max-width: 760px) { .scene-link { grid-template-columns: 40px minmax(0, 1fr) 24px; } .scene-link__d { grid-column: 2 / 3; } .scene-link__go { grid-row: 1; grid-column: 3; } }

.gloss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; margin: 0; border-top: 1px solid var(--cf-rule-2); }
.gloss div { padding: 10px 0; border-bottom: 1px solid var(--cf-rule); }
.gloss dt { font-family: var(--cf-head); font-weight: 700; font-size: 16.5px; color: var(--cf-text); }
.gloss dd { margin: 2px 0 0; font-size: 16px; color: var(--cf-muted); line-height: 1.45; }
@media (max-width: 760px) { .gloss { grid-template-columns: 1fr; } }

/* Page transitions: a plain opacity cross-fade between pages */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; }
}
.motion body.is-leaving main, .motion body.is-leaving .continue { opacity: 0; transition: opacity .15s ease-out; }
@supports not (view-transition-name: none) { .motion .scene-page main { animation: fade .3s ease-out both; } }

/* Ambient background layer: fixed, behind content, never interactive */
.scene-page { background: transparent; }
.ambient { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }
.idcard__head { gap: 4px 10px; flex-wrap: wrap; }
.idcard__head span { white-space: nowrap; }
.usage__code { font-size: 13px; }


/* ===== Colour system v2 (2026-09-24) =====
   Midnight ground, evidence-paper cream, and four signal colours with jobs:
   orange = the subject and the hot path, mint = verified / live, amber = classification
   and warnings, azure = models and data. Each page leads with one accent. */
body.page-evidence { --cf-signal: var(--cf-amber); --signal: var(--cf-amber); --signal-dim: var(--cf-amber); --flag: var(--cf-amber); --eo-accent: var(--cf-amber); --signal-soft: rgba(255, 200, 87, .09); --signal-soft-2: rgba(255, 200, 87, .24); --flag-soft: rgba(255, 200, 87, .09); }
body.page-ai       { --cf-signal: var(--cf-azure); --signal: var(--cf-azure); --signal-dim: var(--cf-azure); --flag: var(--cf-azure); --eo-accent: var(--cf-azure); --signal-soft: rgba(99, 179, 255, .09); --signal-soft-2: rgba(99, 179, 255, .24); --flag-soft: rgba(99, 179, 255, .09); }
body.modelcard-page { --cf-signal: var(--cf-mint); --signal: var(--cf-mint); --signal-dim: var(--cf-mint); --flag: var(--cf-mint); --eo-accent: var(--cf-mint); --signal-soft: rgba(63, 224, 180, .09); --signal-soft-2: rgba(63, 224, 180, .24); --flag-soft: rgba(63, 224, 180, .09); }
/* Graph nodes by kind: entry = orange, pivot = mint, asset = amber, objective = orange ring */
.graph .t-pivot:not(.on-path) .shape { stroke: var(--cf-mint); }
.graph .t-asset .shape { stroke: var(--cf-amber); }
.graph .t-asset .n-meta { fill: #d9b25e; }
.graph .t-pivot:not(.on-path) .n-meta { fill: #5fcfb0; }
/* Depth on the ground: a faint cool vignette instead of flat colour. It sits on html, behind the
   ambient canvas; on body it would paint over the animated layer. */
html { background: radial-gradient(1200px 700px at 78% -10%, rgba(99, 179, 255, .07), transparent 60%), radial-gradient(900px 600px at 6% 110%, rgba(63, 224, 180, .05), transparent 60%), var(--cf-ground); background-attachment: fixed; }

/* Colour v2, part 2: the four signal colours become a visible system.
   A flat four-segment rule tops every page, and each scene link on the home page
   carries the accent of the page it opens. Flat segments, no smooth gradients. */
.site-head { position: sticky; }
.site-head::after {
  content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--cf-hot) 0 25%, var(--cf-mint) 25% 50%, var(--cf-amber) 50% 75%, var(--cf-azure) 75% 100%);
}
.scenes li { --sc: var(--cf-hot); border-left: 4px solid var(--sc); transition: background-color .15s; }
.scenes li:nth-child(1) { --sc: var(--cf-hot); }
.scenes li:nth-child(2) { --sc: var(--cf-amber); }
.scenes li:nth-child(3) { --sc: var(--cf-azure); }
.scenes li:nth-child(4) { --sc: var(--cf-mint); }
.scenes li:nth-child(5) { --sc: var(--cf-hot); }
.scenes li:hover, .scenes li:focus-within { background: color-mix(in srgb, var(--sc) 9%, transparent); }
.scenes .scene-link__n { color: var(--sc); }
.scenes .scene-link:hover .scene-link__t, .scenes .scene-link:focus-visible .scene-link__t { color: var(--sc); }
/* Key figures and "verified" marks pick up mint, warnings pick up amber */
.plain b { color: var(--cf-mint); }

/* Findings on the home page: each topic carries its own signal colour
   (lab = mint, forensics = amber, AI = azure, software = orange, teaching = mint, writing = amber). */
.finding { --fc: var(--cf-hot); }
.finding:nth-of-type(1), .finding:nth-of-type(5) { --fc: var(--cf-mint); }
.finding:nth-of-type(2), .finding:nth-of-type(6) { --fc: var(--cf-amber); }
.finding:nth-of-type(3) { --fc: var(--cf-azure); }
.finding:nth-of-type(4) { --fc: var(--cf-hot); }
.finding .finding__id { color: var(--fc); }
.finding a { color: var(--fc); }
.finding { box-shadow: inset 3px 0 0 var(--fc); padding-left: 16px; }