/* ============================================================================
   RESPONSIVE OVERRIDES - GCSE Revision Hub (F-055)
   ============================================================================

   BREAKPOINT SYSTEM (mobile-first):

   Default    = Mobile (0 - 479px)      Single column, full-width
   480px (sm) = Large phones, landscape  Slight spacing adjustments
   768px (md) = Tablets                  Two-column where appropriate
   1024px (lg) = Desktop                 Full desktop layout (existing)

   ADDITIONAL QUERIES:
   @media (max-height: 700px)            Short viewport fixes (quiz)
   @media (hover: none) and (pointer: coarse)  Touch device optimizations
   @media (prefers-reduced-motion: reduce)     Accessibility

   LOADING: This file MUST be the LAST stylesheet on every page.
   ROLLBACK: Remove the <link> tag from HTML pages to disable all overrides.

   ============================================================================ */


/* ============================================================================
   1. GLOBAL RESETS & SAFE AREAS
   ============================================================================ */

/* Prevent horizontal overflow on all pages */
/* NOTE: overflow-x on body breaks position:sticky — keep it on html only */
html {
  overflow-x: hidden;
}

body {
  max-width: 100%; /* NOT 100vw — iOS Safari 100vw includes scrollbar width */
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   NATIVE iOS: Safe Area Support
   ========================================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
  /*
   * SafeAreaWebViewController.swift wraps the WKWebView in a container UIView
   * and constrains it to safeAreaLayoutGuide.topAnchor. The WebView physically
   * starts below the Dynamic Island. env(safe-area-inset-top) is ~0 in the
   * web layer. No CSS top padding needed.
   *
   * Fix from: https://github.com/ionic-team/capacitor/issues/2149
   */

  /* Fixed header on native iOS — sticky is unreliable in WKWebView flex containers */
  .capacitor-native .unified-header,
  .capacitor-native .header-two-line {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  /* Offset body content below the fixed header */
  .capacitor-native body {
    padding-top: 48px;
  }

  /* Side safe areas (landscape rotation) */
  .capacitor-native .unified-header,
  .capacitor-native .unified-header-grid,
  .capacitor-native .header-two-line {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* Bottom safe area — prevent content hiding behind home indicator */
  .capacitor-native .quiz-container__footer,
  .capacitor-native .flashcard-controls,
  .capacitor-native .btn-footer-sticky {
    padding-bottom: max(var(--space-md, 16px), env(safe-area-inset-bottom));
  }

  /* Bottom padding for pages (home indicator) */
  .capacitor-native {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Stats bars need side padding too */
  .capacitor-native .quiz-stats-bar,
  .capacitor-native .fc-stats-bar,
  .capacitor-native .learn-stats-bar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}


/* ============================================================================
   2. QUIZ PAGE OVERRIDES (SF-055.3)
   ============================================================================ */

/* SF-070.24: badge dropdown needs to render above quiz-container (z-index:1 inline) */
.page-width-800:has(.quiz-compact-header) {
  position: relative;
  z-index: 2;
}

/* Compact header — [Marks+Structure+Spelling] [XP+Mastery] [Learn] [Flashcards] [PeriodicTable?] [Reset] [Menu?] */
.quiz-compact-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 6px 20px;
  gap: 4px;
  min-height: 40px;
  position: relative; /* SF-070.24: anchor for badge dropdown */
  z-index: 50; /* SF-070.24: dropdown sits above question card */
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.quiz-compact-stats--right { margin-left: auto; }

/* Reset button — circular icon button, same height as badges */
.quiz-compact-reset-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--accent, #2563EB);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease, color 150ms ease;
  padding: 0;
}
.quiz-compact-reset-btn:hover {
  background: var(--accent, #2563EB);
  color: #fff;
}
.quiz-compact-reset-btn:active {
  transform: scale(0.93);
}

/* Task-mode nav links (Learn, Flashcards) — same style as other compact buttons */
.quiz-compact-nav-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease, color 150ms ease;
  padding: 0;
  text-decoration: none;
  flex-shrink: 0;
}
.quiz-compact-nav-link:hover {
  background: var(--bg-hover, rgba(0,0,0,0.06));
  color: var(--accent, #2563EB);
}
.quiz-compact-nav-link:active {
  transform: scale(0.93);
}

/* Homepage-matching icon colors */
#quiz-link-learn { color: #2563eb; }
#quiz-link-flashcards { color: #a855f7; }

/* Topic menu button — same style as reset, list icon */
.quiz-compact-menu-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease, color 150ms ease;
  padding: 0;
}
.quiz-compact-menu-btn:hover {
  background: var(--bg-hover, rgba(0,0,0,0.06));
  color: var(--text-primary);
}
.quiz-compact-menu-btn:active {
  transform: scale(0.93);
}

.quiz-compact-progress {
  display: block;
  height: 3px;
  background: var(--border, #e2e8f0);
  width: 100%;
  margin-bottom: 4px;
}

.quiz-compact-progress-fill {
  height: 100%;
  background: var(--accent, #2563EB);
  transition: width 400ms ease;
  border-radius: 0 2px 2px 0;
  width: 0%;
}

/* Hide old desktop-only quiz navigation — compact header replaces it */
.quiz-progress-row {
  display: none !important;
}

.task-context-label {
  display: none !important;
}

/* Stats — two-zone layout (SF-070.23) */
/* Left zone (marks) = col 1, right zone (XP/mastery) = col 2, reset = col 3 */
/* Specific --left/--right rules are in the header section above (lines 68-70) */

/* Periodic table button — chemistry quizzes only */
.quiz-compact-periodic-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--accent, #2563EB);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease, color 150ms ease;
  padding: 0;
}
.quiz-compact-periodic-btn:hover {
  background: var(--accent, #2563EB);
  color: #fff;
}
.quiz-compact-periodic-btn:active {
  transform: scale(0.93);
}

/* Reset — last column */
.quiz-compact-reset-btn {
  grid-column: 4;
}

/* Compact stat pills on mobile — keep everything on one line */
@media (max-width: 480px) {
  .quiz-compact-stats {
    gap: 4px;
  }
  .quiz-nav-stat {
    font-size: 11px;
    padding: 3px 6px;
    gap: 2px;
    min-height: 30px;
  }
  .quiz-nav-stat__icon {
    width: 18px;
    height: 18px;
  }
  .quiz-nav-stat__icon .icon {
    width: 18px;
    height: 18px;
  }
  .quiz-nav-stat__val {
    font-size: 11px;
  }
  .quiz-nav-stat__shield-num {
    font-size: 9px;
    /* Keep centered — NEVER use fixed pixel left value */
    left: 50%;
    top: 50%;
  }
  /* Reset button matches badge height on mobile */
  .quiz-compact-reset-btn {
    width: 30px;
    height: 30px;
  }
  /* Periodic table button matches badge height on mobile */
  .quiz-compact-periodic-btn {
    width: 30px;
    height: 30px;
  }
}

/* Fix: Landscape mode - textarea and submit button hidden below fold */
@media (orientation: landscape) and (max-height: 500px) {
  .gen-z-quiz-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Dynamic quiz container clips content with overflow:hidden — allow scroll */
  .quiz-container,
  .quiz-container--dynamic,
  .quiz-container--dynamic.quiz-container--keyword,
  .quiz-container--dynamic.quiz-container--exact,
  .quiz-container--dynamic.quiz-container--self {
    overflow: visible !important;
    min-height: auto !important;
  }

  .question-display {
    min-height: auto !important;
  }

  .quiz-keyword-textarea {
    min-height: 80px !important;
  }

  .quiz-keyword-layout {
    flex-direction: column !important;
  }

  .quiz-keyword-sidebar {
    display: none !important;
  }
}

/* Fix: Quiz container min-height causes scrolling on phones */
@media (max-height: 700px) {
  .quiz-container {
    min-height: auto !important;
  }

  .quiz-container__main {
    min-height: 150px;
  }

  /* Dynamic variants too */
  .quiz-container--dynamic,
  .quiz-container--dynamic.quiz-container--mcq,
  .quiz-container--dynamic.quiz-container--keyword,
  .quiz-container--dynamic.quiz-container--exact,
  .quiz-container--dynamic.quiz-container--self,
  .quiz-container--dynamic.quiz-container--fillblank,
  .quiz-container--dynamic.quiz-container--ordering,
  .quiz-container--dynamic.quiz-container--matching,
  .quiz-container--dynamic.quiz-container--diagram,
  .quiz-container--dynamic.quiz-container--multipart {
    min-height: auto !important;
  }
}

@media (max-width: 480px) {
  .quiz-container {
    min-height: auto !important;
  }

  .quiz-container__main {
    min-height: 120px;
  }

  .quiz-container--dynamic,
  .quiz-container--dynamic.quiz-container--mcq,
  .quiz-container--dynamic.quiz-container--keyword,
  .quiz-container--dynamic.quiz-container--exact,
  .quiz-container--dynamic.quiz-container--self,
  .quiz-container--dynamic.quiz-container--fillblank,
  .quiz-container--dynamic.quiz-container--ordering,
  .quiz-container--dynamic.quiz-container--matching,
  .quiz-container--dynamic.quiz-container--diagram,
  .quiz-container--dynamic.quiz-container--multipart {
    min-height: auto !important;
  }

  .question-display {
    min-height: auto;
    padding: var(--space-sm, 8px);
  }

  /* Sticky submit button on mobile - targets both BEM footer and renderer submit */
  .quiz-container__footer,
  .quiz-submit-container {
    position: sticky;
    bottom: 0;
    background: var(--bg-primary, #0a0f1a);
    padding: var(--space-md, 16px);
    margin-top: auto;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    z-index: 10;
  }

  /* Full-width submit button on mobile */
  .quiz-btn-submit {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 14px 16px !important;
  }

  /* MCQ options: ensure full-width with proper touch targets */
  .quiz-mcq-option label {
    min-height: 44px;
  }

  /* Reduce option letter badge on mobile */
  .quiz-option-label {
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 12px !important;
    margin-right: 8px !important;
  }

  /* Hide non-functional burger menu on mobile */
  .topic-menu-btn {
    display: none !important;
  }

  /* Demo container: minimal padding on mobile — card takes max space */
  .demo-container {
    padding: 4px;
  }
  .gen-z-quiz-container {
    padding: 4px 10px; /* minimal horizontal padding for peek card edges */
  }

  /* Feedback panel on mobile */
  .quiz-feedback,
  .quiz-answer-review {
    font-size: var(--font-sm, 13px);
    padding: var(--space-sm, 8px);
  }
}

/* F-057/F-070: Compact header styles now at base level (all screen sizes) */

/* Topic dropdown: bottom sheet on mobile */
@media (max-width: 480px) {
  .topic-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 70vh;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
  }

  .topic-dropdown .topic-list {
    max-height: calc(70vh - 80px);
  }

  .topic-search {
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 16px !important;
  }

  .topic-item {
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* Topic dropdown: constrain on mid-size phones */
@media (min-width: 481px) and (max-width: 768px) {
  .topic-dropdown {
    max-width: calc(100% - 48px);
  }
}

/* Quiz inputs: prevent iOS zoom */
@media (max-width: 768px) {
  .quiz-answer-input,
  .quiz-textarea,
  .quiz-keyword-textarea,
  .quiz-container input[type="text"],
  .quiz-container textarea,
  #question-container textarea,
  #question-container input[type="text"] {
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
  }
}


/* ============================================================================
   3. HEADER & NAVIGATION OVERRIDES (SF-055.6)
   ============================================================================ */

@media (max-width: 480px) {
  .unified-header-grid {
    padding: 0 12px !important;
  }

  /* Student menu: override bottom-sheet, use top dropdown instead */
  .student-menu-dropdown {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: var(--radius-lg, 12px) !important;
    transform: translateY(-8px) scale(0.97) !important;
    opacity: 0 !important;
    visibility: hidden !important; /* Remove from layout — prevents iOS scrollbar */
    pointer-events: none !important;
    max-height: 80vh;
    overflow-y: auto;
  }

  .student-menu-dropdown.open {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Hide bottom-sheet overlay - not needed for dropdown */
  .student-menu-overlay {
    display: none !important;
  }
}

/* Student menu: fix gap between 480-600px */
@media (min-width: 481px) and (max-width: 600px) {
  .student-menu-dropdown {
    min-width: 220px;
    max-width: calc(100vw - 32px);
  }
}


/* ============================================================================
   4. HOMEPAGE OVERRIDES (SF-055.4)
   ============================================================================ */

@media (max-width: 640px) {
  /* Stat cards: keep 3 columns on mobile, make compact */
  .flow-card__totals {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px;
  }

  /* Hide the large icon on mobile to save space */
  .flow-mini-card__icon {
    display: none !important;
  }

  /* Make each stat card compact and centered */
  .flow-mini-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 4px;
    gap: 2px;
  }

  .flow-mini-card__value {
    font-size: 1.35rem;
  }

  .flow-mini-card__label {
    font-size: 10px;
    line-height: 1.2;
  }

  .flow-mini-card__sub {
    font-size: 9px;
    opacity: 0.75;
  }

  /* Tighten the summary card */
  .flow-card {
    padding: var(--space-sm, 8px) var(--space-md, 16px) !important;
  }

  .flow-card__totals {
    margin-bottom: var(--space-sm, 8px);
  }

  /* Compact header stats */
  .flow-card__header-stats {
    gap: var(--space-sm);
  }
}

@media (max-width: 480px) {
  /* Subject cards: single column */
  .subject-cards-grid,
  .subjects-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm, 8px);
  }

  /* Task cards: full width */
  .session-task,
  .bonus-task {
    width: 100%;
    min-width: 0;
  }

  /* Session scroll: prevent horizontal overflow */
  .session-scroll-wrapper {
    overflow-x: hidden;
  }

  /* Homepage content padding */
  .homepage-content,
  .demo-container {
    padding-left: var(--space-md, 16px);
    padding-right: var(--space-md, 16px);
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .subject-cards-grid,
  .subjects-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ============================================================================
   4b. SUBJECT-VIEWER OVERRIDES
   ============================================================================ */

@media (max-width: 480px) {
  /* Force 4 columns so all stats fit in one row */
  .subject-card-stats--overview {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  /* Compact each stat card */
  .subject-card-stats--overview .subject-card-stat {
    padding: 8px 4px !important;
    gap: 2px !important;
    border-radius: 10px;
  }

  /* Shrink icons */
  .subject-card-stats--overview .subject-card-stat-icon,
  .subject-card-stats--overview .subject-card-stat-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Shrink count text */
  .subject-card-stats--overview .subject-card-stat-count {
    font-size: 0.8rem !important;
  }

  /* --- Unit card metrics: force 4 columns (one row) --- */
  .unit-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .unit-metric {
    width: auto !important;
    gap: 3px !important;
  }

  .unit-metric-icon,
  .unit-metric-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .unit-metric-value {
    font-size: 0.75rem !important;
  }

  /* --- Tighten all vertical spacing on subject-viewer --- */

  /* Reduce search toolbar margins */
  .subject-toolbar {
    margin: 8px 0 !important;
  }

  /* Shrink overview stats card padding */
  .subject-card-stats--overview .subject-card-stat {
    padding: 6px 4px !important;
  }

  /* Reduce gap below overview section (was 24px) */
  .subject-overview {
    margin-bottom: 8px !important;
    padding: 0 4px !important;
  }

  /* Reduce container padding (was 16px) */
  .container.content-loaded {
    padding: 4px 4px !important;
  }

  /* Reduce unit card margins (was 24px) */
  details.unit {
    margin: 8px 0 !important;
  }

  /* Tighter unit summary padding */
  details.unit > summary.unit-summary {
    padding: 12px !important;
    gap: 8px !important;
  }

  /* Tighter unit header text */
  .unit-header-text h3 {
    font-size: 1.1rem !important;
    margin: 0 !important;
  }

  .unit-header-text p {
    font-size: 0.8rem !important;
    margin: 2px 0 0 !important;
    line-height: 1.3 !important;
  }

  /* Reduce task-context-bar padding */
  .task-context-bar {
    padding: 4px 12px !important;
  }
}


/* ============================================================================
   5. FLASHCARD OVERRIDES (SF-055.5)
   ============================================================================ */

@media (max-width: 480px) {
  /* Card sizing */
  .flashcard-card,
  .fc-card {
    max-width: calc(100% - 32px);
    min-height: 200px;
  }

  /* Rating buttons: full width */
  .flashcard-controls,
  .fc-controls {
    position: sticky;
    bottom: 0;
    padding: var(--space-md, 16px);
    background: var(--bg-primary, #0a0f1a);
    z-index: 10;
  }

  .fc-btn-incorrect,
  .fc-btn-correct,
  .flashcard-btn {
    flex: 1;
    min-height: 44px;
  }

  /* Navigation grid: collapse to single column */
  .flashcard-nav-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   6. FORM & INPUT OVERRIDES (SF-055.7, SF-055.8)
   ============================================================================ */

/* Prevent iOS auto-zoom on input focus (requires >= 16px) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: max(16px, 1em);
  }
}

@media (max-width: 480px) {
  /* Full-width inputs on mobile */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    width: 100%;
    box-sizing: border-box;
  }

  /* Setup page: activation code input */
  .activation-code-input,
  .invite-code-input,
  #code-input {
    font-size: 20px;
    text-align: center;
    letter-spacing: 2px;
    padding: 16px;
  }

  /* Setup cards: stack vertically */
  .role-selection,
  .setup-cards {
    flex-direction: column;
    gap: var(--space-md, 16px);
  }

  .role-card,
  .setup-card {
    width: 100%;
  }
}


/* ============================================================================
   7. CONTENT PAGES OVERRIDES (SF-055.9)
   ============================================================================ */

@media (max-width: 768px) {
  /* Tables: horizontal scroll */
  .topic-content table,
  .box-facts table,
  .box-deepdive table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Diagrams: constrain to viewport */
  .topic-content img,
  .box-diagram img,
  .diagram-container img,
  .responsive-diagram,
  .diagram-img,
  .topic-content svg,
  .box-diagram svg {
    max-width: 100%;
    height: auto;
  }

  .diagram-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  /* --- Mobile-specific tightening --- */

  /* Reduce unit-content side padding */
  .unit-content {
    padding: 4px 0 !important;
  }

  /* Tighter topic header on mobile */
  details.topic summary.topic-header {
    padding: 8px 40px 8px 8px !important;
    gap: 4px !important;
  }

  details.topic .chevron {
    top: 8px !important;
    right: 6px !important;
    width: 28px !important;
    height: 28px !important;
  }

  /* Compact action buttons on mobile */
  .topic-action-btn {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
    min-width: 0 !important;
    box-shadow: none !important;
  }

  .topic-action-btn .btn-label {
    display: none !important;
  }

  /* Tighter content padding on mobile */
  .topic-content {
    padding: 0 4px 8px !important;
  }

  .content-box {
    padding: 0 4px !important;
  }

  /* Browse topics: single column */
  .topics-grid,
  .browse-grid {
    grid-template-columns: 1fr;
  }

  /* Learn-task page: maximise content width */
  .learn-content,
  .learn-task-content {
    padding: 8px !important;
  }
}


/* ============================================================================
   7b. RESPONSIVE TABLES
   Three patterns: Card Stack (2-col), Sticky Column (3-4 col), Compact (5+)
   Persona-driven: D1 min font, D4/D6 zebra, D2 keyboard+swipe, D7 scroll cue
   ============================================================================ */

/* --- Universal: zebra striping for all enhanced tables (D4 Charlie, D6 Noor) --- */
.rt-zebra tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.025);
}
[data-theme="dark"] .rt-zebra tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.04);
}

/* --- Scroll wrapper (Pattern B + C) --- */
.rt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-xs, 4px) 0;
  position: relative;
}

/* Keyboard focus ring for D2 Ethan */
.rt-scroll:focus {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* Ensure table inside scroller stays full-width */
.rt-scroll table {
  min-width: 100%;
  margin: 0;
}

/* --- Pattern B: Sticky first column (3-4 col comparison) --- */
@media (max-width: 640px) {
  .rt-scroll--sticky th:first-child,
  .rt-scroll--sticky td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-primary, #fff);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
  }

  [data-theme="dark"] .rt-scroll--sticky th:first-child,
  [data-theme="dark"] .rt-scroll--sticky td:first-child {
    background: var(--bg-primary, #1e293b);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
  }

  /* Sticky header cells get slightly higher z-index */
  .rt-scroll--sticky th:first-child {
    z-index: 3;
  }
}

/* --- Pattern C: Compact scroll (5+ columns) --- */
@media (max-width: 640px) {
  .rt-scroll--compact table {
    font-size: 0.8125rem; /* 13px — min for D1 Freya */
  }

  .rt-scroll--compact th,
  .rt-scroll--compact td {
    padding: 4px 6px;
    white-space: nowrap;
  }

  /* Allow wrapping on first column (labels) */
  .rt-scroll--compact th:first-child,
  .rt-scroll--compact td:first-child {
    white-space: normal;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-primary, #fff);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
    min-width: 80px;
  }

  [data-theme="dark"] .rt-scroll--compact th:first-child,
  [data-theme="dark"] .rt-scroll--compact td:first-child {
    background: var(--bg-primary, #1e293b);
  }
}

/* --- Pattern A: Card stack (2-col key-value tables) --- */
@media (max-width: 480px) {
  .rt-card-stack thead {
    /* Visually hidden but accessible to screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .rt-card-stack,
  .rt-card-stack tbody {
    display: block;
    width: 100%;
  }

  .rt-card-stack tbody tr {
    display: block;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-secondary, #f8fafc);
  }

  [data-theme="dark"] .rt-card-stack tbody tr {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }

  /* Remove default zebra on card layout — cards are already visually separated */
  .rt-card-stack.rt-zebra tbody tr:nth-child(even) {
    background: var(--bg-secondary, #f8fafc);
  }
  [data-theme="dark"] .rt-card-stack.rt-zebra tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
  }

  .rt-card-stack tbody td {
    display: block;
    text-align: left;
    border: none;
    padding: 2px 0;
    font-size: 0.875rem; /* 14px — safe for D1 Freya */
  }

  /* Label from data-label attribute */
  .rt-card-stack tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
  }

  /* First cell (key/term) — prominent for D7 Olivia */
  .rt-card-stack tbody td:first-child {
    font-weight: 600;
    font-size: 0.9375rem; /* 15px */
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    margin-bottom: 4px;
  }

  [data-theme="dark"] .rt-card-stack tbody td:first-child {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  /* Hide redundant label on first cell when it's the "name" */
  .rt-card-stack tbody td:first-child::before {
    display: none;
  }
}

/* --- Learn mode summary panel: always card-stack (panel is ~270px) --- */
.learn-summary-content .rt-card-stack tbody tr {
  padding: 6px 8px;
  margin-bottom: 4px;
}

.learn-summary-content .rt-card-stack tbody td {
  font-size: 11px;
}

.learn-summary-content .rt-card-stack tbody td:first-child {
  font-size: 12px;
}

/* Learn mode: sticky column tables get compact treatment */
.learn-summary-content .rt-scroll {
  margin: 4px 0;
}

.learn-summary-content .rt-scroll table {
  font-size: 11px;
}

.learn-summary-content .rt-scroll th,
.learn-summary-content .rt-scroll td {
  padding: 3px 4px;
}

/* --- Scroll cue: subtle gradient on right edge (D7 Olivia) --- */
@media (max-width: 640px) {
  .rt-scroll {
    /* Right-edge fade as visual scroll hint */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
  }

  /* Remove mask once user has scrolled (JS adds this class) */
  .rt-scroll.rt-scrolled {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --- Fallback: extend existing 768px rule to cover ALL content tables --- */
@media (max-width: 768px) {
  /* Cover table types not already handled by patterns above */
  .content-box table,
  .comparison-table table,
  .units-conversion table,
  .box-comparison table {
    max-width: 100%;
  }
}


/* ============================================================================
   8. TOUCH DEVICE OPTIMIZATIONS (SF-055.7)
   ============================================================================ */

/* Only apply on touch devices (phones, tablets with touch) */
@media (hover: none) and (pointer: coarse) {
  /* Minimum touch targets: 44px */
  button,
  [role="button"],
  a.btn,
  .session-task,
  .bonus-task,
  .subject-card-home,
  .practice-card,
  .quiz-option,
  .flashcard-btn,
  .sidebar-link,
  .topic-menu-btn,
  .header-icon-plain,
  .notifications-btn,
  .theme-toggle,
  .fc-shuffle {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent double-tap-to-zoom on interactive elements */
  button,
  [role="button"],
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  /* Replace hover effects with active states (prevent sticky hover) */
  .subject-card-home:hover,
  .practice-card:hover,
  .session-task:hover,
  .bonus-task:hover,
  .session-start-btn:hover,
  .quiz-option:hover {
    transform: none !important;
    box-shadow: inherit;
  }

  .subject-card-home:active,
  .practice-card:active,
  .session-task:active,
  .bonus-task:active {
    transform: scale(0.98);
    transition: transform 100ms ease;
  }
}


/* ============================================================================
   9. REDUCED MOTION (Accessibility - SF-055.10)
   ============================================================================ */

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


/* ============================================================================
   10. CONTENT WIDTH UTILITY (SF-055.10)
   ============================================================================ */

/* Consistent max-width pattern for page content */
@media (max-width: 480px) {
  .page-content,
  .demo-container,
  .homepage-content,
  .quiz-content {
    padding-left: var(--space-md, 16px);
    padding-right: var(--space-md, 16px);
    box-sizing: border-box;
  }
}