/* ============================================================================
   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 Maxtryx 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 */
  /* only 2-digit display sizes (text-[64px] / text-[6rem] ...), never tiny labels:
     text-[9px] / text-[9.5px] also start with "text-[9" and were blown up to ~30px */
  h1,
  [class*="text-[6"]:not([class*="text-[6px]"]):not([class*="text-[6."]),
  [class*="text-[7"]:not([class*="text-[7px]"]):not([class*="text-[7."]),
  [class*="text-[8"]:not([class*="text-[8px]"]):not([class*="text-[8."]),
  [class*="text-[9"]:not([class*="text-[9px]"]):not([class*="text-[9."]) {
    font-size: clamp(1.4rem, 8.5vw, 3.2rem) !important;
    word-break: break-word;
  }
}

/* ============================================================================
   Phone fit, round 2 (2026-10-24). Research + sources:
   E:\local-server\os-build-completed\research\MOBILE-fit-maxtryx-2026-10-24.md
   ============================================================================ */

/* iOS enlarges text in landscape; 100% keeps the set size and still allows zoom (not `none`). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Top menu on phones/tablets. The desktop design is one line (compiled rule in
   _next/static/css/f3d4…css forces nowrap); below 1024px one line can't fit, so the
   pill list becomes its OWN swipe strip instead of spilling under the language pill
   or widening the page. Start-aligned when it overflows (safe center), soft-faded
   edges so it reads as "more this way", snap to pills. High specificity + !important
   because the compiled rule, metatrix-nav.js and the rule above are all !important. */
@media (max-width: 1023px) {
  html body header[aria-label="Primary"] > nav[aria-label="Primary navigation"],
  html body header[aria-label^="Principal"] > nav[aria-label^="Navigation principale"] {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    max-width: 100% !important;
    gap: 6px !important;
  }
  html body header[aria-label="Primary"] > nav[aria-label="Primary navigation"] > ul,
  html body header[aria-label^="Principal"] > nav[aria-label^="Navigation principale"] > ul {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 6px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    justify-content: safe center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  html body header[aria-label="Primary"] > nav > ul::-webkit-scrollbar,
  html body header[aria-label^="Principal"] > nav > ul::-webkit-scrollbar { display: none; }
  html body header[aria-label="Primary"] > nav[aria-label="Primary navigation"] > ul > li,
  html body header[aria-label^="Principal"] > nav[aria-label^="Navigation principale"] > ul > li {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
  /* finger-size tap area (WCAG 2.5.8 >= 24px; ~36px here) without changing the look */
  html body header[aria-label="Primary"] > nav[aria-label="Primary navigation"] > ul > li > a,
  html body header[aria-label^="Principal"] > nav[aria-label^="Navigation principale"] > ul > li > a {
    min-height: 36px;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
  /* language pill: globe only on small screens; the real <select> covers the pill,
     invisible, at 16px so iOS Safari doesn't zoom in when it is tapped */
  html body header[aria-label="Primary"] > nav > div:last-child,
  html body header[aria-label^="Principal"] > nav > div:last-child {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
  html body #mtx-lang-pill {
    position: relative !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
  }
  html body #mtx-lang-pill > select {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    font-size: 16px !important;
    cursor: pointer;
  }
}
/* the fixed sidebar button (#mtx-rail-toggle, 8px + 34px, shown <= 900px) sat on top
   of the first pills — start the bar after it */
@media (max-width: 900px) {
  html body header[aria-label="Primary"] > nav[aria-label="Primary navigation"],
  html body header[aria-label^="Principal"] > nav[aria-label^="Navigation principale"] {
    padding-left: 48px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 820px) {
  /* iOS Safari zooms the page when a text box under 16px is focused */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),
  textarea, select { font-size: 16px !important; }

  /* Install box: while it shows, it sits above the Max orb + status pill so its
     buttons can be tapped (they covered "Not now"), and clears the home bar. */
  #mtx-ip { z-index: 2147483647 !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  /* floating orb + status pill clear the iPhone home bar / Android gesture bar */
  #iomx-fab { bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
  #iomx-pill { bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Brain Storm Room model chip was 376px on a 360px screen */
  #brain-lbl { display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  .chip:has(#brain-lbl) { max-width: 100%; min-width: 0; }
}

@media (max-width: 820px) {
  /* rows laid out as "left group … right group" wrap to a second line instead of
     squeezing the right group until its words break mid-word ("BUI LD") */
  .flex.justify-between { flex-wrap: wrap; row-gap: 8px; }
  /* buttons and pills never break inside a word (body has overflow-wrap:break-word) */
  button, [role="button"], a[class*="rounded-full"] { overflow-wrap: normal; word-break: normal; }
}