/**
 * Boiled Egg Timer — plugin styles.
 *
 * Self-contained on purpose. Every custom property is scoped to .bet-timer
 * rather than :root, so the plugin cannot leak styles into the site and does
 * not depend on the site defining anything. Drop this plugin into a bare
 * WordPress install and it still looks right.
 *
 * Where a site token exists it wins: `var(--bet-font-body, fallback)` picks up
 * the site's typography if it is defined and uses its own stack if not.
 *
 * Contrast rule: amber is a surface colour. Any time amber carries words it
 * uses --t-amber-text, which is the darkened version that passes AA. No hover
 * state puts light text on a light background.
 */

/* Self-hosted, from this plugin's assets/fonts/. Declared here because the
   files live here; any stylesheet on the page can then use the families. */
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-variable.woff2') format('woff2-variations');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Instrument Sans';
	src: url('../fonts/instrument-sans-variable.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

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

.bet-timer {
	--t-surface: #ffffff;
	--t-sunk: #f6f1e8;
	--t-ink: #1a1714;
	--t-ink-muted: #5f574c;
	--t-shell: #ede6da;
	--t-shell-strong: #ddd2c0;
	--t-amber: #e5a33c;
	--t-amber-wash: #fdf3e0;
	--t-amber-text: #8a5a12;
	--t-alert: #b3401f;
	--t-alert-wash: #fbeae5;
	--t-caution: #8a6415;
	--t-caution-wash: #fbf2dd;
	--t-cool: #5b8fa8;

	--t-space-3xs: 0.25rem;
	--t-space-2xs: 0.5rem;
	--t-space-xs: 0.75rem;
	--t-space-s: 1rem;
	--t-space-m: 1.5rem;
	--t-space-l: 2rem;
	--t-space-xl: 3rem;

	--t-radius-s: 6px;
	--t-radius-m: 12px;
	--t-radius-l: 20px;
	--t-radius-pill: 999px;

	--t-step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
	--t-step-0: clamp(1rem, 0.95rem + 0.24vw, 1.13rem);
	--t-step-1: clamp(1.2rem, 1.11rem + 0.44vw, 1.5rem);
	--t-step-2: clamp(1.44rem, 1.29rem + 0.75vw, 2rem);
	--t-clock: clamp(3.25rem, 2.4rem + 4vw, 4.5rem);
	--t-clock-running: clamp(4rem, 2.6rem + 7vw, 7.5rem);

	--t-motion-fast: 120ms;
	--t-motion: 220ms;
	--t-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--t-tap: 48px;

	container-type: inline-size;
	background: var(--t-surface);
	border: 1px solid var(--t-shell);
	border-radius: var(--t-radius-l);
	box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04), 0 8px 24px -12px rgba(26, 23, 20, 0.14);
	padding: var(--t-space-m);
	font-family: var(--bet-font-body, 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
	color: var(--t-ink);
	max-width: 72rem;
	margin-inline: auto;
}

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

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

@media (prefers-reduced-motion: reduce) {
	.bet-timer {
		--t-motion-fast: 0ms;
		--t-motion: 0ms;
	}
}

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

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

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

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

/* Square, because the ring is a circle. Ring and egg share one 280x280
   viewBox and one centre point, so the egg sits dead centre at every size. */
.bet-timer__egg {
	position: relative;
	width: min(17rem, 68cqi);
	aspect-ratio: 1;
}

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

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

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

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

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

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

.bet-timer[data-bet-phase-type='ice'] .bet-timer__ring-progress {
	stroke: var(--t-cool);
}

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

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

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

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

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

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

.bet-timer__clock {
	font-size: var(--t-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(--t-ink);
	transition: font-size var(--t-motion) var(--t-ease);
}

/* Counting? Then the clock is the only thing that matters. */
.bet-timer[data-bet-state='running'] .bet-timer__clock,
.bet-timer[data-bet-state='paused'] .bet-timer__clock {
	font-size: var(--t-clock-running);
}

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

.bet-timer__answer {
	font-family: var(--bet-font-display, 'Fraunces', Georgia, serif);
	font-size: var(--t-step-2);
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
	margin: 0 auto var(--t-space-2xs);
	max-width: 34ch;
	color: var(--t-ink);
}

/* Sits under the buttons, and needs room to breathe away from them. */
.bet-timer__start-condition {
	text-align: center;
	font-size: var(--t-step--1);
	color: var(--t-ink-muted);
	margin: var(--t-space-s) 0 var(--t-space-m);
}

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

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

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

.bet-timer .bet-btn--primary {
	background: var(--t-ink);
	color: var(--t-surface);
	flex: 1 1 14rem;
	max-width: 22rem;
	font-size: var(--t-step-1);
}

/* Ink on amber, not white on amber — white measured 3.2:1 and failed AA. */
.bet-timer .bet-btn--primary:hover:not(:disabled),
.bet-timer .bet-btn--primary:focus-visible:not(:disabled) {
	background: var(--t-amber);
	color: var(--t-ink);
}

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

.bet-timer .bet-btn--secondary:hover:not(:disabled) {
	background: var(--t-sunk);
	border-color: var(--t-ink-muted);
	color: var(--t-ink);
}

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

.bet-timer .bet-btn--quiet:hover:not(:disabled) {
	background: var(--t-sunk);
	color: var(--t-ink);
}

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

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

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

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

.bet-timer .bet-quick:hover {
	background: var(--t-amber-wash);
	border-color: var(--t-amber);
	color: var(--t-ink);
}

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

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

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

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

.bet-timer .bet-quick:hover .bet-quick__label,
.bet-timer .bet-quick.is-selected .bet-quick__label {
	color: var(--t-ink);
}

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

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

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

.bet-field--wide {
	grid-column: 1 / -1;
}

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

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

.bet-timer .bet-field select:hover,
.bet-timer .bet-field input:hover {
	border-color: var(--t-ink-muted);
}

.bet-field__help {
	font-size: var(--t-step--1);
	color: var(--t-ink-muted);
	margin: 0;
	line-height: 1.4;
}

/* ------------------------------------------------------ advanced details -- */

.bet-timer__advanced {
	border: 1px solid var(--t-shell);
	border-radius: var(--t-radius-m);
	padding: 0 var(--t-space-s);
	margin-block: var(--t-space-s);
	background: var(--t-sunk);
}

.bet-timer__advanced > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--t-ink);
	min-height: var(--t-tap);
	display: flex;
	align-items: center;
	position: relative;
	padding-right: var(--t-space-l);
	list-style: none;
}

.bet-timer__advanced > summary::-webkit-details-marker {
	display: none;
}

.bet-timer__advanced > summary:hover {
	color: var(--t-amber-text);
}

/* The chevron. Without it nothing says this row opens. */
.bet-timer__advanced > summary::after {
	content: '';
	position: absolute;
	right: var(--t-space-3xs);
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--t-motion) var(--t-ease);
}

.bet-timer__advanced[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.bet-timer__advanced[open] > summary {
	border-bottom: 1px solid var(--t-shell);
}

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

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

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

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

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

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

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

/* ------------------------------------------------------- finished state -- */

/**
 * The card warms rather than darkening: an amber wash, an amber border, and a
 * soft ring pulsing outward from the egg. Loud enough to catch you from the
 * next room, quiet enough that it never looks like an error.
 *
 * Four independent signals: the wash, the word "Done", an assertive
 * announcement, and sound plus vibration from JS. No channel is load-bearing.
 */
.bet-timer.is-done {
	background: var(--t-amber-wash);
	border-color: var(--t-amber);
}

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

.bet-timer.is-done .bet-timer__clock {
	color: var(--t-ink);
}

.bet-timer.is-done .bet-quick,
.bet-timer.is-done .bet-field select,
.bet-timer.is-done .bet-field input,
.bet-timer.is-done .bet-timer__advanced {
	background: var(--t-surface);
}

@media (prefers-reduced-motion: no-preference) {
	.bet-timer.is-done .bet-timer__egg::after {
		content: '';
		position: absolute;
		inset: -6%;
		border-radius: 50%;
		border: 3px solid var(--t-amber);
		animation: bet-pulse 1.9s ease-out infinite;
		pointer-events: none;
	}

	/* One slow expanding ring — roughly 0.5Hz, far below the 3Hz threshold
	   that causes problems for photosensitive people. */
	@keyframes bet-pulse {
		0% {
			transform: scale(0.94);
			opacity: 0.85;
		}
		70% {
			transform: scale(1.12);
			opacity: 0;
		}
		100% {
			transform: scale(1.12);
			opacity: 0;
		}
	}
}

/* --------------------------------------------------------------- counter -- */

/**
 * Self-contained like the timer: own fallbacks, no dependency on site tokens.
 * A small warm card — egg glyph, big number, quiet label — that reads at a
 * glance in a footer without shouting.
 */
.bet-counter {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--bet-surface, #ffffff);
	border: 1px solid var(--bet-shell, #ede6da);
	border-radius: 999px;
	padding: 0.5rem 1.25rem 0.5rem 0.6rem;
	font-family: var(--bet-font-body, 'Instrument Sans', system-ui, sans-serif);
	margin: 0;
	max-width: 100%;
}

.bet-counter__egg {
	width: 2.4rem;
	height: auto;
	flex: none;
}

.bet-counter__body {
	display: grid;
	line-height: 1.15;
	min-width: 0;
}

.bet-counter__value {
	font-weight: 700;
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--bet-ink, #1a1714);
}

.bet-counter__label {
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bet-ink-muted, #5f574c);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

.bet-timer:not([data-bet-ready]) [data-bet-needs-js],
.bet-timer:not([data-bet-ready]) .bet-timer__start-condition {
	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(--t-step--1);
	color: var(--t-ink-muted);
	text-align: center;
	padding: var(--t-space-2xs);
}

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

/* ----------------------------------------------------------- the chart -- */

.bet-timer .bet-chart {
	margin-top: var(--t-space-l);
}

.bet-timer .bet-chart__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--t-shell);
	border-radius: var(--t-radius-m);
	background: var(--t-surface);
}

.bet-timer .bet-chart table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.bet-timer .bet-chart caption {
	text-align: left;
	font-size: var(--t-step--1);
	color: var(--t-ink-muted);
	caption-side: top;
	padding: var(--t-space-s) var(--t-space-xs) var(--t-space-xs);
	border-bottom: 1px solid var(--t-shell);
}

.bet-timer .bet-chart th,
.bet-timer .bet-chart td {
	padding: var(--t-space-2xs) var(--t-space-xs);
	text-align: left;
	border-bottom: 1px solid var(--t-shell);
}

.bet-timer .bet-chart thead th {
	font-size: var(--t-step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--t-ink-muted);
	background: var(--t-sunk);
}

.bet-timer .bet-chart tbody th {
	font-weight: 600;
}

.bet-timer .bet-chart tbody tr:last-child th,
.bet-timer .bet-chart tbody tr:last-child td {
	border-bottom: none;
}

.bet-timer .bet-chart__start {
	font: inherit;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	min-height: var(--t-tap);
	width: 100%;
	text-align: left;
	background: transparent;
	border: 2px solid transparent;
	border-radius: var(--t-radius-s);
	padding: var(--t-space-3xs) var(--t-space-2xs);
	cursor: pointer;
	color: var(--t-ink);
	display: flex;
	align-items: center;
	gap: var(--t-space-2xs);
}

.bet-timer .bet-chart__start::after {
	content: 'Start';
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--t-amber-text);
	border: 1px solid currentColor;
	border-radius: var(--t-radius-pill);
	padding: 1px 8px;
	opacity: 0;
	transition: opacity var(--t-motion-fast) var(--t-ease);
}

.bet-timer .bet-chart__start:hover,
.bet-timer .bet-chart__start:focus-visible {
	background: var(--t-amber-wash);
	border-color: var(--t-amber);
	color: var(--t-ink);
}

.bet-timer .bet-chart__start:hover::after,
.bet-timer .bet-chart__start:focus-visible::after {
	opacity: 1;
}

/* Touch has no hover, so the affordance is always on. */
@media (hover: none) {
	.bet-timer .bet-chart__start::after {
		opacity: 1;
	}
}

/* --------------------------------------------------------- wider layouts -- */

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

	/* Egg and readout sit side by side as two units, centred against each
	   other on the vertical axis. */
	.bet-timer__stage {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: var(--t-space-xl);
	}

	.bet-timer__readout {
		justify-items: start;
		align-content: center;
		gap: var(--t-space-xs);
	}

	.bet-timer__egg {
		width: 15rem;
	}

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

	.bet-timer__answer,
	.bet-timer__start-condition {
		text-align: left;
		margin-inline: 0;
	}

	.bet-timer__controls {
		justify-content: flex-start;
	}

	.bet-timer .bet-btn--primary {
		flex: 0 1 16rem;
	}
}

@container (min-width: 60rem) {
	.bet-timer {
		padding: var(--t-space-xl);
	}

	.bet-timer__egg {
		width: 19rem;
	}

	.bet-timer__answer {
		max-width: 40ch;
	}

	.bet-timer__quick {
		grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	}

	.bet-timer__settings {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media print {
	.bet-timer__controls,
	.bet-timer__settings,
	.bet-timer__advanced,
	.bet-timer__quick {
		display: none;
	}
}