/**
 * BoiledEggTimer — the timer component.
 *
 * Loaded only on pages that render the block. Every colour comes from
 * tokens.css; there are no literal hex values below except inside the SVG
 * defaults, which JavaScript overwrites.
 *
 * Designed for a phone held at arm's length, one-handed, with wet hands and a
 * dimming screen. That constraint drives the tap targets, the type scale, and
 * the decision to make the egg — not the clock — the largest thing on screen.
 */

/* ------------------------------------------------------------------ shell -- */

.bet-timer {
	container-type: inline-size;
	background: var(--bet-surface);
	border: var(--bet-border);
	border-radius: var(--bet-radius-l);
	box-shadow: var(--bet-shadow-card);
	padding: var(--bet-space-m);
	font-family: var(--bet-font-body);
	color: var(--bet-ink);
	max-width: 46rem;
	margin-inline: auto;
}

.bet-timer *,
.bet-timer *::before,
.bet-timer *::after {
	box-sizing: border-box;
}

.bet-timer :focus-visible {
	outline: 3px solid var(--bet-yolk-deep);
	outline-offset: 2px;
	border-radius: var(--bet-radius-s);
}

/* --------------------------------------------------------------- the egg -- */

.bet-timer__stage {
	display: grid;
	justify-items: center;
	gap: var(--bet-space-2xs);
	padding-block: var(--bet-space-s) var(--bet-space-xs);
}

.bet-timer__egg {
	position: relative;
	width: min(15rem, 62cqi);
	aspect-ratio: 240 / 280;
}

.bet-timer__eggwrap {
	display: grid;
	justify-items: center;
	gap: var(--bet-space-2xs);
}

.bet-timer__egg-svg,
.bet-timer__ring-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.bet-timer__ring-svg {
	transform: rotate(-90deg);
}

.bet-timer__ring-track {
	fill: none;
	stroke: var(--bet-shell);
	stroke-width: 5;
}

.bet-timer__ring-progress {
	fill: none;
	stroke: var(--bet-shell-strong);
	stroke-width: 5;
	stroke-linecap: round;
	transition: stroke-dashoffset var(--bet-motion) linear, stroke var(--bet-motion) var(--bet-ease);
}

.bet-timer[data-bet-state='running'] .bet-timer__ring-progress {
	stroke: var(--bet-yolk);
}

.bet-timer[data-bet-state='paused'] .bet-timer__ring-progress {
	stroke: var(--bet-caution);
}

.bet-timer__shell-outline {
	fill: none;
	stroke: var(--bet-shell-strong);
	stroke-width: 2;
}

.bet-timer__white,
.bet-timer__yolk-set,
.bet-timer__yolk-core {
	transition: fill var(--bet-motion) linear, r var(--bet-motion) linear;
}

.bet-timer__grey-ring {
	fill: none;
	stroke: #8d8b7e;
	stroke-width: 5;
	transition: opacity var(--bet-motion) linear;
}

.bet-timer__yolk-caption {
	font-size: var(--bet-step--1);
	color: var(--bet-ink-muted);
	text-align: center;
	margin: 0;
	min-height: 2.5em;
	max-width: 22ch;
}

/* --------------------------------------------------------------- readout -- */

.bet-timer__phase {
	font-size: var(--bet-step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bet-ink-muted);
	margin: 0;
	text-align: center;
}

.bet-timer__clock {
	font-family: var(--bet-font-body);
	font-size: var(--bet-step-clock);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1, 'zero' 1;
	letter-spacing: -0.02em;
	margin: 0;
	text-align: center;
	color: var(--bet-ink);
}

.bet-timer__cue {
	font-size: var(--bet-step-0);
	line-height: 1.35;
	text-align: center;
	margin: var(--bet-space-2xs) 0 0;
	padding: var(--bet-space-2xs) var(--bet-space-s);
	background: var(--bet-yolk-wash);
	border-radius: var(--bet-radius-m);
	color: var(--bet-ink);
	max-width: 34ch;
	margin-inline: auto;
}

.bet-timer__answer {
	font-family: var(--bet-font-display);
	font-size: var(--bet-step-1);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	margin: 0 auto var(--bet-space-s);
	max-width: 32ch;
}

.bet-timer__confidence {
	display: block;
	text-align: center;
	font-size: var(--bet-step--1);
	color: var(--bet-ink-muted);
	margin-bottom: var(--bet-space-s);
}

.bet-timer__confidence[data-confidence='estimate'] {
	color: var(--bet-caution);
	font-weight: 600;
}

/* -------------------------------------------------------------- controls -- */

.bet-timer__controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bet-space-2xs);
	justify-content: center;
	margin-block: var(--bet-space-s);
}

.bet-btn {
	font: inherit;
	font-weight: 600;
	min-height: var(--bet-tap);
	padding: 0 var(--bet-space-m);
	border-radius: var(--bet-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--bet-motion-fast) var(--bet-ease),
		border-color var(--bet-motion-fast) var(--bet-ease),
		color var(--bet-motion-fast) var(--bet-ease);
}

.bet-btn--primary {
	background: var(--bet-ink);
	color: var(--bet-surface);
	flex: 1 1 12rem;
	font-size: var(--bet-step-1);
}

.bet-btn--primary:hover:not(:disabled) {
	background: var(--bet-yolk-deep);
}

.bet-btn--secondary {
	background: var(--bet-surface);
	border-color: var(--bet-shell-strong);
	color: var(--bet-ink);
}

.bet-btn--secondary:hover:not(:disabled) {
	background: var(--bet-surface-sunk);
}

.bet-btn--quiet {
	background: transparent;
	color: var(--bet-ink-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding-inline: var(--bet-space-2xs);
}

.bet-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ------------------------------------------------------------ quick pick -- */

.bet-timer__quick {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
	gap: var(--bet-space-2xs);
	margin-block: var(--bet-space-s);
	padding: 0;
	list-style: none;
}

.bet-quick {
	font: inherit;
	display: grid;
	gap: 2px;
	min-height: var(--bet-tap);
	padding: var(--bet-space-2xs);
	background: var(--bet-surface);
	border: 2px solid var(--bet-shell);
	border-radius: var(--bet-radius-m);
	cursor: pointer;
	text-align: center;
	color: var(--bet-ink);
	transition: border-color var(--bet-motion-fast) var(--bet-ease),
		background-color var(--bet-motion-fast) var(--bet-ease);
}

.bet-quick:hover {
	background: var(--bet-yolk-wash);
	border-color: var(--bet-yolk);
}

.bet-quick.is-selected {
	border-color: var(--bet-ink);
	background: var(--bet-yolk-wash);
}

/* Selection is never carried by colour alone. */
.bet-quick.is-selected::after {
	content: 'Selected';
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bet-yolk-deep);
	font-weight: 700;
}

.bet-quick__time {
	font-size: var(--bet-step-1);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.bet-quick__label {
	font-size: var(--bet-step--1);
	color: var(--bet-ink-muted);
	line-height: 1.2;
}

/* -------------------------------------------------------------- settings -- */

.bet-timer__settings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--bet-space-xs);
	margin-block: var(--bet-space-s);
}

.bet-field {
	display: grid;
	gap: var(--bet-space-3xs);
}

.bet-field label {
	font-size: var(--bet-step--1);
	font-weight: 600;
	color: var(--bet-ink-muted);
}

.bet-field select,
.bet-field input {
	font: inherit;
	min-height: var(--bet-tap);
	padding: 0 var(--bet-space-2xs);
	border: 2px solid var(--bet-shell-strong);
	border-radius: var(--bet-radius-m);
	background: var(--bet-surface);
	color: var(--bet-ink);
	width: 100%;
}

.bet-timer__advanced {
	border: var(--bet-border);
	border-radius: var(--bet-radius-m);
	padding: var(--bet-space-2xs) var(--bet-space-s);
	margin-block: var(--bet-space-s);
	background: var(--bet-surface-sunk);
}

.bet-timer__advanced > summary {
	cursor: pointer;
	font-weight: 600;
	min-height: var(--bet-tap);
	display: flex;
	align-items: center;
}

/* -------------------------------------------------------------- warnings -- */

.bet-timer__warnings {
	list-style: none;
	padding: 0;
	margin: var(--bet-space-s) 0 0;
	display: grid;
	gap: var(--bet-space-2xs);
}

.bet-warning {
	font-size: var(--bet-step--1);
	line-height: 1.45;
	padding: var(--bet-space-2xs) var(--bet-space-xs);
	border-radius: var(--bet-radius-m);
	border-left: 4px solid var(--bet-shell-strong);
	background: var(--bet-surface-sunk);
	color: var(--bet-ink-muted);
}

.bet-warning--info {
	border-left-color: var(--bet-yolk);
	background: var(--bet-yolk-wash);
	color: var(--bet-ink);
}

.bet-warning--caution {
	border-left-color: var(--bet-caution);
	background: var(--bet-caution-wash);
	color: var(--bet-ink);
}

.bet-warning--danger {
	border-left-color: var(--bet-alert);
	background: var(--bet-alert-wash);
	color: var(--bet-ink);
	font-weight: 600;
}

.bet-timer__wake-status {
	font-size: var(--bet-step--1);
	color: var(--bet-caution);
	text-align: center;
	margin-top: var(--bet-space-2xs);
}

/* ----------------------------------------------------------- alarm state -- */

/**
 * The alarm inverts the whole card rather than flashing it. Three signals at
 * once — inversion, the word Done, and an assertive announcement — plus sound
 * and vibration from JS. No channel is load-bearing on its own.
 */
.bet-timer.is-alarm {
	background: var(--bet-night-surface);
	color: var(--bet-night-ink);
	border-color: var(--bet-yolk);
}

.bet-timer.is-alarm .bet-timer__clock,
.bet-timer.is-alarm .bet-timer__answer,
.bet-timer.is-alarm .bet-timer__phase,
.bet-timer.is-alarm .bet-timer__yolk-caption {
	color: var(--bet-night-ink);
}

.bet-timer.is-alarm .bet-timer__cue {
	background: var(--bet-yolk);
	color: var(--bet-ink);
	font-weight: 700;
	font-size: var(--bet-step-1);
}

.bet-timer.is-alarm .bet-timer__clock {
	font-size: var(--bet-step-2);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.bet-timer.is-alarm .bet-btn--secondary {
	background: transparent;
	color: var(--bet-night-ink);
	border-color: var(--bet-night-ink);
}

/* A slow breath, well under the 3Hz flash threshold, and only if motion is
   welcome. The alarm does not depend on it. */
@media (prefers-reduced-motion: no-preference) {
	.bet-timer.is-alarm {
		animation: bet-breathe 1.6s ease-in-out infinite alternate;
	}

	@keyframes bet-breathe {
		from { border-color: var(--bet-yolk); }
		to { border-color: var(--bet-alert); }
	}
}

/* --------------------------------------------------------- kitchen mode -- */

.bet-timer.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 9999;
	max-width: none;
	margin: 0;
	border-radius: 0;
	border: none;
	overflow-y: auto;
	background: var(--bet-night-surface);
	color: var(--bet-night-ink);
	display: grid;
	align-content: center;
	padding: var(--bet-space-l);
}

.bet-timer.is-fullscreen .bet-timer__clock {
	font-size: var(--bet-step-clock-full);
	color: var(--bet-night-ink);
}

.bet-timer.is-fullscreen .bet-timer__phase,
.bet-timer.is-fullscreen .bet-timer__answer,
.bet-timer.is-fullscreen .bet-timer__yolk-caption {
	color: var(--bet-night-ink);
}

.bet-timer.is-fullscreen .bet-timer__settings,
.bet-timer.is-fullscreen .bet-timer__quick,
.bet-timer.is-fullscreen .bet-timer__advanced,
.bet-timer.is-fullscreen .bet-timer__warnings,
.bet-timer.is-fullscreen .bet-timer__confidence {
	display: none;
}

.bet-timer.is-fullscreen .bet-btn--secondary {
	background: transparent;
	color: var(--bet-night-ink);
	border-color: var(--bet-night-ink);
}

body.bet-fullscreen-open {
	overflow: hidden;
}

/* ------------------------------------------------------- progressive JS -- */

/* Hidden until JS takes over, so nobody taps a control that does nothing.
   The server-rendered answer, chart and egg stay visible regardless. */
.bet-timer:not([data-bet-ready]) [data-bet-needs-js] {
	display: none;
}

.bet-timer:not([data-bet-ready]) .bet-timer__nojs {
	display: block;
}

.bet-timer[data-bet-ready] .bet-timer__nojs {
	display: none;
}

.bet-timer__nojs {
	font-size: var(--bet-step--1);
	color: var(--bet-ink-muted);
	text-align: center;
	padding: var(--bet-space-2xs);
}

.bet-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;
}

/* ---------------------------------------------------------- wide layout -- */

@container (min-width: 34rem) {
	.bet-timer {
		padding: var(--bet-space-l);
	}

	.bet-timer__stage {
		grid-template-columns: auto 1fr;
		align-items: center;
		justify-items: start;
		gap: var(--bet-space-l);
	}

	.bet-timer__eggwrap {
		grid-row: span 4;
	}

	.bet-timer__egg {
		width: 13rem;
	}

	.bet-timer__phase,
	.bet-timer__clock,
	.bet-timer__yolk-caption {
		text-align: left;
	}

	.bet-timer__cue {
		margin-inline: 0;
		text-align: left;
	}
}