/* Dax Tooling dark theme — see AGENTS.md. Every colour is a variable; nothing hard-codes a hex
   outside this file. Layout is flexbox throughout, never grid. */
@import url("https://fonts.googleapis.com/css2?family=Jura:wght@400;500;600;700&display=swap");

:root {
    --bg-primary-color: #000000;
    --bg-secondary-color: #080E10;
    --fg-primary-color: #18242B;
    --filterbar-color: #0D161A;
    --font-primary-color: #FFFFFFE5;
    --font-secondary-color: #6FBDCCCC;
    --font-terciary-color: #ccc36f;
    --font-muted: #ffffff85;
    --danger-color: #f87171;
    --separator: rgba(255, 255, 255, 0.08);
    --separator-strong: rgba(255, 255, 255, 0.2);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg-primary-color);
    color: var(--font-primary-color);
    font-family: "Jura", scifi, system-ui, sans-serif;
    font-size: 15px;
}

a { color: var(--font-secondary-color); text-decoration: none; }
a:hover { color: var(--font-primary-color); }

/* ── Chrome ───────────────────────────────────────────────────────────────── */

.nav-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 20px;
    background: var(--bg-secondary-color);
    border-bottom: 1px solid var(--separator);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--font-secondary-color);
}

.nav-link {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    user-select: none;
}
.nav-link.is-active { color: var(--font-primary-color); border-bottom-color: var(--font-secondary-color); }

.nav-spacer { flex: 1; }

.nav-meta { font-size: 0.72rem; color: var(--font-muted); letter-spacing: 0.04em; }
.nav-version { font-size: 0.68rem; color: var(--font-secondary-color); letter-spacing: 0.06em; opacity: 0.8; }

/* Desk pages are introspection documents, not wall boards: a centred container with margins,
   so the content holds a readable measure on a wide monitor instead of smearing across it. */
.page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px 28px 48px;
}

.section-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--font-muted);
    margin: 6px 0 0;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
    background: var(--bg-secondary-color);
    border: 1px solid var(--separator);
    border-radius: 8px;
    padding: 16px 18px;
}

.card-row { display: flex; flex-wrap: wrap; gap: 14px; align-content: flex-start; }

.card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.card-sub { font-size: 0.72rem; color: var(--font-muted); letter-spacing: 0.04em; }

/* ── Stat strip ───────────────────────────────────────────────────────────── */

.stat-strip { display: flex; flex-wrap: wrap; gap: 14px; }

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 132px;
    flex: 1 1 132px;
    background: var(--bg-secondary-color);
    border: 1px solid var(--separator);
    border-radius: 8px;
    padding: 12px 14px;
}

.stat-value { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.15; }
.stat-value.is-accent { color: var(--font-secondary-color); }
.stat-value.is-amber { color: var(--font-terciary-color); }
.stat-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--font-muted); }
.stat-note { font-size: 0.72rem; color: var(--font-muted); }

/* ── Deployment cards ─────────────────────────────────────────────────────── */

.deployment-card { flex: 1 1 300px; min-width: 300px; display: flex; flex-direction: column; gap: 10px; }
.deployment-card-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.deployment-card-stat { display: flex; flex-direction: column; min-width: 74px; }
.deployment-card-stat-value { font-size: 1.15rem; font-weight: 600; }
.deployment-card-stat-label { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--font-muted); }
.deployment-card.is-down { border-color: rgba(248, 113, 113, 0.4); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--font-muted); flex: 0 0 auto; }
.status-dot.is-live { background: var(--font-secondary-color); box-shadow: 0 0 8px var(--font-secondary-color); }
.status-dot.is-idle { background: var(--font-terciary-color); }
.status-dot.is-down { background: var(--danger-color); }

.error-text { color: var(--danger-color); font-size: 0.8rem; }

/* Collect intensity: how many metres are walked per metre of sidewalk. Only shown when a site is
   re-walking (a double-collect contract, or a crew redoing runs) — silence means 1x. */
.collect-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
}
.collect-chip.is-double { color: var(--font-terciary-color); border: 1px solid rgba(204,195,111,0.4); background: rgba(204,195,111,0.1); }
.collect-chip.is-elevated { color: var(--font-muted); border: 1px solid var(--separator); }

/* ── Mix bars ─────────────────────────────────────────────────────────────── */

.mix { display: flex; flex-direction: column; gap: 5px; }
.mix-row { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; }
.mix-label { flex: 0 0 128px; color: var(--font-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-track { flex: 1; height: 8px; background: var(--fg-primary-color); border-radius: 4px; overflow: hidden; }
.mix-fill { height: 100%; background: var(--font-secondary-color); }
.mix-fill.is-unpriced { background: var(--font-terciary-color); }
.mix-value { flex: 0 0 84px; text-align: right; color: var(--font-muted); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

th {
    text-align: left;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--font-muted);
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--separator);
    white-space: nowrap;
}

td { padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); white-space: nowrap; }
tbody tr:hover td { background: var(--fg-primary-color); color: var(--font-secondary-color); }

td.is-num, th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
td.is-muted { color: var(--font-muted); }

/* ── Controls ─────────────────────────────────────────────────────────────── */

.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.btn {
    background: var(--bg-secondary-color);
    color: var(--font-primary-color);
    border: 1px solid var(--separator-strong);
    border-radius: 5px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--font-secondary-color); background: var(--fg-primary-color); }
.btn.is-active { border-color: var(--font-secondary-color); color: var(--font-secondary-color); background: rgba(111, 189, 204, 0.12); }

/* ── Wall board ───────────────────────────────────────────────────────────── */
/* Built for a TV across a room: three numbers big enough to read standing up, four panels, no
   controls. Sizes scale with the viewport so the same page works on a laptop and a 55". */

/* The board owns the viewport: a wall display has no one to scroll it, so every panel has to fit.
   Each row shares the leftover height, and the charts scale into whatever they are given. */
.is-board, .is-board body { height: 100%; overflow: hidden; }
body.is-board { display: flex; flex-direction: column; }

.board {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 14px;
}
/* nowrap is load-bearing: with wrap, the flex LINE takes its height from its tallest item, so a
   card grows to fit its chart and spills over the row below instead of the chart shrinking. */
.board-row { flex: 1; min-height: 0; flex-wrap: nowrap; align-content: stretch; }
.board-row > * { min-height: 0; max-height: 100%; }
.board-row .card { min-height: 0; overflow: hidden; }
.chart-host { flex: 1; min-height: 0; display: flex; position: relative; }

/* Two panels sharing the slot one used to have. The row direction is explicit: .board-split also
   carries .board-half, which lays its children out in a column. */
.board-split.board-half { display: flex; flex-direction: row; gap: 12px; }
.board-split > .card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.donut-host { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.donut { width: auto; height: 100%; max-width: 100%; display: block; }

/* The distribution's headline numbers, above the histogram it summarises. */
.t2t-metrics { display: flex; flex-wrap: wrap; gap: 14px; padding: 2px 0 2px; }
.t2t-metric { display: flex; flex-direction: column; }
.t2t-metric-value { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.t2t-metric-value.is-accent { color: var(--font-secondary-color); }
.t2t-metric-label { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--font-muted); }
.is-board .chart { position: absolute; inset: 0; height: 100%; width: 100%; }
.board-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.board-main { flex: 3 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.board-half { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.board-side { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 14px; }

/* The number tiles size to their content; the dial takes whatever is left. Without this the three
   of them share the column evenly and every one ends up clipped. */
.tile { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.board-side { overflow: hidden; }
.tile-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--font-muted); }
.tile-value {
    font-size: clamp(2rem, 3.6vw, 3.6rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--font-secondary-color);
    font-variant-numeric: tabular-nums;
}
.tile-value.is-amber { color: var(--font-terciary-color); }
.tile.is-small .tile-value { font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.tile-note { font-size: 0.74rem; color: var(--font-muted); }

/* Miles ride under the day's ergs: same tile, smaller figure, so the dial keeps its height. */
.tile-split {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--separator);
}
.tile-split-value { font-size: 1.35rem; font-weight: 600; color: var(--font-primary-color); font-variant-numeric: tabular-nums; }
.tile-split-label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--font-muted); }
.tile-split-rest { margin-left: auto; font-size: 0.7rem; color: var(--font-muted); }

/* Day goal: the figure and its share of goal on one baseline, with the bar reading as a tank
   filling up. Amber until the goal is met, teal after — the colour IS the answer. */
.tile-figure { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tile-pct {
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
    font-weight: 600;
    color: var(--font-terciary-color);
    font-variant-numeric: tabular-nums;
}
.tile-pct.is-hit { color: var(--font-secondary-color); }

.goal-track {
    height: 12px;
    border-radius: 6px;
    background: var(--fg-primary-color);
    border: 1px solid var(--separator);
    overflow: hidden;
}
.goal-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--font-terciary-color);
    transition: width 0.5s ease;
}
.goal-fill.is-hit { background: var(--font-secondary-color); }

/* The dial is a fixed tall shape, so in this wide, short tile its rendered size is set entirely
   by HEIGHT. The label and note ride the tile's empty top corners instead of stacking above and
   below the dial, which hands the dial their two rows of height back. */
.tile.is-gauge { padding: 10px 18px 8px; flex: 1 1 0; min-height: 130px; position: relative; }
.tile.is-gauge .tile-label { position: absolute; top: 12px; left: 18px; }
.tile.is-gauge .tile-note { position: absolute; right: 18px; bottom: 10px; width: 130px; text-align: right; }
#rate-gauge { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* Unlike the charts, a dial is a fixed shape -- it scales to fit rather than stretching. */
.gauge { width: 100%; height: 100%; max-height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
    .goal-fill { transition: none; }
}

.board-sites { display: flex; flex-wrap: wrap; gap: 12px; }
.board-site { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--font-muted); }

/* Legends get long on the operator panel (one entry per person) — keep them from pushing the
   chart off screen. */
.is-board .chart-legend { max-height: 4.6em; overflow-y: auto; }

/* ── Leaderboards ─────────────────────────────────────────────────────────── */
/* A scoreboard, not a table: the podium carries "who's winning", medal colour carries rank, and a
   presence dot carries "still working" -- so almost no words are left to read. */

:root {
    --gold: #ccc36f;
    --silver: #b9c4ca;
    --bronze: #c98f66;
}

.lb-today { flex: 3 1 620px; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.lb-hour { flex: 1 1 280px; min-width: 240px; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.lb-week { flex: 2 1 560px; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.lb-recollects { flex: 1 1 320px; min-width: 260px; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }

.card-sub-inline { margin-left: 10px; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.05em; color: var(--font-muted); text-transform: none; }

/* ── Podium ── */

.podium {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    padding: 6px 8px 0;
}

.podium-slot {
    flex: 1 1 0;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 0;
}

/* The occupant of a pedestal -- the unit that slides when ranks change. */
.podium-person { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }

.podium-name { display: flex; align-items: center; gap: 7px; font-size: 1rem; font-weight: 600; max-width: 100%; }
/* Clip the TEXT, not the row: overflow on the flex row shears the presence dot and its glow. */
.podium-name-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium-ergs { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.podium-stats { font-size: 0.68rem; letter-spacing: 0.06em; color: var(--font-muted); white-space: nowrap; }

/* The pedestal: height is the rank. The medal sits in the block, like a real podium. */
.podium-block {
    width: 100%;
    margin-top: 6px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--separator);
    border-bottom: none;
    background: linear-gradient(rgba(255, 255, 255, 0.05), transparent);
}
.podium-medal { font-size: 1.05rem; font-weight: 700; }

.podium-slot.is-first .podium-block {
    height: clamp(52px, 13vh, 120px);
    border-color: rgba(204, 195, 111, 0.55);
    background: linear-gradient(rgba(204, 195, 111, 0.22), rgba(204, 195, 111, 0.03));
    box-shadow: 0 -2px 24px rgba(204, 195, 111, 0.18);
}
.podium-slot.is-first .podium-name { font-size: 1.2rem; color: var(--gold); }
.podium-slot.is-first .podium-ergs { color: var(--gold); font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
.podium-slot.is-first .podium-medal { color: var(--gold); font-size: 1.4rem; }

.podium-slot.is-second .podium-block {
    height: clamp(34px, 8vh, 76px);
    border-color: rgba(185, 196, 202, 0.4);
    background: linear-gradient(rgba(185, 196, 202, 0.14), transparent);
}
.podium-slot.is-second .podium-medal { color: var(--silver); }
.podium-slot.is-second .podium-ergs { color: var(--silver); }

.podium-slot.is-third .podium-block {
    height: clamp(24px, 5.5vh, 54px);
    border-color: rgba(201, 143, 102, 0.4);
    background: linear-gradient(rgba(201, 143, 102, 0.14), transparent);
}
.podium-slot.is-third .podium-medal { color: var(--bronze); }
.podium-slot.is-third .podium-ergs { color: var(--bronze); }

/* The chase pack: one quiet strip under the podium. */
.chasers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    padding-top: 8px;
    border-top: 1px solid var(--separator);
}
.chaser { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; white-space: nowrap; }
.chaser em { font-style: normal; font-size: 0.7rem; color: var(--font-muted); font-variant-numeric: tabular-nums; }
.chaser strong { font-weight: 600; font-variant-numeric: tabular-nums; }

.leader-flash {
    margin-left: 10px;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── Last hour: the hot hand ── */

.hot-hand { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 8px 0 12px; }
.hot-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hot-name { display: flex; align-items: center; gap: 7px; font-size: 1.05rem; font-weight: 600; }
.hot-ergs { font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.05; color: var(--font-secondary-color); font-variant-numeric: tabular-nums; }
.hot-label { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--font-muted); }

.hour-rest { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 7px; padding-top: 6px; border-top: 1px solid var(--separator); }
.hour-row { display: flex; align-items: center; gap: 9px; font-size: 0.8rem; }
.hour-name { flex: 0 0 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hour-bar { flex: 1 1 auto; height: 7px; background: var(--fg-primary-color); border-radius: 4px; overflow: hidden; }
.hour-bar span { display: block; height: 100%; background: var(--font-secondary-color); opacity: 0.75; }
.hour-value { flex: 0 0 44px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── This week: slim ranked bars ── */

.wk-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 2px; }
.wk-row { display: flex; align-items: center; gap: 10px; min-height: 0; }
.wk-rank { flex: 0 0 20px; text-align: center; font-size: 0.78rem; color: var(--font-muted); font-variant-numeric: tabular-nums; }
.wk-rank.is-first { color: var(--gold); font-weight: 700; }
.wk-rank.is-second { color: var(--silver); font-weight: 700; }
.wk-rank.is-third { color: var(--bronze); font-weight: 700; }
.wk-name { flex: 0 0 148px; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-bar { flex: 1 1 auto; min-width: 40px; height: 8px; background: var(--fg-primary-color); border-radius: 4px; overflow: hidden; }
.wk-bar span { display: block; height: 100%; background: var(--font-secondary-color); opacity: 0.8; }
.wk-bar span.is-first { background: var(--gold); opacity: 1; }
.wk-bar span.is-second { background: var(--silver); opacity: 0.9; }
.wk-bar span.is-third { background: var(--bronze); opacity: 0.9; }
.wk-value { flex: 0 0 58px; text-align: right; font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-meta { flex: 0 0 128px; text-align: right; font-size: 0.68rem; color: var(--font-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Recollects: a plain tally ── */
/* No boxes, no bars: just name, a dotted leader, and an amber count -- the way a scorekeeper would
   pencil it. The worst offender gets the emphasis, everyone else stays quiet. */

.rc-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 2px; }
.rc-list.has-open { justify-content: flex-start; gap: 4px; overflow-y: auto; }
.rc-list.has-open .rc-entry { flex: 0 0 auto; }
.rc-entry { display: flex; flex-direction: column; min-height: 0; }
.rc-row { display: flex; align-items: baseline; gap: 10px; min-height: 0; cursor: pointer; user-select: none; }
.rc-row:hover .rc-name { color: var(--font-secondary-color); }
.rc-caret { flex: 0 0 12px; font-size: 0.66rem; color: var(--font-muted); }
.rc-tickets { display: flex; flex-direction: column; gap: 3px; padding: 5px 4px 8px 22px; }
.rc-ticket { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.76rem; }
.rc-key { color: var(--font-secondary-color); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-type { color: var(--font-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-name { flex: 0 0 auto; font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.rc-leader-line { flex: 1 1 auto; border-bottom: 1px dotted rgba(255, 255, 255, 0.18); transform: translateY(-3px); }
.rc-count { flex: 0 0 auto; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--font-terciary-color); }
.rc-row.is-worst .rc-name { color: var(--font-terciary-color); font-weight: 600; }
.rc-row.is-worst .rc-count { font-size: 1.15rem; }

/* ── Charts ───────────────────────────────────────────────────────────────── */

.chart { width: 100%; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.72rem; color: var(--font-muted); }
.chart-legend-item { display: flex; align-items: center; gap: 6px; }
.chart-swatch { width: 10px; height: 10px; border-radius: 2px; }

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

/* ── Scrollbars ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 22px; height: 22px; }
::-webkit-scrollbar-thumb {
    border: 8px solid transparent;
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #8F9293;
}
::-webkit-scrollbar-track {
    background-color: #202627;
    border-radius: 9999px;
    border: 8px solid transparent;
    background-clip: padding-box;
}

/* ── Home ─────────────────────────────────────────────────────────────────────── */
/* The phone page: the day at a glance in one scrolling column, unlike the TV pages, which must
   never scroll. Tiles share a row where the width allows and stack where it does not, built from
   the same tile parts the board uses. */

.home {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px 44px;
}
.home-tiles { display: flex; flex-wrap: wrap; gap: 14px; }
.home-tile { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
/* Sized by the screen, not the TV's viewport share: a phone deserves the big figure. */
.home-tile .tile-value { font-size: clamp(2rem, 8vw, 2.6rem); }
.home-tile .tile-pct { font-size: clamp(1.1rem, 5vw, 1.5rem); }
.home-gauge { height: 195px; display: flex; align-items: center; justify-content: center; }
.home-chart { display: flex; flex-direction: column; gap: 6px; }

/* On a phone the nav wraps instead of overflowing; the TV pages never reach this width. */
@media (max-width: 760px) {
    .nav-bar { flex-wrap: wrap; row-gap: 6px; column-gap: 16px; padding: 10px 14px; }
}

/* At desk width the phone column would float as a skinny strip, so the page recomposes: the hour
   chart is the hero and the three numbers stand beside it in a slim column -- the board's
   composition, at desk scale. */
@media (min-width: 900px) {
    .home { max-width: 1280px; flex-direction: row; align-items: stretch; }
    .home-tiles { flex: 0 0 300px; flex-direction: column; flex-wrap: nowrap; }
    /* Grow to share the column, never shrink below content -- the chart matches THIS height. */
    .home-tile { flex: 1 1 auto; }
    .home-chart { flex: 1 1 0; min-width: 0; }
    .home-chart-host { flex: 1; min-height: 240px; display: flex; position: relative; }
    .home-chart-host .chart { position: absolute; inset: 0; height: 100%; width: 100%; }
}

/* ── Day drill-down on the wall board ─────────────────────────────────────── */
.day-pill {
    margin-left: 12px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--font-terciary-color);
    border: 1px solid rgba(204, 195, 111, 0.5);
    border-radius: 10px;
    padding: 2px 10px;
    cursor: pointer;
    vertical-align: 2px;
}
.day-pill:hover { color: var(--font-primary-color); border-color: var(--font-terciary-color); }
#day-chart rect[data-bar] { cursor: pointer; }

/* ── Desk pages: Operators / Payouts / Deployments ────────────────────────── */
.page-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.control-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--font-muted); }
.muted-note { font-size: 0.74rem; color: var(--font-muted); }

.page input[type="date"], .page input[type="number"] {
    background: var(--bg-secondary-color);
    color: var(--font-primary-color);
    border: 1px solid var(--separator);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 0.85rem;
    color-scheme: dark;
}

.compare-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.compare-card { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.compare-name { font-size: 1.05rem; font-weight: 600; }
.compare-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.compare-stat { display: flex; flex-direction: column; }
.compare-stat-value { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-stat-label { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--font-muted); }

.row-pick { cursor: pointer; user-select: none; }
.row-pick.is-picked td { background: rgba(111, 189, 204, 0.10); }

.warn-banner {
    border: 1px solid rgba(209, 143, 127, 0.6);
    color: #d18f7f;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
}

/* Payout table hierarchy: POINTS is the number being paid; tickets and the type breakdown are
   supporting evidence and read as such. */
td.pay-muted { color: var(--font-muted); }
td.pay-points { color: var(--font-secondary-color); font-weight: 600; font-size: 0.92rem; }
td.pay-breakdown { color: var(--font-muted); font-size: 0.74rem; white-space: normal; }

.dep-progress { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.dep-progress .goal-track { flex: 1; height: 8px; }

/* ── Loading spinner (day drill-down, report runs) ────────────────────────── */
.spin {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--font-secondary-color);
    border-radius: 50%;
    animation: spin-turn 0.7s linear infinite;
    vertical-align: -1px;
}
@keyframes spin-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ── Stat tiles: a value with its name, reused as strip or grid ───────────── */
.tile-strip { display: flex; flex-wrap: wrap; gap: 14px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-tile.is-strip { flex: 1 1 130px; min-width: 0; padding: 12px 16px; }
.stat-tile.is-strip .stat-tile-value { overflow: hidden; text-overflow: ellipsis; }
.stat-tile-value { font-size: 1.2rem; font-weight: 600; color: var(--font-secondary-color); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-tile-label { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--font-muted); }
.stat-tile-note { font-size: 0.68rem; color: var(--font-muted); }

/* ── Chart rows on desk pages: a wide chart beside a narrow one ───────────── */
.viz-row { display: flex; flex-wrap: wrap; gap: 14px; }
.viz-main { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.viz-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.donut-host-page { display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.donut-host-page .donut { max-height: 230px; width: auto; }

/* ── Operators page: one person's instruments ─────────────────────────────── */
.crew-hero { display: flex; flex-wrap: wrap; gap: 14px; }
.crew-id { flex: 1.4 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.crew-dial { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.crew-gauge { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.crew-gauge .gauge { max-width: 280px; }

.crew-cycle { flex: 1.2 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.crew-row2 { display: flex; flex-wrap: wrap; gap: 14px; }
/* The 2x2 analysis grid: duration, idle gap, T2T and the day chart as EQUAL panels. */
.crew-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.grid-card { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.grid-card.is-wide { flex-basis: 100%; }

/* Minutes-per-erg rows: one type per row, one bar per selected operator on a shared scale. */
.eff-list { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.eff-row { display: flex; gap: 14px; align-items: center; }
.eff-type { flex: 0 0 210px; font-size: 0.8rem; color: var(--font-muted); padding-top: 1px; }
.eff-bars { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eff-line { display: flex; align-items: center; gap: 10px; }
.eff-bar-track { flex: 1; height: 13px; border-radius: 3px; background: var(--fg-primary-color); position: relative; }
.eff-needle { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 1.5px; }
.eff-bar { display: block; height: 100%; position: absolute; top: 0; }
.eff-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.45); }
.eff-val { flex: 0 0 170px; font-size: 0.72rem; color: var(--font-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eff-none { font-size: 0.72rem; color: var(--font-muted); opacity: 0.5; }

/* Work-mix donuts: one composition per operator, side by side on shared type colours. */
.mix-donuts { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-evenly; }
.mix-donut { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mix-donut-name { font-size: 0.86rem; font-weight: 600; }
/* The donut needs a real box: a centred flex column shrinks children to content, and an SVG
   sized in percentages has no content to shrink to. */
.mix-donut .donut-host-page { width: 190px; height: 190px; }
.mix-donut .donut { width: 100%; height: 100%; }

/* The normalize toggle morphs the slices in place rather than swapping the chart. */
.mix-donut circle[data-type-slice] {
    transition: stroke-dasharray 0.7s cubic-bezier(0.22, 0.9, 0.36, 1),
                stroke-dashoffset 0.7s cubic-bezier(0.22, 0.9, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .mix-donut circle[data-type-slice] { transition: none; }
}

/* Work-mix stacks: one 100% bar per operator, type-coloured segments with inline shares. */
.mix-row { display: flex; align-items: center; gap: 12px; }
.mix-name { flex: 0 0 90px; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mix-track { flex: 1; display: flex; height: 24px; border-radius: 4px; overflow: hidden; background: var(--fg-primary-color); }
.mix-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.66rem;
    color: rgba(8, 14, 16, 0.9);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.mix-total { flex: 0 0 70px; font-size: 0.74rem; color: var(--font-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Cycle bars: walk + idle per person on one scale, the reference chart's stacked pair. */
.cycle-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.cycle-row { display: flex; align-items: center; gap: 10px; }
.cycle-name { flex: 0 0 64px; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cycle-track { flex: 1; display: flex; height: 14px; border-radius: 4px; background: var(--fg-primary-color); overflow: hidden; }
.cycle-seg { display: block; height: 100%; }
.cycle-seg.is-dur { background: #6FBDCC; }
.cycle-seg.is-gap { background: #7fd1a5; }
.cycle-label { flex: 0 0 auto; font-size: 0.74rem; color: var(--font-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cycle-legend { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--font-muted); }
.cycle-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.cycle-swatch.is-dur { background: #6FBDCC; margin-left: 8px; }
.cycle-swatch.is-gap { background: #7fd1a5; margin-left: 8px; }
.cycle-legend .cycle-swatch:first-child { margin-left: 0; }
.crew-t2t { flex: 1.4 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* The identity card reads like a character profile: an eyebrow for the scope, a big name set in
   the operator's own colour (the colour does the standing-out -- no bloom), a rule fading out of
   that colour, and the four career totals large underneath. */
.crew-scope { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--font-muted); }
.crew-name {
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.1;
}
.crew-rule { height: 2px; border-radius: 1px; margin: 2px 0 4px; opacity: 0.75; }
.tile-grid { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* Career totals: two per row, sized like trophies rather than telemetry. */
.crew-career { gap: 14px 26px; margin-top: 8px; }
.crew-career .stat-tile { flex: 1 1 38%; }
.crew-career .stat-tile-value { font-size: clamp(1.6rem, 2vw, 2rem); }

/* The service record spreads its tiles across the page's width. */
.record-tiles { margin-top: 8px; gap: 14px; }
.record-tiles .stat-tile { flex: 1 1 130px; }

/* Small-multiple headers on the deployments page's compare facets. */
.facet-title { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; margin: 10px 0 2px; }

/* Headline tiles: few enough to be read across the room. */
.stat-tile.is-big .stat-tile-value { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.stat-tile.is-big .stat-tile-label { font-size: 0.7rem; }

/* ── Login modal — the Dax window: title bar, underline inputs, outlined button ── */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 8, 10, 0.72);
    backdrop-filter: blur(3px);
}
.login-modal-body {
    width: min(440px, 92vw);
    background: var(--bg-secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    box-shadow: 0 0 34px rgba(111, 189, 204, 0.22);
    overflow: hidden;
}
.login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--separator);
}
.login-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
/* Present for likeness with ada-manager's window chrome; its login modal ignores it too. */
.login-close { color: var(--font-muted); font-size: 1.1rem; line-height: 1; }
.login-inner { padding: 20px 24px 24px; }
.login-please {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--font-muted);
    margin-bottom: 18px;
}
.login-modal-body .form-group { margin-bottom: 18px; }
.login-modal-body .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--font-muted);
}
.login-modal-body .form-input {
    width: 100%;
    padding: 6px 2px;
    font-size: 0.95rem;
    color: var(--font-primary-color);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    transition: border-color 0.15s ease-in-out;
}
.login-modal-body .form-input::placeholder { color: var(--font-muted); opacity: 0.7; }
/* Chrome autofill paints its own white field; ada-manager fought this with DOM cloning, but the
   inset-shadow trick keeps the dark ground without a skirmish. */
.login-modal-body .form-input:-webkit-autofill,
.login-modal-body .form-input:-webkit-autofill:hover,
.login-modal-body .form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--font-primary-color);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary-color) inset;
    caret-color: var(--font-primary-color);
}
.login-modal-body .form-input:focus {
    outline: none;
    border-bottom-color: #6FBDCC;
}
.login-modal-body footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}
.login-modal-body footer small {
    color: #e05561;
    border-bottom: 1px solid #e05561;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.login-modal-body #login-btn {
    background: transparent;
    border: 1px solid #6FBDCC;
    color: #6FBDCC;
    padding: 8px 30px;
    border-radius: 4px;
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.login-modal-body #login-btn:hover { background: rgba(111, 189, 204, 0.12); }
.login-modal-body #login-btn:focus { box-shadow: 0 0 0 0.15rem rgba(111, 189, 204, 0.3); outline: none; }
.login-modal-body #login-btn:disabled { opacity: 0.5; cursor: default; }
.login-mode-link {
    background: none;
    border: none;
    color: var(--font-muted);
    font-size: 0.74rem;
    cursor: pointer;
    text-decoration: underline;
}
.login-mode-link:hover { color: var(--font-primary-color); }

.page select {
    background: var(--bg-secondary-color);
    color: var(--font-primary-color);
    border: 1px solid var(--separator);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 0.85rem;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    background: transparent;
    color: var(--font-muted);
    border: 1px solid var(--separator);
    border-radius: 12px;
    padding: 3px 12px;
    font-family: inherit;
    font-size: 0.76rem;
    cursor: pointer;
    user-select: none;
}
.chip:hover { border-color: var(--font-secondary-color); color: var(--font-primary-color); }
.chip.is-on { border-color: var(--font-secondary-color); color: var(--font-secondary-color); background: rgba(111, 189, 204, 0.12); }

.delta-up { font-size: 0.66rem; color: var(--font-secondary-color); }
.delta-down { font-size: 0.66rem; color: #d18f7f; }

/* ── Dotted-leader rows: label ....... value (deployment economics) ───────── */
.lead-list { display: flex; flex-direction: column; gap: 4px; }
.lead-row { display: flex; align-items: baseline; gap: 8px; font-size: 0.8rem; }
.lead-label { color: var(--font-muted); white-space: nowrap; }
.lead-line { flex: 1; border-bottom: 1px dotted rgba(255, 255, 255, 0.16); }
.lead-value { font-variant-numeric: tabular-nums; white-space: nowrap; }

.econ-card { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.econ-headline { display: flex; align-items: baseline; gap: 8px; padding: 4px 0 6px; }
.econ-big { font-size: 2rem; font-weight: 700; color: var(--font-secondary-color); font-variant-numeric: tabular-nums; }
.type-card { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }