/* ════════════════════════════════════════════════════════════════════
   EGW Broadcast — Responsive Polish Overlay  (v3.4.0)
   --------------------------------------------------------------------
   Loaded AFTER ephesus-audio-player.css. Its job is to:

     1. Tighten and modernize the audio player on every viewport
        (mobile ≤480, large mobile 481–639, tablet 640–1023,
         laptop 1024–1279, desktop ≥1280).
     2. Give every interactive control a real 44×44 tap target on
        touch screens (Apple HIG / WCAG 2.5.5 AAA).
     3. Reflow the broadcast page hero, sermons grid, music grid,
        re-broadcasts grid, and EGW Radio card cleanly at every size.
     4. Refresh the icon set with consistent 1.8px stroke weights
        and harmonious sizing.
     5. Add safety overrides for the legacy "Hello world!" speaker
        data that some imported re-broadcasts still carry.

   Naming: this file does NOT redefine the audio-player look-and-feel
   from scratch. It selectively overrides only what was awkward at
   mobile/tablet sizes, plus a small set of "global" tweaks that
   apply at all viewports (tap targets, focus rings, icon weight).
   ════════════════════════════════════════════════════════════════════ */


/* ── 1.  Global tap-target & focus pass ────────────────────────────
      Applies on every viewport. Touch devices honour these immediately;
      desktops still benefit from the larger hit area without it looking
      heavy because the inner SVG is unchanged.
   ──────────────────────────────────────────────────────────────── */

.broadcast-page :where(button, [role="button"]):focus-visible,
.broadcast-page :where(a):focus-visible {
	outline: 2px solid var(--color-navy, #0F2A4A);
	outline-offset: 2px;
	border-radius: 8px;
}
[data-theme="dark"] .broadcast-page :where(button, [role="button"], a):focus-visible {
	outline-color: var(--eap-cream, #FFF1D3);
}

/* Touch-only: enlarge every player icon button into a 44px square,
   visually keeping the same SVG size by positioning the icon inside.
   Pointer:fine devices keep the existing compact 36px. */
@media (hover: none) and (pointer: coarse) {
	.eap-iconbtn,
	.broadcast-card__play,
	.eap-tab,
	.eap-viz-trigger,
	.eap-viz-pop-row,
	.eap-subscribe {
		min-width: 44px;
		min-height: 44px;
	}
	.eap-iconbtn {
		width: 44px;
		height: 44px;
	}
}


/* ── 2.  Broadcast HERO at every viewport ──────────────────────────
      Desktop: 2-col split (copy left, player right).
      Tablet:  stack copy on top, player below — full width.
      Mobile:  same stack, but tighten the copy padding.
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
	.broadcast-page .broadcast-hero { padding: clamp(36px, 6vw, 64px) 0 clamp(28px, 5vw, 48px); }
	.broadcast-page .broadcast-hero__inner { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); }
	.broadcast-page .broadcast-hero__player { min-height: 0; }
}
@media (max-width: 639px) {
	.broadcast-page .broadcast-hero__title { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.08; }
	.broadcast-page .broadcast-hero__lead  { font-size: 0.98rem; }
	.broadcast-page .cta-group {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.broadcast-page .cta-group .btn-cta,
	.broadcast-page .cta-group .btn-outline {
		justify-content: center;
		width: 100%;
		padding: 14px 22px;
		font-size: 0.98rem;
	}
}


/* ── 3.  AUDIO PLAYER — tablet + mobile reflow ─────────────────────
      The player has a 2-column layout (now-playing + sidebar). We
      stack the sidebar below the now-playing column on ≤1023px, and
      then make several controls inside the now-playing column behave
      better at narrow widths.
   ──────────────────────────────────────────────────────────────── */

/* Tablet — collapse the side panel BELOW the now-playing column. */
@media (max-width: 1023px) {
	.ephesus-audio-player { min-height: 0; border-radius: 16px; }
	.eap-main { grid-template-columns: 1fr; min-height: 0; }
	.eap-side { border-left: 0; border-top: 0.5px solid rgba(0,0,0,.08); }
	[data-resolved-theme="dark"] .eap-side { border-top-color: rgba(255,255,255,.08); }
	.eap-now { padding: 22px clamp(16px, 4vw, 28px) 28px; }
	.eap-cover-wrap { width: min(200px, 38vw); }
}

/* Mid-mobile — keep the cover visible but smaller; titles get tighter. */
@media (max-width: 639px) {
	.ephesus-audio-player { border-radius: 14px; }
	.eap-topbar {
		padding: 10px 12px;
		gap: 6px;
		flex-wrap: wrap;
	}
	.eap-topbar-meta {
		order: 1;
		flex: 1 1 100%;
		min-width: 0;
	}
	.eap-topbar-actions {
		order: 2;
		flex: 1 1 100%;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 2px;
	}
	.eap-kicker {
		font-size: 10px;
		gap: 6px;
		flex-wrap: wrap;
		line-height: 1.4;
	}
	/* Subscribe pill: smaller on phones, sits inline with the action icons */
	.eap-subscribe {
		padding: 6px 10px;
		font-size: 11px;
		letter-spacing: 0.02em;
	}
	.eap-now { padding: 18px 14px 22px; gap: 14px; }
	.eap-cover-wrap { width: min(180px, 50vw); }
	.eap-title {
		font-size: clamp(1.05rem, 5.5vw, 1.4rem) !important;
		text-align: center;
		padding: 0 4px;
	}
	.eap-pastor { font-size: 13px; }
	.eap-sub { font-size: 10.5px; gap: 6px; }

	/* Scrubber row: smaller bars, slightly shorter so it doesn't dominate. */
	.eap-scrub { height: 38px; }
	.eap-scrub-times { font-size: 10px; }

	/* Transport: wrap the row so volume drops underneath the play row. */
	.eap-transport {
		padding: 8px 0 10px;
		gap: 16px;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	/* v3.7.1 — Slightly smaller on phones but still tappable + centered. */
	.eap-transport .eap-iconbtn { width: 44px !important; height: 44px !important; }
	.eap-transport .eap-iconbtn svg { width: 20px; height: 20px; }
	.eap-play { width: 60px !important; height: 60px !important; }
	.eap-play svg { width: 26px !important; height: 26px !important; }
	.eap-volume {
		position: static;
		transform: none;
		width: 100%;
		max-width: 280px;
		justify-content: center;
		margin-top: 2px;
	}
	.eap-vol-slider { width: 100%; max-width: 220px; }

	/* Visualizer: keep it but shorter so phones don't get overwhelmed. */
	.eap-viz { height: 44px; }

	/* Side panel — let it breathe but not eat the screen. */
	.eap-tabs { padding: 12px 10px 0; gap: 0; }
	.eap-tab  { padding: 8px 10px; font-size: 11.5px; }
	.eap-side-body { padding: 6px 0; }
	.eap-transcript { padding: 0 18px; }
	.eap-tx-line { grid-template-columns: 36px 1fr; gap: 10px; padding: 8px 0; }
	.eap-tx-text { font-size: 15px; }
	.eap-tx-time { font-size: 9.5px; }
	.eap-notes,
	.eap-scrlist,
	.eap-qlist { padding: 12px 16px 20px; }
	.eap-out-points { margin-left: 38px; }
}

/* Tiny mobile (≤380px — iPhone SE & older Android) — last-mile fit */
@media (max-width: 380px) {
	.eap-topbar-actions .eap-subscribe { display: none; }   /* save space for icons */
	.eap-transport { gap: 8px; }
	.eap-cover-wrap { width: 150px; }
	.eap-viz { height: 36px; }
}


/* ── 4.  BROADCAST CARD GRID — every size ──────────────────────────
      Recalibrated breakpoints so we don't go from 3 columns straight
      to 1. The new ladder: ≥1280 → 3, 960–1279 → 3, 640–959 → 2,
      480–639 → 2 (smaller), ≤479 → 1.
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 1279px) {
	.broadcast-page .broadcast-grid { gap: 20px; }
}
@media (max-width: 959px) {
	.broadcast-page .broadcast-grid.grid-3,
	.broadcast-page .broadcast-grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.broadcast-card__cover { aspect-ratio: 16/11; min-height: 0; }
}
@media (max-width: 479px) {
	.broadcast-page .broadcast-grid.grid-3,
	.broadcast-page .broadcast-grid.grid-4 { grid-template-columns: 1fr; gap: 14px; }
	.broadcast-page .broadcast-card { border-radius: 12px; }
	.broadcast-page .broadcast-card__cover { aspect-ratio: 16/9; }
	.broadcast-page .broadcast-card__body { padding: 12px 14px 14px; }
	.broadcast-page .broadcast-card__title { font-size: 1.0rem; }
	.broadcast-page .broadcast-card__speaker { font-size: 0.84rem; }
	.broadcast-page .broadcast-card__play {
		width: 44px;
		height: 44px;
		bottom: 10px;
		right: 10px;
	}
}

/* Compact (music) grid: tighten at small phones so 2 wide stays usable */
@media (max-width: 479px) {
	.broadcast-page .broadcast-card--compact .broadcast-card__cover { aspect-ratio: 1/1; }
}


/* ── 5.  Card refinements — icons, badges, hover-affordance ────────
      The play button gets a softer drop shadow + a clean fill icon.
      The badge moves to a cleaner pill style with a tiny dot.
   ──────────────────────────────────────────────────────────────── */

.broadcast-page .broadcast-card {
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.broadcast-page .broadcast-card:focus-visible {
	outline: 2px solid var(--color-navy, #0F2A4A);
	outline-offset: 2px;
	transform: translateY(-2px);
}
.broadcast-page .broadcast-card__cover {
	background-image: linear-gradient(160deg, #0F2A4A 0%, #1d3a63 50%, #2c4d80 100%);
}
.broadcast-page .broadcast-card__play {
	background: rgba(255,255,255,0.97);
	color: #0F2A4A;
	box-shadow:
		0 8px 22px rgba(15,42,74,.28),
		0 2px 6px rgba(15,42,74,.16),
		0 0 0 .5px rgba(255,255,255,.5) inset;
	transition: transform .18s cubic-bezier(.2,.7,.2,1), background .18s, color .18s;
}
.broadcast-page .broadcast-card:hover .broadcast-card__play,
.broadcast-page .broadcast-card:focus-visible .broadcast-card__play {
	background: var(--eap-cream, #FFF1D3);
	color: #000;
	transform: scale(1.08);
}
.broadcast-page .broadcast-card:active .broadcast-card__play { transform: scale(.95); }

.broadcast-page .broadcast-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px 5px 9px;
	font-size: 0.66rem;
	letter-spacing: 0.10em;
	background: rgba(15,42,74,.88);
	backdrop-filter: blur(12px) saturate(1.3);
	-webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.broadcast-page .broadcast-card__badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.85;
	flex: 0 0 6px;
}
.broadcast-page .broadcast-card__badge--gold {
	background: var(--eap-cream, #FFF1D3);
	color: #1a1a1a;
}

/* ── 6.  Empty speaker safety net  ─────────────────────────────────
      A handful of imported re-broadcasts still ship with the legacy
      "Hello world!" speaker name from the buggy migration. The
      ephesus-broadcast-manager plugin strips this on save, but for
      data already in the DB we add a CSS belt-and-suspenders:
      any `.broadcast-card__speaker` whose text content equals
      "Hello world!" is hidden via the JS hook in page-broadcast.php.
      (CSS alone can't filter on text content; the JS does that.)
   ──────────────────────────────────────────────────────────────── */
.broadcast-page .broadcast-card__speaker.is-empty { display: none; }


/* ── 7.  EGW RADIO PLAYER — responsive  ────────────────────────────
      Wrap radio chrome on small screens; tighten gaps; ensure the
      play button stays a 56px circle, not a stretched pill.
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
	.ephesus-radio-player {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 20px;
		text-align: center;
	}
	.ephesus-radio-player .erp-stage {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
	.ephesus-radio-player .erp-meta { align-items: center; }
	.ephesus-radio-player .erp-status { font-size: 1.05rem; }
	.ephesus-radio-player .erp-play { margin: 0 auto; }
}


/* ── 8.  SECTION SPACING & TITLES — tighter on mobile ──────────────
      Stops giant 88-100px vertical padding from dominating a 700px
      phone screen.
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.broadcast-page .broadcast-section { padding: 44px 0 36px; }
	.broadcast-page .broadcast-section__head { margin-bottom: 22px; }
	.broadcast-page .section-title { font-size: clamp(1.45rem, 5vw, 1.8rem); padding-bottom: 10px; }
	.broadcast-page .section-title::after { width: 44px; height: 3px; }
	.broadcast-page .broadcast-section__sub { font-size: 0.95rem; }
}


/* ── 9.  Watch-Live shell — keep 16:9, soften shadow on phones ────
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
	.broadcast-page .broadcast-video-shell {
		border-radius: 12px;
		box-shadow: 0 16px 36px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.10);
	}
	.ephesus-video-player { border-radius: 12px; }
}


/* ── 10.  Modernised icon set ─────────────────────────────────────
      The audio player JS builds icons with hard-coded stroke-widths.
      We can't override them retroactively, but we can normalise the
      RENDERED sizes so all icons line up on a 24px grid regardless
      of viewport.
   ──────────────────────────────────────────────────────────────── */

.eap-iconbtn svg { width: 20px; height: 20px; }
.broadcast-card__play svg { width: 22px; height: 22px; }
.erp-play svg { width: 22px; height: 22px; }
.eap-play svg { width: 26px; height: 26px; }

/* Subtle press-feedback on tappable icons */
.eap-iconbtn:active { transform: scale(.92); }
.broadcast-card__play:active { transform: scale(.92); }

/* ±15s skip buttons — the SVG no longer contains a "15" text element
   (it didn't survive retina downscaling). The `.eap-skip-num` span,
   added by the JS, overlays a crisp "15" pip inside the circular
   arrow icon, vertically and horizontally centered. */
.eap-skipbtn { position: relative; }
.eap-skipbtn .eap-skip-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: currentColor;
	pointer-events: none;
	transform: translateY(1px);
}
@media (hover: none) and (pointer: coarse) {
	.eap-skipbtn .eap-skip-num { font-size: 10px; }
}


/* ── 11.  Loading state for hero player swap ───────────────────────
      When a card is tapped, the player JS swaps the hero player to
      the tapped broadcast. We add a quick CSS-only loading veil so
      the hand-off feels intentional instead of glitchy.
   ──────────────────────────────────────────────────────────────── */

.broadcast-hero__player.is-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,252,245,.55);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	z-index: 5;
	border-radius: inherit;
	pointer-events: none;
	animation: ebp-fadein .2s ease;
}
.broadcast-hero__player { position: relative; }
@keyframes ebp-fadein { from { opacity: 0; } to { opacity: 1; } }


/* ── 12.  Reduced motion — honour the user's choice ────────────────
      Switch off the live-pulse dot, equaliser bars, and skel shimmer
      when prefers-reduced-motion is set.
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.broadcast-page *,
	.broadcast-page *::before,
	.broadcast-page *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}


/* ── 13.  Print — clean the broadcast page for printable archives ─
   ──────────────────────────────────────────────────────────────── */

@media print {
	.broadcast-hero__player,
	.eap-topbar-actions,
	.eap-transport,
	.eap-viz-wrap,
	.broadcast-card__play,
	.erp-play { display: none !important; }
	.broadcast-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}


/* ── 14.  v3.5.1 — Audio Player Manager bridge boosters ────────────
      Force the player chrome to read from the admin-controlled
      bridge variables. These rules use slightly higher specificity
      so they win over the hardcoded values in ephesus-audio-player.css.
   ──────────────────────────────────────────────────────────────── */

.broadcast-page .ephesus-audio-player .eap-title    { color: var(--eap-rp-title,    inherit); }
.broadcast-page .ephesus-audio-player .eap-pastor   { color: var(--eap-rp-speaker,  inherit); }
.broadcast-page .ephesus-audio-player .eap-kicker,
.broadcast-page .ephesus-audio-player .eap-kicker-chapter { color: var(--eap-rp-category, inherit); }
.broadcast-page .ephesus-audio-player .eap-sub,
.broadcast-page .ephesus-audio-player .eap-scrub-times    { color: var(--eap-rp-date, rgba(0,0,0,.4)); }

/* Accent fills — play button, played-waveform, scripture pill, the
   subscribed-state pill, "is-on" tab. */
.broadcast-page .ephesus-audio-player .eap-play {
	background: var(--eap-accent, #0F2A4A);
}
.broadcast-page .ephesus-audio-player .eap-wb.played          { background: var(--eap-accent, #0F2A4A); }
.broadcast-page .ephesus-audio-player .eap-tab.is-on,
.broadcast-page .ephesus-audio-player .eap-iconbtn.is-on,
.broadcast-page .ephesus-audio-player .eap-viz-trigger[aria-expanded="true"] { color: var(--eap-accent, #0F2A4A); }
.broadcast-page .ephesus-audio-player .eap-scripture-pill     { color: var(--eap-accent, #0F2A4A); border-color: var(--eap-accent, #0F2A4A); }
.broadcast-page .ephesus-audio-player .eap-vol-slider {
	background: linear-gradient(to right,
		var(--eap-accent, #0F2A4A) 0%,
		var(--eap-accent, #0F2A4A) var(--eap-vol, 70%),
		rgba(0,0,0,.16) var(--eap-vol, 70%),
		rgba(0,0,0,.16) 100%);
}
.broadcast-page .ephesus-audio-player .eap-vol-slider::-webkit-slider-thumb,
.broadcast-page .ephesus-audio-player .eap-vol-slider::-moz-range-thumb {
	background: var(--eap-accent, #0F2A4A);
}
.broadcast-page .ephesus-audio-player .eap-subscribe {
	transition: background .15s, color .15s, border-color .15s;
}
.broadcast-page .ephesus-audio-player .eap-subscribe:hover,
.broadcast-page .ephesus-audio-player .eap-subscribe.is-on {
	background: var(--eap-accent, #0F2A4A);
	color: #1a1a1a;
	border-color: var(--eap-accent, #0F2A4A);
}

/* Subtitle panel reads from bridge variables. */
.broadcast-page .ephesus-audio-player .eap-subs {
	background: rgba(var(--eap-subs-bg-rgb, 0,0,0), var(--eap-subs-bg-op, 0.55));
	color: var(--eap-subs-text, inherit);
}


/* ════════════════════════════════════════════════════════════════════
   v3.6.0  —  Modernized media-app aesthetic
   --------------------------------------------------------------------
   Spotify / Apple Music / Linear inspired:
      • smaller, restrained transport buttons
      • soft circular hover halos instead of chunky outlines
      • tighter spacing, no heavy fills
      • centred, GPU-friendly animations
      • cinematic adaptive blur layer behind the player
      • waveform bars that pulse with live audio energy
   ════════════════════════════════════════════════════════════════════ */

/* Adaptive blur backdrop. The .eap-bg-blur element carries the cover
   image; the veil softens it to whatever theme is active. */
.ephesus-audio-player .eap-bg-blur {
	position: absolute;
	inset: -10%;                /* extra bleed so blur doesn't clip */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(80px) saturate(1.6);
	-webkit-filter: blur(80px) saturate(1.6);
	opacity: 0.55;
	z-index: 0;
	pointer-events: none;
	transform: translateZ(0);   /* promote to its own layer */
	will-change: transform;
	transition: opacity .4s ease;
}
.ephesus-audio-player .eap-bg-veil {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center,
		rgba(var(--eap-player-bg-rgb, 255, 245, 220), calc(var(--eap-player-bg-op, .55) * 0.6)) 0%,
		rgba(var(--eap-player-bg-rgb, 255, 245, 220), var(--eap-player-bg-op, .55)) 80%);
	z-index: 1;
	pointer-events: none;
	transition: background .35s ease;
}
/* v3.7.0 — Dark-mode veil tuned lighter. The previous 0.65 black
   over-darkened the artwork; this is closer to the original dark
   surface — readable text, visible cover, no muddy gradient. */
.ephesus-audio-player[data-resolved-theme="dark"] .eap-bg-blur { opacity: 0.85; filter: blur(80px) saturate(1.3); }
.ephesus-audio-player[data-resolved-theme="dark"] .eap-bg-veil {
	background: linear-gradient(160deg,
		rgba(21, 22, 26, 0.62) 0%,
		rgba(28, 30, 35, 0.55) 60%,
		rgba(13, 13, 13, 0.70) 100%);
}
/* Lower the blur cost on phones — large filters are GPU-heavy. */
@media (max-width: 639px) {
	.ephesus-audio-player .eap-bg-blur { filter: blur(40px) saturate(1.3); }
	.ephesus-audio-player[data-resolved-theme="dark"] .eap-bg-blur { filter: blur(48px) saturate(1.3); }
}
@media (prefers-reduced-motion: reduce) {
	.ephesus-audio-player .eap-bg-blur { filter: blur(20px); transition: none; }
}
/* The shell needs to sit above the blur layer. */
.ephesus-audio-player .eap-shell        { position: relative; z-index: 2; }


/* ── Transport buttons — modern, properly sized, centered ──────────
      v3.7.1 — Bumped from too-small 36/54 to 44/64 (icon/play) so the
      controls are comfortable on every device. Transport row is
      explicitly centered horizontally regardless of viewport. */
body .ephesus-audio-player .eap-transport {
	display: flex !important;
	justify-content: center !important;
	align-items: center;
	gap: 22px;
	padding: 10px 0 12px;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}
body .ephesus-audio-player .eap-iconbtn {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	color: inherit;
	transition: background-color .18s ease, transform .15s ease, color .18s ease;
	background: transparent;
	flex-shrink: 0;
}
body .ephesus-audio-player .eap-iconbtn svg { width: 20px; height: 20px; opacity: 0.85; }
body .ephesus-audio-player .eap-iconbtn:hover {
	background-color: rgba(0, 0, 0, 0.06);
}
body .ephesus-audio-player .eap-iconbtn:hover svg { opacity: 1; }
body .ephesus-audio-player .eap-iconbtn:active {
	transform: scale(.92);
	background-color: rgba(0, 0, 0, 0.10);
}
body .ephesus-audio-player[data-resolved-theme="dark"] .eap-iconbtn:hover  { background-color: rgba(255, 255, 255, 0.08); }
body .ephesus-audio-player[data-resolved-theme="dark"] .eap-iconbtn:active { background-color: rgba(255, 255, 255, 0.14); }
body .ephesus-audio-player .eap-iconbtn.is-on {
	background-color: rgba(15, 42, 74, 0.10);
}
body .ephesus-audio-player[data-resolved-theme="dark"] .eap-iconbtn.is-on { background-color: rgba(184, 212, 255, 0.16); }

/* Main play button: bigger, premium scale + soft shadow */
body .ephesus-audio-player .eap-play {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50%;
	border: 0;
	flex-shrink: 0;
	box-shadow: 0 8px 22px rgba(15, 42, 74, .26), 0 2px 6px rgba(15, 42, 74, .16);
	transition: transform .15s cubic-bezier(.4,.2,.2,1), box-shadow .2s ease;
}
body .ephesus-audio-player .eap-play:hover  { transform: scale(1.06); box-shadow: 0 12px 30px rgba(15, 42, 74, .32); }
body .ephesus-audio-player .eap-play:active { transform: scale(.94); }
body .ephesus-audio-player .eap-play svg    { width: 28px !important; height: 28px !important; }

/* Skip buttons keep the "15" pip clear */
body .ephesus-audio-player .eap-skipbtn { width: 44px !important; height: 44px !important; }
body .ephesus-audio-player .eap-skipbtn .eap-skip-num { font-size: 9.5px; transform: translateY(0.5px); font-weight: 800; }

/* Subscribe button refresh — pill shape, premium feel */
body .ephesus-audio-player .eap-subscribe {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid currentColor;
	background: transparent;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, transform .15s;
}
body .ephesus-audio-player .eap-subscribe:active { transform: scale(.96); }

/* Volume slider — thinner, more premium */
body .ephesus-audio-player .eap-volume     { gap: 8px; }
body .ephesus-audio-player .eap-vol-slider { height: 3px; }
body .ephesus-audio-player .eap-vol-slider::-webkit-slider-thumb { width: 11px; height: 11px; }
body .ephesus-audio-player .eap-vol-slider::-moz-range-thumb     { width: 11px; height: 11px; }

/* Time stamps — tabular, monospace, clickable affordance */
body .ephesus-audio-player .eap-scrub-times {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	font-size: 10.5px;
}
body .ephesus-audio-player .eap-scrub-times > span:last-child {
	transition: color .15s, opacity .15s;
	border-radius: 4px;
	padding: 1px 4px;
}
body .ephesus-audio-player .eap-scrub-times > span:last-child:hover { background: rgba(0,0,0,.06); }
body .ephesus-audio-player[data-resolved-theme="dark"] .eap-scrub-times > span:last-child:hover { background: rgba(255,255,255,.10); }

/* Waveform scrub — bars pulse with --eap-energy (0..1) when playing.
   GPU-cheap because we only transform with scaleY. */
body .ephesus-audio-player .eap-wb {
	transform-origin: center;
	transform: scaleY(calc(0.85 + var(--eap-energy, 0) * 0.40));
	transition: transform .08s linear, background-color .15s;
}
body .ephesus-audio-player .eap-wb.played {
	transform: scaleY(calc(1 + var(--eap-energy, 0) * 0.55));
}

/* Cover hover — gentle press */
body .ephesus-audio-player .eap-cover { transition: transform .35s cubic-bezier(.4,.2,.2,1), box-shadow .35s; }
body .ephesus-audio-player.is-playing .eap-cover { transform: scale(1.015); }

/* Phone-size transport — v3.7.1 keeps the icons readable + centered. */
@media (max-width: 639px) {
	body .ephesus-audio-player .eap-iconbtn { width: 44px !important; height: 44px !important; }
	body .ephesus-audio-player .eap-iconbtn svg { width: 20px; height: 20px; }
	body .ephesus-audio-player .eap-play { width: 60px !important; height: 60px !important; }
	body .ephesus-audio-player .eap-play svg { width: 26px !important; height: 26px !important; }
	body .ephesus-audio-player .eap-transport { gap: 16px; }
}


/* ════════════════════════════════════════════════════════════════════
   v3.7.0  —  Fixes (dark mode, background colour bridge,
               volume layout, sticky-mini, media-session, window-aware)
   ════════════════════════════════════════════════════════════════════ */

/* Bind the player overlay + topbar + subs panel directly to the
   bridge variables so admin colour picks actually paint. */
body .ephesus-audio-player .eap-topbar {
	background: rgba(var(--eap-player-bg-rgb, 255, 252, 245), var(--eap-player-bg-op, 0.66)) !important;
	-webkit-backdrop-filter: blur(40px) saturate(1.4);
	backdrop-filter: blur(40px) saturate(1.4);
}
body .ephesus-audio-player[data-resolved-theme="dark"] .eap-topbar {
	background-color: var(--eap-grp-titlebar, rgba(var(--eap-player-bg-rgb, 26, 26, 30), var(--eap-player-bg-op, 0.55))) !important;
	border-bottom-color: var(--eap-grp-divider, rgba(255,255,255,.08));
}

/* The side panel reads from the same player-bg pair so the whole
   left/right halves stay visually consistent. */
body .ephesus-audio-player .eap-side {
	background: rgba(var(--eap-player-bg-rgb, 255, 252, 245), calc(var(--eap-player-bg-op, 0.5) * 0.9)) !important;
}
body .ephesus-audio-player[data-resolved-theme="dark"] .eap-side {
	background: rgba(var(--eap-player-bg-rgb, 26, 26, 30), calc(var(--eap-player-bg-op, 0.55) * 0.85)) !important;
}

/* Subtitle panel — already mostly wired in v1.3.2; this row makes the
   container background pull from the bridge as well. */
body .ephesus-audio-player .eap-subs-track {
	background: rgba(var(--eap-subs-bg-rgb, 8, 12, 24), var(--eap-subs-bg-op, 0.55)) !important;
	-webkit-backdrop-filter: blur(var(--eap-subs-bg-blur, 6px));
	backdrop-filter: blur(var(--eap-subs-bg-blur, 6px));
}


/* ── Volume row beneath the play/pause row ────────────────────────
      Previously the volume slider was tucked at the far right of the
      transport row, which competed for space with skip / loop / speed.
      Now it has its own row below the transport, so play / pause /
      skip / loop / speed always have room to breathe. */
body .ephesus-audio-player .eap-volume {
	position: static !important;
	transform: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 320px;
	margin: 6px auto 0;
}
body .ephesus-audio-player .eap-vol-slider { width: 100%; max-width: 260px; flex: 1; }
body .ephesus-audio-player .eap-transport {
	flex-wrap: wrap;
	justify-content: center;
	padding: 4px 0 6px !important;
	row-gap: 10px;
}
/* The play / pause / skip / loop row should fill 100% so the volume
   row breaks below it. */
body .ephesus-audio-player .eap-transport > .eap-iconbtn:nth-child(1) { margin-left: auto; }
body .ephesus-audio-player .eap-transport > .eap-volume { flex-basis: 100%; }


/* ── Sticky mini-player ───────────────────────────────────────────
      Appears when the main player scrolls out of view AND audio is
      playing. Fixed at the bottom of the viewport, full-width on
      mobile, max-width 720px on desktop. Renders cover + title +
      play/pause + a thin progress bar. */
.eap-sticky-mini {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 16px;
	margin: 0 auto;
	max-width: 720px;
	z-index: 99990;
	background: rgba(var(--eap-player-bg-rgb, 14, 26, 54), 0.92);
	color: rgb(var(--eap-rp-title-rgb, 246, 244, 243));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(22px) saturate(1.4);
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	transform: translateY(120%);
	opacity: 0;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
	pointer-events: none;
}
:root[data-theme="light"] .eap-sticky-mini {
	background: rgba(255, 252, 245, 0.96);
	color: #1a1a1a;
	border-color: rgba(0, 0, 0, 0.08);
}
.eap-sticky-mini.is-on { transform: none; opacity: 1; pointer-events: auto; }
.eap-sticky-mini__cover {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: linear-gradient(135deg, #0F2A4A, #1d3a63) center/cover no-repeat;
	flex-shrink: 0;
}
.eap-sticky-mini__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}
.eap-sticky-mini__title {
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eap-sticky-mini__sub {
	font-size: 11px;
	opacity: 0.7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eap-sticky-mini__actions { display: flex; align-items: center; gap: 6px; }
.eap-sticky-mini__btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: var(--eap-accent, #FFF1D3);
	color: #0E1A36;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,0.18);
	transition: transform .15s ease;
}
.eap-sticky-mini__btn:active { transform: scale(.93); }
.eap-sticky-mini__btn svg { width: 18px; height: 18px; fill: currentColor; }
.eap-sticky-mini__btn--ghost {
	background: transparent;
	color: inherit;
	box-shadow: none;
	width: 32px;
	height: 32px;
}
.eap-sticky-mini__btn--ghost:hover { background: rgba(255,255,255,0.08); }
:root[data-theme="light"] .eap-sticky-mini__btn--ghost:hover { background: rgba(0,0,0,0.06); }
.eap-sticky-mini__progress {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 4px;
	height: 2px;
	background: rgba(255,255,255,0.10);
	border-radius: 2px;
	overflow: hidden;
}
:root[data-theme="light"] .eap-sticky-mini__progress { background: rgba(0,0,0,0.08); }
.eap-sticky-mini__progress-fill {
	height: 100%;
	width: 0;
	background: var(--eap-accent, #FFF1D3);
	transition: width .15s linear;
}
@media (max-width: 480px) {
	.eap-sticky-mini { left: 8px; right: 8px; bottom: 10px; padding: 9px 10px; }
	.eap-sticky-mini__cover { width: 40px; height: 40px; }
	.eap-sticky-mini__btn { width: 36px; height: 36px; }
}


/* ════════════════════════════════════════════════════════════════════
   v3.8.0 — Sidebar-aware broadcast hero reflow
   --------------------------------------------------------------------
   When the audio player's CC button reveals the sidebar (transcript,
   scripture, outline, etc.) the hero grid REFLOWS so the player gains
   horizontal room — the now-playing column never compresses. The
   "is-sidebar-open" class is added to the .broadcast-hero on toggle
   (see ephesus-audio-player.js). Transition is GPU-friendly
   (grid-template-columns is animatable on modern browsers; an inset
   transform fallback keeps older ones smooth).
   ════════════════════════════════════════════════════════════════════ */

/* Animate the hero grid track widths so the shift feels fluid.
   The transition lives on the inner so the outer container can carry
   padding without re-animating. */
.broadcast-page .broadcast-hero__inner {
	transition: grid-template-columns .55s cubic-bezier(.22, .61, .36, 1);
	will-change: grid-template-columns;
}

/* DESKTOP — Sidebar OPEN: player gets the lion's share.
   v3.10.13 — More aggressive reflow when CC is toggled ON:
   the hero copy column collapses very narrow (≤ 1280px) or hides
   outright (≤ 1100px) so the player has enough horizontal room
   to render BOTH its columns (now-playing + side) without clipping. */
@media (min-width: 1024px) {
	.broadcast-page .broadcast-hero.is-sidebar-open .broadcast-hero__inner {
		grid-template-columns: minmax(0, 0.42fr) minmax(0, 1.85fr);
	}
	/* Sidebar CLOSED: roughly even split (the original layout). */
	.broadcast-page .broadcast-hero:not(.is-sidebar-open) .broadcast-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}
	/* The hero copy column gently fades + slides as the grid track
	   shrinks — keeps motion pace + signals where attention should go. */
	.broadcast-page .broadcast-hero__copy {
		transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .35s ease, max-width .45s ease;
		will-change: transform;
	}
	.broadcast-page .broadcast-hero.is-sidebar-open .broadcast-hero__copy {
		transform: translateX(-6px);
	}
}

/* MEDIUM DESKTOP (1024–1280px) — hero copy column shrinks dramatically
   when the sidebar is open so the player gets the room it needs. */
@media (min-width: 1024px) and (max-width: 1280px) {
	.broadcast-page .broadcast-hero.is-sidebar-open .broadcast-hero__inner {
		grid-template-columns: minmax(0, 0.25fr) minmax(0, 2.4fr);
		gap: clamp(16px, 2vw, 28px);
	}
	.broadcast-page .broadcast-hero.is-sidebar-open .broadcast-hero__copy {
		opacity: .55;
	}
}

/* SMALL DESKTOP / LARGE TABLET (1024–1100px) — copy column would be
   crushed beyond legibility; hide it outright while the sidebar is
   open so the player gets the full row. */
@media (min-width: 1024px) and (max-width: 1100px) {
	.broadcast-page .broadcast-hero.is-sidebar-open .broadcast-hero__inner {
		grid-template-columns: 1fr;
	}
	.broadcast-page .broadcast-hero.is-sidebar-open .broadcast-hero__copy {
		display: none;
	}
}

/* LARGE DESKTOP — even more breathing room for the open sidebar. */
@media (min-width: 1440px) {
	.broadcast-page .broadcast-hero.is-sidebar-open .broadcast-hero__inner {
		grid-template-columns: minmax(0, 0.42fr) minmax(0, 2.05fr);
	}
}

/* The player ITSELF should expand with its container, not the
   internal columns shrinking. Lock the now-playing column's min-width
   so it can't get cramped, and let the side panel absorb growth.   */
@media (min-width: 1024px) {
	.broadcast-page .ephesus-audio-player .eap-main {
		/* v3.10.13 — Looser min-widths so the player never demands more
		   horizontal room than its container has. The now-playing column
		   stays usable down to 320px (cover scales), and the sidebar
		   keeps a 300px floor so the transcript stays legible. */
		grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.95fr);
		transition: grid-template-columns .45s cubic-bezier(.22, .61, .36, 1);
	}
	/* When the inner sidebar is hidden (eap-no-sidebar), now-playing
	   takes the full width and centres its contents — already in the
	   base CSS, but here we add a transition. */
	.broadcast-page .ephesus-audio-player.eap-no-sidebar .eap-main {
		grid-template-columns: 1fr;
	}
}

/* The side panel slides in / out using transform so the audio stream
   never blinks. The pane stays in the DOM at all times (eap-no-sidebar
   merely hides it visually), which means playback continues seamlessly. */
.broadcast-page .ephesus-audio-player .eap-side {
	transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
	will-change: transform;
	transform-origin: right center;
}
.broadcast-page .ephesus-audio-player.eap-no-sidebar .eap-side {
	transform: translateX(8px);
	opacity: 0;
	pointer-events: none;
}

/* Cover + meta + waveform stay rock-steady — only the column track
   width changes around them. Add will-change so the browser keeps a
   layer ready during the transition (no flicker, no scrubber re-render). */
.broadcast-page .ephesus-audio-player .eap-now,
.broadcast-page .ephesus-audio-player .eap-cover-wrap,
.broadcast-page .ephesus-audio-player .eap-scrub-wrap,
.broadcast-page .ephesus-audio-player .eap-viz-wrap {
	will-change: transform;
	transition: max-width .35s cubic-bezier(.22, .61, .36, 1);
}

/* On reduced-motion preferences, skip the long transitions entirely
   so the layout still snaps to the right state without jank. */
@media (prefers-reduced-motion: reduce) {
	.broadcast-page .broadcast-hero__inner,
	.broadcast-page .broadcast-hero__copy,
	.broadcast-page .ephesus-audio-player .eap-main,
	.broadcast-page .ephesus-audio-player .eap-side {
		transition: none !important;
	}
}

/* MOBILE / TABLET — sidebar reflow doesn't apply because the hero
   is already stacked; the side panel sits below the now-playing
   column. Force a clean, single-column layout regardless of the
   sidebar-open class so we don't accidentally squeeze.          */
@media (max-width: 1023px) {
	.broadcast-page .broadcast-hero.is-sidebar-open .broadcast-hero__inner,
	.broadcast-page .broadcast-hero:not(.is-sidebar-open) .broadcast-hero__inner {
		grid-template-columns: 1fr;
	}
	/* v3.10.15 — Don't undo the mobile right-slide overlay defined in
	   ephesus-audio-player.css. We leave transform/opacity alone so
	   the CC toggle slides the sidebar in from the right rather than
	   stacking it below the player. */
}


/* ════════════════════════════════════════════════════════════════════
   v3.8.1 — Fullscreen mode centering
   --------------------------------------------------------------------
   When the player enters native fullscreen via the topbar button,
   the user agent stretches the .ephesus-audio-player element to fill
   the viewport — but the inner .eap-shell still flows from the top
   left, leaving everything pinned to the upper edge. These rules
   recast the root as a centring container and clamp the inner shell
   to a comfortable cinematic max-width, so the whole experience
   feels balanced across desktops, ultrawides, tablets, and mobile.
   Cross-browser: :fullscreen + :-webkit-full-screen + :-moz-full-screen.
   ════════════════════════════════════════════════════════════════════ */

.ephesus-audio-player:fullscreen,
.ephesus-audio-player:-webkit-full-screen,
.ephesus-audio-player:-moz-full-screen {
	display: grid !important;
	place-items: center !important;          /* perfect H + V centring */
	width: 100vw;
	height: 100vh;
	max-height: 100vh;
	padding: clamp(24px, 4vw, 64px);
	border-radius: 0 !important;             /* fills the viewport flat */
	box-shadow: none !important;
	overflow: hidden;
	background: radial-gradient(ellipse at center,
		rgba(var(--eap-player-bg-rgb, 255, 245, 220), calc(var(--eap-player-bg-op, .55) * 0.4)) 0%,
		rgba(var(--eap-player-bg-rgb, 255, 245, 220), var(--eap-player-bg-op, .55)) 80%);
}
.ephesus-audio-player[data-resolved-theme="dark"]:fullscreen,
.ephesus-audio-player[data-resolved-theme="dark"]:-webkit-full-screen,
.ephesus-audio-player[data-resolved-theme="dark"]:-moz-full-screen {
	background: linear-gradient(160deg,
		rgba(13, 14, 17, 0.92) 0%,
		rgba(20, 22, 28, 0.88) 60%,
		rgba(8, 8, 9, 0.95) 100%);
}

/* The blur backdrop expands to cover the whole viewport with a
   stronger blur radius so cinematic feel is preserved. */
.ephesus-audio-player:fullscreen .eap-bg-blur,
.ephesus-audio-player:-webkit-full-screen .eap-bg-blur,
.ephesus-audio-player:-moz-full-screen .eap-bg-blur {
	inset: 0;
	filter: blur(120px) saturate(1.5);
	-webkit-filter: blur(120px) saturate(1.5);
	opacity: 0.45;
}
.ephesus-audio-player[data-resolved-theme="dark"]:fullscreen .eap-bg-blur,
.ephesus-audio-player[data-resolved-theme="dark"]:-webkit-full-screen .eap-bg-blur,
.ephesus-audio-player[data-resolved-theme="dark"]:-moz-full-screen .eap-bg-blur {
	opacity: 0.55;
}

/* The shell is the actual content card. Cap its width so it doesn't
   smear across ultrawide monitors; let height auto-fit so it stays
   centred. The grid wrapper around it does the centring. */
.ephesus-audio-player:fullscreen .eap-shell,
.ephesus-audio-player:-webkit-full-screen .eap-shell,
.ephesus-audio-player:-moz-full-screen .eap-shell {
	width: 100%;
	max-width: min(1280px, 92vw);
	max-height: min(900px, 92vh);
	height: auto;
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42), 0 8px 24px rgba(0, 0, 0, 0.18);
	background: rgba(var(--eap-player-bg-rgb, 255, 252, 245), var(--eap-player-bg-op, 0.66));
	backdrop-filter: blur(40px) saturate(1.4);
	-webkit-backdrop-filter: blur(40px) saturate(1.4);
	display: grid;
	grid-template-rows: auto 1fr;
}

/* Now-playing column inside fullscreen — slightly more generous
   padding so the cover + meta + controls breathe. */
.ephesus-audio-player:fullscreen .eap-now,
.ephesus-audio-player:-webkit-full-screen .eap-now,
.ephesus-audio-player:-moz-full-screen .eap-now {
	padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 48px);
	justify-content: center;
}

/* Bump the cover artwork on big screens — but never bigger than the
   parent column. */
.ephesus-audio-player:fullscreen .eap-cover-wrap,
.ephesus-audio-player:-webkit-full-screen .eap-cover-wrap,
.ephesus-audio-player:-moz-full-screen .eap-cover-wrap {
	width: min(280px, 36vh);
}

/* Keep the sidebar visible when fullscreen + sidebar-open. The
   internal split stays 1.05/0.95 so the now-playing column never
   compresses below its min-width even on portrait orientation. */
.ephesus-audio-player:fullscreen.eap-no-sidebar .eap-main,
.ephesus-audio-player:-webkit-full-screen.eap-no-sidebar .eap-main,
.ephesus-audio-player:-moz-full-screen.eap-no-sidebar .eap-main {
	grid-template-columns: 1fr;
}
.ephesus-audio-player:fullscreen:not(.eap-no-sidebar) .eap-main,
.ephesus-audio-player:-webkit-full-screen:not(.eap-no-sidebar) .eap-main,
.ephesus-audio-player:-moz-full-screen:not(.eap-no-sidebar) .eap-main {
	grid-template-columns: minmax(420px, 1.05fr) minmax(360px, 0.95fr);
}

/* Smooth transition in / out of fullscreen. The user agent flips
   the layout abruptly otherwise; transform-based easing softens it. */
.ephesus-audio-player .eap-shell {
	transition:
		max-width  .35s cubic-bezier(.22, .61, .36, 1),
		max-height .35s cubic-bezier(.22, .61, .36, 1),
		border-radius .35s ease,
		box-shadow .35s ease;
}

/* Portrait / narrow fullscreen — stack columns, keep centred. */
@media (max-width: 1023px), (orientation: portrait) {
	.ephesus-audio-player:fullscreen .eap-main,
	.ephesus-audio-player:-webkit-full-screen .eap-main,
	.ephesus-audio-player:-moz-full-screen .eap-main {
		grid-template-columns: 1fr !important;
	}
	.ephesus-audio-player:fullscreen .eap-shell,
	.ephesus-audio-player:-webkit-full-screen .eap-shell,
	.ephesus-audio-player:-moz-full-screen .eap-shell {
		max-width: 100vw;
		max-height: 100vh;
		border-radius: 0;
	}
}

/* Reduced-motion respect — skip transitions, no jank. */
@media (prefers-reduced-motion: reduce) {
	.ephesus-audio-player:fullscreen .eap-shell,
	.ephesus-audio-player:-webkit-full-screen .eap-shell,
	.ephesus-audio-player:-moz-full-screen .eap-shell {
		transition: none;
	}
}


/* ════════════════════════════════════════════════════════════════════
   v3.8.3 — Per-button-group colour bindings
   --------------------------------------------------------------------
   Each control group reads its own CSS variable. The variables fall
   back to --eap-accent so existing behaviour stays unchanged when no
   per-group override is set. Admins can paint the play button,
   skip buttons, group controls (loop/speed/mute/share/etc), and the
   volume slider independently — in light AND dark mode — at both the
   global (Audio Player Manager) level and per broadcast.
   ════════════════════════════════════════════════════════════════════ */

body .ephesus-audio-player .eap-play {
	background: var(--eap-btn-play, var(--eap-accent, #0F2A4A)) !important;
}
body .ephesus-audio-player .eap-skipbtn { color: var(--eap-btn-skip, inherit); }
body .ephesus-audio-player .eap-skipbtn.is-on,
body .ephesus-audio-player .eap-skipbtn:hover { color: var(--eap-btn-skip, var(--eap-accent)); }

body .ephesus-audio-player .eap-iconbtn.is-on  { color: var(--eap-btn-group, var(--eap-accent, #0F2A4A)) !important; }
body .ephesus-audio-player .eap-iconbtn.is-on { background-color: color-mix(in srgb, var(--eap-btn-group, var(--eap-accent)) 12%, transparent) !important; }

/* Volume slider track + thumb pull from the volume colour var. */
body .ephesus-audio-player .eap-vol-slider {
	background: linear-gradient(to right,
		var(--eap-btn-volume, var(--eap-accent)) 0%,
		var(--eap-btn-volume, var(--eap-accent)) var(--eap-vol, 70%),
		rgba(0,0,0,.16) var(--eap-vol, 70%),
		rgba(0,0,0,.16) 100%) !important;
}
body .ephesus-audio-player .eap-vol-slider::-webkit-slider-thumb,
body .ephesus-audio-player .eap-vol-slider::-moz-range-thumb {
	background: var(--eap-btn-volume, var(--eap-accent)) !important;
}


/* ════════════════════════════════════════════════════════════════════
   v3.8.4 — Background blur limited to fullscreen + brightness/contrast
   --------------------------------------------------------------------
   In normal (in-page) mode the player should render flat — no blurry
   artwork backdrop. The cinematic blur is reserved for fullscreen mode
   where it sits behind the centred player card.

   Brightness + contrast filters apply to the entire .eap-shell so
   the cover, controls, and chrome shift in unison. Values come from
   CSS variables emitted by the bridge.
   ════════════════════════════════════════════════════════════════════ */

/* Hide the artwork blur + veil in normal mode. */
.ephesus-audio-player .eap-bg-blur,
.ephesus-audio-player .eap-bg-veil { display: none !important; }

/* Bring them back in fullscreen only. */
.ephesus-audio-player:fullscreen .eap-bg-blur,
.ephesus-audio-player:-webkit-full-screen .eap-bg-blur,
.ephesus-audio-player:-moz-full-screen .eap-bg-blur,
.ephesus-audio-player:fullscreen .eap-bg-veil,
.ephesus-audio-player:-webkit-full-screen .eap-bg-veil,
.ephesus-audio-player:-moz-full-screen .eap-bg-veil { display: block !important; }

/* Brightness + contrast filter applied to the shell. The CSS variables
   default to 1.0 (no-op), so the filter is harmless until the admin
   actually changes them. */
body .ephesus-audio-player .eap-shell {
	filter: brightness(var(--eap-brightness, 1)) contrast(var(--eap-contrast, 1));
	transition: filter .25s ease;
}


/* ════════════════════════════════════════════════════════════════════
   v3.8.4 (cont.) — Remove the hard-coded cream/yellow surface
   --------------------------------------------------------------------
   The base ephesus-audio-player.css ships a hard-coded yellow gradient
   (#FFF1D3 → #FFE7B0 → #FFD27C) for the player surface in light mode.
   The admin should fully control this colour, so we replace the gradient
   with a flat surface that reads the admin-controlled bridge variable
   --eap-player-bg-rgb (set by Audio Player Manager → Player & subtitle
   backgrounds). Dark mode already pulls from the same variable so no
   yellow leaks through.
   ════════════════════════════════════════════════════════════════════ */

body .ephesus-audio-player {
	background: rgb(var(--eap-player-bg-rgb, 255, 252, 245)) !important;
}
body .ephesus-audio-player[data-resolved-theme="dark"] {
	background: rgb(var(--eap-player-bg-rgb, 21, 22, 26)) !important;
}


/* ════════════════════════════════════════════════════════════════════
   v3.8.4 (cont.) — Scrubber sizing
   --------------------------------------------------------------------
   The waveform scrubber had a fixed 560px max-width that overflowed on
   narrow player columns (when the sidebar reflowed the hero grid or
   the player was rendered in a compact card). Make it shrink with its
   container, force overflow:hidden so a single bar can't leak, and
   shrink the per-bar gap on tight widths.
   ════════════════════════════════════════════════════════════════════ */

body .ephesus-audio-player .eap-scrub-wrap {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
body .ephesus-audio-player .eap-scrub {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
body .ephesus-audio-player .eap-wave {
	width: 100%;
	gap: 2px;
	overflow: hidden;
}
body .ephesus-audio-player .eap-wb {
	min-width: 1px;
	flex: 1 1 0;
}
/* On narrow player columns (sidebar open / compact variant) collapse the
   gap further so all 96 bars still fit. */
@media (max-width: 1100px) {
	body .ephesus-audio-player .eap-wave { gap: 1px; }
}
/* Now-playing column has its own padding; lock the wrapping to the
   inner column width so the scrubber inherits its parent's bounds. */
body .ephesus-audio-player .eap-now {
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
}


/* ════════════════════════════════════════════════════════════════════
   v3.9.0 — Grid-based transport row
   --------------------------------------------------------------------
   Layout: [ LEFT 1fr ]  [ PLAY auto ]  [ RIGHT 1fr ]
   The play button is locked in the centre column. Each side is a
   flex container that hugs the play button. When a button is disabled
   in the admin it isn't appended at all — the side simply shrinks,
   but the play button never drifts.
   ════════════════════════════════════════════════════════════════════ */

body .ephesus-audio-player .eap-transport {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 18px;
	padding: 10px 0 12px;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}
body .ephesus-audio-player .eap-transport-side {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
body .ephesus-audio-player .eap-transport-left  { justify-content: flex-end;   } /* hugs play */
body .ephesus-audio-player .eap-transport-right { justify-content: flex-start; }

/* Phones — keep the grid but tighten gap. */
@media (max-width: 639px) {
	body .ephesus-audio-player .eap-transport { gap: 12px; padding: 8px 0 10px; }
	body .ephesus-audio-player .eap-transport-side { gap: 6px; }
}
/* Tiny mobile — switch to 2-row layout: play centred above, sides below. */
@media (max-width: 380px) {
	body .ephesus-audio-player .eap-transport {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 8px;
	}
	body .ephesus-audio-player .eap-transport-left,
	body .ephesus-audio-player .eap-transport-right {
		justify-content: center;
	}
}


/* ════════════════════════════════════════════════════════════════════
   v3.10.0 — Waveform width + volume alignment + group theme tokens
   --------------------------------------------------------------------
   Tightens the scrubber so it doesn't dominate the layout. Re-centres
   the volume row beneath the transport. Wires the group CSS variables
   (--eap-grp-*) for the new exhaustive theme system.
   ════════════════════════════════════════════════════════════════════ */

/* Waveform — cap to a balanced 380px in normal mode, 520px in fullscreen. */
body .ephesus-audio-player .eap-scrub-wrap {
	width: 100%;
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}
body .ephesus-audio-player:fullscreen .eap-scrub-wrap,
body .ephesus-audio-player:-webkit-full-screen .eap-scrub-wrap,
body .ephesus-audio-player:-moz-full-screen .eap-scrub-wrap {
	max-width: 520px;
}
@media (max-width: 639px) {
	body .ephesus-audio-player .eap-scrub-wrap { max-width: 320px; }
}

/* Volume — a row underneath the transport, centred and aligned. */
body .ephesus-audio-player .eap-volume {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 320px;
	margin: 8px auto 0 !important;
	position: static !important;
	transform: none !important;
}
body .ephesus-audio-player .eap-vol-slider {
	flex: 1 1 auto;
	max-width: 240px;
}
body .ephesus-audio-player .eap-volume .eap-iconbtn {
	flex: 0 0 auto;
}

/* ── Group theme tokens (light by default, dark variant on the player root) ──
      These are the central design-token layer. Individual elements
      (.eap-title, .eap-tab, .eap-scrub, etc.) all consume the group
      variables; the cascade is:
        per-element variable → per-group variable → core --eap-accent
      Admin/broadcast settings override at any layer.        */
body .ephesus-audio-player {
	--eap-grp-primary:      var(--eap-accent, #0F2A4A);
	--eap-grp-secondary:    rgba(15, 42, 74, 0.65);
	--eap-grp-accent:       var(--eap-accent, #0F2A4A);
	--eap-grp-surface:      rgb(var(--eap-player-bg-rgb, 255, 252, 245));
	--eap-grp-text:         rgba(0, 0, 0, 0.88);
	--eap-grp-text-muted:   rgba(0, 0, 0, 0.55);
	--eap-grp-interactive:  var(--eap-accent, #0F2A4A);
	--eap-grp-overlay:      rgba(var(--eap-player-bg-rgb, 255, 252, 245), var(--eap-player-bg-op, 0.55));
	--eap-grp-visualizer:   var(--eap-accent, #0F2A4A);
	--eap-grp-waveform:     var(--eap-accent, #0F2A4A);
	--eap-grp-sidebar:      rgba(0, 0, 0, 0.04);
	--eap-grp-divider:      rgba(0, 0, 0, 0.08);
	--eap-grp-focus:        var(--eap-accent, #0F2A4A);
}
body .ephesus-audio-player[data-resolved-theme="dark"],
body :root[data-theme="dark"] .ephesus-audio-player {
	--eap-grp-primary:      var(--eap-accent, #FFF1D3);
	--eap-grp-secondary:    rgba(255, 255, 255, 0.65);
	--eap-grp-accent:       var(--eap-accent, #FFF1D3);
	--eap-grp-surface:      rgb(var(--eap-player-bg-rgb, 21, 22, 26));
	--eap-grp-text:         rgba(255, 255, 255, 0.92);
	--eap-grp-text-muted:   rgba(255, 255, 255, 0.55);
	--eap-grp-interactive:  var(--eap-accent, #FFF1D3);
	--eap-grp-overlay:      rgba(var(--eap-player-bg-rgb, 21, 22, 26), var(--eap-player-bg-op, 0.55));
	--eap-grp-visualizer:   var(--eap-accent, #FFF1D3);
	--eap-grp-waveform:     var(--eap-accent, #FFF1D3);
	--eap-grp-sidebar:      rgba(255, 255, 255, 0.05);
	--eap-grp-divider:      rgba(255, 255, 255, 0.08);
	--eap-grp-focus:        var(--eap-accent, #FFF1D3);
}

/* Apply the group tokens to actual elements (deep cascade). */
body .ephesus-audio-player .eap-title,
body .ephesus-audio-player .eap-pastor,
body .ephesus-audio-player .eap-meta { color: var(--eap-grp-text); }
body .ephesus-audio-player .eap-sub,
body .ephesus-audio-player .eap-scrub-times,
body .ephesus-audio-player .eap-tx-time { color: var(--eap-grp-text-muted); }
body .ephesus-audio-player .eap-side    { background: var(--eap-grp-sidebar); }
body .ephesus-audio-player .eap-wb.played { background: var(--eap-grp-waveform); }
body .ephesus-audio-player .eap-viz       { color: var(--eap-grp-visualizer); }
body .ephesus-audio-player .eap-side      { border-color: var(--eap-grp-divider); }

/* v1.7.2 — Title bar colour overrides.
   When the admin sets a per-broadcast `--eap-grp-titlebar` /
   `--eap-grp-titlebar-text` the topbar paints over the shared overlay
   tint. Without a value the existing rgba(--eap-player-bg-rgb…) default
   wins via the fallback in `var(... , transparent)`. */
body .ephesus-audio-player .eap-topbar {
	background-color: var(--eap-grp-titlebar, rgba(var(--eap-player-bg-rgb, 255, 252, 245), var(--eap-player-bg-op, 0.66))) !important;
	border-bottom-color: var(--eap-grp-divider);
}
body .ephesus-audio-player .eap-topbar,
body .ephesus-audio-player .eap-topbar .eap-topbar-title,
body .ephesus-audio-player .eap-topbar .eap-topbar-meta,
body .ephesus-audio-player .eap-topbar .eap-topbar-meta * {
	color: var(--eap-grp-titlebar-text, var(--eap-grp-text));
}
body .ephesus-audio-player .eap-topbar .eap-topbar-actions .eap-iconbtn {
	color: var(--eap-grp-titlebar-text, var(--eap-grp-interactive));
}

/* ════════════════════════════════════════════════════════════════════
   v3.10.1 — Volume row, visualizer centering, viz toggle button
   --------------------------------------------------------------------
   The volume row is now a SIBLING of the transport grid (no longer
   landed in the left cell). The visualizer canvas is centred and
   gains a small on/off toggle button that floats on its right edge.
   ════════════════════════════════════════════════════════════════════ */
body .ephesus-audio-player .eap-volume-row {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	margin-top: 4px;
}
body .ephesus-audio-player .eap-volume-row .eap-volume {
	margin: 0 auto !important;
	max-width: 320px;
	width: 100%;
}

/* Centre the visualizer canvas and constrain its width so it sits in
   the middle of the player even on ultra-wide layouts. */
body .ephesus-audio-player .eap-viz-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 10px auto 4px;
	width: 100%;
	max-width: 560px;
}
body .ephesus-audio-player .eap-viz {
	display: block;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	transition: opacity .25s ease;
}
body .ephesus-audio-player .eap-viz.is-off {
	opacity: 0;
	pointer-events: none;
}

/* v3.10.11 — Visualizer toggle now lives inside the play/pause
   transport row (LEFTMOST slot), not floating above the viz canvas.
   These rules used to absolute-position it to top:-6px;right:0 —
   which overrode the DOM placement and kept dragging the icon back
   to the right side of the screen on mobile, no matter where the
   JS put it. The toggle is just a normal .eap-iconbtn now, so we
   leave layout to the transport row's flexbox and only add the
   minimal styling (size and is-on state) that the icon needs. */
body .ephesus-audio-player .eap-viz-toggle {
	position: static !important;
	top: auto !important;
	right: auto !important;
	background: transparent;
	opacity: 1;
	color: var(--eap-grp-interactive, var(--eap-accent, #0F2A4A));
	transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
body .ephesus-audio-player .eap-viz-toggle.is-on {
	color: var(--eap-grp-visualizer, var(--eap-accent, #0F2A4A));
}
body .ephesus-audio-player .eap-viz-toggle svg {
	width: 18px;
	height: 18px;
}

/* ============================================================
   v3.10.23 — Performance trim for mobile.
   backdrop-filter blur is one of the most expensive paints on
   mobile WebKit (each composite redraws the blur region per
   frame). Strip it on touch devices and narrow viewports so the
   audio player + broadcast page composite in a single pass.
   Same for `will-change` — overusing it pins compositor layers
   in memory and on phones that costs more than it saves.
   ============================================================ */
@media (pointer: coarse), (max-width: 960px) {
	body .ephesus-audio-player .eap-side,
	body .ephesus-audio-player .eap-topbar,
	body .ephesus-audio-player .eap-bg-blur,
	body .ephesus-audio-player .eap-viz-trigger,
	body .ephesus-audio-player .eap-viz-pop,
	body .ephesus-audio-player .eap-subs-panel,
	body .ephesus-audio-player .eap-scrub-tip,
	body .broadcast-card,
	body .broadcast-hero__player {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
	.broadcast-page .broadcast-hero__inner,
	.broadcast-page .ephesus-audio-player .eap-side,
	.broadcast-page .broadcast-hero__copy,
	.broadcast-page .ephesus-audio-player .eap-now,
	.broadcast-page .ephesus-audio-player .eap-cover-wrap,
	.broadcast-page .ephesus-audio-player .eap-scrub-wrap,
	.broadcast-page .ephesus-audio-player .eap-viz-wrap {
		will-change: auto;
	}
}