/* ICAM Lab · mobile repair patch v1.0
 * Not part of the frozen Lab package (see DEPLOYMENT_NOTES.md — deploy byte-for-byte).
 * Integration-only override, loaded after styles.css, same pattern as lab-back-link.js.
 * Scope: <=760px only. Desktop drag/layout invariants untouched.
 */
/* Core chamber overlapping the heading/bridge-link above it exists across
 * the whole compact tier the base package already defines (<=1100px, where
 * .core-heading switches to in-flow layout) — not just the narrow phone
 * breakpoint. The base package's own 180-200px chamber top inset does not
 * account for the actual rendered height of that heading block. */
@media (max-width: 1100px) {
  .core-chamber { top: 325px !important; }
}

@media (max-width: 760px) {
  /* M1 — topbar collision: give section nav its own row instead of
     crowding brand + nav + utilities into one line that overflows and
     clips the GUIDE button off-screen. */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
    row-gap: 6px;
    padding-bottom: 8px;
  }
  .brand { order: 1; }
  .top-tools { order: 2; }
  .topnav {
    order: 3;
    flex: 1 1 100%;
    margin: 4px 0 0;
    padding: 6px 2px 0;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-top: 1px solid rgba(126, 179, 248, 0.10);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .topnav button { padding: 8px 0 6px; flex: 0 0 auto; }
  /* !important: the base package's own [data-route="home"] .topmeta{display:flex}
     rule outranks a plain .topmeta{display:none} on specificity, so on the
     Threshold/home route (reached by tapping the logo) this text reappeared
     with no explicit flex `order`, jumping ahead of the logo in the wrapped
     row and shoving it sideways into the utility buttons. */
  .topmeta { display: none !important; }

  /* M2 — Core chamber overlapping the heading / bridge-link above it.
     Root cause: the chamber's fixed top inset does not account for the
     actual rendered height of the heading block on narrow screens. */
  .core-chamber { top: 290px !important; }
  .core-page { padding-bottom: 770px; }

  /* Core panel controls always reachable, per mobile repair spec. */
  .core-view-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 4px;
    max-width: calc(100% - 16px);
  }
  .core-view-controls button[data-core-panels-reset] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .core-chamber { top: 330px !important; }
}

/* Equivalence page (Core · 02): a leftover "prototype" viewport class pins
 * the chamber to a fixed desktop offset (left:330px !important) with no
 * mobile tier at all, unlike every other chamber in this package. On a
 * phone that leaves ~75px of usable width and pushes the real content off
 * to the right edge, reading as a large blank/black area covering most of
 * the screen. Mirrors the (correct) non-prototype .equivalence-chamber
 * values at the same breakpoints, scoped to beat the offending !important. */
@media (max-width: 1100px) {
  .eq-viewport-prototype .equivalence-chamber {
    left: 24px !important; right: 24px !important; top: 225px !important; bottom: 28px !important;
  }
}
@media (max-width: 760px) {
  .eq-viewport-prototype .equivalence-chamber {
    left: 12px !important; right: 12px !important; top: 220px !important; bottom: 20px !important;
    height: auto !important; min-height: 720px !important;
  }
}

/* Known WebKit issue: a scrolling element (overflow:auto) that also carries
 * backdrop-filter, nested inside other overflow:hidden ancestors, can fail
 * to paint content beyond a certain scroll offset on iOS Safari — it renders
 * as a blank/black area instead of the real content (not reproducible in
 * Chromium, which composites this correctly). The Core node inspector
 * (.insight-panel) matches this pattern exactly: absolute + overflow:auto +
 * blur(18px), inside .core-page{overflow:hidden} inside .app-shell{overflow
 * hidden auto}. Forcing its own compositing layer is the standard mitigation.
 * Best-effort: reproduced the layout only in Chromium's emulator, not on a
 * real device, so this is evidence-based, not independently re-verified. */
@media (max-width: 1100px) {
  .insight-panel {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }
}