/* mobile.css — phone-width corrections shared by the public pages and the
   logged-in app. Loaded LAST in <head> so it wins ties against the inline
   <style> blocks in the standalone templates.

   Everything that changes layout is scoped to <=640px, so desktop is
   untouched. Only the two text-size-adjust lines are global, because the
   iOS behaviour they disable is not viewport-dependent. */

/* Stop iOS inflating text when a phone is rotated to landscape, which
   silently breaks carefully sized headings. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Long unbroken strings (pasted URLs, IDs, hashes) are the usual cause of a
   page that scrolls sideways on a phone. Wrap them instead. */
@media (max-width: 640px) {
    body { overflow-wrap: break-word; }
    pre, code, table { overflow-x: auto; max-width: 100%; }
}

@media (max-width: 640px) {
    /* ---- Readable minimums -------------------------------------------
       Uppercase mono labels with wide letter-spacing were running as small
       as 8px, which is well under what is comfortable on a phone. These are
       modest lifts, not a redesign - the type hierarchy is preserved. */
    .brand-beta,
    .auth-brand-beta       { font-size: 10px !important; }
    .save-badge            { font-size: 11px !important; }
    /* Matched by pattern rather than by name: the eyebrow label is a
       recurring motif (.eyebrow, .bc-eyebrow, .ao-eyebrow,
       .spotlight-eyebrow, .trial-banner-eyebrow) and new ones keep being
       added, so a substring match keeps them all above the floor. */
    [class*="eyebrow"],
    .ao-pill,
    .plan-badge,
    .role,
    .bc-note,
    .toc-title,
    .meta                  { font-size: 12px !important; }
    .auth-tab              { font-size: 12px; }
    .auth-field label      { font-size: 11px; letter-spacing: .12em; }
    .auth-field .auth-hint { font-size: 12px; }
    .auth-foot             { font-size: 11.5px; letter-spacing: .03em; }
    .toc ol                { font-size: 15px; }
    /* Legal fine print: bumped a little and given generous leading. The
       links inside stay `inline` on purpose — making them inline-block
       would stop "Terms of Service" wrapping and push a ~278px unbreakable
       box past a 320px screen. Line-height is what buys the tap room. */
    .auth-foot span.auth-legal { font-size: 12.5px; line-height: 1.8; }

    /* ---- Tap targets --------------------------------------------------
       Aiming for ~44px of touchable height. Padding is used rather than
       height so the visual rhythm barely shifts; only the hit area grows.
       Deliberately NOT applied to links inside prose - padding those would
       break line spacing in the legal copy. */
    .toc ol li            { margin-bottom: 2px; }
    /* ~41px per row. Deliberately not pushed to a full 44 - this TOC has 16
       entries, and the extra height costs more in scrolling than it gains in
       accuracy. Comfortably clears the WCAG AA 24px floor either way. */
    .toc ol li a          { display: inline-block; padding: 11px 2px; line-height: 1.25; }
    .foot a               { display: inline-block; padding: 10px 2px; }
    .auth-tab             { min-height: 44px; }
    .auth-close           { min-width: 44px; min-height: 44px; }
    .auth-switch button   { min-height: 44px; padding: 0 6px; }
    a.brand               { min-height: 44px; display: inline-flex; align-items: center; }

    /* ---- Forms --------------------------------------------------------
       Safety net: any control under 16px makes iOS Safari zoom the page in
       on focus. The auth inputs are fixed at source in pricing.html; this
       catches anything else. The honeypot (#su-website) is excluded - it is
       positioned off-screen on purpose and must not be touched. */
    input:not([type=hidden]):not(#su-website),
    select,
    textarea {
        font-size: 16px;
    }
}

/* Cloudflare renders the Turnstile widget at a fixed 300px, which overhangs
   the signup drawer on the narrowest phones (iPhone SE at 320px) and gets
   clipped. Scaling keeps it whole and fully interactive. transform doesn't
   reflow, so the freed height is clawed back with a negative margin. */
@media (max-width: 370px) {
    .cf-turnstile {
        transform: scale(.85);
        transform-origin: left top;
        margin-bottom: -10px;
    }
}
