/* DemandWarrior — tightened editorial law-firm aesthetic */

:root {
  --ink:        #0e1a2b;
  --ink-soft:   #1c2942;
  --ink-muted:  #4a5568;
  --paper:      #f6f1e7;
  --paper-2:    #efe7d4;
  --line:       #c9bea4;
  --brass:      #a4793c;
  --brass-deep: #7a5723;
  /* v3.7.342 — brighter, more saturated member of the brass/gold family.
     Used for the firm-news ticker text so it reads clearly against the
     navy (--ink) ticker background. */
  --brass-bright: #ecc04a;
  --burgundy:   #7a1b2e;

  --signal-strong: #2d5d3a;
  --signal-review: #b6892e;
  --signal-reject: #7a1b2e;
  --signal-refer:  #5a4a78;

  --radius: 2px;
  --shadow-ink: 0 1px 0 rgba(14,26,43,0.08), 0 12px 24px -16px rgba(14,26,43,0.18);

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body:    "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
  background-image:
    radial-gradient(rgba(14,26,43,0.025) 1px, transparent 1px),
    radial-gradient(rgba(14,26,43,0.015) 1px, transparent 1px);
  background-size: 28px 28px, 44px 44px;
  background-position: 0 0, 14px 22px;
}

a { color: var(--brass-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.3em;
}
h1 { font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; letter-spacing: 0; }

p { margin: 0 0 0.7em; }

/* =============== Header =============== */
.topbar {
  background: var(--ink);
  color: var(--paper);
  padding: 6px 0;
  border-bottom: 3px solid var(--brass);
  /* v3.7.1185 — the header stays visible while the page scrolls. Sticky
     also keeps it a positioning context, so the mobile nav dropdown
     (absolute, top:100%) rides along with it. z sits above page content
     but far below modals (1100+), the viewer (10000), and toasts. */
  position: sticky;
  top: 0;
  z-index: 900;
}
.topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.brand .amp { color: var(--brass); font-style: normal; }
.brand small {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.6em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(246,241,231,0.55);
  margin-left: 12px;
  border-left: 1px solid rgba(246,241,231,0.2);
  padding-left: 12px;
}
.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
}
.nav-links a {
  color: rgba(246,241,231,0.78);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-links a:hover { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--brass); }
.nav-links a.active { color: var(--paper); border-bottom: 1px solid var(--brass); }
/* v3.7.411 — Quick Actions link is shown only in the collapsed mobile nav. */
.nav-qa-mobile { display: none; }
/* V3.3: Unread count badge that lives inside a nav link (e.g. Tasks).
   Small brass pill, hugs the text. */
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--brass);
  color: #1a1410;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
}

/* v3.3.90: red "!" attention flag next to Tasks — set by the
   "Notify all assignees" action. Distinct from .nav-badge (the
   unread-updates count); both can appear together. */
.nav-bang {
  display: inline-block;
  margin-left: 6px;
  min-width: 16px;
  padding: 1px 5px;
  background: #c0392b;
  color: #fff;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
}

/* v3.7.250 — mobile: hamburger nav + compact brand + case-tab pop-down.
   Buttons are hidden by default and revealed inside the responsive media
   queries below. */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(246,241,231,0.3);
  color: var(--paper);
  border-radius: 6px;
  padding: 3px 11px;
  font-size: 1.15rem;
  line-height: 1.2;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brass); }
.brand-sub-short { display: none; }
.case-tabs-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--ink, #2b2b2b);
  color: var(--paper, #f6f1e7);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}
.case-tabs-toggle:hover { background: #3a2f20; }

@media (max-width: 900px) and (pointer: coarse), (max-width: 600px) {
  .topbar { position: sticky; top: 0; } /* v3.7.1185 — sticky on mobile too (still anchors the nav dropdown) */
  .topbar-inner { gap: 12px; }
  .brand-name { display: none; }
  .brand-sub-full { display: none; }
  .brand-sub-short { display: inline; }
  .brand small { margin-left: 0; border-left: none; padding-left: 0; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    padding: 6px 24px 12px;
    border-bottom: 3px solid var(--brass);
    box-shadow: 0 10px 24px rgba(0,0,0,0.3);
    display: none;
    z-index: 200;
  }
  .nav-links.open { display: flex; }
  .nav-qa-mobile { display: block; }
  .nav-links a {
    padding: 11px 2px;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(246,241,231,0.08);
  }
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(246,241,231,0.78);
}

/* v3.6.402 — User-menu dropdown. Username + caret button opens a panel
   containing Account, Sign out, and (multi-role users) a role switcher.
   Replaces the old inline row of role pill / Account link / Sign-out
   button which crowded the header. */
.user-menu { position: relative; }
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(246,241,231,0.2);
  color: rgba(246,241,231,0.85);
  padding: 4px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
}
.user-menu-trigger:hover { border-color: var(--brass); color: var(--paper); }
.user-menu-name { font-weight: 500; }
.user-menu-caret {
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.user-menu[data-menu-open="true"] .user-menu-caret { transform: rotate(180deg); }
.user-menu[data-menu-open="true"] .user-menu-trigger {
  border-color: var(--brass);
  color: var(--paper);
}
.user-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  background: var(--paper, #fff);
  color: var(--ink, #1c1c1c);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border-radius: 4px;
  padding: 4px 0;
  z-index: 100;
}
.user-menu[data-menu-open="true"] .user-menu-dropdown { display: block; }
.user-menu-section { padding: 8px 14px; }
.user-menu-section-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  margin-bottom: 4px;
}
.user-menu-section .role-switcher { display: block; }
.user-menu-section .role-switcher select {
  width: 100%;
  padding: 4px 6px;
  font-size: 0.82rem;
  font-family: inherit;
  background: var(--cream, #f6f1e7);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 3px;
  cursor: pointer;
}
.user-menu-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 4px 0;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ink, #1c1c1c);
  padding: 8px 14px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.user-menu-item:hover { background: rgba(164,121,60,0.1); color: var(--brass-deep, #6b4f2a); }
.user-menu-item-button { line-height: inherit; letter-spacing: normal; text-transform: none; }

/* =============== Main layout =============== */
main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 20px;
  gap: 12px;
}
.page-head .eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

/* =============== Buttons =============== */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  border-radius: var(--radius);
  transition: transform 0.08s ease;
}
.btn:hover { background: var(--ink-soft); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-outline {
  background: transparent;
  color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-brass {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
.btn-brass:hover { background: var(--brass-deep); color: var(--paper); }
.btn-danger {
  background: var(--burgundy);
  border-color: var(--burgundy);
}
.btn-danger:hover { background: #5e1422; }
.btn-sm { padding: 5px 11px; font-size: 0.66rem; }

/* =============== Forms =============== */
label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="tel"], input[type="search"], select, textarea {
  width: 100%;
  padding: 7px 11px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(164,121,60,0.15);
}
textarea { resize: vertical; min-height: 44px; font-family: var(--font-body); }
.field-row { margin-bottom: 12px; }
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.field-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* =============== Cards / Panels =============== */
.panel {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-ink);
}

/* =============== Stat cards =============== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.stat {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  text-decoration: none;
  display: block;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.stat:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14,26,43,0.25);
}
.stat.brass { background: var(--brass); color: var(--ink); }
.stat.green { background: var(--signal-strong); color: var(--paper); }
.stat.amber { background: var(--signal-review); color: var(--ink); }
.stat.burgundy { background: var(--burgundy); color: var(--paper); }
/* v3.6.372 — two new tiles for the intake dashboard:
   - .stat.teal  → "Awaiting Documents" (cool slate-blue, "waiting" feel)
   - .stat.evergreen → "Signed Up" (deep success-green, distinct
       from .green which is already the Strong Leads tile, so the two
       greens don't read as the same category) */
.stat.teal { background: #2e6f7a; color: var(--paper); }
.stat.evergreen { background: #1f4a2c; color: var(--paper); }
.stat .label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 4px;
}
.stat .value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat.active {
  outline: 3px solid var(--brass);
  outline-offset: -3px;
}
.stat::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 60px;
  height: 60px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.12;
}

/* =============== Tables =============== */
table.data {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
}
table.data th {
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 9px 12px;
  border-bottom: 2px solid var(--ink);
}
table.data td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.data tr:hover td { background: rgba(164,121,60,0.06); }
.client-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
}
.client-name a { color: var(--ink); }
.client-name a:hover { color: var(--brass-deep); }

/* =============== Tier badges =============== */
.tier {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius);
  font-family: var(--font-body);
}
.tier-Strong { background: var(--signal-strong); color: #fff; }
.tier-Good   { background: #7ba558; color: #fff; }
.tier-Medium { background: var(--signal-review); color: var(--ink); }
.tier-Weak   { background: #8a7a5c; color: #fff; }
.tier-Review { background: var(--signal-review); color: var(--ink); }
.tier-Reject { background: var(--signal-reject); color: #fff; }
.tier-Refer  { background: var(--signal-refer);  color: #fff; }

/* v3.7.291 — Tier as a compact color block (no words) for the intake
   dashboard Tier column. Reuses the .tier-<Name> background colors. */
.tier-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  vertical-align: middle;
}

.status-pill {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ink-muted);
  color: var(--ink-muted);
  padding: 2px 7px;
  background: rgba(255,255,255,0.4);
}
.sol-pill {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius);
  margin-left: 4px;
}
.sol-pill.warning { background: var(--signal-review); color: var(--ink); }
.sol-pill.expired { background: var(--signal-reject); color: #fff; }

/* =============== Filter bar =============== */
.filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.filter-bar .group {
  display: flex;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.filter-bar .group a {
  padding: 6px 14px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border-right: 1px solid var(--ink);
}
.filter-bar .group a:last-child { border-right: 0; }
.filter-bar .group a.active { background: var(--ink); color: var(--paper); text-decoration: none; }
.filter-bar select, .filter-bar input[type="search"] { width: auto; padding: 6px 11px; }
.filter-bar form { margin: 0; display: flex; gap: 8px; align-items: center; }

.search-form { flex: 1; max-width: 320px; }
.search-form input { width: 100%; }

.active-filters {
  margin-bottom: 12px;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.active-filters .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: var(--radius);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.active-filters .chip a {
  color: rgba(246,241,231,0.7);
  margin-left: 4px;
  font-weight: 700;
}
.active-filters .chip a:hover { color: var(--paper); text-decoration: none; }

/* =============== Intake (client detail) layout — CRITICAL =============== */
.intake-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: flex-start;
}
.intake-questions { min-width: 0; }

/* Sticky rail that handles overflow internally — never scrolls offscreen */
.score-rail {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--brass) transparent;
  padding-right: 4px;
}
.score-rail::-webkit-scrollbar { width: 6px; }
.score-rail::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 3px; }
.score-rail::-webkit-scrollbar-track { background: transparent; }

.question-card {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius);
}
.question-card .qtext {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--ink);
  line-height: 1.25;
}
.question-card .qmeta {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.option-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 6px 0 6px;
}
.option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 7px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
  font-size: 0.85rem;
  line-height: 1.3;
}
.option-row:hover { background: rgba(164,121,60,0.08); }
.option-row input { margin: 0; accent-color: var(--brass-deep); flex-shrink: 0; }
.option-row .pts {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-muted);
  padding: 0 5px;
  background: rgba(14,26,43,0.06);
  border-radius: var(--radius);
}
.option-row .pts.pos { color: var(--signal-strong); background: rgba(45,93,58,0.1); }
.option-row .pts.neg { color: var(--signal-reject); background: rgba(122,27,46,0.1); }
.option-row .flag {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-reject);
  font-weight: 600;
  padding-left: 6px;
}
.note-field {
  margin-top: 4px;
  font-size: 0.82rem;
}
.note-field label { font-size: 0.6rem; margin-bottom: 2px; }
.note-field textarea { min-height: 28px; padding: 5px 8px; font-size: 0.82rem; }

/* Date question */
.date-question {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  flex-wrap: wrap;
}
.date-question input[type="date"] {
  width: 170px;
}
.date-question .date-bucket {
  font-size: 0.74rem;
  color: var(--ink-muted);
  font-style: italic;
}
.date-question .date-bucket strong {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}

/* Narrative free-text question */
.narrative-question textarea {
  width: 100%;
  min-height: 60px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Address autocomplete */
.address-question {
  position: relative;
}
.address-question input[type="text"] {
  width: 100%;
}
.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--brass);
  border-top: none;
  box-shadow: 0 6px 18px -6px rgba(14,26,43,0.3);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
}
.address-suggestions.empty { display: none; }
.address-suggestion {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.88rem;
  border-bottom: 1px dashed var(--line);
  line-height: 1.3;
}
.address-suggestion:last-child { border-bottom: 0; }
.address-suggestion:hover, .address-suggestion.active {
  background: rgba(164,121,60,0.15);
}
.address-suggestion .addr-secondary {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.address-status {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Grouped question (ER/hospital/imaging) */
.group-question {
  border: 1px dashed var(--line);
  padding: 10px 12px;
  margin-top: 6px;
  background: rgba(255,255,255,0.3);
  border-radius: var(--radius);
}
.group-question .group-field {
  margin-bottom: 8px;
}
.group-question .group-field:last-child { margin-bottom: 0; }
.group-question .group-field-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.group-question .inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.group-question .inline-options label {
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.group-question .inline-options label:hover { background: rgba(164,121,60,0.08); }
.group-question .inline-options input {
  margin: 0;
  accent-color: var(--brass-deep);
}
.group-question select {
  font-size: 0.86rem;
  padding: 5px 9px;
  max-width: 420px;
}

/* =============== Sticky score panel content =============== */
.score-card {
  background: var(--ink);
  color: var(--paper);
  padding: 18px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  box-shadow: 0 14px 30px -16px rgba(14,26,43,0.4);
}
.score-card .eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246,241,231,0.55);
  margin-bottom: 4px;
}
.score-number {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 2px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.score-number .sign { color: var(--brass); font-size: 2rem; }
.tier-card-label {
  display: inline-block;
  margin: 8px 0 4px;
}
.score-flags {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(246,241,231,0.15);
  font-size: 0.74rem;
}
.score-flags .flag-item {
  padding: 4px 0;
  border-bottom: 1px dashed rgba(246,241,231,0.1);
}
.score-flags .flag-item:last-child { border-bottom: 0; }
.score-flags .flag-tag {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--brass);
  color: var(--ink);
  padding: 1px 5px;
  margin-right: 4px;
  font-weight: 700;
}
/* v3.7.24 — Duplicate-name flag rendered in red so it pops in the
   Triggered Flags panel alongside the (typically brass) intake
   flags. Same red used by the top-of-page banner + sol-banner for
   visual consistency. Both the tag and the option text get the
   accent so the row reads "warning" at a glance. */
.score-flags .flag-item[data-flag-key="possible_duplicate"] .flag-tag {
  background: var(--signal-reject);
  color: #fff;
}
.score-flags .flag-item[data-flag-key="possible_duplicate"] {
  color: var(--signal-reject);
}

.sol-banner {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 0.76rem;
  border-radius: var(--radius);
  font-weight: 500;
}
.sol-banner.warning {
  background: var(--signal-review);
  color: var(--ink);
}
.sol-banner.expired {
  background: var(--signal-reject);
  color: #fff;
}
.sol-banner .sol-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2px;
}

.client-summary {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.client-summary h3 { margin: 0 0 8px; }
.client-summary dl { margin: 0; font-size: 0.82rem; }
.client-summary dt {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
}
.client-summary dt:first-of-type { margin-top: 0; }
.client-summary dd { margin: 1px 0 0; color: var(--ink); }
.client-summary .field-row { margin-bottom: 8px; }
.client-summary .field-row:last-of-type { margin-bottom: 0; }

/* =============== Attachments =============== */
.attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.attach-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.82rem;
}
.attach-list li:last-child { border-bottom: 0; }
.attach-icon {
  display: inline-block;
  width: 22px;
  height: 28px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  position: relative;
  flex-shrink: 0;
}
.attach-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent var(--paper) transparent transparent;
}

/* =============== Auth =============== */
.auth-wrap {
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-ink);
  position: relative;
}
.auth-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--ink) 100%);
}
.auth-card h1 { font-style: italic; margin-bottom: 4px; }
.auth-hint {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.auth-hint code {
  font-family: var(--font-mono);
  background: rgba(14,26,43,0.07);
  padding: 1px 5px;
  border-radius: var(--radius);
}

/* =============== Notices =============== */
.notice {
  padding: 10px 14px;
  border-left: 3px solid var(--signal-reject);
  background: rgba(122,27,46,0.07);
  color: var(--ink);
  margin-bottom: 14px;
  font-size: 0.85rem;
}
.notice.info { border-color: var(--brass); background: rgba(164,121,60,0.08); }
.notice.success { border-color: var(--signal-strong); background: rgba(45,93,58,0.07); }

.flash-saved {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-strong);
  margin-left: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}
.flash-saved.visible { opacity: 1; }

.split-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .intake-layout { grid-template-columns: 1fr; }
  .score-rail { position: static; max-height: none; overflow: visible; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .field-grid, .field-grid-3, .split-form { grid-template-columns: 1fr; }
}

.rule-ornament {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--brass);
}
.rule-ornament::before, .rule-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.rule-ornament span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* =============== Modal =============== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,26,43,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-box {
  background: var(--paper);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(14,26,43,0.5);
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: relative;
}
.modal-box::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--ink) 100%);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px 8px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 {
  margin: 0;
  font-style: italic;
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 0 4px;
}
.modal-close:hover { color: var(--ink); }
.modal-body {
  padding: 16px 22px 22px;
}

/* Referral partner picker results */
.partner-search-results {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.6);
  margin-top: 8px;
}
.partner-search-results.empty { display: none; }
.partner-result {
  padding: 9px 12px;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
  font-size: 0.88rem;
}
.partner-result:last-child { border-bottom: 0; }
.partner-result:hover,
.partner-result.selected {
  background: rgba(164,121,60,0.18);
}
.partner-result .firm-name {
  font-family: var(--font-display);
  font-size: 1rem;
}
.partner-result .firm-meta {
  font-size: 0.74rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.partner-result .firm-areas {
  margin-top: 3px;
}
.partner-result .firm-areas .area-tag {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink-soft);
  color: var(--paper);
  padding: 1px 6px;
  margin-right: 3px;
  border-radius: var(--radius);
}

/* Inline form field grouping for modal */
.modal-body .inline-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Referral history panel */
.referral-history-item {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  background: rgba(255,255,255,0.6);
  margin-bottom: 8px;
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.referral-history-item.declined {
  border-left-color: var(--signal-reject);
  background: rgba(122,27,46,0.06);
}
.referral-history-item.accepted {
  border-left-color: var(--signal-strong);
}
.referral-history-item.closed {
  border-left-color: var(--ink);
  background: rgba(14,26,43,0.04);
}
.referral-history-item .ref-firm {
  font-family: var(--font-display);
  font-size: 0.98rem;
}
.referral-history-item .ref-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 0.76rem;
  color: var(--ink-muted);
}

/* Disabled state for inputs */
input:disabled, select:disabled, textarea:disabled {
  background: rgba(14,26,43,0.04);
  color: var(--ink-muted);
  cursor: not-allowed;
}

/* =============== Toast notifications =============== */
.toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  pointer-events: none;
}
.toast {
  background: var(--paper);
  border: 1px solid var(--brass);
  border-left: 4px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px -10px rgba(14,26,43,0.4);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}
.toast.toast-in { opacity: 1; transform: translateX(0); }
.toast.toast-out { opacity: 0; transform: translateX(20px); }

.toast-email { border-left-color: var(--brass); }
.toast-success { border-left-color: var(--signal-strong); }
.toast-warning { border-left-color: var(--signal-review); }
.toast-error { border-left-color: var(--signal-reject); }
.toast-decline { border-left-color: var(--signal-reject); flex-direction: column; align-items: stretch; }
/* V3.3.1: Task assignment / update toast. The whole thing is clickable
   (the JS sets toast.onclick), so we give it an obvious hover state
   and use the firm's brass palette to distinguish it from neutral flash
   messages. Slightly larger than the rest so it draws attention. */
.toast-task {
  border-left-color: var(--brass-deep, #8a5a2c);
  background: linear-gradient(180deg, #2c1f12 0%, #1e1610 100%);
  color: var(--paper, #f5ede0);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.toast-task:hover { transform: translateX(-2px); }
.toast-task .toast-msg { color: var(--paper, #f5ede0); }
.toast-task .toast-icon { color: var(--brass, #c89f5b); }
.toast-task .toast-close { color: rgba(255,255,255,0.6); }
.toast-task .toast-close:hover { color: var(--paper); }

.toast-icon {
  font-size: 1.05rem;
  line-height: 1;
  margin-top: 1px;
  color: var(--brass-deep);
  flex-shrink: 0;
  min-width: 16px;
}
.toast-success .toast-icon { color: var(--signal-strong); }
.toast-warning .toast-icon { color: var(--signal-review); }
.toast-error .toast-icon { color: var(--signal-reject); }

.toast-msg { flex: 1; color: var(--ink); }
.toast-close {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 2px;
  margin-top: -2px;
}
.toast-close:hover { color: var(--ink); }

.toast-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* =============== Referrals stat tiles =============== */
.referral-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.referral-stats a {
  display: block;
  padding: 14px 16px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.referral-stats a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px rgba(14,26,43,0.25);
}
.referral-stats a.active {
  background: rgba(164,121,60,0.12);
  border-top-color: var(--brass-deep);
  border-top-width: 4px;
}
.referral-stats .stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.referral-stats .stat-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  margin-top: 4px;
  font-weight: 500;
}
.referral-stats .stat-fees .stat-num { font-size: 1.4rem; }
.referral-stats .stat-pending { border-top-color: var(--signal-review); }
.referral-stats .stat-accepted { border-top-color: var(--signal-strong); }
.referral-stats .stat-declined { border-top-color: var(--signal-reject); }
.referral-stats .stat-closed { border-top-color: var(--ink); }

/* =============== SMS consent badge =============== */
.consent-badge {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: 600;
  vertical-align: 1px;
}
.consent-yes {
  background: rgba(46,93,73,0.15);
  color: var(--signal-strong);
  border: 1px solid rgba(46,93,73,0.4);
}
.consent-no {
  background: rgba(122,27,46,0.1);
  color: var(--signal-reject);
  border: 1px solid rgba(122,27,46,0.3);
}

/* =============== SMS history =============== */
.sms-history {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sms-item {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 0.82rem;
}
.sms-item.sms-failed {
  border-left-color: var(--signal-reject);
  background: rgba(122,27,46,0.04);
}
.sms-item.sms-queued {
  border-left-color: var(--signal-review);
}
.sms-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.sms-direction {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brass-deep);
}
.sms-status {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.62rem;
}
.sms-time {
  margin-left: auto;
  font-family: var(--font-mono);
}
.sms-body {
  color: var(--ink);
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.sms-footer {
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-top: 4px;
  font-style: italic;
}

/* ============================================================
   V2: Role system UI (badges, checkbox grid, role switcher)
   ============================================================ */

/* Compact role pills for the users table on /admin */
.role-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  margin: 0 2px 2px 0;
  border-radius: var(--radius);
  background: var(--ink-soft);
  color: var(--paper);
  white-space: nowrap;
}
.role-badge.role-badge-elevated {
  background: var(--brass);
  color: var(--ink);
}

/* Checkbox grid for picking roles on user create/edit */
.role-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.role-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
}
.role-checkbox:hover {
  background: rgba(164,121,60,0.08);
  border-color: var(--brass);
}
.role-checkbox input[type="checkbox"] {
  margin-top: 2px;
  width: auto;
  flex-shrink: 0;
}
.role-checkbox input[type="checkbox"]:checked + .role-checkbox-label strong {
  color: var(--brass-deep);
}
.role-checkbox-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.role-checkbox-label strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 0.95rem;
}
.role-checkbox-label small {
  font-size: 0.74rem;
  color: var(--ink-muted);
  line-height: 1.35;
}

/* Role switcher in the top nav (for users with >1 role) */
.role-switcher {
  display: inline-flex;
  margin: 0;
}
.role-switcher select {
  background: rgba(255,255,255,0.08);
  color: var(--paper);
  border: 1px solid rgba(246,241,231,0.2);
  border-radius: var(--radius);
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  appearance: auto;
}
.role-switcher select:hover {
  background: rgba(255,255,255,0.14);
  border-color: var(--brass);
}
.role-switcher select option {
  background: var(--ink);
  color: var(--paper);
}

/* ============================================================
   V2 Phase 3: Case management — shell, sidebar, tabs, KV editor
   ============================================================ */

.case-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) and (pointer: coarse), (max-width: 600px) {
  .case-shell { grid-template-columns: 1fr; }
  /* v3.7.250 — replace the always-on (and overlapping, since it's sticky)
     sidebar with a pop-down toggled by the ☰ Tabs button. */
  .case-tabs-toggle { display: inline-flex; }
  /* v3.7.1196 — the base ".case-sidebar { position: sticky; top: 16px }"
     rule is declared AFTER this media block, and with equal specificity the
     later rule wins — so on mobile the open pop-down was silently STICKY:
     it pinned near the top and the tab content scrolled underneath it.
     html-prefixed selectors outrank the base rule so the pop-down is truly
     in-flow (scrolls away with the page like any block). */
  html .case-sidebar { position: static; top: auto; display: none; }
  html .case-sidebar.open { display: block; margin-bottom: 16px; }
}

.case-sidebar {
  position: sticky;
  top: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.55);
  padding: 0;
}
.case-sidebar-section {
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}
.case-sidebar-section:last-child { border-bottom: none; }
.case-sidebar-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

/* v3.7.1299 — desktop sidebar collapse.
   The Tabs eyebrow becomes a row so the collapse control sits top-right. */
.case-sidebar-eyebrow.case-tabs-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.case-sidebar-collapse {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
  color: var(--ink-muted);
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 7px;
  font-size: 0.9rem;
  letter-spacing: 0;
  transition: background 0.15s, color 0.15s;
}
.case-sidebar-collapse:hover { background: var(--brass-deep); color: #fff; border-color: var(--brass-deep); }
/* Collapsed: hide the sidebar, drop the shell to one column so the content
   reclaims the width, and reveal the slim re-open rail. Keyed off BOTH the
   pre-paint <html> flag (no flash on load) and the shell class (JS toggle). */
.case-shell.sidebar-collapsed,
html.dw-sidebar-collapsed .case-shell { grid-template-columns: 1fr; }
.case-shell.sidebar-collapsed > .case-sidebar,
html.dw-sidebar-collapsed .case-shell > .case-sidebar { display: none; }
.case-sidebar-reopen {
  display: none;
  position: sticky;
  top: 16px;
  align-self: start;
  border: 1px solid var(--line);
  border-left: none;
  background: rgba(255,255,255,0.7);
  color: var(--ink-muted);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  padding: 10px 4px;
  font-size: 1rem;
  line-height: 1;
  margin-left: -8px; /* hug the shell's left edge, under the gap */
  transition: background 0.15s, color 0.15s;
}
.case-sidebar-reopen:hover { background: var(--brass-deep); color: #fff; border-color: var(--brass-deep); }
.case-shell.sidebar-collapsed > .case-sidebar-reopen,
html.dw-sidebar-collapsed .case-shell > .case-sidebar-reopen { display: inline-flex; }
/* On mobile the sidebar is the ☰ pop-down; the desktop collapse UI is moot. */
@media (max-width: 900px) and (pointer: coarse), (max-width: 600px) {
  .case-sidebar-collapse, .case-sidebar-reopen { display: none !important; }
  .case-shell.sidebar-collapsed,
  html.dw-sidebar-collapsed .case-shell { grid-template-columns: 1fr; }
  html .case-shell.sidebar-collapsed > .case-sidebar,
  html.dw-sidebar-collapsed .case-shell > .case-sidebar { display: none; }
  html .case-shell.sidebar-collapsed > .case-sidebar.open,
  html.dw-sidebar-collapsed .case-shell > .case-sidebar.open { display: block; }
}

.case-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.case-tabs li { margin: 0; }
.case-tabs a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 0.86rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.case-tabs a:hover {
  background: rgba(164,121,60,0.08);
  text-decoration: none;
}
.case-tabs a.active {
  background: rgba(164,121,60,0.15);
  border-left-color: var(--brass);
  font-weight: 600;
  color: var(--brass-deep);
}
.case-tabs .tab-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
  width: 22px;
  flex-shrink: 0;
}
.case-tabs a.active .tab-num { color: var(--brass-deep); }
.case-tabs .tab-label { flex: 1; }
/* v3.6.186: OS / Medical Care / Client accordion. The toggle sits in the left
   gutter (negative margin) so it does NOT push the label — the label lines up
   exactly with the plain tabs (border-left 3px + padding-left 10px = 13px). */
.case-tab-row { display: flex; align-items: center; }
.case-tab-toggle {
  flex-shrink: 0;
  width: 12px;
  margin-left: -1px;
  margin-right: -11px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0;
  position: relative; /* with z-index, keeps +/- visible above the active highlight bleed */
  z-index: 2;
}
.case-tab-toggle:hover { color: var(--brass-deep); }
.case-tab-rowlink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  flex: 1;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 0.86rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.case-tab-rowlink:hover { background: rgba(164,121,60,0.08); text-decoration: none; }
.case-tab-rowlink.active {
  background: rgba(164,121,60,0.15);
  border-left-color: var(--brass);
  font-weight: 600;
  color: var(--brass-deep);
  /* v3.6.197: bleed the active highlight + brass border-left into the gutter so
     it fully covers the +/- expander (which sits ~13px to the left via the
     toggle's negative margins). Compensate with matching padding so the label
     doesn't shift. */
  margin-left: -13px;
  padding-left: 23px;
}
.case-tab-rowlink.active .tab-label { color: var(--brass-deep); }
/* v3.6.197: when the row's link is active, tint its +/- toggle to match. */
.case-tab-row:has(.case-tab-rowlink.active) .case-tab-toggle { color: var(--brass-deep); }
.case-tab-rowlink .tab-label { flex: 1; }
.case-tab-subwrap { padding: 2px 0 6px 14px; }
.case-tab-subgroup {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  font-weight: 700;
  margin: 6px 0 2px 8px;
}
.case-tab-sublist { list-style: none; padding: 0; margin: 0 0 4px; }
.case-tab-sublist li { margin: 0; }
.case-tab-sublist a {
  display: block;
  padding: 4px 10px 4px 16px;
  font-size: 0.8rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-left: 2px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.case-tab-sublist a:hover { background: rgba(164,121,60,0.08); color: var(--ink); border-left-color: var(--brass); }
.case-tab-subempty { font-size: 0.78rem; color: var(--ink-muted); padding: 2px 10px 2px 16px; font-style: italic; }
/* Highlight target for OS party cards arrived at via a sidebar link. */
.os-card { scroll-margin-top: 80px; transition: background 0.3s, border-color 0.3s; }
.os-card.just-added { background: rgba(164,121,60,0.14); border-color: var(--brass); }
/* v3.6.180: Client tab sections targeted via the sidebar accordion. */
.tab-section { scroll-margin-top: 80px; }
.tab-section.section-flash { animation: sectionFlash 1.8s ease-out; }
@keyframes sectionFlash {
  0% { background: rgba(164,121,60,0.18); }
  100% { background: transparent; }
}

/* V3.2.4: badge displayed next to a tab label — e.g. balance status on
   the Payments tab. ✓ means paid in full; ● red means money owed. */
.case-tabs .tab-badge {
  flex-shrink: 0;
  font-size: 0.74rem;
  margin-left: 4px;
  line-height: 1;
}
.case-tabs .tab-badge-paid    { color: #6e9b6e; }
.case-tabs .tab-badge-owing   { color: var(--signal-reject); }
.case-tabs .tab-badge-late    { color: var(--signal-reject); font-weight: 700; }
.case-tabs .tab-badge-none    { color: var(--ink-muted); }
/* v3.6.276: small "AI" badge next to a sub-item label. Pill shape so
   it reads as a tag rather than a count. Brass tone, matching the
   firm's accent color. Tooltip explains where the AI marker came
   from. */
.case-tabs .ai-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--brass);
  color: #fff;
  border-radius: 6px;
  vertical-align: 1px;
}
/* v3.3.13: informational coverage/limits badges (UM, OS policy) —
   muted brass-tone, not an alert color. Keeps the sidebar useful
   without screaming for attention. */
.case-tabs .tab-badge-info {
  color: var(--brass-deep);
  background: rgba(164, 121, 60, 0.10);
  padding: 1px 6px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
/* v3.6.145: unread Client Communications count — small red pill. */
.case-tabs .tab-badge-count {
  color: #fff;
  background: #b25757;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

/* v3.3.54: case-header warning for PI cases when the Letter
   of Representation hasn't been marked as sent. Yellow/amber
   foreground against the muted-ink line so it reads as a
   call-to-action without screaming. Hover-darkens since it's
   a link to the Client tab. */
.lor-warning {
  color: #a47600;          /* warm amber, matches brass-deep family */
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted rgba(164, 118, 0, 0.5);
  padding-bottom: 1px;
}
.lor-warning:hover,
.lor-warning:focus {
  color: #7a5800;
  border-bottom-color: rgba(122, 88, 0, 0.85);
}
.assignment-list li {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(201,190,164,0.5);
}
.assignment-list li:last-child { border-bottom: none; }
.assignment-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-style: italic;
}
.assignment-role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.case-main {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  padding: 20px 24px;
  min-width: 0;       /* allow the grid column to shrink (prevents page-wide overflow) */
  overflow-wrap: anywhere;
}
/* v3.6.148: keep Client Communications content inside the column. */
.client-comms-tab, .client-comms-tab * { max-width: 100%; box-sizing: border-box; }
.client-comms-tab .cc-body { overflow-wrap: anywhere; word-break: break-word; }
.client-comms-tab textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.case-tab-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* KV editor */
.kv-stack { display: flex; flex-direction: column; gap: 8px; }
.kv-row {
  display: grid;
  grid-template-columns: 220px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.kv-row input[type="text"] {
  margin: 0;
  font-size: 0.86rem;
}
.kv-row input[type="text"]:first-child {
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

.many-item {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: var(--radius);
}
.many-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.many-add {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px dashed var(--brass);
}

.empty-state {
  padding: 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.9rem;
  background: rgba(14,26,43,0.03);
  border-radius: var(--radius);
}

/* ============================================================
   V2.1: Promote-to-Case modal UI
   ============================================================ */
.promote-pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.promote-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.5);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  transition: background 0.12s, border-color 0.12s;
}
.promote-pick:hover {
  background: rgba(164,121,60,0.08);
  border-color: var(--brass);
}
.promote-pick input[type="checkbox"] {
  margin: 0;
  width: auto;
}
.promote-pick-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  flex: 1;
}
.promote-pick-user {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-muted);
}
/* V3.2.10: case-load badge inside each promote-pick row.
   Brass when the person has cases; muted when they have zero.
   Sits at the right edge of the row. */
.promote-pick-load {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brass-deep);
  background: rgba(164,121,60,0.14);
  padding: 1px 8px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.promote-pick-load.is-zero {
  color: var(--ink-muted);
  background: var(--ink-faint, #efece6);
  font-weight: 400;
}
.lead-row {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(164,121,60,0.06);
  border-left: 2px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.lead-row label {
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
}

/* ============================================================
   V2.1: Typed case-tab forms — sections, gates, grids, flags
   ============================================================ */
.tab-section {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.tab-section:last-of-type { border-bottom: none; }
.tab-section h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--brass-deep);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
/* v3.6.183: collapsible Client-tab sections. The <summary> holds the <h3>;
   a caret on the left rotates when open. */
.section-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-collapse > summary::-webkit-details-marker { display: none; }
.section-collapse > summary::before {
  content: "\25B8"; /* ▸ */
  color: var(--ink-muted);
  font-size: 0.8rem;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.section-collapse[open] > summary::before { transform: rotate(90deg); }
.section-collapse > summary h3 { margin: 0; }
/* v3.6.185: key-info summary shown in the heading when the section is collapsed;
   hidden once the section is expanded (the real fields are then visible). */
.section-summary {
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 400;
  margin-left: 4px;
}
.section-collapse[open] > summary .section-summary { display: none; }
.tab-section h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.field-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
@media (max-width: 720px) {
  .field-grid-3 { grid-template-columns: 1fr; }
}

/* Gate checkbox — a prominent "show this section if checked" toggle */
.gate-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(164,121,60,0.06);
  border-left: 3px solid var(--brass);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 6px;
  cursor: pointer;
}
.gate-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.gate-checkbox span { font-size: 0.92rem; color: var(--ink); }

.gated-block {
  margin-top: 10px;
}
.gated-content {
  padding-top: 10px;
  padding-left: 16px;
  border-left: 2px dotted var(--line);
  margin-left: 4px;
}
.gated-content[hidden] { display: none; }

/* Trucking flags / multi-checkbox grid */
.trucking-flags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .trucking-flags { grid-template-columns: 1fr; }
}
.flag-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
  cursor: pointer;
  margin: 0;
}
.flag-checkbox input[type="checkbox"] { width: auto; margin: 0; }

/* Save row at bottom of each tab form */
.save-row {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* OS card container — nested insurance block */
.os-card { border-left: 3px solid var(--ink-soft); }
.nested-block {
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(14,26,43,0.03);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.nested-block summary {
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink);
  font-family: var(--font-body);
}
.nested-block summary:hover { color: var(--brass-deep); }

/* v3.7.368 — red variant of .nested-block for the per-party "Laws broken —
   citations / warnings" accordion, so it reads like OS Information / Insurance
   for this party but flags as a warning. */
.nested-block.nested-danger {
  background: rgba(122,27,46,0.05);
  border-color: rgba(122,27,46,0.45);
}
.nested-block.nested-danger > summary { color: var(--signal-reject); }
.nested-block.nested-danger > summary strong { color: var(--signal-reject); }
.nested-block.nested-danger > summary:hover { color: #5c1422; }

/* ============================================================
   V2.2: Care-type rendered description on Medical Care tab
   ============================================================ */
.care-type-render {
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: rgba(46,93,73,0.06);
  border-left: 3px solid var(--signal-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.care-type-render-head {
  margin-bottom: 6px;
}
.care-type-render-body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}
.care-type-render-body p {
  margin: 0 0 8px;
  /* v3.3.11: preserve author-typed leading tabs/spaces inside paragraphs */
  white-space: pre-wrap;
}
.care-type-render-body p:last-child { margin-bottom: 0; }
.care-type-render-body strong { font-weight: 600; }
.care-type-render-body em { font-style: italic; }
.care-type-render-body u { text-decoration: underline; }
.care-type-render-body ul,
.care-type-render-body ol {
  margin: 4px 0 8px 18px;
}

/* Variable chips on care-type editor */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.data-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }

/* ============================================================
   V2.2: AI extraction dropzone + diff modal
   ============================================================ */
.ai-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: linear-gradient(135deg, var(--brass), var(--brass-deep));
  color: var(--paper);
  border-radius: 3px;
  vertical-align: middle;
}
.extract-dropzone {
  padding: 14px 16px;
  border: 2px dashed var(--brass);
  border-radius: var(--radius);
  background: rgba(164,121,60,0.04);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.extract-dropzone:hover,
.extract-dropzone.is-dragging {
  background: rgba(164,121,60,0.12);
  border-color: var(--brass-deep);
}
.extract-dropzone-busy {
  pointer-events: none;
}
/* V2.6.2: compact icon (icon was 1.6rem inline; this overrides to keep
   the dropzones small enough to sit side-by-side). */
.extract-dropzone .extract-dropzone-idle > div:first-child,
.extract-dropzone .extract-dropzone-busy > div:first-child {
  font-size: 1.1rem !important;
  margin-bottom: 2px !important;
}
.extract-dropzone .extract-dropzone-idle > div:nth-child(2),
.extract-dropzone .extract-dropzone-busy > div:nth-child(2) {
  font-size: 0.84rem;
}
.extract-dropzone .extract-dropzone-idle > div:nth-child(3),
.extract-dropzone .extract-dropzone-busy > div:nth-child(3) {
  font-size: 0.72rem !important;
  margin-top: 2px !important;
}
.extract-dropzone .loading-spinner {
  font-size: 1.1rem !important;
}
.loading-spinner {
  font-size: 1.6rem;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Diff modal rows */
.diff-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: rgba(255,255,255,0.4);
}
.diff-row.conflict {
  background: rgba(186,107,49,0.08);
  border-color: var(--signal-review);
}
.diff-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--brass-deep);
  margin-bottom: 6px;
}
.diff-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.diff-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.diff-option:hover {
  background: rgba(0,0,0,0.04);
}
.diff-option input[type="radio"],
.diff-option input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.diff-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: var(--ink-soft);
  color: var(--paper);
  border-radius: 3px;
  min-width: 90px;
  text-align: center;
}
.diff-tag.tag-extracted {
  background: var(--brass);
}
.diff-value {
  font-size: 0.86rem;
  color: var(--ink);
  flex: 1;
}
.diff-value em {
  color: var(--ink-muted);
}

/* ============================================================
   V2.5: Medical treatments per provider + just-added highlight
   ============================================================ */
.provider-card {
  scroll-margin-top: 80px;
  transition: background 0.3s, border-color 0.3s;
}
/* v3.6.161: provider cards are <details>. Clean up the summary so the
   collapsed row reads as one tidy line, and add a rotating disclosure
   caret. When collapsed, drop the head's dashed underline/margin. */
.provider-card > summary.many-item-head {
  list-style: none;
  cursor: pointer;
  display: block;
}
.provider-card > summary.many-item-head::-webkit-details-marker { display: none; }
.provider-card > summary.many-item-head::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--ink-muted);
  transition: transform 0.15s;
}
.provider-card[open] > summary.many-item-head::before {
  transform: rotate(90deg);
}
.provider-card:not([open]) > summary.many-item-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
/* v3.6.162: make the total-billed figure the prominent number on the
   provider rollup row — brass accent, bold, a touch larger, pushed to the
   right edge of the summary line. */
.provider-billed {
  float: right;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
/* v3.6.169: MRR status badge on the provider rollup. Green check = all medical
   record requests complete; blue hourglass = at least one still pending. No
   badge appears before any MRR exists. */
.mrr-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; padding: 1px 7px;
  border-radius: 10px; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.03em; vertical-align: middle;
}
.mrr-badge-done {
  background: rgba(34,139,76,0.14); color: #1f7a45; border: 1px solid rgba(34,139,76,0.35);
}
.mrr-badge-pending {
  background: rgba(40,103,178,0.14); color: #2867b2; border: 1px solid rgba(40,103,178,0.35);
}
.mrr-badge-missing {
  background: rgba(178,40,40,0.12); color: #b22828; border: 1px solid rgba(178,40,40,0.32);
}
.mrr-badge-icon { font-size: 0.82rem; line-height: 1; }
.provider-card.just-added {
  background: rgba(164,121,60,0.14);
  border-color: var(--brass);
  animation: just-added-pulse 0.6s ease-out 0s 2;
}
@keyframes just-added-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(164,121,60,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(164,121,60,0.05); }
}

.treatments-block {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(14,26,43,0.03);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.treatments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.treatments-header h4 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--brass-deep);
}
.treatment-add {
  margin: 10px 0;
  padding: 12px;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
}
.treatment-row {
  margin: 6px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.5);
}
.treatment-row summary {
  cursor: pointer;
  padding: 8px 12px;
  list-style: none;
  /* v3.3.32: flex container so an optional .treatment-amount on the
     right floats to the far edge of the bar (used by the Settlement
     tab's Future Medical Treatment + Mileage rows). The Medical Care
     tab's treatments don't include a .treatment-amount child, so
     they render unchanged (single span, no right-side element). */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.treatment-row summary::marker { display: none; }
.treatment-row summary::-webkit-details-marker { display: none; }
.treatment-row summary:hover { background: rgba(164,121,60,0.06); }
.treatment-row .treatment-summary {
  font-size: 0.88rem;
  /* Let the summary text shrink with ellipsis if needed so the
     right-side amount stays parked on the right. */
  min-width: 0;
  flex: 1 1 auto;
}
.treatment-row .treatment-amount {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--brass-deep);
  flex: 0 0 auto;
  white-space: nowrap;
}
.treatment-row .treatment-body {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

/* v3.3.31 + v3.3.32: rows that were auto-added/auto-populated by
   the system get a brass left-border + tinted background so they're
   recognizable even when rolled up. Used by the Settlement tab's
   Future Medical Treatment panel (auto-added from a care type's
   Future Medical Concerns link) and the Mileage panel (auto-added
   from "Add medical travel"). Kept under the legacy
   future-medical-auto alias for back-compat with any existing
   templates pointing at it. */
.treatment-row.future-medical-auto,
.treatment-row.row-auto-sourced {
  border-left: 3px solid var(--brass-deep);
  background: rgba(164, 121, 60, 0.04);
}

/* ============================================================
   V2.6: Intake-side upload widgets (accident PDF + photos)
   ============================================================ */
.intake-uploads {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: rgba(164,121,60,0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* v3.6.373 — uniform, square-ish intake upload tiles. Was a loose
   auto-fit minmax(220px, 1fr) that let some tiles balloon while
   others collapsed. Now every tile is the same width (max 220px,
   min 180px) and every dropzone inside has a fixed compact height
   so the four tiles (Accident PDF + Photos + DL + HI Cards) line
   up in a neat row. Children of the grid get explicit nested rules
   so the dropzones + photo-set wrappers all match. */
.intake-uploads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
  gap: 12px;
  /* v3.6.376 — was align-items: start (v3.6.373). That kept each
     tile only as tall as its own content, so the height differences
     between tiles meant their dropzones started at different Y
     positions. Now `stretch` (which is the grid default — explicit
     for clarity) pulls every tile to the same height as the tallest,
     and the flex-column + margin-top:auto rules below push the
     dropzones to a uniform baseline within each tile. */
  align-items: stretch;
}
.intake-uploads-grid > *:not(script) {
  /* Cap each grid cell so they don't stretch beyond uniform width. */
  width: 100%;
  max-width: 220px;
  /* v3.6.376 — every grid child becomes a flex column so the
     dropzone inside can use margin-top:auto to bottom-anchor itself.
     Reason: the four tiles have unequal description text lengths
     (Accident ~88 chars wraps to 3-4 lines; DL/HI ~45 chars wrap
     to 2). Without flex anchoring, DL/HI dropzones started ~24px
     higher than Accident/Photos. Grid's default align-items:stretch
     pulls every tile to the same total height as the tallest,
     leaving room above the dropzone in shorter-description tiles —
     margin-top:auto absorbs that gap. Together: every dropzone
     lands on the same baseline regardless of description length.
     v3.6.378 — :not(script) so an orphaned <script> sibling never
     gets display:flex forced on it (which made the script's source
     code render as visible text — bug reported in v3.6.376). The
     real fix is wrapping the script inside the partial's root
     element (done in v3.6.378's photo_set.ejs), but this guards
     against any future partial making the same mistake. */
  display: flex;
  flex-direction: column;
}
/* v3.6.376 — bottom-anchor every dropzone in the intake grid so
   they all align horizontally regardless of how many lines the
   description above wrapped to. The dropzone keeps its 110px
   min-height (set just below) so it never collapses; this just
   pushes it away from its header so the visible drop-target lines
   up across tiles. */
/* v3.6.376 — bottom-anchor every dropzone in the intake grid so
   they all align horizontally regardless of how many lines the
   description above wrapped to. Combined with the flex-column on
   each grid child (above) this absorbs the gap above the dropzone
   so its top edge lines up across all four tiles.
   Compact sizing — applies to both the built-in accident-report
   dropzone and any photo-set partial embedded in the grid (DL, HI
   Card, future). */
.intake-uploads-grid .extract-dropzone {
  margin-top: auto;
  min-height: 110px;
  padding: 10px 8px;
  font-size: 0.78rem;
  text-align: center;
}
.intake-uploads-grid .extract-dropzone-idle {
  font-size: 0.78rem;
  line-height: 1.3;
}
.intake-uploads-grid h3,
.intake-uploads-grid h4 {
  font-size: 0.92rem;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--brass-deep);
}
/* v3.6.374 — the photo_set partial has an inline style="margin-top:14px"
   on its outer .photo-set wrapper (kept there because case-side pages
   stack photo-sets vertically and need that breathing room). Inside
   the intake grid the gap is handled by `gap: 12px` on the grid, so
   the extra 14px pushed DL/HI tiles DOWN below Accident/Photos. Zero
   it out here. The !important is needed to beat the inline style. */
.intake-uploads-grid .photo-set {
  margin-top: 0 !important;
}
/* v3.6.374 — When a photo_set is rendered with psDescription, its
   <p> hint mirrors the Accident/Photos paragraphs so all four headers
   take the same vertical space. Match the styling explicitly here so
   the description doesn't inherit some looser body-paragraph rule
   from elsewhere. */
.intake-uploads-grid .photo-set > p,
.intake-uploads-grid > div > p {
  color: var(--ink-muted);
  font-size: 0.82rem !important;
  margin: 0 0 8px !important;
}
.intake-uploads h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--brass-deep);
  font-size: 0.9rem;
  margin: 0 0 2px;
}
.intake-uploads p {
  margin: 0 0 6px !important;
  font-size: 0.78rem !important;
}
.image-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.image-thumb {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.1s;
}
.image-thumb:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   v3.5.20: Standard photo display scheme (PhotoViewer).
   Thumbnail with red-X delete badge + click-to-open lightbox.
   ============================================================ */
.pv-thumb {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  /* v3.6.192: the corner icons overhang the tile by 7px on each side, so give
     every thumbnail a margin to reserve space — otherwise adjacent thumbnails'
     icons stack on top of each other. 10px keeps ~20px between neighbors. */
  margin: 10px;
}
.pv-thumb-img {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.pv-thumb-img:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.pv-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* v3.7.303 — thumbnail whose file is momentarily unreachable (e.g. the SMB/NAS
   share is offline). Hide the broken image and show a spinning "reconnecting"
   placeholder; the script keeps retrying so it reappears when the share is back. */
.pv-thumb-reconnecting .pv-thumb-img img { visibility: hidden; }
.pv-thumb-reconnecting .pv-thumb-img {
  background: repeating-linear-gradient(45deg, var(--paper) 0, var(--paper) 7px, rgba(164,121,60,0.10) 7px, rgba(164,121,60,0.10) 14px);
}
.pv-thumb-reconnecting::after {
  content: "\21bb";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--brass-deep);
  animation: pvReconnectSpin 1.4s linear infinite;
  pointer-events: none;
}
@keyframes pvReconnectSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pv-thumb-reconnecting::after { animation: none; } }
.pv-thumb-x {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--paper, #fff);
  background: #c0392b;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 2;
}
.pv-thumb-x:hover { background: #e74c3c; }
/* v3.6.43: round download button (blue down-arrow), bottom-right corner. */
.pv-thumb-dl {
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--paper, #fff);
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 2;
}
.pv-thumb-dl:hover { background: #3b82f6; }

/* v3.6.191: bottom-left tri-state "D" badge — include in discovery responses.
   Green = include, red = do NOT include, grey = undecided. Same shape/size as
   the other corner icons. */
.pv-thumb-d {
  position: absolute;
  bottom: -7px;
  left: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--paper, #fff);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 2;
}
.pv-d-include { background: #1f9d55; }
.pv-d-exclude { background: #c0392b; }
.pv-d-undecided { background: #8a8a8a; }
.pv-thumb-d:hover { filter: brightness(1.12); }

/* Include-in-documents badge (top-left). Line-in-circle when off,
   green check-in-circle when on. */
.pv-thumb-inc {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--paper, #fff);
  background: #8a8a8a;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 2;
}
.pv-thumb-inc:hover { filter: brightness(1.1); }
.pv-thumb-inc.pv-include-on { background: #2e8b57; }

/* Lightbox "Include in Documents" label */
.pv-include {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.pv-include input { cursor: pointer; }

/* Lightbox overlay */
.pv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pv-box {
  position: relative;
  background: var(--paper, #fff);
  border-radius: 10px;
  max-width: min(92vw, 980px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,0.4);
  overflow: hidden;
}
.pv-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
.pv-close:hover { background: rgba(0,0,0,0.75); }
.pv-imgwrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  overflow: auto;
  position: relative; /* v3.7.914 — anchors nav arrows + full-size button */
}
.pv-img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  display: block;
}
.pv-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.pv-caption {
  flex: 1;
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}
.pv-actions { display: flex; gap: 8px; }
.pv-btn {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-deep, #f3f0e9);
  color: var(--ink, #222);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  white-space: nowrap;
}
.pv-btn:hover { background: var(--line); }
.pv-delete { color: #c0392b; border-color: #c0392b; }
.pv-delete:hover { background: #c0392b; color: #fff; }
.pv-msg {
  padding: 8px 14px;
  font-size: 0.85rem;
}
.pv-msg-success { color: #2e5d49; }
.pv-msg-error { color: #b94c4c; }
.notice-success {
  border-left: 3px solid var(--signal-accept, #2e5d49);
  background: rgba(46,93,73,0.08);
}
.notice-error {
  border-left: 3px solid var(--signal-reject, #b94c4c);
  background: rgba(185,76,76,0.08);
}

/* ============================================================
   V2.6.4: Intake "files attached" list (read-only).
   Replaces the upload dropzones that used to live here.
   ============================================================ */
.intake-files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intake-files-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.86rem;
}
.intake-file-thumb {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}
.intake-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intake-file-icon {
  display: inline-block;
  font-size: 1.2rem;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.intake-file-meta {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.intake-file-name {
  color: var(--brass-deep);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.intake-file-name:hover {
  text-decoration: underline;
}
.intake-file-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: rgba(46,93,73,0.08);
  padding: 1px 6px;
  border-radius: 3px;
}
.intake-file-when {
  font-size: 0.74rem;
  color: var(--ink-muted);
}
.intake-file-dl {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--brass-deep);
  text-decoration: none;
  font-weight: 700;
}
.intake-file-dl:hover {
  background: rgba(164,121,60,0.12);
}

/* ============================================================
   V3.0: Generate Document dropdown on case tabs
   ============================================================ */
.generate-doc-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  min-width: 240px;
  max-width: 360px;
  z-index: 1000;
  padding: 4px;
}
.generate-doc-menu.open {
  display: block;
}
.generate-doc-group-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 6px 10px 2px;
  font-family: var(--font-display);
  font-style: italic;
}
.generate-doc-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.generate-doc-item:hover {
  background: rgba(164,121,60,0.10);
  color: var(--brass-deep);
}

/* ============ V3.2.9 — server stats panel ============ */
/* The eyebrow row that sits between the business-stats grid and the
   server-health grid. Visually labels "this next row is system stats." */
.server-stats-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4px 0 6px;
}
.server-stats-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.server-stats-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
}
/* Small subtitle line under a .stat value (e.g. "DB 24 KB · uploads
   1.2 MB"). Sits inside the dark stat tile, lighter than the .label. */
.stat .stat-sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(246,241,231,0.55);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ V3.2.10 — staff workload accordion ============ */
/* Compact native <details> accordion on the intake dashboard. Two
   columns inside (paralegals / attorneys) with active case counts. */
.staff-workload {
  background: var(--panel-bg, white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 0.86rem;
}
.staff-workload summary {
  cursor: pointer;
  padding: 8px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}
.staff-workload summary::-webkit-details-marker { display: none; }
.staff-workload summary::marker { display: none; content: ''; }
.staff-workload-label {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass-deep);
  font-weight: 500;
  font-size: 0.95rem;
}
.staff-workload-hint {
  color: var(--ink-muted);
  font-size: 0.78rem;
}
.staff-workload-chevron {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 0.84rem;
  transition: transform 0.15s;
}
.staff-workload[open] .staff-workload-chevron { transform: rotate(180deg); }
.staff-workload-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .staff-workload-body { grid-template-columns: 1fr; }
  .staff-workload-col + .staff-workload-col { border-top: 1px solid var(--line); border-left: none !important; }
}
.staff-workload-col {
  padding: 10px 14px;
}
.staff-workload-col + .staff-workload-col { border-left: 1px solid var(--line); }
.staff-workload-col h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass-deep);
  font-size: 0.84rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.staff-workload-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.staff-workload-col li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line);
}
.staff-workload-col li:last-child { border-bottom: none; }
.staff-name { color: var(--ink); }
.staff-count {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--brass-deep);
  background: rgba(164,121,60,0.10);
  padding: 1px 8px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.staff-count.is-zero { color: var(--ink-muted); background: var(--ink-faint, #efece6); font-weight: 400; }
.staff-workload-empty {
  margin: 0;
  color: var(--ink-muted);
  font-style: italic;
  font-size: 0.82rem;
}

/* v3.5.30: Global Ctrl+E case-search command palette. */
.cs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 26, 43, 0.45);
  display: none;
  z-index: 9999;
  padding-top: 12vh;
}
.cs-overlay.cs-open { display: block; }
.cs-frame {
  width: min(620px, calc(100vw - 32px));
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(14, 26, 43, 0.35);
  overflow: hidden;
}
.cs-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.cs-icon { font-size: 1rem; opacity: 0.7; }
.cs-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.05rem;
  color: var(--ink);
  outline: none;
  font-family: inherit;
}
.cs-esc {
  font-size: 0.7rem;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  background: var(--paper);
}
.cs-status {
  padding: 6px 14px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  min-height: 0;
}
.cs-status:empty { display: none; }
.cs-list { max-height: 52vh; overflow-y: auto; }
.cs-group {
  padding: 8px 14px 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brass-deep);
  font-weight: 600;
  background: var(--paper);
  position: sticky;
  top: 0;
}
.cs-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid rgba(201, 190, 164, 0.4);
  cursor: pointer;
}
.cs-item:first-of-type { border-top: none; }
.cs-item.cs-active { background: rgba(164, 121, 60, 0.14); }
.cs-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-name { font-size: 0.95rem; font-weight: 500; }
.cs-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-meta:empty { display: none; }
.cs-status-box {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brass-deep);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* v3.6: Ctrl+1 quick case-task popup. */
.ct-overlay {
  position: fixed; inset: 0;
  background: rgba(14, 26, 43, 0.45);
  display: none; z-index: 9999; padding-top: 9vh;
}
.ct-overlay.ct-open { display: block; }
.ct-frame {
  width: min(620px, calc(100vw - 32px));
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(14, 26, 43, 0.35);
  overflow: hidden;
  max-height: 82vh; display: flex; flex-direction: column;
}
.ct-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.ct-title { font-weight: 600; color: var(--ink); }
.ct-bucket { color: var(--brass-deep); }
.ct-esc {
  font-size: 0.7rem; color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 5px; background: var(--paper);
}
.ct-body { padding: 12px 14px; }
.ct-label {
  display: block; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-muted);
  margin: 8px 0 3px; font-weight: 600;
}
.ct-body .ct-label:first-child { margin-top: 0; }
.ct-subject, .ct-notes, .ct-due, .ct-start {
  width: 100%; padding: 7px 9px; font-family: inherit; font-size: 0.92rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); box-sizing: border-box;
}
.ct-start { background: var(--paper-2); color: var(--ink-muted); }
.ct-row { display: flex; gap: 12px; }
.ct-col { flex: 1; }
.ct-assignees { font-size: 0.88rem; color: var(--ink); }
.ct-muted { color: var(--ink-muted); font-style: italic; font-size: 0.85rem; }
.ct-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ct-status { font-size: 0.82rem; }
.ct-status.notice-error { color: #a3261f; }
.ct-status.notice-success { color: #2e6b34; }
.ct-status.notice-info { color: var(--ink-muted); }
.ct-existing-wrap { border-top: 1px solid var(--line); background: var(--paper-2); overflow-y: auto; }
.ct-existing-head {
  padding: 8px 14px 4px; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--brass-deep); font-weight: 600;
}
.ct-existing { padding: 0 8px 8px; }
.ct-existing-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px; text-decoration: none; color: var(--ink);
  border-radius: var(--radius); font-size: 0.88rem;
}
.ct-existing-item:hover { background: rgba(164, 121, 60, 0.12); }
.ct-ex-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-ex-status {
  flex: none; font-size: 0.7rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px;
  background: var(--paper); color: var(--ink-muted); white-space: nowrap;
}
.ct-ex-status.ct-st-done { color: #2e6b34; }
.ct-ex-status.ct-st-in_progress { color: var(--brass-deep); }
.ct-empty { padding: 8px; }

/* v3.6.4: file (non-image) thumbnail — accident-report PDF tile.
   Wider than the square photo thumb so the filename is readable. */
.pv-thumb-file { width: 150px; height: 64px; }
.pv-thumb-file .pv-thumb-img {
  width: 150px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  text-align: center;
}
.pv-file-icon { font-size: 1.3rem; line-height: 1; }
.pv-file-name {
  font-size: 0.66rem;
  color: var(--ink-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

/* v3.6.10: discovery file thumb that shows an actual image preview. */
.pv-thumb-file .pv-file-image { padding: 0; }
.pv-thumb-file .pv-file-image img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px;
}
/* Discovery file grid spacing */
.discovery-files-grid { display: flex; flex-wrap: wrap; gap: 0; margin-top: 8px; }
/* v3.6.192: other thumbnail containers laid out the same way. Spacing comes
   from each .pv-thumb's own margin (so the overhanging corner icons never
   overlap), hence gap:0 here. */
.medical-files-grid { display: flex; flex-wrap: wrap; gap: 0; }
#roadproofFiles { display: flex; flex-wrap: wrap; gap: 0; }

/* v3.6.124: "Transcribed" label at the bottom of a transcribed file thumb. */
.pv-thumb-transcribed {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(16,110,72,0.92);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  pointer-events: none;
}

/* v3.6.11: discovery file viewer + page-note popup. */
.dv-overlay {
  position: fixed; inset: 0; background: rgba(14,26,43,0.62);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
}
.dv-frame {
  width: min(1100px, 94vw); height: 92vh;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 18px 56px rgba(14,26,43,0.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.dv-head {
  display: flex; align-items: center; gap: 12px;
  /* v3.6.269: allow buttons to wrap when the toolbar is wider than the
     viewer frame. Without flex-wrap the rightmost buttons (including
     the new +/- zoom controls inserted in the middle) got clipped
     off-screen behind overflow:hidden, making them effectively
     invisible. row-gap creates vertical space between wrapped rows. */
  flex-wrap: wrap; row-gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.dv-title { font-weight: 600; color: var(--ink); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-loc { color: var(--brass-deep); font-size: 0.84rem; font-weight: 600; }
.dv-spacer { flex: 1; }
.dv-note-btn {
  border: 1px solid var(--brass); background: var(--brass); color: #fff;
  border-radius: var(--radius); padding: 5px 10px; cursor: pointer; font-size: 0.82rem;
}
.dv-note-btn:hover { background: var(--brass-deep); }
/* v3.6.43: download + print buttons in the viewer header. */
.dv-dl-btn, .dv-print-btn {
  border: 1px solid var(--line); background: var(--paper, #fff); color: var(--ink);
  border-radius: var(--radius); padding: 5px 10px; cursor: pointer; font-size: 0.82rem; margin-right: 6px;
}
.dv-dl-btn:hover, .dv-print-btn:hover { border-color: var(--brass); color: var(--brass-deep); }
.dv-transcribe-btn {
  border: 1px solid var(--line); background: var(--paper, #fff); color: var(--ink);
  border-radius: var(--radius); padding: 5px 10px; cursor: pointer; font-size: 0.82rem; margin-right: 6px;
}
.dv-transcribe-btn:hover:not(:disabled) { border-color: var(--brass); color: var(--brass-deep); }
.dv-transcribe-btn:disabled { opacity: 0.6; cursor: default; }
/* v3.6.267 — Zoom controls. Three tight buttons that read as a group.
   v3.6.269: wrapped in .dv-zoom-group so the flex toolbar treats them
   as one unit; no margin between them so the joined-pill look holds. */
.dv-zoom-group { display: inline-flex; align-items: center; }
.dv-zoom-in, .dv-zoom-out, .dv-zoom-reset {
  border: 1px solid var(--line); background: var(--paper, #fff); color: var(--ink);
  padding: 5px 10px; cursor: pointer; font-size: 0.82rem;
}
.dv-zoom-in:hover, .dv-zoom-out:hover, .dv-zoom-reset:hover {
  border-color: var(--brass); color: var(--brass-deep);
}
.dv-zoom-out { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.dv-zoom-reset {
  border-left: 0; border-right: 0;
  min-width: 56px; text-align: center; font-variant-numeric: tabular-nums;
}
.dv-zoom-in { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
/* v3.7.1225 — the X is pinned to the TOP-RIGHT corner of the viewer. As a
   flex child it drifted to wherever the last wrapped toolbar row ended;
   absolute positioning keeps it in the corner no matter how many rows the
   toolbar wraps into (dv-head is already position:relative-able; the
   padding-right reserves the corner so buttons never sit under it). */
.dv-head { position: relative; padding-right: 44px; }
.dv-close {
  border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-muted);
  position: absolute; top: 8px; right: 12px;
}
.dv-close:hover { color: var(--ink); }
.dv-body { flex: 1; overflow: hidden; background: #3a3a3a; position: relative; }
.dv-loading { color: #eee; padding: 24px; text-align: center; }
.dv-loading a { color: var(--brass); }
/* v3.6.270 — overflow: auto on BOTH axes so zooming past the container
   width produces a horizontal scrollbar instead of clipping. */
.dv-pdf-pages { height: 100%; overflow: auto; padding: 16px; text-align: center; }
/* v3.7.1224 — in full screen, shrink the side gutters so fit-to-width is
   edge-to-edge; computeFitZoom reads the live padding so it adapts. */
:fullscreen .dv-pdf-pages { padding-left: 4px; padding-right: 4px; }
:fullscreen .dv-image-wrap { padding-left: 4px; padding-right: 4px; }
.dv-pdf-page { margin: 0 auto 14px; background: #fff; display: inline-block; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
/* v3.6.270 — DROPPED max-width: 100%. It was silently clamping the
   canvas's display size to the container regardless of how big we made
   the bitmap, so zoom had no visible effect. JS sets explicit
   style.width/height on each render now. */
.dv-pdf-page canvas { display: block; }
/* v3.6.270 — block layout with auto overflow so a zoomed image (now
   sized via explicit width/height, not transform) produces scrollbars
   when it exceeds the wrapper. Flex-center on the wrapper would keep
   the image centered and prevent proper scrolling at high zoom.
   Smaller images stay near the top-left, which is consistent with the
   PDF behavior. */
.dv-image-wrap { height: 100%; overflow: auto; padding: 16px; }
.dv-image { display: block; margin: 0 auto; cursor: zoom-in; }
.dv-media-wrap { height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dv-media { max-width: 100%; max-height: 100%; }
/* v3.6.14: the note popup is a floating, draggable panel docked to the
   right — no full-screen backdrop — so the document stays visible. v3.6.166:
   the document pane permanently reserves the right gutter (see the
   padding-right rule below), so opening the panel never shifts or scrolls the
   document. */
.dv-note-pop {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  /* no backdrop; the card positions itself */
}
.dv-note-card {
  width: min(380px, 42vw); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 14px 40px rgba(14,26,43,0.45); padding: 14px;
  position: relative;
}
.dv-note-head { font-weight: 600; color: var(--ink); margin-bottom: 8px; cursor: move; user-select: none; }
.dv-note-loc { color: var(--brass-deep); }
.dv-note-head kbd { float: right; font-size: 0.7rem; border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; color: var(--ink-muted); }
.dv-note-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin: 8px 0 3px; font-weight: 600; }
.dv-note-date, .dv-note-type, .dv-note-person, .dv-note-text { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); font-family: inherit; font-size: 0.9rem; }
.dv-note-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
/* v3.6.43 (tagging): multiple note-type rows + add button */
.dv-note-types { display: flex; flex-direction: column; gap: 4px; }
.dv-note-type-row input { width: 100%; }
.dv-note-type-add { margin-top: 4px; background: none; border: 1px dashed var(--line); color: var(--ink-muted);
  border-radius: 5px; padding: 3px 8px; font-size: 0.78rem; cursor: pointer; }
.dv-note-type-add:hover { color: var(--ink); border-color: var(--brass); }
.dv-note-status { font-size: 0.82rem; color: var(--ink-muted); }
.dv-note-drag-hint { font-size: 0.68rem; color: var(--ink-muted); font-weight: 400; }
/* v3.6.166: the document panes ALWAYS reserve room on the right for the note
   panel, so opening/closing the Ctrl+2 note never reflows the document (which
   was scrolling the PDF away from the user's spot). The reading window simply
   starts shifted left; the note panel docks into the reserved gutter. */
.dv-pdf-pages,
.dv-image-wrap,
.dv-media-wrap { padding-right: min(400px, 45vw); }

/* Rolled-up discovery notes (like Dates of Treatment). */
.discovery-notes { margin-top: 10px; }
.discovery-note-row { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 6px; background: var(--paper); }
.discovery-note-row summary { cursor: pointer; padding: 7px 10px; font-size: 0.88rem; list-style: none; }
.discovery-note-row summary::-webkit-details-marker { display: none; }
.discovery-note-loc-link { color: var(--brass-deep); font-size: 0.8rem; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }
.discovery-note-body { padding: 4px 10px 10px; border-top: 1px solid var(--line); }

/* v3.6.15: collapsible discovery source cards + add-source popup + search. */
.discovery-source-card { padding: 0; margin-bottom: 8px; }
.discovery-source-summary {
  cursor: pointer; padding: 10px 12px; list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.discovery-source-summary::-webkit-details-marker { display: none; }
.discovery-source-summary::before {
  content: "▸"; color: var(--ink-muted); margin-right: 8px; transition: transform 0.15s;
}
details[open] > .discovery-source-summary::before { transform: rotate(90deg); }
.discovery-source-summary:hover { background: rgba(164,121,60,0.06); }
.discovery-source-body { padding: 4px 14px 14px; }

.discovery-add-overlay {
  position: fixed; inset: 0; background: rgba(14,26,43,0.45);
  display: none; z-index: 9000; padding-top: 8vh;
}
.discovery-add-overlay.open { display: block; }
.discovery-add-card {
  width: min(640px, calc(100vw - 32px)); margin: 0 auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(14,26,43,0.4); padding: 16px;
}
.discovery-add-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.discovery-add-close { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-muted); }

.discovery-search-result {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; margin-bottom: 6px; background: var(--paper); font-size: 0.86rem;
  display: flex; align-items: flex-start; gap: 12px;
}
.discovery-search-result.dsr-clickable { cursor: pointer; }
.discovery-search-result.dsr-clickable:hover { background: rgba(164,121,60,0.08); border-color: var(--brass); }
.discovery-search-result .dsr-left { flex: 1; min-width: 0; }
.discovery-search-result .dsr-note { color: var(--ink); }
.discovery-search-result .dsr-src { color: var(--brass-deep); font-weight: 600; }
.discovery-search-result .dsr-file {
  flex: none; text-align: right; color: var(--ink-muted); font-size: 0.8rem;
  max-width: 38%; word-break: break-word;
}
.discovery-search-result .dsr-page { display: block; color: var(--brass-deep); font-weight: 600; }

/* v3.6.16: search line with Display-all button + menu. */
.discovery-search-line { display: flex; gap: 8px; align-items: center; }
.discovery-search-line #discoverySearch { flex: 1; }
.discovery-display-wrap { position: relative; flex: none; }
.discovery-display-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(14,26,43,0.25); min-width: 160px; padding: 4px;
}
.discovery-display-menu.open { display: block; }
.discovery-display-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 7px 10px; cursor: pointer; font-size: 0.88rem; color: var(--ink); border-radius: 4px;
}
.discovery-display-menu button:hover { background: rgba(164,121,60,0.1); }

/* v3.6.26: bulk-apply rows — filename, type, subtype, note on one line. */
.dba-row {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1.2fr 1.6fr;
  gap: 8px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.dba-row .dba-name { font-size: 0.84rem; word-break: break-word; }
.dba-row select, .dba-row input { width: 100%; }
.dba-head {
  display: grid; grid-template-columns: 1.4fr 1.2fr 1.2fr 1.6fr; gap: 8px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); font-weight: 600; padding-bottom: 4px;
}
@media (max-width: 640px) {
  .dba-row, .dba-head { grid-template-columns: 1fr; }
  .dba-head { display: none; }
}

/* v3.6.35: note-type group headers in Display all results. */
.dsr-group-header {
  font-weight: 700; font-size: 0.92rem; color: var(--ink);
  margin: 14px 0 6px; padding: 4px 8px;
  background: rgba(164,121,60,0.12); border-left: 3px solid var(--brass);
  border-radius: 4px;
}
.dsr-group-header:first-of-type { margin-top: 4px; }

/* v3.6.187: PDF/image highlighter overlay. The overlay sits on top of each
   page; pointer-events default off so normal scroll/click works, turned on
   only while the highlighter is active. NEVER alters the original file. */
.dv-hl-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.dv-hl-rect { mix-blend-mode: multiply; }
/* v3.7.1130 — active-state applies to every toolbar tool (pen, eraser,
   page mode, arrows), not just the highlighter. */
.dv-head button.dv-hl-active,
.dv-hl-btn.dv-hl-active {
  background: var(--brass);
  color: #fff;
  border-color: var(--brass);
}

/* v3.6.194: PDF redaction. The overlay sits over each page (above the highlight
   overlay); pointer-events off until redaction mode is active. Boxes are solid
   black PENDING redactions until "Finalize" burns them in server-side. */
.dv-rd-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.dv-rd-box { border-radius: 1px; }
.dv-redact-btn.dv-redact-on {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* "Making a redactable copy" notice */
.dv-redact-notice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}
.dv-redact-notice {
  background: var(--paper, #fff);
  border-radius: var(--radius, 8px);
  padding: 22px 24px;
  max-width: 440px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.dv-redact-notice-title {
  font-family: var(--font-display, serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.dv-redact-notice-body {
  font-size: 0.9rem;
  color: var(--ink-muted, #555);
  line-height: 1.5;
  margin-bottom: 16px;
}
.dv-redact-notice-actions { text-align: right; }

/* Black "REDACTED" banner across the top of a redacted-copy thumbnail */
.pv-thumb-redacted-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #000;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 2px 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  z-index: 3;
  pointer-events: none;
}

/* v3.6.198: OCR paste/drop zone in the Ctrl+2 note popup. */
.dv-note-imgrow { display: flex; gap: 8px; margin: 6px 0 2px; }
.dv-note-imgbox { flex: 1 1 0; min-width: 0; margin: 0; }
.dv-note-ocr {
  margin: 6px 0 2px;
  padding: 10px 12px;
  border: 1.5px dashed var(--line, #cbb89a);
  border-radius: var(--radius, 6px);
  background: rgba(164,121,60,0.05);
  color: var(--ink-muted, #6b6151);
  font-size: 0.8rem;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: background 0.12s, border-color 0.12s;
}
.dv-note-ocr:focus,
.dv-note-ocr.dv-note-ocr-hover { border-color: var(--brass, #a4793c); background: rgba(164,121,60,0.12); }
.dv-note-ocr.dv-note-ocr-working { border-style: solid; opacity: 0.8; }
.dv-note-ocr-busy, .dv-note-ai-busy { font-style: italic; }
/* v3.6.199: the "Ask AI" box shares the OCR box styling. */
.dv-note-ai {
  margin: 6px 0 2px;
  padding: 10px 12px;
  border: 1.5px dashed var(--line, #cbb89a);
  border-radius: var(--radius, 6px);
  background: rgba(164,121,60,0.05);
  color: var(--ink-muted, #6b6151);
  font-size: 0.8rem;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: background 0.12s, border-color 0.12s;
}
.dv-note-ai:focus,
.dv-note-ai.dv-note-ocr-hover { border-color: var(--brass, #a4793c); background: rgba(164,121,60,0.12); }
.dv-note-ai.dv-note-ocr-working { border-style: solid; opacity: 0.8; }

/* v3.6.199: AI explanation popup */
.dv-ai-explain {
  background: var(--paper, #fff);
  border-radius: var(--radius, 8px);
  padding: 20px 22px;
  max-width: 560px;
  width: calc(100% - 48px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.dv-ai-explain-title {
  font-family: var(--font-display, serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.dv-ai-explain-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted, #6b6151);
  font-weight: 600;
  margin: 10px 0 4px;
}
.dv-ai-explain-ocr {
  white-space: pre-wrap;
  font-size: 0.84rem;
  background: var(--paper-deep, #f3ece0);
  border: 1px solid var(--line, #e0d6c4);
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 160px;
  overflow-y: auto;
}
.dv-ai-explain-body {
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink, #2b2b2b);
}
.dv-ai-explain-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* v3.6.201: Quick Actions window (Ctrl+D). */
.qa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 100000;
  /* v3.6.214: fade the dim backdrop in (no blur — user prefers a sharp
     view of the page behind the window). */
  animation: qa-backdrop-in 0.28s ease forwards;
}
@keyframes qa-backdrop-in {
  from { background: rgba(0,0,0,0); }
  to   { background: rgba(0,0,0,0.45); }
}
.qa-window {
  background: var(--paper, #fff);
  border-radius: var(--radius, 8px);
  width: 520px;
  max-width: calc(100% - 40px);
  max-height: 76vh;
  overflow-y: auto;
  box-shadow: 0 14px 48px rgba(0,0,0,0.38);
  /* v3.6.202: spring up + scale in with a brass glow, slight overshoot. */
  transform-origin: center top;
  animation: qa-window-in 0.42s cubic-bezier(0.16, 1.18, 0.3, 1) forwards;
}
@keyframes qa-window-in {
  0%   { opacity: 0; transform: translateY(-18px) scale(0.92); box-shadow: 0 0 0 rgba(164,121,60,0); }
  55%  { opacity: 1; box-shadow: 0 14px 48px rgba(0,0,0,0.38), 0 0 0 4px rgba(164,121,60,0.28); }
  100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 14px 48px rgba(0,0,0,0.38), 0 0 0 0 rgba(164,121,60,0); }
}
/* The result popup gets a gentler version of the same entrance. */
.qa-result { animation: qa-result-in 0.3s cubic-bezier(0.16, 1.08, 0.3, 1) forwards; }
@keyframes qa-result-in {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Respect reduced-motion preferences: skip the movement, keep a quick fade. */
@media (prefers-reduced-motion: reduce) {
  .qa-overlay { animation: qa-backdrop-fade 0.15s ease forwards; }
  .qa-window, .qa-result { animation: qa-result-fade 0.15s ease forwards; }
  @keyframes qa-backdrop-fade { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,0.45); } }
  @keyframes qa-result-fade { from { opacity: 0; } to { opacity: 1; } }
}
.qa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, #e0d6c4);
}
.qa-title {
  font-family: var(--font-display, serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink, #2b2b2b);
}
.qa-version { font-size: 0.82rem; font-weight: 400; color: var(--ink-muted, #6b6151); }
.qa-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--ink-muted, #6b6151);
}
.qa-close:hover { color: var(--ink, #2b2b2b); }
.qa-body { padding: 16px 18px; }
.qa-section-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted, #6b6151); font-weight: 600; margin: 0 0 6px;
}
.qa-drop {
  padding: 22px 16px;
  border: 1.5px dashed var(--line, #cbb89a);
  border-radius: var(--radius, 6px);
  background: rgba(164,121,60,0.05);
  color: var(--ink-muted, #6b6151);
  font-size: 0.86rem;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: background 0.12s, border-color 0.12s;
}
.qa-drop:focus, .qa-drop.qa-drop-hover { border-color: var(--brass, #a4793c); background: rgba(164,121,60,0.12); }
.qa-drop.qa-drop-working { border-style: solid; opacity: 0.85; }
.qa-drop-busy { font-style: italic; }
.qa-ocr {
  white-space: pre-wrap; font-size: 0.84rem;
  background: var(--paper-deep, #f3ece0);
  border: 1px solid var(--line, #e0d6c4);
  border-radius: 6px; padding: 8px 10px;
  max-height: 160px; overflow-y: auto; margin-bottom: 6px;
}
.qa-explain { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.5; color: var(--ink, #2b2b2b); }
.qa-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px 16px;
}

/* v3.6.215: Mailing Center — larger popup than Quick Actions, two-view layout. */
.mc-overlay .mc-window {
  width: 1040px;
  max-width: calc(100% - 40px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.mc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line, #e0d6c4);
  padding: 0 18px;
  background: var(--paper-deep, #f3ece0);
}
.mc-tab {
  border: 0;
  background: transparent;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--ink-muted, #6b6151);
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.mc-tab:hover { color: var(--ink, #2b2b2b); }
.mc-tab-active {
  color: var(--ink, #2b2b2b);
  border-bottom-color: var(--brass, #a4793c);
}
.mc-body { padding: 16px 20px 18px; overflow-y: auto; flex: 1 1 auto; }
.mc-section { margin-bottom: 14px; }
.mc-section-h {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted, #6b6151); font-weight: 600; margin: 0 0 6px;
}
.mc-row {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 6px;
}
.mc-row label { display: block; flex: 1 1 180px; font-size: 0.85rem; color: var(--ink-muted, #6b6151); }
.mc-row label input, .mc-row label select { display: block; width: 100%; margin-top: 2px; }
.mc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 720px) { .mc-cols { grid-template-columns: 1fr; } }
.mc-radio, .mc-checkbox { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 0.9rem; }
.mc-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.mc-status { font-size: 0.85rem; color: var(--ink-muted, #6b6151); }
.mc-status-ok { color: #106e48; }
.mc-status-err { color: var(--signal-reject, #b25757); }
.mc-chosen { display: inline-block; margin-top: 4px; font-size: 0.85rem; color: var(--ink, #2b2b2b); }
.mc-autocomplete {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper, #fff); border: 1px solid var(--line, #e0d6c4);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  max-height: 220px; overflow-y: auto; z-index: 10;
}
.mc-ac-item { padding: 6px 10px; cursor: pointer; font-size: 0.86rem; }
.mc-ac-item:hover { background: var(--paper-deep, #f3ece0); }
.mc-ac-meta { color: var(--ink-muted, #6b6151); font-size: 0.78rem; }
.mc-ac-empty { color: var(--ink-muted, #6b6151); font-style: italic; cursor: default; }

.mc-list-filters {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  padding: 6px 0 12px; border-bottom: 1px solid var(--line, #e0d6c4); margin-bottom: 10px;
}
.mc-list-filters label { font-size: 0.82rem; color: var(--ink-muted, #6b6151); display: block; }
.mc-list-filters label select, .mc-list-filters label input { display: block; margin-top: 2px; }
.mc-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.mc-table th, .mc-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, #e8e0d0); vertical-align: top; }
.mc-table th { background: var(--paper-deep, #f3ece0); font-weight: 600; }
.mc-table .mc-meta { color: var(--ink-muted, #6b6151); font-size: 0.76rem; margin-top: 1px; }
.mc-test { background: rgba(178,87,87,0.15); color: var(--signal-reject, #b25757); padding: 1px 6px; border-radius: 3px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; }
.btn.btn-xs { padding: 2px 8px; font-size: 0.78rem; }

/* v3.6.216: Ask AI box inside Quick Actions popup. */
.qa-ask-input {
  width: 100%;
  font-family: var(--font-body, inherit);
  font-size: 0.9rem;
  padding: 8px 10px;
  border: 1px solid var(--line, #e0d6c4);
  border-radius: 6px;
  resize: vertical;
  min-height: 48px;
  box-sizing: border-box;
}
.qa-ask-answer {
  background: var(--paper-deep, #f3ece0);
  border: 1px solid var(--line, #e0d6c4);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  max-height: 360px;
  overflow-y: auto;
}
.qa-ask-answer p { margin: 0 0 8px; }
.qa-ask-answer p:last-child { margin-bottom: 0; }
.qa-ask-answer ul { margin: 0 0 8px 18px; padding: 0; }
.qa-ask-answer li { margin-bottom: 4px; }
.qa-ask-answer code {
  background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono, monospace); font-size: 0.85em;
}
.qa-ask-answer pre {
  background: rgba(0,0,0,0.06); padding: 8px 10px; border-radius: 5px;
  overflow-x: auto; font-size: 0.82em; margin: 0 0 8px;
}
.qa-ask-answer pre code { background: transparent; padding: 0; }
.qa-ask-answer h3, .qa-ask-answer h4, .qa-ask-answer h5, .qa-ask-answer h6 {
  font-size: 0.94rem; margin: 8px 0 4px; font-weight: 600;
}

/* v3.6.216: Calculator popup. */
.calc-overlay .calc-window {
  width: 320px;
  max-width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}
.calc-body { padding: 14px 16px 16px; }
.calc-display {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 2rem;
  text-align: right;
  padding: 12px 14px;
  background: var(--paper-deep, #f3ece0);
  border: 1px solid var(--line, #e0d6c4);
  border-radius: 6px;
  margin-bottom: 10px;
  min-height: 1.4em;
  overflow-x: auto;
  white-space: nowrap;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.calc-btn {
  font-size: 1.05rem;
  padding: 10px 0;
  border: 1px solid var(--line, #e0d6c4);
  background: var(--paper, #fff);
  cursor: pointer;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.1s;
}
.calc-btn:hover { background: var(--paper-deep, #f3ece0); }
.calc-btn:active { background: #e5dccc; transform: translateY(1px); }
.calc-btn.calc-op { background: var(--paper-deep, #f3ece0); font-weight: 600; color: var(--brass, #a4793c); }
.calc-btn.calc-op:hover { background: #e8dcc4; }
.calc-btn.calc-fn { font-size: 0.92rem; color: var(--ink-muted, #6b6151); }
.calc-btn.calc-eq { background: var(--brass, #a4793c); color: var(--paper, #fff); font-weight: 600; }
.calc-btn.calc-eq:hover { background: #8d6630; }
.calc-hint { font-size: 0.76rem; color: var(--ink-muted, #6b6151); text-align: center; margin-top: 10px; }

/* v3.6.217: Quick Actions tile grid — uniform square launchers. */
.qa-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.qa-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line, #e0d6c4);
  background: var(--paper, #fff);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink, #2b2b2b);
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  text-align: center;
  box-sizing: border-box;
}
.qa-tile:hover {
  background: var(--paper-deep, #f3ece0);
  border-color: var(--brass, #a4793c);
}
.qa-tile:active { transform: translateY(1px); }
.qa-tile-icon { font-size: 1.7rem; line-height: 1; }
.qa-tile-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink, #2b2b2b);
  line-height: 1.15;
}

/* v3.7.412 — Quick Actions on mobile/touch: full-screen sheet with a sticky
   header (close stays reachable), a tidy 3-up tile grid, and a scrollable body. */
@media (max-width: 900px) and (pointer: coarse), (max-width: 600px) {
  .qa-overlay { padding-top: 0; align-items: stretch; justify-content: stretch; }
  .qa-window {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .qa-head {
    position: sticky;
    top: 0;
    background: var(--paper, #fff);
    z-index: 3;
  }
  .qa-close { font-size: 1.7rem; padding: 4px 8px; }
  .qa-tile-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .qa-tile { aspect-ratio: auto; min-height: 86px; padding: 10px 6px; }
  .qa-tile-icon { font-size: 1.5rem; }
}

/* v3.6.217: Mailing Center tracking list actions column — keep Track + Label
   buttons compact and on the same row. */
.mc-actions-col { white-space: nowrap; }
.mc-actions-col .btn + .btn { margin-left: 4px; }
/* v3.7.661 — let the tracking list scroll horizontally on narrow windows so
   the Receipt button (last action) is always reachable, never clipped. */
.mc-list-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mc-list-table .mc-table { min-width: 880px; }
.mc-list-filters input[type="search"] { width: 100%; }

/* v3.7.171 — Client tab rollups match the OS look: drop the ▸ caret on the
   collapsible client sections (the main identity rollup already omits it). */
#clientForm .section-collapse > summary::before { content: none; }
#clientForm details.os-rollup > summary { list-style: none; }
#clientForm details.os-rollup > summary::-webkit-details-marker { display: none; }

/* ============================================================
   v3.7.286 — Mobile layout fixes (phones / narrow viewports).
   Aligned with the existing 900px hamburger breakpoint.
     1) Word-wrap the intake & case dashboard tables so they no
        longer scroll the whole page off to the right.
     2) Wrap the page-head action buttons (Cases: Reports /
        Calendar / Unread Communications / Payments / Import;
        Intake: View original email / Back to Demographics /
        Dashboard / Cancel) so they stay on screen.
     3) Turn the floating "original email" panel into a fitted,
        X-closable modal on phones (handled at 700px).
   ============================================================ */
@media (max-width: 900px) {
  /* (2) Stack the page header; let the action button row wrap.
     :not(:first-child) so a header with only a title block is untouched. */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head > div:last-child:not(:first-child) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .page-head > div:last-child:not(:first-child) .btn,
  .page-head > div:last-child:not(:first-child) > form,
  .page-head > div:last-child:not(:first-child) > .status-pill { flex: 0 0 auto; }

  /* (1) Word-wrap data-table BODY cells so long values fold instead of
     forcing the table wider than the screen. Header cells never chunk
     mid-word — they get nowrap (and, on the intake dashboard, a compact
     vertical/abbreviated treatment, see below). */
  table.data td {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  table.data th { white-space: nowrap; }
  /* Keep any residual table width inside its own scroll box rather
     than widening the page, and tighten the dashboards a touch. */
  #intakeTableWrap, #caseTableWrap, #taskTableWrap { overflow-x: auto; max-width: 100%; }
  #intakeTableWrap table.data th, #intakeTableWrap table.data td,
  #caseTableWrap table.data th, #caseTableWrap table.data td {
    padding: 7px 8px;
    font-size: 0.82rem;
  }
}

@media (max-width: 700px) {
  /* (3) Original-email panel: fitted modal with the X close, not a
     floating popup that runs off the side of a phone screen. The
     !important overrides the element's inline top/right/width and the
     left/top the drag handler may have set. */
  #originalEmailPanel {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  #originalEmailPanelHeader { cursor: default !important; }
}

/* ============================================================
   v3.7.287 — Maiar buttons. Distinct, "sparkly" treatment so the
   AI-powered (Maiar-role) actions stand apart from normal brass /
   outline buttons. Used on the demand-letter review button and the
   case-dashboard "Maiar review" button.
   ============================================================ */
.btn-maiar {
  position: relative;
  overflow: hidden;
  border: none;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: linear-gradient(110deg, #5b2a86 0%, #7d3cae 22%, #a4793c 50%, #7d3cae 78%, #5b2a86 100%);
  background-size: 220% 100%;
  box-shadow: 0 2px 10px rgba(91,42,134,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  animation: maiar-pan 6s linear infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.btn-maiar:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px rgba(125,60,174,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-1px);
}
.btn-maiar:active { transform: translateY(0); }
.btn-maiar:disabled { opacity: 0.85; cursor: default; transform: none; }
/* Moving shine sweep across the button face. */
.btn-maiar::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: maiar-sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}
/* Twinkling spark glyph. */
.maiar-spark {
  display: inline-block;
  margin-right: 2px;
  color: #ffe9a8;
  text-shadow: 0 0 6px rgba(255,225,150,0.9);
  animation: maiar-twinkle 1.8s ease-in-out infinite;
}
@keyframes maiar-pan { to { background-position: -220% 0; } }
@keyframes maiar-sheen {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}
@keyframes maiar-twinkle {
  0%, 100% { opacity: 0.65; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.18) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-maiar { animation: none; background-position: 30% 0; }
  .btn-maiar::after { animation: none; display: none; }
  .maiar-spark { animation: none; }
}

/* ============================================================
   v3.7.288 — Intake dashboard, mobile-compact table.
   Headers read top-to-bottom one upright letter per line (no more
   "CLI / EN / T" chunking), some abbreviated. Body cells go compact:
   case type → PI / CR / WC, status pill abbreviated + vertical,
   assignee → initials, client name as First over Last.
   The "-sm" variants are hidden on desktop and revealed on mobile.
   ============================================================ */
.th-sm, .case-sm, .status-sm, .assignee-sm, .tier-sm, .date-sm, .late-sm { display: none; }
.status-dot { display: none; } /* v3.7.1044 — mobile-only status color dot */

@media (max-width: 900px) and (pointer: coarse), (max-width: 600px) {
  /* Headers: upright, one letter per line (whole word, not chunked). */
  #intakeTableWrap th.th-vert {
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap !important;
    letter-spacing: -1px;
    line-height: 0.95;
    padding: 8px 2px;
    font-size: 0.6rem;
    vertical-align: bottom;
    text-align: left;
  }
  #intakeTableWrap th .th-lg { display: none; }
  #intakeTableWrap th .th-sm { display: inline; }

  /* Body: tighter padding so the narrow columns fit. */
  #intakeTableWrap table.data td { padding: 6px 5px; font-size: 0.8rem; }

  /* Client name: full first name, then last name on the next line. */
  /* Client name: full first name, then last name on the next line, but the
     column is capped so a long name (or the phone) can't push the table off
     the screen — overflow truncates with an ellipsis (full name on tap/hover). */
  #intakeTableWrap .client-name { font-size: 0.8rem; max-width: 6.5em; }
  #intakeTableWrap .cn-first,
  #intakeTableWrap .cn-last {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 6.5em;
  }
  #intakeTableWrap .client-name > div {
    max-width: 6.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Case type → PI / CR / WC. */
  #intakeTableWrap .case-lg { display: none; }
  #intakeTableWrap .case-sm {
    display: inline-block;
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.82rem;
  }

  /* Tier → full pill on desktop, compact color block on mobile. */
  #intakeTableWrap .tier-lg { display: none; }
  #intakeTableWrap .tier-sm { display: inline-block; }

  /* Status pill → abbreviated AND vertical (up and down). */
  #intakeTableWrap .status-lg { display: none; }
  #intakeTableWrap .status-sm {
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: -1px;
    line-height: 0.95;
  }
  #intakeTableWrap .status-pill { padding: 4px 3px; }

  /* Assigned attorney → initials only. */
  #intakeTableWrap .assignee-lg { display: none; }
  #intakeTableWrap .assignee-sm {
    display: inline-block;
    font-weight: 700;
    font-family: var(--font-mono);
  }

  /* ============ v3.7.1038 — tasks dashboard, same treatment ============ */
  #taskTableWrap th.th-vert {
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap !important;
    letter-spacing: -1px;
    line-height: 0.95;
    padding: 8px 2px;
    font-size: 0.6rem;
    vertical-align: bottom;
    text-align: left;
  }
  #taskTableWrap th .th-lg { display: none; }
  #taskTableWrap th .th-sm { display: inline; }
  #taskTableWrap table.data td { padding: 6px 5px; font-size: 0.8rem; }

  /* v3.7.1044 — Subject is the most important field: give it room and let
     it wrap to TWO lines (clamped) instead of chopping at one. */
  #taskTableWrap td strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 14em;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  /* Start column: dropped on phones by default — Due is the date that
     matters — but v3.7.1169 measures the actual table: when it fits the
     window WITH the column, tasks_list.ejs adds .show-start and it returns
     (landscape phones, small tablets). */
  #taskTableWrap .task-col-start { display: none; }
  #taskTableWrap.show-start .task-col-start { display: table-cell; }

  /* Due date → MM-DD. */
  #taskTableWrap .date-lg { display: none; }
  #taskTableWrap .date-sm { display: inline; }

  /* v3.7.1044 — status → a solid color dot (gray/brass/green), no text. */
  #taskTableWrap .st-pill .status-lg { display: none; }
  #taskTableWrap .st-pill {
    background: transparent !important;
    padding: 0;
  }
  #taskTableWrap .status-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
  }
  /* LATE → L. */
  #taskTableWrap .late-lg { display: none; }
  #taskTableWrap .late-sm { display: inline; font-weight: 800; }

  /* Assignees → initials (full names on tap/hover via title). */
  #taskTableWrap .assignee-lg { display: none; }
  #taskTableWrap .assignee-sm {
    display: inline-block;
    font-weight: 700;
    font-family: var(--font-mono);
  }
}

/* ============================================================
   v3.7.292 — Case dashboard, mobile-compact table (mirrors the
   intake dashboard). Vertical/abbreviated headers; Opened column
   hidden; language flag dropped (2-letter code only); type → PI/CR/WC;
   status abbreviated + vertical; assignees → initials; client name
   First over Last with a capped width.
   ============================================================ */
@media (max-width: 900px) and (pointer: coarse), (max-width: 600px) {
  #caseTableWrap th.th-vert {
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap !important;
    letter-spacing: -1px;
    line-height: 0.95;
    padding: 8px 2px;
    font-size: 0.6rem;
    vertical-align: bottom;
    text-align: left;
  }
  #caseTableWrap th .th-lg { display: none; }
  #caseTableWrap th .th-sm { display: inline; }

  #caseTableWrap table.data td { padding: 6px 5px; font-size: 0.8rem; }

  /* Opened column: removed entirely on mobile. */
  #caseTableWrap .col-opened { display: none !important; }

  /* Language: drop the flag, keep just the 2-letter pill. */
  #caseTableWrap .lang-flag { display: none !important; }

  /* Client name: first name over last name, capped width. */
  #caseTableWrap .cn-first,
  #caseTableWrap .cn-last {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 6.5em;
  }

  /* Type → PI / CR / WC. */
  #caseTableWrap .case-lg { display: none; }
  #caseTableWrap .case-sm {
    display: inline-block;
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.82rem;
  }

  /* Status → abbreviated and vertical. */
  #caseTableWrap .status-lg { display: none; }
  #caseTableWrap .status-sm {
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: -1px;
    line-height: 0.95;
  }
  #caseTableWrap .status-pill { padding: 4px 3px; }

  /* Assignees → initials (★ marks the lead). */
  #caseTableWrap .assignee-lg { display: none; }
  #caseTableWrap .assignee-sm {
    display: inline-block;
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.3;
  }
}

/* v3.7.901 — Demand Wizard "take me there" target highlight: a yellow/gold
   pulsing border drawn around the destination card/field. Applied by
   wizard-highlight.js after navigation; removed automatically. */
.dw-wizard-pulse {
  outline: 3px solid #e6b800 !important;
  outline-offset: 2px;
  border-radius: 10px;
  animation: dwWizardPulse 1.2s ease-out infinite;
  scroll-margin-top: 90px;
}
@keyframes dwWizardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(230, 184, 0, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(230, 184, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 184, 0, 0); }
}

/* v3.7.914 — photo lightbox: prev/next arrows + full-size loader */
.pv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 64px; border: none; border-radius: 10px;
  background: rgba(20, 16, 8, 0.45); color: #fff; font-size: 2rem; line-height: 1;
  cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center;
}
.pv-nav:hover { background: rgba(20, 16, 8, 0.7); }
.pv-prev { left: 10px; }
.pv-next { right: 10px; }
.pv-fullsize {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  padding: 5px 12px; border: 1px solid rgba(255,255,255,0.6); border-radius: 7px;
  background: rgba(20, 16, 8, 0.55); color: #fff; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.pv-fullsize:hover { background: rgba(20, 16, 8, 0.8); }

/* v3.7.916 — video tiles in photo grids */
.pv-video-tile {
  width: 100%; height: 100%; min-height: 86px; background: #23201a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border-radius: 6px;
}
.pv-video-play { color: #e6b800; font-size: 1.6rem; line-height: 1; }
.pv-video-name {
  color: #cfc8b8; font-size: 0.66rem; max-width: 92%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* v3.7.1226 — "you are here" gradient on the ACTIVE case-tab card (the one
   last clicked into / focused). Idea from resources.morrisonhugheslaw.com's
   wc-toolkit active-card treatment, WITHOUT its animation: a static 2px
   brass-to-green gradient ring drawn by a masked pseudo-element so it follows
   the card's rounded corners, plus a soft glow. Cards keep their own
   background and left accent bar. */
.dw-card-active { position: relative; box-shadow: 0 2px 14px rgba(31, 111, 92, 0.18); }
.dw-card-active::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(135deg, #b8860b 0%, #cdb78d 45%, #1f6f5c 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}