/* ProofOS judge console.
   The palette comes from instrumentation and audit, not from dashboards:
   a signal blue for structure, and three semantic states that are deliberately
   not three shades of the same idea. ABSTAIN is ochre because withheld
   judgement is not an error. */

:root {
  --ground: #f2f3f5;
  --surface: #ffffff;
  --surface-2: #e9ebef;
  --surface-sunk: #dfe2e8;
  --ink: #12171e;
  --ink-2: #454f5c;
  --ink-3: #6b7684;
  --rule: #ccd2db;
  --rule-strong: #aab3c0;

  --signal: #1a4d8f;
  --signal-soft: #e4ecf7;

  --claimed: #5c6674;
  --claimed-bg: #e6e8ec;
  --abstain: #a34a15;
  --abstain-bg: #fbeade;
  --abstain-edge: #dc9a63;
  --verified: #1b6544;
  --verified-bg: #dff0e6;
  --verified-edge: #6aab86;
  --refused: #8b2f2f;
  --refused-bg: #f7e4e4;

  /* No web font is loaded: the page must render identically with no network
     at all. Plex is named first so it is used where it happens to be
     installed, and the rest of the stack carries the same technical
     register on every platform that lacks it. */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas,
          "Liberation Mono", Menlo, monospace;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --page: 1400px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0d1117;
    --surface: #151b23;
    --surface-2: #1c242e;
    --surface-sunk: #10161d;
    --ink: #e6eaf0;
    --ink-2: #a9b4c2;
    --ink-3: #7c8899;
    --rule: #29323d;
    --rule-strong: #3d4854;

    --signal: #6ea8e8;
    --signal-soft: #16283f;

    --claimed: #97a2b0;
    --claimed-bg: #1e242c;
    --abstain: #e09154;
    --abstain-bg: #2b1c11;
    --abstain-edge: #7a4a24;
    --verified: #67c396;
    --verified-bg: #10241a;
    --verified-edge: #2f6a4b;
    --refused: #d97a7a;
    --refused-bg: #2a1414;
  }
}

:root[data-theme="dark"] {
  --ground: #0d1117;
  --surface: #151b23;
  --surface-2: #1c242e;
  --surface-sunk: #10161d;
  --ink: #e6eaf0;
  --ink-2: #a9b4c2;
  --ink-3: #7c8899;
  --rule: #29323d;
  --rule-strong: #3d4854;

  --signal: #6ea8e8;
  --signal-soft: #16283f;

  --claimed: #97a2b0;
  --claimed-bg: #1e242c;
  --abstain: #e09154;
  --abstain-bg: #2b1c11;
  --abstain-edge: #7a4a24;
  --verified: #67c396;
  --verified-bg: #10241a;
  --verified-edge: #2f6a4b;
  --refused: #d97a7a;
  --refused-bg: #2a1414;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: -0.018em;
             line-height: 1.14; }
p { margin: 0; }
a { color: var(--signal); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }

/* Labels are the connective tissue of an instrument panel: mono, spaced,
   small, and never competing with the data they name. */
.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 56px;
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.brand {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.brand-mark {
  width: 15px; height: 15px;
  border: 2px solid var(--signal);
  border-radius: 2px;
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 2px;
  background: var(--signal);
}
.nav-links { display: flex; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; }
.nav-links a {
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 3px;
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }

/* ---- hero ---- */

.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.eyebrow { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--rule); }

h1 {
  font-size: clamp(2.6rem, 1.3rem + 4.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.thesis {
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34ch;
}
.thesis strong { color: var(--ink); font-weight: 600; }
.tagline {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.hero-actions { margin-top: 2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }

.btn {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.7rem 1.15rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-primary { background: var(--signal); color: #fff; }
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary { color: #0d1117; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .btn-primary { color: #fff; } }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }

/* The hero visual is the product's whole argument in four lines. */
.verdict-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 32px -20px rgb(0 0 0 / 0.3);
}
.verdict-row { display: grid; gap: 0.4rem; }
.verdict-said {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 500;
  color: var(--ink-2);
  font-style: italic;
}
.verdict-arrow {
  font-family: var(--mono);
  color: var(--ink-3);
  font-size: 1.1rem;
  margin: 0.4rem 0 0.1rem;
}
.verdict-out {
  font-family: var(--mono);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--abstain);
  line-height: 1;
}
.verdict-why {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* ---- sections ---- */

section { padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--rule); }
.section-head { margin-bottom: 2.5rem; max-width: 62ch; }
.section-head h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  letter-spacing: -0.03em;
  margin-top: 0.75rem;
}
.section-head p { margin-top: 0.85rem; color: var(--ink-2); font-size: 1rem; }

/* ---- demo video ---- */

/* The player sits between the thesis and the evidence, so it is deliberately
   quiet: no shadow, no accent, the same rule and surface tokens as every panel
   below it. A video control is already the loudest thing on a page of tables. */
.demo h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  letter-spacing: -0.03em;
  margin: 0;
}
.demo-lede {
  margin: 0.85rem 0 1.75rem;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 1rem;
}
.demo-player {
  display: block;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.demo-meta {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.demo-links {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.9rem;
}

/* ---- provenance strip ---- */

.provenance {
  margin-top: 1.25rem;
  display: grid;
  /* Eight fields, so the row count is stated rather than left to auto-fit,
     which stranded the last cell beside an empty half-row. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
}
.provenance div { background: var(--surface); padding: 0.8rem 1rem; min-width: 0; }
.provenance dt { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.provenance dd {
  margin: 0.3rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink);
  /* Break between tokens, never inside a hash: a hyphenated id split across
     lines reads as a corrupted value. */
  overflow-wrap: break-word;
  word-break: normal;
}

/* ---- scenario tabs ---- */

.tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.tab {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.55rem 0.95rem;
  border-radius: 4px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--signal); border-color: var(--signal); color: #fff; }
:root[data-theme="dark"] .tab[aria-selected="true"] { color: #0d1117; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab[aria-selected="true"] { color: #0d1117; } }

/* ---- badges ---- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.badge::before { font-size: 0.8em; }
.badge-replay { color: var(--signal); background: var(--signal-soft); border-color: color-mix(in srgb, var(--signal) 35%, transparent); }
.badge-replay::before { content: "\25B6"; }
.badge-synthetic { color: var(--ink-2); background: var(--surface-2); border-color: var(--rule-strong); }
.badge-synthetic::before { content: "\25C7"; }
.badge-claimed { color: var(--claimed); background: var(--claimed-bg); border-color: var(--rule-strong); }
.badge-claimed::before { content: "\25CB"; }
.badge-abstain { color: var(--abstain); background: var(--abstain-bg); border-color: var(--abstain-edge); }
.badge-abstain::before { content: "\25A0"; }
.badge-verified { color: var(--verified); background: var(--verified-bg); border-color: var(--verified-edge); }
.badge-verified::before { content: "\2713"; }
.badge-refused { color: var(--refused); background: var(--refused-bg); border-color: color-mix(in srgb, var(--refused) 40%, transparent); }
.badge-refused::before { content: "\2715"; }

/* ---- console: timeline | decision | inspector ---- */

.console {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  min-width: 0;
}
.panel-head {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.panel-body { padding: 1.1rem; }
.panel-scroll { max-height: 34rem; overflow-y: auto; overflow-x: hidden; }
/* The inspector is short and its last row is the whole argument, so it is
   never scrolled and never clipped. */
.panel-inspector .panel-scroll { max-height: none; overflow: visible; }

/* The chain is literal in this product, so it is literal in the layout:
   one continuous spine, and the decisions interrupt it. */
/* No scroll-behavior here. The replay sets scrollTop on every step, and smooth
   scrolling turns each of those into an animation the next step interrupts --
   which left the panel permanently one event behind the verdict. */
.chain { list-style: none; margin: 0; padding: 0 0 0 1.9rem; position: relative; }
.chain::before {
  content: "";
  position: absolute;
  left: 0.52rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--rule);
}
.ev { position: relative; padding: 0.42rem 0; opacity: 1; }
.ev::before {
  content: "";
  position: absolute;
  left: -1.62rem;
  top: 0.82rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rule-strong);
  border: 2px solid var(--surface);
}
.ev-seq { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ev-name { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.ev-meta { font-size: 0.6875rem; color: var(--ink-3); font-family: var(--mono); }
.ev-line { display: flex; gap: 0.55rem; align-items: baseline; flex-wrap: wrap; }

.ev.is-decision .ev-name { font-weight: 600; }
.ev.is-abstain::before { background: var(--abstain); box-shadow: 0 0 0 3px var(--abstain-bg); }
.ev.is-abstain .ev-name { color: var(--abstain); }
.ev.is-verified::before { background: var(--verified); box-shadow: 0 0 0 3px var(--verified-bg); }
.ev.is-verified .ev-name { color: var(--verified); }
.ev.is-claim::before { background: var(--claimed); box-shadow: 0 0 0 3px var(--claimed-bg); }
.ev.is-attest::before { background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.ev.is-attest .ev-name { color: var(--signal); }
.ev.is-pending { opacity: 0.28; }
.ev.is-current::after {
  content: "";
  position: absolute;
  left: -2.35rem;
  top: 0.62rem;
  width: 3px;
  height: 1.5rem;
  background: var(--signal);
  border-radius: 2px;
}

/* ---- decision panel ---- */

.decision { text-align: center; padding: 2rem 1.1rem; }
.decision-state {
  font-family: var(--mono);
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.decision-sub { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.6rem; }
.decision-note {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-2);
  text-align: left;
  line-height: 1.55;
}
.is-claimed .decision-state { color: var(--claimed); }
.is-claimed .decision-sub { color: var(--ink-3); }
.is-abstain-state .decision-state { color: var(--abstain); }
.is-abstain-state .decision-sub { color: var(--abstain); }
.is-verified-state .decision-state { color: var(--verified); }
.is-verified-state .decision-sub { color: var(--verified); }

.transport { display: flex; gap: 0.5rem; align-items: center; padding: 0.85rem 1.1rem; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.transport .label { margin-left: auto; }

/* ---- evidence inspector ---- */

.evidence { display: grid; gap: 0.85rem; }
.ev-card { border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
.ev-card-head { padding: 0.75rem 0.9rem; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.ev-card-title { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; }
.ev-card-sub { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.15rem; }
.ev-card.refused { border-color: color-mix(in srgb, var(--refused) 45%, var(--rule)); }
.ev-card.accepted { border-color: var(--verified-edge); }

/* Integrity, trust and requirement are three questions. They get three rows,
   permanently, because collapsing them is the defect this page exists to
   correct. */
.facets { display: grid; }
.facet {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
}
.facet:first-child { border-top: 0; }
.facet-name { color: var(--ink-2); }
.facet-val { font-family: var(--mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.35rem; }
.facet-val.yes { color: var(--verified); }
.facet-val.no { color: var(--refused); }
.facet-val.yes::before { content: "\2713"; }
.facet-val.no::before { content: "\2715"; }
.reason { padding: 0.65rem 0.9rem; border-top: 1px solid var(--rule); font-size: 0.75rem; color: var(--ink-2); background: var(--surface-sunk); }

.empty { padding: 2rem 1rem; text-align: center; color: var(--ink-3); font-size: 0.875rem; }

/* ---- attack ---- */

.attack-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.quote {
  font-size: clamp(1rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  border-left: 3px solid var(--refused);
  padding: 0.25rem 0 0.25rem 1.15rem;
  margin: 1rem 0 0;
}
.split { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.split > div { background: var(--surface); padding: 1.15rem; }
.split h3 { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.split p { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--ink-2); }
.split .big { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; margin-top: 0.75rem; letter-spacing: -0.01em; }
.split .big.bad { color: var(--refused); }
.split .big.good { color: var(--abstain); }

.attack-flow { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0; }
.attack-flow li {
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule);
  border-bottom: 0;
  background: var(--surface);
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.attack-flow li:first-child { border-radius: 5px 5px 0 0; }
.attack-flow li:last-child { border-bottom: 1px solid var(--rule); border-radius: 0 0 5px 5px; }
.attack-flow li.terminal { border-color: var(--abstain-edge); background: var(--abstain-bg); color: var(--abstain); font-weight: 600; }
.attack-flow .n { color: var(--ink-3); font-size: 0.6875rem; min-width: 1.2rem; }

.maxim { margin-top: 2rem; display: grid; gap: 0.6rem; }
.maxim p {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.maxim p:first-child { color: var(--ink-3); }
.maxim p:last-child { color: var(--ink); }

/* ---- architecture ---- */

.arch { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.arch-flow { display: grid; gap: 0.55rem; }
.node {
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  padding: 0.8rem 1rem;
}
.node-title { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; }
.node-meta { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.25rem; overflow-wrap: anywhere; }
.node.identity { border-left: 3px solid var(--signal); }
.node.attest { border-left: 3px solid var(--verified); }
.connector { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); padding-left: 1rem; display: flex; gap: 0.6rem; align-items: center; }
.connector::before { content: "\2193"; color: var(--rule-strong); font-size: 0.95rem; }
.services { display: grid; gap: 0.55rem; }
.svc { border: 1px solid var(--rule); border-radius: 5px; background: var(--surface); padding: 0.75rem 0.95rem; }
.svc-name { font-family: var(--mono); font-size: 0.75rem; font-weight: 600; }
.svc-role { font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.2rem; }

/* ---- boundaries / footer ---- */

.bounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1rem; }
.bound { border: 1px solid var(--rule); border-left: 3px solid var(--abstain-edge); border-radius: 5px; padding: 1rem 1.1rem; background: var(--surface); }
.bound h3 { font-size: 0.9375rem; }
.bound p { margin-top: 0.4rem; font-size: 0.875rem; color: var(--ink-2); }

footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem; color: var(--ink-3); font-size: 0.8125rem; }
footer .wrap { display: flex; gap: 1.5rem; justify-content: space-between; flex-wrap: wrap; }

/* ---- responsive ---- */

@media (max-width: 1180px) {
  .console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .console .panel-decision { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 1180px) {
  .provenance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-grid, .attack-grid, .arch { grid-template-columns: minmax(0, 1fr); }
  .console { grid-template-columns: minmax(0, 1fr); }
  .console .panel-decision { order: 0; }
  .panel-scroll { max-height: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .ev { transition: opacity 220ms ease; }
  .decision-state { transition: color 260ms ease; }
}