/* ============================================================
   THE BUREAU — mid-century title-sequence graphics.
   Drenched fields, hard cuts, cut paper. No radius. No shadow.
   No gradient. No glow. Every edge is scissored.
   ============================================================ */

:root{
  --vermilion:#F0451A;
  --ink:#101012;
  --bone:#F4ECDC;
  --chartreuse:#CBD400;
  --teal:#00726B;

  /* Secondary text, tinted from its own field. Never gray. */
  --on-verm-soft:#2A130D;
  --on-ink-soft:#B4AEA3;
  --on-teal-soft:#E2EEEC;
  --on-chart-soft:#3D4000;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --ease:cubic-bezier(.16,1,.3,1);

  --display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --data:"Courier Prime","Courier New",monospace;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ui);
  font-size:clamp(1rem,.94rem + .3vw,1.1rem);
  line-height:1.55;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}

.skip{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--chartreuse);color:var(--ink);
  padding:.75rem 1.25rem;font:700 .85rem/1 var(--ui);
  letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0}

:where(a,button,input):focus-visible{
  outline:3px solid var(--chartreuse);
  outline-offset:3px;
}
.reel--intercept :where(a,button,input):focus-visible{outline-color:var(--ink)}

/* ---------- The reels: each one a drenched field ---------- */
.reel{padding:var(--pad);position:relative}
.reel--title{background:var(--vermilion);color:var(--ink)}
.reel--dossier{background:var(--ink);color:var(--bone)}
.reel--manual{background:var(--teal);color:var(--bone)}
.reel--intercept{background:var(--chartreuse);color:var(--ink)}
.reel--disclose{background:var(--bone);color:var(--ink)}

/* ---------- Stamp: the small tracked caption ---------- */
.stamp{
  font:600 clamp(.62rem,.55rem + .2vw,.75rem)/1.4 var(--ui);
  letter-spacing:.22em;text-transform:uppercase;
  margin:0 0 clamp(1rem,3vw,2rem);
}
.reel--title .stamp{color:var(--on-verm-soft)}
.reel--manual .stamp{color:var(--on-teal-soft)}
.reel--intercept .stamp{color:var(--on-chart-soft)}
.stamp--file{color:var(--on-ink-soft);margin-bottom:.75rem}

/* Redaction: cut paper laid over the word ---------------- */
.rd{
  background:var(--ink);color:transparent;
  padding:0 .12em;user-select:none;
  font-family:var(--data);
}
.reel--dossier .rd,.reel--manual .rd{background:var(--bone)}

/* ---------- Ranked type: the title-card device ---------- */
.rank{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
  line-height:.8;
  letter-spacing:-.015em;
  font-size:clamp(3.4rem,11vw,8.75rem);
}
.rank span{
  display:block;
  margin-left:calc(var(--i) * clamp(.45rem,2.4vw,2.6rem));
}
.rank--sec{font-size:clamp(2.6rem,8vw,6.5rem);margin-bottom:clamp(1.5rem,4vw,2.75rem)}
.rank--file{font-size:clamp(2.75rem,7.5vw,6rem);margin:0 0 .5rem;color:var(--bone)}
.rank--dis{font-size:clamp(2.2rem,6vw,4.5rem)}

/* Entrance: lines rank in on a diagonal, once, on arm. ---- */
.is-armed .reel--title .rank span{
  animation:rankIn .82s var(--ease) both;
  animation-delay:calc(var(--i) * 90ms + var(--rank-lead,120ms));
}
@keyframes rankIn{
  from{opacity:0;transform:translate3d(-.32em,.14em,0);clip-path:inset(0 100% 0 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}

/* ---------- Reel 1 · the issuing office ---------- */
.reel--title{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  grid-template-rows:auto auto auto 1fr auto;
  column-gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(1.5rem,4vh,3rem);
}
.bars{grid-column:1/-1;grid-row:1;display:flex;flex-direction:column;gap:.32rem;margin-bottom:clamp(1rem,2.5vw,1.75rem)}
.bars i{display:block;height:clamp(.42rem,.85vw,.7rem);width:var(--w);background:var(--ink)}
.is-armed .bars i{
  animation:barIn .7s var(--ease) both;
  animation-delay:var(--d);
  transform-origin:left center;
}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.reel--title .stamp{grid-column:1;grid-row:2;margin-bottom:clamp(.75rem,2vw,1.25rem)}
.rank{grid-column:1;grid-row:3}
.lede{
  grid-column:1;grid-row:4;align-self:start;
  max-width:36ch;margin:clamp(1rem,2.5vw,1.5rem) 0 clamp(1.25rem,3vw,1.75rem);
  font-size:clamp(1rem,.95rem + .35vw,1.15rem);
  color:var(--on-verm-soft);
  text-wrap:pretty;
}
.lede strong{color:var(--ink);font-weight:700}
.issue{grid-column:1;grid-row:5;max-width:34rem;align-self:end}

.mark--hero{
  grid-column:2;grid-row:2/6;
  margin:0;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
}
.mark--hero svg{width:100%;height:100%;max-height:min(72svh,640px)}

/* The name field, set as a bar of cut paper ---------------- */
.issue{background:var(--ink);color:var(--bone);padding:clamp(1rem,2.5vw,1.5rem)}
.issue label{
  display:block;
  font:700 .68rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-ink-soft);margin-bottom:.85rem;
}
.issue__row{display:flex;gap:.75rem;align-items:stretch;flex-wrap:wrap}
.issue input{
  flex:1 1 12rem;min-width:0;
  background:transparent;color:var(--bone);
  border:0;border-bottom:2px solid var(--bone);
  font:400 clamp(1.1rem,1rem + .6vw,1.5rem)/1.3 var(--data);
  padding:.35rem .1rem .5rem;
}
.issue input::placeholder{color:var(--on-ink-soft);opacity:1}
.issue button{
  flex:0 0 auto;
  background:var(--chartreuse);color:var(--ink);border:0;
  font:800 clamp(1rem,.95rem + .35vw,1.2rem)/1 var(--display);
  letter-spacing:.1em;text-transform:uppercase;
  padding:.85rem 1.6rem;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.issue button:hover{background:var(--bone)}
.issue button:disabled{background:var(--on-ink-soft);color:var(--ink);cursor:progress}
.note{
  margin:.9rem 0 0;font-size:.78rem;line-height:1.5;
  color:var(--on-ink-soft);max-width:46ch;
}
.err{
  margin:.85rem 0 0;padding:.5rem .7rem;
  background:var(--vermilion);color:var(--ink);
  font:700 .82rem/1.4 var(--ui);max-width:46ch;
}
.err[hidden]{display:none}

/* ---------- Reel 2 · the legend ---------- */
.wipe{
  position:fixed;inset:0;z-index:60;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;pointer-events:none;
}
.wipe.run{animation:wipe .9s var(--ease) forwards}
@keyframes wipe{
  0%{transform:scaleX(0);transform-origin:left center}
  48%{transform:scaleX(1);transform-origin:left center}
  52%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}

.reel--dossier{min-height:100svh;display:flex;align-items:center}
.dossier__grid{
  width:100%;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.75rem,5vw,4.5rem);
  align-items:center;
}
.mark--file{margin:0}
.mark--file svg{width:100%;height:auto;max-height:min(68svh,620px)}
.mark__cap{
  margin-top:1rem;font:400 .72rem/1.5 var(--data);
  color:var(--on-ink-soft);letter-spacing:.04em;
}
.file__as{
  margin:0 0 clamp(1.5rem,4vw,2.5rem);
  font:400 clamp(1.05rem,1rem + .5vw,1.4rem)/1.4 var(--data);
  color:var(--on-ink-soft);
}
.file__as em{color:var(--chartreuse);font-style:italic}

.record{margin:0 0 clamp(1.75rem,4vw,2.5rem);display:grid;gap:0}
.record .row{
  display:grid;
  grid-template-columns:minmax(8rem,13rem) minmax(0,1fr);
  gap:.5rem clamp(1rem,2.5vw,2rem);
  padding:.85rem 0;
  border-top:1px solid #33322F;
  align-items:baseline;
}
.record .row:last-child{border-bottom:1px solid #33322F}
.record dt{
  font:700 .66rem/1.5 var(--ui);letter-spacing:.19em;text-transform:uppercase;
  color:var(--on-ink-soft);margin:0;
}
.record dd{
  margin:0;font:400 clamp(.95rem,.9rem + .3vw,1.12rem)/1.5 var(--data);
  color:var(--bone);text-wrap:pretty;
}
.record dd b{color:var(--chartreuse);font-weight:700}

/* Liability: cut bars, not a progress ring ---------------- */
.meter{display:flex;gap:.25rem;align-items:center}
.meter i{display:block;width:1.1rem;height:.85rem;background:#33322F}
.meter i.on{background:var(--vermilion)}
.meter span{margin-left:.6rem;font:400 .85rem/1 var(--data);color:var(--on-ink-soft)}

.file__acts{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{
  background:var(--bone);color:var(--ink);border:2px solid var(--bone);
  font:800 .92rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  padding:.8rem 1.4rem;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.btn:hover{background:var(--chartreuse);border-color:var(--chartreuse)}
.btn--ghost{background:transparent;color:var(--bone)}
.btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* Record types out, line by line, like a title card credit */
.is-typing .row{animation:rowIn .5s var(--ease) both;animation-delay:calc(var(--r) * 105ms + 320ms)}
@keyframes rowIn{from{opacity:0;transform:translate3d(0,.6rem,0)}to{opacity:1;transform:none}}

/* ---------- Reel 3 · the field manual ---------- */
.programme{
  list-style:none;counter-reset:d;margin:0;padding:0;
  max-width:62rem;
}
.programme li{
  counter-increment:d;
  display:grid;
  grid-template-columns:clamp(3rem,7vw,5.5rem) minmax(0,1fr);
  gap:clamp(.75rem,2.5vw,2rem);
  padding:clamp(1rem,2.5vw,1.5rem) 0;
  border-top:2px solid var(--on-teal-soft);
  align-items:baseline;
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  color:var(--on-teal-soft);
  text-wrap:pretty;
}
.programme li:last-child{border-bottom:2px solid var(--on-teal-soft)}
.programme li::before{
  content:counter(d,decimal-leading-zero);
  font:900 clamp(2rem,5.5vw,4rem)/.8 var(--display);
  color:var(--chartreuse);
}
.programme b{color:var(--bone);font-weight:700}

/* ---------- Reel 4 · the wire ---------- */
.wire{list-style:none;margin:0 0 1.5rem;padding:0;max-width:70rem}
.wire li{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  gap:.4rem clamp(.75rem,2vw,1.5rem);
  padding:.7rem 0;
  border-top:1px solid var(--on-chart-soft);
  font:400 clamp(.85rem,.82rem + .25vw,1rem)/1.5 var(--data);
  align-items:baseline;
}
.wire li:first-child{animation:wireIn .5s var(--ease) both}
@keyframes wireIn{from{opacity:0;transform:translate3d(0,-.5rem,0)}to{opacity:1;transform:none}}
.wire time{color:var(--on-chart-soft);white-space:nowrap}
.wire .cs{font-weight:700;color:var(--ink);white-space:nowrap}
.wire .msg{color:var(--ink);text-wrap:pretty}
.note--wire{color:var(--on-chart-soft);margin:0}

/* ---------- Reel 5 · disclosure ---------- */
.disclose{max-width:64ch;font-size:clamp(1rem,.95rem + .3vw,1.12rem)}
.disclose p{margin:0 0 1.1rem;text-wrap:pretty}
.disclose b{font-weight:700}
.disclose__sig{font:400 .85rem/1.6 var(--data);color:#5C544A;margin-top:2rem}
.disclose a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- Narrow: restack, keep the bars true ---------- */
@media (max-width:900px){
  .reel--title{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(6,auto);
    min-height:auto;
    padding-block:clamp(1.5rem,6vw,3rem);
  }
  .reel--title .stamp{grid-row:2}
  .rank{grid-row:3}
  .lede{grid-row:4;align-self:auto;max-width:44ch}
  /* The action comes before the figure on a phone. A shared link opens here,
     and a visitor should not have to scroll past a portrait to find the button. */
  .issue{grid-row:5;max-width:none;align-self:auto}
  .mark--hero{
    grid-column:1;grid-row:6;
    margin:clamp(1.5rem,5vw,2.5rem) 0 0;
    align-self:auto;
  }
  .mark--hero svg{max-height:min(38svh,320px)}
  .dossier__grid{grid-template-columns:minmax(0,1fr)}
  .mark--file svg{max-height:min(42svh,360px)}
  .reel--dossier{min-height:auto;padding-block:clamp(3rem,10vw,5rem)}
}
@media (max-width:560px){
  .record .row{grid-template-columns:minmax(0,1fr);gap:.3rem;padding:.8rem 0}
  .wire li{grid-template-columns:auto minmax(0,1fr)}
  .wire .msg{grid-column:1/-1}
  .file__acts .btn{flex:1 1 100%;text-align:center}
}

/* ---------- Reduced motion: cut straight to the still ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .wipe{display:none}
  html{scroll-behavior:auto}
}

/* ---------- The mark comes apart ----------
   Shards are drawn already offset; the animation runs them back
   from the assembled silhouette, so the cut happens on screen. */
.mark svg path{transform-box:fill-box}
.is-armed .mark--hero svg path{
  animation:shardCut .9s var(--ease) both;
  animation-delay:calc(var(--s) * 60ms + 340ms);
}
.is-typing .mark--file svg path{
  animation:shardCut .8s var(--ease) both;
  animation-delay:calc(var(--s) * 52ms + 180ms);
}
@keyframes shardCut{
  from{opacity:0;transform:translate(calc(var(--dx) * -1px),calc(var(--dy) * -1px))}
  35%{opacity:1}
  to{opacity:1;transform:translate(0,0)}
}

/* The file's own codename ranks in when the legend is issued. */
.is-typing .rank--file span{
  animation:rankIn .7s var(--ease) both;
  animation-delay:calc(var(--i) * 90ms + 240ms);
}

/* ============================================================
   V2 — THE COUNTER-AGENT DIVISION
   New surfaces on the same world: the trap, the console, the
   ledger, the mirror. Same fields, same cuts, no new grammar.
   ============================================================ */

/* ---------- Additional drenched fields ---------- */
.reel--agentnote{background:var(--chartreuse);color:var(--ink)}
.reel--agentnote .stamp{color:var(--on-chart-soft)}
.reel--ledger{background:var(--teal);color:var(--bone)}
.reel--ledger .stamp{color:var(--on-teal-soft)}

/* Records set on a light field invert their rules. */
.record--light .row{border-top-color:var(--on-chart-soft)}
.record--light .row:last-child{border-bottom-color:var(--on-chart-soft)}
.record--light dt{color:var(--on-chart-soft)}
.record--light dd{color:var(--ink)}
.record--light dd b{color:var(--ink)}

/* ---------- The issue action: one control, bar-shaped ---------- */
.issue--one{display:block}
.issue--one .issue__row{gap:1rem}
.arm{
  flex:0 0 auto;background:var(--chartreuse);color:var(--ink);border:0;
  font:800 clamp(1.15rem,1rem + .8vw,1.75rem)/1 var(--display);
  letter-spacing:.08em;text-transform:uppercase;
  padding:1rem 2rem;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.arm:hover:not(:disabled){background:var(--bone)}
.arm:disabled{background:var(--on-ink-soft);color:var(--ink);cursor:progress}

/* ---------- The issued trap ---------- */
.trap{margin-top:1.25rem}
.trap[hidden]{display:none}
.trap__no{
  font:900 clamp(2.6rem,2rem + 3.5vw,4.5rem)/.85 var(--display);
  letter-spacing:.02em;color:var(--chartreuse);margin:0 0 .25rem;
}
.trap__cap{
  font:700 .66rem/1.5 var(--ui);letter-spacing:.19em;text-transform:uppercase;
  color:var(--on-ink-soft);margin:0 0 1.1rem;
}
.paste{
  display:block;width:100%;background:transparent;color:var(--bone);
  border:0;border-top:1px solid #33322F;border-bottom:1px solid #33322F;
  font:400 clamp(.82rem,.78rem + .28vw,.98rem)/1.6 var(--data);
  padding:.9rem 0;margin:0 0 1rem;resize:none;overflow:hidden;
}
.paste:focus{outline-offset:0}
.trap__acts{display:flex;gap:.75rem;flex-wrap:wrap}

/* ---------- The console: armed, then caught ---------- */
/* .reel--dossier sets align-items:center for its two-column layout; a column
   flex would inherit that and centre every line. Stretch it back. */
.console{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch}
.pulse{display:flex;align-items:center;gap:.85rem;margin:0 0 1.5rem}
.pulse i{
  display:block;width:.8rem;height:.8rem;background:var(--chartreuse);
  animation:blink 1.6s steps(1,end) infinite;
}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:0}}
.pulse span{
  font:700 .7rem/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-ink-soft);
}
.console--caught .pulse i{background:var(--vermilion);animation:none}

/* The capture: one per row, opened like a filed sheet. */
.captures{list-style:none;margin:0;padding:0}
.capture{
  border-top:2px solid #33322F;padding:clamp(1.1rem,3vw,1.75rem) 0;
  animation:rowIn .55s var(--ease) both;
}
.capture:last-child{border-bottom:2px solid #33322F}
.capture__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem clamp(.75rem,2vw,1.5rem);
  margin-bottom:.85rem;
}
.capture__verdict{
  font:900 clamp(1.6rem,1.3rem + 1.6vw,2.75rem)/.9 var(--display);
  text-transform:uppercase;letter-spacing:-.01em;margin:0;color:var(--bone);
}
.tag{
  font:700 .64rem/1 var(--ui);letter-spacing:.19em;text-transform:uppercase;
  padding:.42rem .7rem;background:var(--on-ink-soft);color:var(--ink);
}
.tag--declared{background:var(--chartreuse)}
.tag--undercover,.tag--irregular{background:var(--vermilion);color:var(--bone)}
.tag--tooling{background:var(--on-ink-soft)}
.tag--clean{background:transparent;color:var(--on-ink-soft);box-shadow:inset 0 0 0 2px currentColor}
.capture__ua{
  font:400 .82rem/1.6 var(--data);color:var(--on-ink-soft);
  word-break:break-all;margin:0 0 1rem;
}

/* ---------- The ledger (census) ---------- */
.tally{
  font:900 clamp(4rem,14vw,11rem)/.82 var(--display);
  letter-spacing:-.02em;margin:0;color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.tally--sub{font-size:clamp(2rem,6vw,4rem);color:var(--chartreuse)}
.tally__cap{
  font:400 clamp(1rem,.95rem + .35vw,1.2rem)/1.5 var(--data);
  color:var(--on-teal-soft);max-width:40ch;margin:.75rem 0 0;
}
.ledger{list-style:none;margin:clamp(2rem,5vw,3.5rem) 0 0;padding:0;max-width:60rem}
.ledger li{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;
  gap:.4rem clamp(.75rem,2vw,1.5rem);
  padding:.8rem 0;border-top:1px solid var(--on-teal-soft);
  align-items:baseline;
}
.ledger li:last-child{border-bottom:1px solid var(--on-teal-soft)}
.ledger .n{
  font:700 1.15rem/1 var(--data);color:var(--chartreuse);
  font-variant-numeric:tabular-nums;
}
.ledger .who{font:400 1rem/1.4 var(--data);color:var(--bone);word-break:break-word}
.ledger .who b{color:var(--bone);font-weight:700}
.ledger .op{font:600 .68rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--on-teal-soft);white-space:nowrap}

/* ---------- The canary note ---------- */
.agentnote{
  font:700 clamp(1.15rem,1rem + .9vw,1.7rem)/1.45 var(--data);
  max-width:52ch;margin:0 0 1.5rem;color:var(--ink);text-wrap:pretty;
}
.agentnote b{
  background:var(--ink);color:var(--chartreuse);
  padding:.1em .3em;font-weight:700;
}

/* ---------- The mirror (client-side scan) ---------- */
.signals{list-style:none;margin:0;padding:0;max-width:64rem}
.signals li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:.4rem clamp(.75rem,2vw,1.5rem);
  padding:.75rem 0;border-top:1px solid #33322F;align-items:baseline;
}
.signals li:last-child{border-bottom:1px solid #33322F}
.signals .k{font:700 .68rem/1.5 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-soft);white-space:nowrap}
.signals .v{font:400 .92rem/1.5 var(--data);color:var(--bone);word-break:break-word}
.signals .f{font:700 .64rem/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.signals .f--ok{color:var(--on-ink-soft)}
.signals .f--hit{color:var(--vermilion)}

/* ---------- Navigation, set as a filing strip ---------- */
.strip{
  display:flex;flex-wrap:wrap;gap:0 clamp(1rem,3vw,2.25rem);
  padding:0;margin:0;list-style:none;
}
.strip a{
  display:inline-block;padding:.55rem 0;
  font:700 .7rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:inherit;text-decoration:none;border-bottom:2px solid transparent;
}
.strip a:hover,.strip a[aria-current]{border-bottom-color:currentColor}

.foot{
  padding:var(--pad);background:var(--ink);color:var(--on-ink-soft);
  display:flex;flex-wrap:wrap;gap:1.25rem clamp(1.5rem,4vw,3rem);
  align-items:baseline;justify-content:space-between;
  border-top:2px solid #33322F;
}
.foot p{margin:0;font:400 .78rem/1.6 var(--data);max-width:52ch}
.foot a{color:var(--bone)}

/* ---------- Sources, set as a citation rail ---------- */
.cites{list-style:none;margin:1.5rem 0 0;padding:0;max-width:64ch}
.cites li{
  padding:.55rem 0;border-top:1px solid currentColor;
  font:400 .82rem/1.5 var(--data);opacity:.85;
}
.cites a{color:inherit}

/* ---------- Loading and empty, stated plainly ---------- */
.waiting{font:400 1rem/1.6 var(--data);color:var(--on-ink-soft);margin:0}

@media (max-width:560px){
  .ledger li{grid-template-columns:3.5rem minmax(0,1fr);}
  .ledger .op{grid-column:2;justify-self:start}
  .signals li{grid-template-columns:minmax(0,1fr) auto}
  .signals .v{grid-column:1/-1}
  .trap__acts .btn{flex:1 1 100%;text-align:center}
}

/* ---------- Bits the v2 markup needs ---------- */

/* The issue panel's own label, now a paragraph rather than a form label. */
.issue__label{
  font:700 .68rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-ink-soft);margin:0 0 .85rem;
}

/* A dossier field that flows rather than centring a two-column grid. */
.reel--flow{min-height:auto;display:block;padding-block:clamp(3.5rem,10vw,7rem)}

/* The programme list on the ink field rather than the teal one. */
.programme--ink li{border-top-color:#33322F;color:var(--on-ink-soft)}
.programme--ink li:last-child{border-bottom-color:#33322F}
.programme--ink b{color:var(--bone)}

/* Two columns of running prose where there is room for them. */
.colspill{max-width:78rem;color:var(--on-chart-soft)}
.colspill p{margin:0 0 1.15rem;max-width:68ch;text-wrap:pretty}
.colspill em{font-style:italic;color:var(--ink)}
@media (min-width:1000px){
  .colspill{columns:2;column-gap:clamp(2rem,5vw,4.5rem)}
  .colspill p{break-inside:avoid}
}

/* ---------- Field manual ---------- */
.op-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(1.75rem,4vw,3.5rem);
}
.op-name{
  font:900 clamp(1.6rem,1.3rem + 1.2vw,2.4rem)/.9 var(--display);
  text-transform:uppercase;letter-spacing:-.01em;
  margin:0 0 1rem;color:var(--chartreuse);
}
.record--manual{margin:0}
.record--manual .row{grid-template-columns:minmax(7rem,10rem) minmax(0,1fr);padding:.7rem 0}
.reel--manual .record--manual .row,
.reel--ledger .record--manual .row{border-top-color:var(--on-teal-soft)}
.reel--manual .record--manual .row:last-child,
.reel--ledger .record--manual .row:last-child{border-bottom-color:var(--on-teal-soft)}
.reel--manual .record--manual dt,
.reel--ledger .record--manual dt{color:var(--on-teal-soft)}
.reel--manual .record--manual dd,
.reel--ledger .record--manual dd{color:var(--bone)}
.reel--manual .record--manual dd b,
.reel--ledger .record--manual dd b{color:var(--chartreuse)}
.reel--agentnote .wire li{border-top-color:var(--on-chart-soft)}
.reel--agentnote .wire .cs{color:var(--ink)}
.reel--agentnote .wire .msg{color:var(--on-chart-soft)}

/* A programme row is one counter and one block of prose. Wrapping the prose in a
   single element keeps the grid at two items — a bare text node beside a <b> would
   otherwise become a third item and wrap the row. */
.programme li > span{display:block;grid-column:2}
.programme li::before{grid-column:1;grid-row:1}
.tag--client{background:var(--teal);color:var(--bone)}

/* ---------- The second verdict: did the agent obey the page? ---------- */
.verdict{max-width:52rem;margin-bottom:clamp(2rem,5vw,3rem)}
.verdict[hidden]{display:none}
.verdict__ask{
  margin:0 0 1rem;max-width:52ch;
  font:400 clamp(.95rem,.92rem + .3vw,1.08rem)/1.55 var(--data);
  color:var(--on-ink-soft);
}
.paste--in{
  border:2px solid #33322F;padding:.85rem;margin-bottom:1rem;
  resize:vertical;overflow:auto;min-height:6.5rem;
}
.paste--in:focus{border-color:var(--chartreuse)}
.paste--in::placeholder{color:#6B655C;opacity:1}

/* The result is a field of its own, hard-cut, the way a stamp lands on a file. */
.verdict__out{margin-top:1.5rem;padding:clamp(1.1rem,3vw,1.6rem)}
.verdict__out[hidden]{display:none}
.verdict__rank{
  margin:0 0 .6rem;
  font:900 clamp(2rem,1.6rem + 2.2vw,3.5rem)/.88 var(--display);
  text-transform:uppercase;letter-spacing:-.015em;
}
.verdict__body{margin:0;max-width:60ch;text-wrap:pretty;font-size:clamp(.95rem,.92rem + .3vw,1.08rem)}
.verdict__body b{font-weight:700}

.verdict__out--obeyed{background:var(--vermilion);color:var(--ink)}
.verdict__out--obeyed .verdict__body{color:var(--on-verm-soft)}
.verdict__out--obeyed .verdict__body b{color:var(--ink)}

.verdict__out--held{background:var(--chartreuse);color:var(--ink)}
.verdict__out--held .verdict__body{color:var(--on-chart-soft)}
.verdict__out--held .verdict__body b{color:var(--ink)}

.verdict__out--idle{background:transparent;padding:0;color:var(--on-ink-soft)}
.verdict__out--idle .verdict__rank{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);color:var(--on-ink-soft)}
.verdict__out--idle .verdict__body{color:var(--on-ink-soft)}
/* Caught on: the agent repeated the word but named it as an instruction. Teal,
   because it is neither the alarm nor the all-clear. */
.verdict__out--noticed{background:var(--teal);color:var(--bone)}
.verdict__out--noticed .verdict__rank{color:var(--bone)}
.verdict__out--noticed .verdict__body{color:var(--on-teal-soft)}
.verdict__out--noticed .verdict__body b{color:var(--bone)}