/* ═══════════════════════════════════════════════════════════════════════════
   channel.css — the Channel page, rebuilt in the Season 2 language (Aug 2026).

   Every class is `ch-` prefixed. Loads after home-v2.css so it can reuse the
   `hv-` section header and the `--hv-a-*` accent tokens.

   ⚠ THE PLAYER IS NOT STYLED HERE. `.stream-stage`, `.stream-outer`, the CRT
   off-air state (`.off-*`), the progress bar (`.ep-prog-*`), the reaction bar
   and the viewer popover all keep their rules in main.css and are deliberately
   untouched — the player is the best-built thing on the site. This file styles
   what sits AROUND it, which is what was missing.

   ⚠ Never give a `.page` element a top-level `display` rule here — see the note
   at the top of profile.css. Scope to a descendant.
   ═══════════════════════════════════════════════════════════════════════════ */

#page-live .page-inner { max-width: 1100px; }

/* ── page head — Home, Library and Season all have one; this page didn't ── */
.ch-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 18px; }
.ch-title { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ch-live {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 7px;
  background: rgba(248,113,113,.14); color: #fca5a5; border: 1px solid rgba(248,113,113,.34);
}
.ch-live i { width: 7px; height: 7px; border-radius: 50%; background: #f87171; animation: ch-pulse 1.9s ease-in-out infinite; }
@keyframes ch-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(248,113,113,.5); } 50% { opacity: .55; box-shadow: 0 0 0 5px rgba(248,113,113,0); } }
.ch-live.off { background: rgba(255,255,255,.05); color: var(--text-3); border-color: var(--border); }
.ch-live.off i { background: var(--text-3); animation: none; }
.ch-sub { font-size: 13px; color: var(--text-3); font-weight: 600; margin-left: auto; text-align: right; }
.ch-sub b { color: var(--text-2); font-weight: 700; }
@media (max-width: 620px) { .ch-sub { margin-left: 0; width: 100%; text-align: left; } }

/* ── section rhythm ── */
.ch-sec { margin-top: 36px; }
.ch-sec[hidden] { display: none; }

/* ── the challenge strip — the channel never said that what it's playing is
      often the month's TV challenge, even though Home does ── */
.ch-ctx {
  display: flex; align-items: center; gap: 14px; margin-top: 18px;
  padding: 14px 18px; border-radius: 13px; position: relative; overflow: hidden;
  background: var(--hv-amber-dim); border: 1px solid rgba(245,181,24,.3);
}
.ch-ctx.now { background: var(--accent-dim); border-color: var(--hv-a-42); }
.ch-ctx-ico { font-size: 22px; flex: none; }
.ch-ctx-b { flex: 1; min-width: 0; }
.ch-ctx-t { font-size: 14px; font-weight: 650; color: var(--text); }
.ch-ctx-t b { color: var(--hv-amber-2); font-weight: 800; }
.ch-ctx.now .ch-ctx-t b { color: var(--accent); }
.ch-ctx-s { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.ch-ctx-go {
  flex: none; height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  background: rgba(255,255,255,.06); border: 1px solid var(--border); transition: .15s;
}
.ch-ctx-go:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
@media (max-width: 620px) {
  .ch-ctx { flex-wrap: wrap; }
  .ch-ctx-go { width: 100%; }
}

/* ── UP NEXT — real per-episode thumbnails. The old mockup assumed these had to
      stay text cards because playout parses titles out of filenames; the file
      path is an exact join key into Jellyfin, so each episode has its own art. ── */
.ch-un { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 13px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.ch-un::-webkit-scrollbar { display: none; }
.ch-un-card {
  border-radius: 12px; overflow: hidden; background: var(--hv-panel);
  border: 1px solid var(--border); transition: .16s; position: relative;
}
.ch-un-card:hover { border-color: var(--hv-a-42); transform: translateY(-2px); }
.ch-un-card.next { border-color: var(--hv-a-55); }
.ch-un-art { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #1b1b26, #101018); overflow: hidden; }
.ch-un-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-un-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,14,.72), transparent 58%); }
/* a title-only fallback when Jellyfin has no thumbnail for this file */
.ch-un-noart { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; opacity: .3; }
.ch-un-pip {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: var(--accent); color: #fff;
}
.ch-un-pip.soft { background: rgba(10,10,14,.78); color: var(--text-2); border: 1px solid var(--border-strong); }
.ch-un-b { padding: 10px 12px 12px; }
.ch-un-ep { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.ch-un-t {
  font-size: 13px; font-weight: 650; color: var(--text); margin-top: 3px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ch-un-s { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* ── THE WEEK — was behind a bottom-sheet button, which is the wrong place for
      the channel's main value when nothing is on air ── */
.ch-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.ch-day {
  position: relative; border-radius: 12px; overflow: hidden; min-height: 152px;
  border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate; transition: .16s;
}
.ch-day:hover { transform: translateY(-2px); border-color: var(--hv-a-42); }
.ch-day-bg { position: absolute; inset: 0; z-index: -2; }
.ch-day-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.ch-day::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(10,10,14,.97) 12%, rgba(10,10,14,.66) 58%, rgba(10,10,14,.28) 100%);
}
.ch-day-in { position: relative; padding: 12px 13px 13px; }
.ch-day-d { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ch-day-f { font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin-top: 3px; line-height: 1.2; }
.ch-day-s { font-size: 11.5px; color: var(--text-2); margin-top: 3px; line-height: 1.35; }
.ch-day-n { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* today gets the season/accent treatment, and says so */
.ch-day.today { border-color: var(--hv-a-55); box-shadow: 0 0 0 1px var(--hv-a-32), 0 8px 26px rgba(0,0,0,.45); }
.ch-day.today .ch-day-d { color: var(--accent); }
.ch-day.today .ch-day-bg img { opacity: .78; }
.ch-day-now {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #fca5a5;
}
.ch-day-now i { width: 6px; height: 6px; border-radius: 50%; background: #f87171; animation: ch-pulse 1.9s ease-in-out infinite; }

/* ── WATCHING NOW — presence is a theme across the redesign; the channel is the
      one page where "who else is here" is literally the point ── */
.ch-watch { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 13px; background: var(--hv-panel); border: 1px solid var(--border); }
.ch-watch-avs { display: flex; flex: none; }
.ch-watch-avs > * {
  width: 34px; height: 34px; border-radius: 50%; margin-left: -9px;
  border: 2px solid var(--hv-panel); object-fit: cover; background: var(--accent-dim);
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--accent);
}
.ch-watch-avs > *:first-child { margin-left: 0; }
.ch-watch-t { font-size: 13.5px; font-weight: 650; color: var(--text); }
.ch-watch-s { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

@media (max-width: 620px) {
  .ch-title { font-size: 24px; }
  .ch-week { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .ch-day { min-height: 132px; }
}