/* =========================================================================
   RCA Motivate — framework styles
   Layout and interaction patterns follow the Alvaria Motivate screenshots;
   the palette is Revenue Cycle Associates', not Alvaria's.
   Chart colours come from a validated categorical set (blue / orange / aqua)
   and a fixed status set; see kpi_config.py and the README.
   ========================================================================= */

:root {
  color-scheme: light;
  --brand-900: #131e35;
  --brand-800: #1b2a4a;
  --brand-700: #24385f;
  --brand-600: #2f4878;
  --brand-ink-on: #ffffff;
  --page: #f4f5f7;
  --surface-1: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eceef2;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --text-on-brand: #dfe5f0;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(11, 11, 11, 0.18);
  --shadow: 0 1px 2px rgba(11,11,11,.06), 0 8px 24px rgba(11,11,11,.06);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --ordinal-1: #8bb7e6;
  --ordinal-2: #6aa0dd;
  --ordinal-3: #4a88d3;
  --ordinal-4: #2f70c2;
  --ordinal-5: #20589b;
  --ordinal-6: #153f6d;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --good-text: #006300;
  --critical-text: #a92c2c;
  --track: #cde2fb;
  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-w: 224px;
  --topbar-h: 56px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pop-1: #2a78d6;
  --pop-2: #8b5cf6;
  --pop-3: #e8457c;
  --pop-4: #f2a516;
  --pop-5: #1baf7a;
  --pop-6: #0ea5b7;
  --gold: #e0a32a;
  --silver: #9aa3ad;
  --bronze: #c07a45;
  --grad-brand: linear-gradient(100deg, #131e35 0%, #1f2f5c 48%, #3a2a6e 100%);
  --grad-pop: linear-gradient(120deg, var(--pop-1), var(--pop-2) 55%, var(--pop-3));
  --ease-out: cubic-bezier(.2, .8, .25, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-900: #0b0f18;
    --brand-800: #141821;
    --brand-700: #1c222e;
    --page: #0d0d0d;
    --surface-1: #1a1a19;
    --surface-2: #202020;
    --surface-3: #2a2a29;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --text-on-brand: #c8cfdd;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --ordinal-1: #bdd7f0;
    --ordinal-2: #9dc2e7;
    --ordinal-3: #7dabdb;
    --ordinal-4: #5d93cc;
    --ordinal-5: #437bb5;
    --ordinal-6: #2f6396;
    --good-text: #0ca30c;
    --critical-text: #e66767;
    --track: #1b2838;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-900: #0b0f18;
  --brand-800: #141821;
  --brand-700: #1c222e;
  --page: #0d0d0d;
  --surface-1: #1a1a19;
  --surface-2: #202020;
  --surface-3: #2a2a29;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --text-on-brand: #c8cfdd;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --ordinal-1: #bdd7f0;
  --ordinal-2: #9dc2e7;
  --ordinal-3: #7dabdb;
  --ordinal-4: #5d93cc;
  --ordinal-5: #437bb5;
  --ordinal-6: #2f6396;
  --good-text: #0ca30c;
  --critical-text: #e66767;
  --track: #1b2838;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

/* ----------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--grad-brand);
  color: var(--brand-ink-on);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(10, 14, 40, .18);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 2px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  max-width: 220px;
}

.brand-text strong { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }

.brand-text span {
  font-size: 11px;
  color: var(--text-on-brand);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.topbar-spacer { flex: 1; }

.topbar-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  margin-right: 4px;
}

.clock { font-size: 12.5px; font-variant-numeric: tabular-nums; }

.freshness {
  font-size: 11px;
  color: var(--text-on-brand);
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.freshness.is-stale {
  padding: 1px 8px;
  border-radius: 999px;
  background: #fab219;
  color: #2b1d00;
  font-weight: 700;
}

.whoami {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
}

.whoami-name { font-size: 12.5px; }

/* What this page is, where the identity chip used to sit. The agent view
   has no sign-in, so there is no name to put here -- saying what the page
   is beats naming somebody the viewer never identified as. */
.topbar-tag {
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  font-size: 12px;
  letter-spacing: .01em;
  opacity: .8;
  white-space: nowrap;
}

.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.icon-btn:hover { background: rgba(255,255,255,.12); }
.icon-btn svg { width: 18px; height: 18px; }

.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
}

/* ---------------------------------------------------------------- sidebar */

.shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  background: var(--brand-800);
  color: var(--text-on-brand);
}

.sidebar[hidden], body.nav-collapsed .sidebar { display: none; }

.navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: var(--text-on-brand);
  text-decoration: none;
  font-size: 13px;
}

.navlink svg { width: 17px; height: 17px; flex: none; }
.navlink:hover { background: rgba(255,255,255,.08); color: #fff; }
.navlink.is-active { background: var(--series-1); color: #fff; font-weight: 600; }
.navlink.is-stub { opacity: .42; cursor: default; }
.navlink.is-stub:hover { background: transparent; color: var(--text-on-brand); }

.stub-dot { width: 17px; display: grid; place-items: center; }

.stub-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.nav-heading {
  margin: 18px 0 6px;
  padding: 0 11px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.nav-foot { margin-top: auto; padding: 10px 2px 0; }

.nav-version {
  margin: 10px 0 0;
  padding-left: 9px;
  font-size: 10.5px;
  color: rgba(255,255,255,.4);
}

/* ---------------------------------------------------------------- content */

.content {
  flex: 1;
  min-width: 0;
  padding: 18px 22px 44px;
  overflow-x: auto;
}

/* With no sidebar the agent view runs the full width of the window. A
   seven-column row stretched across an ultrawide is hard to track from
   the name to the verdict, so cap it and centre it. */
.shell > .content:only-child { max-width: 1560px; margin: 0 auto; width: 100%; }
.loading { padding: 40px; color: var(--text-secondary); }

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.page-head h1 { font-size: 19px; position: relative; padding-bottom: 6px; }
.page-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); }

/* Agent hero banner */
.hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: linear-gradient(105deg, var(--brand-800), var(--brand-600));
  color: #fff;
}

.hero .avatar {
  width: 62px;
  height: 62px;
  font-size: 20px;
  background: rgba(255,255,255,.16);
}

.hero-name { font-size: 20px; font-weight: 600; }
.hero-meta { margin-top: 2px; font-size: 12.5px; color: var(--text-on-brand); }
.hero-right { margin-left: auto; text-align: right; }

.hero-right .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-on-brand);
}

.hero-right .value {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Filter row — one row, above everything it scopes */
.filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.field { display: flex; flex-direction: column; gap: 4px; }

.period-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.field label {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.period-note { font-size: 11.5px; color: var(--text-muted); max-width: 240px; }

select,
.btn {
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
}

select { min-width: 180px; }

select:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: transform 120ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.btn svg { width: 15px; height: 15px; }
.btn:hover { background: var(--surface-3); }

.btn-ghost {
  background: rgba(255,255,255,.07);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}

.btn-ghost:hover { background: rgba(255,255,255,.16); }

.legend-note {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-secondary);
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}

.tab {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}

.tab.is-active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--series-1);
}

.tab[disabled] { opacity: .4; cursor: default; }

/* -------------------------------------------------------- spotlight strip */

.spotlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.spot {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.spot-rule { height: 3px; background: var(--series-1); }
.spot-body { padding: 11px 14px 13px; }
.spot-label { font-size: 12px; color: var(--text-secondary); }

.spot-value {
  margin-top: 3px;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.spot-foot { margin-top: 3px; font-size: 11px; color: var(--text-muted); }

/* ------------------------------------------------------------- goal cards */

.section-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 600;
  font-size: 13.5px;
}

.section-bar .pill {
  margin-left: auto;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 20px;
}

.goal-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.goal-card:hover { border-color: var(--border-strong); }
.goal-card:hover .goal-head { background: var(--surface-3); }

.goal-head {
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.goal-head .hint {
  margin-left: auto;
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
}

.goal-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.goal-split > div { padding: 9px 12px; }
.goal-split > div + div { border-left: 1px solid var(--border); }

.goal-num {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

.goal-cap {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.meter-wrap { padding: 12px; }
.meter-pct { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }

.meter-pct b {
  font-size: 21px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.meter {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}

.meter-fill { height: 100%; border-radius: 999px; background: var(--series-1); }
.meter-fill.is-good { background: var(--good); }
.meter-fill.is-warning { background: var(--warning); }
.meter-fill.is-serious { background: var(--serious); }
.meter-fill.is-critical { background: var(--critical); }

.goal-stats { border-top: 1px solid var(--border); }

.goal-stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.goal-stat + .goal-stat { border-top: 1px solid var(--border); }

.goal-stat b {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chart-slot { padding: 4px 8px 10px; }
.no-trend { margin: 10px 4px 4px; font-size: 11.5px; color: var(--text-muted); }

/* Status pill: colour never travels alone — icon + label always */
.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.status svg { width: 11px; height: 11px; }
.status.is-good { color: var(--good-text); }
.status.is-bad { color: var(--critical-text); }
.status.is-none { color: var(--text-muted); font-weight: 400; }
.status.is-stretch {
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--good-text);
}

/* Progress toward the stretch target, with a tick at the minimum goal */
.goal-bar {
  position: relative;
  display: block;
  width: 100%;
  min-width: 90px;
  height: 7px;
  margin: 6px 0 2px;
  border-radius: 999px;
  background: var(--surface-3);
}
.goal-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--critical); }
.goal-bar.is-good .goal-bar-fill { background: var(--good); }
.goal-bar.is-stretch .goal-bar-fill { background: var(--good-text); }
.goal-bar-tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text-primary);
}
.goal-bar-cell { min-width: 110px; vertical-align: middle; }
.goals-stretch { display: block; font-size: 11.5px; color: var(--good-text); font-weight: 600; }
.ticket-why { margin: 3px 0 0 33px; }
.ticket-why span { display: block; font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }
.ticket-why b { color: var(--text-primary); }

.span-tabs { margin: 0 0 12px; }
.span-table td.num strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ chart */

.chart { display: block; width: 100%; overflow: visible; }
.chart .grid line { stroke: var(--gridline); stroke-width: 1; }
.chart .axis line { stroke: var(--baseline); stroke-width: 1; }

.chart .tick {
  font-size: 10px;
  fill: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.chart .goal-line {
  stroke: var(--baseline);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.chart .goal-tag { font-size: 9.5px; fill: var(--text-muted); }

.chart .series-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart .end-dot { stroke: var(--surface-1); stroke-width: 2; }
.chart .crosshair { stroke: var(--baseline); stroke-width: 1; }
.chart .hit { fill: transparent; }

.chart .end-label {
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.chart-legend {
  display: flex;
  gap: 16px;
  padding: 2px 4px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }

.key-line {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  flex: none;
}

.tooltip {
  position: fixed;
  z-index: 60;
  min-width: 140px;
  padding: 8px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 12px;
  pointer-events: none;
}

.tooltip[hidden] { display: none; }
.tooltip .tt-head { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 7px; }
.tooltip .tt-row + .tt-row { margin-top: 3px; }
.tooltip .tt-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.tooltip .tt-name { color: var(--text-secondary); margin-left: auto; }

/* ------------------------------------------------------------------ table */

.table-wrap {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 12px; text-align: left; }

thead th {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr + tr td { border-top: 1px solid var(--border); }
tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

tr.is-me td {
  background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1));
}

tr.is-me:hover td {
  background: color-mix(in srgb, var(--series-1) 14%, var(--surface-1));
}

tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--series-1); }

.rank {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-muted);
  width: 46px;
  font-variant-numeric: tabular-nums;
}

.rank.top { color: var(--text-primary); }

.who { display: flex; align-items: center; gap: 9px; }

.who .avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
  background: var(--surface-3);
  color: var(--text-secondary);
}

tr.is-me .who .avatar { background: var(--series-1); color: #fff; }
.who .name { font-weight: 500; }
tr.is-me .who .name { font-weight: 700; }

.bar-cell { width: 34%; min-width: 150px; }
.bar-cell .meter { height: 8px; }

/* ------------------------------------------------------------------ modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(11,11,11,.5);
}

.modal-backdrop[hidden] { display: none; }

.modal {
  width: min(880px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--brand-800);
  color: #fff;
}

.modal-head h2 { font-size: 15px; }
.modal-close { margin-left: auto; }
.modal-body { padding: 14px 16px 18px; overflow: auto; }
.modal-body .table-wrap { border: 0; }
.modal-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--text-secondary); }

/* -------------------------------------------------------------- utilities */

.muted { color: var(--text-muted); }

.empty {
  padding: 26px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.warnbox {
  padding: 10px 14px;
  margin-bottom: 14px;
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  font-size: 12.5px;
  color: var(--text-secondary);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 70;
  padding: 9px 16px;
  background: var(--brand-800);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: var(--shadow);
}

.toast[hidden] { display: none; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    z-index: 30;
    box-shadow: var(--shadow);
  }

  body.nav-collapsed .sidebar { display: none; }
  .content { padding: 14px; }
  .brand-text strong { display: none; }
}

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

@media print {
  .topbar, .sidebar, .filters, .modal-backdrop { display: none !important; }
  .content { padding: 0; }
}

/* =========================================================================
   Portal, sign-in and the administration console
   ========================================================================= */

/* ----------------------------------------------------------------- portal */

.portal-body {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 0 20px 48px;
  background: var(--page);
}

/* A real brand header, not a tint.

   The top third of the page is the gradient and the wordmark sits on it in
   white; everything below is an opaque surface on the page colour. Keeping
   the two apart means the cards never fight the gradient for contrast. */
.portal-bg {
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(62% 130% at 12% 0%, color-mix(in srgb, var(--series-1) 78%, transparent), transparent 66%), radial-gradient(58% 120% at 88% 6%, color-mix(in srgb, var(--series-2) 52%, transparent), transparent 62%), linear-gradient(168deg, var(--brand-900) 0%, var(--brand-800) 46%, color-mix(in srgb, var(--brand-800) 82%, var(--series-1)) 100%);
}

/* The band has to reach the page colour without leaving a seam, so the
   fade is half its height and eases rather than running straight. */
.portal-bg::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 210px;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--page) 45%, transparent) 55%, color-mix(in srgb, var(--page) 85%, transparent) 82%, var(--page) 100%);
}

.portal {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  text-align: center;
  padding-top: 52px;
}

.portal-mark {
  display: inline-block;
  width: 60px;
  height: 60px;
  padding: 3px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.portal-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portal-head { margin-bottom: 30px; }

.portal-org {
  margin: 16px 0 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.portal-title {
  margin: 4px 0 0;
  font-size: 44px;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .22);
}

/* The floor, day by day.

   One line per department on the headline KPI. Categorical colour,
   because identity is the subject and each department already owns one;
   the legend carries that identity in words so colour is never the only
   channel. One y-axis, hairline grid, the goal as a dashed reference,
   and only the endpoints labelled. */
.portal-live {
  position: relative;
  padding: 16px 18px 10px;
  margin-bottom: 18px;
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}

.portal-live[hidden] { display: none; }

.live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.live-head h2 { margin: 0; font-size: 15px; }
.live-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); }

.live-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
}

.live-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.live-key i,
.live-tip-row i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
  display: inline-block;
}

.live-plot { position: relative; }

.live-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.live-grid { stroke: var(--gridline); stroke-width: 1; }
.live-goal { stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 4 3; }
.live-goal-tag, .live-tick { font-size: 10.5px; fill: var(--text-muted); }

.live-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.live-dot { stroke: var(--surface-1); stroke-width: 2; }
.live-end { stroke: var(--surface-1); stroke-width: 2; }

.live-end-label {
  font-size: 11.5px;
  font-weight: 700;
  fill: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.live-rule { stroke: var(--border-strong); stroke-width: 1; }
.live-hit { cursor: crosshair; }

.live-tip {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  min-width: 168px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  box-shadow: var(--shadow);
  font-size: 12px;
  pointer-events: none;
  z-index: 2;
}

.live-tip[hidden] { display: none; }
.live-tip strong { display: block; margin-bottom: 5px; font-size: 12px; }

.live-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.7;
}

.live-tip-row span { color: var(--text-secondary); }
.live-tip-row b { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .live-tip { min-width: 148px; }
  .portal-live { padding: 14px 12px 8px; }
  .portal-title { font-size: 32px; }
  .live-tick, .live-goal-tag { font-size: 9px; }
  .live-end-label { font-size: 10px; }
}

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 22px 20px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.door:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--series-1) 45%, var(--border));
  box-shadow: 0 2px 4px rgba(11,11,11,.06), 0 14px 32px rgba(11,11,11,.10);
}

.door h2 { font-size: 18px; }

.door p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.door-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-primary);
}

.door-icon svg { width: 23px; height: 23px; }

.door-accent .door-icon {
  background: color-mix(in srgb, var(--series-1) 14%, var(--surface-3));
  color: var(--series-1);
}

.door-foot {
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.door-arrow { transition: transform .12s ease; }
.door:hover .door-arrow { transform: translateX(3px); }

.portal-note { margin: 26px 0 0; font-size: 12.5px; color: var(--text-muted); }

.portal-warn {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 18%, var(--surface-1));
  color: var(--text-primary);
  font-size: 12.5px;
}

/* ---------------------------------------------------------------- sign in */

.signin {
  width: min(380px, 100%);
  padding: 32px 30px 26px;
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.signin h1 { margin-top: 14px; font-size: 21px; }
.signin-sub { margin: 6px 0 22px; font-size: 13px; color: var(--text-secondary); }
.signin .field { text-align: left; margin-bottom: 14px; }

.signin .field label {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.signin input {
  width: 100%;
  margin-top: 4px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.signin .btn { width: 100%; justify-content: center; margin-top: 4px; }

.signin-error {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--critical) 12%, var(--surface-1));
  color: var(--critical-text);
  font-size: 12.5px;
}

.signin-foot { margin: 18px 0 0; font-size: 12px; color: var(--text-muted); }
.signin-foot a { color: var(--text-secondary); }

/* ---------------------------------------- sign-in page: contest countdown */
.gate-clock .clock-now {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.gate-clock .clock-time { font-size: 16px; }
.gate-clock .clock-count { text-align: center; }
.gate-clock .count-label { font-size: 11px; font-weight: 700; white-space: normal; }

.count-title {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.count-title[hidden],
.count-units[hidden],
.count-value[hidden],
.count-track[hidden] {
  display: none;
}

.count-units {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.count-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 6px;
  border-radius: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
}

.count-unit b {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.count-unit small {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.gate-clock .count-value {
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
  color: var(--text-secondary);
}

.gate-clock .count-track { height: 5px; margin-top: 10px; }

@media (max-width: 460px) {
  .gate-clock .clock-count { text-align: center; }
  .count-unit b { font-size: 20px; }
}

.sched-help { margin: 10px 2px 0; font-size: 12.5px; color: var(--text-secondary); }

/* ----------------------------------------------------------- admin chrome */

.admin-badge {
  margin-left: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.btn-small { padding: 4px 9px; font-size: 12px; }

.btn-primary {
  background: var(--series-1);
  border-color: var(--series-1);
  color: #fff;
  font-weight: 600;
}

.btn-primary:hover { background: color-mix(in srgb, var(--series-1) 85%, #000); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-quiet { background: transparent; }
.btn-quiet:hover { background: var(--surface-3); }
.btn-quiet.danger { color: var(--critical-text); border-color: transparent; }

.btn-quiet.danger:hover {
  background: color-mix(in srgb, var(--critical) 14%, var(--surface-1));
}

.topbar .btn-small { border-color: rgba(255,255,255,.22); }

.nav-dot { width: 17px; display: grid; place-items: center; }

.nav-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.navlink.is-active .nav-dot::before { opacity: 1; }

.page-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin .page-head { align-items: center; }

.hint-line {
  margin: -4px 0 16px;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.table-wrap + .hint-line { margin-top: 10px; }

/* ------------------------------------------------------------- stat tiles */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat-tile {
  padding: 13px 15px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--series-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.stat-tile.tone-good { border-left-color: var(--good); }
.stat-tile.tone-warn { border-left-color: var(--warning); }
.stat-label { font-size: 12px; color: var(--text-secondary); }

.stat-value {
  margin-top: 2px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stat-note { margin-top: 1px; font-size: 11px; color: var(--text-muted); }

/* ------------------------------------------------------------ admin cards */

.admin-card {
  margin-bottom: 18px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.admin-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.admin-card-head h2 { font-size: 13.5px; }

.admin-card-head .pill {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.admin-card-body { padding: 15px; }

.admin-card-body > .table-wrap {
  border: 0;
  border-radius: 0;
  margin: -15px;
  width: calc(100% + 30px);
}

.kv {
  display: grid;
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.kv-row {
  display: flex;
  gap: 14px;
  padding: 8px 12px;
  background: var(--surface-1);
  font-size: 13px;
}

.kv-key { flex: 0 0 180px; color: var(--text-secondary); }

.kv-val {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.kv-val.bad { color: var(--critical-text); }

.notes { display: grid; gap: 10px; }
.note-row { display: flex; gap: 12px; align-items: flex-start; }

.note-count {
  flex: none;
  min-width: 34px;
  padding: 3px 8px;
  text-align: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 22%, var(--surface-2));
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.note-row strong { font-size: 13px; }

.note-row p {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.raw-notes { margin-top: 14px; }

.raw-notes summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.note-lines {
  margin-top: 8px;
  max-height: 280px;
  overflow: auto;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.log {
  margin: 0;
  padding: 11px 13px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.log.bad { color: var(--critical-text); }

.plain-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.plain-list li + li { margin-top: 7px; }

/* ------------------------- folding cards and the searchable history lists */
.fold-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.fold-card > summary::-webkit-details-marker { display: none; }
.fold-card > summary .pill { margin-left: auto; }
.fold-card > summary:hover { background: var(--surface-2); }
.fold-card:not([open]) > summary { border-bottom: 0; }

.fold-chevron {
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(-45deg);
  transition: transform .15s;
  margin: 0 2px;
}

.fold-card[open] > summary .fold-chevron { transform: rotate(45deg); }

.fold-card .pill.is-warn {
  color: var(--critical-text);
  border-color: color-mix(in srgb, var(--critical) 35%, transparent);
}

.fold-settings > .admin-card {
  border: 0;
  box-shadow: none;
  background: none;
  margin: 0;
}

.fold-settings > .admin-card > .admin-card-head { display: none; }
.fold-settings > .admin-card > .admin-card-body { padding: 0; }

.browse-count {
  display: block;
  font-size: 12.5px;
  margin: 0 0 8px;
  min-height: 1em;
}

.browse.is-loading .browse-out { opacity: .55; transition: opacity .15s; }

.team-calls .cv-tiles {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.team-calls > * + * { margin-top: 14px; }
.mlb-section > .fold-card { margin-top: 18px; }

/* ---------------------------------------------------------- editable grid */

.grid-table td { padding: 5px 10px; vertical-align: middle; }
.grid-table th { padding: 8px 10px; }
.grid-table.compact td { padding: 7px 10px; }
.grid-table th.center, .grid-table td.center { text-align: center; }

.grid-table input[type="text"],
.grid-table input[type="number"],
.grid-table select {
  padding: 5px 8px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  min-width: 0;
}

.grid-table input[type="text"]:hover,
.grid-table input[type="number"]:hover,
.grid-table select:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.grid-table input:focus,
.grid-table select:focus {
  background: var(--surface-1);
  border-color: var(--series-1);
  outline: none;
}

.grid-table select { min-width: 120px; }
.w-full { width: 100%; }
.w-tiny { width: 66px; }

.w-color {
  width: 110px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

tr.row-dirty td {
  background: color-mix(in srgb, var(--warning) 13%, var(--surface-1));
}

tr.row-dirty td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
tr.row-off td { opacity: .55; }
tr.row-off input, tr.row-off select { color: var(--text-muted); }

.row-actions { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }

code.key {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------- switches */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-track {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  transition: background .12s ease, border-color .12s ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .12s ease, background .12s ease;
}

.switch input:checked + .switch-track {
  background: var(--good);
  border-color: var(--good);
}

.switch input:checked + .switch-track::after {
  transform: translateX(15px);
  background: #fff;
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}

.switch-label { font-size: 13px; }

/* ------------------------------------------------------------------ forms */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}

.admin-field { display: flex; flex-direction: column; gap: 5px; }

.admin-field > label {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-field input[type="text"],
.admin-field input[type="number"],
.admin-field input[type="password"],
.admin-field input[type="date"],
.admin-field select {
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.admin-help {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.color-pick { display: flex; gap: 8px; align-items: center; }

.color-pick input[type="color"] {
  width: 38px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  cursor: pointer;
}

.input-unit { display: flex; align-items: center; gap: 7px; }
.input-unit input { flex: 1; min-width: 0; }
.input-unit .unit { font-size: 12px; color: var(--text-muted); }

.stack-form { display: grid; gap: 14px; max-width: 420px; }
.stack-form .btn { justify-self: start; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.modal-body .stack-form { max-width: none; }

.action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* ------------------------------------------------------------- goal pages */

.goal-block { margin-bottom: 22px; }

.goal-block-body {
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}

.goal-block.flash .section-bar {
  background: color-mix(in srgb, var(--series-1) 20%, var(--surface-3));
}

.goal-form {
  display: grid;
  grid-template-columns: 150px 170px minmax(200px, 1fr) minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.goal-form-submit { display: flex; }
.scope-pick { display: flex; gap: 8px; }
.scope-pick select { flex: 1; min-width: 0; }
.scope-target:empty { display: none; }
.scope-target select { width: 100%; }

@media (max-width: 1080px) {
  .goal-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goal-form-submit { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- save bar */

.savebar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 18px;
  background: var(--brand-800);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
  font-size: 13px;
}

.savebar[hidden] { display: none; }

.savebar .btn {
  border-color: rgba(255,255,255,.24);
  color: #fff;
  background: rgba(255,255,255,.08);
}

.savebar .btn:hover { background: rgba(255,255,255,.18); }

.savebar .btn-primary {
  background: var(--series-1);
  border-color: var(--series-1);
}

.toast-bad { background: var(--critical); }
.toast-ok { background: var(--brand-800); }

@media (max-width: 900px) {
  .kv-key { flex-basis: 120px; }
  .settings-grid { grid-template-columns: 1fr; }
}

/* Topbar items keep their natural width; only the spacer grows. Without
   this the sign-out button stretches across the whole bar. */
.topbar > * { flex: 0 0 auto; }
.topbar .topbar-spacer { flex: 1 1 auto; }

.brand-text strong,
.brand-text span,
.clock,
.freshness,
.whoami-name {
  white-space: nowrap;
}

/* --------------------------------------------------- goals: one at a time */

.goal-picker {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.goal-picker select { min-width: 240px; }

.goal-picker .in-force {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.goal-picker .in-force b {
  font-size: 19px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.source-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.source-tag.is-override {
  background: color-mix(in srgb, var(--series-1) 16%, var(--surface-3));
  color: var(--series-1);
}

.source-tag.is-none {
  background: color-mix(in srgb, var(--warning) 20%, var(--surface-3));
  color: var(--text-primary);
}

/* .btn-ghost is full width in the sidebar footer, but must not be in the
   top bar -- that is what stretched the sign-out button across the header. */
.nav-foot .btn-ghost { width: 100%; justify-content: center; }
.topbar .btn-ghost { width: auto; }

/* --------------------------------------------------------- goals in force */
.goals-now td { vertical-align: middle; }

.goals-value span:first-child {
  display: block;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.goals-src {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  min-height: 1em;
}

.goals-value.is-different {
  background: color-mix(in srgb, #eda100 10%, transparent);
}

.goals-dir { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }

.goals-own {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: color-mix(in srgb, #4a3aa7 10%, var(--surface-1));
  border: 1px solid color-mix(in srgb, #4a3aa7 22%, transparent);
  white-space: nowrap;
}

/* =========================================================================
   Departments
   ========================================================================= */

.dept-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.dept-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.dept-tab:hover { border-color: var(--border-strong); color: var(--text-primary); }

.dept-tab.is-active {
  background: var(--surface-3);
  border-color: var(--text-muted);
  color: var(--text-primary);
  font-weight: 600;
}

.dept-dot {
  display: inline-block;
  vertical-align: middle;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.dept-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text-secondary);
}

.dept-tab.is-active .dept-count { background: var(--surface-1); }

/* The department a person belongs to, beside their name */
.dept-chip {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--chip, var(--series-1));
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: middle;
}

.dept-chip.is-none {
  background: rgba(255, 255, 255, .18);
  color: var(--text-on-brand);
  font-weight: 400;
}

/* --------------------------------------------------- side-by-side compare */

.compare { margin-bottom: 22px; }

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}

.compare-panel {
  padding: 12px 14px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.compare-title { font-size: 13px; margin-bottom: 9px; }

.compare-row {
  display: grid;
  grid-template-columns: 96px 1fr 44px 62px;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  font-size: 12px;
}

.compare-dept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.compare-fill { height: 100%; border-radius: 999px; }

.compare-pct {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.compare-raw {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .compare-row { grid-template-columns: 84px 1fr 42px; }
  .compare-raw { display: none; }
}

/* =========================================================================
   Manager console — task cards, people picking, department panels
   ========================================================================= */

.nav-badge {
  margin-left: auto;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.nav-badge.warn { background: var(--warning); color: #241a00; }
.navlink.is-active .nav-badge { background: rgba(255, 255, 255, .28); }

.nav-toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 18px;
  padding: 8px 11px;
  font: inherit;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle-group:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.nav-toggle-group svg {
  width: 15px;
  height: 15px;
  transition: transform .12s ease;
}

.nav-toggle-group.is-open svg { transform: rotate(180deg); }
.nav-group[hidden] { display: none; }

/* ------------------------------------------------------------- task cards */

.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.task-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--series-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease;
}

.task-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.task-card.tone-warn { border-left-color: var(--warning); }
.task-card.tone-good { border-left-color: var(--good); }

.task-step {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-3);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}

.task-body { flex: 1; min-width: 0; }
.task-body h2 { font-size: 15.5px; margin-bottom: 4px; text-wrap: balance; }

.task-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.task-badge {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.task-badge.tone-warn {
  background: color-mix(in srgb, var(--warning) 26%, var(--surface-1));
  color: var(--text-primary);
}

.task-badge.tone-good {
  background: color-mix(in srgb, var(--good) 16%, var(--surface-1));
  color: var(--good-text);
}

.task-go {
  align-self: flex-end;
  font-size: 12px;
  font-weight: 600;
  color: var(--series-1);
  white-space: nowrap;
}

/* ------------------------------------------------------- department strip */

.dept-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.dept-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dept-card:hover { border-color: var(--border-strong); }

.dept-card.is-warn {
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-1));
}

.dept-bar {
  width: 4px;
  align-self: stretch;
  border-radius: 999px;
  flex: none;
}

.dept-card-name { font-weight: 600; font-size: 13.5px; }
.dept-card-count { font-size: 12px; color: var(--text-secondary); }

/* ---------------------------------------------------------------- callout */

.callout {
  display: block;
  padding: 11px 15px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--series-1);
  background: var(--surface-1);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.callout.warn {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-1));
}

.callout strong { color: var(--text-primary); }

/* --------------------------------------------------------- people picking */

.tick-col { width: 38px; text-align: center; }

.tick-col input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--series-1);
}

tr.row-picked td {
  background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1));
}

tr.row-picked.row-dirty td {
  background: color-mix(in srgb, var(--warning) 13%, var(--surface-1));
}

.assignbar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 56;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 18px;
  background: var(--brand-800);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
  font-size: 13px;
}

.assignbar[hidden] { display: none; }

.assignbar select {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .26);
  min-width: 150px;
}

.assignbar select option {
  color: var(--text-primary);
  background: var(--surface-1);
}

.assignbar .btn {
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.assignbar .btn:hover { background: rgba(255, 255, 255, .18); }

.assignbar .btn-primary {
  background: var(--series-1);
  border-color: var(--series-1);
}

.assign-count { font-weight: 600; }

/* When both bars could show, the save bar steps aside. */
.assignbar:not([hidden]) ~ .savebar { bottom: 74px; }

/* ------------------------------------------------------ department panels */

.dept-manage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dept-panel {
  display: flex;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dept-panel.row-dirty { border-color: var(--warning); }
.dept-panel-bar { width: 5px; flex: none; }

.dept-panel-body {
  flex: 1;
  min-width: 0;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.dept-panel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

.dept-panel-foot .muted { margin-right: auto; }

/* Four steps read as four steps in a 2x2 block, not 3 + 1. */
@media (min-width: 900px) {
  .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   Department chooser, import, formulas
   ========================================================================= */

.dept-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12.5px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  cursor: pointer;
}

.dept-switch:hover { background: rgba(255, 255, 255, .2); }
.dept-switch svg { width: 14px; height: 14px; }
.dept-switch[hidden] { display: none; }

.chooser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.chooser-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease;
}

.chooser-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.chooser-bar { width: 6px; flex: none; }

.chooser-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 4px 20px 0;
  flex: 1;
}

.chooser-name { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.chooser-stat { font-size: 12.5px; color: var(--text-secondary); }
.chooser-last { font-size: 12px; color: var(--text-muted); }
.chooser-last.is-none { color: var(--critical-text); }
.chooser-last.is-stale { color: var(--warning); font-weight: 600; }

.chooser-go {
  align-self: center;
  padding-right: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--series-1);
  white-space: nowrap;
}

/* --------------------------------------------------------------- dropzone */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 34px 20px;
  margin-bottom: 18px;
  text-align: center;
  background: var(--surface-1);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.dropzone:hover,
.dropzone.is-over {
  border-color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1));
}

.dropzone.is-loaded { border-style: solid; border-color: var(--good); }
.dropzone-title { font-size: 15px; font-weight: 600; }
.dropzone-sub { font-size: 12.5px; color: var(--text-secondary); }

.import-queue {
  list-style: none;
  margin: -8px 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.import-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 5px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.import-queue-item.is-current {
  color: var(--text-primary);
  font-weight: 600;
  border-color: var(--series-1);
}

.import-queue-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--border-strong);
}

.import-queue-item.is-current .import-queue-dot { background: var(--series-1); }

.import-queue-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-queue-summary { font-size: 12px; color: var(--good); padding: 3px 10px; }

.import-result { display: block; }

.assign-pick {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.assign-pick .admin-field { min-width: 240px; }
.assign-pick-go { margin-left: auto; }

/* --------------------------------------------------------------- formulas */

.formula-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.formula-note { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.formula-note.is-ok { color: var(--good-text); }
.formula-note.is-warn { color: var(--text-primary); }
.formula-note.is-bad { color: var(--critical-text); }

.col-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.col-chip {
  padding: 3px 9px;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.col-chip:hover { border-color: var(--series-1); color: var(--text-primary); }

.callout code.key { font-size: 11.5px; }
body.no-dept .nav-heading { opacity: .5; }

/* =========================================================================
   Leaderboard: one KPI at a time
   ========================================================================= */

.kpi-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  padding-bottom: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.kpi-tab {
  padding: 9px 15px;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.kpi-tab:hover { color: var(--text-primary); }

.kpi-tab.is-active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--series-1);
}

.board-head {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
}

.board-head h2 { font-size: 17px; }
.board-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); }

.board-stat { display: flex; flex-direction: column; line-height: 1.3; }
.board-stat:nth-of-type(2) { margin-left: auto; }

.board-stat .label {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.board-stat .value { font-size: 15px; font-weight: 600; }

.board-stat .sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.bars-wrap {
  padding: 14px 16px 6px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow-x: auto;
}

.chart.bars { width: 100%; min-width: 560px; }
.chart.bars .bar { transition: opacity .1s ease; }
.chart.bars .hit:hover ~ .bar { opacity: 1; }
.chart.bars .bar.is-me { stroke: var(--text-primary); stroke-width: 2; }

.chart.bars .bar-rank {
  font-size: 12px;
  fill: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-anchor: end;
}

.chart.bars .bar-name { font-size: 12.5px; fill: var(--text-secondary); }
.chart.bars .bar-name.is-me { fill: var(--text-primary); font-weight: 700; }

.chart.bars .bar-value {
  font-size: 12px;
  fill: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chart.bars .bar-pct {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.chart.bars .bar-pct.is-good { fill: var(--good-text); }
.chart.bars .bar-pct.is-bad { fill: var(--critical-text); }

.board-trend {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.board-trend-title {
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.chart.bars .bar-head {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

/* ---------------------------------------------------------------- the board

   One row per agent: rank, who, movement, bar, score, goal, verdict. The
   bar and the numbers used to be two separate blocks showing the same
   seven people; they are one line now.

   Colour rules that hold here: every bar is the department's one colour,
   because length is the comparison and colour would be a second encoding
   saying nothing new. The medal tint on the top three sits *behind* a rank
   number that already says the same thing, and movement is an arrow plus a
   figure before it is ever a colour.
   ------------------------------------------------------------------------ */

.lb {
  --lb-color: var(--series-1);
  --lb-rank-w: 52px;
  --lb-who-w: 210px;
  --lb-move-w: 68px;
  --lb-value-w: 162px;
  --lb-goal-w: 108px;
  --lb-status-w: 124px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  overflow: hidden;
}

.lb-head,
.lb-row {
  display: grid;
  grid-template-columns: var(--lb-rank-w) var(--lb-who-w) var(--lb-move-w) minmax(120px, 1fr) var(--lb-value-w) var(--lb-goal-w) var(--lb-status-w);
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.lb.no-move .lb-head,
.lb.no-move .lb-row {
  grid-template-columns: var(--lb-rank-w) var(--lb-who-w) minmax(120px, 1fr) var(--lb-value-w) var(--lb-goal-w) var(--lb-status-w);
}

.lb.no-goal .lb-head,
.lb.no-goal .lb-row {
  grid-template-columns: var(--lb-rank-w) var(--lb-who-w) var(--lb-move-w) minmax(120px, 1fr) var(--lb-value-w);
}

.lb.no-goal.no-move .lb-head,
.lb.no-goal.no-move .lb-row {
  grid-template-columns: var(--lb-rank-w) var(--lb-who-w) minmax(120px, 1fr) var(--lb-value-w);
}

.lb-head {
  height: 38px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.lb-head .lb-value, .lb-head .lb-goal { text-align: right; }
.lb-head .lb-value { letter-spacing: .02em; }
/* Headings stay on one line; a KPI with a long name loses its tail
   rather than pushing the header row to two lines. */
.lb-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lb-row {
  min-height: 54px;
  border-bottom: 1px solid var(--border);
  transition: background-color 160ms ease, transform 160ms ease;
}

.lb-row:last-of-type { border-bottom: 0; }
.lb-row:hover { background: var(--surface-2); }
.lb-row:focus-visible { outline: 2px solid var(--series-1); outline-offset: -2px; }

/* Rank. The number is the signal; the medal is decoration that agrees
   with it, so the board still reads in greyscale. */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.lb-row.rank-1 .rank-badge {
  color: #4a3200;
  background: linear-gradient(160deg, #ffd977, #e0a32a);
  border-color: #c9901f;
  box-shadow: 0 1px 4px rgba(200, 145, 30, .45);
}

.lb-row.rank-2 .rank-badge {
  color: #33383d;
  background: linear-gradient(160deg, #e8edf2, #b7c1cb);
  border-color: #a4afba;
}

.lb-row.rank-3 .rank-badge {
  color: #4a2f16;
  background: linear-gradient(160deg, #f0c193, #cf9057);
  border-color: #bd7f47;
}

.lb-row.rank-1 {
  background: color-mix(in srgb, #e0a32a 7%, var(--surface-1));
  box-shadow: inset 4px 0 0 var(--gold);
}

.lb-row.rank-1:hover {
  background: color-mix(in srgb, #e0a32a 12%, var(--surface-1));
}

.lb-who {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.lb-who .name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-row.rank-1 .lb-who .name { font-size: 15.5px; }

.lb-row.is-me .lb-who .name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #4a3200;
  background: #ffd977;
}

/* Movement. Arrow + number first, colour only in support. */
.move-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-secondary);
}

.move-tag.is-up { color: var(--good-text); }
.move-tag.is-down { color: var(--critical-text); }

.move-tag.is-new {
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.move-tag.is-flat { opacity: .65; }

/* The bar. One colour, length carries the comparison, the goal is a
   notch rather than a second bar. */
.lb-track {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.lb-bar {
  height: 100%;
  border-radius: 6px;
  background: var(--lb-color);
  transition: width 260ms cubic-bezier(.2, .7, .3, 1);
  transform-origin: left center;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.22));
}

.lb-row.rank-1 .lb-bar {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lb-color) 45%, transparent);
}

.lb-row.is-me .lb-bar {
  outline: 2px solid var(--text-primary);
  outline-offset: 1px;
}

.lb-goal-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--baseline, var(--text-secondary));
  opacity: .8;
}

.lb-value {
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lb-goal { text-align: right; line-height: 1.25; }

.lb-goal-num {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.lb-pct {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lb-pct.is-good { color: var(--good-text); }
.lb-pct.is-bad { color: var(--critical-text); }

.lb-foot {
  margin: 0;
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text-secondary);
}

/* Narrow screens: the goal column and movement fold away before the
   ranking itself becomes unreadable. */
@media (max-width: 1060px) {
  .lb-head .lb-goal, .lb-row .lb-goal { display: none; }

  .lb-head,
  .lb-row,
  .lb.no-move .lb-head,
  .lb.no-move .lb-row {
    grid-template-columns: var(--lb-rank-w) minmax(110px, 1.2fr) var(--lb-move-w) minmax(80px, 1fr) var(--lb-value-w) var(--lb-status-w);
  }
}

@media (max-width: 800px) {
  .lb-head .lb-status,
  .lb-row .lb-status,
  .lb-head .lb-move,
  .lb-row .lb-move {
    display: none;
  }

  .lb-head,
  .lb-row,
  .lb.no-move .lb-head,
  .lb.no-move .lb-row {
    grid-template-columns: 42px minmax(96px, 1.1fr) minmax(70px, 1fr) 86px;
  }

  .lb { --lb-rank-w: 42px; }
}

/* An import whose day a later file has replaced: kept for the record,
   but not the numbers in use. Dimmed *and* labelled -- the label does
   the work, the dimming only supports it. */
.grid-table tr.is-replaced td { opacity: .62; }

.pill-quiet {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--text-secondary);
  background: var(--surface-2);
  vertical-align: 1px;
}

/* A twelve-week shape beside the numbers on the One agent page. One line,
   one colour; the dashed baseline is the goal, so above-or-below is
   answerable without reading a value off it. */
.sparkline {
  width: 132px;
  height: 34px;
  display: block;
  overflow: visible;
}

.spark-line {
  fill: none;
  stroke: var(--series-1);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spark-goal { stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 3 3; }
.spark-dot { fill: var(--series-1); }

.grid-table .is-good { color: var(--good-text); }
.grid-table .is-bad { color: var(--critical-text); }

/* ------------------------------------------------ the board on a phone

   The agent view is the only page somebody reads on a handset, and it is
   now a single board, so the narrow layout matters. Things drop in order
   of how little they carry: the read-only tag, then the Leading pill
   (the gold rank badge already says it), then the avatar, so the name
   keeps as much room as possible. */

@media (max-width: 760px) {
  .topbar-tag { display: none; }
  .topbar { overflow: hidden; }
  .content { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 800px) {
  .lead-tag { display: none; }
  .lb-row.rank-1 .lb-who .name { font-size: inherit; }
}

@media (max-width: 560px) {
  .lb-who .avatar { display: none; }
  .lb { --lb-rank-w: 38px; }

  .lb-head,
  .lb-row,
  .lb.no-move .lb-head,
  .lb.no-move .lb-row {
    gap: 10px;
    padding: 0 12px;
    grid-template-columns: var(--lb-rank-w) minmax(84px, 1.3fr) minmax(52px, .8fr) 82px;
  }

  .lb-value { font-size: 14px; }
  /* "OCCUPA…" helps nobody. The KPI is named twice above the board and
     the figures carry their own units. */
  .lb-head .lb-value { visibility: hidden; }
}

/* ------------------------------------------------- the Agents roster

   The department cell wears the department's own colour, the same one it
   has on every board, so the grouping reads the same everywhere. The name
   is written out beside it -- the colour is a second read, never the only
   one. */

.dept-cell {
  --dept: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dept-swatch {
  flex: none;
  width: 4px;
  align-self: stretch;
  min-height: 26px;
  border-radius: 2px;
  background: var(--dept);
}

.dept-cell.is-none .dept-swatch { opacity: .45; }

.dept-cell select {
  min-width: 0;
  border-color: color-mix(in srgb, var(--dept) 45%, var(--border));
  background: color-mix(in srgb, var(--dept) 8%, var(--surface-1));
  font-weight: 600;
}

.dept-cell.is-none select { background: var(--surface-1); font-weight: 400; }
.dept-cell select:disabled { opacity: .55; }

.grid-table tr.is-archived td { opacity: .58; }
.grid-table tr.is-archived .avatar { filter: grayscale(1); }

/* One agent -> Where the time went: an excluded or flagged day. */
.grid-table tr.is-excluded td:not(.toggle-cell) { opacity: .5; }

.grid-table tr.is-idle-flag td {
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-1));
}

.idle-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--warning) 26%, var(--surface-1));
  color: var(--text-primary);
}

.idle-flag.is-excluded-tag {
  background: var(--surface-3);
  color: var(--text-secondary);
}

.toggle-cell { text-align: center; }

.exclude-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.exclude-toggle input { cursor: pointer; }

.stack-row.is-excluded { opacity: .5; }

/* The panel that opens under a row. */
.editor-row > td { padding: 0 !important; background: var(--surface-2); }
.agent-editor { padding: 16px 18px 14px; border-top: 2px solid var(--series-1); }

.agent-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 20px;
  margin-bottom: 14px;
}

.agent-editor-grid input, .agent-editor-grid select { width: 100%; }

.agent-editor-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.agent-editor-foot .spacer { flex: 1 1 auto; }
.agent-editor .hint-line { margin: 10px 0 0; max-width: 62ch; }
.btn.is-on { background: var(--surface-3); font-weight: 600; }

/* ======================================================================
   One agent — the review
   ====================================================================== */

.review-hero {
  --dept: var(--series-1);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.review-hero.has-dept { border-left: 4px solid var(--dept); }
.avatar-lg { width: 46px; height: 46px; font-size: 16px; }
.review-who { min-width: 0; flex: 1 1 auto; }
.review-who h2 { font-size: 20px; margin: 0 0 2px; }
.review-who .hint-line { margin: 0; }
.review-when { text-align: right; line-height: 1.3; }

.review-when .label {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.review-when .value { font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------- the sentences */
.flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.flag {
  display: flex;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.flag-mark {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--text-secondary);
}

.flag strong { display: block; font-size: 13.5px; }

.flag-why {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.flag.is-good { border-color: color-mix(in srgb, var(--good) 38%, var(--border)); }

.flag.is-good .flag-mark {
  background: color-mix(in srgb, var(--good) 20%, var(--surface-1));
  color: var(--good-text);
}

.flag.is-watch {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.flag.is-watch .flag-mark {
  background: color-mix(in srgb, var(--warning) 26%, var(--surface-1));
  color: var(--text-primary);
}

.flag.is-concern {
  border-color: color-mix(in srgb, var(--critical) 40%, var(--border));
}

.flag.is-concern .flag-mark {
  background: color-mix(in srgb, var(--critical) 18%, var(--surface-1));
  color: var(--critical-text);
}

/* -------------------------------------------------- effort against output */
.effort-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.effort-tile {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.effort-tile .label {
  display: block;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.effort-tile .value {
  display: block;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  margin: 3px 0 1px;
}

.effort-tile .sub { display: block; font-size: 12px; color: var(--text-secondary); }

/* ---- where the time went ----

   A stacked bar per day. Every bar is drawn to one shared minute scale,
   so bar length is the day's length — the thing being looked for. The
   segments are separated by a 2px surface gap rather than a border, and
   three of the six light-mode hues sit under 3:1 on the light surface, so
   the legend and the table underneath carry the identity in words. */

.stacks { margin-bottom: 14px; }

.stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-item { display: inline-flex; align-items: center; gap: 7px; }

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
  vertical-align: -1px;
}

.legend-swatch.slot-1 { background: var(--series-1); }
.legend-swatch.slot-2 { background: var(--series-2); }
.legend-swatch.slot-3 { background: var(--series-3); }
.legend-swatch.slot-4 { background: var(--series-4); }
.legend-swatch.slot-5 { background: var(--series-5); }
.legend-swatch.slot-6 { background: var(--series-6); }

.stack-row {
  display: grid;
  grid-template-columns: 110px minmax(120px, 1fr) 66px;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.stack-day { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }

.stack-track {
  position: relative;
  display: flex;
  gap: 2px;
  height: 26px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.stack-seg { min-width: 2px; }
.stack-seg:first-child { border-radius: 6px 0 0 6px; }
.stack-seg:last-of-type { border-radius: 0 6px 6px 0; }
.stack-seg:only-of-type { border-radius: 6px; }

.stack-seg:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.stack-seg.slot-1 { background: var(--series-1); }
.stack-seg.slot-2 { background: var(--series-2); }
.stack-seg.slot-3 { background: var(--series-3); }
.stack-seg.slot-4 { background: var(--series-4); }
.stack-seg.slot-5 { background: var(--series-5); }
.stack-seg.slot-6 { background: var(--series-6); }

.stack-shift {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 0;
  border-left: 2px dashed var(--baseline);
  pointer-events: none;
}

.stack-total {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stack-note { margin: 10px 0 0; font-size: 12px; color: var(--text-secondary); }

@media (max-width: 900px) {
  .stack-row { grid-template-columns: 84px minmax(90px, 1fr) 58px; gap: 8px; }
}

/* The way back to the front page. The brand mark has always linked there,
   but nothing said so -- on a page with no menu at all, the one route out
   should be a button you can see. */
.topbar-back {
  margin-left: 10px;
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  background: rgba(255, 255, 255, .08);
  white-space: nowrap;
}

.topbar-back:hover { background: rgba(255, 255, 255, .18); }
.topbar-back svg { width: 15px; height: 15px; }

@media (max-width: 620px) {
  .topbar-back span { display: none; }
  .topbar-back { padding-left: 9px; padding-right: 9px; }
}

/* ======================================================================
   The gate — sign in, and choosing a password

   Everything on the site sits behind this, so it is the first thing
   anybody sees. Same brand gradient as the front page, one card, and a
   shift clock that is the only moving part.
   ====================================================================== */

.gate-body {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--page);
}

.gate-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(52% 58% at 14% 6%, color-mix(in srgb, var(--series-1) 62%, transparent), transparent 66%), radial-gradient(48% 54% at 86% 10%, color-mix(in srgb, var(--series-2) 42%, transparent), transparent 62%), linear-gradient(165deg, var(--brand-900) 0%, var(--brand-800) 52%, color-mix(in srgb, var(--brand-800) 78%, var(--series-1)) 100%);
}

.gate { position: relative; z-index: 1; width: min(440px, 100%); }

.gate-card {
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.gate-head { text-align: center; margin-bottom: 18px; }

.gate-mark {
  display: inline-block;
  width: 56px;
  height: 56px;
  padding: 3px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.gate-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gate-org {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.gate-title { margin: 3px 0 0; font-size: 26px; letter-spacing: -0.02em; }

.gate-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* The shift clock. */
.gate-clock {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.clock-now { text-align: left; }

.clock-time {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.clock-day { display: block; font-size: 11.5px; color: var(--text-secondary); }
.clock-count { text-align: right; min-width: 0; }

.count-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.count-value {
  display: block;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.count-track {
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  overflow: hidden;
}

.count-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--series-1);
  transition: width 1s linear;
}

.gate-form { display: grid; gap: 14px; }
.gate-field { display: grid; gap: 5px; }

.gate-field label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.gate-field input {
  width: 100%;
  padding: 11px 12px;
  font-size: 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-primary);
}

.gate-field input:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 1px;
  border-color: var(--series-1);
}

#username { text-transform: uppercase; letter-spacing: .04em; }
.gate-hint { font-size: 11.5px; color: var(--text-muted); }

.gate-submit {
  width: 100%;
  justify-content: center;
  padding: 11px;
  font-size: 15px;
}

.gate-error {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--critical-text);
  background: color-mix(in srgb, var(--critical) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--critical) 38%, var(--border));
}

.gate-error[hidden] { display: none; }

.gate-note {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.gate-note code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-3);
  font-size: 12px;
}

.gate-foot {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}

.gate-foot a { color: rgba(255, 255, 255, .86); }
.gate-foot.is-warn { color: #ffd977; }

@media (max-width: 460px) {
  .clock-count { text-align: left; }
}

/* The agent's two tabs, and their own scorecard. */
.view-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 0;
  flex-wrap: wrap;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface-1);
  box-shadow: var(--shadow);
}

.view-tab {
  padding: 9px 16px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  --tab: var(--pop-1);
  position: relative;
  border: 0;
  margin: 0;
  border-radius: 10px;
  transition: background-color 160ms ease, color 160ms ease;
}

.view-tab:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--tab) 10%, transparent);
}

.view-tab.is-active {
  color: #fff;
  background: var(--tab);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tab) 40%, transparent);
}

.me-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.me-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--critical);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.me-card.is-good { border-left-color: var(--good); }

.me-label {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.me-value {
  display: block;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  margin: 4px 0 1px;
}

.me-goal { display: block; font-size: 12px; color: var(--text-secondary); }

.me-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.me-rank {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ------------------------------------------------------- segmented switch */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.seg-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  transition: background .12s, color .12s;
}

.seg-btn:hover { color: var(--text-primary); }

.seg-btn.is-on {
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.seg-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------------------------------------------------- how the calls ended */
.bucket-list { display: grid; gap: 9px; }

.bucket-row {
  display: grid;
  grid-template-columns: 190px 1fr 92px;
  align-items: center;
  gap: 12px;
}

.bucket-name { font-size: 13px; color: var(--text-secondary); }

.bucket-track {
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
}

.bucket-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--ordinal-4);
}

.bucket-n {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 620px) {
  .bucket-row { grid-template-columns: 1fr 74px; }
  .bucket-track { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------- result codes */
.legend-table { table-layout: fixed; }

.legend-table td.legend-code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-table select { width: 100%; }

/* -------------------------------------------------------------- merge box */
.merge-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.merge-box > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  list-style: none;
  width: fit-content;
}

.merge-box > summary::-webkit-details-marker { display: none; }
.merge-box > summary::before { content: '▸ '; color: var(--text-muted); }
.merge-box[open] > summary::before { content: '▾ '; }
.merge-box > summary:hover { color: var(--text-primary); }

.merge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.merge-lead { font-size: 13px; color: var(--text-secondary); }
.merge-row select { min-width: 240px; }

/* ---------------------------------------------------- the countdown strip */
/* A manager sets the date under Appearance; every signed-in page carries
   the same strip in its header, so the floor is watching one clock. The
   digits are tabular so the row does not jitter as the seconds change
   width, and the full date lives in the tooltip. */
.portal-countdown[hidden] { display: none; }

.topbar .portal-countdown:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 5px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #fff;
}

.topbar .cd-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-on-brand);
  white-space: nowrap;
}

.topbar .cd-units:not([hidden]) { display: flex; gap: 10px; margin: 0; }
.topbar .cd-units[hidden], .topbar .cd-done[hidden] { display: none; }

.topbar .cd-unit {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 0;
  background: none;
  border: 0;
}

.topbar .cd-num {
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.topbar .cd-lab {
  margin: 0;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-on-brand);
}

.topbar .cd-done { margin: 0; font-size: 15px; font-weight: 700; }
.topbar .cd-when { display: none; }

/* Too narrow for one line: the header grows a second row and the
   countdown takes it, centred under everything else. */
@media (max-width: 1100px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-h);
    padding-block: 8px;
    row-gap: 6px;
  }

  .topbar .portal-countdown:not([hidden]) {
    order: 10;
    flex: 1 0 100%;
    justify-content: center;
  }
}

/* On a phone the clock is the one thing the countdown row makes
   redundant, so it goes first. */
@media (max-width: 560px) {
  .topbar .topbar-meta { display: none; }
  .topbar .portal-countdown:not([hidden]) { gap: 10px; padding-inline: 10px; }
  .topbar .cd-units:not([hidden]) { gap: 8px; }
}

/* --------------------------------------------------------- call analytics */
.calls-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.calls-controls .seg { margin-bottom: 0; }
.calls-pick { display: flex; align-items: center; gap: 9px; }

.calls-pick > span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.calls-pick select { min-width: 250px; }

/* The headline row. */
.call-tiles {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.call-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 16px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.call-tile-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.call-tile-value {
  font-size: 27px;
  line-height: 1.15;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.call-tile-note { font-size: 12px; color: var(--text-secondary); }
.call-tile-delta { margin-top: 5px; font-size: 12px; color: var(--text-muted); }
.call-tile-delta.is-up { color: var(--good-text); }
.call-tile-delta.is-down { color: var(--critical-text); }

/* The funnel: ordered stages, one hue getting darker as calls fall away.
   Every row is named and numbered, so the colour is never the signal. */
.funnel { display: grid; gap: 10px; }

.funnel-row {
  display: grid;
  align-items: center;
  gap: 14px;
  grid-template-columns: 210px 1fr 118px;
}

.funnel-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.funnel-stage { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.funnel-note { font-size: 11.5px; color: var(--text-muted); }

.funnel-track {
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
}

.funnel-fill { display: block; height: 100%; border-radius: 6px; }

.funnel-figures {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 9px;
}

.funnel-n { font-size: 16px; font-variant-numeric: tabular-nums; }

.funnel-share {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Hour of day: two counts on one scale, the handled bar in front of the
   attempts bar, with a 2px surface gap so the two never merge. */
.hours {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 170px;
  padding-top: 8px;
}

.hour-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

.hour-stack {
  position: relative;
  width: 100%;
  max-width: 34px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hour-all,
.hour-agent {
  position: absolute;
  bottom: 0;
  display: block;
  border-radius: 4px 4px 0 0;
}

.hour-all { width: 100%; background: var(--ordinal-1); }

.hour-agent {
  width: 58%;
  background: var(--ordinal-5);
  box-shadow: 0 0 0 2px var(--surface-1);
}

.hour-label {
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.legend-swatch.swatch-all { background: var(--ordinal-1); }
.legend-swatch.swatch-agent { background: var(--ordinal-5); }

.mini-track {
  display: block;
  width: 100px;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
}

.mini-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--ordinal-4);
}

.sub-head {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sub-head:first-child { margin-top: 0; }
.linky { color: var(--brand-link, var(--series-1)); text-decoration: none; }
.linky:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .funnel-row { grid-template-columns: 1fr 96px; }
  .funnel-track { grid-column: 1 / -1; order: 3; }
  .hours { height: 140px; gap: 3px; }
  .hour-label { font-size: 9.5px; }
}

/* ----------------------------------------------------- not ready alerts */
.nr-tabs { margin: -4px 0 14px; }

.nr-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.nr-pill.is-ok { color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, var(--surface-1)); }
.nr-pill.is-approaching { color: #6b4a00; background: color-mix(in srgb, var(--warning) 28%, var(--surface-1)); }
.nr-pill.is-reached { color: #fff; background: #d9822b; }
.nr-pill.is-exceeded { color: #fff; background: var(--critical); }

.nr-tile.is-exceeded { border-color: color-mix(in srgb, var(--critical) 50%, var(--border));
  background: color-mix(in srgb, var(--critical) 10%, var(--surface-1)); }
.nr-tile.is-reached { border-color: color-mix(in srgb, #d9822b 50%, var(--border));
  background: color-mix(in srgb, #d9822b 10%, var(--surface-1)); }
.nr-tile.is-approaching { border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-1)); }

.nr-table td { vertical-align: top; }
.nr-table tr.is-exceeded > td:first-child { box-shadow: inset 4px 0 0 var(--critical); }
.nr-table tr.is-reached > td:first-child { box-shadow: inset 4px 0 0 #d9822b; }
.nr-table tr.is-approaching > td:first-child { box-shadow: inset 4px 0 0 var(--warning); }
.nr-total { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }

.nr-meter {
  display: block;
  width: 100%;
  min-width: 80px;
  height: 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.nr-meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.nr-meter-fill.is-approaching { background: var(--warning); }
.nr-meter-fill.is-reached { background: #d9822b; }
.nr-meter-fill.is-exceeded { background: var(--critical); }
.nr-uncounted { color: var(--text-muted); font-style: italic; }
.nr-table td.is-exceeded { color: var(--critical-text); font-weight: 700; }
.nr-table td.is-reached { color: #a35a12; font-weight: 700; }

.nr-excused {
  display: block;
  font-size: 10.5px;
  font-style: normal;
  color: var(--text-secondary);
}

.nr-cat-alert { display: block; margin-top: 3px; font-size: 11px; }
.nr-cat-alert.is-exceeded { color: var(--critical-text); }
.nr-cat-alert.is-reached { color: #a35a12; }
.nr-cat-alert.is-approaching { color: #7a5a00; }
.nr-why { max-width: 260px; font-size: 12px; color: var(--text-secondary); }
.nr-foot { margin-top: 10px; }
.nr-jump { margin-left: 8px; }
.nr-why .nr-edit { display: block; margin-top: 6px; }
.nr-own {
  margin-right: 4px;
  color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 12%, var(--surface-1));
}

.nr-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px 14px;
  align-items: end;
}

.nr-form .admin-field { margin: 0; }
.nr-form .btn { justify-self: start; }
.nr-end { display: inline-flex; gap: 6px; align-items: center; }
.nr-actions > * + * { margin-left: 6px; }
.nr-end input { width: 140px; }

.check-list { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.check-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* the agent's own lunch and break, above every agent tab */
.break-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 13px;
}

.break-strip-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.break-item { display: inline-flex; align-items: center; gap: 8px; min-width: 210px; }
.break-item strong { min-width: 44px; }
.break-item .nr-meter { width: 110px; min-width: 110px; margin: 0; }
.break-item .break-left { color: var(--text-secondary); white-space: nowrap; }
.break-item.is-approaching .break-left { color: #7a5a00; font-weight: 700; }
.break-item.is-reached .break-left { color: #a35a12; font-weight: 700; }
.break-item.is-exceeded .break-left { color: var(--critical-text); font-weight: 700; }
.break-used { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
  .break-item { min-width: 100%; }
  .break-item .nr-meter { flex: 1 1 auto; width: auto; min-width: 50px; }
}
@keyframes rca-flash { 0%, 100% { background: transparent; } 30% { background: color-mix(in srgb, var(--warning) 35%, transparent); } }
.break-item.is-flash { animation: rca-flash 1.6s ease 2; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .break-item.is-flash { animation: none; } }

/* -------------------------------------------------- result code review */
.rc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.rc-controls .admin-field { min-width: 150px; margin: 0; }

.rc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.rc-tile {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.rc-tile.is-warn {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-1));
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.rc-tile-n { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-tile-label { font-size: 12px; color: var(--text-secondary); }

.rc-viewbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.rc-table-box { margin-bottom: 12px; }
.rc-table td { vertical-align: top; }
.rc-sub { display: block; font-size: 11.5px; }
.rc-flags { display: flex; flex-wrap: wrap; gap: 4px; }

.rc-flag {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--critical-text);
  background: color-mix(in srgb, var(--critical) 10%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--critical) 30%, transparent);
}

.rc-bad { color: var(--critical-text); font-weight: 700; }

/* ------------------------------------------------------ legend flag pills */
.flag-cell { white-space: normal; }

.flag-pill {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.legend-table th:nth-child(1), .legend-table td:nth-child(1) { width: 22%; }
.legend-table th:nth-child(3), .legend-table td:nth-child(3) { width: 210px; }
.legend-table th:nth-child(4), .legend-table td:nth-child(4) { width: 215px; }

.gate-help {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* ------------------------------------------ manager previewing agent side */
#backToAdmin[hidden] { display: none; }

.topbar #backToAdmin {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  white-space: nowrap;
}

.preview-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--series-1) 35%, var(--border));
  background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1));
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--text-secondary);
}

.preview-banner strong { color: var(--text-primary); }
.preview-banner .btn { margin-left: auto; }
.preview-pick select { min-width: 240px; }

/* --------------------------------------------------------------- days off */
.field-grow { flex: 1 1 260px; }
.field-grow input { width: 100%; }

.daysoff-quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.daysoff-actions { margin: 12px 0 4px; }
.daysoff-groups { display: grid; gap: 10px; }

.daysoff-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.daysoff-group-main { flex: 1; min-width: 0; }
.daysoff-group-main .hint-line { margin: 4px 0 0; }
.daysoff-group-actions { display: flex; gap: 6px; flex-shrink: 0; }
#daysOffTable td.toggle-cell, #daysOffTable th.toggle-cell { width: 44px; }

/* -------------------------------------------------- one agent's own calls */
.calls-view .cv-card { margin-bottom: 16px; }

.cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.cv-grid .cv-card { margin-bottom: 16px; }
.cv-tiles .call-tile { min-width: 0; }
.cv-dept { color: var(--text-muted); }

.cv-delta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.cv-delta.is-up { color: var(--good-text); }
.cv-delta.is-down { color: var(--critical-text); }
.cv-warn { color: var(--text-secondary); }

.cv-hours {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 170px;
  padding-top: 4px;
}

.cv-hour {
  flex: 1;
  min-width: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.cv-hour-n {
  font-size: 11px;
  color: var(--text-secondary);
  height: 15px;
  font-variant-numeric: tabular-nums;
}

.cv-hour-bar {
  flex: 1;
  width: 100%;
  max-width: 34px;
  display: flex;
  align-items: flex-end;
}

.cv-hour-fill {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 0;
  background: var(--ordinal-3, var(--series-1));
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.cv-hour-rpc {
  display: block;
  width: 100%;
  background: var(--ordinal-5, var(--brand-800));
}

.cv-hour-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.cv-legend {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  white-space: pre-wrap;
  list-style: none;
  padding: 0;
  flex: 1 1 200px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cv-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: -1px;
}

.cv-key-calls { background: var(--ordinal-3, var(--series-1)); }
.cv-key-rpc { background: var(--ordinal-5, var(--brand-800)); }

.cv-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cv-chip {
  font: inherit;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
}

.cv-chip:hover { background: var(--surface-3); }

.cv-chip.is-active {
  background: var(--brand-800);
  border-color: var(--brand-800);
  color: #fff;
}

.cv-count { font-size: 12.5px; }
.cv-calls td { vertical-align: top; }

.cv-client {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv-ended { font-weight: 600; color: var(--text-primary); }

.cv-ended-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  margin-top: 2px;
}

.cv-tag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.cv-tag.is-rpc {
  background: color-mix(in srgb, var(--series-1) 13%, var(--surface-1));
}

.cv-tag.is-pay {
  background: color-mix(in srgb, var(--good) 16%, var(--surface-1));
  color: var(--good-text);
}

.cv-tag.is-short {
  background: color-mix(in srgb, var(--warning) 22%, var(--surface-1));
}

.cv-row-short td { background: color-mix(in srgb, var(--warning) 6%, transparent); }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

@media (max-width: 620px) {
  .cv-grid { grid-template-columns: 1fr; }
  .cv-client { max-width: 130px; }
}

a.btn, a.btn:hover { text-decoration: none; }

@media (max-width: 1480px) {
  body.is-manager-preview .topbar .freshness { display: none; }
}

.field-grow input[type="text"] {
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  box-sizing: border-box;
}

/* LiveVox sync log: a failed run reads as a failure at a glance. */
.grid-table td.danger { color: var(--critical-text); }

/* --------------------------------------- every call: search, dates, pages */
.cv-list-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.cv-search-box { flex: 1 1 260px; min-width: 0; }

.cv-search {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border-radius: 10px;
  border: 1px solid var(--border-strong, var(--border));
  background: var(--surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%239a9893' stroke-width='2'/%3E%3Cpath d='M13 13l4 4' stroke='%239a9893' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center / 16px;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
}

.cv-dates { display: flex; gap: 8px; }

.cv-date {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}

.cv-date input {
  font: inherit;
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: 0;
}

.cv-quicks { display: flex; flex-wrap: wrap; gap: 6px; }

.cv-quick {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.cv-quick:hover { color: var(--text-primary); border-color: var(--text-muted); }

.cv-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.cv-pager select { margin-left: 10px; }

.cv-page {
  font-size: 13px;
  font-weight: 600;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}

.cv-list.is-loading .table-wrap { opacity: .55; transition: opacity .15s; }
.review-mix { margin: 14px 0 4px; }

/* ======================================================= department calendar */
.form-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-row > * { flex: 1 1 140px; }
.form-row > .btn { flex: 0 0 auto; }

.cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}

.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { font-size: 18px; margin: 0 6px 0 6px; font-weight: 700; }

.cal-picks {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.cal-picks select, .cal-picks input { min-width: 0; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--chip);
  background: color-mix(in srgb, var(--chip) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent);
}

.cal-chip.is-off {
  color: #fff;
  background: var(--chip);
  border-color: var(--chip);
}

.cal-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}

.cal-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: 0 0 12px 12px;
}

.cal-week {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 760px;
}

.cal-week th,
.cal-week td {
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.cal-week thead th {
  background: var(--surface-1);
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid var(--border);
  padding: 9px 8px;
}

.cal-week thead th.is-today { color: var(--brand, #2a78d6); }

.cal-week .is-weekend {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.cal-dow {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cal-dom { font-size: 15px; font-variant-numeric: tabular-nums; }

.cal-name-col {
  width: 215px;
  border-left: 0 !important;
  background: var(--surface-1);
  position: sticky;
  left: 0;
  z-index: 1;
}

.cal-person {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.cal-hours {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 400;
}

.cal-group td {
  background: var(--surface-2);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  padding-top: 9px;
  padding-bottom: 9px;
}

.cal-cell { min-width: 84px; height: 48px; vertical-align: middle !important; }

.cal-cell .cal-chip {
  display: flex;
  margin-bottom: 3px;
  white-space: normal;
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: 600;
}

.cal-cell.is-off { background: color-mix(in srgb, #eb6834 10%, transparent); }
.cal-cell.is-part { background: color-mix(in srgb, #eda100 10%, transparent); }

.cal-cell.is-free {
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--border) 60%, transparent) 6px 7px);
}

.cal-cell.is-today {
  box-shadow: none;
  background-color: color-mix(in srgb, #2a78d6 6%, transparent);
}

.cal-cell.is-clickable { cursor: pointer; }

.cal-cell.is-clickable:hover,
.cal-cell.is-clickable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text-primary) 25%, transparent);
  outline-offset: -2px;
}

.cal-time { font-variant-numeric: tabular-nums; color: var(--text-primary); }

.cal-tag {
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.cal-week tr.is-me th,
.cal-week tr.is-me td {
  background-color: color-mix(in srgb, #2a78d6 7%, transparent);
}

.cal-month {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

.cal-mhead {
  background: var(--surface-1);
  padding: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.cal-mday {
  background: var(--surface-1);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 108px;
}

.cal-mday.is-out { opacity: .45; }
.cal-mday.is-weekend { background: var(--surface-2); }

.cal-mday.is-today .cal-dom {
  color: #fff;
  background: var(--brand, #2a78d6);
  border-radius: 999px;
  padding: 0 7px;
}

.cal-mday.is-clickable { cursor: pointer; }

.cal-mday.is-clickable:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-primary) 18%, transparent);
}

.cal-mday-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.cal-count {
  font-size: 11px;
  color: color-mix(in srgb, #1baf7a 70%, var(--text-primary));
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #1baf7a 12%, transparent);
  font-weight: 600;
}

.cal-mline {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  line-height: 1.3;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--chip) 10%, transparent);
  min-width: 0;
  border-left: 3px solid var(--chip);
  border-radius: 4px;
}

.cal-mline .cal-mwhy { font-size: 10.5px; }
.cal-mline.is-off { background: color-mix(in srgb, var(--chip) 18%, transparent); }

.cal-mname {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.cal-mwhy {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-mline.is-clickable { cursor: pointer; }
.cal-daylist { display: grid; gap: 4px; }

.cal-dayrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.cal-dayrow .cal-person, .cal-dayrow .cal-hours { display: inline; }

.cal-dayrow.is-off {
  background: color-mix(in srgb, var(--critical) 10%, transparent);
}

.cal-dayrow.is-off .cal-person { color: var(--critical-text); }
.cal-daypicks { display: flex; flex-wrap: wrap; gap: 10px; }

.cal-daypick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.grid-table tr.is-total td {
  font-weight: 700;
  border-top: 2px solid var(--border);
}

@media (max-width: 720px) {
  .cal-mline .cal-mwhy { display: none; }
}

.goal-now {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-secondary);
}

.goal-now b { color: var(--text-primary); }
.goal-form-wide { grid-column: 1 / -1; margin: 0; }

/* ------------------------------------------------ calendar, v1.13 refresh */
.cal-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 18px;
  overflow-x: auto;
}

.cal-tab {
  padding: 9px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.cal-tab:hover { color: var(--text-primary); }

.cal-tab.is-on {
  color: var(--text-primary);
  border-bottom-color: var(--brand, #2a78d6);
}

.cal-tab-intro {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 13.5px;
  max-width: 75ch;
}

.cal-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.cal-glance-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  min-width: 0;
}

.cal-glance-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cal-glance-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.cal-glance-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-glance-tile.is-good { border-left: 4px solid #1baf7a; }
.cal-glance-tile.is-off { border-left: 4px solid #eb6834; }
.cal-glance-tile.is-part { border-left: 4px solid #eda100; }

.cal-toolbar-main {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  background: var(--surface-1);
  border-bottom: 0;
  margin-bottom: 0 !important;
}

.cal-toolbar-main + .cal-scroll,
.cal-toolbar-main + .cal-month {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.cal-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 18px;
  line-height: 1;
  color: var(--text-primary);
  cursor: pointer;
}

.cal-arrow:hover { background: var(--surface-2); }

.cal-week thead th.is-today .cal-dom {
  display: inline-block;
  min-width: 26px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand, #2a78d6);
  color: #fff;
}

.cal-who { display: flex; align-items: center; gap: 11px; }
.cal-who-text { min-width: 0; }

.cal-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: var(--dept);
  font-size: 13px;
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px color-mix(in srgb, var(--dept) 45%, transparent);
}

.cal-shift {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  background: color-mix(in srgb, #1baf7a 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, #1baf7a 28%, transparent);
}

.cal-week tbody tr:hover th,
.cal-week tbody tr:hover td:not(.is-off):not(.is-part) {
  background-color: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.cal-mday.is-today { background: color-mix(in srgb, #2a78d6 5%, var(--surface-1)); }

.cal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  align-items: center;
  margin-top: 10px;
}

.cal-foot .cal-legend { margin: 0; }
.cal-foot .hint-line { margin: 0; }

/* schedules table */
.sched-table td, .sched-table th { white-space: nowrap; }

.sched-group td {
  background: var(--surface-2);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}

.sched-name { font-weight: 600; }
.sched-days { display: inline-flex; gap: 3px; }

.sched-day {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-2);
}

.sched-day.is-on { color: #fff; background: #2a78d6; }
.sched-day.is-own { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px #eda100; }
.sched-time { font-variant-numeric: tabular-nums; }

.sched-time.is-break {
  color: color-mix(in srgb, #2a78d6 75%, var(--text-primary));
  font-weight: 600;
}

.sched-time.is-lunch {
  color: color-mix(in srgb, #eb6834 75%, var(--text-primary));
  font-weight: 600;
}

.sched-time.is-follow {
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 120px;
}

.sched-table tr.is-missing td { color: var(--text-muted); }

/* ----------------------------------------- calendar: people stand out */
.cal-week tbody tr:not(.cal-group) { --dept: #9a9893; }

.cal-week tbody tr:not(.cal-group) > .cal-name-col {
  box-shadow: inset 4px 0 0 var(--dept);
  padding-left: 14px;
}

.cal-name-col .cal-hours {
  font-size: 11.5px;
  margin-top: 2px;
  color: var(--text-secondary);
}

.cal-name-col .cal-hours.has-hours {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dept) 13%, var(--surface-1));
  font-variant-numeric: tabular-nums;
}

.cal-week tbody tr:not(.cal-group) td { height: 58px; }

.cal-week tbody tr:nth-child(even):not(.cal-group) td:not(.is-off):not(.is-part):not(.is-free) {
  background-color: color-mix(in srgb, var(--text-primary) 1.5%, transparent);
}

.cal-cell.is-working { padding: 10px 8px; }

.cal-group td { font-size: 12.5px; padding-top: 11px; padding-bottom: 11px; }

.cal-mhead-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.cal-mavatar {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  background: var(--dept, #9a9893);
}

/* week view: time off is a bar across the day, as on Who's out */
.cal-week tbody tr:not(.cal-group) td { height: 46px; }
.cal-week .cal-cell.is-off,
.cal-week .cal-cell.is-part { background: none; padding: 5px 4px; }
.cal-week .cal-cell.is-today { background-color: color-mix(in srgb, #2a78d6 7%, transparent); }
.cal-bar {
  display: block;
  min-height: 0;
  padding: 0 6px;
  line-height: 26px;
  font-size: 11.5px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-bar + .cal-bar { margin-top: 3px; }
.cal-cell.is-clickable:hover .cal-bar { filter: brightness(1.06); }

/* Calendar: the Admins group */
.cal-hours.is-admin { color: #5b6ee1; font-weight: 700; }
.cal-cell.is-admin { background: color-mix(in srgb, #5b6ee1 4%, transparent); }
.cal-glance-tile.is-admin { border-color: #5b6ee1; }
.cal-admin-note { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary); }

/* ----------------------------------------- schedule history & KPI periods */
.sched-subtabs { margin-bottom: 6px; }

.sched-kind,
.period-pill,
.sched-mark {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.sched-mark {
  margin-left: 6px;
  font-weight: 500;
  font-size: 11px;
  padding: 1px 7px;
}

.sched-kind.is-regular { background: transparent; }

.sched-kind.is-adjusted,
.sched-mark.is-adjusted {
  background: color-mix(in srgb, var(--pop-2) 16%, var(--surface-1));
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--pop-2) 40%, var(--border));
}

.sched-kind.is-corrected,
.sched-mark.is-corrected,
.period-pill.is-corrected {
  background: color-mix(in srgb, var(--pop-4) 18%, var(--surface-1));
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--pop-4) 45%, var(--border));
}

.sched-kind.is-unverified,
.sched-mark.is-attention {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-1));
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.sched-mark.is-final,
.period-pill.is-final {
  background: color-mix(in srgb, var(--good) 14%, var(--surface-1));
  color: var(--good-text);
  border-color: color-mix(in srgb, var(--good) 40%, var(--border));
}

.period-pill.is-ready {
  background: color-mix(in srgb, var(--pop-1) 16%, var(--surface-1));
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--pop-1) 45%, var(--border));
}

.period-pill.is-review { border-style: dashed; }

.sched-adj-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.sched-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  font-size: 12.5px;
}

.sched-why { max-width: 280px; color: var(--text-secondary); }
.sched-record { margin-top: 3px; font-size: 12px; color: var(--text-secondary); }
.grid-table tr.is-muted td { color: var(--text-muted); }

.sched-hist-table tr.is-unverified td:first-child,
.sched-hist-table tr.is-none td:first-child {
  box-shadow: inset 3px 0 0 var(--warning);
}

.sched-hist-table tr.is-adjusted td:first-child {
  box-shadow: inset 3px 0 0 var(--pop-2);
}

.sched-hist-table tr.is-corrected td:first-child {
  box-shadow: inset 3px 0 0 var(--pop-4);
}

.sched-hist-picks {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sched-hist-picks .admin-field { margin: 0; min-width: 160px; }
.warnbox.is-quiet { border-left-color: var(--warning); }

.mlb-note.is-quiet {
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  padding: 0 2px;
  border: 0;
}

.corr-block { padding: 10px 0; border-top: 1px solid var(--border); }
.corr-block:first-child { border-top: 0; }
.corr-block p { margin: 4px 0; font-size: 13px; }
.corr-used-list { margin: 4px 0 10px; padding-left: 18px; font-size: 13px; }
.corr-used-list li { margin: 3px 0; }
.corr-preview { margin-top: 10px; }
.period-detail-row > td { background: var(--surface-2); }
.period-detail { padding: 6px 4px 10px; }
.period-detail h3 { font-size: 13px; margin: 12px 0 6px; }

.period-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.period-check-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 6px;
  font-size: 11px;
  font-weight: 700;
}

.period-checks > li.is-ok .period-check-mark {
  background: color-mix(in srgb, var(--good) 18%, var(--surface-1));
  color: var(--good-text);
}

.period-checks > li.is-bad .period-check-mark {
  background: color-mix(in srgb, var(--warning) 25%, var(--surface-1));
  color: var(--text-primary);
}

.period-check-items {
  margin: 4px 0 0 26px;
  padding-left: 14px;
  color: var(--text-secondary);
  font-size: 12.5px;
}

.period-finalize {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}

.period-finalize .admin-field { margin: 0; min-width: 240px; }

.cal-cell.is-adjusted {
  background: color-mix(in srgb, var(--pop-2) 10%, transparent);
}

.cal-adjchip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--pop-2) 18%, var(--surface-1));
  color: var(--text-primary);
  white-space: nowrap;
}

.cal-adjtag { font-size: 11px; color: var(--text-secondary); margin-left: 6px; }

@media (max-width: 640px) {
  .sched-hist-picks .admin-field { min-width: 0; flex: 1 1 140px; }
  .period-finalize .admin-field { min-width: 0; flex: 1 1 100%; }
}

.period-more { margin-top: 12px; }

/* --------------------------------------------------------- who's out list */
.out-list { display: grid; gap: 10px; margin-top: 4px; }

.out-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--surface-1);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
}

.out-summary strong {
  color: var(--text-primary);
  font-size: 15px;
  margin-right: 2px;
}

/* today, at a glance */
.out-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--pop-1) 7%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--pop-1) 30%, var(--border));
}

.out-now-label {
  margin-right: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pop-1);
}

.out-now-none { font-size: 13px; color: var(--text-secondary); }

.out-now-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chip) 45%, var(--border));
  background: color-mix(in srgb, var(--chip) 12%, var(--surface-1));
  color: var(--text-primary);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.out-now-chip:disabled { cursor: default; }
.out-now-chip.is-me { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pop-1) 45%, transparent); }
.out-now-chip small { font-weight: 500; color: var(--text-secondary); }

/* one card per week */
.out-week {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.out-week.is-past { opacity: .62; }
.out-week.is-now { border-color: color-mix(in srgb, var(--pop-1) 45%, var(--border)); }

.out-week-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.out-week.is-empty .out-week-head { border-bottom: 0; background: none; }
.out-week-count { margin-left: auto; font-size: 12px; color: var(--text-secondary); }

.out-today {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pop-1) 16%, var(--surface-1));
  color: var(--pop-1);
}

/* the grid: a row per person, a column per day */
.out-grid-scroll { overflow-x: auto; }
.out-grid { display: grid; width: 100%; }

.out-grid-row {
  display: grid;
  grid-template-columns: var(--out-cols);
  align-items: stretch;
  border-top: 1px solid var(--border);
}

.out-grid-head { border-top: 0; }
.out-grid-row.is-me { background: color-mix(in srgb, var(--pop-1) 6%, transparent); }

.out-grid-head > span {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.out-c-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 10px;
}

.out-c-name.is-clickable { cursor: pointer; }
.out-c-name.is-clickable:hover .out-name { text-decoration: underline; }

.out-c-why {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
  padding: 4px 8px;
}

.out-avatar { width: 26px; height: 26px; font-size: 10px; }
.out-who { display: grid; min-width: 0; line-height: 1.25; }

.out-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.out-dept {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.out-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.out-span { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }

.out-note {
  flex-basis: 100%;
  max-width: 260px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.out-c-day {
  display: grid;
  place-items: center;
  padding: 4px 3px;
  border-left: 1px solid var(--border);
  text-align: center;
}

.out-grid-head .out-c-day { display: grid; gap: 0; line-height: 1.15; }
.out-grid-head .out-dow { font-size: 10.5px; }
.out-grid-head .out-dom { font-size: 13px; color: var(--text-primary); letter-spacing: 0; }
.out-c-day.is-today { background: color-mix(in srgb, var(--pop-1) 8%, transparent); }
.out-grid-head .out-c-day.is-today .out-dom { color: var(--pop-1); }
.out-grid-row:not(.out-grid-head) .out-c-day.is-past { opacity: .7; }

.out-c-day.is-free {
  background: repeating-linear-gradient(135deg, transparent 0 5px,
    color-mix(in srgb, var(--text-muted) 12%, transparent) 5px 6px);
}

.out-c-day.is-clickable { cursor: pointer; }

.out-c-day.is-clickable:hover .out-bar,
.out-c-day.is-clickable:focus-visible .out-bar {
  outline: 2px solid color-mix(in srgb, var(--chip) 60%, transparent);
  outline-offset: 1px;
}

.out-bar {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 22px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.out-bar.is-off { background: var(--chip); color: #fff; }

.out-bar.is-part {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--chip) 22%, var(--surface-1));
  border: 1px dashed color-mix(in srgb, var(--chip) 70%, transparent);
}

@media (max-width: 640px) {
  .out-grid-row { grid-template-columns: minmax(110px, 1.3fr) repeat(var(--out-days), minmax(38px, 1fr)); }
  .out-grid .out-c-why { display: none; }
  .out-grid .out-avatar { display: none; }
  .out-c-name { padding: 4px 8px; }
  .out-week-head { flex-wrap: wrap; }
}

/* ===================================================== manager leaderboard */
.lb-controls {
  display: grid;
  grid-template-columns: minmax(390px, 1.7fr) repeat(3, minmax(180px, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.lb-controls select, .lb-controls input { max-width: 100%; }
.lb-columns { position: relative; }

.lb-columns summary {
  cursor: pointer;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  list-style: none;
}

.lb-columns summary::-webkit-details-marker { display: none; }

.lb-column-grid {
  position: absolute;
  z-index: 20;
  margin-top: 6px;
  padding: 12px 14px;
  width: min(720px, 90vw);
  max-height: 420px;
  overflow: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 14px;
}

.lb-column-group {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}

.spacer { flex: 1; }

.lb-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.lb-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.lb-place.place-1 {
  border-color: #d4a72c;
  background: color-mix(in srgb, #d4a72c 12%, var(--surface-1));
}

.lb-place.place-2 { border-color: #9aa3ad; }
.lb-place.place-3 { border-color: #b8794a; }

.lb-place-rank {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
}

.lb-place-value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lb-table th.is-sortable { cursor: pointer; white-space: normal; }

.lb-table th.is-sorted,
.lb-table td.is-sorted {
  background: color-mix(in srgb, #2a78d6 7%, transparent);
  font-weight: 700;
}

.lb-table tr.is-podium td:first-child { font-weight: 800; }
.lb-table .pill-quiet { margin-left: 6px; white-space: nowrap; }
.lb-controls .cal-picks { flex-wrap: nowrap; }

@media (max-width: 1100px) {
  .lb-controls { grid-template-columns: 1fr 1fr; }
  .lb-controls .cal-picks { flex-wrap: wrap; }
}

/* ------------------------ manager leaderboard, at the foot of Departments */
.mlb-section {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 16px;
}

.mlb-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.mlb-head h2 { margin: 0 0 4px; font-size: 20px; }
.mlb-head p { margin: 0; max-width: 70ch; }

.mlb-busy {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  white-space: nowrap;
}

.mlb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.mlb-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.mlb-tab:hover { color: var(--text-primary); border-color: var(--text-muted); }

.mlb-tab.is-on {
  background: var(--brand-800, #1b2a4a);
  border-color: transparent;
  color: #fff;
}

.mlb-tab .cal-dot { margin: 0; }

.mlb-note {
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  background: color-mix(in srgb, #2a78d6 8%, var(--surface-1));
  border: 1px solid color-mix(in srgb, #2a78d6 25%, transparent);
}

.lb-table td.is-unsplit, .lb-table th.is-unsplit { color: var(--text-muted); }
.table-wrap.is-stale { opacity: .55; transition: opacity .15s; }

.mlb-section .lb-controls {
  grid-template-columns: minmax(390px, 1.7fr) repeat(3, minmax(170px, 1fr));
}

/* manager leaderboard: what state the figures are in */
.mlb-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mlb-note.is-pending {
  background: color-mix(in srgb, var(--pop-4) 14%, var(--surface-1));
}

.mlb-error {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.mlb-skeleton {
  min-height: 160px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.mlb-head .mlb-status { margin-left: auto; }
.mlb-status .mlb-busy { margin-left: 0; }

/* ===================================================== contests & raffles */
.contest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.contest-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.contest-card:hover {
  box-shadow: 0 10px 26px rgba(20, 24, 60, .14);
  transform: translateY(-3px);
}

.contest-card h3 { margin: 2px 0 0; font-size: 16px; }
.contest-card p { margin: 0; font-size: 13px; }

.contest-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.contest-how { color: var(--text-secondary); }

.contest-kind {
  font-weight: 700;
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.5;
}

.contest-kind.kind-raffle {
  background: color-mix(in srgb, #7b5cd6 15%, transparent);
  color: #6a4cc4;
}

.contest-kind.kind-contest {
  background: color-mix(in srgb, #d4a72c 18%, transparent);
  color: #8a6a10;
}

.contest-thumbs { display: flex; gap: 6px; margin-top: 4px; }

.contest-thumbs img,
.contest-thumb-empty {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.contest-thumb-empty {
  display: grid;
  place-items: center;
  font-size: 9.5px;
  text-align: center;
  color: var(--text-muted);
  padding: 2px;
  overflow: hidden;
}

.rule-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.rule-row .rule-n { width: 72px; }
.rule-row select { max-width: 260px; }

.prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.prize-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.prize-image {
  position: relative;
  display: block;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  cursor: pointer;
}

.prize-image img { width: 100%; height: 100%; object-fit: cover; }

.prize-empty {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.prize-change {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px;
  font-size: 11px;
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .15s;
}

.prize-image:hover .prize-change,
.prize-image:focus-within .prize-change {
  opacity: 1;
}

.prize-card .stack-form { gap: 8px; }

/* agent side: the Prizes tab */
.prizes-list { display: grid; gap: 16px; }

.prize-contest {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  overflow: hidden;
}

.prize-contest-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-wrap: wrap;
}

.prize-contest-head h2 { margin: 4px 0 2px; font-size: 18px; }
.prize-contest-head p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.prize-contest-body { padding: 14px 16px; display: grid; gap: 14px; }
.prize-when { text-align: right; font-size: 13px; color: var(--text-secondary); }
.prize-when strong { display: block; font-size: 15px; color: var(--text-primary); }
.prize-how { font-size: 13.5px; }
.prize-how b { color: var(--text-primary); }

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

.prize-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-1);
}

.prize-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-2);
}

.prize-tile .prize-noimg {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 34px;
}

.prize-tile-body { padding: 8px 10px; }

.prize-tile-body .prize-place {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a6a10;
}

.prize-tile-body strong { display: block; font-size: 14px; }

.prize-tile-body p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.prize-me {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #2a78d6 8%, var(--surface-1));
  border: 1px solid color-mix(in srgb, #2a78d6 25%, transparent);
}

.prize-me .big {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.prize-top { display: flex; gap: 8px; flex-wrap: wrap; }

.prize-top span {
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.prize-winners { display: flex; gap: 8px; flex-wrap: wrap; }

.prize-winners span {
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #d4a72c 18%, var(--surface-1));
}

/* calls view: service donut and inbound/outbound split */
.cv-donut-wrap {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.cv-donut-box { position: relative; flex: 0 0 168px; }
.cv-donut { width: 168px; height: 168px; display: block; }
.cv-slice { stroke: var(--surface-1); stroke-width: 2; cursor: default; }
.cv-slice:hover { opacity: .85; }

.cv-donut-total {
  text-anchor: middle;
  font-size: 24px;
  font-weight: 700;
  fill: var(--text-primary);
}

.cv-donut-sub { text-anchor: middle; font-size: 11px; fill: var(--text-secondary); }

.cv-tip {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  z-index: 5;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  background: var(--text-primary);
  color: var(--surface-1);
}

.cv-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
}

.cv-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.cv-legend-n { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.cv-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

.cv-legend .cv-swatch { margin: 0; }
.cv-split-wrap { display: grid; gap: 8px; }

.cv-split-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.cv-split-labels b { color: var(--text-primary); font-weight: 600; }

.cv-split {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}

.cv-split-a { background: #2a78d6; }
.cv-split-b { background: #eb6834; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cv-split-a { background: #3987e5; }
  :root:not([data-theme="light"]) .cv-split-b { background: #d95926; }
}

:root[data-theme="dark"] .cv-split-a { background: #3987e5; }
:root[data-theme="dark"] .cv-split-b { background: #d95926; }
.rbs-table th { vertical-align: bottom; min-width: 96px; }

.rbs-name {
  display: block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
}

.rbs-sub {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.rbs-pct { display: block; font-weight: 600; }
.rbs-n { display: block; font-size: 11px; color: var(--text-muted); }
.cv-note { margin-top: 12px !important; }
.page-actions > select { height: auto; align-self: center; width: auto; }

/* ------------------ comments & concerns (agent tab) and the manager inbox */
.view-tab-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--critical, #d64545);
}

.fb-card {
  max-width: 760px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 18px 20px;
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fb-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 4px;
}

.fb-cats { display: flex; flex-wrap: wrap; gap: 8px; }

.fb-cat {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  --fb: #6b7280;
}

.fb-cat:hover { border-color: color-mix(in srgb, var(--fb) 50%, var(--border)); }
.fb-cat.is-on { background: var(--fb); border-color: var(--fb); color: #fff; }
.fb-cat-comment { --fb: #2a78d6; }
.fb-cat-question { --fb: #7c4dcc; }
.fb-cat-concern { --fb: #c2410c; }
.fb-cat-bug { --fb: #0f8a6a; }

.fb-subject,
.fb-body {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  box-sizing: border-box;
}

.fb-body { resize: vertical; min-height: 110px; line-height: 1.45; }
.fb-body-wrap { position: relative; }

.fb-count {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 11px;
  color: var(--text-muted, #888);
  pointer-events: none;
}

.fb-who {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.fb-who-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.fb-who-opt.is-on {
  border-color: var(--brand, #2a78d6);
  background: color-mix(in srgb, var(--brand, #2a78d6) 7%, var(--surface-1));
}

.fb-who-opt input { margin-top: 3px; }

.fb-who-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text-secondary);
}

.fb-who-text strong { color: var(--text-primary); font-size: 14px; }

.fb-seal {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 9px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning, #c9a227) 10%, var(--surface-1));
}

.fb-error { margin: 0; color: var(--critical-text, #b42318); font-size: 13px; }

.fb-sent {
  margin: 0 0 4px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--good-text, #11734e);
  background: color-mix(in srgb, #1baf7a 12%, var(--surface-1));
}

.fb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fb-list-head { font-size: 17px; margin: 0 0 10px; }

.fb-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  margin-bottom: 18px;
}

.fb-msg {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fb-msg.has-new {
  border-color: var(--brand, #2a78d6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #2a78d6) 18%, transparent);
}

.fb-msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fb-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--fb, #6b7280);
}

.fb-pill.fb-anon {
  background: color-mix(in srgb, var(--text-primary) 12%, var(--surface-1));
  color: var(--text-primary);
}

.fb-status { font-size: 12px; color: var(--text-secondary); }
.fb-status-resolved { color: var(--good-text, #11734e); font-weight: 600; }
.fb-date { margin-left: auto; font-size: 12px; color: var(--text-muted, #888); }
.fb-msg-subject { margin: 0; font-size: 15px; }

.fb-msg-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 14px;
}

.fb-reply {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--brand, #2a78d6);
  background: color-mix(in srgb, var(--brand, #2a78d6) 6%, var(--surface-1));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fb-reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.fb-new {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--brand, #2a78d6);
  padding: 1px 7px;
  border-radius: 999px;
}

.fb-revealed { margin: 0; font-size: 12.5px; color: var(--critical-text, #b42318); }

.fb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.fb-filters .seg { margin-bottom: 0; }
.fb-filters .cv-search { min-width: 220px; flex: 1; max-width: 340px; }
.fb-inbox.is-new { border-left: 4px solid var(--brand, #2a78d6); }
.fb-inbox.is-resolved { opacity: .82; }

.fb-sender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
}

.fb-sender.is-anon strong { color: var(--text-secondary); }
.fb-lock { font-size: 12px; }

.fb-status-pick {
  width: auto;
  min-width: 0;
  font-size: 12.5px;
  padding: 3px 6px;
}

.fb-seal-box {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.fb-seal-box p { margin: 0; }

.fb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.fb-delete { color: var(--critical-text, #b42318); }

/* Comments & Concerns: where a message went */
.fb-dest-pill {
  background: color-mix(in srgb, var(--pop-1) 14%, var(--surface-1));
  color: var(--text-primary);
}

.fb-dest-pill.is-general {
  background: color-mix(in srgb, var(--pop-2) 14%, var(--surface-1));
}

.fb-who-opt.is-disabled { opacity: .55; cursor: not-allowed; }

.fb-note {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  background: color-mix(in srgb, var(--pop-4) 14%, var(--surface-1));
  color: var(--text-secondary);
}

.fb-focus {
  margin: 0 0 14px;
  padding: 10px;
  border-radius: 14px;
  border: 2px solid var(--pop-2);
  background: color-mix(in srgb, var(--pop-2) 6%, var(--surface-1));
}

.fb-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.alerts-status {
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 13.5px;
}

.alerts-status.is-on {
  background: color-mix(in srgb, var(--good) 12%, var(--surface-1));
}

.alerts-status.is-off {
  background: color-mix(in srgb, var(--warning) 18%, var(--surface-1));
}

.alerts-targets { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.alerts-table td { vertical-align: top; }
.alerts-table input[type=email] { min-width: 220px; }
.alerts-log { margin-top: 12px; }
.alerts-log summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }

.pill.alerts-sent {
  background: color-mix(in srgb, var(--good) 16%, var(--surface-1));
}

.pill.alerts-failed,
.pill.alerts-expired {
  background: color-mix(in srgb, var(--critical) 16%, var(--surface-1));
}

.pill.alerts-pending {
  background: color-mix(in srgb, var(--warning) 20%, var(--surface-1));
}

/* =========================================================================
   Colour & motion (revamp, part 1)
   More colour, and small movements that make the pages feel alive without
   costing much: CSS transforms and opacity only (the GPU does them), each
   played once, and all of it switched off for anybody whose computer asks
   for less motion.
   ========================================================================= */

/* the header gets a little depth */

/* a page or tab slides in when you move to it (not on automatic refreshes) */
@keyframes rca-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

#content.is-entering > * { animation: rca-enter 380ms var(--ease-out) both; }
#content.is-entering > *:nth-child(2) { animation-delay: 40ms; }
#content.is-entering > *:nth-child(3) { animation-delay: 80ms; }
#content.is-entering > *:nth-child(4) { animation-delay: 120ms; }
#content.is-entering > *:nth-child(5) { animation-delay: 160ms; }
#content.is-entering > *:nth-child(n+6) { animation-delay: 200ms; }

/* page titles carry a colour stroke */
.page-head h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 4px;
  border-radius: 4px;
  background: var(--grad-pop);
}

/* manager cards: a thin colour edge, and a lift on hover for the clickable ones */
.admin-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-pop);
  opacity: .85;
}

.fold-settings > .admin-card::before { content: none; }
.admin-card .admin-card::before { content: none; }

.btn-primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
}

.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }

/* agent tabs: each one its own colour */
.view-tab.tab-board { --tab: var(--pop-1); }
.view-tab.tab-me { --tab: var(--pop-5); }
.view-tab.tab-calls { --tab: var(--pop-6); }
.view-tab.tab-prizes { --tab: var(--pop-3); }
.view-tab.tab-calendar { --tab: var(--pop-4); }
.view-tab.tab-feedback { --tab: var(--pop-2); }
.view-tab.tab-calendar.is-active { color: #2b1d00; }
.view-tab.is-active .view-tab-badge { background: #fff; color: var(--tab); }

/* leaderboard bars grow in, and the podium rows glow */
@keyframes rca-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.lb-row.rank-2 { box-shadow: inset 4px 0 0 var(--silver); }
.lb-row.rank-3 { box-shadow: inset 4px 0 0 var(--bronze); }

#content.is-entering .lb-bar {
  animation: rca-grow 700ms var(--ease-out) both;
  animation-delay: var(--grow-delay, 0ms);
}

/* "my" colour on my own pages */
/* (10/23/2026) My scorecard's cards no longer take the person's colour on top: it clashed with the status. */

/* (10/22/2026) The My calls charts are back in the standard colours, not the person's own. */

/* ------------------------------------------------------------------ faces */
.rca-face {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface-1), 0 1px 3px rgba(0,0,0,.18);
  background: var(--surface-3);
}

.rca-face.avatar { padding: 0; }

.rca-face img,
.rca-face svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.topbar .rca-face { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }

.whoami.is-clickable {
  cursor: pointer;
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  transition: background-color 150ms ease;
}

.whoami.is-clickable:hover,
.whoami.is-clickable:focus-visible {
  background: rgba(255,255,255,.12);
  outline: none;
}

.whoami.is-clickable::after { content: "\270E"; font-size: 11px; opacity: .6; }

/* ------------------------------------------------------------ profile box */
.pf-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 10, 26, .55);
  backdrop-filter: blur(3px);
  animation: rca-fade 160ms ease both;
}

.pf-backdrop.is-leaving { animation: rca-fade-out 170ms ease both; }

@keyframes rca-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rca-fade-out {
  to { opacity: 0; }
}

@keyframes rca-pop-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.pf-dialog {
  width: min(920px, 100%);
  max-height: min(92vh, 860px);
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  color: var(--text-primary);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  animation: rca-pop-in 260ms var(--ease-out) both;
}

.pf-head {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  background: var(--grad-pop);
  color: #fff;
}

.pf-head h2 { font-size: 17px; margin: 0; }

.pf-x {
  margin-left: auto;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  background: rgba(255,255,255,.15);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
}

.pf-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.pf-side {
  padding: 18px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--border);
  overflow: auto;
}

.pf-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.pf-big { box-shadow: 0 0 0 5px var(--surface-1), 0 10px 26px rgba(0,0,0,.18); }

.pf-preview-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.pf-preview-text strong { font-size: 16px; }
.pf-preview-text small { color: var(--text-muted); font-size: 11.5px; }

.pf-preview-bar {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  overflow: hidden;
}

.pf-preview-bar span {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: 6px;
  transition: background-color 200ms ease;
}

.pf-modes { display: flex; flex-direction: column; gap: 6px; }

.pf-mode {
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  font-size: 13.5px;
}

.pf-mode.is-on {
  border-color: var(--pop-2);
  background: color-mix(in srgb, var(--pop-2) 12%, var(--surface-1));
  box-shadow: inset 3px 0 0 var(--pop-2);
}

.pf-body {
  padding: 16px 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pf-tools { display: flex; gap: 8px; align-items: center; }
.pf-parts { display: flex; flex-wrap: wrap; gap: 6px; }

.pf-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}

.pf-chip.is-on {
  background: var(--pop-2);
  border-color: var(--pop-2);
  color: #fff;
}

.pf-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}

.pf-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px 6px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--surface-2);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  transition: transform 140ms ease, border-color 140ms ease;
}

.pf-option:hover { transform: translateY(-2px); }

.pf-option.is-on {
  border-color: var(--pop-2);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--pop-2) 10%, var(--surface-1));
}

.pf-option-pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.pf-option-pic svg { width: 100%; height: 100%; display: block; }
.pf-colours { display: flex; flex-direction: column; gap: 8px; }

.pf-colour-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 8px;
}

.pf-colour-row > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.pf-swatches { display: flex; flex-wrap: wrap; gap: 6px; }

.pf-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--border-strong);
  transition: transform 120ms ease;
  padding: 0;
  position: relative;
}

.pf-swatch:hover { transform: scale(1.12); }

.pf-swatch.is-on {
  box-shadow: 0 0 0 2px var(--text-primary);
  transform: scale(1.12);
}

.pf-swatches-lg .pf-swatch { width: 32px; height: 32px; }

.pf-swatch-auto {
  width: auto !important;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-secondary);
}

.pf-swatch-custom {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: conic-gradient(#e8457c, #f2a516, #1baf7a, #0ea5b7, #2a78d6, #8b5cf6, #e8457c);
  color: #fff;
  font-weight: 800;
}

.pf-swatch-custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.pf-colour-pick { border-top: 1px solid var(--border); padding-top: 14px; }
.pf-colour-pick h3 { font-size: 14px; margin: 0 0 2px; }
.pf-note { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 8px; }

.pf-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 16px;
  border: 2px dashed color-mix(in srgb, var(--pop-1) 45%, var(--border));
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  background: color-mix(in srgb, var(--pop-1) 5%, var(--surface-1));
}

.pf-drop:hover {
  background: color-mix(in srgb, var(--pop-1) 10%, var(--surface-1));
}

.pf-drop small { color: var(--text-muted); }
.pf-drop-icon { font-size: 30px; }

.pf-file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.pf-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}

.pf-status { margin: 0 auto 0 0; font-size: 12.5px; color: var(--text-secondary); }

@media (max-width: 720px) {
  .pf-grid { grid-template-columns: 1fr; overflow: auto; }

  .pf-side {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  .pf-modes { flex-direction: row; flex-wrap: wrap; }
  .pf-body { overflow: visible; }
}

/* ------------------------------------------------------- the raffle wheel */
.rw-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 35%, #3b2a7e 0%, #1a1440 55%, #0b0a1e 100%);
  color: #fff;
  overflow: hidden;
  animation: rca-fade 240ms ease both;
}

.rw-overlay.is-leaving { animation: rca-fade-out 220ms ease both; }

.rw-rays {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: .22;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.35) 0 6deg, transparent 6deg 18deg);
  animation: rw-rays 40s linear infinite;
}

@keyframes rw-rays {
  to { transform: rotate(360deg); }
}

.rw-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.rw-close:hover { background: rgba(255,255,255,.26); }

.rw-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 720px;
  width: 100%;
  animation: rca-pop-in 340ms var(--ease-out) both;
}

.rw-kicker {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff4d8d, #ffb020);
  color: #1a0b1f;
}

.rw-title {
  font-size: clamp(22px, 3.4vw, 32px);
  margin: 8px 0 2px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.rw-place {
  margin: 0;
  font-size: 15px;
  color: rgba(255,255,255,.86);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rw-place small { color: rgba(255,255,255,.6); }

.rw-medal {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  background: #7d8bff;
  color: #fff;
}

.rw-medal.place-1 {
  background: linear-gradient(135deg, #ffe08a, #e0a32a);
  color: #3a2600;
}

.rw-medal.place-2 {
  background: linear-gradient(135deg, #f1f4f7, #9aa3ad);
  color: #1d242b;
}

.rw-medal.place-3 {
  background: linear-gradient(135deg, #f3c39c, #c07a45);
  color: #2e1606;
}

.rw-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}

.rw-wheel { position: relative; filter: drop-shadow(0 22px 40px rgba(0,0,0,.45)); }
.rw-canvas { display: block; }

.rw-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  transform-origin: 50% 10%;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 34px solid #fff;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
}

.rw-pointer::after {
  content: "";
  position: absolute;
  left: -7px;
  top: -32px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff4d8d;
}

.rw-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: clamp(40px, 9vw, 92px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 6px 24px rgba(0,0,0,.55);
}

.rw-count:empty { display: none; }
.rw-count.pop { animation: rw-pop 900ms var(--ease-out) both; }

@keyframes rw-pop {
  0% { transform: scale(.4); opacity: 0; }
  30% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: .92; }
}

.rw-ticker {
  min-height: 28px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #ffe08a;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.rw-reveal {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px 14px 14px;
  border-radius: 18px;
  text-align: left;
  background: rgba(255,255,255,.96);
  color: #17142b;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  animation: rw-reveal 620ms cubic-bezier(.2, 1.4, .4, 1) both;
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(92vw, 640px);
  z-index: 3;
}

.rw-reveal[hidden] { display: none; }
.rw-face { box-shadow: 0 0 0 4px #ffd166, 0 8px 18px rgba(0,0,0,.2); }
.rw-winner-text { display: flex; flex-direction: column; gap: 2px; }

.rw-winner-kicker {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8b5cf6;
}

.rw-winner-name {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.1;
}

.rw-winner-meta { font-size: 13px; color: #5a5670; }

.rw-prize-img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  margin-left: 4px;
}

.rw-overlay.is-me .rw-reveal {
  background: linear-gradient(135deg, #fff5d6, #ffe0ef);
}

.rw-overlay.is-me .rw-winner-kicker { color: #e8457c; font-size: 14px; }
.rw-next { margin-top: 4px; }
.rw-next[hidden] { display: none; }

.rw-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* the small wheel on a page */
.rw-mini { position: relative; display: inline-block; flex: 0 0 auto; }
.rw-mini-spin { width: 100%; height: 100%; }
.rw-mini.is-drifting .rw-mini-spin { animation: rw-drift 90s linear infinite; }

@keyframes rw-drift {
  to { transform: rotate(360deg); }
}

.rw-mini-canvas { display: block; filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)); }

.rw-mini-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 18px solid var(--text-primary);
}

.wheel-preview {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.wheel-preview .admin-help { max-width: 360px; }

.btn-spin {
  font-size: 14.5px;
  padding-inline: 16px;
  background: linear-gradient(120deg, #8b5cf6, #e8457c);
  border-color: transparent;
  white-space: nowrap;
}

.btn-spin:hover {
  filter: brightness(1.07);
  background: linear-gradient(120deg, #8b5cf6, #e8457c);
}

/* --------------------------------------------------------- the Prizes tab */
.pz-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(115deg, #3a1d7a 0%, #8b5cf6 45%, #e8457c 80%, #f2a516 120%);
}

.pz-hero-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  right: -60px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%);
  pointer-events: none;
}

.pz-hero-text { position: relative; flex: 1 1 320px; }

.pz-hero-kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}

.pz-hero h1 {
  font-size: clamp(26px, 4vw, 36px);
  margin: 2px 0 4px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.pz-hero p { margin: 0; opacity: .92; }
.pz-hero-stats { position: relative; display: flex; gap: 8px; }

.pz-stat {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 13px;
  backdrop-filter: blur(2px);
}

.pz-stat b { font-size: 16px; }

.pz-hero-gift {
  position: absolute;
  right: 22px;
  top: 12px;
  font-size: 44px;
  opacity: .9;
  animation: pz-bob 3.2s ease-in-out infinite;
}

@keyframes pz-bob {
  50% { transform: translateY(-6px) rotate(-6deg); }
}

.pz-empty { text-align: center; }
.pz-empty-icon { font-size: 40px; display: block; }

.pz-list {
  display: grid;
  flex-direction: column;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr));
  align-items: stretch;
}

.pz-card {
  --pz-accent: var(--pop-2);
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

#content.is-entering .pz-card {
  animation: rca-enter 420ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.pz-card.kind-contest { --pz-accent: var(--pop-4); }

.pz-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pz-accent) 18%, var(--surface-1)), var(--surface-1) 70%);
  border-bottom: 1px solid var(--border);
}

.pz-card-title { flex: 1 1 320px; min-width: 0; }
.pz-card-title h2 { font-size: 21px; margin: 6px 0 2px; font-weight: 800; }
.pz-card-title p { margin: 0; color: var(--text-secondary); }

.pz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.pz-kind {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--pz-accent);
  color: #fff;
}

.pz-card.kind-contest .pz-kind { color: #2b1d00; }

.pz-status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--text-secondary);
}

.pz-status.status-running {
  background: color-mix(in srgb, var(--good) 16%, var(--surface-1));
  color: var(--good-text);
}

.pz-status.status-running::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 6px;
  vertical-align: 1px;
  animation: pz-live 1.6s ease-in-out infinite;
}

.pz-status.status-drawing {
  background: linear-gradient(90deg, #8b5cf6, #e8457c);
  color: #fff;
}

@keyframes pz-live {
  50% { opacity: .25; }
}

.pz-dates { font-size: 12px; color: var(--text-muted); }

.pz-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.pz-clock-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pz-clock-units { display: flex; gap: 6px; }

.pz-clock-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  padding: 6px 6px 4px;
  border-radius: 10px;
  background: var(--brand-800);
  color: #fff;
}

.pz-clock-unit b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.pz-clock-unit small {
  font-size: 9.5px;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pz-clock.is-close .pz-clock-unit {
  background: linear-gradient(160deg, #e8457c, #f2a516);
}

.pz-card-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 16px 20px;
  flex: 1;
}

.pz-card-body.has-side {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 26px;
}

.pz-how { margin: 0 0 12px; color: var(--text-secondary); }
.pz-how b { color: var(--text-primary); }
.pz-me { display: flex; flex-direction: column; gap: 12px; }

.pz-me-top {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.pz-tickets,
.pz-rank {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pz-ticket-icon { font-size: 28px; align-self: center; }

.pz-big {
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--pz-accent), var(--pop-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pz-rank.place-1 .pz-big {
  background-image: linear-gradient(120deg, #e0a32a, #ffcf5a);
}

.pz-tickets-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
}

.pz-me-sub { margin: 0; color: var(--text-secondary); font-size: 13px; }
.pz-odds { position: relative; width: 84px; height: 84px; }
.pz-ring { width: 84px; height: 84px; }
.pz-ring-track { fill: none; stroke: var(--surface-3); stroke-width: 9; }

.pz-ring-fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  animation: pz-ring 1s var(--ease-out) both;
}

@keyframes pz-ring {
  from { stroke-dasharray: 0 999; }
}

.pz-odds-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pz-odds-text strong { font-size: 17px; line-height: 1; }

.pz-odds-text small {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pz-next h3,
.pz-top h3,
.pz-winners h3 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.pz-goal {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  margin-bottom: 8px;
}

.pz-goal-text {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  margin-bottom: 6px;
}

.pz-goal-text b { color: var(--pz-accent); font-weight: 900; }

/* "Why these tickets" under the agent's own raffle card */
.pz-why { margin-top: 10px; font-size: 13px; }
.pz-why summary { cursor: pointer; font-weight: 700; color: var(--text-secondary); }
.pz-why ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pz-why li {
  display: grid;
  grid-template-columns: 1fr auto 2.5em;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.pz-why-did { color: var(--text-muted); white-space: nowrap; }
.pz-why li b { text-align: right; color: var(--pz-accent); }

.pz-goal-track {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.pz-goal-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transform-origin: left;
  animation: rca-grow 900ms var(--ease-out) both;
  background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35)) !important;
}

.pz-goal.is-met small { color: var(--text-muted); font-size: 12px; }

.pz-gap {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pop-4) 14%, var(--surface-1));
}

.pz-gap.is-good {
  background: color-mix(in srgb, var(--good) 13%, var(--surface-1));
}

.pz-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}

.pz-top-row:last-child { border-bottom: 0; }

.pz-top-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--surface-3);
}

.pz-top-row.place-1 .pz-top-rank { background: var(--gold); color: #3a2600; }
.pz-top-row.place-2 .pz-top-rank { background: var(--silver); color: #fff; }
.pz-top-row.place-3 .pz-top-rank { background: var(--bronze); color: #fff; }
.pz-top-name { flex: 1; font-weight: 600; }
.pz-side { display: flex; align-items: flex-start; justify-content: center; }

.pz-wheel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.pz-wheel small { color: var(--text-muted); font-size: 12px; }

.pz-prizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 0 20px 20px;
}

.pz-prize {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.pz-prize:hover {
  transform: translateY(-4px) rotate(-.4deg);
  box-shadow: 0 14px 30px rgba(20,24,60,.16);
}

.pz-prize-pic {
  position: relative;
  aspect-ratio: auto;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pz-accent) 20%, var(--surface-1)), var(--surface-2));
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 170px;
}

.pz-prize-pic img { width: 100%; height: 100%; object-fit: cover; }
.pz-prize-noimg { font-size: 48px; }

.pz-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}

.pz-prize.place-1 .pz-ribbon {
  background: linear-gradient(135deg, #ffe08a, #e0a32a);
  color: #3a2600;
}

.pz-prize.place-2 .pz-ribbon {
  background: linear-gradient(135deg, #f1f4f7, #9aa3ad);
  color: #1d242b;
}

.pz-prize.place-3 .pz-ribbon {
  background: linear-gradient(135deg, #f3c39c, #c07a45);
  color: #2e1606;
}

.pz-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 700ms ease;
}

.pz-prize:hover .pz-shine { transform: translateX(120%); }

.pz-prize figcaption {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pz-prize figcaption span { font-size: 12.5px; color: var(--text-secondary); }
.pz-winners { padding: 16px 20px 0; }

.pz-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.pz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  min-width: 130px;
  border-radius: 16px;
  background: var(--surface-2);
  text-align: center;
  animation: rw-reveal 520ms cubic-bezier(.2, 1.3, .4, 1) both;
  animation-name: pz-step;
}

.pz-step.place-1 {
  order: 2;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 26%, var(--surface-1)), var(--surface-2));
  padding-top: 22px;
}

.pz-step.place-2 { order: 1; }
.pz-step.place-3 { order: 3; }
.pz-step.place-4 { order: 4; }
.pz-step.is-me { box-shadow: 0 0 0 3px var(--pop-3); }
.pz-step small { color: var(--text-secondary); font-size: 12px; }

.pz-step-medal {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: var(--surface-3);
}

.pz-step.place-1 .pz-step-medal {
  background: linear-gradient(135deg, #ffe08a, #e0a32a);
  color: #3a2600;
}

.pz-step.place-2 .pz-step-medal {
  background: linear-gradient(135deg, #f1f4f7, #9aa3ad);
  color: #1d242b;
}

.pz-step.place-3 .pz-step-medal {
  background: linear-gradient(135deg, #f3c39c, #c07a45);
  color: #2e1606;
}

@media (max-width: 760px) {
  .pz-clock { align-items: flex-start; }
  .pz-big { font-size: 38px; }
}

/* less motion, when asked */
@media (prefers-reduced-motion: reduce) {
  #content.is-entering > *,
  .pz-card,
  .lb-bar,
  .pz-goal-fill,
  .pz-ring-fill,
  .pz-step,
  .rw-panel,
  .rw-reveal,
  .pf-dialog,
  .pf-backdrop,
  .rw-overlay {
    animation: none !important;
  }

  .rw-rays,
  .pz-hero-gift,
  .rw-mini.is-drifting .rw-mini-spin,
  .pz-status.status-running::before {
    animation: none !important;
  }

  .pz-prize:hover, .contest-card:hover, .pf-option:hover { transform: none; }
}

/* a table that follows something else in a card keeps its own room */
.admin-card-body > * + .table-wrap { margin-top: 12px; }

@keyframes rw-reveal {
  from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.8); }
  to { opacity: 1; transform: translateX(-50%); }
}

@keyframes pz-step {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to { opacity: 1; transform: none; }
}

.rw-overlay.is-revealed .rw-canvas {
  filter: saturate(.75) brightness(.8);
  transition: filter 600ms ease;
}

.rw-count span {
  display: grid;
  place-items: center;
  width: 27%;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: clamp(34px, 6vw, 64px);
  background: radial-gradient(circle at 35% 30%, #ff7aa8, #e8457c 60%, #b8235a);
  box-shadow: 0 0 0 5px #fff, 0 10px 30px rgba(0,0,0,.45);
}

.rw-count span.is-wide {
  width: auto;
  aspect-ratio: auto;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: clamp(22px, 3.4vw, 34px);
}

.new-person-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
}

.new-person-box[hidden] { display: none; }

.check-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------------------------------------------- the wheel, live in a page */
.rw-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.rw-live-wheel {
  position: relative;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 1;
  margin-top: 14px;
  filter: drop-shadow(0 16px 28px rgba(20, 16, 60, .25));
}

.rw-live-canvas { display: block; width: 100%; height: 100%; }
.rw-live .rw-pointer { top: -16px; }
.rw-live .rw-count span { font-size: clamp(30px, 5vw, 56px); }
.rw-live .rw-count span.is-wide { font-size: clamp(18px, 2.6vw, 28px); }

.rw-live .rw-reveal {
  bottom: 6%;
  padding: 12px 18px 12px 12px;
  gap: 12px;
  max-width: 94%;
}

.rw-live .rw-winner-name { font-size: clamp(19px, 2.4vw, 26px); }
.rw-live .rw-prize-img { width: 64px; height: 64px; }

.rw-live.is-revealed .rw-live-canvas {
  filter: saturate(.7) brightness(.85);
  transition: filter 500ms ease;
}

.rw-live-ticker {
  min-height: 26px;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  color: var(--text-secondary);
}

.rw-live.is-spinning .rw-live-ticker { color: var(--pop-2); font-size: 19px; }
.rw-live.is-me .rw-reveal { background: linear-gradient(135deg, #fff5d6, #ffe0ef); }
.rw-live .rw-confetti { z-index: 4; }

/* agent side: the raffle on the left half, the wheel on the right */
.pz-wheel-note { text-align: center; max-width: 420px; }
.pz-winners-wrap { padding: 16px 20px 6px; }

.pz-drawn h3 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.pz-drawn ol,
.draw-drawn ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow: auto;
}

.pz-drawn li,
.draw-drawn li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--surface-2);
  animation: pz-step 420ms var(--ease-out) both;
}

.pz-drawn li.is-me { box-shadow: inset 0 0 0 2px var(--pop-3); }

.pz-drawn-place {
  min-width: 42px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: var(--surface-3);
  color: var(--text-primary);
}

li.place-1 .pz-drawn-place,
.draw-drawn li:nth-child(1) .pz-drawn-place {
  background: linear-gradient(135deg, #ffe08a, #e0a32a);
  color: #3a2600;
}

li.place-2 .pz-drawn-place,
.draw-drawn li:nth-child(2) .pz-drawn-place {
  background: linear-gradient(135deg, #f1f4f7, #9aa3ad);
  color: #1d242b;
}

li.place-3 .pz-drawn-place,
.draw-drawn li:nth-child(3) .pz-drawn-place {
  background: linear-gradient(135deg, #f3c39c, #c07a45);
  color: #2e1606;
}

.pz-drawn li strong, .draw-drawn li strong { flex: 1; min-width: 0; }

.pz-drawn-prize {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: right;
}

/* the LIVE tag on the Prizes tab while a draw is on */
.view-tab-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #e8457c;
  color: #fff;
  animation: pz-live 1.2s ease-in-out infinite;
}

.view-tab.is-active .view-tab-live { background: #fff; color: #e8457c; }

/* manager side: the tickets and the wheel side by side */
.draw-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.draw-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.draw-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.draw-right .admin-help { text-align: center; max-width: 380px; }

.admin-card-body .draw-left .table-wrap {
  margin: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.draw-table { max-height: 460px; overflow: auto; }

.draw-drawn h3 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

tr.is-won td { opacity: .6; }

.won-pill {
  background: linear-gradient(135deg, #ffe08a, #e0a32a);
  color: #3a2600;
  border: 0;
}

@media (max-width: 980px) {
  .pz-card-body.has-side, .draw-split { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .view-tab-live, .pz-drawn li, .draw-drawn li { animation: none !important; }
}

.action-row .task-badge, .action-row .btn { white-space: nowrap; }
.pz-main .pz-drawn { margin-top: 14px; }
.pz-winners-wrap .pz-drawn ol { max-height: 300px; }

/* --------------------- Prizes tab: winners as podium cards, evener layout */
.pz-card.kind-raffle { grid-column: 1 / -1; }
.pz-prizes:has(> :only-child) { grid-template-columns: minmax(190px, 340px); }

.pz-me.has-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 24px;
  align-items: start;
}

.pz-me.has-top > .pz-top {
  grid-column: 2;
  grid-row: 1 / span 4;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
}

.pz-me.has-top > :not(.pz-top) { grid-column: 1; }

@media (max-width: 760px) {
  .pz-me.has-top { grid-template-columns: 1fr; }
  .pz-me.has-top > .pz-top { grid-column: 1; grid-row: auto; }
}

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

.pz-main .pz-drawn-grid {
  max-height: 560px;
  overflow: auto;
  padding: 4px;
  margin: -4px;
}

.pz-win {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 10px 12px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  animation: pz-step 460ms var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.pz-win.place-1 {
  border-color: #d4a72c;
  background: color-mix(in srgb, #d4a72c 14%, var(--surface-1));
  box-shadow: 0 8px 22px color-mix(in srgb, #d4a72c 22%, transparent);
}

.pz-win.place-2 {
  border-color: #9aa3ad;
  background: color-mix(in srgb, #9aa3ad 10%, var(--surface-1));
}

.pz-win.place-3 {
  border-color: #b8794a;
  background: color-mix(in srgb, #b8794a 10%, var(--surface-1));
}

.pz-win.is-me {
  box-shadow: 0 0 0 3px var(--pop-3), 0 8px 22px color-mix(in srgb, var(--pop-3) 25%, transparent);
}

.pz-win-rank {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
}

.pz-win.place-1 .pz-win-rank { color: #9a6d00; }
.pz-win-face { margin: 2px 0; }

.pz-win.place-1 .pz-win-face {
  box-shadow: 0 0 0 3px #ffd166, 0 4px 10px rgba(0,0,0,.15);
}

.pz-win-name { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }

.pz-win-you {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pop-3);
}

.pz-win-value {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pz-win-prize { font-size: 12.5px; color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .pz-win { animation: none !important; }
}

.pz-winners-wrap + .pz-card-body {
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

/* ------------------------------------------------------------ QA scorecards */

.qa-table td { vertical-align: top; }
.qa-table tr.qa-self td { background: var(--surface-2); }
.qa-gap { color: var(--critical-text); font-weight: 700; }
.qa-comment { min-width: 180px; max-width: 320px; font-size: 12px; color: var(--text-secondary); }
.qa-errors summary { cursor: pointer; color: var(--critical-text); font-weight: 600; font-size: 12.5px; }
.qa-errors ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; }
.qa-errors li { margin-bottom: 6px; }
.qa-errors code {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------------------------------------------------- QA: call recordings */

.rec-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.rec-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.rec-steps strong { font-size: 14px; }
.rec-steps small { grid-column: 2; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.rec-step-n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: var(--good-text);
}
.rec-steps li.is-part .rec-step-n { background: var(--warning); color: #3d2a00; }
.rec-steps li.is-hold { background: var(--surface-2); }
.rec-steps li.is-hold .rec-step-n { background: var(--text-muted); }

.rec-checks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.rec-checks li { display: flex; gap: 8px; align-items: baseline; }
.rec-check-mark {
  flex: 0 0 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--good);
}
.rec-checks li.is-warn .rec-check-mark { background: var(--warning); color: #3d2a00; }

.rec-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--surface-3);
}
.rec-pill.is-done { color: var(--good-text); background: color-mix(in srgb, var(--good) 14%, var(--surface-1)); }
.rec-pill.is-warn { color: #6b4a00; background: color-mix(in srgb, var(--warning) 26%, var(--surface-1)); }
.rec-pill.is-bad { color: #fff; background: var(--critical); }
.rec-pill.is-hold { color: var(--text-muted); background: var(--surface-2); border: 1px dashed var(--border-strong); }
.rec-table td { vertical-align: top; }
.rec-board th.rec-grp { text-align: center; border-bottom: 1px solid var(--border); }
.rec-short { color: var(--critical-text); font-weight: 700; }
.rec-warn { color: var(--critical-text); }
.rec-audio { display: block; width: 100%; margin: 12px 0; }
.rec-transcript { font-family: inherit; font-size: 13px; line-height: 1.5; }
.rec-results { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
.rec-results li { margin-bottom: 4px; }

/* Call grading: the review panel in a call, the rubric view and editor */
.grade-box { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.grade-title { font-size: 14px; margin: 0 0 8px; }
.grade-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; margin-bottom: 10px; }
.grade-score { font-size: 20px; font-variant-numeric: tabular-nums; }
.grade-head small { flex-basis: 100%; }
.grade-flags { margin: 0 0 10px; font-size: 13px; }
.grade-flags ul { margin: 4px 0 0; padding-left: 18px; }
.grade-items { display: grid; gap: 6px; margin-bottom: 10px; }
.grade-sec { margin: 10px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.grade-item { padding: 8px 10px; border-radius: 8px; background: var(--surface-1); border-left: 3px solid var(--critical); }
.grade-item.is-met { border-left-color: var(--good); }
.grade-line { display: flex; gap: 8px; align-items: baseline; cursor: pointer; font-size: 13.5px; }
.grade-line input { flex: none; }
.grade-text { flex: 1; }
.grade-pts { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary); }
.grade-ai { flex: none; font-size: 11.5px; color: #6b4a00; background: color-mix(in srgb, var(--warning) 26%, var(--surface-1)); padding: 1px 6px; border-radius: 999px; }
.grade-ai[hidden] { display: none; }
.grade-quote { margin: 6px 0 0 24px; padding: 2px 0 2px 10px; border-left: 2px solid var(--border-strong); font-size: 13px; color: var(--text-secondary); font-style: italic; }
.grade-quote.is-missing { border-left-color: var(--critical); color: var(--critical-text); }
.grade-reason { margin: 4px 0 0 24px; font-size: 12.5px; color: var(--text-secondary); }
.rec-check summary { cursor: pointer; font-size: 13px; }
.rec-check-text { white-space: pre-wrap; font-family: inherit; font-size: 12.5px; max-height: 260px; overflow: auto; background: var(--surface-2); padding: 8px; border-radius: 6px; }
.rubric-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.rubric-view { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; }
.rubric-view-head { display: flex; gap: 6px; align-items: baseline; margin-bottom: 6px; }
.rubric-view-head button { margin-left: auto; }
.rubric-sec-view ul { margin: 2px 0 8px; padding-left: 18px; }
.rubric-sec-view li { margin-bottom: 2px; }
.rubric-sec-view .rec-pill { margin-left: 6px; font-size: 10.5px; }
.rubric-edit { display: grid; gap: 10px; margin-top: 10px; }
.rubric-row { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.rubric-row-top { display: flex; gap: 6px; align-items: center; }
.rubric-sec { flex: 1; min-width: 0; }
.rubric-pts { width: 70px; }
.rubric-guide { font-size: 12.5px; }
.btn.is-done { color: var(--good-text); }

@media (max-width: 760px) {
  .rec-steps { grid-template-columns: 1fr 1fr; }
}

/* Not Ready: what counts, per limit and per manager's view */
.nr-view {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.nr-view.is-own { border-color: color-mix(in srgb, var(--series-1) 45%, var(--border)); background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); }
.nr-view-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 8px; }
.nr-view-head select { width: auto; }
.nr-view-hide { margin-left: auto; font-size: 13px; }
.nr-view-checks { margin-bottom: 4px; }
.nr-view-checks input:disabled + span { color: var(--text-muted); }
.nr-view .admin-help { margin: 6px 0 0; }
.nr-official { display: block; margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.nr-counts-own { color: var(--series-1); font-weight: 600; }
.nr-counted .check-list { margin-top: 8px; }
.nr-form-wide { grid-column: 1 / -1; }
.nr-slack-text { font-size: 12px; color: var(--text-secondary); max-width: 720px; }
.nr-mentions input { width: 100%; min-width: 160px; }
.nr-member-id { font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }

/* ---------------------------------------------------------------- Resources */
.res-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }
.res-search { flex: 1 1 220px; min-width: 0; max-width: 360px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-1); color: inherit; font: inherit; }
.res-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.res-chip { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: inherit; cursor: pointer; }
.res-chip.is-on { background: var(--brand-800, #1b2140); border-color: transparent; color: #fff; }
.res-prog { padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-1); color: inherit; font: inherit; }
.res-group { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 18px 0 8px; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.res-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface-1); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.res-card:hover, .res-card:focus-visible { border-color: var(--brand-500, #2a78d6); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.res-icon { flex: none; width: 38px; height: 46px; display: grid; place-items: center; border-radius: 4px; background: #d6453d; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.res-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.res-title { font-size: 14.5px; }
.res-desc { font-size: 13px; color: var(--text-secondary); }
.res-meta { font-size: 12px; color: var(--text-muted); }
.res-open { flex: none; font-size: 12.5px; font-weight: 700; color: var(--brand-500, #2a78d6); }
.res-form { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.res-table td { vertical-align: top; }
.res-for { margin: 0 4px 4px 0; }
.res-actions { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 640px) { .res-form { grid-template-columns: 1fr; } }

/* Grading setup: rubric history, phrase lists */
.rubric-history { margin: 6px 0 12px; }
.rubric-history summary { cursor: pointer; font-weight: 600; }
.rubric-history .rc-controls { margin-top: 8px; flex-wrap: wrap; }
.rubric-history select { max-width: 100%; }
.rubric-sec-view .rec-pill { margin-left: 4px; }
.rubric-add { margin-top: 12px; }

/* ---- QA page: what needs you, filters, a calmer calls table (10/19/2026) */
.rec-todo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.rec-todo-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 10px;
  align-items: start; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-1);
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong); box-shadow: var(--shadow);
}
.rec-todo-tile.is-ok { border-left-color: var(--good); }
.rec-todo-tile.is-warn { border-left-color: var(--warning); }
.rec-todo-tile.is-bad { border-left-color: var(--critical); }
.rec-todo-tile.is-part { border-left-color: var(--series-1); }
.rec-todo-n { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-width: 1.4ch; }
.rec-todo-tile.is-ok .rec-todo-n { color: var(--text-muted); }
.rec-todo-tile.is-bad .rec-todo-n { color: var(--critical-text); }
.rec-todo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-todo-text strong { font-size: 14px; }
.rec-todo-text small { color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.rec-todo-tile .btn { grid-column: 1 / -1; justify-self: start; }
.rec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.rec-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border);
}
.rec-chip:hover:not(:disabled) { background: var(--surface-3); }
.rec-chip.is-on { background: var(--brand-600); border-color: var(--brand-600); color: var(--brand-ink-on); }
.rec-chip:disabled { opacity: .45; cursor: default; }
.rec-chip-n { font-variant-numeric: tabular-nums; font-size: 12px; padding: 0 6px; border-radius: 999px; background: var(--surface-1); color: var(--text-secondary); }
.rec-chip.is-on .rec-chip-n { background: rgba(255,255,255,.2); color: inherit; }
.rec-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.rec-table td { vertical-align: top; }
.rec-status { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-file { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.rec-result { min-width: 140px; }
.rec-row-todo td { background: color-mix(in srgb, var(--warning) 9%, transparent); }
.rec-setup-head { margin: 28px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.rec-setup-head h2 { margin: 0 0 4px; font-size: 18px; }
.rec-setup-head .admin-help { margin: 0; }
.qa-parts { min-width: 180px; }
.qa-part { display: inline-block; margin: 0 10px 2px 0; font-size: 12px; white-space: nowrap; }
.qa-comment details summary { cursor: pointer; list-style: none; }
.qa-comment details summary::-webkit-details-marker { display: none; }
.qa-comment details[open] summary { display: none; }
.qa-comment details p { margin: 0; }
@media (max-width: 1100px) { .rec-todo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .rec-todo { grid-template-columns: 1fr; }
  .rec-todo-tile { padding: 12px 14px; }
  .rec-chip { padding: 6px 10px; }
}
.qa-table .qa-parts { max-width: 230px; }
.qa-table .qa-comment { min-width: 160px; max-width: 240px; }
.qa-table td:nth-child(4) { white-space: normal; min-width: 120px; }
.rec-chip.is-on, .rec-chip.is-on:hover:not(:disabled) { background: var(--brand-600); border-color: var(--brand-600); color: var(--brand-ink-on); }
@media (max-width: 560px) {
  /* Phones: the result and the file name give way to what matters, where it's at and the button. */
  .rec-table th:nth-child(4), .rec-table td:nth-child(4) { display: none; }
  .rec-table .rec-file { max-width: 120px; }
}
.rec-pull { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.rec-pull .btn { margin-left: auto; }
.rec-pull-now { font-weight: 600; }
.rec-pull-done { color: var(--good-text); }
.rec-pull-bar { flex: 1 1 100%; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rec-pull-bar span { display: block; height: 100%; background: var(--series-1); border-radius: inherit; transition: width .6s ease; }
.rec-pull-bar.is-busy span { width: 30%; animation: rec-busy 1.2s ease-in-out infinite alternate; }
@keyframes rec-busy { from { margin-left: 0; } to { margin-left: 70%; } }
@media (prefers-reduced-motion: reduce) { .rec-pull-bar.is-busy span { animation: none; width: 100%; opacity: .5; } }

/* QA page: the four steps as one slim row (10/19/2026). A ready step is a tick and its name;
   one that isn't ready says why. */
.rec-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.rec-steps li {
  display: inline-flex; align-items: center; gap: 8px; grid-template-columns: none;
  padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px;
}
.rec-steps strong { font-size: 13px; }
.rec-steps small { grid-column: auto; font-size: 12px; line-height: 1.3; }
.rec-step-n { grid-row: auto; width: 22px; height: 22px; font-size: 12px; }
.rec-steps li + li { position: relative; }
@media (max-width: 860px) { .rec-steps { gap: 6px; } .rec-steps li { padding: 4px 10px 4px 4px; } }
/* The to-do tiles: a little tighter. */
.rec-todo { gap: 10px; margin-bottom: 14px; }
.rec-todo-tile { padding: 12px 14px; row-gap: 8px; }
.rec-todo-n { font-size: 24px; }
.memo-scores { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.call-note { margin: 10px 0; }
.call-note summary { cursor: pointer; font-weight: 600; }
.call-note textarea { margin-top: 6px; }

/* Transcription progress (QA page) */
.tx-progress { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow); }
.tx-progress[hidden] { display: none; }
.tx-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.tx-count { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.tx-bar { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.tx-bar span { display: block; height: 100%; border-radius: inherit; background: var(--series-1); transition: width .8s ease; }

/* QA page, 10/20/2026: the week in one box, alerts only when something needs a manager. */
.rec-week { display: grid; gap: 14px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-1); box-shadow: var(--shadow); }
.rec-week-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.rec-week-top .admin-field { margin: 0; min-width: 190px; }
.rec-week-status { flex: 1 1 260px; margin: 0 0 6px; }
.rec-week-top .action-row { margin: 0 0 2px; }
.rec-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rec-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.rec-stat strong { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rec-stat span { font-size: 13px; color: var(--text-secondary); }
.rec-stat small { font-size: 11.5px; }
.rec-alerts { display: grid; gap: 8px; margin: 0 0 16px; }
.rec-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.rec-alert span { flex: 1 1 240px; }
.rec-score { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-score.is-so-far { color: var(--text-muted); font-weight: 600; }
.rec-board td { vertical-align: top; }
.rec-board .rec-name { text-align: left; }
.rec-list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 4px; }
.rec-list-tools .rec-chips { margin: 4px 0 8px; }
.rec-list-tools select { width: auto; }
.rec-setup-intro { margin: 0 0 14px; }
@media (max-width: 760px) { .rec-stats { grid-template-columns: 1fr 1fr; } }
.rec-board { table-layout: fixed; }
.rec-board th:nth-child(1) { width: 26%; }
.rec-board th.rec-sc { width: 24%; }
.rec-board .rec-sc { text-align: left; }
.rec-board .rec-sc .rc-sub { display: block; }
.rec-board-help { margin-top: 12px; }
.rec-memo-later { color: var(--text-muted); }
@media (max-width: 560px) { .rec-board { table-layout: auto; } .rec-board th:nth-child(1), .rec-board th.rec-sc { width: auto; } }

/* QA page, 10/20/2026 (2): a score's points, Met / Half / Missed on a call, LiveVox fetches. */
.rec-pts { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-left: 4px; }
.rec-score.is-so-far .rec-pts { color: var(--text-muted); }
.grade-item.is-partial { border-left-color: var(--warning); }
.grade-item.is-met { border-left-color: var(--good); }
.grade-pick { flex: none; display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.grade-pick-btn { font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border: 0; background: var(--surface-1);
  color: var(--text-secondary); cursor: pointer; }
.grade-pick-btn + .grade-pick-btn { border-left: 1px solid var(--border); }
.grade-pick-btn:hover { background: var(--surface-3); }
.grade-pick-btn.is-met.is-on { background: var(--good); color: #fff; }
.grade-pick-btn.is-partial.is-on { background: var(--warning); color: #3d2a00; }
.grade-pick-btn.is-missed.is-on { background: var(--critical); color: #fff; }
.grade-line .grade-pts { white-space: nowrap; }
.rec-stat.is-bad strong { color: var(--critical-text); }
.rec-stat.is-warn strong { color: #8a5d00; }
.fetch-strip { display: grid; gap: 4px; margin: 0 0 8px; }
.fetch-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 7px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.fetch-day:hover { border-color: var(--border-strong); }
.fetch-day-wd { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.fetch-day strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.fetch-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); display: inline-block; flex: none; }
.is-ok > .fetch-dot { background: var(--good); }
.is-bad > .fetch-dot { background: var(--critical); }
.is-warn > .fetch-dot { background: var(--warning); }
.is-part > .fetch-dot { background: var(--series-1); }
.is-hold > .fetch-dot { background: transparent; border: 1.5px dashed var(--border-strong); }
.fetch-day.is-bad { background: color-mix(in srgb, var(--critical) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--critical) 40%, var(--border)); }
.fetch-day.is-warn { background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); }
.fetch-day.is-hold { opacity: .6; }
.fetch-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; font-size: 12px; color: var(--text-secondary); }
.fetch-key { display: inline-flex; align-items: center; gap: 6px; }
.fetch-table td { vertical-align: top; }
.fetch-row.is-hold td { color: var(--text-muted); }
.fetch-row.is-bad td:first-child { box-shadow: inset 3px 0 0 var(--critical); }
.fetch-row.is-flash td { background: color-mix(in srgb, var(--series-1) 14%, transparent); transition: background .3s; }
.fetch-zip + .fetch-zip { margin-top: 6px; }
.fetch-zip span { word-break: break-all; }
.fetch-notes { max-width: 340px; font-size: 12.5px; }
.fetch-notes > * { display: block; }
.rec-week > .rec-pull { margin: 0; }
.nav-toggle-group .nav-badge { margin-left: auto; margin-right: 8px; letter-spacing: 0; }
@media (max-width: 760px) {
  .fetch-strip { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .fetch-table th:nth-child(5), .fetch-table td:nth-child(5) { display: none; }
}

/* =====================================================================
   Refresh, 10/21/2026. Everything for this round is in this one block, so
   it can be taken back in one go: the phone header and bottom tab bar, one
   tab colour, the date stepper, the scorecard's More details, the sign-in
   page, Home's Today strip, calmer badges, motion and loading placeholders.
   ===================================================================== */

/* ---- readable grey: the muted text was too light on white */
:root[data-theme="light"] { --text-muted: #6b6964; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --text-muted: #6b6964; } }
@media (prefers-color-scheme: no-preference) { :root:not([data-theme="dark"]) { --text-muted: #6b6964; } }

/* ---- agent tabs: one colour for the tab you're on */
.view-tab.tab-board, .view-tab.tab-me, .view-tab.tab-calls, .view-tab.tab-prizes,
.view-tab.tab-calendar, .view-tab.tab-feedback, .view-tab.tab-resources { --tab: var(--series-1, #2a78d6); }
.view-tab.tab-calendar.is-active { color: #fff; }

/* ---- the date stepper: ‹ Tue, Sep 22 ›  [Day | Whole week]  Latest day */
.date-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.date-box { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface-1); overflow: hidden; }
.date-arrow { width: 42px; min-height: 42px; border: 0; background: transparent; color: var(--text-primary); font: inherit;
  font-size: 22px; line-height: 1; cursor: pointer; transition: background-color .15s ease; }
.date-arrow:hover:not(:disabled) { background: var(--surface-3); }
.date-arrow:disabled { color: var(--text-muted); opacity: .45; cursor: default; }
.date-mid { position: relative; display: flex; border-inline: 1px solid var(--border); }
.date-now { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; min-width: 170px; justify-content: center;
  border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.date-now:hover { background: var(--surface-2); }
.date-cal { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.date-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; border: 0; padding: 0; }
.date-mode .seg-btn:disabled { opacity: .45; cursor: default; }
.filters .date-stepper { flex: 1 1 auto; }
@media (max-width: 640px) {
  .date-stepper { gap: 8px; }
  .date-box { flex: 1 1 100%; }
  .date-mid { flex: 1; }
  .date-now { flex: 1; min-width: 0; padding: 0 8px; font-size: 14.5px; }
  .date-mode { flex: 1 1 auto; }
}

/* ---- My Scorecard: More details */
.me-card.is-nogoal { border-left-color: var(--border-strong); }
.me-more { margin: 6px 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.me-more > summary { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 700; list-style: none; }
.me-more > summary::-webkit-details-marker { display: none; }
.me-more > summary::before { content: "›"; display: inline-block; transition: transform .18s ease; color: var(--text-muted); font-size: 18px; line-height: 1; }
.me-more[open] > summary::before { transform: rotate(90deg); }
.me-more .table-wrap { border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.me-more-table td, .me-more-table th { padding-block: 9px; }

/* ---- empty pages get a friendly mark */
#content > p.empty::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 6.5h13v8a1.5 1.5 0 0 1-1.5 1.5H5a1.5 1.5 0 0 1-1.5-1.5z M3.5 6.5l2-3h9l2 3 M7.5 10h5' fill='none' stroke='%23898781' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
#content > p.empty { font-size: 14px; line-height: 1.5; max-width: 440px; margin-inline: auto; }

/* ---- the phone header (agent side): one row -- logo, a small countdown, the theme, your face */
@media (max-width: 640px) {
  body:not(.admin) .topbar { flex-wrap: nowrap; height: 56px; min-height: 0; padding: 0 10px; gap: 8px; }
  body:not(.admin) .topbar .brand-text,
  body:not(.admin) .topbar .topbar-meta,
  body:not(.admin) .topbar .whoami-name,
  body:not(.admin) .topbar #signOut,
  body:not(.admin) .topbar .whoami .pf-edit,
  body:not(.admin) .topbar #themeToggle { display: none; }
  body:not(.admin) .topbar .topbar-spacer { display: none; }
  body:not(.admin) .topbar .portal-countdown:not([hidden]) {
    order: 0; flex: 1 1 auto; min-width: 0; justify-content: center; gap: 6px; padding: 4px 10px;
  }
  body:not(.admin) .topbar .cd-title { overflow: hidden; text-overflow: ellipsis; max-width: 34vw; font-size: 10px; }
  body:not(.admin) .topbar .cd-units:not([hidden]) { gap: 5px; }
  body:not(.admin) .topbar .cd-unit:last-child { display: none; }
  body:not(.admin) .topbar .cd-num { font-size: 15px; }
  body:not(.admin) .topbar .cd-lab { font-size: 9px; }
  body:not(.admin) .topbar .whoami { padding-left: 0; margin-left: auto; }
  body:not(.admin) .topbar #backToAdmin span { display: none; }
  body:not(.admin) .topbar .whoami.is-clickable::after { display: none; }
}
.who-menu {
  position: fixed; top: 60px; right: 10px; z-index: 80; min-width: 190px; padding: 6px;
  display: grid; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(10, 14, 40, .22); animation: rca-pop .16s var(--ease-out) both;
}
.who-menu > * { display: block; width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-size: 15px; text-align: left; color: var(--text-primary); text-decoration: none; cursor: pointer; }
.who-menu > *:hover { background: var(--surface-2); }
.who-menu .is-out { color: var(--critical-text); font-weight: 600; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; }
@keyframes rca-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---- the bottom tab bar (phones) */
.bottom-nav { display: none; }
@media (max-width: 640px) {
  body.has-bottom-nav .view-tabs { display: none; }
  body.has-bottom-nav .content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface-1) 94%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(10, 14, 40, .08);
  }
  .bn-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 4px 2px; border: 0; border-radius: 12px; background: transparent; font: inherit;
    color: var(--text-muted); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, background-color .15s ease;
  }
  .bn-item svg { width: 24px; height: 24px; transition: transform .2s var(--ease-out); }
  .bn-label { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bn-item.is-active { color: var(--series-1, #2a78d6); background: color-mix(in srgb, var(--series-1, #2a78d6) 10%, transparent); }
  .bn-item.is-active svg { transform: translateY(-1px) scale(1.06); }
  .bn-item:active svg { transform: scale(.92); }
  .bn-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--critical); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
  .bn-badge.bn-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 8px; }
  .bn-live { position: absolute; top: 2px; left: calc(50% + 4px); padding: 0 5px; border-radius: 999px; background: #e8457c; color: #fff;
    font-size: 9.5px; font-weight: 800; line-height: 15px; text-transform: uppercase; animation: rca-pulse 1.6s ease-in-out infinite; }
}
@keyframes rca-pulse { 50% { opacity: .55; } }
.sheet-back { position: fixed; inset: 0; z-index: 90; background: rgba(11, 11, 11, 0); display: flex; align-items: flex-end;
  transition: background-color .2s ease; }
.sheet-back.is-open { background: rgba(11, 11, 11, .4); }
.sheet { width: 100%; padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface-1);
  border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25); transform: translateY(100%); transition: transform .26s var(--ease-out); }
.sheet-back.is-open .sheet { transform: none; }
.sheet-grip { width: 40px; height: 5px; margin: 2px auto 10px; border-radius: 999px; background: var(--border-strong); }
.sheet-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 14px; border-radius: 12px;
  color: var(--text-primary); text-decoration: none; font-size: 16px; font-weight: 600; }
.sheet-item svg { width: 22px; height: 22px; color: var(--text-secondary); }
.sheet-item:hover, .sheet-item.is-active { background: var(--surface-2); }
.sheet-item.is-active { color: var(--series-1, #2a78d6); }
.sheet-item .bn-badge { position: static; margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--critical);
  color: #fff; font-size: 12px; line-height: 20px; text-align: center; }

/* ---- a stretch hit: confetti, once a day */
.cheer { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.cheer i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; opacity: .95;
  animation-name: rca-fall; animation-timing-function: cubic-bezier(.25, .6, .4, 1); animation-fill-mode: both; }
@keyframes rca-fall { to { transform: translate(var(--drift, 0), 105vh) rotate(540deg); opacity: .9; } }
.cheer-note { position: fixed; left: 50%; top: 76px; z-index: 96; transform: translateX(-50%); padding: 12px 18px; border-radius: 14px;
  background: var(--good-text, #0a7d0a); color: #fff; font-weight: 700; font-size: 14.5px; box-shadow: 0 12px 30px rgba(0,0,0,.2);
  animation: rca-pop .25s var(--ease-out) both; transition: opacity .5s ease, transform .5s ease; max-width: calc(100vw - 32px); text-align: center; }
.cheer-note.is-out { opacity: 0; transform: translate(-50%, -10px); }

/* ---- the sign-in page */
.gate-greet { margin: -4px 0 18px; text-align: center; font-size: 14px; color: var(--text-secondary); }
.gate-pass { position: relative; }
.gate-pass input { width: 100%; padding-right: 48px; }
.gate-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 38px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.gate-eye:hover { background: var(--surface-2); color: var(--text-primary); }
.gate-eye svg { width: 20px; height: 20px; }
.gate-eye .eye-shut, .gate-eye[aria-pressed="true"] .eye-open { display: none; }
.gate-eye[aria-pressed="true"] .eye-shut { display: block; }
.gate-caps { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: #8a5d00; }
.gate-caps::before { content: "⇪ "; }
#username::placeholder { text-transform: none; letter-spacing: normal; }
.gate-card { animation: rca-pop .35s var(--ease-out) both; }

/* ---- manager console: a smaller countdown, calmer badges */
body.admin .topbar .portal-countdown:not([hidden]) { padding: 3px 12px; gap: 8px; }
body.admin .topbar .cd-title { font-size: 10px; }
body.admin .topbar .cd-num { font-size: 15px; }
body.admin .topbar .cd-lab { font-size: 9px; }
.nav-badge { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .92); }
.nav-badge.is-urgent { background: var(--critical); color: #fff; }
.nav-action { width: 100%; border: 0; background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.nav-action:disabled { opacity: .5; cursor: progress; }

/* ---- Home: Today */
.today-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.today-tile { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-1);
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong); box-shadow: var(--shadow);
  color: inherit; text-decoration: none; transition: transform .15s var(--ease-out), box-shadow .15s ease; }
.today-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10, 14, 40, .12); }
.today-tile.is-ok { border-left-color: var(--good); }
.today-tile.is-bad { border-left-color: var(--critical); }
.today-tile.is-warn { border-left-color: var(--warning); }
.today-tile.is-part { border-left-color: var(--series-1, #2a78d6); }
.today-n { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.today-tile.is-bad .today-n { color: var(--critical-text); }
.today-label { font-size: 13.5px; font-weight: 600; }
.today-sub { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 1000px) { .today-strip { grid-template-columns: 1fr 1fr; } }

/* ---- tables in the console: the header stays put, the row under the mouse lights up */
body.admin .table-wrap { max-height: none; }
body.admin .grid-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
body.admin .grid-table tbody tr { transition: background-color .12s ease; }
body.admin .grid-table tbody tr:hover > td { background: color-mix(in srgb, var(--series-1, #2a78d6) 5%, transparent); }

/* ---- motion: pages fade in (console too), windows grow in, toasts rise */
body.admin #content.is-entering > * { animation: rca-enter 320ms var(--ease-out) both; }
.modal-backdrop:not([hidden]) { animation: rca-fade .18s ease both; }
.modal-backdrop:not([hidden]) .modal { animation: rca-pop .22s var(--ease-out) both; }
.toast:not([hidden]) { animation: rca-rise .22s var(--ease-out) both; }
@keyframes rca-fade { from { opacity: 0; } }
@keyframes rca-rise { from { opacity: 0; transform: translate(-50%, 10px); } }
#content.is-entering .goal-bar .goal-bar-fill { animation: rca-fill .7s var(--ease-out) both; transform-origin: left; }
@keyframes rca-fill { from { transform: scaleX(0); } }

/* ---- loading: the shape of the page instead of "Loading…" */
.skeleton-page { display: grid; gap: 14px; padding: 4px 0; }
.sk { border-radius: 10px; background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 45%, var(--surface-3) 90%);
  background-size: 200% 100%; animation: rca-shimmer 1.3s ease-in-out infinite; }
.sk-tabs { height: 46px; border-radius: 14px; }
.sk-title { height: 26px; width: 220px; }
.sk-line { height: 14px; width: 320px; max-width: 70%; }
.sk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sk-card { height: 120px; border-radius: var(--radius); }
.sk-block { height: 260px; border-radius: var(--radius); }
@keyframes rca-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 640px) { .sk-row { grid-template-columns: 1fr; } .sk-row .sk-card:nth-child(n+2) { display: none; } }

/* ---- Appearance: How numbers look to agents */
.agent-formats td { vertical-align: middle; }
.agent-formats input, .agent-formats select { width: 100%; min-width: 120px; }
.af-look { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- bigger touch targets on phones */
@media (max-width: 640px) {
  .btn-small { min-height: 38px; }
  .seg-btn { min-height: 40px; }
  .kpi-tab { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .sk, .bn-live, .cheer i, .gate-card, .who-menu, .today-tile, .modal-backdrop:not([hidden]),
  .modal-backdrop:not([hidden]) .modal, .toast:not([hidden]), .goal-bar .goal-bar-fill,
  body.admin #content.is-entering > * { animation: none !important; transition: none !important; }
  .sheet, .sheet-back { transition: none; }
}
.agent-formats input[type="text"] { border: 1px solid var(--border-strong); background: var(--surface-1); border-radius: var(--radius-sm); padding: 7px 9px; }
.agent-formats + .action-row, .table-wrap + .action-row { margin-top: 12px; }
@media (max-width: 640px) { body:not(.admin) .topbar .cd-title { display: none; } }

/* ---- 10/21/2026 (2): quieter dates, a slim trend strip */
.date-latest { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--series-1, #2a78d6); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.date-latest:hover { text-decoration-thickness: 2px; }
.trend-strip { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; align-items: center; gap: 18px;
  margin-top: 14px; padding: 12px 16px; }
.trend-text { display: grid; gap: 3px; min-width: 0; }
.trend-label { font-size: 12px; color: var(--text-secondary); }
.trend-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.trend-now strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.trend-chg { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.trend-chg.is-up { color: var(--good-text); }
.trend-chg.is-down { color: var(--critical-text); }
.trend-chart { position: relative; height: 56px; min-width: 0; }
.trend-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.trend-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trend-area { opacity: .1; stroke: none; }
.trend-goal { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .7; }
.trend-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--surface-1); }
@media (max-width: 640px) { .trend-strip { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 640px) { .date-mode { flex: 0 0 auto; } }

/* ---- 10/21/2026 (3): Day/Week/Month tabs and the date in one bar; lunch & break under the header;
   everyone's colour on their face and their bars */
.board-filters { align-items: center; gap: 10px 16px; }
.board-filters .span-tabs { margin: 0; }
.board-filters .date-stepper { flex: 0 1 auto; }
@media (max-width: 640px) {
  .board-filters .span-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .board-filters .span-tabs::-webkit-scrollbar { display: none; }
  .board-filters .span-tabs .seg-btn { flex: 1 0 auto; white-space: nowrap; }
}

.break-bar { position: sticky; top: var(--topbar-h); z-index: 38; }
.break-bar[hidden] { display: none; }
.break-bar .break-strip {
  margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--border);
  justify-content: center; padding: 7px 16px; box-shadow: 0 4px 12px rgba(10, 14, 40, .06);
  background: color-mix(in srgb, var(--surface-1) 95%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.break-bar .break-item { min-width: 0; }
.break-wait { font-size: 12px; color: var(--text-muted); }
@media (max-width: 1100px) { body:not(.admin) .break-bar { top: auto; position: relative; } }
@media (max-width: 640px) {
  body:not(.admin) .break-bar { position: sticky; top: 56px; }
  .break-bar .break-strip { gap: 6px 12px; padding: 6px 10px; justify-content: flex-start; }
  .break-bar .break-strip-label { flex-basis: 100%; font-size: 10px; }
  .break-bar .break-item { gap: 6px; font-size: 12.5px; }
  .break-bar .break-item .nr-meter { width: 56px; min-width: 56px; }
  .break-bar .break-used { display: none; }
}

.rca-face.has-ring { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--ring), 0 1px 3px rgba(0,0,0,.18); }
.topbar .rca-face.has-ring { box-shadow: 0 0 0 2px var(--brand-800, #1b2a4a), 0 0 0 4px var(--ring); }
.span-val strong { display: block; }
.span-bar { display: block; height: 5px; margin-top: 5px; margin-left: auto; width: 120px; max-width: 100%; border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 7%, transparent); overflow: hidden; }
.span-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--lb-color, var(--series-1, #2a78d6)); }

/* ---- QA progress panel (10/21/2026): fetch, Whisper, Claude, memos */
.prog-panel { display: grid; gap: 2px; margin: 0 0 16px; padding: 6px 16px; border-radius: var(--radius);
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow); }
.prog-row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 10px 0; }
.prog-row + .prog-row { border-top: 1px solid var(--border); }
.prog-icon { width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--text-muted); }
.prog-row.is-done .prog-icon { background: var(--good); }
.prog-row.is-run .prog-icon { background: transparent; border: 2.5px solid color-mix(in srgb, var(--series-1, #2a78d6) 25%, transparent);
  border-top-color: var(--series-1, #2a78d6); animation: prog-spin .9s linear infinite; width: 18px; height: 18px; margin: 2px; }
.prog-row.is-wait .prog-icon { background: var(--warning); color: #3d2a00; }
.prog-row.is-off .prog-icon { background: var(--critical); }
@keyframes prog-spin { to { transform: rotate(360deg); } }
.prog-main { min-width: 0; display: grid; gap: 6px; }
.prog-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.prog-head strong { font-size: 14px; }
.prog-count { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.prog-eta { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--series-1, #2a78d6); }
.prog-row.is-wait .prog-eta { color: #8a5d00; }
.prog-bar { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.prog-bar span { display: block; height: 100%; border-radius: inherit; background: var(--series-1, #2a78d6); transition: width .6s var(--ease-out); }
.prog-row.is-done .prog-bar span { background: var(--good); }
.prog-row.is-wait .prog-bar span { background: var(--warning); }
.prog-row.is-run .prog-bar span { background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%; animation: rca-shimmer 1.4s linear infinite; }
.prog-bar.is-busy span { width: 30% !important; animation: rec-busy 1.2s ease-in-out infinite alternate; }
.prog-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; }
.prog-now { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .prog-row.is-run .prog-icon, .prog-row.is-run .prog-bar span { animation: none; } }

/* ---- outside IDs (10/22/2026) */
.id-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.id-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.id-chip small { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; }
.id-chip.is-main { border-color: color-mix(in srgb, var(--series-1, #2a78d6) 45%, var(--border)); }
.id-chip.is-big { padding: 5px 6px 5px 10px; font-size: 13px; }
.id-chip em { font-style: normal; font-size: 11px; color: var(--series-1, #2a78d6); font-weight: 600; }
.id-x { border: 0; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 1; padding: 0 4px;
  border-radius: 999px; cursor: pointer; }
.id-x:hover { color: var(--critical-text); background: var(--surface-3); }
.id-more { font-size: 12px; }
.id-editor { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); display: grid; gap: 10px; }
.id-editor-head { display: grid; gap: 2px; }
.id-list { display: flex; flex-wrap: wrap; gap: 6px; }
.id-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.id-add select, .id-add input { padding: 7px 9px; font: inherit; font-size: 13px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-primary); }
.id-add input[hidden] { display: none; }
.ids-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ids-callout span { flex: 1 1 260px; }
.acct-ids { margin-top: 4px; }
.ids-ignored { margin-top: 12px; font-size: 13px; }
.ids-ignored summary { cursor: pointer; }
.grid-table .id-add input[type="text"], .grid-table .id-add select { border: 1px solid var(--border-strong); background: var(--surface-1); padding: 7px 9px; border-radius: var(--radius-sm); }
.grade-pick-btn.is-na.is-on { background: var(--text-secondary); color: #fff; }
.grade-item.is-na { border-left-color: var(--border-strong); opacity: .75; }

/* ---- QA calls list: sortable columns, agent / direction / search / sort (10/22/2026) */
.rec-list-filters { margin-bottom: 8px; }
.rec-list-filters select, .rec-search { padding: 7px 10px; font: inherit; font-size: 13px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-primary); }
.rec-search { flex: 1 1 200px; min-width: 160px; }
.th-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit;
  color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.th-sort:hover { color: var(--text-primary); }
.th-arrow { font-size: 10px; opacity: .45; }
th.is-sorted .th-arrow { opacity: 1; color: var(--series-1, #2a78d6); }
th.is-sorted { color: var(--text-primary); }
.rec-table th.num .th-sort { margin-left: auto; }
.rec-score-cell { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .rec-list-filters select { flex: 1 1 45%; } }

/* ---- My calls, tidied (10/22/2026): fewer cards, notes as quiet chips, charts sharing a card */
.cv-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cv-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; line-height: 1.35; color: var(--text-secondary);
  background: var(--surface-2, rgba(127,127,127,.08)); border-radius: 999px; padding: 4px 11px;
}
.cv-note.is-warn { color: var(--text-primary); background: color-mix(in srgb, var(--warning, #eda100) 14%, transparent); }
.cv-note.is-warn::before { content: '!'; font-weight: 700; width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 10.5px; background: color-mix(in srgb, var(--warning, #eda100) 30%, transparent); }
.cv-panes { display: grid; gap: 22px; }
.cv-panes.is-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.cv-panes.is-two > .cv-pane + .cv-pane { border-left: 1px solid var(--border, rgba(127,127,127,.18)); padding-left: 24px; }
.cv-panes.is-two > .cv-pane:first-child { padding-right: 24px; }
.cv-pane { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cv-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cv-pane-title { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.cv-pane-sub { font-size: 12px; color: var(--text-muted); }
.cv-pane-foot { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.cv-split-box { padding-top: 14px; border-top: 1px dashed var(--border, rgba(127,127,127,.18)); }
.cv-hour-key { display: inline-flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-secondary); }
.cv-hour-key > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cv-grid { align-items: start; }
@media (max-width: 860px) {
  .cv-panes.is-two { grid-template-columns: 1fr; gap: 22px; }
  .cv-panes.is-two > .cv-pane + .cv-pane { border-left: 0; padding-left: 0; border-top: 1px solid var(--border, rgba(127,127,127,.18)); padding-top: 18px; }
  .cv-panes.is-two > .cv-pane:first-child { padding-right: 0; }
}
.admin-card-head .cv-hour-key { margin-left: auto; }

/* ---- My QA, agent side (10/22/2026): read-only scores, memo, graded calls */
.qa-view { display: grid; gap: 16px; }
.qa-view > .admin-card { margin: 0; }
.qa-filters { margin: 0; }
.qa-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.qa-empty { padding: 22px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-1); }
.qa-empty strong { display: block; font-size: 15px; margin-bottom: 6px; }
.qa-empty p { margin: 0; color: var(--text-secondary); max-width: 64ch; line-height: 1.5; }

.qa-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qa-tile { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.qa-tile-label { font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.qa-tile-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qa-tile-pct { font-size: 32px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.qa-tile-pts { font-size: 13.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.qa-tile-sub { font-size: 12.5px; color: var(--text-muted); }
.qa-tile-words { font-size: 12.5px; color: var(--text-secondary); padding-top: 6px; border-top: 1px dashed var(--border); }
.qa-tile-words.is-over { color: var(--critical-text); }
.qa-tile.is-empty .qa-tile-pct { color: var(--text-muted); }
.qa-meter { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.qa-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--series-1); }
.qa-meter.is-high > span { background: var(--good); }
.qa-meter.is-mid > span { background: var(--warning); }
.qa-meter.is-low > span { background: var(--critical); }

/* folds: one look for the memo, the call groups, rubric sections, the transcript */
.qa-fold { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.qa-fold + .qa-fold { margin-top: 10px; }
.qa-fold-sum { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; border-radius: var(--radius); }
.qa-fold-sum::-webkit-details-marker { display: none; }
.qa-fold-sum:hover { background: var(--surface-2); }
.qa-fold-sum:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.qa-fold-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.qa-fold-title strong { font-size: 14px; }
.qa-fold-title small { font-size: 12.5px; color: var(--text-muted); }
.qa-chev { flex: none; width: 9px; height: 9px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translateY(-3px); transition: transform .18s; }
.qa-fold[open] > .qa-fold-sum .qa-chev { transform: rotate(225deg) translateY(-1px); }
.qa-fold[open] > .qa-fold-sum { border-bottom: 1px solid var(--border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.qa-fold-body { padding: 12px 14px 14px; }
.qa-fold[open] > .qa-fold-body { animation: rca-fade .18s ease both; }

/* the memo: its summary reads as the call to action */
.qa-memo { border-color: color-mix(in srgb, var(--series-1) 35%, var(--border)); background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); }
.qa-memo > .qa-fold-sum { padding: 14px 16px; }
.qa-memo-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--series-1) 16%, transparent) center / 18px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.8h6.6L15.5 6.7V17.2H5z M11.4 3v4h4 M7.5 10.5h5 M7.5 13.5h5' fill='none' stroke='%232a78d6' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.qa-memo-cta { flex: none; font-size: 13px; font-weight: 600; color: #fff; background: var(--series-1); border-radius: 999px; padding: 6px 14px; }
.qa-memo[open] .qa-memo-cta { color: var(--text-secondary); background: transparent; border: 1px solid var(--border-strong); }
.qa-memo .qa-memo-close, .qa-memo[open] .qa-memo-open { display: none; }
.qa-memo[open] .qa-memo-close { display: inline; }
.qa-memo .qa-chev { display: none; }
.qa-memo > .qa-fold-body { padding: 6px 20px 20px; background: var(--surface-1); border-radius: 0 0 var(--radius) var(--radius); }
.qa-memo-text { max-width: 72ch; font-size: 14.5px; line-height: 1.6; color: var(--text-primary); }
.qa-memo-text p { margin: 10px 0 0; }
.qa-memo-text h4 { margin: 18px 0 0; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary); }
.qa-memo-text ol, .qa-memo-text ul { margin: 8px 0 0; padding-left: 22px; }
.qa-memo-text li + li { margin-top: 4px; }
.qa-memo-none { margin: 0; }

/* the graded calls */
.qa-calls-hint { margin: 0 0 12px; }
.qa-group > .qa-fold-body { padding: 4px 6px 6px; }
.qa-calls { display: grid; }
.qa-call { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr) auto auto; align-items: center; gap: 14px; padding: 10px 10px; border-radius: 8px; }
.qa-call + .qa-call { border-top: 1px solid var(--border); }
.qa-call:hover { background: var(--surface-2); }
.qa-call:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.qa-call-when, .qa-call-what { display: grid; gap: 2px; min-width: 0; }
.qa-call-when strong { font-size: 13.5px; }
.qa-call small, .qa-call-what small { font-size: 12px; color: var(--text-muted); }
.qa-call-what span { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-score { display: grid; justify-items: end; gap: 1px; font-variant-numeric: tabular-nums; }
.qa-score strong { font-size: 15px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); }
.qa-score.is-high strong { color: var(--good-text); background: color-mix(in srgb, var(--good) 13%, transparent); }
.qa-score.is-mid strong { background: color-mix(in srgb, var(--warning) 20%, transparent); }
.qa-score.is-low strong { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 12%, transparent); }
.qa-call-open { font-size: 12.5px; font-weight: 600; color: var(--series-1); }
.qa-call-open::after { content: ' ›'; }

/* one call, in the modal */
body.has-modal { overflow: hidden; }
.qa-modal { width: min(820px, 100%); }
.qa-modal-body { display: grid; gap: 12px; padding: 16px 18px 20px; }
.qa-call-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qa-big { display: flex; align-items: baseline; gap: 10px; }
.qa-big strong { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.qa-big span { font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.qa-big.is-high strong { color: var(--good-text); }
.qa-big.is-low strong { color: var(--critical-text); }
.qa-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-fact { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); }
.qa-fact.is-checked { color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent); }
.qa-call-sum { margin: 0; }
.qa-grade-box { margin: 0; }
.qa-grade-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.qa-grade-head .grade-title { margin: 0; }
.qa-seg { margin: 0; }
.qa-items { display: grid; gap: 8px; }
.qa-items .qa-fold + .qa-fold { margin-top: 0; }
.qa-sec > .qa-fold-sum { padding: 9px 12px; }
.qa-sec-pts { flex: none; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.qa-sec.has-lost .qa-sec-pts { color: var(--critical-text); }
.qa-sec > .qa-fold-body { display: grid; gap: 6px; padding: 8px; }
.qa-item { cursor: default; }
.qa-item-line { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.qa-item-line .grade-pts { white-space: nowrap; }
.qa-badge { flex: none; min-width: 52px; text-align: center; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); }
.qa-badge.is-met { color: var(--good-text); background: color-mix(in srgb, var(--good) 13%, transparent); }
.qa-badge.is-partial { color: var(--text-primary); background: color-mix(in srgb, var(--warning) 24%, transparent); }
.qa-badge.is-missed { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 12%, transparent); }
.qa-item .qa-reason, .qa-item .qa-quote { margin-left: 62px; }
.qa-words .qa-word { margin-top: 10px; font-size: 13px; }
.qa-tx > .qa-fold-body { max-height: 46vh; overflow: auto; padding: 8px 10px; }
.qa-transcript { display: grid; gap: 2px; }
.qa-line { display: grid; grid-template-columns: 44px 58px minmax(0, 1fr); gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13.5px; line-height: 1.5; }
.qa-line.is-agent { background: color-mix(in srgb, var(--series-1) 7%, transparent); }
.qa-line-time { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.qa-line-who { font-weight: 650; font-size: 12.5px; color: var(--text-secondary); padding-top: 1px; }
.qa-line.is-agent .qa-line-who { color: var(--series-1); }
.qa-line-plain { margin: 0; padding: 4px 6px; font-size: 13.5px; white-space: pre-wrap; }

@media (max-width: 640px) {
  .qa-tiles { grid-template-columns: 1fr; }
  .qa-call { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .qa-call-what { grid-column: 1; grid-row: 2; }
  .qa-score { grid-column: 2; grid-row: 1 / span 2; }
  .qa-call-open { display: none; }
  .qa-memo-cta { display: none; }
  .qa-memo .qa-chev { display: block; }
  .qa-modal-backdrop { padding: 0; place-items: end stretch; }
  .qa-modal { max-height: 92vh; border-radius: 14px 14px 0 0; }
  .qa-item .qa-reason, .qa-item .qa-quote { margin-left: 0; }
  .qa-item-line { flex-wrap: wrap; }
  .qa-line { grid-template-columns: 52px minmax(0, 1fr); }
  .qa-line-time { display: none; }
}

/* ---- calendar notes (10/22/2026): text for a day or a week, from managers and team leads */
.cal-note {
  appearance: none; font: inherit; text-align: left; color: var(--text-primary);
  display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0;
  padding: 4px 7px; border: 0; border-radius: 5px;
  background: color-mix(in srgb, var(--note) 13%, var(--surface-1));
  box-shadow: inset 3px 0 0 var(--note);
  font-size: 11.5px; line-height: 1.3; font-weight: 600;
}
.cal-note-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-note.is-clickable { cursor: pointer; }
.cal-note.is-clickable:hover { background: color-mix(in srgb, var(--note) 22%, var(--surface-1)); }
.cal-note.is-clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cal-note.has-dept::after { content: ''; }
.cal-note.is-week { width: auto; flex-direction: row; flex-wrap: wrap; gap: 2px 10px; padding: 3px 10px; font-size: 12px; border-radius: 999px; box-shadow: none;
  background: color-mix(in srgb, var(--note) 15%, var(--surface-1)); color: color-mix(in srgb, var(--note) 70%, var(--text-primary)); }
.cal-note.is-week .cal-note-line::before { content: '\25CF'; margin-right: 5px; font-size: 8px; vertical-align: 2px; color: var(--note); }
.cal-week-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-mweek { grid-column: 1 / -1; padding: 6px 8px; background: var(--surface-2); }
.out-week-head .cal-week-notes { margin-left: 4px; }
.cal-addnote {
  appearance: none; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-muted);
  width: 20px; height: 20px; border-radius: 6px; line-height: 1; font-size: 14px; cursor: pointer; padding: 0;
  opacity: 0; transition: opacity .12s;
}
.cal-mday:hover .cal-addnote, .cal-notes-cell:hover .cal-addnote, .cal-addnote:focus-visible { opacity: 1; }
.cal-addnote:hover { color: var(--brand); border-color: var(--brand); }
@media (hover: none) { .cal-addnote { opacity: .7; } }
.cal-mday-head .cal-addnote { margin-left: 6px; }
.cal-mday-head .cal-count { margin-left: auto; }
.cal-notes-row th, .cal-notes-cell { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface-1)); vertical-align: top; }
.cal-notes-cell { padding: 6px !important; }
.cal-notes-cell { display: table-cell; }
.cal-notes-cell > * + * { margin-top: 4px; }
.cal-notes-label { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.cal-banner-row td { padding: 6px 8px !important; background: var(--surface-2); }
.cal-note-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cal-note-modal { width: min(560px, 100%); }
.cal-note-form { max-width: none; gap: 12px; }
.cal-note-form .field { position: relative; }
.cal-note-form .field-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.cal-note-form textarea, .cal-note-form input[type="date"], .cal-note-form select {
  padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 8px; }
.cal-note-form textarea { resize: vertical; min-height: 84px; line-height: 1.4; }
.cal-note-count { align-self: flex-end; font-size: 11.5px; color: var(--text-muted); }
.cal-note-seg { margin: 0; align-self: flex-start; }
.cal-note-colors { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.cal-note-colors button { appearance: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface-1);
  background: var(--note); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; padding: 0; }
.cal-note-colors button.is-on { box-shadow: 0 0 0 2px var(--text-primary); }
.cal-note-help { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.cal-note-err { margin: 0; font-size: 13px; color: var(--critical-text); }
.cal-note-form .modal-actions { align-items: center; }
.cal-note-form .modal-actions .spacer { flex: 1; }
.pill-quiet.is-lead { color: var(--brand, #2a78d6); border-color: color-mix(in srgb, var(--brand, #2a78d6) 40%, transparent); }
.cal-note-form [hidden], .qa-view [hidden] { display: none !important; }
.cal-foot + .hint-line, .cal-month + .hint-line, .cal-scroll + .hint-line, .out-list + .hint-line { margin-top: 10px; }

/* ---- dead air on the QA page (10/22/2026) */
.rec-pill.is-deadair { color: var(--text-primary); background: color-mix(in srgb, var(--warning) 22%, transparent); border-color: transparent; }
.deadair-row { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; }
.deadair-row + .deadair-row { border-top: 1px solid var(--border); }
.deadair-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.deadair-who small { width: 100%; }
.deadair-calls { display: flex; flex-wrap: wrap; gap: 6px; }
.deadair-call { appearance: none; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-secondary); }
.deadair-call strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.deadair-call:hover { border-color: var(--brand); color: var(--text-primary); }
.deadair-row.is-over .deadair-who strong { color: var(--critical-text); }
@media (max-width: 640px) { .deadair-row { grid-template-columns: 1fr; } }
.deadair-alert { margin-bottom: 12px; }
.cal-note-depts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.cal-note-dept { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--border-strong);
  border-radius: 8px; font-size: 13.5px; cursor: pointer; background: var(--surface-1); user-select: none; }
.cal-note-dept:has(input:checked) { border-color: var(--brand, #2a78d6); background: color-mix(in srgb, var(--brand, #2a78d6) 8%, var(--surface-1)); }
.cal-note-dept input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand, #2a78d6); }
.cal-note-form .field label.cal-note-dept { text-transform: none; letter-spacing: normal; font-size: 13.5px; color: var(--text-primary); }

/* ---- Agent side, compact (10/22/2026): controls in the title row, quieter notes, 3 across */
.page-head.has-tools { align-items: center; justify-content: space-between; row-gap: 10px; }
.page-head-text { min-width: 0; flex: 1 1 260px; }
.page-head-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; margin-left: auto; }
.page-head-tools > .filters { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; align-items: center; gap: 8px 10px; }
.page-head-tools .field { flex-direction: row; align-items: center; gap: 6px; }
.page-head-tools .field label { white-space: nowrap; }
.page-head-tools .cv-filters select, .page-head-tools .qa-filters select { max-width: 230px; }
.page-head-tools .seg { margin: 0; }
.page-head-tools .res-tools { margin: 0; }
@media (max-width: 760px) {
  .page-head.has-tools { align-items: stretch; }
  .page-head-tools { margin-left: 0; justify-content: flex-start; width: 100%; }
  .page-head-tools .field { flex: 1 1 140px; }
  .page-head-tools .field select { flex: 1; max-width: none; }
}

/* the notes under the totals: plain, as before */
.cv-note, .cv-note.is-warn { background: none; padding: 0; border-radius: 0; color: var(--text-secondary); font-size: 12.5px; }
.cv-note.is-warn::before { content: none; }
.cv-notes { gap: 4px 18px; }

/* three across: where the calls went, how they ended, the day */
.cv-row3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; margin-bottom: 16px; }
.cv-row3.has-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-row3.has-1 { grid-template-columns: 1fr; }
.cv-row3 > .cv-card { margin: 0; display: flex; flex-direction: column; }
.cv-row3 > .cv-card > .admin-card-body { flex: 1; }
.cv-row3 .cv-donut-wrap { flex-direction: column; align-items: stretch; gap: 14px; }
.cv-row3 .cv-donut-box { align-self: center; }
.cv-row3 .cv-donut { width: 140px; height: 140px; }
.cv-row3 .cv-hours { height: 190px; gap: 3px; }
.cv-row3 .cv-hour { min-width: 0; }
.cv-row3 .cv-hour-n, .cv-row3 .cv-hour-label { font-size: 10px; }
.cv-hour-foot { margin-top: 10px; }
.cv-row3 .bucket-row { grid-template-columns: minmax(0, 1.2fr) minmax(40px, 1fr) auto; }
@media (max-width: 1100px) { .cv-row3, .cv-row3.has-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cv-row3, .cv-row3.has-2 { grid-template-columns: 1fr; } }
.cv-fold { margin-bottom: 12px; }
.cv-fold > summary h2 { font-size: 14px; margin: 0; }

/* comments: the form and your messages side by side */
.fb-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.fb-layout > .fb-card { max-width: none; margin: 0; }
.fb-side .fb-list-head { margin-top: 0; }
.fb-none { text-align: left; padding: 14px 0; }
@media (max-width: 980px) { .fb-layout { grid-template-columns: 1fr; } }

/* calendar: the dates and the key in one line */
.cal-toolbar-compact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.cal-toolbar-compact .cal-legend { margin: 0; }
.page-head-tools .cv-filters .field > label, .page-head-tools .qa-filters .field > label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head-tools .cv-filters select { max-width: 200px; }
.page-head-tools .cv-filters .cv-week { max-width: 250px; }
.cv-row3 .cv-legend { flex: none; }
@media (max-width: 760px) {
  .page-head-tools > .filters { width: 100%; }
  .page-head-tools .cv-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .page-head-tools .cv-filters .field:first-child { grid-column: 1 / -1; }
  .page-head-tools .cv-filters select, .page-head-tools .cv-filters .cv-week, .page-head-tools .qa-filters select { width: 100%; max-width: none; }
  .page-head-tools .qa-filters .field { width: 100%; }
  .cal-count { white-space: nowrap; }
  .cal-mday .cal-note-line { white-space: normal; overflow-wrap: anywhere; font-size: 10.5px; }
  .cal-mday-head .cal-addnote { display: none; }
}

/* ---- Add a Call by Hand: each call on its way (10/22/2026) */
.manual-live:empty { display: none; }
.manual-list { display: grid; gap: 14px; }
.manual-row { display: grid; gap: 6px; }
.manual-row + .manual-row { padding-top: 14px; border-top: 1px solid var(--border); }
.manual-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.manual-name { flex: 1 1 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.manual-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.manual-row.is-done .manual-label { color: var(--good-text); }
.manual-row.is-bad .manual-label { color: var(--critical-text); }
.manual-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; position: relative; }
.manual-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--series-1); transition: width .8s var(--ease-out, ease); }
.manual-row.is-done .manual-bar > span { background: var(--good); }
.manual-row.is-bad .manual-bar > span { background: var(--critical); }
.manual-row.is-busy .manual-bar > span, .manual-row.is-wait .manual-bar > span {
  background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 200% 100%; animation: manual-shine 1.6s linear infinite; background-color: var(--series-1); }
@keyframes manual-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .manual-row .manual-bar > span { animation: none; transition: none; } }
.manual-steps { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.manual-steps > span.is-on { color: var(--text-primary); font-weight: 600; }
.manual-steps > span.is-on::before { content: '✓ '; color: var(--good-text); }
.manual-sub { margin-left: auto; color: var(--text-secondary); }
.cal-note-for { font-size: 10.5px; font-weight: 500; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-note.is-week .cal-note-for { margin: 0 0 0 4px; }
.cal-note-dept.is-every { border-style: dashed; }
.rec-pill.is-lang { margin-left: 6px; color: var(--text-primary); background: color-mix(in srgb, var(--series-1) 14%, transparent); border-color: transparent; }
.manual-panel { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.manual-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.manual-pulse { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.manual-pulse.is-on::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--series-1); animation: manual-blink 1.2s ease-in-out infinite; }
@keyframes manual-blink { 50% { opacity: .25; } }
.manual-panel .manual-row { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.manual-panel .manual-row + .manual-row { border-top: 1px solid var(--border); padding-top: 10px; }
.manual-panel .manual-list { gap: 8px; }
.rec-actions { display: flex; gap: 6px; justify-content: flex-end; }
.rec-redo { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 6px 0 12px; }
.rec-redo-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-secondary); padding-bottom: 8px; }
.rec-redo-stats strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rec-redo-actions { gap: 10px; }

/* ---- My scorecard cards (10/23/2026): one even border; the bar and "Meeting / Below goal" carry the status */
.me-card, .me-card.is-good, .me-card.is-nogoal { border: 1px solid var(--border); border-left-width: 1px; border-left-color: var(--border); }

/* ---- Dialers (10/23/2026): the notes calendar */
.dialers-cal .cal-mday { min-height: 118px; }
.dialers-cal .cal-note { font-size: 12.5px; padding: 5px 8px; }
.dialers-cal .cal-note-line { white-space: normal; overflow-wrap: anywhere; }
.dialers-cal .cal-mweek { padding: 8px 10px; }
.dialers-cal.is-week .cal-notes-row td, .dialers-cal.is-week .cal-notes-row th { height: 200px; }
.dialers-cal.is-week .cal-notes-label { display: none; }
.note-list { display: grid; gap: 12px; }
.note-week { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); overflow: hidden; }
.note-week.is-past { opacity: .65; }
.note-week-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.note-week.is-empty .note-week-head { border-bottom: 0; }
.note-week-none { font-size: 12.5px; }
.note-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); }
.note-day { background: var(--surface-1); padding: 8px 10px 10px; display: grid; gap: 5px; align-content: start; min-height: 64px; }
.note-day.is-today { box-shadow: inset 0 3px 0 var(--brand, #2a78d6); }
.note-day-head { display: flex; align-items: baseline; gap: 6px; }
.note-dow { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.note-dom { font-size: 15px; font-weight: 650; }
.note-day-head .cal-addnote { margin-left: auto; }
.note-day:hover .cal-addnote { opacity: 1; }

/* the record of note changes */
.note-hist td { vertical-align: top; }
.note-hist-text { max-width: 280px; font-weight: 600; }
.note-hist-what { font-size: 12.5px; color: var(--text-secondary); }
.note-act { font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.note-act.is-added { color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent); }
.note-act.is-removed { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 10%, transparent); }

/* Note history: undo (10/23/2026) */
.note-undo-chip { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 600; background: var(--surface-2); color: var(--text-secondary); }
.note-hist td:last-child { text-align: right; }

/* ===== Agent side, less noisy (10/23/2026) ===== */

/* sub-tabs under a page title: Calendar (Schedule / Dialers), Prizes (All / each contest) */
.sub-tabs { display: flex; gap: 4px; margin: -4px 0 14px; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: thin; }
.sub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 8px; margin-bottom: -1px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; }
.sub-tab-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sub-tab:hover { color: var(--text-primary); }
.sub-tab.is-on { color: var(--brand, #2a78d6); border-bottom-color: var(--brand, #2a78d6); }

/* Dialers: a column a day */
.dial-week-banner { margin-bottom: 8px; }
.dial-week-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius, 12px); overflow: hidden; background: var(--surface-1); }
.dial-day { display: flex; flex-direction: column; min-width: 0; }
.dial-day + .dial-day { border-left: 1px solid var(--border); }
.dial-day-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); }
.dial-dow { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.dial-dom { font-size: 13px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.dial-day.is-today .dial-dom { background: var(--brand, #2a78d6); color: #fff; }
.dial-day.is-today .dial-dow { color: var(--brand, #2a78d6); }
.dial-day-head .cal-addnote { margin-left: auto; }
.dial-day:hover .cal-addnote { opacity: 1; }
.dial-day-body { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 120px; }
.dial-day.is-past .dial-day-body { opacity: .7; }
.dial-day .cal-note { font-size: 12.5px; padding: 6px 9px; gap: 2px; }
.dial-day .cal-note-line { white-space: normal; }
.dial-none { font-size: 12px; color: var(--text-muted); padding: 2px 2px; }
@media (max-width: 720px) {
  .dial-week-grid { grid-template-columns: 1fr; }
  .dial-day + .dial-day { border-left: 0; border-top: 1px solid var(--border); }
  .dial-day-body { min-height: 0; }
}

/* Comments: one column -- the form, then your messages */
.fb-layout.is-stacked { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.fb-layout.is-stacked > .fb-card { max-width: none; margin: 0; padding: 14px 16px; gap: 8px; }
.fb-kind { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb-kind .fb-label { margin: 0; }
.fb-cat { padding: 5px 12px; font-size: 13px; }
.fb-body { min-height: 88px; }
.fb-picks { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; margin-top: 2px; }
.fb-pick { min-width: 0; }
.fb-pick .fb-label { margin: 0 0 5px; }
.fb-pick-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-pick-opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-primary); }
.fb-pick-opt input { margin: 0; }
.fb-pick-opt.is-on { border-color: var(--brand, #2a78d6); background: color-mix(in srgb, var(--brand, #2a78d6) 8%, var(--surface-1)); }
.fb-pick-opt.is-disabled { opacity: .55; cursor: not-allowed; }
.fb-pick-note { margin: 5px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.fb-layout.is-stacked .fb-actions { margin-top: 2px; }
.fb-layout.is-stacked .fb-list-head { font-size: 15px; margin: 0 0 8px; }
.fb-layout.is-stacked .fb-list { gap: 8px; max-width: none; }
.fb-layout.is-stacked .fb-none { margin: 0; padding: 0 2px; font-size: 13px; color: var(--text-muted); }
@media (max-width: 640px) { .fb-picks { grid-template-columns: 1fr; } }

/* My QA: a strip for the week, inbound and outbound side by side */
.qa-view { gap: 12px; }
.qa-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.qa-strip-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qa-strip-text strong { font-size: 14px; }
.qa-strip-text span { font-size: 12.5px; color: var(--text-muted); }
.qa-strip .qa-memo-none { font-size: 12.5px; color: var(--text-muted); }
.qa-dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.qa-dir { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); overflow: hidden; }
.qa-dir > .qa-tile { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); padding: 10px 14px; gap: 5px; }
.qa-dir .qa-tile-pct { font-size: 24px; }
.qa-dir .qa-tile-pts { font-size: 12.5px; }
.qa-dir .qa-meter { height: 5px; }
.qa-dir .qa-tile-words { padding-top: 4px; font-size: 12px; }
.qa-dir .qa-calls { padding: 2px 4px 4px; }
.qa-dir .qa-call { grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto 12px; gap: 10px; padding: 7px 8px; }
.qa-dir .qa-call-when strong, .qa-dir .qa-call-what span { font-size: 13px; }
.qa-dir .qa-call small { font-size: 11.5px; }
.qa-dir .qa-score strong { font-size: 13.5px; padding: 1px 8px; }
.qa-dir .qa-call-open { font-size: 16px; color: var(--text-muted); }
.qa-dir .qa-call-open::after { content: none; }
.qa-dir-none { margin: 0; padding: 12px 14px; font-size: 12.5px; color: var(--text-muted); }
.qa-foot { margin: 0; font-size: 12px; }
@media (max-width: 900px) { .qa-dirs { grid-template-columns: 1fr; } }

/* Prizes: the compact list under All */
.pz-head-stats { display: flex; gap: 6px; }
.pz-head-stats .pz-stat { background: var(--surface-2); color: var(--text-secondary); padding: 4px 10px; font-size: 12.5px; backdrop-filter: none; }
.pz-head-stats .pz-stat b { font-size: 14px; color: var(--text-primary); }
.pz-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
.pz-tab-dot.status-running { background: var(--good); }
.pz-tab-dot.status-drawing { background: #e8457c; animation: pz-live 1.6s ease-in-out infinite; }
.pz-tab-dot.status-upcoming { background: var(--series-1, #2a78d6); }
.pz-table { display: flex; flex-direction: column; gap: 6px; max-width: 1100px; }
.pz-table-head { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.pz-rows { border: 1px solid var(--border); border-radius: var(--radius, 12px); background: var(--surface-1); overflow: hidden; }
.pz-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(120px, auto) minmax(110px, auto) 12px; align-items: center;
  gap: 12px; padding: 9px 14px; color: inherit; text-decoration: none; }
.pz-row + .pz-row { border-top: 1px solid var(--border); }
.pz-row:hover { background: var(--surface-2); }
.pz-row .pz-kind { justify-self: start; font-size: 10.5px; padding: 2px 8px; background: var(--pop-2); }
.pz-row .pz-kind.is-raffle { color: #fff; }
.pz-row .pz-kind.is-contest { background: var(--pop-4); color: #2b1d00; }
.pz-row-main { display: grid; gap: 2px; min-width: 0; }
.pz-row-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-row-main small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-row-stand { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: right; white-space: nowrap; }
.pz-row-stand.is-in { color: var(--good-text); }
.pz-row-stand.is-won { color: #b7791f; }
.pz-row .pz-status { justify-self: end; white-space: nowrap; }
.pz-row-go { font-size: 16px; color: var(--text-muted); }
.pz-row.status-finished, .pz-row.status-ended { opacity: .8; }
@media (max-width: 720px) {
  .pz-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .pz-row .pz-kind, .pz-row-go { display: none; }
  .pz-row-stand { grid-column: 1; text-align: left; }
  .pz-row .pz-status { grid-column: 2; grid-row: 1 / span 2; }
}

.dialers-cal + .hint-line { margin-top: 8px; }

/* Coaching memo: section headings stand out (10/23/2026) */
.qa-memo-text h4.qa-memo-head { margin: 22px 0 0; padding: 0 0 5px; font-size: 13.5px; font-weight: 750;
  letter-spacing: .04em; color: var(--brand, #2a78d6);
  border-bottom: 2px solid color-mix(in srgb, var(--brand, #2a78d6) 30%, transparent); }
.qa-memo-text h4.qa-memo-head:first-child { margin-top: 4px; }
.qa-memo-text h4.qa-memo-head + p { margin-top: 8px; }

/* QA: leaving an agent out of a week (10/27/2026) */
.rec-flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0 8px; }
.rec-pill.is-flag { color: #6b4a00; background: color-mix(in srgb, var(--warning) 22%, var(--surface-1)); font-weight: 600; }
.rec-pill.is-out { color: var(--text-secondary); background: var(--surface-2); border: 1px dashed var(--border-strong); }
.rec-left-out td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.rec-left-out .rec-name { color: var(--text-muted); }
.rec-out-cell { font-size: 13px; color: var(--text-secondary); }
.rec-out-col { text-align: right; white-space: nowrap; width: 1%; }
.btn-warn-soft { color: #6b4a00; background: color-mix(in srgb, var(--warning) 20%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); }
.btn-warn-soft:hover { background: color-mix(in srgb, var(--warning) 30%, var(--surface-1)); }
:root[data-theme="dark"] .rec-pill.is-flag, :root[data-theme="dark"] .btn-warn-soft { color: #f3d27a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rec-pill.is-flag, :root:not([data-theme="light"]) .btn-warn-soft { color: #f3d27a; } }
.rec-memo-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rec-memo-cell .rec-leave-out { margin-left: auto; }

/* QA: run one agent now, and left out for good (10/27/2026) */
.run-now-opts { display: grid; gap: 8px; }
.run-now-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.run-now-opt:has(input:checked) { border-color: var(--brand, #2a78d6); background: color-mix(in srgb, var(--brand, #2a78d6) 6%, var(--surface-1)); }
.run-now-opt input { margin-top: 3px; }
.run-now-opt > span { display: grid; gap: 2px; }
.run-now-opt strong { font-size: 13.5px; color: var(--text-primary); }
.run-now-opt small { font-size: 12.5px; line-height: 1.4; }
.for-good-add { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 6px 0 12px; }
.for-good-add .admin-field { margin: 0; }
.for-good-list { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.for-good-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; }
.for-good-row + .for-good-row { border-top: 1px solid var(--border); }
.for-good-row .btn { margin-left: auto; }
@media (max-width: 720px) { .for-good-add { grid-template-columns: 1fr; } }

/* Do a week again: one agent only (10/27/2026) */
.rec-redo-one { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.rec-redo-one-head { margin: 0 0 2px; font-size: 14px; }

/* KPI setup: Delete (10/28/2026) */
.btn-danger-quiet { color: var(--critical-text); }
.btn-danger-quiet:hover { background: color-mix(in srgb, var(--critical) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--critical) 40%, var(--border)); }

/* Scorecard headline cards: any number of Spotlight KPIs, shrinking to fit (10/28/2026) */
.me-cards.is-many { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.me-cards.is-many .me-card { padding: 11px 12px; }
.me-cards.is-many .me-value { font-size: 22px; }
.me-cards.is-many .me-goal { font-size: 11.5px; }
.me-cards.is-lots { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.me-cards.is-lots .me-card { padding: 9px 10px; }
.me-cards.is-lots .me-value { font-size: 19px; }
.me-cards.is-lots .me-label { font-size: 10px; letter-spacing: .04em; }
.me-cards.is-lots .me-foot { margin-top: 6px; padding-top: 6px; gap: 6px; }

/* KPI setup table: every column fits, the title readable (10/28/2026) */
.kpi-setup { font-size: 13px; }
.kpi-setup th, .kpi-setup td { padding-left: 8px; padding-right: 8px; }
.kpi-setup td:first-child input { min-width: 150px; }
.kpi-setup select { min-width: 0; width: auto; max-width: 150px; padding-right: 26px; }
.kpi-setup code.key { font-size: 11.5px; }
.kpi-setup .row-actions { white-space: nowrap; }
.kpi-setup .row-actions .btn + .btn { margin-left: 4px; }
.kpi-setup .kpi-title-cell code.key { display: inline-block; margin-top: 4px; }

/* A featured KPI with no numbers for the period keeps its tab, quieter. */
.kpi-tab.is-empty:not(.is-active) { opacity: .6; }
.kpi-empty p { margin: .35rem 0; }
.kpi-empty .muted { color: var(--text-muted); }

/* Week total KPIs (10/29/2026): the Day view shows the week so far. */
.me-card .me-sofar { font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); margin-top: -.15rem; }
.me-sofar-line { font-size: .85em; }

/* ---- Phone Extension List (10/29/2026) ---------------------------------- */
/* Agent side: a panel on the right of Resources, under the search. */
.res-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.res-layout .res-main > .res-group:first-child { margin-top: 4px; }
.ext-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface-1); overflow: hidden; }
.ext-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.ext-ico { color: var(--brand-500, #2a78d6); flex: none; }
.ext-title { font-size: 15px; margin: 0; flex: 1; }
.ext-total { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface-2, rgba(127,127,127,.12));
  border-radius: 999px; padding: 2px 8px; }
.ext-search { margin: 0 14px 8px; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface-0, transparent); color: inherit; font: inherit; font-size: 13.5px; }
.ext-groups { overflow-y: auto; padding: 0 6px 10px; }
.ext-group { padding: 6px 8px 4px; }
.ext-group + .ext-group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }
.ext-group-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.ext-mine { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-500, #2a78d6); color: #fff; }
.ext-group.is-mine { background: color-mix(in srgb, var(--brand-500, #2a78d6) 8%, transparent); border-radius: 8px; }
.ext-group.is-mine + .ext-group { border-top-color: transparent; }
.ext-list { list-style: none; margin: 0; padding: 0; }
.ext-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 4px;
  border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.ext-row:last-child { border-bottom: 0; }
.ext-who { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.ext-name { font-weight: 600; }
.ext-role { font-size: 12px; color: var(--text-muted); }
.ext-num { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ext-empty { font-size: 13px; color: var(--text-muted); padding: 6px 8px; margin: 0; }
@media (max-width: 1000px) {
  .res-layout { grid-template-columns: 1fr; }
  .ext-panel { position: static; max-height: none; }
}

/* Manager side: the editor on the console's Resources page. */
.ext-admin-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.ext-admin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.ext-admin-head .ext-group-name { font: inherit; font-weight: 700; font-size: 15px; min-width: 220px; padding: 7px 10px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-1); color: inherit;
  text-transform: none; letter-spacing: 0; }
.ext-admin-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.ext-count { font-size: 12.5px; }
.ext-admin-table input, .ext-admin-table select { min-width: 0; }
.ext-admin-table input.ext-num { width: 90px; font-weight: 700; }
.ext-add-row td { background: var(--surface-2, rgba(127,127,127,.06)); }
.ext-paste-preview { max-height: 280px; overflow: auto; }
.ext-problem { color: var(--bad, #c0392b); font-size: 13px; margin: 4px 0; }