/* =============================================================================
   ProducerPoint — visual system (adopted verbatim from the approved Gate 4 direction)
   Approved visual direction: Option C — Combined Experience
     · Producer Workspace = light professional surfaces
     · Focused Call Mode  = soft-dark shell, light elevated dominant script surface
   Native system font stack. No bundled fonts, no CDNs, no monospace identity.
   ============================================================================= */

:root {
  /* Workspace (Option A tokens) */
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-sunken: #f2f1ed;
  --border: #e7e4de;
  --border-strong: #d6d2c9;
  --text: #171b22;
  --text-muted: #5a6070;
  /* CONTRAST, 2026-08-04. Was #8b8f9c at 3.23:1 on white and 2.93:1 on the
     sunken surface — well under 4.5:1, and this token carries card meta, page
     subtitles, hints and .rail-label. Now 5.12:1 on white. */
  --text-faint: #676e7c;
  --accent: #1d4e89;
  --accent-hover: #163d6d;
  --accent-soft: #e9eff7;
  --notice-ink: #21447f;
    --positive: #2f6f4e;
  --positive-soft: #eaf1eb;
  --caution: #7d5c14;
  --caution-soft: #fbf2e2;
  --caution-line: #e5cfa4;
  --danger: #a33f35;
  --danger-soft: #f8efed;

  /* Call Mode (Option B tokens) */
  --cm-bg: #26292e;
  --cm-rail: #2d3138;
  --cm-rail-2: #353b45;
  --cm-line: #3a3f47;
  --cm-text: #c9cdd3;
  --cm-text-faint: #838b96;
  --cm-accent: #7fa3d7;
  --cm-surface: #f7f8fa;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(23, 27, 34, .04);
  --shadow-md: 0 6px 20px rgba(23, 27, 34, .07), 0 1px 2px rgba(23,27,34,.04);
  --shadow-lg: 0 24px 60px rgba(12, 16, 24, .32);
  /* Inter for everything a producer reads and operates: navigation, controls,
     scripts, tables, body copy. The fallback stack is metric-similar so a font
     that fails to load does not reflow a script mid-call. */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Space Grotesk for the ProducerPoint wordmark and limited brand headings
     ONLY. It is never used for operational content. */
  --font-brand: 'Space Grotesk', 'Inter', -apple-system, "Segoe UI", system-ui, sans-serif;
  --dur: 180ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.cm :focus-visible { outline-color: var(--cm-accent); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  /* CONTRAST, 2026-08-04. This inherited --accent, which flips to a LIGHT blue
     in dark mode — white on it measured 2.37:1. A skip link is the first thing
     a keyboard user reaches and the one control that must be readable wherever
     it lands, so its two colours are pinned rather than themed. 13.1:1. */
  background: #12305c; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- prototype banner ---------- */
.proto-banner {
  position: relative; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 20px;
  background: #1f2733; color: #dbe2ec;
  font-size: 13px;
}
.proto-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cm-accent); flex: none; }
.proto-banner strong { color: #fff; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }
.proto-banner__text { color: #a4b0c0; }
.proto-banner__reset {
  margin-left: auto; color: #dbe2ec; border: 1px solid #414c5c; border-radius: 999px;
  padding: 4px 14px; font-size: 12.5px;
}
.proto-banner__reset:hover { background: #2a3542; }

/* ---------- workspace shell ---------- */
.ws-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.ws-nav__inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 26px; }
.ws-brand { font-weight: 640; font-size: 15.5px; letter-spacing: -.01em; white-space: nowrap; }
.ws-links { display: flex; align-items: center; gap: 3px; }
.ws-link {
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-muted);
  white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ws-link:hover { background: var(--surface-sunken); color: var(--text); }
.ws-link[aria-current="page"] { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.ws-group { position: relative; }
.ws-group__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 214px; z-index: 40;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 6px;
}
.ws-group__menu[hidden] { display: none; }
.ws-group__menu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text);
}
.ws-group__menu button:hover { background: var(--surface-sunken); }
.ws-group__menu .menu-label { padding: 8px 12px 4px; font-size: 11px; letter-spacing: .08em; color: var(--text-faint); text-transform: uppercase; }
.ws-avatar {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-size: 12px; font-weight: 650; display: grid; place-items: center; flex: none;
}

.page { max-width: 1440px; margin: 0 auto; padding: 26px 24px 72px; }
.page--wide { max-width: none; padding-left: 24px; padding-right: 24px; }

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-title { font-size: 25px; font-weight: 640; letter-spacing: -.02em; }
.page-sub { color: var(--text-muted); font-size: 14px; margin-top: 3px; }
.page-head__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- primitives ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card__head { padding: 15px 18px 0; display: flex; align-items: baseline; gap: 10px; }
.card__title { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.card__meta { margin-left: auto; font-size: 12.5px; color: var(--text-faint); }
.card__body { padding: 13px 18px 17px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 560; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-sunken); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); }
.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 550; background: var(--surface-sunken); color: var(--text-muted); white-space: nowrap;
}
.chip--accent { background: var(--accent-soft); color: var(--accent); }
/* CONTRAST, 2026-08-04. `--positive` resolves to the emerald FILL hue, which
   reads 2.55–3.03:1 as 12px text on its own wash. The text-safe ink is used
   here; the fill token is untouched. */
.chip--positive { background: var(--positive-soft); color: var(--emerald-ink, var(--positive)); }
.chip--caution { background: var(--caution-soft); color: var(--caution); }
.chip--danger { background: var(--danger-soft); color: var(--danger); }
.chip--outline { background: transparent; border: 1px solid var(--border-strong); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.input, select.input, textarea.input {
  min-height: 44px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 14.5px; width: 100%;
}
textarea.input { min-height: 74px; resize: vertical; }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__val { font-size: 26px; font-weight: 640; letter-spacing: -.02em; }
.stat__label { font-size: 12.5px; color: var(--text-muted); }

.empty { padding: 18px; text-align: left; color: var(--text-muted); font-size: 14px; }
.empty strong { display: block; color: var(--text); font-weight: 580; margin-bottom: 4px; }

.rowlist { display: flex; flex-direction: column; }
.rowlist__row {
  display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border);
  text-align: left; width: 100%;
}
.rowlist__row:first-child { border-top: none; }
.rowlist__row:hover { background: var(--surface-sunken); }
.rowlist__time { font-size: 13.5px; color: var(--text-muted); min-width: 62px; font-variant-numeric: tabular-nums; }
.rowlist__main { flex: 1; min-width: 0; }
.rowlist__title { font-size: 14.5px; display: block; }
.rowlist__sub { font-size: 12.5px; color: var(--text-faint); display: block; margin-top: 1px; }
.rowlist__go { font-size: 13px; color: var(--accent); }

/* ---------- Today ---------- */
.greeting { font-size: 27px; font-weight: 640; letter-spacing: -.024em; }
.today-date { color: var(--text-muted); font-size: 14px; }
.hero {
  width: 100%; display: flex; align-items: center; gap: 18px; text-align: left;
  background: var(--accent); color: #fff; border-radius: 12px; padding: 20px 26px; min-height: 80px;
  box-shadow: 0 6px 18px rgba(46, 90, 172, .22);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero:hover { background: var(--accent-hover); box-shadow: 0 8px 22px rgba(46, 90, 172, .3); }
.hero__play { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; font-size: 13px; }
.hero__title { font-size: 20px; font-weight: 620; }
.hero__meta { margin-left: auto; text-align: right; font-size: 13.5px; color: #cfdcf2; }
.hero__kbd { display: block; font-size: 11.5px; color: #9fb7dd; margin-top: 3px; }

.today-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 18px; align-items: start; }
.today-col { display: flex; flex-direction: column; gap: 16px; }
.strip { margin-top: 18px; }
.strip__label { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 9px; }
.strip__items { display: flex; gap: 10px; flex-wrap: wrap; }
.tile {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  padding: 11px 15px; min-width: 132px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tile:hover { border-color: var(--accent); }
.tile__name { font-size: 14px; font-weight: 550; }
.tile__meta { font-size: 12px; color: var(--text-faint); }

/* ---------- Leads board ---------- */
.viewtoggle { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.viewtoggle button { padding: 7px 18px; border-radius: 5px; font-size: 13.5px; color: var(--text-muted); font-weight: 550; }
.viewtoggle button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters select, .filters input { min-height: 38px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 13.5px; }

.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x proximity; }
.board__col { flex: 0 0 268px; scroll-snap-align: start; display: flex; flex-direction: column; }
.board__colhead { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 9px; position: sticky; top: 0; }
.board__colname { font-size: 13px; font-weight: 620; }
.board__colcount { margin-left: auto; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.board__drop { display: flex; flex-direction: column; gap: 10px; min-height: 120px; border-radius: var(--radius); padding: 3px; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.board__drop.is-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.board__drop.is-protected.is-over { background: var(--caution-soft); box-shadow: inset 0 0 0 2px var(--caution-line); }
.board__empty { font-size: 12.5px; color: var(--text-faint); padding: 12px 6px; }

.leadcard {
  display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px; cursor: grab;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.leadcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.leadcard.is-dragging { opacity: .45; }
.leadcard.is-restricted { background: var(--surface-sunken); cursor: default; }
.leadcard__name { font-size: 14.5px; font-weight: 600; }
.leadcard__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.leadcard__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.leadcard__next { font-size: 12.5px; color: var(--accent); margin-top: 9px; }
.leadcard__next--muted { color: var(--text-faint); }

.tray { margin-top: 6px; }
.tray__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; text-align: left; }
.tray__body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- table (list view) ---------- */
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  font-weight: 600; padding: 0 12px 9px; white-space: nowrap;
}
table.data th button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
table.data td { padding: 11px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:hover { background: var(--surface-sunken); }
table.data tbody tr.is-restricted td { color: var(--text-faint); }
.cell-name { font-weight: 560; }
.linkish { color: var(--accent); text-align: left; }

/* ---------- lead workspace ---------- */
.lw-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lw-name { font-size: 24px; font-weight: 640; letter-spacing: -.02em; }
.lw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.deflist { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 14px; }
.deflist dt { color: var(--text-muted); }
.deflist dd { margin: 0; }
.deflist .absent { color: var(--text-faint); font-style: italic; }
.domaingrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.domain { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 11px 13px; }
.domain__label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.domain__val { font-size: 15px; font-weight: 580; margin-top: 4px; }

.timeline { display: flex; flex-direction: column; }
.timeline__item { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.timeline__item:first-child { border-top: none; }
.timeline__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--border-strong); }
.timeline__dot--call { background: var(--accent); }
.timeline__dot--import { background: var(--positive); }
.timeline__dot--app { background: var(--caution); }
.timeline__dot--flag { background: var(--danger); }
.timeline__title { font-size: 14px; }
.timeline__meta { font-size: 12.5px; color: var(--text-faint); }

.notice {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px;
  /* CONTRAST, 2026-08-04. The colour was HARD-CODED #21447f while its
     background is a token that flips: in dark mode the navy text sat on a navy
     wash at 1.52:1. It now uses a token that themes with its own background —
     8.26:1 light, 6.12:1 dark. */
  background: var(--accent-soft); color: var(--notice-ink);
}
.notice--caution { background: var(--caution-soft); color: var(--caution); }
.notice--danger { background: var(--danger-soft); color: var(--danger); }
.notice--plain { background: var(--surface-sunken); color: var(--text-muted); }

/* =============================================================================
   FOCUSED CALL MODE — soft-dark shell, light elevated script surface
   ============================================================================= */
.cm { position: fixed; inset: 0; z-index: 70; background: var(--cm-bg); color: var(--cm-text); display: flex; flex-direction: column; }
.cm__top {
  height: 58px; flex: none; background: var(--cm-rail); border-bottom: 1px solid var(--cm-line);
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
}
.cm__mode { font-size: 14.5px; font-weight: 620; color: #e9ebee; letter-spacing: -.01em; }
.cm__lead { display: inline-flex; align-items: center; gap: 8px; background: var(--cm-rail-2); border-radius: 999px; padding: 5px 13px; font-size: 13.5px; color: var(--cm-accent); }
.cm__privacy { font-size: 11.5px; color: var(--cm-text-faint); border: 1px solid var(--cm-line); border-radius: 999px; padding: 3px 10px; }
.cm__privacy:hover { color: var(--cm-text); border-color: #55606e; }
.cm__privacy[aria-pressed="true"] { color: var(--cm-accent); border-color: #48586f; background: #313846; }
.cm__timer { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.cm__timerval { font-size: 12.5px; color: var(--cm-text-faint); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cm__timertoggle { font-size: 11.5px; color: var(--cm-text-faint); border: 1px solid transparent; border-radius: 999px; padding: 3px 9px; }
.cm__timertoggle:hover { color: var(--cm-text); border-color: var(--cm-line); }
.cm__end { border: 1px solid #4a505a; border-radius: var(--radius-sm); color: #d9938c; padding: 7px 15px; font-size: 13.5px; }
.cm__end:hover { background: #33272a; color: #e8a9a2; }

.cm__body { flex: 1; display: grid; grid-template-columns: 250px minmax(0, 1fr) 268px; min-height: 0; }

/* journey rail */
.cm__rail { background: var(--cm-rail); border-right: 1px solid var(--cm-line); overflow-y: auto; padding: 18px 0 24px; }
.cm__rail--right { border-right: none; border-left: 1px solid var(--cm-line); }
/* CONTRAST, 2026-08-04. This used --cm-text-faint, a token tuned for Call
   Mode's soft-dark surface. Reused on the light screens — Call Prep, Imports,
   the lead workspace — it measured 3.44:1 on white. The Call Mode value is
   restored inside `.cm` below, where it is correct. */
.rail-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); padding: 0 18px 12px; font-weight: 600; }
.cm .rail-label { color: var(--cm-text-faint); }
.journey { display: flex; flex-direction: column; }
.journey__item { display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; padding: 8px 18px; font-size: 13.5px; color: var(--cm-text-faint); }
.journey__item:hover { background: #333944; color: var(--cm-text); }
.journey__item.is-done { color: #9aa1ab; }
.journey__item.is-current { background: #39404b; color: #e9ebee; font-weight: 600; }
.journey__item.is-upcoming { color: #767d88; }
.journey__mark { width: 15px; height: 15px; border-radius: 50%; flex: none; margin-top: 2px; display: grid; place-items: center; font-size: 9px; }
.is-done .journey__mark { background: #79a98b; color: #26292e; }
.is-current .journey__mark { background: var(--cm-accent); }
.is-upcoming .journey__mark { border: 1.5px solid #4a505a; }
.journey__sub { display: block; font-size: 11.5px; color: var(--cm-text-faint); font-weight: 400; }
.journey__skipped { margin: 6px 18px; border: 1px dashed #4a505a; border-radius: var(--radius-sm); }
.journey__skipped summary { padding: 8px 12px; font-size: 12.5px; color: var(--cm-text-faint); cursor: pointer; list-style: none; }
.journey__skipped summary::-webkit-details-marker { display: none; }
.journey__skipped summary::before { content: "▸ "; }
.journey__skipped[open] summary::before { content: "▾ "; }
.journey__skipped ul { margin: 0; padding: 0 12px 10px 28px; font-size: 12.5px; color: var(--cm-text-faint); }
.cm__progress { margin: 16px 18px 0; padding-top: 14px; border-top: 1px solid var(--cm-line); font-size: 12px; color: var(--cm-text-faint); }
.cm__bar { height: 5px; border-radius: 3px; background: #3a3f47; margin-top: 8px; overflow: hidden; }
.cm__bar span { display: block; height: 100%; background: var(--cm-accent); border-radius: 3px; transition: width var(--dur) var(--ease); }

/* center — light elevated dominant script surface */
.cm__center { overflow-y: auto; padding: 26px 30px 40px; display: flex; flex-direction: column; align-items: center; transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); }
.cm__center.is-dimmed { opacity: .55; filter: saturate(.85); }
.cm__stagekicker { align-self: stretch; max-width: 860px; width: 100%; margin: 0 auto 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cm-text-faint); }
.script {
  width: 100%; max-width: 860px; background: var(--cm-surface); color: var(--text);
  border-radius: 14px; padding: 28px 32px 26px; box-shadow: var(--shadow-lg);
}
.script__stage { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.script__provenance { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.script__text { font-size: 20px; line-height: 1.6; margin: 20px 0 6px; max-width: 62ch; }
.script__srcline { font-size: 12.5px; color: var(--text-muted); margin-top: 14px; }
.script__answers { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.answer {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px;
  border: 1.5px solid var(--accent); border-radius: var(--radius-sm); background: #fff; color: var(--text);
  font-size: 16px; font-weight: 580; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.answer:hover { background: var(--accent-soft); }
.answer[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 3px 10px rgba(46,90,172,.3); }
.answer__key { font-size: 12px; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 4px; min-width: 21px; text-align: center; padding: 1px 0; }
.answer[aria-pressed="true"] .answer__key { color: #dce7f8; border-color: rgba(255,255,255,.45); }
.script__nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #e3e6ea; }
.script__nav .spacer { flex: 1; }
.script__sensitive { margin-top: 16px; }

/* quick access rail */
.qa { display: flex; flex-direction: column; gap: 5px; padding: 0 12px; }
.qa__item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); background: var(--cm-rail-2); color: var(--cm-text); font-size: 13.5px; text-align: left; }
.qa__item:hover { background: #3d4553; color: #eef0f3; }
.qa__key { margin-left: auto; font-size: 11px; color: var(--cm-text-faint); }
.qa__pinned { margin: 20px 12px 0; }
.qa__pinnedcard { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid var(--cm-line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.qa__pinnedcard:hover { border-color: #55606e; background: #2f353f; }
.qa__pinnedtitle { font-size: 13px; color: var(--cm-text); }
.qa__pinnedmeta { font-size: 11.5px; color: var(--cm-text-faint); margin-top: 2px; }

/* Carrier portals — a compact utility, NOT a card stack.
   `.qa__pinnedcard` is the approved objection treatment and stays exactly as
   it is; five bordered boxes of it ate most of the rail and pushed THIS STAGE
   below the fold, which is what the founder saw. A portal link is a name and a
   way out: one tight row each, the host in the tooltip rather than on screen,
   and the rail's proportions back. */
.qa__carriers { display: flex; flex-direction: column; gap: 1px; }
.qa__carrier {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; background: transparent; border: 0;
  border-radius: var(--radius-sm); padding: 4px 8px; min-height: 26px;
  font-size: 12.5px; color: var(--cm-text);
}
.qa__carrier:hover { background: #2f353f; }
.qa__carrier__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa__carrier__out { flex: none; font-size: 11px; color: var(--cm-text-faint); }

/* ---------- objection drawer ---------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(16, 19, 24, .34); animation: fade var(--dur) var(--ease); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw); z-index: 81;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: slideIn var(--dur) var(--ease);
}
@keyframes slideIn { from { transform: translateX(18px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.drawer__top { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.drawer__close { font-size: 13.5px; color: var(--text-muted); }
.drawer__esc { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }
.drawer__body { flex: 1; overflow-y: auto; padding: 18px 20px 24px; }
.drawer__label { font-size: 20px; font-weight: 640; letter-spacing: -.02em; }
.drawer__section { margin-top: 20px; }
.drawer__sectionlabel { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 650; margin-bottom: 6px; }
.drawer__verbatim { font-size: 15.5px; line-height: 1.55; }
.drawer__verbatim--primary { font-size: 17px; line-height: 1.55; }
.drawer__dns { color: var(--danger); font-size: 14px; line-height: 1.5; padding-left: 18px; }
.drawer__dns li { margin-bottom: 5px; }
.drawer__foot { border-top: 1px solid var(--border); padding: 14px 20px; }
.drawer__return { width: 100%; }
.drawer__returnnote { font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 7px; }
.drawer__list { display: flex; flex-direction: column; gap: 8px; }
.drawer__listitem { width: 100%; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.drawer__listitem:hover { border-color: var(--accent); background: var(--accent-soft); }

details.disclose { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0; margin-top: 8px; }
details.disclose summary { padding: 10px 13px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; }
details.disclose[open] summary { border-bottom: 1px solid var(--border); color: var(--text); }
details.disclose .disclose__body { padding: 12px 13px; font-size: 13.5px; line-height: 1.55; }

/* ---------- modal / confirmation ---------- */
.modal-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(16,19,24,.45); display: grid; place-items: center; padding: 24px; animation: fade var(--dur) var(--ease); }
.modal { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); width: min(620px, 100%); max-height: 88vh; overflow-y: auto; }
.modal--wide { width: min(860px, 100%); }
.modal__head { padding: 20px 24px 0; }
.modal__title { font-size: 19px; font-weight: 640; letter-spacing: -.02em; }
.modal__sub { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }
.modal__body { padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.modal__foot { padding: 0 24px 22px; display: flex; gap: 10px; justify-content: flex-end; }
.modal__effects { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; }
.modal__effects ul { margin: 6px 0 0; padding-left: 18px; }
.modal__effects li { margin-bottom: 3px; }

/* post-call: soft-dark shell + light focused card */
.postcall { position: fixed; inset: 0; z-index: 88; background: var(--cm-bg); display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.postcall__card { background: var(--cm-surface); color: var(--text); border-radius: 14px; box-shadow: var(--shadow-lg); width: min(700px, 100%); }
.postcall__head { padding: 22px 26px 0; text-align: center; }
.postcall__body { padding: 18px 26px 22px; display: flex; flex-direction: column; gap: 16px; }
.postcall__foot { padding: 0 26px 24px; display: flex; gap: 10px; }
.pillgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { min-height: 44px; padding: 6px 15px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; font-size: 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.pill span { font-size: 11px; color: var(--text-faint); }
.pill:hover { border-color: var(--accent); }
.pill[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pill[aria-pressed="true"] span { color: var(--accent); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { padding: 10px 15px; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------- metrics ---------- */
.metricrow { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.metricrow:first-child { border-top: none; }
.metricrow__label { color: var(--text-muted); }
.metricrow__val { margin-left: auto; font-weight: 620; font-variant-numeric: tabular-nums; }
.metricrow__note { font-size: 12px; color: var(--text-faint); }
.metricgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 16px; align-items: start; }
.blockhead { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 650; margin: 14px 0 6px; }
.blockhead--event { color: var(--accent); }
.blockhead--snapshot { color: var(--caution); }
.blockhead--actual { color: var(--text-muted); }
.estimatebox { border: 1px dashed var(--caution-line); border-radius: var(--radius-sm); padding: 12px 14px; background: #fffdf8; }

/* ---------- knowledge ---------- */
.excerpt { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); }
.excerpt--personal { border-style: dashed; }
.excerpt__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.excerpt__num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 620; color: #fff; background: var(--accent); flex: none; }
.excerpt__num--2 { background: var(--text-muted); }
.excerpt__num--3 { background: var(--text-faint); }
.excerpt__authority { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 650; color: var(--accent); }
.excerpt__authority--2 { color: var(--text-muted); }
.excerpt__authority--3 { color: var(--text-faint); }
.excerpt__scope { font-size: 12.5px; color: var(--text-muted); }
.excerpt__quote { border-left: 3px solid var(--border-strong); padding: 4px 0 4px 14px; margin: 12px 0; font-size: 15.5px; line-height: 1.55; }
.excerpt__prov { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--text-muted); align-items: center; }

/* ---------- toasts ---------- */
.toast-root { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: #1f2733; color: #eef1f6; border-radius: 999px; padding: 11px 20px; font-size: 13.5px;
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 12px; pointer-events: auto; max-width: 90vw;
  animation: toastIn var(--dur) var(--ease);
}
@keyframes toastIn { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }
.toast button { color: #9fc0ee; font-size: 13px; text-decoration: underline; }

/* ---------- misc ---------- */
.skel { background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 37%, #eef0f3 63%); background-size: 400% 100%; animation: shimmer 1.2s ease infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
.hint { font-size: 12.5px; color: var(--text-faint); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt8 { margin-top: 8px } .mt16 { margin-top: 16px } .mt24 { margin-top: 24px }

/* ---------- responsive ---------- */
@media (max-width: 1439px) {
  .cm__body { grid-template-columns: 224px minmax(0, 1fr) 250px; }
}
@media (max-width: 1279px) {
  .today-grid, .lw-grid { grid-template-columns: 1fr; }
  .cm__body { grid-template-columns: 200px minmax(0, 1fr) 228px; }
  .script { padding: 24px; }
}
@media (max-width: 1023px) {
  .cm__body { grid-template-columns: 1fr; }
  .cm__rail { display: none; }
  .domaingrid { grid-template-columns: 1fr; }
}

/* The cockpit top bar on a narrow screen. BELOW THE APPROVED LAYOUT'S OWN
   BREAKPOINT, so nothing at a desktop width changes by a pixel — the rails are
   already hidden here and the Companion is no longer the approved three-column
   cockpit. Left alone, the bar is a nowrap row of brand + script chip + lead
   pill + privacy + language + timer + End Call, and at 375px those simply drew
   on top of each other. A live call is not run from a phone, but a bar whose
   controls overlap is not something to ship at any width. It wraps instead, and
   the script chip gives up its width first because it is the one element whose
   full text is also on the card below it. */
@media (max-width: 767px) {
  .cm__top { flex-wrap: wrap; row-gap: 6px; height: auto; padding-top: 8px; padding-bottom: 8px; }
  .cm__script { min-width: 0; max-width: 100%; }
  .cm__script > :not(.cm__scriptlabel) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cm__brand .wordmark { font-size: 11px; }
}

/* ---------- dark mode (complete alternative, not an inversion) ---------- */
:root[data-theme="dark"] {
  --bg: #101317;
  --surface: #181c22;
  --surface-sunken: #1f242b;
  --border: #282e36;
  --border-strong: #39414c;
  --text: #e9ebee;
  --text-muted: #a2a9b4;
  /* CONTRAST, 2026-08-04. Was #7a828d, measuring 4.40:1 on --surface and
     4.02:1 on --surface-sunken — under 4.5:1 for the hints, card meta,
     timeline meta and rail labels this token carries. Now 6.01:1 / 5.48:1. */
  --text-faint: #919aa6;
  --accent: #86aae2;
  --accent-hover: #9dbcec;
  --accent-soft: #1c2a3d;
  --notice-ink: #86aae2;
  --positive: #7cc094;
  --positive-soft: #1d2c24;
  --caution: #e0b567;
  --caution-soft: #302719;
  --caution-line: #5d4a25;
  --danger: #e08e85;
  --danger-soft: #33211f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.6);
}
:root[data-theme="dark"] .hero { box-shadow: 0 6px 18px rgba(0,0,0,.5); background: #2c4f8c; }
:root[data-theme="dark"] .hero:hover { background: #345c9f; }
:root[data-theme="dark"] .btn--primary { color: #0f1319; }
:root[data-theme="dark"] .proto-banner { background: #10141a; }
:root[data-theme="dark"] .estimatebox { background: #241f16; }
:root[data-theme="dark"] .toast { background: #2b313a; }
:root[data-theme="dark"] .skel { background: linear-gradient(90deg,#232830 25%,#2b313a 37%,#232830 63%); background-size:400% 100%; }

/* ---------- app shell with left sidebar ---------- */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 18px 14px 22px; display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 2px; }
.sb-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
:root[data-theme="dark"] .sb-mark { color: #0f1319; }
.sb-name { font-weight: 650; font-size: 15.5px; letter-spacing: -.015em; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-link {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 9px; font-size: 14.5px; color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sb-link:hover { background: var(--surface-sunken); color: var(--text); }
.sb-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sb-ico { width: 19px; text-align: center; flex: none; opacity: .85; }
.sb-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 2px 30px; }
.sb-sub button { text-align: left; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; color: var(--text-muted); }
.sb-sub button:hover { background: var(--surface-sunken); color: var(--text); }
.sb-focus { margin-top: auto; background: var(--surface-sunken); border-radius: 11px; padding: 14px; }
.sb-focus h3 { font-size: 13.5px; font-weight: 620; }
.sb-focus .hint { margin-bottom: 9px; }
.sb-task { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 5px 0; font-size: 13.5px; color: var(--text-muted); }
.sb-task .box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--border-strong); flex: none; display: grid; place-items: center; font-size: 10px; }
.sb-task.is-done { color: var(--text-faint); text-decoration: line-through; }
.sb-task.is-done .box { background: var(--positive); border-color: var(--positive); color: #fff; }
.sb-meter { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin: 8px 0 4px; }
.sb-meter span { display: block; height: 100%; background: var(--accent); }

.topbar { position: sticky; top: 0; z-index: 45; background: var(--bg); border-bottom: 1px solid var(--border); }
.topbar__inner { display: flex; align-items: center; gap: 16px; padding: 14px 26px; }
.topbar__title { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.topbar__sub { font-size: 13.5px; color: var(--text-muted); margin-top: 1px; }
.topbar__spacer { flex: 1; }
.searchbox { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 13px; min-width: 260px; color: var(--text-faint); font-size: 13.5px; }
.themeswitch {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 9px;
}
.themeswitch__track { width: 40px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background var(--dur) var(--ease); }
.themeswitch__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); }
:root[data-theme="dark"] .themeswitch__track { background: var(--accent); }
:root[data-theme="dark"] .themeswitch__knob { transform: translateX(18px); background: #0f1319; }
.themeswitch__ico { font-size: 13px; opacity: .8; }

/* ---------- capsule quick-launch buttons ---------- */
.capsules { display: flex; flex-wrap: wrap; gap: 10px; }
.capsule {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  font-size: 14px; font-weight: 550; color: var(--text); text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.capsule:hover { border-color: var(--accent); background: var(--accent-soft); }
.capsule__ico { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 13px; flex: none; }
.capsule__meta { display: block; font-size: 11.5px; color: var(--text-faint); font-weight: 400; }
.capsule__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.capsule__dot--ok { background: var(--positive); }
.capsule__dot--warn { background: var(--caution); }
.capsule__dot--bad { background: var(--danger); }

/* ---------- licensed states map ---------- */
.mapgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; max-width: 560px; }
.mapcell {
  aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
  background: var(--surface-sunken); color: var(--text-faint); border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mapcell:hover { transform: scale(1.14); border-color: var(--text-muted); z-index: 2; }
.mapcell.is-active { background: var(--accent); color: #fff; }
.mapcell.is-pending { background: var(--caution); color: #3a2c0d; }
.mapcell.is-expiring { background: var(--danger); color: #fff; }
.mapcell.is-resident { box-shadow: 0 0 0 2px var(--text); }
:root[data-theme="dark"] .mapcell.is-active { color: #0f1319; }
:root[data-theme="dark"] .mapcell.is-expiring { color: #0f1319; }
.maplegend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-muted); margin-top: 14px; }
.maplegend span { display: inline-flex; align-items: center; gap: 6px; }
.maplegend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* =============================================================================
   PREMIUM POLISH PASS
   Warm document paper + authoritative navy. Numbers are the product, so every
   figure uses tabular lining numerals. Hierarchy comes from weight and rhythm,
   not from borders and tint.
   ============================================================================= */
.tnum, .stat__val, .metricrow__val, .launcher__statval, .prep__num, .cm__timerval,
.board__colcount, .rowlist__time, table.data td, .domain__val { font-variant-numeric: tabular-nums lining-nums; }

.eyebrow {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 650; color: var(--text-faint);
}
.eyebrow--onaccent { color: rgba(255,255,255,.66); }

/* type scale */
.topbar__title { font-size: 23px; font-weight: 660; letter-spacing: -.025em; }
.page-title { font-size: 26px; font-weight: 660; letter-spacing: -.028em; }
.card__title { font-size: 10.5px; letter-spacing: .13em; font-weight: 650; }
.stat__val { font-size: 28px; font-weight: 660; letter-spacing: -.03em; }

/* cards: more generous, better proportions, quieter borders */
.card { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card__head { padding: 18px 20px 0; }
.card__body { padding: 14px 20px 20px; }
.page { padding: 28px 32px 80px; }
.topbar__inner { padding: 18px 32px; }

/* the launcher — signature element */
.launcher {
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px;
  background: linear-gradient(135deg, #1d4e89 0%, #17406f 100%);
  color: #fff; border-radius: 16px; padding: 30px 32px; margin-bottom: 22px;
  box-shadow: 0 14px 34px rgba(29,78,137,.24);
}
:root[data-theme="dark"] .launcher { background: linear-gradient(135deg,#1b3a5e 0%,#16304d 100%); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.launcher__title { font-size: 25px; font-weight: 660; letter-spacing: -.028em; margin-top: 8px; }
.launcher__sub { color: rgba(255,255,255,.74); font-size: 14.5px; margin-top: 8px; max-width: 54ch; line-height: 1.55; }
.launcher__actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.btn--lg { min-height: 50px; padding: 0 22px; font-size: 15px; }
.btn--onaccent { background: #fff; border-color: #fff; color: #143f70; font-weight: 620; }
.btn--onaccent:hover { background: #eef3fa; border-color: #eef3fa; }
.btn--onaccent-ghost { background: transparent; border-color: rgba(255,255,255,.34); color: #fff; }
.btn--onaccent-ghost:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.5); }
.launcher__side { display: flex; flex-direction: column; gap: 16px; border-left: 1px solid rgba(255,255,255,.16); padding-left: 26px; }
.launcher__stat { display: flex; align-items: baseline; gap: 9px; }
.launcher__statval { font-size: 27px; font-weight: 660; letter-spacing: -.03em; }
.launcher__statlabel { font-size: 13px; color: rgba(255,255,255,.7); }
.launcher__script { margin-top: 2px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.launcher__scriptname { font-size: 15px; font-weight: 600; margin-top: 5px; }
.launcher__scriptmeta { font-size: 12px; color: rgba(255,255,255,.62); margin-top: 3px; }

/* call prep */
.prep { max-width: 900px; }
.prep__lead {
  display: flex; align-items: flex-start; gap: 24px; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.prep__name { font-size: 26px; font-weight: 660; letter-spacing: -.028em; margin-top: 6px; }
.prep__meta { font-size: 13.5px; color: var(--text-muted); margin-top: 5px; }
.prep__phone { text-align: right; flex: none; }
.prep__num { font-size: 20px; font-weight: 620; margin: 6px 0 10px; letter-spacing: -.01em; }
.scriptlist { display: grid; gap: 10px; margin-top: 10px; }
.scriptcard {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.scriptcard:hover:not(.is-locked) { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.scriptcard.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); background: var(--accent-soft); }
.scriptcard.is-locked { opacity: .58; cursor: not-allowed; background: var(--surface-sunken); }
.scriptcard__top { display: flex; align-items: center; gap: 10px; width: 100%; }
.scriptcard__name { font-size: 16px; font-weight: 620; letter-spacing: -.012em; }
.scriptcard__check { margin-left: auto; color: var(--accent); font-weight: 700; }
.scriptcard__use { font-size: 13.5px; color: var(--text-muted); }
.scriptcard__prov { font-size: 12px; color: var(--text-faint); }
.prep__foot { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.prep__summary { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.prep__summaryname { font-size: 15.5px; font-weight: 620; }

/* call mode script identity */
.cm__script { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--cm-text); background: #313845; border: 1px solid #3f4855; border-radius: 999px; padding: 5px 6px 5px 12px; }
.cm__scriptlabel { font-size: 9.5px; letter-spacing: .13em; color: var(--cm-text-faint); font-weight: 650; }
.cm__scriptswap { font-size: 11.5px; color: var(--cm-accent); border: 1px solid #46516100; background: #3b4453; border-radius: 999px; padding: 3px 10px; }
.cm__scriptswap:hover { background: #465163; }
.cm__scriptmeta { padding: 0 18px 14px; font-size: 12px; color: var(--cm-text-faint); border-bottom: 1px solid var(--cm-line); margin-bottom: 12px; }
.cm__scriptmeta div:first-child { color: var(--cm-text); font-weight: 550; margin-bottom: 2px; }
.cm__scriptsrc { line-height: 1.4; }

/* table refinement */
table.data th { font-size: 10.5px; letter-spacing: .12em; padding-bottom: 11px; }
table.data td { padding: 13px 12px; }
.rowlist__row { padding: 12px 0; }

/* map refinement */
.mapcell { border-radius: 5px; font-size: 10px; font-weight: 650; }
.mapgrid { gap: 3px; }

/* ---------- deterministic branch nodes + source blocks ---------- */
.journey__item--branch { padding-left: 34px; }
.journey__item--branch .journey__mark { border-radius: 3px; }
.cm__coverage { margin-top: 6px; color: var(--cm-accent); font-size: 11.5px; }
.cm__coverage--partial { color: #e0b567; }
.cm__progresslead { color: var(--cm-text); font-size: 12.5px; font-weight: 550; }
.cm__progressnote { margin-top: 7px; font-size: 11.5px; color: var(--cm-text-faint); line-height: 1.45; }

.script--branch { border-left: 4px solid var(--accent); }
.script--end { border-left: 4px solid var(--positive); }
.script__optlabel { display: flex; align-items: baseline; gap: 10px; margin-top: 24px; }
.answer { align-items: flex-start; padding: 14px 20px; min-height: 60px; text-align: left; }
.answer__dest { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); margin-top: 3px; }
.answer.is-picked { background: var(--accent); border-color: var(--accent); color: #fff; }
.answer.is-picked .answer__dest { color: rgba(255,255,255,.8); }
.answer.is-picked .answer__key { color: #dce7f8; border-color: rgba(255,255,255,.45); }

.srcblock { margin-top: 20px; padding: 14px 16px; background: #eef0f3; border-radius: 9px; }
:root[data-theme="dark"] .srcblock { background: #e7e9ec; }
.srcblock__list { margin: 8px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--text); }
.srcblock__list li { margin-bottom: 6px; }
.srcblock__close { margin-top: 8px; font-size: 15px; line-height: 1.55; }
.qa__none { border: 1px dashed var(--cm-line); border-radius: 8px; padding: 12px; font-size: 12.5px; color: var(--cm-text-faint); }
.qa__none .btn { background: #353b45; border-color: #454e5c; color: var(--cm-text); }
.drawer__body .input { background: var(--surface); }

/* ---------- Today: 12-column dashboard grid ---------- */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash__c--3 { grid-column: span 3; } .dash__c--4 { grid-column: span 4; }
.dash__c--5 { grid-column: span 5; } .dash__c--8 { grid-column: span 8; }
.dash__c--12 { grid-column: span 12; }
.dash .launcher { margin-bottom: 0; padding: 26px 28px; }
.dash .launcher__title { font-size: 22px; }
.dash .launcher__sub { font-size: 14px; margin-top: 6px; }
.dash .launcher__actions { margin-top: 16px; }
.dash .launcher__side { padding-left: 22px; gap: 12px; }
.dash .card__body { padding: 12px 18px 16px; }

.kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.kpi__v { font-size: 26px; font-weight: 660; letter-spacing: -.03em; line-height: 1.1; }
.kpi__l { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.bignum { font-size: 40px; font-weight: 660; letter-spacing: -.035em; line-height: 1; }
.leadchips { display: flex; flex-direction: column; gap: 6px; }
.leadchip {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  padding: 8px 11px; border-radius: 8px; background: var(--surface-sunken); font-size: 13.5px; text-align: left;
}
.leadchip:hover { background: var(--accent-soft); color: var(--accent); }
.capsule--more { border-style: dashed; color: var(--text-muted); }
.dash .mapgrid { max-width: 100%; gap: 3px; }
.dash .mapcell { font-size: 9.5px; }
.dash .rowlist__row { padding: 9px 0; }

@media (max-width: 1279px) {
  .dash__c--8 { grid-column: span 12; }
  .dash__c--5 { grid-column: span 6; }
  .dash__c--4 { grid-column: span 6; }
  .dash__c--3 { grid-column: span 6; }
}

/* ---------- call prep: direction-aware chooser ---------- */
.recbar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 11px; background: var(--accent-soft); margin-top: 14px; }
.recbar--warn { background: var(--caution-soft); }
.recbar__title { font-size: 15px; font-weight: 620; color: var(--text); }
.recbar__sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.recbar--warn .recbar__title { color: var(--caution); }
.scriptgroup { margin-top: 22px; }
.scriptcard.is-offdirection { background: var(--surface-sunken); }
.scriptcard.is-offdirection .scriptcard__name { color: var(--text-muted); }

/* ---------- training hub ---------- */
.trainhero { background: linear-gradient(135deg,#1d4e89 0%,#17406f 100%); color:#fff; border-radius:16px; padding:28px 30px; box-shadow:0 14px 34px rgba(29,78,137,.22); }
:root[data-theme="dark"] .trainhero { background: linear-gradient(135deg,#1b3a5e 0%,#16304d 100%); box-shadow:0 14px 34px rgba(0,0,0,.45); }
.trainhero__title { font-size: 24px; font-weight: 660; letter-spacing:-.028em; margin-top:8px; }
.trainhero__sub { color: rgba(255,255,255,.74); font-size:14px; margin-top:8px; max-width:56ch; }
.catrail { display:flex; flex-wrap:wrap; gap:8px; }
.catchip { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:13.5px; color:var(--text); }
.catchip:hover { border-color: var(--accent); }
.catchip.is-on { background: var(--accent); border-color: var(--accent); color:#fff; font-weight:600; }
:root[data-theme="dark"] .catchip.is-on { color:#0f1319; }
.catchip.is-empty { color: var(--text-faint); border-style: dashed; }
.catchip__n { font-size:12px; opacity:.75; }
.reslist { display:flex; flex-direction:column; gap:8px; }
.resrow { display:flex; align-items:center; gap:16px; width:100%; text-align:left; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:11px; transition:border-color var(--dur) var(--ease); }
.resrow:hover { border-color: var(--accent); }
.resrow.is-missing { background: var(--surface-sunken); }
.resrow.is-missing .resrow__title { color: var(--text-muted); }
.resrow__main { flex:1; min-width:0; }
.resrow__top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.resrow__title { font-size:15.5px; font-weight:620; letter-spacing:-.012em; }
.resrow__meta { display:block; font-size:12.5px; color:var(--text-muted); margin-top:4px; }
.resrow__go { font-size:13px; color:var(--accent); white-space:nowrap; }
.resrow.is-missing .resrow__go { color: var(--text-faint); }
.resbody { font-size:16px; line-height:1.6; max-width:68ch; margin-top:6px; }
.sb-sub button.is-on { color: var(--accent); font-weight:600; background: var(--accent-soft); }