/* ==========================================================================
   Nightshift — design tokens
   Source: design_handoff_tvradar/README.md. Values are final per that spec;
   do not eyeball-adjust without checking it first.
   ========================================================================== */

:root {
  /* Colour */
  --tvr-bg: #0c0d10;
  --tvr-surface: #14161b;
  --tvr-surface-raised: #15171c;
  --tvr-surface-sunken: #111318;
  --tvr-accent: #55a8ff;
  --tvr-accent-ink: #0c0d10; /* text ON accent backgrounds — never white */
  --tvr-text-primary: #f2f3f5;
  --tvr-text-secondary: #a8aeb6;
  --tvr-text-tertiary: #8b9198;
  --tvr-text-muted: #6f767e;
  --tvr-text-dim: #7a818a;
  --tvr-border: rgba(255, 255, 255, 0.06);
  --tvr-border-strong: rgba(255, 255, 255, 0.08);
  --tvr-border-accent: rgba(85, 168, 255, 0.33);

  /* Type */
  --tvr-font-display: 'Space Grotesk', system-ui, sans-serif;
  --tvr-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --tvr-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing / radius */
  --tvr-page-pad: 16px;
  --tvr-card-gap: 9px;
  --tvr-section-gap: 24px;
  --tvr-radius-sm: 9px;
  --tvr-radius-md: 13px;
  --tvr-radius-hero: 18px;
  --tvr-radius-pill: 999px;

  --tvr-header-h: 56px;
  --tvr-tabbar-h: 60px;
}

@media (min-width: 1024px) {
  :root {
    --tvr-page-pad: 32px;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tvr-bg);
  color: var(--tvr-text-primary);
  font-family: var(--tvr-font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tvr-accent); text-decoration: none; }
button { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
p { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--tvr-font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--tvr-text-primary);
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--tvr-page-pad);
  padding-right: var(--tvr-page-pad);
}

/* Reserve tab-bar clearance on pages that show it (JS/body-class toggled) */
body.tvr-has-tabbar { padding-bottom: var(--tvr-tabbar-h); }

/* ==========================================================================
   Type roles
   ========================================================================== */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

.tvr-page-title { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
@media (min-width: 640px) { .tvr-page-title { font-size: 29px; } }

.tvr-hero-title { font-family: var(--tvr-font-display); font-size: 31px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }

.tvr-section-heading { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
@media (min-width: 640px) { .tvr-section-heading { font-size: 21px; } }

.tvr-card-title { font-family: var(--tvr-font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
@media (min-width: 640px) { .tvr-card-title { font-size: 18px; } }

.tvr-body { font-family: var(--tvr-font-body); font-size: 13.5px; line-height: 1.62; color: var(--tvr-text-secondary); }
@media (min-width: 640px) { .tvr-body { font-size: 14.5px; } }

.tvr-blurb { font-family: var(--tvr-font-body); font-size: 12px; line-height: 1.5; color: var(--tvr-text-tertiary); }
@media (min-width: 640px) { .tvr-blurb { font-size: 12.5px; } }

/* ==========================================================================
   Prose content — the_content() output inside .tvr-body (article bodies,
   channel/day-guide write-ups, the films page). The site-wide reset strips
   list bullets and table borders for UI chrome's own good reasons, but that
   same reset was silently stripping them out of real written content too —
   every bulleted list rendered as flat unindented text and every listings
   table (8 of them on a single channel page) rendered with no borders, no
   header row, 1px browser-default cell padding.
   ========================================================================== */

.tvr-body h2, .tvr-body h3, .tvr-body h4 {
  margin: var(--tvr-section-gap) 0 10px;
}
.tvr-body h2 { font-size: 19px; }
.tvr-body h3 { font-size: 16px; }
.tvr-body h4 { font-size: 14px; }
.tvr-body p { margin: 0 0 12px; }
.tvr-body strong { color: var(--tvr-text-primary); font-weight: 600; }
.tvr-body a { text-decoration: underline; text-underline-offset: 2px; }

.tvr-body ul, .tvr-body ol {
  list-style: revert;
  margin: 0 0 14px;
  padding-left: 1.3em;
}
.tvr-body li { margin-bottom: 4px; }
.tvr-body li::marker { color: var(--tvr-text-tertiary); }

.tvr-body blockquote {
  margin: 16px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--tvr-accent);
  background: var(--tvr-surface);
  border-radius: 0 var(--tvr-radius-sm) var(--tvr-radius-sm) 0;
  color: var(--tvr-text-secondary);
}

.tvr-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 13px;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  background: var(--tvr-surface);
  border: 1px solid var(--tvr-border-strong);
  border-radius: var(--tvr-radius-md);
}
.tvr-body th, .tvr-body td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--tvr-border);
}
.tvr-body th {
  font-family: var(--tvr-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tvr-text-tertiary);
  background: var(--tvr-surface-raised);
  white-space: nowrap;
}
.tvr-body tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.tvr-body tbody tr:hover { background: rgba(85, 168, 255, 0.06); }
.tvr-body tr:last-child td { border-bottom: none; }

/* Listings tables put the film/programme title in column 3 (Time, Channel,
   Film/Programme, Year) — give it the same visual weight as a card title
   instead of it reading as plain body text identical to the other columns. */
.tvr-body td:nth-child(3) {
  font-family: var(--tvr-font-display);
  font-weight: 600;
  color: var(--tvr-text-primary);
}
.tvr-body td:first-child {
  font-family: var(--tvr-font-mono);
  color: var(--tvr-text-secondary);
  font-size: 12px;
}
.tvr-body td:nth-child(2) {
  color: var(--tvr-text-tertiary);
  font-size: 12px;
}
.tvr-body td:last-child { color: var(--tvr-text-muted); font-size: 12px; }

.see-also-box {
  background: var(--tvr-surface);
  border: 1px solid var(--tvr-border-strong);
  border-left: 3px solid var(--tvr-accent);
  border-radius: 0 var(--tvr-radius-sm) var(--tvr-radius-sm) 0;
  padding: 10px 14px;
  margin: 16px 0;
  font-size: 13px;
  color: var(--tvr-text-secondary);
}
.see-also-box strong { color: var(--tvr-text-primary); }

/* Easy Table of Contents plugin ships a light-mode "light-blue" skin by
   default — unusable as-is on a dark theme, rendered as a near-blank grey
   box. Override to match .tvr-card instead of fighting the plugin's own
   specificity rule by rule. */
#ez-toc-container {
  background: var(--tvr-surface) !important;
  border: 1px solid var(--tvr-border-strong) !important;
  border-radius: var(--tvr-radius-md) !important;
  color: var(--tvr-text-secondary) !important;
  padding: 12px 16px !important;
  margin: 16px 0 !important;
}
#ez-toc-container .ez-toc-title { color: var(--tvr-text-primary) !important; font-family: var(--tvr-font-display) !important; font-weight: 600 !important; }
#ez-toc-container a { color: var(--tvr-accent) !important; text-decoration: none !important; }
#ez-toc-container a:hover { text-decoration: underline !important; }
#ez-toc-container .ez-toc-title-toggle,
#ez-toc-container .ez-toc-title-toggle svg { color: var(--tvr-text-secondary) !important; fill: var(--tvr-text-secondary) !important; }

.tvr-kicker {
  font-family: var(--tvr-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tvr-text-muted);
}
@media (min-width: 640px) { .tvr-kicker { font-size: 12px; } }

.tvr-meta {
  font-family: var(--tvr-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tvr-text-muted);
}
@media (min-width: 640px) { .tvr-meta { font-size: 10.5px; } }

/* ==========================================================================
   Sticky header
   ========================================================================== */

.tvr-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--tvr-header-h);
  display: flex;
  align-items: center;
  background: rgba(12, 13, 16, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tvr-border-strong);
}
.tvr-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.tvr-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tvr-accent);
  animation: tvr-pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.tvr-wordmark {
  font-family: var(--tvr-font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--tvr-text-primary);
}
.tvr-header-clock {
  font-family: var(--tvr-font-mono);
  color: var(--tvr-accent);
  font-size: 13px;
  margin-left: auto;
}
.tvr-header-search-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--tvr-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--tvr-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@keyframes tvr-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ==========================================================================
   Day strip
   ========================================================================== */

.tvr-day-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px var(--tvr-page-pad);
  scrollbar-width: none;
}
.tvr-day-strip::-webkit-scrollbar { display: none; }
.tvr-day-pill {
  flex: 0 0 auto;
  min-width: 54px;
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--tvr-surface);
  border: 1px solid var(--tvr-border);
  text-align: center;
  color: var(--tvr-text-primary);
}
.tvr-day-pill-label {
  display: block;
  font-family: var(--tvr-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  opacity: 0.6;
}
.tvr-day-pill-date {
  display: block;
  font-family: var(--tvr-font-display);
  font-size: 14px;
  font-weight: 600;
}
.tvr-day-pill.is-active {
  background: var(--tvr-accent);
  border-color: var(--tvr-accent);
}
.tvr-day-pill.is-active .tvr-day-pill-label,
.tvr-day-pill.is-active .tvr-day-pill-date {
  color: var(--tvr-accent-ink);
  opacity: 1;
}
.tvr-day-pill.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ==========================================================================
   Cards, rows, chips
   ========================================================================== */

.tvr-card {
  background: var(--tvr-surface);
  border: 1px solid var(--tvr-border);
  border-radius: var(--tvr-radius-md);
  padding: 14px;
}
.tvr-card.is-accent { border-color: var(--tvr-border-accent); }

.tvr-hscroll {
  display: flex;
  gap: var(--tvr-card-gap);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px var(--tvr-page-pad) 10px;
  margin: 0 calc(var(--tvr-page-pad) * -1);
}
.tvr-hscroll::-webkit-scrollbar { display: none; }

.tvr-onnow-card {
  flex: 0 0 218px;
  background: var(--tvr-surface-raised);
  border: 1px solid var(--tvr-border);
  border-radius: var(--tvr-radius-md);
  padding: 12px;
}
.tvr-onnow-card .tvr-onnow-meta { display: flex; justify-content: space-between; margin-bottom: 6px; }
.tvr-onnow-card .tvr-onnow-remaining { color: var(--tvr-accent); }
.tvr-onnow-card .tvr-card-title { min-height: 43px; margin-bottom: 8px; }

.tvr-progress {
  height: 4px;
  border-radius: var(--tvr-radius-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.tvr-progress-fill {
  height: 100%;
  background: var(--tvr-accent);
  border-radius: inherit;
}

.tvr-schedule-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.tvr-schedule-row:last-child { border-bottom: none; }
.tvr-schedule-row.is-pick { border-left: 2px solid var(--tvr-accent); padding-left: 10px; margin-left: -12px; }
.tvr-schedule-time {
  flex: 0 0 54px;
  font-family: var(--tvr-font-mono);
  font-size: 12px;
  color: var(--tvr-text-muted);
  padding-top: 2px;
}
.tvr-schedule-row.is-live .tvr-schedule-time { color: var(--tvr-accent); }
.tvr-schedule-row.is-past .tvr-schedule-title,
.tvr-schedule-row.is-past .tvr-blurb { color: var(--tvr-text-tertiary); }
.tvr-schedule-body { flex: 1; min-width: 0; }
.tvr-schedule-title { font-family: var(--tvr-font-display); font-weight: 600; font-size: 14px; color: var(--tvr-text-primary); }

.tvr-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.tvr-chips::-webkit-scrollbar { display: none; }
.tvr-chip {
  flex: 0 0 auto;
  border-radius: var(--tvr-radius-pill);
  padding: 6px 14px;
  background: var(--tvr-surface);
  border: 1px solid var(--tvr-border);
  color: var(--tvr-text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.tvr-chip.is-active { background: var(--tvr-accent); border-color: var(--tvr-accent); color: var(--tvr-accent-ink); }

.tvr-badge {
  display: inline-block;
  border-radius: 7px;
  padding: 3px 8px;
  font-family: var(--tvr-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tvr-badge.is-accent { background: var(--tvr-accent); color: var(--tvr-accent-ink); }
.tvr-badge.is-outline { border: 1px solid var(--tvr-border-strong); color: var(--tvr-text-secondary); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.tvr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--tvr-radius-sm);
  border: none;
  font-family: var(--tvr-font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.tvr-btn.is-primary { background: var(--tvr-accent); color: var(--tvr-accent-ink); }
.tvr-btn.is-secondary { background: rgba(255, 255, 255, 0.06); color: var(--tvr-text-primary); }

/* ==========================================================================
   Placeholder art (key art / posters / thumbnails — real images replace this)
   ========================================================================== */

.tvr-placeholder-art {
  background: repeating-linear-gradient(45deg, var(--tvr-surface-sunken), var(--tvr-surface-sunken) 10px, var(--tvr-surface) 10px, var(--tvr-surface) 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tvr-text-muted);
  font-family: var(--tvr-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--tvr-radius-md);
}

/* ==========================================================================
   Ad slots — reserve height before the ad loads, always
   ========================================================================== */

.tvr-ad-slot {
  border: 1px solid var(--tvr-border-strong);
  border-radius: 13px;
  background: var(--tvr-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tvr-font-mono);
  font-size: 10px;
  color: var(--tvr-text-muted);
  margin: var(--tvr-section-gap) auto;
}
.tvr-ad-slot[data-size="336x280"] { width: 336px; max-width: 100%; height: 280px; }
.tvr-ad-slot[data-size="320x50"] { width: 320px; max-width: 100%; height: 50px; }
.tvr-ad-slot[data-size="300x250"] { width: 300px; height: 250px; }
.tvr-ad-slot[data-size="300x600"] { width: 300px; height: 600px; }

/* ==========================================================================
   Tab bar (mobile browse pages — NOT the grid page, which uses a sticky ad instead)
   ========================================================================== */

.tvr-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tvr-tabbar-h);
  display: flex;
  background: rgba(12, 13, 16, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--tvr-border-strong);
  z-index: 40;
}
@media (min-width: 1024px) { .tvr-tabbar { display: none; } }
.tvr-tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--tvr-text-dim);
  font-size: 10px;
  min-height: 44px;
}
.tvr-tabbar a.is-active { color: var(--tvr-accent); }

/* ==========================================================================
   FAQ accordion — native <details>/<summary>
   ========================================================================== */

.tvr-faq-item {
  background: var(--tvr-surface);
  border: 1px solid var(--tvr-border);
  border-radius: var(--tvr-radius-md);
  margin-bottom: 8px;
  padding: 4px 14px;
}
.tvr-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-family: var(--tvr-font-display);
  font-weight: 600;
  font-size: 14px;
}
.tvr-faq-item summary::-webkit-details-marker { display: none; }
.tvr-faq-item summary::after { content: '+'; color: var(--tvr-text-muted); font-size: 18px; }
.tvr-faq-item[open] summary::after { content: '\2212'; }
.tvr-faq-item p { padding-bottom: 12px; margin: 0; }

/* ==========================================================================
   Footer / channel grid
   ========================================================================== */

.tvr-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tvr-channel-grid a {
  background: var(--tvr-surface);
  border: 1px solid var(--tvr-border);
  border-radius: var(--tvr-radius-sm);
  padding: 10px;
  color: var(--tvr-text-secondary);
  font-size: 12px;
  text-align: center;
}

.tvr-footer {
  border-top: 1px solid var(--tvr-border-strong);
  padding: 24px var(--tvr-page-pad) 32px;
  color: var(--tvr-text-muted);
  font-size: 12px;
}

/* ==========================================================================
   Desktop layout (screen 06 — 1440)
   ========================================================================== */

/* Rail (ad slot 5 + "jump to a channel") is a desktop-only placement per the
   ad-slot spec — without this it stacked at the bottom of every mobile page
   in addition to the mobile-specific ad slots higher up. */
.tvr-rail-sticky { display: none; }

@media (min-width: 1024px) {
  .tvr-body-layout {
    display: grid;
    grid-template-columns: 1fr 336px;
    gap: 32px;
    align-items: start;
  }
  .tvr-rail-sticky {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--tvr-header-h) + 20px);
  }
  .tvr-hero-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
  .tvr-hero-picks { display: flex; flex-direction: column; gap: 10px; }
  .tvr-schedule-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .tvr-schedule-columns > div { margin: 0; }
}

/* "Picks" beside the hero card and the rail's channel-jump card are
   desktop-only additions (screen 06) — mobile (screen 01) shows one top-pick
   card and the full channel grid lower down, no secondary picks list. */
.tvr-hero-picks,
.tvr-rail-channels { display: none; }
@media (min-width: 1024px) {
  .tvr-hero-picks,
  .tvr-rail-channels { display: block; }
  .tvr-hero-picks { display: flex; }
}

.tvr-rail-channels {
  background: var(--tvr-surface);
  border: 1px solid var(--tvr-border);
  border-radius: var(--tvr-radius-md);
  padding: 16px;
}
.tvr-rail-channels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.tvr-rail-channels-grid a {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--tvr-radius-sm);
  padding: 9px 10px;
  color: var(--tvr-text-primary);
}
.tvr-rail-channels-grid a:hover { background: rgba(255, 255, 255, 0.06); }
.tvr-rail-channels-grid .tvr-card-title { font-size: 13px; }
.tvr-rail-channels-grid .tvr-meta { margin-top: 2px; }

/* ==========================================================================
   Desktop header nav — hidden below 1024px, replaces the mobile
   hamburger/search-toggle row shown above that width.
   ========================================================================== */

.tvr-desktop-nav,
.tvr-header-clock[data-live-clock-desktop] { display: none; }

@media (min-width: 1024px) {
  .tvr-mobile-only { display: none; }
  .tvr-desktop-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: 26px;
  }
  .tvr-desktop-nav-links { display: flex; gap: 20px; font-size: 14px; color: var(--tvr-text-secondary); }
  .tvr-desktop-nav-links a { color: inherit; }
  .tvr-desktop-nav-links a.is-active { color: var(--tvr-accent); font-weight: 600; }
  .tvr-header-search-desktop {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--tvr-radius-sm);
    padding: 8px 14px;
    width: 230px;
    color: var(--tvr-text-dim);
    font-size: 13px;
  }
  .tvr-header-search-desktop input {
    background: none;
    border: none;
    outline: none;
    color: var(--tvr-text-primary);
    font-family: var(--tvr-font-body);
    font-size: 13px;
    width: 100%;
  }
  .tvr-header-search-desktop input::placeholder { color: var(--tvr-text-dim); }
  .tvr-header-clock[data-live-clock-desktop] {
    display: block;
    font-family: var(--tvr-font-mono);
    font-size: 12px;
    color: var(--tvr-accent);
    margin-left: 16px;
  }

  /* Home only: the desktop nav's "Tonight" link covers this role. */
  body.home .tvr-day-strip { display: none; }

  /* "Channels" dropdown — the real destination is one of 32 channel pages,
     not the link itself (that still points at /whats-on-tv-tonight as a
     placeholder until a dedicated channels-index page exists, matching
     the site's real nav menu in tvr_dynamic_menu_items()). */
  .tvr-nav-dropdown { position: relative; }
  .tvr-nav-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 14px;
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--tvr-surface);
    border: 1px solid var(--tvr-border-strong);
    border-radius: var(--tvr-radius-md);
    padding: 10px;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    z-index: 50;
  }
  .tvr-nav-dropdown-panel a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--tvr-radius-sm);
    color: var(--tvr-text-secondary);
    font-size: 13px;
  }
  .tvr-nav-dropdown-panel a:hover { background: rgba(255, 255, 255, 0.06); color: var(--tvr-text-primary); }
  .tvr-nav-dropdown:hover .tvr-nav-dropdown-panel,
  .tvr-nav-dropdown:focus-within .tvr-nav-dropdown-panel {
    display: grid;
  }
}

/* ==========================================================================
   Section spacing
   ========================================================================== */

.tvr-section { margin-bottom: var(--tvr-section-gap); }
@media (min-width: 640px) { .tvr-section { margin-bottom: 26px; } }

/* ─── Primary nav drawer: closed state ─────────────────────────────
   main.js carries the drawer's open/closed state entirely in the
   aria-hidden attribute (see initMobileNav). aria-hidden is a screen
   reader hint and has NO visual effect on its own, so without this
   rule the drawer renders permanently open — every day link, the
   "Channels" item and all 32 channel names dumped down the left of
   every page, over the content.

   Keyed off the same attribute the JS already sets, so there is one
   source of truth for the state rather than a separate .is-open class
   that could drift out of sync with the markup.
──────────────────────────────────────────────────────────────────── */
#primary-menu-wrap[aria-hidden="true"],
#header-search[aria-hidden="true"] {
  display: none;
}