/* responsive.css — mobile fit-and-finish. Loaded last so it wins on specificity ties. Written 2026-08-03 after measuring 101px of horizontal overflow at 375px wide. Root cause of the overflow: grid and flex children default to min-width:auto, so a child never shrinks below its content's intrinsic width. The .repo-tree ASCII block (white-space:pre) has a wide min-content width, so .path-card refused to shrink and blew the whole page out past the viewport. min-width:0 lets the child shrink; the pre's own overflow-x:auto then does its job and scrolls internally. */ /* ---- 1. Global containment ---- */ /* NOTE: do NOT put overflow-x:hidden on . It makes html the scroll container, which silently breaks position:sticky for the nav and the docs sidenav (verified 2026-08-03). The min-width:0 fixes below remove the overflow at its source, so the blunt clip isn't needed; body keeps the existing hidden as a backstop. */ html, body { max-width: 100%; } body { overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } /* Media and preformatted content never exceed their container */ img, svg, video, canvas, iframe { max-width: 100%; height: auto; } pre, table { max-width: 100%; } /* Long URLs, emails, and unbroken tokens wrap instead of pushing layout */ a, p, li, h1, h2, h3, h4, h5, summary, .path-foot, .footer a { overflow-wrap: break-word; word-break: break-word; } /* ...but never break the wordmark or button labels mid-word */ .nav-brand, .nav-brand .wm-the, .nav-brand .wm-rest, .logo, .badge { white-space: nowrap; word-break: normal; overflow-wrap: normal; } .nav-brand { flex-shrink: 0; } /* ---- 2. The min-width:auto fix (the actual bug) ---- */ .paths > *, .path-card, .feature-grid > *, .feat-list-wrap > *, .product-body > *, .pricing-wrap > *, .footer-inner > *, .shot--picker > *, .custom-row > *, .hero-inner > *, .method > *, .wrap > * { min-width: 0; } /* Wide content scrolls inside its own box rather than the page */ .repo-tree, .code-block, pre { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- 3. Phone layout (<=560px) ---- */ @media (max-width: 560px) { .wrap { padding-left: 18px; padding-right: 18px; } /* Nav: 32px side padding is too much next to the wordmark + CTA */ .nav-inner { padding-left: 18px; padding-right: 18px; gap: 12px; } .nav-cta { padding: 9px 12px; font-size: 10px; letter-spacing: .12em; } /* Cards: tighter padding so content keeps real width on a 375px screen */ .path-card { padding: 22px 18px; } .path-card .badge { left: 16px; font-size: 9px; letter-spacing: .16em; } .path-card h3 { font-size: 22px; } .repo-tree { font-size: 11px; padding: 12px 14px; line-height: 1.7; } /* Buttons stack full-width and stop forcing nowrap width */ .btn { width: 100%; justify-content: center; white-space: normal; } .cta-row, .hero-cta-row { flex-direction: column; align-items: stretch; gap: 12px; } /* FAQ rows: allow the question to wrap beside the + marker. The marker is a fullwidth ＋ whose glyph advance overran the row by ~7px, so pin its box. */ .faq-q { font-size: 18px; gap: 12px; align-items: flex-start; } .faq-q .plus { flex: 0 0 20px; width: 20px; font-size: 15px; text-align: right; } /* Footer: single column reads better than a squeezed 2-up */ .footer-inner { grid-template-columns: 1fr; gap: 26px; } /* Section rhythm — long scroll on phones otherwise */ .section { padding-top: 56px; padding-bottom: 56px; } } /* ---- 4. Small phones (<=380px) ---- */ @media (max-width: 380px) { .wrap { padding-left: 14px; padding-right: 14px; } .path-card { padding: 20px 14px; } .repo-tree { font-size: 10px; } /* Wordmark + CTA together overran a 320px screen by 2px */ body[data-wordmark] .nav-brand .wm-the { font-size: 22px; } body[data-wordmark] .nav-brand .wm-rest { font-size: 15px; } .nav-inner { padding-left: 14px; padding-right: 14px; } } /* ---- 5. Docs page ---- */ /* Reference tables and Pine code blocks are legitimately wide (up to ~1570px). They scroll inside their own box; the page itself never scrolls sideways. */ .docs-content table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .docs-content pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Inline code (function signatures, settings paths) must wrap. docs.css sets white-space:nowrap on .doc code, which made long identifiers like request.security_lower_tf(...) push the page ~400px wide on a phone. Code inside

 keeps its formatting; table cells keep nowrap since
   tables now scroll in their own box. */
.docs-content :not(pre):not(td):not(th) > code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.docs-content { min-width: 0; }

@media (max-width: 560px) {
  .docs-layout { padding-left: 18px; padding-right: 18px; gap: 0; }
  .docs-content h1 { font-size: 30px; }
  .docs-content h2 { font-size: 23px; }
  .docs-content pre { font-size: 12px; }
  .docs-content table { font-size: 13px; }
}

/* ---- 6. Touch targets ---- */

@media (hover: none) and (pointer: coarse) {
  .btn, .faq-q, .shot-pick, .footer a, .nav a { min-height: 44px; }
  .btn, .shot-pick { display: inline-flex; align-items: center; }
}

/* ---- 7. Reduced motion ----
   Honor prefers-reduced-motion across both animation and transitions. The
   marquee is excluded from the blanket rule: collapsing its 50s duration to
   0.01ms would snap the track to its end position. It gets paused instead,
   and the pause button still works either way. !important is required to beat
   the inline animation shorthand these elements already carry. */
@media (prefers-reduced-motion: reduce) {
  *:not(.pain-track), *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pain-track:not(.is-playing) { animation-play-state: paused !important; }
  html { scroll-behavior: auto !important; }
}