/* ==========================================================================
   Nightshift — design tokens

   Copied from the 053 Nightshift build (US-only rules removed). An
   article-first layout on a light page with the Nightshift blue.
   The original dark values live on in the .tvr-dark scope below, which the
   header, tab bar, footer and the dark art panels use.

   The accent for text and fills is #1a66c9, not the brand #55a8ff: on white,
   #55a8ff is about 2.6:1 and fails for text; #1a66c9 passes 4.5:1, with white
   ink on it. #55a8ff stays the brand colour in the wordmark and share images.
   ========================================================================== */

:root {
  /* Colour */
  --tvr-bg: #f5f7fa;
  --tvr-surface: #ffffff;
  --tvr-surface-raised: #ffffff;
  --tvr-surface-sunken: #eef1f5;
  --tvr-accent: #1a66c9;
  --tvr-accent-ink: #ffffff; /* text ON accent backgrounds */
  --tvr-brand: #55a8ff;      /* wordmark dot, share images; not for text on white */
  --tvr-text-primary: #111827;
  --tvr-text-secondary: #4b5563;
  --tvr-text-tertiary: #5b6472;
  --tvr-text-muted: #6b7280;
  --tvr-text-dim: #6b7280;
  --tvr-border: rgba(17, 24, 39, 0.08);
  --tvr-border-strong: rgba(17, 24, 39, 0.12);
  --tvr-border-accent: rgba(26, 102, 201, 0.35);

  /* 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;
  }
}

/* Dark zones: the original Nightshift values, re-applied inside the header, tab
   bar, footer and the dark art panels. Custom properties cascade, so everything
   inside inherits readable light-on-dark colours without per-rule overrides. */
.tvr-dark,
.tvr-header,
.tvr-tabbar,
.tvr-footer,
.tvr-pick-art,
.tvr-name-tile {
  --tvr-surface: #14161b;
  --tvr-surface-raised: #15171c;
  --tvr-surface-sunken: #111318;
  --tvr-accent: #55a8ff;
  --tvr-accent-ink: #0c0d10;
  --tvr-text-primary: #f2f3f5;
  --tvr-text-secondary: #a8aeb6;
  --tvr-text-tertiary: #8b9198;
  --tvr-text-muted: #8b9198;
  --tvr-text-dim: #8b9198;
  --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);
  color: var(--tvr-text-primary);
}
.tvr-footer { background: #0c0d10; }

/* ==========================================================================
   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;
  padding-top: 14px;
  border-top: 2px solid var(--tvr-accent);
}
.tvr-body h3 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tvr-accent);
  font-family: var(--tvr-font-mono);
  font-weight: 600;
}
.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-top: 2px solid var(--tvr-accent);
  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(17, 24, 39, 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:last-child { color: var(--tvr-text-muted); font-size: 12px; }

/* Channel names in listings tables were a wall of dim grey text with the
   only colour on the page limited to a handful of links — an accent-tinted
   chip on the cell itself reads as scannable data instead of a flat
   black-and-white block. Can't wrap the text node in a real pill element
   without touching the content generator, so this styles the cell directly. */
.tvr-body td:nth-child(2) {
  font-family: var(--tvr-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--tvr-accent);
  background: rgba(85, 168, 255, 0.08);
}

.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(17, 24, 39, 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(17, 24, 39, 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(17, 24, 39, 0.06); color: var(--tvr-text-primary); }

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

/* Homepage top-pick art: typographic, the channel name in our own type.
   Name-led type, no broadcaster stills or logos. Replaces a striped box that printed
   "KEY ART" on the live homepage. */
.tvr-pick-art {
  position: relative;
  height: 158px;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(85, 168, 255, 0.22), transparent 60%),
    linear-gradient(160deg, #1a1e26 0%, #111318 100%);
  border-bottom: 1px solid var(--tvr-border);
}
.tvr-pick-art-badge { position: absolute; top: 10px; left: 10px; }
.tvr-pick-art-channel {
  font-family: var(--tvr-font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tvr-text-primary);
  opacity: 0.92;
  overflow-wrap: anywhere;
}
a.tvr-pick-card { display: block; color: inherit; text-decoration: none; }
a.tvr-pick-card:hover .tvr-card-title,
a.tvr-pick-card:focus-visible .tvr-card-title { color: var(--tvr-accent); }

/* Name-led tile standing in for a logo or thumbnail. */
.tvr-name-tile {
  display: flex;
  align-items: flex-end;
  padding: 6px 7px;
  border-radius: var(--tvr-radius-sm);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(85, 168, 255, 0.2), transparent 65%),
    linear-gradient(160deg, #1a1e26 0%, #111318 100%);
  border: 1px solid var(--tvr-border);
  font-family: var(--tvr-font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tvr-text-primary);
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Channel label on cross-channel schedule rows (homepage, day guides). */
.tvr-schedule-channel { display: block; margin-bottom: 2px; color: var(--tvr-text-tertiary); }

.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; }
/* Belt and braces for the same blowout: no grid child may widen its track. */
.tvr-body-layout > * { min-width: 0; }

@media (min-width: 1024px) {
  .tvr-body-layout {
    display: grid;
    /* minmax(0, 1fr), not 1fr. A bare 1fr has an automatic minimum of its
       content's min-content width, and the on-now rail is one row of a card
       per live channel. Every evening that pushed the main column to 6,801px
       and the homepage to 7,434px wide (measured live 1 Oct 2026, 21:15);
       by day the rail is empty, so it only showed after 7pm. */
    grid-template-columns: minmax(0, 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);
  }
  /* Two columns only when there are secondary picks to fill the second.
     With a single pick the old 1.35fr/1fr grid left a 420px empty column
     beside the card (live 30 Sep 2026); now the card spans the width and
     lays its art panel beside the text instead of above it. */
  .tvr-hero-split.has-picks { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
  .tvr-hero-split:not(.has-picks) > .tvr-card { display: grid; grid-template-columns: minmax(260px, 38%) 1fr; align-items: stretch; }
  .tvr-hero-split:not(.has-picks) .tvr-pick-art { height: auto; min-height: 200px; border-bottom: 0; border-right: 1px solid var(--tvr-border); }
  .tvr-hero-picks { display: flex; flex-direction: column; gap: 10px; }
}

/* Homepage schedule: rows flow through newspaper columns inside each daypart,
   so reading order stays chronological down each column. It used to put each
   DAYPART in its own grid column (3 across); tonight's guide is almost all one
   daypart, so 138 rows sat in one 323px column beside two empty ones. */
.tvr-schedule-columns [data-filter-block] .tvr-card > .tvr-schedule-row { break-inside: avoid; }
@media (min-width: 720px) {
  .tvr-schedule-columns [data-filter-block] .tvr-card { column-count: 2; column-gap: 28px; }
}
@media (min-width: 1200px) {
  .tvr-schedule-columns [data-filter-block] .tvr-card { column-count: 3; }
}

/* "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(17, 24, 39, 0.03);
  border-radius: var(--tvr-radius-sm);
  padding: 9px 10px;
  color: var(--tvr-text-primary);
}
.tvr-rail-channels-grid a:hover { background: rgba(17, 24, 39, 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). */
  /* The wrapper's padding carries the hover across the gap to the panel.
     With the gap as the panel's margin-top, the pointer left the dropdown
     on its way down and the panel closed before a channel could be
     clicked (16 Oct 2026). */
  .tvr-nav-dropdown { position: relative; padding: 14px 0; margin: -14px 0; }
  .tvr-nav-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    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;
}

/* Mobile drawer: day guides, the films page and every channel. */
.tvr-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  border-radius: 0;
  max-height: calc(100vh - var(--tvr-header-h) - var(--tvr-tabbar-h));
  max-height: calc(100dvh - var(--tvr-header-h) - var(--tvr-tabbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tvr-drawer .container { padding-top: 6px; padding-bottom: 16px; }
.tvr-drawer-heading {
  font-family: var(--tvr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tvr-text-dim);
  margin: 14px 0 8px;
}
.tvr-drawer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tvr-drawer-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--tvr-radius-sm);
  background: var(--tvr-surface-sunken);
  color: var(--tvr-text-primary);
  font-size: 15px;
}
.tvr-drawer-links a.is-active { color: var(--tvr-accent); font-weight: 600; }
@media (min-width: 1024px) { .tvr-drawer { display: none; } }

/* A listed show with its own guide. */
.tvr-schedule-title a { color: var(--tvr-accent); text-decoration: underline; text-underline-offset: 2px; }