/* ═══════════════════════════════════════════════════════════════════
   SENSOR shared stylesheet — "Quiet+"
   Built with Grant, 2026-09-23. Approved from the four-option preview.

   The decisions behind it:
     - Cards stay. Repaired, not replaced.
     - Brand stays. Navy and gold are SENSOR's; the serif keeps the wordmark.
     - One file, both portals, so a change lands on both at once.
     - Restraint everywhere EXCEPT urgency. Urgency decides what a
       specialist opens first, so it carries the strongest colour on screen.

   Loads after each portal's own <style> blocks, so it wins on cascade
   order without a single !important.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── BRAND. Two colours, one job each. ──────────────────────────────
     Gold used to be brand, action, state and emphasis at once, which is
     why nothing on screen had rank. Navy acts. Gold marks the brand and
     completed progress. */
  --act:         #1E2A44;
  --act-700:     #162034;
  --act-ghost:   rgba(30,42,68,.10);
  --bar:         #17161A;
  --gold:        #B89C6E;

  /* ── WARM NEUTRAL RAMP. Not blue-grey; that is every template's default.
     The cream ground is gone. ────────────────────────────────────────── */
  --ink:         #17161A;
  --ink-2:       #3A3833;
  --ink-3:       #6B6558;
  --ink-4:       #8F8A7E;
  --line:        #E4E0D7;
  --line-soft:   #EFECE5;
  --surface:     #FFFFFF;
  --surface-2:   #FAF9F6;
  --ground:      #F2F0EA;

  /* ── URGENCY. The one place colour is loud. ─────────────────────────── */
  --u-immediate:    #B3311B;  --u-immediate-bg: #FCEFEC;
  --u-hot:          #B96A1E;  --u-hot-bg:       #FDF3E8;
  --u-warm:         #8A6B1F;  --u-warm-bg:      #FAF4E3;
  --u-monitor:      #5B6470;  --u-monitor-bg:   #F1F3F5;

  /* ── SEMANTIC. State only, never branding. ──────────────────────────── */
  --good:        #2F7D5B;
  --warn:        #8F6B24;
  --bad:         #8E3524;

  /* ── SHAPE. Three radii by role, not one on everything. ─────────────── */
  --r-control:   8px;
  --r-card:      12px;
  --r-pill:      999px;
  --lift:        0 1px 2px rgba(23,22,26,.04), 0 6px 16px rgba(23,22,26,.06);

  --font-ui:     'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-brand:  'Cormorant Garamond', Georgia, serif;
}

/* ═══ TYPE ══════════════════════════════════════════════════════════
   Inter is out. Geist is drawn for density and carries tabular figures.
   The serif survives in exactly one place: the wordmark. */

body, .shell, input, select, textarea, button {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.brand-name { font-family: var(--font-brand); font-size: 19px; letter-spacing: .34em; }
.brand-sub  { font-size: 9.5px; letter-spacing: .18em; color: var(--gold); }

/* NOTHING BELOW 11px. There were 33 rules under it on residential and 49
   on commercial, fifteen at 8px, one at 5.5px. An agent reads a deal
   value outdoors, on a phone. */
.sec, .scard-score-lbl, .tier, .tr-top, .tab, .flabel, .fhelp, .hint,
.empty-t, .scard-meta, .scard-date, .agent-info-date, .agent-info-brokerage,
.rlbl, .sc-l, .sc-s, .privacy-note, .status-note, .never, .never-lbl,
.scard-notes, .ctag, .ctag-pref, .fee-label, .fee-sublabel, .csub, .covr,
.smeta, .bl, .bv, .spec-name, .lcontact-item, .lcontact-pref {
  font-size: 12px;
  line-height: 1.45;
}

.sec {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.flabel {
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; color: var(--ink-2);
}
.flabel .freq {
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--u-immediate); margin-left: 6px;
}
.scard-name, .lname { font-size: 17px; font-weight: 600; color: var(--ink); }
.scard-meta { font-size: 13px; color: var(--ink-3); }

/* ═══ NUMBERS ═══════════════════════════════════════════════════════
   A product about money and scores. Not one figure lined up before. */
.scard-score, .sc-n, .cbig, .sval, .fee-amount, .bv, .scard-date,
.kpi-n, .c-amt, .stat-n, .lfee, .rdot, td, .money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ═══ SURFACES ══════════════════════════════════════════════════════ */
body, .shell, .view, .scroll { background: var(--surface); }
@media (min-width: 760px) { html, body { background: var(--ground); } }

/* ═══ THE CARD ══════════════════════════════════════════════════════
   One radius, one shadow, one border. Previously eight radii and nine
   unrelated shadows. */
.scard, .lcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: 16px;
}
.scard + .scard, .lcard + .lcard { margin-top: 12px; }

.agent-strip {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px; margin-bottom: 14px;
}
.agent-info-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.agent-info-brokerage, .agent-info-date { color: var(--ink-4); }
.agent-avatar-sm {
  background: var(--act); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
}

/* ═══ URGENCY ═══════════════════════════════════════════════════════
   A filled pill in its own colour. This is the thing that decides what a
   specialist opens first, so it gets the strongest colour on the screen.
   Everything around it stays quiet so this reads. */
.tier {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pill); padding: 5px 11px 5px 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; border: 1px solid transparent;
}
.tier::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: currentColor; flex-shrink: 0;
}
.t-hot,  .tier-hot      { color: var(--u-immediate); background: var(--u-immediate-bg); border-color: rgba(179,49,27,.20); }
.t-warm, .tier-warm     { color: var(--u-hot);       background: var(--u-hot-bg);       border-color: rgba(185,106,30,.20); }
.t-monitor, .tier-monitor { color: var(--u-warm);    background: var(--u-warm-bg);      border-color: rgba(138,107,31,.20); }
.t-low,  .tier-low      { color: var(--u-monitor);   background: var(--u-monitor-bg);   border-color: rgba(91,100,112,.18); }
.t-unscored, .tier-unscored { color: var(--u-monitor); background: var(--u-monitor-bg); border-color: rgba(91,100,112,.18); }

/* The score takes the urgency colour, so the number and the badge agree
   instead of competing. */
.scard-score {
  font-size: 28px; font-weight: 700; letter-spacing: -.025em;
  line-height: 1; color: var(--u-immediate);
}
.scard-score-lbl {
  font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ═══ CONTROLS ══════════════════════════════════════════════════════ */
.finput, .fsel, .ftxt {
  font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 11px 12px; min-height: 44px;
}
.finput:focus, .fsel:focus, .ftxt:focus {
  outline: none; border-color: var(--act);
  box-shadow: 0 0 0 3px var(--act-ghost);
}
.finput::placeholder, .ftxt::placeholder { color: var(--ink-4); }

.chip, .cbtn {
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 9px 13px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chip.on, .cbtn.on {
  background: var(--act); border-color: var(--act);
  color: #fff; font-weight: 600;
}

/* THE FORM CARRIES THE URGENCY COLOURS TOO, so choosing a strength feels
   like a decision rather than ticking a radio button. Matches the badge
   on the card the signal becomes. */
.cbtn[data-v="Immediate Need"].on { background: var(--u-immediate); border-color: var(--u-immediate); }
.cbtn[data-v="Hot"].on            { background: var(--u-hot);       border-color: var(--u-hot); }
.cbtn[data-v="Warm"].on           { background: var(--u-warm);      border-color: var(--u-warm); }
.cbtn[data-v="Monitor"].on        { background: var(--u-monitor);   border-color: var(--u-monitor); }

@media (hover: hover) {
  .chip:not(.on):hover, .cbtn:not(.on):hover {
    border-color: var(--ink-4); background: var(--surface);
  }
}

.go, .claim-btn, .stage-btn, .sa-yes, .sp-btn, #sensor-login-btn {
  background: var(--act); color: #fff;
  border: 0; border-radius: var(--r-control);
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  min-height: 48px; letter-spacing: .01em;
}
.go:hover, .claim-btn:hover, .stage-btn:hover { background: var(--act-700); }
.claim-btn.claimed {
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line);
}

/* ═══ NAV ═══════════════════════════════════════════════════════════ */
.topbar { background: var(--bar); }
.nav    { background: var(--act); }
.tab    { color: rgba(255,255,255,.55); text-transform: none;
          font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.tab.on { color: #fff; border-bottom-color: var(--gold); }

/* ═══ THE RAIL ══════════════════════════════════════════════════════ */
.rlbl { font-size: 10.5px; color: var(--ink-4); letter-spacing: 0; }
.rdot {
  font-size: 11px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-4);
  border: 1px solid var(--line);
}
.rstep.done .rdot { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.rstep.curr .rdot { background: var(--act);  border-color: var(--act);  color: #fff; }
.rstep.done .rlbl, .rstep.curr .rlbl { color: var(--ink-2); font-weight: 600; }

/* ═══ CONTACT TAGS ══════════════════════════════════════════════════
   The emoji are gone from the markup. These carry the meaning. */
.ctag, .ctag-pref, .lcontact-item, .lcontact-pref {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: 5px 9px; font-size: 12px; color: var(--ink-3);
}
.privacy-note {
  font-size: 12px; color: var(--warn);
  background: none; border: 0; padding: 6px 0 0;
}

/* ═══ FEES ══════════════════════════════════════════════════════════ */
.fee-bar {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-control); padding: 12px 14px;
}
.fee-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
}
.fee-amount { font-size: 20px; font-weight: 600; color: var(--ink); }
.win-bar {
  background: rgba(47,125,91,.08); color: var(--good);
  border: 1px solid rgba(47,125,91,.22); border-radius: var(--r-control);
  font-size: 13px; font-weight: 600; padding: 10px 12px;
}

/* ═══ EMPTY STATES ══════════════════════════════════════════════════ */
.empty   { padding: 44px 20px; }
.empty-i { color: var(--line); font-size: 30px; }
.empty-t { font-size: 13.5px; color: var(--ink-3); line-height: 1.6; }

/* ═══ DESKTOP ═══════════════════════════════════════════════════════
   The responsive work from 2026-09-20 stands. This only sizes type up,
   because a 12px label on a 27 inch screen is a squint. */
@media (min-width: 760px) {
  .scard, .lcard { padding: 20px; }
  .scard-name, .lname { font-size: 18px; }
  .scard-score { font-size: 32px; }
  .flabel { font-size: 13px; }
  .finput, .fsel, .ftxt { font-size: 15.5px; }
  .tab { font-size: 13px; }
  .sec { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   LAYERING FIXES — 2026-09-23, after checking the LIVE pages.

   MY TESTING WAS WRONG. In the preview only one stylesheet was active at
   a time, so these elements inherited Geist from body. On the real pages
   BOTH stylesheets apply, and wherever the portal's own CSS sets a
   property explicitly and this file was silent, the old value won.

   Two visible faults came from that:
     1. The score and the client name still rendered in Cormorant.
     2. The stage rail labels wrapped mid-word - "SUBMI TTED",
        "APPLIE D" - because 8 steps share a 39px column.
   ═══════════════════════════════════════════════════════════════════ */

/* The serif belongs to the wordmark. Nowhere else. The portal's own CSS
   sets it explicitly on all of these, so it has to be taken back
   explicitly. */
.scard-name, .scard-score, .fee-amount, .analytics-name, .kpi-n,
.stat-row-val.bronze, .deal-row-fee, .empty-i, .empty-t, .lname, .lfee {
  font-family: var(--font-ui);
}
.empty-t { font-style: normal; }
.fee-amount { font-weight: 600; }
.kpi-n { font-weight: 600; letter-spacing: -.02em; }

/* ── THE STAGE RAIL ────────────────────────────────────────────────
   Eight stages across a card 39px per step. There is no type size that
   fits "Due Diligence Completed" in 39px, so the labels come off the
   CARD rail and the numbered dots carry the sequence. The stage is
   already named in words directly beneath, in the status line, so
   nothing is lost.

   The tracker panel keeps its full labels - it is full width and has
   the room. */
.rail .rlbl { display: none; }
.rail .rail-row { gap: 6px; align-items: center; }
.rail .rstep { min-width: 0; }
.rail .rdot {
  width: 24px; height: 24px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; border-radius: var(--r-pill);
}

/* The status line now carries the stage name, so it earns some weight. */
.status-note { font-size: 12.5px; color: var(--ink-3); }
.status-note span { color: var(--ink); font-weight: 600; }

/* NO breakpoint brings the labels back.
   MEASURED on the live page: the cards sit three across on a wide screen,
   so each step is about 28px whatever the viewport does. A viewport query
   was the wrong test - it showed "SUB...", "APP...", "ENG..." which reads
   worse than no label at all. The dots carry position, the status line
   carries the name. */

/* ═══════════════════════════════════════════════════════════════════
   RESIDENTIAL PIPELINE AND MONETIZE — 2026-09-23.

   The residential portal names its cards, stats and calculator with
   its own classes (.lscore, .stat-n, .cbig, .sc-n ...). Nothing above
   named them, so the old serif, the gold figures and the 7.5px labels
   won on the cascade. Commercial uses none of these classes, so this
   block cannot change it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The serif comes off every figure. ── */
.stat-n, .lscore, .lfee-n, .cbig, .sc-n, .brow.hl .bv {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.02em;
}

/* ── Pipeline header ── */
.phead { background: var(--act); }
.phead-label {
  font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.6);
}
.stats { border-radius: var(--r-control); }
.stat  { background: var(--act-700); padding: 14px 8px; }
.stat-n { font-size: 26px; font-weight: 600; color: #fff; }
.stat-l {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: rgba(255,255,255,.6); margin-top: 5px;
}

/* ── Tier legend ── */
.tier-legend {
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--lift);
}
.tier-legend-title {
  background: var(--surface-2); color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .1em;
}
.tier-legend-rows { gap: 10px; padding: 12px 14px; }
.tier-row-label { font-size: 12.5px; color: var(--ink-2); }
.tier-row-range {
  font-size: 12px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ── Urgency badge. The same filled pill as .tier on commercial. ── */
.tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pill); padding: 4px 10px 4px 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; border: 1px solid transparent;
  white-space: nowrap;
}
.tier-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: currentColor; flex-shrink: 0;
}
.tier-legend .tier-badge { min-width: 86px; }

/* ── The card ── */
.lcard { padding: 0; overflow: hidden; }
.ltop  { padding: 16px 16px 10px; }
.lsub  { font-size: 12.5px; font-weight: 400; color: var(--ink-3); margin-top: 4px; }
.lscore-wrap { gap: 8px; }
/* The score takes the urgency colour, as it does on commercial. */
.lscore { font-size: 28px; font-weight: 700; line-height: 1; color: var(--ink); }
.lscore-wrap:has(.tier-hot)     .lscore { color: var(--u-immediate); }
.lscore-wrap:has(.tier-warm)    .lscore { color: var(--u-hot); }
.lscore-wrap:has(.tier-monitor) .lscore { color: var(--u-warm); }
.lscore-wrap:has(.tier-low)     .lscore { color: var(--u-monitor); }
.lscore-label, .lfee-l {
  font-size: 11px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4); margin-top: 4px;
}
.lfee-n { font-size: 18px; font-weight: 600; color: var(--ink); }

.rail     { padding: 4px 16px 14px; }
.lcontact { padding: 0 16px 10px; gap: 6px; }
.lcontact-pref {
  background: var(--act-ghost); color: var(--act); border-color: transparent;
  font-weight: 600; text-transform: none; letter-spacing: 0;
}
.lagent { font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 0 16px 12px; }

.winbar {
  margin: 0 16px 12px;
  background: rgba(47,125,91,.08); color: var(--good);
  border: 1px solid rgba(47,125,91,.22); border-radius: var(--r-control);
  font-size: 13px; font-weight: 600; padding: 10px 12px;
}

.lfoot {
  padding: 10px 16px;
  background: var(--surface-2); border-top: 1px solid var(--line-soft);
}
.ldate { font-size: 12px; font-weight: 400; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* Stage pill. Neutral while the deal moves, navy once retained,
   green when closed. Urgency owns the loud colours, not the stage. */
.lstatus {
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; padding: 4px 10px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-3);
}
.lstatus.s3, .lstatus.s4, .lstatus.s5, .lstatus.s6 {
  background: var(--act-ghost); color: var(--act); border-color: rgba(30,42,68,.18);
}
.lstatus.s7 {
  background: rgba(47,125,91,.08); color: var(--good); border-color: rgba(47,125,91,.22);
}

/* ── Monetize: the calculator ── */
.cdisp { background: var(--act); border-radius: var(--r-card); padding: 24px 18px 20px; }
.cdisp::before { background: var(--gold); }
.cey  { font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.cbig { font-size: 48px; font-weight: 600; color: #fff; }
.csub { font-size: 12.5px; color: rgba(255,255,255,.7); }
.covr { font-size: 13px; color: var(--gold); }

.smeta { font-size: 12.5px; color: var(--ink-3); }
.sval  { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sdiv  { background: var(--line-soft); }
input[type=range] { height: 4px; border-radius: var(--r-pill); background: var(--line); }
input[type=range]::-webkit-slider-thumb {
  width: 22px; height: 22px; background: var(--act);
  box-shadow: 0 1px 4px rgba(23,22,26,.2);
}

.brow { border-bottom-color: var(--line-soft); }
.bl   { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.bv   { font-size: 13px; color: var(--ink); }
.bv.bro { color: var(--warn); }
.bv.ind { color: var(--act); }
.brow.hl { background: var(--act-ghost); border-color: rgba(30,42,68,.14); }
.brow.hl .bl { font-size: 13px; color: var(--ink); }
.brow.hl .bv { font-size: 18px; font-weight: 700; color: var(--act); }

/* ── Monetize: annual projection ── */
.scgrid { gap: 10px; }
.sc {
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--lift); padding: 16px 10px;
}
.sc-l { font-size: 11px; letter-spacing: .08em; color: var(--ink-4); }
.sc-n { font-size: 24px; font-weight: 600; color: var(--ink); }
.sc-s { font-size: 12px; color: var(--ink-4); margin-top: 5px; }
@media (hover: hover) {
  .sc:hover { background: var(--act); border-color: var(--act); }
  .sc:hover .sc-n { color: #fff; }
  .sc:hover .sc-l, .sc:hover .sc-s { color: rgba(255,255,255,.6); }
}

/* ── Toast ── */
.toast {
  background: var(--ink); border: 0; border-radius: var(--r-control);
  font-size: 13px; letter-spacing: 0; padding: 12px 18px;
}

/* ═══════════════════════════════════════════════════════════════════
   COMMERCIAL LEFTOVERS - 2026-09-23.

   The commercial portal names these classes in its own inline CSS and
   nothing above named them, so the old look won: 7px to 10px uppercase
   labels, gold figures, 2px to 4px radii. Checked against the residential
   markup: none of these classes render there, so this block cannot
   change it.

   THREE RULES USE !important. JS writes the inbox fee, its
   "Your cut" label and the pending line with inline style="", and inline
   style beats any selector. Each rule is scoped to that one element by
   its own style text.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Top bar: the specialist badge ── */
.spec-badge  { border-radius: var(--r-pill); background: var(--act); }
.spec-avatar {
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.spec-name   { font-size: 12.5px; color: #fff; }
.spec-switch { font-size: 12px; color: rgba(255,255,255,.55); }

/* ── Nav count. Gold marks the brand, not a count. ── */
.tab-badge {
  background: #fff; color: var(--act);
  font-size: 11px; font-weight: 600; line-height: 1;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

/* ── Inbox filters. The same control as .chip. ── */
.filter-bar { gap: 8px; }
.filter-btn {
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 8px 13px; min-height: 36px;
  display: inline-flex; align-items: center;
}
.filter-btn.on { background: var(--act); border-color: var(--act); color: #fff; font-weight: 600; }

/* ── Signal Score explainer ── */
.score-explainer {
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--lift); margin-bottom: 16px;
}
.score-explainer-head {
  background: var(--surface-2); color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  padding: 10px 14px;
}
.score-explainer-body p { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.score-explainer-body strong { color: var(--ink); }
.score-tiers { gap: 10px; }
.score-tier-row { gap: 10px; }
.score-tier-row .tier { min-width: 86px; justify-content: flex-start; }
.score-range {
  font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: 52px;
  font-variant-numeric: tabular-nums;
}
.score-desc { font-size: 12px; font-weight: 400; color: var(--ink-3); line-height: 1.4; }

/* ── The signal card ── */
.agent-info-name {
  font-family: var(--font-ui); font-size: 12.5px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.agent-info-brokerage { text-transform: none; letter-spacing: 0; }
.scard-top     { gap: 12px; }
.scard-right   { gap: 2px; }
.scard-agent   { font-size: 12px; font-weight: 600; color: var(--act); }
.scard-contact { gap: 6px; }
.scard-foot {
  padding: 10px 14px;
  background: var(--surface-2); border-top: 1px solid var(--line-soft);
}
.claim-btn { text-transform: none; letter-spacing: .01em; }
.ctag-pref {
  background: var(--act-ghost); color: var(--act); border-color: transparent;
  font-weight: 600; text-transform: none; letter-spacing: 0;
}

/* The score takes its own tier colour, as .lscore does on residential.
   The block above paints every score red, so a Warm 72 read as Hot. */
.scard-score { color: var(--ink); }
.scard:has(.t-hot)       .scard-score { color: var(--u-immediate); }
.scard:has(.t-warm)      .scard-score { color: var(--u-hot); }
.scard:has(.t-monitor)   .scard-score { color: var(--u-warm); }
.scard:has(.t-low)       .scard-score,
.scard:has(.t-unscored)  .scard-score { color: var(--u-monitor); }

/* The fee under the score. renderInbox() writes it inline. */
.scard-right > div[style*="Cormorant"] {
  font-family: var(--font-ui) !important;
  font-size: 15px !important; font-weight: 600 !important;
  color: var(--ink) !important; margin-top: 8px !important;
  font-variant-numeric: tabular-nums;
}
.scard-right > div[style*="7.5px"] {
  font-size: 11px !important; letter-spacing: .08em !important;
  color: var(--ink-4) !important;
}

/* The pending line on a My Deals card is gold inline. It is a state. */
.status-note span[style*="B89C6E"] { color: var(--warn) !important; }

/* The sublabel was white on navy. The fee bar is light now. */
.fee-sublabel { font-size: 11px; color: var(--ink-4); }

/* ── Stage pill. The same rule as .lstatus on residential:
      neutral while it moves, navy once retained, green when closed. ── */
.scard-status {
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; padding: 4px 10px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-3);
}
.ss0, .ss1, .ss2 { background: var(--surface); color: var(--ink-3); border-color: var(--line); }
.ss3, .ss4, .ss5, .ss6 {
  background: var(--act-ghost); color: var(--act); border-color: rgba(30,42,68,.18);
}
.ss7, .sb-open {
  background: rgba(47,125,91,.08); color: var(--good); border-color: rgba(47,125,91,.22);
}
.sb-closed { background: var(--surface-2); color: var(--ink-4); border-color: var(--line); }

/* ── Analytics ── */
.analytics-header { background: var(--act); padding: 18px 16px 16px; }
.analytics-name   { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.kpi-grid { border-radius: var(--r-control); }
.kpi   { background: var(--act-700); padding: 14px 8px; }
.kpi-n { font-size: 26px; color: #fff; }
.kpi-l {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: rgba(255,255,255,.6); margin-top: 5px;
}

.stat-card {
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--lift); margin-bottom: 12px;
}
.stat-card-head {
  background: var(--surface-2); color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .1em;
}
.stat-row { border-bottom-color: var(--line-soft); }
.stat-row-label { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.stat-row-val, .stat-row-val.indigo, .stat-row-val.bronze {
  font-size: 14px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.velocity-label { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.velocity-track { height: 6px; background: var(--line-soft); border-radius: var(--r-pill); }
.velocity-fill  { background: var(--act); border-radius: var(--r-pill); }

.deal-row        { border-bottom-color: var(--line-soft); gap: 12px; }
.deal-row-name   { font-size: 14px; font-weight: 600; color: var(--ink); }
.deal-row-meta   { font-size: 12px; color: var(--ink-4); margin-top: 3px; }
.deal-row-right  { flex-shrink: 0; }
.deal-row-fee {
  font-size: 15px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.deal-row-status {
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; color: var(--ink-3); margin-top: 3px;
}

/* ── Submit form. The tab is hidden today. This keeps it in line. ── */
.go-btn {
  background: var(--act); color: #fff; border-radius: var(--r-control);
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  letter-spacing: .01em; text-transform: none; min-height: 48px;
}
.go-btn:hover { background: var(--act-700); }
.submit-hint { font-size: 12px; color: var(--ink-4); }

/* ── The old demo gate. The login hides it and then removes it. If it
      ever shows, it keeps the same label sizes and radii. The serif on
      .gate-brand stays: it is the wordmark. ── */
.gate-cre, .gate-role, .gate-label { font-size: 11px; letter-spacing: .14em; }
.gate-role, .gate-label { color: rgba(255,255,255,.6); }
.gate-box  { border-radius: var(--r-card); border-color: rgba(255,255,255,.12); }
.gate-opt  { border-radius: var(--r-control); font-size: 15px; }
.gate-hint { font-size: 12px; color: rgba(255,255,255,.5); }

/* ═══ SIGNAL FACTS — 2026-09-24, Nathalie ═══════════════════════════
   The agent's own urgency next to the score, and the trigger word. */
.scard-said, .scard-keyword {
  font-size: 12px; line-height: 1.4; margin-top: 6px; color: var(--ink-3);
}
.scard-said { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scard-keyword {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--u-hot-bg); color: var(--u-hot);
  border: 1px solid rgba(185,106,30,.2); font-weight: 600;
}

/* ═══ SPECIALIST PROFILE — V2 R18, 2026-09-24 ═══════════════════════
   .pf-*  the specialist edits their own profile (commercial, My Profile).
   .pv-*  the agent reads it (residential, approvals and pipeline card). */
.pf-card {
  margin: 12px 16px 24px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--lift);
}
.pf-lede { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 0 0 12px; }
.pf-name { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.pf-name:empty { display: none; }
.pf-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.pf-row .finput, .pf-row .ftxt { width: 100%; box-sizing: border-box; }
.pf-help { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.pf-bio { height: 168px; resize: vertical; line-height: 1.5; }
.pf-period {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border-top: 1px solid var(--line-soft);
  padding-top: 12px; margin: 4px 0 10px;
}
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.pf-grid .pf-row { justify-content: space-between; }
.pf-save { width: 100%; margin-top: 4px; cursor: pointer; }
.pf-save[disabled] { opacity: .6; cursor: default; }
.pf-msg { font-size: 13px; line-height: 1.45; margin-top: 10px; color: var(--ink-3); }
.pf-msg:empty { display: none; }
.pf-msg.pf-ok  { color: var(--good); }
.pf-msg.pf-bad { color: var(--bad); }

.pv {
  margin: 0 0 12px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-control);
}
.lcard .pv { margin: 0 14px 12px; }
.pv-head {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.pv-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.pv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; }
.pv-fact { display: flex; flex-direction: column; min-width: 0; }
.pv-k { font-size: 11px; font-weight: 500; color: var(--ink-4); }
.pv-v {
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.pv-note { font-size: 11px; color: var(--ink-4); margin-top: 8px; }
.pv-bio {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
  margin: 10px 0 0; white-space: pre-line; overflow-wrap: anywhere;
}
.pv-more { margin-top: 10px; }
.pv-more summary {
  font-size: 13px; font-weight: 600; color: var(--act); cursor: pointer;
  min-height: 32px; display: flex; align-items: center;
}
.pv-more .pv-bio { margin-top: 4px; }
@media (max-width: 820px) {
  .pv-bio, .pv-v { font-size: 15px; }
  .pv-name { font-size: 16px; }
}

/* ═══ PRE-SHIP POLISH — 2026-09-27 ═════════════════════════════════
   Contact tags that are links keep the tag look and read as tappable. */
a.ctag, a.lcontact-item { color: var(--act); text-decoration: underline; text-underline-offset: 2px; }
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }