/* ==========================================================================
   Auth-perhe · sivun kuori (login, salasana, aktivointi, kutsu, SSO-linkitys)

   Mockup: docs/console/ilmekirja/auth.html
   Käyttää jaettua .ilme-komponenttikirjastoa (components/ilme.css) mustalle
   painikkeelle, linkeille, tilamerkeille ja painotetulle kappaleelle —
   .ilme.ilme--embed poistaa sen oman 1060px-dokumenttigridin, koska tämä
   sivu on kapea yksi lomake, ei monilohkoinen asiakirja (STYLEGUIDE ei
   määrittele auth-perheelle omaa sivurakennetta; Kare hyväksyi 2026-08-24
   kapean keskitetyn pinon täyden .ph-dokumenttigridin sijaan).

   .fieldset/.fields/.field/.input eivät vielä ole muualla sovelluksessa
   toteutettuja jaettuja komponentteja (Asetukset odottaa yhä migraatiota) —
   tämä tiedosto on niiden ensimmäinen sovellustoteutus STYLEGUIDE §11.10:n
   mukaan. Kun Asetukset migroidaan, nämä kannattaa siirtää jaettuun
   komponenttitiedostoon.
   ========================================================================== */

/* ── 1. Layout ────────────────────────────────────────────────────────── */

.auth-body {
    background: var(--paper);
    color: var(--ink);
}

.autil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1060px;
    margin: 0 auto;
    padding: 28px 40px 0;
}

.autil .logo { width: 108px; height: 21px; display: block; }

.ashell {
    min-height: calc(100dvh - 78px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 40px 72px;
}

.acol { width: 100%; max-width: 440px; }

.asso { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.ilme .btn.sec.full { width: 100%; justify-content: center; height: 40px; }
.ilme .btn.sec.full i.fa-brands { color: inherit; opacity: .9; }

.adiv { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; }
.adiv::before, .adiv::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.fieldset { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.fields { display: grid; grid-template-columns: 1fr; gap: 18px; }
.fields.two { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; }
.field p.val { margin: 0; font-size: 14px; color: var(--ink); }
@media (max-width: 480px) { .fields.two { grid-template-columns: 1fr; } }

.input-wrap { position: relative; }
.input {
    height: 40px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    padding: 0 14px;
    outline: 0;
    transition: border-color .15s var(--ease);
}
.input:focus { border-color: var(--ink-3); }
.input::placeholder { color: var(--ink-3); }
.input[disabled] { color: var(--ink-3); background: var(--wash); }
.input.is-invalid { border-color: var(--rust); }
.input.has-eye { padding-right: 44px; }
/* .input-wrap-etuliite: .ilme button {border:0;padding:0;color:inherit} on
   spesifisyydeltään (0,1,1), pelkkä .eye (0,1,0) häviäisi sille. */
.input-wrap .eye {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink-3);
}

.ilme .btn.full { width: 100%; margin-top: 22px; }

.afoot { margin-top: 26px; font-size: 13.5px; color: var(--ink-3); }
.afoot p { margin: 0 0 8px; }
.afoot p:last-child { margin-bottom: 0; }

/* Vaatimuslista (salasanan resetointi) — tilamerkki per vaatimus, ei
   jatkuvaa väripalkkia (§17.13 koskee STYLEGUIDEn hengessä myös tätä:
   ei mitattua täyttöä, vain diskreetit merkit). */
.areqs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* Kutsun/SSO-linkityksen identiteettirivi: organisaation merkki + nimi +
   kutsuja, staattisena metatietona ennen lomaketta. Avatar 24px per
   STYLEGUIDE §7. */
.aorg { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.aorg__mark {
    width: 24px; height: 24px; border-radius: 6px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--wash); color: var(--ink-3);
    font: 500 12px var(--mono);
    overflow: hidden;
}
.aorg__mark img { width: 100%; height: 100%; object-fit: contain; }
.aorg__name { font-size: 13.5px; font-weight: 500; color: var(--ink); }

.asteps { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.astep { display: flex; align-items: baseline; gap: 12px; font-size: 13px; color: var(--ink-2); }
.astep .mono { min-width: 18px; }

/* ── 2. Typografia ────────────────────────────────────────────────────── */

.aeye { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.acol h1 { margin: 0 0 10px; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -.022em; color: var(--ink); }
.acol p.intro { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.acol p.meta { margin: 14px 0 0; font: 400 12.5px var(--mono); color: var(--ink-3); }

.field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: 12.5px; color: var(--ink-3); }
.field .form-error { font-size: 12.5px; color: var(--rust-deep); }

/* Flash-viesti: oma riippumaton tila riippumatta siitä mikä sitä
   edeltää (esim. .adiv-jakoviiva, jonka margin-bottom on 0). */
.aflash { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }

/* ── 3. Väri / tilat ──────────────────────────────────────────────────── */

.eye:hover { color: var(--ink); }

/* ── 4. Kielivalikko (uusi komponentti, ei vielä STYLEGUIDEssa) ─────────
   Paperi + 1px reuna, EI varjoa: varjo on varattu vain dokumentin
   paperille ja modaalille (STYLEGUIDE §7, §11.12). */
/* .lang-etuliite kaikkialla: .ilme button {border:0;padding:0;color:inherit;
   font:inherit} on spesifisyydeltään (0,1,1) ja voittaisi pelkän luokan. */
.lang { position: relative; }
.lang .lang__btn {
    display: flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 4px; border: 0; background: none; cursor: pointer;
    color: var(--ink-3); font: 500 13px var(--sans);
}
.lang__btn:hover, .lang__btn[aria-expanded="true"] { color: var(--ink); }
.lang__btn i.fa-sharp { font-size: 12px; transition: transform .15s var(--ease); }
.lang__btn[aria-expanded="true"] i { transform: rotate(180deg); }
.lang__menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 200px;
    max-height: var(--login-lang-menu-max-height, 320px);
    overflow-y: auto;
    background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
    padding: 0; z-index: var(--z-dropdown, 100);
    animation: langIn .15s var(--ease) both;
    /* Kapea tokenoitu vieritin natiivin harmaan sijaan. */
    scrollbar-width: thin;
    scrollbar-color: var(--line-dash) transparent;
}
.lang__menu::-webkit-scrollbar { width: 6px; }
.lang__menu::-webkit-scrollbar-track { background: transparent; }
.lang__menu::-webkit-scrollbar-thumb { background: var(--line-dash); border-radius: 3px; }
.lang__menu::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
.lang.is-dropup .lang__menu { top: auto; bottom: calc(100% + 6px); }
.lang:not(.is-open) .lang__menu { display: none; }
/* Sama sisääntulokonventio kuin muualla sovelluksessa (§13.1): nousee
   paikalleen, ei koskaan lasku ylhäältä. */
@keyframes langIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* Rivin sääntö · STYLEGUIDE §11.12: valittu rivi on --wash + 2px --ink
   vasemmalla, ei ikonia — vihreää ei käytetä valintaan, se ei ole
   edistymistä. Sama sääntö kuin hakupaletissa. */
.lang__menu .lang__opt {
    display: flex; align-items: center;
    width: 100%; height: 40px; padding: 0 16px;
    border: 0; border-bottom: 1px solid var(--line-2); border-left: 2px solid transparent;
    background: none; cursor: pointer;
    font-size: 13.5px; color: var(--ink-2);
}
.lang__menu .lang__opt:last-child { border-bottom: 0; }
.lang__opt:hover { background: var(--wash); color: var(--ink); }
.lang__opt[aria-checked="true"] {
    background: var(--wash);
    border-left-color: var(--ink);
    color: var(--ink);
    font-weight: 500;
}

/* ── 5. Hover / fokus ─────────────────────────────────────────────────── */

.eye:focus-visible,
.lang__btn:focus-visible,
.lang__opt:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── 6. Media queryt ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .autil { padding: 22px 22px 0; }
    .ashell { padding: 28px 22px 56px; }
}

/* ── 7. prefers-reduced-motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .lang__btn i { transition: none; }
    .lang__menu { animation: none; }
}