/* =========================================================================
   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 */
  --brand-900: #131e35;
  --brand-800: #1b2a4a;
  --brand-700: #24385f;
  --brand-600: #2f4878;
  --brand-ink-on: #ffffff;

  /* Surfaces */
  --page:        #f4f5f7;
  --surface-1:   #ffffff;
  --surface-2:   #f7f8fa;
  --surface-3:   #eceef2;

  /* Ink */
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --text-on-brand:  #dfe5f0;

  /* Chrome */
  --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);

  /* Categorical series (validated, light surface) */
  --series-1: #2a78d6;  /* the agent   */
  --series-2: #eb6834;  /* reserved    */
  --series-3: #1baf7a;  /* team average*/
  /* Slots 4-6, for the six-part time stack on the One agent review.
     Validated as a six-slot categorical set on the adjacent pairlist that
     a stacked bar uses: worst CVD dE 9.1 light / 8.4 dark, worst
     normal-vision dE 19.6 light / 19.3 dark. Three light slots sit under
     3:1 on the light surface, so the stack always ships its legend and
     the same figures as a table. */
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  /* Ordinal ramp: one hue, light to dark, for ordered categories --
     the call funnel's rungs. Not the categorical set: a funnel's stages
     are steps of one thing, and six unrelated hues would say they were
     six unrelated things. Validated as an ordinal ramp (monotone
     lightness, adjacent dL >= 0.06, light end 2.04:1 on this surface,
     hue spread 5 degrees). */
  --ordinal-1: #8bb7e6;
  --ordinal-2: #6aa0dd;
  --ordinal-3: #4a88d3;
  --ordinal-4: #2f70c2;
  --ordinal-5: #20589b;
  --ordinal-6: #153f6d;

  /* Status (fixed, never themed) */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --good-text: #006300;
  --critical-text: #a92c2c;

  /* Meter track — lighter step of the fill's own ramp */
  --track: #cde2fb;

  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-w: 224px;
  --topbar-h: 56px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@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;
    /* The dark ramp is selected, not flipped: it runs bright to dim so
       it still reads top to bottom, and the dimmest step clears the dark
       surface. Validated separately at --mode dark. */
    --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;
  /* The dark ramp is selected, not flipped: it runs bright to dim so
     it still reads top to bottom, and the dimmest step clears the dark
     surface. Validated separately at --mode dark. */
  --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(--brand-900);
  color: var(--brand-ink-on);
}

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

.brand-mark { display: block; width: 28px; height: 28px; color: var(--series-1); }
.brand-mark svg { display: block; width: 100%; height: 100%; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.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); }

.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; }
/* 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; }
.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; }
.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; }

/* ----------------------------------------------------------------- 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: 14px; padding: 2px 4px 0; font-size: 11.5px; color: var(--text-secondary); }
.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: 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: 52px; height: 52px; color: #fff; }
.portal-mark svg { display: block; width: 100%; height: 100%; }
.portal-mark svg rect { fill: rgba(255, 255, 255, .16); }
.portal-mark svg path { fill: #fff; }

.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);
  /* --brand-800 is the dark header colour, which vanished against the
     dark surface. The icon follows the text ink instead, so it reads in
     both modes. */
  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); }

/* ------------------------------------------------------- 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; }
.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);
}

/* ------------------------------------------------------------ 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;
}
.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; }

/* ---------------------------------------------------------- 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; }
.brand-text { max-width: 220px; }
.freshness { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------------------------- 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; }
.content { overflow-x: auto; }

/* =========================================================================
   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; }
.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)); }
}
.task-body h2 { text-wrap: balance; }

/* =========================================================================
   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 120ms 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)); }
.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);
}
.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: 6px; }
.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;                       /* the surface gap between segments */
  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: 42px; height: 42px; color: var(--brand-800); }
.gate-mark svg { display: block; width: 100%; height: 100%; }
.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: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  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) {
  .gate-clock { grid-template-columns: 1fr; gap: 8px; }
  .clock-count { text-align: left; }
}

/* The agent's two tabs, and their own scorecard. */
.view-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.view-tab {
  padding: 9px 16px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.view-tab:hover { color: var(--text-primary); }
.view-tab.is-active { color: var(--text-primary); border-bottom-color: var(--series-1); }

.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; }
.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;
}
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 4px;
  font-size: 12.5px; color: var(--text-secondary);
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.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; }
.bucket-fill { background: var(--ordinal-4); }
.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; }
}

/* --------------------------------------------------- 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; }
.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: 10px 0 0; white-space: pre-wrap; }
.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; }
.topbar #backToAdmin { border-color: rgba(255,255,255,.35); white-space: nowrap; }
@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;
}