/* Dark unless the device asks for light. */
:root {
	color-scheme: dark;
	--bg: #0b0e13;
	--card: #141922;
	--card-2: #1b2230;
	--text: #eef1f5;
	--muted: #98a2b3;
	--line: #262e3b;
	--accent: #5b9dff;
	--green: #34d399;
	--amber: #fbbf24;
	--red: #f87171;
	--blue: #60a5fa;
	--violet: #a78bfa;
	--shadow: 0 10px 30px rgb(0 0 0 / 0.35);
	/*
	 * Technical page: each colour means one thing. Load is ink (violet next to the grid blue fails for colour-blind
	 * readers); grid blue; into the battery green; out of it amber; phases have their own trio; status tones only
	 * mark status. Outages are a light wash behind charts.
	 */
	--load: #d4d8df;
	--grid-c: #3987e5;
	--charge: #199e70;
	--discharge: #c98500;
	--phase-1: #9085e9;
	--phase-2: #d55181;
	--phase-3: #0e9fb5;
	--good: #4ade80;
	--warn: #fbbf24;
	--bad: #f87171;
	--outage: color-mix(in oklab, var(--warn) 12%, transparent);
	/* The big battery: its shell, and liquid colours deep enough for white digits (top of the liquid, bottom) */
	--shell: #c9cfd8;
	--shell-inside: #141922;
	--liquid-green: #059669;
	--liquid-green-deep: #047857;
	--liquid-amber: #d97706;
	--liquid-amber-deep: #c2410c;
	--liquid-red: #dc2626;
	--liquid-red-deep: #b91c1c;
}
@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;
		--bg: #f2f4f8;
		--card: #ffffff;
		--card-2: #f6f8fb;
		--text: #111827;
		--muted: #5b6474;
		--line: #e2e6ee;
		--accent: #2563eb;
		--green: #059669;
		--amber: #d97706;
		--red: #dc2626;
		--blue: #2563eb;
		--violet: #7c3aed;
		--shadow: 0 8px 24px rgb(15 23 42 / 0.08);
		--shell: #c5ccd6;
		--shell-inside: #e6eaf0;
		--load: #374151;
		--grid-c: #2563eb;
		--charge: #059669;
		--discharge: #d97706;
		--phase-1: #6250d6;
		--phase-2: #d55181;
		--phase-3: #0e9fb5;
		--good: #15803d;
		--warn: #b45309;
		--bad: #b91c1c;
	}
}

* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font:
		16px/1.45 system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		sans-serif;
	-webkit-text-size-adjust: 100%;
}
body {
	overflow-x: hidden;
}
[hidden] {
	display: none !important;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
button,
a.button {
	font: inherit;
	color: inherit;
}
code {
	font:
		11px/1.2 ui-monospace,
		SFMono-Regular,
		Menlo,
		monospace;
	color: var(--muted);
}

/* ── Simple view ─────────────────────────────────────────────────────────── */

.simple {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 24px 16px 32px;
	text-align: center;
}
.simple .title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.02em;
}
/* What the battery is doing: amber while it powers the elevator, green while charging, nothing on standby */
.mode {
	--tone: var(--muted);
	margin: -8px 0 0;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 5px 14px 5px 12px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	color: color-mix(in oklab, var(--tone) 72%, var(--text));
	background: color-mix(in oklab, var(--tone) 16%, transparent);
}
.mode[data-tone='amber'] {
	--tone: var(--amber);
}
.mode[data-tone='green'] {
	--tone: var(--green);
}
.mode:not([data-tone='amber'], [data-tone='green']) {
	visibility: hidden;
}
.mode .beacon {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tone);
	animation: beacon 2s ease-out infinite;
}
@keyframes beacon {
	0% {
		box-shadow: 0 0 0 0 color-mix(in oklab, var(--tone) 70%, transparent);
	}
	70%,
	100% {
		box-shadow: 0 0 0 8px transparent;
	}
}
.battery {
	position: relative;
	width: min(62vw, 300px, 42dvh);
	aspect-ratio: 0.58;
}
.battery canvas {
	/* Out of the flow: the canvas's own pixel size must not feed back into the box's size. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	/* Taps splash the liquid */
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.headline {
	margin: 0;
	font-size: clamp(28px, 8vw, 44px);
	font-weight: 750;
	line-height: 1.15;
	max-width: 18ch;
}
.subline {
	margin: 0;
	font-size: clamp(17px, 4.6vw, 21px);
	color: var(--muted);
	max-width: 30ch;
}
.subline .stale {
	color: var(--amber);
	font-weight: 600;
}
/* A quiet link: the technical page is for the curious, not the main action */
.details-link {
	padding: 11px 16px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	color: var(--muted);
	text-decoration: none;
}
.details-link:hover {
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.nowrap {
	white-space: nowrap;
}
.details-link:focus-visible,
.tabs a:focus-visible,
.back:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* ── Advanced view ───────────────────────────────────────────────────────── */

.details {
	--fs-xs: 11px;
	--fs-s: 12.5px;
	--fs-m: 14px;
	--fs-l: 16px;
	--fs-value: 22px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px 40px;
	font-size: var(--fs-m);
}
@media (min-width: 900px) {
	.details {
		--fs-m: 15px;
		--fs-value: 26px;
		padding: 0 20px 48px;
	}
}
.icon {
	flex: none;
	vertical-align: -3px;
}
/* One row: back, the data's age, then the tabs (faded at the edges where more are hidden) */
.details > header {
	position: sticky;
	top: 0;
	z-index: 5;
	/* Opaque, no blur: a blurred sticky header repaints on every frame of a scroll and jitters on iPhones */
	background: var(--bg);
	box-shadow: 0 1px 0 var(--line);
	padding: 6px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.back {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--card);
	border: 1px solid var(--line);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--fs-m);
}
.back .back-text {
	display: none;
}
@media (min-width: 600px) {
	.back {
		width: auto;
		padding: 0 12px 0 6px;
	}
	.back .back-text {
		display: inline;
	}
}
.status-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
	white-space: nowrap;
}
/* Still: an endless pulse in the sticky header kept it repainting while scrolling, and meant nothing */
.dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--good);
}
.dot.stale {
	background: var(--warn);
}
.dot.old {
	background: var(--bad);
}
.tabs {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	--fade: 24px;
}
.tabs.fade-start {
	mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
}
.tabs.fade-end {
	mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
}
.tabs.fade-start.fade-end {
	mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.tabs::-webkit-scrollbar {
	display: none;
}
.tabs a {
	flex: none;
	padding: 6px 11px;
	border-radius: 9px;
	text-decoration: none;
	color: var(--muted);
	font-weight: 600;
	font-size: var(--fs-m);
	border: 1px solid transparent;
}
.tabs a[aria-current='true'] {
	color: var(--text);
	background: var(--card);
	border-color: var(--line);
}

/* Cards: one column on phones, two from 900 px; a wide card spans both */
.grid {
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 8px;
}
@media (min-width: 900px) {
	.grid {
		gap: 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 12px;
	}
}
section[data-section] {
	scroll-margin-top: 60px;
}
/* Landmarks: each part of the page (overview, device readings, energy, the estimate) opens with a heading */
.part {
	grid-column: 1 / -1;
	margin: 36px 0 4px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}
section[data-section]:first-child .part {
	margin-top: 4px;
	padding-top: 0;
	border-top: 0;
}
.part h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 650;
	line-height: 1.25;
}
.part p {
	margin: 4px 0 0;
	max-width: 70ch;
	font-size: var(--fs-m);
	color: var(--muted);
}
@media (min-width: 900px) {
	.part {
		margin-top: 48px;
		padding-top: 24px;
	}
	.part h2 {
		font-size: 24px;
	}
}
.card {
	container-type: inline-size;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px;
	min-width: 0;
}
@media (min-width: 900px) {
	.card {
		padding: 16px;
	}
}
.card.wide {
	grid-column: 1 / -1;
}
/* A tall card takes the left column; the half cards after it stack beside it */
@media (min-width: 900px) {
	.card.tall {
		grid-row: span 3;
	}
}
.card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--muted);
}
.card-head h2 {
	margin: 0;
	font-size: var(--fs-l);
	font-weight: 600;
	color: var(--text);
	flex: 1;
	min-width: 0;
}
.card .meta {
	margin: -6px 0 10px;
	font-size: var(--fs-s);
	color: var(--muted);
	overflow-wrap: anywhere;
}
.card h3 {
	margin: 16px 0 6px;
	font-size: var(--fs-s);
	font-weight: 600;
	color: var(--muted);
}
.card p.note {
	margin: 8px 0 0;
	font-size: var(--fs-s);
	color: var(--muted);
}

/* Chips: status, battery flow, or neutral */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: var(--fs-s);
	font-weight: 600;
	white-space: nowrap;
	--tone: var(--muted);
	color: color-mix(in oklab, var(--tone) 75%, var(--text));
	background: color-mix(in oklab, var(--tone) 16%, transparent);
}
.chip.good {
	--tone: var(--good);
}
.chip.warn {
	--tone: var(--warn);
}
.chip.bad {
	--tone: var(--bad);
}
.chip.charge {
	--tone: var(--charge);
}
.chip.discharge {
	--tone: var(--discharge);
}
.tone.good {
	color: var(--good);
}
.tone.warn {
	color: var(--warn);
}
.tone.bad {
	color: var(--bad);
}

/* Tiles fill their rows: two columns on phones (an odd last tile spans both), one per tile on wide cards */
.tiles {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tiles > .tile:last-child:nth-child(odd) {
	grid-column: span 2;
}
@container (min-width: 640px) {
	.tiles {
		gap: 8px;
		grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
	}
	.tiles > .tile:last-child:nth-child(odd) {
		grid-column: auto;
	}
	.tiles[data-n='1'] {
		--columns: 1;
	}
	.tiles[data-n='2'] {
		--columns: 2;
	}
	.tiles[data-n='3'],
	.tiles[data-n='6'] {
		--columns: 3;
	}
	.tiles[data-n='4'],
	.tiles[data-n='7'],
	.tiles[data-n='8'] {
		--columns: 4;
	}
	/* Five: three over two */
	.tiles[data-n='5'] {
		--columns: 6;
	}
	.tiles[data-n='5'] > .tile {
		grid-column: span 2;
	}
	.tiles[data-n='5'] > .tile:nth-child(n + 4) {
		grid-column: span 3;
	}
	.tiles[data-n='7'] > .tile:last-child {
		grid-column: span 2;
	}
}
/* Wide cards: five and six tiles fit in one row */
@container (min-width: 900px) {
	.tiles[data-n='5'] {
		--columns: 5;
	}
	.tiles[data-n='5'] > .tile,
	.tiles[data-n='5'] > .tile:nth-child(n + 4) {
		grid-column: auto;
	}
	.tiles[data-n='6'] {
		--columns: 6;
	}
}
/* Each tile is a subgrid of four rows (label, value, meter, sub-line), so tiles in one row line them up even when a
   label wraps */
.tile {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	row-gap: 2px;
	align-content: start;
	background: var(--card-2);
	border-radius: 8px;
	padding: 9px 10px;
	min-width: 0;
}
.tile > .label {
	grid-row: 1;
	align-self: end;
}
.tile > .value {
	grid-row: 2;
}
.tile > .meter {
	grid-row: 3;
	align-self: center;
}
.tile > .sub {
	grid-row: 4;
}
.tile .label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--fs-s);
	color: var(--muted);
	overflow-wrap: break-word;
	hyphens: auto;
	min-width: 0;
}
.tile .value {
	font-size: var(--fs-value);
	font-weight: 650;
	line-height: 1.2;
	overflow-wrap: break-word;
}
.tile .value.text {
	font-size: calc(var(--fs-value) * 0.8);
}
.tile .value[data-tick] {
	font-variant-numeric: tabular-nums;
}
.tile .sub {
	font-size: var(--fs-s);
	color: var(--muted);
}
.tile .meter {
	height: 4px;
	margin: 3px 0;
	border-radius: 2px;
	background: var(--line);
	overflow: hidden;
}
.tile .meter span {
	display: block;
	height: 100%;
	background: var(--load);
}

/* Rows: label and value on one line; long values stack under the label on narrow cards */
.rows {
	display: grid;
}
.rows > .row {
	border-top: 1px solid var(--line);
}
.rows > .row:first-child {
	border-top: none;
}
.row > summary,
div.row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 12px;
	align-items: baseline;
	padding: 7px 0;
	list-style: none;
}
.row.long > summary,
div.row.long {
	grid-template-columns: minmax(0, 1fr);
}
@container (min-width: 560px) {
	.row.long > summary,
	div.row.long {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}
}
.row > summary::-webkit-details-marker {
	display: none;
}
.row > summary {
	cursor: pointer;
}
.row .label {
	min-width: 0;
}
.row .label .hint {
	margin-left: 4px;
	color: var(--muted);
	vertical-align: -2px;
}
.row .value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
	text-align: right;
	display: inline-flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 5px;
}
.row .value .icon {
	align-self: center;
}
.row.long .value {
	text-align: left;
	justify-content: flex-start;
}
@container (min-width: 560px) {
	.row.long .value {
		text-align: right;
		justify-content: flex-end;
	}
}
.row > p {
	margin: 0 0 10px;
	font-size: var(--fs-s);
	color: var(--muted);
}

/* Folds */
.more {
	margin-top: 8px;
}
.more > summary {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	color: var(--accent);
	font-weight: 600;
	padding: 4px 0;
	list-style: none;
}
.more > summary::-webkit-details-marker {
	display: none;
}
.more > summary .chevron {
	transition: transform 0.15s ease;
}
.more[open] > summary .chevron {
	transform: rotate(90deg);
}

/* Range bar (p10–p90) */
.range {
	position: relative;
	height: 12px;
	border-radius: 4px;
	background: var(--line);
	margin: 12px 0 6px;
	overflow: hidden;
}
.range .band {
	position: absolute;
	top: 0;
	bottom: 0;
	background: color-mix(in oklab, var(--load) 35%, transparent);
}
.range .mid {
	position: absolute;
	top: -2px;
	bottom: -2px;
	width: 3px;
	border-radius: 1.5px;
	background: var(--load);
}
.range-labels {
	display: flex;
	justify-content: space-between;
	font-size: var(--fs-s);
	color: var(--muted);
}

/* Charts: drawn at the plot's real width, so one SVG unit is one pixel and chart text keeps its size */
figure {
	margin: 0;
}
.chart {
	position: relative;
	touch-action: pan-y;
	outline: none;
}
.chart .plot {
	position: relative;
	width: 100%;
}
.chart svg {
	display: block;
	overflow: visible;
}
.chart text {
	font-size: var(--fs-xs);
	fill: var(--muted);
	font-variant-numeric: tabular-nums;
}
.chart .gridline {
	stroke: var(--line);
	stroke-width: 1;
}
.chart .gridline.zero {
	stroke: var(--muted);
	stroke-opacity: 0.5;
}
.chart .span {
	fill: var(--outage);
}
.chart .cursor {
	stroke: var(--text);
	stroke-opacity: 0.5;
}
.chart:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 4px;
}
.chart figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: var(--fs-s);
	color: var(--muted);
	margin-bottom: 6px;
	align-items: center;
}
.chart figcaption i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 5px;
	vertical-align: -1px;
}
.chart figcaption .scale {
	flex: 1;
	min-width: 60px;
	height: 8px;
	border-radius: 2.5px;
	background: linear-gradient(90deg, color-mix(in oklab, var(--load) 12%, var(--card-2)), var(--load));
}
.chart .tip {
	position: absolute;
	z-index: 1;
	background: var(--card-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 6px 9px;
	font-size: var(--fs-s);
	display: grid;
	gap: 2px;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: var(--shadow);
}
.chart .tip i {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 1.5px;
	margin-right: 5px;
}
.charts {
	display: grid;
	gap: 4px 24px;
	grid-template-columns: minmax(0, 1fr);
}
.charts > div {
	min-width: 0;
}
.charts > div:only-child {
	grid-column: 1 / -1;
}
@container (min-width: 760px) {
	.charts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.charts.wide-first {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}
.card .note a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

/* Energy flow: wire width is the power, the arrow its direction */
.flow .node rect {
	fill: var(--card-2);
	stroke: var(--line);
}
.flow .node text {
	fill: var(--text);
	font-size: 13px;
	font-weight: 600;
}
.flow .node-icon {
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.flow .chart text.kw {
	fill: var(--text);
	font-size: 12px;
	font-weight: 600;
}

/* Energy balance: ribbons as wide as the energy */
.chart .balance-node {
	fill: var(--muted);
}
.chart text.balance-label {
	fill: var(--text);
	font-size: var(--fs-s);
	font-weight: 600;
}
.chart .balance-value {
	fill: var(--muted);
	font-weight: 500;
}
.segmented {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	margin-bottom: 10px;
	border-radius: 10px;
	background: var(--card-2);
	border: 1px solid var(--line);
}
.segmented button {
	font: inherit;
	font-size: var(--fs-s);
	font-weight: 600;
	color: var(--muted);
	background: none;
	border: 0;
	border-radius: 7px;
	padding: 5px 12px;
	cursor: pointer;
}
.segmented button[aria-selected='true'] {
	color: var(--text);
	background: var(--card);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
}
.segmented button:focus-visible {
	outline: 2px solid var(--accent);
}

/* Tiles beside a drawing on wide cards */
.split {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}
.split > div {
	container-type: inline-size;
	min-width: 0;
}
@container (min-width: 760px) {
	.split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}
/* Device index: a compact strip in the order the data flows, each device linking to its card */
.devices {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* On narrower screens a battery (input and tower, two serials) gets a whole row, so serials don't break */
@media (max-width: 899px) {
	.device-group.pair {
		grid-column: 1 / -1;
	}
	/* The two serials side by side when they fit, one under the other when they don't */
	.device-group.pair .who {
		display: flex;
		flex-wrap: wrap;
		gap: 1px 16px;
	}
	.device-group.pair .who b {
		flex-basis: 100%;
	}
}
/* Logger, inverter and the two batteries in one row */
@media (min-width: 900px) {
	.devices {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.device-group {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 8px;
	border-radius: 8px;
	background: var(--card-2);
	color: inherit;
	text-decoration: none;
	min-width: 0;
}
.device-group:hover {
	background: color-mix(in oklab, var(--card-2) 80%, var(--text));
}
.device-group:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.device-group .who {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 1px;
}
.device-group .who small {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 5px;
	font-size: var(--fs-s);
	color: var(--muted);
	overflow-wrap: anywhere;
}
.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
}
.status-dot.good {
	background: var(--good);
}
.status-dot.bad {
	background: var(--bad);
}
.device-group .offline {
	color: var(--bad);
	font-weight: 600;
}
.thumb {
	width: 36px;
	height: 36px;
	object-fit: contain;
	border-radius: 6px;
	background: #c9d1dc;
	padding: 3px;
	flex: none;
	display: grid;
	place-items: center;
	color: var(--text);
}
.thumb.dark {
	background: #2b3442;
}

/* The full table: groups of rows, two columns on wide cards */
.groups {
	columns: 1;
}
@container (min-width: 760px) {
	.groups {
		columns: 2;
		column-gap: 32px;
	}
}
.groups > * {
	break-inside: avoid;
	/* Each column measures itself, so long values stack under their label in a narrow column */
	container-type: inline-size;
}
.groups .group h3:first-child {
	margin-top: 10px;
}

/* Per-phase bars on one scale */
.phase-bars {
	display: grid;
	gap: 10px;
	margin-top: 4px;
}
.phase {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: center;
}
.phase .name {
	font-size: var(--fs-s);
	font-weight: 600;
	color: var(--muted);
}
.phase .track {
	position: relative;
	height: 10px;
	border-radius: 3px;
	background: var(--line);
	overflow: hidden;
}
.phase .track span {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 3px;
}
.phase-bars.both .track::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--muted);
}
.phase .value {
	min-width: 7ch;
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.phase .detail {
	grid-column: 2 / -1;
	font-size: var(--fs-s);
	color: var(--muted);
}

/* A tower's modules: only what the BMS reports is marked */
.modules .slots {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
}
.modules .slot {
	position: relative;
	min-height: 44px;
	border: 1.5px solid var(--line);
	border-radius: 6px;
	display: grid;
	place-items: center;
	color: var(--muted);
}
.modules .slot.known {
	border-color: var(--fill);
	background: color-mix(in oklab, var(--fill) 22%, transparent);
	color: var(--text);
}
.modules .slot .n {
	position: absolute;
	top: 2px;
	left: 5px;
	font-size: 10px;
	color: var(--muted);
}
.modules .slot .t {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.modules .slot .marks {
	position: absolute;
	right: 3px;
	bottom: 2px;
	display: flex;
	gap: 2px;
	font-size: 10px;
	font-weight: 700;
	color: var(--text);
}
.modules .slot .marks span {
	display: inline-flex;
	align-items: center;
}
.modules figcaption {
	margin-top: 8px;
	font-size: var(--fs-s);
	color: var(--muted);
}
.split.cells {
	margin-top: 12px;
	align-items: start;
}
select {
	font: inherit;
	color: var(--text);
	background: var(--card-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 7px 10px;
}
footer.source {
	margin-top: 22px;
	font-size: var(--fs-s);
	color: var(--muted);
	text-align: center;
}

/* Tables */
.table-wrap {
	overflow-x: auto;
}
.table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.table th,
.table td {
	padding: 6px 6px;
	border-top: 1px solid var(--line);
	text-align: right;
	white-space: nowrap;
}
.table thead th {
	border-top: none;
	color: var(--muted);
	font-weight: 600;
	font-size: var(--fs-s);
}
.table tbody th {
	text-align: left;
	font-weight: 500;
	white-space: normal;
}
.table small {
	color: var(--muted);
}
.day-picker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}