/* ─────────────────────────────────────────────────────────────
   CADENCE — dark ops console
   Palette: validated against surface #14161a (dataviz six checks)
   ───────────────────────────────────────────────────────────── */

/* ── theme tokens ──────────────────────────────────────────
   Dark is the working default for an ops console; light is a
   designed counterpart, not an inversion. The toggle wins over
   the OS in both directions and is remembered per browser.     */
:root {
  color-scheme: dark;

  --plane:        #0b0c0f;
  --surface-1:    #14161a;
  --surface-2:    #191c21;
  --surface-3:    #21252c;
  --hairline:     rgba(255, 255, 255, 0.08);
  --hairline-2:   rgba(255, 255, 255, 0.14);
  /* alias: 15 components referenced --border, which was never defined, so their
     borders fell back to currentColor (the text colour). Resolves to the current
     theme's hairline at use-time, so one definition covers dark and both lights. */
  --border:       var(--hairline);
  --overlay:      rgba(4, 5, 7, 0.66);

  --text-primary:   #f4f5f7;
  --text-secondary: #a8adb8;
  --text-muted:     #6f7681;

  /* entity → colour (global; a hue means the same thing in every chart) */
  --c-dials:     #3987e5;   /* blue    — volume */
  --c-answered:  #199e70;   /* aqua    — connected */
  --c-talk:      #d95926;   /* orange  — long conversations */
  --c-voicemail: #c98500;   /* yellow  */
  --c-busy:      #d55181;   /* magenta */
  --c-noanswer:  #9085e9;   /* violet  */
  --c-failed:    #e66767;   /* red     */

  --good:     #0ca30c;
  --warning:  #fab219;
  --critical: #d03b3b;

  --grid:     #22262c;
  --axis:     #32373f;
  --chart-surface: #14161a;
  --line-faint: rgba(255,255,255,.045);
  --tooltip-bg: #0a0b0e;
  --ink-answered: #4fd6a4;
  --ink-voicemail: #e0ab45;
  --ink-failed: #f08c8c;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  /* straight from the wordmark */
  --brand-cyan: #00AEEF;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --plane:        #f4f5f7;
    --surface-1:    #ffffff;
    --surface-2:    #f7f8fa;
    --surface-3:    #eceef2;
    --hairline:     rgba(16, 20, 28, 0.09);
    --hairline-2:   rgba(16, 20, 28, 0.16);
    --overlay:      rgba(20, 24, 32, 0.42);
    --text-primary:   #11151b;
    --text-secondary: #4c5563;
    --text-muted:     #79818f;
    --c-dials:     #2a78d6;
    --c-answered:  #1baf7a;
    --c-talk:      #eb6834;
    --c-voicemail: #b57900;
    --c-busy:      #cf5a86;
    --c-noanswer:  #4a3aa7;
    --c-failed:    #d43f3e;
    --good:        #0a8f0a;
    --warning:     #b57900;
    --critical:    #c0332f;
    --grid:        #e6e8ec;
    --axis:        #cdd2d9;
    --chart-surface: #ffffff;
    --line-faint: rgba(16,20,28,.06);
    --tooltip-bg: #ffffff;
    --ink-answered: #0f7a55;
    --ink-voicemail: #8a5c00;
    --ink-failed: #a5302f;
    --shadow: 0 1px 2px rgba(16,22,30,.07), 0 10px 30px rgba(16,22,30,.10);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --plane:        #f4f5f7;
  --surface-1:    #ffffff;
  --surface-2:    #f7f8fa;
  --surface-3:    #eceef2;
  --hairline:     rgba(16, 20, 28, 0.09);
  --hairline-2:   rgba(16, 20, 28, 0.16);
  --overlay:      rgba(20, 24, 32, 0.42);
  --text-primary:   #11151b;
  --text-secondary: #4c5563;
  --text-muted:     #79818f;
  --c-dials:     #2a78d6;
  --c-answered:  #1baf7a;
  --c-talk:      #eb6834;
  --c-voicemail: #b57900;
  --c-busy:      #cf5a86;
  --c-noanswer:  #4a3aa7;
  --c-failed:    #d43f3e;
  --good:        #0a8f0a;
  --warning:     #b57900;
  --critical:    #c0332f;
  --grid:        #e6e8ec;
  --axis:        #cdd2d9;
  --chart-surface: #ffffff;
  --line-faint: rgba(16,20,28,.06);
  --tooltip-bg: #ffffff;
  --ink-answered: #0f7a55;
  --ink-voicemail: #8a5c00;
  --ink-failed: #a5302f;
  --shadow: 0 1px 2px rgba(16,22,30,.07), 0 10px 30px rgba(16,22,30,.10);
}

* { box-sizing: border-box; }
/* The `hidden` attribute must always win. Component rules like
   `.engine-status{display:flex}` and `.quick-fab{display:grid}` otherwise
   override the UA `[hidden]{display:none}`, leaving a "hidden" element on
   screen — an empty status strip on the dashboard, the + button on every page. */
[hidden] { display: none !important; }

/* One visible focus ring for keyboard users across every interactive surface.
   Only .kpi, .perm input and .owner-select had one before, so tabbing through
   the nav, buttons, chips, tabs, calendar and carrier cards showed nothing.
   :focus-visible keeps it off mouse clicks. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-item:focus-visible,
.chip:focus-visible, .seg:focus-visible, .mark-btn:focus-visible, .sheet-tab:focus-visible,
.cal-day:focus-visible, .carrier-opt:focus-visible, .carrier-card:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--plane);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-dials); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 8px; border: 2px solid var(--plane); }
::-webkit-scrollbar-track { background: transparent; }

:root { --sidebar-w: 232px; }

/* ── shell ───────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface-1);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 12px; position: sticky; top: 0; height: 100vh;
}
/* align-items matters here: a column flexbox stretches its children across the
   cross axis by default, which pulled the wordmark to the full sidebar width
   while its height stayed fixed — the logo rendered twice as wide as it is. */
.brand { display: flex; flex-direction: column; align-items: flex-start;
         gap: 7px; padding: 6px 8px 20px; }
/* the wordmark ships in two inks; the theme decides which one is in the flow */
.logo { display: block; align-self: flex-start; height: 26px; width: auto;
        max-width: 100%; object-fit: contain; }
:root[data-theme="light"] .on-dark, :root[data-theme="dark"] .on-light { display: none; }
.brand-sub { font-size: 10px; color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--text-secondary); cursor: pointer; border: 0; background: none;
  width: 100%; text-align: left; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }
/* The selected page is the one thing on this rail that should carry the brand
   colour — a grey highlight makes the whole sidebar read as disabled. */
.nav-item.active {
  background: color-mix(in srgb, var(--brand-cyan) 13%, transparent);
  color: var(--text-primary); font-weight: 600;
}
.nav-item.active .ico { color: var(--brand-cyan); }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand-cyan);
}
.nav-item { position: relative; }
.nav-item.active .nav-badge {
  background: color-mix(in srgb, var(--brand-cyan) 22%, transparent);
  color: var(--text-primary);
}
.nav-item svg { width: 17px; height: 17px; opacity: .85; flex: none; }
.nav-badge {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--text-secondary);
  padding: 1px 7px; border-radius: 20px;
  transition: background .18s ease, color .18s ease;
}
/* A number worth reading looks different from a zero. The green is the same
   one the console already uses for a connected line, so the sidebar reads as
   part of the same system rather than as decoration. */
.nav-badge.has-count {
  background: color-mix(in srgb, var(--c-answered) 15%, transparent);
  color: var(--ink-answered, var(--c-answered));
  font-weight: 600;
}
.nav-item.active .nav-badge.has-count {
  background: color-mix(in srgb, var(--c-answered) 26%, transparent);
}
.nav-group { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); padding: 16px 11px 6px; }
.me-chip {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 6px; cursor: pointer; color: inherit; transition: background .12s, border-color .12s;
}
.me-chip:hover { background: var(--surface-2); border-color: var(--hairline); }
.me-chip b { display: block; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-chip span span, .me-chip > span > span { font-size: 11px; color: var(--text-muted); }
.role-card { border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 9px; background: var(--surface-2); }
.role-card h4 { margin: 0 0 3px; font-size: 13.5px; }
.role-card p { margin: 0 0 8px; font-size: 12.5px; color: var(--text-secondary); }
.role-caps { display: flex; flex-wrap: wrap; gap: 5px; }
.role-caps span { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted);
  background: var(--surface-3); border-radius: 4px; padding: 2px 6px; }
.sidebar-foot { margin-top: auto; padding: 10px 6px 2px; border-top: 1px solid var(--hairline); }
.foot-state {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 8px;
  border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 11.5px; color: var(--text-secondary);
}
.me-row { display: flex; align-items: center; gap: 6px; }
.me-row .me-chip { flex: 1; min-width: 0; }
.me-row .btn-icon { flex: none; }

/* a small green light, because "am I still signed in" is a real question */
.me-face { position: relative; flex: none; }
.me-online {
  position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--c-answered);
  border: 2px solid var(--surface-1);
}
.me-online.away { background: var(--c-voicemail); }

.main { display: flex; flex-direction: column; min-width: 0; position: relative; }

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px; border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 16px; margin: 0; font-weight: 650; }
.topbar .spacer { flex: 1; }

.engine-pill {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 20px; padding: 5px 13px 5px 10px; font-size: 12.5px;
}
/* The carrier switch — two pills with brand logos, the live one lit. */
.carrier-switch { display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 20px; }
.carrier-opt { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  cursor: pointer; border-radius: 16px; padding: 4px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); }
.carrier-opt:hover:not(.on):not(:disabled) { color: var(--text-primary); }
.carrier-opt.on { background: var(--surface-1); color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.carrier-opt:disabled { opacity: .4; cursor: default; }
.carrier-opt b { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--text-muted); }
.carrier-opt.on b { color: var(--text-secondary); }
.carrier-mark { width: 15px; height: 15px; flex: none; }
.carrier-opt.on .carrier-mark { filter: none; }
.carrier-opt:not(.on) .carrier-mark { opacity: .7; }

/* carrier tag inside the numbers table */
.carrier-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--text-secondary); }
.carrier-tag .carrier-mark { width: 14px; height: 14px; }

/* the two carrier cards on the Numbers page */
.carrier-cards { display: grid; grid-template-columns: repeat(2, minmax(220px, 300px));
  gap: 12px; margin-bottom: 16px; }
.carrier-card { display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 14px; background: var(--surface-1);
  border: 1.5px solid var(--hairline); transition: border-color .14s, box-shadow .14s, transform .1s; }
.carrier-card:hover:not(.on):not(:disabled) { border-color: var(--hairline-2); transform: translateY(-1px); }
.carrier-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.carrier-card:disabled { opacity: .5; cursor: default; }
.carrier-card-logo { width: 30px; height: 30px; flex: none; }
.carrier-card-body { flex: 1; min-width: 0; }
.carrier-card-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.carrier-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.carrier-live { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent);
  padding: 1px 7px; border-radius: 10px; }
.carrier-off { font-size: 10px; color: var(--text-muted); }
.carrier-card-radio { width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--hairline-2); }
.carrier-card-radio.on { border-color: var(--brand); background:
  radial-gradient(circle at center, var(--brand) 0 5px, transparent 5px); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.dot.live { background: var(--good); box-shadow: 0 0 0 0 rgba(12,163,12,.7); animation: pulse 1.8s infinite; }
.dot.paused { background: var(--warning); }
.dot.error { background: var(--critical); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(12,163,12,.55); }
  70% { box-shadow: 0 0 0 8px rgba(12,163,12,0); }
  100% { box-shadow: 0 0 0 0 rgba(12,163,12,0); }
}

/* ── controls ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--hairline-2);
  color: var(--text-primary); padding: 7px 13px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-3); border-color: var(--hairline-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--c-dials); border-color: transparent; color: #fff; }
.btn-primary:hover { background: #4b93ea; }
.btn-good { background: var(--good); border-color: transparent; color: #04170a; font-weight: 650; }
.btn-good:hover { background: #10b810; }
.btn-warn { background: transparent; border-color: rgba(250,178,25,.5); color: var(--warning); }
.btn-danger { background: transparent;
  border-color: color-mix(in srgb, var(--critical) 50%, transparent); color: var(--ink-failed); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-primary); }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-icon { padding: 7px; border-radius: var(--r-sm); }
.btn-icon svg { width: 16px; height: 16px; }

/* one icon system: 24px grid, 1.5px stroke, no fills */
.ico { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none;
       stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 14px; height: 14px; }
.ico-lg { width: 20px; height: 20px; }

/* day / night */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle .sun, .theme-toggle .moon {
  transition: transform .3s cubic-bezier(.4,.1,.3,1), opacity .2s;
}
:root[data-theme="light"] .theme-toggle .moon,
:root:not([data-theme="dark"]) .theme-toggle .moon { opacity: 1; transform: none; }
.theme-toggle .sun { position: absolute; inset: 0; margin: auto; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.input, select.input, textarea.input {
  background: var(--surface-2); border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm); padding: 7px 10px; outline: none; min-width: 0;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: var(--c-dials); box-shadow: 0 0 0 3px rgba(57,135,229,.18); }
select.input { cursor: pointer; }
.input-sm { padding: 5px 8px; font-size: 12.5px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 11px; border-radius: 20px; font-size: 12.5px;
  border: 1px solid var(--hairline-2); background: var(--surface-2);
  color: var(--text-secondary); user-select: none; transition: all .12s;
}
.chip:hover { border-color: var(--hairline-2); color: var(--text-primary); }
.chip.on { background: var(--surface-3); color: var(--text-primary); border-color: var(--hairline-2); }
.chip .swatch { width: 8px; height: 8px; border-radius: 2px; }

/* ── page & cards ────────────────────────────────────────── */
.page { padding: 20px 22px 60px; display: none; }
.page.active { display: block; }
.grid { display: grid; gap: 14px; }
.card {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 16px; min-width: 0;
}
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-title { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.card-sub { font-size: 11.5px; color: var(--text-muted); }
.card-head .spacer { flex: 1; }

/* KPI tiles — value first, movement second, explanation on demand */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1500px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 15px 16px 13px; position: relative;
  display: grid; grid-template-rows: auto auto auto; gap: 3px;
  cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  transition: border-color .14s, background .14s, transform .1s;
}
.kpi:hover { border-color: var(--hairline-2); background: var(--surface-2); }
.kpi:active { transform: translateY(1px); }
.kpi:focus-visible { outline: 2px solid var(--c-dials); outline-offset: 2px; }
.kpi-top { display: flex; align-items: center; gap: 8px; }
.kpi-label {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600;
}
.kpi-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kpi-accent, var(--text-muted)); flex: none; }
.kpi-info { margin-left: auto; color: var(--text-muted); opacity: 0; transition: opacity .14s; }
.kpi:hover .kpi-info, .kpi:focus-visible .kpi-info { opacity: 1; }
.kpi-info svg { width: 14px; height: 14px; display: block; }
.kpi-value {
  font-size: 28px; font-weight: 660; line-height: 1.05; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 3px;
}
.kpi-value small { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.kpi-foot { display: flex; align-items: center; gap: 9px; min-height: 20px; }
.kpi-meta { font-size: 11.5px; color: var(--text-secondary); }
.kpi-delta {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.kpi-delta.up { color: var(--good); }
.kpi-delta.down { color: var(--critical); }
.kpi-delta.flat { color: var(--text-muted); }
.kpi-spark { margin-left: auto; width: 68px; height: 22px; flex: none; }
.kpi-spark svg { display: block; width: 100%; height: 100%; }

/* explanation card behind every metric */
.explain h4 { margin: 0 0 6px; font-size: 14px; }
.explain dl { display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; margin: 14px 0 0; font-size: 13.5px; }
.explain dt { color: var(--text-muted); }
.explain dd { margin: 0; color: var(--text-secondary); }
.explain .formula {
  font-family: var(--mono); font-size: 12.5px; background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 9px 11px; color: var(--text-primary); margin-top: 14px;
}

/* tables */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 600; padding: 8px 10px;
  border-bottom: 1px solid var(--hairline); white-space: nowrap; position: sticky; top: 0;
  background: var(--surface-1); z-index: 1;
}
.tbl th.sortable { cursor: pointer; }
.tbl th.sortable:hover { color: var(--text-secondary); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line-faint); vertical-align: middle; }
.tbl tbody tr { cursor: pointer; transition: background .1s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", monospace; font-size: 12.5px; }
.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* status tags — colour never travels alone: every tag carries its label */
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 2px 9px 2px 7px; border-radius: 20px;
  background: var(--surface-3); color: var(--text-secondary); white-space: nowrap;
}
.tag .swatch { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.tag.answered  .swatch { background: var(--c-answered); }
.tag.voicemail .swatch { background: var(--c-voicemail); }
.tag.busy      .swatch { background: var(--c-busy); }
.tag.no_answer .swatch { background: var(--c-noanswer); }
.tag.failed    .swatch { background: var(--c-failed); }
.tag.in_progress .swatch { background: var(--c-dials); animation: pulse 1.6s infinite; }
.tag.interested { background: color-mix(in srgb, var(--c-answered) 18%, transparent); color: var(--ink-answered); }
.tag.callback { background: color-mix(in srgb, var(--c-voicemail) 18%, transparent); color: var(--ink-voicemail); }
.tag.not_interested, .tag.dnc { background: color-mix(in srgb, var(--c-failed) 16%, transparent); color: var(--ink-failed); }

/* quick review controls */
.mark-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--hairline-2); background: var(--surface-2);
  color: var(--text-secondary); border-radius: 20px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: all .12s;
}
.mark-btn:hover { border-color: var(--c-answered); color: var(--ink-answered); }
.mark-btn.on {
  background: color-mix(in srgb, var(--c-answered) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-answered) 55%, transparent); color: var(--ink-answered);
}
.mark-btn svg { width: 12px; height: 12px; }

.outcome-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.outcome-picker .chip.on { border-color: var(--c-answered); }
.note-box {
  width: 100%; min-height: 82px; resize: vertical; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm); padding: 9px 11px; outline: none;
}
.note-box:focus { border-color: var(--c-dials); box-shadow: 0 0 0 3px rgba(57,135,229,.18); }
.review-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  color: var(--ink-answered); background: color-mix(in srgb, var(--c-answered) 15%, transparent);
  padding: 2px 9px; border-radius: 20px;
}

.empty { padding: 46px 20px; text-align: center; color: var(--text-muted); }
.empty svg { width: 34px; height: 34px; opacity: .35; margin-bottom: 10px; }

/* ── top bar identity ────────────────────────────────────── */
.top-profile {
  display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px;
  border-radius: 20px; border: 1px solid var(--hairline); background: var(--surface-2);
  cursor: pointer; color: inherit; transition: border-color .14s, background .14s;
}
.top-profile:hover { border-color: var(--hairline-2); background: var(--surface-3); }
.top-profile .who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.top-profile .who b { font-size: 12.5px; font-weight: 600; }
.top-profile .who span { font-size: 10.5px; color: var(--text-muted); }
@media (max-width: 1200px) { .top-profile .who { display: none; } }

.bell { position: relative; }
.bell-dot {
  position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-talk); border: 1.5px solid var(--surface-1);
}
.notif-panel {
  position: fixed; top: 62px; right: 18px; width: min(380px, calc(100vw - 24px)); z-index: 55;
  background: var(--surface-1); border: 1px solid var(--hairline-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .16s, transform .16s;
}
.notif-panel.open { opacity: 1; pointer-events: auto; transform: none; }
.notif-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px;
              border-bottom: 1px solid var(--hairline); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif { display: flex; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--line-faint); }
.notif:last-child { border-bottom: 0; }
.notif .dot { margin-top: 6px; }
.notif b { display: block; font-size: 13px; font-weight: 600; }
.notif span { font-size: 12px; color: var(--text-secondary); }
.notif time { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); margin-left: auto; }

/* ── explainer ───────────────────────────────────────────────────────────── */
.explainer .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .explainer .steps { grid-template-columns: 1fr; } }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step-n {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--surface-3); color: var(--text-secondary);
}
.step b { font-size: 13px; }
.step p { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.explainer-note:not(:empty) {
  margin-top: 16px; padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-2); background: var(--surface-2);
  font-size: 12.5px; color: var(--text-secondary);
}

/* ── segmented switch ────────────────────────────────────────────────────── */
.seg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.segmented {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 11px;
}
.segmented .seg {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border: 0; background: transparent; color: var(--text-secondary); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500; border-radius: 8px;
  transition: background .15s, color .15s;
}
.segmented .seg:hover { color: var(--text-primary); }
.segmented .seg.on { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,.18); }

/* ── funnel ──────────────────────────────────────────────────────────────── */
.funnel-row { display: flex; align-items: center; gap: 11px; padding: 6px 0; }
.funnel-label { width: 118px; font-size: 12.5px; color: var(--text-secondary); }
.funnel-bar { flex: 1; height: 9px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: var(--c-answered); border-radius: 5px; }
.funnel-n { width: 34px; text-align: right; font-size: 12px; }
.funnel-foot { display: flex; gap: 16px; margin-top: 12px; padding-top: 11px;
               border-top: 1px solid var(--hairline); font-size: 12px; color: var(--text-secondary); }

/* ── comments ───────────────────────────────────────────────────────────── */
.cm-filters { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr);
              gap: 9px; margin-top: 4px; }
@media (max-width: 780px) { .cm-filters { grid-template-columns: 1fr; } }

.live-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
             font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
             color: var(--text-muted); }

#cm-list {
  max-height: min(62vh, 640px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable; padding-right: 4px;
}
.cm-item {
  display: flex; gap: 12px; padding: 14px 2px;
  border-bottom: 1px solid var(--line-faint);
}
.cm-item:last-child { border-bottom: 0; }
.cm-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-3); color: var(--text-secondary);
}
.cm-main { min-width: 0; flex: 1; }
.cm-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cm-top b { font-size: 13px; }
.cm-top time { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.cm-body { margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--text-primary);
           white-space: pre-wrap; word-break: break-word; }
.cm-about { margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            font-size: 12px; color: var(--text-muted); }
.cm-about a { color: var(--text-secondary); text-decoration: none; cursor: pointer; }
.cm-about a:hover { color: var(--brand-cyan); }
.cm-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.cm-tags span { font-size: 10.5px; padding: 2px 7px; border-radius: 20px;
                border: 1px solid var(--hairline); color: var(--text-muted); }

/* a comment that lands while you are reading fades in rather than jumping */
@keyframes cm-arrive {
  from { opacity: 0; transform: translateY(-8px); background: color-mix(in srgb, var(--brand-cyan) 12%, transparent); }
  60%  { opacity: 1; transform: none; }
  to   { background: transparent; }
}
.cm-item.new { animation: cm-arrive 1.4s cubic-bezier(.2,.7,.3,1) both; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .cm-item.new { animation: none; } }

/* the reading of it all */
.ai-card { border-color: color-mix(in srgb, var(--brand-cyan) 30%, var(--hairline)); }
.ai-headline { margin: 4px 0 6px; font-size: 15px; line-height: 1.5; color: var(--text-primary); }

.theme-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer;
             border-bottom: 1px solid var(--line-faint); }
.theme-row:last-child { border-bottom: 0; }
.theme-row:hover .theme-label { color: var(--brand-cyan); }
.theme-label { font-size: 12.5px; width: 132px; flex: none; color: var(--text-secondary); }
.theme-bar { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.theme-bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand-cyan); }
.theme-n { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); width: 46px;
           text-align: right; }

.phrase-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.phrase-cloud span { font-size: 12px; padding: 4px 10px; border-radius: 20px;
                     background: var(--surface-2); border: 1px solid var(--hairline);
                     color: var(--text-secondary); }
.phrase-cloud b { color: var(--text-muted); font-weight: 500; margin-left: 5px; font-family: var(--mono);
                  font-size: 10.5px; }

/* ── before / after ─────────────────────────────────────────────────────── */
.diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 22px; }
@media (max-width: 760px) { .diff-cols { grid-template-columns: 1fr; } }
.diff-pane {
  margin: 0; max-height: 52vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 11px 12px; color: var(--text-secondary);
}
.diff-pane.after { border-color: color-mix(in srgb, var(--c-answered) 45%, var(--hairline)); }

/* ── lead history ───────────────────────────────────────────────────────── */
.hist-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
                gap: 12px; padding: 13px 15px; margin-bottom: 14px;
                border: 1px solid var(--hairline); border-radius: var(--r-md);
                background: var(--surface-2); }
.hist-summary div span { display: block; font-size: 10.5px; letter-spacing: .07em;
                         text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.hist-summary div b { font-size: 14px; font-weight: 600; }
.hist-summary div small { font-size: 11.5px; color: var(--text-secondary); font-weight: 400; }

.hist-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

/* one rail down the left, every event hanging off it */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
                    width: 1px; background: var(--hairline); }
.tl-item { position: relative; padding: 0 0 18px 0; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -26px; top: 1px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-1);
  border: 1px solid var(--hairline-2);
}
.tl-dot svg { width: 10px; height: 10px; fill: none; stroke: var(--text-muted);
              stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl-item.call .tl-dot { border-color: var(--c-dials); }
.tl-item.call .tl-dot svg { stroke: var(--c-dials); }
.tl-item.inbound .tl-dot { border-color: var(--c-voicemail); }
.tl-item.inbound .tl-dot svg { stroke: var(--c-voicemail); }
.tl-item.outcome .tl-dot, .tl-item.handover .tl-dot { border-color: var(--c-answered); }
.tl-item.outcome .tl-dot svg, .tl-item.handover .tl-dot svg { stroke: var(--c-answered); }
.tl-item.dnc .tl-dot { border-color: var(--c-failed); }
.tl-item.dnc .tl-dot svg { stroke: var(--c-failed); }

.tl-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tl-head b { font-size: 13.5px; }
.tl-head .who { font-size: 12px; color: var(--text-secondary); }
.tl-head time { margin-left: auto; font-family: var(--mono); font-size: 11px;
                color: var(--text-muted); white-space: nowrap; }
.tl-detail { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.tl-said { margin-top: 7px; padding: 9px 11px; border-radius: var(--r-sm);
           background: var(--surface-2); border: 1px solid var(--line-faint);
           font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.tl-open { margin-top: 8px; }

/* still being said — a soft cursor, not a blinking one */
.live-turn.saying p::after {
  content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 3px;
  vertical-align: -1px; border-radius: 1px; background: var(--brand-cyan);
  animation: saying 1.1s steps(2, end) infinite; opacity: .7;
}
@keyframes saying { 0%, 60% { opacity: .7; } 61%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-turn.saying p::after { animation: none; } }

/* the ceiling is worth noticing — it is the difference between "no leads" and
   "no room" */
#engine-live.at-ceiling { color: var(--ink-voicemail);
  background: color-mix(in srgb, var(--c-voicemail) 20%, transparent);
  padding: 1px 6px; border-radius: 5px; }

/* ── your own account ───────────────────────────────────────────────────── */
.prof-face { position: relative; flex: none; }

/* the reach card: a number, a bar, and a way in */
.reach-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 17px 18px; color: inherit; font: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.reach-card:hover { border-color: var(--brand-cyan); transform: translateY(-1px);
                    box-shadow: var(--shadow); }
.reach-card-top { display: flex; align-items: center; gap: 8px; }
.reach-card-top .reach-label { font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); }
.reach-card-top .ico { margin-left: auto; color: var(--text-muted);
                       transform: rotate(-90deg); }
.reach-card:hover .ico { color: var(--brand-cyan); }
.reach-card-value { display: flex; align-items: baseline; gap: 9px; margin-top: 8px; }
.reach-card-value b { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.reach-card-value span { font-size: 12.5px; color: var(--text-secondary); }
.reach-card .reach-bar { height: 6px; border-radius: 3px; background: var(--surface-3);
                         overflow: hidden; margin-top: 12px; }
.reach-card .reach-bar i { display: block; height: 100%; border-radius: 3px;
                           background: var(--brand-cyan); }
.reach-card .reach-bar i.full { background: var(--c-answered); }
.reach-card-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.reach-card-groups span {
  font-size: 11px; padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--hairline); color: var(--text-muted); background: var(--surface-2);
}
.reach-card-groups span.on { color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--brand-cyan) 40%, transparent); }
.reach-card-groups b { font-weight: 600; margin-left: 4px; font-family: var(--mono);
                       font-size: 10.5px; }

/* ── people & access ────────────────────────────────────────────────────── */
.people-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.people-sum { display: flex; gap: 22px; flex-wrap: wrap; }
.people-sum div { display: flex; flex-direction: column; gap: 2px; }
.people-sum b { font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.people-sum span { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
                   color: var(--text-muted); }

.people-grid { display: grid; gap: 12px;
               grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* A person is a card, not a row: a row makes you read left to right to learn
   one thing, a card puts the whole answer in one glance. */
.person-card {
  position: relative; padding: 16px 17px 14px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.person-card:hover { border-color: var(--hairline-2); transform: translateY(-1px);
                     box-shadow: var(--shadow); }
.person-card.inactive { opacity: .55; }

/* "View as" — appears on hover for a super admin, top-right of the card */
.view-as-btn {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 20px; cursor: pointer;
  color: var(--text-secondary);
  background: var(--surface-3); border: 1px solid var(--hairline);
  opacity: 0; transform: translateY(-2px);
  transition: opacity .15s, transform .15s, background .15s, color .15s, border-color .15s;
}
.person-card:hover .view-as-btn { opacity: 1; transform: none; }
.view-as-btn:hover { background: color-mix(in srgb, var(--brand-cyan) 22%, transparent);
                     color: var(--text-primary); border-color: var(--hairline-2); }
.view-as-btn svg { width: 13px; height: 13px; }
.view-as-btn:disabled { opacity: .5; cursor: default; }
@media (hover: none) { .view-as-btn { opacity: 1; transform: none; } }

/* the "you are viewing as X" bar — floats bottom-centre, never shifts layout */
#imp-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9000;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 15px; border-radius: 999px;
  font-size: 13px; color: #3a2c00;
  background: linear-gradient(180deg, #ffe27a, #f7c948);
  border: 1px solid rgba(120, 90, 0, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .2);
  animation: impIn .3s cubic-bezier(.2, .9, .3, 1.2);
}
#imp-bar svg { width: 16px; height: 16px; opacity: .8; }
#imp-bar b { font-weight: 700; }
#imp-bar #imp-exit {
  cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px; color: #fff;
  background: #1c1e24; border: 0; transition: background .15s, transform .1s;
}
#imp-bar #imp-exit:hover { background: #000; transform: translateY(-1px); }
#imp-bar #imp-exit:active { transform: none; }
@keyframes impIn { from { opacity: 0; transform: translate(-50%, 14px); }
                   to   { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { #imp-bar { animation: none; } }
.person-card .top { display: flex; align-items: center; gap: 11px; }
.person-card .top b { font-size: 14.5px; display: block; line-height: 1.25; }
.person-card .top small { font-size: 11.5px; color: var(--text-muted); }
.person-card .avatar {
  width: 40px; height: 40px; border-radius: 13px; flex: none; display: grid;
  place-items: center; font-size: 13px; font-weight: 650; letter-spacing: .02em;
  background: color-mix(in srgb, var(--brand-cyan) 18%, transparent);
  color: var(--text-primary); overflow: hidden;
}
.person-card .role-chip {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; padding: 3px 10px; border-radius: 20px;
  background: var(--surface-3); color: var(--text-secondary);
}
.person-card .role-chip.owner { background: color-mix(in srgb, var(--c-answered) 18%, transparent);
                                color: var(--ink-answered); }

/* how much of the system this person can reach, at a glance */
.person-card .reach { margin-top: 13px; }
.person-card .reach-top { display: flex; align-items: baseline; gap: 6px;
                          font-size: 11.5px; color: var(--text-muted); }
.person-card .reach-top b { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.person-card .reach-bar { height: 5px; border-radius: 3px; background: var(--surface-3);
                          overflow: hidden; margin-top: 5px; }
.person-card .reach-bar i { display: block; height: 100%; border-radius: 3px;
                            background: var(--brand-cyan); }
.person-card .reach-bar i.full { background: var(--c-answered); }

.person-card .foot { display: flex; align-items: center; gap: 8px; margin-top: 13px;
                     padding-top: 11px; border-top: 1px solid var(--line-faint);
                     font-size: 11.5px; color: var(--text-muted); }
.person-card .foot .ico { width: 14px; height: 14px; }
.person-card .foot .spacer { flex: 1; }

/* an activity log nobody is reading should not take half the page */
.drop-card { margin-top: 16px; background: var(--surface-1); border: 1px solid var(--hairline);
             border-radius: var(--r-lg); overflow: hidden; }
.drop-card > summary { display: flex; align-items: center; gap: 10px; padding: 14px 17px;
                       cursor: pointer; list-style: none; user-select: none; }
.drop-card > summary::-webkit-details-marker { display: none; }
.drop-card > summary:hover { background: var(--surface-2); }
.drop-card > summary .chev { transition: transform .18s; color: var(--text-muted); }
.drop-card[open] > summary .chev { transform: rotate(180deg); }
.drop-card > summary .spacer { flex: 1; }
.drop-card > summary input { width: 170px; }
.drop-card .table-wrap { border-top: 1px solid var(--hairline); }

/* the two marks a call can carry, drawn rather than typed */
.row-marks { white-space: nowrap; }
.row-marks .ico { color: var(--text-muted); vertical-align: -3px; }
.row-marks .ico + .ico { margin-left: 6px; }
.row-marks .noted { color: var(--c-answered); }
tr:hover .row-marks .ico { color: var(--text-secondary); }
tr:hover .row-marks .noted { color: var(--c-answered); }

/* whose list this lead is on */
.owner-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 3px; border-radius: 20px; font-size: 11.5px;
  border: 1px solid var(--hairline-2); background: var(--surface-2);
  color: var(--text-secondary);
}
.owner-tag .who {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--brand-cyan) 22%, transparent);
  color: var(--text-primary);
}

/* a sortable header has to look clickable, and say which way it is sorted */
.tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl th.sortable:hover { color: var(--text-primary); }
.tbl th.sorted { color: var(--brand-cyan); }

/* ringing and talking are different states and must not read the same */
.live-row .tag { opacity: .75; }
.live-row .tag.talking { opacity: 1; color: var(--ink-answered);
  background: color-mix(in srgb, var(--c-answered) 18%, transparent); }

/* ── the live call, opened as a card ────────────────────────────────────── */
.live-card { border: 1px solid var(--hairline-2); border-radius: var(--r-lg);
             background: var(--surface-2); padding: 14px 16px; max-width: 760px; }
.live-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.live-card-head b { font-size: 13.5px; }
.live-card-head .card-sub { font-size: 11.5px; }
.live-card .live-feed { gap: 10px; }
.live-card .live-turn { font-size: 13.5px; line-height: 1.5; }
.live-card .live-turn i { width: 44px; }

/* the line traces itself once, after the loader clears */
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
.chart-host svg path[fill^="url"] { animation: chart-fade .7s .25s ease-out both; }
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chart-host svg path[fill^="url"] { animation: none; }
}

/* ── results board ──────────────────────────────────────────────────────── */
.board-hint { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; }
.res-board {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 1fr);
  gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start;
}
.res-col {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); display: flex; flex-direction: column;
  max-height: calc(100vh - 300px); transition: border-color .14s, background .14s;
}
.res-col.over { border-color: var(--brand-cyan);
                background: color-mix(in srgb, var(--brand-cyan) 7%, var(--surface-2)); }
.res-col > header {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--hairline); position: sticky; top: 0;
  background: var(--surface-2); border-radius: var(--r-lg) var(--r-lg) 0 0; z-index: 1;
}
.res-col > header .swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.res-col > header b { font-size: 12.5px; }
.res-col > header .n { margin-left: auto; font-family: var(--mono); font-size: 11.5px;
                       color: var(--text-muted); }
.res-col-body { padding: 9px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
                min-height: 90px; }

.res-card {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 11px 12px; cursor: grab;
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.res-card:hover { border-color: var(--hairline-2); box-shadow: var(--shadow); }
.res-card:active { cursor: grabbing; }
.res-card.dragging { opacity: .4; }
.res-card .who { display: flex; align-items: baseline; gap: 7px; }
.res-card .who b { font-size: 13px; }
.res-card .who .mono { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.res-card .co { font-size: 12px; color: var(--text-secondary); margin-top: 2px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-card .foot { display: flex; align-items: center; gap: 8px; margin-top: 10px;
                  font-size: 11px; color: var(--text-muted); }
.res-card .foot .when { margin-left: auto; font-family: var(--mono); font-size: 10.5px; }
/* touch-friendly "move to another verdict" — the drag alternative that works
   on tablet and phone */
.res-move { flex: none; display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px; padding: 0; border: 1px solid var(--hairline);
            border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-secondary);
            cursor: pointer; opacity: .55; transition: opacity .12s, border-color .12s; }
.res-card:hover .res-move, .res-move:focus-visible { opacity: 1; }
.res-move:hover { border-color: var(--brand-cyan); color: var(--brand-cyan); }
.res-move svg { width: 14px; height: 14px; }
@media (hover: none) { .res-move { opacity: 1; } }   /* always visible on touch */
.move-menu { position: fixed; z-index: 70; min-width: 168px; padding: 6px;
             background: var(--surface-1); border: 1px solid var(--hairline-2);
             border-radius: var(--r-md); box-shadow: var(--shadow); }
.move-menu-h { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
               color: var(--text-muted); padding: 4px 8px 6px; }
.move-menu button { display: flex; align-items: center; gap: 9px; width: 100%;
                    padding: 8px 8px; border: 0; background: none; color: var(--text-primary);
                    font: inherit; font-size: 13px; border-radius: var(--r-sm); cursor: pointer;
                    text-align: left; }
.move-menu button:hover { background: var(--surface-3); }
.move-menu .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* there is something written here — the words themselves live in the card */
.res-card .has-note { display: inline-flex; align-items: center; gap: 4px;
                      color: var(--c-answered); font-size: 10.5px; }
.res-card .has-note svg { width: 11px; height: 11px; fill: none; stroke: currentColor;
                          stroke-width: 1.8; stroke-linejoin: round; }

/* whose judgement this is */
.res-card .hand {
  display: inline-flex; align-items: center; gap: 4px; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 7px; border-radius: 20px; font-size: 10.5px;
  background: color-mix(in srgb, var(--brand-cyan) 14%, transparent);
  color: var(--text-secondary);
}

/* moved, and settled — the card does not bounce back and reappear */
.res-card.landed { animation: card-land .35s cubic-bezier(.2,.8,.3,1) both; }
@keyframes card-land {
  from { transform: scale(.96); box-shadow: 0 0 0 2px var(--brand-cyan); }
  to   { transform: none; box-shadow: none; }
}
.res-col-more { text-align: center; font-size: 11.5px; color: var(--text-muted); padding: 6px 0 2px; }

/* ── date range picker ──────────────────────────────────────────────────── */
.range-btn { gap: 8px; font-variant-numeric: tabular-nums; }
.range-btn .chev { opacity: .6; margin-left: -2px; }
.range-btn.open { border-color: var(--brand-cyan); color: var(--text-primary); }

/* fixed, with coordinates set in JS — inside a card, an absolutely positioned
   panel is clipped by the card's own overflow */
.range-panel {
  position: fixed; z-index: 70; display: none; grid-template-columns: 148px 268px;
  background: var(--surface-1); border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.range-panel.open { display: grid; }
@media (max-width: 560px) { .range-panel { grid-template-columns: 1fr; }
                            .range-presets { display: flex; flex-wrap: wrap; } }

.range-presets { padding: 10px; border-right: 1px solid var(--hairline);
                 background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
.range-presets button {
  text-align: left; padding: 8px 10px; border-radius: var(--r-sm); border: 0;
  background: transparent; color: var(--text-secondary); font: inherit; font-size: 12.5px;
  cursor: pointer; transition: background .12s, color .12s;
}
.range-presets button:hover { background: var(--surface-3); color: var(--text-primary); }
.range-presets button.on { background: color-mix(in srgb, var(--brand-cyan) 18%, transparent);
                           color: var(--text-primary); font-weight: 550; }

.range-cal { padding: 12px 14px 13px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-size: 13px; }
.cal-nav { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
           border: 1px solid var(--hairline); background: transparent; cursor: pointer; }
.cal-nav:hover { border-color: var(--hairline-2); background: var(--surface-2); }
.cal-nav svg { width: 15px; height: 15px; fill: none; stroke: var(--text-secondary);
               stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .dow { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--text-muted);
                 text-align: center; padding-bottom: 5px; }
.cal-day {
  height: 30px; border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; transition: background .1s, color .1s;
}
.cal-day:hover:not(:disabled) { background: var(--surface-3); color: var(--text-primary); }
.cal-day.other { color: var(--text-muted); opacity: .45; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--hairline-2); }
.cal-day.in-range { background: color-mix(in srgb, var(--brand-cyan) 14%, transparent);
                    border-radius: 0; color: var(--text-primary); }
.cal-day.edge { background: var(--brand-cyan); color: #06121a; font-weight: 600; }
.cal-day.edge.start { border-radius: 8px 0 0 8px; }
.cal-day.edge.end { border-radius: 0 8px 8px 0; }
.cal-day.edge.start.end { border-radius: 8px; }
.cal-day:disabled { opacity: .3; cursor: default; }

.cal-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cal-times label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px;
                   letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.cal-read { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--text-secondary); }
.cal-read b { color: var(--brand-cyan); font-weight: 500; }
.cal-foot { display: flex; gap: 8px; margin-top: 12px; }
.cal-foot .btn { flex: 1; justify-content: center; }

/* ── the permission editor ───────────────────────────────────────────────── */
/* An explicit height, not just a ceiling: with only a max-height the two panes
   both ask to grow and the modal ends up taller than anything inside it. */
.modal.wide {
  width: min(980px, calc(100% - 28px));
  height: min(680px, calc(100vh - 80px));
  padding: 0; display: flex; flex-direction: column; overflow: hidden;
}
.modal.wide .modal-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--hairline); }
/* column, not row: the footer sits under the split, not beside it */
.modal.wide #modal-body { margin: 0; overflow: hidden; flex: 1; min-height: 0;
                          display: flex; flex-direction: column; }

.person-split { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
                flex: 1; min-height: 0; }
@media (max-width: 860px) { .person-split { grid-template-columns: 1fr; } }
.person-side { padding: 20px 22px; border-right: 1px solid var(--hairline);
               background: var(--surface-2); overflow-y: auto; }
.person-main { padding: 18px 22px 20px; overflow-y: auto; min-height: 0; }

.field-stack { display: flex; flex-direction: column; gap: 13px; }
.field-stack label { display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.field-stack .hint { text-transform: none; letter-spacing: 0; font-size: 11.5px;
                     color: var(--text-muted); margin-top: -1px; }

/* role presets as pills — a preset is a starting point, so it should feel like
   one click rather than a form control */
.role-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.role-pill {
  font-size: 12px; padding: 6px 11px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--hairline-2); background: var(--surface-1); color: var(--text-secondary);
  transition: border-color .14s, color .14s, background .14s;
}
.role-pill:hover { color: var(--text-primary); border-color: var(--text-muted); }
.role-pill.on { background: color-mix(in srgb, var(--brand-cyan) 16%, transparent);
                border-color: var(--brand-cyan); color: var(--text-primary); font-weight: 550; }

.perm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.perm-head h4 { margin: 0; font-size: 13.5px; }
.perm-count { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }

.perm-group { border: 1px solid var(--hairline); border-radius: var(--r-md);
              margin-bottom: 10px; overflow: hidden; background: var(--surface-1); }
.perm-group > header {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--hairline);
}
.perm-group > header b { font-size: 12.5px; }
.perm-group > header p { margin: 1px 0 0; font-size: 11.5px; color: var(--text-muted); }
.perm-group .group-all {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--hairline-2); background: transparent; color: var(--text-muted);
}
.perm-group .group-all:hover { color: var(--text-primary); border-color: var(--text-muted); }
.perm-list { padding: 4px 0; }

/* one row, one thing it may do; the whole row is the hit target */
.perm {
  position: relative;   /* contain the absolute checkbox to its own row, so focusing
                           it never scroll-jumps the modal to the top and blanks it */
  display: flex; align-items: center; gap: 11px; padding: 8px 14px; cursor: pointer;
  font-size: 13px; color: var(--text-secondary); transition: background .12s, color .12s;
}
.perm:hover { background: var(--surface-2); color: var(--text-primary); }
.perm input { position: absolute; opacity: 0; pointer-events: none; }
.perm .box {
  flex: none; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--hairline-2); background: var(--surface-1);
  display: grid; place-items: center; transition: background .14s, border-color .14s;
}
.perm .box svg { width: 11px; height: 11px; stroke: var(--plane); stroke-width: 3;
                 fill: none; stroke-linecap: round; stroke-linejoin: round;
                 opacity: 0; transform: scale(.6); transition: opacity .14s, transform .14s; }
.perm input:checked + .box { background: var(--brand-cyan); border-color: var(--brand-cyan); }
.perm input:checked + .box svg { opacity: 1; transform: none; }
.perm input:focus-visible + .box { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
.perm input:checked ~ .perm-label { color: var(--text-primary); }
.perm input:disabled + .box { opacity: .45; }
.perm:has(input:disabled) { cursor: not-allowed; }

.modal-foot {
  display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  border-top: 1px solid var(--hairline); background: var(--surface-2);
}
.modal-foot .spacer { flex: 1; }
.modal-foot .summary { font-size: 12.5px; color: var(--text-muted); }
.modal-foot .summary b { color: var(--text-primary); }

/* the roles reference, opened on demand rather than sitting on the page */
.role-ref { display: flex; flex-direction: column; gap: 8px; }
.role-ref .row-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
                      border-bottom: 1px solid var(--line-faint); }
.role-ref .row-item:last-child { border-bottom: 0; }
.role-ref b { font-size: 13px; min-width: 128px; }
.role-ref span { font-size: 12.5px; color: var(--text-muted); flex: 1; }
.role-ref .n { font-family: var(--mono); font-size: 11.5px; color: var(--brand-cyan); }

.cap-editor { max-height: 46vh; overflow-y: auto; margin-top: 6px; padding-right: 4px; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--surface-2); }
.tbl tr.dim td { opacity: .5; }

.profile-head { display: flex; align-items: center; gap: 16px; }
.cap-group { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px 14px;
             margin-bottom: 9px; background: var(--surface-2); }
.cap-group h4 { margin: 0 0 2px; font-size: 13px; }
.cap-group p { margin: 0 0 9px; font-size: 12px; color: var(--text-muted); }
.cap-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 12.5px; }
.cap-row input { width: 15px; height: 15px; accent-color: var(--c-dials); cursor: pointer; }
.cap-row.has { color: var(--text-primary); }
.cap-row.hasnt { color: var(--text-muted); }
.cap-row .mark { width: 14px; text-align: center; font-size: 12px; }

/* ── loading ─────────────────────────────────────────────────
   A drop of fuel filling, in the brand cyan. It only appears once a
   fetch has been slow enough to notice, so quick pages never flash.  */
/* Fixed, not absolute: `.main` is as tall as its content, so on a long call log
   the centre of that box is hundreds of pixels below the fold and the mark
   appeared near the bottom of the screen. Anchored to the viewport it is always
   in the middle of what the person is actually looking at. */
.page-loader {
  position: fixed; top: 0; right: 0; bottom: 0; left: var(--sidebar-w);
  z-index: 20; display: grid; place-items: center;
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.page-loader.on { opacity: 1; pointer-events: auto; }

/* Everything is centred on one column. The mark used to sit inside a block as
   wide as the caption, which pushed it off to the left of its own text. */
.loader-inner {
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(6px) scale(.96); opacity: .5;
  transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .26s;
}
.page-loader.on .loader-inner { transform: none; opacity: 1; }

.loader-mark { width: 104px; height: 104px; overflow: visible; display: block; }

.loader-orbit {
  fill: none; stroke: var(--brand-cyan); stroke-width: 1.5; opacity: .35;
  stroke-dasharray: 3 12; stroke-linecap: round;
  transform-origin: 60px 60px;
  animation: orbit 7s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }

/* the drop is a steady outline — never a dash that can be caught mid-draw
   looking like a broken shape */
.loader-drop {
  fill: color-mix(in srgb, var(--brand-cyan) 8%, transparent);
  stroke: var(--brand-cyan); stroke-width: 2.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--brand-cyan) 35%, transparent));
}

/* the liquid: a wave that travels sideways, on a body that rises and falls */
.loader-liquid { fill: var(--brand-cyan); opacity: .85; }
.loader-lift { animation: lift 2.6s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes lift {
  from { transform: translateY(74px); }
  to   { transform: translateY(-6px); }
}

.loader-brand {
  margin-top: 20px; font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text-primary); line-height: 1;
}
.loader-brand b { color: var(--brand-cyan); font-weight: 700; }

.loader-note {
  margin-top: 7px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted);
}

/* an indeterminate rail: it says "working", never a false percentage */
.loader-track {
  margin-top: 16px; width: 132px; height: 2px; border-radius: 2px;
  background: var(--surface-3); overflow: hidden;
}
.loader-track i {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand-cyan) 20%, transparent), var(--brand-cyan));
  animation: rail 1.15s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes rail {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

@media (prefers-reduced-motion: reduce) {
  .loader-orbit, .loader-lift, .loader-track i { animation: none; }
  .loader-lift { transform: translateY(30px); }
}

/* the thin line across the top, for the fast ones */
.top-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brand-cyan), color-mix(in srgb, var(--brand-cyan) 40%, transparent));
  z-index: 60; opacity: 0; transition: width .2s ease-out, opacity .25s;
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-cyan) 60%, transparent);
}
.top-progress.on { opacity: 1; }

/* skeletons, so a table does not jump when it fills */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── experiments ─────────────────────────────────────────── */
.verdict { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px;
           border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--surface-2); }
.verdict .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.verdict.clear .badge { background: color-mix(in srgb, var(--c-answered) 18%, transparent); color: var(--ink-answered); }
.verdict.leaning .badge { background: color-mix(in srgb, var(--c-voicemail) 18%, transparent); color: var(--ink-voicemail); }
.verdict.tie .badge, .verdict.early .badge { background: var(--surface-3); color: var(--text-secondary); }
.verdict p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.verdict b { color: var(--text-primary); }
.bar-compare { display: flex; align-items: center; gap: 8px; }
.bar-compare .track { flex: 1; height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.bar-compare .track i { display: block; height: 100%; background: var(--c-dials); }

/* ── coach ───────────────────────────────────────────────── */
.finding { border: 1px solid var(--hairline); border-radius: var(--r-md);
           background: var(--surface-2); margin-bottom: 10px; overflow: hidden; }
.finding-head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; }
.finding-head:hover { background: var(--surface-3); }
.finding-bar { height: 5px; background: var(--surface-3); }
.finding-bar i { display: block; height: 100%; background: var(--c-failed); }
.finding-count { font-family: var(--mono); font-size: 18px; font-weight: 650; min-width: 46px; }
.finding-share { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); min-width: 48px; }
.finding-label { flex: 1; font-size: 13.5px; font-weight: 550; }
.finding-body { display: none; padding: 0 15px 15px; }
.finding.open .finding-body { display: block; }
.finding-why { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 4px 0 12px; }
.finding pre {
  font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 12px; margin: 0; color: var(--text-primary); overflow-x: auto;
}
.example { display: flex; gap: 9px; align-items: baseline; padding: 5px 0; font-size: 12.5px; cursor: pointer; }
.example:hover .said { color: var(--text-primary); }
.example .said { color: var(--text-secondary); }
.opener { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; font-size: 12.5px; }
.opener .n { font-family: var(--mono); font-size: 11px; color: var(--text-muted); min-width: 22px; }

/* ── deal board ──────────────────────────────────────────── */
.board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px;
         align-items: start; overflow-x: auto; padding-bottom: 8px; }
@media (max-width: 1280px) { .board { grid-template-columns: repeat(3, minmax(230px, 1fr)); } }
@media (max-width: 820px)  { .board { grid-template-columns: 1fr; } }
/* Room at the foot of the last column so the floating + never sits on a card. */
.board .column:last-child { padding-bottom: 78px; }
.column { background: var(--surface-2); border: 1px solid var(--hairline);
          border-radius: var(--r-lg); padding: 11px; min-height: 150px;
          transition: border-color .14s, background .14s; }
.column.drop { border-color: var(--c-dials);
               background: color-mix(in srgb, var(--c-dials) 8%, var(--surface-2)); }
.column-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.column-head b { font-size: 12.5px; font-weight: 640; }
.column-head .n { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-left: auto; }
.stage-dot { width: 7px; height: 7px; border-radius: 50%; }
.deal {
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 11px 12px; margin-bottom: 9px; cursor: grab;
  transition: border-color .14s, transform .08s;
}
.deal:hover { border-color: var(--hairline-2); }
.deal:active { cursor: grabbing; transform: scale(.995); }
.deal.dragging { opacity: .45; }
.deal b { display: block; font-size: 13px; font-weight: 620; }
.deal .co { font-size: 11.5px; color: var(--text-muted); margin-top: 1px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal .meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.deal .due { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); }
.deal .due.late { color: var(--critical); font-weight: 600; }
.deal .who { font-size: 10.5px; color: var(--text-secondary); margin-left: auto; }
.column .empty { padding: 16px 8px; font-size: 12px; }

/* ── live calls: who is on the line and what is being said ─ */
/* Bounded on purpose: at seventeen live calls an unbounded list grows the page
   under the reader and every new call pushes what they were looking at down. */
/* Three calls, then scroll. At fourteen live conversations an unbounded list
   grows the page under the reader and pushes what they were looking at away. */
.live-list {
  display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto; overscroll-behavior: contain;
  max-height: 228px; scrollbar-gutter: stable;
}
.live-row {
  display: flex; flex-direction: column; gap: 8px; padding: 11px 12px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-md); animation: slide-in .25s ease-out; cursor: pointer;
  transition: border-color .14s;
}
.live-row:hover { border-color: var(--hairline-2); }
/* a card that has ended fades out instead of disappearing mid-sentence */
.live-row.leaving { animation: live-leave .25s ease-in forwards; pointer-events: none; }
@keyframes live-leave { to { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .live-row { animation: none; }
  .live-row.leaving { animation: none; opacity: 0; }
}
@keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.live-top { display: flex; align-items: center; gap: 11px; }
.live-row .who { min-width: 0; flex: 1; }
.live-row .who b { display: block; font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-row .who span { font-size: 11.5px; color: var(--text-muted); }

/* The conversation, on demand. Fourteen transcripts all growing at once is a
   wall of moving text; the words are there when the reader points at the call
   they care about, and the pulse on the left says the line is alive meanwhile. */
.live-feed {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 0; overflow: hidden; opacity: 0;
  border-top: 1px solid transparent; padding-top: 0;
  transition: max-height .22s ease, opacity .18s ease, padding-top .22s ease;
  mask-image: linear-gradient(transparent, #000 22px);
}
/* Opened deliberately, in the card. A row that unfolds under the pointer moves
   the two rows below it every time the mouse crosses the panel. */
.live-feed.open {
  max-height: 420px; opacity: 1; padding-top: 8px;
  border-top-color: transparent; overflow-y: auto; mask-image: none;
}
/* something has been said, and you are not looking at it */
.live-row .said-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-answered);
  opacity: 0; transition: opacity .2s;
}
.live-row.has-words .said-dot { opacity: .85; }
.live-row:hover .said-dot { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .live-feed { transition: none; } }
.live-turn { font-size: 12.5px; line-height: 1.45; display: flex; gap: 7px;
             animation: turn-in .22s ease-out; }
.live-turn i {
  font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); flex: none; width: 34px; padding-top: 2px;
}
.live-turn.agent i { color: var(--c-dials); }
.live-turn.customer i { color: var(--c-answered); }
.live-turn p { margin: 0; color: var(--text-secondary); }
.live-turn.customer p { color: var(--text-primary); }
@keyframes turn-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.live-waiting { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.live-waiting b { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted);
                  animation: blink-dot 1.2s infinite; }
.live-waiting b:nth-child(2) { animation-delay: .2s; }
.live-waiting b:nth-child(3) { animation-delay: .4s; }
@keyframes blink-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.wave { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.wave i { width: 2.5px; background: var(--c-answered); border-radius: 2px; animation: wv .9s ease-in-out infinite; }
.wave i:nth-child(1) { height: 40%; animation-delay: 0s; }
.wave i:nth-child(2) { height: 85%; animation-delay: .12s; }
.wave i:nth-child(3) { height: 60%; animation-delay: .24s; }
.wave i:nth-child(4) { height: 100%; animation-delay: .36s; }
@keyframes wv { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* ── charts ──────────────────────────────────────────────── */
.chart-host { position: relative; width: 100%; }
.chart-host svg { display: block; width: 100%; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.legend .item { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 9px; height: 9px; border-radius: 2px; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 40; opacity: 0;
  background: var(--tooltip-bg); border: 1px solid var(--hairline-2); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); transition: opacity .1s;
  min-width: 120px;
}
.tooltip .t-title { font-weight: 600; margin-bottom: 5px; font-size: 11.5px; color: var(--text-secondary); }
.tooltip .t-row { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.tooltip .t-row b { font-variant-numeric: tabular-nums; }

/* ── sheet: the one way detail opens, centred and large ──── */
.sheet {
  position: fixed; z-index: 51; inset: 0; margin: auto;
  width: min(1080px, calc(100vw - 48px));
  height: min(860px, calc(100vh - 56px));
  background: var(--surface-1); border: 1px solid var(--hairline-2);
  border-radius: 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(10px) scale(.99);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.75,.3,1);
}
.sheet.open { opacity: 1; pointer-events: auto; transform: none; }

/* ── detail drawer: slide in from the right over a modal ─────────────────── */
.sheet.sheet-drawer {
  z-index: 60;                       /* above the modal (52) it slides over */
  inset: 14px 14px 14px auto;        /* anchor to the right edge, full height */
  margin: 0;
  width: min(720px, calc(100vw - 40px));
  height: auto;
  opacity: 1;                        /* the slide is the reveal, not a fade */
  transform: translateX(calc(100% + 28px));
  transition: transform .42s cubic-bezier(.22,.85,.26,1);
  box-shadow: -24px 0 60px -20px rgba(0,0,0,.45), var(--shadow);
}
.sheet.sheet-drawer.open { transform: translateX(0); }
/* the back arrow only exists in drawer mode */
.sheet-back { display: none; }
.sheet.sheet-drawer .sheet-back { display: inline-flex; }
.sheet.sheet-drawer .sheet-back .ico { width: 18px; height: 18px; }
@media (max-width: 720px) {
  .sheet { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
  .sheet.sheet-drawer { inset: 0; width: 100vw; border-radius: 0; }
  .modal.open.shifted { transform: translate(-50%, -50%) scale(.9); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet.sheet-drawer { transition: none; }
  .modal.open { transition: none; }
}

.sheet-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px 15px; border-bottom: 1px solid var(--hairline);
  background: var(--surface-1);
}
.sheet-avatar {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-weight: 650; font-size: 16px;
  background: var(--surface-3); color: var(--text-secondary);
  object-fit: cover; overflow: hidden;
}
.sheet-title { font-size: 18px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.sheet-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.sheet-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.sheet-head .spacer { flex: 1; }

.sheet-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--hairline);
              background: var(--surface-1); }
.sheet-tab {
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
  padding: 10px 13px; font-size: 13px; font-weight: 550; position: relative;
}
.sheet-tab:hover { color: var(--text-primary); }
.sheet-tab.on { color: var(--text-primary); }
.sheet-tab.on::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--c-dials); border-radius: 2px;
}
.sheet-body { flex: 1; overflow-y: auto; padding: 20px 22px 26px; }
.sheet-pane { display: none; }
.sheet-pane.on { display: block; }
.sheet-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .sheet-cols { grid-template-columns: 1fr; } }
.sheet-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 22px; border-top: 1px solid var(--hairline); background: var(--surface-2);
}

.block { border: 1px solid var(--hairline); border-radius: var(--r-md);
         background: var(--surface-2); padding: 14px 16px; margin-bottom: 14px; }
.row-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-fields label { display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.row-fields .input { text-transform: none; letter-spacing: normal; font-size: 13.5px;
  color: var(--text-primary); }
.block-title { font-size: 12px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase;
               color: var(--text-muted); margin-bottom: 10px; }

/* expandable charts */
.chart-expand { position: fixed; z-index: 51; inset: 0; margin: auto;
  width: min(1240px, calc(100vw - 48px)); height: min(760px, calc(100vh - 56px));
  background: var(--surface-1); border: 1px solid var(--hairline-2); border-radius: 18px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none; transform: scale(.99); transition: opacity .18s, transform .18s; }
.chart-expand.open { opacity: 1; pointer-events: auto; transform: none; }
.chart-expand .body { flex: 1; padding: 20px 24px 26px; overflow: auto; }
.btn-expand { opacity: .5; transition: opacity .14s; }
.card:hover .btn-expand { opacity: 1; }

/* ── drawer & modal ──────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; background: var(--overlay); z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity .18s;
  backdrop-filter: blur(2px);
}
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--surface-1); border-left: 1px solid var(--hairline);
  z-index: 51; transform: translateX(100%); transition: transform .22s cubic-bezier(.3,.8,.4,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { padding: 16px 18px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 10px; }
.drawer-body { padding: 18px; overflow-y: auto; flex: 1; }
.modal {
  position: fixed; z-index: 52; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.98);
  width: min(560px, calc(100% - 32px)); max-height: 86vh; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
  transition: opacity .28s, transform .34s cubic-bezier(.22,.8,.28,1); }
/* Detail-drawer is open over this modal → it slides left and dims, giving the
   drawer room and a sense of depth behind it. */
.modal.open.shifted { transform: translate(calc(-50% - 200px), -50%) scale(.93);
  opacity: .5; filter: saturate(.85); }
.modal h3 { margin: 0 0 4px; font-size: 16px; }
.modal .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.kv { display: grid; grid-template-columns: 118px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }

.transcript { display: flex; flex-direction: column; gap: 9px; }
.bubble { padding: 9px 12px; border-radius: 12px; max-width: 88%; font-size: 13px; line-height: 1.5; }
.bubble.ai { background: var(--surface-3); border-bottom-left-radius: 3px; }
.bubble.human { background: color-mix(in srgb, var(--c-dials) 16%, transparent); align-self: flex-end; border-bottom-right-radius: 3px; }
.bubble .role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 3px; }

.dropzone {
  border: 1.5px dashed var(--hairline-2); border-radius: var(--r-md);
  padding: 26px; text-align: center; color: var(--text-secondary); cursor: pointer;
  transition: border-color .14s, background .14s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--c-dials); background: rgba(57,135,229,.07); }

/* import: where it lands + the accepted format */
.imp-target { font-size: 12.5px; color: var(--text-secondary); background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 13px; margin-bottom: 12px; }
.imp-target.warn { color: #e0a106; border-color: color-mix(in srgb, #e0a106 35%, transparent);
  background: color-mix(in srgb, #e0a106 8%, var(--surface-2)); }
.imp-target b { color: var(--text-primary); }
.imp-fmt { margin-top: 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-1); }
.imp-fmt > summary { cursor: pointer; padding: 10px 13px; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); list-style: none; }
.imp-fmt > summary::-webkit-details-marker { display: none; }
.imp-fmt[open] > summary { border-bottom: 1px solid var(--hairline); color: var(--text-primary); }
.imp-fmt-body { padding: 12px 13px; }
.imp-fmt-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.imp-fmt-tbl td { padding: 5px 6px; border-bottom: 1px solid var(--line-faint); vertical-align: top;
  color: var(--text-secondary); }
.imp-fmt-tbl tr:last-child td { border-bottom: 0; }
.imp-fmt-tbl td:first-child { white-space: nowrap; color: var(--text-primary); font-weight: 600; }
.imp-fmt-tbl .req { color: #e5686d; font-size: 10px; font-weight: 700; margin-left: 5px;
  text-transform: uppercase; letter-spacing: .03em; }
.imp-fmt-tbl .opt { color: var(--text-muted); font-weight: 400; }
.imp-fmt-note { font-size: 11.5px; color: var(--text-muted); margin: 11px 0; line-height: 1.55; }
.imp-fmt-note code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; font-size: 11px; }

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--surface-3); border: 1px solid var(--hairline-2); border-left: 3px solid var(--c-dials);
  border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; box-shadow: var(--shadow);
  animation: slide-in .2s ease-out; max-width: 340px;
}
.toast.err { border-left-color: var(--critical); }
.toast.ok { border-left-color: var(--good); }

.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); }
.bar-track { height: 6px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--c-dials); transition: width .3s; }

.progress-lines { display: flex; flex-direction: column; gap: 11px; }
.progress-line .top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1100px 520px at 50% -8%, rgba(57,135,229,.13), transparent 62%), var(--plane); }
.login-card { width: min(380px, 100%); background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 30px; box-shadow: var(--shadow); }

@media (max-width: 1080px) {
  :root { --sidebar-w: 0px; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; flex-direction: row; align-items: center;
    overflow-x: auto; padding: 10px; }
  .sidebar .nav-group, .sidebar-foot { display: none; }
  .nav-item { width: auto; white-space: nowrap; }
}

/* ── one prequalifier at a time ──────────────────────────────────────────── */
/* Sits in the Results toolbar beside the date range and reads as part of it:
   the same height and border, the icon carrying the meaning so the control
   does not need a label taking up room. */
.owner-pick {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 4px 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text-secondary);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.owner-pick:hover { border-color: var(--brand-cyan); color: var(--text-primary); }
.owner-pick .ico { opacity: .8; flex: none; }
.owner-select {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; color: inherit;
  padding: 0 22px 0 0; max-width: 168px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 9px center, right 4px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.owner-select:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
/* A chosen name is a filter in force, and a filter in force must be visible.
   The class is set in JS: a select's `value` attribute does not change when the
   user picks an option, only its property does, so CSS cannot see it. */
.owner-pick.picked {
  border-color: var(--brand-cyan);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--brand-cyan) 10%, var(--surface-2));
}

/* ── nothing is shown before we know who is looking ──────────────────────── */
/* Every control that depends on a permission is hidden until /api/auth/me has
   answered and paintMe has marked the shell ready. Without this, a refresh drew
   the full sidebar — Deals, Inbound, People & access, Compliance — to whoever
   opened the page, and only took them away a second later. A prequalifier
   should never see an owner's console, not even for a second. */
.shell:not(.caps-ready) [data-cap] { display: none !important; }

/* The one role that can never be taken back looks like it. */
.role-pill-danger { border-color: color-mix(in srgb, var(--c-failed) 45%, var(--border)); }
.role-pill-danger.on {
  background: color-mix(in srgb, var(--c-failed) 16%, transparent);
  border-color: var(--c-failed);
  color: var(--ink-failed, var(--c-failed));
}

/* The one role that can never be taken back looks like it. */
.role-pill-danger { border-color: color-mix(in srgb, var(--c-failed) 45%, var(--border)); }
.role-pill-danger.on {
  background: color-mix(in srgb, var(--c-failed) 16%, transparent);
  border-color: var(--c-failed);
  color: var(--ink-failed, var(--c-failed));
}

/* ── conversations over a minute: who worked them ───────────────────────── */
/* Opens on the "Talked 60s+" tile. Two numbers first, because the question is
   "did anybody read these"; the per-person detail sits under them, one row per
   person so a name and its numbers are read together instead of across three
   far-apart columns. */
.hw { display: flex; flex-direction: column; gap: 20px; }

.hw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hw-stat {
  padding: 14px 16px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.hw-stat.hw-open {
  background: color-mix(in srgb, var(--c-talk) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-talk) 32%, transparent);
}
.hw-n {
  font-size: 30px; font-weight: 650; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.hw-k { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.hw-s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Thin, not a slab: it states a proportion, it is not the subject. */
.hw-meter {
  height: 6px; border-radius: 99px; overflow: hidden;
  background: var(--surface-3); margin-top: -8px;
}
.hw-meter span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--c-answered);
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}

.hw-block { display: flex; flex-direction: column; gap: 12px; }
.hw-title {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}

.hw-row { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; align-items: baseline; }
.hw-who {
  font-size: 13.5px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hw-counts { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hw-counts b { color: var(--text-primary); }
.hw-talk { color: var(--text-muted); font-size: 11.5px; margin-left: 8px; }
.hw-share { grid-column: 2; height: 4px; border-radius: 99px; background: var(--surface-3); }
.hw-share span {
  display: block; height: 100%; border-radius: 99px;
  background: color-mix(in srgb, var(--c-answered) 65%, transparent);
}

.hw-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.hw-foot {
  font-size: 12.5px; color: var(--text-secondary);
  padding-top: 14px; border-top: 1px solid var(--border);
}
.hw-foot b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hw-cta { width: 100%; justify-content: center; }

@media (max-width: 520px) {
  .hw-split { grid-template-columns: 1fr; }
  .hw-row { grid-template-columns: 1fr; }
  .hw-share { grid-column: 1; }
}

/* Row numbers in the call log. Quiet by design: they are a way to say "the
   third one down", not data — so they sit in the muted ink and never compete
   with the name beside them. The header cell keeps the column narrow. */
.tbl th.rownum, .tbl td.rownum {
  width: 1%; white-space: nowrap; text-align: right;
  padding-right: 14px;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.tbl tr:hover > td.rownum { color: var(--text-secondary); }

/* ── DealCloser test ─────────────────────────────────────────────────────── */
/* Two columns: the form you fill in, and what is happening because you did.
   The form is narrow on purpose — four short fields and one button, so there is
   never a doubt about what pressing it will do. */
.tb-grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 14px; align-items: start; }

.tb-dial { display: flex; flex-direction: column; gap: 14px; }
.tb-dial .fld { display: flex; flex-direction: column; gap: 5px; }
.tb-dial .fld > span:first-child {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.tb-dial .fld > span:first-child em {
  font-style: normal; text-transform: none; letter-spacing: 0; opacity: .65;
}
.tb-dial .hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.tb-go { justify-content: center; height: 40px; font-size: 14px; }
.tb-line { font-size: 11.5px; color: var(--text-muted); text-align: center; min-height: 16px; }

/* The live panel is the reason the page exists, so it is the loudest thing on
   it while a call is up and plain text when it is not. */
.tb-live { min-height: 260px; }
.tb-live-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tb-ring {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--c-dials);
  background: color-mix(in srgb, var(--c-dials) 14%, transparent);
}
.tb-ring.talking { color: var(--c-answered); background: color-mix(in srgb, var(--c-answered) 16%, transparent); }
.tb-ring.talking::after {
  content: ""; position: absolute; width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--c-answered); animation: tb-pulse 1.8s ease-out infinite;
}
@keyframes tb-pulse {
  from { transform: scale(1); opacity: .55; }
  to   { transform: scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tb-ring.talking::after { animation: none; opacity: .3; } }
.tb-ring-wrap { position: relative; display: grid; place-items: center; }

.tb-who { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.tb-meta { font-size: 12.5px; color: var(--text-secondary); }
.tb-clock {
  margin-left: auto; font-size: 22px; font-variant-numeric: tabular-nums;
  color: var(--text-primary); font-weight: 600;
}

/* One transcript, growing. Reused for the history rows so a finished test reads
   exactly like a live one. */
.tb-feed {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 320px; overflow-y: auto; padding-right: 4px;
}
.tb-turn { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; }
.tb-turn .tag {
  flex: none; height: 19px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.tb-turn.agent .tag { background: color-mix(in srgb, var(--brand-cyan) 16%, transparent); color: var(--brand-cyan); }
.tb-turn.them .tag { background: color-mix(in srgb, var(--c-answered) 16%, transparent); color: var(--ink-answered); }
.tb-turn p { margin: 0; color: var(--text-primary); }

/* History: one row per test, opening onto its transcript and its notes. */
.tb-item { border-top: 1px solid var(--border); }
.tb-item:first-child { border-top: 0; }
.tb-sum {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px;
  align-items: center; padding: 13px 2px; cursor: pointer;
}
.tb-sum:hover { background: var(--surface-2); }
.tb-sum h4 { margin: 0; font-size: 13.5px; font-weight: 600; }
.tb-sum .sub { grid-column: 1; font-size: 11.5px; color: var(--text-muted); }
.tb-sum .dur { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-secondary); }
.tb-body { padding: 4px 2px 18px; display: none; flex-direction: column; gap: 16px; }
.tb-item.open .tb-body { display: flex; }
.tb-item.open .tb-sum { background: var(--surface-2); }

/* Writing down what you thought. Deliberately close to the transcript. */
.tb-note-form { display: flex; flex-direction: column; gap: 9px; }
.tb-verdicts { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-verdict {
  padding: 5px 12px; border-radius: 20px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary);
}
.tb-verdict.on[data-verdict="good"]  { border-color: var(--c-answered); color: var(--ink-answered);
  background: color-mix(in srgb, var(--c-answered) 14%, transparent); }
.tb-verdict.on[data-verdict="mixed"] { border-color: var(--c-voicemail); color: var(--ink-voicemail, var(--c-voicemail));
  background: color-mix(in srgb, var(--c-voicemail) 14%, transparent); }
.tb-verdict.on[data-verdict="bad"]   { border-color: var(--c-failed); color: var(--ink-failed);
  background: color-mix(in srgb, var(--c-failed) 14%, transparent); }

.tb-notes { display: flex; flex-direction: column; gap: 10px; }
.tb-note {
  padding: 11px 13px; border-radius: 9px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 13px; line-height: 1.55;
}
.tb-note .who { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.tb-note.good  { border-left: 3px solid var(--c-answered); }
.tb-note.mixed { border-left: 3px solid var(--c-voicemail); }
.tb-note.bad   { border-left: 3px solid var(--c-failed); }

@media (max-width: 900px) {
  .tb-grid { grid-template-columns: 1fr; }
  .tb-clock { margin-left: 0; }
}

/* A quiet link inside a form — for the thing you do once, not every visit. */
.link-btn {
  align-self: flex-start; background: none; border: 0; padding: 0;
  font: inherit; font-size: 11.5px; text-transform: none; letter-spacing: 0;
  color: var(--brand-cyan); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--text-primary); }

/* ── the number beside the number ────────────────────────────────────────── */
/* A rate needs its count and a count needs its rate: "16.8%" says nothing about
   how many people that is, and "30 interested" says nothing about whether that
   is good. The pair sits on one line, the headline figure keeping its size and
   the counterpart deliberately smaller and to the right so it reads second. */
.kpi-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.kpi-aside { text-align: right; line-height: 1.15; padding-bottom: 3px; }
.kpi-aside-v {
  display: block; font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.kpi-aside-k {
  display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 1px;
}
.kpi:hover .kpi-aside-v { color: var(--text-primary); }

/* The person form must always be reachable. Each column scrolls on its own, and
   the body scrolls too as a last resort — a modal taller than a short window
   used to hide its lower half with no way to get to it. */
.modal.wide #modal-body { overflow-y: auto; }
.person-split { min-height: 0; }
.person-side, .person-main { min-height: 0; overscroll-behavior: contain; }
/* A drop lands anywhere on the column, so the whole column shows it is armed. */
.res-col.over { outline: 2px solid var(--brand-cyan); outline-offset: -2px; }

/* Parked for later — its own colour, so it is never read as a win or a loss. */
.tag.future_contact {
  background: color-mix(in srgb, var(--c-noanswer) 18%, transparent);
  color: var(--ink-noanswer, var(--c-noanswer));
}

/* ── replies ─────────────────────────────────────────────────────────────── */
/* One row per message, read like a line in a conversation rather than a cell in
   a table: who, what they said, and whether anybody has dealt with it. */
.msg {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px;
  padding: 14px 4px; border-top: 1px solid var(--border); cursor: pointer;
}
.msg:first-child { border-top: 0; }
.msg:hover { background: var(--surface-2); }
.msg-chan {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-muted);
}
.msg-chan .ico { width: 15px; height: 15px; }
.msg-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.msg-top b { font-size: 13.5px; }
.msg-sub { font-size: 11.5px; color: var(--text-muted); }
.msg-when { margin-left: auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.msg-subject { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-top: 3px; }
.msg-body {
  margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-primary);
  white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.msg-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* An unanswered reply is the most valuable thing on the page, so it is the only
   row that carries a mark. Everything else stays quiet. */
.msg.unread { background: color-mix(in srgb, var(--c-talk) 6%, transparent); }
.msg.unread .msg-chan {
  background: color-mix(in srgb, var(--c-talk) 18%, transparent);
  color: var(--ink-talk, var(--c-talk));
}
.msg.unread .msg-top b::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-talk); margin-right: 7px; vertical-align: 1px;
}

/* ── reading one message ─────────────────────────────────────────────────── */
.mv { display: flex; flex-direction: column; gap: 16px; }
.mv-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.mv-who { font-size: 15px; font-weight: 600; }
.mv-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mv-tags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
/* The words, exactly as they were written — line breaks kept, nothing clamped. */
.mv-body {
  font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere;
  padding: 16px 18px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  max-height: 46vh; overflow-y: auto;
}
.mv-files { display: flex; flex-direction: column; gap: 7px; }
.mv-file {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 9px 12px; border-radius: 8px; font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary);
}
.mv-file:hover { border-color: var(--brand-cyan); }
.mv-file b { margin-left: auto; font-weight: 500; color: var(--text-muted); font-size: 11.5px; }
.mv-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── attaching, in the composer ──────────────────────────────────────────── */
.em-attach {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
  border: 1px dashed var(--border); color: var(--text-secondary);
  text-transform: none; letter-spacing: 0;
}
.em-attach:hover { border-color: var(--brand-cyan); color: var(--text-primary); }
.em-files { display: flex; flex-wrap: wrap; gap: 7px; }
.em-file {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  padding: 4px 6px 4px 10px; border-radius: 20px;
  background: var(--surface-3); color: var(--text-secondary);
}
.em-file b { font-weight: 500; color: var(--text-muted); }
.em-file button {
  border: 0; background: none; cursor: pointer; color: var(--text-muted);
  font-size: 15px; line-height: 1; padding: 0 4px;
}
.em-file button:hover { color: var(--c-failed); }

/* The company literature that rides on every copy of the standing letter. It
   reads as settled rather than as something you chose, because it is. */
.em-standing {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--text-muted); padding: 2px 0 2px;
}
.em-file-fixed { padding-right: 10px; background: var(--surface-2); }

/* Each message is its own card. A hairline between rows was fine for a table of
   numbers; a page of paragraphs needs the border to say where one message stops
   and the next begins. */
#inbox-list { display: flex; flex-direction: column; gap: 10px; }
#inbox-list .msg {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 15px 16px; background: var(--surface);
  transition: border-color .15s ease, transform .12s ease;
}
#inbox-list .msg:hover { border-color: var(--brand-cyan); transform: translateY(-1px); }
#inbox-list .msg.unread { border-left: 3px solid var(--c-talk); }

/* ── picking the carrier before writing to them ──────────────────────────── */
.em { display: flex; flex-direction: column; gap: 14px; }
.em-search {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2);
}
.em-search .ico { color: var(--text-muted); flex: none; }
.em-search input { border: 0; background: none; outline: none; font: inherit;
  color: var(--text-primary); width: 100%; }
.em-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.em-result {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: var(--surface-2); font: inherit;
}
.em-result:hover { border-color: var(--brand-cyan); }
.em-result b { font-size: 13px; color: var(--text-primary); }
.em-result span { font-size: 11.5px; color: var(--text-muted); }
.em-result i { grid-row: 1 / span 2; align-self: center; font-style: normal;
  font-size: 11.5px; color: var(--text-secondary); }
.em-none { font-size: 12.5px; color: var(--text-muted); padding: 8px 2px; }

/* The carrier you are writing to, in front of you while you write. */
.em-lead-card {
  padding: 13px 15px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand-cyan) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--brand-cyan) 28%, transparent);
}
.em-lead-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.em-lead-top b { font-size: 14px; }
.em-lead-top .link-btn { margin-left: auto; }
.em-lead-bits { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 5px;
  font-size: 12px; color: var(--text-secondary); }
.em-lead-bits span:not(:last-child)::after { content: " ·"; color: var(--text-muted); }
.em-lead-warn { margin-top: 6px; font-size: 11.5px; color: var(--ink-voicemail, var(--c-voicemail)); }

/* ── what has been written to this carrier ───────────────────────────────── */
.lead-msgs { display: flex; flex-direction: column; gap: 10px; }
.lead-msg {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: var(--surface-2);
}
.lead-msg.inbound { border-left: 3px solid var(--c-answered); }
.lead-msg.outbound { border-left: 3px solid var(--brand-cyan); }
.lead-msg-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.lead-msg-top b { font-size: 13px; }
.lead-msg-when { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.lead-msg p {
  margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-primary);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.lead-msg-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

/* Which list is about to be dialed — the half of the decision that used to be
   invisible, and the one that put 25,000 old leads in front of a new list. */
.start-target {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--c-answered) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--c-answered) 30%, transparent);
}
.start-target b { font-size: 14.5px; }
.start-label {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.start-target .muted { margin-left: auto; font-size: 12px; }
.start-warn {
  margin: 0 0 12px; padding: 10px 13px; border-radius: 9px; font-size: 12.5px;
  background: color-mix(in srgb, var(--c-voicemail) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-voicemail) 32%, transparent);
  color: var(--ink-voicemail, var(--c-voicemail));
}

/* Admin lead-assignment: the bulk bar over the call log and its checkbox column */
.bulk-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;margin:0 0 12px;
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:10px;font-size:13px}
.bulk-bar .spacer{flex:1}
.tbl th.chk,.tbl td.chk{width:32px;text-align:center;padding-left:12px;padding-right:0}
.tbl .row-chk,#calls-all{width:15px;height:15px;cursor:pointer;accent-color:var(--brand-cyan)}

/* Live dialer status card — why the floor is or isn't calling */
.engine-status{display:flex;align-items:center;gap:14px;padding:14px 18px;margin:0 0 16px;
  border-radius:14px;border:1px solid var(--hairline);background:var(--chart-surface);
  box-shadow:0 1px 3px rgba(20,30,50,.05)}
.engine-status .es-icon{flex:0 0 auto;display:flex;align-items:center}
.engine-status .es-icon svg{width:22px;height:22px;display:block}
.engine-status.level-blocked .es-icon{color:var(--critical)}
.engine-status.level-warn .es-icon{color:#e0a106}
.engine-status.level-idle .es-icon{color:var(--text-muted)}
.engine-status .es-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.engine-status .es-text b{font-size:15px;color:var(--text-primary)}
.engine-status .es-text span{font-size:13px;color:var(--text-muted)}
.engine-status .es-action{margin-left:auto;flex:0 0 auto;font-size:12.5px;font-weight:600;
  padding:7px 13px;border-radius:999px;white-space:nowrap}
.engine-status.level-ok{border-color:color-mix(in srgb,var(--good) 45%,transparent);
  background:color-mix(in srgb,var(--good) 8%,var(--chart-surface))}
.engine-status.level-ok .es-action{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.engine-status.level-warn{border-color:color-mix(in srgb,#e0a106 45%,transparent);
  background:color-mix(in srgb,#e0a106 9%,var(--chart-surface))}
.engine-status.level-warn .es-action{background:color-mix(in srgb,#e0a106 18%,transparent);color:#b45309}
.engine-status.level-blocked{border-color:color-mix(in srgb,var(--critical) 45%,transparent);
  background:color-mix(in srgb,var(--critical) 8%,var(--chart-surface))}
.engine-status.level-blocked .es-action{background:color-mix(in srgb,var(--critical) 16%,transparent);color:var(--critical)}
.engine-status.level-idle .es-action{background:var(--surface-2);color:var(--text-primary)}

/* Spend stats modal — cards + over-time chart */
.spend-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
@media (max-width:620px){.spend-cards{grid-template-columns:repeat(2,1fr)}}
.spend-card{background:var(--surface-2);border:1px solid var(--hairline);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.spend-card.total{background:color-mix(in srgb,var(--c-dials) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--c-dials) 30%,transparent)}
.spend-card > span{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.03em}
.spend-card > b{font-size:22px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.spend-card > small{font-size:11px;color:var(--text-muted)}
.spend-card .sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.spend-chart-head{font-size:12.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin:4px 0 8px}

/* Spend modal v2 — range selector + 5 cards */
.spend-cards{grid-template-columns:repeat(5,1fr)}
@media (max-width:720px){.spend-cards{grid-template-columns:repeat(2,1fr)}}
.spend-ranges{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.spend-range{font-size:12.5px;padding:6px 14px;border-radius:999px;border:1px solid var(--hairline);
  background:var(--surface-2);color:var(--text-secondary);cursor:pointer;transition:all .12s}
.spend-range:hover{border-color:var(--c-dials)}
.spend-range.on{background:var(--c-dials);border-color:var(--c-dials);color:#fff;font-weight:600}
.spend-scope{margin-left:auto;font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}

/* ══ Floor dashboard: welcome hero, leaderboard, daily winner ═══════════════ */
.floor-wrap { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }

/* — the welcome hero — */
.hero-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px; border-radius: var(--r-lg);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--brand-cyan) 16%, var(--surface-1)),
    var(--surface-1) 62%);
  border: 1px solid var(--hairline);
  animation: heroIn .5s cubic-bezier(.2,.9,.3,1.1);
}
.hero-card.winner {
  background: linear-gradient(120deg,
    color-mix(in srgb, #f7c948 22%, var(--surface-1)), var(--surface-1) 66%);
  border-color: color-mix(in srgb, #f7c948 45%, transparent);
}
.hero-glow {
  position: absolute; top: -60%; right: -10%; width: 340px; height: 340px;
  border-radius: 50%; pointer-events: none; opacity: .5;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-cyan) 40%, transparent), transparent 70%);
  animation: heroFloat 9s ease-in-out infinite;
}
.hero-card.winner .hero-glow {
  background: radial-gradient(circle, color-mix(in srgb, #f7c948 55%, transparent), transparent 70%);
}
.hero-main { position: relative; z-index: 1; min-width: 0; }
.hero-hi { font-size: 25px; font-weight: 750; letter-spacing: -.01em; line-height: 1.1; }
.hero-name { color: var(--brand-cyan); }
.hero-card.winner .hero-name { color: #d99e00; }
.hero-wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out 1s 2; }
.hero-sub { margin: 8px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.hero-sub b { color: var(--text-primary); font-weight: 700; }
.fh-rank {
  display: inline-block; margin-top: 11px; font-size: 12px; font-weight: 650;
  padding: 4px 12px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-secondary);
}
.hero-stats { position: relative; z-index: 1; display: flex; gap: 12px; flex: none; }
.fh-stat {
  min-width: 96px; text-align: center; padding: 12px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  border: 1px solid var(--hairline);
}
.fh-stat b { display: block; font-size: 27px; font-weight: 760; line-height: 1;
             font-variant-numeric: tabular-nums; }
.fh-stat span { display: block; margin-top: 5px; font-size: 11px; color: var(--text-muted);
                letter-spacing: .01em; }
.fh-stat.gold b { color: #e0a800; }

/* — the daily-winner strip — */
.trophy-banner {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px;
  border-radius: var(--r-lg); border: 1px solid var(--hairline);
  background: var(--surface-1);
}
.trophy-banner.me {
  background: linear-gradient(100deg, color-mix(in srgb, #f7c948 26%, var(--surface-1)), var(--surface-1));
  border-color: color-mix(in srgb, #f7c948 55%, transparent);
  box-shadow: 0 6px 26px color-mix(in srgb, #f7c948 22%, transparent);
}
.trophy-spin { font-size: 34px; animation: trophySpin 3.2s ease-in-out infinite; }
.trophy-spin.small { font-size: 24px; animation-duration: 4.5s; }
.trophy-text b { display: block; font-size: 14.5px; font-weight: 720; }
.trophy-text span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); }

/* — the leaderboard — */
.lb-card { padding: 6px 8px 8px; border-radius: var(--r-lg);
           background: var(--surface-1); border: 1px solid var(--hairline); }
.lb-head { display: flex; align-items: baseline; justify-content: space-between;
           padding: 10px 12px 8px; }
.lb-head > span:first-child { font-size: 13px; font-weight: 700; }
.lb-sub { font-size: 11.5px; color: var(--text-muted); }
.lb-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  transition: background .12s;
}
.lb-row + .lb-row { margin-top: 2px; }
.lb-row:hover { background: color-mix(in srgb, var(--surface-3) 55%, transparent); }
.lb-row.me { background: color-mix(in srgb, var(--brand-cyan) 12%, transparent);
             outline: 1px solid color-mix(in srgb, var(--brand-cyan) 35%, transparent); }
.lb-row.gold { background: color-mix(in srgb, #f7c948 12%, transparent); }
.lb-rank { flex: none; width: 26px; text-align: center; font-size: 15px; font-weight: 700;
           color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lb-rank .lb-rank-n { color: var(--text-muted); }
/* status-mark and medal SVGs (replacing the old ✓ ! ✕ and 🥇🥈🥉 glyphs) */
.ic-mark { width: 100%; height: 100%; display: block; }
.ic-medal { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; }
.fh-rank .ic-medal { vertical-align: -5px; }
.lb-av { flex: none; width: 30px; height: 30px; border-radius: 9px; overflow: hidden;
         display: grid; place-items: center; font-size: 11px; font-weight: 650;
         background: color-mix(in srgb, var(--brand-cyan) 18%, transparent);
         color: var(--text-primary); }
.lb-av img { width: 100%; height: 100%; object-fit: cover; }
.lb-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.lb-name em { color: var(--brand-cyan); font-style: normal; font-weight: 700; font-size: 11.5px; }
.lb-interested { flex: none; font-size: 12.5px; color: var(--text-secondary); }
.lb-interested b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-calls { flex: none; width: 74px; text-align: right; font-size: 11.5px; color: var(--text-muted); }
.lb-gap { text-align: center; color: var(--text-muted); font-size: 13px; letter-spacing: 3px; padding: 2px 0; }

@media (max-width: 720px) {
  .hero-card { flex-direction: column; align-items: flex-start; }
  .hero-stats { width: 100%; }
  .fh-stat { flex: 1; }
  .lb-calls { display: none; }
}

/* — prequalifier dashboard: date bar, gauges, verdict breakdown — */
.fh-fade { opacity: 0; transform: translateY(8px);
  animation: fhIn .5s cubic-bezier(.2,.9,.3,1.05) forwards;
  animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes fhIn { to { opacity: 1; transform: none; } }

.fh-datebar { display: flex; align-items: center; gap: 8px; }
.fh-day-nav {
  width: 30px; height: 30px; flex: none; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  background: var(--surface-1); border: 1px solid var(--hairline); color: var(--text-secondary);
  transition: background .12s, color .12s;
}
.fh-day-nav:hover:not(:disabled) { background: var(--surface-3); color: var(--text-primary); }
.fh-day-nav:disabled { opacity: .4; cursor: default; }
.fh-day-pick {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  padding: 6px 13px; border-radius: 10px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--hairline);
}
.fh-day-pick svg { width: 16px; height: 16px; color: var(--text-muted); }
.fh-day-pick #fh-date {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; border: 0;
}
.fh-day-word { font-size: 13px; font-weight: 650; color: var(--text-primary); text-transform: capitalize; }
.fh-day-today {
  font-size: 12px; font-weight: 620; padding: 6px 12px; border-radius: 9px; cursor: pointer;
  background: color-mix(in srgb, var(--brand-cyan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-cyan) 35%, transparent); color: var(--brand-cyan);
}

.fh-gauges { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fh-gauge {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; border-radius: var(--r-lg);
  background: var(--surface-1); border: 1px solid var(--hairline);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.fh-gauge:hover { border-color: color-mix(in srgb, var(--gc) 45%, var(--hairline));
  transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--gc) 10%, transparent); }
.fh-g-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, transparent);
}
.fh-g-ic svg { width: 21px; height: 21px; }
.fh-g-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fh-g-num { font-size: 25px; font-weight: 780; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text-primary); letter-spacing: -.01em; }
.fh-g-lb { font-size: 11.5px; color: var(--text-muted); letter-spacing: .01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1150px) { .fh-gauges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .fh-gauges { grid-template-columns: repeat(2, 1fr); } }

/* verdict breakdown — ranked horizontal bars, one per outcome */
.fh-bd { padding: 17px 19px; }
.fh-bd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.fh-bd-title { font-size: 13.5px; font-weight: 700; }
.fh-bd-title em { color: var(--brand-cyan); font-style: normal; text-transform: capitalize; }
.fh-bd-total { font-size: 11.5px; color: var(--text-muted); }
.fh-bd-total b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.fh-bars { display: flex; flex-direction: column; gap: 12px; }
.fh-bar-row { display: grid; grid-template-columns: 132px 1fr 84px; align-items: center; gap: 14px; }
.fh-bar-lb { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px;
  color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-bar-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.fh-bar-track { height: 9px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.fh-bar-fill { display: block; height: 100%; border-radius: 6px;
  transition: width .65s cubic-bezier(.2,.8,.3,1); }
.fh-bar-val { text-align: right; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fh-bar-val b { color: var(--text-primary); font-weight: 700; }
.fh-bar-val em { font-style: normal; margin-left: 7px; opacity: .8; }
@media (max-width: 640px) { .fh-bar-row { grid-template-columns: 104px 1fr 66px; gap: 10px; }
  .fh-bar-val em { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .fh-fade { animation: none; opacity: 1; transform: none; }
  .fh-gauge:hover { transform: none; }
  .fh-bar-fill { transition: none; }
}

/* — confetti burst — */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9500; overflow: hidden; }
.confetti-layer i {
  position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px;
  animation-name: confettiFall; animation-timing-function: cubic-bezier(.3,.6,.5,1);
  animation-fill-mode: forwards;
}

@keyframes heroIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 15%,45% { transform: rotate(16deg); } 30% { transform: rotate(-6deg); } }
@keyframes trophySpin { 0%,100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(10deg) scale(1.12); } }
@keyframes confettiFall { to { transform: translateY(104vh) rotate(680deg); opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .hero-card, .hero-glow, .hero-wave, .trophy-spin { animation: none; }
}

/* ── Quick-add: floating + button, add-lead form, the confirming checkmark ──── */
.quick-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--brand-cyan), #0090c8);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-cyan) 45%, transparent), 0 2px 6px rgba(0,0,0,.3);
  transition: transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .14s;
  animation: fabIn .35s cubic-bezier(.2,.9,.3,1.3);
}
.quick-fab:hover { transform: scale(1.08) rotate(90deg); }
.quick-fab:active { transform: scale(.96); }
.quick-fab svg { width: 26px; height: 26px; }
@keyframes fabIn { from { opacity: 0; transform: scale(.4) translateY(12px); } to { opacity: 1; transform: none; } }

.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.qa-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.qa-grid .qa-wide { grid-column: 1 / -1; }

.add-ok {
  position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center;
  pointer-events: none; transition: opacity .35s; background: rgba(0,0,0,.06);
}
.add-ok-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 34px; border-radius: 18px;
  background: var(--surface-1); box-shadow: var(--shadow);
  animation: okPop .3s cubic-bezier(.2,.9,.3,1.3);
}
.add-ok-card span { font-size: 14px; font-weight: 650; color: var(--text-primary); }
.add-ok-check { width: 62px; height: 62px; }
.add-ok-check circle { fill: none; stroke: var(--c-answered, #199e70); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151; animation: okCircle .45s ease-out forwards; }
.add-ok-check path { fill: none; stroke: var(--c-answered, #199e70); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48; animation: okTick .3s .4s ease-out forwards; }
@keyframes okCircle { to { stroke-dashoffset: 0; } }
@keyframes okTick { to { stroke-dashoffset: 0; } }
@keyframes okPop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .quick-fab, .add-ok-card, .add-ok-check circle, .add-ok-check path { animation: none; }
  .add-ok-check circle, .add-ok-check path { stroke-dashoffset: 0; }
}

/* ── 1 min+ calls page (prequalifier helper) ───────────────────────────── */
.mc-topline { display: flex; gap: 12px; margin-bottom: 14px; }
.mc-stat {
  flex: 0 1 auto; min-width: 160px; padding: 14px 18px; border-radius: var(--r-lg);
  background: var(--surface-1); border: 1px solid var(--hairline);
}
.mc-stat b { display: block; font-size: 28px; font-weight: 780; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mc-stat span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-muted); }
.mc-stat.live { border-color: color-mix(in srgb, var(--c-answered, #35c46a) 45%, var(--hairline)); }
.mc-stat.live b { color: var(--c-answered, #35c46a); }

.mc-live {
  margin-bottom: 14px; padding: 14px 16px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-answered, #35c46a) 7%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--c-answered, #35c46a) 30%, var(--hairline));
}
.mc-live-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  font-weight: 650; color: var(--text-secondary); margin-bottom: 12px; }
.mc-live-head .live-dot { width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-answered, #35c46a); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-answered,#35c46a) 60%, transparent);
  animation: mcPulse 1.8s ease-out infinite; }
.mc-live-n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--c-answered,#35c46a); font-weight: 750; }
.mc-live-rows { display: flex; flex-direction: column; gap: 8px; }
.mc-live-row { display: flex; align-items: center; gap: 12px; }
.mc-live-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-live-who b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-live-who small { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-live-timer { flex: none; font-family: var(--mono); font-size: 15px; font-weight: 700;
  color: var(--c-answered, #35c46a); font-variant-numeric: tabular-nums; }
@keyframes mcPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-answered,#35c46a) 55%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; } }

.mc-list { padding: 6px 6px 8px; }
.mc-list-head { padding: 12px 14px 10px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.mc-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
  cursor: pointer; transition: background .12s; }
.mc-row:hover { background: color-mix(in srgb, var(--surface-3) 55%, transparent); }
.mc-row + .mc-row { border-top: 1px solid var(--line-faint); }
.mc-av { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--brand-cyan) 16%, transparent);
  color: var(--text-primary); }
.mc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-who b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-who small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-meta { flex: none; display: flex; align-items: center; gap: 8px; }
.mc-rec { width: 14px; height: 14px; color: var(--brand-cyan); }
.mc-talk { flex: none; width: 58px; text-align: right; font-family: var(--mono); font-size: 14px;
  font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mc-talk.good { color: var(--c-interested, #35c46a); }
.mc-talk.warn { color: #e0a106; }
.mc-when { flex: none; width: 66px; text-align: right; font-size: 11px; color: var(--text-muted); }
@media (max-width: 640px) { .mc-when { display: none; } .mc-topline { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .mc-live-head .live-dot { animation: none; } }

/* 1 min+ page — needs-note worklist extras */
.mc-stat.needs b { color: #e0a106; }
.mc-list-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-list-head > span:first-child { flex: 0 0 auto; }
.mc-filters { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-filters .input-sm { height: 30px; font-size: 12.5px; }
.mc-filters #mc-search { min-width: 180px; }
.mc-row { position: relative; }
.mc-owner { flex: none; margin-right: 4px; }
.mc-owner .owner-tag { font-size: 11.5px; }
.mc-rows { display: flex; flex-direction: column; }
.mc-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 6px; flex-wrap: wrap; }
.mc-pager-info { font-size: 12px; color: var(--text-muted); }
.mc-pager-ctl { display: flex; align-items: center; gap: 8px; }
.mc-size { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.mc-size .input-sm { height: 30px; }
@media (max-width: 720px) { .mc-filters { width: 100%; margin-left: 0; } .mc-filters #mc-search { flex: 1; min-width: 0; } }

/* ── override-reason modal ─────────────────────────────────────────────── */
.ocr-flow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ocr-from, .ocr-to { font-size: 13px; font-weight: 650; padding: 4px 11px; border-radius: 999px; }
.ocr-from { background: var(--surface-3); color: var(--text-secondary); }
.ocr-to { background: color-mix(in srgb, var(--brand-cyan) 16%, transparent); color: var(--brand-cyan); }
.ocr-flow .ico { color: var(--text-muted); }
.ocr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.ocr-chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-secondary);
  transition: border-color .12s, color .12s; }
.ocr-chip:hover { border-color: var(--brand-cyan); color: var(--text-primary); }

/* ── coach: verdict overrides — clean card layout ──────────────────────── */
.ov-card { padding: 18px 20px; }

.ov-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.ov-title { flex: 0 0 auto; }
.ov-title .card-sub b { color: var(--text-primary); font-weight: 700; }
.ov-leaders { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; margin-top: 2px; }
.ov-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary);
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 10px 3px 4px; }
.ov-lead i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 9.5px; font-weight: 700; background: var(--surface-3); color: var(--text-primary); }
.ov-lead b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-expand { flex: none; }

/* from→to summary pills */
.ov-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ov-pill { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 6px 5px 12px; border-radius: 999px; font-size: 12px;
  background: var(--surface-1); border: 1px solid var(--hairline); color: var(--text-secondary);
  transition: border-color .12s, background .12s, transform .08s; }
.ov-pill:hover { border-color: color-mix(in srgb, var(--h) 55%, var(--hairline)); color: var(--text-primary); }
.ov-pill:active { transform: scale(.98); }
.ov-pill.on { border-color: var(--h); background: color-mix(in srgb, var(--h) 10%, transparent); color: var(--text-primary); }
.ov-pill-arr { color: var(--text-muted); margin: 0 1px; }
.ov-pill-n { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 20px; text-align: center;
  padding: 1px 8px; border-radius: 999px; color: #fff; background: var(--h); font-size: 11.5px; }

/* filter toolbar */
.ov-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.ov-toolbar .input-sm { height: 32px; font-size: 12.5px; }
.ov-f-search { min-width: 190px; flex: 0 1 230px; }
.ov-f-arrow { color: var(--text-muted); width: 14px; height: 14px; flex: none; }

/* the verdict tags */
.ov-tag { font-size: 11.5px; font-weight: 650; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.ov-tag.from { background: var(--surface-3); color: var(--text-secondary); }
.ov-tag.to { background: color-mix(in srgb, var(--h, var(--brand-cyan)) 16%, transparent); color: var(--h, var(--brand-cyan)); }

/* the override cards — the reason is the hero */
.ov-cards { display: flex; flex-direction: column; gap: 10px; }
.ov-cards.two { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.ov-c { position: relative; padding: 14px 16px 14px 18px; border-radius: 13px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--hairline); overflow: hidden;
  transition: border-color .14s, box-shadow .14s, transform .08s; }
.ov-c::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--h); }
.ov-c:hover { border-color: color-mix(in srgb, var(--h) 45%, var(--hairline));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--h) 9%, transparent); }
.ov-c:active { transform: translateY(1px); }
.ov-c-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.ov-c-who { min-width: 0; }
.ov-c-who b { font-size: 14px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-c-who small { font-size: 11.5px; color: var(--text-muted); }
.ov-c-meta { flex: none; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.ov-c-by { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.ov-c-meta time { font-size: 10.5px; color: var(--text-muted); }
.ov-c-flow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.ov-c-arr { color: var(--text-muted); width: 14px; height: 14px; }
.ov-c-reason { font-size: 13px; line-height: 1.55; color: var(--text-primary);
  background: color-mix(in srgb, var(--h) 5%, var(--surface-2)); border-radius: 9px; padding: 10px 12px; margin: 0; }
.ov-c-reason .muted { color: var(--text-muted); font-style: italic; }

.ov-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.ov-empty .ico { width: 34px; height: 34px; opacity: .4; margin-bottom: 10px; }
.ov-empty p { font-size: 13px; }

/* expanded modal */
.ov-modal { display: flex; flex-direction: column; height: 100%; padding: 18px 22px 0; }
.ov-m-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ov-m-count { font-size: 14px; color: var(--text-secondary); }
.ov-m-count b { font-size: 20px; font-weight: 780; color: var(--text-primary); margin-right: 4px; font-variant-numeric: tabular-nums; }
.ov-m-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 16px; margin: 0 -2px; }
.ov-m-pager { border-top: 1px solid var(--hairline); padding: 12px 0; margin-top: 0; }
@media (max-width: 700px) { .ov-head { flex-wrap: wrap; } .ov-leaders { order: 3; width: 100%; margin-left: 0; } }