/* The admin's style kit (KB design/admin-v2.md §3, §4; board docs/handoff/admin-v2/Admin-v2.html): the Bilimbi colour
   roles, Nunito, the frame, the page kit's parts and the error page. One file for every page, open without a session
   (nothing in it is private). Phone first; the laptop layout from 900 px; light and dark by prefers-color-scheme only.
   Text sizes in rem (16 px = 1 rem) so 200 % text zoom reflows. CSP 'self': the font and pictures come from /assets.

   Colours: each value names its source. palette = app/ui/tokens.ts `palette` (= docs/handoff/v6/tokens.json
   `surface`), bilimbi = app/ui/tokenSets/bilimbi.ts, brand = app/assets/brand/README.md «Colour». ContrastTest reads
   the two blocks below (one `--name: #RRGGBB;` per line) and checks every pair of design/admin-v2.md §3.3. */
:root {
	--bg: #F7FBF3; /* palette.light.surface */
	--card: #FFFFFF; /* white, as the app's cards (bilimbi myFilters.light.tile.fill) */
	--sunken: #F1F5ED; /* palette.light.surfaceContainerLow */
	--line: #C1C9BE; /* palette.light.outlineVariant */
	--field: #717970; /* palette.light.outline */
	--text: #191D18; /* palette.light.onSurface */
	--muted: #414941; /* palette.light.onSurfaceVariant */
	--accent: #006D2F; /* palette.light.primary */
	--on-accent: #FFFFFF; /* palette.light.onPrimary */
	--head: #05792F; /* brand Ground, middle */
	--on-head: #FFFFFF; /* brand on-dark wordmark letters */
	--mark: #D1F480; /* brand Scanner corner on the ground */
	--off: #E5EAE1; /* palette.light.surfaceContainerHigh */
	--on-off: #414941; /* palette.light.onSurfaceVariant */
	--glyph: #FFFFFF; /* white glyph on a filled shape (admin-v2 §3.1) */
	--fine: #006D2F; /* bilimbi light.goodPrice (= primary) */
	--fine-bg: #E3F2E5; /* bilimbi rangeTrack.light.negative[0] */
	--attention: #795900; /* bilimbi light.warning */
	--attention-bg: #FFF1D6; /* bilimbi rangeTrack.light.negative[1] */
	--failing: #BA1A1A; /* bilimbi light.badPrice (= palette.light.error) */
	--failing-bg: #FBE3E0; /* bilimbi rangeTrack.light.negative[2] */
	--unknown: #5C635B; /* bilimbi light.verdictUnknown */
	--unknown-bg: #EEF0EC; /* bilimbi rangeTrack.light.positive[0] */
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #10140F; /* palette.dark.surface */
		--card: #1C211C; /* palette.dark.surfaceContainer */
		--sunken: #181D18; /* palette.dark.surfaceContainerLow */
		--line: #414941; /* palette.dark.outlineVariant */
		--field: #8B9389; /* palette.dark.outline */
		--text: #E0E4DB; /* palette.dark.onSurface */
		--muted: #C1C9BE; /* palette.dark.onSurfaceVariant */
		--accent: #82DA8F; /* palette.dark.primary */
		--on-accent: #00391A; /* palette.dark.onPrimary */
		--head: #016024; /* brand Ground, bottom */
		--on-head: #FFFFFF; /* brand on-dark wordmark letters */
		--mark: #D1F480; /* brand Scanner corner on the ground */
		--off: #262B26; /* palette.dark.surfaceContainerHigh */
		--on-off: #C1C9BE; /* palette.dark.onSurfaceVariant */
		--glyph: #10140F; /* palette.dark.surface: a dark glyph on a light shape (admin-v2 §3.1) */
		--fine: #82DA8F; /* bilimbi dark.goodPrice (= primary) */
		--fine-bg: #24402B; /* bilimbi rangeTrack.dark.negative[0] */
		--attention: #F6BE3B; /* bilimbi dark.warning */
		--attention-bg: #4A3D1C; /* bilimbi rangeTrack.dark.negative[1] */
		--failing: #FFB4AB; /* bilimbi dark.badPrice (= palette.dark.error) */
		--failing-bg: #4D2723; /* bilimbi rangeTrack.dark.negative[2] */
		--unknown: #C1C9BE; /* bilimbi dark.verdictUnknown (= onSurfaceVariant) */
		--unknown-bg: #2F352E; /* bilimbi rangeTrack.dark.positive[0] */
	}
}

/* Nunito, the brand typeface (app/assets/brand/fonts/Nunito, OFL.txt beside it): the variable TTF subset to Latin,
   Latin-1, Latin Extended and Cyrillic by bilimbi-admin/scripts/nunito-subset.sh */
@font-face {
	font-family: "Nunito";
	src: url("/assets/fonts/Nunito-e47bfd9a291bd9178bfe1bdfa64fba4a.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text);
	font-family: "Nunito", ui-rounded, system-ui, sans-serif; font-size: 1rem; line-height: 1.5rem; font-weight: 500;
	-webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
/* A text beside a shape (a flex row) may shrink and wrap a long word at 200 % text */
.whats li > span, .runfail > span, .msg > p, .ferr > span, .hint > span { min-width: 0; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 800; color: var(--text); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hd :focus-visible { outline-color: #FFFFFF; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; line-height: 1.375rem; }
code, .query { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875rem; overflow-wrap: anywhere; }
.skip {
	position: absolute; left: 8px; top: 0; transform: translateY(-110%); z-index: 2; padding: 10px 14px; border-radius: 12px;
	background: var(--card); color: var(--text); font-weight: 700;
}
.skip:focus { top: 8px; transform: none; }

/* Status shapes (kit :: shape), the pill, chevrons, the mascot, the wordmark */
.sh { display: block; flex: none; }
.sh.fine { color: var(--fine); }
.sh.attention { color: var(--attention); }
.sh.failing { color: var(--failing); }
.sh.unknown { color: var(--unknown); }
.gs { fill: none; stroke: var(--glyph); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gf { fill: var(--glyph); }
.pill {
	display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 8px;
	border-radius: 999px; font-size: 1.125rem; line-height: 1.5rem; font-weight: 800;
}
.pill.fine { background: var(--fine-bg); color: var(--fine); }
.pill.attention { background: var(--attention-bg); color: var(--attention); }
.pill.failing { background: var(--failing-bg); color: var(--failing); }
.pill.unknown { background: var(--unknown-bg); color: var(--unknown); }
.chev { display: block; flex: none; color: var(--muted); }
.mascot { display: block; flex: none; }
.err .mascot { width: 112px; height: 112px; }
.wm { display: block; width: auto; height: 22px; }

/* Header: ground green; phone two rows (wordmark and logout, then the tabs), laptop one row */
.hd { background: var(--head); color: var(--on-head); }
.hd-in {
	display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; max-width: 1264px; margin: 0 auto;
	padding: 0 16px; min-height: 56px;
}
.brand {
	display: flex; align-items: center; gap: 10px; min-height: 56px; color: var(--on-head); text-decoration: none;
	border-radius: 8px;
}
.tag {
	border: 1.5px solid currentColor; border-radius: 999px; padding: 0 10px; font-size: 0.875rem; line-height: 1.375rem;
	font-weight: 800;
}
.tabs {
	display: flex; order: 3; flex: 0 0 calc(100% + 32px); margin: 0 -16px; border-top: 1px solid rgba(255, 255, 255, .24);
}
.tab {
	position: relative; display: flex; flex: 0 1 50%; align-items: center; justify-content: center; padding: 0 16px;
	min-height: 48px; color: var(--on-head); text-decoration: none; font-weight: 700;
}
.tab[aria-current] { font-weight: 900; }
.tab[aria-current]::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0;
	background: var(--mark);
}
.out { order: 2; margin: 0 0 0 auto; }
.hd-btn {
	min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid currentColor; background: transparent;
	color: var(--on-head); font: inherit; font-weight: 700; cursor: pointer;
}

/* Page, sections, footer. A paragraph has no margin of its own (the board's `.f p`): blocks space themselves */
.page { flex: 1 0 auto; width: 100%; max-width: 1264px; margin: 0 auto; padding: 24px 16px 40px; }
.page > * + * { margin-top: 28px; }
.page h2, .h2s { font-size: 1.1875rem; line-height: 1.5rem; margin-bottom: 12px; }
.page h3 { font-size: 1.0625rem; line-height: 1.375rem; margin-bottom: 8px; }
.page > h1, .pt { font-size: 1.75rem; line-height: 2.125rem; }
.upd { color: var(--muted); font-size: 0.9375rem; line-height: 1.375rem; }
.lead { color: var(--muted); font-size: 0.9375rem; line-height: 1.375rem; }
.none-line { color: var(--muted); }
.card { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.tcard { overflow: hidden; }
.ft { border-top: 1px solid var(--line); }
.ft-in {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0 24px; max-width: 1264px; margin: 0 auto;
	padding: 8px 16px 12px;
}
.ft-note { padding-top: 8px; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.langs { display: flex; flex-wrap: wrap; list-style: none; margin: 0 -10px; padding: 0; }
.langs a {
	display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--muted);
	text-decoration: none; font-size: 0.9375rem; font-weight: 600;
}
.langs a[aria-current] {
	color: var(--text); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* Message box (a notice: shape and words on the status tint), field errors and hints, buttons */
.msg {
	display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 12px;
	font-weight: 600;
}
.msg .sh { margin-top: 1px; }
.msg.fine { background: var(--fine-bg); }
.msg.attention { background: var(--attention-bg); }
.msg.failing { background: var(--failing-bg); }
.msg.unknown { background: var(--unknown-bg); }
/* No margin of their own: the board's `.f p { margin: 0 }` wins over its `.ferr`/`.hint` margins as it renders */
.ferr, .hint {
	display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 700;
}
.field > .ferr, .field > .hint { margin-top: 0; }
.ferr { color: var(--failing); }
.hint { color: var(--attention); }
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
	border-radius: 14px; border: 0; font: inherit; font-size: 1.0625rem; line-height: 1.375rem; font-weight: 800;
	text-align: center; text-decoration: none; cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:disabled { background: var(--off); color: var(--on-off); cursor: not-allowed; }
.btn.primary.busy:disabled { background: var(--accent); color: var(--on-accent); cursor: progress; }
.btn.secondary { background: transparent; color: var(--text); border: 1.5px solid var(--field); }
.spin {
	width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent;
	animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* Form fields: a visible label over the input; the error or hint under it */
.form { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.field label { display: block; margin-bottom: 6px; font-size: 1rem; line-height: 1.375rem; font-weight: 700; }
.field input {
	width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--field); border-radius: 12px;
	background: var(--card); color: var(--text); font: inherit; font-size: 1.0625rem; font-weight: 600;
}
.field input:focus { border: 2px solid var(--accent); outline: none; }
.field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.field.invalid input, .field input[aria-invalid="true"] { border: 2px solid var(--failing); }
.field input:disabled { background: var(--sunken); border-color: var(--line); color: var(--muted); }
.pw { position: relative; }
.pw input.revealable { padding-right: 116px; }
.reveal {
	position: absolute; right: 3px; top: 3px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 0;
	border-radius: 10px; background: transparent; color: var(--accent); font: inherit; font-size: 0.9375rem;
	font-weight: 800; cursor: pointer;
}
.reveal:disabled { color: var(--muted); cursor: not-allowed; }
.form .btn { width: 100%; margin-top: 6px; }

/* Login: the mascot over the card; full width on a phone, 400 px from 900 px */
.login-main { display: flex; justify-content: center; }
.login-col { width: 100%; max-width: 400px; }
.login-mascot { display: flex; justify-content: center; margin-bottom: 12px; }
.login-mascot .mascot { width: 72px; height: 72px; }
.login-card { padding: 24px 20px; }
.login-card h1 { font-size: 1.75rem; line-height: 2.125rem; }

/* Security: the lock card beside the 24 h totals, the browsers beside the attempts (5/12 and 7/12 from 900 px). Its
   paragraphs have no margins, as the board renders them */
.page > .msg { margin-top: 16px; }
.page > .sec-top { margin-top: 20px; }
.page > .sec-grid { margin-top: 0; }
.sec-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.sec-grid > .sec { min-width: 0; margin-top: 28px; }
.lead2 { color: var(--muted); font-size: 0.9375rem; line-height: 1.375rem; }
.lock { padding: 18px 20px; }
.page .lock h2 { margin-bottom: 0; font-size: 1.125rem; line-height: 1.5rem; }
.page .sec-top .h2s { margin-bottom: 0; }
.lock-st { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lock-in { font-weight: 700; }
.lock-streak { font-weight: 700; }
.lock .lock-streak, .lock .lock-rule, .br .br-m { margin-top: 0; }
.brs { list-style: none; margin: 0; padding: 0; }
.br { padding: 14px 16px; }
.br + .br { border-top: 1px solid var(--line); }
.br-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.br-n { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 800; overflow-wrap: anywhere; }
.chip {
	display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
	background: var(--fine-bg); color: var(--fine); font-size: 0.875rem; line-height: 1.25rem; font-weight: 800;
}
.br-m { color: var(--muted); font-size: 0.9375rem; line-height: 1.375rem; }
.so { margin-top: 16px; }
.none-line.so { margin-top: 0; }
.so .btn { width: 100%; margin-top: 12px; }

/* Answer block of an area page: back, title, the status pill and since, updated, «what is wrong» */
.back {
	display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -8px 0 4px -6px;
	padding: 0 10px 0 2px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.back .chev { color: var(--accent); }
.ah h1 { font-size: 1.75rem; line-height: 2.125rem; }
.ah-st { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.ah-since { color: var(--muted); font-weight: 600; }
.whats { margin-top: 20px; padding: 16px 18px; border-radius: 16px; }
.whats.fine { background: var(--fine-bg); }
.whats.attention { background: var(--attention-bg); }
.whats.failing { background: var(--failing-bg); }
.whats.unknown { background: var(--unknown-bg); }
.page .whats h2 { margin-bottom: 8px; font-size: 1.125rem; line-height: 1.5rem; }
.whats ul { list-style: none; margin: 0; padding: 0; }
.whats li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.whats li + li { margin-top: 8px; }
.whats li .sh { margin-top: 2px; }
.runfail {
	display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line);
	font-size: 0.9375rem; line-height: 1.375rem;
}
.whats h2 + .runfail { margin-top: 0; padding-top: 0; border-top: 0; }
.runfail .sh { margin-top: 2px; }

/* Key figures: tiles, label over value; a status value has its shape and word in the status colour */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.t-l { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: var(--muted); overflow-wrap: break-word; }
.t-v {
	font-size: 1.75rem; line-height: 2.125rem; font-weight: 800; font-variant-numeric: tabular-nums;
	overflow-wrap: break-word;
}
.t-v.sm { font-size: 1.25rem; line-height: 1.625rem; }
.t-st { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; line-height: 1.625rem; }
.t-st.fine { color: var(--fine); }
.t-st.attention { color: var(--attention); }
.t-st.failing { color: var(--failing); }
.t-st.unknown { color: var(--unknown); }
.t-n { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.none { color: var(--muted); }

/* Facts older than the page's status (a failed last run, a stale source): the values in --muted */
.old .t-v:not(.t-st), .old .tr-v, .old td, .old .facts dd { color: var(--muted); }
.old .spark path { stroke: var(--muted); }

/* Trends: a card per series, the latest value large, a 64 px sparkline, lowest · highest */
.trends { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.trend { min-width: 0; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.trend figcaption { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 700; color: var(--muted); }
.tr-v { font-size: 1.375rem; line-height: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.spark { display: block; width: 100%; height: 64px; margin-top: 8px; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tr-r { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }

/* Tables in a card: a table from 900 px (sideways scroll inside its card), one block per row on a phone */
.tw { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.375rem; }
.tbl th, .tbl td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.tbl thead th { border-top: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tbl tbody th { font-weight: 600; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cst { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.cst.fine { color: var(--fine); }
.cst.attention { color: var(--attention); }
.cst.failing { color: var(--failing); }
.cst.unknown { color: var(--unknown); }
.sub { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.tcard > .none-line { padding: 12px 16px; }
@media (max-width: 899px) {
	.rc thead { display: none; }
	.rc, .rc tbody, .rc tr, .rc td { display: block; width: 100%; }
	.rc tr { padding: 10px 16px; border-top: 1px solid var(--line); }
	.rc tr:first-child { border-top: 0; }
	.rc td, .rc td.num {
		display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right;
		white-space: normal; overflow-wrap: anywhere;
	}
	.rc td::before {
		content: attr(data-label); flex: none; max-width: 50%; color: var(--muted); font-weight: 600; text-align: left;
		overflow-wrap: break-word;
	}
	.rc td:first-child { display: block; padding-bottom: 6px; text-align: left; font-size: 1rem; font-weight: 800; }
	.rc td:first-child::before { content: none; }
}

/* Details: a table folded in a card, the summary with its title, row count and a chevron */
.dts { display: flex; flex-direction: column; gap: 12px; }
.dt { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
.dt summary {
	display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; list-style: none; cursor: pointer;
	font-size: 1.0625rem; line-height: 1.375rem; font-weight: 800;
}
.dt summary::-webkit-details-marker { display: none; }
.dt-t { flex: 1; min-width: 0; overflow-wrap: break-word; }
.dt-m { color: var(--muted); font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dt[open] summary .chev { transform: rotate(180deg); }
.dt-b { padding: 12px 0 4px; border-top: 1px solid var(--line); }
.dt-b > .lead { margin: 0; padding: 0 16px 8px; }
.dt-b > .none-line { padding: 0 16px 12px; }

/* Overview: the verdict with its shape, four counters, the problem cards (a link each, a status edge on the left), the
   healthy areas compact (one list card on a phone, five small cards in a row from 900 px) */
.ov-head { display: flex; align-items: center; gap: 16px; }
.ov-head .mascot { width: 60px; height: 60px; }
.hl { display: flex; align-items: center; gap: 12px; }
.page .hl { font-size: 1.75rem; line-height: 2.125rem; }
.hl .sh { width: 28px; height: 28px; }
.hl > span { min-width: 0; }
.ov-head .lead { max-width: 640px; margin-top: 8px; font-size: 1rem; line-height: 1.5rem; }
.page > .counts { margin-top: 24px; }
.counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.cnt { min-width: 0; padding: 12px 16px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cnt.on { border-color: transparent; }
.cnt.on.failing { background: var(--failing-bg); }
.cnt.on.attention { background: var(--attention-bg); }
.cnt.on.unknown { background: var(--unknown-bg); }
.cnt.on.fine { background: var(--fine-bg); }
.cnt-top { display: flex; align-items: center; gap: 10px; }
.cnt-n { font-size: 2rem; line-height: 2.375rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cnt:not(.on) .cnt-n { color: var(--muted); }
.cnt-w { display: block; margin-top: 2px; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 700; }
.plist, .flist { list-style: none; margin: 0; padding: 0; }
.plist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.prow {
	display: block; height: 100%; min-height: 56px; padding: 14px 16px 16px 14px; border: 1px solid var(--line);
	border-left: 6px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text);
	text-decoration: none;
}
.prow.failing { border-left-color: var(--failing); }
.prow.attention { border-left-color: var(--attention); }
.prow.unknown { border-left-color: var(--unknown); }
.pr-top { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.pr-name { flex: 1; min-width: 0; font-size: 1.125rem; line-height: 1.5rem; font-weight: 800; }
.pr-word { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 800; text-align: right; }
.prow.failing .pr-word { color: var(--failing); }
.prow.attention .pr-word { color: var(--attention); }
.prow.unknown .pr-word { color: var(--unknown); }
.pr-since { display: block; margin: 2px 0 0 34px; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.pr-rs { display: block; margin: 8px 0 0 34px; }
.pr-r {
	display: -webkit-box; font-size: 0.9375rem; line-height: 1.375rem; overflow: hidden; -webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.pr-r.second { display: none; }
.pr-r + .pr-r { margin-top: 4px; }
.pr-more {
	display: block; margin-top: 4px; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; font-weight: 700;
}
.flist { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
.flist li + li { border-top: 1px solid var(--line); }
.frow {
	display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; color: var(--text);
	text-decoration: none;
}
.fr-t { flex: 1; min-width: 0; }
.fr-name { display: block; font-weight: 700; }
.fr-since { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }

/* Area page blocks beyond the kit's tiles, trends and details: a key-figure group's title, the probes (2 across from
   900 px) and the contract line, tiles and lines inside a folded card, completeness meters (an SVG: the CSP allows no
   inline style), three folded tables across, statements in monospace */
.page .kh { margin: 0 0 8px; color: var(--muted); font-size: 0.9375rem; line-height: 1.25rem; font-weight: 700; }
.tiles + .kh { margin-top: 16px; }
.probes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.probe { padding: 14px 16px; }
.page .probe h3 { margin-bottom: 4px; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.probe p + p { margin-top: 4px; }
.contract { margin-top: 16px; }
.page .contract h3 { margin-bottom: 4px; }
.contract .lead { margin-top: 4px; }
.dt-b > .tiles.in { padding: 0 16px 12px; }
.dt-b > .fact { padding: 0 16px 8px; }
.dts3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.meter { display: none; vertical-align: middle; margin: -2px 10px 0 0; }
.meter .mt { fill: var(--off); }
.meter .mf { fill: var(--accent); }
.old .meter .mf { fill: var(--muted); }
.stmts td:first-child, .stmts td:first-child .text {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.desktop-only { display: none; }

/* An empty state: the mascot and one line */
.empty {
	display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; padding: 32px 24px;
	border: 1px solid var(--line); border-radius: 20px; background: var(--card); text-align: center;
}
.empty .mascot { width: 96px; height: 96px; }
.empty p { max-width: 420px; color: var(--muted); }

/* A card of lines (an area's summary card: backups' «no scheduled backups», own data's retention); the source's
   time under a table; a notice placed as a block of a section or the details */
.card.pad { padding: 14px 16px; }
.card.pad > * + * { margin-top: 8px; }
.page .card.pad h2 { margin-bottom: 0; }
.tcard + .t-n, .none-line + .t-n, .msg + .t-n, .msg + .tcard, .msg + .none-line { margin-top: 8px; }
h2 + .msg, h2 + .empty, .dts > .msg { margin-top: 0; }

/* Error pages: the mascot, «Error 404», the title, one line, the way back */
.err { display: flex; flex-direction: column; align-items: center; padding-top: 48px; text-align: center; }
.eyebrow { color: var(--muted); font-size: 0.9375rem; line-height: 1.25rem; font-weight: 800; letter-spacing: .04em; }
.page.err > h1 { margin-top: 4px; }
.err-t { max-width: 460px; color: var(--muted); }
.page.err > * + * { margin-top: 0; }
.page.err > .err-a { margin-top: 24px; }
.err-a { display: flex; flex-direction: column; align-self: stretch; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Blocks the area pages still place themselves (F-93 layout, until the page tasks arrange the kit): cards of facts,
   two or three side by side from 900 px, a status badge (shape and word), the overview's area list */
.badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.badge.fine { color: var(--fine); }
.badge.attention { color: var(--attention); }
.badge.failing { color: var(--failing); }
.badge.unknown { color: var(--unknown); }
.badge.large { font-size: 1.125rem; line-height: 1.5rem; font-weight: 800; }
.page p.attention { color: var(--attention); font-weight: 700; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cards + .cards { margin-top: 12px; }
.cards > .card { padding: 14px 16px; }
.page .card h3 { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }
.card p + p { margin-top: 4px; }
.facts { margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.facts div + div { border-top: 1px solid var(--line); }
.facts dt { min-width: 0; color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.table-block > * + * { margin-top: 12px; }
.table-block > .lead + * { margin-top: 0; }
.pair, .split, .three { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 24px; }
.pair > *, .split > *, .three > * { min-width: 0; }
.page > .pair, .page > .split, .page > .three { margin-top: 28px; }
.statements .card + .card { margin-top: 12px; }
.statements .card { padding: 14px 16px; }
.statements .query { display: block; margin-bottom: 8px; white-space: pre-wrap; color: var(--text); }
.statements-table td:first-child { min-width: 24em; white-space: pre-wrap; overflow-wrap: anywhere; }
.statements-table td:first-child, .statements-table td:first-child .text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; }
.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.area {
	display: block; height: 100%; min-height: 56px; padding: 14px 16px 16px 14px; border: 1px solid var(--line);
	border-left: 6px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); text-decoration: none;
}
.area.fine { border-left-color: var(--fine); }
.area.attention { border-left-color: var(--attention); }
.area.failing { border-left-color: var(--failing); }
.area.unknown { border-left-color: var(--unknown); }
.area .head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.area .name { flex: 1; min-width: 0; font-size: 1.125rem; line-height: 1.5rem; font-weight: 800; overflow-wrap: break-word; }
.area .word { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 800; text-align: right; }
.area.fine .word { color: var(--fine); }
.area.attention .word { color: var(--attention); }
.area.failing .word { color: var(--failing); }
.area.unknown .word { color: var(--unknown); }
.area .when { display: block; margin: 2px 0 0 34px; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.area .reason {
	display: -webkit-box; margin: 8px 0 0 34px; font-size: 0.9375rem; line-height: 1.375rem; overflow: hidden;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.area .reason + .reason { margin-top: 4px; }
.area .reason.second { display: none; }
.when time { white-space: nowrap; }

/* The laptop layout */
@media (min-width: 900px) {
	.hd-in { flex-wrap: nowrap; column-gap: 24px; padding: 0 32px; min-height: 64px; }
	.brand { min-height: 44px; }
	.wm { height: 24px; }
	.tabs { order: 0; flex: none; align-self: stretch; margin: 0; border-top: 0; }
	.tab { flex: none; min-height: 64px; }
	.out { order: 0; }
	.page { padding: 32px 32px 56px; }
	.page > * + *, .page > .pair, .page > .split, .page > .three { margin-top: 32px; }
	.page h2, .h2s { font-size: 1.25rem; line-height: 1.625rem; }
	.page > h1, .pt, .ah h1 { font-size: 2.125rem; line-height: 2.5rem; }
	.ft-in { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 8px 32px; }
	.ft-note { padding-top: 0; }
	.login-main { padding-top: 56px; }
	.login-mascot .mascot { width: 88px; height: 88px; }
	.login-card { padding: 32px; }
	.sec-top, .sec-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
	.sec-grid > .sec { margin-top: 32px; }
	.so .btn { width: auto; }
	.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.t-v { font-size: 2rem; line-height: 2.5rem; }
	.t-v.sm, .t-st { font-size: 1.375rem; line-height: 1.875rem; }
	.trends { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.meter { display: inline-block; }
	.ov-head .mascot { width: 80px; height: 80px; }
	.page .hl { font-size: 2.125rem; line-height: 2.5rem; }
	.hl .sh { width: 32px; height: 32px; }
	.counts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.plist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.pr-r { display: block; -webkit-line-clamp: none; }
	.pr-r.second { display: block; }
	.flist {
		display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; border: 0; border-radius: 0;
		background: transparent; overflow: visible;
	}
	.flist li + li { border-top: 0; }
	.flist li { border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
	.frow { height: 100%; min-height: 64px; }
	.probes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.dts3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.empty .mascot { width: 120px; height: 120px; }
	.err { padding-top: 96px; }
	.err .mascot { width: 140px; height: 140px; }
	.page.err > h1 { font-size: 2.125rem; line-height: 2.5rem; }
	.err-a { flex-direction: row; align-self: auto; }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pair, .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.desktop-only { display: block; }
	.phone-only { display: none; }
	.areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.area .reason { display: block; -webkit-line-clamp: none; }
	.area .reason.second { display: block; }
}