:root {
    /* Direction D — Pulse Violet brand (applied 2026-05-09).
       Variable names preserved from legacy 3DOM brand for backwards
       compat with all existing CSS rules; only values changed. */
    --brand-violet:   #5b21b6;     /* Pulse violet (primary) */
    --brand-magenta:  #d946ef;     /* Fuchsia (accent / pulse) */
    --brand-red:      #dc2626;     /* Critical red — danger states */
    --brand-cyan:     #16a34a;     /* Repurposed: success / "filed" green */
    --brand-cream:    #fafaf9;     /* Warm stone (page bg) */
    --brand-violet-2: #4c1d95;     /* Hover/darker violet */
    /* Brand gradient — for hero CTAs, logo mark, accent buttons */
    --brand-gradient: linear-gradient(135deg, #5b21b6 0%, #d946ef 100%);
  }
  body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
  .num-input { font-variant-numeric: tabular-nums; }
  details > summary { cursor: pointer; user-select: none; }
  .quote-line { font-variant-numeric: tabular-nums; }

  /* Header */
  .brand-header {
    background: var(--brand-cream);
    border-bottom: 3px solid var(--brand-violet);
  }
  .brand-logo { height: 38px; width: auto; display: block; }
  .brand-strap { color: var(--brand-violet); }

  /* FirmPulse logo mark — Equaliser Bars on violet→fuchsia gradient.
     Used in the staff app top nav, login, and homepage. */
  .fp-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--brand-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(91, 33, 182, 0.25);
    flex-shrink: 0;
  }
  .fp-logo-mark svg { width: 22px; height: 22px; display: block; }
  .fp-logo-mark.fp-logo-lg { width: 56px; height: 56px; border-radius: 12px; }
  .fp-logo-mark.fp-logo-lg svg { width: 36px; height: 36px; }
  .fp-logo-mark.fp-logo-xl { width: 72px; height: 72px; border-radius: 14px; }
  .fp-logo-mark.fp-logo-xl svg { width: 46px; height: 46px; }
  .fp-wordmark {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--brand-violet);
    line-height: 1;
  }
  .fp-wordmark.fp-wordmark-lg { font-size: 1.5rem; }
  .fp-wordmark.fp-wordmark-xl { font-size: 2rem; }
  .fp-wordmark.fp-wordmark-light { color: #ffffff; }

  /* Headline totals */
  .totals-hero {
    background: linear-gradient(135deg, var(--brand-violet) 0%, var(--brand-magenta) 100%);
    color: #fff;
  }

  /* Section colour bands */
  .c1-header  { background: rgba(5, 172, 148, 0.10); color: #035c50; border-color: rgba(5, 172, 148, 0.35); }
  .c1-border  { border-color: rgba(5, 172, 148, 0.35); }
  .c2-header  { background: rgba(91, 33, 182, 0.08); color: var(--c-accent); border-color: rgba(91, 33, 182, 0.25); }
  .c2-border  { border-color: rgba(91, 33, 182, 0.25); }

  /* Section input cards — keep light/clean */
  .c1-tint { background: rgba(5, 172, 148, 0.07); border-color: rgba(5, 172, 148, 0.30); }
  .c2-tint { background: rgba(91, 33, 182, 0.05); border-color: rgba(91, 33, 182, 0.22); }

  /* Section headings (left form) */
  .section-title { color: var(--brand-violet); }

  /* Pills */
  .pill { font-size: 0.65rem; padding: 1px 6px; border-radius: 999px; display: inline-block; font-weight: 500; }
  .pill-c1      { background: rgba(5, 172, 148, 0.15);  color: #035c50; }
  .pill-c2      { background: rgba(91, 33, 182, 0.15); color: var(--c-accent); }
  .pill-disb    { background: #fef3c7; color: #92400e; }
  .pill-spread  { background: rgba(121, 30, 148, 0.15); color: var(--brand-magenta); }
  .pill-upfront { background: rgba(5, 172, 148, 0.18);  color: #035c50; }

  /* Form focus accents */
  input:focus, select:focus { outline: 2px solid rgba(121, 30, 148, 0.35); outline-offset: 1px; border-color: var(--brand-magenta) !important; }

  /* Subtle brand on count badges */
  .count-pill { color: var(--brand-magenta); }

  /* Pipeline filter active state */
  .pipeline-filter-active { background: var(--brand-violet); color: white; border-color: var(--brand-violet); }

  /* Modal "page mode" — when opened via a ?view= URL, the modal is
     restyled to fill the tab rather than overlay. Shared across:
       beat360-detail-modal  (single client)
       beat360-modal         (client list)
       pipeline-modal        (proposals pipeline)
       onboarding-modal      (onboarding workflows) */
  .page-mode {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    z-index: auto !important;
  }
  .page-mode > div {
    position: static !important;
    inset: auto !important;
    margin: 1rem auto !important;
    max-width: 80rem !important;
    height: auto !important;
    min-height: calc(100vh - 6rem);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  /* Hide the close × on every modal in page mode (use the browser tab close). */
  .page-mode #beat360-detail-close,
  .page-mode #beat360-close,
  .page-mode #pipeline-close,
  .page-mode #onboarding-close {
    display: none;
  }

  /* ──────────────────────────────────────────────────────────────────
     Direction D component system  (staging migration — Step 0)
     Lifted from app/staging.html. Coexists with the legacy --brand-*
     palette above; later steps switch view-by-view to the new tokens.
     ────────────────────────────────────────────────────────────────── */
  :root {
    /* Stone neutrals (warm, not slate-cool) — calmer for long sessions */
    --c-bg:           #fafaf9;
    --c-surface:      #ffffff;
    --c-surface-warm: #f5f5f4;
    --c-border:       #e7e5e4;
    --c-border-soft:  #f5f5f4;
    --c-text:         #1c1917;
    --c-text-muted:   #44403c;
    --c-text-subtle:  #78716c;
    /* Pulse Violet primary + Fuchsia pulse accent */
    --c-primary:      #5b21b6;
    --c-primary-soft: #4c1d95;
    --c-primary-bg:   #f3e8ff;
    --c-accent:       #5b21b6;
    --c-accent-hover: #4c1d95;
    --c-fuchsia:      #d946ef;
    --c-fuchsia-bg:   #fae8ff;
    --c-gradient:     linear-gradient(135deg, #5b21b6 0%, #d946ef 100%);
    --c-danger:       #dc2626;
    --c-warn:         #d97706;
    --c-ok:           #16a34a;
    --c-pill-bg:      #f3e8ff;
    --c-pill-fg:      #5b21b6;
    --c-pill-warn-bg: #fef3c7;
    --c-pill-warn-fg: #a16207;
    --c-pill-danger-bg: #fee2e2;
    --c-pill-danger-fg: #b91c1c;
    --r-card:         10px;
    --r-pill:         999px;
    --r-input:        6px;
    --shadow-card:    0 1px 2px rgba(15,23,42,.04);
    --shadow-pop:     0 8px 32px rgba(15,23,42,.12);
    --type-ramp-display: 32px;
    --type-ramp-h2:      22px;
    --type-ramp-h3:      15px;
    --type-ramp-body:    14px;
    --type-ramp-caption: 12px;
    --type-ramp-micro:   11px;
    --space-card-pad:   18px 22px;
    --space-row-gap:    12px;
  }

  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

  /* App nav (replaces .brand-header look from Step 0 onward) */
  .appnav { background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 10; }
  .appnav-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }
  .appnav .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--c-text); }
  .appnav .logo-mark { width: 28px; height: 28px; background: var(--c-gradient); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 12px -4px rgba(91,33,182,.4); flex-shrink: 0; }
  .appnav .logo-mark svg { width: 18px; height: 18px; display: block; }
  .appnav .logo .pulse-text { background: var(--c-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .appnav .tabs { display: flex; gap: 4px; align-items: center; height: 100%; overflow-x: auto; scrollbar-width: none; }
  .appnav .tabs::-webkit-scrollbar { display: none; }
  .appnav .tab { display: inline-flex; align-items: center; height: 56px; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--c-text-muted); cursor: pointer; border-bottom: 2px solid transparent; text-decoration: none; background: none; border-left: 0; border-right: 0; border-top: 0; white-space: nowrap; flex-shrink: 0; }
  .appnav .tab:hover { color: var(--c-text); text-decoration: none; }
  .appnav .tab.active { color: var(--c-text); border-bottom-color: var(--c-accent); font-weight: 600; }
  .appnav .tab .count { display: inline-block; margin-left: 6px; font-size: 11px; background: var(--c-pill-bg); color: var(--c-pill-fg); padding: 1px 6px; border-radius: var(--r-pill); font-weight: 600; }
  .appnav .tab .count[hidden] { display: none; }
  .appnav .tab .count.urgent { background: var(--c-pill-danger-bg); color: var(--c-pill-danger-fg); }
  .appnav .nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
  .appnav .bell { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--c-text-muted); cursor: pointer; background: none; border: 0; font-size: 18px; }
  .appnav .bell:hover { background: var(--c-pill-bg); }
  .appnav .bell-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; background: var(--c-danger); border-radius: 50%; border: 2px solid var(--c-surface); }
  .appnav .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-text); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
  .appnav .signout, .appnav .iconlink { font-size: 13px; color: var(--c-text-subtle); cursor: pointer; background: none; border: 0; padding: 6px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
  .appnav .signout:hover, .appnav .iconlink:hover { color: var(--c-text); background: var(--c-surface-warm); }

  /* Page chrome */
  main.fp-main { padding: 32px 0 64px; }
  .pagetitle { margin-bottom: 24px; }
  .pagetitle h1 { font-size: var(--type-ramp-display); margin: 0 0 4px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: var(--c-text); }
  .pagetitle .sub { color: var(--c-text-subtle); font-size: 15px; }

  /* Counters strip */
  .counters { display: flex; gap: 32px; margin-top: 20px; padding: 20px 24px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); }
  .counter .num { font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--c-text); }
  .counter .num.danger { color: var(--c-danger); }
  .counter .num.warn { color: var(--c-warn); }
  .counter .label { font-size: 12px; color: var(--c-text-subtle); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-top: 2px; }

  /* Card grid (named .grid-2 / .fp-card to avoid clashing with Tailwind .grid) */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .fp-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
  .fp-card .card-head { padding: 18px 22px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--c-border-soft); }
  .fp-card .card-title { font-size: 15px; font-weight: 600; color: var(--c-text); display: flex; align-items: center; gap: 8px; }
  .fp-card .card-title .pill { font-size: 11px; background: var(--c-pill-bg); color: var(--c-pill-fg); padding: 1px 7px; border-radius: var(--r-pill); font-weight: 600; }
  .fp-card .card-title .pill.danger { background: var(--c-pill-danger-bg); color: var(--c-pill-danger-fg); }
  .fp-card .card-title .pill.warn { background: var(--c-pill-warn-bg); color: var(--c-pill-warn-fg); }
  .fp-card .card-link { font-size: 13px; color: var(--c-accent); font-weight: 500; cursor: pointer; }
  .fp-card .card-body { padding: 8px 22px 18px; flex: 1; }
  .fp-card .card-body .empty { color: var(--c-text-subtle); font-size: 13px; padding: 16px 0; text-align: center; }
  .fp-card .card-body .loading { color: var(--c-text-subtle); font-size: 13px; padding: 16px 0; text-align: center; font-style: italic; }

  /* Row pattern (used inside cards) */
  .fp-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-border-soft); }
  .fp-row:last-child { border-bottom: 0; }
  .row-marker { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; margin-top: 8px; flex: none; }
  .row-marker.urgent { background: var(--c-danger); }
  .row-marker.warn   { background: var(--c-warn); }
  .row-marker.ok     { background: var(--c-ok); }
  .row-main { flex: 1; min-width: 0; }
  .row-title { font-size: 14px; font-weight: 500; color: var(--c-text); display: flex; justify-content: space-between; gap: 8px; }
  .row-meta { font-size: 12px; color: var(--c-text-subtle); margin-top: 2px; }
  .row-due { font-size: 12px; font-weight: 600; color: var(--c-text-subtle); flex: none; }
  .row-due.danger { color: var(--c-danger); }
  .row-due.warn   { color: var(--c-warn); }

  /* Tables */
  .tablecard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
  table.fp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
  table.fp-table thead th { background: var(--c-bg); color: var(--c-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c-border); }
  /* POLISH-003: bump row padding + line-height for breathing room.
     Pipeline rows in particular have name + acceptDate stacked,
     which felt squashed at the old 14px/1.3 spacing. */
  table.fp-table tbody td { padding: 18px 16px; border-bottom: 1px solid var(--c-border-soft); color: var(--c-text); vertical-align: top; line-height: 1.45; }
  /* Secondary line inside a cell (e.g. acceptDate under client name) */
  table.fp-table tbody td > div + div { margin-top: 4px; }
  table.fp-table tbody tr:hover { background: var(--c-bg); cursor: pointer; }
  table.fp-table tbody tr:last-child td { border-bottom: 0; }

  /* Pills (scoped to new components so legacy quote-builder pills are unchanged) */
  .tablecard .pill, .modal-card .pill, .fp-card .pill, .ob-card .pill, .toolbar .pill {
    display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; background: var(--c-pill-bg); color: var(--c-pill-fg);
  }
  .tablecard .pill.active,    .modal-card .pill.active    { background: #dcfce7; color: #15803d; }
  .tablecard .pill.lead,      .modal-card .pill.lead      { background: #dbeafe; color: #1e40af; }
  .tablecard .pill.archived,  .modal-card .pill.archived  { background: var(--c-pill-bg); color: var(--c-text-subtle); }
  .badge-overdue { background: var(--c-pill-danger-bg); color: var(--c-pill-danger-fg); }
  .badge-urgent  { background: var(--c-pill-warn-bg);   color: var(--c-pill-warn-fg); }
  .badge-future  { background: #dbeafe; color: #1e40af; }
  .badge-ok      { background: #dcfce7; color: #15803d; }

  /* Toolbars / search / filter chips */
  .toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
  .fp-input { padding: 8px 12px; border: 1px solid var(--c-border); border-radius: var(--r-input); font-size: 14px; background: var(--c-surface); color: var(--c-text); box-sizing: border-box; min-width: 0; }
  .fp-input:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }
  .fp-input.search { min-width: 280px; }
  .filter-chip { padding: 6px 12px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-text-muted); font-size: 13px; cursor: pointer; }
  .filter-chip.active { background: var(--c-text); color: #fff; border-color: var(--c-text); }
  /* Legacy: existing JS toggles `.pipeline-filter-active` instead of `.active`.
     Bridge it to the new chip style so we don't have to edit that JS. */
  .filter-chip.pipeline-filter-active { background: var(--c-text); color: #fff; border-color: var(--c-text); }
  .chip-count { display: inline-block; margin-left: 6px; font-size: 11px; opacity: 0.7; }

  /* Modal pattern */
  .modal-card { background: var(--c-surface); border-radius: var(--r-card); max-width: 1100px; width: 100%; box-shadow: var(--shadow-pop); }
  .modal-head { padding: 24px 28px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .modal-head .title-block h2 { margin: 0; font-size: var(--type-ramp-h2); font-weight: 700; color: var(--c-text); }
  .modal-head .title-block .meta { color: var(--c-text-subtle); font-size: 13px; margin-top: 4px; }
  .modal-close { background: none; border: 1px solid var(--c-border); border-radius: var(--r-input); padding: 6px 12px; cursor: pointer; color: var(--c-text-muted); font-size: 13px; }
  .modal-close:hover { background: var(--c-surface-warm); }
  .modal-body { padding: 24px 28px; }
  .modal-tabs { display: flex; gap: 0; padding: 0 28px; border-bottom: 1px solid var(--c-border); }
  .modal-tab { padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--c-text-muted); cursor: pointer; border-bottom: 2px solid transparent; background: none; border-left: 0; border-right: 0; border-top: 0; }
  .modal-tab.active { color: var(--c-text); border-bottom-color: var(--c-accent); font-weight: 600; }
  .modal-tab:hover { color: var(--c-text); }
  .modal-tab:disabled, .modal-tab[disabled] { color: var(--c-text-subtle); cursor: not-allowed; }
  .modal-tab:disabled:hover, .modal-tab[disabled]:hover { color: var(--c-text-subtle); }

  /* Field grid for client overview */
  .fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
  .field { display: block; }
  .field-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-subtle); font-weight: 600; margin-bottom: 4px; }
  .field-value { font-size: 14px; color: var(--c-text); }
  .field-value.mono { font-family: inherit; font-size: 14px; }
  .field-value.muted { color: var(--c-text-subtle); }
  .section-divider { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-subtle); font-weight: 600; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border-soft); }

  /* Empty / placeholder states */
  .placeholder { background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--r-card); padding: 64px 32px; text-align: center; color: var(--c-text-subtle); }
  .placeholder h3 { font-size: 18px; color: var(--c-text); margin: 0 0 8px; font-weight: 600; }
  .placeholder p { font-size: 14px; margin: 0 0 16px; }
  .placeholder .stub-link { color: var(--c-accent); font-weight: 500; cursor: pointer; }

  /* Onboarding cards */
  .ob-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
  .ob-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
  .ob-card-name { font-size: 16px; font-weight: 600; color: var(--c-text); }
  .ob-card-meta { font-size: 12px; color: var(--c-text-subtle); margin-top: 2px; }
  .ob-stepper { display: flex; gap: 6px; flex-wrap: wrap; }
  .ob-step { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 12px; font-weight: 500; border-radius: var(--r-pill); border: 1px solid; white-space: nowrap; }
  .ob-step.done    { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
  .ob-step.current { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
  .ob-step.todo    { background: var(--c-surface); color: var(--c-text-subtle); border-color: var(--c-border); }
  button.ob-step { cursor: pointer; font-family: inherit; }
  button.ob-step:disabled { cursor: default; opacity: 0.85; }
  button.ob-step.todo:hover { color: var(--c-text); border-color: var(--c-text-subtle); background: var(--c-surface-warm); }

  /* ─── #157 v2 — Client detail layout — re-skinned to match the
     rest of the app's Quote-page-style brand feel (light card surfaces,
     14px body text, soft shadows, generous padding). Scoped to
     #beat360-detail-modal so it only affects this surface. */
  /* #119 — beefier hero, more breathing room, larger name. Matches Xero density. */
  #beat360-detail-modal .fp-hero { padding: 36px 32px 28px; border-bottom: 1px solid var(--c-border); background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%); }
  #beat360-detail-modal .fp-hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
  #beat360-detail-modal .fp-hero-name { font-size: 34px; font-weight: 800; color: var(--c-text); margin: 0 0 10px; line-height: 1.1; letter-spacing: -.02em; }
  #beat360-detail-modal .fp-hero-meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--c-text-subtle); flex-wrap: wrap; }
  #beat360-detail-modal .fp-hero-meta strong { color: var(--c-text); font-weight: 600; }
  #beat360-detail-modal .fp-hero-meta .sep { color: var(--c-border); }
  /* Avatar disc next to the name — first-letter monogram in a violet bubble */
  #beat360-detail-modal .fp-hero-name-row { display: flex; align-items: flex-start; gap: 16px; }
  #beat360-detail-modal .fp-hero-avatar {
    width: 56px; height: 56px; flex: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c-accent) 0%, #4c1d95 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; letter-spacing: -.02em;
    box-shadow: 0 6px 18px -8px rgba(91, 33, 182, .55);
    text-transform: uppercase;
  }
  #beat360-detail-modal .fp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  #beat360-detail-modal .fp-btn-mini { height: 36px; padding: 0 14px; border-radius: var(--r-input); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); display: inline-flex; align-items: center; gap: 6px; font-family: inherit; white-space: nowrap; }
  #beat360-detail-modal .fp-btn-mini:hover { background: var(--c-surface-warm); border-color: var(--c-text-subtle); }
  #beat360-detail-modal .fp-btn-mini.primary { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
  #beat360-detail-modal .fp-btn-mini.primary:hover { background: var(--brand-violet-2, #4c1d95); border-color: var(--brand-violet-2, #4c1d95); }
  #beat360-detail-modal .fp-btn-mini:disabled { opacity: 0.45; cursor: not-allowed; }

  #beat360-detail-modal .fp-kpis { display: flex; flex-wrap: wrap; padding: 16px 28px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); gap: 0; }
  #beat360-detail-modal .fp-kpis .hk { flex: 1; min-width: 110px; padding: 4px 16px; border-right: 1px solid var(--c-border-soft); display: flex; flex-direction: column; gap: 4px; }
  #beat360-detail-modal .fp-kpis .hk:first-child { padding-left: 0; }
  #beat360-detail-modal .fp-kpis .hk:last-child { border-right: 0; padding-right: 0; }
  #beat360-detail-modal .fp-kpis .hk .lbl { font-size: 11px; color: var(--c-text-subtle); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
  #beat360-detail-modal .fp-kpis .hk .val { font-size: 18px; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
  #beat360-detail-modal .fp-kpis .hk .val.danger { color: var(--c-danger); }
  #beat360-detail-modal .fp-kpis .hk .val.warn { color: #d97706; }
  #beat360-detail-modal .fp-kpis .hk .val.accent { color: var(--c-accent); }

  #beat360-detail-modal .fp-body-grid { display: grid; grid-template-columns: 360px 1fr; gap: 20px; padding: 24px 28px 32px; background: var(--c-bg); }
  #beat360-detail-modal .fp-body-grid > div { min-width: 0; }

  #beat360-detail-modal .fp-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); margin-bottom: 16px; box-shadow: var(--shadow-card); }
  #beat360-detail-modal .fp-panel-h { padding: 14px 18px; border-bottom: 1px solid var(--c-border-soft); font-size: 14px; color: var(--c-text); font-weight: 600; display: flex; justify-content: space-between; align-items: center; border-radius: var(--r-card) var(--r-card) 0 0; }
  #beat360-detail-modal .fp-panel-h .edit { font-size: 12px; font-weight: 600; color: var(--c-accent); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
  #beat360-detail-modal .fp-panel-body { padding: 14px 18px 16px; }
  #beat360-detail-modal .fp-fld { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--c-border-soft); align-items: center; }
  #beat360-detail-modal .fp-fld:last-child { border-bottom: 0; padding-bottom: 0; }
  #beat360-detail-modal .fp-fld:first-child { padding-top: 0; }
  #beat360-detail-modal .fp-fld .k { color: var(--c-text-subtle); font-size: 13px; }
  #beat360-detail-modal .fp-fld .v { color: var(--c-text); }
  #beat360-detail-modal .fp-fld .v.mono { font-family: inherit; font-size: 14px; }

  /* Summary strip — light surface card matching .counters / .fp-card */
  #beat360-detail-modal .fp-summary-strip { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 18px 24px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
  #beat360-detail-modal .fp-summary-strip h4 { margin: 0 0 14px; font-size: 13px; color: var(--c-text-subtle); font-weight: 600; }
  #beat360-detail-modal .fp-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  #beat360-detail-modal .fp-summary-grid .sg-num { font-size: 22px; font-weight: 700; color: var(--c-text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
  #beat360-detail-modal .fp-summary-grid .sg-num.warn { color: #d97706; }
  #beat360-detail-modal .fp-summary-grid .sg-num.danger { color: var(--c-danger); }
  #beat360-detail-modal .fp-summary-grid .sg-num.accent { color: var(--c-accent); }
  #beat360-detail-modal .fp-summary-grid .sg-lbl { font-size: 11px; color: var(--c-text-subtle); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: 4px; }

  /* Compliance blocks (cblock) — softer to match .fp-card */
  #beat360-detail-modal .cblock { border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-surface); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
  #beat360-detail-modal .cblock-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; border-bottom: 1px solid transparent; user-select: none; }
  #beat360-detail-modal .cblock-head:hover { background: var(--c-surface-warm); }
  #beat360-detail-modal .cblock:not(.collapsed) .cblock-head { border-bottom-color: var(--c-border-soft); }
  #beat360-detail-modal .cblock-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; letter-spacing: -.005em; color: var(--c-text); }
  #beat360-detail-modal .cblock-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--c-text-subtle); }
  #beat360-detail-modal .cblock-due { font-weight: 600; color: var(--c-text); }
  #beat360-detail-modal .cblock-due.danger { color: var(--c-danger); }
  #beat360-detail-modal .cblock-due.warn { color: #d97706; }
  #beat360-detail-modal .cblock-body { padding: 14px 18px 18px; font-size: 14px; }
  #beat360-detail-modal .cblock.collapsed .cblock-body { display: none; }
  #beat360-detail-modal .chev { color: var(--c-text-subtle); font-size: 13px; transition: transform 0.15s; display: inline-block; }
  #beat360-detail-modal .cblock.collapsed .chev { transform: rotate(-90deg); }

  #beat360-detail-modal .fp-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; }
  #beat360-detail-modal .fp-pill.ok { background: #dcfce7; color: #15803d; }
  #beat360-detail-modal .fp-pill.warn { background: var(--c-pill-warn-bg); color: var(--c-pill-warn-fg); }
  #beat360-detail-modal .fp-pill.danger { background: var(--c-pill-danger-bg); color: var(--c-pill-danger-fg); }
  #beat360-detail-modal .fp-pill.muted { background: var(--c-pill-bg); color: var(--c-text-muted); border: 1px solid var(--c-border); }
  #beat360-detail-modal .fp-pill.accent { background: var(--c-pill-bg); color: var(--c-accent); }
  #beat360-detail-modal .fp-pill.info { background: #dbeafe; color: #1e40af; }

  /* Pulse stream + item lists */
  .pulse-list { font-size: 13px; }
  .pulse-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-border-soft); }
  .pulse-row:last-child { border-bottom: 0; }
  .pulse-icon { font-size: 14px; flex: none; width: 24px; }
  .pulse-main { flex: 1; min-width: 0; }
  .pulse-title { color: var(--c-text); }
  .pulse-meta { color: var(--c-text-subtle); font-size: 11px; margin-top: 2px; }
  .item-list { display: flex; flex-direction: column; gap: 8px; }
  .item-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--r-input); background: var(--c-surface); }
  .item-row .it-main { flex: 1; min-width: 0; }
  .item-row .it-name { font-weight: 500; color: var(--c-text); }
  .item-row .it-meta { font-size: 12px; color: var(--c-text-subtle); margin-top: 2px; }
  .item-row .it-fee { font-weight: 600; color: var(--c-text); flex: none; }
  .item-row .it-fee .it-fee-meta { font-size: 11px; color: var(--c-text-subtle); font-weight: normal; display: block; }

  /* ──────────────────────────────────────────────────────────────────
     Quote Builder overlay (Step 7 — keep all form IDs + Tailwind markup,
     just nudge the visual tokens onto the new design system).
     Scoped to #view-quote so legacy proposals/external pages aren't
     affected.
     ────────────────────────────────────────────────────────────────── */
  #view-quote .section-title { color: var(--c-accent); font-weight: 600; }
  /* Re-theme the "card" pattern that wraps each section. */
  #view-quote .bg-white.rounded-lg.shadow-sm.border-slate-200,
  #view-quote details.bg-white.rounded-lg.shadow-sm.border-slate-200,
  #view-quote .bg-white.rounded-lg.border.border-slate-200 {
    border-color: var(--c-border) !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--shadow-card) !important;
  }
  /* Inputs + selects within Quote Builder — bring borders/radius onto
     stone palette without rewriting the Tailwind classes that live on
     each input. */
  #view-quote input[type="text"],
  #view-quote input[type="email"],
  #view-quote input[type="tel"],
  #view-quote input[type="number"],
  #view-quote input[type="date"],
  #view-quote select,
  #view-quote textarea {
    border-color: var(--c-border) !important;
    border-radius: var(--r-input) !important;
    background: var(--c-surface);
    color: var(--c-text);
  }
  #view-quote input:focus,
  #view-quote select:focus,
  #view-quote textarea:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: -1px;
    border-color: var(--c-accent) !important;
  }

  /* Backwards-compat shim — when later steps still leave a `.brand-header`
     somewhere, render it like the new appnav rather than the old cream
     band so the live app never flashes the old look mid-migration.
     Removed in Step 9 once nothing references it. */
  body.fp-stone { background: var(--c-bg); color: var(--c-text); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS (added 2026-05-12, F1 + F2 partial fix)
   The original CSS had zero @media queries — every layout was at
   desktop width. These rules make the staff app usable at tablet
   widths (768-1024px) and tolerable on phones, without rewriting
   the existing layout.
   ───────────────────────────────────────────────────────────── */

/* TABLET — 1024px and narrower. Tighten paddings, allow nav to
   horizontally scroll if it doesn't fit. */
@media (max-width: 1024px) {
  .appnav-inner {
    padding: 0 14px;
    gap: 8px;
  }
  .appnav .logo { font-size: 14px; gap: 6px; }
  .appnav .logo-mark { width: 24px; height: 24px; }
  .appnav .tab { padding: 0 10px; font-size: 13px; }
  .appnav .nav-right { gap: 8px; }
  .appnav .signout, .appnav .iconlink { padding: 6px 6px; font-size: 12px; }
  /* Body grid: stack the LEFT and RIGHT columns vertically on the
     client detail page rather than the 360px/1fr split that breaks
     at narrow widths. */
  #beat360-detail-modal .fp-body-grid {
    grid-template-columns: 1fr;
    padding: 18px 20px 28px;
  }
  /* Counters / KPI strips wrap onto multiple rows instead of overflowing. */
  .counters { flex-wrap: wrap; gap: 20px; }
  .fp-kpis { flex-wrap: wrap; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* NARROW TABLET / LARGE PHONE — 768px and narrower. Below this we
   accept a slightly broken layout but ensure no horizontal-scroll
   trap by allowing the page to reflow. */
@media (max-width: 768px) {
  .appnav-inner { height: auto; padding: 8px 12px; flex-wrap: wrap; gap: 6px; }
  .appnav .tabs { width: 100%; order: 3; padding-top: 4px; }
  .appnav .nav-right { order: 2; margin-left: auto; }
  .appnav .signout { display: none; }   /* hidden — use the avatar / settings menu instead */
  .appnav .iconlink[title="Settings"] { display: none; }
  .pagetitle h1 { font-size: 24px; }
  .pagetitle .sub { font-size: 13px; }
  /* Tables inside modals/views: allow horizontal scrolling within
     the table container rather than the whole page. */
  .fp-table-wrap, .pipeline-table-wrap, .clients-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* SMALL PHONE — 480px and narrower. Last-ditch — keep page usable
   even if the layout is dense. Real mobile UX is deferred until
   tenant-side mobile app or after Phase 3. */
@media (max-width: 480px) {
  .appnav .tab { padding: 0 8px; font-size: 12px; }
  main.fp-main, .wrap { padding-left: 12px; padding-right: 12px; }
}