/*
 * Instrument UI — web starter kit.
 * Drop in, then change only the palette block. Defaults are the reference
 * regime (univo: cool grey, red-orange, every glyph mono). The content
 * regime's warm "paper" palette (picochat) is commented beside each value.
 *
 * Fonts: load JetBrains Mono (400/500/600; 300 for big figures), e.g.
 *   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
 * or self-host the same files; without it --mono falls back to the system mono.
 *
 * Theme: <html data-theme="light|dark|system">, written by the server from a
 * cookie before first paint. Every colour is a light-dark() pair, so
 * color-scheme alone picks the palette.
 */

:root {
	color-scheme: light dark;

	/* ── palette (light, dark) ─────────────────────────────── warm paper */
	--ground: light-dark(#e7e7e4, #0e0f11); /* #f1ede7, #141416 */
	--sheet: light-dark(#f7f7f5, #17181b); /* #fffdfa, #1d1d20 */
	--inset: light-dark(#efefec, #1d1e22); /* #f3f0ec, #212124 */
	--field: light-dark(#f7f7f5, #17181b); /* #f9f5f2, #1b1b1e */
	--line: light-dark(#b7b7b1, #42454c); /* #ded9d4, #343438 */
	--line-soft: light-dark(#d9d9d4, #2a2c31); /* #ebe6e0, #2a2a2e */
	--text: light-dark(#262624, #e3e3df); /* #252321, #eeeef0 */
	--muted: light-dark(#7c7c77, #858991); /* #716960, #a5a4ad */
	--faint: light-dark(#aaaaa4, #53565d); /* #a69d93, #6f6e76 */
	--accent: light-dark(#f0531c, #ff6430); /* #a3553d, #ecaa95 */
	--accent-ink: light-dark(#ffffff, #ffffff); /* #fffaf6, #33231f */
	--accent-soft: color-mix(in srgb, var(--accent) 25%, transparent);

/* ── type ───────────────────────────────────────────────────────── */
	--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
	/* reference regime: everything mono. Content regime: a sans for UI text,
	   e.g. 'Pretendard', ui-sans-serif, system-ui, sans-serif — and the
	   content keeps its own face on top of that. */
	--font-ui: var(--mono);

	/* ── motion: decelerate, never overshoot ────────────────────────── */
	--quick: 110ms;
	--normal: 170ms;
	--slow: 240ms;
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* ── drawing ────────────────────────────────────────────────────── */
	/* what a chosen cell or row wears: a faint wash under a hatch */
	--picked:
		repeating-linear-gradient(
			135deg,
			color-mix(in srgb, var(--accent) 9%, transparent) 0 1px,
			transparent 1px 7px
		),
		color-mix(in srgb, var(--accent) 4%, transparent);
	/* wide bands and gutters; a rail 4px or thinner uses --hatch-strong */
	--hatch: repeating-linear-gradient(135deg, var(--line-soft) 0 1px, transparent 1px 5px);
	--hatch-strong: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 5px);
	--dots: radial-gradient(
			circle at 1px 1px,
			color-mix(in srgb, var(--text) 32%, transparent) 0.7px,
			transparent 0.9px
		)
		0 0 / 4px 4px;
	/* one "+" registration mark, 9px, for a 9×9 box */
	--reg:
		linear-gradient(var(--faint), var(--faint)) 4px 0 / 1px 9px no-repeat,
		linear-gradient(var(--faint), var(--faint)) 0 4px / 9px 1px no-repeat;
}
:root[data-theme='light'] {
	color-scheme: light;
}
:root[data-theme='dark'] {
	color-scheme: dark;
}

/* ── base ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	background: var(--ground);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 64px;
}
/* a field inside the sticky bar: don't nudge the page on every keystroke */
html:has(.bar :focus) {
	scroll-padding-top: 0;
}
body {
	margin: 0;
	background: var(--ground);
	color: var(--text);
	font: 12px/1.5 var(--font-ui);
	-webkit-font-smoothing: antialiased;
}
::selection {
	background: var(--accent-soft);
}
button,
input,
select,
textarea {
	font: inherit;
	border-radius: 0;
}
button {
	cursor: pointer;
}
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
input,
textarea,
select {
	accent-color: var(--accent);
}
/* iOS zooms into fields under 16px; keep pinch zoom, fix the size */
@media (max-width: 850px), (any-pointer: coarse) {
	input,
	textarea,
	select,
	[contenteditable]:not([contenteditable='false' i]) {
		font-size: 16px !important;
	}
}

/* ── labels and figures ──────────────────────────────────────────── */
.label {
	font: 500 10.5px/1.2 var(--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
/* put it on an inline element (a span inside the heading): on a flex
   container the brackets become flex items and take its gap */
.bracket::before {
	content: '[';
}
.bracket::after {
	content: ']';
}
.figure {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
}
/* Hangul and kana have no capitals: spaced-out labels fall apart, close them up */
:is(:lang(ko), :lang(ja)) .label {
	letter-spacing: 0.02em;
}
:lang(ko) :is(h1, h2, h3) {
	word-break: keep-all;
}

/* ── bar: the top of every page ──────────────────────────────────── */
.bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 18px;
	height: 46px; /* content regime: 54px */
	padding: 0 14px;
	border-bottom: 1px solid var(--line);
	background: var(--sheet);
}
.bar nav a {
	display: flex;
	align-items: center;
	align-self: stretch;
	padding: 0 10px;
	color: var(--muted);
	text-decoration: none;
}
.bar nav a:hover,
.bar nav a[aria-current='page'] {
	color: var(--text);
}
.bar nav a[aria-current='page'] {
	box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── sheet: a panel laid on the ground ───────────────────────────── */
.sheet {
	position: relative;
	min-width: 0;
	border: 1px solid var(--line);
	background: var(--sheet);
}
/* reference regime: a caption head, no rule. Content regime: min-height 44px,
   a 13px/600 title in the UI face, and border-bottom: 1px solid var(--line-soft). */
.sheet-head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 38px;
	padding: 0 14px;
}
.sheet-head h2 {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.sheet-head .more {
	margin-left: auto;
	font-size: 12px;
	color: var(--muted);
	text-decoration: none;
}
.sheet-head .more:hover {
	color: var(--accent);
}

/* "+" marks on two corners (add .marks to a positioned frame) */
.marks::before,
.marks::after {
	content: '';
	position: absolute;
	z-index: 3;
	width: 9px;
	height: 9px;
	background: var(--reg);
	pointer-events: none;
}
.marks::before {
	top: -5px;
	left: -5px;
}
.marks::after {
	right: -5px;
	bottom: -5px;
}
/* four corners, centred, as spans (no pseudo-elements taken):
   <i class="reg tl"></i><i class="reg tr"></i><i class="reg bl"></i><i class="reg br"></i> */
.reg {
	position: absolute;
	z-index: 3;
	width: 9px;
	height: 9px;
	background: var(--reg);
	pointer-events: none;
}
.reg.tl { top: -5px; left: -5px; }
.reg.tr { top: -5px; right: -5px; }
.reg.bl { bottom: -5px; left: -5px; }
.reg.br { bottom: -5px; right: -5px; }

/* four corners 8px clear of the frame: only a lone panel with room around it */
.marks-4 {
	position: relative;
	isolation: isolate;
}
.marks-4::before {
	--m: var(--faint);
	content: '';
	position: absolute;
	inset: -13px;
	background:
		linear-gradient(var(--m), var(--m)) left 0 top 4px / 9px 1px no-repeat,
		linear-gradient(var(--m), var(--m)) left 4px top 0 / 1px 9px no-repeat,
		linear-gradient(var(--m), var(--m)) right 0 top 4px / 9px 1px no-repeat,
		linear-gradient(var(--m), var(--m)) right 4px top 0 / 1px 9px no-repeat,
		linear-gradient(var(--m), var(--m)) left 0 bottom 4px / 9px 1px no-repeat,
		linear-gradient(var(--m), var(--m)) left 4px bottom 0 / 1px 9px no-repeat,
		linear-gradient(var(--m), var(--m)) right 0 bottom 4px / 9px 1px no-repeat,
		linear-gradient(var(--m), var(--m)) right 4px bottom 0 / 1px 9px no-repeat;
	pointer-events: none;
}

/* ── ruled grid: square cells sharing hairlines inside one frame ── */
.ruled {
	position: relative;
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--sheet);
	outline: 1px solid var(--line); /* the frame, drawn over the cells' outer edges */
	outline-offset: -1px;
}
.ruled > * {
	position: relative;
	min-width: 0;
	border-right: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
	transition: background-color var(--normal) var(--ease-out);
}
.ruled > :hover {
	background: color-mix(in srgb, var(--text) 2.5%, transparent);
}
.ruled > :has(input:checked),
.ruled > [aria-selected='true'],
.ruled > [aria-pressed='true'] {
	background: var(--picked);
}
.ruled > :has(input:focus-visible) {
	z-index: 2;
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}
.ruled > * input:focus-visible {
	outline: none;
}

/* ── controls ─────────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--line);
	background: var(--sheet);
	color: var(--text);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase; /* content regime: none, 13px */
	text-decoration: none;
	transition:
		background-color var(--quick) var(--ease-out),
		border-color var(--quick) var(--ease-out),
		color var(--quick) var(--ease-out),
		transform var(--normal) var(--ease-out);
}
.btn:hover,
.btn-icon:hover {
	border-color: var(--accent); /* the frame takes the accent, the label stays */
}
.btn-primary {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
}
.btn-primary:hover {
	background: color-mix(in srgb, var(--accent) 86%, var(--text));
	border-color: color-mix(in srgb, var(--accent) 86%, var(--text));
}
.btn-icon {
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--muted);
}
.btn-icon:hover {
	color: var(--text);
}
:is(.btn, .btn-primary, .btn-icon):active:not(:disabled) {
	transform: scale(0.96);
}
:is(.btn, .btn-primary, .btn-icon):disabled {
	opacity: 0.45;
	cursor: default;
}
/* compact: in a 46px bar, a panel head or a table footer */
:is(.btn, .btn-primary).sm {
	height: 26px;
	padding: 0 10px;
	font-size: 11px;
}
.btn-icon.sm {
	width: 26px;
	height: 26px;
}
/* buttons that share one border */
.joined {
	display: inline-flex;
}
.joined > * + * {
	margin-left: -1px;
}

/* square check (on/off), 13px: accent fill and a white tick */
.check {
	appearance: none;
	flex: none;
	width: 13px;
	height: 13px;
	margin: 0;
	border: 1px solid var(--line);
	background: none;
	transition:
		background-color var(--quick) var(--ease-out),
		border-color var(--quick) var(--ease-out);
}
.check:hover {
	border-color: var(--accent);
}
.check:checked {
	border-color: var(--accent);
	background: var(--accent)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M3 6.8l2.3 2.3L10 4.2' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E")
		center / 13px no-repeat;
}

/* square radio (one of many), 11px: an outline, filled when chosen */
.square {
	appearance: none;
	flex: none;
	width: 11px;
	height: 11px;
	margin: 0;
	border: 1px solid var(--faint);
	background: none;
	transition:
		background-color var(--quick) var(--ease-out),
		border-color var(--quick) var(--ease-out);
}
.square:checked {
	border-color: var(--accent);
	background: var(--accent);
	box-shadow: inset 0 0 0 2px var(--sheet);
}

.field {
	width: 100%;
	min-height: 36px;
	padding: 9px 10px;
	border: 1px solid var(--line);
	background: var(--field);
	color: var(--text);
	transition: border-color var(--quick) var(--ease-out);
}
.field:focus {
	border-color: var(--accent);
	outline: none;
}

/* boxed tag: its state is its colour */
.tag {
	display: inline-block;
	padding: 2px 5px 1px;
	border: 1px solid currentColor;
	font-family: var(--mono);
	font-size: 9.5px;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--muted);
}
.tag.on {
	color: var(--accent);
}
.tag.idle {
	color: var(--faint);
}
/* in progress where that is a list's normal state: text, not accent */
.tag.live {
	color: var(--text);
}
/* the strongest rung: failure, CRIT — filled */
.tag.crit {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
}

/* tabs: the current one carries an accent rule, never a fill */
.tabs {
	display: flex;
	gap: 20px;
	border-bottom: 1px solid var(--line);
}
.tabs > * {
	padding: 12px 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--muted);
	font-size: 12px;
}
.tabs > [aria-selected='true'] {
	color: var(--text);
	border-color: var(--accent);
}

/* vertical nav: the current item sits on inset with a 2px accent rail */
.vnav a {
	display: flex;
	align-items: center;
	height: 25px;
	padding: 0 14px;
	color: var(--muted);
	font-size: 11px;
	text-decoration: none; /* items are often user data: keep their case; add .label for fixed sections */
}
.vnav a:hover {
	color: var(--text);
}
.vnav a[aria-current='page'] {
	background: var(--inset);
	color: var(--text);
	box-shadow: inset 2px 0 0 var(--accent);
}

/* a wide hatched band between sidebar sections or panel rows */
.band {
	height: 14px;
	border-block: 1px solid var(--line-soft);
	background: var(--hatch);
}

/* card hover: frame the cover, never lift the card */
.card:hover .cover {
	box-shadow: inset 0 0 0 1px var(--accent);
}

/* tooltip: inverted */
.tip {
	padding: 4px 7px;
	background: var(--text);
	color: var(--sheet);
	font-size: 11px;
}

/* ── progress readout: done = fill, now = hatch, left = outline ──── */
.phases {
	display: flex;
	gap: 3px;
}
.phases > i {
	width: 12px;
	height: 8px;
	border: 1px solid var(--faint);
}
.phases > i.done {
	border-color: var(--accent);
	background: var(--accent);
}
.phases > i.now {
	border-color: var(--accent);
	background: repeating-linear-gradient(135deg, var(--accent) 0 1.5px, transparent 1.5px 4px);
}
/* repeated in list rows: only the exception is orange */
.phases.quiet > i.done {
	border-color: var(--faint);
	background: var(--faint);
}
.phases > i.failed {
	border-color: var(--accent);
	background: var(--accent);
}
.clock {
	font: 500 11px/1 var(--mono);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.working {
	border-color: var(--accent);
}

/* ── data ─────────────────────────────────────────────────────────── */
/* table: a caption header row, soft rules, figures right-aligned */
.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 11.5px;
}
.table th {
	height: 26px;
	padding: 0 10px;
	border-bottom: 1px solid var(--line-soft);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
	color: var(--muted);
}
.table td {
	height: 28px;
	max-width: 0;
	padding: 0 10px;
	border-bottom: 1px solid var(--line-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.table tr:hover td {
	background: color-mix(in srgb, var(--text) 2.5%, transparent);
}
.table tr[aria-selected='true'] td {
	background: var(--picked);
}

/* label-value pairs, four columns, no rules */
.kv {
	display: grid;
	grid-template-columns: auto 1fr auto 1fr;
	gap: 0 16px;
	margin: 0;
	font-size: 11.5px;
	line-height: 21px;
	text-transform: uppercase;
}
.kv dt {
	color: var(--muted);
}
.kv dd {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kv .bad {
	color: var(--accent);
}

/* big figure: number, superscript unit, caption */
.big {
	display: inline-grid;
	grid-template-columns: auto auto;
	column-gap: 3px;
	align-items: start;
}
.big b {
	font: 300 30px/1 var(--mono);
	font-variant-numeric: tabular-nums;
}
.big sup {
	font-size: 9px;
	color: var(--muted);
	text-transform: uppercase;
}
.big span {
	grid-column: 1 / -1;
	margin-top: 8px;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.big.bad b {
	color: var(--accent);
}

/* feed row: time / title / target, a severity bar on the left, a badge on the right */
.feed-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 0 12px;
	align-items: center;
	padding: 9px 14px;
	border-bottom: 1px solid var(--line-soft);
	box-shadow: inset 2px 0 0 var(--sev, var(--line));
	font-size: 11px;
}
.feed-row time {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.feed-row strong {
	display: block;
	font-weight: 400;
	text-transform: uppercase;
}
.feed-row small {
	display: block;
	font-size: 9.5px;
	font-weight: 500;
}
.feed-row.crit {
	--sev: var(--accent);
	/* the one gradient the reference allows: the worst row only */
	background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%);
}
.feed-row.warn {
	--sev: var(--text);
}

/* charts: grey body, dashed baseline, accent only where it matters */
.chart-area {
	fill: color-mix(in srgb, var(--text) 12%, transparent);
}
.chart-line {
	fill: none;
	stroke: var(--text);
	stroke-width: 1;
}
.chart-base {
	stroke: var(--line);
	stroke-dasharray: 3 3;
}
.chart-hot {
	stroke: var(--accent);
	fill: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── floating layers: the only glass ─────────────────────────────── */
.glass {
	background: color-mix(in srgb, var(--sheet) 62%, transparent);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid var(--line);
	box-shadow: inset 0 1px 0 light-dark(#ffffff80, #ffffff0f);
}
.menu {
	border-top: 2px solid var(--accent);
}
/* sticky dock: glass, a hairline and a hatched rail along its top */
html:has(.dock) {
	scroll-padding-bottom: 120px;
}
.dock {
	position: sticky;
	bottom: 0;
	z-index: 5;
	padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: color-mix(in srgb, var(--sheet) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.dock::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--hatch-strong);
	pointer-events: none;
}

/* ── textures ─────────────────────────────────────────────────────── */
.hatched {
	background: var(--hatch);
}
.dotted {
	background: var(--dots);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}