/* MIRMC Academia · Mobile layout resilience v1 (10 Oct 2026).
   Loaded last on EVERY route. Keep genuine browser/user zoom available;
   correct width, wrapping and floating controls instead of disabling pinch. */
@media (max-width: 1023px) {
  html, body {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :where([data-portal-area], [data-public-page], .vi-auth-main) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  :where([data-portal-area], [data-public-page]) :where(
    img, video, iframe, canvas
  ):not([data-teacher-credential] *) {
    max-inline-size: 100%;
  }

  /* Layout boxes shrink inside flex/grid instead of enlarging the viewport.
     Do not clamp tables, scrollable editors, credentials or presentation stages. */
  .vi-auth-main :where(.grid, .flex) > :where(div, section, article, aside, a, button, li, form) {
    min-inline-size: 0;
  }

  .vi-auth-main :where(h1, h2, h3, h4, p, li, blockquote, label, summary) {
    overflow-wrap: anywhere;
  }

  .vi-auth-main :where(button, a[href]):not([data-teacher-credential] *) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .vi-auth-main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-inline-size: 0;
    max-inline-size: 100%;
    /* iOS Safari must not enlarge the page when an input receives focus. */
    font-size: max(16px, 1rem);
  }

  .vi-auth-main :where([class*="overflow-x-auto"], [class*="overflow-auto"]):has(table) {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Large administration/data tables scroll inside their own wrapper
     rather than forcing the full application wider than the phone. */
  .vi-auth-main [data-mobile-layout-repair="scroll-v1"]:is(div, figure),
  [data-public-page] [data-mobile-layout-repair="scroll-v1"]:is(div, figure) {
    /* The agent must not replace an existing grid/flex display mode. */
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .vi-auth-main :where(pre, .code-editor-scroll, [data-code-scroll]) {
    max-inline-size: 100%;
    overflow-x: auto;
  }

  /* The dock is measured at runtime, including Android font scaling,
     orientation changes, expanded labels and visual viewport offsets. */
  html:has(body > nav[data-mobile-dock-portal="body-v2"]) {
    --mirmc-mobile-search-bottom: calc(var(--mirmc-mobile-dock-measured-height, 5.25rem) + 1.55rem + var(--mirmc-safe-bottom, 0px));
    --mirmc-mobile-progress-sync-bottom: calc(var(--mirmc-mobile-dock-measured-height, 5.25rem) + 5rem + var(--mirmc-safe-bottom, 0px));
    --mirmc-mobile-health-bottom: calc(var(--mirmc-mobile-dock-measured-height, 5.25rem) + 8.75rem + var(--mirmc-safe-bottom, 0px));
  }

  [data-portal-area] .vi-auth-main[data-mobile-fixed-ui-clearance] {
    /* Reserve at least one full dock and a comfortable reading gap. */
    padding-bottom: calc(var(--mirmc-mobile-dock-measured-height, 5.9rem) + 4.5rem + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }

  body > nav[data-mobile-reading-dock="standard"][data-mobile-dock-portal="body-v2"] {
    inline-size: auto;
    max-inline-size: calc(100% - 1rem);
    box-sizing: border-box;
  }

  body > nav[data-mobile-reading-dock="standard"][data-mobile-dock-portal="body-v2"] > div {
    min-inline-size: 0;
  }

  body > nav[data-mobile-reading-dock="standard"][data-mobile-dock-portal="body-v2"] a,
  body > nav[data-mobile-reading-dock="standard"][data-mobile-dock-portal="body-v2"] [data-mobile-dock-label] {
    min-inline-size: 0;
    max-inline-size: 100%;
    box-sizing: border-box;
  }

  /* Measured, reversible repairs only; user font scaling and pinch zoom
     stay available. The agent does not touch this stylesheet on every audit. */
  html[data-mobile-layout-agent="guardian-v2-active"] {
    overflow-x: clip;
  }

  /* Guardian v3: focused controls can scroll clear of the measured floating
     dock. These rules never change the user's chosen page zoom. */
  [data-portal-area] .vi-auth-main :where(
    button, a[href], input, select, textarea, [role="button"]
  ) {
    scroll-margin-block-end: calc(var(--mirmc-mobile-dock-measured-height, 5.9rem) + 1.5rem);
  }

  [data-portal-area] .vi-auth-main[data-mobile-fixed-ui-clearance] {
    scroll-padding-block-end: calc(var(--mirmc-mobile-dock-measured-height, 5.9rem) + 1.5rem);
  }

  /* Supervisor fixes only confirmed overflowing text, never arbitrary panels. */
  [data-mobile-layout-repair="wrap-v1"] {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media (max-width: 639px) {
  /* A 3-column quick access rail is still readable on small phones. */
  [data-portal-area="campus"] [data-campus-ux="v3-simple"] > nav[aria-label="Accesos rápidos del estudiante"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }
  [data-portal-area="campus"] [data-campus-ux="v3-simple"] > nav[aria-label="Accesos rápidos del estudiante"] a {
    min-inline-size: 0;
    padding-inline: .3rem;
  }
  [data-portal-area="campus"] [data-campus-ux="v3-simple"] > nav[aria-label="Accesos rápidos del estudiante"] a :where(span) {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  [data-portal-area="campus"] [data-campus-course-recovery] button {
    max-inline-size: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
  [data-portal-area="campus"] [data-campus-ux="v3-simple"] > section:first-of-type :where(a, button) {
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
  [data-portal-area="campus"] [data-campus-ux="v3-simple"] > section:first-of-type :where(h1, p) {
    text-wrap: wrap;
  }
  /* Mobile primary dock is always one labelled row. Android font
     metrics must not switch six destinations to a 3-by-2 layout. */
  body > nav[data-mobile-reading-dock="standard"][data-mobile-dock-portal="body-v2"] > [data-mobile-dock-row="locked-v3"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    min-height: 4.75rem !important;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  /* Desktop tables and production workspaces keep their original geometry. */
  [data-mobile-layout-repair="wrap-v1"] {
    white-space: inherit;
  }
}