/* ===== MOBILE QA PASS =====
   Universal defensive rules applied across landing + /systems + every
   /applications/* demo page. Loaded last so it wins same-specificity
   cascade against inline page styles. */

/* Horizontal-scroll prevention. Any visual that overflows (dot grids,
   calendar overlays, provisioning timelines, JSON panes, loop diagrams)
   gets clipped at the viewport edge instead of pushing the page wider. */
html, body { overflow-x: hidden; }

/* Anchor stage padding caps at narrow widths. The standard anchor
   padding (140-160px on desktop) crushes content on phones. */
@media (max-width: 900px) {
  .ws-stage-anchor { padding-top: 96px; padding-bottom: 96px; }
}
@media (max-width: 640px) {
  .ws-stage-anchor { padding-top: 72px; padding-bottom: 72px; }
  .ws-stage-anchor .ws-stage-h {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.08;
  }
}
@media (max-width: 480px) {
  .ws-stage-anchor { padding-top: 56px; padding-bottom: 56px; }
  .ws-stage-anchor .ws-stage-h { font-size: clamp(24px, 7vw, 32px); }
}

/* Stage content shouldn't overflow viewport. Defensive max-widths on
   every reusable stage widget so they all behave on phones. */
.ws-visual > *,
.ws-feed,
.ws-split,
.ws-verify,
.ws-grade,
.ws-brief,
.ws-route,
.ws-trace,
.ws-match,
.ws-db,
.ws-dig,
.ws-iv-card,
.ws-loop,
.ws-recon,
.ws-triage,
.ws-handoff,
.ws-pool,
.ws-calendar,
.ws-prov,
.ws-prov-wrap,
.ws-plan,
.ws-tier,
.ws-submit,
.ws-sched,
.ws-score-card,
.ws-email {
  max-width: 100%;
  box-sizing: border-box;
}

/* Split-pane visuals stack on mobile rather than squeezing side by side */
@media (max-width: 720px) {
  .ws-split {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ws-split-arrow {
    transform: rotate(90deg);
    padding: 8px 0;
  }
}

/* JSON panes can scroll horizontally rather than overflow the page */
.ws-json-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Code-like content respects container at smallest sizes */
@media (max-width: 480px) {
  .ws-json-body {
    font-size: 10.5px;
    padding: 12px 14px;
  }
  .ws-pdf-body {
    padding: 16px;
  }
}

/* Container padding tightens at the smallest widths */
@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* Nav CTA stays visible at narrow widths instead of wrapping awkwardly */
@media (max-width: 520px) {
  .nav-cta {
    padding: 11px 18px;
    font-size: 13.5px;
  }
}
@media (max-width: 420px) {
  .nav-cta {
    padding: 11px 14px;
    font-size: 13px;
    min-height: 44px;
  }
  .logo-word {
    font-size: 22px !important;
  }
  .logo-mark {
    height: 44px !important;
    width: 44px !important;
  }
}

/* ===== TAP TARGET FLOOR FOR INLINE CTAs =====
   Header CTA, hero meta link ("or pick a time"), cal fallback link
   were all clocking <44px tap on iPhone SE. Floor them. */
@media (max-width: 640px) {
  .nav .btn,
  .nav-cta { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .hr-meta a,
  .hero-cal-fallback a,
  .cal-fallback a { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 16px; }
  /* Footer column links — bottom of page but still tappable. */
  .footer-col a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 0; }
  .footer-meta-item { min-height: 44px; padding: 10px 0; }
  /* "SEE ALL SYSTEMS" link in mobile sheet. */
  .nav-mobile-all { min-height: 44px; padding-top: 12px !important; padding-bottom: 12px !important; }
  /* Mobile sheet logo — kill the playwright false positive on hidden-by-opacity sheet. */
  .nav-mobile-logo { min-height: 44px; }
}

/* Outcome stat grid collapses on mobile */
@media (max-width: 720px) {
  .ws-outcome-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Route tabs stack on phones rather than cram side by side */
@media (max-width: 560px) {
  .ws-route-tabs,
  .ws-route-tabs-4 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* Feed rows reflow at narrow widths */
@media (max-width: 600px) {
  .ws-feed-item {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .ws-feed-time {
    grid-column: 1 !important;
    font-size: 10.5px;
  }
}

/* Verify rows reflow at narrow widths */
@media (max-width: 560px) {
  .ws-verify-step {
    grid-template-columns: 28px 1fr !important;
    gap: 10px !important;
    padding: 14px 18px !important;
  }
  .ws-verify-time {
    grid-column: 2 !important;
    margin-top: 2px;
    font-size: 10.5px;
  }
}

/* Homepage systems grid mobile: ensure 1-col stack below 540px */
@media (max-width: 540px) {
  .sys-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .sys-card { padding: 18px 20px !important; min-height: auto !important; }
}

/* Brand bar must not steal scroll */
.brand-bar { pointer-events: none; }

/* ===== CONTENT-VISIBILITY (LCP optimization) =====
   Tell the browser to skip layout/paint for off-screen workspace
   stages until they scroll into view. Massive LCP win on the 18
   system leaf pages where each stage is a heavy interactive widget.
   contain-intrinsic-size reserves placeholder height. */
.ws-stage, .ws-stage-outcome, .ws-stage-anchor, .footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}

/* ===== iOS ZOOM-ON-FOCUS PREVENTION =====
   Safari auto-zooms any input < 16px on focus. Floor every form
   control to 16px on mobile so the conversion path (recorder email,
   /book email) doesn't jolt the page mid-flow. */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  textarea,
  select,
  .hr-email,
  .form-input {
    font-size: 16px !important;
  }
}

/* ===== CONTAINER PADDING FLOOR =====
   Several pages drop container padding to 14px at <=480px which
   crushes content on a 320px screen. Floor at 16px. */
@media (max-width: 480px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ===== HAMBURGER TAP TARGET (WCAG floor) =====
   Defensive 44x44 floor in case any page-local override loosens it. */
@media (max-width: 880px) {
  .nav-hamburger,
  .nav-mobile-close { min-width: 44px; min-height: 44px; }
}

/* ===== FAQ ACCORDION TAP SPACING =====
   On mobile, ensure each <summary> is comfortably tappable and
   adjacent items don't mis-fire. */
@media (max-width: 640px) {
  .hb-faq-item summary,
  .faq-item summary {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    min-height: 48px;
  }
}