/* Opt-in distance readability. Allow vertical scrolling instead of shrinking text. */
.tv-toggle { font: inherit; color: #f7f6ef; background: #203554; border: 1px solid #9cacc4; border-radius: .6rem; padding: .65rem 1rem; min-height: 44px; cursor: pointer; }
.tv-toggle[aria-pressed="true"] { background: #f7ba2d; color: #111d31; }
.tv-toggle:focus-visible { outline: 3px solid #f7ba2d; outline-offset: 4px; }
html.tv-mode { font-size: clamp(20px, 2vw, 28px); }
.tv-mode .shell { max-width: 1800px; padding: clamp(16px, 2vw, 40px); }
.tv-mode .topbar { flex-wrap: wrap; }
.tv-mode .brand { min-width: 0; max-width: 100%; }
.tv-mode .brand img { max-width: 100%; }
.tv-mode h1 { font-size: clamp(36px, 4vw, 64px); line-height: 1.15; }
.tv-mode .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 20px; flex: none; }
.tv-mode .activity-card { position: relative; container-type: inline-size; padding: 24px; min-height: 210px; }
/* Size titles against the card's content width, with room for the longest title. */
.tv-mode .activity-card h2 { font-size: clamp(32px, 7.8cqw, 64px); line-height: 1.2; letter-spacing: -.025em; }
.tv-mode .card-description { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.4; margin: 12px 0 24px; padding-right: 30px; }
.tv-mode .card-bottom { position: absolute; bottom: 20px; right: 20px; }
.tv-mode .card-arrow { font-size: 24px; }
.tv-mode .module-description, .tv-mode .empty-note p { font-size: clamp(24px, 2.1vw, 34px); line-height: 1.4; }
.tv-mode .tagline { display: block; color: var(--gold); font-size: clamp(24px, 2vw, 34px); line-height: 1.2; font-weight: 650; }
.tv-mode .topbar:has(.tagline) { padding-bottom: 16px; gap: 12px 24px; }
.tv-mode .topbar:has(.tagline) .brand { --tv-brand-width: clamp(238px, 28.75vw, 375px); width: var(--tv-brand-width); height: calc(var(--tv-brand-width) * .225); overflow: hidden; align-items: flex-start; }
.tv-mode .topbar:has(.tagline) .brand img { width: 100%; flex-shrink: 0; transform: translateY(-20%); }
.tv-mode main:has(.activity-grid) { padding-top: 20px; }
.tv-mode #activities-title { font-size: clamp(32px, 3vw, 48px); margin-bottom: 20px; }
.tv-mode .screen-button, .tv-mode .primary-link, .tv-mode .back-link { font-size: 24px; min-height: 52px; }
.tv-mode .who-page, .tv-mode .who-content, .tv-mode .watch-list, .tv-mode .category-list { max-width: none; }
.tv-mode .who-content .clue p { font-size: clamp(32px, 3vw, 48px); line-height: 1.4; }
.tv-mode .who-content .clue { min-height: 0; padding: 1rem; }
.tv-mode .story-beat p, .tv-mode .story-beat.current p { font-size: clamp(26px, 2.2vw, 36px); line-height: 1.45; }
.tv-mode .play-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.tv-mode .cloud, .tv-mode .seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-mode .principle strong { font-size: 1.15rem; line-height: 1.3; }
.tv-mode .principle small, .tv-mode .verse { font-size: .9rem; white-space: normal; }
.tv-mode .principle { min-height: 7rem; }
.tv-mode .card-front { font-size: clamp(36px, 4vw, 64px); }
.tv-mode .answer p, .tv-mode .hint, .tv-mode .mode-grid small { font-size: 1rem; }
.tv-mode .topic-panel .topic-count { white-space: normal; }
.tv-mode .actions, .tv-mode .selection-head, .tv-mode .card-meta, .tv-mode .final-row, .tv-mode .home-intro, .tv-mode .category-detail-head { flex-wrap: wrap; }
.tv-mode .watch-card { align-items: start; flex-direction: column; }
.tv-mode .category-open span, .tv-mode .watch-open, .tv-mode .random { white-space: normal; }
.tv-mode .final-row a { margin-left: 0; }
.tv-mode button, .tv-mode a, .tv-mode p, .tv-mode h1, .tv-mode h2, .tv-mode strong { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .tv-mode .play-grid, .tv-mode .practice-controls { grid-template-columns: 1fr; }
  .tv-mode .module-grid, .tv-mode .category-detail .episode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tv-mode .activity-grid, .tv-mode .module-grid, .tv-mode .cloud, .tv-mode .seven, .tv-mode .rank-slots, .tv-mode .mode-grid, .tv-mode .topic-choices, .tv-mode .category-detail .episode-grid { grid-template-columns: 1fr; }
  .tv-mode .category-row { flex-direction: column; }
  .tv-mode .activity-card { min-height: 0; }
}