/* =========================================================================
   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: 32px; height: 32px; flex: none; padding: 2px; border-radius: 9px;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.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-x: auto; overflow-y: hidden; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 12px; text-align: left; }
thead th {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr + tr td { border-top: 1px solid var(--border); }
tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.is-me td { background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1)); }
tr.is-me:hover td { background: color-mix(in srgb, var(--series-1) 14%, var(--surface-1)); }
tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--series-1); }

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

.who { display: flex; align-items: center; gap: 9px; }
.who .avatar { width: 28px; height: 28px; font-size: 11px; background: var(--surface-3); color: var(--text-secondary); }
tr.is-me .who .avatar { background: var(--series-1); color: #fff; }
.who .name { font-weight: 500; }
tr.is-me .who .name { font-weight: 700; }

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

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

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

.modal {
  width: min(880px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--brand-800);
  color: #fff;
}
.modal-head h2 { font-size: 15px; }
.modal-close { margin-left: auto; }
.modal-body { padding: 14px 16px 18px; overflow: auto; }
.modal-body .table-wrap { border: 0; }
.modal-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--text-secondary); }

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

.muted { color: var(--text-muted); }
.empty { padding: 26px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.warnbox {
  padding: 10px 14px;
  margin-bottom: 14px;
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

@media (max-width: 860px) {
  .sidebar { position: fixed; top: var(--topbar-h); bottom: 0; z-index: 30; box-shadow: var(--shadow); }
  body.nav-collapsed .sidebar { display: none; }
  .content { padding: 14px; }
  .brand-text strong { display: none; }
}

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

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

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

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

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

/* A real brand header, not a tint.

   The top third of the page is the gradient and the wordmark sits on it in
   white; everything below is an opaque surface on the page colour. Keeping
   the two apart means the cards never fight the gradient for contrast. */
.portal-bg {
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 130% at 12% 0%,
      color-mix(in srgb, var(--series-1) 78%, transparent), transparent 66%),
    radial-gradient(58% 120% at 88% 6%,
      color-mix(in srgb, var(--series-2) 52%, transparent), transparent 62%),
    linear-gradient(168deg,
      var(--brand-900) 0%,
      var(--brand-800) 46%,
      color-mix(in srgb, var(--brand-800) 82%, var(--series-1)) 100%);
}
/* The band has to reach the page colour without leaving a seam, so the
   fade is half its height and eases rather than running straight. */
.portal-bg::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 210px;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--page) 45%, transparent) 55%,
    color-mix(in srgb, var(--page) 85%, transparent) 82%,
    var(--page) 100%);
}

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

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

.portal-head { margin-bottom: 30px; }
.portal-org {
  margin: 16px 0 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.portal-title {
  margin: 4px 0 0;
  font-size: 44px;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .22);
}

/* The floor, day by day.

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

.live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.live-head h2 { margin: 0; font-size: 15px; }
.live-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); }

.live-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.live-key { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.live-key i, .live-tip-row i {
  width: 9px; height: 9px; border-radius: 3px; flex: none; display: inline-block;
}

.live-plot { position: relative; }
.live-svg { display: block; width: 100%; height: auto; overflow: visible; }
.live-grid { stroke: var(--gridline); stroke-width: 1; }
.live-goal { stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 4 3; }
.live-goal-tag, .live-tick { font-size: 10.5px; fill: var(--text-muted); }
.live-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.live-dot { stroke: var(--surface-1); stroke-width: 2; }
.live-end { stroke: var(--surface-1); stroke-width: 2; }
.live-end-label {
  font-size: 11.5px; font-weight: 700; fill: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.live-rule { stroke: var(--border-strong); stroke-width: 1; }
.live-hit { cursor: crosshair; }

.live-tip {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  min-width: 168px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  box-shadow: var(--shadow);
  font-size: 12px;
  pointer-events: none;
  z-index: 2;
}
.live-tip[hidden] { display: none; }
.live-tip strong { display: block; margin-bottom: 5px; font-size: 12px; }
.live-tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.7; }
.live-tip-row span { color: var(--text-secondary); }
.live-tip-row b { margin-left: auto; font-variant-numeric: tabular-nums; }

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

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

.door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 22px 20px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.door:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--series-1) 45%, var(--border));
  box-shadow: 0 2px 4px rgba(11,11,11,.06), 0 14px 32px rgba(11,11,11,.10);
}
.door h2 { font-size: 18px; }
.door p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }

.door-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--surface-3);
  /* --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: 56px; height: 56px; padding: 3px; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.gate-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gate-org {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.gate-title { margin: 3px 0 0; font-size: 26px; letter-spacing: -0.02em; }
.gate-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* The shift clock. */
.gate-clock {
  display: grid;
  grid-template-columns: 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;
}

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

/* ======================================================= department calendar */
.form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-row > * { flex: 1 1 140px; }
.form-row > .btn { flex: 0 0 auto; }
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin: 4px 0 10px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { font-size: 17px; margin: 0 0 0 8px; }
.cal-picks { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-picks select, .cal-picks input { min-width: 0; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cal-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  color: var(--chip); background: color-mix(in srgb, var(--chip) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent); }
.cal-chip.is-off { color: #fff; background: var(--chip); border-color: var(--chip); }
.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.cal-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.cal-week { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 760px; }
.cal-week th, .cal-week td { border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.cal-week thead th { background: var(--surface-2); font-weight: 600; text-align: center; }
.cal-week thead th.is-today { color: var(--critical-text); }
.cal-week .is-weekend { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-dow { display: block; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.cal-dom { font-size: 15px; font-variant-numeric: tabular-nums; }
.cal-name-col { width: 170px; border-left: 0 !important; background: var(--surface-1); position: sticky; left: 0; z-index: 1; }
.cal-person { display: block; font-weight: 600; color: var(--text-primary); }
.cal-hours { display: block; font-size: 11.5px; color: var(--text-secondary); font-weight: 400; }
.cal-group td { background: var(--surface-2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.cal-cell { min-width: 84px; height: 40px; }
.cal-cell .cal-chip { display: flex; margin-bottom: 3px; white-space: normal; }
.cal-cell.is-off { background: color-mix(in srgb, var(--critical) 9%, transparent); }
.cal-cell.is-part { background: color-mix(in srgb, #c9a227 8%, transparent); }
.cal-cell.is-free { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--border) 60%, transparent) 6px 7px); }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--critical) 35%, transparent); }
.cal-cell.is-clickable { cursor: pointer; }
.cal-cell.is-clickable:hover, .cal-cell.is-clickable:focus-visible { outline: 2px solid color-mix(in srgb, var(--text-primary) 25%, transparent); outline-offset: -2px; }
.cal-time { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cal-tag { display: inline-block; margin-top: 3px; font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); }
.cal-week tr.is-me th, .cal-week tr.is-me td { background-color: color-mix(in srgb, #2a78d6 7%, transparent); }
.cal-month { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-mhead { background: var(--surface-2); padding: 6px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-secondary); }
.cal-mday { background: var(--surface-1); min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-mday.is-out { opacity: .45; }
.cal-mday.is-weekend { background: var(--surface-2); }
.cal-mday.is-today .cal-dom { color: #fff; background: var(--critical); border-radius: 999px; padding: 0 7px; }
.cal-mday.is-clickable { cursor: pointer; }
.cal-mday.is-clickable:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-primary) 18%, transparent); }
.cal-mday-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.cal-count { font-size: 11px; color: var(--text-secondary); }
.cal-mline { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.3; padding: 2px 6px; border-radius: 4px;
  border-left: 3px solid var(--chip); background: color-mix(in srgb, var(--chip) 10%, transparent); min-width: 0; }
.cal-mline .cal-mwhy { font-size: 10.5px; }
.cal-mline.is-off { background: color-mix(in srgb, var(--chip) 18%, transparent); }
.cal-mname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mwhy { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mline.is-clickable { cursor: pointer; }
.cal-daylist { display: grid; gap: 4px; }
.cal-dayrow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px;
  border-radius: var(--radius-sm); background: var(--surface-2); }
.cal-dayrow .cal-person, .cal-dayrow .cal-hours { display: inline; }
.cal-dayrow.is-off { background: color-mix(in srgb, var(--critical) 10%, transparent); }
.cal-dayrow.is-off .cal-person { color: var(--critical-text); }
.cal-daypicks { display: flex; flex-wrap: wrap; gap: 10px; }
.cal-daypick { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.grid-table tr.is-total td { font-weight: 700; border-top: 2px solid var(--border); }
@media (max-width: 720px) {
  .cal-mday { min-height: 70px; padding: 4px; }
  .cal-mline .cal-mwhy { display: none; }
  .cal-name-col { width: 120px; }
}
.goal-now { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 13px; color: var(--text-secondary); }
.goal-now b { color: var(--text-primary); }
.goal-form-wide { grid-column: 1 / -1; margin: 0; }

/* ===================================================== manager leaderboard */
.lb-controls { display: grid; grid-template-columns: minmax(390px, 1.7fr) repeat(3, minmax(180px, 1fr)); gap: 12px;
  align-items: start; margin-bottom: 12px; }
.lb-controls select, .lb-controls input { max-width: 100%; }
.lb-columns { position: relative; }
.lb-columns summary { cursor: pointer; font-size: 13px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-1); list-style: none; }
.lb-columns summary::-webkit-details-marker { display: none; }
.lb-column-grid { position: absolute; z-index: 20; margin-top: 6px; padding: 12px 14px; width: min(720px, 90vw);
  max-height: 420px; overflow: auto; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.14);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.lb-column-group { grid-column: 1 / -1; margin: 6px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); }
.spacer { flex: 1; }
.lb-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lb-place { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; text-align: center;
  border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.lb-place.place-1 { border-color: #d4a72c; background: color-mix(in srgb, #d4a72c 12%, var(--surface-1)); }
.lb-place.place-2 { border-color: #9aa3ad; }
.lb-place.place-3 { border-color: #b8794a; }
.lb-place-rank { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.lb-place-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-table th.is-sortable { cursor: pointer; white-space: normal; }
.lb-table th.is-sorted, .lb-table td.is-sorted { background: color-mix(in srgb, #2a78d6 7%, transparent); font-weight: 700; }
.lb-table tr.is-podium td:first-child { font-weight: 800; }
.lb-table .pill-quiet { margin-left: 6px; white-space: nowrap; }
.lb-controls .cal-picks { flex-wrap: nowrap; }
@media (max-width: 1100px) { .lb-controls { grid-template-columns: 1fr 1fr; } .lb-controls .cal-picks { flex-wrap: wrap; } }

/* ===================================================== contests & raffles */
.contest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.contest-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-1); color: inherit; text-decoration: none;
  transition: box-shadow .15s, transform .15s; }
.contest-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.contest-card h3 { margin: 2px 0 0; font-size: 16px; }
.contest-card p { margin: 0; font-size: 13px; }
.contest-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.contest-how { color: var(--text-secondary); }
.contest-kind { font-weight: 700; }
.contest-kind.kind-raffle { background: color-mix(in srgb, #7b5cd6 15%, transparent); color: #6a4cc4; }
.contest-kind.kind-contest { background: color-mix(in srgb, #d4a72c 18%, transparent); color: #8a6a10; }
.contest-thumbs { display: flex; gap: 6px; margin-top: 4px; }
.contest-thumbs img, .contest-thumb-empty { width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-2); }
.contest-thumb-empty { display: grid; place-items: center; font-size: 9.5px; text-align: center; color: var(--text-muted); padding: 2px; overflow: hidden; }
.rule-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.rule-row .rule-n { width: 72px; }
.rule-row select { max-width: 260px; }
.prize-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 12px; }
.prize-card { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-1); }
.prize-image { position: relative; display: block; width: 120px; height: 120px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-2); border: 1px dashed var(--border); cursor: pointer; }
.prize-image img { width: 100%; height: 100%; object-fit: cover; }
.prize-empty { display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--text-muted); text-align: center; }
.prize-change { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; font-size: 11px; text-align: center;
  color: #fff; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .15s; }
.prize-image:hover .prize-change, .prize-image:focus-within .prize-change { opacity: 1; }
.prize-card .stack-form { gap: 8px; }

/* agent side: the Prizes tab */
.prizes-list { display: grid; gap: 16px; }
.prize-contest { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); overflow: hidden; }
.prize-contest-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.prize-contest-head h2 { margin: 4px 0 2px; font-size: 18px; }
.prize-contest-head p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.prize-contest-body { padding: 14px 16px; display: grid; gap: 14px; }
.prize-when { text-align: right; font-size: 13px; color: var(--text-secondary); }
.prize-when strong { display: block; font-size: 15px; color: var(--text-primary); }
.prize-how { font-size: 13.5px; }
.prize-how b { color: var(--text-primary); }
.prize-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.prize-tile { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-1); }
.prize-tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.prize-tile .prize-noimg { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-2);
  color: var(--text-muted); font-size: 34px; }
.prize-tile-body { padding: 8px 10px; }
.prize-tile-body .prize-place { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #8a6a10; }
.prize-tile-body strong { display: block; font-size: 14px; }
.prize-tile-body p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.prize-me { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, #2a78d6 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, #2a78d6 25%, transparent); }
.prize-me .big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prize-top { display: flex; gap: 8px; flex-wrap: wrap; }
.prize-top span { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.prize-winners { display: flex; gap: 8px; flex-wrap: wrap; }
.prize-winners span { font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #d4a72c 18%, var(--surface-1)); }
.contest-kind { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; line-height: 1.5; }

/* calls view: service donut and inbound/outbound split */
.cv-donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.cv-donut-box { position: relative; flex: 0 0 168px; }
.cv-donut { width: 168px; height: 168px; display: block; }
.cv-slice { stroke: var(--surface-1); stroke-width: 2; cursor: default; }
.cv-slice:hover { opacity: .85; }
.cv-donut-total { text-anchor: middle; font-size: 24px; font-weight: 700; fill: var(--text-primary); }
.cv-donut-sub { text-anchor: middle; font-size: 11px; fill: var(--text-secondary); }
.cv-tip { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); white-space: nowrap; z-index: 5;
  padding: 4px 8px; font-size: 12px; border-radius: 6px; background: var(--text-primary); color: var(--surface-1); }
.cv-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; display: grid; gap: 6px; min-width: 0; }
.cv-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.cv-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.cv-legend-n { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cv-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cv-legend .cv-swatch { margin: 0; }
.cv-split-wrap { display: grid; gap: 8px; }
.cv-split-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
.cv-split-labels b { color: var(--text-primary); font-weight: 600; }
.cv-split { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.cv-split-a { background: #2a78d6; }
.cv-split-b { background: #eb6834; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cv-split-a { background: #3987e5; } :root:not([data-theme="light"]) .cv-split-b { background: #d95926; } }
:root[data-theme="dark"] .cv-split-a { background: #3987e5; }
:root[data-theme="dark"] .cv-split-b { background: #d95926; }
.rbs-table th { vertical-align: bottom; min-width: 96px; }
.rbs-name { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; text-transform: none; letter-spacing: 0; }
.rbs-sub { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.rbs-pct { display: block; font-weight: 600; }
.rbs-n { display: block; font-size: 11px; color: var(--text-muted); }
.cv-note { margin-top: 12px !important; }
.page-actions { align-items: center; }
.page-actions > select { height: auto; align-self: center; width: auto; }

/* ---- manager leaderboard, at the foot of Departments (v1.13) ---------- */
.mlb-section { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.mlb-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.mlb-head h2 { margin: 0 0 4px; font-size: 20px; }
.mlb-head p { margin: 0; max-width: 70ch; }
.mlb-busy { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  padding: 4px 10px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.mlb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mlb-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mlb-tab:hover { color: var(--text-primary); border-color: var(--text-muted); }
.mlb-tab.is-on { background: var(--brand-800, #1b2a4a); border-color: transparent; color: #fff; }
.mlb-tab .cal-dot { margin: 0; }
.mlb-note { margin: 4px 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: color-mix(in srgb, #2a78d6 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, #2a78d6 25%, transparent); }
.lb-table td.is-unsplit, .lb-table th.is-unsplit { color: var(--text-muted); }
.table-wrap.is-stale { opacity: .55; transition: opacity .15s; }
.mlb-section .lb-controls { grid-template-columns: minmax(390px, 1.7fr) repeat(3, minmax(170px, 1fr)); }

/* ---- calendar, v1.13 refresh ----------------------------------------- */
.cal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 18px; overflow-x: auto; }
.cal-tab { padding: 9px 16px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cal-tab:hover { color: var(--text-primary); }
.cal-tab.is-on { color: var(--text-primary); border-bottom-color: var(--brand, #2a78d6); }
.cal-tab-intro { margin: 0 0 12px; color: var(--text-secondary); font-size: 13.5px; max-width: 75ch; }

.cal-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cal-glance-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-1); border: 1px solid var(--border); min-width: 0; }
.cal-glance-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.cal-glance-value { font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cal-glance-sub { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-glance-tile.is-good { border-left: 4px solid #1baf7a; }
.cal-glance-tile.is-off { border-left: 4px solid #eb6834; }
.cal-glance-tile.is-part { border-left: 4px solid #eda100; }

.cal-toolbar-main { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px 12px 0 0;
  background: var(--surface-1); border-bottom: 0; margin-bottom: 0 !important; }
.cal-toolbar-main + .cal-scroll, .cal-toolbar-main + .cal-month { border-top-left-radius: 0; border-top-right-radius: 0; }
.cal-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-1);
  font-size: 18px; line-height: 1; color: var(--text-primary); cursor: pointer; }
.cal-arrow:hover { background: var(--surface-2); }
.cal-title { font-size: 18px; font-weight: 700; margin: 0 6px 0 6px; }

.cal-scroll { border-radius: 0 0 12px 12px; }
.cal-week { font-size: 12.5px; }
.cal-week th, .cal-week td { padding: 7px 8px; }
.cal-week thead th { background: var(--surface-1); border-bottom: 2px solid var(--border); padding: 9px 8px; }
.cal-week thead th.is-today { color: var(--brand, #2a78d6); }
.cal-week thead th.is-today .cal-dom { display: inline-block; min-width: 26px; padding: 1px 6px; border-radius: 999px;
  background: var(--brand, #2a78d6); color: #fff; }
.cal-name-col { width: 190px; }
.cal-who { display: flex; align-items: center; gap: 9px; }
.cal-who-text { min-width: 0; }
.cal-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--dept); background: color-mix(in srgb, var(--dept) 16%, var(--surface-1)); }
.cal-group td { background: var(--surface-2); padding-top: 9px; padding-bottom: 9px; }
.cal-cell { height: 48px; vertical-align: middle !important; }
.cal-cell.is-today { box-shadow: none; background-color: color-mix(in srgb, #2a78d6 6%, transparent); }
.cal-cell.is-off { background: color-mix(in srgb, #eb6834 10%, transparent); }
.cal-cell.is-part { background: color-mix(in srgb, #eda100 10%, transparent); }
.cal-shift { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
  background: color-mix(in srgb, #1baf7a 12%, var(--surface-1)); border: 1px solid color-mix(in srgb, #1baf7a 28%, transparent); }
.cal-cell .cal-chip { border-radius: 6px; padding: 4px 8px; font-weight: 600; }
.cal-week tbody tr:hover th, .cal-week tbody tr:hover td:not(.is-off):not(.is-part) { background-color: color-mix(in srgb, var(--text-primary) 3%, transparent); }

.cal-month { border-radius: 0 0 12px 12px; overflow: hidden; }
.cal-mhead { background: var(--surface-1); border-bottom: 1px solid var(--border); padding: 8px; text-align: center; }
.cal-mday { min-height: 108px; padding: 8px; }
.cal-mday.is-today { background: color-mix(in srgb, #2a78d6 5%, var(--surface-1)); }
.cal-mday.is-today .cal-dom { background: var(--brand, #2a78d6); }
.cal-count { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #1baf7a 12%, transparent);
  color: color-mix(in srgb, #1baf7a 70%, var(--text-primary)); font-weight: 600; }
.cal-mline { border-left: 3px solid var(--chip); border-radius: 4px; }

.cal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; margin-top: 10px; }
.cal-foot .cal-legend { margin: 0; }
.cal-foot .hint-line { margin: 0; }

/* schedules table */
.sched-table td, .sched-table th { white-space: nowrap; }
.sched-group td { background: var(--surface-2); font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); }
.sched-name { font-weight: 600; }
.sched-days { display: inline-flex; gap: 3px; }
.sched-day { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px;
  font-weight: 700; color: var(--text-muted); background: var(--surface-2); }
.sched-day.is-on { color: #fff; background: #2a78d6; }
.sched-day.is-own { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px #eda100; }
.sched-time { font-variant-numeric: tabular-nums; }
.sched-time.is-break { color: color-mix(in srgb, #2a78d6 75%, var(--text-primary)); font-weight: 600; }
.sched-time.is-lunch { color: color-mix(in srgb, #eb6834 75%, var(--text-primary)); font-weight: 600; }
.sched-time.is-follow { color: var(--text-secondary); white-space: normal; min-width: 120px; }
.sched-table tr.is-missing td { color: var(--text-muted); }

/* ---- goals in force (v1.13) ------------------------------------------- */
.goals-now td { vertical-align: middle; }
.goals-value span:first-child { display: block; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.goals-src { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; min-height: 1em; }
.goals-value.is-different { background: color-mix(in srgb, #eda100 10%, transparent); }
.goals-dir { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.goals-own { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px; border-radius: 999px; font-size: 12px;
  background: color-mix(in srgb, #4a3aa7 10%, var(--surface-1)); border: 1px solid color-mix(in srgb, #4a3aa7 22%, transparent); white-space: nowrap; }

/* ---- sign-in page: contest countdown (v1.13) --------------------------- */
.gate-clock { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
.gate-clock .clock-now { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.gate-clock .clock-time { font-size: 16px; }
.gate-clock .clock-count { text-align: center; }
.gate-clock .count-label { font-size: 11px; font-weight: 700; white-space: normal; }
.count-title { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.count-title[hidden], .count-units[hidden], .count-value[hidden], .count-track[hidden] { display: none; }
.count-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.count-unit { display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; border-radius: 10px;
  background: var(--surface-1); border: 1px solid var(--border); }
.count-unit b { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.count-unit small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.gate-clock .count-value { font-size: 14px; font-weight: 600; margin-top: 4px; color: var(--text-secondary); }
.gate-clock .count-track { height: 5px; margin-top: 10px; }
@media (max-width: 460px) { .gate-clock .clock-count { text-align: center; } .count-unit b { font-size: 20px; } }
.sched-help { margin: 10px 2px 0; font-size: 12.5px; color: var(--text-secondary); }
.sched-time.is-follow { white-space: nowrap; }

/* ---- every call: search, dates, pages (v1.14) -------------------------- */
.cv-list-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 12px; }
.cv-search-box { flex: 1 1 260px; min-width: 0; }
.cv-search { width: 100%; padding: 9px 12px 9px 34px; border-radius: 10px; border: 1px solid var(--border-strong, var(--border));
  background: var(--surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%239a9893' stroke-width='2'/%3E%3Cpath d='M13 13l4 4' stroke='%239a9893' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center / 16px;
  color: var(--text-primary); font: inherit; font-size: 14px; }
.cv-dates { display: flex; gap: 8px; }
.cv-date { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); }
.cv-date input { font: inherit; font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.cv-quicks { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-quick { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cv-quick:hover { color: var(--text-primary); border-color: var(--text-muted); }
.cv-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.cv-pager select { margin-left: 10px; }
.cv-page { font-size: 13px; font-weight: 600; padding: 0 8px; font-variant-numeric: tabular-nums; }
.cv-list.is-loading .table-wrap { opacity: .55; transition: opacity .15s; }
.review-mix { margin: 14px 0 4px; }

/* ---- folding cards and the searchable history lists (v1.14) ----------- */
.fold-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; user-select: none; }
.fold-card > summary::-webkit-details-marker { display: none; }
.fold-card > summary .pill { margin-left: auto; }
.fold-card > summary:hover { background: var(--surface-2); }
.fold-card:not([open]) > summary { border-bottom: 0; }
.fold-chevron { width: 9px; height: 9px; flex: none; border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary); transform: rotate(-45deg); transition: transform .15s; margin: 0 2px; }
.fold-card[open] > summary .fold-chevron { transform: rotate(45deg); }
.fold-card .pill.is-warn { color: var(--critical-text); border-color: color-mix(in srgb, var(--critical) 35%, transparent); }
.fold-settings > .admin-card { border: 0; box-shadow: none; background: none; margin: 0; }
.fold-settings > .admin-card > .admin-card-head { display: none; }
.fold-settings > .admin-card > .admin-card-body { padding: 0; }
.browse-count { display: block; font-size: 12.5px; margin: 0 0 8px; min-height: 1em; }
.browse.is-loading .browse-out { opacity: .55; transition: opacity .15s; }
.team-calls .cv-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.team-calls > * + * { margin-top: 14px; }
.mlb-section > .fold-card { margin-top: 18px; }

/* ---- calendar: people stand out, a working day is a quiet bar ---- */
.cal-week tbody tr:not(.cal-group) { --dept: #9a9893; }
.cal-week tbody tr:not(.cal-group) > .cal-name-col { box-shadow: inset 4px 0 0 var(--dept); padding-left: 14px; }
.cal-avatar { width: 38px; height: 38px; font-size: 13px; color: #fff; background: var(--dept);
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px color-mix(in srgb, var(--dept) 45%, transparent); }
.cal-who { gap: 11px; }
.cal-person { font-size: 14px; font-weight: 700; line-height: 1.25; }
.cal-name-col .cal-hours { font-size: 11.5px; margin-top: 2px; color: var(--text-secondary); }
.cal-name-col .cal-hours.has-hours { display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--dept) 13%, var(--surface-1)); font-variant-numeric: tabular-nums; }
.cal-name-col { width: 215px; }
.cal-week tbody tr:not(.cal-group) td { height: 58px; }
.cal-week tbody tr:nth-child(even):not(.cal-group) td:not(.is-off):not(.is-part):not(.is-free) { background-color: color-mix(in srgb, var(--text-primary) 1.5%, transparent); }
.cal-cell.is-working { padding: 10px 8px; }
.cal-onbar { display: block; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--dept, #1baf7a) 32%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--dept, #1baf7a) 45%, transparent); }
.cal-cell.is-working:hover .cal-onbar { background: color-mix(in srgb, var(--dept, #1baf7a) 55%, var(--surface-1)); }
.cal-group td { font-size: 12.5px; padding-top: 11px; padding-bottom: 11px; }
.cal-mhead-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cal-mavatar { flex: none; width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 8px; font-weight: 700; color: #fff; background: var(--dept, #9a9893); }
.cal-mline { padding: 4px 7px; }
.cal-mname { font-size: 12px; }

/* ---- comments & concerns (agent tab) and the manager inbox ---- */
.view-tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.view-tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--critical, #d64545); }
.fb-card { max-width: 760px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius, 12px);
  padding: 18px 20px; margin-bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.fb-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin-top: 4px; }
.fb-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-cat { font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); --fb: #6b7280; }
.fb-cat:hover { border-color: color-mix(in srgb, var(--fb) 50%, var(--border)); }
.fb-cat.is-on { background: var(--fb); border-color: var(--fb); color: #fff; }
.fb-cat-comment { --fb: #2a78d6; } .fb-cat-question { --fb: #7c4dcc; } .fb-cat-concern { --fb: #c2410c; } .fb-cat-bug { --fb: #0f8a6a; }
.fb-subject, .fb-body { width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); box-sizing: border-box; }
.fb-body { resize: vertical; min-height: 110px; line-height: 1.45; }
.fb-body-wrap { position: relative; }
.fb-count { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: var(--text-muted, #888); pointer-events: none; }
.fb-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.fb-who-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; }
.fb-who-opt.is-on { border-color: var(--brand, #2a78d6); background: color-mix(in srgb, var(--brand, #2a78d6) 7%, var(--surface-1)); }
.fb-who-opt input { margin-top: 3px; }
.fb-who-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-secondary); }
.fb-who-text strong { color: var(--text-primary); font-size: 14px; }
.fb-seal { margin: 0; font-size: 12.5px; color: var(--text-secondary); padding: 9px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--warning, #c9a227) 10%, var(--surface-1)); }
.fb-error { margin: 0; color: var(--critical-text, #b42318); font-size: 13px; }
.fb-sent { margin: 0 0 4px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
  color: var(--good-text, #11734e); background: color-mix(in srgb, #1baf7a 12%, var(--surface-1)); }
.fb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-list-head { font-size: 17px; margin: 0 0 10px; }
.fb-list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin-bottom: 18px; }
.fb-msg { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; }
.fb-msg.has-new { border-color: var(--brand, #2a78d6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #2a78d6) 18%, transparent); }
.fb-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: #fff;
  background: var(--fb, #6b7280); }
.fb-pill.fb-anon { background: color-mix(in srgb, var(--text-primary) 12%, var(--surface-1)); color: var(--text-primary); }
.fb-status { font-size: 12px; color: var(--text-secondary); }
.fb-status-resolved { color: var(--good-text, #11734e); font-weight: 600; }
.fb-date { margin-left: auto; font-size: 12px; color: var(--text-muted, #888); }
.fb-msg-subject { margin: 0; font-size: 15px; }
.fb-msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: 14px; }
.fb-reply { margin-top: 4px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--brand, #2a78d6);
  background: color-mix(in srgb, var(--brand, #2a78d6) 6%, var(--surface-1)); display: flex; flex-direction: column; gap: 6px; }
.fb-reply-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fb-new { font-size: 10.5px; font-weight: 700; color: #fff; background: var(--brand, #2a78d6); padding: 1px 7px; border-radius: 999px; }
.fb-revealed { margin: 0; font-size: 12.5px; color: var(--critical-text, #b42318); }
.fb-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.fb-filters .seg { margin-bottom: 0; }
.fb-filters .cv-search { min-width: 220px; flex: 1; max-width: 340px; }
.fb-inbox.is-new { border-left: 4px solid var(--brand, #2a78d6); }
.fb-inbox.is-resolved { opacity: .82; }
.fb-sender { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.fb-sender.is-anon strong { color: var(--text-secondary); }
.fb-lock { font-size: 12px; }
.fb-status-pick { width: auto; min-width: 0; font-size: 12.5px; padding: 3px 6px; }
.fb-seal-box { padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fb-seal-box p { margin: 0; }
.fb-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.fb-delete { color: var(--critical-text, #b42318); }

/* =========================================================================
   Colour & motion (revamp, part 1)
   More colour, and small movements that make the pages feel alive without
   costing much: CSS transforms and opacity only (the GPU does them), each
   played once, and all of it switched off for anybody whose computer asks
   for less motion.
   ========================================================================= */
:root {
  --pop-1: #2a78d6;   /* blue    */
  --pop-2: #8b5cf6;   /* violet  */
  --pop-3: #e8457c;   /* pink    */
  --pop-4: #f2a516;   /* amber   */
  --pop-5: #1baf7a;   /* green   */
  --pop-6: #0ea5b7;   /* teal    */
  --gold: #e0a32a; --silver: #9aa3ad; --bronze: #c07a45;
  --grad-brand: linear-gradient(100deg, #131e35 0%, #1f2f5c 48%, #3a2a6e 100%);
  --grad-pop: linear-gradient(120deg, var(--pop-1), var(--pop-2) 55%, var(--pop-3));
  --ease-out: cubic-bezier(.2, .8, .25, 1);
}

/* the header gets a little depth */
.topbar { background: var(--grad-brand); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(10, 14, 40, .18); }

/* a page or tab slides in when you move to it (not on automatic refreshes) */
@keyframes rca-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#content.is-entering > * { animation: rca-enter 380ms var(--ease-out) both; }
#content.is-entering > *:nth-child(2) { animation-delay: 40ms; }
#content.is-entering > *:nth-child(3) { animation-delay: 80ms; }
#content.is-entering > *:nth-child(4) { animation-delay: 120ms; }
#content.is-entering > *:nth-child(5) { animation-delay: 160ms; }
#content.is-entering > *:nth-child(n+6) { animation-delay: 200ms; }

/* page titles carry a colour stroke */
.page-head h1 { position: relative; padding-bottom: 6px; }
.page-head h1::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 4px; border-radius: 4px;
  background: var(--grad-pop);
}

/* manager cards: a thin colour edge, and a lift on hover for the clickable ones */
.admin-card { position: relative; overflow: hidden; }
.admin-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-pop); opacity: .85;
}
.contest-card { transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.contest-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20, 24, 60, .14); }
.btn-primary { background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }
.btn { transition: transform 120ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }

/* agent tabs: each one its own colour */
.view-tabs { gap: 6px; border-bottom: 0; flex-wrap: wrap; padding: 4px; border-radius: 14px;
  background: var(--surface-1); box-shadow: var(--shadow); }
.view-tab { --tab: var(--pop-1); position: relative; border: 0; margin: 0; border-radius: 10px;
  transition: background-color 160ms ease, color 160ms ease; }
.view-tab.tab-board { --tab: var(--pop-1); }
.view-tab.tab-me { --tab: var(--pop-5); }
.view-tab.tab-calls { --tab: var(--pop-6); }
.view-tab.tab-prizes { --tab: var(--pop-3); }
.view-tab.tab-calendar { --tab: var(--pop-4); }
.view-tab.tab-feedback { --tab: var(--pop-2); }
.view-tab:hover { background: color-mix(in srgb, var(--tab) 10%, transparent); color: var(--text-primary); }
.view-tab.is-active { color: #fff; background: var(--tab);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tab) 40%, transparent); }
.view-tab.tab-calendar.is-active { color: #2b1d00; }
.view-tab.is-active .view-tab-badge { background: #fff; color: var(--tab); }

/* leaderboard bars grow in, and the podium rows glow */
@keyframes rca-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lb-bar { transform-origin: left center;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.22)); }
.lb-row.rank-1 { box-shadow: inset 4px 0 0 var(--gold); }
.lb-row.rank-2 { box-shadow: inset 4px 0 0 var(--silver); }
.lb-row.rank-3 { box-shadow: inset 4px 0 0 var(--bronze); }
.lb-row { transition: background-color 160ms ease, transform 160ms ease; }

#content.is-entering .lb-bar { animation: rca-grow 700ms var(--ease-out) both; animation-delay: var(--grow-delay, 0ms); }

/* "my" colour on my own pages */
#content.has-me-color .me-card { border-top: 4px solid var(--me-color); }
#content.has-me-color .cv-hour-fill, #content.has-me-color .cv-key-calls,
#content.has-me-color .bucket-fill { background: var(--me-color); }

/* ---------------------------------------------------------------- faces */
.rca-face { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%;
  overflow: hidden; font-weight: 700; letter-spacing: .02em; line-height: 1;
  box-shadow: 0 0 0 2px var(--surface-1), 0 1px 3px rgba(0,0,0,.18); background: var(--surface-3); }
.rca-face.avatar { padding: 0; }
.rca-face img, .rca-face svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.topbar .rca-face { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.whoami.is-clickable { cursor: pointer; border-radius: 999px; padding: 3px 10px 3px 3px;
  transition: background-color 150ms ease; }
.whoami.is-clickable:hover, .whoami.is-clickable:focus-visible { background: rgba(255,255,255,.12); outline: none; }
.whoami.is-clickable::after { content: "\270E"; font-size: 11px; opacity: .6; }

/* ---------------------------------------------------------- profile box */
.pf-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  background: rgba(8, 10, 26, .55); backdrop-filter: blur(3px); animation: rca-fade 160ms ease both; }
.pf-backdrop.is-leaving { animation: rca-fade-out 170ms ease both; }
@keyframes rca-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rca-fade-out { to { opacity: 0; } }
@keyframes rca-pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.pf-dialog { width: min(920px, 100%); max-height: min(92vh, 860px); display: flex; flex-direction: column;
  background: var(--surface-1); color: var(--text-primary); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: rca-pop-in 260ms var(--ease-out) both; }
.pf-head { display: flex; align-items: center; padding: 14px 18px; background: var(--grad-pop); color: #fff; }
.pf-head h2 { font-size: 17px; margin: 0; }
.pf-x { margin-left: auto; color: #fff; font-size: 22px; line-height: 1; background: rgba(255,255,255,.15);
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; }
.pf-grid { display: grid; grid-template-columns: 250px 1fr; min-height: 0; flex: 1; overflow: hidden; }
.pf-side { padding: 18px; background: var(--surface-2); display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid var(--border); overflow: auto; }
.pf-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pf-big { box-shadow: 0 0 0 5px var(--surface-1), 0 10px 26px rgba(0,0,0,.18); }
.pf-preview-text { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.pf-preview-text strong { font-size: 16px; }
.pf-preview-text small { color: var(--text-muted); font-size: 11.5px; }
.pf-preview-bar { display: block; width: 100%; height: 14px; border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent); overflow: hidden; }
.pf-preview-bar span { display: block; width: 72%; height: 100%; border-radius: 6px; transition: background-color 200ms ease; }
.pf-modes { display: flex; flex-direction: column; gap: 6px; }
.pf-mode { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); font-weight: 600; cursor: pointer; font-size: 13.5px; }
.pf-mode.is-on { border-color: var(--pop-2); background: color-mix(in srgb, var(--pop-2) 12%, var(--surface-1));
  box-shadow: inset 3px 0 0 var(--pop-2); }
.pf-body { padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.pf-tools { display: flex; gap: 8px; align-items: center; }
.pf-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-secondary); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.pf-chip.is-on { background: var(--pop-2); border-color: var(--pop-2); color: #fff; }
.pf-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.pf-option { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 6px;
  border-radius: 12px; border: 2px solid transparent; background: var(--surface-2); cursor: pointer;
  color: var(--text-secondary); font-size: 11.5px; font-weight: 600; transition: transform 140ms ease, border-color 140ms ease; }
.pf-option:hover { transform: translateY(-2px); }
.pf-option.is-on { border-color: var(--pop-2); color: var(--text-primary); background: color-mix(in srgb, var(--pop-2) 10%, var(--surface-1)); }
.pf-option-pic { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; }
.pf-option-pic svg { width: 100%; height: 100%; display: block; }
.pf-colours { display: flex; flex-direction: column; gap: 8px; }
.pf-colour-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; }
.pf-colour-row > span { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.pf-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface-1); cursor: pointer;
  box-shadow: 0 0 0 1px var(--border-strong); transition: transform 120ms ease; padding: 0; position: relative; }
.pf-swatch:hover { transform: scale(1.12); }
.pf-swatch.is-on { box-shadow: 0 0 0 2px var(--text-primary); transform: scale(1.12); }
.pf-swatches-lg .pf-swatch { width: 32px; height: 32px; }
.pf-swatch-auto { width: auto !important; border-radius: 999px; padding: 0 10px; font-size: 11.5px; font-weight: 700;
  background: var(--surface-2); color: var(--text-secondary); }
.pf-swatch-custom { display: inline-grid; place-items: center; overflow: hidden;
  background: conic-gradient(#e8457c, #f2a516, #1baf7a, #0ea5b7, #2a78d6, #8b5cf6, #e8457c); color: #fff; font-weight: 800; }
.pf-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.pf-colour-pick { border-top: 1px solid var(--border); padding-top: 14px; }
.pf-colour-pick h3 { font-size: 14px; margin: 0 0 2px; }
.pf-note { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 8px; }
.pf-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px;
  border: 2px dashed color-mix(in srgb, var(--pop-1) 45%, var(--border)); border-radius: 14px; cursor: pointer;
  text-align: center; background: color-mix(in srgb, var(--pop-1) 5%, var(--surface-1)); }
.pf-drop:hover { background: color-mix(in srgb, var(--pop-1) 10%, var(--surface-1)); }
.pf-drop small { color: var(--text-muted); }
.pf-drop-icon { font-size: 30px; }
.pf-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pf-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.pf-status { margin: 0 auto 0 0; font-size: 12.5px; color: var(--text-secondary); }
@media (max-width: 720px) {
  .pf-grid { grid-template-columns: 1fr; overflow: auto; }
  .pf-side { border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .pf-modes { flex-direction: row; flex-wrap: wrap; }
  .pf-body { overflow: visible; }
}

/* ------------------------------------------------------ the raffle wheel */
.rw-overlay { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 35%, #3b2a7e 0%, #1a1440 55%, #0b0a1e 100%);
  color: #fff; overflow: hidden; animation: rca-fade 240ms ease both; }
.rw-overlay.is-leaving { animation: rca-fade-out 220ms ease both; }
.rw-rays { position: absolute; inset: -50%; pointer-events: none; opacity: .22;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.35) 0 6deg, transparent 6deg 18deg);
  animation: rw-rays 40s linear infinite; }
@keyframes rw-rays { to { transform: rotate(360deg); } }
.rw-close { position: absolute; top: 14px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; cursor: pointer; }
.rw-close:hover { background: rgba(255,255,255,.26); }
.rw-panel { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; max-width: 720px; width: 100%; animation: rca-pop-in 340ms var(--ease-out) both; }
.rw-kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(90deg, #ff4d8d, #ffb020); color: #1a0b1f; }
.rw-title { font-size: clamp(22px, 3.4vw, 32px); margin: 8px 0 2px; font-weight: 800; letter-spacing: -.01em; }
.rw-place { margin: 0; font-size: 15px; color: rgba(255,255,255,.86); display: flex; align-items: center;
  justify-content: center; gap: 6px; flex-wrap: wrap; }
.rw-place small { color: rgba(255,255,255,.6); }
.rw-medal { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 8px; border-radius: 999px;
  font-weight: 800; font-size: 13px; background: #7d8bff; color: #fff; }
.rw-medal.place-1 { background: linear-gradient(135deg, #ffe08a, #e0a32a); color: #3a2600; }
.rw-medal.place-2 { background: linear-gradient(135deg, #f1f4f7, #9aa3ad); color: #1d242b; }
.rw-medal.place-3 { background: linear-gradient(135deg, #f3c39c, #c07a45); color: #2e1606; }
.rw-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rw-wheel { position: relative; filter: drop-shadow(0 22px 40px rgba(0,0,0,.45)); }
.rw-canvas { display: block; }
.rw-pointer { position: absolute; top: -14px; left: 50%; width: 0; height: 0; transform: translateX(-50%);
  transform-origin: 50% 10%;
  border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 34px solid #fff;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.rw-pointer::after { content: ""; position: absolute; left: -7px; top: -32px; width: 14px; height: 14px;
  border-radius: 50%; background: #ff4d8d; }
.rw-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: clamp(40px, 9vw, 92px); font-weight: 900; color: #fff; text-shadow: 0 6px 24px rgba(0,0,0,.55); }
.rw-count:empty { display: none; }
.rw-count.pop { animation: rw-pop 900ms var(--ease-out) both; }
@keyframes rw-pop { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: .92; } }
.rw-ticker { min-height: 28px; font-size: 19px; font-weight: 800; letter-spacing: .01em; color: #ffe08a;
  text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.rw-reveal { display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 14px; border-radius: 18px; text-align: left;
  background: rgba(255,255,255,.96); color: #17142b; box-shadow: 0 18px 50px rgba(0,0,0,.45);
  animation: rw-reveal 620ms cubic-bezier(.2, 1.4, .4, 1) both; }
.rw-reveal[hidden] { display: none; }
@keyframes rw-reveal { from { opacity: 0; transform: translateY(18px) scale(.8); } to { opacity: 1; transform: none; } }
.rw-face { box-shadow: 0 0 0 4px #ffd166, 0 8px 18px rgba(0,0,0,.2); }
.rw-winner-text { display: flex; flex-direction: column; gap: 2px; }
.rw-winner-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #8b5cf6; }
.rw-winner-name { font-size: clamp(22px, 3vw, 30px); font-weight: 900; line-height: 1.1; }
.rw-winner-meta { font-size: 13px; color: #5a5670; }
.rw-prize-img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; margin-left: 4px; }
.rw-overlay.is-me .rw-reveal { background: linear-gradient(135deg, #fff5d6, #ffe0ef); }
.rw-overlay.is-me .rw-winner-kicker { color: #e8457c; font-size: 14px; }
.rw-next { margin-top: 4px; }
.rw-next[hidden] { display: none; }
.rw-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

/* the small wheel on a page */
.rw-mini { position: relative; display: inline-block; flex: 0 0 auto; }
.rw-mini-spin { width: 100%; height: 100%; }
.rw-mini.is-drifting .rw-mini-spin { animation: rw-drift 90s linear infinite; }
@keyframes rw-drift { to { transform: rotate(360deg); } }
.rw-mini-canvas { display: block; filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)); }
.rw-mini-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 18px solid var(--text-primary); }
.wheel-preview { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.wheel-preview .admin-help { max-width: 360px; }
.btn-spin { font-size: 14.5px; padding-inline: 16px; background: linear-gradient(120deg, #8b5cf6, #e8457c); border-color: transparent; }
.btn-spin:hover { filter: brightness(1.07); background: linear-gradient(120deg, #8b5cf6, #e8457c); }

/* -------------------------------------------------------- the Prizes tab */
.pz-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 18px; border-radius: 18px; color: #fff;
  background: linear-gradient(115deg, #3a1d7a 0%, #8b5cf6 45%, #e8457c 80%, #f2a516 120%); }
.pz-hero-glow { position: absolute; width: 340px; height: 340px; right: -60px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%); pointer-events: none; }
.pz-hero-text { position: relative; flex: 1 1 320px; }
.pz-hero-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.pz-hero h1 { font-size: clamp(26px, 4vw, 36px); margin: 2px 0 4px; font-weight: 900; letter-spacing: -.02em; }
.pz-hero p { margin: 0; opacity: .92; }
.pz-hero-stats { position: relative; display: flex; gap: 8px; }
.pz-stat { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 13px; backdrop-filter: blur(2px); }
.pz-stat b { font-size: 16px; }
.pz-hero-gift { position: absolute; right: 22px; top: 12px; font-size: 44px; opacity: .9;
  animation: pz-bob 3.2s ease-in-out infinite; }
@keyframes pz-bob { 50% { transform: translateY(-6px) rotate(-6deg); } }
.pz-empty { text-align: center; }
.pz-empty-icon { font-size: 40px; display: block; }
.pz-list { display: flex; flex-direction: column; gap: 18px; }
.pz-card { --pz-accent: var(--pop-2); position: relative; border-radius: 18px; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow); }
#content.is-entering .pz-card { animation: rca-enter 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
.pz-card.kind-contest { --pz-accent: var(--pop-4); }
.pz-card-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 18px 20px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pz-accent) 18%, var(--surface-1)), var(--surface-1) 70%);
  border-bottom: 1px solid var(--border); }
.pz-card-title { flex: 1 1 320px; min-width: 0; }
.pz-card-title h2 { font-size: 21px; margin: 6px 0 2px; font-weight: 800; }
.pz-card-title p { margin: 0; color: var(--text-secondary); }
.pz-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pz-kind { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; background: var(--pz-accent); color: #fff; }
.pz-card.kind-contest .pz-kind { color: #2b1d00; }
.pz-status { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: var(--surface-3); color: var(--text-secondary); }
.pz-status.status-running { background: color-mix(in srgb, var(--good) 16%, var(--surface-1)); color: var(--good-text); }
.pz-status.status-running::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); margin-right: 6px; vertical-align: 1px; animation: pz-live 1.6s ease-in-out infinite; }
.pz-status.status-drawing { background: linear-gradient(90deg, #8b5cf6, #e8457c); color: #fff; }
@keyframes pz-live { 50% { opacity: .25; } }
.pz-dates { font-size: 12px; color: var(--text-muted); }
.pz-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pz-clock-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pz-clock-units { display: flex; gap: 6px; }
.pz-clock-unit { display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 6px 6px 4px;
  border-radius: 10px; background: var(--brand-800); color: #fff; }
.pz-clock-unit b { font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pz-clock-unit small { font-size: 9.5px; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
.pz-clock.is-close .pz-clock-unit { background: linear-gradient(160deg, #e8457c, #f2a516); }
.pz-card-body { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 16px 20px; }
.pz-card-body.has-side { grid-template-columns: 1fr auto; }
.pz-how { margin: 0 0 12px; color: var(--text-secondary); }
.pz-how b { color: var(--text-primary); }
.pz-me { display: flex; flex-direction: column; gap: 12px; }
.pz-me-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pz-tickets, .pz-rank { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pz-ticket-icon { font-size: 28px; align-self: center; }
.pz-big { font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--pz-accent), var(--pop-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pz-rank.place-1 .pz-big { background-image: linear-gradient(120deg, #e0a32a, #ffcf5a); }
.pz-tickets-label { font-size: 14px; color: var(--text-secondary); font-weight: 600; }
.pz-me-sub { margin: 0; color: var(--text-secondary); font-size: 13px; }
.pz-odds { position: relative; width: 84px; height: 84px; }
.pz-ring { width: 84px; height: 84px; }
.pz-ring-track { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.pz-ring-fill { fill: none; stroke-width: 9; stroke-linecap: round; animation: pz-ring 1s var(--ease-out) both; }
@keyframes pz-ring { from { stroke-dasharray: 0 999; } }
.pz-odds-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pz-odds-text strong { font-size: 17px; line-height: 1; }
.pz-odds-text small { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.pz-next h3, .pz-top h3, .pz-winners h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted); margin: 0 0 8px; }
.pz-goal { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); margin-bottom: 8px; }
.pz-goal-text { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 6px; }
.pz-goal-text b { color: var(--pz-accent); font-weight: 900; }
.pz-goal-track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pz-goal-fill { display: block; height: 100%; border-radius: 999px; transform-origin: left; animation: rca-grow 900ms var(--ease-out) both;
  background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35)) !important; }
.pz-goal.is-met small { color: var(--text-muted); font-size: 12px; }
.pz-gap { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--pop-4) 14%, var(--surface-1)); }
.pz-gap.is-good { background: color-mix(in srgb, var(--good) 13%, var(--surface-1)); }
.pz-top-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.pz-top-row:last-child { border-bottom: 0; }
.pz-top-rank { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--surface-3); }
.pz-top-row.place-1 .pz-top-rank { background: var(--gold); color: #3a2600; }
.pz-top-row.place-2 .pz-top-rank { background: var(--silver); color: #fff; }
.pz-top-row.place-3 .pz-top-rank { background: var(--bronze); color: #fff; }
.pz-top-name { flex: 1; font-weight: 600; }
.pz-side { display: flex; align-items: flex-start; }
.pz-wheel { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pz-wheel small { color: var(--text-muted); font-size: 12px; }
.pz-prizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 0 20px 20px; }
.pz-prize { margin: 0; border-radius: 14px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.pz-prize:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 14px 30px rgba(20,24,60,.16); }
.pz-prize-pic { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, color-mix(in srgb, var(--pz-accent) 20%, var(--surface-1)), var(--surface-2));
  display: grid; place-items: center; overflow: hidden; }
.pz-prize-pic img { width: 100%; height: 100%; object-fit: cover; }
.pz-prize-noimg { font-size: 48px; }
.pz-ribbon { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; font-weight: 900; font-size: 12px;
  background: var(--surface-1); color: var(--text-primary); box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.pz-prize.place-1 .pz-ribbon { background: linear-gradient(135deg, #ffe08a, #e0a32a); color: #3a2600; }
.pz-prize.place-2 .pz-ribbon { background: linear-gradient(135deg, #f1f4f7, #9aa3ad); color: #1d242b; }
.pz-prize.place-3 .pz-ribbon { background: linear-gradient(135deg, #f3c39c, #c07a45); color: #2e1606; }
.pz-shine { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 700ms ease; }
.pz-prize:hover .pz-shine { transform: translateX(120%); }
.pz-prize figcaption { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.pz-prize figcaption span { font-size: 12.5px; color: var(--text-secondary); }
.pz-winners { padding: 16px 20px 0; }
.pz-podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pz-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px; min-width: 130px;
  border-radius: 16px; background: var(--surface-2); text-align: center; animation: rw-reveal 520ms cubic-bezier(.2, 1.3, .4, 1) both; }
.pz-step.place-1 { order: 2; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 26%, var(--surface-1)), var(--surface-2)); padding-top: 22px; }
.pz-step.place-2 { order: 1; }
.pz-step.place-3 { order: 3; }
.pz-step.place-4 { order: 4; }
.pz-step.is-me { box-shadow: 0 0 0 3px var(--pop-3); }
.pz-step small { color: var(--text-secondary); font-size: 12px; }
.pz-step-medal { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; background: var(--surface-3); }
.pz-step.place-1 .pz-step-medal { background: linear-gradient(135deg, #ffe08a, #e0a32a); color: #3a2600; }
.pz-step.place-2 .pz-step-medal { background: linear-gradient(135deg, #f1f4f7, #9aa3ad); color: #1d242b; }
.pz-step.place-3 .pz-step-medal { background: linear-gradient(135deg, #f3c39c, #c07a45); color: #2e1606; }
@media (max-width: 760px) {
  .pz-card-body.has-side { grid-template-columns: 1fr; }
  .pz-side { justify-content: center; }
  .pz-clock { align-items: flex-start; }
  .pz-big { font-size: 38px; }
}

/* less motion, when asked */
@media (prefers-reduced-motion: reduce) {
  #content.is-entering > *, .pz-card, .lb-bar, .pz-goal-fill, .pz-ring-fill, .pz-step, .rw-panel, .rw-reveal,
  .pf-dialog, .pf-backdrop, .rw-overlay { animation: none !important; }
  .rw-rays, .pz-hero-gift, .rw-mini.is-drifting .rw-mini-spin, .pz-status.status-running::before { animation: none !important; }
  .pz-prize:hover, .contest-card:hover, .pf-option:hover { transform: none; }
}
/* a table that follows something else in a card keeps its own room */
.admin-card-body > * + .table-wrap { margin-top: 12px; }
.rw-stage { padding-bottom: 8px; }
.rw-reveal { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: max-content; max-width: min(92vw, 640px); z-index: 3; }
@keyframes rw-reveal { from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.8); } to { opacity: 1; transform: translateX(-50%); } }
.pz-step { animation-name: pz-step; }
@keyframes pz-step { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.rw-overlay.is-revealed .rw-canvas { filter: saturate(.75) brightness(.8); transition: filter 600ms ease; }
.rw-count span { display: grid; place-items: center; width: 27%; aspect-ratio: 1; border-radius: 50%;
  font-size: clamp(34px, 6vw, 64px); background: radial-gradient(circle at 35% 30%, #ff7aa8, #e8457c 60%, #b8235a);
  box-shadow: 0 0 0 5px #fff, 0 10px 30px rgba(0,0,0,.45); }
.rw-count span.is-wide { width: auto; aspect-ratio: auto; padding: 10px 22px; border-radius: 999px; font-size: clamp(22px, 3.4vw, 34px); }
.btn-spin { white-space: nowrap; }
.new-person-box { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border-strong); }
.new-person-box[hidden] { display: none; }
.check-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }

/* ---------------------------------------------- the wheel, live in a page */
.rw-live { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.rw-live-wheel { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; margin-top: 14px;
  filter: drop-shadow(0 16px 28px rgba(20, 16, 60, .25)); }
.rw-live-canvas { display: block; width: 100%; height: 100%; }
.rw-live .rw-pointer { top: -16px; }
.rw-live .rw-count span { font-size: clamp(30px, 5vw, 56px); }
.rw-live .rw-count span.is-wide { font-size: clamp(18px, 2.6vw, 28px); }
.rw-live .rw-reveal { bottom: 6%; padding: 12px 18px 12px 12px; gap: 12px; max-width: 94%; }
.rw-live .rw-winner-name { font-size: clamp(19px, 2.4vw, 26px); }
.rw-live .rw-prize-img { width: 64px; height: 64px; }
.rw-live.is-revealed .rw-live-canvas { filter: saturate(.7) brightness(.85); transition: filter 500ms ease; }
.rw-live-ticker { min-height: 26px; font-size: 16px; font-weight: 800; text-align: center; color: var(--text-secondary); }
.rw-live.is-spinning .rw-live-ticker { color: var(--pop-2); font-size: 19px; }
.rw-live.is-me .rw-reveal { background: linear-gradient(135deg, #fff5d6, #ffe0ef); }
.rw-live .rw-confetti { z-index: 4; }

/* agent side: the raffle on the left half, the wheel on the right */
.pz-card-body.has-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 26px; }
.pz-side { justify-content: center; }
.pz-wheel { width: 100%; }
.pz-wheel-note { text-align: center; max-width: 420px; }
.pz-winners-wrap { padding-bottom: 4px; }
.pz-drawn h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 0 0 8px; }
.pz-drawn ol, .draw-drawn ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 340px; overflow: auto; }
.pz-drawn li, .draw-drawn li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px;
  background: var(--surface-2); animation: pz-step 420ms var(--ease-out) both; }
.pz-drawn li.is-me { box-shadow: inset 0 0 0 2px var(--pop-3); }
.pz-drawn-place { min-width: 42px; text-align: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 900;
  background: var(--surface-3); color: var(--text-primary); }
li.place-1 .pz-drawn-place, .draw-drawn li:nth-child(1) .pz-drawn-place { background: linear-gradient(135deg, #ffe08a, #e0a32a); color: #3a2600; }
li.place-2 .pz-drawn-place, .draw-drawn li:nth-child(2) .pz-drawn-place { background: linear-gradient(135deg, #f1f4f7, #9aa3ad); color: #1d242b; }
li.place-3 .pz-drawn-place, .draw-drawn li:nth-child(3) .pz-drawn-place { background: linear-gradient(135deg, #f3c39c, #c07a45); color: #2e1606; }
.pz-drawn li strong, .draw-drawn li strong { flex: 1; min-width: 0; }
.pz-drawn-prize { font-size: 12.5px; color: var(--text-secondary); text-align: right; }

/* the LIVE tag on the Prizes tab while a draw is on */
.view-tab-live { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  background: #e8457c; color: #fff; animation: pz-live 1.2s ease-in-out infinite; }
.view-tab.is-active .view-tab-live { background: #fff; color: #e8457c; }

/* manager side: the tickets and the wheel side by side */
.draw-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.draw-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.draw-right { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.draw-right .admin-help { text-align: center; max-width: 380px; }
.admin-card-body .draw-left .table-wrap { margin: 0; width: 100%; border: 1px solid var(--border); border-radius: 10px; }
.draw-table { max-height: 460px; overflow: auto; }
.draw-drawn h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 0 0 8px; }
tr.is-won td { opacity: .6; }
.won-pill { background: linear-gradient(135deg, #ffe08a, #e0a32a); color: #3a2600; border: 0; }

@media (max-width: 980px) {
  .pz-card-body.has-side, .draw-split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .view-tab-live, .pz-drawn li, .draw-drawn li { animation: none !important; }
}
.action-row .task-badge, .action-row .btn { white-space: nowrap; }
.pz-main .pz-drawn { margin-top: 14px; }
.pz-winners-wrap { padding: 16px 20px 0; }
.pz-winners-wrap .pz-drawn ol { max-height: 300px; }

/* ---------------- Prizes tab: winners as podium cards, evener layout ---- */
.pz-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr)); gap: 18px; align-items: stretch; }
.pz-card { display: flex; flex-direction: column; }
.pz-card.kind-raffle { grid-column: 1 / -1; }
.pz-card-body { flex: 1; }
.pz-prizes { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pz-prizes:has(> :only-child) { grid-template-columns: minmax(190px, 340px); }

.pz-me.has-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; align-items: start; }
.pz-me.has-top > .pz-top { grid-column: 2; grid-row: 1 / span 4; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.pz-me.has-top > :not(.pz-top) { grid-column: 1; }
@media (max-width: 760px) {
  .pz-me.has-top { grid-template-columns: 1fr; }
  .pz-me.has-top > .pz-top { grid-column: 1; grid-row: auto; }
}

.pz-drawn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pz-main .pz-drawn-grid { max-height: 560px; overflow: auto; padding: 4px; margin: -4px; }
.pz-win { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 10px 12px;
  text-align: center; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border);
  animation: pz-step 460ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
.pz-win.place-1 { border-color: #d4a72c; background: color-mix(in srgb, #d4a72c 14%, var(--surface-1));
  box-shadow: 0 8px 22px color-mix(in srgb, #d4a72c 22%, transparent); }
.pz-win.place-2 { border-color: #9aa3ad; background: color-mix(in srgb, #9aa3ad 10%, var(--surface-1)); }
.pz-win.place-3 { border-color: #b8794a; background: color-mix(in srgb, #b8794a 10%, var(--surface-1)); }
.pz-win.is-me { box-shadow: 0 0 0 3px var(--pop-3), 0 8px 22px color-mix(in srgb, var(--pop-3) 25%, transparent); }
.pz-win-rank { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.pz-win.place-1 .pz-win-rank { color: #9a6d00; }
.pz-win-face { margin: 2px 0; }
.pz-win.place-1 .pz-win-face { box-shadow: 0 0 0 3px #ffd166, 0 4px 10px rgba(0,0,0,.15); }
.pz-win-name { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.pz-win-you { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--pop-3); }
.pz-win-value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pz-win-prize { font-size: 12.5px; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .pz-win { animation: none !important; } }
.pz-prize-pic { aspect-ratio: auto; height: 170px; }
.pz-prizes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pz-winners-wrap { padding: 16px 20px 6px; }
.pz-winners-wrap + .pz-card-body { border-top: 1px solid var(--border); margin-top: 10px; }