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

/* The login card in index.html uses inline <style> with .login-card class.
   We override key measurements here for comfort on small screens. */

body {
    padding: 16px;
}

.login-card {
    padding: 36px 24px;
    max-width: 95vw;
    border-radius: 14px;
}

.login-card img {
    height: 52px;
    margin-bottom: 18px;
}

.login-card h1 {
    font-size: 18px;
    margin-bottom: 4px;
}

.login-card p {
    font-size: 13px;
    margin-bottom: 24px;
}

/* Inputs: 16px prevents iOS auto-zoom */
.login-card input {
    font-size: 16px;
    padding: 14px 14px;
    margin-bottom: 10px;
    min-height: 48px;
}

/* Button: full width, large tap target */
.login-card button {
    min-height: 48px;
    font-size: 15px;
    padding: 14px;
    margin-top: 4px;
}