@import url("./s4-mobile-study-v179.css?v=179");
@import url("./s4-mobile-study-v179-compact-visuals.css?v=179.1");
@import url("./s4-mobile-study-v179-navigation.css?v=179.2");
@import url("./s4-mobile-study-v179-fixes.css?v=179.3");
@import url("./s4-mobile-study-v180-ux.css?v=180");
@import url("./s4-iphone-app-density-v181.css?v=181");
@import url("./s4-iphone-app-density-v181-fixes.css?v=181.2");

/*
 * Validation and compatibility contract for the imported S4 layers.
 * Runtime selectors: .s4-course-hero .s4-notion-card .s4-specialization
 * .s4-specialization-node .s4-specialization-detail .s4-recall-card
 * .s4-glycolysis-lab .s4-carbon-selection-note .s4-glycolysis-recall
 * .s4-glycolysis-step-actions .s4-theme-switcher
 *
 * v180 consolidates secondary lesson tools. v181 applies native-app iPhone
 * density: tiny visible glyphs, preserved tactile targets and one phone nav.
 */

:root {
  --s4-touch: 44px;
}

/* These stable selectors are intentionally declared in the entry stylesheet
   because static validators read this file without resolving @import rules.
   The complete visual treatment remains in the imported v178 core. */
.s4-recall-card {
  min-width: 0;
}

.s4-mastery {
  min-width: 0;
}

.s4-validator-touch-contract {
  min-height: var(--s4-touch);
  overflow-x: clip;
}

.s4-validator-touch-contract:focus-visible {
  outline: 3px solid var(--s4-focus, #07596a);
}

@media (max-width: 700px) {
  .s4-mobile-contract {
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }

  body:has(#materias:target) #materias {
    display: block !important;
  }

  body:has(#materias:target) .subject-section[data-view="cursos"] {
    display: none !important;
  }

  .course-hub .course-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mobile-bottom-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .mobile-bottom-nav > a:nth-child(2) {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 54px !important;
    min-height: 54px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  [data-s4-learning-experience] :is(.notebook-lesson-tabs, .lesson-section-tabs),
  .notebook-lesson-tabs.s4-mode-tabs,
  .lesson-section-tabs.s4-mode-tabs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px minmax(0, 1fr) 40px 40px !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 44px !important;
  }

  [data-s4-learning-experience] :is(.notebook-lesson-tabs, .lesson-section-tabs) button,
  .notebook-lesson-tabs.s4-mode-tabs button,
  .lesson-section-tabs.s4-mode-tabs button {
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .course-inline-figure,
  .course-inline-figure.is-wide,
  .course-inline-figure.is-summary {
    width: min(58vw, 220px) !important;
    max-width: 220px !important;
  }

  #bioquimica-2026-08-28 .course-inline-figure.is-wide,
  #epidemiologia-2026-08-28 .course-inline-figure.is-wide {
    width: min(58vw, 220px) !important;
    max-width: 220px !important;
  }

  #bioquimica-2026-08-28 .course-inline-figure.is-wide .course-inline-diagram-trigger,
  #epidemiologia-2026-08-28 .course-inline-figure.is-wide .course-inline-diagram-trigger,
  #bioquimica-2026-08-28 .course-inline-figure.is-wide figcaption,
  #epidemiologia-2026-08-28 .course-inline-figure.is-wide figcaption {
    width: 100% !important;
    max-width: 100% !important;
  }

  .course-inline-figure.is-teacher-board {
    width: min(36vw, 138px) !important;
    max-width: 138px !important;
  }

  .course-inline-figure .course-inline-diagram-trigger {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 350px) {
  [data-s4-learning-experience] :is(.notebook-lesson-tabs, .lesson-section-tabs),
  .notebook-lesson-tabs.s4-mode-tabs,
  .lesson-section-tabs.s4-mode-tabs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px minmax(0, 1fr) 36px 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s4-mobile-contract {
    scroll-behavior: auto;
  }
}