/* Wide-display reading layout. This is not TV detection or remote-control support.
   Keep native browser zoom and the existing tablet/phone breakpoints intact. */
.audio-bar-phrase, .audio-bar-reading { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 1920px) {
  :root { --wide-sidebar: clamp(280px, 12.5vw, 480px); --wide-copy: clamp(20px, 1.05vw, 36px); }
  .sidebar.trip-sidebar { width: var(--wide-sidebar); padding: clamp(24px, 1.4vw, 48px); }
  .app-shell { margin-left: var(--wide-sidebar); }
  main { max-width: 2400px; padding: clamp(42px, 2.5vw, 80px); }
  main h1 { font-size: clamp(58px, 3vw, 100px) !important; max-width: none !important; }
  main h2, main .section-heading h2 { font-size: clamp(28px, 1.6vw, 52px) !important; }
  main h3 { font-size: clamp(23px, 1.2vw, 40px) !important; }
  main p, main li, main .topic-en, main .step-help { font-size: var(--wide-copy) !important; max-width: 65ch; }
  main .page-intro { max-width: 65ch; }
  main a, main summary, main .eyebrow, main figcaption,
  main .discovery-example .audio-tap-note { font-size: clamp(17px, .8vw, 28px) !important; }
  main .discovery-hero { grid-template-columns: minmax(0, 1fr) clamp(220px, 12vw, 420px); }
  .trip-sidebar .nav-footer a, .trip-sidebar .sidebar-bottom a,
  .breadcrumb, .streak-pill { font-size: clamp(14px, .75vw, 26px) !important; }
  main .romanization { font-size: clamp(17px, .9vw, 30px) !important; }
  main .audio-phrase-button .topic-ko, main .expression .ko { font-size: clamp(30px, 1.6vw, 54px) !important; }
  main .btn, main .text-link, main .quiz-option, main input, main select, main textarea,
  main .lesson-steps > button { font-size: clamp(18px, .95vw, 32px) !important; }
  main .btn, main .quiz-option, main input, main select { min-height: 56px; }
  .trip-sidebar .brand-wordmark { font-size: clamp(24px, 1.2vw, 42px) !important; }
  .trip-sidebar .brand-wordmark small { font-size: clamp(21px, 1vw, 36px) !important; }
  .trip-sidebar .nav-entry { font-size: clamp(18px, .9vw, 32px) !important; min-height: clamp(52px, 2.8vw, 96px); }
  .trip-sidebar .nav-icon { width: clamp(32px, 1.6vw, 56px); height: clamp(32px, 1.6vw, 56px); }
  .trip-sidebar svg { width: clamp(23px, 1.2vw, 42px); height: clamp(23px, 1.2vw, 42px); }
  .trip-sidebar .nav-caption, .trip-sidebar .nav-tagline { font-size: clamp(13px, .7vw, 24px) !important; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 24%); }
  .lesson-layout { grid-template-columns: clamp(240px, 13vw, 450px) minmax(0, 1fr); }
  .course-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
  .week-card .week-links { flex-wrap: wrap; }
  .week-links a { width: 44px; height: 44px; font-size: 18px; }
  #learning-audio-bar { left: calc(var(--wide-sidebar) + 24px); width: min(1500px, calc(100vw - var(--wide-sidebar) - 440px)); }
  .audio-bar-phrase { font-size: clamp(26px, 1.35vw, 46px) !important; white-space: normal; overflow-wrap: anywhere; }
  .audio-bar-reading { font-size: clamp(18px, .95vw, 32px) !important; white-space: normal; overflow-wrap: anywhere; }
  .audio-bar-source, .audio-bar-status, .audio-bar-label, .audio-bar-controls label { font-size: clamp(15px, .8vw, 26px) !important; }
  .audio-bar-controls button, .audio-bar-controls select, .learning-help-dock button { font-size: clamp(18px, .95vw, 30px) !important; min-height: 56px; }
  .learning-help-dock { right: 32px; bottom: 32px; }
  .learning-help-dialog { width: clamp(700px, 40vw, 1300px); max-width: calc(100vw - 64px); padding: clamp(28px, 1.5vw, 56px); }
  .learning-help-dialog :is(p, summary, label, a, button, input, textarea) { font-size: var(--wide-copy); }
  .learning-help-dialog h2 { font-size: clamp(32px, 1.8vw, 60px); }
  .learning-help-dialog h3 { font-size: clamp(26px, 1.4vw, 46px); }
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
  .learning-help-dialog :is(button, a, input, textarea, summary):focus-visible { outline: 5px solid #866b9a; outline-offset: 5px; }
}