/* =======================================
   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.
   ======================================= */

/* Page trigger button (button chrome itself is .cjbb-btn.cjbb-btn-primary) */
.cjbb-timer-launch {
	display: flex;
	justify-content: center;
	margin: var(--space-5) 0 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);
}

/* Phase tabs — reuses .cjbb-toggle-pair / .cjbb-toggle-btn from recipe-detail.css */
.cjbb-timer-tabs {
	display: flex;
	justify-content: center;
}

/* 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);
}

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

@media (prefers-reduced-motion: reduce) {
	.cjbb-timer-progress-fill {
		transition: 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);
}