/* ============================================================
   GENE HEW v6 — MOBILE & TOUCH OPTIMIZATION
   Additive layer, loaded AFTER v3/v4/v5. Reuses existing tokens.
   Scope: (1) real mobile nav (hamburger + drawer), (2) touch
   reveals for hover-gated content, (3) iOS input-zoom + tap
   targets, (4) safe-area insets, (5) small-screen type/spacing.
   Nothing here touches desktop (>820px) layout.
   ============================================================ */

/* ---------- safe-area: keep the fixed bar clear of notches ---------- */
.nav {
  padding-top: max(15px, env(safe-area-inset-top));
  padding-left: max(clamp(18px, 3.5vw, 44px), env(safe-area-inset-left));
  padding-right: max(clamp(18px, 3.5vw, 44px), env(safe-area-inset-right));
}

/* ---------- hamburger button (hidden on desktop) ---------- */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -6px -8px -6px 0; padding: 0;
  border: 0; background: transparent; cursor: pointer; color: var(--ink);
  -webkit-tap-highlight-color: transparent; z-index: 2;
}
.nav-toggle-bars { position: relative; width: 22px; height: 14px; }
.nav-toggle-bars i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: var(--green-deep);
  transition: transform 0.35s var(--ease-out), opacity 0.2s ease, top 0.35s var(--ease-out);
}
.nav-toggle-bars i:nth-child(1) { top: 0; }
.nav-toggle-bars i:nth-child(2) { top: 6px; }
.nav-toggle-bars i:nth-child(3) { top: 12px; }
.nav.menu-open .nav-toggle-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav.menu-open .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-toggle-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle-bars i { transition: none; } }

/* ============================================================
   MOBILE NAV DRAWER  (<= 820px — matches base.css nav breakpoint)
   ============================================================ */
@media (max-width: 820px) {
  .nav { position: fixed; }
  .nav-toggle { display: inline-flex; }

  /* turn the inline link row into a slide-down panel under the bar */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px max(clamp(18px, 3.5vw, 44px), env(safe-area-inset-left)) 18px
                max(clamp(18px, 3.5vw, 44px), env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--paper), transparent 2%);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 44px -26px color-mix(in oklab, var(--green-deep), transparent 42%);
    transform: translateY(-14px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.32s ease, transform 0.4s var(--ease-out), visibility 0.32s ease;
  }
  .nav.menu-open .nav-links {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  }

  /* the section links — overrides base.css `display:none`; full-width tap rows */
  .nav-links a:not(.nav-cta) {
    display: flex; align-items: center; min-height: 50px;
    padding: 6px 4px; font-size: 13.5px; opacity: 0.92;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:not(.nav-cta)::after { display: none; } /* drop the desktop underline sweep */
  .nav-links a:not(.nav-cta):active { color: var(--green-deep); }

  /* contact CTA: prominent full-width pill at the foot of the drawer */
  .nav-links a.nav-cta {
    margin: 16px 0 0; justify-content: center; padding: 15px 24px; font-size: 13px;
  }
}

/* ============================================================
   TOUCH REVEALS — content gated behind :hover is invisible on
   touch. Surface it for coarse pointers (phones / tablets).
   ============================================================ */
@media (hover: none) {
  /* brand-world + design wall tile captions */
  .bw-tile .bw-n { opacity: 1; }
  .bw-tile::after { opacity: 0.55; }
  /* don't dim the rest of a row when one tile is "hovered" via tap */
  .bw-row:hover .bw-tile:not(:hover) { opacity: 1; filter: none; }
  /* live-site card arrows: always show the affordance */
  .web-card .w-arrow { opacity: 1; transform: none; }
  /* screenshots are scroll-panned by mobile.js on touch: no lag transition,
     so the pan tracks the scroll 1:1 instead of easing over 3.2s */
  .web-shot img,
  .bld-viz.is-web .bld-shot img { transition: none; }
}

/* ============================================================
   iOS INPUT ZOOM + TAP TARGETS
   Inputs under 16px trigger an auto-zoom on focus in iOS Safari.
   ============================================================ */
@media (max-width: 820px) {
  .rag-field input { font-size: 16px; }
  .cform input, .cform textarea { font-size: 16px; }

  /* roomier suggestion chips */
  .rag-chip { padding: 8px 13px; }

  /* "How it works" disclosures: a comfortable tap row */
  .bld-more > summary { padding: 4px 0; min-height: 40px; display: flex; align-items: center; }
}

/* ============================================================
   SMALL-SCREEN TYPE & SPACING (<= 520px)
   The grids already collapse to one column upstream; this only
   tunes scale so the hero headline and section heads breathe.
   ============================================================ */
@media (max-width: 520px) {
  .hero-core h1 { font-size: clamp(2.35rem, 9.5vw, 3.1rem); }
  .hero-core .hero-sub { font-size: 16px; }

  /* tighten the analytics spreadsheet facsimiles so 6-7 columns
     stay legible instead of crushing to a few pixels per cell */
  .sheet table { font-size: 11px; }
  .sheet th, .sheet td { padding: 6px 7px; }
  .sheet th { width: 22px; }

  /* keep the closing/section notes comfortable */
  .builds-legend { gap: 8px 14px; }
}

/* very small (<= 360px): make sure the brand-world viewer controls
   and section titles don't crowd the edges */
@media (max-width: 360px) {
  .hero-core h1 { font-size: clamp(2.1rem, 11vw, 2.7rem); }
}

/* ============================================================
   WIDE SPREADSHEET FACSIMILES — contain the horizontal scroll
   The .sheet tables are 6-7 fixed columns (~540px) that do NOT
   shrink below their content. As grid items (min-width:auto)
   they pushed the whole document ~174px wider than the phone,
   which (a) showed empty space on the right and (b) shoved the
   fixed nav pill into the off-screen overflow zone. Fix: let the
   grid items shrink, and scroll the wide table INSIDE its card.
   ============================================================ */
@media (max-width: 820px) {
  /* grid items default to min-width:auto (= content width); let them shrink */
  .analyst-grid > div,
  .sheet-gallery > figure { min-width: 0; }
  /* card fits the viewport; its wide table scrolls horizontally within it
     (base .sheet sets overflow:hidden — override only the x axis) */
  .sheet { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* keep cells at a readable width while scrolling, not crushed to fit */
  .sheet table { min-width: max-content; }
  /* give the logo a real tap target (was ~23px tall) */
  .nav .logo { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============================================================
   HARD GUARANTEE — no horizontal scroll, ever
   The real overflow source (wide spreadsheets) is fixed above; this is
   the safety net so a future stray-wide element can never reintroduce a
   sideways scroll or a dead gap on the right edge. The site uses no
   position:sticky, so clipping the x-axis is side-effect-free.
   Verified: this clamps the document to the viewport width AND leaves
   vertical scrolling fully intact. `clip` (modern) avoids creating a
   scroll container; `hidden` is the fallback for older Safari (< 16).
   ============================================================ */
html { overflow-x: hidden; overflow-x: clip; }