/* Highlights & video (/news) — Terminal Light. Featured player card (8) +
   Up next grid (4), after the Home "Highlights & video" section, and the
   theater <dialog> that plays a video (highlights-rail.js). Tokens only;
   text over photos and the video letterbox stay literal white/black in both
   themes. */
.nw-hl { min-width: 0; }
.nw-hl-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 14px; }
.nw-hl-grid[hidden] { display: none; }
.nw-hl-grid.is-short { grid-template-columns: minmax(0, 1fr); }
.nw-hl-grid.is-short .nw-queue-col { display: none; }

/* Featured player card */
.nw-feat-wrap { padding: 10px 10px 16px; }
.nw-feat-wrap[hidden] { display: none; }
.nw-poster {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  margin: 0; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: var(--tl-fill-06); box-shadow: none; cursor: pointer;
}
.nw-poster > img.nw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s var(--tl-ease); }
.nw-poster:hover > img.nw-img { transform: scale(1.02); }
.nw-feat.is-skel .nw-poster { cursor: default; }
.nw-state {
  position: absolute; left: 12px; top: 12px; height: 26px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.4px;
}
.nw-play {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.3s var(--tl-ease);
}
.nw-play::after { content: ''; position: absolute; left: 22px; top: 18px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.nw-poster:hover .nw-play { transform: scale(1.06); }
.nw-play.is-sm { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.nw-play.is-sm::after { left: 11px; top: 9px; border-width: 6px 0 6px 10px; }
.nw-feat-copy { padding: 14px 8px 0; }
.nw-feat-copy .tl-skel.is-line { margin: 8px 0; }
.nw-feat-team { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; color: var(--tl-ink-55); }
.nw-feat-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.25; color: var(--tl-ink); }
.nw-feat-meta { font-size: 12.5px; color: var(--tl-ink-50); }
.nw-feat-meta a { text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.nw-feat-meta a:hover { color: var(--tl-ink); }

/* Up next (as on Home): pages of 2 columns x 3 rows that exactly fill the
   player's height, swiped between with dots. The wrap is absolutely placed
   so the cards never set the row height themselves. */
.nw-queue-col { position: relative; min-height: 0; min-width: 0; }
.nw-queue-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; }
.nw-queue {
  flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.nw-queue::-webkit-scrollbar { display: none; }
.nw-queue:focus-visible { outline: none; box-shadow: var(--tl-focus-ring); border-radius: var(--tl-r-card); }
.nw-qpage {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px;
  padding: 2px 2px 3px;
}
.nw-qfoot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 16px; padding: 0 4px; }
.nw-qfoot[hidden] { display: none; }
.nw-qcount { font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.4px; color: var(--tl-ink-45); }
button.nw-q, .nw-q {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 0; width: 100%;
  margin: 0; padding: 6px 6px 8px; text-align: left; cursor: pointer;
  border-radius: var(--tl-r-card); border: 1px solid var(--tl-line-07);
  background: var(--tl-card-bg); box-shadow: var(--tl-card-shadow); color: var(--tl-ink);
  font: inherit; line-height: normal;
  transition: transform 0.3s var(--tl-ease), box-shadow 0.3s, background 0.2s;
}
button.nw-q:hover { background: var(--tl-control); transform: translateY(-2px); box-shadow: var(--tl-card-shadow-hover); }
.nw-q.is-skel { cursor: default; }
.nw-q.is-skel .tl-skel.is-line { margin: 2px 4px; }
.nw-q-img { position: relative; display: block; flex: 1 1 0; min-height: 44px; border-radius: 6px; overflow: hidden; background: var(--tl-fill-06); }
.nw-q-img > img.nw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-q-next {
  position: absolute; left: 8px; top: 8px; z-index: 1; height: 22px; padding: 0 8px;
  display: inline-flex; align-items: center; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: #101418;
  font-family: var(--tl-mono); font-size: 10px; letter-spacing: 0.4px;
}
.nw-q-title {
  flex: none; padding: 0 4px; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nw-q-meta { flex: none; padding: 0 4px; font-size: 11px; color: var(--tl-ink-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "More videos": the last slot of the Up next grid, a full card button. */
button.nw-q.nw-q-more {
  align-items: center; justify-content: center; gap: 6px; padding: 12px;
  text-align: center; border-style: dashed; border-color: var(--tl-line-18); background: transparent; box-shadow: none;
}
button.nw-q.nw-q-more:hover { border-style: solid; border-color: var(--tl-line-12); }
button.nw-q.nw-q-more:disabled { cursor: progress; transform: none; }
.nw-q-more-icon {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--tl-ink); color: var(--tl-on-ink); font-size: 18px; line-height: 1;
}
.nw-q-more-label { font-size: 13.5px; font-weight: 600; }
.nw-q-more-sub { font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--tl-ink-45); }

.nw-hl .nhl-status { margin-top: 0; border-radius: var(--tl-r-card); border: 1px solid var(--tl-line-07); background: var(--tl-card-bg); box-shadow: var(--tl-card-shadow); }
.nw-hl .nhl-status[hidden] { display: none; }
.nw-hl .nhl-status > p { margin: 0 0 12px; }
.nw-hl .nhl-status.is-error > p { color: var(--tl-down); }
.nw-hl .nw-more-wrap { padding-top: 14px; }
.nw-hl .nw-more-wrap:has(> [hidden]:only-child) { display: none; }

@media (max-width: 1100px) {
  .nw-hl-grid { grid-template-columns: minmax(0, 1fr); }
  .nw-queue-wrap { position: static; }
  .nw-qpage { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
  .nw-q-img { flex: none; aspect-ratio: 16 / 9; }
  button.nw-q.nw-q-more { min-height: 120px; }
}
@media (max-width: 720px) {
  .nw-feat-wrap { padding: 8px 8px 14px; }
  .nw-feat-title { font-size: 17px; }
  .nw-qpage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- In-place player (as on Home: explore-front.css .hm-vid-*) ----------
   The poster covers the frame until YouTube answers; the play button starts
   it; a PLAYING / PAUSED tag, a sound toggle and a 3px progress bar sit on
   the frame. Text and controls over video stay literal white in both themes. */
.nw-player { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.nw-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nw-player-poster { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; z-index: 1; pointer-events: none; transition: opacity 0.35s ease; background: transparent; }
.nw-player.is-ready .nw-player-poster { opacity: 0; }
.nw-player .nw-state { z-index: 2; }
.nw-state-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.nw-player.is-playing .nw-state-dot { background: var(--tl-live); }
button.nw-player-play { z-index: 2; margin: -28px 0 0 -28px; padding: 0; border: 0; cursor: pointer; }
.nw-player:hover .nw-player-play { transform: scale(1.06); }
.nw-player.has-player .nw-player-play { display: none; }
button.nw-mute {
  position: absolute; right: 12px; top: 12px; z-index: 2; width: 32px; height: 32px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.62); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
button.nw-mute .is-sound { display: none; }
button.nw-mute[aria-pressed="true"] .is-sound { display: inline; }
button.nw-mute[aria-pressed="true"] .is-muted { display: none; }
button.nw-mute:focus-visible, button.nw-player-play:focus-visible { outline: none; box-shadow: 0 0 0 2px #101418, 0 0 0 4px #fff; }
.nw-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: rgba(255, 255, 255, 0.18); pointer-events: none; }
.nw-progress > i { display: block; height: 100%; width: 0; background: #fff; transition: width 0.25s linear; }
.nw-player:not(.has-player) .nw-progress { display: none; }
@media (prefers-reduced-motion: reduce) { .nw-player-poster, .nw-progress > i { transition: none; } }