/* assets/css/public-phone.css - phone layout for the three public desktop pages
 *
 * register.php, privacy_policy.php and access.php are signed-out pages with their own inline
 * <style> block and no responsive rules at all. Nothing in their markup is changed: this file is
 * linked after that block and holds phone rules only, scoped to each page's own classes.
 *
 * What it fixes on a 375px screen: inputs at 16px so iOS does not zoom the page when one is
 * focused, one column instead of side-by-side fields, 48px touch targets, the desktop's 30-40px
 * padding brought down to something a phone can spare, and nothing wider than the screen.
 */
@media (max-width: 768px) {

    /* ---------- register.php ---------- */
    body { padding: 0; }

    .container {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }

    /* The plan picker is the second thing you need, not the first: the form comes up the screen */
    .plans-panel { padding: 20px 16px; }
    .plans-panel h2 { font-size: 1.25rem; }
    .plan-card { padding: 14px; margin-bottom: 10px; }
    .plan-name { font-size: 1.05rem; }

    .billing-toggle { gap: 6px; }
    .billing-opt { padding: 10px 4px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

    .form-panel { padding: 24px 16px 32px; }
    .form-header h1 { font-size: 1.4rem; }

    /* First and last name sit side by side at 375px and squeeze both to nothing */
    .form-row { display: block; }
    .form-row > div { width: 100%; }

    .form-group { margin-bottom: 14px; }
    .form-control {
        font-size: 16px;          /* under 16px iOS zooms the page on focus */
        padding: 12px;
        min-height: 48px;
    }
    .btn-submit { min-height: 48px; font-size: 16px; }
    .login-link { padding: 4px 0; }
    .login-link a { display: inline-block; padding: 10px 4px; }

    /* ---------- privacy_policy.php ---------- */
    /* The card sits in a wrapper with an inline padding of 20px, which only !important can reach;
       with the card's own padding that was 60px of gutter on a 375px screen. */
    body.app-interface > div { padding: 10px !important; }
    .policy-container {
        margin: 0 auto;
        padding: 20px 16px 32px;
        border-radius: 0;
        box-shadow: none;
        max-width: 100%;
    }
    .policy-container h1 { font-size: 1.5rem; }
    .policy-container h2 { font-size: 1.15rem; }
    .policy-container p, .policy-container li { font-size: 1rem; }
    .policy-container ul { padding-left: 18px; }
    .back-link { padding: 10px 0; }
    /* A long email address or URL in the policy text is the one thing that can widen the page */
    .policy-content { overflow-wrap: break-word; word-break: break-word; }

    /* ---------- access.php ---------- */
    .access-card {
        width: 100%;
        max-width: 100%;
        padding: 28px 20px;
        border-radius: 0;
        box-shadow: none;
    }
    .access-card h1 { font-size: 1.35rem; }
}