/* ════════════════════════════════════════════════════════════════════
   EPHESUS AUDIO PLAYER  +  EPHESUS RADIO PLAYER  +  BROADCAST PAGE
   ────────────────────────────────────────────────────────────────────
   Blended-shell audio player based on the EGW Broadcast prototype, with
   the engineering (HTML5 audio, no Web Audio, iOS/Android background
   playback) ported from page-online-service.php. Frosted glass surfaces,
   waveform scrubber, tabbed sidebar (transcript / scripture / outline /
   reflections / queue), cream + navy + gold tokens, light/dark, ±15s,
   loop, share, volume, speed, lang popovers.
   Honors the 15 EGW UX rules (3D shadows, cream→#000 contrast, etc.).
   ════════════════════════════════════════════════════════════════════ */

/* ── BROADCAST PAGE LAYOUT ──────────────────────────────────────── */

.broadcast-page                  { background: var(--color-background-primary, var(--color-bg, #fff)); color: var(--color-text-primary, var(--color-text, #1a1a1a)); }
.broadcast-section               { padding: clamp(48px, 8vw, 96px) 0; }
.broadcast-section__head         { margin-bottom: clamp(24px, 4vw, 48px); }
.broadcast-section__head .section-title { display: flex; align-items: center; gap: 12px; }
.broadcast-section__sub          { color: var(--color-text-secondary, #555); font-size: 1.05rem; line-height: 1.5; margin-top: 8px; max-width: 60ch; }

/* Hero ------------------------------------------------------------- */
.broadcast-hero                  { padding: clamp(56px, 10vw, 120px) 0 clamp(48px, 8vw, 88px); }
.broadcast-hero__inner           { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.broadcast-hero__title           { font-family: var(--font-heading, 'Jost', sans-serif); font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 18px; }
.broadcast-hero__lead            { color: var(--color-text-secondary); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.55; max-width: 50ch; margin-bottom: 24px; }
.broadcast-hero__player          { min-width: 0; }

@media (max-width: 980px) {
	.broadcast-hero__inner { grid-template-columns: 1fr; }
}

/* Live dot --------------------------------------------------------- */
.live-dot                        { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #d61f1f; box-shadow: 0 0 0 4px rgba(214,31,31,.18); animation: live-pulse 1.5s ease-in-out infinite; }
.live-label                      { font-family: var(--font-heading, 'Jost', sans-serif); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; color: #d61f1f; text-transform: uppercase; }
@keyframes live-pulse            { 0%, 100% { box-shadow: 0 0 0 4px rgba(214,31,31,.18); } 50% { box-shadow: 0 0 0 7px rgba(214,31,31,.32); } }

/* Video shell ------------------------------------------------------ */
.broadcast-video-shell           { padding: 0; overflow: hidden; border-radius: 16px; }

/* Card grids ------------------------------------------------------- */
.broadcast-grid                  { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.broadcast-grid.grid-3           { grid-template-columns: repeat(3, 1fr); }
.broadcast-grid.grid-4           { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .broadcast-grid.grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .broadcast-grid.grid-3, .broadcast-grid.grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .broadcast-grid.grid-3, .broadcast-grid.grid-4 { grid-template-columns: 1fr; } }

/* Broadcast card --------------------------------------------------- */
.broadcast-card                  { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; outline: none; padding: 0; background: var(--color-background-primary, #fff); border: 0.5px solid var(--color-border-tertiary, rgba(15,42,74,.06)); }
.broadcast-card:focus-visible    { outline: 3px solid var(--color-navy, #0F2A4A); outline-offset: 2px; }
.broadcast-card__cover           { position: relative; aspect-ratio: 16/10; background: linear-gradient(135deg, #0F2A4A 0%, #1d3a63 100%) center/cover no-repeat; background-blend-mode: overlay; }
.broadcast-card__play            { position: absolute; bottom: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.95); color: #0F2A4A; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(15,42,74,.25), 0 2px 6px rgba(15,42,74,.18); transition: transform .15s ease; padding: 0; }
.broadcast-card:hover .broadcast-card__play { transform: scale(1.08); }
.broadcast-card__badge           { position: absolute; top: 12px; left: 12px; background: rgba(15,42,74,.85); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(8px); }
.broadcast-card__badge--gold     { background: #FFF1D3; color: #000; box-shadow: 0 2px 6px rgba(184,134,43,.25); }
.broadcast-card__body            { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.broadcast-card__title           { font-family: var(--font-heading, 'Jost', sans-serif); font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0; color: var(--color-text-primary); }
.broadcast-card__speaker         { color: var(--color-text-secondary); font-size: 0.86rem; margin: 0; }
.broadcast-card__meta            { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 0; font-size: 0.78rem; color: var(--color-text-secondary); }
.broadcast-card__chip            { display: inline-block; padding: 2px 8px; background: rgba(15,42,74,0.08); color: #0F2A4A; border-radius: 999px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.74rem; font-weight: 600; }
.broadcast-card__series          { font-style: italic; }
.broadcast-card__dur             { margin-left: auto; font-variant-numeric: tabular-nums; }
.broadcast-card--compact .broadcast-card__cover { aspect-ratio: 1/1; }


/* ════════════════════════════════════════════════════════════════════
   EPHESUS AUDIO PLAYER — frosted glass shell
   ════════════════════════════════════════════════════════════════════ */

.ephesus-audio-player                   { --eap-accent: #0F2A4A; --eap-accent-soft: rgba(15,42,74,.12); --eap-cream: #FFF1D3; --eap-radius: 14px; position: relative; min-height: 360px; border-radius: 18px; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, var(--eap-cream) 0%, #FFE7B0 70%, #FFD27C 100%); box-shadow: 0 24px 64px rgba(15,42,74,.16), 0 6px 16px rgba(15,42,74,.10), 0 1px 0 rgba(255,255,255,.45) inset; color: #000; transition: background .4s ease, color .3s ease; }
.ephesus-audio-player[data-resolved-theme="dark"] { background: linear-gradient(160deg, #15161a 0%, #1c1e23 70%, #0d0d0d 100%); color: #f1ede4; box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.06) inset; }
.ephesus-audio-player *                 { box-sizing: border-box; }

/* Skeleton --------------------------------------------------------- */
.eap-skeleton                          { padding: 24px; display: grid; grid-template-columns: 140px 1fr; gap: 18px; }
.eap-skel-cover                        { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.4) 25%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.4) 75%); background-size: 200% 100%; animation: eap-skel 1.4s ease-in-out infinite; }
.eap-skel-body                         { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.eap-skel-line                         { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.4) 25%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.4) 75%); background-size: 200% 100%; animation: eap-skel 1.4s ease-in-out infinite; }
.eap-skel-line--lg                     { width: 80%; height: 22px; }
.eap-skel-line--md                     { width: 50%; }
.eap-skel-line--sm                     { width: 28%; }
@keyframes eap-skel                    { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ephesus-audio-player.is-ready .eap-skeleton { display: none; }

.eap-noscript                          { padding: 20px; text-align: center; }
.eap-noscript audio                    { width: 100%; max-width: 480px; }

/* Shell layout ----------------------------------------------------- */
.eap-shell                             { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; }

/* Top bar ---------------------------------------------------------- */
.eap-topbar                            { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: rgba(255,252,245,.66); -webkit-backdrop-filter: blur(40px) saturate(1.4); backdrop-filter: blur(40px) saturate(1.4); border-bottom: 0.5px solid rgba(0,0,0,.08); }
[data-resolved-theme="dark"] .eap-topbar { background: rgba(26,26,30,.55); border-bottom-color: rgba(255,255,255,.08); }
.eap-kicker                            { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(0,0,0,.66); display: flex; align-items: center; gap: 8px; }
[data-resolved-theme="dark"] .eap-kicker { color: rgba(241,237,228,.7); }
.eap-kicker-chapter                    { color: var(--eap-accent); font-weight: 800; }
[data-resolved-theme="dark"] .eap-kicker-chapter { color: #b8d4ff; }
.eap-kicker-sep                        { opacity: 0.4; }
.eap-topbar-meta                       { flex: 1; min-width: 0; }
.eap-topbar-actions                    { display: flex; align-items: center; gap: 4px; }

/* Icon button ------------------------------------------------------ */
.eap-iconbtn                           { appearance: none; background: transparent; border: 0; cursor: pointer; color: inherit; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s ease, transform .1s ease; position: relative; }
.eap-iconbtn:hover                     { background: rgba(0,0,0,.06); }
.eap-iconbtn:active                    { background: rgba(0,0,0,.10); transform: scale(.95); }
[data-resolved-theme="dark"] .eap-iconbtn:hover  { background: rgba(255,255,255,.07); }
[data-resolved-theme="dark"] .eap-iconbtn:active { background: rgba(255,255,255,.12); }
.eap-iconbtn.is-on                     { color: var(--eap-accent); background: var(--eap-accent-soft); }
.eap-iconbtn.has-label                 { width: auto; padding: 0 10px; gap: 6px; font-weight: 600; font-size: 12px; }
.eap-iconbtn svg                       { width: 18px; height: 18px; }

/* Subscribe pill --------------------------------------------------- */
.eap-subscribe                         { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(0,0,0,0.16); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; color: inherit; transition: background .15s, border-color .15s, color .15s; }
.eap-subscribe:hover                   { background: rgba(0,0,0,.05); }
.eap-subscribe.is-on                   { background: var(--eap-accent); color: #fff; border-color: var(--eap-accent); }

/* Main split ------------------------------------------------------- */
.eap-main                              { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); min-height: 560px; }
@media (max-width: 960px) {
	/* v3.10.15 — Mobile single-column player. The sidebar no longer
	   stacks below the now-playing column — instead it slides in from
	   the right as an overlay (see the .eap-side override further
	   down in this file). So the grid is just 1 row, .eap-now. */
	.eap-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); min-height: 0; position: relative; }
	/* Sidebar overlays the whole player on mobile non-fullscreen too. */
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-side {
		position: absolute !important;
		inset: 0 !important;
		width: auto !important;
		height: auto !important;
		z-index: 6;
		transform: translateX(0);
		transition: transform .32s cubic-bezier(.22, .61, .36, 1);
		border-top: 0 !important;
		border-left: 0 !important;
		border-radius: inherit !important;
		box-shadow: -16px 0 32px rgba(0,0,0,.18);
		contain: layout size;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		/* v3.10.20 — Fully opaque per Dennis. Solid surface in both
		   themes so the cover never bleeds through behind the
		   transcript on mobile. */
		background: #FFFAEC !important;
		color: #1a1a1a !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen)[data-resolved-theme="dark"] .eap-side {
		background: #0F1116 !important;
		color: #fff !important;
	}
	/* Slide it off to the right when CC toggle is OFF. The JS already
	   adds .eap-no-sidebar to the player root on toggle. */
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen).eap-no-sidebar .eap-side {
		transform: translateX(100%) !important;
		pointer-events: none;
	}
}

/* Now-playing column ---------------------------------------------- */
.eap-now                               { padding: 24px clamp(20px, 4vw, 36px) 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; justify-content: center; }
.eap-cover-wrap                        { position: relative; aspect-ratio: 1; width: min(220px, 30vh); flex-shrink: 0; }
.eap-cover                             { width: 100%; height: 100%; border-radius: var(--eap-radius); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.08); background: linear-gradient(150deg, var(--eap-accent), #1a1a1a); position: relative; }
.eap-cover img                         { width: 100%; height: 100%; object-fit: cover; display: block; }
.eap-cover-default                     { position: absolute; inset: 0; padding: 18px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(150deg, var(--eap-accent) 0%, #1a1a1a 75%, #0d0d0d 100%); }
.eap-cover-default__kicker             { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; opacity: 0.8; font-weight: 700; }
.eap-cover-default__title              { font-family: var(--font-heading, 'Jost', sans-serif); font-size: 28px; line-height: 0.95; font-weight: 800; letter-spacing: -0.02em; margin-top: auto; }

.eap-save                              { position: absolute; bottom: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: transform .15s; }
.eap-save:hover                        { background: rgba(0,0,0,.6); transform: scale(1.05); }
.eap-save.is-on                        { color: var(--eap-accent); background: rgba(255,255,255,.95); }

.eap-meta                              { text-align: center; max-width: 560px; }
.eap-title                             { font-family: var(--font-heading, 'Jost', sans-serif); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 4px; }
.eap-pastor                            { font-size: 14px; color: rgba(0,0,0,.66); margin: 2px 0 0; font-weight: 500; }
[data-resolved-theme="dark"] .eap-pastor { color: rgba(241,237,228,.7); }
.eap-sub                               { font-size: 11px; color: rgba(0,0,0,.4); margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
[data-resolved-theme="dark"] .eap-sub  { color: rgba(241,237,228,.45); }
.eap-scripture-pill                    { display: inline-flex; gap: 4px; padding: 3px 10px; background: var(--eap-accent-soft); border: 0.5px solid rgba(15,42,74,.25); color: var(--eap-accent); border-radius: 999px; font-size: 11px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-resolved-theme="dark"] .eap-scripture-pill { color: #b8d4ff; background: rgba(184,212,255,.12); border-color: rgba(184,212,255,.25); }

/* Scrubber --------------------------------------------------------- */
.eap-scrub-wrap                        { width: 100%; max-width: 560px; }
.eap-scrub                             { position: relative; width: 100%; height: 46px; cursor: pointer; touch-action: none; }
.eap-wave                              { position: absolute; inset: 0; display: flex; align-items: center; gap: 3px; pointer-events: none; }
.eap-wb                                { flex: 1 1 0; min-width: 2px; background: rgba(0,0,0,.16); border-radius: 1px; transition: background .05s ease; }
.eap-wb.played                         { background: var(--eap-accent); }
.eap-scrub:hover .eap-wb:not(.played)  { background: rgba(0,0,0,.36); }
[data-resolved-theme="dark"] .eap-wb   { background: rgba(255,255,255,.16); }
[data-resolved-theme="dark"] .eap-wb.played { background: #b8d4ff; }
[data-resolved-theme="dark"] .eap-scrub:hover .eap-wb:not(.played) { background: rgba(255,255,255,.36); }

.eap-chapter-tick                      { position: absolute; top: 0; bottom: 0; width: 1.5px; background: rgba(0,0,0,.36); pointer-events: none; transform: translateX(-50%); opacity: .5; }
[data-resolved-theme="dark"] .eap-chapter-tick { background: rgba(255,255,255,.36); }

.eap-ref-dot                           { position: absolute; bottom: 100%; transform: translate(-50%, -3px); width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--eap-cream); background: #fff; color: var(--eap-accent); padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.14); transition: transform .15s ease; font-size: 11px; }
.eap-ref-dot.is-main                   { background: var(--eap-accent); color: #fff; }
.eap-ref-dot:hover                     { transform: translate(-50%, -5px) scale(1.15); z-index: 3; }
[data-resolved-theme="dark"] .eap-ref-dot { border-color: #15161a; background: #1e2025; }

.eap-scrub-tip                         { position: absolute; top: -28px; transform: translateX(-50%); font-size: 11px; font-variant-numeric: tabular-nums; padding: 4px 8px; border-radius: 6px; background: rgba(255,252,245,.92); border: 0.5px solid rgba(0,0,0,.10); box-shadow: 0 4px 12px rgba(0,0,0,.10); pointer-events: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-resolved-theme="dark"] .eap-scrub-tip { background: rgba(28,30,35,.92); border-color: rgba(255,255,255,.10); color: #f1ede4; }

.eap-scrub-times                       { display: flex; justify-content: space-between; font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(0,0,0,.4); margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-resolved-theme="dark"] .eap-scrub-times { color: rgba(241,237,228,.45); }

/* Transport -------------------------------------------------------- */
.eap-transport                         { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; max-width: 620px; justify-content: center; padding: 4px 8px 8px; flex-wrap: wrap; }
/* v3.10.4 — Tighter spacing on transport-side groups so the wider button
   set (CC + viz + back15 / fwd15 + loop + speed) still hugs the play
   button instead of spilling across the row.
   v3.10.13 — Further tightened per Dennis: 3px between icons in a side
   group, 6px between groups and the play button. */
.eap-transport-side                    { display: flex; align-items: center; gap: 3px; }
.eap-transport-left                    { justify-content: flex-end; }
.eap-transport-right                   { justify-content: flex-start; }
.eap-transport .eap-iconbtn            { width: 44px; height: 44px; flex-shrink: 0; }
.eap-play                              { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--eap-accent); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-shadow: 0 10px 22px rgba(15,42,74,.32), 0 2px 6px rgba(15,42,74,.18); transition: transform .1s ease, background .15s ease; flex-shrink: 0; margin: 0 2px; }
.eap-play:hover                        { transform: scale(1.05); }
.eap-play:active                       { transform: scale(0.95); }
.eap-play svg                          { width: 24px; height: 24px; }

/* Volume — absolute on the right of the transport row, with the row
   padded enough on the right to reserve space (no overlap with loop). */
.eap-volume                            { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
.eap-vol-slider                        { appearance: none; -webkit-appearance: none; width: 80px; height: 4px; background: linear-gradient(to right, var(--eap-accent) 0%, var(--eap-accent) var(--eap-vol, 70%), rgba(0,0,0,.16) var(--eap-vol, 70%), rgba(0,0,0,.16) 100%); border-radius: 2px; outline: none; cursor: pointer; padding: 0; margin: 0; }
.eap-vol-slider::-webkit-slider-thumb  { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--eap-accent); border: 0; cursor: grab; }
.eap-vol-slider::-moz-range-thumb      { width: 13px; height: 13px; border-radius: 50%; background: var(--eap-accent); border: 0; cursor: grab; }
@media (max-width: 760px) {
	.eap-transport { padding: 4px 0 8px; flex-wrap: wrap; }
	.eap-volume { position: static; transform: none; width: 100%; justify-content: center; margin-top: 4px; }
	.eap-vol-slider { width: 90px; }
}

/* Speed button label (e.g. "1×", "1.25×") */
.eap-iconbtn-label                     { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* Frequency visualizer band — sits below the transport. Gradient
   fade on both edges so the bars dissolve into the cream surface. */
.eap-viz-wrap                          { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.eap-viz                               { width: 100%; height: 56px; display: block; opacity: .75; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); }
[data-resolved-theme="dark"] .eap-viz  { opacity: .85; }
.eap-viz.is-off                        { display: none; }

/* Visualizer mode picker (popover) */
.eap-viz-picker                        { position: relative; }
.eap-viz-trigger                       { appearance: none; background: transparent; border: 1px solid rgba(0,0,0,.10); border-radius: 999px; padding: 5px 11px 5px 13px; display: inline-flex; align-items: center; gap: 6px; color: rgba(0,0,0,.66); font-size: 11px; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.eap-viz-trigger:hover                 { background: rgba(0,0,0,.05); color: inherit; }
.eap-viz-trigger[aria-expanded="true"] { background: var(--eap-accent-soft); color: var(--eap-accent); border-color: rgba(15,42,74,.25); }
[data-resolved-theme="dark"] .eap-viz-trigger        { border-color: rgba(255,255,255,.12); color: rgba(241,237,228,.7); }
[data-resolved-theme="dark"] .eap-viz-trigger:hover  { background: rgba(255,255,255,.06); color: #f1ede4; }
[data-resolved-theme="dark"] .eap-viz-trigger[aria-expanded="true"] { background: rgba(184,212,255,.12); color: #b8d4ff; border-color: rgba(184,212,255,.25); }

.eap-viz-pop                           { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 20; min-width: 180px; padding: 6px; background: rgba(255,252,245,.96); border: 0.5px solid rgba(0,0,0,.10); border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.10); backdrop-filter: blur(40px) saturate(1.4); -webkit-backdrop-filter: blur(40px) saturate(1.4); flex-direction: column; gap: 1px; }
.eap-viz-pop.is-open                   { display: flex; }
[data-resolved-theme="dark"] .eap-viz-pop { background: rgba(28,30,35,.96); border-color: rgba(255,255,255,.10); }
.eap-viz-pop-row                       { appearance: none; background: transparent; border: 0; color: inherit; text-align: left; padding: 8px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s; }
.eap-viz-pop-row:hover                 { background: rgba(0,0,0,.05); }
[data-resolved-theme="dark"] .eap-viz-pop-row:hover { background: rgba(255,255,255,.06); }
.eap-viz-pop-row.is-on                 { color: var(--eap-accent); background: var(--eap-accent-soft); font-weight: 700; }
[data-resolved-theme="dark"] .eap-viz-pop-row.is-on { color: #b8d4ff; background: rgba(184,212,255,.12); }

/* Sidebar toggle — user can hide the transcript/scripture/outline/questions
   pane entirely via the CC icon in the top bar. When hidden, the now-playing
   column expands to fill the player. Preference persists in localStorage. */
.ephesus-audio-player.eap-no-sidebar .eap-side    { display: none; }
.ephesus-audio-player.eap-no-sidebar .eap-main    { grid-template-columns: 1fr; }
.ephesus-audio-player.eap-no-sidebar .eap-cover-wrap { width: min(280px, 36vh); }

/* Side panel ------------------------------------------------------- */
.eap-side                              { display: flex; flex-direction: column; min-height: 0; background: rgba(255,252,245,.5); -webkit-backdrop-filter: blur(40px) saturate(1.4); backdrop-filter: blur(40px) saturate(1.4); border-left: 0.5px solid rgba(0,0,0,.08); }
[data-resolved-theme="dark"] .eap-side { background: rgba(26,26,30,.45); border-left-color: rgba(255,255,255,.08); }
@media (max-width: 960px) { .eap-side { border-left: 0; border-top: 0.5px solid rgba(0,0,0,.08); } }

/* v3.10.6 — Bound the player height to the now-playing column.
   Without these rules, a long transcript (or auto-hydrated subtitle
   cues — easily hundreds of lines) would inflate the sidebar's
   intrinsic height, the CSS Grid row would stretch to fit, and the
   whole player would grow with it.

   `contain: size` tells the layout engine to treat the sidebar's
   contents as zero-sized for sizing purposes. The grid row therefore
   sizes to the now-playing column alone; the sidebar then stretches
   into that height via grid's default `align-self: stretch`, and
   the cues scroll internally via `.eap-side-body` + `.eap-transcript`.

   On mobile (≤ 960px) the layout is single-column / stacked rows,
   so the sidebar should keep its natural height — containment is
   only applied at the desktop breakpoint. */
@media (min-width: 961px) {
	.eap-side { contain: size; }
}
.eap-side-body { flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; padding: 8px 0; }
.eap-transcript,
.eap-notes { max-height: 100%; }

.eap-tabs                              { display: flex; padding: 16px 14px 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.eap-tabs::-webkit-scrollbar           { display: none; }
.eap-tab                               { appearance: none; border: 0; background: transparent; color: rgba(0,0,0,.55); padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.eap-tab:hover                         { background: rgba(0,0,0,.05); color: inherit; }
.eap-tab.is-on                         { background: rgba(0,0,0,.09); color: inherit; }
[data-resolved-theme="dark"] .eap-tab  { color: rgba(241,237,228,.55); }
[data-resolved-theme="dark"] .eap-tab:hover  { background: rgba(255,255,255,.05); }
[data-resolved-theme="dark"] .eap-tab.is-on  { background: rgba(255,255,255,.11); }
.eap-side-body                         { flex: 1; min-height: 0; overflow: hidden; padding: 8px 0; }

/* Transcript ------------------------------------------------------- */
.eap-transcript                        { height: 100%; overflow-y: auto; scroll-behavior: smooth; padding: 0 24px; mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
.eap-transcript::-webkit-scrollbar     { display: none; }
.eap-tx-pad                            { height: 34vh; min-height: 80px; }
.eap-tx-line                           { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 9px 0; cursor: pointer; transition: color .3s; align-items: baseline; }
/* v3.10.26 — Transcript text uses the player's inherited colour
   so the focus band's per-line opacity (driven by JS based on the
   admin's `subs_focus_lines` setting) is the SOLE thing controlling
   brightness. Previously the text had a baked-in rgba(0,0,0,.4),
   which compounded with line opacity so even "in focus" lines were
   ~38% dim — visually identical to out-of-focus. That's the root
   cause Dennis was seeing on /broadcast/ ("only one line bright"). */
.eap-tx-text                           { font-family: var(--font-heading, 'Jost', sans-serif); font-size: 17px; line-height: 1.46; color: inherit; transition: transform .3s; transform-origin: left center; }
.eap-tx-time                           { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: rgba(0,0,0,.5); padding-top: 7px; font-variant-numeric: tabular-nums; }
.eap-tx-line.is-on .eap-tx-text        { font-weight: 700; transform: scale(1.02); }
.eap-tx-line.is-on .eap-tx-time        { color: var(--eap-accent); font-weight: 700; }
[data-resolved-theme="dark"] .eap-tx-time { color: rgba(241,237,228,.55); }
[data-resolved-theme="dark"] .eap-tx-line.is-on .eap-tx-time { color: #b8d4ff; }

/* Notes / Outline -------------------------------------------------- */
.eap-notes                             { height: 100%; overflow-y: auto; padding: 14px 24px 24px; }
.eap-big-idea                          { background: rgba(0,0,0,.04); border-left: 3px solid var(--eap-accent); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
[data-resolved-theme="dark"] .eap-big-idea { background: rgba(255,255,255,.05); }
.eap-bi-label                          { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--eap-accent); font-weight: 800; margin-bottom: 4px; }
.eap-bi-text                           { font-family: var(--font-heading, 'Jost', sans-serif); font-size: 16px; line-height: 1.4; font-weight: 700; }
.eap-outline                           { list-style: none; padding: 0; margin: 0; }
.eap-out-sec                           { padding: 10px 0; border-top: 0.5px solid rgba(0,0,0,.08); }
.eap-out-sec:first-child               { border-top: 0; }
.eap-out-sec.is-on                     { background: var(--eap-accent-soft); margin: 0 -10px; padding: 10px 10px; border-radius: 10px; border-top-color: transparent; }
.eap-out-head                          { width: 100%; display: flex; align-items: baseline; gap: 12px; background: transparent; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.eap-out-time                          { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: rgba(0,0,0,.4); min-width: 38px; font-variant-numeric: tabular-nums; }
.eap-out-sec.is-on .eap-out-time       { color: var(--eap-accent); font-weight: 700; }
.eap-out-heading                       { font-family: var(--font-heading, 'Jost', sans-serif); font-size: 15px; font-weight: 700; }
.eap-out-points                        { margin: 8px 0 0 48px; padding: 0; list-style: disc; color: rgba(0,0,0,.55); }
.eap-out-points li                     { font-size: 13px; line-height: 1.5; padding: 3px 0; }

/* Scripture sidebar ----------------------------------------------- */
.eap-scrlist                           { height: 100%; overflow-y: auto; padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.eap-scr-card                          { background: rgba(0,0,0,.04); border-radius: 12px; padding: 14px 16px; text-align: left; cursor: pointer; border: 0; color: inherit; font: inherit; transition: background .15s; }
.eap-scr-card:hover                    { background: var(--eap-accent-soft); }
.eap-scr-card.is-main                  { border-left: 3px solid var(--eap-accent); }
.eap-scr-card.is-on                    { background: var(--eap-accent-soft); }
.eap-scr-head                          { display: flex; gap: 7px; align-items: center; margin-bottom: 8px; color: var(--eap-accent); }
.eap-scr-ref                           { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 800; }
.eap-scr-text                          { font-family: var(--font-heading, 'Jost', sans-serif); font-size: 14px; line-height: 1.5; color: rgba(0,0,0,.66); }

/* Questions -------------------------------------------------------- */
.eap-qlist                             { height: 100%; overflow-y: auto; padding: 14px 24px 24px; }
.eap-qitem                             { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0; border-top: 0.5px solid rgba(0,0,0,.08); }
.eap-qitem:first-child                 { border-top: 0; padding-top: 0; }
.eap-qnum                              { font-family: var(--font-heading, 'Jost', sans-serif); font-size: 22px; font-weight: 800; color: var(--eap-accent); line-height: 1; }
.eap-qtext                             { font-family: var(--font-heading, 'Jost', sans-serif); font-size: 15px; line-height: 1.5; }

/* Side empty-state */
.eap-side-empty                        { padding: 32px 24px; text-align: center; color: rgba(0,0,0,.4); font-size: 13px; }
[data-resolved-theme="dark"] .eap-side-empty { color: rgba(241,237,228,.45); }

/* Compact + mini variants ----------------------------------------- */
.ephesus-audio-player--compact         { min-height: 0; }
.ephesus-audio-player--compact .eap-main { grid-template-columns: 1fr; }
.ephesus-audio-player--compact .eap-side { display: none; }
.ephesus-audio-player--compact .eap-cover-wrap { width: 100px; }
.ephesus-audio-player--compact .eap-now  { padding: 16px; }


/* ════════════════════════════════════════════════════════════════════
   EPHESUS RADIO PLAYER (sectional)
   ════════════════════════════════════════════════════════════════════ */

.ephesus-radio-player                  { background: linear-gradient(135deg, #0F2A4A 0%, #1d3a63 100%); color: #fff; border-radius: 18px; padding: 22px clamp(20px, 4vw, 30px); display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); box-shadow: 0 24px 64px rgba(15,42,74,.20), 0 6px 18px rgba(15,42,74,.10); }
.erp-stage                             { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.erp-eq                                { display: inline-flex; align-items: flex-end; gap: 4px; height: 32px; }
.erp-eq i                              { display: block; width: 3px; height: 14px; background: #FFF1D3; border-radius: 2px; animation: erp-eq 1.4s ease-in-out infinite; }
.erp-eq i:nth-child(2)                 { animation-delay: 0.15s; height: 22px; }
.erp-eq i:nth-child(3)                 { animation-delay: 0.30s; height: 12px; }
.erp-eq i:nth-child(4)                 { animation-delay: 0.45s; height: 18px; }
@keyframes erp-eq                      { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1.2); } }
.ephesus-radio-player[data-state="off"] .erp-eq i { animation: none; opacity: 0.4; transform: scaleY(.6); }
.erp-meta                              { display: flex; flex-direction: column; min-width: 0; }
.erp-kicker                            { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #FFF1D3; font-weight: 700; }
.erp-status                            { font-family: var(--font-heading, 'Jost', sans-serif); font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 800; }
.erp-play                              { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #FFF1D3; color: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.18); transition: transform .15s ease, background .15s ease; flex-shrink: 0; }
.erp-play:hover                        { transform: scale(1.06); }
.erp-play:active                       { transform: scale(.95); }
.erp-play.is-playing svg               { display: none; }
.erp-play.is-playing::before           { content: ''; display: inline-block; width: 14px; height: 18px; border-left: 5px solid #000; border-right: 5px solid #000; }


/* ════════════════════════════════════════════════════════════════════
   EPHESUS VIDEO PLAYER
   ════════════════════════════════════════════════════════════════════ */

.ephesus-video-player                  { position: relative; width: 100%; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.32), 0 6px 18px rgba(0,0,0,.20); aspect-ratio: 16/9; }
.evp-stage                             { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.evp-poster                            { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.85); transition: opacity .3s ease; }
.evp-loading                           { position: relative; z-index: 2; color: #fff; display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 16px 20px; background: rgba(0,0,0,.55); border-radius: 999px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.evp-spinner                           { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; animation: evp-spin .9s linear infinite; }
@keyframes evp-spin                    { to { transform: rotate(360deg); } }
.evp-ready .evp-loading                { display: none; }
.evp-ready .evp-poster                 { opacity: 0; pointer-events: none; }
.evp-iframe                            { width: 100%; height: 100%; border: 0; display: block; }
.evp-html5                             { width: 100%; height: 100%; display: block; background: #000; }
.evp-noscript                          { color: #fff; text-align: center; padding: 24px; }


/* ════════════════════════════════════════════════════════════════════
   v3.10.4 — FULLSCREEN CENTERING
   When the user enters fullscreen via the topbar fullscreen button,
   the player root takes over the viewport. By default the existing
   layout pins content to the top — wasting the lower half of the
   screen. These rules center the player content both axes inside
   the fullscreen surface so the cover + transport sit dead-centre.
   ════════════════════════════════════════════════════════════════════ */
/* v3.10.8 — Fullscreen layout, driven by JS-managed `.eap-fs` class.
   We use a class instead of the `:fullscreen` pseudo-class as the
   primary hook because (a) Safari is flaky about applying :fullscreen
   styles to non-<video> elements, and (b) iOS Safari refuses to grant
   real fullscreen to a <div> at all — there we fall back to
   pseudo-fullscreen (position:fixed; inset:0). The same class drives
   the layout in both modes, so we only have to style it once.

   The layout strategy:
       .eap-shell      → flex column, takes 100% × 100%
       .eap-topbar     → flex: 0 0 auto (sits at the top)
       .eap-main       → flex: 1 1 auto + display: flex + center axes
                          (so .eap-now becomes a flex item dead-centre)
       .eap-now        → its natural content, centered in .eap-main
   Flex is more predictable on mobile WebKit than CSS Grid + align-self,
   which is what produced the "pinned to top" bug in v3.10.7 on iPhone. */
.ephesus-audio-player.eap-fs,
.ephesus-audio-player:fullscreen,
.ephesus-audio-player:-webkit-full-screen,
.ephesus-audio-player:-moz-full-screen,
.ephesus-audio-player:-ms-fullscreen {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: 100vw;
	max-height: 100vh;
	max-height: 100dvh;
	border-radius: 0;
	margin: 0;
}

/* Pseudo-fullscreen (mobile / iOS / browsers that won't grant real FS
   to a <div>): pin the whole player to the viewport ourselves. */
.ephesus-audio-player.eap-fs {
	position: fixed !important;
	inset: 0 !important;
	/* Max 32-bit int. The player is reparented to <body> by JS so it
	   sits at the root stacking context; this z-index ensures even
	   plugin-injected modals / chat widgets don't peek through. */
	z-index: 2147483647 !important;
}
html.eap-fs-lock,
html.eap-fs-lock body { overflow: hidden !important; touch-action: none; }
/* v3.10.9 — Belt-and-suspenders: hide site chrome while the audio player
   owns the screen, so even if the OS pushes its own UI in (Safari
   address bar showing up) the page underneath stays out of the way. */
html.eap-fs-lock .site-header,
html.eap-fs-lock .site-footer,
html.eap-fs-lock .quicklinks,
html.eap-fs-lock .mobile-nav,
html.eap-fs-lock .skip-link,
html.eap-fs-lock .back-to-top { display: none !important; }

/* Shell — flex column fills the surface. */
.ephesus-audio-player.eap-fs > .eap-shell,
.ephesus-audio-player:fullscreen > .eap-shell,
.ephesus-audio-player:-webkit-full-screen > .eap-shell,
.ephesus-audio-player:-moz-full-screen > .eap-shell,
.ephesus-audio-player:-ms-fullscreen > .eap-shell {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Topbar stays at the top of the surface (Subscribe / share / exit reachable). */
.ephesus-audio-player.eap-fs .eap-topbar,
.ephesus-audio-player:fullscreen .eap-topbar,
.ephesus-audio-player:-webkit-full-screen .eap-topbar {
	position: relative !important;
	flex: 0 0 auto !important;
	z-index: 5;
}

/* Main fills the remaining height AND becomes a flex centre, so
   whatever child is in it (the now-playing column) lands dead-centre.
   Overflow-y on .eap-main means: if content on a very short screen
   exceeds the available height, the user can scroll WITHIN the player
   instead of seeing controls clipped off the bottom. */
.ephesus-audio-player.eap-fs .eap-main,
.ephesus-audio-player:fullscreen .eap-main,
.ephesus-audio-player:-webkit-full-screen .eap-main,
.ephesus-audio-player:-moz-full-screen .eap-main,
.ephesus-audio-player:-ms-fullscreen .eap-main {
	/* v3.10.39 — Flex-row centring with CC-toggle awareness.
	   CC OFF (.eap-no-sidebar): .eap-side is display:none, so .eap-now
	      is the only flex child — `align-items: center` + `justify-content:
	      center` puts it equidistant from all edges.
	   CC ON: .eap-side becomes a sibling on the right. Both are
	      centred as a GROUP, which naturally shifts .eap-now to the
	      left half of the row — exactly what Dennis asked for. */
	flex: 1 1 auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0;
	overflow: hidden !important;
	width: 100% !important;
	max-width: 100% !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	transition: gap .35s cubic-bezier(.22, .61, .36, 1);
}

/* The now-playing column. */
.ephesus-audio-player.eap-fs .eap-now,
.ephesus-audio-player:fullscreen .eap-now,
.ephesus-audio-player:-webkit-full-screen .eap-now {
	flex: 0 1 auto;
	width: min(900px, 90vw);
	max-width: 90vw;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 36px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: width .35s cubic-bezier(.22, .61, .36, 1), max-width .35s cubic-bezier(.22, .61, .36, 1);
}

/* CC OFF — sidebar collapses out of layout, .eap-now centred alone. */
@media (min-width: 761px) {
	.ephesus-audio-player.eap-fs.eap-no-sidebar .eap-side,
	.ephesus-audio-player:fullscreen.eap-no-sidebar .eap-side,
	.ephesus-audio-player:-webkit-full-screen.eap-no-sidebar .eap-side {
		display: none !important;
	}
	/* v3.10.42 — Force-centre .eap-now via margin auto regardless of
	   whether .eap-main ends up as flex or grid (the broadcast-responsive
	   stylesheet sometimes wins the cascade and reapplies grid mode). */
	.ephesus-audio-player.eap-fs .eap-main > .eap-now,
	.ephesus-audio-player:fullscreen .eap-main > .eap-now,
	.ephesus-audio-player:-webkit-full-screen .eap-main > .eap-now {
		margin-left: auto !important;
		margin-right: auto !important;
		justify-self: center !important;
		align-self: center !important;
	}
	/* Kill the legacy grid-template-columns from broadcast-responsive.css
	   so we definitely stay in flex mode in fullscreen. */
	.ephesus-audio-player.eap-fs .eap-main,
	.ephesus-audio-player:fullscreen .eap-main,
	.ephesus-audio-player:-webkit-full-screen .eap-main {
		grid-template-columns: none !important;
	}

	/* CC ON — sidebar is a flex sibling on the RIGHT of .eap-now,
	   each taking exactly 50% of the row. The divider sits at the
	   horizontal midpoint of the screen. */
	.ephesus-audio-player.eap-fs:not(.eap-no-sidebar) .eap-main,
	.ephesus-audio-player:fullscreen:not(.eap-no-sidebar) .eap-main,
	.ephesus-audio-player:-webkit-full-screen:not(.eap-no-sidebar) .eap-main {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: stretch !important;
		gap: 0 !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
	}
	.ephesus-audio-player.eap-fs:not(.eap-no-sidebar) .eap-now,
	.ephesus-audio-player:fullscreen:not(.eap-no-sidebar) .eap-now,
	.ephesus-audio-player:-webkit-full-screen:not(.eap-no-sidebar) .eap-now {
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 50% !important;
		order: 1 !important;
		margin: 0 !important;
	}
	.ephesus-audio-player.eap-fs:not(.eap-no-sidebar) .eap-side,
	.ephesus-audio-player:fullscreen:not(.eap-no-sidebar) .eap-side,
	.ephesus-audio-player:-webkit-full-screen:not(.eap-no-sidebar) .eap-side {
		display: flex !important;
		flex-direction: column !important;
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		flex: 0 0 50% !important;
		width: 50% !important;
		min-width: 50% !important;
		max-width: 50% !important;
		height: 100% !important;
		max-height: 100% !important;
		align-self: stretch !important;
		order: 2 !important;
		transform: none !important;
		margin: 0 !important;
		border-radius: 0 !important;
		border-left: 0.5px solid rgba(255,255,255,0.08);
		contain: size layout !important;
		opacity: 1 !important;
	}
}

/* On phones, hide the sidebar entirely and give the cover + transport
   prominent real estate so the layout reads like a "now playing" hero
   rather than a squeezed-down desktop. */
@media (max-width: 760px) {
	/* v3.10.15 — Mobile sidebar = full-cover right-slide overlay.
	   Dennis: the subtitle drawer used to slide UP from the bottom and
	   only cover the lower half of the player. He wants it to slide
	   IN FROM THE RIGHT and fill the entire player area. So on mobile
	   (both fullscreen and non-fullscreen) the sidebar becomes an
	   absolutely-positioned panel pinned to the player's edges; the
	   CC toggle slides it in/out via translateX. */
	.ephesus-audio-player.eap-fs .eap-side,
	.ephesus-audio-player:fullscreen .eap-side,
	.ephesus-audio-player:-webkit-full-screen .eap-side {
		display: flex !important;
		position: fixed !important;
		inset: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: auto !important;
		height: auto !important;
		z-index: 6;
		transform: translateX(0);
		transition: transform .32s cubic-bezier(.22,.61,.36,1);
		/* v3.10.20 — 100% opaque solid background per Dennis: the user
		   shouldn't be able to see the cover bleeding through behind
		   the subtitle drawer. Removed the backdrop-filter blur too;
		   it isn't doing useful work over a solid surface. */
		background: #0F1116 !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		border-top: 0 !important;
		border-left: 0 !important;
		border-radius: 0 !important;
		box-shadow: -16px 0 48px rgba(0,0,0,.42);
		contain: layout size;
		color: #fff;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}
	/* Light-mode players still want a light-mode overlay rather than
	   black. The overlay should be the appropriate solid color for
	   the player's resolved theme. */
	.ephesus-audio-player.eap-fs[data-resolved-theme="light"] .eap-side,
	.ephesus-audio-player:fullscreen[data-resolved-theme="light"] .eap-side {
		background: #FFFAEC !important;
		color: #1a1a1a !important;
	}
	/* Slide off-screen TO THE RIGHT when CC toggle is OFF. */
	.ephesus-audio-player.eap-fs.eap-no-sidebar .eap-side,
	.ephesus-audio-player:fullscreen.eap-no-sidebar .eap-side,
	.ephesus-audio-player:-webkit-full-screen.eap-no-sidebar .eap-side {
		transform: translateX(100%) !important;
		pointer-events: none;
	}
	/* Tabs/text contrast on the dark drawer surface. */
	.ephesus-audio-player.eap-fs .eap-tab,
	.ephesus-audio-player:fullscreen .eap-tab,
	.ephesus-audio-player:-webkit-full-screen .eap-tab {
		color: rgba(255,255,255,.6);
	}
	.ephesus-audio-player.eap-fs .eap-tab.is-on,
	.ephesus-audio-player:fullscreen .eap-tab.is-on,
	.ephesus-audio-player:-webkit-full-screen .eap-tab.is-on {
		color: #fff;
		background: rgba(255,255,255,.14);
	}
	.ephesus-audio-player.eap-fs .eap-tx-text,
	.ephesus-audio-player:fullscreen .eap-tx-text,
	.ephesus-audio-player:-webkit-full-screen .eap-tx-text {
		color: rgba(255,255,255,.66);
	}
	.ephesus-audio-player.eap-fs .eap-tx-line.is-on .eap-tx-text,
	.ephesus-audio-player:fullscreen .eap-tx-line.is-on .eap-tx-text,
	.ephesus-audio-player:-webkit-full-screen .eap-tx-line.is-on .eap-tx-text {
		color: #fff;
	}
	.ephesus-audio-player.eap-fs .eap-cover-wrap,
	.ephesus-audio-player:fullscreen .eap-cover-wrap,
	.ephesus-audio-player:-webkit-full-screen .eap-cover-wrap {
		width: min(72vw, 42vh) !important;
	}
	.ephesus-audio-player.eap-fs .eap-now,
	.ephesus-audio-player:fullscreen .eap-now,
	.ephesus-audio-player:-webkit-full-screen .eap-now {
		gap: 14px;
	}
	/* Tighter transport on phones so all 7 buttons fit without wrap. */
	.ephesus-audio-player.eap-fs .eap-transport,
	.ephesus-audio-player:fullscreen .eap-transport,
	.ephesus-audio-player:-webkit-full-screen .eap-transport {
		gap: 3px !important;
		padding: 4px 0 !important;
	}
	.ephesus-audio-player.eap-fs .eap-transport .eap-iconbtn,
	.ephesus-audio-player:fullscreen .eap-transport .eap-iconbtn,
	.ephesus-audio-player:-webkit-full-screen .eap-transport .eap-iconbtn {
		width: 40px !important;
		height: 40px !important;
	}
	.ephesus-audio-player.eap-fs .eap-play,
	.ephesus-audio-player:fullscreen .eap-play,
	.ephesus-audio-player:-webkit-full-screen .eap-play {
		width: 56px;
		height: 56px;
	}
	/* The decorative visualizer canvas eats vertical room without adding
	   info on a phone. Keep the waveform scrubber + transport + volume,
	   ditch the standalone canvas band. */
	.ephesus-audio-player.eap-fs .eap-viz-wrap,
	.ephesus-audio-player:fullscreen .eap-viz-wrap,
	.ephesus-audio-player:-webkit-full-screen .eap-viz-wrap {
		display: none !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
   v3.10.4 — BROADCAST THEME OVERRIDE CONSUMPTION
   When the per-broadcast "Use a broadcast-specific custom theme" toggle
   is ON, the helpers emit a per-broadcast inline <style> block that
   sets `--eap-grp-*` custom properties on the player root. Without
   the rules below the player CSS never actually READS those vars —
   the toggle would save fine but nothing would visibly change.
   Each consumption rule uses var(--eap-grp-…, <fallback>) so the
   defaults still win when the override is off (no breakage).
   ════════════════════════════════════════════════════════════════════ */

/* PRIMARY / ACCENT — drive the existing accent system. accent wins
   over primary if both are set, matching the order users expect from
   the admin theme groups. */
/* v3.10.33 — Comprehensive theme-group color cascade.
   ────────────────────────────────────────────────────────────
   Priority (highest → lowest):
     per-element override (--eap-btn-play / -skip / -group / -volume)
       > theme group   (--eap-grp-* set inline when override toggle on)
         > simple accent palette (--eap-accent from Color tab)
           > built-in default
   Every theme-group color now has a concrete consumer below,
   including the previously-orphan SECONDARY and OVERLAY tokens.
   ──────────────────────────────────────────────────────────── */

/* PRIMARY / ACCENT — drives the central accent system (play button,
   active states, links). Both `primary` and `accent` groups roll up
   into --eap-accent; accent wins when both are set (matches admin
   field order). The trailing #0F2A4A is the navy fallback if
   nothing is configured anywhere. */
.ephesus-audio-player {
	--eap-accent: var(--eap-grp-accent, var(--eap-grp-primary, var(--eap-accent-fallback, #0F2A4A)));
}
.ephesus-audio-player:not([style*="--eap-accent"]) {
	/* When no accent palette inline override is set, we get to drive
	   --eap-accent from the group cascade. The :not() ensures the
	   inline `<style id="…-accent">` rule still wins when it exists. */
	--eap-accent: var(--eap-grp-accent, var(--eap-grp-primary, #0F2A4A));
}

/* SURFACE — player shell background. */
.ephesus-audio-player {
	background: var(--eap-grp-surface, linear-gradient(160deg, var(--eap-cream, #FFF1D3) 0%, #FFE7B0 70%, #FFD27C 100%));
}

/* TEXT — base prose colour, title, dates, etc. */
.ephesus-audio-player {
	color: var(--eap-grp-text, #000);
}
.ephesus-audio-player .eap-title,
.ephesus-audio-player .eap-pastor,
.ephesus-audio-player .eap-kicker,
.ephesus-audio-player .eap-meta {
	color: var(--eap-grp-text, inherit);
}

/* TEXT MUTED — secondary text (subtitle, dates, time labels). */
.ephesus-audio-player .eap-sub,
.ephesus-audio-player .eap-scrub-times,
.ephesus-audio-player .eap-tx-time,
.ephesus-audio-player .eap-side-empty,
.ephesus-audio-player .eap-cover-default__kicker,
.ephesus-audio-player .eap-cover-default__title {
	color: var(--eap-grp-text-muted, rgba(0,0,0,.55));
}

/* SECONDARY — secondary actions / labels. Previously orphan; now
   drives the default for skip buttons (when no btn-skip override)
   and the meta accent (scripture pill etc.). */
.ephesus-audio-player .eap-skipbtn {
	color: var(--eap-btn-skip, var(--eap-grp-secondary, var(--eap-grp-interactive, var(--eap-accent))));
}
.ephesus-audio-player .eap-scripture-pill {
	color:      var(--eap-grp-secondary, var(--eap-accent));
	border-color: var(--eap-grp-secondary, var(--eap-accent));
}

/* INTERACTIVE — icon button colour (loop, viz toggle, mute, etc.). */
.ephesus-audio-player .eap-iconbtn {
	color: var(--eap-grp-interactive, currentColor);
}

/* OVERLAY — cover-art scrim. Previously orphan; now drives the
   semi-transparent veil over the cover-art blur background that
   keeps the controls readable. */
.ephesus-audio-player .eap-bg-veil {
	background: var(--eap-grp-overlay, rgba(0,0,0,.18));
}

/* VISUALIZER — the canvas band colour. JS reads getComputedStyle.color
   so setting `color` propagates through to the bars. */
.ephesus-audio-player .eap-viz {
	color: var(--eap-grp-visualizer, var(--eap-accent));
}

/* WAVEFORM — the played-bar fills on the scrubber. */
.ephesus-audio-player .eap-wb.played {
	background: var(--eap-grp-waveform, var(--eap-accent));
}

/* SIDEBAR — transcript / scripture / outline panel surface. */
.ephesus-audio-player .eap-side {
	background: var(--eap-grp-sidebar, rgba(255,252,245,.5));
}
.ephesus-audio-player[data-resolved-theme="dark"] .eap-side {
	background: var(--eap-grp-sidebar, rgba(26,26,30,.45));
}

/* DIVIDER — borders on cards, side panel, dividers. */
.ephesus-audio-player .eap-side,
.ephesus-audio-player .eap-tab,
.ephesus-audio-player .eap-out-sec,
.ephesus-audio-player .eap-scr-card {
	border-color: var(--eap-grp-divider, rgba(0,0,0,.08));
}

/* FOCUS — keyboard focus ring outline. */
.ephesus-audio-player *:focus-visible {
	outline-color: var(--eap-grp-focus, var(--eap-accent));
}

/* TITLE BAR — top action row background + its text colour. */
.ephesus-audio-player .eap-topbar {
	background: var(--eap-grp-titlebar, rgba(255,252,245,.66));
	color: var(--eap-grp-titlebar-text, inherit);
}
.ephesus-audio-player[data-resolved-theme="dark"] .eap-topbar {
	background: var(--eap-grp-titlebar, rgba(15,17,22,.92));
}
.ephesus-audio-player .eap-topbar-meta,
.ephesus-audio-player .eap-topbar .eap-iconbtn,
.ephesus-audio-player .eap-subscribe {
	color: var(--eap-grp-titlebar-text, inherit);
}

/* v3.10.18 — The "Use device volume" hide-slider rules from v3.10.14 are
   gone. The slider is now always visible and uses a lazy Web Audio
   GainNode on iOS so it actually drives the audio level. See the JS
   side (lazy ensureGainNode + applyVolume). */

/* v3.10.17 — Sidebar close button (X). Default hidden; shown only when
   the sidebar is a full-cover overlay (fullscreen, or mobile non-fs
   where the sidebar slides over the player). On desktop where the
   sidebar is a peer column, the transport CC button is still visible
   for toggling, so this floating button would just be visual noise. */
.eap-side-close {
	/* v3.10.20 — Bigger, brighter, more obvious. The previous
	   semi-transparent black background blended into the dark
	   subtitle drawer; Dennis couldn't see it. Now: a clear
	   accent-coloured pill with high-contrast icon, top-right
	   corner of the overlay, large tap target. */
	position: absolute;
	top: max(16px, env(safe-area-inset-top));
	right: max(16px, env(safe-area-inset-right));
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--eap-accent, #0F2A4A);
	border: 2px solid #fff;
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1000;
	transition: background-color .2s ease, transform .15s ease;
	box-shadow: 0 6px 18px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.18) inset;
}
.eap-side-close:hover    { transform: scale(1.05); }
.eap-side-close:active   { transform: scale(.92); }
.eap-side-close svg      { width: 22px; height: 22px; stroke-width: 2.5; }
/* Light-mode players get a dark X on a cream pill instead. */
.ephesus-audio-player[data-resolved-theme="light"] .eap-side-close {
	background: #FFFAEC;
	color: #0F2A4A;
	border-color: #0F2A4A;
}

/* Show the close button when the sidebar is a full-cover overlay:
   - any fullscreen (real or pseudo)
   - mobile non-fullscreen at ≤ 960px where the sidebar slides over */
.ephesus-audio-player.eap-fs .eap-side-close,
.ephesus-audio-player:fullscreen .eap-side-close,
.ephesus-audio-player:-webkit-full-screen .eap-side-close {
	display: flex;
}
@media (max-width: 960px) {
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-side-close {
		display: flex;
	}
}

/* v3.10.32 — Subtitle layout with timestamps in all modes.
   Per Dennis: bring back the per-line timestamps so users can
   navigate by clicking the time, and keep the layout tidy on
   mobile by tightening the timestamp column width + gap so the
   text doesn't wrap or jam awkwardly into a thin sidebar. */
.ephesus-audio-player.eap-fs .eap-tx-line,
.ephesus-audio-player:fullscreen .eap-tx-line,
.ephesus-audio-player:-webkit-full-screen .eap-tx-line {
	grid-template-columns: 56px 1fr;
	justify-items: stretch;
	gap: 14px;
	align-items: baseline;
}
.ephesus-audio-player.eap-fs .eap-tx-time,
.ephesus-audio-player:fullscreen .eap-tx-time,
.ephesus-audio-player:-webkit-full-screen .eap-tx-time {
	display: block !important;
	font-size: 11px;
	letter-spacing: .02em;
	opacity: .72;
}
.ephesus-audio-player.eap-fs .eap-tx-text,
.ephesus-audio-player:fullscreen .eap-tx-text,
.ephesus-audio-player:-webkit-full-screen .eap-tx-text {
	text-align: left;
	max-width: none;
}
.ephesus-audio-player.eap-fs .eap-transcript,
.ephesus-audio-player:fullscreen .eap-transcript,
.ephesus-audio-player:-webkit-full-screen .eap-transcript {
	padding: 72px 28px 32px !important;
}

/* Mobile (≤ 960px) non-fullscreen overlay — same idea, smaller
   typography + tighter columns because the sidebar slides over a
   narrower viewport. The timestamp column is sized to fit MM:SS
   without padding, and the gap shrinks to keep the text column
   wide enough for natural prose. */
@media (max-width: 960px) {
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-tx-line {
		grid-template-columns: 42px 1fr;
		justify-items: stretch;
		gap: 10px;
		align-items: baseline;
		padding: 7px 0;
	}
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-tx-time {
		display: block !important;
		font-size: 9.5px;
		letter-spacing: 0;
		opacity: .65;
		padding-top: 8px;
	}
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-tx-text {
		text-align: left;
		max-width: none;
		font-size: 15.5px;
		line-height: 1.42;
	}
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-transcript {
		padding: 64px 18px 28px !important;
	}
}

/* Mobile fullscreen — narrowest of all. Smaller timestamp column
   so the text gets full width minus a tasteful gap. */
@media (max-width: 760px) {
	.ephesus-audio-player.eap-fs .eap-tx-line,
	.ephesus-audio-player:fullscreen .eap-tx-line,
	.ephesus-audio-player:-webkit-full-screen .eap-tx-line {
		grid-template-columns: 44px 1fr;
		gap: 10px;
	}
	.ephesus-audio-player.eap-fs .eap-tx-time,
	.ephesus-audio-player:fullscreen .eap-tx-time,
	.ephesus-audio-player:-webkit-full-screen .eap-tx-time {
		font-size: 10px;
		padding-top: 6px;
	}
	.ephesus-audio-player.eap-fs .eap-tx-text,
	.ephesus-audio-player:fullscreen .eap-tx-text,
	.ephesus-audio-player:-webkit-full-screen .eap-tx-text {
		font-size: 16px;
		line-height: 1.4;
	}
	.ephesus-audio-player.eap-fs .eap-transcript,
	.ephesus-audio-player:fullscreen .eap-transcript,
	.ephesus-audio-player:-webkit-full-screen .eap-transcript {
		padding: 68px 16px 28px !important;
	}
}

/* v3.10.19 — Subtitle layout driven by Audio Player Manager settings.
   The JS writes three custom properties / attributes on the transcript
   wrapper:
     --eap-tx-visible-lines  → how many lines should fit in the panel
     --eap-tx-focus-lines    → how many are "in focus" (bright/centered)
     data-anchor             → upper-third | upper-quarter | center
   We use the visible-lines count to size the transcript max-height
   (in cap heights = ~ 36px per line), so changing the admin setting
   reflects on the frontend immediately. */
.eap-transcript {
	max-height: calc( var(--eap-tx-visible-lines, 7) * 38px + 60px );
}
/* v3.10.21 — Per-line opacity is now computed in JS based on the
   admin's `subs_focus_lines` setting, so we don't need sibling-distance
   CSS hacks here. We just leave a transition so the inline opacity
   changes animate smoothly between cue transitions. */
.eap-transcript .eap-tx-line {
	transition: opacity .25s ease, transform .25s ease;
}
.eap-transcript .eap-tx-line.is-on .eap-tx-text {
	transform: scale(1.02);
}

/* v3.10.23 — Drop backdrop-filter on phones for the player topbar.
   It's a constant-overhead paint even when the player isn't moving;
   on lower-end Android phones it was the single biggest cost in the
   composite. Desktops keep the gloss. */
@media (pointer: coarse), (max-width: 960px) {
	.eap-topbar {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: rgba(255,252,245,0.92);
	}
	[data-resolved-theme="dark"] .eap-topbar {
		background: rgba(15,17,22,0.92);
	}
	/* Drop the heavy bg-blur image filter on phones too — it's a
	   cosmetic accent that costs a fullscreen-sized blur per frame. */
	.eap-bg-blur { display: none !important; }
}

/* v3.10.24 — Theme toggle in the player topbar shows only in
   fullscreen. Outside fullscreen the site header's own toggle
   is already available, so the in-player one would be redundant.
   The button still LIVES in the topbar DOM at all times so the
   sun/moon swap stays in sync with the site theme even when
   hidden. */
.eap-iconbtn-fs-only { display: none !important; }
.ephesus-audio-player.eap-fs .eap-iconbtn-fs-only,
.ephesus-audio-player:fullscreen .eap-iconbtn-fs-only,
.ephesus-audio-player:-webkit-full-screen .eap-iconbtn-fs-only {
	display: inline-flex !important;
}

/* v3.10.27 — Font-size controls (A− / A+) in the sidebar.
   Sit next to the close button in the top-right of the panel.
   Click bumps a CSS custom property on the player root which
   the content text reads. Preference is persisted per broadcast
   in localStorage (see JS side). */
.eap-side-fontctl {
	position: absolute;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0,0,0,.10);
	border: 1px solid rgba(0,0,0,.18);
	color: inherit;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 999;
	transition: background-color .15s ease, transform .12s ease;
	top: max(16px, env(safe-area-inset-top));
}
.eap-side-fontctl--dec { right: max(110px, calc(env(safe-area-inset-right) + 110px)); }
.eap-side-fontctl--inc { right: max(70px,  calc(env(safe-area-inset-right) +  70px)); }
.eap-side-fontctl:hover  { background: rgba(0,0,0,.18); }
.eap-side-fontctl:active { transform: scale(.92); }
.eap-side-fontctl svg    { width: 20px; height: 20px; }

/* In dark mode the side panel is dark, so the pills need lighter bg. */
.ephesus-audio-player[data-resolved-theme="dark"] .eap-side-fontctl {
	background: rgba(255,255,255,.10);
	border-color: rgba(255,255,255,.22);
	color: #fff;
}
.ephesus-audio-player[data-resolved-theme="dark"] .eap-side-fontctl:hover {
	background: rgba(255,255,255,.18);
}

/* Visibility — match the close button: only when the sidebar covers
   the whole player (fullscreen, or mobile non-fullscreen overlay). */
.ephesus-audio-player.eap-fs .eap-side-fontctl,
.ephesus-audio-player:fullscreen .eap-side-fontctl,
.ephesus-audio-player:-webkit-full-screen .eap-side-fontctl {
	display: inline-flex;
}
@media (max-width: 960px) {
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-side-fontctl {
		display: inline-flex;
	}
}

/* Desktop — peer-column sidebar — show the controls inline at the
   top of the panel (no close button there, so position differently). */
@media (min-width: 961px) {
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-side-fontctl {
		display: inline-flex;
		width: 30px;
		height: 30px;
		top: 12px;
	}
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-side-fontctl--dec { right: 52px; }
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-side-fontctl--inc { right: 14px; }
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-side-fontctl svg { width: 16px; height: 16px; }
}

/* Apply the scale to the sidebar content text. The custom property
   defaults to 1 so this is a no-op when the user hasn't touched the
   controls. */
.ephesus-audio-player .eap-tx-text,
.ephesus-audio-player .eap-out-heading,
.ephesus-audio-player .eap-out-points li,
.ephesus-audio-player .eap-scr-text,
.ephesus-audio-player .eap-qtext,
.ephesus-audio-player .eap-side-empty {
	font-size: calc( 1em * var(--eap-tx-scale, 1) );
}

/* Push the tabs slightly down so they don't sit underneath the
   floating A−/A+/X buttons on the overlay layouts. */
.ephesus-audio-player.eap-fs .eap-tabs,
.ephesus-audio-player:fullscreen .eap-tabs,
.ephesus-audio-player:-webkit-full-screen .eap-tabs {
	padding-top: 64px;
}
@media (max-width: 960px) {
	.ephesus-audio-player:not(.eap-fs):not(:fullscreen):not(:-webkit-full-screen) .eap-tabs {
		padding-top: 64px;
	}
}


/* ============================================================
   v1.0.7 — Branding footer
   Embosses "Ephesus Audio Player — designed and powered by EGW Diaspora"
   at the bottom edge of every .ephesus-audio-player surface.
   ============================================================ */
.ephesus-audio-player::after {
	content: "Ephesus Audio Player  ·  designed and powered by EGW Diaspora";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 10px 18px 12px;
	text-align: center;
	font-family: var(--font-heading, 'Jost', 'Inter', sans-serif);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(0,0,0,.55);
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 3;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 100%);
}
.ephesus-audio-player[data-resolved-theme="dark"]::after {
	color: rgba(255,241,211,.45);
	background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.04) 100%);
}
.ephesus-audio-player.eap-fs::after,
.ephesus-audio-player:fullscreen::after,
.ephesus-audio-player:-webkit-full-screen::after {
	color: rgba(255,241,211,.55);
}

/* Reserve a little extra bottom padding inside the player content so the
   branding strip doesn't overlap the volume controls / sidebar. */
.eap-now { padding-bottom: 44px !important; }
.eap-side { padding-bottom: 36px !important; }

/* On the empty-state card, the wrapper has no fixed min-height by default
   when no media is loaded — make sure the branding band still sits flush. */
.ephesus-audio-player--empty { padding-bottom: 36px; }
.ephesus-audio-player--empty::after { background: transparent; }

/* The empty-state card and very compact variants get a smaller footer. */
@media (max-width: 480px) {
	.ephesus-audio-player::after {
		font-size: 9.5px; letter-spacing: .12em; padding: 8px 12px 10px;
	}
}