/* ==========================================================================
   Responsive — three sizes the app is checked at: 1440, 768 and 375.
   The mobile bar appears below 860px, so the header's four links give way to
   the four at the foot of the screen rather than being duplicated.
   ========================================================================== */

/* --- tablet and below: the bottom bar takes over navigation --- */
@media (max-width: 860px) {
  .primary-nav { display: none; }
  .bottom-nav { display: block; }
  .hud { margin-left: auto; }
  .hud-course { display: none; }
  body { padding-bottom: 76px; }
  #main { padding-bottom: var(--sp-6); }

  .mission { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .mission-progress { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--sp-4); }

  .event-card { grid-template-columns: minmax(0, 1fr); }
  .event-frame, .event-motif { max-width: 340px; }

  .companion-launcher { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: var(--sp-4); }

  /* The companion owns the bottom-right corner on small screens, so nothing
     you can press is allowed to reach into it: full-width actions stop short
     of that corner, and the last block on a page keeps clear of it. */
  #view .btn-block { max-width: calc(100% - 84px); }
  #view > *:last-child { margin-bottom: 96px; }
  .next-reward, .goal { padding-right: 84px; }
}

@media (max-width: 720px) {
  .filter-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }

  .course-progress { grid-template-columns: minmax(0, 1fr); }
  .course-progress .btn { width: 100%; }

  /* the journey rail turns on its side */
  .journey-track { flex-direction: column; border-top: 0; border-left: 2px solid var(--line-strong); padding-top: 0; padding-left: var(--sp-5); gap: var(--sp-2); }
  .waypoint::before { top: 50%; left: calc(var(--sp-5) * -1); width: var(--sp-5); height: 2px; }
  .wp-btn { flex-direction: row; justify-content: flex-start; text-align: left; }
  .wp-count { margin-left: auto; }

  .lesson-row { grid-template-columns: 28px minmax(0, 1fr); row-gap: 0; }
  .lr-side { grid-column: 2; padding-bottom: var(--sp-3); }

  .goal { flex-direction: column; text-align: center; }
  .goal-body p { margin-inline: auto; }

  .passport-head { grid-template-columns: minmax(0, 1fr); }

  .tl-card { grid-template-columns: 40px minmax(0, 1fr); row-gap: var(--sp-2); }
  .tl-year { grid-column: 2; }

  .next-step .btn, .after-lesson .btn { width: 100%; }

  .companion-panel {
    right: 0; left: 0; top: auto; width: auto;
    max-height: 86vh; border-left: 0; border-top: 2px solid var(--ink);
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* --- phone --- */
@media (max-width: 480px) {
  :root { --sp-6: 1.5rem; --sp-7: 2.25rem; }

  .shell { width: min(100% - 2rem, var(--shell)); }
  .mission { padding: var(--sp-5); }
  .mission-title { font-size: var(--step-4); }
  .reader-title, .story-title { font-size: var(--step-4); }
  .question-prompt { font-size: var(--step-2); }

  /* the header on a phone: logo and wordmark, the two labelled figures and
     the portrait — everything inside the 16px gutters, nothing clipped */
  .header-inner { gap: var(--sp-2); }
  .brand-text strong { font-size: 0.9rem; letter-spacing: 0.1em; }
  .profile-name { display: none; }
  .profile-btn { padding: 3px; }
  .profile-btn > svg { display: none; }
  .hud { gap: var(--sp-1); }
  .stat-chip { padding-inline: 2px; }

  .src-detail { grid-template-columns: minmax(0, 1fr); gap: 2px var(--sp-3); }
  .src-detail dt { margin-top: var(--sp-2); }

  .shelf { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .figure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the fish keeps clear of the bar and of any answer control */
  .companion-launcher {
    width: 54px; height: 54px;
    right: var(--sp-3);
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  #view .btn-block { max-width: calc(100% - 72px); }
  .next-reward, .goal { padding-right: 70px; }
  .companion-tip { display: none; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* --- wide screens: the reading column stays put, the page does not sprawl */
@media (min-width: 1500px) {
  :root { --shell: 1240px; }
}

/* --- the final pass at small sizes --- */
@media (max-width: 720px) {
  .station-link { grid-template-columns: 46px minmax(0, 1fr); row-gap: var(--sp-2); }
  .station-go, .station .stamp { grid-column: 2; justify-self: start; }
  .traverse::before { top: 30px; bottom: 30px; left: 23px; }


  .milestone { flex-wrap: wrap; }
  .milestone .btn { width: 100%; }

  .book-block .section-head { flex-wrap: wrap; }
  .book-block .section-head .meta { margin-left: 0; width: 100%; }
}

/* --- the expedition dashboard at smaller sizes --- */
@media (max-width: 980px) {
  .home-pair, .home-pair-low { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .expedition { grid-template-columns: minmax(0, 1fr); }
  .exp-art { min-height: 200px; }
  .exp-art .hi-frame { aspect-ratio: 16 / 9 !important; }
  .exp-body { padding: var(--sp-5); }
}

@media (max-width: 720px) {
  .exp-body .btn-lg { align-self: stretch; }
  .exp-route { flex-wrap: wrap; gap: var(--sp-2) 0; }
  .exp-stop + .exp-stop::before { width: 16px; margin: 0 6px; }

  .journey-card { grid-template-columns: minmax(0, 1fr); }
  .jc-art { aspect-ratio: 16 / 9; min-height: 0; }
  .jc-body .btn, .jc-actions { width: 100%; }

  .checkpoint { grid-template-columns: 44px minmax(0, 1fr); row-gap: var(--sp-2); }
  .cp-side { grid-column: 2; justify-self: start; }
  .cp-mark { width: 44px; height: 44px; }
  .route-track::before, .checkpoint.is-done::before { left: 21px; }

  .guide-invite { flex-wrap: wrap; }
  .guide-invite .btn { width: 100%; }

  .archive-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 720px) {
  .era-route { flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
  .era-route::before { left: calc(var(--sp-4) + 22px); right: auto; top: 30px; bottom: 30px; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--line-strong) 0 10px, transparent 10px 16px); }
  .er-stop { flex-direction: row; text-align: left; gap: var(--sp-3); }
  .er-count { margin-left: auto; }
}

/* Expedition on phones: the caption sits under the picture instead of over it,
   so the picture stays a picture; the reward card gives its button a row. */
@media (max-width: 720px) {
  .exp-art { min-height: 0; }
  .exp-art .hi-frame { height: auto; min-height: 0; aspect-ratio: 5 / 2 !important; }
  .exp-art .hi-cap { padding: var(--sp-3) var(--sp-4); gap: var(--sp-1); }
  .hi-hero .hi-caption-text { font-size: var(--step-0); }
  .exp-body { padding: var(--sp-4) var(--sp-5); }
  .next-reward { flex-wrap: wrap; }
  .nr-body { flex: 1 1 calc(100% - 76px); }
  .next-reward > .btn { margin-left: 68px; }
}

/* answers on phones: the status moves under the answer text */
@media (max-width: 720px) {
  .option { grid-template-columns: 22px minmax(0, 1fr); row-gap: var(--sp-1); }
  .opt-mark { grid-column: 2; justify-self: start; white-space: normal; }
}

/* on a phone the mission button sits high on the screen, clear of the companion */
@media (max-width: 480px) {
  .exp-body .btn-lg { font-size: var(--step-0); padding: var(--sp-3) var(--sp-2); min-height: 52px; }
  .exp-title { margin-bottom: var(--sp-2); }
  /* the mission and its button come first on a phone; the picture follows */
  .exp-art { order: 2; }
  .exp-art .hi-frame { aspect-ratio: 16 / 9 !important; }
  /* the route wraps on a phone, so its connectors would start a line alone */
  .exp-route { gap: var(--sp-2) var(--sp-4); }
  .exp-stop + .exp-stop::before { display: none; }
}