/* ═══════════════════════════════════════════════════════════════════════════
   Evidite — citation verification interface
   The instrument is navy. The evidence is paper.

   Shared with CitateScreen and SciPubAudit. Everything above the
   BRIEFAUDIT banner near the foot of this file is the common system and
   should be changed in all three products at once; everything below it is
   specific to the legal product.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ink — the instrument */
  --ink-900: #1c242f;
  --ink-800: #27303f;
  --ink-700: #354051;
  --ink-600: #46536a;

  --on-ink:    #eceae4;
  --on-ink-2:  rgba(236, 234, 228, 0.64);
  --on-ink-3:  rgba(236, 234, 228, 0.40);
  --ink-rule:  rgba(236, 234, 228, 0.13);
  --ink-rule-2:rgba(236, 234, 228, 0.24);

  /* paper — the evidence */
  --paper:        #eceae4;
  --paper-raised: #f4f3ef;
  --paper-hi:     #fbfaf8;
  --rule:         #d6d3ca;
  --rule-soft:    #e4e1d9;

  --on-paper:   #27303f;
  --on-paper-2: #5b6472;
  --on-paper-3: #808795;

  /* accent — reserved for brand, primary action, focus, live state */
  --gold:      #e5c813;
  --gold-deep: #b99f07;

  /* verdicts — colourblind-safe blue / ochre / vermillion */
  --ok:    #17627f;
  --warn:  #8f6109;
  --bad:   #a8391a;
  --mute:  #6f7787;

  --ok-tint:   #e7f0f5;  --ok-line:   #b3ccda;
  --warn-tint: #f7f0de;  --warn-line: #dfcb9c;
  --bad-tint:  #f9eae4;  --bad-line:  #e7c1b0;
  --mute-tint: #f0efeb;  --mute-line: var(--rule);

  --bad-lit:  #e08a68;   /* vermillion, lightened for navy surfaces */

  /* type */
  --f-display: "meno-display-extra-condensed", "Meno Display", ui-serif, Georgia, serif;
  --f-sans: "basic-sans", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  /* metrics */
  --bar-h: 58px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-ink);
  background: var(--ink-900);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.55s var(--ease);
}
body[data-state="report"] {
  background: var(--paper);
  color: var(--on-paper);
}

::selection { background: var(--gold); color: var(--ink-900); }

/* ── scrollbars ───────────────────────────────────────────────────────────
   One treatment, re-derived per ground rather than made translucent. The
   thumb is inset by a transparent border so it reads as a floating pill.  */
:root { --sb-thumb: rgba(236, 234, 228, 0.26); --sb-thumb-hover: rgba(236, 234, 228, 0.44); }
body[data-state="report"],
body[data-state="doc"] { --sb-thumb: #c6c2b7; --sb-thumb-hover: #a9a496; }
.detail, .rows, .index { --sb-thumb: #c6c2b7; --sb-thumb-hover: #a9a496; }

/* Chromium and Safari take the pseudo-elements, which is the only way to drop
   the stepper arrows. Setting scrollbar-width here would switch Chrome back to
   its native bar and silently discard every rule below, so Firefox — which has
   no pseudo-elements — gets the standard properties on its own. */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

a { color: inherit; }

/* ── top bar ──────────────────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--bar-h);
  padding: 0 clamp(16px, 3.5vw, 34px);
  background: var(--ink-800);
  border-bottom: 1px solid var(--ink-rule);
  color: var(--on-ink);
}

.top-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}
/* the wing mark, tintable via currentColor */
.mark {
  display: block;
  background: currentColor;
  -webkit-mask: url("/static/mark.svg") no-repeat center / contain;
  mask: url("/static/mark.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.top-mark {
  width: 19px;
  height: 26px;
  color: var(--gold);
}

.top-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: 0.005em;
  line-height: 1;
  padding-top: 2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gold);
}
.top-org {
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  padding-top: 3px;
  white-space: nowrap;
}
.top-org a {
  color: var(--on-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-rule-2);
  transition: color 0.15s, border-color 0.15s;
}
.top-org a:hover { color: var(--on-ink); border-bottom-color: var(--on-ink-3); }

.top-spacer { flex: 1; }


/* ── stage ────────────────────────────────────────────────────────────── */
.stage { flex: 1; display: flex; flex-direction: column; }

.view { display: none; flex: 1; flex-direction: column; }
.view.is-on { display: flex; animation: rise 0.5s var(--ease) both; }

/* the report is a fixed-height workspace; everything else scrolls the page */
body[data-state="report"] { overflow: hidden; height: 100vh; height: 100dvh; }
body[data-state="report"] .stage,
body[data-state="report"] .view { min-height: 0; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ═══ INTAKE ══════════════════════════════════════════════════════════════ */

.intake {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
  max-width: 1260px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(30px, 5vh, 62px) clamp(20px, 4vw, 44px) clamp(38px, 6vh, 70px);
}

.intake-lede { min-width: 0; }


.headline {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4.15rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  margin-bottom: 20px;
  max-width: 16ch;
  color: var(--gold);
}

.lede {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--on-ink-2);
  max-width: 46ch;
}

.lede-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-rule);
}
.fact-n {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  display: block;
}
.fact-l {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  margin-top: 4px;
}

/* the sheet — cream evidence surface floating on the instrument */
.sheet {
  background: var(--paper-hi);
  color: var(--on-paper);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset,
              0 24px 60px -24px rgba(0,0,0,0.55),
              0 2px 8px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

.sheet-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-paper-3);
  margin-bottom: 14px;
  position: relative;
}

/* ── drop zone ────────────────────────────────────────────────────────── */
.drop {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  text-align: center;
  min-height: 168px;
  padding: 26px 22px;
  border: 1.5px dashed #bab6ab;
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s, background 0.18s, transform 0.18s var(--ease);
}
.drop:hover { border-color: var(--ink-600); }
.drop[data-drag="true"] {
  border-color: var(--gold-deep);
  border-style: solid;
  background: #fffdf0;
  transform: scale(1.012);
}
.drop input[type=file] { display: none; }

.drop-mark {
  width: 26px; height: 34px;
  color: var(--ink-700);
  opacity: 0.42;
  margin-bottom: 4px;
  transition: color 0.18s, opacity 0.18s;
}
.drop:hover .drop-mark,
.drop[data-drag="true"] .drop-mark { color: var(--gold-deep); opacity: 1; }

.drop-title { font-size: 1rem; font-weight: 700; }
.drop-title u { text-decoration-color: var(--gold-deep); text-underline-offset: 3px; }
.drop-meta  { font-size: 0.84rem; color: var(--on-paper-3); }

/* ── text field ───────────────────────────────────────────────────────── */
.field {
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  background: #fff;
  font-family: var(--f-mono);
  font-size: 0.92rem;
  color: var(--on-paper);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field::placeholder { color: #a7ada0; font-family: var(--f-sans); }
.field:focus {
  border-color: var(--ink-700);
  box-shadow: 0 0 0 3px rgba(229, 200, 19, 0.35);
}

/* ── accepted-format chips ────────────────────────────────────────────── */
.formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 12px;
}
.fmt {
  padding: 9px 11px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  background: var(--paper-raised);
  min-width: 0;
}
.fmt-k {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.fmt-v {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--on-paper-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fmt-always .fmt-k { color: var(--ok); }
.fmt-maybe  .fmt-k { color: var(--warn); }

.formats-note {
  margin-top: 11px;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--on-paper-3);
}
.formats-note b { color: var(--on-paper-2); font-weight: 700; }

/* ── file row ─────────────────────────────────────────────────────────── */
.picked {
  display: none;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper-raised);
  font-size: 0.9rem;
}
.picked.is-on { display: flex; }
.picked-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picked-size { color: var(--on-paper-3); font-size: 0.8rem; white-space: nowrap; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn-go:disabled { background: var(--paper); color: var(--on-paper-3); border-color: var(--rule); }

.btn-go {
  width: 100%;
  margin-top: 16px;
  padding: 14px 20px;
  font-size: 0.98rem;
  background: var(--ink-800);
  color: var(--paper);
}
.btn-go:not(:disabled):hover { background: var(--ink-700); }
.btn-go:not(:disabled)::after {
  content: "";
  width: 6px; height: 6px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.18s var(--ease);
}
.btn-go:not(:disabled):hover::after { transform: rotate(45deg) translate(2px, -2px); }

.btn-primary { background: var(--ink-800); color: var(--paper); }
.btn-primary:hover { background: var(--ink-700); }

.btn-quiet {
  background: transparent;
  color: var(--on-paper);
  border-color: var(--rule);
}
.btn-quiet:hover { background: var(--paper-raised); border-color: var(--on-paper-3); }

.btn-ghost {
  background: transparent;
  color: var(--on-paper-2);
  border-color: transparent;
  padding: 6px 8px;
  font-size: 0.82rem;
  font-weight: 600;
}
.btn-ghost:hover { color: var(--on-paper); background: var(--paper-raised); }

/* ── alert ────────────────────────────────────────────────────────────── */
.alert {
  display: none;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid var(--bad-line);
  border-radius: var(--r-sm);
  background: var(--bad-tint);
  color: #7d2a12;
  font-size: 0.87rem;
  line-height: 1.5;
}
.alert.is-on { display: block; }

/* ═══ WORKING ═════════════════════════════════════════════════════════════ */

.working {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(36px, 8vh, 90px) clamp(20px, 4vw, 44px);
}
.working-inner { width: 100%; max-width: 620px; }

.working-subject {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.02;
  margin-bottom: 6px;
  word-break: break-word;
}
.working-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

/* stage tracker — real backend phases, no invented progress */
.steps {
  list-style: none;
  margin: 26px 0 0;
  border-top: 1px solid var(--ink-rule);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--ink-rule);
  color: var(--on-ink-3);
  transition: color 0.4s var(--ease);
}
/* the active step fills as its reference count climbs — scaled, not resized,
   so the growth stays on the compositor */
.step[data-bar]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(var(--step-scale, 0));
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
}
.step-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  justify-self: center;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.step-name { font-size: 0.95rem; font-weight: 600; }
.step-tag {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s;
}
.step[data-at="done"] { color: var(--on-ink-2); }
.step[data-at="done"] .step-dot { background: currentColor; }
.step[data-at="now"] { color: var(--gold); }
.step[data-at="now"] .step-dot { background: var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.step[data-at="now"] .step-tag,
.step[data-at="done"] .step-tag { opacity: 1; }

.readout {
  margin-top: 22px;
  padding: 13px 15px;
  background: var(--ink-800);
  border: 1px solid var(--ink-rule);
  border-radius: var(--r-md);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--on-ink-2);
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.readout-caret { color: var(--gold); flex-shrink: 0; }
.readout-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.working-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--on-ink-3);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.elapsed { font-variant-numeric: tabular-nums; }

/* ═══ REPORT ══════════════════════════════════════════════════════════════ */

.report { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.report-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: clamp(14px, 2.2vw, 22px) clamp(16px, 3.5vw, 34px) 14px;
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}
.report-head-text { flex: 1; min-width: 260px; }
.report-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.005em;
  word-break: break-word;
}
.report-meta {
  margin-top: 8px;
  font-size: 0.79rem;
  color: var(--on-paper-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.report-meta code {
  font-family: var(--f-mono);
  font-size: 0.95em;
  color: var(--on-paper-2);
}
.report-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── verdict tally ────────────────────────────────────────────────────── */
.tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}
.tally-cell {
  background: var(--paper);
  padding: 12px clamp(16px, 3.5vw, 34px) 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}
.tally-cell:hover { background: var(--paper-raised); }
.tally-cell[aria-pressed="true"] { background: var(--paper-hi); }
.tally-cell[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: currentColor;
}
.tally-n {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 0.86;
  font-variant-numeric: tabular-nums;
}
.tally-body { min-width: 0; }
.tally-k {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.tally-pct {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--on-paper-3);
  font-variant-numeric: tabular-nums;
}
.tally-d {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--on-paper-3);
  margin-top: 2px;
  max-width: 24ch;
}
.v-ok   { color: var(--ok); }
.v-warn { color: var(--warn); }
.v-bad  { color: var(--bad); }
.v-mute { color: var(--mute); }

/* ── workspace: index + detail ────────────────────────────────────────── */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
}

/* index panel */
.index {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--rule);
  background: var(--paper-raised);
}

.index-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px clamp(12px, 2vw, 16px);
  border-bottom: 1px solid var(--rule);
}
.search {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  color: var(--on-paper);
  outline: none;
}
.search::placeholder { color: var(--on-paper-3); }
.search:focus { border-color: var(--ink-700); box-shadow: 0 0 0 3px rgba(229,200,19,0.3); }
.index-count {
  font-size: 0.72rem;
  color: var(--on-paper-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.index-body {
  flex: 1;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 0;
}

/* the spine — one tick per reference, whole document at a glance */
.spine {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 6px;
  background: var(--paper);
  border-right: 1px solid var(--rule-soft);
  cursor: pointer;
}
.spine:hover .tick { opacity: 0.75; }
.spine:hover .tick[data-off="1"] { opacity: 0.18; }
.tick {
  flex: 1 1 0;
  min-height: 2px;
  border-radius: 1px;
  background: var(--mute-line);
  transform-origin: left center;
  transition: opacity 0.2s, transform 0.2s var(--ease);
}
.tick[data-v="verified"]   { background: var(--ok); }
.tick[data-v="partial"]    { background: var(--warn); }
.tick[data-v="unverified"] { background: var(--bad); }
.tick[data-v="type_a"]     { background: var(--bad); }
.tick[data-v="skipped"]    { background: #c9c6bd; }
.tick[data-off="1"]  { opacity: 0.22; }
.tick[data-cur="1"]  { transform: scaleX(1.9); border-radius: 0 2px 2px 0; }
.spine.is-drawing .tick { animation: tick-in 0.32s var(--ease) both; }
@keyframes tick-in {
  from { opacity: 0; transform: scaleX(0.1); }
  to   { opacity: 1; transform: none; }
}

.rows {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 11px 14px 11px 13px;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.row:hover { background: var(--paper-hi); }
/* Selection reads through fill and weight, not an accent stripe: the index sits
   on the raised paper step, so white plus bold is an unambiguous third level. */
.row[aria-current="true"] { background: #fff; }
.row[aria-current="true"] .row-title { font-weight: 700; color: var(--on-paper); }
.row[aria-current="true"] .row-n { color: var(--gold-deep); font-weight: 700; }
.row-n {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--on-paper-3);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.row-main { min-width: 0; }
.row-title {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--on-paper-3);
  min-width: 0;
}
.row-src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px 2px;
  border-radius: 3px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid;
}
.chip-verified   { color: var(--ok);   background: var(--ok-tint);   border-color: var(--ok-line); }
.chip-partial    { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); }
.chip-unverified { color: var(--bad);  background: var(--bad-tint);  border-color: var(--bad-line); }
.chip-type_a     { color: var(--bad);  background: var(--bad-tint);  border-color: var(--bad-line); }
.chip-skipped    { color: var(--mute); background: var(--mute-tint); border-color: var(--mute-line); }

.index-empty {
  padding: 34px 20px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--on-paper-3);
  line-height: 1.6;
}

/* detail panel */
.detail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--paper);
  padding: clamp(18px, 2.4vw, 28px) clamp(16px, 3vw, 38px) 70px;
}
.detail > * { max-width: 62rem; }

.detail-blank {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  color: var(--on-paper-3);
  padding: 40px 20px;
}
.detail-blank-mark { width: 30px; height: 40px; opacity: 0.22; }

.back {
  display: none;
  margin-bottom: 14px;
}

.d-head {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.d-n {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 0.9;
  color: var(--on-paper-3);
  font-variant-numeric: tabular-nums;
}
.d-nav { margin-left: auto; display: flex; gap: 4px; }
.d-nav-btn {
  width: 34px; height: 34px;
  display: grid; place-content: center;
  border: 1px solid var(--on-paper-3);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--on-paper);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.d-nav-btn svg { width: 15px; height: 15px; display: block; }
.d-nav-btn:hover:not(:disabled) {
  background: var(--ink-800);
  border-color: var(--ink-800);
  color: var(--paper);
}
.d-nav-btn:disabled {
  color: var(--on-paper-3);
  border-color: var(--rule);
  background: transparent;
  cursor: not-allowed;
}

.d-title {
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.38;
  margin: 18px 0 6px;
}
.d-byline { font-size: 0.87rem; color: var(--on-paper-2); }
.d-title-none { color: var(--on-paper-3); font-weight: 600; font-style: italic; }
.d-none {
  padding: 14px 16px;
  border: 1px dashed var(--rule);
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--on-paper-2);
}

.d-warn {
  display: flex;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 13px;
  background: var(--warn-tint);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-sm);
  font-size: 0.83rem;
  line-height: 1.5;
  color: #6d4a06;
}

.d-block { margin-top: 26px; }
.d-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-paper-3);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.d-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.d-raw {
  padding: 13px 15px;
  background: var(--paper-hi);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--on-paper-2);
  word-break: break-word;
}
.d-raw mark {
  background: rgba(168, 57, 26, 0.11);
  color: var(--bad);
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}

/* field comparison */
.fields {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
}
.f-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 26px;
  align-items: start;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.85rem;
}
.f-row:last-child { border-bottom: none; }
.f-k {
  padding: 9px 11px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-paper-3);
  border-right: 1px solid var(--rule-soft);
  align-self: stretch;
}
.f-v {
  padding: 9px 11px;
  line-height: 1.5;
  word-break: break-word;
  min-width: 0;
}
.f-mark {
  padding: 9px 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.f-note { display: block; margin-top: 3px; font-size: 0.76rem; color: var(--on-paper-3); }
.f-was {
  color: var(--bad);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.f-now { font-weight: 700; }
.f-arrow { color: var(--on-paper-3); padding: 0 5px; }

.f-row[data-v="match"]    { background: var(--ok-tint); }
.f-row[data-v="match"]    .f-k, .f-row[data-v="match"] .f-mark { color: var(--ok); }
.f-row[data-v="partial"]  { background: var(--warn-tint); }
.f-row[data-v="partial"]  .f-k, .f-row[data-v="partial"] .f-mark { color: var(--warn); }
.f-row[data-v="mismatch"] { background: var(--bad-tint); }
.f-row[data-v="mismatch"] .f-k, .f-row[data-v="mismatch"] .f-mark { color: var(--bad); }
.f-row[data-v="mismatch"] .f-now { color: var(--ok); }

/* correction card */
.fix {
  border: 1px solid var(--ink-700);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-800);
  color: var(--on-ink);
}
.fix-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  background: var(--ink-900);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--ink-rule);
}
.fix-conf { margin-left: auto; color: var(--on-ink-3); letter-spacing: 0.08em; }
.fix-conf b { color: var(--on-ink); }
.fix-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--ink-rule);
  font-size: 0.85rem;
}
.fix-row:last-child { border-bottom: none; }
.fix-k {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  padding-top: 2px;
}
.fix-v {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  word-break: break-all;
  display: flex;
  align-items: center;
  gap: 9px;
}
.fix-v-none { color: var(--on-ink-3); font-family: var(--f-sans); font-style: italic; }
.fix-old { color: var(--bad-lit); text-decoration: line-through; }
.fix-new { color: var(--gold); font-weight: 700; }
.copy {
  border: 1px solid var(--ink-rule-2);
  background: transparent;
  color: var(--on-ink-2);
  border-radius: 3px;
  padding: 2px 7px;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.copy:hover { background: var(--ink-700); color: var(--on-ink); }
.copy[data-done="1"] { color: var(--gold); border-color: var(--gold); }

/* ── sticky download dock ─────────────────────────────────────────────── */
.dock {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px clamp(16px, 3.5vw, 34px);
  background: var(--ink-800);
  color: var(--on-ink);
  border-top: 1px solid var(--ink-rule);
}
/* The dock is the last thing a reader touches, so both downloads carry real
   weight — the secondary one is filled, not a ghost outline. */
.dock .btn {
  padding: 11px 20px;
  font-size: 0.9rem;
  background: var(--ink-700);
  color: var(--on-ink);
  border-color: var(--ink-600);
}
.dock .btn:hover { background: var(--ink-600); border-color: var(--on-ink-3); }
.dock .btn-dock-key { background: var(--gold); color: var(--ink-900); border-color: var(--gold); }
.dock .btn-dock-key:hover { background: #f0d63a; border-color: #f0d63a; }
.dock-hint {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--on-ink-3);
}
.dock-hint kbd {
  font-family: var(--f-mono);
  font-size: 0.9em;
  border: 1px solid var(--ink-rule-2);
  border-radius: 3px;
  padding: 1px 4px;
  margin: 0 1px;
}

/* ── foot ─────────────────────────────────────────────────────────────── */
.foot {
  padding: 16px clamp(16px, 3.5vw, 34px);
  border-top: 1px solid var(--ink-rule);
  font-size: 0.72rem;
  color: var(--on-ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
}
.foot-links { margin-left: auto; display: flex; gap: 16px; }
.foot-links a { color: var(--on-ink-2); text-underline-offset: 2px; }
.foot-links a:hover { color: var(--on-ink); }
body[data-state="report"] .foot { display: none; }

/* ═══ GATE ════════════════════════════════════════════════════════════════ */


/* ═══ LEGAL DOCUMENTS ═════════════════════════════════════════════════════ */

body[data-state="doc"] { background: var(--paper); color: var(--on-paper); }

.doc {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 56px) clamp(20px, 4vw, 40px) clamp(48px, 7vw, 80px);
}

.doc-head {
  padding-bottom: 22px;
  margin-bottom: 34px;
  border-bottom: 2px solid var(--on-paper);
}
.doc-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
}
.doc-meta { margin-top: 8px; font-size: 0.82rem; color: var(--on-paper-3); }

.doc-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.doc-toc {
  position: sticky;
  top: calc(var(--bar-h) + 22px);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.doc-toc-k {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-paper-3);
  margin-bottom: 9px;
}
.doc-toc-a {
  padding: 5px 0 5px 11px;
  border-left: 2px solid var(--rule);
  font-size: 0.79rem;
  line-height: 1.4;
  color: var(--on-paper-3);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.doc-toc-a:hover { color: var(--on-paper); }
.doc-toc-a[aria-current="true"] {
  color: var(--on-paper);
  border-left-color: var(--gold);
  font-weight: 700;
}

/* ── long-form prose ──────────────────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose > p:first-child {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--on-paper);
  margin-bottom: 8px;
}
.prose h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1.1;
  margin: 38px 0 10px;
  scroll-margin-top: calc(var(--bar-h) + 20px);
}
.prose p, .prose li {
  font-size: 0.94rem;
  line-height: 1.72;
  color: var(--on-paper-2);
}
.prose p { margin-bottom: 12px; }
.prose ul { margin: 0 0 12px; padding-left: 18px; }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--on-paper-3); }
.prose strong { color: var(--on-paper); font-weight: 700; }
.prose a { color: var(--on-paper); text-underline-offset: 2px; }

/* All-caps legal blocks: keep the legal force, lose the shouting */
.prose p.caps {
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--on-paper-2);
  padding: 14px 16px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
}

.doc-contact {
  margin-top: 46px;
  padding: 24px 26px;
  background: var(--ink-800);
  color: var(--on-ink);
  border-radius: var(--r-lg);
}
.doc-contact-k {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.05;
  color: var(--on-ink);
  margin-bottom: 8px;
}
.doc-contact p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--on-ink-2);
  margin-bottom: 16px;
}
.doc-contact a { color: var(--gold); }
.doc-contact .btn {
  background: var(--gold);
  color: var(--ink-900);
  border-color: var(--gold);
  text-decoration: none;
}
.doc-contact .btn:hover { background: #f0d63a; border-color: #f0d63a; }

.foot-paper {
  border-top-color: var(--rule);
  color: var(--on-paper-3);
}
.foot-paper .foot-links a { color: var(--on-paper-2); }
.foot-paper .foot-links a:hover { color: var(--on-paper); }

/* ═══ ACCOUNT ═════════════════════════════════════════════════════════════ */

.acct { display: flex; align-items: center; gap: 9px; margin-left: 6px; }

/* .btn-quiet is tuned for paper; on the navy bar it needs ink values */
.acct-signin.btn-quiet {
  padding: 7px 15px;
  font-size: 0.83rem;
  color: var(--on-ink);
  border-color: var(--ink-rule-2);
  background: transparent;
}
.acct-signin.btn-quiet:hover { background: var(--ink-700); border-color: var(--gold); }

.acct-retry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--ink-rule-2);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--on-ink-2);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}
.acct-retry:hover:not(:disabled) { border-color: var(--gold); color: var(--on-ink); }
.acct-retry:disabled { cursor: wait; opacity: 0.7; }
.acct-retry b { color: var(--gold); font-weight: 700; }

/* credits read as a number you can act on, not a notification */
.credits {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 11px 6px;
  border: 1px solid var(--ink-rule-2);
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: var(--on-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.credits:hover { border-color: var(--gold); color: var(--on-ink); }
.credits b {
  font-weight: 700;
  color: var(--on-ink);
  font-variant-numeric: tabular-nums;
}
/* nothing left to spend — the control becomes the invitation */
.credits[data-empty="1"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-900);
  font-weight: 700;
}
.credits[data-empty="1"]:hover { background: #f0d63a; border-color: #f0d63a; }

.avatar-wrap { position: relative; }
.avatar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 32px;
  padding: 0 8px 0 0;
  border: none;
  background: transparent;
  color: var(--on-ink-2);
  font: inherit;
  cursor: pointer;
}
.avatar-caret { width: 13px; height: 13px; display: block; opacity: 0.75; }
.avatar-disc {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink-700);
  border: 1px solid var(--ink-rule-2);
  color: var(--on-ink);
  display: grid;
  place-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color 0.15s;
}
.avatar:hover .avatar-disc,
.avatar[aria-expanded="true"] .avatar-disc { border-color: var(--gold); }

.acct-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 60;
  min-width: 282px;
  padding: 5px 0;
  background: var(--ink-900);
  border: 1px solid var(--ink-rule-2);
  border-radius: var(--r-md);
  box-shadow: 0 18px 44px -12px rgba(0,0,0,0.6);
  color: var(--on-ink);
}
.acct-menu[hidden] { display: none; }
.acct-who {
  padding: 11px 15px 4px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--on-ink-3);
  word-break: break-all;
}
.acct-bal {
  padding: 0 15px 11px;
  font-size: 0.78rem;
  color: var(--on-ink-2);
  border-bottom: 1px solid var(--ink-rule);
}
.acct-bal b {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--gold);
  margin-right: 3px;
  font-variant-numeric: tabular-nums;
}
.acct-item {
  display: block;
  width: 100%;
  padding: 9px 15px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  color: var(--on-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
}
.acct-item:hover { background: var(--ink-700); }
.acct-item-key { color: var(--gold); font-weight: 700; }
.acct-item-out { color: var(--bad-lit); }
.acct-sep { height: 1px; margin: 5px 0; background: var(--ink-rule); }
.acct-prefs { padding: 1px 8px 4px; }
.acct-prefs-label {
  margin: 0;
  padding: 7px 7px 5px;
  color: var(--on-ink-3);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.acct-pref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 7px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.acct-pref-row:hover,
.acct-pref-row:focus-within { background: var(--ink-700); }
.acct-pref-text { min-width: 0; }
.acct-pref-text strong,
.acct-pref-text small { display: block; }
.acct-pref-text strong {
  color: var(--on-ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}
.acct-pref-text small {
  margin-top: 2px;
  color: var(--on-ink-3);
  font-size: 0.68rem;
  line-height: 1.3;
}
.acct-pref-row input {
  appearance: none;
  position: relative;
  inline-size: 32px;
  block-size: 18px;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid var(--ink-rule-2);
  border-radius: 999px;
  background: var(--ink-700);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.acct-pref-row input::before {
  content: '';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--on-ink-2);
  transition: transform 0.14s var(--ease), background 0.14s;
}
.acct-pref-row input:checked {
  border-color: var(--gold);
  background: var(--gold);
}
.acct-pref-row input:checked::before {
  background: var(--ink-900);
  transform: translateX(14px);
}
.acct-pref-row input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(229, 200, 19, 0.32);
}
.acct-pref-row input:disabled { cursor: wait; }
.acct-prefs-status {
  min-height: 15px;
  margin: 0;
  padding: 2px 7px 0;
  color: var(--on-ink-3);
  font-size: 0.68rem;
  line-height: 1.3;
}
.acct-prefs-status[data-state="saved"] { color: var(--on-ink-2); }
.acct-prefs-status[data-state="error"] { color: var(--bad-lit); }
@media (forced-colors: active) {
  .acct-pref-row input { appearance: auto; inline-size: auto; block-size: auto; }
  .acct-pref-row input::before { content: none; }
}

/* ── auth modal ───────────────────────────────────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 24, 32, 0.72);
  backdrop-filter: blur(3px);
  animation: fade 0.2s var(--ease) both;
  overflow-y: auto;
}
.scrim[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative;
  width: min(430px, 100%);
  animation: rise 0.3s var(--ease) both;
  /* Padding absorbs the 3px box-shadow focus ring on form inputs so it
     never spills onto the scrim. Without this, clicking the visible
     gold glow registers e.target === scrim and closes the modal. */
  padding: 4px;
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  display: grid;
  place-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--on-paper-3);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.modal-close svg { width: 14px; height: 14px; display: block; }
.modal-close:hover { background: var(--paper-raised); color: var(--on-paper); }

.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 22px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--paper);
}
.tab {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--on-paper-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab[aria-selected="true"] {
  background: var(--ink-800);
  color: var(--paper);
}

.form-row { margin-bottom: 13px; }
.form-k {
  display: block;
  margin-bottom: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-paper-3);
}
.form-k span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-input {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  color: var(--on-paper);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input::placeholder { color: var(--on-paper-3); }
.form-input:focus {
  border-color: var(--ink-700);
  box-shadow: 0 0 0 3px rgba(229, 200, 19, 0.32);
}
select.form-input { cursor: pointer; }

/* password show/hide wrapper */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  right: 11px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px;
  cursor: pointer; color: var(--on-paper-3);
  line-height: 0;
}
.pw-toggle:hover { color: var(--on-paper); }
.pw-toggle svg { width: 18px; height: 18px; }

.form-hint {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--on-paper-3);
}

.form-agree {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 16px 0 4px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--on-paper-2);
  cursor: pointer;
}
.form-agree input { margin-top: 2px; flex-shrink: 0; accent-color: var(--ink-800); }
.form-agree a { color: var(--on-paper); text-underline-offset: 2px; }
.terms-copy {
  margin: 6px 0 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--on-paper-2);
}
.terms-agree { margin-top: 0; }
.terms-signout { text-align: center; }

.form-aside {
  margin-top: 9px;
  font-size: 0.78rem;
  text-align: right;
}
.form-aside a { color: var(--on-paper-3); }
.form-aside a:hover { color: var(--on-paper); }
.link-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--on-paper-3); font-size: inherit; text-decoration: underline; }
.link-btn:hover { color: var(--on-paper); }
.form-recovery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--on-paper-3);
}
.form-recovery[hidden] { display: none; }
.alert.alert-ok { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.fp-intro { margin-bottom: 12px; }
#fp-ok { overflow-wrap: anywhere; }
.fp-cooldown { margin-top: 10px; min-height: 1.2em; }
.fp-use-another { margin-top: 12px; }

.form-go {
  width: 100%;
  margin-top: 16px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--r-md);
  background: var(--ink-800);
  color: var(--paper);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.form-go:hover:not(:disabled) { background: var(--ink-700); }
.form-go:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── credit tiers ─────────────────────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.tier {
  padding: 13px 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  font: inherit;
  color: var(--on-paper);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s var(--ease);
}
.tier:hover {
  border-color: var(--ink-700);
  background: #fff;
  transform: translateY(-1px);
}
.tier:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  transform: none;
}
.buy-unavailable {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--on-paper-2);
  font-size: 0.82rem;
  line-height: 1.5;
}
.tier-n {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.tier-k {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-paper-3);
  margin: 4px 0 6px;
}
.tier-p { display: block; font-size: 0.88rem; font-weight: 700; }
.tier-each { font-size: 0.7rem; font-weight: 400; color: var(--on-paper-3); }

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .doc-body { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { display: none; }
  .prose { max-width: none; }
}

@media (max-width: 980px) {
  .intake {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-content: start;
  }
  .intake-lede { max-width: none; }
  .headline { font-size: clamp(2.6rem, 11vw, 4rem); }

  .workspace { grid-template-columns: minmax(0, 1fr); }
  .index { border-right: none; }
  .detail { display: none; }
  .workspace[data-view="detail"] .index { display: none; }
  .workspace[data-view="detail"] .detail { display: block; }
  .workspace[data-view="detail"] .back { display: inline-flex; }
  .rows { max-height: none; }
}

@media (max-width: 760px) {
  .top-org { display: none; }
  .foot-links { margin-left: 0; }
}

@media (max-width: 620px) {
  .acct-retry span { display: none; }
  .formats { grid-template-columns: 1fr; }
  .dock .btn { flex: 1; }
  .tally { grid-template-columns: 1fr; }
  .tally-cell { padding: 12px 18px; }
  .tally-n { font-size: 2.2rem; }
  .tally-d { display: none; }
  .f-row { grid-template-columns: 70px minmax(0, 1fr) 22px; }
  .fix-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .dock-hint { display: none; }
  .lede-facts { gap: 10px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRIEFAUDIT — legal-specific additions
   Everything above this banner is the shared Evidite system. Nothing here
   introduces a colour, a face or a radius that is not already declared above.
   ═════════════════════════════════════════════════════════════════════════ */

/* The dock links and the coverage banner are hidden with the `hidden`
   attribute, which a display declaration would otherwise win against. */
[hidden] { display: none !important; }

/* ── four-bucket tally ────────────────────────────────────────────────────
   A brief sorts into four states rather than three: the scholarly products
   have no equivalent of a reporter that simply is not in the index.        */
.tally[data-cells="4"] { grid-template-columns: repeat(4, 1fr); }

/* ── the citation as written ──────────────────────────────────────────────
   A case citation is an identifier that gets compared character by
   character, so it is set in mono like a DOI — not as prose.               */
.d-cite {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  line-height: 1.65;
}

/* ── negative treatment ───────────────────────────────────────────────────
   Overruled or limited authority is the one finding that outranks the
   verdict: the citation can be perfectly accurate and still unusable.      */
.d-nt {
  display: flex;
  gap: 9px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bad-tint);
  border: 1px solid var(--bad-line);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  line-height: 1.55;
  color: #7d2a12;
}
.d-nt b {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

/* ── coverage gap ─────────────────────────────────────────────────────────
   The Table of Authorities lists more cases than the report covers. Tinted
   fill and a full hairline, per the no-coloured-edge rule.                 */
.gap {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 11px clamp(16px, 3.5vw, 34px);
  background: var(--warn-tint);
  border-bottom: 1px solid var(--warn-line);
  font-size: 0.83rem;
  line-height: 1.5;
  color: #6d4a06;
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}
.gap b { font-weight: 700; }

/* ── provenance ───────────────────────────────────────────────────────────
   Which index answered, and how confidently. Set in the label voice
   because it is a category name, not a finding.                           */
.d-prov {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-top: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--on-paper-3);
}
.d-prov code {
  font-family: var(--f-mono);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--on-paper-2);
}

/* ── other records at this citation ───────────────────────────────────────
   Stacks and CourtListener can return several candidate clusters. The best
   one drives the verdict; the rest are listed so the reader can see what
   was considered and rejected.                                            */
.alts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alt {
  padding: 11px 13px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  background: var(--paper-hi);
}
.alt-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.alt-name { font-size: 0.87rem; font-weight: 700; min-width: 0; }
.alt-cite {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--on-paper-2);
  word-break: break-word;
}

/* ── outbound link to the canonical record ────────────────────────────── */
.d-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--on-paper);
  text-underline-offset: 3px;
}
.d-link svg { width: 13px; height: 13px; }

/* ── gravatar on the avatar disc ──────────────────────────────────────────
   The initials stay in the markup and stay legible underneath. The image
   only covers them once it has actually loaded, so a Gravatar miss (d=404)
   leaves the disc exactly as it was.                                      */
.avatar-disc { position: relative; overflow: hidden; }
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: none;
}
.avatar-img[data-on="1"] { display: block; }
.avatar-initials { position: relative; }

/* the account holder's name, above their address in the menu */
.acct-name {
  padding: 11px 15px 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--on-ink);
  word-break: break-word;
}
.acct-name + .acct-who { padding-top: 2px; }

/* ═══ QUOTATIONS ══════════════════════════════════════════════════════════
   A brief makes two separate claims: that a case exists where it says, and
   that the case says what it is quoted as saying. The second is checked
   against the opinion's own text and gets its own axis through the report —
   the same workspace, tallies and spine, over a different set of findings.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── mode switch ──────────────────────────────────────────────────────────
   Two grounds again: the inactive mode sits on paper, the active one takes
   the navy fill, so the selected axis reads as the instrument in use. The
   count is set in the display face, like every other tally in the report.  */
.modes {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
}
.mode {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 13px 7px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  color: var(--on-paper-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.mode:hover { background: var(--paper-hi); color: var(--on-paper); }
.mode[aria-selected="true"] { background: var(--ink-800); color: var(--paper); }
.mode[aria-selected="true"]:hover { background: var(--ink-700); }
.mode-n {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.mode-k {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mode[aria-selected="true"] .mode-n { color: var(--gold); }
/* Nothing to review on that axis — still reachable, visibly empty. */
.mode[data-empty="1"] .mode-n { opacity: 0.45; }

.report-acts { align-items: center; }

/* Each axis owns a tally and a workspace; the panel passes the report's
   height down to them so the index still scrolls internally. */
.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── quotation rows ───────────────────────────────────────────────────────
   A passage has no title, so the row shows the passage itself over the case
   it is attributed to — the reverse of a citation row.                     */
.row-quote {
  font-size: 0.84rem;
  font-style: italic;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── the comparison ───────────────────────────────────────────────────────
   The claim and the record, stacked. The brief's wording sits on the raised
   paper step; the opinion's sits on the verified tint, which is the same
   ground a confirmed field takes in the citation table.                    */
.qp { display: flex; flex-direction: column; gap: 9px; }
.qp-side {
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-soft);
  background: var(--paper-hi);
}
.qp-side[data-side="canonical"] {
  border-color: var(--ok-line);
  background: var(--ok-tint);
}
.qp-k {
  display: block;
  margin-bottom: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-paper-3);
}
.qp-side[data-side="canonical"] .qp-k { color: var(--ok); }
.qp-t {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--on-paper);
  word-break: break-word;
}
/* Word-level difference. Struck in the brief, emphasised in the opinion —
   the same pairing the field table uses for a wrong value and its
   correction, so one vocabulary covers both axes. */
.q-del {
  color: var(--bad);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.q-ins { color: var(--ok); font-weight: 700; }

.qp-conf {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-paper-3);
}
.qp-conf b {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--on-paper);
  letter-spacing: 0;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── provenance of the passage ────────────────────────────────────────────
   Where a line first appears. When that is not the case the brief credits,
   the quotation is borrowed — accurate wording, wrong attribution, and the
   one finding on this axis a citation check would never surface.           */
.first-use {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
  padding: 12px 15px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  background: var(--paper-hi);
}
.first-use[data-borrowed="1"] {
  border-color: var(--warn-line);
  background: var(--warn-tint);
}
.first-use-k {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-paper-3);
  white-space: nowrap;
}
.first-use[data-borrowed="1"] .first-use-k { color: var(--warn); }
.first-use-v { font-size: 0.89rem; font-weight: 700; min-width: 0; }
.first-use-note {
  grid-column: 2;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--on-paper-2);
}
.first-use[data-borrowed="1"] .first-use-note { color: #6d4a06; }

/* ── inline icons ─────────────────────────────────────────────────────────
   An interface icon carries a viewBox and no intrinsic size, so an unstyled
   one expands to fill whatever contains it. `:where()` contributes no
   specificity, so this is a floor every component rule still overrides —
   a new icon can never blow up before someone remembers to size it.       */
:where(.detail) svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── cross-link between the two axes ──────────────────────────────────── */
.jump {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  background: var(--paper-hi);
  font: inherit;
  font-size: 0.84rem;
  color: var(--on-paper);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.jump:hover { background: #fff; border-color: var(--on-paper-3); }
.jump-q {
  flex: 1;
  min-width: 0;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jumps { display: flex; flex-direction: column; gap: 6px; }

/* ── dock ─────────────────────────────────────────────────────────────────
   Five artefacts is more than a row of equals. The two reports lead; the
   raw data follows a spacer, one tonal step quieter.                      */
.dock-sep {
  width: 1px;
  align-self: stretch;
  margin: 0 4px;
  background: var(--ink-rule-2);
}
.dock .btn-dock-data {
  background: transparent;
  border-color: var(--ink-rule-2);
  color: var(--on-ink-2);
  font-size: 0.84rem;
  padding: 9px 14px;
}
.dock .btn-dock-data:hover {
  background: var(--ink-700);
  color: var(--on-ink);
  border-color: var(--on-ink-3);
}

/* Word add-in download — a quiet extension of the intake sheet. */
.word-addin-open {
  display: block;
  margin: 14px auto 0;
  padding: 2px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--on-paper-2);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.word-addin-open:hover { color: var(--on-paper); }
.word-addin-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--on-paper);
  box-shadow: 0 24px 70px rgb(10 17 28 / 32%);
}
.word-addin-dialog::backdrop { background: rgb(18 25 36 / 68%); }
.word-addin-dialog-inner { padding: 30px 32px 32px; }
.word-addin-dialog h2 {
  max-width: 420px;
  margin: 8px 0 14px;
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 1;
}
.word-addin-dialog p,
.word-addin-dialog li { font-size: 0.91rem; line-height: 1.55; }
.word-addin-dialog ol { margin: 18px 0 24px; padding-left: 20px; }
.word-addin-dialog li + li { margin-top: 6px; }
.word-addin-close {
  float: right;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--on-paper-2);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.word-addin-download { display: inline-flex; width: auto; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .tally[data-cells="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .report-acts { width: 100%; }
  .modes { flex: 1; }
  .mode { flex: 1; justify-content: center; }
}
@media (max-width: 620px) {
  .tally[data-cells="4"] { grid-template-columns: 1fr; }
  .dock-sep { display: none; }
  .word-addin-dialog-inner { padding: 24px; }
}