/* AI Project Universe V6.16
   Mobile-first native vertical scrolling for Student Performance and AI Architect Lab.
   Goal: one document scroller, one drawer scroller, no nested-scroll fight or blank tail. */

@media (max-width: 820px) {
  html[data-scroll-theme="student-performance"] {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
    scrollbar-gutter: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-scroll-theme="student-performance"] body {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    inset: auto !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-scroll-theme="student-performance"] .sp-app,
  html[data-scroll-theme="student-performance"] .sp-main,
  html[data-scroll-theme="student-performance"] .sp-view,
  html[data-scroll-theme="student-performance"] .sp-view.is-active {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    min-block-size: 0 !important;
    block-size: auto !important;
    max-block-size: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    contain: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  html[data-scroll-theme="student-performance"] .sp-app {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html[data-scroll-theme="student-performance"] .sp-main {
    width: 100% !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    margin-bottom: 0 !important;
  }

  html[data-scroll-theme="student-performance"] .sp-footer {
    margin-bottom: 0 !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  html[data-scroll-theme="student-performance"] .sp-scroll-end {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Keep horizontal tables local; never let them steal vertical gestures. */
  html[data-scroll-theme="student-performance"] .sp-table-wrap,
  html[data-scroll-theme="student-performance"] [data-horizontal-scroll],
  html[data-scroll-theme="student-performance"] .apu-horizontal-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 767px) {
  html[data-scroll-theme="ai-architect"] {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
    scrollbar-gutter: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-scroll-theme="ai-architect"] body {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    inset: auto !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-scroll-theme="ai-architect"] #root,
  html[data-scroll-theme="ai-architect"] #root > div,
  html[data-scroll-theme="ai-architect"] main {
    min-height: 0 !important;
    max-height: none !important;
  }

  html[data-scroll-theme="ai-architect"] .ai-architect-drawer {
    position: fixed !important;
    inset: 58px auto env(safe-area-inset-bottom) 0 !important;
    z-index: 2200 !important;
    display: none !important;
    width: min(88vw, 350px) !important;
    min-width: 0 !important;
    max-width: 350px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    contain: layout paint !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
  }

  html[data-scroll-theme="ai-architect"] .ai-architect-drawer.hidden {
    display: none !important;
  }

  html[data-scroll-theme="ai-architect"] .ai-architect-drawer.flex:not(.hidden),
  html[data-scroll-theme="ai-architect"] .ai-architect-drawer.is-open {
    display: flex !important;
  }

  html[data-scroll-theme="ai-architect"] .ai-architect-drawer > .ai-drawer-heading,
  html[data-scroll-theme="ai-architect"] .ai-architect-drawer > header {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  html[data-scroll-theme="ai-architect"] .ai-architect-drawer nav {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 12px max(30px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: auto !important;
    contain: layout style !important;
    transform: translateZ(0) !important;
  }

  html[data-scroll-theme="ai-architect"] .ai-architect-drawer nav > a,
  html[data-scroll-theme="ai-architect"] .ai-architect-drawer nav > a > div {
    flex: 0 0 auto !important;
  }

  html[data-scroll-theme="ai-architect"] .ai-architect-drawer nav > a {
    width: 100% !important;
    min-height: 50px !important;
  }

  html[data-scroll-theme="ai-architect"] .ai-architect-drawer nav > a.apu-v69-contact-link {
    position: static !important;
    inset: auto !important;
    margin: 8px 0 4px !important;
  }

  /* Only the drawer is scrollable while it is open; the background stays still. */
  html.ai-architect-nav-open,
  html.ai-architect-nav-open body,
  body.ai-architect-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    /* Keep vertical gestures allowed through ancestors so the drawer nav can
       receive native touch scrolling; overflow:hidden still locks the page. */
    touch-action: pan-y pinch-zoom !important;
  }

  html.ai-architect-nav-open .ai-architect-drawer,
  html.ai-architect-nav-open .ai-architect-drawer nav,
  body.ai-architect-nav-open .ai-architect-drawer,
  body.ai-architect-nav-open .ai-architect-drawer nav {
    touch-action: pan-y !important;
    pointer-events: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-scroll-theme="student-performance"],
  html[data-scroll-theme="ai-architect"],
  html[data-scroll-theme="ai-architect"] .ai-architect-drawer nav {
    scroll-behavior: auto !important;
  }
}