/* ═══════════════════════════════════════════════════════════════════════
   pz-workbook-phone.css — phone layout for LevelUp workbooks (Oct 2026)
   ═══════════════════════════════════════════════════════════════════════
   Loaded by templates/math.html and templates/rw.html (and every workbook
   generated from them). Every rule is scoped under html.pz-phone, which
   /pz-workbook-phone.js sets only on phones (shortest screen side < 600px)
   or very narrow windows. Tablets and computers never match: they keep
   the full Bluebook-style player.

   Layout on a phone:
     · compact orange top bar (logo mark, timer, tool icons only)
     · one scrolling column: R&W passage above the question
     · bottom bar: Index · Question n of N (opens the grid sheet) · Prev/Next
     · calculator opens split screen: question above (upright) or left (sideways)
     · Math on an upright phone: a small "try sideways" tip, once a session
   See DESIGN_SYSTEM.md "Workbooks on phones".
   ═══════════════════════════════════════════════════════════════════════ */

html.pz-phone { --topbar-h: 46px; --bottombar-h: 56px; -webkit-text-size-adjust: 100%; }

/* ── Top bar ─────────────────────────────────────────────── */
html.pz-phone .topbar { padding: 0 8px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
html.pz-phone .topbar-logo-text,
html.pz-phone .topbar-directions,
html.pz-phone .topbar-tool-label,
html.pz-phone .timer-btns .timer-btn:not(:first-child) { display: none; }
html.pz-phone .topbar-left { flex: 0 0 104px; }
html.pz-phone .topbar-logo { display: none; }
/* The template's floating "← Dashboard" button (bottom-left, inline styles) would
   sit on top of the bottom bar on a phone: move it into the top bar's left slot. */
/* Oct 14: matched by the .pz-dash-link class the script adds (it also removes the inline
   hover handlers). The old [style*="position:fixed"] match broke on a phone's first tap:
   the hover handler rewrote the style (to "position: fixed"), the rule stopped matching
   and the button jumped to the bottom, so students had to tap twice. */
html.pz-phone a.pz-dash-link, html.pz-phone a[href$="student-dashboard.html"][style*="position:fixed"] {
  top: calc(8px + env(safe-area-inset-top)) !important; bottom: auto !important; left: max(8px, env(safe-area-inset-left)) !important;
  z-index: 210 !important; height: 30px; padding: 0 10px !important; gap: 4px !important;
  font-size: .74rem !important; background: rgba(255,255,255,.18) !important;
  box-shadow: none !important; transform: none !important;
}
html.pz-phone .topbar-center { flex-direction: row; gap: 8px; }
html.pz-phone .timer { font-size: .9rem; }
html.pz-phone .topbar-tool { padding: 6px 8px; }
html.pz-phone .topbar-tool svg { width: 22px; height: 22px; }

/* ── Practice banner (workbook title) ────────────────────── */
html.pz-phone .practice-banner {
  font-size: .62rem; padding: 4px 10px; height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.pz-phone .workspace { top: calc(var(--topbar-h) + 22px); }
/* Sideways the height is precious: drop the title strip */
html.pz-phone.pz-landscape .practice-banner { display: none; }
html.pz-phone.pz-landscape .workspace { top: var(--topbar-h); }

/* ── Question pane ───────────────────────────────────────── */
html.pz-phone .pane-q { padding: 12px 12px 24px; width: 100% !important; flex: 1 1 auto !important; }
html.pz-phone .pane-q.split { width: 100% !important; }
html.pz-phone .divider { display: none !important; }
html.pz-phone .q-card { padding: 14px 12px; border-radius: 10px; }
html.pz-phone .q-header { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
html.pz-phone .q-meta-right { margin-left: 0; flex-wrap: wrap; gap: 6px; width: 100%; }
html.pz-phone .breadcrumb { font-size: .72rem; flex-wrap: wrap; }
html.pz-phone .q-body { font-size: 1rem; }
html.pz-phone .q-body img { max-width: 100% !important; height: auto; }
html.pz-phone .choice-btn { padding: 12px; min-height: 48px; }
/* Typed Math tables (Oct 2026): tighter cells so most fit a phone; wider ones get smaller text (to 70%), then scroll inside their box (templates/math.html) */
html.pz-phone .q-body .typed table.t-tbl { font-size: .85rem; }
html.pz-phone .q-body .typed table.t-tbl th, html.pz-phone .q-body .typed table.t-tbl td { padding: .37em .5em; min-width: 0; }   /* em: shrinks with the table's text when it is fitted (pzFitTyped) */
html.pz-phone .spr-row { flex-wrap: wrap; }
html.pz-phone .spr-input { font-size: 16px; }          /* 16px stops iOS zoom-on-focus */
html.pz-phone .action-row { gap: 8px; }
html.pz-phone .explanation { padding: 14px 12px; }
html.pz-phone .explanation img { max-width: 100%; height: auto; }

/* ── Index view ──────────────────────────────────────────── */
html.pz-phone .index-hero h1 { font-size: 1.25rem; }
html.pz-phone .diff-row { padding-left: 10px; padding-right: 10px; }
html.pz-phone .q-num-btn, html.pz-phone .nav-btn { min-width: 40px; min-height: 40px; }

/* ── Bottom bar ──────────────────────────────────────────── */
html.pz-phone .bottombar {
  height: auto; min-height: var(--bottombar-h);
  padding: 6px 8px; padding-bottom: max(6px, env(safe-area-inset-bottom));
  gap: 6px;
}
html.pz-phone .bb-center { position: static; transform: none; flex: 1 1 auto; justify-content: center; min-width: 0; }
html.pz-phone .bb-q-pill { padding: 8px 10px; font-size: .78rem; white-space: nowrap; }
html.pz-phone .flag-pill { display: none !important; }
html.pz-phone .bb-right { gap: 6px; }
html.pz-phone .bb-next-btn, html.pz-phone .bb-prev-btn { padding: 10px 12px; font-size: .8rem; }
html.pz-phone #index-btn {          /* navy-on-navy in the template; make it readable */
  padding: 8px 10px !important; background: transparent; color: #E2E8F0;
  border: 1px solid rgba(255,255,255,.28);
}

/* ── Sheets and modals ───────────────────────────────────── */
html.pz-phone .nav-panel, html.pz-phone .flag-panel { max-width: none; max-height: 75vh; padding-bottom: env(safe-area-inset-bottom); }
html.pz-phone .panel-overlay { padding: 10px; }
html.pz-phone .panel-modal { max-height: calc(100vh - 20px); }
html.pz-phone #reference-modal .panel-body { padding: 12px; overflow-x: auto; }
html.pz-phone .ref-row { flex-wrap: wrap; }
html.pz-phone .pz-report-modal { width: calc(100vw - 24px) !important; max-width: none; }

/* ── Calculator: split screen so the question stays visible (Math) ─
   Upright: question on top (42%), calculator below.
   Sideways: question left (45%), calculator right.                    */
html.pz-phone .pane-calc.open {
  position: relative; z-index: 20;               /* above the tap-to-zoom badges */
  order: 2; flex: 1 1 auto; min-width: 0; min-height: 0;
  width: auto !important; border-right: none;
}
html.pz-phone .workspace:has(.pane-calc.open) .pane-q { order: 1; }
html.pz-phone.pz-portrait .workspace:has(.pane-calc.open) { flex-direction: column; }
html.pz-phone.pz-portrait .workspace:has(.pane-calc.open) .pane-q { flex: 0 0 var(--pz-q-h, 42%) !important; width: 100% !important; }
html.pz-phone.pz-portrait .pane-calc.open { border-top: 3px solid #FF6B1A; }
html.pz-phone.pz-landscape .workspace:has(.pane-calc.open) .pane-q { flex: 0 0 var(--pz-q-w, 45%) !important; width: var(--pz-q-w, 45%) !important; }
html.pz-phone.pz-landscape .pane-calc.open { border-left: 3px solid #FF6B1A; }
html.pz-phone .calc-topbar { padding: 6px 10px; }
html.pz-phone .calc-topbar-title { font-size: .68rem; }
html.pz-phone .calc-close-btn { font-size: .8rem; padding: 6px 12px; }

/* ── R&W: passage above the question, one scroll ─────────── */
html.pz-phone.pz-rw .workspace { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.pz-phone.pz-rw .pane-passage.show { width: 100% !important; flex: none !important; border-right: none; border-bottom: 1px solid var(--bb-border); }
html.pz-phone.pz-rw .passage-topbar { padding: 6px 12px; }
html.pz-phone.pz-rw .passage-content { overflow: visible; padding: 14px 14px 16px; font-size: 1rem; }
html.pz-phone.pz-rw .pane-q { overflow: visible; flex: none !important; }
html.pz-phone.pz-rw .notes-mid,
html.pz-phone.pz-rw .notes-toggle-chevron { display: none !important; }

/* ── "Try sideways" tip: once a session, first Math question seen upright ─ */
#pz-tip { display: none; }
html.pz-phone.pz-portrait body.pz-tip-on.pz-q-img:not(:has(.pane-calc.open)) #pz-tip {
  display: flex; position: fixed; z-index: 260; left: 10px; right: 10px;
  top: calc(var(--topbar-h) + 22px + 8px);         /* over the breadcrumb, never over the answers */
  align-items: center; gap: 10px; padding: 10px 8px 10px 12px;
  background: #0A0A0A; color: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  font: 500 .88rem/1.4 'Inter', sans-serif; animation: pzTipIn .25s ease-out;
}
#pz-tip .pz-tip-ico { width: 26px; height: 26px; flex: 0 0 26px; animation: pzRot 2.4s ease-in-out infinite; }
#pz-tip .pz-tip-txt { flex: 1; }
#pz-tip .pz-tip-txt b { color: #FF8A4C; }
#pz-tip .pz-tip-x { flex: 0 0 36px; height: 36px; border: none; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; cursor: pointer; }
@keyframes pzRot { 0%, 30% { transform: rotate(0); } 60%, 90% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@keyframes pzTipIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #pz-tip, #pz-tip .pz-tip-ico { animation: none; } }

/* Split-screen calculator: drop the extras above the question so it gets the room */
html.pz-phone .workspace:has(.pane-calc.open) .breadcrumb,
html.pz-phone .workspace:has(.pane-calc.open) .section-strip,
html.pz-phone .workspace:has(.pane-calc.open) .q-meta-right { display: none !important; }
html.pz-phone .workspace:has(.pane-calc.open) .q-card { padding: 10px; }
html.pz-phone .workspace:has(.pane-calc.open) .q-header { margin-bottom: 6px; }

/* Image answer choices (picture of A–D + four letter buttons): tighter on a phone */
html.pz-phone #choices > div:has(> img.pz-choices-img) { padding: 8px !important; }
html.pz-phone #choices .pz-choices-img { max-width: 100% !important; }
html.pz-phone #choices .pz-choose-label { display: none !important; }
html.pz-phone #choices > div[style*="grid-template-columns"] { gap: 6px !important; }
html.pz-phone #choices > div[style*="grid-template-columns"] .choice-btn {
  padding: 6px !important; min-height: 44px !important; font-size: 1rem !important;
}
html.pz-phone #choices { gap: 10px !important; }

/* Tap-to-zoom badge (template's zoom helper): redundant on a phone — people pinch, and a
   tap on the image still opens the full-screen view. It also covered part of the image. */
html.pz-phone .pz-zoom-badge { display: none !important; }

/* Drag handle on the calculator's edge: slide the split, like the divider on a computer */
.pz-calc-grip { display: none; }
html.pz-phone .pane-calc.open { overflow: visible; }
html.pz-phone .pane-calc.open > .pz-calc-grip {
  display: flex; position: absolute; z-index: 30; touch-action: none; align-items: center; justify-content: center;
  left: 0; right: 0; top: -16px; height: 30px; cursor: ns-resize;
}
html.pz-phone.pz-landscape .pane-calc.open > .pz-calc-grip { top: 0; bottom: 0; left: -16px; right: auto; width: 30px; height: auto; cursor: ew-resize; }
html.pz-phone .pz-calc-grip::before { content: ''; width: 44px; height: 6px; border-radius: 3px; background: #FF6B1A; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
html.pz-phone.pz-landscape .pz-calc-grip::before { width: 6px; height: 44px; }
body.pz-dragging, body.pz-dragging * { user-select: none; -webkit-user-select: none; }

/* Section strip ("SECTION 1 OF 3 · Easy · skill · n questions") above the question:
   the breadcrumb already says skill + difficulty, so drop it on phones to save room. */
html.pz-phone .section-strip { display: none !important; }

/* Workbook summary (end of workbook): 2×2 stat boxes and no Question ID column on a phone,
   so Skipped and the Result column fit on screen. Scoped to the summary card only. */
html.pz-phone #q-card > div[style*="padding:28px 24px 32px"] { padding: 18px 4px 22px !important; }
html.pz-phone #q-card div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
html.pz-phone #q-card > div[style*="padding:28px 24px 32px"] table th:nth-child(4),
html.pz-phone #q-card > div[style*="padding:28px 24px 32px"] table td:nth-child(4) { display: none; }
html.pz-phone #q-card > div[style*="padding:28px 24px 32px"] table td,
html.pz-phone #q-card > div[style*="padding:28px 24px 32px"] table th { padding-left: 6px !important; padding-right: 6px !important; }

/* ═══ Oct 14: navigation tidy-up (phones, iPads and computers) ═══════════════
   This file loads on every device; rules here that are NOT under html.pz-phone
   apply to iPads and computers too. pz-workbook-phone.js adds the hooks
   (.pz-qword, .pz-sheet-index, body.pz-bc-dup).
   · Skill + difficulty shown once: the breadcrumb repeated the skill (title strip)
     and the difficulty ("CB: Medium" chip). Hidden when the title names the skill;
     in mixed workbooks (weekly reviews) it stays as the skill alone.
   · Index lives in the question sheet (tap "Question n of N"); the old bar button
     sat under the floating Dashboard button on computers.
   · Computers/iPads: the floating Dashboard button sits inside the bar's left slot.
   · Phones: one-line bar [‹] [6 of 7 · 0/7 done ▴] [Next →]. */
body.pz-bc-dup .breadcrumb { display: none !important; }
.breadcrumb .bc-link, .breadcrumb .bc-sep, .breadcrumb #bc-diff { display: none !important; }
#index-btn { display: none !important; }
.pz-sheet-index {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 10px;
  padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: transparent;
  color: #fff; font: 600 .8rem/1 'Inter', sans-serif; cursor: pointer;
}
.pz-sheet-index:hover { background: rgba(255,255,255,.12); }

html:not(.pz-phone) a.pz-dash-link, html:not(.pz-phone) a[href$="student-dashboard.html"][style*="position:fixed"] {
  bottom: calc((var(--bottombar-h, 54px) - 32px) / 2) !important; left: 16px !important; z-index: 210 !important;
  height: 32px; padding: 0 14px !important; font-size: .8rem !important; letter-spacing: 0 !important;
  background: transparent !important; border: 1px solid rgba(255,255,255,.28) !important; color: #E2E8F0 !important;
  box-shadow: none !important; transform: none !important;
}
html:not(.pz-phone) a.pz-dash-link:hover, html:not(.pz-phone) a[href$="student-dashboard.html"][style*="position:fixed"]:hover { background: rgba(255,255,255,.12) !important; }

html.pz-phone .bottombar { gap: 8px; align-items: center; }
html.pz-phone .bb-left { display: none; }
html.pz-phone .bb-center { order: 2; flex: 1 1 auto; min-width: 0; justify-content: center; }
html.pz-phone .bb-right { display: contents; }
html.pz-phone .bb-prev-btn { order: 1; }
html.pz-phone .bb-next-btn { order: 3; }
html.pz-phone .bb-prev-btn, html.pz-phone .bb-next-btn, html.pz-phone .bb-q-pill {
  height: 44px; border-radius: 10px; white-space: nowrap; line-height: 1; flex: 0 0 auto;
}
html.pz-phone .bb-prev-btn {           /* arrow only: the template sets the "← Prev" text, so hide it */
  width: 48px; padding: 0 !important; font-size: 0 !important; position: relative;
}
html.pz-phone .bb-prev-btn::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -3px;
  border-left: 2.5px solid #E2E8F0; border-bottom: 2.5px solid #E2E8F0; transform: rotate(45deg);
}
html.pz-phone .bb-next-btn { min-width: 92px; padding: 0 16px !important; font-size: .95rem !important; font-weight: 700; }
html.pz-phone .bb-q-pill {
  flex: 1 1 auto; min-width: 0; max-width: 100%; justify-content: center; gap: 4px;
  padding: 0 10px !important; font-size: .9rem !important; overflow: hidden;
}
html.pz-phone .bb-q-pill #q-total span { margin-left: 2px !important; font-size: .78rem !important; }
@media (max-width: 359px) {
  html.pz-phone .bb-q-pill .pz-qword, html.pz-phone .bb-q-pill #q-total span { display: none; }
}
html.pz-phone .pz-sheet-index { padding: 8px 12px; margin-right: 8px; }
html.pz-phone .breadcrumb { margin-bottom: 10px; font-size: .8rem; }

/* ── TestReady Foundations units on phones (Oct 14) ─────────────────────
   math-fullmod.html / rw-fullmod.html load this file (and the script) only on a
   phone and only for tier 'foundations' (html.pz-tr-phone); Full Modules and
   Pacing keep the "use an iPad or computer" gate. Foundations has no pill or
   Prev/Next — one full-width Continue button appears after each answer. */
html.pz-tr-phone .bottombar { justify-content: flex-end; }
html.pz-tr-phone #fnd-continue-btn.visible {
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 1 1 auto; height: 44px; margin: 0;
}
html.pz-tr-phone .bb-center { display: none !important; }