/* Code generated by gen.go from components.css and tokens.json. DO NOT EDIT. */
@font-face { font-family: "Oxanium"; src: url("fonts/Oxanium.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("fonts/SourceCodePro.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
/* Quack Lab UI. Every class reads the tokens (bg, panel, line, accent, space-*, row-h, text-* ...) as CSS custom properties.
   A type style is one font shorthand, which also resets font-variant-numeric, so tabular-nums always comes after it. */

/* base */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { color-scheme: dark; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--text-body); }
button, input, select, textarea { font: inherit; color: inherit; }
/* checkboxes are drawn here: the native box ignores border-radius and is rounded in every browser */
input[type="checkbox"] { appearance: none; flex: none; width: var(--check-w); height: var(--check-w); margin: 0; vertical-align: middle; background: var(--bg); border: var(--hairline) solid var(--line); cursor: pointer; }
input[type="checkbox"]:hover { border-color: var(--dim); }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 var(--space-1) var(--bg); }
input[type="checkbox"]:indeterminate { background: linear-gradient(var(--accent), var(--accent)) center / 50% var(--rule-w) no-repeat, var(--bg); border-color: var(--accent); }
input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; }
:focus-visible { outline: var(--rule-w) solid var(--accent); outline-offset: calc(-1 * var(--hairline)); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* text helpers */
.q-label { font: var(--text-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--faint); }
.q-mono { font-family: var(--font-mono); }
.q-kbd { display: inline-grid; place-items: center; min-width: var(--chip-h); height: var(--chip-h); padding: 0 var(--space-1); font: var(--text-meta); color: var(--faint); border: var(--hairline) solid var(--line); }

/* layout */
.q-page { height: 100vh; display: flex; flex-direction: column; }
.q-page > * { flex: none; }
.q-main { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; min-width: 0; }
.q-split { overflow: hidden; display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.q-split > * { min-height: 0; overflow: auto; }
.q-split > :first-child { border-right: var(--hairline) solid var(--line); }
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--panel-w)), 1fr)); align-items: start; align-content: start; }
.q-scroll { overflow: auto; scrollbar-gutter: stable; min-width: 0; }

/* app bar */
.q-bar { height: var(--row-h); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); background: var(--panel); border-bottom: var(--hairline) solid var(--line); }
.q-bar-name { font: var(--text-title); white-space: nowrap; }
.q-bar > .q-input { flex: 1; }
.q-bar-meta { font: var(--text-control); color: var(--faint); white-space: nowrap; }

/* panel */
.q-panel { background: var(--panel); border: var(--hairline) solid var(--line); min-width: 0; display: flex; flex-direction: column; }
.q-panel-head { height: var(--row-h); flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-3); border-bottom: var(--hairline) solid var(--line); font: var(--text-heading); white-space: nowrap; }
.q-panel-body { padding: var(--space-3); display: grid; gap: var(--space-3); align-content: start; }

/* button */
.q-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-3); font: var(--text-control); color: var(--dim); background: transparent; border: var(--hairline) solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; }
.q-btn:hover { background: var(--raised); color: var(--text); }
.q-btn.is-primary { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.q-btn.is-primary:hover { background: color-mix(in oklch, var(--accent) 16%, transparent); }
.q-btn.is-danger { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 45%, transparent); }
.q-btn.is-danger:hover { background: color-mix(in oklch, var(--danger) 14%, transparent); }
.q-btn.is-link { border-color: transparent; color: var(--accent); padding: 0 var(--space-2); }
.q-btn.is-link:hover { background: transparent; text-decoration: underline; }
.q-btn.is-armed, .q-btn.is-armed:hover { color: var(--bg); background: var(--danger); border-color: var(--danger); text-decoration: none; }
/* the negative margin cancels the flex gap, so the mark reads as part of the label: remove? */
.q-btn.is-armed::after { content: "?"; margin-left: calc(-1 * var(--space-2)); }
.q-btn.is-icon { width: var(--control-h); padding: 0; }
.q-btn.is-big { height: var(--big-h); font: var(--text-data); }
.q-btn:disabled { opacity: 0.45; cursor: default; background: transparent; color: var(--dim); }
/* the progress sweep along the bottom edge: running, where a disabled button is only faded */
.q-btn.is-busy { opacity: 1; color: var(--dim); background: linear-gradient(to right, transparent 41.667%, var(--accent) 41.667% 58.333%, transparent 58.333%) 100% 100% / 240% var(--rule-w) no-repeat; animation: q-sweep 1.4s linear infinite; pointer-events: none; }
.q-acts { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; }

/* segmented */
.q-seg { display: inline-flex; border: var(--hairline) solid var(--line); }
.q-seg > button { height: calc(var(--control-h) - 2 * var(--hairline)); padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-3); background: transparent; border: 0; border-right: var(--hairline) solid var(--line); font: var(--text-control); color: var(--dim); cursor: pointer; }
.q-seg > button:last-child { border-right: 0; }
.q-seg > button:hover { background: var(--raised); color: var(--text); }
.q-seg > button[aria-selected="true"] { background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--text); }
.q-seg > button[aria-selected="true"] .q-kbd { color: var(--accent); border-color: var(--accent); }
.q-seg > button:disabled { opacity: 0.45; cursor: default; background: transparent; color: var(--dim); }

/* inputs */
.q-input { height: var(--control-h); padding: 0 var(--space-3); background: var(--bg); border: var(--hairline) solid var(--line); font: var(--text-control); color: var(--text); min-width: 0; }
.q-input::placeholder { color: var(--faint); }
.q-input:focus { outline: none; border-color: var(--accent); }
.q-input.is-invalid { border-color: var(--danger); }
.q-input:disabled { color: var(--faint); border-color: var(--line-soft); cursor: default; }
input[type="number"].q-input { appearance: textfield; text-align: right; font-variant-numeric: tabular-nums; }
input[type="number"].q-input::-webkit-inner-spin-button, input[type="number"].q-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
textarea.q-input { height: auto; padding: var(--space-2) var(--space-3); line-height: 1.5; resize: vertical; }
/* the chevron is two half-filled squares meeting at a point */
select.q-input { appearance: none; cursor: pointer; padding-right: calc(var(--space-3) * 2 + var(--space-2) * 2); background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - var(--space-3) - var(--space-2)) 50%, calc(100% - var(--space-3)) 50%; background-size: var(--space-2) var(--space-2); background-repeat: no-repeat; }
select.q-input option { background: var(--panel); color: var(--text); }
.q-edit { display: inline-block; min-width: 4ch; padding: 0 var(--space-1); margin: 0 calc(-1 * var(--space-1)); outline: none; cursor: text; box-shadow: inset 0 calc(-1 * var(--hairline)) 0 transparent; white-space: pre-wrap; }
.q-edit:hover { box-shadow: inset 0 calc(-1 * var(--hairline)) 0 var(--line); }
.q-edit:focus { background: var(--bg); box-shadow: inset 0 calc(-1 * var(--rule-w)) 0 var(--accent); }
.q-edit:empty::before { content: attr(data-placeholder); color: var(--faint); }
.q-edit.is-saving { color: var(--dim); }
.q-edit.is-error { box-shadow: inset 0 calc(-1 * var(--rule-w)) 0 var(--danger); }
.q-combo { position: relative; display: grid; min-width: 0; }
.q-combo-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; max-height: calc(var(--row-h) * 8); overflow-y: auto; scrollbar-gutter: stable; background: var(--panel); border: var(--hairline) solid var(--line); border-top: 0; }
.q-combo:not(:focus-within) .q-combo-list, .q-combo-list:empty { display: none; }
.q-combo-option { height: var(--row-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-3); font: var(--text-small); color: var(--body); white-space: nowrap; overflow: hidden; cursor: pointer; }
.q-combo-option:hover { background: var(--hover); }
.q-combo-option[aria-selected="true"] { background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--text); }
.q-field { display: grid; gap: var(--space-2); min-width: 0; }
.q-field-error { font: var(--text-meta); color: var(--danger); min-height: 1lh; }
.q-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.q-check:has(input:disabled) { color: var(--faint); cursor: default; }
.q-range { display: grid; grid-template-columns: minmax(0, 1fr) 5ch; gap: var(--space-3); align-items: center; }
.q-range input { appearance: none; -webkit-appearance: none; width: 100%; height: var(--thumb-h); margin: 0; background: transparent; cursor: pointer; }
.q-range input::-webkit-slider-runnable-track { height: var(--bar-h); background: linear-gradient(to right, var(--accent) var(--v), var(--raised) var(--v)); }
.q-range input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb-w); height: var(--thumb-h); margin-top: calc((var(--bar-h) - var(--thumb-h)) / 2); background: var(--text); border: 0; border-radius: 0; }
.q-range input::-moz-range-track { height: var(--bar-h); background: var(--raised); border: 0; border-radius: 0; }
.q-range input::-moz-range-progress { height: var(--bar-h); background: var(--accent); }
.q-range input::-moz-range-thumb { width: var(--thumb-w); height: var(--thumb-h); background: var(--text); border: 0; border-radius: 0; }
.q-range input:disabled { opacity: 0.45; cursor: default; }
.q-progress, .q-meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: var(--bar-h); margin: 0; border: 0; background: var(--raised); }
.q-progress::-webkit-progress-bar { background: var(--raised); }
.q-progress::-webkit-progress-value { background: var(--accent); }
.q-progress::-moz-progress-bar { background: var(--accent); }
/* the band is 0.4 of the bar; a gradient 2.4 bars wide moves it 1.4 bars, from just off the left edge to just off the right, so it leaves one end as it enters the other */
.q-progress:indeterminate { background: linear-gradient(to right, var(--raised) 41.667%, var(--accent) 41.667% 58.333%, var(--raised) 58.333%) 100% 0 / 240% 100%; }
.q-progress:indeterminate::-webkit-progress-bar { background: transparent; }
.q-progress:indeterminate::-moz-progress-bar { background: transparent; }
.q-meter::-webkit-meter-bar { height: var(--bar-h); background: var(--raised); border: 0; border-radius: 0; }
.q-meter::-webkit-meter-optimum-value { background: var(--dim); }
.q-meter::-webkit-meter-suboptimum-value { background: var(--warn); }
.q-meter::-webkit-meter-even-less-good-value { background: var(--danger); }
.q-meter::-moz-meter-bar { background: var(--dim); }
.q-meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
.q-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--danger); }
.q-range output { font: var(--text-control); font-variant-numeric: tabular-nums; text-align: right; }

/* state and tag */
.q-state { --c: var(--faint); display: inline-grid; place-items: center; width: var(--state-w); height: var(--chip-h); font: var(--text-label); font-weight: 600; letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--c); background: color-mix(in oklch, var(--c) 16%, transparent); white-space: nowrap; }
.q-tag { --c: var(--faint); display: inline-grid; place-items: center; min-width: var(--tag-w); height: var(--chip-h); padding: 0 var(--space-2); font: var(--text-meta); color: var(--c); border: var(--hairline) solid color-mix(in oklch, var(--c) 50%, transparent); white-space: nowrap; }
.q-state.is-ok, .q-tag.is-ok { --c: var(--ok); }
.q-state.is-run, .q-tag.is-run { --c: var(--accent); }
.q-state.is-warn, .q-tag.is-warn { --c: var(--warn); }
.q-state.is-danger, .q-tag.is-danger { --c: var(--danger); }
.q-state.is-idle, .q-tag.is-idle { --c: var(--dim); }

/* table */
.q-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.q-table th { position: sticky; top: 0; height: var(--row-h); padding: 0 var(--space-3); background: var(--bg); border-bottom: var(--hairline) solid var(--line); text-align: left; white-space: nowrap; font: var(--text-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--faint); }
.q-table th[aria-sort] { color: var(--dim); cursor: pointer; }
.q-table th[aria-sort="ascending"]::after { content: " \25B2"; color: var(--accent); }
.q-table th[aria-sort="descending"]::after { content: " \25BC"; color: var(--accent); }
.q-table td { height: var(--row-h); padding: 0 var(--space-3); border-bottom: var(--hairline) solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--text-small); }
:where(.q-table td) { color: var(--body); }
.q-table tbody tr:hover td { background: var(--hover); }
.q-table tr.is-sel td { background: color-mix(in oklch, var(--accent) 10%, transparent); }
.q-table tr.is-sel td:first-child { box-shadow: inset var(--rule-w) 0 0 var(--accent); }
.q-table tr.is-done td { color: var(--faint); }
.q-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.q-table .mono { font-family: var(--font-mono); }
.q-table td.acts { overflow: visible; text-align: right; }
/* a bordered box inset from the panel edge reads as misplaced; a bare glyph lines up with the text above it */
.q-table td.acts .q-btn.is-icon { width: var(--chip-h); height: var(--chip-h); }
.q-table td.acts .q-btn.is-icon:not(:hover) { border-color: transparent; }
.q-table tfoot td { position: sticky; bottom: 0; height: var(--row-h); padding: 0 var(--space-3); background: var(--bg); border-top: var(--hairline) solid var(--line); color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-table tbody tr:has(> td > input[type="checkbox"]:checked) td { background: color-mix(in oklch, var(--accent) 6%, transparent); }
.q-empty:not(tr) { height: var(--row-h); display: flex; align-items: center; padding: 0 var(--space-3); }
.q-empty, .q-table .q-empty td { font: var(--text-control); color: var(--faint); }
.q-empty.is-danger, .q-table .q-empty.is-danger td { color: var(--danger); }
.q-table tbody tr.q-empty:hover td { background: transparent; }
.q-table-group td { height: var(--row-h); padding: 0 var(--space-3); font: var(--text-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--faint); border-bottom: var(--hairline) solid var(--line); }

/* fields */
.q-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.q-fields > * { height: var(--row-h); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border-bottom: var(--hairline) solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.q-fields > :where(:nth-child(odd)) { font: var(--text-small); color: var(--dim); }
.q-fields > :where(:nth-child(even)) { font: var(--text-data); font-variant-numeric: tabular-nums; color: var(--text); }
.q-fields > :where(:nth-child(even)) .q-input { flex: 1; }

/* list */
.q-list { background: var(--panel); min-width: 0; }
.q-list-group { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1) var(--space-3); }
.q-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding: var(--space-1) var(--space-3); border-bottom: var(--hairline) solid var(--line-soft); cursor: pointer; color: inherit; text-decoration: none; }
.q-list-item:hover { background: var(--hover); }
.q-list-item.is-sel { background: color-mix(in oklch, var(--accent) 10%, transparent); box-shadow: inset var(--rule-w) 0 0 var(--accent); }
.q-list-title { font: var(--text-small); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-list-sub { grid-column: 1; font: var(--text-meta); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-list-end { grid-row: 1 / 3; grid-column: 2; display: flex; gap: var(--space-2); align-items: center; }

/* tiles */
.q-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tile-w), 1fr)); }
.q-tile { height: var(--row-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-3); background: var(--panel); border-bottom: var(--hairline) solid var(--line-soft); border-right: var(--hairline) solid var(--line-soft); font: var(--text-small); color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; }
.q-tile:hover { background: var(--hover); }
.q-tile em { font: var(--text-meta); color: var(--faint); }
.q-tile.is-danger { background: color-mix(in oklch, var(--danger) 14%, var(--panel)); box-shadow: inset var(--rule-w) 0 0 var(--danger); }
.q-tile.is-danger em { color: var(--danger); }
.q-tile.is-warn { background: color-mix(in oklch, var(--warn) 10%, var(--panel)); box-shadow: inset var(--rule-w) 0 0 var(--warn); }
.q-tile.is-warn em { color: var(--warn); }

/* numbers */
.q-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.q-unit { color: var(--faint); }
.q-stat { display: grid; gap: var(--space-1); align-content: start; }
.q-figure { font: var(--text-figure); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.q-stat-sub { font: var(--text-control); color: var(--faint); white-space: nowrap; }

/* log */
.q-log { margin: 0; padding: var(--space-2) var(--space-3); background: var(--bg); font: var(--text-log); color: var(--body); white-space: pre; overflow: auto; scrollbar-gutter: stable; }
.q-log .ts { color: var(--faint); }
.q-log .lv { display: inline-block; width: 6ch; }
.q-log .l-debug { color: var(--faint); }
.q-log .l-info { color: var(--dim); }
.q-log .l-warn { color: var(--warn); }
.q-log .l-error { color: var(--danger); }

/* status bar */
.q-status { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 2fr) var(--status-w); grid-template-areas: "version run outcome age"; height: var(--row-h); background: var(--panel); border-top: var(--hairline) solid var(--line); font: var(--text-meta); color: var(--faint); }
.q-status > * { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border-right: var(--hairline) solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.q-status-version { grid-area: version; }
.q-status-run { grid-area: run; }
.q-status-outcome { grid-area: outcome; }
.q-status-age { grid-area: age; border-right: 0; justify-content: flex-end; }
.q-status > .is-ok { color: var(--ok); }
.q-status > .is-run { color: var(--accent); }
.q-status > .is-warn { color: var(--warn); background: color-mix(in oklch, var(--warn) 10%, transparent); }
.q-status > .is-danger { color: var(--danger); background: color-mix(in oklch, var(--danger) 12%, transparent); }

/* icons: Lucide-style stroke icons at 1em in currentColor */
.q-btn svg, .q-nav svg, .q-count svg, .q-stat-head svg { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }

/* nav */
.q-nav { display: flex; align-items: stretch; flex-wrap: wrap; }
.q-nav > a { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-3); font: var(--text-heading); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--dim); text-decoration: none; box-shadow: inset 0 calc(-1 * var(--rule-w)) 0 transparent; white-space: nowrap; }
.q-nav > a:hover { color: var(--text); background: var(--raised); }
.q-nav > a[aria-current="page"] { color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); box-shadow: inset 0 calc(-1 * var(--rule-w)) 0 var(--accent); }
.q-nav.is-sub > a { height: var(--control-h); font: var(--text-small); font-weight: 500; letter-spacing: normal; text-transform: none; }
.q-subbar { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border-bottom: var(--hairline) solid var(--line); }
.q-count { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-control); font-variant-numeric: tabular-nums; color: var(--danger); }
.q-count.is-quiet { color: var(--faint); }

/* toolbar */
.q-toolbar { display: flex; align-items: center; gap: var(--space-1) var(--space-4); flex-wrap: wrap; padding: var(--space-1) var(--space-3); border-bottom: var(--hairline) solid var(--line); }
.q-toolbar-group { display: inline-flex; align-items: center; gap: var(--space-3); }
.q-toolbar-group > .q-label { white-space: nowrap; }
.q-toolbar-fill { flex: 1; }

/* facets */
.q-facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--facet-w)), 1fr)); }
/* every child of a facet spans the same inset; the list hides its scrollbar so its rows end where the input ends */
.q-facet { background: var(--panel); border: var(--hairline) solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-2) var(--space-2); }
.q-facet-head { height: var(--row-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.q-facet-head .q-btn.is-link { height: auto; font: var(--text-meta); }
.q-facet > .q-input { width: 100%; }
.q-facet-list { height: calc(var(--row-h) * 6); overflow-y: auto; scrollbar-width: none; }
.q-facet-row { width: 100%; height: var(--row-h); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); background: transparent; border: 0; text-align: left; font: var(--text-small); color: var(--body); cursor: pointer; user-select: none; }
.q-facet-row:hover { background: var(--hover); }
.q-facet-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-facet-row > span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.q-facet-row > span:last-child:where(:not(.q-danger, .q-ok)) { color: var(--dim); }
.q-facet-row.is-in, .q-facet-row.is-in:hover { background: color-mix(in oklch, var(--accent) 30%, transparent); color: var(--text); }
.q-facet-row.is-out, .q-facet-row.is-out:hover { background: color-mix(in oklch, var(--danger) 22%, transparent); color: var(--text); }

/* item: icon, name, detail line */
.q-item { display: grid; grid-template-columns: var(--icon-w) minmax(0, 1fr); column-gap: var(--space-3); align-items: center; min-width: 0; }
.q-item > img, .q-item > .q-item-icon { grid-row: 1 / 3; width: var(--icon-w); height: var(--icon-w); object-fit: cover; background: var(--raised); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.q-item-name { font: var(--text-body); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-item-sub { font: var(--text-meta); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-item.is-small { grid-template-columns: var(--chip-h) minmax(0, 1fr); }
.q-item.is-small > img, .q-item.is-small > .q-item-icon { grid-row: 1; width: var(--chip-h); height: var(--chip-h); }
.q-table td:has(> .q-item:not(.is-small)) { height: calc(var(--row-h) + var(--space-3)); }

/* tree: a q-table whose first cell indents by --depth */
.q-table.is-tree td:first-child { padding-left: calc(var(--space-3) + var(--depth) * var(--indent-w)); }
.q-twist { display: inline-grid; place-items: center; width: var(--chip-h); height: var(--chip-h); margin-right: var(--space-2); padding: 0; background: transparent; border: 0; color: var(--faint); cursor: pointer; font: var(--text-control); vertical-align: middle; }
.q-twist:hover { color: var(--text); }
.q-twist.is-leaf { visibility: hidden; }
.q-table.is-tree tr.is-branch td { color: var(--accent); }

/* signed numbers */
.q-delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-delta.is-up { color: var(--ok); }
.q-delta.is-down { color: var(--danger); }
.q-delta.is-flat { color: var(--faint); }
.q-num-stack { display: inline-grid; justify-items: end; line-height: 1.15; }
.q-num-stack > :last-child { font: var(--text-meta); font-variant-numeric: tabular-nums; opacity: 0.8; }

/* stat cards */
.q-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--stat-w)), 1fr)); }
.q-stats > .q-stat { background: var(--panel); border: var(--hairline) solid var(--line); padding: var(--space-2) var(--space-3); }
.q-stat-head { display: flex; align-items: center; gap: var(--space-3); }

/* marker: a small square beside a row or a heading */
.q-dot { --c: var(--faint); display: inline-block; width: var(--key-w); height: var(--key-w); background: var(--c); flex: none; vertical-align: middle; }
.q-dot.is-ok { --c: var(--ok); }
.q-dot.is-run { --c: var(--accent); }
.q-dot.is-warn { --c: var(--warn); }
.q-dot.is-danger { --c: var(--danger); }

/* charts: inline SVG drawn with these classes */
.q-chart { background: var(--panel); border: var(--hairline) solid var(--line); min-width: 0; display: flex; flex-direction: column; position: relative; }
.q-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-1) var(--space-3); }
.q-chart-title { font: var(--text-heading); }
.q-chart-unit { font: var(--text-control); color: var(--faint); }
.q-chart svg { display: block; width: 100%; height: var(--chart-h); overflow: visible; }
.q-chart > .q-stats { border-bottom: var(--hairline) solid var(--line); }
.q-pie { display: grid; grid-template-columns: var(--pie-w) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.q-pie svg { height: var(--pie-w); }
.q-pie-legend { display: grid; grid-template-columns: var(--key-w) repeat(3, max-content); gap: var(--space-2) var(--space-3); justify-content: start; font: var(--text-small); color: var(--dim); }
.q-pie-legend > span { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.q-pie-legend > span::before { content: ""; width: var(--key-w); height: var(--key-w); background: var(--c); }
.q-pie-legend .q-num { text-align: right; }
.q-pie-total { font: var(--text-data); font-variant-numeric: tabular-nums; fill: var(--text); }
.q-figure .q-unit { font: var(--text-body); }
.q-chart-body { padding: 0 var(--space-3) var(--space-2); }
.q-legend { display: flex; gap: var(--space-1) var(--space-4); flex-wrap: wrap; font: var(--text-small); color: var(--dim); }
.q-legend > span { display: inline-flex; align-items: center; gap: var(--space-3); }
.q-legend > span::before { content: ""; width: var(--key-w); height: var(--key-w); background: var(--c); }
.q-legend > span.is-line::before { height: var(--rule-w); }
.s1 { --c: var(--series-1); } .s2 { --c: var(--series-2); } .s3 { --c: var(--series-3); }
.s4 { --c: var(--series-4); } .s5 { --c: var(--series-5); } .s6 { --c: var(--series-6); }
.s-other { --c: var(--series-other); } .s-up { --c: var(--ok); } .s-down { --c: var(--danger); }
.q-grid-line { stroke: var(--line-soft); stroke-width: 1; shape-rendering: crispEdges; }
.q-axis-line { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.q-tick { font: var(--text-meta); font-variant-numeric: tabular-nums; fill: var(--faint); }
.q-value { font: var(--text-meta); font-variant-numeric: tabular-nums; fill: var(--text); }
.q-mark { fill: var(--c); }
.q-mark:hover, .q-mark.is-hot { filter: brightness(1.2); }
.q-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.q-area { fill: var(--c); fill-opacity: 0.1; stroke: none; }
.q-band { fill: var(--c); fill-opacity: 0.55; stroke: none; }
.q-band-edge { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linejoin: round; }
.s-total { --c: var(--text); }
.q-heat { display: grid; grid-template-columns: max-content repeat(var(--cols), minmax(0, 1fr)); gap: var(--hairline); }
.q-heat > .q-tick { color: var(--faint); line-height: var(--chip-h); white-space: nowrap; overflow: hidden; }
.q-heat > .q-tick:not(:empty) { padding-right: var(--space-3); }
.q-cell { --c: var(--raised); height: var(--chip-h); background: var(--c); }
.q-cell:hover, .q-cell.is-hot { box-shadow: inset 0 0 0 var(--hairline) var(--text); }
.h1 { --c: var(--seq-1); } .h2 { --c: var(--seq-2); } .h3 { --c: var(--seq-3); } .h4 { --c: var(--seq-4); } .h5 { --c: var(--seq-5); }
.q-ramp { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--text-meta); font-variant-numeric: tabular-nums; color: var(--faint); }
.q-ramp > i { width: var(--key-w); height: var(--key-w); background: var(--c); }
.q-ramp > :first-child { margin-right: var(--space-2); }
.q-ramp > :last-child { margin-left: var(--space-2); }
.q-key { display: inline-block; width: var(--key-w); height: var(--key-w); background: var(--c); flex: none; }
.q-point { fill: var(--c); stroke: var(--panel); stroke-width: 2; }
.q-cross { stroke: var(--dim); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.q-slice { fill: var(--c); stroke: var(--panel); stroke-width: 2; }
.q-tip { position: absolute; pointer-events: none; min-width: var(--tip-w); padding: var(--space-2) var(--space-3); background: var(--raised); border: var(--hairline) solid var(--line); font: var(--text-meta); color: var(--text); display: grid; gap: var(--space-1); z-index: 1; }
.q-tip[hidden] { display: none; }
.q-tip-row { display: grid; grid-template-columns: var(--key-w) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.q-tip-row::before { content: ""; width: var(--key-w); height: var(--key-w); background: var(--c); }
.q-tip-row > :last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* text colour helpers come last so they win over a component's own text colour */
.q-dim { color: var(--dim); }
.q-faint { color: var(--faint); }
.q-ok { color: var(--ok); }
.q-warn { color: var(--warn); }
.q-danger { color: var(--danger); }
.q-run { color: var(--accent); }

.q-btn, .q-seg > button, .q-list-item, .q-tile, .q-nav > a { transition: background-color 0.12s, color 0.12s; }
.q-progress:indeterminate { animation: q-sweep 1.4s linear infinite; }
@keyframes q-sweep { from { background-position-x: 100%; } to { background-position-x: 0; } }

:root {
  --bg: oklch(0.155 0.008 260);
  --panel: oklch(0.18 0.008 260);
  --hover: oklch(0.2 0.01 260);
  --raised: oklch(0.235 0.012 260);
  --line: oklch(0.27 0.01 260);
  --line-soft: oklch(0.22 0.01 260);
  --text: oklch(0.93 0.005 260);
  --body: oklch(0.87 0.006 260);
  --dim: oklch(0.74 0.01 260);
  --faint: oklch(0.62 0.012 260);
  --accent: oklch(0.76 0.12 230);
  --ok: oklch(0.78 0.13 150);
  --warn: oklch(0.85 0.13 92);
  --danger: oklch(0.74 0.16 25);
  --series-1: oklch(0.66 0.12 235);
  --series-2: oklch(0.66 0.15 50);
  --series-3: oklch(0.64 0.16 350);
  --series-4: oklch(0.66 0.11 110);
  --series-5: oklch(0.6 0.16 295);
  --series-6: oklch(0.64 0.11 180);
  --series-other: oklch(0.45 0.01 260);
  --seq-1: oklch(0.3 0.05 235);
  --seq-2: oklch(0.42 0.08 235);
  --seq-3: oklch(0.54 0.1 235);
  --seq-4: oklch(0.66 0.12 235);
  --seq-5: oklch(0.8 0.11 235);
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.5rem;
  --space-4: 0.625rem;
  --radius-0: 0;
  --hairline: 0.0625rem;
  --rule-w: 0.125rem;
  --bar-h: 0.375rem;
  --key-w: 0.625rem;
  --thumb-w: 0.625rem;
  --check-w: 0.875rem;
  --thumb-h: 1rem;
  --chip-h: 1.25rem;
  --indent-w: 1.5rem;
  --column-w: 1.5rem;
  --control-h: 1.75rem;
  --row-h: 1.875rem;
  --icon-w: 2rem;
  --big-h: 2.25rem;
  --tag-w: 2.75rem;
  --state-w: 5.5rem;
  --tip-w: 9rem;
  --tile-w: 10rem;
  --chart-h: 13rem;
  --pie-w: 13rem;
  --stat-w: 12rem;
  --status-w: 12rem;
  --facet-w: 16rem;
  --panel-w: 24rem;
  --font-mono: "Source Code Pro", ui-monospace, Consolas, monospace;
  --font-sans: "Oxanium", system-ui, sans-serif;
  --text-title: 600 1rem/1.25 var(--font-sans);
  --text-heading: 600 0.8125rem/1.3 var(--font-sans);
  --text-body: 400 0.875rem/1.4 var(--font-sans);
  --text-small: 400 0.8125rem/1.35 var(--font-sans);
  --text-label: 500 0.6875rem/1.3 var(--font-mono);
  --text-label-tracking: 0.06em;
  --text-data: 400 0.8125rem/1.35 var(--font-mono);
  --text-control: 400 0.75rem/1.3 var(--font-mono);
  --text-meta: 400 0.6875rem/1.3 var(--font-mono);
  --text-log: 400 0.8125rem/1.55 var(--font-mono);
  --text-figure: 500 1.5rem/1.1 var(--font-mono);
}