/* ==========================================================================
   EGW Broadcast — Experience layer (v1.2.0)

   Loaded LAST, after egw-console.css, so it wins the cascade.

   WHY THIS FILE EXISTS
   The theme carries two competing token systems (egw-tokens.css declares 101
   custom properties of which only 29 are ever read, and 8 of those resolve to
   an invisible foreground/background pair). Rather than add a third, this
   layer defines ONE palette source of truth and REBINDS the legacy token names
   to it. Every existing component — nav, buttons, cards, players, footer —
   then follows the active palette for free, without its markup changing.

   THREE USER-CHOSEN PALETTES × TWO MODES. The visitor picks; nothing is
   imposed. Defaults to "channel" + system mode.

   RULES OBSERVED
   - Every colour is a custom property. No literal hex in a component rule.
   - `color-scheme` is declared HERE and not inherited from another sheet,
     because egw-tokens.css's whole light-dark() layer collapses without it
     and it was previously declared only in egw-console.css.
   - !important appears only where it must beat one of the 98 !important
     declarations already in the cascade. Never on a custom property.
   ========================================================================== */

/* ==========================================================================
   1. PALETTES  (v1.4.0 — ported from egw-online-service-mambo v3.77.1)

   ELEVEN palettes x TWO modes. The visitor picks; nothing is server-side.

   The architecture is the flagship's and the one rule that matters is its
   rule: A PALETTE RECOLOURS THE ACCENT VOICE ONLY. Grounds, inks, lines,
   the status colours and the per-channel hues are written once per mode
   and never restated inside a palette block. That is what keeps light and
   dark the same design rather than two hand-tuned sets that drift apart —
   and it is why the previous three-palette layer, where every palette
   restated the whole ladder, had a gold dark mode that existed nowhere
   else in the estate.

   Values are GENERATED from the shipped mambo-palettes.css and
   mambo-tokens.css by scratchpad/parse_palettes.py + gen_palettes.py. Do
   not hand-edit them; re-run the generator. The flagship's engine
   guarantees every accent family is contrast-complete (>= 4.5:1) against
   its own grounds, and those grounds come across with it.

   The per-channel hues are the broadcast's own and have no flagship
   equivalent: the estate rule is a different colour per designated item,
   and a channel is the most designated item this site has.
   ========================================================================== */
:root{
  color-scheme: light dark;

  --bcx-page:  #FFFFFF;
  --bcx-stage: #FAF7F2;
  --bcx-card:  #FFFFFF;
  --bcx-well:  #F2ECE3;
  --bcx-field: #F2ECE3;

  --bcx-ink:   #26231F;
  --bcx-ink-2: #4F4A44;
  --bcx-ink-3: #736C64;
  --bcx-ink-4: #B3ABA1;

  --bcx-line:        #E4DDD2;
  --bcx-line-strong: rgba(38,35,31,.22);

  --bcx-tint-1: rgba(38,35,31,.045);
  --bcx-tint-2: rgba(38,35,31,.08);
  --bcx-tint-3: rgba(38,35,31,.13);
  --bcx-tint-4: rgba(38,35,31,.20);
  --bcx-tint-5: rgba(38,35,31,.32);

  --bcx-audio: #0F766E;  --bcx-audio-soft: rgba(15,118,110,.13);
  --bcx-video: #6D28D9;  --bcx-video-soft: rgba(109,40,217,.13);
  --bcx-radio: #BE123C;  --bcx-radio-soft: rgba(190,18,60,.13);
  --bcx-sched: #047857;  --bcx-sched-soft: rgba(4,120,87,.13);

  --bcx-live:    #F1412A;
  --bcx-live-bg: rgba(241,65,42,.13);
  --bcx-on-live: #FFFFFF;
  --bcx-ok:      #4F8F12;
  --bcx-info:    #00588D;

  --bcx-brand:         #A85526;
  --bcx-brand-hov:     #8E4620;
  --bcx-brand-soft:    #FAEDE3;
  --bcx-brand-line:    #F3D9C5;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #A85526;
  --bcx-warn:          #A85526;

  --bcx-shadow-card:  0 22px 48px -30px rgba(66,48,32,.20);
  --bcx-shadow-float: 0 14px 30px -14px rgba(66,48,32,.26);
  --bcx-shadow-press: 0 2px 8px rgba(66,48,32,.20);

  --bcx-ease:   cubic-bezier(.16,1,.3,1);
  --bcx-spring: cubic-bezier(.34,1.56,.64,1);

  --bcx-shell: 1200px;

  /* Media-overlay colours. Cover art always sits under a dark veil, so these
     intentionally do NOT flip with the mode — white stays legible on the veil
     in both. */
  --bcx-on-media:      #FFFFFF;
  --bcx-on-media-ink:  #26231F;
  --bcx-media-pill:    rgba(255,255,255,.95);
  --bcx-media-chip:    rgba(0,0,0,.62);
  --bcx-media-chip-br: rgba(255,255,255,.22);
  --bcx-media-dur:     rgba(0,0,0,.62);
  --bcx-shade:         #000;
  --bcx-veil: linear-gradient(to top,rgba(0,0,0,.76) 0%,rgba(0,0,0,.28) 46%,rgba(0,0,0,.05) 78%);
}

/* ---- 1a. DARK GROUNDS — written once, for every palette ---------------- */
:root[data-theme="dark"]{
  --bcx-page:  #161514;
  --bcx-stage: #1B1A18;
  --bcx-card:  #1F1E1C;
  --bcx-well:  #2A2825;
  --bcx-field: #2A2825;

  --bcx-ink:   #F7F5F2;
  --bcx-ink-2: #C7C1B8;
  --bcx-ink-3: #989188;
  --bcx-ink-4: #6B655D;

  --bcx-line:        rgba(247,245,242,.13);
  --bcx-line-strong: rgba(247,245,242,.24);

  --bcx-tint-1: rgba(247,245,242,.045);
  --bcx-tint-2: rgba(247,245,242,.07);
  --bcx-tint-3: rgba(247,245,242,.11);
  --bcx-tint-4: rgba(247,245,242,.17);
  --bcx-tint-5: rgba(247,245,242,.28);

  --bcx-audio: #5EEAD4;  --bcx-audio-soft: rgba(94,234,212,.13);
  --bcx-video: #C4B5FD;  --bcx-video-soft: rgba(196,181,253,.13);
  --bcx-radio: #FDA4AF;  --bcx-radio-soft: rgba(253,164,175,.13);
  --bcx-sched: #6EE7B7;  --bcx-sched-soft: rgba(110,231,183,.13);

  --bcx-live:    #F1412A;
  --bcx-live-bg: rgba(241,65,42,.13);
  --bcx-on-live: #2A0F0C;
  --bcx-ok:      #8FD44A;
  --bcx-info:    #5AA8DC;

  --bcx-brand:         #E28B52;
  --bcx-brand-hov:     #F0A171;
  --bcx-brand-soft:    rgba(226,139,82,.14);
  --bcx-brand-line:    rgba(226,139,82,.24);
  --bcx-on-brand:      #2A1405;
  --bcx-brand-on-soft: #E28B52;
  --bcx-warn:          #F1D183;

  --bcx-shadow-card:  0 18px 40px -20px rgba(0,0,0,.55);
  --bcx-shadow-float: 0 14px 30px -14px rgba(0,0,0,.50);
  --bcx-shadow-press: 0 1px 6px rgba(0,0,0,.35);
}

/* ---- 1b. THE ACCENT VOICES ---------------------------------------------
   Ephesus Clay is the ABSENCE of data-palette, exactly as in the flagship:
   it is written above and never restated here. Each block below changes
   nothing but the accent.                                                  */
/* Pentecost Flame — light */
:root[data-theme="light"][data-palette="pentecost-flame"]{
  --bcx-brand:         #C44420;
  --bcx-brand-hov:     #A93614;
  --bcx-brand-soft:    #FFEBE1;
  --bcx-brand-line:    #FDD5C1;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #C44420;
  --bcx-warn:          #C44420;
}
/* Pentecost Flame — dark */
:root[data-theme="dark"][data-palette="pentecost-flame"]{
  --bcx-brand:         #ED774C;
  --bcx-brand-hov:     #FB8F68;
  --bcx-brand-soft:    rgba(237, 119, 76, .14);
  --bcx-brand-line:    rgba(237, 119, 76, .24);
  --bcx-on-brand:      #2D1107;
  --bcx-brand-on-soft: #ED774C;
  --bcx-warn:          #F1D183;
}

/* Rose of Sharon — light */
:root[data-theme="light"][data-palette="rose"]{
  --bcx-brand:         #C43B69;
  --bcx-brand-hov:     #A92D58;
  --bcx-brand-soft:    #FFEAEA;
  --bcx-brand-line:    #FFD2D3;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #C43B69;
  --bcx-warn:          #C43B69;
}
/* Rose of Sharon — dark */
:root[data-theme="dark"][data-palette="rose"]{
  --bcx-brand:         #E57692;
  --bcx-brand-hov:     #F38EA6;
  --bcx-brand-soft:    rgba(229, 118, 146, .14);
  --bcx-brand-line:    rgba(229, 118, 146, .24);
  --bcx-on-brand:      #2D1017;
  --bcx-brand-on-soft: #E57692;
  --bcx-warn:          #F1D183;
}

/* Advent Violet — light */
:root[data-theme="light"][data-palette="advent-violet"]{
  --bcx-brand:         #865AB8;
  --bcx-brand-hov:     #714B9D;
  --bcx-brand-soft:    #F3ECFD;
  --bcx-brand-line:    #E5D8F9;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #865AB8;
  --bcx-warn:          #865AB8;
}
/* Advent Violet — dark */
:root[data-theme="dark"][data-palette="advent-violet"]{
  --bcx-brand:         #AD87E1;
  --bcx-brand-hov:     #BE9DEE;
  --bcx-brand-soft:    rgba(173, 135, 225, .14);
  --bcx-brand-line:    rgba(173, 135, 225, .24);
  --bcx-on-brand:      #1F152C;
  --bcx-brand-on-soft: #AD87E1;
  --bcx-warn:          #F1D183;
}

/* Royal Indigo — light */
:root[data-theme="light"][data-palette="royal-indigo"]{
  --bcx-brand:         #4A4FC0;
  --bcx-brand-hov:     #3B3EA3;
  --bcx-brand-soft:    #EBEFFF;
  --bcx-brand-line:    #D5DDFF;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #4A4FC0;
  --bcx-warn:          #4A4FC0;
}
/* Royal Indigo — dark */
:root[data-theme="dark"][data-palette="royal-indigo"]{
  --bcx-brand:         #A6ABF0;
  --bcx-brand-hov:     #BABFFB;
  --bcx-brand-soft:    rgba(166, 171, 240, .14);
  --bcx-brand-line:    rgba(166, 171, 240, .24);
  --bcx-on-brand:      #18192A;
  --bcx-brand-on-soft: #A6ABF0;
  --bcx-warn:          #F1D183;
}

/* Galilee Blue — light */
:root[data-theme="light"][data-palette="galilee"]{
  --bcx-brand:         #1D5C9E;
  --bcx-brand-hov:     #134A83;
  --bcx-brand-soft:    #E7F1FD;
  --bcx-brand-line:    #CDE1F9;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #1D5C9E;
  --bcx-warn:          #1D5C9E;
}
/* Galilee Blue — dark */
:root[data-theme="dark"][data-palette="galilee"]{
  --bcx-brand:         #78ADE8;
  --bcx-brand-hov:     #92C0F3;
  --bcx-brand-soft:    rgba(120, 173, 232, .14);
  --bcx-brand-line:    rgba(120, 173, 232, .24);
  --bcx-on-brand:      #0E1B2B;
  --bcx-brand-on-soft: #78ADE8;
  --bcx-warn:          #F1D183;
}

/* Cedar — light */
:root[data-theme="light"][data-palette="cedar"]{
  --bcx-brand:         #387C4C;
  --bcx-brand-hov:     #2F673F;
  --bcx-brand-soft:    #E8F3EA;
  --bcx-brand-line:    #D0E5D4;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #387C4C;
  --bcx-warn:          #387C4C;
}
/* Cedar — dark */
:root[data-theme="dark"][data-palette="cedar"]{
  --bcx-brand:         #4DAB64;
  --bcx-brand-hov:     #6BBC7C;
  --bcx-brand-soft:    rgba(77, 171, 100, .14);
  --bcx-brand-line:    rgba(77, 171, 100, .24);
  --bcx-on-brand:      #07210E;
  --bcx-brand-on-soft: #4DAB64;
  --bcx-warn:          #F1D183;
}

/* Olive — light */
:root[data-theme="light"][data-palette="olive"]{
  --bcx-brand:         #70731D;
  --bcx-brand-hov:     #5D6019;
  --bcx-brand-soft:    #F0F1E4;
  --bcx-brand-line:    #DFE1C8;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #70731D;
  --bcx-warn:          #70731D;
}
/* Olive — dark */
:root[data-theme="dark"][data-palette="olive"]{
  --bcx-brand:         #9D9D3A;
  --bcx-brand-hov:     #AFAF5D;
  --bcx-brand-soft:    rgba(157, 157, 58, .14);
  --bcx-brand-line:    rgba(157, 157, 58, .24);
  --bcx-on-brand:      #1C1C03;
  --bcx-brand-on-soft: #9D9D3A;
  --bcx-warn:          #F1D183;
}

/* Sage — light */
:root[data-theme="light"][data-palette="sage"]{
  --bcx-brand:         #566349;
  --bcx-brand-hov:     #47503F;
  --bcx-brand-soft:    #EDF1E9;
  --bcx-brand-line:    #DAE2D2;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #566349;
  --bcx-warn:          #566349;
}
/* Sage — dark */
:root[data-theme="dark"][data-palette="sage"]{
  --bcx-brand:         #A9BC97;
  --bcx-brand-hov:     #BFCDB2;
  --bcx-brand-soft:    rgba(169, 188, 151, .14);
  --bcx-brand-line:    rgba(169, 188, 151, .24);
  --bcx-on-brand:      #181C13;
  --bcx-brand-on-soft: #A9BC97;
  --bcx-warn:          #F1D183;
}

/* Slate — light */
:root[data-theme="light"][data-palette="slate"]{
  --bcx-brand:         #4A5A6A;
  --bcx-brand-hov:     #3F4851;
  --bcx-brand-soft:    #EAF1F8;
  --bcx-brand-line:    #D3E0EE;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #4A5A6A;
  --bcx-warn:          #4A5A6A;
}
/* Slate — dark */
:root[data-theme="dark"][data-palette="slate"]{
  --bcx-brand:         #A7B9CA;
  --bcx-brand-hov:     #C1CBD4;
  --bcx-brand-soft:    rgba(167, 185, 202, .14);
  --bcx-brand-line:    rgba(167, 185, 202, .24);
  --bcx-on-brand:      #171B20;
  --bcx-brand-on-soft: #A7B9CA;
  --bcx-warn:          #F1D183;
}

/* Graphite — light */
:root[data-theme="light"][data-palette="graphite"]{
  --bcx-brand:         #55524E;
  --bcx-brand-hov:     #414141;
  --bcx-brand-soft:    #F5EFE7;
  --bcx-brand-line:    #E8DDCE;
  --bcx-on-brand:      #FFFFFF;
  --bcx-brand-on-soft: #55524E;
  --bcx-warn:          #55524E;
}
/* Graphite — dark */
:root[data-theme="dark"][data-palette="graphite"]{
  --bcx-brand:         #B0AAA2;
  --bcx-brand-hov:     #BEBEBE;
  --bcx-brand-soft:    rgba(176, 170, 162, .14);
  --bcx-brand-line:    rgba(176, 170, 162, .24);
  --bcx-on-brand:      #1C1A18;
  --bcx-brand-on-soft: #B0AAA2;
  --bcx-warn:          #F1D183;
}

/* ---- 1c. No-JS fallback --------------------------------------------------
   The pre-paint script always stamps a concrete data-theme, so this only
   runs when scripting is off. Mode does not need JS; palette does, and with
   palettes now limited to the accent the fallback only has to carry the
   dark grounds and the default clay accent.                                */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --bcx-page:  #161514;
  --bcx-stage: #1B1A18;
  --bcx-card:  #1F1E1C;
  --bcx-well:  #2A2825;
  --bcx-field: #2A2825;

  --bcx-ink:   #F7F5F2;
  --bcx-ink-2: #C7C1B8;
  --bcx-ink-3: #989188;
  --bcx-ink-4: #6B655D;

  --bcx-line:        rgba(247,245,242,.13);
  --bcx-line-strong: rgba(247,245,242,.24);

  --bcx-tint-1: rgba(247,245,242,.045);
  --bcx-tint-2: rgba(247,245,242,.07);
  --bcx-tint-3: rgba(247,245,242,.11);
  --bcx-tint-4: rgba(247,245,242,.17);
  --bcx-tint-5: rgba(247,245,242,.28);

  --bcx-audio: #5EEAD4;  --bcx-audio-soft: rgba(94,234,212,.13);
  --bcx-video: #C4B5FD;  --bcx-video-soft: rgba(196,181,253,.13);
  --bcx-radio: #FDA4AF;  --bcx-radio-soft: rgba(253,164,175,.13);
  --bcx-sched: #6EE7B7;  --bcx-sched-soft: rgba(110,231,183,.13);

  --bcx-live:    #F1412A;
  --bcx-live-bg: rgba(241,65,42,.13);
  --bcx-on-live: #2A0F0C;
  --bcx-ok:      #8FD44A;
  --bcx-info:    #5AA8DC;
  --bcx-brand:         #E28B52;
  --bcx-brand-hov:     #F0A171;
  --bcx-brand-soft:    rgba(226,139,82,.14);
  --bcx-brand-line:    rgba(226,139,82,.24);
  --bcx-on-brand:      #2A1405;
  --bcx-brand-on-soft: #E28B52;
  --bcx-warn:          #F1D183;
  }
}

/* ==========================================================================
   2. REBIND THE LEGACY TOKENS
   This is what makes the whole existing theme follow the chosen palette
   without touching a single existing component rule.
   ========================================================================== */
:root{
  --color-bg:          var(--bcx-page);
  --color-bg-alt:      var(--bcx-stage);
  --color-bg-muted:    var(--bcx-well);
  --color-text:        var(--bcx-ink);
  --color-text-strong: var(--bcx-ink);
  --color-text-muted:  var(--bcx-ink-2);
  --color-text-subtle: var(--bcx-ink-3);
  --color-border:      var(--bcx-line);
  --color-border-strong: var(--bcx-line-strong);
  --color-primary:     var(--bcx-brand);
  --color-accent:      var(--bcx-brand);
  --color-accent-hover:var(--bcx-brand-hov);
  --color-on-accent:   var(--bcx-on-brand);
  --color-text-on-accent: var(--bcx-on-brand);
  --color-link:        var(--bcx-ink);
  --color-focus:       var(--bcx-brand);
  --color-live:        var(--bcx-live);

  /* "cream" is a legacy name used 14 times; the house rule bars cream, so it
     is bound to the warm stone stage colour instead of an actual cream. */
  --color-cream:       var(--bcx-stage);

  --color-surface-1:   var(--bcx-stage);
  --color-surface-2:   var(--bcx-card);
  --color-surface-3:   var(--bcx-stage);

  --card-bg:           var(--bcx-card);
  --card-border:       var(--bcx-line);
  --input-bg:          var(--bcx-field);
  --input-border:      var(--bcx-line-strong);
  --inset-bg:          var(--bcx-well);
  --stage-bg:          var(--bcx-stage);
  --header-bg:         var(--bcx-page);
  --header-border:     var(--bcx-line);
  --footer-bg:         var(--bcx-stage);
  --footer-border:     var(--bcx-line);

  --tint-1: var(--bcx-tint-1);
  --tint-2: var(--bcx-tint-2);
  --tint-3: var(--bcx-tint-3);
  --tint-4: var(--bcx-tint-4);
  --tint-5: var(--bcx-tint-5);

  --color-success: var(--bcx-ok);
  --color-warning: var(--bcx-warn);
  --color-error:   var(--bcx-live);

  --shadow-1: var(--bcx-shadow-press);
  --shadow-2: var(--bcx-shadow-float);
  --shadow-3: var(--bcx-shadow-card);
  --shadow-card:  var(--bcx-shadow-card);
  --shadow-float: var(--bcx-shadow-float);
  --shadow-press: var(--bcx-shadow-press);

  /* the audio player reads its own accent + surface */
  --eap-accent: var(--bcx-brand);
}

html{background:var(--bcx-page)}
body{
  background: var(--bcx-page);
  color: var(--bcx-ink);
  transition: background .4s var(--bcx-ease), color .4s var(--bcx-ease);
}

/* ==========================================================================
   3. SHARED PRIMITIVES
   ========================================================================== */
.bcx-micro{
  font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bcx-ink-3);
}
.bcx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* A visible focus ring on EVERYTHING. The shipped dark-mode ring resolved to
   an invisible colour on the front page; this one cannot. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--bcx-brand) !important;
  outline-offset:3px !important;
  border-radius:8px;
}

/* Skip link — every template already ships the #main-content target but no
   template ever emitted a link to it. */
.bcx-skip{
  position:absolute;left:12px;top:-64px;z-index:1000;padding:11px 18px;border-radius:11px;
  background:var(--bcx-brand);color:var(--bcx-on-brand);font-size:.85rem;font-weight:700;
  text-decoration:none;transition:top .25s var(--bcx-ease);
}
.bcx-skip:focus{top:12px}

/* ---- entrance: OPT-IN ONLY ----------------------------------------------
   Hiding is gated on .bcx-armed, which the same script that un-hides adds as
   its first statement, plus an unconditional watchdog. If the script never
   runs or throws, the content is simply visible. This has shipped broken
   twice in this family; it does not get to happen again.                    */
.bcx-armed .bcx-in{opacity:0;transform:translateY(14px)}
.bcx-armed .bcx-in.is-in{
  opacity:1;transform:none;
  transition:opacity .65s var(--bcx-ease),transform .65s var(--bcx-ease);
}

/* ==========================================================================
   4. PREFERENCES PANEL (mode · palette · player)
   ========================================================================== */
.bcx-prefs{position:relative}
.bcx-prefs__pop{
  position:absolute;right:0;top:calc(100% + 10px);width:290px;padding:14px;
  background:var(--bcx-card);border:1px solid var(--bcx-line);border-radius:16px;
  box-shadow:var(--bcx-shadow-card);z-index:200;
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transform-origin:top right;
  transition:opacity .22s ease,transform .3s var(--bcx-spring);
}
.bcx-prefs__pop.is-open{opacity:1;transform:none;pointer-events:auto}
.bcx-prefs__grp + .bcx-prefs__grp{margin-top:14px}
.bcx-prefs__lab{display:block;margin-bottom:7px}
.bcx-seg{
  display:flex;gap:3px;padding:3px;border-radius:999px;
  background:var(--bcx-field);border:1px solid var(--bcx-line);
}
.bcx-seg button{
  flex:1;min-width:0;border:0;background:transparent;color:var(--bcx-ink-2);
  font:inherit;font-size:.74rem;font-weight:700;padding:7px 6px;border-radius:999px;cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .2s var(--bcx-spring);
  white-space:nowrap;
}
.bcx-seg button:hover{color:var(--bcx-ink);background:var(--bcx-tint-2)}
.bcx-seg button:active{transform:scale(.95)}
.bcx-seg button[aria-checked="true"]{background:var(--bcx-brand);color:var(--bcx-on-brand)}

/* palette options show the actual colours rather than naming them */
/* v1.4.0 — eleven swatches instead of three. Two columns keeps the panel
   the width it has always been; the list scrolls rather than the panel
   growing past the viewport on a short screen. */
.bcx-pal{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:min(46vh,340px);overflow-y:auto;padding-right:2px}
.bcx-pal button{
  border:1px solid var(--bcx-line);background:var(--bcx-well);border-radius:12px;
  padding:8px 6px 7px;cursor:pointer;color:var(--bcx-ink-2);
  font:inherit;font-size:.62rem;font-weight:700;
  transition:border-color .25s ease,transform .25s var(--bcx-ease),background .25s;
}
.bcx-pal button:hover{transform:translateY(-2px);border-color:var(--bcx-line-strong)}
.bcx-pal button[aria-checked="true"]{border-color:var(--bcx-brand);background:var(--bcx-brand-soft);color:var(--bcx-ink)}
.bcx-pal .sw{display:flex;gap:3px;justify-content:center;margin-bottom:6px}
.bcx-pal .sw i{width:11px;height:11px;border-radius:50%;display:block}

.bcx-prefs__note{
  margin:12px 0 0;font-size:.68rem;color:var(--bcx-ink-3);line-height:1.5;
  padding-top:10px;border-top:1px solid var(--bcx-tint-2);
}

/* ==========================================================================
   5. CHROME REPAIRS
   ========================================================================== */

/* 5a. The language popover shipped emoji flags. Windows has no regional
   indicator glyphs, so they render as bare letter pairs for most of this
   audience — and the icon standard bars emoji outright. Text codes instead. */
.nav-lang-pop .flag{
  display:inline-grid;place-items:center;flex:none;
  width:30px;height:21px;border-radius:5px;
  background:var(--bcx-tint-2);color:var(--bcx-ink-2);
  font-size:.57rem;font-weight:800;letter-spacing:.05em;font-style:normal;
}
.nav-lang-pop button[aria-current="true"] .flag{background:var(--bcx-brand-soft);color:var(--bcx-brand)}
.nav-lang-pop button{display:flex;align-items:center;gap:10px}

/* 5b. Three shipped rules paint text on a near-identical background
   (#1A1A1A on #262626 ≈ 1.15:1). Repaint them as a proper accent wash. */
.eyebrow,
.bc-prelive__eyebrow{
  background:var(--bcx-brand-soft) !important;
  color:var(--bcx-brand-on-soft) !important;
  border:1px solid var(--bcx-brand-line);
}
.mobile-nav__main{
  background:var(--bcx-brand) !important;
  color:var(--bcx-on-brand) !important;
}

/* 5c. Footer legal links were white on near-white in light mode. */
.site-footer,
.site-footer p,
.site-footer a,
.site-footer__bottom,
.site-footer__bottom a{ color:var(--bcx-ink-2) !important; }
.site-footer a:hover,
.site-footer__bottom a:hover{ color:var(--bcx-brand) !important; }
.site-footer h5,.site-footer strong{ color:var(--bcx-ink) !important; }

/* 5d. The "Main Site" pill lost its accessible name between 431 and 980px
   because the label was display:none. Keep it readable by assistive tech. */
@media (max-width:980px){
  .nav-back-link span{
    position:absolute !important;width:1px !important;height:1px !important;
    overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;
  }
  .nav-back-link{width:auto !important;padding:8px 11px !important}
}

/* 5e. Without JS all three theme-toggle glyphs stacked on top of each other.
   Show only the moon until the script resolves a mode. */
.nav-icon-btn[data-egw-theme-toggle] .ico-sun,
.nav-icon-btn[data-egw-theme-toggle] .ico-system{display:none}
:root[data-theme-mode="light"] .nav-icon-btn[data-egw-theme-toggle] .ico-sun{display:block}
:root[data-theme-mode="light"] .nav-icon-btn[data-egw-theme-toggle] .ico-moon{display:none}
:root[data-theme-mode="system"] .nav-icon-btn[data-egw-theme-toggle] .ico-system{display:block}
:root[data-theme-mode="system"] .nav-icon-btn[data-egw-theme-toggle] .ico-moon{display:none}

/* 5e-2. REAL MOBILE BUG, introduced by this layer. The preferences button is
   a FIFTH control in a nav row that only just fitted four: at 375px the
   hamburger was pushed to x=403 in a 375px viewport and clipped, so the menu
   became completely unreachable on a phone. Below 860px two controls are
   therefore dropped from the row — neither loses a capability:
     - "Main Site" is already the last item inside the drawer;
     - the standalone theme toggle is redundant now that the preferences
       panel owns Appearance (System / Light / Dark).
   The nav is also allowed to shrink rather than overflow, so a longer site
   title cannot reintroduce this. */
@media (max-width:860px){
  .nav-back-link{display:none !important}
  .nav-icon-btn[data-egw-theme-toggle]{display:none}
}
.nav-inner,.nav-actions,.nav-logo,.nav-logo__label{min-width:0}
.nav-actions{flex:0 0 auto}

/* 5f. REAL MOBILE BUG. global.css hides .nav-links under
   @media (max-width:980px), but egw-console.css re-declares
   ".nav-links{display:flex}" with NO media query and loads after it. Media
   queries add no specificity, so source order wins: every phone rendered the
   full desktop link row AND the hamburger, stacked. This layer loads last. */
@media (max-width:980px){
  .nav-links{display:none}
}

/* Without JS the nav collapsed to a hamburger that could never open, so
   the whole site became unreachable. Fall back to visible links — the
   !important here beats the media rule directly above, which is the point. */
.no-js .nav-links{display:flex !important;flex-wrap:wrap}
.no-js .nav-hamburger{display:none !important}

/* 5g. The peek carousel dims its off-centre cards, which only makes sense
   once the script can re-centre them. With scripting off, show them all. */
.no-js .bcx-peek__card{opacity:1;transform:none}

/* 5h. Logo swap must not depend on the script having run. */
.no-js .logo-dark{display:none}

/* ==========================================================================
   6. LANDING — sections
   ========================================================================== */
/* ---- ONE CONTAINER CONTRACT, EDGE TO EDGE -------------------------------
   Three bugs are fixed here.

   1. ALIGNMENT. .bcx-shell had no inline padding while the theme's .container
      carries clamp(16px,4vw,32px), so every section this layer adds sat 32px
      out of line with the hero, the tiles and the platform intro. They now
      share one gutter, so all of them agree.

   2. EDGE TO EDGE. The page was capped at 1200px, which left ~200px of dead
      margin each side at 1600px and much more beyond. The landing page now
      fills the window; the gutter grows on very wide displays so text never
      runs to the bezel.

   3. SECTION PADDING. `.broadcast-page section` has specificity (0,1,1) and
      beat `.bcx-sec--tight` (0,1,0), so every "tight" section rendered 88px
      of top padding instead of 0 and the gaps were doubled. Scoping to
      `.broadcast-page` makes these (0,2,0) and they win.
   -------------------------------------------------------------------------- */
:root{ --bcx-gutter: clamp(16px, 4vw, 120px); }

.bcx-shell{width:100%;margin-inline:auto;padding-inline:var(--bcx-gutter)}

.broadcast-page .container,
.broadcast-page .bcx-shell,
.broadcast-page .nav-inner,
.broadcast-page .site-footer__inner,
.broadcast-page .site-footer__bottom,
.broadcast-page .site-footer__social-inner{
  width:100%;
  max-width:none;
  margin-inline:auto;
  padding-inline:var(--bcx-gutter);
}

.broadcast-page .bcx-sec{padding-block:clamp(2rem,4vw + 1rem,4rem)}
.broadcast-page .bcx-sec--tight{padding-top:0}
.bcx-sec{padding-block:clamp(2rem,4vw + 1rem,4rem)}
.bcx-sec--tight{padding-top:0}

/* With the hero full-width and no live broadcast to put beside it, the copy
   would otherwise run the whole window. Hold it to a readable measure. */
.bc-landing-hero:not(.bcx-hero--split) .bcx-hero__copy{max-width:72ch;margin-inline:auto}

.bcx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.bcx-head h2{margin:6px 0 0;font-size:clamp(1.4rem,1.1rem + 1.3vw,2.05rem);font-weight:800;letter-spacing:-.025em;line-height:1.16}
.bcx-head h3{margin:5px 0 0;font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.bcx-all{
  display:inline-flex;align-items:center;gap:5px;font-size:.77rem;font-weight:700;
  color:var(--bcx-brand);text-decoration:none;
}
.bcx-all svg{width:13px;height:13px;transition:transform .3s var(--bcx-ease)}
.bcx-all:hover svg{transform:translateX(3px)}

/* ---- 6a. "Today" peek carousel ---- */
/* One variable drives both the card width and the centring padding, so they
   cannot drift apart. Previously flex-basis asked for 600px while max-width
   clamped it to 520px, and the padding still centred for 600. */
/* v1.5.1 — --peek-n is how many WHOLE cards are shown at once. The card
   width is derived from it, so a card is never partly in view and the set
   never needs the half-viewport side padding that pushed it off centre. */
.bcx-peek{position:relative;--peek-n:3;--peek-gap:16px}
@media(max-width:1180px){ .bcx-peek{--peek-n:2} }
@media(max-width:720px){  .bcx-peek{--peek-n:1} }
@media(min-width:1560px){ .bcx-peek{--peek-n:4} }
.bcx-peek__track{
  display:flex;gap:var(--peek-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 14px;
  /* centre a set that fits; `safe` keeps the start reachable when it does
     not, which plain `center` on a scroll container does not. */
  justify-content:center;
  justify-content:safe center;
  scrollbar-width:none;-ms-overflow-style:none;
}
.bcx-peek__track::-webkit-scrollbar{display:none}
.bcx-peek__card{
  scroll-snap-align:start;
  flex:0 0 calc((100% - (var(--peek-n) - 1) * var(--peek-gap)) / var(--peek-n));
  position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  border:1px solid var(--bcx-line);display:flex;align-items:flex-end;
  text-decoration:none;
  background:linear-gradient(150deg,var(--hue,var(--bcx-brand)),color-mix(in srgb,var(--hue,var(--bcx-brand)) 38%,var(--bcx-shade)));
  /* v1.5.1 — no dimming and no shrinking. Every card is fully in view, so
     presenting the neighbours as half-there was describing a layout that no
     longer exists. */
  transition:transform .35s var(--bcx-ease),box-shadow .35s ease,border-color .35s ease;
}
.bcx-peek__card:hover{transform:translateY(-3px);box-shadow:var(--bcx-shadow-float)}
.bcx-peek__card.is-mid{box-shadow:var(--bcx-shadow-card)}
.bcx-peek__card[data-ch="audio"]{--hue:var(--bcx-audio)}
.bcx-peek__card[data-ch="video"]{--hue:var(--bcx-video)}
.bcx-peek__card[data-ch="radio"]{--hue:var(--bcx-radio)}
.bcx-peek__card[data-ch="sched"]{--hue:var(--bcx-sched)}
.bcx-peek__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bcx-peek__veil{position:absolute;inset:0;background:var(--bcx-veil)}
.bcx-peek__badge{
  position:absolute;top:14px;right:14px;z-index:2;padding:5px 10px;border-radius:9px;
  background:var(--bcx-media-chip);backdrop-filter:blur(8px);border:1px solid var(--bcx-media-chip-br);
  color:var(--bcx-on-media);font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.bcx-peek__body{position:relative;z-index:2;padding:22px;color:var(--bcx-on-media);width:100%}
.bcx-peek__body h3{margin:0 0 6px;font-size:clamp(1.02rem,.9rem + .7vw,1.45rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.22;color:var(--bcx-on-media);
  /* clamped so a long title cannot grow up into the absolutely-positioned
     channel badge on a narrow card — it collided at 375px. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  padding-right:5.5rem}
.bcx-peek__meta{font-size:.78rem;opacity:.88;margin:0 0 14px;color:var(--bcx-on-media)}
.bcx-peek__go{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;
  background:var(--bcx-media-pill);color:var(--bcx-on-media-ink);border:0;font-size:.8rem;font-weight:700;
  transition:transform .25s var(--bcx-ease),background .25s;
}
.bcx-peek__card:hover .bcx-peek__go{transform:translateY(-2px);background:var(--bcx-on-media)}
.bcx-peek__go svg{width:14px;height:14px}
.bcx-navbtn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--bcx-line-strong);
  background:var(--bcx-card);color:var(--bcx-ink);display:grid;place-items:center;cursor:pointer;
  transition:transform .25s var(--bcx-spring),background .25s,border-color .25s;
}
.bcx-navbtn:hover{transform:scale(1.08);border-color:var(--bcx-brand);background:var(--bcx-brand-soft)}
.bcx-navbtn svg{width:15px;height:15px}
.bcx-peek__dots{display:flex;gap:6px;justify-content:center;margin-top:4px}
.bcx-peek__dots i{width:7px;height:7px;border-radius:50%;background:var(--bcx-tint-3);transition:width .3s var(--bcx-ease),background .3s}
.bcx-peek__dots i.is-on{width:22px;border-radius:4px;background:var(--bcx-brand)}

/* ---- 6b. theme chips ---- */
.bcx-chips{display:flex;gap:8px;flex-wrap:wrap}
.bcx-chip{
  padding:7px 14px;border-radius:999px;border:1px solid var(--bcx-line-strong);
  background:var(--bcx-card);color:var(--bcx-ink-2);font:inherit;font-size:.79rem;font-weight:600;
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .25s var(--bcx-ease),color .25s,border-color .25s,background .25s;
}
.bcx-chip:hover{transform:translateY(-2px);color:var(--bcx-brand);border-color:var(--bcx-brand);background:var(--bcx-brand-soft)}
.bcx-chip[aria-pressed="true"]{background:var(--bcx-brand);border-color:var(--bcx-brand);color:var(--bcx-on-brand)}

/* ---- 6c. editorial rail ---- */
.bcx-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:none}
.bcx-rail::-webkit-scrollbar{display:none}
.bcx-rcard{
  scroll-snap-align:start;flex:0 0 224px;background:var(--bcx-card);
  border:1px solid var(--bcx-line);border-radius:16px;overflow:hidden;text-decoration:none;
  color:var(--bcx-ink);
  /* v1.2.8 — a column, so the artwork keeps its square and the body
     takes the rest. The rail stretches every card to the tallest; with
     the body reserving two title lines they now match exactly. */
  display:flex;flex-direction:column;
  transition:transform .3s var(--bcx-ease),border-color .3s,box-shadow .3s;
}
.bcx-rcard:hover{transform:translateY(-4px);border-color:var(--hue,var(--bcx-brand));box-shadow:var(--bcx-shadow-float)}
.bcx-rcard[data-ch="audio"]{--hue:var(--bcx-audio)}
.bcx-rcard[data-ch="video"]{--hue:var(--bcx-video)}
.bcx-rcard[data-ch="radio"]{--hue:var(--bcx-radio)}
.bcx-rcard[data-ch="sched"]{--hue:var(--bcx-sched)}
.bcx-rcard__art{
  position:relative;aspect-ratio:1;flex:none;display:grid;place-items:center;color:var(--bcx-on-media);overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--hue,var(--bcx-brand)) 62%,transparent),color-mix(in srgb,var(--hue,var(--bcx-brand)) 22%,transparent));
}
.bcx-rcard__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bcx-rcard__art > svg{width:34px;height:34px;opacity:.85;position:relative}
.bcx-rcard__dur{
  position:absolute;bottom:8px;right:8px;padding:3px 7px;border-radius:6px;
  background:var(--bcx-media-dur);color:var(--bcx-on-media);font-size:.6rem;font-weight:700;
}
/* v1.2.8 — this is a <span>, and the rule used to set padding alone, so it
   stayed display:inline: vertical padding on an inline box paints without
   reserving any layout, and the two block children turned it into a
   block-in-inline. That is where the 44px of empty card came from. */
.bcx-rcard__b{
  display:flex;flex-direction:column;gap:5px;
  flex:1 1 auto;min-height:0;
  padding:13px 13px 15px;
}
.bcx-rcard__b b{font-size:.85rem;font-weight:700;line-height:1.3;
  /* both lines are reserved whether or not the title needs them, so a
     one-line card is exactly as tall as a two-line one and the meta sits
     on the same baseline right across the rail */
  min-height:calc(2 * 1.3em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcx-rcard__b span{display:block;font-size:.72rem;color:var(--bcx-ink-3);margin-top:auto}

/* ---- 6d. weekly schedule grid ---- */
.bcx-week{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px}
.bcx-day{background:var(--bcx-card);border:1px solid var(--bcx-line);border-radius:14px;padding:12px;min-width:0}
.bcx-day.is-today{border-color:var(--bcx-brand);box-shadow:inset 0 0 0 1px var(--bcx-brand)}
.bcx-day__h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px}
.bcx-day__h b{font-size:.8rem;font-weight:800;letter-spacing:-.01em}
.bcx-day__now{font-size:.53rem;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:999px;
  background:var(--bcx-brand);color:var(--bcx-on-brand)}
.bcx-slot{padding:8px 0;border-top:1px solid var(--bcx-tint-2)}
.bcx-slot:first-of-type{border-top:0}
.bcx-slot b{display:block;font-size:.76rem;font-weight:700;line-height:1.3}
.bcx-slot .who{display:block;font-size:.68rem;color:var(--bcx-brand);font-weight:600;margin-top:2px}
.bcx-slot .when{display:block;font-size:.66rem;color:var(--bcx-ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
.bcx-slot.is-on{
  background:var(--bcx-tint-1);margin-inline:-6px;padding-inline:8px;border-radius:8px;
  border-top-color:transparent;box-shadow:inset 2px 0 0 var(--bcx-brand);
}

/* ---- 6e. local gathering ---- */
.bcx-local{
  display:flex;align-items:center;gap:16px;padding:20px;border-radius:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--bcx-brand-soft),transparent 70%),var(--bcx-card);
  border:1px solid var(--bcx-brand-line);
}
.bcx-local__ic{width:52px;height:52px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:var(--bcx-brand);color:var(--bcx-on-brand)}
.bcx-local__ic svg{width:25px;height:25px}
.bcx-local__t{flex:1;min-width:200px}
.bcx-local__t b{display:block;font-size:1rem;font-weight:700}
.bcx-local__t span{display:block;font-size:.82rem;color:var(--bcx-ink-2);margin-top:2px}
.bcx-local select{
  padding:11px 14px;border-radius:11px;border:1px solid var(--bcx-line-strong);
  background:var(--bcx-field);color:var(--bcx-ink);font:inherit;font-size:.83rem;font-weight:600;cursor:pointer;
}

/* ---- 6f. empty state ----
   The landing page is rendered server-side, so it has no loading or error
   state to be in; the demo's skeleton/error styles were a demo affordance for
   inspecting states and are deliberately not shipped. This one IS reachable:
   it shows when the library is empty. */
.bcx-empty{text-align:center;padding:38px 22px;border-radius:16px;
  border:1px dashed var(--bcx-line-strong);background:var(--bcx-card)}
.bcx-empty__ic{width:60px;height:60px;border-radius:17px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--bcx-sched-soft);color:var(--bcx-sched)}
.bcx-empty__ic svg{width:28px;height:28px}
.bcx-empty h4{margin:0 0 6px;font-size:1rem;font-weight:700}
.bcx-empty p{margin:0 auto 18px;font-size:.85rem;color:var(--bcx-ink-2);max-width:42ch}

/* ---- 6g. hero: aurora backdrop + on-air stage card ---- */
.bc-landing-hero{position:relative;overflow:hidden}
/* v1.2.8 — the flyer, mirrored and blurred, as the hero's backdrop. The
   veil over it is page-coloured, so the headline keeps the contrast it was
   designed with no matter what artwork is on air. */
.bcx-hero__wash{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bcx-hero__wash img{
  position:absolute;left:-15%;top:-15%;width:130%;height:130%;
  object-fit:cover;object-position:center;
  transform:scaleX(-1);
  filter:blur(72px) saturate(1.5);
  opacity:.62;
}
.bcx-hero__wash::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bcx-page) 58%, transparent) 0%,
    color-mix(in srgb, var(--bcx-page) 74%, transparent) 46%,
    color-mix(in srgb, var(--bcx-page) 92%, transparent) 82%,
    var(--bcx-page) 100%);
}
:root[data-theme="dark"] .bcx-hero__wash img{opacity:.42;filter:blur(78px) saturate(1.25)}
/* with the flyer supplying the colour, the drifting blobs only muddy it */
.bcx-aurora.is-quiet{opacity:.32}
@media(max-width:640px){
  /* a 72px blur over a full-bleed image is the most expensive paint on the
     page; phones get the gradient hero they had before */
  .bcx-hero__wash{display:none}
  .bcx-aurora.is-quiet{opacity:1}
}
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .bcx-hero__wash img{opacity:.3}
  .bcx-hero__wash::after{background:linear-gradient(180deg,transparent 0%,var(--bcx-page) 92%)}
}
.bcx-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bcx-aurora i{
  position:absolute;width:clamp(240px,36vw,440px);aspect-ratio:1;border-radius:50%;
  filter:blur(70px);opacity:.28;will-change:transform;display:block;
}
.bcx-aurora i:nth-child(1){background:var(--bcx-video);left:-6%;top:-20%;animation:bcxDrift1 19s var(--bcx-ease) infinite}
.bcx-aurora i:nth-child(2){background:var(--bcx-brand);right:-8%;top:-12%;animation:bcxDrift2 23s var(--bcx-ease) infinite}
.bcx-aurora i:nth-child(3){background:var(--bcx-audio);left:34%;bottom:-34%;animation:bcxDrift3 17s var(--bcx-ease) infinite}
@keyframes bcxDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(52px,32px) scale(1.14)}}
@keyframes bcxDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-42px,40px) scale(1.1)}}
@keyframes bcxDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-36px) scale(1.16)}}
.bc-landing-hero > .container{position:relative;z-index:1}

.bcx-hero__grid{display:block}
.bcx-hero--split .bcx-hero__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.25rem);align-items:center;text-align:left;
}
.bcx-hero--split .bcx-hero__copy .bc-landing-hero__lead{margin-inline:0}
.bcx-hero--split .bcx-hero__copy .bc-landing-hero__cta{justify-content:flex-start}

.bcx-stage{
  --hue:var(--bcx-video);
  display:block;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--bcx-ink);
  background:var(--bcx-card);border:1px solid var(--bcx-line);box-shadow:var(--bcx-shadow-card);
  transition:transform .3s var(--bcx-ease),border-color .3s ease,box-shadow .3s ease;
}
.bcx-stage[data-ch="audio"]{--hue:var(--bcx-audio)}
.bcx-stage[data-ch="radio"]{--hue:var(--bcx-radio)}
.bcx-stage:hover{transform:translateY(-4px);border-color:var(--hue);box-shadow:var(--bcx-shadow-float)}
.bcx-stage__screen{
  position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(150deg,var(--hue),color-mix(in srgb,var(--hue) 38%,var(--bcx-shade)));
}
.bcx-stage__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bcx-stage__badge{
  position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--radius-pill,999px);
  background:var(--bcx-live);color:var(--bcx-on-live);
  font-size:.6rem;font-weight:800;letter-spacing:.09em;
}
.bcx-stage__badge .pip{width:6px;height:6px;border-radius:50%;background:currentColor;animation:bcxBlink 1.4s infinite}
.bcx-stage__badge--next{background:var(--bcx-media-chip);color:var(--bcx-on-media);backdrop-filter:blur(8px)}
.bcx-stage__chip{
  position:absolute;top:12px;right:12px;z-index:2;padding:5px 10px;border-radius:9px;
  background:var(--bcx-media-chip);backdrop-filter:blur(8px);border:1px solid var(--bcx-media-chip-br);
  color:var(--bcx-on-media);font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.bcx-eq{display:flex;align-items:flex-end;gap:5px;height:62px;position:relative;z-index:1}
.bcx-eq i{
  display:block;width:7px;border-radius:4px;background:var(--bcx-on-media);opacity:.9;
  transform-origin:bottom;animation:bcxEq 1.1s var(--bcx-ease) infinite alternate;
}
.bcx-eq i:nth-child(1){height:20px;animation-delay:0s}
.bcx-eq i:nth-child(2){height:42px;animation-delay:.12s}
.bcx-eq i:nth-child(3){height:60px;animation-delay:.24s}
.bcx-eq i:nth-child(4){height:32px;animation-delay:.36s}
.bcx-eq i:nth-child(5){height:50px;animation-delay:.48s}
.bcx-eq i:nth-child(6){height:24px;animation-delay:.60s}
.bcx-eq i:nth-child(7){height:44px;animation-delay:.72s}
@keyframes bcxEq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

.bcx-stage__bar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--bcx-line)}
.bcx-stage__go{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--bcx-brand);color:var(--bcx-on-brand);box-shadow:0 6px 18px -8px var(--bcx-brand-line);
  transition:transform .3s var(--bcx-spring);
}
.bcx-stage:hover .bcx-stage__go{transform:scale(1.08)}
.bcx-stage__go svg{width:17px;height:17px}
.bcx-stage__meta{min-width:0}
.bcx-stage__meta b{display:block;font-size:.9rem;font-weight:700;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.bcx-stage__meta span{display:block;font-size:.74rem;color:var(--bcx-ink-2);margin-top:2px}

/* ---- 6h. credibility strip ---- */
.bcx-trust{padding:clamp(1.25rem,3vw,2.25rem) 0}
/* auto-fit, not repeat(4,1fr): with fewer than four stats a fixed four-column
   track left the tiles bunched at the left with dead columns beside them. */
.bcx-trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.bcx-stat{
  background:var(--bcx-card);border:1px solid var(--bcx-line);border-radius:14px;padding:16px 18px;
  transition:transform .3s var(--bcx-ease),border-color .3s ease,box-shadow .3s ease;
}
.bcx-stat:hover{transform:translateY(-3px);border-color:var(--bcx-brand-line);box-shadow:var(--bcx-shadow-float)}
.bcx-stat__v{font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.bcx-stat__k{margin-top:4px}

/* ---- 6i. channel tiles: identity colour, spotlight, icon spring ---- */
.bcx-tile{--hue:var(--bcx-brand);--hue-soft:var(--bcx-brand-soft);position:relative;overflow:hidden}
.bcx-tile[data-ch="audio"]{--hue:var(--bcx-audio);--hue-soft:var(--bcx-audio-soft)}
.bcx-tile[data-ch="video"]{--hue:var(--bcx-video);--hue-soft:var(--bcx-video-soft)}
.bcx-tile[data-ch="radio"]{--hue:var(--bcx-radio);--hue-soft:var(--bcx-radio-soft)}
.bcx-tile[data-ch="sched"]{--hue:var(--bcx-sched);--hue-soft:var(--bcx-sched-soft)}
.bcx-tile{transition:transform .3s var(--bcx-ease),border-color .3s ease,box-shadow .3s ease}
.bcx-tile:hover{transform:translateY(-4px) scale(1.012);border-color:var(--hue);box-shadow:var(--bcx-shadow-float)}
.bcx-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--hue) 15%,transparent),transparent 64%);
}
.bcx-tile:hover::after{opacity:1}
.bcx-tile .bc-tile__icon{
  background:var(--hue-soft);color:var(--hue);
  transition:transform .35s var(--bcx-spring),background .3s ease,color .3s ease;
}
.bcx-tile:hover .bc-tile__icon{transform:scale(1.1) rotate(-5deg)}
.bcx-tile .bc-tile__cta{color:var(--hue)}
.bcx-tile > *{position:relative;z-index:1}

/* ---- 6j. footer grid ---- */
.bcx-foot__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}

/* ==========================================================================
   7. PERSISTENT LIVE PLAYER — one markup, three shapes
   ========================================================================== */
/* v1.2.8 — --bcx-rail-w is read by both the rail itself and the page
   offset, so the two can no longer drift apart. --bcx-lp-top is how far
   down the fixed site header pushes anything pinned to the top. */
:root{
  --bcx-rail-w:288px;
  --bcx-lp-top:calc(var(--nav-height, 72px) + env(safe-area-inset-top, 0px));
}
body.egw-hide-site-header{ --bcx-lp-top:0px; }
.bcx-lp{
  position:fixed;z-index:46;background:var(--bcx-card);border:1px solid var(--bcx-line);
  box-shadow:var(--bcx-shadow-card);
  transition:transform .45s var(--bcx-ease),opacity .3s ease;
}
.bcx-lp.is-hidden{opacity:0;pointer-events:none}
.bcx-lp__art{
  position:relative;border-radius:12px;overflow:hidden;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--bcx-video),color-mix(in srgb,var(--bcx-video) 38%,var(--bcx-shade)));
  color:var(--bcx-on-media);
}
.bcx-lp__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bcx-lp__art > svg{width:40%;height:40%;opacity:.9}
.bcx-lp__onair{display:flex;align-items:center;gap:7px}
.bcx-lp__onair .pip{width:7px;height:7px;border-radius:50%;background:var(--bcx-live);flex:none;animation:bcxBlink 1.4s infinite}
@keyframes bcxBlink{0%,100%{opacity:1}50%{opacity:.25}}
.bcx-lp__onair b{font-size:.57rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bcx-live)}
.bcx-lp__title{font-size:.88rem;font-weight:700;line-height:1.25;margin:6px 0 1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcx-lp__host{font-size:.73rem;color:var(--bcx-ink-2)}
.bcx-lp__host em{font-style:normal;color:var(--bcx-brand);font-weight:600}
.bcx-lp__ctrls{display:flex;align-items:center;gap:10px}
.bcx-lp__play{
  width:40px;height:40px;border-radius:50%;flex:none;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--bcx-brand);color:var(--bcx-on-brand);
  box-shadow:0 6px 18px -8px var(--bcx-brand-line);
  transition:transform .3s var(--bcx-spring),box-shadow .3s ease;
}
.bcx-lp__play:hover{transform:scale(1.08)}
.bcx-lp__play:active{transform:scale(.93)}
.bcx-lp__play svg{width:17px;height:17px}
.bcx-lp__play .i-pause{display:none}
.bcx-lp__play[aria-pressed="true"] .i-play{display:none}
.bcx-lp__play[aria-pressed="true"] .i-pause{display:block}
.bcx-lp__vol{-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:var(--bcx-tint-3);cursor:pointer}
.bcx-lp__vol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--bcx-brand);box-shadow:var(--bcx-shadow-press);cursor:pointer}
.bcx-lp__vol::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--bcx-brand);cursor:pointer}
/* A live listener count needs a real source; the plugin exposes none, so
   the player does not render one rather than inventing a figure. */
.bcx-lp__x{width:26px;height:26px;border-radius:8px;border:0;background:transparent;color:var(--bcx-ink-3);
  cursor:pointer;display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.bcx-lp__x:hover{background:var(--bcx-tint-2);color:var(--bcx-ink)}
.bcx-lp__x svg{width:14px;height:14px}

/* ---- v1.2.8 transport ---- */
.bcx-lp__seekwrap{width:100%}
.bcx-lp__seekwrap[hidden],.bcx-lp__liveline[hidden]{display:none}
.bcx-lp__seek{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;cursor:pointer;
  background:linear-gradient(to right,
    var(--bcx-brand) 0%, var(--bcx-brand) var(--bcx-seek,0%),
    var(--bcx-tint-3) var(--bcx-seek,0%), var(--bcx-tint-3) 100%);
}
.bcx-lp__seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--bcx-brand);border:2px solid var(--bcx-card);cursor:pointer}
.bcx-lp__seek::-moz-range-thumb{width:13px;height:13px;border:2px solid var(--bcx-card);border-radius:50%;
  background:var(--bcx-brand);cursor:pointer}
.bcx-lp__times{display:flex;justify-content:space-between;margin-top:5px;
  font-size:.66rem;font-variant-numeric:tabular-nums;color:var(--bcx-ink-3)}
/* v1.2.9 — no width here: in a row this claimed the whole bar and, being
   flex:none, would not give any of it back. The rail adds the width. */
.bcx-lp__liveline{display:flex;align-items:center;gap:8px;justify-content:center}
.bcx-lp__livepill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:var(--bcx-live-soft,rgba(200,42,42,.12));color:var(--bcx-live);
  font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.bcx-lp__livepill .pip{width:6px;height:6px;border-radius:50%;background:var(--bcx-live);
  animation:bcxBlink 1.4s infinite}
.bcx-lp__elapsed{font-size:.66rem;font-variant-numeric:tabular-nums;color:var(--bcx-ink-3)}
.bcx-lp__transport{display:flex;align-items:center;justify-content:center;gap:10px}
.bcx-lp__skip{
  position:relative;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--bcx-line-strong);
  background:transparent;color:var(--bcx-ink-2);display:grid;place-items:center;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.bcx-lp__skip[hidden]{display:none}
.bcx-lp__skip:hover{border-color:var(--bcx-brand);color:var(--bcx-brand)}
.bcx-lp__skip svg{width:17px;height:17px;flex:none}
.bcx-lp__skip .n{position:absolute;font-size:.46rem;font-weight:800;line-height:1;letter-spacing:0}
.bcx-lp__volwrap{display:flex;align-items:center;gap:8px}
.bcx-lp__mute{
  width:28px;height:28px;flex:none;border:0;background:transparent;color:var(--bcx-ink-3);
  display:grid;place-items:center;cursor:pointer;border-radius:8px;transition:color .2s,background .2s;
}
.bcx-lp__mute:hover{color:var(--bcx-ink);background:var(--bcx-tint-2)}
.bcx-lp__mute svg{width:17px;height:17px;flex:none}
.bcx-lp__mute .i-muted{display:none}
.bcx-lp__mute[aria-pressed="true"] .i-vol{display:none}
.bcx-lp__mute[aria-pressed="true"] .i-muted{display:block}
.bcx-lp__open{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;
  color:var(--bcx-brand);text-decoration:none;
  /* v1.2.9 — without nowrap the label broke onto two lines inside a
     64px bar, and without flex:none on the icon the flex algorithm
     shrank it to zero width rather than wrap. */
  white-space:nowrap;flex:none;
}
.bcx-lp__open:hover{text-decoration:underline}
.bcx-lp__open svg{width:14px;height:14px;flex:none}

/* reactions — a congregation's presence, not a like button */
.bcx-rx{display:flex;gap:6px;flex-wrap:wrap;position:relative}
.bcx-rx button{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--bcx-line-strong);background:transparent;color:var(--bcx-ink-2);
  font:inherit;font-size:.7rem;font-weight:700;cursor:pointer;
  transition:transform .3s var(--bcx-spring),background .25s,color .25s,border-color .25s;
}
.bcx-rx button:hover{transform:translateY(-2px);border-color:var(--bcx-brand);color:var(--bcx-brand)}
.bcx-rx button:active{transform:scale(.93)}
.bcx-rx button.is-on{background:var(--bcx-brand-soft);border-color:var(--bcx-brand);color:var(--bcx-brand)}
.bcx-rx button svg{width:13px;height:13px}
.bcx-rx .n{font-variant-numeric:tabular-nums}
.bcx-rx__burst{position:absolute;pointer-events:none;font-size:.66rem;font-weight:800;color:var(--bcx-brand);
  animation:bcxRise .9s var(--bcx-ease) forwards}
@keyframes bcxRise{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-26px)}}

/* shape: DOCK */
:root[data-player="dock"] .bcx-lp{right:18px;bottom:18px;width:min(340px,calc(100vw - 36px));border-radius:16px;overflow:hidden}
:root[data-player="dock"] .bcx-lp.is-hidden{transform:translateY(calc(100% + 24px))}
:root[data-player="dock"] .bcx-lp__in{display:flex;flex-direction:column;gap:11px;padding:13px}
:root[data-player="dock"] .bcx-lp__row{display:flex;gap:11px;align-items:flex-start}
:root[data-player="dock"] .bcx-lp__art{width:56px;height:56px}
:root[data-player="dock"] .bcx-lp__vol{flex:1}

/* shape: BAR */
:root[data-player="bar"] .bcx-lp{left:0;right:0;bottom:0;border-radius:0;border-inline:0;border-bottom:0}
:root[data-player="bar"] .bcx-lp.is-hidden{transform:translateY(100%)}
:root[data-player="bar"] .bcx-lp__in{
  display:flex;align-items:center;gap:16px;padding:10px 20px;
  width:min(100% - 40px,var(--bcx-shell));margin-inline:auto;
}
:root[data-player="bar"] .bcx-lp__row{display:flex;gap:12px;align-items:center;min-width:0;flex:0 0 300px}
:root[data-player="bar"] .bcx-lp__art{width:48px;height:48px}
:root[data-player="bar"] .bcx-lp__meta{min-width:0}
:root[data-player="bar"] .bcx-lp__title{margin:3px 0 0;font-size:.84rem;-webkit-line-clamp:1}
:root[data-player="bar"] .bcx-lp__vol{width:90px}
:root[data-player="bar"] .bcx-lp__spacer{flex:1}

/* shape: RAIL */
/* v1.2.8 — was top:0, which put the rail UNDER the fixed site header
   (72px, z-index 1000 against the rail's 46) and cut the top off the
   artwork. Start below the header and end at the viewport floor, so the
   whole rail is in view and it scrolls inside itself when it has to. */
:root[data-player="rail"] .bcx-lp{
  left:0;top:var(--bcx-lp-top);bottom:0;width:var(--bcx-rail-w);
  border-radius:0;border-block:0;border-left:0;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;
}
:root[data-player="rail"] .bcx-lp.is-hidden{transform:translateX(-100%)}
:root[data-player="rail"] .bcx-lp__in{display:flex;flex-direction:column;gap:13px;padding:18px 18px 26px;text-align:center;align-items:center;min-height:100%}
/* the artwork is the one thing worth capping: on a short screen a square
   288px cover would push the transport below the fold before the rail
   even starts scrolling */
:root[data-player="rail"] .bcx-lp__art{max-height:min(38vh,252px)}
:root[data-player="rail"] .bcx-lp__transport{width:100%}
:root[data-player="rail"] .bcx-lp__liveline{width:100%}
:root[data-player="rail"] .bcx-lp__seekwrap{width:100%}
:root[data-player="rail"] .bcx-lp__volwrap{width:100%}
:root[data-player="rail"] .bcx-lp__vol{flex:1}
:root[data-player="rail"] .bcx-lp__spacer{display:none}
:root[data-player="rail"] .bcx-lp__row{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
:root[data-player="rail"] .bcx-lp__art{width:100%;aspect-ratio:1;height:auto;border-radius:14px}
:root[data-player="rail"] .bcx-lp__title{font-size:.95rem}
:root[data-player="rail"] .bcx-lp__ctrls{flex-direction:column;width:100%}
:root[data-player="rail"] .bcx-lp__vol{width:100%}
:root[data-player="rail"] .bcx-rx{justify-content:center}
/* v1.2.8 — this used to key on the SHAPE alone, so closing the rail left
   the page with a 284px empty gutter it could never get back. It now
   keys on data-player-open, which bc-experience.js sets while the player
   is actually on screen and removes the moment it is closed. */
@media(min-width:1101px){
  :root[data-player="rail"][data-player-open] body{padding-left:var(--bcx-rail-w)}
}
@media(max-width:1100px){
  /* the rail is a phone-hostile shape; fall back to the bar */
  :root[data-player="rail"] .bcx-lp{left:0;right:0;top:auto;bottom:0;width:auto;
    max-height:none;overflow:visible;
    border-right:0;border-top:1px solid var(--bcx-line)}
  :root[data-player="rail"] .bcx-lp.is-hidden{transform:translateY(100%)}
  :root[data-player="rail"] .bcx-lp__in{flex-direction:row;align-items:center;text-align:left;padding:10px 16px;gap:12px}
  :root[data-player="rail"] .bcx-lp__row{flex-direction:row;width:auto;flex:0 0 auto}
  :root[data-player="rail"] .bcx-lp__art{width:44px;height:44px;aspect-ratio:auto}
  :root[data-player="rail"] .bcx-lp__ctrls{flex-direction:row;width:auto}
  :root[data-player="rail"] .bcx-lp__vol{width:80px}
  :root[data-player="rail"] .bcx-lp__art{max-height:none}
  /* v1.2.9 — the row was flex:0 0 auto, so it claimed its full content
     width and the controls after it were pushed off the screen: 560px
     of bar in a 390px phone. The row is the only part that can give. */
  :root[data-player="rail"] .bcx-lp__row{flex:1 1 auto;min-width:0}
  :root[data-player="rail"] .bcx-lp__meta{min-width:0}
  /* v1.2.9 — the rail's column rules carry no media query of their own,
     so every width and grow factor they set has to be undone here or
     the row inherits them: flex:1 on the volume alone grew it to 251px
     and pushed the bar 71px past the tablet's edge. */
  :root[data-player="rail"] .bcx-lp__liveline,
  :root[data-player="rail"] .bcx-lp__transport,
  :root[data-player="rail"] .bcx-lp__volwrap,
  :root[data-player="rail"] .bcx-lp__seekwrap{width:auto}
  :root[data-player="rail"] .bcx-lp__vol{flex:none;width:84px}
  :root[data-player="rail"] .bcx-lp__spacer{display:none}
  :root[data-player="rail"] .bcx-lp__spacer{display:block;flex:1}
  /* the seek bar has nowhere to go in a 64px-tall bar; the times and the
     live pill still tell the visitor where they are */
  :root[data-player="rail"] .bcx-lp__seekwrap{display:none}
}
/* the dock and the bar are short too */
/* v1.2.9 — every shape that lays the player out as one row shares the
   same rule: one flexible item, everything else at its natural size,
   and nothing allowed to push the row wider than the viewport. */
:root[data-player="bar"] .bcx-lp__in,
:root[data-player="rail"] .bcx-lp__in{max-width:100%}
:root[data-player="bar"] .bcx-lp__liveline,
:root[data-player="rail"] .bcx-lp__liveline,
:root[data-player="bar"] .bcx-lp__volwrap,
:root[data-player="rail"] .bcx-lp__volwrap,
:root[data-player="bar"] .bcx-lp__transport,
:root[data-player="rail"] .bcx-lp__transport{flex:none}
:root[data-player="bar"] .bcx-lp__title,
:root[data-player="rail"] .bcx-lp__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-player="bar"] .bcx-lp__host,
:root[data-player="rail"] .bcx-lp__host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-player="bar"] .bcx-lp__seekwrap{max-width:220px}
:root[data-player="dock"] .bcx-lp__transport{justify-content:flex-start}
:root[data-player="dock"] .bcx-lp__open,
:root[data-player="bar"] .bcx-lp__open{white-space:nowrap}
/* the shipped countdown dock must never sit under the player */
/* v1.2.8 — same fault as the rail gutter: keyed on the shape, so a closed
   player went on reserving space for itself. */
:root[data-player="bar"][data-player-open] #bc-countdown-card,
:root[data-player="rail"][data-player-open] #bc-countdown-card{bottom:96px}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){
  .bcx-week{grid-template-columns:repeat(7,minmax(146px,1fr));overflow-x:auto;padding-bottom:10px}
  .bcx-hero--split .bcx-hero__grid{grid-template-columns:1fr;gap:28px}
  .bcx-foot__cols{grid-template-columns:1fr 1fr;gap:22px}
}
@media(max-width:640px){
  /* a 16/9 card is too short for title + meta + action on a phone */
  .bcx-peek{--peek-n:1}
  .bcx-peek__card{aspect-ratio:3/2}
  .bcx-peek__body{padding:16px}
  .bcx-peek__body h3{padding-right:4.5rem}
  .bcx-rcard{flex:0 0 164px}
  .bcx-foot__cols{grid-template-columns:1fr;gap:18px}
  .bcx-eq{height:48px}
  .bcx-local{padding:14px}
  .bcx-local select{width:100%}
  .bcx-prefs__pop{position:fixed;left:12px;right:12px;top:auto;width:auto}
}

/* ==========================================================================
   9. REDUCED MOTION — non-negotiable
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .bcx-armed .bcx-in{opacity:1 !important;transform:none !important}
  .bcx-peek__card{opacity:1;transform:none}
  .bcx-aurora i,.bcx-eq i{animation:none !important}
}


/* ==========================================================================
   9. LIVE PLAYER ON A PHONE (v1.2.9)
   A 390px bar cannot hold artwork, a title, a transport, a volume slider
   and a labelled link. Volume goes first — a phone has hardware keys for
   it — and the open link keeps its icon without the label.
   ========================================================================== */
@media(max-width:640px){
  :root[data-player] .bcx-lp__in{ padding:9px 12px;gap:10px }
  :root[data-player] .bcx-lp__volwrap{ display:none }
  :root[data-player] .bcx-lp__open{ font-size:0;gap:0;padding:6px }
  :root[data-player] .bcx-lp__open svg{ width:18px;height:18px }
  :root[data-player] .bcx-lp__skip{ display:none }
  :root[data-player] .bcx-lp__liveline{ gap:6px }
  :root[data-player] .bcx-lp__elapsed{ display:none }
  :root[data-player="rail"] .bcx-lp__art,
  :root[data-player="bar"] .bcx-lp__art{ width:40px;height:40px }
  :root[data-player="rail"] .bcx-lp__host,
  :root[data-player="bar"] .bcx-lp__host{ display:none }
}
/* Tablets have the room for the volume but not for a long label beside a
   seek bar, so the seek row stands down and the rest stays. */
@media(min-width:641px) and (max-width:1100px){
  :root[data-player] .bcx-lp__vol{ width:84px }
}


/* ==========================================================================
   10. THE WATCH STAGE (v1.5.0) — the video page
   The player and the broadcast's identity side by side, so a visitor can
   see who is speaking and what it is before deciding to press play. One
   block serves live, scheduled and on-demand; only the eyebrow and the
   actions differ.
   ========================================================================== */
.bcx-watch__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,34px);align-items:start;
}
.bcx-watch__screen{min-width:0}
.bcx-watch__meta{display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:4px}

.bcx-watch__eyebrow{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bcx-brand);
}
.bcx-watch.is-live .bcx-watch__eyebrow{color:var(--bcx-live)}
.bcx-watch__pip{
  width:7px;height:7px;border-radius:50%;background:var(--bcx-live);flex:none;
  animation:bcxBlink 1.4s infinite;
}
.bcx-watch__title{
  margin:0;font-family:var(--font-heading,inherit);font-weight:800;line-height:1.14;
  letter-spacing:-.02em;font-size:clamp(1.5rem,2.6vw,2.3rem);color:var(--bcx-ink);
}
.bcx-watch__by{margin:0;display:flex;flex-direction:column;gap:2px}
.bcx-watch__speaker{font-size:.92rem;font-weight:600;color:var(--bcx-ink-2)}
.bcx-watch__facts{font-size:.78rem;color:var(--bcx-ink-3)}
.bcx-watch__lead{margin:2px 0 0;font-size:.88rem;line-height:1.65;color:var(--bcx-ink-2)}
.bcx-watch__acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}

/* ---- shelves: up next, and one per series ---- */
.bcx-shelf__head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.bcx-shelf__title{
  margin:0;font-family:var(--font-heading,inherit);font-weight:800;
  font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--bcx-ink);
}
.bcx-shelf__count{font-size:.72rem;color:var(--bcx-ink-3)}
.bcx-shelf__all{
  margin-left:auto;font-size:.74rem;font-weight:600;color:var(--bcx-brand);text-decoration:none;
}
.bcx-shelf__all:hover{text-decoration:underline}

.bcx-vrail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
  gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:8px;scrollbar-width:thin;
}
.bcx-vcard{
  scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--bcx-card);border:1px solid var(--bcx-line);border-radius:14px;
  overflow:hidden;text-decoration:none;color:var(--bcx-ink);
  transition:transform .3s var(--bcx-ease),border-color .3s,box-shadow .3s;
}
.bcx-vcard:hover{
  transform:translateY(-3px);border-color:var(--bcx-video,var(--bcx-brand));
  box-shadow:var(--bcx-shadow-float);
}
.bcx-vcard__art{
  position:relative;aspect-ratio:16/9;flex:none;display:grid;place-items:center;overflow:hidden;
  background:var(--bcx-well);
}
.bcx-vcard__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bcx-vcard__part{
  position:absolute;top:8px;left:8px;z-index:1;
  padding:3px 8px;border-radius:6px;
  background:var(--bcx-media-chip);color:var(--bcx-on-media);
  font-size:.58rem;font-weight:800;letter-spacing:.06em;
}
.bcx-vcard__b{
  display:flex;flex-direction:column;gap:4px;padding:11px 12px 13px;flex:1 1 auto;
}
.bcx-vcard__b b{
  font-size:.84rem;font-weight:700;line-height:1.3;
  min-height:calc(2 * 1.3em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bcx-vcard__b span{font-size:.72rem;color:var(--bcx-ink-3);margin-top:auto}

/* ---- library filter chips ---- */
.bcx-vfilter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.bcx-vchip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bcx-line-strong);background:transparent;
  color:var(--bcx-ink-2);font:inherit;font-size:.74rem;font-weight:600;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.bcx-vchip:hover{border-color:var(--bcx-brand);color:var(--bcx-ink)}
.bcx-vchip.is-on{
  background:var(--bcx-brand);border-color:var(--bcx-brand);color:var(--bcx-on-brand);
}
.bcx-vchip .n{font-size:.66rem;opacity:.75}
.bcx-vfilter__none{
  margin:14px 0 0;font-size:.85rem;color:var(--bcx-ink-3);text-align:center;
}

@media(max-width:900px){
  .bcx-watch__grid{grid-template-columns:1fr;gap:16px}
  .bcx-watch__meta{padding-top:0}
  .bcx-vrail{grid-auto-columns:minmax(170px,1fr)}
}


/* ==========================================================================
   11. THE SCHEDULED PANEL (v1.5.2)
   What the video page's screen column shows before a broadcast starts. It
   is deliberately NOT the .bc-prelive partial: that one is a cover-plus-
   body grid meant to span a full-width section, and nesting it inside this
   column crushed its body to a single word per line.
   ========================================================================== */
.bcx-pending{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--bcx-line);background:var(--bcx-well);
  display:grid;place-items:center;
}
.bcx-pending__art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.bcx-pending__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 52%,rgba(0,0,0,.35) 100%);
}
.bcx-pending__in{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:clamp(14px,3vw,24px);text-align:center;color:var(--bcx-on-media);
}
.bcx-pending__label{
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bcx-on-media);opacity:.82;
}
.bcx-pending__timer{display:flex;gap:clamp(6px,1.4vw,12px);flex-wrap:nowrap}
.bcx-pending__cell{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:clamp(46px,7vw,64px);
  padding:clamp(7px,1.2vw,11px) clamp(6px,1vw,10px);
  border-radius:12px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
}
.bcx-pending__cell b{
  font-size:clamp(1.15rem,2.4vw,1.75rem);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--bcx-on-media);
}
.bcx-pending__cell i{
  font-style:normal;font-size:.53rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bcx-on-media);opacity:.78;
}
.bcx-pending__note{
  margin:2px 0 0;font-size:.74rem;line-height:1.5;max-width:34ch;
  color:var(--bcx-on-media);opacity:.86;
}

/* ---- the gap under a page hero ----
   Four templates zeroed this inline, so the first card sat flush against
   the hero copy: measured 0px between them on the live audio page. */
.bc-section--under-hero{padding-top:clamp(20px,3vw,34px)}