/* ═══════════════════════════════════════════════════════════════════════════
   AUTH-SIDORNAS FORMSPRÅK

   De fem sidorna där någon står utanför appen och ska in: inloggning,
   registrering, glömt lösenord, nytt lösenord och e-postverifiering.

   Greppet: LÖFTET till vänster, DÖRREN till höger. Vänsterspalten svarar på
   "varför", formuläret på "hur". Ett ensamt fält mitt på skärmen svarar inte
   på varför någon skulle fylla i det – och det är första intrycket som avgör
   om någon blir medlem.

   ⚠️ FILEN KOM TILL FÖR ATT STOPPA EN DUPLICERING.
   Stilarna låg inbakade i login.html OCH register.html – 417 rader, tecken
   för tecken identiska. Med tre sidor till hade det blivit fem kopior av
   samma fil. Projektets dyraste buggar har alla haft samma form: månadsnamnen
   låg hårdkodade på nio ställen, veckodagarna på åtta, och en ändring på ett
   ställe missade de andra tyst. En rättelse här ska gälla alla fem sidor.

   Allt är byggt av delar som redan finns i Dectorium: kickern med sitt
   gradientstreck, kortens 26px-radie och fönsterskugga, fältens gråa botten
   med korallring vid fokus, och sifferstilen från Om oss.
   Ingen ny färg, inget nytt typsnitt.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --korall: #ff4d7a;
    --korall-ljus: #ff9ebc;
    --grafit: #4a4a4a;
    --grafit-mork: #3a3a3a;
    --jade: #00b894;
}

/* style.css låser sidan till chattens helskärmsläge. Två spalter behöver
   kunna rulla på låga fönster. */
html, body {
    height: auto !important;
    overflow: visible !important;
    overflow-y: auto !important;
    position: static !important;
    width: 100% !important;
    min-height: 100vh;
}

body {
    display: block !important;
    padding: 0 !important;
    background: #f5f5f5;
}

/* ── Uppställningen ──────────────────────────────────────────────────────
   Löftet får mer plats än formuläret (1.05fr mot 420px). Formuläret är litet
   av design: ju smalare, desto mindre arbete ser det ut att vara. */
.auth-layout {
    max-width: 1040px;
    margin: 0 auto;
    padding: 118px 24px 64px;
    display: grid;
    grid-template-columns: 1.05fr 420px;
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
    min-height: 100vh;
}

/* Kortet ensamt, centrerat. Används när löftet inte längre är sant: en
   återställningslänk som gått ut ska inte stå bredvid råd om hur man väljer
   ett bra lösenord. Då är beskedet det enda som gäller. */
.auth-layout.ensam {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
    max-width: 520px;
}

/* ── Vänster: löftet ─────────────────────────────────────────────────────── */

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--korall);
    margin-bottom: 18px;
}

.kicker::before {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--korall), var(--korall-ljus));
}

/* De enda stora rubrikerna på hela sajten. Appsidorna har inga sedan
   31 juli – men här är det ett första intryck, inte ett verktyg. */
.auth-rubrik {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--grafit-mork);
    margin: 0 0 18px;
    max-width: 15ch;
}

.auth-ingress {
    font-size: 16.5px;
    line-height: 1.6;
    color: #6d6d6d;
    max-width: 46ch;
    margin: 0 0 38px;
}

/* ── Tre steg, med sifferstilen från Om oss ──────────────────────────────── */
.steg {
    display: grid;
    gap: 22px;
    max-width: 44ch;
    padding: 0;
    margin: 0;
}

.steg li {
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
}

.steg-nr {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--korall);
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
}

.steg-text {
    font-size: 15.5px;
    line-height: 1.55;
    color: #5f5f66;
}

.steg-text b {
    display: block;
    font-weight: 700;
    font-size: 16px;
    color: var(--grafit-mork);
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}

/* ── Chattbubblan ────────────────────────────────────────────────────────
   Dectorium ÄR ett samtal. En enda replik visar produkten snabbare än tre
   rader beskrivande text. Formen är chattens egen. */
.bubbla {
    background: #fff;
    border-radius: 20px 20px 20px 6px;
    padding: 20px 22px;
    max-width: 40ch;
    font-size: 15.5px;
    line-height: 1.55;
    color: #4f4f57;
    box-shadow: 0 14px 40px -18px rgba(45, 45, 52, 0.45),
                0 0 0 1px rgba(45, 45, 52, 0.05);
}

.bubbla-avsandare {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--korall);
    margin-bottom: 11px;
}

/* Samma andande punkt som chatten använder när dietisten tänker. */
.bubbla-prick {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--korall);
    animation: andas 2.6s ease-in-out infinite;
}

@keyframes andas {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}

/* ── Höger: kortet ──────────────────────────────────────────────────────── */
.auth-kort {
    background: #fff;
    border-radius: 26px;
    padding: 38px 34px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.auth-kort-rubrik {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--grafit);
    margin: 0 0 24px;
}

/* Kortets egen ingress. Glömt lösenord och Verifiera behöver en rad som
   förklarar vad fältet vill ha – inloggning klarar sig utan. */
.auth-kort-ingress {
    font-size: 14.5px;
    line-height: 1.55;
    color: #7a7a84;
    margin: -16px 0 24px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--grafit);
}

.form-group input {
    width: 100%;
    padding: 15px 18px;
    border: 1.5px solid #e7e7ea;
    border-radius: 14px;
    background: #f4f5f7;
    font-size: 15px;
    font-family: inherit;
    color: var(--grafit);
    box-sizing: border-box;
    transition: border-color 0.22s ease, box-shadow 0.22s ease,
                background 0.22s ease;
}

.form-group input::placeholder {
    color: #b4b4bb;
}

/* Korallringen ersätter webbläsarens blå outline – samma som Profil,
   Fokus och Kontakt. */
.form-group input:focus {
    outline: none;
    border-color: var(--korall);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 77, 122, 0.13);
}

.btn-submit {
    width: 100%;
    padding: 16px;
    margin-top: 6px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(145deg, #55555e, var(--grafit-mork));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-family: inherit;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 6px 18px -6px rgba(45, 45, 52, 0.75);
    transition: transform 0.22s ease, box-shadow 0.22s ease,
                background 0.22s ease;
}

.btn-submit:hover:not(:disabled) {
    background: linear-gradient(145deg, #62626c, var(--grafit));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
                0 10px 24px -8px rgba(45, 45, 52, 0.8);
    transform: translateY(-2px);
}

.btn-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.18);
}

.btn-submit:focus-visible {
    outline: 2px solid var(--korall);
    outline-offset: 3px;
}

/* Knappen stängs av medan svaret hämtas. Utan den här regeln såg den
   klickbar ut hela tiden – samma fel som chattens skicka-knapp hade. */
.btn-submit:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
}

/* ── Länkar och småtext ──────────────────────────────────────────────────
   Var bootstrap-rött (#dc3545) – en färg som inte finns någon annanstans
   i Dectorium sedan juli. */
.forgot-password {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: #8a8a92;
    text-decoration: none;
    transition: color 0.2s ease;
}

.forgot-password:hover {
    color: var(--korall);
}

.auth-links {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #ededf1;
    text-align: center;
    font-size: 14.5px;
    color: #8a8a92;
}

.auth-links a {
    color: var(--korall);
    font-weight: 600;
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.villkorstext {
    margin: 22px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #9a9aa2;
    text-align: center;
}

.villkorstext a {
    color: #7a7a84;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.villkorstext a:hover {
    color: var(--korall);
}

/* ── Meddelanderutor ─────────────────────────────────────────────────────── */
.error-msg,
.success-msg {
    display: none;
    margin-bottom: 20px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.error-msg {
    background: rgba(255, 77, 122, 0.09);
    border-left: 3px solid var(--korall);
    color: #b03156;
}

.success-msg {
    background: rgba(0, 184, 148, 0.1);
    border-left: 3px solid var(--jade);
    color: #0a7a63;
}

/* ── Verifieringskoden ───────────────────────────────────────────────────
   Sex siffror ur ett mejl. Fältet ska se ut som sex rutor att fylla i, inte
   som ett vanligt textfält – därför den breda teckenspärren och tabular-nums
   så att siffrorna inte hoppar i sidled medan man skriver.

   ⚠️ `letter-spacing` skjuter texten åt vänster eftersom mellanrummet läggs
   EFTER sista tecknet. `text-indent` på samma värde väger upp det, annars
   sitter koden aldrig riktigt mitt i fältet. */
.kod-input {
    width: 100%;
    padding: 17px 16px;
    border: 1.5px solid #e7e7ea;
    border-radius: 14px;
    background: #f4f5f7;
    color: var(--grafit-mork);
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.22s ease, box-shadow 0.22s ease,
                background 0.22s ease;
}

.kod-input::placeholder {
    color: #d2d2d8;
    font-weight: 600;
}

.kod-input:focus {
    outline: none;
    border-color: var(--korall);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 77, 122, 0.13);
}

/* ── Besked som tar över hela kortet ─────────────────────────────────────
   "E-post verifierad" och "Ogiltig länk". Var 60–80px emoji (✅ ⚠️), vilket
   inte finns någon annanstans i Dectorium – och som dessutom ritas olika i
   varje operativsystem. Nu en ritad ring i sidans egna färger. */
.besked {
    text-align: center;
}

.besked-ikon {
    width: 62px;
    height: 62px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    animation: stigFram 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

.besked-ikon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.besked-ikon.klar {
    background: rgba(0, 184, 148, 0.12);
}

.besked-ikon.klar svg {
    stroke: var(--jade);
}

.besked-ikon.varning {
    background: rgba(255, 77, 122, 0.1);
}

.besked-ikon.varning svg {
    stroke: var(--korall);
}

@keyframes stigFram {
    from { opacity: 0; transform: scale(0.72); }
    to   { opacity: 1; transform: none; }
}

.besked-rubrik {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--grafit-mork);
    margin: 0 0 10px;
}

.besked-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: #7a7a84;
    margin: 0 0 26px;
}

/* Knapp som är en länk. Samma yta som .btn-submit, men `a` ärver varken
   knappens typsnitt eller dess blockvisning. */
.btn-lank {
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(145deg, #55555e, var(--grafit-mork));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 6px 18px -6px rgba(45, 45, 52, 0.75);
    transition: transform 0.22s ease, box-shadow 0.22s ease,
                background 0.22s ease;
}

.btn-lank:hover {
    background: linear-gradient(145deg, #62626c, var(--grafit));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
                0 10px 24px -8px rgba(45, 45, 52, 0.8);
    transform: translateY(-2px);
}

.btn-lank:focus-visible {
    outline: 2px solid var(--korall);
    outline-offset: 3px;
}

/* ── Punktlista i vänsterspalten ─────────────────────────────────────────
   Används där löftet är råd snarare än steg: vad som gör ett bra lösenord,
   var mejlet kan ha tagit vägen. Bocken är ritad, inte ett listtecken –
   `list-style` kan inte färgsättas separat från texten. */
.punkter {
    display: grid;
    gap: 15px;
    max-width: 44ch;
    padding: 0;
    margin: 0;
}

.punkter li {
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: start;
    font-size: 15.5px;
    line-height: 1.55;
    color: #5f5f66;
}

.punkter svg {
    width: 17px;
    height: 17px;
    margin-top: 3px;
    fill: none;
    stroke: var(--korall);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Sidan tonar in uppifrån och ned ─────────────────────────────────────── */
.fade-in {
    opacity: 0;
    animation: stigUpp 0.62s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
}

@keyframes stigUpp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.13s; }
.d3 { animation-delay: 0.21s; }
.d4 { animation-delay: 0.29s; }
.d5 { animation-delay: 0.37s; }

@media (prefers-reduced-motion: reduce) {
    .fade-in { opacity: 1; animation: none; }
    .bubbla-prick,
    .besked-ikon { animation: none; }
}

/* ── Smalare fönster ─────────────────────────────────────────────────────
   Spalterna staplas och löftet hamnar FÖRST. Den som landar här på mobil
   ska förstå vad tjänsten är innan formuläret möter dem. */
@media (max-width: 900px) {
    .auth-layout {
        grid-template-columns: 1fr;
        max-width: 520px;
        padding: 96px 20px 48px;
        gap: 34px;
        align-items: stretch;
    }

    .auth-rubrik {
        font-size: clamp(26px, 7vw, 32px);
        max-width: none;
    }

    .auth-ingress {
        margin-bottom: 26px;
        max-width: none;
    }

    .steg {
        gap: 16px;
        max-width: none;
    }

    .punkter,
    .bubbla {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .auth-layout {
        padding: 88px 15px 40px;
    }

    .auth-kort {
        padding: 28px 20px;
        border-radius: 20px;
    }

    /* 16px hindrar iOS från att zooma in vid fokus. */
    .form-group input {
        font-size: 16px;
    }

    .kod-input {
        font-size: 23px;
        letter-spacing: 0.34em;
        text-indent: 0.34em;
    }
}