/* ==========================================================================
   Cross-cutting mobile affordances.

   These are not visual design choices — they are the handful of rules that
   stop touch devices from actively misbehaving. Kept in one file, loaded
   after the tokens on every layout, so a page cannot silently miss them.
   ========================================================================== */

/* ---- iOS focus zoom -------------------------------------------------------
   Safari on iOS zooms the whole page when a text-entry field with a font
   smaller than 16px receives focus, then leaves the user zoomed in and
   scrolled sideways. Only text entry triggers it, so checkboxes, radios and
   ranges are excluded — bumping those would just make them oversized. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px;
    }

    /* ...but this is a floor, not a size. The signup wizard's fields inherit
       the 18px body size on purpose; without this they would be SHRUNK to 16px
       on exactly the device where they need to be largest. Specificity has to
       clear the rule above, hence the repeated :not() chain. */
    body.su-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    body.su-page select,
    body.su-page textarea {
        font-size: inherit;
    }
}

/* ---- Touch targets --------------------------------------------------------
   A 16px-tall inline link is a reliable mis-tap. 44px is the smallest target
   that consistently works with a fingertip, so the padding does the work and
   the list gap is dropped to stop the footer doubling in height. */
@media (max-width: 991px) {
    .tt1-footer li > a {
        display: inline-block;
        padding: 14px 0;
        line-height: 1.2;
    }

    .tt1-footer ul {
        gap: 0;
    }

    .lg-pw-toggle {
        width: 44px;
        height: 44px;
    }

    .lg-foot a,
    .lg-alt a,
    .lg-links a {
        display: inline-block;
        padding: 12px 4px;
    }
}

/* ---- Minimum readable size ------------------------------------------------
   11px body copy is legible on a desktop monitor at arm's length and not on a
   phone. Only raises the floor; anything already larger is untouched. */
@media (max-width: 640px) {
    .tt1-j-meta,
    .tt1-j-card,
    .tt1-j-card * {
        font-size: 12px;
    }
}

/* ---- Horizontal scrollers -------------------------------------------------
   The signup step rail is wider than a phone and scrolls. Momentum scrolling
   plus a fade on the trailing edge so it reads as scrollable rather than cut
   off. */
@media (max-width: 767px) {
    .su-rail {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 85%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 85%, transparent 100%);
    }

        .su-rail > * {
            scroll-snap-align: start;
        }
}

/* Remaining sub-44px controls, found by measuring every page at 375px. Inline
   links inside running prose (the "Terms of Service" link in the consent
   sentence) are deliberately left alone - padding them would break the line. */
@media (max-width: 991px) {
    .lg-link,
    .su-back,
    .su-picker-foot a {
        display: inline-block;
        padding: 12px 4px;
        line-height: 1.2;
    }

    .ap-rail-home {
        min-height: 44px;
    }

    .btn:not(.btn-block) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn {
        min-height: 44px;
    }
}

/* Micro-labels that sit between 8px and 11.2px on the home and partners pages.
   8px in particular is decorative-only territory on a phone. */
@media (max-width: 640px) {
    .tt1-ch-row span,
    .tt1-stat-badge,
    .tt1-tag,
    .tt1-mini-meta,
    .tt-logo-item__note,
    .tt-logo-item__name,
    .tt-logo-item__type,
    .ap-fineprint {
        font-size: 12px;
    }
}

/* Dashboard / admin micro-labels, measured on the investor dashboard at 375px:
   status badges 10.4px, stat-card captions 11.2px, the application reference
   11px. All are load-bearing text, not decoration. */
@media (max-width: 640px) {
/* tradetech-member.css arrives via @section Styles, i.e. after this sheet, so a
   tie on specificity goes to it. These selectors are one level heavier than the
   rules they override (.tt-stat-card .label, .tt-app-card-ref). */
    .tt-admin-shell .badge,
    .tt-admin-shell .tt-stat-card .label,
    .tt-admin-shell .tt-app-card-ref,
    .tt-admin-shell .tt-sidebar-kicker,
    .tt-admin-shell .tt-user-role {
        font-size: 12px;
    }
}