/* Station 12 Portal — auth.css · Designsystem 2.0
   Delad stil för login / registrering / lösenordsflöden.
   Samma identitet som app.css: kommandonavy + brandrött, varm ljus sida. */

:root {
    --a-red: var(--fire-red);
    --a-red-dark: var(--fire-red-dark);
    --a-navy: #191d29;
    --a-navy-3: #10131b;
    --a-amber: #d98e00;
    --a-bg: #f4f3f0;
    --a-surface: #ffffff;
    --a-ink: #15181f;
    --a-ink-2: #4b505c;
    --a-ink-3: #8b909c;
    --a-line: #e8e6e1;
}

* { box-sizing: border-box; }
body {
    font-family: 'Inter', system-ui, sans-serif;
    margin: 0; min-height: 100vh;
    color: var(--a-ink);
    background: var(--a-bg);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}
h1, h2, h3 { font-family: 'Inter', sans-serif; letter-spacing: -0.02em; }

/* ===== Split-layout (login / registrering) ===== */
.auth-wrap { display: flex; min-height: 100vh; }

.auth-hero {
    flex: 1.15; position: relative; overflow: hidden;
    background-image:
        radial-gradient(700px 320px at 85% -10%, rgba(200,16,46,0.45), transparent 60%),
        radial-gradient(500px 300px at -10% 115%, rgba(217,142,0,0.16), transparent 60%),
        linear-gradient(115deg, rgba(16,19,27,0.93) 0%, rgba(25,29,41,0.8) 50%, rgba(16,19,27,0.66) 100%),
        var(--auth-photo, linear-gradient(135deg, var(--a-navy), var(--a-navy-3)));
    background-size: cover; background-position: center;
    color: #fff; padding: 44px 48px;
    display: flex; flex-direction: column; justify-content: space-between;
    text-shadow: 0 1px 10px rgba(16,19,27,0.45);
}
.auth-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(-45deg, transparent 0 16px, rgba(255,255,255,0.014) 16px 17px);
}
.auth-hero > * { position: relative; z-index: 1; }

.auth-hero .brand { display: flex; align-items: center; gap: 13px; }
.auth-hero .brand .logo {
    width: 52px; height: 52px; border-radius: 13px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.auth-hero .brand .logo img { width: 40px; }
.auth-hero .brand h3 { margin: 0; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.auth-hero .brand .sub { font-size: .72rem; opacity: .65; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }

.auth-hero .pitch h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; line-height: 1.08; margin: 0; max-width: 540px; }
.auth-hero .pitch p { font-size: .98rem; opacity: .82; margin-top: 14px; max-width: 500px; line-height: 1.6; }

.auth-feats { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.auth-feats .feat {
    display: flex; align-items: center; gap: 11px;
    font-size: .85rem; font-weight: 500; color: rgba(232,236,244,0.9);
}
.auth-feats .feat i {
    width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0;
    background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; color: #ffb3c0;
}
.auth-hero .footer-meta { font-size: .74rem; opacity: .5; }

/* ===== Formulärsidan ===== */
.auth-side {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: var(--a-bg);
    background-image: radial-gradient(800px 400px at 110% -10%, rgba(200,16,46,0.05), transparent 60%);
    padding: 30px;
}
.auth-card {
    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: 18px; padding: 40px 36px;
    box-shadow: 0 2px 6px rgba(21,24,31,0.05), 0 24px 48px -16px rgba(16,19,27,0.18);
    width: 100%; max-width: 420px;
}
.auth-card.auth-card-wide { max-width: 460px; }
.auth-card h2 { font-weight: 700; margin: 0 0 4px; font-size: 1.45rem; }
.auth-card .subtitle { color: var(--a-ink-2); font-size: .88rem; margin-bottom: 26px; }

.auth-card .form-label {
    font-size: .72rem; font-weight: 700; color: var(--a-ink-2);
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.auth-card .form-control {
    border-radius: 10px; border: 1px solid var(--a-line);
    background: #fdfdfc;
    padding: 12px 14px; font-size: .95rem; transition: border-color .15s, box-shadow .15s;
}
.auth-card .form-control:focus {
    border-color: var(--a-red);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.12);
    background: #fff;
}

.btn-auth {
    background: var(--a-red); color: #fff; border: none;
    border-radius: 10px; padding: 13px;
    font-weight: 700; width: 100%; font-size: .92rem; letter-spacing: .05em;
    font-family: 'Inter', sans-serif;
    transition: background .15s, transform .15s, box-shadow .15s;
    cursor: pointer;
}
.btn-auth:hover { background: var(--a-red-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(200,16,46,0.28); }

.auth-link { color: var(--a-red); font-weight: 600; text-decoration: none; }
.auth-link:hover { color: var(--a-red-dark); text-decoration: underline; }

.alert { border: none; border-radius: 10px; padding: 11px 15px; font-size: .88rem; }

/* Honeypot: osynligt för människor, botar fyller i det → blockeras tyst */
.s12-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== Centrerat kort (glömt / återställ) ===== */
.auth-mini-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 30px;
    background-image:
        radial-gradient(600px 300px at 85% -10%, rgba(200,16,46,0.4), transparent 60%),
        linear-gradient(115deg, rgba(16,19,27,0.9) 0%, rgba(25,29,41,0.78) 100%),
        var(--auth-photo, linear-gradient(135deg, var(--a-navy), var(--a-navy-3)));
    background-size: cover; background-position: center;
}
.auth-mini-body .auth-card { max-width: 440px; }
.auth-mini-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.auth-mini-brand img { width: 34px; height: 34px; object-fit: contain; }
.auth-mini-brand span { font-family: 'Inter', sans-serif; font-weight: 700; font-size: .95rem; color: var(--a-ink); }
.auth-card .icon-badge {
    width: 56px; height: 56px; border-radius: 15px;
    background: #fbeaed; color: var(--a-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem; margin: 0 auto 16px;
}
.auth-card h2.center { text-align: center; }
.auth-card .subtitle.center { text-align: center; }

/* ===== Mobil ===== */
@media (max-width: 900px) {
    .auth-wrap { flex-direction: column; }
    .auth-hero { padding: 26px 24px; min-height: 0; }
    .auth-hero .pitch h1 { font-size: 1.55rem; }
    .auth-hero .pitch p, .auth-feats { display: none; }
    .auth-hero .footer-meta { display: none; }
    .auth-side { padding: 22px 16px 44px; }
    .auth-card { padding: 30px 24px; }
}