/* ============================================================================
   EGW BROADCAST — EPHESUS CONSOLE LAYER  (v1.1.0)
   Loaded LAST. Additive only: restyles existing markup, adds no new classes to
   the templates. This is the layer that brings the broadcast subdomain to the
   same chrome, spacing, sizing and positioning standard as the Accounts Hub.

   Rules honoured (Ephesus console spec):
     · Tokens only — every colour is var(--token, literal-fallback).
     · Inverted depth ladder — containers lighter than contents in dark.
     · One accent, used sparingly. Status colour only for real status.
     · 8-point spacing grid. Locked radii. Two signature motion curves.
     · Fail-safe visibility — nothing here hides content; no opacity:0 on
       anything a script must un-hide.
   ============================================================================ */

/* ── colour-scheme so light-dark() in egw-tokens.css resolves correctly ── */
html { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

body {
	font-family: var(--font-body, 'Figtree', sans-serif);
	background: var(--color-bg, #FFFFFF);
	color: var(--color-text, #262626);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color var(--transition-base, 220ms), color var(--transition-base, 220ms);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading, 'Figtree', sans-serif);
	color: var(--color-text-strong, #1A1A1A);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* ── one shared gutter: nav, hero, sections and footer all align to one edge ── */
.container,
.nav-inner,
.site-footer__inner,
.site-footer__bottom {
	width: 100%;
	max-width: var(--container-max, 1200px);
	margin-inline: auto;
	padding-inline: var(--bc-gutter, 24px);
}

/* ══ 1. HEADER — sticky, blurred, 72px, three anchors ═══════════════════════ */
.nav {
	/* MUST stay `fixed`: global.css sets body{padding-top:var(--nav-height)} and
	   class-egw-page-chrome.php's collapse/hide rules both compensate for a fixed
	   nav. Switching to sticky puts the bar back in flow and the body padding then
	   renders as a second, empty 72px band — a doubled-height header. */
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	height: var(--nav-height, 72px);
	display: flex;
	align-items: center;
	background: color-mix(in srgb, var(--color-bg, #fff) 88%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--color-border, rgba(17,17,17,.10));
	box-shadow: none;
	transition: box-shadow var(--transition-base, 220ms), background var(--transition-base, 220ms);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.nav { background: var(--color-bg, #fff); }
}
.nav.scrolled { box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.10)); }
.nav-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
}
.nav-logo { flex: none; gap: 12px; }
.nav-logo img { height: 40px; }
.nav-logo__label { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.nav-logo__label-top {
	font-family: var(--font-heading, sans-serif);
	font-size: 11px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; opacity: 1;
	color: var(--color-text-strong, #1A1A1A);
}
.nav-logo__label-bottom {
	font-family: var(--font-heading, sans-serif);
	font-size: 15px; font-weight: 500; letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-text-muted, #525252);
}

/* nav links — pill rail, pushed right */
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links__menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-links a,
.nav-links__menu > li > a {
	display: inline-flex; align-items: center;
	height: 36px; padding: 0 14px;
	font-family: var(--font-body, sans-serif);
	font-size: 13px; font-weight: 500;
	color: var(--color-text-muted, #525252);
	border: 1px solid transparent;
	border-radius: var(--border-radius-full, 9999px);
	transition: color var(--transition-fast, 150ms),
	            background var(--transition-fast, 150ms),
	            border-color var(--transition-fast, 150ms);
}
.nav-links a:hover,
.nav-links__menu > li > a:hover,
.nav-links__menu > li.current-menu-item > a {
	color: var(--color-text-strong, #1A1A1A);
	background: var(--tint-2, rgba(17,17,17,.08));
	border-color: var(--color-border, rgba(17,17,17,.10));
}

/* actions cluster — divided from the links */
.nav-actions {
	display: inline-flex; align-items: center; gap: 8px;
	padding-left: 16px; margin-left: 16px;
	border-left: 1px solid var(--color-border, rgba(17,17,17,.10));
}
.nav-icon-btn,
.nav-hamburger {
	width: 36px; height: 36px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--tint-1, rgba(17,17,17,.045));
	color: var(--color-text, #262626);
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: var(--border-radius-full, 9999px);
	cursor: pointer;
	transition: background var(--transition-fast, 150ms),
	            border-color var(--transition-fast, 150ms),
	            transform var(--transition-fast, 150ms);
}
.nav-icon-btn:hover,
.nav-hamburger:hover {
	background: var(--tint-3, rgba(17,17,17,.13));
	border-color: var(--color-border-strong, rgba(17,17,17,.22));
}
.nav-icon-btn:active,
.nav-hamburger:active { transform: scale(.92); }
.nav-icon-btn svg, .nav-hamburger svg { width: 18px; height: 18px; }

/* Tri-state theme toggle — exactly ONE icon shows at a time.
   Specificity note: global.css ships `[data-theme="dark"] .nav-icon-btn .ico-sun
   { display:block }` at (0,3,0). A plain `[data-egw-theme-toggle] .ico-sun`
   hide rule is only (0,2,0) and LOSES to it — which painted the sun and the moon
   on top of each other. Qualifying with html[data-theme] lifts the hide to
   (0,3,1) so it wins, and the show rules to (0,4,1). Do not lower these. */
html[data-theme] [data-egw-theme-toggle] .ico-sun,
html[data-theme] [data-egw-theme-toggle] .ico-moon,
html[data-theme] [data-egw-theme-toggle] .ico-system { display: none; }
html[data-theme][data-theme-mode="light"]  [data-egw-theme-toggle] .ico-sun    { display: block; }
html[data-theme][data-theme-mode="dark"]   [data-egw-theme-toggle] .ico-moon   { display: block; }
html[data-theme][data-theme-mode="system"] [data-egw-theme-toggle] .ico-system { display: block; }
html[data-theme]:not([data-theme-mode]) [data-egw-theme-toggle] .ico-system    { display: block; }
[data-egw-theme-toggle] { position: relative; }

/* `!important` is required here only because global.css hardcodes
   `color:#000 !important` on this pill (it assumed cream was light in both modes). */
.nav .nav-back-link,
.nav-back-link {
	display: inline-flex; align-items: center; gap: 6px;
	height: 36px; padding: 0 14px;
	font-family: var(--font-body, sans-serif);
	font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--color-text-muted, #525252) !important;
	background: transparent;
	border: 1px solid var(--color-border-strong, rgba(17,17,17,.22));
	border-radius: var(--border-radius-full, 9999px);
	box-shadow: none;
	transition: color var(--transition-fast, 150ms),
	            background var(--transition-fast, 150ms),
	            border-color var(--transition-fast, 150ms),
	            transform var(--transition-fast, 150ms);
}
.nav .nav-back-link:hover,
.nav-back-link:hover {
	color: var(--color-text-strong, #1A1A1A) !important;
	background: var(--tint-2, rgba(17,17,17,.08));
	border-color: var(--color-border-strong, rgba(17,17,17,.22));
	transform: translateY(-1px);
	box-shadow: none;
}

/* language popover — console card */
.nav-lang-pop {
	background: var(--color-bg-muted, #F2F2F1);
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: var(--border-radius-lg, 16px);
	box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16));
	padding: 6px;
}
.nav-lang-pop button {
	color: var(--color-text, #262626);
	border-radius: var(--border-radius-md, 8px);
	font-size: 13px; font-weight: 500;
}
.nav-lang-pop button:hover { background: var(--tint-2, rgba(17,17,17,.08)); }

/* mobile drawer */
.mobile-nav__panel {
	background: var(--color-bg-alt, #EDEDEB);
	border-left: 1px solid var(--color-border, rgba(17,17,17,.10));
	padding: 24px var(--bc-gutter, 24px);
	gap: 8px;
}
.mobile-nav__panel a,
.mobile-nav__menu > li > a {
	display: flex; align-items: center;
	min-height: 44px; padding: 0 16px;
	font-size: 15px; font-weight: 500;
	color: var(--color-text, #262626);
	border: 1px solid transparent;
	border-radius: var(--border-radius-full, 9999px);
	transition: all var(--transition-fast, 150ms);
}
.mobile-nav__panel a:hover,
.mobile-nav__menu > li > a:hover {
	background: var(--tint-2, rgba(17,17,17,.08));
	border-color: var(--color-border, rgba(17,17,17,.10));
}

/* ══ 2. BUTTONS — two sizes only: 44px primary, 36px inline ════════════════ */
.btn, .btn-cta, .btn-outline, .bc-schedule__cta {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 24px;
	font-family: var(--font-body, sans-serif);
	font-size: 13.5px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: var(--border-radius-full, 9999px);
	cursor: pointer;
	transition: transform var(--transition-fast, 150ms),
	            box-shadow var(--transition-base, 220ms),
	            background var(--transition-base, 220ms),
	            border-color var(--transition-base, 220ms);
}
.btn-cta {
	background: var(--color-accent, #1A1A1A);
	color: var(--color-on-accent, #FFFFFF);
	border-color: var(--color-accent, #1A1A1A);
}
.btn-cta:hover {
	background: var(--color-accent-hover, #000000);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
}
.btn-outline, .bc-schedule__cta {
	background: transparent;
	color: var(--color-text-strong, #1A1A1A);
	border-color: var(--color-border-strong, rgba(17,17,17,.22));
}
.btn-outline:hover, .bc-schedule__cta:hover {
	background: var(--tint-2, rgba(17,17,17,.08));
	transform: translateY(-2px);
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
}
.btn:active, .btn-cta:active, .btn-outline:active, .bc-schedule__cta:active {
	transform: translateY(0) scale(.97);
}
.bc-schedule__cta { height: 36px; padding: 0 16px; font-size: 12px; }

/* ══ 3. MICRO-LABEL VOICE — the signature detail ═══════════════════════════ */
.eyebrow,
.bc-schedule__date .month,
.bc-schedule__part,
.site-footer h3 {
	font-family: var(--font-heading, sans-serif);
	font-size: .66rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--color-text-subtle, #707070);
	line-height: 1.4;
}

/* ══ 4. PAGE HERO — 48/40 rhythm, hairline close ═══════════════════════════ */
.bc-page-hero {
	background: var(--color-bg, #FFFFFF);
	padding-top: 48px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--color-border, rgba(17,17,17,.10));
}
.bc-page-hero__title {
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin-top: 8px;
	color: var(--color-text-strong, #1A1A1A);
}
/* CTA cluster. The hero is text-align:center, but a flex/grid row does NOT
   inherit text-align — its items are positioned by justify-content. So any
   button cluster in a hero must centre itself explicitly. */
.bc-page-hero__cta,
.bc-landing-hero__cta,
.bc-page-hero .btn-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}
/* Safety net: catches an un-classed div/p wrapping buttons in a hero (e.g.
   content authored in the block editor). :has() is progressive — browsers
   without it simply fall back to the explicit classes above. */
@supports selector(:has(*)) {
	.bc-page-hero .container > div:has(> .btn),
	.bc-page-hero .container > p:has(> .btn) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 12px;
		margin-top: 24px;
	}
}
.bc-page-hero__lead {
	color: var(--color-text-muted, #525252);
	font-size: 1rem;
	margin-top: 12px;
	max-width: 52ch;
}

/* ══ 5. SECTION RHYTHM — 40px between sections, 24px head → content ════════ */
.bc-section { padding-block: 40px 0; }
.bc-section:last-of-type { padding-bottom: 48px; }
.bc-section + .bc-section { padding-top: 40px; }

/* ══ 6. CARDS — 16px radius, 16:9 media, equal height, −4px lift ═══════════ */
.bc-grid { gap: 16px; }
.bc-grid .broadcast-card,
.broadcast-card {
	display: flex; flex-direction: column;
	background: var(--card-bg, var(--color-bg-muted, #F2F2F1));
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: var(--border-radius-lg, 16px);
	overflow: hidden;
	box-shadow: none;
	transition: transform var(--transition-base, 220ms),
	            box-shadow var(--transition-base, 220ms),
	            border-color var(--transition-base, 220ms);
}
.bc-grid .broadcast-card:hover,
.broadcast-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-float, 0 10px 26px -14px rgba(17,17,17,.24));
	border-color: var(--color-border-strong, rgba(17,17,17,.22));
}
.bc-grid .broadcast-card__media,
.broadcast-card__media {
	aspect-ratio: 16 / 9;
	background: var(--inset-bg, var(--color-bg-well, #EBEBE9));
	border-bottom: 1px solid var(--color-border, rgba(17,17,17,.10));
}
.broadcast-card__body,
.broadcast-card__meta {
	display: flex; flex-direction: column; gap: 4px;
	padding: 16px;
	flex: 1;
}
.broadcast-card__title { font-size: .92rem; font-weight: 700; line-height: 1.35; }
.broadcast-card__sub,
.broadcast-card__meta { font-size: .74rem; color: var(--color-text-subtle, #707070); }

/* ══ 7. FILTER CHIPS ═══════════════════════════════════════════════════════ */
.bc-filter-row { gap: 8px; margin-bottom: 24px; }
.bc-filter-chip {
	display: inline-flex; align-items: center;
	height: 32px; padding: 0 14px;
	font-family: var(--font-heading, sans-serif);
	font-size: .66rem; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--color-text-subtle, #707070);
	background: var(--tint-1, rgba(17,17,17,.045));
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: var(--border-radius-full, 9999px);
	transition: all var(--transition-fast, 150ms);
}
.bc-filter-chip:hover {
	background: var(--tint-3, rgba(17,17,17,.13));
	color: var(--color-text-strong, #1A1A1A);
	transform: translateY(-1px);
}
.bc-filter-chip.is-active {
	background: var(--color-accent, #1A1A1A);
	color: var(--color-on-accent, #FFFFFF);
	border-color: var(--color-accent, #1A1A1A);
}

/* ══ 8. SCHEDULE ROWS — 56px date block, truncating title, right CTA ═══════ */
.bc-schedule__item {
	display: flex; align-items: center; gap: 16px;
	background: var(--card-bg, var(--color-bg-muted, #F2F2F1));
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: var(--border-radius-lg, 16px);
	padding: 16px;
	box-shadow: none;
	transition: transform var(--transition-base, 220ms),
	            box-shadow var(--transition-base, 220ms),
	            border-color var(--transition-base, 220ms);
}
.bc-schedule__item + .bc-schedule__item { margin-top: 12px; }
.bc-schedule__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-float, 0 10px 26px -14px rgba(17,17,17,.24));
	border-color: var(--color-border-strong, rgba(17,17,17,.22));
}
.bc-schedule__date {
	width: 56px; height: 56px; flex: none;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	background: var(--color-accent, #1A1A1A);
	color: var(--color-on-accent, #FFFFFF);
	border-radius: 12px;
}
.bc-schedule__date .day { font-size: 20px; font-weight: 800; line-height: 1; }
.bc-schedule__date .month { color: inherit; opacity: .82; font-size: 10px; line-height: 1; }
.bc-schedule__body { flex: 1; min-width: 0; }
.bc-schedule__title { font-size: .95rem; font-weight: 700; line-height: 1.35; margin: 0 0 3px; }
.bc-schedule__subtitle { font-size: .82rem; color: var(--color-text-muted, #525252); opacity: 1; margin: 0 0 3px; }
.bc-schedule__meta { font-size: .78rem; color: var(--color-text-subtle, #707070); }
.bc-schedule__part { color: var(--color-text-muted, #525252); }

/* ══ 9. RADIO STAGE + EMPTY STATE ═════════════════════════════════════════ */
.bc-radio-stage {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	margin-top: 40px;
	padding: 40px var(--bc-gutter, 24px);
	background: var(--stage-bg, var(--color-bg-alt, #EDEDEB));
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: var(--border-radius-xl, 18px);
	box-shadow: none;
	text-align: center;
}
.bc-radio-stage h2 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.bc-radio-stage p { color: var(--color-text-muted, #525252); max-width: 48ch; margin: 0; opacity: 1; }
.bc-radio-stage .radio-pulse::before,
.bc-radio-stage .radio-pulse { background: var(--color-live, #B42318); }

.bc-empty {
	background: var(--tint-1, rgba(17,17,17,.045));
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: var(--border-radius-lg, 16px);
	padding: 40px 24px;
}
.bc-empty__icon, a.bc-empty--clickable .bc-empty__lead { color: var(--color-text-strong, #1A1A1A); }
a.bc-empty--clickable:hover {
	background: var(--tint-2, rgba(17,17,17,.08));
	border-color: var(--color-border-strong, rgba(17,17,17,.22));
	transform: translateY(-3px);
	box-shadow: var(--shadow-float, 0 10px 26px -14px rgba(17,17,17,.24));
}
a.bc-empty--clickable:focus-visible { outline: 2px solid var(--color-accent, #1A1A1A); outline-offset: 3px; }

/* ══ 10. FOOTER — column grid + hairline bottom bar ════════════════════════ */
.site-footer {
	margin-top: 48px;
	background: var(--footer-bg, var(--color-bg-alt, #EDEDEB));
	color: var(--color-text, #262626);
	border-top: 1px solid var(--color-border, rgba(17,17,17,.10));
}
.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
	padding-top: 32px;
	padding-bottom: 24px;
}
.site-footer__inner > div { width: 100%; max-width: none; }
.site-footer h3 { margin: 0 0 10px; }
.site-footer p, .site-footer a { color: var(--color-text-muted, #525252); font-size: .85rem; }
.site-footer a { display: block; padding: 3px 0; }
.site-footer a:hover { color: var(--color-text-strong, #1A1A1A); }
.site-footer ul li { margin: 0; }
.site-footer__bottom {
	border-top: 1px solid var(--color-border, rgba(17,17,17,.10));
	padding-top: 16px; padding-bottom: 24px;
	font-size: .8rem;
	color: var(--color-text-subtle, #707070);
	text-align: center;
}

/* ══ 11. AUDIO / VIDEO PLAYER — onto the console card surface ══════════════ */
.ephesus-audio-player {
	--eap-accent:      var(--color-accent, #1A1A1A);
	--eap-accent-soft: var(--tint-2, rgba(17,17,17,.08));
	--eap-cream:       var(--card-bg, var(--color-bg-muted, #F2F2F1));
	--eap-radius:      14px;
	background: var(--card-bg, var(--color-bg-muted, #F2F2F1));
	color: var(--color-text, #262626);
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: var(--border-radius-xl, 18px);
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
}
.ephesus-video-master,
.evm-shell {
	background: var(--card-bg, var(--color-bg-muted, #F2F2F1));
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: var(--border-radius-xl, 18px);
	color: var(--color-text, #262626);
}

/* ══ 12. ACCESSIBILITY + MOTION SAFETY ════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
[role="menuitem"]:focus-visible,
.bc-filter-chip:focus-visible {
	outline: 2px solid var(--color-accent, #1A1A1A);
	outline-offset: 3px;
	border-radius: var(--border-radius-full, 9999px);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.bc-grid .broadcast-card:hover,
	.broadcast-card:hover,
	.bc-schedule__item:hover,
	.btn:hover, .btn-cta:hover, .btn-outline:hover,
	.bc-filter-chip:hover, .nav-back-link:hover { transform: none; }
}

/* ══ 13. RESPONSIVE — the gutter carries; only sizes step down ═════════════ */
@media (max-width: 980px) {
	.nav-actions { padding-left: 12px; margin-left: 8px; }
}
@media (max-width: 768px) {
	.bc-page-hero { padding-top: 32px; padding-bottom: 32px; }
	.bc-section, .bc-section + .bc-section { padding-top: 32px; }
	.bc-radio-stage { margin-top: 32px; padding: 32px 20px; }
	.site-footer { margin-top: 32px; }
	.btn, .btn-cta, .btn-outline { width: 100%; }
	.bc-schedule__cta { width: auto; }
}
@media (max-width: 640px) {
	.bc-schedule__item { flex-wrap: wrap; }
	.bc-schedule__body { flex-basis: calc(100% - 72px); }
	.bc-schedule__cta { width: 100%; margin-top: 4px; }
	.nav-logo__label { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   14. LIVE / NEXT BROADCAST DOCK  (v1.1.1 — owner-approved redesign)
   Glass capsule, cover art inside a radial progress ring, live waveform or
   tabular countdown, accent + ghost CTAs. Bottom sheet below 720px.
   The legacy dock CSS was DELETED from global.css (not overridden), so these
   are the only rules for it — keep them together.

   Red is a STATUS signal only (dot, ring, waveform). It is never a button
   fill: the old #ff4040 "Watch" slab fought the monochrome system, and its
   "Listen" twin was cream-on-cream (invisible). Both are gone.
   ══════════════════════════════════════════════════════════════════════════ */
.bc-countdown-dock {
	position: fixed;
	top: 50%; right: 0;
	z-index: 900;
	display: flex;
	align-items: stretch;
	transform: translateY(-50%);
	transition: transform var(--motion-slower, 460ms) var(--ease-entrance, cubic-bezier(.16,1,.3,1));
}
.bc-countdown-dock.is-closed { transform: translateY(-50%) translateX(calc(100% - 38px)); }
@media print { .bc-countdown-dock { display: none !important; } }

/* ── handle ── */
.bc-countdown-dock__handle {
	width: 38px; flex: none;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
	background: var(--card-bg, var(--color-bg-muted, #F2F2F1));
	color: var(--color-text, #262626);
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-right: 0;
	border-radius: var(--border-radius-xl, 18px) 0 0 var(--border-radius-xl, 18px);
	box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16));
	cursor: pointer;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.bc-countdown-dock__handle,
	.bc-countdown-dock .bc-countdown {
		background: color-mix(in srgb, var(--color-bg-muted, #F2F2F1) 78%, transparent);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
	}
}
.bc-countdown-dock__chevron {
	color: var(--color-text-subtle, #666666);
	transition: transform var(--motion-slower, 460ms) var(--ease-entrance, cubic-bezier(.16,1,.3,1));
}
.bc-countdown-dock.is-closed .bc-countdown-dock__chevron { transform: rotate(180deg); }
.bc-countdown-dock__handle-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-heading, sans-serif);
	font-size: .6rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--color-text-muted, #525252);
}
.bc-countdown-dock__handle:hover { background: var(--color-bg-alt, #EDEDEB); }

/* ── the status dot (handle + label). Pulse ring, status colour only. ── */
.bc-countdown__dot,
.bc-countdown__live-dot {
	position: relative;
	width: 7px; height: 7px; flex: none;
	border-radius: 50%;
	background: var(--color-text-subtle, #666666);
}
/* PHP stamps .is-live on the dock itself, so the handle dot needs no :has(). */
.bc-countdown-dock.is-live .bc-countdown__dot,
.bc-countdown__live-dot { background: var(--color-live, #B42318); }
.bc-countdown-dock.is-live .bc-countdown__dot::after,
.bc-countdown__live-dot::after {
	content: "";
	position: absolute; inset: -4px;
	border-radius: 50%;
	border: 1.5px solid var(--color-live, #B42318);
	opacity: .5;
	animation: bcRing 1.9s var(--ease-entrance, cubic-bezier(.16,1,.3,1)) infinite;
}
@keyframes bcRing { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } }

/* ── capsule ── */
.bc-countdown-dock .bc-countdown {
	width: 264px;
	display: flex; flex-direction: column; gap: 13px;
	padding: 16px;
	background: var(--card-bg, var(--color-bg-muted, #F2F2F1));
	color: var(--color-text, #262626);
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-right: 0;
	border-radius: var(--border-radius-xl, 18px) 0 0 var(--border-radius-xl, 18px);
	box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16));
}
.bc-countdown__head { display: flex; align-items: center; gap: 12px; }

/* ── cover art inside the radial ring ── */
.bc-countdown__ring { position: relative; width: 60px; height: 60px; flex: none; }
.bc-countdown__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.bc-countdown__trk { stroke: var(--tint-3, rgba(17,17,17,.13)); }
.bc-countdown__bar {
	stroke: var(--color-accent, #1A1A1A);
	stroke-linecap: round;
	stroke-dasharray: 169.6;
	stroke-dashoffset: var(--bc-ring-offset, 169.6);   /* set inline by PHP */
	transition: stroke-dashoffset var(--motion-slow, 700ms) var(--ease-entrance, cubic-bezier(.16,1,.3,1)), stroke var(--motion-base, 400ms);
}
.bc-countdown.is-live .bc-countdown__bar { stroke: var(--color-live, #B42318); stroke-dashoffset: 0; }
.bc-countdown__art {
	position: absolute; inset: 6px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 14px;
	overflow: hidden;
	color: #FFFFFF;                       /* on the artwork scrim — always light */
	background-color: var(--inset-bg, var(--color-bg-well, #EBEBE9));
	background-size: cover;
	background-position: center;
}
.bc-countdown__art::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.5));
}
.bc-countdown__eq { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.bc-countdown__eq i { width: 2.5px; border-radius: 2px; background: #FFFFFF; animation: bcEq .9s ease-in-out infinite; }
.bc-countdown__eq i:nth-child(2) { animation-delay: .15s; }
.bc-countdown__eq i:nth-child(3) { animation-delay: .3s; }
@keyframes bcEq { 0%, 100% { height: 4px; } 50% { height: 13px; } }
.bc-countdown__cal { position: relative; z-index: 2; }

/* ── head text ── */
.bc-countdown__htx { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.bc-countdown__label {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-heading, sans-serif);
	font-size: .57rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--color-text-subtle, #666666);
}
.bc-countdown.is-live .bc-countdown__label { color: var(--color-live, #B42318); }
.bc-countdown__title {
	display: block;
	margin-top: 5px;
	font-family: var(--font-heading, sans-serif);
	font-size: .94rem; font-weight: 700; line-height: 1.3;
	color: var(--color-text-strong, #1A1A1A);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-countdown__sub {
	display: block;
	margin-top: 2px;
	font-size: .7rem;
	color: var(--color-text-subtle, #666666);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── live waveform / countdown readout (both sit in a well) ── */
.bc-countdown__wave,
.bc-countdown__readout {
	display: flex; align-items: center; justify-content: center;
	height: 46px;
	background: var(--inset-bg, var(--color-bg-well, #EBEBE9));
	border: 1px solid var(--color-border, rgba(17,17,17,.10));
	border-radius: 14px;
}
.bc-countdown__wave { gap: 3px; }
.bc-countdown__wave i { width: 3px; height: 12px; border-radius: 3px; background: var(--color-live, #B42318); animation: bcEq 1s ease-in-out infinite; }
.bc-countdown__wave i:nth-child(2) { height: 22px; animation-delay: .1s; }
.bc-countdown__wave i:nth-child(3) { height: 14px; animation-delay: .2s; }
.bc-countdown__wave i:nth-child(4) { height: 26px; animation-delay: .3s; }
.bc-countdown__wave i:nth-child(5) { height: 16px; animation-delay: .4s; }
.bc-countdown__wave i:nth-child(6) { height: 23px; animation-delay: .5s; }
.bc-countdown__wave i:nth-child(7) { height: 12px; animation-delay: .6s; }
.bc-countdown__wave i:nth-child(8) { height: 19px; animation-delay: .7s; }

.bc-countdown__readout { gap: 2px; font-variant-numeric: tabular-nums; }
.bc-countdown__readout b {
	font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
	color: var(--color-text-strong, #1A1A1A);
}
.bc-countdown__readout s { text-decoration: none; margin: 0 1px; font-weight: 700; font-size: .95rem; color: var(--color-text-subtle, #666666); }
.bc-countdown__readout u {
	text-decoration: none;
	align-self: center;
	margin-left: 7px;
	font-size: .52rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--color-text-subtle, #666666);
}

/* ── CTAs ── */
.bc-countdown__ctas { display: flex; gap: 8px; }
.bc-countdown__cta {
	flex: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 38px;
	font-family: var(--font-body, sans-serif);
	font-size: 11.5px; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: var(--border-radius-full, 9999px);
	cursor: pointer;
	transition: transform var(--transition-fast, 150ms),
	            box-shadow var(--transition-base, 220ms),
	            background var(--transition-base, 220ms);
}
.bc-countdown__cta--primary {
	background: var(--color-accent, #1A1A1A);
	color: var(--color-on-accent, #FFFFFF);
}
.bc-countdown__cta--ghost {
	background: var(--tint-1, rgba(17,17,17,.045));
	color: var(--color-text, #262626);
	border-color: var(--color-border-strong, rgba(17,17,17,.22));
}
.bc-countdown__cta--ghost:hover { background: var(--tint-2, rgba(17,17,17,.08)); }
.bc-countdown__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12)); }
.bc-countdown__cta:active { transform: translateY(0) scale(.96); }
.bc-countdown__cta:focus-visible { outline: 2px solid var(--color-accent, #1A1A1A); outline-offset: 3px; }

/* ── ≤720px: the same capsule, docked as a bottom sheet ── */
@media (max-width: 720px) {
	.bc-countdown-dock {
		top: auto; bottom: 0; right: 0; left: 0;
		transform: none;
		flex-direction: column-reverse;
		align-items: center;
	}
	.bc-countdown-dock.is-closed { transform: translateY(calc(100% - 34px)); }
	.bc-countdown-dock .bc-countdown {
		width: 100%;
		max-width: 420px;
		border-right: 1px solid var(--color-border, rgba(17,17,17,.10));
		border-bottom: 0;
		border-radius: var(--border-radius-xl, 18px) var(--border-radius-xl, 18px) 0 0;
	}
	.bc-countdown-dock__handle {
		width: 100%;
		max-width: 420px;
		height: 34px;
		flex-direction: row;
		gap: 8px;
		border-right: 1px solid var(--color-border, rgba(17,17,17,.10));
		border-bottom: 0;
		border-radius: var(--border-radius-xl, 18px) var(--border-radius-xl, 18px) 0 0;
	}
	.bc-countdown-dock__handle-label { writing-mode: horizontal-tb; transform: none; }
	.bc-countdown-dock__chevron { transform: rotate(-90deg); }
	.bc-countdown-dock.is-closed .bc-countdown-dock__chevron { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
	.bc-countdown__eq i,
	.bc-countdown__wave i,
	.bc-countdown__dot::after,
	.bc-countdown__live-dot::after { animation: none; }
	.bc-countdown__wave i { height: 16px; }
}