/* ============================================================
   The Mole Hole — Android TV mode styles
   ALL rules are gated behind body.tv-mode so the phone app is
   100% untouched. TV mode activates via ?tv=1 or TV user-agent.
   Theme: Deep Fairway #d4e4cf, no dark mode (reels keeps its
   own video-player dark stage, which is content, not chrome).
   ============================================================ */

/* ---------- 1. Base: 10-foot viewing sizes ---------- */
body.tv-mode {
  font-size: 20px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.tv-mode h1 { font-size: 2.1rem; }
body.tv-mode h2 { font-size: 1.65rem; }
body.tv-mode h3 { font-size: 1.3rem; }
body.tv-mode p,
body.tv-mode li,
body.tv-mode span,
body.tv-mode div { font-size: inherit; }
body.tv-mode small,
body.tv-mode .tagline,
body.tv-mode .reel-time,
body.tv-mode .reel-summary {
  font-size: 1rem !important;
}

/* ---------- 2. Global visible focus ring ----------
   Standalone pages had ZERO :focus styles — on TV the user
   must always see what is selected. Gold ring + subtle scale. */
body.tv-mode :focus { outline: none; } /* reset, we draw our own */
body.tv-mode :focus-visible,
body.tv-mode .tv-focused {
  outline: 4px solid #c7922d !important;
  outline-offset: 3px !important;
  border-radius: 8px;
  box-shadow: 0 0 0 7px rgba(199,146,45,.35) !important;
}
body.tv-mode button.tv-focused,
body.tv-mode a.tv-focused,
body.tv-mode .reel-chip.tv-focused,
body.tv-mode .filters button.tv-focused {
  transform: scale(1.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* Fallback: browsers that only support :focus get the ring too */
body.tv-mode a:focus,
body.tv-mode button:focus,
body.tv-mode input:focus,
body.tv-mode select:focus,
body.tv-mode textarea:focus,
body.tv-mode [tabindex]:focus {
  outline: 4px solid #c7922d !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px rgba(199,146,45,.35) !important;
}

/* ---------- 3. Landscape-friendly layouts ---------- */
@media (min-width: 900px) {
  /* Reels: side-by-side player + info instead of stacked portrait */
  body.tv-mode .reels-shell { max-width: 1400px; margin: 0 auto; }
  body.tv-mode .reels-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 24px 60px; }
  body.tv-mode .reel { min-height: 420px; }

  /* News: two-column story grid */
  body.tv-mode #newsBurrowFeed { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 24px 60px; }

  /* Sounds: two-column channel cards */
  body.tv-mode .fs-shell { max-width: 1400px; margin: 0 auto; }
  body.tv-mode .fs-section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  body.tv-mode .fs-section > h2,
  body.tv-mode .fs-section > p { grid-column: 1 / -1; }
  body.tv-mode .fs-channel { margin-bottom: 0; }
}

/* ---------- 4. Hide phone-only UI in TV mode ----------
   PWA install prompts, phone-share flows, upload sheets that
   need a camera/file picker. */
body.tv-mode .install-button,
body.tv-mode .install-close,
body.tv-mode .install-device-choice,
body.tv-mode .install-native-button,
body.tv-mode .install-pathway,
body.tv-mode #installPrompt,
body.tv-mode .reels-upload,
body.tv-mode #uploadSheet,
body.tv-mode .share-to-phone,
body.tv-mode [data-phone-only] {
  display: none !important;
}

/* ---------- 5. TV-mode chrome tweaks ---------- */
/* Bigger tap targets for D-pad OK */
body.tv-mode button,
body.tv-mode a.btn,
body.tv-mode .reel-chip,
body.tv-mode .filters button {
  min-height: 56px;
  min-width: 56px;
  font-size: 1.05rem;
}
/* News filter pills: keep on one scrollable row, large enough to read */
body.tv-mode .filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  padding: 14px 24px;
  scrollbar-width: none;
}
body.tv-mode .filters::-webkit-scrollbar { display: none; }
body.tv-mode .filters button { flex: 0 0 auto; padding: 12px 22px; font-size: 1.05rem; }
/* Reels chips same treatment */
body.tv-mode .reels-chips { overflow-x: auto; padding: 12px 24px; scrollbar-width: none; }
body.tv-mode .reels-chips::-webkit-scrollbar { display: none; }
body.tv-mode .reel-chip { flex: 0 0 auto; padding: 12px 22px; font-size: 1.05rem; }

/* Sounds: channel head buttons get roomy layout */
body.tv-mode .fs-audio-btn,
body.tv-mode .fs-audio-next,
body.tv-mode .fs-vote {
  width: 64px; height: 64px; font-size: 1.6rem;
}

/* TV badge: subtle indicator so testers know TV mode is on */
body.tv-mode::after {
  content: "TV";
  position: fixed; right: 14px; bottom: 14px; z-index: 9999;
  background: #c7922d; color: #17251e; font: 700 13px/1 Arial, sans-serif;
  padding: 6px 10px; border-radius: 6px; opacity: .85; pointer-events: none;
}