/* #7: konto lehtede kujundus (registreerimine, kinnitamine, sisselogimine).
 *
 * Järgib disainikanvat `charts_ui/.../Meridian Account.dc.html`. Kanva
 * värvimuutujad ja IBM Plexi kiri ON juba tokens.css oma, seega ei tule siia
 * ühtegi uut värvi ega kirja: ainult see, mis on nendest kokku pandud.
 *
 * Kolm lehte jagavad ühte faili, sest nad on üks pind. Neljas (#21 parooli
 * taastamine) tuleb siia juurde ilma uue stiilita.
 *
 * Kaardi asemel on siin PÄRIS lehekülg: päis nagu rakenduses, siis vasakule
 * joondatud kitsas veerg. Kanva teeb sama, ja vahe loeb — keskele hõljuv kaart
 * ei näe välja nagu koht, kuhu sisse logitakse, vaid nagu dialoog millegi peal.
 */

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* ── Päis ──────────────────────────────────────────────────────────────── */
/* Sama mõõt mis rakenduse päisel (css/app.css): sisselogimine ei tohi olla
 * teistsugune toode kui see, kuhu ta viib. */

.auth-header {
    flex: none;
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 8px 18px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.brand { display: flex; align-items: center; gap: 9px; flex: none; }

/* #721: 18px on alla 22 piksli, seega VÄIKE optiline variant. Geomeetria elab
 * märgendis, siin on ainult mõõt (vt docs/meridian-brand-mark.md). */
.brand-mark { width: 18px; height: 18px; flex: none; display: block; }
.brand-name { font: 600 15.5px/1 var(--font-sans); letter-spacing: -.015em; }

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: none;
}

.theme-toggle {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.theme-toggle button {
    appearance: none;
    border: none;
    cursor: pointer;
    font: 500 11px/1 var(--font-mono);
    padding: 6px 9px;
    border-radius: 6px;
    background: transparent;
    color: var(--ink3);
}
.theme-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.identity {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 10px;
    border-left: 1px solid var(--line2);
}
.identity-name {
    font: 400 11.5px/1 var(--font-sans);
    color: var(--ink3);
    white-space: nowrap;
}
.identity-avatar {
    width: 27px;
    height: 27px;
    flex: none;
    border-radius: 50%;
    background: var(--surface2);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font: 600 10.5px/1 var(--font-mono);
    color: var(--ink2);
}

/* ── Veerg ─────────────────────────────────────────────────────────────── */

.auth-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 44px 20px 56px;
}

.auth-col { width: 100%; max-width: 392px; }
.auth-col.wide { max-width: 420px; }

/* Marsruudi silt: leht ütleb, kus ollakse. Kanval on ta iga vaate peal. */
.route-label {
    font: 600 10px/1 var(--font-mono);
    letter-spacing: .11em;
    color: var(--ink3);
    margin-bottom: 14px;
}

h1 {
    margin: 0 0 6px;
    font: 600 25px/1.15 var(--font-sans);
    letter-spacing: -.022em;
}

p.lead {
    margin: 0 0 22px;
    font: 400 13px/1.5 var(--font-sans);
    color: var(--ink2);
    text-wrap: pretty;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 18px;
}

.fields { display: flex; flex-direction: column; gap: 14px; }

/* ── Väljad ────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font: 500 11px/1 var(--font-sans); color: var(--ink2); }

.field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

input {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font: 400 13px/1 var(--font-sans);
    outline: none;
}
/* Aadress ja parool on mono: neid loetakse märgi kaupa, mitte sõnadena, ja
 * segiaetav l/1/I on siin see, mis saadab kinnitusmeili tühjusesse. */
input[type="email"], input[type="password"], input.mono { font-family: var(--font-mono); }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input.invalid { border-color: var(--down); }
input.invalid:focus { box-shadow: 0 0 0 3px var(--down-soft); }

.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { padding-right: 58px; }
.pw-toggle {
    position: absolute;
    right: 5px;
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    font: 500 10px/1 var(--font-mono);
    letter-spacing: .06em;
    color: var(--ink3);
    padding: 7px;
}

/* Tugevusmõõtja: neli riba pluss nimi. Ta EI otsusta midagi — parooli kõlblikkust
 * otsustab validatePassword ja lõpuks server. */
.pw-meter { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.pw-bars { flex: 1; display: flex; gap: 3px; }
.pw-bars span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.pw-bars span.on-1 { background: var(--down); }
.pw-bars span.on-2 { background: var(--fc); }
.pw-bars span.on-3, .pw-bars span.on-4 { background: var(--up); }
.pw-level {
    font: 500 10px/1 var(--font-mono);
    color: var(--ink3);
    min-width: 52px;
    text-align: right;
}
.pw-level.lvl-1 { color: var(--down); }
.pw-level.lvl-2 { color: var(--fc); }
.pw-level.lvl-3, .pw-level.lvl-4 { color: var(--up); }

/* ── Nupud ─────────────────────────────────────────────────────────────── */

.btn-primary {
    width: 100%;
    height: 38px;
    appearance: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    background: var(--ink);
    color: var(--bg);
    font: 600 13px/1 var(--font-sans);
}
.btn-primary:hover { opacity: .88; }
.btn-primary:disabled { opacity: .55; cursor: default; }

.btn-quiet {
    flex: none;
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    border-radius: 7px;
    height: 29px;
    padding: 0 11px;
    font: 500 11.5px/1 var(--font-sans);
}
.btn-quiet:disabled { color: var(--ink3); cursor: default; }

/* ── Teated ────────────────────────────────────────────────────────────── */
/* Vead seisavad väljade KOHAL, mitte teatemullina (#7). Mull kaob ise ära ja
 * jätab kasutaja vormi juurde, teadmata, mis valesti oli. */

.error {
    display: none;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 11px;
    margin-bottom: 14px;
    border: 1px solid var(--down);
    background: var(--down-soft);
    border-radius: 8px;
    font: 400 11.5px/1.45 var(--font-sans);
    color: var(--ink);
    text-wrap: pretty;
}
.error.show { display: flex; }
.error::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--down);
    margin-top: 5px;
}

.notice {
    display: none;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 11px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    background: var(--surface2);
    border-radius: 8px;
    font: 400 11.5px/1.45 var(--font-sans);
    color: var(--ink2);
    text-wrap: pretty;
}
.notice.show { display: flex; }

/* Väljaviga käib välja enda juurde: vormi ülemine kast on selle jaoks, mis ei
 * kuulu ühegi välja juurde (nt "kasutajanimi või aadress ei ole saadaval"). */
.field-error {
    display: none;
    font: 400 11px/1.3 var(--font-sans);
    color: var(--down);
}
.field-error.show { display: block; }

.hint { margin: 0; font: 400 11px/1.45 var(--font-sans); color: var(--ink3); }

.ok-line { display: flex; align-items: center; gap: 7px; }
.ok-line::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--up);
    flex: none;
}
.ok-line span { font: 400 11.5px/1.4 var(--font-sans); color: var(--up); }

/* Uuesti saatmise rida: märkus vasakul, nupp paremal, joon peal. */
.resend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line2);
}
.resend-note { font: 400 11.5px/1.35 var(--font-sans); color: var(--ink3); }

/* Abipaneel kaardi all. */
.help-panel {
    margin-top: 14px;
    padding: 12px 13px;
    border: 1px solid var(--line2);
    background: var(--surface2);
    border-radius: 10px;
}
.help-title {
    font: 600 10px/1 var(--font-mono);
    letter-spacing: .1em;
    color: var(--ink3);
    margin-bottom: 7px;
}
.help-body {
    font: 400 11.5px/1.5 var(--font-sans);
    color: var(--ink2);
    text-wrap: pretty;
}
.help-body code {
    font: 400 11.5px/1.5 var(--font-mono);
    color: var(--ink);
}

.alt {
    margin: 16px 0 0;
    text-align: center;
    font: 400 12px/1 var(--font-sans);
    color: var(--ink2);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

/* #23: "hoia see seade sisselogituna". Kastike ja tekst ühel real, tekst
 * klõpsatav (label ümbritseb mõlemat). */
.remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    cursor: pointer;
}
.remember input {
    width: 15px;
    height: 15px;
    flex: none;
    margin: 0;
    accent-color: var(--ink);
    cursor: pointer;
}
.remember span {
    font: 400 11.5px/1.35 var(--font-sans);
    color: var(--ink2);
}