/* Road log + case detail.
 *
 * Ported from the comps, with two changes they needed on the way out: the comp
 * was fixed at min-width 1080px, and every rule lived in an inline `style=`
 * attribute with a non-standard `style-hover` attribute the mockup runtime
 * interpreted. Here it is real CSS with real breakpoints.
 */

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

/* `hidden` has to actually hide things.
 *
 * The browser's own `[hidden] { display: none }` lives in the user-agent
 * stylesheet, which loses to *any* author rule that sets `display` -- specificity
 * does not come into it, origin does. `.dash__idle` set `display: flex`, so the
 * "Camera off." overlay stayed painted across the live camera preview on a phone
 * even though the JS had correctly set the attribute.
 *
 * Every other `hidden` element on the site works by luck: their classes happen
 * not to set `display`. This makes it a rule instead of a coincidence. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--rust); }

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

/* ---------------------------------------------------------------- nav */
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 24px 0;
  flex-wrap: wrap;
}
.nav__mark {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
/* Wraps, because the number of links is not fixed. `.nav` itself wrapped from
   the start but this row did not, so adding a fifth link pushed it past a 320px
   viewport and took the whole page's horizontal scroll with it -- the row was
   331px wide inside a 284px container. Four links happened to fit; that was the
   only thing holding it together. */
.nav__links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 22px;
  font-size: 14px;
  min-width: 0;
}
.nav__links a { color: var(--muted); }
.nav__links a.is-active { color: var(--ink); }
/* The push to the right edge moved to `.nav__right`, which wraps this and the
   account chip. Left here it would have applied inside that flex row instead,
   splitting the pair apart. */
.nav__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
/* The right-hand cluster. Takes the `margin-left: auto` that used to sit on
   `.nav__status`, so the status line and the account chip move together instead
   of the chip being the one thing that wraps. */
.nav__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.nav__auth {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.nav__signin {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.nav__signin:hover { border-color: var(--ink); }
.nav__signin[disabled] { opacity: 0.5; cursor: progress; }

/* --- the account chip -------------------------------------------------
   Fixed at avatar width whatever the address is. The email used to render
   inline here, which made the longest thing in the header a value nobody
   controls -- one long address set the width of the nav and wrapped the row. */
.account { position: relative; display: inline-flex; }
.account__chip {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper-2, #F3F2EC);
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.account__chip:hover { border-color: var(--ink); }
.account__chip[aria-expanded="true"] { border-color: var(--ink); }
/* The initial sits underneath the photo rather than instead of it, so a slow
   or broken avatar never leaves an empty circle. */
.account__initial {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1;
}
.account__avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 210px;
  max-width: 300px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(26, 26, 24, 0.13);
  text-align: left;
}
.account__name {
  margin: 0 0 2px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.account__email {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  /* Long addresses wrap inside the menu, where there is room for them. */
  overflow-wrap: anywhere;
}
.account__signout {
  font-family: var(--mono);
  font-size: 11px;
  width: 100%;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.account__signout:hover { border-color: var(--ink); }

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: rc-breathe 2.4s ease-in-out infinite;
}

/* --------------------------------------------------------------- hero */
/* Asymmetric, and the picture takes the larger half. It used to be a 420px
   column holding an illustration; it now holds a frame of the footage, and a
   dashcam frame is 16:9 -- at 420px that is a 236px-tall strip with no
   presence next to a 68px headline. */
.hero {
  padding: 58px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
.hero h1 em { font-style: italic; color: var(--rust); }
.hero p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0;
}
.hero__art { min-width: 0; }

/* --------------------------------------------------- stat band (dark) */
.band {
  margin-top: 64px;
  background: var(--ink);
  color: var(--paper);
  padding: 0 0 46px;
  position: relative;
}
/* The dashed lane marking along the top edge. */
.band::before {
  content: "";
  display: block;
  height: 8px;
  margin-bottom: 46px;
  background-image: repeating-linear-gradient(
    to right,
    var(--amber) 0 64px,
    transparent 64px 128px
  );
}
.band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.stat { border-left: 3px solid var(--amber); padding-left: 22px; }
.stat__value {
  font-family: var(--display), var(--sans);
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__value small { font-size: 26px; font-weight: 700; }
.stat__label {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  line-height: 1.45;
}

/* ---------------------------------------------------------- log header */
.log { padding: 64px 0 110px; }
.log h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.log__summary {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 26px;
}

.filters {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.filters a {
  font-size: 14px;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.filters a.is-active { color: var(--ink); border-bottom-color: var(--rust); }
.filters .count { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }

.pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--ink-2);
  background: transparent;
}
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill .count { font-family: var(--mono); font-size: 11px; opacity: 0.7; }

/* ------------------------------------------------------------ case row */
.cases { display: flex; flex-direction: column; }
.case {
  display: grid;
  grid-template-columns: 216px 1fr 190px;
  gap: 26px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.case:hover { background: rgba(26, 26, 24, 0.018); }
.case--suppressed { opacity: 0.62; }

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #E8E7E0 0 7px, #EFEEE8 7px 14px);
  border: 1px solid var(--rule-2);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb__id {
  position: absolute; top: 6px; left: 6px;
  font-family: var(--mono); font-size: 10px;
  background: rgba(26, 26, 24, 0.82); color: var(--paper);
  padding: 2px 6px; border-radius: 3px;
}
.thumb__when {
  position: absolute; bottom: 6px; right: 6px;
  font-family: var(--mono); font-size: 10px;
  background: rgba(26, 26, 24, 0.82); color: var(--paper);
  padding: 2px 6px; border-radius: 3px;
}
/* Detection box, positioned from fractions the model returned. */
.box {
  position: absolute;
  border: 2px solid var(--rust);
  border-radius: 2px;
  pointer-events: none;
}
.box--clear { border-color: var(--green); }
.box__label {
  position: absolute; top: -18px; left: -2px;
  font-family: var(--mono); font-size: 9px;
  background: var(--rust); color: #fff;
  padding: 1px 5px; border-radius: 2px;
  white-space: nowrap;
}

.case__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.case__where { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.case__sentence {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 62ch;
}
.case__ref { text-align: right; }
.case__ref-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted-2);
}
.case__ref-value {
  font-family: var(--mono); font-size: 14px;
  margin-top: 4px; color: var(--ink);
  word-break: break-all;
}
.case__open {
  margin-top: 12px; font-size: 13px; color: var(--muted);
  display: inline-block;
}
.case:hover .case__open { color: var(--rust); }

.empty {
  padding: 64px 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
.empty code {
  font-family: var(--mono);
  background: var(--rule);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ------------------------------------------------------- case detail */
.detail__bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 250, 248, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.chip {
  font-family: var(--mono); font-size: 12px;
  background: var(--ink); color: var(--paper);
  padding: 3px 9px; border-radius: 3px;
}
.detail__bar h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 19px; margin: 0;
}
.detail__clock {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.watch-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid currentColor;
}
.watch-pill .dot { animation: rc-blink 1.6s ease-in-out infinite; background: currentColor; }

.detail {
  display: grid;
  /* minmax(0, …) on the left column matters: it holds the raw model JSON in a
   * non-wrapping <pre>, and a grid track sized in plain `fr` still refuses to
   * shrink below its content's min-width. Without this the JSON forces the
   * track wide and crushes the sidebar to a few characters. */
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 44px;
  padding: 34px 0 110px;
  align-items: start;
}
.detail > * { min-width: 0; }
.detail__meta {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 10px;
}
.detail h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 40px; line-height: 1.05;
  letter-spacing: -0.02em; margin: 0 0 8px;
}
.detail__where { font-size: 15px; color: var(--muted); margin: 0 0 28px; }

/* The CCTV bezel. */
.viewer {
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  background: var(--ink);
  margin-bottom: 26px;
}
.viewer__head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px;
  font-family: var(--mono); font-size: 11px;
  color: var(--paper);
}
.viewer__head .dot { background: var(--rust); animation: rc-blink 1.6s ease-in-out infinite; }
.viewer__head .spacer { margin-left: auto; color: var(--muted-2); }
.viewer__body { position: relative; background: #000; }
.viewer__body img { width: 100%; display: block; }
.viewer__foot {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 13px;
  background: var(--card);
  border-top: 3px solid var(--ink);
  flex-wrap: wrap;
}
.viewer__next { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.btn {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 8px 15px; border-radius: var(--r-sm);
  border: 2px solid var(--ink); background: var(--amber); color: var(--ink);
  cursor: pointer; box-shadow: var(--shadow-button);
  transition: transform 0.06s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--primary { background: var(--green); color: #fff; border-color: var(--ink); }
.btn--danger { background: var(--rust); color: #fff; border-color: var(--ink); }
.btn--block { display: block; width: 100%; text-align: center; margin-bottom: 10px; }

.filmstrip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 34px;
}
.film { }
.film .thumb { border-radius: var(--r-sm); }
.film--mark .thumb { border: 2px solid var(--rust); }
.film--clear .thumb { border: 2px solid var(--green); }
.film__label {
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); margin-top: 6px;
  display: flex; justify-content: space-between; gap: 6px;
}

.section-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 12px;
}
.prose { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 34px; }

.raw {
  background: var(--ink); color: #D6D6CE;
  border-radius: var(--r-md); padding: 18px;
  margin-bottom: 34px; overflow-x: auto;
}
.raw .section-label { color: var(--muted-2); }
.raw pre {
  margin: 0; font-family: var(--mono);
  font-size: 12px; line-height: 1.6; white-space: pre;
}

.trail { background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-md); }
.trail__item {
  display: grid; grid-template-columns: 18px 116px 1fr;
  gap: 12px; padding: 15px 18px;
  border-bottom: 2px dashed var(--rule);
  align-items: start;
}
.trail__item:last-child { border-bottom: none; }
.trail__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rule-2); margin-top: 6px;
}
.trail__item--key .trail__dot { background: var(--rust); }
.trail__item--warn .trail__dot { background: var(--orange); }
.trail__time { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 3px; }
.trail__text { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.trail__item--key .trail__text { font-weight: 500; color: var(--ink); }
.trail__stage {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-2); display: block; margin-top: 3px;
}

/* ------------------------------------------------------------- sidebar */
.side { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 20px; }

.report-card {
  background: var(--forest); color: #fff;
  border-radius: var(--r-md); padding: 22px;
  box-shadow: var(--shadow-soft);
}
.report-card__ref { font-family: var(--mono); font-size: 21px; margin-bottom: 4px; }
.report-card__label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-soft); margin-top: 16px;
}
.report-card__value { font-size: 14px; margin-top: 4px; line-height: 1.45; }

.sla { background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-md); padding: 20px; }
.sla__note { font-family: var(--mono); font-size: 16px; margin: 6px 0 12px; }
.sla__bar { height: 8px; border: 1px solid var(--ink); border-radius: var(--r-pill); overflow: hidden; }
.sla__fill { height: 100%; }
.sla__why { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; }

.letter { background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-md); padding: 20px; }
.letter pre {
  font-family: var(--serif); font-size: 14.5px; line-height: 1.6;
  white-space: pre-wrap; word-wrap: break-word; margin: 0; color: var(--ink-2);
}
.letter__note {
  margin-top: 14px; font-family: var(--mono); font-size: 10.5px;
  line-height: 1.5; color: var(--muted); border-top: 1px dashed var(--rule); padding-top: 10px;
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .wrap { padding: 0 28px; }
  .hero { grid-template-columns: 1fr; gap: 34px; }
  .hero__art { max-width: 420px; }
  .detail { grid-template-columns: 1fr; gap: 34px; }
  .side { position: static; }
  .band__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
  .case { grid-template-columns: 1fr; gap: 14px; }
  .thumb { max-width: 340px; }
  .case__ref { text-align: left; }
  .band__grid { grid-template-columns: 1fr; }
  .stat__value { font-size: 42px; }
  .filmstrip { grid-template-columns: repeat(2, 1fr); }
  .trail__item { grid-template-columns: 18px 1fr; }
  .trail__time { grid-column: 2; padding-top: 0; }
  .trail__text { grid-column: 2; }
}

/* ------------------------------------------------- generated media
 *
 * Everything here is model output, not camera evidence. The rust rule and the
 * badge are load-bearing: a clip that reads as footage from a public camera
 * would misrepresent the one thing this project's reports depend on being true.
 */
.synth { margin: 30px 0 0; padding-top: 20px; border-top: 2px solid var(--rust); }
.synth__note {
  font-family: var(--mono); font-size: 11px; line-height: 1.65;
  color: var(--muted); margin: 0 0 16px; max-width: 62ch;
}
.synth__item { margin: 0 0 22px; }
.synth__item video,
.synth__item audio { display: block; width: 100%; max-width: 640px; border-radius: 3px; }
.synth__item video { background: var(--ink); box-shadow: 4px 4px 0 var(--rule-2); }
.synth__badge {
  display: inline-block; margin-top: 8px; padding: 3px 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rust); background: #FBEDE7; border: 1px solid var(--rust); border-radius: 2px;
}

/* --- simulation page --- */
.notice {
  margin: 26px 0 34px; padding: 18px 20px;
  background: #FBEDE7; border-left: 3px solid var(--rust); border-radius: 2px;
}
.notice p {
  margin: 0 0 10px; font-family: var(--mono); font-size: 11.5px;
  line-height: 1.7; color: var(--ink-2); max-width: 74ch;
}
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--rust); }

.pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px;
  padding: 30px 0; border-top: 1px solid var(--rule);
}
.pair__evidence img {
  display: block; width: 100%; max-width: 640px;
  border-radius: 3px; box-shadow: 4px 4px 0 var(--rule-2);
}
.pair__meta {
  margin: 12px 0 6px; font-family: var(--mono);
  font-size: 11px; color: var(--muted);
}
.pair__meta a { color: var(--ink); font-weight: 600; }

.models { padding: 26px 0 60px; border-top: 1px solid var(--rule); }
.models ul { margin: 10px 0 0; padding-left: 18px; }
.models li {
  font-family: var(--mono); font-size: 11.5px;
  line-height: 1.9; color: var(--ink-2);
}
.empty {
  padding: 40px 0; font-family: var(--mono);
  font-size: 12px; color: var(--muted);
}

@media (max-width: 1000px) {
  .pair { grid-template-columns: 1fr; gap: 24px; }
}

/* --- generate-a-clip control ------------------------------------------- */
.gen {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px;
}
.gen__cost {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); letter-spacing: 0.02em;
}
.gen__cost code {
  font-size: 10.5px; background: var(--rule);
  padding: 1px 4px; border-radius: 2px;
}
.gen__progress { flex-basis: 100%; margin-top: 4px; }
.gen__bar {
  height: 6px; width: 100%; max-width: 640px;
  background: var(--rule); border-radius: 3px; overflow: hidden;
}
.gen__bar span {
  display: block; height: 100%; width: 0;
  background: var(--rust); border-radius: 3px;
  transition: width 400ms ease;
}
.gen__status {
  margin: 7px 0 0; font-family: var(--mono);
  font-size: 10.5px; color: var(--muted);
}
.gen__status.is-error { color: var(--rust); }
button.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ==================================================== scenario library
 *
 * The AV-simulation surface, in its own colder register (see tokens.css).
 * The register shift is functional: a viewer must never have to read a caption
 * to work out whether they are looking at camera evidence or model output.
 */

/* --- one hazard, two views --- */
.views { padding: 44px 0 10px; border-top: 1px solid var(--rule); }
.views__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.views__head h2 { margin: 0; }
.views__case { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.views__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 24px;
}
.views__col { margin: 0; }
.views__label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 8px;
}
.views__label span { font-family: var(--serif); font-size: 21px; }
.views__label em {
  font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--muted);
}
.views__label em.is-syn { color: var(--syn-accent); }
.views__frame { position: relative; border-radius: 4px; overflow: hidden; }
.views__frame img, .views__frame video { display: block; width: 100%; height: auto; }
.views__frame--real { box-shadow: 4px 4px 0 var(--rule-2); }
.views__frame--syn { background: var(--syn-card); border: 1px solid var(--syn-line); }
.views__seed {
  display: block; padding: 8px 10px; font-family: var(--mono);
  font-size: 10px; color: var(--syn-mute); background: var(--syn-card);
}
.views__note {
  margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 46ch;
}

/* The badge. Not decoration -- it is the thing that keeps a generated clip from
   being mistaken for footage, so it sits *on* the media, never beside it. */
.chip-syn {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 5px 9px; border-radius: 3px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--syn-badge-text); background: var(--syn-badge-bg);
}

/* --- the dark library section --- */
/* The top spacing is padding rather than margin on purpose. As a margin it sat
   *outside* the dark background, so whatever preceded this section showed
   through as a 44px paper-coloured bar -- which is exactly what happened when
   the demo blocks between here and the stat band were removed. */
.library { background: var(--syn-bg); color: var(--syn-text); padding: 90px 0 52px; }
.library__eyebrow {
  margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--syn-mute);
}
.library__head {
  display: grid; grid-template-columns: minmax(0,1.4fr) auto;
  gap: 30px; align-items: end;
}
.library__head h2 { margin: 0 0 12px; color: var(--syn-text); }
.library__lede {
  margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--syn-dim);
}
.library__count {
  margin: 0; font-family: var(--mono); font-size: 10.5px;
  color: var(--syn-mute); text-align: right;
}

.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 26px 0 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 100px; font-size: 12.5px;
  color: var(--syn-dim); background: transparent; border: 1px solid var(--syn-line);
  transition: background 120ms, border-color 120ms, color 120ms;
}
.chip span { font-family: var(--mono); font-size: 10.5px; color: var(--syn-mute); }
.chip:hover { border-color: var(--syn-line-2); color: var(--syn-text); }
.chip.is-active { background: var(--syn-text); border-color: var(--syn-text); color: var(--syn-bg); }
.chip.is-active span { color: rgba(14, 17, 22, 0.55); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  display: flex; flex-direction: column;
  background: var(--syn-card); border: 1px solid var(--syn-line);
  border-radius: 7px; padding: 0 0 4px; overflow: hidden;
}
.card h3 {
  margin: 14px 16px 6px; font-family: var(--sans); font-size: 16px;
  font-weight: 600; color: var(--syn-text);
}
.card__meta {
  margin: 0 16px 12px; font-family: var(--mono);
  font-size: 10.5px; line-height: 1.6; color: var(--syn-mute);
}
.card__media { position: relative; background: #0A0D12; aspect-ratio: 16 / 9; }
.card__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__media--empty { display: grid; place-items: center; }
.card__seedframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.14; filter: grayscale(1);
}
.card__placeholder {
  position: relative; z-index: 1; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.12em; color: var(--syn-mute);
}
.card__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px 10px; border-top: 1px solid var(--syn-line);
}
.card__foot code { font-family: var(--mono); font-size: 10.5px; color: var(--syn-mute); }
.card__foot a { font-size: 13px; color: var(--syn-accent); }
.card__foot a:hover { color: var(--syn-text); }

/* Refused: dashed, so it reads as a deliberate gap rather than a missing clip. */
.card--refused { border-style: dashed; border-color: var(--syn-line-2); padding-top: 18px; }
.card__refused {
  margin: 0 16px 8px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust);
}
.card__body {
  margin: 0 16px 16px; font-size: 13.5px; line-height: 1.6; color: var(--syn-dim);
}

/* --- generate control, in the library's register --- */
.card .gen { display: block; margin: 0 16px 12px; }
.btn--syn {
  background: var(--syn-text); color: var(--syn-bg);
  border: 1px solid var(--syn-text); border-radius: 3px;
  font-size: 12.5px; padding: 7px 12px; cursor: pointer;
}
.btn--syn:hover:not([disabled]) { background: var(--syn-accent); border-color: var(--syn-accent); }
.card .gen__cost { margin: 7px 0 0; font-family: var(--mono); font-size: 10px; color: var(--syn-mute); }
.card .gen__bar { background: var(--syn-line); }
.card .gen__bar span { background: var(--syn-accent); }
.card .gen__status { color: var(--syn-dim); }
.card .gen__status.is-error { color: var(--rust); }

/* --- footer --- */
.synfoot { background: var(--syn-bg); color: var(--syn-dim); padding: 30px 0 60px; }
.synfoot__grid {
  display: grid; grid-template-columns: minmax(0,2fr) 1fr 1fr;
  gap: 30px; border-top: 1px solid var(--syn-line); padding-top: 26px;
}
.synfoot p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; max-width: 56ch; }
.synfoot__mark { font-family: var(--sans); font-weight: 600; color: var(--syn-text); }
.synfoot__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--syn-mute);
}
.synfoot code { font-family: var(--mono); font-size: 11.5px; color: var(--syn-dim); }
.synfoot a { color: var(--syn-accent); }

@media (max-width: 1000px) {
  .views__grid { grid-template-columns: 1fr; }
  .library__head { grid-template-columns: 1fr; }
  .library__count { text-align: left; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .synfoot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .synfoot__grid { grid-template-columns: 1fr; }
}
.synth__link { margin: 4px 0 0; font-family: var(--mono); font-size: 11px; }
/* The library hero runs wider than the log's, so the headline breaks where the
   comp breaks it rather than mid-phrase. */
.hero h1 { max-width: 15ch; }
.card .chip-syn { font-size: 9px; padding: 4px 7px; white-space: nowrap; }
/* Controls only on hover keeps the grid reading as a gallery of stills, which
   is what the comp shows -- but they stay reachable by keyboard. */
.card__media video::-webkit-media-controls { opacity: 0; transition: opacity 120ms; }
.card:hover .card__media video::-webkit-media-controls,
.card__media video:focus::-webkit-media-controls { opacity: 1; }

/* ======================================================= the drill console
 *
 * Sits on the light "field notebook" surface rather than the dark synthetic
 * one: a drill exercises the civic pipeline, and only its inputs are invented.
 */
.drill { padding: 40px 0 20px; border-top: 1px solid var(--rule); }
.drill__head h2 { margin: 6px 0 12px; }
.drill__lede {
  margin: 0 0 22px; max-width: 68ch; font-size: 15px;
  line-height: 1.65; color: var(--ink-2);
}
.drill__form { display: flex; gap: 10px; flex-wrap: wrap; }
.drill__input {
  flex: 1 1 420px; padding: 11px 14px;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule-2); border-radius: 3px;
}
.drill__input:focus { outline: 2px solid var(--forest); outline-offset: -1px; }
/* The generated clip, above the stills cut out of it. */
.drill__clip { margin: 22px 0 0; }
.drill__clip video {
  width: 100%;
  max-width: 720px;
  display: block;
  border-radius: var(--r-sm);
  background: var(--ink);
}
.drill__clip figcaption {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  max-width: 720px;
}

/* The Veo toggle. On by default where the provider allows it, because a drill
   reading flat rectangles demonstrates the plumbing and nothing else. */
.drill__opt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.drill__opt input { margin-top: 3px; flex: 0 0 auto; }
.drill__opt input:disabled { cursor: not-allowed; }
.drill__opt input:disabled + span { color: var(--muted); cursor: not-allowed; }
.drill__opt-note {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.drill__examples {
  margin: 10px 0 0; font-family: var(--mono);
  font-size: 10.5px; color: var(--muted);
}
.drill__example {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  background: none; border: 0; border-bottom: 1px dotted var(--rule-2);
  cursor: pointer; padding: 0;
}
.drill__example:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* --- the six stages --- */
.drill__stages { list-style: none; margin: 26px 0 0; padding: 0; }
.stage {
  display: grid; grid-template-columns: 16px 110px 1fr;
  align-items: baseline; gap: 12px; padding: 7px 0;
  border-bottom: 1px dashed var(--rule);
}
.stage__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rule-2); justify-self: center;
}
.stage__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2);
}
.stage__detail {
  font-family: var(--mono); font-size: 11px;
  line-height: 1.6; color: var(--ink-2);
}
.stage.is-running .stage__dot { background: var(--amber); animation: rc-pulse 1s infinite; }
.stage.is-running .stage__label { color: var(--ink); }
.stage.is-done .stage__dot { background: var(--green); }
.stage.is-done .stage__label { color: var(--ink); }
.stage.is-failed .stage__dot { background: var(--rust); }
.stage.is-failed .stage__label,
.stage.is-failed .stage__detail { color: var(--rust); }
.stage.is-blocked .stage__dot { background: var(--rust); opacity: 0.4; }
@keyframes rc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.drill__error {
  margin: 16px 0 0; padding: 12px 14px;
  font-family: var(--mono); font-size: 11.5px; color: var(--rust);
  background: #FBEDE7; border-left: 3px solid var(--rust); border-radius: 2px;
}

/* --- staged frames --- */
.drill__out { margin-top: 26px; }
.drill__frames { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.drill__frame { margin: 0; }
.drill__frame img {
  display: block; width: 300px; max-width: 100%;
  border-radius: 3px; box-shadow: 4px 4px 0 var(--rule-2);
}
.drill__frame figcaption {
  margin-top: 6px; font-family: var(--mono);
  font-size: 10px; color: var(--muted);
}

/* --- the draft, and the send it will not do --- */
.draft {
  background: var(--card); border: 1px solid var(--rule-2);
  border-radius: 4px; padding: 20px 22px;
}
.draft__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 10px;
}
.draft__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.draft__case { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.draft__subject { margin: 14px 0 10px; font-family: var(--sans); font-weight: 600; }
.draft__body {
  margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.65;
  white-space: pre-wrap; word-wrap: break-word; color: var(--ink-2);
  max-height: 260px; overflow-y: auto;
}
.draft__send {
  margin-top: 18px; padding-top: 16px;
  border-top: 2px solid var(--rust);
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
}
.draft__button[disabled] {
  opacity: 1; cursor: not-allowed;
  background: var(--rule); color: var(--muted-2);
  border: 1px dashed var(--muted-2); white-space: nowrap;
}
.draft__button.is-wrong { background: var(--rust); color: #fff; }
.draft__why {
  margin: 0; font-family: var(--mono); font-size: 11px;
  line-height: 1.7; color: var(--ink-2); max-width: 64ch;
}
.draft__why strong { color: var(--rust); }
/* The one outcome on this site that is not a restraint. Everywhere else the
   rust `strong` reads as "and here is why it stopped"; a completed send is the
   opposite claim and must not borrow the colour that means "held". */
.draft__why--sent strong { color: var(--green); }
.demo-send__to { font-family: var(--mono); color: var(--ink); }

@media (max-width: 720px) {
  .stage { grid-template-columns: 16px 1fr; }
  .stage__detail { grid-column: 2; }
  .draft__send { grid-template-columns: 1fr; }

  /* The input already takes the full row, so the button wraps beneath it and
     sat there at its content width -- a 95px button under a 354px field, which
     reads as a layout that gave up rather than one that adapted. Full width is
     also the easier tap target, which is the point on a phone. */
  .drill__form { gap: 12px; }
  .drill__input { flex: 1 1 100%; }
  .drill__run, .drill__form .btn { width: 100%; }

  /* Long enough to need the room, and it is a monospace list of examples. */
  .drill__examples { font-size: 12px; line-height: 1.7; }
}

/* --- case page, after the trim ---------------------------------------- */
/* Raw JSON is now a <details>. It restates the prose above it, so it is there
   for anyone who wants proof the model returned structure, not for reading. */
.raw > summary { cursor: pointer; list-style: none; }
.raw > summary::-webkit-details-marker { display: none; }
.raw > summary::before { content: "▸ "; color: var(--muted-2); }
.raw[open] > summary::before { content: "▾ "; }
/* ...and it must wrap. `white-space: pre` clipped the description mid-word
   behind a horizontal scrollbar nobody found. */
.raw pre { white-space: pre-wrap; word-break: break-word; }

/* The DRY RUN note was the load-bearing half of the letter block and sat at the
   bottom where nobody scrolled. It now leads, and the letter itself folds. */
.letter__note--top {
  margin: 0 0 12px; padding: 8px 10px;
  background: #FBEDE7; border-left: 3px solid var(--rust); border-radius: 2px;
  color: var(--rust); border-top: 0; padding-top: 8px;
}
.letter__more > summary {
  cursor: pointer; font-family: var(--mono); font-size: 11px;
  color: var(--muted); list-style: none;
}
.letter__more > summary::-webkit-details-marker { display: none; }
.letter__more > summary::before { content: "▸ "; }
.letter__more[open] > summary::before { content: "▾ "; }
.letter__more pre { margin-top: 10px; }

/* Generated media now sits last on the page; give it room from the trail. */
.synth { margin-top: 34px; }

/* --- the report card, told honestly ----------------------------------- */
/* A composed-but-unsent report should not look like a receipt. The draft
   variant keeps the layout and drops the celebratory framing. */
.report-card--draft { background: #14342A; border: 1px dashed var(--green-soft); }
.report-card__stamp {
  margin: 0 0 10px; padding: 4px 8px; display: inline-block;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #14342A; background: var(--yellow); border-radius: 2px;
}
.report-card__caveat {
  margin: 6px 0 14px; font-family: var(--mono); font-size: 10px;
  line-height: 1.6; color: var(--green-soft); opacity: 0.85;
}
.viewer__said {
  margin: 0; padding: 10px 14px;
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
  color: var(--ink-2); background: var(--paper);
  border-top: 1px solid var(--rule);
}
/* The synth block sits between the evidence and "What I saw" now, so it needs
   room on both sides -- its trailing link was touching the next section label. */
.synth { margin-top: 34px; margin-bottom: 34px; padding-bottom: 4px; }
.synth__link { margin: 12px 0 0; }

/* --- case page: the camera frame beside its re-staging ------------------ */
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.twoup--solo { grid-template-columns: 1fr; }
.twoup .viewer { margin: 0; }
.restage { margin: 0; }
.restage__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 0 8px; border-bottom: 1px solid var(--rule); margin-bottom: 10px;
}
.restage__head span { font-family: var(--serif); font-size: 19px; }
.restage__head em {
  font-style: normal; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.1em; color: var(--rust);
}
.restage__frame {
  position: relative; background: #0A0D12;
  border: 1px solid var(--rule-2); border-radius: 4px; overflow: hidden;
}
.restage__frame video { display: block; width: 100%; height: auto; }
.restage__note {
  margin: 10px 0 0; font-family: var(--mono); font-size: 10.5px;
  line-height: 1.6; color: var(--muted); max-width: 46ch;
}
@media (max-width: 1000px) { .twoup { grid-template-columns: 1fr; } }

/* --- case page: the clip, and the looks as a record -------------------- */
.stage-view { display: grid; grid-template-columns: 1fr; gap: 22px; }
.stage-view__clip { margin: 0; }
.stage-view__clip .restage__frame { max-width: 720px; }

.looks {
  background: var(--card); border: 1px solid var(--rule-2);
  border-radius: var(--r-md); overflow: hidden; max-width: 720px;
}
.looks__head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 11px;
}
.looks__head .spacer { margin-left: auto; color: var(--muted-2); }
.looks__list { list-style: none; margin: 0; padding: 0; }
.look {
  display: grid; grid-template-columns: 88px 1fr auto;
  gap: 12px; align-items: baseline;
  padding: 9px 14px; border-bottom: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 11.5px;
}
.look__time { color: var(--muted); }
.look__label { color: var(--ink-2); }
.look__link { color: var(--muted-2); font-size: 10.5px; }
.look__link:hover { color: var(--rust); }
.look--clear .look__label { color: var(--green); font-weight: 600; }
/* A frame can be both the evidence the report was filed against and the one
   that showed it cleared. The evidence role is the more informative of the two,
   so it is declared last and wins. */
.look--mark .look__label { color: var(--rust); font-weight: 600; }
.look--verdict { background: var(--paper); }
.looks__foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--rule);
}

.stage-view { margin-bottom: 34px; }

/* --- what actually produced this case --------------------------------- */
.provenance {
  margin: 14px 0 18px; padding: 10px 14px;
  font-family: var(--mono); font-size: 11px; line-height: 1.65;
  border-radius: 3px; max-width: 72ch;
}
.provenance code { font-size: 10.5px; }
.provenance--scripted {
  color: var(--ink-2); background: #FDF6E3;
  border-left: 3px solid var(--amber);
}
.provenance--scripted strong { color: var(--olive); }
.provenance--live {
  color: var(--ink-2); background: #EEF5F0;
  border-left: 3px solid var(--green);
}
.provenance--live strong { color: var(--green); }
.look__model { color: var(--muted-2); }

/* --- case page: the agent, run on the clip ----------------------------
   Reuses .restage__frame for the video, .box for the overlay and .stage for
   the strip. What is new here is the frame-by-frame list and the report that
   composes and then stops. */
.run { margin: 0 0 34px; }
.run__stage { max-width: 720px; }
.run__boxes { position: absolute; inset: 0; pointer-events: none; }
/* A box the model measured is drawn solid. One inferred from the lane name is
   dashed, because it is an approximation and should not read as a measurement. */
.box--soft { border-style: dashed; opacity: 0.75; }

.run__controls {
  display: flex; align-items: center; gap: 14px;
  margin: 12px 0 0; flex-wrap: wrap;
}
.run__status, .run__note {
  font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--muted);
}
.run__note {
  margin: 8px 0 0; padding: 8px 12px; max-width: 68ch;
  background: #FDF6E7; border-left: 3px solid var(--amber); border-radius: 2px;
  color: var(--ink-2);
}

.run__frames { max-width: 720px; border: 1px solid var(--rule-2); border-radius: var(--r-md); overflow: hidden; }
.run__empty {
  padding: 12px 14px; font-family: var(--mono);
  font-size: 11.5px; color: var(--muted);
}
.run__frame { cursor: pointer; transition: background 0.12s; }
.run__frame:hover { background: var(--paper); }
.run__frame--at { background: var(--paper); box-shadow: inset 2px 0 0 var(--rust); }
.run__frame--found .look__label { color: var(--rust); }
.run__frame--clear .look__label { color: var(--muted-2); }
.run__conf { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.run__evidence { margin: 22px 0 0; max-width: 720px; }
.run__evidence img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule-2); border-radius: 4px;
}
.run__evidence figcaption {
  margin: 8px 0 0; font-family: var(--mono);
  font-size: 10.5px; line-height: 1.6; color: var(--muted);
}

.run__report { margin: 26px 0 0; max-width: 720px; }
.run__subject {
  margin: 0 0 10px; font-family: var(--mono); font-size: 12px;
  color: var(--ink); font-weight: 600;
}
.run__report pre {
  margin: 0; padding: 14px 16px; max-height: 320px; overflow: auto;
  background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-md);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
  color: var(--ink-2); white-space: pre-wrap;
}
.run__send { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; flex-wrap: wrap; }
.run__error {
  margin: 16px 0 0; padding: 12px 14px; max-width: 68ch;
  font-family: var(--mono); font-size: 11.5px; color: var(--rust);
  background: #FBEDE7; border-left: 3px solid var(--rust); border-radius: 2px;
}
.run__missing {
  margin: 18px 0 30px; padding: 14px 16px; max-width: 68ch;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
  color: var(--muted); background: var(--card);
  border: 1px dashed var(--rule-2); border-radius: var(--r-md);
}

/* --- case page: one column, and the facts on one line ------------------
   The sidebar this replaces carried a second copy of the report, a reference
   caveat and an SLA panel restating the run beneath it. */
.detail--single { grid-template-columns: 1fr; }
.detail--single .side { display: none; }

.facts {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 22px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.facts > span + span::before { content: "·"; margin-right: 10px; color: var(--rule-2); }
.facts__chip {
  padding: 2px 7px; border-radius: 3px;
  background: var(--green-soft, #0F5340); color: #fff;
  font-size: 10px; letter-spacing: 0.04em;
}
.facts__chip--scripted { background: var(--muted-2); }
.facts__chip + span::before { content: none; }

.run__caveat {
  margin: 12px 0 0; max-width: 68ch;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.65;
  color: var(--muted);
}

/* --- dashcam: the first phone-first surface here -----------------------
   Everything else in this file assumes a desktop and collapses gracefully.
   This is the other way round: a viewfinder that should fill a phone screen and
   merely sit politely on a laptop. */
.dash { padding: 8px 0 40px; }
.dash__intro { max-width: 60ch; }
.dash__title {
  font-family: var(--serif); font-weight: 400;
  font-size: 34px; line-height: 1.1; margin: 0 0 10px;
}
.dash__lede {
  margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.dash__warn {
  margin: 14px 0 0; padding: 10px 12px; max-width: 68ch;
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
  background: #FDF6E7; border-left: 3px solid var(--amber); border-radius: 2px;
  color: var(--ink-2);
}

.dash__stage { margin: 22px 0 0; max-width: 760px; }
/* No forced aspect ratio, and no `object-fit`.
   Both used to be here, and together they broke the one thing this page is for.
   A phone held landscape with rotation lock on keeps a portrait layout, so the
   3/4 box matched while the camera delivered a 16:9 stream -- `cover` then threw
   away more than half the width, which is what read as "the picture is sideways".
   Worse, it silently broke every box: the model returns coordinates as fractions
   of the whole frame, the overlay positions them as percentages of the element,
   and `cover` made those two rectangles different. Letting the video keep its own
   shape makes them the same rectangle again, so the boxes are right by
   construction rather than by luck. */
.dash__frame { background: #0A0D12; min-height: 180px; }
.dash__frame video { display: block; width: 100%; height: auto; }
.dash__idle {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font-family: var(--mono); font-size: 12px; color: var(--muted-2);
}

.dash__bar {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 0 0; flex-wrap: wrap;
}
.dash__go { min-height: 46px; padding-inline: 22px; }  /* a thumb, not a cursor */
.dash__status, .dash__count {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}
.dash__count { margin-left: auto; }
.dash__said {
  margin: 14px 0 0; max-width: 68ch;
  font-family: var(--mono); font-size: 12px; line-height: 1.65; color: var(--ink-2);
}
.dash__where {
  margin: 6px 0 0;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.dash__note {
  margin: 18px 0 0; max-width: 70ch;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: var(--muted);
}

@media (max-width: 720px) {
  /* Full-bleed viewfinder: the page padding fights a camera preview. */
  .dash__stage { margin-inline: -18px; max-width: none; }
  .dash__frame { border-radius: 0; border-left: 0; border-right: 0; }
  .dash__bar, .dash__said { padding-inline: 18px; }
  .dash__title { font-size: 27px; }
  .dash__go { flex: 1 1 auto; }
  /* Home indicator and rounded corners on modern phones. */
  .dash { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* --- the handover panel ------------------------------------------------
   What Send reveals. This is the last screen before a real transmission, so it
   shows the request rather than navigating to it: the first version opened the
   agency's intake page, and since every seeded address is `example.invalid` by
   design that meant leaving the demo for a DNS error. */
.handover {
  margin: 16px 0 0; padding: 14px 16px; max-width: 720px;
  background: var(--card); border: 1px solid var(--rule-2);
  border-left: 3px solid var(--green-soft, #0F5340); border-radius: var(--r-md);
}
.handover__stamp {
  margin: 0 0 12px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  color: var(--ink); font-weight: 600;
}
.handover__grid {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 4px 14px; margin: 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
}
.handover__grid dt { color: var(--muted); }
.handover__grid dd { margin: 0; color: var(--ink-2); word-break: break-word; }
.handover__grid--fields { margin-top: 4px; }
.handover__fields-label { margin: 16px 0 0; }
.handover__actions {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 0; flex-wrap: wrap;
}
.handover__copied {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}

@media (max-width: 720px) {
  .handover__grid { grid-template-columns: 1fr; gap: 2px; }
  .handover__grid dt { margin-top: 8px; }
}

/* A case in trouble says so where the facts are, not inside a disclosure
   widget. This is the filing that failed, or the decision to stop escalating
   and hand it to a person -- the two things that used to be visible only if you
   opened the step-by-step trail. */
.facts--attention {
  display: block; max-width: 72ch;
  margin: -12px 0 22px; padding: 8px 12px;
  background: #FBEDE7; border-left: 3px solid var(--rust); border-radius: 2px;
  color: var(--ink-2); line-height: 1.6;
}

/* --- the pin picker ----------------------------------------------------
   Leaflet supplies its own CSS; this is only the frame around it and the line
   underneath that says what was found there. */
.picker { margin: 18px 0 0; max-width: 720px; }
.picker__map {
  height: 280px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  /* Leaflet paints tiles and controls into this box; without it the rounded
     corners are drawn over by square tiles. */
  overflow: hidden;
  background: var(--card);
}
.picker__status {
  margin: 10px 0 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
  color: var(--muted);
}
.picker__status.is-bad { color: var(--rust); }

/* Leaflet's own attribution is small and grey by default and inherits nothing
   from this sheet; left visible on purpose, because OpenStreetMap's licence
   asks for it and it costs one line. */
.picker__map .leaflet-container { font-family: var(--mono); font-size: 10px; }

@media (max-width: 720px) {
  .picker__map { height: 220px; }
}

/* --- case page: where this is ------------------------------------------ */
.wherecard {
  background: var(--card); border: 1px solid var(--rule-2);
  border-radius: var(--r-md); padding: 14px 16px;
}
.wherecard__map { height: 220px; margin: 0; }
.wherecard__act { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; flex-wrap: wrap; }
.wherecard__said, .wherecard__note {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.65; color: var(--muted);
}
.wherecard__note { margin: 12px 0 0; }

/* ------------------------------------------------- sign-in gates + incidents */

/* Shown in place of the camera controls when accounts are configured and
   nobody is signed in. Same treatment on both pages that use one. */
.dash__gate,
.inc__gate {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 26px;
  margin: 0 0 24px;
  background: var(--paper-2, #F3F2EC);
}
.dash__gate-lead,
.inc__gate-lead {
  margin: 0 0 8px;
  font-family: var(--display), var(--sans);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.dash__gate-note {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}
.inc__gate .btn { margin-top: 6px; }

/* The secondary action next to "Report it". Reporting saves and mails; this
   only hands the picture to the phone, so it reads quieter. */
.dash__share {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
}
.dash__share:hover { border-color: var(--ink); color: var(--ink); }

.inc { padding: 8px 0 60px; }
.inc__head { max-width: 60ch; margin: 0 0 32px; }
.inc__head h1 {
  font-family: var(--display), var(--sans);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.inc__lede { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.inc__loading, .inc__empty {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.inc__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}
.inc__card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0 0 18px;
  overflow: hidden;
}
/* The positioning context the box overlay is placed against. Fractions from the
   model are percentages of this element, exactly as on the live dashcam. */
.inc__media { position: relative; line-height: 0; background: var(--ink); }
.inc__media img { width: 100%; height: auto; display: block; }
.inc__box {
  position: absolute;
  border: 2px solid var(--amber);
  border-radius: 2px;
  pointer-events: none;
}
/* Dashed when the coordinates were approximated rather than measured -- the
   same distinction the case pages draw. */
.inc__box--soft { border-style: dashed; }
.inc__box-label {
  position: absolute;
  top: -2px;
  left: -2px;
  transform: translateY(-100%);
  background: var(--amber);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  white-space: nowrap;
  line-height: 1.4;
}
.inc__hazard {
  margin: 18px 18px 8px;
  font-family: var(--display), var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
/* The 24h tally. Rendered only when more than one person reported the same
   thing, so it is an exception on the page rather than a row of identical
   badges -- which is why it can afford to be loud. */
.inc__tally {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 18px 12px;
  padding: 3px 9px;
  border: 1px solid var(--amber);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.inc__tally strong { font-size: 13px; color: var(--ink); }
.inc__held {
  margin: 12px 18px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  border-left: 2px solid var(--amber);
  padding-left: 10px;
}
.inc__desc {
  margin: 0 18px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.inc__facts {
  margin: 0 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 12.5px;
}
.inc__facts dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: baseline;
}
.inc__facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.inc__report { margin: 16px 18px 0; }
.inc__report summary {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}
.inc__report summary:hover { color: var(--ink); }
.inc__body {
  margin: 12px 0 0;
  padding: 14px;
  background: var(--paper-2, #F3F2EC);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* --------------------------------------- the two modes + their dialogs */

.mode { margin-top: 46px; }
.mode:first-of-type { margin-top: 34px; }
.mode__head {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 26px;
  margin-bottom: 24px;
  max-width: 62ch;
}
.mode__title {
  font-family: var(--display), var(--sans);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--syn-text);
  margin: 0 0 10px;
}
.mode__lede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--syn-dim);
}
.mode__lede strong { color: var(--syn-text); }
.mode__empty { font-family: var(--mono); font-size: 12px; color: var(--syn-dim); }

/* The action block on a card. Inset to 16px like `.card .gen`, `.card h3` and
   `.card__meta` -- the card itself has no horizontal padding, so anything that
   does not set its own margin sits flush against the border.

   Namespaced `.act` rather than `.run`, which already belongs to the case
   page's analysis section: `.run { margin: 0 0 34px }` was landing on this and
   pushing the footer down. */
.card .act { display: block; margin: 0 16px 12px; }
.card .act .btn { width: 100%; }
/* The handover reads quieter than the run: one spends Vertex quota and sends
   mail, the other opens a dialog. `.btn` alone is the light-background amber,
   which on a dark card is both loud and off-palette. */
.act--hand .btn {
  background: transparent;
  color: var(--syn-text);
  border: 1px solid var(--syn-line-2, var(--syn-line));
  border-radius: 3px;
  box-shadow: none;
  font-size: 12.5px;
  padding: 7px 12px;
}
.act--hand .btn:hover:not([disabled]) {
  border-color: var(--syn-accent);
  color: var(--syn-accent);
  transform: none;
}
/* The action block renders in two places on two backgrounds: the library cards
   are dark, the case page is paper. So the defaults are the paper ones and the
   card overrides them -- `--syn-dim` and `--green-soft` are chosen to sit on
   `--syn-bg` and are close to invisible on white. */
.act__cost {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
}
.card .act__cost { color: var(--syn-dim); }

.act__stages { list-style: none; margin: 14px 0 0; padding: 0; }

.act__outcome {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--green);
}
.card .act__outcome { color: var(--green-soft); }
.act__outcome--bad { color: var(--rust); }
.card .act__outcome--bad { color: var(--amber); }

/* ---------------------------------------------------------- dialogs */
.modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 620px;
  width: calc(100% - 40px);
  background: var(--paper);
  color: var(--ink);
}
.modal::backdrop { background: rgba(14, 17, 22, 0.62); }
.modal__box { padding: 30px; }
.modal__eyebrow {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.modal__title {
  margin: 0 0 12px;
  font-family: var(--display), var(--sans);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.02em;
}
.modal__lede {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.modal__lede--quiet { font-size: 13px; color: var(--muted); }
.modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 22px;
}
/* The dismissal sits left of the actions, so the primary button is never the
   one a reflex press lands on. */
.modal__actions .btn--primary { margin-left: auto; }

/* --------------------------------------------------- the find dialog

   Shown the moment the model finds something, because a find lasts seconds and
   the buttons in the bar are easy to miss on a phone held up to a windscreen. */
/* The dialog must never grow past the viewport, or the actions at the bottom --
   the entire reason it is on screen -- go out of reach. A phone held sideways is
   the case that breaks: the viewport is barely 400px tall, and a 16:9 still at
   the dialog's full width is taller than that on its own, which pushed "Report
   it now" clean off the bottom.

   So the box is a column that owns the height, and the picture is the part that
   gives way. */
.find {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
.find__box {
  /* The picture is the point, so it gets the room the padding would take. */
  padding: 20px 22px 0;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  /* The fallback, for a viewport shorter than even the tightened landscape
     layout below. Clipping instead would hide the buttons with no way to reach
     them, which is the bug being fixed. */
  overflow-y: auto;
}
/* Pinned to the bottom of the scroll area, so "Report it now" is on screen
   whatever the picture's aspect ratio does to the height above it. Opaque,
   because the still scrolls underneath. */
.find__box > .modal__actions {
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  padding: 10px 0 20px;
  background: var(--paper);
}

/* `fit-content`, and that is load-bearing rather than cosmetic. The box overlay
   is positioned in percentages of this element, so the element has to be exactly
   the size of the rendered image -- a full-width block with a letterboxed image
   inside it would put the box somewhere the hazard is not. Shrink-wrapping keeps
   the percentages honest at whatever size the image ends up, and `margin: auto`
   still centres it because this stays a block. */
.find__media {
  position: relative;
  display: block;
  width: fit-content;
  line-height: 0;
  margin: 0 auto 14px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink);
  max-width: 100%;
}
.find__media img {
  display: block;
  max-width: 100%;
  /* The give. Portrait leaves it generous; landscape is where it earns its
     keep, and the media query below tightens it further. */
  max-height: 48vh;
  max-height: 48dvh;
  width: auto;
  height: auto;
}

/* A phone on its side. Height is the scarce dimension, so the picture yields
   most of it and the text tightens up, which is what keeps the primary action
   on screen without the dialog needing to scroll at all. */
@media (orientation: landscape) and (max-height: 560px) {
  .find__box { padding: 14px 18px 0; }
  .find__media img { max-height: 40vh; max-height: 40dvh; }
  .find__box > .modal__title { font-size: 19px; margin-bottom: 8px; }
  .find__box > .modal__eyebrow { margin-bottom: 6px; }
  .find__box > .modal__lede { font-size: 13.5px; margin-bottom: 10px; }
  .find__box > .modal__actions { margin-top: 12px; padding: 8px 0 14px; }
}
/* Positioned as percentages of the image, the same fractions the live preview
   and the incidents page draw from. */
.find__box-overlay {
  position: absolute;
  border: 2px solid var(--amber);
  border-radius: 2px;
  pointer-events: none;
}
/* Dashed when the model approximated the coordinates rather than measuring
   them -- the same distinction every other box on the site draws. */
.find__box-overlay--soft { border-style: dashed; }
.find__box-label {
  position: absolute;
  top: -2px;
  left: -2px;
  transform: translateY(-100%);
  background: var(--amber);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  white-space: nowrap;
  line-height: 1.4;
}
.find__where {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
/* The one state somebody can act on, so it is the one that is allowed to shout.
   Without coordinates the report cannot be filed at all, and finding that out by
   pressing a button that does nothing is what this whole panel exists to fix. */
.find__where--missing {
  color: var(--ink);
  border-left: 2px solid var(--amber);
  padding-left: 10px;
  /* It is a retry control while it says so, and has to look like one. */
  cursor: pointer;
}
/* A disabled report button has to look disabled. It is flat whenever there is no
   location yet, and that has to read as "not ready" rather than as a dud. */
.find .btn[disabled],
.dash__go[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.hand__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 18px 0;
  padding: 16px;
  border-radius: 8px;
  background: var(--paper-2, #F3F2EC);
  font-size: 13px;
}
.hand__facts dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hand__facts dd { margin: 0; overflow-wrap: anywhere; }
.hand__subject {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 14px;
}
.hand__body {
  margin: 0;
  padding: 16px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.hand__caveat {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* ------------------------------------------------- the hero shot
 *
 * A real frame from a real run, with the box the model actually returned.
 * Percentages below are the fractional coordinates out of the analysis
 * sidecar, multiplied by 100 -- see `partials/hero_art.html`. Changing them to
 * make the animation prettier would make the picture a lie, so don't.
 */
.shot { margin: 0; }
.shot__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #1A1A18;
  border: 1px solid var(--rule-2);
  /* Sits it slightly off the page rather than flat on it. */
  box-shadow: 0 18px 44px -22px rgba(26, 26, 24, 0.45);
}
.shot__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: rc-shot 9s steps(1, end) infinite;
}
/* Three frames, three seconds each, hard cuts. A cross-fade would smear two
   different distances together and lose the sense of closing on the object. */
@keyframes rc-shot {
  0%, 33.33% { opacity: 1; }
  33.34%, 100% { opacity: 0; }
}

.shot__box {
  position: absolute;
  border: 2px solid var(--rust);
  /* A halo, so a box a few pixels tall still separates from grey asphalt. */
  box-shadow: 0 0 0 1px rgba(250, 250, 248, 0.35);
  animation: rc-track 9s steps(1, end) infinite;
}
/* The three looks, held for three seconds each and cut between -- the same
   timing as the frames, so the box is never over the wrong one.
 *
 * Tint, border weight and radius are all per-keyframe rather than set once.
 * At the first look the box is 2.9% x 1.3% -- about 15x4px on the rendered
 * panel -- and a 2px border top and bottom leaves it with no interior at all,
 * while a 2px radius rounds what is left into a pill. The result read as an
 * orange lozenge somebody had dropped on the road rather than a detector
 * finding something. So the far look gets a hairline and square corners, and
 * the fill waits until there is an inside to tint.
 */
@keyframes rc-track {
  0%, 33.33% {
    left: 48.5%; top: 35.1%; width: 2.9%; height: 1.3%;
    background: transparent;
    border-width: 1px;
    border-radius: 0;
  }
  33.34%, 66.66% {
    left: 41.7%; top: 47.3%; width: 16.8%; height: 4.4%;
    background: rgba(180, 69, 31, 0.10);
    border-width: 2px;
    border-radius: 1px;
  }
  66.67%, 100% {
    left: 36.9%; top: 67.7%; width: 28.9%; height: 8.3%;
    background: rgba(180, 69, 31, 0.12);
    border-width: 2px;
    border-radius: 2px;
  }
}

.shot__tag {
  position: absolute;
  left: -2px;
  bottom: calc(100% + 3px);
  background: var(--rust);
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 2px;
  white-space: nowrap;
}
/* One tag per look that has one, each on its own third of the cycle. Text
   cannot be animated, and the confidence genuinely differs between looks. */
.shot__tag { opacity: 0; }
.shot__tag--mid { animation: rc-tag-mid 9s steps(1, end) infinite; }
.shot__tag--near { animation: rc-tag-near 9s steps(1, end) infinite; }
@keyframes rc-tag-mid {
  0%, 33.33% { opacity: 0; }
  33.34%, 66.66% { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}
@keyframes rc-tag-near {
  0%, 66.66% { opacity: 0; }
  66.67%, 100% { opacity: 1; }
}

.shot__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 26%;
  background: linear-gradient(
    to bottom,
    rgba(217, 162, 39, 0) 0%,
    rgba(217, 162, 39, 0.22) 50%,
    rgba(217, 162, 39, 0) 100%
  );
  animation: rc-sweep 9s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes rc-sweep {
  0% { transform: translateY(-30%); opacity: 0; }
  8% { opacity: 1; }
  28% { opacity: 1; }
  33%, 100% { transform: translateY(420%); opacity: 0; }
}

.shot__chip {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #EFEEE6;
  background: rgba(14, 17, 22, 0.72);
  border: 1px solid rgba(239, 238, 230, 0.22);
  border-radius: 3px;
  padding: 3px 7px;
}

/* Grain. Veo output is clean to the point of looking rendered; a little noise
   puts it back in the register of footage somebody's windscreen camera shot. */
.shot__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shot__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
}
.shot__cap code { font-family: var(--mono); color: var(--ink-2); }
.shot__filed { color: var(--green); white-space: nowrap; }

/* Motion is decoration here. Held on the clearest of the three looks, which is
   the one worth seeing if you only see one. */
@media (prefers-reduced-motion: reduce) {
  .shot__still { opacity: 0; }
  .shot__still:last-of-type { opacity: 1; }
  .shot__box {
    left: 36.9%; top: 67.7%; width: 28.9%; height: 8.3%;
    background: rgba(180, 69, 31, 0.12);
    border-width: 2px;
    border-radius: 2px;
  }
  .shot__tag--near { opacity: 1; }
  .shot__scan { display: none; }
}