/* FBMCPF-481 — iPhone (Safari + Chrome / WebKit) mobile layer.
 *
 * Loaded LAST on every public page. Everything that can change rendering lives
 * inside `@media (max-width:720px)` (with a 480px tier for the tightest cases),
 * so anything at 721px and up — the whole desktop rendering — is byte-identical
 * to before this file existed. The only unconditional rule is
 * -webkit-text-size-adjust, which stops iOS inflating text after a rotate and
 * has no effect on a desktop browser.
 *
 * `!important` is used deliberately and only inside the media queries: the pages
 * carry their own <style> blocks BELOW this <link> in document order, and nav.js
 * injects its chrome at runtime, so equal specificity would lose. Desktop is
 * never touched because the whole block is behind the breakpoint.
 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 720px) {

  /* ── 1. nothing may sit outside the viewport ─────────────────────────────── */
  html, body { max-width: 100%; }
  body { overflow-x: hidden; }

  img, svg, video, iframe, picture, embed, object {
    max-width: 100% !important;
    height: auto;
  }
  iframe, video { width: 100% !important; }

  /* Long unbreakable strings (paths, URLs, tool names) are the usual cause of a
     390px page reporting a 700px content box. */
  p, li, td, th, dd, dt, figcaption, blockquote, .ed-tagline, .hero-desc {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  code, kbd, samp {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  pre { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
  pre code { white-space: pre !important; word-break: normal !important; }

  /* Tables and any wide app chrome scroll INSIDE their own box rather than
     pushing the page sideways or being clipped away by an overflow:hidden. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 2. tap targets: 44x44 minimum (Apple HIG) ───────────────────────────── */
  a.btn, a.btn-p, a.btn-s, a.btn-mcp, a.ed-cta, a.pl-btn, a.tbtn, a.cta,
  button.btn-p, button.booking-btn, button.modal-btn, button.pab,
  .hbtn, .hcta-btn, .nav-toggle, .tr-chip, .dhbtn, .toggle-all-btn,
  #buyBtn, #buyAnnualBtn, #heroMcpCta, #edMcpCta, #edOpenclawCta,
  #edCursorCta, #edMcpZipCta, #bsBtn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .nav-toggle { min-width: 44px !important; }

  /* Primary CTAs go full-width and wrap instead of running off the side. */
  .hero-cta, .cadx-cta, .ed-btnrow, .pl-actions, .btnrow, .cta-row {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
  }
  .hero-cta > a, .hero-cta > button,
  .cadx-cta > a, .cadx-cta > button,
  .ed-btnrow > a, a.ed-cta, a.pl-btn, a.tbtn, #buyBtn, #buyAnnualBtn,
  a.btn.solid, a.btn.ghost, a.btn {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
    white-space: normal !important;
    line-height: 1.35;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .hero-cta > .fb-updated { width: auto !important; margin-left: 0 !important; text-align: left; }

  /* Links that are the only control in a status strip still need a thumb-sized box. */
  .ed-status a, .ed-ctanote a, .footer-links a, .pl-note a, .footer-brand {
    display: inline-block;
    padding-top: 14px;
    padding-bottom: 14px;
    line-height: 1.2;
  }
  .brand { min-height: 44px; display: inline-flex !important; align-items: center; }

  /* Icon-only controls: keep the visual dot/arrow small, grow the hit box. */
  .cadx-rot-arrow { width: 44px !important; height: 44px !important; font-size: 1.15rem !important; }
  .cadx-rot-dots { gap: 0 !important; }
  .cadx-rot-dot {
    width: 44px !important; height: 44px !important;
    border: none !important; background: transparent !important;
    padding: 17px !important; box-sizing: border-box;
  }
  .cadx-rot-dot::after {
    content: ''; display: block; width: 10px; height: 10px; border-radius: 50%;
    border: 1px solid var(--border, #38414a); background: var(--panel2, #2c333a);
  }
  .cadx-rot-dot-active::after { background: var(--accent, #00c8ff); border-color: var(--accent, #00c8ff); }

  /* ── 3. no body text below 14px ──────────────────────────────────────────── */
  /* Shared chrome (nav.js + footer.js) */
  .hbtn, .hbtn.navgrp-btn, .hbtn.accent.hcta-btn, .nav-txt, .nav-txt b, .nav-txt span,
  .hcta-menu b, .hcta-menu span, .navgrp-menu a,
  .footer-brand, .footer-brand-sub, .footer-copy, .footer-copy a,
  .footer-support, .footer-support a, .footer-support code,
  .fb-version-badge, .footer-links a { font-size: 14px !important; }

  /* Home page */
  .eyebrow, .sec-eyebrow, .hero-badge, .fb-updated, .hero-ctanote, .hero-ctanote a,
  #heroNoteText, .btn-p, .btn-s, .btn-mcp, #heroMcpCta,
  .cadx-eyebrow, .cadx-eyebrow b, .cadx-live, .cadx-sub, .cadx-cap, .cadx-rot-cap,
  .cadx-stat .n, .cadx-stat .l, .cadx-stat .l code, .cadx-stat .src,
  .cadx-note, .cadx-note code, .cadx-note a, .cadx code,
  .feat-card h3, .feat-card p, .booking-desc, .booking-badge, .booking-price span,
  .booking-features li, .booking-btn, .demo-intro p,
  .win-url, .win-chrome div, .demo-brand-sub, .demo-status, .dhbtn, .pab,
  .toggle-all-btn, .speed-label, #speedVal, #taskStat,
  #results div, #results p, #booking p, #booking a { font-size: 14px !important; }

  /* Editions split */
  .ed-eyebrow, .ed-tagline, .ed-feats li, .ed-h3, .ed-ddgrid div, .ed-deepdive p,
  .ed-ctanote, .ed-ctanote code, .ed-ctanote a, .ed-ctanote b,
  .ed-status, .ed-status a, .ed-ok, .ed-cta, .ed-hint, .ed-fx { font-size: 14px !important; }

  /* get-started / install / faq */
  .pill, .tiny, .tiny a, .tiny b, .tiny code, .who, .say p, .note, .note a, .note code,
  .card, .card b, .card code, .tag, .lede code, .btn, .btn.solid, .btn.ghost,
  .plans th, .plans td, .plans b, table th, table td,
  #cowork p, #cowork li, #cowork code, #cowork b,
  #openclaw p, #openclaw li, #openclaw code,
  #cursor p, #cursor li, #cursor code, #cursor b,
  #other-ides p, #other-ides li, #other-ides code,
  code { font-size: 14px !important; }

  /* buy / pricing */
  .per, .tier li, .tier.featured li, .tbtn, .tbtn.ghost, .badge, .price small,
  .seat-select label, #seatNote, #trial li, #buyBtn, #buyAnnualBtn,
  .pwrap a, .pwrap span, .pnote, .pnote b, .pnote code, .pnote a { font-size: 14px !important; }

  /* products / product line + tool reference */
  .pl-family-label, .pl-family-inner a, .pl-kicker, .pl-stat span, .pl-badge,
  .pl-card code, .pl-btn, .pl-tools code, .pl-note code, .pl-note.tr code,
  .pl-sub code, .tr-chip, .tr-count, .tr-tag, .tr-tag.core, .tr-tag.read,
  .tr-tag.write, .tr-tag.destructive { font-size: 14px !important; }

  /* ── 4. layout: single column, real padding, nothing clipped ─────────────── */
  .hero { padding: 28px 16px !important; gap: 22px !important; }
  .hero > * { min-width: 0; }
  .hero-badge { white-space: normal !important; display: inline-block; margin-top: 6px; }
  .eyebrow { flex-wrap: wrap !important; }
  .section, .booking-section, #results > section { padding-left: 16px !important; padding-right: 16px !important; }
  .cadx-stats { grid-template-columns: 1fr 1fr !important; }
  .cadx-body { padding: 14px !important; }

  /* The live-demo panel is a desktop app mock ~1100px wide. It used to be
     clipped by .demo-shell{overflow:hidden}, which made the board unreachable
     by any gesture. Let it scroll sideways inside its own frame instead. */
  .demo-shell { overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin: 0 8px !important; }
  .demo-hdr { height: auto !important; flex-wrap: wrap !important; padding: 8px 12px !important; gap: 8px !important; }
  .demo-search { display: none !important; }
  .proj-body { flex-direction: column !important; }
  .vel-panel { width: 100% !important; min-width: 0 !important; }

  /* Status strips wrap instead of forcing a wide line box. */
  .ed-status, .hero-ctanote, .fb-updated, .footer-copy, .footer-support {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .fb-updated { display: block !important; margin-left: 0 !important; }

  /* ── 5. #ed-editions: stack, and open the deep dive on TAP ───────────────── */
  /* On a phone there is no hover and no proximity band. The three editions
     become three full-width cards at their natural height, "Find out more" is a
     plain full-width button, and the selected-column collapse (flex-grow:.07 +
     the ::after label) is switched off — vertically it turned the other two
     editions into unreadable slivers. */
  #ed-editions { min-height: 0 !important; }
  #ed-editions .ed-split { flex-direction: column !important; min-height: 0 !important; }
  #ed-editions .ed-side {
    flex: 0 0 auto !important;
    padding: 34px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #38414a) !important;
    overflow: visible !important;
  }
  #ed-editions .ed-split:not(.selected) .ed-side:hover { flex-grow: 0 !important; }
  #ed-editions .ed-split:not(.selected) .ed-side:hover .ed-bg { transform: none !important; }
  #ed-editions .ed-split.selected .ed-side:not(.focused) {
    flex-grow: 0 !important; opacity: 1 !important; filter: none !important;
  }
  #ed-editions .ed-split.selected .ed-side:not(.focused) .ed-inner { opacity: 1 !important; }
  #ed-editions .ed-split.selected .ed-side:not(.focused)::after { display: none !important; }
  #ed-editions .ed-split.selected .ed-side.focused { flex-grow: 0 !important; }
  #ed-editions .ed-inner { max-width: 100% !important; }
  #ed-editions .ed-findout {
    height: auto !important;
    min-height: 52px !important;
    padding: 14px 16px !important;
    margin-top: 4px;
    background: rgba(255,255,255,0.04);
  }
  /* The per-letter proximity animation only ever fires on mousemove; on touch the
     letters stayed at the muted grey. Give the button its real label colour. */
  #ed-editions .ed-fx span { color: var(--text-hi, #e8edf2) !important; transform: none !important; text-shadow: none !important; }
  #ed-editions .ed-arrow { color: var(--text-hi, #e8edf2) !important; }
  #ed-editions .ed-side.focused .ed-deepdive { max-height: none !important; overflow: visible !important; }
  #ed-editions .ed-ddgrid { grid-template-columns: 1fr !important; }
  #ed-editions .ed-hint { position: static !important; margin: 18px 0 8px !important; }

  /* Tool-reference toolbar is sticky and 130px tall — it ate a third of the
     screen above every result. Let it wrap and stop it sticking on a phone. */
  .tr-toolbar { position: static !important; height: auto !important; flex-wrap: wrap !important; }
  .pl-family-inner, .pl-actions { flex-wrap: wrap !important; }
}

@media (max-width: 480px) {
  .cadx-stats { grid-template-columns: 1fr !important; }
  .hero { padding: 24px 14px !important; }
  .section, .booking-section { padding-left: 14px !important; padding-right: 14px !important; }
  #ed-editions .ed-side { padding: 28px 14px !important; }
}

/* ── second pass (measured after the first fix round) ─────────────────────── */
@media (max-width: 720px) {
  /* Remaining under-44px controls */
  .hero-ctanote a, .pl-family-inner a {
    display: inline-block;
    padding-top: 14px; padding-bottom: 14px; line-height: 1.2;
  }
  .footer-links a { min-width: 44px; text-align: center; }
  .dhbtn, #themeBtn, .gear-btn, #addTaskBtn, .vel-show-more, .trial-chip,
  .share-copy-btn, .gd-version-btn, .gd-action-btn, .ws-workflow-btn,
  .ai-apply-btn, .pkg-btn, .tc-tab, .tc-start-btn, .tc-refresh-btn,
  .fe-hbtn, .product-add-btn, .modal-close, .preview-btn {
    min-height: 44px !important; min-width: 44px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }

  /* The interactive board mock's own typography — it scrolls sideways inside
     .demo-shell now, so it can afford readable type. */
  .k-col-hdr, .card-id, .card-title-text, .card-date, .card-product, .crm-banner,
  .k-col .task-card, .k-col .task-card div, .k-col .task-card span,
  .vel-title, .vel-wlabel, .vel-d, .vel-edate, .vel-add, .vel-del,
  .vel-panel div, .vel-estats span, .vel-show-more,
  .speed-label, .speed-label span, #speedVal, #addTaskBtn, #typeSelect option,
  .rm-phase, .rm-card p, .rm-card h3,
  .ft-sub, .site-footer p, .site-footer a, .site-footer span:not(.footer-brand-main) {
    font-size: 14px !important;
  }
}

/* ── third pass: the last two inline-styled remnants ──────────────────────── */
@media (max-width: 720px) {
  /* index.html's own <footer> (not the shared .site-footer from footer.js) */
  footer p, footer a, footer span { font-size: 14px !important; }
  /* the board mock's inline-styled column divider */
  #list-bug > div, #list-feat > div, .k-list > div { font-size: 14px !important; }
}

/* ── the header bar must never widen the layout viewport ──────────────────────
 * index.html declares .app-header{height:80px; white-space:nowrap} and nav.js
 * adds the brand, the hamburger and the Get Started CTA to that row. At 390px
 * the row's natural width was 413px, so WebKit shrink-to-fits the whole page —
 * the classic "site loads zoomed out with a sliver of horizontal scroll" report.
 * Bumping the CTA to 14px/44px (above) made it worse, so the row is explicitly
 * allowed to wrap and shrink here. */
@media (max-width: 720px) {
  /* NOT overflow-x:hidden — a non-visible overflow-x forces overflow-y to clip
   * too, which hid the Get Started dropdown and the hamburger card (both are
   * absolutely positioned BELOW the 80px bar). body{overflow-x:hidden} above
   * already stops the page widening; the bar itself just needs to shrink. */
  .header-bar { max-width: 100% !important; overflow: visible !important; }
  .app-header {
    max-width: 100% !important;
    width: 100% !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
  .app-header .brand { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .brand-main { font-size: 1.05rem !important; }
  .brand-sub { display: none !important; }
  .hcta, .hcta-btn { min-width: 0; flex-shrink: 1; max-width: 100%; }
  .hcta-btn { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ── inline-styled multi-column grids ────────────────────────────────────────
 * #results (inlined from results.html) carries its layout in style="" — a 64px
 * inline padding and three nested 2-up grids. At 390px those laid out to 456px
 * of content, and because body{overflow-x:hidden} clips rather than scrolls,
 * WebKit shrink-to-fit the whole document: the page opened zoomed out with the
 * hero unreadable. Only an !important rule can beat an inline style. */
@media (max-width: 720px) {
  #results { padding: 30px 16px !important; }
  #results [style*="grid-template-columns"],
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #results [style*="padding:28px"], #results [style*="padding: 28px"] { padding: 18px !important; }
}