:root {
  color-scheme: light;
  --surface-1:#fcfcfb; --page:#f9f9f7;
  --ink-1:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,0.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --seq:#2a78d6; --warnbg:#fdf6e7; --warnbd:#eda100;
  /* Angela, issue #17: "light red rather than alarm red" - a caution colour
     for cancellations, distinct from the amber already used for warnings. */
  --dangerbg:#fbeceb; --dangerbd:#c0503f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1:#1a1a19; --page:#0d0d0d;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
    --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,0.10);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --seq:#3987e5; --warnbg:#2a2416; --warnbd:#c98500;
    --dangerbg:#2e1a18; --dangerbd:#e0796a;
  }
}
* { box-sizing:border-box; margin:0; }
body { background:var(--page); color:var(--ink-1);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; padding:20px; }
.wrap { max-width:1100px; margin:0 auto; }
h1 { font-size:20px; font-weight:650; }
h2 { font-size:15px; font-weight:600; margin-bottom:10px; }
.sub { color:var(--ink-2); margin:2px 0 14px; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.filter { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.filter label { font-size:12px; color:var(--ink-2); }
.filter { flex-wrap:wrap; }
.picker { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.picker input[type=date] { font:inherit; padding:4px 6px; border:1px solid var(--grid); border-radius:6px;
  background:var(--surface-1); color:var(--ink-1); }
.picker button { font:inherit; padding:4px 12px; border:1px solid var(--grid); border-radius:6px;
  background:var(--surface-1); color:var(--ink-1); cursor:pointer; }
.picker button:hover { border-color:var(--ink-2); }
.pick-error { font-size:13px; color:var(--warnbd); margin:-8px 0 12px; }
select { background:var(--surface-1); color:var(--ink-1); border:1px solid var(--axis);
  border-radius:8px; padding:6px 10px; font:13px system-ui,-apple-system,"Segoe UI",sans-serif; }
.banner { background:var(--warnbg); border:1px solid var(--warnbd); border-radius:8px;
  padding:10px 14px; margin-bottom:16px; color:var(--ink-1); font-size:13px; }
.banner b { font-weight:650; }
/* #131: how far the figures reach, tucked under the heading's own date line,
   and the notice when they are behind, above everything the view draws. */
.through { color:var(--ink-2); font-size:13px; margin:-10px 0 14px; }
.behind { background:var(--warnbg); border:1px solid var(--warnbd); border-left-width:4px; border-radius:8px;
  padding:10px 14px; margin-bottom:16px; color:var(--ink-1); font-size:13px; }
.behind b { font-weight:650; }
.card { background:var(--surface-1); border:1px solid var(--ring); border-radius:10px;
  padding:16px; margin-bottom:16px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:16px; }
.kpi { background:var(--surface-1); border:1px solid var(--ring); border-radius:10px; padding:12px 14px; container-type:inline-size; }
/* Scales with the card so a full figure with cents always fits on one line. */
.kpi .v { font-size:min(22px, 11cqi); font-weight:650; margin:2px 0; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* A card's second figure, under the first: premium lost under the Cancellations count. */
.kpi .v2 { font-size:min(16px, 8cqi); font-weight:600; margin:0 0 2px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kpi .l { font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi .n { font-size:11px; color:var(--ink-3); }
.kpi-danger { background:var(--dangerbg); border-color:var(--dangerbd); }
.kpi-danger .v { color:var(--dangerbd); }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-bottom:8px; }
.legend span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:3px;
  margin-right:5px; background:var(--c); vertical-align:-1px; }
/* Last year (#98): a dashed stroke swatch, matching the dashed line it names. */
.legend span.dash::before { height:0; width:14px; border-radius:0; background:none;
  border-top:2px dashed var(--c); vertical-align:3px; }
svg text { font:11px system-ui,-apple-system,"Segoe UI",sans-serif; fill:var(--ink-3); }
svg .val { fill:var(--ink-2); font-variant-numeric:tabular-nums; }
svg .cat { fill:var(--ink-1); font-size:12px; }
.bar-row { cursor:pointer; }
.bar-row:hover rect.data { opacity:.85; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--ink-2); font-weight:600; border-bottom:1px solid var(--axis); padding:6px 8px; }
td { padding:6px 8px; border-bottom:1px solid var(--grid); font-variant-numeric:tabular-nums; }
td.r, th.r { text-align:right; }
/* A date and time reads as one value; wrapped, every row grew to three lines. */
.nowrap { white-space:nowrap; }
/* The office People table: ten columns since endorsements joined it (walkthrough,
   3 Oct 2026). A size smaller, and headers centred over their columns. */
table.people { font-size:12px; }
table.people th { text-align:center; vertical-align:bottom; }
/* Every heading sorts the table (#136). A real button, so it takes the keyboard.
   Each carries a faint up-down mark under its name so it reads as sortable before
   it is clicked; the sorted one carries a solid arrow in the accent colour. The
   mark sits on its own line so the columns are no wider for it. */
table.people th button.sort { all:unset; display:inline-block; cursor:pointer; }
table.people th button.sort:hover { color:var(--s1); }
table.people th button.sort:focus-visible { outline:2px solid var(--s1); outline-offset:2px; }
table.people th button.sort::after { content:"\2195"; display:block; font-size:10px; line-height:1.2; opacity:.45; }
table.people th[aria-sort="descending"] button.sort::after { content:"\25BC"; font-size:8px; line-height:1.5; opacity:1; color:var(--s1); }
table.people th[aria-sort="ascending"] button.sort::after { content:"\25B2"; font-size:8px; line-height:1.5; opacity:1; color:var(--s1); }
tr.click { cursor:pointer; } tr.click:hover { background:var(--grid); }
details { margin-top:10px; } summary { cursor:pointer; color:var(--ink-2); font-size:12px; }
.crumb { margin-bottom:12px; font-size:13px; }
.crumb a { color:var(--s1); cursor:pointer; text-decoration:none; }
.crumb a:hover { text-decoration:underline; }
#tip { position:fixed; pointer-events:none; background:var(--surface-1); border:1px solid var(--ring);
  border-radius:8px; padding:8px 10px; font-size:12px; box-shadow:0 2px 10px rgba(0,0,0,.15);
  display:none; z-index:10; max-width:260px; }
#tip b { display:block; margin-bottom:2px; }
.note { font-size:12px; color:var(--ink-3); margin-top:8px; }
.defs li { margin-bottom:6px; color:var(--ink-2); font-size:13px; }
.chartbox { overflow-x:auto; }
/* Replacements for inline style attributes, which the Content Security Policy
   does not permit. Behaviour is identical to the standalone page. */
.note-gap { margin-bottom: 16px; }
a.drill { color: var(--s1); cursor: pointer; }
tr.total td { font-weight:650; border-top:1px solid var(--axis); }
.scroll { overflow-x:auto; }
table.compare td.lead { font-weight:700; color:var(--s1); }

/* Months an office is actually compared over, when last year does not cover the
   whole period. Sits beside the office name in the year-over-year table. */
.flag { font-size: 11px; color: var(--muted); }

/* The administrator's Raw Data screen (local only, walkthrough 3 Oct 2026). */
.raw-lede { color:var(--ink-2); margin:4px 0 12px; }
.raw-tabs { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }
.raw-tabs a { padding:4px 10px; border:1px solid var(--grid); border-radius:6px; color:var(--ink-2); text-decoration:none; font-size:13px; }
.raw-tabs a.on { color:var(--ink-1); border-color:var(--ink-2); font-weight:600; }
.raw-search { display:flex; gap:6px; margin:10px 0; }
.raw-search input[type=search] { flex:1; max-width:360px; }
.raw-count { color:var(--ink-2); font-size:13px; }
table.raw { font-size:12px; }
table.raw th a { color:inherit; text-decoration:none; white-space:nowrap; }
table.raw td { white-space:nowrap; }

/* User admin (Users and Invitations tabs, invite form). Reuses .btn from auth.css,
   which is full width there, so it is narrowed inside .admin. */
.admin { max-width:960px; margin:0 auto; }
.admin h1 { font-size:20px; font-weight:650; margin:0 0 12px; }
.admin .btn { width:auto; display:inline-block; text-decoration:none; padding:8px 14px; }
.tabs { display:flex; gap:4px; margin:12px 0; border-bottom:1px solid var(--grid); }
.tab { padding:6px 12px; color:var(--ink-2); text-decoration:none; font-size:13px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab-current { color:var(--ink-1); font-weight:600; border-bottom-color:var(--s1); }
.admin .action, .admin button.action { background:none; border:1px solid var(--grid); border-radius:6px; color:var(--ink-1); padding:3px 10px; font:inherit; font-size:12px; cursor:pointer; text-decoration:none; display:inline-block; }
.admin .action:hover { border-color:var(--ink-2); }
.admin form.button_to { display:inline; }
/* Confirmations (Disable, Archive, Revoke invitation), on their own page and in
   the list's dialog (#121): two buttons side by side, a tenth smaller than the
   page's others, Cancel in red. */
.confirm-actions { display:flex; gap:10px; align-items:center; margin-top:14px; }
.admin .confirm .btn { font-size:12.5px; padding:7px 13px; }
.admin .confirm .btn-cancel { background:var(--dangerbd); }
/* margin:auto is the browser's own centring for a dialog; the page reset zeroes it. */
dialog.confirm-modal { margin:auto; border:1px solid var(--grid); border-radius:12px; padding:0; max-width:460px;
  background:var(--surface-1); color:var(--ink-1); }
/* The padding is on the confirmation, not the dialog: a click on the dialog
   element itself means a click outside the box, and closes it. */
dialog.confirm-modal .confirm { padding:20px 22px; }
dialog.confirm-modal p { margin:0; }
dialog.confirm-modal::backdrop { background:rgba(0,0,0,.4); }
dialog.confirm-modal h1 { font-size:18px; }
.admin details { margin-top:20px; }
.admin summary { cursor:pointer; color:var(--ink-2); margin-bottom:8px; }
.invite-form { max-width:420px; margin-top:12px; }
.invite-form fieldset { border:1px solid var(--grid); border-radius:8px; margin:0 0 14px; padding:8px 12px; }
.invite-form legend { font-size:12px; color:var(--ink-2); padding:0 4px; }
.invite-form fieldset label { display:block; padding:3px 0; }
.invite-form fieldset[hidden] { display:none; }