/* ═══════════════════════════════════════════════════════════════════════
   LIVE EVIDENCE
   A live piece is one frame inside a project's evidence: an ink box, a hard
   shadow, and a machine-voice strip that carries its label and its one
   control. The strip is the only chrome, so a running tool, a race and a
   routing slip all read as the same kind of object.

   Every piece ships with a still (see build/live-evidence.mjs), so each rule
   below styles something that is readable before any script runs. Motion
   lives only inside prefers-reduced-motion: no-preference.
   ═══════════════════════════════════════════════════════════════════════ */

.ev-live {
  margin: 0; min-width: 0; position: relative;
  border: 3px solid var(--ink); background: #fff;
  box-shadow: 14px 16px 0 rgba(38, 51, 59, .18);
}
/* The strip. Beats the shared .ev-frame figcaption, which pins a caption
   tab to a frame's corner. */
.ev-frame.ev-live > figcaption.ev-live-label {
  position: static; inset: auto; translate: none;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 6px 14px; min-height: 36px; padding: 5px 8px 5px 12px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .07em; line-height: 1.25; text-transform: uppercase; white-space: normal;
}
.ev-live-label > span { min-width: 0; }
/* A running tool is on air: a steady red pip, never a blink. */
.ev-live.is-ready .ev-live-label > span::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px;
  vertical-align: 0; background: var(--stamp-red);
}
.ev-live-stage { position: relative; min-width: 0; }
.evidence-set > .ev-group-live { margin-top: clamp(8px, 1.2vw, 14px); }

/* The still, when the still is a capture. */
.ev-live-stills { display: grid; gap: clamp(10px, 1.4vw, 16px); padding: clamp(10px, 1.4vw, 16px); }
.ev-live-still { margin: 0; position: relative; }
.ev-live-still img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); background: #fff; }
.ev-live-still figcaption {
  position: absolute; left: 0; bottom: 0; padding: 5px 10px 4px;
  background: var(--ink); color: var(--paper);
  font-size: .68rem; font-weight: 700; letter-spacing: .055em; line-height: 1.1;
}

/* Strip controls: the switch and Replay share one small, squared grammar. */
.lv-switch, .lv-replay {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 30px; margin: 0; padding: 3px 8px; border: 0; border-radius: 0;
  background: transparent; color: var(--paper); cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.lv-switch:hover .lv-switch-text,
.lv-replay:hover { text-decoration: underline; text-underline-offset: 3px; }
.lv-switch:focus-visible, .lv-replay:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.lv-switch-track {
  position: relative; flex: 0 0 auto; width: 34px; height: 18px;
  border: 2px solid var(--paper); background: transparent;
}
.lv-switch-knob { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--paper); }
.lv-switch[aria-checked="true"] .lv-switch-track { background: var(--stamp-red); border-color: var(--paper); }
.lv-switch[aria-checked="true"] .lv-switch-knob { transform: translateX(16px); }
.lv-replay[hidden] { display: none; }
.lv-icon { flex: 0 0 auto; display: block; }
.lv-replay { gap: 6px; }
@media (pointer: coarse) { .lv-switch, .lv-replay { min-height: 44px; } }

/* ── sheet-helper: the real tool in a window ─────────────────────────── */
.lv-sheet-frame {
  display: block; width: 100%; height: clamp(440px, 38vw, 540px);
  border: 0; background: #f5f7f8;
}
/* With scripts on, the still waits in the tool's own box, so swapping it
   for the tool moves nothing. Without scripts it is shown in full. */
html[data-js] .ev-live-sheet-helper .ev-live-stage { height: clamp(440px, 38vw, 540px); overflow: auto; }
.ev-live-sheet-helper.is-refusing { box-shadow: 14px 16px 0 rgba(216, 65, 47, .28); }

/* ── load-race: the two measurements, drawn at real speed ────────────── */
.lv-race { padding: 12px 14px 12px; font-family: var(--mono); color: var(--ink); }
.lv-race-clock {
  margin: 0 0 12px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.lv-race-clock span { display: inline-block; min-width: 3.1ch; text-align: right; }
.lv-race-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lv-run {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 5px 10px; font-size: .7rem; line-height: 1.2;
}
.lv-run-name { font-weight: 700; }
.lv-run-value { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-run.is-done .lv-run-value { color: var(--ink); font-weight: 700; }
.lv-run-track { grid-column: 1 / -1; position: relative; height: 16px; border: 2px solid var(--ink); background: #fff; }
.lv-run-fill, .lv-run-band { position: absolute; top: 0; bottom: 0; }
.lv-run-fill { left: 0; width: var(--min); background: var(--steel-dark); }
/* The band is the spread between the fastest and slowest test. */
.lv-run-band {
  left: var(--min); width: calc(var(--max) - var(--min));
  background: repeating-linear-gradient(-45deg, var(--steel-dark) 0 2px, transparent 2px 5px);
}
.lv-run:last-child .lv-run-fill { background: var(--green); }
.lv-run:last-child .lv-run-band { background: repeating-linear-gradient(-45deg, var(--green) 0 2px, transparent 2px 5px); }
.lv-race-axis { position: relative; height: 16px; margin: 6px 0 0; font-size: .6rem; color: var(--muted); }
.lv-race-axis span { position: absolute; left: var(--at); top: 0; translate: -50% 0; }
.lv-race-axis span:first-child { translate: 0 0; }
.lv-race-axis span:last-child { translate: -100% 0; }

/* In the website's two-window composition the race is a timing slip laid on
   the free corner under the page hero, beside the second window. */
@media (min-width: 981px) {
  .evidence-browser-sections { min-height: clamp(470px, 44vw, 600px); }
  .evidence-browser-sections .ev-live-load-race {
    position: absolute; left: 0; bottom: 0; z-index: 3;
    width: 34%; rotate: -1.4deg;
    box-shadow: 10px 12px 0 rgba(38, 51, 59, .2);
  }
  .evidence-browser-sections .ev-live-load-race .ev-live-label { font-size: .58rem; }
  .evidence-browser-sections .lv-race { padding: 10px 11px 10px; }
  .evidence-browser-sections .lv-run { font-size: .64rem; }
  .evidence-browser-sections .ev-browser-motion { width: 64%; }
}

/* ── route-slip: an article's route through the chain ────────────────── */
.ev-live-route-slip { background: #fff; }
.lv-slip { position: relative; padding: 8px 14px 14px 46px; }
.lv-slip-route { list-style: none; margin: 0; padding: 0; }
.lv-stage {
  display: grid; grid-template-columns: 2.1em minmax(0, 1fr) 20px; align-items: center; gap: 10px;
  padding: 6px 6px 6px 4px; border-bottom: 1px solid rgba(21, 25, 24, .16);
  font-size: clamp(.84rem, 1.05vw, .95rem); font-weight: 700; line-height: 1.15;
}
.lv-stage-n { font-family: var(--mono); font-size: .66rem; font-weight: 700; color: var(--muted); }
.lv-tick { position: relative; width: 18px; height: 18px; border: 2px solid var(--ink); background: #fff; }
.lv-stage.is-done .lv-tick::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); rotate: 40deg;
}
.lv-stage.is-here, .lv-gate.is-here { background: var(--manila); }
.lv-stage.is-returned { background: rgba(216, 65, 47, .14); box-shadow: inset 3px 0 0 var(--stamp-red); }

.lv-gate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 7px 0; padding: 8px 8px 8px 10px; border: 2px dashed var(--ink);
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.lv-gate-name { flex: 1 1 12em; }
.lv-verdict {
  min-width: 3ch; padding: 2px 6px 1px; border: 2px solid currentColor;
  color: var(--green); rotate: -3deg; font-size: .7rem; letter-spacing: .06em;
}
.lv-verdict:empty { visibility: hidden; }
.lv-gate.is-rejected .lv-verdict { color: var(--stamp-red); }
.lv-gate-note { flex-basis: 100%; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .7rem; }

.lv-human {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 14px 6px 4px 4px; border-top: 3px double var(--ink);
  font-weight: 800; font-size: clamp(.92rem, 1.15vw, 1.02rem);
}
.lv-stamp {
  display: grid; justify-items: center; padding: 5px 10px 4px;
  border: 3px solid var(--stamp-red); outline: 1px solid var(--stamp-red); outline-offset: 2px;
  color: var(--stamp-red); rotate: -7deg;
  font-family: var(--mono); font-size: .72rem; font-weight: 700; line-height: 1.1;
  letter-spacing: .09em; text-transform: uppercase;
}

/* The lane is a belt; the article is a sheet of paper riding it. */
.lv-belt {
  position: absolute; left: 10px; top: 8px; bottom: 14px; width: 28px;
  border-inline: 2px solid var(--ink);
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(21, 25, 24, .22) 9px 11px) 0 0 / 100% 11px;
}
.lv-article {
  position: absolute; left: 13px; top: 0; z-index: 2;
  display: grid; align-content: start; gap: 3px;
  width: 22px; height: 28px; padding: 5px 4px;
  border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 rgba(38, 51, 59, .28);
}
.lv-article i { display: block; height: 2px; background: var(--ink); }
.lv-article i:first-child { width: 70%; }

/* In the hero-inset composition the slip is the lead. A supporting inset
   hangs under it rather than over its last row, which is the stamp. */
.evidence-hero-inset:has(.ev-live) { padding-bottom: 0; }
.evidence-hero-inset:has(.ev-live) .ev-inset {
  position: relative; right: auto; bottom: auto; width: 48%;
  margin: clamp(22px, 3vw, 34px) 0 0 auto; rotate: 1deg;
}

/* ── content-line: business inputs, two production lanes, one human gate ── */
.ev-live-content-line { background: #fff; }
.ev-live-content-line .ev-live-stage { container-type: inline-size; }
.lv-content-line { display: grid; grid-template-columns: .78fr 26px 1.55fr 26px .9fr; align-items: center; gap: 0; padding: clamp(12px, 1.6vw, 18px); background: var(--paper); }
.lv-content-line ul, .lv-content-line ol { margin: 0; padding: 0; list-style: none; }
.lv-content-inputs, .lv-content-package, .lv-content-lane { border: 2px solid var(--ink); background: #fff; }
.lv-content-inputs > p, .lv-content-lane > p { margin: 0; padding: 7px 9px 6px; border-bottom: var(--hairline); font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.lv-content-inputs > p { background: var(--green); color: #fff; }
.lv-content-inputs ul { padding: 7px; display: grid; gap: 6px; }
.lv-content-inputs li { min-height: 38px; display: flex; align-items: center; padding: 6px 8px; border: var(--hairline); background: var(--paper); font-size: .68rem; font-weight: 700; line-height: 1.12; }
.lv-content-arrow { position: relative; height: 24px; }
.lv-content-arrow::before { content: ""; position: absolute; left: 4px; right: 7px; top: 11px; border-top: 2px solid var(--ink); }
.lv-content-arrow::after { content: ""; position: absolute; right: 2px; top: 6px; border-block: 6px solid transparent; border-left: 8px solid var(--ink); }
.lv-content-lanes { display: grid; gap: 13px; }
.lv-content-lane ol { display: grid; grid-template-columns: repeat(3, 1fr); }
.lv-content-lane li { min-height: 62px; display: grid; align-content: center; gap: 4px; padding: 8px; border-left: var(--hairline); }
.lv-content-lane li:first-child { border-left: 0; }
.lv-content-lane li span { font: 700 .52rem var(--mono); color: var(--muted); }
.lv-content-lane li b { font-size: .68rem; line-height: 1.12; }
.lv-content-lane.is-writing > p { background: var(--ink); color: var(--paper); }
.lv-content-lane.is-images > p { background: var(--paper-deep); }
.lv-image-brief { justify-self: center; margin: -7px 0; padding: 4px 8px; z-index: 2; background: var(--green); color: #fff; font: 700 .52rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.lv-content-package { padding: 12px; border-width: 3px; box-shadow: 8px 9px 0 rgba(38,51,59,.16); }
.lv-content-package > div { margin-top: 10px; border: var(--rule); }
.lv-content-package > div b { display: block; padding: 8px; font-size: .72rem; }
.lv-content-package > div b + b { border-top: var(--hairline); }
.lv-content-package > p { margin: 12px 0 6px; font: 700 .58rem var(--mono); text-transform: uppercase; }
.lv-content-package ul { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--rule); }
.lv-content-package li { padding: 7px 3px; border-left: var(--hairline); font-size: .62rem; font-weight: 700; text-align: center; }
.lv-content-package li:first-child { border-left: 0; }
.lv-content-package li.is-primary { background: var(--green); color: #fff; }
.lv-content-package small { display: block; margin-top: 9px; color: var(--muted); font-size: .58rem; }

@container (max-width: 560px) {
  .lv-content-line { grid-template-columns: 1fr; }
  .lv-content-arrow { width: 24px; height: 34px; justify-self: center; }
  .lv-content-arrow::before { left: 11px; right: auto; top: 2px; bottom: 9px; border-top: 0; border-left: 2px solid var(--ink); }
  .lv-content-arrow::after { right: auto; left: 6px; top: auto; bottom: 1px; border-inline: 6px solid transparent; border-block: 0; border-top: 8px solid var(--ink); }
  .lv-content-inputs ul { grid-template-columns: repeat(2, 1fr); }
  .lv-content-lane ol { grid-template-columns: 1fr; }
  .lv-content-lane li { min-height: 48px; border-left: 0; border-top: var(--hairline); }
  .lv-content-lane li:first-child { border-top: 0; }
  .lv-content-inputs li, .lv-content-lane li b, .lv-content-package > div b { font-size: .78rem; }
  .lv-content-package li { font-size: .7rem; }
}

/* ── wipe: one screen, two real captures, a seam you can move ────────── */
.ev-live-wipe .ev-live-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ev-live-wipe { background: #fff; }
.lv-wipe { --pos: 50%; padding: clamp(10px, 1.4vw, 16px); }
.lv-wipe-screen {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2;
  border: 2px solid var(--ink); background: #fff;
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.lv-wipe-after, .lv-wipe-before { position: absolute; inset: 0; }
.lv-wipe-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.lv-wipe-screen img, .lv-wipe-screen picture {
  display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top center;
  border: 0; pointer-events: none;
}
.lv-wipe-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2;
  width: 44px; margin-left: -22px; cursor: ew-resize; outline: none;
}
.lv-wipe-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
  background: var(--ink); box-shadow: 0 0 0 1px #fff;
}
.lv-wipe-grip {
  position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; translate: -50% -50%;
  border: 3px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 rgba(38, 51, 59, .3);
}
/* Two arrowheads, drawn, pointing away from the seam. */
.lv-wipe-grip::before, .lv-wipe-grip::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px;
  border-block: 5px solid transparent;
}
.lv-wipe-grip::before { left: 5px; border-right: 7px solid var(--ink); }
.lv-wipe-grip::after { right: 5px; border-left: 7px solid var(--ink); }
.lv-wipe-handle:focus-visible .lv-wipe-grip { outline: 3px solid var(--ink); outline-offset: 3px; background: var(--red); }
.lv-wipe.is-dragging .lv-wipe-grip { background: var(--red); }
.lv-wipe-tag[hidden] { display: none; }
.lv-wipe-tag {
  position: absolute; top: 10px; z-index: 1; padding: 4px 8px 3px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  pointer-events: none;
}
.lv-wipe-tag.is-before { left: 10px; }
.lv-wipe-tag.is-after { right: 10px; }
.lv-wipe.shows-after .lv-wipe-tag.is-before,
.lv-wipe.shows-before .lv-wipe-tag.is-after { opacity: .35; }

/* Inside a monitor the screen is the monitor's glass. */

.lv-wipe-monitor .desktop-monitor-screen { border: 1px solid rgba(21, 25, 24, .7); }
.lv-wipe-monitor .lv-wipe-screen { border: 0; }
.ev-live-frame-monitor.is-live { background: transparent; border: 0; box-shadow: none; }
.ev-live-frame-monitor .lv-wipe-monitor { padding: 4px 0 30px; }

/* ── shared-layer: the reporting layer, redrawn live ─────────────────── */
.ev-live-shared-layer { background: #fff; }
.lv-layer { container-type: inline-size; padding: clamp(12px, 1.6vw, 18px); background: var(--paper); }
.lv-layer-flow {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1.02fr) 26px minmax(0, 1.08fr);
}
.lv-layer ul { list-style: none; margin: 0; padding: 0; }
.lv-inputs { display: grid; gap: 10px; }
.lv-source { border: 2px solid var(--ink); background: #fff; }
.lv-source > p {
  margin: 0; padding: 6px 8px 5px; border-bottom: 1px solid rgba(21, 25, 24, .22);
  font-family: var(--mono); font-size: .54rem; font-weight: 700; letter-spacing: .07em;
  line-height: 1.2; text-transform: uppercase; color: var(--muted);
}
.lv-source.is-direct > p { background: var(--yellow); color: var(--ink); }
.lv-source.is-direct ul { display: grid; grid-template-columns: 1fr 1fr; }
.lv-source.is-checks ul { display: grid; grid-template-columns: repeat(3, 1fr); }
.lv-tool {
  position: relative; min-width: 0; display: flex; align-items: center; gap: 6px;
  padding: 7px 6px; border-top: 1px solid rgba(21, 25, 24, .22);
}
.is-direct .lv-tool:nth-child(-n + 2) { border-top: 0; }
.is-direct .lv-tool:nth-child(even) { border-left: 1px solid rgba(21, 25, 24, .22); }
.is-checks .lv-tool { display: block; padding: 7px 4px 8px; text-align: center; border-top: 0; }
.is-checks .lv-tool + .lv-tool { border-left: 1px solid rgba(21, 25, 24, .22); }
.lv-logo { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; }
.is-checks .lv-logo { margin: 0 auto 4px; }
.lv-logo svg, .lv-logo img { display: block; width: 18px; height: 18px; fill: var(--ink); object-fit: contain; }
.lv-tool > span:not(.lv-logo) { min-width: 0; }
.lv-tool strong { display: block; font-size: .7rem; line-height: 1.05; }
.lv-tool small { display: block; margin-top: 2px; color: var(--muted); font-size: .56rem; line-height: 1.15; }
.lv-tool.is-on { background: var(--manila); }
/* A cross-check's tick: a small inked box in the corner. */
.lv-check {
  position: absolute; top: 4px; right: 4px; width: 12px; height: 12px;
  border: 1.5px solid var(--ink); background: #fff;
}
.lv-check::after {
  content: ""; position: absolute; left: 2.5px; top: -1px; width: 3.5px; height: 7px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); rotate: 40deg;
}
.lv-layer.is-running .lv-tool:not(.is-checked) .lv-check::after { visibility: hidden; }

.lv-arrow { position: relative; align-self: center; height: 24px; }
.lv-arrow::before { content: ""; position: absolute; left: 4px; right: 7px; top: 11px; border-top: 2px solid var(--ink); }
.lv-arrow::after {
  content: ""; position: absolute; right: 2px; top: 6px;
  border-block: 6px solid transparent; border-left: 8px solid var(--ink);
}
.lv-pulse {
  position: absolute; left: 2px; top: 7px; width: 10px; height: 10px; z-index: 1;
  background: var(--yellow); border: 2px solid var(--ink); opacity: 0;
}

.lv-hub { padding: 12px; border: 3px solid var(--ink); background: #fff; box-shadow: 8px 9px 0 rgba(38, 51, 59, .16); }
.lv-hub-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--mono); font-size: .54rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.lv-chip { padding: 3px 5px 2px; border: 1.5px solid var(--ink); background: var(--yellow); color: var(--ink); }
.lv-hub-title { margin: 8px 0 9px; font-family: var(--display); font-weight: 800; font-size: clamp(.95rem, 1.35vw, 1.2rem); line-height: .98; letter-spacing: -.02em; }
.lv-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); border-bottom: 0; }
.lv-tabs span { padding: 4px 2px; font-size: .54rem; font-weight: 700; text-align: center; }
.lv-tabs span + span { border-left: 1px solid rgba(21, 25, 24, .22); }
.lv-rows { border: 2px solid var(--ink); }
.lv-rows li {
  display: grid; grid-template-columns: 7px minmax(0, 1fr); column-gap: 8px; align-items: center;
  padding: 6px 7px; border-top: 1px solid rgba(21, 25, 24, .22);
}
.lv-rows li:first-child { border-top: 0; }
.lv-rows b { font-size: .68rem; line-height: 1.1; }
.lv-rows small { grid-column: 2; color: var(--muted); font-size: .56rem; line-height: 1.15; }
.lv-signal { grid-row: span 2; width: 7px; height: 22px; background: var(--yellow); transform-origin: bottom; }
.lv-signal.is-blue { background: var(--blue); }
.lv-signal.is-red { background: var(--red); }
.lv-signal.is-green { background: var(--green); }
.lv-layer.is-running .lv-rows li:not(.is-filled) .lv-signal { transform: scaleY(.22); opacity: .45; }
.lv-rows li.is-on { background: var(--manila); }
.lv-weekly { margin-top: 9px; padding: 7px 8px; background: var(--ink); color: var(--paper); }
.lv-weekly b { display: block; font-size: .66rem; }
.lv-weekly span { display: block; margin-top: 2px; color: var(--paper-deep); font-size: .56rem; }

.lv-slack { overflow: hidden; border: 3px solid var(--ink); background: #fff; box-shadow: 8px 9px 0 rgba(38, 51, 59, .16); }
.lv-slack-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 9px; background: var(--ink); color: var(--paper);
}
.lv-slack-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lv-slack-title svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }
.lv-slack-title strong { font-size: .76rem; white-space: nowrap; }
.lv-slack-head > span:last-child { font-family: var(--mono); font-size: .5rem; letter-spacing: .07em; text-transform: uppercase; color: var(--paper-deep); text-align: right; }
.lv-messages { display: grid; gap: 10px; padding: 11px 9px 8px; }
.lv-msg { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; align-items: start; }
.lv-avatar { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--ink); background: var(--paper-deep); font-size: .62rem; font-weight: 800; }
.lv-avatar.is-bot { background: var(--yellow); }
.lv-msg small { display: block; margin-bottom: 2px; font-size: .54rem; color: var(--muted); }
.lv-msg b { display: block; font-size: .74rem; line-height: 1.2; }
.lv-msg.is-answer > div { padding: 7px 8px; border: 1px solid rgba(21, 25, 24, .22); background: var(--paper); }
.lv-msg.is-answer.is-on > div { outline: 3px solid var(--yellow); outline-offset: 0; }
.lv-route { display: inline-block; margin-top: 5px; font-family: var(--mono); font-size: .52rem; color: var(--muted); }
.lv-slack-note { margin: 0 9px 10px 38px; padding-top: 7px; border-top: 1px solid rgba(21, 25, 24, .22); font-size: .6rem; line-height: 1.3; color: var(--muted); }

/* Business intelligence: two visibly different source families converge
   before the shared layer branches to dashboards and public questions. */
.lv-layer-flow { grid-template-columns: minmax(0, 1.32fr) 24px minmax(0, .72fr) 24px minmax(0, 1.24fr); }
.lv-inputs { grid-template-columns: 1.08fr .92fr; align-items: stretch; }
.lv-source.is-data > p { background: var(--yellow); color: var(--ink); }
.lv-source.is-data ul { display: grid; grid-template-columns: repeat(2, 1fr); }
.lv-source.is-data .lv-tool { min-height: 43px; }
.lv-source.is-data .lv-tool:nth-child(-n + 2) { border-top: 0; }
.lv-source.is-data .lv-tool:nth-child(even) { border-left: var(--hairline); }
.lv-source.is-data .lv-tool:nth-child(7) { grid-column: 1 / -1; border-right: var(--hairline); }
.lv-source.is-data .lv-tool small { display: none; }
.lv-source.is-knowledge > p { background: var(--paper-deep); color: var(--ink); }
.lv-source.is-knowledge ul { padding: 7px; display: grid; gap: 6px; }
.lv-source.is-knowledge li { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 7px; min-height: 38px; padding: 5px 7px; border: var(--hairline); background: var(--paper); }
.lv-source.is-knowledge b { font-size: .62rem; line-height: 1.1; }
.lv-folder { position: relative; display: block; width: 23px; height: 16px; margin-top: 4px; border: 1.5px solid var(--ink); background: #fff0b8; }
.lv-folder::before { content: ""; position: absolute; left: -1.5px; top: -6px; width: 13px; height: 6px; border: 1.5px solid var(--ink); border-bottom: 0; background: #fff0b8; }
.lv-hub { align-self: center; text-align: center; background: var(--yellow); }
.lv-hub-title { font-size: clamp(1.08rem, 1.5vw, 1.32rem); }
.lv-context-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; margin-top: 14px; }
.lv-context-pair span { padding: 8px 5px; border: var(--rule); background: #fff; font-size: .62rem; font-weight: 800; }
.lv-context-pair b { font-family: var(--mono); }
.lv-outputs { display: grid; gap: 10px; }
.lv-dashboard { padding: 9px; border: 3px solid var(--ink); background: #fff; box-shadow: 8px 9px 0 rgba(38, 51, 59, .16); }
.lv-output .lv-tabs, .lv-dashboard .lv-tabs { border-bottom: 0; }
.lv-dashboard .lv-weekly { margin-top: 7px; }
.lv-outputs .lv-slack { box-shadow: none; border-width: 2px; }
.lv-outputs .lv-messages { grid-template-columns: 1fr; gap: 7px; padding: 8px; }
.lv-outputs .lv-msg { grid-template-columns: 20px 1fr; }
.lv-outputs .lv-msg:first-child { display: none; }
.lv-outputs .lv-slack-note { margin: 0 8px 8px; padding-top: 6px; }

/* Narrow container: the same drawing, read top to bottom. */
@container (max-width: 560px) {
  .lv-layer-flow { grid-template-columns: minmax(0, 1fr); }
  .lv-inputs { grid-template-columns: 1fr; }
  .lv-source.is-data .lv-tool small { display: block; }
  .lv-source.is-knowledge b { font-size: .75rem; }
  .lv-outputs { gap: 12px; }
  .lv-arrow { height: 34px; width: 24px; justify-self: center; }
  .lv-arrow::before { left: 11px; right: auto; top: 2px; bottom: 9px; border-top: 0; border-left: 2px solid var(--ink); }
  .lv-arrow::after { right: auto; left: 6px; top: auto; bottom: 1px; border-inline: 6px solid transparent; border-block: 0; border-top: 8px solid var(--ink); }
  .lv-pulse { left: 7px; top: 1px; }
  .lv-tool strong { font-size: .8rem; }
  .lv-tool small, .lv-rows small, .lv-weekly span, .lv-msg small { font-size: .66rem; }
  .lv-source > p, .lv-hub-head, .lv-tabs span { font-size: .62rem; }
  .lv-rows b, .lv-weekly b { font-size: .8rem; }
  .lv-hub-title { font-size: 1.35rem; }
  .lv-msg b { font-size: .86rem; }
  .lv-route, .lv-slack-head > span:last-child { font-size: .6rem; }
  .lv-slack-note { font-size: .72rem; }
  .lv-logo, .lv-logo svg, .lv-logo img { width: 22px; height: 22px; flex-basis: 22px; }
}

/* ── motion: only when it is welcome ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .lv-switch-knob { transition: transform var(--t-quick) var(--ease-drawer); }
  .lv-switch-track { transition: background-color var(--t-quick) linear; }
  .lv-article { transition: transform 380ms var(--ease-drawer); }
  .lv-slip.is-running .lv-belt { animation: lv-belt .5s linear infinite; }
  .lv-slip.is-reversing .lv-belt { animation-direction: reverse; animation-duration: .25s; }
  @keyframes lv-belt { to { background-position: 0 11px; } }
  .lv-stage, .lv-gate { transition: background-color 200ms linear; }
  .lv-signal { transition: transform 320ms var(--ease-spring), opacity 200ms linear; }
  .lv-tool, .lv-rows li { transition: background-color 240ms linear; }
}

/* ── narrow screens: every piece becomes an ordinary block in the stack ── */
@media (max-width: 980px) {
  .ev-live { box-shadow: 8px 10px 0 rgba(38, 51, 59, .18); }
  .is-snapshot .ev-group-live { display: grid; }
  .lv-sheet-frame, html[data-js] .ev-live-sheet-helper .ev-live-stage { height: 460px; }
  .lv-slip { padding-left: 42px; padding-right: 10px; }
  .lv-belt { left: 8px; }
  .lv-article { left: 11px; }
  .evidence-set > .ev-group-live { margin-top: 18px; }
  .ev-live-frame-monitor .lv-wipe-monitor { padding-bottom: 22px; }
  .evidence-hero-inset:has(.ev-live) .ev-inset { width: 100%; margin-top: 0; rotate: none; }
}