:root {
    color-scheme: light;
    --page: #f4f4f1;
    --surface: #fcfcfb;
    --surface-2: #f0efec;
    --text: #0b0b0b;
    --text-2: #52514e;
    --muted: #7a7873;
    --grid: #e1e0d9;
    --axis: #c3c2b7;
    --ring: rgba(11, 11, 11, 0.10);
    --accent: #256abf;
    --accent-fill: #2a78d6;
    --accent-wash: rgba(42, 120, 214, 0.10);
    --s1: #2a78d6;
    --s2: #eb6834;
    --good: #0ca30c;
    --good-text: #006300;
    --warning: #fab219;
    --critical: #d03b3b;
    --danger: #c03030;
    --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 4px 16px rgba(11, 11, 11, 0.04);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page: #0d0d0d;
        --surface: #1a1a19;
        --surface-2: #232321;
        --text: #f0efec;
        --text-2: #c3c2b7;
        --muted: #898781;
        --grid: #2c2c2a;
        --axis: #383835;
        --ring: rgba(255, 255, 255, 0.10);
        --accent: #6da7ec;
        --accent-fill: #3987e5;
        --accent-wash: rgba(57, 135, 229, 0.16);
        --s1: #3987e5;
        --s2: #d95926;
        --good-text: #0ca30c;
        --danger: #e66767;
        --shadow: none;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 0.85em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* Shell: a sidebar on wide screens, a top bar on phones. */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 20px 12px; background: var(--surface); border-right: 1px solid var(--ring); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; font-weight: 650; letter-spacing: -0.01em; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-fill); color: #fff; }
.brand small { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; letter-spacing: 0; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-weight: 500; }
.nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.nav a.active { background: var(--accent-wash); color: var(--accent); }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--critical); color: #fff; font-size: 0.75rem; text-align: center; }
.account { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--ring); font-size: 0.85rem; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.account button { align-self: flex-start; }

main { padding: 28px 32px 48px; max-width: 1280px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0; letter-spacing: -0.02em; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
h2 { font-size: 1rem; margin: 28px 0 10px; }
.muted { color: var(--muted); }
.status { padding: 10px 14px; background: var(--surface); border: 1px solid var(--ring); border-left: 4px solid var(--accent-fill); border-radius: 8px; margin: 0 0 16px; }

/* Range filter: one row above the charts it scopes. */
.segmented { display: inline-flex; padding: 3px; background: var(--surface-2); border-radius: 9px; gap: 2px; }
.segmented a { padding: 4px 12px; border-radius: 7px; color: var(--text-2); font-size: 0.85rem; font-weight: 500; }
.segmented a:hover { text-decoration: none; color: var(--text); }
.segmented a.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.live-dot.stale::before { background: var(--warning); }

/* Cards and grids */
.card { background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; }
.card > h2:first-child, .card-head h2 { margin: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.card-head .sub { color: var(--muted); font-size: 0.85rem; }
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Stat tiles: label, value, optional detail line. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.tile .label { color: var(--text-2); font-size: 0.85rem; }
.tile .value { font-size: 1.75rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; margin-top: 2px; }
.tile .value a { color: inherit; }
.tile .detail { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.tile.hero .value { font-size: 3rem; }

/* Meter: fill carries severity; the track is a lighter step. */
.meter { height: 8px; border-radius: 4px; background: var(--accent-wash); overflow: hidden; margin: 8px 0 4px; }
.meter > span { display: block; height: 100%; border-radius: 4px; background: var(--accent-fill); min-width: 2px; }
.meter.warning > span { background: var(--warning); }
.meter.critical > span { background: var(--critical); }

.meter-head { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; margin-top: 12px; }
.meter-head > span:first-child { color: var(--muted); }
.meter-head > span:last-child { font-variant-numeric: tabular-nums; }
.meter + .facts { margin-top: 14px; }

/* Charts (drawn by dashboard.js) */
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8rem; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }
.legend i.box { height: 10px; width: 10px; border-radius: 2px; }
.chart { position: relative; height: 190px; outline: none; }
.chart.short { height: 150px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart:focus-visible { box-shadow: 0 0 0 2px var(--accent-fill); border-radius: 4px; }
.chart .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 0.85rem; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { opacity: 0.10; }
.chart .cross { stroke: var(--axis); stroke-width: 1; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .col { transition: opacity 0.1s; }
.chart .col.dim { opacity: 0.55; }
.chart .label { fill: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.s1 { stroke: var(--s1); fill: var(--s1); background: var(--s1); }
.s2 { stroke: var(--s2); fill: var(--s2); background: var(--s2); }
.chart.loading svg { opacity: 0.5; }

.tip { position: fixed; z-index: 10; pointer-events: none; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--ring); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-size: 0.8rem; min-width: 120px; }
.tip .when { color: var(--muted); margin-bottom: 4px; }
.tip .row { display: flex; align-items: center; gap: 8px; }
.tip .row i { width: 12px; height: 2px; border-radius: 1px; }
.tip .row strong { font-variant-numeric: tabular-nums; }
.tip .row span { color: var(--text-2); }

/* Horizontal bar list (zones, endpoints) */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bars .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 0.9rem; }
.bars .item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .item .num { font-variant-numeric: tabular-nums; color: var(--text-2); }
.bars .track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); }
.bars .track > span { display: block; height: 100%; border-radius: 3px; background: var(--s1); min-width: 2px; }

/* Key/value facts */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 0.9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; box-shadow: var(--shadow); }
.card .table-wrap { border: 0; box-shadow: none; border-radius: 0; margin: 0 -18px -16px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--grid); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
th { font-weight: 600; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .share { height: 6px; border-radius: 3px; background: var(--s1); min-width: 2px; margin-top: 8px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pill.ok { color: var(--good-text); }
.pill.ok::before { background: var(--good); }
.pill.danger { color: var(--danger); }
.pill.danger::before { background: var(--critical); }

/* Forms */
form.inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input[type=text], input[type=search] { padding: 8px 12px; border: 1px solid var(--ring); border-radius: 8px; background: var(--surface); color: var(--text); min-width: 260px; font: inherit; }
input:focus { outline: 2px solid var(--accent-fill); outline-offset: -1px; }
button { padding: 7px 14px; border: 1px solid var(--ring); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 500; }
button:hover { background: var(--surface-2); }
button.danger { border-color: var(--danger); color: var(--danger); }
button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
button.primary:hover { filter: brightness(1.08); }

dl.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; padding: 16px 18px; margin: 0; box-shadow: var(--shadow); }
dl.details dt { color: var(--muted); }
dl.details dd { margin: 0; }
.snapshot { white-space: pre-wrap; word-break: break-word; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.page-head .toolbar { margin-bottom: 0; }

/* Sign-in pages */
.center { max-width: 420px; margin: 12vh auto; text-align: center; background: var(--surface); border: 1px solid var(--ring); border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow); }
.center .brand-mark { margin: 0 auto 14px; width: 44px; height: 44px; border-radius: 12px; }
.center h1 { margin-bottom: 12px; }

@media (max-width: 800px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--ring); }
    .brand { padding: 0; margin-right: auto; }
    .brand small { display: none; }
    .nav { flex-direction: row; overflow-x: auto; width: 100%; order: 3; }
    .nav a { padding: 6px 10px; white-space: nowrap; }
    .account { margin: 0; padding: 0; border: 0; flex-direction: row; align-items: center; }
    .account span { display: none; }
    main { padding: 20px 16px 40px; }
    .tile.hero .value { font-size: 2.4rem; }
    input[type=text], input[type=search] { min-width: 0; width: 100%; }
}

@media (forced-colors: active) {
    .chart .line { stroke: CanvasText; }
    .meter > span, .bars .track > span { background: CanvasText; }
}
.card > h2 + .facts { margin-top: 10px; }
.tile .meter { margin: 8px 0 2px; }