/**
 * Health Assessment — the plugin's own theme. SPEC §10.7.
 *
 * Loaded when Styling is set to "Plugin theme". Where app.css deliberately
 * writes as little as possible so the host theme shows through, this file is
 * the opposite: it owns the palette, the controls and the rhythm, so the
 * screens look deliberate on a theme that styles nothing.
 *
 * Palette: orange, black, white and grey. Orange is the only saturated colour
 * in the interface and it is spent on one thing at a time — the primary
 * action, the marker beside a heading, the first chart series. Everything else
 * is greyscale, which is what stops a bright accent becoming noise.
 *
 * The exception is focus. Focus is blue, on purpose: it has to be unmistakably
 * "the browser is telling you something", not another orange element among
 * orange elements.
 *
 * Rules kept from app.css: everything scoped under .ha-app, specificity never
 * above two classes, no !important, no IDs, no web fonts, no external assets.
 */

/* ---------------------------------------------------------------------
 * Palette
 * ------------------------------------------------------------------ */

.ha-app {
	--ha-accent: #f26522;
	--ha-accent-strong: #d4521a;
	--ha-accent-ink: #ffffff;
	--ha-accent-soft: #fff1e8;

	--ha-text: #16181c;
	--ha-text-muted: #6b7280;
	--ha-bg: #ffffff;
	--ha-surface: #f6f7f8;
	--ha-surface-2: #eceef1;
	--ha-border: #dcdfe3;
	--ha-border-strong: #c2c7cd;

	--ha-field-bg: #ffffff;
	--ha-field-border: #d3d8dd;
	--ha-field-border-hover: #aeb5bd;

	/* A control is a raised surface, not a hole cut in the page: a face with a
	   little shading down it, a highlight along the top edge where the light
	   would catch, and a shadow underneath. All four are slight on purpose —
	   a form of thirty inputs turns any one of them into thirty. */
	--ha-field-face: linear-gradient(180deg, #ffffff, #f6f7f9);
	--ha-field-radius: 12px;
	--ha-field-shadow: 0 1px 2px rgba(16, 18, 22, 0.07), 0 1px 1px rgba(16, 18, 22, 0.04);
	--ha-field-shadow-hover: 0 2px 7px -2px rgba(16, 18, 22, 0.16), 0 1px 2px rgba(16, 18, 22, 0.06);
	--ha-field-inner: inset 0 1px 0 rgba(255, 255, 255, 0.9);

	/* Focus. Blue, and deliberately the only blue in the interface. */
	--ha-focus: #3d9bff;
	--ha-focus-bright: #8fcbff;
	--ha-focus-edge: #6bb2ff;
	--ha-halo-soft: rgba(61, 155, 255, 0.20);
	--ha-halo-strong: rgba(61, 155, 255, 0.45);
	--ha-halo-rest: rgba(61, 155, 255, 0.16);

	--ha-shadow-1: 0 1px 2px rgba(16, 18, 22, 0.06);
	--ha-shadow-2: 0 2px 10px -4px rgba(16, 18, 22, 0.16);

	/* Chart series: orange leads, then greys and cool tones behind it. */
	--ha-series-1: #f26522;
	--ha-series-2: #3f4750;
	--ha-series-3: #2f7fb5;
	--ha-series-4: #00875a;
	--ha-series-5: #b3261e;
	--ha-series-6: #6a4c93;

	/* Compact by default. Tap targets are restored below on touch. */
	--ha-gap: 0.875rem;
	--ha-gap-sm: 0.5rem;
	--ha-radius: 10px;
	--ha-radius-sm: 8px;
	--ha-control-h: 38px;

	background: var(--ha-bg);
	color: var(--ha-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
	.ha-app {
		--ha-accent: #ff7a34;
		--ha-accent-strong: #ff8f52;
		--ha-accent-ink: #16181c;
		--ha-accent-soft: #33210f;

		--ha-text: #f1f3f5;
		--ha-text-muted: #a3aab3;
		--ha-bg: #131417;
		--ha-surface: #1b1d21;
		--ha-surface-2: #24272c;
		--ha-border: #31353b;
		--ha-border-strong: #444a52;

		--ha-field-bg: #1b1d21;
		--ha-field-border: #3a3f46;
		--ha-field-border-hover: #565d66;

		/* The light comes from the same place; there is just less of it. */
		--ha-field-face: linear-gradient(180deg, #21242a, #1a1c20);
		--ha-field-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
		--ha-field-shadow-hover: 0 2px 8px -2px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.5);
		--ha-field-inner: inset 0 1px 0 rgba(255, 255, 255, 0.05);

		--ha-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
		--ha-shadow-2: 0 2px 12px -4px rgba(0, 0, 0, 0.6);

		--ha-series-2: #aab2bb;
	}
}

/* ---------------------------------------------------------------------
 * Surfaces
 * ------------------------------------------------------------------ */

.ha-app .ha-card {
	background: var(--ha-bg);
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	box-shadow: var(--ha-shadow-1);
	padding: 0.9rem 1rem 1rem;
	margin-block: var(--ha-gap);
}

/* An orange marker on the heading, rather than an orange heading — the accent
   reads as structure that way instead of as decoration. */
.ha-app .ha-card-title {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.005em;
	color: var(--ha-text);
	border-inline-start: 3px solid var(--ha-accent);
	padding-inline-start: 0.55rem;
	margin-block: 0 0.75rem;
	max-width: 100%;
}

.ha-app .ha-preview {
	background: var(--ha-surface);
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
}

/* ---------------------------------------------------------------------
 * Fields
 * ------------------------------------------------------------------ */

.ha-app .ha-field {
	gap: 0.3rem;
}

.ha-app .ha-field-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ha-text-muted);
}

.ha-app .ha-field-help {
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--ha-text-muted);
}

.ha-app .ha-input,
.ha-app .ha-select,
.ha-app .ha-textarea {
	--ha-fx-angle: 0deg;
	--ha-fx-arc: transparent;
	--ha-fx-ring: transparent;
	--ha-fx-halo: transparent;

	appearance: none;
	width: 100%;
	min-height: var(--ha-control-h);
	padding: 0.45rem 0.75rem;
	border: 2px solid transparent;
	border-radius: var(--ha-field-radius);
	color: var(--ha-text);
	font-variant-numeric: tabular-nums;

	/* The border is painted, not bordered.
	 *
	 * A real border cannot hold a gradient, and the focus effect below is a
	 * gradient that travels around the edge. So the border is 2px of
	 * transparency, and four background layers are painted through it:
	 *
	 *   1. the interior, clipped to the padding box, which hides layers 2-4
	 *      everywhere except the border itself;
	 *   2. the full-edge flash;
	 *   3. the travelling arc;
	 *   4. the resting border colour.
	 *
	 * Every colour in 2-4 starts transparent, so with no animation running
	 * only the resting border is visible. */
	background:
		var(--ha-field-face) padding-box,
		linear-gradient(var(--ha-fx-ring), var(--ha-fx-ring)) border-box,
		conic-gradient(from var(--ha-fx-angle),
			transparent 0deg, transparent 300deg,
			var(--ha-fx-arc) 350deg, transparent 360deg) border-box,
		conic-gradient(from var(--ha-fx-angle),
			transparent 0deg, transparent 225deg,
			var(--ha-fx-arc) 350deg, transparent 360deg) border-box,
		linear-gradient(var(--ha-field-border), var(--ha-field-border)) border-box;
	/* The focus halo rides on the same property, and is transparent until the
	   trace runs — so the resting shadow is simply always there. */
	box-shadow: var(--ha-field-inner), var(--ha-field-shadow), 0 0 0 4px var(--ha-fx-halo);
	transition: box-shadow 0.18s ease, border-color 0.15s ease;
}

.ha-app .ha-textarea {
	min-height: 5rem;
	padding-block: 0.5rem;
	line-height: 1.5;
}

.ha-app .ha-input:hover,
.ha-app .ha-select:hover,
.ha-app .ha-textarea:hover {
	--ha-field-border: var(--ha-field-border-hover);
	box-shadow: var(--ha-field-inner), var(--ha-field-shadow-hover), 0 0 0 4px var(--ha-fx-halo);
}

.ha-app .ha-input::placeholder,
.ha-app .ha-textarea::placeholder {
	color: var(--ha-text-muted);
	opacity: 0.75;
}

.ha-app .ha-input:disabled,
.ha-app .ha-select:disabled,
.ha-app .ha-textarea:disabled {
	--ha-field-face: linear-gradient(var(--ha-surface-2), var(--ha-surface-2));
	color: var(--ha-text-muted);
	cursor: not-allowed;
	box-shadow: none;
}

/* The select loses its native arrow to appearance:none, so one is painted
   back on top of the interior layer. Inline SVG, no external asset. */
.ha-app .ha-select {
	padding-inline-end: 2rem;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
			no-repeat right 0.7rem center / 10px 6px,
		var(--ha-field-face) padding-box,
		linear-gradient(var(--ha-fx-ring), var(--ha-fx-ring)) border-box,
		conic-gradient(from var(--ha-fx-angle),
			transparent 0deg, transparent 300deg,
			var(--ha-fx-arc) 350deg, transparent 360deg) border-box,
		conic-gradient(from var(--ha-fx-angle),
			transparent 0deg, transparent 225deg,
			var(--ha-fx-arc) 350deg, transparent 360deg) border-box,
		linear-gradient(var(--ha-field-border), var(--ha-field-border)) border-box;
}

@media (prefers-color-scheme: dark) {
	.ha-app .ha-select {
		background-image:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a3aab3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
			var(--ha-field-face),
			linear-gradient(var(--ha-fx-ring), var(--ha-fx-ring)),
			conic-gradient(from var(--ha-fx-angle),
				transparent 0deg, transparent 300deg,
				var(--ha-fx-arc) 350deg, transparent 360deg),
			conic-gradient(from var(--ha-fx-angle),
				transparent 0deg, transparent 225deg,
				var(--ha-fx-arc) 350deg, transparent 360deg),
			linear-gradient(var(--ha-field-border), var(--ha-field-border));
	}
}

.ha-app .ha-input--warn {
	--ha-field-border: var(--ha-band-3);
	outline: none;
}

.ha-app input[type="checkbox"],
.ha-app input[type="radio"] {
	accent-color: var(--ha-accent);
	width: 1rem;
	height: 1rem;
}

/* ---------------------------------------------------------------------
 * The focus trace
 *
 * On focus a blue arc travels once around the edge of the field, the whole
 * edge flashes bright as it completes the lap, and it settles back to a plain
 * border with a soft ring left behind.
 *
 * The ring that is left behind is not decoration: something has to say where
 * the keyboard is once the animation has finished, so the resting state keeps
 * a blue edge and a soft halo. "Back to normal" means back to a quiet focused
 * border, not back to no focus indicator at all.
 *
 * Registering the properties is what makes them animate. An unregistered
 * custom property interpolates discretely — it would jump rather than travel.
 * ------------------------------------------------------------------ */

@property --ha-fx-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --ha-fx-arc {
	syntax: "<color>";
	inherits: false;
	initial-value: transparent;
}

@property --ha-fx-ring {
	syntax: "<color>";
	inherits: false;
	initial-value: transparent;
}

@property --ha-fx-halo {
	syntax: "<color>";
	inherits: false;
	initial-value: transparent;
}

@keyframes ha-focus-trace {
	0% {
		--ha-fx-angle: 0deg;
		--ha-fx-arc: transparent;
		--ha-fx-ring: transparent;
		--ha-fx-halo: transparent;
	}

	6% {
		--ha-fx-arc: var(--ha-focus, #3d9bff);
		--ha-fx-halo: var(--ha-halo-soft, rgba(61, 155, 255, 0.2));
	}

	/* One full lap. */
	62% {
		--ha-fx-angle: 360deg;
		--ha-fx-arc: var(--ha-focus, #3d9bff);
		--ha-fx-ring: transparent;
		--ha-fx-halo: var(--ha-halo-soft, rgba(61, 155, 255, 0.2));
	}

	/* The whole edge, all at once. */
	74% {
		--ha-fx-angle: 360deg;
		--ha-fx-arc: transparent;
		--ha-fx-ring: var(--ha-focus-bright, #8fcbff);
		--ha-fx-halo: var(--ha-halo-strong, rgba(61, 155, 255, 0.45));
	}

	100% {
		--ha-fx-angle: 360deg;
		--ha-fx-arc: transparent;
		--ha-fx-ring: transparent;
		--ha-fx-halo: var(--ha-halo-rest, rgba(61, 155, 255, 0.16));
	}
}

.ha-app .ha-input:focus,
.ha-app .ha-select:focus,
.ha-app .ha-textarea:focus {
	--ha-field-border: var(--ha-focus-edge);
	outline: none;
	animation: ha-focus-trace 1.15s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
}

/* The lap is the flourish; the ring is the accessibility. Take the flourish
   away and the ring has to still be there. */
@media (prefers-reduced-motion: reduce) {
	.ha-app .ha-input:focus,
	.ha-app .ha-select:focus,
	.ha-app .ha-textarea:focus {
		animation: none;
		--ha-fx-halo: var(--ha-halo-rest);
	}
}

/* ---------------------------------------------------------------------
 * Buttons
 *
 * No trace here. The trace answers "where did my cursor go" in a form of
 * thirty identical boxes; a button is already the loudest thing on the row.
 * ------------------------------------------------------------------ */

.ha-app .ha-btn {
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	min-height: var(--ha-control-h);
	padding: 0.45rem 1rem;
	border: 1px solid var(--ha-accent);
	border-radius: var(--ha-field-radius);
	background: linear-gradient(180deg, var(--ha-accent), var(--ha-accent-strong));
	color: var(--ha-accent-ink);
	cursor: pointer;
	box-shadow: var(--ha-field-shadow);
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.ha-app .ha-btn:hover {
	background: var(--ha-accent-strong);
	border-color: var(--ha-accent-strong);
	box-shadow: var(--ha-field-shadow-hover);
}

.ha-app .ha-btn:active {
	transform: translateY(1px);
	box-shadow: var(--ha-field-shadow);
}

.ha-app .ha-btn--secondary {
	background: var(--ha-field-face);
	color: var(--ha-text);
	border-color: var(--ha-border-strong);
}

.ha-app .ha-btn--secondary:hover {
	background: var(--ha-surface);
	border-color: var(--ha-text-muted);
}

.ha-app .ha-btn--danger {
	background: var(--ha-bg);
	color: var(--ha-bad);
	border-color: var(--ha-bad);
}

.ha-app .ha-btn--danger:hover {
	background: var(--ha-bad);
	color: #fff;
}

.ha-app .ha-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.ha-app .ha-btn:focus-visible,
.ha-app .ha-tab:focus-visible,
.ha-app a:focus-visible {
	outline: 2px solid var(--ha-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--ha-halo-soft);
}

/* ---------------------------------------------------------------------
 * Tabs, tables, notices
 * ------------------------------------------------------------------ */

.ha-app .ha-tabs {
	gap: 0.125rem;
	border-bottom: 1px solid var(--ha-border);
}

.ha-app .ha-tab {
	padding: 0.45rem 0.9rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ha-text-muted);
	border-radius: var(--ha-radius-sm) var(--ha-radius-sm) 0 0;
}

.ha-app .ha-tab:hover {
	color: var(--ha-text);
	background: var(--ha-surface);
}

.ha-app .ha-tab[aria-selected="true"] {
	color: var(--ha-text);
	background: var(--ha-bg);
	border-color: var(--ha-border);
	box-shadow: inset 0 2px 0 var(--ha-accent);
}

.ha-app .ha-table {
	font-size: 0.875rem;
}

.ha-app .ha-table th,
.ha-app .ha-table td {
	padding: 0.45rem 0.6rem;
}

.ha-app .ha-table thead th {
	background: var(--ha-surface);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ha-text-muted);
}

.ha-app .ha-table tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--ha-text) 3%, transparent);
}

.ha-app .ha-notice {
	border-radius: var(--ha-radius);
	border: 1px solid var(--ha-border);
	background: var(--ha-surface);
	padding: 0.75rem 0.9rem;
}

.ha-app .ha-notice--warn {
	border-color: var(--ha-accent);
	background: var(--ha-accent-soft);
}

/* ---------------------------------------------------------------------
 * The caliper diagram
 *
 * app.css positions it; this only dresses it. The figure sits on a tinted
 * panel so it reads as a diagram rather than a stray image in a form.
 * ------------------------------------------------------------------ */

.ha-app .ha-caliper {
	background: var(--ha-surface);
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	padding: 0.75rem 0.5rem;
}

.ha-app .ha-caliper-figure img {
	/* The artwork is a pencil drawing on paper; left alone it reads as itself
	   in both themes, and desaturating it would take the red marks with it. */
	opacity: 0.96;
}

.ha-app .ha-callout .ha-input {
	max-width: 7rem;
}

.ha-app .ha-caliper-col--left .ha-callout .ha-input {
	margin-inline-start: auto;
}

/* ---------------------------------------------------------------------
 * Density
 * ------------------------------------------------------------------ */

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

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

.ha-app .ha-measure-row {
	grid-template-columns: 1fr 6rem;
	gap: 0.4rem;
}

.ha-app .ha-actions {
	gap: 0.4rem;
}

/* A phone at the gym is the reason the controls stop being compact the moment
   the pointer is a finger (§9.3). */
@media (pointer: coarse) {
	.ha-app {
		--ha-control-h: 44px;
	}

	.ha-app .ha-input,
	.ha-app .ha-select,
	.ha-app .ha-textarea {
		padding-block: 0.55rem;
		font-size: 1rem;
	}
}

/* ---------------------------------------------------------------------
 * Print
 *
 * This file loads after print.css, so without this the theme's surfaces and
 * the focus ring would follow the report onto paper.
 * ------------------------------------------------------------------ */

@media print {
	.ha-app,
	.ha-app .ha-card,
	.ha-app .ha-input,
	.ha-app .ha-select,
	.ha-app .ha-textarea {
		background: #fff;
		color: #000;
		box-shadow: none;
		animation: none;
	}

	.ha-app .ha-card {
		border-color: #999;
	}
}