/* ============================================================================
   LIVE TV — CHANNEL BROWSER (2026-10-25, James spec)
   Pinned stable player on phone + "Find your channel" browser: search,
   flat category tabs, compact card grid. Replaces the stacked rails and
   the retired mobile layer (mini-stage / ribbon / guide tabs).
   Tokens only (tokens.css): ground #0C121B, surfaces #141F2C / #1B2A3B,
   text #C7D0DA, gold #F2BC68. Coral is LIVE-only — never used here.
   ============================================================================ */
:root{ --lt-pin-top: 0px; }

/* ---------- browser section ---------- */
.lt-browser{ padding:36px 0 10px; }
.lt-browser .wrap{ padding-left:var(--pv-gutter-sm); padding-right:var(--pv-gutter-sm); }
@media(min-width:1024px){ .lt-browser .wrap{ padding-left:var(--pv-gutter); padding-right:var(--pv-gutter); } }
.lt-browser-title{
  font-family:var(--pv-headline); font-weight:400; letter-spacing:.01em;
  font-size:clamp(26px,3.2vw,36px); color:var(--pv-ivory); margin:0 0 16px;
}
.lt-search{
  display:flex; align-items:center; gap:10px;
  background:var(--pv-noir-2); border:1px solid var(--pv-rule); border-radius:12px;
  padding:0 14px; min-height:50px;
}
.lt-search:focus-within{ border-color:var(--pv-gold); box-shadow:0 0 0 3px rgba(242,188,104,.25); }
.lt-search svg{ flex:none; width:19px; height:19px; stroke:var(--pv-ivory-dim); }
.lt-search:focus-within svg{ stroke:var(--pv-gold); }
.lt-search input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--pv-ivory); font:400 16px/1.3 var(--pv-sans); padding:13px 0;
}
.lt-search input::placeholder{ color:var(--pv-ivory-dim); }

/* ---------- flat category tabs (no pills — standing law) ---------- */
.lt-tabs{
  display:flex; gap:26px; margin-top:14px; padding:0 2px;
  border-bottom:1px solid var(--pv-rule);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.lt-tabs::-webkit-scrollbar{ display:none; }
.lt-tab{
  position:relative; flex:none; background:none; border:0; cursor:pointer;
  padding:11px 2px 12px; min-height:46px;
  font:600 14.5px/1.2 var(--pv-sans); color:var(--pv-ivory-dim); white-space:nowrap;
}
.lt-tab:hover{ color:var(--pv-ivory); }
.lt-tab[aria-selected="true"]{ color:var(--pv-ivory); }
.lt-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--pv-gold); transform:scaleX(0); transition:transform .18s ease;
}
.lt-tab[aria-selected="true"]::after{ transform:scaleX(1); }

/* ---------- channel grid ---------- */
.lt-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-top:18px;
}
@media(min-width:700px){ .lt-grid{ grid-template-columns:repeat(3,1fr); gap:13px; } }
@media(min-width:1024px){ .lt-grid{ grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:14px; } }
.lt-grid .pv-cardwrap{ position:relative; min-width:0; }
.lt-grid .pv-cardwrap[hidden]{ display:none; }

.lt-card{
  display:flex; align-items:center; gap:12px; width:100%; min-height:84px;
  padding:10px 38px 10px 12px; text-align:left; cursor:pointer;
  background:var(--pv-noir-2); border:1px solid var(--pv-rule); border-radius:14px;
  color:var(--pv-ivory); font-family:var(--pv-sans);
  transition:border-color .15s ease, background .15s ease;
}
.lt-card:hover{ border-color:var(--pv-gold-deep); background:var(--pv-noir-3); }
/* playing channel: gold outline + "Now playing" line (text, not color alone) */
.lt-grid .chtile.now{ border-color:var(--pv-gold); box-shadow:0 0 0 1px var(--pv-gold); }
.lt-grid .chtile.now .chtile-art{ box-shadow:none; }
.lt-grid .chtile.now .chtile-art::after{ content:none; }

.lt-card .chtile-art{
  position:relative; flex:none; width:76px; height:54px; border-radius:9px;
  background:var(--pv-noir-3); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.lt-card .chtile-art img{
  width:auto; height:auto; max-width:86%; max-height:86%;
  object-fit:contain; padding:0; display:block;
}
.lt-card .chtile-initial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:800 20px/1 var(--pv-headline); color:var(--pv-gold); background:var(--pv-noir-3); }
.lt-plate{ font:800 17px/1 var(--pv-headline); color:var(--pv-gold); letter-spacing:.04em; }
.lt-card .chtile-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; padding:0; }
.lt-card .chtile-name{
  font-size:14.5px; font-weight:600; line-height:1.25; color:var(--pv-ivory);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lt-desc{
  font-size:12px; line-height:1.35; color:var(--pv-ivory-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lt-desc.is-now{ color:var(--pv-gold); font-weight:700; }

/* favorite star: its own touch target, clear of the logo plate */
.lt-grid .pv-fav{
  position:absolute; top:4px; right:4px; z-index:3;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:8px; cursor:pointer;
  font-size:16px; line-height:1; color:var(--pv-ivory-faint);
}
.lt-grid .pv-fav.on{ color:var(--pv-gold); }
.lt-grid .pv-fav:hover{ color:var(--pv-gold); }

/* ---------- empty state ---------- */
.lt-empty{
  margin-top:20px; padding:26px 20px; text-align:center;
  background:var(--pv-noir-2); border:1px solid var(--pv-rule); border-radius:14px;
}
.lt-empty[hidden]{ display:none; }
.lt-empty p{ margin:0 0 14px; color:var(--pv-ivory-dim); font-size:15px; line-height:1.5; }
.lt-empty button{
  background:var(--pv-gold); color:var(--pv-on-gold); border:0; border-radius:10px;
  font:600 14.5px/1 var(--pv-sans); padding:12px 20px; min-height:44px; cursor:pointer;
}
.lt-empty button:hover{ background:var(--pv-gold-deep); }

/* ---------- focus (visible, gold) ---------- */
.lt-tab:focus-visible, .lt-card:focus-visible, .lt-grid .pv-fav:focus-visible,
.lt-empty button:focus-visible{ outline:2px solid var(--pv-gold); outline-offset:2px; }
.lt-search input:focus-visible{ outline:none; }

/* ---------- "Watching" label: the compact strip on phone ---------- */
.lt-watch-label{
  display:none; font-size:10.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pv-gold);
}

/* ============================================================================
   PHONE (<=1023.98px): the cinema (player + Watching strip) PINS at the top
   of the viewing area at a stable 16:9 — it never shrinks, never becomes a
   mini player. The page below it scrolls; the player instance is untouched.
   ============================================================================ */
@media(max-width:1023.98px){
  .pv-cinema{ padding:8px 0 10px; margin-top:0; }
  /* The hero's legacy position:sticky (built for the old rails page) offsets
     its paint +50px over the Watching strip in this layout — measured on
     the live page 2026-10-25. The whole cinema pins via .lt-pinned now,
     so the hero itself stands still. */
  .pv-cinema .pv-hero{ position:static; }
  /* Pinned state (JS toggles .lt-pinned at the scroll threshold and holds
     the space with an in-flow placeholder). position:sticky cannot be
     used here: the shared chrome sets overflow on <body>, which silently
     defeats sticky — measured on the live page 2026-10-25. */
  .pv-cinema.lt-pinned{
    position:fixed; top:var(--lt-pin-top); left:0; right:0; z-index:70;
    width:auto; margin:0;
    background:var(--pv-noir);
    border-bottom:1px solid var(--pv-rule);
    box-shadow:0 14px 30px rgba(0,0,0,.5);
  }
  .lt-pin-spacer{ flex:none; }
  .pv-cinema .pv-hero-sub{ display:none; } /* the Watching strip carries this line */
  .pv-nowbar{ margin-top:10px; gap:10px; flex-wrap:nowrap; align-items:center; }
  .pv-nowbar-logo{ width:52px; border-radius:8px; box-shadow:none; }
  .pv-nowbar-meta{ min-width:0; flex:1; }
  .pv-nowbar-k{ display:none; }
  .lt-watch-label{ display:block; margin-bottom:2px; }
  .pv-nowbar-name{
    font-size:16.5px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .pv-nowbar-now{ font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pv-nowbar-next, .pv-nowbar-sub{ display:none; }
  .pv-remote{ margin-left:auto; gap:6px; flex:none; }
  .pv-remote-btn{ width:40px; height:40px; }
  .pv-remote-btn svg{ width:20px; height:20px; }
  /* last channel stays reachable above the fixed bottom tab bar */
  .lt-browser{ padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
  .lt-browser-title{ font-size:26px; }
  .lt-card{ min-height:80px; }
  .lt-card .chtile-art{ width:68px; height:50px; }
}
/* very narrow phones: keep 2 columns readable */
@media(max-width:359px){
  .lt-grid{ gap:9px; }
  .lt-card{ gap:9px; padding:8px 32px 8px 9px; }
  .lt-card .chtile-art{ width:58px; height:44px; }
  .lt-card .chtile-name{ font-size:13.5px; }
}

@media(prefers-reduced-motion:reduce){
  .lt-tab::after, .lt-card{ transition:none; }
}

/* ---- Channel Scout filters (2026-10-25): language + country row ---- */
.lt-filters{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 2px}
.lt-filter{display:flex;align-items:center;gap:8px;font-size:12px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#8FA3B8}
.lt-filter select{background:#141F2C;color:#C7D0DA;border:1px solid #1B2A3B;
  border-radius:6px;padding:7px 10px;font-size:14px;font-weight:500;
  text-transform:none;letter-spacing:0}
.lt-filter select:focus{outline:2px solid #F2BC68;outline-offset:1px}