/* ============================================================
   RESPONSIVE.CSS — Global breakpoint overrides
   ────────────────────────────────────────────────────────────
   Applied after all page-specific stylesheets.

   Breakpoints:
     1024px  laptop / large tablet — drop two-column layouts
     900px   tablet landscape
     768px   tablet portrait — hamburger appears
     600px   phone landscape
     400px   phone portrait
   ============================================================ */

/* ── 1024px — laptop / large tablet ──────────────────────── */
@media (max-width: 1024px) {
  /* Two-column page shells (build paper, profile, question bank
     with drawer) collapse to a single column. Pages opt in by
     using these shared class names. */
  .layout-two-col,
  .layout-three-col {
    grid-template-columns: 1fr !important;
  }

  /* Sticky right rails (profile activity, build-paper details)
     un-stick and flow inline below the main content. */
  .layout-aside,
  .right-rail {
    position: static !important;
    top: auto !important;
    width: auto !important;
  }

  /* Page containers — drop max-width gutter padding to match
     phone-tablet edge breathing room. */
  .page-container,
  .container-md { padding-inline: var(--space-5); }
  .container-wide { padding-inline: var(--space-5); }

  .section-pad     { padding-block: var(--space-12); }
  .section-pad-lg  { padding-block: var(--space-16); }
}

/* ── 900px — tablet landscape ────────────────────────────── */
@media (max-width: 900px) {
  .container,
  .card-header,
  .glass-login,
  .thankyou-container {
    margin: var(--space-4);
    padding: var(--space-6);
  }

  .grid { grid-template-columns: 1fr; }

  .actions,
  .extra-actions,
  .modal-buttons {
    flex-direction: column;
    gap: var(--space-3);
  }

  .form-control,
  .form-select,
  .btn {
    padding: 0.6rem 1rem;
    font-size: var(--text-sm);
  }

  /* Display headlines step down a notch on narrow viewports —
     `clamp()` already handles the math, but a hard cap here
     prevents the largest size from ever being chosen on a tablet
     held landscape. */
  .display { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }

  /* Stat strips and feature grids — go from 4-up to 2-up. */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── 768px — tablet portrait ─────────────────────────────── */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .navbar__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--clr-bg-card);
    /* Subtle backdrop for the dropdown — the navbar above already
       has its own blur, this just keeps the dropdown legible
       against any content beneath. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--clr-border);
    flex-direction: column;
  }

  .navbar__links.active { display: flex; }

  .navbar__links ul {
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
  }

  .navbar__links a {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
  }

  /* Tighter section padding on phone-sized screens. */
  .section-pad     { padding-block: var(--space-10); }
  .section-pad-sm  { padding-block: var(--space-8); }
  .section-pad-lg  { padding-block: var(--space-12); }

  /* Most page containers go edge-to-edge with breathing space. */
  .page-container,
  .container-md,
  .container-wide,
  .container-narrow { padding-inline: var(--space-4); }
}

/* ── 600px — phone landscape ─────────────────────────────── */
@media (max-width: 600px) {
  .container,
  .card-header,
  .glass-login,
  .thankyou-container {
    padding: var(--space-4);
    margin: var(--space-3);
  }

  h1 { font-size: var(--text-3xl); }
  h2, .section-header { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-lg); }

  .form-control,
  .form-select,
  .btn {
    padding: 0.55rem 0.875rem;
    font-size: var(--text-sm);
  }

  .mcq-options { grid-template-columns: 1fr; }

  .footer-controls {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  .footer-controls .btn {
    width: 100%;
    max-width: 300px;
  }

  /* Stat strips collapse to 2-up. Cards stack. */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Toasts/messages span the full width with safe-area padding. */
  .toast,
  #toast-message,
  .messages {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    width: auto;
    max-width: none;
  }
}

/* ── 400px — phone portrait ──────────────────────────────── */
@media (max-width: 400px) {
  .form-control,
  .form-select,
  .btn {
    padding: 0.5rem 0.75rem;
    font-size: var(--text-xs);
  }

  .navbar { padding: var(--space-3) var(--space-4); }

  /* Stat strips fully collapse to one column on the smallest
     screens — keep numbers legible rather than crammed. */
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Accessibility: reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }

  /* Soft pulse / shimmer become static — don't run them at all. */
  .skeleton,
  [data-pulse] { animation: none !important; }
}

/* ── High contrast mode helpers ──────────────────────────── */
@media (forced-colors: active) {
  .btn,
  .btn-primary,
  .nav-btn { border: 2px solid ButtonText; }
  .form-control,
  .form-select,
  .form-textarea { border: 2px solid FieldText; }
  .chip,
  .pill,
  .badge { border: 1px solid CanvasText; }
}

/* ── Print ───────────────────────────────────────────────── */
/* Hide page chrome when the user prints — keeps PDF exports
   focused on the question paper itself. Pages that produce
   print artefacts should still set their own page-specific
   print rules. */
@media print {
  .navbar,
  .base-footer,
  .toast,
  #toast-message,
  .messages,
  .success-popup,
  .theme-switch,
  [data-no-print] { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Avoid tearing question cards across pages. */
  .question-box,
  .preview-body section,
  .card { break-inside: avoid; }
}

/* ============================================================ */
/* === Per-page @media blocks extracted on 2026-05-29 === */
/* Cut from the per-page sheets so layout breakpoints live here. */
/* ============================================================ */

/* ── from announcement_popup.css ──────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ann-popover,
  .ann-detail-scrim,
  .ann-detail{ animation: none; }
}

@media (max-width: 600px){
  .ann-popover{
    /* Anchor JS sets top/right, but on phones snap to bottom-sheet */
    top: auto !important;
    right: 8px !important;
    left: 8px !important;
    bottom: 8px !important;
    width: auto;
    max-height: 80vh;
    transform-origin: bottom center;
  }
  .ann-popover__arrow{ display: none; }
}


/* ── from auth-rail.css ───────────────────────────────────── */
@media (min-width: 980px) {
  .login-wrapper.has-rail {
    /* Left rail gets a slightly larger share so the marketing copy
       has room to breathe. Right form column is capped tight at
       420-480px so wide monitors don't end up with a stretched
       form. */
    grid-template-columns: 1fr minmax(420px, 480px);
    /* Reset the mobile `justify-items: center` so the rail + form
       both stretch to fill their grid cells at desktop widths. */
    justify-items: stretch;
    background: var(--clr-bg-card);
  }
  /* On wide screens the form column is no longer a centered card —
     it spans the right column with internal max-width. Padding is
     intentionally tight so the full signup form (8+ fields, hints,
     strength meter, terms, button) fits within ~720-800px viewport
     height without requiring vertical scrolling. */
  .login-wrapper.has-rail .glass-login {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    width: 100%;
    padding: 1.75rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;          /* scroll inside the column if needed */
  }
  .login-wrapper.has-rail .form-section {
    max-width: 360px;
    width: 100%;
  }
  .login-wrapper.has-rail.page-signup .form-section { max-width: 380px; }
}

@media (min-width: 980px) {
  .login-wrapper.has-rail .form-section h1,
  .login-wrapper.has-rail .form-section h2,
  .login-wrapper.has-rail .form-section .su-title {
    font-size: var(--text-2xl);
    margin-bottom: 0.2rem;
  }
  .login-wrapper.has-rail .form-section > p:first-of-type,
  .login-wrapper.has-rail .form-section .su-subtitle {
    font-size: var(--text-sm);
    line-height: 1.45;
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 1400px) {
  .login-wrapper.has-rail {
    grid-template-columns: 1.3fr minmax(420px, 460px);
  }
}

@media (min-width: 980px) { .auth-rail { display: flex; } }

@media (max-width: 600px) {
  .login-wrapper.has-rail .su-field-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .login-wrapper.has-rail .su-field-row > .su-field--city,
  .login-wrapper.has-rail .su-field-row > .su-field--school { flex: 1 1 auto; }
  .login-wrapper.has-rail .su-field-row > .su-field:first-child .form-control,
  .login-wrapper.has-rail .su-field-row > .su-field:first-child .su-input,
  .login-wrapper.has-rail .su-field-row > .su-field:last-child .form-control,
  .login-wrapper.has-rail .su-field-row > .su-field:last-child .su-input {
    border-radius: 0.75rem;
    margin-right: 0;
  }
}

@media (min-width: 980px) {
  .login-wrapper.has-rail .form-section h1,
  .login-wrapper.has-rail .form-section h2,
  .login-wrapper.has-rail .form-section .su-title {
    text-align: left;
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
  }
  .login-wrapper.has-rail .form-section > p:first-of-type,
  .login-wrapper.has-rail .form-section .su-subtitle {
    text-align: left;
    font-size: var(--text-sm);
    line-height: 1.5;
  }
  /* The marketing rail already shows the TestMacher brand on the
     left, so duplicating the small `<a class="auth-logo">` in the
     form column would be redundant. Hide it when the rail is
     visible. On <980px the rail collapses and this logo reappears. */
  .login-wrapper.has-rail .auth-logo {
    display: none;
  }
}


/* ── from auth_reset.css ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .pwr-check,
  .pwr-check__ring,
  .pwr-check__tick{ animation: none; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce){
  .pwr-redirect__spin{ animation: none; }
}


/* ── from auto_generator.css ──────────────────────────────── */
@media (max-width: 1180px) {
  .ag-main { grid-template-columns: 1fr; }
  .ag-rail { position: static; max-height: none; margin-top: 8px; }
  .ag-blueprint { max-height: 340px; }
}

@media (max-width: 760px) {
  .ag-topbar { padding: 0 14px; gap: 8px; }
  .ag-presets { display: none; }
  .ag-tb-title .t2 { display: none; }
  .ag-main { padding: 14px; gap: 14px; }
  .ag-row, .ag-row.r3, .ag-row.r4 { grid-template-columns: 1fr; }
  .qt-main-row { grid-template-columns: 1fr 80px 32px; gap: 6px; }
  .qt-main-row .qt-marks-badge { display: none; }
}


/* ── from coming_soon.css ─────────────────────────────────── */
@media (max-width: 720px){
  .cs-page{
    padding: var(--space-10) var(--space-4) var(--space-12);
  }
  .cs-features{ grid-template-columns: 1fr; }
  .cs-cd-cell{ padding: var(--space-2) var(--space-4); min-width: 68px; }
  .cs-cd-val{ font-size: 24px; }
  .cs-form{ flex-direction: column; }
  .cs-btn{ padding: var(--space-3) var(--space-5); }
  .cs-notify{ padding: var(--space-6) var(--space-5) var(--space-5); }
}


/* ── from papers_list.css ─────────────────────────────────── */
@media (max-width: 944px) {                            /* was 1180 */
  .cp-main { grid-template-columns: 1fr; }
  .cp-rail { position: static; max-height: none; margin-top: 6px; }
}

@media (max-width: 608px) {                            /* was 760 */
  .cp-topbar { padding: 0 11px; gap: 6px; }
  .cp-tb-title .t2 { display: none; }
  .cp-main { padding: 11px; gap: 11px; }
  .cp-head-card { grid-template-columns: 1fr; gap: 8px; }
  .cp-table thead { display: none; }
  .cp-table tbody td { padding: 8px 10px; }
  .cp-t-thumb { display: none; }
  .cp-t-name { max-width: 160px; }
}


/* ── from contact.css ─────────────────────────────────────── */
@media (max-width: 960px) {
  .contact-main { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .contact-main .intro h1 { font-size: clamp(26px, 7vw, 36px); }
  .contact-faq { padding: 24px 20px 40px; }
  .contact-faq .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .contact-topbar { padding: 0 14px; gap: 8px; }
  .contact-topbar .tb-title .t2 { display: none; }
  .contact-main .row-2 { grid-template-columns: 1fr; }
  .contact-main .foot-row { grid-template-columns: 1fr; }
  .contact-main .form-card { padding: 18px 16px; }
}


/* ── from form.css ──────────────────────────────────────────
   Form-grid is `220px minmax(0,1fr) 300px` on desktop. Three columns
   need at least ~900px to render the middle column readably; below
   that the question editor cards overlap the right rail. Drawer
   trigger now at 1024px (matches the left-rail collapse below) so
   every tablet + small laptop sees a clean single-column page. */
@media (max-width: 1024px) {
  /* Right rail collapses to a slide-in drawer. Grid layout itself
     is collapsed to single column by the second @media (max-width: 1024px)
     block below — both rails exit at the same breakpoint. */
  .form-rail--right {
    position: fixed !important;        /* beat desktop's position: sticky */
    top: 0 !important;                 /* beat desktop's top: 60px */
    right: 0;
    bottom: 0 !important;
    /* Pin to full viewport height. min-height: 480px on the desktop rule
       was a FLOOR but combined with `display: flex; flex-direction: column`
       the rail was sizing to its content's intrinsic height (~730px on
       this drawer) instead of the viewport. `height: 100dvh` accounts for
       mobile browser chrome (URL bar etc.) — `vh` would give a constant
       height that doesn't shrink when the URL bar appears, causing
       overscroll. 100vh fallback for older browsers. */
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    width: min(420px, 92vw);                          /* off-scale (drawer) */
    border-radius: 0;
    border-right: none;
    transform: translateX(100%);
    transition: transform 280ms var(--ease-out-expo, ease); /* off-scale */
    z-index: 60;
    box-shadow: var(--shadow-xl);
    align-self: stretch !important;    /* override align-self: start */
  }
  /* Make sure the body + iframe inside the drawer also stretch — without
     this the iframe was capped at its desktop `min-height: 432px` floor,
     leaving a big empty band below the filters. */
  .form-rail--right .form-rail__body {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
  .form-rail--right .qb-iframe {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: 100%;
  }
  /* form.js (form.js:1812) toggles `.active` on the drawer when the
     Question Bank pill is tapped. Previously this rule keyed off
     `[data-open="true"]` which JS never sets — drawer stayed off-screen
     and the bank "didn't render". Match the JS contract. */
  .form-rail--right.active {
    transform: translateX(0);
  }
  .qb-drawer-btn { display: inline-flex; }
}

/* Tablet + phone: collapse BOTH rails at 1024px so the question editor
   gets the full viewport from a small laptop on down. Previous 960px
   threshold left a narrow band where the rail still claimed a 220px
   strip and its sticky positioning made it overlap the question card
   as the user scrolled. Raised here to be safely above 1024px iPad
   landscape too. */
@media (max-width: 1024px) {
  /* Force single-column grid even against form.css's later-loaded
     3-column desktop rule. */
  .form-grid,
  body .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Disable position:sticky on the left rail — sticky against a single
     column makes the rail follow the scroll forever and overlap the
     editor. Reset every related property. */
  .form-rail--left,
  body .form-rail--left {
    position: static !important;
    top: auto !important;
    height: auto !important;
    align-self: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
    z-index: auto !important;
  }
  .form-rail--left .form-rail__panel { flex: 1 1 280px; }
  /* Topbar action button labels collapse here (was 420px) — at this
     width Preview/Draft/Submit text was eating into the tiles row. */
  .form-topbar__btn .btn-label { display: none; }
  .form-topbar__btn {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
  }

  /* Rail-panel collapse on phones works like a normal ACCORDION:
     the panel keeps its full width and a horizontal title row,
     content hides below. Replaces the desktop's "vertical-text
     35×120px strip" — that strip is for an inline sidebar and
     reads as broken on a phone where the rail is already a full-
     width strip across the top. Children still collapse so the
     accordion behaviour is preserved. */
  .form-rail__panel.is-collapsed {
    width: auto;
    height: auto;
    align-self: stretch;
    padding: var(--space-3) var(--space-4);    /* match expanded base */
    display: block;
  }
  /* Eyebrow renders horizontally, with the chevron pushed to the
     right edge so it lines up with the expanded panel's chevron. */
  .form-rail__panel.is-collapsed > .form-rail__eyebrow {
    writing-mode: horizontal-tb;
    transform: none;
    margin: 0;
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .form-rail__panel.is-collapsed > .form-rail__eyebrow::after {
    display: revert;
  }
}

@media (max-width: 540px) {
  .form-app {
    padding: var(--space-3);
  }
  .form-topbar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    position: static;
  }
  .form-topbar__totals {
    order: 2;
    overflow-x: auto;
  }
  .form-topbar__right {
    order: 3;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .form-topbar__autosave {
    border-right: none;
    border-bottom: 1px solid var(--clr-border);
    padding-right: 0;
    padding-bottom: 4px;                              /* off-scale */
    width: 100%;
  }
  /* Left rail collapses to top-stacked panels */
  .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .form-rail--left {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .form-rail--left .form-rail__panel { flex: 1 1 100%; }
  .form-status {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .form-status__shortcuts { display: none; }
  .form-topbar__title { max-width: 100%; }
}

@media (max-width: 420px) {
  .form-quickadd { grid-template-columns: 1fr; }
  .form-field-row { grid-template-columns: 1fr; }
  .form-topbar__totals { gap: 4px; }
  /* Tile padding was 3.6px/6px — too cramped to read the "0 marks"
     numbers comfortably with a thumb. Slightly more vertical room
     keeps tiles tappable without breaking the 4-up row. */
  .totals__tile { min-width: 0; flex: 1; padding: 6px 8px; }
  .form-topbar__btn .btn-label { display: none; }
  /* Icon-only topbar buttons need ≥40px touch targets; without this
     the FAS icons collapse to ~24px and become hard to thumb-hit. */
  .form-topbar__btn {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
  }
  /* Drawer floating button stays clear of the iOS home-indicator and
     of the status bar when it's tall enough to wrap. */
  .qb-drawer-btn {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* Mobile form polish — addresses the "form mobile is not good"
   issue (2026-05-29). Applies at the same 540px breakpoint where
   the topbar collapses to single column. */
@media (max-width: 540px) {
  /* The .form-topbar__right wraps buttons onto multiple lines on
     phones. Keep them on a single row that scrolls horizontally if
     a teacher has many actions (Preview / Draft / Submit + autosave). */
  .form-topbar__right {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox: hide scrollbar */
  }
  .form-topbar__right::-webkit-scrollbar { display: none; }
  .form-topbar__btn { flex-shrink: 0; }

  /* Question-editor cards lose their generous desktop padding so
     question text doesn't have to wrap at 20+ characters. */
  .form-card,
  .question-box,
  .form-rail__panel {
    padding: var(--space-3) var(--space-3);
  }

  /* Inline meta selectors (marks / difficulty / etc.) under each
     question — let them flow naturally on a phone instead of
     fighting for grid columns. */
  .meta-inline {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qb-skeleton,
  .form-kbd-help,
  .totals__bar > [data-progress-fill] { animation: none; transition: none; }
}


/* ── from home.css ────────────────────────────────────────── */
@media (max-width: 820px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .stats-strip { grid-template-columns: 1fr; }
}

@media (max-width: 880px) { .hero-card { grid-template-columns: 1fr; } }

@media (max-width: 1080px) { .grid { grid-template-columns: 1fr; } }

@media (max-width: 820px) { .actions { grid-template-columns: 1fr; } }

@media (max-width: 680px) {
  .papers__row { grid-template-columns: 1fr auto; gap: var(--space-2); }
  .papers__row .col-class, .papers__row .col-marks, .papers__row .col-status { display: none; }
  .papers__row.head { display: none; }
}

@media (max-width: 820px) {
  .onboarding { grid-template-columns: 1fr; gap: var(--space-5); }
}


/* ── from login.css ───────────────────────────────────────── */
@media (max-width: 600px) {
  /* Phones: trim heading size so titles don't wrap awkwardly, and stack
     signup's side-by-side fields (both the grid rows and any legacy
     inline-flex sibling rows) into a single column. */
  .glass-login h1,
  .glass-login h2,
  .form-section h2,
  .su-title { font-size: var(--text-2xl); }
  .su-row,
  .su-row--12 { grid-template-columns: 1fr; }
  .su-form > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

@media (max-width: 480px) {
  .login-wrapper { padding: 1.5rem 1rem; }
  .glass-login { padding: 2rem 1.5rem 1.5rem; }
  .page-signup .glass-login { padding: 1.5rem 1.25rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ── from nav-redesign.css ────────────────────────────────── */
@media (max-width: 880px) {
  .navbar.nav-redesigned > .hamburger { display: inline-flex; }
}

@media (max-width: 880px) {
  /* Tablet+phone: hide the username text in the avatar pill so
     the bar fits even when there's a long name. */
  .navbar.nav-redesigned .nav__user-name { display: none; }

  /* Tighten the bar gap. */
  .navbar.nav-redesigned { gap: var(--space-2); }

  /* The legacy `.navbar__links` is what base.js toggles open as
     a stacked drawer on mobile. */
  .navbar.nav-redesigned .navbar__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--clr-bg-card);
    border-bottom: 1px solid var(--clr-border);
    padding: var(--space-2) var(--space-4) var(--space-4);
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.12);   /* slate-900 RGB */
    display: none;
  }
  /* base.js adds `.show` (or similar) when hamburger is tapped — we
     drive the open state off `aria-expanded="true"` on the hamburger
     so we don't depend on a specific JS class name. */
  .navbar.nav-redesigned .hamburger[aria-expanded="true"] + .navbar__links { display: flex; }

  .navbar.nav-redesigned .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: 100%;
  }
  .navbar.nav-redesigned .nav__links li { width: 100%; }
  .navbar.nav-redesigned .nav__spacer { display: none; }

  /* Mobile drawer: each icon button stretches full width and
     shows its text label alongside the icon for clarity. */
  .navbar.nav-redesigned .nav__icon {
    width: 100%;
    justify-content: flex-start;
    padding: 0.65rem 0.875rem;              /* off-scale */
    border-radius: var(--radius);
  }
  .navbar.nav-redesigned .nav__icon-label {
    display: inline-block;
    font-size: 0.9rem;                      /* off-scale */
    font-weight: 500;
  }
  .navbar.nav-redesigned .nav__icon--brand {
    /* Keep brand colour but full-width style. */
    width: 100%;
    justify-content: center;
    padding: 0.7rem var(--space-4);         /* 0.7rem off-scale */
    font-weight: 600;
  }

  /* Avatar pill spans full-width too. */
  .navbar.nav-redesigned .nav__user {
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-2) var(--space-3);
  }
  .navbar.nav-redesigned .nav__user .nav__user-name {
    display: inline-block;
    font-size: 0.9rem;                      /* off-scale */
  }
  .navbar.nav-redesigned .nav__logout {
    width: 100%;
    justify-content: flex-start;
    padding: 0.65rem 0.875rem;              /* off-scale */
    border-radius: var(--radius);
  }
}

@media (max-width: 480px) {
  /* On phones drop the brand image down so the bar doesn't crowd. Scaled
     proportionally with the new desktop size (46 → 38). */
  .navbar.nav-redesigned .navbar__logo img { height: 38px; }   /* off-scale */
  .navbar.nav-redesigned { padding-inline: 0.875rem; }         /* off-scale */
}


/* ── from onboarding_tour.css ─────────────────────────────── */
@media (max-width: 540px) {
  .tm-tour-popover.driver-popover {
    max-width: calc(100vw - 24px);                   /* off-scale (mobile gutter) */
    border-radius: var(--radius);
  }
  .tm-tour-popover .driver-popover-title       { padding: 14px 16px 0;  font-size: 1rem; }
  .tm-tour-popover .driver-popover-description { padding: 6px 16px 4px; font-size: 0.85rem; }
  .tm-tour-popover .driver-popover-footer      { padding: 10px 16px 14px; }
  .tm-tour-popover .driver-popover-footer button { padding: 6px 14px; font-size: 0.8rem; }
  .driver-overlay { background: rgba(15, 29, 36, 0.65) !important; }   /* off-scale (heavier on mobile) */
}


/* ── from paper_format.css ────────────────────────────────── */
@media (max-width: 720px) {
  .pf-topbar .tb-back-label { display: none; }
  .pf-topbar .tb-back { padding: 0 10px; }
}

@media (max-width: 1100px) {
  .pf-app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--pf-tb-h) auto 1fr;
    grid-template-areas:
      "tb"
      "rail"
      "canvas";
  }
  .pf-rail { border-left: 0; border-bottom: 1px solid var(--clr-border); max-height: none; }
  .pf-topbar .pf-presets { display: none; }
}

@media (max-width: 540px) {
  .pf-topbar { padding: 0 12px; gap: 8px; }
  .pf-topbar .tb-title .t2 { display: none; }
  .pf-topbar .tb-ghost,
  .pf-topbar .pf-last-saved { display: none; }
  .pf-canvas { padding: 16px 12px 60px; }
}


/* ── from password_change.css ─────────────────────────────── */
@media (max-width: 900px){
  .pwc-page{
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-3) var(--space-12);
  }
  .pwc-sidebar{ position: static; }
  .pwc-card .pwr-reqs{ grid-template-columns: 1fr; }
  .pwc-card{ padding: var(--space-5) var(--space-4); }
}


/* ── from payment_history.css ─────────────────────────────── */
@media (max-width: 760px) {
  .ph-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .ph-stat { padding: var(--space-3) var(--space-4); }
  .ph-stat__num { font-size: var(--text-xl); }

  .ph-head { flex-direction: column; align-items: flex-start; }

  /* Stack table cells, one card per payment */
  .ph-table thead { display: none; }
  .ph-table, .ph-table tbody, .ph-table tr, .ph-table td { display: block; width: 100%; }
  .ph-table tbody tr {
    border-bottom: 1px solid var(--clr-border);
    padding: var(--space-3) var(--space-4);
  }
  .ph-table tbody tr:last-child { border-bottom: 0; }
  .ph-table tbody tr:hover { background: var(--clr-bg-card); }
  .ph-table tbody td {
    border: 0; padding: 4px 0;
    display: grid; grid-template-columns: 90px 1fr; gap: var(--space-3);
    align-items: center;
  }
  .ph-table tbody td::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 700;
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
    color: var(--clr-text-faint);
  }
  .ph-cell-amount { text-align: left; }
  .ph-cell-id { max-width: 100%; }
  .ph-cell-id__text { max-width: none; }
}


/* ── from policy_popup.css ────────────────────────────────── */
@media (max-width: 500px) {
    .policy-popup { border-radius: 12px 12px 0 0; max-height: 90vh; width: 100vw; align-self: flex-end; }
    .policy-tabs { gap: 0.2rem; padding: 0.5rem 0.75rem; }
    .policy-tab { font-size: 0.7rem; padding: 0.25rem 0.55rem; }
    .policy-popup-body { padding: 1rem; }
  }


/* ── from preview.css ─────────────────────────────────────── */
@media print {
  .preview-toolbar,
  .preview-rail,
  .preview-statusbar,
  .page-corner,
  .page-break { display: none !important; }
  .preview-app { display: block; }
  .preview-canvas { padding: 0; background: #fff; }
  .paper {
    box-shadow: none;
    width: 100%;
    border-radius: 0;
    padding: 48px 56px;
    background: #fff;
  }
  .paper.is-watermarked::before { display: none; }
  .paper.is-draft::after { display: none; }
  .preview-meta-strip { background: #fff; border: 1px solid var(--clr-slate-300); }
  .preview-instructions { background: #fff; }
  .case-passage { background: #fff; border-left-color: var(--clr-slate-400); }
  body { background: #fff; }
}

@media (max-width: 1100px) {
  .preview-app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--tb-h) auto 1fr var(--status-h);
    grid-template-areas:
      "tb"
      "rail"
      "canvas"
      "status";
  }
  .preview-rail {
    border-left: 0;
    border-bottom: 1px solid var(--clr-border);
    max-height: none;
  }
}


/* ── from profile.css ─────────────────────────────────────── */
@media (max-width: 880px) {
  /* Below the desktop breakpoint, drop the sidebar entirely and
     collapse to a single content column. The cards still have ids
     so direct links still work — just no sidebar nav. */
  .profile-page { grid-template-columns: 1fr; }
  .profile-sidebar { display: none; }
}

@media (max-width: 820px) {
  .profile-page { padding: var(--space-5) var(--space-4) 4rem; }
  .profile-account-actions { grid-template-columns: 1fr; }
  .profile-add-ta { grid-template-columns: 1fr; }
  .profile-field-row { flex-direction: column; }
  .profile-plan-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .profile-card { padding: var(--space-4); }
  .profile-avatar__circle { width: 80px; height: 80px; font-size: 1.8rem; }   /* off-scale */
}


/* ── from question_bank.css ───────────────────────────────── */
@media (max-width: 880px) {
  .qb-filterbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-filterbar__grid > .qb-seg,
  .qb-filterbar__grid > .qb-check { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .qb-filterbar__grid { grid-template-columns: 1fr; }
  .qb-filterbar__grid > .qb-seg,
  .qb-filterbar__grid > .qb-check { grid-column: 1; }
}

@media (max-width: 680px) {
  /* Phone — Previous + Next collapse to icon-only chevrons. */
  .pagination__nav { padding: 0.4rem; }
  .pagination__nav span { display: none; }
}

@media (max-width: 880px) {
  .qb-page { padding: var(--space-4); gap: var(--space-4); }
  .qb-card { grid-template-columns: 1fr; }
  .qb-card__actions { flex-direction: row; justify-content: flex-start; }
}


/* ── from select_plan.css ─────────────────────────────────── */
@media (max-width: 920px) {
  .plan-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 920px) {
  .plan-card--popular,
  .plan-card--popular:hover { transform: none; }
}

@media (max-width: 920px) {
  /* Allow horizontal scroll on narrow screens. */
  .plan-compare__wrap { overflow-x: auto; }
  .plan-compare table { min-width: 640px; }
}

@media (max-width: 920px) {
  .plan-faq__list { grid-template-columns: 1fr; }
}