:root {
  color-scheme: light;
  --bg: #e7e8ea;          /* body: medium-light neutral gray */
  --panel: #f4f5f6;       /* header / cards: lighter gray, distinct from body */
  --panel-2: #d8dadc;     /* chips / secondary fills: slightly darker */
  --border: #c8cacd;
  --border-strong: #9aa0a6;
  --ink: #1a1c1e;
  --ink-2: #3c4043;
  --ink-3: #5f6368;
  --ink-4: #8e9398;
  --accent: #FF6B4A;
  --accent-text: #A8341C;   /* text-safe twin of --accent: 6.18:1 on paper */
  --accent-soft: #FAD4CA;
  --good: #2f5d3a;
  --bad: #913030;
  --warn: #8a6c1f;
  --deny: #913030;          /* referenced by templates; was undefined and fell back */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --serif: "Iowan Old Style", "Charter", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --leftnav-w-collapsed: 56px;
  --leftnav-w-expanded: 220px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}

a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover {
  border-bottom-color: var(--accent);
}

/* ── top bar v2: case selector + dropdowns + queue badge ── */
header.topbar {
  display: flex;
  align-items: stretch;
  height: 48px;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar .brand {
  display: flex; align-items: center;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: 1px;
  padding: 0 10px 0 4px;
  font-size: 16px;
}

.topbar .bar-sep {
  width: 1px;
  background: var(--border);
  margin: 10px 6px;
}

.topbar .case-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  margin: 8px 4px 8px 0;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  position: relative;
  user-select: none;
  max-width: 320px;
  min-width: 120px;
}
.topbar .case-pill:hover {
  background: var(--accent-soft);
  border-color: var(--border-strong);
}
.topbar .case-pill .case-current {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}
.topbar .case-pill .case-pill-matter {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.topbar .case-pill .case-pill-matter.case-pill-empty {
  font-style: italic;
  color: var(--ink-3);
  font-weight: 400;
}
.topbar .case-pill .case-pill-id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.topbar .case-pill .caret,
.topbar nav.tabs .tab .caret { color: var(--ink-3); font-size: 9px; margin-left: 5px; flex-shrink: 0; }

.topbar nav.tabs {
  display: flex;
  align-items: stretch;
  margin-left: 8px;
}
.topbar nav.tabs .tab {
  display: flex; align-items: center;
  padding: 0 14px;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  position: relative;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  text-decoration: none;
}
.topbar nav.tabs .tab:hover {
  background: var(--accent-soft);
  border-bottom-color: transparent;
  color: var(--ink);
}
.topbar nav.tabs .tab.active {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.topbar .badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-soft);
  font-size: 11px;
}
.topbar .badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.topbar .badge-count {
  color: var(--accent-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.topbar .bar-spacer { flex: 1; }

.topbar .menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  min-width: 220px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 10;
  display: none;
}
.topbar .menu-right { left: auto; right: 0; min-width: 240px; }
.topbar [data-menu].open > .menu { display: block; }

.topbar .menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.topbar .menu-item:hover {
  background: var(--accent-soft);
  border-bottom-color: transparent;
  color: var(--ink);
}
.topbar .menu-item.muted { color: var(--ink-3); }
.topbar .menu-item .menu-meta {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: 11px;
  font-family: var(--mono);
}
.topbar .menu-section-head {
  padding: 8px 10px 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.topbar .menu-section-head:not(:first-child) {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.topbar .menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* ── Precogs bell + dropdown trigger ──
   Lives as the rightmost item in `<nav class="tabs">`. Hidden by default
   so non-board pages don't show an unwired trigger; precogs.js reveals
   it via [data-precogs-trigger].hidden = false after a successful mount. */
.topbar .tab-precogs {
  position: relative;
  padding: 0 10px;
}
.topbar .precogs-bell { font-size: 16px; }
.topbar .precogs-badge {
  position: absolute;
  top: 6px;
  right: 2px;
  padding: 1px 5px;
  font-size: 10px;
}
.topbar .precogs-menu {
  min-width: 340px;
  max-width: 360px;
  padding: 0;
}

/* ── Left nav (board page only) ──
   Same .topbar markup, re-laid-out as a vertical fixed sidebar.
   Collapsed 56px (icons + initial); hover/focus-within expands to
   220px with floating dropdowns to the right. Other pages keep the
   horizontal topbar via .topbar's default rules above. */
body.left-nav header.topbar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: auto;
  width: var(--leftnav-w-collapsed);
  flex-direction: column;
  align-items: stretch;
  padding: 8px 0;
  border-bottom: none;
  border-right: 1px solid var(--border-strong);
  overflow: visible;
  z-index: 50;
  transition: width 140ms ease-in-out;
}
body.left-nav header.topbar:hover,
body.left-nav header.topbar:focus-within {
  width: var(--leftnav-w-expanded);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
}

/* Push main content right by the collapsed width. Expansion is an
   overlay, so this stays constant. */
body.left-nav main {
  margin-left: var(--leftnav-w-collapsed);
}

/* Brand: square, centered icon when collapsed; full text on hover. */
body.left-nav header.topbar .brand {
  justify-content: center;
  padding: 8px 0;
  font-size: 14px;
  margin-bottom: 4px;
}

/* When canvas/toolbar.js replaces the brand content with a ≡ button
   on board pages, drop the brand's own padding so the button sizes
   to itself and centers in the rail. */
body.left-nav header.topbar .brand.brand-as-toggle {
  padding: 4px 8px;
}
body.left-nav header.topbar .brand.brand-as-toggle .board-toolbar-collapse-btn {
  width: 100%;
  height: 32px;
  font-size: 18px;
}

/* Bar separator hides in left mode (the column gaps do the work). */
body.left-nav header.topbar .bar-sep { display: none; }

/* Case pill: shrink + center; full label appears on expand. */
body.left-nav header.topbar .case-pill {
  margin: 4px 8px;
  padding: 6px 8px;
  max-width: none;
  min-width: 0;
  justify-content: flex-start;
}
body.left-nav header.topbar .case-pill .case-pill-id { display: none; }
body.left-nav header.topbar:hover .case-pill .case-pill-id,
body.left-nav header.topbar:focus-within .case-pill .case-pill-id { display: inline-block; }

/* Vertical tabs. Active state becomes a left-edge accent strip. */
body.left-nav header.topbar nav.tabs {
  flex-direction: column;
  align-items: stretch;
  margin: 8px 0 0;
  gap: 2px;
}
body.left-nav header.topbar nav.tabs .tab {
  padding: 10px 16px;
  border-bottom: none;
  border-left: 3px solid transparent;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
}
body.left-nav header.topbar nav.tabs .tab.active {
  border-bottom: none;
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* Dropdowns open to the right of the nav, not below. */
body.left-nav header.topbar [data-menu] .menu {
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 6px;
  right: auto;
}
body.left-nav header.topbar .menu-right {
  left: 100%;
  right: auto;
}

/* Spacer pushes precogs bell + reviewer-chip to the bottom. */
body.left-nav header.topbar .bar-spacer {
  flex: 1;
  width: auto;
}

/* Precogs bell sits above reviewer-chip, both at the bottom. */
body.left-nav header.topbar .tab-precogs {
  margin: 2px 8px;
  padding: 10px;
  justify-content: center;
}
body.left-nav header.topbar .tab-precogs .precogs-badge {
  top: 2px;
  right: 4px;
}

body.left-nav header.topbar .reviewer-chip {
  margin: 4px 8px 8px;
  align-self: stretch;
  justify-content: center;
  font-size: 11px;
  padding: 4px 6px;
}

/* Icons-only when collapsed; labels + carets reveal on hover/focus. */
body.left-nav header.topbar .tab-label,
body.left-nav header.topbar .case-pill-label,
body.left-nav header.topbar .tab .caret,
body.left-nav header.topbar .case-pill .caret {
  display: none;
}
body.left-nav header.topbar:hover .tab-label,
body.left-nav header.topbar:focus-within .tab-label,
body.left-nav header.topbar:hover .case-pill-label,
body.left-nav header.topbar:focus-within .case-pill-label,
body.left-nav header.topbar:hover .tab .caret,
body.left-nav header.topbar:focus-within .tab .caret,
body.left-nav header.topbar:hover .case-pill .caret,
body.left-nav header.topbar:focus-within .case-pill .caret {
  display: inline-block;
}
body.left-nav header.topbar .tab-icon,
body.left-nav header.topbar .case-pill-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  display: inline-block;
}
body.left-nav header.topbar nav.tabs .tab {
  gap: 10px;
}

/* Board page: main has margin:0 (body.board-page override), so push
   the board canvas right by the collapsed nav width instead. */
body.left-nav.board-page main {
  margin-left: var(--leftnav-w-collapsed);
}

/* Collapsible filter rail (board page only). Overlay expansion so the
   canvas behind it doesn't reflow. */
body.left-nav .board-rail {
  width: 36px;
  overflow: hidden;
  transition: width 140ms ease-in-out;
}
body.left-nav .board-rail:hover,
body.left-nav .board-rail:focus-within {
  width: 232px;
  overflow-y: auto;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 30;
}
body.left-nav .board-rail .rail-section {
  padding: 12px 6px;
  text-align: center;
}
body.left-nav .board-rail .rail-section > *:not(.rail-section-icon) {
  display: none;
}
body.left-nav .board-rail .rail-section-icon {
  font-size: 16px;
  color: var(--ink-3);
  height: 22px;
  line-height: 22px;
}
body.left-nav .board-rail:hover .rail-section,
body.left-nav .board-rail:focus-within .rail-section {
  padding: 12px 14px;
  text-align: left;
}
body.left-nav .board-rail:hover .rail-section > *,
body.left-nav .board-rail:focus-within .rail-section > * {
  display: revert;
}
body.left-nav .board-rail:hover .rail-section-icon,
body.left-nav .board-rail:focus-within .rail-section-icon {
  display: none;
}

/* ── Left-nav refinements ──
   Three follow-up fixes on top of the body.left-nav block above:
   - Tighten padding so the collapsed strips read narrower.
   - Force inner widgets (#theoryDraftList etc.) inside .rail-section
     to hide in the collapsed state. The display:none on the parent
     section's direct children lost a specificity battle to per-widget
     ID rules (e.g. #theoryDraftList { display: flex }) — winning back
     with !important is the surgical fix.
   - Collapse the reviewer-chip to a tiny key icon when the nav is
     collapsed so "unauthenticated" doesn't truncate mid-word. */

body.left-nav header.topbar nav.tabs .tab {
  padding: 9px 12px;
}
body.left-nav header.topbar .case-pill {
  margin: 4px 6px;
  padding: 6px 6px;
}
body.left-nav .board-rail {
  width: 28px;
}
body.left-nav .board-rail .rail-section {
  padding: 10px 4px;
}

body.left-nav .board-rail .rail-section > *:not(.rail-section-icon) {
  display: none !important;
}
body.left-nav .board-rail:hover .rail-section > *,
body.left-nav .board-rail:focus-within .rail-section > * {
  display: revert !important;
}
body.left-nav .board-rail:hover .rail-section-icon,
body.left-nav .board-rail:focus-within .rail-section-icon {
  display: none !important;
}

/* Reviewer chip: show a small key icon when collapsed, full label
   reveals on hover/focus-within (same pattern as the tabs). The chip
   markup is just a <span>...</span> with no children to hide, so we
   collapse it visually via a pseudo-element + text-indent trick. */
body.left-nav header.topbar .reviewer-chip {
  font-size: 0;
  padding: 4px 6px;
  position: relative;
  border: none;
  background: transparent;
}
body.left-nav header.topbar .reviewer-chip::before {
  content: "⚿";
  font-size: 14px;
  color: var(--ink-3);
}
body.left-nav header.topbar:hover .reviewer-chip,
body.left-nav header.topbar:focus-within .reviewer-chip {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
}
body.left-nav header.topbar:hover .reviewer-chip::before,
body.left-nav header.topbar:focus-within .reviewer-chip::before {
  content: none;
}

.reviewer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  align-self: center;
  margin: 0 4px;
}

/* ── chunk-review brief ── */
.review-brief {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  margin: 8px 0 18px;
  border-radius: 3px;
}
.review-brief-empty {
  background: var(--panel);
  border-left-color: var(--border-strong);
}
.review-brief-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent-text);
  font-weight: 700;
}
.review-brief-empty .review-brief-label { color: var(--ink-3); }
.review-brief p {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
}
.review-brief code {
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 12px;
}

/* ── entities list ── */
.entity-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.entity-group h2.entity-type {
  font-family: var(--serif);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin: 0 0 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.entity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 24px;
}
.entity-list li {
  padding: 3px 0;
  font-size: 13px;
  break-inside: avoid;
}

/* ── law search results ── */
.law-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.law-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.law-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.law-card header a, .law-card .law-cite {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-text);
}
.law-card .law-meta {
  font-size: 11px;
  letter-spacing: 0.02em;
}
.law-card h3 {
  margin: 6px 0 4px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}
.law-card .law-body {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}
.reviewer-chip form {
  display: inline;
}
.reviewer-chip button {
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.reviewer-chip button:hover { color: var(--accent-text); }

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px;
}

h1.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 4px 0 14px;
  color: var(--ink);
}

h1.section-title .case-id {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  font-weight: normal;
  margin-left: 10px;
}

.subtle {
  color: var(--ink-3);
  font-size: 12px;
}

.priority-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
  width: fit-content;
}
.priority-tabs a {
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  border-right: 1px solid var(--border);
  background: transparent;
}
.priority-tabs a:last-child { border-right: none; }
.priority-tabs a:hover { background: var(--panel-2); border-bottom: none; }
.priority-tabs a.active {
  background: var(--ink);
  color: var(--bg);
}

table.queue {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  font-size: 13px;
}
table.queue th {
  text-align: left;
  padding: 8px 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-strong);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
table.queue td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.queue tr:last-child td { border-bottom: none; }
table.queue tr:hover td { background: var(--panel-2); }
table.queue td.bates {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  max-width: 320px;
  word-break: break-all;
}
table.queue td.text-cell {
  max-width: 460px;
}
.empty {
  padding: 28px;
  text-align: center;
  color: var(--ink-3);
  background: var(--panel);
  border: 1px dashed var(--border-strong);
}

.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.review-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  padding: 14px 16px;
}
.panel h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--ink-2);
}

.panel.player audio,
.panel.player video {
  width: 100%;
  max-height: 320px;
  margin-top: 4px;
  background: #000;
}

.transcript-text {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--panel-2);
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  margin: 8px 0;
}

.kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px 14px;
  font-size: 12px;
}
.kv dt {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kv dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
}

.alternates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}
.alternates .alt {
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

form.decision-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choice-row {
  display: flex;
  gap: 8px;
}
.choice-row label {
  flex: 1;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  user-select: none;
}
.choice-row input[type=radio] {
  display: none;
}
.choice-row input[type=radio]:checked + span {
  color: var(--accent-text);
}
.choice-row label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}
.choice-row label.deny:has(input:checked) {
  background: #f4e3e3;
  border-color: var(--bad);
  color: var(--bad);
}
.choice-row label.unsure:has(input:checked) {
  background: #f1ecdf;
  border-color: var(--warn);
  color: var(--warn);
}

label.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

input[type=text],
input[type=password],
select,
textarea {
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--ink);
  border-radius: 0;
}
textarea {
  min-height: 64px;
  resize: vertical;
}
input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fffdfb;
}

label.field.comment-required textarea {
  border-color: var(--warn);
  background: #fdfbf4;
}
label.field.comment-required .subtle {
  color: var(--warn);
}

.btn {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
}
.btn:hover { background: #000; }
.btn.secondary {
  background: var(--panel);
  color: var(--ink);
}
.btn.secondary:hover { background: var(--panel-2); }
.btn.ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--border-strong);
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 64px;
}

details.new-identity summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  list-style: none;
  padding: 4px 0;
}
details.new-identity summary::-webkit-details-marker { display: none; }
details.new-identity[open] summary { color: var(--accent-text); }
details.new-identity .form-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

#new-identity-status {
  font-size: 12px;
  font-family: var(--mono);
}
#new-identity-status.ok { color: var(--good); }
#new-identity-status.err { color: var(--bad); }

.cluster-card {
  font-size: 13px;
}
.cluster-card .letter {
  display: inline-block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--accent-text);
  margin-right: 8px;
}

.tag {
  display: inline-block;
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 2px;
  background: var(--panel-2);
  color: var(--ink-3);
  border: 1px solid var(--border);
}
.tag.approve { background: #e3eee5; color: var(--good); border-color: #a9c3ad; }
.tag.deny    { background: #f1d8d8; color: var(--bad); border-color: #c69b9b; }
.tag.unsure  { background: #f1ead2; color: var(--warn); border-color: #c8b88a; }

.session-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin: 18px 0;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  padding: 16px;
}
.landing-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.landing-blurb {
  background: var(--panel);
  border-left: 3px solid var(--accent);
  padding: 16px 18px;
}
.landing-blurb h2 {
  font-family: var(--serif);
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 500;
}
.landing-blurb p { margin: 0; color: var(--ink-2); font-size: 13px; }
.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: var(--mono);
}
.recent-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
}
.recent-list li:last-child { border-bottom: none; }

.error-page {
  max-width: 640px;
  margin: 80px auto;
  padding: 30px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  text-align: center;
}
.error-page .status {
  font-family: var(--mono);
  font-size: 64px;
  color: var(--accent-text);
  margin: 0;
  line-height: 1;
}
.error-page .message {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin: 12px 0 22px;
}

.diff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 960px) {
  .review-grid, .diff-row, .landing-grid { grid-template-columns: 1fr; }
  .side-panel { position: static; }
}

/* ── Case Board explorer ─────────────────────────────────────────────────── */

.crumb {
  font-size: 12px;
  font-family: var(--mono);
  margin: 0 0 6px;
  color: var(--ink-3);
}

.case-switch {
  margin: 0 0 14px;
}
.case-switch .field { max-width: 420px; }

/* The honesty strip — what the machine has and has not done. */
.panel.honesty { padding: 16px 18px; }
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.stat-num {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--ink-2);
}
.stat-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.stat.good .stat-num { color: var(--ink); }
.stat.zero .stat-num { color: var(--ink-4); }
.stat.zero .stat-label { color: var(--ink-4); }
.honesty-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Search box (board + search page). */
.explore-search {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.explore-search input[type=text] {
  flex: 1;
  font-size: 15px;
}

.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.board-main { display: flex; flex-direction: column; gap: 18px; }
.board-side { display: flex; flex-direction: column; gap: 18px; }

/* People — speaker clusters. */
.person-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.person-card:last-child { border-bottom: none; }
.person-card:hover { border-bottom-color: var(--border); background: var(--panel-2); }
.person-card .letter,
.section-title .letter {
  display: inline-block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--accent-text);
  flex: none;
}
.person-card.mini .letter { font-size: 18px; }
.person-body { display: flex; flex-direction: column; gap: 2px; }
.person-name { font-weight: 500; }
.singletons { margin-top: 12px; }
.singletons summary {
  cursor: pointer;
  font-size: 12px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.singletons[open] summary { color: var(--accent-text); }
.singletons .person-card.mini { padding: 6px 0; }

/* Source viewer — linear passage list. */
.source-kv dd.path {
  font-size: 11px;
  color: var(--ink-3);
  word-break: break-all;
}
.src-chunks {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  background: var(--panel);
}
.src-chunk {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 110px;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  align-items: start;
}
.src-chunk:last-child { border-bottom: none; }
.src-chunk:hover { background: var(--panel-2); }
.src-chunk-gutter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}
.src-chunk-gutter code {
  font-size: 11px;
  color: var(--ink-3);
}
.src-chunk-text {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
}
.src-chunk-go {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
}
.src-chunk:hover .src-chunk-go { color: var(--accent-text); }

/* Connection pivot. */
.pivot-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.pivot-focus {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 64px;
}
.pivot-conns { display: flex; flex-direction: column; gap: 18px; }

/* Connection result cards — shared across pivot, search, person views. */
.result-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px;
}
.result-card {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--ink);
}
.result-card:hover {
  border-color: var(--accent);
  background: #fffdfb;
}
.result-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.result-src {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  word-break: break-all;
}
.result-head .sim-badge {
  margin-left: auto;
  flex: none;
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: 2px;
}
.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-bottom: 5px;
}
.result-meta code { font-size: 11px; color: var(--ink-3); }
.result-text {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.result-bates {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  word-break: break-all;
}

/* Honest empty slot for a connection type not built yet. */
.panel.not-yet {
  border-style: dashed;
  background: var(--panel-2);
}
.panel.not-yet h2 { color: var(--ink-3); }
.panel.not-yet .tag {
  vertical-align: middle;
  margin-left: 4px;
}

@media (max-width: 960px) {
  .board-grid, .pivot-grid { grid-template-columns: 1fr; }
  .pivot-focus { position: static; }
  .src-chunk { grid-template-columns: 1fr; gap: 6px; }
  .src-chunk-go { text-align: left; }
}

/* ── Case-theory board ───────────────────────────────────────────────────── */

body.board-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
body.board-page main {
  flex: 1;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.board-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-strong);
  min-height: 44px;
}
/* Tighter buttons inside the toolbar — global .btn padding (8px 14px)
   is too generous when 11 buttons share the row. Scoped here so other
   surfaces' buttons are unaffected. */
.board-toolbar .btn { padding: 6px 10px; font-size: 12px; }
.voice-status {
  flex: 0 1 auto;
  max-width: 240px;
  font-size: 11px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-status[data-kind="error"] { color: #b34646; }
.board-toolbar-spacer { flex: 1; }
.board-search {
  width: 220px;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  font-family: var(--sans);
}
.board-search:focus { outline: none; border-color: var(--accent); }
.btn.ghost.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.board-app { flex: 1; min-height: 0; display: flex; }

/* Left rail */
.board-rail {
  width: 232px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.rail-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.rail-section h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-2);
}
.filter-row:hover { background: var(--panel-2); }
.filter-row.active { background: var(--accent-soft); color: var(--accent-text); }
.filter-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.filter-dot.sq { border-radius: 2px; }
.filter-label { flex: 1; }
.filter-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  background: var(--panel-2);
  border-radius: 8px;
  padding: 0 6px;
  min-width: 20px;
  text-align: center;
}
.filter-row.active .filter-count { background: var(--panel); color: var(--accent-text); }
.rail-add {
  margin-top: 8px;
  width: 100%;
  padding: 6px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--ink-3);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
}
.rail-add:hover { border-color: var(--accent); color: var(--accent-text); }
.rail-empty { font-size: 11.5px; color: var(--ink-4); font-style: italic; }
.theory-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  border-radius: 3px;
  margin-bottom: 7px;
}
.theory-card .theory-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.theory-card .theory-summary {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-top: 2px;
}
.theory-card .theory-actions { display: flex; gap: 8px; margin-top: 6px; }
.theory-card .theory-actions button {
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 10.5px;
  font-family: var(--mono);
  cursor: pointer;
  padding: 0;
}
.theory-card .theory-actions button:hover { color: var(--accent-text); }
.rail-legend { display: flex; flex-direction: column; gap: 4px; }
.legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.legend-line { width: 22px; height: 2px; flex: none; }
.legend-line.dashed {
  height: 0;
  background: none !important;
  border-top: 2px dashed currentColor;
}
.rail-tips { font-size: 11px; color: var(--ink-3); line-height: 1.7; }

/* Canvas */
.board-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  cursor: grab;
}
.board-wrap.panning { cursor: grabbing; }
.board-wrap.linking { cursor: crosshair; }
.board-pan {
  position: absolute;
  top: 0; left: 0;
  width: 6000px; height: 4500px;
  transform-origin: 0 0;
}
.board-conns {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.conn-line {
  stroke-width: 2;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}
.conn-line:hover { stroke-width: 3.5; }
.conn-label-bg { fill: var(--panel); stroke-width: 1; }
.conn-label-text {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  pointer-events: none;
}

/* Cards */
.board-card {
  position: absolute;
  width: 230px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  z-index: 10;
  overflow: hidden;
  transition: box-shadow 0.12s, border-color 0.12s, opacity 0.15s;
}
.board-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); z-index: 20; }
.board-card.selected {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
  border-color: var(--accent);
  z-index: 30;
}
.board-card.dragging { cursor: grabbing; box-shadow: var(--shadow-md); }
.board-card.link-first { box-shadow: 0 0 0 2px var(--warn), var(--shadow-md); }
.board-card.dim { opacity: 0.3; }
.board-card.kind-note { background: #fbf7ec; }
.board-card.kind-theory { background: #ecf3f3; }
.board-card.kind-theory .bc-deftype {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  padding: 1px 5px;
  border-radius: 2px;
}
.bc-theory-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.bc-theory-pct {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  min-width: 32px;
}
.bc-theory-bar {
  flex: 1;
  height: 4px;
  background: var(--panel-2);
  border-radius: 2px;
  overflow: hidden;
}
.bc-theory-fill { height: 100%; transition: width 0.2s; }
.bc-theory-status {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.bc-theory-status.status-agreed    { color: var(--good); }
.bc-theory-status.status-dismissed { color: var(--bad); }
.bc-theory-status.status-unsure    { color: var(--warn); }

/* Theory inspector */
.insp-theory-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.insp-theory-pct {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.insp-theory-bar {
  flex: 1;
  height: 6px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
}
.insp-theory-fill { height: 100%; transition: width 0.2s; }
.insp-narrative {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--panel-2);
  padding: 10px 12px;
  border-radius: 3px;
}
.insp-theory-status {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-3);
}
.insp-theory-status.status-agreed    { color: var(--good); }
.insp-theory-status.status-dismissed { color: var(--bad); }
.insp-theory-status.status-unsure    { color: var(--warn); }
.insp-mag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: auto;
}
.insp-mag.mag-small  { background: var(--ink-4); }
.insp-mag.mag-medium { background: var(--ink-3); }
.insp-mag.mag-large  { background: var(--ink-2); }
.insp-weight-rationale {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
  margin-left: 4px;
  font-style: italic;
}
.board-card.kind-argument { background: #f6ece6; }
.bc-strip { height: 4px; width: 100%; }
.bc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px 3px;
}
.bc-chip {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  padding: 2px 6px;
  border-radius: 2px;
}
.bc-exhibit {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-left: auto;
  word-break: break-all;
  text-align: right;
}
.bc-body { padding: 3px 11px 7px; }
.bc-title { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.bc-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.bc-summary { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; margin-top: 4px; }
.bc-authority {
  font-size: 11px;
  color: var(--accent-text);
  font-style: italic;
  margin-top: 5px;
  line-height: 1.35;
}
.bc-tags { padding: 0 11px 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.bc-tag {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 9px;
  border: 1px solid currentColor;
}
.bc-footer {
  padding: 5px 11px;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
}
.kind-note .bc-footer, .kind-argument .bc-footer { background: rgba(0,0,0,0.03); }
.bc-adm {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 9.5px;
}
.bc-anchor, .bc-links { font-family: var(--mono); color: var(--ink-3); }
.bc-anchor { color: var(--accent-text); }

/* Zoom + toast + picker */
.board-zoom {
  position: absolute;
  bottom: 14px; right: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 3px;
  z-index: 50;
}
.board-zoom button {
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 15px;
  cursor: pointer;
  border-radius: 3px;
}
.board-zoom button:hover { background: var(--panel-2); color: var(--accent-text); }
.board-toast {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 4px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.2s, top 0.2s;
  pointer-events: none;
}
.board-toast.show { opacity: 1; top: 20px; }
.conn-picker {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 500;
  min-width: 200px;
  display: none;
}
.conn-picker.show { display: block; }
.conn-picker-head {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--ink-4);
  padding: 3px 8px 6px;
}
.cp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink);
}
.cp-opt:hover { background: var(--panel-2); }
.cp-line { width: 18px; height: 2px; flex: none; }
.cp-line.dashed { height: 0; background: none !important; border-top: 2px dashed currentColor; }

/* Theory drafts (B3) — LLM-proposed defense theories awaiting triage */
.draft-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
  transition: opacity 0.15s, border-color 0.15s;
  cursor: default;
}
.draft-card.status-agreed    { border-left-color: var(--good);   opacity: 0.85; }
.draft-card.status-dismissed { border-left-color: var(--bad);    opacity: 0.55; }
.draft-card.status-unsure    { border-left-color: var(--warn);   opacity: 0.85; }
.draft-card:hover { border-color: var(--border-strong); }
.draft-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.draft-deftype {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink-3);
  padding: 2px 6px;
  border-radius: 2px;
}
.draft-status {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--ink-3);
}
.draft-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.draft-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.draft-pct {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  min-width: 32px;
}
.draft-bar {
  flex: 1;
  height: 5px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
}
.draft-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s;
}
.draft-uncal {
  font-size: 9px;
  font-family: var(--mono);
  color: var(--warn);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.draft-counts {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--ink-3);
}
.draft-helps { color: var(--good); }
.draft-hurts { color: var(--bad); }
.draft-counts .draft-expand {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.draft-counts .draft-expand:hover { color: var(--accent-text); }
.draft-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.draft-narrative {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.45;
  white-space: pre-wrap;
}
.draft-triage-note {
  margin-top: 6px;
  padding: 5px 7px;
  background: var(--panel-2);
  font-size: 11px;
  color: var(--ink-2);
  border-radius: 2px;
}
.draft-actions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.draft-actions .btn { padding: 4px 8px; font-size: 11px; flex: 1; }

/* Subgraph overlay — hold-A then click a theory card */
.conn-line.subgraph {
  fill: none;
  stroke-linecap: round;
  pointer-events: stroke;
  opacity: 0.75;
}
.conn-line.subgraph:hover { opacity: 1; }
.subgraph-x-bg {
  cursor: pointer;
  stroke: var(--panel);
  stroke-width: 2;
  transition: r 0.1s;
}
.subgraph-x-bg:hover { r: 13; }
.subgraph-x {
  fill: #fff;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.subgraph-hint {
  fill: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* When A is held, theory cards visually advertise the subgraph affordance. */
body.subgraph-arm .board-card.kind-theory {
  cursor: crosshair;
  box-shadow: 0 0 0 3px rgba(26, 94, 96, 0.45), var(--shadow-md);
}

/* Card highlight when hovering a draft (in the rail OR on canvas).
   Important: force opacity to 1 so the highlight reads even on cards
   that were dimmed by the active filter set. */
.board-card.draft-helps {
  box-shadow: 0 0 0 4px var(--good), 0 0 14px 4px rgba(47, 93, 58, 0.35),
              var(--shadow-md);
  border-color: var(--good);
  opacity: 1 !important;
  z-index: 25;
}
.board-card.draft-hurts {
  box-shadow: 0 0 0 4px var(--bad), 0 0 14px 4px rgba(145, 48, 48, 0.35),
              var(--shadow-md);
  border-color: var(--bad);
  opacity: 1 !important;
  z-index: 25;
}

/* Ghost-line suggestions (B2) — proposed edges drawn dashed/half-opacity */
.conn-line.ghost {
  opacity: 0.45;
  stroke-width: 1.6;
  transition: opacity 0.12s;
}
.conn-line.ghost:hover { opacity: 0.9; stroke-width: 2.4; }
.conn-label-bg.ghost { fill: var(--panel); opacity: 0.75; }
.conn-label-text.ghost { opacity: 0.75; font-weight: 600; }

/* Ghost-triage popover — uses .conn-picker shell with extra rows */
.conn-picker .gp-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  padding: 0 8px 4px;
}
.conn-picker .gp-reason {
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}
.conn-picker .gp-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  font-size: 11px;
  color: var(--ink-2);
  text-align: center;
}
.conn-picker .gp-pair > div:nth-child(2) {
  color: var(--ink-4);
  font-family: var(--mono);
}
.conn-picker .gp-actions {
  display: flex;
  gap: 6px;
  padding: 6px 8px 4px;
  border-top: 1px solid var(--border);
}
.conn-picker .gp-actions .btn { flex: 1; padding: 6px 10px; font-size: 12px; }

/* Inspector */
.board-inspector {
  width: 404px;
  flex: none;
  background: var(--panel);
  border-left: 1px solid var(--border-strong);
  overflow-y: auto;
  transition: margin-right 0.2s;
  position: relative;
}
/* Sit above the fixed "Findings" pill (z-index 1200) ONLY when a card is
   open, so the inspector's close button isn't buried under the pill. When
   empty the panel still occupies the right edge (it slides out via the
   negative margin below, not display:none), so we must NOT raise it then —
   otherwise it would cover the pill and steal its clicks. :not(.empty)
   scopes the lift to the open state; closed → pill (z1200) wins again. */
.board-inspector:not(.empty) { z-index: 1250; }
.board-inspector.empty { margin-right: -404px; }
.insp-head {
  padding: 16px 18px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.insp-close {
  position: absolute;
  top: 8px; right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-4);
  cursor: pointer;
  line-height: 1;
}
.insp-close:hover { color: var(--ink); }
.insp-kind {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 2px;
  margin-bottom: 8px;
}
.insp-title {
  width: 100%;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 4px;
}
.insp-title:hover { border-color: var(--border); }
.insp-title:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.insp-row { padding: 11px 18px; border-bottom: 1px solid var(--border); }
.insp-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.insp-row label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 5px;
}
.insp-hint { font-weight: 400; letter-spacing: 0; text-transform: none; }
.insp-row input, .insp-row textarea, .insp-row select {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--ink);
  border-radius: 3px;
}
.insp-row textarea { min-height: 56px; resize: vertical; line-height: 1.5; }
.insp-row input:focus, .insp-row textarea:focus, .insp-row select:focus {
  outline: none;
  border-color: var(--accent);
}
.insp-muted { font-size: 12px; color: var(--ink-3); font-style: italic; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  border: 1px solid var(--border-strong);
  background: var(--panel);
  padding: 4px 9px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
}
.insp-anchor {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 8px 10px;
}
.insp-anchor-row { font-size: 12px; font-weight: 600; color: var(--accent-text); }
.insp-anchor-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 4px;
  word-break: break-all;
}
.insp-clip { width: 100%; margin-top: 8px; background: #000; border-radius: 2px; max-height: 200px; }
.insp-custody { display: flex; flex-direction: column; gap: 4px; }
.custody-row {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.custody-row .custody-at { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.insp-conns { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.insp-conn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 8px;
  cursor: pointer;
}
.insp-conn:hover { border-color: var(--border-strong); }
.insp-conn-rel {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  padding: 2px 5px;
  border-radius: 2px;
  flex: none;
}
.insp-conn-title { flex: 1; font-size: 12px; color: var(--ink); }
.insp-conn-del { background: none; border: none; color: var(--ink-4); font-size: 14px; cursor: pointer; }
.insp-conn-del:hover { color: var(--bad); }
.insp-actions { display: flex; gap: 8px; }

/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 25, 22, 0.5);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.modal-header h2 { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.modal-body { padding: 14px 18px; }
.modal-body label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 12px 0 5px;
}
.modal-body label:first-child { margin-top: 0; }
.modal-body input, .modal-body textarea, .modal-body select {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--ink);
  border-radius: 3px;
}
.modal-body input:focus, .modal-body textarea:focus, .modal-body select:focus {
  outline: none;
  border-color: var(--accent);
}
.modal-body textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
.modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ==========================================================================
   Charge model — the prosecution's checklist (/charges)
   ========================================================================== */

/* --- shared button extensions --------------------------------------------- */
.btn.small {
  padding: 3px 9px;
  font-size: 11px;
}
.btn.danger { color: #fff; background: var(--bad); }
.btn.danger:hover { background: #7a2828; }
.btn.ghost.danger { color: var(--bad); background: transparent; }
.btn.ghost.danger:hover { background: var(--accent-soft); color: var(--bad); }

/* --- toolbar -------------------------------------------------------------- */
.charges-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-strong);
}
.charges-caption { display: flex; flex-direction: column; gap: 2px; }
.charges-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.charges-toolbar .case-id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.charges-toolbar-spacer { flex: 1; }

/* --- empty state ---------------------------------------------------------- */
.charges-empty {
  max-width: 540px;
  margin: 60px auto;
  padding: 22px 26px;
  text-align: center;
  color: var(--ink-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.charges-empty strong { color: var(--ink); }

/* --- tab strip ------------------------------------------------------------ */
.charge-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-strong);
}
.charge-tab {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 15px 7px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-align: left;
}
.charge-tab:hover { background: var(--panel-2); }
.charge-tab.active { border-bottom-color: var(--accent); }
.charge-tab-name {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-2);
}
.charge-tab.active .charge-tab-name { color: var(--accent-text); }
.charge-tab-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
}

/* --- charge panel --------------------------------------------------------- */
.charge-panel { display: none; padding: 20px 22px 40px; }
.charge-panel.active { display: block; }

.charge-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.charge-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.charge-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.charge-statute { font-family: var(--mono); color: var(--ink-3); }
.charge-defendant { color: var(--ink-3); }
.charge-status {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 2px;
}
.charge-status.status-draft { background: var(--panel-2); color: var(--ink-3); }
.charge-status.status-reviewed { background: #e3ede4; color: var(--good); }
.charge-actions { display: flex; gap: 7px; flex-shrink: 0; }

/* --- element checklist ---------------------------------------------------- */
.element-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.element-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.element-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
}
.element-handle { display: flex; flex-direction: column; gap: 1px; }
.element-move {
  width: 18px;
  height: 13px;
  padding: 0;
  font-size: 8px;
  line-height: 1;
  color: var(--ink-4);
  background: var(--panel-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.element-move:hover { color: var(--accent-text); border-color: var(--border-strong); }
.element-pos {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  min-width: 16px;
  text-align: right;
}
.element-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  cursor: text;
  padding: 2px 4px;
  border-radius: 2px;
}
.element-text:hover { background: var(--panel-2); }
.element-text.editing {
  background: #fff;
  outline: 2px solid var(--accent);
  cursor: text;
}
.element-source {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 2px;
}
.element-source.source-llm { background: var(--accent-soft); color: var(--accent-text); }
.element-source.source-attorney { background: var(--panel-2); color: var(--ink-3); }
.element-stance-select {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 4px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
}
.element-stance-select.stance-contested { color: var(--accent-text); border-color: var(--accent); }
.element-stance-select.stance-conceded { color: var(--good); }
.element-review-badge {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 2px;
  min-width: 64px;
  text-align: center;
}
.element-review-badge.decision-approve { background: #e3ede4; color: var(--good); }
.element-review-badge.decision-deny { background: #f1dada; color: var(--bad); }
.element-review-badge.decision-unsure { background: #f0e6cd; color: var(--warn); }
.element-review-badge.decision-none { background: var(--panel-2); color: var(--ink-4); }
.element-expand {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 13px;
  color: var(--ink-3);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
}
.element-expand:hover { color: var(--accent-text); }

/* --- element review panel ------------------------------------------------- */
.element-review-panel {
  padding: 12px 13px 13px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-rationale {
  padding: 8px 11px;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 2px 2px 0;
}
.review-rationale-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}
.review-rationale p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.review-decision-buttons { display: flex; gap: 6px; margin-bottom: 7px; }
.review-comment {
  width: 100%;
  min-height: 52px;
  padding: 7px 9px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--panel);
  resize: vertical;
}
.review-comment:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.review-comment.needs-comment { border-color: var(--bad); outline: 2px solid var(--bad); }
.review-hint { margin: 5px 0 0; font-size: 11px; }
.review-history { font-size: 12px; color: var(--ink-2); }
.review-current { margin: 0 0 3px; }
.review-current-comment {
  margin: 0 0 7px;
  font-style: italic;
  color: var(--ink-3);
}
.review-timeline {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline-entry {
  padding: 6px 9px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left-width: 2px;
  border-radius: 0 2px 2px 0;
}
.timeline-entry.decision-approve { border-left-color: var(--good); }
.timeline-entry.decision-deny { border-left-color: var(--bad); }
.timeline-entry.decision-unsure { border-left-color: var(--warn); }
.timeline-decision {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.timeline-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-left: 8px; }
.timeline-comment { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.element-panel-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

/* --- add element ---------------------------------------------------------- */
.add-element {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.add-element-input {
  flex: 1;
  padding: 8px 11px;
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--panel);
}
.add-element-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.charge-empty {
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  background: var(--panel-2);
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
}
.charge-empty p { margin: 0; }

/* --- re-draft proposal modal --------------------------------------------- */
.redraft-list {
  margin: 10px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.redraft-list li { padding-left: 4px; }
.redraft-text { display: block; font-size: 13px; color: var(--ink); line-height: 1.45; }
.redraft-rationale {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}

/* --- toast ---------------------------------------------------------------- */
.charges-toast {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 9px 18px;
  font-size: 12.5px;
  color: var(--bg);
  background: var(--ink);
  border-radius: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: top 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}
.charges-toast.show { top: 16px; opacity: 1; }
.charges-toast.bad { background: var(--bad); }
.charges-toast.warn { background: var(--warn); }

/* --- reasoning layer: routes to win --------------------------------------- */
.routes-to-win {
  margin-bottom: 14px;
  padding: 11px 13px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
}
.rtw-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.rtw-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-text);
}
.rtw-weakest { font-size: 13px; color: var(--ink); line-height: 1.5; }
.rtw-weakest strong { color: var(--accent-text); }
.rtw-unmapped { font-family: var(--mono); font-size: 10.5px; color: var(--warn); }
.rtw-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rtw-route {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left-width: 2px;
  border-radius: 0 2px 2px 0;
}
.rtw-route.route-live { border-left-color: var(--accent); }
.rtw-route.route-maybe { border-left-color: var(--border-strong); }
.rtw-route-pos {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  min-width: 14px;
  text-align: right;
}
.rtw-route-text { flex: 1; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.rtw-route-class {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 2px;
}
.rtw-route-class.class-live { background: var(--accent-soft); color: var(--accent-text); }
.rtw-route-class.class-maybe { background: var(--panel-2); color: var(--ink-3); }
.rtw-route-score { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.rtw-route-unmapped {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 2px;
  background: #f0e6cd;
  color: var(--warn);
}

/* --- reasoning layer: element proof / attack badges ----------------------- */
.element-proof-badge,
.element-attack-badge,
.element-unmapped-badge {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.element-proof-badge.proof-unproven,
.element-attack-badge.attack-unproven { background: var(--panel-2); color: var(--ink-4); }
.element-proof-badge.proof-weak,
.element-attack-badge.attack-weak { background: #f0e6cd; color: var(--warn); }
.element-proof-badge.proof-moderate,
.element-attack-badge.attack-moderate { background: var(--accent-soft); color: var(--accent-text); }
.element-proof-badge.proof-strong,
.element-attack-badge.attack-strong { background: #e3ede4; color: var(--good); }
.element-unmapped-badge { background: #f1dada; color: var(--bad); }

/* --- reasoning layer: linked-evidence section ----------------------------- */
.linked-evidence {
  border-top: 1px dashed var(--border);
  padding-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.linked-evidence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.linked-evidence-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.linked-evidence-actions { display: flex; gap: 6px; }
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.link-empty { font-size: 12px; padding: 4px 2px; }
.link-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.link-row[data-source="llm"] { border-left: 2px solid var(--accent); }
.link-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-relation-select,
.link-strength-select {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 4px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
}
.link-relation-select.relation-supports { color: var(--good); border-color: #a9c3ad; }
.link-relation-select.relation-undermines { color: var(--bad); border-color: #c69b9b; }
.link-strength-select.strength-strong { color: var(--accent-text); border-color: var(--accent); }
.link-card-title { flex: 1; font-size: 12.5px; color: var(--ink); min-width: 120px; }
.link-card-kind {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
.link-source {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 2px;
}
.link-source.source-llm { background: var(--accent-soft); color: var(--accent-text); }
.link-source.source-attorney { background: var(--panel-2); color: var(--ink-3); }
.link-review-badge {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 2px;
}
.link-review-badge.decision-approve { background: #e3ede4; color: var(--good); }
.link-review-badge.decision-deny { background: #f1dada; color: var(--bad); }
.link-review-badge.decision-unsure { background: #f0e6cd; color: var(--warn); }
.link-review-badge.decision-none { background: var(--panel-2); color: var(--ink-4); }
.link-note {
  font-size: 12px;
  color: var(--ink-2);
  cursor: text;
  padding: 2px 4px;
  border-radius: 2px;
  align-self: flex-start;
}
.link-note:hover { background: var(--panel-2); }
.link-note.editing { background: #fff; outline: 2px solid var(--accent); }
.link-rationale { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.link-rationale-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  margin-right: 4px;
}
.link-review-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.link-review-buttons { display: flex; gap: 6px; }
.link-review-comment {
  width: 100%;
  min-height: 42px;
  padding: 6px 8px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--panel);
  resize: vertical;
}
.link-review-comment:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.link-review-comment.needs-comment { border-color: var(--bad); outline: 2px solid var(--bad); }

/* ── Chat drawer (migration 044) ─────────────────────────────────────────── */

.chat-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: 90vw;
  background: var(--panel);
  border-left: 1px solid var(--border-strong);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transform: translateX(100%);
  transition: transform 180ms ease-out;
}
.chat-drawer.open { transform: translateX(0); }
.chat-drawer[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.chat-title {
  flex: 1;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
}
.chat-close {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}
.chat-close:hover { color: var(--accent-text); background: var(--accent-soft); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-empty {
  color: var(--ink-3);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 24px 12px;
}

.chat-msg {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 2px;
}
.chat-msg.assistant {
  align-self: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--ink);
  border-bottom-left-radius: 2px;
}
.chat-msg .chat-body { white-space: pre-wrap; }
.chat-msg .chat-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-4);
  font-family: var(--mono);
}
.chat-msg.user .chat-meta { color: rgba(255, 255, 255, 0.75); }

.chat-thinking {
  margin-bottom: 6px;
  font-size: 12px;
}
.chat-thinking summary {
  cursor: pointer;
  color: var(--ink-3);
  font-style: italic;
  user-select: none;
}
.chat-thinking summary:hover { color: var(--accent-text); }
.chat-thinking pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--ink-2);
  max-height: 240px;
  overflow-y: auto;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.chat-form textarea {
  flex: 1;
  resize: none;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  line-height: 1.4;
}
.chat-form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.chat-form textarea:disabled { background: var(--panel-2); color: var(--ink-4); }
.chat-form .btn { align-self: flex-end; }

.chat-status {
  padding: 0 14px 10px;
  font-size: 12px;
  min-height: 18px;
  color: var(--ink-3);
}
.chat-status.pending { color: var(--warn); font-style: italic; }
.chat-status.error   { color: var(--bad); }

/* ── Case-chat additions (migration 068) — citation chips + panels ──────── */

.cc-cite {
  display: inline-block;
  padding: 0 5px;
  margin: 0 1px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: 3px;
  cursor: pointer;
  vertical-align: baseline;
  text-decoration: none;
  line-height: 1.4;
}
.cc-cite:hover  { background: var(--accent); color: #fff; }
.cc-cite.active { background: var(--accent); color: #fff; }

.cc-citation-panel {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.cc-citation-panel[hidden] { display: none; }
.cc-citation-panel .cc-cp-head {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.cc-citation-panel .cc-cp-marker {
  font-weight: 700;
  color: var(--accent-text);
}
.cc-citation-panel .cc-cp-bates { color: var(--ink-3); }
.cc-citation-panel .cc-cp-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--ink);
}
.cc-citation-panel .cc-cp-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cc-citation-panel .cc-cp-actions .cc-spacer { flex: 1; }

/* Empty/refusal states inside the case-chat log. */
.chat-msg.assistant.cc-refusal {
  border-style: dashed;
  color: var(--ink-3);
  font-style: italic;
}

/* Per-citation feedback (step 10) — thumbs + comment inside cc-cp-actions. */
.cc-fb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.cc-fb-btns {
  display: flex;
  gap: 6px;
}
.cc-fb-btn {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  color: var(--ink-2);
}
.cc-fb-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.cc-fb-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}
.cc-fb-btn:disabled { opacity: 0.5; cursor: wait; }

.cc-fb-comment {
  width: 100%;
  min-height: 38px;
  padding: 4px 6px;
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink);
  resize: vertical;
}
.cc-fb-comment:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.cc-fb-status {
  min-height: 14px;
  font-size: 11px;
  color: var(--ink-3);
}
.cc-fb-status.pending { color: var(--warn); font-style: italic; }
.cc-fb-status.error   { color: var(--bad); }
.cc-fb-status.saved   { color: var(--accent-text); }

/* Pin-to-board button + toast (step 11). */
.cc-pin-btn {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}
.cc-pin-btn:hover    { border-color: var(--accent); }
.cc-pin-btn:disabled { opacity: 0.5; cursor: wait; }

.cc-toast {
  position: absolute;
  margin-top: -28px;
  margin-left: 8px;
  padding: 4px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  font-size: 12px;
  opacity: 0.95;
  transition: opacity 700ms ease-out;
  pointer-events: none;
}
.cc-toast.error { background: var(--bad); }
.cc-toast.cc-toast-fade { opacity: 0; }

/* Privileged-hits-suppressed badge under an assistant bubble.
   Hover for the explainer tooltip. */
.cc-priv-badge {
  margin-top: 6px;
  padding: 3px 8px;
  display: inline-block;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--warn);
  background: var(--panel-2);
  border: 1px dashed var(--warn);
  border-radius: 3px;
  cursor: help;
}

/* ── wiretap browse extensions ── */
.wt-facets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.wt-facet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
}
.wt-facet-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  min-width: 7.5rem;
}
.wt-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.wt-chip:hover { background: var(--panel-2); }
.wt-chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.wt-chip-n {
  font-size: 10px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.wt-chip.active .wt-chip-n { color: var(--bg); opacity: 0.7; }
.wt-thread-header td {
  background: var(--panel-2);
  font-size: 12px;
  padding: 6px 8px;
  border-top: 2px solid var(--border-strong);
}
.wt-sms-gap {
  font-style: italic;
  font-size: 11px;
}

/* ── wiretap dead-air ── */
.wt-dead-air { opacity: 0.5; }
.wt-dead-air-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-3);
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 2px;
  margin-right: 6px;
  text-transform: uppercase;
}

/* ── sms body ── */
.wt-sms-body {
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
details.wt-sms-body summary {
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
details.wt-sms-body summary::-webkit-details-marker { display: none; }
details.wt-sms-body summary::after {
  content: " [more]";
  font-size: 10px;
  color: var(--ink-3);
  font-family: var(--mono);
}
details.wt-sms-body[open] summary::after {
  content: " [less]";
}
.wt-sms-body-full {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 6px 8px;
  background: var(--panel-2);
  border-left: 2px solid var(--border-strong);
}
.wt-sms-dir {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 2px;
  margin-right: 6px;
  text-transform: uppercase;
}
.wt-sms-out { background: var(--panel-2); color: var(--ink-2); }
.wt-sms-in  { background: var(--ink-4); color: var(--bg); }
.wt-sms-cp {
  font-family: var(--mono);
  font-size: 11px;
  margin-right: 6px;
}
.wt-sms-cp code { color: var(--ink-2); }
.wt-sms-system td { opacity: 0.55; }

/* ── Voice log drawer (voice-driven case-board, 2026-05-24) ──────────────── */

.voice-log-drawer { width: 380px; }

.voice-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
}

.voice-log-entry {
  padding: 6px 10px;
  border-radius: 8px;
  word-wrap: break-word;
}
.voice-log-entry .voice-log-kind {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.voice-log-entry.transcript {
  align-self: flex-end;
  max-width: 88%;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 2px;
}
.voice-log-entry.transcript .voice-log-kind { color: rgba(255, 255, 255, 0.75); }

.voice-log-entry.reply {
  align-self: flex-start;
  max-width: 88%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--ink);
  border-bottom-left-radius: 2px;
}

.voice-log-entry.mutation {
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.voice-log-entry.mutation.failed { color: var(--bad); }

.voice-log-entry.error {
  align-self: stretch;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--bad);
  background: var(--accent-soft);
  border: 1px solid var(--bad);
}

/* Restored-history marker — separates persisted entries from new ones. */
.voice-log-marker {
  align-self: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  padding: 4px 0;
  opacity: 0.7;
}

/* Clear-log button injected into the voice-log drawer header by voice.js. */
.voice-log-drawer .voice-log-clear {
  margin-left: auto;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-2);
  font-size: 11.5px;
  cursor: pointer;
}
.voice-log-drawer .voice-log-clear:hover {
  background: var(--panel-2);
  color: var(--ink);
}

/* ===== /faces review grid (Phase C) ====================================
 * Paralegal cluster-identity review surface. Mirrors the board / chat
 * panel + btn vocabulary so the page feels at-home next to /board.
 */

.faces-summary {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}

.faces-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 8px 0 14px;
  flex-wrap: wrap;
}
.faces-filters .filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.faces-filters .filter-row label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--ink);
}
.faces-filters .filter-row select {
  font: inherit;
  padding: 4px 6px;
}

.faces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 6px 0;
}

.faces-card {
  background: var(--panel);
  border: 1px solid #ccd0d4;
  border-radius: 6px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
.faces-card.faces-card-focused {
  border-color: #4a6b8a;
  box-shadow: 0 0 0 2px rgba(74, 107, 138, 0.18);
}
.faces-card.decided.decision-approved {
  border-left: 4px solid var(--good, #2f7a3a);
}
.faces-card.decided.decision-denied {
  border-left: 4px solid var(--bad, #a02f2f);
}
.faces-card.decided.decision-unsure {
  border-left: 4px solid var(--warn, #aa8400);
}

.faces-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.faces-card-head .cluster-id {
  font-weight: 600;
  color: var(--ink);
}
.faces-card-head .member-count {
  font-size: 11.5px;
}

.faces-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.faces-shots a {
  position: relative;
  display: block;
  background: var(--panel-2);
  border-radius: 4px;
  overflow: hidden;
}
.faces-shots img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}
.faces-shots .shot-label {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.faces-shots .shot-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  background: var(--panel-2);
  font-size: 11px;
  color: #666;
  border-radius: 4px;
}

.faces-suggestion {
  font-size: 12.5px;
  line-height: 1.4;
}
.faces-suggestion .reason {
  font-size: 11px;
  margin-top: 4px;
}
.faces-suggestion .conf {
  font-size: 11px;
}

.faces-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  border: 1px solid #c8cccf;
}
.faces-tag.tier-high {
  background: #e3eee5;
  color: var(--good, #2f7a3a);
  border-color: #a9c3ad;
}
.faces-tag.tier-med {
  background: #f1ead2;
  color: var(--warn, #aa8400);
  border-color: #c8b88a;
}
.faces-tag.tier-none {
  background: var(--panel-2);
  color: #555;
}

.faces-decision-badge {
  background: var(--panel-2);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11.5px;
  color: var(--ink);
}
.faces-card.decision-approved .faces-decision-badge {
  background: #e3eee5;
  color: var(--good, #2f7a3a);
}
.faces-card.decision-denied .faces-decision-badge {
  background: #f1d8d8;
  color: var(--bad, #a02f2f);
}
.faces-card.decision-unsure .faces-decision-badge {
  background: #f1ead2;
  color: var(--warn, #aa8400);
}

.faces-card-error {
  background: #f1d8d8;
  color: var(--bad, #a02f2f);
  border: 1px solid #c69b9b;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11.5px;
}

.faces-card-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faces-card-form .picker-label {
  font-size: 11.5px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.faces-card-form .identity-picker {
  font: inherit;
  padding: 4px 6px;
  width: 100%;
}
.faces-card-form .comment-box {
  font: inherit;
  padding: 5px 6px;
  resize: vertical;
  width: 100%;
  font-size: 12px;
}

.faces-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.faces-action-btn {
  flex: 1;
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--panel-2);
  color: var(--ink);
}
.faces-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.faces-action-btn.btn-approve {
  background: #e3eee5;
  color: var(--good, #2f7a3a);
  border-color: #a9c3ad;
}
.faces-action-btn.btn-approve:hover:not(:disabled) {
  background: #cfe3d3;
}
.faces-action-btn.btn-deny {
  background: #f1d8d8;
  color: var(--bad, #a02f2f);
  border-color: #c69b9b;
}
.faces-action-btn.btn-deny:hover:not(:disabled) {
  background: #e8c0c0;
}
.faces-action-btn.btn-unsure {
  background: #f1ead2;
  color: var(--warn, #aa8400);
  border-color: #c8b88a;
}
.faces-action-btn.btn-unsure:hover:not(:disabled) {
  background: #e8dcb6;
}

.faces-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0 8px;
}

/* ── Board-chat suggested additions panel ───────────────────────────────── */

.btc-additions-panel {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-2);
  font-size: 12px;
}

.btc-additions-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.btc-additions-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.btc-additions-row:last-child { margin-bottom: 0; }

.btc-add-card {
  font-size: 11px;
  padding: 2px 7px;
  white-space: nowrap;
  color: var(--accent-text);
  border-color: var(--accent);
  flex-shrink: 0;
}
.btc-add-card:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.btc-add-card--done {
  color: var(--good, #3a7d44);
  border-color: var(--good, #3a7d44);
  cursor: default;
}

.btc-additions-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 600;
}

.btc-additions-snippet {
  font-size: 11.5px;
  color: var(--ink-3);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

/* ── Board-chat gated-write proposal ("proposed action" card) ───────────── */

.btc-pending-write {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--warn, #c8b88a);
  border-left: 3px solid var(--warn, #aa8400);
  border-radius: 4px;
  background: var(--panel-2);
  font-size: 12px;
}

.btc-pending-write-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--warn, #aa8400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.btc-pending-write-row {
  margin-bottom: 3px;
  line-height: 1.35;
}
.btc-pending-write-row:last-child { margin-bottom: 0; }

.btc-pending-write-label {
  font-weight: 600;
  color: var(--ink-3);
}
.btc-pending-write-value {
  color: var(--ink-2);
}

.btc-pending-write-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.btc-pending-write-approve {
  font-size: 11px;
  padding: 3px 9px;
  flex-shrink: 0;
}

.btc-pending-write-dismiss {
  font-size: 11px;
  color: var(--ink-3);
  text-decoration: underline;
}
.btc-pending-write-dismiss:hover { color: var(--ink-2); }

.btc-pending-write-msg {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.btc-pending-write-msg.error {
  color: var(--bad, #a02f2f);
}

.btc-pending-write--done {
  border-color: var(--good, #3a7d44);
  border-left-color: var(--good, #3a7d44);
}
.btc-pending-write--done .btc-pending-write-header {
  color: var(--good, #3a7d44);
}


/* ==========================================================================
   MDB — APPLE / SWISS VISUAL LAYER
   Drop-in restyle. APPEND this whole block to the END of
   src/mdb/web/static/app.css. Nothing is deleted; every override mirrors an
   existing selector verbatim, so equal specificity + later source order make
   this layer win via the cascade. No HTML, class, id, or data-* changes.
   Recoloring :root cascades into the canvas/*.css (board) and the four inline
   <style> templates automatically, since they all read var(--*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · TOKENS  (a second :root; overrides the original block at app.css L1–22)
   All ORIGINAL token names are kept (values refined) so every existing
   var(--bg/--panel/--ink/--accent/…) reference is safe. New tokens are additive.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;               /* native controls + scrollbars follow theme */

  /* Surfaces — near-monochrome, a hair warm so the brown accent sits calmly */
  --bg:            #f5f4f2;                /* app canvas */
  --panel:         #ffffff;               /* cards, header, menus — lifts off --bg */
  --panel-2:       #ececea;               /* chips, table headers, secondary fills */
  --panel-3:       #f3f2f0;               /* inset / subtle wash (new) */

  /* Hairlines */
  --border:        #e4e2de;               /* 1px hairline */
  --border-strong: #cfccc6;               /* emphasized divider / control border */

  /* Ink ramp (text) */
  --ink:   #1d1d1f;                        /* primary */
  --ink-2: #3a3a3c;                        /* headings, strong body */
  --ink-3: #6b6b70;                        /* secondary / labels (AA on white) */
  --ink-4: #98989d;                        /* tertiary / placeholder */

  /* Accent — the brand warm brown (hue unchanged) */
  --accent:        #FF6B4A;
  --accent-hover:  #FF8468;
  --accent-press:  #E5553A;
  --accent-soft:   #FAD4CA;                /* 25% coral wash over paper */
  --accent-ink:    #0E0E10;                /* ink on a coral fill: 6.84:1 (white was 2.82:1) */

  /* Status + soft tints (soft tints are NEW; base values preserved) */
  --good: #2f6b3d;  --good-soft: #e8efe9;
  --bad:  #93302f;  --bad-soft:  #f4e4e2;
  --warn: #8a6c1f;
  --deny: #913030;  --warn-soft: #f2ecdc;   /* --deny was referenced by templates and never defined */

  /* Primary button (tokenized so both themes + hover are controlled) */
  --btn-bg:       #1d1d1f;
  --btn-bg-hover: #000000;
  --btn-ink:      #f5f4f2;

  /* Control fills (replace the #fffdfb / #fdfbf4 literals) */
  --field-bg:       #ffffff;
  --field-focus-bg: #fffdfb;

  /* Typography */
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Charter", Georgia, serif;   /* display headings ONLY */
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale (off a 14px base) + rhythm */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-28: 28px;
  --lh-tight: 1.25; --lh-body: 1.5; --lh-loose: 1.6;
  --tracking-tight: -0.01em;               /* serif display headings */
  --tracking-caps:  0.06em;                /* mono micro-labels */

  /* Spacing — 4px grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;

  /* Radius — crisp, ~8–10px */
  --radius-sm:   8px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* Elevation — soft, low (no heavy drop shadows) */
  --shadow-1: 0 1px 2px rgba(17,17,17,.05), 0 1px 3px rgba(17,17,17,.06);
  --shadow-2: 0 6px 20px rgba(17,17,17,.10), 0 2px 6px rgba(17,17,17,.06);

  /* Focus ring — accessible, accent-tinted */
  --ring: 0 0 0 3px rgba(139,58,31,.35);

  /* Motion — calm, fast */
  --motion-fast: 120ms;
  --motion:      160ms;
  --ease: cubic-bezier(.2,.6,.2,1);

  /* Layout (unchanged) */
  --leftnav-w-collapsed: 56px;
  --leftnav-w-expanded:  220px;
}

/* --------------------------------------------------------------------------
   2 · DARK THEME
   Auto-follows the OS UNLESS the root is force-lit ([data-theme="light"]),
   and can be force-set with [data-theme="dark"]. Needs NO markup: with no
   attribute present it simply follows prefers-color-scheme.
   (If you'd rather NOT auto-follow the OS until the non-core status-tint
    literals get their dark pass — see notes — delete just the @media wrapper
    below and keep the [data-theme="dark"] rule.)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:            #171614;
    --panel:         #201f1d;
    --panel-2:       #2b2a27;
    --panel-3:       #262523;
    --border:        #34322e;
    --border-strong: #47443f;
    --ink:   #f2f1ee;
    --ink-2: #cbc9c4;
    --ink-3: #9c9992;
    --ink-4: #6f6c66;
    --accent:        #FF6B4A;              /* brand coral — the same fill light mode uses */
    --accent-text:   #FF6B4A;              /* dark: coral IS legible as text (6.42:1 on --bg), so it equals --accent */
    --accent-hover:  #FF8A6D;              /* ink label on this fill: 8.36:1 */
    --accent-press:  #E5553A;              /* brand pressed coral; ink label 5.23:1 */
    --accent-soft:   #3A1D15;              /* deep coral-tinted fill; body ink on it 13.61:1 */
    --accent-ink:    #0E0E10;              /* ink ON a coral fill: 6.84:1 (white would be 2.82:1 — never use it) */
    --good: #6cc07f;  --good-soft: #1e2c22;
    --bad:  #e08a86;  --bad-soft:  #331f1e;
    --warn: #d8b64e;  --warn-soft: #2e2a19;
    --btn-bg:       #f2f1ee;
    --btn-bg-hover: #ffffff;
    --btn-ink:      #1d1d1f;
    --field-bg:       #201f1d;
    --field-focus-bg: #26241f;
    --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.50);
    --shadow-2: 0 8px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.40);
    --ring: 0 0 0 3px rgba(217,138,95,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #171614;
  --panel:         #201f1d;
  --panel-2:       #2b2a27;
  --panel-3:       #262523;
  --border:        #34322e;
  --border-strong: #47443f;
  --ink:   #f2f1ee;
  --ink-2: #cbc9c4;
  --ink-3: #9c9992;
  --ink-4: #6f6c66;
  --accent:        #FF6B4A;              /* brand coral — the same fill light mode uses */
  --accent-text:   #FF6B4A;              /* dark: coral IS legible as text (6.42:1 on --bg), so it equals --accent */
  --accent-hover:  #FF8A6D;              /* ink label on this fill: 8.36:1 */
  --accent-press:  #E5553A;              /* brand pressed coral; ink label 5.23:1 */
  --accent-soft:   #3A1D15;              /* deep coral-tinted fill; body ink on it 13.61:1 */
  --accent-ink:    #0E0E10;              /* ink ON a coral fill: 6.84:1 (white would be 2.82:1 — never use it) */
  --good: #6cc07f;  --good-soft: #1e2c22;
  --bad:  #e08a86;  --bad-soft:  #331f1e;
  --warn: #d8b64e;  --warn-soft: #2e2a19;
  --btn-bg:       #f2f1ee;
  --btn-bg-hover: #ffffff;
  --btn-ink:      #1d1d1f;
  --field-bg:       #201f1d;
  --field-focus-bg: #26241f;
  --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.50);
  --shadow-2: 0 8px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.40);
  --ring: 0 0 0 3px rgba(217,138,95,.45);
}

/* --------------------------------------------------------------------------
   3 · GLOBAL BASE REFINEMENTS
   -------------------------------------------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft); color: var(--ink); }

a {
  color: var(--accent-text);
  transition: color var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease);
}
a:hover { color: var(--accent-hover); border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   4 · FOCUS — visible, accessible, keyboard-only (no ring on mouse press)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.menu-item:focus-visible,
.case-pill:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--ring);
}
input[type=text]:focus-visible,
select:focus-visible,
textarea:focus-visible { box-shadow: var(--ring); }

/* --------------------------------------------------------------------------
   5 · BUTTONS  (mirrors .btn + all variants at app.css L917–938, L2241–2248)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease);
}
.btn:hover  { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn:active { transform: translateY(0.5px); }

.btn.secondary        { background: var(--panel); color: var(--ink); border-color: var(--border-strong); }
.btn.secondary:hover  { background: var(--panel-2); border-color: var(--border-strong); }

.btn.ghost            { background: transparent; color: var(--ink-2); border-color: var(--border-strong); }
.btn.ghost:hover      { background: var(--panel-2); }

.btn.small            { padding: var(--space-1) var(--space-3); font-size: var(--fs-11); border-radius: var(--radius-sm); }

.btn.danger           { color: var(--panel); background: var(--bad); border-color: var(--bad); }
.btn.danger:hover     { background: color-mix(in srgb, var(--bad) 86%, #000);
                        border-color: color-mix(in srgb, var(--bad) 86%, #000); }
.btn.ghost.danger       { color: var(--bad); background: transparent; border-color: var(--border-strong); }
.btn.ghost.danger:hover { background: var(--bad-soft); color: var(--bad); }

/* --------------------------------------------------------------------------
   6 · TOP NAV  (case-pill, tabs, badge, menus — mirrors L76–232)
   Additive props only (radius/transition/shadow); layout untouched so the
   body.left-nav variant (higher specificity) keeps its rail geometry.
   -------------------------------------------------------------------------- */
.topbar .case-pill {
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease);
}
.topbar .case-pill:hover { background: var(--accent-soft); border-color: var(--border-strong); }

.topbar nav.tabs .tab {
  transition: background var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease);
}
.topbar nav.tabs .tab:hover        { background: var(--accent-soft); color: var(--ink); }
.topbar nav.tabs .tab.active       { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }

.topbar .badge { border-radius: var(--radius-pill); background: var(--accent-soft); }

.topbar .menu {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-1);
  box-shadow: var(--shadow-2);
}
.topbar .menu-item {
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease);
}
.topbar .menu-item:hover { background: var(--accent-soft); color: var(--ink); }
.topbar .menu-sep,
.topbar .menu-section-head:not(:first-child) { border-color: var(--border); }

/* --------------------------------------------------------------------------
   7 · PANELS / CARDS  (mirrors .panel + .panel h2 at L765–776)
   Softer hairline + subtle lift + crisp radius = the Swiss card.
   -------------------------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-1);
}
.panel h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-2);
  margin: 0 0 var(--space-3);
}
.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.transcript-text {
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   8 · FORMS & INPUTS  (mirrors L886–915)
   Deliberately rounds inputs (originally border-radius:0) per the brief's
   crisp-corner direction, and re-tokenizes the #fffdfb / #fdfbf4 focus fills.
   -------------------------------------------------------------------------- */
input[type=text],

.gap-row,
.row-gap { background: var(--bad-soft, #f4e4e2); }
.gap-row td,
.row-gap td { border-top-color: var(--deny); }
input[type=password],
select,
textarea {
  font-family: var(--sans);
  font-size: var(--fs-14);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  background: var(--field-bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease),
              background var(--motion-fast) var(--ease);
}
input[type=text]::placeholder,
textarea::placeholder { color: var(--ink-4); }

input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--field-focus-bg);
  box-shadow: var(--ring);
}

label.field.comment-required textarea {
  border-color: var(--warn);
  background: var(--warn-soft);
}

/* --------------------------------------------------------------------------
   9 · SEGMENTED CHOICE CONTROL  (mirrors .choice-row at L842–873)
   Re-tokenizes the #f4e3e3 / #f1ecdf checked tints so dark mode holds.
   -------------------------------------------------------------------------- */
.choice-row label {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease);
}
.choice-row label:hover { background: var(--panel-2); }
.choice-row label:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text);
}
.choice-row label.deny:has(input:checked) {
  background: var(--bad-soft);  border-color: var(--bad);  color: var(--bad);
}
.choice-row label.unsure:has(input:checked) {
  background: var(--warn-soft); border-color: var(--warn); color: var(--warn);
}

/* --------------------------------------------------------------------------
   10 · TABLES / QUEUES  (mirrors table.queue at L709–743)
   separate + overflow:hidden lets the outer corners round; inner hairlines
   keep the Swiss ledger feel.
   -------------------------------------------------------------------------- */
table.queue {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--fs-13);
}
table.queue th {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-strong);
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-3);
}
table.queue td        { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
table.queue tr:hover td { background: var(--panel-3); }

/* --------------------------------------------------------------------------
   11 · SHARED REVIEW CHIPS  (mirrors .tag.* at L998–1000)
   Re-pointed to soft-status tokens so these theme correctly (they appear on
   queue/review surfaces, hence included in the core layer).
   -------------------------------------------------------------------------- */
.tag.approve { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.tag.deny    { background: var(--bad-soft);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.tag.unsure  { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

.alternates .alt { border-radius: var(--radius-pill); }

/* --------------------------------------------------------------------------
   12 · REDUCED MOTION — honor the OS accessibility setting
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ===================== end MDB Apple/Swiss visual layer ===================== */

/* dark-mode inline-attr overrides */
/* --------------------------------------------------------------------------
   3 · DARK-MODE STRAGGLERS  (appended 2026-07-23)
   Fixes hard-coded light backgrounds / dark text / grey borders that live in
   inline style="" attributes across templates, plus the two canvas panels that
   ship with no dark handling. Scoped to dark ONLY (light mode untouched) and
   mirrored across BOTH dark triggers because nothing stamps data-theme on boot:
     · @media (prefers-color-scheme: dark)  → OS-dark, no manual toggle
     · :root[data-theme="dark"]             → manual toggle on a light OS
   Inline-attr rules carry !important (an inline style beats any selector).
   Canvas class rules do NOT: canvas/*.css loads AFTER app.css, so the
   :root[data-theme=…] / :root:not([data-theme="light"]) prefix is what wins the
   cascade on specificity — adding !important there would be gratuitous.
   Excludes the 4 inline-<style> templates handled separately
   (onboard/drives, onboard/identity, chat_thread, review_cluster_identity).
   -------------------------------------------------------------------------- */

/* ========== 3a · INLINE-ATTR OVERRIDES (templates) — need !important ========== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* light card / panel / dropdown backgrounds → surfaces */
    & [style*="background:#fff;"],
    & [style$="background:#fff"],
    & [style*="background:white"]        { background: var(--panel) !important; }
    & [style*="background:#f4f4f4"],
    & [style*="background:#f7f7f7"],
    & [style*="background:#fafafa"],
    & [style*="background:#fafaf6"],
    & [style*="background:#f7f5ef"],
    & [style*="background:#f6f6f6"]       { background: var(--panel-2) !important; }
    /* status-tinted banners → soft status fills */
    & [style*="background:#f4faf6"],
    & [style*="background:#e3eee5"],
    & [style*="background:#edf7ed"]       { background: var(--good-soft) !important; }
    & [style*="background:#fff7f7"],
    & [style*="background:#fff8f8"],
    & [style*="background:#fdecea"],
    & [style*="background:#fff5f5"]       { background: var(--bad-soft) !important; }
    & [style*="background:#fffbf2"],
    & [style*="background:#fff4d9"]       { background: var(--warn-soft) !important; }
    & [style*="background:#fff8ef"],
    & [style*="background:#fff3e0"]       { background: var(--accent-soft) !important; }
    /* hard dark text → ink ramp */
    & [style*="color:#222"],
    & [style*="color:#1a1a1a"]            { color: var(--ink) !important; }
    & [style*="color:#333"],
    & [style*="color:#444"]               { color: var(--ink-2) !important; }
    & [style*="color:#555"],
    & [style*="color:#666"],
    & [style*="color:#777"],
    & [style*="color:#888"],
    & [style*="color:#999"]               { color: var(--ink-3) !important; }
    /* status text */
    & [style*="color:#1a7f37"]            { color: var(--good) !important; }
    & [style*="color:#cf222e"],
    & [style*="color:#a04040"],
    & [style*="color:#b00"]               { color: var(--bad) !important; }
    & [style*="color:#b8651d"],
    & [style*="color:#7a3e00"],
    & [style*="color:#669"]               { color: var(--accent-text) !important; }
    /* neutral grey borders → hairline (border-color keeps width/style) */
    & [style*="solid #ccc"],
    & [style*="solid #d0d0d0"],
    & [style*="solid #ddd"],
    & [style*="dashed #ddd"],
    & [style*="solid #e3e3e3"],
    & [style*="dashed #e6dfcc"],
    & [style*="solid #e3ddc8"],
    & [style*="solid #d4cdb8"]            { border-color: var(--border) !important; }
    /* semantic banner borders */
    & [style*="solid #2e7d32"],
    & [style*="solid #a9c3ad"]            { border-color: var(--good) !important; }
    & [style*="solid #c0392b"],
    & [style*="solid #b00"]               { border-color: var(--bad) !important; }
    & [style*="solid #b8651d"]            { border-color: var(--accent) !important; }
  }
}
:root[data-theme="dark"] [style*="background:#fff;"],
:root[data-theme="dark"] [style$="background:#fff"],
:root[data-theme="dark"] [style*="background:white"]   { background: var(--panel) !important; }
:root[data-theme="dark"] [style*="background:#f4f4f4"],
:root[data-theme="dark"] [style*="background:#f7f7f7"],
:root[data-theme="dark"] [style*="background:#fafafa"],
:root[data-theme="dark"] [style*="background:#fafaf6"],
:root[data-theme="dark"] [style*="background:#f7f5ef"],
:root[data-theme="dark"] [style*="background:#f6f6f6"] { background: var(--panel-2) !important; }
:root[data-theme="dark"] [style*="background:#f4faf6"],
:root[data-theme="dark"] [style*="background:#e3eee5"],
:root[data-theme="dark"] [style*="background:#edf7ed"] { background: var(--good-soft) !important; }
:root[data-theme="dark"] [style*="background:#fff7f7"],
:root[data-theme="dark"] [style*="background:#fff8f8"],
:root[data-theme="dark"] [style*="background:#fdecea"],
:root[data-theme="dark"] [style*="background:#fff5f5"] { background: var(--bad-soft) !important; }
:root[data-theme="dark"] [style*="background:#fffbf2"],
:root[data-theme="dark"] [style*="background:#fff4d9"] { background: var(--warn-soft) !important; }
:root[data-theme="dark"] [style*="background:#fff8ef"],
:root[data-theme="dark"] [style*="background:#fff3e0"] { background: var(--accent-soft) !important; }
:root[data-theme="dark"] [style*="color:#222"],
:root[data-theme="dark"] [style*="color:#1a1a1a"]      { color: var(--ink) !important; }
:root[data-theme="dark"] [style*="color:#333"],
:root[data-theme="dark"] [style*="color:#444"]         { color: var(--ink-2) !important; }
:root[data-theme="dark"] [style*="color:#555"],
:root[data-theme="dark"] [style*="color:#666"],
:root[data-theme="dark"] [style*="color:#777"],
:root[data-theme="dark"] [style*="color:#888"],
:root[data-theme="dark"] [style*="color:#999"]         { color: var(--ink-3) !important; }
:root[data-theme="dark"] [style*="color:#1a7f37"]      { color: var(--good) !important; }
:root[data-theme="dark"] [style*="color:#cf222e"],
:root[data-theme="dark"] [style*="color:#a04040"],
:root[data-theme="dark"] [style*="color:#b00"]         { color: var(--bad) !important; }
:root[data-theme="dark"] [style*="color:#b8651d"],
:root[data-theme="dark"] [style*="color:#7a3e00"],
:root[data-theme="dark"] [style*="color:#669"]         { color: var(--accent-text) !important; }
:root[data-theme="dark"] [style*="solid #ccc"],
:root[data-theme="dark"] [style*="solid #d0d0d0"],
:root[data-theme="dark"] [style*="solid #ddd"],
:root[data-theme="dark"] [style*="dashed #ddd"],
:root[data-theme="dark"] [style*="solid #e3e3e3"],
:root[data-theme="dark"] [style*="dashed #e6dfcc"],
:root[data-theme="dark"] [style*="solid #e3ddc8"],
:root[data-theme="dark"] [style*="solid #d4cdb8"]      { border-color: var(--border) !important; }
:root[data-theme="dark"] [style*="solid #2e7d32"],
:root[data-theme="dark"] [style*="solid #a9c3ad"]      { border-color: var(--good) !important; }
:root[data-theme="dark"] [style*="solid #c0392b"],
:root[data-theme="dark"] [style*="solid #b00"]         { border-color: var(--bad) !important; }
:root[data-theme="dark"] [style*="solid #b8651d"]      { border-color: var(--accent) !important; }

/* ========== 3b · CANVAS OVERRIDES (class rules — no !important) ========== */
/* Written for BOTH dark triggers. Because canvas/*.css loads after app.css,
   the :root[data-theme=…] / :root:not([data-theme="light"]) prefix is required
   to out-specify the plain single-class canvas rules. */

/* ---- notes-panel.css (full white slide-out) ---- */
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]) .mdb-notes-panel,
 :root:not([data-theme="light"]) .mdb-notes-panel__toolbar-btn { background: var(--panel); color: var(--ink); border-color: var(--border); }
 :root:not([data-theme="light"]) .mdb-notes-panel__toolbar-btn:hover { background: var(--panel-2); }
 :root:not([data-theme="light"]) .mdb-notes-panel__toolbar-btn.is-open,
 :root:not([data-theme="light"]) .mdb-notes-panel__tab.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
 :root:not([data-theme="light"]) .mdb-notes-panel__header,
 :root:not([data-theme="light"]) .mdb-notes-panel__tabs,
 :root:not([data-theme="light"]) .mdb-notes-panel__controls { border-bottom-color: var(--border); }
 :root:not([data-theme="light"]) .mdb-notes-panel__title { color: var(--ink-2); }
 :root:not([data-theme="light"]) .mdb-notes-panel__close,
 :root:not([data-theme="light"]) .mdb-notes-panel__toggle,
 :root:not([data-theme="light"]) .mdb-notes-panel__msg { color: var(--ink-3); }
 :root:not([data-theme="light"]) .mdb-notes-panel__close:hover,
 :root:not([data-theme="light"]) .mdb-notes-panel__refresh:hover { background: var(--panel-2); }
 :root:not([data-theme="light"]) .mdb-notes-panel__msg--err { color: var(--bad); }
 :root:not([data-theme="light"]) .mdb-notes-panel__tab { background: var(--panel-2); border-color: var(--border); color: var(--ink-2); }
 :root:not([data-theme="light"]) .mdb-notes-panel__tab:hover { background: var(--panel-3); }
 :root:not([data-theme="light"]) .mdb-notes-panel__search { background: var(--field-bg); border-color: var(--border); color: var(--ink); }
 :root:not([data-theme="light"]) .mdb-notes-panel__refresh { border-color: var(--border); color: var(--ink-2); }
 :root:not([data-theme="light"]) .mdb-notes-row { background: var(--panel-2); border-color: var(--border); }
 :root:not([data-theme="light"]) .mdb-notes-row__body { color: var(--ink); }
 :root:not([data-theme="light"]) .mdb-notes-row__footer { color: var(--ink-3); }
 :root:not([data-theme="light"]) .mdb-notes-row__decided { background: var(--panel-2); color: var(--ink-2); }
 :root:not([data-theme="light"]) .mdb-notes-row__decided--accept { background: var(--good-soft); color: var(--good); }
 :root:not([data-theme="light"]) .mdb-notes-row__decided--reject { background: var(--bad-soft); color: var(--bad); }
 :root:not([data-theme="light"]) .mdb-notes-row__decided--unsure { background: var(--warn-soft); color: var(--warn); }
 :root:not([data-theme="light"]) .mdb-notes-row__btn { background: var(--panel-2); border-color: var(--border); color: var(--ink); }
 :root:not([data-theme="light"]) .mdb-notes-row__btn:hover { background: var(--panel-3); }
 :root:not([data-theme="light"]) .mdb-notes-row__btn--accept { border-color: var(--good); color: var(--good); }
 :root:not([data-theme="light"]) .mdb-notes-row__btn--accept:hover { background: var(--good-soft); }
 :root:not([data-theme="light"]) .mdb-notes-row__btn--reject { border-color: var(--bad); color: var(--bad); }
 :root:not([data-theme="light"]) .mdb-notes-row__btn--reject:hover { background: var(--bad-soft); }
 :root:not([data-theme="light"]) .mdb-notes-row__btn--unsure { border-color: var(--warn); color: var(--warn); }
 :root:not([data-theme="light"]) .mdb-notes-row__btn--unsure:hover { background: var(--warn-soft); }
 /* RelTypePicker.css */
 :root:not([data-theme="light"]) .mdb-rtp,
 :root:not([data-theme="light"]) .mdb-ghost-picker { background: var(--panel); border-color: var(--border); }
 :root:not([data-theme="light"]) .mdb-rtp-btn { color: var(--ink); }
 :root:not([data-theme="light"]) .mdb-rtp-btn:hover,
 :root:not([data-theme="light"]) .mdb-rtp-btn:focus { background: var(--panel-2); }
 :root:not([data-theme="light"]) .mdb-ghost-picker-caption { color: var(--ink-2); }
 :root:not([data-theme="light"]) .mdb-ghost-picker-rationale { color: var(--ink-3); }
 :root:not([data-theme="light"]) .mdb-ghost-picker-error { color: var(--bad); }
 :root:not([data-theme="light"]) .mdb-ghost-picker-btn.dismiss { background: var(--panel-2); color: var(--ink-2); border-color: var(--border); }
 :root:not([data-theme="light"]) .mdb-ghost-picker-btn.dismiss:hover:not([disabled]) { background: var(--panel-3); }
 /* inspector.css — bad-red used as text/border */
 :root:not([data-theme="light"]) .insp-err-pill,
 :root:not([data-theme="light"]) .insp-link-del:hover { color: var(--bad); }
 :root:not([data-theme="light"]) .insp-delete-btn { color: var(--bad); border-color: var(--bad); }
 /* states.css — low-contrast amber "didn't understand" bar */
 :root:not([data-theme="light"]) .voice-feedback-bar.didnt-understand { color: var(--warn); }
}
:root[data-theme="dark"] .mdb-notes-panel,
:root[data-theme="dark"] .mdb-notes-panel__toolbar-btn { background: var(--panel); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .mdb-notes-panel__toolbar-btn:hover { background: var(--panel-2); }
:root[data-theme="dark"] .mdb-notes-panel__toolbar-btn.is-open,
:root[data-theme="dark"] .mdb-notes-panel__tab.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:root[data-theme="dark"] .mdb-notes-panel__header,
:root[data-theme="dark"] .mdb-notes-panel__tabs,
:root[data-theme="dark"] .mdb-notes-panel__controls { border-bottom-color: var(--border); }
:root[data-theme="dark"] .mdb-notes-panel__title { color: var(--ink-2); }
:root[data-theme="dark"] .mdb-notes-panel__close,
:root[data-theme="dark"] .mdb-notes-panel__toggle,
:root[data-theme="dark"] .mdb-notes-panel__msg { color: var(--ink-3); }
:root[data-theme="dark"] .mdb-notes-panel__close:hover,
:root[data-theme="dark"] .mdb-notes-panel__refresh:hover { background: var(--panel-2); }
:root[data-theme="dark"] .mdb-notes-panel__msg--err { color: var(--bad); }
:root[data-theme="dark"] .mdb-notes-panel__tab { background: var(--panel-2); border-color: var(--border); color: var(--ink-2); }
:root[data-theme="dark"] .mdb-notes-panel__tab:hover { background: var(--panel-3); }
:root[data-theme="dark"] .mdb-notes-panel__search { background: var(--field-bg); border-color: var(--border); color: var(--ink); }
:root[data-theme="dark"] .mdb-notes-panel__refresh { border-color: var(--border); color: var(--ink-2); }
:root[data-theme="dark"] .mdb-notes-row { background: var(--panel-2); border-color: var(--border); }
:root[data-theme="dark"] .mdb-notes-row__body { color: var(--ink); }
:root[data-theme="dark"] .mdb-notes-row__footer { color: var(--ink-3); }
:root[data-theme="dark"] .mdb-notes-row__decided { background: var(--panel-2); color: var(--ink-2); }
:root[data-theme="dark"] .mdb-notes-row__decided--accept { background: var(--good-soft); color: var(--good); }
:root[data-theme="dark"] .mdb-notes-row__decided--reject { background: var(--bad-soft); color: var(--bad); }
:root[data-theme="dark"] .mdb-notes-row__decided--unsure { background: var(--warn-soft); color: var(--warn); }
:root[data-theme="dark"] .mdb-notes-row__btn { background: var(--panel-2); border-color: var(--border); color: var(--ink); }
:root[data-theme="dark"] .mdb-notes-row__btn:hover { background: var(--panel-3); }
:root[data-theme="dark"] .mdb-notes-row__btn--accept { border-color: var(--good); color: var(--good); }
:root[data-theme="dark"] .mdb-notes-row__btn--accept:hover { background: var(--good-soft); }
:root[data-theme="dark"] .mdb-notes-row__btn--reject { border-color: var(--bad); color: var(--bad); }
:root[data-theme="dark"] .mdb-notes-row__btn--reject:hover { background: var(--bad-soft); }
:root[data-theme="dark"] .mdb-notes-row__btn--unsure { border-color: var(--warn); color: var(--warn); }
:root[data-theme="dark"] .mdb-notes-row__btn--unsure:hover { background: var(--warn-soft); }
:root[data-theme="dark"] .mdb-rtp,
:root[data-theme="dark"] .mdb-ghost-picker { background: var(--panel); border-color: var(--border); }
:root[data-theme="dark"] .mdb-rtp-btn { color: var(--ink); }
:root[data-theme="dark"] .mdb-rtp-btn:hover,
:root[data-theme="dark"] .mdb-rtp-btn:focus { background: var(--panel-2); }
:root[data-theme="dark"] .mdb-ghost-picker-caption { color: var(--ink-2); }
:root[data-theme="dark"] .mdb-ghost-picker-rationale { color: var(--ink-3); }
:root[data-theme="dark"] .mdb-ghost-picker-error { color: var(--bad); }
:root[data-theme="dark"] .mdb-ghost-picker-btn.dismiss { background: var(--panel-2); color: var(--ink-2); border-color: var(--border); }
:root[data-theme="dark"] .mdb-ghost-picker-btn.dismiss:hover:not([disabled]) { background: var(--panel-3); }
:root[data-theme="dark"] .insp-err-pill,
:root[data-theme="dark"] .insp-link-del:hover { color: var(--bad); }
:root[data-theme="dark"] .insp-delete-btn { color: var(--bad); border-color: var(--bad); }
:root[data-theme="dark"] .voice-feedback-bar.didnt-understand { color: var(--warn); }