/* ============================================================
   CSS VARIABLES & RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary:         #1A6599;
  --primary-hover:   #14577F;
  --primary-light:   #E5F0F9;

  --bg:              #E6E3E1;   /* the light plum-grey the owner liked on the phone */
  --card:            #FFFFFF;
  --border:          #E2E8ED;   /* cool light border (was warm #C9C4BC) */
  --border-light:    #EDF1F4;
  --secondary:       #F1F4F7;
  --secondary-hover: #E6ECF1;

  --text:            #1A2B3C;
  --text-muted:      #556775;   /* slightly deeper for contrast */
  --text-light:      #6B7A89;   /* was #8898A8 — failed WCAG contrast on white */

  --danger:          #C02B35;
  --danger-bg:       #FEF0F0;
  --warning:         #B45309;
  --warning-bg:      #FEF3E2;

  --radius:          10px;      /* softer (was 8) */
  --radius-lg:       14px;      /* softer (was 12) */
  --shadow-sm:       0 1px 2px rgba(16,42,67,0.06), 0 1px 2px rgba(16,42,67,0.04);
  --shadow:          0 2px 8px rgba(16,42,67,0.08), 0 1px 3px rgba(16,42,67,0.04);
  --shadow-lg:       0 8px 28px rgba(16,42,67,0.10), 0 3px 8px rgba(16,42,67,0.06);
}

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.hidden { display: none !important; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 1000px;
}

/* ============================================================
   HEADER & NAV
   ============================================================ */
.app-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 24px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-symbol {
  font-size: 20px;
  line-height: 1;
}

.logo-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

.nav-item {
  background: none;
  border: none;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.nav-item:hover {
  color: var(--text);
  background: var(--secondary);
}

.nav-item.active {
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 600;
}

/* ============================================================
   SCREENS
   ============================================================ */
main { flex: 1; }

.screen { padding: 48px 0 80px; }

/* ============================================================
   HOME: HERO
   ============================================================ */
.hero {
  text-align: center;
  padding: 14px 0 8px;
  max-width: 640px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-block;
  background: #D6E0EB;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 18px;
}

.hero-kicker {
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto 12px;
}
.hero-body {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.75;
}

.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hero-cta .btn { min-width: 180px; }
.hero-disclaimer {
  font-size: 12px;
  color: var(--text-light);
}

/* ============================================================
   HOME: HOW IT WORKS
   ============================================================ */
.how-it-works { margin-bottom: 48px; }

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 32px;
}

.steps-grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.step {
  flex: 1;
  text-align: center;
  padding: 28px 20px;
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.step h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.step p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

.step-connector {
  width: 32px;
  flex-shrink: 0;
  height: 2px;
  background: var(--border);
  align-self: center;
  margin-top: -8px;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-head { margin-bottom: 28px; }

.page-head h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.page-head p {
  font-size: 15px;
  color: var(--text-muted);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 20px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-row.form-row--single { grid-template-columns: 1fr; }

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.form-label-note {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}

.required { color: var(--danger); }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14.5px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  appearance: auto;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 111, 164, 0.12);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions { padding-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--secondary-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--secondary);
  color: var(--text);
}

.btn-lg  { padding: 13px 28px; font-size: 16px; }
.btn-sm  { padding: 7px 14px;  font-size: 13.5px; }
.btn-xs  { padding: 4px 10px;  font-size: 12.5px; }

.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ============================================================
   INFO BANNER
   ============================================================ */
.info-banner {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 24px;
  line-height: 1.6;
}

.warning-banner {
  background: var(--warning-bg);
  border-left-color: var(--warning);
}

.callout-note {
  background: var(--primary-light);
  border: 1px solid #BDD9F0;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14px;
  font-style: italic;
  color: #1A4F72;
  line-height: 1.65;
  margin-top: 20px;
}

/* ============================================================
   HOME — DASHBOARD ROW (next action + attorney packet card)
   ============================================================ */
.home-dashboard-row {
  display: flex;
  gap: 18px;
  align-items: stretch;
  margin: 0 auto 22px;
  max-width: 760px;       /* prevents cards from stretching across full 1100px */
}

/* ---- Next Best Action card ---- */
.next-action-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin: 0;
  box-shadow: var(--shadow);
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.next-action-content { width: 100%; }

#next-action-btn { align-self: flex-start; }

.next-action-overline {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--primary);
  margin-bottom: 2px;
  line-height: 1.4;
}

.next-action-helper {
  font-size: 10.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: 5px;
}

.next-action-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin: 0 0 2px;
}

/* ---- Attorney Packet destination card (right side) ---- */
.home-quick-card {
  flex: 1 1 0;
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow);
}

.home-quick-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--primary);
}

.home-quick-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 2px;
}

.home-quick-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 8px;
  width: 100%;
}

.home-quick-card .btn { align-self: flex-start; }

/* Duplicate-attorney warning on Review & Pay — deliberately large + red (prevents paying for duplicate certified letters). */
#sr-dupe-banner {
  font-size: 1.1rem !important;
  line-height: 1.45;
  color: #c01722 !important;
  font-weight: 700;
  background: #fdeaea !important;
  border: 2px solid #e2a3a3 !important;
  border-radius: 12px;
  padding: 16px 18px !important;
  margin-bottom: 18px;
}
#sr-dupe-banner strong { color: #c01722 !important; }

.home-quick-secondary {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Mobile: stack dashboard cards + fix nav layout */
@media (max-width: 640px) {
  .home-dashboard-row {
    flex-direction: column;
    max-width: 100%;
  }
  .next-action-card { max-width: 100%; }

  /* Stack logo above nav so all tab names have room to wrap */
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding: 8px 16px 6px;
    gap: 4px;
  }
  .main-nav {
    width: 100%;
    justify-content: flex-start;
  }
  .nav-item {
    font-size: 12.5px;
    padding: 4px 9px;
  }
}

/* ============================================================
   HOME — YOUR CASE PROGRESS
   ============================================================ */
.progress-section {
  margin: 0 auto 28px;
  max-width: 760px;
}

.progress-section-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
}

.progress-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.progress-card {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px 13px;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s, background 0.18s;
  user-select: none;
}

.progress-card:hover {
  box-shadow: var(--shadow);
  border-color: #A8CCE8;
  background: #F7FBFF;
  transform: translateY(-2px);
}

.progress-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.progress-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.progress-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

.progress-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.progress-badge--not-started { background: #E3DFD9;              color: #5A554F; }
.progress-badge--in-progress  { background: var(--primary-light); color: var(--primary); }
.progress-badge--ready        { background: #E6F5EF;              color: #1A6242; }
.progress-badge--pending      { background: #FEF3E2;              color: #92400E; }

@media (max-width: 680px) {
  .progress-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .progress-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FINAL STEP CARD (Home page)
   ============================================================ */
.final-step-card {
  background: linear-gradient(135deg, #1A6599 0%, #155687 100%);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin: 32px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 6px 24px rgba(26,101,153,0.22), 0 2px 6px rgba(26,101,153,0.12);
}

.final-step-card-body { flex: 1; min-width: 0; }

.final-step-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.70);
  margin-bottom: 5px;
}

.final-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 5px;
  line-height: 1.3;
}

.final-step-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
}

.final-step-btn {
  background: white;
  color: var(--primary);
  border: none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  flex-shrink: 0;
  white-space: nowrap;
}
.final-step-btn:hover {
  background: var(--primary-light);
  color: var(--primary-hover);
}

/* "Final Step" eyebrow on the packet screen page-head */
.final-step-eyebrow-inline {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.filter-label { font-size: 13.5px; color: var(--text-muted); }

.filter-chip {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

/* ============================================================
   LAWYER CARDS
   ============================================================ */
.lawyers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.lawyer-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.lawyer-card:hover {
  box-shadow: var(--shadow);
  border-color: #C4D6E4;
}

.lawyer-card--selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26, 101, 153, 0.18);
}

.lawyer-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Selected-lawyers action bar */
.lawyer-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.lsb-count {
  font-size: 13.5px;
}
.lsb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lawyer-selection-bar .btn-primary {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}
.lawyer-selection-bar .btn-primary:hover {
  background: #EAF2FA;
}
.lawyer-selection-bar .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.lawyer-selection-bar .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

.lawyer-card-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.lawyer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lawyer-info { flex: 1; min-width: 0; }

.lawyer-name {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
}

.lawyer-firm {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.lawyer-area-tag {
  display: inline-block;
  background: var(--secondary);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lawyer-bio {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.lawyer-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.lawyer-location,
.lawyer-phone {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Full mailing address line (shown only when the roster has street+city+state+zip). */
.lawyer-mailing {
  font-size: 12.5px;
  color: var(--text);
  margin: 6px 0 10px;
  line-height: 1.45;
}
.lawyer-mailing-text { vertical-align: middle; }

/* "Mailing address ready" badge — shown only when a complete address is on file. */
.mailing-ready-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #1c6b3a;
  background: #e8f5ec;
  border: 1px solid #bfe3cb;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Red "Missing mailing address" badge on attorney cards (cannot be mail-selected). */
.mailing-missing-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #8a1c1c;
  background: #fbe9e7;
  border: 1px solid #f3c0bb;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
/* Best-fit ranking chips (internal scoring -> plain labels; never shows scoring math). */
.bestfit-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #5a4300;
  background: #fff6e0;
  border: 1px solid #f0dca0;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.bestfit-badge--top { color: #1d4ed8; background: #e8efff; border-color: #b9ccf5; }
/* Dim an attorney card that has no mailing address (disabled for mailing selection). */
.lawyer-card--no-address { opacity: 0.72; }
.lawyer-card--no-address .lawyer-checkbox { cursor: not-allowed; }
/* Attorneys-page summary: requested-vs-mail-ready shortfall notice. */
.lrs-mailgap { color: #8a4b00; font-weight: 600; }

/* Review & Pay: clickable attorney name that opens the read-only letter preview. */
.sr-lawyer-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sr-lawyer-link:hover { color: var(--primary-dark, var(--primary)); }
.sr-preview-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
  white-space: nowrap;
}
/* the per-attorney "Preview letter" hint is now a real button — reset its chrome to read as a subtle link */
.sr-preview-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--primary, #1D6FA4); text-decoration: underline; font-family: inherit;
}
.sr-preview-btn:hover { color: #14507a; }

/* Letter preview modal */
.lp-modal { max-width: 640px; width: 100%; }
.lp-atty-name { font-size: 16px; font-weight: 700; color: var(--text); }
.lp-atty-firm { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.lp-badges { margin-top: 8px; }
.lp-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 16px 0 6px;
}
.lp-address {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-alt, #f6f8fa);
  border: 1px solid var(--border, #e3e8ee);
  border-radius: 8px;
  padding: 10px 12px;
}
.lp-contact { font-size: 13px; }
.lp-row { display: flex; gap: 10px; padding: 3px 0; }
.lp-label { flex: 0 0 90px; color: var(--text-muted); }
.lp-val { color: var(--text); word-break: break-word; }
.lp-muted { color: var(--text-muted); font-size: 13px; }
.lp-letter {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-alt, #f6f8fa);
  border: 1px solid var(--border, #e3e8ee);
  border-radius: 8px;
  padding: 12px;
  max-height: 320px;
  overflow: auto;
  margin: 0;
}

.lawyer-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

/* ============================================================
   CONTACT LETTER
   ============================================================ */
/* Side-by-side above-the-fold layout for config + batch panel */
/* Letters screen = two columns: you write on the LEFT, the live letter draft stays visible on the RIGHT. */
.letter-workspace {
  display: flex;
  gap: 20px;
  align-items: flex-start;     /* top-align; the draft pane uses its own fixed height (below) */
  margin-bottom: 10px;
}
/* Compact Letters header so the intent/draft area reaches the first screen */
#screen-letter .page-head { margin-bottom: 12px; }
/* LEFT: recipients + contact info + situation + approach buttons (the writing area). */
.letter-workspace-left {
  flex: 0 0 500px;            /* form column width — divider sits near center; draft gets the rest */
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.letter-workspace-left .letter-config-card {
  margin-bottom: 0;
  max-width: none;
  height: auto;                /* size to its fields instead of a forced 560px block */
  display: flex;
  flex-direction: column;
}
/* The "describe your situation" box fills the space left after the fixed contact fields, so the
   left card matches the right card's height instead of growing off-screen. */
.letter-workspace-left .letter-config-card > .form-group {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}
.letter-workspace-left .letter-config-card > .form-group > textarea {
  flex: 0 0 auto;
  min-height: 200px;           /* roomier "describe your situation" box */
  resize: vertical;
  font-size: 15px;             /* match the right draft pane so the two panes read the same size */
}
/* RIGHT: the live letter draft — same width AND height as the left pane, so they match. */
.letter-workspace-right {
  flex: 1 1 auto;              /* takes the remaining width — the letter draft is now the biggest element */
  min-width: 300px;
  display: flex;
  flex-direction: column;
}
.letter-workspace-right .letter-draft-card {
  margin-bottom: 0;
  height: 600px;               /* taller so the full letter shows with less scrolling */
  display: flex;
  flex-direction: column;
}
/* The textarea (flex: 1) fills whatever height remains in the fixed-height card. */
.letter-workspace-right .version-textarea { min-height: 0; font-size: 15px; }  /* match the left writing pane */
#letter-batch-panel:empty { display: none; }
/* APPROACH SIDEBAR: thin right rail — intro blurb on top, approach buttons stacked vertically. */
.letter-approach-sidebar {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.letter-approach-intro {
  flex-direction: column;     /* icon above the text so the words use the full sidebar width */
  gap: 4px;
  margin-bottom: 0;
}
/* Scoped under the sidebar so these beat the later, equal-specificity .compare-intro / .compare-intro p rules. */
.letter-approach-sidebar .letter-approach-intro { align-items: stretch; }   /* override .compare-intro's flex-start so the text isn't squeezed */
.letter-approach-sidebar .letter-approach-intro p { font-size: 12.5px; width: 100%; }
.letter-approach-sidebar .letter-intent-row {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 0;
}
.letter-approach-sidebar .letter-intent-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 46px;          /* equal height so the buttons look uniform despite different label lengths */
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.25;
  border-radius: 10px;
}
/* Stack (cards, with the approach rail first) when too narrow for the multi-column split. */
@media (max-width: 860px) {
  .letter-workspace { flex-direction: column; gap: 10px; }
  .letter-workspace-left,
  .letter-workspace-right,
  .letter-approach-sidebar { flex: none; max-width: 100%; width: 100%; }
  .letter-approach-sidebar { order: -1; }
  .letter-approach-sidebar .letter-intent-row { flex-direction: row; flex-wrap: wrap; }
  .letter-approach-sidebar .letter-intent-btn { width: auto; text-align: center; }
}

/* ============================================================
   CERTIFIED LETTER CAMPAIGN BUILDER (prototype)
   ============================================================ */
.campaign-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}
.campaign-controls,
.campaign-quote {
  padding: 18px 20px;
  margin-bottom: 0;
}
.campaign-quote { position: sticky; top: 16px; }

.cmp-field { margin-bottom: 18px; }
.cmp-field:last-child { margin-bottom: 0; }
.cmp-field-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.cmp-field-top .form-label { margin-bottom: 0; }
.cmp-val {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.cmp-slider {
  width: 100%;
  accent-color: var(--primary);
  cursor: pointer;
  height: 22px;
}
.cmp-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
}

.cmp-pricing {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cmp-pricing-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cmp-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text);
  padding: 3px 0;
}
.cmp-price-row > span:first-child { color: var(--text-muted); }
.cmp-price-row > span:last-child  { font-weight: 600; }

/* Lawyers page: campaign demo-availability note */
.lawyer-campaign-note {
  font-size: 13px;
  color: #92400E;
  background: var(--warning-bg);
  border: 1px solid #F5CBA7;
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 14px;
}

.cmp-quote-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  padding: 5px 0;
}
.cmp-quote-row > span:first-child { color: var(--text-muted); }
.cmp-quote-divider {
  border-top: 1px solid var(--border);
  margin: 8px 0;
}
.cmp-quote-total {
  font-size: 17px;
  font-weight: 700;
}
.cmp-quote-total > span:first-child { color: var(--text); }
.cmp-quote-budget > span:last-child { font-weight: 600; }

.cmp-budget-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.cmp-budget-status--ok   { background: #DCFCE7; color: #15803D; border: 1px solid #86EFAC; }
.cmp-budget-status--over { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }

.cmp-disclaimer {
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  margin: 12px 0 0;
}
.cmp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

@media (max-width: 720px) {
  .campaign-layout { grid-template-columns: 1fr; }
  .campaign-quote { position: static; }
}

.letter-config-card {
  padding: 12px 16px;
  margin-bottom: 10px;
  max-width: 740px;
}
.letter-config-card .card-subtitle { margin-bottom: 8px; }
.letter-config-card .form-group { margin-bottom: 6px; }

/* Auto-filled letter recipients (replaces the old manual "Attorney's Name" field). */
.letter-recipients { margin: 0 0 12px; }
.letter-recipients:empty { display: none; margin: 0; }   /* no attorney selected -> collapse, move the rest up */
.letter-recipients-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #667085); margin-bottom: 2px; }
.letter-recipients-names { font-size: 15px; font-weight: 600; color: var(--text, #1a1a1a); }
.letter-recipients-names .lr-firm { font-weight: 400; color: var(--muted, #667085); }
.letter-recipients-empty { font-size: 13px; color: var(--muted, #667085); margin: 0; }
.letter-config-card .form-row   { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }

.letter-batch-mode-note {
  font-size: 13px;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid #BFDBFE;
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 4px;
}

/* Batch outreach summary panel on Letters page */
.letter-batch-panel {
  background: var(--primary-light);
  border: 1px solid #BFDBFE;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 0;
}
.lbp-names {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 4px 0 10px;
}

/* Compact header above the four editable letter versions */
.letter-versions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 12px;
}
.letter-versions-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* Contact choice modal */
.contact-choice-modal { max-width: 420px; }
.contact-choice-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}
.contact-choice-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-choice-options .btn { width: 100%; }
.contact-choice-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  margin: 14px 0 0;
}
.cc-confirm-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 12px;
}
.cc-confirm-details {
  background: var(--secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.cc-detail-name { font-size: 15px; font-weight: 700; color: var(--text); }
.cc-detail-line { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.cc-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* "What happened?" result options */
.outreach-result-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.outreach-result-btn { width: 100%; justify-content: flex-start; }

/* Follow-up reminder options */
.followup-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.followup-custom {
  display: flex;
  gap: 8px;
  align-items: center;
}
.followup-custom .form-input { flex: 1; }

/* Saved campaign summary record */
.campaign-summary-card {
  background: var(--primary-light);
  border: 1px solid #BFDBFE;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.cs-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 10px;
}
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 18px;
  margin-bottom: 8px;
}
.cs-item { display: flex; flex-direction: column; gap: 1px; }
.cs-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.cs-value { font-size: 14px; font-weight: 600; color: var(--text); }
.cs-lawyers { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.cs-status {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Campaign Send Review (prototype) */
.sr-card { padding: 18px 20px; }
.sr-section { margin-bottom: 18px; }
.sr-section:last-of-type { margin-bottom: 8px; }
.sr-section .card-subtitle { margin-bottom: 8px; }
.sr-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  padding: 4px 0;
}
.sr-row > span:first-child { color: var(--text-muted); }
.sr-row--total { font-size: 17px; font-weight: 700; }
.sr-row--total > span:first-child { color: var(--text); }
.sr-checkout {
  border-top: 2px solid var(--border, #e2e8f0);
  margin-top: 14px;
  padding-top: 14px;
}
.btn-block { display: block; width: 100%; margin: 10px 0 6px; }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Checkout details form */
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 8px; }
.checkout-field { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 4px; }
.checkout-field--wide { grid-column: 1 / -1; }
.checkout-field .form-input { font-weight: 400; }
.checkout-pay-note {
  font-size: 13px; line-height: 1.5; margin: 8px 0 12px; padding: 10px 12px;
  background: #f8fafc; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
}
.sr-row--muted > span { color: var(--text-muted, #64748b); font-size: 13px; }
.sr-mail-status--submitted { color: #166534; font-weight: 700; }
@media (max-width: 560px) { .checkout-grid { grid-template-columns: 1fr; } }

/* Order confirmation */
.order-confirm-head { text-align: center; margin: 8px 0 18px; }
.order-confirm-check {
  width: 56px; height: 56px; line-height: 56px; margin: 0 auto 10px;
  border-radius: 50%; background: #dcfce7; color: #166534;
  font-size: 30px; font-weight: 700;
}
.oc-card { padding: 22px 24px; }
.oc-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.oc-row > span:first-child { color: var(--text-muted, #64748b); }
.oc-row--total { font-size: 17px; font-weight: 700; }
.oc-row--total > span:first-child { color: var(--text); }
.oc-status { color: #166534; font-weight: 600; }
.oc-section-title {
  margin: 16px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted, #64748b);
}
.oc-return { font-size: 14px; line-height: 1.5; }

/* Home "Contact attorneys" funnel panel — professional search card */
.start-campaign {
  margin: 8px auto 36px; max-width: 820px; padding: 28px 30px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.sc-head { margin-bottom: 20px; }
.sc-eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;
  font-weight: 700; color: var(--accent, #2563eb); margin-bottom: 6px;
}
.sc-title { margin: 0 0 6px; font-size: 23px; line-height: 1.25; }
.sc-sub { margin: 0; color: var(--text-muted, #64748b); font-size: 14px; line-height: 1.5; }
.sc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 18px;
}
.sc-field { display: flex; flex-direction: column; }
.sc-field--wide { grid-column: 1 / -1; }
.sc-field .form-label { margin-bottom: 5px; font-weight: 600; }
.sc-field .form-input, .sc-field .form-select { width: 100%; }
.sc-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--border, #e2e8f0); padding-top: 18px;
}
.sc-actions .btn-lg { min-width: 220px; }
.sc-hint { color: var(--danger, #b91c1c); font-size: 13px; font-weight: 600; }
.sc-picked { color: #047857; font-size: 13px; font-weight: 500; }
.sc-flow-note { color: var(--text-muted, #64748b); font-size: 12px; }
.sc-disclaimer { margin: 14px 0 0; font-size: 12px; color: var(--text-muted, #64748b); line-height: 1.5; }
@media (max-width: 560px) {
  .start-campaign { padding: 22px 18px; margin: 0 auto 24px; }
  .sc-grid { grid-template-columns: 1fr; }
  .sc-actions .btn-lg { width: 100%; min-width: 0; }
}

/* Lawyer Results count + prototype label */
.lawyers-result-summary {
  margin: 4px 0 14px; font-size: 14px; color: var(--text, #0f172a);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lrs-proto {
  font-size: 12px; font-weight: 600; color: #92400e;
  background: #fef3c7; border: 1px solid #fde68a;
  border-radius: 999px; padding: 2px 10px;
}
.lrs-roster {
  font-size: 12px; font-weight: 600; color: #166534;
  background: #dcfce7; border: 1px solid #bbf7d0;
  border-radius: 999px; padding: 2px 10px;
}
.sample-data-banner {
  margin: 0 0 16px; padding: 12px 16px; font-size: 13px; line-height: 1.5;
  color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 8px;
}

/* Data-source status badge (Real Mode / Sample Mode) */
.data-mode-badge {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  border: 1px solid transparent;
}
.data-mode-badge .dm-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.data-mode-badge .dm-detail { font-weight: 400; opacity: 0.85; }
.data-mode-badge.dm-real   { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.data-mode-badge.dm-sample { color: #92400e; background: #fef3c7; border-color: #fde68a; }

/* No real roster blocker */
.no-roster-block {
  text-align: center; padding: 32px 24px; margin: 8px 0 16px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
}
.no-roster-block h3 { margin: 6px 0; }
.no-roster-block p { max-width: 560px; margin: 0 auto 12px; color: var(--text-muted, #64748b); line-height: 1.5; }
.no-roster-block .empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.no-roster-admin { font-size: 12px; }

/* Match-quality badges on attorney cards */
.mq { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.mq-confirmed { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; }
.mq-likely    { color: #1e40af; background: #dbeafe; border: 1px solid #bfdbfe; }
.mq-unknown   { color: #92400e; background: #fef3c7; border: 1px solid #fde68a; }
.mq-evidence { display: block; margin-top: 4px; font-size: 11px; color: #64748b; }
.mq-evidence-link { color: #2563eb; text-decoration: underline; }
.lawyer-card.mq-card--unknown { opacity: 0.92; }
.lawyer-card.mq-card--unknown .lawyer-avatar { filter: grayscale(0.3); }

/* Include-unknown approval control */
.lawyers-unknown-control {
  margin: 0 0 14px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
}
.lawyers-unknown-control label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.lawyers-unknown-hint { color: #92702a; font-size: 12px; }
.cmp-unknown-label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 13px; }
#cmp-unknown-control { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 14px; }

/* Attorneys page: clear empty state (never blank) */
.lawyers-empty-msg {
  padding: 28px 20px; text-align: center; line-height: 1.6;
  color: var(--text-muted, #64748b);
  background: #f8fafc; border: 1px dashed var(--border, #e2e8f0); border-radius: 12px;
}

/* Footer admin link (admin-only entry to Admin Import) */
.footer-admin { margin-top: 8px; font-size: 11px; }
.footer-admin a { color: var(--text-light, #94a3b8); text-decoration: none; }
.footer-admin a:hover { text-decoration: underline; }

/* Admin Import tool */
.nav-item--admin { color: var(--text-muted, #64748b); }
.admin-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #92400e; background: #fef3c7; border: 1px solid #fde68a;
  border-radius: 999px; padding: 2px 8px; vertical-align: middle; margin-left: 6px;
}
.rb-controls--admin { grid-template-columns: repeat(2, 1fr); }
.rb-admin-instructions {
  font-size: 13px; line-height: 1.5; margin-bottom: 12px; padding: 10px 14px;
  background: #f8fafc; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
}
.rb-admin-instructions ol { margin: 6px 0 0; padding-left: 20px; }
.rb-admin-instructions li { margin-bottom: 3px; }
.roster-import-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px; font-size: 13px;
  background: #f8fafc; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
}
.roster-import-label { font-weight: 600; }
.roster-import-help { font-size: 12px; }
.roster-import-status { flex-basis: 100%; font-size: 12px; color: var(--text-muted, #64748b); }
.roster-import-status.is-ok { color: #166534; }
.roster-import-status.is-error { color: #b91c1c; }

/* Roster Builder */
.rb-card { margin-bottom: 18px; }
.rb-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin-bottom: 12px; }
.rb-field { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 4px; }
.rb-field .form-input, .rb-field .form-select { font-weight: 400; }
.rb-textarea {
  width: 100%; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px; line-height: 1.45; padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px; resize: vertical;
}
.rb-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.rb-status { font-size: 13px; color: var(--text-muted, #64748b); }
.rb-status.is-ok { color: #166534; }
.rb-status.is-error { color: #b91c1c; }
.rb-hint { font-size: 13px; color: var(--text-muted, #64748b); margin: 0 0 10px; }
.rb-table-wrap { overflow-x: auto; }
.rb-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.rb-table th {
  text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border, #e2e8f0);
  color: var(--text-muted, #64748b); text-transform: capitalize; white-space: nowrap;
}
.rb-table td { padding: 4px 6px; border-bottom: 1px solid var(--border, #f1f5f9); }
.rb-table input, .rb-table select {
  width: 100%; min-width: 90px; font-size: 12px; padding: 4px 6px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 5px;
}
@media (max-width: 560px) { .rb-controls { grid-template-columns: 1fr; } }
.sr-lawyer-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sr-lawyer-item { font-size: 13.5px; color: var(--text); }
.sr-firm { color: var(--text-muted); }
.sr-lawyer-empty { font-size: 13px; color: var(--text-muted); font-style: italic; }
.sr-mail-status {
  font-size: 12px;
  font-weight: 700;
  color: #92400E;
  background: var(--warning-bg);
  border: 1px solid #F5CBA7;
  padding: 2px 10px;
  border-radius: 20px;
}
.sr-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Letters: compact intent choices + single editable draft */
.letter-intent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.letter-intent-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.letter-intent-btn:hover { border-color: #C4D6E4; color: var(--text); }
.letter-intent-btn--active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.letter-draft-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.letter-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.letter-draft-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
/* Header note inside the right letter card (replaces the old approach title; slightly smaller). */
.letter-draft-note {
  flex: 1;
  font-size: 12.5px;
  font-weight: 400;
  color: #475467;
  line-height: 1.4;
}
.letter-draft-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.lbp-header {
  margin-bottom: 8px;
}
.lbp-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
}
.lbp-list {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lbp-lawyer-item {
  font-size: 13px;
  color: var(--text);
  padding: 2px 0;
}
.lbp-firm {
  color: var(--text-muted);
  font-weight: 400;
}
.lbp-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.lbp-options--tracker {
  margin-top: -4px;
  padding-top: 8px;
  border-top: 1px solid #BFDBFE;
}

.lbp-disclaimer {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* Batch template draft (single shared template) */
#letter-batch-template {
  margin-top: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.lbt-header {
  margin-bottom: 12px;
}
.lbt-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}
.lbt-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.lbt-textarea {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px;
  line-height: 1.55;
}
.lbt-footer {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

/* Batch action footer */
#letter-batch-actions {
  margin-top: 24px;
  margin-bottom: 8px;
}
.lba-inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.lba-result {
  font-size: 13px;
  color: #1A5C2A;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-top: 8px;
}

.lba-disclaimer {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* Individual drafts section */
.lid-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
#letter-individual-drafts {
  margin-top: 24px;
}
.lid-draft {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.lid-draft-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.lid-draft-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.lid-draft-firm {
  font-size: 12.5px;
  color: var(--text-muted);
}
.lid-draft-footer {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.card-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.letter-card {
  padding: 0;
  overflow: hidden;
}

.letter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--secondary);
}

.letter-label-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.letter-actions-bar { display: flex; gap: 4px; }

.letter-textarea {
  width: 100%;
  min-height: 480px;
  padding: 28px;
  border: none;
  border-radius: 0;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
  background: var(--card);
  resize: vertical;
  outline: none;
}

/* ============================================================
   SCREEN FOOTER ACTIONS
   ============================================================ */
.screen-footer-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ============================================================
   TRACKER
   ============================================================ */
.tracker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tracker-toolbar-end {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tracker-count {
  font-size: 13.5px;
  color: var(--text-muted);
}

.empty-state {
  text-align: center;
  padding: 72px 24px;
  color: var(--text-muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  margin-bottom: 24px;
}

.empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.tracker-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
}

.tracker-table thead { background: var(--secondary); }

.tracker-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tracker-table td {
  padding: 11px 14px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.tracker-table tbody tr:last-child td { border-bottom: none; }
.tracker-table tbody tr:hover { background: #FAFBFC; }

/* Brief highlight when a row is updated (e.g., after recording an outreach result) */
.tracker-table tbody tr.tracker-row--highlight td { animation: trackerFlash 2.4s ease; }
@keyframes trackerFlash {
  0%   { background: #FDE68A; }
  100% { background: transparent; }
}

.td-name   { font-weight: 600; }
.td-firm   { color: var(--text-muted); }
.td-date   { color: var(--text-muted); white-space: nowrap; font-size: 13.5px; }
.td-notes  { color: var(--text-muted); max-width: 200px; font-size: 14px; }
.td-action-field {
  color: var(--text);
  font-size: 13px;
  white-space: normal;     /* allow wrapping to 2 lines instead of widening the table */
  max-width: 130px;
  line-height: 1.3;
}
.td-notes-count {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 8px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
.modal-notes-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}
.td-actions { display: flex; gap: 6px; white-space: nowrap; }

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-gray  { background: #E3DFD9; color: #5A554F; }
.status-amber { background: #FEF3E2; color: #92400E; }
.status-blue  { background: #E2EFF8; color: #1A5882; }
.status-teal  { background: #E6F5EF; color: #1A6242; }
.status-red   { background: var(--danger-bg); color: var(--danger); }
.status-green { background: #D4EDD8; color: #1D5226; }

/* ---- Tracker row: clean Attorney/Firm + Mail Status cells ---- */
.td-attorney { min-width: 150px; }
.tr-name { display: block; font-weight: 700; color: var(--text); }
.tr-firm { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 1px; }
.tr-sub  { display: block; color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.tr-track { display: inline-block; font-size: 11px; font-weight: 600; color: #1d4ed8; text-decoration: none; word-break: break-all; }
.tr-track:hover { text-decoration: underline; }
.tr-track--pending { color: var(--text-muted); font-weight: 500; }
.td-status { white-space: nowrap; }
/* TEST vs LIVE separation in the tracker: a small badge on test rows, a section divider, muted test rows. */
.tr-test-badge { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: #92400E;
  background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }
.tracker-section-divider td { background: #F8FAFC; color: var(--text-muted); font-weight: 700; font-size: 12px;
  letter-spacing: .3px; padding: 9px 14px; border-top: 2px solid var(--border, #E5E7EB); }
.tracker-row--test { opacity: .72; }
.tracker-row--test .tr-name { font-weight: 600; }
.th-actions { text-align: left; }
.td-actions { flex-wrap: wrap; }   /* never let the action buttons spill off-screen */

/* ---- Tracker summary chips ---- */
.tracker-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px; }
.tracker-summary.hidden { display: none; }
.tr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 12px; font-size: 12.5px; color: var(--text-muted);
}
.tr-chip strong { color: var(--text); font-size: 14px; }
.tr-chip--green strong { color: #1D5226; }
.tr-chip--teal  strong { color: #1A6242; }

/* ---- Review & Pay: mail-method (Regular vs Certified) selector ---- */
.mail-method-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.mail-method-opt {
  flex: 1 1 200px; text-align: left; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s, background .15s;
}
.mail-method-opt:hover { border-color: #A8CCE8; }
.mail-method-opt--active { border-color: var(--primary); background: var(--primary-light); }
.mail-method-opt .mm-title { font-weight: 700; font-size: 14.5px; color: var(--text); }
.mail-method-opt .mm-desc  { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }
.mail-method-note { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 0; font-style: italic; }

/* ---- Tracker Details modal ---- */
#tracker-details-overlay { box-sizing: border-box; }
.trd-card { max-width: 560px; width: 100%; max-height: 86vh; overflow: auto; }
.trd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.trd-name { margin: 0 0 6px; }
.trd-badge { margin: 0; }
.trd-section { border-top: 1px solid var(--border-light); padding: 11px 0; }
.trd-section:first-of-type { border-top: none; padding-top: 2px; }
.trd-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 7px; }
.trd-row { display: flex; gap: 10px; margin: 3px 0; font-size: 13.5px; }
.trd-row-k { min-width: 132px; color: var(--text-muted); flex-shrink: 0; }
.trd-row-v { color: var(--text); word-break: break-word; }
.trd-history { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.trd-history li { margin: 4px 0; }
.trd-muted { color: var(--text-muted); font-size: .92em; }
.trd-sim { border-top: 1px dashed var(--border-light); margin-top: 10px; padding-top: 8px; }
.trd-sim-label { margin-bottom: 6px; }
.trd-sim-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- Tracker responsive: stack each row as a card on small screens (scoped to the OUTREACH tracker
       table only, so the Documents table that shares .tracker-table is unaffected) ---- */
@media (max-width: 760px) {
  #tracker-table-wrap .tracker-table thead { display: none; }
  #tracker-table-wrap .tracker-table,
  #tracker-table-wrap .tracker-table tbody,
  #tracker-table-wrap .tracker-table tr,
  #tracker-table-wrap .tracker-table td { display: block; width: 100%; }
  #tracker-table-wrap .tracker-table tr {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 12px; background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden;
  }
  #tracker-table-wrap .tracker-table td {
    border-bottom: 1px solid var(--border-light); padding: 9px 14px; max-width: none;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  }
  #tracker-table-wrap .tracker-table tr td:last-child { border-bottom: none; }
  #tracker-table-wrap .tracker-table td::before {
    content: attr(data-label); font-weight: 700; font-size: 11px; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-muted); flex-shrink: 0;
  }
  #tracker-table-wrap .td-attorney { display: block; }
  #tracker-table-wrap .td-attorney::before { display: none; }
  #tracker-table-wrap .td-actions { flex-wrap: wrap; gap: 6px; }
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 35, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
}

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

.modal-header h3 {
  font-size: 17px;
  font-weight: 700;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.modal-close-btn:hover { background: var(--secondary); }

.modal-body { padding: 24px; }

.modal-duplicate-warning {
  margin: -12px 0 16px;
  padding: 9px 14px;
  background: var(--warning-bg);
  border: 1px solid #F5CBA7;
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--warning);
  line-height: 1.5;
}

.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* ---- Letter-during-search panel (GUI-only; flag-gated by window.LETTER_DURING_SEARCH_UI) ---- */
.lds-modal { max-width: 860px; }
.lds-status {
  margin: -6px 0 16px; padding: 9px 14px;
  background: var(--secondary); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: var(--radius);
  font-size: 13px; line-height: 1.5; color: var(--text);
}
.lds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lds-label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.lds-label:first-child { margin-top: 0; }
.lds-concern, .lds-name {
  width: 100%; box-sizing: border-box; font: inherit;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text);
}
.lds-concern { resize: vertical; min-height: 150px; line-height: 1.5; }
.lds-note { font-size: 12px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.5; }
.lds-preview-wrap { display: flex; flex-direction: column; min-width: 0; }
.lds-preview-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.lds-preview {
  flex: 1; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--secondary); color: var(--text);
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word;
  overflow-y: auto; max-height: 46vh; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 680px) { .lds-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 28px 0;
  margin-top: auto;
}

.footer-text {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto;
}

/* ============================================================
   COMPARE INTRO
   ============================================================ */
.compare-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--primary-light);
  border: 1px solid #BDD9F0;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}

.compare-intro-icon {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

.compare-intro p {
  font-size: 14px;
  color: #1A4F72;
  line-height: 1.6;
  font-style: italic;
}

/* ============================================================
   VERSIONS GRID
   ============================================================ */
.versions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

.version-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.version-card:hover { box-shadow: var(--shadow); }

.version-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 13px;
  background: var(--secondary);
  border-bottom: 1px solid var(--border-light);
}

.version-title-group { flex: 1; min-width: 0; }

.version-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.version-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.version-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.version-tag-personal     { background: #DCEEFB; color: #1A4F72; }
.version-tag-professional { background: #E6F5EF; color: #1A5C38; }
.version-tag-firm         { background: #FEF3E2; color: #92400E; }
.version-tag-brief        { background: #E3DFD9; color: #4A4A4A; }

.version-textarea {
  flex: 1;
  width: 100%;
  min-height: 340px;
  padding: 20px;
  border: none;
  border-radius: 0;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.7;
  color: #111;
  background: var(--card);
  resize: vertical;
  outline: none;
}

.version-textarea:focus {
  background: #FDFEFF;
  box-shadow: inset 0 0 0 2px rgba(29, 111, 164, 0.15);
}

.version-card-footer {
  display: flex;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--secondary);
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   CASE INTAKE
   ============================================================ */
.intake-q-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  transition: box-shadow 0.15s;
}

.intake-q-card:focus-within {
  box-shadow: var(--shadow);
  border-color: #C4D6E4;
}

.intake-q-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.intake-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.intake-q-text {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.intake-q-hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px 38px;
}

.intake-save-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 28px;
}

.intake-saved-msg {
  font-size: 14px;
  font-weight: 600;
  color: #1A6242;
}

/* ============================================================
   CASE PACKET
   ============================================================ */
.packet-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.packet-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.packet-meta {
  font-size: 12px;
  color: var(--text-light);
  text-align: right;
  margin-bottom: 2px;
}

/* Widen the Attorney Packet so it reads like a document, not a narrow card */
/* Compact header area for the Attorney Packet screen */
.packet-page-head { margin-bottom: 10px; }
.packet-page-head h2 {
  font-size: 1.4rem;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.packet-page-head h2 .final-step-eyebrow-inline {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: 10px;
}
.packet-page-head p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.packet-compact-note {
  font-size: 11.5px;
  padding: 6px 12px;
  margin: 8px 0;
}
#screen-casePacket .packet-toolbar { margin: 8px 0 12px; }

/* Skimmable case summary card at the top of the packet */
.packet-summary-card {
  background: var(--primary-light);
  border: 1px solid #BFDBFE;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.packet-summary-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 10px;
}
.psc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
  margin-bottom: 10px;
}
.psc-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.psc-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.psc-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.psc-harm {
  border-top: 1px solid #BFDBFE;
  padding-top: 10px;
}
.psc-harm-text {
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 2px 0 0;
}

/* Small clarifying helper text on packet summary sections */
.packet-helper {
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-light);
  margin-left: 6px;
}
.packet-section-helper {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* Compact Proof Summary card */
.packet-proof-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.ppf-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.ppf-row + .ppf-row { border-top: 1px solid var(--border-light); }
.ppf-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 150px;
}
.ppf-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ppf-chip {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--secondary);
  border: 1px solid var(--border-light);
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.ppf-chip--ready       { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
.ppf-chip--in-progress { background: #FEF3C7; color: #B45309; border-color: #FCD34D; }
.ppf-chip--needed      { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.ppf-empty {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-light);
}

.packet-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}

.packet-section--summary {
  background: var(--primary-light);
  border-color: #BDD9F0;
}

.packet-section--notice {
  background: var(--warning-bg);
  border-left: 3px solid var(--warning);
}

.packet-section--notice p {
  font-size: 15px;
  line-height: 1.65;
  color: #92400E;
}

.packet-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-light);
}

.packet-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.packet-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}

.packet-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.packet-field:last-child { margin-bottom: 0; }

.packet-field--block { display: block; margin-bottom: 0; }

.packet-field-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.packet-field-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.packet-raw-desc {
  margin-top: 8px;
  padding: 12px 16px;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.packet-summary-text {
  font-size: 15.5px;
  line-height: 1.75;
  color: #1A4F72;
  font-style: italic;
  margin: 0;
}

.packet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.packet-table thead { background: var(--secondary); }

.packet-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.packet-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: top;
}

.packet-table tbody tr:last-child td { border-bottom: none; }
.packet-table tbody tr:hover         { background: #FAFBFC; }

.packet-td-name  { font-weight: 600; }
.packet-td-date  { white-space: nowrap; color: var(--text-muted); font-size: 13.5px; }
.packet-td-notes { color: var(--text-muted); font-size: 14px; }

.pkt-ev-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pkt-ev-status--not-started    { background: #FDECEC; color: #C0392B; }
.pkt-ev-status--needed         { background: #FEE2E2; color: #B91C1C; }
.pkt-ev-status--in-progress    { background: #FEF3C7; color: #B45309; }
.pkt-ev-status--ready          { background: #DCFCE7; color: #15803D; }
.pkt-ev-status--not-applicable { background: #E3DFD9; color: #8A8480; }

.packet-steps {
  margin: 0;
  padding-left: 22px;
}
.packet-steps li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 7px;
}
.packet-steps li:last-child { margin-bottom: 0; }

.packet-empty-note {
  font-size: 14.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* ============================================================
   PRINT — Case Packet only
   ============================================================ */
@media print {
  .app-header,
  .app-footer,
  .packet-toolbar,
  .screen-footer-actions,
  .info-banner,
  .page-head p    { display: none !important; }

  .page-head h2   { font-size: 18pt; margin-bottom: 14px; }

  body            { background: white !important; }

  .screen         { display: none !important; }
  #screen-casePacket { display: block !important; padding: 16px 0 !important; }

  .container,
  .container-narrow { padding: 0 !important; max-width: none !important; }

  .packet-section {
    box-shadow: none !important;
    break-inside: avoid;
    margin-bottom: 10px !important;
  }

  .packet-table th,
  .packet-table td { font-size: 10pt !important; padding: 6px 8px !important; }
}

/* ============================================================
   TIMELINE BUILDER
   ============================================================ */
.tl-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tl-toolbar-end { margin-left: auto; }

.tl-ready-banner {
  background: #E6F5EF;
  border: 1px solid #A8D5B8;
  border-left: 3px solid #2A9D5C;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1A6242;
  margin-bottom: 16px;
}

.tl-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.tl-event-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}

.tl-event-card:hover { box-shadow: var(--shadow); }

.tl-event-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tl-event-date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 11px;
  border-radius: 20px;
}

.tl-event-actions { display: flex; gap: 4px; flex-shrink: 0; }

.tl-event-what {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 8px;
}

.tl-event-meta {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 4px;
}

.tl-meta-label { font-weight: 700; color: var(--text); }

/* Appendix section header */
.appendix-header {
  margin: 32px 0 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}

.appendix-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.appendix-header-text { flex: 1; min-width: 0; }

.appendix-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

.appendix-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.appendix-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Timeline note inside main packet */
.packet-tl-note {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  line-height: 1.55;
}

.packet-tl-count {
  color: var(--text-light);
  font-size: 13px;
}

/* Packet: Timeline of Events section */
.packet-tl-event {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.packet-tl-event:last-child { border-bottom: none; padding-bottom: 0; }

.packet-tl-date {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 7px;
}

.packet-tl-what {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 5px;
}

.packet-tl-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 3px;
}

/* Timeline Summary card inside main packet */
.packet-tl-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.packet-tl-summary-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.packet-tl-sum-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.packet-tl-sum-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.packet-tl-sum-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.tl-sum-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.tl-sum-status--ready    { background: #ECFDF5; color: #065F46; }
.tl-sum-status--progress { background: var(--primary-light); color: var(--primary); }

.packet-tl-preview {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 11px 14px;
}

.packet-tl-preview-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.packet-tl-preview-date {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 1px 8px;
  border-radius: 20px;
  margin-bottom: 5px;
}

.packet-tl-preview-what {
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
}

.packet-tl-appendix-note {
  font-size: 13.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

.packet-safe-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.packet-tl-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.packet-photo-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Photo type toggle in modal */
.photo-type-toggle {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
}

.photo-type-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 12px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.photo-type-btn:hover { background: var(--primary-light); }

.photo-type-btn--active {
  background: var(--primary);
  color: white;
}

.photo-type-btn--active:hover { background: var(--primary); }

.photo-type-btn-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.photo-type-btn-desc {
  display: block;
  font-size: 11px;
  opacity: 0.65;
  line-height: 1.3;
}

.photo-type-btn--active .photo-type-btn-desc { opacity: 0.82; }

/* Entry type badge in photo list */
.photo-type-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-right: 4px;
  vertical-align: middle;
}

.photo-type-tag--set { background: #E2EFF8; color: #1A6599; }
.photo-type-tag--key { background: #FEF3E2; color: #B45309; }

/* Damages Builder */
.damages-running-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  background: #E2EFF8;
  border: 1px solid #A5C8E2;
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 16px;
}

.damages-total-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary);
}

.damages-total-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

.damages-total-note {
  font-size: 12px;
  color: var(--text-muted);
}

.damages-amount-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 9px;
  border-radius: 20px;
  margin-right: 4px;
}

.damages-appendix-total {
  background: #E2EFF8;
  border: 1px solid #A5C8E2;
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--primary);
}

/* Communications Builder */
.comm-type-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: #F3E8FF;
  color: #6B21A8;
  margin-right: 4px;
  vertical-align: middle;
}

/* ============================================================
   EVIDENCE CHECKLIST
   ============================================================ */
.checklist-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  margin-bottom: 18px;
}

.ev-summary-counts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ev-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  min-width: 84px;
  flex: 1 1 auto;
  max-width: 140px;
}

.ev-summary-stat--ready      { background: #E6F5EF; }
.ev-summary-stat--progress   { background: var(--primary-light); }
.ev-summary-stat--notstarted { background: var(--secondary); border: 1px solid var(--border); }
.ev-summary-stat--na         { background: #E3DFD9; }

.ev-summary-num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 5px;
}

.ev-summary-stat--ready      .ev-summary-num { color: #1A6242; }
.ev-summary-stat--progress   .ev-summary-num { color: var(--primary); }
.ev-summary-stat--notstarted .ev-summary-num { color: var(--text-muted); }
.ev-summary-stat--na         .ev-summary-num { color: #6B7280; }

.ev-summary-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ============================================================
   TASKS SCREEN
   ============================================================ */
.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tasks-count-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================================
   TASKS SCREEN — STATS BAR + CARD POLISH
   ============================================================ */
.tasks-stats-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.tasks-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.tasks-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1;
}

.tasks-stat--pending .tasks-stat-num { color: #92400E; }
.tasks-stat--done    .tasks-stat-num { color: #16A34A; }

.tasks-stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.tasks-stat-sep {
  font-size: 10px;
  color: var(--border);
  padding: 0 2px;
}

/* Task metadata grid */
.task-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0 8px;
  padding: 7px 10px;
  background: var(--secondary);
  border-radius: var(--radius);
}
.task-meta-grid:empty { display: none; }

.task-meta-row {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}

.task-meta-label {
  flex-shrink: 0;
  width: 100px;
  color: var(--text-muted);
  font-weight: 600;
}

.task-meta-value {
  color: var(--text);
  word-break: break-word;
}

.tasks-empty-state {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
}

.tasks-empty-icon {
  font-size: 36px;
  color: var(--border);
  margin-bottom: 12px;
  line-height: 1;
}

.tasks-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.tasks-empty-body {
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

/* Task cards */
.task-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 8px;
  border-left: 4px solid var(--primary);
}

.task-card--done {
  border-left-color: #B0BEC5;
  opacity: 0.78;
}

.task-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.task-card-badges {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.task-type-badge {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}

.task-status-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}

.task-status--not-started { background: #FEF3E2; color: #92400E; }
.task-status--in-progress  { background: var(--primary-light); color: var(--primary); }
.task-status--completed    { background: #E6F5EF; color: #1A6242; }

.task-date {
  font-size: 12px;
  color: var(--text-light);
}

.tasks-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin: 4px 0 10px;
}
.tasks-group-label--done {
  color: var(--text-muted);
  margin-top: 22px;
}

.task-requested-by {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.task-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.35;
}

.task-title--done {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-completed-with {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================
   TASK BANNER (shown on related screens when a task is in progress)
   ============================================================ */
.task-banner {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* Compact card variant for document task banners */
.task-banner.task-banner--doc {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-left: 1px solid var(--border);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
  max-width: 520px;
  padding: 14px 16px 12px;
}
.tbd-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 5px;
}
.tbd-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.3;
}
.tbd-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 11px;
}
.tbd-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Document modal mode toggle (Single / Document Set) */
.doc-mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.doc-mode-btn {
  flex: 1;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--secondary);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.doc-mode-btn:first-child { border-right: 1px solid var(--border); }
.doc-mode-btn--active {
  background: var(--primary);
  color: #fff;
}
.doc-mode-btn:hover:not(.doc-mode-btn--active) {
  background: #ddeaf5;
  color: var(--text);
}

/* Document Set row in table */
.doc-set-count-badge {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  font-weight: 400;
}
.doc-set-type-cell {
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
}

/* Attorney-requested document clarity */
.doc-name-text { font-weight: 600; }
.doc-attorney-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid #BDD9F0;
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.doc-row--attorney { background: #F7FBFE; }
.doc-row--attorney td { border-left: 0; }
.doc-row--attorney .td-name { box-shadow: inset 3px 0 0 var(--primary); }

/* Modal hint when status is locked to Collected from a task */
.doc-modal-status-hint {
  font-size: 12.5px;
  color: #2D6A4F;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: var(--radius);
  padding: 7px 10px;
  margin-top: 2px;
}

.task-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.task-banner-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.task-banner-body {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}

.task-banner-details {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.task-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.task-banner-disclaimer {
  font-size: 11px;
  color: var(--text-light);
  font-style: italic;
  margin-top: 6px;
  padding-left: 26px;
}

/* Pending task chip in Attorney Portal topbar */
.ap-pending-tasks-chip {
  font-size: 11.5px;
  font-weight: 700;
  background: #FEF3E2;
  color: #92400E;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.task-details {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.55;
}

.task-source {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.task-disclaimer {
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 8px;
  line-height: 1.45;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.task-outreach-help {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.45;
  margin-top: 8px;
}
.task-due {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  margin-top: 2px;
}

/* ============================================================
   ATTORNEY PORTAL — ACTION MODAL BODY
   ============================================================ */
.ap-modal-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.ap-modal-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #16A34A;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ap-modal-task-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}

.ap-modal-note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   ATTORNEY PORTAL — TASK HISTORY PANEL
   ============================================================ */
.ap-task-history { border-right: none; }

.ap-th-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

.ap-th-all-done {
  font-size: 13px;
  font-weight: 600;
  color: #16A34A;
  margin-bottom: 6px;
}

.ap-th-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ap-th-stat {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.ap-th-stat--pending   { color: #92400E; }
.ap-th-stat--completed { color: #16A34A; }

.ap-th-divider {
  font-size: 10px;
  color: var(--border);
}

.ap-th-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
  margin: 10px 0 6px;
}

.ap-th-section-label:first-of-type { margin-top: 0; }

.ap-th-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.ap-th-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ap-th-row--done    { opacity: 0.72; }
.ap-th-row--pending { background: #F3F8FD; border-radius: 6px; padding: 5px 8px; }

.ap-th-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ap-th-dot--pending { background: #D97706; width: 10px; height: 10px; }
.ap-th-dot--done    { background: #16A34A; }

.ap-th-title-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 120px;
  gap: 2px;
}

.ap-th-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.ap-th-title--done { color: var(--text-muted); }

.ap-th-completed-with {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 400;
}

.ap-th-section-label--pending { color: #92400E; }

.ap-th-completed-controls {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.ap-th-type   { font-size: 10.5px; padding: 1px 7px; }
.ap-th-status { font-size: 10.5px; padding: 1px 7px; }

.ap-th-date {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
}

/* ============================================================
   ATTORNEY PORTAL — WORKFLOW STATUS
   ============================================================ */
.ap-workflow-card {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 14px 18px 12px;
  margin-bottom: 16px;
}

.ap-workflow-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ap-workflow-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.ap-workflow-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.ap-workflow-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.ap-workflow-select {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  cursor: pointer;
  outline: none;
}
.ap-workflow-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,111,164,0.10);
}

.ap-workflow-disclaimer {
  font-size: 11px;
  color: var(--text-light);
  font-style: italic;
  margin: 8px 0 0;
}

/* Workflow status color tokens — shared by badge + sidebar chip */
.ap-wf--new       { background: #E3DFD9; color: #5A554F; }
.ap-wf--review    { background: var(--primary-light); color: var(--primary); }
.ap-wf--waiting   { background: #FEF3E2; color: #92400E; }
.ap-wf--ready     { background: #E6F5EF; color: #1A6242; }
.ap-wf--scheduled { background: #D4EDD8; color: #1D5226; }
.ap-wf--closed    { background: var(--danger-bg); color: var(--danger); }

/* Sidebar workflow chip (left prospect list) */
.ap-client-wf-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 4px;
}

/* Inline workflow dropdown in topbar */
.ap-wf-inline {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ap-wf-inline-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  white-space: nowrap;
}

.ap-wf-inline-select {
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  outline: none;
  max-width: 160px;
}
.ap-wf-inline-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(29,111,164,0.10);
}

/* Expand/collapse toggle button inside cards */
.ap-expand-btn {
  margin-top: 6px;
  color: var(--text-muted);
}
.ap-expand-btn:hover { color: var(--primary); }

.form-error {
  font-size: 12.5px;
  color: var(--danger);
  margin-top: 8px;
}

.ap-details-optional {
  font-size: 11.5px;
  color: var(--text-light);
  font-weight: 400;
}

.ap-rcheck-footer {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.ap-rcheck-footer-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ap-rcheck-msg {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin-top: 4px;
  margin-bottom: 4px;
}

.ap-rcheck-helper {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

.ap-rcheck-date {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
}

/* "Create New Request" bar injected into the history panel */
.ap-cnr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--primary-light);
  border: 1px solid #BDD9F0;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 14px;
}

.ap-cnr-msg {
  font-size: 13px;
  color: #1A4F72;
  flex: 1;
  line-height: 1.4;
}

.ap-cnr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ap-cnr-cancel {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.ap-cnr-cancel:hover {
  color: var(--danger, #c0392b);
}

.ap-rcheck-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 12px 0 10px;
  padding: 10px 12px;
  background: var(--secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

.ap-rcheck-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ap-rcheck-badge {
  font-size: 10.5px;
  padding: 1px 7px;
  flex-shrink: 0;
}

.ap-rcheck-task-title {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.ap-rcheck-overflow {
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 4px 0 0;
}

/* Request-check modal: custom internal-scroll layout (sticky footer is now base) */
#ap-rcheck-backdrop .modal-body {
  padding: 0;
}
.ap-rcheck-intro {
  padding: 16px 24px 12px;
}
.ap-rcheck-scroll-area {
  max-height: calc(86vh - 220px);
  min-height: 60px;
  overflow-y: auto;
  padding: 0 24px 16px;
}

.task-confirm-msg {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 10px;
}

.task-confirm-task-name {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.ap-modal-future {
  font-size: 14.5px;
  color: var(--text);
  margin-bottom: 4px;
}

.ap-modal-disclaimer {
  font-size: 11.5px;
  color: var(--text-light);
  font-style: italic;
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  margin-top: 12px;
}

/* ============================================================
   NAV — ATTORNEY PORTAL SEPARATOR + BADGE
   ============================================================ */
.nav-separator {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
  align-self: center;
}

.nav-item--portal {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
  font-weight: 600;
}

.nav-item--portal:hover {
  background: #DBEAFE;
  color: #1D4ED8;
}

.nav-item--portal.active {
  background: #1E40AF;
  color: #fff;
  border-color: #1E40AF;
}

/* ============================================================
   ATTORNEY PORTAL SCREEN
   ============================================================ */
.ap-screen { padding: 32px 0 80px; }

.ap-screen-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Banner */
.ap-portal-banner {
  background: #1A3B5C;
  color: #fff;
  padding: 22px 28px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.ap-portal-badge {
  display: inline-block;
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.ap-banner-left h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}

.ap-banner-left p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.75);
}

.ap-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 4px;
}

.ap-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.82);
}

.ap-disclaimer {
  background: #FEF3E2;
  color: #92400E;
  font-size: 12.5px;
  font-weight: 500;
  padding: 10px 20px;
  border-left: 3px solid #B45309;
  margin-bottom: 0;
}

/* Two-column layout */
.ap-layout {
  display: flex;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  min-height: 580px;
}

/* Left sidebar */
.ap-sidebar {
  width: 268px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: #F8F7F5;
  display: flex;
  flex-direction: column;
}

.ap-sidebar-header {
  padding: 12px 16px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ap-count-badge {
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}

/* Demo-mode toggle row */
.ap-demo-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: #F8F7F5;
  flex-shrink: 0;
}
.ap-demo-toggle-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.ap-demo-toggle-btn {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 11px;
  border-radius: 10px;
  border: 1px solid;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.6;
}
.ap-demo-toggle-btn--on {
  background: #D4EDD4;
  color: #1A5C2A;
  border-color: #A8CFA8;
}
.ap-demo-toggle-btn--off {
  background: var(--secondary);
  color: var(--text-muted);
  border-color: var(--border);
}

/* Client rows */
.ap-client-row {
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.1s;
  border-left: 3px solid transparent;
}

.ap-client-row:hover { background: #EDECEA; }

.ap-client-row--active {
  background: #EBF5FB;
  border-left-color: var(--primary);
}

.ap-client-row--active .ap-client-name { color: var(--primary); }

.ap-client-row--current { background: #F0F7FF; }
.ap-client-row--current.ap-client-row--active { background: #EBF5FB; }

.ap-client-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.ap-client-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.ap-client-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.ap-client-loc { color: var(--text-light); }

.ap-client-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.ap-client-chips .ap-client-wf-chip { margin-top: 0; }
.ap-client-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--secondary);
  border: 1px solid var(--border-light);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.ap-client-count--none {
  font-style: italic;
  font-weight: 500;
}

.ap-client-tag {
  display: inline-block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 7px;
  border-radius: 20px;
}
.ap-client-tag--demo {
  color: var(--text-muted);
  background: var(--secondary);
}

/* Readiness globes */
.ap-globe {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ap-globe--green  { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.ap-globe--yellow { background: #D97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
.ap-globe--red    { background: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.ap-globe--lg     { width: 16px; height: 16px; }

/* Detail panel */
.ap-detail-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ap-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  color: var(--text-muted);
  flex: 1;
}

.ap-empty-icon {
  font-size: 38px;
  margin-bottom: 16px;
  opacity: 0.3;
}

/* Detail top bar */
.ap-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border-light);
}

.ap-detail-name-block {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ap-detail-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

.ap-detail-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}

.ap-topbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-readiness-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 20px;
  white-space: nowrap;
}

.ap-readiness-badge--green  { background: #DCFCE7; color: #166534; }
.ap-readiness-badge--yellow { background: #FEF9C3; color: #854D0E; }
.ap-readiness-badge--red    { background: #FEE2E2; color: #991B1B; }

/* Action bar */
.ap-action-bar {
  padding: 9px 20px;
  background: #F8F7F5;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-action-sep {
  display: inline-block;
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
  align-self: center;
  margin: 0 4px;
}

.ap-action-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.ap-action-group-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1;
}

.ap-action-group-btns {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* Detail grid */
.ap-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
}

.ap-detail-card {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}

.ap-detail-card:nth-child(2n) { border-right: none; }

.ap-detail-card--full {
  grid-column: span 2;
  border-right: none;
}

.ap-detail-card-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-detail-field {
  display: flex;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 12.5px;
  line-height: 1.5;
}

.ap-field-label {
  flex-shrink: 0;
  width: 130px;
  color: var(--text-muted);
  font-weight: 500;
}

.ap-field-value {
  color: var(--text);
  word-break: break-word;
  flex: 1;
}

.ap-detail-empty {
  font-size: 13px;
  color: var(--text-muted);
}

/* Evidence stat chips */
.ap-ev-counts {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ap-ev-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
}

.ap-ev-stat span {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}

.ap-ev-stat small {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ap-ev-stat--ready    span, .ap-ev-stat--ready    small { color: #16A34A; }
.ap-ev-stat--progress span, .ap-ev-stat--progress small { color: #D97706; }
.ap-ev-stat--waiting  span, .ap-ev-stat--waiting  small { color: #9CA3AF; }
.ap-ev-stat--na       span, .ap-ev-stat--na       small { color: #D1D5DB; }

.ap-ev-item-count {
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-light);
}

.ap-ev-helper {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-style: italic;
}

/* Evidence / doc row list */
.ap-ev-list { display: flex; flex-direction: column; gap: 6px; }

.ap-ev-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

.ap-ev-label  { flex: 1; color: var(--text); }
.ap-ev-status { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.ap-ev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ap-ev-dot--ready    { background: #16A34A; }
.ap-ev-dot--progress { background: #D97706; }
.ap-ev-dot--waiting  { background: #9CA3AF; }
.ap-ev-dot--na       { background: #E5E7EB; }

/* Document count chips */
.ap-doc-counts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }

.ap-doc-stat {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
}

.ap-doc-stat--ready     { background: #DCFCE7; color: #166534; }
.ap-doc-stat--collected { background: #DBEAFE; color: #1E40AF; }
.ap-doc-stat--needed    { background: #FEF9C3; color: #854D0E; }

/* Inline status chip in card title */
.ap-inline-status {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: none;
  letter-spacing: 0;
}

.ap-inline-status--ready    { background: #DCFCE7; color: #166534; }
.ap-inline-status--progress { background: #FEF9C3; color: #854D0E; }
.ap-inline-status--waiting  { background: #FEE2E2; color: #991B1B; }

/* Next action box */
.ap-next-action-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 14px;
  padding: 11px 14px;
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.ev-summary-stat--ready      .ev-summary-label { color: #1A6242; }
.ev-summary-stat--progress   .ev-summary-label { color: var(--primary); }
.ev-summary-stat--notstarted .ev-summary-label { color: var(--text-muted); }
.ev-summary-stat--na         .ev-summary-label { color: #6B7280; }

.ev-summary-helper {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}

.ev-next-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  color: var(--text);
}

.ev-next-label {
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.ev-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
}

.ev-count--green  { background: #E6F5EF; color: #1A6242; }
.ev-count--blue   { background: var(--primary-light); color: var(--primary); }
.ev-count--orange { background: #FEF3E2; color: #92400E; }
.ev-count--gray   { background: var(--secondary); color: var(--text-muted); border: 1px solid var(--border); }
.ev-count--muted  { background: #E3DFD9; color: #726D67; }

.checklist-list { width: 100%; }

/* ---- Shared 4-column grid: header row + every data row ---- */
.checklist-header-row,
.checklist-row {
  display: grid;
  grid-template-columns: 220px 150px 1fr 90px;
  gap: 0 10px;
  align-items: center;
  padding: 10px 20px;
}

/* ---- Column header ---- */
.checklist-header-row {
  padding-top: 7px;
  padding-bottom: 8px;
  background: var(--secondary);
  border-bottom: 2px solid var(--border);
}

.ch-col {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.ch-col--right { text-align: right; }

/* ---- Data rows ---- */
.checklist-row {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}

.checklist-row:hover { background: #FAFBFC; }
.checklist-row--last { border-bottom: none; }

/* ---- Col 1: label with inline dot ---- */
.cl-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.cl-label-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cl-label-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.cl-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

.cl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  transition: background 0.2s;
}

.cl-dot--gray   { background: #EF9A9A; }  /* not started — light red */
.cl-dot--orange { background: #DC2626; }  /* needed — red */
.cl-dot--blue   { background: #F59E0B; }  /* in progress — amber */
.cl-dot--green  { background: #16A34A; }  /* ready — bright green */
.cl-dot--muted  { background: #C9C4BC; }  /* not applicable — gray */

/* ---- Col 2: status dropdown — fills fixed 150px column ---- */
.cl-status {
  width: 100%;
  font-size: 13px;
  padding: 7px 8px;
}

/* ---- Col 3: notes input — fills 1fr ---- */
.cl-notes {
  width: 100%;
  font-size: 13px;
  padding: 7px 10px;
}

/* ---- Col 4: Edit button — fixed 90px, right-aligned ---- */
.cl-action {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.cl-edit-btn {
  width: 90px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Mobile: stack all four cells ---- */
@media (max-width: 580px) {
  .checklist-header-row { display: none; }

  .checklist-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label  action"
      "status status"
      "notes  notes";
    gap: 8px 10px;
    padding: 14px 16px;
  }

  .cl-label  { grid-area: label; }
  .cl-action { grid-area: action; width: auto; }
  .cl-status { grid-area: status; width: 100%; }
  .cl-notes  { grid-area: notes;  width: 100%; }
  .cl-edit-btn { width: auto; }
}

/* ============================================================
   APP TOAST — brief success / info notification
   ============================================================ */
.app-toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A6242;
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease;
  white-space: nowrap;
  pointer-events: none;
}
.app-toast--show { opacity: 1; }

/* ============================================================
   WORKSPACE TOOLS
   ============================================================ */
.workspace-tools-section {
  margin-top: 32px;
}

.workspace-tools-head {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.workspace-tools-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.workspace-tools-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}

.workspace-danger-card {
  border-left: 3px solid var(--warning);
}

.workspace-reset-card {
  border-left: 3px solid var(--danger);
}

/* ============================================================
   PRACTICE-AREA COVERAGE NOTICE (Attorneys page)
   ============================================================ */
.lawyers-coverage-notice {
  margin: 10px 0 6px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.lawyers-coverage-notice.cov-warn {
  color: #7a2e0e;
  background: #fff4e5;
  border: 1px solid #f1cfa6;
}
.lawyers-coverage-notice.cov-info {
  color: #234e52;
  background: #e6f6f6;
  border: 1px solid #bfe3e3;
}
.lawyers-coverage-notice .cov-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lawyers-coverage-notice .cov-expanding { font-size: 13px; font-style: italic; color: #555; }
/* Underfilled-results modal text + progress/result line. */
.underfill-text { font-size: 15px; line-height: 1.55; color: var(--text); }
.underfill-progress { margin-top: 12px; font-size: 14px; font-weight: 600; padding: 9px 12px; border-radius: var(--radius); }
.underfill-progress--progress { color: #1d4ed8; background: #e8efff; border: 1px solid #b9ccf5; }
.underfill-progress--info { color: #5a4300; background: #fff6e0; border: 1px solid #f0dca0; }
.underfill-progress--error { color: #8a1c1c; background: #fbe9e7; border: 1px solid #f3c0bb; }
.lawyers-unknown-control .cov-toggle { margin-right: 14px; font-size: 13px; }

/* ============================================================
   BACKUP & RESTORE
   ============================================================ */
.backup-card {
  margin-bottom: 18px;
}

.backup-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.backup-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 10px;
}

.backup-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 14px;
}

.backup-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.backup-import-status {
  margin-top: 14px;
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: var(--radius);
  line-height: 1.5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.backup-import-status--success {
  background: #E6F5EF;
  color: #1A6242;
  border: 1px solid #B8DEC8;
}

.backup-import-status--error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #F5B8BB;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .versions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hero h1      { font-size: 1.9rem; }
  .steps-grid   { flex-direction: column; gap: 12px; }
  .step-connector { display: none; }
  .form-row     { grid-template-columns: 1fr; }
  .lawyers-grid { grid-template-columns: 1fr; }
  .screen       { padding: 32px 0 60px; }
  .header-inner { padding: 6px 16px; }
  .nav-item     { padding: 5px 9px; font-size: 13px; }
}

@media (max-width: 480px) {
  .container    { padding: 0 16px; }
  .hero         { padding: 20px 0 12px; }
  .card         { padding: 20px; }
  .hero-cta     { flex-direction: column; align-items: stretch; }
  .screen-footer-actions { flex-direction: column; align-items: flex-start; }
  .version-card-footer   { flex-direction: column; align-items: stretch; }
  .nav-item     { font-size: 12px; padding: 4px 8px; }
}

/* Mail readiness (Review & Pay) — flag attorneys without a mailing address */
.sr-no-address {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #8a1c1c;
  background: #fbe9e7;
  border: 1px solid #f3c0bb;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.sr-mailing-readiness {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #7a2e0e;
  background: #fff4e5;
  border: 1px solid #f1cfa6;
  border-radius: 8px;
}