/* ════════════════════════════════════════════════════════════
   TERRIV · "Operations, at working size"
   Self-contained system for preview-redesign.html.
   Deliberately NOT layered on platform.css. One set of tokens,
   one set of components, no override stack.

   Identity kept: Archivo, charcoal type, white and warm neutral
   surfaces, green reserved for actions and confirmed states.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --paper:  #FFFFFF;
  --page:   #F7F6F3;
  --sunk:   #EFEEE9;
  --deep:   #16181B;   /* the single tonal shift */
  --deep-2: #23262A;

  /* Ink */
  --ink:    #14161A;
  --ink-2:  #41454B;
  --ink-3:  #63686F;
  --on-deep:   #F3F2EF;
  --on-deep-2: #A8ADB4;

  /* Rules */
  --rule:      #E4E2DC;
  --rule-firm: #C8C6BE;
  --rule-deep: #33373C;

  /* Green: actions and affirmative states only */
  --go:      #0B6B4F;
  --go-dark: #085440;
  --go-wash: #E7F0EB;
  --go-line: #B4CEC2;

  /* Signals */
  --risk:      #A8261D;
  --risk-wash: #FBEDEA;
  --hold:      #855600;
  --hold-wash: #FAF1DE;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale */
  --t-micro: 11px;
  --t-fine:  13px;
  --t-base:  16px;
  --t-lead:  19px;
  --t-h3:    22px;
  --t-h2:    clamp(25px, 2.3vw, 31px);
  --t-h1:    clamp(31px, 3.5vw, 47px);

  /* 4px rhythm */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px;

  --r: 4px;          /* small, technical */
  --r-lg: 8px;
  --shadow: 0 1px 2px rgba(20,22,26,.05);
  --lift: 0 18px 48px -24px rgba(20,22,26,.35);

  --quick: 140ms;
  --ease: cubic-bezier(.2,.6,.3,1);

  --max: 1240px;
  --text-col: 46ch;
  --gutter: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--go); outline-offset: 3px; }
.deep :focus-visible, .cta-card :focus-visible { outline-color: #7FD3B4; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--paper); padding: var(--s3) var(--s5);
  border: 1px solid var(--rule-firm); border-radius: var(--r);
}
.skip:focus { left: var(--gutter); top: var(--s3); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shell { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.col { max-width: var(--text-col); }

/* ── Type ────────────────────────────────────────────── */
h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.032em; font-weight: 700; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.022em; font-weight: 700; }
h2.anchor { font-size: clamp(30px, 3vw, 41px); letter-spacing: -.028em; }
h2.minor  { font-size: clamp(23px, 1.9vw, 26px); }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.014em; font-weight: 600; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.fine { font-size: var(--t-fine); color: var(--ink-3); }
.micro {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-fine); font-weight: 700; letter-spacing: .01em;
  padding: 13px 20px; border-radius: var(--r); min-height: 44px;
  border: 1px solid transparent;
  transition: background var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.btn-go { background: var(--go); color: #fff; }
.btn-go:hover { background: var(--go-dark); }
.btn-line { border-color: var(--rule-firm); color: var(--ink); background: var(--paper); }
.btn-line:hover { border-color: var(--ink-3); }
.deep .btn-line { background: transparent; border-color: var(--rule-deep); color: var(--on-deep); }
.deep .btn-line:hover { border-color: var(--on-deep-2); }
.textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-fine); font-weight: 700; color: var(--go);
  border-bottom: 1px solid var(--go-line); padding: 6px 0 4px;
}
.textlink:hover { border-bottom-color: var(--go); }

/* ── Nav ─────────────────────────────────────────────── */
.nav { border-bottom: 1px solid var(--rule); background: var(--page); position: relative; z-index: 40; }
.nav-in { display: flex; align-items: center; gap: var(--s6); height: 68px; }
.mark { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.mark svg { width: 21px; height: 21px; }
.nav-links { display: flex; gap: var(--s5); margin-left: auto; }
.nav-links a { font-size: var(--t-fine); font-weight: 500; color: var(--ink-2); padding-block: 9px; }
.nav-links a:hover { color: var(--ink); }
.nav-act { display: flex; align-items: center; gap: var(--s3); }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto; }
.nav-toggle svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.8; fill: none; }
.nav-panel { display: none; border-top: 1px solid var(--rule); background: var(--paper); }
.nav-panel.open { display: block; }
.nav-panel ul { padding: var(--s3) 0; }
.nav-panel a { display: block; padding: 14px var(--gutter); font-size: var(--t-base); font-weight: 500; }
.nav-panel .btn { margin: var(--s3) var(--gutter) var(--s5); }

/* ── Hero: the product at working size ───────────────── */
.hero { padding-top: var(--s12); overflow: hidden; }
.hero-copy { max-width: 48ch; }
.hero h1 { margin-top: var(--s5); }
.hero .lead { margin-top: var(--s5); max-width: 50ch; }
.hero-act { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); align-items: center; }
.hero-note { margin-top: var(--s4); font-size: var(--t-fine); color: var(--ink-3); max-width: 52ch; }

/* The capture runs past the container edge: it is the subject, not an inset. */
.hero-shot { margin-top: var(--s10); position: relative; }
.hero-shot .frame { margin-right: calc(var(--gutter) * -1); }
.frame {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  overflow: hidden;
}
.frame img { width: 100%; }
.shot-cap {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s4); font-size: var(--t-fine); color: var(--ink-3);
}
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r);
  background: var(--sunk); color: var(--ink-2); border: 1px solid var(--rule);
}

/* ── Section frames ──────────────────────────────────── */
.band { padding-block: var(--s24); }
.band-paper { background: var(--paper); border-block: 1px solid var(--rule); }
.deep { background: var(--deep); color: var(--on-deep); }
.deep h2, .deep h3 { color: var(--on-deep); }
.deep .lead { color: var(--on-deep-2); }
.deep .micro { color: var(--on-deep-2); }

.head { max-width: 52ch; }
.head h2 { margin-top: var(--s3); }
.head .lead { margin-top: var(--s4); }

/* ── Sequence: needs attention → source → decision ───── */
.seq { margin-top: var(--s12); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); overflow: clip; overflow-clip-margin: 6px; }
.seq-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5); background: var(--sunk); border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.seq-bar .t { font-size: var(--t-fine); font-weight: 700; }
.seq-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.seq-list { border-right: 1px solid var(--rule); }
.seq-list li + li { border-top: 1px solid var(--rule); }
.pick {
  display: block; width: 100%; text-align: left; padding: var(--s4) var(--s5);
  border-left: 3px solid transparent; transition: background var(--quick) var(--ease);
}
.pick:hover { background: var(--sunk); }
.pick[aria-selected="true"] { background: var(--paper); border-left-color: var(--go); }
.pick .a { display: block; font-size: var(--t-fine); font-weight: 700; }
.pick .b { display: block; margin-top: 2px; font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-3); text-transform: none; font-weight: 500; }
.pick .flag { display: inline-flex; margin-top: var(--s2); }

.flag {
  align-items: center; gap: 5px;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r); border: 1px solid;
}
.flag svg { width: 11px; height: 11px; }
.flag-risk { color: var(--risk); background: var(--risk-wash); border-color: #E7C2BC; }
.flag-hold { color: var(--hold); background: var(--hold-wash); border-color: #E2D2AB; }
.flag-go   { color: var(--go);   background: var(--go-wash);   border-color: var(--go-line); }

.seq-body { padding: var(--s6); }
.seq-body h3 + p { margin-top: var(--s3); color: var(--ink-2); max-width: 62ch; }

.source { margin-top: var(--s6); border-top: 1px solid var(--rule); padding-top: var(--s5); }
.source-line { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-fine); color: var(--ink-2); }
.source-line svg { width: 15px; height: 15px; stroke: var(--ink-3); stroke-width: 1.7; fill: none; }
.source-line .doc { font-weight: 700; }
.source-line .loc { color: var(--ink-3); }
blockquote {
  margin-top: var(--s3); padding: var(--s4) var(--s5);
  background: var(--sunk); border-left: 2px solid var(--rule-firm);
  font-size: var(--t-fine); line-height: 1.65; color: var(--ink-2);
}
blockquote mark { background: var(--hold-wash); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.propose { margin-top: var(--s5); font-size: var(--t-fine); color: var(--ink-2); max-width: 62ch; }
.propose b { color: var(--ink); }

.decide { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.decide-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.act {
  font-size: var(--t-fine); font-weight: 700; padding: 10px 14px; min-height: 40px;
  border: 1px solid var(--rule-firm); border-radius: var(--r); background: var(--paper);
  transition: border-color var(--quick) var(--ease), background var(--quick) var(--ease);
}
.act:hover { border-color: var(--ink-3); }
.act-go { color: var(--go); border-color: var(--go-line); }
.act-go:hover { background: var(--go-wash); border-color: var(--go); }
.decide-note { margin-top: var(--s3); font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-3); }

/* Decision history */
.ledger { border-top: 1px solid var(--rule); background: var(--page); }
.ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); }
.ledger-head .t { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ledger ol { padding: 0 var(--s5) var(--s5); }
.ledger li { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--rule); font-size: var(--t-fine); }
.ledger li:first-child { border-top: 0; }
.ledger .who { color: var(--ink); font-weight: 600; }
.ledger .what { color: var(--ink-2); }
.ledger .when { color: var(--ink-3); font-size: var(--t-micro); white-space: nowrap; }
.ledger li[hidden] { display: none; }
.ledger .empty { display: block; color: var(--ink-3); padding: var(--s3) 0; font-size: var(--t-fine); }

/* ── Split: prose beside a wide capture ──────────────── */
.split { display: grid; grid-template-columns: minmax(0, 40ch) minmax(0, 1fr); gap: var(--s12); align-items: center; }
.split-wide .frame { margin-right: calc(var(--gutter) * -1); }

/* ── Rows ────────────────────────────────────────────── */
.rows { margin-top: var(--s10); border-top: 1px solid var(--rule); }
.rows li { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr) auto; gap: var(--s4) var(--s8); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.rows-tight { max-width: 86ch; }
.rows .k { font-size: var(--t-fine); font-weight: 700; }
.rows .v { font-size: var(--t-fine); color: var(--ink-2); max-width: 64ch; }
.deep .rows { border-color: var(--rule-deep); }
.deep .rows li { border-color: var(--rule-deep); }
.deep .rows .v { color: var(--on-deep-2); }

/* Availability states */
.state { font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r); border: 1px solid; white-space: nowrap; }
.state-live { color: var(--go); background: var(--go-wash); border-color: var(--go-line); }
.state-demo { color: var(--ink-2); background: var(--sunk); border-color: var(--rule-firm); }
.state-plan { color: var(--ink-3); background: transparent; border-color: var(--rule-firm); border-style: dashed; }

/* ── Logo rail ───────────────────────────────────────── */
.rail { border-block: 1px solid var(--rule); background: var(--paper); padding-block: var(--s16); }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.rail-note { font-size: var(--t-fine); color: var(--ink-3); max-width: 62ch; }
.pause {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 0; border-bottom: 1px solid var(--rule-firm); border-radius: 0;
  padding: 8px 2px; min-height: 32px; color: var(--ink-3); flex: none;
}
.pause:hover { border-bottom-color: var(--ink-3); color: var(--ink); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee ul { display: flex; align-items: center; gap: var(--s24); width: max-content; animation: slide 72s linear infinite; }
.marquee ul.hold { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee li { display: flex; align-items: center; }
/* Optical heights: a square badge and a wide wordmark cannot share one
   pixel height and read as equal weight. */
.lg { width: auto; max-width: none; }
.lg-kw { height: 46px; } .lg-rm { height: 52px; } .lg-ex { height: 32px; }
.lg-lf { height: 42px; } .lg-bh { height: 50px; } .lg-aw { height: 36px; }
.lg-c21 { height: 42px; } .lg-cb { height: 34px; }

/* ── Demo path ───────────────────────────────────────── */
.path { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34ch); gap: var(--s16); align-items: start; }
.steps { counter-reset: n; margin-top: var(--s8); }
.steps li { counter-increment: n; display: grid; grid-template-columns: 28px 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.steps li::before { content: counter(n); font-size: var(--t-micro); font-weight: 700; color: var(--ink-3); padding-top: 4px; }
.steps .s-t { display: block; font-size: var(--t-fine); font-weight: 700; color: var(--ink); }
.steps .s-d { display: block; font-size: var(--t-fine); color: var(--ink-2); margin-top: 4px; }

.cta-card { background: var(--deep-2); border: 1px solid var(--rule-deep); border-radius: var(--r-lg); padding: var(--s8); }
.cta-card h3 { font-size: var(--t-h3); color: var(--on-deep); }
.cta-card p { margin-top: var(--s3); font-size: var(--t-fine); color: var(--on-deep-2); }
.cta-card .btn { margin-top: var(--s6); width: 100%; justify-content: center; }
.cta-card .btn-line { background: transparent; border-color: var(--rule-deep); color: var(--on-deep); }
.cta-card .fine { color: var(--on-deep-2); margin-top: var(--s4); }

/* ── Footer ──────────────────────────────────────────── */
.foot { background: var(--page); border-top: 1px solid var(--rule); padding-block: var(--s16) var(--s10); }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--s12); }
.foot h2 { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4); }
.foot li + li { margin-top: var(--s1); }
.foot a { display: inline-block; padding-block: 6px; font-size: var(--t-fine); color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
.foot-legal { margin-top: var(--s12); padding-top: var(--s5); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.foot-legal p { font-size: var(--t-micro); line-height: 1.6; color: var(--ink-3); max-width: 78ch; letter-spacing: normal; text-transform: none; font-weight: 400; }

/* ── Responsive ──────────────────────────────────────── */
@media (min-width: 1200px) {
  /* Text keeps the shared left edge; the capture exits the page. */
  .hero .shell {
    max-width: none;
    padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    padding-right: 0;
    display: grid; grid-template-columns: minmax(0, 42ch) minmax(0, 1fr);
    gap: var(--s16); align-items: center;
  }
  .hero-shot { margin-top: 0; }
  .hero-shot .frame {
    margin-right: 0; border-right: 0;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
  }
  .hero-copy { max-width: none; }
}

@media (max-width: 1100px) {
  .split, .path { grid-template-columns: 1fr; gap: var(--s10); }
  .split-wide .frame, .hero-shot .frame { margin-right: 0; }
}
@media (max-width: 900px) {
  .nav-links, .nav-act .btn { display: none; }
  .nav-toggle { display: flex; }
  .seq-grid { grid-template-columns: 1fr; }
  .seq-list { border-right: 0; border-bottom: 1px solid var(--rule); }
  .pick { border-left-width: 0; }
  .pick[aria-selected="true"] { border-left-width: 3px; }
  .band { padding-block: var(--s16); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s8); }
}
@media (max-width: 640px) {
  .hero { padding-top: var(--s12); }
  .rows li { grid-template-columns: 1fr; gap: var(--s2); }
  .rows .state { justify-self: start; }
  .seq-body { padding: var(--s5) var(--s4); }
  .marquee ul { gap: var(--s16); }
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .rail-head { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .foot-grid { grid-template-columns: 1fr; }
  .decide-row .act { flex: 1 1 auto; justify-content: center; }
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee ul { animation: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
}

/* ── Small utilities (the CSP forbids style attributes) ─ */
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.foot-blurb { margin-top: var(--s3); max-width: 34ch; }

/* The endorsement disclaimer sits beneath the marks at body size, not
   beside them in fine print: layout is read before small type. */
.rail-disclaimer {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-fine); line-height: 1.6; color: var(--ink-2); max-width: 92ch;
}
.rail-disclaimer b { color: var(--ink); }

/* Capture inside the judgement band: light screen on charcoal, so the
   back half of the page has something to look at. */
.judge-shot { margin: var(--s10) 0 var(--s12); max-width: 62rem; }
.judge-shot .shot-cap { color: var(--on-deep-2); }
.judge-shot .tag { background: var(--deep-2); border-color: var(--rule-deep); color: var(--on-deep-2); }
.deep .frame { border-color: var(--rule-deep); }

/* Footer column labels: styled like the micro label, not a heading. */
.foot-col {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4);
}
.propose { max-width: 72ch; }


/* ════════════════════════════════════════════════════════
   MOTION · every animation below marks a change of state.
   Nothing loops except the rail, nothing runs unprompted
   after load, and all of it is disabled by the
   prefers-reduced-motion block at the end of this file.
   ════════════════════════════════════════════════════════ */

/* 1 · The hero capture settles once, on load. */
@media (prefers-reduced-motion: no-preference) {
  .hero-shot { animation: settle 620ms var(--ease) 120ms both; }
}
@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 2 · Selecting a finding: the source panel arrives. */
.seq-body.enter { animation: panel-in 260ms var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 3 · The cited phrase highlights itself, left to right, so the eye
       is taken to the words the date came from. */
.seq-body.enter blockquote mark {
  background-image: linear-gradient(var(--hold-wash), var(--hold-wash));
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: sweep 520ms var(--ease) 200ms forwards;
}
@keyframes sweep { to { background-size: 100% 100%; } }

/* 4 · A recorded decision enters the history. */
.ledger li.new { animation: log-in 300ms var(--ease) both; }
@keyframes log-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 5 · A finding that has been decided settles into its new state. */
.pick .flag.changed { animation: flag-in 240ms var(--ease) both; }
@keyframes flag-in { from { opacity: .3; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-shot, .seq-body.enter, .ledger li.new, .pick .flag.changed { animation: none !important; }
  .seq-body.enter blockquote mark {
    animation: none !important;
    background-color: var(--hold-wash); background-size: 100% 100%;
  }
}


/* ════════════════════════════════════════════════════════
   SHARED INTERIOR COMPONENTS
   Appended for the pages other than the home page. Same
   tokens as everything above: no new variables, no
   overrides of anything already defined.
   ════════════════════════════════════════════════════════ */

h4 { font-size: var(--t-base); line-height: 1.3; font-weight: 600; }

.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* Interior page hero: the band above the first content band. */
.page-hero { padding-block: var(--s16) var(--s12); }
.page-hero .head { max-width: 56ch; }

/* A status pill used outside the home page finding list needs a display. */
.flag { display: inline-flex; }

/* Plain statement: a bordered aside, not a card. */
.aside {
  padding-left: var(--s5); border-left: 2px solid var(--rule-firm);
  font-size: var(--t-fine); line-height: 1.6; color: var(--ink-2); max-width: 76ch;
}
.aside-go { border-left-color: var(--go-line); }
.aside p + p { margin-top: var(--s3); }
.aside b { color: var(--ink); }

/* Inline icons: 1.75 stroke on a 24 grid. */
.ico {
  width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-3);
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ico-go { stroke: var(--go); }
.ico-sm { width: 16px; height: 16px; }

/* Panels: the framing around a demonstration interface. */
.panel {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow); overflow: hidden;
}
.panel-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--rule); background: var(--sunk);
}
.panel-bar .t { font-size: var(--t-fine); font-weight: 700; }
.panel-bar .m { font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-3); }
.panel-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) var(--s5);
  border-top: 1px solid var(--rule); background: var(--sunk);
  font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-3);
}
.panel-pad { padding: var(--s5); }
.panel + .shot-cap { margin-top: var(--s4); }

/* Data tables: rows, not cards. */
.dt-scroll { overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; }
.dt th, .dt td {
  text-align: left; vertical-align: top;
  padding: var(--s4) var(--s5) var(--s4) 0;
  border-bottom: 1px solid var(--rule); font-size: var(--t-fine);
}
.dt thead th {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); border-bottom: 1px solid var(--ink);
  padding-bottom: var(--s2); font-weight: 700;
}
.dt tbody th { font-weight: 700; color: var(--ink); }
.dt td { color: var(--ink-2); }
.dt .num { text-align: right; white-space: nowrap; }
.dt tr.row-risk td, .dt tr.row-risk th {
  background: linear-gradient(to right, var(--risk) 0, var(--risk) 3px, transparent 3px);
}
.dt-sub {
  display: block; font-size: var(--t-micro); letter-spacing: .04em;
  color: var(--ink-3); margin-top: 2px; font-weight: 400;
}

/* Attention list: icon, statement, optional flag. */
.attn { border-top: 1px solid var(--rule); }
.attn li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--s3) var(--s4); padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-fine); color: var(--ink-2); align-items: start;
}
.attn .ico { margin-top: 2px; }
.attn b { color: var(--ink); font-weight: 700; }
.panel .attn { border-top: 0; }
.panel .attn li:last-child { border-bottom: 0; }

/* Two-column interior layout. */
.two {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s12); align-items: start;
}
.two h3 + p { margin-top: var(--s3); font-size: var(--t-fine); color: var(--ink-2); }
.two p + p { margin-top: var(--s3); }
.two .textlink { margin-top: var(--s4); }

/* Forms. */
.field { margin-top: var(--s4); }
.field label {
  display: block; font-size: var(--t-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-bottom: var(--s2);
}
.field .opt { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink-3); }
.field input, .field select {
  width: 100%; min-height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--rule-firm); border-radius: var(--r);
  font-family: inherit; font-size: var(--t-fine); color: inherit;
  background: var(--paper); transition: border-color var(--quick) var(--ease);
}
.field textarea {
  width: 100%; min-height: 96px; padding: var(--s3);
  border: 1px solid var(--rule-firm); border-radius: var(--r);
  font-family: inherit; font-size: var(--t-fine); color: inherit;
  background: var(--paper); line-height: 1.55; resize: vertical;
  transition: border-color var(--quick) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--go); }
.field .err {
  display: none; font-size: var(--t-micro); letter-spacing: .04em;
  color: var(--risk); margin-top: var(--s2); font-weight: 700;
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--risk); }
.field.invalid .err { display: block; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formcard {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper); padding: var(--s6); box-shadow: var(--shadow);
}
.formcard .btn { width: 100%; justify-content: center; margin-top: var(--s5); }
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.sent {
  border: 1px solid var(--go-line); background: var(--go-wash);
  border-radius: var(--r-lg); padding: var(--s6);
}
.sent h3 { color: var(--go-dark); }
.sent p { font-size: var(--t-fine); color: var(--ink-2); margin-top: var(--s3); }
.failed {
  border: 1px solid #E7C2BC; background: var(--risk-wash);
  border-radius: var(--r-lg); padding: var(--s6);
}
.failed h3 { color: var(--risk); }
.failed p { font-size: var(--t-fine); color: var(--ink-2); margin-top: var(--s3); }
.failed .btn { margin-top: var(--s4); width: auto; }

@media (max-width: 900px) {
  .dt-collapse thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dt-collapse tbody tr { display: block; padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
  .dt-collapse tbody th { display: block; border-bottom: 0; padding: 0 0 var(--s1); }
  .dt-collapse tbody td { display: block; border-bottom: 0; padding: 2px 0; }
  .dt-collapse tbody td.num { text-align: left; }
  .dt-collapse tbody td::before { content: attr(data-l) ": "; color: var(--ink-3); font-weight: 700; }
  .two { grid-template-columns: 1fr; gap: var(--s10); }
  .page-hero { padding-block: var(--s12) var(--s10); }
}
@media (max-width: 640px) {
  .pair { grid-template-columns: 1fr; }
  .attn li { grid-template-columns: 20px minmax(0, 1fr); padding-inline: var(--s4); }
  .attn li .flag, .attn li .state { grid-column: 2; justify-self: start; }
}