/* JVNW Research prototype — Puget blue & paper, light-first, both themes.
   The accent moved from spruce to the Salish-sea blue of the public site on
   2026-08-26 so the two surfaces read as one product; the light tokens below
   are byte-identical to marketing/site/styles.css and
   prototype/tests/test_theme_tokens.py holds them there.  Dark mode has no
   public counterpart, so its neutrals move from green-tinted to cool slate to
   sit under the same blue.  See DESIGN.md for the decision. */

:root {
  --paper: #f6f4ee;
  --sheet: #fdfdfb;
  --ink: #1e2823;
  --ink-soft: #55635b;
  --ink-faint: #5d6a62;
  --line: #dcdfd8;
  --line-soft: #e7e9e2;
  --accent: #306d9f;
  --accent-ink: #274e75;
  --accent-soft: #e2ecf4;
  --mark: #cfe2f2;
  --money: #7c5c1e;
  --defense: #6a7076;
  --danger: #8a3b2e;
  --shadow: 0 1px 2px rgba(30, 40, 35, .05), 0 8px 28px rgba(30, 40, 35, .07);
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12181b; --sheet: #1a2226; --ink: #e6eaee; --ink-soft: #a6b1bb;
    --ink-faint: #7f8b97; --line: #2c363d; --line-soft: #222b31;
    --accent: #6fb2e0; --accent-ink: #9ccdf0; --accent-soft: #1d3547;
    --mark: #24405a; --money: #d3a84c; --defense: #929aa1;
    --danger: #d98576; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --paper: #12181b; --sheet: #1a2226; --ink: #e6eaee; --ink-soft: #a6b1bb;
  --ink-faint: #7f8b97; --line: #2c363d; --line-soft: #222b31;
  --accent: #6fb2e0; --accent-ink: #9ccdf0; --accent-soft: #1d3547;
  --mark: #24405a; --money: #d3a84c; --defense: #929aa1;
  --danger: #d98576; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  --paper: #f6f4ee; --sheet: #fdfdfb; --ink: #1e2823; --ink-soft: #55635b;
  --ink-faint: #5d6a62; --line: #dcdfd8; --line-soft: #e7e9e2;
  --accent: #306d9f; --accent-ink: #274e75; --accent-soft: #e2ecf4;
  --mark: #cfe2f2; --money: #7c5c1e; --defense: #6a7076;
  --danger: #8a3b2e; --shadow: 0 1px 2px rgba(30,40,35,.05), 0 8px 28px rgba(30,40,35,.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html {
  background: var(--paper);
  /* Tall (results) and short (pricing) routes must not shift the centered
     column when the scrollbar appears/disappears.  If a browser ever lacks
     scrollbar-gutter, swap this line for `overflow-y: scroll;`. */
  scrollbar-gutter: stable;
}
body {
  font: 15.5px/1.55 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
/* Titles, case names, and amounts: the UI sans in a heavier cut with tighter
   tracking, the same as the public site. It replaced the Palatino display
   serif on 2026-09-12; the class name stayed so no markup had to change. */
.serif {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-weight: 650; letter-spacing: -.012em;
}
.num { font-variant-numeric: tabular-nums; }
a { color: var(--accent-ink); }
button { font: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
::selection { background: var(--mark); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.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;
}
mark {
  background: var(--mark);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 var(--accent);
}

.wordmark {
  font-size: 11.5px; letter-spacing: .22em; font-weight: 650;
  color: var(--accent-ink); text-transform: uppercase;
}
.bootstrap-state {
  width: min(402px, 100%); margin: 14vh auto 0; text-align: center;
  color: var(--ink-soft);
}
.bootstrap-state p { margin: 12px 0 18px; }
.bootstrap-state .btn { display: inline-flex; }

/* ---------- shell ---------- */
.shell-header-group {
  position: sticky; top: 0; z-index: 20;
}
.topbar {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in {
  max-width: 1104px; min-height: 68px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 10px;
}
/* The brand is the JVNW lockup itself (master in design/logo/, exported
   from the logo Figma).  The app ships both themes, so dark swaps the
   artwork — ink and mark are recoloured to the dark palette — rather
   than filtering the light one. */
.topbar .name { display: inline-flex; align-items: center; align-self: center; }
.brandmark {
  display: block; height: 30px; aspect-ratio: 732 / 103;
  background: url("/assets/logo-jvnw.svg") no-repeat center / contain;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brandmark {
    background-image: url("/assets/logo-jvnw-dark.svg");
  }
}
:root[data-theme="dark"] .brandmark {
  background-image: url("/assets/logo-jvnw-dark.svg");
}
.tag {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 3px 8px; border-radius: 999px; font-weight: 650;
}
.topbar .name { text-decoration: none; color: inherit; }
.topbar .spacer { flex: 1; }
/* Center the Portal areas independently of the unequal brand/account widths.
   A separate row preserves room for member allowances and narrow screens. */
.topbar-in:has(.topnav) { position: relative; flex-wrap: wrap; }
.topnav {
  display: flex; order: 1; flex-basis: 100%; justify-content: center;
  gap: 24px; align-items: center; margin: 0;
}
.topnav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600;
  padding: 6px 0; border-bottom: 2px solid transparent;
  line-height: 1.2; white-space: nowrap;
}
.topnav a:hover { color: var(--accent-ink); border-bottom-color: var(--line); }
.topnav a[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.topnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 1104px) {
  .topbar-in:has(.top-usage[hidden]) .topnav {
    position: absolute; left: 50%; transform: translateX(-50%); flex-basis: auto;
  }
}
.topbar .est { color: var(--ink-faint); font-size: 12px; }

.wrap {
  width: 100%; min-width: 0; max-width: 1104px;
  margin: 0 auto; padding: 30px 24px 90px;
}

/* ---------- search head ---------- */
.modes { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--sheet); margin-bottom: 14px; }
.modes button {
  border: 0; background: transparent; color: var(--ink-soft);
  padding: 6px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 550;
}
.modes button.on { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .modes button.on, .dark .modes button.on { color: #0c1c28; }

.searchrow { display: flex; gap: 10px; }
.searchbox { position: relative; flex: 1; }
.searchbox textarea {
  /* Width leaves a dedicated strip for .go on the right, outside the
     textarea's own box — so its native vertical scrollbar (which always
     hugs the textarea's own border) never renders underneath the button. */
  display: block; width: calc(100% - 54px); padding: 15px 18px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--sheet); font-size: 16.5px; box-shadow: var(--shadow);
  font-family: inherit; color: var(--ink); line-height: 1.45;
  /* overflow-y starts hidden; autosizeQuestion() switches it to auto only
     once content passes the 15-line cap.  A reserved gutter
     (scrollbar-gutter: stable) is deliberately NOT used: with macOS
     "always show scroll bars" it paints a permanent empty track even for
     a single line of text. */
  resize: none; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  /* 15 lines of this font-size/line-height, plus the vertical padding and
     border, before the scrollbar takes over (was a flat 320px cap). */
  max-height: calc(15 * 1.45em + 33px);
}
.searchbox textarea:focus { border-color: var(--accent); }
.searchbox .go {
  position: absolute; right: 8px; top: 8px;
  border: 0; background: var(--accent); color: #fff;
  width: 38px; height: 38px; border-radius: 8px; font-size: 17px;
  display: grid; place-items: center;
}
.searchbox .go.stop {
  background: var(--danger); font-size: 22px; line-height: 1;
}
.ask-counter {
  color: var(--ink-faint); font-size: 12px; margin: 0;
  font-variant-numeric: tabular-nums; grid-column: 2;
  justify-self: end; text-align: right; max-width: 330px;
}
.ask-counter.over { color: var(--danger); }
.ask-counter.over strong { font-weight: 700; }
.ask-status-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 7px 14px;
  margin: 8px 54px 0 2px; min-height: 25px;
}
.search-clear {
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--sheet); color: var(--accent-ink);
  padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 650;
  cursor: pointer;
}
.search-clear:hover { border-color: var(--accent); background: var(--accent-soft); }
.search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hint { color: var(--ink-faint); font-size: 12.5px; margin: 8px 2px 0; }
.hint code { background: var(--line-soft); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.amount-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px;
  margin: 0; min-width: 0; color: var(--ink-faint); font-size: 11.5px;
}
.amount-filters > label {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.amount-input {
  display: inline-flex; align-items: center; gap: 3px; color: var(--ink-faint);
}
.amount-input .amt {
  width: 76px; min-width: 0; border: 1px solid var(--line);
  border-radius: 5px; background: var(--paper); color: var(--ink);
  padding: 4px 6px; font: inherit; font-size: 12px;
}
.amount-input .amt:focus-visible {
  border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px;
}

@media (max-width: 640px) {
  .ask-status-row { grid-template-columns: minmax(0, 1fr); }
  .ask-counter { grid-column: 1; justify-self: end; }
}

.advanced-panel {
  margin-top: 12px; border: 1px solid var(--line-soft);
  border-radius: var(--radius); background: var(--sheet); padding: 0 14px;
}
.advanced-panel summary {
  cursor: pointer; padding: 10px 0; color: var(--accent-ink);
  font-size: 12.5px; font-weight: 650;
}
.advanced-hint { margin: 0; padding: 0 0 10px; }
.advanced-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px;
  padding: 4px 0 12px;
}
.advanced-form label {
  display: grid; gap: 5px; color: var(--ink-soft); font-size: 12px;
}
.advanced-form input {
  min-width: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); padding: 8px 9px; color: var(--ink); font-size: 13px;
}
.advanced-form input:focus { border-color: var(--accent); }
.advanced-actions {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
}
.advanced-actions .btn { padding: 7px 12px; font-size: 12.5px; }
.advanced-actions .err { color: var(--defense); font-size: 12px; }
.operator-guide {
  display: grid; grid-template-columns: max-content 1fr max-content 1fr;
  gap: 5px 9px; border-top: 1px solid var(--line-soft); padding: 12px 0 8px;
  color: var(--ink-soft); font-size: 11.5px;
}
.operator-guide code {
  color: var(--accent-ink); background: var(--line-soft); border-radius: 4px;
  padding: 1px 5px; text-align: center;
}
.advanced-note {
  color: var(--ink-faint); font-size: 11.5px; margin: 2px 0 12px;
}

.member-safe-note {
  margin: 9px 0 0; color: var(--ink-faint); font-size: 12.5px;
}
.statechips { display: inline-flex; gap: 6px; }
.statechips button {
  border: 1px solid var(--line); background: var(--sheet); color: var(--ink-soft);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600;
}
.statechips button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* compiled panel (ask mode) */
.compiled {
  margin-top: 16px; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  background: var(--sheet); padding: 13px 16px; font-size: 13.5px;
}
/* One band of chrome above the results, not two: the summary sentence, the
   synonym chips that used to sit in their own notice below, and the exact-
   terms escape hatch all share this row. The chips get the elastic middle
   column so they are what gives way first when the row runs out of width
   (fitSynonymNotice collapses the overflow into a "+n" button), while the
   two fixed ends stay legible at every viewport. */
.compiled-summary-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  min-width: 0;
}
.compiled-summary {
  appearance: none; width: 100%; border: 0; padding: 0; background: transparent;
  color: var(--accent-ink); font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-align: left; cursor: pointer;
}
.compiled-summary-row .compiled-summary {
  width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
}
.compiled-summary::after { content: "Show"; float: right; color: var(--ink-faint); font-weight: 600; }
.compiled-summary[aria-expanded="true"]::after { content: "Hide"; }
/* In the shared row the words would land mid-sentence, between the summary
   and the chips that continue it — a chevron says the same thing in the
   width of one character and keeps the row's right edge for the toggle. */
.compiled-summary-row .compiled-summary::after {
  content: "▸"; float: none; font-size: 11px; line-height: 1;
  transition: transform .12s ease;
}
.compiled-summary-row .compiled-summary[aria-expanded="true"]::after {
  content: "▸"; transform: rotate(90deg);
}
.compiled-detail { margin-top: 10px; }
.compiled .lbl {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 700; margin-bottom: 6px;
}
.compiled .q {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; background: var(--line-soft);
  padding: 6px 9px; border-radius: 6px; display: inline-block; margin: 2px 0 6px;
}
.compiled .why { color: var(--ink-soft); }
.compiled .chips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.compiled .ladder { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 9px; }
.compiled .ladder-lbl { color: var(--ink-soft); font-size: 12px; margin-bottom: 6px; }
.compiled .ladder-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 5px; counter-reset: rung;
}
.compiled .ladder-run {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  width: 100%; text-align: left; border: 1px solid var(--line-soft);
  border-radius: 8px; background: var(--paper); padding: 6px 10px;
  font-size: 12.5px; color: var(--ink-soft); cursor: pointer;
}
.compiled .ladder-run:hover:not(:disabled) { border-color: var(--accent); }
.compiled .ladder-run:disabled { cursor: default; opacity: .65; }
.compiled .ladder-run code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: var(--ink); white-space: normal; overflow-wrap: anywhere;
}
.compiled .ladder-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.compiled .ladder-count.zero { color: var(--ink-faint); }
.compiled .ladder-count.estimate {
  font-style: italic; color: var(--ink-soft);
  text-decoration: underline dotted var(--ink-faint); text-underline-offset: 2px;
}
.compiled .ladder-rung.selected .ladder-run {
  border-color: var(--accent); background: var(--accent-soft);
}
.compiled .ladder-selected {
  color: var(--accent-ink); font-weight: 650; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.chip {
  font-size: 12px; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; color: var(--ink-soft); background: var(--paper);
}

.synonym-notice {
  margin-top: 14px; padding: 9px 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 7px 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--accent-soft);
  color: var(--ink-soft); font-size: 12.5px;
}
.synonym-notice[hidden] { display: none; }
.synonym-notice.off { background: var(--sheet); border-left-color: var(--line); }
/* The same control, hosted inside the compiled accordion's summary row: it
   drops the card chrome (the row already has the card's border and tint) and
   keeps only the three-column grid, so the chips still elide gracefully and
   "Use exact terms only" still sits on the row's right edge. */
.synonym-notice.inline {
  margin-top: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; flex: 1 1 auto; min-width: 0;
  /* Flex rather than the standalone notice's fixed grid: the summary button
     shares this line, so on a narrow viewport the parts have to be able to
     fall to a second line instead of pushing the row off-screen. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
}
.synonym-notice.inline.off { background: transparent; }
.synonym-sep { color: var(--ink-faint); font-weight: 600; }
.synonym-notice.inline .synonym-chip-viewport { flex: 1 1 auto; }
/* Always the row's right edge, whichever line it ends up on. */
.synonym-notice.inline .synonym-toggle { margin-left: auto; }
.synonym-label {
  color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.synonym-notice.off .synonym-label { color: var(--ink-faint); }
.synonym-chip-viewport { min-width: 0; overflow: hidden; }
.synonym-notice .chips {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden;
}
.synonym-fit-item { flex: 0 0 auto; white-space: nowrap; }
.synonym-notice.expanded { align-items: start; }
.synonym-notice.expanded .synonym-chip-viewport,
.synonym-notice.expanded .chips { overflow: visible; }
.synonym-notice.expanded .chips { flex-wrap: wrap; }
.synonym-chip { background: var(--sheet); color: var(--accent-ink); }
.synonym-notice.off .synonym-chip { color: var(--ink-faint); }
.synonym-dismiss, .synonym-restore {
  cursor: pointer; font: inherit;
}
.synonym-restore { color: var(--ink-soft); border-style: dashed; }
.synonym-excluded-label { color: var(--ink-faint); font-size: 11px; }
.synonym-rerun {
  border: 0; border-bottom: 1px solid currentColor; background: transparent;
  color: var(--accent-ink); padding: 2px 0; font-size: 12px; font-weight: 650;
}
.synonym-more {
  flex: 0 0 auto; border: 0; border-bottom: 1px solid currentColor;
  background: transparent; color: var(--accent-ink); padding: 2px 0;
  font-size: 12px; font-weight: 650; white-space: nowrap;
}
.synonym-toggle {
  border: 0; border-bottom: 1px solid currentColor; white-space: nowrap;
  background: transparent; color: var(--accent-ink); padding: 2px 0;
  font-size: 12px; font-weight: 650;
}

/* ---------- results ---------- */
.results-layout {
  display: grid;
  grid-template-columns: var(--facet-column-width, 214px) minmax(0, 1fr);
  gap: 22px;
  align-items: start; margin-top: 24px;
}
.results-clear-row { display: flex; justify-content: center; margin: 0 0 12px; }
.results-layout.admin-jurisdiction-scope { --facet-column-width: 252px; }
.results-layout.assistant-resting-layout {
  grid-template-columns: minmax(0, 1fr);
}
/* Deep Search's progress takeover collapses the facet track the same way
   the resting empty state does: a display:none facet panel stops being a
   grid item, so without this the results pane auto-places into the 214px
   first column. */
.results-layout.deep-progress-layout {
  grid-template-columns: minmax(0, 1fr);
}
.results-layout[hidden], .facets-panel[hidden] { display: none; }
.results-pane { min-width: 0; }
.facets-panel {
  background: var(--sheet); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 15px 14px; box-shadow: var(--shadow);
}
.mobile-filter-toggle, .facets-panel .mobile-filter-close { display: none; }
.facet-section + .facet-section {
  border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 15px;
}
.facet-heading { display: flex; align-items: baseline; gap: 8px; }
.facet-title {
  color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px;
}
.facet-heading .facet-title { flex: 1; }
.facet-action {
  border: 0; border-bottom: 1px solid currentColor; padding: 0;
  background: transparent; color: var(--accent-ink); font-size: 11.5px;
  white-space: nowrap;
}
.facet-options { display: grid; gap: 2px; }
.date-facet-options, .county-facet-options,
.admin-jurisdiction-scope #stateFacets {
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable;
  /* Branded, subdued scrollbar — melds with both themes (Teppy: the default
     chrome scrollbar read as off-brand against the dark green). */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.admin-jurisdiction-scope #stateFacets { max-height: 360px; }
.date-facet-options::-webkit-scrollbar, .county-facet-options::-webkit-scrollbar,
.admin-jurisdiction-scope #stateFacets::-webkit-scrollbar { width: 8px; }
.date-facet-options::-webkit-scrollbar-track, .county-facet-options::-webkit-scrollbar-track,
.admin-jurisdiction-scope #stateFacets::-webkit-scrollbar-track { background: transparent; }
.date-facet-options::-webkit-scrollbar-thumb, .county-facet-options::-webkit-scrollbar-thumb,
.admin-jurisdiction-scope #stateFacets::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.date-facet-options::-webkit-scrollbar-thumb:hover, .county-facet-options::-webkit-scrollbar-thumb:hover,
.admin-jurisdiction-scope #stateFacets::-webkit-scrollbar-thumb:hover {
  background-color: var(--ink-faint); background-clip: content-box;
}
.facet-option {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center; gap: 7px; min-height: 29px; padding: 3px 4px;
  border-radius: 5px; color: var(--ink-soft); font-size: 12.5px;
}
.facet-option:hover { background: var(--paper); color: var(--ink); }
.facet-option.selected { color: var(--ink); background: var(--accent-soft); }
.facet-option input {
  width: 14px; height: 14px; margin: 0; accent-color: var(--accent);
}
.age-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.age-range label { color: var(--ink-soft); font-size: 11.5px; }
.age-range input {
  width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--paper); color: var(--ink);
}
.compiled-filter-remove { cursor: pointer; font: inherit; }
.facet-option:has(input:disabled) { color: var(--ink-faint); cursor: default; }
.facet-label {
  display: flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: wrap;
}
.facet-label-text { min-width: 0; }
.facet-admin-chip {
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  padding: 1px 5px; font-size: 8.5px; font-weight: 750;
  letter-spacing: .08em; line-height: 1.35; text-transform: uppercase;
}
.facet-count { color: var(--ink-faint); font-size: 11.5px; }
.facet-option.selected .facet-count { color: var(--accent-ink); }
.facet-note {
  border-top: 1px solid var(--line-soft); margin-top: 8px; padding: 8px 4px 0;
  color: var(--ink-faint); font-size: 11.5px;
}
.facet-note[hidden] { display: none; }
.results-toolbar {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px;
}
.results-head {
  display: flex; align-items: baseline; gap: 12px;
  flex: 1; flex-wrap: wrap; margin: 0; color: var(--ink-soft); font-size: 13.5px;
}
.results-head b { color: var(--ink); font-size: 15px; font-weight: 650; }
.results-sort-control {
  position: relative; flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; margin-top: -7px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--sheet); color: var(--accent-ink);
  box-shadow: var(--shadow); cursor: pointer;
}
.results-sort-control:hover { border-color: var(--accent); background: var(--accent-soft); }
.results-sort-control:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.results-sort-control svg { pointer-events: none; }
.results-sort-control select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  cursor: pointer; appearance: none;
}

.card {
  background: var(--sheet); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px 14px; margin-bottom: 12px;
  display: block; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent); }
.card .row1 { display: flex; align-items: baseline; gap: 14px; }
.card h3 { margin: 0; font-size: 18.5px; font-weight: 650; flex: 1; }
.badge { text-align: right; white-space: nowrap; }
.badge .amt { font-size: 18px; }
.badge .kind {
  display: block; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; margin-top: 1px;
}
.badge.win .amt { color: var(--money); }
.badge.win .kind { color: var(--accent-ink); }
.badge.zero .amt, .badge.zero .kind { color: var(--defense); }
.badge.unknown .amt, .badge.unknown .kind { color: var(--ink-faint); }
.card .meta { color: var(--ink-soft); font-size: 13px; margin: 4px 0 8px; }
.card .courtline { color: var(--ink); margin-bottom: 1px; }
.card .meta .syn { color: var(--ink-faint); font-style: italic; }
.card .snippet { font-size: 14px; color: var(--ink); max-width: 74ch; }
.card .fact-excerpt {
  max-width: 74ch; margin-top: 8px; color: var(--ink-soft); font-size: 12.5px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.card .fact-excerpt > span {
  color: var(--accent-ink); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-right: 7px;
}
.card .chips { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.card .chips .chip-narrative {
  max-width: 100%; padding: 7px 12px; border-radius: 8px;
  line-height: 1.45; white-space: normal;
}
.card .published {
  border-top: 1px solid var(--line-soft); margin-top: 11px; padding-top: 8px;
  color: var(--ink-faint); font-size: 11.5px;
}

.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 10px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.pager[hidden] { display: none; }
.pager-button {
  width: max-content; border: 1px solid var(--line); border-radius: 7px;
  background: var(--sheet); color: var(--accent-ink); padding: 6px 11px;
  font-size: 12.5px; font-weight: 650;
}
.pager-button.prev { margin-right: auto; }
.pager-button.next { margin-left: auto; }
.pager-button:disabled { color: var(--ink-faint); cursor: default; opacity: .6; }
.pager-pages {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 4px;
}
.pager-num {
  min-width: 31px; padding: 5px 7px; border: 1px solid transparent;
  border-radius: 7px; background: transparent; color: var(--ink-soft);
  font-size: 12.5px; font-weight: 600; text-align: center;
}
.pager-num:hover { border-color: var(--line); background: var(--sheet); color: var(--accent-ink); }
.pager-num[aria-current="page"] {
  background: var(--accent); border-color: var(--accent);
  color: #fff; cursor: default;
}
:root[data-theme="dark"] .pager-num[aria-current="page"],
.dark .pager-num[aria-current="page"] { color: #0c1c28; }
.pager-gap { color: var(--ink-faint); font-size: 12.5px; padding: 0 2px; }

.empty, .loading {
  text-align: center; color: var(--ink-soft); padding: 56px 20px;
  border: 1px dashed var(--line); border-radius: var(--radius); margin-top: 24px;
}
.empty .serif { font-size: 21px; display: block; margin-bottom: 6px; color: var(--ink); }

.skeleton { border-radius: var(--radius); background: var(--sheet); border: 1px solid var(--line-soft); padding: 18px; margin-bottom: 12px; }
.skeleton i {
  display: block; height: 11px; border-radius: 6px; background: var(--line-soft);
  margin-bottom: 9px;
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton i { animation: pulse 1.1s ease-in-out infinite alternate; }
  @keyframes pulse { to { opacity: .45; } }
}

/* ---------- case view ---------- */
.backlink { display: inline-block; margin-bottom: 16px; font-size: 13.5px; color: var(--accent-ink); text-decoration: none; }
.report {
  background: var(--sheet); border: 1px solid var(--line-soft);
  border-radius: 10px; box-shadow: var(--shadow);
  max-width: 780px; margin: 0 auto; padding: 40px 46px 34px;
}
.report .publine {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 700;
  display: flex; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  border-bottom: 3px double var(--line); padding-bottom: 10px; margin-bottom: 20px;
}
.case-published {
  display: inline-flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
}
.case-report-button {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: 6px; background: var(--sheet);
  color: var(--ink-soft); cursor: pointer;
}
.case-report-button svg { width: 15px; height: 15px; }
.case-report-button:hover, .case-report-button:focus-visible {
  border-color: var(--accent); color: var(--accent-ink);
}
.report h1 { font-size: 27px; font-weight: 650; margin: 0 0 4px; line-height: 1.2; }
.report .sub { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 20px; }
.resultband {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--accent-soft); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 22px;
}
.resultband .amt { font-size: 27px; color: var(--money); }
.resultband.zero .amt { color: var(--defense); }
.resultband .kind { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); }
.resultband.zero .kind { color: var(--defense); }
.resultband.unknown .amt, .resultband.unknown .kind { color: var(--ink-faint); }

.factgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 22px; margin-bottom: 6px;
}
.case-factgrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.case-fact-column {
  display: grid; align-content: start; gap: 12px;
  width: max-content; max-width: 100%; min-width: 0;
}
.case-fact-column-1 { justify-self: start; }
.case-fact-column-2 { justify-self: center; }
.case-fact-column-3 { justify-self: end; }
.case-fact-column .fact, .case-fact-column .v {
  min-width: 0; overflow-wrap: anywhere;
}
.fact .k { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.fact .v { font-size: 14.5px; }

.rsec { margin-top: 22px; }
.rsec > .k {
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 700;
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.rsec > .k::after { content: ""; flex: 1; border-top: 1px solid var(--line-soft); }
.rsec .body { font-size: 15px; }
.rsec .body p { margin: 0 0 10px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.report-text .source-note { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; }
.report-text p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; }
.report-page-mark {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 10px;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.report-page-mark::after { content: ""; flex: 1; border-top: 1px solid var(--line-soft); }
.report-page-mark:first-child { margin-top: 0; }
.extracted-note {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
}
.plist { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.plist li { margin-bottom: 3px; }
.plist .who, .plist.who { color: var(--ink-faint); font-size: 12px; }
.rsec .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rsec .chips.injury-narrative .chip {
  max-width: 100%; padding: 7px 12px; border-radius: 8px;
  line-height: 1.45; white-space: normal;
}
.rsec .chips.cats { margin-top: 8px; }
.rsec .chips.cats .chip { color: var(--ink-faint); }

.report .actions { margin-top: 28px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.member-safe-report .factgrid { margin-top: 20px; }
.case-preview { margin: 22px 0; }
.case-preview h2 {
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 700; margin: 0 0 8px;
}
.case-preview p { margin: 0 0 10px; line-height: 1.65; overflow-wrap: anywhere; }
.case-preview .case-preview-note { color: var(--ink-soft); font-size: 13px; }
.member-safe-download-note {
  border-top: 1px solid var(--line-soft); padding-top: 16px;
}
.case-reveal {
  border-top: 1px solid var(--line-soft); padding-top: 16px;
  align-items: baseline;
}
.case-reveal .case-reveal-note {
  flex-basis: 100%; margin: 0 0 4px; color: var(--ink-soft);
}
.case-reveal .btn { flex: 0 0 auto; }
.card .revealed-chip {
  border-color: var(--accent); color: var(--accent-ink);
}
.btn {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
  text-decoration: none; display: inline-block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.ghost):not(.danger) {
    color: #0c1c28;
  }
}
:root[data-theme="dark"] .btn:not(.ghost):not(.danger) { color: #0c1c28; }
.btn.ghost { background: transparent; color: var(--accent-ink); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- approval-first source uploads ---------- */
.upload-shell { max-width: 820px; }
.upload-shell > h1 {
  font-size: 30px; font-weight: 650; margin: 6px 0 4px;
}
.upload-intro {
  margin: 0 0 20px; color: var(--ink-soft);
  font-size: 14px; line-height: 1.55;
}
.submission-paths {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 0 0 22px;
}
.submission-path-card {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--sheet); box-shadow: var(--shadow); padding: 18px;
}
.submission-path-card > span {
  color: var(--accent-ink); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.submission-path-card h2 {
  margin: 7px 0 5px; font-size: 20px; font-weight: 650;
}
.submission-path-card p {
  margin: 0 0 16px; color: var(--ink-soft); font-size: 13px;
  line-height: 1.5;
}
.submission-path-card > div {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: auto;
}
.submission-path-card > div > a:not(.btn),
.case-submission-back,
.case-submission-actions > a,
.case-submission-status > a {
  color: var(--accent-ink); font-size: 13px; text-underline-offset: 3px;
}

/* The signed-in reporting forms share the approved paper-and-ink language,
   but use a little more width so long legal labels remain easy to scan. */
.case-submission-shell { max-width: 940px; margin: 0 auto; }
.case-submission-back { display: inline-block; margin-bottom: 18px; }
.case-submission-heading {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin: 6px 0 22px;
}
.case-submission-heading h1 {
  margin: 0 0 6px; font-size: 30px; font-weight: 650;
}
.case-submission-heading p {
  max-width: 64ch; margin: 0; color: var(--ink-soft); font-size: 14px;
  line-height: 1.55;
}
.case-submission-heading > .btn { flex: 0 0 auto; white-space: nowrap; }
.case-submission-form {
  position: relative; background: var(--sheet); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 24px 24px;
}
.case-submission-form[hidden] { display: none; }
.case-submission-section {
  min-width: 0; margin: 0; padding: 24px 0; border: 0;
  border-bottom: 1px solid var(--line-soft);
}
.case-submission-section > legend {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 24px 0 0;
  color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: 19px; font-weight: 650;
}
.case-submission-section > legend > span {
  color: var(--accent-ink); font-family: inherit; font-size: 11px;
  font-weight: 700; letter-spacing: .08em;
}
.case-submission-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px; margin-top: 18px;
}
.case-submission-field {
  display: grid; align-self: start; min-width: 0; gap: 6px; margin: 0;
  color: var(--ink-soft); font-size: 12px; text-align: left;
}
.case-submission-wide { grid-column: 1 / -1; }
.case-submission-field input:not([type="checkbox"]),
.case-submission-field select,
.case-submission-field textarea {
  box-sizing: border-box; min-width: 0; width: 100%;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  padding: 9px 10px; color: var(--ink); font: inherit; font-size: 14px;
  line-height: 1.4;
}
.case-submission-field textarea { min-height: 96px; resize: vertical; }
.case-submission-field input:focus,
.case-submission-field select:focus,
.case-submission-field textarea:focus {
  border-color: var(--accent); outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.case-submission-field input[aria-invalid="true"],
.case-submission-field select[aria-invalid="true"],
.case-submission-field textarea[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--danger) 78%, var(--line));
}
.case-submission-field-error {
  min-height: 18px; margin: -2px 0 0; color: var(--danger);
  font-size: 12px; line-height: 1.35;
}
.case-submission-field-error:empty { visibility: hidden; }
.case-submission-options { padding: 0; border: 0; }
.case-submission-options > legend { padding: 0; }
.case-submission-checks {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px 20px;
  min-height: 39px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); padding: 7px 10px;
}
.case-submission-checks label {
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink);
  cursor: pointer; font-size: 13px;
}
.case-submission-checks input { accent-color: var(--accent); }
.case-submission-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-top: 22px;
}
.upload-section-title {
  margin: 28px 0 10px; color: var(--ink); font-size: 24px; font-weight: 650;
}
.case-submission-status {
  border: 1px solid var(--line); border-left: 3px solid var(--danger);
  border-radius: var(--radius); background: var(--sheet); padding: 15px 17px;
  margin-bottom: 20px;
}
.case-submission-status[hidden] { display: none; }
.case-submission-status.success {
  border-left-color: var(--accent); background: var(--accent-soft);
}
.case-submission-status.rate-limit {
  border-left-color: var(--defense);
  background: color-mix(in srgb, var(--defense) 11%, var(--sheet));
}
.case-submission-status strong { display: block; font-size: 14px; }
.case-submission-status p {
  margin: 4px 0 8px; color: var(--ink-soft); font-size: 13px;
  line-height: 1.45;
}
.flag {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--accent-soft);
  padding: 11px 15px; margin-bottom: 20px; font-size: 13px;
  color: var(--ink-soft);
}
.flag.ok { border-left-color: var(--accent); }
.flag.stone {
  background: color-mix(in srgb, var(--defense) 12%, var(--sheet));
  border-left-color: var(--defense);
}
.pill {
  display: inline-block; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap;
}
.pill.ok { color: var(--accent-ink); background: var(--accent-soft); }
.pill.warn {
  color: var(--defense);
  background: color-mix(in srgb, var(--defense) 15%, var(--sheet));
}
.pill.wait { color: var(--ink-faint); background: var(--line-soft); }
.pill.bad {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 13%, var(--sheet));
}
.pill.stone { color: var(--ink-soft); background: var(--line-soft); }
.upload-form, .upload-receipts {
  background: var(--sheet); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin: 0 0 22px;
}
.upload-form[hidden] { display: none; }
.upload-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.upload-field, .upload-grid label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 12px; }
/* Every cell sits at the top of its row at its natural height. Without this
   a grid item stretches to the tallest cell in the row and, because its own
   auto rows then absorb the slack, its control grows taller and drifts down
   — so a field carrying help text (Publication, Issue period) knocked the
   plain field beside it out of alignment. */
.upload-grid > * { align-self: start; }
.upload-grid input, .upload-grid select {
  min-width: 0; width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); padding: 9px 10px; color: var(--ink);
  font-size: 14px; line-height: 1.35;
}
.upload-grid input:focus, .upload-grid select:focus { border-color: var(--accent); }
.upload-grid input[aria-invalid="true"], .upload-grid select[aria-invalid="true"] { border-color: var(--danger); }
/* A number spinner reads as a scroll affordance on a one-line page number;
   these inputs are plain text boxes with a numeric keypad hint instead. */
.upload-grid input[type="number"]::-webkit-outer-spin-button,
.upload-grid input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.upload-grid input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.upload-grid small { color: var(--ink-faint); line-height: 1.4; }
.required-mark { color: var(--danger); font-size: 1em; }
.required-mark[hidden] { display: none; }
.upload-wide { grid-column: 1 / -1; }
/* The native "Choose File" control is the one browser-default chrome left in
   these forms; give it the ghost-button treatment so the picker belongs to
   the page. Shared by the member and guest forms. */
.upload-file input[type="file"] {
  max-width: 100%; padding: 7px 10px; font-size: 13px;
  color: var(--ink-soft); cursor: pointer;
}
.upload-file input[type="file"]::file-selector-button {
  margin-right: 12px; border: 1px solid var(--accent);
  border-radius: 999px; background: transparent; color: var(--accent-ink);
  padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.upload-file input[type="file"]:hover::file-selector-button,
.upload-file input[type="file"]:focus::file-selector-button {
  background: var(--accent-soft);
}
.upload-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
}
.upload-actions .err { color: var(--danger); font-size: 12.5px; }
.upload-batch { display: grid; gap: 7px; margin-top: 16px; }
.upload-batch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 9px 12px; background: var(--paper); font-size: 13px;
}
.upload-batch-row > span:first-child { display: grid; min-width: 0; }
.upload-batch-row strong { overflow-wrap: anywhere; }
.upload-batch-row small { display: block; color: var(--ink-faint); }
.upload-batch-error { color: var(--danger); text-align: right; max-width: 55%; font-size: 12.5px; }
.upload-spinner::after { content: "…"; }
.section-head h2 { margin: 0 0 12px; font-size: 20px; font-weight: 650; }
.upload-receipt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.upload-receipt > div { min-width: 0; }
.upload-receipt:last-child { border-bottom: 0; }
.upload-receipt h3 {
  font-size: 17px; font-weight: 650; margin: 6px 0 0;
  overflow-wrap: anywhere;
}
.upload-receipt p, .upload-receipt-meta {
  color: var(--ink-soft); font-size: 12.5px; margin: 1px 0 0;
}
.upload-receipt .upload-decline-reason {
  color: var(--danger); margin-top: 6px;
}
.upload-receipt-meta { white-space: nowrap; text-align: right; }
@media (max-width: 640px) {
  .submission-paths, .case-submission-grid { grid-template-columns: 1fr; }
  .case-submission-wide { grid-column: auto; }
  .case-submission-heading { display: grid; gap: 14px; }
  .case-submission-heading > .btn { justify-self: start; }
  .case-submission-form { padding: 0 16px 18px; }
  .case-submission-section { padding: 19px 0; }
  .case-submission-section > legend { padding-top: 19px; }
  .upload-grid { grid-template-columns: 1fr; }
  .upload-wide { grid-column: auto; }
  .upload-form, .upload-receipts { padding: 16px; }
  .upload-receipt { align-items: flex-start; flex-direction: column; gap: 5px; }
  .upload-receipt-meta { text-align: left; white-space: normal; }
  .upload-batch-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .upload-batch-error { text-align: left; max-width: 100%; }
}
.synnote { color: var(--ink-faint); font-size: 12.5px; font-style: italic; }

/* ---------- approved catalog and payment status (existing tokens) ---------- */
.pricing-head { text-align: center; margin: 6px 0 22px; }
.pricing-head .wordmark { display: block; margin-bottom: 6px; }
.pricing-head h1 { font-size: 30px; font-weight: 650; margin: 0 0 6px; }
.pricing-head p {
  color: var(--ink-soft); font-size: 14px; max-width: 56ch; margin: 0 auto;
}
.pricing-meta {
  color: var(--ink-faint); font-size: 11.5px; margin-top: 9px;
}
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px; align-items: stretch;
}
.pricing-grid .card { margin-bottom: 0; }
.pricing-tier { display: flex; flex-direction: column; }
.pricing-tier h3 { margin: 0 0 6px; font-size: 21px; font-weight: 650; }
.pricing-tier > p { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 12px; }
.price { font-size: 25px; color: var(--money); }
.price small { color: var(--ink-faint); font-size: 12px; font-weight: 400; }
.pricing-feats { margin: 14px 0 18px; }
.pricing-actions {
  display: grid; gap: 7px; margin-top: auto;
}
.pricing-tier .btn { text-align: center; }
.pricing-tier .btn:disabled { opacity: .55; cursor: not-allowed; }
.pricing-note {
  text-align: center; color: var(--ink-faint); font-size: 12px;
  margin: 22px auto 0; max-width: 62ch;
}
#checkoutStatus, #pricingUnavailable { margin-top: 20px; }
.payment-error { border-left-color: var(--danger); }
.payment-error .lbl { color: var(--danger); }
.payment-page { max-width: 720px; margin: 5px auto 0; }
.payment-page > h1 { font-size: 30px; font-weight: 650; margin: 6px 0 18px; }
.payment-status-card { padding: 22px; }
.payment-state { border-bottom: 1px solid var(--line-soft); padding-bottom: 16px; }
.payment-state h2 { font-size: 23px; font-weight: 650; margin: 12px 0 5px; }
.payment-state p { color: var(--ink-soft); margin: 0; }
.payment-state.bad h2 { color: var(--danger); }
.payment-state.warn h2 { color: var(--defense); }
.payment-state.ok h2 { color: var(--accent-ink); }
.payment-facts { display: grid; gap: 0; margin: 14px 0 20px; }
.payment-facts > div {
  display: grid; grid-template-columns: minmax(105px, .4fr) 1fr;
  gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft);
}
.payment-facts dt { color: var(--ink-faint); font-size: 12px; }
.payment-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Identifiers (order and receipt ids, diagnostics) read as fixed-width. */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.purchase-list { display: grid; gap: 14px; }
.purchase-item + .purchase-item {
  border-top: 1px solid var(--line-soft); padding-top: 14px;
}
.purchase-item .chip { margin-left: 6px; }
.purchase-item .btn { margin-top: 5px; }
.purchase-catalog {
  display: grid; gap: 14px; margin: 18px 0 12px; padding: 15px 17px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--sheet);
}
.payment-provider-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px;
  color: var(--ink-soft); font-size: 12.5px;
}
.payment-provider-line > strong { color: var(--ink); }
.payment-choice-group { display: grid; gap: 7px; }
.payment-choice-group > span {
  color: var(--ink-faint); font-size: 10px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase;
}
.payment-choice-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}
.payment-choice {
  display: flex; justify-content: space-between; align-items: center;
  gap: 9px; min-height: 42px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper); color: var(--ink); text-align: left;
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.payment-choice:hover:not(:disabled), .payment-choice:focus-visible {
  border-color: var(--accent); outline: 2px solid var(--accent-soft);
}
.payment-choice strong { color: var(--money); white-space: nowrap; }
.payment-choice:disabled { opacity: .55; cursor: not-allowed; }
.payment-custom-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px; align-items: end;
}
.payment-custom-row .field { margin: 0; }
.payment-custom-row .btn { min-height: 42px; }
.payment-consent { padding-top: 2px; }
.wallet-ledger { margin-top: 12px; }
.wallet-ledger summary {
  color: var(--accent-ink); font-size: 12.5px; cursor: pointer;
}

footer.app {
  max-width: 1104px; margin: 0 auto; padding: 0 24px 40px;
  color: var(--ink-faint); font-size: 12px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.app[hidden] { display: none; }
footer.app a { color: inherit; }

/* ---------- legal policies + explicit consent ---------- */
.legal-nav-link { color: var(--ink-soft); font-size: 13px; text-decoration: none; }
.legal-nav-link:hover { color: var(--accent-ink); text-decoration: underline; }
.legal-page { max-width: 820px; padding-bottom: 42px; }
.legal-page > h1 { font-size: 36px; font-weight: 650; margin: 8px 0 2px; }
.legal-meta { color: var(--ink-faint); font-size: 12.5px; margin: 0 0 22px; }
.legal-page section {
  border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px;
}
.legal-page section h2 { font-size: 22px; font-weight: 650; margin: 0 0 8px; }
.legal-page section p { margin: 9px 0; }
.legal-page li + li { margin-top: 7px; }
.legal-status {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--sheet); padding: 13px 15px; color: var(--ink-soft);
}
.legal-status.draft { border-color: var(--money); }
.legal-status.approved { border-color: var(--accent); background: var(--accent-soft); }
.legal-table-wrap { overflow-x: auto; }
.legal-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px; text-align: left;
}
.legal-table th, .legal-table td {
  border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: top;
}
.legal-table th { color: var(--ink-soft); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.legal-table td:first-child { width: 34%; font-weight: 600; }
.legal-footer { padding-top: 8px; }
.consent-group {
  display: grid; gap: 9px; padding: 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
}
.consent-check {
  display: grid; grid-template-columns: 17px 1fr; gap: 8px;
  align-items: start; color: var(--ink-soft); font-size: 12.5px;
}
.consent-check input { margin: 3px 0 0; width: 15px; height: 15px; }
.legal-inline { color: var(--ink-faint); font-size: 12.5px; margin: 8px 0; }

@media (max-width: 640px) {
  .wrap { padding: 20px 24px 70px; }
  .results-layout { grid-template-columns: 1fr; gap: 16px; }
  .facets-panel { padding: 0; }
  .mobile-filter-toggle {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; min-height: 48px; padding: 12px 14px;
    border: 0; border-radius: var(--radius); background: transparent;
    color: var(--accent-ink); font: inherit; font-weight: 650; text-align: left;
  }
  .filter-chevron { font-size: 20px; line-height: 1; }
  .filters-open .filter-chevron { transform: rotate(180deg); }
  .facet-controls { display: none; }
  .filters-open .facet-controls { display: block; padding: 0 14px 14px; }
  .facets-panel .mobile-filter-close { display: block; width: 100%; margin-top: 16px; }
  .facet-section + .facet-section {
    border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 14px;
  }
  .report { padding: 26px 20px; }
  .case-factgrid { grid-template-columns: 1fr; gap: 12px; }
  .case-fact-column {
    justify-self: stretch; width: auto; max-width: none;
  }
  .cols2 { grid-template-columns: 1fr; }
  .card .row1 { flex-direction: column; gap: 2px; }
  .badge { text-align: left; }
  .advanced-form { grid-template-columns: 1fr; }
  .operator-guide { grid-template-columns: max-content 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .payment-status-card { padding: 18px 15px; }
  .payment-facts > div { grid-template-columns: 92px 1fr; gap: 9px; }
  .payment-custom-row { grid-template-columns: 1fr; }
  .payment-custom-row .btn { width: 100%; }
  footer.app { flex-direction: column; }
  .legal-page > h1 { font-size: 31px; }
  .legal-table td:first-child { width: 40%; }
}

/* ---------- search in flight (shimmer + quiet busy) ---------- */
.results-pane { position: relative; }
.results-head { scroll-margin-top: 64px; }
.search-progress {
  position: absolute; top: -13px; left: 0; right: 0; height: 2px;
  border-radius: 2px; overflow: hidden; background: var(--line-soft);
}
.search-progress[hidden] { display: none; }
.search-progress i {
  display: block; height: 100%; width: 38%;
  background: var(--accent); border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .search-progress i { animation: progress-slide 1.1s ease-in-out infinite; }
  @keyframes progress-slide {
    from { transform: translateX(-110%); }
    to { transform: translateX(380%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .search-progress i { width: 100%; opacity: .55; }
}
.searchbox .go.busy:not(.stop) { opacity: .55; pointer-events: none; }
.results-pane[aria-busy="true"] .results-head { opacity: .55; }

.member-mode-banner {
  display: flex;
  justify-content: center; align-items: center; gap: 12px;
  padding: 7px 16px; border-bottom: 1px solid var(--accent);
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 650;
}
.member-mode-banner[hidden] { display: none; }
.member-mode-banner button {
  border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.member-mode-label { white-space: nowrap; }
.member-mode-actions { display: flex; gap: 12px; white-space: nowrap; }

/* Compact allowance display. One restrained pill, reused verbatim by the
   member-mode banner and the signed-in header, so a simulating administrator
   reads exactly what a member reads. Colour comes from the surrounding
   context, never from a new palette entry. */
.usage-pill {
  display: inline-flex; align-items: baseline; flex-wrap: wrap;
  gap: 0 10px; min-width: 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.usage-pill .usage-seg { white-space: nowrap; }
.usage-pill .usage-seg + .usage-seg::before {
  content: "\00b7"; margin-right: 10px; opacity: .55;
}
.usage-pill .usage-tier { font-weight: 750; }
.usage-pill-empty { opacity: .8; font-weight: 600; }
.usage-pill-link {
  display: inline-flex; min-width: 0; color: inherit; text-decoration: none;
  border-radius: 999px;
}
.usage-pill-link:hover .usage-pill { color: var(--accent-ink); }

/* In the header the pill is a quiet outlined chip rather than banner text. */
.top-usage {
  display: inline-flex; align-items: center; margin-right: 10px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; color: var(--ink-faint); background: var(--paper);
}
.top-usage[hidden] { display: none; }
.top-usage:hover { border-color: var(--accent); color: var(--accent-ink); }

/* The member's standing allowance strip. Hidden on desktop, where the header
   chip already carries it; shown on a phone, where the chip stands down. An
   ordinary member must be able to read their allowance on every layout. */
.usage-strip { display: none; }
.usage-strip[hidden] { display: none; }

@media (max-width: 720px) {
  /* The header chip would crowd the account menu on a phone; the strip below
     carries the same numbers instead, so neither a member nor member mode
     loses them. */
  .top-usage { display: none; }
  .usage-strip:not([hidden]) {
    display: flex; justify-content: center; align-items: center;
    padding: 6px 12px; border-bottom: 1px solid var(--line-soft);
    background: var(--sheet); color: var(--ink-faint);
  }
  .member-mode-banner {
    flex-wrap: wrap; justify-content: flex-start; gap: 4px 12px;
    padding: 6px 12px;
  }
  .member-mode-banner .usage-pill { font-size: 11px; gap: 0 8px; }
  .member-mode-banner .usage-pill .usage-seg + .usage-seg::before {
    margin-right: 8px;
  }
  .usage-strip .usage-pill-link {
    min-height: 30px; align-items: center; padding: 0 4px;
  }
  .member-mode-banner button {
    min-width: 24px; min-height: 30px; padding: 4px 2px;
  }
}
.menu-label {
  display: block; padding: 8px 14px 3px; color: var(--ink-faint);
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
}
.menu-tier-row { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px 8px 8px; gap: 4px; }
.menu-tier-row button {
  border: 1px solid var(--line-soft); border-radius: 5px;
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
  padding: 6px 4px; font-size: 10.5px;
}
.menu-tier-row button:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Quiet original-document affordance on result teasers (never a link). */
.card .published { display: flex; align-items: baseline; gap: 10px; }
.card .published .pdf-flag {
  margin-left: auto; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  white-space: nowrap;
}
.card:hover .pdf-flag { color: var(--accent-ink); border-color: var(--accent); }

/* Error empties color only the headline; DESIGN.md reserves --danger for errors. */
.empty.error .serif { color: var(--danger); }
.empty.assistant-resting {
  box-sizing: border-box;
  width: min(440px, 100%);
  margin: 24px auto 0;
  text-align: center;
}
.empty.assistant-resting .serif { white-space: nowrap; }

@media (max-width: 480px) {
  .empty.assistant-resting .serif { white-space: normal; }
}

/* ---------- topbar account area ---------- */
.top-auth { position: relative; display: inline-flex; align-items: baseline; }
.top-signin {
  color: var(--accent-ink); text-decoration: none;
  font-size: 13px; font-weight: 650; white-space: nowrap;
}
.top-signin:hover { text-decoration: underline; }
.user-menu { position: relative; display: inline-block; }
.user-button {
  border: 1px solid var(--line); background: var(--sheet); color: var(--ink);
  border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; max-width: 160px;
}
.user-button::after {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .55;
}
.user-button-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-icon { display: none; }
.user-button:hover, .user-button[aria-expanded="true"] {
  border-color: var(--accent); color: var(--accent-ink);
}
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 9px); min-width: 212px;
  background: var(--sheet); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px; z-index: 40;
}
.menu-pop[hidden] { display: none; }
.menu-usage {
  padding: 6px 10px 9px; color: var(--ink-faint); font-size: 12px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 5px;
}
.menu-pop a, .menu-signout {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ink); text-decoration: none; font-size: 13.5px;
}
.menu-pop a:hover, .menu-signout:hover {
  background: var(--paper); color: var(--accent-ink);
}
.menu-signout {
  border-top: 1px solid var(--line-soft); border-radius: 0;
  margin-top: 5px; padding-top: 9px; color: var(--ink-soft);
}

/* ---------- #/auth ---------- */
.auth-wrap { max-width: 402px; margin: 24px auto 0; text-align: center; }
.auth-wrap .modes { margin: 16px 0; }
.auth-card { text-align: left; padding: 22px 24px 24px; margin-bottom: 0; }
.auth-card h1 { font-size: 24px; font-weight: 650; margin: 0 0 4px; }
.auth-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 16px; }
/* The confirmation cards -- "Verify your email" after sign-up, "Email
   verified" after the link -- say one thing, so their content sits centred
   instead of reading as the start of a form. */
.auth-card--center { text-align: center; }
.auth-card--center .auth-sub { margin-bottom: 0; }
.auth-card--center .btn { margin-top: 16px; }
.auth-foot { color: var(--ink-faint); font-size: 12px; margin: 16px auto 0; max-width: 40ch; }
.auth-form { display: grid; gap: 12px; }
.registration-honeypot {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.auth-help-link {
  justify-self: end; margin-top: -5px; color: var(--accent-ink);
  font-size: 12.5px; text-decoration: none;
}
.auth-help-link:hover, .auth-help-link:focus { text-decoration: underline; }
.field { display: grid; gap: 5px; color: var(--ink-soft); font-size: 12px; text-align: left; }
.field input, .field select {
  min-width: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); padding: 9px 10px; color: var(--ink); font-size: 14px;
}
/* The focus ring is drawn inside the control's own box, so it never lies
   over the error line beneath. */
.field input:focus, .field select:focus {
  border-color: var(--accent); outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.field select, .case-submission-field select, .upload-grid select,
.account-year-filter select, .newsletter-controls select {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23808a84' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 10px;
}
.field input[aria-invalid="true"],
.consent-group[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--danger) 78%, var(--line));
}
.field-error {
  min-height: 18px; margin: 3px 0 0; color: var(--danger);
  font-size: 12px; line-height: 1.4;
}
.field-error:empty { visibility: hidden; }
.auth-form .btn { justify-self: start; }
.auth-form .err { color: var(--danger); font-size: 12.5px; min-height: 17px; margin: -2px 0; }
.auth-form .err:empty { visibility: hidden; }
.form-msg:empty { margin: 0; min-height: 0; }
.form-msg { color: var(--accent-ink); font-size: 12.5px; min-height: 17px; }
.form-msg.bad { color: var(--danger); }
.auth-success {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  align-items: start; padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink);
}
.auth-success[hidden] { display: none; }
.auth-success-mark {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent); position: relative;
}
.auth-success-mark::after {
  content: ""; position: absolute; left: 7px; top: 5px;
  width: 8px; height: 4px; border: solid var(--sheet);
  border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.auth-success strong { display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-size: 15px; font-weight: 650; }
.auth-success small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; }
.pw-checklist {
  list-style: none; margin: -2px 0 0; padding: 8px 10px;
  border: 1px dashed var(--line); border-radius: 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px;
  color: var(--ink-faint); font-size: 12px;
}
.pw-checklist li { display: flex; align-items: center; gap: 7px; }
.pw-checklist li::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  border: 1px solid var(--ink-faint); flex: none;
}
.pw-checklist li.ok { color: var(--accent-ink); }
.pw-checklist li.ok::before { background: var(--accent); border-color: var(--accent); }

/* ---------- #/profile ---------- */
.profile-head { margin: 4px 0 18px; }
.profile-head h1 { font-size: 27px; font-weight: 650; margin: 6px 0 0; }
.profile-grid {
  width: 100%; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.profile-card {
  min-width: 0; max-width: 100%;
  margin-bottom: 0; scroll-margin-top: 70px;
}
.profile-card .rsec { min-width: 0; max-width: 100%; margin-top: 0; }
#researchThreadsCard .rsec .body,
#membershipCard .rsec .body,
#billingCard .rsec .body,
#planCard .rsec .body,
#balanceCard .rsec .body,
#pricingCard .rsec .body,
#newsletterCard .rsec .body,
#accountOrdersCard .rsec .body {
  max-width: none; width: 100%; min-width: 0;
}
.profile-card .fact { margin-bottom: 14px; }
.billing-row { margin-bottom: 12px; }
.billing-note { color: var(--ink-faint); font-size: 12.5px; margin: 10px 0; max-width: 48ch; }
.profile-wide { grid-column: 1 / -1; min-width: 0; max-width: 100%; }

.membership-section + .membership-section {
  border-top: 1px solid var(--line-soft); margin-top: 24px; padding-top: 22px;
}
.membership-section h2 {
  margin: 0 0 12px; font-size: 20px; font-weight: 650;
}
.membership-row {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--sheet); padding: 15px 17px; margin-bottom: 10px;
}
.membership-row-head,
.membership-plan-head,
.membership-event-head,
.thread-title {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
}
.membership-row h3, .membership-plan-head h3, .thread-row h3 {
  margin: 0; font-size: 18px; font-weight: 650; overflow-wrap: anywhere;
}
.membership-plan-head .price {
  color: var(--money); font-size: 23px; line-height: 1.2; text-align: right;
  white-space: nowrap;
}
.membership-plan-head .price small {
  display: block; color: var(--ink-faint); font-family: -apple-system,
    "Segoe UI", system-ui, sans-serif; font-size: 11px; font-weight: 400;
}
.membership-money { color: var(--money); }
.membership-terms {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 16px; margin: 14px 0 10px;
}
.membership-terms > div {
  min-width: 0; padding-top: 7px; border-top: 1px solid var(--line-soft);
}
.membership-terms span {
  display: block; color: var(--ink-faint); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 650;
}
.membership-terms strong {
  display: block; margin-top: 2px; color: var(--ink); font-size: 12.5px;
  font-weight: 600; overflow-wrap: anywhere;
}
.membership-terms strong.membership-money { color: var(--money); }
.membership-event {
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.membership-event:last-child { border-bottom: 0; }
.membership-event-head strong { font-size: 13.5px; text-transform: capitalize; }
.membership-event-head time {
  flex: none; color: var(--ink-faint); font-size: 12px;
}
.membership-event .chips { margin: 7px 0 0; }
.membership-event p { margin: 6px 0 0; font-size: 13px; }
.membership-event .meta { margin-top: 5px; overflow-wrap: anywhere; }

/* /upgrade — four sections as tabs. The strip wears the account section
   pills; on a phone the tabs wrap onto more rows rather than scroll, so no
   section is hidden off-screen. */
.upgrade-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 12px;
  margin-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.upgrade-tab {
  flex: none; max-width: 100%; min-height: 34px; padding: 7px 13px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--sheet); color: var(--ink-soft);
  font-size: 13px; font-weight: 600; line-height: 1.25; text-align: left;
}
.upgrade-tab:hover { color: var(--accent-ink); border-color: var(--accent); }
.upgrade-tab[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .upgrade-tab[aria-selected="true"] { color: #0c1c28; }
}
:root[data-theme="dark"] .upgrade-tab[aria-selected="true"] { color: #0c1c28; }
.upgrade-tab:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px;
}
.upgrade-panel { display: grid; gap: 16px; min-width: 0; }
.upgrade-panel[hidden] { display: none; }
.upgrade-panel:focus-visible { outline-offset: 4px; border-radius: var(--radius); }
/* The balance card now spans its tab; keep the custom amount a field-sized row. */
#balanceCard .payment-custom-row { max-width: 560px; }
#accountOrdersCard .pager + .billing-note { margin-top: 14px; }
.current-plan-others {
  list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0;
}
.current-plan-others li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  padding: 9px 0; border-top: 1px solid var(--line-soft);
  color: var(--ink-soft); font-size: 13px; min-width: 0;
}
.current-plan-others strong {
  color: var(--ink); font-size: 16.5px; font-weight: 650; overflow-wrap: anywhere;
}
.current-plan-head {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  align-items: flex-start; justify-content: space-between;
}
.current-plan-head h2 { margin: 0 0 9px; font-size: 24px; }
.current-plan-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.current-plan-facts { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.current-plan-facts .fact { margin: 0; }
.current-plan-expiring { border-color: var(--money); color: var(--money); }
.current-plan-note { max-width: 62ch; }
.plan-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px; margin-top: 14px;
}
.plan-card {
  min-width: 0; display: flex; flex-direction: column; gap: 11px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--sheet); padding: 17px 16px 13px;
}
.plan-card.plan-current {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.plan-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.plan-head h3 { margin: 0; font-size: 19px; font-weight: 650; }
.plan-flag {
  flex: none; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: 999px; padding: 3px 9px;
  background: var(--accent-soft); white-space: nowrap;
}
.plan-price { color: var(--money); font-size: 27px; line-height: 1.1; }
.plan-price small {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-left: 4px;
}
.plan-benefits {
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; color: var(--ink-soft); line-height: 1.45;
}
.plan-benefits li { padding: 6px 0 5px; border-top: 1px solid var(--line-soft); }
.plan-benefits strong { color: var(--ink); font-size: 14px; }
.plan-cta { margin-top: auto; display: grid; gap: 7px; }
.plan-cta .plan-buy { width: 100%; }
.plan-cta-note { margin: 0; }
.plan-delta { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.plan-current-flag {
  border: 1px solid var(--accent); border-radius: 8px; padding: 9px 10px;
  text-align: center; font-weight: 650; font-size: 13.5px;
  color: var(--accent-ink); background: var(--accent-soft);
}
.plan-terms summary {
  cursor: pointer; color: var(--ink-faint); font-size: 12px;
}
.plan-terms .membership-terms { grid-template-columns: 1fr; margin: 10px 0 0; }
.plan-checkout { margin-top: 14px; display: grid; gap: 8px; }
.plan-checkout:empty { display: none; }
.plan-section > .plan-note { max-width: none; margin: 4px 0 0; }
.balance-amount-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.balance-amount { color: var(--money); font-size: 30px; line-height: 1.1; }
.balance-amount-meta { color: var(--ink-faint); font-size: 12px; }
.pricing-terms {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 4px;
}
.pricing-provenance .chip {
  max-width: 100%; white-space: normal; border-radius: 10px;
  line-height: 1.4; padding: 6px 10px;
}
.purchase-table { table-layout: auto; }
.purchase-table .purchase-amount { color: var(--money); white-space: nowrap; }
.purchase-provider {
  display: block; color: var(--ink-faint); font-size: 11.5px;
}
.purchase-row-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.purchase-row-actions a {
  color: var(--accent-ink); font-size: 12px; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}
@media (max-width: 680px) {
  .purchase-provider { display: inline; margin-left: 6px; }
  .purchase-table .purchase-row-actions { padding-top: 4px; }
}

.thread-controls {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end;
  margin-bottom: 14px;
}
.thread-controls label {
  display: grid; gap: 4px; color: var(--ink-soft); font-size: 11.5px;
}
.thread-controls select {
  min-width: 160px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); color: var(--ink); padding: 7px 28px 7px 9px;
}
:root[data-theme="dark"] .thread-controls select { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .thread-controls select { color-scheme: dark; }
}
.thread-list { width: 100%; min-width: 0; max-width: 100%; display: grid; gap: 10px; }
.thread-list .empty { max-width: 460px; justify-self: center; }
.thread-list .empty { width: 100%; text-align: center; padding-block: 34px; }
.snapshot-freshness {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px;
  color: var(--ink-faint); font-size: 11.5px;
}
.thread-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
.thread-row {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--sheet); padding: 15px 17px; min-width: 0;
}
.thread-title { align-items: center; }
.thread-title > div { display: flex; flex-wrap: wrap; gap: 5px; }
.thread-title .btn { flex: none; padding: 6px 10px; font-size: 12px; }
.thread-row h3 { margin-top: 10px; }
.thread-row .chips { margin-top: 9px; }
.thread-row .factgrid { margin-top: 13px; }
.thread-row .fact { min-width: 0; }
.compiled-query {
  margin-top: 9px; padding: 8px 10px; border-left: 2px solid var(--accent);
  background: var(--accent-soft); color: var(--ink-soft); font-size: 12px;
  overflow-wrap: anywhere;
}
.compiled-query span {
  display: block; color: var(--accent-ink); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.compiled-query code { color: var(--ink); white-space: normal; }
.thread-identities {
  display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 11px;
  color: var(--ink-faint); font-size: 11px;
}
.thread-identities code { color: var(--ink-soft); }
.deep-refine-link {
  margin-top: 4px; min-height: 32px; padding: 2px 0;
  border: 0; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 12.5px; font-weight: 550;
  cursor: pointer; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.deep-refine-link:hover, .deep-refine-link:focus {
  color: var(--accent-ink); text-decoration-color: currentColor;
}
.thread-iteration-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-bottom: 12px;
}
.iteration-badge { color: var(--accent-ink); border-color: var(--accent); }
.thread-gen-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px; background: var(--sheet);
}
.thread-gen-toggle button {
  border: 0; background: transparent; color: var(--ink-soft);
  padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 550;
  cursor: pointer;
}
.thread-gen-toggle button.on { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .thread-gen-toggle button.on,
.dark .thread-gen-toggle button.on { color: #0c1c28; }

/* Automatic dark mode uses a light blue accent. White text on that accent is
   only 2.3:1, so every solid-accent control needs the same dark foreground
   already used by the explicit dark-theme overrides. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modes button.on,
  :root:not([data-theme="light"]) .searchbox .go,
  :root:not([data-theme="light"]) .pager-num[aria-current="page"],
  :root:not([data-theme="light"]) .thread-gen-toggle button.on,
  :root:not([data-theme="light"]) .btn.danger {
    color: #0c1c28;
  }
}
:root[data-theme="dark"] .searchbox .go,
:root[data-theme="dark"] .btn.danger,
.dark .searchbox .go,
.dark .btn.danger { color: #0c1c28; }

.research-history-tools {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.research-history-tools .field { width: min(320px, 100%); }
.research-history-tools .billing-note { margin: 0 0 9px; white-space: nowrap; }
.loading-patience { display: block; margin-top: 8px; color: var(--ink-faint); }
.research-table-wrap {
  width: 100%; min-width: 0; max-width: 100%; overflow-x: auto;
}
.research-table {
  width: 100%; min-width: 0; max-width: 100%;
  border-collapse: collapse; table-layout: fixed;
}
.research-table th, .research-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--line-soft);
  text-align: left; vertical-align: middle;
  font-size: 13px;
}
.research-table th {
  color: var(--ink-faint); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase;
}
.research-table th:first-child { width: 38%; }
.research-table th:nth-child(2) { width: 9%; }
.research-table th:nth-child(3) { width: 9%; }
.research-table th:nth-child(4) { width: 21%; }
.research-table th:nth-child(5) { width: 13%; }
.research-table th:nth-child(6) { width: 10%; }
.research-sort-head {
  border: 0; background: transparent; color: inherit; padding: 2px 0;
  font: inherit; font-weight: 700; letter-spacing: inherit;
  text-transform: inherit; text-align: left;
}
.research-sort-head:hover { color: var(--accent-ink); }
.history-info {
  display: inline-grid; place-items: center; width: 16px; height: 16px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--accent-ink); font-size: 10px; font-weight: 750;
  text-transform: none; letter-spacing: 0; vertical-align: 1px;
}
.research-open-row { cursor: pointer; }
.research-open-row:hover td { background: var(--accent-soft); }
.research-query-button {
  display: block; width: 100%; min-width: 0; max-width: 100%;
  padding: 2px 0; border: 0;
  background: transparent; color: var(--ink); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.research-query-button:hover { color: var(--accent-ink); }
.research-date { white-space: nowrap; }
.research-actions { display: flex; gap: 8px; align-items: center; }
.research-actions button {
  border: 0; background: transparent; padding: 3px 0;
  color: var(--accent-ink); font-size: 12px; text-decoration: underline;
  text-underline-offset: 3px;
}
.research-actions .dismiss { color: var(--danger); }

@media (max-width: 680px) {
  .research-history-tools { align-items: stretch; flex-direction: column; gap: 4px; }
  .research-history-tools .field { width: 100%; }
  .research-history-tools .billing-note { white-space: normal; }
  .research-table, .research-table tbody, .research-table tr,
  .research-table th, .research-table td {
    display: block; width: 100%; min-width: 0; max-width: 100%;
  }
  .research-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; }
  .research-table tr {
    padding: 12px 0; border-bottom: 1px solid var(--line-soft);
  }
  .research-table td { overflow: hidden; border: 0; padding: 4px 0; }
  .research-table td::before {
    content: attr(data-label); display: inline-block; width: 9.5rem;
    color: var(--ink-faint); font-size: 10px; letter-spacing: .07em;
    text-transform: uppercase;
  }
  .research-table td:first-child::before,
  .research-table td:last-child::before { display: none; }
  .research-table th:first-child, .research-table th:nth-child(2),
  .research-table th:nth-child(3), .research-table th:nth-child(4),
  .research-table th:nth-child(5) { width: auto; }
}

.terms-dialog-backdrop {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  overflow-y: auto; padding: 22px;
  background: rgba(0, 0, 0, .48);
}
.terms-dialog {
  width: min(620px, 100%); margin: auto; padding: 24px;
  border-top: 3px double var(--line);
}
.terms-dialog h2 { margin: 7px 0 5px; font-size: 25px; font-weight: 650; }
.terms-dialog > p { margin: 0 0 16px; color: var(--ink-soft); }
.terms-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px;
}
.terms-grid > div {
  min-width: 0; border-top: 1px solid var(--line-soft); padding-top: 7px;
}
.terms-grid span {
  display: block; color: var(--ink-faint); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 650;
}
.terms-grid strong {
  display: block; margin-top: 2px; font-size: 13px; overflow-wrap: anywhere;
}
.terms-grid strong.membership-money { color: var(--money); }
.terms-actions {
  display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px;
}
.research-access-plans { display: grid; gap: 7px; margin: 14px 0 0; }
.research-access-plan {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 16px;
  border-top: 1px solid var(--line-soft); padding-top: 8px;
}
.research-access-plan strong { color: var(--ink); }
.research-access-plan span { color: var(--ink-soft); font-size: 12px; }
.research-access-plan .membership-money { color: var(--money); }
.research-access-current { margin-top: 12px !important; color: var(--ink-soft); }
.research-access-note { margin-top: 14px !important; font-size: 13px; }
.research-access-link { align-self: center; color: var(--accent-ink); }
.research-package-choices { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; display: grid; gap: 8px; }
.research-package-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.research-package-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.research-package-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.research-package-choice input { margin: 0; accent-color: var(--accent); }
.research-package-copy { display: grid; gap: 3px; }
.research-package-copy > span { color: var(--ink-soft); font-size: 13px; }
.research-access-dialog .terms-actions { flex-wrap: wrap; }
.membership-past summary { cursor: pointer; padding: 10px 0; font-size: 18px; font-weight: 650; }
.membership-past summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.membership-past-rows { margin-top: 14px; }
.case-report-dialog { width: min(480px, 100%); }
.case-report-dialog h2 {
  margin: 0 0 18px; font-size: 25px; font-weight: 650;
}
.case-report-dialog form { display: grid; gap: 8px; min-width: 0; }
.case-report-dialog label {
  color: var(--ink-soft); font-size: 12.5px; font-weight: 650;
}
.case-report-dialog select, .case-report-dialog textarea {
  box-sizing: border-box; width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper); color: var(--ink); padding: 10px 11px;
  font: inherit;
}
.case-report-dialog select { min-height: 44px; }
.case-report-dialog textarea {
  min-height: 148px; resize: vertical; line-height: 1.45;
}
.case-report-dialog select:focus, .case-report-dialog textarea:focus {
  border-color: var(--accent); outline: 2px solid var(--accent-soft);
}
.case-report-dialog select[aria-invalid="true"],
.case-report-dialog textarea[aria-invalid="true"] { border-color: var(--danger); }
.case-report-meta {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 12px; align-items: start; color: var(--ink-faint);
  font-size: 11.5px;
}
.case-report-meta .form-msg { min-height: 1.4em; margin: 0; text-align: right; }
.case-report-dialog .btn { min-height: 44px; }
.case-report-confirmation {
  margin: 0; color: var(--ink-soft); line-height: 1.55;
}

@media (max-width: 720px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-wide { grid-column: auto; }
  .membership-terms { grid-template-columns: 1fr 1fr; }
  .thread-row .factgrid { grid-template-columns: 1fr 1fr; }
  .current-plan-head { flex-direction: column; gap: 12px; }
  .current-plan-facts { gap: 8px 22px; }
}
@media (max-width: 480px) {
  .membership-row-head, .membership-plan-head, .thread-title {
    align-items: flex-start; flex-direction: column;
  }
  .membership-plan-head .price { text-align: left; }
  .plan-cards { grid-template-columns: 1fr; }
  .plan-card { padding: 15px 14px 12px; }
  .payment-choice {
    flex-direction: column; align-items: flex-start; gap: 2px;
  }
  .membership-terms, .terms-grid { grid-template-columns: 1fr; }
  .thread-controls { display: grid; grid-template-columns: 1fr; }
  .thread-controls label, .thread-controls select { width: 100%; }
  .thread-title .btn { width: 100%; text-align: center; }
  .thread-row .factgrid { grid-template-columns: 1fr; }
  .terms-dialog-backdrop { padding: 12px; place-items: start center; }
  .terms-dialog { padding: 20px 17px; }
  .terms-actions { flex-direction: column-reverse; }
  .terms-actions .btn { width: 100%; text-align: center; }
  .research-access-plan { grid-template-columns: 1fr; }
  .research-access-link { text-align: center; padding: 8px; }
  .case-report-meta { grid-template-columns: 1fr; }
  .case-report-meta .form-msg { text-align: left; }
}

/* ---------- itemized specials (case report) ---------- */
.specials-list { margin: 0; }
.specials-list > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 4px 0; border-bottom: 1px dashed var(--line);
}
.specials-list > div:last-child { border-bottom: 0; }
.specials-list dt { margin: 0; }
.specials-list dd { margin: 0; color: var(--money); white-space: nowrap; }
.specials-list > div.specials-narrative { display: block; }

@media (max-width: 560px) {
  .topbar .est { display: none; }
  .brandmark { height: 22px; }
}

/* ------------------------------------------------------------------ */
/* Admin review v3 — the record is edited on the case card itself.    */
/* Inputs match the login/search .field styling; questioned fields    */
/* carry the accent and open in edit mode.                            */
/* ------------------------------------------------------------------ */
.rv-stage { max-width: none; }
.rv-stage .report.rv-card { max-width: none; margin: 0; padding: 28px 34px 26px; }
.rv-sourcebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.rv-sourcebar .rv-renders { flex-basis: 100%; }
.rv-render-frame {
  width: 100%; min-height: 120px; border-radius: 6px;
  background: var(--paper); overflow: hidden;
}
.rv-render-frame img[hidden], .rv-render-fallback[hidden] { display: none; }
.rv-render-fallback {
  box-sizing: border-box; display: grid; place-items: center;
  width: 100%; min-height: 120px; margin: 0; padding: 20px;
  border: 1px dashed var(--line); border-radius: 6px;
  color: var(--ink-faint); text-align: center; font-size: 12.5px;
}
.rv-card { margin-top: 4px; }
.rv-slot { position: relative; display: inline; }
.rv-slot .rv-pencil {
  border: none; background: none; cursor: pointer; padding: 0 2px;
  color: var(--ink-faint); font-size: 13px; line-height: 1; vertical-align: baseline;
}
.rv-slot .rv-pencil:hover, .rv-slot .rv-pencil:focus { color: var(--accent-ink); }
.rv-empty { color: var(--ink-faint); }
.rv-need {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}
.rv-flagged > .rv-editwrap .rv-editor { border-color: var(--accent); background: var(--accent-soft); }
.rv-editwrap { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.rv-editor {
  min-width: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); padding: 7px 9px; color: var(--ink);
  font-size: 13.5px; font-family: inherit;
}
.rv-editor:focus { border-color: var(--accent); }
textarea.rv-editor { width: 100%; min-width: min(56ch, 100%); }
.rv-editbtns { display: inline-flex; gap: 6px; }
.rv-editwrap .rv-done, .rv-editwrap .rv-cancel { padding: 5px 9px; font-size: 12px; }
/* Long-text editors (Facts, Result text) take the full card width and a
   comfortable height; ✓/✕ stack beside them. */
.rv-slot-block { display: block; }
.rv-slot-block .rv-editwrap { display: flex; width: 100%; align-items: flex-start; }
.rv-slot-block textarea.rv-editor {
  flex: 1; width: auto; min-width: 0; min-height: 190px;
  resize: vertical; line-height: 1.55;
}
.rv-slot-block .rv-editbtns { flex-direction: column; }
/* Result prose is read and corrected as a paragraph. Give its textarea the
   whole section width and put its small actions below; short inline editors
   keep the compact layout above. */
.rv-slot-block[data-slot="result_text"] .rv-editwrap {
  display: grid; grid-template-columns: minmax(0, 1fr); width: 100%;
}
.rv-slot-block[data-slot="result_text"] .rv-input-stack,
.rv-slot-block[data-slot="result_text"] textarea.rv-editor {
  display: block; box-sizing: border-box; width: 100%; max-width: 100%;
}
.rv-slot-block[data-slot="result_text"] .rv-editbtns {
  flex-direction: row; justify-content: flex-end;
}
/* A field the reviewer changed: badge + one-click revert to the fleet value. */
.rv-editedtag {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--sheet); color: var(--accent-ink);
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
}
.rv-editedtag .rv-revert {
  border: none; background: none; cursor: pointer; padding: 0;
  color: inherit; font-size: 13px; line-height: 1;
}
.rv-editedtag .rv-revert:hover, .rv-editedtag .rv-revert:focus { color: var(--ink); }
.rv-professionals { position: relative; }
.rv-professionals.rv-flagged {
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent-soft); padding: 12px;
}
.rv-prof-summary { display: block; margin: 4px 0; }
.rv-professionals > .rv-pencil {
  border: 0; background: transparent; color: var(--ink-faint);
  cursor: pointer; margin-left: 6px;
}
.rv-prof-list { display: grid; gap: 12px; margin: 12px 0; }
.rv-prof-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; padding: 12px; background: var(--sheet);
}
.rv-prof-row legend { padding: 0 5px; font-weight: 650; }
.rv-prof-row label {
  display: grid; gap: 4px; color: var(--ink-soft); font-size: 12px;
}
.rv-prof-row input, .rv-prof-row select, .rv-prof-row textarea {
  min-width: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); color: var(--ink); padding: 7px 9px;
  font: inherit;
}
.rv-prof-row .rv-prof-source { grid-column: 1 / -1; }
.rv-prof-remove { justify-self: start; }
/* Back-to-queue on the left, Previous/Next on the right. */
.rv-navrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-navspacer { flex: 1; }
/* Inline PDF preview pane under the source bar. */
.rv-pdfctl { display: inline-flex; align-items: center; gap: 6px; }
/* A button, not a link: the signed URL is fetched on click, so there is no
   href to render until the reviewer explicitly opens that exact object. */
.rv-newtab {
  font-size: 15px; text-decoration: none; padding: 2px 4px;
  border: 0; background: transparent; color: var(--accent-ink);
  cursor: pointer; line-height: 1;
}
.rv-newtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-pdfpane { margin: 0 0 14px; }
.rv-pdfframe {
  width: 100%; height: 74vh; border: 1px solid var(--line);
  border-radius: 8px; background: var(--paper);
}
/* Queue "Why it needs you": quiet prose, only decision tokens pop. */
.rv-why { font-weight: 400; font-size: 12.5px; color: var(--ink-soft); }
.rv-why b { font-weight: 650; color: var(--ink); }
/* Plain-English answer lane under the open question. */
.rv-answer { display: flex; gap: 8px; margin: 10px 0 0; flex-wrap: wrap; }
.rv-answer input { flex: 1; min-width: 220px; }
.rv-answer-hint { margin: 6px 0 0; }
.rv-diagnostics {
  margin-top: 12px; border: 1px solid var(--line-soft);
  border-radius: 7px; background: var(--sheet); padding: 10px 12px;
  color: var(--ink-soft); font-size: 12px; min-width: 0; max-width: 100%;
  overflow-wrap: anywhere;
}
.rv-diagnostics * { min-width: 0; }
.rv-diagnostics .mono {
  white-space: normal; word-break: break-all; overflow-wrap: anywhere;
}
.rv-diagnostics summary {
  cursor: pointer; color: var(--ink-soft); font-weight: 650;
}
.rv-diagnostics dl {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 16px; margin: 12px 0;
}
.rv-diagnostics dl div { min-width: 0; }
.rv-diagnostics dt {
  color: var(--ink-faint); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.rv-diagnostics dd {
  margin: 3px 0 0; overflow-wrap: anywhere; color: var(--ink-soft);
}
.rv-submitted-form { margin: 14px 0; }
.rv-submitted-form dd { white-space: pre-wrap; }
/* Post-ingest follow-through: live case + next item. */
.rv-aftermath { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
/* Reject confirm dialog — the required note IS the "are you sure". */
.rv-modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.rv-modal {
  background: var(--sheet); border: 1px solid var(--line); border-radius: 10px;
  width: min(520px, 100%); padding: 20px 22px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.rv-modal h3 { margin: 0 0 6px; font-size: 20px; }
.rv-modal textarea {
  width: 100%; margin-top: 10px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--paper); padding: 9px 10px;
  color: var(--ink); font-size: 14px; font-family: inherit; resize: vertical;
}
.rv-modal textarea:focus { border-color: var(--accent); }
.rv-modal textarea.rv-note-missing { border-color: var(--danger); }
.rv-modal-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
/* Admin KPI cards that double as filters (styles ride on .stat). */
.kpis button.stat { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.kpis button.stat:hover, .kpis button.stat:focus { border-color: var(--accent); }
.kpis button.stat.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* Sortable header cells + status legend under the queue table. */
.rv-sorth {
  border: none; background: none; padding: 0; font: inherit; color: inherit;
  cursor: pointer; letter-spacing: inherit; text-transform: inherit;
}
.rv-sorth:hover, .rv-sorth:focus { color: var(--accent-ink); }
.rv-legend { margin-top: 12px; }
.rv-legend b { font-weight: 650; color: var(--ink); }
.pager-gap { color: var(--ink-faint); padding: 0 2px; }
/* Small round theme toggle, one per topbar (both shells). */
.theme-dot {
  border: 1px solid var(--line); background: var(--sheet); color: var(--ink-soft);
  width: 30px; height: 30px; border-radius: 999px; font-size: 15px;
  line-height: 1; cursor: pointer; padding: 0;
  flex: 0 0 30px; min-width: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-dot:hover, .theme-dot:focus { color: var(--accent-ink); border-color: var(--accent); }
/* Gate: stacked account sign-in first; the preview code hides behind a toggle. */
.gate form.gate-login { flex-direction: column; }
.gate-alt {
  border: none; background: none; cursor: pointer; margin-top: 14px;
  color: var(--ink-faint); font-size: 12.5px; text-decoration: underline;
}
.gate-alt:hover, .gate-alt:focus { color: var(--accent-ink); }
.gate form[hidden] { display: none; }
#gateForm { margin-top: 10px; }
/* Flagged sections keep the public .rsec rhythm, boxed in accent. */
.rsec.rv-sec-flagged {
  border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 16px 14px; margin-top: 22px; background: var(--accent-soft);
}
.resultband.rv-sec-flagged {
  border: 1px solid var(--accent); padding: 14px 18px;
}
/* The review card fills the standard 980px admin column exactly — same
   bounds as the queue table and topbar (Teppy round 5: not full-bleed). */
.rv-card .rsec .body { max-width: none; }
.rv-card .rsec { margin-top: 24px; }
.rv-card .factgrid { margin: 18px 0 6px; }
.rv-card .sub { margin-bottom: 14px; }
.rv-title .rv-slot { font: inherit; }
.rv-note {
  min-width: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); padding: 9px 10px; color: var(--ink);
  font-size: 14px; font-family: inherit;
}
.rv-note:focus { border-color: var(--accent); }
.rv-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }

@media (max-width: 560px) {
  .rv-stage .report.rv-card { padding: 20px 18px; }
  .rv-diagnostics dl { grid-template-columns: 1fr; }
  .rv-actions { align-items: stretch; }
  .rv-actions .btn { width: 100%; }
  .rv-actions .rv-navspacer { display: none; }
  .rv-prof-row { grid-template-columns: 1fr; }
  .rv-prof-row .rv-prof-source { grid-column: 1; }
}

/* Click-to-fill suggestion chips under an open editor (only when the item
   supplies candidates — e.g. two documented award values). */
.rv-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rv-sugg {
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--sheet); color: var(--accent-ink);
  padding: 3px 12px; font-size: 12.5px; font-weight: 550;
}
.rv-sugg:hover, .rv-sugg:focus { background: var(--accent-soft); }

/* ---------------- Deep Search ---------------- */
.deep-toggle-row { margin-top: 8px; }
.deep-toggle {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-soft);
}
.deep-toggle input { accent-color: var(--accent); margin-top: 2px; }
.deep-toggle-name {
  font-weight: 650; color: var(--accent-ink);
  text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px;
  white-space: nowrap;
}
.deep-toggle-note { color: var(--ink-faint); }

/* These set their own display, which would beat the UA [hidden] rule. */
.amount-filters[hidden], .amount-filters label[hidden], .btn[hidden],
.deep-bell[hidden], .deep-bell-menu[hidden], .deep-toggle-row[hidden],
.results-clear-row[hidden], .results-toolbar[hidden], .results-head[hidden],
.topnav[hidden] {
  display: none;
}
.deep-bell {
  position: relative;
  border: 1px solid var(--line); background: var(--sheet); color: var(--ink-soft);
  width: 30px; height: 30px; border-radius: 999px; font-size: 15px;
  line-height: 1; cursor: pointer; padding: 0;
  flex: 0 0 30px; min-width: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.deep-bell:hover, .deep-bell:focus { color: var(--accent-ink); border-color: var(--accent); }
.deep-bell.working { color: var(--accent-ink); }
.deep-bell.working::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid var(--accent); opacity: .6;
  animation: deep-bell-pulse 1.6s ease-out infinite;
}
@keyframes deep-bell-pulse {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.45); opacity: 0; }
}
.deep-bell i {
  position: absolute; top: 3px; right: 3px; width: 8px; height: 8px;
  border-radius: 999px; background: var(--danger);
}
@media (max-width: 860px) {
  .topbar-in { min-height: 56px; padding: 12px 20px; flex-wrap: wrap; }
  .topbar .name { min-height: 32px; }
  .brandmark { height: 26px; }
}
@media (max-width: 720px) {
  .topbar .tag { display: none; }
  .topnav { display: none; }
  .user-button { width: 36px; min-height: 36px; padding: 8px; justify-content: center; }
  .user-button-name, .user-button::after { display: none; }
  .user-menu-icon { display: block; width: 18px; height: 18px; flex: none; }
}
@media (max-width: 520px) {
  .topbar-in {
    gap: 6px; align-items: center;
  }
  /* Keep the lockup, bell, theme dot, and account menu on one phone row. */
  .topbar .name { flex: 0 1 auto; min-width: 0; min-height: 30px; align-items: center; }
  .brandmark { height: auto; width: clamp(104px, 32vw, 160px); }
  .deep-bell, .theme-dot, .top-auth { flex: none; }
  .top-auth, .user-menu { min-width: 0; }
  .top-signin, .user-button { min-height: 30px; align-items: center; }
  .top-signin { display: inline-flex; }
}
.deep-bell-menu {
  /* top/left/width are set from JS (positionDeepBellMenu), anchored to the
     bell icon's live on-screen rect — the topbar's centered max-width
     container means a hardcoded viewport-edge offset drifts away from the
     icon on wide screens. max-width here is only a safety net. */
  position: fixed; z-index: 60;
  max-width: min(360px, calc(100vw - 24px));
  background: var(--sheet); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; display: grid; gap: 4px;
}
.deep-bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 7px 3px; color: var(--ink-faint); font-size: 10.5px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.deep-bell-head button {
  border: 0; background: none; padding: 2px; cursor: pointer;
  color: var(--accent-ink); font: inherit; letter-spacing: .04em;
}
.deep-bell-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; min-width: 0; max-width: 100%;
  overflow: hidden; border-radius: 7px;
}
.deep-bell-row:hover { background: var(--accent-soft); }
.deep-bell-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; min-width: 0; max-width: 100%; overflow: hidden;
  box-sizing: border-box; text-align: left;
  border: 0; background: none; cursor: pointer;
  border-radius: 7px; padding: 8px 9px; color: var(--ink); font-size: 12.5px;
}
.deep-bell-item:hover { background: transparent; }
.deep-bell-dismiss {
  width: 28px; height: 28px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 18px; line-height: 1;
}
.deep-bell-dismiss:hover, .deep-bell-dismiss:focus {
  background: var(--line-soft); color: var(--ink);
}
.deep-bell-foot {
  border-top: 1px solid var(--line-soft); padding: 8px 8px 4px;
  color: var(--accent-ink); font-size: 12px; font-weight: 650;
  text-align: center; text-decoration: none;
}
.deep-bell-q {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.deep-bell-status {
  flex: 0 0 auto; white-space: nowrap; font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint);
}
.deep-bell-status.completed { color: var(--accent-ink); }
.deep-bell-status.failed { color: var(--danger); }

.notifications-view { max-width: 760px; margin: 0 auto; }
.notifications-view .page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 18px;
}
.notifications-view h1 { margin: 4px 0; }
.notifications-view .page-head p { margin: 0; color: var(--ink-soft); }
.notification-list { display: grid; gap: 8px; }
.notification-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; background: var(--sheet); border: 1px solid var(--line);
  border-radius: 9px;
}
.notification-row.dismissed { opacity: .7; }
.notification-open {
  display: grid; gap: 6px; width: 100%; min-width: 0; padding: 13px 15px;
  text-align: left; border: 0; background: none; color: var(--ink);
  cursor: pointer;
}
.notification-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16px;
}
.notification-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--ink-faint); font-size: 11.5px;
}
.notifications-view .pager {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 18px; color: var(--ink-soft); font-size: 12px;
}
@media (max-width: 560px) {
  .notifications-view .page-head { align-items: flex-start; }
  .notifications-view .page-head p { display: none; }
}

.toast-host {
  position: fixed; bottom: 18px; right: 18px; z-index: 70;
  display: grid; gap: 8px; max-width: min(380px, calc(100vw - 36px));
}
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 10px 14px; font-size: 13px; color: var(--ink);
}
.toast button {
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent-ink); border-radius: 7px; padding: 5px 10px;
  font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap;
}

.deep-progress {
  border: 1px solid var(--line); border-radius: 12px; background: var(--sheet);
  padding: 18px 20px; display: grid; gap: 12px;
  width: 100%; min-width: min(380px, 100%); max-width: 720px;
  margin: 0 auto;
  text-align: left; overflow-wrap: break-word; word-break: normal;
}
.deep-progress-summary {
  cursor: pointer; color: var(--ink); font-weight: 650; font-size: 14px;
}
.deep-progress-summary:hover, .deep-progress-summary:focus {
  color: var(--accent-ink);
}
.deep-progress-body { display: grid; gap: 12px; margin-top: 12px; }
.deep-progress-head {
  font-size: 17px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* The Ask card's live line: "Working — 12s" while it runs, then how long it
   took and when it landed. Tabular figures so a ticking second does not
   shuffle the words beside it. */
.deep-progress-status {
  font-size: 13px; font-weight: 650; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.deep-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.deep-step {
  display: grid; grid-template-columns: 16px 1fr; column-gap: 9px;
  align-items: start;
  font-size: 13px; color: var(--ink-soft);
}
/* All wrapping content (label, timestamp, stall pulse) lives in one flex
   child so short labels still keep their timestamp on the same line, and
   only the icon ever sits in its own fixed column - a wrapped label's
   continuation line stays under the label's own start, not under the icon. */
.deep-step-body {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
  min-width: 0;
}
.deep-step-mark {
  flex: none; width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent-ink);
  font-size: 10px; font-style: normal; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(2px);
}
.deep-step.working .deep-step-mark {
  border-top-color: transparent;
  animation: deep-step-spin .9s linear infinite;
}
@keyframes deep-step-spin { to { transform: translateY(2px) rotate(360deg); } }
.deep-step-time {
  color: var(--ink-faint); font-size: 11px; font-variant-numeric: tabular-nums;
}
.deep-step-pulse {
  flex-basis: 100%; color: var(--ink-faint);
  font-size: 11.5px; font-style: italic;
  animation: deep-step-pulse-fade 2.4s ease-in-out infinite;
}
@keyframes deep-step-pulse-fade {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.deep-failure { color: var(--danger); font-size: 13px; }
.deep-cancelled-note { color: var(--ink-soft); font-size: 13px; }
.deep-progress .btn { justify-self: start; }
.deep-actions { display: flex; gap: 9px; }
.deep-offer { margin-top: 12px; display: grid; gap: 6px; justify-items: center; }
.deep-offer span { font-size: 12px; color: var(--ink-faint); max-width: 40ch; }
.compiled .ladder-role {
  flex-basis: 100%; font-size: 11.5px; font-weight: 650; color: var(--accent-ink);
  text-transform: uppercase; letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
  .deep-bell.working::after, .deep-step.working .deep-step-mark,
  .deep-step-pulse { animation: none; }
}

/* Deep Search v2: rung-narrowing overlay, titles, and overflow clamps. */
.results-pane { position: relative; }
.results-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding-top: 72px; gap: 14px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(1.5px);
  font-size: 14px; color: var(--ink-soft);
  border-radius: 12px;
}
.results-overlay-spinner {
  width: 34px; height: 34px; border-radius: 999px;
  border: 3px solid var(--accent-soft); border-top-color: var(--accent);
  animation: deep-step-spin .8s linear infinite;
}
.compiled .q.deep-title {
  display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.compiled .deep-set-note {
  color: var(--ink-soft); font-size: 12.5px; margin-top: 2px;
}
.compiled .ladder-union-note {
  font-size: 12px; color: var(--ink-soft); font-style: italic;
}
.toast span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.thread-row .thread-query { overflow-wrap: anywhere; }
.thread-row .compiled-query code {
  display: block; overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .results-overlay-spinner { animation: none; }
}

/* ---------- footer builder credit + its contact dialog ----------
   The dialog deliberately reuses .terms-dialog-backdrop / .terms-dialog /
   .case-report-dialog so it inherits this app's existing modal shape, both
   themes, and its focus and validation styling. Only the pieces that pattern
   does not already cover are defined here: text inputs (it styles select and
   textarea only) and the footer trigger itself, which stays hidden until
   common.js enables it because the dialog is the only way to use it. */
.foot-built-link {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.foot-built-link:hover {
  color: var(--accent-ink); text-decoration-color: var(--accent);
}
.foot-built-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}
.foot-built-link[hidden] { display: none; }

.site-contact-dialog input[type="email"],
.site-contact-dialog input[type="text"] {
  box-sizing: border-box; width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper); color: var(--ink); padding: 10px 11px;
  font: inherit; min-height: 44px;
}
.site-contact-dialog input[type="email"]:focus,
.site-contact-dialog input[type="text"]:focus {
  border-color: var(--accent); outline: 2px solid var(--accent-soft);
}
.site-contact-dialog input[aria-invalid="true"] { border-color: var(--danger); }
.site-contact-dialog textarea { min-height: 132px; }
.site-contact-dialog .sc-captcha-q { color: var(--ink); }
.site-contact-dialog .sc-note {
  margin: 12px 0 0; color: var(--ink-faint); font-size: 11.5px; line-height: 1.5;
}
.site-contact-trap {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Consent surface for the optional, route-only analytics tag. Inert unless
   /research-analytics.js is enabled by an approved policy bundle. */
.analytics-consent {
  position: fixed;
  z-index: 1000;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  max-width: 64rem;
  margin-inline: auto;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.analytics-consent[hidden] { display: none; }
.analytics-consent h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.analytics-consent p {
  margin: 0;
  max-width: 48rem;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.5;
}
.analytics-consent__actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.analytics-consent button,
.analytics-settings {
  min-height: 2.75rem;
  padding: .62rem .9rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.analytics-consent button.primary {
  background: var(--accent);
  color: var(--sheet);
}
.analytics-consent button:focus-visible,
.analytics-settings:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.analytics-settings {
  position: fixed;
  z-index: 900;
  right: 1rem;
  bottom: 1rem;
  min-height: 2.25rem;
  padding: .4rem .7rem;
  background: var(--sheet);
  font-size: .78rem;
  font-weight: 500;
}
.analytics-settings[hidden] { display: none; }

@media (max-width: 680px) {
  .analytics-consent { grid-template-columns: 1fr; }
  .analytics-consent__actions { width: 100%; }
  .analytics-consent__actions button { flex: 1 1 9rem; }
}

/* ---------- /account — My Subscriptions ---------- */
/* The subscriber's own area: publications received, orders and invoices
   carried over from the previous site, addresses, and account details.
   Same tokens and cards as /profile; the section strip scrolls on phones. */
.account-head { margin-bottom: 10px; }
.account-nav {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 12px;
  margin-bottom: 14px; border-bottom: 1px solid var(--line-soft);
  scrollbar-width: none;
}
.account-nav::-webkit-scrollbar { display: none; }
.account-nav a {
  flex: none; padding: 7px 13px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--sheet); color: var(--ink-soft);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  min-height: 34px; display: inline-flex; align-items: center;
}
.account-nav a:hover { color: var(--accent-ink); border-color: var(--accent); }
.account-nav a[aria-current="page"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .account-nav a[aria-current="page"] { color: #0c1c28; }
}
:root[data-theme="dark"] .account-nav a[aria-current="page"] { color: #0c1c28; }
.account-body { min-width: 0; }
.account-year-filter { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.account-year-filter select {
  min-width: 132px; max-width: 160px; min-height: 44px; padding: 8px 34px 8px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: inherit;
}
.account-list { display: grid; gap: 10px; }
.account-product, .account-order {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--paper); padding: 13px 15px; display: grid; gap: 7px;
  min-width: 0;
}
.account-product-head, .account-order-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; min-width: 0;
}
.account-product h3, .account-order h3 {
  margin: 0; font-size: 17px; font-weight: 650; overflow-wrap: anywhere;
}
.account-order h3 a { color: var(--accent-ink); text-decoration: none; }
.account-order h3 a:hover { text-decoration: underline; }
.account-money { color: var(--money); white-space: nowrap; }
.account-meta {
  color: var(--ink-faint); font-size: 12.5px; display: flex; flex-wrap: wrap;
  gap: 3px 12px; min-width: 0;
}
.account-meta span { overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.issue-list { display: grid; margin-top: 8px; }
.issue-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.issue-row:last-child { border-bottom: 0; }
.issue-row h3 { margin: 0; font-size: 15.5px; font-weight: 650; }
.issue-row .account-actions .btn { padding: 7px 12px; font-size: 13px; }
.invoice .invoice-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.invoice h2 { margin: 6px 0 4px; font-size: 24px; font-weight: 650; }
.invoice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invoice-parties {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px;
  margin: 18px 0; font-size: 14px;
}
.invoice-parties .k {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 5px;
}
.invoice-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.invoice-lines th {
  text-align: left; font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.invoice-lines td {
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.invoice-lines .r { text-align: right; white-space: nowrap; padding-left: 12px; }
.invoice-totals {
  margin: 12px 0 0 auto; max-width: 320px; display: grid; gap: 2px;
  font-size: 14px;
}
.invoice-totals > div {
  display: flex; justify-content: space-between; gap: 16px; padding: 4px 0;
}
.invoice-totals dt { color: var(--ink-soft); }
.invoice-totals dd { margin: 0; }
.invoice-totals .total {
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px;
  font-weight: 600;
}
.invoice-totals .total dd { color: var(--money); }
.address-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.address-form .wide { grid-column: 1 / -1; }
.address-form .form-msg { min-height: 0; }
@media (max-width: 560px) {
  .address-form, .invoice-parties { grid-template-columns: 1fr; }
  .issue-row { grid-template-columns: 1fr; }
  .issue-row .account-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .issue-row .account-actions .btn { text-align: center; }
  .account-product-head { flex-direction: column; gap: 6px; }
  .account-product .account-actions .btn { width: 100%; text-align: center; }
  .invoice-totals { max-width: none; }
}
@media print {
  .shell-header-group, .usage-strip, .account-nav, .account-head,
  .invoice-actions, .app, .toast-host, .deep-bell-menu { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .invoice { box-shadow: none; border: 0; padding: 0; }
  html, body { background: #fff; }
}

/* ---------- Admin → Publications (subscriber issues) ---------- */
.pub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.pub-card {
  display: block; text-decoration: none; color: inherit; min-width: 0;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--sheet); padding: 15px 16px; box-shadow: var(--shadow);
  transition: border-color .15s;
}
.pub-card:hover { border-color: var(--accent); }
.pub-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.pub-card-head strong { font-size: 16.5px; font-weight: 650; }
.pub-section { margin-top: 14px; }
.pub-form { align-items: end; }
.pub-form .pub-file { grid-column: 1 / -1; }
.pub-form input[type="file"] { font: inherit; font-size: 13px; }
.pub-archive { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px; }
.pub-archive a {
  font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; color: var(--ink-soft); text-decoration: none;
  background: var(--paper);
}
.pub-archive a:hover { color: var(--accent-ink); border-color: var(--accent); }
.chip-muted { opacity: .55; }
.newsletter-rows { display: grid; gap: 8px; margin-top: 8px; }
.newsletter-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 14px; flex-wrap: wrap; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.newsletter-row:last-child { border-bottom: 0; }
.newsletter-controls {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.newsletter-controls select { font: inherit; font-size: 12.5px; padding: 5px 26px 5px 7px; border: 1px solid var(--line); border-radius: 7px; background-color: var(--sheet); background-position: right 8px center; color: var(--ink); }
.newsletter-controls label { display: grid; gap: 3px; }
.newsletter-controls input[type="date"] { max-width: 160px; font: inherit; font-size: 12.5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--sheet); color: var(--ink); }
#emailSubscriberSection { min-width: 0; }
#emailSubscriberSection .newsletter-row > div { min-width: 0; overflow-wrap: anywhere; }
#emailSubscriberSection input[type="file"] { max-width: 100%; }
.newsletter-controls .btn { padding: 6px 11px; font-size: 12.5px; }
.filter-row #userPublication {
  font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--sheet); color: var(--ink); max-width: 100%;
}

.newsletter-offer { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.newsletter-choices { border: 0; padding: 0; margin: 1rem 0; min-width: 0; }
.newsletter-choices legend { font-weight: 600; margin-bottom: .5rem; }
.newsletter-choice { display: flex; align-items: center; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.newsletter-choice input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
.newsletter-choice span { flex: 1 1 auto; min-width: 0; }
.newsletter-choice small { display: block; margin-top: .2rem; color: var(--ink-soft); }
.newsletter-choice strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.newsletter-location { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: .75rem; }
#newsletterQuote:not(:empty) { margin-top: 1rem; }
#newsletterQuote .consent-check { margin-bottom: 1rem; }
@media (max-width: 560px) { .newsletter-location { grid-template-columns: 1fr; } }

.newsletter-sales-table { overflow-x: auto; }
.newsletter-sales-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.newsletter-sales-table th, .newsletter-sales-table td { padding: .7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.newsletter-sales-table td small { display: block; overflow-wrap: anywhere; }
.newsletter-log-tools { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
#emailSubscriberForm { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
#emailSubscriberForm .profile-actions { grid-column: 1 / -1; justify-content: flex-start; }
#emailSubscriberForm input, #emailSubscriberForm select { width: 100%; min-width: 0; height: 42px; }
#emailSubscriberSection .btn { white-space: nowrap; }
#emailSubscriberSection .newsletter-find { display: grid; gap: 6px; max-width: 420px; margin: 20px 0 14px; }
#emailSubscriberSection .newsletter-find input { width: 100%; }
@media (max-width: 720px) { #emailSubscriberForm { grid-template-columns: 1fr; } }

.newsletter-purchase-page { max-width: 900px; }
.newsletter-purchase-page .newsletter-offer { margin-top: 0; padding-top: 0; border-top: 0; }

.account-order > .btn { justify-self: start; }

/* ---------- registration: a page, not a phone-width column ---------- */
.auth-wrap--register { max-width: 960px; }
.auth-wrap--register .auth-card { padding: 30px 34px 32px; }
.auth-register { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: 36px; align-items: start; }
.auth-register-side { position: sticky; top: 24px; }
.auth-register-side .eyebrow { margin: 0 0 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 650; }
.auth-register-side h1 { font-size: 28px; font-weight: 650; margin: 0 0 6px; line-height: 1.15; }
.auth-register-side .auth-sub { margin-bottom: 18px; }
.auth-register-side .auth-foot { margin: 22px 0 0; max-width: none; }
.auth-register-side .auth-foot a { color: var(--accent-ink); }
.auth-form--register { gap: 14px; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.auth-form--register .field input, .auth-form--register .field select { padding: 10px 12px; font-size: 14.5px; }
.auth-form--register .field select { padding-right: 34px; }
.auth-form--register .btn { justify-self: start; padding: 11px 22px; font-size: 14.5px; }
@media (max-width: 760px) {
  .auth-register { grid-template-columns: 1fr; gap: 20px; }
  .auth-register-side { position: static; }
  .auth-grid { grid-template-columns: 1fr; }
  .auth-wrap--register .auth-card { padding: 22px 20px 24px; }
}

/* ---------- newsletter checkout: centered, live totals, one column ---------- */
.newsletter-purchase-page { max-width: 880px; margin: 0 auto; }
.newsletter-purchase-page .profile-card { margin: 0; }
.newsletter-offer .billing-note, .newsletter-purchase-page .billing-note { max-width: none; }
.newsletter-group { padding: 14px 0 4px; border-bottom: 1px solid var(--line); }
.newsletter-group:first-child { padding-top: 0; }
.newsletter-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 2px; }
.newsletter-group-head strong { font-size: 15.5px; }
.newsletter-group-head small { color: var(--ink-faint); font-size: 12px; }
.newsletter-group .newsletter-choice { border-bottom: 0; padding: .55rem 0; }
.newsletter-choice--index span { padding-left: 2px; }
.newsletter-choice input { accent-color: var(--accent); }
.newsletter-location { grid-template-columns: minmax(0, 320px); margin: 1.1rem 0 .4rem; }
.newsletter-location .field select { width: 100%; }
.newsletter-coverage { margin: 2px 0 14px; }
.newsletter-note { margin: 0 0 8px; }
.newsletter-totals { margin: 4px 0 6px; }
.newsletter-totals .payment-facts { margin: 8px 0 12px; }
.newsletter-totals .billing-note { margin: 6px 0 0; }
.newsletter-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.newsletter-gate { margin-top: 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 8px; background: var(--accent-soft); }
.newsletter-gate p { margin: 0 0 6px; color: var(--ink); font-size: 14px; }
.newsletter-gate .newsletter-actions { margin-top: 8px; }
.newsletter-gate[hidden], .newsletter-invoice[hidden] { display: none; }
@media (max-width: 560px) { .newsletter-location { grid-template-columns: 1fr; } }
.failed-checkout-title { margin: 26px 0 6px; font-size: 19px; font-weight: 650; }

/* ---------- checkout: three steps, one page ---------- */
.checkout-page { max-width: 880px; margin: 0 auto; }
.checkout-steps {
  display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none;
  margin: 0 0 14px; padding: 0; font-size: 13px; color: var(--ink-faint);
}
.checkout-steps li { display: flex; align-items: center; gap: 8px; }
.checkout-step-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px;
  font-weight: 650; color: var(--ink-faint); background: var(--sheet);
}
.checkout-steps li.on { color: var(--ink); font-weight: 650; }
.checkout-steps li.on .checkout-step-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.checkout-steps li.done .checkout-step-num { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
.checkout-step-link {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0;
  background: none; font: inherit; color: var(--accent-ink); cursor: pointer;
}
.checkout-step-link:hover { text-decoration: underline; }
.checkout-step-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.newsletter-choice--waiting { color: var(--ink-faint); }
.newsletter-choice--waiting input { cursor: not-allowed; }
.checkout-index-rule { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-faint); }
.checkout-section + .checkout-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.checkout-section h2 { font-size: 18px; font-weight: 650; margin: 0 0 4px; }
.checkout-section .newsletter-choices { margin: 10px 0 0; }
.checkout-section .newsletter-group:last-child { border-bottom: 0; }
.checkout-package-choice { border-bottom: 1px solid var(--line-soft); }
.checkout-package-choice:last-child { border-bottom: 0; }
.newsletter-choice input[type="radio"] { border-radius: 999px; }
.newsletter-choice--owned { cursor: default; }
.newsletter-choice--owned input { visibility: hidden; }
.checkout-owned { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; font-size: 13px; margin-left: auto; }
.checkout-owned .pill { flex: 0 0 auto; white-space: nowrap; }
.checkout-owned a { color: var(--accent-ink); }
.checkout-running { color: var(--ink-soft); font-size: 13px; }
.checkout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.checkout-actions .form-msg { flex-basis: 100%; }
.checkout-lines { list-style: none; margin: 6px 0 0; padding: 0; }
.checkout-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.checkout-lines li > span { min-width: 0; }
.checkout-lines li small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 12.5px; }
.checkout-lines strong { flex: 0 0 auto; }
.checkout-edit { margin: 10px 0 0; }
.checkout-providers { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.checkout-provider {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--sheet);
  cursor: pointer; font-size: 14px;
}
.checkout-provider input { margin: 0; accent-color: var(--accent); }
.checkout-provider:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* The account step: one switch line above the ordinary panel, everything
   centred; the registration aside stays on /auth/register only. */
.checkout-account { display: grid; justify-items: center; text-align: center; }
.checkout-account-switch { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-soft); }
.checkout-account-switch a { color: var(--accent-ink); font-weight: 600; }
.checkout-auth-card { padding: 0; margin: 0; border: 0; box-shadow: none; background: transparent; width: 100%; }
.checkout-account .auth-card h1 { text-align: center; }
.checkout-account .auth-card > .auth-sub { text-align: center; }
.checkout-account .auth-form { max-width: 402px; margin: 0 auto; text-align: left; }
.checkout-account--register .auth-form { max-width: 640px; }
.checkout-account .auth-register { display: block; max-width: 640px; margin: 0 auto; }
.checkout-account .auth-register-side { display: none; }
.checkout-account .backlink { margin: 18px 0 0; }
.newsletter-offer-cta { margin: 14px 0 0; }
@media (max-width: 560px) {
  .checkout-lines li { flex-wrap: wrap; }
}