/* ChurchBright Church TV, phone layout.
   Why a separate file: the member app is a 480 px column on every screen (member.css), so a tablet, a desktop browser, a phone turned sideways or a phone
   in "desktop site" mode got the wide layout (tv.css / channel.css switch on the width of the SCREEN) squeezed into that column. The rules below are
   keyed on the band class .mx-m instead, and the page links this file without a media condition inside the app (always a narrow column) and with
   (max-width: 700px) on the public site (where the band is as wide as the screen). They sit after channel.css and beat its desktop rules by
   specificity. channel.js reads --mx-phone to know which guide to build (the vertical agenda here, the horizontal timeline otherwise).
   Layout: header and channel pills, the player edge to edge, "now playing", an action row, Up next, Later today, then the agenda. */
.mx-tvband.mx-m {
  --mx-phone: 1;
  --mx-pad-l: max(16px, env(safe-area-inset-left, 0px)); --mx-pad-r: max(16px, env(safe-area-inset-right, 0px));
  --mx-tabs-clear: calc(var(--m-tabs-h, 60px) + var(--safe-b, env(safe-area-inset-bottom, 0px)));
}
.mx-tvband.mx-m .mx-tvband-in { max-width: none; padding: 0; }
.mx-tvband--bleed.mx-m { padding: 14px 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
.mx-tvband--box.mx-m { padding: 0 0 18px; border-radius: 16px; }
/* In the app the band runs edge to edge: it cancels the column's side padding and the space above and below it. */
.mx-tvband--app.mx-m { border-radius: 0; margin: -16px calc(-1 * (var(--m-gutter, 16px) + var(--safe-r, 0px))) -28px calc(-1 * (var(--m-gutter, 16px) + var(--safe-l, 0px)));
  padding: 0 0 calc(28px + var(--safe-b, env(safe-area-inset-bottom, 0px))); min-height: calc(100vh - var(--m-top-h, 56px) - var(--mx-tabs-clear)); }
.mx-tvband.mx-m .mx-tv { display: block; }
.mx-tvband.mx-m .mx-tv-h1 { margin: 0 0 10px; padding: 0 var(--mx-pad-r) 0 var(--mx-pad-l); font-size: 25px; line-height: 1.2; }

/* Channel pills: one scrolling row */
.mx-tvband.mx-m .mx-chsw { margin: 0; padding-top: 10px; }
.mx-tvband.mx-m .mx-chsw-list { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px var(--mx-pad-r) 10px var(--mx-pad-l); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--mx-pad-l); }
.mx-tvband.mx-m .mx-chsw-list::-webkit-scrollbar { display: none; }
.mx-tvband.mx-m .mx-chsw-list > li { flex: 0 0 auto; }
.mx-tvband.mx-m .mx-chsw-a { min-height: 44px; padding: 0 16px; white-space: nowrap; }
.mx-tvband.mx-m .mx-chsw-a span { overflow: visible; max-width: 60vw; overflow: hidden; }

/* Player and now playing. The frame is a grid so the top bar (LIVE badge, viewers, logo, collapse) can lie on the player without absolute positioning. */
.mx-tvband.mx-m .mx-tv-main { display: flex; flex-direction: column; }
.mx-tvband.mx-m .mx-tv-frame { order: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.mx-tvband.mx-m .mx-tv-slot { grid-area: 1 / 1; min-width: 0; }
.mx-tvband.mx-m .mx-tv-screen { border-radius: 0; box-shadow: none; }
.mx-tvband.mx-m .mx-tv-screen.is-live { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, .85); }
.mx-tvband.mx-m .mx-tv-top { grid-area: 1 / 1; align-self: start; z-index: 9; display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; padding: 10px var(--mx-pad-r) 30px var(--mx-pad-l); pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); }
.mx-tvband.mx-m .mx-tv-top-right { display: contents; }
.mx-tvband.mx-m .mx-tv-top .mx-onair { order: 0; }
.mx-tvband.mx-m .mx-tv-top .mx-watching { order: 1; display: inline-flex; background: rgba(0, 0, 0, .55); }
.mx-tvband.mx-m .mx-tv-bug { order: 2; margin-left: auto; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.mx-tvband.mx-m .mx-tv-bug img, .mx-tvband.mx-m .mx-tv-bug-mark { width: 26px; height: 26px; flex-basis: 26px; }
.mx-tvband.mx-m .mx-tv-bug-name, .mx-tvband.mx-m .mx-tv-replay, .mx-tvband.mx-m .mx-tv-iconbtn { display: none; }
.mx-tvband.mx-m .mx-m-collapse { order: 3; display: inline-grid; place-items: center; width: 44px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; pointer-events: auto; }
.mx-tvband.mx-m .mx-m-collapse .icon { transition: transform .2s; }
.mx-tvband.mx-m .mx-m-collapse:focus-visible { outline: 3px solid var(--tv-accent-edge, #a5b4fc); outline-offset: 2px; }
.mx-tvband.mx-m .mx-tv-frame.is-collapsed .mx-m-collapse .icon { transform: rotate(180deg); }
.mx-tvband.mx-m .mx-tv-frame.is-collapsed .mx-tv-slot { height: 0; overflow: hidden; }
.mx-tvband.mx-m .mx-tv-frame.is-collapsed .mx-tv-top { background: none; padding-bottom: 6px; }
.mx-tvband.mx-m .mx-live-banner { grid-area: 2 / 1; margin: 10px var(--mx-pad-r) 0 var(--mx-pad-l); }
.mx-tvband.mx-m .mx-tv-screen .mx-unmute { top: auto; bottom: 10px; left: 10px; padding: 9px 14px; min-height: 40px; }
.mx-tvband.mx-m .mx-tv-ctrl { right: 8px; bottom: 8px; gap: 6px; opacity: 1; transform: none; }
.mx-tvband.mx-m .mx-tv-btn--mini { display: none; }
/* Tap to watch: the whole overlay is the button */
.mx-tvband.mx-m .mx-start { padding: 44px 16px 14px; cursor: pointer; }
.mx-tvband.mx-m .mx-start-card { gap: 8px; }
.mx-tvband.mx-m .mx-start-card .mx-tv-bug, .mx-tvband.mx-m .mx-start-hint { display: none; }
.mx-tvband.mx-m .mx-start-title { font-size: 17px; }
.mx-tvband.mx-m .mx-start-btn { width: 64px; height: 64px; margin-top: 2px; }
.mx-tvband.mx-m .mx-start-btn .icon { width: 28px; height: 28px; }

/* Now playing card: picture, title, time range, one line, and a progress line along the bottom */
.mx-tvband.mx-m .mx-tv-info, .mx-tvband.mx-m .mx-ctas { display: none; }
.mx-tvband.mx-m .mx-m-now { grid-area: 3 / 1; position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 12px; align-items: center; width: 100%; box-sizing: border-box; margin: 0; padding: 9px var(--mx-pad-r) 12px var(--mx-pad-l);
  border: 0; border-radius: 0; background: rgba(255, 255, 255, .07); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.mx-tvband.mx-m .mx-m-now:focus-visible { outline: 3px solid var(--tv-accent-edge, #a5b4fc); outline-offset: -3px; }
.mx-tvband.mx-m .mx-m-now-thumb { grid-row: 1; width: 84px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #0b1020, color-mix(in srgb, var(--mx-accent, #4f46e5) 55%, #0b1020)); color: rgba(255, 255, 255, .7); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.mx-tvband.mx-m .mx-m-now-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-tvband.mx-m .mx-m-now-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mx-tvband.mx-m .mx-m-now-title { font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.mx-tvband.mx-m .mx-m-now-time { font-size: 12.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .78); }
.mx-tvband.mx-m .mx-m-now-sub { font-size: 13.5px; color: var(--tv-muted, #94a3b8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-tvband.mx-m .mx-m-now-sub, .mx-m-now-sub:empty { display: none; }
.mx-tvband.mx-m .mx-m-now-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .16); }
.mx-tvband.mx-m .mx-m-now-bar > span { display: block; height: 100%; width: 0; background: var(--tv-accent-edge, #a5b4fc); transition: width 1s linear; }
.mx-tvband.mx-m .mx-m-now [hidden], .mx-tvband.mx-m .mx-m-now-ph[hidden] { display: none !important; }

/* Action tiles: 2 across, 60 px tall, 16 px corners (Share, Reminders and the calls to action; a tile that is switched off is not there) */
.mx-tvband.mx-m .mx-m-tiles { grid-area: 4 / 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px var(--mx-pad-r) 0 var(--mx-pad-l); }
.mx-tvband.mx-m .mx-m-tile, .mx-tvband.mx-m a.mx-m-tile:not(.mx-btn):not(.mx-epg-block) { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; box-sizing: border-box; margin: 0; padding: 0 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .08); color: #fff !important; font: 600 15.5px/1.2 var(--font, system-ui, sans-serif); text-align: left; text-decoration: none; cursor: pointer; transition: background .15s; }
.mx-tvband.mx-m .mx-m-tile .icon { flex: none; color: var(--tv-accent-text, #c7d2fe); }
.mx-tvband.mx-m .mx-m-tile > span { min-width: 0; overflow-wrap: anywhere; }
.mx-tvband.mx-m .mx-m-tile:active { background: rgba(255, 255, 255, .16); }
.mx-tvband.mx-m .mx-m-tile.is-primary, .mx-tvband.mx-m a.mx-m-tile.is-primary:not(.mx-btn):not(.mx-epg-block) { background: color-mix(in srgb, var(--mx-accent, #4f46e5) 70%, #000); border-color: var(--tv-accent-edge, #a5b4fc); }
.mx-tvband.mx-m .mx-m-tile.is-primary .icon { color: #fff; }
.mx-tvband.mx-m .mx-m-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mx-tvband.mx-m .mx-m-tile-n { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--mx-accent, #4f46e5); color: #fff; font: 800 12px/22px var(--font, system-ui, sans-serif); text-align: center; }
.mx-tvband.mx-m .mx-m-tiles [hidden] { display: none !important; }

/* Up next: the card (a picture, chips, title, channel) and the big countdown */
.mx-tvband.mx-m .mx-nextup { display: contents; }
.mx-tvband.mx-m .mx-nextup[hidden] { display: none; }
.mx-tvband.mx-m .mx-nextup-kicker { order: 1; margin: 24px var(--mx-pad-r) 8px var(--mx-pad-l); }
.mx-tvband.mx-m .mx-nextup-card { order: 2; margin: 0 var(--mx-pad-r) 0 var(--mx-pad-l); padding: 14px; border-radius: 18px; border: 1px solid var(--tv-border); background: rgba(255, 255, 255, .07);
  display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
/* Photo on the left; tag, title and channel get the whole right-hand column, so a title never wraps letter by letter. */
.mx-tvband.mx-m .mx-nextup-thumb { grid-column: 1; grid-row: 1 / span 3; align-self: start; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.mx-tvband.mx-m .mx-nextup-meta { grid-column: 2; grid-row: 1; }
.mx-tvband.mx-m .mx-nextup-title { grid-column: 2; grid-row: 2; margin: 0; font-size: 17px; line-height: 1.25; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.mx-tvband.mx-m .mx-nextup-chan { grid-column: 2; grid-row: 3; display: block; padding-right: 74px; font-size: 13.5px; color: var(--tv-muted, #94a3b8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-tvband.mx-m .mx-nextup-at { grid-column: 2; grid-row: 3; justify-self: end; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--tv-muted, #94a3b8); }
/* The countdown gets a strip of its own under the photo and text. */
.mx-tvband.mx-m .mx-nextup-big { grid-column: 1 / -1; grid-row: 4; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.mx-tvband.mx-m .mx-nextup-big-l { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tv-muted, #94a3b8); white-space: nowrap; }
.mx-tvband.mx-m .mx-nextup-big-d { font: 700 26px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--tv-accent-text, #c7d2fe); }
.mx-tvband.mx-m .mx-nextup-count { display: none; }
.mx-tvband.mx-m .mx-nextup-act { grid-column: 1 / -1; grid-row: 5; margin-top: 8px; }
.mx-tvband.mx-m .mx-nextup-act .mx-remind { width: 100%; margin: 0; min-height: 44px; }
.mx-tvband.mx-m .mx-nextup-act:empty { display: none; }

/* On now: one tile per channel (and the live service while it is on), a scrolling row */
.mx-tvband.mx-m .mx-onnow { order: 3; display: block; margin-top: 26px; }
.mx-tvband.mx-m .mx-onnow-h { display: flex; align-items: center; gap: 8px; margin: 0 var(--mx-pad-r) 10px var(--mx-pad-l); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #f87171; }
.mx-tvband.mx-m .mx-onnow-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .3); }
.mx-tvband.mx-m .mx-onnow-list { list-style: none; margin: 0; padding: 2px var(--mx-pad-r) 6px var(--mx-pad-l); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--mx-pad-l); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.mx-tvband.mx-m .mx-onnow-list::-webkit-scrollbar { display: none; }
.mx-tvband.mx-m .mx-onnow-item { flex: 0 0 min(212px, 62vw); scroll-snap-align: start; min-width: 0; }
.mx-tvband.mx-m a.mx-onnow-tile:not(.mx-btn):not(.mx-epg-block) { display: flex; flex-direction: column; gap: 3px; color: #fff !important; text-decoration: none; border-radius: 12px; }
.mx-tvband.mx-m .mx-onnow-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #0b1020, color-mix(in srgb, var(--mx-accent, #4f46e5) 55%, #0b1020)); color: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.mx-tvband.mx-m .mx-onnow-tile.is-current .mx-onnow-thumb { box-shadow: 0 0 0 2px var(--tv-accent-edge, #a5b4fc); }
.mx-tvband.mx-m .mx-onnow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-tvband.mx-m .mx-onnow-chip { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font: 700 12px/1.5 var(--font, system-ui, sans-serif); }
.mx-tvband.mx-m .mx-onnow-chip.is-live { left: 8px; right: auto; background: #dc2626; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.mx-tvband.mx-m .mx-onnow-title { font-size: 14.5px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.mx-tvband.mx-m .mx-onnow-chan { font-size: 12.5px; color: var(--tv-muted, #94a3b8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Later today */
.mx-tvband.mx-m .mx-nextup-later { order: 4; display: block; margin: 24px var(--mx-pad-r) 0 var(--mx-pad-l); padding: 12px 12px 6px; border: 1px solid var(--tv-border); border-radius: 16px; background: rgba(255, 255, 255, .05); }
.mx-tvband.mx-m .mx-nextup-later[hidden] { display: none; }
.mx-tvband.mx-m .mx-nextup-later-h { margin: 0 4px 6px; }
.mx-tvband.mx-m .mx-nextup-list { display: flex; flex-direction: column; gap: 0; }
.mx-tvband.mx-m .mx-nextup-item { min-height: 56px; }
.mx-tvband.mx-m .mx-nextup-row { padding: 6px 4px; min-height: 56px; }
.mx-tvband.mx-m .mx-nextup-mini { flex-basis: 72px; }
.mx-tvband.mx-m .mx-nextup-item-title { font-size: 14.5px; }
.mx-tvband.mx-m .mx-nextup-item-time { font-size: 12.5px; }

/* Programme guide: a collapsible section, day chips, then the grid */
.mx-tvband.mx-m .mx-epg { margin: 28px 0 0; padding: 0; }
/* Member app order: player, now playing, next up, programme guide, then "Later today" below the guide. */
.mx-tvband.mx-tvband--app.mx-m .mx-tv { display: flex; flex-direction: column; }
.mx-tvband.mx-tvband--app.mx-m .mx-tv-main { display: contents; }
.mx-tvband.mx-tvband--app.mx-m .mx-epg { order: 4; }
.mx-tvband.mx-tvband--app.mx-m .mx-nextup-later { order: 5; margin-bottom: 8px; }
.mx-tvband.mx-m .mx-epg-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; margin: 0 var(--mx-pad-r) 12px var(--mx-pad-l); }
.mx-tvband.mx-m .mx-epg-head > div:first-child { min-width: 0; }
.mx-tvband.mx-m .mx-epg-head .mx-h2 { font-size: 21px; }
.mx-tvband.mx-m .mx-epg-tz { margin: 2px 0 0; font-size: 12px; line-height: 1.35; }
.mx-tvband.mx-m .mx-epg-tools { display: none; }
.mx-tvband.mx-m .mx-m-collapse--epg { order: 0; grid-column: 2; grid-row: 1; background: rgba(255, 255, 255, .08); pointer-events: auto; }
.mx-tvband.mx-m .mx-epg.is-collapsed .mx-m-collapse--epg .icon { transform: rotate(180deg); }
.mx-tvband.mx-m .mx-epg.is-collapsed .mx-epg-panel { display: none; }
.mx-tvband.mx-m .mx-m-days { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 2px var(--mx-pad-r) 4px var(--mx-pad-l); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--mx-pad-l); }
.mx-tvband.mx-m .mx-m-days::-webkit-scrollbar { display: none; }
.mx-tvband.mx-m .mx-m-day { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid transparent; background: rgba(255, 255, 255, .08); color: #cbd5e1; font: 700 15px/1 var(--font, system-ui, sans-serif); white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.mx-tvband.mx-m .mx-m-day--arrow { padding: 0; width: 44px; color: var(--tv-accent-text, #c7d2fe); }
.mx-tvband.mx-m .mx-m-day:disabled { opacity: .35; cursor: default; }
.mx-tvband.mx-m .mx-m-day.is-active { border-color: var(--tv-accent-edge, #a5b4fc); color: var(--tv-accent-text, #c7d2fe); background: transparent; }
.mx-tvband.mx-m .mx-m-day:focus-visible { outline: 3px solid var(--tv-accent-edge, #a5b4fc); outline-offset: 2px; }
.mx-tvband.mx-m .mx-epg-chips { margin: 0 0 12px; padding: 2px var(--mx-pad-r) 4px var(--mx-pad-l); overflow-x: auto; flex-wrap: nowrap; gap: 8px; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: var(--mx-pad-l); }
.mx-tvband.mx-m .mx-epg-chips::-webkit-scrollbar { display: none; }
.mx-tvband.mx-m .mx-cchip { min-height: 44px; white-space: nowrap; }
.mx-tvband.mx-m .mx-epg-wrap { position: relative; }
.mx-tvband.mx-m .mx-epg-frame { display: block; border: 0; border-radius: 0; background: none; overflow: visible; }
.mx-tvband.mx-m .mx-epg-side, .mx-tvband.mx-m .mx-epg-arrow, .mx-tvband.mx-m .mx-epg-scroll { display: none !important; }
.mx-tvband.mx-m .mx-epg-body { background: none; }
.mx-tvband.mx-m .mx-guide-list { margin: 0 var(--mx-pad-r) 0 var(--mx-pad-l); }
.mx-tvband.mx-m .mx-epg-empty, .mx-tvband.mx-m .mx-epg-state { margin-inline: var(--mx-pad-l) var(--mx-pad-r); }
.mx-tvband.mx-m .mx-epg-skel { padding-inline: var(--mx-pad-l) var(--mx-pad-r); }
.mx-tvband.mx-m .mx-m-nowbtn { position: sticky; top: calc(var(--m-top-h, 56px) + var(--safe-t, 0px) + 10px); z-index: 9; display: flex; align-items: center; gap: 6px; height: 40px; width: max-content; margin: 0 12px -40px auto; padding: 0 16px; border-radius: 999px; border: 1px solid var(--tv-accent-edge, #a5b4fc);
  background: color-mix(in srgb, var(--mx-accent, #4f46e5) 80%, #000); color: #fff; font: 700 14px var(--font, system-ui, sans-serif); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); cursor: pointer; }
.mx-tvband.mx-m .mx-m-nowbtn[hidden] { display: none !important; }

/* The grid: a sticky channel column, a time ruler, one row of programme tiles per channel */
.mx-g { --g-row: 84px; --g-col: 100px; --g-bed: #0b0f1a; --g-line: rgba(255, 255, 255, .06); position: relative; }
.mx-g-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mx-g-scroll::-webkit-scrollbar { display: none; }
.mx-g-inner { position: relative; padding-bottom: 4px; }
.mx-g-ruler { display: flex; height: 40px; }
.mx-g-corner, .mx-g-chan-cell { position: sticky; left: 0; z-index: 6; flex: 0 0 var(--g-col); width: var(--g-col); box-sizing: border-box; background: var(--tv-bg-2, #0d1322); }
.mx-g-corner { height: 40px; font-size: 0; }
.mx-g-ticks { position: relative; flex: none; height: 40px; }
.mx-g-tick { position: absolute; bottom: 0; width: 1px; height: 10px; background: rgba(255, 255, 255, .35); }
.mx-g-tick-l { position: absolute; left: 6px; bottom: 12px; font-size: 12.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #e2e8f0; white-space: nowrap; }
.mx-g-row { display: flex; align-items: flex-start; height: var(--g-row); margin-bottom: 8px; }
.mx-g-chan-cell { height: var(--g-row); padding: 0 8px 0 var(--mx-pad-l, 16px); box-shadow: 8px 0 10px -6px rgba(0, 0, 0, .75); }
.mx-g-track { position: relative; flex: none; height: var(--g-row); background-image: linear-gradient(90deg, var(--g-line) 1px, transparent 1px); background-size: 120px 100%; }
.mx-g-chan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; box-sizing: border-box; padding: 6px 4px; border-radius: 14px; overflow: hidden; text-align: center; text-decoration: none; color: #fff !important;
  background: linear-gradient(160deg, hsl(var(--h, 230) 55% 42%), hsl(calc(var(--h, 230) + 24) 55% 26%)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.mx-tvband a.mx-g-chan:not(.mx-btn):not(.mx-epg-block) { color: #fff; }
.mx-g-chan.is-current { box-shadow: 0 0 0 2px var(--tv-accent-edge, #a5b4fc); }
.mx-g-chan.is-live { background: linear-gradient(160deg, #b91c1c, #7f1d1d); }
.mx-g-chan:focus-visible { outline: 3px solid var(--tv-accent-edge, #a5b4fc); outline-offset: 2px; }
.mx-g-sq { display: grid; place-items: center; flex: none; width: 100%; height: 34px; }
.mx-g-sq b { font-size: 21px; line-height: 1; letter-spacing: .02em; }
.mx-g-sq.has-logo { background: #fff; border-radius: 8px; width: 52px; padding: 2px; box-sizing: border-box; }
.mx-g-sq img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.mx-g-name { max-width: 100%; font-size: 11px; font-weight: 700; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
/* Tiles: absolutely placed in whole pixels. The tile itself makes no stacking context, so the now line (z 2) can run over the tile backgrounds (z 1) and under every text (z 3). */
.mx-g-tile { position: absolute; top: 0; height: var(--g-row); box-sizing: border-box; margin: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.mx-g-bg { position: absolute; inset: 0; z-index: 1; border-radius: 12px; background: var(--tv-surface, #151b2b); border: 1px solid rgba(255, 255, 255, .1); pointer-events: none; }
.mx-g-text { position: sticky; left: calc(var(--g-col) + 6px); z-index: 3; display: flex; flex-direction: column; gap: 3px; box-sizing: border-box; width: max-content; max-width: calc(100% - 4px); padding: 10px 10px 10px 12px; pointer-events: none; }
.mx-g-sub { font-size: 12px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--tv-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mx-g-title { font-size: 14px; font-weight: 700; line-height: 1.25; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; max-width: 100%; }
.mx-g-chip { position: absolute; top: 7px; right: 7px; z-index: 3; padding: 0 8px; border-radius: 6px; background: #dc2626; color: #fff; font: 800 10.5px/18px var(--font, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.mx-g-chip[hidden] { display: none !important; }
.mx-g-tile.is-past .mx-g-bg { background: #11151e; border-color: rgba(255, 255, 255, .06); }
.mx-g-tile.is-past .mx-g-title { color: #94a3b8; }
.mx-g-tile.is-now .mx-g-bg { background: color-mix(in srgb, var(--mx-accent, #4f46e5) 26%, #0d1424); border-color: var(--tv-accent-edge, #a5b4fc); }
.mx-g-tile.is-now .mx-g-sub { color: var(--tv-accent-text, #c7d2fe); }
.mx-g-tile.is-now .mx-g-text { padding-right: 56px; }
.mx-g-tile.is-live .mx-g-bg { background: linear-gradient(135deg, rgba(239, 68, 68, .3), #0d1424 75%); border-color: #f87171; }
.mx-g-tile.is-live .mx-g-chip { background: #ef4444; }
.mx-g-tile.is-short .mx-g-sub, .mx-g-tile.is-narrow .mx-g-chip { display: none; }
.mx-g-tile.is-narrow.is-now .mx-g-text { padding-right: 10px; }
.mx-g-tile.is-short .mx-g-text { padding: 10px 6px 10px 8px; }
.mx-g-tile.is-short .mx-g-title { -webkit-line-clamp: 3; font-size: 12.5px; }
.mx-g-tile.is-bar .mx-g-text { display: none; }
.mx-g-tile.is-dim .mx-g-bg, .mx-g-tile.is-dim .mx-g-text { opacity: .25; }
.mx-g-tile:focus-visible { outline: 3px solid var(--tv-accent-edge, #a5b4fc); outline-offset: 2px; z-index: 4; }
.mx-g-tile.is-pulse .mx-g-bg { animation: mx-focus-pulse 1.1s ease-in-out 4; }
.mx-g-now { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 2; pointer-events: none; will-change: transform; }
.mx-g-now::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, .5); }
.mx-g-now-pill { position: absolute; top: 3px; left: 0; transform: translateX(-50%); z-index: 4; padding: 0 9px; border-radius: 6px; background: #ef4444; color: #fff; font: 800 12.5px/22px var(--font, system-ui, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.mx-rem-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mx-rem-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mx-rem-text { display: flex; flex-direction: column; min-width: 0; }
.mx-rem-title { font-weight: 700; overflow-wrap: anywhere; }
.mx-rem-time { font-size: 13px; color: #cbd5e1; }

/* Dialogs and the toast: a bottom sheet on a phone, and clear of the app's tab bar */
.mx-tvband.mx-m .mx-epg-dialog, .mx-tvband.mx-m .mx-remind-dialog { width: 100%; max-width: none; margin: auto 0 0; max-height: calc(100dvh - 24px); border-radius: 18px 18px 0 0; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
.mx-tvband.mx-m .mx-epg-dialog-actions { gap: 8px; }
.mx-tvband.mx-m .mx-epg-dialog-actions .mx-btn, .mx-tvband.mx-m .mx-epg-dialog-actions .mx-remind { min-height: 46px; }
.mx-tvband.mx-m .mx-remind-actions .mx-btn { min-height: 46px; }
.mx-tvband--app.mx-m .mx-tvtoast { bottom: calc(var(--mx-tabs-clear) + 20px); }
.mx-tvband--app.mx-m .mx-tv-screen.is-mini { left: 12px; right: auto; bottom: calc(var(--mx-tabs-clear) + 16px); width: min(224px, 56vw); }
.mx-tvband.mx-m.has-mini { padding-bottom: 190px; }

/* Landscape phone on the public site: the player on the left, what is on air beside it, so the player is never taller than the screen. (The member app stays one 480 px column.) */
@media (orientation: landscape) and (max-height: 540px) {
  .mx-tvband.mx-m:not(.mx-tvband--app) .mx-tv-frame { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 16px; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .mx-tvband.mx-m:not(.mx-tvband--app) .mx-tv-slot { grid-area: 1 / 1 / span 4 / 1; }
  .mx-tvband.mx-m:not(.mx-tvband--app) .mx-tv-top { grid-area: 1 / 1; padding-left: 12px; padding-right: 12px; }
  .mx-tvband.mx-m:not(.mx-tvband--app) .mx-live-banner { grid-area: 1 / 2; margin: 12px 16px 0 0; }
  .mx-tvband.mx-m:not(.mx-tvband--app) .mx-m-now { grid-area: 2 / 2; padding: 12px 16px 16px 0; background: none; }
  .mx-tvband.mx-m:not(.mx-tvband--app) .mx-m-tiles { grid-area: 3 / 2; padding: 4px 16px 0 0; }
}
@media (max-width: 359.98px) {
  .mx-tvband.mx-m .mx-m-now { grid-template-columns: 76px minmax(0, 1fr); gap: 2px 10px; }
  .mx-tvband.mx-m .mx-m-now-thumb { width: 76px; }
  .mx-tvband.mx-m .mx-m-tile { padding: 0 12px; gap: 10px; font-size: 15px; }
  .mx-tvband.mx-m .mx-nextup-card { grid-template-columns: 80px minmax(0, 1fr) auto; column-gap: 10px; }
  .mx-tvband.mx-m .mx-nextup-big-d { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-m-tile, .mx-m-day, .mx-m-now-bar > span, .mx-m-collapse .icon { transition: none; }
  .mx-g-tile.is-pulse .mx-g-bg { animation: none; outline: 3px solid #fff; outline-offset: 2px; }
}

/* ── The weekly schedule page (/channel/schedule): the same band, text blocks padded, a day bar that sticks below the app's top bar ── */
.mx-tvband.mx-m.mx-wk .mx-tvband-in { padding: 16px var(--mx-pad-r) 0 var(--mx-pad-l); }
.mx-tvband--app.mx-m.mx-wk .mx-tvband-in { padding-top: 14px; }
.mx-wk.mx-m .mx-wk-head { margin-bottom: 14px; gap: 10px; }
.mx-wk.mx-m .mx-wk-h1, .mx-wk.mx-m .mx-h2 { font-size: 24px; line-height: 1.2; }
.mx-wk.mx-m .mx-wk-sub { font-size: 13px; }
.mx-wk.mx-m .mx-wk-actions { width: 100%; }
.mx-wk.mx-m .mx-wk-actions .mx-btn { flex: 1 1 auto; justify-content: center; }
.mx-wk.mx-m .mx-chsw { margin: 0 calc(-1 * var(--mx-pad-r)) 0 calc(-1 * var(--mx-pad-l)); padding-top: 0; }
.mx-wk.mx-m .mx-wk-bar { margin: 0 calc(-1 * var(--mx-pad-r)) 12px calc(-1 * var(--mx-pad-l)); padding: 8px var(--mx-pad-r) 2px var(--mx-pad-l); }
.mx-wk-page.mx-in-app .mx-wk-bar { top: calc(var(--m-top-h, 56px) + var(--safe-t, 0px)); }
.mx-wk.mx-m .mx-wk-tabs, .mx-wk.mx-m .mx-wk-chips { margin-inline: calc(-1 * var(--mx-pad-l)) calc(-1 * var(--mx-pad-r)); padding-inline: var(--mx-pad-l) var(--mx-pad-r); scroll-padding-inline: var(--mx-pad-l); overscroll-behavior-x: contain; }
.mx-wk.mx-m .mx-wk-tab { min-width: 78px; }
.mx-wk.mx-m .mx-wk-day { scroll-margin-top: calc(var(--m-top-h, 56px) + 130px); }
.mx-wk.mx-m .mx-wk-item { grid-template-columns: 68px minmax(0, 1fr); gap: 4px 12px; padding: 12px; }
.mx-wk.mx-m .mx-wk-remind { grid-column: 1 / -1; justify-self: start; }
.mx-wk.mx-m .mx-wk-remind summary { min-height: 44px; }
.mx-wk.mx-m .mx-wk-remind-form { flex-direction: column; align-items: stretch; width: min(100%, 340px); }
.mx-wk.mx-m .mx-wk-remind-form .input { max-width: none; min-height: 46px; }
.mx-wk.mx-m .mx-wk-remind-form .mx-btn { min-height: 46px; justify-content: center; }
.mx-wk.mx-m .mx-wk-cta { gap: 8px; }
.mx-wk.mx-m .mx-wk-cta .mx-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }