/* Login page v2 — fill the page with SEO + value props + auth widget.
 * Loaded in base.html alongside landing_v3_polish.css.
 */

.login-shell {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(28px, 4vw, 60px);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 60px) clamp(20px, 5vw, 60px);
    align-items: start;
}

.login-pitch-eyebrow {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.login-pitch-h1 {
    font-size: clamp(36px, 4.6vw, 56px);
    line-height: 1.05;
    margin: 0 0 16px;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.login-pitch-lead {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.55;
    margin: 0 0 24px;
    max-width: 560px;
}

.login-pitch-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    gap: 14px;
}
.login-pitch-bullets li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    background: var(--paper);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.login-pitch-bullets li:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink);
}
.login-pitch-bullets li strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}
.login-pitch-bullets li code {
    background: var(--ink);
    color: var(--neon-green);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}
.login-pitch-icon {
    font-size: 22px;
    line-height: 1;
    align-self: center;
}

.login-pitch-strip {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 13px;
}
.login-pitch-strip-link {
    color: var(--neon-pink);
    text-decoration: none;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 1px;
}
.login-pitch-strip-link:hover { background: var(--neon-yellow); }

.login-pitch-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.login-pitch-thumb {
    display: block;
    aspect-ratio: 9 / 16;
    background-size: cover;
    background-position: center;
    background-color: #000;
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform 0.12s ease;
}
.login-pitch-thumb:hover { transform: translate(-2px, -2px) rotate(-1deg); }
.login-pitch-thumb span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff;
    font-size: 11px;
    padding: 18px 8px 6px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.04em;
}

/* ── Right column: auth window ────────────────────────────────────── */
.login-card { position: sticky; top: 24px; }
.login-window { max-width: 100%; }
.login-window-body {
    text-align: center;
    padding: 24px 22px;
}
.login-card-brand {
    font-family: var(--font-heading), 'Impact', sans-serif;
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0 0 4px;
    color: var(--ink);
}
.login-card-brand .one {
    color: var(--neon-pink);
    text-shadow: 3px 3px 0 var(--ink);
    display: inline-block;
}
.login-card-tag {
    color: var(--neon-cyan);
    margin: 0 0 24px;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}
.login-error {
    background: rgba(255, 51, 102, 0.12);
    border: 2px solid var(--neon-pink);
    padding: 12px 14px;
    margin-bottom: 18px;
    color: var(--neon-pink);
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
}
.login-error-reason {
    margin-top: 6px;
    font-family: 'Courier New', monospace;
    word-break: break-word;
    color: var(--ink);
}
.login-error-tip {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}
.login-error code {
    background: var(--ink);
    color: var(--neon-green);
    padding: 1px 5px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.login-dev-panel {
    margin: 18px 0;
    padding: 16px;
    border: 2px solid var(--neon-yellow);
    background: rgba(251, 191, 36, 0.08);
    text-align: center;
}
.login-dev-tag {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--neon-yellow);
    margin-bottom: 12px;
}
.login-dev-form {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.login-dev-form .form-input {
    width: 160px;
    padding: 8px 10px;
    border: 2px solid var(--ink);
    font-family: inherit;
    text-align: center;
}

.login-or {
    margin: 18px 0;
    color: var(--text-muted);
    font-size: 13px;
    letter-spacing: 0.04em;
}
.login-tg-wrap { margin: 18px 0; }
.login-tg-help {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.login-google-wrap { margin: 14px 0; }
.btn-google {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: #fff;
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.05s ease;
}
.btn-google:hover { transform: translate(-1px, -1px); }
.btn-google:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.login-google-help {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.login-divider {
    border: 0;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
    margin: 22px 0 14px;
}
.login-new {
    font-size: 13px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    margin: 0 0 10px;
}
.login-new a {
    color: var(--neon-green);
    text-decoration: none;
    border-bottom: 2px solid var(--neon-green);
}
.login-trust {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    font-style: italic;
}

/* ── Below-the-fold "What is Cl1pper?" SEO block ──────────────────── */
.login-faq {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px);
    border-top: 4px solid var(--neon-pink);
}
.login-faq-h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    text-align: center;
    margin: 0 0 32px;
    color: var(--paper);
    font-weight: 900;
    letter-spacing: -0.02em;
}
.login-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
}
.login-faq-card {
    background: var(--paper);
    color: var(--ink);
    border: 3px solid var(--neon-pink);
    box-shadow: 6px 6px 0 var(--neon-pink);
    padding: 22px 20px;
}
.login-faq-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
}
.login-faq-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
}

/* ── Mobile pass for login ────────────────────────────────────────── */
@media (max-width: 860px) {
    .login-shell {
        grid-template-columns: 1fr;
        padding: 24px 16px;
        gap: 28px;
    }
    .login-card { position: static; }
    .login-pitch-bullets li { box-shadow: 4px 4px 0 var(--ink); }
}
@media (max-width: 480px) {
    .login-pitch-thumbs { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .login-pitch-thumb span { font-size: 10px; padding: 14px 6px 4px; }
    .login-pitch-bullets li {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .login-pitch-icon { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════════════
   Dark-theme patches — bits that hardcoded var(--ink) for text and
   went invisible when --ink flipped to near-black on dark backgrounds.
   ════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .login-card-brand {
    /* var(--ink) -> #050505 in dark = invisible on dark gray. Switch
       to cream (--text-primary) so "CL" and "PPER" stay readable. */
    color: var(--text-primary);
}
[data-theme="dark"] .login-card-brand .one {
    /* Drop shadow goes white-ish too so the rotated pink block reads
       cleanly against the dark window body. */
    text-shadow: 3px 3px 0 var(--text-primary);
}

[data-theme="dark"] .login-pitch-h1 {
    color: var(--text-primary);
}
[data-theme="dark"] .login-pitch-lead {
    color: var(--text-primary);
}
[data-theme="dark"] .login-pitch-bullets li {
    /* Bump border contrast so cards don't dissolve into the page bg. */
    border-color: var(--border-strong);
    box-shadow: 5px 5px 0 var(--shadow-ink);
    background: var(--bg-surface);
}
[data-theme="dark"] .login-pitch-bullets li:hover {
    box-shadow: 7px 7px 0 var(--shadow-ink);
}
[data-theme="dark"] .login-pitch-bullets li strong,
[data-theme="dark"] .login-pitch-bullets li {
    color: var(--text-primary);
}

[data-theme="dark"] .login-pitch-thumb {
    border-color: var(--border-strong);
    box-shadow: 5px 5px 0 var(--shadow-ink);
}

[data-theme="dark"] .login-divider {
    border-top-color: rgba(245, 240, 224, 0.15);
}

[data-theme="dark"] .login-error {
    /* Pink-on-pink-tint barely shows; lift to cream text. */
    color: var(--neon-pink);
}
[data-theme="dark"] .login-error-reason {
    color: var(--text-primary);
}
[data-theme="dark"] .login-error-tip {
    color: var(--text-muted);
}

/* "What is Cl1pper?" SEO block was already dark — but the cards inside
   used var(--paper) (light cream) which is fine. The card --ink text
   stays black on cream regardless of mode, so this section is one of
   the few places the explicit color stays correct. No change needed. */

/* Google button — white card on dark mode looked stark, soften it. */
[data-theme="dark"] .btn-google {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-strong);
    box-shadow: 4px 4px 0 var(--shadow-ink);
}