/* ───────────────────────────────────────────────
   CRE Research Platform — Styles
   Theme: Dark industrial terminal — Bloomberg meets
   commercial real estate.
   ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette mirrors the Next.js portal running at localhost:3000/portal:
     deep-navy brand (#1f3a8a) + bright-blue accent (#2563eb), ink text
     on a paper/subtle two-tone canvas. Same variable names as before so
     every existing consumer (including the ~98 rgba(…) inline styles in
     app.js) picks up the new values without another sweep. */
  --bg:         #f6f6f7;   /* portal --color-subtle — page background */
  --bg-panel:   #ffffff;   /* portal --color-paper — elevated panels */
  --bg-card:    #ffffff;   /* same — cards on white */
  --bg-input:   #ffffff;
  --border:     #e5e5e7;   /* portal --color-line */
  --border-lit: #d4d5d8;

  --text:       #0b0b0c;   /* portal --color-ink */
  --text-dim:   #4b5563;   /* slightly darker than portal's muted for contrast in tight text */
  --text-muted: #6b7280;   /* portal --color-muted */

  /* Brand */
  --primary:      #1f3a8a;  /* portal --color-brand — deep navy */
  --primary-dim:  #dbeafe;  /* bright blue tint (bg wash) */
  --primary-dark: #1e3a8a;
  --accent:       #2563eb;  /* portal --color-brand-accent */
  --highlight:    #fef3c7;  /* soft warning wash */

  /* Back-compat aliases — app.js has ~98 inline `rgba(X,Y,Z,…)` uses
     tied to the prior palette. Repointing via CSS vars keeps them working. */
  --amber:      var(--primary);
  --amber-dim:  var(--primary-dim);
  --teal:       #0f766e;   /* portal --color-positive */
  --teal-dim:   #ccfbf1;
  --red:        #b91c1c;   /* portal --color-negative */
  --green:      #0f766e;   /* positive */
  --blue:       #2563eb;   /* accent */

  /* Semantic text-color aliases used heavily inside app.jsx inline
     styles. These USED to be undefined, which silently fell back to
     the inherited near-black `--text` — so green source labels and
     red error banners rendered as plain copy and lost their signal.
     Now they resolve to the portal palette equivalents. */
  --positive:            #0f766e;   /* teal-700, ~6:1 on white */
  --color-brand-success: #0f766e;
  --color-brand-danger:  #b91c1c;   /* red-700, ~7:1 on white */
  --color-brand-muted:   #6b7280;   /* gray-500 */

  /* Semantic status colors — used in OM cards, scores, badges */
  --success:    #10B981;
  --warning:    #f59e0b;
  --danger:     #ef4444;
  --info:       #3b82f6;
  --score-high: #10B981;
  --score-mid:  #f59e0b;
  --score-low:  #ef4444;

  /* Fonts — Geist (loaded from Google Fonts), matches the portal. */
  --font-display: 'Geist', 'Inter', 'SF Pro Display', system-ui, sans-serif;
  --font-body:    'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --radius:    6px;
  --radius-lg: 10px;
}

html, body, #root {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  overflow: hidden;
}

/* ── Layout ─────────────────────────────────── */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 16px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-logo {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--amber), #c07020);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: #0d0f12;
}

.topbar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: #fff;
}

.topbar-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.topbar-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.tab-btn {
  padding: 6px 18px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); background: var(--bg-card); }
.tab-btn.active {
  background: var(--amber);
  color: #0d0f12;
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Panels ─────────────────────────────────── */

.panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.panel-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.panel-body::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Forms ──────────────────────────────────── */

.form-section {
  margin-bottom: 20px;
}

.form-section-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

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

.form-row.single { grid-template-columns: 1fr; }
.form-row.triple { grid-template-columns: 1fr 1fr 1fr; }

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.field input,
.field select,
.field textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 11px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--amber);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}

.field textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

.field-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.field-badge input { flex: 1; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.badge-auto { background: var(--teal-dim); color: var(--teal); }
.badge-manual { background: rgba(240,167,48,0.15); color: var(--amber); }

/* ── Buttons ─────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--amber);
  color: #0d0f12;
}
.btn-primary:hover:not(:disabled) {
  background: #f5b843;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(240,167,48,0.3);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-lit);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--amber);
  color: var(--amber);
}

.btn-teal {
  background: var(--teal-dim);
  color: var(--teal);
  border: 1px solid rgba(34,211,200,0.25);
}
.btn-teal:hover:not(:disabled) {
  background: rgba(34,211,200,0.2);
  transform: translateY(-1px);
}

.btn-danger {
  background: rgba(240,80,80,0.1);
  color: var(--red);
  border: 1px solid rgba(240,80,80,0.25);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(240,80,80,0.2);
}

.btn-green {
  background: rgba(48,214,138,0.1);
  color: var(--green);
  border: 1px solid rgba(48,214,138,0.25);
}
.btn-green:hover:not(:disabled) { background: rgba(48,214,138,0.2); }

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-icon {
  padding: 8px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { color: var(--amber); border-color: var(--amber-dim); }

.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Status / Alerts ─────────────────────────── */

.alert {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.alert-success { background: rgba(48,214,138,0.1); border: 1px solid rgba(48,214,138,0.25); color: var(--green); }
.alert-error   { background: rgba(240,80,80,0.1);  border: 1px solid rgba(240,80,80,0.25);  color: var(--red); }
.alert-warning { background: rgba(240,167,48,0.1); border: 1px solid rgba(240,167,48,0.25); color: var(--amber); }
.alert-info    { background: rgba(77,158,240,0.1); border: 1px solid rgba(77,158,240,0.25); color: var(--blue); }

/* ── Data Cards ──────────────────────────────── */

.data-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.data-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.data-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.data-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-item-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.data-item-value {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.data-item-value.highlight { color: var(--amber); font-weight: 600; }
.data-item-value.success   { color: var(--green); }
.data-item-value.dim       { color: var(--text-muted); font-style: italic; }

/* ── Property List ───────────────────────────── */

.prop-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prop-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
}

.prop-card:hover, .prop-card.active {
  border-color: var(--amber-dim);
  background: rgba(0,0,0,0.06);
}
.prop-card.active { border-color: var(--amber); }

.prop-card-address {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prop-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.prop-meta-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.prop-meta-chip.synced { color: var(--green); border-color: rgba(48,214,138,0.2); }

/* ── Map ─────────────────────────────────────── */

#map-container {
  width: 100%; height: 100%;
  background: var(--bg);
}

.map-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-overlay {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.map-pill {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-lit);
  border-radius: 20px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ── Search Status ───────────────────────────── */

.search-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: 12px;
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.idle     { background: var(--text-muted); }
.status-dot.loading  { background: var(--amber); animation: pulse 1s infinite; }
.status-dot.success  { background: var(--green); }
.status-dot.error    { background: var(--red); }

@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── Spinner ─────────────────────────────────── */

.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tags / Chips ────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  background: var(--teal-dim);
  color: var(--teal);
  border: 1px solid rgba(34,211,200,0.2);
}

/* ── Divider ─────────────────────────────────── */

.divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* ── Tooltips / empty state ──────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-dim);
  text-align: center;
}

.empty-icon {
  font-size: 40px;
  opacity: 0.4;
}

.empty-text {
  font-family: var(--font-body);
  font-size: 14px;
  max-width: 220px;
  line-height: 1.6;
}

/* ── Settings Panel ──────────────────────────── */

.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40,45,55,0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.settings-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-lit);
  border-radius: 12px;
  width: 560px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.settings-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}

.settings-body {
  padding: 20px 24px;
}

/* ── Forewarn button ─────────────────────────── */

.forewarn-btn {
  background: linear-gradient(135deg, #1a1240, #2a1a60);
  border: 1px solid rgba(100,60,220,0.4);
  color: #9d7ef5;
  border-radius: var(--radius);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.15s;
}
.forewarn-btn:hover {
  background: linear-gradient(135deg, #231852, #3520a0);
  border-color: rgba(100,60,220,0.7);
  color: #b89ff8;
}

/* ── Pipedrive button ────────────────────────── */

.pipedrive-btn {
  background: linear-gradient(135deg, #1a2a16, #1e3a19);
  border: 1px solid rgba(34,160,40,0.35);
  color: #4dde58;
}
.pipedrive-btn:hover {
  background: linear-gradient(135deg, #1f3a1b, #265021);
}

/* ── Toast notifications ─────────────────────── */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-panel);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  animation: slideIn 0.25s ease;
}

.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--blue); }

@keyframes slideIn {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Loading overlay ─────────────────────────── */

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(240,242,244,0.72);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  backdrop-filter: blur(2px);
}

.loading-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber);
  letter-spacing: 0.05em;
}

/* ── Responsive sidebar ──────────────────────── */

.sidebar {
  width: 340px;
  flex-shrink: 0;
}

.sidebar-right {
  width: 360px;
  flex-shrink: 0;
  border-right: none;
  border-left: 1px solid var(--border);
}

.scrollable { overflow-y: auto; }

/* ── Monospace values ────────────────────────── */

.mono { font-family: var(--font-mono); }

/* ── Leaflet overrides ───────────────────────── */

.leaflet-container {
  background: var(--bg) !important;
}

/* On the light cement theme we want OSM tiles rendered normally — the
   invert/hue-rotate that made them dark-mode is gone. */

.leaflet-control-zoom a {
  background: var(--bg-panel) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.leaflet-control-attribution {
  background: rgba(255,255,255,0.82) !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
}

/* ── Notes textarea ──────────────────────────── */

.notes-area {
  width: 100%;
  min-height: 160px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.notes-area:focus { border-color: var(--amber); }

/* ── Radius controls ─────────────────────────── */

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--bg-input);
  border-radius: 4px;
  outline: none;
  border: 1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--amber);
  cursor: pointer;
  transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* ── Map pin interactivity ───────────────────── */

/* Force Leaflet divIcon wrappers to pass pointer events through */
.leaflet-marker-icon.cre-pin {
  pointer-events: all !important;
  cursor: pointer !important;
}
.leaflet-marker-icon.cre-pin > div {
  pointer-events: all !important;
  cursor: pointer !important;
}
/* Make the interactive hit area larger than the visual pin */
.leaflet-marker-icon.cre-pin::after {
  content: '';
  position: absolute;
  top: -8px; left: -8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

/* ── New layout overrides (topbar search redesign) ──────────────── */

/* Remove old topbar flex children that no longer exist */
.topbar-tabs, .topbar-brand, .topbar-sub, .topbar-logo,
.topbar-title, .topbar-actions { all: unset; }

/* App root is now full viewport flex column — handled inline */
.main-content { display: none !important; } /* old layout gone */

/* Ensure map fills its container */
.leaflet-container { width: 100% !important; height: 100% !important; }

/* ── Pin interactivity ───────────────────────────────────────────── */
.leaflet-marker-icon.cre-pin {
  pointer-events: all !important;
  cursor: pointer !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
}
.leaflet-marker-icon.cre-pin > div {
  pointer-events: all !important;
  cursor: pointer !important;
}
.leaflet-marker-icon.cre-pin .cre-pin-dot {
  pointer-events: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.leaflet-marker-icon.cre-pin:hover .cre-pin-dot {
  transform: scale(1.55) !important;
  box-shadow: 0 0 0 7px rgba(77,158,240,0.5) !important;
}

/* ── Done Deal tooltip ───────────────────────────────────────────── */
.done-deal-tooltip {
  background: #0d1f14 !important;
  border: 1px solid #166534 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
  pointer-events: none;
}
.done-deal-tooltip .leaflet-tooltip-top::before,
.leaflet-tooltip.done-deal-tooltip::before {
  border-top-color: #166534 !important;
}

/* ── OM Hero metric cards (Deal Verdict cover page) ──────────────── */
/* Click-to-scroll cards — subtle hover to signal interactivity. */
.om-hero-card:hover {
  background: rgba(31,58,138,0.10) !important;
  border-color: rgba(201,168,76,0.45) !important;
  transform: translateY(-1px);
}
.om-hero-card:hover .om-hero-card-arrow {
  opacity: 1 !important;
  transform: translateX(2px);
}
.om-hero-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ── OM Hero — print-page polish ─────────────────────────────────── */
@media print {
  /* Whole Hero section: prefer to keep on one page; tighten spacing.
     break-inside is the modern alternative; page-break-* for legacy. */
  .om-hero-section {
    page-break-inside: avoid;
    break-inside: avoid-page;
    page-break-after: avoid;
    margin-top: 0 !important;
    margin-bottom: 14pt !important;
    padding: 16pt 18pt !important;
    /* Strip the gradient + animations to keep PDF size sane */
    background: #fff !important;
    border: 1pt solid #c0c4c9 !important;
    border-left: 3pt solid #c9a84c !important;
    box-shadow: none !important;
  }

  .om-hero-summary {
    font-size: 10.5pt !important;
    line-height: 1.55 !important;
    margin-bottom: 12pt !important;
    color: #444 !important;
  }

  /* Pin to a 3-column grid in print so cards always fit. The auto-fit
     with minmax(160px, 1fr) collapses unpredictably across screen
     widths in PDF rendering. */
  .om-hero-cards {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6pt !important;
    margin-bottom: 14pt !important;
  }
  .om-hero-card {
    padding: 8pt 10pt !important;
    background: #fafafa !important;
    border: 0.75pt solid #d4d8dc !important;
    break-inside: avoid;
  }
  .om-hero-card .om-hero-card-arrow {
    display: none !important;   /* navigational hint — irrelevant in PDF */
  }

  /* AI narrative panel — keep together, smaller body text. */
  .om-hero-narrative {
    page-break-inside: avoid;
    break-inside: avoid;
    background: #fafafa !important;
    border: 0.75pt solid #d4d8dc !important;
    border-left: 2pt solid #c9a84c !important;
    padding: 10pt 12pt !important;
    margin-bottom: 12pt !important;
  }
  .om-hero-narrative div[style*="font-size: 13"] {
    font-size: 10pt !important;
    line-height: 1.55 !important;
  }

  /* Strengths / Risks two-column — keep both columns on the same page. */
  .om-hero-strengths-risks {
    page-break-inside: avoid;
    break-inside: avoid;
    gap: 18pt !important;
  }
  .om-hero-strengths-risks ul {
    font-size: 10pt !important;
    line-height: 1.55 !important;
  }
}

/* ── Print mode: only show the OM's main pane ───────────────────── */
/* The OM is a fixed-position overlay with overflow:auto, which clips
   content to the viewport and makes only page-1 print. In print we
   flatten the overlay chain to static flow so every section prints.
   We also need to drop the OM's internal 320px sidebar+1fr grid so
   the main pane gets the full printable width (not half of it). */
@media print {
  /* The app is rendered inside #root > div.app-root. Hide every direct
     child of app-root EXCEPT the OM overlay. We can't use body > *
     because #root would get display:none, taking the OM with it. */
  .app-root > *:not(.om-modal-root) { display: none !important; }

  /* Inside the OM, hide the header bar and sidebar — they're chrome, not
     content. Use display:none, not visibility:hidden, so they don't
     reserve grid space and squeeze the main pane. */
  .om-modal-header, .om-modal-sidebar, .om-stitch-band, .om-analyzer-rail { display: none !important; }

  /* Collapse the overlay parents (html, body, #root, app-root, OM root)
     to normal flow so height isn't clipped to one viewport page. */
  html, body, #root, .app-root {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
    display: block !important;
  }
  .om-modal-root {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    background: #fff !important;
  }

  /* Drop the two-column grid so the main pane gets the full printable
     width. minHeight: calc(100vh - 80px) inline style forces viewport
     height, which we also override here. */
  .om-modal-grid {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* The main pane — now full width since sidebar is display:none. */
  .om-print-main {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 14px 18px !important;
    background: #fff !important;
    color: #111 !important;
    page-break-inside: auto;
  }

  /* Recursively strip overflow/height constraints from everything
     INSIDE the main pane — the Pro Forma section uses overflowX:auto
     on its inner div, which in print would clip rows. */
  .om-print-main, .om-print-main * {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Reveal the print-only header */
  .om-print-header { display: block !important; }

  /* Collapse interactive chrome — buttons, drag-links, ? tooltips */
  .om-print-main button,
  .om-print-main a[href^="javascript:"],
  .om-print-main input, .om-print-main select,
  .om-print-main summary { display: none !important; }

  /* Make links VISIBLY clickable in the PDF — readers should see that
     a value (a folio, a permit number, a portal "open" link) is a
     deep-link. Color + underline pair. */
  .om-print-main a[href]:not([href^="javascript:"]):not([href=""]) {
    color: #0f4c81 !important;
    text-decoration: underline !important;
  }

  /* Section + card level page breaks — keep each parcel block, each
     card, and each table as one unit when possible. */
  .om-print-main section,
  .om-print-main details,
  .om-print-main table { page-break-inside: avoid; }
  .om-print-main section { page-break-before: auto; }

  /* Force-expand <details> so bill history / permit list / pro-forma
     rent roll all print even if they were collapsed on screen. */
  .om-print-main details { display: block !important; }
  .om-print-main details > *:not(summary) { display: block !important; }

  /* Compact spacing — printers waste paper on big margins */
  @page { margin: 12mm; size: letter; }

  /* Print-only / no-print helpers within the OM print pane */
  .om-print-main .print-only { display: block !important; }
  .om-print-main .no-print   { display: none  !important; }
}

/* On-screen: hide print-only blocks until print */
.print-only { display: none; }

/* Debt Terms popover — strip the native <summary> disclosure triangle */
.debt-terms-popover > summary::-webkit-details-marker { display: none; }
.debt-terms-popover > summary::marker { content: ''; }


/* ── FDOT AADT permanent label (inline color set in JS) ──────────── */
.leaflet-tooltip.fdot-aadt-label {
  /* Clear Leaflet defaults so only the inline-styled pill shows */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.leaflet-tooltip.fdot-aadt-label::before { display: none !important; }

/* ── OM Mini-Map tooltip (now on light cement theme) ─────────────── */
.om-mini-map-tooltip {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border-lit) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
  color: var(--text) !important;
  pointer-events: none;
}
.om-mini-map-tooltip .leaflet-tooltip-top::before,
.leaflet-tooltip.om-mini-map-tooltip::before {
  border-top-color: rgba(201,168,76,0.45) !important;
}

/* Instant tooltips — CSS-only, works on any element */
.uw-field:hover .uw-tip,
.has-tip:hover .tip-text {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Global [data-tip] CSS tooltip — instant, no JS needed */
[data-tip] {
  position: relative;
  cursor: help;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  z-index: 100;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
  min-width: 180px;
  max-width: 300px;
  width: max-content;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s, visibility 0.12s;
}
[data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
}
.tip-text {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  z-index: 50;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  background: #1a1a2e;
  color: #e0e0e0;
  border: 1px solid rgba(45,212,191,0.3);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  pointer-events: none;
  min-width: 200px;
  max-width: 320px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s, visibility 0.12s;
  white-space: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ── OM UI Improvements ──────────────────────────────────────────────── */

/* 1. Alternating table rows + hover */
.om-print-main table tbody tr:nth-child(even) {
  background: rgba(31,58,138,0.025);
}
.om-print-main table tbody tr:hover {
  background: rgba(31,58,138,0.06);
}

/* 2. Table typography + spacing */
.om-print-main table th {
  padding: 8px 8px !important;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 2px solid rgba(31,58,138,0.15);
}
.om-print-main table td {
  padding: 7px 8px !important;
  line-height: 1.5;
  font-size: 12px;
}
.om-print-main table tfoot td {
  padding: 8px 8px !important;
  font-weight: 700;
  border-top: 2px solid rgba(31,58,138,0.15);
}

/* 3. Sidebar polish */
.om-modal-sidebar {
  border-right: 2px solid rgba(31,58,138,0.12) !important;
}

/* 4. Section cards — status accents */
.om-card-healthy { border-left: 3px solid #10B981 !important; }
.om-card-caution { border-left: 3px solid #f59e0b !important; }
.om-card-critical { border-left: 3px solid #ef4444 !important; }
.om-card-neutral { border-left: 3px solid rgba(31,58,138,0.15) !important; }

/* 5. Button polish */
.om-print-main .btn-teal {
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  font-weight: 600;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.om-print-main .btn-teal:hover {
  filter: brightness(1.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.om-print-main .btn-teal:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 6. Section containers — subtle elevation */
.om-print-main > section,
.om-print-main > div > section {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.om-print-main > section:hover,
.om-print-main > div > section:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 7. Stat card grid improvements */
.om-print-main div[style*="gridTemplateColumns: 'repeat(4"] > div,
.om-print-main div[style*="gridTemplateColumns: 'repeat(6"] > div {
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* 8. Smooth scroll */
.om-print-main {
  scroll-behavior: smooth;
}

/* 9. Score bars animation */
.om-print-main div[style*="borderRadius: 5"] > div,
.om-print-main div[style*="borderRadius: 4"] > div[style*="transition"] {
  transition: width 0.5s ease-out;
}

/* 10. Section heading underlines */
.om-print-main h2 {
  position: relative;
}

/* 11. Input focus state */
.om-print-main input:focus,
.om-print-main select:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(31,58,138,0.12);
}

/* 12. Scrollbar styling for main pane */
.om-print-main::-webkit-scrollbar {
  width: 8px;
}
.om-print-main::-webkit-scrollbar-track {
  background: transparent;
}
.om-print-main::-webkit-scrollbar-thumb {
  background: rgba(31,58,138,0.15);
  border-radius: 4px;
}
.om-print-main::-webkit-scrollbar-thumb:hover {
  background: rgba(31,58,138,0.25);
}

/* 13. Sidebar scrollbar */
.om-modal-sidebar::-webkit-scrollbar {
  width: 6px;
}
.om-modal-sidebar::-webkit-scrollbar-thumb {
  background: rgba(31,58,138,0.12);
  border-radius: 3px;
}

/* 14. OM header improvements */
.om-modal-grid > main > section:first-of-type {
  margin-top: 0;
}

/* 15. Stat value cards — hover lift */
.om-print-main div[style*="background: 'var(--bg-card)'"] {
  transition: transform 0.15s, box-shadow 0.15s;
}

/* 16. Per-folio parcel sections — left accent */
.om-print-main section[style*="marginBottom"] > div[style*="paddingBottom: 14"] {
  border-left: 3px solid var(--primary);
  padding-left: 16px;
}

/* 17. Business cards hover */
.om-print-main div[style*="background: 'var(--bg-card)'"][style*="borderRadius: 4"] {
  transition: transform 0.12s, box-shadow 0.12s;
}

/* 18. Badge styles */
.om-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.om-badge-success { background: rgba(29,158,117,0.12); color: var(--success); }
.om-badge-warning { background: rgba(245,158,11,0.12); color: var(--warning); }
.om-badge-danger  { background: rgba(239,68,68,0.12);  color: var(--danger); }
.om-badge-info    { background: rgba(59,130,246,0.12);  color: var(--info); }

/* 19. Animated loading pulse */
@keyframes om-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.om-loading {
  animation: om-pulse 1.5s ease-in-out infinite;
}

/* 20. Print improvements */
@media print {
  .om-print-main button,
  .om-print-main input,
  .om-print-main select {
    opacity: 0.5;
    pointer-events: none;
  }
  .om-print-main table tbody tr {
    page-break-inside: avoid;
  }
  .om-print-main section {
    page-break-inside: avoid;
  }
  .om-print-main > section,
  .om-print-main > div > section {
    box-shadow: none;
    border: 1px solid #ddd;
  }
  .om-modal-sidebar {
    display: none;
  }
}

/* ── OM One-Pager view ──────────────────────────────────────────────── */
/* When the user toggles One-Pager mode, hide every direct child of
   <main> except the .om-one-pager block. Keeps the modal header / nav
   visible so the user can exit. The one-pager itself is hidden by
   default; CSS shows it only when the .one-pager-active class is on
   the parent. */
.om-print-main > .om-one-pager,
.om-print-main > .om-lease-deck {
  display: none;
}
.om-print-main.one-pager-active > .om-one-pager,
.om-print-main.lease-deck-active > .om-lease-deck {
  display: block;
}
.om-print-main.one-pager-active > :not(.om-one-pager),
.om-print-main.lease-deck-active > :not(.om-lease-deck) {
  display: none !important;
}
.om-one-pager-card,
.om-lease-deck-card {
  background: var(--bg-panel);
  border: 1px solid rgba(31,58,138,0.20);
  border-left: 4px solid var(--amber);
  border-radius: 4px;
  padding: 32px;
  max-width: 8.5in;
  margin: 24px auto;
}
@media print {
  .om-one-pager-card,
  .om-lease-deck-card {
    border: 1px solid #ccc !important;
    border-left: 4px solid #c9a84c !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
}

/* ───────────────────────────────────────────────
   Phase 1 — Stitch institutional polish layer (2026-04-29)
   Aligns the OM with the v2 Stitch design ("Broward CRE
   Intelligence Platform v2", asset 10289993013773928839).
   Pure additive CSS — no JSX changes, no layout shifts.
   ─────────────────────────────────────────────── */

:root {
  /* Stitch brand tokens — surgical use, not a global swap.
     Existing --primary (#1f3a8a) stays put so the ~98 inline
     rgba(31,58,138,…) values in app.js continue to track. */
  --stitch-navy:    #0A192F;
  --stitch-amber:   #F59E0B;
  --stitch-red:     #EF4444;
  --stitch-green:   #10B981;
  --stitch-surface: #f8f9ff;
  --stitch-border:  #E2E8F0;
  --stitch-row-hover: #F1F5F9;
}

/* Tabular numerals on OM data — Stitch insists on tnum so
   columns of dollars / percentages align vertically.
   Geist supports font-feature-settings out of the box. */
.om-print-main table td,
.om-print-main table th,
.om-print-main .data-item-value,
.om-modal-sidebar .data-item-value {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Utility: .label-caps — Stitch's table-header /
   metadata-tag treatment. Reusable on any element. */
.label-caps {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Utility: .mono-data — inline tabular financial figures.
   Uses Geist Mono (already loaded), tabular features on. */
.mono-data {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Right-align financial cells when components opt in via
   class or data attribute. Lets new code be precise without
   forcing legacy tables to change. */
.om-print-main td.financial,
.om-print-main td[data-financial="true"],
.om-print-main .num-right {
  text-align: right;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Sticky table headers in OM — keeps label-caps headers
   visible while scrolling long rent rolls or comp tables.
   Background is Stitch's #F8FAFC hairline-with-surface look. */
.om-print-main table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--stitch-surface);
}

/* ── Owner Portal page-level overrides (Task 6) ───────────────────────
   The broker app sets html/body/#root to height:100% + overflow:hidden
   so its internal panels (.panel-body, .om-print-main, etc.) own the
   scroll. The /portal/<uuid> page is a single tall column though — it
   needs natural page-level scrolling. OwnerPortal toggles this class
   on document.body when it mounts and removes it on unmount.

   We have to defensively override every container in the portal chain
   because the same elements (.om-modal-root, .om-print-main) carry
   constraints inherited from broker-modal use. */
html:has(body.portal-page) {
  height: auto !important;
  overflow: auto !important;
}
body.portal-page {
  height: auto !important;
  min-height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body.portal-page #root,
body.portal-page .om-modal-root,
body.portal-page .om-print-main,
body.portal-page main.om-print-main {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  position: static !important;
}
/* The print stylesheet at @media print clamps these too — but we want
   the portal page to render this way *on screen*, so explicit override
   above. */

/* ── Customer-mode lockdown (Task 6) ──────────────────────────────────
   Applied via the `om-customer-mode` class on the V2 root when the OM
   is rendered inside the public /portal/<uuid> page. Hides every
   external link (target="_blank") and the CoStar / broker-only control
   blocks so the customer can't navigate out to county sites, the
   broker app, or trigger CoStar pulls. */
.om-customer-mode a[target="_blank"],
.om-customer-mode a[href^="http"],
.om-customer-mode a[href^="//"],
.om-customer-mode [data-broker-only="true"] {
  display: none !important;
}
/* CoStar / broker-only control panels — hide controls, leave any
   already-loaded data visible. The customer can read the cached AI
   analysis but can't trigger new pulls. */
.om-customer-mode .costar-controls,
.om-customer-mode [class*="costar-control"],
.om-customer-mode .om-modal-header,
.om-customer-mode .om-stitch-band,
.om-customer-mode .om-modal-sidebar,
.om-customer-mode .om-analyzer-rail {
  display: none !important;
}
/* The right-rail Property Analyzer panel is broker-internal — hide
   in customer mode (the customer-facing OM should focus on outcomes
   and goal-aligned framing, not the broker's underwriting machinery). */
.om-customer-mode aside.om-analyzer-rail {
  display: none !important;
}

/* Visually-hidden but AT-accessible utility (standard clip-rect pattern).
   Use for text that must be part of an element's ACCESSIBLE NAME — a
   `title` attribute is ignored by the accname computation once the
   element already has visible text-node content, so anything that has to
   reach a screen reader (not just a hover tooltip) belongs in a node like
   this, not in `title` alone. */
.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;
}

/* ── Deal Vault — requirement track tab strip ──────────────────────── */
/* Ivy's .design/deal-vault/DESIGN_BRIEF.md, A.3/A.6/A.9. First real
   role="tab" instance in this file (the phase stepper elsewhere is
   informal buttons) — gets its own visible focus ring, since nothing in
   this panel currently has one. */
.dm-track-tab:hover {
  border-color: var(--text, #e2e8f0) !important;
}
.dm-track-tab:focus-visible {
  outline: 2px solid var(--accent, #14b8a6);
  outline-offset: 2px;
}
/* Edit pencil (active tab only) + reorder nudge arrows only appear on
   hover/focus — keeps the strip from getting busy at rest (brief A.6).
   They're real sibling <button>s next to the tab (not nested inside it —
   a button-in-button is invalid markup and unreachable by keyboard), so
   :focus-visible reveals them independently of hover for keyboard users
   tabbing straight to one. */
.dm-track-edit-btn,
.dm-track-nudge {
  opacity: 0;
  transition: opacity 0.1s ease;
}
.dm-track-tab-wrap:hover .dm-track-edit-btn,
.dm-track-tab-wrap:focus-within .dm-track-edit-btn,
.dm-track-tab-wrap:hover .dm-track-nudge,
.dm-track-tab-wrap:focus-within .dm-track-nudge {
  opacity: 1;
}
.dm-track-edit-btn:focus-visible,
.dm-track-nudge:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent, #14b8a6);
  outline-offset: 1px;
}
/* Mobile/narrow reflow (brief A.10) — the right-hand workspace pane shares
   screen with the map, so it can be narrow at any viewport width; a
   container query (not a media query) is the right tool. Below ~360px of
   PANEL width: drop the count/deal-type line, truncate names harder. */
.dm-track-strip {
  container-type: inline-size;
  container-name: dmtrackstrip;
}
@container dmtrackstrip (max-width: 360px) {
  .dm-track-tab-meta { display: none; }
  .dm-track-tab-name { max-width: 60px; }
}
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --radius-lg: .5rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-brand-success: #1d9e75;
    --color-brand-danger: #ef4444;
    --color-brand-warning: #f59e0b;
    --color-brand-primary: #3b82f6;
    --color-brand-navy: #1f3a8a;
    --color-brand-muted: #94a3b8;
    --color-accent-teal: #2dd4bf;
    --color-accent-purple: #9c3ab5;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-500 {
    top: calc(var(--spacing) * 500);
  }

  .isolate {
    isolation: isolate;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .table-cell {
    display: table-cell;
  }

  .table-row {
    display: table-row;
  }

  .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .break-all {
    word-break: break-all;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
}

.om-print-only {
  display: none;
}

@media print {
  .om-print-only {
    display: block !important;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
/* src/probate/probate.css — self-contained styling for the siloed /probate
   section. Every rule is scoped under .probate-app / .probate-* class
   names so nothing here collides with static/styles.css's global classes
   (.btn, .card, .pill, etc. all already exist there) — a hard requirement
   given both stylesheets load on the same page.

   Colors mirror src/styles/tokens.css / DESIGN.md (--color-brand-*) but are
   redeclared under a --p- prefix here rather than consumed directly, so
   this file also carries its own prefers-color-scheme: dark palette —
   the rest of the CRE app has no dark-mode system today, but /probate is
   a fresh, self-contained surface and dark-mode-aware is part of the
   Phase 3 spec. */

.probate-app {
  --p-bg: #f7f8fa;
  --p-bg-panel: #ffffff;
  --p-bg-card: #ffffff;
  --p-border: #e2e8f0;
  --p-border-lit: #cbd5e1;
  --p-text: #0f172a;
  --p-text-dim: #475569;
  --p-text-muted: #64748b;

  --p-primary: #1f3a8a;   /* --color-brand-navy */
  --p-accent: #3b82f6;    /* --color-brand-primary */
  --p-success: #1d9e75;   /* --color-brand-success */
  --p-danger: #ef4444;    /* --color-brand-danger */
  --p-warning: #b45309;   /* darker than --color-brand-warning for AA text contrast on light amber */
  --p-warning-fg: #92400e;
  /* Part 8 (Round 7) design-review fix — score-pill band-red/band-green
     text contrast. Kevin's own measurement (see .probate-score-pill.band-*
     below) found the base --p-danger/--p-success tokens fail WCAG AA
     (~2.96:1 / ~2.89:1) as PILL TEXT against their own tinted backgrounds
     — a token-level ceiling, not a tint-math bug. Same naming precedent as
     --p-warning/--p-warning-fg above: a base tone plus a darkened,
     text-safe -fg variant. Measured (this file's exact background mixes,
     Python colorimetry, WCAG relative-luminance formula):
       --p-danger-fg  #b91c1c vs band-red's own tinted bg   = 5.09:1 (vs pure white 6.47:1)
       --p-success-fg #0c6b4a vs band-green's own tinted bg = 5.57:1 (vs pure white 6.53:1)
     --p-success-fg keeps --p-success's ~160° teal-leaning hue (measured
     ~159°) rather than drifting toward pure green chasing contrast — the
     CVD-friendlier asset Part 7 already called out. Applied to
     .probate-score-pill.band-red/.band-green TEXT ONLY — background/
     border-color stay on the base --p-danger/--p-success tokens
     unchanged, since Kevin's measurement only flagged the text failure.
     Light-mode-only: the dark-mode block below maps these two variables
     straight back to the base tokens, since dark mode already clears AA
     at the base value (measured 5.39:1 / 7.63:1) — no separate darkening
     needed there. */
  --p-danger-fg: #b91c1c;
  --p-success-fg: #0c6b4a;
  /* Score-pill "yellow" band only (Ivy's brief Part 7, Round 5) — genuinely
     new, no existing token covered a warm-gold hue. Deliberately darker
     than Ivy's own starting-point range (#8a6d0a-#a17d0c): that range
     measured 3.85-4.21:1 against its own tinted pill background, short of
     WCAG AA's 4.5:1 (pill text is 11-12px/800 weight, below the 18.66px
     bold "large text" threshold, so 4.5:1 governs, not 3:1) — this value
     clears it (~5.0-5.9:1 depending on tint alpha; see build report for
     exact numbers). Hue ~46°, kept apart from --p-warning-fg's ~23° amber
     so the two don't visually merge at pill size. */
  --p-caution: #7a5f08;
  --p-muted: #94a3b8;     /* --color-brand-muted */
  --p-accent-2: #9c3ab5;  /* --color-accent-purple — "waiting on a limit, not an error" (throttle countdown), kept distinct from --p-warning (attorney gate) and --p-accent (connection issue) */

  --p-radius: 10px;
  --p-radius-lg: 14px;
  --p-font-display: "Geist", "Inter", "SF Pro Display", system-ui, sans-serif;
  --p-font-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--p-bg);
  color: var(--p-text);
  font-family: var(--p-font-body);
  font-size: 15px;
  line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
  .probate-app {
    --p-bg: #0b0e14;
    --p-bg-panel: #12161f;
    --p-bg-card: #161b26;
    --p-border: #232838;
    --p-border-lit: #2f3650;
    --p-text: #e6e9f0;
    --p-text-dim: #aab2c5;
    --p-text-muted: #7c869c;

    --p-primary: #6f95ff;
    --p-accent: #5b9bff;
    --p-success: #33d9a6;
    --p-danger: #ff7a7a;
    --p-warning: #ffb648;
    --p-warning-fg: #ffb648;
    /* Part 8 (Round 7) contrast fix — dark mode maps these straight back
       to the base --p-danger/--p-success values: measured 5.39:1 / 7.63:1
       for band-red/band-green pill text against their own tinted
       backgrounds in dark mode, already clear of WCAG AA's 4.5:1 with no
       separate darkening needed (unlike light mode, see the light-mode
       definition + comment above). */
    --p-danger-fg: var(--p-danger);
    --p-success-fg: var(--p-success);
    /* Dark counterpart of the light-mode --p-caution above — hue ~46°,
       same distance from --p-warning's ~36° amber. Clears AA with a wide
       margin in dark mode (~9.4-10:1); see build report. */
    --p-caution: #ffd85e;
    --p-muted: #8792a8;
    --p-accent-2: #d19bf0;
  }
}

.probate-app * {
  box-sizing: border-box;
}

/* Undo the broker app's html/body/#root height:100%+overflow:hidden lock,
   exactly the way body.portal-page already does for OwnerPortal — but as a
   NEW rule in this NEW file, never by editing static/styles.css. */
html:has(body.probate-page) {
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body.probate-page {
  height: auto !important;
  min-height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body.probate-page #root {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

/* Visually hidden but still present/focusable-if-needed and readable by
   assistive tech + browser autofill heuristics — the standard "sr-only"
   pattern, off-screen positioning rather than display:none/visibility:
   hidden (both of which some password-manager/autofill implementations
   skip over). Used for the LLM API-key form's hidden username field —
   see AdminSettings.jsx. */
.probate-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;
}

/* ── Top nav ─────────────────────────────────────────────────────────── */

.probate-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 60px;
  flex-shrink: 0;
  background: var(--p-bg-panel);
  border-bottom: 1px solid var(--p-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.probate-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.probate-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}
.probate-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.probate-brand-title {
  font-family: var(--p-font-display);
  font-weight: 800;
  font-size: 15px;
}
.probate-brand-subtitle {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-text-muted);
  font-weight: 600;
}

.probate-nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
}
.probate-nav-link {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text-dim);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.probate-nav-link:hover {
  background: var(--p-bg);
  color: var(--p-text);
}
.probate-nav-link.is-active {
  background: var(--p-primary);
  color: #fff;
}
.probate-nav-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Generic pieces ──────────────────────────────────────────────────── */

.probate-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ── StagePicker (StagePicker.jsx) — pill-shaped manual stage <select>,
   shared by the property header, board card, and leads-list Stage cell.
   Sized/shaped to sit next to the read-only .probate-pill badges it
   replaces on the property header, and to fit a ~140-220px board column
   (see .probate-board's own column-width comment) without wrapping. */
.probate-stage-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.probate-stage-picker-select {
  appearance: none;
  border: 1px solid var(--p-border-lit);
  border-radius: 999px;
  background: var(--p-bg-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 9px center;
  background-size: 9px 6px;
  color: var(--p-text);
  font-family: var(--p-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 4px 22px 4px 10px;
  max-width: 100%;
  cursor: pointer;
}
.probate-stage-picker-select:hover:not(:disabled) {
  border-color: var(--p-accent);
}
.probate-stage-picker-select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.probate-stage-picker-select:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}
.probate-stage-picker-error {
  color: var(--p-danger);
  font-size: 12px;
  cursor: help;
}
/* The board card's own StagePicker gets a compact treatment — a
   ~140-220px column (see .probate-board's width comment) needs the
   smaller size to hold up. */
.probate-board-card-stage .probate-stage-picker-select {
  font-size: 10px;
  padding: 2px 18px 2px 7px;
}

/* ── Probate lead score (LeadScoreBadge.jsx / LeadScoreBreakdown.jsx) ────
   `state` drives the visual family, not `score` — see LeadScoreBadge.jsx's
   own comment for the full rule. Three families:
     is-unscored — italic, muted, no number at all ("Not yet scored")
     is-partial  — DASHED border, shown against its own (40-point) max —
                   same "provisional" visual language as
                   .probate-window-toggle / .probate-offer-locked, so it
                   can never be mistaken for a low complete score at a
                   glance, color alone aside
     is-complete — solid border, tiered by % of its (100-point) max */
.probate-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid;
}
.probate-score-pill-md {
  font-size: 12px;
  padding: 4px 11px;
}
.probate-score-pill.is-unscored {
  background: var(--p-bg-panel);
  border-color: var(--p-border-lit);
  color: var(--p-text-muted);
  font-weight: 600;
  font-style: italic;
}
/* Base fallback (no band class applied) — should not normally render,
   since every 'partial'/'complete' pill always computes a band, kept as a
   defensive default matching the pre-Round-5 flat treatment. */
.probate-score-pill.is-partial {
  background: var(--p-bg);
  border-style: dashed;
  border-color: var(--p-border-lit);
  color: var(--p-text-dim);
}
.probate-score-pill-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-style: normal;
  color: var(--p-text-muted);
  border-left: 1px solid var(--p-border-lit);
  padding-left: 5px;
  margin-left: 5px;
}
.probate-score-pill.is-complete {
  border-style: solid;
  background: var(--p-bg-panel);
  border-color: var(--p-border-lit);
  color: var(--p-text-dim);
}

/* Percent-of-own-max_score color bands (Ivy's brief Part 7, Round 5 — a
   direct, Dino-stated reversal of the 3-tier system these classes used to
   be: "never an alarming red for a low score"). `band-*` REPLACES
   `tier-high/tier-medium/tier-low` everywhere and, unlike the tier system,
   applies to BOTH `.is-partial` and `.is-complete` — a green 87%-partial
   lead is exactly as legitimate a "looks good so far" read as a green
   87%-complete lead. The dashed/solid border above (unchanged) is what
   keeps the two from being mistaken for each other now — color no longer
   carries that job alone.

   Intensity is a second, non-hue channel on top of color (Ivy's
   accessibility note): red/orange ("needs attention") get a heavier
   border + more saturated background wash than yellow/green ("looks
   fine") — a coarse two-way signal that survives a grayscale/colorblind
   view even without the hue difference.

   Backgrounds/borders use color-mix() against each theme's own --p-* var
   rather than a hardcoded rgba() tuple (the OLD tier-high/medium/low
   rules above hardcoded light-theme RGB and never had a dark-mode
   override) — this makes the tint automatically correct per theme with
   no separate dark block to keep in sync, and is what the contrast
   numbers in the build report were actually measured against.

   Contrast, band-red and band-green: LIGHT MODE originally reused
   --p-danger/--p-success verbatim for text per Ivy's earlier explicit
   call ("no new token") and measured BELOW WCAG AA 4.5:1 at pill size
   (~2.97:1 / ~2.90:1) — a pre-existing token-level ceiling, not something
   this pass introduced: --p-danger/--p-success cap out at 3.76:1 / 3.39:1
   against a PURE WHITE background even at zero tint, and the identical
   colors already fail the same way everywhere else they're used as text
   today (StatusPill's danger/success tones,
   .probate-flag-value.tone-danger/tone-success — a separate, app-wide
   follow-up, out of scope for this fix; Ivy's Part 8 ruling on THIS pill
   only). DARK MODE clears AA comfortably on all four bands.

   FIX (Ivy's brief, Part 8, Round 7 ruling — "ship it accessible, not
   stripped"): text color now reads from the new --p-danger-fg/
   --p-success-fg tokens (defined at the top of this file, light mode
   darkened / dark mode = base token — see their own comment there),
   MEASURED 5.09:1 / 5.57:1 in light mode against these exact tinted
   backgrounds, 5.39:1 / 7.63:1 in dark mode. background/border-color stay
   on the base --p-danger/--p-success tokens UNCHANGED — those aren't
   text, only the text-contrast failure was flagged. band-orange and
   band-yellow were already clearing AA in both themes and are untouched
   by this fix. */
.probate-score-pill.band-red {
  background: color-mix(in srgb, var(--p-danger) 18%, var(--p-bg-panel));
  border-color: color-mix(in srgb, var(--p-danger) 55%, transparent);
  border-width: 1.75px;
  color: var(--p-danger-fg);
}
.probate-score-pill.band-orange {
  background: color-mix(in srgb, var(--p-warning-fg) 18%, var(--p-bg-panel));
  border-color: color-mix(in srgb, var(--p-warning-fg) 50%, transparent);
  border-width: 1.75px;
  color: var(--p-warning-fg);
}
.probate-score-pill.band-yellow {
  background: color-mix(in srgb, var(--p-caution) 14%, var(--p-bg-panel));
  border-color: color-mix(in srgb, var(--p-caution) 40%, transparent);
  color: var(--p-caution);
}
.probate-score-pill.band-green {
  background: color-mix(in srgb, var(--p-success) 14%, var(--p-bg-panel));
  border-color: color-mix(in srgb, var(--p-success) 35%, transparent);
  color: var(--p-success-fg);
}

/* Header badges row grows a second line below it (the score breakdown
   disclosure) — wrap both in a column so the disclosure sits directly
   under the pills instead of stretching the header's flex row. */
.probate-workspace-header-badges-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}
.probate-score-details {
  width: 100%;
  max-width: 340px;
}
.probate-score-details > summary {
  justify-content: flex-end;
}
.probate-score-details-note {
  font-size: 12px;
  color: var(--p-text-dim);
  line-height: 1.55;
  margin: 0 0 10px;
}
.probate-score-components {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.probate-score-components li {
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 8px 10px;
}
.probate-score-components li.is-unscoreable {
  border-style: dashed;
  opacity: 0.75;
}
.probate-score-component-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}
.probate-score-component-points {
  font-variant-numeric: tabular-nums;
  color: var(--p-text-muted);
  flex-shrink: 0;
}
.probate-score-components li p {
  margin: 0;
  font-size: 12px;
  color: var(--p-text-dim);
  line-height: 1.5;
}

.probate-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--p-font-body);
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.probate-btn:active {
  transform: translateY(1px);
}
.probate-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.probate-btn-primary {
  background: var(--p-primary);
  color: #fff;
}
.probate-btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}
.probate-btn-secondary {
  background: var(--p-bg-panel);
  color: var(--p-text);
  border-color: var(--p-border-lit);
}
.probate-btn-secondary:hover:not(:disabled) {
  background: var(--p-bg);
}
.probate-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.probate-btn:focus-visible,
.probate-nav-link:focus-visible,
.probate-row-link:focus-visible,
.probate-board-card:focus-visible,
.probate-input:focus-visible,
input:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}

.probate-input {
  border: 1px solid var(--p-border-lit);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--p-font-body);
  background: var(--p-bg-panel);
  color: var(--p-text);
  min-width: 240px;
}

.probate-error-banner {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--p-danger);
  border-radius: var(--p-radius);
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}

.probate-muted {
  color: var(--p-text-muted);
  font-size: 13px;
}
.probate-fine-print {
  font-size: 11px;
  color: var(--p-text-muted);
}

/* ── Main / screen layout ────────────────────────────────────────────── */

.probate-main {
  flex: 1;
  padding: 28px 32px 60px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* Pipeline board only. The 8-column board needs a wide monitor's full
   width to avoid the side-scroll it used to have; Lead List and Property
   Workspace read better constrained, so the 1280px cap stays everywhere
   else (Dino, 2026-07-22: "use the entire width of the screen" — scoped to
   the pipeline view only). Side padding is unchanged, so the board still
   sits inside the same 32px gutter as every other screen. */
.probate-main--wide {
  max-width: none;
}

.probate-screen-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.probate-screen-header h1 {
  font-family: var(--p-font-display);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 4px;
}
.probate-screen-sub {
  color: var(--p-text-muted);
  font-size: 13px;
  max-width: 60ch;
}
.probate-screen-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Lead List top bar: Filters popover (left) + Tasks menu (right) ──────
   Kevin, 2026-07-24 restructure (Dino's spec) — the top bar used to be one
   flat row of five controls (search, foreclosure toggle, Refresh, Clerk
   batch toggle, Import). `.probate-screen-actions-split` keeps the outer
   `.probate-screen-actions` flex row but stretches it to the header's full
   available width and splits its two child groups to the ends, so search+
   Filters land left and Tasks lands right regardless of how many controls
   either side eventually grows. */
.probate-screen-actions-split {
  flex: 1 1 480px;
  justify-content: space-between;
}
.probate-screen-actions-left,
.probate-screen-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Both FiltersPopover and TasksMenu (LeadListToolbar.jsx) share this
   disclosure chrome — a trigger button plus an absolutely-positioned
   floating panel. Anchored under the LEFT group for Filters (grows
   rightward, natural reading order next to search) and under the RIGHT
   group for Tasks (grows leftward, so it never overflows off the viewport
   edge at narrow widths). */
.probate-popover-wrap {
  position: relative;
  display: inline-flex;
}
.probate-popover-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.probate-popover-trigger.is-open {
  border-color: var(--p-accent);
  color: var(--p-accent);
}
.probate-popover-trigger.has-active-filters {
  border-color: var(--p-accent);
}
.probate-popover {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 240px;
  background: var(--p-bg-panel);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 8px;
}
@media (prefers-color-scheme: dark) {
  .probate-popover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}
.probate-screen-actions-left .probate-popover {
  left: 0;
}
.probate-screen-actions-right .probate-popover {
  right: 0;
}

/* Active-filter count badge on the Filters trigger — so a filter hidden
   behind a closed popover is never invisible (Dino's spec). */
.probate-filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--p-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.probate-filters-popover {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.probate-popover-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--p-text);
  cursor: pointer;
}
.probate-popover-option:hover {
  background: var(--p-bg);
}
.probate-popover-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--p-accent);
  flex-shrink: 0;
}
.probate-popover-option-count {
  color: var(--p-text-muted);
  font-weight: 400;
}
.probate-popover-divider {
  height: 1px;
  background: var(--p-border);
  margin: 6px 2px;
}

.probate-tasks-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 260px;
}
.probate-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
  cursor: pointer;
}
.probate-menu-item:hover {
  background: var(--p-bg);
}
.probate-menu-item:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: -2px;
}
.probate-menu-item-label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.probate-menu-item-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--p-text-muted);
}

.probate-empty {
  border: 1px dashed var(--p-border-lit);
  border-radius: var(--p-radius-lg);
  padding: 48px 24px;
  text-align: center;
  color: var(--p-text-muted);
  font-size: 14px;
}
.probate-empty-title {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--p-text);
  margin-bottom: 8px;
}
.probate-empty p {
  max-width: 48ch;
  margin: 0 auto 16px;
  line-height: 1.6;
}

/* ── Lead list table ─────────────────────────────────────────────────── */

.probate-table-wrap {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  overflow-x: auto;
  background: var(--p-bg-panel);
}
.probate-table {
  width: 100%;
  border-collapse: collapse;
}
.probate-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p-text-muted);
  font-weight: 700;
  padding: 12px 16px;
  background: var(--p-bg);
  border-bottom: 1px solid var(--p-border);
}
.probate-table th.probate-th-sortable {
  padding: 0;
}

/* Sortable column header (Ivy's brief, Part 1 Finding 1 — Score, Records
   pull, Case status, Property, Decedent). A real <button> filling the
   <th> rather than an onClick on the <th> itself, so it's keyboard-
   focusable and gets a native focus ring — the <th>'s own `aria-sort`
   attribute (see LeadList.jsx's SortableTh) is what screen readers
   announce; the ▲/▼ glyph here is purely visual reinforcement. */
.probate-th-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: left;
}
.probate-th-sort:hover {
  color: var(--p-text);
}
.probate-th-sort:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: -2px;
}
.probate-table th[aria-sort="ascending"] .probate-th-sort,
.probate-table th[aria-sort="descending"] .probate-th-sort {
  color: var(--p-accent);
}
.probate-th-sort-arrow {
  font-size: 9px;
  line-height: 1;
}
.probate-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--p-border);
  font-size: 13px;
  vertical-align: top;
}
.probate-table tbody tr:last-child td {
  border-bottom: none;
}
.probate-table-compact th,
.probate-table-compact td {
  padding: 8px 12px;
  font-size: 12.5px;
}

/* Guards a bare .probate-table (one not already inside .probate-table-wrap,
   e.g. the Heirs table in PropertyWorkspace) against widening the page —
   a 5-column table's min-content width can exceed a narrow card even when
   every cell wraps, so the table scrolls internally instead. */
.probate-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--p-border);
  border-radius: 8px;
}
.probate-table-scroll .probate-table {
  border: none;
}

.probate-row-link {
  cursor: pointer;
}
.probate-row-link:hover {
  background: var(--p-bg);
}

.probate-cell-title {
  font-weight: 700;
  color: var(--p-text);
}
.probate-cell-sub {
  font-size: 11.5px;
  color: var(--p-text-muted);
  font-family: var(--p-font-mono);
  margin-top: 2px;
}
.probate-cell-loading {
  color: var(--p-text-muted);
}
.probate-inline-flag {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--p-danger);
}
.probate-enriching-note {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--p-text-muted);
  border-top: 1px solid var(--p-border);
}

/* ── Clerk pull-status triage (PullStatusPill.jsx) ───────────────────────
   The border-style split IS the "never_pulled must not look like
   pulled_empty" guarantee — color is a secondary cue, not the only one,
   since amber (unconfirmed) vs. muted (confirmed-empty) is a small
   contrast delta for some eyes. Dashed = no real answer yet. Solid = a
   genuine search completed, whatever it found. */
.probate-pull-pill-unconfirmed {
  border-style: dashed;
}
.probate-pull-pill-confirmed {
  border-style: solid;
  font-weight: 800;
}
.probate-high-signal-flag {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--p-warning-fg);
  white-space: nowrap;
}

/* ── Modal (BCPA import) ─────────────────────────────────────────────── */

.probate-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.probate-modal {
  background: var(--p-bg-panel);
  border-radius: var(--p-radius-lg);
  border: 1px solid var(--p-border);
  padding: 28px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.probate-modal h2 {
  font-family: var(--p-font-display);
  font-size: 18px;
  margin: 0 0 6px;
}
.probate-modal-sub {
  font-size: 13px;
  color: var(--p-text-muted);
  margin: 0 0 18px;
  line-height: 1.55;
}
.probate-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.probate-file-input {
  width: 100%;
  font-size: 13px;
}
.probate-import-result-headline {
  font-weight: 700;
  margin-bottom: 8px;
}
.probate-import-json {
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 12px;
  font-family: var(--p-font-mono);
  font-size: 11px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Gated-ingestion notice ──────────────────────────────────────────── */

.probate-gated-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(180, 83, 9, 0.08);
  border: 1px solid rgba(180, 83, 9, 0.3);
  border-radius: var(--p-radius);
  padding: 14px 16px;
  margin-top: 10px;
}
.probate-gated-notice-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.probate-gated-notice-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--p-warning-fg);
  margin-bottom: 3px;
}
.probate-gated-notice-body {
  font-size: 12.5px;
  color: var(--p-text-dim);
  line-height: 1.55;
  margin: 0;
}
.probate-gated-notice-meta {
  font-size: 11px;
  color: var(--p-text-muted);
  margin: 6px 0 0;
}
.probate-gated-notice-meta code {
  font-family: var(--p-font-mono);
}

/* ── Pipeline board ──────────────────────────────────────────────────── *
 * 8 fixed stages, equal-width columns via `repeat(8, minmax(0, 1fr))` —
 * NOT a plain `1fr`, which refuses to shrink a column below its content's
 * min-width and reintroduces the exact horizontal-overflow bug class this
 * layout replaces (bit this app twice already at 390px). `minmax(0, 1fr)`
 * lets every column shrink to whatever the grid track gives it, so the
 * board always fills the viewport with zero horizontal scroll across the
 * desktop range this grid targets (1280px through a 1920px wide monitor
 * — below 1280px the board switches to stacked sections instead, see the
 * dedicated breakpoint further down).
 *
 * Empty-stage columns stay the SAME width as full ones (not collapsed
 * narrower). Deliberate: collapsing empty columns would need to
 * recompute grid-template-columns from live counts, and the column
 * widths would then shift every time a stage count changes — worse for
 * scanning a kanban at a glance than a few "—" placeholders. Every stage
 * stays visible, labelled, and in a stable position. */
.probate-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.probate-board-col {
  min-width: 0;
  background: var(--p-bg-panel);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
}
.probate-board-col-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--p-border);
  font-size: 12.5px;
  font-weight: 700;
}
.probate-board-col-header > span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
}
.probate-board-count {
  background: var(--p-bg);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--p-text-muted);
  flex-shrink: 0;
}
.probate-board-col-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.probate-board-empty {
  color: var(--p-text-muted);
  font-size: 12px;
  text-align: center;
  padding: 12px 0;
}
.probate-board-card {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.probate-board-card:hover {
  border-color: var(--p-border-lit);
}
/* At an 8-up grid, a column is ~140-220px on real desktop widths (1280
   through 1920) — not enough for a full address + decedent name at body
   font size. Clamp both to a couple of lines with ellipsis and carry the
   full value in `title` (set in PipelineBoard.jsx) so nothing is lost,
   just deferred to hover — same pattern as the doc-type clamp above. */
.probate-board-card .probate-cell-title {
  font-size: 12.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.probate-board-card .probate-cell-sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* The card's own StagePicker — its own line, not squeezed into the
   footer next to the authority dot, since a ~140-220px column (see
   .probate-board's width comment) doesn't have room for a select plus
   another chip on one row without wrapping badly. */
.probate-board-card-stage {
  display: block;
  margin-top: 6px;
}
.probate-board-card-stage .probate-stage-picker-select {
  width: 100%;
}
/* The path pill that used to share this row with the authority dot was
   removed 2026-07-31 (Elena's audit + Dino's call: a status pill with no
   write path anywhere, always reading "Undecided," is worse than no
   indicator) — see PipelineBoard.jsx. justify-content: flex-end (rather
   than the old space-between, which needed two children to make sense)
   keeps the sole remaining item, the authority dot, pinned to the same
   trailing position it always occupied instead of drifting to the left
   edge now that it's alone in the row. */
.probate-board-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 4px;
  margin-top: 8px;
}
.probate-authority-dot {
  font-size: 12px;
  flex-shrink: 0;
}

/* "Show N more" / "Show fewer" — per-column cap affordance (see
   PipelineBoard.jsx's STAGE_COLUMN_CAP). Styled like a quiet card, not a
   CTA button — this is pagination, not an action. */
.probate-board-show-all {
  appearance: none;
  width: 100%;
  background: none;
  border: 1px dashed var(--p-border-lit);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-text-muted);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.probate-board-show-all:hover {
  border-color: var(--p-accent);
  color: var(--p-accent);
}
.probate-board-show-all:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}

/* 8 columns need ~140px+ each to hold up (1280px is the narrowest desktop
   width this was designed against — 8 * ~145px, per spec). Below that a
   column drops under ~120px and header labels ("Researching") start
   mid-word-wrapping ("Researchi/ng") because there's no longer a full
   word's worth of room — tried a 1100px cutoff first and that's exactly
   the breakage it produced at ~1101px. Stop trying to fit 8 columns
   sideways below 1280px and switch to stacked, full-width sections
   instead: one stage per section, cards listed vertically underneath,
   the whole board scrolling with the page (not the horizontal scroll
   this layout replaced). Every stage still renders — none disappear,
   none collapse into a picker — Dino sees an empty stage exactly the way
   he sees a full one, just shorter. Deliberately its own breakpoint,
   decoupled from the 900px one below used for the rest of the app (tabs,
   forms, workspace grid) — the board's minimum viable column width is a
   different constraint than theirs. */
@media (max-width: 1279px) {
  .probate-board {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .probate-board-col {
    max-height: none;
  }
  .probate-board-col-body {
    overflow-y: visible;
  }
}

/* ── Property workspace ──────────────────────────────────────────────── */

.probate-back-link {
  background: none;
  border: none;
  color: var(--p-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
}
.probate-back-link:hover {
  color: var(--p-text);
}

.probate-workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.probate-workspace-header > div:first-child {
  min-width: 0;
  flex: 1 1 280px;
}
.probate-workspace-header h1 {
  font-family: var(--p-font-display);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
/* Owner name — decedent + living co-owner, shared by all three tabs (see
   OwnerNameLine in PropertyWorkspace.jsx). Sits between the folio line
   and Next/Prev nav. */
.probate-owner-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
}
.probate-owner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.probate-owner-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42vw;
}
.probate-owner-unresolved {
  font-size: 12.5px;
  color: var(--p-text-muted);
  font-style: italic;
}

.probate-workspace-header-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Process strip — "what's next" (Ivy's UX_REVIEW.md rec 1) ────────────
   Shared across Overview/Documents/Decision (rendered once by
   PropertyWorkspace.jsx, below the header, above TabNav — see
   components/ProcessStrip.jsx). Same left-border-accent grammar as
   .probate-flag-gate (the Letters-of-Administration gate card) rather than
   a new visual language: a colored 4px left border carries the tone, the
   icon+text stay one calm line so it reads as a single sentence, not
   another status pill competing with the ones already in the header. The
   optional trailing action button is right-aligned via margin-left: auto
   so the strip degrades to a plain sentence with nothing clickable when
   there's no next tab to jump to (the "ready for outreach" done state). */
.probate-process-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-left: 4px solid var(--p-border-lit);
  background: var(--p-bg-panel);
  border-radius: 0 var(--p-radius) var(--p-radius) 0;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.probate-process-strip.tone-neutral { border-left-color: var(--p-muted); }
.probate-process-strip.tone-warning { border-left-color: var(--p-warning); }
.probate-process-strip.tone-info { border-left-color: var(--p-accent); }
.probate-process-strip.tone-success { border-left-color: var(--p-success); }
.probate-process-strip-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.probate-process-strip-text {
  color: var(--p-text-dim);
  font-weight: 600;
}
.probate-process-strip-action {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--p-accent);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 4px;
}
.probate-process-strip-action:hover,
.probate-process-strip-action:focus-visible {
  text-decoration: underline;
}

.probate-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* A tab (Documents, Decision) that renders a single full-width column
   instead of a two-column split. Overview (tab-slim pass, 2026-07-24/25)
   no longer uses `.probate-workspace-grid` at all — it's four plain
   full-width `.probate-card` siblings now, each spaced by its own
   margin-bottom (see `.probate-dd-merged-card`, `.probate-regulatory-
   region`, `.probate-status-flags-card` below) — so `.probate-workspace-
   main`/`.probate-workspace-side` (the old two-column flex columns) are
   retired along with the cards that only ever lived inside them. */
.probate-workspace-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

/* ── Lead nav (Next / Previous) ───────────────────────────────────────────
   Sits directly under the address, visible on every tab — the same "always
   reachable" slot the Clerk/court-docs pull buttons used to occupy before
   Dino moved those to live only on the Documents tab (2026-07-22). */
.probate-lead-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 12px;
}
.probate-lead-nav-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.probate-lead-nav-position {
  font-size: 12px;
  font-weight: 700;
  color: var(--p-text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.probate-lead-nav-hint {
  font-size: 11px;
  color: var(--p-text-muted);
  white-space: nowrap;
}
.probate-lead-nav-boundary {
  flex-basis: 100%;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--p-text-muted);
  max-width: 56ch;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.probate-tabnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--p-border);
  margin-bottom: 20px;
}
.probate-tabnav-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-right: 22px;
  font-family: var(--p-font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--p-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.probate-tabnav-tab:hover {
  color: var(--p-text);
}
.probate-tabnav-tab.is-active {
  color: var(--p-primary);
  border-bottom-color: var(--p-primary);
}
.probate-tabnav-badge {
  background: var(--p-bg);
  border: 1px solid var(--p-border-lit);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--p-text-muted);
}
.probate-tabnav-tab.is-active .probate-tabnav-badge {
  color: var(--p-primary);
  border-color: var(--p-primary);
}
.probate-tabpanel:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── Documents tab ─────────────────────────────────────────────────────── */

.probate-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.probate-card-header-row h2 {
  margin: 0;
}
.probate-doc-source-empty {
  border: 1px dashed var(--p-border-lit);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.probate-doc-source-empty:last-child {
  margin-bottom: 0;
}
/* Distinct from the amber attorney-sign-off .probate-gated-notice — a blue
   "needs connection / informational" tone so the two families of degraded
   state never read as the same thing. */
.probate-connection-notice {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}
.probate-connection-notice .probate-gated-notice-title {
  color: var(--p-accent);
}

/* Distinct from BOTH the amber attorney-sign-off notice and the blue
   connection notice — a "waiting on our own rate limit, not an error"
   tone, per the hard requirement that proxy_alive:false / throttled /
   genuine error / not-pulled-yet never collapse into the same visual. */
.probate-throttled-notice {
  background: rgba(156, 58, 181, 0.08);
  border-color: rgba(156, 58, 181, 0.3);
}
.probate-throttled-notice .probate-gated-notice-title {
  color: var(--p-accent-2);
}

/* ── Window toggle (12mo / full history) — deliberately ORDINARY, not an
   alert (Dino, 2026-07-22 correction: "I dont need anything older then 12
   months because its outdated for what Im doing" — the 12-month default is
   correct for him, not a compromise this UI should keep flagging). Same
   visual weight as the neutral window-label pill it replaced; the
   out-of-window count, when shown at all, is a muted secondary detail —
   no warning color, no exclamation, no call-to-action styling. */
.probate-window-toggle {
  appearance: none;
  background: var(--p-bg);
  border: 1px solid var(--p-border-lit);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--p-text-muted);
  cursor: pointer;
  font-family: inherit;
}
.probate-window-toggle:hover {
  border-color: var(--p-accent);
  color: var(--p-text-dim);
}
.probate-window-toggle:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}
.probate-window-toggle-extra {
  font-weight: 400;
  color: var(--p-text-muted);
}

/* Plain inline text-button, styled like a link, for the unobtrusive
   "See full history (N)" affordance inside the empty-state sentence —
   ordinary tone, not a CTA button. */
.probate-inline-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--p-accent);
  text-decoration: underline;
  cursor: pointer;
}
.probate-inline-link:hover {
  text-decoration: none;
}
.probate-inline-link:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Refresh + cache-age row. Sits between the window toggle and the
   document list; the throttle countdown is a small ambient label, never a
   spinner (Dino: "never a spinner that implies work is happening"). */
.probate-clerk-refresh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.probate-clerk-refresh-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.probate-throttle-countdown {
  font-family: var(--p-font-mono);
  white-space: nowrap;
}

/* ── Overview tab — External checks (permits/violations/tax), cache-first ─ */
.probate-extcheck-row {
  padding: 10px 0;
}
.probate-extcheck-row-divider {
  border-bottom: 1px solid var(--p-border);
}
.probate-extcheck-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.probate-extcheck-label {
  font-size: 13px;
  font-weight: 600;
}
.probate-extcheck-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Module 2 (Ivy's brief) — "Open ↗" deep link sits beside the existing
   Check now/Refresh button (Tax/Permits/Violations) or View documents →
   (Clerk row), never replacing it — two independent actions, one row. */
.probate-extcheck-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.probate-extcheck-open-link {
  font-size: 12.5px;
  white-space: nowrap;
}

/* ── Module 3 (Ivy's brief) — Clerk of Court · Legal Health ─────────────── */
/* Red top-rule accent, mirrors CRE's own borderTop treatment for the same
   red-flag concept (Ivy's brief, design-tokens deltas) — the ONE visual
   escalation on this card; everything else stays the same neutral card
   chrome as every other Overview section. Compound selector (not a bare
   `.probate-legal-health-redflag` class) is deliberate: `.probate-card`'s
   own shorthand `border: 1px solid var(--p-border)` rule sets all four
   sides, including top — a same-specificity, later-in-file, single-class
   `.probate-legal-health-redflag { border-top: ... }` rule loses that
   cascade fight and silently paints no red border at all (caught via a
   computed-style check against the live page, not by eye — a getComputedStyle
   probe showed `border-top-color: var(--p-border)` /1px on a `redflag`-
   classed card even though the class was correctly applied). Two classes
   on one selector out-specifies `.probate-card` regardless of source
   order, so this can't regress the same way again. */
.probate-card.probate-legal-health-redflag {
  border-top: 3px solid var(--p-danger);
}
.probate-legal-health-headline {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.probate-legal-health-headline.tone-success {
  color: var(--p-success);
}
.probate-legal-health-headline.tone-neutral {
  color: var(--p-text-dim);
}
.probate-legal-health-headline.tone-danger {
  color: var(--p-danger);
}
/* The one disclosure on this card (Ivy's brief: "the counts... are always
   visible. The row-by-row table... is the one place... I use a
   disclosure"). Auto-open on a lis pendens red flag via LegalHealthCard's
   `open={hasLisPendens}`; collapsed otherwise. Native <details>/<summary>
   — free keyboard support, no JS toggle state needed. */
.probate-legal-health-details {
  margin-top: 10px;
}
.probate-legal-health-details > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-text-dim);
  list-style: none;
}
.probate-legal-health-details > summary::-webkit-details-marker {
  display: none;
}
.probate-legal-health-details > summary::before {
  content: "▸ ";
}
.probate-legal-health-details[open] > summary::before {
  content: "▾ ";
}
.probate-legal-health-group {
  margin-top: 10px;
}
.probate-legal-health-group h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-text-muted);
  font-weight: 700;
  margin: 0 0 6px;
}

/* ── Module 4 (Ivy's brief) — Title Health ────────────────────────────────
   Sits directly under Legal Health, its own <section> — same data lineage
   (Clerk documents) but llm_extracted-grade interpretation rather than a
   mechanical bucket count, so it gets a card of its own rather than
   folding into .probate-legal-health-card (Part 2's organizing principle).
   No card-level chrome of its own beyond the shared .probate-card —
   OverviewTab.jsx reuses .probate-doc-source-empty / .probate-error-banner
   / .probate-gated-notice.probate-connection-notice / .probate-dd-findings-
   list / .probate-legal-health-details+group / .probate-dd-footer
   verbatim for every state except the score pill and its disclaimer,
   below. */

/* health_score pill — DELIBERATELY NOT .probate-score-pill (Ivy's brief,
   Module 4: "a title score next to the 40/100-scale lead score would
   visually claim they're the same measurement"). A single, plain pill
   shape regardless of tone — no dashed-vs-solid partial/complete grammar,
   since that distinction (provisional score vs. a score computed against
   every known component) doesn't exist for an always-1-to-10 LLM readout.
   Tone reads from the SAME hue family .probate-flag-value's tone system
   already uses (tone-success/tone-neutral/tone-danger), but for TEXT this
   pill reads the --p-danger-fg/--p-success-fg tokens the score-pill's own
   Round 7 contrast fix introduced (probate.css's --p-app block) rather
   than the un-darkened base --p-danger/--p-success .probate-flag-value
   itself still uses — this is a brand-new component with no shipped
   history to preserve, so there's no reason to ship a fresh WCAG AA text
   failure into it just because .probate-flag-value's OWN identical gap is
   a separate, already-flagged, not-yet-decided app-wide question (Ivy's
   brief, Part 8 — "What needs Dino's decision"). Background/border stay a
   light tint of the base (un-darkened) tone token, same "-fg only touches
   text" split the score-pill fix established. */
.probate-title-health-score {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--p-border-lit);
  background: var(--p-bg-panel);
}
.probate-title-health-score.tone-success {
  color: var(--p-success-fg);
  background: color-mix(in srgb, var(--p-success) 12%, var(--p-bg-panel));
  border-color: color-mix(in srgb, var(--p-success) 35%, transparent);
}
.probate-title-health-score.tone-neutral {
  color: var(--p-text-dim);
}
.probate-title-health-score.tone-danger {
  color: var(--p-danger-fg);
  background: color-mix(in srgb, var(--p-danger) 12%, var(--p-bg-panel));
  border-color: color-mix(in srgb, var(--p-danger) 40%, transparent);
}

/* The authority-to-sell wall's frontend half — fixed microcopy, every
   render of the generated state, never conditional/omitted. */
.probate-title-health-disclaimer {
  font-size: 12px;
  color: var(--p-text-muted);
  margin: 6px 0 12px;
}

/* ── Module 2b (Ivy's brief, Round 6) — Regulatory & Legal ───────────────
   Three independently-toned cards (Tax Status / Permits / Code
   Violations), side-by-side — matches CRE's own FeatureSection-per-source
   layout (variant:'card' default), not one merged three-section card. The
   region itself carries only a heading, no card chrome of its own — the
   three children below it are the cards. */
.probate-regulatory-region {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Part 8 (Round 7), Directive 2 — the ONLY new rule this directive needs.
     Region is now a full-width plain sibling BETWEEN two
     .probate-workspace-grid instances (see OverviewTab.jsx) rather than
     living inside .probate-workspace-main; this matches the grid's own
     `gap: 20px` so the rhythm between the two grid instances stays
     consistent with the rhythm inside each of them. */
  margin-bottom: 20px;
}
.probate-regulatory-region h2 {
  font-family: var(--p-font-display);
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}
.probate-regulatory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}
.probate-reg-card {
  background: var(--p-bg-panel);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 16px;
  border-top: 3px solid var(--p-border-lit);
  min-width: 0;
}
/* Tone modifiers only ever touch border-top-color (never the shorthand),
   so `.probate-reg-card.tone-*`'s extra class already out-specifies the
   base `.probate-reg-card` rule regardless of source order — same fix the
   Legal Health redflag comment above had to reach for via a compound
   selector, applied here from the start instead of after the fact. */
.probate-reg-card.tone-success {
  border-top-color: var(--p-success);
}
.probate-reg-card.tone-warning {
  border-top-color: var(--p-warning-fg);
}
.probate-reg-card.tone-danger {
  border-top-color: var(--p-danger);
}
.probate-reg-card h3 {
  font-size: 12.5px;
  font-weight: 700;
  margin: 0 0 10px;
}
.probate-reg-headline {
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 8px;
}
.probate-reg-headline.tone-success { color: var(--p-success); }
.probate-reg-headline.tone-neutral { color: var(--p-text-dim); }
.probate-reg-headline.tone-warning { color: var(--p-warning-fg); }
.probate-reg-headline.tone-danger { color: var(--p-danger); }
/* Same disclosure pattern as .probate-legal-health-details — bill/record
   history is secondary once the headline finding is visible. */
.probate-reg-card-details {
  margin: 4px 0 10px;
}
.probate-reg-card-details > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--p-text-dim);
  list-style: none;
}
.probate-reg-card-details > summary::-webkit-details-marker {
  display: none;
}
.probate-reg-card-details > summary::before {
  content: "▸ ";
}
.probate-reg-card-details[open] > summary::before {
  content: "▾ ";
}
.probate-reg-record-desc {
  color: var(--p-text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.probate-reg-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── Module 1 (Ivy's brief) — BCPA Due Diligence narrative ──────────────── */
.probate-dd-card {
  margin-bottom: 16px; /* full-width banner, sits above .probate-workspace-grid */
}
.probate-dd-card > h3 {
  margin: 16px 0 8px;
}
.probate-dd-card-compact {
  padding: 16px 20px;
}

/* ── Directive 3 (Ivy's brief, Part 8, Round 7) — BCPA valuation merges
   into BCPA Due Diligence ────────────────────────────────────────────────
   One outer card (.probate-dd-merged-card — same "sits above
   .probate-workspace-grid" placement .probate-dd-card already used),
   two internal zones: an always-rendered free/instant valuation zone
   (its own background wash + explicit "Free" fine print) above a plain
   hairline divider, then the narrative zone (DueDiligenceBanner,
   `embedded` prop — see .probate-dd-narrative-zone below) entirely
   unchanged below it. The zone boundary carries this brief's own
   card-level provenance-split principle one level down — never a
   color-only signal, the text on each zone does the honesty work. */
.probate-dd-merged-card {
  margin-bottom: 16px; /* full-width banner, sits above .probate-workspace-grid — same rule .probate-dd-card used */
}
.probate-dd-valuation-strip {
  background: var(--p-bg);
  border-radius: var(--p-radius);
  padding: 14px 16px;
}
.probate-dd-valuation-strip h3 {
  margin-top: 0;
}
/* Dino, 2026-07-23 — CRE "BCPA Info" layout port (replaces the old
   Just/Land/Building three-number row, .probate-dd-valuation-row/-item/
   -label/-value above this comment's former home, now retired/unused —
   nothing else in the codebase referenced them, confirmed before
   removing). Same `repeat(auto-fit, minmax(...))` self-collapsing
   mechanism `.probate-regulatory-grid` already established — needs no
   dedicated @media rule to reach one column at 390px, the grid itself
   already does that once a column can no longer fit its minmax floor. */
.probate-dd-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 20px;
}
.probate-dd-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--p-border);
  min-width: 0;
}
.probate-dd-info-label {
  color: var(--p-text-muted);
  flex-shrink: 0;
}
.probate-dd-info-value {
  color: var(--p-text);
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.probate-dd-info-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
/* Deliberately undecorated — the valuation zone's own background wash and
   its "Free · from the BCPA import" fine print already carry the honesty
   signal; this divider is a plain visual break, nothing more. */
.probate-dd-divider {
  border: none;
  border-top: 1px solid var(--p-border);
  margin: 16px 0;
}
/* Narrative zone's `embedded` wrapper (DueDiligenceBanner's `embedded`
   prop, OverviewTab.jsx) — a plain <div>, no card chrome of its own, since
   .probate-dd-merged-card above it already supplies the border/background/
   padding/heading. Every state's inner content is otherwise identical to
   the standalone .probate-dd-card form. */
.probate-dd-narrative-zone {
  margin-top: 4px;
}
/* The `work_now_vs_wait` callout — deliberately tone-info (blue), NEVER
   `.probate-uw-recommendation`'s success-green, so it can never be
   mistaken for the actual buy-vs-list verdict that lives on the Decision
   tab (Ivy's brief, design-tokens deltas). `role="note"` on the element
   itself (OverviewTab.jsx) — informational, not alert-level. */
.probate-dd-callout {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.probate-dd-callout-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--p-accent);
  margin-bottom: 4px;
}
/* Two-column green-flags/points-of-interest grid — same collapse-at-900px
   behavior as .probate-flag-grid (see the @media block below), new class
   name because the content here is lists, not label/value pairs. */
.probate-dd-findings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 14px 0;
}
.probate-dd-findings-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  color: var(--p-text-dim);
  line-height: 1.7;
}
.probate-dd-findings-list li {
  margin-bottom: 4px;
}
.probate-dd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--p-border);
}

.probate-empty-inline {
  padding: 24px;
  margin: 0;
}

/* ── Portal boundary — Court Case Docket vs. Official Records (Ivy's
   UX_REVIEW.md rec 2) ────────────────────────────────────────────────────
   A real horizontal rule PLUS a labeled section header, not just extra
   whitespace — the brief's own finding was that the two portals "share the
   same outer card with no divider calling out that they're different
   systems." The divider sits between Court Case Docket (now first,
   rec 4) and the Official Records capture bar below it. */
.probate-doc-portal-divider {
  border: none;
  border-top: 1px solid var(--p-border);
  margin: 20px 0 14px;
}
.probate-doc-portal-label {
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.probate-doc-portal-label-name {
  font-weight: 700;
  color: var(--p-text);
}
/* The always-on disambiguation line above the Capture-from-Web2 button —
   pulled out of a hover-only title= attribute (rec 2's central finding).
   Small "info" tint, same family as .probate-connection-notice, but a
   plain one-line paragraph rather than a full icon+title+body notice card
   — this is a quiet, always-true fact about the button below it, not a
   state that changes, so it doesn't need the heavier gated-notice weight. */
.probate-doc-portal-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--p-radius);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--p-text-dim);
  line-height: 1.5;
  margin: 0 0 10px;
}

/* ── Manual case-# entry (Dino: "add manual case entry") ─────────────────
   Renders in Court Case Docket's place when a property has no case on file
   at all. Reuses .probate-field/.probate-input primitives (same label+
   input shape as AdminSettings.jsx's LLM-key form) laid out in a row. */
.probate-manual-case-entry {
  margin-top: 0;
}
.probate-manual-case-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.probate-manual-case-form .probate-field {
  margin-bottom: 0;
  min-width: 220px;
  flex: 1 1 220px;
}

/* ── Clerk session capture bar — the auto-fire flow ──────────────────────
   "Open the Clerk site" CTA + live status of the background proxy-status
   poll. Sits above the Official Records section, always visible while the
   Documents tab is mounted. */
.probate-clerk-capture-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 14px 16px;
  margin-bottom: 6px;
}
.probate-clerk-capture-copy {
  min-width: 0;
  flex: 1 1 260px;
}
.probate-clerk-capture-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 3px;
}
.probate-clerk-capture-bar .probate-btn {
  flex-shrink: 0;
}
.probate-clerk-poll-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 14px;
}
.probate-poll-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p-accent);
  flex-shrink: 0;
  animation: probate-poll-pulse 1.4s ease-in-out infinite;
}
@keyframes probate-poll-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .probate-poll-dot {
    animation: none;
  }
}

/* ── Official Records documents — doc-type-bucket tables ─────────────────
   Ivy's brief Part 6 (Round 5): a real <table> per doc-type bucket
   (worst-first order), replacing the old card-per-document list — density
   at real volume (Dino, looking at a real 61-document lead: "can we
   update this document list to the same module that we know works and I
   like the layout better from the cre app"). CRE's own layout IDEA is
   borrowed (grouped, table-row-dense, worst-first) — not its code, and
   not its thinner field set: every field probate already showed inline
   (party direction, legal, case number, comments, nominal tag, is_new)
   survives, just reflowed into columns. Same horizontal-scroll-at-390px
   answer as the Leads list (Part 1, Finding 5) — a document list is a
   compare-many-rows task, same as a leads table. */
.probate-doc-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 4px;
}
.probate-doc-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--p-font-display);
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--p-text-dim);
  margin: 0 0 8px;
}
.probate-doc-group-title {
  min-width: 0;
}
/* The per-group table reuses .probate-table/.probate-table-compact/
   .probate-table-scroll verbatim (same classes the Lead List and Admin's
   version-history table already use) — one table system, not a second
   one invented for this pass. These rules only add doc-column-specific
   layout on top. */
.probate-doc-table-date {
  font-family: var(--p-font-mono);
  font-size: 11.5px;
  color: var(--p-text-muted);
  white-space: nowrap;
}
.probate-doc-table-type {
  min-width: 180px;
}
.probate-doc-table-type-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
/* AcclaimWeb Doc Type values are verbose phrases ("Deed Transfers of Real
   Property", "Probate"), not short codes — clamp to 2 lines with ellipsis
   so a long value can't stretch the column; `title` carries the full text
   on hover. Same treatment the old card's raw-type line used. */
.probate-doc-table-rawtype {
  font-size: 11.5px;
  color: var(--p-text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  max-width: 26ch;
}
.probate-doc-table-parties {
  min-width: 150px;
}
.probate-doc-table-reference {
  white-space: nowrap;
  font-family: var(--p-font-mono);
  font-size: 12px;
}
.probate-doc-table-amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.probate-doc-table-status {
  min-width: 170px;
}
.probate-doc-table-status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* New-document accent — a left-edge bar on the row's first cell, same
   accent color the old card's box-shadow treatment used. */
.probate-doc-table tr.probate-doc-row-new td:first-child {
  box-shadow: inset 3px 0 0 var(--p-accent);
}
/* Extras (legal/case/comments) and Summarize sub-rows — colSpan across
   all six columns, same accessible pattern CRE's own Summarize row uses
   for the identical reason (a wide content block that isn't naturally
   column-shaped). Reuses .probate-doc-card-inline-details's existing
   dashed-top-rule treatment verbatim inside the <td>. */
.probate-doc-table-extras-row td,
.probate-doc-table-summary-row td {
  padding-top: 4px;
}
.probate-doc-table-extras-row .probate-doc-card-inline-details {
  margin: 0;
}
.probate-doc-table-summary-row .probate-doc-summary-panel {
  margin-top: 0;
  padding-top: 8px;
}
.probate-doc-table-show-more {
  margin-top: 8px;
  display: inline-block;
}

/* Grantor/grantee direction — the field that flips a document's meaning
   (see DocumentsTab.jsx). Always visible, sits between the raw doc-type
   line and the meta grid. */
.probate-doc-card-relationship {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  margin: 0 0 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.probate-doc-card-relationship-arrow {
  color: var(--p-text-muted);
  flex-shrink: 0;
}
.probate-doc-card-relationship-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 0;
}
.probate-doc-card-relationship-fallback {
  color: var(--p-text-muted);
  font-style: italic;
}
.probate-doc-card-nominal-tag {
  color: var(--p-text-muted);
  font-weight: 500;
  font-style: italic;
}

/* Legal description + case number — a plain, zero-network disclosure
   (native <details>, no JS state) kept separate from the Summarize
   toggle in the footer, which fires an LLM request. */
.probate-doc-card-details {
  margin: 0 0 10px;
}
.probate-doc-card-details > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--p-text-dim);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.probate-doc-card-details > summary::-webkit-details-marker {
  display: none;
}
.probate-doc-card-details > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--p-text-muted);
  transition: transform 0.15s ease;
}
.probate-doc-card-details[open] > summary::before {
  transform: rotate(90deg);
}
.probate-doc-card-details:hover > summary,
.probate-doc-card-details > summary:focus-visible {
  color: var(--p-text);
}
/* Inline (non-disclosure) sibling of .probate-doc-card-details-body above
   — same visual treatment (dashed top rule, low-priority secondary
   block) minus the <summary> toggle, since Dino asked for this content
   shown outright rather than hidden behind a drop-down (2026-07-22
   correction). */
.probate-doc-card-inline-details {
  margin: 0 0 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--p-border-lit);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.probate-doc-card-details-body {
  margin-top: 8px;
  padding-top: 8px;
  padding-left: 15px;
  border-top: 1px dashed var(--p-border-lit);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.probate-doc-card-details-row {
  font-size: 12.5px;
  min-width: 0;
}
.probate-doc-card-details-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-text-muted);
  font-weight: 700;
  margin-bottom: 3px;
}
.probate-doc-card-details-value {
  margin: 0;
  color: var(--p-text-dim);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
/* Display-only, selectable/copyable — deliberately no button, no link;
   case-document lookup is attorney-gated (see DocumentsTab.jsx). */
.probate-doc-card-case-number {
  font-family: var(--p-font-mono);
  font-size: 12px;
  user-select: all;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: 6px;
  padding: 2px 7px;
  display: inline-block;
  overflow-wrap: anywhere;
}

.probate-doc-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Per-document summary panel ──────────────────────────────────────── */
.probate-doc-summary-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--p-border-lit);
}
.probate-doc-summary-panel .probate-doc-card-status {
  margin-bottom: 10px;
}
.probate-doc-summary-heirs {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.probate-doc-summary-heirs-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--p-accent);
  margin-bottom: 5px;
}
.probate-doc-summary-heirs-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.probate-doc-summary-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--p-text-dim);
  margin: 0 0 10px;
}
.probate-doc-summary-panel .probate-dl {
  margin-bottom: 10px;
}
.probate-doc-summary-panel .probate-fine-print {
  display: block;
  margin-bottom: 10px;
}

.probate-card {
  background: var(--p-bg-panel);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 20px;
}
.probate-card h2 {
  font-family: var(--p-font-display);
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 14px;
}
.probate-card h3 {
  font-size: 12.5px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--p-text-dim);
}

.probate-dl {
  display: grid;
  gap: 8px;
}
.probate-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.probate-dl dt {
  color: var(--p-text-muted);
  flex-shrink: 0;
}
.probate-dl dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  /* Flex items default to min-width:auto, which refuses to shrink below
     the text's intrinsic (unwrapped) width — long decedent/attorney/PR
     names were forcing this row, and the whole page, wider than the
     viewport on mobile. min-width:0 + wrapping fixes it. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.probate-flag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.probate-flag {
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 10px 12px;
}
.probate-flag-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--p-text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.probate-flag-value {
  font-size: 13px;
  font-weight: 700;
}
.probate-flag-value.tone-success { color: var(--p-success); }
.probate-flag-value.tone-danger { color: var(--p-danger); }
.probate-flag-value.tone-warning { color: var(--p-warning-fg); }
.probate-flag-value.tone-neutral { color: var(--p-text); }

/* Round 8 (Ivy's brief, Part 9) — Status flags, full width. Mirrors
   .probate-dd-merged-card's `margin-bottom: 16px` precedent for a card
   that's a plain full-width sibling BETWEEN two .probate-workspace-grid
   instances, not a grid item itself. */
.probate-status-flags-card {
  margin-bottom: 16px;
}

/* Probate / court cases — restored 2026-07-25 as a plain full-width
   sibling (same margin-bottom precedent as .probate-status-flags-card
   above it and .probate-dd-merged-card higher up) rather than back inside
   the two-column grid it used to share with the now-removed Decedent/Case
   status cards. */
.probate-cases-card {
  margin-bottom: 16px;
}

/* Zone 1 — the Letters-of-Administration "gate." Deliberately NOT a
   `.probate-flag` tile: this is the single most load-bearing fact on the
   page (the input to the authority-to-sell gate), so it gets its own
   headline row — larger value text, a tone-colored left accent, and a
   fixed disclaimer — rather than flattening into "one of six equal
   tiles." Tone modifier only ever touches the accent border color (never
   the shorthand), same pattern already established twice in this
   codebase (.probate-reg-card's top-border tone, .probate-legal-health-
   redflag's border) — not a new visual grammar. */
.probate-flag-gate {
  border-left: 4px solid var(--p-border-lit);
  padding: 4px 0 4px 14px;
  margin-bottom: 4px;
}
.probate-flag-gate.tone-success {
  border-left-color: var(--p-success);
}
.probate-flag-gate.tone-danger {
  border-left-color: var(--p-danger);
}
.probate-flag-gate-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--p-text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.probate-flag-gate-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--p-text);
}
.probate-flag-gate.tone-success .probate-flag-gate-value {
  color: var(--p-success);
}
.probate-flag-gate.tone-danger .probate-flag-gate-value {
  color: var(--p-danger);
}
.probate-flag-gate-note {
  font-size: 12px;
  color: var(--p-text-muted);
  margin-top: 4px;
}

/* Zone 2 — the other four flags (PR appointed / Homestead / Mortgage-lien /
   Foreclosure — Occupancy removed 2026-07-31, no writer anywhere, always
   read "Unknown"), one even row at full-container width.
   DESKTOP-ONLY modifier — .probate-flag-grid's own mobile-collapse rule
   below (@media max-width: 900px) is a single-class selector; a bare
   `.probate-flag-grid.probate-flag-grid-wide` override with no media
   guard of its own would out-specify that rule at ANY width (two classes
   beat one regardless of source order) and never collapse at 390px. Guard
   it in its own @media (min-width: 901px) block so at <=900px this simply
   doesn't apply and the existing collapse rule wins cleanly, same as every
   other grid on this tab. */
@media (min-width: 901px) {
  .probate-flag-grid.probate-flag-grid-wide {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* Case-detail zone — originally sat below the Status-flags card's own flag
   grid divider (Ivy's brief, Status flags Part B, 2026-07-28). Relocated to
   DocumentsTab.jsx's "Court Case Docket" section 2026-07-31 (Ivy's brief,
   court-docket-consolidation) — now sits directly under that section's own
   `<h3>`, which already carries `.probate-card h3`'s `margin: 16px 0 8px`
   (probate.css ~line 2291), so this needs no margin-top of its own anymore
   (a divider-relative 14px here would just double up on top of the h3's
   own bottom margin). No existing tone/token rule changed; additive only. */
.probate-case-detail-zone {
  margin-top: 0;
}
.probate-case-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.probate-case-detail-checklist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.probate-sub-list ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--p-text-dim);
  line-height: 1.7;
}

.probate-refresh-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.probate-case-block {
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.probate-case-block:last-child {
  margin-bottom: 0;
}
.probate-case-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 13px;
}
.probate-case-block-header strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Underwriting ─────────────────────────────────────────────────────── */

.probate-uw-result {
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
}
.probate-uw-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--p-border);
}
.probate-uw-row:last-of-type {
  border-bottom: none;
}
.probate-uw-row-dim {
  color: var(--p-text-muted);
  font-size: 12px;
}
.probate-uw-recommendation {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
}
.probate-uw-recommendation.tone-info {
  background: rgba(59, 130, 246, 0.12);
  color: var(--p-accent);
}
.probate-uw-recommendation.tone-success {
  background: rgba(29, 158, 117, 0.12);
  color: var(--p-success);
}

.probate-offer-locked {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--p-bg);
  border: 1px dashed var(--p-border-lit);
  border-radius: 10px;
  padding: 14px;
}
.probate-offer-locked-icon {
  font-size: 20px;
}
.probate-offer-locked-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}
.probate-offer-locked p {
  font-size: 12px;
  color: var(--p-text-dim);
  line-height: 1.6;
  margin: 0;
}

.probate-underwriting-form h3 {
  margin-top: 0;
}
.probate-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--p-text-dim);
  margin-bottom: 10px;
}
.probate-field input {
  border: 1px solid var(--p-border-lit);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--p-font-body);
  background: var(--p-bg-panel);
  color: var(--p-text);
  font-weight: 500;
}
.probate-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.probate-comps {
  margin-bottom: 12px;
}
.probate-comps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-text-dim);
  margin-bottom: 8px;
}
.probate-comp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;
  gap: 6px;
  margin-bottom: 6px;
}
.probate-comp-row input {
  border: 1px solid var(--p-border-lit);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 12px;
  background: var(--p-bg-panel);
  color: var(--p-text);
  min-width: 0;
}
.probate-comp-remove {
  background: none;
  border: 1px solid var(--p-border-lit);
  border-radius: 6px;
  color: var(--p-danger);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
}
.probate-comp-remove:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* ── Clerk batch-pull panel (Leads list) ─────────────────────────────────
   probate/clerk_batch_runner.py's control + progress surface (Kevin,
   2026-07-23). Reuses .probate-card / .probate-clerk-capture-bar /
   .probate-gated-notice / .probate-poll-dot verbatim where the shape
   matches — only what's genuinely new to this surface (the toggle dot,
   the progress bar, the stat row) gets its own rules here. This is a NEW
   design surface Ivy hasn't specced — flagged in the build report for her
   review, not treated as a finished, novel layout of its own. */

/* `.probate-btn-batch-toggle` (the old standalone toggle button's own
   flex/gap rule) is gone — that button was replaced by the Tasks menu's
   Clerk Pull item (LeadListToolbar.jsx's `.probate-menu-item`/
   `.probate-popover-trigger`, both already flex) in the 2026-07-24 top-bar
   restructure. The dot classes below are still very much in use — the
   Tasks trigger and the Clerk Pull menu item both render one. */
.probate-batch-toggle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.probate-batch-toggle-dot-info {
  background: var(--p-accent);
}
.probate-batch-toggle-dot-warning {
  background: var(--p-warning);
}
.probate-batch-toggle-dot-success {
  background: var(--p-success);
}
.probate-batch-toggle-dot-danger {
  background: var(--p-danger);
}
.probate-batch-toggle-dot-neutral {
  background: var(--p-muted);
}

.probate-batch-panel {
  margin-bottom: 20px;
}
.probate-batch-panel .probate-clerk-capture-bar {
  margin-top: 4px;
}

.probate-batch-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.probate-batch-controls .probate-fine-print {
  flex: 1 1 320px;
  margin: 0;
  line-height: 1.5;
}

.probate-batch-transient {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
}

.probate-batch-progress {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--p-border);
}
.probate-batch-current {
  font-size: 13px;
  margin-bottom: 10px;
}
.probate-batch-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  overflow: hidden;
  margin-bottom: 12px;
}
.probate-batch-progress-fill {
  height: 100%;
  background: var(--p-accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.probate-batch-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.probate-batch-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.probate-batch-stat-value {
  font-family: var(--p-font-display);
  font-size: 18px;
  font-weight: 800;
}
.probate-batch-stat-label {
  font-size: 11.5px;
  color: var(--p-text-muted);
}
.probate-batch-stat-danger .probate-batch-stat-value {
  color: var(--p-danger);
}

/* Tone modifiers for the stop-reason banner — reuses .probate-gated-notice
   verbatim (icon+title+body layout) but its base styling is hardcoded to
   the amber "attorney gate" palette, which is wrong for "done" (success)
   or "stopped, nothing to fix" (neutral). A dead session, a rate limit,
   and "queue exhausted" must never look alike (assignment §4) — this is
   the color half of that guarantee; the copy is the other half. */
.probate-batch-reason-warning {
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.3);
}
.probate-batch-reason-warning .probate-gated-notice-title {
  color: var(--p-warning-fg);
}
.probate-batch-reason-danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}
.probate-batch-reason-danger .probate-gated-notice-title {
  color: var(--p-danger);
}
.probate-batch-reason-success {
  background: rgba(29, 158, 117, 0.08);
  border-color: rgba(29, 158, 117, 0.3);
}
.probate-batch-reason-success .probate-gated-notice-title {
  color: var(--p-success);
}
.probate-batch-reason-neutral {
  background: var(--p-bg);
  border-color: var(--p-border-lit);
}
.probate-batch-reason-neutral .probate-gated-notice-title {
  color: var(--p-text);
}

/* Failed-pulls disclosure — sits right under the run stats so "N failed"
   and "which ones" read together. Reuses .probate-legal-health-details's
   marker/summary treatment verbatim (OverviewTab.jsx); only the row
   layout below is new to this surface. Calm, diagnostic tone (this is
   "so I know which ones to dig into," not an alarm) — folio + plain-text
   reason on a neutral card, no red chrome. */
.probate-batch-failures-details {
  margin-top: 14px;
}
.probate-batch-failures-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.probate-batch-failure-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
}
.probate-batch-failure-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.probate-batch-failure-folio {
  font-family: var(--p-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--p-text);
}
.probate-batch-failure-reason {
  font-size: 12px;
  color: var(--p-text-muted);
}
.probate-batch-failure-open {
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Failure-row `kind` tag — a diagnostic label riding alongside the plain-
   text reason, not a second alarm. Grey for the passive connection_lost
   case, amber for the three "the site/session pushed back" kinds, red
   reserved for the one genuinely unexpected kind. */
.probate-batch-failure-kind {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}
.probate-batch-failure-kind-amber {
  background: rgba(180, 83, 9, 0.12);
  color: var(--p-warning-fg);
}
.probate-batch-failure-kind-grey {
  background: rgba(148, 163, 184, 0.16);
  color: var(--p-text-muted);
}
.probate-batch-failure-kind-red {
  background: rgba(239, 68, 68, 0.12);
  color: var(--p-danger);
}

/* Paused (self-healing recovery) notice — a SUB-state of 'running', not a
   stop. Deliberately its own amber "recovering" treatment rather than
   reusing .probate-batch-reason-warning: that class is for a terminal
   stopped_reason banner (rate_limited/consecutive_failures AFTER backoff
   is exhausted), and the two must never look identical — one means "the
   runner gave up and needs you", the other means "the runner is handling
   it, hang tight". */
.probate-batch-paused-notice {
  background: rgba(180, 83, 9, 0.06);
  border-color: rgba(180, 83, 9, 0.25);
  margin-top: 14px;
}
.probate-batch-paused-notice .probate-gated-notice-title {
  color: var(--p-warning-fg);
}
.probate-batch-paused-countdown {
  font-variant-numeric: tabular-nums;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .probate-main {
    padding: 20px 16px 48px;
  }
  .probate-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .probate-flag-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .probate-regulatory-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .probate-dd-findings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .probate-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .probate-comp-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .probate-topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 10px;
  }
  .probate-nav-links {
    order: 3;
    flex-basis: 100%;
  }
  .probate-input {
    min-width: 0;
    flex: 1;
  }
  .probate-tabnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .probate-tabnav-tab {
    flex-shrink: 0;
    margin-right: 16px;
  }
  .probate-clerk-capture-bar {
    flex-direction: column;
    align-items: stretch;
  }
  /* .probate-clerk-capture-copy's `flex: 1 1 260px` basis is a WIDTH basis
     for the row layout above — once the bar switches to column direction
     here, that same basis reads as a 260px MIN-HEIGHT and leaves a big
     empty gap under two lines of text. Reset it for the stacked layout. */
  .probate-clerk-capture-copy {
    flex: 0 0 auto;
  }
  .probate-clerk-capture-bar .probate-btn {
    width: 100%;
  }
  .probate-clerk-refresh-row {
    flex-direction: column;
    align-items: stretch;
  }
  .probate-clerk-refresh-row .probate-btn {
    width: 100%;
  }
  .probate-clerk-refresh-controls {
    justify-content: space-between;
  }
  /* Window toggle text can run long ("Last 12 months · 14 in full
     history") at 390px — let it wrap onto a second line rather than
     overflow the card-header row or force a horizontal scroll. */
  .probate-window-toggle {
    white-space: normal;
    text-align: left;
  }
  /* Batch-pull panel at 390px — Start/Stop go full-width and the fine
     print drops below rather than fighting the button for a shared row;
     the stat row wraps to two columns rather than one long scroll. */
  .probate-batch-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .probate-batch-controls .probate-btn {
    width: 100%;
  }
  .probate-batch-stats {
    gap: 14px 24px;
  }
  /* Login card at 390px — full-bleed with the same 16px gutter as
     .probate-main above, so the form never forces horizontal scroll. */
  .probate-auth-screen {
    padding: 16px;
  }
  .probate-auth-card {
    padding: 22px 18px;
  }
}

/* ── Auth (login screen / logout chip) ───────────────────────────────── */
/* ProbateAuthGate + ProbateLoginScreen (src/probate/components/). Renders
   BEFORE <ProbateApp/> ever mounts, so it carries its own .probate-app
   class to pick up --p-* tokens + dark mode rather than depending on
   ProbateApp having mounted first. */

.probate-auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.probate-auth-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.probate-auth-loading-text {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-text-muted);
}

.probate-auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--p-bg-panel);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.probate-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.probate-auth-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-accent);
  font-weight: 700;
}
.probate-auth-title {
  font-family: var(--p-font-display);
  font-size: 20px;
  font-weight: 800;
  margin: 2px 0 0;
}
.probate-auth-body {
  font-size: 13px;
  color: var(--p-text-muted);
  line-height: 1.55;
  margin: 4px 0 20px;
}

.probate-auth-field {
  display: block;
  margin-bottom: 14px;
}
.probate-auth-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-text-muted);
  margin-bottom: 5px;
  font-weight: 600;
}
.probate-auth-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.probate-auth-error {
  margin-bottom: 14px;
}

.probate-auth-submit {
  width: 100%;
  margin-top: 4px;
}

.probate-auth-fine-print {
  margin: 16px 0 0;
  text-align: center;
}

.probate-logout-chip {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--p-bg-panel);
  border: 1px solid var(--p-border);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  font-size: 11px;
  color: var(--p-text-dim);
}
.probate-logout-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--p-accent);
  text-decoration: underline;
  cursor: pointer;
}
.probate-logout-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}
.probate-logout-btn:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}

/* ── Admin settings (LLM key + scoring weights, Kevin 2026-07-22) ──────── */

.probate-admin-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.probate-admin-ceiling-row {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}
.probate-admin-ceiling-row .probate-flag {
  flex: 1;
}
.probate-admin-source-note {
  font-size: 12.5px;
  color: var(--p-text-dim);
  line-height: 1.6;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 16px;
}
.probate-admin-key-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.probate-admin-clear-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.probate-admin-component {
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.probate-admin-component:last-of-type {
  margin-bottom: 0;
}
.probate-admin-component-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.probate-admin-component-head strong {
  font-size: 13px;
}
.probate-admin-component-desc {
  font-size: 12px;
  color: var(--p-text-dim);
  line-height: 1.55;
  margin: 0 0 12px;
}
.probate-admin-field-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--p-text-muted);
  text-transform: none;
  letter-spacing: normal;
}
.probate-admin-field-error {
  font-size: 11px;
  font-weight: 700;
  color: var(--p-danger);
}
.probate-admin-note-field {
  margin-top: 4px;
}
.probate-admin-confirm {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(180, 83, 9, 0.08);
  border: 1px solid rgba(180, 83, 9, 0.3);
  border-radius: var(--p-radius);
  padding: 14px 16px;
  margin-top: 10px;
}
.probate-admin-confirm-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.probate-admin-confirm-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--p-warning-fg);
  margin-bottom: 4px;
}
.probate-admin-confirm p {
  font-size: 12.5px;
  color: var(--p-text-dim);
  line-height: 1.55;
  margin: 0;
}
.probate-admin-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.probate-admin-saved-banner {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  background: rgba(29, 158, 117, 0.12);
  color: var(--p-success);
}
.probate-admin-recompute {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--p-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.probate-admin-recompute-copy {
  font-size: 12.5px;
  color: var(--p-text-dim);
  line-height: 1.6;
  margin: 0;
  max-width: 64ch;
}
.probate-admin-history {
  margin-top: 18px;
}