/* ============================================================
   responsive.css — Educate mobile (phone + portrait tablet) layer

   Desktop is untouched: everything that changes layout sits inside
   @media (max-width: 820px). Above that width the app renders exactly
   as before.

   Pattern (mirrors Activate's approved 11 Jul 2026 pattern):
   - a fixed top bar with a hamburger, wordmark and avatar, injected by
     mobile.js on any page that has a sidebar rail;
   - the navy sidebar rail becomes an off-canvas drawer that slides in
     over a scrim (body.nav-open, toggled by mobile.js);
   - the content column goes full width, single column, touch targets;
   - exam.html has no rail, so it gets reflow only, no drawer.

   Covers both Educate shells:
   - learner pages (topic/questions): .app / .body / .sb / .main
   - dashboard: .app-shell / .sidebar / .main-content

   Load LAST, after nav.css / sidebar.css / components.css, so these
   rules win on equal specificity by source order.
   ============================================================ */

/* Injected chrome is hidden until the mobile breakpoint. */
.m-topbar,
.m-scrim { display: none; }

@media (max-width: 820px) {

  /* ── Shell: drop the desktop flex/height locks ─────────────── */
  /* nav.css/base.css lock body + shell height because on desktop the inner
     content column scrolls. On mobile the page itself is the scroller. */
  html { height: auto; overflow: visible; }
  body { height: auto; min-height: 100dvh; overflow: visible; }
  .app, .app-shell { height: auto; min-height: 100dvh; display: block; overflow: visible; }
  .body { display: block; height: auto; overflow: visible; }

  /* ── Top bar (present on pages mobile.js flagged .m-nav) ────── */
  .m-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
  }
  body.dark .m-topbar { background: #040a14; border-bottom-color: #0a1628; }

  .m-burger {
    border: none; background: transparent; cursor: pointer;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-primary, #1a1917); border-radius: 8px;
  }
  body.dark .m-burger { color: #fff; }
  .m-burger:active { background: rgba(0,0,0,.06); }

  .m-wordmark { font-family: var(--font-display, 'DM Serif Display', serif); font-size: 20px; color: var(--color-text-primary, #1a1917); }
  body.dark .m-wordmark { color: #fff; }
  .m-wordmark .wm-accent { color: var(--product-accent); }

  .m-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--product-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 500; flex-shrink: 0;
    text-decoration: none;
  }

  /* Push content below the fixed bar; single column, comfortable padding. */
  body.m-nav .main,
  body.m-nav .main-content { padding-top: 68px !important; }
  .main, .main-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 40px !important;
    overflow-y: visible !important;
    height: auto !important;
  }

  /* topic/questions main is inline display:flex;overflow:hidden — override by id. */
  #topic-main, #q-main { display: block !important; overflow: visible !important; height: auto !important; padding-bottom: 150px !important; }

  /* ── Reading view (shared learn engine classes) ────────────────
     Stack the article full width and collapse the "On this page" menu into
     a tap-to-open card at the top. */
  /* Kill the engine's internal-scroll app-shell on mobile so the WHOLE page
     is one continuous scroll. The engine ships .read-wrap{flex:1;overflow:hidden}
     and .read-main{flex:1;overflow-y:auto}; left in place those trap the swipe in
     an inner scroller and the pager (a sibling below) is never reachable. */
  .read-wrap {
    display: block !important;
    flex: none !important;
    overflow: visible !important;
    height: auto !important;
    gap: 0;
  }
  .read-main {
    display: block !important;
    flex: none !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important; max-width: 100% !important;
    padding: 24px 16px 56px !important;
  }
  .read-toc {
    width: 100% !important; order: -1; margin: 0 0 18px;
    border: 0.5px solid var(--color-border); border-radius: 12px;
    background: var(--color-bg-surface);
    padding: 0 !important; overflow: hidden;
  }
  .read-toc .toc-label {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 !important; padding: 13px 16px; cursor: pointer;
  }
  .read-toc .toc-label::after {
    content: ''; width: 8px; height: 8px; margin-left: 8px; flex-shrink: 0;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s; opacity: .55;
  }
  .read-toc.rt-open .toc-label::after { transform: rotate(-135deg); }
  .read-toc:not(.rt-open) > *:not(.toc-label) { display: none !important; }
  .read-toc.rt-open { padding: 0 0 10px !important; }
  .read-toc.rt-open .toc-item,
  .read-toc.rt-open .toc-action { padding-left: 16px !important; padding-right: 16px !important; }
  .read-toc.rt-open .toc-div { margin-left: 16px !important; margin-right: 16px !important; }

  /* ── Sidebar rail → off-canvas drawer (both shells) ────────── */
  .sb, .app-shell .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100dvh;
    width: min(86vw, 300px);
    z-index: 80;
    transform: translateX(-100%);
    transition: transform .26s ease;
    overflow-y: auto;
    border-right: none;
  }
  body.nav-open .sb,
  body.nav-open .app-shell .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.45); }

  /* ── Scrim ─────────────────────────────────────────────────── */
  .m-scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: 75;
    background: rgba(6,15,26,.55);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
  }
  body.nav-open .m-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  /* ── Touch targets ─────────────────────────────────────────── */
  .nav-link, .sb__topic, .sb__back, .signout-btn, .tm__btn { min-height: 44px; }
  .btn { min-height: 44px; }

  /* Dense inline 3/4-column grids fall back to 2 columns. */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Very small phones: trim a little more. */
@media (max-width: 380px) {
  .main, .main-content { padding-left: 12px !important; padding-right: 12px !important; }
  .m-wordmark { font-size: 18px; }
}

/* Bottom pager (engine .t-navbar). Sticky to the viewport bottom so it rides
   along while reading, settling above the 150px content clearance at the end so
   it stays clear of the iOS Safari toolbar. bottom:0 is !important because the
   engine.css loads after this file and to beat any inline offset. Slim two-tier:
   "Topic X of Y" on a small top line, Previous / Practice / Next on the row
   below. */
@media (max-width: 820px) {
  body[data-product="educate"] .t-navbar {
    position: sticky;
    bottom: 0 !important;
    z-index: 5;
    height: auto !important;
    min-height: 56px;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: center;
    padding: 14px;
    margin-top: 8px;
    background: var(--color-bg-surface, #ffffff);
    border-top: 1px solid var(--color-border);
  }
  body[data-product="educate"] .t-navbar__center {
    order: -1;
    width: 100%;
    text-align: center;
    font-size: 11.5px;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
  }
  body[data-product="educate"] .t-navbar > div {
    margin-left: auto;
    gap: 8px;
  }
  body[data-product="educate"] .t-navbar .btn-primary,
  body[data-product="educate"] .t-navbar .btn-ghost {
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 8px 14px;
  }
}