/**
 * FTA Broker Portal — Design System v2 "Precision"
 *
 * Self-contained component library for the external broker portal.
 * Extends FTA design tokens from global.css. Does NOT depend on quoteapp.css.
 *
 * Prefix: .bp-  (broker portal)
 * Aesthetic: Linear/Vercel "Precision" — bold, modern, not corporate
 * Typography: Inter everywhere, DM Serif Display for brand logo only
 * Responsive: Desktop-first, looks OK on tablet (768/1024px)
 */

/* ==========================================================================
   Portal Tokens — v2 Precision
   ========================================================================== */

:root {
  /* ── Layout ─────────────────────────────────────────────────────── */
  --bp-nav-height: 48px;
  --bp-max-width: 1200px;
  --bp-page-px: 32px;

  /* ── Typography ─────────────────────────────────────────────────── */
  --bp-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --bp-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  --bp-font-brand: 'DM Serif Display', Georgia, serif;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --bp-radius: 10px;
  --bp-radius-sm: 6px;
  --bp-radius-lg: 12px;
  --bp-radius-xl: 16px;
  --bp-radius-full: 9999px;

  /* ── Shadows (ring + elevation system) ──────────────────────────────
     Single-definition: the elevation scale now lives in global.css. These
     --bp-* names are kept (1000+ call sites) but alias the canonical tokens
     so there is one source of truth. --bp-shadow-pink stays local (brand). */
  --bp-ring: var(--shadow-ring);
  --bp-shadow-sm: var(--shadow-sm);
  --bp-shadow: var(--shadow);
  --bp-shadow-md: var(--shadow-md);
  --bp-shadow-lg: var(--shadow-lg);
  --bp-shadow-xl: var(--shadow-xl);
  --bp-shadow-pink: 0 2px 8px rgba(230, 0, 126, 0.25);

  /* ── Transitions (alias the canonical motion scale in global.css) ─── */
  --bp-ease: var(--ease-standard);
  --bp-transition: var(--transition-fast);
  --bp-transition-slow: var(--transition-slow);

  /* ── Surfaces (richer hierarchy — no flat white) ────────────────── */
  --bp-bg: #fafbfc;
  --bp-surface: #ffffff;
  --bp-surface-hover: #f6f8fa;
  --bp-surface-muted: #f0f2f5;
  --bp-surface-active: #e8ecf1;
  --bp-surface-elevated: #ffffff;

  /* ── Borders (subtle — prefer ring shadows on cards) ────────────── */
  --bp-border: #e0e4ea;
  --bp-border-light: #eef0f4;
  --bp-border-strong: #c9cfd8;

  /* ── Text (warm near-black, tighter hierarchy) ──────────────────── */
  --bp-text: #0a0d14;
  --bp-text-secondary: #3d4654;
  --bp-text-muted: #6b7280;
  --bp-text-quaternary: #9ca3af;
  --bp-text-placeholder: #c0c5ce;

  /* ── Accent (pink — used sparingly, CTAs only) ──────────────────── */
  --bp-accent: var(--fta-pink, #e6007e);
  --bp-accent-hover: var(--fta-pink-hover, #c40069);
  --bp-accent-subtle: rgba(230, 0, 126, 0.06);
  --bp-accent-muted: rgba(230, 0, 126, 0.12);

  /* ── Navy surfaces (for branded sections) ───────────────────────── */
  --bp-navy-50: #f0f2f7;
  --bp-navy-100: #dde2ef;
  --bp-navy-800: #0d1b3f;
  --bp-navy-900: var(--fta-navy, #0a192f);
}

/* Page background */
body.bp-body {
  background: var(--bp-bg);
  /* Global sticky-footer layout (feedback item 8) — the body is a full-height
     flex column and .bp-page grows to fill it, so the footer partial always
     pins to the page bottom and can never float up into the content on a
     short page. Applied globally → the footer is structurally "global so it
     can't break". The fixed nav / modals / Frankie panel are position:fixed,
     so they sit outside this flow and are unaffected. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.bp-body > .bp-page {
  flex: 1 0 auto;
}
body.bp-body > .bp-footer {
  flex-shrink: 0;
}

/* ==========================================================================
   Top Navigation
   ========================================================================== */

/* Fix #2: Impersonation banner — fixed positioning + z-index + layout offset.
   The banner starts display:none in HTML; JS sets display:block (inline style)
   when an FTA staff member is impersonating a broker. The banner must sit ABOVE
   the fixed nav (z-index:100), so we give it z-index:200 and a stable height
   token. The nav and page content are then shifted down by that height only when
   the banner is active, using :has() which is supported in all modern browsers.
   Falls back gracefully in older browsers (banner may overlap nav — acceptable). */
:root {
  --bp-impersonation-h: 43px;
}

#fta-impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bp-impersonation-h);
  z-index: 200;
  box-sizing: border-box;
  /* WP-11 — never let the banner's text spill past its fixed height onto the
     nav/hamburger below it. */
  overflow: hidden;
}

/* WP-11 — keep the impersonation banner to one compact line on mobile (the
   verbose "FTA staff … @ house" detail wrapped to 3 lines and covered the
   hamburger). !important overrides the inline font/padding. */
@media (max-width: 768px) {
  #fta-impersonation-banner {
    white-space: nowrap;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  #fta-impersonation-banner .imp-banner-detail { display: none; }
}

/* When the banner is visible, push the nav down below it. The painter in
   _head-broker.html adds `body.bp-impersonating` when it shows the banner —
   a stable class beats the fragile `:has([style*="block"])` inline-style sniff. */
body.bp-impersonating .bp-nav {
  top: var(--bp-impersonation-h);
}

/* Also push the mobile menu down so it starts below both banner and nav. */
body.bp-impersonating .bp-mobile-menu {
  top: calc(var(--bp-nav-height) + var(--bp-impersonation-h));
}

/* Push page content down by the combined banner + nav height. */
body.bp-impersonating .bp-page {
  padding-top: calc(var(--bp-impersonation-h) + var(--bp-nav-height) + 40px);
}

.bp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bp-nav-height);
  background: var(--bp-navy-900);
  display: flex;
  align-items: center;
  padding: 0 var(--bp-page-px);
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bp-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--bp-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  margin-right: 32px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.bp-nav-brand img {
  height: 28px;
}

.bp-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  /* Allow this flex item to shrink below its content width so the bell /
     CTAs / avatar on the right are never pushed off-screen (UAT 2 July:
     the bar clipped at standard laptop widths). */
  min-width: 0;
  overflow: hidden;
}

/* Mid-width laptops (between the 768px hamburger cutover and full desktop):
   tighten link padding and the brand gutter so seven items + bell + two CTAs
   + avatar fit without clipping. */
@media (max-width: 1280px) {
  .bp-nav-brand { margin-right: 16px; }
  .bp-nav-link { padding: 0 9px; }
  .bp-nav-right { gap: 6px; }
}

.bp-nav-link {
  /* Fix #3: Inactive colour raised from rgba(255,255,255,0.5) (~2.9:1) to
     rgba(255,255,255,0.72) (~4.6:1 on #0a192f) — WCAG AA for 13px bold text.
     min-height raised to 44px (--tap-min) with centered content. */
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  min-height: 44px;
  border-radius: var(--bp-radius-sm);
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 100ms ease;
  white-space: nowrap;
  position: relative;
}

.bp-nav-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.bp-nav-link.active {
  color: #fff;
  font-weight: 600;
}

.bp-nav-link.active::after {
  content: '';
  position: absolute;
  /* UAT round 3 — the underline sat at -13px, which dropped it ~11px below the
     48px nav bar (the link is 44px tall, vertically centred → ~2px gap). Pin it
     to the nav's bottom edge so it reads as a tab indicator, not a stray dash. */
  bottom: -2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--bp-accent);
  border-radius: 1px;
}

.bp-nav-link .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--bp-radius-full);
  background: var(--fta-pink);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  margin-left: 6px;
  line-height: 1;
}

.bp-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* P2-4: Notification bell (between links and nav-right) */
.bp-nav-bell {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: var(--space-xs, 4px);
}
.bp-nav-bell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bp-radius-full);
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  position: relative;
  transition: background var(--bp-transition);
}
.bp-nav-bell-btn:hover { background: rgba(255, 255, 255, 0.1); }
.bp-bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--fta-pink, #e6007e);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.bp-bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  /* Item R9 — widened from 320px so the condensed 2-3 line item layout has
     room to breathe (insured · product · record on one inline row). */
  width: 420px;
  max-width: calc(100vw - var(--space-xl));
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--bp-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 910;
  overflow: hidden;
}
.bp-bell-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}
.bp-bell-dropdown-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bp-text);
}
.bp-bell-mark-all {
  font-size: 0.75rem;
  color: var(--bp-primary, #2563eb);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}
.bp-bell-mark-all:hover { opacity: 0.8; }
.bp-bell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.bp-bell-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
}
.bp-bell-item {
  border-bottom: 1px solid #f1f5f9;
}
.bp-bell-item:last-child { border-bottom: none; }
.bp-bell-item--unread { background: #eff6ff; }
.bp-bell-item-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--bp-text);
  transition: background var(--bp-transition);
}
.bp-bell-item-link:hover { background: #f8fafc; }
.bp-bell-item--unread .bp-bell-item-link:hover { background: #dbeafe; }
/* Item R9 — condensed to ~2-3 lines per notification (was up to 6 stacked
   rows): line 1 = type + status, line 2 = insured · product · record,
   line 3 = relative time. Fields separated inline with "·" rather than
   each getting its own row. */
.bp-bell-item-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
}
.bp-bell-item-line2 {
  font-size: 0.75rem;
  color: var(--bp-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-bell-item-sep {
  color: var(--bp-text-muted);
}
.bp-bell-item-type {
  font-weight: 600;
  color: var(--bp-text);
}
.bp-bell-item-time {
  font-size: 0.6875rem;
  color: var(--bp-text-muted);
}
.bp-bell-item-status {
  font-weight: 600;
  color: var(--fta-pink, #e6007e);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.6875rem;
}

/* Profile dropdown trigger */
.bp-nav-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--bp-radius-sm);
  cursor: pointer;
  transition: background var(--bp-transition);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  background: none;
  font-size: 0.8125rem;
  font-weight: 500;
}

.bp-nav-profile:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bp-nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--bp-radius-full);
  background: var(--fta-pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Profile dropdown panel */
.bp-nav-dropdown {
  position: absolute;
  top: calc(var(--bp-nav-height) - 4px);
  right: var(--bp-page-px);
  width: 260px;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow-lg);
  padding: 8px;
  display: none;
  z-index: 110;
}

.bp-nav-dropdown.open {
  display: block;
}

.bp-nav-dropdown-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bp-border-light);
  margin-bottom: 4px;
}

.bp-nav-dropdown-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bp-text);
}

.bp-nav-dropdown-email {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 1px;
}

.bp-nav-dropdown-role {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--bp-radius-full);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 6px;
  background: var(--bp-surface-muted);
  color: var(--bp-text-secondary);
}

.bp-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--bp-radius-sm);
  font-size: 0.8125rem;
  color: var(--bp-text-secondary);
  text-decoration: none;
  transition: all var(--bp-transition);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.bp-nav-dropdown-item:hover {
  background: var(--bp-surface-muted);
  color: var(--bp-text);
}

.bp-nav-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.5;
}

.bp-nav-dropdown-divider {
  height: 1px;
  background: var(--bp-border-light);
  margin: 4px 0;
}

/* Mobile hamburger */
.bp-nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 6px;
  cursor: pointer;
  border-radius: var(--bp-radius-sm);
}

.bp-nav-hamburger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bp-nav-hamburger svg {
  width: 22px;
  height: 22px;
}

/* Mobile menu overlay */
.bp-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--bp-nav-height);
  background: var(--fta-navy);
  z-index: 99;
  padding: 16px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.bp-mobile-menu.open {
  display: flex;
}

.bp-mobile-menu .bp-nav-link {
  padding: 12px 16px;
  font-size: 0.9375rem;
  /* WP-11 — guarantee a 44px tap target on every menu row. */
  min-height: var(--tap-min, 44px);
  display: flex;
  align-items: center;
}

/* WP-11 — roomier tap targets on the in-form helper controls. The in-input
   "Look up"/"Help me" pills sit inside a ~38px field so can't reach the full
   44px, but get a comfortable hit area; the ABN manual-entry summary does. */
.bp-input-overlay-btn { min-height: 30px; }
.bp-manual-name-summary {
  min-height: var(--tap-min, 44px);
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .bp-nav-links { display: none; }
  .bp-nav-hamburger { display: flex; }
}

/* ==========================================================================
   Page Layout
   ========================================================================== */

.bp-page {
  max-width: var(--bp-max-width);
  /* width:100% + min-width:0 — without these the flex-column body lets
     intrinsic table width (matrix/table proposal fields) propagate up and
     widen the whole page at 375px instead of scrolling inside the
     .bp-*-field-scroll wrappers. */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  margin: 0 auto;
  padding: calc(var(--bp-nav-height) + 40px) var(--bp-page-px) 64px;
}

/* Item 6c — the Messages page is a two-pane app surface (thread list +
   conversation) that needs more horizontal room than the default 1200px
   content column. The earlier 1480px cap still left a wide gutter on large
   external monitors (the conversation pane read as cramped); let this page use
   almost the full viewport (min() falls back to 100% on laptops) so it gets the
   width it needs. */
.bp-page--wide {
  max-width: min(1920px, 100%);
}

.bp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.bp-page-header-text {}

/* Groups the header action buttons with a consistent gap (the buttons were
   previously direct children of the space-between header → pushed apart). */
.bp-page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* WP-5 — two canonical broker heading roles:
 *  .bp-page-title   → functional sans titles (New Submission, Your Records,
 *                     Messages, Your Clients, Settings).
 *  .bp-entity-title → DM Serif Display for PROPER NOUNS — insured / company
 *                     names on the quote, policy, record and client pages.
 * Keeping the two distinct is the inferable rule the master review (A1) asked
 * for. .bp-entity-title is the single source of the serif face; page-specific
 * entity classes layer size/colour on top. */
.bp-page-title {
  font-family: var(--font-display, var(--bp-font-sans));
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bp-text);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.bp-entity-title {
  font-family: var(--font-heading);
  font-weight: 400;
}

.bp-page-subtitle {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  margin: 4px 0 0;
}

@media (max-width: 640px) {
  .bp-page { padding-left: 16px; padding-right: 16px; }
  .bp-page-header { flex-direction: column; }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.bp-card {
  background: var(--bp-surface);
  border: none;
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow);
  overflow: hidden;
  transition: box-shadow var(--bp-transition), transform var(--bp-transition);
}

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

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

.bp-card-title {
  font-family: var(--bp-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bp-text);
  margin: 0;
  letter-spacing: -0.01em;
}

.bp-card-body {
  padding: 20px;
}

.bp-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--bp-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ==========================================================================
   KPI Tiles
   ========================================================================== */

.bp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* Touch / tablet breakpoint normalised to 1023px (2026-05 responsive overhaul).
   Phone breakpoint at 640px below replaces the legacy 480px rule. The old
   1100/768/480 trio fragmented behaviour across iPad sizes; this aligns
   .bp-kpi-grid with .qa-kpi-grid and the platform-wide breakpoint table
   documented in DESIGN-SYSTEM-RULES.md. */
@media (max-width: 1023px) {
  .bp-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .bp-kpi-grid { grid-template-columns: 1fr; }
}

.bp-kpi {
  background: var(--bp-surface);
  border: none;
  border-radius: var(--bp-radius-lg);
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--bp-shadow);
  transition: box-shadow var(--bp-transition), transform var(--bp-transition);
}

.bp-kpi:hover {
  box-shadow: var(--bp-shadow-md);
  transform: translateY(-1px);
}

.bp-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.bp-kpi[data-accent="navy"]::before { background: var(--fta-navy); }
.bp-kpi[data-accent="blue"]::before { background: var(--status-info); }
.bp-kpi[data-accent="green"]::before { background: var(--status-success); }
.bp-kpi[data-accent="pink"]::before { background: var(--fta-pink); }
.bp-kpi[data-accent="amber"]::before { background: var(--status-warning); }
.bp-kpi[data-accent="red"]::before { background: var(--status-error); }

.bp-kpi-value {
  font-family: var(--bp-font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bp-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.bp-kpi-label {
  font-family: var(--bp-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 8px;
}

.bp-kpi-sub {
  font-family: var(--bp-font-sans);
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 4px;
}

.bp-kpi-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.bp-kpi-link:hover .bp-kpi-value { color: var(--fta-pink); }

.bp-kpi-trend {
  font-size: 0.6875rem;
  font-weight: 600;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bp-kpi-trend.up { color: var(--status-success); }
.bp-kpi-trend.down { color: var(--status-error); }
.bp-kpi-trend.flat { color: var(--bp-text-muted); }


/* ==========================================================================
   Data Table
   ========================================================================== */

.bp-table-wrap {
  background: var(--bp-surface);
  border: none;
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow);
  overflow: hidden;
}

.bp-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bp-border-light);
  gap: 12px;
}

.bp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
}

.bp-table th {
  text-align: left;
  padding: 8px 16px;
  font-family: var(--bp-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-text-muted);
  border-bottom: 1px solid var(--bp-border);
  background: var(--bp-surface-hover);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  user-select: none;
}

/* Clickable insured / client name → /broker/clients/:id (item 20).
   Inherits the surrounding text colour so it reads as a name, not a chrome
   link, until hovered — then a subtle underline + navy accent signals it's
   actionable. Pink on active for the brand touch. */
.bp-client-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.bp-client-link:hover {
  color: var(--fta-navy);
  border-bottom-color: currentColor;
}

.bp-client-link:active {
  color: var(--fta-pink);
}

.bp-table th.sortable {
  cursor: pointer;
}

.bp-table th.sortable:hover {
  color: var(--bp-text-secondary);
}

.bp-table th .sort-icon {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.3;
}

.bp-table th.sorted .sort-icon {
  opacity: 1;
}

.bp-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--bp-border-light);
  color: var(--bp-text-secondary);
  vertical-align: middle;
}

.bp-table tbody tr {
  transition: background 120ms ease;
}

.bp-table tbody tr:hover {
  background: var(--bp-surface-hover);
}

.bp-table tbody tr.clickable {
  cursor: pointer;
}

.bp-table tbody tr.clickable:hover {
  box-shadow: inset 3px 0 0 var(--bp-accent);
}

.bp-table tbody tr:last-child td {
  border-bottom: none;
}

/* Monospaced table cells (for quote refs, amounts) */
.bp-table td.mono {
  font-family: var(--bp-font-mono);
  font-size: 0.8125rem;
}

/* Right-aligned (for amounts) */
.bp-table th.right,
.bp-table td.right {
  text-align: right;
}

/* Pagination */
.bp-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--bp-border-light);
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
}

.bp-table-pagination-buttons {
  display: flex;
  gap: 4px;
}

/* Mobile: convert table to card list */
@media (max-width: 768px) {
  .bp-table-responsive thead { display: none; }
  .bp-table-responsive tbody tr {
    display: block;
    padding: 16px;
    border-bottom: 1px solid var(--bp-border-light);
  }
  .bp-table-responsive td {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border: none;
  }
  .bp-table-responsive td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bp-text-muted);
    text-transform: uppercase;
  }
}

/* WP-6 — visible keyboard focus ring on the interactive broker surfaces the
   review named (records rows, needs-attention cards, document links, chips),
   so tabbing through is never invisible. Pink ring matches the .bp-btn focus
   treatment. Chips use :focus-within because the toggle is the inner control. */
.bp-table tbody tr.clickable:focus-visible,
.bp-action-card:focus-visible,
.bp-bound-doc-link:focus-visible {
  outline: 2px solid var(--fta-pink);
  outline-offset: 2px;
  border-radius: var(--bp-radius-sm);
}
.bp-product-chip:focus-within,
.bp-limit-chip:focus-within {
  outline: 2px solid var(--fta-pink);
  outline-offset: 2px;
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.bp-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--bp-radius-sm);
  font-family: var(--bp-font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid;
}

/* Quote/submission statuses (with matching borders) */
.bp-status-draft      { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.bp-status-submitted  { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.bp-status-calculating { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.bp-status-under_review { background: #fefce8; color: #854d0e; border-color: #fef08a; }
.bp-status-quoted     { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.bp-status-referred   { background: #fefce8; color: #854d0e; border-color: #fef08a; }
.bp-status-binding    { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.bp-status-bound      { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.bp-status-declined   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.bp-status-expired    { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.bp-status-cancelled  { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
/* Phase 4 unified records list — renewal_due tone is amber to match the
   "Renewals Due" KPI tile accent. */
.bp-status-renewal    { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.bp-status-pending    { background: #fefce8; color: #854d0e; border-color: #fef08a; }
.bp-status-lapsed     { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* Policy statuses */
.bp-status-active     { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

/* Message/thread statuses */
.bp-status-open       { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.bp-status-resolved   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* Urgency (renewals) */
.bp-urgency-high      { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.bp-urgency-medium    { background: #fefce8; color: #854d0e; border-color: #fef08a; }
.bp-urgency-low       { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

/* Stream 7 §C6c (list view) — "Message from your underwriter" attention-getter.
   Sits under the insured name in the records table, one line, subtle enough
   not to compete with the Stage status pill in the next column but still
   noticeable (a pale pink chip + a hint of navy text). */
.bp-uw-note-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  max-width: 320px;
}
.bp-uw-note-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--bp-radius-full);
  background: var(--bp-accent-subtle, rgba(230, 0, 126, 0.06));
  color: var(--fta-pink, #e6007e);
  border: 1px solid var(--bp-accent-muted, rgba(230, 0, 126, 0.12));
  font-family: var(--bp-font-sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bp-uw-note-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fta-pink, #e6007e);
}
.bp-uw-note-text {
  font-size: 0.75rem;
  color: var(--fta-navy, #0a192f);
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--bp-transition);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  position: relative;
}

.bp-btn:active {
  transform: scale(0.97);
}

.bp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bp-bg), 0 0 0 4px var(--bp-accent);
}

.bp-btn:disabled,
.bp-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.bp-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Primary — FTA pink with colored shadow.
 * Radius tightened to 2px (overriding the 8px .bp-btn default) to match the
 * marketing site's sharp pink CTA. Secondary buttons keep 8px/6px so the
 * primary reads as "brand surface" — same logic the marketing site uses
 * (pink ~2px vs neutral ~6px). */
.bp-btn-primary {
  background: var(--bp-accent);
  color: #fff;
  border-color: transparent;
  border-radius: 2px;
  box-shadow: var(--bp-shadow-pink);
}

.bp-btn-primary:hover {
  background: var(--bp-accent-hover);
  box-shadow: 0 4px 12px rgba(230, 0, 126, 0.3);
  transform: translateY(-1px);
}

.bp-btn-primary:active {
  transform: scale(0.97) translateY(0);
}

/* Secondary — subtle border */
.bp-btn-secondary {
  background: var(--bp-surface);
  color: var(--bp-text-secondary);
  border-color: var(--bp-border);
  box-shadow: var(--bp-shadow-sm);
}

.bp-btn-secondary:hover {
  background: var(--bp-surface-hover);
  border-color: var(--bp-border-strong);
}

/* Ghost — no border */
.bp-btn-ghost {
  background: transparent;
  color: var(--bp-text-secondary);
  border-color: transparent;
}

.bp-btn-ghost:hover {
  background: var(--bp-surface-muted);
  color: var(--bp-text);
}

/* Success — green */
.bp-btn-success {
  background: var(--status-success);
  color: #fff;
  border-color: var(--status-success);
}

.bp-btn-success:hover {
  background: #15803d;
  border-color: #15803d;
}

/* Danger — red */
.bp-btn-danger {
  background: var(--status-error);
  color: #fff;
  border-color: var(--status-error);
}

.bp-btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Size variants */
.bp-btn-sm {
  padding: 4px 10px;
  font-size: 0.75rem;
}

.bp-btn-lg {
  padding: 10px 24px;
  font-size: 0.9375rem;
}

/* Icon-only button */
.bp-btn-icon {
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
}

/* Pink outline — brand-accent CTA without the solid pink fill. Used for the
 * UW card's "Ask Frankie" action (item 1) so it reads as a brand affordance
 * distinct from the neutral "Chat with me" / "Book a meeting" secondaries. */
.bp-btn-outline-pink {
  background: transparent;
  color: var(--bp-accent);
  border-color: var(--bp-accent);
  border-radius: 2px;
}
.bp-btn-outline-pink:hover {
  background: var(--bp-accent-subtle);
  border-color: var(--bp-accent-hover);
  color: var(--bp-accent-hover);
}

/* Item 9 — small "AI" pill flagging Frankie as an AI assistant (nav CTA). */
.bp-ai-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border-radius: var(--bp-radius-full);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: #fff;
  background: var(--fta-pink);
}
.bp-nav-cta--ai .bp-ai-badge { margin-left: 2px; }

/* ==========================================================================
   Form Elements
   ========================================================================== */

.bp-form-group {
  margin-bottom: 16px;
}

.bp-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bp-text);
  margin-bottom: 4px;
}

.bp-label .required {
  color: var(--status-error);
  margin-left: 2px;
}

.bp-label .optional {
  color: var(--bp-text-muted);
  font-weight: 400;
  font-size: 0.75rem;
  margin-left: 4px;
}

.bp-input,
.bp-select,
.bp-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  font-family: var(--bp-font-sans);
  font-size: 0.875rem;
  color: var(--bp-text);
  background: var(--bp-surface);
  box-sizing: border-box;
  transition: border-color var(--bp-transition), box-shadow var(--bp-transition);
}

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

.bp-input:focus,
.bp-select:focus,
.bp-textarea:focus {
  outline: none;
  border-color: var(--fta-pink);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1);
}

.bp-input.error,
.bp-select.error,
.bp-textarea.error {
  border-color: var(--status-error);
}

.bp-input.error:focus,
.bp-select.error:focus,
.bp-textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.bp-textarea {
  min-height: 80px;
  resize: vertical;
}

/* Native date inputs: keep the browser-native picker but align its chrome
   with .bp-input. color-scheme:light pins the field to the light palette
   (avoids dark-mode UA inversion), and a fixed line-height keeps a date
   field the same height as a plain text .bp-input sitting beside it in the
   form grid. The calendar glyph is tinted to the muted-text token and
   shifts to the brand accent on hover for affordance parity. Audit #2. */
.bp-input[type="date"] {
  color-scheme: light;
  line-height: 1.25;
  min-height: 38px;
}
.bp-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--bp-transition);
}
.bp-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.bp-input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.bp-form-hint {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 4px;
}

.bp-form-error {
  font-size: 0.75rem;
  color: var(--status-error);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Modal inline-error banner — margin moved from inline style (Stream 2b sweep). */
.bp-modal .bp-form-error {
  margin-bottom: 12px;
}

/* Search input with icon */
.bp-search {
  position: relative;
}

.bp-search .bp-input {
  padding-left: 36px;
}

.bp-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--bp-text-muted);
  pointer-events: none;
}

/* Token-backed wrapper for search input — replaces inline max-width + margin. */
.bp-search-wrap {
  max-width: 320px;
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   Filter Tabs
   ========================================================================== */

.bp-filter-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bp-border);
  margin-bottom: 20px;
  overflow-x: auto;
  /* overflow-x:auto computes overflow-y to auto, and the 1px bottom border
     then trips a spurious vertical scrollbar (scrollHeight > clientHeight).
     Pin the cross axis so only horizontal chip overflow can scroll. */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.bp-filter-tab {
  padding: 8px 16px;
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--bp-text-muted);
  cursor: pointer;
  transition: color 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  position: relative;
}

.bp-filter-tab:hover {
  color: var(--bp-text);
}

.bp-filter-tab.active {
  color: var(--bp-text);
  font-weight: 600;
}

.bp-filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bp-accent);
  border-radius: 1px;
}

.bp-filter-tab .count {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--bp-text-quaternary);
}

.bp-filter-tab.active .count {
  color: var(--bp-text-secondary);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.bp-empty-state {
  text-align: center;
  padding: 48px 24px;
}

.bp-empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--bp-text-placeholder);
}

.bp-empty-state-title {
  font-family: var(--bp-font-sans);
  font-size: 1.125rem;
  color: var(--bp-text);
  margin: 0 0 8px;
}

.bp-empty-state-text {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  max-width: 360px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

/* ==========================================================================
   Loading Skeletons
   ========================================================================== */

@keyframes bp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.bp-skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 200% 100%;
  animation: bp-shimmer 1.5s infinite ease-in-out;
  border-radius: var(--bp-radius-sm);
}

.bp-skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

.bp-skeleton-text:last-child {
  width: 60%;
}

.bp-skeleton-heading {
  height: 24px;
  width: 40%;
  margin-bottom: 12px;
}

.bp-skeleton-kpi {
  height: 80px;
}

.bp-skeleton-row {
  height: 48px;
  margin-bottom: 2px;
}

.bp-skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--bp-radius-full);
}

/* ==========================================================================
   Modal
   ========================================================================== */

.bp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  animation: bp-overlay-in 200ms ease;
}

@keyframes bp-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bp-modal-overlay.active {
  display: flex;
}

.bp-modal {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.bp-modal-header {
  padding: 20px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bp-modal-title {
  font-family: var(--bp-font-sans);
  font-size: 1.125rem;
  color: var(--bp-text);
  margin: 0;
}

.bp-modal-close {
  background: none;
  border: none;
  color: var(--bp-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--bp-radius-sm);
  transition: all var(--bp-transition);
  flex-shrink: 0;
}

.bp-modal-close:hover {
  background: var(--bp-surface-muted);
  color: var(--bp-text);
}

.bp-modal-close svg {
  width: 20px;
  height: 20px;
}

.bp-modal-body {
  padding: 16px 24px;
}

.bp-modal-footer {
  padding: 0 24px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.bp-modal-wide {
  max-width: 640px;
}

/* ==========================================================================
   Toast / Notifications
   ========================================================================== */

.bp-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.bp-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bp-navy-900);
  border: none;
  border-radius: 10px;
  box-shadow: var(--bp-shadow-xl);
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  color: #fff;
  min-width: 280px;
  max-width: 400px;
  pointer-events: auto;
  animation: bp-toast-up 250ms var(--bp-ease);
}

@keyframes bp-toast-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.bp-toast.leaving {
  animation: bp-toast-out 200ms ease forwards;
}

@keyframes bp-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

.bp-toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.bp-toast-success .bp-toast-icon { color: #4ade80; }
.bp-toast-error .bp-toast-icon { color: #f87171; }
.bp-toast-warning .bp-toast-icon { color: #fbbf24; }
.bp-toast-info .bp-toast-icon { color: #60a5fa; }

.bp-toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.bp-toast-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Field/Detail Grid (for detail views)
   ========================================================================== */

.bp-field {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bp-border-light);
  font-size: 0.875rem;
}

.bp-field:last-child {
  border-bottom: none;
}

.bp-field-label {
  color: var(--bp-text-muted);
  font-size: 0.8125rem;
}

.bp-field-value {
  color: var(--bp-text);
  font-weight: 500;
}

/* ==========================================================================
   Progress Steps (multi-step form)
   ========================================================================== */

.bp-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}

.bp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bp-text-muted);
}

.bp-step-number {
  width: 28px;
  height: 28px;
  border-radius: var(--bp-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid var(--bp-border);
  background: var(--bp-surface);
  color: var(--bp-text-muted);
  flex-shrink: 0;
}

.bp-step.active .bp-step-number {
  border-color: var(--fta-pink);
  background: var(--fta-pink);
  color: #fff;
}

.bp-step.active {
  color: var(--bp-text);
}

.bp-step.completed .bp-step-number {
  border-color: var(--status-success);
  background: var(--status-success);
  color: #fff;
}

.bp-step.completed {
  color: var(--status-success);
}

.bp-step-line {
  width: 40px;
  height: 2px;
  background: var(--bp-border);
  margin: 0 8px;
}

.bp-step.completed + .bp-step-line,
.bp-step-line.completed {
  background: var(--status-success);
}

@media (max-width: 480px) {
  .bp-step span:not(.bp-step-number) { display: none; }
  .bp-step-line { width: 24px; }
}

/* ==========================================================================
   File Upload
   ========================================================================== */

.bp-upload-area {
  /* display:block is load-bearing: this class is used on a <label> (step-3
     dropzone, wraps the file input) as well as <div>s. A label defaults to
     display:inline, which fragments the dashed border into broken boxes and
     lets the content overlap the heading above — set block so it's a proper
     box on every host element. */
  display: block;
  border: 2px dashed var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 32px;
  text-align: center;
  background: var(--bp-surface-muted);
  cursor: pointer;
  transition: all var(--bp-transition);
}

.bp-upload-area:hover,
.bp-upload-area.dragover {
  border-color: var(--fta-pink);
  background: #fdf2f8;
}

.bp-upload-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  color: var(--bp-text-muted);
}

.bp-upload-text {
  font-size: 0.875rem;
  color: var(--bp-text-secondary);
}

.bp-upload-text strong {
  color: var(--fta-pink);
  font-weight: 600;
}

.bp-upload-hint {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 4px;
}

.bp-file-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bp-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border-light);
  border-radius: var(--bp-radius-sm);
  font-size: 0.8125rem;
  gap: 12px;
}

.bp-file-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bp-text);
}

.bp-file-item-size {
  color: var(--bp-text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.bp-file-item-remove {
  color: var(--status-error);
  cursor: pointer;
  border: none;
  background: none;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--bp-radius-sm);
  transition: background var(--bp-transition);
}

.bp-file-item-remove:hover {
  background: #fee2e2;
}

/* Progress bar */
.bp-file-progress {
  height: 3px;
  background: var(--bp-surface-muted);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.bp-file-progress-bar {
  height: 100%;
  background: var(--fta-pink);
  transition: width 0.3s ease;
  border-radius: 2px;
}

/* ==========================================================================
   Messages / Chat — Layout
   ========================================================================== */

.bp-messages-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  overflow: hidden;
  /* Item 21 — fill the viewport below the nav + page header so the two panels
     scroll internally and the footer sits at the bottom instead of floating
     mid-page above a block of whitespace. Clamped so it stays usable on very
     short and very tall viewports. */
  height: clamp(440px, calc(100vh - 230px), 880px);
  min-height: 0;
}

.bp-thread-list-panel {
  border-right: 1px solid var(--bp-border);
  overflow-y: auto;
  min-height: 0;
}

.bp-conversation-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bp-conv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bp-border);
  background: var(--bp-surface);
}

.bp-conv-back {
  display: none;
}

.bp-conv-header-subject {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bp-text);
}

.bp-conv-header-meta {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
}

/* Item 6d — conversation context header linking back to the quote/policy. */
.bp-conv-context {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bp-border);
  background: var(--bp-accent-subtle);
  text-decoration: none;
  color: var(--bp-text);
}
.bp-conv-context:hover { background: var(--bp-accent-muted); }
.bp-conv-context-head {
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.bp-conv-context-open {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bp-accent);
}
.bp-conv-context-meta {
  font-size: 0.6875rem;
  color: var(--bp-text-muted);
}

.bp-conv-messages {
  flex: 1;
  /* min-height:0 is load-bearing: without it the flex default (min-height:
     auto) grows this pane to its content height, the fixed-height
     .bp-messages-layout clips the overflow, and the internal scrollbar never
     engages — the latest messages become unreachable and the JS
     scrollTop = scrollHeight no-ops. */
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item 6d — context header sits flush inside the drawer's conversation body. */
#bt-conv-context.bp-conv-context { border-radius: var(--bp-radius-sm); margin-bottom: 8px; }

@media (max-width: 768px) {
  .bp-messages-layout {
    grid-template-columns: 1fr;
    height: auto;        /* item 21 — stack naturally on mobile, no fixed vh */
    min-height: auto;
  }

  .bp-thread-list-panel {
    border-right: none;
    border-bottom: 1px solid var(--bp-border);
    max-height: none;
  }

  .bp-conversation-panel {
    min-height: 400px;
  }

  .bp-conv-back {
    display: flex;
  }

  /* Mobile: hide one panel at a time */
  .bp-messages-layout.show-conversation .bp-thread-list-panel {
    display: none;
  }

  .bp-messages-layout:not(.show-conversation) .bp-conversation-panel {
    display: none;
  }
}

/* ==========================================================================
   Messages / Chat — Components
   ========================================================================== */

.bp-thread-list {
  display: flex;
  flex-direction: column;
}

.bp-thread-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bp-border-light);
  cursor: pointer;
  transition: background var(--bp-transition);
}

.bp-thread-item:hover {
  background: var(--bp-surface-hover);
}

.bp-thread-item.active {
  background: #fdf2f8;
  border-left: 3px solid var(--fta-pink);
}

.bp-thread-item.unread {
  background: #eff6ff;
}

.bp-thread-context {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-text-muted);
  margin-bottom: 2px;
}

.bp-thread-subject {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bp-text);
  margin-bottom: 2px;
}

.bp-thread-preview {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-thread-time {
  font-size: 0.6875rem;
  color: var(--bp-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.bp-thread-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--bp-radius-full);
  background: var(--fta-pink);
  flex-shrink: 0;
  margin-top: 6px;
}

/* Message bubbles */
.bp-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.bp-message {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bp-message-sender {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bp-message-bubble {
  padding: 10px 14px;
  border-radius: var(--bp-radius);
  font-size: 0.875rem;
  line-height: 1.5;
}

.bp-message-time {
  font-size: 0.6875rem;
  color: var(--bp-text-muted);
}

/* Broker messages — right aligned */
.bp-message-broker {
  align-self: flex-end;
  align-items: flex-end;
}

.bp-message-broker .bp-message-bubble {
  /* WP-10 — lighter pink tint + ink text (solid full-saturation pink blocks
     hurt readability on long broker messages). */
  background: var(--bp-accent-subtle);
  color: var(--bp-text);
  border: 1px solid var(--bp-accent-muted);
  border-bottom-right-radius: 4px;
}

/* FTA messages — left aligned */
.bp-message-fta {
  align-self: flex-start;
}

.bp-message-fta .bp-message-bubble {
  background: var(--bp-surface-muted);
  color: var(--bp-text);
  border-bottom-left-radius: 4px;
}

/* Frankie (AI thread watcher) — an FTA-side reply that is visibly AI, not a
   human underwriter: brand-pink rule on the bubble, AI badge on the sender. */
.bp-message-frankie .bp-message-bubble {
  background: #fff;
  border: 1px solid #f5c1de;
  border-left: 3px solid var(--bp-accent, #e6007e);
}

/* System messages — centered */
.bp-message-system {
  align-self: center;
  max-width: 100%;
}

.bp-message-system .bp-message-bubble {
  background: transparent;
  color: var(--bp-text-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 6px 12px;
}

/* Compose bar */
.bp-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--bp-border);
  background: var(--bp-surface);
}

.bp-compose-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  font-family: var(--bp-font-sans);
  font-size: 0.875rem;
  resize: none;
  min-height: 38px;
  max-height: 120px;
}

.bp-compose-input:focus {
  outline: none;
  border-color: var(--fta-pink);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1);
}

/* ==========================================================================
   Renewals Urgency Cards
   ========================================================================== */

.bp-renewal-section {
  margin-bottom: 24px;
}

.bp-renewal-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.bp-renewal-section-header .dot {
  width: 10px;
  height: 10px;
  border-radius: var(--bp-radius-full);
  flex-shrink: 0;
}

.bp-renewal-section.urgent .dot { background: var(--status-error); }
.bp-renewal-section.warning .dot { background: var(--status-warning); }
.bp-renewal-section.upcoming .dot { background: var(--status-success); }

.bp-renewal-card {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  margin-bottom: 8px;
  box-shadow: var(--bp-shadow-sm);
  transition: box-shadow var(--bp-transition);
}

.bp-renewal-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

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

.bp-renewal-card-info {
  flex: 1;
  min-width: 0;
}

.bp-renewal-card-name {
  font-weight: 600;
  color: var(--bp-text);
  font-size: 0.875rem;
  margin-bottom: 2px;
}

.bp-renewal-card-meta {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bp-renewal-days {
  font-family: var(--bp-font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.bp-renewal-section.urgent .bp-renewal-days { color: var(--status-error); }
.bp-renewal-section.warning .bp-renewal-days { color: var(--status-warning); }
.bp-renewal-section.upcoming .bp-renewal-days { color: var(--status-success); }

/* NTU callout */
.bp-ntu-callout {
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
  border: 1px solid #f9a8d4;
  border-radius: var(--bp-radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}

.bp-ntu-callout-title {
  font-family: var(--bp-font-sans);
  font-size: 1rem;
  color: var(--bp-text);
  margin: 0 0 4px;
}

.bp-ntu-callout-text {
  font-size: 0.8125rem;
  color: var(--bp-text-secondary);
  margin: 0 0 12px;
}

/* ==========================================================================
   Document Links
   ========================================================================== */

.bp-doc-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bp-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1e40af;
  text-decoration: none;
  transition: all var(--bp-transition);
}

.bp-doc-link:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.bp-doc-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Insured supporting-document rows on the public proposal form */
.bp-doc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  margin-bottom: 6px;
}

.bp-doc-row svg {
  flex-shrink: 0;
  color: var(--bp-text-muted);
}

.bp-doc-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-doc-size {
  flex-shrink: 0;
}

.bp-doc-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--bp-text-muted);
  padding: 0 4px;
}

.bp-doc-remove:hover {
  color: var(--fta-pink, #e6007e);
}

/* ==========================================================================
   Welcome Banner
   ========================================================================== */

.bp-welcome {
  margin-bottom: 0;
}

/* Welcome banner + "Get a Quote" CTA on one row (item R1): greeting on the
   left, button right-aligned on the same row. Stacks on narrow screens. */
.bp-welcome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
@media (max-width: 540px) {
  .bp-welcome-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.bp-welcome-greeting {
  font-family: var(--font-display, var(--bp-font-sans));
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--bp-text);
  margin: 0 0 4px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.bp-welcome-subtitle {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bp-welcome-role {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--bp-radius-full);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bp-surface-muted);
  color: var(--bp-text-secondary);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

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

.bp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

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

.bp-text-right {
  text-align: right;
}

.bp-text-center {
  text-align: center;
}

.bp-text-muted {
  color: var(--bp-text-muted);
}

.bp-text-sm {
  font-size: 0.8125rem;
}

.bp-text-xs {
  font-size: 0.75rem;
}

.bp-mt-0 { margin-top: 0; }
.bp-mb-0 { margin-bottom: 0; }
.bp-mb-sm { margin-bottom: 8px; }
.bp-mb-md { margin-bottom: 16px; }
.bp-mb-lg { margin-bottom: 24px; }

/* ==========================================================================
   Premium Display (quote view)
   ========================================================================== */

.bp-premium-box {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-lg);
  padding: 20px 0;
}

/* Item 4 — total premium on ONE line: label left, amount right, the amount's
   right edge lining up with the breakdown values below (both inset 24px). */
.bp-premium-box-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
}
.bp-premium-box-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bp-text);
}
.bp-premium-box-amount {
  font-family: var(--bp-font-mono);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--bp-text);
  white-space: nowrap;
}

/* Item 5 — Optional Additional Covers status cells (Cover | Status table). */
.bp-covers-table td:last-child {
  text-align: right;
  font-weight: 600;
}
.bp-cover-covered { color: var(--bp-success-border, #10b981); }
.bp-cover-not,
.bp-cover-unknown { color: var(--bp-text-muted); font-style: italic; }
/* Condense pass (item 8a) — this table only, not the main options table:
   row/header padding cut to roughly half the .bp-quote-table default
   (thead 9px→4px, tbody 11px→5px vertical; horizontal unchanged). */
.bp-quote-table.bp-covers-table thead th {
  padding: 4px 10px;
}
.bp-quote-table.bp-covers-table tbody td {
  padding: 5px 10px;
}

/* Premium breakdown rows */
.bp-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8125rem;
  color: var(--bp-text-secondary);
}

.bp-breakdown-row span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.bp-breakdown-subtotal {
  border-top: 1px solid var(--bp-border);
  padding-top: 8px;
  margin-top: 4px;
  font-weight: 600;
  color: var(--bp-text);
}

.bp-breakdown-subtotal span:last-child {
  font-weight: 700;
}

.bp-breakdown-total {
  border-top: 2px solid var(--bp-text);
  padding-top: 8px;
  margin-top: 4px;
  font-weight: 700;
  color: var(--bp-text);
}

.bp-breakdown-total span:last-child {
  font-weight: 800;
}

.bp-premium-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-text-muted);
  margin-bottom: 4px;
}

.bp-premium-amount {
  font-family: var(--bp-font-mono);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--bp-text);
  line-height: 1.1;
}

.bp-premium-breakdown {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8125rem;
}

.bp-premium-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 24px;
}

.bp-premium-breakdown-row .label {
  color: var(--bp-text-muted);
}

.bp-premium-breakdown-row .value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--bp-text-secondary);
}

.bp-premium-breakdown-row.total {
  border-top: 1px solid var(--bp-border);
  padding-top: 8px;
  margin-top: 4px;
}

.bp-premium-breakdown-row.total .label {
  font-weight: 600;
  color: var(--bp-text);
}

.bp-premium-breakdown-row.total .value {
  color: var(--bp-text);
}

/* Option cards (selectable premium options) */
.bp-option-card {
  border: 2px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 16px 20px;
  cursor: pointer;
  transition: all var(--bp-transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bp-option-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--bp-shadow-sm);
}

.bp-option-card.selected {
  border-color: var(--fta-pink);
  background: #fdf2f8;
}

/* Token-view option-card inner layout (replaces the old inline styles in
   quoteapp-broker-view.js so the markup carries no inline style). */
.bp-bv-option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.bp-bv-option-label {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 2px;
}
.bp-bv-option-meta {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
}
.bp-bv-option-subs {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 4px;
}
.bp-bv-option-premium-col {
  text-align: right;
}
.bp-bv-option-premium {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  font-size: 1.125rem;
}
.bp-bv-option-incl {
  font-size: 0.6875rem;
  color: var(--bp-text-muted);
}

.bp-option-card-radio {
  width: 18px;
  height: 18px;
  border-radius: var(--bp-radius-full);
  border: 2px solid var(--bp-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-option-card.selected .bp-option-card-radio {
  border-color: var(--fta-pink);
}

.bp-option-card.selected .bp-option-card-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--bp-radius-full);
  background: var(--fta-pink);
}

/* ==========================================================================
   Branded Header (quote view)
   ========================================================================== */

.bp-branded-header {
  background: linear-gradient(135deg, #080e24 0%, #0d1b3f 40%, #162552 100%);
  color: #fff;
  padding: 32px 36px;
  border-radius: var(--bp-radius-lg) var(--bp-radius-lg) 0 0;
  position: relative;
  overflow: hidden;
}

/* Subtle pink glow accent */
.bp-branded-header::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(230, 0, 126, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.bp-branded-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.bp-branded-header-brand {
  font-family: var(--bp-font-sans);
  font-size: 1.25rem;
}

.bp-branded-header-sub {
  font-size: 0.8125rem;
  opacity: 0.6;
  margin-top: 2px;
}

.bp-branded-header-legal {
  text-align: right;
  font-size: 0.75rem;
  opacity: 0.5;
}

.bp-branded-header-ref {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 16px;
}

.bp-branded-header-ref-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  margin-bottom: 2px;
}

.bp-branded-header-ref-value {
  font-family: var(--bp-font-mono);
  font-size: 1.25rem;
  font-weight: 700;
}

/* ==========================================================================
   Detail Grid (key-value pairs)
   ========================================================================== */

.bp-detail-grid {
  display: flex;
  flex-direction: column;
}

.bp-detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bp-surface-secondary);
  font-size: 0.875rem;
}

.bp-detail-row:last-child {
  border-bottom: none;
}

.bp-detail-label {
  color: var(--bp-text-muted);
}

.bp-detail-value {
  color: var(--bp-text);
  font-weight: 500;
}

@media (max-width: 480px) {
  .bp-detail-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ==========================================================================
   Validity Notice
   ========================================================================== */

.bp-validity-notice {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: var(--bp-radius);
  padding: 12px 16px;
  text-align: center;
  font-size: 0.875rem;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bp-validity-notice svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ==========================================================================
   Success State
   ========================================================================== */

.bp-success-box {
  background: #f0fdf4;
  border: 2px solid var(--status-success);
  border-radius: var(--bp-radius-lg);
  padding: 32px;
  text-align: center;
}

/* Bare .bp-success-box usage (no .bp-success-icon/-title/-text children) —
 * e.g. a single confirmation <p> like #mta-done. Gives the raw text the
 * same success-toned colour the child classes would otherwise supply, so a
 * one-line confirmation still reads as a status component, not plain text. */
.bp-success-box:not(:has(.bp-success-text)) {
  color: #166534;
  font-size: 0.875rem;
  line-height: 1.5;
}

.bp-success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--status-success);
}

.bp-success-title {
  font-family: var(--bp-font-sans);
  font-size: 1.25rem;
  color: #166534;
  margin: 0 0 8px;
}

.bp-success-text {
  font-size: 0.875rem;
  color: #15803d;
  margin: 0 0 20px;
  line-height: 1.5;
}

/* ==========================================================================
   Shared inline alert / badge components
   (quoteapp-broker-submit.js: submit-error fail-safe, ABR match badge,
   activity-wording-family warning — replaces inline style.cssText so colours
   stay on tokens instead of hardcoded hex.)
   ========================================================================== */

.bp-alert-error {
  border: 1px solid var(--bp-accent);
  background: var(--bp-accent-subtle);
  color: var(--fta-navy, #0a192f);
  padding: var(--space-md) var(--space-md);
  border-radius: var(--bp-radius-sm);
  margin: var(--space-md) 0;
}

.bp-alert-error .bp-alert-retry {
  margin-top: var(--space-sm);
  background: var(--bp-accent);
  color: #fff;
  border: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--bp-radius-sm);
  cursor: pointer;
}

.bp-badge-success {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #dcfce7;
  color: #166534;
  border-radius: var(--bp-radius-sm);
  padding: 3px var(--space-sm);
}

.bp-alert-warning {
  width: 100%;
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--bp-radius-sm);
  background: #fef3c7;
  border: 1px solid var(--status-warning);
  color: #92400e;
  font-size: 12px;
  line-height: 1.4;
}

/* Appetite-decline / cross-risk-group notice (Phase 3: D2/D3). A decline
   pick is still submittable — this is informational, not blocking — so it
   uses the brand pink rather than the harder amber/red alert treatment. */
.bp-alert-decline {
  width: 100%;
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--bp-radius-sm);
  background: #fdf2f8;
  border: 1px solid var(--fta-pink, #e6007e);
  /* TODO token — no existing global.css text token matches this darker
     pink-on-light-pink readability shade; #dc2626 (--status-error) and
     var(--fta-pink) are both the wrong hue/contrast for this background. */
  color: #9d174d;
  font-size: 12px;
  line-height: 1.4;
}

.bp-alert-decline .bp-alert-decline-title {
  font-weight: 700;
  margin-bottom: 2px;
}

/* Activity typeahead suggestion row for an appetite='decline' activity
   (renderSuggestionList, quoteapp-broker-submit.js). Replaces a previous
   inline style.cssText — same brand-pink treatment as .bp-alert-decline
   above, driven by design tokens rather than hardcoded hex. */
.bp-suggest-decline {
  background: var(--bp-accent-subtle);
  border-left: 3px solid var(--fta-pink, #e6007e);
}

.bp-suggest-decline-badge {
  color: var(--fta-pink, #e6007e);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Phase 4 — primary occupation picker. First step of "What does this
   business do?": a native <select> (.bp-select, same as every other
   dropdown on this form) of ~10 primary occupations + "Something else…"
   (is_other). Reworked from an earlier tile-grid design to a dropdown, then
   from a checkbox-per-group list to ONE shared activity typeahead (both per
   direct broker feedback) — see wirePrimaryOccupationPicker()/
   selectOccupationGroup()/activateOccupationGroupPanel() in
   quoteapp-broker-submit.js. */

/* Heading shown above the shared typeahead when a primary group (not
   "Something else…") is selected — e.g. "Activities for Accountants". */
.bp-occ-group-heading {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bp-text-secondary);
  margin-bottom: 6px;
}

/* "Also covered in this group" hint (renderRiskGroupHint) — informational
   only, never blocking, so it gets the neutral surface treatment rather
   than the pink/amber alert tones used above. */
.bp-risk-group-hint {
  width: 100%;
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--bp-radius-sm);
  background: var(--bp-surface-muted);
  border: 1px solid var(--bp-border);
  color: var(--bp-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

/* ==========================================================================
   Login Page
   ========================================================================== */

body.bp-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(230, 0, 126, 0.07) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(37, 99, 235, 0.04) 0%, transparent 50%),
    linear-gradient(135deg, #080e24 0%, #0a192f 50%, #0d1b3f 100%);
  padding: 24px;
}

.bp-login-card {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-xl);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 8px 32px rgba(0, 0, 0, 0.12);
  width: 100%;
  max-width: 420px;
  padding: 40px;
}

/* Session-expired card typography — extracted from inline styles (Stream 2b sweep). */
.bp-login-card h1 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--bp-text);
  margin: 0 0 8px;
}

.bp-login-card p {
  line-height: 1.5;
}

.bp-login-brand {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.bp-login-brand-name {
  font-family: var(--bp-font-sans);
  font-size: 1.5rem;
  color: var(--fta-navy);
  margin: 0;
}

.bp-login-brand-sub {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  margin-top: 4px;
}

.bp-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
}

.bp-login-divider::before,
.bp-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bp-border);
}

@media (max-width: 480px) {
  .bp-login-card { padding: 28px 20px; }
}

/* ==========================================================================
   Magic Patterns — Dashboard Components
   ========================================================================== */

/* Summary Cards (Dashboard KPIs) */
.bp-summary-card {
  background: var(--bp-surface);
  border: none;
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow);
  padding: 20px;
  transition: box-shadow var(--bp-transition), transform var(--bp-transition);
}

.bp-summary-card:hover {
  box-shadow: var(--bp-shadow-md);
  transform: translateY(-1px);
}

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

.bp-summary-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--bp-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-summary-card-icon svg {
  width: 20px;
  height: 20px;
}

.bp-summary-card-badge {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--bp-radius-full);
}

.bp-summary-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  font-family: var(--bp-font-mono);
  color: var(--bp-text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.bp-summary-card-label {
  font-size: 0.875rem;
  color: var(--bp-text-secondary);
}

/* Quick Action Cards */
.bp-quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--bp-radius-lg);
  border: none;
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  transition: all var(--bp-transition);
  text-decoration: none;
  color: inherit;
}

.bp-quick-action:hover {
  box-shadow: var(--bp-shadow-md);
  transform: translateY(-1px);
}

.bp-quick-action[data-accent="purple"]:hover {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}

.bp-quick-action[data-accent="amber"]:hover {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);
}

.bp-quick-action-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--bp-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bp-quick-action-icon svg {
  width: 16px;
  height: 16px;
}

.bp-quick-action-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bp-text);
}

.bp-quick-action-desc {
  font-size: 0.75rem;
  color: var(--bp-text-secondary);
}

/* ==========================================================================
   Magic Patterns — Breadcrumb
   ========================================================================== */

.bp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  margin-bottom: 16px;
}

.bp-breadcrumb a {
  color: var(--bp-text-secondary);
  text-decoration: none;
  transition: color var(--bp-transition);
}

.bp-breadcrumb a:hover {
  color: var(--bp-text);
}

.bp-breadcrumb-sep {
  color: var(--bp-text-muted);
}

.bp-breadcrumb-current {
  color: var(--bp-text);
  font-weight: 500;
}

/* ==========================================================================
   Magic Patterns — Disclosure Toggle Buttons
   ========================================================================== */

.bp-toggle-btn-group {
  display: flex;
  gap: 8px;
}

.bp-toggle-btn {
  padding: 8px 20px;
  border-radius: var(--bp-radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1.5px solid var(--bp-border);
  background: var(--bp-surface);
  color: var(--bp-text-secondary);
  cursor: pointer;
  transition: all var(--bp-transition);
}

.bp-toggle-btn:hover {
  border-color: var(--bp-text-muted);
}

.bp-toggle-btn.active-no {
  background: var(--fta-navy);
  color: #fff;
  border-color: var(--fta-navy);
}

.bp-toggle-btn.active-yes {
  background: var(--fta-pink);
  color: #fff;
  border-color: var(--fta-pink);
}

/* Disclosure-specific toggle states (amber=Yes risk, green=No risk) */
.bp-toggle-btn.bp-toggle-active.bp-toggle-yes {
  background: var(--status-warning-bg);
  border-color: var(--status-warning);
  color: #92400e;
}

.bp-toggle-btn.bp-toggle-active.bp-toggle-no {
  background: var(--status-success-bg);
  border-color: var(--status-success);
  color: #166534;
}

.bp-disclosure-question[data-hidden="true"] {
  display: none;
}

/* ==========================================================================
   Magic Patterns — Progress Bar
   ========================================================================== */

.bp-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bp-border-light);
  border-radius: var(--bp-radius-full);
  overflow: hidden;
  margin-bottom: 4px;
}

.bp-progress-bar-fill {
  height: 100%;
  width: 0;
  background: #10b981;
  border-radius: var(--bp-radius-full);
  transition: width 300ms ease;
}

.bp-progress-bar-text {
  font-size: 0.75rem;
  color: var(--bp-text-secondary);
  text-align: right;
}

/* ==========================================================================
   Magic Patterns — Disclosure Question Cards
   ========================================================================== */

.bp-disclosure-card {
  border: 1px solid var(--bp-border);
  border-left: 4px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 16px 20px;
  background: var(--bp-surface);
  transition: border-color var(--bp-transition);
}

.bp-disclosure-card.answered-no {
  border-left-color: #10b981;
}

.bp-disclosure-card.answered-yes {
  border-left-color: #f59e0b;
}

.bp-disclosure-card-number {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.bp-disclosure-card-text {
  font-size: 0.875rem;
  color: var(--bp-text);
  line-height: 1.5;
  margin-bottom: 8px;
}

.bp-disclosure-card-help {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-bottom: 12px;
}

.bp-disclosure-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ==========================================================================
   Magic Patterns — Step Indicator (Wizard)
   ========================================================================== */

.bp-step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.bp-step {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bp-step-circle {
  width: 28px;
  height: 28px;
  border-radius: var(--bp-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: all var(--bp-transition);
}

.bp-step-circle.completed {
  background: #10b981;
  color: #fff;
}

.bp-step-circle.current {
  background: var(--fta-pink);
  color: #fff;
}

.bp-step-circle.future {
  background: var(--bp-border);
  color: var(--bp-text-muted);
}

.bp-step-label {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 8px;
  color: var(--bp-text-muted);
}

.bp-step-label.current {
  color: var(--bp-text);
}

.bp-step-connector {
  width: 32px;
  height: 1px;
  margin: 0 8px;
  flex-shrink: 0;
}

.bp-step-connector.completed {
  background: #10b981;
}

.bp-step-connector.future {
  background: var(--bp-border);
}

@media (max-width: 640px) {
  .bp-step-label { display: none; }
}

/* ==========================================================================
   Magic Patterns — Messages
   ========================================================================== */

.bp-conversation-list {
  width: 272px;
  flex-shrink: 0;
  border-right: 1px solid var(--bp-border);
  display: flex;
  flex-direction: column;
}

.bp-conversation-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bp-border-light);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all var(--bp-transition);
  background: transparent;
  text-align: left;
  width: 100%;
  border-right: none;
  border-top: none;
  font-family: inherit;
}

.bp-conversation-item:hover {
  background: var(--bp-surface-hover);
}

.bp-conversation-item.active {
  background: #fdf2f8;
  border-left-color: var(--fta-pink);
}

.bp-conversation-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--bp-radius-full);
  background: var(--fta-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.bp-message-bubble {
  border-radius: var(--bp-radius);
  padding: 10px 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 480px;
}

.bp-message-bubble.broker {
  background: #fce7f3;
  color: var(--bp-text);
}

.bp-message-bubble.uw {
  background: var(--bp-surface-muted);
  color: var(--bp-text);
}

.bp-message-meta {
  font-size: 0.6875rem;
  color: var(--bp-text-muted);
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .bp-conversation-list { width: 100%; border-right: none; }
}

/* ==========================================================================
   Magic Patterns — Drag & Drop Upload
   ========================================================================== */

.bp-drag-drop {
  border: 2px dashed var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 32px;
  text-align: center;
  transition: all var(--bp-transition);
  background: var(--bp-surface-hover);
}

.bp-drag-drop.dragging {
  border-color: var(--fta-pink);
  background: #fdf2f8;
}

/* Compact supporting-docs card at top of form */
.bp-doc-compact {
  margin-bottom: 16px;
  padding: 14px 18px;
}
.bp-doc-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.bp-doc-compact-icon { margin-right: 6px; }
.bp-doc-compact-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-doc-compact-title {
  font-family: var(--bp-font-sans, Inter);
  font-weight: 600;
  font-size: 0.9375rem;
  margin: 0;
  color: var(--bp-text);
}
.bp-doc-compact-sub {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin: 2px 0 0;
}
.bp-doc-compact-cta {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.bp-drag-drop-compact {
  padding: 10px 14px;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  text-align: center;
  border-width: 1px;
  border-style: dashed;
}

.bp-drag-drop-icon {
  width: 32px;
  height: 32px;
  color: var(--bp-text-muted);
  margin: 0 auto 12px;
}

.bp-drag-drop-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bp-text);
  margin-bottom: 4px;
}

.bp-drag-drop-desc {
  font-size: 0.75rem;
  color: var(--bp-text-secondary);
  margin-bottom: 12px;
}

/* ==========================================================================
   Magic Patterns — Expandable Table Rows
   ========================================================================== */

.bp-expandable-row {
  cursor: pointer;
  transition: background var(--bp-transition);
}

.bp-expandable-row:hover td {
  background: var(--bp-surface-hover) !important;
}

.bp-expandable-row .bp-expand-icon {
  transition: transform var(--bp-transition);
  width: 16px;
  height: 16px;
  color: var(--bp-text-muted);
}

.bp-expandable-row.expanded .bp-expand-icon {
  transform: rotate(180deg);
}

.bp-expanded-content {
  display: none;
  background: var(--bp-surface-hover);
}

.bp-expanded-content.open {
  display: table-row;
}

.bp-expanded-content td {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--bp-border);
}

/* ==========================================================================
   Magic Patterns — Days Badge (Renewals)
   ========================================================================== */

.bp-days-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--bp-radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.bp-days-badge.urgent {
  background: #fee2e2;
  color: #991b1b;
}

.bp-days-badge.warning {
  background: #fef3c7;
  color: #92400e;
}

.bp-days-badge.ok {
  background: #d1fae5;
  color: #065f46;
}

/* ==========================================================================
   Magic Patterns — Settings Tabs
   ========================================================================== */

.bp-settings-layout {
  display: flex;
  gap: 24px;
}

.bp-settings-sidebar {
  width: 200px;
  flex-shrink: 0;
}

.bp-settings-tab {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--bp-radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bp-text-secondary);
  text-decoration: none;
  transition: all var(--bp-transition);
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.bp-settings-tab:hover:not(.active) {
  /* Fix #4: hover state uses a visually distinct (lower-saturation) background
     so it cannot be confused with the pink .active state. Only .active gets
     the pink tint; hover-on-inactive gets the same surface-muted grey. */
  background: var(--bp-surface-muted);
  color: var(--bp-text);
}

.bp-settings-tab.active {
  background: #fdf2f8;
  color: var(--fta-pink);
  font-weight: 600;
}

.bp-settings-content {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .bp-settings-layout { flex-direction: column; }
  .bp-settings-sidebar {
    width: 100%;
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bp-border);
    margin-bottom: 16px;
  }
  .bp-settings-tab { white-space: nowrap; }
}

/* ==========================================================================
   Magic Patterns — Toggle Switch
   ========================================================================== */

.bp-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.bp-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.bp-toggle-switch-track {
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 12px;
  transition: background var(--bp-transition-slow);
  position: relative;
}

.bp-toggle-switch input:checked + .bp-toggle-switch-track {
  background: var(--fta-pink);
}

.bp-toggle-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: var(--bp-radius-full);
  transition: transform var(--bp-transition-slow);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.bp-toggle-switch input:checked ~ .bp-toggle-switch-track .bp-toggle-switch-thumb {
  transform: translateX(20px);
}

/* ==========================================================================
   Magic Patterns — Nav Link Icons
   ========================================================================== */

.bp-nav-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.bp-nav-link.active svg,
.bp-nav-link:hover svg {
  opacity: 1;
}

/* Nav house name subtitle */
.bp-nav-brand-sub {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--bp-font-sans);
  font-weight: 400;
  line-height: 1;
}

.bp-nav-brand-inner {
  display: none;
}

@media (min-width: 640px) {
  .bp-nav-brand-inner { display: block; }
}

/* Profile name in nav */
.bp-nav-profile-info {
  display: none;
  text-align: left;
  line-height: 1.2;
}

.bp-nav-profile-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
}

.bp-nav-profile-house {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 1024px) {
  .bp-nav-profile-info { display: block; }
}

/* ==========================================================================
   Drawer  (right-anchored sheet — disclosure form, future detail panels)

   Same .bp-drawer-overlay/.active toggle pattern as .bp-modal-overlay.
   On mobile: full-screen sheet (slide up from bottom).
   On desktop: 480px right-anchored panel that slides in from the right.

   The drawer is intentionally larger than .bp-modal to host long forms
   without cramping. For short confirmations keep using .bp-modal.
   ========================================================================== */

.bp-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  z-index: 200;
  animation: bp-overlay-in 200ms ease;
}

.bp-drawer-overlay.active {
  display: block;
}

.bp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow-xl);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms var(--bp-ease);
  outline: none;
}

.bp-drawer-overlay.active .bp-drawer {
  transform: translateX(0);
}

@media (max-width: 640px) {
  .bp-drawer {
    max-width: 100%;
    top: auto;
    bottom: 0;
    height: 92vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .bp-drawer-overlay.active .bp-drawer {
    transform: translateY(0);
  }
}

.bp-drawer-header {
  flex-shrink: 0;
  padding: 20px 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--bp-border-light);
}

.bp-drawer-title {
  font-family: var(--bp-font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bp-text);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}

.bp-drawer-subtitle {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  margin: 0;
  line-height: 1.4;
}

.bp-drawer-close {
  background: none;
  border: none;
  color: var(--bp-text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--bp-radius-sm);
  transition: all var(--bp-transition);
  flex-shrink: 0;
}

.bp-drawer-close:hover {
  background: var(--bp-surface-muted);
  color: var(--bp-text);
}

.bp-drawer-close svg {
  width: 18px;
  height: 18px;
  display: block;
}

.bp-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px 24px;
}

.bp-drawer-footer {
  flex-shrink: 0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--bp-border-light);
  background: var(--bp-surface);
}

.bp-drawer-footer-status {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* ==========================================================================
   Broker Thread Drawer (broker-thread-drawer.js)

   Inline chat panel that any broker page can open via
   window.BrokerThreadDrawer.open({...}). Reuses .bp-drawer skeleton above;
   classes prefixed `.bt-*` carry the thread-specific tweaks.
   ========================================================================== */

.bt-drawer { max-width: 480px; }

.bt-drawer-header { padding-top: 18px; padding-bottom: 14px; }
.bt-drawer-header-text { min-width: 0; flex: 1 1 auto; }

.bt-context-chip {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fta-pink, #e6007e);
  background: rgba(232, 6, 140, 0.08);
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.bt-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bt-loading { display: flex; flex-direction: column; gap: 10px; }
.bt-loading[hidden] { display: none; }

.bt-new-form .bp-form-group { margin-bottom: 14px; }
.bt-new-form .bt-hint {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin: 0 0 4px;
}
.bt-new-form .bp-form-error {
  color: var(--status-error, #c53030);
  font-size: 0.8125rem;
  margin-top: 4px;
}

.bt-conversation {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bt-conv-meta {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  padding: 0 4px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bt-status-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
}
.bt-status-open { background: rgba(34, 139, 230, 0.12); color: #1864ab; }
.bt-status-resolved { background: rgba(72, 117, 0, 0.12); color: #2b6500; }

.bt-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 4px 4px;
  min-height: 120px;
}

.bt-md p { margin: 0 0 6px; }
.bt-md p:last-child { margin-bottom: 0; }
.bt-md ul, .bt-md ol { margin: 0 0 6px; padding-left: 1.25rem; }
.bt-md code {
  background: rgba(11, 22, 54, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.8125rem;
}
.bt-md pre {
  background: rgba(11, 22, 54, 0.06);
  padding: 8px 10px;
  border-radius: var(--bp-radius-sm, 6px);
  overflow-x: auto;
  font-size: 0.8125rem;
}
.bt-md a { color: var(--fta-pink, #e6007e); text-decoration: underline; }

.bt-failed .bp-message-bubble {
  opacity: 0.6;
  outline: 1px dashed var(--status-error, #c53030);
}

.bt-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
}
.bt-typing[hidden] { display: none; }
.bt-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bp-text-muted);
  opacity: 0.4;
  animation: bt-typing-bounce 1.2s infinite ease-in-out;
}
.bt-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.bt-typing-dot:nth-child(3) { animation-delay: 0.3s; }
.bt-typing-label { margin-left: 6px; }

@keyframes bt-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-3px); opacity: 1; }
}

.bt-drawer-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 16px 14px;
}

.bt-fullview-link {
  /* WP-10 — full-width with a hairline divider so "See all messages" reads as
     a distinct link, not crammed against the Send button below it. */
  align-self: stretch;
  text-align: right;
  font-size: 0.75rem;
  color: var(--fta-pink, #e6007e);
  text-decoration: none;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bp-border);
}
.bt-fullview-link:hover { text-decoration: underline; }
.bt-fullview-link[hidden] { display: none; }

.bt-compose-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.bt-compose-row[hidden] { display: none; }
.bt-compose-textarea { flex: 1 1 auto; min-height: 38px; max-height: 160px; }

.bt-new-send { align-self: stretch; }
.bt-new-send[hidden] { display: none; }

/* ==========================================================================
   Disclosure question list (drawer body content)
   ========================================================================== */

.bp-disclosure-declaration {
  background: var(--bp-surface-muted);
  border: 1px solid var(--bp-border-light);
  border-radius: var(--bp-radius);
  padding: 14px 16px;
  font-size: 0.8125rem;
  color: var(--bp-text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
  white-space: pre-wrap;
}

.bp-disclosure-questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bp-disclosure-question {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 14px 16px;
  background: var(--bp-surface);
  transition: border-color var(--bp-transition), box-shadow var(--bp-transition);
}

.bp-disclosure-question.is-missing {
  border-color: var(--status-error, #dc2626);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.bp-disclosure-question .qtext {
  font-size: 0.875rem;
  color: var(--bp-text);
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 4px;
}

.bp-disclosure-question .qhelp {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

.bp-disclosure-required {
  color: var(--bp-accent);
  font-weight: 600;
  margin-left: 4px;
}

.bp-yesno {
  display: inline-flex;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-full);
  overflow: hidden;
  background: var(--bp-surface);
}

.bp-yesno button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 16px;
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bp-text-secondary);
  cursor: pointer;
  transition: background var(--bp-transition), color var(--bp-transition);
}

.bp-yesno button:hover {
  color: var(--bp-text);
}

.bp-yesno button.selected {
  background: var(--bp-navy-900);
  color: #fff;
}

.bp-yesno button.selected.yes {
  background: var(--status-success, #16a34a);
}

.bp-yesno button.selected.no {
  background: var(--bp-navy-900);
}

.bp-disclosure-declaration-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  cursor: pointer;
  transition: border-color var(--bp-transition);
}

.bp-disclosure-declaration-toggle:hover {
  border-color: var(--bp-border-strong);
}

.bp-disclosure-declaration-toggle input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--bp-accent);
  flex-shrink: 0;
}

.bp-disclosure-declaration-toggle .label {
  font-size: 0.8125rem;
  color: var(--bp-text);
  line-height: 1.5;
}

/* Quote-detail right-rail status pill for disclosure progress */
.bp-disclosure-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  font-size: 0.8125rem;
  color: var(--bp-text-secondary);
  cursor: pointer;
  transition: border-color var(--bp-transition), background var(--bp-transition);
}

.bp-disclosure-status:hover {
  border-color: var(--bp-border-strong);
  background: var(--bp-surface-hover);
}

.bp-disclosure-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bp-text-quaternary);
  flex-shrink: 0;
}

.bp-disclosure-status[data-state="partial"] .dot { background: var(--status-warning, #f59e0b); }
.bp-disclosure-status[data-state="complete"] .dot { background: var(--status-success, #16a34a); }

/* ==========================================================================
   Tightening pass — completing primitives the audit flagged as missing
   (UI audit, removed in docs cleanup). No aesthetic changes; closes the
   gaps that forced 571 inline-style attributes across 14 pages.
   ========================================================================== */

/* ── Disabled input style (was being inline-set on settings page) ───── */
.bp-input[disabled],
.bp-select[disabled],
.bp-textarea[disabled] {
  background: var(--bp-surface-muted);
  color: var(--bp-text-muted);
  cursor: not-allowed;
}

/* ── Section heading inside a card or page section ─────────────────── */
.bp-section-heading {
  font-family: var(--bp-font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bp-text);
  margin: 0 0 16px;
}
.bp-section-heading.serif {
  font-family: var(--bp-font-brand);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0;
}

/* ── Page tip — informational banner reused across pages ───────────── */
.bp-page-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bp-surface-hover);
  border-radius: var(--bp-radius);
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  line-height: 1.5;
}
.bp-page-tip svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  margin-top: 1px;
}

/* Tooltip primitive (.bp-tooltip[data-tip]) and unused modal width
   variants (.bp-modal-narrow, .bp-modal-xl) were removed during the
   review pass — they had no call sites. Re-introduce inline when
   the first consumer arrives. .bp-modal-wide (640) at line ~1177
   remains as the only modal-width modifier in active use. */

/* ── Table empty row + table inline empty (no separate empty-state) ──── */
.bp-table-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--bp-text-muted);
  font-size: 0.875rem;
}

/* ── Inline empty (small cards/sections — not a full empty-state) ──── */
.bp-inline-empty {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  padding: 4px 0;
}

/* ── Stat bar (clients page: total / active / gaps next to search) ──── */
.bp-stat-bar {
  display: flex;
  gap: 20px;
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  flex-wrap: wrap;
  align-items: center;
}
.bp-stat-bar strong {
  color: var(--bp-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bp-stat-bar strong.accent {
  color: var(--bp-accent);
}

/* ── Search + stats row layout ────────────────────────────────────── */
.bp-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.bp-toolbar .bp-search {
  flex: 1;
  min-width: 240px;
  max-width: 400px;
}

/* ── Renewal section header text colour (was inline hex) ───────────── */
.bp-renewal-section.urgent .bp-renewal-section-header .label,
.bp-renewal-section.warning .bp-renewal-section-header .label,
.bp-renewal-section.upcoming .bp-renewal-section-header .label { font-weight: 600; }
.bp-renewal-section.urgent .bp-renewal-section-header .label { color: var(--status-error); }
.bp-renewal-section.warning .bp-renewal-section-header .label { color: #854d0e; }
.bp-renewal-section.upcoming .bp-renewal-section-header .label { color: #166534; }

/* ── Actions-needed zone (dashboard "what should I do today") ─────── */
.bp-actions-needed {
  margin-bottom: 28px;
}
.bp-actions-needed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.bp-actions-needed-head h2 {
  font-family: var(--bp-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--bp-text);
  margin: 0;
}
.bp-actions-needed-head h2 .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bp-accent);
  color: #fff;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.6875rem;
  margin-left: 8px;
  vertical-align: middle;
}
.bp-action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.bp-action-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--bp-transition), transform var(--bp-transition), box-shadow var(--bp-transition);
}
.bp-action-card:hover {
  border-color: var(--bp-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--bp-shadow-md);
}
.bp-action-card-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-text-muted);
}
.bp-action-card[data-urgency="alert"]   .bp-action-card-kicker { color: var(--status-error); }
.bp-action-card[data-urgency="warning"] .bp-action-card-kicker { color: #854d0e; }
.bp-action-card[data-urgency="opportunity"] .bp-action-card-kicker { color: var(--bp-accent); }
.bp-action-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--bp-text);
  line-height: 1.35;
}
/* Product on its own second line (never inline-wraps with the insured name). */
.bp-action-card-product {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bp-text-muted);
  line-height: 1.3;
  margin-top: -4px;
}
/* Action line — leads with the broker's next move (Ready to Bind / Review your
   Quote / Renewal due), then premium + inception as muted facts. */
.bp-action-card-action {
  font-size: 0.8125rem;
  color: var(--bp-text);
  line-height: 1.4;
  margin-top: 2px;
}
.bp-action-card-action .bp-action-card-fact {
  color: var(--bp-text-muted);
  font-weight: 500;
}
.bp-action-card-body {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.bp-action-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 2px;
}
.bp-action-card-meta .arrow {
  color: var(--bp-accent);
  font-weight: 600;
}

/* ── Card-header pattern (consistent section heads inside cards) ─── */
.bp-card-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.bp-card-section-head h2,
.bp-card-section-head h3 {
  margin: 0;
}

/* ── Status pill `muted` fallback ─────────────────────────────────────
   broker-common.js `quoteStatusClass()` returns the canonical status name
   for every known status (`binding`, `quoted`, `bound`, …) — the
   status-name-keyed CSS rules at lines 690–714 colour those directly.
   For an unknown status the JS falls back to `'muted'`, so we keep this
   one alias as the "neutral" pill. The earlier set of colour-name
   aliases (blue/green/warning/info/red) was deleted — they were dead
   code once the JS map returned status names. */
.bp-status-muted { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }

/* ── Conversation panel inner layout (was inline-styled) ──────────── */
.bp-conv-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: var(--bp-text-muted);
  font-size: 0.875rem;
}
.bp-conv-active {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Pair of .bp-conv-messages' min-height:0 — the whole flex chain from
     .bp-conversation-panel down must be allowed to shrink or the messages
     pane can never scroll internally. */
  min-height: 0;
}
.bp-conv-active[hidden],
.bp-conv-placeholder[hidden] { display: none; }

/* ── Compact empty-state (in side panels, table cells, narrow contexts) ── */
.bp-empty-state-compact {
  padding: 32px 20px;
}
.bp-empty-state-compact .bp-empty-state-icon {
  width: 40px;
  height: 40px;
}
.bp-empty-state-compact .bp-empty-state-title { font-size: 1rem; }
.bp-empty-state-compact .bp-empty-state-text { font-size: 0.8125rem; }

/* ── Filter tabs: tight variant for narrow panels ─────────────────── */
.bp-filter-tabs-tight {
  margin-bottom: 12px;
}

/* ── Thread list (left panel of messages) ─────────────────────────── */
.bp-thread-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Skeleton row default spacing for stacked skeletons ──────────── */
.bp-thread-list .bp-skeleton-row,
.bp-loader-stack .bp-skeleton-row { margin-bottom: 0; }


/* ── Card stack (vertical list of cards with consistent gap) ─────── */
.bp-card-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Responsive card grid — used by the Clients list so company cards pack
   2-3 across on desktop instead of one full-width card per row. Auto-fill
   keeps a comfortable 340px min card, collapsing to a single column on
   narrow viewports. Audit #4a. */
.bp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
@media (max-width: 640px) {
  .bp-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card padding modifier ────────────────────────────────────────────
   Apply padding directly to the .bp-card outer container — used when a
   card doesn't have a separate .bp-card-body (e.g. the clients-list
   skeleton cards). The base .bp-card has no padding of its own, so no
   `!important` needed; specificity is identical. The earlier sm/lg/xl
   variants were dead code and were removed. */
.bp-card-pad-md { padding: 18px 20px; }


/* ── Pagination outside a table-wrap (e.g. clients list of cards) ── */
.bp-table-pagination-detached {
  margin-top: 16px;
  border-top: none;
  padding: 0;
}


/* ── Settings layout: ensure tabs nav has flex column + content fills remaining ── */
.bp-settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bp-settings-content {
  flex: 1;
  min-width: 0;
}

/* ── Page width modifier (.bp-page-narrow used by settings, quote, submit) ── */
.bp-page-narrow {
  max-width: 960px;
}
.bp-page-readable {
  max-width: 800px;
}
/* /broker/submit needs room for form (≥600px) + 360px assistant column. */
.bp-page-submit {
  max-width: 1240px;
}

/* ── Inline profession suggestion (under ABR result, Phase 1) ──── */
.bp-prof-suggest {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--bp-accent-muted);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}
.bp-prof-suggest-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bp-text-muted);
  font-size: 12px;
}
.bp-prof-suggest-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.bp-prof-suggest-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bp-accent-subtle);
  color: var(--bp-accent);
  border-radius: 6px;
  padding: 3px 8px;
}
.bp-prof-suggest-label {
  font-size: 14px;
  color: var(--bp-text);
}
.bp-prof-suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.bp-prof-suggest-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--bp-surface-muted, #f1f5f9);
  color: var(--bp-text);
}
.bp-prof-suggest-chip strong { margin-left: 4px; color: var(--bp-accent); }
.bp-prof-suggest-rationale {
  font-size: 12px;
  color: var(--bp-text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}
.bp-prof-suggest-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bp-prof-suggest-fallback {
  font-size: 12px;
  color: var(--bp-text-muted);
}

/* ── State Distribution — "Where the work happens" pill grid ───── */
.bp-state-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.bp-state-block-title {
  font-family: var(--bp-font-sans, Inter);
  font-weight: 600;
  font-size: 0.9375rem;
  margin: 0;
  color: var(--bp-text);
}
.bp-state-block-sub {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin: 2px 0 0;
}
.bp-state-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.bp-state-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--bp-border);
  transition: background var(--bp-transition), border-color var(--bp-transition), color var(--bp-transition);
}
.bp-state-cell-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bp-text-muted);
}
.bp-state-cell-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bp-text-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.bp-state-cell-value input {
  width: 36px;
  border: none;
  background: transparent;
  text-align: right;
  font: inherit;
  color: inherit;
  padding: 0;
  -moz-appearance: textfield;
}
.bp-state-cell-value input:focus { outline: none; }
.bp-state-cell-value input::-webkit-outer-spin-button,
.bp-state-cell-value input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bp-state-cell--filled {
  background: var(--bp-surface-muted, #f1f5f9);
  border-color: var(--bp-surface-muted, #f1f5f9);
}
.bp-state-cell--filled .bp-state-cell-label,
.bp-state-cell--filled .bp-state-cell-value {
  color: var(--bp-text);
}
.bp-state-cell:focus-within {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 2px var(--bp-accent-subtle);
}
.bp-state-total {
  text-align: right;
  font-size: 0.8125rem;
  margin-top: 8px;
  color: var(--bp-text-muted);
}
.bp-state-total strong { font-weight: 700; color: var(--bp-text); }
.bp-state-total--ok strong { color: var(--status-success, #16a34a); }
.bp-state-total--over strong { color: var(--status-error, #dc2626); }
@media (max-width: 720px) {
  .bp-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ABR suggestion dropdown (broker submit identity field) ─────── */
.bp-abr-suggest {
  list-style: none;
  margin: 4px 0 0;
  padding: 6px 0;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  background: #fff;
  max-height: 280px;
  overflow-y: auto;
  position: relative;
  z-index: 5;
}
.bp-abr-suggest[hidden] { display: none; }
.bp-abr-suggest li {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--bp-border-light);
  font-size: 13px;
}
.bp-abr-suggest li:last-child { border-bottom: none; }
.bp-abr-suggest li:hover { background: var(--bp-surface-muted); }
.bp-abr-suggest li.bp-abr-suggest-empty {
  cursor: default;
  color: var(--bp-text-muted);
}
.bp-abr-suggest li.bp-abr-suggest-empty:hover { background: transparent; }
.bp-abr-suggest-name { font-weight: 600; color: var(--bp-text); }
.bp-abr-suggest-meta { color: var(--bp-text-muted); font-size: 12px; margin-top: 2px; }

/* ── Side-panel internals (header, body, composer) ──────────────── */
.bp-panel-head {
  padding: 12px 16px;
  background: var(--bp-navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.bp-panel-head-icon { font-size: 18px; line-height: 1; }
.bp-panel-head-text { flex: 1; min-width: 0; }
.bp-panel-head-title { font-size: 13px; font-weight: 600; }
.bp-panel-head-subtitle { font-size: 11px; opacity: 0.7; margin-top: 1px; }

.bp-panel-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.bp-panel-composer {
  padding: 10px 12px;
  border-top: 1px solid var(--bp-border);
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  background: #fff;
}
.bp-panel-composer-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  font-size: 13px;
  font-family: inherit;
}
.bp-panel-composer-input:focus {
  outline: none;
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 2px var(--bp-accent-subtle);
}
.bp-panel-composer-send {
  padding: 6px 12px;
  border: none;
  background: var(--bp-accent);
  color: #fff;
  border-radius: var(--bp-radius-sm);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.bp-panel-composer-send:hover { background: var(--bp-accent-hover); }
.bp-panel-composer-send:disabled { opacity: 0.6; cursor: not-allowed; }

/* Stepper inside the panel body. */
.bp-stepper {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 12px;
}
.bp-stepper li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--bp-text-muted);
}
.bp-stepper li .bp-stepper-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--bp-border);
  background: #fff;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.bp-stepper li.done { color: var(--bp-text); }
.bp-stepper li.done .bp-stepper-dot {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.bp-stepper li.done .bp-stepper-dot::after { content: "✓"; }
.bp-stepper li.current { color: var(--bp-accent); font-weight: 600; }
.bp-stepper li.current .bp-stepper-dot {
  background: var(--bp-accent);
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px var(--bp-accent-subtle);
}

/* "What I know" digest. */
.bp-digest {
  background: var(--bp-surface-muted);
  border-radius: var(--bp-radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
}
.bp-digest h6 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  color: var(--bp-text-muted);
  font-weight: 600;
}
.bp-digest ul { margin: 0; padding: 0; list-style: none; }
.bp-digest li { padding: 3px 0; color: var(--bp-text-secondary); }
.bp-digest li .bp-digest-ico { display: inline-block; width: 18px; }

/* AI proposal card (suggested activities, etc.) inside the panel. */
.bp-proposal {
  border: 1px solid var(--bp-accent-muted);
  background: #fff;
  border-radius: var(--bp-radius-sm);
  padding: 12px;
  margin-bottom: 14px;
}
.bp-proposal[hidden] { display: none; }
.bp-proposal-when {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.bp-proposal h6 { font-size: 13px; margin: 0 0 8px; color: var(--bp-text); font-weight: 600; }
.bp-proposal-rationale { font-size: 12px; margin: 0 0 10px; color: var(--bp-text-secondary); line-height: 1.4; }
.bp-proposal-list { font-size: 12px; margin: 0 0 10px; padding: 0; list-style: none; }
.bp-proposal-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--bp-text-secondary);
  gap: 8px;
}
.bp-proposal-list .bp-proposal-pct {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--bp-text);
  background: var(--bp-surface-muted);
  padding: 1px 6px;
  border-radius: 999px;
}
.bp-proposal-actions { display: flex; gap: 6px; }
.bp-proposal-actions button {
  padding: 6px 10px;
  border-radius: var(--bp-radius-sm);
  border: 1px solid var(--bp-border);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}
.bp-proposal-actions button:hover { background: var(--bp-surface-muted); }
.bp-proposal-actions button.bp-proposal-primary {
  background: var(--bp-accent);
  border-color: var(--bp-accent);
  color: #fff;
}
.bp-proposal-actions button.bp-proposal-primary:hover { background: var(--bp-accent-hover); }
.bp-proposal-actions button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Chat messages inside the panel. */
.bp-messages { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.bp-msg { padding: 8px 10px; border-radius: var(--bp-radius-sm); line-height: 1.4; max-width: 90%; }
.bp-msg.user { background: var(--bp-accent-subtle); align-self: flex-end; }
.bp-msg.ai { background: var(--bp-surface-muted); }
.bp-msg.error { background: #fee2e2; color: #991b1b; }
.bp-msg.thinking { background: var(--bp-surface-muted); color: var(--bp-text-muted); font-style: italic; }

/* ── Settings layout responsive collapse ──────────────────────────── */
@media (max-width: 768px) {
  .bp-settings-layout {
    flex-direction: column;
  }
  .bp-settings-sidebar {
    width: 100%;
  }
  .bp-settings-tabs {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
  }
  .bp-settings-tab {
    flex-shrink: 0;
  }
}


/* ── Common table-cell variants (replace inline-styled td content) ── */
.bp-table td.bp-cell-strong,
.bp-table td .bp-cell-strong {
  color: var(--bp-text);
  font-weight: 600;
}
.bp-table td.bp-cell-muted,
.bp-table td .bp-cell-muted {
  color: var(--bp-text-muted);
  font-weight: 400;
  font-size: 0.8125rem;
}
.bp-table td.mono .bp-cell-strong { color: var(--fta-navy); font-weight: 600; }
.bp-table td .bp-cell-product {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bp-table td.bp-cell-arrow {
  width: 32px;
  color: var(--bp-text-quaternary);
}
.bp-table td.bp-cell-arrow svg { width: 16px; height: 16px; }


/* ── Drafts section header on dashboard ───────────────────────────── */
.bp-drafts-section { margin-bottom: 24px; }
.bp-drafts-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.bp-drafts-section-icon {
  width: 16px;
  height: 16px;
  color: var(--bp-text-muted);
  flex-shrink: 0;
}
.bp-drafts-section-title {
  font-family: var(--bp-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bp-text);
  margin: 0;
}
.bp-drafts-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bp-text-muted);
  background: var(--bp-surface-muted);
  padding: 1px 8px;
  border-radius: 10px;
}
.bp-drafts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* ── Quote header (was hand-rolled with inline styles) ───────────── */
.bp-quote-header {
  margin-bottom: 16px;
}
.bp-quote-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.bp-quote-header-brand {
  font-family: var(--bp-font-brand);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.bp-quote-header-tagline {
  font-size: 0.8125rem;
  opacity: 0.7;
}
.bp-quote-header-legal {
  text-align: right;
  font-size: 0.75rem;
  opacity: 0.6;
}
.bp-quote-header-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.bp-quote-header-bottom > span.bp-status {
  margin-left: auto;
}
.bp-quote-header-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  margin-bottom: 4px;
}
.bp-quote-header-ref {
  font-family: var(--bp-font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ── Card "spaced" modifier (consistent margin-bottom between sections) ── */
/* WP-G/A5 — inter-card gap uses the shared spacing scale (--space-md) rather
   than a hardcoded pixel value, keeping stacked-card rhythm consistent. */
.bp-card-spaced { margin-bottom: var(--space-md); }

/* ── Quote options list (vertical stack inside the options card) ─── */
.bp-quote-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-quote-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  transition: border-color var(--bp-transition);
}
.bp-quote-option:hover { border-color: var(--bp-border-strong); }
.bp-quote-option.is-selected {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px var(--bp-accent-subtle);
}
.bp-quote-option-label {
  font-weight: 600;
  color: var(--bp-text);
}
.bp-quote-option-meta {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  margin-top: 2px;
}
.bp-quote-option-premium {
  font-family: var(--bp-font-mono);
  font-weight: 700;
  color: var(--bp-text);
  font-size: 0.9375rem;
}

/* ── Premium pending review (broker view, lock state) ─────────────── */
.bp-pending-review {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border-left: 3px solid #ca8a04;
  border-radius: var(--bp-radius-sm);
}
.bp-pending-review-icon {
  color: #ca8a04;
  flex-shrink: 0;
  margin-top: 2px;
}
.bp-pending-review-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #713f12;
  margin: 0 0 4px;
}
.bp-pending-review-body {
  font-size: 0.8125rem;
  color: #713f12;
  line-height: 1.5;
}

/* ── Premium box breakdown row (was inline-styled) ───────────────── */
.bp-premium-box-breakdown {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
}

/* Defeat the hidden-vs-CSS-display trap on the unified record + token
   surfaces. Many surface sections carry the `hidden` attribute as their
   default state, but author classes like .bp-quote-actions (display:flex)
   and .bp-detail-row (display:grid) override the UA [hidden]{display:none}
   rule, so they leak through (e.g. the quote action buttons showed on a
   bound-policy record; an empty "Insured Activities" row showed when a quote
   has no activities). Making [hidden] authoritative here keeps every
   hide/show path consistent — HTML defaults, el.hidden toggles, and
   bpShow/bpHide (which remove the attribute to reveal). Scoped to the two
   surface containers so it can't affect other broker pages. */
#record-content [hidden],
#quote-content [hidden] {
  display: none !important;
}

/* ── Quote actions row ────────────────────────────────────────────── */
.bp-quote-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.bp-quote-actions .bp-btn {
  min-width: 160px;
  justify-content: center;
}

/* Top "Back" control above the quote surface (UAT round 4, item 1) — left
   aligned so the back affordance reads as "up/out", distinct from the centered
   primary actions at the bottom. */
.bp-quote-top-actions {
  display: flex;
  justify-content: flex-start;
}

/* ── Disclosure status row (full-width container around the pill) ── */
.bp-disclosure-status-row {
  margin-bottom: 16px;
}
.bp-disclosure-status-arrow {
  margin-left: auto;
  width: 12px;
  height: 12px;
  color: var(--bp-text-muted);
}

/* ── Loader stack (centred skeleton lines for "loading content" state) ── */
.bp-loader-stack {
  text-align: center;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Fix #1: .bp-loader-stack{display:flex} has higher specificity than the UA
   [hidden]{display:none} rule, so the skeleton renders permanently even when
   the hidden attribute is set (on success AND error settle). The [hidden]
   attribute guard below restores the expected behaviour. Same guard applied
   to any sibling skeleton containers that also carry display:flex/grid. */
.bp-loader-stack[hidden] { display: none !important; }
.bp-loader-stack .bp-skeleton {
  margin: 0;
}

/* ── Empty-state icon colour modifiers ────────────────────────────── */
.bp-empty-state-icon-error { color: var(--status-error); }
.bp-empty-state-icon-success { color: var(--status-success); }

/* ── Button variants used on quote actions (success-tinted primary) ── */
.bp-btn-success {
  background: var(--status-success);
  border-color: var(--status-success);
  color: #fff;
}
.bp-btn-success:hover {
  background: #15803d;
  border-color: #15803d;
}


/* ── Client profile header ──────────────────────────────────────── */
.bp-client-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.bp-client-header-text {
  min-width: 0;
  flex: 1;
}
.bp-client-header-name {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bp-text);
  margin: 0 0 4px;
}
.bp-client-header-meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
}
/* Item 11 — "·" divider between identity parts (ABN · profession · address). */
.bp-client-header-meta .bp-meta-sep {
  color: var(--bp-border);
  user-select: none;
}
.bp-client-header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ── Cross-sell card (pink-tinted opportunity surface) ─────────── */
.bp-cross-sell {
  background: var(--bp-accent-subtle);
  border-color: var(--bp-accent-muted);
}
.bp-cross-sell-title {
  color: var(--bp-accent);
  margin-bottom: 4px;
}
.bp-cross-sell-lead {
  margin: 0 0 12px;
}
.bp-cross-sell-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Card-embedded table (no extra borders, just lets the table breathe) ── */
.bp-card-table {
  overflow-x: auto;
}
.bp-card-table .bp-table {
  width: 100%;
}


/* ── Quote view (broker) — PDF-parity layout ─────────────────────── */

/* Two-column layout: main quote on left, side-rail on right.
   Collapses to single column under 1024px so everything stacks
   sensibly on tablets/phones. */
.bp-quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 24px;
  align-items: start;
}
/* The PDF-parity premium table spans the full content width above the
   main/rail split — a 6-column money table never fits a narrow column. */
.bp-quote-table-section {
  grid-column: 1 / -1;
}
.bp-quote-main { min-width: 0; }
.bp-quote-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  /* Clear the fixed nav (was top: 24px, which slid the rail under
     .bp-nav at --bp-nav-height). */
  top: calc(var(--bp-nav-height) + 16px);
  max-height: calc(100vh - var(--bp-nav-height) - 32px);
  overflow-y: auto;
}
/* R6 fix — flex items default to a min-height that lets the browser shrink
   them below their content once `overflow` isn't `visible` (true here via
   .bp-card's `overflow: hidden`). When the stacked rail cards' combined
   height exceeds .bp-quote-rail's max-height, flexbox was silently
   compressing each card — .bp-rail-card's LAST row (Selected option's
   "Total") got its bottom clipped by the card's own overflow:hidden even
   though the row rendered correctly in the DOM. Rail cards must never
   shrink below their content; the rail's own overflow-y:auto scrolls the
   overflow instead. */
.bp-quote-rail > .bp-card {
  flex-shrink: 0;
}
/* Impersonation banner pushes the fixed nav down by --bp-impersonation-h —
   the rail's sticky offset + max-height must clear it too (mirrors the
   .bp-nav / .bp-page overrides above). */
body.bp-impersonating .bp-quote-rail {
  top: calc(var(--bp-nav-height) + var(--bp-impersonation-h) + 16px);
  max-height: calc(100vh - var(--bp-nav-height) - var(--bp-impersonation-h) - 32px);
}
@media (max-width: 1024px) {
  .bp-quote-layout { grid-template-columns: 1fr; }
  .bp-quote-rail { position: static; max-height: none; overflow-y: visible; }
}

/* Quote-view cards carry no padding of their own (base .bp-card is
   padding-less by design). Give the stacked main + rail sections the
   same internal rhythm as the rest of the broker portal
   (.bp-card-pad-md = 18px 20px) so content never sits flush against
   the rounded card edge. */
.bp-quote-main > .bp-card:not(.bp-bound-card) {
  padding: 20px;
}
@media (max-width: 640px) {
  .bp-quote-main > .bp-card:not(.bp-bound-card) {
    padding: 16px;
  }
}

/* R8 — the "Send a note to your underwriter" composer sits ABOVE
   .bp-quote-layout (a direct child of #record-content), so it never picked
   up the .bp-quote-main > .bp-card padding rule above — the label/textarea/
   button rendered flush against the card edge with no internal spacing.
   Matches the same 20px card padding + a touch more breathing room between
   the label, textarea and Send button. */
#uw-note-composer {
  padding: 20px;
}
#uw-note-composer .bp-rail-heading {
  margin-bottom: var(--space-sm, 8px);
}
@media (max-width: 640px) {
  #uw-note-composer { padding: 16px; }
}

/* Override any inherited curly heading font — keep section titles in
   the same Inter weight as the rest of the webapp for consistency.
   The brand serif is still used in the quote header band only. */
.bp-quote-main .bp-section-heading {
  font-family: var(--bp-font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

/* PDF-parity options table.
   Scroll is contained INSIDE the card padding (no negative-margin
   bleed) so on narrow viewports it reads as an intentional, rounded
   scroll region rather than a clipped/broken card edge. */
.bp-quote-table-wrap {
  overflow-x: auto;
  margin: 0;
  border-radius: var(--bp-radius-sm, 6px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bp-quote-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.bp-quote-table thead th {
  background: var(--fta-navy);
  color: #fff;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--bp-border);
}
/* Item 9 — header cells align with their body columns: Limit/Excess centred,
   Premium/Taxes/Total right-aligned (was: all headers left-aligned, so the
   labels sat out of line with the centred/right-aligned numbers below). */
.bp-quote-table thead th:nth-child(2),
.bp-quote-table thead th:nth-child(3) { text-align: center; }
.bp-quote-table thead th:nth-child(4),
.bp-quote-table thead th:nth-child(5),
.bp-quote-table thead th:nth-child(6) { text-align: right; }
.bp-quote-table thead th.premium-col {
  color: #fff;
  background: linear-gradient(180deg, var(--fta-navy) 0%, var(--fta-navy) 100%);
  position: relative;
}
.bp-quote-table thead th.premium-col::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fta-pink);
}
.bp-quote-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--bp-border);
  vertical-align: middle;
}
.bp-quote-table tbody tr:last-child td { border-bottom: none; }
.bp-quote-table tbody tr.is-selected {
  background: var(--bp-accent-subtle);
}
/* BUG-29: broker option picker — radio in the Option cell so the broker binds
   the option they choose (not always A). Native radio, accent-tinted. */
.bp-option-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: var(--tap-min, 44px);
}
.bp-option-pick input[type="radio"] {
  accent-color: var(--bp-accent, #e6007e);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.bp-quote-table tbody tr.bp-quote-table-subrow td {
  /* Combined-cover line (e.g. "+ Public & Products Liability" on a PI+GL quote)
     renders at the SAME type size and colour as the primary policy line — not
     grey/small (UX feedback 2026-06). The dashed top-tie + tight top padding
     keep it visually grouped under its option, while the premium columns stay
     blank (the option's premium is shown once on the primary row). */
  padding-top: 4px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--bp-border);
}
/* Drop the divider between an option's primary row and its combined-cover
   sub-row so the two read as one option. */
.bp-quote-table tbody tr:has(+ tr.bp-quote-table-subrow) td {
  border-bottom: none;
}
.bp-quote-table-option {
  font-weight: 700;
  color: var(--fta-pink);
  white-space: nowrap;
}
/* R3 — compact per-product limit pills next to the option label (e.g.
   "PI $1M" / "GL $5M"), so a broker scanning 6+ options (A–F) can tell them
   apart at a glance without reading the full limit sentence. Stacks under
   the option label/radio on narrow columns; wraps to a new line via flex-wrap
   rather than pushing the option column wider. */
.bp-limit-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 4px);
  margin-top: var(--space-xs, 4px);
}
.bp-limit-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: var(--bp-radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bp-limit-pill-pi {
  background: var(--bp-accent-muted);
  color: var(--fta-pink);
}
.bp-limit-pill-gl {
  background: rgba(11, 22, 54, 0.08);
  color: var(--fta-navy);
}
.bp-limit-pill-cy {
  background: var(--ai-blue-light);
  color: var(--fta-action-blue);
}
.bp-quote-table-center { text-align: center; }
.bp-quote-table-premium {
  font-weight: 700;
  color: var(--fta-pink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bp-quote-table tbody td:nth-child(5),
.bp-quote-table tbody td:nth-child(6) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bp-quote-table-pending {
  text-align: center;
  font-style: italic;
  color: var(--bp-text-muted);
  background: var(--bp-surface-alt, #f9fafb);
}

/* UAT97 PR5 item 4 — grouped options matrix. A PI×GL cartesian (multiple PI
   limits, each with several GL tiers) reads as an undifferentiated wall of
   near-identical rows. Grouping by PI limit adds a strong navy band per PI
   limit — visually consistent with the table's own header — so the primary
   decision (which PI limit) is separated from the secondary one (which GL
   tier). See broker-quote-detail.js renderGroupedOptionRows. */
.bp-quote-table tbody tr.bp-option-group-header td {
  background: var(--fta-navy);
  color: var(--text-active, #fff);
  padding: var(--space-sm, 8px) 10px; /* 10px horizontal matches every other cell in this table */
  border-bottom: 2px solid var(--fta-pink);
}
.bp-quote-table tbody tr.bp-option-group-header:first-child td {
  border-top: none;
}
.bp-option-group-header-limit {
  font-weight: 600;
  font-size: 0.8125rem;
}
.bp-option-group-header-premium {
  font-weight: 700;
  float: right;
  font-variant-numeric: tabular-nums;
}
/* GL-tier rows under a group header: the option letter is secondary — the
   GL limit (in the Limit column) is the row's lead content instead. */
.bp-quote-table-option--sub .bp-option-secondary {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
}

/* Section footnotes (small print under the options table) */
.bp-quote-footnote {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin: 6px 0 0;
  font-style: italic;
}
.bp-quote-footnote-warn {
  color: #991b1b;
}

/* Subjectivities ordered list */
.bp-subjectivities {
  margin: 0;
  padding-left: 20px;
  font-size: 0.875rem;
  color: var(--bp-text);
}
.bp-subjectivities li {
  padding: 4px 0;
  line-height: 1.5;
}

/* Side-rail cards (Documents, Talk to FTA) */
.bp-rail-card {
  padding: 16px;
}

/* C1 fix — .bp-detail-row's 160px-label / 1fr-value grid (designed for the
   wide main-column policy-details card) squeezes the value column to ~88px
   inside the 288px-wide rail (.bp-quote-rail), and a CSS grid item's default
   min-width:auto stops long values ("$1,000,000 AOC / $1,000,000 Agg*") from
   wrapping — combined with .bp-card's overflow:hidden, the text is clipped at
   the card edge instead of wrapping. Scoped to rail cards only so the wider
   policy-details usage of .bp-detail-row elsewhere is unaffected: stack
   label/value vertically and let the value wrap normally. */
.bp-rail-card .bp-detail-row {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 6px 0;
}
.bp-rail-card .bp-detail-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bp-rail-card .bp-detail-value {
  min-width: 0;
  overflow-wrap: break-word;
}
.bp-rail-heading {
  font-family: var(--bp-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bp-text-muted);
  margin: 0 0 12px;
}
.bp-rail-body {
  font-size: 0.875rem;
  color: var(--bp-text);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Side-rail document list (full-width rows inside .bp-rail-card).
   Distinct from the existing inline-pill `.bp-doc-link` used on the
   policies + token-view pages, which keeps its older flat-list style. */
.bp-rail-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-rail-doc-item { margin: 0; }
.bp-rail-doc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  text-decoration: none;
  color: var(--bp-text);
  transition: border-color var(--bp-transition), background var(--bp-transition), transform var(--bp-transition);
}
/* R5 — hover was pink border + pink tint, the same treatment the design
   system reserves for a "selected/active" state (see .bp-quote-table
   tr.is-selected, .bp-limit-card.is-selected) — a resting document link
   read as if it were already picked. Rail document/holding cards hover to
   navy elsewhere (.bp-holding-card:hover); match that here so pink stays a
   CTA-only signal. */
.bp-rail-doc-link:hover {
  border-color: var(--fta-navy);
  background: var(--bp-surface-muted, #f8fafc);
  transform: translateY(-1px);
}
.bp-rail-doc-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bp-rail-doc-title {
  font-weight: 600;
  font-size: 0.875rem;
}
.bp-rail-doc-help {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 2px;
}

/* Item 5 — group heading + distinct treatments for UW-shared and broker
   self-uploaded documents in the rail doc list. */
.bp-rail-doc-group {
  list-style: none;
  margin: 8px 0 2px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-text-muted);
}
.bp-rail-doc-item--shared .bp-rail-doc-link {
  border-style: dashed;
  border-color: var(--bp-border-strong, var(--bp-border));
}
.bp-rail-doc-item--broker .bp-rail-doc-link {
  background: var(--bp-surface-muted);
}

/* Item 7 — broker's own submitted documents on the received view. */
.bp-submitted-doc-list { margin-top: 8px; }

/* Block-width button — for full-width rail CTAs. */
.bp-btn-block {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

/* Quote footer (legal text) */
.bp-quote-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  padding: 24px 0 32px;
}
.bp-quote-footer p { margin: 0 0 4px; }

/* ── Bound view — Phase 3 stack (hero + Documents + Renew + Cross-sell) ── */

.bp-bound-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 2px solid var(--status-success);
  background: var(--status-success-bg);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.bp-bound-hero-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0 0 4px;
  color: #166534;
}
.bp-bound-hero-text {
  color: #15803d;
  font-size: 0.875rem;
  margin: 0;
}

.bp-bound-card {
  margin-bottom: 16px;
  padding: 20px 24px;
}
.bp-bound-card-header {
  margin-bottom: 12px;
}
.bp-bound-card-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  margin: 0 0 4px;
  color: var(--fta-navy);
}
.bp-bound-card-sub {
  font-size: 0.875rem;
  color: var(--bp-text-muted);
  margin: 0;
}
.bp-bound-card-help {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin: 8px 0 0;
  text-align: center;
}

.bp-bound-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 720px) {
  .bp-bound-doc-list {
    grid-template-columns: 1fr 1fr;
  }
}
.bp-bound-doc-item {
  list-style: none;
}
.bp-bound-doc-item.bp-bound-doc-empty {
  font-size: 0.875rem;
  color: var(--bp-text-muted);
  padding: 8px 0;
}
.bp-bound-doc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms, border-color 120ms;
}
.bp-bound-doc-link:hover {
  background: var(--bp-surface-alt, #f7f7fb);
  border-color: var(--fta-navy);
}
.bp-bound-doc-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bp-bound-doc-title {
  font-weight: 600;
  font-size: 0.875rem;
}
.bp-bound-doc-help {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 2px;
}

.bp-bound-crosssell-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border-top: 1px solid var(--bp-border);
}
.bp-bound-crosssell-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--bp-border);
  font-size: 0.875rem;
}
.bp-bound-crosssell-limit {
  color: var(--fta-navy);
}
.bp-bound-crosssell-price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Inline policy detail panel — Phase 3 ──────────────────────────── */

.bp-policy-row-chevron {
  transition: transform 150ms;
}
tr[data-policy-row][aria-expanded="true"] .bp-policy-row-chevron {
  transform: rotate(90deg);
  color: var(--fta-pink);
}
.bp-policy-detail-row {
  background: var(--bp-surface-alt, #f7f7fb);
}
.bp-policy-detail-cell {
  padding: 0;
  border-top: none;
}
.bp-policy-detail-panel {
  /* Sits as a bare sibling of the .bp-card sections in .bp-quote-main (not
     nested inside one), so it needs the full card treatment itself rather
     than just the descendant padding rule — otherwise it renders with no
     background/shadow/radius against the page background. Padding matches
     .bp-quote-main > .bp-card (20px) rather than the old bespoke 24/28. */
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow);
  padding: 20px;
}
@media (max-width: 640px) {
  .bp-policy-detail-panel {
    padding: 16px;
  }
}
.bp-policy-detail-loading {
  font-size: 0.875rem;
  color: var(--bp-text-muted);
  padding: 8px 0;
}
.bp-policy-detail-error {
  font-size: 0.875rem;
  color: var(--status-error);
  padding: 8px 0;
}
.bp-policy-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px) {
  .bp-policy-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.bp-policy-detail-section {
  margin-bottom: 12px;
}
.bp-policy-detail-section:last-child {
  margin-bottom: 0;
}
.bp-policy-detail-section h4 {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--fta-navy);
  margin: 0 0 6px;
}
.bp-policy-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Interested-parties list — numbered (brokers may add many). */
.bp-ip-list { counter-reset: ip; }
.bp-ip-list li { counter-increment: ip; }
.bp-ip-list li .bp-policy-detail-list-label::before {
  content: counter(ip) ". ";
  color: var(--bp-text-muted);
  font-weight: 600;
}

/* Add-party form: name + interest dropdown share a row (fast repeat adds). */
.bp-ip-add-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.bp-ip-name { flex: 2 1 150px; }
.bp-ip-interest { flex: 1 1 120px; }
.bp-policy-detail-list li {
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bp-policy-detail-list-label {
  font-weight: 600;
  color: var(--fta-navy);
}
.bp-policy-detail-list-meta {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
}
.bp-policy-detail-list-desc {
  font-size: 0.8125rem;
  color: var(--bp-text);
  margin: 0;
}
.bp-policy-detail-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-policy-detail-docs li {
  font-size: 0.875rem;
}
/* Item 5 — group heading for UW-shared / broker-uploaded docs on the policy. */
.bp-policy-detail-docs li.bp-policy-detail-docs-group {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-text-muted);
  margin-top: 6px;
}
.bp-policy-detail-lifecycle {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  text-align: right;
}
.bp-policy-detail-lifecycle a {
  color: var(--fta-pink);
  text-decoration: none;
  font-weight: 600;
}
.bp-policy-detail-lifecycle a:hover {
  text-decoration: underline;
}

/* ── Phase 4b: Record view (insured × product) ─────────────────────── */

.bp-record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  /* R7 — condensed further: the header + banner stack was pushing "Limit of
     Liability, Excess & Premium" too far down the page. Cuts vertical padding
     and the eyebrow/title/meta gaps below so the broker reaches the options
     table with less scrolling. */
  padding: var(--space-sm, 8px) 28px;
}
/* WP-5/A7 — eyebrow matches the canonical .bp-eyebrow (muted, 600), not pink:
   pink is reserved for actions/active state, not the product label. */
.bp-record-header-product {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.bp-record-header-insured {
  font-size: 1.5rem;
  color: var(--fta-navy);
  margin: 0 0 2px;
}
.bp-record-header-meta {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  margin: 0;
}

/* Phase 4b reuses .bp-quote-layout/main/rail (defined for the quote view). */

.bp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.bp-record-kind-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
}

.bp-record-actions {
  margin-top: 16px;
}

/* Holdings grid — solid cards for held products + dashed cards for
   missing products in the FTA catalog. */
.bp-holdings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
/* Phase 4d: "Show N more products" toggle spans the full grid row so it
   sits as a clear separator below the recommended/held cards. */
.bp-holdings-toggle-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.bp-holding-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.bp-holding-card:hover {
  transform: translateY(-1px);
  border-color: var(--fta-navy);
}
.bp-holding-card-held {
  background: white;
  border: 1px solid var(--bp-border);
}
.bp-holding-card-empty {
  background: transparent;
  border: 1px dashed var(--bp-border);
  color: var(--bp-text-muted);
}
.bp-holding-card-empty:hover { color: var(--fta-pink); border-color: var(--fta-pink); }
.bp-holding-card-product {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--fta-pink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bp-holding-card-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--fta-navy);
}
.bp-holding-card-empty .bp-holding-card-name { color: var(--bp-text); }
.bp-holding-card-meta {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  font-variant-numeric: tabular-nums;
}
.bp-holding-card-expiry { color: var(--bp-text-muted); }

/* Lifecycle right-rail — chronological list of quote/policy/endorsement events. */
.bp-lifecycle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-lifecycle-empty {
  font-size: 0.875rem;
  color: var(--bp-text-muted);
  padding: 8px 0;
}
.bp-lifecycle-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms, border-color 120ms;
}
.bp-lifecycle-link:hover {
  background: var(--bp-surface-alt, #f7f7fb);
  border-color: var(--fta-navy);
}
.bp-lifecycle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bp-lifecycle-kind {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bp-lifecycle-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--fta-navy);
  font-family: ui-monospace, monospace;
}
.bp-lifecycle-subtitle {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
}

/* ==========================================================================
   Pilot Stage 2 — Inline error state, session-expired toast, mobile-sticky CTA
   ==========================================================================
   These primitives layer on top of the existing .bp-skeleton / .bp-empty-state
   / .bp-toast surfaces (defined above). Kept appended (not scattered) per the
   pilot-week prompt so removal at real-broker go-live is a clean delete. */

/* Inline error card with retry — replaces "silent console.error" failure paths
   on the 4 pilot pages. Sits in the same content slot as the loading skeleton. */
.bp-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 40px 24px;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow-sm);
  max-width: 480px;
  margin: 24px auto;
}
.bp-error-state-title {
  font-family: var(--bp-font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bp-text);
  margin: 0;
}
.bp-error-state-text {
  font-size: 0.875rem;
  color: var(--bp-text-muted);
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}
.bp-error-state-retry {
  margin-top: 4px;
  padding: 8px 16px;
  background: var(--bp-navy-900);
  color: #fff;
  border: none;
  border-radius: var(--bp-radius-sm);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--bp-transition);
}
.bp-error-state-retry:hover {
  background: var(--bp-navy-800);
}

/* Branded 403 — broker tried to open a quote they don't own. Same shape as the
   error state but the copy is access-specific. */
.bp-error-state-403 .bp-error-state-title::before {
  content: "🔒 ";
}

/* Session-expired toast — persistent, non-dismissable, links to re-login.
   Distinct from the transient .bp-toast (which auto-dismisses after 4s). */
.bp-session-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bp-navy-900);
  color: #fff;
  border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow-xl);
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  max-width: 92vw;
  animation: bp-toast-up 250ms var(--bp-ease);
}
.bp-session-toast-link {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}
.bp-session-toast-link:hover {
  color: var(--bp-accent);
}

/* Sticky submit CTA on mobile — keeps the submit button visible above the
   on-screen keyboard. Desktop layout is unchanged. */
@media (max-width: 640px) {
  .bp-submit-sticky-mobile {
    position: sticky;
    bottom: 0;
    z-index: 50;
    padding: 12px var(--bp-page-px);
    margin: 16px calc(var(--bp-page-px) * -1) 0;
    background: var(--bp-surface);
    border-top: 1px solid var(--bp-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
  }
}

/* ==========================================================================
   Utilities — token-backed primitives, replacements for inline styles
   ========================================================================== */

/* Brand accent stripe — short pink rule above section headers in contexts
 * where brokers enter (dashboard welcome, quote presentation). Mirrors the
 * marketing site's section-divider treatment. Avoid on dense tabular
 * surfaces (records list, forms) where it reads as noise. */
.bp-accent-stripe {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--fta-pink);
  margin-bottom: var(--space-sm);
  border-radius: 2px;
}

/* Margin utilities — token-backed replacements for inline margins.
 * Pairs with the inline-style sweep PRs (PR-07 onwards). */
.bp-mt-xs { margin-top: var(--space-xs); }
.bp-mt-sm { margin-top: var(--space-sm); }
.bp-mt-md { margin-top: var(--space-md); }
.bp-mt-lg { margin-top: var(--space-lg); }
.bp-mt-xl { margin-top: var(--space-xl); }
.bp-mb-xs { margin-bottom: var(--space-xs); }
.bp-mb-sm { margin-bottom: var(--space-sm); }
.bp-mb-md { margin-bottom: var(--space-md); }
.bp-mb-lg { margin-bottom: var(--space-lg); }
.bp-mb-xl { margin-bottom: var(--space-xl); }

/* Flex/gap utilities — for the common "stacked block with spacing" pattern.
 * NOT a full Tailwind clone — only the patterns we see in the inline-style
 * sweep target list. Add more sparingly when a third call site appears. */
.bp-gap-xs { gap: var(--space-xs); }
.bp-gap-sm { gap: var(--space-sm); }
.bp-gap-md { gap: var(--space-md); }
.bp-gap-lg { gap: var(--space-lg); }
.bp-flex { display: flex; }
.bp-flex-col { display: flex; flex-direction: column; }
.bp-flex-row { display: flex; flex-direction: row; }
/* Restore the UA `[hidden]` semantics — author-level `display: flex/grid` rules
 * above otherwise win against the UA `[hidden] { display: none }` and leak
 * a "hidden" element back onto the page. Caught during Stream 2a review on
 * `.bp-file-preview` (empty preview row was visible on every page load). Cover
 * every new class that explicitly sets `display:`. */
.bp-flex[hidden],
.bp-flex-col[hidden],
.bp-flex-row[hidden],
.bp-grid-2col[hidden],
.bp-grid-3col[hidden],
.bp-file-preview[hidden],
.bp-link-inline-flex[hidden],
.bp-bind-ack-label[hidden],
.bp-bind-success[hidden],
.bp-form-error[hidden] { display: none; }
.bp-items-center { align-items: center; }
.bp-items-start  { align-items: flex-start; }
.bp-items-end    { align-items: flex-end; }
.bp-justify-between { justify-content: space-between; }
.bp-justify-center  { justify-content: center; }
.bp-justify-end     { justify-content: flex-end; }

/* Width helpers — common max-width / width patterns. */
.bp-w-full   { width: 100%; }
.bp-w-narrow { max-width: 320px; }
.bp-w-medium { max-width: 480px; }
.bp-w-wide   { max-width: 720px; }

/* Type tone utilities — pair with body/secondary/muted text tokens. */
.bp-text-muted     { color: var(--bp-text-muted); }
.bp-text-secondary { color: var(--bp-text-secondary); }
.bp-text-error     { color: var(--status-error); }
.bp-text-success   { color: var(--status-success); }
.bp-text-xs { font-size: 0.75rem; }
.bp-text-sm { font-size: 0.8125rem; }
.bp-text-md { font-size: 0.875rem; }
.bp-text-lg { font-size: 0.9375rem; }

/* Reset/atom utilities used heavily in card headers and tight stacks. */
.bp-m-0      { margin: 0; }
.bp-flex-1   { flex: 1; }
.bp-flex-wrap { flex-wrap: wrap; }
.bp-min-w-0  { min-width: 0; }
.bp-shrink-0 { flex-shrink: 0; }
.bp-fw-500   { font-weight: 500; }

/* Grid utilities — for form-row layouts on the submit/settings pages. */
.bp-grid-full  { grid-column: 1 / -1; }
.bp-grid-2col  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.bp-grid-3col  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

/* Padding utilities — only the values that correspond to space tokens. */
.bp-pad-sm { padding: var(--space-sm); }
.bp-pad-md { padding: var(--space-md); }
.bp-pad-lg { padding: var(--space-lg); }

/* Eyebrow/kicker label — small-caps mini-headings that label a section.
 * Two density variants — muted (default) for body sections, faint (smaller,
 * lower opacity) for tertiary metadata strips. */
.bp-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-text-muted);
  margin-bottom: var(--space-xs);
  font-weight: 600;
}
.bp-eyebrow-faint {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.45;
  margin-bottom: var(--space-xs);
}

/* Reusable card-section heading — appears 4× in submit, used as the title
 * row of a settings/wizard panel. Pairs with .bp-pad-lg / .bp-card. */
.bp-card-title {
  font-family: var(--bp-font-sans, Inter);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  color: var(--bp-text);
}

/* Inline link styled like a button row but without underline — used for
 * "<svg> Continue →"-style CTAs that aren't full buttons. */
.bp-link-inline-flex {
  text-decoration: none;
  display: inline-flex;
}

/* ==========================================================================
   Submit page — focused classes from the inline-style sweep (Stream 2)
   All values use space/radius tokens; no px literals.
   ========================================================================== */

/* Card with standard submit-page padding (16px bottom + 24px all-round pad).
 * Applied to every step card and product section card on the submit page. */
.bp-submit-card {
  margin-bottom: var(--space-md);
  padding: var(--space-lg);
}

/* Step eyebrow label ("Step 1", "Step 2") — tighter tracking than bp-eyebrow,
 * matches the 0.08em spec in the original inline styles.
 * Name avoids collision with the stepper .bp-step-label component class. */
.bp-step-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-text-muted);
  margin: 0 0 var(--space-xs);
}

/* Card h3 with a 4px bottom margin — used when a subtitle follows immediately. */
.bp-step-h3 {
  margin-bottom: var(--space-xs);
}

/* Step subtitle paragraph — .8125rem muted, 16px below. */
.bp-step-subtitle {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  margin: 0 0 var(--space-md);
}

/* Tab switcher pill container — matches the original 2px-gap pill background. */
.bp-tab-switcher {
  display: flex;
  gap: 2px;
  background: var(--bp-surface-muted);
  padding: 3px;
  border-radius: var(--bp-radius-sm);
  width: fit-content;
}

/* Drag-drop zone with a taller min-height for the primary upload area. */
.bp-drag-drop-tall {
  min-height: 160px;
}

/* Upload cloud icon inside the drag-drop zone. */
.bp-upload-area-icon {
  color: var(--bp-text-muted);
  margin-bottom: var(--space-sm);
}

/* "Drag & drop a document here" hint — medium weight body text. */
.bp-drag-drop-hint {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bp-text);
  margin: 0 0 var(--space-xs);
}

/* File-type / size sub-hint below the drag-drop headline. */
.bp-drag-drop-sub {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin: 0 0 var(--space-sm);
}

/* Textarea that enforces a minimum content height for free-text input. */
.bp-textarea-tall {
  min-height: 200px;
  box-sizing: border-box;
}

/* Spinner at 20×20 — used in the extract-loading state. */
.bp-spinner-sm {
  width: 20px;
  height: 20px;
}

/* Skeleton rows at the three fixed-width percentages used in extract-loading. */
.bp-skeleton-w70 { width: 70%; }
.bp-skeleton-w55 { width: 55%; }
.bp-skeleton-w80 { width: 80%; }

/* Submissions table — action column fixed width (moved from inline style, Stream 2b sweep). */
#submissions-table th:last-child { width: 32px; }

/* Dashboard KPI skeleton widths — varied so the loading state doesn't read
 * as all-identical placeholders. Per-id selectors keep the values in CSS
 * (vs the original `style="width: Xpx"` inline attrs). The widths roughly
 * mirror the live KPI character counts at typical broker scale
 * (renewals: 2 digits, premium: $XXXk). */
#kpi-total.bp-skeleton    { width: 60px; }
#kpi-awaiting.bp-skeleton { width: 50px; }
#kpi-renewals.bp-skeleton { width: 40px; }
#kpi-bound.bp-skeleton    { width: 50px; }
#kpi-premium.bp-skeleton  { width: 90px; }

/* Dashboard table — actions / chevron column fixed width. */
#records-table th.bp-th-chevron { width: 32px; }

/* Policy page loading skeleton — heading + meta-row widths. */
#policy-loading .bp-skeleton-heading { width: 280px; }
#policy-loading .bp-skeleton-row     { width: 200px; }

/* File-selection preview row — shown after the user picks a file in the
 * drag-drop zone. Replaces the inline display:none/flex compound pattern. */
.bp-file-preview {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-sm) 14px;
  background: var(--bp-surface-muted);
  border-radius: var(--bp-radius-sm);
}

/* Document icon inside the file preview — accented, fixed size. */
.bp-file-preview-icon {
  color: var(--bp-accent);
  flex-shrink: 0;
}

/* Filename text in the file preview — truncates long paths. */
.bp-file-preview-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "×" clear button in the file preview row. */
.bp-file-clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bp-text-muted);
  padding: 2px;
}

/* AI Confidence Banner — green gradient card at the top of the form phase. */
.bp-ai-banner {
  margin-bottom: var(--space-md);
  padding: var(--space-md) 20px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-left: 3px solid #16a34a;
}

/* Banner heading — dark green, slightly larger than body. */
.bp-ai-banner-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #14532d;
}

/* Banner sub-line — medium green, appears below the title. */
.bp-ai-banner-sub {
  font-size: 0.8125rem;
  color: #166534;
  margin-top: 2px;
}

/* Regenerate button inside the AI banner — green-filled, small. */
.bp-ai-regen-btn {
  background: #16a34a;
  color: #fff;
  border: none;
  gap: var(--space-xs);
}

/* Input wrapper that positions an overlay button absolutely inside. */
.bp-input-with-overlay {
  position: relative;
}

/* Pill button overlaid at the right edge of an input field (ABR / Activity). */
.bp-input-overlay-btn {
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px var(--space-sm);
  border-radius: var(--bp-radius-full);
  background: var(--bp-accent-subtle);
  color: var(--bp-accent);
  border: 1px solid var(--bp-accent-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* Extra right padding on an input so text doesn't collide with the overlay btn.
 * 138px covers the "✨ Look up" label; 110px for "✨ Help me". */
.bp-input-pr-lg {
  padding-right: 138px;
}

/* WP-1 — currency prefix overlaid at the left edge of a masked money input
 * (Amount, GL wages/exports). Pairs with .bp-input-pl-cur for clearance.
 * Money inputs are right-aligned + tabular so the magnitude reads cleanly. */
.bp-input-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bp-text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}
.bp-input-pl-cur {
  padding-left: 24px;
}
.bp-input-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* WP-1 — shared money-output face: Inter + tabular figures (never mono).
 * Use on table cells / inline currency so columns align digit-for-digit. */
.bp-money {
  font-variant-numeric: tabular-nums;
}

/* ABR result block — gradient inline card shown after a successful ABR lookup. */
.bp-abr-result {
  margin-top: var(--space-sm);
  padding: var(--space-sm) 14px;
  background: linear-gradient(180deg, var(--bp-accent-subtle), #fff);
  border: 1px solid var(--bp-accent-muted);
  border-radius: var(--bp-radius-sm);
  font-size: 0.8125rem;
}

/* ABR error text — small, error-coloured, appears under the ABR field. */
.bp-abr-error {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  color: var(--status-error);
}

/* Autocomplete dropdown for the activity search field. */
.bp-activity-suggest-list {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: var(--space-xs) 0;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  background: #fff;
  max-height: 280px;
  overflow-y: auto;
}

/* AI-suggestion popover anchored below the activity search input. */
.bp-activity-helper-popover {
  margin-top: var(--space-sm);
  border: 1px solid var(--bp-accent-muted);
  background: #fff;
  border-radius: var(--bp-radius);
  padding: 14px var(--space-md);
  position: relative;
  box-shadow: 0 4px 18px rgba(11, 22, 54, 0.08);
}

/* Popover heading — compact, no margin bleed. */
.bp-activity-helper-title {
  margin: 0 0 var(--space-xs);
  font-size: 0.8125rem;
}

/* Source attribution line in the popover. */
.bp-activity-helper-source {
  font-size: 0.6875rem;
  margin: 0 0 var(--space-sm);
}

/* Coloured product-section header badge — shared base. */
.bp-product-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--bp-radius-sm);
  padding: 3px var(--space-sm);
}
.bp-product-badge-pi {
  background: var(--bp-accent-muted);
  color: var(--bp-accent);
}
.bp-product-badge-gl {
  background: #dbeafe;
  color: #1d4ed8;
}
.bp-product-badge-cy {
  background: #fef3c7;
  color: #92400e;
}
.bp-product-badge-ml {
  background: #ede9fe;
  color: #5b21b6;
}

/* Inner grid for existing-PI detail fields (muted background inset). */
.bp-existing-pi-grid {
  background: var(--bp-surface-muted);
  border-radius: var(--bp-radius-sm);
  padding: var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

/* Toggle button row capped at 240px — used for Yes/No toggles. */
.bp-toggle-narrow {
  max-width: 240px;
}

/* Toggle button base font-size — paired with existing .bp-toggle-btn. */
.bp-toggle-btn-text {
  flex: 1;
  font-size: 0.8125rem;
}

/* Readonly brokerage input — muted surface + no-cursor. */
.bp-input-readonly {
  background: var(--bp-surface-muted);
  cursor: not-allowed;
}

/* WP-8 — a fixed, FTA-set value shown as text (not a greyed input that lies
   about being editable). Lock glyph + muted tone read as "informational". */
.bp-readonly-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bp-text-secondary);
}
.bp-readonly-value svg { color: var(--bp-text-muted); }

/* Review Summary collapsible card — no padding, clip overflow for the border. */
.bp-review-card {
  margin-bottom: var(--space-md);
  padding: 0;
  overflow: hidden;
}

/* Full-width toggle button for the Review Summary header. */
.bp-review-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Chevron icon in the review toggle — animated by JS on open/close. */
.bp-review-toggle-icon {
  color: var(--bp-text-muted);
  transition: transform 0.2s;
}

/* Review body — hidden by default, shown when toggle is open. */
.bp-review-body {
  padding: 0 var(--space-lg) 20px;
  border-top: 1px solid var(--bp-border);
}

/* Review content inner wrapper — space from the border. */
.bp-review-content {
  padding-top: var(--space-md);
}

/* Submit CTA button sizing — extra horizontal padding, standard vertical. */
.bp-btn-submit-cta {
  gap: var(--space-sm);
  padding: 10px 28px;
}

/* Success state container — centred, generous vertical padding. */
.bp-success-state {
  text-align: center;
  padding: 64px var(--space-lg);
}

/* Circular success icon container — green tint. */
.bp-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  background: #d1fae5;
}

/* Large "Submission Received" heading. */
.bp-success-title {
  font-family: var(--bp-font-sans, Inter);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.875rem;
  color: var(--bp-text);
  margin: 0 0 var(--space-sm);
}

/* Primary success paragraph — medium body text. */
.bp-success-sub {
  color: var(--bp-text-secondary);
  font-size: 1rem;
  margin: 0 0 var(--space-sm);
}

/* Personalised UW attribution line — hidden until JS populates it. */
.bp-success-uw-line {
  font-size: 0.875rem;
  color: var(--bp-text-muted);
  margin: 0 0 var(--space-sm);
}

/* Generic "response within 2 business days" fallback. */
.bp-success-uw-generic {
  font-size: 0.875rem;
  color: var(--bp-text-muted);
  margin: 0 0 var(--space-sm);
}

/* Monospace submission reference number. */
.bp-submission-ref {
  font-family: var(--bp-font-mono, monospace);
  font-size: 0.875rem;
  color: var(--bp-text-muted);
  margin-bottom: 28px;
}

/* Item 11 / Item 8 (D) — "with your underwriter" banner on the referred
   confirmation screen. */
.bp-referred-banner {
  max-width: 560px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-md);
  background: var(--bp-accent-subtle);
  border: 1px solid color-mix(in srgb, var(--bp-accent) 30%, transparent);
  border-radius: var(--bp-radius-lg);
  text-align: left;
}
.bp-referred-banner-title {
  font-weight: 700;
  color: var(--bp-text);
  margin-bottom: 4px;
}
.bp-referred-banner-body {
  font-size: 0.875rem;
  color: var(--bp-text-secondary);
}

/* Item 8 (D) / Item 11 — "What you submitted" recap card + editable note
   card + cross-sell card, all reusing the same shell on the referred
   confirmation screen. */
.bp-recap {
  max-width: 560px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-lg);
  text-align: left;
}
.bp-recap-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--bp-text);
  margin-bottom: var(--space-sm);
}
.bp-recap-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-md);
  row-gap: 6px;
  margin: 0;
}
.bp-recap-grid dt {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  font-weight: 600;
}
.bp-recap-grid dd {
  font-size: 0.8125rem;
  color: var(--bp-text);
  margin: 0;
}

/* Footer note row — centred, spaced from the bottom of the page. */
.bp-submit-footer {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* Footer note pill — icon + text in a muted rounded pill. */
.bp-submit-footer-pill {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--bp-surface-muted);
  border-radius: var(--bp-radius-full);
  padding: var(--space-xs) 14px;
}

/* ==========================================================================
   Nav CTA — persistent "+ New Submission" pill (marketing-parity)
   ========================================================================== */

/* Pink primary CTA in the broker nav bar — mirrors the marketing site's
 * persistent "Get a Quote" affordance so brokers crossing surfaces keep the
 * same primary-action anchor. Tightened to 2px corners + pink shadow to
 * match .bp-btn-primary's brand-surface treatment. */
.bp-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px 12px;
  background: var(--bp-accent);
  color: #fff;
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  box-shadow: var(--bp-shadow-pink);
  transition: background var(--bp-transition), transform var(--bp-transition);
  white-space: nowrap;
  margin-right: var(--space-sm);
}
.bp-nav-cta:hover {
  background: var(--bp-accent-hover);
  transform: translateY(-1px);
  color: #fff;
}
.bp-nav-cta:active { transform: scale(0.97); }
.bp-nav-cta:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-pink), 0 0 0 3px rgba(230, 0, 126, 0.25);
}
/* Hide the label on narrow screens — the + icon alone carries the meaning. */
@media (max-width: 640px) {
  .bp-nav-cta span { display: none; }
  .bp-nav-cta { padding: 6px 8px; }
}

/* Secondary "Ask FTA AI" pill — same shape as .bp-nav-cta but ghosted, so
 * it sits beside the primary New Submission CTA without competing for
 * visual weight. Hover pulls the accent forward without flipping to a
 * filled pink (which would read as a primary action). */
.bp-nav-cta--ai {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
}
.bp-nav-cta--ai:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  transform: none;
}
.bp-nav-cta--ai:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   Broker portal footer — minimal, brand-cohesive
   ========================================================================== */

.bp-footer {
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--bp-page-px);
  background: var(--bp-navy-900);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--bp-font-sans);
  font-size: 0.75rem;
}
.bp-footer-inner {
  max-width: var(--bp-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.bp-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 100ms ease;
}
.bp-footer a:hover { color: #fff; }
.bp-footer-links { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.bp-footer-meta { color: rgba(255, 255, 255, 0.5); font-size: 0.6875rem; }

/* ==========================================================================
   Resume-draft modal (Stream 6 PR-24)
   ========================================================================== */

.bp-draft-prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 47, 0.45); /* navy at 45% */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bp-draft-prompt {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-xl);
  padding: var(--space-xl);
  max-width: 480px;
  width: 92%;
  box-shadow: var(--bp-shadow-xl);
  font-family: var(--bp-font-sans);
}
.bp-draft-prompt-title {
  font-family: var(--font-display, var(--bp-font-sans));
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--fta-navy);
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-xs);
  line-height: 1.2;
}
.bp-draft-prompt-body {
  font-size: 0.8125rem;
  color: var(--bp-text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--space-lg);
}
.bp-draft-prompt-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.bp-draft-prompt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--bp-transition), background var(--bp-transition), transform var(--bp-transition);
  font-family: var(--bp-font-sans);
}
.bp-draft-prompt-row:hover,
.bp-draft-prompt-row:focus-visible {
  border-color: var(--bp-accent);
  background: var(--bp-accent-subtle);
  outline: none;
  transform: translateY(-1px);
}
.bp-draft-prompt-row-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bp-text);
  line-height: 1.3;
}
.bp-draft-prompt-row-meta {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  margin-top: 2px;
}
.bp-draft-prompt-row-cta {
  font-size: 0.8125rem;
  color: var(--bp-accent);
  font-weight: 600;
  white-space: nowrap;
}
.bp-draft-prompt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.bp-draft-prompt-view-all {
  font-size: 0.8125rem;
  color: var(--bp-accent);
  text-decoration: none;
  font-weight: 600;
}
.bp-draft-prompt-view-all:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Urgent-action callout strip (Stream 6 PR-25 — v2 redesign)
   ========================================================================== */

/* Leverages the EXISTING .bp-action-card pattern (broker-portal.css:3543+)
 * — urgency is conveyed by the kicker label colour, not a heavy left-rule
 * bar. Slim variant lets the strip sit above the KPI grid without dwarfing
 * it. See .context/broker-portal-cx-recommendations-v2.md §D. */
.bp-dashboard-callouts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.bp-action-card--urgent {
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}
.bp-action-card--urgent .bp-action-card-kicker {
  margin-bottom: 0;
  white-space: nowrap;
}
.bp-action-card--urgent .bp-action-card-body-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bp-action-card--urgent .bp-action-card-title {
  font-size: 0.9375rem;
}
.bp-action-card--urgent .bp-action-card-body {
  font-size: 0.8125rem;
  line-height: 1.4;
}
.bp-action-card--urgent .bp-action-card-cta {
  color: var(--bp-accent);
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.8125rem;
}
/* Lower-emphasis secondary action (e.g. "Ask my underwriter" on NTU cards). */
.bp-action-card-cta--secondary {
  color: var(--bp-text-muted);
  font-weight: 500;
  margin-left: var(--space-md);
}
.bp-action-card-cta--secondary:hover {
  color: var(--bp-text);
}
.bp-action-card-dismiss {
  background: none;
  border: none;
  color: var(--bp-text-muted);
  padding: var(--space-xs);
  margin-left: var(--space-xs);
  border-radius: var(--bp-radius-sm);
  cursor: pointer;
  line-height: 1;
  font-size: 1rem;
  transition: color var(--bp-transition), background var(--bp-transition);
}
.bp-action-card-dismiss:hover {
  color: var(--bp-text);
  background: var(--bp-surface-hover);
}
.bp-dashboard-callouts-more {
  text-align: right;
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  margin-top: var(--space-xs);
}

/* ==========================================================================
   quoteapp-broker-view — focused classes (Stream 2b inline-style sweep)
   No-auth email-link page; narrower container, no sidebar.
   ========================================================================== */

/* Narrow page cap for the no-nav broker view (800px vs 1200 for the portal). */
.bp-bv-page { max-width: 800px; }

/* Loading skeleton centred with generous vertical breathing room. */
.bp-bv-loading {
  text-align: center;
  padding: 64px var(--space-lg);
}

/* Skeleton placeholders centred inside the loading well. */
.bp-bv-skel-heading {
  width: 200px;
  margin: 0 auto var(--space-sm);  /* 12px → 8px token-snap */
}
.bp-bv-skel-row {
  width: 300px;
  margin: 0 auto;
}

/* Branded-header text blocks */
.bp-bv-header-brand {
  font-family: var(--font-heading, 'DM Serif Display', serif);
  font-size: 1.5rem;
  font-weight: 400;
}
.bp-bv-header-tagline {
  font-size: 0.8125rem;
  opacity: 0.7;
}
.bp-bv-header-legal {
  text-align: right;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Divider row inside the branded header (quote ref + status pill). */
.bp-bv-header-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--space-md);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
/* Ensure hidden attribute wins when JS hides this row. */
.bp-bv-header-bottom[hidden] { display: none; }

/* Quote-reference eyebrow label — faint, tight tracking. */
.bp-bv-ref-eyebrow {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  margin-bottom: var(--space-xs);
}

/* Quote-reference number — mono, prominent. */
.bp-bv-ref-num {
  font-family: ui-monospace, monospace;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Push the status pill to the right edge of the reference row. */
.bp-bv-ml-auto { margin-left: auto; }

/* Section h2 inside a card — heading font, restrained weight. */
.bp-bv-section-h2 {
  font-family: var(--font-heading, 'DM Serif Display', serif);
  font-size: 1.125rem;
  margin: 0 0 var(--space-md);
}

/* Bare list — strip UA list chrome before composing flex/gap onto it. */
.bp-bv-list-stack {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Action buttons — success tint (overrides .bp-btn-primary bg). */
.bp-bv-btn-success { background: var(--status-success); }

/* Standard action button minimum width + centred label. */
.bp-bv-btn-action {
  min-width: 160px;
  justify-content: center;
}

/* PDF-download button — slightly narrower than the primary actions. */
.bp-bv-btn-pdf {
  min-width: 140px;
  justify-content: center;
}

/* Accept-success card — green-tinted confirmation panel. */
.bp-bv-accept-card {
  text-align: center;
  border: 2px solid var(--status-success);
  background: var(--status-success-bg);
  padding: var(--space-xl);   /* 32px */
}

/* Centred block SVG inside the accept card. */
.bp-bv-accept-icon {
  display: block;
  margin: 0 auto var(--space-md);
}

/* "Quote Accepted" heading — dark green serif. */
.bp-bv-accept-title {
  font-family: var(--font-heading, 'DM Serif Display', serif);
  font-size: 1.25rem;
  margin: 0 0 var(--space-sm);
  color: #166534;
}

/* Confirmation sub-text below the accept heading. */
.bp-bv-accept-text {
  color: #15803d;
  font-size: 0.875rem;
  margin: 0 0 20px;
}

/* Page-level legal footer (no-nav pages only). */
.bp-bv-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  padding: var(--space-lg) 0 var(--space-xl);
}

/* Icon circle in the accept-confirmation modal. */
.bp-bv-modal-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--status-success-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bp-bv-modal-circle[hidden] { display: none; }

/* Modal heading — DM Serif at body-adjacent size. */
.bp-bv-modal-h3 {
  font-family: var(--font-heading, 'DM Serif Display', serif);
  font-size: 1.0625rem;
  margin: 0;
}

/* Summary inset box inside the accept modal. */
.bp-bv-modal-summary {
  background: var(--bp-surface-secondary, var(--bp-surface-muted));
  border-radius: var(--bp-radius-sm);
  padding: var(--space-sm) var(--space-md); /* 12px → 8px/16px token-snap */
  margin-bottom: var(--space-md);
  font-size: 0.875rem;
}

/* Muted label inside the accept-modal summary. */
.bp-bv-summary-label { color: var(--bp-text-muted); }

/* Mono bold value inside the accept-modal summary. */
.bp-bv-summary-value {
  font-family: ui-monospace, monospace;
  font-weight: 600;
}

/* Validity-notice warning card. */
.bp-bv-validity-card {
  background: var(--status-warning-bg);
  border-color: var(--status-warning);
  margin-bottom: var(--space-md);
  text-align: center;
  font-size: 0.875rem;
  color: #92400e;
}

/* ==========================================================================
   quoteapp-broker-quote — focused classes (Stream 2b inline-style sweep)
   ========================================================================== */

/* "Pricing your quote…" accent banner shown during the pricing loading state. */
.bp-bq-submitted-banner {
  padding: var(--space-md) 20px;
  background: var(--bp-accent-muted);
  border: 1px solid var(--bp-accent);
  border-radius: var(--bp-radius-sm);
  color: var(--bp-text);
  font-size: 0.9375rem;
  margin-bottom: var(--space-sm);
}

/* Info banner — "We've received your submission" (status=setup). */
/* Feedback item 2 — canonical "Submission Received" surface: a prominent
   green-tick header. R7 — condensed from a large centred stack (56px icon +
   1.5rem serif title + a separate copy line, ~28px vertical padding) to a
   single compact row (icon + title + copy inline) so it reads at a glance
   instead of eating a screenful before the broker reaches the options table. */
.bp-bq-received-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  background: var(--bp-success-bg, #ecfdf5);
  border: 1px solid var(--bp-success-border, #10b981);
  border-radius: var(--bp-radius);
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  text-align: left;
}
.bp-bq-received-icon {
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  background: var(--bp-success-bg, #d1fae5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bp-bq-received-icon svg { width: 16px; height: 16px; }
.bp-bq-received-title {
  font-family: var(--bp-font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.bp-bq-received-banner .bp-text-lg {
  font-size: 0.8125rem;
  margin: 0;
}
@media (max-width: 640px) {
  .bp-bq-received-banner { flex-wrap: wrap; }
}

/* Success banner — "Quote ready" (status=quoted + autoQuotedBy). R7 —
   trimmed padding + tighter title/copy gap so the banner reads as a compact
   confirmation strip rather than a tall block above the options table. */
.bp-bq-autoquoted-banner {
  background: var(--bp-success-bg, #ecfdf5);
  border-left: 4px solid var(--bp-success-border, #10b981);
  padding: var(--space-sm, 8px) var(--space-md, 16px);
}
.bp-bq-autoquoted-banner .bp-bq-banner-title {
  margin-bottom: 2px;
}
.bp-bq-autoquoted-banner .bp-text-lg {
  font-size: 0.8125rem;
}

/* P1-2: Closed-state banner — terminal quote statuses (declined / NTU /
   cancelled / expired). Muted slate palette so it reads as "final" without
   being alarming. Centred like the received-banner for visual consistency. */
.bp-bq-closed-banner {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--bp-radius);
  padding: 28px 24px;
  text-align: center;
}
.bp-bq-closed-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}
.bp-bq-closed-banner .bp-text-lg {
  max-width: 52ch;
  margin: 0 auto;
}

/* Shared bold title row inside info/success banners. */
.bp-bq-banner-title {
  font-weight: 600;
  color: var(--bp-text);
  margin: 0 0 var(--space-xs);
}

/* ==========================================================================
   quoteapp-broker-bind — focused classes (Stream 2b inline-style sweep)
   All values use space/radius tokens where possible; no px literals on
   layout-critical paths. Unique non-tokenisable values (gradient, opacity,
   fixed dimensions) are documented inline.
   ========================================================================== */

/* Loading skeleton container — vertically centred with generous top padding. */
.bp-bind-loading {
  text-align: center;
  padding: 64px var(--space-lg);
}

/* Skeleton line width + centring for the heading placeholder. */
.bp-bind-skel-head {
  width: 200px;
  margin: 0 auto var(--space-sm);
}

/* Skeleton line width + centring for the subtitle placeholder. */
.bp-bind-skel-row {
  width: 300px;
  margin: 0 auto;
}

/* Navy gradient hero card — wraps quote identity + accepted status. */
.bp-bind-hero {
  background: linear-gradient(135deg, #0a192f, #1a2d5a);
  color: #fff;
  border-radius: var(--bp-radius-lg);
  padding: var(--space-lg) 28px;
  margin-bottom: var(--space-md);
}

/* ── Item 18 · Bind-page density toggle + compact mode ─────────────── */
.bp-bind-density {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin: 0 0 var(--space-sm);
  background: var(--bp-surface-muted);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-full);
}
.bp-bind-density-btn {
  border: none;
  background: transparent;
  color: var(--bp-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--bp-radius-full);
  cursor: pointer;
}
.bp-bind-density-btn.is-active {
  background: #fff;
  color: var(--bp-accent);
  box-shadow: var(--bp-shadow-sm);
}
/* Compact mode tightens the airy default spacing + type the UAT flagged. */
.bp-bind-compact .bp-bind-hero { padding: var(--space-md) 20px; margin-bottom: var(--space-sm); }
.bp-bind-compact .bp-bind-hero-title { font-size: 1.25rem; }
.bp-bind-compact .bp-card { padding: var(--space-md); margin-bottom: var(--space-sm) !important; }
.bp-bind-compact .bp-bind-card-h2 { margin-bottom: var(--space-xs); }
.bp-bind-compact .bp-bind-hero-stats { gap: var(--space-md); }
.bp-bind-compact .bp-disclosure-question { padding: var(--space-sm) var(--space-md); }

/* "Bind Policy" heading inside the hero — display size, normal weight. */
.bp-bind-hero-title {
  font-family: var(--bp-font-sans, Inter);
  letter-spacing: -0.02em;
  font-size: 1.375rem;
  font-weight: 400;
}

/* Hero subtitle — de-emphasised, small, slight opacity. */
.bp-bind-hero-subtitle {
  font-size: 0.8125rem;
  opacity: 0.6;
  margin-top: 2px;
}

/* Stats strip below the hero header row — auto-fit grid with white hairline divider. */
.bp-bind-hero-stats {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
}

/* Monospace value cell for Quote number (0.9375rem medium). */
.bp-bind-hero-val-mono {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Total premium value — larger, bold mono. */
.bp-bind-hero-val-total {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Section h2 headings used across all bind cards — 1.125rem, matches submit h2. */
.bp-bind-card-h2 {
  font-family: var(--bp-font-sans, Inter);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.125rem;
  margin: 0;
}

/* Full-width collapsed premium breakdown table. */
.bp-bind-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Policy detail grid — two-column, with a border-top separator from the table above. */
.bp-bind-detail-grid {
  border-top: 1px solid var(--bp-border);
  padding-top: var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  font-size: 0.875rem;
}

/* Currency glyph left of the broker fee input. */
.bp-bind-currency {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bp-text-muted);
}

/* Broker fee number input — constrained to a readable width. */
.bp-bind-fee-input {
  max-width: 200px;
}

/* Declaration scrollable text block — pre-formatted, surface-secondary bg. */
.bp-bind-decl-text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bp-text-secondary);
  white-space: pre-line;
  max-height: 200px;
  overflow-y: auto;
  padding: var(--space-md);
  background: var(--bp-surface-secondary);
  border-radius: var(--bp-radius-sm);
  margin-bottom: var(--space-md);
}

/* Acknowledgement label row — checkbox + text on a tinted surface. */
.bp-bind-ack-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: var(--space-md);
  background: var(--bp-surface-secondary);
  border-radius: var(--bp-radius-sm);
}

/* Body text inside an ack label — readable line-height. */
.bp-bind-ack-label span {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Custom-sized checkbox with FTA pink accent. */
.bp-bind-checkbox {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--fta-pink);
  flex-shrink: 0;
}

/* Declaration card border override — bp-card has border:none by default. */
.bp-bind-decl-border {
  border: 2px solid var(--bp-border);
}

/* FTA-UAT-97: highlight the declaration card when Review & Sign is clicked
   with a consent checkbox still unticked — the button stays clickable, so
   this is the only visual cue pointing back at the checkboxes. */
#declaration-section.error {
  border-color: var(--status-error);
}

/* Sticky bottom bar anchored to the viewport bottom. Solid background +
   top border — the earlier gradient fade left it semi-transparent, so the
   Review & Sign bar visually overlapped form fields while scrolling. */
.bp-bind-sticky {
  position: sticky;
  bottom: 0;
  background: var(--bp-surface);
  border-top: 1px solid var(--bp-border);
  padding: var(--space-md) 0 var(--space-lg);
  text-align: center;
}

/* Main bind button — full-width (capped), centred content, brand pink. */
.bp-bind-btn {
  width: 100%;
  max-width: 400px;
  justify-content: center;
  font-size: 1rem;
  padding: 14px 32px;
  background: var(--fta-pink);
}

/* Success state wrapper — centred, generous vertical padding. */
.bp-bind-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px var(--space-lg);
}

/* Success icon circle — green tinted, fixed 80×80. */
.bp-bind-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #d1fae5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

/* "Policy Bound" heading — display size, brand text colour. */
.bp-bind-success-h3 {
  font-family: var(--bp-font-sans, Inter);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
  margin: 0 0 var(--space-sm);
  color: var(--bp-text);
}

/* Contact footer — centred, small, muted, with a border-top rule. */
.bp-bind-footer-top {
  text-align: center;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  padding: var(--space-lg) 0 var(--space-sm);
  border-top: 1px solid var(--bp-border);
}

/* Legal footer — centred, small, muted, extra bottom breathing room. */
.bp-bind-footer-bottom {
  text-align: center;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  padding: var(--space-sm) 0 var(--space-xl);
}

/* ==========================================================================
   Stream 2b inline-style sweep — Settings, Policy, Login, Dashboard pages
   ========================================================================== */

/* ── Login page shell ───────────────────────────────────────────────────── */

/* Full-viewport flex column. body.bp-login-page centers it; this shell
 * provides the inner columnar flow: brand-header → clerk-mount → footer. */
.bp-login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  position: relative;
  width: 100%;
}
.bp-login-shell[hidden] { display: none; }

/* Fixed grid overlay — subtle white lines on the navy background. */
.bp-login-grid-overlay {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* Logo img — fixed height, proportional width. */
.bp-login-logo { height: 44px; width: auto; }

/* "Broker Portal" tagline below the logo — white-faint on navy. */
.bp-login-tagline {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  font-family: var(--bp-font-sans, Inter);
  font-weight: 500;
}

/* Clerk SDK mount point — full width, capped, z-indexed above the overlay. */
.bp-login-clerk-mount {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

/* Copyright footer line on the login page. */
.bp-login-footer-text { font-size: 0.75rem; color: var(--bp-text-muted); }

/* ── Settings page — profile + team panels ──────────────────────────────── */

/* Avatar separator row — flex, border-bottom divides it from the form fields. */
.bp-settings-avatar-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--bp-border);
}
.bp-settings-avatar-row[hidden] { display: none; }

/* Circular avatar badge — 64 × 64, brand-pink fill, white initial. */
.bp-settings-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  background: var(--fta-pink);
  color: #fff;
  flex-shrink: 0;
}
.bp-settings-avatar[hidden] { display: none; }

/* Invite-a-broker inset box on the Team tab. */
.bp-settings-invite-box {
  border-radius: var(--bp-radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--bp-surface-muted);
  border: 1px solid var(--bp-border);
}

/* Label text inside the invite box ("Invite a Broker"). */
.bp-settings-invite-label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--bp-text);
}

/* Admin-only sidebar tabs (#tab-team / #tab-house) are hidden via the [hidden]
 * attribute. .bp-settings-tab sets display:block, which overrides the UA
 * [hidden]{display:none} rule — so without this explicit override the tabs
 * would stay visible to members. Re-assert the hide. */
.bp-settings-tab[hidden] { display: none; }

/* ── Notification preferences (Notifications tab) ─────────────────────────── */
.bp-settings-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--bp-border-light);
  cursor: pointer;
}
.bp-settings-notif-row:last-child { border-bottom: none; }
.bp-settings-notif-text { display: flex; flex-direction: column; gap: 2px; }
.bp-settings-notif-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bp-text);
}
.bp-settings-notif-desc {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
}

/* ── Team members list (Team tab) ─────────────────────────────────────────── */
.bp-settings-team-empty {
  padding: var(--space-md);
  text-align: center;
  color: var(--bp-text-muted);
  font-size: 0.875rem;
}
.bp-settings-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px 0;
  border-bottom: 1px solid var(--bp-border-light);
}
.bp-settings-team-name { font-weight: 500; font-size: 0.875rem; }
.bp-settings-team-meta { font-size: 0.75rem; color: var(--bp-text-muted); }
.bp-settings-team-actions { display: flex; align-items: center; gap: var(--space-sm); }
.bp-settings-team-role {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bp-text-muted);
  text-transform: uppercase;
}
.bp-settings-team-select { width: auto; font-size: 0.75rem; padding: 4px 8px; }

/* ── Policy page — action row shells ────────────────────────────────────── */

/* Shared shell for the closing / renew / message action rows.
 * display: none must stay inline — JS uses el.style.display = '' / 'none'.
 * This class carries all other layout/visual properties. */
.bp-policy-action-row {
  margin: var(--space-md) 0 var(--space-sm);
  padding: var(--space-md) 20px;
  background: var(--bp-surface-muted);
  border-radius: var(--bp-radius);
}

/* Inner flex wrapper for the renew and message rows. */
.bp-policy-action-body {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.bp-policy-action-body[hidden] { display: none; }

/* Flex-grow text block inside an action row. */
.bp-policy-action-item { flex: 1; min-width: 240px; }

/* Bold label line at the top of an action row block. */
.bp-policy-action-title {
  font-weight: 600;
  color: var(--bp-text);
  margin: 0 0 var(--space-xs);
}

/* Items 2 & 3 — neutral "Coming soon" pill (not the urgent pink) marking a
   gated, not-yet-built action. */
.bp-coming-soon-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--bp-radius-full);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-text-secondary);
  background: var(--bp-surface-muted);
  border: 1px solid var(--bp-border);
  vertical-align: middle;
}

/* Muted helper/description text below the action row title. */
.bp-policy-action-desc { color: var(--bp-text-muted); font-size: 0.9375rem; }

/* Item 7 — reassurance hint for brokers whose systems auto-send closings. */
.bp-policy-action-hint {
  font-size: 0.8125rem;
  color: var(--bp-text-secondary);
  background: var(--bp-surface-muted);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  padding: 8px 12px;
  line-height: 1.45;
}

/* Mid-term adjustment — broker-requested MTA form + indicative preview.
   Body stacks vertically (title/desc/list above, the CTA button pinned
   below) rather than the side-by-side layout used by renew/message. */
.bp-mta-body {
  align-items: flex-start;
  flex-direction: column;
}
.bp-mta-form {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--bp-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
/* Non-binding indicative estimate — deliberately styled as informational,
   never as a confirmed price (see the "Indicative only" note text). */
.bp-mta-indicative {
  margin: 0;
  padding: 8px 12px;
  background: var(--bp-surface-muted);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  font-size: 0.8125rem;
  color: var(--bp-text-secondary);
}
.bp-mta-indicative strong { color: var(--bp-text); }

/* File input in the closing upload form. The native "Choose file" button
   is the visible chrome here, so style ::file-selector-button to match the
   secondary .bp-btn look instead of leaving the raw UA button. Audit #2. */
.bp-closing-file-input { display: block; margin-bottom: var(--space-sm); font-size: 0.875rem; color: var(--bp-text-secondary); }
.bp-closing-file-input::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  background: var(--bp-surface);
  color: var(--bp-text);
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--bp-transition), border-color var(--bp-transition);
}
.bp-closing-file-input::file-selector-button:hover {
  background: var(--bp-surface-muted);
  border-color: var(--bp-border-strong);
}

/* Error span in the closing form — colour/size only.
 * display: none stays inline; JS controls it via el.style.display. */
.bp-closing-error { color: var(--bp-error, #dc2626); font-size: 0.8125rem; }

/* Standalone validation-error paragraph (MTA request form, interested-party
 * add form). Mirrors .bp-closing-error's colour token, plus a subtle box so
 * a block-level error reads as an error state rather than plain text.
 * `hidden` attribute (not display:none inline) stays the JS-controlled gate. */
.bp-error {
  color: var(--bp-error, #dc2626);
  background: rgba(220, 38, 38, 0.06);
  border-radius: var(--bp-radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ==========================================================================
   Stream 7 — Merged record/quote page + UW broker-comment banner
   ========================================================================== */

/* UW note banner — surfaces `underwriterMessage` from the quote response.
 * Navy left-rule (NOT pink, per visual-design-agent review on the original
 * Stream 7 plan). Pink left-rules would compete with the .bp-action-card
 * urgency family; navy reserves "underwriter speaking" as its own visual
 * register. */
.bp-uw-note {
  display: block;
  margin: 0 0 var(--space-md);
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 4px);
  background: var(--bp-surface, #fff);
  border: 1px solid var(--bp-border, #e5e7eb);
  border-left: 4px solid var(--fta-navy, #0a192f);
  border-radius: var(--bp-radius);
  position: relative;
}
.bp-uw-note-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fta-navy, #0a192f);
  margin: 0 0 var(--space-xs);
}
.bp-uw-note-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--bp-text, #0a192f);
}
.bp-uw-note-meta {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  color: var(--bp-text-muted, #6b7280);
}

/* Broker's own "Additional notes" (BUG-36) — read-only echo of what the
 * broker typed on submit. Distinguished from the navy UW note by a muted
 * left rule + eyebrow so it reads as "your input", not "from FTA". */
.bp-broker-note {
  border-left-color: var(--bp-text-muted, #6b7280);
  background: var(--bp-surface-subtle, #f9fafb);
}
.bp-broker-note .bp-uw-note-eyebrow {
  color: var(--bp-text-muted, #6b7280);
}

/* Markdown reset class for UW message bodies (and any future broker-facing
 * markdown surface — quote presentation pages may use this too). Resets
 * UA list-style + margins so the markdown doesn't fight the page rhythm. */
.bp-prose p,
.bp-prose ul,
.bp-prose ol,
.bp-prose pre,
.bp-prose blockquote {
  margin: 0 0 var(--space-sm);
}
.bp-prose p:last-child,
.bp-prose ul:last-child,
.bp-prose ol:last-child { margin-bottom: 0; }
.bp-prose ul,
.bp-prose ol { padding-left: var(--space-lg); }
.bp-prose a {
  color: var(--bp-accent, #e6007e);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bp-prose code {
  background: var(--bp-surface-muted, #f4f6f8);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--bp-font-mono, ui-monospace, monospace);
  font-size: 0.85em;
}

/* Limit cards — side-by-side variant of the legacy renderLimitsTable.
 * Up to 4 visible; horizontal scroll if more. Selected option gets a pink
 * ring + subtle elevation. Stream 7 PR-27 will refactor renderLimitsTable
 * to renderLimitsCards using these classes; CSS lands now so the markup
 * change is the only diff in that follow-up. */
.bp-limit-cards {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-xs); /* scrollbar breathing room */
  scroll-snap-type: x mandatory;
  margin: 0 0 var(--space-md);
}
.bp-limit-card {
  flex: 0 0 auto;
  min-width: 200px;
  max-width: 260px;
  scroll-snap-align: start;
  background: var(--bp-surface, #fff);
  border: 1px solid var(--bp-border, #e5e7eb);
  border-radius: var(--bp-radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  cursor: pointer;
  transition: border-color var(--bp-transition), box-shadow var(--bp-transition);
}
.bp-limit-card:hover {
  border-color: var(--bp-border-strong, var(--bp-text-muted));
}
.bp-limit-card[aria-pressed="true"],
.bp-limit-card.is-selected {
  border-color: var(--fta-pink, #e6007e);
  box-shadow: 0 0 0 2px rgba(232, 6, 140, 0.18);
}
.bp-limit-card-limit {
  font-family: var(--bp-font-mono, ui-monospace, monospace);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bp-text);
}
.bp-limit-card-premium {
  font-size: 0.875rem;
  color: var(--bp-text-muted);
}

/* ==========================================================================
   Stream 5 — Submit page restructure + price preview widget
   ========================================================================== */

/* Collapsed state for Steps 1+2 when Step 3 is scrolled into view. The
 * IntersectionObserver in quoteapp-broker-submit.js adds .bp-step-collapsed
 * to #step-products and #step-context. Clicking either re-expands them. */
.bp-step-collapsed {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  position: relative;
  transition: padding var(--bp-transition);
}
.bp-step-collapsed > * {
  display: none;
}
.bp-step-collapsed::after {
  /* One-line summary derived from the section title, with a trailing
   * "Edit" affordance. Source title remains in the DOM (hidden via the
   * `.bp-step-collapsed > *` rule above); we synthesise the summary from
   * the eyebrow + a constant "Edit ✎" hint. */
  content: attr(data-collapsed-summary) " · Edit";
  display: block;
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
}
.bp-step-collapsed:hover {
  background: var(--bp-surface-hover, var(--bp-surface-muted));
}

/* New-Submission two-column layout: form fills the main column, the
   indicative-price preview becomes a sticky right rail beside it on
   desktop (audit #9). Below 1024px it collapses to a single column and the
   price preview (which already has its own @media drop styling) falls
   under the form. min-width:0 on the main column lets the form's grids
   shrink correctly inside the track. */
@media (min-width: 1024px) {
  .bp-submit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-lg);
    align-items: start;
  }
}
.bp-submit-main {
  min-width: 0;
  position: relative; /* anchor for .bp-extract-overlay (item 1) */
}

/* ── Extraction overlay (item 1) ──────────────────────────────────────────
   Covers the form while AI pre-fill is in flight so the broker never sees a
   blank form mid-extraction and reads it as a failure. */
.bp-extract-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(40px, 12vh, 140px);
  background: color-mix(in srgb, var(--bp-surface, #fff) 78%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: var(--bp-radius-lg);
}
.bp-extract-overlay[hidden] { display: none; }
.bp-extract-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  max-width: 360px;
}
.bp-extract-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--fta-pink) 22%, transparent);
  border-top-color: var(--fta-pink);
  animation: bp-extract-spin 0.8s linear infinite;
}
@keyframes bp-extract-spin { to { transform: rotate(360deg); } }
.bp-extract-overlay-text {
  font-weight: 600;
  color: var(--fta-navy, #0a192f);
  font-size: 1rem;
  margin: 0;
  transition: opacity 0.25s ease;
}
.bp-extract-overlay-sub {
  font-size: 0.8125rem;
  color: var(--bp-text-secondary, #64748b);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .bp-extract-spinner { animation-duration: 1.6s; }
}

/* ── Adoptable AI/ABR suggestions (item 3) ────────────────────────────────
   Never overwrite a broker's input — surface the AI/ABR pick as an adoptable
   chip instead. Used for product additions (Step 1) and per-field value
   suggestions (Risk Details). */
.bp-product-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.bp-product-suggest[hidden] { display: none; }
/* When Step 1/2 auto-collapse on scroll, don't leave the adopt chips floating
   above the one-line summary bar. */
.bp-step-collapsed .bp-product-suggest { display: none; }
.bp-product-suggest-label {
  font-size: 0.8125rem;
  color: var(--bp-text-secondary, #64748b);
  font-weight: 500;
}
.bp-product-suggest-chip,
.bp-adopt-suggest-btn {
  border: 1px solid color-mix(in srgb, var(--fta-pink) 45%, transparent);
  background: color-mix(in srgb, var(--fta-pink) 8%, #fff);
  color: var(--fta-pink);
  font-weight: 600;
  font-size: 0.8125rem;
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.bp-product-suggest-chip:hover,
.bp-adopt-suggest-btn:hover {
  background: var(--fta-pink);
  color: #fff;
}
.bp-adopt-suggest {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 6px;
  padding: 2px 4px 2px 10px;
  background: color-mix(in srgb, var(--fta-pink) 7%, #fff);
  border: 1px dashed color-mix(in srgb, var(--fta-pink) 40%, transparent);
  border-radius: 999px;
  font-size: 0.78rem;
}
.bp-adopt-suggest-label {
  color: var(--bp-text-secondary, #475569);
}
.bp-adopt-suggest-btn {
  padding: 1px 10px;
  font-size: 0.75rem;
}

/* ── Price-preview widget — sticky right-rail on ≥1024px, bottom sheet below ── */
.bp-price-preview {
  background: var(--bp-surface, #fff);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 120px;
}
@media (min-width: 1024px) {
  .bp-price-preview {
    position: sticky;
    top: var(--space-lg);
  }
}
@media (max-width: 1023px) {
  /* Below tablet → render below the form as a banner-style card. */
  .bp-price-preview {
    margin-top: var(--space-md);
  }
}
.bp-price-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
.bp-price-preview-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
/* UAT — "Quoting for {insuredName}" reminder shown when the Insured Name
   field is hidden from the main form (clientId prefill). */
.bp-price-preview-insured-banner {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bp-text);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--bp-border);
}
.bp-price-preview-total {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.bp-price-preview-amount {
  font-family: var(--bp-font-mono, ui-monospace, monospace);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bp-text);
  letter-spacing: -0.02em;
}
.bp-price-preview-breakdown {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.bp-price-preview-breakdown > div {
  display: flex;
  justify-content: space-between;
  color: var(--bp-text-muted);
}
.bp-price-preview-breakdown dt,
.bp-price-preview-breakdown dd {
  margin: 0;
}
.bp-price-preview-breakdown dd {
  font-family: var(--bp-font-mono, ui-monospace, monospace);
}
/* Item R2 — informational hint, not a CTA pill. Used for "submit to see your
   indicative premium" and the withhold/referral next-step copy. Reads as
   quiet inline status text (matches .bp-text-sm.bp-text-muted elsewhere in
   the portal) rather than a pink pill, since it isn't clickable. */
.bp-price-preview-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bp-text-muted);
}
.bp-price-preview-hint::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--bp-radius-full);
  background: var(--bp-accent);
}

/* Item 7 (B2) — "will be referred" message inside the price-preview widget
   (broker-price-preview.js predictHardReferral/renderPredictedReferral).
   UAT97 (item 1) — promoted from quiet body text to a prominent branded
   callout: icon + bold heading + explanatory sentence on a pink-tinted card
   with an accent left border (same treatment family as .bp-referred-banner
   on the post-submit confirmation screen), so it reads as a distinct,
   can't-miss state in the rail. The widget shell (.bp-price-preview) already
   collapses to a bottom-sheet banner below 1024px, so this stays legible on
   narrow viewports without its own breakpoint. */
.bp-price-preview-referred {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bp-accent-subtle);
  border: 1px solid color-mix(in srgb, var(--bp-accent) 35%, transparent);
  border-left: 3px solid var(--bp-accent);
  border-radius: var(--bp-radius);
}
.bp-price-preview-referred-icon {
  flex-shrink: 0;
  color: var(--bp-accent);
}
.bp-price-preview-referred-text {
  /* min-width:0 overrides the flex-item default of min-width:auto (content
     width), which would otherwise let the heading/body push the card wider
     than the rail instead of wrapping — the classic flexbox text-overflow
     gotcha. flex:1 lets the text column claim the remaining row width. */
  flex: 1;
  min-width: 0;
}
.bp-price-preview-referred-title {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--bp-text);
  margin: 0 0 var(--space-xs);
}
.bp-price-preview-referred-body {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--bp-text-secondary);
}

/* Item 9 — list of fields still needed before an indicative price shows. */
.bp-price-missing-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.bp-price-missing-list li {
  font-size: 0.8125rem;
  color: var(--bp-text-secondary);
  margin-bottom: 4px;
}

/* Item 2 — Combined PI&GL appetite note, inline treatment (Option 1 from
   agents/renewals/ui/src/broker-edu-mockup.html). Shown below the Step-2
   product-card row whenever Combined PI&GL is relevant. */
.bp-pigl-edu-inline {
  display: flex;
  gap: 10px;
  margin-top: var(--space-md);
  padding: 12px 14px;
  background: var(--bp-accent-subtle);
  border: 1px solid color-mix(in srgb, var(--bp-accent) 30%, transparent);
  border-radius: var(--bp-radius-sm);
}
.bp-pigl-edu-inline-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bp-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--bp-font-sans);
}
.bp-pigl-edu-inline-body {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bp-text-secondary);
}
.bp-pigl-edu-inline-title {
  font-weight: 700;
  color: var(--bp-text);
  margin: 0 0 3px;
  font-size: 0.8125rem;
}

/* Submit-form inline validation summary (quoteapp-broker-submit.js
   showValidationErrors). Replaces a hardcoded inline style.cssText that
   pinned the stale pink hex (#e6007e) — now driven by the live tokens. */
.bp-submit-error-box {
  border: 1px solid var(--bp-accent);
  background: var(--bp-accent-subtle);
  color: var(--bp-text);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--bp-radius-sm);
  margin: var(--space-md) 0;
}
.bp-submit-error-box ul {
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-md);
}

/* ── Item 13 — record-header status badge ─────────────────────────────────
   The header badge is the at-a-glance status for the whole record, so it
   reads a notch larger than the 0.625rem inline list/table badges. */
.bp-record-header #record-stage {
  font-size: 0.8125rem;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* ── Items 11/16 — quote + policy document-parity surfaces ────────────────
   Appended per the broker-portal CSS contract (no edits to existing rules).
   Covers: the policy-detail "both days at 4pm" period note, and the quote
   premium-box breakdown rows rendered by broker-quote-detail.js
   (renderPremiumBreakdown writes bare <span> children, so style them here
   without the legacy .label/.value child classes used elsewhere). */

.bp-policy-detail-note {
  margin: 6px 0 0 0;
  font-size: 0.75rem;
  color: var(--bp-text-muted);
}

/* Premium-box breakdown rows on the quote surface (#premium-breakdown). The
   shared .bp-premium-breakdown-row gives the flex layout; these rules colour
   the bare label / amount spans this renderer emits. */
#premium-breakdown .bp-premium-breakdown-row {
  font-size: 0.8125rem;
}

#premium-breakdown .bp-premium-breakdown-row > span:first-child {
  color: var(--bp-text-muted);
}

#premium-breakdown .bp-premium-breakdown-row > span:last-child {
  font-family: var(--bp-font-mono);
  font-weight: 600;
  color: var(--bp-text-secondary);
}

/* Item 12 — closing-calc table treatment, matching the quote document:
   accent rows for Limit of Liability + Gross Premium, bold ink for Base /
   Net premium, and separator rules above Gross and Net. */
#premium-breakdown .bp-premium-breakdown-row.cc-accent > span,
#premium-breakdown .bp-premium-breakdown-row.cc-accent > span:first-child,
#premium-breakdown .bp-premium-breakdown-row.cc-accent > span:last-child {
  color: var(--bp-accent);
  font-weight: 700;
}
#premium-breakdown .bp-premium-breakdown-row.cc-strong > span:first-child,
#premium-breakdown .bp-premium-breakdown-row.cc-strong > span:last-child {
  color: var(--bp-text);
  font-weight: 700;
}
#premium-breakdown .bp-premium-breakdown-row.cc-rule2 {
  border-top: 2px solid var(--bp-border);
  margin-top: 4px;
  padding-top: 6px;
}
#premium-breakdown .bp-premium-breakdown-row.cc-rule1 {
  border-top: 1px solid var(--bp-border);
  margin-top: 4px;
  padding-top: 6px;
}

/* Plain-name fallback (Step 1) — the disclosure summary reads as a quiet,
   clickable affordance under the ABN search. */
.bp-manual-name-summary {
  cursor: pointer;
  color: var(--bp-accent);
  font-weight: 600;
  list-style: none;
}
.bp-manual-name-summary::-webkit-details-marker { display: none; }
.bp-manual-name-summary::before {
  content: "+ ";
  font-weight: 700;
}
.bp-manual-name[open] .bp-manual-name-summary::before { content: "− "; }
/* ==========================================================================
   ── Workstream E (item 22) — colour semantics for the human channel ──

   The Frankie pill (agent-ui.css) is pink while AI handles, navy on handoff.
   The underwriter thread drawer is the HUMAN channel, so it reads navy:
   a navy header rule + navy context chip distinguish it from Frankie's pink,
   without recolouring the shared brand-pink primary button.
   ========================================================================== */

.bt-drawer-header {
  box-shadow: inset 0 2px 0 var(--fta-navy, #0a192f);
}
.bt-context-chip {
  color: var(--fta-navy, #0a192f);
  background: rgba(11, 22, 54, 0.08);
}

/* ==========================================================================
   ── Workstream F (item 25) — Your Underwriter card + dashboard hero ──
   ========================================================================== */

/* Hero band: welcome banner + UW card side-by-side on desktop, stacked on
   mobile. The UW card is a fixed, comfortable width; the welcome flexes. */
.bp-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-lg);
  /* Item 8 — top-align so the fixed-width UW card keeps its natural height
     while the left column grows with the "Needs your attention" cards. */
  align-items: start;
  margin-bottom: var(--space-lg);
}
/* Item 8 — left column: welcome banner + needs-attention stacked. min-width:0
   lets the column shrink so the action-card grid wraps inside it. */
.bp-dashboard-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}
.bp-dashboard-hero-main .bp-actions-needed {
  margin-bottom: 0;
}
/* Hero "Get a Quote" — sits on the welcome-greeting row (item R1), right of
   the greeting, rather than stretching full-width in the column flex. */
.bp-hero-cta {
  display: flex;
  flex-shrink: 0;
}
.bp-hero-cta .bp-btn {
  align-self: center;
}
@media (max-width: 540px) {
  .bp-hero-cta .bp-btn {
    align-self: stretch;
  }
}
@media (max-width: 860px) {
  .bp-dashboard-hero {
    grid-template-columns: 1fr;
  }
}

.bp-uw-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--bp-surface);
  border: 1px solid var(--bp-border-light);
  border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow-sm);
}

.bp-uw-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fta-pink, #e6007e);
}

.bp-uw-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bp-uw-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--bp-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fta-navy, #0a192f);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
}

.bp-uw-identity-text { flex: 1 1 auto; min-width: 0; }

.bp-uw-name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--bp-text);
}

.bp-uw-title {
  font-size: 0.6875rem;
  color: var(--bp-text-muted);
  line-height: 1.3;
}

.bp-uw-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bp-uw-contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--bp-text);
  text-decoration: none;
}
.bp-uw-contact-link svg { color: var(--bp-text-muted); flex-shrink: 0; }
.bp-uw-contact-link:hover { color: var(--bp-accent); text-decoration: underline; }

/* Each contact (Fin Lines UW / GL UW / Online Specialist) is a single compact
   row: avatar · name/role · icon actions. Three contacts fit in a small card. */
.bp-uw-person {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.bp-uw-person + .bp-uw-person {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--bp-border-light);
}

/* Icon action cluster (email / chat / book) on the right of each row. */
.bp-uw-icons {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
  margin-left: auto;
}
.bp-uw-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bp-border-light);
  border-radius: var(--bp-radius);
  background: #fff;
  color: var(--bp-text-muted);
  cursor: pointer;
  text-decoration: none;
}
.bp-uw-icon:hover {
  color: var(--fta-pink, #e6007e);
  border-color: var(--fta-pink, #e6007e);
}

/* Small pink dot marks the primary point of contact (tooltip carries the text). */
.bp-uw-primary-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fta-pink, #e6007e);
  vertical-align: middle;
}

.bp-uw-shared-phone {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--bp-border-light);
}

.bp-uw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
/* The two contact CTAs share a row (flex:1 each); the Frankie button drops to
   its own full-width row beneath them (item 1 — fills the card's dead space). */
.bp-uw-actions .bp-btn { flex: 1 1 0; justify-content: center; }
.bp-uw-actions .bp-btn-block { flex: 1 0 100%; }

/* Urgent / NTU callout cards (.bp-action-card--urgent) are a fixed flex ROW
   with two no-wrap CTAs + a dismiss ×, and shipped without a mobile breakpoint
   — at ≤375px they overflow the viewport (horizontal scroll) and crush the
   headline to one word per line. Stack them on narrow screens. (Surfaced by
   the item-26 NTU cards; the base .bp-action-card is already column.) */
@media (max-width: 600px) {
  .bp-action-card--urgent {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    padding-right: calc(var(--space-md) + 16px);
  }
  .bp-action-card--urgent .bp-action-card-kicker,
  .bp-action-card--urgent .bp-action-card-cta {
    white-space: normal;
  }
  .bp-action-card-cta--secondary {
    margin-left: 0;
  }
  .bp-action-card--urgent .bp-action-card-dismiss {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    margin-left: 0;
  }
}

/* Quote-surface "Limit of Liability, Excess & Premium" card (#limits-section).
   The options TABLE is intentionally full-bleed — edge-to-edge, no side padding
   (#limits-section is a full-width grid child outside .bp-quote-main). Only the
   heading and footnote get inset so they don't sit flush against the card wall;
   the table keeps spanning the full card width. */
.bp-quote-table-section > .bp-section-heading {
  padding: 20px 20px 0;
}
/* De-dup pass — subtitle replacing the removed Named Insured card:
   "{Product label} — {Insured activities}", inset to match the heading. */
.bp-limits-subtitle {
  padding: 4px 20px 0;
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
}
.bp-quote-table-section > .bp-quote-footnote {
  padding: 0 20px;
  margin-bottom: 18px;
}
@media (max-width: 640px) {
  .bp-quote-table-section > .bp-section-heading {
    padding: 16px 16px 0;
  }
  .bp-limits-subtitle {
    padding: 4px 16px 0;
  }
  .bp-quote-table-section > .bp-quote-footnote {
    padding: 0 16px;
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   ── Workstream E — Frankie panel (item 22/23) ──

   Broker-only overrides for the shared agent-ui pill (agent-ui.css defines the
   base + the `--agent-ui-accent*` vars). Kept HERE, not in agent-ui.css, so
   this broker-only styling ships only on broker pages and stays off the global
   critical-path byte budget. Two things differ from the staff panel:
     1. Drawer parity with the underwriter thread drawer (.bp-drawer): a dimmed,
        blurred backdrop on every breakpoint + matched 480px width + header/
        footer rhythm, so Frankie reads as a contained drawer over the chrome.
     2. Colour semantics: pink while Frankie (AI) is handling, navy once it
        hands off to a human underwriter ([data-handler="uw"]).
   ========================================================================== */

body.bp-body .agent-ui {
  width: 480px;
}

/* Drawer-style dimmed backdrop on all sizes (the staff panel hides it ≥1280px).
   Kept deliberately light — a soft 2px blur + low dim — so the broker can still
   read the screen Frankie opened over (feedback item 9). Heavier blur made the
   underlying quote unreadable. */
body.bp-body .agent-ui-backdrop {
  display: block;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Match the thread drawer's header / footer rhythm. */
body.bp-body .agent-ui-header {
  padding: 18px var(--space-lg, 24px) 14px;
}
body.bp-body .agent-ui-input {
  padding: 16px var(--space-lg, 24px);
}
body.bp-body .agent-ui-chat-messages {
  padding: 20px var(--space-lg, 24px);
}

/* Handoff: Frankie → human underwriter. Recolour the panel accent navy. */
body.bp-body .agent-ui[data-handler="uw"] {
  --agent-ui-accent: var(--fta-navy, #0a192f);
  --agent-ui-accent-hover: #1b2a52;
  --agent-ui-accent-ring: rgba(11, 22, 54, 0.16);
  --agent-ui-accent-subtle: rgba(11, 22, 54, 0.08);
}

/* Thin top rule on the panel header to signal who's handling. */
body.bp-body .agent-ui[data-handler="ai"] .agent-ui-header {
  box-shadow: inset 0 2px 0 var(--fta-pink, #e6007e);
}
body.bp-body .agent-ui[data-handler="uw"] .agent-ui-header {
  box-shadow: inset 0 2px 0 var(--fta-navy, #0a192f);
}

/* Rich-text (marked) output in the Frankie panel — restore list markers +
   paragraph rhythm so a numbered/bulleted reply reads as a list, not a wall of
   text (item 23). marked only renders on broker pages, so these live here. */
body.bp-body .agent-ui-msg-content p {
  margin: 0 0 var(--space-xs);
}
body.bp-body .agent-ui-msg-content p:last-child {
  margin-bottom: 0;
}
body.bp-body .agent-ui-msg-content ul,
body.bp-body .agent-ui-msg-content ol {
  margin: var(--space-xs) 0;
  padding-left: 1.25em;
}
body.bp-body .agent-ui-msg-content ul { list-style: disc; }
body.bp-body .agent-ui-msg-content ol { list-style: decimal; }
body.bp-body .agent-ui-msg-content li { margin: 2px 0; }

/* ── Items 6/10/27 — wizard limit defaults, structured fields, disclosure union, edit/resubmit ── */

/* Item 10B — per-product heading inside the unioned (COMBINED) disclosure set */
.bp-disclosure-group-head {
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bp-text-secondary);
  margin: 8px 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bp-border-light);
}
.bp-disclosure-group-head:first-child {
  margin-top: 0;
}

/* Item 10B — detail-on-trigger free-text box revealed under a Yes/No question */
.bp-disclosure-detail {
  margin-top: 10px;
}
.bp-disclosure-detail .bp-label {
  display: block;
  color: var(--bp-text-muted);
  margin-bottom: 4px;
}
.bp-disclosure-detail-input {
  width: 100%;
  resize: vertical;
}

/* ==========================================================================
   Step 3 — prominent document uploader + extraction animation (feedback item 5)
   ========================================================================== */

/* Larger, more inviting dropzone now that upload is the primary path. */
.bp-upload-area--lg {
  padding: 40px 32px;
}
/* setupDragDrop() toggles .bp-drag-active; mirror the .dragover highlight. */
.bp-upload-area.bp-drag-active {
  border-color: var(--fta-pink);
  background: #fdf2f8;
}

/* "Upload → read → form fills" graphic. Pure SVG + CSS, loops subtly. */
.bp-extract-anim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 4px 0 18px;
}
.bp-extract-anim svg {
  width: 100%;
  max-width: 280px;
  height: auto;
}
.bp-extract-anim-caption {
  font-size: 0.75rem;
  color: var(--bp-text-muted);
  letter-spacing: 0.01em;
}
.bp-extract-anim .bpx-doc rect,
.bp-extract-anim .bpx-form rect:first-child {
  fill: #fff;
  stroke: var(--bp-border);
  stroke-width: 1.5;
}
.bp-extract-anim .bpx-line {
  stroke: #cbd5e1;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.bp-extract-anim .bpx-field {
  fill: var(--bp-surface-muted, #f1f5f9);
}
.bp-extract-anim .bpx-fill {
  fill: var(--fta-pink);
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  animation: bpx-fill 3.6s ease-in-out infinite;
}
.bp-extract-anim .bpx-fill-1 { animation-delay: 0.2s; }
.bp-extract-anim .bpx-fill-2 { animation-delay: 0.7s; }
.bp-extract-anim .bpx-fill-3 { animation-delay: 1.2s; }
.bp-extract-anim .bpx-dot {
  fill: var(--fta-pink);
  opacity: 0;
  animation: bpx-travel 3.6s ease-in-out infinite;
}
.bp-extract-anim .bpx-dot-1 { animation-delay: 0s; }
.bp-extract-anim .bpx-dot-2 { animation-delay: 0.45s; }
.bp-extract-anim .bpx-dot-3 { animation-delay: 0.9s; }

@keyframes bpx-fill {
  0%, 18% { transform: scaleX(0); }
  42%, 88% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes bpx-travel {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  30% { opacity: 1; }
  40%, 100% { transform: translateX(64px); opacity: 0; }
}

/* Respect reduced-motion: show the end-state, no looping. */
@media (prefers-reduced-motion: reduce) {
  .bp-extract-anim .bpx-fill { animation: none; transform: scaleX(1); }
  .bp-extract-anim .bpx-dot { animation: none; opacity: 0; }
}

/* ==========================================================================
   Cross-sell cards (feedback item 3) — mirrors the internal quote editor's
   cross-sell card: a coloured-dot card with product + one-line "why" + CTA,
   replacing the old bare "Get a quote — X" buttons. One renderer
   (BrokerCommon.renderCrossSellTiles) → identical on every surface (submit
   Submission-Received page, record/policy page).
   ========================================================================== */
.bp-xsell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bp-xsell-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-surface, #fff);
  transition: border-color var(--bp-transition), box-shadow var(--bp-transition);
}
.bp-xsell-card:hover {
  border-color: var(--fta-pink);
  box-shadow: 0 1px 6px rgba(11, 22, 54, 0.06);
}
.bp-xsell-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.bp-xsell-body {
  flex: 1;
  min-width: 0;
}
.bp-xsell-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--bp-text);
}
.bp-xsell-desc {
  font-size: 0.8125rem;
  color: var(--bp-text-muted);
  margin-top: 2px;
}
.bp-xsell-cta {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .bp-xsell-card { flex-wrap: wrap; }
  .bp-xsell-cta { width: 100%; }
}

/* ==========================================================================
   Proposal Forms — Status Badges (digital proposal flow)
   ========================================================================== */

.bp-status-sent        { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.bp-status-opened      { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.bp-status-in-progress { background: #fefce8; color: #854d0e; border-color: #fef08a; }
.bp-status-revoked     { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* ==========================================================================
   Proposal Forms — Public form (insured-facing, proposal-form.html)
   ========================================================================== */

/* Brand logo in the hero — constrained height matching the nav logo. */
.bp-proposal-logo {
  height: var(--space-xl);
  margin-bottom: var(--space-sm);
}

/* FTA brand row above the hero title. */
.bp-proposal-fta-brand {
  margin-bottom: var(--space-xs);
}

/* Required field asterisk — pink to match brand accent. */
.bp-proposal-required {
  color: var(--bp-accent);
  margin-left: 2px;
}

/* Autosave indicator — appears briefly in the form margin. */
.bp-proposal-save-status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.75rem;
  color: var(--status-success, #16a34a);
  margin-bottom: var(--space-sm);
  transition: opacity var(--bp-transition-slow);
}

/* Two-column grid for the "new proposal" creation form. */
.bp-proposal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

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

/* Product checkbox row — inline flex with gap. */
.bp-proposal-product-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Individual product checkbox pill. */
.bp-proposal-product-check {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  background: var(--bp-surface);
  transition: border-color var(--bp-transition);
}

.bp-proposal-product-check:hover {
  border-color: var(--bp-accent);
}

.bp-proposal-product-check input[type="checkbox"] {
  accent-color: var(--bp-accent);
}

/* Generated link panel — soft green tinted surface. */
.bp-proposal-link-panel {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bp-surface-secondary, #f6f8fa);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
}

.bp-proposal-link-row {}

.bp-proposal-link-label {
  display: block;
}

/* Single proposal field wrapper. min-width:0 stops wide matrix/table
   children from forcing the field (and page) past the viewport. */
.bp-proposal-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.bp-proposal-field[hidden] { display: none; }

/* Shared form label — matches .bp-label's look so proposal fields and the
   broker pre-fill / signature labels read as form labels, not body text.
   Vertical rhythm comes from the flex wrappers, so no margin here. */
.bp-form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bp-text);
}

/* In the non-flex .bp-form-group context (broker "create proposal" form), the
   label is a direct child stacked above its input with no flex gap, so it needs
   its own bottom margin — matching .bp-label. The proposal form uses
   .bp-form-label inside flex wrappers, which own the spacing, so scope this to
   the form-group case only. */
.bp-form-group > .bp-form-label {
  margin-bottom: var(--space-xs);
}

.bp-proposal-field-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Helper text under a field label. Without this it rendered at default body
   size (~16px), larger than the 13px label. Small + muted, matching the
   established helper-text treatment (.bp-label .optional, .bp-text-xs). */
.bp-proposal-field-help {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bp-text-muted);
}

.bp-proposal-field-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Hint text below specific input types (e.g. ABN). */
.bp-proposal-field-hint {
  margin-top: 4px;
}

/* Field-level error message. */
.bp-proposal-field-error {
  display: block;
}

/* Submit-level error box above the button. */
.bp-proposal-submit-error {
  padding: var(--space-sm) var(--space-md);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--bp-radius-sm);
  color: #991b1b;
  font-size: 0.875rem;
  margin-bottom: var(--space-sm);
}

/* Public proposal page body — no nav, full-page centred layout. */
.bp-proposal-public.bp-body {
  background: var(--bp-bg);
}

/* ==========================================================================
   Proposal Forms — Broker management page (quoteapp-broker-proposals.html)
   ========================================================================== */

/* Product tag chips inside the table. */
.bp-proposal-product-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: var(--bp-surface-muted);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bp-text-secondary);
  letter-spacing: 0.02em;
  margin-right: 3px;
}

.bp-proposal-products-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* Row action buttons — tight horizontal flex. */
.bp-proposal-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  justify-content: flex-end;
}

/* ==========================================================================
   Proposal Form — Signature Pad (Phase 3)
   ========================================================================== */

/* Two-column signer-details row on wider viewports. */
.bp-sig-signer-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 600px) {
  .bp-sig-signer-fields {
    grid-template-columns: 1fr;
  }
}

/* Signature pad wrapper — card-like inset with subtle border. */
.bp-sig-pad-wrap {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: var(--space-md);
  background: var(--bp-surface);
}

/* Tab row above the pad. */
.bp-sig-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--bp-border-light);
  padding-bottom: var(--space-xs);
}

.bp-sig-tab {
  background: none;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.875rem;
  font-family: var(--bp-font-sans);
  color: var(--bp-text-muted);
  cursor: pointer;
  border-radius: var(--bp-radius-sm);
  transition: color var(--bp-transition), background var(--bp-transition);
  font-weight: 500;
}

.bp-sig-tab:hover {
  color: var(--bp-text);
  background: var(--bp-surface-hover);
}

.bp-sig-tab-active {
  color: var(--bp-text);
  background: var(--bp-surface-muted);
}

/* Panel that hosts either the type or draw UI. */
.bp-sig-panel {
  min-height: 80px;
}

/* Type input row — full width. */
.bp-sig-type-input-row {
  width: 100%;
}

/* Live cursive preview below the text input.
   Font stack uses only web-safe cursive fonts — no external font load. */
.bp-sig-type-preview {
  min-height: 56px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bp-surface-muted);
  border-radius: var(--bp-radius-sm);
  font-family: "Segoe Script", "Snell Roundhand", cursive;
  font-size: 1.75rem;
  color: var(--bp-text);
  word-break: break-word;
  line-height: 1.4;
}

/* Canvas wrapper — sets the aspect ratio responsively.
   The canvas element itself fills 100% of this container. */
.bp-sig-canvas-wrap {
  width: 100%;
  position: relative;
  /* 3:1 aspect ratio maintained by padding-bottom trick. */
  padding-bottom: 33.333%;
  background: var(--bp-surface-muted);
  border-radius: var(--bp-radius-sm);
  border: 1px solid var(--bp-border-light);
  overflow: hidden;
  cursor: crosshair;
}

.bp-sig-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Draw-tab action row (Clear button). */
.bp-sig-draw-actions {
  display: flex;
  justify-content: flex-end;
}

/* Section reveal animation. */
.bp-sig-section {
  animation: bp-sig-reveal var(--bp-transition-slow) var(--bp-ease) both;
}

@keyframes bp-sig-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--space-sm));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Frankie Chat Widget — proposal-form.html (public insured form)
   Fixed bottom-right floating button + compact chat panel.
   z-index ladder: form content (1) → sticky bar (98) → nav (100) →
     toast (300) → modals (200) → Frankie (150, below modals).
   ========================================================================== */

/* Floating trigger button */
.pf-frankie-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 0 16px;
  height: 48px;
  background: var(--fta-pink, #e6007e);
  color: #fff;
  border: none;
  border-radius: var(--bp-radius-full);
  font-family: var(--bp-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--bp-shadow-pink), var(--bp-shadow-md);
  transition: background var(--bp-transition), transform var(--bp-transition), box-shadow var(--bp-transition);
  white-space: nowrap;
}

.pf-frankie-btn:hover {
  background: var(--fta-pink-hover, #c40069);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(230, 0, 126, 0.35), var(--bp-shadow-lg);
}

.pf-frankie-btn:focus-visible {
  outline: 2px solid var(--fta-pink, #e6007e);
  outline-offset: 3px;
}

.pf-frankie-btn svg {
  flex-shrink: 0;
}

/* Chat panel */
.pf-frankie-panel {
  position: fixed;
  bottom: 84px;
  right: 24px;
  z-index: 150;
  width: 360px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-xl);
  border: 1px solid var(--bp-border);
  overflow: hidden;
  animation: pf-frankie-appear 200ms var(--bp-ease) both;
}

.pf-frankie-panel[hidden] {
  display: none;
}

@keyframes pf-frankie-appear {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Panel header */
.pf-frankie-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--bp-border-light);
  background: var(--bp-navy-900);
  color: #fff;
  flex-shrink: 0;
}

.pf-frankie-header-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pf-frankie-title {
  font-family: var(--bp-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}

.pf-frankie-disclosure {
  font-family: var(--bp-font-sans);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.pf-frankie-close {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--bp-radius-sm);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  margin-top: -2px;
  transition: background var(--bp-transition), color var(--bp-transition);
}

.pf-frankie-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.pf-frankie-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Messages area */
.pf-frankie-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  min-height: 0;
}

/* Individual message bubbles */
.pf-frankie-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: var(--bp-radius);
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  word-break: break-word;
}

.pf-frankie-msg-assistant {
  align-self: flex-start;
  background: var(--bp-surface-muted);
  color: var(--bp-text);
  border-bottom-left-radius: var(--bp-radius-sm);
}

.pf-frankie-msg-user {
  align-self: flex-end;
  background: var(--fta-pink, #e6007e);
  color: #fff;
  border-bottom-right-radius: var(--bp-radius-sm);
}

/* Preserve plain-text newlines without rendering HTML */
.pf-frankie-msg-text {
  white-space: pre-wrap;
}

/* Typing indicator (three animated dots) */
.pf-frankie-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--bp-surface-muted);
  border-radius: var(--bp-radius);
  border-bottom-left-radius: var(--bp-radius-sm);
}

.pf-frankie-typing[hidden] {
  display: none;
}

.pf-frankie-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bp-text-muted);
  animation: pf-frankie-bounce 1.2s infinite;
}

.pf-frankie-dot:nth-child(2) { animation-delay: 0.2s; }
.pf-frankie-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pf-frankie-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-5px); }
}

/* Inline error message */
.pf-frankie-error {
  align-self: flex-start;
  max-width: 88%;
  padding: 8px 12px;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: var(--bp-radius);
  font-family: var(--bp-font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Input row */
.pf-frankie-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--bp-border-light);
  background: var(--bp-surface);
  flex-shrink: 0;
}

.pf-frankie-input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  font-family: var(--bp-font-sans);
  font-size: 0.875rem;
  color: var(--bp-text);
  background: var(--bp-bg);
  outline: none;
  transition: border-color var(--bp-transition);
}

.pf-frankie-input:focus {
  border-color: var(--fta-pink, #e6007e);
  box-shadow: 0 0 0 3px rgba(232, 6, 140, 0.1);
}

.pf-frankie-input::placeholder {
  color: var(--bp-text-placeholder);
}

.pf-frankie-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fta-pink, #e6007e);
  border: none;
  border-radius: var(--bp-radius-sm);
  color: #fff;
  cursor: pointer;
  transition: background var(--bp-transition), opacity var(--bp-transition);
}

.pf-frankie-send:hover {
  background: var(--fta-pink-hover, #c40069);
}

.pf-frankie-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pf-frankie-send:focus-visible {
  outline: 2px solid var(--fta-pink, #e6007e);
  outline-offset: 2px;
}

/* Mobile: full-width bottom sheet */
@media (max-width: 480px) {
  .pf-frankie-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 75vh;
    border-radius: var(--bp-radius-lg) var(--bp-radius-lg) 0 0;
  }

  .pf-frankie-btn {
    right: 16px;
    bottom: 16px;
  }
}

/* ==========================================================================
   Proposal Form — Rich Field Types (table, matrix, multiselect)
   ========================================================================== */

/* ── Multiselect ─────────────────────────────────────────────────── */

.bp-multiselect {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bp-multiselect-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--bp-text);
  transition: border-color var(--bp-transition), background var(--bp-transition);
}

.bp-multiselect-option:hover {
  border-color: var(--bp-accent);
  background: var(--bp-accent-subtle);
}

.bp-multiselect-option:has(.bp-multiselect-cb:checked) {
  border-color: var(--bp-accent);
  background: var(--bp-accent-subtle);
}

.bp-multiselect-cb {
  accent-color: var(--bp-accent);
  flex-shrink: 0;
}

/* ── Table field ─────────────────────────────────────────────────── */

.bp-table-field {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  overflow: hidden;
}

.bp-table-field-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bp-table-field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.bp-table-field-th {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--bp-text-secondary);
  background: var(--bp-surface-muted);
  border-bottom: 1px solid var(--bp-border);
  white-space: nowrap;
}

.bp-table-field-th-remove {
  width: 36px;
}

.bp-table-field-td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--bp-border-light);
  vertical-align: middle;
}

.bp-table-field-td-remove {
  width: 36px;
  text-align: center;
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.bp-table-field-row:last-child .bp-table-field-td {
  border-bottom: none;
}

/* Cell inputs fill their column without overflowing */
.bp-table-field-cell {
  width: 100%;
  min-width: 80px;
  box-sizing: border-box;
}

.bp-table-field-cell-currency {
  padding-left: calc(var(--space-md) + 2px);
}

/* Currency prefix wraps the input */
.bp-table-field-td:has(.bp-table-field-cell-currency) {
  position: relative;
}

.bp-table-field-cell-prefix {
  position: absolute;
  left: calc(var(--space-sm) + 8px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--bp-text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}

/* Matrix currency cells mirror the table-cell "$" prefix treatment. */
.bp-matrix-field-cell-currency {
  padding-left: calc(var(--space-md) + 2px);
}
.bp-matrix-field-td:has(.bp-matrix-field-cell-currency) {
  position: relative;
}

.bp-table-field-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--bp-text-muted);
  cursor: pointer;
  border-radius: var(--bp-radius-sm);
  transition: color var(--bp-transition), background var(--bp-transition);
  padding: 0;
}

.bp-table-field-remove:hover {
  color: var(--bp-accent);
  background: var(--bp-accent-subtle);
}

.bp-table-field-footer {
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--bp-border-light);
  background: var(--bp-surface-muted);
}

.bp-table-field-add {
  font-size: 0.8125rem;
}

/* ── Matrix field ────────────────────────────────────────────────── */

.bp-matrix-field {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  overflow: hidden;
  min-width: 0;
}

.bp-matrix-field-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bp-matrix-field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.bp-matrix-field-th {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--bp-text-secondary);
  background: var(--bp-surface-muted);
  border-bottom: 1px solid var(--bp-border);
  white-space: nowrap;
}

.bp-matrix-field-td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--bp-border-light);
  vertical-align: middle;
}

.bp-matrix-field-table tbody tr:last-child .bp-matrix-field-td {
  border-bottom: none;
}

.bp-matrix-field-row-label {
  font-weight: 500;
  color: var(--bp-text-secondary);
  white-space: nowrap;
  background: var(--bp-surface-muted);
  font-size: 0.8125rem;
}

.bp-matrix-field-cell {
  width: 100%;
  /* Matrix cells hold short values (percentages, counts), so they don't need
     a wide floor. Keeping it tight lets many-column matrices (e.g. income by
     state — 9 columns) fit the card at desktop instead of forcing a scroll. */
  min-width: 52px;
  box-sizing: border-box;
}

/* ── Template picker (broker create form) ────────────────────────── */

.bp-proposal-template-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bp-proposal-template-check {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  cursor: pointer;
  transition: border-color var(--bp-transition), background var(--bp-transition);
}

.bp-proposal-template-check:hover {
  border-color: var(--bp-accent);
  background: var(--bp-accent-subtle);
}

.bp-proposal-template-check:has(.bp-proposal-template-cb:checked) {
  border-color: var(--bp-accent);
  background: var(--bp-accent-subtle);
}

.bp-proposal-template-cb {
  accent-color: var(--bp-accent);
  flex-shrink: 0;
}

.bp-proposal-template-check-body {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
}

.bp-proposal-template-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bp-text);
}

/* ── Proposals: existing-client picker ─────────────────────────────── */

.bp-client-picker-box {
  position: relative;
  max-width: 28rem;
}

.bp-client-picker-results {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--bp-surface-elevated);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  box-shadow: var(--bp-shadow-md);
}

.bp-client-picker-results[hidden] { display: none; }

.bp-client-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  border-bottom: 1px solid var(--bp-border-light);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background var(--bp-transition);
}

.bp-client-picker-item:last-child { border-bottom: none; }

.bp-client-picker-item:hover,
.bp-client-picker-item.active {
  background: var(--bp-accent-subtle);
}

.bp-client-picker-empty {
  padding: var(--space-sm) var(--space-md);
}

.bp-client-picker-selected {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  max-width: 40rem;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  background: var(--bp-accent-subtle);
}

.bp-client-picker-selected[hidden] { display: none; }

.bp-client-picker-selected svg { color: var(--bp-accent); flex-shrink: 0; }

.bp-client-picker-selected .bp-btn { margin-left: auto; }

/* ── Proposals: per-field pre-fill card ────────────────────────────── */

.bp-proposal-prefill-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  background: var(--bp-surface-hover);
  max-height: 34rem;
  overflow-y: auto;
}

.bp-proposal-prefill-group-title {
  margin: 0 0 var(--space-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bp-text-secondary);
}

/* ── GL CPO locations table (broker submit, UAT) ───────────────────── */

.bp-cpo-table-scroll { overflow-x: auto; }
.bp-cpo-col-num    { width: 28px; }
.bp-cpo-col-value  { width: 140px; }
.bp-cpo-col-vacant { width: 90px; }
.bp-cpo-col-remove { width: 40px; }

/* ════════════════════════════════════════════════════════════════════
   PR8 · Co-branded proposal form hero + branding settings
   ════════════════════════════════════════════════════════════════════ */

/* Hero background driven by the broker's --bh-primary (JS-injected, hex-
   validated). A fixed dark ::before overlay keeps white text ≥4.5:1 over ANY
   broker colour. Broker colour NEVER touches body text/fields/buttons. */
.bp-proposal-hero {
  background: var(--bh-primary, #0a192f);
  background: linear-gradient(135deg, var(--bh-primary, #0a192f),
    color-mix(in srgb, var(--bh-primary, #0a192f) 60%, #000));
  position: relative;
  overflow: hidden;
}
.bp-proposal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
  z-index: 0;
}
.bp-proposal-hero > * { position: relative; z-index: 1; }

.bp-proposal-hero-brands {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.bp-proposal-broker-logo-img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  display: block;
}
.bp-proposal-hero-broker-initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.bp-proposal-hero-divider { display: flex; align-items: center; }
.bp-proposal-hero-divider-text {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  color: #fff;
  white-space: nowrap;
}
/* FTA logo shrinks in the co-branded state; full size when solo. */
.bp-proposal-hero.is-cobranded .bp-proposal-logo { height: 24px; }
.bp-proposal-hero-titles { margin-bottom: var(--space-sm); }
.bp-proposal-hero-broker-role { opacity: 0.6; margin-top: 2px; }

.bp-proposal-broker-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
}
.bp-proposal-broker-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}
.bp-proposal-broker-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bp-proposal-broker-card-name { font-size: 0.875rem; font-weight: 500; color: #fff; }
.bp-proposal-broker-card-role { font-size: 0.75rem; opacity: 0.6; color: #fff; }

@media (max-width: 640px) {
  .bp-proposal-hero-brands { gap: var(--space-sm); }
  .bp-proposal-broker-logo-img { max-width: 120px; height: 32px; }
  .bp-proposal-hero-divider-text { display: none; }
  .bp-proposal-broker-card { flex-wrap: wrap; }
}

/* ── Branding settings (Broker House tab) ──────────────────────────── */
.bp-branding-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 900px) {
  .bp-branding-layout { grid-template-columns: 1fr; }
}
.bp-branding-logo-row { display: flex; align-items: flex-start; gap: var(--space-sm); }
.bp-branding-logo-thumb {
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-sm);
  background: var(--bp-surface-muted);
  padding: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 48px;
}
.bp-branding-logo-thumb-img { max-width: 64px; max-height: 40px; object-fit: contain; }
.bp-branding-logo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--status-error);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  padding: 0;
  line-height: 1;
}
.bp-branding-logo-remove:focus-visible { outline: 2px solid var(--fta-pink); outline-offset: 2px; }
.bp-branding-logo-upload {
  flex: 1;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}
.bp-branding-color-row { display: flex; align-items: center; gap: var(--space-sm); }
.bp-branding-color-swatch {
  width: 44px;
  height: 44px;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-sm);
  padding: 2px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}
.bp-branding-color-swatch:focus-visible { outline: 2px solid var(--fta-pink); outline-offset: 2px; }
.bp-branding-color-hex { font-family: var(--font-mono); font-size: 0.875rem; width: 110px; }

/* Live mini-hero preview */
.bp-branding-preview {
  background: var(--bh-primary, #0a192f);
  background: linear-gradient(135deg, var(--bh-primary, #0a192f),
    color-mix(in srgb, var(--bh-primary, #0a192f) 60%, #000));
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.bp-branding-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
}
.bp-branding-preview > * { position: relative; z-index: 1; }
.bp-branding-preview-brands {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.bp-branding-preview-logo-img {
  height: 24px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  padding: 2px var(--space-xs);
}
.bp-branding-preview-initials {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.bp-branding-preview-divider {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  white-space: nowrap;
}
.bp-branding-preview-fta-logo { height: 16px; width: auto; }
.bp-branding-preview-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 2px; }
.bp-branding-preview-subtitle { font-size: 0.625rem; opacity: 0.6; margin-bottom: var(--space-sm); }
.bp-branding-preview-stats {
  display: flex;
  gap: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-sm);
}
.bp-branding-preview-eyebrow {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.45;
  margin-bottom: 2px;
}
.bp-branding-preview-val { font-size: 0.75rem; font-weight: 500; }

/* PR9 · completed-PDF-received badge on the proposal row */
.bp-proposal-pdf-badge {
  display: inline-block;
  margin-left: var(--space-xs);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--bp-accent);
  white-space: nowrap;
}

/* FIX 3 (UAT broker awareness) · "Prepared by FTA" chip — flags a proposal
   the broker didn't create themselves (staff-prepared or renewal-invite
   auto-origination). Pill shape (vs. the plain text PDF badge above) since
   this sits directly next to the insured name, not the status column. */
.bp-proposal-staff-badge {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--bp-accent);
  background: color-mix(in srgb, var(--bp-accent) 12%, transparent);
  white-space: nowrap;
  vertical-align: middle;
}

/* Compact select (PR8 "Send as" picker) */
.bp-select-sm { padding: 4px 8px; font-size: 0.8125rem; width: auto; min-width: 160px; }