/* Televizyon Lakay — persistent player bar.
   Matched to nago.tv's bar: a raised now-playing card, a centred transport, and
   a chip on the right that names what is on and links back to its page. TL's
   accent rather than nago's blue. */

.tlpb{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(10,10,15,.94);backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.10);color:#fff}
.tlpb[hidden]{display:none}

.tlpb-inner{width:min(1180px,96vw);margin:auto;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:16px;padding:14px 0;min-height:86px}
.tlpb-left{display:flex;align-items:center;gap:6px;min-width:0}

/* The card is LIFTED above the bar line — that offset is what makes it read as
   its own object rather than a label printed on the bar. */
.tlpb-now{display:flex;align-items:center;gap:12px;min-width:0;
  margin-top:-26px;padding:9px 14px 9px 9px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.tlpb-now:hover{background:rgba(255,255,255,.10)}
.tlpb-art{width:52px;height:52px;flex:none;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;background:rgba(255,255,255,.08)}
.tlpb-art img,.tlpb-art video{width:100%;height:100%;object-fit:cover;display:block}
/* the parked channel plays on in the tile — live, not a snapshot */
.tlpb.has-parked-video .tlpb-art{background:#000}
.tlpb-meta{display:grid;min-width:0}
.tlpb-label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent,#e8833a);font-weight:900}
.tlpb-title{font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-weight:700}
.tlpb-sub{font-size:12px;color:rgba(255,255,255,.58);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.tlpb-divider{width:22px;height:44px;border-radius:8px;cursor:pointer;font-size:15px;
  color:rgba(255,255,255,.5);background:none;border:0}
.tlpb-divider:hover{color:#fff;background:rgba(255,255,255,.07)}
.tlpb.no-meta .tlpb-meta{display:none}

.tlpb-transport{display:flex;align-items:center;gap:9px;justify-self:center}
.tlpb-play{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  font-size:18px;color:#fff;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent,#e8833a),#a9541d)}
.tlpb-play:hover{filter:brightness(1.09)}
.tlpb-round{width:36px;height:36px;border-radius:50%;cursor:pointer;
  color:#dcdce6;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;padding:0}
.tlpb-round svg{width:17px;height:17px;fill:currentColor}
.tlpb-play svg{width:22px;height:22px;fill:currentColor}
.tlpb-divider svg{width:16px;height:16px}
.tlpb-round:hover{background:rgba(255,255,255,.13)}
.tlpb-vol{width:88px;accent-color:var(--accent,#e8833a)}

.tlpb-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.tlpb-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;
  border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);font-size:12.5px;font-weight:800;
  color:#fff;text-decoration:none;max-width:220px}
.tlpb-chip:hover{background:rgba(255,255,255,.10)}
.tlpb-tagname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlpb-caret{color:rgba(255,255,255,.45)}
.tlpb-dot{width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--accent,#e8833a)}
.tlpb-tag.is-tv .tlpb-dot{background:#7c5cff}

/* Minimised: the transport survives, everything else folds away. You can always
   see what is on and stop it — a player you cannot reach is worse than none. */
.tlpb.is-min .tlpb-inner{grid-template-columns:minmax(0,1fr) auto;padding:7px 0;
  min-height:0;gap:10px}
.tlpb.is-min .tlpb-now{margin-top:0;padding:4px 10px 4px 4px;border-radius:12px}
.tlpb.is-min .tlpb-art{width:32px;height:32px;border-radius:9px}
.tlpb.is-min .tlpb-label,.tlpb.is-min .tlpb-sub,
.tlpb.is-min .tlpb-divider,.tlpb.is-min .tlpb-right,
.tlpb.is-min .tlpb-vol,.tlpb.is-min .tlpb-mute,
.tlpb.is-min .tlpb-back,.tlpb.is-min .tlpb-skip{display:none}
.tlpb.is-min .tlpb-play{width:40px;height:40px;font-size:14px}
.tlpb.is-min .tlpb-title{font-size:13.5px}

/* The bar is fixed and the card lifts above it, so the page has to end well
   clear of both — padding the footer alone left the last row of station cards
   sitting underneath the card, which is what made the lift read as an overlap
   bug rather than as a raised element. */
body.has-tlpb{padding-bottom:120px}
body.has-tlpb footer{padding-bottom:40px}
body.has-tlpb.tlpb-min-on{padding-bottom:74px}

@media(max-width:900px){
  .tlpb-inner{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 12px;min-height:0}
  .tlpb-right,.tlpb-divider,.tlpb-vol,.tlpb-mute{display:none}
  .tlpb-now{margin-top:-18px}
  .tlpb-play{width:46px;height:46px;font-size:15px}
  body.has-tlpb footer{padding-bottom:180px}
}

/* ===========================================================================
   ADAPTIVE + CORRECTIONS
   =========================================================================== */

/* 1. THE ART TILE SHOWED THE LOGO AND THE LIVE VIDEO AT THE SAME TIME.

   parkVideo() sets els.art.hidden = true, which is correct — but `hidden` is
   only `display:none` from the browser's default stylesheet, and the rule
   `.tlpb-art img,.tlpb-art video{display:block}` above is a class selector, so
   it wins on specificity and puts the logo straight back. Both children then
   sat in the grid and you saw the artwork and the channel at once.

   Two changes: honour `hidden` explicitly, and place both children in the SAME
   grid cell so that even if both are ever visible they occlude rather than
   stack the tile to double height. */
.tlpb-art { grid-template-areas: "tile"; }
.tlpb-art > img,
.tlpb-art > video { grid-area: tile; }
.tlpb-art > [hidden] { display: none !important; }

/* 2. Fixed bars and iOS home indicators. Without the inset the transport sits
      under the gesture bar on any recent iPhone. */
.tlpb { padding-bottom: env(safe-area-inset-bottom, 0px); }
body.has-tlpb { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
body.has-tlpb.tlpb-min-on { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

/* 3. Vendor prefix — Safari still needs it, and without it the bar is flatly
      transparent there rather than frosted. */
.tlpb { -webkit-backdrop-filter: blur(20px); }

/* 4. Nothing may push the bar wider than the screen. box-sizing is not
      guaranteed inherited into these nodes from the theme. */
.tlpb, .tlpb * { box-sizing: border-box; }
.tlpb-inner { max-width: 100%; }

/* 5. Touch. 36px round buttons are under the 44px minimum for a finger, and
      this bar is mostly used on a phone. Only grow them for coarse pointers so
      the desktop layout keeps its proportions. */
@media (pointer: coarse) {
  .tlpb-round { width: 44px; height: 44px; }
  .tlpb-round svg { width: 19px; height: 19px; }
  .tlpb-divider { width: 30px; height: 48px; }
}

/* 6. Narrow phones. The existing 900px rule folds away the right-hand chip and
      the volume; below this the card itself has to give up its subtitle and
      shrink, or the title has no room left to be read. */
@media (max-width: 560px) {
  .tlpb-inner { gap: 8px; padding: 9px 10px; }
  .tlpb-now { margin-top: -14px; padding: 7px 11px 7px 7px; border-radius: 13px; gap: 9px; }
  .tlpb-art { width: 44px; height: 44px; border-radius: 10px; }
  .tlpb-title { font-size: 14px; }
  .tlpb-sub { display: none; }          /* the title is what identifies it */
  .tlpb-transport { gap: 6px; }
  .tlpb-play { width: 44px; height: 44px; }
  body.has-tlpb footer { padding-bottom: 150px; }
}

/* 7. Very small / older devices. Keep only what a player must have: what is on,
      and the means to stop it. */
@media (max-width: 380px) {
  .tlpb-back, .tlpb-skip { display: none; }
  .tlpb-art { width: 38px; height: 38px; }
  .tlpb-title { font-size: 13px; }
  .tlpb-label { font-size: 9px; }
}

/* 8. Short viewports — a phone in landscape has very little height, and a
      raised card eats it. Sit the card down onto the bar line there. */
@media (max-height: 460px) {
  .tlpb-now { margin-top: 0; }
  .tlpb-inner { min-height: 0; padding: 7px 10px; }
  body.has-tlpb { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* 9. The blur is the most expensive thing here and it repaints on every scroll
      of a fixed element. Keep it where it is cheap; drop to a solid ground on
      phones and wherever the viewer has asked for less motion/effects. */
@media (max-width: 560px) {
  .tlpb { backdrop-filter: none; -webkit-backdrop-filter: none;
          background: rgba(10, 10, 15, .985); }
}

/* 10. Isolate the bar's layout and painting from the page it floats over. */
.tlpb { contain: layout paint; }

/* Skip link. Off-screen until focused, then pinned top-left so a keyboard user
   can jump the nav and land on the page content. Not display:none - that would
   take it out of the focus order and defeat the point. */
.tl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: #f4a86e;
  color: #131313;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.tl-skip:focus { left: 0; }
#tl-main:focus { outline: none; }

/* ---- top nav on very small phones -----------------------------------------
   The homepage shell renders SEVEN nav items (it has an extra "Log Out" link
   the shared nav does not), which needs 328px inside a 296px content box at a
   320px viewport - so the whole page scrolled sideways by 20px. Other pages
   render six and fit.

   The nav scrolls instead of hiding anything: at this width the alternative is
   dropping the wordmark or a link, and losing a navigation target on the
   smallest screens is worse than a swipe. Above 400px nothing changes - there
   is no overflow there to fix. */
@media (max-width: 400px) {
  .topnav {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topnav::-webkit-scrollbar { display: none; }
}