/**
 * Health Assessment — thin fallback layer. SPEC §10.7.
 *
 * The requirement is that the plugin looks like it belongs to the host site,
 * and the way to achieve that is to write as little CSS as possible and let the
 * cascade work.
 *
 * So this file provides LAYOUT and only the colours the app actually means —
 * good, bad, neutral, and the VO2 band colours. Typography, buttons, inputs and
 * surfaces are left to the theme.
 *
 * Rules kept throughout:
 *   - Every class is namespaced ha-, and everything is scoped under .ha-app.
 *   - No bare element selectors, which would restyle the host page.
 *   - Specificity never exceeds one class. No !important, no IDs.
 *   - box-sizing is scoped, never global.
 *   - No web fonts, no icon fonts, no framework.
 */

/* ---------------------------------------------------------------------
 * Tokens
 *
 * Mapped from theme.json where a block theme exposes it, with fallbacks that
 * work in a classic theme. This one block is the single most effective thing in
 * §10.7: the plugin adopts the site's palette, fonts and rhythm from it.
 * ------------------------------------------------------------------ */

.ha-app {
	--ha-font: var(--wp--preset--font-family--body, inherit);
	--ha-text: var(--wp--preset--color--foreground, #1a1a1a);
	--ha-text-muted: color-mix(in srgb, var(--ha-text) 65%, transparent);
	--ha-bg: var(--wp--preset--color--background, #ffffff);
	--ha-surface: color-mix(in srgb, var(--ha-text) 4%, var(--ha-bg));
	--ha-border: color-mix(in srgb, var(--ha-text) 18%, transparent);
	--ha-accent: var(--wp--preset--color--primary, #2a6fb0);

	/* The workbook's own semantics, kept. */
	--ha-good: #00752f;
	--ha-good-bright: #00b050;
	--ha-bad: #c62828;
	--ha-bad-bright: #ff0000;
	--ha-neutral: #6b6b6b;

	/* VO2 bands, 1 to 6 (§4.9). */
	--ha-band-1: #ff0000;
	--ha-band-2: #e06666;
	--ha-band-3: #e8a33d;
	--ha-band-4: #92d050;
	--ha-band-5: #00b050;
	--ha-band-6: #2e75b6;

	/* Chart series. */
	--ha-series-1: var(--ha-accent);
	--ha-series-2: #b5651d;
	--ha-series-3: #6a4c93;
	--ha-series-4: #00752f;
	--ha-series-5: #c62828;
	--ha-series-6: #00808a;

	--ha-gap: var(--wp--style--block-gap, 1rem);
	--ha-radius: 6px;

	color: var(--ha-text);
	font-family: var(--ha-font);
}

.ha-app * {
	box-sizing: border-box;
}

/* A transparent panel borrows whatever the host paints behind it, so the
   surfaces below set their own background explicitly. */

@media (prefers-color-scheme: dark) {
	.ha-app {
		--ha-text: var(--wp--preset--color--foreground, #ececec);
		--ha-bg: var(--wp--preset--color--background, #121212);
		--ha-good: #6ede8a;
		--ha-bad: #ff8a80;
		--ha-neutral: #9e9e9e;
	}
}

/* ---------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------ */

.ha-app {
	display: block;
	max-width: 100%;
}

.ha-section {
	margin-block: var(--ha-gap);
}

.ha-card {
	background: var(--ha-surface);
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	padding: var(--ha-gap);
	margin-block: var(--ha-gap);
}

.ha-card-title {
	margin-block: 0 0.5em;
}

.ha-grid {
	display: grid;
	gap: var(--ha-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.ha-grid-2 {
	display: grid;
	gap: var(--ha-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.ha-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ha-gap);
	align-items: flex-end;
}

.ha-stack > * + * {
	margin-block-start: 0.75rem;
}

.ha-muted {
	color: var(--ha-text-muted);
}

.ha-small {
	font-size: 0.875em;
}

/* Wide content scrolls inside its own container; the page never scrolls
   sideways. */
.ha-scroll-x {
	overflow-x: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------------------
 * Forms
 *
 * font: inherit on every control is the one declaration that stops a plugin
 * form looking foreign — browsers do not inherit font into form elements.
 * ------------------------------------------------------------------ */

.ha-app .ha-input,
.ha-app .ha-select,
.ha-app .ha-textarea {
	font: inherit;
	color: inherit;
	max-width: 100%;
}

.ha-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.ha-field-label {
	font-weight: 600;
}

.ha-field-help {
	color: var(--ha-text-muted);
	font-size: 0.875em;
}

.ha-input--warn {
	outline: 2px solid var(--ha-band-3);
	outline-offset: 1px;
}

/* Tap targets stay usable one-handed on a phone at the gym (§9.3). */
.ha-app .ha-input,
.ha-app .ha-select,
.ha-app .ha-btn {
	min-height: 44px;
}

/* ---------------------------------------------------------------------
 * The caliper diagram
 *
 * Three columns: inputs, figure, inputs. Each input is pinned to a percentage
 * of the figure's height (--ha-slot, set per site in HA_Constants) and draws a
 * leader out to the edge of the figure, where the SVG arrow picks it up and
 * carries on to the point itself.
 *
 * Percentages work because the figure column is what sets the row height, and
 * the overlay SVG shares the figure's viewBox — so one coordinate system runs
 * from the input all the way to the arrowhead, at any width.
 *
 * Below the breakpoint there is not enough width for callouts either side, so
 * the whole thing becomes the plain stacked grid instead.
 * ------------------------------------------------------------------ */

.ha-caliper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 460px) minmax(0, 1fr);
	gap: 0 clamp(0.75rem, 3vw, 2rem);
	align-items: stretch;
	margin-block: var(--ha-gap);
}

.ha-caliper-figure {
	position: relative;
	min-width: 0;
}

.ha-caliper-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.ha-caliper-arrows {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.ha-caliper-arrows .ha-arrow-line {
	stroke: var(--ha-border-strong, var(--ha-text-muted));
	stroke-width: 1.5;
	stroke-dasharray: 3 3;
}

.ha-caliper-arrows marker path {
	fill: var(--ha-accent);
}

/* The measurement marks. Drawn rather than printed into the picture, so the
   phone layout can show one at a time; the colour and weight match what the
   artwork had. */
.ha-caliper-arrows .ha-site-mark {
	stroke: var(--ha-mark, #cc2222);
	stroke-linecap: round;
}

.ha-caliper-col {
	position: relative;
	min-width: 0;
}

/* The gutter the leader line lives in. */
.ha-caliper-col--left {
	padding-inline-end: 2rem;
	text-align: end;
}

.ha-caliper-col--right {
	padding-inline-start: 2rem;
}

.ha-callout {
	position: absolute;
	top: var(--ha-slot, 50%);
	inset-inline: 0;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.ha-callout .ha-field-label {
	font-size: 0.75rem;
	line-height: 1.25;
}

/* The leader, from the input out to the edge of the figure, meeting the arrow
   the SVG draws from there. */
.ha-callout::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 2rem;
	border-top: 1.5px dashed var(--ha-border-strong, var(--ha-text-muted));
}

.ha-caliper-col--left .ha-callout::after {
	inset-inline-end: -2rem;
}

.ha-caliper-col--right .ha-callout::after {
	inset-inline-start: -2rem;
}

.ha-caliper-note {
	margin-block-start: 0.5rem;
}

/* Focusing an input lifts its own arrow out of the set, which is the whole
   point of putting the inputs on a figure. The class is added by the capture
   script; both rules sit at the same specificity so order decides, and the
   diagram is complete without either of them. */
.ha-arrows-focused .ha-arrow {
	opacity: 0.3;
}

.ha-arrows-focused .ha-arrow--active {
	opacity: 1;
}

.ha-arrow--active line {
	stroke: var(--ha-accent);
	stroke-dasharray: none;
	stroke-width: 2;
}

/* ---------------------------------------------------------------------
 * One measurement at a time
 *
 * There is no room in a narrow column for callouts down both sides of a
 * figure, and shrinking the whole diagram to fit makes every label unreadable
 * at once. So where it is cramped the same markup becomes a wizard: the
 * picture at full width with a single red mark on it, one input, and
 * next/back.
 *
 * The switch is on the class, not on a media query, because the question is
 * how much room THIS diagram has and not how wide the window is. A phone on a
 * theme with no viewport meta tag reports 980px; a builder column can be
 * 300px on a 4K screen. The capture script measures the element and sets the
 * class. The media query below is only the fallback for no JavaScript.
 * ------------------------------------------------------------------ */

.ha-caliper.is-stepped {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.ha-caliper.is-stepped .ha-caliper-figure {
	display: block;
	order: 1;
	width: 100%;
	max-width: min(100%, 320px);
}

.ha-caliper.is-stepped .ha-caliper-view {
	order: 2;
}

.ha-caliper.is-stepped .ha-caliper-col {
	display: block;
	order: 3;
	width: 100%;
	max-width: 320px;
	padding: 0;
	text-align: start;
}

.ha-caliper.is-stepped .ha-caliper-nav {
	order: 4;
}

/* Everything not being measured right now is out of the way — including its
   red mark, which is the whole reason the marks are drawn rather than printed
   into the picture. */
.ha-caliper.is-stepped .ha-callout,
.ha-caliper.is-stepped .ha-arrow {
	display: none;
}

.ha-caliper.is-stepped .ha-callout.is-step {
	display: block;
	position: static;
	transform: none;
	text-align: center;
}

.ha-caliper.is-stepped .ha-arrow.is-step {
	display: block;
}

.ha-caliper.is-stepped .ha-callout::after {
	display: none;
}

.ha-caliper.is-stepped .ha-callout .ha-field-label {
	font-size: 1rem;
	margin-block-end: 0.35rem;
}

.ha-caliper.is-stepped .ha-callout .ha-input {
	max-width: 100%;
	font-size: 1.25rem;
	text-align: center;
}

/* The leader runs from the edge of the picture to the mark. Beside a callout
   that is a connecting line; above one it needs to read as a pointer on its
   own, so pathLength lets CSS draw the half nearest the mark, solid and in
   the accent colour, with the same arrowhead on the end. */
.ha-caliper.is-stepped .ha-arrow-line {
	stroke: var(--ha-accent);
	stroke-width: 3;
	stroke-dasharray: 45 100;
	stroke-dashoffset: -55;
}

/* The step controls. Built by the capture script, so they only exist where
   the stepper does. */
.ha-caliper-view {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ha-text-muted);
}

.ha-caliper-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 320px;
}

.ha-caliper-nav .ha-btn {
	flex: 1 1 auto;
}

.ha-caliper-count {
	flex: 1 0 100%;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--ha-text-muted);
	font-variant-numeric: tabular-nums;
}

.ha-caliper-pips {
	display: flex;
	justify-content: center;
	gap: 0.35rem;
	flex: 1 0 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}

.ha-caliper-pip {
	width: 0.85rem;
	height: 0.85rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--ha-border-strong, var(--ha-text-muted));
	background: transparent;
	cursor: pointer;
}

.ha-caliper-pip[aria-current="true"] {
	background: var(--ha-accent);
	border-color: var(--ha-accent);
}

.ha-caliper-pip[data-ha-done="yes"] {
	background: var(--ha-good);
	border-color: var(--ha-good);
}

.ha-caliper-pip[aria-current="true"][data-ha-done="yes"] {
	box-shadow: inset 0 0 0 2px var(--ha-bg);
}

/* No JavaScript: no stepper, so a cramped screen gets the plain list. */
@media (max-width: 900px) {
	.ha-caliper:not(.is-stepped) {
		display: block;
	}

	.ha-caliper:not(.is-stepped) .ha-caliper-figure {
		display: none;
	}

	.ha-caliper:not(.is-stepped) .ha-caliper-col {
		display: grid;
		gap: 0.5rem var(--ha-gap);
		grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
		padding: 0;
		text-align: start;
	}

	.ha-caliper:not(.is-stepped) .ha-callout {
		position: static;
		transform: none;
		display: grid;
		grid-template-columns: 1fr 6.5rem;
		gap: 0.5rem;
		align-items: center;
	}

	.ha-caliper:not(.is-stepped) .ha-callout::after {
		display: none;
	}
}

/* The refusal panel. It is the end of the road for whoever is reading it, so
   it gets room rather than being squeezed into a one-line notice. */
.ha-denied {
	max-width: 46ch;
}

.ha-denied .ha-actions {
	margin-block-start: 0.75rem;
}

/* The correction link in the measurement log. Quiet: it sits on every row and
   must not compete with the numbers it is there to fix. */
.ha-edit-link {
	font-size: 0.8125em;
	white-space: nowrap;
}

.ha-measure-grid {
	display: grid;
	gap: 0.5rem var(--ha-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.ha-measure-row {
	display: grid;
	grid-template-columns: 1fr 6.5rem;
	gap: 0.5rem;
	align-items: center;
}

.ha-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: var(--ha-gap);
}

.ha-status {
	min-height: 1.5em;
	font-size: 0.9375em;
}

.ha-status--error {
	color: var(--ha-bad);
}

.ha-sites-count {
	color: var(--ha-text-muted);
	font-variant-numeric: tabular-nums;
}

.ha-sites-count--complete {
	color: var(--ha-good);
}

/* ---------------------------------------------------------------------
 * Tabs
 * ------------------------------------------------------------------ */

.ha-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--ha-border);
	margin-block-end: var(--ha-gap);
}

.ha-tab {
	font: inherit;
	background: none;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--ha-radius) var(--ha-radius) 0 0;
	padding: 0.5rem 1rem;
	cursor: pointer;
	color: inherit;
}

.ha-tab[aria-selected="true"] {
	background: var(--ha-surface);
	border-color: var(--ha-border);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Preview and report panels
 * ------------------------------------------------------------------ */

.ha-preview {
	background: var(--ha-surface);
	border: 1px dashed var(--ha-border);
	border-radius: var(--ha-radius);
	padding: var(--ha-gap);
}

.ha-preview-block--unavailable {
	opacity: 0.55;
}

.ha-figure {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.ha-figure-label {
	font-size: 0.8125em;
	color: var(--ha-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ha-figure-value {
	font-size: 1.375em;
	font-variant-numeric: tabular-nums;
}

/* The delta is the dominant element on a progress block; the workbook sets it
   at 24 pt (§7.3). */
.ha-delta {
	font-size: clamp(1.75rem, 5vw, 2.25rem);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	display: flex;
	align-items: center;
	gap: 0.25em;
}

.ha-delta.ha-good {
	color: var(--ha-good);
}

.ha-delta.ha-bad {
	color: var(--ha-bad);
}

.ha-delta.ha-neutral {
	color: var(--ha-neutral);
}

.ha-delta-arrow {
	line-height: 1;
}

.ha-delta-note {
	font-size: 0.8125em;
	color: var(--ha-text-muted);
	margin-block-start: 0.25rem;
}

/* ---------------------------------------------------------------------
 * Silhouette
 * ------------------------------------------------------------------ */

.ha-silhouette {
	display: flex;
	gap: var(--ha-gap);
	align-items: flex-start;
	flex-wrap: wrap;
}

.ha-silhouette-figure {
	/* The figures are transparent SVG, so they need no card behind them and
	   sit on whatever the theme paints — light or dark (§7.2). */
	margin: 0;
	flex: 0 0 auto;
	max-width: 12rem;
}

.ha-silhouette-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.ha-silhouette-numbers {
	flex: 1 1 12rem;
	min-width: 0;
}

/* ---------------------------------------------------------------------
 * VO2 indicator and norms
 * ------------------------------------------------------------------ */

.ha-vo2-scale {
	display: flex;
	gap: 3px;
	align-items: center;
}

.ha-vo2-pip {
	width: 1.75rem;
	height: 0.5rem;
	border-radius: 2px;
	background: var(--ha-border);
}

.ha-vo2-pip--on-1 { background: var(--ha-band-1); }
.ha-vo2-pip--on-2 { background: var(--ha-band-2); }
.ha-vo2-pip--on-3 { background: var(--ha-band-3); }
.ha-vo2-pip--on-4 { background: var(--ha-band-4); }
.ha-vo2-pip--on-5 { background: var(--ha-band-5); }
.ha-vo2-pip--on-6 { background: var(--ha-band-6); }

.ha-table {
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

.ha-table th,
.ha-table td {
	border: 1px solid var(--ha-border);
	padding: 0.375rem 0.5rem;
	text-align: left;
}

.ha-norms-hit {
	background: color-mix(in srgb, var(--ha-accent) 22%, transparent);
	font-weight: 700;
	outline: 2px solid var(--ha-accent);
	outline-offset: -2px;
}

/* ---------------------------------------------------------------------
 * Charts
 * ------------------------------------------------------------------ */

.ha-chart {
	margin-block: var(--ha-gap);
	min-width: 0;
}

/* Two charts to a row. The chart is drawn to a viewBox and scaled by CSS, so
   half the width is half the height — the whole set can be taken in at a
   glance instead of scrolled through.

   It falls back to one column when there is not the room, and the room in
   question is the container's, not the window's: a report can sit in a
   builder column on a wide screen. The container type goes on the SECTION
   rather than the grid, because an element cannot answer its own container
   query — put it on the grid and the query never matches, which is exactly
   what it did first time round. */
.ha-charts {
	container-type: inline-size;
}

.ha-chart-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--ha-gap);
}

@container (max-width: 640px) {
	.ha-chart-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Without container queries, fall back to asking the window. */
@supports not (container-type: inline-size) {
	@media (max-width: 700px) {
		.ha-chart-grid-2 {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}

.ha-chart-svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.ha-chart-grid {
	stroke: var(--ha-border);
	stroke-width: 1;
}

.ha-chart-tick {
	fill: var(--ha-text-muted);
	font-size: 11px;
	font-family: var(--ha-font);
}

.ha-chart-line {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.ha-chart-target {
	stroke: var(--ha-neutral);
	stroke-width: 1.5;
	stroke-dasharray: 6 4;
}

.ha-chart-dot {
	stroke: var(--ha-bg);
	stroke-width: 1.5;
}

.ha-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ha-gap);
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.875em;
}

.ha-chart-legend li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.ha-chart-swatch {
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 2px;
	display: inline-block;
}

.ha-chart-table {
	margin-block-start: 0.5rem;
	font-size: 0.875em;
}

.ha-chart-table summary {
	cursor: pointer;
}

.ha-chart-empty {
	color: var(--ha-text-muted);
	font-style: italic;
}

/* ---------------------------------------------------------------------
 * Notices
 * ------------------------------------------------------------------ */

.ha-notice {
	border-left: 4px solid var(--ha-accent);
	background: var(--ha-surface);
	padding: 0.75rem var(--ha-gap);
	border-radius: 0 var(--ha-radius) var(--ha-radius) 0;
	margin-block: var(--ha-gap);
}

.ha-notice--warn {
	border-left-color: var(--ha-band-3);
}

.ha-notice--empty {
	border-left-color: var(--ha-neutral);
}

.ha-warnings {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.ha-warnings li {
	border-left: 3px solid var(--ha-band-3);
	padding-left: 0.625rem;
	margin-block-start: 0.375rem;
}

.ha-safety-notes {
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	padding: var(--ha-gap);
	background: var(--ha-surface);
}

/* Screen-reader-only text, for the word forms of deltas (§12.M). */
.ha-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ha-app * {
		animation-duration: 0.01ms;
		transition-duration: 0.01ms;
	}
}

/* ---------------------------------------------------------------------
 * Formula chooser
 *
 * A calculation choice is a real decision with a real consequence, so each
 * option carries its reasoning rather than being a line in a dropdown (§6.1).
 * ------------------------------------------------------------------ */

.ha-choice {
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	padding: var(--ha-gap);
	margin-block: var(--ha-gap);
}

.ha-choice-option {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: 0.15rem 0.5rem;
	align-items: start;
	padding: 0.7rem 0.5rem;
	border-top: 1px solid var(--ha-border);
	cursor: pointer;
}

.ha-choice-option:first-of-type {
	border-top: none;
}

.ha-choice-option:hover {
	background: var(--ha-surface);
}

.ha-choice-option--off {
	opacity: 0.6;
	cursor: default;
}

.ha-choice-option input {
	margin-top: 0.3rem;
}

.ha-choice-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.ha-choice-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
}

.ha-choice-label {
	font-weight: 600;
}

.ha-choice-equation {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.8125em;
	color: var(--ha-text-muted);
}

.ha-choice-badge {
	font-size: 0.6875em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.1em 0.45em;
	border-radius: 2px;
	background: color-mix(in srgb, var(--ha-accent) 16%, transparent);
	color: var(--ha-accent);
	white-space: nowrap;
}

.ha-choice-badge--quiet {
	background: color-mix(in srgb, var(--ha-text) 8%, transparent);
	color: var(--ha-text-muted);
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.8125em;
}

.ha-choice-figure {
	font-variant-numeric: tabular-nums;
	color: var(--ha-accent);
	font-size: 0.875em;
}

.ha-choice-summary {
	font-size: 0.9375em;
}

.ha-choice-detail {
	font-size: 0.875em;
	color: var(--ha-text-muted);
	max-width: 62ch;
}

.ha-choice-detail--off {
	color: var(--ha-band-3);
}