/* Phone and tablet pass for the Math Tree (tree/index.html).
   Desktop is the reference: every rule here sits inside a max-width media
   query, and removing this file's <link> gives the desktop site back
   exactly. Linked after the page's own styles. See the /ux role's
   responsive.md for the rules. */

/* ── Phone (max-width 640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
  /* Intro story hook, portrait: video on top, the tree grows underneath it
     (the map area moves below the video, so the tree is framed there). */
  @media (orientation: portrait) {
    #introVideoPanel { width: 100%; height: 38%; }
    /* The map sits below the video instead of beside it. */
    #mapArea.video-panel-open { margin-left: 0; margin-top: 38vh; }
    #introTextStack { width: 100%; height: 38%; padding: 0 18px; }
    .intro-line { font-size: clamp(1.15rem, 5.4vw, 1.6rem); }
  }
  #introSkip { bottom: calc(14px + env(safe-area-inset-bottom)); right: 14px; }

  /* HUD: compact but still tappable (44px targets where it matters). */
  #stageStepper { top: calc(4px + env(safe-area-inset-top)); gap: 6px; padding: 4px 6px; max-width: calc(100vw - 12px); }
  .stage-circle { width: 84px; height: 40px; font-size: 14px; }
  .stage-step[data-display="1"] .stage-circle { padding-bottom: 8px; }
  .phase-dots span { width: 5px; height: 5px; }
  .stepper-arrow { width: 34px; height: 34px; font-size: 19px; }
  /* Explore shrinks to its icon (🌳, or ↩ while exploring). */
  #journeyShowFullTree { max-width: 42px; overflow: hidden; padding: 8px 10px; font-size: 16px; margin-right: 8px; }
  #journeyShowFullTree::after { right: -8px; }

  /* Map corner controls sit below the HUD instead of under it. */
  #topRightControls { top: 62px; right: 8px; gap: 4px; }
  #searchBox { top: 62px; left: 8px; }

  /* Story text and floating buttons. */
  .narrate-band { padding: 0 16px 104px; }
  .journey-overlay { padding-top: 64px; }

  /* How it works coach marks: smaller text so both fit under the HUD. */
  #journeyHowItWorksStep .hiw-row .hiw-text { font-size: 17px; }
  #journeyHowItWorksStep .hiw-row .hiw-item { width: min(270px, 88vw); }

  /* Choose your grade: full-width pills, comfortable to tap. */
  .journey-grade-btn { padding: 12px 16px; min-height: 48px; }

  /* Plan screen: buttons stack, preview scales to the screen. */
  .plan-actions { flex-direction: column; align-items: stretch; }
  .plan-actions .journey-cta-btn { width: 100%; }
  .plan-preview-wrap { padding: 8px; max-height: calc(100vh - 230px); }
  .plan-card { padding: 16px 12px 12px; }
}

/* ── Tablet (max-width 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 641px) {
  .stage-circle { width: 150px; height: 42px; font-size: 17px; }
  #journeyShowFullTree { font-size: 15px; padding: 8px 14px; }
}