/**
 * PC builder — live power meter (v0.2.69, Valery).
 *
 * Shared by the classic questionnaire (top of the wizard) and the 3D studio
 * HUD. Own file so builder-wizard.css stays within the 500-line rule.
 *
 * Palette contract (Valery): the widget must NOT look like a generic
 * Tailwind card. It borrows the site tokens and shifts temperature with the
 * theme — cool blue/teal on the two light-backed palettes (forge, aurora),
 * warm amber/garnet on the night one (singularity). All colours funnel through
 * the local --pw-* custom properties below, so a palette change is one block,
 * not a hunt through rules.
 *
 * THE DAY TOKENS SIT ON THE BARE SELECTOR (2026-10). The night ones used to,
 * because singularity was the site default: a page whose palette had not been
 * painted resolved the night palette from main.css and would have looked wrong
 * wearing the day temperature. Such a page resolves the bright palette now, so
 * the same reasoning puts the day tokens here and the night palette is the one
 * that has to be named. Both light-backed palettes share these values, so
 * neither of them needs naming either.
 *
 * Load order: after builder-studio.css (see inc/enqueue.php).
 */

.builder-power {
	/* Day: cool blues and greens. */
	--pw-from: #2f7f8f;
	--pw-to: #4aa3a0;
	--pw-hot: #b8562f;
	--pw-surface: color-mix(in srgb, var(--accent) 6%, var(--bg-elev));
	--pw-border: color-mix(in srgb, var(--accent) 26%, var(--border));
	--pw-track: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
	--pw-text: var(--text);
	display: grid;
	gap: 0.5rem;
	padding: 0.75rem 0.9rem;
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--accent) 7%, transparent),
			transparent
		),
		var(--pw-surface);
	border: 1px solid var(--pw-border);
	border-radius: var(--radius-sm);
}

/* Night: warm amber, orange, garnet. The one palette that has to be named
   now that the bare block above is the day register. */
[data-theme="singularity"] .builder-power {
	--pw-from: #d99a35;
	--pw-to: #e07a3c;
	--pw-hot: #c4453c;
	--pw-surface: color-mix(in srgb, var(--accent) 9%, var(--bg-elev));
	--pw-border: color-mix(in srgb, #d99a35 30%, var(--border));
	--pw-track: color-mix(in srgb, #d99a35 12%, var(--surface-2));
}

/* ---------- header row ---------- */
.builder-power__head {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.builder-power__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	flex: 0 0 auto;
	border-radius: 50%;
	color: var(--pw-to);
	background: color-mix(in srgb, var(--pw-to) 16%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pw-to) 30%, transparent);
	transition: color var(--ease) 0.25s, background var(--ease) 0.25s;
}

.builder-power__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-dim);
	letter-spacing: 0.01em;
}

.builder-power__value {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: baseline;
	gap: 0.1rem;
	font-family: var(--font-mono);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pw-text);
	/* Digits must not jump around while the visitor clicks through steps. */
	font-variant-numeric: tabular-nums;
}

.builder-power__draw {
	color: var(--pw-to);
	transition: color var(--ease) 0.25s;
}

.builder-power__sep {
	color: var(--text-dim);
	font-weight: 400;
}

.builder-power__cap {
	color: var(--text-dim);
}

/* ---------- track + fill ---------- */
.builder-power__track {
	height: 6px;
	border-radius: 999px;
	background: var(--pw-track);
	overflow: hidden;
}

.builder-power__fill {
	/* The page is RTL, so the bar fills from the start edge (right). */
	height: 100%;
	width: var(--pw-fill, 0%);
	border-radius: 999px;
	/* 270deg = gradient runs toward the left, i.e. from the fill origin. */
	background: linear-gradient(270deg, var(--pw-from), var(--pw-to));
	transition: width var(--ease) 0.45s, background var(--ease) 0.25s;
}

.builder-power__hint {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--text-dim);
}

/* ---------- load levels ---------- */
.builder-power[data-level="warm"] {
	--pw-to: color-mix(in srgb, var(--pw-from) 45%, var(--pw-hot));
}

.builder-power[data-level="hot"] {
	--pw-to: var(--pw-hot);
	--pw-border: color-mix(in srgb, var(--pw-hot) 40%, var(--border));
}

.builder-power[data-level="hot"] .builder-power__hint {
	color: var(--pw-hot);
}

.builder-power[data-level="hot"] .builder-power__icon {
	animation: builder-power-pulse 1.8s var(--ease) infinite;
}

@keyframes builder-power-pulse {
	0%,
	100% {
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pw-to) 30%, transparent);
	}
	50% {
		box-shadow: inset 0 0 0 1px var(--pw-to),
			0 0 0 4px color-mix(in srgb, var(--pw-to) 14%, transparent);
	}
}

/* No pick yet: muted, so it reads as a placeholder instead of a warning. */
.builder-power.is-idle {
	--pw-from: var(--border-light);
	--pw-to: var(--text-dim);
	--pw-border: var(--border);
}

/* ---------- studio variant ---------- */
/* Sits in the top HUD column, directly under the "spec looks fine" status
   chip (v0.2.71, Valery). The top HUD is RTL, so the column starts at the
   inline-start edge — the top-right corner of the viewport — while the camera
   tabs stay on the opposite edge. Width is capped to the status chip's row so
   the card reads as a continuation of it rather than a floating panel. */
.builder-studio__hud-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	max-width: min(24rem, calc(100% - 1.7rem));
}

.builder-power--studio {
	width: 100%;
	min-width: 15rem;
	padding: 0.55rem 0.7rem;
	gap: 0.4rem;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(10px);
	border-radius: 10px;
	font-size: 0.78rem;
}

.builder-power--studio .builder-power__label,
.builder-power--studio .builder-power__hint {
	font-size: 0.74rem;
}

.builder-power--studio .builder-power__value {
	font-size: 0.85rem;
}

.builder-power--studio .builder-power__icon {
	width: 1.35rem;
	height: 1.35rem;
}

@media (max-width: 899px) {
	.builder-studio__hud-col {
		max-width: 100%;
	}

	.builder-power--studio {
		min-width: 0;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.builder-power__fill {
		transition: none;
	}

	.builder-power[data-level="hot"] .builder-power__icon {
		animation: none;
	}
}