/* ============================================================================
   register-mobile.css — Mobile overrides for register.html
   Loaded via: <link media="screen and (max-width: 640px)">
   No @media wrapper needed — the media attribute on the link tag handles it.
   ============================================================================ */

/* register.html uses portal.css + inline <style> for .register-box etc.
   We override the overlay/card measurements for comfortable mobile use. */

body {
    padding: 8px;
}

/* The login-overlay is used as the page container */
.login-overlay {
    align-items: flex-start;
    padding-top: 24px;
    overflow-y: auto;
}

.register-box {
    padding: 28px 20px;
    max-width: 95vw;
    border-radius: 16px;
    margin: 0 auto;
}

.register-box h2 {
    font-size: 1.5em;
    margin-bottom: 4px;
}

/* Inputs: 16px prevents iOS auto-zoom */
.register-form input {
    font-size: 16px !important;
    padding: 13px 14px !important;
    min-height: 48px;
}

/* Submit button: full width tap target */
.register-form button {
    min-height: 48px;
    font-size: 15px;
    padding: 14px;
}

/* Subjects grid: single column on mobile */
.subjects-grid {
    grid-template-columns: 1fr;
}

.subject-option {
    padding: 12px 14px;
    min-height: 44px;
}