/* ═══════════════════════════════════════════════════════════════════
   Design system
   ───────────────────────────────────────────────────────────────────
   Two type families, not three. Barlow Condensed was doing decorative
   work in labels and headings and fighting the body text; IBM Plex Sans
   with tighter tracking does the same job and reads as one voice.
   Plex Mono stays, but only where digits must align.

   Every colour is a token. --accent is overwritten at runtime from
   tenants.brand_accent, so the customer's brand leads and MELV endorses
   — which is the brand rule, expressed in CSS rather than in a doc.

   Dark mode is not a nicety here. This is an all-day operations tool.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* brand — overwritten per tenant at runtime */
  --accent:        #1F4E5F;
  --accent-hover:  #163B48;
  --accent-soft:   rgba(31, 78, 95, .10);
  --accent-ring:   rgba(31, 78, 95, .28);
  --on-accent:     #FFFFFF;

  /* surfaces */
  --bg:            #F7F8F8;
  --surface:       #FFFFFF;
  --surface-2:     #FBFCFC;
  --surface-sunk:  #F1F3F3;

  /* ink */
  --ink:           #14181A;
  --ink-2:         #566266;
  --ink-3:         #8A9599;

  /* lines */
  --line:          #E3E7E8;
  --line-2:        #EFF2F2;

  /* status */
  --red:    #C0392B;  --red-soft:    #FBEDEB;
  --amber:  #A9741A;  --amber-soft:  #FBF3E4;
  --green:  #2F7A57;  --green-soft:  #E8F3ED;
  --slate:  #64757C;  --slate-soft:  #EDF0F1;

  /* elevation — soft and low, never a drop shadow costume */
  --sh-1: 0 1px 2px rgba(16,24,28,.05);
  --sh-2: 0 1px 3px rgba(16,24,28,.06), 0 6px 16px -6px rgba(16,24,28,.10);
  --sh-3: 0 12px 40px -12px rgba(16,24,28,.28);

  /* geometry */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;

  /* motion — feedback only. Anything slower reads as lag. */
  --t-fast: 110ms cubic-bezier(.2,0,.2,1);
  --t:      180ms cubic-bezier(.2,0,.2,1);

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0E1113;
    --surface:      #161A1D;
    --surface-2:    #1B2023;
    --surface-sunk: #101315;
    --ink:          #E9EDEE;
    --ink-2:        #9BA7AC;
    --ink-3:        #6C797E;
    --line:         #262D31;
    --line-2:       #1F2528;
    --accent-soft:  rgba(255,255,255,.06);
    --red-soft:     rgba(192,57,43,.14);
    --amber-soft:   rgba(169,116,26,.16);
    --green-soft:   rgba(47,122,87,.16);
    --slate-soft:   rgba(100,117,124,.16);
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 1px 3px rgba(0,0,0,.45), 0 8px 24px -10px rgba(0,0,0,.6);
    --sh-3: 0 16px 48px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --bg:#0E1113; --surface:#161A1D; --surface-2:#1B2023; --surface-sunk:#101315;
  --ink:#E9EDEE; --ink-2:#9BA7AC; --ink-3:#6C797E; --line:#262D31; --line-2:#1F2528;
  --accent-soft:rgba(255,255,255,.06);
  --red-soft:rgba(192,57,43,.14); --amber-soft:rgba(169,116,26,.16);
  --green-soft:rgba(47,122,87,.16); --slate-soft:rgba(100,117,124,.16);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 3px rgba(0,0,0,.45), 0 8px 24px -10px rgba(0,0,0,.6);
  --sh-3:0 16px 48px -12px rgba(0,0,0,.7);
}

* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
}
[hidden] { display: none !important }
code { font-family: var(--mono); font-size: .9em; background: var(--accent-soft);
  padding: 1px 5px; border-radius: 4px }
::selection { background: var(--accent-ring); color: var(--ink) }

/* Focus is visible and consistent, never removed. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}

/* Small-caps label. Replaces every Barlow Condensed use. */
.lab, .eyebrow, .col-head b, .fld > span, .ms small, .ti small, .fact small,
thead th, .tag, .btn, .mini, .bar b {
  font-family: var(--sans);
  letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; font-size: 11px;
}

/* ── sign in ─────────────────────────────────────────────────────── */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 24px; background:
    radial-gradient(1000px 560px at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg); }
.gate-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px; width: min(400px, 100%);
  box-shadow: var(--sh-3); display: flex; flex-direction: column; gap: 14px;
  animation: rise var(--t) both }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } }
.gate-brand { margin-bottom: 4px }
.gate-brand b { color: var(--ink) }
.gate-title { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin: 0 }
.gate-lede { margin: -6px 0 2px; font-size: 13px; color: var(--ink-2); line-height: 1.6 }
.gate-rule, .gate-note { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.6 }
.fld { display: flex; flex-direction: column; gap: 6px }
.fld > span { color: var(--ink-2) }
.fld input, .fld select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px; width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast) }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring) }
.fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px }
.gate-msg { margin: 0; font-size: 13px; border-radius: var(--r-sm); padding: 10px 12px; line-height: 1.55 }
.gate-msg.bad  { color: var(--red);   background: var(--red-soft) }
.gate-msg.good { color: var(--green); background: var(--green-soft) }
.linkbtn { background: none; border: 0; color: var(--ink-3); font: inherit; font-size: 12px;
  text-decoration: underline; cursor: pointer; padding: 4px; align-self: center }
.linkbtn:hover { color: var(--ink-2) }
.gate-card button:disabled { opacity: .55; cursor: progress }

/* ── top rail ────────────────────────────────────────────────────── */
.rail { position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 20px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line) }
.brand { display: flex; align-items: baseline; gap: 9px }
.brand b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; color: var(--ink) }
.brand span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3) }
.branch-select { font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer; transition: border-color var(--t-fast) }
.branch-select:hover { border-color: var(--ink-3) }
.rail-right { margin-left: auto; display: flex; align-items: center; gap: 14px }
.sync { display: flex; align-items: center; gap: 9px }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none;
  box-shadow: 0 0 0 3px var(--green-soft) }
.dot.warn { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft) }
.dot.bad  { background: var(--red);   box-shadow: 0 0 0 3px var(--red-soft) }
.sync small { display: block; color: var(--ink-3); font-size: 11px }
.sync strong { font-size: 12.5px; font-weight: 550 }
.who-rail { display: flex; align-items: center; gap: 9px; padding-left: 14px;
  border-left: 1px solid var(--line) }
.who-rail .av { width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  font-size: 11.5px; font-weight: 650; letter-spacing: .02em }
.who-rail small { display: block; color: var(--ink-3); font-size: 10.5px }
.who-rail strong { font-size: 12.5px; font-weight: 550 }

/* ── tabs ────────────────────────────────────────────────────────── */
.tabs { position: sticky; top: 60px; z-index: 40; display: flex; gap: 2px;
  padding: 0 14px; overflow-x: auto; scrollbar-width: none;
  background: var(--surface); border-bottom: 1px solid var(--line) }
.tabs::-webkit-scrollbar { display: none }
.tab { position: relative; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 550; letter-spacing: -.005em;
  color: var(--ink-3); padding: 14px 12px; white-space: nowrap;
  transition: color var(--t-fast) }
.tab:hover { color: var(--ink-2) }
.tab.on { color: var(--ink) }
.tab.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0 }
.tab .cnt { font-family: var(--mono); font-size: 10px; background: var(--red);
  color: #fff; border-radius: 9px; padding: 1px 6px; margin-left: 7px; vertical-align: 1px }

main { max-width: 1500px; margin: 0 auto; padding: 26px 20px 72px }
.view { display: none }
.view.on { display: block; animation: fade var(--t) both }
@keyframes fade { from { opacity: 0; transform: translateY(4px) } }
.mb { margin-bottom: 18px } .mb-s { margin-bottom: 10px }

.head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 18px; flex-wrap: wrap }
.eyebrow { color: var(--accent); margin: 0 0 4px }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; font-weight: 600 }
h1 { font-size: 26px } h2 { font-size: 19px } h3 { font-size: 15px; letter-spacing: -.01em }
.sub { color: var(--ink-2); font-size: 13px; margin: 5px 0 0; max-width: 72ch; line-height: 1.6 }
.hint { color: var(--ink-3); font-size: 12px; line-height: 1.6 }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2) }
.chk input { accent-color: var(--accent) }

select, input[type=search] { font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 11px; min-width: 150px; transition: border-color var(--t-fast), box-shadow var(--t-fast) }
input[type=search] { min-width: 250px }
select:hover, input[type=search]:hover { border-color: var(--ink-3) }
select:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring) }

.btn { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 14px; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) }
.btn:hover:not(:disabled) { border-color: var(--ink-3); background: var(--surface-2) }
.btn:active:not(:disabled) { transform: translateY(1px) }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover) }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink-2) }
.btn.ghost:hover { color: var(--ink); border-color: var(--ink-3) }
.btn.wide { width: 100%; padding: 12px }
.btn:disabled { opacity: .45; cursor: not-allowed }

.panel { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden }
.panel-head { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 15px 18px; border-bottom: 1px solid var(--line-2) }
.panel-body { padding: 18px } .panel-body.flush { padding: 0 }
/*
 * The market ranking is the WHOLE pull — ~1,880 agents, 858 of them not in the
 * book — not a top-twelve. A truncated discovery list answers "who is biggest"
 * when the question is "who should we call", so the panel scrolls instead.
 *
 * Capped by viewport height rather than a fixed pixel value so a laptop and a
 * large monitor both fill their space, with a floor so it never collapses to a
 * few rows on a short window.
 */
.intel-scroll { max-height: clamp(320px, 62vh, 900px); overflow-y: auto; overscroll-behavior: contain }
.grid { display: grid; gap: 18px; margin-bottom: 18px }
.g-2 { grid-template-columns: 1fr 1fr }
.g-queue { grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr) }

/* ── three-state values ──────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) }
.metric { position: relative; padding: 17px 18px 17px 22px; border-right: 1px solid var(--line-2) }
.metric:last-child { border-right: 0 }
.metric::before { content: ""; position: absolute; left: 0; top: 17px; bottom: 17px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--slate) }
.metric.red::before { background: var(--red) } .metric.amber::before { background: var(--amber) }
.metric.green::before { background: var(--green) } .metric.blue::before { background: var(--accent) }
.metric .lab { display: block; color: var(--ink-2) }
.metric .val { display: block; font-family: var(--mono); font-size: 27px; font-weight: 500;
  line-height: 1.15; margin: 6px 0 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.metric .note { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.45 }
.val.st-loading { font-size: 17px; color: var(--ink-3) }
.val.st-unavailable { font-size: 13px; line-height: 1.4; margin-top: 8px; color: var(--amber) }
.val.st-empty { color: var(--ink-3) }
.skel { display: inline-block; height: 22px; width: 52px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--line-2), var(--surface-sunk), var(--line-2));
  background-size: 200% 100%; animation: sh 1.3s infinite }
@keyframes sh { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.flag { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px;
  padding: 14px 16px; border-radius: var(--r); background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  border-left: 3px solid var(--amber) }
.flag .ic { font-family: var(--mono); font-size: 15px; color: var(--amber); line-height: 1.3 }
.flag b { display: block; font-size: 13px; margin-bottom: 4px }
.flag p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6 }
.note-bar { margin-bottom: 18px; padding: 13px 16px; border-radius: var(--r);
  background: var(--accent-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6 }
.note-bar b { color: var(--ink) }

/* ── queues ──────────────────────────────────────────────────────── */
.queues { display: grid; grid-template-columns: repeat(auto-fit, minmax(246px, 1fr)); gap: 12px }
.q { display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) }
.q:hover { border-color: var(--ink-3); box-shadow: var(--sh-2); transform: translateY(-1px) }
.q.pilot { border-color: var(--accent); background: var(--accent-soft) }
.q b { display: block; font-size: 13px; font-weight: 600 }
.q small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5 }
.q-foot { display: flex; align-items: center; gap: 8px; margin-top: auto }
.q-n { margin-right: auto; font-family: var(--mono); font-size: 18px; font-weight: 500;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.q-n.dim { color: var(--ink-3); font-size: 13px }
.mini { font-family: var(--sans); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 600; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 11px; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast) }
.mini:hover:not(:disabled) { border-color: var(--ink-3); background: var(--surface-2) }
.mini.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.mini.go:hover:not(:disabled) { background: var(--accent-hover) }
.mini:disabled { opacity: .4; cursor: not-allowed }

/* ── tables ──────────────────────────────────────────────────────── */
.tw { overflow-x: auto; max-height: 620px; overflow-y: auto }
table { width: 100%; border-collapse: collapse; font-size: 13px }
thead th { position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  color: var(--ink-3); padding: 11px 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
thead th.r { text-align: right }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top }
tbody td.r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums }
tbody tr.clickable { cursor: pointer; transition: background var(--t-fast) }
tbody tr.clickable:hover { background: var(--surface-2) }
tbody tr.sel { background: var(--accent-soft) }
tbody tr:last-child td { border-bottom: 0 }
.rowrail { width: 3px; padding: 0 !important; border-bottom: 1px solid var(--line-2) }
.rowrail div { width: 3px; height: 100%; min-height: 40px }
.nm { font-weight: 600; font-size: 13.5px; letter-spacing: -.005em }
.mt { color: var(--ink-3); font-size: 11.5px; margin-top: 2px }
.days { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums }
.days small { display: block; color: var(--ink-3); font-size: 10.5px; font-family: var(--sans) }
.tag { display: inline-block; padding: 3px 8px; border-radius: 999px; white-space: nowrap; font-size: 10px }
.tag.Urgent   { background: var(--red-soft);   color: var(--red) }
.tag.High     { background: var(--amber-soft); color: var(--amber) }
.tag.Standard { background: var(--slate-soft); color: var(--slate) }
.tag.Monitor  { background: var(--green-soft); color: var(--green) }
.lock, .warnpill { font-family: var(--mono); font-size: 10px; border-radius: 999px;
  padding: 2px 7px; margin-left: 6px; white-space: nowrap }
.lock { color: var(--accent); background: var(--accent-soft) }
.warnpill { color: var(--amber); background: var(--amber-soft) }
.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); font-size: 13px; line-height: 1.7 }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2) }
.pager button { margin-left: 6px }

/* ── copilot ─────────────────────────────────────────────────────── */
.copilot { position: sticky; top: 128px; align-self: start;
  max-height: calc(100vh - 150px); overflow-y: auto }
.copilot h4 { margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--accent) }
.copilot h4:first-child { margin-top: 0 }
.copilot p { margin: 0 0 9px; font-size: 13px; line-height: 1.65 }
.copilot ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7 }
.script { padding: 13px 15px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  font-size: 13px; line-height: 1.7 }
.who { padding-bottom: 14px; border-bottom: 1px solid var(--line-2) }
.who b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em }
.who span { font-size: 12.5px; color: var(--ink-2) }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px }
.fact { padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-sunk) }
.fact small { display: block; color: var(--ink-3); font-size: 10px }
.fact b { font-family: var(--mono); font-size: 12.5px; font-weight: 500 }
.outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px }
.outcome { text-align: left; font: inherit; font-size: 12.5px; line-height: 1.35; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 11px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast) }
.outcome:hover { border-color: var(--accent); background: var(--accent-soft) }
.outcome b { display: block; font-size: 12.5px; font-weight: 600 }
.outcome small { color: var(--ink-3); font-size: 10.5px }

/* ── money ───────────────────────────────────────────────────────── */
/*
 * Money gets typography, not a colour.
 *
 * Mono with tabular figures everywhere a dollar amount appears, so a column
 * of them lines up digit-for-digit and a bigger number is visibly wider in
 * proportion to its size rather than to how many wide glyphs it happens to
 * contain. That is what makes a board scannable.
 *
 * Colour is deliberately NOT used to mean "this is money". Green already
 * means healthy in this interface — it is the accent on "On site", the
 * Monitor tag, the conversation bars. If every dollar figure were green, a
 * $40k job forty days overdue would render exactly like $40k collected, and
 * the one colour that currently carries meaning would stop carrying any.
 *
 * So green is reserved for money actually in the bank. Everything else keeps
 * the text colour and lets the row's own state — late, unbilled, pending —
 * do the signalling. The payoff is that green on this screen comes to mean
 * one specific thing: collected.
 */
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.money.collected { color: var(--green) }
.money.at-risk   { color: var(--red) }
.money.due-soon  { color: var(--amber) }
.money.muted     { color: var(--ink-3) }

/* ── revenue ─────────────────────────────────────────────────────── */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden }
.seg button { font: inherit; font-size: 12.5px; color: var(--ink-2); background: var(--surface);
  border: 0; padding: 7px 13px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast) }
.seg button + button { border-left: 1px solid var(--line) }
.seg button:hover { background: var(--surface-sunk) }
.seg button.on { background: var(--accent); color: var(--on-accent) }

.revhead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 30px; margin-bottom: 24px }
.revbig .lab { display: block; color: var(--ink-2); font-size: 12px; margin-bottom: 3px }
.revbig .fig { display: block; font-family: var(--mono); font-size: 38px; font-weight: 500;
  line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.revbig .fig.collected { color: var(--green) }
.revbig .note { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.45 }
/* A floor is not a total. Marked on the figure itself, not in a footnote
   nobody reads, because the difference between the two is the whole point. */
.revbig .floor { display: inline-block; margin-left: 7px; font-size: 10.5px; font-family: var(--sans);
  letter-spacing: .04em; text-transform: uppercase; color: var(--amber);
  background: var(--amber-soft); border-radius: 999px; padding: 3px 8px; vertical-align: middle }
.revside { display: flex; gap: 26px; margin-left: auto }
.revside .lab { display: block; color: var(--ink-3); font-size: 11px; margin-bottom: 3px }
.revside .fig { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500;
  font-variant-numeric: tabular-nums }

.chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 7px;
  align-items: end; margin-bottom: 4px }
.cbar { display: grid; grid-template-rows: auto 152px auto; gap: 7px; min-width: 0 }
.cval { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); text-align: center;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cval.zero { color: var(--ink-3) }
.ctrack { display: flex; align-items: flex-end; border-bottom: 1px solid var(--line) }
.cfill { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent);
  transition: height .55s cubic-bezier(.2,0,.2,1) }
.cfill.collected { background: var(--green) }
/* A month with no money is a fact, not a gap: it renders as a visible empty
   slot rather than disappearing, so twelve months always read as twelve. */
.cfill.none { background: var(--line); min-height: 2px }
.clab { font-size: 11px; color: var(--ink-3); text-align: center }
.clab.now { color: var(--accent); font-weight: 600 }

@media (max-width: 720px) {
  .chart { grid-auto-flow: row; grid-auto-columns: auto; gap: 4px }
  .cbar { grid-template-rows: none; grid-template-columns: 38px 1fr 74px; align-items: center; gap: 10px }
  .cval { text-align: right; order: 3 }
  .ctrack { align-items: stretch; height: 16px; border-bottom: 0 }
  .cfill { width: auto; height: 100%; border-radius: 0 4px 4px 0 }
  .clab { text-align: left }
  .revside { margin-left: 0 }
}

/* ── bars ────────────────────────────────────────────────────────── */
.bar { display: grid; grid-template-columns: 54px 1fr 88px; align-items: center; gap: 12px; margin-bottom: 10px }
.bar b { color: var(--ink-2) }
.bstack { display: flex; flex-direction: column; gap: 4px }
.btrack { height: 8px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden }
.bfill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .6s cubic-bezier(.2,0,.2,1) }
.bfill.conv { background: var(--green) }
.bnum { text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums }
.legend { display: flex; gap: 16px; margin-top: 14px; font-size: 11.5px; color: var(--ink-2) }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px }

.stage { display: grid; grid-template-columns: 190px 1fr 116px; align-items: center; gap: 14px; margin-bottom: 9px }
.stage span { font-size: 12.5px; color: var(--ink-2) }
.strack { height: 24px; border-radius: var(--r-sm); background: var(--surface-sunk); overflow: hidden }
.sfill { height: 100%; border-radius: var(--r-sm); background: var(--accent); opacity: .9;
  transition: width .6s cubic-bezier(.2,0,.2,1) }
.sval { text-align: right; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums }
.sval em { font-style: normal; color: var(--ink-3); font-size: 11px }

/* ── rankings ────────────────────────────────────────────────────── */
.rank { display: grid; grid-template-columns: 30px 1fr 86px 86px; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 13px }
.rank:last-child { border-bottom: 0 }
.rk { font-family: var(--mono); font-size: 12px; color: var(--ink-3) }
.rv { text-align: right; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums }
.mv { text-align: right; font-family: var(--mono); font-size: 11px; color: var(--ink-3) }
.dotstate { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px }

/* Stuck-listing rows.
   NOT .rank — that is a four-column grid (30px 1fr 86px 86px) and feeding it
   two children drops the content into the 30px column, which wraps every word
   onto its own line. These rows carry an address and need to flow. */
.stale-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line-2); font-size: 13px }
.stale-row:last-child { border-bottom: 0 }
.sr-main { flex: 1 1 auto; min-width: 0 }
.sr-count { flex: 0 0 auto; font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-3); white-space: nowrap; padding-top: 1px }
.sr-listing { margin-top: 5px; line-height: 1.5 }
.sr-days { color: var(--amber); font-weight: 600 }
.sr-more { margin-top: 4px; font-size: 12.5px; color: var(--ink-3) }
.sr-more summary { cursor: pointer }
.sr-more > div { margin-top: 4px }

/* Inbound callback list. Scrollable, because a busy day should not push the
   rest of Today off the screen. */
.cb-scroll { max-height: clamp(240px, 46vh, 620px); overflow-y: auto;
  overscroll-behavior: contain; margin: -4px -2px 0; padding: 0 2px }
.cb-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--line-2) }
.cb-row:last-child { border-bottom: 0 }
.cb-main { flex: 1 1 auto; min-width: 0 }
/* Handled items stay visible but recede — the open ones are the work. */
.cb-row.done { opacity: .62 }
.cb-tick { flex: 0 0 auto; color: var(--green); font-size: 14px; padding-top: 2px }
.cb-note { margin-top: 4px; font-size: 12.5px; color: var(--ink-2);
  border-left: 2px solid var(--line); padding-left: 8px }
.cb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.cb-note-in { width: 100%; margin-top: 7px; font: inherit; font-size: 12.5px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 9px }
.cb-note-in:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring) }

/* An unavailable value in a table. Carries its reason as a tooltip; the cause
   is also stated once above the table, because a tooltip cannot be opened on
   a touch device. */
.na { color: var(--ink-3); border-bottom: 1px dotted var(--ink-3); cursor: help }

/* ── board ───────────────────────────────────────────────────────── */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 12px }
.col { padding: 11px; border-radius: var(--r); background: var(--surface-sunk); min-height: 128px }
.col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; padding: 0 3px }
.col-head b { color: var(--ink-2) }
.col-head span { font-family: var(--mono); font-size: 11px; color: var(--ink-3) }
.job { margin-bottom: 9px; padding: 12px 13px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--slate); border-radius: var(--r-sm);
  cursor: pointer; transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast) }
.job:hover { box-shadow: var(--sh-2); transform: translateY(-1px) }
.job.late, .job.today { border-left-color: var(--red) }
.job.soon { border-left-color: var(--amber) }
.job.ok   { border-left-color: var(--green) }
.job b { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: -.005em }
.job .svc { margin: 5px 0 8px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5 }
.job .ft { display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.job .amt { font-family: var(--mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums }
/* Same rule as everywhere else: green means collected, red means the money is
   at risk, and a job that is merely in progress gets neither. */
.job .amt.collected { color: var(--green) }
.job .amt.at-risk   { color: var(--red) }
.job .amt.due-soon  { color: var(--amber) }
.job .due { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3) }
/* A closed job with no recognition date is the one holding the revenue total
   down to a floor. Amber because it is a gap someone can close, not a failure. */
.job .due.gap { color: var(--amber) }
.job .move { display: flex; gap: 5px; margin-top: 9px }
.job .move button { flex: 1; font: inherit; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 5px;
  padding: 5px; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast) }
.job .move button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent) }
.job .move button:disabled { opacity: .3; cursor: not-allowed }
.job[draggable="true"] { cursor: grab }
.job.dragging { opacity: .4; cursor: grabbing }
/* Only columns that would accept this job light up. A drop target that
   rejects on release is worse than one that never offered. */
.col.can-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-ring) }
.col.over { box-shadow: inset 0 0 0 2px var(--accent) }

/* ── PhoneBurner sync queue ──────────────────────────────────────── */
/* The before value is deliberately muted and struck through. A push overwrites
   someone else's CRM, and the reviewer's eye should land on what is being
   replaced, not only on what replaces it. */
.was { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px }
.none { color: var(--ink-3); font-style: italic; text-decoration: none }
.err { color: var(--red); font-size: 11.5px; line-height: 1.4 }
.act { text-align: right; white-space: nowrap }
.btn.sm { padding: 4px 9px; font-size: 10px }

.tag.pending   { background: var(--amber-soft); color: var(--amber) }
.tag.applied   { background: var(--green-soft); color: var(--green) }
.tag.failed    { background: var(--red-soft);   color: var(--red) }
.tag.cancelled { background: var(--slate-soft); color: var(--slate) }

/* ── first-run states ────────────────────────────────────────────── */
/* Deliberately quiet. This is the most-seen screen during a pilot, so it must
   read as "nothing here yet" rather than as an error — no red, no icon, no
   exclamation. The accent border is the only colour. */
.firstrun { padding: 34px 28px; text-align: center; max-width: 520px; margin: 0 auto }
.firstrun h4 { font-size: 15px; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink) }
.firstrun p { margin: 0 auto; max-width: 44ch; color: var(--ink-2); font-size: 13px; line-height: 1.6 }
.firstrun .btn { margin-top: 16px }
.firstrun small { display: block; margin-top: 12px; color: var(--ink-3); font-size: 11.5px; line-height: 1.5 }

/* Inside a board column there is no room for the full treatment. */
.col .firstrun { padding: 14px 6px; max-width: none }
.col .firstrun h4 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3); margin: 0 }
.col .firstrun p { font-size: 11.5px; line-height: 1.45 }

/* A whole-view first run replaces the board, so it gets a surface of its own. */
.firstrun-panel { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1) }

/* ── shared dialing seat ─────────────────────────────────────────── */
/* The dot carries the state and the text explains it. Green means the seat is
   yours, amber means someone else has it, grey means free — the same colour
   vocabulary the sync pill and confidence chip already use. */
.seat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 11px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--slate); font-size: 13px; color: var(--ink-2) }
.seat.mine  { border-left-color: var(--green); background: var(--green-soft) }
.seat.other { border-left-color: var(--amber); background: var(--amber-soft) }
.seat i { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--ink-3); box-shadow: 0 0 0 3px var(--slate-soft) }
.seat.mine  i { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft) }
.seat.other i { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft) }
.seat b { color: var(--ink); font-weight: 600 }
/* Time remaining is a number that changes — mono so it does not reflow the
   sentence around it every minute. */
.seat .left { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--ink-3) }
.seat .grow { margin-left: auto }
.seat small { display: block; color: var(--ink-3); font-size: 11.5px;
  line-height: 1.5; flex-basis: 100%; margin-top: 2px }

@media (max-width: 720px) {
  .seat { gap: 9px; padding: 10px 13px }
  .seat .grow { margin-left: 0; width: 100% }
  .seat .grow .btn { width: 100% }
}

/* ── company calendar ────────────────────────────────────────────── */
/* One colour per source, and the same colour in the legend, the month grid and
   the agenda. The left border is the only carrier — filling the chip would put
   five saturated blocks in every cell and make the week unreadable. */
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.cal-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--ink-3) }
.cal-key i { width: 9px; height: 9px; border-radius: 2px; background: var(--slate); flex: none }
.cal-key.k-appointment i { background: var(--accent) }
.cal-key.k-job_start   i { background: var(--slate) }
.cal-key.k-job_due     i { background: var(--amber) }
.cal-key.k-follow_up   i { background: var(--green) }
.cal-key.k-entry       i { background: var(--ink-3) }

.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--line-2); gap: 1px; border-bottom: 1px solid var(--line-2) }
.cal-dow span { background: var(--surface); padding: 9px 10px; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ink-3) }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--line-2) }
.cal-cell { background: var(--surface); min-height: 116px; padding: 7px 8px 9px;
  display: flex; flex-direction: column; gap: 4px }
/* Days outside the month being viewed still render — a month grid with holes
   is harder to read than one with context — but they recede. */
.cal-cell.cal-out { background: var(--surface-sunk) }
.cal-cell.cal-out .cal-daynum { color: var(--ink-3) }
.cal-cell.cal-weekend { background: var(--surface-sunk) }
.cal-daynum { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--ink-2); font-weight: 500 }
.cal-cell.cal-today .cal-daynum { color: var(--on-accent); background: var(--accent);
  border-radius: 999px; width: 21px; height: 21px; display: grid; place-items: center;
  margin: -2px 0 1px -2px }

.cal-item { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--surface-2); border: 0; border-left: 3px solid var(--slate);
  border-radius: 4px; padding: 4px 6px; font-size: 11.5px; line-height: 1.35;
  color: var(--ink); transition: background var(--t-fast), transform var(--t-fast) }
.cal-item:hover { background: var(--accent-soft); transform: translateX(1px) }
.cal-item b { font-weight: 600; display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap }
.cal-item small { display: block; color: var(--ink-3); font-size: 10.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cal-item .cal-at { font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink-2); font-size: 10.5px; margin-right: 4px }
.cal-item.s-appointment { border-left-color: var(--accent) }
.cal-item.s-job_start   { border-left-color: var(--slate) }
.cal-item.s-job_due     { border-left-color: var(--amber) }
.cal-item.s-follow_up   { border-left-color: var(--green) }
.cal-item.s-entry       { border-left-color: var(--ink-3) }
/* A closed job and a meeting that already happened are history. They stay
   visible so last month reads correctly, but they must not compete with work
   that still needs doing. */
.cal-item.cal-done { opacity: .5 }
.cal-item.cal-done b { text-decoration: line-through; text-decoration-thickness: 1px }
.cal-more { font: inherit; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3); background: none; border: 0; padding: 2px 4px;
  cursor: pointer; text-align: left }
.cal-more:hover { color: var(--accent) }

/* Agenda: the same items, one day per row, empty days omitted. This is what
   the month grid collapses to on a phone. */
.cal-agenda { display: flex; flex-direction: column }
.cal-ag-day { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-2) }
.cal-ag-day:last-child { border-bottom: 0 }
.cal-ag-day.cal-today { background: var(--accent-soft) }
.cal-ag-when b { display: block; font-size: 13px; font-weight: 600 }
.cal-ag-when small { color: var(--ink-3); font-size: 11px }
.cal-ag-items { display: flex; flex-direction: column; gap: 5px; min-width: 0 }

@media (max-width: 860px) {
  .cal-cell { min-height: 92px }
  .cal-item small { display: none }
}
/* Seven columns on a phone is four characters wide. Below this the grid
   becomes the agenda it already knows how to be. */
@media (max-width: 700px) {
  .cal-dow { display: none }
  .cal-grid { display: flex; flex-direction: column; gap: 0; background: none }
  /* Two columns, not a wrapping flex row: the day number owns a fixed gutter
     and every item on that day lines up in the second column. Wrapping put the
     second item of a day back at the left edge, out of line with the first. */
  .cal-cell { display: grid; grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 12px; row-gap: 4px; align-items: start;
    min-height: 0; padding: 11px 14px; border-bottom: 1px solid var(--line-2) }
  .cal-cell.cal-out, .cal-cell.cal-weekend { background: var(--surface) }
  .cal-cell.cal-blank { display: none }
  .cal-daynum { grid-column: 1; grid-row: 1; padding-top: 2px }
  .cal-item, .cal-more { grid-column: 2 }
  .cal-item small { display: block }
  .cal-ag-day { grid-template-columns: 1fr; gap: 8px }
}

/* ── trust grid ──────────────────────────────────────────────────── */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(166px, 1fr));
  gap: 1px; background: var(--line-2) }
.ti { background: var(--surface); padding: 15px 16px }
.ti b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500;
  word-break: break-word; letter-spacing: -.02em }
.ti small { display: block; margin-top: 4px; color: var(--ink-3) }
.ti.bad b { color: var(--red) } .ti.warn b { color: var(--amber) }
.ti.ok b { color: var(--green) }
.ti.na b { color: var(--amber); font-size: 12.5px; line-height: 1.45 }

.li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--line-2) }
.li:last-child { border-bottom: 0 }
.li .when { margin-left: auto; text-align: right; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3) }

/* ── crews ───────────────────────────────────────────────────────── */
.mrow { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--line-2) }
.mrow:last-child { border-bottom: 0 }
.mid { display: flex; align-items: center; gap: 11px }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  font-size: 12px; font-weight: 650 }
.mstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 1px; background: var(--line-2); border-radius: var(--r-sm); overflow: hidden }
.ms { background: var(--surface); padding: 9px 8px; text-align: center }
.ms b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 500;
  font-variant-numeric: tabular-nums }
.ms small { display: block; color: var(--ink-3); font-size: 9.5px }

/* ── confidence chip ─────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 550; color: var(--ink-2);
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px 5px 9px; transition: border-color var(--t-fast), color var(--t-fast) }
.chip:hover { border-color: var(--ink-3); color: var(--ink) }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft); flex: none }
.chip.warn i { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft) }
.chip.bad  i { background: var(--red);   box-shadow: 0 0 0 3px var(--red-soft) }
.chip.na   i { background: var(--ink-3); box-shadow: 0 0 0 3px var(--slate-soft) }

/* ── hero: the one decision on the page ──────────────────────────── */
.hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: 30px 32px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background:
    radial-gradient(760px 300px at 92% -30%, var(--accent-soft), transparent 70%),
    var(--surface);
  box-shadow: var(--sh-1) }
.hero-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap }
.hero h2 { font-size: 27px; letter-spacing: -.025em; margin: 0 0 6px; font-weight: 650 }
.hero .lede { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; max-width: 56ch }
.hero .lede b { color: var(--ink); font-weight: 600 }
.hero-cta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 232px }
.btn.hero-btn { font-size: 13px; letter-spacing: .03em; padding: 15px 22px; border-radius: var(--r);
  box-shadow: 0 6px 18px -8px var(--accent-ring) }
.btn.hero-btn:hover:not(:disabled) { transform: translateY(-1px) }
.hero-sub { text-align: center; font-size: 11.5px; color: var(--ink-3) }
.hero-strip { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--line-2) }
/* The hero numbers are three-state values now, so `.val` has to inherit what
   `b` had. Without this the strip renders at body size and loses its red and
   amber states — the values still being correct while looking like nothing. */
.hero-stat b, .hero-stat .val { display: block; font-family: var(--mono); font-size: 21px;
  font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.hero-stat small { display: block; margin-top: 1px; font-size: 11px; color: var(--ink-3) }
.hero-stat.red b, .hero-stat.red .val { color: var(--red) }
.hero-stat.amber b, .hero-stat.amber .val { color: var(--amber) }
/* An unavailable hero stat prints its reason at readable size, and the amber
   "cannot answer" colour must win over the red/amber URGENCY colours above —
   those mean "this number is bad", this means "there is no number". */
.hero-stat .val.st-unavailable { font-size: 12px; line-height: 1.35; margin-top: 3px;
  color: var(--amber) }
.hero-stat .val.st-empty { color: var(--ink-3) }

/* A queue whose source cannot answer. The reason replaces the count, so the
   card needs to give it room rather than clipping it to a number's width. */
.q.q-na .q-n { flex: 1 1 auto; min-width: 0 }
.q .q-n .val.st-unavailable { font-size: 11.5px; line-height: 1.35; color: var(--amber) }

/* The script panel while a real session is running beside it. The left border
   is the only always-visible marker that this is a LIVE call, not a rehearsal —
   the header text says so too, but the header scrolls and this does not. */
#focus.dialing { border-left: 3px solid var(--accent) }
#focus.dialing #fxQueue { color: var(--accent) }

/* Pop-up blocked, session already live. Deliberately loud and persistent: the
   contacts are reserved for four hours whether or not the rep ever reaches the
   dialer, so this must not be dismissible by accident. */
.launch-fallback { position: fixed; z-index: 60; left: 50%; bottom: 24px;
  transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  max-width: min(680px, calc(100vw - 32px)); padding: 13px 16px;
  background: var(--surface); border: 1px solid var(--amber);
  border-radius: var(--r-lg); box-shadow: 0 10px 30px -12px rgba(0,0,0,.55);
  font-size: 13px; line-height: 1.4 }
.launch-fallback a { text-decoration: none; white-space: nowrap }
@media (max-width: 560px) { .launch-fallback { flex-wrap: wrap } }

/* The issued invite link. Monospace and selectable: it is read once, and the
   difference between a hyphen and an underscore in a base64url token matters. */
.invite-link { flex: 1 1 260px; min-width: 0; padding: 8px 10px;
  font-family: var(--mono); font-size: 12px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r) }

/* ── disclosure folds — reference material, ranked below the action ── */
.fold { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden }
.fold > summary { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 18px; cursor: pointer; list-style: none;
  transition: background var(--t-fast) }
.fold > summary::-webkit-details-marker { display: none }
.fold > summary:hover { background: var(--surface-2) }
.fold > summary b { font-size: 14px; font-weight: 600 }
.fold > summary small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3) }
.fold-mark { color: var(--ink-3); transition: transform var(--t) }
.fold[open] .fold-mark { transform: rotate(180deg) }
.fold-body { padding: 0 18px 18px }
.fold-body.flush { padding: 0; border-top: 1px solid var(--line-2) }

/* ── executive plain-language summary ────────────────────────────── */
.readout { margin-bottom: 18px; padding: 24px 26px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1) }
.readout p { margin: 0 0 10px; font-size: 16px; line-height: 1.65; letter-spacing: -.01em }
.readout p:last-child { margin-bottom: 0 }
.readout b { font-weight: 650 }
.readout .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500 }
.readout .flagline { color: var(--amber) }
.readout .goodline { color: var(--green) }

/* ── focus mode ──────────────────────────────────────────────────── */
.focus { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column;
  background: var(--bg); animation: fade var(--t) both }
.focus-top { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--surface) }
.fx-progress { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0 }
.fx-progress > b { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  white-space: nowrap }
.fx-track { flex: 1; max-width: 340px; height: 5px; border-radius: 999px;
  background: var(--surface-sunk); overflow: hidden }
.fx-fill { height: 100%; border-radius: 999px; background: var(--accent);
  transition: width var(--t) }
.fx-queue { font-size: 12px; color: var(--ink-3); white-space: nowrap }
.fx-top-right { display: flex; align-items: center; gap: 14px }

.focus-body { flex: 1; overflow-y: auto; display: grid;
  grid-template-columns: minmax(0, 1fr) 372px; gap: 34px;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 40px 26px 56px }
.focus-main > .tag { margin-bottom: 14px }
.focus-main h1 { font-size: 40px; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 8px }
.fx-meta { margin: 0 0 22px; font-size: 15px; color: var(--ink-2) }
.fx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px; margin-bottom: 24px }
.fx-facts .fact { padding: 11px 13px }
.fx-facts .fact b { font-size: 13.5px }
.focus-main .script { font-size: 15px; line-height: 1.75; padding: 18px 20px; border-radius: var(--r) }
.fx-next { margin-top: 20px; font-size: 14px; color: var(--ink-2) }
.fx-next b { display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent) }

.focus-side { position: sticky; top: 0; align-self: start }
.focus-side h4 { margin: 0 0 12px; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-3) }
.fx-disp { display: flex; flex-direction: column; gap: 7px }
.fx-disp button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) }
.fx-disp button:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateX(2px) }
.fx-disp button.conv { border-left: 3px solid var(--green) }
.fx-disp button .n { display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  font-family: var(--mono); font-size: 11px; border-radius: 5px;
  background: var(--surface-sunk); color: var(--ink-2) }
.fx-disp button .why { margin-left: auto; font-size: 10.5px; color: var(--ink-3); white-space: nowrap }
.fx-actions { display: flex; gap: 8px; margin-top: 14px }
.fx-actions .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px }
.focus-side .hint { margin-top: 14px }
.focus-side .gate-msg { margin-top: 12px }

@media (max-width: 900px) {
  .focus-body { grid-template-columns: 1fr; gap: 26px; padding: 24px 16px 48px }
  .focus-main h1 { font-size: 30px }
  .focus-side { position: static }
  .hero { padding: 22px }
  .hero-cta { min-width: 0; width: 100% }
}

/* ── command palette ─────────────────────────────────────────────── */
.cmdk-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center;
  padding-top: 14vh; background: rgba(8,12,14,.44); backdrop-filter: blur(3px);
  animation: fade var(--t-fast) both }
.cmdk { width: min(600px, 92vw); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
  animation: rise var(--t) both }
.cmdk input { width: 100%; font: inherit; font-size: 15.5px; color: var(--ink);
  background: none; border: 0; padding: 17px 20px; border-bottom: 1px solid var(--line-2) }
.cmdk input:focus { outline: none }
.cmdk-list { max-height: 340px; overflow-y: auto; padding: 6px }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; color: var(--ink); background: none; border: 0;
  border-radius: var(--r-sm); padding: 10px 13px; cursor: pointer }
.cmdk-item:hover, .cmdk-item.on { background: var(--accent-soft) }
.cmdk-item .k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3); margin-left: auto }
.cmdk-item .sub2 { color: var(--ink-3); font-size: 11.5px }
.cmdk-empty { padding: 26px; text-align: center; color: var(--ink-3); font-size: 13px }
kbd { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px }

/* ── team & roles ────────────────────────────────────────────────── */
.rolecard { padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 11px; background: var(--surface) }
.rolecard.retired { opacity: .6 }
.rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap }
.rc-head b { font-size: 13.5px }
.rc-head code { font-size: 11px; color: var(--ink-3); margin-left: 5px }
.rc-head .mt { margin-top: 4px }
.rc-act { display: flex; gap: 6px; flex: none }
.caps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px }
/* Withheld capabilities are shown struck through rather than omitted: what a
   role deliberately cannot do is the reason the role exists, and hiding it
   would make the list look like an oversight. */
.cap { font-family: var(--mono); font-size: 10.5px; padding: 3px 7px; border-radius: var(--r-sm) }
.cap.on  { background: var(--green-soft); color: var(--green) }
.cap.off { background: var(--surface-sunk); color: var(--ink-3); text-decoration: line-through }
.capline { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: 12.5px }
.capline input { width: 15px; height: 15px; accent-color: var(--accent) }
.capline small { color: var(--ink-3); font-size: 10.5px; margin-left: auto }
.capline.na { color: var(--ink-3) }
.role-pick { font-size: 12px; padding: 5px 8px }

/* ── project drawer ──────────────────────────────────────────────── */
/*
 * A right-hand sheet built on <dialog>, so focus trapping, Esc and the
 * backdrop are the browser's job rather than ours.
 */
.drawer { width: min(560px, 100vw); max-width: 100vw; height: 100%; max-height: 100vh;
  margin: 0 0 0 auto; border-radius: 0; border-right: 0; border-top: 0; border-bottom: 0;
  animation: drwIn var(--t) both }
@keyframes drwIn { from { transform: translateX(18px); opacity: .6 } }
.drw { display: flex; flex-direction: column; height: 100vh; overflow-y: auto }
.drw-head { position: sticky; top: 0; z-index: 2; padding: 18px 22px 15px;
  background: var(--surface); border-bottom: 1px solid var(--line-2) }
.drw-head .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.drw-head h3 { font-size: 17px; line-height: 1.3; margin: 0 }
.drw-head .meta { margin-top: 5px; font-size: 11.5px; color: var(--ink-3) }
.drw-x { font: inherit; font-size: 18px; line-height: 1; color: var(--ink-3); background: none;
  border: 0; cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm) }
.drw-x:hover { background: var(--surface-sunk); color: var(--ink) }
.drw-sec { padding: 18px 22px; border-bottom: 1px solid var(--line-2) }
.drw-sec:last-child { border-bottom: 0 }
.drw-sec > h4 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px; font-weight: 600 }

/* Slip: the gap between what was promised and what the crew now believes.
   Amber while it is still only a projection — nothing has gone wrong yet. */
.slip { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; font-size: 10.5px; font-family: var(--sans); letter-spacing: .03em }
.slip.slipping { color: var(--amber); background: var(--amber-soft) }
.slip.ahead    { color: var(--green); background: var(--green-soft) }

.tasks { display: flex; flex-direction: column; gap: 2px }
.task { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px;
  padding: 8px 9px; border-radius: var(--r-sm); transition: background var(--t-fast) }
.task:hover { background: var(--surface-sunk) }
.task input[type=checkbox] { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent);
  cursor: pointer; flex: none }
.task .tt { font-size: 13px; line-height: 1.45; word-break: break-word }
.task .tm { font-size: 10.5px; color: var(--ink-3); margin-top: 2px }
.task.done .tt { color: var(--ink-3); text-decoration: line-through }
.task .del { font: inherit; font-size: 14px; line-height: 1; color: var(--ink-3); background: none;
  border: 0; cursor: pointer; padding: 1px 5px; border-radius: var(--r-sm); opacity: 0 }
.task:hover .del { opacity: 1 }
.task .del:hover { background: var(--red-soft); color: var(--red) }

.tbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px }
.tbar .btrack { flex: 1 }
.tbar b { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; flex: none }

.tadd { display: flex; gap: 7px; margin-top: 11px }
.tadd input { flex: 1 }

.tl { display: flex; flex-direction: column; gap: 0 }
.tl-item { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.5 }
.tl-item:first-child { border-top: 0 }
.tl-when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3) }
.tl-what b { font-weight: 600 }
.tl-who { color: var(--ink-3); font-size: 11px }
/* An audit entry already stores only what changed, so the diff renders as-is. */
.tl-diff { display: flex; flex-direction: column; gap: 2px; margin-top: 4px }
.tl-diff span { font-size: 11px; color: var(--ink-2) }
.tl-diff code { font-size: 10.5px; color: var(--ink-3) }

@media (max-width: 720px) {
  .drawer { width: 100vw }
  .tl-item { grid-template-columns: 1fr; gap: 2px }
}

/* ── dialog & toast ──────────────────────────────────────────────── */
.dlg { width: min(480px, 92vw); padding: 0; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3) }
.dlg::backdrop { background: rgba(8,12,14,.44); backdrop-filter: blur(3px) }
.dlg form { display: flex; flex-direction: column; gap: 14px; padding: 24px }
.dlg-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 6px }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 300;
  max-width: min(560px, 92vw); padding: 13px 20px; border-radius: var(--r);
  background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.55;
  box-shadow: var(--sh-3); animation: toastIn var(--t) both }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px) } }
.toast.bad  { background: var(--red);   color: #fff }
.toast.good { background: var(--green); color: #fff }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .g-queue, .g-2 { grid-template-columns: 1fr }
  .copilot { position: static; max-height: none }
}
@media (max-width: 720px) {
  /* The rail is a fixed-height flex row that cannot wrap, so on a phone the
     pieces with a home elsewhere give up their space rather than pushing the
     whole document sideways: the sync label (the coloured dot still carries
     the state, and Data trust has the detail) and the command palette (there
     is no Ctrl-K on a touch keyboard). Without this every page scrolls
     horizontally by ~350px, which is how a 375px viewport ends up 727px wide. */
  .rail { height: 56px; gap: 10px; padding: 0 14px; overflow: hidden }
  .brand span, .sync small, .sync strong { display: none }
  .brand { flex: 0 0 auto }
  #cmdkOpen { display: none }
  .branch-select { min-width: 0; flex: 0 1 auto; text-overflow: ellipsis }
  .rail-right { gap: 10px; min-width: 0 }
  .who-rail { padding-left: 10px }
  .who-rail div { display: none }
  main { padding: 18px 14px 56px }
  h1 { font-size: 22px }
  .metrics { grid-template-columns: 1fr 1fr }
  .metric { border-right: 0; border-bottom: 1px solid var(--line-2) }
  .facts, .outcomes, .queues { grid-template-columns: 1fr }
  .mrow, .bar, .stage { grid-template-columns: 1fr; gap: 8px }
  .board { grid-template-columns: 1fr }
  input[type=search] { min-width: 0; width: 100% }
  .controls { width: 100% }
  .controls > * { flex: 1 1 auto }
}

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