/* Admin view: the app's design (app.css, loaded from the app) plus the few things an operator
   view needs. Semantic colours (good / watch / act) are the app's yes / save /
   no tokens, so nothing here adds a hue. */
:root {
  --good: var(--yes-ink);  --good-bg: var(--yes-bg);
  --watch: var(--save-ink); --watch-bg: var(--save-bg);
  --act: var(--no-ink);    --act-bg: var(--no-bg);
}
.pill.admin { background: var(--accent); color: var(--on-accent); }

/* Needs-you list: a severity stripe on each item, worst first. */
.attention { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.attention li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 4px; padding: 10px 14px; }
.attention li.act { border-left-color: var(--act); }
.attention li.watch { border-left-color: var(--watch); }
.attention li.good { border-left-color: var(--good); }
.attention .what { font-weight: 600; color: var(--ink); }
.attention .why { font-size: 13px; color: var(--meta); grid-column: 1; }
.attention .src { font-size: 12px; color: var(--muted); white-space: nowrap; grid-row: 1 / span 2; grid-column: 2; }

.chip { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.watch { background: var(--watch-bg); color: var(--watch); }
.chip.act { background: var(--act-bg); color: var(--act); }
.chip.quiet { background: var(--tint-soft); color: var(--meta); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.kpi { border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; min-width: 0; }
.kpi .k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-size: 24px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.25; }
.kpi .d { font-size: 12px; color: var(--meta); }

.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--meta); font: 11px var(--font); }
.chart .grid { stroke: var(--rule); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--meta); margin: 4px 0 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.spark { vertical-align: middle; }
td a.who { font-weight: 600; color: var(--accent); text-decoration: none; }
td a.who:hover { text-decoration: underline; }
td .sub { font-size: 12px; color: var(--muted); }
.note { font-size: 13px; color: var(--meta); margin: 6px 0 0; }
.twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 28px; }
@media (max-width: 820px) { .twocol { grid-template-columns: minmax(0, 1fr); } }