/* =======================================
   UNIFIED RECIPE TIMER MODAL
   -----------------------------------------
   Overlay chrome + scale-in animation are inherited from the shared
   .cjbb-modal-overlay / .cjbb-modal-card rules (recipe-profile.css). This
   file only styles the timer-specific internals inside .cjbb-timer-card and
   the page trigger. All colours come from semantic tokens (brand-colors.css)
   so light/dark switch automatically; explicit html.theme-dark overrides
   below only cover surfaces that need a different token in dark mode, mirroring
   the Confirm Modal dark block.
   ======================================= */

/* Per-step quick-timer trigger — sits inline in the instruction meta row.
   Square Work Sans button per the design system; 44px min touch target for
   thumb use while cooking/brewing. Only rendered when the recipe has timer
   phases, so this CSS only loads alongside it. */
.cjbb-step-timer-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: 44px;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-button);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--brand-primary);
	background: var(--bg-tertiary);
	border: 1px solid var(--border-subtle);
	border-radius: 0;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cjbb-step-timer-btn:hover {
	color: #fff;
	background: var(--brand-primary);
	border-color: var(--brand-primary);
}

.cjbb-step-timer-btn:focus-visible {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* Groups a stat value with its phase timer button on a Cook Profile / Brew Day
   info row (a space-between flex row: label left, this group right) and on the
   Cook Time cell in the top info grid (centred). Layout only — no colours, so
   no theme-dark override is needed; the button reuses .cjbb-step-timer-btn's
   dark styles. */
.recipe-detail-info-value-timer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

/* Card layout */
.cjbb-modal-card.cjbb-timer-card {
	max-width: 480px;
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Header */
.cjbb-timer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.cjbb-timer-title {
	margin: 0;
	min-width: 0;
	flex: 1 1 auto;
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cjbb-timer-header-controls {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}

/* Icon buttons (44px min touch target, square with soft corners) */
.cjbb-timer-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--text-secondary);
	background: var(--bg-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cjbb-timer-iconbtn:hover {
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}

.cjbb-timer-iconbtn:focus-visible {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

.cjbb-timer-iconbtn.is-active {
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}

/* Countdown display */
.cjbb-timer-display {
	text-align: center;
	padding: var(--space-2) 0;
	min-height: 3.5rem;
}

.cjbb-timer-time {
	font-family: var(--font-button);
	font-variant-numeric: tabular-nums;
	font-size: 3.25rem;
	font-weight: 700;
	line-height: 1;
	color: var(--text-primary);
}

.cjbb-timer-edit {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
}

/* Author rules win specificity ties over the UA [hidden] rule, so the base
   display above would keep the edit box visible even while JS sets the native
   `hidden` property. This attribute-selector override (declared later, equal
   specificity) restores hide-on-hidden without needing !important. */
.cjbb-timer-edit[hidden] {
	display: none;
}

.cjbb-timer-edit-input {
	width: 120px;
	font-family: var(--font-button);
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	color: var(--text-primary);
	background: var(--bg-primary);
	border: 2px solid var(--border-default);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
}

.cjbb-timer-edit-input:focus {
	outline: none;
	border-color: var(--brand-primary);
}

.cjbb-timer-edit-unit {
	font-family: var(--font-button);
	font-size: var(--text-base);
	color: var(--text-secondary);
}

/* Progress bar + markers */
.cjbb-timer-progress {
	position: relative;
	height: 8px;
	margin: var(--space-2) 0 var(--space-6);
	background: var(--bg-tertiary);
	border-radius: var(--radius-full);
}

.cjbb-timer-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: var(--brand-primary);
	border-radius: var(--radius-full);
	transition: width 0.25s linear;
}

.cjbb-timer-markers {
	position: absolute;
	inset: 0;
}

.cjbb-timer-marker {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bg-primary);
	border: 2px solid var(--brand-primary);
	z-index: 2;
}

.cjbb-timer-marker-label {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-button);
	font-size: var(--text-xs);
	color: var(--text-tertiary);
	white-space: nowrap;
}

/* Controls row */
.cjbb-timer-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
}

.cjbb-timer-playpause {
	width: 56px;
	height: 56px;
	min-width: 56px;
	font-size: 1.4rem;
	color: #fff;
	background: var(--brand-primary);
	border-color: var(--brand-primary);
}

.cjbb-timer-playpause:hover {
	color: #fff;
	background: var(--brand-primary-dark);
	border-color: var(--brand-primary-dark);
}

/* =======================================
   ALARMING STATE (full modal)
   -----------------------------------------
   The sticky bar (rendered globally by the engine) lives in cjbb-timer-bar.css.
   This block covers only the case where the full modal happens to be open when
   the completion alarm fires: the countdown pulses red and the card gets an
   error-coloured ring. Tokens are theme-aware (--error-color) so both light and
   dark resolve automatically.
   ======================================= */
@keyframes cjbb-timer-time-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.cjbb-timer-card.is-alarming {
	outline: 2px solid var(--error-color);
	outline-offset: -2px;
}

.cjbb-timer-card.is-alarming .cjbb-timer-time {
	color: var(--error-color);
	animation: cjbb-timer-time-pulse 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.cjbb-timer-progress-fill {
		transition: none;
	}

	/* Keep the red colour, drop the pulse. */
	.cjbb-timer-card.is-alarming .cjbb-timer-time {
		animation: none;
	}
}

/* =======================================
   Dark mode
   ======================================= */
html.theme-dark .cjbb-timer-card {
	background: var(--dark-bg-secondary);
}

html.theme-dark .cjbb-timer-title {
	color: var(--dark-text-primary);
}

html.theme-dark .cjbb-timer-iconbtn {
	color: var(--dark-text-secondary);
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
}

html.theme-dark .cjbb-timer-iconbtn:hover,
html.theme-dark .cjbb-timer-iconbtn.is-active {
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}

html.theme-dark .cjbb-timer-playpause,
html.theme-dark .cjbb-timer-playpause:hover {
	color: #fff;
}

html.theme-dark .cjbb-timer-time {
	color: var(--dark-text-primary);
}

html.theme-dark .cjbb-timer-edit-input {
	color: var(--dark-text-primary);
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
}

html.theme-dark .cjbb-timer-edit-input:focus {
	border-color: var(--brand-primary);
}

html.theme-dark .cjbb-timer-progress {
	background: var(--dark-bg-quaternary);
}

html.theme-dark .cjbb-timer-marker {
	background: var(--dark-bg-secondary);
}

html.theme-dark .cjbb-step-timer-btn {
	color: var(--brand-primary);
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
}

html.theme-dark .cjbb-step-timer-btn:hover {
	color: #fff;
	background: var(--brand-primary);
	border-color: var(--brand-primary);
}