/* =====================================================================
   Basecoat bridge
   ---------------------------------------------------------------------
   Basecoat UI (a vanilla port of shadcn/ui) is being trialled on the app
   shell (sidebar, top bar, notifications, user menu) and the dashboard.

   How isolation works:
   - /assets/vendor/basecoat/basecoat.scoped.css only applies inside
     elements carrying the `bc` class (CSS @scope). Legacy pages are untouched.
   - This file (1) maps shadcn's design tokens onto the app's existing theme
     variables so both themes keep working, and (2) holds the small amount of
     custom CSS the converted screens need.
   ===================================================================== */

/* ---------- 1. Tokens: shadcn names -> existing GeniusLaw variables ---------- */
:root {
  /* Geometry. Root font-size is 14px in this app, so pin the scale in px. */
  --spacing: 4px;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 17px;
  --text-xl: 20px;
  --radius: 10px;

  /* Colours (dark is the default theme, same as styles.css) */
  --background: var(--bg-base);
  --foreground: var(--text-primary);
  --card: var(--bg-elevated);
  --card-foreground: var(--text-primary);
  --popover: var(--bg-elevated);
  --popover-foreground: var(--text-primary);
  /* --primary is inherited from styles.css (#3b82f6) */
  --primary-foreground: #ffffff;
  --secondary: var(--bg-surface);
  --secondary-foreground: var(--text-primary);
  --muted: var(--bg-surface);
  --muted-foreground: var(--text-muted);
  --accent: var(--bg-hover);
  --accent-foreground: var(--text-primary);
  --destructive: var(--danger);
  --border: var(--border-subtle);
  --input: var(--border-default);
  --ring: var(--border-focus);

  --sidebar: var(--bg-elevated);
  --sidebar-foreground: var(--text-secondary);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: var(--bg-hover);
  --sidebar-accent-foreground: var(--text-primary);
  --sidebar-border: var(--border-subtle);
  --sidebar-ring: var(--border-focus);
  --sidebar-mobile-width: 18rem;

  --chart-1: #93c5fd;
  --chart-2: #3b82f6;
  --chart-3: #2563eb;
  --chart-4: #1d4ed8;
  --chart-5: #1e40af;

  --scrollbar-track: transparent;
  --scrollbar-thumb: var(--border-default);
  --scrollbar-width: 10px;
  --scrollbar-sm-width: 6px;
  --scrollbar-radius: 9999px;

  /* Icons Basecoat masks in via CSS (select chevrons, checkboxes, summary arrows) */
  --chevron-down-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --chevron-down-icon-50: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236e768180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --check-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}

/* ---------- 2. Shell layout (outside any .bc root) ---------- */
/* Basecoat's sidebar pushes its next sibling with margin; the legacy
   .main-wrapper rule would otherwise pin a 240px margin forever. */
/* NOTE: Chromium implements @scope with an implicit `:scope ` descendant prefix,
   so a scoped rule can never match the scope root itself. Every `.bc` is therefore
   a WRAPPER around the component, and rules for the roots themselves live here. */
.sidebar-root + .main-wrapper {
  margin-left: 0;
  min-width: 0;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 48rem) {
  .sidebar-root:has(> .sidebar:not([aria-hidden="true"])) + .main-wrapper {
    margin-left: var(--sidebar-width);
  }
}
.app-header {
  position: sticky;
  top: 0;
  /* Stays under the notification drawer / mobile sidebar (z 40-50). Page
     bodies must therefore keep their own layers below 30 — see the Matters
     filter panel override — or they cover the header's popovers/tooltips. */
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-height, 64px);
  padding: 0 16px 0 10px;
  background: color-mix(in oklab, var(--background) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* Page transitions. The shell (sidebar + header) is revealed instantly by
   .auth-checked; the page body eases in after each loadPage(). The first page
   after login gets a slower, delayed entrance so the shell reads first. */
@media (prefers-reduced-motion: no-preference) {
  .page-content.is-entering {
    animation: page-enter 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .page-content.is-entering-first {
    animation: page-enter 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
  }
  .page-content.is-entering-first .dash-head { animation-duration: 0.6s; animation-delay: 0.3s; }
}
@keyframes page-enter {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
.dashboard-page { display: flex; flex-direction: column; gap: 20px; }
.calendar-page { display: flex; flex-direction: column; gap: 18px; }
#notif-drawer-wrap { display: contents; }
/* Theme toggle icons (html[data-theme] lives outside the scope): both icons are
   stacked and cross-fade/rotate instead of display-toggling. */
/* No overflow clipping: the leaving icon fades to 0 and shrinks, so nothing
   pokes out, and clipping would cut off the button's [data-tooltip] bubble. */
.app-header .hdr-theme { position: relative; }
.app-header .hdr-theme > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: opacity 0.25s ease, rotate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.3s ease;
}
html[data-theme="light"] .app-header .icon-moon,
html:not([data-theme="light"]) .app-header .icon-sun {
  opacity: 1;
  rotate: 0deg;
  scale: 1;
}
html[data-theme="light"] .app-header .icon-sun,
html:not([data-theme="light"]) .app-header .icon-moon {
  opacity: 0;
  rotate: -90deg;
  scale: 0.4;
  pointer-events: none;
}
#shell-dialogs { display: contents; }
/* Sidebar logo: light/dark artwork swap (html[data-theme] lives outside the scope) */
html[data-theme="light"] .sb-logo .logo-dark,
html:not([data-theme="light"]) .sb-logo .logo-light {
  display: none;
}

/* ---------- 3. Custom styles for converted regions ---------- */
/* Dashboard readability: every cell in the Recent Cases / Orders tables plus the
   metric numbers and card titles use pure black in light mode and pure white in
   dark mode. Muted greys read washed-out on the pure-white / pure-black cards.
   Status pills, DST pills and row-action buttons keep their own colours. */
html[data-theme="light"] .dashboard-page .dash-card .metric-value:not(.loading),
html[data-theme="light"] .dashboard-page .dash-card[data-size] > header > h3.card-title,
html[data-theme="light"] .dashboard-page .dash-table th,
html[data-theme="light"] .dashboard-page .dash-table td,
html[data-theme="light"] .dashboard-page .dash-table td.muted,
html[data-theme="light"] .dashboard-page .dash-table .cell-2 > *,
html[data-theme="light"] :is(.dashboard-page, .calendar-page) .evt-row .evt-title,
html[data-theme="light"] :is(.dashboard-page, .calendar-page) .evt-row .evt-val:not(.empty),
html[data-theme="light"] :is(.dashboard-page, .calendar-page) .evt-row .evt-date .d,
html[data-theme="light"] :is(.dashboard-page, .calendar-page) .bc-cal .calendar-event[data-type],
html[data-theme="light"] :is(.dashboard-page, .calendar-page) .bc-cal .calendar-day:not(.other-month):not(.today) .calendar-day-number,
html[data-theme="light"] :is(.dashboard-page, .calendar-page) .bc-cal .dcal-month {
  color: #000000;
}
html:not([data-theme="light"]) .dashboard-page .dash-card .metric-value:not(.loading),
html:not([data-theme="light"]) .dashboard-page .dash-card[data-size] > header > h3.card-title,
html:not([data-theme="light"]) .dashboard-page .dash-table th,
html:not([data-theme="light"]) .dashboard-page .dash-table td,
html:not([data-theme="light"]) .dashboard-page .dash-table td.muted,
html:not([data-theme="light"]) .dashboard-page .dash-table .cell-2 > *,
html:not([data-theme="light"]) :is(.dashboard-page, .calendar-page) .evt-row .evt-title,
html:not([data-theme="light"]) :is(.dashboard-page, .calendar-page) .evt-row .evt-val:not(.empty),
html:not([data-theme="light"]) :is(.dashboard-page, .calendar-page) .evt-row .evt-date .d,
html:not([data-theme="light"]) :is(.dashboard-page, .calendar-page) .bc-cal .calendar-event[data-type],
html:not([data-theme="light"]) :is(.dashboard-page, .calendar-page) .bc-cal .calendar-day:not(.other-month):not(.today) .calendar-day-number,
html:not([data-theme="light"]) :is(.dashboard-page, .calendar-page) .bc-cal .dcal-month {
  color: #ffffff;
}

/* Event type -> accent colour. Shared by the Upcoming Events rows, the calendar
   chips (dashboard + Calendar page), the hover peek (appended to <body>, outside
   .bc), the event detail dialog, the Calendar page legend and the event-type
   picker in the event form. A per-event highlight_color overrides it inline. */
:is(.evt-row, .calendar-event, .dash-evd, .event-hover-popover, .cal-legend-item, .event-type-btn) { --evt-accent: var(--muted-foreground); }
:is(.evt-row, .calendar-event, .dash-evd, .event-hover-popover, .cal-legend-item, .event-type-btn)[data-type="task"] { --evt-accent: var(--primary); }
:is(.evt-row, .calendar-event, .dash-evd, .event-hover-popover, .cal-legend-item, .event-type-btn):is([data-type="hearing"], [data-type="court"], [data-type="deposition"]) { --evt-accent: var(--warning); }
:is(.evt-row, .calendar-event, .dash-evd, .event-hover-popover, .cal-legend-item, .event-type-btn)[data-type="deadline"] { --evt-accent: var(--destructive); }
:is(.evt-row, .calendar-event, .dash-evd, .event-hover-popover, .cal-legend-item, .event-type-btn):is([data-type="meeting"], [data-type="intake"]) { --evt-accent: var(--success); }
:is(.evt-row, .calendar-event, .dash-evd, .event-hover-popover, .cal-legend-item, .event-type-btn):is([data-type="internal"], [data-type="call"]) { --evt-accent: var(--info, #06b6d4); }

@scope (.bc) {
  /* Legacy element rules (h1-h6/p margins & colours) leak in; neutralise. */
  h1, h2, h3, h4, h5, h6, p { margin: 0; }
  p { color: inherit; }
  a { color: inherit; }
  button { font-family: inherit; }

  /* House style (Sept 2026): every button label is uppercase + bold. Icon-only
     buttons are unaffected; duration presets ("1h 30m") opt out. */
  .btn:not(.evm-dur) { text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; }

  /* ---- Sidebar ---- */
  .sb-logo {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 12px;
    border-radius: var(--radius-md);
  }
  .sb-logo img { height: 60px; width: auto; max-width: 100%; display: block; } /* 1.5x the original 40px */
  .sidebar nav > header { padding: 10px 8px 6px; }
  .sidebar nav > section { padding-top: 2px; }
  .sidebar nav h3 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11.5px;
    height: 30px;
  }
  .sidebar nav > section > [role="group"] > ul { gap: 2px; }
  /* :not([data-size]) matches Basecoat's own size rule specificity so ours wins */
  .sidebar nav li > a:not([data-size]) {
    position: relative;
    height: 40px;
    padding-inline: 12px;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sidebar-foreground);
    transition: background-color 0.15s ease, color 0.15s ease, translate 0.15s ease;
  }
  .sidebar nav li > a:not([data-size]) > svg { width: 19px; height: 19px; }
  .sidebar nav li > a:hover { color: var(--sidebar-accent-foreground); }
  .sidebar nav li > a:active { translate: 0 1px; }
  .sidebar nav li > a[aria-current="page"],
  .sidebar nav li > a.active {
    background: color-mix(in oklab, var(--primary) 13%, transparent);
    color: var(--primary);
    font-weight: 700;
  }
  .sidebar nav li > a[aria-current="page"]::before,
  .sidebar nav li > a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
  }
  .sidebar nav li > a .badge { margin-left: auto; }
  .sidebar nav > footer {
    padding: 10px 12px;
    border-top: 1px solid var(--sidebar-border);
    font-size: 11px;
    color: var(--muted-foreground);
  }

  /* ---- Top bar (the .app-header root rule itself is above, outside the scope) ---- */
  .hdr-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; margin: 0 2px; }
  .hdr-crumb { min-width: 0; flex: 1; }
  .hdr-crumb > ol { flex-wrap: nowrap; font-size: 13px; }
  .hdr-crumb li { min-width: 0; }
  .hdr-crumb li > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdr-crumb .hdr-crumb-root { color: var(--muted-foreground); font-weight: 500; }
  .hdr-crumb a { color: var(--muted-foreground); font-weight: 500; }
  .hdr-crumb [aria-current="page"] { font-weight: 700; letter-spacing: -0.01em; }
  .hdr-crumb li[aria-hidden="true"] { color: var(--muted-foreground); opacity: 0.7; }
  .hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }

  /* Search trigger: looks like an input, opens the command palette */
  .hdr-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    width: 240px;
    margin-right: 6px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--muted-foreground);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  }
  .hdr-search-trigger:hover { border-color: color-mix(in oklab, var(--foreground) 25%, var(--border)); background: var(--accent); color: var(--foreground); }
  .hdr-search-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
  .hdr-search-trigger > svg { width: 15px; height: 15px; flex-shrink: 0; }
  .hdr-search-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdr-search-trigger .kbd { margin-left: auto; font-size: 10.5px; height: 20px; min-width: 20px; padding-inline: 5px; color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border); }
  @media (max-width: 900px) {
    .hdr-search-trigger { width: 36px; padding: 0; justify-content: center; }
    .hdr-search-label, .hdr-search-trigger .kbd { display: none; }
  }
  @media (max-width: 640px) {
    .hdr-crumb, .hdr-sep { display: none; }
  }
  .hdr-actions .btn[data-variant="ghost"] { color: var(--muted-foreground); }
  .hdr-actions .btn[data-variant="ghost"]:hover { color: var(--foreground); }
  .hdr-bell { position: relative; }
  .hdr-bell-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--destructive);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--background);
    animation: bc-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.2);
  }
  .hdr-bell.has-unread svg { color: var(--foreground); }
  /* Soft ping ring behind the badge while there are unread items (::before is the tooltip) */
  .hdr-bell.has-unread::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--destructive);
    opacity: 0;
    animation: bc-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
  }

  /* ---- User menu (popover) ---- */
  .ud-trigger { gap: 8px; padding-inline: 6px 8px; height: 36px; }
  .ud-trigger .avatar { width: 26px; height: 26px; }
  .avatar > span:not(.avatar-badge) { font-weight: 600; letter-spacing: 0.02em; color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }
  .ud-trigger .avatar > span { font-size: 11px; }
  .avatar[data-size="lg"] { width: 48px; height: 48px; }
  .avatar[data-size="lg"] > span { font-size: 17px; font-weight: 700; }
  .hdr-name-skel { display: inline-block; width: 88px; height: 11px; vertical-align: middle; border-radius: 6px; }
  .ud-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .ud-trigger .ud-chev { width: 12px !important; height: 12px !important; color: var(--muted-foreground); transition: rotate 0.2s ease; }
  .ud-trigger[aria-expanded="true"] .ud-chev { rotate: 180deg; }
  .ud-panel { width: 320px; padding: 0; overflow: hidden; }
  .ud-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    align-items: flex-start;
    padding: 18px 16px 16px;
    background: var(--popover);
    border-bottom: 1px solid var(--border);
  }
  .ud-hero-text { min-width: 0; flex: 1; }
  .ud-hero-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .ud-hero-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ud-hero-firm { font-size: 13px; font-weight: 500; color: color-mix(in oklab, var(--foreground) 80%, var(--muted-foreground)); margin-top: 2px; }
  .ud-hero-firm:empty { display: none; }
  .ud-hero-email { font-size: 12.5px; color: var(--muted-foreground); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
  .ud-hero-email:hover { white-space: normal; overflow-wrap: anywhere; } /* long address: reveal on hover */
  .ud-role { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; flex-shrink: 0; }
  .ud-role:empty { display: none; }
  .ud-section-label { padding: 12px 16px 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
  .ud-list { display: grid; gap: 2px; padding: 0 8px 8px; }
  .ud-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .ud-row:hover { background: var(--accent); }
  .ud-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
  .ud-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--muted);
    color: var(--foreground);
  }
  .ud-row-icon svg { width: 16px; height: 16px; }
  .ud-row-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
  .ud-row-text > span { font-size: 13.5px; font-weight: 600; }
  .ud-row-text > small { font-size: 11.5px; color: var(--muted-foreground); }
  .ud-row-chev { width: 14px; height: 14px; color: var(--muted-foreground); transition: translate 0.15s ease; }
  .ud-row:hover .ud-row-chev { translate: 2px 0; color: var(--foreground); }
  .ud-footer { padding: 10px 12px 12px; border-top: 1px solid var(--border); }
  .ud-logout { width: 100%; color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, var(--border)); }
  .ud-logout:hover { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); border-color: var(--destructive); }
  .ud-logout svg { width: 15px; height: 15px; }

  /* ---- Profile dialogs (Edit profile / Change password) ---- */
  .dialog.pd > article { width: 440px; max-width: calc(100vw - 32px); padding: 22px 22px 20px; }
  .dialog.pd > article > header > h2 { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  .dialog.pd > article > header > p { color: var(--muted-foreground); }
  .pd-body { display: flex; flex-direction: column; gap: 14px; }
  .pd-field { display: grid; gap: 6px; }
  .pd-field .label { font-size: 11.5px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; }
  .pd-field .input[readonly] { color: var(--muted-foreground); background: var(--muted); cursor: not-allowed; }
  .pd-hint { font-size: 12px; color: var(--muted-foreground); }
  .pd-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent);
    background: color-mix(in oklab, var(--destructive) 10%, transparent);
    color: var(--destructive);
    font-size: 13px;
    line-height: 1.4;
  }
  .dialog.pd > article > footer { flex-direction: row; justify-content: flex-end; gap: 8px; }

  /* ---- Command palette (global search) ---- */
  .command-dialog > .command { max-width: 600px; }
  .command > header { gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .command > header > svg { width: 17px; height: 17px; color: var(--muted-foreground); }
  .command > header input { font-size: 15px; height: 24px; color: var(--foreground); }
  .command > header input::placeholder { color: var(--muted-foreground); }
  .cmd-esc { font-size: 10.5px; color: var(--muted-foreground); border: 1px solid var(--border); background: var(--muted); }
  .command [role="menu"] { max-height: 420px; padding: 6px; }
  .command [role="menu"]:not(:has([role="menuitem"]))::before { padding-block: 40px; color: var(--muted-foreground); }
  .command [role="heading"] { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; }
  .cmd-count { display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--muted); font-size: 10px; letter-spacing: 0; }
  .command [role="menuitem"] {
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-md);
  }
  .command [role="menuitem"].active { background: var(--accent); }
  .command [role="menuitem"] > svg { width: 16px; height: 16px; color: var(--muted-foreground); }
  .command [role="menuitem"] .cmd-chev { margin-left: auto; width: 14px; height: 14px; opacity: 0; translate: -4px 0; transition: opacity 0.15s ease, translate 0.15s ease; }
  .command [role="menuitem"].active .cmd-chev { opacity: 1; translate: 0 0; }
  .cmd-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--muted); color: var(--foreground); font-size: 12px; font-weight: 600; }
  .cmd-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
  .cmd-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmd-sub { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmd-meta { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .cmd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin: 0 4px; }
  .cmd-status { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
  .cmd-status[data-status="open"], .cmd-status[data-status="active"] { color: #16a34a; border-color: color-mix(in oklab, #16a34a 45%, transparent); }
  .cmd-back { color: var(--muted-foreground); }
  .cmd-back .cmd-title { color: var(--foreground); }
  .cmd-none { color: var(--muted-foreground); font-size: 13px; cursor: default; }
  .command [role="separator"] { margin: 4px 0; }
  .cmd-foot {
    display: flex;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--muted-foreground);
    background: color-mix(in oklab, var(--background) 60%, var(--card));
  }
  .cmd-foot span { display: inline-flex; align-items: center; gap: 4px; }
  .cmd-foot .kbd { height: 18px; min-width: 18px; font-size: 10px; border: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); }

  /* ---- Notifications drawer ---- */
  .drawer.nd[data-side="right"] > article { width: 400px; max-width: 100vw; overflow: visible; }
  .nd > article > header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
  }
  .drawer.nd > article > header h2,
  .drawer.cz > article > header h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  .nd-sub { font-size: 13px; color: var(--muted-foreground); margin-top: 4px; }
  .nd-head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .drawer.nd > article > header h2 { text-transform: uppercase; letter-spacing: 0.06em; }
  .nd > article > section { padding: 12px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in oklab, var(--background) 60%, var(--card)); }
  /* Each notification is a card */
  .nd-item.card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 14px 16px;
    margin: 0;
    font: inherit;
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    text-align: left;
    cursor: pointer;
    color: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 0.15s ease, border-color 0.15s ease, translate 0.15s ease, box-shadow 0.15s ease;
  }
  .nd-item.card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .nd-item.card:hover { translate: 0 -1px; border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); box-shadow: var(--shadow-md); }
  .nd-item.card.selected { background: color-mix(in oklab, var(--primary) 6%, var(--card)); border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
  .nd-item.card.pinned { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); }
  .nd-top { display: flex; align-items: center; gap: 8px; }
  .nd-time { font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; }
  .nd-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; background: var(--primary); flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); }
  .nd-text { display: block; font-size: 14px; line-height: 1.45; color: var(--foreground); font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
  .nd-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
  .nd-hint { font-size: 11.5px; color: var(--muted-foreground); }
  .nd-chev { color: var(--muted-foreground); transition: translate 0.15s ease, color 0.15s ease; }
  .nd-item.card:hover .nd-chev, .nd-item.card.selected .nd-chev { translate: 2px 0; color: var(--primary); }
  .nd-genre { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; height: 18px; }
  .nd-genre[data-genre="cases"] { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
  .nd-genre[data-genre="orders"] { color: var(--purple); border-color: color-mix(in oklab, var(--purple) 40%, transparent); }
  .nd-genre[data-genre="casecheck"] { color: var(--teal); border-color: color-mix(in oklab, var(--teal) 40%, transparent); }
  .nd-genre[data-genre="retainer"] { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 40%, transparent); }
  .nd-genre[data-genre="pronto"] { color: var(--orange); border-color: color-mix(in oklab, var(--orange) 40%, transparent); }
  .nd-genre[data-genre="ra"] { color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, transparent); }
  .nd-more { padding: 6px 0 2px; display: flex; justify-content: center; }
  .nd-empty { border: 0; padding: 40px 16px; }
  /* Detail card floats just left of the drawer panel, aligned to the hovered row */
  .nd-detail {
    position: absolute;
    right: 100%;
    top: 8px;
    margin-right: 12px;
    width: 380px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    translate: 8px 0;
    scale: 0.98;
    transform-origin: right center;
    transition: opacity 0.18s ease, translate 0.18s ease, scale 0.18s ease, top 0.15s ease, visibility 0s linear 0.18s;
  }
  .nd-detail.open { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition: opacity 0.18s ease, translate 0.18s ease, scale 0.18s ease, top 0.15s ease; }
  .nd-detail-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; }
  .nd-detail-head .nd-time { margin-left: 2px; }
  .nd-detail-head .btn { margin-left: auto; }
  .nd-detail-title { font-size: 17px; font-weight: 600; line-height: 1.35; padding: 10px 14px 0; }
  .nd-detail-body { font-size: 13px; line-height: 1.6; color: var(--muted-foreground); padding: 8px 14px 14px; white-space: pre-line; }
  .nd-detail-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--border); }

  /* ---- Dashboard (.dashboard-page root rule is outside the scope) ---- */
  .dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
  .dash-head h1 { font-size: 30px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
  .dash-greeting { display: grid; gap: 6px; }
  .dash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-foreground);
  }
  .dash-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 18%, transparent);
  }
  .dash-eyebrow:empty { display: none; }
  .dash-sub { font-size: 15px; color: var(--muted-foreground); max-width: 60ch; }
  .dash-head-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }

  .dash-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .metric-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; cursor: grab; }
  @media (max-width: 900px) { .metric-stat-row { grid-template-columns: 1fr; } }
  .dash-empty-state { grid-column: 1 / -1; }
  .dash-empty-state .empty { border-color: var(--border); background: var(--card); }

  .dash-card {
    /* Slightly translucent so the rotating background outlines (.geo-bg)
       show through a touch; border stays subtle. Layout untouched. */
    background: color-mix(in oklab, var(--card) 68%, transparent);
    border-color: var(--border);
    transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .dash-card:hover {
    translate: 0 -2px;
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
  }
  .dash-grid > [draggable="true"] { cursor: grab; }
  .dash-grid > [draggable="true"]:active { cursor: grabbing; }
  .dash-grid .dragging {
    opacity: 0.5;
    outline: 2px dashed var(--primary);
    outline-offset: 4px;
    border-radius: var(--radius-xl);
  }
  /* outranks Basecoat's .card[data-size=sm]>header>.card-title (0,3,1) */
  .dash-card[data-size] > header > h3.card-title { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; }
  .dash-card > header > p { font-size: 13px; }
  .card-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: color-mix(in oklab, var(--primary) 14%, transparent);
    color: var(--primary);
  }
  .card-icon svg { width: 20px; height: 20px; }
  .card-icon[data-tone="danger"] { background: color-mix(in oklab, var(--destructive) 14%, transparent); color: var(--destructive); }
  .card-icon[data-tone="success"] { background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); }
  .card-icon[data-tone="warning"] { background: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }

  .dash-card .metric-value {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
  }
  .dash-card .metric-value.loading {
    color: transparent;
    width: 3ch;
    border-radius: 6px;
    background: var(--muted);
    animation: bc-pulse 1.6s ease-in-out infinite;
  }
  .dash-card .metric-subtext { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }
  .dash-scroll { max-height: 320px; overflow: auto; }
  /* Sticky column headers for the scrolling dashboard tables. The legacy
     .table-container is its own scroll box (overflow-x: auto), which would trap
     position: sticky, so inside a dash-scroll it becomes a plain wrapper and the
     dash-scroll handles both scroll axes. Basecoat draws the header rule on
     thead tr, which does not travel with sticky cells, so the th carries its own
     bottom rule via an inset shadow. */
  .dash-scroll .table-container { overflow: visible; }
  .dash-scroll .dash-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card);
    box-shadow: inset 0 -1px 0 var(--border);
  }
  .dash-scroll.loading { min-height: 64px; border-radius: 8px; background: var(--muted); animation: bc-pulse 1.6s ease-in-out infinite; color: transparent; }
  .dash-empty {
    padding: 22px 16px;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
  }
  .dash-table .cell-2 { display: grid; gap: 1px; min-width: 0; }
  .dash-table .cell-2 > :first-child { font-weight: 500; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
  .dash-table .cell-2 > :last-child { font-size: 11px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
  .dash-table td.muted { color: var(--muted-foreground); }
  .dash-table td.nowrap { white-space: nowrap; }
  .dash-table td.mono { font-variant-numeric: tabular-nums; font-size: 12px; }
  .dash-table td.cell-title { font-weight: 500; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-table td.cell-title .link { color: inherit; }
  .dash-table td.cell-title .link:hover { text-decoration: underline; }
  .dash-table td.right, .dash-table th.right { text-align: right; }
  /* Equal-width columns for the Recent Cases / Orders widgets: fixed layout splits
     the table width evenly, every cell is left-aligned, long values truncate with
     an ellipsis (the full value stays in the title attribute where one is set). */
  .dash-table--equal { table-layout: fixed; width: 100%; }
  .dash-table--equal th, .dash-table--equal td { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-table--equal .status-pill, .dash-table--equal .dst-range-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* Identity column (Recent Cases "Title", Orders "Order"): slightly wider than the
     rest so titles / "Client - Service" fit, but not so wide it leaves a gap before
     the second column; the remaining fixed-layout columns split what is left evenly. */
  .dash-table--equal th.wide { width: 22%; }
  /* Basecoat outline button used as a row action. Legacy styles.css .btn adds
     10px block padding; zero it so the xs height (24px) isn't fought. */
  .dash-table .btn.dash-row-action { padding-block: 0; text-decoration: none; }
  .status-pill { text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
  .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .status-pill[data-status="active"], .status-pill[data-status="open"], .status-pill[data-status="paid"],
  .status-pill[data-status="successful"], .status-pill[data-status="converted"] { color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, transparent); }
  .status-pill[data-status="pending"], .status-pill[data-status="new"] { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 40%, transparent); }
  .status-pill[data-status="closed"], .status-pill[data-status="declined"], .status-pill[data-status="lost"],
  .status-pill[data-status="inactive"] { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }

  /* Upcoming Events: one thin full-width row card per event —
     [date chip + time] [event] [case] [location, only when set]. The 3px accent
     stripe and date chip tint key off --evt-accent, set per data-type. */
  .evt-list { display: flex; flex-direction: column; gap: 6px; }
  .evt-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 20px;
    padding: 7px 14px 7px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--evt-accent);
    border-radius: 8px;
    background: var(--card);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .evt-row:hover {
    background: var(--accent);
    border-color: color-mix(in oklab, var(--evt-accent) 40%, var(--border));
    border-left-color: var(--evt-accent);
  }
  .evt-when { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
  .evt-date {
    display: inline-flex; align-items: baseline; gap: 4px;
    min-width: 58px; justify-content: center;
    padding: 2px 8px;
    border: 1px solid color-mix(in oklab, var(--evt-accent) 35%, var(--border));
    border-radius: 6px;
    background: color-mix(in oklab, var(--evt-accent) 10%, var(--muted));
    line-height: 1.2;
  }
  .evt-date .m { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--evt-accent); }
  .evt-date .d { font-size: 13.5px; font-weight: 700; }
  .evt-time { min-width: 140px; font-variant-numeric: tabular-nums; }

  .evt-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .evt-val { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; }
  .evt-val > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .evt-val svg { width: 13px; height: 13px; flex: none; color: var(--muted-foreground); }
  .evt-val.empty { color: var(--muted-foreground); font-style: italic; }

  @media (max-width: 1000px) {
    .evt-row { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; }
    .evt-title { grid-column: 2; }
    .evt-row > .evt-val, .evt-row > span:empty { grid-column: 2; }
    .evt-row > span:empty { display: none; }
  }

  /* Mini calendar lives in a legacy renderer; give any bare buttons a Basecoat feel */
  .calendar-nav button:not(.btn) {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    border-radius: var(--radius-md);
    font-size: 12px;
    cursor: pointer;
  }
  .calendar-nav button:not(.btn):hover { background: var(--accent); }

  /* ---- Month grid: dashboard widget (renderDashboardCalendar) and the Calendar
     page card both carry .bc-cal; the page adds size tweaks under .cal-card. ---- */
  .bc-cal { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .bc-cal .calendar-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 0 12px; border-bottom: 0;
  }
  .bc-cal .dcal-month { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--foreground); }
  .bc-cal .calendar-nav { display: flex; align-items: center; gap: 8px; }
  .bc-cal .calendar-nav .btn[data-size="icon"] { width: 32px; height: 32px; }
  .bc-cal .calendar-nav .btn svg { width: 16px; height: 16px; }
  .bc-cal .calendar-grid { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
  .bc-cal .calendar-day-header {
    padding: 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--muted-foreground); background: var(--muted); border-bottom: 1px solid var(--border);
  }
  .bc-cal .calendar-day {
    min-height: 96px; height: auto; max-height: 132px; padding: 6px;
    background: var(--card); border-color: var(--border);
    transition: background 0.15s ease;
  }
  .bc-cal .calendar-day:hover { background: color-mix(in oklab, var(--accent) 60%, var(--card)); }
  .bc-cal .calendar-day.other-month { background: color-mix(in oklab, var(--muted) 55%, var(--card)); }
  .bc-cal .calendar-day:nth-last-child(-n + 7) { border-bottom: 0; }
  .bc-cal .calendar-day.today { background: color-mix(in oklab, var(--primary) 6%, var(--card)); }
  .bc-cal .calendar-day-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin: 0 0 4px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums;
  }
  .bc-cal .calendar-day.other-month .calendar-day-number { color: var(--muted-foreground); font-weight: 500; }
  .bc-cal .calendar-day.today .calendar-day-number {
    background: var(--primary); color: var(--primary-foreground);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
  }
  .bc-cal .calendar-events-container { margin-top: 0; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
  .bc-cal .calendar-event[data-type] {
    display: flex; align-items: center; gap: 6px;
    margin: 0; padding: 3px 7px 3px 6px;
    border: 0; border-radius: 6px;
    background: color-mix(in oklab, var(--evt-accent) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--evt-accent) 22%, transparent);
    color: var(--foreground);
    font-size: 11.5px; font-weight: 500; line-height: 1.35;
    cursor: pointer; white-space: nowrap; overflow: hidden; opacity: 1;
    transition: background 0.15s ease, box-shadow 0.15s ease, translate 0.15s ease;
  }
  .bc-cal .calendar-event[data-type]::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
    background: var(--evt-accent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--evt-accent) 25%, transparent);
  }
  .bc-cal .calendar-event[data-type] .ce-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .bc-cal .calendar-event[data-type]:hover {
    opacity: 1;
    background: color-mix(in oklab, var(--evt-accent) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--evt-accent) 45%, transparent);
    translate: 0 -1px;
  }
  .bc-cal .calendar-event[data-type]:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
  .bc-cal .calendar-event[data-status="done"] { opacity: 0.55; }
  .bc-cal .calendar-event[data-status="done"]:hover { opacity: 0.8; }
  .bc-cal .calendar-event[data-status="done"] .ce-title { text-decoration: line-through; }
  .bc-cal .calendar-event[data-status="doing"]::before { animation: bc-pulse 1.6s ease-in-out infinite; }

  /* ---- Dashboard event detail dialog (openDashboardEventDialog) ---- */
  .dash-evd > article {
    display: flex; flex-direction: column;
    max-width: 580px; padding: 0; gap: 0; overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in oklab, var(--evt-accent) 25%, transparent);
  }
  .dash-evd > article::before {
    content: ""; display: block; flex: none; height: 4px;
    background: linear-gradient(90deg, var(--evt-accent), color-mix(in oklab, var(--evt-accent) 30%, transparent));
  }
  .dash-evd > article > header { flex: none; padding: 20px 60px 0 24px; gap: 10px; }
  .dash-evd > article > header > h2 {
    font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
    color: var(--foreground); overflow-wrap: anywhere;
  }
  .dash-evd > article > button[aria-label="Close"] { top: 16px; inset-inline-end: 16px; width: 32px; height: 32px; color: var(--muted-foreground); opacity: 1; }
  .dash-evd > article > button[aria-label="Close"] svg { width: 16px !important; height: 16px !important; }
  .dash-evd > article > section { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 24px 6px; display: grid; gap: 14px; align-content: start; }
  .dash-evd > article > footer { flex: none; padding: 14px 24px 20px; gap: 8px; flex-direction: row; justify-content: flex-end; }
  .dash-evd footer .btn svg { width: 14px; height: 14px; }

  .evd-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .evd-type {
    gap: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; font-size: 10.5px;
    color: var(--evt-accent);
    border-color: color-mix(in oklab, var(--evt-accent) 40%, var(--border));
    background: color-mix(in oklab, var(--evt-accent) 10%, transparent);
  }
  .evd-type .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--evt-accent); }
  .evd-status { color: var(--muted-foreground); font-weight: 600; }
  .evd-status[data-status="doing"] { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 40%, var(--border)); background: color-mix(in oklab, var(--warning) 10%, transparent); }
  .evd-status[data-status="done"] { color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, var(--border)); background: color-mix(in oklab, var(--success) 10%, transparent); }
  .evd-rel { font-weight: 600; }
  .dash-evd[data-past="true"] .evd-rel { color: var(--muted-foreground); }

  .evd-when {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--evt-accent) 22%, var(--border));
    background: color-mix(in oklab, var(--evt-accent) 6%, var(--muted));
  }
  .evd-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 58px; padding: 6px 8px; border-radius: 10px; line-height: 1;
    background: var(--card); border: 1px solid color-mix(in oklab, var(--evt-accent) 35%, var(--border));
  }
  .evd-date .w { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--evt-accent); }
  .evd-date .d { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
  .evd-date .m { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
  .evd-when-text { display: grid; gap: 4px; min-width: 0; }
  .evd-when-text strong { font-size: 14.5px; font-weight: 600; color: var(--foreground); }
  .evd-time { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .evd-time svg { width: 14px; height: 14px; flex: none; }
  .evd-dur { padding: 1px 7px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--foreground); }

  .evd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
  .evd-item {
    display: grid; grid-template-rows: auto 1fr auto; gap: 6px; min-width: 0;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  }
  .evd-item dt { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
  .evd-item dt svg { width: 13px; height: 13px; flex: none; }
  .evd-item dt em { font-style: normal; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--muted); color: var(--foreground); font-size: 10px; line-height: 16px; }
  .evd-item dd { margin: 0; display: grid; gap: 2px; align-content: start; font-size: 13.5px; color: var(--foreground); min-width: 0; overflow-wrap: anywhere; }
  .evd-item dd strong { font-weight: 600; }
  .evd-item dd small { font-size: 12px; color: var(--muted-foreground); }
  .evd-item .evd-link { justify-self: start; margin-top: 2px; gap: 5px; }
  .evd-item .evd-link svg { width: 12px !important; height: 12px !important; }
  .evd-person { display: flex; align-items: center; gap: 10px; }
  .evd-person-text { display: grid; gap: 1px; min-width: 0; }
  .evd-avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: color-mix(in oklab, var(--evt-accent) 18%, var(--muted)); color: var(--evt-accent);
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  }
  .evd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .evd-attendee { height: 26px; padding-inline: 6px 10px; gap: 6px; font-weight: 500; }
  .evd-attendee .evd-avatar { width: 18px; height: 18px; font-size: 8.5px; }
  .evd-mini { height: 18px; font-size: 10px; margin-left: 6px; vertical-align: middle; }
  .evd-empty { margin: 0; padding: 10px 0; text-align: center; font-size: 13px; color: var(--muted-foreground); }
  .evd-notes { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--border); background: var(--muted); }
  .evd-notes-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
  .evd-notes-label svg { width: 13px; height: 13px; }
  .evd-notes p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--foreground); white-space: pre-wrap; }
  @media (max-width: 600px) {
    .evd-grid { grid-template-columns: 1fr; }
    .dash-evd > article > header { padding-inline: 18px 52px; }
    .dash-evd > article > section, .dash-evd > article > footer { padding-inline: 18px; }
  }

  /* Customize drawer */
  .drawer.cz[data-side="right"] > article { width: 360px; max-width: 100vw; }
  .cz > article > header { border-bottom: 1px solid var(--border); }
  .cz > article > footer { flex-direction: row; justify-content: flex-end; border-top: 1px solid var(--border); }
  .cz > article > section { padding: 14px 14px 18px; }
  .cz-hint { font-size: 12px; color: var(--muted-foreground); padding: 0 2px 10px; }

  /* Summary row: "N of M shown" + Show all / Hide all */
  .cz-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 12px; font-size: 12px; color: var(--muted-foreground); }
  .cz-count strong { color: var(--foreground); font-weight: 700; }
  .cz-actions { display: inline-flex; align-items: center; gap: 8px; }
  .cz-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer; }
  .cz-link:hover { text-decoration: underline; }
  .cz-link:disabled { color: var(--muted-foreground); cursor: default; text-decoration: none; opacity: 0.6; }
  .cz-sep { color: var(--border); }

  /* Groups */
  .cz-group { display: flex; flex-direction: column; gap: 6px; }
  .cz-group + .cz-group { margin-top: 18px; }
  .cz-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); padding: 0 2px 4px; }

  /* Checkbox rows — the whole row is the label, so anywhere on it toggles */
  .cz-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--card);
    cursor: pointer; user-select: none;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
  }
  .cz-item:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: color-mix(in oklab, var(--primary) 4%, var(--card)); }
  .cz-item.is-on { border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); background: color-mix(in oklab, var(--primary) 8%, var(--card)); }
  .cz-item:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent); }
  .cz .cz-item > input.input[type="checkbox"]:not([role="switch"]) { width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 1.5px solid var(--input); background: var(--background); cursor: pointer; }
  .cz .cz-item > input.input[type="checkbox"]:not([role="switch"]):checked { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
  .cz-item-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--muted-foreground); transition: color .12s ease, background-color .12s ease; }
  .cz-item-icon svg { width: 16px; height: 16px; }
  .cz-item.is-on .cz-item-icon { background: color-mix(in oklab, var(--primary) 16%, transparent); color: var(--primary); }
  .cz-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .cz-item-title { font-size: 13px; font-weight: 600; color: var(--foreground); line-height: 1.3; }
  .cz-item:not(.is-on) .cz-item-title { color: var(--muted-foreground); font-weight: 500; }
  .cz-item-sub { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Entrance motion */
  @media (prefers-reduced-motion: no-preference) {
    .dash-grid > * { animation: bc-rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .dash-grid > *:nth-child(2) { animation-delay: 0.05s; }
    .dash-grid > *:nth-child(3) { animation-delay: 0.1s; }
    .dash-grid > *:nth-child(4) { animation-delay: 0.15s; }
    .dash-grid > *:nth-child(5) { animation-delay: 0.2s; }
    .dash-grid > *:nth-child(n + 6) { animation-delay: 0.25s; }
    .dash-head { animation: bc-fade 0.3s ease both; }
    /* Cards reveal when their data lands (dashboard.js revealWidget), not with
       the grid. .is-revealing is removed on animationend so no fill-mode
       translate lingers to block the hover lift. */
    .dash-grid > .dash-card { animation: none; }
    .dash-card.is-revealing { animation: bc-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  }
  .dash-card:not(.is-ready) { opacity: 0; }
  @keyframes bc-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
  @keyframes bc-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bc-pulse { 50% { opacity: 0.55; } }
  @keyframes bc-pop { from { scale: 0.6; } to { scale: 1; } }
  @keyframes bc-ping { 0% { scale: 1; opacity: 0.55; } 70%, 100% { scale: 2.1; opacity: 0; } }
}

/* =====================================================================
   Calendar page (pages/calendar.html + modules/features/calendar.js)
   The page root is `.calendar-page.bc`. Month grid shares `.bc-cal` with the
   dashboard widget (above); Due Dates reuse the `.evt-row` cards; the event
   detail dialog is the dashboard's `.dash-evd` with an action footer.
   ===================================================================== */
@scope (.bc) {
  /* Legacy styles.css .btn adds 10px block padding that fights Basecoat's fixed heights */
  .calendar-page .btn, .dash-evd .btn { padding-block: 0; }

  /* ---- Header ---- */
  .cal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .cal-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .cal-title { font-size: 30px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; color: var(--foreground); }
  .cal-head-actions { display: flex; align-items: center; gap: 8px; }
  .cal-head-actions .btn svg { width: 16px; height: 16px; }

  /* ---- Toolbar: segmented tabs on the left, client filter on the right ----
     The tabs carry .mt-tabs and pick up the Matters segmented-control styling
     (track, pill, hover, dark mode) from the "Matters page" section below; the
     selected-pill rule there is written to match .mt-tabs.cal-tabs too. Only the
     toolbar layout is calendar-specific. */
  .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .cal-toolbar .cal-tabs.mt-tabs { margin-bottom: 0; }

  .cal-filters { display: flex; align-items: center; gap: 10px; }
  .cal-filter-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .cal-filter-client { width: 300px; }
  /* Opaque input: the shared SearchableDropdown skin below is transparent and lets the
     page background show through. Mirrors the Matters filter controls. */
  .cal-filters .searchable-dropdown .dropdown-search { background-color: var(--card); }
  .cal-filters .searchable-dropdown .dropdown-search:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  /* Client filter options as cards: avatar + name, email underneath */
  .cal-filters .searchable-dropdown .dropdown-menu { width: 100%; min-width: 0; }
  .cal-filters .searchable-dropdown .dropdown-items { padding: 6px; display: grid; gap: 4px; justify-items: stretch; }
  .cal-filters .searchable-dropdown .dropdown-item.client-opt {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 10px;
    text-align: left; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .cal-filters .searchable-dropdown .dropdown-item.client-opt:hover { background: var(--accent); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  .cal-filters .searchable-dropdown .dropdown-item.client-opt.selected { background: color-mix(in oklab, var(--primary) 10%, var(--card)); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); color: var(--foreground); }
  .client-opt-avatar { flex: none; width: 30px; height: 30px; font-size: 11px; background: color-mix(in oklab, var(--primary) 18%, var(--muted)); color: var(--primary); }
  .client-opt-text { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; justify-items: start; text-align: left; }
  .client-opt-name { max-width: 100%; font-size: 13px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .client-opt-meta { max-width: 100%; font-size: 11.5px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cal-filters .btn svg { width: 14px; height: 14px; }

  /* SearchableDropdown (shared legacy component) dressed as a Basecoat input.
     Basecoat has its own `.dropdown-menu` component that would otherwise make
     the menu position:relative. */
  .searchable-dropdown { z-index: auto; }
  .searchable-dropdown.is-open { z-index: 60; }
  .searchable-dropdown .dropdown-search {
    height: 36px; min-height: 0; padding: 0 36px 0 12px;
    font-size: 13px; color: var(--foreground); background: transparent;
    border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .searchable-dropdown .dropdown-search::placeholder { color: var(--muted-foreground); }
  .searchable-dropdown .dropdown-search:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  /* Size the chevron here instead of relying on the width+height attributes
     SearchableDropdown emits inline. Pages that hand-write this markup (the
     Contacts filter panels) omitted them, and an unsized inline SVG falls back
     to its 300x150 default — a giant chevron painted across the field. Only the
     box is set: `top` stays auto so the icon keeps using its static position,
     which is what vertically centres it on every other page. */
  .searchable-dropdown .dropdown-arrow { width: 12px; height: 12px; color: var(--muted-foreground); }
  /* The clear "x" is NOT a bare icon like the chevron — SearchableDropdown emits
     it as a <button> wrapping its own 14px <svg>. Sizing the button to 12px the
     same way left that glyph overflowing a 4px content box, so the padding
     pushed the x 5px down and right instead of centring it — the misalignment
     that showed as soon as a value was picked and the button appeared.

     Centring has to come from the box, not from `display`: the widget sets
     `clearBtn.style.display = "block"` inline when it reveals the button (see
     select() in common/searchable_dropdown.js), and an inline style beats any
     rule here, so `inline-flex` would be dead code. Instead the box is sized so
     block layout lands the icon dead centre on its own — 20px box, 4px padding
     (from the .mt-filters / .blm rules below), 12px icon, nothing left over. */
  .searchable-dropdown .dropdown-clear { width: 20px; height: 20px; color: var(--muted-foreground); }
  .searchable-dropdown .dropdown-clear > svg { width: 12px; height: 12px; }
  .searchable-dropdown .dropdown-clear:hover { color: var(--foreground); }
  .searchable-dropdown .dropdown-menu {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 60;
    background: var(--popover); color: var(--popover-foreground);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); overflow: hidden;
  }
  .searchable-dropdown .dropdown-items { padding: 4px; }
  .searchable-dropdown .dropdown-item { padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--foreground); }
  .searchable-dropdown .dropdown-item:hover { background: var(--accent); }
  .searchable-dropdown .dropdown-item.selected { background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); }
  .searchable-dropdown .dropdown-item-empty { color: var(--muted-foreground); font-size: 12.5px; }

  /* ---- Cards (Schedule / Due Dates) ---- */
  .cal-card { padding: 0; gap: 0; border-radius: 14px; }
  .cal-card > header.calendar-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 0;
  }
  .cal-card > header > .dcal-month { font-size: 20px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
  .cal-card-heading { display: grid; gap: 3px; }
  .cal-card-sub { font-size: 12.5px; color: var(--muted-foreground); }

  /* Month grid: bigger cells than the dashboard widget, time prefix on chips */
  .cal-card.bc-cal .calendar-grid { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--card); }
  .cal-card.bc-cal .calendar-day-header { padding: 10px 6px; font-size: 11.5px; }
  .cal-card.bc-cal .calendar-day { min-height: 128px; max-height: 220px; height: auto; padding: 8px; }
  .cal-card.bc-cal .calendar-day-number { width: 26px; height: 26px; font-size: 12.5px; margin-bottom: 6px; }
  .cal-card.bc-cal .calendar-events-container { gap: 4px; }
  .cal-card.bc-cal .calendar-event[data-type] { font-size: 12px; padding: 4px 8px 4px 7px; gap: 7px; }
  .cal-card.bc-cal .calendar-event .ce-time {
    flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums; color: var(--evt-accent);
  }
  .cal-card > footer.cal-legend {
    display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 18px;
    border-top: 1px solid var(--border); background: var(--muted);
    font-size: 11.5px; color: var(--muted-foreground);
  }
  .cal-legend-item { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; letter-spacing: 0.02em; }
  .cal-legend-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--evt-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--evt-accent) 25%, transparent); }

  /* ---- Due Dates: one card per day, on a muted backdrop so blocks read as separate ---- */
  .dd-list {
    display: flex; flex-direction: column; gap: 14px;
    padding: 16px 18px 18px; border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 55%, var(--card));
  }
  .dd-group {
    padding: 0; overflow: hidden;
    border: 1px solid var(--border); border-radius: 12px; background: var(--card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  .dd-group[data-today="true"] {
    border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  .dd-day {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--muted);
  }
  .dd-group[data-today="true"] .dd-day { background: color-mix(in oklab, var(--primary) 8%, var(--card)); }
  .dd-day-name { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foreground); }
  .dd-day-date { font-size: 12.5px; color: var(--muted-foreground); }
  .dd-rel { height: 18px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .dd-day-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .dd-group .evt-list { padding: 10px; gap: 8px; }
  .dd-row { grid-template-columns: max-content minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) max-content; cursor: pointer; }
  .dd-row:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
  .dd-row .evt-time { min-width: 150px; }
  .dd-row[data-status="done"] .evt-title { text-decoration: line-through; opacity: 0.7; }
  .dd-status { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); }
  .dd-status[data-status="doing"] { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 40%, var(--border)); background: color-mix(in oklab, var(--warning) 10%, transparent); }
  .dd-status[data-status="done"] { color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, var(--border)); background: color-mix(in oklab, var(--success) 10%, transparent); }
  .dd-empty { padding: 40px 20px; }
  .dd-empty .empty figure svg { width: 22px; height: 22px; }
  @media (max-width: 1000px) {
    .dd-row { grid-template-columns: max-content minmax(0, 1fr); }
    .dd-row > .dd-status { grid-column: 2; justify-self: start; }
  }

  /* ---- Event detail dialog: Calendar-page action footer ---- */
  .dash-evd > article > footer.evd-actions {
    justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border);
  }
  .evd-spacer { flex: 1; }
  .evd-delete { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 35%, var(--border)); }
  .evd-delete:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
  .evd-hl { position: relative; }
  .evd-hl-menu {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5;
    min-width: 214px; padding: 10px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--popover); color: var(--popover-foreground);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  }
  .evd-hl-title { margin-bottom: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .evd-hl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .evd-hl-swatch {
    --swatch: var(--muted);
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 2px solid transparent; border-radius: 8px; background: var(--swatch);
    color: var(--muted-foreground); cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .evd-hl-swatch svg { width: 14px; height: 14px; }
  .evd-hl-swatch[data-color=""] { border-color: var(--border); }
  .evd-hl-swatch:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
  .evd-hl-swatch.selected { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--foreground); }

  /* ---- Create / edit event dialog (.evm) ---- */
  .evm > form {
    display: flex; flex-direction: column;
    width: calc(100% - 32px); max-width: 1220px; padding: 0; gap: 0; overflow: hidden;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--card); color: var(--card-foreground);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  .evm > form::before {
    content: ""; display: block; flex: none; height: 4px;
    background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 30%, transparent));
  }
  .evm > form > header { flex: none; padding: 20px 64px 0 24px; gap: 4px; }
  .evm > form > header > h2.evm-title { font-size: 21px; font-weight: 900; letter-spacing: 0.05em; line-height: 1.15; text-transform: uppercase; color: var(--foreground); }
  .evm-subtitle { font-size: 13px; color: var(--muted-foreground); }
  .evm > form > button[aria-label="Close"] { top: 18px; inset-inline-end: 16px; width: 32px; height: 32px; color: var(--muted-foreground); opacity: 1; }
  .evm > form > button[aria-label="Close"] svg { width: 16px !important; height: 16px !important; }
  .evm-body {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 18px 24px 8px;
    display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start;
  }
  .evm-main, .evm-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .evm-side { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--muted); }
  .evm .field { gap: 6px; }
  .evm .label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .evm .evm-switch, .evm .evm-team-grid .label { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--foreground); cursor: pointer; }
  .evm .evm-switch { gap: 8px; }
  .evm-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .evm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .evm-team-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
    padding: 10px 12px; border: 1px solid var(--input); border-radius: var(--radius-md);
  }
  .evm-team-grid .label { gap: 8px; }
  .evm .select { width: 100%; }

  /* Event type picker: outline chips tinted by type accent when active */
  .evm .field > .evm-types { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; width: 100%; }
  .evm-types .event-type-btn { flex: 1 1 auto; min-width: 0; height: 32px; padding-inline: 8px; gap: 6px; font-size: 12px; letter-spacing: 0.02em; color: var(--foreground); overflow: hidden; }
  @media (max-width: 1100px) { .evm .field > .evm-types { flex-wrap: wrap; } .evm-types .event-type-btn { flex: 0 1 auto; } }
  .evm-types .event-type-btn .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--evt-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--evt-accent) 25%, transparent); }
  .evm-types .event-type-btn:hover { color: var(--foreground); border-color: color-mix(in oklab, var(--evt-accent) 45%, var(--border)); background: color-mix(in oklab, var(--evt-accent) 8%, transparent); }
  .evm-types .event-type-btn.active {
    color: var(--evt-accent);
    border-color: color-mix(in oklab, var(--evt-accent) 55%, var(--border));
    background: color-mix(in oklab, var(--evt-accent) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--evt-accent) 35%, transparent);
  }

  /* Case reference options as cards */
  .evm .searchable-dropdown .dropdown-items { padding: 6px; display: grid; gap: 4px; }
  .evm .searchable-dropdown .dropdown-item.case-opt {
    display: grid; gap: 3px; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--card);
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .evm .searchable-dropdown .dropdown-item.case-opt:hover { background: var(--accent); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  .evm .searchable-dropdown .dropdown-item.case-opt.selected { background: color-mix(in oklab, var(--primary) 10%, var(--card)); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); color: var(--foreground); }
  .evm .searchable-dropdown .dropdown-item.case-opt--none { background: var(--muted); border-style: dashed; }
  .case-opt-title { font-size: 13px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .case-opt-meta { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; font-size: 11.5px; color: var(--muted-foreground); }
  .case-opt-meta > span:not(.badge) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .case-opt-meta svg { width: 12px; height: 12px; flex: none; }
  .case-opt-type { flex: none; margin: 0; height: 18px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }

  /* Attendees: pill input */
  .evm-attendees {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-height: 36px; padding: 4px 6px;
    border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .evm-attendees:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .evm-attendees .attendees-pills { display: contents; }
  .evm-attendees input {
    flex: 1 1 120px; min-width: 100px; height: 26px; padding: 0 4px;
    border: 0; outline: 0; background: transparent; color: var(--foreground);
    font: inherit; font-size: 13px;
  }
  .evm-attendees input::placeholder { color: var(--muted-foreground); }
  .evm-attendees .attendee-pill { height: 24px; padding: 0 4px 0 3px; gap: 6px; font-size: 12px; color: var(--foreground); }
  .evm-attendees .attendee-pill .evd-avatar { width: 18px; height: 18px; font-size: 8.5px; background: color-mix(in oklab, var(--primary) 18%, var(--muted)); color: var(--primary); }
  .evm-attendees .remove-attendee {
    all: unset; display: inline-grid; place-items: center; width: 18px; height: 18px;
    border-radius: 50%; font-size: 14px; line-height: 1; color: var(--muted-foreground); cursor: pointer;
  }
  .evm-attendees .remove-attendee:hover { background: var(--accent); color: var(--foreground); }
  .evm-hint { font-size: 11.5px; color: var(--muted-foreground); }

  /* Date picker (legacy .mini-calendar renderer). styles.css also ships a shared
     .mini-cal-* component that outlines every cell — reset it here. */
  .evm .field > .evm-minical { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); width: 100%; }
  .evm-minical .mini-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .evm-minical .mini-cal-title { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--foreground); }
  .evm-minical .mini-cal-prev, .evm-minical .mini-cal-next { width: 28px; height: 28px; color: var(--muted-foreground); }
  .evm-minical .mini-cal-prev svg, .evm-minical .mini-cal-next svg { width: 15px; height: 15px; }
  .evm-minical .mini-calendar-weekdays, .evm-minical .mini-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
  .evm-minical .mini-calendar-weekdays { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .evm-minical .mini-calendar-weekdays span { padding: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted-foreground); }
  .evm-minical .mini-cal-day {
    display: flex; align-items: center; justify-content: center;
    height: 36px; min-height: 0; aspect-ratio: auto; padding: 0; margin: 0;
    border: 0; outline: 0; box-shadow: none; background: transparent;
    border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--foreground);
    font-variant-numeric: tabular-nums; cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .evm-minical .mini-cal-day.empty { cursor: default; background: transparent; border: 0; box-shadow: none; }
  .evm-minical .mini-cal-day:hover:not(.empty) { background: var(--accent); color: var(--foreground); }
  .evm-minical .mini-cal-day.today { color: var(--primary); font-weight: 800; background: color-mix(in oklab, var(--primary) 10%, transparent); box-shadow: none; }
  .evm-minical .mini-cal-day.selected, .evm-minical .mini-cal-day.today.selected {
    outline: 0; background: var(--primary); color: var(--primary-foreground); font-weight: 800;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
  }

  /* Time: Start / End rows, each a button that opens a 3-column picker popover */
  .evm-time { display: grid; gap: 8px; }
  .evm-time-box { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
  .evm-time-k { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .evm-tp { position: relative; min-width: 0; }
  .evm-tp-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; height: 40px; padding: 0 10px 0 12px;
    border: 1px solid var(--input); border-radius: var(--radius-md);
    background: var(--card); color: var(--foreground);
    font: inherit; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .evm-tp-btn:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  .evm-tp-btn:focus-visible, .evm-tp[data-open] .evm-tp-btn { outline: 0; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .evm-tp-btn svg { width: 14px; height: 14px; flex: none; color: var(--muted-foreground); transition: rotate 0.15s ease; }
  .evm-tp[data-open] .evm-tp-btn svg { rotate: 180deg; }
  .evm-tp-pop {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
    height: 212px; padding: 6px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--popover); color: var(--popover-foreground);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  }
  .evm-tp-col {
    display: grid; gap: 2px; align-content: start; min-width: 0;
    overflow-y: auto; overflow-x: hidden; padding-right: 3px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .evm-tp-col::-webkit-scrollbar { width: 5px; }
  .evm-tp-col::-webkit-scrollbar-track { background: transparent; }
  .evm-tp-col::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
  .evm-tp-col::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
  .evm-tp-col + .evm-tp-col { border-left: 1px solid var(--border); padding-left: 4px; }
  .evm-tp-opt {
    all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    height: 30px; border-radius: 7px;
    font: inherit; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground);
    cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
  }
  .evm-tp-opt:hover { background: var(--accent); }
  .evm-tp-opt:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
  .evm-tp-opt[aria-selected="true"] { background: var(--primary); color: var(--primary-foreground); font-weight: 700; }
  .evm-tp-col--ap .evm-tp-opt { font-size: 12px; letter-spacing: 0.06em; }
  .evm-tp.is-disabled { opacity: 0.5; }
  .evm-tp.is-disabled .evm-tp-btn { cursor: not-allowed; }
  .evm-durations { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
  .evm-durations-k { margin-right: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .evm-dur { padding-inline: 8px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--card); }
  .evm-dur:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
  .evm-dur.active { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); background: color-mix(in oklab, var(--primary) 12%, var(--card)); }
  .evm-dur:disabled { opacity: 0.45; }
  .evm-allday { margin-top: 10px; }
  .evm-summary {
    display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border));
    background: color-mix(in oklab, var(--primary) 7%, var(--card));
  }
  .evm-summary-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
  .evm-summary strong { font-size: 14px; font-weight: 700; color: var(--foreground); }
  .evm-summary-time { font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

  .evm > form > footer { flex: none; flex-direction: row; justify-content: flex-end; gap: 8px; margin-top: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--border); }
  .evm > form > footer .btn svg { width: 14px; height: 14px; }
  @media (max-width: 860px) {
    .evm-body { grid-template-columns: 1fr; }
    .evm-two-col { grid-template-columns: 1fr; }
  }

  /* ---- Delete confirmation (alert-dialog) ---- */
  .cal-del > article {
    max-width: 440px; padding: 22px 24px 20px; gap: 18px;
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  .alert-dialog.cal-del > article > header { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 4px 14px; align-items: start; text-align: start; }
  .cal-del-icon {
    grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; margin: 0;
    border-radius: 12px; background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive);
  }
  .cal-del-icon svg { width: 20px; height: 20px; }
  .cal-del h2 { font-size: 17px; font-weight: 700; color: var(--foreground); }
  .cal-del p { font-size: 13.5px; line-height: 1.55; color: var(--muted-foreground); }
  .cal-del p strong { font-weight: 600; color: var(--foreground); }
  .cal-del > article > footer { flex-direction: row; justify-content: flex-end; gap: 8px; }
  .cal-del > article > footer .btn svg { width: 14px; height: 14px; }
}

/* =====================================================================
   Matters page (pages/matters.html) — Cases / Orders / CaseCheck
   ---------------------------------------------------------------------
   Same house style as the Calendar page: uppercase display title, Basecoat
   line tabs, one results card per tab with a header (title + tools), a quick-
   filter pill bar, the table, and a pagination footer. Element ids are owned
   by cases.js / orders.js / casecheckTab.js; only presentation lives here.
   The legacy modals further down matters.html sit outside the `.bc` root.

   Scope note: the `.bc` root is a bare wrapper ABOVE #matters-page. Chromium
   won't match the scope root as an ancestor compound inside @scope, so the
   `.matters-page …` / `#matters-page …` rules below rely on that wrapper.
   ===================================================================== */
/* The shell wraps every page fragment in .main-content (index.html), which adds
   32px of side padding on top of #page-content's 24px. Matters is table-heavy, so
   drop the wrapper's side padding here and let the 24px content gutter do the job.
   Outside @scope: .main-content sits above the .bc root. */
.main-content:has(> .matters-scope) { padding-inline: 0; }

/* Matters tabs in dark mode: the muted track vanishes against the black base, and
   the light-mode glow reads harsh. Give the track a real surface + border and use a
   deeper, flatter blue for the selected pill. Outside @scope: html[data-theme] is
   above the .bc root. */
html[data-theme="dark"] .mt-tabs > [role="tablist"] {
  background: #111214;
  border-color: #2e2e2e;
}
html[data-theme="dark"] .mt-tabs > [role="tablist"] > [role="tab"] { color: #9aa0a6; }
html[data-theme="dark"] .mt-tabs > [role="tablist"] > [role="tab"] svg { color: #9aa0a6; }
html[data-theme="dark"] .mt-tabs > [role="tablist"] > [role="tab"]:hover { color: #e6e6e6; background: #1b1d21; }
html[data-theme="dark"] .mt-tabs > [role="tablist"] > [role="tab"]:hover svg { color: #e6e6e6; }
/* Selected pill: Basecoat's dark variant
   `.tabs>[role=tablist]:not([data-variant=line])>[role=tab][aria-selected=true]:is(html.dark *)`
   weighs (0,6,1), so this override spells out .tabs and :not() to reach (0,7,1). */
html[data-theme="dark"] .tabs.mt-tabs > [role="tablist"]:not([data-variant="line"]) > [role="tab"][aria-selected="true"] {
  --tab-accent: #2f6fed;
  color: #fff; background: var(--tab-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .tabs.mt-tabs > [role="tablist"]:not([data-variant="line"]) > [role="tab"][aria-selected="true"]:hover { background: #3a7bf5; }
html[data-theme="dark"] .mt-tabs > [role="tablist"] > [role="tab"][aria-selected="true"] svg,
html[data-theme="dark"] .mt-tabs > [role="tablist"] > [role="tab"][aria-selected="true"]:hover svg { color: #fff; }
html[data-theme="dark"] .mt-tabs [role="tab"] .mt-tab-count { border-color: #3a3d42; color: #9aa0a6; }
html[data-theme="dark"] .mt-tabs [role="tab"]:hover .mt-tab-count { color: #e6e6e6; border-color: #4a4e55; }
html[data-theme="dark"] .mt-tabs [role="tab"][aria-selected="true"] .mt-tab-count,
html[data-theme="dark"] .mt-tabs [role="tab"][aria-selected="true"]:hover .mt-tab-count { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); color: #fff; }

@scope (.bc) {
  /* Full width like the dashboard / calendar pages: the 1440px cap left wide
     side gaps around the tables on large monitors. */
  .matters-page, .billing-page, .cashier-page, .contacts-page,
  .vault-page, .revenue-page, .tickets-page,
  .ra-automator-page, .intakes-page, .documents-page,
  .dlv-page { width: 100%; max-width: none; margin: 0; }
  /* Legacy styles.css .btn adds 10px block padding that fights Basecoat's fixed heights */
  :is(.matters-page, .billing-page, .cashier-page, .contacts-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page, .dlv-page) .btn { padding-block: 0; }
  :is(.matters-page, .billing-page, .cashier-page, .contacts-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page, .dlv-page) .btn svg { width: 15px; height: 15px; }

  /* ---- Header ---- */
  .mt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  .mt-title { font-size: 30px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; color: var(--foreground); }
  .mt-sub { margin-top: 6px; font-size: 13px; color: var(--muted-foreground); }
  .mt-head-actions { display: flex; align-items: center; gap: 8px; }
  .mt-head-actions .btn svg { width: 16px; height: 16px; }

  /* ---- Tabs ---- */
  /* ---- Tabs: segmented control with a per-tab accent ----
     The tablist is a rounded muted track; the selected tab is a solid brand-blue
     pill (--tab-accent) with white text, icon and count. Dark-mode overrides live
     just above the @scope block (html[data-theme] sits outside the .bc root). */
  .mt-tabs { margin-bottom: 20px; }
  .mt-tabs > [role="tablist"] {
    /* Basecoat forces display:flex on the tablist; size to content so the track hugs the tabs. */
    width: max-content; max-width: 100%; height: auto; gap: 4px; padding: 4px;
    border: 1px solid var(--border); border-radius: 12px;
    background: color-mix(in oklab, var(--muted) 75%, transparent);
  }
  .mt-tabs > [role="tablist"] > [role="tab"] {
    --tab-accent: var(--primary);
    position: relative; height: 38px; padding: 0 14px 0 12px; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted-foreground); background: transparent; border: 0; border-radius: 9px;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }
  /* One accent (brand blue) for all three tabs; --tab-accent stays as the single hook. */
  .mt-tabs > [role="tablist"] > [role="tab"] svg { width: 16px; height: 16px; color: var(--muted-foreground); transition: color 0.15s ease; }
  .mt-tabs > [role="tablist"] > [role="tab"]:hover { color: var(--foreground); background: color-mix(in oklab, var(--card) 60%, transparent); }
  .mt-tabs > [role="tablist"] > [role="tab"]:hover svg { color: var(--tab-accent); }
  /* Selected: solid accent fill with white text so the chosen tab is unmistakable.
     The :is() keeps (0,5,0) specificity to out-rank Basecoat's own
     [role=tablist]:not([data-variant=line]) > [role=tab][aria-selected=true] rule;
     .mt-tabs.cal-tabs is the Calendar page reusing this control. */
  :is(.matters-page .mt-tabs, .billing-page .mt-tabs, .cashier-page .mt-tabs, .contacts-page .mt-tabs, .tickets-page .mt-tabs, .mt-tabs.cal-tabs) > [role="tablist"] > [role="tab"][aria-selected="true"] {
    color: #fff; background: var(--tab-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px color-mix(in oklab, var(--tab-accent) 35%, transparent);
  }
  :is(.matters-page .mt-tabs, .billing-page .mt-tabs, .cashier-page .mt-tabs, .contacts-page .mt-tabs, .tickets-page .mt-tabs, .mt-tabs.cal-tabs) > [role="tablist"] > [role="tab"][aria-selected="true"]:hover { color: #fff; background: color-mix(in oklab, var(--tab-accent) 90%, #000); }
  .mt-tabs > [role="tablist"] > [role="tab"][aria-selected="true"] svg,
  .mt-tabs > [role="tablist"] > [role="tab"][aria-selected="true"]:hover svg { color: #fff; }
  .mt-tabs > [role="tablist"] > [role="tab"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

  /* Count pill: outline-only when idle, filled with the tab's accent when selected. */
  .mt-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  [role="tab"][aria-selected="true"] .mt-tab-count {
    background: color-mix(in oklab, var(--primary) 14%, transparent);
    color: var(--primary); border-color: color-mix(in oklab, var(--primary) 35%, transparent);
  }
  .mt-tabs [role="tab"] .mt-tab-count { background: transparent; color: var(--muted-foreground); border-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent); }
  .mt-tabs [role="tab"]:hover .mt-tab-count { color: var(--foreground); border-color: color-mix(in oklab, var(--tab-accent) 45%, transparent); }
  .mt-tabs [role="tab"][aria-selected="true"] .mt-tab-count,
  .mt-tabs [role="tab"][aria-selected="true"]:hover .mt-tab-count { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: rgba(255, 255, 255, 0.45); }

  /* ---- Form controls shared by the filter panels and toolbars ---- */
  :is(.matters-page, .billing-page, .cashier-page, .contacts-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page, .dlv-page) .input, :is(.matters-page, .billing-page, .cashier-page, .contacts-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page, .dlv-page) select.select {
    height: 36px; min-height: 0; width: 100%; padding: 0 12px; margin: 0;
    font: inherit; font-size: 13px; color: var(--foreground);
    background-color: transparent; border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  /* Native select keeps a chevron; legacy styles.css draws one at "right 14px"
     for 40px padding, so redraw it to match the 36px control. */
  :is(.matters-page, .billing-page, .cashier-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page) select.select {
    padding-right: 32px; background-color: var(--card); appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23808080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  }
  :is(.matters-page, .billing-page, .cashier-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page) .input::placeholder { color: var(--muted-foreground); }
  :is(.matters-page, .billing-page, .cashier-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page) .input:focus, :is(.matters-page, .billing-page, .cashier-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page) select.select:focus {
    border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
  :is(.matters-page, .billing-page, .cashier-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page) .input:disabled, :is(.matters-page, .billing-page, .cashier-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page) select.select:disabled { opacity: 0.5; cursor: not-allowed; }
  :is(.matters-page, .billing-page, .cashier-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page) input[type="date"].input { padding-right: 8px; color-scheme: inherit; }
  .mt-label {
    display: block; margin-bottom: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground);
  }
  /* Date-range trigger (shared range picker) matched to the inputs */
  :is(.matters-page, .billing-page, .cashier-page, .contacts-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page, .dlv-page) .drp-trigger {
    height: 36px; padding: 0 12px; gap: 8px; font-size: 13px; color: var(--foreground);
    background: transparent; border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  :is(.matters-page, .billing-page, .cashier-page, .contacts-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page, .dlv-page) .drp-trigger:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  :is(.matters-page, .billing-page, .cashier-page, .contacts-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page, .dlv-page) .drp-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); outline: none; }
  :is(.matters-page, .billing-page, .cashier-page, .contacts-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page, .dlv-page) .drp-trigger svg { width: 15px; height: 15px; color: var(--muted-foreground); }
  .matters-page .drp-trigger:not(.has-selection) #cases-date-label,
  .matters-page .drp-trigger:not(.has-selection) #orders-date-label,
  .billing-page .drp-trigger:not(.has-selection) > span,
  .revenue-page .drp-trigger:not(.has-selection) > span,
  .contacts-page .drp-trigger:not(.has-selection) > span { color: var(--muted-foreground); }

  /* ---- Slide-down filter panel ---- */
  /* Keep the panel above the results card but well under the app header (500):
     legacy styles.css gives #cases-filters-card / #orders-filters-card z 50 and
     .tracker-filters-panel z 100, so the id-level overrides are needed too. */
  .mt-filters-host, #matters-page #cases-filters-card, #matters-page #orders-filters-card { position: relative; z-index: 10; }
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #vault-page, #revenue-page, #tickets-page, #ra-automator-page, #intakes-page, #documents-page) .tracker-filters-panel { z-index: 1; }
  .mt-filters {
    padding: 0; margin-bottom: 16px;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .mt-filters[hidden] { padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-color: transparent; background: transparent; box-shadow: none; }
  .mt-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 18px; align-items: end; padding: 18px 20px 20px; }
  .mt-field { min-width: 0; }
  .mt-field--wide { grid-column: span 2; }
  .mt-field .searchable-dropdown, .mt-field > div[id$="-dropdown-container"] { width: 100%; }
  .mt-filters .searchable-dropdown .dropdown-search { cursor: pointer; }
  .mt-filters .dropdown-menu.mt-menu { max-height: 260px; overflow-y: auto; }
  .mt-filters .filter-lock-hint { color: var(--muted-foreground); }
  .mt-filters-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
  .mt-filters-actions .btn svg { width: 13px; height: 13px; }
  .mt-filters-actions .btn[data-size="sm"] { height: 30px; font-size: 11.5px; }

  /* ---- Results card ---- */
  .mt-card { padding: 0; margin: 0; gap: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
  .mt-card > header.mt-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
    padding: 14px 20px;
  }
  .mt-card-heading { display: grid; gap: 3px; min-width: 0; }
  .mt-card-title { font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--foreground); }
  .mt-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
  .mt-tools .btn[hidden] { display: none; }
  .mt-tools .btn { height: 36px; padding-inline: 12px; }
  .mt-tools .btn[data-variant="outline"] { background: var(--card); }
  /* Filters toggle reads as "on" while its panel is open */
  .mt-tools .tracker-filters-toggle.is-open {
    color: var(--primary); border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
  }
  .mt-search { position: relative; display: inline-flex; align-items: center; width: 260px; max-width: 100%; }
  .mt-search > svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--muted-foreground); pointer-events: none; }
  .mt-search > .input { padding-left: 34px; background: var(--card); }

  /* ---- Quick-filter pill bar ---- */
  .mt-pills { padding: 10px 20px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 45%, transparent); }
  .mt-pills .order-pills__bar { gap: 8px; }
  .mt-pills .order-pills__row { gap: 6px; }
  .mt-pills .order-pills__gap { width: 6px; }
  .mt-pills .order-pills__row--sub { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
  .mt-pills .order-pill {
    height: 30px; padding: 0 14px; gap: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
    color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .mt-pills .order-pill:hover { color: var(--foreground); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: var(--accent); }
  .mt-pills .order-pill:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .mt-pills .order-pill.is-active { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
  .mt-pills .order-pill.is-active[data-pill="all"] { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
  .mt-pills .order-pill.is-active[data-pill="active"] { background: var(--success); border-color: var(--success); }
  .mt-pills .order-pill.is-active[data-pill="inactive"] { background: var(--destructive); border-color: var(--destructive); }
  .mt-pills .order-pill.is-active[data-pill="casecheck"] { background: var(--warning); border-color: var(--warning); }
  .mt-pills .order-pill--sub { height: 26px; padding: 0 11px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; }
  .mt-pills .order-pill--sub.is-active {
    color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, var(--card));
    border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); box-shadow: none;
  }

  /* ---- Table ---- */
  .mt-table-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
  .mt-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .mt-table thead { position: static; background: transparent; }
  .mt-table thead th {
    padding: 11px 14px; background: color-mix(in oklab, var(--muted) 60%, transparent);
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
    color: var(--muted-foreground); border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .mt-table tbody td {
    padding: 11px 14px; font-size: 13.5px; line-height: 1.3; color: var(--text-secondary);
    border-bottom: 1px solid var(--border); vertical-align: middle; max-width: 240px;
  }
  .mt-table thead th:first-child, .mt-table tbody td:first-child, .mt-table tfoot td:first-child { padding-left: 20px; }
  .mt-table thead th:last-child, .mt-table tbody td:last-child, .mt-table tfoot td:last-child { padding-right: 20px; }
  .mt-table tbody tr:last-child td { border-bottom: 0; }
  .mt-table tbody tr[onclick] { cursor: pointer; }
  .mt-table tbody tr:hover td { background: color-mix(in oklab, var(--primary) 5%, transparent); }
  .mt-table tbody tr.order-row--locked td { background: color-mix(in oklab, var(--warning) 5%, transparent); }
  .mt-table tbody tr.order-row--locked:hover td { background: color-mix(in oklab, var(--warning) 9%, transparent); }
  /* Identity column (Title on Cases, Client name on Orders / CaseCheck) reads first */
  .mt-table tbody td:nth-child(4) { color: var(--foreground); font-weight: 600; }
  .mt-table tbody td:nth-child(4) .link { color: var(--foreground); }
  .mt-table tbody td:nth-child(4) .link:hover { color: var(--primary); }
  .mt-table th.mt-col-title { min-width: 260px; }
  .mt-table .link { text-decoration: none; }
  .mt-table .link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mt-table .orders-col-lock { width: 28px; padding-right: 0; }
  .mt-table .orders-col-lock + th, .mt-table .orders-col-lock + td { padding-left: 8px; }
  /* Numbers line up */
  .mt-table td:nth-child(2), #orders-table :is(th, td):nth-child(3), #casecheck-table :is(th, td):nth-child(3) { font-variant-numeric: tabular-nums; }
  #orders-table :is(th, td):nth-child(7), #orders-table :is(th, td):nth-child(8),
  #orders-table :is(th, td):nth-child(11), #orders-table :is(th, td):nth-child(13),
  #casecheck-table :is(th, td):nth-child(8), #casecheck-table :is(th, td):nth-child(9) { text-align: right; font-variant-numeric: tabular-nums; }
  #orders-table tbody td:nth-child(7), #orders-table tbody td:nth-child(8) { color: var(--foreground); font-weight: 600; }
  .mt-th-sort { cursor: pointer; user-select: none; }
  .mt-th-sort:hover { color: var(--foreground); }
  .mt-sort-icon { margin-left: 4px; opacity: 0.5; }
  /* Totals row */
  .mt-table tfoot.mt-tfoot td { padding: 11px 14px; border-top: 2px solid var(--border); background: color-mix(in oklab, var(--muted) 60%, transparent); font-size: 13.5px; font-weight: 700; color: var(--foreground); }
  .mt-table tfoot.mt-tfoot .mt-tfoot-label { text-align: right; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .mt-table tfoot.mt-tfoot .mt-tfoot-money { text-align: right; font-variant-numeric: tabular-nums; }
  /* Status chips: same voice as the dashboard's .status-pill */
  .mt-table .status-badge {
    padding: 3px 9px; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap; border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
  }
  .mt-table .dst-range-pill { font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 999px; }
  .mt-table .cc-count { font-size: 12px; }

  /* ---- Pagination footer ---- */
  .mt-card > footer.mt-pagination {
    display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
    padding: 10px 20px; border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 45%, transparent);
    font-size: 12.5px; color: var(--muted-foreground);
  }
  .mt-pg-info { font-variant-numeric: tabular-nums; }
  .mt-pg-jump { display: flex; align-items: center; gap: 8px; }
  .mt-pg-jump .input { width: 56px; height: 30px; padding: 0 6px; text-align: center; background: var(--card); }
  .mt-pg-nav { display: flex; align-items: center; gap: 6px; }
  .mt-pagination .btn[data-size="sm"] { height: 30px; font-size: 11.5px; }
  .mt-pagination .btn svg { width: 13px; height: 13px; }
  /* Orders tab: shared renderStandardPagination() markup (page numbers + rows-per-page) */
  .mt-pagination--std.std-pagination-bar { padding: 10px 20px; margin: 0; border-top: 1px solid var(--border); }
  .mt-pagination--std .pagination-page {
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--radius-md);
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--muted-foreground); background: transparent; border: 1px solid transparent; cursor: pointer;
  }
  .mt-pagination--std .pagination-page:hover:not(:disabled) { color: var(--foreground); background: var(--accent); }
  .mt-pagination--std .pagination-page.active { color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); border-color: color-mix(in oklab, var(--primary) 35%, transparent); }
}

/* ---- Matters page: filter panel chrome + multi-select menus ---- */
@scope (.bc) {
  /* Header strip: eyebrow on the left, Reset / Apply on the right */
  .mt-filters-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 45%, transparent);
    border-radius: 14px 14px 0 0;
  }
  .mt-filters-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foreground);
  }
  .mt-filters-icon {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
    background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary);
  }
  .mt-filters-icon svg { width: 13px; height: 13px; }

  /* Trigger inputs: open state rings like a focused input, chevron flips,
     and a chosen value reads darker/bolder than the "All …" placeholder. */
  .mt-filters .searchable-dropdown .dropdown-search { padding-right: 34px; }
  .mt-filters .searchable-dropdown .dropdown-search:focus { cursor: pointer; }
  .mt-filters .searchable-dropdown .dropdown-search:not(:placeholder-shown) { color: var(--foreground); font-weight: 600; }
  .mt-filters .searchable-dropdown.is-open .dropdown-search {
    border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
  .mt-filters .searchable-dropdown .dropdown-arrow { right: 12px; transition: transform 0.18s ease, color 0.15s ease; }
  .mt-filters .searchable-dropdown.is-open .dropdown-arrow { transform: rotate(180deg); color: var(--primary); }

  /* Menu shell — positioned fixed under its trigger by cases.js */
  .mt-filters .dropdown-menu.mt-menu {
    margin-top: 2px; padding: 0; max-height: none; overflow: hidden;
    border-radius: 12px; border: 1px solid var(--border);
    background: var(--popover); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .mtd-search {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-bottom: 1px solid var(--border); background: var(--popover);
  }
  .mtd-search > svg { flex: none; width: 14px; height: 14px; color: var(--muted-foreground); }
  .mtd-search-inp {
    flex: 1; min-width: 0; height: 32px; padding: 0; margin: 0;
    font: inherit; font-size: 13px; color: var(--foreground);
    background: transparent; border: 0; outline: none; box-shadow: none;
  }
  .mtd-search-inp::placeholder { color: var(--muted-foreground); }
  .mtd-list {
    display: grid; gap: 2px; padding: 6px; max-height: 252px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .mtd-item {
    display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px;
    border-radius: 8px; font-size: 13px; color: var(--foreground); cursor: pointer; user-select: none;
    transition: background-color 0.12s ease;
  }
  .mtd-item:hover { background: var(--accent); }
  .mtd-item.is-selected { background: color-mix(in oklab, var(--primary) 10%, transparent); }
  .mtd-item.is-selected:hover { background: color-mix(in oklab, var(--primary) 16%, transparent); }
  .mtd-item.is-selected .mtd-label { font-weight: 600; }
  .mtd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtd-chk {
    flex: none; display: grid; place-items: center; width: 16px; height: 16px;
    border: 1.5px solid var(--input); border-radius: 5px; background: var(--card); color: transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  .mtd-chk svg { width: 10px; height: 10px; }
  .mtd-item:hover .mtd-chk { border-color: color-mix(in oklab, var(--primary) 55%, var(--input)); }
  .mtd-item.is-selected .mtd-chk { background: var(--primary); border-color: var(--primary); color: #fff; }
  /* Leads: status dot, state code chip, client avatar */
  .mtd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 12%, transparent); color: var(--muted-foreground); }
  .mtd-dot[data-status="open"] { background: var(--success); color: var(--success); }
  .mtd-dot[data-status="in_progress"] { background: var(--primary); color: var(--primary); }
  .mtd-dot[data-status="pending"] { background: var(--warning); color: var(--warning); }
  .mtd-dot[data-status="closed"] { background: var(--destructive); color: var(--destructive); }
  .mtd-code {
    flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px;
    border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border);
  }
  .mtd-item.is-selected .mtd-code { background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); border-color: color-mix(in oklab, var(--primary) 35%, transparent); }
  .mtd-avatar {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
    background: color-mix(in oklab, var(--primary) 16%, var(--muted)); color: var(--primary);
  }
  .mtd-empty { padding: 16px 10px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
  .mtd-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px;
    border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 45%, transparent);
    font-size: 11.5px; color: var(--muted-foreground);
  }
  .mtd-count { font-variant-numeric: tabular-nums; }
  .mtd-clear {
    height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary);
  }
  .mtd-clear:hover { background: color-mix(in oklab, var(--primary) 12%, transparent); }
}

/* Cases filter panel: all six fields on one row when there is room. Case ID
   needs the least width, the date range the most; below ~1100px the shared
   auto-fill grid takes over and the date range spans two cells again. */
@scope (.bc) {
  @media (min-width: 1100px) {
    #cases-filters-panel .mt-filters-grid {
      grid-template-columns: minmax(0, 0.7fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr);
    }
    #cases-filters-panel .mt-field--wide { grid-column: auto; }
    #cases-filters-panel .drp-trigger { white-space: nowrap; overflow: hidden; }
    #cases-filters-panel .drp-trigger > span { overflow: hidden; text-overflow: ellipsis; }
  }
}

/* Filter panels: one surface for every control. Basecoat tints `.input` in
   dark mode via `.input:is(html.dark *)` (0,2,1), which outranked the earlier
   `.matters-page .input` rule and left Case ID / Date range a different shade
   from the Status / Client triggers (which are `.dropdown-search`, untinted).
   Basecoat's rule is a long :is() list whose specificity lands near (0,4,4), so
   these selectors carry the page id to win in both themes for all four control types. */
@scope (.bc) {
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters .input,
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters select.select,
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters .drp-trigger,
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters .searchable-dropdown .dropdown-search {
    background-color: var(--card);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--foreground);
    font-size: 13px;
    height: 36px;
  }
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters .input:hover,
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters select.select:hover,
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters .drp-trigger:hover,
  #matters-page .mt-filters .searchable-dropdown .dropdown-search:hover {
    border-color: color-mix(in oklab, var(--primary) 45%, var(--input));
  }
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters .input:focus,
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters select.select:focus,
  :is(#matters-page, #billing-page, #cashier-page, #contacts-page, #ra-automator-page, #intakes-page, #documents-page) .mt-filters .drp-trigger:focus-visible,
  #matters-page .mt-filters .searchable-dropdown.is-open .dropdown-search {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
  /* Reset / Apply live in the header strip as real buttons */
  .mt-filters-actions .btn[data-variant="outline"] { background: var(--card); }
}

/* ---- Matters filter panels: SearchableDropdown menus (Orders / CaseCheck)
   dressed like the Cases tab's hand-built menus (.mtd-*). Multi-select roots
   get a leading checkbox drawn with ::before; single-select (enhanced native
   <select>s) show a trailing check instead. ---- */
@scope (.bc) {
  .select-enhancer { width: 100%; }
  .mt-filters .searchable-dropdown[data-searchable="false"] .dropdown-search { cursor: pointer; caret-color: transparent; }
  .mt-filters .searchable-dropdown[data-multiple="true"] .dropdown-search { padding-right: 58px; }
  .mt-filters .searchable-dropdown .dropdown-clear { right: 32px; padding: 4px; border-radius: 6px; }
  .mt-filters .searchable-dropdown .dropdown-clear:hover { background: var(--accent); color: var(--foreground); }
  .mt-filters .searchable-dropdown.disabled .dropdown-search { opacity: 0.55; cursor: not-allowed; }

  .mt-filters .searchable-dropdown .dropdown-menu {
    margin-top: 6px; padding: 0; border-radius: 12px; border: 1px solid var(--border);
    background: var(--popover); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
    overflow: hidden;
  }
  .mt-filters .searchable-dropdown .dropdown-items {
    display: grid; gap: 2px; padding: 6px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .mt-filters .searchable-dropdown .dropdown-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    min-height: 34px; padding: 6px 10px; border-radius: 8px;
    font-size: 13px; color: var(--foreground); cursor: pointer; user-select: none;
    transition: background-color 0.12s ease;
  }
  .mt-filters .searchable-dropdown .dropdown-item:hover { background: var(--accent); }
  .mt-filters .searchable-dropdown .dropdown-item.selected { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--foreground); }
  .mt-filters .searchable-dropdown .dropdown-item.selected:hover { background: color-mix(in oklab, var(--primary) 16%, transparent); }
  .mt-filters .searchable-dropdown .dropdown-item.selected .dropdown-item-label,
  .mt-filters .searchable-dropdown .dropdown-item.selected .client-opt-name { font-weight: 600; }
  .mt-filters .searchable-dropdown .dropdown-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Multi-select: checkbox on the left, no trailing check */
  .mt-filters .searchable-dropdown[data-multiple="true"] .dropdown-item::before {
    content: ""; flex: none; width: 16px; height: 16px; border-radius: 5px;
    border: 1.5px solid var(--input); background: var(--card);
    transition: background-color 0.12s ease, border-color 0.12s ease;
  }
  .mt-filters .searchable-dropdown[data-multiple="true"] .dropdown-item:hover::before { border-color: color-mix(in oklab, var(--primary) 55%, var(--input)); }
  .mt-filters .searchable-dropdown[data-multiple="true"] .dropdown-item.selected::before {
    border-color: var(--primary); background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 10px;
  }
  .mt-filters .searchable-dropdown[data-multiple="true"] .dropdown-item-check { display: none; }
  /* Single-select: trailing primary check */
  .mt-filters .searchable-dropdown[data-multiple="false"] .dropdown-item-check { margin-left: auto; width: 14px; height: 14px; color: var(--primary); flex: none; }
  /* Client rows reuse the Calendar card-option text stack */
  .mt-filters .searchable-dropdown .dropdown-item.client-opt .client-opt-text { flex: 1; }
  .mt-filters .searchable-dropdown .dropdown-item-empty { padding: 16px 10px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
  .mt-filters .searchable-dropdown .dropdown-group-header {
    margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--border);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground);
  }
  .mt-filters .searchable-dropdown .dropdown-group-header:first-child { margin-top: 0; border-top: 0; }
}

/* ---- Matters filter panels: dp-single (Orders "Due date") dressed to match
   the date-range trigger and the dropdown menus. Positioning/z-index stay
   with the legacy .dp-* rules in styles.css; only the look changes here. ---- */
@scope (.bc) {
  .mt-filters .dp-wrap { width: 100%; }
  #matters-page .mt-filters .dp-trigger {
    height: 36px; padding: 0 12px; gap: 8px; line-height: 1;
    font-size: 13px; color: var(--foreground);
    background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  #matters-page .mt-filters .dp-trigger:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
  #matters-page .mt-filters .dp-trigger.is-open,
  #matters-page .mt-filters .dp-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .mt-filters .dp-trigger__icon { width: 15px; height: 15px; color: var(--muted-foreground); }
  .mt-filters .dp-trigger.is-open .dp-trigger__icon { color: var(--primary); }
  .mt-filters .dp-trigger.is-placeholder .dp-trigger__label { color: var(--muted-foreground); }
  .mt-filters .dp-trigger:not(.is-placeholder) .dp-trigger__label { font-weight: 600; }

  .mt-filters .dp-popover {
    width: 304px; padding: 14px 14px 12px;
    background: var(--popover); color: var(--popover-foreground);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .mt-filters .dp-cal-title { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--foreground); }
  .mt-filters .dp-nav { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); }
  .mt-filters .dp-nav:hover { background: var(--accent); color: var(--foreground); }
  .mt-filters .dp-dow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .mt-filters .dp-day { border-radius: 8px; font-size: 12.5px; color: var(--foreground); }
  .mt-filters .dp-day:hover { background: var(--accent); }
  .mt-filters .dp-day--other { color: color-mix(in oklab, var(--muted-foreground) 55%, transparent); }
  .mt-filters .dp-day--today { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent); color: var(--primary); font-weight: 700; }
  .mt-filters .dp-day--selected, .mt-filters .dp-day--selected:hover { background: var(--primary); color: #fff; box-shadow: none; }
  .mt-filters .dp-footer { padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--border); }
  .mt-filters .dp-status { font-size: 12px; color: var(--foreground); }
  .mt-filters .dp-status.is-empty { color: var(--muted-foreground); }
  .mt-filters .dp-btn {
    height: 30px; padding: 0 12px; border-radius: var(--radius-md);
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid var(--border); background: var(--card); color: var(--foreground);
  }
  .mt-filters .dp-btn:hover { background: var(--accent); border-color: var(--border); color: var(--foreground); }
  .mt-filters .dp-btn--apply { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
  .mt-filters .dp-btn--apply:hover { background: color-mix(in oklab, var(--primary) 88%, #000); border-color: color-mix(in oklab, var(--primary) 88%, #000); color: var(--primary-foreground); }
}

/* ---- Toasts (#toaster inside #shell-dialogs, driven by core/bc_toast.js).
   Basecoat ships the stack/transition rules; category colour, typography and
   the popover-style card are ours. Bottom-right, above modals. ---- */
@scope (.bc) {
  .toaster { z-index: 10100; padding: 24px; gap: 12px; max-width: 460px; }
  /* bc_toast.js runs the toaster as a manual popover (top layer, above drawers and
     modal dialogs). Undo the UA popover box so the Basecoat bottom-right stack survives. */
  .toaster[popover] { inset: auto; bottom: 0; right: 0; margin: 0; border: 0; height: auto; overflow: visible; background: transparent; color: inherit; }
  .toaster[popover]:not(:popover-open) { display: flex; }
  /* Legacy styles.css has its own `.toast` (slide-in card: translateX(120%),
     opacity 0 until `.show`, its own padding/border/min-width). Neutralise it
     so Basecoat's grid/transition toast is what renders. */
  .toaster .toast {
    display: grid; align-items: stretch; gap: 0; padding: 0; margin: 0;
    min-width: 0; max-width: none; width: 100%;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    transform: none; opacity: 1;
    transition-property: grid-template-rows, opacity;
  }
  .toaster .toast[aria-hidden="true"] { opacity: 0; }
  .toaster .toast .toast-content {
    gap: 14px; padding: 16px 18px;
    background: var(--popover); color: var(--popover-foreground);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .toaster .toast .toast-content > svg { width: 26px; height: 26px; stroke-width: 2.25; }
  .toaster .toast[data-category="success"] .toast-content > svg { color: var(--success); }
  .toaster .toast[data-category="error"] .toast-content > svg { color: var(--destructive); }
  .toaster .toast[data-category="warning"] .toast-content > svg { color: var(--warning); }
  .toaster .toast[data-category="info"] .toast-content > svg { color: var(--primary); }
  .toaster .toast .toast-content section { display: grid; gap: 3px; min-width: 0; }
  .toaster .toast .toast-content section h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; color: var(--foreground); }
  .toaster .toast .toast-content section p { font-size: 13.5px; line-height: 1.45; color: var(--muted-foreground); word-break: normal; overflow-wrap: anywhere; }
  .toaster .toast .toast-content footer .btn { height: 30px; padding-inline: 12px; font-size: 11.5px; }
}

/* =====================================================================
   New Case dialog (.ncm) — pages/matters.html, opened from the Matters
   header. Same shell as the Calendar's event dialog: accent bar, uppercase
   title, main column + muted side panel, footer actions.
   ===================================================================== */
@scope (.bc) {
  /* overflow stays visible on the dialog, form and body so the client /
     attorney menus can spill past the footer and the dialog edge (the dialog
     is in the top layer, so nothing else can sit above them). The form only
     becomes a scroller on short viewports. */
  .ncm { overflow: visible; }
  .ncm > form {
    display: flex; flex-direction: column;
    width: calc(100% - 32px); max-width: 980px; padding: 0; gap: 0; overflow: visible;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--card); color: var(--card-foreground);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  .ncm > form::before {
    content: ""; display: block; flex: none; height: 4px; border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 30%, transparent));
  }
  .ncm > form > header { flex: none; padding: 20px 64px 0 24px; gap: 4px; }
  .ncm > form > header > h2.ncm-title { font-size: 21px; font-weight: 900; letter-spacing: 0.05em; line-height: 1.15; text-transform: uppercase; color: var(--foreground); }
  .ncm-subtitle { font-size: 13px; color: var(--muted-foreground); }
  .ncm > form > button[aria-label="Close"] { top: 18px; inset-inline-end: 16px; width: 32px; height: 32px; color: var(--muted-foreground); opacity: 1; }
  .ncm > form > button[aria-label="Close"] svg { width: 16px !important; height: 16px !important; }
  .ncm-body {
    flex: 1 1 auto; min-height: 0; overflow: visible;
    padding: 18px 24px 8px;
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start;
  }
  @media (max-height: 720px) { .ncm > form { max-height: calc(100vh - 32px); overflow: hidden; } .ncm-body { overflow: auto; } }
  @media (max-width: 860px) { .ncm-body { grid-template-columns: 1fr; } }
  .ncm-main, .ncm-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .ncm-side { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--muted); }
  .ncm .field { gap: 6px; }
  .ncm .label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .ncm-req { color: var(--destructive); font-weight: 800; }
  .ncm-opt { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted-foreground); opacity: 0.8; }
  .ncm-hint { font-size: 11.5px; line-height: 1.4; color: var(--muted-foreground); }
  .ncm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 640px) { .ncm-two-col { grid-template-columns: 1fr; } }
  .ncm .input, .ncm .textarea { width: 100%; font-size: 13.5px; }
  .ncm .textarea { min-height: 96px; resize: vertical; }
  .ncm > form > footer { flex: none; padding: 14px 24px 18px; gap: 8px; border-top: 1px solid var(--border); flex-direction: row; justify-content: flex-end; }
  .ncm > form > footer .btn svg { width: 15px; height: 15px; }

  /* Locked law firm card */
  .ncm-firm {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  }
  .ncm-firm-icon {
    flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
    background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary);
  }
  .ncm-firm-icon svg { width: 18px; height: 18px; }
  .ncm-firm-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .ncm-firm-text strong { font-size: 13.5px; font-weight: 700; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ncm-firm-text small { font-size: 11.5px; line-height: 1.35; color: var(--muted-foreground); }
  .ncm-firm-lock { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted-foreground); background: var(--muted); }
  .ncm-firm-lock svg { width: 12px; height: 12px; }

  /* Case type chips: single-select toggle buttons.
     Basecoat's own `.field > [role="group"]:not(.field)` (0,3,0) turns any
     grouped control inside a .field into a full-width column with a
     calc(var(--spacing) * 7) = 28px gap. That's right for a stack of
     checkboxes, wrong for pills — so the wrapper is selected at (0,4,0) here
     to win regardless of sheet order, and width / direction are set back. */
  .ncm .field > [role="group"].ncm-chips {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%;
  }
  .ncm-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 9px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--foreground);
    font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }
  .ncm-chip svg { width: 14px; height: 14px; color: var(--muted-foreground); transition: color 0.15s ease; }
  .ncm-chip:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: var(--accent); }
  .ncm-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .ncm-chip[aria-pressed="true"] {
    background: color-mix(in oklab, var(--primary) 12%, var(--card)); border-color: var(--primary); color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent);
  }
  .ncm-chip[aria-pressed="true"] svg { color: var(--primary); }

  /* Status: one row of four radio cards with the status dot. Same Basecoat
     `.field > [role="radiogroup"]` 28px-gap override as the chips above. Drops
     to two columns once the drawer is narrow enough that four would truncate. */
  .ncm .field > [role="radiogroup"].ncm-status {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%;
  }
  @media (max-width: 720px) {
    .ncm .field > [role="radiogroup"].ncm-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .ncm-status-opt {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 10px; text-align: left;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--foreground);
    font: inherit; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .ncm-status-opt:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); background: var(--accent); }
  .ncm-status-opt:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .ncm-status-opt[aria-checked="true"] {
    border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, var(--card));
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent);
  }
  .ncm-status-opt .mtd-dot { flex: none; margin-left: 0; }
  .ncm-status-text { display: grid; gap: 1px; min-width: 0; }
  .ncm-status-text strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ncm-status-text small { font-size: 11px; color: var(--muted-foreground); }
  .ncm-status-opt[aria-checked="true"] .ncm-status-text strong { color: var(--primary); }

  /* Client / attorney pickers: card rows like the Calendar client filter */
  .ncm .searchable-dropdown { z-index: auto; }
  .ncm .searchable-dropdown.is-open { z-index: 100; }
  .ncm .searchable-dropdown .dropdown-menu { z-index: 100; border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12); }
  .ncm .searchable-dropdown .dropdown-items { padding: 6px; display: grid; gap: 4px; max-height: 240px; }
  .ncm .searchable-dropdown .dropdown-item.client-opt {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 10px;
    text-align: left; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .ncm .searchable-dropdown .dropdown-item.client-opt:hover { background: var(--accent); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  .ncm .searchable-dropdown .dropdown-item.client-opt.selected { background: color-mix(in oklab, var(--primary) 10%, var(--card)); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); color: var(--foreground); }
  .ncm .searchable-dropdown .dropdown-item.client-opt .mtd-avatar { width: 30px; height: 30px; font-size: 11px; }
  .ncm .searchable-dropdown .dropdown-item-empty { padding: 14px 10px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
  .ncm .searchable-dropdown .dropdown-search:not(:placeholder-shown) { color: var(--foreground); font-weight: 600; }
}

/* =====================================================================
   Case detail (.cdm) — pages/matters.html #case-detail-modal
   A legacy .modal-overlay (so the order-detail / file-preview / PDF overlays
   it opens can stack above it) whose card is Basecoat-styled. The overlay is
   the `.bc` root; everything below is inside it.
   ===================================================================== */
/* Under the legacy overlays it opens (all z 1000+), above the page (header 30). */
#case-detail-modal.modal-overlay { z-index: 950; padding: 24px; }

@scope (.bc) {
  .cdm {
    position: relative; display: flex; flex-direction: column;
    width: min(1120px, 100%); height: min(88vh, 900px);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    background: var(--card); color: var(--card-foreground);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  .cdm::before {
    content: ""; display: block; flex: none; height: 4px;
    background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 30%, transparent));
  }
  .cdm .btn { padding-block: 0; }

  /* ---- Header ---- */
  .cdm-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--border); }
  .cdm-head-text { min-width: 0; display: grid; gap: 4px; }
  .cdm-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
  .cdm-eyebrow-sep { opacity: 0.5; }
  .cdm-title { font-size: 21px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.15; text-transform: uppercase; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cdm-head-actions { flex: none; display: flex; align-items: center; gap: 10px; }
  .cdm .status-badge { padding: 4px 10px; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; border: 1px solid color-mix(in oklab, currentColor 30%, transparent); }

  /* ---- Body: scrolls as one column ---- */
  .cdm-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 24px 24px; display: grid; gap: 18px; align-content: start; }

  /* ---- Information card ---- */
  .cdm-info { border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--muted) 22%, transparent); }
  .cdm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--border); }
  .cdm-section-title { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foreground); }
  .cdm-section-actions { display: flex; gap: 6px; }
  .cdm-section-actions .btn svg { width: 13px; height: 13px; }
  .cdm-info-view { display: grid; gap: 12px; padding: 14px 18px 18px; }
  /* Two fact rows so every fact keeps its cell whether the card is viewing or editing:
     hero = Client (large) · Law firm; row = Attorney · Case type · Status · Case number · Opened. */
  .cdm-facts { display: grid; gap: 12px; margin: 0; align-items: stretch; }
  .cdm-facts--hero { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); }
  .cdm-facts--row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cdm-fact { min-width: 0; display: grid; gap: 4px; align-content: start; }
  /* Inside the Information card every fact (and the notes block) is a small tile — same
     border / radius / card surface as the order drawer's .odm-field tiles — sitting on the
     card's muted tint. Scoped to .cdm-info-view so .cdm-facts--compact elsewhere is untouched. */
  .cdm-info-view .cdm-fact, .cdm-info-view .cdm-notes { padding: 11px 14px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
  .cdm-info-view .cdm-fact:hover, .cdm-info-view .cdm-notes:hover { border-color: color-mix(in oklab, var(--foreground) 14%, var(--border)); }
  .cdm-info-view .cdm-fact dd { min-height: 30px; }
  .cdm-info-view .cdm-fact--client, .cdm-info-view .cdm-fact--firm { padding: 14px 16px; }
  .cdm-fact dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  /* Value cell matches the 34px control height so swapping in an input doesn't move the row. */
  .cdm-fact dd { margin: 0; min-height: 34px; display: flex; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cdm-fact--client dd { align-items: flex-start; gap: 14px; white-space: normal; }
  .cdm-fact--client .mtd-avatar { width: 52px; height: 52px; font-size: 17px; flex: none; border-radius: 14px; }
  .cdm-fact--firm dd { font-size: 15px; font-weight: 700; min-height: 52px; white-space: normal; line-height: 1.3; }
  .cdm-info-view .cdm-fact--firm dd { min-height: 52px; }
  .cdm-fact-text { display: grid; gap: 2px; min-width: 0; }
  .cdm-fact-text strong { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cdm-fact-text small { font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cdm-fact-text small.cdm-fact-address { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
  .cdm-fact-text small.is-muted { font-style: italic; opacity: 0.8; }
  /* The card sits in a 60vw drawer, so 5 columns need roughly a 1240px viewport. */
  @media (max-width: 1240px) {
    .cdm-facts--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .cdm-facts--hero { grid-template-columns: minmax(0, 1fr); }
    .cdm-facts--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .cdm-notes { display: grid; gap: 6px; }
  .cdm-notes-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .cdm-notes-text { font-size: 13.5px; line-height: 1.55; color: var(--foreground); white-space: pre-wrap; }
  .cdm-notes-text.is-empty { color: var(--muted-foreground); font-style: italic; }

  /* ---- In-place editing of the facts (type / status / number / attorney / notes) ---- */
  .cdm .input, .cdm .textarea { width: 100%; font-size: 13.5px; background: var(--card); }
  .cdm-fact-edit[hidden] { display: none; }
  .cdm-info.is-editing .cdm-fact--editable > dd, .cdm-info.is-editing .cdm-notes-text { display: none; }
  .cdm-info.is-editing .cdm-fact--editable > dt, .cdm-info.is-editing .cdm-notes-label { color: var(--primary); }
  .cdm-info.is-editing .cdm-info-view .cdm-fact--editable, .cdm-info.is-editing .cdm-info-view .cdm-notes { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); background: color-mix(in oklab, var(--primary) 3%, var(--card)); }
  .cdm-info.is-editing .cdm-info-view .cdm-fact:not(.cdm-fact--editable) { opacity: 0.85; }
  .cdm-fact-edit .input, .cdm-fact-edit .searchable-dropdown .dropdown-search { height: 34px; font-size: 13px; }
  .cdm-fact-edit .textarea { min-height: 88px; resize: vertical; }
  .cdm-fact-edit .searchable-dropdown[data-searchable="false"] .dropdown-search { cursor: pointer; caret-color: transparent; }
  .cdm-fact-edit .searchable-dropdown .dropdown-search:not(:placeholder-shown) { color: var(--foreground); font-weight: 600; }
  .cdm-fact-edit .searchable-dropdown .dropdown-menu { z-index: 60; border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12); }
  .cdm-fact-edit .searchable-dropdown .dropdown-items { padding: 6px; display: grid; gap: 3px; max-height: 240px; }
  .cdm-fact-edit .searchable-dropdown .dropdown-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--foreground); }
  .cdm-fact-edit .searchable-dropdown .dropdown-item:hover { background: var(--accent); }
  .cdm-fact-edit .searchable-dropdown .dropdown-item.selected { background: color-mix(in oklab, var(--primary) 10%, transparent); }
  .cdm-fact-edit .searchable-dropdown .dropdown-item.selected .dropdown-item-label, .cdm-fact-edit .searchable-dropdown .dropdown-item.selected .client-opt-name { font-weight: 600; }
  .cdm-fact-edit .searchable-dropdown .dropdown-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cdm-fact-edit .searchable-dropdown .dropdown-item-check { margin-left: auto; width: 14px; height: 14px; color: var(--primary); flex: none; }
  .cdm-fact-edit .searchable-dropdown .dropdown-item.client-opt .mtd-avatar { width: 28px; height: 28px; font-size: 10.5px; }
  .cdm-fact-edit .searchable-dropdown .dropdown-item-empty { padding: 14px 10px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
  /* Editing keeps the same grid — the control simply takes the <dd>'s cell. */
  .cdm-fact-edit { min-width: 0; }
  .cdm-fact-edit .searchable-dropdown { width: 100%; }

  /* ---- Tabs ---- */
  .cdm-tabs { border-bottom: 1px solid var(--border); }
  .cdm-tabs > [role="tablist"] { height: auto; gap: 4px; padding: 0; margin-bottom: -1px; }
  .cdm-tabs > [role="tablist"] > [role="tab"] {
    height: 42px; padding: 0 14px 0 12px; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted-foreground); border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .cdm-tabs > [role="tablist"] > [role="tab"] svg { width: 15px; height: 15px; }
  .cdm-tabs > [role="tablist"][data-variant="line"] > [role="tab"]:hover { color: var(--foreground); background: color-mix(in oklab, var(--accent) 70%, transparent); }
  .cdm-tabs > [role="tablist"][data-variant="line"] > [role="tab"][aria-selected="true"] { color: var(--primary); background: transparent; }
  .cdm-tabs > [role="tablist"][data-variant="line"][aria-orientation="horizontal"] > [role="tab"]::after { background: var(--primary); height: 3px; bottom: 0; border-radius: 3px 3px 0 0; }

  /* ---- Tab panels ---- */
  .cdm-panel { display: grid; gap: 14px; align-content: start; }
  .cdm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .cdm-panel-sub { font-size: 13px; color: var(--muted-foreground); }
  .cdm-panel-actions { display: flex; gap: 8px; margin-left: auto; }
  .cdm-panel-actions .btn svg { width: 13px; height: 13px; }
  .cdm-empty { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; text-align: center; font-size: 13px; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: 12px; }
  .cdm-empty strong { font-size: 13.5px; color: var(--foreground); }
  .cdm-empty.is-error strong { color: var(--destructive); }
  .cdm-empty .btn { margin-top: 8px; }
  td > .cdm-empty { border: 0; padding: 22px 12px; }

  /* Orders table */
  .cdm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
  .cdm-table thead th:first-child, .cdm-table tbody td:first-child { padding-left: 16px; }
  .cdm-table thead th:last-child, .cdm-table tbody td:last-child { padding-right: 12px; }
  .cdm-table tbody tr { cursor: pointer; }
  .cdm-table tbody td:nth-child(4) { color: var(--text-secondary); font-weight: 500; } /* undo .mt-table's identity-column rule */
  .cdm-order-cell { display: flex; align-items: center; gap: 8px; }
  .cdm-order-id { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--foreground); }
  .cdm-td-strong { color: var(--foreground) !important; font-weight: 600 !important; }
  .cdm-td-muted { color: var(--muted-foreground); }
  .cdm-td-money { text-align: right; font-variant-numeric: tabular-nums; color: var(--foreground) !important; font-weight: 600; }
  .cdm-table thead th:nth-child(4), .cdm-table thead th:nth-child(5) { text-align: right; }
  .cdm-td-action, .cdm-th-action { text-align: right; width: 1%; white-space: nowrap; }
  .cdm-step { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--step-color, var(--primary)); background: color-mix(in oklab, var(--step-color, var(--primary)) 10%, transparent); border: 1px solid color-mix(in oklab, var(--step-color, var(--primary)) 30%, transparent); white-space: nowrap; }
  .cdm-step i { width: 7px; height: 7px; border-radius: 50%; background: var(--step-color, var(--primary)); }
  .cdm-paid { display: inline-grid; gap: 4px; justify-items: end; min-width: 84px; }
  .cdm-paid-bar { display: block; width: 84px; height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--muted-foreground) 25%, transparent); overflow: hidden; }
  .cdm-paid-bar b { display: block; height: 100%; border-radius: 2px; background: var(--success); }

  /* Files */
  .cdm-dropzone {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer;
    border: 1.5px dashed color-mix(in oklab, var(--primary) 40%, var(--border)); border-radius: 12px;
    background: color-mix(in oklab, var(--primary) 4%, transparent); color: var(--foreground);
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .cdm-dropzone:hover, .cdm-dropzone.is-dragover { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 9%, transparent); }
  .cdm-dropzone.is-uploading { pointer-events: none; opacity: 0.75; }
  .cdm-dropzone-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); }
  .cdm-dropzone-icon svg { width: 18px; height: 18px; }
  .cdm-dropzone.is-uploading .cdm-dropzone-icon svg { animation: cdm-spin 1s linear infinite; }
  @keyframes cdm-spin { to { rotate: 360deg; } }
  .cdm-dropzone-text { display: grid; gap: 2px; min-width: 0; }
  .cdm-dropzone-text strong { font-size: 13.5px; font-weight: 600; }
  .cdm-dropzone-text u { color: var(--primary); text-underline-offset: 3px; }
  .cdm-dropzone-text small { font-size: 12px; color: var(--muted-foreground); }
  .cdm-files { display: grid; gap: 8px; }
  .cdm-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); transition: border-color 0.15s ease, background-color 0.15s ease; }
  .cdm-file:hover { border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
  .cdm-file-icon { flex: none; display: grid; place-items: center; width: 40px; height: 44px; border-radius: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--muted-foreground); }
  .cdm-file-icon[data-kind="pdf"] { background: #ef4444; }
  .cdm-file-icon[data-kind="doc"] { background: #3b82f6; }
  .cdm-file-icon[data-kind="sheet"] { background: #22c55e; }
  .cdm-file-icon[data-kind="img"] { background: #a855f7; }
  .cdm-file-icon[data-kind="zip"] { background: #f59e0b; }
  .cdm-file-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
  .cdm-file-name-row { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
  .cdm-file-name { font-size: 13.5px; font-weight: 600; color: var(--foreground); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cdm-file-name:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
  .cdm-file-rename { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--muted-foreground); cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background-color 0.15s ease; }
  .cdm-file-rename svg { width: 12px; height: 12px; }
  .cdm-file:hover .cdm-file-rename, .cdm-file-rename:focus-visible { opacity: 1; }
  .cdm-file-rename:hover { background: var(--accent); color: var(--foreground); }
  .cdm-file-edit { display: flex; align-items: center; gap: 6px; }
  .cdm-file-edit .input { height: 30px; font-size: 13px; }
  .cdm-file-meta { font-size: 11.5px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cdm-file-actions { flex: none; display: flex; gap: 6px; }

  /* Files explorer (assets/modules/common/client_files.js).
     The bucket root shows as a locked "Client Documents" tile and every other
     top-level folder sits beside it. Menus stay in normal flow: this panel
     lives inside .cdm-body, which scrolls, so absolute ones would be clipped. */
  .cf { display: grid; gap: 14px; align-content: start; min-width: 0; }
  .cf-body { display: grid; gap: 14px; align-content: start; min-width: 0; }

  /* Breadcrumb bar */
  .cf-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
  .cf-crumbs { display: flex; align-items: center; gap: 2px; flex: 1 1 260px; min-width: 0; flex-wrap: wrap; }
  .cf-crumb {
    display: inline-flex; align-items: center; gap: 6px; max-width: 22ch; padding: 4px 9px;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--muted-foreground);
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .cf-crumb > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  button.cf-crumb:hover { background: var(--accent); color: var(--foreground); }
  .cf-crumb.is-current { color: var(--foreground); cursor: default; }
  .cf-crumb-icon { flex: none; display: grid; place-items: center; }
  .cf-crumb-icon svg { width: 14px; height: 14px; }
  .cf-crumb-sep { flex: none; display: grid; place-items: center; color: var(--muted-foreground); opacity: 0.5; }
  .cf-crumb-sep svg { width: 11px; height: 11px; }
  .cf-icon-btn {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px;
    border: 0; border-radius: 7px; background: transparent; color: var(--muted-foreground); cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .cf-icon-btn svg { width: 13px; height: 13px; }
  .cf-icon-btn:hover, .cf-icon-btn.is-active { background: var(--accent); color: var(--foreground); }
  .cf-up { margin-right: 2px; border: 1px solid var(--border); }

  .cf-bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .cf-search { position: relative; display: flex; align-items: center; }
  .cf-search-icon { position: absolute; left: 9px; display: grid; place-items: center; color: var(--muted-foreground); pointer-events: none; }
  .cf-search-icon svg { width: 13px; height: 13px; }
  .cf-search input {
    height: 32px; width: 170px; max-width: 42vw; padding: 0 10px 0 28px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--card);
    font-size: 12.5px; color: var(--foreground);
  }
  .cf-search input::placeholder { color: var(--muted-foreground); }
  .cf-search input:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 45%, transparent); outline-offset: 1px; border-color: var(--primary); }
  .cf-search input::-webkit-search-cancel-button { cursor: pointer; }
  .cf-new-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; white-space: nowrap;
    border: 1px dashed color-mix(in oklab, var(--primary) 45%, var(--border)); border-radius: 8px;
    background: transparent; color: var(--primary); font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .cf-new-btn svg { width: 13px; height: 13px; }
  .cf-new-btn:hover, .cf-new-btn.is-active { background: color-mix(in oklab, var(--primary) 10%, transparent); border-style: solid; }

  /* Inline naming row (create / rename a folder) */
  .cf-nameform {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
    border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border)); border-radius: 10px;
    background: color-mix(in oklab, var(--primary) 5%, transparent);
  }
  .cf-nameform-icon { flex: none; display: grid; place-items: center; color: var(--primary); }
  .cf-nameform-icon svg { width: 16px; height: 16px; }
  .cf-nameform-title { font-size: 12.5px; font-weight: 600; color: var(--foreground); }
  .cf-nameform-input { flex: 1 1 160px; min-width: 120px; height: 32px; font-size: 13px; }

  /* Folder tiles */
  .cf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
  .cf-tile {
    display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px 13px; min-width: 0;
    border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  }
  .cf-tile:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: color-mix(in oklab, var(--primary) 4%, var(--card)); transform: translateY(-1px); }
  .cf-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .cf-tile-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 9px; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); }
  .cf-tile-icon svg { width: 17px; height: 17px; }
  .cf-tile-name { font-size: 13.5px; font-weight: 600; color: var(--foreground); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cf-tile-meta { font-size: 11.5px; color: var(--muted-foreground); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Locked tiles read as infrastructure, not as something you can rearrange. */
  .cf-tile--locked .cf-tile-icon { color: var(--muted-foreground); background: color-mix(in oklab, var(--muted-foreground) 14%, transparent); }
  .cf-tile--add { border-style: dashed; background: transparent; }
  .cf-tile--add .cf-tile-icon { color: var(--primary); }
  .cf-tile--add .cf-tile-name { color: var(--primary); }

  .cf-section-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }

  /* File rows reuse .cdm-file; the move tree is a full-width child of the row. */
  .cf-file { flex-wrap: wrap; }
  .cf-file .cdm-file-actions .btn { gap: 5px; }
  .cf-file .cdm-file-actions .btn svg { width: 13px; height: 13px; }
  .cf-move { flex: 1 0 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
  .cf-move-head { font-size: 11.5px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 6px; }
  .cf-move-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
  .cf-move-node { display: flex; align-items: center; gap: 4px; padding-left: calc(var(--cf-depth, 0) * 16px); }
  .cf-move-toggle {
    flex: none; display: grid; place-items: center; width: 20px; height: 20px;
    border: 0; border-radius: 5px; background: transparent; color: var(--muted-foreground); cursor: pointer;
    transition: rotate 0.15s ease, background-color 0.15s ease;
  }
  .cf-move-toggle svg { width: 11px; height: 11px; }
  .cf-move-toggle:hover { background: var(--accent); color: var(--foreground); }
  .cf-move-toggle.is-open { rotate: 90deg; }
  .cf-move-toggle--spacer { cursor: default; }
  .cf-move-item {
    flex: 1; display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 9px;
    border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left;
    font-size: 12.5px; font-weight: 500; color: var(--foreground);
    transition: background-color 0.15s ease;
  }
  .cf-move-item > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  button.cf-move-item:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
  .cf-move-item.is-current { color: var(--muted-foreground); cursor: default; }
  .cf-move-icon { flex: none; display: grid; place-items: center; color: var(--muted-foreground); }
  .cf-move-icon svg { width: 14px; height: 14px; }
  .cf-move-badge { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }

  /* Loading */
  .cf-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px 16px; font-size: 13px; color: var(--muted-foreground); }
  .cf-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--primary) 25%, transparent); border-top-color: var(--primary); animation: cdm-spin 0.7s linear infinite; }

  /* System Files is a group, not a folder, so there is nowhere to upload to. */
  .cdm-dropzone.is-disabled { pointer-events: none; opacity: 0.5; border-style: dashed; }

  @media (max-width: 560px) {
    .cf-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .cf-bar-actions { width: 100%; margin-left: 0; }
    .cf-search { flex: 1; }
    .cf-search input { width: 100%; max-width: none; }
  }

  /* History timeline */
  .cdm-timeline { list-style: none; margin: 0; padding: 4px 0 0 22px; display: grid; gap: 14px; position: relative; }
  .cdm-timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--border); }
  .cdm-hist { position: relative; }
  .cdm-hist-dot { position: absolute; left: -20px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent); }
  .cdm-hist-card { display: grid; gap: 8px; padding: 12px 12px 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
  .cdm-hist-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .cdm-hist-action { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
  .cdm-hist-by { font-size: 12px; color: var(--muted-foreground); }
  .cdm-hist-time { margin-left: auto; font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .cdm-hist-del { width: 26px; height: 26px; color: var(--muted-foreground); opacity: 0.6; }
  .cdm-hist-del:hover { color: var(--destructive); opacity: 1; background: color-mix(in oklab, var(--destructive) 10%, transparent); }
  .cdm-hist-del svg { width: 13px; height: 13px; }
  .cdm-hist-desc { font-size: 13.5px; line-height: 1.5; color: var(--foreground); }
  .cdm-hist-desc.is-empty { color: var(--muted-foreground); font-style: italic; }
  .cdm-hist-comment { margin: 0; padding: 8px 12px; font-size: 13px; line-height: 1.5; color: var(--muted-foreground); background: color-mix(in oklab, var(--muted) 60%, transparent); border-left: 3px solid color-mix(in oklab, var(--primary) 55%, transparent); border-radius: 0 8px 8px 0; white-space: pre-wrap; }

  /* ---- Add Order dialog (.aom, on the .ncm shell) ---- */
  .aom > form { max-width: 820px; }
  .aom .ncm-body { grid-template-columns: minmax(0, 1fr) 280px; }
  .aom-avatar { flex: none; width: 38px; height: 38px; font-size: 13px; }
  .cdm-money { position: relative; display: flex; align-items: center; }
  .cdm-money-sym { position: absolute; left: 12px; font-size: 13px; font-weight: 700; color: var(--muted-foreground); pointer-events: none; }
  .cdm-money .input { padding-left: 26px; font-variant-numeric: tabular-nums; }
  .cdm-facts--compact { grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .aom .dp-wrap { width: 100%; }
  .aom .dp-trigger { height: 36px; padding: 0 12px; gap: 8px; font-size: 13px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
  .aom .dp-trigger.is-placeholder .dp-trigger__label { color: var(--muted-foreground); }
  .aom .dp-trigger__icon { width: 15px; height: 15px; color: var(--muted-foreground); }

  /* ---- Add history dialog (.chm, on the .ncm shell) ---- */
  .chm > form { max-width: 560px; }
  .chm .ncm-body { grid-template-columns: 1fr; padding-bottom: 12px; }
  .chm .input, .chm .textarea { width: 100%; }
}

/* =====================================================================
   Order detail (.odm) — pages/matters.html #order-detail-modal
   Same shell as the case detail modal (.cdm is on the same element, so the
   header, Information card, tabs, panels, dropzone, file rows and history
   timeline come from the .cdm rules above). This block adds the pieces only
   an order has: the progress ring, paid bar, lock switch, workflow stages,
   payments cards and the pin / change-list bits of the history timeline.
   ===================================================================== */
/* Above the case detail modal (950) it can be opened from; under the
   step-change / set-task / file-preview overlays (all 1000+ and later in DOM). */
#order-detail-modal.modal-overlay { z-index: 1000; padding: 24px; }

/* =====================================================================
   Detail drawers — #case-detail-modal / #order-detail-modal
   The case and order detail cards (and the CaseCheck tab, which opens the
   order card) slide in from the right as full-height drawers at 60% of the
   viewport width instead of centering in the viewport. Same legacy overlays
   and showModal()/hideModal() plumbing; only placement + entrance change.
   Keyframes rather than transitions: showModal() flips display:none → flex
   in the same frame it adds .active, so a transition has no start state.
   ===================================================================== */
#case-detail-modal.modal-overlay,
#order-detail-modal.modal-overlay {
  padding: 0;
  align-items: stretch;
  justify-content: flex-end;
}
#case-detail-modal.modal-overlay > .cdm,
#order-detail-modal.modal-overlay > .cdm {
  /* Scale with the screen: a share of the viewport on wide monitors, never narrower
     than the card's 1120px design width, and the full viewport once that no longer fits. */
  width: min(100vw, max(60vw, 1120px));
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
}
/* The order drawer carries a 12-column field grid + workflow, so it runs wider
   than the case drawer: 72vw, never narrower than 1120px, never past the viewport. */
#order-detail-modal.modal-overlay > .cdm { width: min(100vw, max(72vw, 1120px)); }
/* Stacked drawers: the order drawer opens over the case drawer (its Orders
   table). Each is a .modal-overlay that dims (75%) and blurs the page on its own,
   so a drawer sliding in over an open drawer dimmed the visible page strip twice,
   near-black. While a drawer is already up underneath, the one on top paints
   nothing of its own; the panel's slide + shadow carry the "card on a card" depth. */
:root:has(#case-detail-modal.modal-overlay.active) #order-detail-modal.modal-overlay {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#case-detail-modal.modal-overlay.active,
#order-detail-modal.modal-overlay.active {
  animation: cdm-drawer-fade 240ms ease both;
}
#case-detail-modal.modal-overlay.active > .cdm,
#order-detail-modal.modal-overlay.active > .cdm {
  animation: cdm-drawer-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes cdm-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes cdm-drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Exit. hideModal() swaps .active for .is-closing and keeps the overlay
   displayed until the drawer's animationend, so the panel slides back out
   while the dim fades (see _animateOverlayExit in core/utils.js). */
#case-detail-modal.modal-overlay.is-closing,
#order-detail-modal.modal-overlay.is-closing {
  visibility: visible;
  pointer-events: none;
  animation: cdm-drawer-fade-out 260ms ease both;
}
#case-detail-modal.modal-overlay.is-closing > .cdm,
#order-detail-modal.modal-overlay.is-closing > .cdm {
  animation: cdm-drawer-out 300ms cubic-bezier(0.4, 0, 0.7, 1) both;
}
/* Distinct names on purpose: swapping only direction/duration on the (already
   finished) entry animation would update it in place — no restart, no
   animationend — and the drawer would vanish instead of sliding. */
@keyframes cdm-drawer-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@keyframes cdm-drawer-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #case-detail-modal.modal-overlay.active,
  #order-detail-modal.modal-overlay.active,
  #case-detail-modal.modal-overlay.active > .cdm,
  #order-detail-modal.modal-overlay.active > .cdm,
  #case-detail-modal.modal-overlay.is-closing,
  #order-detail-modal.modal-overlay.is-closing,
  #case-detail-modal.modal-overlay.is-closing > .cdm,
  #order-detail-modal.modal-overlay.is-closing > .cdm { animation: none; }
}
/* At or below the 1120px floor the drawers are already full-bleed; drop the edge. */
@media (max-width: 1120px) {
  #case-detail-modal.modal-overlay > .cdm,
  #order-detail-modal.modal-overlay > .cdm { width: 100vw; border-left: 0; }
}

/* =====================================================================
   New Case drawer — #create-case-modal (pages/matters.html)
   A native Basecoat <dialog>, re-placed as a full-height right drawer. It is
   narrower than the case / order detail drawers because its body is a single
   column of fields (no side rail), so 60vw left a dead gutter. Basecoat already runs the
   dialog through allow-discrete transitions with @starting-style, so open
   AND close() animate on their own; this block only replaces the centred
   scale-in with a slide from the right, dims the backdrop like the legacy
   overlays, and lets the header / body / footer settle in a beat later.
   Id selectors beat the @scope(.bc) .ncm rules on specificity.
   ===================================================================== */
#create-case-modal { transition-duration: 300ms; }
#create-case-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition-duration: 300ms;
}
#create-case-modal > form {
  top: 0; right: 0; bottom: 0; left: auto;
  width: 46vw; min-width: min(660px, 100vw); max-width: 780px;
  height: 100%; max-height: none;
  translate: 100% 0; scale: 1;
  border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
  transition: translate 320ms cubic-bezier(0.4, 0, 0.7, 1);
}
#create-case-modal[open] > form {
  translate: 0 0; scale: 1;
  transition: translate 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#create-case-modal > form::before { border-radius: 0; }
#create-case-modal > form > header { padding-top: 26px; }
/* Single column — the law firm card and the status row live in the same
   column as everything else, so there is no side rail to reserve a track for.
   The column stretches and the Notes field is the flex item that grows, which
   is what fills the drawer's full height instead of leaving a void above the
   footer. */
#create-case-modal .ncm-body {
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch; align-items: stretch;
  padding-bottom: 18px;
}
#create-case-modal .ncm-main { display: flex; flex-direction: column; gap: 16px; }
#create-case-modal .ncm-notes-field { flex: 1 1 auto; min-height: 120px; }
#create-case-modal .ncm-notes-field .textarea { flex: 1 1 auto; height: 100%; min-height: 96px; }

/* Locked law firm card, compacted to sit level with the Client picker next to
   it — the "belongs to your firm" caption moved onto the padlock's tooltip. */
#create-case-modal .ncm-firm { gap: 10px; padding: 0 8px; height: 36px; background: var(--muted); }
#create-case-modal .ncm-firm-icon { width: 22px; height: 22px; border-radius: 6px; }
#create-case-modal .ncm-firm-icon svg { width: 13px; height: 13px; }
#create-case-modal .ncm-firm-text strong { font-size: 13px; }
#create-case-modal .ncm-firm-lock { width: 20px; height: 20px; background: transparent; }
/* The form is ~900px tall with header + footer. On shorter viewports the body
   becomes the scroller (footer stays pinned; an open client / attorney menu
   scrolls with it). Taller than that, overflow stays visible so those menus
   can spill past the footer exactly as the centred dialog let them. */
@media (max-height: 940px) {
  #create-case-modal > form { overflow: hidden; }
  #create-case-modal .ncm-body { overflow-y: auto; }
}
/* Content settles in after the panel arrives (staggered), leaves with it. */
#create-case-modal > form > header,
#create-case-modal > form > section,
#create-case-modal > form > footer {
  opacity: 0; translate: 18px 0;
  transition: opacity 200ms ease, translate 200ms ease;
}
#create-case-modal[open] > form > header,
#create-case-modal[open] > form > section,
#create-case-modal[open] > form > footer {
  opacity: 1; translate: 0 0;
  transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.2, 1), translate 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#create-case-modal[open] > form > header  { transition-delay: 120ms; }
#create-case-modal[open] > form > section { transition-delay: 180ms; }
#create-case-modal[open] > form > footer  { transition-delay: 240ms; }
@starting-style {
  #create-case-modal[open] > form { translate: 100% 0; }
  #create-case-modal[open] > form > header,
  #create-case-modal[open] > form > section,
  #create-case-modal[open] > form > footer { opacity: 0; translate: 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
  #create-case-modal,
  #create-case-modal::backdrop,
  #create-case-modal > form,
  #create-case-modal > form > header,
  #create-case-modal > form > section,
  #create-case-modal > form > footer { transition: none; }
}
@media (max-width: 900px) {
  #create-case-modal > form { width: 100vw; min-width: 0; border-left: 0; }
}

/* =====================================================================
   Calendar drawers — #event-modal (.evm) / #dash-event-dialog (.dash-evd)
   On the Calendar page both the create/edit form and the event detail card
   are Basecoat `.drawer[data-side="right"]` dialogs, so they slide in from the
   right edge like the Matters detail drawers instead of centering. Basecoat's
   drawer CSS supplies the translate/opacity transitions (+ @starting-style)
   and drawer.js patches close() to play the slide-out before the dialog is
   really closed; this block only sets size, edge treatment and speed.
   Specificity note: Basecoat's `.drawer[data-side=right] > *` is (0,2,0), so
   every override here carries class + attribute + element.
   ===================================================================== */
/* Speed: drawer.js holds a closing dialog open for the panel's transition
   duration, and Edit waits for the detail drawer to fully close before opening
   the form, so these two numbers add up on the Edit click. Keep them short. */
.drawer.evm,
.drawer.evm::backdrop,
.drawer.evm[data-side="right"] > form {
  --tw-duration: 0.3s;
  transition-duration: 0.3s;
}
.drawer.dash-evd,
.drawer.dash-evd::backdrop,
.drawer.dash-evd[data-side="right"] > article {
  --tw-duration: 0.25s;
  transition-duration: 0.25s;
}
.drawer.evm::backdrop,
.drawer.dash-evd::backdrop { background-color: rgba(0, 0, 0, 0.45); }
.drawer.evm[data-side="right"] > form,
.drawer.dash-evd[data-side="right"] > article {
  height: 100%;
  max-height: none;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
}
/* Create / edit form: same sizing rule as the Matters detail drawers — a
   viewport share with a 1120px floor — so the panel grows to fill more of the
   screen as the window shrinks instead of sitting at a fixed 900px. The 1240px
   ceiling keeps the two-column body readable on very wide monitors. */
.drawer.evm[data-side="right"] > form {
  width: min(100vw, max(72vw, 1120px), 1240px);
  max-width: 100vw;
}
/* Event detail card: a narrower reading column. */
.drawer.dash-evd[data-side="right"] > article {
  width: 560px;
  max-width: 100vw;
}
/* At or below the 1120px floor the form is already full-bleed; drop the edge. */
@media (max-width: 1120px) {
  .drawer.evm[data-side="right"] > form { width: 100vw; border-left: 0; }
}
@media (max-width: 900px) {
  .drawer.dash-evd[data-side="right"] > article { width: 100vw; border-left: 0; }
}

@scope (.bc) {
  .odm { width: min(1240px, 100%); height: min(92vh, 980px); }

  /* ---- Header: client name with the order / service / case line beside it ---- */
  .odm-head { padding: 16px 20px 14px 24px; }
  .odm-head-text { min-width: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; row-gap: 4px; }
  .odm-head-text .cdm-title { flex: none; max-width: 100%; }
  .odm-eyebrow { min-width: 0; font-size: 13px; letter-spacing: 0.06em; gap: 10px; }
  .odm-eyebrow > span[hidden] { display: none; }
  .odm-eyebrow-case { letter-spacing: 0.02em; text-transform: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
  .odm-head-step { height: 28px; padding: 0 12px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; max-width: 340px; }
  .odm-head-step > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .odm-head-step[hidden] { display: none; }
  .odm .status-badge.new { color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); }
  .odm .status-badge.open { color: #eab308; background: rgba(234, 179, 8, 0.14); }
  .odm .status-badge.completed { color: var(--success); background: color-mix(in oklab, var(--success) 12%, transparent); }
  .odm .status-badge.on-hold { color: var(--warning); background: color-mix(in oklab, var(--warning) 12%, transparent); }
  .odm .status-badge.cancelled { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 12%, transparent); }

  /* ---- Body: two columns ----
     Information rail | tab strip (sticky) + active panel, the same split the
     client drawer uses: the order's client, progress and dates stay on screen
     while a long stage list or payments table scrolls beside them. .cdm-body is
     already the flex child that owns the leftover height (flex: 1 1 auto;
     min-height: 0), so handing its scroll to the two columns gives each one the
     full drawer height. */
  .odm-body {
    /* 360px, not 320: the rail header has to fit "ORDER INFORMATION" plus
       Cancel + Save on one line inside 18px gutters, so the buttons do not drop
       to a second row the moment you press Edit. */
    display: grid; grid-template-columns: 360px minmax(0, 1fr);
    /* minmax(0, 1fr), not auto: an auto row sizes to its content, and the
       columns' overflow-y would then never engage — the whole drawer would
       scroll again. This pins the row to the container height instead. */
    grid-template-rows: minmax(0, 1fr); gap: 0;
    padding: 0; overflow: hidden; min-height: 0;
  }
  /* The rail is hidden for CaseCheck orders (nothing in that layout is
     editable), so the panel column has to take the whole width rather than
     leave a 360px hole where the rail was. */
  .odm.is-casecheck .odm-body { grid-template-columns: minmax(0, 1fr); }
  /* Flex column, not grid: .odm-tabs below is sticky, and a sticky grid item's
     containing block is its own grid area — one row tall, so it could never
     travel. In a flex column the containing block is the scroller's content
     box, which is what sticky needs. */
  .odm-main {
    min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 16px; padding: 0 24px 24px;
  }

  /* ---- Footer ---- */
  .odm-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px 14px 24px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 45%, transparent); }
  .odm-foot-hint { margin-right: auto; font-size: 12px; color: var(--muted-foreground); }
  .odm-foot .btn svg { width: 14px; height: 14px; }
  .odm.is-casecheck .odm-foot { display: none; }

  /* ---- Information rail ----
     Structural column, not a floating card: the border-right is the column
     divider, so the old card border / radius / shadow all come off. */
  .odm-info {
    min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: block; border-right: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 22%, transparent);
  }
  .odm.is-casecheck .odm-info { display: none; }
  /* Sticky so Edit / Cancel / Save stay reachable from anywhere in the stack of
     fields below. */
  .odm-info-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 18px; border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 45%, var(--card));
  }
  .odm-info-head .cdm-section-title { font-size: 12px; letter-spacing: 0.12em; white-space: nowrap; }
  .odm-info-head .cdm-section-actions { flex: none; }

  /* Top of the rail: client card, then progress, then lock — one per row now
     that they have a 360px column instead of a full-width strip. */
  .odm-info-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 18px 0; }

  .odm-client { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
  .odm-client .mtd-avatar { width: 52px; height: 52px; font-size: 17px; flex: none; border-radius: 14px; }
  .odm-client-text { display: grid; gap: 8px; min-width: 0; flex: 1; }
  .odm-client .cdm-fact-text strong { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.2; }
  /* One column: two of these never fit in the rail. */
  .odm-client-lines { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .odm-client-line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--foreground); }
  .odm-client-line > svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--muted-foreground); }
  .odm-client-line > span, .odm-client-line > small { min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; font-weight: 500; color: var(--foreground); }
  .odm-client-line > small.is-muted, .odm-client-line > span.is-muted { font-style: italic; color: var(--muted-foreground); opacity: 0.9; }

  .odm-progress { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 18px 14px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
  .odm-ring { position: relative; width: 64px; height: 64px; flex: none; }
  .odm-ring svg { display: block; width: 64px; height: 64px; }
  .odm-ring-value { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .odm-progress-text { display: grid; gap: 3px; min-width: 0; line-height: 1.15; }
  .odm-progress-text strong { font-size: 16px; font-weight: 800; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .odm-progress-text small { font-size: 12px; font-weight: 500; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

  .odm-lock { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
  .odm-lock-hint { font-size: 11.5px; line-height: 1.35; color: var(--muted-foreground); }
  .odm-lock:has(input:checked) { border-color: color-mix(in oklab, var(--warning) 45%, var(--border)); background: color-mix(in oklab, var(--warning) 6%, var(--card)); }

  /* Field rows: one per line, label over a control-shaped box. The box is the
     point — it carries the same metrics as the .input that replaces it under
     Edit (34px tall, same radius, same 1px border), so pressing Edit changes the
     fill and nothing else: no reflow, no rows jumping. That makes the old tile
     border redundant inside the rail, so .odm-grid strips it back off .odm-field
     and the gap between boxes carries the rhythm instead.

     .odm-field itself keeps the tile look (and the --cN spans keep their 12-column
     meaning) because the CaseCheck identity tiles, .cc-tile, are still built from
     it — see the CaseCheck panel block below. Everything rail-specific here is
     scoped under .odm-grid for exactly that reason. */
  .odm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 18px 20px; border-radius: 0; background: none; }
  .odm-field { min-width: 0; display: grid; gap: 5px; align-content: start; padding: 11px 14px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
  .odm-field:hover { border-color: color-mix(in oklab, var(--foreground) 14%, var(--border)); }
  .odm-grid .odm-field, .odm-grid .odm-field:hover { padding: 0; border: 0; border-radius: 0; background: none; transition: none; }
  .odm-field--c2 { grid-column: span 2; }
  .odm-field--c3 { grid-column: span 3; }
  .odm-field--c4 { grid-column: span 4; }
  @media (max-width: 1100px) { .odm-field--c4 { grid-column: span 3; } .odm-field--c3 { grid-column: span 3; } .odm-field--c2 { grid-column: span 2; } }
  @media (max-width: 760px) { .odm-field--c4, .odm-field--c3 { grid-column: 1 / -1; } .odm-field--c2 { grid-column: span 1; } }
  .odm-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .odm-value { display: flex; align-items: center; gap: 6px; min-height: 30px; font-size: 13.5px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .odm-value--wrap { white-space: normal; line-height: 1.45; align-items: flex-start; padding-top: 4px; }
  .odm-value.is-muted { color: var(--muted-foreground); font-weight: 500; }
  .odm-case { justify-content: space-between; gap: 10px; }
  .odm-case > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .odm-link { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); border-radius: 999px; background: color-mix(in oklab, var(--primary) 8%, transparent); color: var(--primary); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease; }
  .odm-link svg { width: 11px; height: 11px; }
  .odm-link:hover { background: color-mix(in oklab, var(--primary) 16%, transparent); border-color: var(--primary); }
  .odm-link[hidden] { display: none; }
  .odm-paid { display: grid; gap: 6px; align-content: center; }
  .odm-paid .cdm-paid-bar { width: 100%; }

  /* Vertical padding rather than a fixed height: most values are one line, but a
     case title or address wraps, so the box grows from 34px instead of clipping.
     Measured off Basecoat's own text input so the swap under Edit is invisible:
     padding-inline 10px, --radius-md, 1px of --input and its 0 1px 2px shadow. */
  .odm-grid .odm-value {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    min-height: 34px; padding: 5px 10px;
    border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background: color-mix(in oklab, var(--muted) 55%, var(--card));
    font-size: 13px; font-weight: 500; color: var(--foreground);
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .odm-grid .odm-value.is-muted { font-weight: 500; color: var(--muted-foreground); }
  /* The paid bar is a second row inside its box, so that one stays a grid. */
  .odm-grid .odm-paid { display: grid; gap: 6px; align-content: center; }
  /* The case title wraps in a 324px box; "View case" then sits on its own line. */
  .odm-grid .odm-case > span:first-child { white-space: normal; overflow: visible; text-overflow: clip; }
  /* View <-> edit: the row keeps its place and its .odm-value box is swapped for
     the sibling .odm-field-edit, whose control lands on the same footprint. The
     box going from muted to card fill IS the edit signal, so there is no row tint
     or accent bar on top of it. The lock switch stays visible but is disabled
     outside edit mode. */
  .odm-field-edit[hidden], .odm-info-head .cdm-section-actions .btn[hidden] { display: none; }
  .odm-field-edit { display: grid; gap: 6px; }
  .odm-info.is-editing .odm-field--editable > .odm-value { display: none; }
  .odm-info.is-editing .odm-field:not(.odm-field--editable) > .odm-value { opacity: 0.85; }
  .odm-info.is-editing .odm-lock { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  .odm-info.is-editing .odm-lock .odm-label { color: var(--primary); }
  .odm-switch:has(input:disabled) { cursor: default; }
  .odm-switch:has(input:disabled) .odm-switch-track { opacity: 0.55; }
  .odm-value .mtd-dot { flex: none; }
  .odm-value .mtd-dot[data-status="new"] { background: var(--primary); color: var(--primary); }
  .odm-value .mtd-dot[data-status="open"] { background: #eab308; color: #eab308; }
  .odm-value .mtd-dot[data-status="on_hold"] { background: var(--warning); color: var(--warning); }
  .odm-value .mtd-dot[data-status="completed"] { background: var(--success); color: var(--success); }
  .odm-value .mtd-dot[data-status="cancelled"] { background: var(--destructive); color: var(--destructive); }
  .odm-info .input { height: 34px; font-size: 13px; font-weight: 500; background: var(--card); width: 100%; }
  .odm-info .cdm-money .input { padding-left: 24px; }

  /* Status / step dropdowns (SearchableDropdown mounted by orderDetail.js) */
  .odm-control .searchable-dropdown .dropdown-search { height: 34px; font-size: 13px; background: var(--card); }
  .odm-control .searchable-dropdown[data-searchable="false"] .dropdown-search { cursor: pointer; caret-color: transparent; }
  .odm-control .searchable-dropdown .dropdown-search:not(:placeholder-shown) { color: var(--foreground); font-weight: 600; }
  .odm-control .searchable-dropdown .dropdown-menu { z-index: 60; border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12); }
  .odm-control .searchable-dropdown .dropdown-items { padding: 6px; display: grid; gap: 3px; max-height: 260px; }
  .odm-control .searchable-dropdown .dropdown-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--foreground); }
  .odm-control .searchable-dropdown .dropdown-item:hover { background: var(--accent); }
  .odm-control .searchable-dropdown .dropdown-item.selected { background: color-mix(in oklab, var(--primary) 10%, transparent); }
  .odm-control .searchable-dropdown .dropdown-item.selected .dropdown-item-label { font-weight: 600; }
  .odm-control .searchable-dropdown .dropdown-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .odm-control .searchable-dropdown .dropdown-item-check { margin-left: auto; width: 14px; height: 14px; color: var(--primary); flex: none; }
  .odm-control .searchable-dropdown .dropdown-item-empty { padding: 14px 10px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
  .odm-control .searchable-dropdown .dropdown-item.odm-step-opt .dropdown-item-label { display: grid; gap: 1px; line-height: 1.2; white-space: normal; }
  .odm-control .searchable-dropdown .dropdown-item.odm-step-opt small { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .odm-control .searchable-dropdown .dropdown-item.selected.odm-step-opt small { color: var(--primary); }
  .odm-control .mtd-dot[data-status="new"] { background: var(--primary); color: var(--primary); }
  .odm-control .mtd-dot[data-status="open"] { background: #eab308; color: #eab308; }
  .odm-control .mtd-dot[data-status="on_hold"] { background: var(--warning); color: var(--warning); }
  .odm-control .mtd-dot[data-status="completed"] { background: var(--success); color: var(--success); }
  .odm-control .mtd-dot[data-status="cancelled"] { background: var(--destructive); color: var(--destructive); }

  /* Date pickers (shared .dp-* widget) */
  .odm-info .dp-wrap { width: 100%; }
  .odm-info .dp-trigger { width: 100%; height: 34px; padding: 0 10px; gap: 8px; font-size: 13px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
  .odm-info .dp-trigger:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  .odm-info .dp-trigger.is-open, .odm-info .dp-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .odm-info .dp-trigger.is-placeholder .dp-trigger__label { color: var(--muted-foreground); }
  .odm-info .dp-trigger:not(.is-placeholder) .dp-trigger__label { font-weight: 600; }
  .odm-info .dp-trigger__icon { width: 15px; height: 15px; color: var(--muted-foreground); }
  .odm-info .dp-trigger__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Lock switch */
  .odm-switch { display: inline-flex; align-items: center; gap: 10px; height: 30px; cursor: pointer; user-select: none; }
  .odm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .odm-switch-track { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: color-mix(in oklab, var(--muted-foreground) 30%, var(--muted)); transition: background-color 0.15s ease; }
  .odm-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: translate 0.15s ease; }
  .odm-switch input:checked + .odm-switch-track { background: var(--warning); }
  .odm-switch input:checked + .odm-switch-track::after { translate: 16px 0; }
  .odm-switch input:focus-visible + .odm-switch-track { outline: 2px solid var(--ring); outline-offset: 2px; }
  .odm-switch-text { font-size: 13.5px; font-weight: 700; color: var(--foreground); }

  /* ---- Tab strip ----
     A pinned rail beside a tab strip that scrolls away reads lopsided, so the
     strip stays put at the top of its own column. The negative margin bleeds it
     through .odm-main's 24px gutters, so the sticky backdrop spans the whole
     column and rows can't peek past it at the edges. */
  .odm-tabs { position: sticky; top: 0; z-index: 5; margin: 0 -24px; padding: 18px 24px 0; background: var(--card); box-shadow: 0 1px 0 var(--border); }
  .odm-tabs .mt-tab-count { margin-left: 4px; }
  .odm-tabs > [role="tablist"][data-variant="line"] > [role="tab"][aria-selected="true"] .mt-tab-count { border-color: color-mix(in oklab, var(--primary) 45%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }

  /* ---- Tabs: the .ot-tab class is legacy (switchOrderTab toggles aria-selected) ---- */
  .odm .ot-tab { border-bottom: 0; }
  .odm-panel { gap: 14px; }
  .odm-panel[aria-hidden="true"] { display: none !important; }

  /* ---- Narrow: back to one column ----
     Below this the drawer is already 100vw and a 360px rail costs the stage
     list and payments tables too much, so the rail stops being a column: the
     information band goes back on top as a card, both columns un-stick, and
     .odm-body takes its scroll back. */
  @media (max-width: 900px) {
    .odm-body {
      grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px;
      padding: 18px 24px 24px; overflow: auto; align-content: start;
    }
    .odm.is-casecheck .odm-body { grid-template-columns: minmax(0, 1fr); }
    .odm-info {
      overflow: visible; border-right: 0; border: 1px solid var(--border);
      border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .odm-info-head { position: static; border-radius: 14px 14px 0 0; }
    .odm-main { overflow: visible; padding: 0; display: grid; align-content: start; }
    .odm-tabs { position: static; margin: 0; padding: 0; background: none; }
  }

  /* ---- Workflow ----
     History shares this panel with the stages (it has no tab of its own), so it
     gets a rule and a heading to separate the two rather than a card. */
  .odm-subhead { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--border); align-items: center; }
  .odm-subhead-title { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foreground); }
  .odm-subhead-title .mt-tab-count { letter-spacing: 0; }
  .odm-stages { padding: 4px 2px 0; }
  .odm-stages .ot-stage__timeline { width: 48px; }
  .odm-stages .ot-stage__indicator { width: 32px; height: 32px; font-size: 13px; }
  .odm-stages .ot-stage__content { padding-bottom: 18px; padding-top: 2px; }
  .odm-stages .ot-stage__header { gap: 10px; margin-bottom: 10px; padding: 4px 6px 4px 4px; border-radius: 8px; }
  .odm-stages .ot-stage__header:hover { background: color-mix(in oklab, var(--accent) 60%, transparent); }
  .odm-stages .ot-stage__name { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foreground); }
  .odm-stages .ot-stage__count { font-size: 11px; font-weight: 700; padding: 2px 9px; font-variant-numeric: tabular-nums; }
  .odm-stages .ot-stage__nodes { gap: 6px; }
  .odm-stages .ot-node { padding: 10px 14px; gap: 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); }
  .odm-stages .ot-node:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); background: var(--accent); }
  .odm-stages .ot-node--in_progress { background: color-mix(in oklab, var(--primary) 8%, var(--card)); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
  .odm-stages .ot-node--completed .ot-node__icon--completed { background: var(--success); border-color: var(--success); }
  .odm-stages .ot-node__icon { width: 20px; height: 20px; border-width: 1.5px; }
  .odm-stages .ot-node__label { font-size: 13.5px; font-weight: 600; }
  .odm-stages .ot-node__label.is-muted { color: var(--muted-foreground); font-weight: 500; }
  .odm-stages .ot-node__paid-badge { font-size: 10px; padding: 2px 8px; }
  .odm-stages .ot-node--paid { background: color-mix(in oklab, var(--success) 8%, var(--card)); border-color: color-mix(in oklab, var(--success) 40%, var(--border)); }

  /* ---- Calendar ---- */
  .odm-calendar-wrap { min-height: 460px; display: flex; flex-direction: column; padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
  .odm-calendar-wrap .mini-cal { flex: 1; min-height: 440px; }

  /* ---- Payments ---- */
  .odm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  @media (max-width: 720px) { .odm-stats { grid-template-columns: 1fr; } }
  .odm-stat { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--muted) 40%, transparent); }
  .odm-stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .odm-stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .odm-stat.is-success { border-color: color-mix(in oklab, var(--success) 35%, var(--border)); background: color-mix(in oklab, var(--success) 7%, transparent); }
  .odm-stat.is-success .odm-stat-value { color: var(--success); }
  .odm-two-col { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
  @media (max-width: 960px) { .odm-two-col { grid-template-columns: 1fr; } }
  .odm-card { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
  .odm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); }
  .odm-card-head-text { display: grid; gap: 3px; min-width: 0; }
  .odm-card-title { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foreground); }
  .odm-card-title svg { width: 14px; height: 14px; color: var(--primary); }
  .odm-card-sub { font-size: 11.5px; color: var(--muted-foreground); }
  .odm-card-head .cdm-panel-actions { margin-left: auto; }
  .odm-terms { display: grid; }
  .odm-terms .ot-pt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .odm-terms .ot-pt-row:last-of-type { border-bottom: 0; }
  .odm-terms .ot-pt-type-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; }
  .odm-terms .ot-pt-type-badge--date { color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); }
  .odm-terms .ot-pt-type-badge--event { color: var(--success); background: color-mix(in oklab, var(--success) 10%, transparent); }
  .odm-terms .ot-pt-trigger { font-size: 13px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .odm-terms .ot-pt-amount { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--foreground); }
  .odm-terms .ot-pt-total-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 2px solid var(--border); background: color-mix(in oklab, var(--muted) 50%, transparent); }
  .odm-terms .ot-pt-total-row__label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
  .odm-terms .ot-pt-total-row__amount { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--foreground); }
  .odm-terms .ot-pt-empty-state, .odm-terms .ot-pt-loading { padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
  .odm-table-wrap { border: 0; border-radius: 0; }
  .odm-table thead th:first-child, .odm-table tbody td:first-child { padding-left: 14px; }
  .odm-table .odm-th-money, .odm-table .cdm-td-money { text-align: right; }
  .odm-table tbody tr.clickable-row { cursor: pointer; }
  .odm-table tbody td:nth-child(3) { color: var(--muted-foreground); font-weight: 500; }
  .odm-table .status-badge { padding: 3px 9px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; border: 1px solid color-mix(in oklab, currentColor 30%, transparent); }

  /* ---- History ---- */
  /* History block under the workflow stages (was its own tab). */
  .odm-hist .cdm-hist-dot { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent); }
  .odm-hist[data-kind="create"] .cdm-hist-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 20%, transparent); }
  .odm-hist[data-kind="delete"] .cdm-hist-dot { background: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
  .odm-hist[data-kind="note"] .cdm-hist-dot { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warning) 20%, transparent); }
  .odm-hist[data-kind="create"] .cdm-hist-action { color: var(--success); }
  .odm-hist[data-kind="delete"] .cdm-hist-action { color: var(--destructive); }
  .odm-hist[data-kind="note"] .cdm-hist-action { color: var(--warning); }
  .odm-hist.is-pinned .cdm-hist-card { border-color: color-mix(in oklab, var(--warning) 45%, var(--border)); background: color-mix(in oklab, var(--warning) 5%, var(--card)); }
  .odm-pinned-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warning); background: color-mix(in oklab, var(--warning) 12%, transparent); border: 1px solid color-mix(in oklab, var(--warning) 35%, transparent); }
  .odm-pinned-badge svg { width: 10px; height: 10px; }
  .odm-hist-actions { display: inline-flex; gap: 2px; margin-left: 4px; }
  .odm-hist .cdm-hist-time { margin-left: auto; }
  .odm-hist-btn { width: 26px; height: 26px; color: var(--muted-foreground); opacity: 0.6; }
  .odm-hist-btn svg { width: 13px; height: 13px; }
  .odm-hist-btn:hover { opacity: 1; color: var(--foreground); }
  .odm-hist-btn.is-on { opacity: 1; color: var(--warning); }
  .odm-hist-btn.is-on:hover { color: var(--foreground); }
  .odm-hist-btn.edit-history-btn:hover { color: var(--primary); }
  .odm-hist-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .odm-hist-changes li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--foreground); }
  .odm-hist-changes strong { font-weight: 600; padding: 1px 7px; border-radius: 6px; background: color-mix(in oklab, var(--muted) 70%, transparent); border: 1px solid var(--border); }
  .odm-hist-changes em { font-style: italic; color: var(--muted-foreground); }
  .odm-hist-field { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); min-width: 96px; }
  .odm-hist-set { font-size: 12px; color: var(--muted-foreground); }
  .odm-hist-arrow { width: 13px; height: 13px; color: var(--muted-foreground); flex: none; }

  /* ---- CaseCheck panel (casecheckUpdates.js renders the tiles / update rows) ----
     Identity details: a 12-column grid of .odm-field tiles on the same muted tint the
     order information band uses. View mode shows label over value; .is-editing swaps
     the values for inputs (and, on custom tiles, the label for a name input). */
  .odm-identity { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; padding: 14px; background: color-mix(in oklab, var(--muted) 22%, transparent); }
  .odm-identity > p, .odm-cc-updates > p { grid-column: 1 / -1; margin: 0; color: var(--muted-foreground); font-size: 13px; }
  .odm-identity > p.is-error, .odm-cc-updates > p.is-error { color: var(--destructive); }
  .cc-tile.odm-field--c6 { grid-column: span 6; }
  @media (max-width: 1100px) { .odm-identity { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cc-tile.odm-field--c6 { grid-column: span 6; } }
  @media (max-width: 760px) { .odm-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-tile.odm-field--c6 { grid-column: 1 / -1; } }

  .cc-tile { gap: 4px; }
  .cc-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 16px; }
  .cc-tile-head .odm-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cc-tile-head .odm-label.is-muted { font-style: italic; opacity: 0.75; }
  .cc-tile .odm-value { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; align-items: flex-start; padding-top: 2px; }
  .cc-tile--anchor { border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); background: color-mix(in oklab, var(--primary) 4%, var(--card)); }
  .cc-tile--anchor .odm-label { color: var(--primary); }
  .cc-tile--anchor .odm-value { font-size: 15px; font-weight: 800; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
  .cc-identity-link { color: var(--primary); text-decoration: none; overflow-wrap: anywhere; }
  .cc-identity-link:hover { text-decoration: underline; }
  .cc-tile .input { height: 34px; font-size: 13px; }
  .cc-tile .cc-identity-key.input { height: 28px; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .cc-tile-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease; }
  .cc-tile-remove svg { width: 12px; height: 12px; }
  .cc-tile-remove:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); border-color: color-mix(in oklab, var(--destructive) 30%, transparent); }
  /* View <-> edit. Inputs and the remove button exist in the DOM in both modes; the
     container's .is-editing class decides which half of each tile shows. */
  .odm-identity:not(.is-editing) :is(.cc-identity-value, .cc-tile--custom .cc-identity-key, .cc-tile-remove) { display: none; }
  .odm-identity.is-editing :is(.cc-identity-view, .cc-identity-key-view) { display: none; }
  .odm-identity.is-editing .cc-tile { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); background: color-mix(in oklab, var(--primary) 3%, var(--card)); }
  .odm-identity.is-editing .cc-tile .odm-label { color: var(--primary); }
  .odm-card-head .cdm-panel-actions .btn[hidden] { display: none; }

  /* Update log: one row per update — date + note preview on the left, two status
     chips (report / guidance) on the right, chevron. The whole row opens the drawer. */
  .odm-cc-updates { padding: 0; }
  .odm-cc-updates > p { padding: 12px 14px; }
  .cc-updates { list-style: none; margin: 0; padding: 0; display: grid; }
  .cc-update { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background-color 0.12s ease; }
  .cc-update:last-child { border-bottom: 0; }
  .cc-update:hover { background: var(--accent); }
  .cc-update:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ring) 55%, transparent); }
  .cc-update-main { min-width: 0; display: grid; gap: 4px; }
  .cc-update-title { font-size: 14px; font-weight: 800; letter-spacing: 0.01em; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .cc-update-note { font-size: 12.5px; line-height: 1.4; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cc-update-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .cc-update-chev { grid-column: 3; grid-row: 1; width: 16px; height: 16px; color: var(--muted-foreground); }
  .cc-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 12px; white-space: nowrap; }
  .cc-chip-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--muted-foreground); opacity: 0.45; }
  .cc-chip-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
  .cc-chip-v { font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .cc-chip[data-tone="none"] .cc-chip-v { color: var(--muted-foreground); font-weight: 500; }
  .cc-chip[data-tone="done"] { border-color: color-mix(in oklab, var(--success) 35%, var(--border)); background: color-mix(in oklab, var(--success) 6%, var(--card)); }
  .cc-chip[data-tone="done"] .cc-chip-dot { background: var(--success); opacity: 1; }
  .cc-chip[data-tone="unsent"] { border-color: color-mix(in oklab, var(--destructive) 35%, var(--border)); background: color-mix(in oklab, var(--destructive) 6%, var(--card)); }
  .cc-chip[data-tone="unsent"] .cc-chip-dot { background: var(--destructive); opacity: 1; }
  .cc-chip[data-tone="unsent"] .cc-chip-v { color: var(--destructive); }
  .cc-chip[data-tone="warn"] { border-color: color-mix(in oklab, var(--warning) 40%, var(--border)); background: color-mix(in oklab, var(--warning) 8%, var(--card)); }
  .cc-chip[data-tone="warn"] .cc-chip-dot { background: var(--warning); opacity: 1; }
  @media (max-width: 900px) { .cc-update { grid-template-columns: minmax(0, 1fr) 16px; } .cc-update-chips { grid-column: 1 / -1; justify-content: flex-start; } .cc-update-chev { grid-column: 2; } }
  .cc-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; }
  .cc-pill[data-tone="viewed"] { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 40%, transparent); background: color-mix(in oklab, var(--primary) 8%, transparent); }
  .cc-pill[data-tone="accepted"] { color: var(--success); border-color: color-mix(in oklab, var(--success) 45%, transparent); background: color-mix(in oklab, var(--success) 10%, transparent); }
  .cc-pill[data-tone="expired"] { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 45%, transparent); background: color-mix(in oklab, var(--warning) 10%, transparent); }
  .cc-empty { display: grid; justify-items: center; gap: 6px; padding: 30px 16px; text-align: center; color: var(--muted-foreground); }
  .cc-empty svg { width: 28px; height: 28px; opacity: 0.55; margin-bottom: 4px; }
  .cc-empty strong { font-size: 13px; color: var(--foreground); }
  .cc-empty span { font-size: 12px; max-width: 360px; }

  /* ---- CaseCheck guidance sub-tab (#cc-subpanel-guidance, .ccd) ----
     Lives inside the order drawer's CaseCheck panel. Client report on the left
     (sticky), guidance workflow on the right, so the attorney reads the report
     while writing the answer to it. Stacks into one column under 1100px. */
  .ccd-head-meta { font-size: 12px; color: var(--muted-foreground); }
  /* Resolved notice under the head meta (#casecheck-detail-status). Warning
     tone, same as the send notes, because it is a rule, not a detail. */
  .ccd-head-status { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--warning); }
  /* display: grid here rather than inherited from .cdm-body: this is a tab
     panel now, not the drawer's own scrolling body. */
  .ccd-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 18px; }
  .ccd-report-card { position: sticky; top: 0; }
  @media (max-width: 1100px) { .ccd-body { grid-template-columns: minmax(0, 1fr); } .ccd-report-card { position: static; } }
  .ccd-report { padding: 16px 18px; font-size: 13.5px; line-height: 1.65; color: var(--foreground); white-space: pre-wrap; overflow-wrap: anywhere; max-height: calc(100vh - 250px); overflow: auto; }
  .ccd-report.is-muted { color: var(--muted-foreground); font-style: italic; }
  .ccd-guidance { display: grid; gap: 18px; min-width: 0; }
  .ccd-form { display: grid; gap: 16px; padding: 16px; }
  .ccd-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
  .ccd-step + .ccd-step { padding-top: 16px; border-top: 1px dashed var(--border); }
  .ccd-step-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); font-size: 12px; font-weight: 800; }
  .ccd-step-body { display: grid; gap: 8px; min-width: 0; }
  .ccd-form .label { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--foreground); }
  .ccd-form .label small { font-size: 11px; font-weight: 500; color: var(--muted-foreground); }
  .ccd-form .textarea { font-size: 13px; line-height: 1.5; resize: vertical; }
  .ccd-final-text { min-height: 260px; font-size: 13.5px; line-height: 1.6; }
  .ccd-fee-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; align-items: end; }
  .ccd-fee { display: grid; gap: 6px; }
  .ccd-fee-input { position: relative; }
  .ccd-fee-input > span { position: absolute; left: 11px; top: 50%; translate: 0 -50%; font-size: 13px; font-weight: 600; color: var(--muted-foreground); pointer-events: none; }
  .ccd-fee-input .input { height: 34px; padding-left: 24px; font-size: 13px; }
  .ccd-hint { font-size: 11.5px; line-height: 1.4; color: var(--muted-foreground); padding-bottom: 8px; }
  @media (max-width: 760px) { .ccd-fee-row { grid-template-columns: minmax(0, 1fr); } }
  .ccd-card-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); }
  .ccd-card-foot .btn svg { width: 13px; height: 13px; }
  .ccd-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px 14px 24px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 45%, transparent); }
  /* Service chips — checkbox labels rendered by renderGuidanceServices. */
  .cc-guidance-services { display: flex; flex-wrap: wrap; gap: 8px; }
  .cc-guidance-services__note { font-size: 12.5px; color: var(--muted-foreground); }
  .cc-guidance-service { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--foreground); cursor: pointer; user-select: none; transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease; }
  .cc-guidance-service:hover { border-color: color-mix(in oklab, var(--foreground) 18%, var(--border)); }
  .cc-guidance-service:has(input:checked) { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, var(--card)); color: var(--primary); }
  .cc-guidance-service__check { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); }
  /* Saved / Sent lines under the final guidance (renderGuidanceMeta). */
  .cc-meta { display: grid; gap: 8px; }
  .cc-meta:empty { display: none; }
  .cc-meta__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 12.5px; }
  .cc-meta__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .cc-meta__body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
  .cc-meta__value { font-weight: 600; color: var(--foreground); }
  .cc-meta__value--pending { font-weight: 500; font-style: italic; color: var(--muted-foreground); }
  .cc-meta__by { font-size: 12px; color: var(--muted-foreground); }
  .cc-meta__note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--warning); }
}

/* =====================================================================
   Step dialogs (.stm) — Change Step (#step-change-modal) and Set Task
   (#change-status-modal) in pages/matters.html. Both ride the .ncm shell:
   main column for comment / dates / step-specific sections, muted side
   panel for assignee, calendar switch and team chips.
   ===================================================================== */
@scope (.bc) {
  .stm > form { max-width: 720px; }
  .stm--task > form { max-width: 900px; }
  .stm-body { grid-template-columns: minmax(0, 1fr) 270px; }
  .stm--task .stm-body { grid-template-columns: minmax(0, 1fr) 260px; }
  @media (max-width: 860px) { .stm-body, .stm--task .stm-body { grid-template-columns: 1fr; } }
  .stm-target { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .stm-step-chip { height: 26px; padding: 0 11px 0 9px; font-size: 12px; font-weight: 700; --step-color: var(--primary); }
  .stm-step-chip strong { font-weight: 700; }
  .stm-hint { margin-top: -6px; }
  .stm .textarea { min-height: 110px; }

  /* Native selects dressed by enhanceSelect(): the <select> is hidden inline, the
     dropdown lives in the .select-enhancer host that follows it. */
  .stm .select-enhancer .searchable-dropdown .dropdown-search { height: 36px; font-size: 13.5px; background: var(--card); }
  .stm .select-enhancer .searchable-dropdown[data-searchable="false"] .dropdown-search { cursor: pointer; caret-color: transparent; }
  .stm .searchable-dropdown .dropdown-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--foreground); }
  .stm .searchable-dropdown .dropdown-item:hover { background: var(--accent); }
  .stm .searchable-dropdown .dropdown-item.selected { background: color-mix(in oklab, var(--primary) 10%, transparent); }
  .stm .searchable-dropdown .dropdown-item.selected .dropdown-item-label { font-weight: 600; }
  .stm .searchable-dropdown .dropdown-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stm .searchable-dropdown .dropdown-item-check { margin-left: auto; width: 14px; height: 14px; color: var(--primary); flex: none; }

  /* Date pickers (dpConvertInput) */
  .stm .dp-wrap { width: 100%; }
  .stm .dp-trigger { width: 100%; height: 36px; padding: 0 12px; gap: 8px; font-size: 13.5px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
  .stm .dp-trigger:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  .stm .dp-trigger.is-open, .stm .dp-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .stm .dp-trigger.is-placeholder .dp-trigger__label { color: var(--muted-foreground); }
  .stm .dp-trigger:not(.is-placeholder) .dp-trigger__label { font-weight: 600; }
  .stm .dp-trigger__icon { width: 15px; height: 15px; color: var(--muted-foreground); }

  /* Calendar switch: two-line label */
  .stm-switch { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; user-select: none; }
  .stm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .stm-switch .odm-switch-track { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: color-mix(in oklab, var(--muted-foreground) 30%, var(--muted)); transition: background-color 0.15s ease; }
  .stm-switch .odm-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: translate 0.15s ease; }
  .stm-switch input:checked + .odm-switch-track { background: var(--primary); }
  .stm-switch input:checked + .odm-switch-track::after { translate: 16px 0; }
  .stm-switch input:focus-visible + .odm-switch-track { outline: 2px solid var(--ring); outline-offset: 2px; }
  .stm-switch-text { display: grid; gap: 1px; min-width: 0; }
  .stm-switch-text strong { font-size: 13px; font-weight: 700; color: var(--foreground); }
  .stm-switch-text small { font-size: 11.5px; line-height: 1.35; color: var(--muted-foreground); }

  /* Team chips: real checkboxes, styled as toggles */
  .stm-teams { display: flex; flex-wrap: wrap; gap: 6px; }
  .stm-team { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--foreground); font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
  .stm-team input { position: absolute; opacity: 0; width: 0; height: 0; }
  .stm-team::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); opacity: 0.5; transition: background-color 0.15s ease, opacity 0.15s ease; }
  .stm-team:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: var(--accent); }
  .stm-team:has(input:checked) { background: color-mix(in oklab, var(--primary) 12%, var(--card)); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent); }
  .stm-team:has(input:checked)::before { background: var(--primary); opacity: 1; }
  .stm-team:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

  /* Step-specific sections inside Set Task */
  .stm-section { display: grid; gap: 14px; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--muted) 40%, transparent); }
  .stm-section-head { display: grid; gap: 3px; }
  .stm-section-title { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foreground); }
  .stm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .stm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stm-grid-wide { grid-column: 1 / -1; }
  .stm-grid--3 .stm-grid-wide { grid-column: span 3; }
  @media (max-width: 640px) { .stm-grid, .stm-grid--3 { grid-template-columns: 1fr; } .stm-grid--3 .stm-grid-wide { grid-column: auto; } }
  .stm-section .textarea { min-height: 64px; }
  .stm-details { display: grid; gap: 12px; }
  .stm-details > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--primary); user-select: none; }
  .stm-details > summary::-webkit-details-marker { display: none; }
  .stm-details > summary svg { width: 13px; height: 13px; transition: transform 0.15s ease; }
  .stm-details[open] > summary svg { transform: rotate(90deg); }
  .stm .field .ncm-hint { margin-top: 2px; }
}

/* =====================================================================
   Billing page (pages/billing.html) — Time Entries / Expenses / Invoices
   ---------------------------------------------------------------------
   Rides the Matters chrome wholesale: .mt-head / .mt-tabs / .mt-card /
   .mt-filters / .mt-table / .mt-pagination--std. The shared rules above were
   widened to `:is(.matters-page, .billing-page, .cashier-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page)` where they were page-scoped;
   everything billing-specific (comboboxes, numeric columns, the amount range
   field) lives here under a `bl-` prefix. Element ids are owned by billing.js.
   ===================================================================== */
.main-content:has(> .billing-scope) { padding-inline: 0; }
.main-content:has(> .cashier-scope) { padding-inline: 0; }
.main-content:has(> .vault-scope) { padding-inline: 0; }
.main-content:has(> .revenue-scope) { padding-inline: 0; }
.main-content:has(> .ra-scope) { padding-inline: 0; }
.main-content:has(> .intk-scope) { padding-inline: 0; }
.main-content:has(> .docs-scope) { padding-inline: 0; }
.main-content:has(> .tickets-scope) { padding-inline: 0; }

@scope (.bc) {
  .billing-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .billing-page .mt-head-actions .btn { height: 38px; }

  /* ---- Tables: numeric columns right-aligned, Case is the identity column ---- */
  .bl-table thead th.bl-th-num, .bl-table tbody td.bl-td-num { text-align: right; font-variant-numeric: tabular-nums; }
  .bl-table tbody td.bl-td-num { color: var(--foreground); font-weight: 600; }
  .bl-table tbody td.bl-td-total { color: var(--foreground); font-weight: 700; }
  /* .mt-table bolds column 4 (Title on Matters); billing marks its identity cell explicitly */
  .bl-table tbody td:nth-child(4) { color: var(--text-secondary); font-weight: 500; }
  .bl-table tbody td:nth-child(4) .link { color: var(--text-secondary); }
  .bl-table tbody td.bl-td-title, .bl-table tbody td.bl-td-title .link { color: var(--foreground); font-weight: 600; }
  .bl-table tbody td.bl-td-title .link:hover { color: var(--primary); }
  .bl-table tbody td.bl-td-desc { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bl-table tbody td.bl-td-id { font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
  .bl-table tbody td.bl-td-ee { font-weight: 700; letter-spacing: 0.04em; color: var(--foreground); }
  .bl-table th.mt-col-title { min-width: 200px; }
  /* Billable / non-billable flag */
  .bl-flag {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
    color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border);
  }
  .bl-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
  .bl-flag.is-on { color: var(--success); background: color-mix(in oklab, var(--success) 10%, transparent); border-color: color-mix(in oklab, var(--success) 30%, transparent); }
  /* Row actions (Invoices: preview / download) */
  .bl-table td.cdm-td-action { text-align: right; white-space: nowrap; width: 1%; }
  .bl-row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
  .bl-row-actions .btn[data-size="icon"] { width: 30px; height: 30px; padding: 0; background: var(--card); }
  .bl-row-actions .btn svg { width: 14px; height: 14px; }
  .bl-row-actions .btn:hover { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  /* Empty / error states */
  .bl-table td > .cdm-empty { border: 0; padding: 36px 16px; }
  .bl-table td > .cdm-empty.is-error strong { color: var(--destructive); }

  /* ---- Filter panel ---- */
  .bl-filters .mt-filters-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .bl-filters .mt-field--wide { grid-column: span 2; }
  .bl-filters .drp-trigger { width: 100%; white-space: nowrap; overflow: hidden; }
  .bl-filters .drp-trigger > span { overflow: hidden; text-overflow: ellipsis; }
  .bl-filters .drp-trigger.has-selection > span { font-weight: 600; color: var(--foreground); }
  /* Filter dropdowns (billing.js `_bdd*`): Matters .mtd-* menus, pinned fixed under the trigger */
  .bl-filters .dropdown-trigger .dropdown-search[readonly] { cursor: pointer; caret-color: transparent; }
  .bdd-check { flex: none; display: grid; place-items: center; width: 16px; height: 16px; color: var(--primary); }
  .bdd-check svg { width: 12px; height: 12px; }
  .mtd-item .mtd-code { min-width: 34px; }
  .mtd-dot[data-status="invoiced"], .mtd-dot[data-status="sent"] { background: var(--primary); color: var(--primary); }
  .mtd-dot[data-status="draft"] { background: var(--muted-foreground); color: var(--muted-foreground); }
  .mtd-dot[data-status="paid"], .mtd-dot[data-status="billable"] { background: var(--success); color: var(--success); }
  .mtd-dot[data-status="partially_paid"] { background: var(--warning); color: var(--warning); }
  .mtd-dot[data-status="overdue"], .mtd-dot[data-status="cancelled"] { background: var(--destructive); color: var(--destructive); }
  .mtd-dot[data-status="non_billable"] { background: var(--muted-foreground); color: var(--muted-foreground); opacity: 0.8; }
  @media (min-width: 1280px) {
    #time-entries-filter-panel .mt-filters-grid, #expenses-filter-panel .mt-filters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #invoices-filter-panel .mt-filters-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  }
  .bl-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
  .bl-range-sep { font-size: 13px; color: var(--muted-foreground); }
  .bl-filters .mt-filters-actions .btn:not([data-variant]) svg { width: 12px; height: 12px; }

  /* ---- Combobox (billing.js renders .searchable-select-item rows into the list) ----
     Used by the filter panels and inside the drawers. .bl-combo carries the
     specificity so the legacy .searchable-select-dropdown skin in styles.css loses. */
  .bl-combo { position: relative; width: 100%; }
  .bl-combo > .input { padding-right: 34px; }
  .bl-combo > .input:not(:placeholder-shown) { color: var(--foreground); font-weight: 600; }
  .bl-combo-arrow {
    position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 12px; height: 12px;
    color: var(--muted-foreground); pointer-events: none; transition: rotate 0.18s ease, color 0.15s ease;
  }
  .bl-combo > .input:focus ~ .bl-combo-arrow { rotate: 180deg; color: var(--primary); }
  .bl-combo .bl-menu {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
    max-height: 264px; overflow-y: auto; padding: 6px; margin: 0;
    border: 1px solid var(--border); border-radius: 12px; background: var(--popover); color: var(--foreground);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .bl-combo .bl-menu.open { display: grid; gap: 2px; align-content: start; }
  .bl-combo .bl-menu .searchable-select-item {
    display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px;
    border-radius: 8px; font-size: 13px; line-height: 1.3; color: var(--foreground); cursor: pointer; user-select: none;
    white-space: normal; transition: background-color 0.12s ease;
  }
  .bl-combo .bl-menu .searchable-select-item:hover { background: var(--accent); color: var(--foreground); }
  .bl-combo .bl-menu .searchable-select-item.is-selected { background: color-mix(in oklab, var(--primary) 10%, transparent); font-weight: 600; }
  .bl-combo .bl-menu .searchable-select-item.is-selected .mtd-chk { background: var(--primary); border-color: var(--primary); color: #fff; }
  .bl-combo .bl-menu .searchable-select-item .mtd-chk svg { width: 10px; height: 10px; }
  .bl-combo .bl-menu .searchable-select-empty { padding: 14px 10px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
}

/* =====================================================================
   Right-hand drawers: .bl-drawer
   Named for Billing, where they started (#time-entry-modal / #expense-modal /
   #invoice-modal), but the selectors are deliberately unscoped and the
   Documents page's #sf-genh-modal rides them too. Panels slide in from the
   right on the legacy .modal-overlay plumbing (showModal/hideModal +
   attachModalCloseHandlers), reusing the .cdm shell and the detail-drawer
   keyframes defined above. The delete / terminate confirms (.bl-confirm) stack
   above the drawer as small centered cards. Outside @scope: the overlay is the
   .bc root.
   ===================================================================== */
.modal-overlay.bl-drawer { z-index: 950; padding: 0; align-items: stretch; justify-content: flex-end; }
.modal-overlay.bl-drawer > .cdm {
  width: min(100vw, max(56vw, 980px)); max-width: none;
  height: 100%; max-height: none;
  border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
}
.modal-overlay.bl-drawer--wide > .cdm { width: min(100vw, max(78vw, 1180px)); }
.modal-overlay.bl-drawer--narrow > .cdm { width: min(100vw, max(38vw, 620px)); }
.modal-overlay.bl-drawer.active { animation: cdm-drawer-fade 240ms ease both; }
.modal-overlay.bl-drawer.active > .cdm { animation: cdm-drawer-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.modal-overlay.bl-drawer.is-closing { visibility: visible; pointer-events: none; animation: cdm-drawer-fade-out 260ms ease both; }
.modal-overlay.bl-drawer.is-closing > .cdm { animation: cdm-drawer-out 300ms cubic-bezier(0.4, 0, 0.7, 1) both; }
/* Confirms sit above the drawer; a second full-strength dim over an active drawer
   reads as a black screen, so the stacked overlay only adds a light veil. */
.modal-overlay.bl-confirm { z-index: 1200; padding: 24px; }
.modal-overlay.bl-confirm.active { animation: cdm-drawer-fade 200ms ease both; }
/* hideModal() waits for the panel's animationend when it has an exit animation
   (utils.js _animateOverlayExit), so give the card a real one — otherwise the
   finished entry animation is mistaken for it and the overlay lingers 700ms. */
.modal-overlay.bl-confirm.is-closing { visibility: visible; pointer-events: none; animation: cdm-drawer-fade-out 160ms ease both; }
.modal-overlay.bl-confirm.is-closing > .blc { animation: blc-pop-out 160ms ease both; }
@keyframes blc-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.98); } }
:root:has(.modal-overlay.bl-drawer.active) .modal-overlay.bl-confirm {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@keyframes blc-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.bl-drawer.active, .modal-overlay.bl-drawer.active > .cdm,
  .modal-overlay.bl-drawer.is-closing, .modal-overlay.bl-drawer.is-closing > .cdm,
  .modal-overlay.bl-confirm.active, .modal-overlay.bl-confirm .blc,
  .modal-overlay.bl-confirm.is-closing, .modal-overlay.bl-confirm.is-closing > .blc { animation: none; }
}
@media (max-width: 1000px) { .modal-overlay.bl-drawer:not(.bl-drawer--narrow) > .cdm { width: 100vw; border-left: 0; } }
@media (max-width: 700px) { .modal-overlay.bl-drawer--narrow > .cdm { width: 100vw; border-left: 0; } }

/* dp-single popover for the billing drawers. dp_single.js portals the popover to
   <body> while open (to escape the drawer's overflow/stacking), so this skin lives
   outside @scope and is switched on by the `bl-dp` class billing.js adds. */
.dp-popover.bl-dp {
  width: 304px; padding: 14px 14px 12px;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
}
.dp-popover.bl-dp .dp-cal-title { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--foreground); }
.dp-popover.bl-dp .dp-nav { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); }
.dp-popover.bl-dp .dp-nav:hover { background: var(--accent); color: var(--foreground); }
.dp-popover.bl-dp .dp-dow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.dp-popover.bl-dp .dp-day { border-radius: 8px; font-size: 12.5px; color: var(--foreground); }
.dp-popover.bl-dp .dp-day:hover { background: var(--accent); color: var(--foreground); }
.dp-popover.bl-dp .dp-day--other { color: color-mix(in oklab, var(--muted-foreground) 55%, transparent); opacity: 1; }
.dp-popover.bl-dp .dp-day--today { border: 0; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent); color: var(--primary); font-weight: 700; }
.dp-popover.bl-dp .dp-day--selected, .dp-popover.bl-dp .dp-day--selected:hover { background: var(--primary); color: #fff; box-shadow: none; }
.dp-popover.bl-dp .dp-footer { padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--border); }
.dp-popover.bl-dp .dp-status { font-size: 12px; color: var(--foreground); }
.dp-popover.bl-dp .dp-status.is-empty { color: var(--muted-foreground); }
.dp-popover.bl-dp .dp-btn {
  height: 30px; padding: 0 12px; border-radius: var(--radius-md);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--border); background: var(--card); color: var(--foreground);
}
.dp-popover.bl-dp .dp-btn:hover { background: var(--accent); border-color: var(--border); color: var(--foreground); }
.dp-popover.bl-dp .dp-btn--apply { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.dp-popover.bl-dp .dp-btn--apply:hover { background: color-mix(in oklab, var(--primary) 88%, #000); border-color: color-mix(in oklab, var(--primary) 88%, #000); color: var(--primary-foreground); }
@media (max-width: 1200px) { .modal-overlay.bl-drawer--wide > .cdm { width: 100vw; border-left: 0; } }

@scope (.bc) {
  /* ---- Shell ---- */
  .blm .cdm-head { padding-right: 18px; }
  .blm .cdm-title { white-space: normal; }
  .blm-sub { font-size: 13px; line-height: 1.4; color: var(--muted-foreground); margin-top: 2px; }
  .blm-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .blm-body {
    flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px 24px 24px;
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; align-content: start;
  }
  .blm-body--stack { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .blm-main { display: grid; gap: 16px; min-width: 0; align-content: start; }
  .blm-side {
    display: grid; gap: 16px; min-width: 0; align-content: start; padding: 16px;
    border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--muted) 55%, transparent);
  }

  /* ---- Fields ---- */
  .blm .field { display: grid; gap: 6px; min-width: 0; }
  .blm .label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .blm-req { color: var(--destructive); font-weight: 800; }
  .blm-opt { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: none; color: var(--muted-foreground); opacity: 0.8; }
  .blm-hint { font-size: 11.5px; line-height: 1.4; color: var(--muted-foreground); margin: 0; }
  .blm-hint--error { color: var(--destructive); }
  .blm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .blm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Controls: one surface for hand-written fields and the .form-control rows billing.js generates */
  .blm .input, .blm .select, .blm .textarea, .blm .form-control {
    width: 100%; height: 36px; min-height: 0; padding: 0 12px; margin: 0;
    font: inherit; font-size: 13.5px; color: var(--foreground);
    background-color: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .blm .textarea, .blm textarea.form-control { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
  .blm select.select, .blm select.form-control {
    appearance: none; padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23808080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  }
  .blm :is(.input, .form-control)::placeholder { color: var(--muted-foreground); font-weight: 400; }
  .blm :is(.input, .select, .textarea, .form-control):hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  .blm :is(.input, .select, .textarea, .form-control):focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .blm :is(.input, .select, .textarea, .form-control):disabled { opacity: 0.55; cursor: not-allowed; }
  .blm .input[readonly] { background-color: color-mix(in oklab, var(--muted) 60%, transparent); color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; cursor: default; }
  .blm input[type="date"] { padding-right: 8px; color-scheme: inherit; }
  .blm input[type="number"] { font-variant-numeric: tabular-nums; }
  .blm .bl-combo > .input { padding-right: 34px; }
  .blm .bl-combo .bl-menu { z-index: 80; }

  /* Locked law-firm tile (same voice as the New Case dialog) */
  .blm-firm { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .blm-firm-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); }
  .blm-firm-icon svg { width: 18px; height: 18px; }
  .blm-firm-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .blm-firm-text strong { font-size: 13.5px; font-weight: 700; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .blm-firm-text small { font-size: 11.5px; line-height: 1.35; color: var(--muted-foreground); }
  .blm-firm-lock { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted-foreground); background: var(--muted); }
  .blm-firm-lock svg { width: 12px; height: 12px; }
  .blm-firm--compact { height: 36px; padding: 0 10px; gap: 10px; }
  .blm-firm--compact .blm-firm-icon { width: 26px; height: 26px; border-radius: 7px; }
  .blm-firm--compact .blm-firm-icon svg { width: 14px; height: 14px; }
  .blm-firm--compact .blm-firm-lock { width: 20px; height: 20px; }

  /* Amount */
  .blm-money { position: relative; }
  .blm-money-sym { position: absolute; left: 12px; top: 50%; translate: 0 -50%; font-size: 15px; font-weight: 700; color: var(--muted-foreground); pointer-events: none; }
  .blm-money > .input { height: 46px; padding-left: 28px; font-size: 18px; font-weight: 700; }

  /* ---- Sections ---- */
  .blm-section { display: grid; gap: 12px; min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--muted) 22%, transparent); }
  .blm-section--muted { background: transparent; border-style: dashed; }
  .blm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
  .blm-section-title { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foreground); }
  .blm-section-head .blm-section-sub { flex-basis: 100%; }
  .blm-section-sub { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted-foreground); }
  .blm-section-actions { display: flex; gap: 8px; margin-left: auto; }
  .blm-section .btn[data-size="sm"] { height: 30px; padding-inline: 10px; font-size: 11.5px; background: var(--card); }
  .blm-section .btn[data-size="sm"] svg { width: 12px; height: 12px; }

  /* Line-item tables (invoice) */
  .blm-lines { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .blm-lines-table thead th { position: sticky; top: 0; z-index: 1; background: color-mix(in oklab, var(--muted) 70%, var(--card)); }
  .blm-lines-table thead th:first-child, .blm-lines-table tbody td:first-child { padding-left: 14px; }
  .blm-lines-table thead th:last-child, .blm-lines-table tbody td:last-child { padding-right: 14px; }
  .blm-lines-table tbody td { padding: 9px 12px; font-size: 13px; }
  .blm-lines-table tbody tr { cursor: default; }
  .blm-lines-table tbody tr:hover td { background: color-mix(in oklab, var(--primary) 4%, transparent); }
  .blm-lines-table tbody tr:has(input:checked) td { background: color-mix(in oklab, var(--primary) 7%, transparent); color: var(--foreground); }
  .blm-th-check { width: 40px; }
  .blm-lines-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--primary); cursor: pointer; }
  .blm-lines-table td.blm-lines-empty, .blm-lines-table td[style*="text-align:center"] { text-align: center; padding: 22px 12px; font-size: 12.5px; color: var(--muted-foreground) !important; }
  .blm-lines-table tbody td:last-child:not(.blm-lines-empty) { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--foreground); }

  /* Dynamic rows generated by billing.js (flat fees / adjustments / payments / trust) */
  .blm-rows { display: grid; gap: 8px; }
  .blm-rows:empty::before {
    content: attr(data-empty); display: block; padding: 14px 12px; text-align: center;
    font-size: 12.5px; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: 10px;
  }
  .blm .dynamic-row, .blm .payment-history-row, .blm .trust-history-row { display: grid; gap: 8px; align-items: center; margin: 0; }
  .blm .dynamic-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1.2fr) auto; }
  .blm .payment-history-row { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.5fr) auto; }
  .blm .trust-history-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.8fr) minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto; }
  .blm .dynamic-row .form-control, .blm .payment-history-row .form-control, .blm .trust-history-row .form-control { height: 34px; font-size: 13px; }
  .blm .remove-row-btn {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted-foreground); cursor: pointer; opacity: 1;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }
  .blm .remove-row-btn:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); border-color: color-mix(in oklab, var(--destructive) 30%, transparent); opacity: 1; }
  .blm .remove-row-btn svg { width: 15px; height: 15px; }

  /* Non-billable disclosure */
  .blm-details { display: grid; gap: 12px; }
  .blm-details > summary {
    display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; user-select: none;
    padding: 10px 14px; border: 1px dashed var(--border); border-radius: 10px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foreground);
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .blm-details > summary:hover { background: var(--accent); }
  .blm-details > summary::-webkit-details-marker { display: none; }
  .blm-details > summary svg { width: 13px; height: 13px; color: var(--muted-foreground); transition: transform 0.15s ease; }
  .blm-details[open] > summary { border-style: solid; }
  .blm-details[open] > summary svg { transform: rotate(90deg); }
  .blm-details-note { margin-left: auto; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted-foreground); }

  /* Invoice layout grids */
  .blm-grid--inv-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blm-grid--lines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .blm-grid--totals { grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }

  /* Summary tiles */
  .blm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
  .blm-stat { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .blm-stat dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .blm-stat dd { margin: 0; }
  .blm-stat dd .input, .blm-stat dd .input[readonly] { height: 30px; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 16px; font-weight: 700; color: var(--foreground); }
  .blm-stat--strong { grid-column: 1 / -1; border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); background: color-mix(in oklab, var(--primary) 5%, var(--card)); }
  .blm-stat--strong dd .input, .blm-stat--strong dd .input[readonly] { font-size: 19px; color: var(--primary); }
  .blm-totals .blm-total-input, .blm-totals .blm-total-input[readonly] {
    height: 54px; font-size: 26px; font-weight: 900; letter-spacing: -0.01em; color: var(--foreground);
    background-color: color-mix(in oklab, var(--primary) 8%, var(--card)); border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  }

  /* ---- Footer ---- */
  .blm-foot {
    flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 14px 24px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 35%, transparent);
  }
  .blm-foot-start { margin-right: auto; }
  .blm-foot .btn { height: 38px; }
  .blm-foot .btn svg { width: 14px; height: 14px; }

  @media (max-width: 1100px) { .blm-grid--lines, .blm-grid--totals { grid-template-columns: 1fr; } }
  @media (max-width: 900px) {
    .blm-body { grid-template-columns: 1fr; }
    .blm-grid--inv-head, .blm-grid--3 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .blm-grid, .blm-grid--inv-head, .blm-grid--3 { grid-template-columns: 1fr; }
    .blm .dynamic-row, .blm .payment-history-row, .blm .trust-history-row { grid-template-columns: 1fr 1fr; }
  }

  /* ---- Compact drawer (time entry): single column, context tiles on top ---- */
  .blm--compact .blm-body { padding: 18px 22px 22px; gap: 16px; }
  .blm--compact .cdm-head { padding: 16px 18px 12px 22px; }
  .blm--compact .cdm-title { font-size: 19px; }
  .blm--compact .blm-foot { padding: 12px 22px; }
  .blm-context { background: color-mix(in oklab, var(--muted) 45%, transparent); padding: 14px; }
  .blm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .blm-tiles .field { gap: 6px; }
  .blm-firm--compact .blm-firm-text strong { font-size: 13px; }
  /* Staff tile: the locked read-only input from _lockStaffToCurrentUser() sits inside
     the tile as plain text; its inline background/cursor are neutralised here. */
  .blm-staff { position: relative; }
  .blm-staff-avatar { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: color-mix(in oklab, var(--primary) 16%, var(--muted)); }
  .blm .blm-staff-input, .blm .blm-staff-input[readonly] {
    flex: 1; min-width: 0; height: auto; padding: 0; margin: 0; border: 0; box-shadow: none;
    background: transparent !important; font-size: 13px; font-weight: 700; color: var(--foreground);
    cursor: default !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .blm .blm-staff-input::placeholder { color: var(--muted-foreground); font-weight: 500; }
  .blm-staff .searchable-select-list { display: none !important; }
  .blm-money--sm > .input { height: 36px; font-size: 14px; font-weight: 600; padding-left: 26px; }
  .blm-money--sm .blm-money-sym { font-size: 13px; }

  /* Single date picker (dpConvertInput) inside the drawers */
  .blm .dp-wrap { width: 100%; }
  .blm .dp-trigger {
    height: 36px; padding: 0 12px; gap: 8px; line-height: 1; font-size: 13.5px; color: var(--foreground);
    background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .blm .dp-trigger:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
  .blm .dp-trigger.is-open, .blm .dp-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .blm .dp-trigger__icon { width: 15px; height: 15px; color: var(--muted-foreground); }
  .blm .dp-trigger.is-open .dp-trigger__icon { color: var(--primary); }
  .blm .dp-trigger.is-placeholder .dp-trigger__label { color: var(--muted-foreground); }
  .blm .dp-trigger:not(.is-placeholder) .dp-trigger__label { font-weight: 600; }

  /* SearchableDropdown inside the drawers: the case picker (#time-entry-case-dropdown)
     and the enhanceSelect() hosts (.select-enhancer) share one skin — Matters menu shell,
     .mtd-* rows, status dots, trailing check on the selected row. */
  .blm .select-enhancer { width: 100%; }
  .blm .searchable-dropdown { z-index: auto; }
  .blm .searchable-dropdown.is-open { z-index: 120; }
  .blm .searchable-dropdown .dropdown-search {
    width: 100%; height: 36px; min-height: 0; padding: 0 34px 0 12px; margin: 0;
    font: inherit; font-size: 13.5px; color: var(--foreground);
    background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .blm .blm-case .searchable-dropdown .dropdown-search { height: 40px; padding-left: 38px; }
  .blm .blm-case .searchable-dropdown .dropdown-trigger::before {
    content: ""; position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.9;
  }
  .blm .searchable-dropdown[data-searchable="false"] .dropdown-search { cursor: pointer; caret-color: transparent; }
  .blm .searchable-dropdown .dropdown-search::placeholder { color: var(--muted-foreground); font-weight: 400; }
  .blm .searchable-dropdown .dropdown-search:not(:placeholder-shown) { font-weight: 600; }
  .blm .searchable-dropdown .dropdown-search:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  .blm .searchable-dropdown.is-open .dropdown-search, .blm .searchable-dropdown .dropdown-search:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .blm .searchable-dropdown.disabled .dropdown-search { opacity: 0.55; cursor: not-allowed; }
  .blm .searchable-dropdown .dropdown-arrow { right: 12px; color: var(--muted-foreground); transition: transform 0.18s ease, color 0.15s ease; }
  .blm .searchable-dropdown.is-open .dropdown-arrow { transform: rotate(180deg); color: var(--primary); }
  .blm .searchable-dropdown .dropdown-clear { right: 32px; padding: 4px; border-radius: 6px; color: var(--muted-foreground); }
  .blm .searchable-dropdown .dropdown-clear:hover { background: var(--accent); color: var(--foreground); }
  .blm .searchable-dropdown .dropdown-menu {
    margin-top: 6px; padding: 0; border-radius: 12px; border: 1px solid var(--border);
    background: var(--popover); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12); overflow: hidden;
  }
  .blm .searchable-dropdown .dropdown-items { display: grid; gap: 2px; padding: 6px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .blm .searchable-dropdown .dropdown-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 34px; padding: 6px 10px;
    border-radius: 8px; font-size: 13px; color: var(--foreground); cursor: pointer; user-select: none; text-align: left;
    transition: background-color 0.12s ease, border-color 0.12s ease;
  }
  .blm .searchable-dropdown .dropdown-item:hover { background: var(--accent); }
  .blm .searchable-dropdown .dropdown-item.selected { background: color-mix(in oklab, var(--primary) 10%, transparent); }
  .blm .searchable-dropdown .dropdown-item.selected .dropdown-item-label { font-weight: 600; }
  .blm .searchable-dropdown .dropdown-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .blm .searchable-dropdown .dropdown-item-check { margin-left: auto; width: 14px; height: 14px; color: var(--primary); flex: none; }
  .blm .searchable-dropdown .dropdown-item-empty { padding: 16px 10px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
  /* Case rows: card look with the case id code, title and client line */
  .blm .searchable-dropdown .dropdown-items:has(.case-opt) { gap: 4px; }
  .blm .searchable-dropdown .dropdown-item.case-opt { padding: 8px 10px; border: 1px solid var(--border); background: var(--card); }
  .blm .searchable-dropdown .dropdown-item.case-opt:hover { background: var(--accent); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  .blm .searchable-dropdown .dropdown-item.case-opt.selected { background: color-mix(in oklab, var(--primary) 10%, var(--card)); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); }
  .blm .case-opt .mtd-code { min-width: 44px; height: 26px; font-size: 11px; }
  .blm .case-opt .client-opt-text { flex: 1; }
  .blm .case-opt .dropdown-item-check { margin-left: 0; }
  /* Client rows (expense / invoice pickers) share the case card look */
  .blm .searchable-dropdown .dropdown-items:has(.client-opt) { gap: 4px; }
  .blm .searchable-dropdown .dropdown-item.client-opt { padding: 8px 10px; border: 1px solid var(--border); background: var(--card); }
  .blm .searchable-dropdown .dropdown-item.client-opt:hover { background: var(--accent); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  .blm .searchable-dropdown .dropdown-item.client-opt.selected { background: color-mix(in oklab, var(--primary) 10%, var(--card)); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); }
  .blm .client-opt .mtd-avatar { width: 30px; height: 30px; font-size: 11px; }
  .blm .client-opt .client-opt-text { flex: 1; }
  .blm .client-opt .dropdown-item-check { margin-left: 0; }
  .blm .blm-client .searchable-dropdown .dropdown-search { height: 40px; padding-left: 38px; }
  .blm .blm-client .searchable-dropdown .dropdown-trigger::before {
    content: ""; position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; pointer-events: none; opacity: 0.9;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Dependent selects (case / order): id code chip before the label */
  .blm .searchable-dropdown .dropdown-item.has-code .mtd-code { min-width: 40px; height: 24px; font-size: 10.5px; }
  /* Invoice details card: three columns, the picker row sits under firm / number / date */
  .blm--invoice .blm-context .blm-section-head { margin-bottom: 2px; }
  .blm--invoice .blm-grid--inv-head .field { min-width: 0; }
  .mtd-dot[data-status="hourly"] { background: var(--primary); color: var(--primary); }
  .mtd-dot[data-status="flat_fee"] { background: var(--warning); color: var(--warning); }

  /* ---- Confirm cards (delete / terminate) ---- */
  .blc {
    position: relative; display: grid; gap: 10px; width: min(440px, 100%); padding: 26px 26px 22px;
    border: 1px solid var(--border); border-radius: 16px; background: var(--card); color: var(--card-foreground);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); animation: blc-pop 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .blc-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 4px; }
  .blc-icon svg { width: 20px; height: 20px; }
  .blc-icon--danger { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 12%, transparent); }
  .blc-icon--warning { color: var(--warning); background: color-mix(in oklab, var(--warning) 14%, transparent); }
  .blc-title { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.25; color: var(--foreground); }
  .blc-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-foreground); }
  .blc-text strong { color: var(--foreground); }
  .blc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
  .blc .btn { height: 36px; padding-block: 0; }
}

/* =====================================================================
   Cashier page — pages/cashier.html
   Rides the Matters chrome wholesale (.mt-head / .mt-card / .mt-pills /
   .mt-table / .mt-pagination--std; the shared rules above were widened to
   `:is(.matters-page, .billing-page, .cashier-page, .vault-page, .revenue-page, .tickets-page, .ra-automator-page, .intakes-page, .documents-page)`). Everything
   cashier-specific — stat tiles, status pills, the transactions table
   columns — lives here under a `cs-` prefix. Element ids are owned by
   cashier.js / billing.js. Make Payment, Add Transaction, Filters and the
   transaction detail are right-side drawers (next banner).
   ===================================================================== */
@scope (.bc) {
  .cashier-page .mt-head-actions .btn { height: 38px; }

  /* ---- Stat tiles ---- */
  .cs-stats { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
  .cs-stat {
    --cs-tone: var(--primary);
    position: relative; display: grid; gap: 8px; align-content: start; min-width: 0;
    padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: 14px;
    /* Slightly translucent so the rotating background outlines show through a touch */
    background: color-mix(in oklab, var(--card) 72%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .cs-stat:hover { translate: 0 -2px; box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--cs-tone) 35%, var(--border)); }
  .cs-stat[data-tone="success"] { --cs-tone: var(--success); }
  .cs-stat[data-tone="danger"] { --cs-tone: var(--destructive); }
  .cs-stat[data-tone="info"] { --cs-tone: var(--info, #0ea5e9); }
  .cs-stat[data-tone="violet"] { --cs-tone: #8b5cf6; }
  .cs-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .cs-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .cs-stat-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--cs-tone); background: color-mix(in oklab, var(--cs-tone) 14%, transparent); }
  .cs-stat-icon svg { width: 16px; height: 16px; }
  .cs-stat-value { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; color: var(--foreground); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-stat-sub { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-stat--hero {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 16%, var(--card)), color-mix(in oklab, var(--card) 82%, transparent));
    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  }
  .cs-stat--hero .cs-stat-value { font-size: 30px; }
  .cs-stat--hero .cs-stat-icon { color: #fff; background: var(--primary); box-shadow: 0 2px 8px color-mix(in oklab, var(--primary) 35%, transparent); }
  @media (max-width: 1200px) { .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-stat--hero { grid-column: 1 / -1; } }
  @media (max-width: 560px) { .cs-stats { grid-template-columns: 1fr; } }

  /* ---- Filters button: active-filter count ---- */
  .cs-filter-btn { position: relative; }
  .cs-filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
    color: #fff; background: var(--primary);
  }

  /* ---- Status pills: a coloured dot when idle, a solid fill in that colour when active ---- */
  .cs-pills .order-pill { --pill-tone: var(--foreground); }
  .cs-pills .order-pill[data-status-value="completed"] { --pill-tone: var(--success); }
  .cs-pills .order-pill[data-status-value="failed"] { --pill-tone: var(--destructive); }
  .cs-pills .order-pill[data-status-value="refunded"] { --pill-tone: #f97316; }
  .cs-pills .order-pill[data-status-value="pending"] { --pill-tone: var(--warning); }
  .cs-pills .order-pill[data-status-value="scheduled"] { --pill-tone: #8b5cf6; }
  /* The Matters CaseCheck tab reuses these pills. Needs Guidance is work waiting
     on the attorney, Resolved is closed out, so they borrow the pending and the
     cancelled tones rather than inventing a second palette. */
  .cs-pills .order-pill[data-status-value="needs_guidance"] { --pill-tone: var(--warning); }
  .cs-pills .order-pill[data-status-value="resolved"] { --pill-tone: var(--muted-foreground); }
  /* Count rides inside the pill, dimmed when idle and legible on the fill. */
  .cs-pills .order-pill .order-pill-count { opacity: 0.7; font-variant-numeric: tabular-nums; }

  /* ---- Action deadline, inside the guidance form's first step ---- */
  .ccd-deadline { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
  .ccd-deadline-input { max-width: 200px; }
  .ccd-deadline-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted-foreground); }
  /* Why the docket read landed on that date. Read only: it explains the original
     date, so it is context for judging it rather than something to rewrite. */
  .ccd-deadline-why {
    margin: 8px 0 0; padding: 8px 10px; border-radius: 6px;
    background: var(--muted); color: var(--muted-foreground);
    font-size: 11.5px; line-height: 1.5;
  }

  /* ---- Docket dates: the read-only timeline under the action deadline ---- */
  .ccd-events { margin-top: 14px; }
  .ccd-events-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
  .ccd-event {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px;
    padding: 6px 0; border-top: 1px solid var(--border); align-items: baseline;
  }
  .ccd-event:first-child { border-top: none; }
  .ccd-event-date {
    font-size: 11.5px; font-weight: 700; color: var(--foreground);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .ccd-event-title { font-size: 12px; font-weight: 600; color: var(--foreground); }
  .ccd-event-detail { margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--muted-foreground); }
  @media (max-width: 760px) { .ccd-event { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
  .cs-pills .order-pill[data-status-value="voided"], .cs-pills .order-pill[data-status-value="cancelled"] { --pill-tone: var(--muted-foreground); }
  .cs-pills .order-pill:not([data-status-value="all"])::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pill-tone); }
  .cs-pills .order-pill:is(.active, .active-success, .active-failed, .active-refunded, .active-pending, .active-scheduled, .active-cancelled) {
    color: #fff; background: var(--pill-tone); border-color: var(--pill-tone); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  }
  .cs-pills .order-pill.active[data-status-value="all"] { color: var(--background); background: var(--foreground); border-color: var(--foreground); }
  .cs-pills .order-pill:is(.active, .active-success, .active-failed, .active-refunded, .active-pending, .active-scheduled, .active-cancelled)::before { background: rgba(255, 255, 255, 0.85); }

  /* ---- Transactions table: Date · Txn ID · Client · State · Processor · Status · Amount · Description · Law firm · Order ---- */
  .cs-table thead th:nth-child(3) { min-width: 180px; }
  .cs-table tbody td:nth-child(1) { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .cs-table tbody td:nth-child(2) { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .cs-table tbody td:nth-child(3), .cs-table tbody td:nth-child(3) .link { color: var(--foreground); font-weight: 600; }
  .cs-table tbody td:nth-child(3) .link:hover { color: var(--primary); }
  /* .mt-table bolds column 4 (Title on Matters); here column 4 is State */
  .cs-table tbody td:nth-child(4) { color: var(--text-secondary); font-weight: 500; }
  .cs-table tbody td:nth-child(4) .link { color: var(--text-secondary); }
  .cs-table :is(th, td):nth-child(7) { text-align: right; font-variant-numeric: tabular-nums; }
  .cs-table tbody td:nth-child(7) { color: var(--foreground); font-weight: 700; white-space: nowrap; }
  .cs-table tbody td:nth-child(8) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-table tbody td:nth-child(10) { font-variant-numeric: tabular-nums; }
  .cs-table tbody tr.clickable-row { cursor: pointer; }
  /* Status chips keyed by getStatusClass() (completed→successful, failed→declined) */
  .cs-table .status-badge { background: color-mix(in oklab, currentColor 9%, transparent); }
  .cs-table .status-badge.successful { color: var(--success); }
  .cs-table .status-badge.declined { color: var(--destructive); }
  .cs-table .status-badge.pending, .cs-table .status-badge.queued { color: var(--warning); }
  .cs-table .status-badge.refunded, .cs-table .status-badge.incomplete { color: #f97316; }
  .cs-table .status-badge.scheduled { color: #8b5cf6; }
  .cs-table .status-badge.voided, .cs-table .status-badge.cancelled { color: var(--muted-foreground); }
  .cs-table .status-badge.in_progress, .cs-table .status-badge.qualified { color: var(--info, #0ea5e9); }
  .cs-table .cdm-empty { border: 0; padding: 36px 16px; }
  .cs-table tfoot.mt-tfoot:empty { display: none; }
}

/* =====================================================================
   Cashier drawers — #cashier-make-payment-modal (.csm), #manual-transaction-modal
   (.mtm), the #cashier-filter-panel slide-down (.csf), the transaction detail drawer (.txd,
   template in billing.js openTransactionDetailModal) and the confirm cards (.csc /
   .txs). All ride the .bl-drawer / .cdm / .blm shells from the Billing drawers;
   the confirm cards ride .bl-confirm / .blc. The class names cashier.js and
   billing.js toggle (.open / .visible / .active / .selected / .active-item /
   .fs-placeholder) are kept and skinned here.
   ===================================================================== */
@scope (.bc) {
  /* ---- Combobox: icon-led input or trigger with an anchored menu ---- */
  .csm-combo { position: relative; }
  .csm-combo > .input, .csm-combo > .csm-trigger { padding-left: 36px; }
  .csm-combo-icon { position: absolute; left: 12px; top: 18px; translate: 0 -50%; width: 15px; height: 15px; color: var(--muted-foreground); pointer-events: none; z-index: 1; }
  .csm-combo > .input[type="search"] { appearance: none; -webkit-appearance: none; }
  .csm-combo > .input[type="search"]::-webkit-search-cancel-button, .csm-combo > .input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
  .csm-trigger {
    position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 34px 0 36px;
    font-size: 13.5px; color: var(--foreground); background: var(--card);
    border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer; user-select: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .csm-trigger > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .csm-trigger:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  .csm-trigger:focus-visible, .csm-trigger[aria-expanded="true"] { outline: 0; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .csm-trigger .cashier-order-placeholder, .csm-trigger .cashier-key-placeholder { color: var(--muted-foreground); }
  .csm-trigger-chev { position: absolute; right: 11px; top: 18px; translate: 0 -50%; width: 14px; height: 14px; color: var(--muted-foreground); pointer-events: none; transition: rotate 0.15s ease; }
  .csm-trigger[aria-expanded="true"] .csm-trigger-chev { rotate: 180deg; }
  .csm-menu {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 90;
    max-height: 280px; overflow-y: auto; padding: 4px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--popover); color: var(--popover-foreground);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .csm-menu.open { display: block; }
  .csm-menu :is(.cashier-mp-dd-item, .cashier-firm-dd-item, .cashier-order-item, .cashier-key-option, .manual-txn-dropdown-item) {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 10px;
    border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; text-align: left; color: var(--foreground); cursor: pointer;
  }
  .csm-menu :is(.cashier-mp-dd-item, .cashier-firm-dd-item, .cashier-order-item, .cashier-key-option, .manual-txn-dropdown-item):hover { background: var(--accent); }
  .csm-menu :is(.active-item, .selected) { background: color-mix(in oklab, var(--primary) 10%, transparent); }
  .csm-menu :is(.active-item, .selected):hover { background: color-mix(in oklab, var(--primary) 16%, transparent); }
  .csm-menu .cashier-key-option { min-height: 34px; font-weight: 500; }
  .csm-menu .cashier-key-option.selected { font-weight: 700; color: var(--primary); }
  .csm-menu :is(.cashier-mp-dd-avatar, .cashier-firm-dd-avatar, .manual-txn-dd-avatar) {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.02em; color: var(--primary); background: color-mix(in oklab, var(--primary) 16%, transparent);
  }
  .csm-menu .cashier-order-item-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--success); background: color-mix(in oklab, var(--success) 16%, transparent); }
  .csm-menu .cashier-order-item-icon svg { width: 15px; height: 15px; }
  .csm-menu :is(.cashier-mp-dd-info, .cashier-firm-dd-info, .manual-txn-dd-info, .cashier-order-item-info) { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .csm-menu :is(.cashier-mp-dd-name, .cashier-firm-dd-name, .manual-txn-dd-name, .cashier-order-item-id) { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .csm-menu :is(.cashier-mp-dd-sub, .cashier-firm-dd-detail, .manual-txn-dd-detail, .cashier-order-item-meta) { font-size: 11.5px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .csm-menu .cashier-firm-dd-state { flex: none; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border); }
  .csm-menu :is(.cashier-mp-dd-empty, .cashier-firm-dd-empty, .cashier-order-empty, .cashier-key-empty) { padding: 12px 10px; font-size: 12.5px; color: var(--muted-foreground); text-align: center; }

  /* Picker combos (client / law firm): person or building icon on the left, a
     chevron on the right that flips while the menu is open. */
  .csm-combo--picker > .input { padding-right: 34px; background: var(--card); }
  .csm-combo--picker:has(> .csm-menu.open) > .input { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .csm-combo--picker:has(> .csm-menu.open) > .csm-trigger-chev { rotate: 180deg; }
  /* Card rows — same voice as the calendar / billing client pickers: each option is
     a bordered tile with a round initials avatar, name bold, email underneath. */
  .csm-menu--cards { padding: 6px; }
  .csm-menu--cards.open { display: grid; gap: 4px; }
  .csm-menu--cards :is(.cashier-mp-dd-item, .cashier-firm-dd-item, .cashier-order-item, .manual-txn-dropdown-item) {
    min-height: 46px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .csm-menu--cards :is(.cashier-mp-dd-item, .cashier-firm-dd-item, .cashier-order-item, .manual-txn-dropdown-item):hover { background: var(--accent); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  .csm-menu--cards :is(.active-item, .selected) { background: color-mix(in oklab, var(--primary) 10%, var(--card)); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); }
  .csm-menu--cards :is(.cashier-mp-dd-avatar, .cashier-firm-dd-avatar, .manual-txn-dd-avatar, .cashier-order-item-icon) { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in oklab, var(--primary) 18%, var(--muted)); color: var(--primary); }
  .csm-menu--cards :is(.cashier-mp-dd-name, .cashier-firm-dd-name, .manual-txn-dd-name, .cashier-order-item-id) { font-size: 13.5px; font-weight: 700; color: var(--foreground); }
  .csm-menu--cards :is(.cashier-mp-dd-sub, .cashier-firm-dd-detail, .manual-txn-dd-detail, .cashier-order-item-meta) { font-size: 12px; }
  .csm-menu--cards :is(.cashier-mp-dd-empty, .cashier-firm-dd-empty, .cashier-order-empty) { padding: 14px 10px; }

  /* ---- Picked entity tile (client / law firm / order) — shown via .visible ---- */
  .csm-pick {
    display: none; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px;
    border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border)); border-radius: 12px;
    background: color-mix(in oklab, var(--primary) 7%, var(--card));
  }
  .csm-pick.visible { display: flex; animation: csm-pick-in 0.2s ease both; }
  @keyframes csm-pick-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
  .csm-pick-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: #fff; background: var(--primary); }
  .csm-pick-avatar svg { width: 17px; height: 17px; }
  .csm-pick-avatar--firm { color: var(--primary); background: color-mix(in oklab, var(--primary) 18%, transparent); }
  .csm-pick-avatar--order { color: var(--success); background: color-mix(in oklab, var(--success) 18%, transparent); }
  .csm-pick-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .csm-pick-name { font-size: 13.5px; font-weight: 700; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .csm-pick-sub { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .csm-pick-sub:empty { display: none; }
  .csm-pick-clear { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
  .csm-pick-clear:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); border-color: color-mix(in oklab, var(--destructive) 30%, transparent); }
  .csm-pick-clear svg { width: 14px; height: 14px; }

  /* ---- Make Payment drawer (.csm) ---- */
  .csm .cdm-head { padding-right: 18px; }
  .csm-body { grid-template-columns: minmax(0, 1fr) 300px; }
  .csm-main { gap: 14px; }
  .csm-step { gap: 12px; padding: 16px 18px 18px; background: var(--card); }
  .csm-step-head { display: flex; align-items: flex-start; gap: 12px; }
  .csm-step-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--primary); box-shadow: 0 2px 6px color-mix(in oklab, var(--primary) 35%, transparent); }
  .csm-step-text { display: grid; gap: 2px; min-width: 0; padding-top: 3px; }
  .csm-step-text .blm-section-title { font-size: 12.5px; }
  .csm-step .blm-req { font-size: 12px; }
  .csm-sub { display: grid; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in oklab, var(--muted) 45%, transparent); }
  .csm-sub[hidden] { display: none; }
  .csm-sub--note { padding: 10px 12px; }
  .csm-sub--note .blm-hint strong { color: var(--foreground); }
  .csm-sub-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--foreground); }
  .csm-sub-head svg { width: 15px; height: 15px; color: var(--primary); }
  .csm-sub-head small { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted-foreground); }
  .csm-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .csm-label-row .btn[data-size="sm"] { height: 28px; padding-inline: 9px; font-size: 11px; background: var(--card); }
  .csm-mono {
    display: flex; align-items: center; min-height: 36px; padding: 8px 12px;
    border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--card);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--foreground); word-break: break-all;
  }
  .csm-pm-list { display: grid; gap: 6px; min-height: 20px; }
  .csm-pm-list .cashier-stripe-pm-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .csm-pm-list .cashier-stripe-pm-item::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
  .csm-pm-list > :not(.cashier-stripe-pm-item) { font-size: 12.5px; color: var(--muted-foreground); }
  /* Processor choice */
  .csm-pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .csm-pm {
    --pm-accent: var(--primary);
    position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--card); text-align: left; font: inherit; color: var(--foreground); cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  }
  .csm-pm:hover { border-color: color-mix(in oklab, var(--pm-accent) 45%, var(--border)); background: color-mix(in oklab, var(--pm-accent) 5%, var(--card)); }
  .csm-pm.active { border-color: var(--pm-accent); background: color-mix(in oklab, var(--pm-accent) 9%, var(--card)); box-shadow: inset 0 0 0 1px var(--pm-accent); }
  .csm-pm:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .csm-pm-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--muted-foreground); background: var(--muted); transition: color 0.15s ease, background-color 0.15s ease; }
  .csm-pm-icon svg { width: 19px; height: 19px; }
  .csm-pm.active .csm-pm-icon { color: #fff; background: var(--pm-accent); }
  .csm-pm-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .csm-pm .pm-label { font-size: 13.5px; font-weight: 700; }
  .csm-pm-sub { font-size: 11.5px; line-height: 1.3; color: var(--muted-foreground); }
  .csm-pm-check { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border); color: transparent; transition: border-color 0.15s ease, background-color 0.15s ease; }
  .csm-pm-check svg { width: 11px; height: 11px; }
  .csm-pm.active .csm-pm-check { border-color: var(--pm-accent); background: var(--pm-accent); color: #fff; }
  /* Card fields */
  .csm-card-fields { background: color-mix(in oklab, var(--primary) 4%, var(--card)); border-color: color-mix(in oklab, var(--primary) 22%, var(--border)); }
  .csm-cc { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; font-size: 14px; }
  .csm-grid-addr { grid-template-columns: minmax(0, 1.6fr) 90px minmax(0, 1fr); }
  /* Note / description template chips */
  .csm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .csm-chips-k { margin-right: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .csm-chip {
    height: 28px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--card);
    font: inherit; font-size: 12px; font-weight: 600; color: var(--foreground); cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  }
  .csm-chip:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: var(--accent); }
  .csm-chip.active { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); background: color-mix(in oklab, var(--primary) 12%, var(--card)); }
  /* Basecoat's `.field > [role="group"]:not(.field)` (0,3,0) turns the chip row
     into a full-width column with a 28px gap; win at (0,4,0) and lay it back out. */
  .blm .field > [role="group"].csm-chips { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
  /* Narrow (compact) drawers: keep the four chips on one line — tighter chips,
     the "Templates" caption moves into the field label, and the row scrolls
     sideways instead of wrapping if a viewport is narrower still. */
  .blm--compact .field > [role="group"].csm-chips { flex-wrap: nowrap; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
  .blm--compact .field > [role="group"].csm-chips::-webkit-scrollbar { display: none; }
  .blm--compact .csm-chips-k { display: none; }
  .blm--compact .csm-chip { flex: none; height: 26px; padding: 0 9px; font-size: 11.5px; }
  /* Live summary side panel */
  .csm-side { position: sticky; top: 0; gap: 0; padding: 0; overflow: hidden; background: var(--card); }
  .csm-side-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 45%, transparent); }
  .csm-side-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--primary); background: color-mix(in oklab, var(--primary) 14%, transparent); }
  .csm-side-icon svg { width: 15px; height: 15px; }
  .csm-side-title { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foreground); }
  .csm-summary-placeholder { display: grid; justify-items: center; gap: 10px; padding: 34px 18px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted-foreground); }
  .csm-summary-placeholder svg { width: 34px; height: 34px; opacity: 0.5; }
  .csm-summary { display: grid; padding: 6px 16px 12px; }
  .csm-summary[hidden] { display: none; }
  .csm-summary .cashier-summary-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
  .csm-summary .cashier-summary-row:last-child { border-bottom: 0; }
  .csm-summary .cashier-summary-label { flex: none; color: var(--muted-foreground); }
  .csm-summary .cashier-summary-value { min-width: 0; text-align: right; font-weight: 600; color: var(--foreground); word-break: break-word; }
  .csm-legend { margin: 0; font-size: 12px; color: var(--muted-foreground); }
  @media (max-width: 1000px) {
    .csm-body { grid-template-columns: 1fr; }
    .csm-side { position: static; }
    .csm-grid-addr { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) { .csm-pm-grid, .csm-grid-addr { grid-template-columns: 1fr; } }

  /* ---- Add Transaction drawer (.mtm): custom selects billing.js drives via .open / .selected ---- */
  .mtm .manual-txn-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .mtm-select { position: relative; }
  .mtm-select-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 36px; padding: 0 10px 0 12px;
    border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font: inherit; font-size: 13.5px; color: var(--foreground); text-align: left; cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .mtm-select-btn:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  .mtm-select-btn:focus-visible, .mtm-select-btn.open { outline: 0; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .mtm-select-btn .manual-txn-fs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtm-select-btn .fs-placeholder { color: var(--muted-foreground); }
  .mtm-select-btn svg { flex: none; width: 14px; height: 14px; color: var(--muted-foreground); transition: rotate 0.15s ease; }
  .mtm-select-btn.open svg { rotate: 180deg; }
  .mtm-select-menu {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 90; padding: 4px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--popover); color: var(--popover-foreground);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .mtm-select-menu.open { display: block; }
  .mtm-select-menu .manual-txn-fs-option { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--foreground); cursor: pointer; }
  .mtm-select-menu .manual-txn-fs-option:hover { background: var(--accent); }
  .mtm-select-menu .manual-txn-fs-option.selected { background: color-mix(in oklab, var(--primary) 10%, transparent); font-weight: 600; }
  .mtm-select-menu .mtd-dot[data-status="completed"] { background: var(--success); color: var(--success); }
  .mtm-select-menu .mtd-dot[data-status="failed"] { background: var(--destructive); color: var(--destructive); }
  .mtm-select-menu .mtd-dot[data-status="refunded"] { background: #f97316; color: #f97316; }
  .mtm-select-menu .mtd-dot[data-status="scheduled"] { background: #8b5cf6; color: #8b5cf6; }
  .mtm-select-menu .mtd-dot[data-status="voided"] { background: var(--muted-foreground); color: var(--muted-foreground); }

  /* ---- Add Transaction order picker (menu rows rendered by billing.js) ---- */
  .csm-trigger[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
  .csm-trigger[aria-disabled="true"]:hover { border-color: var(--input); }
  .csm-menu--cards .mto-none { border-style: dashed; background: color-mix(in oklab, var(--muted) 40%, transparent); }
  .csm-menu--cards .mto-none .cashier-order-item-icon { color: var(--muted-foreground); background: var(--muted); }
  .csm-menu--cards .mto-none.selected { border-style: solid; }
  .mto-manual { display: flex; align-items: center; gap: 10px; margin-top: 2px; padding: 8px 4px 2px; border-top: 1px dashed var(--border); cursor: default; }
  .mto-manual > span { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .blm .mto-manual > .input { height: 32px; font-size: 13px; }

  /* ---- Filters panel (.csf): the Matters slide-down panel above the results
     card. The date range is a .drp-trigger that opens a popover (presets rail +
     two-month calendar); the state field floats a checklist under its search,
     like the other .mt-filters menus. Both anchor to position:relative fields —
     .tracker-filters-panel is overflow:visible with its own z-index. ---- */
  .csf-date, .csf-state-anchor { position: relative; }
  .csf .drp-trigger { width: 100%; display: inline-flex; align-items: center; cursor: pointer; background: var(--card); }
  .csf .drp-trigger > span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .csf .drp-trigger[aria-expanded="true"] { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .csf .drp-trigger.has-selection > span { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
  .csf-trigger-chev { flex: none; width: 14px !important; height: 14px !important; transition: rotate 0.15s ease; }
  .csf .drp-trigger[aria-expanded="true"] .csf-trigger-chev { rotate: 180deg; }
  .csf-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    display: flex; align-items: stretch; width: max-content; max-width: min(760px, calc(100vw - 48px));
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    background: var(--popover); color: var(--popover-foreground);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
    animation: csf-pop-in 0.16s ease both;
  }
  .csf-pop[hidden] { display: none; }
  @keyframes csf-pop-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
  .csf-presets { flex: none; display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 10px 8px; border-right: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 45%, transparent); }
  .csf-preset {
    height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; color: var(--muted-foreground); cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .csf-preset:hover { color: var(--foreground); background: var(--accent); }
  .csf-preset.active { color: #fff; background: var(--primary); }
  .csf-cals-wrap { display: grid; gap: 10px; padding: 12px 14px; min-width: 0; }
  .csf-cals { display: grid; grid-template-columns: repeat(2, 224px); gap: 16px; }
  .csf-cal { display: grid; gap: 8px; min-width: 0; }
  .csf-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .csf-cal-title { flex: 1; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--foreground); }
  .csf-cal-nav { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--muted-foreground); cursor: pointer; }
  .csf-cal-nav:hover { background: var(--accent); color: var(--foreground); }
  .csf-cal-nav svg { width: 13px; height: 13px; }
  .csf-cal-nav--ghost { visibility: hidden; }
  .csf-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; }
  .csf-grid .dp-day-label { padding: 2px 0 4px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
  .csf-grid .dp-day { display: grid; place-items: center; height: 28px; border-radius: 7px; font-size: 12px; color: var(--foreground); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color 0.1s ease; }
  .csf-grid .dp-day:hover { background: var(--accent); }
  .csf-grid .dp-day.other-month { color: color-mix(in oklab, var(--muted-foreground) 50%, transparent); cursor: default; }
  .csf-grid .dp-day.other-month:hover { background: transparent; }
  .csf-grid .dp-day.today { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent); color: var(--primary); font-weight: 700; }
  .csf-grid .dp-day.in-range { background: color-mix(in oklab, var(--primary) 12%, transparent); border-radius: 0; }
  .csf-grid .dp-day.range-start, .csf-grid .dp-day.range-end { background: var(--primary); color: #fff; font-weight: 700; box-shadow: none; }
  .csf-grid .dp-day.range-start:not(.range-end) { border-radius: 7px 0 0 7px; }
  .csf-grid .dp-day.range-end:not(.range-start) { border-radius: 0 7px 7px 0; }
  .csf-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
  .csf-pop-range { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .csf-pop-range svg { width: 14px; height: 14px; color: var(--muted-foreground); }
  .csf-pop-foot .btn[data-size="sm"] { height: 30px; font-size: 11.5px; }
  /* State multi-select */
  .csf-state-input > .input { padding-right: 32px; background: var(--card); }
  .csf-state-anchor:has(.csf-state-dd.open) > .csf-state-input > .input { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .csf-state-anchor:has(.csf-state-dd.open) .csm-trigger-chev { rotate: 180deg; }
  .csf-state-dd {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; overflow: hidden;
    border: 1px solid var(--border); border-radius: 12px; background: var(--popover); color: var(--popover-foreground);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .csf-state-dd.open { display: block; }
  .csf-state-dd-top { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 45%, transparent); }
  .csf-state-dd-top button { height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); cursor: pointer; }
  .csf-state-dd-top button:hover { color: var(--foreground); background: var(--accent); }
  .csf-state-list { max-height: 240px; overflow-y: auto; padding: 4px; }
  .csf-state-list .cashier-state-opt { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 8px; border-radius: 8px; font-size: 13px; color: var(--foreground); cursor: pointer; }
  .csf-state-list .cashier-state-opt:hover { background: var(--accent); }
  .csf-state-list .cashier-state-opt.hidden { display: none; }
  .csf-state-list .cashier-state-opt input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--primary); cursor: pointer; }
  .csf-state-list .cashier-state-opt:has(input:checked) { background: color-mix(in oklab, var(--primary) 10%, transparent); }
  .csf-state-code { flex: none; min-width: 34px; padding: 2px 6px; border-radius: 6px; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border); }
  .csf-state-list .cashier-state-opt:has(input:checked) .csf-state-code { color: var(--primary); background: color-mix(in oklab, var(--primary) 14%, transparent); border-color: color-mix(in oklab, var(--primary) 35%, transparent); }
  .csf-state-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .csf-state-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .csf-state-tags:empty { display: none; }
  .csf-state-tags .cashier-state-tag {
    display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--primary);
    background: color-mix(in oklab, var(--primary) 12%, var(--card)); border: 1px solid color-mix(in oklab, var(--primary) 40%, var(--border));
  }
  .csf-state-tags .cashier-state-tag button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
  .csf-state-tags .cashier-state-tag button:hover { background: color-mix(in oklab, var(--primary) 20%, transparent); }
  .csf-state-tags .cashier-state-tag button svg { width: 10px; height: 10px; }
  /* Filters button remembers that filters are applied even when the panel is folded */
  .cs-filter-btn.has-filters:not(.is-open) { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
  @media (max-width: 760px) {
    .csf-pop { flex-direction: column; }
    .csf-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
    .csf-cals { grid-template-columns: 1fr; }
  }

  /* ---- Transaction detail drawer (.txd) ---- */
  .txd-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 12%, var(--card)), var(--card)); }
  .txd-amount { display: grid; gap: 2px; min-width: 0; }
  .txd-amount-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
  .txd-amount strong { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .txd-amount small { font-size: 12px; color: var(--muted-foreground); }
  .txd-hero-meta { display: grid; gap: 6px; justify-items: end; text-align: right; }
  .txd-hero-meta .status-badge { padding: 4px 10px; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; border: 1px solid color-mix(in oklab, currentColor 30%, transparent); background: color-mix(in oklab, currentColor 9%, transparent); }
  .txd-hero-meta .status-badge.successful { color: var(--success); }
  .txd-hero-meta .status-badge.declined { color: var(--destructive); }
  .txd-hero-meta .status-badge.pending, .txd-hero-meta .status-badge.queued { color: var(--warning); }
  .txd-hero-meta .status-badge.refunded { color: #f97316; }
  .txd-hero-meta .status-badge.scheduled { color: #8b5cf6; }
  .txd-hero-meta .status-badge.voided, .txd-hero-meta .status-badge.cancelled { color: var(--muted-foreground); }
  .txd-hero-date { font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .txd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
  .txd-fact { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); transition: border-color 0.15s ease; }
  .txd-fact:hover { border-color: color-mix(in oklab, var(--foreground) 14%, var(--border)); }
  .txd-fact--wide { grid-column: 1 / -1; }
  .txd-fact dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .txd-fact dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .txd-fact dd.txd-wrap { white-space: pre-wrap; word-break: break-word; font-weight: 500; line-height: 1.45; }
  .txd-fact dd code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; padding: 2px 6px; border-radius: 6px; background: var(--muted); color: var(--foreground); }
  .txd-fact dd .link { color: var(--primary); text-decoration: none; }
  .txd-fact dd .link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .txd .blm-foot .btn svg { width: 14px; height: 14px; }
  .txd .blm-foot:empty { display: none; }
  @media (max-width: 560px) { .txd-facts { grid-template-columns: 1fr; } }

  /* ---- Confirm cards: payment confirm / validation (.csc) and refund / void / invoice (.txs) ---- */
  .csc { width: min(480px, 100%); }
  .csc-close { position: absolute; top: 12px; right: 12px; }
  .csc-summary:empty { display: none; }
  .csc-summary .cashier-payment-confirm-rows { display: grid; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: color-mix(in oklab, var(--muted) 30%, transparent); }
  .csc-summary .cashier-payment-confirm-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 12px; font-size: 13px; }
  .csc-summary .cashier-payment-confirm-row + .cashier-payment-confirm-row { border-top: 1px solid var(--border); }
  .csc-summary .cashier-payment-confirm-label { flex: none; color: var(--muted-foreground); }
  .csc-summary .cashier-payment-confirm-value { min-width: 0; text-align: right; font-weight: 600; color: var(--foreground); word-break: break-word; }
  .csc-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--foreground); }
  .csc-list li::marker { color: var(--destructive); }
  .csc-mount { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .csc-error { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }

  .blc-icon--info { color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); }
  .txd .txd-btn-danger { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, var(--border)); }
  .txd .txd-btn-danger:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); border-color: color-mix(in oklab, var(--destructive) 55%, var(--border)); }
  .txs { width: min(500px, 100%); }
  .txs .txs-body { display: grid; gap: 10px; }
  .txs .txn-refund-summary { display: grid; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: color-mix(in oklab, var(--muted) 30%, transparent); }
  .txs .txn-rs-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 13px; }
  .txs .txn-rs-row + .txn-rs-row { border-top: 1px solid var(--border); }
  .txs .txn-rs-label { color: var(--muted-foreground); }
  .txs .txn-rs-value { font-weight: 600; color: var(--foreground); text-align: right; }
  .txs .txn-refund-type-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .txs .txn-refund-type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .txs .txn-refund-type-btn { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); text-align: left; font: inherit; color: var(--foreground); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
  .txs .txn-refund-type-btn:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
  .txs .txn-refund-type-btn.active { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 9%, var(--card)); box-shadow: inset 0 0 0 1px var(--primary); }
  .txs .txn-rt-title { font-size: 13px; font-weight: 700; }
  .txs .txn-rt-desc { font-size: 11.5px; color: var(--muted-foreground); }
  .txs .txn-refund-amount-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
  .txs :is(.txn-refund-amount-field, .txn-refund-reason-field, .txn-invoice-field) { display: grid; gap: 6px; }
  .txs :is(.txn-refund-amount-field, .txn-refund-reason-field, .txn-invoice-field) label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .txs :is(.txn-refund-amount-field, .txn-refund-reason-field, .txn-invoice-field) input {
    width: 100%; height: 36px; padding: 0 12px; margin: 0; font: inherit; font-size: 13.5px; color: var(--foreground);
    background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .txs :is(.txn-refund-amount-field, .txn-refund-reason-field, .txn-invoice-field) input::placeholder { color: var(--muted-foreground); }
  .txs :is(.txn-refund-amount-field, .txn-refund-reason-field, .txn-invoice-field) input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
  .txs :is(.txn-refund-amount-field, .txn-refund-reason-field, .txn-invoice-field) input:disabled { opacity: 0.55; cursor: not-allowed; }
  .txs .txn-refund-amount-display { padding: 6px 12px; border-radius: 10px; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); font-variant-numeric: tabular-nums; }
  .txs .txn-sub-modal-error { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
  .txs .txn-sub-modal-error:empty { display: none; }
}

/* =====================================================================
   Contacts page — pages/contacts.html (Leads / Clients)
   Converted from a 1,435-line inline <style> block in the fragment. The page
   reuses the Matters vocabulary wholesale (.mt-head / .mt-tabs / .mt-card /
   .mt-tools / .mt-filters / .mt-table / .mt-pagination — all defined under the
   "Matters page" banner above, with .contacts-page added to the shared :is()
   page lists). Only what is genuinely Contacts-specific lives here:
     • .ct-stats / .ct-stat  — the three client stat tiles
     • .mt-filter-badge      — active-filter count on the Filters toggle
     • .order-pill.active    — contacts.js toggles `.active`, not `.is-active`
     • clients table identity cell + verified / app-access chips
     • .contacts-dp-*        — the two-calendar date range picker
   A "legacy, not yet converted" sub-banner at the end holds the rules moved
   over verbatim for the parts of this page that were NOT redesigned: the
   #lawfirm-modal entity editor's state combobox, the leads status badges, the
   generic .status-badge pill and the phone / email copy cells.
   ===================================================================== */
@scope (.bc) {
  /* ---- Stat tiles ---- */
  /* Exactly three tiles, so the columns are explicit: `auto-fit` laid out a
     fourth track on wide monitors and left a gap at the end of the row. */
  .ct-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px; margin-bottom: 18px;
  }
  @media (max-width: 900px) { .ct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .ct-stats { grid-template-columns: minmax(0, 1fr); } }
  .ct-stat {
    --ct-accent: var(--primary);
    position: relative; display: grid; gap: 6px; padding: 16px 18px; margin: 0;
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  }
  /* Accent hairline down the leading edge, one colour per tile. */
  .ct-stat::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ct-accent);
  }
  .ct-stat[data-accent="verified"] { --ct-accent: var(--success); }
  .ct-stat[data-accent="new"] { --ct-accent: var(--warning); }
  .ct-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .ct-stat-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted-foreground);
  }
  .ct-stat-icon {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px;
    background: color-mix(in oklab, var(--ct-accent) 14%, transparent); color: var(--ct-accent);
  }
  .ct-stat-icon svg { width: 16px; height: 16px; }
  .ct-stat-value {
    font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em;
    color: var(--foreground); font-variant-numeric: tabular-nums;
  }
  .ct-stat-sub { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  /* renderClientStatsSkeleton() adds .client-stat-skeleton while the counts load. */
  .ct-stat .client-stat-skeleton {
    min-width: 64px; border-radius: 8px; color: transparent;
    background: linear-gradient(90deg, var(--muted) 25%, var(--accent) 50%, var(--muted) 75%);
    background-size: 200% 100%; animation: ct-stat-shimmer 1.2s ease-in-out infinite;
  }
  @keyframes ct-stat-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

  /* ---- Filters toggle: active-filter count ----
     contacts.js only flips inline display on this node, so everything else
     (size, colour, placement) has to come from here. */
  .mt-filter-badge {
    align-items: center; justify-content: center;
    min-width: 18px; height: 18px; margin-left: 2px; padding: 0 5px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    background: var(--primary); color: #fff;
  }
  /* contacts.js sets `display: inline-flex` inline when the count is non-zero,
     but the RA Automator, Intakes and Documents pages toggle the `hidden`
     attribute instead — so the badge needs a real resting display value. */
  .mt-filter-badge { display: inline-flex; }
  .mt-filter-badge[hidden] { display: none; }
  .tracker-filters-toggle.is-open .mt-filter-badge { background: var(--foreground); color: var(--background); }

  /* ---- Leads status pills ----
     Shared .mt-pills chrome comes from the Matters banner; contacts.js toggles
     `.active` rather than `.is-active`, so the selected state is re-stated here. */
  #leads-status-buttons-row .order-pill.active {
    color: #fff; background: var(--primary); border-color: var(--primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  }
  #leads-status-buttons-row .order-pill.active[data-pill="all"] {
    background: var(--foreground); border-color: var(--foreground); color: var(--background);
  }

  /* ---- Tables ----
     The shared .mt-table rule bolds the 4th cell as the identity column; on
     Leads that is Phone and on Clients it is Phone too, so both are re-set and
     the real identity cell is promoted instead. */
  #leads-table tbody td:nth-child(4),
  #clients-table tbody td:nth-child(4) { color: var(--text-secondary); font-weight: 400; }
  #leads-table tbody td:nth-child(1),
  #clients-table tbody td:nth-child(3) { color: var(--foreground); font-weight: 600; }
  .ct-col-client { min-width: 170px; }
  .ct-col-email { min-width: 180px; }
  /* Email is its own column: truncate with an ellipsis instead of stretching the row */
  #clients-table td.ct-email-cell { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #clients-table tbody td:nth-child(2) { color: var(--muted-foreground); }

  /* Client identity cell: avatar + name (email sits in its own column). */
  .ct-client { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .ct-client-text { display: grid; gap: 1px; min-width: 0; }
  .ct-client > .mtd-avatar { flex: none; }
  .ct-client-name {
    font-size: 13.5px; font-weight: 600; color: var(--foreground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ct-client-name:hover { color: var(--primary); }
  .ct-client-email {
    display: block; font-size: 13px; font-weight: 400; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Verified / App access: a yes-no chip instead of a bare glyph. */
  .ct-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
    border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap; border: 1px solid color-mix(in oklab, currentColor 32%, transparent);
    background: color-mix(in oklab, currentColor 10%, transparent);
  }
  .ct-chip svg { width: 11px; height: 11px; }
  .ct-chip[data-on="yes"] { color: var(--success); }
  .ct-chip[data-on="no"] { color: var(--muted-foreground); }
  /* "Not Verified" is an action item, not a neutral state — flag it red. */
  .ct-chip[data-on="no"][data-tone="danger"] { color: var(--destructive); }

  /* Created / DST / email columns keep their old widths and wrapping. */
  #clients-table td.clients-col-created,
  #leads-table td.leads-col-dst,
  #leads-table td.leads-col-received { white-space: nowrap; }
  /* Leads columns are driven entirely by the <colgroup> in pages/contacts.html,
     and `table-layout: fixed` is what makes those widths authoritative. Under
     the default auto layout the browser sized Agent by its widest value (it
     falls back to an agent *email*) and spread the slack over Lead and State —
     which read as dead gaps — while Email, then carrying `max-width: 0`,
     collapsed and cut its address off. Every column is now given its own real
     content width, so the leftover space is shared in proportion instead of
     piling up behind one column. Cells that can hold an outlier (a long name,
     an agent email) ellipsis rather than grow, and min-width hands narrow
     viewports to .mt-table-wrap's scroller instead of squeezing Phone and the
     status pill.

     The total is held to 1080px — what .mt-table-wrap actually gets at a 1440
     viewport once the sidebar is out. The first pass at these widths summed to
     1300 and pushed Received and DST off the right edge on every 1440 laptop,
     so each column is now its content width and no more. Below 1440 the wrap
     scrolls, as before. */
  #leads-table { table-layout: fixed; min-width: 1080px; }
  /* nth-child(7) is Practice Area: "Forclosure Initiation(by lender)" is a real
     value in practice_areas_list and twice the width of every other one, so it
     ellipsises rather than setting the column's width for all the rest. */
  #leads-table tbody td:nth-child(1),
  #leads-table tbody td:nth-child(2),
  #leads-table tbody td:nth-child(7),
  #leads-table td.leads-col-email,
  #leads-table td.leads-col-agent {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #leads-table .leads-received-hover { cursor: help; }

  /* ---- Verified filter: the legacy .cs-* custom select ----
     bindClientsVerifiedCustomSelect() toggles `.open` on the trigger and menu
     and `.selected` on an option, so those class names are kept and only the
     skin is replaced with the filter-panel control surface. */
  #clients-filter-modal .cs-wrap { position: relative; }
  #clients-filter-modal .cs-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; height: 36px; padding: 0 10px 0 12px; margin: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--foreground); text-align: left;
    background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  #clients-filter-modal .cs-trigger.placeholder { font-weight: 400; color: var(--muted-foreground); }
  #clients-filter-modal .cs-trigger:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  #clients-filter-modal .cs-trigger.open {
    border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
  }
  #clients-filter-modal .cs-chevron {
    flex: none; width: 13px; height: 13px; color: var(--muted-foreground); transition: rotate 0.15s ease;
  }
  #clients-filter-modal .cs-trigger.open .cs-chevron { rotate: 180deg; color: var(--primary); }
  #clients-filter-modal .cs-menu {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 90;
    padding: 6px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--popover); color: var(--popover-foreground);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  #clients-filter-modal .cs-menu.open { display: grid; gap: 2px; }
  #clients-filter-modal .cs-opt {
    min-height: 34px; display: flex; align-items: center; padding: 6px 10px; border-radius: 8px;
    font-size: 13px; color: var(--foreground); cursor: pointer; user-select: none;
    transition: background-color 0.12s ease;
  }
  #clients-filter-modal .cs-opt:hover { background: var(--accent); }
  #clients-filter-modal .cs-opt.selected {
    font-weight: 600; background: color-mix(in oklab, var(--primary) 10%, transparent);
  }
}

/* =====================================================================
   Contacts date range picker — #leads-date-modal / #clients-date-modal
   A stacked overlay above the inline .mt-filters panel: preset rail on the
   left, two month grids on the right, range label + Cancel / Apply below.
   contacts.js renders the grids into #<tab>-cal1 / #<tab>-cal2 and owns every
   class toggled here (.active on a preset, .other-month / .today /
   -pickable / -in-range / -range-edge on a day), so the names are fixed.

   Selectors are descendant-only on purpose: the overlay itself carries `.bc`,
   and inside `@scope (.bc)` a rule can't match the scope root, so an
   `#leads-date-modal …` prefix would never match. Overlay-level placement is
   set outside the scope block, below.
   ===================================================================== */
@scope (.bc) {
  .leads-date-modal-inner { width: 100%; max-width: 720px; padding: 0; }
  .contacts-dp-layout { display: flex; min-height: 380px; }

  /* Preset rail */
  .contacts-dp-presets {
    flex: none; width: 178px; max-height: 440px; padding: 8px 6px; overflow-y: auto;
    border-right: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 45%, transparent);
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .contacts-dp-preset {
    display: block; width: 100%; margin: 0 0 2px; padding: 7px 12px;
    font: inherit; font-size: 12.5px; text-align: left; color: var(--muted-foreground);
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  .contacts-dp-preset:hover { color: var(--foreground); background: var(--accent); }
  .contacts-dp-preset.active { color: #fff; font-weight: 600; background: var(--primary); }

  /* Calendars */
  .contacts-dp-calendars { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 18px 22px; }
  .contacts-dp-cal-row { display: flex; gap: 26px; flex: 1; }
  .contacts-dp-cal { flex: 1; min-width: 0; }
  .contacts-dp-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .contacts-dp-cal-header span {
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--foreground);
  }
  .contacts-dp-cal-header .pg-chevron { width: 12px; height: 12px; }
  .contacts-dp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
  .contacts-dp-day-label {
    padding: 6px 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted-foreground);
  }
  .contacts-dp-day {
    padding: 7px 4px; border: 1.5px solid transparent; border-radius: 8px;
    font-size: 12.5px; color: var(--foreground); cursor: default;
    font-variant-numeric: tabular-nums;
  }
  .contacts-dp-day.other-month { color: var(--muted-foreground); opacity: 0.45; }
  .contacts-dp-day.today { border-color: var(--primary); font-weight: 700; color: var(--primary); }
  .contacts-dp-day-pickable { cursor: pointer; user-select: none; }
  .contacts-dp-day-pickable:hover { background: color-mix(in oklab, var(--primary) 14%, transparent); }
  .contacts-dp-day-in-range { background: color-mix(in oklab, var(--primary) 14%, transparent); }
  .contacts-dp-day-range-edge { color: #fff; font-weight: 700; background: var(--primary); }
  .contacts-dp-day-pickable.today.contacts-dp-day-in-range { border-color: var(--primary); }

  /* Footer */
  .contacts-dp-date-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  }
  .contacts-dp-range-label { font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .contacts-dp-btns { display: flex; gap: 8px; }

  /* Narrow viewports: one calendar at a time, rail on top. */
  @media (max-width: 720px) {
    .contacts-dp-layout { flex-direction: column; }
    .contacts-dp-presets {
      display: flex; width: auto; max-height: none; gap: 6px; overflow-x: auto;
      border-right: 0; border-bottom: 1px solid var(--border);
    }
    .contacts-dp-preset { width: auto; margin: 0; white-space: nowrap; }
    .contacts-dp-cal-row { flex-direction: column; gap: 18px; }
  }
}
/* Overlay-level placement. Outside @scope: these target the `.bc` root itself. */
:is(#leads-date-modal, #clients-date-modal).modal-overlay { padding: 24px; }

/* =====================================================================
   Contacts drawers — #add-client-modal (.ct-drawer) and the client detail
   drawer #view-client-modal (.cvm, template in contacts.js viewClient()).
   Both ride the .bl-drawer / .cdm / .blm shells from the Billing drawers, so
   only the Contacts-specific pieces live here: the grouped field sections in
   the Add Client form, the verified switch, and the client detail drawer's
   Information card + tab panels.

   .modal-close / .modal-footer are kept as class hooks because
   openAddClientModal() queries them; their legacy styles.css skin is undone
   here so they read as a Basecoat icon button and drawer footer.
   ===================================================================== */
/* Overlay widths. Outside @scope: these target the `.bc` root itself. */
#add-client-modal.modal-overlay.bl-drawer > .cdm { width: min(100vw, max(40vw, 700px)); }
#view-client-modal.modal-overlay.bl-drawer > .cdm { width: min(100vw, max(72vw, 1120px)); }
/* Stacked over an already-open drawer (the client drawer's Orders / Cases tabs
   link out, and Add Client can open above nothing), a second .modal-overlay
   would dim the visible page strip twice — near black. Whichever is underneath,
   the one on top paints no dim of its own; its slide + shadow carry the depth. */
:root:has(#view-client-modal.modal-overlay.active) #add-client-modal.modal-overlay,
:root:has(#add-client-modal.modal-overlay.active) #view-client-modal.modal-overlay {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (max-width: 900px) {
  #add-client-modal.modal-overlay.bl-drawer > .cdm { width: 100vw; border-left: 0; }
}
@media (max-width: 1120px) {
  #view-client-modal.modal-overlay.bl-drawer > .cdm { width: 100vw; border-left: 0; }
}

@scope (.bc) {
  /* ---- Legacy hooks kept for the JS, restyled ---- */
  .cdm .modal-close {
    width: 32px; height: 32px; min-width: 0; padding: 0; font-size: 0; line-height: 0;
    color: var(--muted-foreground); background: transparent; border: 0; opacity: 1;
  }
  .cdm .modal-close:hover { color: var(--foreground); background: var(--accent); }
  .cdm .modal-close svg { width: 16px; height: 16px; }
  .cdm .modal-footer { margin: 0; }

  /* ---- Add Client: grouped field sections ----
     A labelled band per group so a 12-field create form reads as four short
     forms rather than one long one. */
  .ct-group { display: grid; gap: 12px; }
  .ct-group-head { display: grid; gap: 2px; }
  .ct-group-title {
    margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--foreground);
  }
  .ct-group-sub { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted-foreground); }
  .ct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px;
    background: color-mix(in oklab, var(--muted) 40%, transparent);
  }
  /* Two columns, so "span 2" and "full row" are the same span. Both names are
     kept: the markup reads c2 for a field that merely wants the wider cell and
     c3 for one that is deliberately a row of its own. */
  .ct-f--c2, .ct-f--c3 { grid-column: 1 / -1; }
  /* Sub-label under a control (the address field explains that it autofills).
     Pulled up out of `.field`'s 12px row gap so it reads as part of the field
     above it rather than as the next field's caption. */
  .ct-field-hint { margin: -6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted-foreground); }
  .ct-control { min-width: 0; }
  .ct-control .searchable-dropdown { width: 100%; }
  /* Opaque trigger: the shared SearchableDropdown skin is transparent and would
     show the tinted group band through the control. */
  .ct-control .searchable-dropdown .dropdown-search { background-color: var(--card); }
  .ct-control .searchable-dropdown .dropdown-search:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }

  /* Repeatable rows (secondary emails / phones). addDynamicListItem() in
     contacts.js builds each row as .ct-repeat-row > .input + .ct-repeat-del. */
  .ct-repeat { display: grid; gap: 6px; }
  .ct-repeat:empty { display: none; }
  .ct-repeat-row { display: flex; align-items: center; gap: 6px; }
  .ct-repeat-row > .input { flex: 1; min-width: 0; background: var(--card); }
  .ct-repeat-del {
    flex: none; display: grid; place-items: center; width: 32px; height: 36px; padding: 0;
    font: inherit; font-size: 15px; line-height: 1; color: var(--muted-foreground);
    background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md); cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  }
  .ct-repeat-del:hover {
    color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 45%, var(--input));
    background: color-mix(in oklab, var(--destructive) 8%, var(--card));
  }
  .ct-repeat-add { justify-self: start; }

  /* ---- Verified switch (same control as the order drawer's lock) ---- */
  .ct-switch {
    display: flex; align-items: center; gap: 10px; margin: 0; height: 36px; padding: 0 10px;
    border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); cursor: pointer;
  }
  /* Basecoat pads every `.field > label:has(input[role=switch])` by 12px at
     (0,2,2), which out-ranks the rule above and is why this switch used to
     tower over the field beside it. Re-state the box at (0,3,1) so the
     drawer's own sizing wins wherever the switch sits inside a `.field`. */
  .field > .ct-switch:has(input[role="switch"]) { height: 36px; padding: 0 10px; }
  .ct-switch:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
  .ct-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .ct-switch-track {
    flex: none; position: relative; width: 32px; height: 18px; border-radius: 999px;
    background: var(--muted); border: 1px solid var(--input); transition: background-color 0.18s ease, border-color 0.18s ease;
  }
  .ct-switch-track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: translate 0.18s ease;
  }
  .ct-switch input:checked + .ct-switch-track { background: var(--success); border-color: var(--success); }
  .ct-switch input:checked + .ct-switch-track::after { translate: 14px 0; }
  .ct-switch input:focus-visible + .ct-switch-track { outline: 2px solid var(--ring); outline-offset: 2px; }
  .ct-switch-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ct-switch-text strong { font-size: 13px; font-weight: 600; color: var(--foreground); }

  /* Google Places autocomplete. initAddressAutocomplete() injects a global
     #gmp-autocomplete-styles sheet using the legacy --border-default /
     --bg-surface tokens; these rules re-dress the element as a Basecoat input
     inside the Contacts drawers.

     The component's shadow root is CLOSED — `.shadowRoot` is null — so nothing
     inside it can be read or restyled, and its focus ring (a hard-coded 2px
     #1a73e8) cannot be recoloured or removed: `--gmp-mat-color-primary` and the
     rest of the documented theme properties have no effect on it. Measured, not
     assumed.

     `padding: 0` is therefore load-bearing. Google paints that ring at the
     inner edge of the host's content box, so any padding here leaves it
     floating that far inside our own border — a box drawn inside a box, which
     is what made the focused field look wrong. At 0 the two edges are flush and
     the ring reads as part of the control's border. The component supplies its
     own ~16px text inset, so the value does not go flush against the glyphs. */
  .ct-drawer gmp-place-autocomplete,
  .cvm gmp-place-autocomplete {
    display: block; width: 100%; height: 36px; padding: 0;
    font: inherit; font-size: 13px; color: var(--foreground);
    background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  /* Google's ring already marks focus, and it sits immediately inside this
     border. Adding Basecoat's ring on top stacked three edges on one control
     (3px glow + 1px border + their 2px), so only the border colour shifts here
     — enough to tie the control to the rest of the form without a second ring. */
  .ct-drawer gmp-place-autocomplete:focus-within,
  .cvm gmp-place-autocomplete:focus-within {
    border-color: var(--ring);
    /* Held explicitly: the injected legacy sheet's own `:focus` rule sets
       `background: var(--bg-elevated)`, a token this theme does not define. */
    background: var(--card);
  }
  /* validateAddressField() sets .ct-invalid when Save is pressed with no
     address, and focuses the field so the user can fix it — so this has to beat
     the :focus-within rule above. Same specificity, hence the source order:
     keep it last. Cleared as soon as a place is picked. */
  .ct-drawer gmp-place-autocomplete.ct-invalid,
  .cvm gmp-place-autocomplete.ct-invalid {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 30%, transparent);
  }

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

/* ---------------------------------------------------------------------
   Client detail drawer (.cvm) — #view-client-modal, template in
   contacts.js viewClient(). Two columns, unlike the order drawer: the
   Information band is a pinned left rail (read-only, Edit -> Cancel /
   Save) beside Basecoat line tabs with .cdm-panel panels, each column
   scrolling on its own so the client's details stay on screen while a
   long Orders table scrolls. Stacks back to one column under 900px. The
   .cdm shell,
   .cdm-head / .cdm-body, .cdm-tabs, .cdm-panel* and .cdm-section-* rules
   all come from the case / order drawer blocks above; only the Contacts
   pieces are here. Overlay placement is set outside @scope, further up.
   --------------------------------------------------------------------- */
@scope (.bc) {
  /* ---- Two-column shell ----
     The drawer is 72vw / >=1120px, so the information band gets its own left
     rail instead of a full-width band above the tabs: the client's phone,
     address and status stay readable while a 40-row Orders table scrolls
     beside them. .cdm-body is already the flex child that owns the leftover
     height (flex: 1 1 auto; min-height: 0), so handing its scroll to the two
     columns is enough to give each one the full drawer height. */
  .cvm-body {
    /* 360px, not 320: the rail header has to fit "CLIENT INFORMATION" (~155px)
       plus Cancel + Save (~140px) on one line inside 18px gutters, so the
       buttons do not drop to a second row the moment you press Edit. */
    display: grid; grid-template-columns: 360px minmax(0, 1fr);
    /* minmax(0, 1fr), not auto: an auto row sizes to its content, and the
       columns' overflow-y would then never engage — the whole drawer would
       scroll again. This pins the row to the container height instead. */
    grid-template-rows: minmax(0, 1fr); gap: 0;
    padding: 0; overflow: hidden; min-height: 0;
  }
  /* Flex column, not grid: .cvm-tabs below is sticky, and a sticky grid item's
     containing block is its own grid area — one row tall, so it could never
     travel. In a flex column the containing block is the scroller's content
     box, which is what sticky needs. */
  /* overflow-x is pinned to hidden on purpose: `overflow-y: auto` alone leaves
     overflow-x computing to `auto`, so anything a pixel too wide (the tab strip
     was, before the rule below) turned the whole column into a sideways
     scroller — which slid the panel out from under the sticky strip instead of
     just revealing the overflow. Panels that legitimately need to scroll
     sideways carry their own scroller (.cvm-table-wrap). */
  .cvm-main {
    min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 16px; padding: 0 24px 24px;
  }

  /* ---- Information rail ----
     Structural column, not a floating card: the border-right is the column
     divider, so the old card border / radius / shadow all come off. */
  .cvm-info {
    min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: block; border-right: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 22%, transparent);
  }
  .cvm-info > form { display: block; min-width: 0; }
  /* Sticky so Edit / Cancel / Save stay reachable from anywhere in the ~700px
     stack of fields below. */
  .cvm-info-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 18px; border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 45%, var(--card));
  }
  .cvm-info-head .cdm-section-title { font-size: 12px; letter-spacing: 0.12em; white-space: nowrap; }
  .cvm-info-head .cdm-section-actions { flex: none; }

  /* The counters that used to live in a .cvm-meta block beside an avatar card.
     The drawer header already states the name, email and status, so the card
     was pure duplication of the tiles below it; the counters survive as chips.
     They sit in the drawer header rather than the rail: .cdm-title already
     ellipsises and .cdm-head-text is min-width: 0, so a third `flex: none`
     child there shrinks the name instead of pushing anything off the row.
     .cdm-head aligns its children to flex-start, which left the chips sitting
     a line below the status badge and close button. Both right-hand groups are
     centred against the name block instead, so the chips, the badge and the
     close button read as one row. */
  .cvm.cdm > .cdm-head { align-items: center; }
  .cdm-head > .cvm-stats { flex: none; align-self: center; margin-left: auto; }
  .cvm.cdm > .cdm-head > .cdm-head-actions { align-self: center; }
  .cvm-stats { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
  .cvm-stat {
    display: inline-flex; align-items: baseline; gap: 5px; height: 22px; padding: 0 9px;
    border: 1px solid var(--border); border-radius: 999px;
    background: color-mix(in oklab, var(--muted) 55%, transparent);
  }
  .cvm-stat strong { font-size: 12px; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .cvm-stat-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted-foreground);
  }

  /* ---- Field rows ----
     Label over a control-shaped box, one field per line. The box is the point:
     it carries the same metrics as the .input that replaces it under Edit
     (34px tall, same radius, same 1px border), so pressing Edit changes the
     fill and nothing else — no reflow, no rows jumping. That also makes the
     row borders redundant, so the old hairlines come off and the gap between
     boxes carries the rhythm. */
  .cvm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 18px 20px; }
  .cvm-field { min-width: 0; display: grid; gap: 5px; align-content: start; }
  .cvm-label {
    display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted-foreground);
  }
  /* Vertical padding rather than a fixed height: most values are one line, but
     the address wraps and the secondary email / phone rows are chips, so the
     box grows from 34px instead of clipping them. */
  .cvm-value {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    /* Measured off Basecoat's own text input, so the swap is invisible:
       padding-inline 10px (--spacing * 2.5), --radius-md, 1px of --input, and
       its 0 1px 2px shadow. .cvm-info pins the control to 34px below, which is
       where this min-height comes from. */
    min-height: 34px; padding: 5px 10px;
    border: 1px solid var(--input); border-radius: var(--radius-md);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background: color-mix(in oklab, var(--muted) 55%, var(--card));
    font-size: 13px; font-weight: 500; color: var(--foreground); overflow-wrap: anywhere;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  /* Card fill, not muted: these sit inside the muted .cvm-value box now, the
     way chips sit inside a multi-value input, so they need to read above it. */
  .cvm-tag {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500; color: var(--foreground);
    background: var(--card); border: 1px solid var(--border);
  }
  /* font-weight matches .cvm-value so the text does not change weight when the
     box turns editable; the card fill is the only thing that shifts. */
  .cvm-info .input, .cvm-info select.select {
    height: 34px; width: 100%; font-size: 13px; font-weight: 500; background: var(--card);
  }

  /* View <-> edit: the row keeps its place and its .cvm-value box is swapped
     for the sibling .cvm-field-edit, whose control lands on the same footprint.
     The box going from muted to card fill IS the edit signal, so there is no
     row tint or accent bar on top of it. */
  .cvm-field-edit[hidden], .cvm-info-head .cdm-section-actions .btn[hidden] { display: none; }
  .cvm-field-edit { display: grid; gap: 6px; }
  .cvm-info.is-editing .cvm-field--editable > .cvm-value { display: none; }
  .cvm-info.is-editing .cvm-field:not(.cvm-field--editable) > .cvm-value { opacity: 0.85; }

  /* A pinned rail beside a tab strip that scrolls away reads lopsided, so the
     strip stays put at the top of its own column. */
  .cvm-tabs {
    position: sticky; top: 0; z-index: 2;
    /* Bleed through .cvm-main's 24px gutters so the sticky backdrop spans the
       whole column and rows can't peek past it at the edges. */
    margin: 0 -24px; padding: 18px 24px 0; background: var(--card);
  }
  /* This drawer carries six tabs — two more than the order drawer — and since
     .cvm-body became two columns the strip only gets ~759px, not the drawer's
     full width. At the shared .cdm-tabs metrics the six need 787px, so the last
     one ("AI Summary") fell off the end. Tighten the per-tab chrome until they
     fit, and let the strip scroll on its own axis if a seventh ever lands, so
     the overflow can never fall back to .cvm-main. */
  .cvm-tabs > [role="tablist"] {
    gap: 2px; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .cvm-tabs > [role="tablist"]::-webkit-scrollbar { display: none; }
  .cvm-tabs > [role="tablist"] > [role="tab"] {
    flex: none; padding: 0 10px; gap: 6px; letter-spacing: 0.06em;
  }

  /* ---- Panels ---- */
  .cvm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
  .cvm-table { border-radius: 12px; }
  .cvm-table thead th:first-child, .cvm-table tbody td:first-child { padding-left: 14px; }
  .cvm-table thead th:last-child, .cvm-table tbody td:last-child { padding-right: 14px; }
  .cvm-table tbody td:nth-child(4) { color: var(--text-secondary); font-weight: 400; }
  .cvm-empty {
    padding: 28px 16px; border: 1px dashed var(--border); border-radius: 12px;
    text-align: center; font-size: 13px; color: var(--muted-foreground);
    background: color-mix(in oklab, var(--muted) 30%, transparent);
  }

  /* Trailing "View order" / "View case" column. The ID stays plain text in the
     first column; the row's action is an explicit button instead. */
  .cvm-cell-id { font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
  .cvm-table th.cvm-col-action, .cvm-table td.cvm-col-action { width: 1%; white-space: nowrap; text-align: right; }
  /* There is no global .sr-only in this stylesheet (the only one is scoped to
     .billing-page), so the action column's header label needs its own. */
  .cvm-col-action .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .cvm-row-btn { height: 28px; padding: 0 10px; font-size: 12px; }
  .cvm-row-btn > svg { width: 13px; height: 13px; }

  /* ---- History: one card per entry ---- */
  .cvm-hist-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
  .cvm-hist-list { display: grid; gap: 10px; }
  .cvm-hist-card {
    display: grid; border: 1px solid var(--border); border-radius: 12px;
    background: var(--card); overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cvm-hist-card:hover {
    border-color: color-mix(in oklab, var(--foreground) 14%, var(--border));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .cvm-hist-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 40%, transparent);
  }
  .cvm-hist-head-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .cvm-hist-head-meta { display: flex; align-items: center; gap: 6px; flex: none; }
  .cvm-hist-action {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--foreground);
  }
  .cvm-hist-author, .cvm-hist-time { font-size: 11.5px; color: var(--muted-foreground); }
  .cvm-hist-time { font-variant-numeric: tabular-nums; }
  .cvm-hist-delete { width: 26px; height: 26px; color: var(--muted-foreground); }
  .cvm-hist-delete > svg { width: 13px; height: 13px; }
  .cvm-hist-delete:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
  .cvm-hist-body { display: grid; gap: 8px; padding: 11px 14px 12px; }
  .cvm-hist-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--foreground); overflow-wrap: anywhere; }
  .cvm-hist-empty { margin: 0; font-size: 12.5px; font-style: italic; color: var(--muted-foreground); }
  .cvm-hist-comment {
    margin: 0; padding: 8px 10px; border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0;
    font-size: 12.5px; line-height: 1.5; color: var(--muted-foreground);
    background: color-mix(in oklab, var(--muted) 45%, transparent); overflow-wrap: anywhere;
  }
  .cvm-hist-changes { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .cvm-hist-change { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
  .cvm-hist-change > svg { width: 12px; height: 12px; flex: none; color: var(--muted-foreground); }
  .cvm-hist-change-field {
    min-width: 96px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted-foreground);
  }
  .cvm-hist-change-from { color: var(--muted-foreground); text-decoration: line-through; }
  .cvm-hist-change-to { font-weight: 600; color: var(--foreground); }

  /* ---- RA Automator: envelope cards ---- */
  .cvm-ra-card {
    display: grid; border: 1px solid var(--border); border-radius: 12px;
    background: var(--card); overflow: hidden; margin-bottom: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cvm-ra-card:hover {
    border-color: color-mix(in oklab, var(--foreground) 14%, var(--border));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .cvm-ra-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 40%, transparent);
  }
  .cvm-ra-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--foreground); overflow-wrap: anywhere; }
  .cvm-ra-head-meta { display: flex; align-items: center; gap: 10px; flex: none; }
  .cvm-ra-amount { font-size: 13.5px; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .cvm-ra-meta {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    padding: 11px 14px 12px;
  }
  .cvm-ra-meta-item { display: grid; gap: 3px; min-width: 0; }
  .cvm-ra-meta-value {
    display: flex; align-items: center; gap: 4px; min-height: 22px; min-width: 0;
    font-size: 13px; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere;
  }
  .cvm-ra-envelope { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
  .cvm-ra-copy { width: 24px; height: 24px; flex: none; color: var(--muted-foreground); }
  .cvm-ra-copy > svg { width: 12px; height: 12px; }
  .cvm-ra-copy:hover { color: var(--foreground); }

  @media (max-width: 1100px) {
    .cvm-ra-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Below this the drawer is already 100vw and a 320px rail costs the tables
     too much, so the rail stops being a column: the band goes back on top as
     a card, both columns un-stick, and .cdm-body takes its scroll back. */
  @media (max-width: 900px) {
    .cvm-body {
      grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px;
      padding: 18px 24px 24px; overflow: auto; align-content: start;
    }
    .cvm-info {
      overflow: visible; border-right: 0; border: 1px solid var(--border);
      border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .cvm-info-head { position: static; border-radius: 14px 14px 0 0; }
    .cvm-grid { padding: 14px 18px 18px; }
    .cvm-main { overflow: visible; padding: 0; display: grid; align-content: start; }
    .cvm-tabs { position: static; margin: 0; padding: 0; background: none; }
  }
  @media (max-width: 760px) {
    .cvm-ra-meta { grid-template-columns: minmax(0, 1fr); }
    .cvm-hist-toolbar .btn { flex: 1 1 auto; }
    /* .cdm-head does not wrap, so at phone width the chips would eat the
       client's name. The Orders and Cases counts are also on the tab badges,
       so dropping them here loses only the "Since" date. */
    .cdm-head > .cvm-stats { display: none; }
  }
}

/* ---------------------------------------------------------------------
   Contacts page — legacy, not yet converted
   ---------------------------------------------------------------------
   Moved verbatim (only re-indented) out of the fragment's old inline
   <style> block for the parts of this page that were NOT redesigned, so
   they keep looking exactly as they did:

     • #lawfirm-modal's state combobox — the entity editor is still legacy
       markup and, because it is not a .modal-overlay, loadPage() leaves it
       inside #contacts-page, which is what makes these
       `.contacts-page #lawfirm-modal …` selectors keep matching.
     • #leads-table's .lead-status-badge pills — leadStatusBadgeClass() in
       contacts.js picks the modifier.
     • the generic .status-badge pill (dot suppressed) — emitted by the lead
       detail modal and by the client drawer's Orders / Cases tables.
     • the phone / email .copy-cell affordance and its floating "Copied"
       tip, shared by both tables.

   Everything else from that 1,435-line block was either rewritten above or
   dropped as dead: the whole `#lawfirms-filter-modal` / `#lawfirms-content`
   family styled a Law Firms tab whose markup no longer exists.
   --------------------------------------------------------------------- */
@scope (.bc) {
  /* Leads table status: oval outline + colored text (contacts-reference), not filled tint */
  .contacts-page #leads-table .lead-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
  }
  .contacts-page #leads-table .lead-status-badge.lead-status-new {
    border-color: var(--primary);
    color: var(--primary);
  }
  .contacts-page #leads-table .lead-status-badge.lead-status-contacted {
    border-color: #eab308;
    color: #ca8a04;
  }
  .contacts-page #leads-table .lead-status-badge.lead-status-calendered {
    border-color: var(--success);
    color: #15803d;
  }
  .contacts-page #leads-table .lead-status-badge.lead-status-retainer-sent {
    border-color: #a21caf;
    color: #a21caf;
  }
  .contacts-page #leads-table .lead-status-badge.lead-status-retained {
    border-color: var(--success);
    color: #16a34a;
  }
  .contacts-page #leads-table .lead-status-badge.lead-status-follow-up {
    border-color: var(--orange);
    color: var(--orange);
  }
  .contacts-page #leads-table .lead-status-badge.lead-status-converted {
    border-color: var(--primary-hover);
    color: var(--primary-hover);
  }
  .contacts-page #leads-table .lead-status-badge.lead-status-retired {
    border-color: var(--danger);
    color: var(--danger);
  }
  .contacts-page #leads-table .lead-status-badge.lead-status-invalid {
    border-color: #9ca3af;
    color: #9ca3af;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-cs-wrap .cs-trigger {
    width: 100%;
    padding: 10px 32px 10px 14px;
  /* contacts-reference: --bg-input light #fff */
    background: #ffffff;
    border: 1px solid #d1d5dc;
    border-radius: 8px;
    font-size: 13px;
    color: #111827;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    display: block;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-cs-wrap .cs-trigger.placeholder {
    color: #6b7280;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-cs-wrap .cs-trigger:hover {
    border-color: #3b82f6;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-cs-wrap .cs-trigger.open {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  }
  .contacts-page #lawfirm-modal #lawfirm-state-cs-wrap .cs-trigger .cs-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    transition: transform 0.15s ease;
    color: #6b7280;
    flex-shrink: 0;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-cs-wrap .cs-trigger.open .cs-chevron {
    transform: translateY(-50%) rotate(180deg);
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu.cs-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
  /* contacts-reference: --bg-dropdown light #fff */
    background: #ffffff;
    border: 1px solid #e2e6ed;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 10050;
    max-height: min(52vh, 320px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    animation: contacts-cs-dropIn 0.12s ease;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu.cs-menu.open {
    display: block;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu::-webkit-scrollbar {
    width: 6px;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu::-webkit-scrollbar-track {
    background: transparent;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 3px;
  }
  .contacts-page #lawfirm-modal .lawfirm-state-cs-search-wrap {
    padding: 8px 12px;
    border-bottom: 1px solid #e2e6ed;
  }
  .contacts-page #lawfirm-modal .lawfirm-state-cs-search-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: inherit;
    color: #111827;
    background: transparent;
    box-sizing: border-box;
  }
  .contacts-page #lawfirm-modal .lawfirm-state-cs-empty {
    padding: 10px 16px;
    font-size: 13px;
    color: #6b7280;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu .cs-opt {
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.35;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.1s;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu .cs-opt:first-of-type {
    border-radius: 0;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu .lawfirm-state-cs-search-wrap + .cs-opt {
    border-radius: 0;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu .cs-opt:last-child {
    border-radius: 0 0 10px 10px;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu .cs-opt:hover {
    background: #f0f4ff;
    color: #111827;
  }
  .contacts-page #lawfirm-modal #lawfirm-state-menu .cs-opt.selected {
    background: #3b82f6;
    color: #fff;
  }
  .contacts-page #leads-table .copy-cell {
    cursor: pointer;
    transition: color 0.15s ease;
    color: inherit;
  }
  .contacts-page #leads-table .copy-cell:hover {
    color: var(--primary, #3b82f6);
  }
  .contacts-page #clients-table .copy-cell {
    cursor: pointer;
    transition: color 0.15s ease;
    color: inherit;
  }
  .contacts-page #clients-table .copy-cell:hover {
    color: var(--primary, #3b82f6);
  }
  /* The clients table no longer has a standalone Email column — the address is
     part of the identity cell — so the copy cell is clamped there instead. */
  .contacts-page #clients-table .ct-client-email .copy-cell {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .contacts-page .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .contacts-page .status-badge::before {
    content: none !important;
    display: none !important;
  }
  /* Entities/clients generic statuses: oval outline + colored text (contacts-reference) */
  .contacts-page .status-badge.active {
    border-color: var(--success);
    color: var(--success);
  }
  .contacts-page .status-badge.inactive {
    border-color: var(--danger);
    color: var(--danger);
  }

  /* Dark-mode overrides live outside this @scope block: html[data-theme] is an
     ANCESTOR of the .bc root, and inside `@scope (.bc)` every selector gets an
     implicit `:scope ` prefix, so `[data-theme="dark"] …` would only match a
     [data-theme] element *inside* the root — i.e. never. See the block below. */
}

/* Dark-mode half of the legacy Contacts rules above. Unscoped on purpose —
   html[data-theme] sits above the .bc root (see the note in that block). */
[data-theme="dark"] .contacts-page #leads-table .lead-status-badge.lead-status-calendered {
  color: var(--success);
}
[data-theme="dark"] .contacts-page #leads-table .lead-status-badge.lead-status-retained {
  color: var(--success);
}
[data-theme="dark"] .contacts-page #lawfirm-modal #lawfirm-state-menu::-webkit-scrollbar-thumb {
  background: #353a50;
}
[data-theme="dark"] .contacts-page #lawfirm-modal #lawfirm-state-cs-wrap .cs-trigger {
  background: #1e2235;
  border-color: #353a50;
  color: #e5e7eb;
}
[data-theme="dark"] .contacts-page #lawfirm-modal #lawfirm-state-cs-wrap .cs-trigger.placeholder {
  color: #9ca3af;
}
[data-theme="dark"] .contacts-page #lawfirm-modal #lawfirm-state-cs-wrap .cs-trigger .cs-chevron {
  color: #9ca3af;
}
[data-theme="dark"] .contacts-page #lawfirm-modal #lawfirm-state-menu.cs-menu {
  background: #1e2235;
  border: 1px solid rgba(59, 130, 246, 0.38);
  box-shadow:
0 10px 30px rgba(0, 0, 0, 0.45),
  0 0 0 1px rgba(59, 130, 246, 0.12);
}
[data-theme="dark"] .contacts-page #lawfirm-modal .lawfirm-state-cs-search-wrap {
  border-bottom-color: rgba(59, 130, 246, 0.22);
}
[data-theme="dark"] .contacts-page #lawfirm-modal .lawfirm-state-cs-search-input {
  color: #e5e7eb;
}
[data-theme="dark"] .contacts-page #lawfirm-modal .lawfirm-state-cs-empty {
  color: #9ca3af;
}
[data-theme="dark"] .contacts-page #lawfirm-modal #lawfirm-state-menu .cs-opt {
  color: #9ca3af;
}
[data-theme="dark"] .contacts-page #lawfirm-modal #lawfirm-state-menu .cs-opt:hover {
  background: rgba(59, 130, 246, 0.18);
  color: #e5e7eb;
}


/* Floating "Copy to clipboard" / "Copied" hint for the Contacts tables' phone
   and email cells. Unscoped on purpose — ensureLeadsCopyFloatTipEl() in
   contacts.js appends this tip straight to <body>, so it has no `.bc` ancestor
   and rules inside `@scope (.bc)` can never reach it: it would render fully
   unstyled (static, no background) at the end of the document, i.e. invisible.
   Keep these two rules at top level. */
.contacts-leads-copy-float-tip {
  position: fixed;
  z-index: 10000;
  background: var(--primary, #3b82f6);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.28);
}
.contacts-leads-copy-float-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--primary, #3b82f6);
}

/* =====================================================================
   Vault page — pages/vault.html
   ---------------------------------------------------------------------
   Rides the Matters chrome (.mt-head / .card.mt-card / .mt-card-head /
   .mt-tools; the shared rules above were widened to include .vault-page).
   Everything vault-specific lives here under a `vt-` prefix, except the
   `vault-method` / `vault-pill` / `vault-verify` / `vault-empty` class names,
   which vault.js emits in template strings and so keep their original spelling.
   Element ids are owned by assets/modules/features/vault.js.
   ===================================================================== */
@scope (.bc) {
  /* Add-method form on the left, saved list on the right. The form card is the
     narrower of the two — it's a single field plus a button. */
  .vt-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 18px; align-items: start; }
  @media (max-width: 1100px) { .vt-layout { grid-template-columns: minmax(0, 1fr); } }

  .vt-card { background: color-mix(in oklab, var(--card) 82%, transparent); }
  .vt-body { display: grid; gap: 16px; padding: 18px 20px 20px; border-top: 1px solid var(--border); }

  /* ---- Instant-verify lede ---- */
  .vt-lede {
    display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px;
    border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border)); border-radius: 12px;
    background: color-mix(in oklab, var(--primary) 6%, var(--card));
  }
  .vt-lede-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--primary); box-shadow: 0 2px 8px color-mix(in oklab, var(--primary) 35%, transparent); }
  .vt-lede-icon svg { width: 17px; height: 17px; }
  .vt-lede-text { display: grid; gap: 4px; min-width: 0; }
  .vt-lede-text strong { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--foreground); }
  .vt-lede-text span { font-size: 12.5px; line-height: 1.5; color: var(--muted-foreground); }

  /* ---- Field + hints ---- */
  .vt-card .field { display: grid; gap: 6px; min-width: 0; }
  .vt-card .label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .vt-card .input { background: var(--card); }
  .vt-hint { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted-foreground); }
  .vt-hint:empty { display: none; }
  /* vault.js flips this to display:block when the API or validation rejects. */
  .vt-errors {
    display: none; padding: 11px 13px; border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent);
    background: color-mix(in oklab, var(--destructive) 8%, transparent);
    font-size: 12.5px; line-height: 1.5; color: var(--destructive);
  }

  /* ---- Collapsible debit mandate ---- */
  .vt-mandate { display: grid; gap: 0; border: 1px dashed var(--border); border-radius: 11px; overflow: hidden; }
  .vt-mandate > summary {
    display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer; user-select: none;
    padding: 11px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foreground);
    transition: background-color 0.15s ease;
  }
  .vt-mandate > summary::-webkit-details-marker { display: none; }
  .vt-mandate > summary:hover { background: var(--accent); }
  .vt-mandate > summary svg { flex: none; width: 12px; height: 12px; color: var(--muted-foreground); transition: transform 0.15s ease; }
  .vt-mandate[open] > summary { border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 35%, transparent); }
  .vt-mandate[open] > summary svg { transform: rotate(90deg); }
  .vt-mandate-note { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted-foreground); }
  .vt-mandate-text { margin: 0; padding: 13px 15px 15px; font-size: 11.5px; line-height: 1.65; color: var(--muted-foreground); }
  .vt-mandate-text strong { color: var(--foreground); }

  /* ---- Card footer: reassurance on the left, the primary action on the right ---- */
  .vt-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 13px 20px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 35%, transparent);
  }
  .vt-secured { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 11.5px; color: var(--muted-foreground); }
  .vt-secured svg { flex: none; width: 13px; height: 13px; }
  .vt-foot .btn { height: 38px; }

  /* ---- Saved methods list ---- */
  .vt-list { display: grid; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--border); }
  .vault-method {
    display: flex; align-items: flex-start; gap: 13px; min-width: 0;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .vault-method:hover { border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
  .vault-method-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); }
  .vault-method-icon svg { width: 18px; height: 18px; }
  .vault-method-body { flex: 1; min-width: 0; }
  .vault-method-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--foreground); }
  .vault-method-meta { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .vault-pill {
    flex: none; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
  }
  .vault-pill.is-verified { color: var(--success); background: color-mix(in oklab, var(--success) 11%, transparent); }
  .vault-pill.is-pending { color: var(--warning); background: color-mix(in oklab, var(--warning) 13%, transparent); }

  /* Microdeposit verification callout (vault.js renderVerifyBlock) */
  .vault-verify {
    margin-top: 12px; padding: 12px 14px; border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--warning) 38%, transparent);
    background: color-mix(in oklab, var(--warning) 8%, transparent);
  }
  .vault-verify-title { margin: 0 0 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--foreground); }
  .vault-verify-text { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-foreground); }
  .vault-verify-text strong { color: var(--foreground); }
  .vault-verify-code { padding: 1px 6px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--foreground); background: color-mix(in oklab, var(--warning) 18%, transparent); }
  .vault-verify-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--primary); text-decoration: none;
  }
  .vault-verify-link:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* ---- Empty / loading / no-attorney states ---- */
  .vault-empty {
    padding: 32px 20px; text-align: center; border: 1px dashed var(--border); border-radius: 12px;
    font-size: 12.5px; line-height: 1.6; color: var(--muted-foreground);
  }
  .vault-empty-title { margin: 0 0 5px; font-size: 13.5px; font-weight: 700; color: var(--foreground); }
  .vault-empty p { margin: 0; }
  .vt-blank {
    display: grid; justify-items: center; gap: 8px; max-width: 520px; margin: 0 auto;
    padding: 40px 28px; border: 1px dashed var(--border); border-radius: 16px;
    background: color-mix(in oklab, var(--card) 70%, transparent); text-align: center;
  }
  .vt-blank-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 13px; color: var(--muted-foreground); background: var(--muted); }
  .vt-blank-icon svg { width: 22px; height: 22px; }
  .vt-blank-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--foreground); }
  .vt-blank-text { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-foreground); }
}

/* =====================================================================
   Revenue page — pages/reports_revenue.html
   ---------------------------------------------------------------------
   Rides the Matters chrome (.mt-head / .card.mt-card / .mt-card-head /
   .mt-tools / .mt-table) and reuses the Cashier .cs-stats / .cs-stat tiles for
   the summary row; .rv-stats only changes the column count. Everything else is
   `rv-` prefixed and replaces the ~290 lines of inline style= the page used to
   carry. Element ids, and the .period-btn / .active classes on the period bar,
   are owned by assets/modules/features/revenueReport.js.
   ===================================================================== */
@scope (.bc) {
  /* Four equal tiles rather than Cashier's hero + 4. The hero tile is the last
     one here (Net Profit), so it must not span the row when the grid halves. */
  .rv-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1200px) {
    .rv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rv-stats .cs-stat--hero { grid-column: auto; }
  }
  @media (max-width: 560px) { .rv-stats { grid-template-columns: 1fr; } }

  /* ---- Period bar ---- */
  .rv-periods {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: color-mix(in oklab, var(--card) 78%, transparent);
  }
  .rv-periods-label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
  .period-buttons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  /* Same voice as the .mt-pills quick-filter pills on Matters / Cashier. */
  .rv-periods .period-btn {
    height: 30px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
    color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .rv-periods .period-btn:hover { color: var(--foreground); background: var(--accent); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
  .rv-periods .period-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .rv-periods .period-btn.active { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }

  /* Custom range: an inline group at the end of the pill row, not a panel of its
     own. revenueReport.js sets display:flex, so the hidden state stays on the
     inline style="display:none" the markup ships with. The control is the shared
     .drp-trigger (common/date_range_picker.js), sized down from its 36px filter-row
     default to sit level with the 30px pills. */
  /* flex: none + nowrap on purpose. As a wrapping flex item its automatic width
     resolved to the widest child (the trigger), which squeezed the "Range" label
     onto a second line and made the whole pill row 76px tall. The parent row is
     the one that should wrap; this group stays a single unit. */
  .rv-custom {
    flex: none; align-items: center; gap: 8px; flex-wrap: nowrap;
    padding-left: 14px; border-left: 1px solid var(--border);
  }
  .rv-custom-label { flex: none; white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .rv-periods .rv-custom .drp-trigger {
    height: 30px; padding: 0 12px; gap: 7px; font-size: 12px; font-weight: 600;
    background: var(--card); border-radius: 999px;
  }
  .rv-periods .rv-custom .drp-trigger svg { width: 13px; height: 13px; }
  .rv-periods .rv-custom .drp-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
  /* Reads as a real selection once a range is applied. */
  .rv-periods .rv-custom .drp-trigger.has-selection {
    color: var(--primary); font-weight: 700;
    border-color: color-mix(in oklab, var(--primary) 50%, var(--input));
    background: color-mix(in oklab, var(--primary) 8%, var(--card));
  }
  .rv-periods .rv-custom .drp-trigger.has-selection svg { color: var(--primary); }
  /* Once the row wraps, the divider reads as a stray rule. */
  @media (max-width: 1180px) { .rv-custom { padding-left: 0; border-left: 0; } }
  @media (max-width: 480px) { .rv-periods .rv-custom .drp-trigger > span { max-width: 140px; } }

  /* ---- Map card ---- */
  .rv-map { margin-bottom: 18px; }
  .rv-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); }
  .rv-zoom .btn[data-size="icon"] { width: 30px; height: 30px; }
  .rv-zoom .btn svg { width: 15px; height: 15px; }
  .rv-zoom-level { min-width: 44px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

  .rv-viewport {
    position: relative; width: 100%; height: 500px; overflow: hidden; cursor: grab;
    border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 30%, transparent);
  }
  @media (max-width: 760px) { .rv-viewport { height: 360px; } }
  /* revenueReport.js writes the pan/zoom transform here. */
  .rv-transform { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-origin: center center; transition: transform 0.1s ease-out; }
  .rv-svg-host { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 10px; }

  /* ---- Legend ---- */
  .rv-legend {
    position: absolute; right: 16px; bottom: 16px; z-index: 10; min-width: 170px;
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px;
    background: color-mix(in oklab, var(--card) 92%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
  .rv-legend-title { margin: 0 0 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
  .rv-legend-rows { display: grid; gap: 7px; }
  .rv-legend-row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .rv-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; }
  .rv-swatch--none { background: var(--card); border: 1px solid var(--border); }
  @media (max-width: 620px) { .rv-legend { display: none; } }

  /* ---- Loading / drag hint ---- */
  .rv-loading { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in oklab, var(--card) 88%, transparent); }
  .rv-spinner { width: 30px; height: 30px; border: 3px solid color-mix(in oklab, var(--primary) 28%, transparent); border-top-color: var(--primary); border-radius: 50%; animation: rv-spin 0.9s linear infinite; }
  .rv-drag-hint {
    position: absolute; bottom: 12px; left: 50%; translate: -50% 0; pointer-events: none;
    padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 600;
    color: var(--card); background: color-mix(in oklab, var(--foreground) 82%, transparent);
    opacity: 0; transition: opacity 0.3s ease;
  }
  .rv-viewport:hover .rv-drag-hint { opacity: 1; }

  /* ---- Cursor tooltip (position written by revenueReport.js) ---- */
  .rv-tip {
    display: none; position: fixed; z-index: 9999; min-width: 190px; pointer-events: none;
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--popover, var(--card)); color: var(--foreground);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  }
  .rv-tip-name { margin-bottom: 9px; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: var(--foreground); }
  .rv-tip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 11.5px; color: var(--muted-foreground); }
  .rv-tip-value { font-size: 13px; font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }

  /* ---- State detail card ---- */
  .rv-state {
    display: flex; flex-direction: column; width: min(800px, 100%); max-height: min(80vh, 760px);
    border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
    background: var(--card); color: var(--card-foreground);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  .rv-state-head { flex: none; display: flex; align-items: center; gap: 14px; padding: 16px 18px 16px 20px; border-bottom: 1px solid var(--border); }
  .rv-state-abbr {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px;
    font-size: 17px; font-weight: 800; letter-spacing: 0.02em; color: #fff;
    background: linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 55%, #000));
  }
  .rv-state-head-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
  .rv-state-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rv-state-total { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
  .rv-state-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .rv-state-table { border-top: 0; }
  .rv-state-table thead th.rv-th-num, .rv-state-table tbody td.rv-td-num { text-align: right; font-variant-numeric: tabular-nums; }
  .rv-state-table tbody td.rv-td-client { color: var(--foreground); font-weight: 600; }
  .rv-state-table tbody td.rv-td-num { color: var(--success); font-weight: 700; }
  .rv-state-table tbody tr:hover td { background: transparent; }
  .rv-state-table tbody td.rv-state-msg { padding: 40px 16px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
  .rv-state-table tbody td.rv-state-msg--error { color: var(--destructive); }
}

/* The state overlay is the `.bc` root itself (loadPage may hoist it to <body>),
   so its own placement sits outside the @scope block. Above the app header (30)
   and in the same band as the legacy .modal-overlay drawers. */
.rv-state-overlay {
  position: fixed; inset: 0; z-index: 1000;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@keyframes rv-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   Tickets page — pages/tickets.html
   ---------------------------------------------------------------------
   Rides the Matters chrome (.mt-head / .mt-search; the shared rules above were
   widened to include .tickets-page). The board is `tk-` prefixed, except the
   class names tickets.js owns: .tickets-column-body (drop target, gains
   .drag-over), .tickets-column-empty, and the .ticket-card / .ticket-card-* /
   .ticket-move-btn markup _ticketCardHtml() emits. The card carries
   data-status and data-priority so the accents need no extra JS.
   ===================================================================== */
@scope (.bc) {
  /* ---- Toolbar ---- */
  .tk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .tk-bar .mt-search { width: 300px; }
  .tk-bar .mt-search > .input { background: var(--card); }
  .tk-bar-hint { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 11.5px; color: var(--muted-foreground); }
  .tk-bar-hint svg { flex: none; width: 14px; height: 14px; }
  @media (max-width: 620px) { .tk-bar .mt-search { width: 100%; } .tk-bar-hint { display: none; } }

  /* ---- Board ---- */
  .tk-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  @media (max-width: 960px) { .tk-board { grid-template-columns: 1fr; } }

  .tk-col {
    --tk-tone: var(--muted-foreground);
    display: flex; flex-direction: column; min-width: 0; min-height: 180px;
    max-height: calc(100vh - 280px);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    background: color-mix(in oklab, var(--card) 72%, transparent);
  }
  .tk-col[data-status="open"] { --tk-tone: #eab308; }
  .tk-col[data-status="in_progress"] { --tk-tone: var(--info, #0ea5e9); }
  .tk-col[data-status="resolved"] { --tk-tone: var(--success); }
  /* A tone rule along the top edge says which column you're in at a glance. */
  .tk-col::before { content: ""; display: block; flex: none; height: 3px; background: var(--tk-tone); }

  .tk-col-head {
    flex: none; display: flex; align-items: center; gap: 9px;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 40%, transparent);
  }
  .tk-col-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tk-tone); box-shadow: 0 0 0 3px color-mix(in oklab, var(--tk-tone) 22%, transparent); }
  .tk-col-title { flex: 1; min-width: 0; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foreground); }
  .tk-col-count {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--tk-tone); background: color-mix(in oklab, var(--tk-tone) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--tk-tone) 32%, transparent);
  }

  /* Drop target. tickets.js adds .drag-over on dragover. */
  .tickets-column-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 9px; padding: 10px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }
  .tickets-column-body.drag-over {
    background: color-mix(in oklab, var(--tk-tone) 9%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--tk-tone) 45%, transparent);
  }
  .tickets-column-empty {
    padding: 24px 12px; text-align: center; font-size: 12px; color: var(--muted-foreground);
    border: 1px dashed var(--border); border-radius: 10px;
  }

  /* ---- Cards ---- */
  .ticket-card {
    --tk-pri: var(--border);
    position: relative; display: grid; gap: 8px; min-width: 0; cursor: pointer;
    padding: 11px 12px 11px 14px; border: 1px solid var(--border); border-radius: 11px;
    background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, translate 0.15s ease;
  }
  /* Priority accent down the leading edge (data-priority from _ticketCardHtml) */
  .ticket-card[data-priority="high"] { --tk-pri: var(--destructive); }
  .ticket-card[data-priority="medium"] { --tk-pri: var(--warning); }
  .ticket-card[data-priority="low"] { --tk-pri: var(--success); }
  .ticket-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tk-pri); }
  .ticket-card:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); box-shadow: var(--shadow-md); translate: 0 -1px; }
  .ticket-card:active { cursor: grabbing; }
  .ticket-card.dragging { opacity: 0.45; border-style: dashed; border-color: var(--primary); box-shadow: none; translate: 0 0; }

  .ticket-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ticket-card-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
  .ticket-card-title { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--foreground); overflow-wrap: anywhere; }
  .ticket-card-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .ticket-card-chip {
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    font-size: 10.5px; font-weight: 600; text-transform: capitalize;
    color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border);
  }
  .ticket-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  .ticket-card-date { font-size: 10.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .ticket-card-actions { display: flex; gap: 4px; }
  .ticket-move-btn {
    display: grid; place-items: center; width: 24px; height: 24px; padding: 0; cursor: pointer;
    border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--muted-foreground);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .ticket-move-btn svg { width: 12px; height: 12px; }
  .ticket-move-btn:hover:not(:disabled) { color: #fff; background: var(--primary); border-color: var(--primary); }
  .ticket-move-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
  .ticket-move-btn:disabled { opacity: 0.3; cursor: not-allowed; }

  /* Priority chip in the card header: tones keyed by _priorityVariant()
     (high→overdue, medium→pending, low→active). */
  .ticket-card .status-badge {
    padding: 2px 9px; gap: 5px; border-radius: 999px; white-space: nowrap;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    background: color-mix(in oklab, currentColor 10%, transparent);
    border: 1px solid color-mix(in oklab, currentColor 28%, transparent);
  }
  .ticket-card .status-badge.overdue { color: var(--destructive); }
  .ticket-card .status-badge.pending { color: var(--warning); }
  .ticket-card .status-badge.active { color: var(--success); }
}

/* =====================================================================
   Tickets drawers — #new-ticket-modal (.tkm) and #ticket-detail-modal (.tkd)
   Both ride the .bl-drawer / .cdm / .blm shells from the Billing drawers, so
   the slide-in, the field skin and the SearchableDropdown skin all come for
   free; only the ticket-specific bits are below. The overlays carry `.bc`
   themselves because loadPage() hoists them to <body>.
   ===================================================================== */
@scope (.bc) {
  /* ---- Create Ticket (.tkm) ---- */
  .tkm .textarea { min-height: 104px; }
  .tkm .tkm-notes { min-height: 76px; }

  /* ---- Detail (.tkd) ---- */
  .tkd-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.02em; }
  .tkd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
  .tkd-fact {
    --tkd-tone: var(--border);
    display: grid; gap: 4px; min-width: 0; padding: 10px 13px 11px;
    border: 1px solid var(--border); border-left: 3px solid var(--tkd-tone); border-radius: 10px; background: var(--card);
  }
  .tkd-fact--wide { grid-column: 1 / -1; }
  .tkd-fact dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .tkd-fact dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--foreground); text-transform: capitalize; overflow-wrap: anywhere; }
  /* Tones come from the data-status / data-priority _openDetailModal() writes
     onto #ticket-detail-facts — _setText() can't put markup inside the values. */
  .tkd-facts[data-status="open"] .tkd-fact--status { --tkd-tone: #eab308; }
  .tkd-facts[data-status="in_progress"] .tkd-fact--status { --tkd-tone: var(--info, #0ea5e9); }
  .tkd-facts[data-status="resolved"] .tkd-fact--status { --tkd-tone: var(--success); }
  .tkd-facts[data-priority="high"] .tkd-fact--priority { --tkd-tone: var(--destructive); }
  .tkd-facts[data-priority="medium"] .tkd-fact--priority { --tkd-tone: var(--warning); }
  .tkd-facts[data-priority="low"] .tkd-fact--priority { --tkd-tone: var(--success); }
  @media (max-width: 560px) { .tkd-facts { grid-template-columns: 1fr; } }

  /* Read-only description / notes. Not .form-control: .blm sizes that as a
     36px input, and these are prose blocks. */
  .tkd-prose {
    min-height: 92px; padding: 11px 13px; white-space: pre-wrap; overflow-wrap: anywhere;
    font-size: 13px; line-height: 1.55; color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--muted) 35%, transparent);
  }
  .tkd-prose--short { min-height: 62px; }

  /* Footer: "Move to" + the three stage buttons on the left, Close on the right. */
  .tkd .ticket-detail-status-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .tkd-move-label { margin-right: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .tkd .ticket-detail-status-actions .btn[data-size="sm"] { height: 30px; padding-inline: 11px; font-size: 11.5px; background: var(--card); }
  /* The button for the ticket's current stage is disabled by
     _updateDetailStatusButtons(), which also marks it .active. */
  .tkd .ticket-detail-status-actions .btn.active, .tkd .ticket-detail-status-actions .btn.active:disabled {
    color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, var(--card));
    border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); opacity: 1;
  }
  @media (max-width: 560px) { .tkd .blm-foot { flex-direction: column; align-items: stretch; } .tkd .blm-foot-start { margin-right: 0; } }
}

/* =====================================================================
   GLOBAL SEARCH (gsc-) — anchored palette + read-only client card.
   The two <dialog> elements live in #shell-dialogs, which is the `.bc`
   @scope root; a scope never matches its own root, so selectors on the
   dialogs themselves stay outside the @scope block below.
   ===================================================================== */

/* ---- Palette anchoring ----
   Basecoat's `.command-dialog > .command` is fixed at top:33.33%; left:50%
   with a -50% x-translate. Anchored mode replaces all three. Coordinates
   come from the trigger's rect via searchPalette.js. */
#global-search-dialog > .command.gsc-anchored {
  top: var(--gsc-top, 64px);
  left: auto;
  right: var(--gsc-right, 16px);
  translate: none;
  width: min(440px, 100vw - 32px);
  max-width: none;
}
#global-search-dialog::backdrop { background: rgba(0, 0, 0, 0.12); }

/* ---- Card dialog ---- */
.gsc-dialog {
  border: 0; padding: 0; background: none; max-width: none; max-height: none;
  width: 100%; height: 100%; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
}
.gsc-dialog:not([open]) { display: none; }
.gsc-dialog::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); }

@scope (.bc) {
  .gsc-card {
    display: flex; flex-direction: column;
    width: min(90vw, 1440px); height: min(88vh, 940px);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    background: var(--card); color: var(--card-foreground);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  .gsc-card::before {
    content: ""; display: block; flex: none; height: 4px;
    background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 30%, transparent));
  }

  /* ---- Head ---- */
  .gsc-card-head {
    flex: none; display: grid; gap: 4px 16px; align-items: start;
    grid-template-columns: auto 1fr auto;
    padding: 14px 20px 14px 16px; border-bottom: 1px solid var(--border);
  }
  .gsc-back { grid-row: 1 / span 2; align-self: center; }
  .gsc-card-head-text { min-width: 0; }
  .gsc-card-title {
    margin: 0; font-size: 19px; font-weight: 650; letter-spacing: 0.02em;
    text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gsc-card-sub {
    margin: 2px 0 0; font-size: 12.5px; color: var(--muted-foreground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gsc-card-head-actions { display: flex; align-items: center; gap: 8px; grid-row: 1 / span 2; }

  /* ---- Body: rail + pane ---- */
  .gsc-card-body {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: 260px 1fr;
  }
  .gsc-rail {
    min-height: 0; overflow-y: auto; padding: 12px 10px;
    border-right: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 40%, transparent);
  }
  .gsc-rail-group + .gsc-rail-group { margin-top: 14px; }
  .gsc-rail-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 4px 8px 6px; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground);
  }
  .gsc-rail-count {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9px; font-size: 10.5px; letter-spacing: 0;
    background: color-mix(in oklab, var(--muted-foreground) 18%, transparent);
  }
  .gsc-rail-item {
    display: grid; gap: 1px; width: 100%; padding: 7px 9px; margin-bottom: 2px;
    border: 0; border-radius: 8px; background: none; color: inherit;
    text-align: left; cursor: pointer; font: inherit;
  }
  .gsc-rail-item:hover { background: color-mix(in oklab, var(--foreground) 6%, transparent); }
  .gsc-rail-item[aria-selected="true"] {
    background: color-mix(in oklab, var(--primary) 14%, transparent);
    box-shadow: inset 2px 0 0 var(--primary);
  }
  .gsc-rail-title {
    font-size: 13px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gsc-rail-sub { font-size: 11px; color: var(--muted-foreground); text-transform: capitalize; }
  .gsc-rail-empty { margin: 2px 9px; font-size: 12px; color: var(--muted-foreground); }

  .gsc-pane { min-height: 0; overflow-y: auto; padding: 18px 22px; }
  .gsc-pane-head {
    display: flex; align-items: start; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
  }
  .gsc-eyebrow {
    margin: 0 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted-foreground);
  }
  .gsc-pane-title { margin: 0; font-size: 17px; font-weight: 600; text-transform: capitalize; }
  .gsc-pane-actions { flex: none; }

  .gsc-facts {
    display: grid; gap: 14px 20px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .gsc-facts--wide { margin-top: 18px; grid-template-columns: 1fr; }
  .gsc-facts + .gsc-facts { padding-top: 16px; border-top: 1px solid var(--border); }
  .gsc-fact { display: grid; gap: 3px; min-width: 0; align-content: start; }
  .gsc-fact-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--muted-foreground);
  }
  .gsc-fact-value { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
  .gsc-fact-value a { color: var(--primary); text-decoration: none; }
  .gsc-fact-value a:hover { text-decoration: underline; }
  .gsc-fact-copy { display: flex; align-items: center; gap: 6px; }

  .gsc-copy {
    flex: none; display: grid; place-items: center; width: 22px; height: 22px;
    border: 0; border-radius: 6px; background: none; color: var(--muted-foreground); cursor: pointer;
  }
  .gsc-copy svg { width: 13px; height: 13px; }
  .gsc-copy:hover { background: color-mix(in oklab, var(--foreground) 8%, transparent); color: var(--foreground); }
  .gsc-copy.is-copied { color: var(--primary); }

  .gsc-link {
    padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px;
    color: var(--primary); cursor: pointer; text-align: left;
  }
  .gsc-link:hover { text-decoration: underline; }

  .gsc-paid { display: grid; gap: 4px; }
  .gsc-paid-text { font-size: 13.5px; }
  .gsc-paid-bar {
    display: block; width: 100%; max-width: 140px; height: 4px; border-radius: 2px;
    background: color-mix(in oklab, var(--muted-foreground) 25%, transparent); overflow: hidden;
  }
  .gsc-paid-bar i { display: block; height: 100%; background: var(--primary); }

  /* ---- Responsive ---- */
  @media (max-width: 900px) {
    .gsc-card { width: 96vw; height: 92vh; }
    .gsc-card-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .gsc-rail {
      border-right: 0; border-bottom: 1px solid var(--border);
      max-height: 38vh; padding: 10px;
    }
  }
  @media (max-width: 640px) {
    .gsc-card { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
    .gsc-card-head { grid-template-columns: auto 1fr auto; padding: 12px; }
    .gsc-card-title { font-size: 16px; }
    .gsc-pane { padding: 14px; }
    .gsc-pane-head { flex-direction: column; gap: 10px; }
  }
}

/* =====================================================================
   RA Automator page — pages/ra_automator.html
   ---------------------------------------------------------------------
   Rides the Matters chrome (.mt-head / .mt-card / .mt-card-head / .mt-tools /
   .mt-filters / .mt-table / .mt-pagination--std; the shared rules above were
   widened to include .ra-automator-page / #ra-automator-page). Everything
   RA-specific is `ra-` prefixed and replaces the ~500 lines of inline style=
   the fragment used to carry.

   Element ids and the class names ra_automator.js owns are kept verbatim:
   #ra-card-<status> + .ra-card-active (the stat tiles double as status
   filters, see toggleRAStatCard / _syncRAStatusFilterUI), #ra-history-tbody,
   .ra-history-row, .ra-view-agreement-btn, .ra-pt-trigger.

   The loading / error / empty table cells and the row "View" button reuse the
   shared .agreement-* classes, which are defined once under the "Intakes page"
   and "Documents page" banners below (unprefixed inside @scope (.bc), so they
   apply here too) rather than being duplicated per page.
   ===================================================================== */
@scope (.bc) {
  /* ---- Stat tiles: click to filter the table to that status, mine-only ---- */
  .ra-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
  @media (max-width: 1000px) { .ra-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .ra-stats { grid-template-columns: minmax(0, 1fr); } }

  .ra-stat {
    --ra-tone: var(--primary);
    position: relative; display: grid; gap: 8px; align-content: start; min-width: 0;
    padding: 16px 18px 18px; margin: 0; overflow: hidden; text-align: left;
    border: 1px solid var(--border); border-radius: 14px;
    background: color-mix(in oklab, var(--card) 72%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); cursor: pointer; font: inherit;
    transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .ra-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ra-tone); }
  .ra-stat:hover { translate: 0 -2px; box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--ra-tone) 40%, var(--border)); }
  .ra-stat:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .ra-stat[data-tone="queued"] { --ra-tone: var(--warning); }
  .ra-stat[data-tone="sent"] { --ra-tone: var(--primary); }
  .ra-stat[data-tone="completed"] { --ra-tone: var(--success); }
  .ra-stat[data-tone="voided"] { --ra-tone: var(--destructive); }
  /* _syncRAStatusFilterUI() toggles .ra-card-active on the tile whose status is
     the live filter. It reads as selected, not merely hovered. */
  .ra-stat.ra-card-active {
    border-color: var(--ra-tone);
    background: color-mix(in oklab, var(--ra-tone) 10%, var(--card));
    box-shadow: 0 0 0 1px var(--ra-tone), 0 6px 18px color-mix(in oklab, var(--ra-tone) 22%, transparent);
  }
  .ra-stat.ra-card-active .ra-stat-icon { color: #fff; background: var(--ra-tone); }
  .ra-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .ra-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .ra-stat-icon {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
    color: var(--ra-tone); background: color-mix(in oklab, var(--ra-tone) 14%, transparent);
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  .ra-stat-icon svg { width: 16px; height: 16px; }
  .ra-stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .ra-stat-sub { font-size: 12px; color: var(--muted-foreground); }

  /* ---- Table ---- */
  /* The identity column is Name (2nd), not the 4th the shared .mt-table rule
     assumes, so hand the emphasis back where it belongs. */
  #ra-history-table tbody td:nth-child(4) { color: var(--text-secondary); font-weight: 400; }
  #ra-history-table tbody td:nth-child(2) { color: var(--foreground); font-weight: 600; font-variant-numeric: normal; }
  #ra-history-table :is(th, td).ra-col-amount { text-align: right; font-variant-numeric: tabular-nums; }
  #ra-history-table tbody td.ra-col-amount { color: var(--foreground); font-weight: 600; }
  #ra-history-table :is(th, td).ra-col-attached { text-align: center; width: 1%; }
  #ra-history-table :is(th, td).ra-col-actions { text-align: right; width: 1%; }
  /* Eleven columns is the widest table in the app and it did not fit a 1440px
     window at the shared .mt-table density (1417px of content into 1150px of
     card), which pushed the Actions column clean off the right edge. Tighten
     just this table rather than every table. */
  #ra-history-table :is(thead th, tbody td) { padding: 9px 10px; font-size: 12.5px; }
  #ra-history-table thead th:first-child, #ra-history-table tbody td:first-child { padding-left: 16px; }
  #ra-history-table thead th:last-child, #ra-history-table tbody td:last-child { padding-right: 16px; }
  #ra-history-table td.ra-col-created { white-space: nowrap; cursor: default; font-variant-numeric: tabular-nums; }
  .ra-attached { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; }
  .ra-attached[data-on="yes"] { color: var(--success); background: color-mix(in oklab, var(--success) 14%, transparent); }
  .ra-attached[data-on="no"] { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 12%, transparent); }
  .ra-attached svg { width: 12px; height: 12px; }
  /* Payment-terms summary: a dotted underline advertises the hover tooltip.
     The inline summary ("01/15/2026: $1,000.00 · Upon signing: $1,500.00") was
     by far the widest cell in the row, so it is capped and ellipsised here —
     the full schedule is what the hover tooltip is for. */
  #ra-history-table td .ra-pt-trigger { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .ra-pt-trigger {
    font-size: 12px; color: var(--muted-foreground); white-space: nowrap; cursor: default;
    border-bottom: 1px dashed var(--border); padding-bottom: 1px;
  }
  .ra-pt-trigger strong { color: var(--foreground); font-weight: 600; }
  .ra-pt-sep { color: var(--border); margin: 0 5px; }
  .ra-empty { color: var(--muted-foreground); }
  .ra-muted { color: var(--muted-foreground); }
}

/* =====================================================================
   RA Automator drawers — #ra-agreement-detail-modal (.rad) and the
   #ra-confirm-modal card (.rac).
   The detail modal is now a right-side drawer on the shared .bl-drawer /
   .cdm shell (Billing drawers banner above), so the slide-in, the dim and
   the exit animation all come for free. It keeps its own two-pane body: the
   envelope PDF preview on the left, summary + recipients + actions on the
   right. The confirm rides .bl-confirm so it stacks over the drawer with a
   light veil instead of a second full-strength dim.

   Both overlays are hoisted to <body> (loadPage, plus initRAAutomator's own
   appendChild), so they carry `.bc` themselves and the overlay-level rules
   below sit outside the @scope block.
   ===================================================================== */
#ra-agreement-detail-modal.modal-overlay.bl-drawer > .cdm { width: min(100vw, max(76vw, 1180px)); }
@media (max-width: 1180px) { #ra-agreement-detail-modal.modal-overlay.bl-drawer > .cdm { width: 100vw; border-left: 0; } }

@scope (.bc) {
  /* The doc preview must fill the drawer, so this body is a two-column flex
     row that owns its own scrolling rather than the .cdm-body grid. */
  .rad-body { flex: 1 1 auto; min-height: 0; display: flex; }
  .rad-doc {
    flex: 0 0 55%; min-width: 0; display: flex; flex-direction: column;
    border-right: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 35%, transparent);
  }
  .rad-doc-head {
    flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground);
  }
  .rad-doc-head svg { width: 14px; height: 14px; }
  .rad-doc-placeholder { flex: 1; display: grid; place-items: center; padding: 24px; font-size: 13px; color: var(--muted-foreground); }
  .rad-doc iframe { width: 100%; height: 100%; border: 0; background: var(--card); }
  .rad-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .rad-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 22px; display: grid; gap: 20px; align-content: start; }
  .rad-section { display: grid; gap: 10px; min-width: 0; }
  .rad-section-title { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foreground); }

  /* Summary: label / value rows in one bordered card */
  .rad-summary { display: grid; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: color-mix(in oklab, var(--muted) 22%, transparent); }
  .rad-summary-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
  .rad-summary-row:last-child { border-bottom: 0; }
  .rad-summary-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); padding-top: 1px; }
  .rad-summary-value { color: var(--foreground); font-weight: 600; overflow-wrap: anywhere; }
  .rad-summary-value.muted { color: var(--muted-foreground); font-weight: 500; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; }

  /* Recipients table */
  .rad-recipients { min-height: 120px; border: 1px solid var(--border); border-radius: 12px; overflow: auto; background: var(--card); }
  .rad-recipients table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  .rad-recipients th {
    padding: 9px 14px; text-align: left; background: color-mix(in oklab, var(--muted) 60%, transparent);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted-foreground); border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .rad-recipients td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--foreground); }
  .rad-recipients tr:last-child td { border-bottom: 0; }
  .rad-note { padding: 18px; font-size: 13px; color: var(--muted-foreground); }
  .rad-note.is-error { color: var(--destructive); }

  /* Sticky action bar */
  .rad-actions {
    flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 20px; border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 45%, transparent);
  }
  .rad-actions .btn { height: 36px; }
  .rad-actions .btn[data-variant="destructive"] { background: var(--destructive); border-color: var(--destructive); color: #fff; }
  .rad-actions .btn[data-variant="destructive"]:hover:not(:disabled) { background: color-mix(in oklab, var(--destructive) 88%, #000); }
  .rad-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ---- Confirm card (.rac), stacked above the drawer ---- */
  .rac { width: min(440px, 100%); display: grid; gap: 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden; }
  .modal-overlay.bl-confirm.active > .rac { animation: blc-pop 180ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .rac-body { display: grid; gap: 8px; padding: 22px 22px 4px; }
  .rac-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); }
  .rac-icon svg { width: 20px; height: 20px; }
  .rac--danger .rac-icon { background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive); }
  .rac-title { font-size: 16px; font-weight: 800; letter-spacing: 0.02em; color: var(--foreground); }
  .rac-message { font-size: 13.5px; line-height: 1.55; color: var(--muted-foreground); }
  .rac-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 18px 22px 20px; }
  .rac-actions .btn { height: 36px; }
  .rac-actions .btn[data-variant="destructive"] { background: var(--destructive); border-color: var(--destructive); color: #fff; }
  .rac-actions .btn[data-variant="destructive"]:hover { background: color-mix(in oklab, var(--destructive) 88%, #000); }
}
/* The confirm is opened from inside the detail drawer, so it must out-stack it. */
#ra-confirm-modal.modal-overlay.bl-confirm { z-index: 1250; }

/* =====================================================================
   Intakes page — pages/intakes.html
   ---------------------------------------------------------------------
   Rides the Matters chrome (.mt-head / .mt-card / .mt-card-head / .mt-tools /
   .mt-filters / .mt-pills / .mt-table / .mt-pagination--std; the shared rules
   above were widened to include .intakes-page / #intakes-page). Converted
   from a ~240-line inline <style> block in the fragment; everything genuinely
   Intakes-specific is `intk-` prefixed.

   Class names intakes.js owns are kept verbatim:
     • .kpi-card[data-intk-filter] + .intk-kpi-active — the stat tiles double
       as status filters (_wireIntakesKpiFilters / _syncIntakesKpiActive), so
       the tiles keep .kpi-card even though they are skinned as .intk-stat.
     • .intk-sortable / .intk-sort-active / .intk-sort-arrow — header sorting.
     • .order-pill + .is-active on #intk-pill-filters — activity quick filter.
     • .agreement-row / .agreement-cell / .agreement-link and the
       .agreement-loading-cell / -error-cell / -empty-cell states.
   ===================================================================== */
@scope (.bc) {
  /* ---- Stat tiles (still .kpi-card for the JS; skinned as .intk-stat) ---- */
  .intk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
  @media (max-width: 1000px) { .intk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .intk-stats { grid-template-columns: minmax(0, 1fr); } }

  .intakes-page .kpi-card.intk-stat {
    --intk-tone: var(--primary);
    position: relative; display: grid; gap: 8px; align-content: start; min-width: 0;
    padding: 16px 18px 18px; margin: 0; overflow: hidden; text-align: left;
    border: 1px solid var(--border); border-radius: 14px;
    background: color-mix(in oklab, var(--card) 72%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); cursor: pointer; font: inherit;
    transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .intk-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--intk-tone); }
  .intakes-page .kpi-card.intk-stat:hover { translate: 0 -2px; box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--intk-tone) 40%, var(--border)); }
  .intk-stat:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .intk-stat[data-tone="completed"] { --intk-tone: var(--success); }
  .intk-stat[data-tone="in_progress"] { --intk-tone: var(--warning); }
  .intk-stat[data-tone="awaiting"] { --intk-tone: #8b5cf6; }
  /* "Total" is a scope reset, not a status, so it never lights up — see
     INTK_KPI_FILTERS in intakes.js, where `total` maps to an empty filter. */
  .intakes-page .kpi-card.intk-stat.intk-kpi-active {
    border-color: var(--intk-tone);
    background: color-mix(in oklab, var(--intk-tone) 10%, var(--card));
    box-shadow: 0 0 0 1px var(--intk-tone), 0 6px 18px color-mix(in oklab, var(--intk-tone) 22%, transparent);
  }
  .intk-stat.intk-kpi-active .intk-stat-icon { color: #fff; background: var(--intk-tone); }
  .intk-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .intk-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); line-height: 1.3; }
  .intk-stat-icon {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
    color: var(--intk-tone); background: color-mix(in oklab, var(--intk-tone) 14%, transparent);
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  .intk-stat-icon svg { width: 16px; height: 16px; }
  .intk-stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; color: var(--foreground); font-variant-numeric: tabular-nums; }

  /* ---- Table ---- */
  /* Identity is Client Name (2nd column); undo .mt-table's 4th-column rule. */
  #intakes-table tbody td:nth-child(4) { color: var(--text-secondary); font-weight: 400; }
  #intakes-table tbody td:nth-child(2) { color: var(--foreground); font-weight: 600; }
  #intakes-table tbody td:nth-child(1) { color: var(--muted-foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
  .intk-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
  .intk-sortable:hover { color: var(--foreground); }
  .intk-sort-arrow { display: inline-block; margin-left: 5px; font-size: 9px; line-height: 1; opacity: 0.35; vertical-align: middle; }
  .intk-sortable:hover .intk-sort-arrow { opacity: 0.7; }
  .intk-sort-active { color: var(--primary); }
  .intk-sort-active .intk-sort-arrow { opacity: 1; }
  /* intakes.js emits .agreement-cell on every <td>; the shared .mt-table
     padding already covers it, so this only restores the link + state voice. */
  .agreement-link { color: var(--primary); text-decoration: none; font-weight: 600; }
  .agreement-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .agreement-loading-cell, .agreement-error-cell, .agreement-empty-cell { padding: 34px 20px; text-align: center; font-size: 13px; }
  .agreement-loading-cell { color: var(--muted-foreground); }
  .agreement-error-cell { color: var(--destructive); }
  .agreement-empty-cell { color: var(--muted-foreground); padding: 46px 20px; }
  .agreement-empty-icon { display: block; margin: 0 auto 12px; opacity: 0.4; }
  .agreement-empty-title { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--foreground); }
  .agreement-empty-subtitle { margin: 0; font-size: 13px; color: var(--muted-foreground); }
  /* Status chip, rendered by _intkStatusPill() with an inline currentColor. */
  .intk-pill {
    display: inline-block; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid color-mix(in oklab, currentColor 45%, transparent);
    background: color-mix(in oklab, currentColor 10%, transparent);
  }
  .intk-yes { color: var(--success); font-weight: 600; }
  .intk-no { color: var(--destructive); font-weight: 600; }
}

/* =====================================================================
   Intakes drawers — #intk-detail-modal (.intd), #intk-manual-modal (.intm)
   and #intk-addinfo-modal (.inta).
   All three ride the .bl-drawer / .cdm / .blm shells from the Billing
   drawers, so the slide-in from the right, the field skin and the exit
   animation come for free. Add-info and Add-manual are narrow drawers that
   can stack over the detail drawer, so they get the higher z-index and the
   no-double-dim treatment (see [[stacked-overlay-double-dim]] rule below).

   The overlays are hoisted to <body> by loadPage(), so they carry `.bc`
   themselves and the overlay-level rules stay outside the @scope block.
   ===================================================================== */
#intk-detail-modal.modal-overlay.bl-drawer > .cdm { width: min(100vw, max(58vw, 900px)); }
/* Opened from inside the detail drawer, so they must out-stack it. */
#intk-addinfo-modal.modal-overlay.bl-drawer,
#intk-manual-modal.modal-overlay.bl-drawer { z-index: 1100; }
/* A second full-strength dim over an already-dimmed page reads as near-black. */
:root:has(#intk-detail-modal.modal-overlay.active) #intk-addinfo-modal.modal-overlay {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}

@scope (.bc) {
  /* ---- Detail drawer ---- */
  /* grid-auto-rows is load-bearing: .intd-card sets overflow:hidden, which
     zeroes its automatic minimum size, so in a definite-height grid the rows
     shrink to fit and the card clips its own content instead of the body
     scrolling. max-content pins each row to its card and lets .cdm-body's
     overflow:auto do the scrolling — one scroller for the whole drawer. */
  .intd-body { display: grid; gap: 14px; align-content: start; grid-auto-rows: max-content; }

  /* Title shares its row with the live status chip, so the ellipsis on
     .cdm-title only works if the flex item is allowed to shrink. */
  .intd-titlerow { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .intd-titlerow .cdm-title { min-width: 0; }

  .intd-card {
    border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden;
    box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 5%, transparent);
  }
  .intd-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 11px 14px 11px 16px;
    background: color-mix(in oklab, var(--muted) 30%, transparent);
    border-bottom: 1px solid var(--border);
  }
  .intd-card-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foreground);
  }
  .intd-card-title svg { width: 14px; height: 14px; opacity: 0.55; flex: none; }
  /* Count chip beside a card title (transcript turns). */
  .intd-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px;
    border-radius: 999px; background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary);
    font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  }
  /* Each body child carries its own inset (facts grid, rail, thread, empty
     state) so the card body itself must not add a second one. */
  .intd-card-body { padding: 0; min-width: 0; }
  .intd-card-body--pad { padding: 16px; }

  /* Facts read as a record sheet: hairline cells rather than 8 boxed tiles,
     which is what made the old overview look like a spreadsheet. */
  .intd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Hairline rules on the cells themselves — a rounded box-shadow separator
     reads as a half-drawn card, which is what it looked like before. */
  .intd-fact {
    display: grid; gap: 4px; min-width: 0; padding: 13px 16px;
    border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  }
  .intd-fact:nth-child(-n + 3) { border-top: 0; }
  .intd-fact:nth-child(3n + 1) { border-left: 0; }
  .intd-fact-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .intd-fact-value { font-size: 13.5px; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere; line-height: 1.4; }
  @media (max-width: 1000px) {
    .intd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .intd-fact:nth-child(-n + 3) { border-top: 1px solid var(--border); }
    .intd-fact:nth-child(-n + 2) { border-top: 0; }
    .intd-fact:nth-child(3n + 1) { border-left: 1px solid var(--border); }
    .intd-fact:nth-child(2n + 1) { border-left: 0; }
  }

  /* Progress rail — Initiated → Started → Completed. Replaces three date
     tiles with the thing staff actually read off them: how far this got. */
  .intd-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 18px 16px 16px; }
  .intd-step { position: relative; display: grid; gap: 3px; justify-items: center; text-align: center; padding: 0 8px; }
  /* The connector runs BACKWARD, from the previous step's dot to this one,
     so it is coloured by the step it arrives at: the Started -> Completed
     segment stays grey until Completed actually happened. */
  .intd-step::before {
    content: ""; position: absolute; top: 7px; right: calc(50% + 14px); left: calc(-50% + 14px); height: 2px;
    border-radius: 2px; background: var(--border);
  }
  .intd-step:first-child::before { display: none; }
  .intd-step[data-done="1"]::before { background: color-mix(in oklab, var(--success) 55%, transparent); }
  .intd-step-dot {
    width: 16px; height: 16px; border-radius: 999px; margin-bottom: 6px;
    border: 2px solid var(--border); background: var(--card); box-sizing: border-box;
  }
  .intd-step[data-done="1"] .intd-step-dot {
    border-color: var(--success);
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 18%, transparent);
  }
  .intd-step-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
  .intd-step-value { font-size: 13px; font-weight: 700; color: var(--foreground); }
  .intd-step[data-done="0"] .intd-step-value { color: var(--muted-foreground); font-weight: 600; }
  @media (max-width: 760px) { .intd-rail { grid-auto-flow: row; gap: 14px; }
    .intd-step::before { display: none; } }

  /* Transcript: agent bubbles left, client bubbles right. The thread is capped
     and scrolls on its own — a 40-turn call would otherwise push Additional
     Information a screen and a half below the fold, and that card is the one
     staff open the drawer to read. */
  .intd-thread {
    display: flex; flex-direction: column; gap: 12px; padding: 16px;
    max-height: min(42vh, 400px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .intd-turn { display: flex; align-items: flex-end; gap: 9px; max-width: 86%; }
  .intd-turn[data-who="client"] { flex-direction: row-reverse; align-self: flex-end; }
  .intd-turn[data-who="manual"] { max-width: 100%; align-self: stretch; }
  .intd-avatar {
    flex: none; width: 28px; height: 28px; border-radius: 999px; margin-bottom: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
    border: 1px solid color-mix(in oklab, currentColor 35%, transparent);
    background: color-mix(in oklab, currentColor 14%, var(--card));
  }
  .intd-turn[data-who="agent"] .intd-avatar { color: var(--primary); }
  .intd-turn[data-who="client"] .intd-avatar { color: var(--success); }
  .intd-bubble {
    min-width: 0; padding: 9px 13px 10px; border-radius: 14px;
    font-size: 13px; line-height: 1.55; color: var(--foreground);
    border: 1px solid transparent;
  }
  .intd-bubble-who {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  }
  .intd-bubble-ts { margin-left: auto; font-weight: 600; letter-spacing: 0.04em; opacity: 0.65; text-transform: none; }
  .intd-turn[data-who="agent"] .intd-bubble {
    border-bottom-left-radius: 5px;
    background: color-mix(in oklab, var(--primary) 10%, var(--card));
    border-color: color-mix(in oklab, var(--primary) 22%, transparent);
  }
  .intd-turn[data-who="agent"] .intd-bubble-who { color: var(--primary); }
  .intd-turn[data-who="client"] .intd-bubble {
    border-bottom-right-radius: 5px;
    background: color-mix(in oklab, var(--success) 10%, var(--card));
    border-color: color-mix(in oklab, var(--success) 22%, transparent);
  }
  .intd-turn[data-who="client"] .intd-bubble-who { color: var(--success); }
  .intd-turn[data-who="manual"] .intd-bubble {
    width: 100%; background: color-mix(in oklab, var(--muted) 35%, transparent);
    border-color: var(--border); white-space: pre-wrap; border-radius: 12px;
  }
  .intd-prose {
    font-size: 13px; line-height: 1.6; color: var(--foreground); white-space: pre-wrap;
    padding: 14px 16px; border-radius: 12px;
    background: color-mix(in oklab, var(--muted) 32%, transparent);
    border: 1px solid var(--border);
    max-height: min(30vh, 300px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .intd-muted { font-size: 13px; color: var(--muted-foreground); font-style: italic; }

  /* Empty / loading states inside the detail drawer. */
  .intd-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 16px 30px; text-align: center; }
  .intd-empty svg { width: 26px; height: 26px; opacity: 0.35; margin-bottom: 2px; }
  .intd-empty-title { font-size: 13.5px; font-weight: 700; color: var(--foreground); }
  .intd-empty-sub { font-size: 12.5px; color: var(--muted-foreground); max-width: 46ch; }
  .intd-skel { display: grid; gap: 14px; }
  .intd-skel-card { height: 120px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 26%, transparent); animation: intd-pulse 1.4s ease-in-out infinite; }
  .intd-skel-card:nth-child(2) { height: 200px; animation-delay: 0.15s; }
  @keyframes intd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
  @media (prefers-reduced-motion: reduce) { .intd-skel-card { animation: none; } }

  /* ---- Add-info / Add-manual drawers (share the .blm form shell) ---- */
  .inta-body, .intm-body { display: grid; gap: 16px; align-content: start; }
  /* Both drawers are full-height, so the box grows to fill what the drawer's
     fixed chrome leaves rather than sitting at a flat 200px floor. The
     subtracted constant is that chrome (header + step 1 + labels + counter +
     footer), measured, so the form fits with nothing clipped at ~900px; the
     clamp floor keeps it usable on short screens, where the body scrolls. */
  .inta .textarea { min-height: clamp(200px, calc(100vh - 470px), 560px); line-height: 1.6; }
  .intm .textarea { min-height: clamp(180px, calc(100vh - 592px), 520px); line-height: 1.6; }

  /* Numbered sections so the narrow drawer reads as two decisions (which
     order, then what was said) rather than three loose fields. */
  /* No overflow:hidden here. The step holds a SearchableDropdown whose
     .dropdown-menu is position:absolute, and an absolutely-positioned box is
     still clipped by an ancestor's overflow — z-index cannot escape a clip.
     The head rounds its own top corners instead, so the tint still sits flush
     inside the card's radius. */
  .intm-step, .inta-step {
    border: 1px solid var(--border); border-radius: 14px; background: var(--card);
  }
  .intm-step-head, .inta-step-head {
    display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
    background: color-mix(in oklab, var(--muted) 30%, transparent);
    border-bottom: 1px solid var(--border);
    border-radius: 13px 13px 0 0;
  }
  .intm-step-num {
    flex: none; width: 22px; height: 22px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    color: var(--primary-foreground); background: var(--primary);
  }
  .intm-step-text { min-width: 0; display: grid; gap: 2px; }
  .intm-step-title { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--foreground); }
  .intm-step-sub { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted-foreground); }
  .intm-step-body { display: grid; gap: 14px; padding: 14px; }
  /* Step 2 paints its background after step 1 in DOM order, so an open menu
     from step 1 needs a stacking context above it to stay legible. */
  .intm-step:has(.searchable-dropdown.is-open) { position: relative; z-index: 20; }

  /* Order hint doubles as the load/empty/error state for the order list.
     Both this and .intm-count are <p> inside a .field, and Basecoat ships
     `.field>p { text-align:start; font-size; color }` at (0,1,1) — so these
     must be selected as `.field > .x` (0,2,0) or the size/alignment silently
     lose. See [[basecoat-dark-tab-specificity]] for the same trap on tabs. */
  .field > .intm-hint {
    display: flex; align-items: center; gap: 7px; margin: 0;
    font-size: 11.5px; font-weight: 600; color: var(--muted-foreground);
  }
  .intm-hint::before {
    content: ""; flex: none; width: 6px; height: 6px; border-radius: 999px;
    background: currentColor; opacity: 0.55;
  }
  .field > .intm-hint[data-state="ok"] { color: var(--success); }
  .field > .intm-hint[data-state="empty"], .field > .intm-hint[data-state="error"] { color: var(--destructive); }
  .intm-hint[data-state="loading"]::before { animation: intd-pulse 0.9s ease-in-out infinite; }

  /* Live character count under the transcript / notes textareas. */
  .field > .intm-count {
    margin: 0; font-size: 11px; font-weight: 600; color: var(--muted-foreground);
    font-variant-numeric: tabular-nums; text-align: right;
  }
  .intm-foot-note { margin-right: auto; font-size: 11.5px; color: var(--muted-foreground); }
}

/* =====================================================================
   Documents page — pages/documents.html (SmartForm records)
   ---------------------------------------------------------------------
   Rides the Matters chrome (.mt-head / .mt-card / .mt-card-head / .mt-tools /
   .mt-filters / .mt-pills / .mt-table / .mt-pagination--std; the shared rules
   above were widened to include .documents-page / #documents-page).
   Converted from a ~440-line inline <style> block in the fragment.

   Only the table, the filter panel, the filter controls and the card chrome
   were redesigned — the complaint-wizard / pleading-editor modal this page
   opens is deliberately untouched, so nothing here reaches inside it.

   Class names documents.js owns are kept verbatim: the .sf-stat-* docket-ring
   cards (_renderSfStatsRow / _renderSfStatsSkeleton), .sf-needs-review-card +
   .active, the .order-pill + .is-active pills in #sf-pill-filters, and the
   .agreement-row / -cell / -link / -edit-btn table markup (the shared
   .agreement-* state cells live under the Intakes banner above).
   ===================================================================== */
@scope (.bc) {
  /* ---- Stat cards: a docket-stamp progress ring per filing stage ---- */
  .sf-stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
  @media (max-width: 760px) { .sf-stats-row { grid-template-columns: minmax(0, 1fr); } }
  .sf-stat-card {
    display: flex; align-items: center; gap: 16px; min-width: 0; padding: 14px 18px;
    border: 1px solid var(--border); border-radius: 14px;
    background: color-mix(in oklab, var(--card) 72%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .sf-stat-ring { position: relative; width: 52px; height: 52px; flex: none; }
  .sf-stat-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .sf-stat-ring circle { fill: none; stroke-width: 4.5; }
  .sf-stat-ring .sf-stat-ring-track { stroke: var(--border); }
  .sf-stat-ring .sf-stat-ring-arc { stroke: var(--stat-color); stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
  .sf-stat-ring-pct {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--foreground);
  }
  .sf-stat-body { display: grid; gap: 2px; min-width: 0; }
  .sf-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stat-color); }
  .sf-stat-fraction { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  /* Loading shell — reuses the app's existing `pulse` keyframe (.timer-recording). */
  .sf-skeleton-pulse { background: var(--muted); animation: pulse 1.5s infinite; }
  .sf-stat-ring.sf-skeleton-pulse svg, .sf-stat-ring.sf-skeleton-pulse .sf-stat-ring-pct { display: none; }
  .sf-skeleton-label { display: inline-block; width: 70px; height: 12px; border-radius: 4px; }
  .sf-skeleton-fraction { display: inline-block; width: 110px; height: 11px; border-radius: 4px; margin-top: 3px; }

  /* ---- Generator cards: Lis Pendens / TRO, above the stats ----
     Entry points into the two pleading wizards (lis_pendens/lisPendensModal.js
     and tro/troModal.js), painted by _renderSfGeneratorCards() in documents.js.
     Deliberately built on the same chrome as .sf-stat-card rather than the
     reference codebase's dark-navy .doc-type-card, so the row reads as part of
     this page. A card is disabled when the signed-in attorney has no filing
     state that document type supports. */
  .sf-gen-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
  @media (max-width: 760px) { .sf-gen-row { grid-template-columns: minmax(0, 1fr); } }
  .sf-gen-card {
    display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 16px 18px;
    border: 1px solid var(--border); border-radius: 14px;
    background: color-mix(in oklab, var(--card) 72%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .sf-gen-icon {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px;
    background: color-mix(in oklab, var(--gen-color) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--gen-color) 35%, transparent);
    color: var(--gen-color);
  }
  .sf-gen-icon svg { width: 18px; height: 18px; }
  .sf-gen-body { display: grid; gap: 3px; min-width: 0; flex: 1; }
  .sf-gen-title { font-size: 13.5px; font-weight: 700; color: var(--foreground); }
  .sf-gen-desc { font-size: 12px; line-height: 1.45; color: var(--muted-foreground); }
  /* States the card can actually draft in, so the restriction is visible
     before the user opens the wizard and finds an empty record list. */
  .sf-gen-states {
    margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: color-mix(in oklab, var(--gen-color) 70%, var(--foreground));
  }
  .sf-gen-btn {
    align-self: center; flex: none;
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
    border: 1px solid color-mix(in oklab, var(--gen-color) 45%, var(--border));
    border-radius: var(--radius-md); background: var(--card);
    font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
    color: var(--gen-color); white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .sf-gen-btn:hover:not(:disabled) { background: color-mix(in oklab, var(--gen-color) 12%, var(--card)); }
  .sf-gen-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .sf-gen-btn:disabled { cursor: not-allowed; opacity: 0.5; color: var(--muted-foreground); border-color: var(--border); }
  .sf-gen-card.is-unavailable { opacity: 0.72; }
  .sf-gen-card.is-unavailable .sf-gen-states { color: var(--muted-foreground); }
  /* Loading shell, same treatment as the stat-card skeleton above. */
  .sf-gen-card.sf-gen-skeleton .sf-gen-icon { border-color: var(--border); background: var(--muted); }
  .sf-skeleton-gen-title { display: inline-block; width: 96px; height: 13px; border-radius: 4px; }
  .sf-skeleton-gen-desc { display: inline-block; width: 100%; max-width: 230px; height: 11px; border-radius: 4px; margin-top: 4px; }

  /* ---- "Needs Review" chip: a filter toggle that lives with the tools ---- */
  .sf-needs-review-card {
    display: none; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
    border: 1px solid color-mix(in oklab, var(--warning) 45%, var(--border)); border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--warning) 12%, var(--card));
    color: color-mix(in oklab, var(--warning) 70%, var(--foreground));
    font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .sf-needs-review-card:hover { background: color-mix(in oklab, var(--warning) 20%, var(--card)); }
  .sf-needs-review-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* documents.js toggles .active (not .is-active) on this one. */
  .sf-needs-review-card.active { background: var(--warning); border-color: var(--warning); color: #3d2f00; }
  .sf-needs-review-count {
    display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
    background: var(--warning); color: #3d2f00;
  }
  .sf-needs-review-card.active .sf-needs-review-count { background: #3d2f00; color: var(--warning); }
  /* Row-level flag on a client name that has submissions waiting. */
  .agreement-needs-review {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
    color: color-mix(in oklab, var(--warning) 72%, var(--foreground));
    background: color-mix(in oklab, var(--warning) 16%, transparent);
    border: 1px solid color-mix(in oklab, var(--warning) 45%, transparent);
  }

  /* ---- Table ---- */
  /* Identity is Client Name (2nd column); undo .mt-table's 4th-column rule. */
  #sf-records-table tbody td:nth-child(4) { color: var(--text-secondary); font-weight: 400; }
  #sf-records-table tbody td:nth-child(2) { color: var(--foreground); font-weight: 600; }
  #sf-records-table td:nth-child(1) { font-variant-numeric: tabular-nums; white-space: nowrap; }
  #sf-records-table :is(th, td).sf-col-pct { text-align: right; }
  #sf-records-table :is(th, td).sf-col-actions { text-align: right; }
  .sf-status { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--stat-color, var(--foreground)); }
  /* Completion reads as a share, so the number gets a track behind it. */
  .sf-pct { display: inline-grid; gap: 4px; justify-items: end; min-width: 76px; }
  .sf-pct-num { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pct-color); }
  .sf-pct-bar { width: 100%; height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
  .sf-pct-fill { display: block; height: 100%; border-radius: 999px; background: var(--pct-color); }
  .agreement-edit-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
    font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--foreground); cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .agreement-edit-btn:hover { background: color-mix(in oklab, var(--primary) 10%, var(--card)); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); color: var(--primary); }
  .agreement-edit-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .agreement-edit-btn svg { width: 13px; height: 13px; }

  /* ---- My Generation History (#sf-genh-modal) ----
     Read-only log of what the signed-in user has drafted, in a right-hand
     drawer. The shell is the shared .bl-drawer / .cdm plumbing and the table is
     the shared .mt-table, so the only rules here are the ones neither has an
     opinion about: the subtitle, the scrolling body, the result badge, and the
     skeleton row. */
  .sf-genh-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted-foreground); }
  /* The drawer is full height, so the table scrolls inside the body rather than
     the whole panel growing. padding: 0 lets the header row sit flush. */
  .sf-genh-body { padding: 0; overflow: auto; }
  /* Timestamps line up only with tabular figures, and must not wrap to two
     rows on a narrow viewport; .mt-table-wrap scrolls instead. */
  .sf-genh-table td.sf-genh-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sf-genh-table thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }
  .sf-genh-table :is(th, td).sf-genh-col-state { width: 72px; }
  .sf-genh-table :is(th, td).sf-genh-col-status { width: 132px; }

  /* Result badge. The glyph and the word both carry the meaning, so the colour
     is reinforcement rather than the signal: this still reads correctly in
     greyscale. Colours are mixed toward --foreground because raw --success on
     this surface sits under the 4.5:1 text threshold. min-width keeps Failed
     and Generated the same size so the column does not twitch on refresh. */
  .sf-genh-badge {
    display: inline-flex; align-items: center; gap: 6px; min-width: 104px;
    height: 24px; padding: 0 10px; border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--genh-tone) 40%, var(--border));
    background: color-mix(in oklab, var(--genh-tone) 12%, var(--card));
    color: color-mix(in oklab, var(--genh-tone) 62%, var(--foreground));
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
  }
  .sf-genh-badge[data-result="generated"] { --genh-tone: var(--success); }
  .sf-genh-badge[data-result="failed"] { --genh-tone: var(--destructive); }
  .sf-genh-badge-icon { display: inline-flex; }
  .sf-genh-badge-icon svg { width: 12px; height: 12px; }

  /* Placeholder bar inside a skeleton row. Height matches a line of body text
     so the five loading rows occupy the same space the real ones will. */
  .sf-genh-skel { display: inline-block; height: 12px; border-radius: 4px; vertical-align: middle; }
}

/* The skeleton's pulse is decoration, not information: the rows are already
   sized and aria-busy already announces the wait, so dropping the animation
   costs nothing. */
@media (prefers-reduced-motion: reduce) {
  .sf-genh-skel { animation: none; }
}

/* =====================================================================
   Pinned Actions column — RA Automator + Documents
   ---------------------------------------------------------------------
   Both tables are wide enough to overflow `.mt-table-wrap` on a normal
   laptop (RA needs ~1330px and Documents ~1200px against 1150px of card at
   a 1440px window), which left the row action sitting past the right edge
   of the scroller. A button you have to scroll sideways to discover reads
   as a broken button, so the last column pins to the right edge instead of
   drifting off it.

   `.mt-table` is `border-collapse: separate`, which is what makes position:
   sticky work on cells at all — do not switch it to `collapse`. The cells
   need an opaque background of their own (they are painting over scrolled
   content) and therefore have to restate the head tint and the row-hover
   tint that `.mt-table` would otherwise supply.
   ===================================================================== */
@scope (.bc) {
  #ra-history-table :is(th, td).ra-col-actions,
  #sf-records-table :is(th, td).sf-col-actions {
    position: sticky; right: 0; z-index: 1;
    background: var(--card);
    border-left: 1px solid var(--border);
  }
  /* Head cell outranks the body cells it scrolls past. */
  #ra-history-table thead th.ra-col-actions,
  #sf-records-table thead th.sf-col-actions {
    z-index: 2;
    background: color-mix(in oklab, var(--muted) 60%, var(--card));
  }
  /* Restate the hover tint: the shared rule paints a translucent wash, which
     would let the scrolled-under row show through this opaque column. */
  #ra-history-table tbody tr:hover td.ra-col-actions,
  #sf-records-table tbody tr:hover td.sf-col-actions {
    background: color-mix(in oklab, var(--primary) 5%, var(--card));
  }
}

/* =====================================================================
   Delivery Center — pages/delivery_center.html
   The page is the delivery log and nothing else: .mt-head chrome, then the
   log in a .mt-card with a fixed-layout .mt-table and the standard
   pagination footer, exactly like SmartForm Records on the Documents page.
   Composing happens in #dlv-compose-modal, a right-hand drawer on the shared
   .bl-drawer / .cdm / .blm shell, with the two confirms stacked above it as
   .bl-confirm cards.

   `.dlv-page` is in the page allowlist further up this file (the full-width
   rule and the .btn padding-block reset that stops legacy styles.css fighting
   Basecoat's fixed button heights), the same way .documents-page was added.

   Ids and dlv- class names are a contract with deliveryCenter.js: it looks
   everything up with getElementById and emits .dlv-file / .dlv-chip /
   .dlv-pill / .dlv-trunc from template strings, and toggles is-active,
   is-done, is-locked, is-over, is-uploading and has-error. The markup in
   the fragment carries no styles of its own; everything is here.

   Outside @scope below: the drawer overlay IS the `bc` root, and Chromium's
   @scope never matches the root itself.
   ===================================================================== */

/* The compose drawer is wider than a stock bl-drawer: step 3 holds a dropzone
   over a file list, and step 4 a full compose form. --narrow would scroll both
   into uselessness. */
#dlv-compose-modal.modal-overlay.bl-drawer > .cdm { width: min(100vw, max(48vw, 860px)); }
@media (max-width: 900px) { #dlv-compose-modal.modal-overlay.bl-drawer > .cdm { width: 100vw; border-left: 0; } }

@scope (.bc) {
  /* ── Landing view ──────────────────────────────────────────────────── */

  /* Config / permission notice. Warning-toned, and the one thing on the page
     that is allowed to sit between the header and the table. */
  .dlv-banner {
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 18px;
    padding: 13px 16px; border-radius: 12px;
    background: color-mix(in oklab, var(--warning) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--warning) 38%, transparent);
    color: var(--foreground); font-size: 13px; line-height: 1.55;
  }
  .dlv-banner svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--warning); }

  /* Fixed layout is what makes the fragment's <colgroup> authoritative; the
     min-width keeps Documents and Recipients from collapsing on a narrow
     window, and .mt-table-wrap scrolls instead. */
  #dlv-history-table { table-layout: fixed; min-width: 1130px; }
  #dlv-history-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: none; }
  .dlv-td-strong { font-weight: 650; color: var(--foreground); }

  /* Status pill. Driven by data-status off the row's status column rather
     than inline hex, so it follows the theme in light and dark. */
  .dlv-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
    background: var(--muted); color: var(--muted-foreground);
    border: 1px solid var(--border); white-space: nowrap;
  }
  .dlv-pill[data-status="sent"] {
    background: color-mix(in oklab, var(--success) 15%, transparent);
    color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, transparent);
  }
  .dlv-pill[data-status="failed"] {
    background: color-mix(in oklab, var(--destructive) 15%, transparent);
    color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
  }
  .dlv-pill[data-status="pending"] {
    background: color-mix(in oklab, var(--warning) 15%, transparent);
    color: var(--warning); border-color: color-mix(in oklab, var(--warning) 40%, transparent);
  }
  .dlv-row-error { margin-top: 4px; font-size: 11px; color: var(--destructive); white-space: normal; line-height: 1.35; }

  /* Delivery type, keyed off data-type the same way status is off data-status.
     A partial delivery reads amber because it is the constrained case worth
     spotting in the log; the full package is the unremarkable one. */
  .dlv-pill[data-type="full"] {
    background: color-mix(in oklab, var(--primary) 13%, transparent);
    color: var(--primary); border-color: color-mix(in oklab, var(--primary) 38%, transparent);
  }
  .dlv-pill[data-type="partial"] {
    background: color-mix(in oklab, var(--warning) 15%, transparent);
    color: var(--warning); border-color: color-mix(in oklab, var(--warning) 40%, transparent);
  }

  /* Truncated Documents / Recipients cells; the full list is in the popover. */
  .dlv-file-tag, .dlv-recipient { display: block; overflow: hidden; text-overflow: ellipsis; }
  .dlv-trunc { display: block; cursor: default; }
  .dlv-trunc:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
  .dlv-more { display: inline-block; margin-top: 2px; font-size: 11.5px; font-weight: 650; color: var(--primary); }

  .dlv-table-cell-loading, .dlv-table-cell-error {
    text-align: center; padding: 28px; font-size: 13px;
  }
  .dlv-table-cell-loading { color: var(--muted-foreground); }
  .dlv-table-cell-error { color: var(--destructive); }

  /* Sits inside the .mt-card, directly under the table's header row, so it
     carries no border or background of its own. */
  .dlv-empty {
    display: grid; justify-items: center; gap: 6px;
    padding: 56px 24px; text-align: center;
  }
  .dlv-empty-icon {
    display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px;
    border-radius: 12px; background: var(--muted); color: var(--muted-foreground);
  }
  .dlv-empty-icon svg { width: 22px; height: 22px; }
  .dlv-empty h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--foreground); }
  .dlv-empty p { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }

  /* ── Compose drawer ────────────────────────────────────────────────── */

  .dlvm-body { display: grid; gap: 16px; align-content: start; }
  .dlv-flow { display: grid; gap: 14px; align-content: start; min-width: 0; }

  .dlv-step {
    border: 1px solid var(--border); border-radius: 12px; background: var(--card);
    /* Must stay visible: the client and order pickers hang an absolutely
       positioned menu below the step body, and clipping swallows it. */
    overflow: visible;
    transition: border-color 140ms ease, opacity 140ms ease;
  }
  .dlv-step.is-locked { opacity: 0.5; }
  .dlv-step.is-locked .dlv-step-body { pointer-events: none; }
  .dlv-step.is-active { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
  /* An open picker has to outrank the step below it, which paints a border
     over the menu otherwise. Same fix as .intm-step in the intakes drawer. */
  .dlv-step:has(.searchable-dropdown.is-open) { position: relative; z-index: 20; }

  .dlv-step-head {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; border-bottom: 1px solid var(--border);
  }
  .dlv-step-num {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px;
    display: grid; place-items: center; font-size: 11px; font-weight: 800;
    background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border);
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  }
  .dlv-step.is-active .dlv-step-num {
    background: color-mix(in oklab, var(--primary) 14%, transparent);
    color: var(--primary); border-color: color-mix(in oklab, var(--primary) 45%, transparent);
  }
  .dlv-step.is-done .dlv-step-num { background: var(--success); color: #fff; border-color: var(--success); }
  .dlv-step-num .dlv-check { display: none; width: 13px; height: 13px; }
  .dlv-step.is-done .dlv-step-num .dlv-check { display: block; }
  .dlv-step.is-done .dlv-step-num .dlv-digit { display: none; }

  .dlv-step-titles { min-width: 0; flex: 1; display: grid; gap: 2px; }
  .dlv-step-title {
    margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--foreground);
  }
  .dlv-step-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted-foreground); }
  .dlv-step-aside { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
  .dlv-step-body { display: grid; gap: 12px; padding: 14px 16px; }

  /* Basecoat ships `.field > p` (0,1,1), which silently overrides text-align
     and font-size on a bare <p> helper. Two classes to outrank it. */
  .dlv-step-body > .dlv-hint-line, .field > .dlv-note {
    margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted-foreground); text-align: left;
  }

  /* Selected client / order summary card. */
  .dlv-client-card {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--muted); border: 1px solid var(--border);
  }
  .dlv-avatar {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
    display: grid; place-items: center; font-size: 12px; font-weight: 800;
    background: color-mix(in oklab, var(--primary) 16%, transparent); color: var(--primary);
  }
  .dlv-client-meta { min-width: 0; flex: 1; display: grid; gap: 1px; }
  .dlv-client-name {
    font-size: 13px; font-weight: 700; color: var(--foreground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dlv-client-sub {
    font-size: 11.5px; color: var(--muted-foreground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dlv-pill.neutral { background: var(--muted); color: var(--muted-foreground); }

  /* ── Step 2: the order's money, and the delivery it allows ─────────── */

  /* Two tiles side by side. Rendered zeroed before an order is picked, so the
     grid is fixed rather than auto-fit: the tiles must not resize when the
     numbers change from $0.00 to real amounts. */
  .dlv-money {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .dlv-money-tile {
    display: grid; gap: 2px; padding: 9px 12px; border-radius: 9px;
    background: var(--muted); border: 1px solid var(--border);
  }
  .dlv-money-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted-foreground);
  }
  .dlv-money-value {
    font-size: 15px; font-weight: 750; color: var(--foreground);
    font-variant-numeric: tabular-nums;
  }

  /* Derived, not chosen: both options always render and both radios stay
     disabled. `is-on` carries the answer so the chosen option is not greyed
     out by the disabled styling, and `is-off` dims only the other one. */
  .dlv-dtype { display: grid; gap: 7px; }
  .dlv-dtype-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted-foreground);
  }
  .dlv-dtype-opts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  @media (max-width: 620px) {
    .dlv-money, .dlv-dtype-opts { grid-template-columns: minmax(0, 1fr); }
  }
  .dlv-dtype-opt {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 9px 11px; border-radius: 9px;
    background: var(--card); border: 1px solid var(--border);
    /* Not interactive: the payment state decides this, so a pointer cursor
       would promise a click that does nothing. */
    cursor: default;
    transition: border-color 140ms ease, background 140ms ease;
  }
  .dlv-dtype-opt input[type="radio"] {
    flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--primary); cursor: default;
  }
  .dlv-dtype-opt.is-on {
    border-color: var(--primary);
    background: color-mix(in oklab, var(--primary) 8%, var(--card));
  }
  .dlv-dtype-opt.is-on input[type="radio"] { opacity: 1; }
  .dlv-dtype-opt.is-off { opacity: 0.55; }
  .dlv-dtype-opt-text { min-width: 0; display: grid; gap: 1px; }
  .dlv-dtype-opt-name { font-size: 12.5px; font-weight: 700; color: var(--foreground); }
  .dlv-dtype-opt.is-on .dlv-dtype-opt-name { color: var(--primary); }
  .dlv-dtype-opt-hint { font-size: 11px; line-height: 1.4; color: var(--muted-foreground); }

  /* Why the order is limited to what it is. Turns amber only for a partial
     delivery, where it is a restriction the sender has to act on. */
  .dlv-dtype-note {
    margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted-foreground);
  }
  .dlv-dtype-note.is-warn {
    padding: 7px 10px; border-radius: 8px;
    color: var(--warning);
    background: color-mix(in oklab, var(--warning) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--warning) 32%, transparent);
  }

  /* ── Step 3: dropzone + file list ──────────────────────────────────── */

  .dlv-drop {
    position: relative; display: grid; justify-items: center; gap: 5px;
    padding: 22px 18px; text-align: center;
    border: 1.5px dashed var(--border); border-radius: 12px;
    background: color-mix(in oklab, var(--muted) 45%, transparent);
    transition: border-color 140ms ease, background 140ms ease;
  }
  .dlv-drop.is-over {
    border-color: var(--primary);
    background: color-mix(in oklab, var(--primary) 8%, transparent);
  }
  .dlv-drop-icon { width: 26px; height: 26px; color: var(--muted-foreground); }
  .dlv-drop.is-over .dlv-drop-icon { color: var(--primary); }
  .dlv-drop-title { font-size: 13px; font-weight: 700; color: var(--foreground); }
  .dlv-drop-hint { font-size: 11.5px; color: var(--muted-foreground); }
  .dlv-drop .btn { margin-top: 6px; }
  /* Visually hidden rather than display:none: the label still has to reach it. */
  .dlv-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

  .dlv-files { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
  .dlv-file {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--card);
    transition: border-color 140ms ease, background 140ms ease;
  }
  .dlv-file:hover { border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); }
  .dlv-file.is-checked {
    border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
    background: color-mix(in oklab, var(--primary) 6%, transparent);
  }
  .dlv-file.is-uploading { opacity: 0.7; }
  .dlv-file.is-error { border-color: color-mix(in oklab, var(--destructive) 50%, var(--border)); }
  .dlv-file input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
  .dlv-file-icon { flex: 0 0 auto; display: grid; place-items: center; width: 17px; height: 17px; color: var(--muted-foreground); }
  .dlv-file-icon svg { width: 16px; height: 16px; }
  .dlv-file-meta { min-width: 0; flex: 1; display: grid; gap: 1px; }
  .dlv-file-name {
    font-size: 12.5px; font-weight: 600; color: var(--foreground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dlv-file-sub { font-size: 11px; color: var(--muted-foreground); }
  .dlv-file-sub.is-error { color: var(--destructive); }
  .dlv-file-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }

  .dlv-icon-btn {
    display: grid; place-items: center; width: 27px; height: 27px;
    border: 0; border-radius: 7px; background: none; cursor: pointer;
    color: var(--muted-foreground); transition: background 140ms ease, color 140ms ease;
  }
  .dlv-icon-btn svg { width: 15px; height: 15px; }
  .dlv-icon-btn:hover { background: var(--muted); color: var(--foreground); }
  .dlv-icon-btn.danger:hover {
    background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive);
  }
  .dlv-icon-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

  .dlv-files-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 11.5px; color: var(--muted-foreground);
  }
  .dlv-files-picks { display: inline-flex; align-items: center; gap: 6px; }
  .dlv-dot { color: var(--muted-foreground); }
  .dlv-files-empty {
    padding: 20px; text-align: center;
    border: 1px dashed var(--border); border-radius: 10px;
  }
  .dlv-files-empty p { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }

  .dlv-link-btn {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 650; color: var(--primary);
  }
  .dlv-link-btn:hover { text-decoration: underline; }
  .dlv-link-btn:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }

  /* ── Step 4: compose ───────────────────────────────────────────────── */

  .dlv-cc-region { margin-top: 10px; display: grid; gap: 6px; }
  .dlv-label-spaced { margin-top: 8px; }

  /* Recipient chips. The wrapper is the focus surface; the real <input> sits
     inside it and grows to fill whatever the chips leave. */
  .dlv-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    min-height: 38px; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--background);
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  .dlv-chips:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent); }
  .dlv-chips.has-error { border-color: var(--destructive); }
  .dlv-chips input {
    flex: 1; min-width: 150px; border: 0; outline: 0; background: none;
    font: inherit; font-size: 12.5px; color: var(--foreground); padding: 3px 2px;
  }
  .dlv-chips input::placeholder { color: var(--muted-foreground); }
  .dlv-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 4px 3px 9px; border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
    font-size: 11.5px; font-weight: 600; color: var(--foreground); max-width: 100%;
  }
  .dlv-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dlv-chip button {
    display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto;
    border: 0; border-radius: 999px; background: none; cursor: pointer;
    font-size: 13px; line-height: 1; color: var(--muted-foreground);
  }
  .dlv-chip button:hover { background: color-mix(in oklab, var(--destructive) 15%, transparent); color: var(--destructive); }

  .dlv-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .dlv-suggestions:empty { display: none; }
  .dlv-suggest-label { font-size: 11px; color: var(--muted-foreground); }
  .dlv-suggest {
    padding: 2px 9px; border-radius: 999px; cursor: pointer;
    border: 1px dashed var(--border); background: none;
    font: inherit; font-size: 11.5px; color: var(--muted-foreground);
  }
  .dlv-suggest:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }

  .dlv-error { font-size: 11.5px; color: var(--destructive); }
  .dlv-error:empty { display: none; }
  .dlvm .dlv-textarea { min-height: 120px; line-height: 1.6; resize: vertical; }

  /* ── Review block ──────────────────────────────────────────────────── */

  .dlv-summary {
    border: 1px solid var(--border); border-radius: 12px;
    background: color-mix(in oklab, var(--muted) 45%, transparent);
    padding: 14px 16px; display: grid; gap: 10px;
  }
  .dlv-summary-head { display: grid; gap: 2px; }
  .dlv-summary-head h3 {
    margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--foreground);
  }
  .dlv-summary-head p { margin: 0; font-size: 11.5px; color: var(--muted-foreground); }
  .dlv-summary-list { margin: 0; display: grid; gap: 0; }
  .dlv-summary-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 7px 0; border-bottom: 1px solid var(--border);
  }
  .dlv-summary-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .dlv-summary-row dt { flex: 0 0 auto; font-size: 11.5px; font-weight: 650; color: var(--muted-foreground); }
  .dlv-summary-row dd {
    margin: 0; min-width: 0; text-align: right; font-size: 12.5px; font-weight: 600;
    color: var(--foreground); overflow-wrap: anywhere;
  }
  .dlv-summary-row dd.muted { font-weight: 500; color: var(--muted-foreground); }

  /* ── Footer: send ─────────────────────────────────────────────────── */

  .dlvm-foot { flex-wrap: wrap; }
  .dlv-send-btn:disabled { opacity: 0.55; cursor: not-allowed; }

  /* ── Send confirm card ─────────────────────────────────────────────── */

  .blc--wide { width: min(540px, 100%); }
  .dlv-confirm-lead { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted-foreground); }
  .dlv-confirm-lead strong { color: var(--foreground); }
  .dlv-confirm-extra { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }
  .dlv-confirm-files { padding: 11px 13px; border-radius: 10px; background: var(--muted); border: 1px solid var(--border); }
  .dlv-confirm-files-title {
    margin-bottom: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted-foreground);
  }
  .dlv-confirm-files ul {
    margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.65;
    color: var(--foreground); max-height: 190px; overflow-y: auto;
  }

  @media (max-width: 640px) {
    .dlv-summary-row { flex-direction: column; align-items: flex-start; gap: 1px; }
    .dlv-summary-row dd { text-align: left; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dlv-step, .dlv-drop, .dlv-file, .dlv-chips, .dlv-icon-btn, .dlv-step-num { transition: none; }
  }
}

/* _showPopover appends the popover straight to <body> (so it escapes the
   table wrapper's overflow), which puts it outside every `bc` root. Its skin
   therefore has to live outside @scope — a copy inside would never match.
   The token fallbacks cover the same reason: no `bc` ancestor to inherit from
   if the bridge's token block is ever scoped tighter. */
.dlv-pop {
  position: fixed; z-index: 1300; max-width: 340px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--popover, #fff); color: var(--popover-foreground, #111);
  border: 1px solid var(--border, #e5e7eb); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  font-size: 12px; line-height: 1.5; pointer-events: none;
}
.dlv-pop .dlv-pop-title {
  margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted-foreground, #6b7280);
}
.dlv-pop ul { margin: 0; padding-left: 15px; }
.dlv-pop li { overflow-wrap: anywhere; }