/* StarliteTV redesign (preview 2026-10-25): design tokens + components. Served at /sl/rd.css by functions/sl/[file].js.
   Loaded after /assets/css/app.css. Visual only: nothing here changes the player's controls, ad slots' sizes or any data. */
:root{
  /* palette */
  --sl-bg:#07060e;--sl-bg-2:#0c0a18;--sl-surface:#13112a;--sl-surface-2:#1b1838;--sl-surface-3:#252150;
  --sl-line:#2a2650;--sl-line-2:#3a3570;--sl-text:#f3f1fc;--sl-text-2:#d5d1ea;--sl-muted:#aaa4c8;
  --sl-accent:#8c7bff;--sl-accent-2:#5d6bff;--sl-accent-text:#c3b8ff;--sl-accent-soft:rgba(140,123,255,.16);
  --sl-live:#ff5f7a;--sl-ok:#5fe0a0;--sl-warn:#ffcf70;--sl-gold:#ffd166;
  /* type scale */
  --sl-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sl-fs-xs:12px;--sl-fs-s:13px;--sl-fs-m:15px;--sl-fs-l:18px;--sl-fs-xl:clamp(20px,2vw,26px);--sl-fs-2xl:clamp(26px,3.4vw,44px);
  /* spacing / shape / motion */
  --sl-s1:4px;--sl-s2:8px;--sl-s3:12px;--sl-s4:16px;--sl-s5:24px;--sl-s6:36px;
  --sl-r-s:8px;--sl-r:14px;--sl-r-l:20px;--sl-shadow:0 18px 40px rgba(0,0,0,.55);--sl-ease:cubic-bezier(.2,.7,.2,1);
  --sl-card-w:236px;--sl-poster-w:150px;
  /* legacy variables used by app.css, mapped onto the new tokens */
  --bg:var(--sl-bg);--bg2:var(--sl-bg-2);--panel:var(--sl-surface);--panel2:var(--sl-surface-2);--line:var(--sl-line);
  --text:var(--sl-text);--muted:var(--sl-muted);--accent:var(--sl-accent-text);--accent2:var(--sl-live);--radius:var(--sl-r);--font:var(--sl-font)
}
html,body{background:var(--sl-bg)}
body{background:radial-gradient(1200px 600px at 85% -10%,rgba(93,107,255,.13),transparent 60%),radial-gradient(900px 500px at -10% 0,rgba(140,123,255,.10),transparent 60%),var(--sl-bg);background-attachment:fixed;color:var(--sl-text)}
a{color:var(--sl-accent-text)}
:focus-visible{outline:3px solid var(--sl-accent-text);outline-offset:2px;border-radius:6px}
::selection{background:var(--sl-accent);color:#fff}

/* ---- header / navigation ---- */
.site-header{gap:14px;padding:10px clamp(12px,2.4vw,28px);background:linear-gradient(180deg,rgba(7,6,14,.96),rgba(7,6,14,.82));border-bottom:1px solid rgba(140,123,255,.18);min-height:65px}
/* v3.2: the header is 65 px tall once rd.js adds the search (it was 60-61 px before and app.css reserves 57 px, or 51 px on home
   phones), so the whole page moved down 4-8 px as the header was drawn and again as it was upgraded. One height for all three. */
body:not(:has(> .site-header))::before{height:65px}
.site-header .tip-btn{white-space:nowrap}
.site-header .brand img{height:34px}
.site-header .nav{gap:2px;flex-wrap:nowrap;align-items:center}
.site-header .nav a,.site-header .nav summary{color:var(--sl-muted);padding:8px 13px;border-radius:999px;font-weight:650;font-size:var(--sl-fs-m);white-space:nowrap;cursor:pointer;list-style:none}
.site-header .nav summary::-webkit-details-marker{display:none}
.site-header .nav a:hover,.site-header .nav summary:hover{color:var(--sl-text);background:var(--sl-surface-2);text-decoration:none}
.site-header .nav a.active,.site-header .nav a[aria-current=page]{color:#fff;background:linear-gradient(135deg,rgba(140,123,255,.32),rgba(93,107,255,.22));box-shadow:inset 0 0 0 1px rgba(140,123,255,.45)}
.rd-more{position:relative}
.rd-more[open] summary{color:var(--sl-text);background:var(--sl-surface-2)}
.rd-more-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:190px;display:flex;flex-direction:column;padding:6px;background:var(--sl-surface);border:1px solid var(--sl-line-2);border-radius:12px;box-shadow:var(--sl-shadow);z-index:60}
.rd-more-menu a{border-radius:8px!important}
.rd-search{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0}
.rd-search input{width:210px;max-width:28vw;min-height:38px;padding:8px 12px 8px 34px;border-radius:999px;border:1px solid var(--sl-line-2);background:var(--sl-bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23aaa4c8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 11px center;color:var(--sl-text);font-size:var(--sl-fs-s)}
.rd-search input::placeholder{color:#8f89ad}
.rd-search input:focus{border-color:var(--sl-accent);outline:none;box-shadow:0 0 0 3px rgba(140,123,255,.3)}
.rd-search{position:relative}
.rd-search-btn{display:none}
.rd-search-go{display:none}
/* Search button (item 1, Oct 25 2026 v3): white label >= 4.5:1 on every point of the gradient in every state that shows text.
   Measured from rendered pixels by qa3/contrast.py: rest #5b47d8 -> #4549cf, hover/focus #4c3bc4 -> #383db6, active #3f31aa -> #2e3299. */
:root{--rd-go-a:#5b47d8;--rd-go-b:#4549cf}
.rd-search-go:hover,.rd-search-go:focus-visible{--rd-go-a:#4c3bc4;--rd-go-b:#383db6}
.rd-search-go:active{--rd-go-a:#3f31aa;--rd-go-b:#2e3299}
.rd-search-go:focus-visible{outline:3px solid #fff;outline-offset:2px}
.rd-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font-style:normal}
.rd-sugg{position:absolute;top:calc(100% + 6px);right:0;width:min(380px,calc(100vw - 24px));margin:0;padding:6px;list-style:none;background:var(--sl-surface);border:1px solid var(--sl-line-2);border-radius:12px;box-shadow:var(--sl-shadow);z-index:70;max-height:min(420px,70vh);overflow:auto}
.rd-sugg[hidden]{display:none}
.rd-sugg a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:8px;color:var(--sl-text);text-decoration:none;min-height:44px;justify-content:center}
.rd-sugg a:hover,.rd-sugg a:focus-visible{background:var(--sl-surface-2);outline-offset:-2px}
.rd-sugg b{font-size:14px;font-weight:700;line-height:1.25}.rd-sugg span{font-size:12px;color:var(--sl-muted)}
.rd-sugg .rd-sugg-all a{color:var(--sl-accent-text);font-weight:650;font-size:13px;border-top:1px solid var(--sl-line);border-radius:0 0 8px 8px;margin-top:4px}
.site-header .header-spacer{flex:0 0 0}
.site-header .tip-btn,.btn.pink{background:linear-gradient(135deg,#6a58e6,#4c51d9);color:#fff;border:0}
@media (max-width:1180px){.rd-search input{width:150px}}
/* v3.2: between 981 and 1100 px the "Support Our Free TV" label wrapped onto two lines (header 81 px) and squeezed the search box
   to 46-93 px. Up to 1100 px the button shows only the heart, as it already did on phones; the label stays in the accessible name
   (visually hidden instead of display:none, which also gives phones a real name instead of just the heart). */
@media (max-width:1100px){.site-header .tip-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:980px){
  .site-header{position:sticky}
  .site-header .nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;flex-wrap:nowrap;background:var(--sl-bg-2);padding:10px;border-bottom:1px solid var(--sl-line);box-shadow:var(--sl-shadow)}
  .site-header .nav.open{display:flex}
  .site-header .nav a,.site-header .nav summary{padding:12px 14px;font-size:16px}
  .rd-more-menu{position:static;box-shadow:none;border:0;background:transparent;padding:0 0 0 12px}
  .site-header .menu-toggle{display:inline-flex;order:3}
  .rd-search{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:10px clamp(12px,2.4vw,28px) 12px;gap:8px;background:var(--sl-bg-2);border-bottom:1px solid var(--sl-line);box-shadow:var(--sl-shadow);z-index:65}
  .rd-search-open .rd-search{display:flex}
  .rd-search input{display:block;flex:1 1 auto;width:auto;max-width:none;min-height:46px;font-size:16px}
  .rd-search-go{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;border:0;background:linear-gradient(135deg,var(--rd-go-a),var(--rd-go-b));color:#fff;font-weight:750;font-size:15px;cursor:pointer}
  .rd-sugg{left:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px);width:auto;top:calc(100% - 4px)}
  .rd-search-btn{order:2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--sl-line-2);background:var(--sl-surface);color:var(--sl-text);cursor:pointer;flex:none}
  .rd-search-btn:hover,.rd-search-open .rd-search-btn{border-color:var(--sl-accent)}
  .site-header .menu-toggle{min-width:44px;min-height:44px;justify-content:center;font-size:18px}
  .rd-nav-open .site-header .menu-toggle{border-color:var(--sl-accent);background:var(--sl-surface-2)}
  .site-header .tip-btn{order:1;margin-left:auto}
}

/* ---- buttons, chips, cards ---- */
.btn{border-color:var(--sl-line-2);background:var(--sl-surface-2);border-radius:999px;transition:border-color .15s,background .15s,transform .15s}
.btn:hover{border-color:var(--sl-accent);background:var(--sl-surface-3)}
.btn.primary,.rd-btn-primary{background:linear-gradient(135deg,#6a58e6,#4c51d9);color:#fff!important;border:0;box-shadow:0 8px 22px rgba(93,107,255,.35)}
.chip{background:rgba(255,255,255,.04);border-color:var(--sl-line-2);color:var(--sl-text-2)}
.chip.ok{border-color:#2a6b4c;color:var(--sl-ok)}.chip.warn{border-color:#6b5520;color:var(--sl-warn)}
.card,.night,.article-list li,.ch-link-list a{background:var(--sl-surface);border-color:var(--sl-line)}
.live-dot{color:var(--sl-live)}
.tier-a,.chip.tier-a{background:var(--sl-gold);color:#1a1500;border-color:transparent;font-weight:750}.theme-badge{background:#5a3fd0}

/* ---- main layout ---- */
main{max-width:1560px;padding:16px clamp(12px,2.4vw,28px) 56px}
.section-title{margin:40px 0 14px}
.section-title h1,.section-title h2,.rd-rail-head h2{font-size:var(--sl-fs-xl);letter-spacing:-.01em;margin:0}
.section-title a{font-weight:650;font-size:var(--sl-fs-s)}

/* ---- live area (home "hero"): player stays first; the art of what's on now glows behind it ---- */
.rd-live-hero{position:relative;isolation:isolate}
.rd-live-hero::before{content:"";position:absolute;inset:-16px calc(-1 * clamp(12px,2.4vw,28px)) -24px;z-index:-1;background-image:var(--rd-art,none);background-size:cover;background-position:center 30%;filter:blur(48px) saturate(1.2);opacity:.28;transition:opacity .6s;pointer-events:none;mask-image:linear-gradient(180deg,#000 40%,transparent)}
.rd-live-hero::after{content:"";position:absolute;inset:-16px calc(-1 * clamp(12px,2.4vw,28px)) -24px;z-index:-1;background:linear-gradient(180deg,rgba(7,6,14,.2),var(--sl-bg) 96%);pointer-events:none}
#player,.player{border-radius:var(--sl-r-l);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(140,123,255,.14)}
.program-info{background:linear-gradient(135deg,rgba(27,24,56,.92),rgba(19,17,42,.92));border-color:var(--sl-line);border-radius:var(--sl-r-l)}
.program-info h1{font-size:clamp(20px,2.3vw,30px);letter-spacing:-.015em}
.live .program-info>div:first-child{position:relative;padding-top:22px}   /* space for "On air now", reserved before rd.js runs (no layout shift) */
.rd-onair{position:absolute;top:0;left:0;display:inline-flex;align-items:center;gap:6px;font-size:var(--sl-fs-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-live);margin:0 0 4px}
.rd-onair::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sl-live);box-shadow:0 0 0 4px rgba(255,95,122,.2)}
.live aside .section-title h1,.live aside .section-title h2{font-size:var(--sl-fs-l)}
.ch-row{background:var(--sl-surface);border-color:var(--sl-line);border-radius:12px}
.ch-row:hover{border-color:var(--sl-line-2);background:var(--sl-surface-2)}
.ch-row.active{border-color:var(--sl-accent);background:linear-gradient(90deg,rgba(140,123,255,.22),rgba(19,17,42,.9))}
.ch-row.active::before{background:var(--sl-accent)}
.progress{background:rgba(255,255,255,.08)}.progress i{background:linear-gradient(90deg,#8c7bff,#5d6bff)}
.onnow-chip{background:var(--sl-surface);border-color:var(--sl-line)}
.onnow-label{color:var(--sl-accent-text)}

.rd-ch-more{display:none}
@media (max-width:1100px){
  .live aside .rd-ch-more{display:flex;width:100%;justify-content:center;margin:10px 0 4px;min-height:44px;font-weight:700}
  .live aside.rd-ch-collapsed #rail>.ch-row:nth-child(n+5):not(.active){display:none}
}
@media (pointer:coarse),(max-width:600px){.live aside .section-title .muted.small{display:none}}
/* Desktop channel list (item 4): on the home page the list sits under the player at full column width, so 13 full-width rows were
   a 1,100 px column of mostly empty space. Desktop/TV now use a compact multi-column grid (auto-fill, 2-4 columns by width) of
   denser rows: all 13 channels stay visible (nothing hidden, no extra click), order, active state, CH+/CH- keys and the ad slot below
   are unchanged. In a narrow sidebar (380 px) the same rule gives one column. */
@media (min-width:1101px){
  .live aside #rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;max-height:none;overflow:visible;padding-right:0;align-content:start}
  .live aside #rail .ch-row{min-height:0;grid-template-columns:52px 1fr;gap:10px;padding:8px 10px 9px}
  .live aside #rail .ch-row img{width:52px;height:38px}
  .live aside #rail .ch-row .t{font-size:14px;line-height:1.3}.live aside #rail .ch-row .s{font-size:12.5px;line-height:1.35}
  .live aside #rail .ch-row .progress{margin-top:5px}
  .live aside #rail .ch-row.active{box-shadow:0 0 0 1px var(--sl-accent),0 8px 22px rgba(93,107,255,.25)}
}

/* ---- content rails (home) ---- */
.rd-home{margin-top:8px}
.rd-rail{margin:34px 0 8px;position:relative}
.rd-rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin:0 0 12px;flex-wrap:wrap}
.rd-rail-head h2{margin:0;line-height:1.15}
.rd-rail-head p{margin:4px 0 0;color:var(--sl-muted);font-size:var(--sl-fs-s)}
.rd-rail-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.rd-rail-tools a{font-weight:650;font-size:var(--sl-fs-s);white-space:nowrap}
.rd-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--sl-line-2);background:var(--sl-surface);color:var(--sl-text);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.rd-arrow:hover{border-color:var(--sl-accent);background:var(--sl-surface-2)}
.rd-arrow[disabled]{opacity:.35;cursor:default}
.rd-track{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 2px;padding:4px 2px 14px;margin:0;list-style:none;scrollbar-width:thin;scrollbar-color:#3a3570 transparent;-webkit-overflow-scrolling:touch}
.rd-track::-webkit-scrollbar{height:6px}.rd-track::-webkit-scrollbar-thumb{background:#3a3570;border-radius:9px}
.rd-track>li{flex:0 0 var(--sl-card-w);max-width:var(--sl-card-w);min-width:0;scroll-snap-align:start}
.rd-card{position:relative;display:flex;flex-direction:column;height:100%;color:var(--sl-text);text-decoration:none;border-radius:var(--sl-r);background:var(--sl-surface);border:1px solid var(--sl-line);overflow:hidden;transition:transform .2s var(--sl-ease),border-color .2s,box-shadow .2s}
.rd-card:hover,.rd-card:focus-visible{text-decoration:none;transform:translateY(-3px);border-color:var(--sl-accent);box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 0 1px rgba(140,123,255,.4)}
.rd-card:focus-visible{outline-offset:3px}
.rd-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--c,#3a3570) 0%,#16132e 70%);display:flex;align-items:center;justify-content:center}
.rd-art img.rd-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.rd-art.rd-fit::before{content:"";position:absolute;inset:-12%;z-index:0;background:var(--bgimg) center/cover no-repeat;filter:blur(14px) brightness(.55) saturate(1.1)}
.rd-art.rd-fit img.rd-img{object-fit:contain}
.rd-art::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(7,6,14,.75));pointer-events:none}
.rd-word{position:relative;z-index:0;padding:10px 14px;text-align:center;font-weight:850;font-size:17px;line-height:1.1;text-shadow:0 2px 10px #000;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Designed fallback tile (item 2): used when a title has no usable art (black frame / dark title card / missing / failed load).
   The title in white on a deep tint of the channel colour, a channel-colour edge and star mark; never a black frame. */
.rd-art.rd-fb{background:linear-gradient(150deg,#2a2550 0%,#15122e 72%);background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--c,#8c7bff) 30%,transparent),transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--c,#8c7bff) 38%,#0c0a18) 0%,#15122e 72%);box-shadow:inset 4px 0 0 var(--c,#8c7bff)}
.rd-art.rd-fb::before{content:"\2726";position:absolute;top:8px;right:10px;z-index:0;font-size:15px;line-height:1;color:var(--c,#8c7bff);opacity:.9}
.rd-art.rd-fb .rd-word{color:#fff;font-size:18px;letter-spacing:-.01em;padding:12px 16px}
.rd-rail-live .rd-art.rd-fb::before{content:none}
.rd-logo{position:absolute;z-index:2;left:8px;bottom:8px;height:26px;width:auto;max-width:42%;object-fit:contain;filter:drop-shadow(0 2px 4px #000)}
.rd-logo-c{position:relative;z-index:0;height:52px;max-width:70%;object-fit:contain}
.rd-badge{position:absolute;z-index:2;top:8px;left:8px;padding:3px 7px;border-radius:6px;font-size:10.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;background:rgba(7,6,14,.78);color:#fff;border:1px solid rgba(255,255,255,.18)}
.rd-badge.is-live{background:var(--sl-live);border-color:transparent;color:#fff}
.rd-badge.r{left:auto;right:8px}
.rd-badge.is-color{background:linear-gradient(90deg,#ffb84d,#ff5e7e 50%,#7c6cff);border-color:transparent;color:#17132b}
.rd-spot-meta .rd-color{color:#ffd27a}
.rd-play{position:absolute;z-index:2;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#14112b;font-size:12px;opacity:.92;transition:transform .2s}
.rd-card:hover .rd-play{transform:scale(1.08)}
.rd-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.15)}
.rd-bar i{display:block;height:100%;background:linear-gradient(90deg,#9a8aff,#5d6bff)}
.rd-meta{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;min-width:0}
.rd-meta strong{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.rd-meta span{font-size:12.5px;color:var(--sl-muted);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-meta .rd-next{color:#bdb7d9}
.rd-rail.poster{--sl-card-w:var(--sl-poster-w)}
.rd-rail.poster .rd-art{aspect-ratio:3/4}
.rd-empty{color:var(--sl-muted);padding:18px;border:1px dashed var(--sl-line-2);border-radius:var(--sl-r);font-size:var(--sl-fs-s)}
.rd-skel{flex:0 0 var(--sl-card-w);height:190px;border-radius:var(--sl-r);background:linear-gradient(90deg,var(--sl-surface) 0,var(--sl-surface-2) 50%,var(--sl-surface) 100%);background-size:200% 100%;animation:rd-sh 1.4s linear infinite}
@keyframes rd-sh{to{background-position:-200% 0}}

/* ---- jump chips (home): streaming-style category bar ---- */
.rd-jump{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 6px;margin:22px 0 0;scrollbar-width:none;overscroll-behavior-x:contain}
.rd-jump::-webkit-scrollbar{display:none}
.rd-jump a{flex:none;padding:8px 15px;border-radius:999px;border:1px solid var(--sl-line-2);background:var(--sl-surface);color:var(--sl-text-2);font-weight:650;font-size:var(--sl-fs-s);text-decoration:none;white-space:nowrap;min-height:38px;display:inline-flex;align-items:center}
.rd-jump a:hover,.rd-jump a:focus-visible{border-color:var(--sl-accent);color:#fff;background:var(--sl-surface-2)}
.rd-home [id^="rd-"]{scroll-margin-top:76px}

/* ---- spotlight: cinematic featured title ---- */
.rd-spot{margin:18px 0 6px}
.rd-spot-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--sl-r-l);border:1px solid var(--sl-line);background:linear-gradient(135deg,var(--c,#3a3570),#0c0a18 60%);min-height:clamp(340px,34vw,500px);display:flex;align-items:flex-end}
.rd-spot-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 35%;display:block}
/* v3.5 "best first": a portrait poster or a publicity still is shown whole on the right of the stage over a blurred, darkened copy of
   itself (never cropped, never a 180 px thumbnail stretched to 1280 px). Landscape frames keep the cover layout. */
.rd-spot-bg{position:absolute;inset:-8%;z-index:-3;width:116%;height:116%;object-fit:cover;filter:blur(32px) brightness(.5) saturate(1.15);display:block}
.rd-spot-stage.is-contain .rd-spot-img{left:auto;right:0;width:46%;object-fit:contain;object-position:right center;padding:18px 3% 18px 0;box-sizing:border-box;filter:drop-shadow(0 12px 28px rgba(0,0,0,.6))}
.rd-spot-stage.is-contain .rd-spot-copy{max-width:min(760px,56%)}
.rd-spot-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,6,14,.95) 0%,rgba(7,6,14,.86) 36%,rgba(7,6,14,.45) 60%,rgba(7,6,14,0) 84%),linear-gradient(0deg,rgba(7,6,14,.85) 0%,rgba(7,6,14,0) 45%)}
.rd-spot-copy{position:relative;padding:clamp(22px,3.4vw,48px);max-width:min(760px,62%);display:flex;flex-direction:column;gap:12px;min-width:0}
.rd-eyebrow{margin:0;font-size:var(--sl-fs-xs);font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:var(--sl-accent-text);text-shadow:0 1px 8px #000}
.rd-spot h2{margin:0;font-size:clamp(30px,4.2vw,58px);line-height:1.02;letter-spacing:-.025em;overflow-wrap:anywhere;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.rd-spot-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;color:var(--sl-text-2);font-size:var(--sl-fs-s);font-weight:650;overflow:hidden}
.rd-spot-meta span{position:relative;white-space:nowrap}
.rd-spot-meta span+span::before{content:"\00b7";position:absolute;left:-11px;color:var(--sl-muted)}
.rd-short{display:none}
.rd-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff5f7a;box-shadow:0 0 0 3px rgba(255,95,122,.25);margin-right:2px;flex:none}
.rd-spot-status{display:flex;align-items:center;gap:8px}
.rd-spot p.rd-desc{margin:0;color:#e4e0f5;font-size:var(--sl-fs-m);line-height:1.55;max-width:56ch;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.rd-spot-status{margin:0;font-size:var(--sl-fs-s);color:var(--sl-text-2);font-weight:650}
.rd-spot-status.is-live{color:#ffc2cc}
.rd-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.rd-actions .btn{white-space:normal;text-align:center;max-width:100%;min-height:46px;padding:11px 20px;font-weight:750;font-size:15px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.rd-btn-primary{background:#fff!important;color:#14112b!important;box-shadow:0 10px 26px rgba(0,0,0,.45)!important}
.rd-btn-primary:hover{background:#ece8ff!important}
.rd-btn-live{background:rgba(255,95,122,.16);border:1px solid rgba(255,95,122,.6);color:#fff}
.rd-btn-live:hover{background:rgba(255,95,122,.28);border-color:#ff5f7a}
.rd-btn-live{gap:9px!important}
.rd-btn-ghost{background:rgba(7,6,14,.45);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
.rd-btn-ghost:hover{border-color:#fff;background:rgba(7,6,14,.65)}
.rd-picks{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.rd-picks::-webkit-scrollbar{display:none}
.rd-pick{flex:0 0 clamp(128px,13vw,180px);min-width:0;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:var(--sl-muted);text-align:left;cursor:pointer;font:inherit}
.rd-pick-art{display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--sl-surface-2);border:2px solid transparent;transition:border-color .15s,opacity .15s;opacity:.7}
.rd-pick-art img{width:100%;height:100%;object-fit:cover;display:block}
.rd-pick-art.is-contain{position:relative;isolation:isolate}
.rd-pick-art.is-contain::before{content:"";position:absolute;inset:-12%;z-index:0;background:var(--bgimg) center/cover no-repeat;filter:blur(12px) brightness(.55)}
.rd-pick-art.is-contain img{position:relative;z-index:1;object-fit:contain}
.rd-pick-t{font-size:12.5px;font-weight:650;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-pick:hover .rd-pick-art{opacity:1}
.rd-pick[aria-pressed=true] .rd-pick-art{border-color:var(--sl-accent);opacity:1}
.rd-pick[aria-pressed=true] .rd-pick-t{color:var(--sl-text)}
.rd-pick:focus-visible{outline:none}.rd-pick:focus-visible .rd-pick-art{outline:3px solid var(--sl-accent-text);outline-offset:2px}
@media (max-width:800px){
  .rd-spot-stage{display:block;min-height:0;background:#0c0a18}
  .rd-spot-img{position:relative;inset:auto;z-index:0;aspect-ratio:16/9;height:auto;object-position:center}
  .rd-spot-stage.is-contain .rd-spot-img{width:100%;padding:10px 0 0;object-position:center;filter:none}
  .rd-spot-stage.is-contain .rd-spot-copy{max-width:none}
  .rd-spot-bg{inset:0 0 auto 0;width:100%;height:auto;aspect-ratio:16/9}
  .rd-spot-shade{inset:0 0 auto 0;aspect-ratio:16/9;height:auto;z-index:1;background:linear-gradient(0deg,#0c0a18 0%,rgba(12,10,24,0) 40%)}
  .rd-spot-copy{max-width:none;margin-top:-34px;z-index:2;padding:0 16px 18px;gap:10px}
  .rd-actions .btn{flex:1 1 auto;justify-content:center}
  .rd-actions .rd-btn-primary{flex-basis:100%}
}
@media (max-width:480px){.rd-long{display:none}.rd-short{display:inline}.rd-actions .btn{flex:1 1 40%;padding:11px 12px}.rd-eyebrow{letter-spacing:.12em}}
/* ---- existing home sections, restyled ---- */
html body #sl-home-featured{border-color:var(--sl-line);background:radial-gradient(ellipse at 0 0,rgba(140,123,255,.18),transparent 55%),linear-gradient(135deg,#15122d,#0b0918);border-radius:var(--sl-r-l)}
html body #sl-home-featured .sl-feature-eyebrow{color:var(--sl-accent-text)}
html body #sl-home-featured .sl-feature-card{border-color:var(--sl-line);background:var(--sl-surface);border-radius:var(--sl-r)}
html body #sl-home-featured .sl-feature-card:hover,html body #sl-home-featured .sl-feature-card:focus-visible{border-color:var(--sl-accent)}
html body #sl-home-featured .sl-feature-art{background:linear-gradient(135deg,#2e2866,#16132e 55%,#3b2160)}
html body #sl-home-featured .sl-feature-badge{background:#ece8ff;color:#1a1640}
html body #sl-home-featured .sl-feature-head{flex-wrap:wrap}html body #sl-home-featured .sl-feature-head>div{flex:1 1 220px;min-width:0}
.prime-card{background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:var(--sl-r);padding:12px 14px;transition:border-color .15s}
.prime-card:hover{border-color:var(--sl-line-2)}
.prime-card .ch{color:var(--sl-accent-text);opacity:1;font-weight:700;letter-spacing:.02em}
.prime-card .t a{color:var(--sl-text)}
.tile{background:var(--sl-surface);border-color:var(--sl-line);border-radius:var(--sl-r)}
.tile:hover{border-color:var(--sl-accent)}
.tile .art{height:118px}
.seo-intro,.seo-links{margin-top:40px}
.seo-intro{padding:20px 22px;border:1px solid var(--sl-line);border-radius:var(--sl-r-l);background:var(--sl-surface)}
.seo-intro h2{margin-top:0}
/* target size (WCAG 2.5.8, Lighthouse): text-list links and the A-Z letters get >= 24 px tall hit areas; prime "Tune in" links underlined */
.seo-links .title-list li a,.title-list li a{display:inline-block;min-height:24px;padding:2px 0}
p.az a{display:inline-block;min-width:24px;min-height:24px;line-height:24px;text-align:center}
.prime-card .when a{text-decoration:underline;text-underline-offset:2px}

/* ---- TV guide ---- */
.guide-wrap{border-color:var(--sl-line);border-radius:var(--sl-r-l);background:var(--sl-bg-2);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.g-head,.g-corner{background:#17143a}
.g-corner{color:var(--sl-accent-text);font-size:var(--sl-fs-s);letter-spacing:.06em;text-transform:uppercase}
.g-times span{color:var(--sl-text-2);border-left-color:var(--sl-line-2)}
.g-row{border-bottom-color:rgba(42,38,80,.7)}
.g-ch{background:var(--sl-surface);border-right-color:var(--sl-line)}
.g-ch:hover{background:var(--sl-surface-2)}
.g-ch>div{min-width:0}.g-ch img{width:46px;flex:none}.g-ch b{line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.g-ch small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.g-ch b,.g-ch small{display:none}}
.g-prog{background:#191636;border-color:#2b2756;border-radius:10px;transition:border-color .15s,background .15s}
.g-prog:hover{border-color:var(--sl-accent);background:#211d46}
.g-prog.now{background:linear-gradient(135deg,rgba(140,123,255,.32),rgba(93,107,255,.18));border-color:var(--sl-accent);box-shadow:inset 3px 0 0 var(--sl-live)}
.g-prog small{color:var(--sl-muted)}
.g-nowline{background:var(--sl-live);box-shadow:0 0 10px var(--sl-live)}
.theme-strip .chip,.theme-strip span{border-radius:999px}
.rd-guide-intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 12px;padding:14px 18px;border:1px solid var(--sl-line);border-radius:var(--sl-r-l);background:linear-gradient(135deg,#17143a,#0f0d22)}
.rd-guide-intro p{margin:0;color:var(--sl-text-2);font-size:var(--sl-fs-s)}
.rd-guide-intro .rd-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--sl-fs-xs);color:var(--sl-muted)}
.rd-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px}
/* v3.2 (Oct 26 2026) guide layout shift (Lighthouse CLS 0.69 desktop / 0.91 mobile on 8743aa75). The intro is now server HTML
   (no reservation needed). The theme-nights strip above the guide is filled by the guide script after /api/lineup arrives and is
   88-150 px tall on phones, so it pushed the whole guide down: it now reserves its tallest height at each width (measured by
   qa4/themes_max.py over 400 days of theme nights, Oct 26 2026), as a constant min-height so neither filling nor a shorter week moves
   the guide. The empty guide reserves its 13-row height (41 px head + 13 x 74 px rows = 1,003 px; the box's own max-height still caps it). */
#themes{min-height:16px;align-content:flex-start}
@media (max-width:1599px){#themes{min-height:40px}}
@media (max-width:899px){#themes{min-height:64px}}
@media (max-width:699px){#themes{min-height:88px}}
@media (max-width:599px){#themes{min-height:112px}}
@media (max-width:499px){#themes{min-height:135px}}
@media (max-width:359px){#themes{min-height:150px}}
#guide:empty{min-height:1003px}
/* Guide (item 3): zoom control, compact labels for short programs, keyboard focus, last-watched channel */
.rd-guide-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.rd-zoom{display:inline-flex;padding:3px;border:1px solid var(--sl-line-2);border-radius:999px;background:var(--sl-bg-2)}
.rd-zoom button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--sl-text-2);font:inherit;font-size:var(--sl-fs-s);font-weight:700;cursor:pointer}
.rd-zoom button:hover{color:#fff;background:var(--sl-surface-2)}
.rd-zoom button[aria-pressed=true]{background:#ece8ff;color:#1a1640}
@media (pointer:coarse){.rd-zoom button{min-height:44px}}
.guide-wrap.rd-gw{scroll-padding-left:200px;scroll-padding-top:44px;overscroll-behavior-x:contain}
@media (max-width:599px){.guide-wrap.rd-gw{scroll-padding-left:120px}}
.g-prog{line-height:1.25}
.g-prog:focus-visible,.g-ch:focus-visible{outline:3px solid #fff;outline-offset:-3px;border-radius:10px;z-index:3;box-shadow:0 0 0 6px rgba(140,123,255,.55)}
.g-ch:focus-visible{z-index:6}
.g-prog.rd-gp-m .tier-a{display:none}
.g-prog.rd-gp-m.prime b::before{content:"\2605\00a0";color:var(--sl-gold)}
.g-prog.rd-gp-m b{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;font-size:12.5px}
.g-prog.rd-gp-m small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;margin-top:2px}
.g-prog.rd-gp-s{padding:5px 6px;font-size:12px}
.g-prog.rd-gp-s b{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2}
.g-prog.rd-gp-s small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* hidden visually, still read: real times stay in the name */
.g-prog.rd-gp-xs{padding:4px 0;display:flex;justify-content:center}
.g-prog.rd-gp-xs b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;-webkit-line-clamp:unset;display:block;white-space:nowrap;text-overflow:ellipsis;max-height:100%}
.rd-g-active .g-ch{background:linear-gradient(90deg,#2d2766,#1b1838);box-shadow:inset 4px 0 0 var(--sl-accent)}
.rd-g-badge{display:inline-block;margin-top:3px;padding:1px 6px;border-radius:5px;background:#ece8ff;color:#1a1640;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.5;white-space:nowrap}
.rd-g-active .g-ch small{display:none}
@media (max-width:600px){.rd-g-badge{font-size:9px;padding:0 4px;margin-top:0}.rd-g-active .g-ch{flex-direction:column;justify-content:center;gap:4px}}

/* ---- channel / watch / content pages ---- */
.seo-page{max-width:1080px}
.crumbs{font-size:var(--sl-fs-s)}
.page h1,.watch-hero h1{letter-spacing:-.02em;line-height:1.1}
.page h1{font-size:clamp(28px,3.6vw,40px)}
.watch-hero{padding:clamp(16px,2.4vw,26px);margin:14px 0 18px;border:1px solid var(--sl-line);border-radius:var(--sl-r-l);background:radial-gradient(ellipse at 0 0,rgba(140,123,255,.16),transparent 55%),linear-gradient(135deg,#17143a,#0e0c20)}
.ch-logo-lg{background:rgba(255,255,255,.03);border-radius:var(--sl-r);padding:6px}
.od-wrap{box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(140,123,255,.14)}
.od-bar{max-width:960px;margin-top:8px;padding:8px 12px;border-radius:var(--sl-r-s);background:var(--sl-surface);font-size:var(--sl-fs-s)}
.page p a.btn,.seo-intro a.btn,#pi-desc a.btn{text-decoration:none}
.watch-hero a.btn[href^="/#ch="]{background:linear-gradient(135deg,#6a58e6,#4c51d9);color:#fff;border:0;box-shadow:0 8px 22px rgba(93,107,255,.3)}
.writeup h2,.ch-about h2{margin-top:30px}
.title-list li a{color:var(--sl-accent-text)}
.title-search input,input[type=search]{background:var(--sl-bg-2);border:1px solid var(--sl-line-2);border-radius:999px;padding:10px 16px;min-height:44px;color:var(--sl-text);max-width:100%}
.title-search input:focus{border-color:var(--sl-accent);outline:none;box-shadow:0 0 0 3px rgba(140,123,255,.3)}

/* ---- footer ---- */
footer.site-footer{border-top:1px solid var(--sl-line);background:linear-gradient(180deg,transparent,#0b0918);padding:34px clamp(12px,2.4vw,28px)}
footer.site-footer a{color:var(--sl-text-2)}
footer.site-footer p{max-width:760px;margin:12px auto 0;line-height:1.55}

/* ---- phones ---- */
@media (max-width:600px){
  :root{--sl-card-w:44vw;--sl-poster-w:34vw}
  .rd-rail.rd-rail-live{--sl-card-w:66vw}
  .rd-track{gap:10px}
  .rd-meta{padding:8px 10px 10px}.rd-meta strong{font-size:13.5px}.rd-meta span{font-size:12px}
  .rd-rail:not(.rd-rail-live) .rd-play{width:28px;height:28px;font-size:11px}
  .rd-word{font-size:14px;padding:8px}
  .rd-art.rd-fb .rd-word{font-size:15px;padding:10px 12px}
  .program-info h1{font-size:22px}
  .program-info #pi-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  #share .btn,#share a,#share button{padding:6px 12px;font-size:13px;min-height:36px}
  .rd-rail{margin-top:28px}
  .rd-arrow{display:none}
  .rd-spot h2{font-size:clamp(24px,7.4vw,32px)}
  .program-info{padding:14px}
  .watch-hero{padding:14px}
}
@media (min-width:1700px){:root{--sl-card-w:268px;--sl-poster-w:170px}}
/* TV-sized screens: bigger focus ring for remote-style navigation */
@media (min-width:1900px){:focus-visible{outline-width:4px;outline-offset:3px}.rd-meta strong{font-size:16px}}
@media (prefers-reduced-motion:reduce){
  .rd-card,.rd-play,.rd-skel,.btn,.tile,.g-prog,.prime-card,.rd-live-hero::before,.rd-pick-art{transition:none!important;animation:none!important}
  html{scroll-behavior:auto!important}
  .rd-track{scroll-behavior:auto}
  .rd-card:hover,.rd-card:focus-visible{transform:none}
}
/* v3.1 (Oct 25 2026, item 3 follow-up from the 9e76dbf8 screenshot review): a program that started before the visible part of the guide
   keeps its title and times on screen (sticky label inside its own tile; the tile still clips it, so positions/durations are unchanged),
   and narrow tiles wrap only between words (no "Ato/rme/nt" splits; long words are clipped by the tile instead). */
.g-prog{overflow:clip}
.g-prog>b,.g-prog>small{position:sticky;left:198px;width:fit-content;max-width:100%}
@media (max-width:600px){.g-prog>b,.g-prog>small{left:118px}}
.g-prog.rd-gp-m b,.g-prog.rd-gp-s b{overflow-wrap:normal;word-break:normal}
/* v3.2 (Oct 26 2026, cosmetic from the v3.1 screenshot review): on /series/ the "All N episodes ->" link split across two lines beside
   the "Start with ..." pill on phones. The pill and the link now sit in a wrapping row and the link never breaks inside itself. */
.series-card p:has(>a.btn.small+a){display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.series-card a.btn.small+a{white-space:nowrap}

/* ===== v3.3 (Oct 29 2026): home layout, promo strip, poster rails, continue watching, watch-page theater ===== */
/* Home, desktop: the live channel list sits beside the player again (Pluto-style), and the sponsor banner + "Start with our best"
   shelf (kept directly after the player in the HTML, owner-approved order) span the full width underneath both columns. The DOM
   order is unchanged, only the grid placement. Below 1100 px the grid is one column, so the HTML order is what you see. */
@media (min-width:1101px){
  .live{grid-template-columns:minmax(0,1fr) 360px;align-items:stretch}
  .live>section{order:1}.live>aside{order:2;display:flex;flex-direction:column;height:0;min-height:100%;overflow:hidden} /* height:0 + min-height:100%: the aside takes the player column's height instead of stretching the row; the channel list scrolls inside */
  .live>[data-sl-order="player-first"]{order:3;grid-column:1/-1;min-width:0}
  .live aside #rail{grid-template-columns:1fr;flex:1 1 auto;overflow:auto;max-height:none;gap:6px;scrollbar-width:thin}
  .live aside #rail .ch-row{padding:7px 10px 8px;flex:0 0 auto;min-height:auto} /* min-height:auto, not 0: with 0 the auto grid rows would be squeezed to fit the column instead of scrolling */
  .live aside>*{flex:0 0 auto}.live aside #rail{flex:1 1 auto;padding-bottom:14px;mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
  /* compact sidebar rows: channel + what's on now; the "Next" line stays on the channel you're watching (and on hover) so the
     whole 13-channel list fits beside the player with little scrolling */
  .live aside #rail .ch-row .s+.s{display:none}.live aside #rail .ch-row.active .s+.s,.live aside #rail .ch-row:hover .s+.s{display:block}
  .live aside #rail .ch-row img{width:46px;height:34px}.live aside #rail .ch-row{grid-template-columns:46px 1fr;gap:9px}
  .live aside .ad-slot{margin-top:12px}
  .live>[data-sl-order="player-first"] #sl-top{max-width:none;margin:4px 0 0;padding:0}
  .live>[data-sl-order="player-first"] #sl-top a{margin-top:14px}
  html body .live>[data-sl-order="player-first"] #sl-home-featured{margin-top:18px}
}
/* The Halloween / tip strip: one slim line instead of a two-row block, above the player (never pushes it far down). */
.sl-promo{margin:0 0 10px;padding:7px 38px 7px 12px;font-size:13px;gap:4px 10px;border-radius:10px;line-height:1.3}
.sl-promo .tip{font-size:12.5px}.sl-promo .tip a.btn{padding:4px 11px;font-size:12.5px;min-height:0}
.sl-promo .tip .muted{display:none}.sl-promo .x{top:3px;right:4px;width:28px;height:28px;font-size:18px}
@media (max-width:640px){.sl-promo{font-size:12.5px;padding:7px 34px 7px 10px}.sl-promo:not(.tip-only) .tip{display:none}.sl-promo.tip-only .muted,.sl-promo.tip-only .hide-m{display:none}}

/* Poster rails (2:3 artwork, Wikimedia Commons public-domain posters). */
:root{--sl-poster-w:164px}
.rd-rail.poster .rd-art,.rd-art.rd-poster{aspect-ratio:2/3}
.rd-art.rd-poster img.rd-img{object-fit:cover;object-position:center top}
.rd-rail.poster .rd-art::after{background:linear-gradient(180deg,transparent 60%,rgba(7,6,14,.7))}
.rd-rail.poster .rd-meta strong{font-size:13.5px;min-height:0}
.rd-rail.poster .rd-art.rd-fb .rd-word{font-size:17px}
/* Continue watching: progress bar on the card, remove button outside the link. */
.rd-rail-cw li{position:relative}
.rd-card .rd-bar{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;background:rgba(255,255,255,.22)}
.rd-card .rd-bar i{display:block;height:100%;background:var(--sl-live)}
.rd-cw-x{position:absolute;top:6px;right:6px;z-index:3;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(7,6,14,.78);color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}
.rd-rail-cw li:hover .rd-cw-x,.rd-rail-cw li:focus-within .rd-cw-x,.rd-cw-x:focus-visible{opacity:1}
@media (pointer:coarse){.rd-cw-x{opacity:1;width:34px;height:34px}}
.rd-rail-cw .rd-badge{background:var(--sl-live);border-color:transparent}

/* ---- watch page: theater ---- */
.rd-theater .od-wrap{max-width:none;border-radius:var(--sl-r-l);box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(140,123,255,.18)}
.rd-theater video{outline:none}
.rd-theater .od-bar{max-width:none;background:transparent;padding:8px 2px 0;color:var(--sl-muted)}
.rd-theater+.watch-hero,.rd-theater~.watch-hero{margin-top:12px}
.watch-hero .chips{margin:6px 0 10px}
.watch-hero p .btn.small{min-height:40px;padding:8px 16px;font-weight:700;border-radius:999px}
.rd-cover{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;background:linear-gradient(135deg,var(--c,#3a3570) 0%,#0c0a18 70%);isolation:isolate;overflow:hidden;border-radius:inherit}
.rd-cover::before{content:"";position:absolute;inset:-6%;z-index:-2;background:var(--bgimg,none) center/cover no-repeat;filter:blur(26px) brightness(.5) saturate(1.15)}
.rd-cover.rd-fb::before{background:radial-gradient(90% 120% at 100% 0%,rgba(140,123,255,.35),transparent 60%),linear-gradient(150deg,#2a2550 0%,#0c0a18 72%);filter:none}
.rd-cover .rd-cover-img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;display:block}
.rd-cover.rd-fit .rd-cover-img{object-fit:contain}
.rd-cover::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 60% at 50% 50%,rgba(7,6,14,.15),rgba(7,6,14,.55)),linear-gradient(180deg,rgba(7,6,14,.1),rgba(7,6,14,.75));pointer-events:none}
.rd-cover-title{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(16px,4vw,44px);right:clamp(16px,4vw,48px);font-size:clamp(24px,4.4vw,56px);font-weight:900;letter-spacing:-.02em;line-height:1.05;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.rd-bigplay{display:inline-flex;align-items:center;gap:12px;padding:12px 26px 12px 16px;border-radius:999px;border:0;background:linear-gradient(135deg,#8c7bff,#5d6bff);color:#fff;font:inherit;font-weight:800;font-size:18px;cursor:pointer;box-shadow:0 14px 40px rgba(93,107,255,.45),0 0 0 1px rgba(255,255,255,.18);transition:transform .2s var(--sl-ease),box-shadow .2s}
.rd-bigplay:hover,.rd-cover:hover .rd-bigplay{transform:scale(1.04);box-shadow:0 18px 50px rgba(93,107,255,.6),0 0 0 1px rgba(255,255,255,.3)}
.rd-bigplay:focus-visible{outline:3px solid #fff;outline-offset:3px}
.rd-bigplay-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);font-size:18px;padding-left:4px}
.rd-bigplay-s{font-weight:600;font-size:14px;opacity:.9;margin-left:-4px}
.rd-startover{background:rgba(7,6,14,.6);border:1px solid rgba(255,255,255,.3);color:#fff;font:inherit;font-weight:650;font-size:13.5px;padding:7px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px)}
.rd-startover:hover{background:rgba(7,6,14,.85)}
.rd-cover-free{position:absolute;top:12px;left:14px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(7,6,14,.62);border:1px solid rgba(255,255,255,.18);padding:4px 9px;border-radius:6px}
@media (max-width:600px){.rd-bigplay{font-size:16px;padding:10px 20px 10px 12px}.rd-bigplay-ico{width:40px;height:40px;font-size:15px}.rd-cover-title{font-size:clamp(20px,6.5vw,32px)}.rd-theater .od-wrap{border-radius:var(--sl-r)}}
/* up next (after the film ends) */
.rd-upnext{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);padding:clamp(14px,3vw,36px);background:rgba(7,6,14,.9);backdrop-filter:blur(10px);border-radius:inherit}
.rd-upnext-card{position:relative;flex:0 0 clamp(150px,28%,330px);border-radius:var(--sl-r);overflow:hidden;border:1px solid var(--sl-line-2)}
.rd-upnext-card .rd-art{aspect-ratio:16/9}
.rd-upnext-copy{min-width:0;max-width:560px}
.rd-upnext-copy h2{margin:4px 0 6px;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.02em;line-height:1.1}
.rd-upnext-meta{margin:0 0 6px;color:var(--sl-muted);font-size:var(--sl-fs-s)}
.rd-upnext-count{margin:0 0 14px;color:var(--sl-text-2);font-size:var(--sl-fs-m)}.rd-upnext-count b{color:#fff;font-variant-numeric:tabular-nums}
.rd-upnext .rd-actions{display:flex;flex-wrap:wrap;gap:8px}
.rd-upnext .btn{min-height:42px;border-radius:999px;font-weight:750}
.rd-upnext .rd-btn-primary{background:linear-gradient(135deg,#8c7bff,#5d6bff);color:#fff;border:0}
.rd-upnext .rd-btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff}
@media (max-width:700px){/* phone: the overlay must fit a 16:9 box ~206 px tall, so: eyebrow, 2-line title, countdown, two buttons */
  .rd-upnext{flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding:12px 14px;overflow:hidden}.rd-upnext-card{display:none}
  .rd-upnext .rd-eyebrow{font-size:10px;margin:0 0 2px}.rd-upnext-copy h2{font-size:16px;line-height:1.2;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rd-upnext-meta{display:none}.rd-upnext-count{margin:0 0 8px;font-size:13px}.rd-upnext .btn{min-height:36px;padding:6px 12px;font-size:13px}.rd-upnext .rd-actions a.rd-btn-ghost{display:none}}
/* rails on the watch page */
.rd-watch-rails{margin:6px 0 10px}
.rd-watch-rails .rd-rail{margin-top:26px}
[data-sl-order="watch-player-first"] #sl-top{max-width:none;margin:16px 0 0;padding:0}
.seo-page .crumbs{margin-bottom:10px}
/* the title text behind a card's picture must never peek out beside a "contained" image (it returns only when the image fails) */
.rd-art.has-img .rd-word{visibility:hidden}

/* ===== v3.4 (Oct 29 2026, owner: "too much clutter, make it look like Pluto/Tubi/Netflix"): the home page is a hero + rails ===== */
/* 1. now-playing box: the title, the channel/time/length chips and the two buttons. Description, rights chip and share row live on
      the title's own page (they were four extra lines under the player on phones) */
.live .program-info #pi-desc,.live .program-info #share,.live .program-info .chip.warn,.live .program-info .chip.ok{display:none}
.live .program-info{padding:14px 16px 12px}
/* 2. the old "Tonight in prime time" row and "Browse all channels" tile grid are hidden on the home page (rd.js adds .rd-hide; the
      :has() rules cover the headings before rd.js runs). The Live-now rail and the TV guide show the same things. */
.rd-hide,#prime,#tiles,.section-title:has(>#prime-h),.section-title:has(+#tiles){display:none}
/* 3. phones/tablets: the channel list under the player duplicated the "On now" strip and the Live-now rail -> gone (the ad unit in
      the aside stays). Desktop keeps the guide beside the player. */
@media (max-width:1100px){.live aside .section-title,.live aside #rail,.live aside .rd-ch-more{display:none}}
/* 4. "Start with our best" is a plain rail like the others: no box, eyebrow or blurb */
html body #sl-home-featured{border:0;background:none;padding:0;margin:26px 0 0;border-radius:0}
html body #sl-home-featured .sl-feature-eyebrow,html body #sl-home-featured .sl-feature-sub{display:none}
html body #sl-home-featured .sl-feature-head{margin-bottom:10px;align-items:baseline}
html body #sl-home-featured h2{font-size:var(--sl-fs-xl);letter-spacing:-.01em;line-height:1.15}
html body #sl-home-featured .sl-feature-all{color:var(--sl-text-2);font-weight:650;font-size:var(--sl-fs-s)}
html body .live>[data-sl-order="player-first"] #sl-home-featured{margin-top:26px}
/* 5. promo strip on phones: one line (headline ellipsized, first link only) */
@media (max-width:1100px){.sl-promo:not(.tip-only){flex-wrap:nowrap;align-items:center}.sl-promo:not(.tip-only)>span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sl-promo .links{flex:none;white-space:nowrap}.sl-promo .links a:not(:first-child){display:none}}
/* 6. rail heads: title left, quiet "All ... ->" link + arrows right, no subtitle */
.rd-rail{margin-top:30px}.rd-rail-head{align-items:baseline;margin-bottom:10px}
.rd-rail-tools a{color:var(--sl-text-2);font-weight:650}
.rd-home{margin-top:4px}
/* 7. the SEO text (What is Starlite TV?, film guides, every title A-Z ...) is folded into one line at the bottom (withSeoFold) */
.rd-fold{margin:44px 0 6px;border-top:1px solid var(--sl-line)}
.rd-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 4px;color:var(--sl-text-2);font-weight:650;font-size:var(--sl-fs-s)}
.rd-fold>summary::-webkit-details-marker{display:none}
.rd-fold>summary::after{content:"";flex:none;width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);margin-left:auto;transition:transform .15s}
.rd-fold[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.rd-fold>summary:hover,.rd-fold>summary:focus-visible{color:#fff}
.rd-fold .seo-intro,.rd-fold .seo-links{margin-top:18px}
/* 8. promo strip on desktop: one line (the tip text and "Other ways" go; the tip button and Ko-fi stay) */
@media (min-width:1101px){.sl-promo .tip>span:first-child,.sl-promo .hide-m{display:none}.sl-promo{flex-wrap:nowrap}.sl-promo>span:first-child{white-space:nowrap}.sl-promo .links{flex-wrap:nowrap}.sl-promo .tip{flex-wrap:nowrap}}

/* ===== v3.6 (Oct 30 2026): series pages look like seasons (functions/series/[slug].js) ===== */
.rd-series-page{max-width:1240px}
.rd-series-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center;margin:8px 0 22px;padding:clamp(18px,3vw,36px);border-radius:var(--sl-r-l);border:1px solid var(--sl-line);overflow:hidden;isolation:isolate;background:linear-gradient(135deg,color-mix(in srgb,var(--c,#3a3570) 55%,#0c0a18) 0%,#0c0a18 70%)}
.rd-series-hero::before{content:"";position:absolute;inset:-10%;z-index:-2;background:var(--bgimg,none) center/cover no-repeat;filter:blur(36px) brightness(.42) saturate(1.2);opacity:.9}
.rd-series-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,6,14,.78) 0%,rgba(7,6,14,.45) 55%,rgba(7,6,14,.15) 100%)}
.rd-series-hero h1{margin:6px 0 10px;font-size:var(--sl-fs-2xl);line-height:1.05;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.rd-series-hero .lead{margin:0 0 10px;max-width:60ch;color:var(--sl-text-2);font-size:var(--sl-fs-m);line-height:1.5}
.rd-series-meta{margin:0 0 14px;color:var(--sl-muted);font-size:var(--sl-fs-s);font-weight:650}
.rd-series-art{position:relative;aspect-ratio:16/9;border-radius:var(--sl-r);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:var(--sl-shadow);background:#0c0a18}
.rd-series-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rd-series-art.rd-fit img{object-fit:contain}
.rd-series-art.rd-fit::before{content:"";position:absolute;inset:-12%;background:var(--bgimg) center/cover no-repeat;filter:blur(14px) brightness(.55)}
.rd-seasons{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 12px;margin:0 0 4px;border-bottom:1px solid var(--sl-line)}
.rd-seasons::-webkit-scrollbar{display:none}
.rd-season-tab{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--sl-line-2);background:var(--sl-surface);color:var(--sl-text-2);font-weight:750;font-size:var(--sl-fs-s);text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.rd-season-tab small{font-size:11px;font-weight:700;color:var(--sl-muted);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:999px}
.rd-season-tab:hover,.rd-season-tab:focus-visible{text-decoration:none;border-color:var(--sl-accent);color:#fff}
.rd-season-tab.is-on{background:linear-gradient(135deg,#6a58e6,#4c51d9);border-color:transparent;color:#fff}
.rd-season-tab.is-on small{color:#fff;background:rgba(255,255,255,.18)}
.rd-season{margin:22px 0 0;scroll-margin-top:80px}
.rd-season-h{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-size:var(--sl-fs-xl);letter-spacing:-.01em}
.rd-season-h .muted{font-size:var(--sl-fs-s);font-weight:650}
html.rd .rd-series-page.rd-tabbed .rd-season:not(.is-on){display:none}
.rd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.rd-grid>li{min-width:0}
.rd-ep .rd-epno{left:8px;background:rgba(7,6,14,.82)}
.rd-ep .rd-art.rd-fb .rd-word{font-size:16px}
.rd-ep .rd-badge.is-resume{left:auto;right:8px;background:var(--sl-accent-2);border-color:transparent}
.rd-series-info{margin:40px 0 10px;padding-top:18px;border-top:1px solid var(--sl-line)}
.rd-series-info h2{font-size:var(--sl-fs-l);margin:0 0 8px}
.rd-series-info #next-airs{margin:0 0 6px;padding-left:18px;line-height:1.6}
.rd-rights{margin:14px 0}
.rd-rights>summary{cursor:pointer;font-weight:700;color:var(--sl-text-2);min-height:40px;display:flex;align-items:center}
.rd-rights>summary:hover{color:#fff}
.rd-rights p{color:var(--sl-text-2);font-size:var(--sl-fs-s);line-height:1.55}
@media (max-width:800px){
  .rd-series-hero{grid-template-columns:1fr;padding:16px}
  .rd-series-art{order:-1;max-width:100%}
  .rd-series-hero .lead{font-size:var(--sl-fs-s)}
  .rd-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .rd-ep .rd-meta{padding:8px 10px 10px}
  .rd-ep .rd-meta strong{font-size:13px}
}

/* v3.7: affiliate line under the player */
.rd-affil{max-width:1200px;margin:8px auto 0;padding:0 12px;font-size:.92rem;color:var(--muted,#aab)}
.rd-affil a{color:var(--accent,#ffd166);text-decoration:underline;text-underline-offset:3px}
.rd-affil-note{opacity:.7;font-size:.82rem}