/* ════════════════════════════════════════════════════════════════════════
   RevizionBot — Mobile Polish (v2, non-destructive)
   ──────────────────────────────────────────────────────────────────────
   The previous version of this file used `!important` to force single-
   column grids, shrink headlines, clip overflow, and hide sidebars on
   iPad — which had the opposite effect: it cut off content because
   grids that were designed to fit side-by-side got collapsed and parts
   of rows ended up off-screen.
   This rewrite keeps ONLY truly non-destructive helpers:
     • Safe-area insets for notch / Dynamic Island
     • Prevent iOS input-focus zoom (min 16 px font)
     • Touch-target minimums for genuinely tiny buttons only
     • Fluid width constraints so content FITS the viewport instead of
       clipping (max-width: 100vw, word-wrap, etc.)
     • Explicit iPad (768-1024px) layout shifts for the only pages that
       actually have a desktop-only grid that breaks at that size
       (lessons.html 3-column shell, dashboard sidebar + content)
   No `!important` unless absolutely necessary. No grid collapsing.
   No sidebar hiding.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --rb-safe-top:    env(safe-area-inset-top, 0px);
  --rb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rb-safe-left:   env(safe-area-inset-left, 0px);
  --rb-safe-right:  env(safe-area-inset-right, 0px);
}

/* ══════ Universal — no clipping, fluid containers ══════ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* On narrow screens make sure a stray wide element triggers a horizontal
   scroll instead of silently clipping. Better the user sees everything
   and can swipe than everything half the page is hidden. */
@media (max-width: 1024px) {
  body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Give the root page container elbow room but never force a max-width
     smaller than the viewport. Any .page container that had
     max-width: 960px and padding: 2rem would overflow at 375px — this
     caps the horizontal padding to something sensible and lets the
     max-width defer to 100vw when the viewport is narrower. */
  .page {
    max-width: 100%;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    box-sizing: border-box;
  }
  /* Any raw <img> should never push a parent wider than the viewport */
  img:not([data-no-shrink]) { max-width: 100%; height: auto; }
}

/* Safe-area insets for notched iPads / iPhones. Only applied to top-level
   body so individual flex / grid children don't get extra gutter. */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Pages that put a sticky topbar at top 0 already handle the notch
     internally — don't double-apply. */
  body.rb-topbar-sticky { padding-top: 0; }
}

/* ══════ iOS-specific input zoom fix ══════
   Any <input>, <textarea>, <select> below 16 px makes iOS Safari
   zoom when focused, which breaks the layout on narrow phones. */
@media (max-width: 767px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: max(16px, 1em);
  }
}

/* ══════ Touch-target minimums ══════
   Only apply to elements that are commonly under-sized. Don't force
   huge heights on every button — some toolbars intentionally have
   compact 32 px icons and growing them 44 px breaks the layout. */
@media (max-width: 767px) {
  a.btn, .btn:not(.btn-compact):not(.btn-icon) {
    min-height: 40px;
  }
}

/* ══════ iPad-specific layout shifts ══════ */

/* lessons.html 3-column shell (sidebar + main + right rail) — it's
   300px + 1fr + 380px on desktop, total 680+ px taken by sidebars.
   On a 768 px iPad portrait that leaves ~88 px for the middle column.
   Collapse to a single column with the middle content full-width. */
@media (max-width: 1024px) {
  .lessons-shell {
    grid-template-columns: 1fr !important;
  }
  .lessons-shell > .lessons-sidebar,
  .lessons-shell > .lessons-right-rail {
    display: none;
  }
  .lessons-shell.rb-sidebar-open > .lessons-sidebar {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 80vw);
    z-index: 1000;
    box-shadow: 0 0 40px rgba(0,0,0,.6);
  }
}

/* mockexam.html paper — 750 px paper centred inside the viewport.
   At ≤900 px width, let it fill the viewport with tight padding
   instead of staying fixed width and overflowing. */
@media (max-width: 900px) {
  .exam-paper, .paper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .paper-body, .paper-header, .paper-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* dashboard.html subject / unit / deck grids — collapse to 2 columns
   on iPad so each card has room, rather than 1 column which wastes
   the extra iPad width. */
@media (min-width: 640px) and (max-width: 1024px) {
  .subjects-grid, .decks-grid, .subdeck-grid, .subject-quick-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* Single-column ONLY on true phones (≤480 px) */
@media (max-width: 480px) {
  .subjects-grid, .decks-grid, .subdeck-grid, .subject-quick-grid,
  .setup-row, .jump-back-grid {
    grid-template-columns: 1fr;
  }
  /* Tight padding on a handful of common narrow-phone containers so
     the card chrome doesn't hug the screen edge. */
  .entry-popup-card, .auth-card, .setup-card {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ══════ Fixed floating UI — respect safe-area on iPhones ══════ */
@media (max-width: 767px) {
  .help-bot-fab, #help-bot-fab, .floating-help-btn, [class*="-fab"] {
    bottom: calc(12px + env(safe-area-inset-bottom));
    right: calc(12px + env(safe-area-inset-right));
  }
}

/* Flashcards speed-bonus popup — was hardcoded right:2rem, collided
   with Dynamic Island on iPhones. */
@media (max-width: 480px) {
  .speed-bonus-popup {
    right: max(12px, env(safe-area-inset-right));
    top: calc(60px + env(safe-area-inset-top));
  }
}

/* Mock exam tool dock — keep it inside the viewport on small phones,
   but DON'T force `transform:none` on iPad (which is wide enough for
   the default centred position to fit fine). */
@media (max-width: 480px) {
  #rb-tool-dock {
    max-width: calc(100vw - 16px);
    left: 8px;
    right: 8px;
    transform: none;
    top: calc(8px + env(safe-area-inset-top));
  }
  #rb-tool-dock .rb-tool-row { flex-wrap: wrap; }
}

/* Toasts / notifications respect home-indicator on iPhones */
.rb-toast, #toast-container, .floating-footer, .exam-footer {
  padding-bottom: max(var(--rb-safe-bottom), 12px);
}

/* ══════ Smoother momentum scrolling ══════ */
.subject-list, .deck-list, .card-list, .scrollable,
.exam-questions-list, .results-questions, .full-working-panel,
.card-scene.has-diagram .card-face, .lessons-main {
  -webkit-overflow-scrolling: touch;
}

/* ══════ Flashcards — Checklist FAB ══════
   The FAB is anchored at top:4.5rem / left:1rem which lands directly on
   top of the flashcard during a study session on phones. Move it to the
   bottom-left corner so it never occludes the card or the Got-it buttons. */
@media (max-width: 600px) {
  .cl-fab {
    top: auto !important;
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: auto;
  }
}

/* ══════ Flashcards — Checklist Sidebar ══════
   300 px on a ~375 px phone = the sidebar covers 80 % of the screen and
   the dark backdrop covers the rest, making it impossible to see or
   interact with the page behind it. On phones expand it to full-width so
   it's unambiguously a modal screen — the ✕ close button is the clear
   exit, matching how every mobile app handles this pattern.
   On iPads (≥601 px) the original 300 px width is fine. */
@media (max-width: 600px) {
  .cl-sidebar {
    width: 100vw;
    left: -100vw;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cl-sidebar.open {
    left: 0;
  }
  /* Push the header down so content isn't hidden behind the notch /
     Dynamic Island on iPhones. The sticky header already has top:0 — this
     adds the necessary safe-area gap. */
  .cl-sidebar-header {
    padding-top: max(1.25rem, env(safe-area-inset-top, 0px));
  }
  /* Hide the backdrop on phones — when the sidebar is full-width there's
     nothing to darken behind it and it looks odd. */
  .cl-backdrop.open {
    display: none;
  }
}

/* ══════ Flashcards — browser topbar on small phones ══════
   The right side of the topbar contains hearts-bar + "🧠 Step Tutor"
   link + "+ New Deck" button. Three items won't fit on a 375 px screen
   without wrapping. Hide the text link on small phones — the Step Tutor
   is still reachable via the study sidebar footer. */
@media (max-width: 480px) {
  .rb-topbar-extra {
    display: none !important;
  }
}

/* ══════ Flashcards — study view bottom tools row ══════
   Four compact buttons in one row (Back / Explain / Edit / Delete)
   wrap awkwardly on a phone. Allow the row to wrap and centre the
   second line. */
@media (max-width: 480px) {
  .fc-card-tools {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem !important;
  }
  .fc-card-tools .btn {
    flex: 1 1 auto;
    min-width: 80px;
    justify-content: center;
  }
}

/* ══════ See Progress — Horizon-style overview tiles ══════
   On phones the 4-column tile bar squashes numbers. Drop to 2-up. */
@media (max-width: 640px) {
  /* The overview card injected by dashboard.js uses inline grid styles —
     match the inline auto-fit minmax with a forced 2-col on phone via the
     wrapping container. The selector is broad but only matches that card. */
  #progress-content > div > div[style*="grid-template-columns:repeat(auto-fit,minmax(170px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Drafts in-progress cards become 1-up so the thumbnail isn't crushed */
  #progress-content > div > div[style*="grid-template-columns:repeat(auto-fit,minmax(260px"],
  #progress-content > div > div[style*="grid-template-columns:repeat(auto-fit,minmax(240px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══════ Practice — setup page tiles ══════
   Subject grid is fine via existing breakpoints but the four "quick action"
   tiles (Build Paper / Upload / Past Attempts / Do a Past Paper) want at
   least 2-up on phone, not the cramped 4-up that comes from auto-fill. */
@media (max-width: 480px) {
  .quick-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .55rem !important;
  }
  .quick-grid .q-card {
    padding: .85rem .7rem !important;
  }
  .quick-grid .q-card .lbl { font-size: .82rem !important; }
  .quick-grid .q-card .des { font-size: .68rem !important; line-height: 1.3 !important; }
}

/* ══════ Practice exam toolbar ══════
   The toolbar (pen / eraser / colours / font / submit) wraps awkwardly on
   phones. Make it a single horizontal scroll strip with bigger taps. */
@media (max-width: 760px) {
  #exam-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: .5rem .75rem !important;
    gap: .35rem !important;
    scrollbar-width: none;
  }
  #exam-toolbar::-webkit-scrollbar { display: none; }
  #exam-toolbar .x-tool, #exam-toolbar .x-color {
    flex-shrink: 0;
    min-width: 38px;
    height: 38px;
  }
  #exam-toolbar .x-submit {
    flex-shrink: 0;
    padding: .55rem .9rem !important;
    font-size: .82rem !important;
  }
  #exam-toolbar .x-spacer { flex: 0 0 .25rem !important; }
  /* Hide the size/font widgets on phones — pen+colour+submit cover 90% of
     the writing flow. Users on iPad portrait (>= 768px) keep them. */
  @media (max-width: 480px) {
    #exam-toolbar .x-font, #exam-toolbar .x-size-wrap { display: none !important; }
  }
}

/* ══════ Exam tutor sidebar ══════
   On iPad portrait the existing breakpoint (max-width: 900px) makes the
   tutor a full-screen sheet with z-index 200, but the toggle button can
   sit behind the topbar. Pin the close icon and make the sheet wider. */
@media (max-width: 900px) {
  #exam-tutor {
    width: min(92vw, 380px) !important;
  }
  #exam-tutor .t-input input {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
}

/* ══════ PaperPad — page rendering on phone/iPad ══════
   The pages need to fit the viewport with a small gutter and the tap pills
   stay reachable above the toolbar. */
@media (max-width: 1024px) {
  .x-q-card.is-pad-page {
    margin: 0 .5rem 1rem !important;
    border-radius: 8px !important;
  }
  .x-q-card.is-pad-page .x-paper {
    border-radius: 8px !important;
  }
  /* "Check Q" pills can overflow on tight pages — keep them readable */
  .pad-check-pill {
    font-size: .7rem !important;
    padding: .3rem .55rem !important;
  }
}
@media (max-width: 480px) {
  /* Save-status indicator next to the subject name truncates badly when
     long ("· Saving…"). Drop a tiny size and make it a small badge. */
  #pad-save-status {
    font-size: .7rem !important;
  }
  /* Page-number chip can overlap content on narrow screens */
  .x-q-card.is-pad-page .pad-page-num {
    top: .35rem !important;
    left: .4rem !important;
    font-size: .65rem !important;
    padding: .15rem .4rem !important;
  }
}

/* ══════ Modals — keep all in-app modals iOS-friendly ══════
   The PaperPad subject/name modal, the file-paper modal, and the
   open-saved-paper review modal all use position:fixed inset:0. On iOS
   Safari the keyboard shrinking the viewport can hide the action buttons —
   make them scroll within their own container. */
@media (max-width: 760px) {
  #pad-subject-modal > div,
  #pad-name-modal > div,
  #rb-file-paper-modal > div,
  #rb-saved-paper-modal > div,
  #rb-unit-file-modal > div {
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #pad-subject-modal input, #pad-name-modal input, #rb-file-paper-modal input, #rb-file-paper-modal select {
    font-size: 16px !important; /* iOS zoom-on-focus prevention */
  }
}

/* ══════ Sidebar nav tap targets ══════
   The nav items on the dashboard sidebar shrink to 28px height in places.
   Bump to comfortable 44px hit zones on touch devices. */
@media (hover: none) and (pointer: coarse) {
  .nav-item {
    min-height: 44px;
  }
  .q-card, .s-card, .pad-subj-btn {
    min-height: 64px;
  }
}

/* ══════ Things DELIBERATELY NOT in this file ══════
     - No grid-template-columns overrides on iPad (broke side-by-side layouts)
     - No sidebar translateX (hid the dashboard menu)
     - No body overflow-x:hidden (was clipping content instead of scrolling)
     - No h1/h2/.card-text font-size !important (cascaded into unrelated areas)
     - No blanket padding overrides on modals (broke their own centering)
*/