/* ================================================================
   PHONE ROTATION / LANDSCAPE RESPONSIVENESS
   -----------------------------------------------------------------
   Additive only: nothing below overrides portrait or desktop layout.
   It targets short-height viewports (phones turned sideways) so the
   experience stays professional and fully usable in landscape too.
   Detection uses (orientation:landscape) + a height ceiling so tablets
   and laptops — which already look correct — are left untouched.
   ================================================================ */

/* Always-on (not orientation-gated): the achievement popup's close
   button is position:fixed in the corner, so on any notched or
   rounded-corner phone — portrait or landscape — it needs to clear
   the safe area rather than sit under the hardware cutout. This
   file loads last, so it can safely win over screens.css's plain
   top/right values. */
.world-reward-dismiss{
  top:max(18px, calc(env(safe-area-inset-top) + 10px));
  right:max(18px, calc(env(safe-area-inset-right) + 10px));
}
@media(pointer:coarse){
  .world-reward-dismiss{width:44px;height:44px}
}

@media screen and (orientation:landscape) and (max-height:500px){

  /* Let the app breathe vertically instead of relying on desktop-scale
     spacing that was tuned for tall portrait/desktop viewports. Left/
     right respect the safe area, since in landscape a phone's notch
     or rounded corner sits at the side of the screen, not the top. */
  .app{
    padding-top:0;padding-bottom:0;
    padding-left:max(var(--sp-5), env(safe-area-inset-left));
    padding-right:max(var(--sp-5), env(safe-area-inset-right));
  }

  /* --- topbar: keep it compact so it doesn't eat the limited height --- */
  .topbar{min-height:0;padding:10px 0;gap:14px}
  .wordmark img{height:22px}
  .wordmark b{font-size:16px}
  .topbar.is-learning .learning-topbar-track{min-width:260px}
  .top-learning-stage span{width:28px;height:28px}
  .top-learning-stage small{font-size:8px}

  /* --- home hero --- */
  .hero{padding:var(--sp-5) 0 var(--sp-4)}
  .hero h1{font-size:clamp(28px,5vw,40px);margin:var(--sp-3) 0 var(--sp-3)}
  .hero-sub{font-size:15px;margin:0 auto var(--sp-4)}
  .home-spine{margin-bottom:var(--sp-5)}
  .spine-side{padding:var(--sp-4) var(--sp-5)}

  /* --- academy --- */
  .academy{padding:var(--sp-5) 0}
  .academy-h{font-size:24px;margin:0 auto var(--sp-2)}
  .academy-sub{margin:0 auto var(--sp-4)}
  .academy-grid{grid-template-columns:1fr 1fr;gap:var(--sp-3)}

  /* --- onboarding / guided questions --- */
  .onboard-wrap{padding:var(--sp-4) 0}
  .oq-ask{font-size:20px;margin-bottom:var(--sp-4)}
  .oq-option{min-height:52px;padding:11px 16px}
  .world-learning-shell .oq-card,.onboarding-learning-shell .oq-card{padding:16px}
  .world-learning-shell .oq-ask,.onboarding-learning-shell .oq-ask{font-size:20px;margin-bottom:14px}

  /* --- CPA Juma / Ben teacher hero + cards: keep side-by-side, shrink height --- */
  .teacher-wrap{padding:12px 16px 30px}
  .teacher-hero{min-height:0;gap:16px}
  .teacher-hero-copy h1{font-size:clamp(26px,5vw,38px);margin:6px 0 10px}
  .teacher-lead{font-size:14px;line-height:1.5}
  .teacher-motto{margin:12px 0;padding:10px 12px;font-size:15px}
  .teacher-hero-art{min-height:0}
  .teacher-hero-art .teacher-avatar{width:150px;height:180px}
  .teacher-hero-art .teacher-avatar-ben{width:140px;height:195px}
  .teacher-card{padding:12px;gap:12px;grid-template-columns:110px 1fr}
  .teacher-visual{min-height:0}
  .teacher-card .teacher-visual{min-height:0}
  .teacher-card .teacher-avatar{width:130px;height:170px}
  .teacher-card .teacher-avatar-ben{width:125px;height:185px}
  .teacher-method-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
  .teacher-method-card{padding:12px}

  /* --- teacher speech / prompt cards used throughout learning flows --- */
  .teacher-speech{padding:12px 14px 14px}
  .teacher-speech h3{font-size:17px;margin:0 0 5px}
  .teacher-speech p{font-size:13px}
  .teacher-visual::before{display:none}
  .learning-teacher-rail .teacher-visual{min-height:0}
  .learning-teacher-rail .teacher-avatar{width:120px;height:150px}
  .learning-teacher-rail .teacher-avatar-ben{width:115px;height:160px}
  .teacher-card-compact .teacher-visual{min-height:0}
  .teacher-card-compact .teacher-avatar{width:110px;height:140px;margin:0}
  .teacher-card-compact .teacher-avatar-ben{width:105px;height:150px;margin:0}

  /* --- learning shell: keep the 3-column layout (there's width to spare
     in landscape) but tighten the vertical rhythm --- */
  .learning-shell{padding-top:10px}
  .learning-sidebar{top:8px}
  .learning-teacher-rail{top:8px}
  .learning-context-icon{font-size:28px;margin:2px 0 8px}

  /* --- world / journal / testing cards: trim generous padding --- */
  .world-learning-shell .oq-card{padding:16px 18px}
  .journal-practice-card h2{margin:2px 0 6px}
  .journal-entry-editor{font-size:.9em}

  /* --- profile / gamification HUD --- */
  .profile-hud{margin:0 auto 10px}
  .badge-head{margin:14px 0 8px;padding-top:10px}

  /* --- modals: rely on vh (already orientation-aware) but tighten
     chrome so more of the short viewport is usable content --- */
  .statements-overlay,.records-overlay{padding:10px}
  .statements-modal{padding:14px;max-height:94vh}
  .statements-modal-head{margin-bottom:8px}
  .records-modal .record-tabs{padding:6px 0}

  /* --- section rhythm generally: large multiples of --sp-7/8/9 were
     tuned for tall viewports; scale them down only in this context --- */
  .teacher-principles{margin-top:10px}

  /* --- academy / site card --- */
  .academy-grid{grid-template-columns:1fr 1fr 1fr}
  .video-title{font-size:14.5px}
  .video-blurb{font-size:12.5px;padding-bottom:var(--sp-3)}
  .site-card{padding:var(--sp-3) var(--sp-5);margin-bottom:var(--sp-4)}

  /* --- business world scene / stage pills / ledger strip --- */
  .world-wrap{padding:var(--sp-4) 0}
  .stub{padding:var(--sp-5) 0}
  .stage-pills{margin-bottom:12px}
  .scene{padding:2px 0 12px;gap:16px}
  .ledger-strip{margin:2px 0 12px}
  .dropzone{min-height:52px;margin-bottom:var(--sp-3)}
  .chip{padding:9px 16px;font-size:13.5px}
  .oq-hint{margin-top:var(--sp-3);min-height:0}
  .oq-after{margin-top:var(--sp-4);padding-top:var(--sp-4)}
  .glossary-panel{max-height:180px}

  /* --- profile HUD / mastery / badges / error hunter --- */
  .mastery-panel{margin:14px auto 18px;padding:16px}
  .mastery-columns{gap:16px}
  .error-lines{margin:14px auto}
  .eh-feedback{margin:8px auto}

  /* --- records / statements panels reached from World --- */
  .record-summary{margin:14px 0}
  .records-panel{margin-top:14px}
  .statement-grid{gap:10px}
  .statement-card{padding:12px}

  /* --- achievement / reward celebration popup --- */
  .world-reward-layer{padding:12px}
  .world-reward-card{
    padding:18px 24px 16px;max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
  }
  .world-reward-emblem{width:60px;height:60px;margin-bottom:6px}
  .world-reward-emblem svg{width:38px;height:38px}
  .world-reward-title{font-size:clamp(1.3rem,4vw,1.9rem);margin-top:5px}
  .world-reward-sub{margin-top:6px;font-size:.85rem}
  .world-reward-rule{margin:12px auto 10px}
  .world-reward-stats{grid-template-columns:repeat(3,1fr);margin-bottom:10px}
  .world-reward-stats>div{padding:8px 8px}
  .world-reward-chain{padding:10px 12px}
  .world-reward-badge{margin-top:10px;padding:8px 10px}
  .world-reward-continue{margin-top:10px}
  .world-reward-timer{margin-top:8px}
  .world-reward-dismiss{width:34px;height:34px;font-size:1.2rem;top:calc(env(safe-area-inset-top) + 8px);right:calc(env(safe-area-inset-right) + 8px)}
}

/* Extra-short landscape (older / smaller phones, browser chrome visible) */
@media screen and (orientation:landscape) and (max-height:380px){
  .topbar{padding:6px 0}
  .hero{padding:var(--sp-3) 0 var(--sp-3)}
  .teacher-hero-art .teacher-avatar{width:110px;height:135px}
  .teacher-hero-art .teacher-avatar-ben{width:105px;height:145px}
  .learning-teacher-rail .teacher-avatar{width:96px;height:120px}
  .learning-teacher-rail .teacher-avatar-ben{width:92px;height:128px}
  .world-reward-card{padding:14px 18px 12px}
  .world-reward-emblem{width:46px;height:46px;margin-bottom:4px}
  .world-reward-emblem svg{width:30px;height:30px}
  .world-reward-title{font-size:clamp(1.1rem,4vw,1.5rem)}
  .world-reward-stats>div{padding:6px}
  .world-reward-chain-flow{margin:7px 0 4px}
}

/* Ultra-short landscape: small phones with on-screen nav bars, or a
   phone in a keyboard case / split-screen strip. Every non-essential
   pixel of vertical chrome is trimmed so the question itself always
   fits without the person needing to scroll to find it. */
@media screen and (orientation:landscape) and (max-height:320px){
  .topbar{padding:4px 0}
  .wordmark img{height:18px}
  .wordmark b{font-size:14px}
  .hero{padding:var(--sp-2) 0}
  .hero h1{margin:var(--sp-2) 0}
  .oq-ask{font-size:17px;margin-bottom:10px}
  .oq-option{min-height:40px;padding:8px 14px}
  .teacher-hero{gap:10px}
  .teacher-hero-art .teacher-avatar{width:86px;height:105px}
  .teacher-hero-art .teacher-avatar-ben{width:82px;height:113px}
  .learning-teacher-rail .teacher-avatar,
  .teacher-card-compact .teacher-avatar{width:78px;height:96px}
  .learning-teacher-rail .teacher-avatar-ben,
  .teacher-card-compact .teacher-avatar-ben{width:75px;height:104px}
  .world-reward-card{padding:12px 14px 10px}
  .world-reward-kicker,.world-reward-continue{display:none}
  .world-reward-emblem{width:38px;height:38px;margin-bottom:3px}
  .world-reward-emblem svg{width:24px;height:24px}
  .world-reward-title{font-size:1.05rem;margin-top:2px}
  .world-reward-sub{font-size:.78rem;margin-top:4px}
  .world-reward-rule{margin:8px auto 6px}
}

/* --- tablets and small laptops turned sideways: taller than a phone
   in landscape but shorter than a typical desktop window, so the
   3-column learning layout needs a touch less vertical padding to
   avoid feeling cramped against browser chrome. --- */
@media screen and (orientation:landscape) and (min-height:501px) and (max-height:700px) and (min-width:700px){
  .learning-shell{padding-top:12px}
  .learning-sidebar,.learning-teacher-rail{top:10px}
  .teacher-wrap{padding-top:16px;padding-bottom:24px}
  .teacher-hero{min-height:0}
}