/* ============================================================================
 * mobile-polish.css — Phase-2 mobile layout fixes (loaded LAST, additive only)
 * ----------------------------------------------------------------------------
 * Cross-cutting small-screen corrections driven by the Phase-0 audit
 * (.planning/audit/mobile-baseline.md). Never restyles desktop, never edits
 * the app.min.css bundle — every rule here is an override scoped to a media
 * query. Breadwinner pages receive CSS-only changes (no markup edits).
 * ========================================================================= */

/* ---- 1. Homepage IP table: kill the 375px horizontal overflow (audit P0-1).
 * The two-column details table forced ~395px of scroll width. table-layout:
 * fixed makes the columns honor the container; anywhere-wrap handles long
 * unbroken values (IPv6, user-agent strings). */
@media (max-width: 575.98px) {
    table.iptab {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }
    table.iptab th { width: 38%; }
    table.iptab td,
    table.iptab th { overflow-wrap: anywhere; }
}

/* ---- 2. Forms: 16px inputs end iOS focus-zoom on every tool (audit P1-7).
 * The bundle sets `.custom-form .form-control{font-size:14px}` at (0,2,0) in
 * its own mobile block — these selectors match that specificity and win by
 * load order (this file is last). */
@media (max-width: 992px) {
    /* !important: preventing iOS focus-zoom is a hard rule that a tool's own
     * (often monospace, sub-16px) input styling must not override. */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .form-control {
        font-size: 16px !important;
    }
}

/* ---- 3. Input groups (field + appended button) stack on small phones.
 * Side-by-side at 375px leaves a cramped field and a tiny button; stacked
 * full-width is easier to hit one-handed. */
@media (max-width: 479.98px) {
    .input-group { flex-wrap: wrap; }
    .input-group .form-control {
        flex: 1 1 100%;
        width: 100%;
        border-radius: var(--radius-base, 6px);
    }
    .input-group .input-group-append {
        width: 100%;
        margin-top: .5rem;
        margin-left: 0;
    }
    .input-group .input-group-append .btn {
        width: 100%;
        border-radius: var(--radius-base, 6px);
        min-height: 44px;
    }
}

/* ---- 4. Breadcrumbs: 44px tap area without changing the visual size
 * (audit P2-8). Padding expands the hit box; negative margin keeps layout. */
@media (max-width: 992px) {
    .breadcrumb li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-top: .35rem;
        padding-bottom: .35rem;
        margin-top: -.35rem;
        margin-bottom: -.35rem;
    }
}

/* ---- 4b. Wide page-specific data tables scroll instead of overflowing.
 * The brand .table / .iptab tables are already handled; these are bespoke
 * explainer/comparison tables the QA audit caught overflowing at 375px. */
@media (max-width: 768px) {
    #content table.data-explainer-table,
    #content table.password-table,
    #content table.comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ---- 5. Long monospace values never force sideways scroll. */
.result-kv__val--mono,
.result-code,
code {
    overflow-wrap: anywhere;
}
.result-code { white-space: pre-wrap; }

/* ---- 6. Result-card headers: title + pill stack instead of colliding. */
@media (max-width: 479.98px) {
    .result-card__header {
        flex-wrap: wrap;
        gap: .4rem;
    }
}

/* ---- 7. Monitor CTA + benchmark rows: full-width touch targets. */
@media (max-width: 479.98px) {
    .monitor-cta .btn {
        width: 100%;
        text-align: center;
        min-height: 44px;
    }
}

/* ---- 8. Footer links: roomier tap spacing on phones. */
@media (max-width: 575.98px) {
    .footer-links li a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: .25rem .35rem;
    }
}

/* ---- 9. Subtle touch feedback site-wide (Phase-3 pulled forward: cheap). */
@media (hover: none) {
    .btn:active,
    .result-card:active .copy-btn,
    nav#mainNav a:active {
        filter: brightness(.95);
    }
}