/* ==========================================================================
   The Verification Room — KK theme.
   Fonts are self-hosted. Do NOT add a Google Fonts or any other CDN url here.
   Mobile-first: the project waits on one hour of his attention, and the surest
   way to lose it is to require a desk.
   ========================================================================== */

:root{
  --ink:#0a0d08; --paper:#fff; --cream:#f5f7f0; --line:#e7ebe2;
  --neon:#C3F53C; --neon-d:#7fae00; --muted:#5a625c; --muted-2:#8a928a;
  --amber:#ffb400; --green:#1f9d5c; --red:#e5484d;
  --tap:44px;                 /* nothing interactive is smaller than this */
  --page:72rem;               /* the header and the content column share one width */
}

/* ---- fonts (self-hosted, local only) ---- */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/bebas-neue-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2')}

/* Lets block-size:auto animate, which is what makes the trail glide instead of snap. Ignored
   where unsupported, and the fallback is exactly the old behaviour. */
@supports (interpolate-size: allow-keywords){ :root{ interpolate-size:allow-keywords } }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--cream); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  /* Room for a thumb at the bottom of a phone, and for the notch at the top. */
  padding:env(safe-area-inset-top) 0 calc(24px + env(safe-area-inset-bottom));
}
a{color:inherit}

h1{font-family:'Bebas Neue',Impact,sans-serif;font-size:38px;line-height:.95;letter-spacing:.01em}
h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
h2 small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;text-transform:none;color:var(--muted-2)}

/* Every page's column. Deleted by accident during the 30 Aug design pass — it sat between the
   heading rules and the header-rail block, and a blind slice-and-replace of the rail took it with
   it. The result was every page flush against the left edge with no padding at all, on a screen
   twice as wide as the text. Restored, and left ABOVE the rail block rather than inside it so the
   same mistake cannot repeat. */
main,.claim,.conflict,.done{max-width:44rem;margin:0 auto;padding:20px 18px}

/* ---- the header rail ----
   ONE container, matched to the content width. The previous version centred every child of the
   rail in a 44rem column while the wordmark was an inline-block — margin:auto does not centre an
   inline-block — so the wordmark sat hard left and the title floated in a column to its right,
   reading as two headers that did not know about each other. */
.rail{
  background:var(--ink); color:var(--cream);
  padding:calc(12px + env(safe-area-inset-top)) 18px 13px;
  position:sticky; top:0; z-index:20;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.rail-in{max-width:var(--page);margin:0 auto}
.rail-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.wordmark{
  text-decoration:none; white-space:nowrap;
  font-family:'Bebas Neue',Impact,sans-serif; font-size:27px; line-height:1;
  letter-spacing:.02em; color:var(--neon);
}
.wordmark:focus-visible{outline:2px solid var(--neon);outline-offset:4px;border-radius:3px}
.railsub{
  font-size:11px; letter-spacing:.17em; text-transform:uppercase; font-weight:600;
  color:var(--muted-2); text-align:right; line-height:1.3;
}
.progress{margin-top:11px}
.progress-track{height:5px;border-radius:99px;background:rgba(245,247,240,.15);overflow:hidden}
.progress-fill{height:100%;background:var(--neon);border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.progress-said{
  margin-top:7px; font-size:13px; color:var(--muted-2);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.progress-said strong{color:var(--cream);font-weight:600}
.progress-left,.progress-done{color:var(--neon);font-weight:600}
@media (prefers-reduced-motion:reduce){ .progress-fill{transition:none} }

/* ---- the standing guide + the trail ----
   Phone first: both sit above the claim, and move beside it only once there is room for them
   beside rather than instead. */
.with-trail{max-width:44rem;margin:0 auto}
.aside-col{display:grid;gap:12px;margin:16px 18px 0}

/* The job, kept on screen. /start explains it once and he then spends twenty minutes on a page
   that assumes he remembers — which is how "Cut" starts to feel risky by claim nine. */
.guide{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.guide h2{color:var(--neon-d);margin-bottom:7px}
.guide > p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.guide-verbs{list-style:none;display:grid;gap:7px;margin:12px 0 10px}
.guide-verbs li{font-size:14px;line-height:1.45;color:var(--muted);display:flex;align-items:baseline;gap:9px}
.v{
  flex:0 0 auto;display:inline-block;font-weight:700;font-size:12px;border-radius:6px;
  padding:3px 9px;border:1px solid var(--line);letter-spacing:.01em;
}
.v-keep{background:var(--neon);border-color:var(--neon-d);color:var(--ink)}
.v-cut{background:var(--paper);color:var(--red);border-color:var(--red)}
.v-reword{background:var(--paper);color:var(--amber);border-color:var(--amber)}
.guide-small{font-size:13px;color:var(--muted-2);border-top:1px solid var(--line);padding-top:10px}

.trail{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.trail-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line);
}
.trail-head > p:first-child{
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--muted-2);
}
.legend{display:flex;gap:11px;font-size:11px;color:var(--muted-2)}
.legend span{display:flex;align-items:center;gap:4px}

.trail-groups{list-style:none}
.trail-group{border-bottom:1px solid var(--line)}
.trail-group:last-child{border-bottom:0}
.trail-group > details > summary{
  display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:0 14px;min-height:var(--tap);font-size:14px;color:var(--ink);
}
.trail-group > details > summary::-webkit-details-marker{display:none}
.trail-group > details > summary:hover{background:var(--cream)}
.trail-group > details > summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.trail-chev{flex:0 0 14px;color:var(--muted-2);transition:transform .22s cubic-bezier(.4,0,.2,1)}
.trail-group > details[open] > summary .trail-chev{transform:rotate(90deg);color:var(--ink)}
.trail-name{flex:1 1 auto;font-weight:500;line-height:1.35;min-width:0}
.trail-count{
  flex:0 0 auto;font-size:11px;font-weight:600;color:var(--muted-2);
  font-variant-numeric:tabular-nums;min-width:46px;text-align:right;
}

/* One segment per claim, filling as he rules. A bar reads as progress before anyone reads the
   words next to it; the loose dots it replaces did not read as anything. */
.segs{flex:0 0 auto;display:flex;gap:2px;align-items:center}
.seg{width:11px;height:6px;border-radius:2px;background:var(--line);display:block}
.seg:first-child{border-radius:99px 2px 2px 99px}
.seg:last-child{border-radius:2px 99px 99px 2px}
.seg.trail-keep{background:var(--neon-d)}
.seg.trail-cut{background:var(--red)}
.seg.trail-reword{background:var(--amber)}
.seg.trail-pending{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.legend .seg{width:9px;height:5px}

/* The glide. <details> toggles display, which is why it jumped. */
.trail-group > details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .26s cubic-bezier(.4,0,.2,1), content-visibility .26s allow-discrete;
}
.trail-group > details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){
  .trail-chev{transition:none}
  .trail-group > details::details-content{transition:none}
}

.trail-group > details[open] > summary{background:var(--cream);font-weight:600}
.trail-group > details > ul{list-style:none;padding:2px 0 8px;background:var(--cream)}
.trail-item > a{
  display:flex;align-items:flex-start;gap:9px;
  padding:8px 14px 8px 16px;min-height:var(--tap);
  text-decoration:none;font-size:14px;line-height:1.4;color:var(--muted);
}
.trail-item > a:hover{background:var(--paper)}
.trail-item > a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.trail-mark{flex:0 0 16px;text-align:center;font-weight:700;font-size:12px;line-height:1.5;color:var(--muted-2)}
.trail-text{flex:1 1 auto;min-width:0}
.trail-state{
  flex:0 0 auto;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--muted-2);padding-top:2px;display:none;
}
.trail-keep .trail-mark{color:var(--neon-d)}
.trail-cut .trail-mark{color:var(--red)}
.trail-reword .trail-mark{color:var(--amber)}
.trail-keep .trail-text,.trail-cut .trail-text{text-decoration:line-through;text-decoration-color:var(--line)}
.trail-here > a{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--neon)}
.trail-here .trail-text{text-decoration:none}

@media (min-width:62rem){
  .with-trail{
    max-width:var(--page);display:grid;grid-template-columns:21.5rem minmax(0,1fr);
    align-items:start;gap:20px;padding:0 18px;
  }
  .aside-col{margin:22px 0 22px;position:sticky;top:112px;max-height:calc(100vh - 140px);overflow-y:auto}
  .trail-state{display:block}
  .with-trail > main{max-width:none;padding:22px 0 0}
}

/* ---- the brief ---- */
.start{max-width:46rem}
.start h1{font-size:44px;margin:8px 0 14px;text-wrap:balance}
.start-lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:36rem}
.start-lede em{color:var(--ink);font-style:normal;font-weight:600}
.start-grid{display:grid;gap:14px;margin:26px 0 20px}
.start-grid section{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
}
.start-grid h2{margin-bottom:7px;color:var(--neon-d)}
.start-grid p{font-size:15.5px;line-height:1.6;color:var(--muted)}
.start-grid strong{color:var(--ink);font-weight:600}
.start-verbs{list-style:none;display:grid;gap:9px;margin:10px 0}
.start-verbs li{font-size:15.5px;color:var(--muted);line-height:1.5}
/* .v and its three variants are defined once, up with the standing guide. Two definitions of one
   badge is how the brief and the guide drift apart. */
.start-verbs .v{margin-right:2px}
.start-small{font-size:13.5px;color:var(--muted-2);margin-top:8px}
.start-promise{
  background:var(--ink);color:var(--cream);border-radius:12px;padding:18px 20px;margin-bottom:24px;
}
.start-promise h2{color:var(--neon);margin-bottom:10px}
.start-promise ul{list-style:none;display:grid;gap:10px}
.start-promise li{font-size:15px;line-height:1.55;color:var(--muted-2)}
.start-promise strong{color:var(--cream);font-weight:600}
.start-go{
  display:block;text-align:center;text-decoration:none;
  background:var(--neon);color:var(--ink);border:1px solid var(--neon-d);
  border-radius:12px;padding:17px 24px;font-size:18px;font-weight:700;
  min-height:56px;
}
.start-go:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (min-width:48rem){
  .start-grid{grid-template-columns:1fr 1fr}
  .start-go{max-width:22rem;margin:0 auto}
}

/* ---- he has been here before ---- */
.already{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--muted-2);
  border-radius:10px; padding:11px 14px; margin-bottom:4px;
  font-size:14.5px; line-height:1.5; color:var(--muted);
}
.already strong{color:var(--ink);font-weight:600}
.already-keep{border-left-color:var(--neon-d)}
.already-cut{border-left-color:var(--red)}
.already-reword{border-left-color:var(--amber)}

/* ---- the claim ---- */
.claim-text{
  font-size:26px; line-height:1.4; font-weight:500; letter-spacing:-.005em;
  padding:20px 0 16px; border-bottom:1px solid var(--line);
  text-wrap:pretty;
}
.verdict{margin:16px 0 6px;font-size:16px;line-height:1.5}
.verdict strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.04em}
.verdict-traced strong{color:var(--green)}
.verdict-vendor_altered strong,.verdict-no_source strong{color:var(--red)}
.verdict-partial_match strong,.verdict-claim_too_short strong{color:var(--amber)}

.matched{
  font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;   /* coverage 1.000 and 0.889 line up */
}
.matched code,.artefact-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

/* ---- the two fields, the reason this screen exists ---- */
.fields{margin-top:22px;display:grid;gap:10px}

/* Collapsed by default. A recording runs to 1,422 words; two of them stacked open push the ruling
   buttons off a phone screen entirely, and he rules on a phone. The panel holding the quote opens
   itself — see hb_claim_view(). */
.fields details{
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
}
.fields summary{
  cursor:pointer; list-style:none; padding:12px 14px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.fields summary::-webkit-details-marker{display:none}
/* A caret drawn in text rather than an icon file: one less asset on a page with no CDN. */
.field-chev{flex:0 0 14px;color:var(--muted-2);transition:transform .22s cubic-bezier(.4,0,.2,1)}
.fields details[open] summary .field-chev{transform:rotate(90deg);color:var(--ink)}
.fields details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .26s cubic-bezier(.4,0,.2,1), content-visibility .26s allow-discrete;
}
.fields details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){
  .field-chev{transition:none}
  .fields details::details-content{transition:none}
}
.fields summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:10px}
.fields summary small{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:0; text-transform:none; color:var(--muted-2);
}
/* 44px is the tap target he has to hit with a thumb, so the whole row is the control. */
.fields summary{min-height:44px;display:flex;align-items:center;gap:8px}

/* The quote, found inside the wall of transcript. This is the mark that makes the panel worth
   opening: without it he was being asked to take TRACED on trust. */
.fields mark{
  background:var(--neon); color:var(--ink);
  padding:2px 1px; border-radius:3px; font-weight:600;
}

.fields pre{
  margin:0 14px 14px;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--neon);
  border-radius:8px; padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14.5px; line-height:1.72;
  white-space:pre-wrap; word-break:break-word;   /* never a sideways scroll on a phone */
}
.fields .asr{border-left-color:var(--muted-2)}
.fields .formatted{border-left-color:var(--line)}

/* ---- the words the microphone never heard ---- */
.missing{
  background:#fff7e6; border:1px solid var(--amber); border-left-width:3px;
  border-radius:8px; padding:10px 13px; margin:12px 0 0; font-size:14px;
}
.missing code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:1px 5px;
}
.matched .src{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

/* ---- what a reader sees where the rulings would be ---- */
/* Not a disabled button. A disabled control still says "this was meant for you"; four of the five
   people in CONSENT.md audience: are readers, and for them ruling was never on offer. */
.reader-note{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--muted-2);
  border-radius:10px; padding:14px 16px; margin:24px 0 0;
  color:var(--muted); font-size:14.5px; line-height:1.6; max-width:62ch;
}
.reader-note strong{color:var(--ink);font-weight:600}

/* ---- rulings ---- */
.rulings{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.rulings button{
  /* Bigger than the 44px floor on purpose: these three are the only thing he does 29 times, and
     the shorthand below sets the size — a font-size declared before it would be overwritten. */
  flex:1 1 auto; min-width:104px; min-height:54px; padding-inline:20px;
  font:600 17px/1 'Inter',system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.rulings button[value="keep"]{background:var(--neon);border-color:var(--neon-d)}
.rulings button[value="cut"]{border-color:var(--red);color:var(--red)}
.rulings button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.rulings textarea{
  flex:1 1 100%; min-height:var(--tap); padding:12px 14px;
  font:400 16px/1.5 'Inter',system-ui,sans-serif;  /* 16px: anything smaller makes iOS zoom on focus */
  background:var(--paper); border:1px solid var(--line); border-radius:10px; resize:vertical;
}

/* ---- login ---- */
.login{max-width:24rem;margin:0 auto;padding:56px 18px}
.login h1{margin-bottom:22px}
.login label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:16px 0 6px}
.login input{
  width:100%; min-height:var(--tap); padding:12px 14px;
  font:400 16px/1.4 'Inter',system-ui,sans-serif;   /* 16px, or iOS zooms the page on focus */
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
}
.login input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.login button{
  width:100%; min-height:var(--tap); margin-top:22px;
  font:600 16px/1 'Inter',system-ui,sans-serif;
  background:var(--neon); color:var(--ink);
  border:1px solid var(--neon-d); border-radius:10px; cursor:pointer;
}
.error{
  background:#fdecec; border:1px solid var(--red); border-left-width:3px;
  border-radius:8px; padding:11px 13px; font-size:14px; color:#8a1f22;
}

/* ---- the Brain view ---- */
.brain{max-width:44rem;margin:0 auto;padding:20px 18px}
.brain h1{margin-bottom:14px}
.brain-search{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.brain-search input[type=search]{
  flex:1 1 18rem; min-height:var(--tap); padding:12px 14px;
  font:400 16px/1.4 'Inter',system-ui,sans-serif;   /* 16px, or iOS zooms the page on focus */
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
}
.brain-search input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.brain-search button{
  min-height:var(--tap); padding:0 22px; font:600 15px/1 'Inter',system-ui,sans-serif;
  background:var(--neon); color:var(--ink); border:1px solid var(--neon-d);
  border-radius:10px; cursor:pointer;
}
.brain-note{color:var(--muted);font-size:14px;line-height:1.6;max-width:62ch;margin:0 0 18px}
.brain-note b{color:var(--ink)}
.brain-empty{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--muted-2);
  border-radius:10px;padding:18px 20px;
}
.brain-empty h2{font-family:'Bebas Neue',Impact,sans-serif;font-size:26px;line-height:1;
  letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:8px}
.brain-empty p{color:var(--muted);font-size:15px;line-height:1.6}
.brain-hits{display:grid;gap:14px}
.hit{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.hit .filter{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--neon-d);
  font-weight:700;margin-bottom:8px}
.hit .words{font-size:18px;line-height:1.5;font-weight:500}
.hit .prov{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted)}
/* Confidence is a word, a colour AND a shape. A reader who cannot tell amber from green must
   still be able to tell a high-confidence claim from a low one. */
.conf{border-radius:999px;padding:2px 9px;border:1px solid var(--line);font-weight:600}
.conf-high{background:#eaf7ef;border-color:var(--green);color:#0f6b3c}
.conf-high::before{content:"\2022\2022\2022  "}
.conf-medium{background:#fff7e6;border-color:var(--amber);color:#8a5a00}
.conf-medium::before{content:"\2022\2022\25E6  "}
.conf-low{background:#fdecec;border-color:var(--red);color:#8a1f22}
.conf-low::before{content:"\2022\25E6\25E6  "}

/* ---- the conflict pair ---- */
.conflict .lede{color:var(--muted);font-size:15px;margin-bottom:18px}
.conflict .side{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:16px; margin-bottom:14px;
}
.conflict .meta{font-size:12px;color:var(--muted);margin-top:8px}

/* ---- the learning log ---- */
.learning{max-width:44rem;margin:0 auto;padding:20px 18px}
.learning h1{margin-bottom:6px}
.log{margin-top:30px;border-top:1px solid var(--line);padding-top:18px}
.log h2 small{
  font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:.02em;
  color:var(--ink);margin-left:6px;font-variant-numeric:tabular-nums;
}
.log .blurb{color:var(--muted);font-size:14px;margin:6px 0 12px;max-width:56ch}
.log ul{list-style:none}
.log li{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;margin-bottom:8px;font-size:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;word-break:break-word;
}
.log .empty{color:var(--muted-2);font-size:14px;font-style:italic;max-width:60ch}
.proposal{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--neon);
  border-radius:10px;padding:14px 16px;font-size:15px;line-height:1.55;
}
.proposal strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--neon-d);
  display:block;margin-bottom:6px;
}

/* ---- the finish state ---- */
.done h1{margin-bottom:10px}
.done p{color:var(--muted)}
.done a{color:var(--neon-d);font-weight:600}

@media (min-width:52rem){
  h1{font-size:46px}
  .claim-text{font-size:24px}
  .conflict{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .conflict h1,.conflict .lede{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}