/* =========================================================
   GROWSPEC Bio — M59 Final Technical Hardening
   Cross-page mobile, iOS/Safari, accessibility and layout safety.
   ========================================================= */

:root {
  --gs-safe-top: env(safe-area-inset-top, 0px);
  --gs-safe-right: env(safe-area-inset-right, 0px);
  --gs-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gs-safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(92px + var(--gs-safe-top));
}

body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

/* Keep keyboard focus visible without affecting pointer interaction. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #87b2d9;
  outline-offset: 3px;
}

/* Safe-area support for the active Nexus navigation system. */
.nexus-header {
  padding-left: max(var(--nx-gutter, 28px), var(--gs-safe-left));
  padding-right: max(var(--nx-gutter, 28px), var(--gs-safe-right));
  padding-top: max(14px, var(--gs-safe-top));
}

.nexus-launcher {
  padding-top: max(clamp(18px, 4vw, 64px), var(--gs-safe-top));
  padding-right: max(clamp(18px, 4vw, 64px), var(--gs-safe-right));
  padding-bottom: max(clamp(18px, 4vw, 64px), var(--gs-safe-bottom));
  padding-left: max(clamp(18px, 4vw, 64px), var(--gs-safe-left));
}

.nexus-launcher-shell {
  max-height: min(820px, calc(100dvh - 40px - var(--gs-safe-top) - var(--gs-safe-bottom)));
}

.nexus-launcher-list,
.m51-tabs,
.nano-application-index,
.nano-scene-rail,
.nexus-chapter-links,
.apex-table-shell,
.m48-table-shell,
.chart-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

/* Horizontal navigation and data rows remain intentionally scrollable on small screens. */
@media (max-width: 760px) {
  .nexus-header {
    padding-top: max(9px, var(--gs-safe-top));
    padding-right: max(12px, var(--gs-safe-right));
    padding-left: max(12px, var(--gs-safe-left));
  }

  .nexus-launcher {
    padding-top: max(10px, var(--gs-safe-top));
    padding-right: max(10px, var(--gs-safe-right));
    padding-bottom: max(10px, var(--gs-safe-bottom));
    padding-left: max(10px, var(--gs-safe-left));
  }

  .nexus-launcher-shell {
    max-height: calc(100dvh - 20px - var(--gs-safe-top) - var(--gs-safe-bottom));
  }

  .nexus-launcher-list {
    max-height: calc(100dvh - 20px - var(--gs-safe-top) - var(--gs-safe-bottom));
  }

  .nexus-footer {
    padding-bottom: max(32px, var(--gs-safe-bottom));
  }

  .m51-tabs,
  .nano-application-index,
  .nano-scene-rail,
  .nexus-chapter-links {
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }

  .m51-tab,
  .nano-application-index a,
  .nano-scene-card,
  .nexus-chapter-links a {
    scroll-snap-align: start;
  }

  /* ROI page: the previous mobile rules targeted a class no longer present.
     These rules apply to the current production body class. */
  body.roi-page .qa-wrap,
  body.roi-page .calc-grid,
  body.roi-page .wrap {
    min-width: 0 !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.roi-page .roi-lead-grid,
  body.roi-page .calc-grid,
  body.roi-page .grid-2,
  body.roi-page .grid-3,
  body.roi-page .grid-4,
  body.roi-page .grid-2-cols,
  body.roi-page .grid-3-cols,
  body.roi-page .grid-4-cols {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.roi-page .calc-grid > *,
  body.roi-page .roi-lead-grid > *,
  body.roi-page .grid-2 > *,
  body.roi-page .grid-3 > *,
  body.roi-page .grid-4 > *,
  body.roi-page .grid-2-cols > *,
  body.roi-page .grid-3-cols > *,
  body.roi-page .grid-4-cols > *,
  body.roi-page .calc-card,
  body.roi-page .input-group,
  body.roi-page .input-wrap,
  body.roi-page input,
  body.roi-page select,
  body.roi-page textarea {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.roi-page .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.roi-page .stat-cell:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  a,
  button,
  summary,
  [role="button"] {
    -webkit-tap-highlight-color: rgba(135, 178, 217, 0.22);
    touch-action: manipulation;
  }

  .nexus-mobile-button,
  .nexus-launcher-close,
  .m51-tab {
    min-height: 44px;
  }

  .nexus-mobile-button,
  .nexus-launcher-close {
    min-width: 44px;
  }
}

@supports (-webkit-touch-callout: none) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .nexus-header-inner,
  .nexus-launcher,
  .glass-2 {
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}


/* M60 — semantic product navigation and touch-safe direct links. */
.nexus-launcher-item,
.nexus-atlas-node {
  text-decoration: none !important;
  font: inherit;
  -webkit-tap-highlight-color: rgba(135,178,217,.22);
}
.nexus-launcher-item:focus-visible,
.nexus-atlas-node:focus-visible {
  outline: 3px solid #87b2d9;
  outline-offset: 4px;
}