/* Client pages: Supernal Source design system, Stanbridge client palette
   (action #1F3BAA, surface #202F52, Inter + JetBrains Mono). Components reference the
   semantic tokens only; the primitive scales exist to define them. */
/* ── Primitive scales (Stanbridge client palette: action #1F3BAA, surface #202F52) ── */
:root {
  --a3: 222 79% 93%; --a5: 222 79% 75%; --a7: 224 62% 55%; --a8: 225 56% 42%; --a9: 226 66% 29%;
  --s1: 216 71% 99%; --s2: 222 76% 97%; --s3: 222 25% 90%; --s4: 221 23% 82%; --s5: 219 12% 69%;
  --s7: 220 10% 35%; --s8: 223 12% 23%; --s9: 218 10% 16%; --s9a: 223 10% 14%; --s10: 228 9% 10%;
  --s10a: 220 14% 8%; --s11: 220 19% 6%;

  /* ── Semantic tokens, light ── */
  color-scheme: light;
  --background: var(--s1);
  --card: 0 0% 100%;
  --bg-subtle: var(--s2);
  --surface-shape: var(--s3);
  --table-header-bg: var(--s2);
  --row-hover: var(--s2);
  --border: 220 19% 6% / 0.10;
  --card-border: 220 19% 6% / 0.12;
  --input-border: 220 19% 6% / 0.16;
  --input-bg: 222 25% 90% / 0.55;
  --text: var(--s11);
  --text-secondary: var(--s10);
  --muted-fg: var(--s7);
  --action-default: var(--a7);
  --action-hover: var(--a8);
  --action-fg: 0 0% 100%;
  --action-text: var(--a8);
  --action-subtle-bg: var(--a3);
  --indicator-bg: var(--s3);
  --indicator-text: var(--s8);
  --brandbar: 222 44% 22%;
  --brandbar-fg: 222 76% 97%;
  --brandbar-muted: 221 23% 78%;
  --warning: 41 100% 30%;
  --warning-bg: 36 100% 96%;
  --warning-text: 41 100% 24%;
  --warning-border: 36 68% 77%;
  --error: 3 54% 50%;
  --error-bg: 7 100% 98%;
  --error-text: 1 64% 39%;
  --error-border: 7 100% 86%;
  --viz-single: 224 62% 50%;
  --viz-1: 187 64% 34%;
  --viz-2: 32 85% 46%;
  --viz-3: 282 38% 50%;
  --viz-7: 220 10% 58%;
  --shadow-xs: 0 1px 2px hsl(220 19% 6% / 0.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: var(--s11); --card: var(--s10); --bg-subtle: var(--s10); --surface-shape: var(--s9a);
    --table-header-bg: var(--s9a); --row-hover: var(--s9);
    --border: 222 25% 90% / 0.08; --card-border: 222 25% 90% / 0.10; --input-border: 222 25% 90% / 0.16;
    --input-bg: 220 19% 6% / 0.6;
    --text: var(--s3); --text-secondary: var(--s4); --muted-fg: var(--s4);
    --action-default: var(--a8); --action-hover: var(--a7); --action-text: var(--a5); --action-subtle-bg: var(--a9);
    --indicator-bg: var(--s8); --indicator-text: var(--s2);
    --brandbar: 223 10% 14%; --brandbar-fg: 222 25% 90%; --brandbar-muted: 219 12% 69%;
    --warning: 38 58% 53%; --warning-bg: 36 100% 8%; --warning-text: 38 58% 53%; --warning-border: 40 100% 18%;
    --error: 6 74% 69%; --error-bg: 2 78% 13%; --error-text: 6 74% 69%; --error-border: 359 76% 28%;
    --viz-single: 223 78% 66%; --viz-1: 187 50% 52%; --viz-2: 34 80% 58%; --viz-3: 282 45% 68%; --viz-7: 220 10% 55%;
    --shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: var(--s11); --card: var(--s10); --bg-subtle: var(--s10); --surface-shape: var(--s9a);
  --table-header-bg: var(--s9a); --row-hover: var(--s9);
  --border: 222 25% 90% / 0.08; --card-border: 222 25% 90% / 0.10; --input-border: 222 25% 90% / 0.16;
  --input-bg: 220 19% 6% / 0.6;
  --text: var(--s3); --text-secondary: var(--s4); --muted-fg: var(--s4);
  --action-default: var(--a8); --action-hover: var(--a7); --action-text: var(--a5); --action-subtle-bg: var(--a9);
  --indicator-bg: var(--s8); --indicator-text: var(--s2);
  --brandbar: 223 10% 14%; --brandbar-fg: 222 25% 90%; --brandbar-muted: 219 12% 69%;
  --warning: 38 58% 53%; --warning-bg: 36 100% 8%; --warning-text: 38 58% 53%; --warning-border: 40 100% 18%;
  --error: 6 74% 69%; --error-bg: 2 78% 13%; --error-text: 6 74% 69%; --error-border: 359 76% 28%;
  --viz-single: 223 78% 66%; --viz-1: 187 50% 52%; --viz-2: 34 80% 58%; --viz-3: 282 45% 68%; --viz-7: 220 10% 55%;
  --shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.3);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: hsl(var(--background)); color: hsl(var(--text));
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: hsl(var(--action-text)); text-underline-offset: 2px; }
/* --action-text, not --action-default: in the dark theme the default action colour is the deep
   blue meant to sit UNDER white button text, and as an outline on a near-black page it measures
   2.5:1 - a focus ring a keyboard user cannot find. --action-text is the action colour drawn on a
   page surface, and it clears 3:1 in both themes. */
:focus-visible { outline: 2px solid hsl(var(--action-text)); outline-offset: 2px; border-radius: 4px; }

/* ── Brand bar ── */
.brandbar { background: hsl(var(--brandbar)); color: hsl(var(--brandbar-fg)); border-bottom: 1px solid hsl(var(--border)); }
/* The bar is a dark navy in both themes, and the page's action-coloured focus ring measures
   1.8:1 on it. Here the ring is the bar's own foreground, which is what everything else on it
   is drawn in. */
.brandbar :focus-visible { outline-color: hsl(var(--brandbar-fg)); }
.brandbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 56px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.wordmark { display: flex; flex-direction: column; line-height: 1.15; padding-block: 10px; }
.wordmark b { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.wordmark span { font-size: 12px; color: hsl(var(--brandbar-muted)); }
.topnav { display: flex; gap: 4px; align-self: stretch; }
.topnav a { display: flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 500; text-decoration: none; color: hsl(var(--brandbar-muted)); border-bottom: 2px solid transparent; }
.topnav a[aria-current="page"] { color: hsl(var(--brandbar-fg)); border-bottom-color: hsl(var(--brandbar-fg)); }
.topnav a:hover { color: hsl(var(--brandbar-fg)); }

/* ── Page frame ── */
.page { max-width: 1200px; margin: 0 auto; padding-inline: 24px; padding-block: 0 64px; }
.page-head { padding-block: 40px 20px; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: flex-end; }
h1 { font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; text-wrap: balance; }
.page-head p { margin: 0; color: hsl(var(--muted-fg)); max-width: 68ch; }
section { margin-top: 48px; }
h2 { font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.section-lead { margin: 0 0 20px; color: hsl(var(--muted-fg)); max-width: 72ch; }
.section-lead .fresh { display: block; margin-top: 4px; font-size: 13px; }
h3 { font-size: 14px; font-weight: 600; margin: 0; }
/* A heading that titles a card rather than a page section: the level says where it sits in the
   outline, this says how big it looks. */
.card-title { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: normal; }

/* ── Filter bar ── */
.filters { position: sticky; top: 0; z-index: 10; background: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); margin-inline: -24px; padding: 12px 24px; }
.filters-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
/* The list fields share whatever width the fixed ones leave, so the row ends where the cards and
   the export button end instead of somewhere short of them. */
.filters-row .field:has(select) { flex: 1 1 150px; }
.filters-row .field:has(select) select { width: 100%; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label, .field .label { font-size: 12px; font-weight: 500; color: hsl(var(--muted-fg)); }
select, input[type="date"], input[type="search"], input[type="email"], input[type="password"], input[type="text"] {
  font: inherit; color: hsl(var(--text)); height: 36px; padding: 0 10px; border-radius: 6px;
  border: 1px solid hsl(var(--input-border)); background: hsl(var(--input-bg));
}
select { padding-right: 28px; }
input[type="search"] { width: 260px; max-width: 100%; }
input::placeholder { color: hsl(var(--muted-fg)); }
.status-live { display: inline-flex; align-items: center; gap: 6px; }
.status-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--viz-single)); }
.date-pair { display: flex; align-items: center; gap: 6px; color: hsl(var(--muted-fg)); }
.segmented { display: inline-flex; padding: 3px; border-radius: 8px; background: hsl(var(--surface-shape)); height: 36px; }
.segmented button { font: inherit; font-size: 13px; font-weight: 500; border: 0; background: transparent; color: hsl(var(--muted-fg)); padding: 0 12px; border-radius: 6px; cursor: pointer; }
/* The pressed preset has to read as pressed in both themes, and the fill cannot carry that on its
   own: the pill is 1.3:1 against its track in light and 1.1:1 in dark, where the card is actually
   DARKER than the track it sits in. The ring is the state, in the action colour, so the shape is
   visible rather than merely inferred from a slightly different grey. */
.segmented button[aria-pressed="true"] { background: hsl(var(--card)); color: hsl(var(--text)); box-shadow: var(--shadow-xs), inset 0 0 0 1.5px hsl(var(--action-text)); }
.btn-primary { font: inherit; font-weight: 500; height: 36px; padding: 0 16px; border-radius: 6px; border: 0; cursor: pointer; background: hsl(var(--action-default)); color: hsl(var(--action-fg)); transition: background-color 150ms ease; }
.btn-primary:hover { background: hsl(var(--action-hover)); }

/* ── KPI strip: one object, four cells ── */
.kpis { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); background: hsl(var(--card)); border: 1px solid hsl(var(--card-border)); border-radius: 12px; box-shadow: var(--shadow-xs); overflow: hidden; }
.kpi { padding: 20px 24px; border-left: 1px solid hsl(var(--border)); min-width: 0; }
.kpi:first-child { border-left: 0; }
.kpi .k-label { font-size: 12px; font-weight: 500; color: hsl(var(--muted-fg)); }
.kpi .k-value { font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; margin-block: 2px; }
.kpi .k-sub { font-size: 12px; color: hsl(var(--muted-fg)); }

/* ── Card ── */
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--card-border)); border-radius: 12px; box-shadow: var(--shadow-xs); padding: 20px 24px 24px; min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.card-head p { margin: 2px 0 0; font-size: 13px; color: hsl(var(--muted-fg)); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.two-col > .card { display: flex; flex-direction: column; }
.two-col > .card > :last-child { flex: 1; min-height: 0; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.stack > * { min-width: 0; }

/* ── Volume chart ── */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: hsl(var(--muted-fg)); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.hatch { background: repeating-linear-gradient(45deg, hsl(var(--warning) / 0.35) 0 3px, transparent 3px 6px); border: 1px dashed hsl(var(--warning)); }
.readout { font-size: 13px; color: hsl(var(--text-secondary)); min-height: 20px; margin-bottom: 12px; }
.readout .short { color: hsl(var(--warning-text)); font-weight: 500; }
.chart-scroll { overflow-x: auto; padding-top: 10px; }
.chart { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 220px auto; column-gap: 8px; }
.yaxis { position: relative; font-size: 11px; color: hsl(var(--muted-fg)); }
.yaxis span { position: absolute; right: 0; transform: translateY(50%); }
.plot { position: relative; border-bottom: 1px solid hsl(var(--border)); }
.gridline { position: absolute; left: 0; right: 0; border-top: 1px solid hsl(var(--border)); }
.bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; padding-inline: 2px; }
.day { flex: 1 1 0; min-width: 12px; height: 100%; display: flex; flex-direction: column-reverse; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 3px 3px 0 0; }
.day:hover, .day[aria-pressed="true"] { background: hsl(var(--row-hover)); }
.seg { width: 100%; display: block; }
.day .seg:last-child { border-radius: 3px 3px 0 0; }
.seg.short { border-radius: 3px 3px 0 0; }
.xaxis { grid-column: 2; display: flex; gap: 3px; padding: 6px 2px 0; font-size: 11px; color: hsl(var(--muted-fg)); }
.xaxis span { flex: 1 1 0; min-width: 12px; text-align: center; white-space: nowrap; overflow: visible; }
.xaxis .flag { color: hsl(var(--warning-text)); font-weight: 600; }
.nodata { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 40px 16px; min-height: 200px; }
.nd-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: hsl(var(--surface-shape)); color: hsl(var(--muted-fg)); margin-bottom: 8px; }
.nd-title { margin: 0; font-weight: 600; }
.nd-desc { margin: 0; font-size: 13px; color: hsl(var(--muted-fg)); max-width: 44ch; }
.btn-ghost { margin-top: 12px; font: inherit; font-size: 13px; font-weight: 500; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid hsl(var(--input-border)); background: transparent; color: hsl(var(--action-text)); cursor: pointer; transition: background-color 150ms ease; }
.btn-ghost:hover { background: hsl(var(--action-subtle-bg)); }
.tally li.nodata-li, .upset li.nodata-li { display: block; border: 0; }
.chart.is-empty { display: block; }

/* ── Status note (one per section) ── */
.notice { display: flex; gap: 12px; margin-top: 20px; padding: 12px 16px; border-radius: 8px; border: 1px solid hsl(var(--warning-border)); background: hsl(var(--warning-bg)); color: hsl(var(--warning-text)); font-size: 13px; }
.notice svg { flex: none; margin-top: 2px; color: hsl(var(--warning)); }
.notice b { font-weight: 600; }

/* ── Table ── */
.table-wrap { border: 1px solid hsl(var(--card-border)); border-radius: 8px; overflow-x: auto; background: hsl(var(--card)); }
/* A table inside a report card scrolls in place with its header and total pinned; the page-level
   lists (Calls, Leads, Team) are paged instead and keep the page's own scroll. */
.table-wrap.bounded { overflow: auto; max-height: 520px; overscroll-behavior: contain; }
.table-wrap.bounded thead th { position: sticky; top: 0; z-index: 1; }
.table-wrap.bounded tfoot td { position: sticky; bottom: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { height: 36px; padding: 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; color: hsl(var(--muted-fg)); background: hsl(var(--table-header-bg)); border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
td { padding: 10px 16px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: hsl(var(--row-hover)); }
td:first-child { font-weight: 500; }
.r { text-align: right; }
td.dim { color: hsl(var(--muted-fg)); }
tfoot td { background: hsl(var(--table-header-bg)); border-top: 1px solid hsl(var(--border)); border-bottom: 0; font-weight: 600; }
.badge-warn { display: inline-block; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: hsl(var(--warning-bg)); color: hsl(var(--warning-text)); border: 1px solid hsl(var(--warning-border)); }

/* ── One plan cell, day by day (the panel a planned vs. placed row opens) ── */
.plan-summary { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
.plan-lead { margin: 0 0 20px; font-size: 13px; color: hsl(var(--muted-fg)); max-width: 72ch; }
/* The day grid: a Monday-first calendar per month, two side by side where the panel has room and
   one to a row on a phone, where each of the seven columns comes out near 44px. */
.plan-cal { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.plan-month { flex: 1 1 250px; max-width: 340px; min-width: 0; }
.plan-month-label { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: normal; margin: 0 0 8px; }
.plan-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.plan-wd { font-size: 11px; color: hsl(var(--muted-fg)); text-align: center; padding-bottom: 2px; }
.plan-cell { min-height: 40px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 6px; font-size: 12px; line-height: 1.2; color: hsl(var(--text)); text-decoration: none; }
.plan-cell.idle { color: hsl(var(--muted-fg)); }
.plan-cell.full { background: hsl(var(--surface-shape)); color: hsl(var(--text-secondary)); }
/* Short days in the warning tint, stronger the nearer the day came to the worst one in view. */
.plan-cell.short.l1 { background: hsl(var(--warning-bg)); box-shadow: inset 0 0 0 1px hsl(var(--warning-border)); }
.plan-cell.short.l2 { background: hsl(var(--warning) / 0.16); box-shadow: inset 0 0 0 1px hsl(var(--warning-border)); }
.plan-cell.short.l3 { background: hsl(var(--warning) / 0.28); box-shadow: inset 0 0 0 1px hsl(var(--warning) / 0.5); }
.plan-cell .s { font-size: 11px; font-weight: 600; color: hsl(var(--warning-text)); }
.plan-grid a.plan-cell:hover { box-shadow: inset 0 0 0 1px hsl(var(--action-text) / 0.6); }
/* The open day: the same ring a pressed range preset wears. */
.plan-grid a.plan-cell[aria-current="date"] { box-shadow: inset 0 0 0 2px hsl(var(--action-text)); font-weight: 600; }
.plan-legend { margin: 12px 0 0; }
.plan-key.full { background: hsl(var(--surface-shape)); }
.plan-key.short { background: hsl(var(--warning) / 0.28); }
.plan-key.idle { box-shadow: inset 0 0 0 1px hsl(var(--border)); }
/* The open day's runs, below the grid. */
.plan-day { margin-top: 24px; }
.plan-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.plan-day-label { font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: normal; margin: 0; }
.plan-day-figures { font-size: 13px; color: hsl(var(--muted-fg)); }
.plan-runs td.short { color: hsl(var(--warning-text)); font-weight: 600; }
.plan-runs tr.full td { color: hsl(var(--muted-fg)); }

/* ── Horizontal bars (disconnect reasons) ── */
.hbars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hbar-row { display: grid; grid-template-columns: minmax(110px, 150px) 1fr 84px; gap: 12px; align-items: center; width: 100%; padding: 4px; margin: -4px; border: 0; border-radius: 6px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hbar-row:hover:not(:disabled) { background: hsl(var(--row-hover)); }
.hbar-row:disabled { cursor: default; }
.hbars .track { height: 10px; border-radius: 999px; background: hsl(var(--surface-shape)); overflow: hidden; }
.hbars .fill { height: 100%; border-radius: 999px; background: hsl(var(--viz-single)); }
.hbars .fill.neutral { background: hsl(var(--viz-7)); }
.hbars .val { text-align: right; color: hsl(var(--muted-fg)); font-size: 13px; }
.hbars .val b { color: hsl(var(--text)); font-weight: 500; }
.group-label { font-size: 12px; font-weight: 500; color: hsl(var(--muted-fg)); margin: 16px 0 10px; }
.group-label:first-of-type { margin-top: 0; }

/* ── Hour columns ── */
#hours { display: flex; flex-direction: column; justify-content: flex-end; }
.hours { flex: none; display: flex; align-items: flex-end; gap: 6px; height: 240px; border-bottom: 1px solid hsl(var(--border)); }
.hour { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.hour .v { font-size: 11px; color: hsl(var(--muted-fg)); }
.hour .col { width: 100%; max-width: 44px; border-radius: 4px 4px 0 0; background: hsl(var(--viz-single)); min-height: 2px; }
.hour.peak .v { color: hsl(var(--text)); font-weight: 600; }
.hour-labels { display: flex; gap: 6px; padding-top: 6px; font-size: 11px; color: hsl(var(--muted-fg)); }
.hour-labels span { flex: 1 1 0; text-align: center; min-width: 0; }
.axis-note { margin: 6px 0 0; font-size: 11px; color: hsl(var(--muted-fg)); text-align: center; }
/* The "at least N calls" floor above the leads list: one line, wrapping on a phone. */
.lead-floor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; font-size: 14px; }
.lead-floor input[type=number] { width: 88px; }
.lead-floor .btn-ghost { margin-top: 0; }

/* ── Tally lists (insights) ── */
.tally { list-style: none; margin: 0 -8px 0 0; padding: 0 8px 0 0; height: 408px; flex: none !important; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: hsl(var(--surface-shape)) transparent; }
.tally .nodata { min-height: 400px; }
.tally > li { border-bottom: 1px solid hsl(var(--border)); }
.tally > li:last-child { border-bottom: 0; }
.tally-row { width: 100%; display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 10px 4px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.tally-row:hover { background: hsl(var(--row-hover)); }
.tally-row .chev { color: hsl(var(--muted-fg)); transition: transform 150ms ease; }
.tally-row[aria-expanded="true"] .chev { transform: rotate(90deg); }
/* The rows are <details>, so they open with no script at all. The grid display is what takes the
   browser's own triangle away (a <summary> only draws one while it is display: list-item); the
   two rules beside it are for engines that draw it anyway. */
summary.tally-row { list-style: none; }
summary.tally-row::-webkit-details-marker { display: none; }
details[open] > .tally-row .chev { transform: rotate(90deg); }
.tally-row .name { min-width: 0; }
.tally-row .name span { display: block; }
.tally-row .mini { height: 4px; margin-top: 6px; border-radius: 999px; background: hsl(var(--surface-shape)); overflow: hidden; }
.tally-row .mini i { display: block; height: 100%; background: hsl(var(--viz-single)); border-radius: 999px; }
.tally-row.uncat .mini i { background: hsl(var(--viz-7)); }
.tally-row.uncat .name span { color: hsl(var(--muted-fg)); }
.tally-row .count { font-weight: 600; }
.tally-row .pct { color: hsl(var(--muted-fg)); font-weight: 400; font-size: 12px; margin-left: 6px; }
.tally-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms ease; }
.tally-detail.open { grid-template-rows: 1fr; }
.tally-detail > div { overflow: hidden; }
.calls { list-style: none; margin: 0 0 12px 26px; padding: 0; display: grid; gap: 8px; }
.calls li { font-size: 13px; border-radius: 6px; background: hsl(var(--bg-subtle)); }
.quote-row { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.quote-row:hover { background: hsl(var(--surface-shape)); }
.calls .quote { display: block; color: hsl(var(--text-secondary)); }
.calls .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; font-size: 12px; color: hsl(var(--muted-fg)); }
.more { margin: 0 0 12px 26px; font-size: 12px; color: hsl(var(--muted-fg)); }
/* Bounded like the tallies beside it: a busy month scrolls inside the card, the page stays put. */
.upset { list-style: none; margin: 0 -8px 0 0; padding: 8px 8px 8px 0; display: grid; gap: 12px; max-height: 336px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: hsl(var(--surface-shape)) transparent; }
.upset-row { display: grid; grid-template-columns: 8px 1fr; gap: 12px; width: 100%; padding: 8px; margin: -8px 0; border: 0; border-radius: 6px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.upset-row:hover { background: hsl(var(--row-hover)); }
.u-note { display: block; }
.upset .dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--error)); margin-top: 7px; }
.upset .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: hsl(var(--muted-fg)); }
.foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); font-size: 12px; color: hsl(var(--muted-fg)); }


/* ── Clickable numbers ── */
[hidden] { display: none !important; }
button.kpi { display: flex; flex-direction: column; font: inherit; color: inherit; text-align: left; background: transparent; border-style: solid; border-color: hsl(var(--border)); border-width: 0 0 0 1px; cursor: pointer; transition: background-color 150ms ease; }
button.kpi:hover { background: hsl(var(--row-hover)); }
button.hour { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 4px 4px 0 0; }
button.hour:hover:not(:disabled) { background: hsl(var(--row-hover)); }
button.hour:disabled, .day:disabled { cursor: default; }
tr.clickable { cursor: pointer; }
/* Server-rendered figures are links when there are calls behind them and inert spans when there
   are not. Same shape, same hover, keyboard focus left to the shared :focus-visible rule. */
a.kpi, span.kpi { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: background-color 150ms ease; }
a.kpi:hover { background: hsl(var(--row-hover)); }
a.day, a.hour, a.hbar-row, span.day, span.hour, span.hbar-row { color: inherit; text-decoration: none; }
a.quote-row, a.upset-row { color: inherit; text-decoration: none; }
a.hour:hover, a.hbar-row:hover { background: hsl(var(--row-hover)); }
span.kpi, span.day, span.hour, span.hbar-row { cursor: default; }
tr.clickable td a { color: inherit; text-decoration: none; }
a.btn-primary, a.btn-ghost { display: inline-grid; place-items: center; text-decoration: none; }
.kpis-error { margin-top: 24px; }
.filters .apply { margin-top: 0; height: 36px; }
.hour .col.empty { background: hsl(var(--surface-shape)); }
/* Nine buckets in half a card: the columns take their whole slot rather than the hour chart's cap. */
.hours.dense { gap: 8px; height: 200px; }
.hours.dense .col { max-width: none; }
/* The cap card beside it: the bars a cap would stop keep the full fill, the rest step back. */
.hours.capping .col { transition: opacity 150ms ease; }
.hours.capping .hour:not(.capped) .col { opacity: 0.35; }
.filters.cap-form { position: static; z-index: auto; margin: 0; padding: 0; border: 0; background: transparent; }
.cap-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; margin-bottom: 20px; }
.cap-slider input[type=range] { width: 100%; margin: 0; accent-color: hsl(var(--viz-single)); }
.cap-ends { grid-column: 1; grid-row: 2; display: flex; justify-content: space-between; font-size: 11px; color: hsl(var(--muted-fg)); }
.cap-slider .apply { grid-column: 2; grid-row: 1 / span 2; }
.cap-card output { font-variant-numeric: tabular-nums; }
.cap-figs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid hsl(var(--border)); border-radius: 10px; overflow: hidden; }
.cap-fig { display: flex; flex-direction: column; padding: 16px 20px; min-width: 0; }
.cap-fig + .cap-fig { border-left: 1px solid hsl(var(--border)); }
.cap-fig .k-label { font-size: 12px; font-weight: 500; color: hsl(var(--muted-fg)); }
.cap-fig .k-value { font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; margin-block: 2px; }
.cap-fig.stop .k-value { color: hsl(var(--action-text)); }
.cap-fig .k-sub { font-size: 12px; color: hsl(var(--muted-fg)); }
.cap-note { margin: 12px 0 0; font-size: 12px; color: hsl(var(--muted-fg)); }
.cap-card .more { margin: 12px 0 0; }
td.wrap { white-space: normal; }
.dim-inline { color: hsl(var(--muted-fg)); }
.link-btn { padding: 0; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: hsl(var(--action-text)); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.count-line { margin: 20px 0 8px; font-size: 13px; color: hsl(var(--muted-fg)); }
.scope-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 13px; }
.scope-note + .count-line { margin-top: 8px; }
.badge-scope { display: inline-block; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: hsl(var(--action-subtle-bg)); color: hsl(var(--action-text)); }
.list-more { margin: 12px 0 0; text-align: center; }
.list-more .btn-ghost, .share .btn-ghost { margin-top: 0; }
.check { display: flex; align-items: center; gap: 8px; height: 36px; font-size: 14px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: hsl(var(--action-default)); }
.who { font-size: 12px; color: hsl(var(--brandbar-muted)); }
.signout { font: inherit; font-size: 13px; font-weight: 500; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid hsl(var(--brandbar-muted) / 0.5); background: transparent; color: hsl(var(--brandbar-fg)); cursor: pointer; }
.signout:hover { background: hsl(var(--brandbar-fg) / 0.1); }

/* ── Sheet ── */
.overlay { position: fixed; inset: 0; z-index: 40; background: hsl(220 19% 6% / 0.45); opacity: 0; transition: opacity 200ms ease; }
.overlay.in { opacity: 1; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(760px, 100%); display: flex; flex-direction: column; background: hsl(var(--background)); border-left: 1px solid hsl(var(--border)); box-shadow: -8px 0 24px hsl(220 19% 6% / 0.12); transform: translateX(100%); transition: transform 200ms ease; }
.sheet.in { transform: none; }
.sheet-head { display: flex; gap: 8px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid hsl(var(--border)); }
.sheet-head .titles { flex: 1; min-width: 0; }
#sheet-title { font-size: 18px; margin: 0; }
#sheet-sub { margin: 2px 0 0; font-size: 13px; color: hsl(var(--muted-fg)); }
.icon-btn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: hsl(var(--muted-fg)); cursor: pointer; }
.icon-btn:hover { background: hsl(var(--row-hover)); color: hsl(var(--text)); }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.sheet-foot { display: grid; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-subtle)); }
.share { display: flex; gap: 8px; }
.share input { flex: 1; min-width: 0; height: 32px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
.foot-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; }
.call-list { list-style: none; margin: 0; padding: 0; }
.call-list li { border-bottom: 1px solid hsl(var(--border)); }
.call-list li:last-child { border-bottom: 0; }
/* A row, not a sentence with a link in it: the whole row is the target, so it carries the row
   hover rather than an underline. */
.call-row { display: flex; gap: 16px; justify-content: space-between; width: 100%; padding: 10px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; color: inherit; text-decoration: none; text-align: left; cursor: pointer; }
.call-row:hover { background: hsl(var(--row-hover)); }
.cr-main, .cr-side { display: flex; flex-direction: column; min-width: 0; }
.cr-side { align-items: flex-end; flex: none; }
.cr-name { font-weight: 500; }
.cr-meta { font-size: 12px; color: hsl(var(--muted-fg)); }
.cr-ended { font-size: 13px; }

/* ── Call detail ── */
.call-when { margin: 0 0 8px; font-size: 13px; color: hsl(var(--muted-fg)); }
.call-summary { margin: 0; font-size: 15px; line-height: 1.55; max-width: 60ch; }
/* The call page's section headings. h2 on their own page, h3 inside the panel, where the panel's
   own title is the h2: the level says where they sit in the outline, this rule says how they look. */
.call-section { margin: 28px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--muted-fg)); }
.player { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid hsl(var(--card-border)); border-radius: 12px; background: hsl(var(--card)); box-shadow: var(--shadow-xs); }
.player audio { flex: 1; min-width: 0; height: 36px; }
.play { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: hsl(var(--action-default)); color: hsl(var(--action-fg)); cursor: pointer; transition: background-color 150ms ease; }
.play:hover { background: hsl(var(--action-hover)); }
.wave { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.wave i { flex: 1 1 0; min-width: 1px; border-radius: 1px; background: hsl(var(--surface-shape)); }
.wave i.on { background: hsl(var(--viz-single)); }
.ptime { flex: none; font-size: 12px; color: hsl(var(--muted-fg)); }
.player-note { margin: 8px 0 0; font-size: 12px; color: hsl(var(--muted-fg)); }
.no-audio { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 8px; background: hsl(var(--bg-subtle)); color: hsl(var(--muted-fg)); font-size: 13px; }
.facts { margin: 0; border: 1px solid hsl(var(--card-border)); border-radius: 8px; background: hsl(var(--card)); }
.facts > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: 13px; color: hsl(var(--muted-fg)); }
.facts dd { margin: 0; font-weight: 500; }
.dd-quote { display: block; font-weight: 400; font-size: 13px; color: hsl(var(--muted-fg)); }
.dd-quote + .dd-quote, .facts dd .dd-quote:not(:last-child) { margin-bottom: 6px; }
.upset-flag { color: hsl(var(--error-text)); }
.turns { list-style: none; margin: 0 -8px 0 0; padding: 0 8px 0 0; display: grid; gap: 2px; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: hsl(var(--surface-shape)) transparent; }
/* Tables in the panel sit tighter than on a page: the width is the panel's, not the screen's. */
.sheet-body th, .sheet-body td { padding-left: 10px; padding-right: 10px; }
/* The side panel already scrolls as a whole; a second scroller inside it would fight it. */
.sheet-body .turns { max-height: none; overflow: visible; margin-right: 0; padding-right: 0; }
.turn { display: grid; grid-template-columns: 36px 1fr; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.turn:hover { background: hsl(var(--row-hover)); }
.turn.now { background: hsl(var(--action-subtle-bg)); }
.t-time { font-size: 12px; color: hsl(var(--muted-fg)); padding-top: 1px; }
.t-who { display: block; font-size: 12px; font-weight: 600; color: hsl(var(--muted-fg)); }

/* ── Team ── */
.invite { display: grid; gap: 12px; }
.invite .filters-row { align-items: flex-start; }
.invite .btn-primary { margin-top: 22px; }
.field.grow { flex: 1 1 260px; }
.field.grow input { width: 100%; }
td select { height: 32px; font-size: 13px; }
.row-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.row-actions .btn-ghost { margin-top: 0; height: 28px; font-size: 12px; padding: 0 10px; }
.btn-ghost.danger { color: hsl(var(--error-text)); }
.btn-ghost.danger:hover { background: hsl(var(--error-bg)); }
.btn-ghost.danger.solid { background: hsl(var(--error-text)); color: hsl(0 0% 100%); border-color: transparent; }
.confirm-text { font-size: 12px; color: hsl(var(--text-secondary)); white-space: normal; }
.pending { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--warning-text)); }
.pending::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--warning)); }

/* Members table: sized to its container instead of to its longest line, so the actions column
   stays on the page. The wide Leads table keeps the default scrolling behaviour. */
.team-table { table-layout: fixed; }
.team-table th, .team-table td { white-space: normal; }
.team-table td.email { overflow-wrap: anywhere; }
.team-table th:nth-child(1), .team-table td:nth-child(1) { width: 14%; }
.team-table th:nth-child(2), .team-table td:nth-child(2) { width: 22%; }
.team-table th:nth-child(3), .team-table td:nth-child(3) { width: 17%; }
.team-table th:nth-child(4), .team-table td:nth-child(4) { width: 14%; }
.team-table th:nth-child(5), .team-table td:nth-child(5) { width: 17%; }
.team-table th:nth-child(6), .team-table td:nth-child(6) { width: 16%; }
.team-table form.row-actions { justify-content: flex-start; }
.team-table td select { max-width: 100%; }
.team-table .row-actions .btn-ghost { height: auto; min-height: 28px; padding-block: 5px; }

.link-out { display: grid; gap: 8px; padding: 12px 14px; border-radius: 8px; background: hsl(var(--bg-subtle)); border: 1px solid hsl(var(--border)); }
.link-title { margin: 0; font-weight: 500; }

/* ── Sign in ── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: hsl(var(--brandbar)); }
.login-card { width: min(380px, 100%); display: grid; gap: 16px; padding: 32px; border-radius: 12px; background: hsl(var(--card)); border: 1px solid hsl(var(--card-border)); box-shadow: 0 8px 32px hsl(220 19% 6% / 0.25); }
.login-card .wordmark { padding: 0; }
.login-fields, .login-sent { display: grid; gap: 16px; }
.login-sent p { margin: 0; color: hsl(var(--text-secondary)); }
.login-card .link-btn { justify-self: start; }
.login-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.login-card .wordmark span { color: hsl(var(--muted-fg)); }
.login-card h1 { font-size: 24px; margin: 8px 0 0; }
.login-card input { height: 40px; width: 100%; }
.login-card .btn-primary { height: 40px; margin-top: 4px; }
.field-error { margin: 0; font-size: 13px; color: hsl(var(--error-text)); }
input[aria-invalid="true"] { border-color: hsl(var(--error)); }
.login-note { margin: 0; font-size: 12px; color: hsl(var(--muted-fg)); }
@media (max-width: 480px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } .who { display: none; } }

@media (max-width: 860px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid hsl(var(--border)); }
}
/* Phones: one card per member, every value carrying its column name. */
@media (max-width: 720px) {
  .team-wrap { border: 0; border-radius: 0; background: transparent; overflow-x: visible; }
  .team-table { table-layout: auto; }
  .team-table, .team-table tbody, .team-table tr, .team-table td { display: block; width: auto; }
  .team-table th:nth-child(n), .team-table td:nth-child(n) { width: auto; }
  .team-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .team-table tr { margin-bottom: 12px; border: 1px solid hsl(var(--card-border)); border-radius: 10px; background: hsl(var(--card)); box-shadow: var(--shadow-xs); overflow: hidden; }
  .team-table tbody tr:last-child { margin-bottom: 0; }
  .team-table td, .team-table tbody tr:last-child td { padding: 10px 14px; text-align: left; border-bottom: 1px solid hsl(var(--border)); }
  .team-table tr td:last-child { border-bottom: 0; }
  .team-table tbody tr:hover td { background: transparent; }
  .team-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--muted-fg)); }
  .team-table .row-actions { display: flex; width: 100%; justify-content: flex-start; gap: 8px; }
  .team-table .row-actions > form { display: flex; flex: 1 1 180px; gap: 8px; }
  .team-table .row-actions > form > button, .team-table .row-actions > a.btn-ghost, .team-table .row-actions > button { flex: 1 1 auto; }
  .team-table .row-actions .btn-ghost { min-height: 44px; font-size: 14px; padding: 0 14px; }
  .team-table .confirm-text { flex: 1 1 100%; }
  .team-table td select { flex: 1 1 140px; min-width: 0; height: 44px; font-size: 14px; }
}
@media (max-width: 480px) {
  .page, .brandbar-inner { padding-inline: 16px; }
  .filters { margin-inline: -16px; padding-inline: 16px; position: static; }
  .kpi { padding: 16px; }
  .kpi .k-value, .cap-fig .k-value { font-size: 24px; }
  .cap-fig { padding: 12px 14px; }
  .card { padding: 16px; }
  h1 { font-size: 24px; }
  .hbar-row { grid-template-columns: 1fr auto; }
  .hbars .val { white-space: nowrap; }
  .hbars .track { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Loading. A placeholder in the shape of what is coming, and a bar along the top for whole-page
   moves: the wait is the same, but it no longer looks like nothing happened. */
.skel { display: block; border-radius: 6px; background: hsl(var(--surface-shape)); animation: skel-pulse 1.2s ease-in-out infinite; }
.skel-title { height: 18px; width: 55%; margin: 3px 0; }
.skel-sub { height: 11px; width: 38%; margin-top: 4px; }
.skel-view { display: grid; gap: 10px; padding-top: 4px; }
.skel-block { height: 72px; border-radius: 10px; }
.skel-line { height: 12px; width: 92%; }
.skel-line-short { height: 12px; width: 55%; }
.skel-row { height: 34px; }
.skel-gap { height: 8px; background: transparent; animation: none; }
@keyframes skel-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; display: none; background: linear-gradient(90deg, transparent, hsl(var(--action-default)), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: loadbar 1s linear infinite; }
.is-loading .loadbar { display: block; }
.is-loading .btn-primary, .is-loading .segmented button[aria-pressed] { opacity: 0.7; }
@keyframes loadbar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; opacity: 0.8; }
  .loadbar { animation: none; background: hsl(var(--action-default)); background-size: 100% 100%; }
}

/* The sign-in and set-password buttons while their round trip is in flight: a dot that pulses after
   the word, and no second submit. */
.btn-primary.busy { pointer-events: none; opacity: 0.85; }
.btn-primary.busy::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; animation: skel-pulse 0.9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn-primary.busy::after { animation: none; } }