@layer theme {
	/* One thin meter for every .cbi-progressbar: track + accent fill, title value floated above
	 * the right edge instead of stuffed inside a fat pill. Default reserves that value's own line
	 * in flow (bootstrap's margin:1.4em model) — an abspos value with zero reserve spilled 5-6px
	 * UP across the divider of the row above, off the overview page (key/value .table, no header
	 * row). Contexts that put the value BESIDE the bar or on a neighbour's line opt out with
	 * margin-block-start: 0. */
	.cbi-progressbar {
		position: relative;
		height: 10px;
		background: var(--fs-track);
		border: 0;
		border-radius: var(--fs-radius-pill);
		overflow: visible;
		min-width: 120px;
		margin: 0;
		margin-block-start: calc(var(--fs-type-xs) * var(--fs-leading));
	}
	.cbi-progressbar > div {
		height: 100%;
		background: var(--fs-accent);
		border-radius: var(--fs-radius-pill);
		transition: width var(--fs-dur-fill);
	}
	/* Colour carries the reading too: data-fs-level set from JS (80/92% thresholds) every poll
	 * tick. Solid tokens, no color-mix, nothing owed to 04-nocolormix.css. */
	.cbi-progressbar[data-fs-level="warn"] > div {
		background: var(--fs-warn);
	}
	.cbi-progressbar[data-fs-level="danger"] > div {
		background: var(--fs-danger);
	}
	.cbi-progressbar::after {
		content: attr(title);
		position: absolute; inset-inline: auto 0; bottom: calc(100% + var(--fs-space-1)); top: auto;
		font-family: var(--fs-font-mono); font-size: var(--fs-type-xs); font-weight: var(--fs-weight-normal);
		color: var(--fs-dim); white-space: nowrap; text-shadow: none;
	}

	/* Value moves BESIDE the bar where the row has no name above it: a CBI form row and a table
	 * meter column, sharing one geometry via --fs-meter-value. One rule per shape, chosen instead
	 * of :is() — the table half needs :has(), and in a plain list a non-parsing engine drops the
	 * whole rule, form row included. */
	.cbi-value-field > .cbi-progressbar {
		margin-inline-end: var(--fs-meter-value);
		margin-block-start: 0;
		--fs-meter-value: calc(var(--fs-space-10) * 2);
	}
	.cbi-value-field > .cbi-progressbar::after {
		inset-inline: calc(100% + var(--fs-space-2)) auto; bottom: auto; top: 50%;
		transform: translateY(-50%);
	}
	.cbi-section .table:has(.tr.table-titles) .td .cbi-progressbar {
		margin-inline-end: var(--fs-meter-value);
		margin-block-start: 0;
		--fs-meter-value: var(--fs-space-10);
		min-width: 60px; /* narrower and it stops reading as a meter; the column gives up the rest */
	}
	.cbi-section .table:has(.tr.table-titles) .td .cbi-progressbar::after {
		inset-inline: calc(100% + var(--fs-space-2)) auto; bottom: auto; top: 50%;
		transform: translateY(-50%);
	}

	/* Carded: "beside" ran the value over the neighbouring column's label (`.fs-stacked` halves
	 * the row). Back over the bar with a one-line top margin (was 6-9px overlap).
	 * `:has(.tr.table-titles)` stays for SPECIFICITY, matching the beside-rule's (0,6,0). */
	.cbi-section .table.fs-stacked:has(.tr.table-titles) .td .cbi-progressbar {
		margin-inline-end: 0;
		margin-block-start: calc(var(--fs-type-xs) * var(--fs-leading));
	}
	.cbi-section .table.fs-stacked:has(.tr.table-titles) .td .cbi-progressbar::after {
		inset-inline: auto 0;
		bottom: calc(100% + var(--fs-space-1));
		top: auto;
		transform: none;
	}
}