@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/static/fonts/DMSans-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('/static/fonts/Fraunces-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* The Truly command centre. Truly palette (brand v1.1): Dark Teal #00465C for structure, Truly Green #00A85E for
   what is live, Pink #EE4561 only for a real problem, Yellow #F3B927 for a warning, Cool Grey #57595C for body copy.
   One calm column of cards; numbers in tabular figures; no colour carries meaning on its own (every tone has words). */
:root {
  --bg: #F4F8F7;
  --surface: #FFFFFF;
  --ink: #0E3440;
  --body: #57595C;
  --muted: #5F6E73;
  --line: #D9E5E4;
  --teal: #00465C;
  --green: #00A85E;
  --green-ink: #00663A;
  --mid: #73BEBE;
  --cyan: #B4F3F3;
  --pink: #EE4561;
  --yellow: #F3B927;
  --bad-bg: #FBE4E4; --bad-ink: #B3263D;
  --warn-bg: #FDF4CC; --warn-ink: #7A5600;
  --good-bg: #DDF3E8; --good-ink: #00663A;
  --quiet-bg: #EBF0F0;
  --focus: #00804A;
  --control-line: #7E9095;
  --logo: #00465C;
  --display: 'Canela', 'Fraunces', 'DM Serif Display', Georgia, serif;
  --sans: 'Athletics', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1D23; --surface: #0F2A32; --ink: #E6F3F2; --body: #C3D0D1; --muted: #9DB1B5; --line: #1F3E47;
    --teal: #73BEBE; --green: #2FC07F; --green-ink: #8FE0B5; --mid: #3E8C8C; --cyan: #245F6B; --pink: #F2677D; --yellow: #F3B927;
    --bad-bg: #3A1820; --bad-ink: #FFB3BF; --warn-bg: #33290B; --warn-ink: #F7D37A; --good-bg: #0F3324; --good-ink: #8FE0B5;
    --quiet-bg: #16333B; --focus: #2FC07F; --control-line: #557680; --logo: #B4F3F3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1D23; --surface: #0F2A32; --ink: #E6F3F2; --body: #C3D0D1; --muted: #9DB1B5; --line: #1F3E47;
  --teal: #73BEBE; --green: #2FC07F; --green-ink: #8FE0B5; --mid: #3E8C8C; --cyan: #245F6B; --pink: #F2677D; --yellow: #F3B927;
  --bad-bg: #3A1820; --bad-ink: #FFB3BF; --warn-bg: #33290B; --warn-ink: #F7D37A; --good-bg: #0F3324; --good-ink: #8FE0B5;
  --quiet-bg: #16333B; --focus: #2FC07F; --control-line: #557680; --logo: #B4F3F3;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 15px; line-height: 1.5; font-weight: 400; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; padding-block: 18px 64px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
main { min-width: 0; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
h1, h2, h3 { font-family: var(--display); font-weight: 300; color: var(--ink); line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 5.5vw, 44px); }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { margin: 0; }
a { color: var(--teal); }
button, select, input { font: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num, .tnum, td, th { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.skip-link { position: absolute; left: -9999px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.mt { margin-top: 12px; }
.nowrap { white-space: nowrap; }
.dim { opacity: .55; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand span { font-family: var(--display); font-size: 20px; font-weight: 300; padding-left: 12px; border-left: 1px solid var(--line); }
.wordmark { width: 64px; height: auto; display: block; }
.wordmark path { fill: var(--logo); }
.nav { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; font-size: 14px; }
.nav a { color: var(--body); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); font-weight: 500; }
.nav form { display: inline; margin: 0; }
.nav button { background: none; border: 1px solid var(--control-line); color: var(--body); border-radius: 999px; padding: 3px 12px; cursor: pointer; font-size: 13px; }
.who-am-i { color: var(--muted); font-size: 13px; }
.nav-main { border-bottom: 1px solid var(--line); padding-bottom: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.nav-main a { white-space: nowrap; }
.foot { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 14px; }
.foot a { color: var(--muted); }

/* hero */
.hero { display: grid; gap: 8px; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.lede { max-width: 70ch; }
.stamp { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 12px; border-radius: 999px; text-decoration: none; font-weight: 500; }
.stamp i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.stamp.good { background: var(--good-bg); color: var(--good-ink); } .stamp.good i { background: var(--green); }
.stamp.warn { background: var(--warn-bg); color: var(--warn-ink); } .stamp.warn i { background: var(--yellow); }
.stamp.bad { background: var(--bad-bg); color: var(--bad-ink); } .stamp.bad i { background: var(--pink); }
.summary-line { color: var(--muted); font-size: 14px; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; }
.card > * + * { margin-top: 12px; }
.card h2 + p, .card h3 + p { margin-top: 6px; }
.narrow { max-width: 520px; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* a vital sign */
.signs { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sign { display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--line); }
.sign > * + * { margin-top: 0; }
.sign.live { border-top-color: var(--green); }
.sign.partial { border-top-color: var(--mid); }
.sign.not_yet { border-top-color: var(--line); background: transparent; border-style: dashed; border-top-style: solid; }
.sign-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.sign-head h3 { display: flex; gap: 10px; align-items: baseline; }
.sign-no { font-family: var(--sans); font-size: 13px; color: var(--muted); font-weight: 500; min-width: 1.6em; }
.sign-q { color: var(--muted); font-size: 14px; }
.chip { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.chip.live { background: var(--good-bg); color: var(--good-ink); }
.chip.partial { background: var(--quiet-bg); color: var(--ink); }
.chip.not_yet { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.chip.fresh { background: var(--good-bg); color: var(--good-ink); }
.chip.stale { background: var(--warn-bg); color: var(--warn-ink); }
.chip.failed, .chip.missing { background: var(--bad-bg); color: var(--bad-ink); }
.sign-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; font-size: 13px; color: var(--muted); }
.sign-foot a { font-weight: 500; text-decoration: none; }
.gap { font-size: 13px; color: var(--muted); }
.gap b { color: var(--body); font-weight: 500; }
.problem { font-size: 13px; background: var(--warn-bg); color: var(--warn-ink); padding: 8px 10px; border-radius: 8px; }
.problem.bad { background: var(--bad-bg); color: var(--bad-ink); }
.notes { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.facts { display: grid; gap: 6px; margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* the small table in a sign */
.mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.mini th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 0 8px 6px 0; vertical-align: bottom; }
.mini td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
.mini td.lab { color: var(--body); width: 26%; }
.mini .v { display: block; color: var(--ink); font-size: 18px; font-weight: 400; line-height: 1.2; }
.mini .s { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.mini .tone-warn .v, .tone-warn .v { color: var(--warn-ink); }
.mini .tone-bad .v, .tone-bad .v { color: var(--bad-ink); }
.tone-text-bad { color: var(--bad-ink); } .tone-text-warn { color: var(--warn-ink); } .tone-text-good { color: var(--good-ink); }

/* group strip */
.strip { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.co { display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--line); }
.co > * + * { margin-top: 0; }
.co.live { border-top-color: var(--green); }
.co.not_yet { background: transparent; border-style: dashed; border-top-style: solid; }
.co .sub { font-size: 13px; color: var(--muted); }
.co .facts div { font-size: 13px; }

/* data tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 7px 10px 7px 0; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
table.data th { font-weight: 500; color: var(--muted); font-size: 12px; border-top: 0; vertical-align: bottom; }
table.data th:first-child, table.data td:first-child { text-align: left; white-space: normal; min-width: 130px; }
table.data td.left, table.data th.left { text-align: left; }
table.data tr.total td { font-weight: 500; color: var(--ink); border-top: 2px solid var(--line); }
table.data td.running, table.data th.running { background: var(--quiet-bg); }
table.data td.na { color: var(--muted); }
table.data.compact td, table.data.compact th { padding-block: 5px; }
.sub-row td { color: var(--muted); font-size: 12px; border-top: 0; padding-top: 0; }
.tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }
.note { font-size: 13px; color: var(--muted); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi { border-top: 1px solid var(--line); padding-top: 8px; }
.kpi .k { font-size: 12px; color: var(--muted); }
.kpi .v { font-size: 24px; color: var(--ink); font-family: var(--display); font-weight: 300; line-height: 1.2; }
.kpi .s { font-size: 12px; color: var(--muted); }
dl.defs { display: grid; gap: 14px; margin: 0; }
dl.defs dt { color: var(--ink); font-weight: 500; }
dl.defs dd { margin: 4px 0 0; }

/* charts (server-drawn SVG, see charts.py) */
.chart { width: 100%; height: 190px; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
.chart .bar { fill: var(--teal); }
.chart .bar:hover { fill: var(--green); }
.chart .bar-now { fill: var(--mid); }
.chart .bar-zero { fill: var(--line); }
.chart .bar-unknown { fill: var(--quiet-bg); stroke: var(--line); stroke-dasharray: 3 3; }
.legend .l-unknown { background: var(--quiet-bg); border: 1px dashed var(--control-line); }
.chart .zero { stroke: var(--teal); stroke-width: 1.2; }
.chart .bar-net { fill: var(--green); }
.chart .bar-net.neg, .chart .bar.neg { fill: var(--pink); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legend .l-income { background: var(--teal); } .legend .l-net { background: var(--green); } .legend .l-now { background: var(--mid); }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hbars li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.hb-track { background: var(--quiet-bg); height: 8px; border-radius: 4px; overflow: hidden; }
.hb-fill { display: block; height: 100%; background: var(--teal); }
.hb-val { font-variant-numeric: tabular-nums; color: var(--ink); }
.w1 { width: 1%; }
.w2 { width: 2%; }
.w3 { width: 3%; }
.w4 { width: 4%; }
.w5 { width: 5%; }
.w6 { width: 6%; }
.w7 { width: 7%; }
.w8 { width: 8%; }
.w9 { width: 9%; }
.w10 { width: 10%; }
.w11 { width: 11%; }
.w12 { width: 12%; }
.w13 { width: 13%; }
.w14 { width: 14%; }
.w15 { width: 15%; }
.w16 { width: 16%; }
.w17 { width: 17%; }
.w18 { width: 18%; }
.w19 { width: 19%; }
.w20 { width: 20%; }
.w21 { width: 21%; }
.w22 { width: 22%; }
.w23 { width: 23%; }
.w24 { width: 24%; }
.w25 { width: 25%; }
.w26 { width: 26%; }
.w27 { width: 27%; }
.w28 { width: 28%; }
.w29 { width: 29%; }
.w30 { width: 30%; }
.w31 { width: 31%; }
.w32 { width: 32%; }
.w33 { width: 33%; }
.w34 { width: 34%; }
.w35 { width: 35%; }
.w36 { width: 36%; }
.w37 { width: 37%; }
.w38 { width: 38%; }
.w39 { width: 39%; }
.w40 { width: 40%; }
.w41 { width: 41%; }
.w42 { width: 42%; }
.w43 { width: 43%; }
.w44 { width: 44%; }
.w45 { width: 45%; }
.w46 { width: 46%; }
.w47 { width: 47%; }
.w48 { width: 48%; }
.w49 { width: 49%; }
.w50 { width: 50%; }
.w51 { width: 51%; }
.w52 { width: 52%; }
.w53 { width: 53%; }
.w54 { width: 54%; }
.w55 { width: 55%; }
.w56 { width: 56%; }
.w57 { width: 57%; }
.w58 { width: 58%; }
.w59 { width: 59%; }
.w60 { width: 60%; }
.w61 { width: 61%; }
.w62 { width: 62%; }
.w63 { width: 63%; }
.w64 { width: 64%; }
.w65 { width: 65%; }
.w66 { width: 66%; }
.w67 { width: 67%; }
.w68 { width: 68%; }
.w69 { width: 69%; }
.w70 { width: 70%; }
.w71 { width: 71%; }
.w72 { width: 72%; }
.w73 { width: 73%; }
.w74 { width: 74%; }
.w75 { width: 75%; }
.w76 { width: 76%; }
.w77 { width: 77%; }
.w78 { width: 78%; }
.w79 { width: 79%; }
.w80 { width: 80%; }
.w81 { width: 81%; }
.w82 { width: 82%; }
.w83 { width: 83%; }
.w84 { width: 84%; }
.w85 { width: 85%; }
.w86 { width: 86%; }
.w87 { width: 87%; }
.w88 { width: 88%; }
.w89 { width: 89%; }
.w90 { width: 90%; }
.w91 { width: 91%; }
.w92 { width: 92%; }
.w93 { width: 93%; }
.w94 { width: 94%; }
.w95 { width: 95%; }
.w96 { width: 96%; }
.w97 { width: 97%; }
.w98 { width: 98%; }
.w99 { width: 99%; }
.w100 { width: 100%; }

/* forms */
.login { max-width: 420px; margin: 6vh auto 0; }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-size: 14px; color: var(--ink); }
.form input, .form select { padding: 9px 11px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.btn { display: inline-block; border: 1px solid var(--control-line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 16px; cursor: pointer; text-decoration: none; font-weight: 500; font-size: 14px; }
.btn.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn.small { padding: 3px 10px; font-size: 13px; }
.actions { display: flex; gap: 6px; justify-content: flex-end; }
.actions form { margin: 0; }
.error { background: var(--bad-bg); color: var(--bad-ink); padding: 10px 12px; border-radius: 8px; }
.ok { background: var(--good-bg); color: var(--good-ink); padding: 10px 12px; border-radius: 8px; }
.done { border-color: var(--green); }
.otp { font-size: 15px; background: var(--quiet-bg); padding: 2px 8px; border-radius: 6px; user-select: all; }

@media (max-width: 1000px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .signs, .grid-2, .grid-3, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .strip, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .mini td.lab { width: auto; }
  .mini .v { font-size: 16px; }
  .brand span { font-size: 17px; }
  .who-am-i { display: none; }
}
@media print {
  .nav, .foot form, .skip-link { display: none; }
  body { background: #fff; }
  .card { break-inside: avoid; }
}