/* ==========================================================================
   1. Font Faces
   ========================================================================== */

@font-face {
	font-family: AllertaStencil;
	src: url('/fonts/AllertaStencil-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Custom Properties
   ========================================================================== */

:root {
	/* ---- Canvas ---- */
	--color-bg: #f8f9fc;
	--color-surface: #ffffff;
	--color-bg-result: #eef0ff;

	/* ---- Indigo palette ---- */
	--color-indigo-50: #eef2ff;
	--color-indigo-100: #e0e7ff;
	--color-indigo-200: #c7d2fe;
	--color-indigo-300: #a5b4fc;
	--color-indigo-400: #818cf8;
	--color-indigo-500: #6366f1;
	--color-indigo-600: #4f46e5;
	--color-indigo-700: #4338ca;
	--color-indigo-900: #312e81;
	--color-indigo-950: #1e1b4b;

	/* ---- Text ---- */
	--color-text: #1e1b4b;
	--color-text-secondary: #64748b;
	--color-text-muted: #94a3b8;
	--color-text-on-indigo: #ffffff;
	--color-text-result: #312e81;

	/* ---- Borders ---- */
	--color-border: #e2e8f0;
	--color-border-active: #c7d2fe;

	/* ---- Semantic ---- */
	--color-focus: #6366f1;
	--color-danger: #ef4444;

	/* ---- Glow / Shadow ---- */
	--glow-indigo: rgb(99 102 241 / 0.15);
	--glow-indigo-strong: rgb(99 102 241 / 0.25);
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
	--shadow-glow: 0 0 0 3px var(--glow-indigo);
	--shadow-result: 0 4px 24px rgb(99 102 241 / 0.12), 0 1px 3px rgb(0 0 0 / 0.06);

	/* ---- Typography ---- */
	--font-display: AllertaStencil, system-ui, sans-serif;
	--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-result: clamp(2rem, 5vw + 0.5rem, 2.75rem);
	--text-result-hero: clamp(2.5rem, 8vw + 0.5rem, 3.5rem);

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--leading-tight: 1.15;
	--leading-snug: 1.3;
	--leading-normal: 1.5;

	--tracking-tight: -0.01em;
	--tracking-wide: 0.02em;
	--tracking-wider: 0.05em;
	--tracking-label: 0.08em;

	/* ---- Spacing (4px grid) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;

	/* ---- Layout ---- */
	--container-max: 32rem;
	--container-pad: var(--space-4);
	--touch-target: 2.75rem;

	/* ---- Radii ---- */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-full: 62.5rem;

	/* ---- Motion ---- */
	--duration-fast: 0.15s;
	--duration-normal: 0.25s;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Dark Mode ---- */
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #0f0e1a;
		--color-surface: #1a1830;
		--color-bg-result: #1e1b4b;

		--color-text: #e2e8f0;
		--color-text-secondary: #94a3b8;
		--color-text-muted: #64748b;
		--color-text-result: #c7d2fe;

		--color-border: #2d2a4a;
		--color-border-active: #4338ca;

		--color-indigo-500: #818cf8;
		--color-indigo-600: #6366f1;

		--color-focus: #818cf8;
		--color-danger: #f87171;

		--glow-indigo: rgb(129 140 248 / 0.2);
		--glow-indigo-strong: rgb(129 140 248 / 0.35);
		--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
		--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
		--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
		--shadow-glow: 0 0 0 3px var(--glow-indigo);
		--shadow-result: 0 4px 32px rgb(99 102 241 / 0.25), 0 0 64px rgb(99 102 241 / 0.08);
	}
}

/* ==========================================================================
   3. Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   4. Base Elements
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-normal);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background: var(--color-bg);
	min-height: 100dvh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior: none;
	text-wrap: pretty;
}

button {
	font: inherit;
	color: inherit;
	border: none;
	background: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

input {
	font: inherit;
	color: inherit;
	border: none;
	background: none;
}

dialog {
	border: none;
	padding: 0;
	background: none;
	max-width: none;
	max-height: none;
}

/* ==========================================================================
   5. Layout (App Shell)
   ========================================================================== */

.app-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-indigo-950);
	padding: var(--space-3) var(--container-pad);
	padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
}

.header-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.input-zone {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-6) var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.result-zone {
	width: 100%;
	background: var(--color-bg-result);
	border-top: 1px solid var(--color-indigo-200);
}

.result-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-8) var(--container-pad);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.app-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-normal);
	letter-spacing: var(--tracking-wider);
	color: var(--color-text-on-indigo);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-shadow:
		0 0 0.2em rgb(99 102 241),
		0 0 0.6em rgb(99 102 241),
		0 0 1.2em rgb(168 85 247);
	animation: glow-pulse 4s ease-in-out infinite;
	line-height: var(--leading-tight);
}

.header-icon {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
}

.wattage-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background: rgb(255 255 255 / 0.15);
	color: var(--color-text-on-indigo);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-full);
	min-height: var(--touch-target);
	transition: background-color var(--duration-fast) ease;
}

.wattage-badge:hover {
	background: rgb(255 255 255 / 0.25);
}

.wattage-badge:focus-visible {
	outline: 2px solid var(--color-text-on-indigo);
	outline-offset: 2px;
}

.badge-chevron {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* ==========================================================================
   7. Wattage Dialog (Onboarding + Edit)
   ========================================================================== */

.wattage-dialog {
	position: fixed;
	inset: 0;
	z-index: 200;
	padding: var(--space-4);
	padding-bottom: env(safe-area-inset-bottom, var(--space-4));
}

.wattage-dialog::backdrop {
	background: rgb(30 27 75 / 0.6);
	backdrop-filter: blur(0.5rem);
	-webkit-backdrop-filter: blur(0.5rem);
}

.wattage-dialog[open] {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	animation: dialog-slide-up var(--duration-normal) var(--ease-out) both;
}

.dialog-content {
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	width: 100%;
	max-width: 24rem;
	position: relative;
	box-shadow: var(--shadow-lg);
}

.dialog-close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: var(--touch-target);
	height: var(--touch-target);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	border-radius: var(--radius-md);
	transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.dialog-close:hover {
	color: var(--color-text);
	background: var(--color-indigo-50);
}

.dialog-close:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

.dialog-close svg {
	width: 1.25rem;
	height: 1.25rem;
}

.dialog-title {
	font-family: var(--font-body);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	margin-bottom: var(--space-1);
	padding-right: var(--space-8);
	text-wrap: balance;
}

.dialog-helper {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-5);
}

.preset-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

.preset-btn {
	min-height: var(--touch-target);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	background: var(--color-bg);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	transition:
		background-color var(--duration-fast) ease,
		border-color var(--duration-fast) ease,
		box-shadow var(--duration-fast) ease,
		color var(--duration-fast) ease;
}

.preset-btn:hover {
	background: var(--color-indigo-50);
	border-color: var(--color-indigo-300);
}

.preset-btn[aria-checked="true"] {
	background: var(--color-indigo-500);
	color: var(--color-text-on-indigo);
	border-color: transparent;
	box-shadow: var(--shadow-glow);
}

.preset-btn:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

@media (prefers-color-scheme: dark) {
	.preset-btn {
		background: var(--color-surface);
		border-color: var(--color-border-active);
	}

	.preset-btn:hover {
		background: rgb(99 102 241 / 0.12);
		border-color: var(--color-indigo-500);
	}
}

.custom-wattage-row {
	margin-bottom: var(--space-5);
}

.custom-wattage-label {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-2);
}

.custom-wattage-field {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.custom-wattage-input {
	flex: 1;
	min-height: var(--touch-target);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	background: var(--color-bg);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.custom-wattage-input:hover {
	border-color: var(--color-border-active);
}

.custom-wattage-input:focus {
	border-color: var(--color-indigo-500);
	box-shadow: var(--shadow-glow);
	outline: none;
}

.custom-wattage-suffix {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	color: var(--color-text-secondary);
}

.save-btn {
	width: 100%;
	min-height: var(--touch-target);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	background: var(--color-indigo-500);
	color: var(--color-text-on-indigo);
	border-radius: var(--radius-md);
	transition:
		background-color var(--duration-fast) ease,
		box-shadow var(--duration-fast) ease,
		opacity var(--duration-fast) ease;
}

.save-btn:hover:not(:disabled) {
	background: var(--color-indigo-600);
}

.save-btn:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

.save-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dialog-error {
	font-size: var(--text-sm);
	color: var(--color-danger);
	margin-top: var(--space-3);
	text-align: center;
}

/* ==========================================================================
   8. Recipe Wattage Selector (Pills)
   ========================================================================== */

.recipe-wattage {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.section-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-text-muted);
}

.pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pill {
	min-height: var(--touch-target);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	background: var(--color-surface);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	transition:
		background-color var(--duration-fast) ease,
		border-color var(--duration-fast) ease,
		box-shadow var(--duration-fast) ease,
		color var(--duration-fast) ease,
		transform var(--duration-fast) ease;
}

.pill:hover {
	background: var(--color-indigo-50);
	border-color: var(--color-indigo-300);
}

.pill[aria-checked="true"] {
	background: var(--color-indigo-500);
	color: var(--color-text-on-indigo);
	border-color: transparent;
	box-shadow: var(--shadow-glow);
}

.pill:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

.pill--custom {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.pill-custom-input {
	width: 3.5rem;
	text-align: center;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	background: transparent;
	color: inherit;
}

.pill-custom-input::placeholder {
	color: var(--color-text-muted);
}

.pill[aria-checked="true"] .pill-custom-input::placeholder {
	color: rgb(255 255 255 / 0.6);
}

.pill-custom-suffix {
	font-weight: var(--weight-semibold);
}

/* ==========================================================================
   9. Step Cards
   ========================================================================== */

.steps {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.step-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-indigo-300);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
	animation: step-enter var(--duration-normal) var(--ease-out) both;
}

.step-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-3);
}

.step-label {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
}

.step-remove {
	width: var(--touch-target);
	height: var(--touch-target);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	border-radius: var(--radius-md);
	transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.step-remove:hover {
	color: var(--color-danger);
	background: rgb(239 68 68 / 0.08);
}

.step-remove:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

.step-remove svg {
	width: 1.125rem;
	height: 1.125rem;
}

.step-remove[hidden] {
	display: none;
}

.time-row {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.time-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.time-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: var(--weight-medium);
}

.time-input {
	width: 4rem;
	min-height: var(--touch-target);
	padding: var(--space-2);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	text-align: center;
	background: var(--color-bg);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.time-input:hover {
	border-color: var(--color-border-active);
}

.time-input:focus {
	border-color: var(--color-indigo-500);
	box-shadow: var(--shadow-glow);
	outline: none;
}

.time-input::placeholder {
	color: var(--color-text-muted);
	font-weight: var(--weight-normal);
}

.time-colon {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--color-text-muted);
	padding-bottom: var(--space-2);
	line-height: var(--touch-target);
}

.power-section {
	overflow: hidden;
}

.power-toggle {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
	padding: var(--space-1) 0;
	min-height: var(--touch-target);
}

.power-toggle-chevron {
	width: 1em;
	height: 1em;
	transition: transform var(--duration-fast) ease;
}

.power-toggle[aria-expanded="true"] .power-toggle-chevron {
	transform: rotate(180deg);
}

.power-toggle:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
	border-radius: var(--radius-sm);
}

.power-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	padding: var(--space-2) 0;
}

.power-buttons[hidden] {
	display: none;
}

.power-btn {
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	background: var(--color-bg);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color var(--duration-fast) ease,
		border-color var(--duration-fast) ease,
		box-shadow var(--duration-fast) ease,
		color var(--duration-fast) ease;
	/* Enlarge touch target without visual change */
	position: relative;
}

.power-btn::after {
	content: '';
	position: absolute;
	inset: -0.25rem;
}

.power-btn:hover {
	background: var(--color-indigo-50);
	border-color: var(--color-indigo-300);
}

.power-btn[aria-checked="true"] {
	background: var(--color-indigo-500);
	color: var(--color-text-on-indigo);
	border-color: transparent;
	box-shadow: var(--shadow-glow);
}

.power-btn:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

/* ---- Action between steps ---- */

.step-action {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) 0;
	position: relative;
}

.step-action::before,
.step-action::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 2px;
	background: var(--color-indigo-200);
}

.step-action::before {
	top: 0;
	height: var(--space-3);
}

.step-action::after {
	bottom: 0;
	height: var(--space-3);
}

.action-pills {
	display: flex;
	gap: var(--space-2);
	z-index: 1;
}

.action-pill {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	padding: var(--space-2) var(--space-3);
	min-height: var(--touch-target);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-text-secondary);
	transition:
		background-color var(--duration-fast) ease,
		border-color var(--duration-fast) ease,
		color var(--duration-fast) ease;
}

.action-pill:hover {
	background: var(--color-indigo-50);
	border-color: var(--color-indigo-300);
}

.action-pill[aria-checked="true"] {
	background: var(--color-indigo-100);
	color: var(--color-indigo-700);
	border-color: var(--color-indigo-300);
}

.action-pill:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

/* ==========================================================================
   10. Add Step Button
   ========================================================================== */

.add-step-btn {
	width: 100%;
	min-height: var(--touch-target);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-indigo-500);
	border: 2px dashed var(--color-indigo-200);
	border-radius: var(--radius-lg);
	transition:
		background-color var(--duration-fast) ease,
		border-color var(--duration-fast) ease;
}

.add-step-btn:hover {
	background: var(--color-indigo-50);
	border-color: var(--color-indigo-400);
}

.add-step-btn:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

.add-step-btn[hidden] {
	display: none;
}

.add-step-btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* ==========================================================================
   10b. Nuke Button (scroll to results)
   ========================================================================== */

.nuke-btn {
	width: 100%;
	min-height: var(--touch-target);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-on-indigo);
	background: linear-gradient(135deg, var(--color-indigo-600) 0%, var(--color-indigo-500) 100%);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-4);
	box-shadow: var(--shadow-md), 0 0 1em rgb(99 102 241 / 0.3);
	transition:
		box-shadow var(--duration-fast) ease,
		transform var(--duration-fast) ease;
}

.nuke-btn:hover {
	box-shadow: var(--shadow-lg), 0 0 1.5em rgb(99 102 241 / 0.5);
	transform: translateY(-1px);
}

.nuke-btn:active {
	transform: translateY(0);
}

.nuke-btn:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

.nuke-icon {
	width: 1.25em;
	height: 1.25em;
}

.nuke-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.nuke-btn:disabled:hover {
	box-shadow: var(--shadow-md), 0 0 1em rgb(99 102 241 / 0.3);
	transform: none;
}

/* ==========================================================================
   11. Results Display
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.result-zone {
		border-top-color: rgb(99 102 241 / 0.2);
	}
}

.result-section-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-indigo-400);
	margin-bottom: var(--space-5);
}

.result-empty {
	text-align: center;
	color: var(--color-text-secondary);
	padding: var(--space-4) 0;
}

/* Single-step hero result */
.result-hero {
	text-align: center;
}

.result-hero-time {
	font-family: var(--font-body);
	font-size: var(--text-result-hero);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-result);
	line-height: var(--leading-tight);
	text-shadow: 0 0 1.5em rgb(99 102 241 / 0.15);
}

@media (prefers-color-scheme: dark) {
	.result-hero-time {
		text-shadow: 0 0 1em rgb(129 140 248 / 0.4), 0 0 2.5em rgb(99 102 241 / 0.2);
	}
}

.result-hero-detail {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-top: var(--space-2);
}

.result-hero-original {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: var(--space-1);
}

/* Multi-step timeline */
.result-timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.result-step {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-result);
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

@media (prefers-color-scheme: dark) {
	.result-step {
		border-color: rgb(99 102 241 / 0.2);
	}
}

.result-step-number {
	width: 2rem;
	height: 2rem;
	background: var(--color-indigo-500);
	color: var(--color-text-on-indigo);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	flex-shrink: 0;
}

.result-step-body {
	flex: 1;
	min-width: 0;
}

.result-step-time {
	font-family: var(--font-body);
	font-size: var(--text-result);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-result);
	line-height: var(--leading-tight);
	text-shadow: 0 0 1.5em rgb(99 102 241 / 0.1);
}

@media (prefers-color-scheme: dark) {
	.result-step-time {
		text-shadow: 0 0 1em rgb(129 140 248 / 0.3), 0 0 2em rgb(99 102 241 / 0.15);
	}
}

.result-step-detail {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-top: var(--space-1);
}

.result-step-original {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-top: var(--space-1);
}

/* Timeline connector */
.result-connector {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-2) 0;
	position: relative;
}

.result-connector::before {
	content: '';
	width: 2px;
	height: 100%;
	background: repeating-linear-gradient(
		to bottom,
		var(--color-indigo-200) 0,
		var(--color-indigo-200) 4px,
		transparent 4px,
		transparent 8px
	);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.result-connector--empty {
	min-height: var(--space-4);
}

.result-action-badge {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-indigo-700);
	background: var(--color-indigo-100);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	position: relative;
	z-index: 1;
}

@media (prefers-color-scheme: dark) {
	.result-action-badge {
		color: var(--color-indigo-200);
		background: rgb(99 102 241 / 0.2);
	}
}

/* Total */
.result-total {
	border-top: 1px solid var(--color-indigo-200);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

@media (prefers-color-scheme: dark) {
	.result-total {
		border-top-color: rgb(99 102 241 / 0.2);
	}
}

.result-total-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-text-secondary);
}

.result-total-time {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--color-text-result);
}

/* Same wattage notice */
.result-same-notice {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	padding: var(--space-2) 0;
	margin-bottom: var(--space-4);
	text-wrap: balance;
}

.start-over-btn {
	display: block;
	margin: 0 auto;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	transition:
		color var(--duration-fast) ease,
		background-color var(--duration-fast) ease;
}

.start-over-btn:hover {
	color: var(--color-text-secondary);
	background: rgb(99 102 241 / 0.08);
}

.start-over-btn:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.app-footer {
	text-align: center;
	padding: var(--space-6) var(--container-pad);
	padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	letter-spacing: var(--tracking-wide);
}

.footer-brand {
	font-family: var(--font-display);
	letter-spacing: var(--tracking-wider);
}

.footer-version {
	font-variant-numeric: tabular-nums;
	display: inline;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--color-border);
}

.footer-version:hover,
.footer-version:active {
	color: var(--color-text-secondary);
	text-decoration-color: currentColor;
}

/* ==========================================================================
   13. Update Toast
   ========================================================================== */

.update-toast {
	position: fixed;
	bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 150;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--color-indigo-950);
	color: var(--color-text-on-indigo);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	font-size: var(--text-sm);
	animation: toast-slide-up var(--duration-normal) var(--ease-out) both;
	white-space: nowrap;
}

.update-toast[hidden] {
	display: none;
}

.update-toast-btn {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	background: var(--color-indigo-500);
	color: var(--color-text-on-indigo);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-md);
	white-space: nowrap;
}

.update-toast-btn:hover {
	background: var(--color-indigo-400);
}

.update-toast-btn:focus-visible {
	box-shadow: var(--shadow-glow);
	outline: none;
}

/* ==========================================================================
   14. Skip Link
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	background: var(--color-indigo-500);
	color: var(--color-text-on-indigo);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	font-weight: var(--weight-semibold);
	z-index: 300;
	text-decoration: none;
}

.skip-link:focus {
	top: var(--space-2);
}

/* ==========================================================================
   15. Animations
   ========================================================================== */

@keyframes glow-pulse {
	0%, 100% {
		text-shadow:
			0 0 0.2em rgb(99 102 241),
			0 0 0.6em rgb(99 102 241),
			0 0 1.2em rgb(168 85 247);
	}
	50% {
		text-shadow:
			0 0 0.3em rgb(99 102 241),
			0 0 0.9em rgb(99 102 241),
			0 0 1.8em rgb(168 85 247);
	}
}

@keyframes dialog-slide-up {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes toast-slide-up {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(1rem);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes step-enter {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   16. Responsive
   ========================================================================== */

/* Wider screens: center dialog */
@media (min-width: 40rem) {
	.wattage-dialog[open] {
		align-items: center;
		animation-name: dialog-fade-scale;
	}

	@keyframes dialog-fade-scale {
		from {
			opacity: 0;
			transform: scale(0.95);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
}

/* Small phones: tighter spacing */
@media (max-width: 23.4375rem) {
	.pill {
		padding: var(--space-2);
		font-size: var(--text-xs);
	}

	.preset-grid {
		gap: var(--space-1);
	}
}

/* ==========================================================================
   17. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   18. Forced Colors (Windows High Contrast)
   ========================================================================== */

@media (forced-colors: active) {
	.pill,
	.preset-btn,
	.power-btn,
	.action-pill {
		border: 2px solid ButtonText;
	}

	.pill[aria-checked="true"],
	.preset-btn[aria-checked="true"],
	.power-btn[aria-checked="true"],
	.action-pill[aria-checked="true"] {
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
	}

	.time-input,
	.custom-wattage-input {
		border: 2px solid ButtonText;
	}

	.save-btn {
		border: 2px solid ButtonText;
	}

	.result-step {
		border: 2px solid CanvasText;
	}

	.step-card {
		border: 2px solid CanvasText;
	}
}