/*
 * Chart chrome and ink come from the validated reference palette; the three service
 * hues are its first three categorical slots, which clear every CVD gate in both modes.
 * Light-mode aqua sits under 3:1 against the surface, so the relief rule applies —
 * every series carries a visible name and value in the legend and in the table below.
 */
:root {
	color-scheme: light;
	--page: #f9f9f7;
	--surface: #fcfcfb;
	--surface-2: #f2f1ed;
	--ink: #0b0b0b;
	--ink-2: #52514e;
	--ink-muted: #898781;
	--grid: #e1e0d9;
	--axis: #c3c2b7;
	--border: rgba(11, 11, 11, 0.1);
	--shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px rgba(11, 11, 11, 0.06);
	--s1: #2a78d6;
	--s2: #eb6834;
	--s3: #1baf7a;
	--s4: #eda100;
	--s5: #e87ba4;
	--s6: #008300;
	--s7: #4a3aa7;
	--s8: #e34948;
	--good: #0ca30c;
	--good-text: #006300;
	--warning: #fab219;
	--serious: #ec835a;
	--critical: #d03b3b;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		color-scheme: dark;
		--page: #0d0d0d;
		--surface: #1a1a19;
		--surface-2: #232321;
		--ink: #ffffff;
		--ink-2: #c3c2b7;
		--ink-muted: #898781;
		--grid: #2c2c2a;
		--axis: #383835;
		--border: rgba(255, 255, 255, 0.1);
		--shadow: none;
		--s1: #3987e5;
		--s2: #d95926;
		--s3: #199e70;
		--s4: #c98500;
		--s5: #d55181;
		--s6: #008300;
		--s7: #9085e9;
		--s8: #e66767;
		--good-text: #0ca30c;
	}
}

:root[data-theme='dark'] {
	color-scheme: dark;
	--page: #0d0d0d;
	--surface: #1a1a19;
	--surface-2: #232321;
	--ink: #ffffff;
	--ink-2: #c3c2b7;
	--ink-muted: #898781;
	--grid: #2c2c2a;
	--axis: #383835;
	--border: rgba(255, 255, 255, 0.1);
	--shadow: none;
	--s1: #3987e5;
	--s2: #d95926;
	--s3: #199e70;
	--s4: #c98500;
	--s5: #d55181;
	--s6: #008300;
	--s7: #9085e9;
	--s8: #e66767;
	--good-text: #0ca30c;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	background: var(--page);
	color: var(--ink);
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* --- login ------------------------------------------------------------------ */

#login {
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
}

.login-card {
	width: 100%;
	max-width: 360px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 28px 24px;
	box-shadow: var(--shadow);
}

.login-card h1 { font-size: 19px; margin: 0 0 4px; letter-spacing: -0.01em; }
.login-card p.sub { margin: 0 0 22px; color: var(--ink-muted); font-size: 13px; }

label { display: block; font-size: 12px; color: var(--ink-2); margin: 0 0 6px; font-weight: 500; }

input[type='email'], input[type='password'] {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: var(--ink);
	background: var(--page);
	border: 1px solid var(--border);
	border-radius: 8px;
	margin-bottom: 14px;
}

input:focus-visible, button:focus-visible, select:focus-visible {
	outline: 2px solid var(--s1);
	outline-offset: 1px;
}

button {
	font: inherit;
	cursor: pointer;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--ink);
	padding: 8px 14px;
}

button:hover { background: var(--grid); }

button.primary {
	width: 100%;
	background: var(--s1);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
	padding: 11px 14px;
}

button.primary:hover { filter: brightness(1.08); }
button[disabled] { opacity: 0.55; cursor: default; }

.error {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	color: var(--critical);
	font-size: 13px;
	margin: 0 0 14px;
}

/* --- shell ------------------------------------------------------------------ */

#app { max-width: 1240px; margin: 0 auto; padding: 22px 20px 72px; }

header.top {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

header.top h1 { font-size: 18px; margin: 0; letter-spacing: -0.01em; }
header.top .meta { color: var(--ink-muted); font-size: 12px; }
header.top .spacer { flex: 1 1 auto; }

.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }

.segmented {
	display: inline-flex;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 2px;
	gap: 2px;
}

.segmented button {
	border: none;
	background: transparent;
	color: var(--ink-2);
	padding: 5px 11px;
	border-radius: 7px;
	font-size: 13px;
}

.segmented button[aria-pressed='true'] {
	background: var(--ink);
	color: var(--page);
	font-weight: 600;
}

.segmented button:hover:not([aria-pressed='true']) { background: var(--surface-2); }

/* --- cards & tiles ---------------------------------------------------------- */

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: var(--shadow);
	margin-bottom: 18px;
}

.card > h2 {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 2px;
	letter-spacing: -0.005em;
}

.card > h2 + .note { margin: 0 0 16px; }

.note { color: var(--ink-muted); font-size: 12px; margin: 0 0 12px; }

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 18px;
}

.tile { background: var(--surface); padding: 16px 18px; }
.tile .k { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.tile .v { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.tile .v small { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.tile .d { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

/* --- chart ------------------------------------------------------------------ */

.chart-wrap { position: relative; }
svg.chart { display: block; width: 100%; overflow: visible; }
svg.chart .grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
svg.chart .axis { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
svg.chart text { fill: var(--ink-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
svg.chart .hit { fill: transparent; }
svg.chart .hit:hover ~ .band, svg.chart g.col.on .band { fill: var(--ink); opacity: 0.045; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend .nm { color: var(--ink); }
.legend .vl { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.tooltip {
	position: absolute;
	pointer-events: none;
	z-index: 20;
	min-width: 168px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 9px 11px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
	font-size: 12px;
	transform: translate(-50%, -100%);
	transition: opacity 90ms linear;
}

.tooltip .tt-day { color: var(--ink-muted); margin-bottom: 6px; font-size: 11px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.tooltip .tt-row .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tooltip .tt-row .nm { flex: 1 1 auto; color: var(--ink-2); white-space: nowrap; }
.tooltip .tt-row .vl { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.tooltip .tt-total { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; }

/* --- tables ----------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

th {
	text-align: right;
	font-size: 11px;
	font-weight: 500;
	color: var(--ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0 10px 8px;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }

td { padding: 10px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--surface-2); }
tr.row-link.on td { background: var(--surface-2); }

.svc { display: flex; align-items: center; gap: 9px; }
.svc .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.svc .nm { font-weight: 600; }
.svc .id { color: var(--ink-muted); font-size: 12px; }

code.fp {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	color: var(--ink-2);
	background: var(--surface-2);
	border-radius: 5px;
	padding: 2px 6px;
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.dim { color: var(--ink-muted); }
.strong { font-weight: 650; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--border); }
.pill.ok { color: var(--good-text); }
.pill.off { color: var(--ink-muted); }
.pill.bad { color: var(--critical); }

.bars { display: grid; gap: 7px; }
.bars .brow { display: grid; grid-template-columns: minmax(96px, 200px) 1fr auto; gap: 12px; align-items: center; font-size: 12.5px; }
.bars .brow .lbl { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Both must be blockified: a plain inline span ignores width and height, which
   renders every bar at zero length and hides the comparison the row exists to make. */
.bars .brow .track { display: block; height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.bars .brow .fill { display: block; height: 100%; border-radius: 5px; background: var(--s1); }
.bars .brow .val { font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 92px; text-align: right; }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }

.scroll { overflow-x: auto; }
.scroll table { min-width: 720px; }

#detail .card:last-child { margin-bottom: 0; }

.detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.detail-head h2 { font-size: 16px; margin: 0; }

.empty { color: var(--ink-muted); font-size: 13px; padding: 14px 0; }

.toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	background: var(--ink);
	color: var(--page);
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 13px;
	z-index: 50;
}

@media (max-width: 640px) {
	#app { padding: 16px 14px 56px; }
	.tile .v { font-size: 22px; }
	.bars .brow { grid-template-columns: minmax(80px, 130px) 1fr auto; }
}