/* =======================================
   GLOBAL TIMER STICKY BAR
   -----------------------------------------
   Rendered by cjbb-timer-bar.js (window.CJBBTimerEngine) on EVERY page of the
   site, so these rules must NOT depend on recipe-timer-modal.css (which loads
   only on recipe pages). Shown whenever a timer is active but the full modal
   is not on screen. The underlying engine (interval + wall-clock elapsed) keeps
   running while this is on screen — the bar is just a compact view of the same
   live state, and its body is a link back to the timer's recipe.

   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.

   Positioning: the global site header (.cjbb-global-header) is position:sticky,
   top:0, z-index:1000. Its RENDERED height varies with the viewport (box-sizing
   border-box + padding + logo + 44px touch-target rows push it past min-height:
   64px, and the mobile breakpoint changes the padding again), so hardcoding an
   offset drifts and lets this higher-z-index bar paint over the header. Instead
   cjbb-timer-bar.js measures the header at runtime via getBoundingClientRect()
   and sets `top` inline (re-measured on resize); the `top:0` below is only the
   pre-JS / no-header fallback. The z-index of 1200 keeps the bar above normal
   page content but well below the modal overlay's 10001 so the expanded modal
   always wins.
   ======================================= */
.cjbb-timer-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1200;
	display: flex;
	align-items: stretch;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-default);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.cjbb-timer-bar.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Bar body — the re-expand / navigate-to-recipe tap target. A real <a> so it
   is keyboard-operable and right-click/open-in-new-tab works; on the recipe's
   own page the engine intercepts the click to expand the modal instead. */
.cjbb-timer-bar-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 44px;
	padding: 0 var(--space-2);
	background: transparent;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	color: inherit;
}

.cjbb-timer-bar-main:hover {
	text-decoration: none;
}

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

/* Stacked label column: recipe subtitle over the prominent phase line. Both
   lines truncate with an ellipsis so a long recipe title can never widen the
   bar or wrap onto a second row that would break the fixed 44px-tall layout. */
.cjbb-timer-bar-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	overflow: hidden;
}

.cjbb-timer-bar-recipe {
	min-width: 0;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	line-height: 1.25;
	color: var(--text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cjbb-timer-bar-label {
	min-width: 0;
	font-family: var(--font-button);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.25;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cjbb-timer-bar-time {
	flex: 0 0 auto;
	margin-left: auto;
	font-family: var(--font-button);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1;
	color: var(--brand-primary);
	white-space: nowrap;
}

/* Small, deliberately not a full 44px button — a visual cue that the bar
   body is tappable to reopen the full timer, without eating into the
   already-tight mobile width budget shared with the play/pause + stop
   buttons. Decorative (aria-hidden); `main`'s aria-label carries the
   actual semantics. */
.cjbb-timer-bar-expand-hint {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	color: var(--text-secondary);
}

.cjbb-timer-bar-edit-icon {
	width: 20px;
	height: 20px;
}

/* Compact play/pause + stop controls (44px min touch target, square with soft
   corners — same primitive as the modal's icon buttons). */
.cjbb-timer-bar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--text-secondary);
	background: var(--bg-tertiary);
	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-bar-btn:hover {
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}

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

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

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

/* =======================================
   ALARMING STATE
   -----------------------------------------
   The completion alarm loops until Stop. A muted phone still needs an
   unmistakable visual signal, so the whole bar pulses using the theme-aware
   --error-color / --error-bg-color tokens (which resolve to the correct
   light/dark red automatically — no separate dark keyframe needed).
   ======================================= */
@keyframes cjbb-timer-bar-pulse {
	0%, 100% { background: var(--bg-secondary); }
	50% { background: var(--error-bg-color); }
}

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

.cjbb-timer-bar.is-alarming .cjbb-timer-bar-recipe,
.cjbb-timer-bar.is-alarming .cjbb-timer-bar-label,
.cjbb-timer-bar.is-alarming .cjbb-timer-bar-time {
	color: var(--error-color);
}

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

	/* Keep an unmistakable static alarm signal without the pulse. */
	.cjbb-timer-bar.is-alarming {
		animation: none;
		background: var(--error-bg-color);
	}
}

/* =======================================
   Dark mode
   ======================================= */
html.theme-dark .cjbb-timer-bar {
	background: var(--dark-bg-secondary);
	border-bottom-color: var(--dark-border-default);
}

html.theme-dark .cjbb-timer-bar-recipe {
	color: var(--dark-text-tertiary);
}

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

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

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

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

/* Alarm pulse resolves via --error-color / --error-bg-color, which brand-colors
   already remaps for dark mode — the label/time red and the keyframe backdrop
   both follow automatically. */
html.theme-dark .cjbb-timer-bar.is-alarming .cjbb-timer-bar-recipe,
html.theme-dark .cjbb-timer-bar.is-alarming .cjbb-timer-bar-label,
html.theme-dark .cjbb-timer-bar.is-alarming .cjbb-timer-bar-time {
	color: var(--error-color);
}