/* ============================================================================
   metatrix-responsive.css — mobile fit-to-screen for phones (Android + iOS).
   The site is desktop-width by design; this adds the missing mobile reflow so
   pages fit the screen with no horizontal cut-off, and respects the iPhone notch.
   Verified on iPhone (390px) + Android (360px) viewports. Loaded on every page.
   Root-cause fixes (not just overflow band-aids):
     · grid/flex "blowout" → children get min-width:0 so they can shrink
     · desktop max-w containers → full width on mobile
     · multi-col grids → single column on mobile
     · the .mtx-shell console + non-wrapping strips → contained / swipeable
     · sticky top nav strips → scroll horizontally within the screen
     · iPhone notch → safe-area padding on fixed bars
   ============================================================================ */

html, body { max-width: 100%; overflow-x: clip; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
body { overflow-wrap: break-word; }

/* Sticky top nav strips (device bar + room nav): swipe horizontally instead of
   widening the whole page. Hide the scrollbar so it reads as a clean strip. */
.sticky.top-0 > .mx-auto,
header.sticky > nav,
header.sticky > .mx-auto {
  max-width: 100vw !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sticky.top-0 > .mx-auto::-webkit-scrollbar,
header.sticky > nav::-webkit-scrollbar,
header.sticky > .mx-auto::-webkit-scrollbar { display: none; }

/* iPhone notch / rounded corners: pad the fixed top bars into the safe area
   (0 on non-notched devices; only fires with viewport-fit=cover). */
.sticky.top-0, header.sticky {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

@media (max-width: 820px) {
  /* the grid/flex blowout fix — let children shrink below their content size
     (site-wide, so it covers the sub-app rooms too, not just main pages) */
  [class*="grid"] > *, .flex > * { min-width: 0; }
  /* desktop max-width containers → fill the phone */
  [class*="max-w-"]:not(.max-w-full):not(.max-w-none) { max-width: 100% !important; }
  /* multi-column grids → single column */
  [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"],
  [class*="grid-cols-5"], [class*="grid-cols-6"], [class*="md:grid-cols"], [class*="lg:grid-cols"] {
    grid-template-columns: 1fr !important;
  }
  /* full-bleed canvases / app shells fit the screen (3D rooms, video, WebXR) */
  canvas, #app, .app, [class*="room-"], [class*="-room"] { max-width: 100vw !important; }
  /* wide tables / code blocks scroll internally instead of widening the page */
  table, pre { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* the Metatrix console shell + its non-wrapping status/lens/toolbar rows */
  .mtx-shell, .mtx-status, .mtx-lenses, .mtx-toolbar { max-width: 100% !important; min-width: 0 !important; }
  .mtx-lenses { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* hero + section wrappers fill the column, never the content */
  main section > div, main > div > section > div { min-width: 0; max-width: 100vw; }
  /* oversized display type scales down to fit */
  h1, [class*="text-[6"], [class*="text-[7"], [class*="text-[8"], [class*="text-[9"] {
    font-size: clamp(1.4rem, 8.5vw, 3.2rem) !important;
    word-break: break-word;
  }
}