/* Anchor — design language lifted from the work-area + workflow mockups. */

/* ─── Theme tokens — light (default) ──────────────────────────────────── */
:root {
  --bg-app:        #eef1f6;
  --bg-card:       #ffffff;
  --bg-soft:       #f8fafc;
  --bg-sunken:     #f1f5f9;
  --text-primary: #1e293b;
  --text-muted:   #64748b;
  --text-faint:   #94a3b8;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --accent:        #3b82f6;
  --accent-bg:     #eff6ff;
  --accent-text:   #1d4ed8;
  --topbar-bg:     #1a1a2e;
  --topbar-text:   #ffffff;
  --shadow-card:   0 1px 4px rgba(15, 23, 42, 0.06);
  --shadow-pop:    0 8px 24px rgba(15, 23, 42, 0.12);
  /* Z-index hierarchy — single source of truth so a new layer can't
     accidentally land between two existing ones. Higher number wins.
     If you're tempted to invent a new z-index, add a token here. */
  --z-base:    1;     /* default in-flow stacking */
  --z-sticky:  50;    /* sticky headers, status strip */
  --z-banner:  100;   /* lock banner, draft-shell scroll layer */
  --z-resize:  110;   /* drag-resize handles */
  --z-popover: 200;   /* selection-bound popovers (coding, comments) */
  --z-toolbar: 250;   /* floating format toolbar — above popovers */
  --z-overlay: 600;   /* generic page overlay (print preview) */
  --z-flash:   700;   /* transient block flash */
  --z-fab:     750;   /* floating action buttons (chat trigger) */
  --z-modal:   800;   /* modal dialogs */
  --z-drawer:  850;   /* slide-in drawers */
  --z-panel:   900;   /* AI panel / pinned side panels */
  --z-cmdk:    1000;  /* command palette */
  --z-toast:   2000;  /* top-most transient notifications */
  color-scheme: light;
}

/* ─── Dark theme ──────────────────────────────────────────────────────
   Contrast targets (WCAG 2.1 AA):
     - Body text          ≥ 4.5:1
     - Large text (18pt+) ≥ 3.0:1
     - Active UI state    ≥ 3.0:1
   Verified ratios on this palette:
     primary  (#f1f5f9) on bg-app (#0f172a) = 15.7:1   ✓ AAA
     primary  (#f1f5f9) on bg-card (#1e293b) = 13.0:1  ✓ AAA
     muted    (#cbd5e1) on bg-app  =  11.0:1           ✓ AAA
     muted    (#cbd5e1) on bg-card =   9.1:1           ✓ AAA
     faint    (#94a3b8) on bg-app  =   6.4:1           ✓ AA
     faint    (#94a3b8) on bg-card =   5.3:1           ✓ AA
   Borders bumped one step lighter so card edges are visible against
   the surface they sit on. ─────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg-app:        #0f172a;
  --bg-card:       #1e293b;
  --bg-soft:       #243049;
  --bg-sunken:     #182238;
  --text-primary: #f1f5f9;
  --text-muted:   #cbd5e1;
  --text-faint:   #94a3b8;
  --border:        #475569;
  --border-strong: #64748b;
  --accent:        #60a5fa;
  --accent-bg:     #1e3a8a;
  --accent-text:   #dbeafe;
  --topbar-bg:     #0f172a;
  --topbar-text:   #f1f5f9;
  --shadow-card:   0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-pop:    0 8px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ─── Dark-mode bulk overrides ────────────────────────────────────────
   Many older rules hard-code `background: white` / `#fff` and dark text
   colors instead of using the tokens. Migrating each rule one-by-one
   was risky; this block catches the chrome components in bulk so dark
   mode looks consistent without changing the light-mode appearance.
   When a component is migrated to vars individually, its entry here
   becomes redundant and can be deleted. ─────────────────────────── */
:root[data-theme="dark"] {
  /* Panels, modals, dropdowns, cards that hard-code white backgrounds */
}
/* (Previously these had explicit dark-mode overrides; they now use
   var(--bg-card) etc. directly, so the overrides are gone:
   .modal-card, .ai-panel, .evidence-pane, .pdfp, .calc-btn,
   .ai-actions button, .modal-actions button.) */
:root[data-theme="dark"] .pdfp {
  /* PDF preview keeps a white "paper" background for fidelity with
     the actual document — but the surrounding chrome flips. */
  background: var(--bg-card);
}

/* Dashboard / inbox / batch-import / documents cards — most of the
   `background: white; border: 1px solid #e2e8f0` rule groups */
:root[data-theme="dark"] .dash-kpi,
:root[data-theme="dark"] .dash-card,
:root[data-theme="dark"] .dash-section,
:root[data-theme="dark"] .ib-card,
:root[data-theme="dark"] .ib-row,
:root[data-theme="dark"] .ib-drop,
:root[data-theme="dark"] .dt-pane,
:root[data-theme="dark"] .zip-group,
:root[data-theme="dark"] .doc-card,
:root[data-theme="dark"] .ev-card,
:root[data-theme="dark"] .ev-source,
:root[data-theme="dark"] .ev-passage,
:root[data-theme="dark"] .pn-card,
:root[data-theme="dark"] .nd-mode-row label:hover,
:root[data-theme="dark"] .dt-tab.active,
:root[data-theme="dark"] .nb-card {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}

/* Table chrome in views/tables that defaulted to white */
:root[data-theme="dark"] table { background: var(--bg-card); color: var(--text-primary); }
:root[data-theme="dark"] th, :root[data-theme="dark"] td { border-color: var(--border); }
:root[data-theme="dark"] thead th {
  background: var(--bg-sunken); color: var(--text-muted);
}

/* Inputs / textareas / selects that hard-coded white */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--bg-card); color: var(--text-primary);
  border-color: var(--border-strong);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-faint); }

/* Editor "paper" page — keep paper-white in dark mode is debatable;
   we go dark so the editor matches the rest of the chrome. The print
   preview (.mp-page) still stays white-paper for actual printing. */
:root[data-theme="dark"] .page { background: var(--bg-card); box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .editor-page .ProseMirror { color: var(--text-primary); }
:root[data-theme="dark"] .page-area { background: var(--bg-app); }
:root[data-theme="dark"] .page-area > .page-header { background: var(--bg-app); }

/* Audit popover, signoff banner secondary buttons */
:root[data-theme="dark"] .signoff-banner.loading { background: var(--bg-sunken); color: var(--text-muted); }

/* Comment-popover muted box uses --bg-muted fallback */
:root[data-theme="dark"] .cmt-compose,
:root[data-theme="dark"] .review-banner .rb-note { background: var(--bg-sunken); }

/* ─── Toast host ────────────────────────────────────────────────────
   Bottom-right stack. Toasts slide in from the right, sit for a few
   seconds, then slide out. Used for fetch-failure feedback,
   lock-acquire results, offline-queue notices. */
#toast-host {
  position: fixed; bottom: 16px; right: 16px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 280px; max-width: 420px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pop);
  font-size: 13px; line-height: 1.4;
  opacity: 0; transform: translateX(20px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.toast-in  { opacity: 1; transform: translateX(0); }
.toast.toast-out { opacity: 0; transform: translateX(20px); }
.toast-icon {
  flex: 0 0 auto; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 700; font-size: 12px;
  background: var(--bg-sunken); color: var(--text-muted);
}
.toast-msg { flex: 1 1 auto; word-wrap: break-word; }
.toast-close {
  flex: 0 0 auto;
  background: transparent; border: 0; font-size: 16px; line-height: 1;
  color: var(--text-muted); cursor: pointer; padding: 0 4px;
}
.toast-close:hover { color: var(--text-primary); }
.toast-error   { border-left: 4px solid #dc2626; }
.toast-error   .toast-icon { background: #fee2e2; color: #b91c1c; }
.toast-warn    { border-left: 4px solid #f59e0b; }
.toast-warn    .toast-icon { background: #fef3c7; color: #92400e; }
.toast-success { border-left: 4px solid #16a34a; }
.toast-success .toast-icon { background: #dcfce7; color: #15803d; }
.toast-info    { border-left: 4px solid var(--accent); }
.toast-info    .toast-icon { background: var(--accent-bg); color: var(--accent-text); }
:root[data-theme="dark"] .toast-error   .toast-icon { background: #3a0d0d; color: #fca5a5; }
:root[data-theme="dark"] .toast-warn    .toast-icon { background: #3d2e0a; color: #fde68a; }
:root[data-theme="dark"] .toast-success .toast-icon { background: #052e1a; color: #86efac; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ─── Inline spinner — small animated dot, used in buttons next to
   text like "Thinking…" or "Saving…" so the UI feels alive, not
   frozen, during awaits. */
.spinner {
  display: inline-block; width: 11px; height: 11px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -1px;
  animation: spinner-rot 0.7s linear infinite;
  margin-right: 6px;
}
@keyframes spinner-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

/* ─── Global focus-visible ──────────────────────────────────────────
   Single rule using :where() so specificity stays at 0 — any
   component that wants a custom focus style can override without
   fighting !important. Keyboard-only (`:focus-visible`) so mouse
   clicks don't leave a halo. ─────────────────────────────────────── */
:where(button, [role="button"], a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inside inputs we want the outline tight against the border, not
   floating outside, so it doesn't visually merge with the next field. */
:where(input, textarea, select):focus-visible {
  outline-offset: 0;
}

/* ─── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: white; padding: 12px 20px;
  display: flex; align-items: center; gap: 20px;
}
.brand { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.brand .dot { color: #3b82f6; }
.firm-tag {
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 10px;
  background: rgba(59, 130, 246, 0.18); color: #93c5fd; margin-left: 6px;
  letter-spacing: 0.2px;
}
.online-indicator {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 10px;
  background: rgba(220, 38, 38, 0.25); color: #fca5a5;
  margin-left: auto;
}
.online-indicator.hidden { display: none; }
.crumb { flex: 1; display: flex; align-items: baseline; gap: 12px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.12); }
.crumb a { font-weight: 600; font-size: 13px; }
.crumb .meta { color: #94a3b8; font-size: 12px; }
.user { font-size: 12px; color: #cbd5e1; }

/* ─── Container ──────────────────────────────────────────────────────── */
.container { max-width: 1180px; margin: 32px auto; padding: 0 24px; }
.container.two-col { display: grid; grid-template-columns: 280px 1fr; gap: 24px; }
.container h1 { font-size: 22px; font-weight: 700; margin-bottom: 18px; color: var(--text-primary); }
.muted { color: var(--text-muted); font-size: 12px; margin-bottom: 18px; }
.empty { color: var(--text-faint); padding: 32px; text-align: center; background: var(--bg-card); border-radius: 8px; }

/* ─── Matter list ────────────────────────────────────────────────────── */
.matter-list { background: var(--bg-card); border-radius: 8px; box-shadow: var(--shadow-card); overflow: hidden; }
.matter-row {
  display: grid; grid-template-columns: 1fr 100px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  align-items: center; transition: background .1s;
}
.matter-row:last-child { border-bottom: none; }
.matter-row:hover { background: var(--bg-soft); }
.matter-row .m-name { font-weight: 600; color: var(--text-primary); }
.matter-row .m-meta { color: var(--text-muted); font-size: 12px; margin-top: 2px; grid-column: 1; }
.matter-row .m-stat { font-size: 11px; color: var(--text-faint); text-align: right; grid-row: 1 / 3; grid-column: 2; }

/* ─── Sidecard ───────────────────────────────────────────────────────── */
.sidecard { background: var(--bg-card); border-radius: 8px; padding: 16px 18px; box-shadow: var(--shadow-card); height: fit-content; }
.sidecard h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
.sidecard h3:not(:first-child) { margin-top: 18px; }
.party-list { list-style: none; }
.party-list li { padding: 3px 0; font-size: 12px; }
.party-list li b { color: var(--text-primary); text-transform: capitalize; margin-right: 4px; font-weight: 600; }
.kv { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; font-size: 12px; }
.kv dt { color: var(--text-muted); }
.kv dd { color: var(--text-primary); }

/* ─── Procedure step list ────────────────────────────────────────────── */
.main-col { background: var(--bg-card); border-radius: 8px; padding: 22px 26px; box-shadow: var(--shadow-card); }
.main-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
.btn-primary { background: #3b82f6; color: white; padding: 8px 14px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.btn-primary:hover { background: #2563eb; }
.step-list { list-style: none; margin-top: 10px; }
.step {
  display: grid;
  grid-template-columns: 24px 1fr 110px 80px;
  gap: 14px; padding: 11px 0;
  align-items: center; border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: none; }
.step-icon { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); }
.step.done .step-icon { background: #16a34a; border-color: #16a34a; }
.step.draft .step-icon { background: var(--bg-card); border-color: #f59e0b; box-shadow: inset 0 0 0 3px #fbbf24; }
.step-title { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.step-sub { color: var(--text-muted); font-size: 11px; margin-top: 1px; }
.step-status { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.step.draft .step-status { color: #d97706; }
.step.done .step-status { color: #15803d; }
.step-action { font-size: 12px; color: #3b82f6; font-weight: 600; text-align: right; }
.step-action:hover { text-decoration: underline; }
.step.overdue { background: linear-gradient(to right, rgba(254,226,226,0.5), transparent); }
.due-chip { font-size: 10px; padding: 1px 7px; border-radius: 10px; font-weight: 600; margin-left: 6px; }
.due-chip.done    { background: #dcfce7; color: #15803d; }
.due-chip.ok      { background: #f1f5f9; color: #475569; font-variant-numeric: tabular-nums; }
.due-chip.soon    { background: #fef3c7; color: #92400e; }
.due-chip.overdue { background: #fee2e2; color: #b91c1c; }

/* ─── Draft view ─────────────────────────────────────────────────────── */
.draft-shell {
  --evidence-width: 380px;
  display: grid;
  grid-template-columns: 240px 1fr 6px var(--evidence-width);
  height: calc(100vh - 50px);
  min-height: 0;                       /* allow children to scroll */
}
/* Expand mode — evidence rail takes over the page-area + handle cells
   so the lawyer can read a doc at proper reading width while keeping
   the left rail (forms list, coded passages, etc.) visible. */
.draft-shell.evidence-expanded {
  grid-template-columns: 240px 0 6px 1fr;
}
.draft-shell.evidence-expanded .page-area { visibility: hidden; }
.ev-drag-handle {
  background: transparent;
  border-left: 1px solid var(--border);
  cursor: col-resize;
  position: relative;
  user-select: none;
}
.ev-drag-handle:hover, .ev-drag-handle.dragging {
  background: var(--accent); border-left-color: var(--accent);
}
.ev-pane-tools {
  display: flex; justify-content: flex-end; gap: 6px;
  margin: -8px -8px 8px;
}
.ev-pane-tool {
  background: var(--bg-sunken); border: 1px solid var(--border-strong);
  color: var(--text-primary); font-size: 11.5px;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
}
.ev-pane-tool:hover { background: var(--accent-bg); border-color: var(--accent); }
.rail { background: var(--bg-card); border-right: 1px solid var(--border); padding: 16px 18px; overflow-y: auto; min-height: 0; }
/* (Older duplicate .rail .back / h3 / h4 / rail-meta rules removed — see the
   consolidated 'Rail — Notion-style sections' block lower in this file.) */
.cited-sources { list-style: none; font-size: 11px; margin-top: 4px; }
.cited-sources li {
  padding: 4px 8px; color: var(--text-muted);
  border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default;
}
.cited-sources li:hover { background: var(--bg-soft); color: var(--text-primary); }

.page-area { background: #e8ecf1; overflow-y: auto; padding: 0 32px 32px; position: relative; min-height: 0; }
.page-area > .page-header { background: #e8ecf1; padding-top: 24px; padding-bottom: 8px; }
.page-area > .status-strip { position: sticky; top: 0; z-index: var(--z-sticky); }
.page-header { max-width: 820px; margin: 0 auto 14px; display: flex; flex-direction: column; gap: 2px; align-items: center; position: relative; }
.page-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.page-sub { font-size: 12px; color: var(--text-muted); }
/* Status strip — one row above the editor (Day 67 consolidation) */
.status-strip {
  max-width: 820px; margin: 0 auto 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 11px;
}
.ss-slot {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 4px;
  white-space: nowrap;
  min-width: 0;
}
.ss-signoff { min-width: 0; color: #475569; overflow: hidden; }
.ss-signoff span { overflow: hidden; text-overflow: ellipsis; }
.ss-signoff.ss-ready    { background: #ecfdf5; color: #065f46; }
.ss-signoff.ss-blocked  { background: #fffbeb; color: #92400e; }
.ss-signoff.ss-signed   { background: #dbeafe; color: #1e40af; }
.ss-signoff.ss-drifted  { background: #fee2e2; color: #b91c1c; }
.ss-signoff button {
  margin-left: 8px; padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 600; cursor: pointer; border: none;
}
.ss-signoff button.signoff-btn-primary { background: #16a34a; color: white; }
.ss-signoff button.signoff-btn-warn    { background: #f59e0b; color: white; }
.ss-signoff button.signoff-btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong); }
.ss-save { color: #64748b; font-variant-numeric: tabular-nums; }
.ss-save.saving { color: #d97706; }
.ss-save.queued { color: #d97706; }
.ss-save.error  { color: #b91c1c; }
.ss-sync {
  background: rgba(220, 38, 38, 0.18); color: #b91c1c;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.ss-sync.hidden { display: none; }
.ss-audit {
  background: #1a1a2e; color: white; border: none;
  width: 28px; height: 28px; padding: 0;
  font-size: 14px; cursor: pointer;
}
.ss-audit:hover { background: #312e81; }

/* Legacy aliases — existing JS targets these. Now styled to fit in strip. */
.save-indicator { color: #64748b; font-variant-numeric: tabular-nums; }
.save-indicator.saving { color: #d97706; }
.save-indicator.error { color: #b91c1c; }
.save-indicator.queued { color: #d97706; }
.online-indicator.syncing { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
body.offline .ai-trigger,
body.offline .wh-form button,
body.offline #canlii-go { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

/* Sign-off banner */
.signoff-banner {
  max-width: 820px; margin: 0 auto 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 6px; font-size: 12px;
}
.signoff-banner.loading { background: #f1f5f9; color: #64748b; }
.signoff-banner.ready   { background: #ecfdf5; color: #065f46; border-left: 3px solid #16a34a; }
.signoff-banner.blocked { background: #fffbeb; color: #92400e; border-left: 3px solid #f59e0b; }
.signoff-banner.signed  { background: #dbeafe; color: #1e40af; border-left: 3px solid #3b82f6; }
.signoff-banner.drifted { background: #fee2e2; color: #b91c1c; border-left: 3px solid #dc2626; }
.signoff-banner.error   { background: #fee2e2; color: #b91c1c; }
.signoff-banner b { font-weight: 700; }
.signoff-banner button { padding: 6px 14px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; border: none; }
.signoff-btn-primary   { background: #16a34a; color: white; }
.signoff-btn-primary:hover { background: #15803d; }
.signoff-btn-warn      { background: #f59e0b; color: white; }
.signoff-btn-warn:hover { background: #d97706; }
.signoff-btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong) !important; }
.signoff-btn-secondary:hover { background: var(--bg-sunken); }

/* Multi-form draft switcher (rail) */
.draft-switcher { list-style: none; margin-bottom: 4px; }
.draft-switcher li { margin-bottom: 4px; }
.draft-switcher li a {
  display: grid; grid-template-columns: 44px 1fr; gap: 6px;
  padding: 6px 8px; border-radius: 4px;
  font-size: 11px; color: #475569;
}
.draft-switcher li a:hover { background: #f1f5f9; }
.draft-switcher li.active a { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.draft-switcher .d-code {
  font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  background: #dbeafe; color: #1d4ed8;
  padding: 2px 5px; border-radius: 3px;
  text-align: center; align-self: center;
}
.draft-switcher li.active .d-code { background: #1d4ed8; color: white; }
.draft-switcher .d-title { color: inherit; align-self: center; overflow: hidden; text-overflow: ellipsis; }
.draft-switcher .d-status { font-size: 9px; padding: 1px 5px; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
.d-status.d-draft    { background: #fef3c7; color: #92400e; }
.d-status.d-signed   { background: #dbeafe; color: #1e40af; }
.d-status.d-filed    { background: #dcfce7; color: #15803d; }
.d-status.d-archived { background: #f1f5f9; color: #475569; }

/* Matters head (with + New matter) */
.matters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.matters-head h1 { margin: 0; font-size: 22px; font-weight: 700; }

/* New-matter form */
.container.narrow { max-width: 760px; }
.form-stack label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; font-weight: 600; margin: 10px 0 4px; }
.form-stack input, .form-stack textarea, .form-stack select {
  width: 100%; padding: 8px 10px;
  border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 13px; color: #1e293b;
  font-family: inherit;
}
.form-stack input:focus, .form-stack textarea:focus { outline: 2px solid #3b82f6; outline-offset: -1px; border-color: transparent; }
.form-stack .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-sec { font-size: 14px; font-weight: 700; color: #0f172a; margin: 22px 0 6px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.matter-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 4px; }
.mt-card {
  display: block; cursor: pointer;
  padding: 12px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg-card); transition: border-color .1s, background .1s;
}
.mt-card input[type=radio] { display: none; }
.mt-card.sel { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent) inset; }
.mt-card .mt-title { font-weight: 700; color: var(--text-primary); font-size: 13px; }
.mt-card .mt-sub   { color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.checkbox-inline { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-primary); margin: 16px 0; font-weight: 500; text-transform: none; letter-spacing: 0; }
.checkbox-inline input { width: auto; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.btn-primary, .btn-secondary { padding: 9px 16px; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { filter: brightness(0.92); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-sunken); }
.conflict-results { background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 5px; padding: 10px 12px; margin-top: 6px; }
.conflict-results button { padding: 6px 10px; }
#conflict-output { font-size: 12px; margin-top: 8px; line-height: 1.6; }
#conflict-output .ok    { color: #15803d; font-weight: 600; }
#conflict-output .warn  { color: #b45309; }
.conflict-list { list-style: none; margin-top: 6px; }
.conflict-list li { padding: 4px 0; font-size: 12px; color: #334155; }
.err-inline { color: #b91c1c; }

/* CanLII finder */
.canlii-form { display: flex; gap: 6px; margin-top: 8px; }
.canlii-form input { flex: 1; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; }
.canlii-form button {
  background: #3b82f6; color: white; border: none; padding: 7px 14px;
  border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.canlii-form button:hover { background: #2563eb; }
.canlii-result { margin-top: 10px; }
.canlii-result.hidden { display: none; }
.canlii-card { padding: 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px; }
.canlii-card .title { font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.canlii-card .meta { color: var(--text-muted); font-size: 11px; margin-bottom: 8px; }
.canlii-card .links { display: flex; gap: 10px; align-items: center; }
.canlii-card .links a { color: #3b82f6; font-size: 12px; font-weight: 600; }
.canlii-card .links button {
  background: #16a34a; color: white; border: none; padding: 5px 10px;
  border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.canlii-card .links button:disabled { opacity: 0.5; cursor: not-allowed; }
.canlii-ok  { background: #dcfce7; color: #15803d; padding: 8px 10px; border-radius: 4px; font-size: 12px; margin-top: 8px; }
.canlii-err { background: #fee2e2; color: #b91c1c; padding: 8px 10px; border-radius: 4px; font-size: 12px; margin-top: 8px; }

/* Audit-trail panel */
.audit-btn {
  display: block; width: 100%; margin: 10px 0;
  background: #1a1a2e; color: white; border: none;
  padding: 8px 10px; border-radius: 5px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  text-align: left;
}
.audit-btn:hover { background: #312e81; }

.audit-panel {
  position: fixed; right: 380px; top: 60px; bottom: 0;
  width: 460px;
  background: white; border-left: 1px solid #cbd5e1;
  box-shadow: -6px 0 18px rgba(15,23,42,0.12);
  display: flex; flex-direction: column;
  z-index: var(--z-banner);
}
.audit-panel.hidden { display: none; }
.audit-panel header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid #e2e8f0;
  background: #1a1a2e; color: white;
}
.audit-panel header h3 { font-size: 13px; font-weight: 700; flex: 1; margin: 0; }
.audit-panel header .close { background: none; border: none; color: #cbd5e1; font-size: 20px; cursor: pointer; }
.audit-panel header .close:hover { color: white; }
.audit-json-link { color: #93c5fd; font-size: 11px; }
.audit-body { padding: 8px 0; overflow-y: auto; }
.audit-row {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9; font-size: 12px;
}
.audit-row:hover { background: #fafbfc; }
.audit-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #f1f5f9; color: #475569;
  font-size: 12px;
}
.audit-meta b { color: #0f172a; }
.audit-target { color: #94a3b8; font-family: ui-monospace, Menlo, monospace; font-size: 10px; margin-left: 4px; }
.audit-detail { color: #475569; margin-top: 2px; }
.audit-ts { color: #94a3b8; font-size: 10px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.audit-tag {
  display: inline-block; font-size: 9px; padding: 1px 5px; border-radius: 3px;
  font-weight: 700; letter-spacing: 0.3px;
}
.audit-tag.llm { background: #ede9fe; color: #6d28d9; }

/* Matter-level preview (Notion-style scrolling sheet of all drafts) */
.mp-shell { display: grid; grid-template-columns: 240px 1fr; height: calc(100vh - 50px); min-height: 0; }
.mp-toc {
  background: white; border-right: 1px solid #e2e8f0;
  padding: 18px 14px; overflow-y: auto; min-height: 0;
}
.mp-toc .back { color: #64748b; font-size: 11px; }
.mp-toc h3 { font-size: 13px; font-weight: 700; margin: 10px 0 2px; color: #0f172a; }
.mp-toc .mp-meta { font-size: 11px; color: #94a3b8; font-family: ui-monospace, Menlo, monospace; margin-bottom: 14px; }
.mp-toc nav { display: flex; flex-direction: column; gap: 2px; margin: 12px 0; }
.mp-toc-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 8px;
  padding: 6px 8px; border-radius: 4px;
  font-size: 12px; color: #334155;
  align-items: center;
}
.mp-toc-item:hover { background: #f1f5f9; color: #0f172a; }
.mp-toc-code {
  font-size: 9px; font-weight: 700; padding: 2px 5px;
  background: #dbeafe; color: #1d4ed8; border-radius: 3px;
  text-align: center; letter-spacing: 0.3px;
}
.mp-toc-status {
  font-size: 9px; padding: 1px 5px; border-radius: 8px;
  text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px;
}
.mp-toc-status.ss-signed { background: #dbeafe; color: #1e40af; }
.mp-toc-status.ss-draft  { background: #fef3c7; color: #92400e; }
.mp-toc-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.mp-toc-actions button { width: 100%; }

/* Print preview — every .mp-page renders at real Letter (8.5×11in)
   dimensions with 1in margins and serif print typography. Multiple
   drafts each start on a fresh page; window.print() produces the
   exact same layout. */
.mp-pages { overflow-y: auto; background: #e8ecf1; padding: 32px 16px; min-height: 0; }
.mp-page {
  background: white;
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto 24px;
  padding: 1in;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  border-radius: 2px;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 12pt;
  line-height: 1.5;
  color: #000;
  page-break-after: always;
  break-after: page;
  box-sizing: border-box;
}
.mp-page:last-child { page-break-after: auto; break-after: auto; }
.mp-page { position: relative; }
.mp-page-foot {
  position: absolute; left: 1in; right: 1in; bottom: 0.5in;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10pt; color: #333; font-family: inherit;
  border-top: 1px solid #ccc; padding-top: 4pt;
}
.mp-page-foot-court { font-style: italic; }
.mp-page-foot-num   { font-variant-numeric: tabular-nums; }
.mp-page-head { text-align: center; margin-bottom: 24pt; }
.mp-page-court { font-size: 11pt; text-transform: uppercase; letter-spacing: 0.5px; color: #000; line-height: 1.4; }
.mp-page-registry { font-size: 10pt; color: #000; font-style: italic; margin-bottom: 6pt; }
.mp-page-title { font-size: 14pt; font-weight: 700; margin: 10pt 0 2pt; }
.mp-page-sub { font-size: 11pt; color: #000; font-style: italic; }
.mp-page-screen-only { font-size: 9pt; color: #94a3b8; margin-top: 4pt; }
@media print { .mp-page-screen-only { display: none !important; } }
.mp-blocks .mp-block-host { margin: 0; }
.mp-blocks .ProseMirror {
  outline: none; min-height: 14pt;
  font-family: inherit; font-size: 12pt; line-height: 1.5; color: #000;
}
.mp-blocks .ProseMirror p { margin: 0 0 8pt; text-align: justify; }
.mp-blocks .ProseMirror h2 {
  font-size: 12pt; font-weight: 700; margin: 14pt 0 6pt;
  text-decoration: underline; color: #000;
}
.mp-blocks .ProseMirror h3 { font-size: 12pt; font-weight: 700; margin: 10pt 0 4pt; }
.mp-blocks .mp-ai .ProseMirror { background: transparent; }  /* drop screen-only AI shading in print */
.mp-exhibits-h { font-size: 13pt; font-weight: 700; margin-bottom: 10pt; border-top: 2px solid #000; padding-top: 8pt; }
.mp-exhibits { list-style: none; padding: 0; }
.mp-exhibits li { padding: 3pt 0; font-size: 11pt; }

/* On-screen niceties: dark mode keeps the page itself white (paper)
   but soften the gutter background. */
:root[data-theme="dark"] .mp-pages { background: var(--bg-app); }
:root[data-theme="dark"] .mp-page { color: #000; }  /* paper stays white */

/* True print: hide every piece of app chrome and the TOC, let the
   .mp-page boxes flow at native paper size. The @page rule draws
   the running header / footer including the page counter — those
   margin boxes overlay every physical sheet, so multi-sheet drafts
   automatically get correctly-numbered pages without any JS. */
/* @page rule is generated dynamically by the matter-preview inline
   script so it can include the matter's actual file number in the
   running header (CSS variables don't cascade into @page margin
   boxes — they need string literals). */
@media print {
  html, body { background: white !important; }
  .topbar, .mp-toc, .mp-popup, .modal, #export-modal,
  #notif-panel, #notif-bell, .theme-toggle, .presence-pill,
  #online-indicator, .crumb, .mp-toc-actions { display: none !important; }
  .mp-shell { display: block !important; height: auto !important; }
  .mp-pages { background: white !important; padding: 0 !important; overflow: visible !important; }
  .mp-page {
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;        /* @page margin handles the 1in gutter */
    border-radius: 0 !important;
    page-break-after: always;
    min-height: 0 !important;     /* let content flow naturally across sheets */
  }
  .mp-page-foot { display: none !important; }  /* @page counter covers this */
  main { margin: 0 !important; padding: 0 !important; }
}

/* Citation popup */
.mp-popup { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); }
.mp-popup.hidden { display: none; }
.mp-popup-card {
  background: white; border-radius: 10px;
  max-width: 640px; max-height: 70vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 40px rgba(15,23,42,0.3);
}
.mp-popup-card header {
  display: flex; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid #e2e8f0;
  font-size: 12px; font-weight: 600; color: #1e293b;
  background: #fafbfc;
}
.mp-popup-card header span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-popup-card header button { background: none; border: none; cursor: pointer; font-size: 18px; color: #64748b; }
#mp-popup-body { padding: 14px 18px; overflow-y: auto; font-size: 12px; }
.mp-popup-meta { font-size: 11px; color: #64748b; margin-bottom: 10px; font-family: ui-monospace, Menlo, monospace; }
.mp-popup-text {
  background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 4px;
  padding: 12px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; line-height: 1.6; color: #334155;
  white-space: pre-wrap; word-break: break-word;
  margin: 0;
}
.mp-popup-text mark { background: #fef08a; padding: 1px 2px; border-bottom: 2px solid #f59e0b; }

/* PDF viewer (PDF.js) */
.pdfp-loading, .pdfp-err { padding: 24px; text-align: center; color: #64748b; font-size: 12px; }
.pdfp-err { color: #b91c1c; }
.pdf-mode { padding: 0 !important; background: #1e293b; max-height: calc(100vh - 280px); overflow: auto; }
.pdfp-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px; }
.pdfp { position: relative; box-shadow: 0 1px 6px rgba(0,0,0,0.3); background: white; }
.pdfp canvas { display: block; }
.pdfp-textlayer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; opacity: 0.25; line-height: 1; pointer-events: auto; }
.pdfp-textlayer > span, .pdfp-textlayer > br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.pdfp-textlayer ::selection { background: #2563eb44; }
.pdfp-hl-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
.pdfp-hl {
  position: absolute;
  background: rgba(245, 158, 11, 0.30);
  border-bottom: 2px solid #f59e0b;
  border-radius: 2px;
  pointer-events: auto;
  cursor: pointer;
}
.pdfp-hl:hover { background: rgba(245, 158, 11, 0.45); }

/* Modal (export, etc.) */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.modal-card {
  position: absolute; left: 50%; top: 14vh;
  transform: translateX(-50%);
  width: 480px; max-width: calc(100vw - 24px);
  background: var(--bg-card); color: var(--text-primary); border-radius: 10px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.modal-card header {
  display: flex; align-items: center; padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.modal-card header h3 { flex: 1; font-size: 13px; font-weight: 700; margin: 0; }
.modal-card header .close { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-muted); }
.modal-card header .close:hover { color: var(--text-primary); }
.modal-body { padding: 16px 18px; }
.modal-body label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); font-weight: 600; margin: 6px 0 4px; }
.modal-body input[type=text] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 4px;
  font-size: 13px; color: var(--text-primary); background: var(--bg-card);
  font-family: ui-monospace, Menlo, monospace;
}
.radio-row { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.radio-row label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-primary); font-weight: 500; text-transform: none; letter-spacing: 0; margin: 0; cursor: pointer; }
.radio-row input { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal-actions button { padding: 7px 14px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); }
.modal-actions button:hover { background: var(--bg-sunken); }
.modal-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.modal-actions button.primary:hover { filter: brightness(0.92); }
.modal-body .hint { font-size: 11px; margin-top: 10px; }

/* Command palette (Day 69) */
.cmdk { position: fixed; inset: 0; z-index: var(--z-cmdk); }
.cmdk.hidden { display: none; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); }
.cmdk-modal {
  position: absolute; left: 50%; top: 12vh;
  transform: translateX(-50%);
  width: 560px; max-width: calc(100vw - 24px);
  background: white; border-radius: 10px;
  box-shadow: 0 20px 40px rgba(15,23,42,0.3);
  overflow: hidden;
}
.cmdk-modal input {
  width: 100%; padding: 16px 18px;
  border: none; border-bottom: 1px solid #e2e8f0;
  font-size: 15px; outline: none;
}
.cmdk-list { list-style: none; max-height: 50vh; overflow-y: auto; }
.cmdk-row {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 12px; align-items: center;
  padding: 9px 16px; cursor: pointer;
  font-size: 13px;
  border-left: 3px solid transparent;
}
.cmdk-row:hover { background: #fafbfc; }
.cmdk-row.sel { background: #eff6ff; border-left-color: #3b82f6; }
.cmdk-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 3px;
  text-align: center;
}
.cmdk-tag-matter { background: #dbeafe; color: #1d4ed8; }
.cmdk-tag-cmd    { background: #f1f5f9; color: #475569; }
.cmdk-label { color: #0f172a; font-weight: 500; }
.cmdk-hint-inline { color: #94a3b8; font-size: 11px; }
.cmdk-hint {
  padding: 6px 16px; background: #fafbfc; border-top: 1px solid #f1f5f9;
  color: #94a3b8; font-size: 11px;
}

/* Research tabbed panel (Day 68 consolidation) */
.research-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e2e8f0; margin: 10px 0 12px; }
.rt-tab {
  background: none; border: none; cursor: pointer;
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  color: #64748b; border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.rt-tab:hover { color: #0f172a; }
.rt-tab.active { color: #0f172a; border-bottom-color: #3b82f6; }
.rt-pane[hidden] { display: none; }
.rt-h { font-size: 13px; font-weight: 700; margin: 4px 0 6px; color: #0f172a; }

/* Warehouse case-library search panel */
.wh-form { display: flex; gap: 6px; margin-top: 8px; }
.wh-form input { flex: 1; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; }
.wh-form button {
  background: #6d28d9; color: white; border: none; padding: 7px 14px;
  border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.wh-form button:hover { background: #5b21b6; }
.wh-results { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.wh-results .wh-err { background: #fee2e2; color: #b91c1c; padding: 8px 10px; border-radius: 4px; font-size: 12px; }
.wh-card { padding: 10px 12px; background: #fafbfc; border: 1px solid #e2e8f0; border-left: 3px solid #6d28d9; border-radius: 4px; }
.wh-card.wh-imported { border-left-color: #16a34a; background: #ecfdf5; }
.wh-head { display: flex; align-items: center; gap: 8px; font-size: 11px; flex-wrap: wrap; }
.wh-cite { font-weight: 700; color: #0f172a; font-size: 12px; }
.wh-court { background: #ede9fe; color: #6d28d9; padding: 1px 6px; border-radius: 3px; font-weight: 600; font-size: 10px; text-transform: uppercase; }
.wh-date  { color: #64748b; font-variant-numeric: tabular-nums; }
.wh-src   { color: #94a3b8; font-size: 10px; margin-left: auto; }
.wh-title { font-size: 12px; color: #1e293b; margin-top: 3px; font-style: italic; }
.wh-snippet { font-size: 11px; color: #475569; line-height: 1.45; margin-top: 4px; }
.wh-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.wh-actions a { color: #3b82f6; font-size: 11px; font-weight: 600; }
.wh-actions button {
  background: #16a34a; color: white; border: none;
  padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.wh-actions button:disabled { opacity: 0.6; cursor: not-allowed; }
.wh-actions .muted { font-size: 11px; }
.wh-actions .wh-ok { color: #15803d; font-size: 11px; font-weight: 600; }

/* Court-document drop zone (manual CanLII upload path) */
.cl-upload { margin-top: 10px; }
.cl-upload label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; font-weight: 600; margin-bottom: 4px; }
.cl-upload #cl-cite {
  width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 13px; color: #1e293b; margin-bottom: 10px;
}
.cl-drop {
  border: 2px dashed #cbd5e1; border-radius: 6px;
  padding: 22px; text-align: center;
  background: #fafbfc; transition: border-color .15s, background .15s;
  cursor: pointer;
}
.cl-drop:hover, .cl-drop.over { border-color: #3b82f6; background: #eff6ff; }
.cl-drop-ic { font-size: 28px; color: #94a3b8; margin-bottom: 6px; }
.cl-drop-text { font-size: 12px; color: #475569; }
.cl-browse { color: #3b82f6; cursor: pointer; font-weight: 600; }
.cl-upload #cl-file { display: none; }
.cl-upload #cl-submit { margin-top: 10px; }
.manual-hint { margin-top: 8px; font-size: 11px; line-height: 1.5; }

/* Disclosure tracker (matter overview) */
.disc-list { list-style: none; margin-top: 8px; }
.disc-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
.disc-row:last-child { border-bottom: none; }
.disc-label { color: #334155; }
.disc-pill { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.disc-pill.have    { background: #dcfce7; color: #15803d; }
.disc-pill.missing { background: #fee2e2; color: #b91c1c; }
.disc-pill.unknown { background: #f1f5f9; color: #475569; }

/* Rail — Notion-style sections (clean, no heavy borders, custom triangle) */
.rail h3 { font-size: 11px; font-weight: 600; color: #0f172a; margin: 14px 0 4px; letter-spacing: -0.1px; }
.rail h4, .rail-section-header {
  font-size: 10px; font-weight: 600; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.6px;
  margin: 18px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}
.rail .rail-meta { font-size: 11px; color: #64748b; margin-bottom: 10px; }
.rail .back { color: #64748b; font-size: 11px; font-weight: 500; }
.rail .back:hover { color: #1e293b; }

.rail-section {
  margin: 4px 0; padding: 0;
  list-style: none;
}
.rail-section summary {
  cursor: pointer; outline: none;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 500; color: #334155;
  list-style: none;
  transition: background 0.1s;
}
.rail-section summary::-webkit-details-marker { display: none; }
.rail-section summary::marker { content: ''; }
.rail-section summary::before {
  content: '▸'; color: #94a3b8; font-size: 9px;
  width: 10px; transition: transform 0.15s;
}
.rail-section[open] summary::before { transform: rotate(90deg); }
.rail-section summary:hover { background: #f1f5f9; }
.rail-section .rs-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  flex-shrink: 0;
}
.rail-section[open] { padding-bottom: 6px; }
.rail-section[open] > :not(summary) {
  padding: 6px 8px 2px 24px;
}

.saved-ai-list { display: flex; flex-direction: column; gap: 4px; }
.saved-ai-row {
  text-align: left; background: white; border: 1px solid #e2e8f0; border-radius: 4px;
  padding: 6px 8px; cursor: pointer; font-size: 11px; color: #1e293b;
}
.saved-ai-row:hover { background: #f8fafc; border-color: #cbd5e1; }
.sai-inst { font-weight: 600; line-height: 1.35; }
.sai-meta { color: #94a3b8; font-size: 10px; margin-top: 2px; }

.coded-spans-list .cs-group { margin-bottom: 8px; }
.coded-spans-list .cs-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #475569; margin-bottom: 3px;
}
.coded-spans-list .cs-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.coded-spans-list .cs-row {
  display: grid; grid-template-columns: 36px 1fr; gap: 6px;
  padding: 4px 6px; border-radius: 3px;
  font-size: 11px; color: #334155;
}
.coded-spans-list .cs-row:hover { background: #f1f5f9; }
.coded-spans-list .cs-tcode {
  font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px;
  background: #dbeafe; color: #1d4ed8; align-self: center;
  text-align: center;
}

.preview-link {
  display: flex; align-items: center; justify-content: space-between;
  margin: 12px 0; padding: 8px 10px;
  background: #f8fafc; color: #1d4ed8; border-radius: 4px;
  font-size: 11px; font-weight: 600;
}
.preview-link:hover { background: #eff6ff; }
.preview-link .link-arrow { color: #94a3b8; font-weight: 400; }
.preview-link:hover .link-arrow { color: #1d4ed8; }

/* Calculators (rail) */
/* Calculators — match the rail-section Notion-style aesthetic */
.calc-card { margin: 4px 0; padding: 0; }
.calc-card summary {
  cursor: pointer; outline: none; list-style: none;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 500; color: #334155;
}
.calc-card summary::-webkit-details-marker { display: none; }
.calc-card summary::marker { content: ''; }
.calc-card summary::before { content: '▸'; color: #94a3b8; font-size: 9px; width: 10px; transition: transform 0.15s; }
.calc-card[open] summary::before { transform: rotate(90deg); }
.calc-card summary:hover { background: #f1f5f9; }
.calc-card[open] > :not(summary) { padding: 6px 8px 4px 24px; }
.calc-card .calc-body label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; font-weight: 600; margin: 6px 0 3px; }
.calc-card .calc-body input,
.calc-card .calc-body select { width: 100%; padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 3px; font-size: 12px; }
.calc-btn { margin-top: 8px; padding: 6px 10px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 4px; font-size: 11px; cursor: pointer; color: var(--text-primary); width: 100%; font-weight: 600; }
.calc-btn:hover { background: var(--bg-sunken); }
.calc-btn.primary { background: #16a34a; color: #fff; border-color: #16a34a; }
.calc-btn.primary:hover { background: #15803d; }
.calc-result { margin-top: 8px; padding: 8px 10px; background: #eff6ff; border-radius: 4px; font-size: 11px; line-height: 1.5; }
.calc-result.hidden, .calc-btn.hidden { display: none; }
.calc-body .ssag-cond.hidden { display: none; }
.calc-result .v { font-size: 18px; font-weight: 700; color: #0f172a; display: block; margin-bottom: 4px; }
.calc-result .meta { font-size: 10px; color: #64748b; }

/* Always-visible formatting toolbar above the editor */
.fixed-toolbar {
  max-width: 820px; margin: 0 auto 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 6px;
  display: flex; align-items: center; gap: 2px;
  font-size: 13px;
}
.fixed-toolbar button {
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 3px;
  font-size: 13px; color: var(--text-primary);
  min-width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fixed-toolbar button:hover { background: var(--bg-sunken); }
.fixed-toolbar button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.fixed-toolbar .ft-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.fixed-toolbar .ft-comment-btn {
  width: auto !important; min-width: 0;
  padding: 4px 10px !important; font-size: 12px;
  background: var(--accent-bg); color: var(--accent-text);
  border: 1px solid transparent;
  margin-left: 2px; gap: 4px;
}
.fixed-toolbar .ft-comment-btn:hover {
  background: var(--accent); color: #fff;
}
.fixed-toolbar .ft-help-btn {
  margin-left: auto !important;
  width: 24px !important; height: 24px !important;
  border-radius: 50% !important; font-size: 12px !important;
  font-weight: 700;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border) !important;
}
.fixed-toolbar .ft-help-btn:hover {
  background: var(--accent); color: #fff;
  border-color: var(--accent) !important;
}

/* ─── Collaboration help drawer ────────────────────────────────────
   Right-side drawer from the "?" button in the editor toolbar.
   Explains comments / mentions / tasks / review / DMs in the context
   of drafting a matter section. */
.collab-help { position: fixed; inset: 0; z-index: var(--z-modal); }
.collab-help.hidden { display: none; }
.collab-help-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.4);
}
.collab-help-card {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 460px; max-width: 90vw;
  background: var(--bg-card); color: var(--text-primary);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.15);
  display: flex; flex-direction: column;
  animation: collab-help-slide .22s ease-out;
}
@keyframes collab-help-slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .collab-help-card { animation: none; }
}
.collab-help-card > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.collab-help-card > header h3 {
  margin: 0; font-size: 14px; font-weight: 700;
}
.collab-help-body {
  flex: 1; overflow-y: auto;
  padding: 16px 22px 28px;
}
.collab-help-intro {
  font-size: 12.5px; margin-bottom: 18px;
}
.collab-section {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 14px; margin-bottom: 18px;
}
.collab-section:last-child { margin-bottom: 0; }
.collab-section h4 {
  margin: 0 0 4px; font-size: 13.5px; font-weight: 700;
}
.collab-section p {
  margin: 0; font-size: 12.5px; line-height: 1.55;
  color: var(--text-primary);
}
.collab-section p b { font-weight: 600; }
.collab-section p code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; padding: 1px 5px;
  background: var(--bg-sunken); border-radius: 3px;
}
.collab-section-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.collab-section-tip {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.collab-tip-list {
  list-style: none; padding: 0; margin: 6px 0 0;
  font-size: 12.5px; line-height: 1.7;
}
.collab-tip-list li { padding: 2px 0; }
.collab-tip-list li b { color: var(--text-primary); }
.dm-help-pill {
  display: inline-block; padding: 0 5px; border-radius: 8px;
  font-size: 10px; font-weight: 700;
  vertical-align: 1px;
}

/* "Show me" button at the bottom of each help section. */
.collab-show-btn {
  display: inline-block; margin-top: 8px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 600;
  background: var(--accent-bg); color: var(--accent-text);
  border: 1px solid transparent; border-radius: 12px;
  cursor: pointer;
}
.collab-show-btn:hover {
  background: var(--accent); color: #fff;
}

/* Spotlight ring drawn over the target element when "Show me" is
   clicked. Pulses twice then fades. */
.collab-spotlight {
  position: fixed; pointer-events: none;
  z-index: var(--z-toast);
  border-radius: 10px;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.35),
              0 0 0 3px #fff,
              0 0 18px rgba(59, 130, 246, 0.6);
  animation: collab-spotlight-pulse 1.0s ease-out 2, collab-spotlight-fade 1.0s ease-in forwards 3.0s;
}
@keyframes collab-spotlight-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes collab-spotlight-fade {
  to { opacity: 0; box-shadow: 0 0 0 9999px rgba(15,23,42,0); }
}
@media (prefers-reduced-motion: reduce) {
  .collab-spotlight { animation: collab-spotlight-fade 0.5s ease-in forwards 3.0s; }
}

/* Callout label attached to a spotlight. */
.collab-callout {
  position: fixed; z-index: calc(var(--z-toast) + 1);
  width: 260px; max-width: calc(100vw - 16px);
  padding: 8px 12px;
  background: #1e293b; color: #f1f5f9;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: collab-callout-in .2s ease-out, collab-callout-fade .3s ease-in forwards 3.9s;
}
.collab-callout::after {
  /* downward-pointing arrow toward the highlighted element */
  content: '';
  position: absolute; left: 50%; bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
}
.collab-callout-below::after {
  bottom: auto; top: -6px;
  border-top-color: transparent;
  border-bottom-color: #1e293b;
}
@keyframes collab-callout-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes collab-callout-fade {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .collab-callout { animation: collab-callout-fade .3s ease-in forwards 3.9s; }
}

/* Floating selection-based formatting toolbar (additional in-context controls) */
.format-tb {
  position: absolute; z-index: var(--z-toolbar);
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 4px 6px;
  display: flex; align-items: center; gap: 2px;
  font-size: 13px;
  box-shadow: var(--shadow-pop);
}
.format-tb.hidden { display: none; }
.format-tb button {
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 3px;
  font-size: 13px; color: var(--text-primary);
  min-width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
.format-tb button:hover { background: var(--bg-sunken); }
.format-tb button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.format-tb .ft-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }

/* TipTap content styling — bullet/ordered lists, blockquote, headings */
.editor-page .ProseMirror ul { margin: 8px 0 8px 22px; list-style: disc; }
.editor-page .ProseMirror ol { margin: 8px 0 8px 22px; list-style: decimal; }
.editor-page .ProseMirror blockquote {
  border-left: 3px solid var(--border-strong); padding: 4px 12px;
  margin: 8px 0; color: var(--text-muted); font-style: italic;
}
.editor-page .ProseMirror h3 {
  font-size: 13px; font-weight: 700; margin: 14px 0 6px; color: var(--text-primary);
}
.editor-page .ProseMirror strong { font-weight: 700; }
.editor-page .ProseMirror em { font-style: italic; }
.editor-page .ProseMirror u { text-decoration: underline; }

/* Coding marks + floating toolbar */
.coded {
  background: color-mix(in srgb, var(--code-color, #94a3b8) 14%, transparent);
  border-bottom: 2px solid var(--code-color, #94a3b8);
  padding: 0 1px;
}
.coding-tb {
  position: absolute; z-index: var(--z-popover);
  background: #0f172a; color: white;
  border-radius: 6px; padding: 6px 8px;
  display: flex; align-items: center; gap: 4px;
  font-size: 11px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.coding-tb.hidden { display: none; }
.coding-tb-label { color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 4px; font-weight: 600; }
.coding-tb-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.2); margin: 0 4px; }
.coding-chip {
  background: rgba(255,255,255,0.10); border: none; color: white;
  padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px;
  display: inline-flex; align-items: center; gap: 4px;
}
.coding-chip:hover { background: rgba(255,255,255,0.20); }
.coding-chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.coding-chip.clear { background: rgba(220,38,38,0.20); color: #fecaca; }

/* AI suggest bar + panel */
.ai-bar { max-width: 820px; margin: 12px auto 32px; text-align: center; }
.ai-trigger {
  background: linear-gradient(135deg, #1a1a2e 0%, #312e81 100%);
  color: white; border: none; padding: 10px 20px; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 10px rgba(49, 46, 129, 0.3);
}
.ai-trigger:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(49, 46, 129, 0.4); }
.ai-panel {
  position: fixed; right: 380px; bottom: 16px; width: 460px; height: 540px;
  min-width: 360px; min-height: 280px; max-width: 95vw; max-height: 92vh;
  background: white; border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
  display: flex; flex-direction: column; z-index: var(--z-banner);
  overflow: hidden;
}
.ai-panel header { cursor: grab; user-select: none; -webkit-user-select: none; }
.ai-panel header:active { cursor: grabbing; }
.ai-panel-controls { display: flex; gap: 4px; align-items: center; }
.ai-panel-controls .ai-dock {
  background: none; border: none; color: #94a3b8; font-size: 14px;
  cursor: pointer; padding: 2px 6px; border-radius: 3px;
}
.ai-panel-controls .ai-dock:hover { color: white; background: rgba(255,255,255,0.08); }
.ai-panel .ai-step { flex: 1; min-height: 0; }
.ai-resize {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; z-index: var(--z-resize);
  background: linear-gradient(135deg, transparent 50%, #cbd5e1 50%, #cbd5e1 60%, transparent 60%,
    transparent 70%, #cbd5e1 70%, #cbd5e1 80%, transparent 80%);
}
.ai-panel.dragging { transition: none; cursor: grabbing; opacity: 0.92; }
.ai-panel.dragging * { pointer-events: none; }
.ai-panel.hidden { display: none; }
.ai-panel header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #e2e8f0; background: #1a1a2e; color: white;
  border-radius: 8px 8px 0 0;
}
.ai-panel header h3 { font-size: 13px; font-weight: 700; margin: 0; }
.ai-panel header .close { background: none; border: none; color: #cbd5e1; font-size: 20px; cursor: pointer; line-height: 1; padding: 0; }
.ai-panel header .close:hover { color: white; }
.ai-step { padding: 14px 16px; overflow-y: auto; }
.ai-step.hidden { display: none; }
.ai-step label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; font-weight: 600; margin-bottom: 6px; }
.ai-step textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 12px; font-family: inherit; resize: vertical; color: #1e293b;
}
.ai-step textarea:focus { outline: 2px solid #3b82f6; outline-offset: -1px; border-color: transparent; }
.ai-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.ai-actions button { padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); }
.ai-actions button:hover { background: var(--bg-sunken); }
.ai-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ai-actions button.primary:hover { filter: brightness(0.92); }
.ai-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-actions .muted { color: #94a3b8; font-size: 11px; }
.ai-actions .checkbox { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #475569; margin-right: auto; }

.spin { color: #64748b; font-size: 13px; padding: 20px; text-align: center; }

.preview-summary { font-size: 11px; color: #475569; margin-bottom: 10px; padding: 6px 10px; background: #f8fafc; border-radius: 4px; }
.preview-summary .verified { color: #15803d; font-weight: 600; }
.preview-summary .unverified { color: #b45309; font-weight: 600; }
.preview-text {
  background: #fafbfc; border-left: 3px solid #3b82f6; padding: 10px 12px;
  font-size: 12px; line-height: 1.6; color: #1e293b; border-radius: 0 4px 4px 0;
  margin-bottom: 12px;
}
.preview-claims { list-style: none; }
.preview-claims li {
  padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 4px;
  margin-bottom: 6px; font-size: 11px;
}
.preview-claims li.verified { border-left: 3px solid #16a34a; }
.preview-claims li.unverified { border-left: 3px solid #f59e0b; background: #fffbeb; }
.preview-claims .pc-cited { font-weight: 600; color: #0f172a; }
.preview-claims .pc-src {
  margin-top: 4px; color: #64748b; font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; padding: 4px 6px; background: #f1f5f9; border-radius: 3px;
}
.preview-claims .pc-pill {
  display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 10px;
  font-weight: 600; margin-left: 6px;
}
.preview-claims .pc-pill.ok { background: #dcfce7; color: #15803d; }
.preview-claims .pc-pill.unv { background: #fef3c7; color: #b45309; }
.preview-claims .pc-err { color: #b91c1c; font-size: 10px; margin-top: 4px; font-style: italic; }
.err { background: #fee2e2; color: #b91c1c; padding: 8px 12px; border-radius: 4px; font-size: 12px; margin-bottom: 10px; }

.page {
  background: var(--bg-card); max-width: 820px; margin: 0 auto;
  padding: 48px 64px;
  box-shadow: var(--shadow-card);
  min-height: 600px;
}
.editor-page .block-host { margin-bottom: 8px; }
.editor-page .ProseMirror { outline: none; min-height: 28px; font-size: 13px; line-height: 1.7; color: var(--text-primary); }
.editor-page .ProseMirror p { margin-bottom: 8px; }
.editor-page .ProseMirror h2 {
  font-size: 14px; font-weight: 700; padding-bottom: 5px;
  border-bottom: 1px solid var(--border-strong); margin: 18px 0 10px; color: var(--text-primary);
}
.editor-page .ai-block .ProseMirror { background: linear-gradient(transparent 92%, #fef9c3 92%) repeat-y; }

/* ─── Citation pills ─────────────────────────────────────────────────── */
.cite {
  background: #eff6ff; color: #1d4ed8;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600;
  vertical-align: super; margin-left: 2px;
  border: 1px solid #bfdbfe; cursor: pointer;
  user-select: none;
  display: inline-block;
}
.cite:hover { background: #dbeafe; }
.cite.active { background: #1d4ed8; color: white; border-color: #1d4ed8; }
.cite.unv { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.cite.unv::after { content: '?'; margin-left: 1px; }

/* Exhibit pills render inline (not superscripted) — Ex. A, Ex. B, …
   Looks like a parenthetical reference, matches the DOCX output. */
.cite-exhibit {
  vertical-align: baseline;
  font-size: 11px;
  padding: 1px 7px;
  background: #ecfdf5; color: #166534; border-color: #a7f3d0;
}
.cite-exhibit:hover { background: #d1fae5; }
.cite-exhibit.unv { background: #fef3c7; color: #b45309; border-color: #fde68a; }
/* Unmapped exhibit (no letter assigned yet) keeps the old S# look as a hint */
.cite-exhibit.unmapped {
  background: #f1f5f9; color: #475569; border-color: #cbd5e1;
}

/* Authority pills stay superscripted — footnote-number style */
.cite-authority {
  vertical-align: super;
  font-size: 9px;
  padding: 0 4px;
  background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe;
  font-weight: 700;
}
.cite-authority:hover { background: #e9d5ff; }

/* Internal cross-reference */
.cite-internal {
  vertical-align: baseline;
  font-size: 10px;
  background: #f8fafc; color: #64748b; border-color: #e2e8f0;
  font-style: italic;
}

/* ─── Evidence pane ──────────────────────────────────────────────────── */
.evidence-pane { background: var(--bg-card); border-left: 1px solid var(--border); padding: 16px 18px; overflow-y: auto; min-height: 0; }
.evidence-pane h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
.evidence-pane .ev-meta { font-size: 11px; color: var(--text-muted); margin: 6px 0 10px; font-family: ui-monospace, Menlo, monospace; }
.evidence-pane .verif-pill {
  display: inline-block; padding: 2px 7px; background: #dcfce7; color: #15803d;
  font-size: 10px; font-weight: 600; border-radius: 10px; margin-bottom: 6px;
}
.evidence-pane .verif-pill.unv { background: #fef3c7; color: #b45309; }
.evidence-pane .ev-doc {
  background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 4px;
  padding: 12px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; line-height: 1.65; color: #334155;
  white-space: pre-wrap;
}
.evidence-pane .hl {
  background: #fef08a; padding: 1px 3px;
  border-bottom: 2px solid #f59e0b;
}
.evidence-pane .ev-title { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 4px; }

/* Evidence pane tabs */
.ev-tabs { display: flex; border-bottom: 1px solid #e2e8f0; margin: -16px -18px 12px; }
.ev-tab {
  flex: 1; padding: 10px 12px; font-size: 12px; font-weight: 500;
  color: #64748b; background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ev-tab.active { color: #0f172a; border-bottom-color: #3b82f6; }
.ev-body { }

/* Focus mode — prev/next nav */
.ev-nav { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.ev-nav button {
  font-size: 11px; padding: 4px 9px; border: 1px solid #cbd5e1;
  background: white; border-radius: 4px; cursor: pointer; color: #334155;
}
.ev-nav button:disabled { color: #cbd5e1; cursor: not-allowed; background: #f8fafc; }
.ev-nav button:hover:not(:disabled) { background: #f1f5f9; }

.ev-search { margin-bottom: 8px; }
.ev-search input {
  width: 100%; padding: 7px 10px;
  border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px;
}
.ev-search input:focus { outline: 2px solid #3b82f6; outline-offset: -1px; border-color: transparent; }
.doc-row.hit { border-left: 3px solid #f59e0b; background: #fffbeb; }
.doc-snippet { font-style: italic; color: #475569; white-space: normal; }

/* Browse mode — doc list */
.doc-list { list-style: none; margin-top: 6px; }
.doc-row {
  display: grid; grid-template-columns: 72px 1fr; gap: 10px;
  padding: 10px; border-bottom: 1px solid #f1f5f9; cursor: pointer;
  align-items: center; border-radius: 4px;
}
.doc-row:hover { background: #f8fafc; }
.doc-type {
  font-size: 9px; font-weight: 700; padding: 4px 6px;
  background: #dbeafe; color: #1d4ed8; border-radius: 3px;
  text-align: center; text-transform: uppercase; letter-spacing: 0.3px;
  /* Allow long doc-types to wrap rather than overflow into the metadata column */
  word-break: break-word; line-height: 1.2;
  min-width: 0; max-width: 72px;
}
.doc-name { font-weight: 600; color: #0f172a; font-size: 12px; }
.doc-sub  { color: #64748b; font-size: 11px; margin-top: 2px; }

/* Browse mode — full doc viewer */
.ev-doc-header { margin-bottom: 8px; }
.back-link {
  background: none; border: none; color: #3b82f6; font-size: 12px;
  cursor: pointer; padding: 0; margin-bottom: 6px; font-weight: 600;
}
.ev-help {
  background: #eff6ff; color: #1d4ed8; padding: 6px 10px;
  border-radius: 4px; font-size: 11px; margin: 6px 0;
}
.ev-doc.selectable {
  max-height: calc(100vh - 320px); overflow-y: auto; user-select: text;
  cursor: text;
}
/* Citation marks — dotted underline only (NO background fill) so they
   layer cleanly over coded passages. Coding is the "highlighter pen"
   (background tint = analytical tag); citing is the "footnote marker"
   (underline = provenance link to a draft). When a span is both
   coded AND cited the user sees both layers without one obscuring
   the other. */
.ev-doc mark.hl {
  background: transparent; color: inherit; padding: 0;
  border-bottom: 2px dashed #3b82f6; cursor: pointer;
}
.ev-doc mark.hl.unv {
  border-bottom-color: #b45309; border-bottom-style: dotted;
}

/* Floating cite toolbar */
.cite-toolbar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: #0f172a; color: white; padding: 8px 10px;
  border-radius: 6px; display: flex; align-items: center; gap: 8px;
  font-size: 11px; margin-top: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cite-toolbar.hidden { display: none; }
.cite-tb-q { flex: 1; color: #cbd5e1; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cite-go {
  background: #3b82f6; color: white; border: none;
  padding: 5px 12px; border-radius: 4px; cursor: pointer;
  font-size: 11px; font-weight: 600;
}
.cite-go:hover { background: #2563eb; }

/* ─── Firm settings (admin) ─────────────────────────────────────────── */
.topbar-link {
  font-size: 13px; color: #475569; text-decoration: none;
  padding: 4px 10px; border-radius: 4px; margin-right: 10px;
}
.topbar-link:hover { background: #f1f5f9; color: #1e293b; }
.user-role {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 1px 6px; border-radius: 3px; margin-left: 6px;
  background: #e2e8f0; color: #475569;
}
.user-role.role-admin    { background: #fee2e2; color: #991b1b; }
.user-role.role-lawyer   { background: #dbeafe; color: #1e40af; }
.user-role.role-paralegal{ background: #ecfccb; color: #3f6212; }

/* ─── User menu (topbar account dropdown) ──────────────────────── */
.user-menu { position: relative; }
.user-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 18px;
  background: rgba(255,255,255,0.06); border: 1px solid transparent;
  color: var(--topbar-text); font-size: 12px; cursor: pointer;
  transition: background .12s;
}
.user-trigger:hover { background: rgba(255,255,255,0.12); }
.user-trigger[aria-expanded="true"] {
  background: rgba(255,255,255,0.16);
}
.user-trigger .user-name { font-weight: 600; }
.user-trigger .user-role { margin-left: 2px; }
.user-trigger .user-caret { font-size: 10px; opacity: 0.7; }

.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  z-index: var(--z-modal);
  min-width: 220px; padding: 6px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-pop);
}
.user-dropdown.hidden { display: none; }
.user-dropdown-head {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.user-dropdown-name { font-weight: 700; font-size: 13px; }
.user-dropdown-role {
  font-size: 11px; margin-top: 2px;
  text-transform: capitalize;
}
.user-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--text-primary); cursor: pointer;
  font-size: 13px; text-align: left;
  text-decoration: none;
}
.user-dropdown-item:hover { background: var(--bg-soft); }
.user-dropdown-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; font-size: 13px;
  color: var(--text-muted);
}
.user-dropdown-sep {
  border: 0; border-top: 1px solid var(--border);
  margin: 6px 0;
}
.user-dropdown-danger { color: #b91c1c; }
.user-dropdown-danger:hover { background: #fee2e2; color: #991b1b; }
.user-dropdown-danger .user-dropdown-ico { color: #b91c1c; }
:root[data-theme="dark"] .user-dropdown-danger { color: #fca5a5; }
:root[data-theme="dark"] .user-dropdown-danger:hover { background: #3a0d0d; color: #fecaca; }
:root[data-theme="dark"] .user-dropdown-danger .user-dropdown-ico { color: #fca5a5; }
.container.narrow { max-width: 880px; margin: 0 auto; padding: 24px; }
.settings-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 20px 24px; margin-bottom: 20px;
}
.settings-card h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: #1e293b; }
.settings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.settings-table th, .settings-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.settings-table th { font-weight: 600; color: #64748b; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.4px; }
.settings-table tr.deactivated td { opacity: 0.55; }
.settings-table code { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 12px; color: #475569; }
.role-pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; background: #e2e8f0; color: #475569;
}
.role-pill.role-admin    { background: #fee2e2; color: #991b1b; }
.role-pill.role-lawyer   { background: #dbeafe; color: #1e40af; }
.role-pill.role-paralegal{ background: #ecfccb; color: #3f6212; }
.status-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
}
.status-tag.active        { background: #dcfce7; color: #166534; }
.status-tag.inactive      { background: #f1f5f9; color: #64748b; }
.status-tag.inv-pending   { background: #fef3c7; color: #92400e; }
.status-tag.inv-accepted  { background: #dcfce7; color: #166534; }
.status-tag.inv-revoked   { background: #f1f5f9; color: #64748b; }
.status-tag.inv-expired   { background: #fee2e2; color: #991b1b; }
.btn-mini {
  font-size: 12px; padding: 4px 10px; border-radius: 4px;
  border: 1px solid #cbd5e1; background: white; color: #334155; cursor: pointer;
}
.btn-mini:hover { background: #f8fafc; }
.btn-mini.danger { color: #b91c1c; border-color: #fca5a5; }
.btn-mini.danger:hover { background: #fef2f2; }
.self-tag { font-size: 11px; color: #64748b; font-weight: 500; }
.flash {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 16px;
  font-size: 13px; border-left: 3px solid;
}
.flash.ok    { background: #f0fdf4; border-color: #16a34a; color: #166534; }
.flash.error { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.invite-form {
  display: grid; grid-template-columns: 100px 1fr; gap: 10px 12px;
  max-width: 520px; align-items: center;
}
.invite-form label { font-size: 12px; color: #475569; font-weight: 600; }
.invite-form select, .invite-form input[type="email"] {
  padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px;
}
.invite-form button { grid-column: 2; justify-self: start; margin-top: 6px; }
.invite-link-card {
  display: flex; gap: 8px; padding: 14px; background: #f8fafc;
  border: 1px solid #cbd5e1; border-radius: 6px; margin: 12px 0;
}
.invite-link-card input {
  flex: 1; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 12px; background: white;
}
.invite-link-card button {
  padding: 8px 16px; background: #3b82f6; color: white; border: none;
  border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 13px;
}
.hint { font-size: 12px; }

/* Accept-invite page */
.accept-card {
  max-width: 440px; margin: 60px auto; padding: 32px;
  background: white; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
.accept-card h1 { margin-top: 0; font-size: 20px; }
.accept-card label { display: block; margin: 14px 0 4px; font-size: 12px; font-weight: 600; color: #475569; }
.accept-card input {
  width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1;
  border-radius: 4px; font-size: 14px; box-sizing: border-box;
}
.accept-card button { width: 100%; margin-top: 16px; padding: 10px;
  background: #3b82f6; color: white; border: none; border-radius: 4px;
  font-size: 14px; font-weight: 600; cursor: pointer; }

/* ─── Pessimistic lock banner ────────────────────────────────────────── */
.lock-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  color: #78350f; padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 500;
  border-bottom: 1px solid #f59e0b;
  z-index: var(--z-panel);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.lock-banner .lock-icon { font-size: 16px; }
.lock-banner .lock-msg { flex: 1; }
.lock-banner .lock-takeover {
  background: #b45309; color: white; border: none;
  padding: 5px 14px; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.lock-banner .lock-takeover:hover { background: #92400e; }

/* Push body content down so the banner doesn't cover the topbar. */
body.lock-readonly { padding-top: 40px; }
body.lock-readonly .ProseMirror {
  background: #f8fafc; opacity: 0.75;
  pointer-events: none; user-select: text;
}
body.lock-readonly .save-status::before { content: '🔒 '; }

/* AI claims pane — empty-evidence state + Find-evidence button */
.pc-src-empty {
  color: #92400e; font-size: 12px; font-style: italic;
  display: flex; align-items: center; gap: 8px;
}
.pc-find {
  background: #3b82f6; color: white; border: none;
  padding: 3px 10px; border-radius: 4px; font-size: 11px;
  font-weight: 600; cursor: pointer;
}
.pc-find:hover { background: #2563eb; }

/* Claim verification banner in evidence rail */
.verify-banner {
  background: linear-gradient(180deg, #ecfdf5, #d1fae5);
  border: 1px solid #6ee7b7; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px;
}
.verify-banner .vb-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.verify-banner .vb-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  color: #047857; background: #a7f3d0;
  padding: 2px 8px; border-radius: 10px;
}
.verify-banner .vb-step {
  font-size: 11px; color: #047857; font-weight: 500;
  background: rgba(167, 243, 208, 0.5); padding: 2px 8px; border-radius: 10px;
}
.verify-banner .vb-cancel {
  background: white; border: 1px solid #6ee7b7; color: #047857;
  font-size: 11px; font-weight: 500;
  cursor: pointer; line-height: 1.2; padding: 4px 10px; border-radius: 4px;
}
.verify-banner .vb-cancel:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.verify-banner .vb-context {
  background: rgba(255,255,255,0.55); border: 1px dashed #6ee7b7; border-radius: 6px;
  padding: 6px 9px; margin: 6px 0 8px;
}
.verify-banner .vb-context-label {
  font-size: 9.5px; font-weight: 600; color: #047857;
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-bottom: 2px;
}
.verify-banner .vb-context-text {
  font-size: 11.5px; color: #064e3b; font-style: italic; line-height: 1.45;
}
.verify-banner .vb-claim-label {
  font-size: 10px; font-weight: 600; color: #047857;
  letter-spacing: 0.4px; text-transform: uppercase;
  margin: 6px 0 2px;
}
.verify-banner .vb-claim {
  font-size: 13px; color: #064e3b; font-style: italic;
  margin-bottom: 8px; line-height: 1.45;
  padding: 4px 8px; background: rgba(255,255,255,0.55); border-radius: 4px;
  border-left: 3px solid #10b981;
}
.verify-banner .vb-hint { font-size: 11.5px; color: #047857; }
.verify-banner .vb-status {
  margin-top: 8px; padding: 5px 10px;
  background: rgba(255,255,255,0.7); border-radius: 4px;
  font-size: 11px; color: #475569; font-style: italic;
  border: 1px solid transparent;
}
.verify-banner .vb-status-ready {
  background: #fef3c7; color: #78350f; font-style: normal; font-weight: 500;
  border-color: #f59e0b;
}
.ev-hintbar {
  font-size: 11px; color: #64748b; margin: 6px 2px 8px;
}
.ev-hintbar a { color: #3b82f6; text-decoration: none; font-weight: 500; }
.ev-hintbar a:hover { text-decoration: underline; }

/* Exhibit rename pencil */
.mp-exhibits .ex-rename {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  font-size: 12px; margin-left: 4px; padding: 1px 5px; border-radius: 3px;
}
.mp-exhibits .ex-rename:hover { color: #3b82f6; background: #eff6ff; }
.mp-exhibits .ex-filename { color: #94a3b8; font-size: 11px; margin-left: 6px; }

/* ─── Editor pagination guides (visual only) ─────────────────────────── */
/* Each guide is JS-injected at the right scroll position. Lets the
   writer see roughly where their content will paginate in the DOCX,
   without trying to enforce true page breaks in ProseMirror. */
.editor-page { position: relative; }
.page-guide {
  position: absolute; left: -64px; right: -64px;
  height: 40px; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%, transparent 49%,
    rgba(148, 163, 184, 0.35) 49%, rgba(148, 163, 184, 0.35) 51%,
    transparent 51%, transparent 100%);
  z-index: 1;
}
.page-guide::after {
  content: '— page ' attr(data-page) ' —';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: white; padding: 0 10px;
  font-size: 10px; color: #94a3b8;
  font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ─── Documents library ─────────────────────────────────────────────── */
.dl-shell { max-width: 1200px; margin: 24px auto; padding: 0 24px; }
.dl-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 18px; gap: 16px;
}
.dl-head h1 { margin: 0 0 4px; font-size: 22px; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.head-actions > .btn-primary,
.head-actions > .btn-secondary,
.head-actions > a,
.head-actions > button { white-space: nowrap; padding: 7px 12px; font-size: 12.5px; }
.dl-search {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 14px;
}
.dl-search input[type="search"] {
  flex: 0 1 320px; padding: 7px 11px; font-size: 13px;
  border: 1px solid #cbd5e1; border-radius: 4px;
}
.dl-search input[type="search"]:focus { outline: 2px solid #3b82f6; outline-offset: -1px; border-color: transparent; }
.dl-clear { font-size: 11px; color: #64748b; text-decoration: none; padding: 0 6px; }
.dl-clear:hover { color: #b91c1c; }
.dl-facets {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 8px; font-size: 12px;
}
.dl-facet-label { color: #64748b; font-weight: 600; margin-right: 6px; min-width: 50px; }
.dl-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 11px;
  background: #f1f5f9; color: #475569; text-decoration: none;
  border: 1px solid transparent; transition: background 0.1s, border-color 0.1s;
}
.dl-chip:hover { background: #e2e8f0; }
.dl-chip.active {
  background: #dbeafe; color: #1e40af; border-color: #93c5fd; font-weight: 600;
}
.dl-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  margin-top: 14px; background: white; border: 1px solid #e2e8f0;
  border-radius: 6px; overflow: hidden;
}
.dl-table thead {
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.dl-table th {
  text-align: left; padding: 9px 10px; font-weight: 600;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: #64748b;
}
.dl-table td {
  padding: 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle;
}
.dl-table tr:last-child td { border-bottom: none; }
.dl-table tr:hover { background: #f8fafc; }
.dl-num { text-align: right; font-variant-numeric: tabular-nums; color: #475569; }
.dl-date { white-space: nowrap; }
.dl-ex { white-space: nowrap; }
.dl-exhibit-letter {
  display: inline-block; font-weight: 700; font-size: 11px;
  background: #fef3c7; color: #78350f; padding: 2px 7px; border-radius: 3px;
}
.dl-name { min-width: 220px; }
.dl-link { color: #1e293b; text-decoration: none; font-weight: 500; }
.dl-link:hover { color: #3b82f6; text-decoration: underline; }
.dl-sub { font-size: 11px; margin-top: 2px; }
.dl-pill {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px;
  background: #f1f5f9; color: #475569; text-transform: lowercase;
}
.dl-pill-noa, .dl-pill-t1 { background: #dbeafe; color: #1e40af; }
.dl-pill-pay_stub { background: #dcfce7; color: #166534; }
.dl-pill-offer_letter { background: #f3e8ff; color: #6b21a8; }
.dl-pill-bank_statement, .dl-pill-rrsp { background: #fef3c7; color: #92400e; }
.dl-pill-property_valuation, .dl-pill-mortgage_statement { background: #fce7f3; color: #9d174d; }
.dl-status { font-size: 11px; font-weight: 600; text-transform: lowercase; }
.dl-status-ready { color: #166534; }
.dl-status-pending { color: #92400e; }
.dl-status-error { color: #b91c1c; }
.dl-actions { white-space: nowrap; text-align: right; }
.dl-act {
  display: inline-block; padding: 3px 7px; border-radius: 4px;
  text-decoration: none; color: #64748b; font-size: 14px;
}
.dl-act:hover { background: #eff6ff; color: #3b82f6; }
.dl-empty {
  text-align: center; padding: 60px 20px; color: #64748b;
  background: white; border: 1px dashed #cbd5e1; border-radius: 6px;
}
.dl-empty p { margin-bottom: 16px; }

/* ─── Doc tray (in-app document viewer with tabs + backlinks) ─────────── */
.doc-tray {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 720px; max-width: 92vw;
  background: white; border-left: 1px solid #cbd5e1;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
  display: flex; flex-direction: column;
  z-index: 200;
  transition: transform 0.2s ease;
}
.doc-tray.hidden { display: none; }
body.doc-tray-open { /* room for the tray; pages don't need to reflow currently */ }

.dt-head {
  display: flex; align-items: stretch; background: #1a1a2e; color: white;
  border-bottom: 1px solid #334155; flex-shrink: 0;
}
.dt-tabs {
  flex: 1; display: flex; gap: 1px; overflow-x: auto;
  background: #0f172a;
}
.dt-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; max-width: 220px;
  background: #1a1a2e; color: #cbd5e1; cursor: pointer;
  font-size: 12px; border-right: 1px solid #0f172a;
  white-space: nowrap;
}
.dt-tab:hover { background: #243047; }
.dt-tab.active { background: white; color: #1e293b; font-weight: 600; }
.dt-tab-label { overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.dt-tab-close {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 4px; opacity: 0.6;
  border-radius: 3px;
}
.dt-tab-close:hover { opacity: 1; background: rgba(0,0,0,0.15); }
.dt-tab.active .dt-tab-close { color: #64748b; }

.dt-actions { display: flex; align-items: center; padding: 0 6px; }
.dt-action {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  font-size: 14px; padding: 6px 10px; border-radius: 3px;
}
.dt-action:hover { background: rgba(255,255,255,0.08); color: white; }

.dt-body {
  flex: 1; display: grid; grid-template-columns: 1fr 260px;
  overflow: hidden; min-height: 0;
}
.dt-viewer {
  overflow: auto; background: #1e293b; min-height: 0;
}
.dt-loading, .dt-empty, .dt-err {
  padding: 32px; text-align: center; color: #cbd5e1; font-size: 13px;
}
.dt-err { color: #fca5a5; }

.dt-side {
  border-left: 1px solid #e2e8f0; background: #f8fafc;
  overflow-y: auto; padding: 12px 14px; min-height: 0;
}
.dt-side h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: #64748b;
}
.dt-usage .muted { font-size: 12px; }
.dt-draft-group { margin-bottom: 14px; }
.dt-draft-head {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: 11px; margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}
.dt-draft-code {
  background: #1e293b; color: white; padding: 1px 6px; border-radius: 3px;
  font-family: ui-monospace, monospace; font-weight: 600;
}
.dt-draft-title { color: #1e293b; font-weight: 600; flex: 1; }
.dt-draft-status {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 1px 5px; border-radius: 3px; background: #e2e8f0; color: #475569;
}
.dt-draft-status.ds-signed_off { background: #dcfce7; color: #166534; }
.dt-draft-status.ds-filed { background: #dbeafe; color: #1e40af; }

.dt-bl-list { list-style: none; padding: 0; margin: 0; }
.dt-bl-list li {
  margin-bottom: 8px; padding: 8px;
  background: white; border: 1px solid #e2e8f0; border-radius: 4px;
}
.dt-backlink {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit; font-size: 12px;
}
.dt-bl-quote { color: #1e293b; line-height: 1.4; }
.dt-bl-meta {
  display: flex; gap: 6px; align-items: center; font-size: 10px;
}
.dt-bl-ok { color: #16a34a; font-weight: 700; }
.dt-bl-unv { color: #b45309; font-weight: 700; }
.dt-bl-block {
  margin-top: 6px; padding: 6px 8px; background: #f1f5f9; border-radius: 3px;
  font-size: 11px; color: #475569; font-style: italic; line-height: 1.35;
}
.dt-backlink:hover .dt-bl-quote { color: #3b82f6; text-decoration: underline; }

@media (max-width: 1024px) {
  .doc-tray { width: 100vw; max-width: 100vw; }
  .dt-body { grid-template-columns: 1fr; }
  .dt-side { border-left: none; border-top: 1px solid #e2e8f0; max-height: 240px; }
}

/* Block-flash animation when arriving via #block-:id from a doc-tray backlink */
@keyframes block-flash-anim {
  0%   { box-shadow: 0 0 0 3px #fde68a, 0 0 0 4px #f59e0b; background: #fffbeb; }
  100% { box-shadow: 0 0 0 0   #fde68a, 0 0 0 0   transparent; background: transparent; }
}
.block-host.block-flash {
  animation: block-flash-anim 1.6s ease-out;
  border-radius: 4px;
}

/* ─── Subject background panel ─────────────────────────────────────── */
.bg-shell { max-width: 980px; margin: 24px auto; padding: 0 24px; }
.bg-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px; gap: 20px;
}
.bg-head h1 { margin: 0 0 6px; font-size: 22px; }
.bg-head p { margin: 0; max-width: 640px; font-size: 13px; }
.bg-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 20px 24px; margin-bottom: 16px;
}
.bg-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9; flex-wrap: wrap;
}
.bg-card-head h2 { margin: 0; font-size: 17px; color: #1e293b; }
.bg-role {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 2px 8px; border-radius: 10px;
  background: #e2e8f0; color: #475569;
}
.bg-role-claimant { background: #dbeafe; color: #1e40af; }
.bg-role-respondent { background: #fce7f3; color: #9d174d; }
.bg-role-child { background: #ecfccb; color: #3f6212; }
.bg-updated { margin-left: auto; font-size: 11px; }
.bg-form { display: flex; flex-direction: column; gap: 14px; }
.bg-field { display: flex; flex-direction: column; gap: 4px; }
.bg-label { font-size: 11px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; }
.bg-label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bg-field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 13px; font-family: inherit; line-height: 1.5; resize: vertical;
  color: #1e293b; box-sizing: border-box;
}
.bg-field textarea:focus {
  outline: 2px solid #3b82f6; outline-offset: -1px; border-color: transparent;
}
.bg-field-narrative textarea {
  background: #fffbeb; border-color: #fde68a;
}
.bg-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid #f1f5f9;
}
.bg-status { font-size: 12px; }
.bg-card-children { background: #f8fafc; }
.bg-children-list { list-style: none; padding: 0; margin: 0 0 8px; }
.bg-children-list li { padding: 4px 0; font-size: 13px; }
.bg-child-hint { font-size: 11px; }

/* ─── Outline rail ─────────────────────────────────────────────────── */
.outline-h {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #64748b; margin: 16px 0 6px;
}
.outline { list-style: none; padding: 0; margin: 0 0 14px; }
.outline-draft { margin-bottom: 2px; }
.outline-draft-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 4px;
  text-decoration: none; color: #475569; font-size: 12px;
  border-left: 2px solid transparent;
}
.outline-draft-row:hover { background: #f1f5f9; color: #1e293b; }
.outline-draft.active > .outline-draft-row {
  background: #eff6ff; color: #1e293b; font-weight: 600;
  border-left-color: #3b82f6;
}
.outline-draft .d-code {
  background: #1e293b; color: white; padding: 1px 6px; border-radius: 3px;
  font-family: ui-monospace, monospace; font-size: 10px; font-weight: 600;
  flex-shrink: 0;
}
.outline-draft .d-title { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.outline-draft .d-status {
  font-size: 9px; padding: 1px 5px; border-radius: 2px;
  background: #e2e8f0; color: #475569; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.outline-headings {
  list-style: none; padding: 0; margin: 2px 0 8px 12px;
  border-left: 1px solid #e2e8f0;
}
.outline-head {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 10px; text-decoration: none; color: #64748b;
  font-size: 11px; line-height: 1.4;
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.outline-head:hover { background: #f8fafc; color: #1e293b; }
.outline-head.current {
  background: #fef3c7; color: #78350f; font-weight: 600;
  border-left-color: #f59e0b;
}
.outline-head .oh-num {
  display: inline-block; min-width: 14px; flex-shrink: 0;
  font-variant-numeric: tabular-nums; color: #94a3b8; font-weight: 500;
}
.outline-head.current .oh-num { color: #b45309; }
.outline-head .oh-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* ─── Export modal: zip selection (preset + grouped attachments) ──── */
.zip-selection { margin-top: 12px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
.zip-selection.hidden { display: none; }
.preset-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; margin-bottom: 10px; }
.preset-row label { display: flex; gap: 6px; align-items: flex-start; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.preset-row label:hover { background: #eff6ff; }
.preset-row input[type="radio"]:checked + b { color: #1e40af; }
.zip-inventory { margin-top: 8px; max-height: 280px; overflow-y: auto; }
.zip-group { margin-bottom: 12px; padding: 8px; background: white; border: 1px solid #e2e8f0; border-radius: 4px; }
.zip-group h5 {
  margin: 0 0 6px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; color: #64748b;
}
.zip-group-exhibit h5 { color: #166534; }
.zip-group-authority h5 { color: #1e40af; }
.zip-row {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center;
  padding: 4px 0; font-size: 12px;
}
.zip-row + .zip-row { border-top: 1px dashed #f1f5f9; }
.zip-row:hover { background: #f8fafc; }
.zip-name { color: #1e293b; }
.zip-meta { font-size: 10px; }

/* Party rename pencil on the matter overview */
.party-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.party-name { flex: 1; }
.party-edit, .party-portal, .party-portal-revoke {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: 12px; padding: 2px 6px; border-radius: 3px;
}
.party-edit:hover, .party-portal:hover { color: var(--accent); background: var(--accent-bg); }
.party-portal-revoke:hover { color: #b91c1c; background: #fee2e2; }
:root[data-theme="dark"] .party-portal-revoke:hover { color: #fca5a5; background: #3a0d0d; }

/* Expanded subject-background sections */
.bg-section {
  border: 1px solid #e2e8f0; border-radius: 6px;
  margin-bottom: 8px; background: white;
}
.bg-section summary {
  padding: 10px 14px; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 12px;
  border-radius: 6px;
}
.bg-section summary:hover { background: #f8fafc; }
.bg-section[open] summary { border-bottom: 1px solid #e2e8f0; }
.bg-section .bg-sec-title { font-weight: 600; font-size: 13px; color: #1e293b; }
.bg-section .bg-sec-note  { font-size: 11px; flex: 1; }
.bg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
  padding: 14px;
}
.bg-grid .bg-field { display: flex; flex-direction: column; gap: 4px; }
.bg-grid .bg-field-narrow { grid-column: span 1; }
.bg-grid .bg-field input[type="text"],
.bg-grid .bg-field input[type="date"],
.bg-grid .bg-field textarea {
  width: 100%; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 12px; font-family: inherit; box-sizing: border-box;
}
.bg-grid .bg-field textarea { line-height: 1.45; resize: vertical; }
.bg-grid .bg-field input:focus, .bg-grid .bg-field textarea:focus {
  outline: 2px solid #3b82f6; outline-offset: -1px; border-color: transparent;
}
.bg-children-h {
  margin-top: 24px; margin-bottom: 12px;
  font-size: 16px; color: #1e293b; padding-top: 12px;
  border-top: 2px solid #e2e8f0;
}
.bg-card-child { background: #fafdf7; }

@media (max-width: 700px) {
  .bg-grid { grid-template-columns: 1fr; }
}

/* ─── Documents-by-category on the matter overview ───────────────── */
.docs-by-cat {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
.dc-section-h {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.dc-section-count {
  background: var(--bg-sunken); color: var(--text-muted);
  padding: 1px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.dc-group { margin-bottom: 16px; }
.dc-h {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: #64748b; margin: 0 0 6px;
  display: flex; align-items: center; gap: 8px;
}
.dc-count {
  background: #e2e8f0; color: #475569; padding: 0 6px;
  border-radius: 8px; font-size: 10px; font-weight: 600;
}
.dc-list { list-style: none; padding: 0; margin: 0; }
.dc-list li { margin-bottom: 2px; }
.dc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 4px;
  text-decoration: none; color: #1e293b; font-size: 13px;
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.dc-row:hover { background: #f1f5f9; border-left-color: #3b82f6; }
.dc-code {
  background: #1e293b; color: white; padding: 1px 7px; border-radius: 3px;
  font-family: ui-monospace, monospace; font-size: 10px; font-weight: 600;
  min-width: 36px; text-align: center; flex-shrink: 0;
}
.dc-title { flex: 1; }
.d-status {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.d-status.d-draft    { background: #fef3c7; color: #78350f; }
.d-status.d-signed   { background: #dcfce7; color: #166534; }
.d-status.d-filed    { background: #dbeafe; color: #1e40af; }
.d-status.d-archived { background: #f1f5f9; color: #64748b; }

/* New-draft modal */
#new-draft-modal .modal-body { display: flex; flex-direction: column; gap: 6px; }
#new-draft-modal label { font-size: 11px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 6px; }
#new-draft-modal select, #new-draft-modal input[type="text"] {
  padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 13px; font-family: inherit;
}

/* ─── Practice notes tab ─────────────────────────────────────────── */
/* Practice notes — typography. Serif body for the lawyerly feel,
   sans-serif headers + tags, accent-numbered test prongs, all on CSS
   variables so dark mode picks up cleanly. */
.pn-shell {
  padding: 14px 4px 24px;
  font-family: Georgia, 'Times New Roman', serif;
}
.pn-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-family: system-ui, -apple-system, sans-serif;
}
.pn-form-tag {
  background: var(--text-primary); color: var(--bg-card);
  padding: 2px 8px; border-radius: 3px;
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.4px;
}
.pn-heading {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  font-family: system-ui, -apple-system, sans-serif;
}
.pn-note {
  background: #fef3c7; border-left: 3px solid #f59e0b;
  padding: 12px 14px; border-radius: 0 4px 4px 0;
  font-size: 13px; line-height: 1.6; color: #78350f;
  margin-bottom: 18px;
}
:root[data-theme="dark"] .pn-note { background: #3d2e0a; color: #fde68a; }
.pn-h {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-muted);
  margin: 22px 0 10px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-family: system-ui, -apple-system, sans-serif;
}
.pn-list { list-style: none; padding: 0; margin: 0; }
.pn-list li {
  padding: 11px 0; border-bottom: 1px dashed var(--border);
}
.pn-list li:last-child { border-bottom: none; }
.pn-stat, .pn-case {
  display: block; text-decoration: none; color: var(--text-primary);
  font-size: 13px; margin-bottom: 4px;
}
.pn-stat .pn-cite {
  font-weight: 700; color: var(--accent);
  font-family: system-ui, -apple-system, sans-serif;
}
.pn-stat .pn-act { font-size: 11px; margin-left: 8px; color: var(--text-muted); }
.pn-stat:hover .pn-cite { text-decoration: underline; }
.pn-case { color: var(--accent); }
.pn-case:hover { text-decoration: underline; }
.pn-summary, .pn-holding {
  font-size: 12.5px; color: var(--text-primary); line-height: 1.6;
  padding-left: 0; margin-top: 4px;
}
.pn-foot {
  font-size: 11px; margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--border); color: var(--text-muted);
  font-family: system-ui, -apple-system, sans-serif;
}

/* Unified docs-by-category: kind icon + disclosure styling */
.dc-row .dc-kind {
  font-size: 11px; color: #94a3b8; min-width: 16px; text-align: center;
}
.dc-row-disclosure .dc-kind { color: #ca8a04; }
.dc-row-disclosure .dc-code-type {
  background: #fef3c7; color: #78350f;
  font-family: inherit; font-weight: 600;
  text-transform: lowercase;
}
.dc-row-disclosure .dc-meta {
  font-size: 11px; color: #94a3b8;
}

/* New-draft picker — import mode additions */
.nd-mode-row {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px; padding: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 12px;
}
.nd-mode-row label { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.nd-mode-row label:hover { background: white; }
.nd-import-fields { margin-top: 6px; }
.nd-import-fields.hidden { display: none; }
.nd-import-fields input[type="file"] {
  padding: 6px; border: 1px dashed #cbd5e1; border-radius: 4px;
  font-size: 12px; width: 100%; box-sizing: border-box; background: #fafdf7;
}

/* Import-note banner at top of editor */
.import-note {
  position: fixed; top: 60px; left: 50%; transform: translate(-50%, -20px);
  background: #fef3c7; color: #78350f;
  border: 1px solid #fbbf24; border-radius: 6px;
  padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; max-width: 720px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: var(--z-flash); opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}
.import-note.in-show { opacity: 1; transform: translate(-50%, 0); }
.import-note .in-icon { font-size: 16px; }
.import-note .in-text { flex: 1; }
.import-note .in-close {
  background: none; border: none; color: #92400e; cursor: pointer;
  font-size: 16px; padding: 0 6px; line-height: 1;
}
.import-note .in-close:hover { color: #78350f; }

/* ─── Precedent library page ──────────────────────────────────────── */
.pr-head { margin-bottom: 18px; }
.pr-head h1 { margin: 0 0 6px; }
.pr-upload-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 16px 20px; margin-bottom: 24px;
}
.pr-upload-card h2 { margin: 0 0 12px; font-size: 15px; }
.pr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pr-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; }
.pr-form-grid label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pr-form-grid input[type="text"], .pr-form-grid select {
  padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 12px; font-family: inherit;
}
.pr-form-grid input[type="file"] { font-size: 12px; }
.pr-form-actions {
  margin-top: 14px; display: flex; align-items: center; gap: 12px;
  padding-top: 12px; border-top: 1px solid #f1f5f9;
}
.pr-search {
  display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
}
.pr-search input[type="search"] { flex: 0 1 280px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; }
.pr-search select { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; }
.pr-group { margin-bottom: 20px; }
.pr-group h3 { font-size: 13px; font-weight: 700; color: #1e293b; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.pr-count { background: #e2e8f0; color: #475569; padding: 0 6px; border-radius: 8px; font-size: 10px; font-weight: 600; }
.pr-list { list-style: none; padding: 0; margin: 0; }
.pr-row {
  background: white; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 10px 14px; margin-bottom: 6px;
}
.pr-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-title { font-weight: 600; color: #1e293b; font-size: 13px; }
.pr-pill { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.4px; }
.pr-pill.ok   { background: #dcfce7; color: #166534; }
.pr-pill.warn { background: #fef3c7; color: #92400e; }
.pr-tag { font-size: 10px; padding: 2px 6px; border-radius: 10px; background: #dbeafe; color: #1e40af; }
.pr-desc { font-size: 12px; margin-top: 4px; }
.pr-meta { font-size: 11px; margin-top: 4px; }
.pr-actions { margin-top: 8px; display: flex; gap: 6px; }

/* "Start from precedent" picker section */
.nd-precedent-list {
  max-height: 280px; overflow-y: auto;
  border: 1px solid #e2e8f0; border-radius: 4px; padding: 6px;
}
.nd-precedent-row {
  display: block; padding: 8px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent;
}
.nd-precedent-row:hover { background: #f8fafc; }
.nd-precedent-row:has(input:checked) {
  background: #eff6ff; border-color: #93c5fd;
}
.nd-precedent-row input[type="radio"] { margin-right: 6px; }
.ndp-main { display: inline-flex; gap: 6px; align-items: center; }
.ndp-title { font-weight: 600; font-size: 12px; color: #1e293b; }
.ndp-desc { font-size: 11px; margin-top: 4px; margin-left: 18px; }

/* ─── Batch import page ──────────────────────────────────────────── */
.ib-shell { max-width: 1200px; margin: 24px auto; padding: 0 24px; }
.ib-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.ib-head h1 { margin: 0 0 6px; }

.ib-drop {
  position: relative;
  border: 2px dashed #cbd5e1; border-radius: 8px;
  padding: 28px; text-align: center;
  background: #f8fafc; margin-bottom: 14px;
  transition: background 0.1s, border-color 0.1s;
}
.ib-drop.over { background: #eff6ff; border-color: #3b82f6; }
.ib-drop .ib-drop-icon { font-size: 28px; color: #94a3b8; margin-bottom: 8px; }
.ib-drop .ib-drop-text { font-size: 13px; color: #475569; }
.ib-drop .ib-browse { color: #3b82f6; cursor: pointer; text-decoration: underline; }
.ib-drop .ib-drop-hint { font-size: 11px; margin-top: 6px; }
.ib-drop input[type="file"] { display: none; }

.ib-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 14px; flex-wrap: wrap;
}
.ib-summary { font-size: 12px; }

.ib-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  background: white; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden;
}
.ib-table thead { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.ib-table th {
  text-align: left; padding: 8px 10px; font-weight: 600;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b;
}
.ib-table td { padding: 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.ib-table tr:last-child td { border-bottom: none; }
.ib-filename .ib-fn { font-weight: 500; color: #1e293b; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-filename .ib-sub { font-size: 10px; }
.ib-table select, .ib-table input[type="text"] {
  padding: 4px 7px; border: 1px solid #cbd5e1; border-radius: 3px;
  font-size: 11px; font-family: inherit; width: 100%; box-sizing: border-box;
}
.ib-status-cell { white-space: nowrap; }
.ib-pill {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.4px;
}
.ib-pill-ready    { background: #e2e8f0; color: #475569; }
.ib-pill-uploading{ background: #dbeafe; color: #1e40af; }
.ib-pill-done     { background: #dcfce7; color: #166534; }
.ib-pill-failed   { background: #fee2e2; color: #991b1b; }
.ib-msg { font-size: 10px; margin-top: 3px; max-width: 260px; }
.ib-remove { margin-left: 8px; }
.ib-row.ib-status-done    { background: #f0fdf4; }
.ib-row.ib-status-failed  { background: #fef2f2; }
.ib-row.ib-status-uploading { background: #eff6ff; }
.ib-empty { text-align: center; padding: 28px; }

/* ─── Sanitize-review page ───────────────────────────────────────── */
.rv-head { margin-bottom: 16px; }
.rv-head h1 { margin: 0 0 4px; }
.rv-subtitle { font-size: 14px; font-weight: 600; color: var(--text-muted); margin: 0 0 6px; }
.rv-grid {
  display: grid; grid-template-columns: 1fr 420px; gap: 16px;
}
.rv-body, .rv-panel {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 18px;
}
.rv-body { padding: 24px 28px; }
.rv-body h3, .rv-panel h3 {
  margin: 0 0 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);
}
.rv-text {
  font-size: 13.5px; line-height: 1.7; color: var(--text-primary);
  word-wrap: break-word;
  max-height: 70vh; overflow-y: auto;
  padding-right: 6px;  /* room for scrollbar without crowding text */
}
/* Block-based render: headings stand out, paragraphs get real
   spacing, dividers split sections. Replaces the previous flat
   white-space:pre-wrap wall of text. */
.rv-block-heading {
  font-size: 14.5px; font-weight: 700;
  color: var(--text-primary);
  margin: 18px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.rv-block-heading:first-child { margin-top: 0; }
.rv-block-paragraph {
  margin: 0 0 10px;
  font-size: 13.5px; line-height: 1.7;
}
.rv-divider {
  border: 0; border-top: 1px dashed var(--border-strong);
  margin: 18px 0;
}
.rv-hit {
  background: #fde68a; color: #78350f; padding: 1px 3px; border-radius: 3px;
  font-weight: 500;
}
.rv-hit.rv-keep { background: transparent; color: inherit; outline: 1px dashed #cbd5e1; }
.rv-hit.rv-type-name, .rv-hit.rv-type-party_name { background: #fecaca; color: #991b1b; }
.rv-hit.rv-type-amount, .rv-hit.rv-type-file_no { background: #bbf7d0; color: #166534; }
.rv-hit.rv-type-date_iso, .rv-hit.rv-type-date_long { background: #c7d2fe; color: #3730a3; }
.rv-hit.rv-type-phone, .rv-hit.rv-type-email, .rv-hit.rv-type-postal_code, .rv-hit.rv-type-sin { background: #fbcfe8; color: #9d174d; }
.rv-hit.rv-type-street_address, .rv-hit.rv-type-company, .rv-hit.rv-type-organization { background: #fed7aa; color: #9a3412; }
.rv-hit.rv-type-platform { background: #ddd6fe; color: #5b21b6; }
.rv-hit.rv-type-time { background: #fef3c7; color: #92400e; }

.rv-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 14px; }
.rv-table th { text-align: left; padding: 5px; font-weight: 600; color: #64748b; }
.rv-table td { padding: 5px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.rv-table .rv-orig { font-family: ui-monospace, monospace; color: #475569; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-table .rv-repl {
  width: 100%; padding: 3px 6px; border: 1px solid #cbd5e1;
  border-radius: 3px; font-size: 11px; box-sizing: border-box;
}
.rv-actions {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 8px;
}
.rv-mark-row { font-size: 12px; display: flex; gap: 6px; align-items: center; }

@media (max-width: 1000px) {
  .rv-grid { grid-template-columns: 1fr; }
}

/* AI panel — precedents-used line */
.pc-precedents-line {
  margin-top: 6px; font-size: 11px; padding: 4px 8px;
  background: #f3e8ff; color: #6b21a8; border-radius: 4px;
}
.pc-precedent-link {
  color: #6b21a8; text-decoration: none; font-weight: 600;
}
.pc-precedent-link:hover { text-decoration: underline; }

/* ─── Pre-filing checklist modal ──────────────────────────────────── */
.pf-header {
  font-size: 13px; font-weight: 700; padding: 10px 12px; border-radius: 6px;
  margin-bottom: 14px;
}
.pf-header.pf-ready    { background: #dcfce7; color: #166534; }
.pf-header.pf-blocked  { background: #fee2e2; color: #991b1b; }
.pf-list { list-style: none; padding: 0; margin: 0 0 14px; }
.pf-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; border-radius: 4px; margin-bottom: 4px;
  font-size: 12px;
}
.pf-row.pf-pass  { background: #f0fdf4; }
.pf-row.pf-block { background: #fef2f2; }
.pf-row.pf-warn  { background: #fffbeb; }
.pf-row.pf-info  { background: #f8fafc; }
.pf-icon { font-size: 14px; font-weight: 700; min-width: 16px; text-align: center; }
.pf-row.pf-pass .pf-icon  { color: #16a34a; }
.pf-row.pf-block .pf-icon { color: #b91c1c; }
.pf-row.pf-warn .pf-icon  { color: #b45309; }
.pf-row.pf-info .pf-icon  { color: #64748b; }
.pf-body-row { flex: 1; }
.pf-label { font-weight: 600; color: #1e293b; }
.pf-message { font-size: 11px; margin-top: 2px; line-height: 1.45; }

/* ─── Mark-as-filed modal ────────────────────────────────────────── */
.fil-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #64748b; margin: 12px 0 8px;
}
.fil-h:first-child { margin-top: 0; }
.fil-list { list-style: none; padding: 0; margin: 0 0 12px; }
.fil-list li {
  padding: 6px 0; border-bottom: 1px dashed #f1f5f9;
  display: flex; gap: 10px; align-items: center; font-size: 12px;
}
.fil-list li:last-child { border-bottom: none; }
.fil-date { font-variant-numeric: tabular-nums; color: #1e293b; font-weight: 600; }
.fil-method {
  background: #dbeafe; color: #1e40af; padding: 1px 7px;
  border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.fil-fno {
  font-family: ui-monospace, monospace; font-size: 11px;
  background: #f1f5f9; padding: 1px 6px; border-radius: 3px; color: #475569;
}
.fil-form { display: flex; flex-direction: column; gap: 8px; }
.fil-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.4px;
}
.fil-form input[type="date"], .fil-form input[type="text"],
.fil-form input[type="url"], .fil-form select, .fil-form textarea {
  padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 13px; font-family: inherit; text-transform: none; letter-spacing: 0;
}
.fil-actions { margin-top: 8px; display: flex; align-items: center; gap: 12px; }

/* ─── Public sign page ───────────────────────────────────────────── */
.signpage-body { background: #f1f5f9; margin: 0; }
.signpage-head {
  background: #1a1a2e; color: white; padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.signpage-head .brand { font-weight: 700; font-size: 16px; }
.signpage-head .brand .dot { color: #3b82f6; }
.signpage-meta { font-size: 12px; color: #cbd5e1; }
.signpage-meta b { color: white; }
.signpage-shell {
  display: grid; grid-template-columns: 360px 1fr; gap: 20px;
  max-width: 1200px; margin: 24px auto; padding: 0 24px;
}
.signpage-side {
  background: white; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 20px;
}
.signpage-side h2 { margin: 0 0 8px; font-size: 17px; }
.signpage-side h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; margin: 14px 0 8px; font-weight: 700; }
.signpage-side label { display: block; font-size: 12px; color: #475569; margin: 8px 0 4px; }
.signpage-side input[type="text"] {
  width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 14px; box-sizing: border-box;
}
.sig-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.sig-tab {
  flex: 1; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  background: white; cursor: pointer; font-size: 12px; color: #475569;
}
.sig-tab.active { background: #1a1a2e; color: white; border-color: #1a1a2e; }
.sig-pane.hidden { display: none; }
.sig-preview {
  margin-top: 8px; padding: 6px; border: 1px dashed #cbd5e1;
  border-radius: 4px; min-height: 80px; background: #fafafa;
}
.sig-pane canvas {
  border: 1px dashed #cbd5e1; border-radius: 4px;
  background: white; cursor: crosshair; display: block;
  margin-bottom: 8px; max-width: 100%;
}
.sig-affirm { font-size: 12px; margin: 12px 0; line-height: 1.45; }
.sig-affirm label { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; }
.sig-actions { display: flex; gap: 8px; margin-top: 12px; }

.signpage-body-doc { min-width: 0; }
.doc-paper {
  background: white; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 48px 64px; max-width: 760px;
  font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.7;
  color: #1e293b;
}
.doc-paper h1 { font-size: 22px; margin-bottom: 24px; }
.doc-paper h3 { font-size: 15px; margin: 18px 0 8px; }
.doc-paper p { margin-bottom: 10px; }

@media (max-width: 900px) { .signpage-shell { grid-template-columns: 1fr; } }

/* ─── E-sign request modal in the editor ──────────────────────────── */
.esign-req-list { list-style: none; padding: 0; margin: 0 0 12px; }
.esign-req-list > li { padding: 8px 0; border-bottom: 1px dashed #f1f5f9; }
.esign-req-head { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.esign-req-status {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.4px;
  background: #e2e8f0; color: #475569;
}
.esign-req-status.esign-pending          { background: #fef3c7; color: #92400e; }
.esign-req-status.esign-partially_signed { background: #dbeafe; color: #1e40af; }
.esign-req-status.esign-completed        { background: #dcfce7; color: #166534; }
.esign-req-status.esign-revoked          { background: #f1f5f9; color: #64748b; }
.esign-req-msg { font-size: 12px; font-style: italic; margin-bottom: 4px; }
.esign-signer-list { list-style: none; padding: 0; margin: 6px 0 0 12px; font-size: 12px; }
.esign-signer-list li { padding: 3px 0; display: flex; justify-content: space-between; gap: 10px; }
.esign-role { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: #f1f5f9; color: #475569; margin-left: 6px; }
.esign-state { font-size: 11px; }
.esign-state.esign-signed   { color: #166534; }
.esign-state.esign-declined { color: #b91c1c; }
.esign-state.esign-pending  { color: #92400e; }

.esign-signers-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px;
}
.esign-signer-row {
  display: grid; grid-template-columns: 1fr 1fr 80px 24px; gap: 6px;
  margin-bottom: 6px;
}
.esign-signer-row input[type="text"], .esign-signer-row input[type="email"] {
  padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 12px; text-transform: none; letter-spacing: 0; box-sizing: border-box;
}
.esign-link-row {
  margin-top: 6px; padding: 6px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 4px;
  display: grid; grid-template-columns: 1fr auto; gap: 6px;
}
.esign-link-row > div { grid-column: span 2; font-size: 11px; }
.esign-link-row input[type="text"] {
  padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 11px;
}

/* Warehouse case-search: practice-area + statute tags */
.wh-tags { margin: 4px 0; display: flex; gap: 4px; flex-wrap: wrap; }
.wh-pa {
  font-size: 10px; padding: 2px 7px; border-radius: 10px;
  background: #dbeafe; color: #1e40af; font-weight: 600;
}
.wh-statute {
  font-size: 10px; padding: 2px 7px; border-radius: 10px;
  background: #fef3c7; color: #92400e; font-weight: 600;
  font-family: ui-monospace, monospace;
}
.wh-filter-badge {
  font-size: 11px; margin-bottom: 10px; padding: 6px 10px;
  background: #f1f5f9; border-radius: 4px;
}

/* Confidence tier badges on warehouse search results */
.wh-tier-pill {
  font-size: 14px; line-height: 1;
  margin-right: 4px;
}
.wh-tier-pill.gold   { color: #ca8a04; }
.wh-tier-pill.silver { color: #6b7280; }
.wh-tier-pill.bronze { color: #b45309; }
.wh-tier-bronze .wh-cite { color: #92400e; }
.wh-tier-bronze .wh-title { font-style: italic; }
.wh-include-unclassified {
  font-size: 11px; color: #64748b; margin-left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
}
.wh-unclassified {
  font-size: 11px; padding: 4px 0; font-style: italic;
}

/* ─── Roadmap ────────────────────────────────────────────────────── */
.rm-shell { max-width: 1100px; padding-bottom: 60px; }
.rm-headblock { margin-bottom: 20px; }
.rm-submit-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 16px 20px; margin-bottom: 28px;
}
.rm-submit-card h2 { margin: 0 0 12px; font-size: 15px; }
.rm-submit-card label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; color: #475569;
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px;
}
.rm-submit-card input[type="text"], .rm-submit-card textarea, .rm-submit-card select {
  padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 13px; font-family: inherit; text-transform: none; letter-spacing: 0;
}
.rm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.rm-form-actions { display: flex; align-items: center; gap: 12px; }

.rm-bucket { margin-bottom: 28px; }
.rm-bucket > h3 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #64748b; margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.rm-bucket .rm-count {
  background: #e2e8f0; color: #475569; padding: 0 6px;
  border-radius: 8px; font-size: 10px; font-weight: 600;
}
.rm-list { list-style: none; padding: 0; margin: 0; }
.rm-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 12px; margin-bottom: 8px;
  display: grid; grid-template-columns: 60px 1fr auto; gap: 12px;
  align-items: flex-start;
}
.rm-vote {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: white; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 6px 0; cursor: pointer; font-family: inherit;
  font-size: 11px; color: #64748b; min-width: 50px;
}
.rm-vote:hover { background: #f8fafc; border-color: #3b82f6; color: #3b82f6; }
.rm-vote.voted { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.rm-vote .rm-vote-arrow { font-size: 14px; line-height: 1; }
.rm-vote .rm-vote-count { font-weight: 700; }

.rm-body { min-width: 0; }
.rm-head {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: 10px; margin-bottom: 4px;
}
.rm-cat {
  background: #f1f5f9; color: #475569; padding: 1px 7px; border-radius: 10px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
}
.rm-cat-ai             { background: #f3e8ff; color: #6b21a8; }
.rm-cat-workflow       { background: #dcfce7; color: #166534; }
.rm-cat-integration    { background: #fef3c7; color: #92400e; }
.rm-cat-ux             { background: #dbeafe; color: #1e40af; }
.rm-cat-platform       { background: #fce7f3; color: #9d174d; }
.rm-cat-practice-area  { background: #fed7aa; color: #9a3412; }

.rm-pa {
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  background: #fffbeb; color: #b45309; font-weight: 600;
}
.rm-source {
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  border: 1px solid;
}
.rm-source-team { color: #1e40af; border-color: #93c5fd; }
.rm-source-user { color: #64748b; border-color: #cbd5e1; }

.rm-title { font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 4px; line-height: 1.4; }
.rm-desc  { font-size: 12px; color: #475569; line-height: 1.5; }

.rm-status {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700;
}
.rm-status-requested    { background: #f1f5f9; color: #475569; }
.rm-status-under_review { background: #fef3c7; color: #92400e; }
.rm-status-planned      { background: #dbeafe; color: #1e40af; }
.rm-status-in_progress  { background: #f3e8ff; color: #6b21a8; }
.rm-status-shipped      { background: #dcfce7; color: #166534; }
.rm-status-declined     { background: #fee2e2; color: #991b1b; }
.rm-status-select {
  font-size: 11px; padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 4px;
}

.rm-bucket-shipped .rm-card { opacity: 0.72; }
.rm-bucket-declined .rm-card { opacity: 0.6; }

@media (max-width: 700px) {
  .rm-card { grid-template-columns: 50px 1fr; }
  .rm-card .rm-status, .rm-card .rm-status-select { grid-column: 2; }
}

/* ─── Time tracker widget (floating bottom-right) ─────────────────── */
.tw-widget {
  position: fixed; right: 16px; bottom: 16px; z-index: var(--z-fab);
  background: white; border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  width: 280px; transition: width 0.2s, height 0.2s;
}
.tw-widget.tw-running { border-color: #3b82f6; box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3); }
.tw-widget.collapsed { width: 44px; height: 44px; overflow: hidden; }
.tw-widget.collapsed .tw-body { display: none; }
.tw-widget .tw-toggle {
  position: absolute; top: 4px; left: 4px; width: 36px; height: 36px;
  border: none; background: transparent; cursor: pointer;
  font-size: 18px; color: #475569;
}
.tw-widget:not(.collapsed) .tw-toggle { display: none; }
.tw-widget .tw-body { padding: 10px 12px; }
.tw-widget .tw-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.tw-widget .tw-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #475569;
}
.tw-widget .tw-close {
  background: none; border: none; cursor: pointer; color: #94a3b8;
  font-size: 14px; padding: 0 4px;
}
.tw-widget .tw-state { font-size: 12px; color: #475569; margin-bottom: 6px; }
.tw-widget .tw-elapsed {
  font-size: 24px; font-weight: 700; color: #1e293b;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 8px;
}
.tw-widget.tw-running .tw-elapsed { color: #1e40af; }
.tw-widget .tw-desc {
  width: 100%; padding: 6px 8px; border: 1px solid #cbd5e1;
  border-radius: 4px; font-size: 12px; box-sizing: border-box;
  margin-bottom: 8px;
}
.tw-widget .tw-actions { display: flex; gap: 6px; align-items: center; }
.tw-widget .tw-actions button { padding: 5px 10px; font-size: 12px; }
.tw-widget .tw-link {
  margin-left: auto; font-size: 11px; color: #3b82f6; text-decoration: none;
}
.tw-widget .tw-link:hover { text-decoration: underline; }
.tw-widget .hidden { display: none; }

/* Matter-overview billing panel */
.billing-summary { font-size: 12px; }
.billing-summary dl.kv dt { color: #64748b; }
.billing-summary dl.kv dd { font-weight: 600; color: #1e293b; }
.retainer-balance.low { color: #b45309; }
.retainer-balance.zero { color: #b91c1c; }
.retainer-balance.ok { color: #166534; }
.billing-details {
  margin-top: 10px; border-top: 1px solid #f1f5f9; padding-top: 8px;
}
.billing-details summary {
  cursor: pointer; font-size: 11px; font-weight: 600; color: #475569;
  text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 0;
}
.be-list, .rx-list { list-style: none; padding: 0; margin: 6px 0; font-size: 11px; }
.be-row, .rx-row {
  display: grid; grid-template-columns: 75px 50px 70px 1fr auto;
  gap: 4px; padding: 4px 0; border-bottom: 1px dashed #f1f5f9;
  align-items: center;
}
/* Retainer-ledger row — two-line layout so the description gets the
   full rail width instead of being truncated to "A" / "Ir" in a narrow
   column. Row 1: date · kind · amount. Row 2: description (wraps). */
.rx-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "date kind amount"
    "desc desc desc";
  column-gap: 8px; row-gap: 2px;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
  align-items: center;
}
.rx-date { grid-area: date; }
.rx-kind { grid-area: kind; }
.rx-amt  { grid-area: amount; text-align: right; }
.be-date, .rx-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.be-dur, .rx-amt { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.be-user { color: var(--text-muted); font-size: 10px; }
.rx-kind {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px; text-align: center;
}
.rx-deposit .rx-kind { background: #dcfce7; color: #166534; }
.rx-drawdown .rx-kind { background: #fef3c7; color: #92400e; }
.rx-refund .rx-kind { background: #fee2e2; color: #991b1b; }
.be-desc { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-desc {
  grid-area: desc; color: var(--text-muted);
  font-size: 10.5px; line-height: 1.4;
  white-space: normal; overflow: visible; text-overflow: clip;
}
.be-non { font-size: 9px; padding: 1px 5px; background: #f1f5f9; color: #64748b; border-radius: 3px; }
.be-run { font-size: 9px; padding: 1px 5px; background: #dbeafe; color: #1e40af; border-radius: 3px; font-weight: 600; }
.retainer-actions { margin-top: 6px; display: flex; gap: 6px; }

/* Hourly-rate input in firm settings */
.rate-input {
  width: 80px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 12px; box-sizing: border-box; text-align: right;
}

/* Practice notes — expandable statute cards with verbatim excerpts */
.pn-h-hint { font-size: 10px; font-weight: 500; margin-left: 4px; }
.pn-stat-li { padding: 6px 0; border-bottom: 1px dashed #f1f5f9; list-style: none; }
.pn-stat-li:last-child { border-bottom: none; }
.pn-stat-details summary {
  cursor: pointer; padding: 4px 0;
  display: flex; align-items: center; gap: 6px;
  list-style: none;
}
.pn-stat-details summary::-webkit-details-marker { display: none; }
.pn-stat-details summary::marker { display: none; }
.pn-stat-details[open] summary .pn-toggle-hint { opacity: 0; }
.pn-stat-details summary:hover .pn-cite { text-decoration: underline; }
.pn-toggle-hint {
  font-size: 9px; margin-left: auto; text-transform: uppercase;
  letter-spacing: 0.4px; opacity: 0.7;
}
.pn-excerpt {
  margin-top: 8px; padding: 10px 12px;
  background: #fafdf7; border-left: 3px solid #cbd5e1;
  border-radius: 0 4px 4px 0;
  font-size: 11px; line-height: 1.55; color: #334155;
  font-family: Georgia, 'Times New Roman', serif;
  white-space: normal;
}
.pn-external {
  display: inline-block; margin-top: 6px; font-size: 11px;
  color: #3b82f6; text-decoration: none;
}
.pn-external:hover { text-decoration: underline; }

/* Inline citation links inside the practice_note body */
.pn-inline-cite {
  color: #1e40af; text-decoration: underline dotted;
  cursor: pointer; font-weight: 600;
}
.pn-inline-cite:hover {
  background: #dbeafe; color: #1e3a8a;
  border-radius: 3px; padding: 0 2px;
}

/* Flash animation when an inline-cite click scrolls into view */
@keyframes pn-flash {
  0%   { background: #fef3c7; }
  100% { background: transparent; }
}
.pn-stat-li.pn-flash { animation: pn-flash 1.4s ease-out; }

/* ─── Dashboard cockpit ─────────────────────────────────────────── */
.db-shell { max-width: 1200px; margin: 24px auto; padding: 0 24px; }
.db-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 22px; gap: 16px;
}
.db-head h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.db-head .muted { margin: 0; }

.db-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 24px;
}
.db-kpi {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.db-kpi-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.db-kpi-value {
  font-size: 28px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.db-kpi-sub { font-size: 11px; margin-top: 6px; }
.db-balance-low  { color: #b45309; }
.db-balance-zero { color: #b91c1c; }
.db-balance-ok   { color: #166534; }

.db-grid {
  display: grid; grid-template-columns: 2fr 3fr; gap: 18px;
  grid-template-areas: 'matters activity' 'filings activity';
}
.db-recent-matters { grid-area: matters; }
.db-recent-filings { grid-area: filings; }
.db-activity       { grid-area: activity; }

.db-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px;
  box-shadow: var(--shadow-card);
}
.db-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.db-card-head h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.db-card-link { font-size: 11px; color: var(--accent); }
.db-card-link:hover { text-decoration: underline; }
.db-card-hint { font-size: 11px; }

.db-matter-list { display: flex; flex-direction: column; gap: 2px; }
.db-matter-row {
  display: block; padding: 8px 10px; border-radius: 4px;
  color: var(--text-primary); text-decoration: none;
  transition: background 0.1s;
}
.db-matter-row:hover { background: var(--bg-soft); }
.db-matter-name { font-weight: 600; font-size: 13px; }
.db-matter-meta { font-size: 11px; margin-top: 2px; }

.db-list { list-style: none; padding: 0; margin: 0; }

.db-activity-row {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
  font-size: 12px;
}
.db-activity-row:last-child { border-bottom: none; }
.db-act-icon {
  font-size: 14px; text-align: center; color: var(--text-muted);
}
.db-act-action { font-weight: 500; color: var(--text-primary); }
.db-act-when { font-size: 10px; white-space: nowrap; }

.db-filing-row {
  display: grid; grid-template-columns: 80px 1fr 90px auto; gap: 8px;
  align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border);
  font-size: 12px;
}
.db-filing-row:last-child { border-bottom: none; }
.db-filing-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.db-filing-link { color: var(--accent); }
.db-filing-link:hover { text-decoration: underline; }
.db-filing-no {
  font-family: ui-monospace, monospace; font-size: 11px;
  background: var(--bg-sunken); padding: 1px 6px; border-radius: 3px;
}
.db-filing-method {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px;
}

.db-empty {
  text-align: center; padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.db-empty-illus { font-size: 36px; opacity: 0.5; }
.db-empty-msg { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.db-empty-hint { font-size: 11px; margin-top: 2px; }

@media (max-width: 900px) {
  .db-kpis { grid-template-columns: repeat(2, 1fr); }
  .db-grid { grid-template-columns: 1fr; grid-template-areas: 'matters' 'filings' 'activity'; }
}

/* ─── Skeleton loading shimmer ──────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--border) 50%, var(--bg-sunken) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s infinite linear;
  border-radius: 4px;
  display: inline-block;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Theme toggle in the topbar ────────────────────────────────── */
.theme-toggle {
  background: none; border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85); cursor: pointer;
  font-size: 13px; padding: 4px 10px; border-radius: 4px;
  line-height: 1;
}
.theme-toggle:hover { background: rgba(255,255,255,0.08); color: white; }

/* ─── Dark-mode overrides (applied to existing surfaces) ────────── */
:root[data-theme="dark"] .matter-row,
:root[data-theme="dark"] .matter-list a.matter-row,
:root[data-theme="dark"] .form-wrap,
:root[data-theme="dark"] .sidecard,
:root[data-theme="dark"] .matter-main,
:root[data-theme="dark"] .step,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .bg-card,
:root[data-theme="dark"] .dl-table,
:root[data-theme="dark"] .ai-panel,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .doc-tray,
:root[data-theme="dark"] .pr-upload-card,
:root[data-theme="dark"] .pr-row,
:root[data-theme="dark"] .signpage-side,
:root[data-theme="dark"] .doc-paper,
:root[data-theme="dark"] .rm-submit-card,
:root[data-theme="dark"] .rm-card,
:root[data-theme="dark"] .ib-table,
:root[data-theme="dark"] .ib-drop,
:root[data-theme="dark"] .verify-banner,
:root[data-theme="dark"] .pn-shell,
:root[data-theme="dark"] .container.narrow,
:root[data-theme="dark"] .container,
:root[data-theme="dark"] .page,
:root[data-theme="dark"] .editor-page {
  background: var(--bg-card) !important;
  color: var(--text-primary);
  border-color: var(--border);
}
:root[data-theme="dark"] .muted { color: var(--text-muted); }
:root[data-theme="dark"] body { background: var(--bg-app); color: var(--text-primary); }
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--bg-sunken); color: var(--text-primary);
  border-color: var(--border-strong);
}
:root[data-theme="dark"] table { background: var(--bg-card); color: var(--text-primary); }
:root[data-theme="dark"] th, :root[data-theme="dark"] td { border-color: var(--border); }
:root[data-theme="dark"] thead { background: var(--bg-sunken); }
:root[data-theme="dark"] .btn-secondary {
  background: var(--bg-sunken); color: var(--text-primary); border-color: var(--border-strong);
}
:root[data-theme="dark"] .ProseMirror { color: var(--text-primary); }
:root[data-theme="dark"] details summary { color: var(--text-primary); }
:root[data-theme="dark"] code { background: var(--bg-sunken); color: var(--text-primary); }

/* ── Matter chat drawer (Day 92) ─────────────────────────────────── */
.chat-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 95vw;
  background: var(--bg-card); color: var(--text-primary);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s ease-out;
  z-index: var(--z-panel);
}
.chat-drawer.open { transform: translateX(0); }
.chat-head {
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.chat-head h3 { margin: 0 0 4px 0; font-size: 16px; }
.chat-head p { margin: 0; font-size: 12px; }
.chat-head .close {
  background: none; border: none; font-size: 24px; cursor: pointer;
  color: var(--text-muted); line-height: 1;
}
.chat-log {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-soft);
}
.chat-bubble {
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  max-width: 95%; word-wrap: break-word;
}
.chat-system { background: var(--bg-sunken); color: var(--text-muted); font-style: italic; align-self: stretch; }
.chat-user { background: var(--accent); color: var(--accent-text); align-self: flex-end; }
.chat-assistant { background: var(--bg-card); border: 1px solid var(--border); align-self: flex-start; max-width: 100%; }
.chat-thinking { color: var(--text-muted); font-style: italic; }
.chat-err { color: #b91c1c; }
.chat-answer { margin-bottom: 8px; }
.chat-conf {
  display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.4px; margin-left: 4px; vertical-align: middle;
}
.chat-conf-high   { background: #d1fae5; color: #047857; }
.chat-conf-medium { background: #fef3c7; color: #92400e; }
.chat-conf-low    { background: #fee2e2; color: #991b1b; }
.chat-cites { margin: 6px 0 0 0; padding-left: 20px; font-size: 12.5px; }
.chat-cites li { margin-bottom: 6px; }
.chat-cites a { color: var(--accent); text-decoration: none; font-weight: 500; }
.chat-cites a:hover { text-decoration: underline; }
.chat-quote { color: var(--text-muted); font-style: italic; margin-top: 2px; padding-left: 6px; border-left: 2px solid var(--border-strong); }
.chat-unverified { color: #92400e; font-size: 11px; }
.chat-form {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--border); background: var(--bg-card);
}
.chat-form input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 6px; background: var(--bg-app); color: var(--text-primary); font-size: 13.5px;
}
.chat-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ── Client portal (Day 93) ──────────────────────────────────────── */
.portal-body {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  margin: 0; color: #0f172a; min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.portal-topbar {
  background: white; border-bottom: 1px solid #e2e8f0;
  padding: 14px 28px; display: flex; justify-content: space-between; align-items: center;
}
.portal-brand { font-weight: 700; font-size: 16px; color: #0f172a; letter-spacing: -0.01em; }
.portal-brand .dot { color: #3b82f6; }
.portal-user { text-align: right; font-size: 13px; color: #475569; }
.portal-logout { color: #64748b; font-size: 12px; text-decoration: none; margin-left: 12px; }
.portal-logout:hover { color: #0f172a; text-decoration: underline; }
.portal-main { max-width: 1100px; margin: 0 auto; padding: 32px 28px 80px; }
.portal-hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.portal-eyebrow { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: #64748b; font-weight: 600; }
.portal-hero h1 { font-size: 28px; margin: 4px 0 6px 0; letter-spacing: -0.015em; }
.portal-meta { color: #64748b; font-size: 13px; }
.portal-kpis { display: flex; gap: 16px; flex-wrap: wrap; }
.portal-kpi {
  background: white; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px 18px; min-width: 140px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.portal-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; font-weight: 600; }
.portal-kpi-value { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bal-ok   { color: #047857; }
.bal-warn { color: #b45309; }
.bal-low  { color: #b91c1c; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.portal-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 20px 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.portal-card-wide { grid-column: 1 / -1; }
.portal-card h2 { font-size: 14px; margin: 0 0 12px; color: #0f172a; font-weight: 600; }
.portal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.portal-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #94a3b8; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; font-weight: 600; }
.portal-table td { padding: 8px; border-bottom: 1px solid #f1f5f9; }
.portal-table td.num, .portal-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.portal-table tr.mine { background: #eff6ff; }
.pd-fn { font-weight: 500; }
.pd-mine { font-size: 11px; color: #2563eb; margin-top: 2px; }
.pd-stat {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pd-stat-ready   { background: #d1fae5; color: #047857; }
.pd-stat-pending { background: #fef3c7; color: #92400e; }
.pd-stat-failed  { background: #fee2e2; color: #b91c1c; }
.pd-stat-draft   { background: #e0e7ff; color: #4338ca; }
.pd-stat-signed_off, .pd-stat-signed { background: #d1fae5; color: #047857; }
.pd-stat-filed   { background: #c7d2fe; color: #312e81; }
.pd-stat-partially_signed { background: #fed7aa; color: #9a3412; }
.pd-stat-parsing { background: #dbeafe; color: #1d4ed8; }
.pd-steps { list-style: none; padding: 0; margin: 0; }
.pd-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #e2e8f0; }
.pd-step:last-child { border-bottom: none; }
.pd-step-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }
.pd-step-draft     .pd-step-dot { background: #6366f1; }
.pd-step-signed_off .pd-step-dot, .pd-step-filed .pd-step-dot { background: #10b981; }
.pd-step-body { flex: 1; }
.pd-step-title { font-size: 13.5px; font-weight: 500; }
.pd-step-sub { font-size: 11px; color: #94a3b8; }
.pd-step-status { font-size: 11px; color: #64748b; text-transform: capitalize; }
.portal-upload {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px;
}
.portal-upload input[type=file] { flex: 1; min-width: 220px; padding: 6px; border: 1px dashed #cbd5e1; border-radius: 4px; background: #f8fafc; font-size: 12px; }
.portal-upload input[type=text] { flex: 2; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; }
.portal-upload-hint { margin-top: 8px; font-size: 11.5px; }
.portal-footer { margin-top: 36px; padding-top: 20px; border-top: 1px solid #e2e8f0; color: #64748b; font-size: 12px; text-align: center; }
.portal-error {
  max-width: 460px; margin: 80px auto; padding: 36px 32px;
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.portal-error h1 { font-size: 20px; margin: 16px 0 8px; }
.portal-error p { color: #475569; font-size: 14px; }
@media (max-width: 760px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-hero { flex-direction: column; align-items: flex-start; }
}

/* ── Notifications bell + panel + presence pill (Day 94) ─────────── */
.notif-bell {
  position: relative; background: none; border: none; font-size: 18px;
  cursor: pointer; padding: 2px 8px; margin: 0 2px;
}
.notif-bell:hover { transform: scale(1.05); }
.notif-count {
  position: absolute; top: -2px; right: -2px;
  background: #ef4444; color: white; font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px; line-height: 1.2;
}
.notif-count.hidden { display: none; }
.notif-panel {
  position: fixed; top: 56px; right: 16px; width: 380px; max-height: 540px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; z-index: var(--z-drawer);
  overflow: hidden;
}
.notif-panel.hidden { display: none; }
.notif-panel header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.notif-panel header h3 { margin: 0; font-size: 14px; font-weight: 700; }
.notif-list {
  list-style: none; padding: 6px 0; margin: 0; overflow-y: auto; flex: 1;
}

/* Day-bucket header (Today / Yesterday / Earlier this week / Older) */
.notif-bucket {
  padding: 10px 16px 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
}
.notif-bucket:not(:first-child) {
  margin-top: 4px; border-top: 1px solid var(--border);
}

.notif-item { }
.notif-item a {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: start;
  padding: 9px 16px; text-decoration: none; color: var(--text-primary);
  transition: background .1s;
}
.notif-item a:hover { background: var(--bg-soft); }
.notif-item.unread a { background: var(--accent-bg); }
.notif-item.unread .notif-action { font-weight: 700; color: var(--accent-text); }
.notif-item.unread::before {
  /* tiny unread dot on the left edge */
}
.notif-ico {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-sunken); color: var(--text-muted);
  font-size: 13px;
  flex: 0 0 auto;
}
.notif-item.unread .notif-ico { background: var(--accent); color: #fff; }
.notif-body { min-width: 0; }
.notif-line { font-size: 13px; line-height: 1.4; }
.notif-action { color: var(--text-primary); }
.notif-actor { font-size: 12px; }
.notif-matter {
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-preview {
  font-size: 12px; color: var(--text-muted);
  margin-top: 4px; padding-left: 8px;
  border-left: 2px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-time {
  font-size: 11px; font-variant-numeric: tabular-nums;
  align-self: start;
}

.notif-empty {
  padding: 40px 20px;
  text-align: center; color: var(--text-muted);
}
.notif-empty-ico {
  font-size: 28px; opacity: 0.4; margin-bottom: 8px;
}
.notif-empty-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 4px;
}
.notif-empty-sub { font-size: 12px; }

/* ─── Review-action modal (Approve / Request changes / Cancel) ──── */
.review-action-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
}
.review-action-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.45);
  animation: ra-fade .15s ease-out;
}
@keyframes ra-fade { from { opacity: 0; } to { opacity: 1; } }
.review-action-card {
  position: relative;
  width: 520px; max-width: calc(100vw - 24px);
  max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg-card); color: var(--text-primary);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-pop);
  animation: ra-pop .18s ease-out;
}
@keyframes ra-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .review-action-card, .review-action-backdrop { animation: none; }
}
.review-action-head {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 12px; align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--ra-accent, var(--accent));
}
.review-action-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ra-accent, var(--accent)) 14%, transparent);
  color: var(--ra-accent, var(--accent));
  border-radius: 50%; font-size: 20px; font-weight: 700;
}
.review-action-titles h3 {
  margin: 0; font-size: 16px; font-weight: 700;
}
.review-action-context {
  font-size: 12px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-action-body {
  padding: 16px 20px;
  overflow-y: auto;
}
.review-action-sub {
  font-size: 13px; line-height: 1.5; margin: 0 0 14px;
}
.review-action-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin-bottom: 6px;
}
.review-action-req {
  display: inline-block; padding: 1px 6px;
  background: #fee2e2; color: #b91c1c;
  border-radius: 8px; font-size: 9px; margin-left: 4px;
  vertical-align: 1px;
}
:root[data-theme="dark"] .review-action-req {
  background: #3a0d0d; color: #fca5a5;
}
.review-action-templates {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px; align-items: center;
}
.review-action-templates-label {
  font-size: 11px; margin-right: 2px;
}
.review-action-tpl {
  padding: 4px 10px; font-size: 11.5px;
  background: var(--bg-sunken); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer;
  max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-action-tpl:hover {
  background: var(--accent-bg); color: var(--accent-text);
  border-color: var(--accent);
}
.review-action-note {
  width: 100%; padding: 10px 12px;
  font-size: 13px; line-height: 1.5;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 6px;
  resize: vertical; min-height: 96px;
  font: inherit; font-size: 13px;
}
.review-action-note:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.review-action-counter {
  text-align: right; font-size: 11px; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.review-action-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}
.review-action-go {
  background: var(--ra-accent, var(--accent)) !important;
  border-color: var(--ra-accent, var(--accent)) !important;
  color: #fff !important;
}
.review-action-go:hover:not(:disabled) { filter: brightness(0.92); }
.review-action-go:disabled { opacity: 0.45; cursor: not-allowed; }

.presence-pill {
  background: var(--accent-bg); color: var(--accent);
  padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500;
  margin: 0 4px; white-space: nowrap;
}
.presence-pill.hidden { display: none; }

/* ── Marketing pages (Day 95) ────────────────────────────────────── */
.mkt-nav {
  display: flex; gap: 4px; margin-left: 28px; flex: 1;
}
.mkt-nav a {
  padding: 6px 14px; color: var(--text-primary); text-decoration: none;
  font-size: 13px; font-weight: 500; border-radius: 6px;
}
.mkt-nav a:hover { background: var(--bg-soft); }
.mkt-nav a.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.mkt-hero {
  max-width: 800px; margin: 60px auto 32px; padding: 0 24px; text-align: center;
}
.mkt-hero h1 { font-size: 36px; letter-spacing: -0.02em; margin-bottom: 14px; }
.mkt-sub { font-size: 17px; color: var(--text-muted); line-height: 1.5; }
.mkt-cta { text-align: center; padding: 40px 24px; color: var(--text-muted); }
.mkt-cta a { color: var(--accent); font-weight: 500; }
.mkt-faq { max-width: 720px; margin: 32px auto 60px; padding: 0 24px; }
.mkt-faq h2 { font-size: 20px; margin-bottom: 16px; }
.mkt-faq details {
  padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 10px;
}
.mkt-faq summary { font-weight: 500; cursor: pointer; }
.mkt-faq p { margin: 10px 0 0; color: var(--text-muted); }

/* Pricing */
.price-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1100px; margin: 0 auto 40px; padding: 0 24px;
}
.price-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px 26px; position: relative; display: flex; flex-direction: column;
}
.price-card.highlight { border-color: var(--accent); border-width: 2px; box-shadow: 0 8px 24px rgba(59,130,246,0.12); }
.price-badge {
  position: absolute; top: -10px; left: 24px; background: var(--accent); color: white;
  padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.price-card h2 { font-size: 20px; margin-bottom: 6px; }
.price-tagline { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; min-height: 38px; }
.price-num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.price-amt { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.price-sub { color: var(--text-muted); font-size: 13px; }
.price-features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.price-features li {
  padding: 7px 0 7px 22px; font-size: 13.5px; position: relative;
  border-bottom: 1px solid var(--border);
}
.price-features li:before {
  content: '✓'; position: absolute; left: 0; color: #10b981; font-weight: 700;
}
.price-features li:last-child { border-bottom: none; }
.price-cta { text-align: center; }
@media (max-width: 820px) {
  .price-grid { grid-template-columns: 1fr; }
}

/* Integrations */
.int-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 1000px; margin: 0 auto 40px; padding: 0 24px;
}
.int-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 20px; display: flex; align-items: center; gap: 14px;
}
.int-icon { font-size: 28px; line-height: 1; }
.int-body { flex: 1; }
.int-name { font-weight: 600; font-size: 14px; }
.int-tag { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.int-status {
  font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.int-ok   { background: #d1fae5; color: #047857; }
.int-warn { background: #fef3c7; color: #92400e; }
.int-soon { background: #e5e7eb; color: #475569; }
@media (max-width: 800px) {
  .int-grid { grid-template-columns: 1fr; }
}

/* API docs */
.api-doc { max-width: 800px; margin: 0 auto 60px; padding: 0 24px; }
.api-doc h2 { font-size: 18px; margin: 28px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.api-doc h2:first-of-type { border-top: none; padding-top: 0; }
.api-doc p { color: var(--text-muted); line-height: 1.55; font-size: 14px; }
.api-doc .code-block {
  background: #0f172a; color: #e2e8f0; padding: 14px 18px; border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
  overflow-x: auto; line-height: 1.55; margin: 10px 0;
}
.api-events { list-style: none; padding: 0; margin: 12px 0; }
.api-events li { padding: 6px 0; font-size: 13px; }
.api-events code { background: var(--bg-sunken); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; }

/* ── Mobile sign page (Day 95) ───────────────────────────────────── */
@media (max-width: 760px) {
  .signpage-shell { grid-template-columns: 1fr; gap: 14px; padding: 0 12px; margin: 12px auto; }
  .signpage-head { padding: 10px 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .signpage-side { padding: 16px; }
  .signpage-side h2 { font-size: 16px; }
  .doc-paper { padding: 18px 16px !important; font-size: 13px; }
  #sig-canvas { max-width: 100%; height: 100px; touch-action: none; }
  .sig-actions { flex-wrap: wrap; gap: 8px; }
  .sig-actions button { flex: 1; min-width: 120px; }
}


.chat-cursor { display: inline-block; color: var(--accent); animation: chat-blink 1s steps(2, start) infinite; font-weight: 700; margin-left: 1px; }
@keyframes chat-blink { to { opacity: 0; } }

/* ─── Dark-mode contrast sweep ────────────────────────────────────────
   Many legacy components hardcode slate-500/600/700 (#64748b, #475569,
   #334155) for muted text. Those colors are calibrated against white
   and fail WCAG AA on dark surfaces. Rather than rewrite every
   component, we remap the common offenders here so dark mode lifts
   them to the lighter slate end of the same scale.
   Each remapped color was contrast-checked against bg-card (#1e293b):
     #cbd5e1 (slate-300) → 9.1:1  ✓ AAA
     #94a3b8 (slate-400) → 5.3:1  ✓ AA
     #e2e8f0 (slate-200) → 11.4:1 ✓ AAA
   ─────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .crumb .meta,
:root[data-theme="dark"] .page-sub,
:root[data-theme="dark"] .kv dt,
:root[data-theme="dark"] .sidecard h3,
:root[data-theme="dark"] .step-sub,
:root[data-theme="dark"] .step-status,
:root[data-theme="dark"] .matter-row .m-meta,
:root[data-theme="dark"] .ss-signoff,
:root[data-theme="dark"] .db-kpi-label,
:root[data-theme="dark"] .db-card-link,
:root[data-theme="dark"] .db-card-hint,
:root[data-theme="dark"] .db-filing-date,
:root[data-theme="dark"] .db-empty-hint,
:root[data-theme="dark"] .nd-precedent-list,
:root[data-theme="dark"] .field-help,
:root[data-theme="dark"] .field label,
:root[data-theme="dark"] .ocrline {
  color: var(--text-muted) !important;
}

:root[data-theme="dark"] .matter-row .m-stat,
:root[data-theme="dark"] .empty,
:root[data-theme="dark"] .nd-empty,
:root[data-theme="dark"] .docs th,
:root[data-theme="dark"] .portal-meta,
:root[data-theme="dark"] .pd-step-sub,
:root[data-theme="dark"] .pd-step-status,
:root[data-theme="dark"] .pd-mine,
:root[data-theme="dark"] .notif-meta,
:root[data-theme="dark"] .chat-conf-medium,
:root[data-theme="dark"] .price-features,
:root[data-theme="dark"] .price-sub,
:root[data-theme="dark"] .int-tag,
:root[data-theme="dark"] .api-doc p,
:root[data-theme="dark"] .mkt-sub {
  color: var(--text-faint) !important;
}

/* Form controls + cards that hardcode the slate background or border */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--bg-sunken);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--text-faint);
}

/* Status pills are designed for light backgrounds; their colored
   foregrounds (#047857, #92400e, #b91c1c, #1d4ed8) test fine on the
   pastel pill backgrounds even in dark mode — leave them. The pill
   *backgrounds* still read as colored chips against bg-card. */

/* Code blocks: keep dark on dark mode too (already styled), but
   ensure inline code on cards uses the sunken token. */
:root[data-theme="dark"] code:not(.code-block code) {
  background: var(--bg-sunken); color: var(--text-primary);
}

/* Tables: header cells often use slate-400 which is borderline on
   bg-card. Bump to the muted token. */
:root[data-theme="dark"] th { color: var(--text-muted); }

/* Marketing pages were designed light-first. Force the surrounding
   page body to use the theme background. */
:root[data-theme="dark"] .price-card,
:root[data-theme="dark"] .int-card,
:root[data-theme="dark"] .mkt-faq details {
  background: var(--bg-card); border-color: var(--border);
}
:root[data-theme="dark"] .price-features li { border-color: var(--border); }

/* Portal pages are client-facing and intentionally stay light.
   No dark-mode override needed — the portal renders its own theme. */

/* Final guardrail: anything still bound to slate-500/600/700 via
   inline style is out of our reach, but block-level text colors
   on common surfaces are now all routed through the tokens. */

/* ── Codes on evidence (Day 96) ────────────────────────────────────── */
.cite-tb-sep { display: inline-block; width: 1px; height: 18px; background: var(--border-strong); margin: 0 6px; vertical-align: middle; }
.cite-tb-label { font-size: 11px; color: var(--text-muted); margin-right: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.cite-toolbar .code-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: 12px;
  padding: 3px 9px; font-size: 11.5px; font-weight: 500;
  cursor: pointer; margin: 0 2px;
}
.cite-toolbar .code-chip:hover { background: var(--accent-bg); border-color: var(--accent); }
.cite-toolbar .code-chip .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cite-toolbar .code-chip:disabled { opacity: 0.5; cursor: wait; }
.coded { padding-bottom: 1px; cursor: help; }
.cs-via { font-size: 10px; display: block; margin-top: 2px; font-style: italic; }

/* ── Matter overview: third column for Rule 5-1 disclosure ──────────── */
.container.two-col.with-right {
  grid-template-columns: 260px 1fr 280px;
}
.sidecard-right {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  height: fit-content;
  position: sticky;
  top: 80px;
}
.sidecard-right h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); font-weight: 600; margin-bottom: 4px;
}
.sidecard-right .disc-sub { font-size: 11px; margin-bottom: 12px; }
.sidecard-right .disc-list { list-style: none; padding: 0; margin: 0; }
.sidecard-right .disc-row { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sidecard-right .disc-row:last-child { border-bottom: none; }
.sidecard-right .disc-label { font-size: 12.5px; color: var(--text-primary); flex: 1; min-width: 0; }
.sidecard-right .disc-cta { display: block; text-align: center; margin-top: 12px; font-size: 12px; }
:root[data-theme="dark"] .sidecard-right { background: var(--bg-card); }
@media (max-width: 1180px) {
  .container.two-col.with-right {
    grid-template-columns: 260px 1fr;
  }
  .sidecard-right { grid-column: 1 / -1; position: static; }
}

/* Collapsible side rails on the matter overview. A small chevron at
   the top-corner of each rail toggles collapse; collapsed rails shrink
   to a narrow strip with a centred chevron to expand. State persists
   in localStorage so the lawyer's choice survives navigation. */
.container.two-col.with-right .sidecard,
.container.two-col.with-right .sidecard-right { position: relative; }
.rail-collapse-toggle {
  position: absolute; top: 8px;
  background: none; border: 1px solid transparent;
  cursor: pointer; color: var(--text-muted);
  font-size: 14px; line-height: 1;
  padding: 2px 7px; border-radius: 3px;
}
.container.two-col.with-right .sidecard .rail-collapse-toggle { right: 8px; }
.container.two-col.with-right .sidecard-right .rail-collapse-toggle { right: 8px; }
.rail-collapse-toggle:hover {
  background: var(--bg-sunken); color: var(--accent);
  border-color: var(--border);
}
.sidecard.collapsed, .sidecard-right.collapsed {
  padding: 8px 0 !important; overflow: hidden;
}
.sidecard.collapsed > :not(.rail-collapse-toggle),
.sidecard-right.collapsed > :not(.rail-collapse-toggle) { display: none !important; }
.sidecard.collapsed .rail-collapse-toggle,
.sidecard-right.collapsed .rail-collapse-toggle {
  position: static; display: block; margin: 0 auto;
}
.container.two-col.with-right:has(.sidecard:not(.sidecard-right).collapsed) {
  grid-template-columns: 36px 1fr 280px;
}
.container.two-col.with-right:has(.sidecard.sidecard-right.collapsed) {
  grid-template-columns: 260px 1fr 36px;
}
.container.two-col.with-right:has(.sidecard:not(.sidecard-right).collapsed):has(.sidecard.sidecard-right.collapsed) {
  grid-template-columns: 36px 1fr 36px;
}

/* Paper-size picker in matter preview TOC */
.mp-paper-label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-muted); font-weight: 600;
  margin-bottom: 4px;
}
.mp-paper-select {
  width: 100%; padding: 6px 8px; font-size: 12px;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--bg-card); color: var(--text-primary);
}

/* Filing-profile picker — rule citation + verification toggle */
.mp-profile-rule {
  font-size: 10.5px; color: var(--text-muted); font-style: italic;
  margin-top: 4px; padding: 4px 0; line-height: 1.4;
}
.mp-pill-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-muted);
  cursor: pointer; padding: 6px 0;
}
.mp-pill-toggle input { margin: 0; }

.mp-prep-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fef3c7; color: #78350f;
  border-bottom: 1px solid #f59e0b;
  padding: 10px 24px;
  font-size: 13px; line-height: 1.5;
}
.mp-prep-icon { font-size: 18px; line-height: 1; margin-top: 1px; }
.mp-prep-body { flex: 1; }
.mp-prep-body b { color: #92400e; }
.mp-prep-x {
  background: none; border: none; color: #78350f;
  font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.mp-prep-x:hover { color: #000; }
:root[data-theme="dark"] .mp-prep-banner { background: #422006; color: #fde68a; border-bottom-color: #b45309; }
:root[data-theme="dark"] .mp-prep-body b { color: #fcd34d; }
:root[data-theme="dark"] .mp-prep-x { color: #fde68a; }
@media print { .mp-prep-banner { display: none !important; } }

/* Citation Focus — inline verify/unverify ───────────────────────── */
.ev-verify-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0; margin: 10px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.ev-verify-row .btn-mini {
  align-self: flex-start; padding: 5px 12px; font-size: 12px;
  border-radius: 4px; border: 1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text-primary); cursor: pointer;
}
.ev-verify-row .ev-verify { background: #d1fae5; border-color: #10b981; color: #047857; }
.ev-verify-row .ev-verify:hover:not(:disabled) { background: #a7f3d0; }
.ev-verify-row .ev-verify:disabled { background: var(--bg-sunken); color: var(--text-faint); border-color: var(--border); cursor: not-allowed; }
.ev-verify-row .ev-unverify { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.ev-verify-row .ev-unverify:hover { background: #fde68a; }
.ev-verify-hint { font-size: 11px; line-height: 1.4; }

/* Evidence pane: per-document search bar */
.ev-doc-search {
  display: flex; gap: 6px; align-items: center;
  margin-top: 8px; padding: 6px 8px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 4px;
}
.ev-doc-search input[type="search"] {
  flex: 1; min-width: 0; padding: 4px 6px; font-size: 12px;
  border: 1px solid var(--border-strong); border-radius: 3px;
  background: var(--bg-card); color: var(--text-primary);
}
.ev-doc-search-stats { font-size: 11px; color: var(--text-muted); min-width: 60px; text-align: right; }
.ev-doc-search .btn-mini { padding: 2px 8px; font-size: 12px; }
mark.search-hit { background: #fef08a; color: #000; padding: 0 1px; border-radius: 2px; }
mark.search-hit-current { background: #f59e0b; outline: 2px solid #b45309; }

/* Cite-toolbar layout — wraps onto multiple rows on narrow panes */
.cite-toolbar { flex-wrap: wrap; }
.cite-tb-codes {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-top: 6px; margin-top: 6px;
  border-top: 1px solid rgba(203, 213, 225, 0.25);
}
.code-chip-new {
  background: transparent; border: 1px dashed #cbd5e1; color: #cbd5e1;
}
.code-chip-new:hover { background: rgba(255,255,255,0.08); color: white; border-style: solid; }
:root[data-theme="dark"] .code-chip-new { border-color: var(--border-strong); color: var(--text-muted); }
:root[data-theme="dark"] .code-chip-new:hover { color: var(--text-primary); border-color: var(--accent); }

/* Doc viewer — text mode (default) vs PDF mode (toggled) ────────── */
.ev-doc.text-mode {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 14px; line-height: 1.6; color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 18px 22px;
}
/* Text-mode citation — same dotted-underline treatment as the PDF
   side (was previously a yellow fill, which conflicted with the
   coding fill on dual-marked passages). Coding is the highlighter;
   citation is the footnote. They no longer fight for the same
   visual channel. */
.ev-doc.text-mode mark.hl {
  background: transparent; color: inherit; padding: 0;
  border-bottom: 2px dashed #3b82f6;
}
.ev-doc.text-mode mark.hl.unv {
  border-bottom-color: #b45309; border-bottom-style: dotted;
}
/* Code styling is set inline per-span (color from the assigned code)
   so the only base rule is the spacing reset. */
.ev-doc.text-mode .coded { padding-bottom: 1px; cursor: help; }

/* View-mode toggle (Extracted text / Original PDF) */
.ev-view-toggle {
  display: inline-flex; gap: 2px; margin: 8px 0 4px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px;
}
.ev-view-btn {
  background: none; border: none; cursor: pointer;
  font-size: 11.5px; color: var(--text-muted);
  padding: 4px 10px; border-radius: 4px;
}
.ev-view-btn:hover { color: var(--text-primary); }
.ev-view-btn.active {
  background: var(--bg-card); color: var(--accent);
  font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Annotation-density minimap — thin colored column to the right of the
   doc viewer. Each tick = one annotation (citation or code), scaled
   to character position. Click to scroll. ──────────────────────── */
.ev-doc-wrap {
  display: grid; grid-template-columns: 1fr 18px; gap: 4px;
  position: relative; min-height: 0;
}
.ev-minimap {
  position: relative; background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden; min-height: 200px;
}
.ev-minitick {
  position: absolute; left: 2px; right: 2px;
  border-radius: 1px; cursor: pointer;
  min-height: 2px;
  transition: filter 0.1s, transform 0.1s;
}
.ev-minitick:hover { filter: brightness(1.2); transform: scaleX(1.4); z-index: 2; }
.ev-minitick-cite { left: 2px; right: 9px; }
.ev-minitick-code { left: 9px; right: 2px; }
.ev-minimap-legend {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--bg-card); border-top: 1px solid var(--border);
  font-size: 9px; color: var(--text-muted);
  display: flex; justify-content: space-around; padding: 2px 0;
}
.ev-minimap-legend span { display: inline-flex; align-items: center; gap: 1px; }
.ev-minimap-legend small { color: var(--text-faint); }

/* Coded passages rail — show every coded evidence span with cite status */
.coded-spans-list .cs-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 8px; border-radius: 4px;
  text-decoration: none; color: var(--text-primary);
  cursor: pointer;
}
.coded-spans-list .cs-row:hover { background: var(--bg-soft); }
.cs-row-top {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font-size: 11px;
}
.cs-src {
  color: var(--text-muted); font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.cs-status {
  font-size: 9.5px; padding: 1px 6px; border-radius: 8px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  white-space: nowrap;
}
.cs-status-cited   { background: #d1fae5; color: #047857; }
.cs-status-uncited { background: #fef3c7; color: #92400e; }
.coded-spans-list .cs-text {
  font-size: 12px; color: var(--text-primary); font-style: italic; line-height: 1.4;
}
.coded-spans-list .cs-via {
  font-size: 10px; line-height: 1.3; font-style: italic;
}

/* Coded passages rail — row actions (Open / Cite at cursor) */
.cs-actions {
  display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap;
}
.cs-actions .btn-mini {
  font-size: 10.5px; padding: 2px 8px;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  color: var(--text-primary); border-radius: 3px; cursor: pointer;
}
.cs-actions .btn-mini:hover { background: var(--bg-soft); border-color: var(--accent); }
.cs-actions .cs-cite-primary {
  background: #d1fae5; border-color: #6ee7b7; color: #047857; font-weight: 600;
}
.cs-actions .cs-cite-primary:hover { background: #a7f3d0; border-color: #10b981; }
.cs-actions .cs-cite-primary:disabled { opacity: 0.6; cursor: wait; }

/* AI suggestion modal — mode tabs (Assemble / Free draft) ────────── */
.ai-mode-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ai-mode-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
}
.ai-mode-tab:hover { color: var(--text-primary); }
.ai-mode-tab.active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;
}
.ai-mode-pane.hidden { display: none; }

/* Assemble code picker — multi-select chips with passage counts */
.ai-code-picker {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px;
  padding: 8px; background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 4px;
  min-height: 40px;
}
.ai-code-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 14px; cursor: pointer;
  font-size: 12px; color: var(--text-primary);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  user-select: none;
}
.ai-code-chip:hover { border-color: var(--accent); }
.ai-code-chip input { display: none; }
.ai-code-chip:has(input:checked) {
  border-color: var(--code-color, var(--accent));
  background: color-mix(in srgb, var(--code-color, var(--accent)) 15%, var(--bg-card));
  font-weight: 600;
}
.ai-code-chip .dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.ai-code-count {
  font-size: 10.5px; color: var(--text-muted);
  background: var(--bg-sunken); padding: 1px 6px; border-radius: 8px;
}

/* Collapsible rails in the draft editor ──────────────────────────── */

/* Left rail collapse */
.draft-shell.left-collapsed { grid-template-columns: 32px 1fr 6px var(--evidence-width); }
.draft-shell.left-collapsed .rail { display: none; }
.draft-shell.left-collapsed.right-collapsed { grid-template-columns: 32px 1fr 6px 32px; }
.rail-collapsed-toggle {
  display: none;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: none; border-radius: 0 6px 6px 0;
  color: var(--text-muted); cursor: pointer;
  font-size: 16px; padding: 12px 6px;
  align-self: start; margin-top: 12px;
  writing-mode: vertical-rl; height: fit-content;
}
.rail-collapsed-toggle:hover { color: var(--accent); border-color: var(--accent); }
.draft-shell.left-collapsed .rail-collapsed-toggle { display: inline-flex; }

/* Right rail collapse */
.draft-shell.right-collapsed { grid-template-columns: 240px 1fr 6px 32px; }
.draft-shell.right-collapsed .evidence-pane { display: none; }
.draft-shell.right-collapsed .ev-drag-handle { display: none; }
.ev-collapsed-toggle {
  display: none;
  background: var(--bg-card); border: 1px solid var(--border);
  border-right: none; border-radius: 6px 0 0 6px;
  color: var(--text-muted); cursor: pointer;
  font-size: 16px; padding: 12px 6px;
  align-self: start; margin-top: 12px;
  writing-mode: vertical-rl; height: fit-content;
}
.ev-collapsed-toggle:hover { color: var(--accent); border-color: var(--accent); }
.draft-shell.right-collapsed .ev-collapsed-toggle { display: inline-flex; }

/* Collapse buttons inside each rail's header area */
.rail-collapse-btn {
  position: sticky; top: 0; float: right;
  background: none; border: none; color: var(--text-muted);
  font-size: 16px; cursor: pointer; padding: 0 6px; line-height: 1;
  margin: -8px -10px 0 0;
}
.rail-collapse-btn:hover { color: var(--accent); }

/* When the right rail is in "expanded" mode, hide the collapse handle */
.draft-shell.evidence-expanded .ev-collapsed-toggle { display: none; }

/* Research tab ────────────────────────────────────────────────────── */
.rs-intro {
  font-size: 11.5px; line-height: 1.5; margin-bottom: 12px;
  padding: 8px 10px; background: var(--bg-soft);
  border-left: 3px solid var(--accent); border-radius: 3px;
}
#rs-nl-query, .rs-query-input {
  width: 100%; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--bg-card); color: var(--text-primary);
  font-family: inherit; box-sizing: border-box;
}
.rs-actions { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.rs-hint { font-size: 11px; }
.rs-query-block { margin-top: 10px; }
.rs-query-block.hidden { display: none; }
.rs-filters {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.rs-filters select, .rs-filters input {
  padding: 5px 8px; font-size: 12px; border: 1px solid var(--border);
  border-radius: 3px; background: var(--bg-card); color: var(--text-primary);
}
.rs-filters input { width: 80px; }
.rs-filters .btn-primary { padding: 5px 14px; font-size: 12.5px; }

/* Evidence pane — case-law search (top) + matter docs (below). */
.ev-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); font-weight: 700; margin: 4px 2px 6px;
}
.ev-caselaw-section {
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.ev-matter-section { margin-top: 4px; }
.ev-search-row { display: flex; gap: 6px; align-items: center; }
.ev-search-row input { flex: 1; }
.ev-search-row .btn-primary { white-space: nowrap; }
.ev-cl-concepts {
  margin: 6px 2px; font-size: 11.5px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.ev-cl-fallback {
  margin: 10px 2px 0; font-size: 11.5px;
}
.ev-cl-fallback a { text-decoration: none; }
.ev-cl-fallback a:hover { text-decoration: underline; }
.ev-caselaw { margin-top: 6px; }
.doc-fuzzy {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 0 5px; margin-left: 4px; border-radius: 8px;
  background: var(--accent-bg); color: var(--accent);
  vertical-align: 1px;
}

/* Inbox — reviewer "waiting on you" + "sent back to you" screen. */
.inbox-shell { padding: 18px 24px 40px; max-width: 880px; margin: 0 auto; }
.inbox-section-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
  margin: 24px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.inbox-list { display: flex; flex-direction: column; gap: 8px; }
.inbox-row {
  display: block; text-decoration: none; color: var(--text-primary);
  padding: 10px 14px; border: 1px solid var(--border);
  background: var(--bg-card); border-radius: 6px;
  transition: border-color 0.15s, transform 0.05s;
}
.inbox-row:hover { border-color: var(--accent); transform: translateY(-1px); }
.inbox-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inbox-template {
  background: var(--text-primary); color: var(--bg-card);
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px; letter-spacing: 0.4px;
}
.inbox-title { font-weight: 600; font-size: 13.5px; }
.inbox-matter { font-size: 11.5px; margin-left: auto; }
.inbox-row-meta { font-size: 11.5px; margin-top: 4px; }
.inbox-note {
  margin-top: 6px; padding: 6px 9px; border-left: 3px solid var(--accent);
  background: var(--accent-bg); border-radius: 0 3px 3px 0;
  font-size: 12px; color: var(--text-primary); line-height: 1.45;
}
.inbox-row-changes { border-left: 3px solid #f59e0b; }
.inbox-row-changes .inbox-note {
  border-left-color: #f59e0b; background: #fef3c7; color: #78350f;
}
:root[data-theme="dark"] .inbox-row-changes .inbox-note {
  background: #3d2e0a; color: #fde68a;
}
.inbox-empty { padding: 16px; font-style: italic; }

/* Topbar inbox badge */
.topbar-badge {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 5px;
  font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center; border-radius: 10px;
  background: var(--accent); color: #fff;
}
/* Sub-badge specifically for @mentions in the topbar — distinguished
   from the generic inbox count by colour and the @ glyph. */
.topbar-badge-mention {
  background: #f97316; /* orange — semantically "someone wants you specifically" */
  font-variant: tabular-nums;
}
.topbar-badge-mention #mentions-n { font-weight: 700; }

/* Inbox: @mention rows look distinct from review rows. */
.inbox-row-mention {
  border-left: 3px solid #f97316;
}
:root[data-theme="dark"] .inbox-row-mention { border-left-color: #fb923c; }
.inbox-template-mention {
  background: #fff7ed; color: #c2410c; font-weight: 700;
}
:root[data-theme="dark"] .inbox-template-mention {
  background: #3a1e09; color: #fdba74;
}
.inbox-mention-body {
  border-left-color: #fdba74;
  background: #fff7ed; color: #7c2d12;
}
:root[data-theme="dark"] .inbox-mention-body {
  background: #2a160a; color: #fdba74;
}

/* Tasks share the topbar-badge shape but use a violet accent to
   visually distinguish "someone assigned you something to do" from
   "someone @mentioned you in passing." */
.topbar-badge-task {
  background: #7c3aed;
  font-variant: tabular-nums;
}
.topbar-badge-task #tasks-n { font-weight: 700; }

.inbox-row-task {
  border-left: 3px solid #7c3aed;
}
:root[data-theme="dark"] .inbox-row-task { border-left-color: #a78bfa; }
.inbox-template-task {
  background: #f5f3ff; color: #6d28d9; font-weight: 700;
}
:root[data-theme="dark"] .inbox-template-task {
  background: #1e1135; color: #c4b5fd;
}
.inbox-task-body {
  border-left-color: #c4b5fd;
  background: #f5f3ff; color: #4c1d95;
}
:root[data-theme="dark"] .inbox-task-body {
  background: #1e1135; color: #c4b5fd;
}

/* Task pill that appears at the top of a comment in the editor
   popover when the comment has been promoted to a task. Open tasks
   show the violet pill; done tasks render the body strikethrough. */
.cmt-task-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; margin-bottom: 4px;
  background: #f5f3ff; color: #6d28d9;
  border: 1px solid #c4b5fd; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
:root[data-theme="dark"] .cmt-task-pill {
  background: #1e1135; color: #c4b5fd; border-color: #5b21b6;
}
.cmt-task-pill .cmt-task-arrow { color: #7c3aed; font-weight: 700; }
.cmt-task-done {
  background: #ecfdf5; color: #047857; border-color: #6ee7b7;
}
.cmt-task-done .cmt-task-arrow { color: #16a34a; }
:root[data-theme="dark"] .cmt-task-done {
  background: #052e1a; color: #86efac; border-color: #14532d;
}
.cmt-task-done-mark { text-decoration: line-through; opacity: 0.75; }

/* Mention chips inside comment bodies + as small badges under each
   comment row in the popover. */
.mention-chip {
  display: inline-block; padding: 0 6px;
  background: #fff7ed; color: #c2410c;
  border-radius: 10px; font-size: 11.5px; font-weight: 600;
  vertical-align: baseline;
}
:root[data-theme="dark"] .mention-chip {
  background: #3a1e09; color: #fdba74;
}
.mention-chip::before { content: '@'; opacity: 0.6; margin-right: 1px; }

/* @-typeahead dropdown inside the comment compose box. Positioned
   absolutely relative to the textarea container; styles.css doesn't
   set the position — the JS handles that. */
.mention-typeahead {
  position: absolute; z-index: var(--z-popover);
  min-width: 180px; max-width: 280px; max-height: 220px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: 6px;
  box-shadow: var(--shadow-pop);
  font-size: 12.5px;
}
.mention-typeahead-item {
  padding: 5px 10px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 8px;
}
.mention-typeahead-item:hover,
.mention-typeahead-item.active {
  background: var(--accent-bg); color: var(--accent-text);
}
.mention-typeahead-item .mt-role {
  font-size: 10px; color: var(--text-faint); text-transform: uppercase;
}

/* Review-handoff banner — sits above the status-strip on a draft and
   tells you, in plain words, who owes whom an action. State-driven:
   default (no review), pending (out for review), approved, changes
   requested. Buttons render conditionally based on who you are. */
.review-banner {
  margin: 8px 12px 0; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; color: var(--text-primary);
}
.review-banner[hidden] { display: none; }
.review-banner .rb-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.review-banner .rb-text { flex: 1 1 auto; min-width: 200px; }
.review-banner .rb-text strong { font-weight: 600; }
.review-banner .rb-text .rb-meta {
  display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-secondary);
}
.review-banner .rb-note {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: var(--bg-muted, #f8fafc); border-left: 3px solid var(--border);
  font-size: 12.5px; color: var(--text-secondary); white-space: pre-wrap;
}
.review-banner button {
  padding: 5px 11px; font-size: 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-primary); cursor: pointer;
}
.review-banner button:hover { background: var(--bg-muted, #f1f5f9); }
.review-banner button.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.review-banner button.primary:hover { filter: brightness(0.95); }
.rb-pending {
  border-color: #93c5fd; background: #eff6ff;
}
:root[data-theme="dark"] .rb-pending { background: #0c2440; border-color: #1e3a5f; }
.rb-approved {
  border-color: #86efac; background: #f0fdf4;
}
:root[data-theme="dark"] .rb-approved { background: #052e1a; border-color: #14532d; }
.rb-changes {
  border-color: #fbbf24; background: #fef3c7;
}
:root[data-theme="dark"] .rb-changes { background: #3d2e0a; border-color: #78350f; }

/* Per-block comment badge — sits at the right margin of each .block-host
   and is the entry point for the thread popover. Three visual states:
   empty (faint, hover-only), has-open (accent dot with count),
   all-resolved (muted check). */
.block-host { position: relative; }
.comment-badge {
  position: absolute; top: 4px; right: -32px;
  width: 26px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; line-height: 1; font-weight: 600;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text-muted);
  cursor: pointer;
  transition: opacity .12s, background .12s, color .12s;
  /* Always visible, but faded when empty so it sits quietly until a
     thread starts. Hovering the block-host or the badge itself
     brings it to full opacity. */
  opacity: 0.35;
}
.block-host:hover .comment-badge,
.comment-badge:hover,
.comment-badge.has-open,
.comment-badge.all-resolved { opacity: 1; }
.comment-badge:hover {
  background: var(--bg-sunken); border-color: var(--border);
  color: var(--text-primary);
}
.comment-badge.has-open {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.comment-badge.all-resolved { color: #16a34a; }
.comment-badge .cb-ico { font-size: 12px; }
.comment-badge .cb-n { font-size: 10px; }

/* Thread popover — floats next to the badge, anchored absolute via JS. */
.comment-popover {
  position: fixed; z-index: var(--z-popover); width: 360px; max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
  font-size: 13px;
}
.cmt-pop-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 12px; color: var(--text-secondary);
}
.cmt-close {
  background: transparent; border: 0; font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--text-secondary);
}
.cmt-thread { padding: 6px 12px; overflow-y: auto; flex: 1 1 auto; }
.cmt-sep { border: 0; border-top: 1px dashed var(--border); margin: 8px 0; }
.cmt { padding: 6px 0; }
.cmt-reply { margin-left: 16px; padding-left: 10px; border-left: 2px solid var(--border); }
.cmt-resolved { opacity: 0.6; }
.cmt-resolved .cmt-body { text-decoration: line-through; }
.cmt-head {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11.5px; color: var(--text-secondary); margin-bottom: 2px;
}
.cmt-author { font-weight: 600; color: var(--text-primary); }
.cmt-author-link {
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color .12s, color .12s;
}
.cmt-author-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* Mention chip is now a real anchor — keep the chip styling but
   make the cursor + hover state read as "go somewhere". */
a.mention-chip {
  text-decoration: none; cursor: pointer;
  transition: filter .12s;
}
a.mention-chip:hover { filter: brightness(0.92); }
.cmt-badge-resolved {
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: #dcfce7; color: #166534;
}
:root[data-theme="dark"] .cmt-badge-resolved { background: #052e1a; color: #86efac; }
.cmt-body { white-space: pre-wrap; word-wrap: break-word; font-size: 12.5px; line-height: 1.45; }
.cmt-actions { margin-top: 4px; display: flex; gap: 6px; }
.cmt-btn {
  padding: 2px 8px; font-size: 11px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-primary); cursor: pointer;
}
.cmt-btn:hover { background: var(--bg-muted, #f1f5f9); }
.cmt-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cmt-btn-danger { color: #b91c1c; }
.cmt-empty { padding: 10px 0; color: var(--text-secondary); font-style: italic; }
.cmt-compose {
  padding: 8px 12px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.cmt-compose textarea,
.cmt-reply-compose textarea {
  width: 100%; font: inherit; font-size: 12.5px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text-primary); resize: vertical;
}
.cmt-compose-actions { display: flex; justify-content: flex-end; }
.cmt-reply-compose { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.cmt-task-pick {
  margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.cmt-task-pick-select {
  flex: 1 1 auto; min-width: 120px;
  padding: 4px 6px; font-size: 12px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 4px;
}

/* ─── Per-matter activity feed ─────────────────────────────────────
   Day-grouped list of audit events. One row per event with actor +
   verb + deep-link to the underlying object. Filter chips up top
   narrow by category (comments / tasks / reviews / docs / drafts). */
.act-shell { max-width: 880px; }
.act-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 16px;
}
.act-filters {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
}
.act-filter {
  padding: 5px 11px; border-radius: 14px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border); font-size: 12px; font-weight: 500;
  cursor: pointer; user-select: none;
}
.act-filter:hover { background: var(--bg-sunken); }
.act-filter.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.act-day-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
  margin: 18px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.act-day-h .muted { font-weight: 500; margin-left: 6px; font-size: 10.5px; }
.act-list { list-style: none; padding: 0; margin: 0; }
.act-row {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
}
.act-row:last-child { border-bottom: none; }
.act-ico {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-sunken); border-radius: 50%;
  font-size: 13px;
}
.act-line { font-size: 13px; line-height: 1.45; }
.act-actor { font-weight: 600; color: var(--text-primary); }
.act-verb  { color: var(--text-primary); margin-left: 3px; }
.act-detail { margin-left: 4px; }
.act-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; margin-top: 2px;
}
.act-jump { color: var(--accent); font-weight: 600; }
.act-jump:hover { text-decoration: underline; }

/* ─── Notification preferences ─────────────────────────────────────
   One toggle per category with a description. Locked rows render
   disabled-on so the user can see what's always-on without being
   able to turn it off. */
.notif-shell { max-width: 720px; }
.notif-form { margin-top: 18px; }
.notif-saved {
  display: inline-block; padding: 6px 12px; border-radius: 4px;
  background: #dcfce7; color: #166534; font-size: 12.5px; font-weight: 600;
  margin-bottom: 14px;
}
:root[data-theme="dark"] .notif-saved { background: #052e1a; color: #86efac; }
.notif-pref-list {
  list-style: none; padding: 0; margin: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.notif-pref-row { border-bottom: 1px solid var(--border); }
.notif-pref-row:last-child { border-bottom: none; }
.notif-pref-row.is-locked { background: var(--bg-soft); }
.notif-pref-toggle {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px;
  padding: 12px 16px; cursor: pointer;
  align-items: start;
}
.notif-pref-row.is-locked .notif-pref-toggle { cursor: not-allowed; }
.notif-pref-toggle input[type="checkbox"] {
  margin-top: 3px; width: 16px; height: 16px;
  accent-color: var(--accent);
}
.notif-pref-label { display: flex; flex-direction: column; gap: 2px; }
.notif-pref-title { font-weight: 600; font-size: 13px; }
.notif-pref-desc  { font-size: 12px; }
.notif-pref-locked {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: var(--accent-bg); color: var(--accent-text);
  font-size: 10px; font-weight: 700; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.notif-actions {
  display: flex; gap: 10px; margin-top: 16px;
}
.notif-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
  margin: 22px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.notif-h:first-child { margin-top: 0; }
.notif-sub { margin-bottom: 10px; font-size: 12.5px; }
.notif-privacy {
  margin-top: 8px; padding: 8px 12px;
  background: var(--bg-sunken); border-left: 3px solid var(--accent);
  border-radius: 4px; font-size: 12px;
}
.notif-privacy b { color: var(--text-primary); }
.notif-email-field {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 14px;
}
.notif-email-label {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.notif-email-field input[type="email"] {
  padding: 8px 10px; font-size: 13px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 4px;
}

/* Bell dropdown footer with the link to the prefs page. */
.notif-foot {
  padding: 8px 12px; border-top: 1px solid var(--border);
  text-align: center; font-size: 12px;
}
.notif-prefs-link { color: var(--text-muted); }
.notif-prefs-link:hover { color: var(--accent); text-decoration: underline; }

/* ─── DM badge in topbar (green = good, unread message) ───────────── */
.topbar-badge-dm {
  background: #16a34a;
  font-variant: tabular-nums;
}

/* ─── Direct messages page (modern chat redesign) ──────────────────
   Two-pane shell. Thread list left, conversation right. Avatars,
   date dividers, message grouping, optimistic send, polled inbound.
   Mirrors familiar chat-app patterns (Slack / Linear / iMessage) so
   lawyers don't need to learn anything new. */

.dm-shell {
  display: grid; grid-template-columns: 320px 1fr;
  height: calc(100vh - 50px);
  background: var(--bg-app);
}

/* ── Avatars ───────────────────────────────────────────────────── */
.dm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 700; letter-spacing: 0.3px;
  flex: 0 0 auto; user-select: none;
}
.dm-avatar-sm { width: 26px; height: 26px; font-size: 10px; }
.dm-avatar-md { width: 36px; height: 36px; font-size: 12px; }
.dm-avatar-lg { width: 64px; height: 64px; font-size: 22px; }

/* Stack of overlapping avatars for group threads. */
.dm-avatar-stack {
  position: relative;
  display: inline-flex; align-items: center;
  height: 36px; width: 36px;
  flex: 0 0 auto;
}
.dm-avatar-stack > span {
  position: absolute;
  border: 2px solid var(--bg-card); border-radius: 50%;
  box-sizing: content-box;
}
.dm-avatar-stack > span:nth-child(1) { left: 0; top: 0; }
.dm-avatar-stack > span:nth-child(2) { left: 14px; top: 6px; }
.dm-avatar-overflow {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-sunken); color: var(--text-muted);
  border-radius: 50%; border: 2px solid var(--bg-card);
  font-size: 10px; font-weight: 700;
  position: absolute; left: 24px; top: 10px;
}

/* Group-thread tag next to the title. */
.dm-thread-group-tag {
  display: inline-block;
  padding: 1px 6px; margin-left: 4px;
  background: var(--bg-sunken); color: var(--text-muted);
  border-radius: 8px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  vertical-align: 1px;
}
.dm-thread-row.is-group .dm-avatar-stack {
  width: 46px;   /* extra room for the overlap */
}

/* ── Thread list (left pane) ────────────────────────────────────── */
.dm-thread-list {
  background: var(--bg-card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.dm-list-head {
  padding: 14px 18px 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.dm-list-head h2 {
  margin: 0; font-size: 17px; font-weight: 700;
  color: var(--text-primary);
}
.dm-newthread-btn {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 0; border-radius: 50%;
  font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: transform .12s ease;
}
.dm-newthread-btn:hover { filter: brightness(0.95); transform: scale(1.05); }
.dm-list-search {
  padding: 0 18px 12px;
}
.dm-list-search input {
  width: 100%; padding: 7px 12px; font-size: 12.5px;
  background: var(--bg-sunken); color: var(--text-primary);
  border: 1px solid transparent; border-radius: 16px;
}
.dm-list-search input:focus {
  outline: none; border-color: var(--accent); background: var(--bg-card);
}
.dm-list-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 4px 8px 16px;
}
.dm-list-empty {
  padding: 40px 20px; text-align: center;
}
.dm-list-empty-icon { font-size: 28px; opacity: 0.5; margin-bottom: 8px; }
.dm-list-empty-title { font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }

.dm-thread-row {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 12px; align-items: center;
  padding: 10px 10px; margin: 2px 0;
  border-radius: 8px;
  color: var(--text-primary); position: relative;
  transition: background .1s ease;
}
.dm-thread-row:hover { background: var(--bg-soft); }
.dm-thread-row.is-active {
  background: var(--accent-bg);
}
.dm-thread-row.is-active .dm-thread-peer { color: var(--accent-text); }
.dm-thread-row.is-unread .dm-thread-peer { font-weight: 700; }
.dm-thread-row.is-unread .dm-thread-preview {
  color: var(--text-primary); font-weight: 500;
}
.dm-thread-meta { min-width: 0; }
.dm-thread-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 2px;
}
.dm-thread-peer {
  font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-thread-time {
  font-size: 11px; color: var(--text-faint);
  flex: 0 0 auto;
}
.dm-thread-preview {
  font-size: 12px; line-height: 1.4; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-unread-pill {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  min-width: 18px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
}

/* ── Conversation pane (right) ──────────────────────────────────── */
.dm-conv {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  position: relative;
  background: var(--bg-app);
}
.dm-conv-head {
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  display: grid; grid-template-columns: 36px 1fr auto auto;
  gap: 12px; align-items: center;
}
.dm-conv-firmscope {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 10px;
  background: var(--bg-sunken); color: var(--text-muted);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  cursor: help;
}
.dm-list-firmscope {
  margin: 0 18px 8px; padding: 6px 10px;
  font-size: 11px; color: var(--text-muted);
  background: var(--bg-sunken); border-radius: 6px;
  cursor: help;
}
.dm-list-firmscope b { color: var(--text-primary); font-weight: 600; }
.dm-conv-head-meta { min-width: 0; }
.dm-conv-head-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.dm-conv-head-sub  { font-size: 11.5px; margin-top: 1px; text-transform: capitalize; }
.dm-icon-btn {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px;
  font-size: 16px; color: var(--text-muted); cursor: pointer;
}
.dm-icon-btn:hover { background: var(--bg-sunken); color: var(--text-primary); }

.dm-conv-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 18px 22px 12px;
  display: flex; flex-direction: column; gap: 4px;
}

.dm-conv-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 40px; text-align: center;
}
.dm-conv-empty-icon { font-size: 38px; opacity: 0.4; }
.dm-conv-empty h3 { margin: 0; font-size: 16px; font-weight: 600; }
.dm-conv-empty p { margin: 0; max-width: 320px; font-size: 13px; }

/* ── Day divider ────────────────────────────────────────────────── */
.dm-day-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
}
.dm-day-divider::before,
.dm-day-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.dm-day-divider span {
  padding: 3px 10px;
  background: var(--bg-card); color: var(--text-muted);
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* ── Message group (consecutive bubbles from one sender) ────────── */
.dm-group {
  display: grid; gap: 10px;
  margin: 4px 0;
  max-width: 80%;
  animation: dm-msg-enter 0.18s ease-out;
}
@keyframes dm-msg-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dm-group { animation: none; }
}

.dm-theirs {
  grid-template-columns: 36px 1fr;
  align-self: flex-start;
}
.dm-mine {
  grid-template-columns: 1fr;
  align-self: flex-end;
}
.dm-group-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dm-mine .dm-group-stack { align-items: flex-end; }
.dm-theirs .dm-group-stack { align-items: flex-start; }
.dm-group-sender {
  font-size: 11.5px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 1px;
  padding-left: 12px;
}

/* ── Bubble ────────────────────────────────────────────────────── */
.dm-bubble {
  padding: 8px 13px;
  font-size: 13.5px; line-height: 1.5;
  border-radius: 18px;
  max-width: 100%;
  word-wrap: break-word; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  transition: opacity .15s ease;
}
.dm-bubble-body { white-space: pre-wrap; }

/* Inline reference chips inside chat bubbles. Render distinctly so a
   lawyer can spot them at a glance; click jumps to the referenced
   matter / draft / user. Color-coded by kind. */
.ref-chip {
  display: inline-block;
  padding: 1px 7px; margin: 0 1px;
  border-radius: 10px;
  background: rgba(0,0,0,0.08); color: inherit;
  font-size: 0.92em; font-weight: 500;
  text-decoration: none;
  transition: filter .12s;
  vertical-align: baseline;
  word-break: keep-all;
}
.ref-chip:hover { filter: brightness(0.92); text-decoration: none; }
.dm-mine .ref-chip {
  background: rgba(255,255,255,0.22); color: #fff;
}
.dm-theirs .ref-chip-matter   { background: #eff6ff; color: #1e40af; }
.dm-theirs .ref-chip-draft    { background: #f5f3ff; color: #6d28d9; }
.dm-theirs .ref-chip-document { background: #fff7ed; color: #c2410c; }
.dm-theirs .ref-chip-user     { background: #ecfdf5; color: #065f46; }
:root[data-theme="dark"] .dm-theirs .ref-chip-matter   { background: #0c2440; color: #93c5fd; }
:root[data-theme="dark"] .dm-theirs .ref-chip-draft    { background: #1e1135; color: #c4b5fd; }
:root[data-theme="dark"] .dm-theirs .ref-chip-document { background: #2a160a; color: #fdba74; }
:root[data-theme="dark"] .dm-theirs .ref-chip-user     { background: #052e1a; color: #86efac; }

/* Floating typeahead under the chat compose box for @ and $ triggers. */
.chat-typeahead {
  position: fixed; z-index: var(--z-popover);
  min-width: 220px; max-width: 360px;
  max-height: 260px; overflow-y: auto;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: var(--shadow-pop);
  font-size: 13px;
}
.chat-typeahead-item {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 12px; cursor: pointer;
}
.chat-typeahead-item:hover,
.chat-typeahead-item.active {
  background: var(--accent-bg); color: var(--accent-text);
}
.chat-typeahead-label { font-weight: 500; }
.chat-typeahead-sub {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  align-self: center;
}
/* Telegram-style "smooshed" corners for consecutive same-sender bubbles. */
.dm-theirs .dm-bubble {
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border);
  border-top-left-radius: 18px;
}
.dm-theirs .dm-bubble + .dm-bubble { border-top-left-radius: 6px; }
.dm-theirs .dm-bubble:not(:last-of-type) { border-bottom-left-radius: 6px; }
.dm-mine .dm-bubble {
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
  border-top-right-radius: 18px;
}
.dm-mine .dm-bubble + .dm-bubble { border-top-right-radius: 6px; }
.dm-mine .dm-bubble:not(:last-of-type) { border-bottom-right-radius: 6px; }
.dm-bubble-failed { opacity: 0.5; outline: 1px dashed #b91c1c; }
.dm-group-time {
  font-size: 10.5px; color: var(--text-faint);
  margin-top: 2px;
}
.dm-mine .dm-group-time { padding-right: 4px; }
.dm-theirs .dm-group-time { padding-left: 12px; }

/* ── Jump-to-bottom button ───────────────────────────────────── */
.dm-jump-bottom {
  position: absolute; right: 26px; bottom: 90px;
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 50%;
  font-size: 16px; cursor: pointer;
  box-shadow: var(--shadow-pop);
  transition: opacity .15s, transform .15s;
}
.dm-jump-bottom.hidden { opacity: 0; pointer-events: none; transform: translateY(4px); }
.dm-jump-bottom:hover { background: var(--bg-sunken); }

/* ── Compose ───────────────────────────────────────────────────── */
.dm-compose {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 18px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}
.dm-compose textarea {
  flex: 1; min-height: 36px; max-height: 140px;
  padding: 8px 14px; font-size: 13.5px; line-height: 1.5;
  background: var(--bg-sunken); color: var(--text-primary);
  border: 1px solid transparent; border-radius: 18px;
  resize: none; overflow-y: auto;
  font: inherit; font-size: 13.5px;
  transition: border-color .12s, background .12s;
}
.dm-compose textarea:focus {
  outline: none; background: var(--bg-card); border-color: var(--accent);
}
.dm-send-btn {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  transition: transform .12s, filter .12s;
  flex: 0 0 auto;
}
.dm-send-btn:hover { filter: brightness(0.92); transform: scale(1.04); }
.dm-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── New-conversation modal ────────────────────────────────────── */
.dm-modal { position: fixed; inset: 0; z-index: var(--z-modal); }
.dm-modal.hidden { display: none; }
.dm-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.dm-modal-card {
  position: absolute; left: 50%; top: 18vh;
  transform: translateX(-50%);
  width: 440px; max-width: calc(100vw - 24px);
  max-height: 70vh; display: flex; flex-direction: column;
  background: var(--bg-card); color: var(--text-primary);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.dm-modal-card header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.dm-modal-card header h3 { margin: 0; font-size: 14px; font-weight: 700; }
.dm-modal-close { font-size: 20px !important; }
.dm-modal-card #dm-peer-filter {
  margin: 12px 14px 8px;
  padding: 8px 14px; font-size: 13px;
  background: var(--bg-sunken); color: var(--text-primary);
  border: 1px solid transparent; border-radius: 16px;
}
.dm-modal-card #dm-peer-filter:focus {
  outline: none; background: var(--bg-card); border-color: var(--accent);
}
.dm-peer-list {
  list-style: none; margin: 0; padding: 0 10px 12px;
  overflow-y: auto; flex: 1 1 auto;
}
.dm-peer-item {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 0; border-radius: 8px;
  text-align: left; cursor: pointer; color: var(--text-primary);
}
.dm-peer-item:hover { background: var(--bg-soft); }
.dm-peer-name { font-size: 13.5px; font-weight: 500; }
.dm-peer-role {
  font-size: 11px; color: var(--text-muted); text-transform: capitalize;
  padding: 2px 8px; background: var(--bg-sunken); border-radius: 10px;
}
.dm-peer-empty { padding: 16px; text-align: center; }
.dm-peer-item.is-selected {
  background: var(--accent-bg);
}
.dm-peer-check {
  margin-left: auto; font-weight: 700; color: var(--accent);
  width: 16px; text-align: center;
}

/* Group-creation mode tabs in the new-conversation modal. */
.dm-new-mode-row {
  display: flex; gap: 4px;
  padding: 0 14px 4px;
  border-bottom: 1px solid var(--border);
}
.dm-new-mode-tab {
  flex: 1; padding: 8px 6px;
  text-align: center; font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.dm-new-mode-tab input { display: none; }
.dm-new-mode-tab:hover { color: var(--text-primary); }
.dm-new-mode-tab.is-active {
  color: var(--accent); border-bottom-color: var(--accent);
}
.dm-group-name-row { padding: 0 14px 6px; }
.dm-group-name-row.hidden { display: none; }
.dm-group-name-row input {
  width: 100%; padding: 8px 12px;
  background: var(--bg-sunken); color: var(--text-primary);
  border: 1px solid transparent; border-radius: 16px;
  font-size: 12.5px;
}
.dm-group-name-row input:focus {
  outline: none; background: var(--bg-card); border-color: var(--accent);
}
.dm-selected-chips {
  padding: 4px 14px 6px;
  font-size: 11.5px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.dm-selected-chips.hidden { display: none; }
.dm-selected-chips .muted { margin-right: 4px; }
.dm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 12px;
  background: var(--accent-bg); color: var(--accent-text);
  font-size: 11.5px; font-weight: 500;
}
.dm-chip button {
  background: transparent; border: 0; padding: 0;
  color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1;
}
.dm-new-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}
.dm-new-footer.hidden { display: none; }
.dm-new-footer .btn-primary { font-size: 12.5px; padding: 8px 14px; }

@media (max-width: 900px) {
  .dm-shell { grid-template-columns: 1fr; }
  .dm-thread-list { max-height: 280px; }
  .dm-group { max-width: 90%; }
}
/* Multi-part test breakdown under a leading case — scannable while
   drafting. Accent-coloured numerals (custom counter) instead of the
   default list-style for a more typographic, less browser-default look. */
.pn-test {
  margin: 10px 0 4px; padding: 0 0 0 28px; font-size: 12.5px;
  color: var(--text-primary); line-height: 1.6;
  list-style: none; counter-reset: pn-test-counter;
}
.pn-test li {
  margin: 5px 0; padding-left: 8px; position: relative;
  counter-increment: pn-test-counter;
}
.pn-test li::before {
  content: counter(pn-test-counter) ".";
  position: absolute; left: -22px; width: 18px; text-align: right;
  font-weight: 700; color: var(--accent);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11.5px;
}

.rs-results-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin: 16px 0 8px; font-weight: 600;
}
.rs-result {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px;
  margin-bottom: 8px; background: var(--bg-card);
}
.rs-result:hover { border-color: var(--accent); }
.rs-result-head {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 4px;
}
.rs-citation { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.rs-court { font-size: 11px; }
.rs-tier {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  padding: 1px 7px; border-radius: 8px; text-transform: uppercase;
  margin-left: auto;
}
.rs-tier-body { background: #d1fae5; color: #047857; }
.rs-tier-meta { background: #fef3c7; color: #92400e; }
.rs-title { font-size: 13px; font-style: italic; color: var(--text-primary); margin-bottom: 4px; }
.rs-snippet { font-size: 12px; color: var(--text-muted); line-height: 1.45; margin-bottom: 8px; }
/* Headnote layer — populated from the case_resolution enrichment table. */
.rs-holding {
  font-size: 12px; color: var(--text-primary); line-height: 1.5;
  margin-bottom: 6px;
}
.rs-holding-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--accent);
  margin-right: 4px;
}
.rs-catchwords { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.rs-catchword {
  font-size: 10.5px; padding: 1px 8px; border-radius: 9px;
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--border);
}
.rs-binding {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  padding: 1px 7px; border-radius: 8px; text-transform: uppercase;
}
.rs-binding-yes { background: #dbeafe; color: #1e40af; }
.rs-binding-no { background: var(--bg-sunken); color: var(--text-muted); }
/* "Read in Anchor" — case body reader overlay. */
.rs-reader-card {
  width: min(860px, calc(100vw - 24px));
  top: 6vh; max-height: 86vh;
  display: flex; flex-direction: column;
}
.rs-reader-meta {
  padding: 10px 18px 0; font-size: 12px; font-style: italic;
  color: var(--text-muted);
}
.rs-reader-held {
  margin: 10px 18px 0; padding: 8px 11px; border-radius: 4px;
  background: var(--accent-bg); font-size: 12px; line-height: 1.5;
  color: var(--text-primary);
}
.rs-reader-jump {
  margin: 10px 18px 0; font-size: 11.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}

/* In-document find bar inside the case-reader modal. Visible always
   (no toggle) — finding things in a long judgment is the lawyer's
   primary action while reading. ↑ ↓ × buttons mirror standard
   find-in-page UI. */
.rs-reader-find {
  margin: 10px 18px 0; padding: 6px 10px;
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 6px;
}
.rs-find-input {
  flex: 1 1 auto; min-width: 0;
  padding: 5px 8px; font-size: 12.5px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 4px;
}
.rs-find-counter {
  font-size: 11px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rs-reader-find .btn-mini { padding: 3px 8px; font-size: 12px; min-width: 28px; }
.rs-reader-find .btn-mini:disabled { opacity: 0.4; cursor: not-allowed; }

/* Highlight every match, with a distinct colour for the currently-
   focused one (the one ↑/↓ scrolled to). */
.rs-find-hit {
  background: #fef08a; color: inherit;
  padding: 0 1px; border-radius: 2px;
}
:root[data-theme="dark"] .rs-find-hit {
  background: #5b4d09; color: #fef9c3;
}
.rs-find-hit-active {
  background: #f59e0b; color: #1e293b;
  outline: 2px solid #b45309; outline-offset: 0;
}
:root[data-theme="dark"] .rs-find-hit-active {
  background: #f59e0b; color: #0f172a;
}

/* ─── AI summary blocks ───────────────────────────────────────────────
   Two surfaces share this styling: the shape-of-corpus summary at the
   top of the search results list, and the per-case TL;DR at the top
   of the reader modal. Yellow tint + "✨ AI summary" eyebrow makes
   the provisional nature unmissable. */
.rs-ai-summary,
.rs-reader-tldr {
  margin: 0 18px 12px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
}
.rs-ai-summary { margin: 0 0 14px; }   /* search-pane variant has its own padding */
:root[data-theme="dark"] .rs-ai-summary,
:root[data-theme="dark"] .rs-reader-tldr {
  background: #3d2e0a; border-color: #78350f; border-left-color: #f59e0b;
  color: #fde68a;
}
.rs-ai-summary-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.rs-ai-eyebrow {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: #92400e;
}
:root[data-theme="dark"] .rs-ai-eyebrow { color: #fbbf24; }
.rs-ai-status { flex: 1; font-size: 10.5px; font-style: italic; }
.rs-ai-dismiss {
  font-size: 14px !important; padding: 0 7px !important;
  background: transparent !important; border-color: transparent !important;
  color: inherit !important; opacity: 0.6;
}
.rs-ai-dismiss:hover { opacity: 1; }
.rs-ai-summary-body {
  font-size: 12.5px; line-height: 1.55;
  color: #78350f;
}
:root[data-theme="dark"] .rs-ai-summary-body { color: #fde68a; }
.rs-ai-cite, .rs-ai-paracite {
  display: inline-block;
  padding: 0 4px; margin: 0 1px;
  background: #f59e0b; color: #fff !important;
  border-radius: 3px; font-size: 11px; font-weight: 600;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
}
.rs-ai-cite:hover, .rs-ai-paracite:hover {
  background: #b45309;
}
.rs-ai-test {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed #fde68a;
}
:root[data-theme="dark"] .rs-ai-test { border-top-color: #78350f; }
.rs-ai-test-h {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #92400e; margin-bottom: 4px;
}
:root[data-theme="dark"] .rs-ai-test-h { color: #fbbf24; }
.rs-ai-test-list {
  margin: 0; padding-left: 22px;
  font-size: 12.5px; line-height: 1.55;
}
.rs-ai-test-list li { margin: 3px 0; }

/* Loading skeleton lines for the summary placeholder. */
.rs-ai-skel {
  height: 10px; margin: 5px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #fde68a 25%, #fef3c7 50%, #fde68a 75%);
  background-size: 200% 100%;
  animation: rs-ai-skel-shimmer 1.4s ease-in-out infinite;
}
:root[data-theme="dark"] .rs-ai-skel {
  background: linear-gradient(90deg, #78350f 25%, #92400e 50%, #78350f 75%);
  background-size: 200% 100%;
}
@keyframes rs-ai-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-ai-skel { animation-duration: 6s; }
}

/* Brief highlight flash on a result row / paragraph the user jumped
   to via a [N] / [¶N] anchor click. */
.rs-result-flash, .rs-para-flash {
  animation: rs-flash 1.6s ease-out;
}
@keyframes rs-flash {
  0%   { background: #fef3c7; }
  100% { background: transparent; }
}
.rs-reader-body {
  margin: 12px 18px; padding: 16px 20px; flex: 1; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; font-size: 12.5px; line-height: 1.7;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--text-primary);
}
/* Judgment rendering — CanLII / Lexum convention: structured caption
   block, numbered paragraphs with the number in a left-margin gutter,
   section headings pulled out. */
.rj-header {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px; color: var(--text-muted); line-height: 1.55;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.rj-header .rj-h-cite {
  font-weight: 700; color: var(--text-primary); font-size: 13px;
  margin-bottom: 3px;
}
.rj-heading {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11.5px; font-weight: 700; color: var(--text-primary);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin: 22px 0 9px; white-space: normal;
}
/* Caption block in the evidence pane (offset-preserving render keeps
   the original line breaks, so pre-wrap). */
.rj-caption {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px; color: var(--text-muted); line-height: 1.55;
  white-space: pre-wrap;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.rj-para { display: flex; gap: 14px; margin: 0 0 11px; }
.rj-para-disp {
  background: #fef9c3; border-radius: 4px;
  margin: 0 -8px 11px; padding: 6px 8px;
}
:root[data-theme="dark"] .rj-para-disp { background: #4a3f1c; }
.rj-num {
  flex: 0 0 34px; text-align: right; padding-top: 1px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 10px; font-weight: 700; color: var(--accent);
  white-space: normal; user-select: none;
}
/* Paragraph body flows as prose even inside the pre-wrap doc viewer —
   the hard-wrap newlines from text extraction collapse visually while
   the DOM text (and therefore citation offsets) is left untouched. */
.rj-text { flex: 1; white-space: normal; }
.rj-plain { margin: 0 0 11px; }

/* Court-judgment headnote banner in the evidence pane — surfaces the
   case_resolution enrichment (joined via documents.warehouse_case_id)
   so a case saved from Research keeps its holding + dispositive
   paragraphs instead of becoming a flat text blob. */
.ev-resolution {
  margin: 10px 0; padding: 10px 12px;
  background: var(--accent-bg); border: 1px solid var(--border);
  border-radius: 5px; font-size: 12px;
}
.ev-res-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.ev-res-tag { font-weight: 700; color: var(--accent); }
.ev-res-holding { color: var(--text-primary); line-height: 1.5; margin-bottom: 6px; }
.ev-res-disp { font-size: 11.5px; color: var(--text-muted); }
.ev-disp-jump {
  font-size: 11px; font-weight: 700; padding: 0 6px; margin: 0 1px;
  border: 1px solid var(--border-strong); border-radius: 3px;
  background: var(--bg-card); color: var(--accent); cursor: pointer;
}
.ev-disp-jump:hover { background: var(--accent); color: #fff; }
.ev-disp { background: #fef9c3; border-radius: 2px; }
:root[data-theme="dark"] .ev-disp { background: #4a3f1c; }
.rs-reader-coding {
  margin: 0 18px; padding: 10px 12px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 4px; font-size: 12px;
}
.rs-coding-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rs-coding-label { font-weight: 600; color: var(--text-primary); }
.rs-code-select, .rs-code-memo {
  font-size: 12px; padding: 4px 7px; border-radius: 4px;
  border: 1px solid var(--border-strong); background: var(--bg-card);
  color: var(--text-primary);
}
.rs-code-memo { flex: 1; min-width: 160px; }
.rs-coding-applied { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rs-reader-actions {
  padding: 12px 18px 14px; display: flex; gap: 8px; justify-content: flex-end;
}
.rs-result .rs-actions { margin: 0; gap: 6px; }
.rs-result .btn-mini {
  padding: 3px 10px; font-size: 11.5px;
  background: var(--bg-sunken); border: 1px solid var(--border-strong);
  color: var(--text-primary); border-radius: 3px; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.rs-result .btn-mini:hover { background: var(--accent-bg); border-color: var(--accent); }
.rs-err {
  background: #fee2e2; color: #991b1b; padding: 10px 12px;
  border-radius: 4px; font-size: 12.5px;
}

/* Research tab — concept chips + how-we-searched ────────────────── */
.rs-chips-block {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.rs-chips-block.hidden { display: none; }
.rs-chips-label {
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 6px;
}
.rs-chip-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.rs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: 12px; font-size: 12px; color: var(--text-primary);
}
.rs-chip-concept { border-color: var(--accent); }
.rs-chip-named { border-color: #047857; background: #d1fae5; color: #064e3b; }
.rs-chip-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; line-height: 1;
  padding: 0 4px; border-radius: 50%;
}
.rs-chip-x:hover { background: var(--bg-sunken); color: #b91c1c; }
.rs-add-row { margin: 6px 0; }
.rs-add-row input {
  width: 100%; padding: 5px 8px; font-size: 12px;
  border: 1px dashed var(--border-strong);
  background: transparent; color: var(--text-primary); border-radius: 3px;
}
.rs-add-row input:focus { border-style: solid; border-color: var(--accent); outline: none; }

.rs-how { margin-top: 12px; }
.rs-how-detail summary {
  font-size: 11px; color: var(--text-muted); cursor: pointer;
  padding: 6px 4px; user-select: none;
}
.rs-how-detail[open] summary { color: var(--text-primary); }
.rs-how-body {
  font-size: 11.5px; color: var(--text-primary);
  background: var(--bg-sunken); padding: 8px 12px;
  border-radius: 3px; line-height: 1.6;
}
.rs-how-body > div b { color: var(--text-muted); margin-right: 4px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.rs-how-queries { list-style: none; padding: 0; margin: 4px 0 0; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; }
.rs-how-queries li { padding: 2px 0; }

.rs-chip-filter {
  border-color: #f59e0b; background: #fef3c7; color: #78350f;
}

/* ─── Saved case-law searches ────────────────────────────────────── */
.ev-saved-searches:empty { display: none; }
.ev-saved-h {
  display: flex; align-items: baseline; gap: 8px;
  margin: 12px 0 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
}
.ev-saved-title { color: var(--text-primary); }
.ev-saved-list { list-style: none; padding: 0; margin: 0; }
.ev-saved-row {
  display: grid; grid-template-columns: 16px 1fr auto 20px;
  align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 4px;
  font-size: 12px;
}
.ev-saved-row:hover { background: var(--bg-sunken); }
.ev-saved-scope {
  color: var(--text-faint); font-size: 13px; text-align: center;
  cursor: help;
}
.ev-saved-name {
  background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer;
  color: var(--accent); font-weight: 500; font-size: 12.5px;
  text-decoration: none;
}
.ev-saved-name:hover { text-decoration: underline; }
.ev-saved-meta {
  font-size: 10.5px; color: var(--text-muted); white-space: nowrap;
}
.ev-saved-del {
  background: none; border: 0; padding: 0;
  width: 20px; height: 20px;
  color: var(--text-faint); cursor: pointer; font-size: 16px;
  border-radius: 3px;
}
.ev-saved-del:hover { color: #b91c1c; background: #fee2e2; }
:root[data-theme="dark"] .ev-saved-del:hover { color: #fca5a5; background: #3a0d0d; }

#ev-save-search { font-size: 11.5px; }
#ev-save-search.hidden { display: none; }

/* ─── Responsive — tablet & narrow viewports ─────────────────────────
   Anchor is a desktop-class drafting tool. The editor (TipTap +
   evidence pane + form rail) doesn't make sense below ~900px; we
   put up a "wider screen" notice there rather than serving a broken
   experience. Everything else — matters list, inbox, activity,
   settings, dashboard, sanitize, documents library — reflows
   properly. Breakpoints:
     ≤ 1100px   tighter container + wrap head actions
     ≤ 900px    two-col layouts collapse to stack; topbar trims;
                 draft editor shows "use a wider screen" guard
     ≤ 640px    phone — single-column everywhere, larger touch targets
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .container { padding: 0 16px; margin: 24px auto; }
  .head-actions { flex-wrap: wrap; }
  .matters-head { flex-wrap: wrap; gap: 10px; }
  .container.two-col { gap: 16px; }
}

@media (max-width: 900px) {
  /* Container layouts: stack the two-col view (sidebar + main) into
     a single column so the sidecard sits above the main content
     instead of squeezing into a 240-px stripe. */
  .container.two-col,
  .container.two-col.with-right { grid-template-columns: 1fr; }
  .container.two-col .sidecard { order: 2; }
  .container.two-col .main-col  { order: 1; }

  /* Topbar trims to essentials. The crumb meta + roadmap + precedents
     + firm-tag hide; brand + bell + theme + inbox + user stay. */
  .topbar { gap: 10px; padding: 10px 14px; }
  .topbar .firm-tag,
  .topbar .crumb .meta,
  .topbar .topbar-link[href="/roadmap"],
  .topbar .topbar-link[href="/firm/precedents"] { display: none; }
  .topbar .crumb { padding-left: 8px; gap: 6px; }
  .topbar .crumb a { font-size: 12px; }
  .topbar-link { padding: 4px 6px; font-size: 11.5px; }

  /* New-matter form: drop to single-column inputs. */
  .form-stack .row-2 { grid-template-columns: 1fr; }
  .matter-type-grid { grid-template-columns: repeat(2, 1fr); }

  /* Matter-overview head: actions wrap below the title, full-width. */
  .main-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .head-actions { justify-content: flex-start; }
  .head-actions .btn-secondary,
  .head-actions .btn-primary { font-size: 12.5px; padding: 8px 10px; }

  /* Activity feed + inbox + notif prefs already cap at 720-880px;
     they look fine at this width — no overrides needed. */

  /* Sanitize-review: side-by-side grid → stacked. */
  .rv-grid { grid-template-columns: 1fr; }

  /* Matter-preview shell (left-rail TOC + body). */
  .mp-shell { grid-template-columns: 200px 1fr; }
}

@media (max-width: 900px) {
  /* The draft editor is the one screen we don't try to fit. It needs
     ≥3 columns (rail / page / evidence) plus a fixed page-area width
     for the TipTap "paper" to read like a document. Below 900px we
     show a polite guard. The wrapper is .draft-shell — we hide its
     children and overlay a notice. */
  .draft-shell::before {
    content: 'Open Anchor on a tablet (landscape) or larger screen to draft. Drafting tools need room for the form, the page, and the evidence — they don\'t shrink gracefully. The matters list, inbox, activity, and document library all work fine here.';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 28px; z-index: var(--z-banner);
    background: var(--bg-app); color: var(--text-primary);
    font-size: 14px; line-height: 1.6; text-align: center;
    max-width: 480px; margin: 60px auto 0;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    height: max-content;
  }
  .draft-shell { position: relative; }
  .draft-shell > * { visibility: hidden; }
}

@media (max-width: 640px) {
  /* Phone: tighten further, full-width matter cards, larger tap targets. */
  .container { padding: 0 12px; margin: 16px auto; }
  .container h1 { font-size: 19px; }
  .matter-type-grid { grid-template-columns: 1fr; }
  .topbar .crumb a { font-size: 11px; }
  .topbar .brand { font-size: 14px; }
  .topbar-link { font-size: 11px; padding: 3px 5px; }
  /* Inbox / activity rows — comfortable tap target heights. */
  .inbox-row, .act-row { padding: 12px 0; }
  .act-row { grid-template-columns: 24px 1fr; gap: 8px; }
  /* Notification prefs: tighter padding so the rows don't waste space. */
  .notif-pref-toggle { padding: 10px 12px; }
}

/* Print: hide the mobile guard if it somehow leaks through. */
@media print {
  .draft-shell::before { display: none !important; }
  .draft-shell > * { visibility: visible !important; }
}