/* JVNW Research prototype — spruce & paper, light-first, both themes. */

:root {
  --paper: #f5f5f1;
  --sheet: #fdfdfb;
  --ink: #1e2823;
  --ink-soft: #55635b;
  --ink-faint: #66736b;
  --line: #dcdfd8;
  --line-soft: #e7e9e2;
  --accent: #2e6b4f;
  --accent-ink: #24543e;
  --accent-soft: #e3ede6;
  --mark: #d9e8dd;
  --money: #7c5c1e;
  --defense: #6b6f68;
  --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: #131917; --sheet: #1b2320; --ink: #e7ebe6; --ink-soft: #a7b3aa;
    --ink-faint: #808e85; --line: #2d3833; --line-soft: #232d28;
    --accent: #63b58c; --accent-ink: #8ccfab; --accent-soft: #21362b;
    --mark: #2a4636; --money: #d3a84c; --defense: #929b93;
    --danger: #d98576; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --paper: #131917; --sheet: #1b2320; --ink: #e7ebe6; --ink-soft: #a7b3aa;
  --ink-faint: #808e85; --line: #2d3833; --line-soft: #232d28;
  --accent: #63b58c; --accent-ink: #8ccfab; --accent-soft: #21362b;
  --mark: #2a4636; --money: #d3a84c; --defense: #929b93;
  --danger: #d98576; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  --paper: #f5f5f1; --sheet: #fdfdfb; --ink: #1e2823; --ink-soft: #55635b;
  --ink-faint: #66736b; --line: #dcdfd8; --line-soft: #e7e9e2;
  --accent: #2e6b4f; --accent-ink: #24543e; --accent-soft: #e3ede6;
  --mark: #d9e8dd; --money: #7c5c1e; --defense: #6b6f68;
  --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%;
}
.serif { font-family: Palatino, "Palatino Linotype", "URW Palladio L", Georgia, serif; }
.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 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in {
  max-width: 980px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: baseline; gap: 10px;
}
.topbar .name { font-size: 17px; font-weight: 500; letter-spacing: .01em; }
.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; }
.topnav { display: inline-flex; gap: 16px; align-items: baseline; }
.topnav a {
  color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 550;
}
.topnav a:hover { color: var(--accent-ink); }
.topbar .est { color: var(--ink-faint); font-size: 12px; }

.wrap { max-width: 980px; margin: 0 auto; padding: 30px 20px 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: #10201a; }
.mode-beta-chip {
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  padding: 1px 6px; margin-left: 4px; font-size: 8.5px; font-weight: 750;
  letter-spacing: .08em; line-height: 1.35; text-transform: uppercase;
  vertical-align: 1px;
}
.modes button.on .mode-beta-chip {
  border-color: currentColor; background: transparent; color: inherit;
}

.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: 6px 2px 0;
  font-variant-numeric: tabular-nums;
}
.ask-counter.over { color: var(--danger); }
.ask-counter.over strong { font-weight: 700; }
.ask-status-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 20px;
}
.search-clear {
  border: 0; background: transparent; color: var(--accent-ink);
  padding: 4px 2px; font: inherit; font-size: 12px; font-weight: 650;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.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; }

.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-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;
}

.controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--ink-soft);
}
.controls label { display: inline-flex; align-items: center; gap: 7px; }
.controls select, .controls .amt {
  border: 1px solid var(--line); background: var(--sheet);
  border-radius: 6px; padding: 5px 8px; font-size: 13.5px;
}
.controls .amt { width: 110px; }
.controls input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.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;
}
.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: flex; flex-wrap: wrap; 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); }
.synonym-label {
  color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.synonym-notice.off .synonym-label { color: var(--ink-faint); }
.synonym-notice .chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.synonym-chip { background: var(--sheet); color: var(--accent-ink); }
.synonym-notice.off .synonym-chip { color: var(--ink-faint); }
.synonym-toggle {
  margin-left: auto; border: 0; border-bottom: 1px solid currentColor;
  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-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);
}
.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,
.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,
.admin-jurisdiction-scope #stateFacets::-webkit-scrollbar { width: 8px; }
.date-facet-options::-webkit-scrollbar-track,
.admin-jurisdiction-scope #stateFacets::-webkit-scrollbar-track { background: transparent; }
.date-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,
.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);
}
.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-head {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin: 0 0 12px; color: var(--ink-soft); font-size: 13.5px;
}
.results-head b { color: var(--ink); font-size: 15px; font-weight: 650; }

.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: 500; 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 .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: #10201a; }
.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-link {
  min-height: 44px; margin: -12px 0; padding: 8px 3px;
  border: 0; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.case-report-link:hover, .case-report-link:focus {
  color: var(--accent-ink); text-decoration-color: currentColor;
}
.report h1 { font-size: 27px; font-weight: 500; 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;
}
.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; max-width: 68ch; }
.rsec .body p { margin: 0 0 10px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.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; }
.member-safe-download-note {
  border-top: 1px solid var(--line-soft); padding-top: 16px;
}
.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: #10201a;
  }
}
:root[data-theme="dark"] .btn:not(.ghost):not(.danger) { color: #10201a; }
.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: 500; margin: 6px 0 4px;
}
.upload-lede {
  max-width: 64ch; color: var(--ink-soft); margin: 0 0 18px;
}
.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-grid label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 12px; }
.upload-grid input, .upload-grid select {
  min-width: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); padding: 9px 10px; color: var(--ink);
  font-size: 14px;
}
.upload-grid input:focus, .upload-grid select:focus { border-color: var(--accent); }
.upload-grid small { color: var(--ink-faint); line-height: 1.4; }
.upload-wide { grid-column: 1 / -1; }
.upload-file input[type="file"] { padding: 8px; max-width: 100%; }
.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; }
.section-head h2 { margin: 0 0 12px; font-size: 20px; font-weight: 500; }
.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: 500; 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) {
  .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; }
}
.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: 500; 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: 500; }
.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: 500; 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: 500; 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; }
.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; }

footer.app {
  max-width: 980px; margin: 0 auto; padding: 0 20px 40px;
  color: var(--ink-faint); font-size: 12px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
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: 500; 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: 500; 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 14px 70px; }
  .results-layout { grid-template-columns: 1fr; gap: 16px; }
  .facets-panel { display: grid; grid-template-columns: minmax(120px, .65fr) minmax(190px, 1.35fr); gap: 14px; }
  .facet-section + .facet-section { border-top: 0; border-left: 1px solid var(--line-soft); margin: 0; padding: 0 0 0 14px; }
  .report { padding: 26px 20px; }
  .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; }
  footer.app { flex-direction: column; }
  .legal-page > h1 { font-size: 31px; }
  .legal-table td:first-child { width: 40%; }
}

@media (max-width: 420px) {
  .facets-panel { grid-template-columns: 1fr; }
  .facet-section + .facet-section {
    border-left: 0; border-top: 1px solid var(--line-soft);
    margin-top: 14px; padding: 14px 0 0;
  }
}

/* ---------- 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; }

/* Understated account-usage line at the right edge of the results head. */
.results-quota { margin-left: auto; color: var(--ink-faint); font-size: 12px; }
.member-mode-banner {
  position: sticky; top: 54px; z-index: 18; 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; }

/* 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;
  }
}
.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: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: 500; margin: 0 0 4px; }
.auth-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 16px; }
.auth-foot { color: var(--ink-faint); font-size: 12px; margin: 16px auto 0; max-width: 40ch; }
.auth-form { display: grid; gap: 12px; }
.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 {
  min-width: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); padding: 9px 10px; color: var(--ink); font-size: 14px;
}
.field input:focus { border-color: var(--accent); }
.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.35;
}
.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); }
.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: 500; margin: 6px 0 0; }
.profile-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
.profile-card { margin-bottom: 0; scroll-margin-top: 70px; }
.profile-card .rsec { margin-top: 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; }

.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: 500;
}
.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: 500; 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; }

.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 { 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: #10201a; }

.research-table-wrap { overflow-x: auto; }
.research-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.research-table th, .research-table td {
  padding: 11px 10px; border-bottom: 1px solid var(--line-soft);
  text-align: left; vertical-align: middle;
}
.research-table th {
  color: var(--ink-faint); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase;
}
.research-table th:first-child { width: 34%; }
.research-table th:nth-child(2) { width: 10%; }
.research-table th:nth-child(3), .research-table th:nth-child(5) { width: 11%; }
.research-table th:nth-child(4) { width: 18%; }
.research-query-button {
  display: block; width: 100%; min-width: 0; padding: 2px 0; border: 0;
  background: transparent; color: var(--ink); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.research-query-button:disabled { color: var(--ink-faint); cursor: default; }
.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); }
.research-history-legacy { margin-top: 24px; color: var(--ink-faint); }
.research-history-legacy h2 { font-size: 17px; font-weight: 500; }
.research-table tr.legacy { opacity: .68; }

@media (max-width: 680px) {
  .research-table, .research-table tbody, .research-table tr,
  .research-table th, .research-table td { display: block; }
  .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 { 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: 500; }
.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); }
.case-report-dialog { width: min(480px, 100%); }
.case-report-dialog h2 {
  margin: 0 0 18px; font-size: 25px; font-weight: 500;
}
.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-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; }
}
@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; }
  .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; max-width: 52ch; }
.specials-list > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 4px 0; border-bottom: 1px dashed var(--line-soft);
}
.specials-list > div:last-child { border-bottom: 0; }
.specials-list dt { margin: 0; }
.specials-list dd { margin: 0; color: var(--money); white-space: nowrap; }

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

/* ------------------------------------------------------------------ */
/* 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-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; }
/* 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; }
.rv-newtab { font-size: 15px; text-decoration: none; padding: 2px 4px; }
.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);
}
/* 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;
  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. */
.controls label[hidden], .btn[hidden],
.deep-bell[hidden], .deep-bell-menu[hidden], .deep-toggle-row[hidden],
.deep-done[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;
  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);
}
.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;
}
/* Compact terminal card above the inline results (sibling of #compiled) —
   the live card's grid takeover ends when results arrive, so this one
   spans the normal content column. */
.deep-done {
  border: 1px solid var(--line); border-radius: 12px; background: var(--sheet);
  padding: 12px 16px; margin: 14px 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: 13px; color: var(--ink-soft);
  overflow-wrap: break-word; word-break: normal;
}
.deep-done .deep-step-mark { transform: translateY(1px); }
.deep-done-title { color: var(--ink); font-weight: 600; }
.deep-done-thread { color: var(--ink-faint); font-size: 12px; }
.deep-done-thread a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.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;
}
.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; }
}