/* The citation verifier. Chrome (header, footer, theme switch, .wrap, tokens)
   comes from index.css; everything here is this page only.

   TWO TOKENS ARE DEFINED HERE BECAUSE index.css DOES NOT HAVE THEM. --warn and
   --danger live in chat.css and nowhere else, and this page needs both to tell a
   404 from a bad reporter. An undefined custom property invalidates the whole
   declaration rather than falling back — which is what made the picker's Done
   button render transparent and every focus ring invisible — so they are named
   --vf-* to avoid colliding with chat.css's, and they are defined in BOTH themes
   deliberately. Same values as chat.css's, which uses one shade in both. */
:root {
  --vf-warn: #c98a4b;
  --vf-warn-bg: rgba(201,138,75,0.10);
  --vf-warn-line: rgba(201,138,75,0.45);
  --vf-danger: #b57a7a;
  /* Red for what needs dealing with before filing, amber for a warning — the
     same split legal.css makes (owner's direction, 15 Sep 2026). */
  --vf-bad: #e5696b;
  --vf-bad-bg: rgba(229,105,107,0.10);
  --vf-bad-line: rgba(229,105,107,0.45);
  --vf-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The highlight behind a citation inside a quoted passage. A wash rather
     than a fill: it marks where to look without shouting over the sentence
     it sits in, and the page's one accent is already spent on the rules. */
  --vf-mark: rgba(176,141,87,0.26);
}
html[data-theme="light"] {
  --vf-warn: #9a6222;
  --vf-warn-bg: rgba(154,98,34,0.08);
  --vf-warn-line: rgba(154,98,34,0.35);
  --vf-danger: #9c4f4f;
  --vf-bad: #b3261e;
  --vf-bad-bg: rgba(179,38,30,0.07);
  --vf-bad-line: rgba(179,38,30,0.35);
  --vf-mark: rgba(154,98,34,0.18);
}

.vf-main { padding: 54px 32px 80px; max-width: 820px; }

/* .vf-stage sets no `display`, so the UA's own [hidden] rule hides it with
   nothing to override. The trap this file's siblings have hit six times is
   created by adding a display here — do not. */
.vf-stage h1 {
  font: 400 34px/1.2 var(--serif);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.vf-h2 { font: 400 25px/1.25 var(--serif); margin: 0 0 14px; }
.vf-lede { font: 400 14.5px/1.65 var(--sans); color: var(--text-muted); margin: 0 0 26px; max-width: 62ch; }
.vf-lede strong { color: var(--text); font-weight: 500; }

.vf-eyebrow {
  font: 600 10.5px/1.3 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.vf-eyebrow-warn { color: var(--vf-warn); }
.vf-eyebrow-bad { color: var(--vf-bad); }

/* ---------- Stage 1 ---------- */
.vf-drop {
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  color: var(--text-dim);
  transition: border-color .15s ease, background .15s ease;
}
.vf-drop.is-over { border-color: var(--brass); background: var(--surface-2); }
.vf-drop-text { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.vf-drop-text strong { font: 500 13.5px/1.4 var(--sans); color: var(--text); }
.vf-drop-text span { font: 400 12px/1.4 var(--sans); color: var(--text-dim); }

.vf-label { display: block; font: 500 12.5px/1.4 var(--sans); color: var(--text-muted); margin: 26px 0 8px; }
.vf-textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px 15px;
  font: 400 13.5px/1.6 var(--sans);
  resize: vertical;
}
.vf-textarea:focus-visible { outline: 2px solid var(--brass-dim); outline-offset: 1px; border-color: var(--brass-dim); }

.vf-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; }
.vf-note { font: 400 12px/1.5 var(--sans); color: var(--text-muted); }
.vf-note.is-bad { color: var(--vf-bad); }

.vf-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  font: 500 12px/1 var(--sans);
}
.vf-btn:hover { color: var(--text); border-color: var(--text-dim); }
.vf-btn:focus-visible { outline: 2px solid var(--brass-dim); outline-offset: 2px; }
.vf-btn-primary {
  background: var(--brass);
  border-color: var(--brass);
  color: #14161b;
  font-weight: 600;
  padding: 9px 18px;
  font-size: 12.5px;
}
.vf-btn-primary:hover { background: var(--brass-dim); border-color: var(--brass-dim); color: #14161b; }
.vf-btn:disabled { opacity: .5; cursor: default; }
.vf-btn:disabled:hover { color: var(--text-muted); border-color: var(--border); }

.vf-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.vf-fact { padding: 16px 18px 0 0; display: flex; flex-direction: column; gap: 4px; }
.vf-fact + .vf-fact { border-left: 1px solid var(--border); padding-left: 18px; }
.vf-fact p { font: 400 11.5px/1.5 var(--sans); color: var(--text-muted); margin: 0; }
.vf-fact code { font: 400 11px/1.5 var(--vf-mono); color: var(--text); }

.vf-limit { font: 400 11.5px/1.55 var(--sans); color: var(--text-dim); margin: 22px 0 0; max-width: 66ch; }

/* ---------- Stage 2 ---------- */
.vf-panel { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 17px 19px; }
.vf-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
/* Both of these SET `display`, and a brief with no case citations hides the
   case list's head and list — so both carry their own [hidden] rule. Ninth
   instance of that trap here. */
.vf-panel-head[hidden], .vf-cites[hidden] { display: none; }
.vf-panel-meta { font: 400 11.5px/1 var(--sans); color: var(--text-dim); }

.vf-cites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px 18px;
  font: 400 12.5px/1.5 var(--vf-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  max-height: 320px;
  overflow-y: auto;
}
.vf-cites li { min-width: 0; overflow-wrap: anywhere; }
.vf-cites-warn { color: var(--vf-bad); max-height: none; }
.vf-count { color: var(--text-dim); }

.vf-panel-foot { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 13px; display: flex; flex-direction: column; gap: 4px; }
.vf-panel-foot p { font: 400 12px/1.5 var(--sans); color: var(--text-muted); margin: 0; }
.vf-panel-foot .vf-dim { font-size: 11.5px; color: var(--text-dim); }

.vf-suspects {
  border: 1px solid var(--vf-bad-line);
  background: var(--vf-bad-bg);
  border-radius: 8px;
  padding: 15px 17px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Sets `display`, so it needs its own [hidden]. */
.vf-suspects[hidden] { display: none; }
.vf-suspects p { font: 400 12px/1.55 var(--sans); color: var(--text-muted); margin: 0; }

/* ---------- Stage 3 ---------- */
.vf-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.vf-tally { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); flex-wrap: wrap; }
.vf-tally-cell { flex: 1 1 150px; padding: 13px 16px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); }
.vf-tally-cell:last-child { border-right: none; }
/* .vf-tally SETS `display`, SO IT CARRIES ITS OWN [hidden] RULE — eighth
   instance of that trap in this repo, and the failure mode here is the four
   cells staying on screen for a brief that has no case citations at all, which
   is the exact thing hiding them was for. The UA's own [hidden] loses to any
   rule that sets display. */
.vf-tally[hidden] { display: none; }
.vf-tally-n { font: 600 22px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.vf-tally-l { font: 400 11.5px/1.3 var(--sans); color: var(--text-muted); }
.is-found .vf-tally-n { color: var(--brass); }
.is-missing .vf-tally-n { color: var(--vf-bad); }
.is-several .vf-tally-n { color: var(--vf-warn); }
.is-unknown .vf-tally-n { color: var(--vf-bad); }
/* A zero is not news: red or amber on "0 not in this database" reads as a problem. */
.vf-tally-cell.is-zero .vf-tally-n { color: var(--text-dim); }

.vf-rule { border-left: 2px solid var(--brass); padding: 2px 0 2px 13px; font: 400 12.5px/1.55 var(--sans); color: var(--text-muted); margin: 18px 0 8px; max-width: 68ch; }
.vf-rule strong { color: var(--text); font-weight: 500; }

.vf-group-head { margin: 26px 0 0; }
.vf-row { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid var(--border); }
.vf-row-icon { flex: none; margin-top: 2px; }

/* THE TALLY WAS COLOURED AND THE ROWS UNDER IT WERE NOT, so the one signal on
   the page vanished exactly where somebody reads the detail. These four take
   the tally's own colours rather than a second vocabulary — there is one
   meaning per state on this page and it should not depend on which half of the
   page you are looking at.

   DELIBERATELY NOT A TRAFFIC LIGHT, and green is the one that must not appear.
   A green tick beside a found citation reads as "this one is fine", which is
   precisely what this page says it cannot tell you: it resolves a citation, it
   does not say the case is still good law or that it supports the sentence
   around it. Red on a missing one has the matching fault in reverse — the copy
   insists that a citation we cannot find is not proof it was invented, and an
   alarm colour would say otherwise before the sentence is read. Brass is the
   site's accent rather than an approval, and amber is attention rather than
   failure, which is what these four outcomes actually are.

   REVERSED IN PART, 15 Sep 2026, at the owner's direction: a citation not found
   and an unreadable reporter are RED now, because they are the list to work
   through before filing, and amber is kept for warnings (several matches, a
   separate opinion, a coverage note). The copy beside a missing one still says
   it is not proof of a fabrication, and it must go on saying so. Still no green. */
.vf-row.is-found   .vf-row-icon { color: var(--brass); }
.vf-row.is-missing .vf-row-icon { color: var(--vf-bad); }
.vf-row.is-several .vf-row-icon { color: var(--vf-warn); }
.vf-row.is-unknown .vf-row-icon { color: var(--vf-bad); }
.vf-row-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vf-row-cite { font: 500 13px/1.4 var(--vf-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vf-row-say { font: 400 11.5px/1.5 var(--sans); color: var(--text-muted); }
.vf-row-say strong { color: var(--text); font-weight: 500; }
.vf-row-meta { font: 400 11.5px/1.4 var(--sans); color: var(--text-dim); flex: none; white-space: nowrap; }

/* The docket line sits under the opinion's own metadata and is deliberately
   quieter than it: what the court published is the answer, and what the docket
   says is context around it. Absent entirely when the corpus does not hold it —
   see docketLine() for why an absence is never drawn as a blank. */
.vf-row-docket { font: 400 11px/1.5 var(--sans); color: var(--text-dim); }

/* The statutes block on the checkpoint, and one section's own text in the
   results. The excerpt is set in the serif because it is the LAW being quoted
   rather than our commentary on it — the same distinction the quotation blocks
   already draw — and it is capped so a long section cannot push the citations
   under it off the screen. */
.vf-statutes { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.vf-statute-text {
  font: 400 12.5px/1.65 var(--serif); color: var(--text-muted);
  max-height: 190px; overflow-y: auto;
  border-left: 2px solid var(--border); padding: 2px 0 2px 11px; margin-top: 4px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.vf-case { font: 400 12.5px/1.45 var(--sans); }
.vf-case em { font-style: italic; }
.vf-case a { color: var(--brass); text-decoration: none; }
.vf-case a:hover { text-decoration: underline; }
.vf-where { font: 400 11px/1.4 var(--sans); color: var(--text-dim); }

/* Stage 3's two actions sit together, so the head still reads as a heading with
   controls on the right rather than three things competing across it. */
.vf-results-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* "Show in document". A text button rather than a bordered one: it sits at the
   foot of a row and belongs to that row, where a third bordered control would
   read as a peer of Download report and Start over. */
.vf-where-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vf-show {
  background: none; border: none; padding: 0;
  font: 400 11px/1.4 var(--sans); color: var(--brass);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.vf-show:hover { color: var(--text); }
.vf-show:focus-visible { outline: 2px solid var(--brass-dim); outline-offset: 2px; border-radius: 2px; }

/* The passage itself. Indented under the row and on a rule, so it reads as a
   quotation from the document rather than as more of our own commentary. */
.vf-excerpt { margin: 6px 0 2px; border-left: 2px solid var(--border); padding-left: 12px; }
.vf-excerpt-p {
  font: 400 12.5px/1.65 var(--serif);
  color: var(--text-muted);
  margin: 0 0 8px; max-width: 74ch;
}
.vf-excerpt-p:last-child { margin-bottom: 0; }
.vf-excerpt-p mark {
  background: var(--vf-mark);
  color: var(--text);
  padding: 1px 2px; border-radius: 2px;
  font-weight: 500;
}
/* Which of several, when a citation appears more than once. An eyebrow rather
   than a sentence — it labels the passage and is not part of it. */
.vf-excerpt-n {
  display: block;
  font: 500 9.5px/1.4 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 3px;
}

.vf-empty { font: 400 12.5px/1.6 var(--sans); color: var(--text-muted); padding: 14px 0 0; }

@media (max-width: 720px) {
  .vf-main { padding: 36px 22px 60px; }
  .vf-stage h1 { font-size: 27px; }
  .vf-facts { grid-template-columns: 1fr; }
  .vf-fact + .vf-fact { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 16px; }
  .vf-row-meta { white-space: normal; }
}

/* ---------- Answered locally, and binding authority ---------- */

/* Sets no `display`, so the UA's [hidden] hides it. */
.vf-local {
  font: 400 12.5px/1.55 var(--sans);
  color: var(--text-muted);
  border-left: 2px solid var(--signal);
  padding: 2px 0 2px 13px;
  margin: 14px 0 0;
  max-width: 68ch;
}
.vf-local strong { color: var(--text); font-weight: 500; }

.vf-forum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.vf-forum[hidden] { display: none; }
.vf-forum-label { font: 500 12.5px/1 var(--sans); color: var(--text-muted); }

/* ---------- The court combobox ----------
   THE SECOND COPY OF THESE RULES; the first is in css/legal.css and the two
   have to move together. The BEHAVIOUR is shared properly — both pages drive
   js/forumpicker.js — and it is only the look that is written twice, which is
   this repo's standing arrangement for two pages that are otherwise edited
   independently and keep no tokens file between them.

   What genuinely differs is the input's base look, and that is why a shared
   stylesheet would not have helped: on legal.html `.field input[type="text"]`
   reaches it for free, and this page has no `.field`, so `.combo-input`
   carries what `.vf-select` used to say.

   `.combo-list` SETS display, so it carries its own [hidden] rule — the trap
   this repo has now recorded eight times, and the failure here is a list
   permanently open rather than anything that throws. */
.vf-forum .combo { flex: 0 1 320px; min-width: 220px; }
.combo { position: relative; }
.combo-input {
  width: 100%; box-sizing: border-box;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 30px 6px 10px; font: 400 12.5px/1.3 var(--sans);
}
.combo-input:focus-visible { outline: 2px solid var(--brass-dim); outline-offset: 1px; }
.combo-clear {
  position: absolute; top: 0; right: 0; width: 30px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font: 400 16px/1 var(--sans); color: var(--text-dim);
  background: none; border: 0; cursor: pointer;
}
.combo-clear:hover { color: var(--text); }

.combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
  max-height: 300px; overflow-y: auto;
  display: block;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.combo-list[hidden] { display: none; }

/* 44px, the figure this repo already settled for the mode sheet's own segments:
   the number is about a fingertip and not about a viewport, and a row in a
   picker is the thing being aimed at rather than a line being read. */
.combo-row {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 7px 11px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.combo-row:last-child { border-bottom: none; }
.combo-row:hover, .combo-row[data-cursor] { background: var(--surface); }
.combo-row[aria-selected="true"] .combo-name { color: var(--brass); }
.combo-name { font: 400 12.5px/1.4 var(--sans); color: var(--text); flex: 1; }
.combo-cite { font: 400 11px/1.4 var(--sans); color: var(--text-dim); flex: none; }

.combo-more, .combo-empty {
  padding: 8px 11px; font: 400 11px/1.5 var(--sans); color: var(--text-dim);
}
.combo-more { border-top: 1px solid var(--border); }

/* The label carries the verdict and the sentence carries the reason. Both are
   shown rather than the sentence hiding in a tooltip — a hover does not exist
   on a phone, which this file's siblings have recorded three times. */
.vf-auth { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.vf-auth-label {
  font: 600 10.5px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; white-space: nowrap; flex: none;
}
.vf-auth-why { font: 400 11.5px/1.45 var(--sans); color: var(--text-dim); }
.is-binding       .vf-auth-label { background: rgba(176,141,87,.15); color: var(--brass); }
.is-binding-state .vf-auth-label { background: rgba(176,141,87,.10); color: var(--brass); }
.is-persuasive    .vf-auth-label { background: rgba(107,147,181,.15); color: var(--signal); }
.is-unknown       .vf-auth-label { background: var(--surface-2); color: var(--text-dim); }

/* The one link off this page, at the end of the results. Quiet on purpose: the
   verifier is what somebody came for, and this is an offer rather than a pitch. */
.vf-more {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font: 400 13.5px/1.7 var(--sans);
  color: var(--text-muted);
  max-width: 66ch;
}
.vf-more a { color: var(--brass); }
.vf-more a:hover { color: var(--brass-dim); }

/* ---------- The legal header ---------- */
/* index.css styles `header .wrap` as a two-item flex row; this one has three,
   so the tag is pushed off the brand rather than given its own column. */
/* 64px, which is the board's, against index.css's 28px-padded header — that one
   is sized for a landing page carrying a 48px lockup, and this one carries a
   20px bolt. */
.vf-header { padding: 0; }
.vf-header .wrap { display: flex; align-items: center; gap: 10px; height: 64px; }
.vf-header nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.vf-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
/* THE BRAND'S OWN BOLT, the one the favicon is cut from (scripts/make-favicon.py
   writes img/zerowitness-bolt.png tight to its ink, aspect 1.448). A mask painted
   with --brass, like .mark-img on the other pages, so one file serves both
   themes. It replaced a generic SVG zigzag that was not the mark at all. The box
   is the file's own aspect, so `contain` letterboxes nothing. */
.vf-bolt {
  display: block; width: 32px; height: 22px; flex: none;
  background: var(--brass);
  -webkit-mask: url(/img/zerowitness-bolt.png) center / contain no-repeat;
          mask: url(/img/zerowitness-bolt.png) center / contain no-repeat;
}
.vf-brand-name {
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vf-tag {
  font: 600 10px/1 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass);
  background: rgba(176,141,87,.15);
  padding: 3px 7px;
  border-radius: 3px;
}
/* A statement, not a link, exactly as the board has it. */
.vf-free { font: 400 12.5px/1 var(--sans); color: var(--text-dim); }

@media (max-width: 640px) {
  .vf-free { display: none; }
  .vf-header .wrap { gap: 8px; }
}

/* ---------- Stage 1 as the board draws it ---------- */
/* A 640px column, centred, with one thing to do in it. The measurements are the
   board's: 640 for the drop zone and the facts row, 560 for the closing line so
   it is visibly narrower than what it qualifies. */
.vf-hero {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.vf-hero h1 { font-size: 38px; margin-bottom: 12px; }
.vf-hero .vf-lede { max-width: 620px; margin: 0 auto 26px; }

/* The textarea and its contents are the one thing that must NOT be centred —
   text somebody is going to read back to themselves belongs on a left edge. */
.vf-hero .vf-textarea { text-align: left; margin-top: 16px; }

.vf-hero .vf-actions { justify-content: center; }
.vf-hero .vf-facts { margin-top: 40px; text-align: left; }
.vf-hero .vf-limit { margin: 22px auto 0; max-width: 560px; }

.vf-drop-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.vf-btn-primary { background: var(--brass); border-color: var(--brass); color: #14161b; font-weight: 600; }
.vf-btn-primary:hover { background: #c39b62; border-color: #c39b62; }

/* The last column of the facts row has no divider to its right, so its right
   padding would push the row off centre. */
.vf-hero .vf-fact:last-child { padding-right: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .vf-hero h1 { font-size: 27px; }
  .vf-hero h1 br { display: none; }
}

/* ---------- Editing the list ---------- */
/* The rows keep the monospace and the tabular figures the read-only list has, so
   a citation does not move on the page when it becomes editable — the point is
   correcting a character, not entering a new thing. */
.vf-cites.is-editing { display: flex; flex-direction: column; gap: 6px; }
.vf-edit-row { display: flex; align-items: center; gap: 8px; list-style: none; }
.vf-edit-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 10px;
  font: 400 13px/1.4 var(--vf-mono);
  font-variant-numeric: tabular-nums;
}
.vf-edit-input:focus { outline: none; border-color: var(--brass-dim); }
.vf-edit-input::placeholder { font-family: var(--sans); color: var(--text-dim); }
.vf-edit-drop {
  flex: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-dim); cursor: pointer;
  font: 400 15px/1 var(--sans);
}
/* --vf-warn, not --warn: this file namespaces its own tokens because index.css
   carries none, and an undefined custom property invalidates the whole
   declaration rather than falling back — so the unprefixed name would have made
   this hover silently do nothing. Caught by diffing var() names used against
   names defined, which is the audit this repo already prescribes. */
.vf-edit-drop:hover { color: var(--vf-warn); border-color: var(--vf-warn-line); }
.vf-edit-add-btn:hover { color: var(--brass); border-color: var(--brass-dim); }
.vf-edit-add { margin-top: 4px; }

/* The centred status line under the drop zone, now that it is no longer sitting
   in a left-aligned row beside a button. */
.vf-note-centre { text-align: center; margin-top: 16px; min-height: 1.4em; }

/* OPACITY IS NOT ENOUGH FOR A FILLED BUTTON. .vf-btn:disabled drops to .5, which
   reads as disabled on an outlined control and still reads as ACTIVE on a brass
   fill — measured on screen while the list was in edit mode and Check was
   genuinely disabled. The fill is what says "press me", so the fill is what goes. */
.vf-btn-primary:disabled { background: none; color: var(--text-dim); border-color: var(--border); }
.vf-btn-primary:disabled:hover { background: none; border-color: var(--border); }

/* ---------------------------------------------------------------------------
   Quotations
   ---------------------------------------------------------------------------
   The state vocabulary is the one the tally and the row icons already use, for
   the reason recorded there: one meaning per state, and it should not depend on
   which part of the page you are looking at. Brass is the accent rather than an
   approval, amber is attention rather than failure, and there is no green,
   because "these words are in the opinion" is not "this citation is fine".

   ALTERED IS THE LOUD ONE AND NOT-FOUND IS THE QUIET ONE, which is the opposite
   of what it looks like it should be. An altered quotation is a discrepancy we
   have actually established — the passage is here and it differs. Not-found is
   a gap that may be ours: a different reporter's rendering, an opinion we hold
   under another cluster, an emphasis added. The louder colour belongs to the
   finding rather than to the absence. */
.vf-quotenote { margin: 14px 0 0; font: 400 12.5px/1.6 var(--sans); color: var(--text-muted); }
.vf-quotenote strong { color: var(--text); font-weight: 600; }
.vf-quotetally { margin: 10px 0 0; font: 400 12px/1.5 var(--sans); color: var(--text-muted); }

.vf-quote {
  margin: 10px 0 0;
  padding: 10px 0 10px 13px;
  border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 5px;
}
.vf-quote.is-exact,
.vf-quote.is-ellipsis { border-left-color: var(--brass); }
.vf-quote.is-altered  { border-left-color: var(--vf-bad); }
.vf-quote.is-notfound { border-left-color: var(--vf-warn); }

.vf-quote-said {
  font: 400 13px/1.6 var(--serif);
  color: var(--text);
  overflow-wrap: anywhere;
}
.vf-quote-say { font: 400 11.5px/1.5 var(--sans); color: var(--text-muted); }
.vf-quote-where { font: 400 11.5px/1.5 var(--sans); color: var(--text-dim); }
.vf-quote-where strong { color: var(--text-muted); font-weight: 600; }
.vf-quote-where.is-warn { color: var(--vf-warn); }
.vf-quote-caveat { font: 400 11.5px/1.5 var(--sans); color: var(--text-dim); }

/* Opinion first, because the question is what it actually says. The two marks
   are named in words beside the diff as well as coloured — the difference
   between a court's word and a brief's word is the whole content here, and it
   must not rest on being able to tell two shades apart. */
.vf-quote-diff {
  font: 400 12.5px/1.75 var(--sans);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 11px;
  overflow-wrap: anywhere;
}
.vf-d-removed { color: var(--text); text-decoration: line-through; text-decoration-thickness: 1px; }
.vf-d-added { color: var(--vf-bad); background: var(--vf-bad-bg); border-radius: 3px; padding: 0 3px; }
.vf-quote-legend { font: 400 11px/1.5 var(--sans); color: var(--text-dim); }

.vf-quote-src { font: 400 11.5px/1.5 var(--sans); color: var(--text-dim); }
.vf-quote-src summary { cursor: pointer; }
.vf-quote-src pre {
  margin: 7px 0 0;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 400 11.5px/1.6 var(--vf-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow-y: auto;
}

/* The search phrase above the headline — see `.h1-kicker` in index.css. This
   page's hero is centred, so the kicker is too; it uses index.css's own tokens,
   which verify.css layers on top of rather than redefining. */
.vf-kicker {
  display: block;
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
}

/* ---------- Table of authorities ---------- */
.vf-toa { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 14px 16px; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.vf-toa[hidden] { display: none; }
.vf-toa-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 13px/1.4 var(--sans); }
.vf-toa-tools { display: inline-flex; gap: 8px; flex-wrap: wrap; }
/* The pasted fragment itself, on a white page, as it will look in a word processor. */
.vf-toa-preview { background: #fff; color: #111; border-radius: 4px; padding: 14px 18px; max-height: 380px; overflow: auto; font: 400 13px/1.45 Georgia, 'Times New Roman', serif; }
.vf-toa-preview table { font: inherit; color: inherit; }

/* ---------- Citation format ---------- */
.vf-format { list-style: none; margin: 6px 0 0; padding: 0; }
.vf-format-row { display: grid; grid-template-columns: 170px 1fr; gap: 2px 14px; padding: 10px 0 10px 12px; border-top: 1px solid var(--border); border-left: 2px solid var(--vf-warn-line); }
.vf-format-kind { font: 600 10.5px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--vf-warn); grid-row: span 2; }
.vf-format-raw { font: 500 12.5px/1.45 var(--vf-mono); overflow-wrap: anywhere; }
.vf-format-say { font: 400 12px/1.5 var(--sans); color: var(--text-muted); }
.vf-format-sugg code { font: 400 12px/1.3 var(--vf-mono); color: var(--text); }
@media (max-width: 560px) { .vf-format-row { grid-template-columns: 1fr; } .vf-format-kind { grid-row: auto; } }

/* ---------- Cited by ----------
   A list, never a verdict: no red, amber or green. */
.vf-cb { margin: 6px 0 2px; padding: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.vf-cb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 12px/1.5 var(--sans); color: var(--text-muted); }
.vf-cb-tools { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vf-cb-sort { font: 400 12px/1.2 var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 9px; }
.vf-cb-list { list-style: none; margin: 0; padding: 0; }
.vf-cb-row { padding: 6px 0; border-top: 1px solid var(--border); font: 400 12.5px/1.45 var(--sans); overflow-wrap: anywhere; }
.vf-cb-row:first-child { border-top: none; }
.vf-cb-row a { color: var(--brass); text-decoration: none; }
.vf-cb-cite { font: 400 12px/1.3 var(--vf-mono); color: var(--text-muted); }
.vf-cb-level { font: 600 9.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.vf-cb-meta { font: 400 11px/1.45 var(--sans); color: var(--text-dim); }

/* The coverage page, in the header, because what a check can find depends on it. */
.vf-cov { font: 400 12.5px/1 var(--sans); color: var(--text-muted); text-decoration: none; margin-right: 18px; }
.vf-cov:hover { color: var(--brass); }

/* Text the document carries and a reader would not see.
   Borrows .vf-suspects' box — including its own [hidden] rule, which is the
   trap this project records nine times — and repaints it amber. The colour is
   the argument: red on this page means something that has to be dealt with
   before filing, and concealed text is as often a template or a tracked change
   as it is anything else. See hiddentext.js. */
.vf-hidden-text {
  border-color: var(--vf-warn-line);
  background: var(--vf-warn-bg);
}
.vf-hidden-text .vf-eyebrow {
  color: var(--vf-warn);
  /* The headline is a sentence rather than a label here, so it does not take
     the uppercase letter-spacing the eyebrows beside it use. */
  text-transform: none;
  letter-spacing: 0;
  font: 600 12.5px/1.45 var(--sans);
}
.vf-hidden-text details { font: 400 12px/1.55 var(--sans); }
.vf-hidden-text summary { cursor: pointer; color: var(--brass); }
.vf-hidden-text .vf-cites {
  /* One finding per row: these are sentences, not citations, so the
     multi-column grid .vf-cites uses for citation numbers would shred them. */
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
}
.vf-hidden-text .vf-cites li { margin-bottom: 6px; }
.vf-hidden-text code {
  font: 400 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 5px;
}