/* ═══════════════════════════════════════════════════════════════════════
   pz-mobile.css — PrepZone shared responsive layer (student app shell)
   ═══════════════════════════════════════════════════════════════════════

   ONE file, loaded by every student page AFTER that page's inline <style>.
   It only *narrows* the desktop layout at small widths; it adds nothing at
   desktop size, so a 404 on this file degrades to the old desktop-only
   layout rather than breaking a page.

   Pairs with pz-mobile.js, which injects the mobile header bar, the
   hamburger, and the scrim at runtime — so pages need no extra markup.

   Contract with the page (all 7 student pages already satisfy it):
     .sidebar  position:fixed; left:0; width:220px
     .main     margin-left:220px

   Breakpoints
     ≤ 900px   sidebar becomes an off-canvas drawer + mobile header bar
     ≤ 600px   single-column grids, tighter padding, smaller display type

   See DESIGN_SYSTEM.md §9 "Responsive student app shell".
   ═══════════════════════════════════════════════════════════════════════ */

/* Injected by pz-mobile.js. Hidden at desktop width. */
#pz-mobile-header,
#pz-nav-scrim { display: none; }

@media (max-width: 900px) {

  /* ── Mobile header bar ─────────────────────────────────────────────
     Fixed black bar carrying the hamburger + wordmark, so the student
     always has a way back to nav without scrolling. */
  #pz-mobile-header {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    z-index: 110;                    /* above the drawer, so the hamburger
                                        stays reachable as a close button */
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: var(--black, #0A0A0A);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  #pz-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;      /* 44px minimum tap target */
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    padding: 0;
  }
  #pz-nav-toggle:active { background: rgba(255, 255, 255, 0.10); }
  #pz-nav-toggle svg { width: 20px; height: 20px; }
  #pz-mobile-header .pz-mh-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;               /* tap target, not just the text height */
    min-width: 0;
    text-decoration: none;
  }
  #pz-mobile-header .pz-mh-wordmark {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
  }
  #pz-mobile-header .pz-mh-wordmark span { color: var(--orange, #FF6B1A); }

  /* ── Sidebar → off-canvas drawer ─────────────────────────────────────
     Sits *below* the header bar so the wordmark and hamburger stay put
     while it slides. */
  .sidebar {
    top: 56px;
    width: 264px;
    max-width: 86vw;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);     /* dodges mobile browser chrome */
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
  }
  .sidebar.pz-open { transform: translateX(0); }

  /* The header bar already carries the logo — a second one inside the
     drawer just eats vertical space on a short screen. */
  .sidebar .sidebar-logo,
  .sidebar .sidebar-top { display: none; }

  #pz-nav-scrim {
    display: block;
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 95;
    background: rgba(10, 10, 14, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  #pz-nav-scrim.pz-open { opacity: 1; pointer-events: auto; }
  body.pz-nav-open { overflow: hidden; }

  /* Bigger tap targets inside the drawer.
     .nav-item is the student app nav; .nav-link is settings.html's. */
  .sidebar .nav-item,
  .sidebar .nav-link { padding: 12px 12px; font-size: 15px; }
  .sidebar .btn-signout { padding: 12px; }

  /* Hamburger ↔ close, driven by the button's own state. */
  #pz-nav-toggle .pz-icon-close { display: none; }
  #pz-nav-toggle[aria-expanded="true"] .pz-icon-open { display: none; }
  #pz-nav-toggle[aria-expanded="true"] .pz-icon-close { display: block; }

  /* ── Main column reclaims the full width ───────────────────────────── */
  .main {
    margin-left: 0 !important;
    max-width: 100% !important;
    padding: 76px 20px 40px;         /* 56px bar + breathing room */
  }

  /* ── Grids step down ───────────────────────────────────────────────── */
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .workbooks-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pp-stat-row { grid-template-columns: repeat(3, 1fr) !important; }
  .pz-level-cards { grid-template-columns: 1fr !important; }

  /* Anything laid out as a single wide row wraps instead of overflowing. */
  .topbar,
  .section-head,
  .savebar,
  .tr-banner { flex-wrap: wrap; }
  body .nodate-cta { flex-wrap: wrap; }

  .topbar-heading { font-size: 30px; }

  /* Long titles and emails must wrap, not push the page sideways. */
  .main, .main * { overflow-wrap: anywhere; }

  /* ── Touch ergonomics ──────────────────────────────────────────────
     Desktop-sized controls (28px pills, 25px buttons) are below the 44px
     guidance and awkward with a thumb. Bump the ones students actually
     press, without touching icon-only affordances. */
  .filter-pill,
  .wb-btn,
  .uc-btn,
  .dp-save,
  .btn-signout {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 16px is the threshold below which iOS Safari zooms the page on focus.
     Anything a student types or picks needs to clear it. */
  input, select, textarea {
    font-size: 16px;
    min-height: 44px;
  }
  input[type="checkbox"], input[type="radio"] {
    min-height: 0;
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 600px) {

  .main { padding: 72px 14px 36px; }

  .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .workbooks-grid { grid-template-columns: 1fr !important; }
  .pp-stat-row { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }

  .topbar-heading { font-size: 26px; }
  .section-title { font-size: 18px; }
  .stat-value { font-size: 28px; }
  .stat-card { padding: 14px 14px; }

  /* Workbook cards no longer need a desktop-tuned minimum height once
     they're full-width. */
  .workbook-card { min-height: 0; }

  /* Filter pills scroll horizontally rather than stacking into a wall. */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-pill { flex: 0 0 auto; padding: 8px 14px; }

  /* Modals sit flush to the edges on a phone.
     NOTE the `body` prefix: these components are styled from a <style>
     block inside <body> (student-dashboard's date prompt), which comes
     after this file in document order. The extra element bumps
     specificity so the mobile rules still win. Same for .nodate-cta on
     student-study-plan. */
  body #datePrompt { padding: 14px; }
  body .dp-card { padding: 20px 18px 18px; }
  body .dp-title { font-size: 22px; }
  body .dp-actions { flex-wrap: wrap; gap: 8px; }
  body .dp-save { width: 100%; }
  body .dp-skip { margin-left: 0; }

  /* Charts get a shorter box so a phone screen isn't one chart tall. */
  .pp-chart-wrap { height: 200px; }

  /* Card footers: keep score and button on one line but let them shrink. */
  .wb-footer { gap: 8px; }
  .wb-btn { padding: 8px 14px; }
}