:root { --bg: #fafafa; --fg: #111111; --muted: #5c5c5c; --accent: #2f6f4f; --warn: #8a6a00; --bad: #a33a2a; --rule: #dddddd; --font: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --content-w: 38rem; --gutter: clamp(1.25rem, 4vw, 1.75rem); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0a0a; --fg: #eeeeee; --muted: #9a9a9a; --accent: #4fae82; --warn: #d9b44a; --bad: #e0705f; --rule: #262626; } }
/* The status page. Its colour and font tokens are set above, the same as the other pages, because
   styles.css does not define them. The width of .wrap matches the other pages. There are no inline
   styles: bar widths are set from status.js, and the charts are inline SVG drawn in the page. */
.wrap { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); }
h1 { font-family: var(--font); font-weight: 700; font-size: 1.3rem; margin: 0 0 0.6rem; }
h2 { font-family: var(--font); font-weight: 700; font-size: 1rem; margin: 0 0 0.9rem; }
h3 { font-family: var(--font); font-weight: 700; font-size: 0.95rem; margin: 0 0 0.15rem; }
p { margin: 0 0 1em; }
.intro { color: var(--muted); margin: 0 0 1.5rem; }
.state { color: var(--muted); margin: 0 0 1.5rem; font-size: 0.9rem; }
.state[data-kind="error"] { color: var(--fg); }
.panel { border-top: 1px solid var(--rule); padding: 1.25rem 0 1.5rem; margin: 0; }
.verdict { font-weight: 600; margin: 0 0 1.25rem; }
.gauge { margin: 0 0 1.4rem; }
.gauge-value { margin: 0 0 0.45rem; font-size: 1.2rem; font-weight: 700; }
.level { font-size: 0.85rem; font-weight: 400; color: var(--muted); margin-left: 0.35rem; }
.gauge-note { margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--muted); }
.bar { height: 0.85rem; background: var(--rule); }
.fill { height: 100%; width: 0; background: var(--accent); }
.bar.high .fill { background: var(--fg); }
.svc-list { margin: 0; }
.svc { border-top: 1px solid var(--rule); padding: 0.9rem 0 1.2rem; }
.svc h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.svc-deps { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.85rem; color: var(--muted); }
.svc-deps li { margin: 0 0 0.2rem; overflow-wrap: anywhere; }
.svc-deps li::before { content: "↳ "; }
.svc .chart { margin: 0.7rem 0 0; }
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.grid { stroke: var(--rule); stroke-width: 1; }
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-cpu { stroke: var(--accent); }
.line-mem { stroke: var(--fg); stroke-dasharray: 5 4; }
.legend { font-size: 0.85rem; color: var(--muted); margin: 0.6rem 0 0; }
.key { display: inline-block; width: 1.4rem; border-top: 2px solid; vertical-align: middle; margin: 0 0.35rem 0 0.5rem; }
.key-cpu { border-color: var(--accent); margin-left: 0; }
.key-mem { border-color: var(--fg); border-top-style: dashed; }
.axis { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin: 0.3rem 0 0; }
.updated { color: var(--muted); font-size: 0.85rem; margin: -0.9rem 0 1.4rem; }
.updated[data-kind="stale"] { color: var(--fg); font-weight: 600; }
.uptime-row { margin: 0 0 1.2rem; }
.uptime-head { font-size: 0.9rem; margin: 0 0 0.35rem; }
.uptime-strip { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 1px; height: 1.6rem; }
.day { display: block; background: var(--rule); }
.day-ok { background: var(--accent); }
.day-part { background: var(--warn); }
.day-down { background: var(--bad); }
@media (prefers-reduced-motion: no-preference) { .fill { transition: width 600ms ease-out; } }
@media (prefers-reduced-motion: reduce) { a, .theme-toggle { transition: none; } }