@charset "utf-8";
/* ==========================================================================
   page-demo-document-portal.css
   Page-scoped styles for demos/document-portal.html
   Theme-variable only. Works on dark, void, light and paper bands.
   Document order:
     1  Hero
     2  Hero diagram
     3  Stage shell (bar / grid)
     4  Scenario key-values
     5  Rail modifiers
     6  Scenes
     7  Portal window (docs + thread)
     8  Completion block
     9  Scene side meta
     10 Run controls + audit trail
     11 Never-does panel
     12 Before / after
     13 Estimate
     14 Security & boundary
     15 Other examples
     16 More demos nav
     17 Closing CTA
     18 Run-player states
     19 Responsive
     20 Reduced motion
     21 Scene — the checklist completes itself
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.dp-hero {
  position: relative;
  overflow: hidden;
}

.dp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--s-16);
}

.dp-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  min-width: 0;
}

/* breadcrumb */
.dp-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.dp-crumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}

.dp-crumb a:hover {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

.dp-crumb__here {
  color: var(--ink);
}

/* Four deliberate lines. Each line is a whole phrase, the colour break lands on
   a line break rather than mid-sentence, and no line is left holding a fragment
   ("Watch the") that the next line has to rescue. */
.dp-hero__title {
  margin: 0;
  max-width: 17ch;
  letter-spacing: -0.02em;
}

.dp-hero__l {
  display: block;
  text-wrap: balance;
}

.dp-hero__accent {
  color: var(--accent);
}

.dp-hero__lead {
  margin: 0;
  max-width: 54ch;
  color: var(--body);
}

.dp-hero__cta {
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-2);
}

/* One quiet line, not a caution slab. Amber on this page means "a person is
   required"; a standing security note is not that, so it reads as plain text
   under a hairline rule. See _build/DISCLOSURE-POLICY.md. */
.dp-quiet-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-8) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  max-width: 84ch;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
}

.dp-quiet-note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dp-quiet-note a:hover {
  text-decoration-thickness: 2px;
}

/* --- the six-beat step rail ----------------------------------------------
   The chips used to float loose under the buttons with no owner and no
   explanation, and the last row mixed a blue outline against an amber one so
   the accent read as decoration. They now sit on their own plate, under a
   heading that says what the amber means, and the only accented chips are the
   two amber ones — the gap, and the person who decides. */

.dp-steps {
  width: 100%;
  margin-top: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-5);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-card);
}

.dp-steps__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--body);
}

.dp-steps__note {
  margin: var(--s-3) 0 0;
  max-width: 52ch;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted);
}

.dp-hero__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  width: 100%;
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: dpchip;
}

.dp-hero__chips li {
  counter-increment: dpchip;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-card-2);
  font-size: var(--t-xs);
  line-height: 1.2;
  color: var(--body);
  white-space: nowrap;
}

.dp-hero__chips li::before {
  content: counter(dpchip, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Both accented chips are the same amber, because they are the same idea: the
   gap the system found, and the person it hands the decision to. Nothing else
   in the rail is coloured. */
.dp-hero__chips .is-flag,
.dp-hero__chips .is-human {
  border-color: color-mix(in srgb, var(--amber) 60%, var(--line));
  background: color-mix(in srgb, var(--amber) 10%, var(--bg-card-2));
  font-weight: 600;
  color: var(--ink);
}

.dp-hero__chips .is-flag::before,
.dp-hero__chips .is-human::before {
  color: var(--amber);
}

/* --------------------------------------------------------------------------
   2. Hero diagram
   -------------------------------------------------------------------------- */

/* The card used to be white-on-near-white: its edges dissolved into the hero
   gradient and the drawing looked like it was floating in the page rather than
   sitting on something. It now has a tinted plate, a real border and lift. */
.dp-hero__figure {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
  min-width: 0;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--bg-card-2);
  box-shadow: var(--shadow-card);
}

.dp-fig {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  color: var(--muted);
  overflow: visible;
}

/* legible from a metre, not a hairline schematic */
.dp-fig .dg-label,
.sec__svg .dg-label {
  font-size: 11px;
  letter-spacing: 1.4px;
}

/* item names are content, not labels */
.dp-fig__items text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  fill: var(--body);
}

.dp-fig__items .dp-fig__miss {
  fill: var(--rf-amber);
}

.dp-tick {
  fill: color-mix(in srgb, var(--ok) 16%, transparent);
  stroke: var(--ok);
  stroke-width: 1.4;
}

.dp-tick__mark {
  fill: none;
  stroke: var(--ok);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dp-gap {
  fill: color-mix(in srgb, var(--amber-bright) 18%, transparent);
  stroke: var(--rf-amber);
  stroke-width: 1.4;
}

.dp-gap__mark {
  fill: none;
  stroke: var(--rf-amber);
  stroke-width: 1.9;
  stroke-linecap: round;
}

.dp-gap__dot {
  fill: var(--rf-amber);
}

.dp-fig__ring {
  stroke-opacity: 0.28;
}

.dp-pk {
  opacity: 0.9;
}

.dp-pk--1 {
  fill: var(--rf-ch-2);
}

.dp-pk--2 {
  fill: var(--rf-amber);
}

.dp-pk--1 {
  offset-path: path("M198 104 C 248 104, 256 158, 292 158");
  animation: dp-travel 3.4s var(--e-inout) infinite;
}

.dp-pk--2 {
  offset-path: path("M300 176 C 292 268, 240 304, 160 304 C 138 304, 146 276, 146 258");
  animation: dp-travel 4.2s var(--e-inout) infinite;
  animation-delay: 1.3s;
}

@keyframes dp-travel {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  12%,
  82% {
    opacity: 0.95;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Stage shell
   -------------------------------------------------------------------------- */

.stage {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.stage__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line);
  background: var(--bg-card-2);
}

.stage__ex {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.stage__grid {
  padding: var(--s-6);
}

.stage__scenes {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

/* --- scenario facts strip ------------------------------------------------ */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3) var(--s-6);
  margin: 0;
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
}

.facts__i {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.facts__i dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts__i dd {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* --- the player ---------------------------------------------------------- */

.player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: var(--bg-card-2);
}

.player__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.pbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-card-3);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
}

.pbtn:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.pbtn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}

.pbtn[disabled]:hover {
  border-color: var(--line-strong);
}

.pbtn--main {
  min-width: 116px;
  justify-content: center;
  border-color: transparent;
  background: var(--blue);
  color: #fff;
}

.pbtn--main:hover {
  border-color: transparent;
  background: color-mix(in srgb, #fff 12%, var(--blue));
  color: #fff;
}

.pbtn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.pbtn--quiet:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.player__pos {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--t-sm);
  color: var(--muted);
}

.player__pos [data-run-position] {
  font-size: var(--t-title-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.player__pos-k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- the step track: navigator + progress -------------------------------- */

.track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0 var(--s-6) 0;
  list-style: none;
  background: var(--bg-card-2);
}

.track__seg {
  display: flex;
  min-width: 0;
}

.track__btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 62px;
  padding: var(--s-3) var(--s-3) var(--s-4);
  border: 0;
  border-top: 3px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out),
    opacity var(--d-2) var(--e-out);
}

.track__btn:hover {
  background: var(--bg-card-3);
}

.track__n {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--body);
}

.track__l {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.track__s {
  font-size: var(--t-micro);
  line-height: 1.35;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   4. Scenario key / values
   -------------------------------------------------------------------------- */

.kv {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

.kv__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}

.kv__row dt,
.kv__row > :first-child {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.kv__row dd,
.kv__row > :last-child {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.kv--light {
  border-top: 0;
}

.kv--light .kv__row {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
}

.kv--light .kv__row dd,
.kv--light .kv__row > :last-child {
  text-align: right;
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------------------
   5. Rail modifiers
   -------------------------------------------------------------------------- */

/* (the vertical rail was replaced by the horizontal .track player) */

/* --------------------------------------------------------------------------
   6. Scenes
   -------------------------------------------------------------------------- */

.scene {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card-2);
}

.scene__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.scene__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.scene__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-1);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.scene__main {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

/* --- cause and effect, side by side -------------------------------------- */

.chain {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain__c {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-card);
  min-width: 0;
}

/* the arrow that makes it a chain */
.chain__c + .chain__c::before {
  content: "";
  position: absolute;
  left: calc(var(--s-3) * -1);
  top: 50%;
  width: var(--s-3);
  height: 1px;
  background: var(--line-strong);
}

.chain__c + .chain__c::after {
  content: "";
  position: absolute;
  left: calc(var(--s-3) * -1 + 1px);
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--line-strong);
  border-right: 1.5px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}

.chain__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.chain__v {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* the owner initials rendered at 10px — under the 11px floor. Bumped here
   rather than in core.css so only this page's chain is affected. */
.chain__v .owner__avatar {
  font-size: 11px;
  line-height: 1;
}

.chain__c--flag {
  border-top-color: var(--amber-bright);
  background: color-mix(in srgb, var(--amber-bright) 7%, var(--bg-card));
}

.chain__c--flag .chain__k {
  color: var(--amber);
}

.chain__c--owner {
  border-top-color: var(--accent);
}

.chain__c--human {
  border-top-color: var(--amber-bright);
  background: color-mix(in srgb, var(--amber-bright) 9%, var(--bg-card));
}

.chain__c--human .chain__k {
  color: var(--amber);
}

/* --------------------------------------------------------------------------
   7. Portal window
   -------------------------------------------------------------------------- */

.portal {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  overflow: hidden;
}

.portal__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-card-3);
}

.portal__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-card-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--accent);
}

.portal__id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.portal__title {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.portal__sub {
  font-size: var(--t-xs);
  line-height: 1.3;
  color: var(--body);
}

.portal__status {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--muted);
}

.portal__status--warn {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--ink);
}

/* checklist */
.docs {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  list-style: none;
}

.doc {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-soft);
}

.doc:first-child {
  border-top: 0;
}

.doc__mark {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: transparent;
}

/* received — the checklist visibly ticks itself off */
.doc[data-doc="ok"] .doc__mark {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 20%, transparent);
}

.doc[data-doc="ok"] .doc__mark::after {
  content: "";
  position: absolute;
  left: 3.6px;
  top: 1.4px;
  width: 3.6px;
  height: 6.6px;
  border-right: 1.6px solid var(--ok);
  border-bottom: 1.6px solid var(--ok);
  transform: rotate(42deg);
}

.doc[data-doc="ok"] .doc__state {
  color: var(--body);
}

/* the one gap — the only thing the eye should land on */
.doc[data-doc="warn"] .doc__mark {
  border-color: var(--amber-bright);
  background: color-mix(in srgb, var(--amber-bright) 22%, transparent);
}

.doc[data-doc="warn"] .doc__mark::after {
  content: "";
  position: absolute;
  left: 4.6px;
  top: 2.2px;
  width: 1.8px;
  height: 3.8px;
  border-radius: 1px;
  background: var(--amber-bright);
  box-shadow: 0 5.4px 0 var(--amber-bright);
}

.doc[data-doc="warn"] .doc__state {
  color: var(--amber);
}

.doc__name {
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.doc__state {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* message thread */
.thread {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-card-2);
}

.bubble {
  max-width: 62ch;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-card);
}

.bubble__who {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.bubble__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.bubble--sys {
  border-left-color: var(--line-strong);
}

.bubble--ai {
  border-left-color: var(--accent);
}

.bubble--ai .bubble__who {
  color: var(--accent);
}

.bubble--human {
  border-left-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--bg-card));
}

.bubble--human .bubble__who {
  color: var(--amber);
}

/* --------------------------------------------------------------------------
   8. Completion block
   -------------------------------------------------------------------------- */

.done {
  margin-top: var(--s-2);
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ok) 7%, transparent);
}

.done__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-title-3);
  line-height: 1.25;
  color: var(--ink);
}

.done__tick {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--ok);
}

.done__tick::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid var(--ok);
  border-bottom: 1.5px solid var(--ok);
  transform: rotate(42deg);
}

.done__act {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
}

.done__act-k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}

.done__note {
  margin: 0;
  max-width: 68ch;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   9. Scene side meta
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. Audit trail
   -------------------------------------------------------------------------- */

/* The trail was dim grey on black and read as a footnote. It is the proof that
   the run wrote a record, so it gets its own zone, a heavier rule above it, and
   type that carries at arm's length. */
.trail {
  padding: var(--s-8) var(--s-6) var(--s-6);
  border-top: 2px solid var(--line-strong);
  background: var(--bg-card);
  overflow-x: auto;
}

.trail > :first-child {
  margin: 0 0 var(--s-4);
}

.trail__table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--s-4);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--body);
}

.trail__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.trail__table th {
  padding: 0 var(--s-4) var(--s-3) 0;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
  border-bottom: 2px solid var(--line-strong);
  white-space: nowrap;
}

.trail__table td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  vertical-align: top;
  line-height: 1.45;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.led td:first-child {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--body);
  white-space: nowrap;
}

.led td:last-child {
  color: var(--ink);
  padding-right: 0;
}

.led:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. Never-does panel
   -------------------------------------------------------------------------- */

/* The dark act used to end in a stack of three competing boxes below the
   console. The two closing statements now sit side by side as one calm footer
   row, so the console keeps the screen to itself. */
.dp-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  gap: var(--s-5);
  margin-top: var(--s-10);
}

.dp-foot > .synthetic-note {
  margin: 0;
}

.never {
  padding: var(--s-6) var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
}

.dp-foot .never {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-6);
}

.dp-foot .never__list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
}

.never > :first-child {
  margin: 0 0 var(--s-4);
}

.never__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3) var(--s-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.never__list li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.never__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--amber);
}

/* --------------------------------------------------------------------------
   12. Before / after
   -------------------------------------------------------------------------- */

.ba {
  align-items: stretch;
}

.ba__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.ba__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ba__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.ba__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ba__list li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.ba__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
}

.ba__card--now .ba__label::before {
  background: var(--amber);
}

.ba__card--now .ba__list li::before {
  border-color: color-mix(in srgb, var(--amber) 70%, var(--line-strong));
}

.ba__card--next {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: var(--bg-card-2);
}

.ba__card--next .ba__label::before {
  background: var(--accent);
}

.ba__card--next .ba__list li::before {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* --------------------------------------------------------------------------
   13. Estimate
   -------------------------------------------------------------------------- */

.est {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-6) var(--s-10);
  padding: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
}

.est__copy {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.est__inputs {
  grid-column: 2;
  grid-row: 1;
}

.est__out {
  grid-column: 2;
  grid-row: 2;
}

.est__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.est__copy > p:not(.est__formula) {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.est__formula {
  margin: var(--s-1) 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-card-2);
  font-size: var(--t-xs);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.est__inputs {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.est__inputs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}

.est__k {
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--muted);
}

.est__v {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.est__out {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--r-lg);
  background: var(--bg-card-2);
}

.est__out > :first-child:not(.est__big) {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.est__big {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-display-3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.est__sub {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--muted);
}

.est__disclaimer {
  margin: var(--s-4) 0 0;
  max-width: 74ch;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   14. Security & boundary
   -------------------------------------------------------------------------- */

.sec {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--s-12);
}

.sec__fig {
  margin: 0;
  min-width: 0;
}

.sec__svg {
  display: block;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  color: var(--muted);
}

.sec__line {
  fill: none;
  stroke: var(--rf-ch-2);
  stroke-opacity: 0.72;
  stroke-width: 2.2;
  stroke-dasharray: 6 7;
}

.sec__gate {
  fill: var(--bg-card);
  stroke: var(--rf-ch-2);
  stroke-width: 2;
}

.sec__brace {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.2;
}

.sec__stop {
  fill: none;
  stroke: var(--rf-amber);
  stroke-width: 2.2;
}

/* the boundary drawing needs a plate too, or it dissolves into the light band */
.sec__fig {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--bg-card-2);
  box-shadow: var(--shadow-card);
}

.sec__cap {
  margin: var(--s-5) auto 0;
  max-width: 56ch;
  text-align: center;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
}

.sec__rules {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.rule {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-card);
}

.rule__k {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.rule p:not(.rule__k),
.rule li {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.rule ul {
  margin: 0;
  padding-left: var(--s-5);
}

.rule--amber {
  border-left-color: var(--amber);
}

.rule--amber .rule__k {
  color: var(--amber);
}

.sec__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-6) var(--s-10);
}

.sec__foot-item {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  min-width: 0;
}

.sec__foot-item > :first-child {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sec__foot-item > :last-child {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   15. Other examples
   -------------------------------------------------------------------------- */

.exs {
  align-items: stretch;
}

.ex {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.ex__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  min-height: 30px;
}

.ex__top > * {
  margin: 0;
}

.ex__items {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ex__items li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.ex__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
}

.ex__items .is-missing {
  color: var(--ink);
}

.ex__items .is-missing::before {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 40%, transparent);
}

.ex__miss {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: auto 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--body);
}

.ex__miss::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  transform: translateY(-1px);
}

.exs__note {
  margin: var(--s-6) 0 0;
  max-width: 76ch;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   16. More demos nav
   -------------------------------------------------------------------------- */

.more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

.more__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  text-decoration: none;
  transition: border-color var(--d-2) var(--e-out), transform var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out);
}

a.more__item:hover {
  border-color: var(--line-strong);
  background: var(--bg-card-2);
  transform: translateY(-2px);
}

.more__i {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--accent);
}

.more__t {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.more__d {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted);
}

.more__item.is-current {
  border-style: dashed;
  background: var(--bg-card-2);
  cursor: default;
}

.more__item.is-current .more__i {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   17. Closing CTA
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
}

.cta__promise {
  margin: 0;
  max-width: 42ch;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   18. Run-player states
   -------------------------------------------------------------------------- */

/* Only the current scene is on stage. Without JS (or with reduced motion)
   every scene stays visible, so the run is readable as static content. */
.scene[data-run-state="past"],
.scene[data-run-state="future"] {
  display: none;
}

.scene[data-run-state="current"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: var(--shadow-lift);
  animation: dp-scene-in var(--d-3) var(--e-out) both;
}

@keyframes dp-scene-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- track + trail states -------------------------------------------------
   The player writes data-run-index on the stage root, so the navigator and the
   activity trail can follow the run without carrying data-run-step themselves
   (only one element per step may carry it, or the step count goes wrong). */

.track__seg--human .track__s::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--amber-bright);
  vertical-align: 1px;
}

/* future — dim */
.stage[data-run-index="0"] .track__seg:nth-child(n + 2) .track__btn,
.stage[data-run-index="1"] .track__seg:nth-child(n + 3) .track__btn,
.stage[data-run-index="2"] .track__seg:nth-child(n + 4) .track__btn,
.stage[data-run-index="3"] .track__seg:nth-child(n + 5) .track__btn,
.stage[data-run-index="4"] .track__seg:nth-child(n + 6) .track__btn {
  opacity: 0.8;
}

/* past — the line behind you is filled in */
.stage[data-run-index="1"] .track__seg:nth-child(-n + 1) .track__btn,
.stage[data-run-index="2"] .track__seg:nth-child(-n + 2) .track__btn,
.stage[data-run-index="3"] .track__seg:nth-child(-n + 3) .track__btn,
.stage[data-run-index="4"] .track__seg:nth-child(-n + 4) .track__btn,
.stage[data-run-index="5"] .track__seg:nth-child(-n + 5) .track__btn {
  border-top-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

/* current — foregrounded */
.stage[data-run-index="0"] .track__seg:nth-child(1) .track__btn,
.stage[data-run-index="1"] .track__seg:nth-child(2) .track__btn,
.stage[data-run-index="2"] .track__seg:nth-child(3) .track__btn,
.stage[data-run-index="3"] .track__seg:nth-child(4) .track__btn,
.stage[data-run-index="4"] .track__seg:nth-child(5) .track__btn,
.stage[data-run-index="5"] .track__seg:nth-child(6) .track__btn {
  opacity: 1;
  border-top-color: var(--accent);
  background: var(--bg-card-3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.stage[data-run-index="0"] .track__seg:nth-child(1) .track__n,
.stage[data-run-index="1"] .track__seg:nth-child(2) .track__n,
.stage[data-run-index="2"] .track__seg:nth-child(3) .track__n,
.stage[data-run-index="3"] .track__seg:nth-child(4) .track__n,
.stage[data-run-index="4"] .track__seg:nth-child(5) .track__n,
.stage[data-run-index="5"] .track__seg:nth-child(6) .track__n {
  color: var(--accent);
}

/* the two flagged scenes and the human hand-off go amber when current */
.stage[data-run-index="3"] .track__seg:nth-child(4) .track__btn,
.stage[data-run-index="4"] .track__seg:nth-child(5) .track__btn,
.stage[data-run-index="5"] .track__seg:nth-child(6) .track__btn {
  border-top-color: var(--amber-bright);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber-bright) 38%, transparent);
}

.stage[data-run-index="3"] .track__seg:nth-child(4) .track__n,
.stage[data-run-index="4"] .track__seg:nth-child(5) .track__n,
.stage[data-run-index="5"] .track__seg:nth-child(6) .track__n {
  color: var(--amber);
}

/* --- the trail writes itself as the run plays ---------------------------- */

.led td {
  transition: opacity var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}

.stage[data-run-index="0"] .led:nth-child(n + 2) td,
.stage[data-run-index="1"] .led:nth-child(n + 3) td,
.stage[data-run-index="2"] .led:nth-child(n + 4) td,
.stage[data-run-index="3"] .led:nth-child(n + 5) td,
.stage[data-run-index="4"] .led:nth-child(n + 6) td {
  opacity: 0.86;
}

.stage[data-run-index="0"] .led:nth-child(1) td,
.stage[data-run-index="1"] .led:nth-child(2) td,
.stage[data-run-index="2"] .led:nth-child(3) td,
.stage[data-run-index="3"] .led:nth-child(4) td,
.stage[data-run-index="4"] .led:nth-child(5) td,
.stage[data-run-index="5"] .led:nth-child(6) td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.stage[data-run-index="0"] .led:nth-child(1) td:first-child,
.stage[data-run-index="1"] .led:nth-child(2) td:first-child,
.stage[data-run-index="2"] .led:nth-child(3) td:first-child,
.stage[data-run-index="3"] .led:nth-child(4) td:first-child,
.stage[data-run-index="4"] .led:nth-child(5) td:first-child,
.stage[data-run-index="5"] .led:nth-child(6) td:first-child {
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* --- progress bar --------------------------------------------------------- */

.prog {
  position: relative;
  height: 5px;
  background: var(--bg-card-3);
  box-shadow: inset 0 1px 0 var(--line);
}

.prog__fill {
  display: block;
  width: 16.6667%;
  height: 100%;
  background: linear-gradient(90deg, var(--rf-ch-0), var(--rf-ch-2));
  transition: width var(--d-4) var(--e-out);
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chain__c + .chain__c::before,
  .chain__c + .chain__c::after {
    display: none;
  }
}

@media (max-width: 1024px) {
  .dp-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-10);
  }

  .dp-hero__title {
    max-width: 18ch;
  }

  .track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px var(--s-2);
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sec {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-10);
  }

  .dp-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .dp-foot .never__list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

}

@media (max-width: 768px) {
  /* --- thumb-sized hit areas ---------------------------------------------
     The breadcrumb and the estimate footnote link were 19px tall. On touch
     they get a real 44px box; the hover underline moves off the border so it
     does not float at the bottom of the enlarged area. */
  .dp-crumb {
    gap: var(--s-3);
    margin-block: calc(var(--s-3) * -1);
  }

  .dp-crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    border-bottom: 0;
  }

  .dp-crumb a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .est__disclaimer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }

  .stage__grid {
    padding: var(--s-5) var(--s-4);
  }

  .stage__bar,
  .facts,
  .player,
  .track,
  .trail {
    padding-inline: var(--s-4);
  }

  .player {
    justify-content: flex-start;
  }

  .pbtn {
    padding-inline: var(--s-3);
  }

  .pbtn--main {
    min-width: 104px;
  }

  .est {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-6);
  }

  .est__copy,
  .est__inputs,
  .est__out {
    grid-column: 1;
    grid-row: auto;
  }

  /* keep the boundary diagram legible: scroll it inside its own figure */
  .sec__fig {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sec__svg {
    min-width: 520px;
  }

  .sec__cap {
    max-width: 100%;
  }

  .never {
    padding: var(--s-6) var(--s-5);
  }

  .more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  /* never squash the hero diagram — let it scroll inside its plate */
  .dp-hero__figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dp-fig {
    min-width: 470px;
  }

  .track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chain {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .stage {
    border-radius: var(--r-lg);
  }

  .facts {
    padding-block: var(--s-3);
  }

  .player__controls {
    width: 100%;
  }

  .pbtn span {
    font-size: var(--t-xs);
  }

  .stage__bar {
    align-items: flex-start;
  }

  .scene {
    padding: var(--s-4);
    border-radius: var(--r-lg);
  }

  .portal__head {
    flex-wrap: wrap;
    row-gap: var(--s-2);
  }

  .portal__status {
    margin-left: 0;
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }

  .doc {
    grid-template-columns: 16px minmax(0, 1fr);
    row-gap: var(--s-1);
  }

  .doc__state {
    grid-column: 2;
    justify-self: start;
  }

  .done {
    padding: var(--s-4);
  }

  .dp-hero__chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dp-hero__chips li {
    white-space: normal;
  }

  .dp-steps {
    padding: var(--s-4);
  }

  .dp-hero__figure {
    padding: var(--s-4);
  }

  .cs,
  .sec__fig {
    padding: var(--s-4);
  }

  .more {
    grid-template-columns: minmax(0, 1fr);
  }

  /* no sideways scroll on a phone: let the event column wrap instead */
  .trail__table {
    min-width: 0;
  }

  .trail__table th,
  .trail__table td {
    padding-right: var(--s-3);
  }

  .trail__table th:last-child,
  .trail__table td:last-child {
    padding-right: 0;
  }

  .sec__foot {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dp-pk--1,
  .dp-pk--2 {
    animation: none;
    opacity: 0.85;
  }

  /* the whole run stays readable as static content: every scene on the page,
     each still clearly numbered, with the current one marked. */
  .scene[data-run-state="past"],
  .scene[data-run-state="future"] {
    display: flex;
  }

  .scene[data-run-state="future"] {
    opacity: 0.72;
  }

  .scene[data-run-state="current"] {
    animation: none;
  }

  .track__seg[data-run-state="future"] .track__btn {
    opacity: 1;
  }

  .led[data-run-state="future"] td {
    opacity: 1;
  }

  .more__item,
  .track__btn,
  .pbtn,
  .dp-crumb a {
    transition: none;
  }

  a.more__item:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   21. Scene — the checklist completes itself

   One cinematic frame of the same synthetic run: a time axis, four checklist
   lanes, three documents that file themselves, one that goes missing and is
   chased automatically, and the finished package stopping at the amber human
   gate. Built from the core.css §9b kit — the rules below only (a) reuse the
   hero figure's completion tick and gap mark, and (b) pin the kit primitives
   this figure leans on so the scene is deterministic inside its own plate.
   -------------------------------------------------------------------------- */

/* The kit's label modifiers currently resolve to the plain label colour, so
   every "accent" and "human" label on this page renders as muted grey and the
   amber rule ("amber marks the human gate, nothing else") is invisible in type.
   Pinned here for the three figures on this page. Contrast on the light band:
   #0b4f8a 8.4:1 and #8a5d05 5.8:1 on white, 5.3:1 on the amber plate.
   Belongs in core.css §9b — see left_undone. */
.dp-fig .dg-label--accent,
.sec__svg .dg-label--accent,
.cs__svg .dg-label--accent {
  fill: var(--accent);
}

.dp-fig .dg-label--human,
.sec__svg .dg-label--human,
.cs__svg .dg-label--human {
  fill: var(--rf-amber);
}

/* This frame was the faintest thing on the page — a hairline axis, 2 7 dotted
   guides at 0.72 opacity and 10.5px labels, all on white. It now sits on a
   tinted plate with a drawn time axis you can see from a metre away. */
.cs {
  margin: 0;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--bg-card-2);
  box-shadow: var(--shadow-card);
}

.cs__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* the kit's scroll-edge fade resolves to white; on the tinted plate that reads
   as a smear, so it fades to the plate instead */
.cs .figure__scroll::after {
  background-image: linear-gradient(90deg, transparent, var(--bg-card-2));
}

/* Specificity note: the kit caps figure diagrams at max-width 680px via a
   `.figure svg` rule (0,1,1). A scene-level graphic is the exception, so this
   selector has to outrank it — hence `.cs .cs__svg`, not `.cs__svg`. */
.cs .cs__svg {
  display: block;
  width: 100%;
  /* larger than a spot diagram, but still close to the site's 10.5px label */
  max-width: 1160px;
  /* never squash: below this the scene scrolls inside its own plate */
  min-width: 960px;
  margin-inline: auto;
  color: var(--muted);
}

/* --- type inside the scene ----------------------------------------------- */

/* document names are content, not labels — sentence case, one step larger */
.cs__svg .dg-plate-label,
.cs__svg .cs__doc {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
  fill: var(--ink);
}

.cs__svg .dg-plate-sub,
.cs__svg .cs__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  fill: var(--body);
}

/* the frame is nearly a metre wide on a desktop — its labels track the kit's
   1.4 letterspacing but a step up in size so they carry at that distance */
.cs__svg .dg-label {
  font-size: 11.5px;
  letter-spacing: 1.4px;
}

/* --- the time axis -------------------------------------------------------- */

.cs__svg .cs__axis {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2.2;
  stroke-dasharray: none;
}

.cs__svg .cs__tick path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2.2;
  stroke-dasharray: none;
  stroke-linecap: round;
}

.cs__svg .cs__arrow {
  fill: var(--line-strong);
  stroke: none;
}

/* the three time stations, dropped through the lanes so you can read WHEN each
   lane closed without hunting back up to the axis */
.cs__svg .cs__guide {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
  opacity: 0.95;
}

/* --- routing -------------------------------------------------------------- */

.cs__svg .dg-channel--soft {
  opacity: 0.5;
}

.cs__svg .dg-ring--outer {
  stroke-opacity: 0.22;
}

.cs__svg .cs__ring-in {
  stroke-opacity: 0.34;
}

.cs__svg .cs__pulse {
  fill: none;
  stroke: var(--rf-ch-2);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: cs-pulse 3.6s var(--e-inout) infinite;
}

@keyframes cs-pulse {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(0.94);
  }
  55% {
    opacity: 0.4;
    transform: scale(1.16);
  }
}

/* --- the checklist ticking itself off -------------------------------------
   `backwards` only: if the animation is ever switched off the marks render at
   their normal, finished state rather than disappearing. */

.cs__svg .cs__mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: cs-mark 0.5s var(--e-out) backwards;
}

@keyframes cs-mark {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cs__svg .cs__late {
  animation: cs-fade 0.6s var(--e-out) backwards;
}

@keyframes cs-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- travelling packets (reuses the hero's dp-travel timing) -------------- */

.cs__svg .dg-packet {
  fill: var(--rf-ch-2);
  opacity: 0.9;
}

.cs__svg .cs-pk--1 {
  offset-path: path("M238 104 H 438");
  animation: dp-travel 3.4s var(--e-inout) infinite;
}

.cs__svg .cs-pk--2 {
  offset-path: path("M238 168 H 462");
  animation: dp-travel 3.6s var(--e-inout) infinite;
  animation-delay: 0.9s;
}

.cs__svg .cs-pk--3 {
  offset-path: path("M238 296 H 552");
  animation: dp-travel 3.9s var(--e-inout) infinite;
  animation-delay: 0.45s;
}

.cs__svg .cs-pk--4 {
  fill: var(--rf-amber);
  offset-path: path("M560 306 C 560 388, 528 424, 448 424 H 128 C 84 424, 68 404, 68 348");
  animation: dp-travel 4.8s var(--e-inout) infinite;
  animation-delay: 1.5s;
}

@media (prefers-reduced-motion: reduce) {
  .cs__svg .dg-packet {
    animation: none;
    opacity: 0.85;
  }

  .cs__svg .cs__pulse {
    animation: none;
    opacity: 0.26;
    transform: none;
  }

  /* the scene reads as a finished frame: every mark placed, nothing pending */
  .cs__svg .cs__mark,
  .cs__svg .cs__late {
    animation: none;
    opacity: 1;
    transform: none;
  }
}