/* Biblioteca Digitală ANEVAR — pagini de autentificare (server-rendered).
   Paletă reutilizată din POC (public/assets/css/app.css) pentru consistență. */

/* Culorile de brand vin din `tokens.css` (US-051 FR-1) — vezi nota din app.css. */
:root {
    --accent: var(--anevar-primary);
    --accent-hover: var(--anevar-primary-hover);
    --accent-soft: var(--anevar-primary-soft);
    --bg: var(--anevar-bg-subtle);
    --card-bg: var(--anevar-surface);
    --text: var(--anevar-text);
    --text-muted: var(--anevar-text-muted);
    --border: var(--anevar-border);
    --error-bg: var(--anevar-primary-soft);
    --error-text: var(--anevar-primary);
    --info-bg: #e8f0fe;
    --info-text: #1a5fb4;
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 10px;
    --shadow: var(--anevar-shadow);
}

* { box-sizing: border-box; }

.auth-body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.auth-shell {
    width: 100%;
    max-width: 860px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 24px;
}

.auth-logo {
    display: inline-block;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--accent);
    font-size: 26px;
}

.auth-sub {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 2px;
}

.auth-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.auth-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 26px;
}

.auth-card--primary {
    border-top: 4px solid var(--accent);
}

.auth-card--single {
    max-width: 460px;
    margin: 0 auto;
}

.auth-card__title {
    margin: 0 0 4px;
    font-size: 20px;
}

.auth-card__hint {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 13px;
}

.auth-form { display: flex; flex-direction: column; }

/* US-041 ENH-109 — spațiere lizibilă între câmpuri.

   Înainte, distanța dintre un câmp și eticheta următoare era doar cele 12px din
   `margin-top`-ul etichetei, iar mesajele de ajutor/eroare se lipeau de input cu
   `margin-top` NEGATIV. Pe formularul de înregistrare (șapte câmpuri, cu hint sub
   trei dintre ele) rezultatul era un bloc compact în care nu se vedea unde se
   termină un câmp și începe următorul.

   Regula acum: eticheta deschide un câmp nou (spațiu MARE deasupra), iar hint-ul și
   eroarea aparțin câmpului de deasupra lor (spațiu MIC). Fără marje negative — ele
   făceau ca ordinea în DOM să nu mai corespundă grupării vizuale. */
.auth-label {
    font-size: 13px;
    font-weight: 600;
    margin: 22px 0 7px;
}

/* Primul câmp nu are nevoie de aer deasupra: cardul are deja padding. */
.auth-form > .auth-label:first-of-type {
    margin-top: 4px;
}

/* Grup de câmp înfășurat (ex. textul liber de la „Altele", US-041 ENH-110): se
   comportă ca elementele nude din formular, ca marjele de mai sus să funcționeze
   identic înăuntru. `hidden` trebuie să învingă `display:flex` — de aici regula
   explicită, altfel câmpul ascuns din JS ar rămâne vizibil. */
.auth-field {
    display: flex;
    flex-direction: column;
}
.auth-field[hidden] {
    display: none;
}

.auth-input {
    font-family: inherit;
    font-size: 15px;
    padding: 10px 12px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.auth-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* US-025 — text ajutător discret sub câmpul de identificator. */
.auth-help {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ENH-109 — butonul de trimitere e o acțiune, nu al optulea câmp: se detașează
   vizibil de ultimul grup, altfel pare că mai continuă formularul. */
.auth-btn {
    margin-top: 28px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #7a828c;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}

.auth-btn:hover { background: #656d77; }

.auth-btn--primary { background: var(--accent); }
.auth-btn--primary:hover { background: var(--accent-hover); }

.auth-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
}
.auth-note a, .auth-links a { color: var(--accent); text-decoration: none; }
.auth-note a:hover, .auth-links a:hover { text-decoration: underline; }

.auth-links {
    margin-top: 18px;
    font-size: 13px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.auth-links__sep { color: #ccc; }
.auth-link--muted { color: var(--text-muted) !important; }

.auth-alert {
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 18px;
}
.auth-alert--error { background: var(--error-bg); color: var(--error-text); }
.auth-alert--info { background: var(--info-bg); color: var(--info-text); }

.auth-errlist { margin: 0; padding-left: 18px; }

.auth-footer {
    text-align: center;
    margin-top: 28px;
    color: #b0b0b0;
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   US-022 — acceptarea documentelor legale (pas 0 înregistrare + gate re-acceptare)
   --------------------------------------------------------------------------- */

.legal-card { max-width: 720px; margin: 0 auto; }

.legal-step {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.legal-form { gap: 0; }

.legal-doc {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin: 18px 0;
}

.legal-doc__head { margin-bottom: 10px; }
.legal-doc__title { margin: 0; font-size: 17px; }
.legal-doc__meta { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }

/* Caseta de text derulabilă. Înălțimea FIXĂ e funcțională, nu estetică: BR-06
   cere derularea până la final, iar un container care crește cu textul n-ar
   putea fi derulat deloc. */
.legal-doc__scroll {
    max-height: 260px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fcfcfc;
}
/* ⚠ BUG-133 — TIPOGRAFIA A PLECAT DE AICI, în `legal-prose.css`. Ce rămâne sunt
   proprietățile de CUTIE, care sunt funcționale: BR-06 cere derulare până la final,
   deci `max-height` + `overflow-y` nu sunt estetică.
   Ce s-a mutat: `font-size: 14px`, `line-height: 1.6`, titlurile la 15px și marjele
   de 8px. Ultimele două erau chiar defectul — un `h2` cu 1px mai mare decât textul
   din jur nu e un titlu, iar caseta de acceptare e locul unde structura documentului
   contează cel mai mult. */
.legal-doc__scroll:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.legal-doc__end {
    margin-top: 16px !important;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

.legal-doc__hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}
.legal-doc__hint--done { color: var(--accent); }

.legal-doc__accept {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    font-size: 14px;
}
.legal-doc__accept input { margin-top: 3px; flex: 0 0 auto; }
/* Dezactivat = vizibil dezactivat. Un checkbox care arată normal dar nu răspunde
   la click pare o pagină ruptă, nu o cerință de flux. */
.legal-doc__accept input:disabled { cursor: not-allowed; }
.legal-doc__accept input:disabled + span { color: var(--text-muted); }

.legal-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.legal-actions .auth-btn { margin-top: 0; flex: 1 1 240px; }
.legal-actions .auth-btn:disabled {
    background: #cfcfcf;
    cursor: not-allowed;
}

.legal-decline { color: var(--text-muted); font-size: 14px; text-decoration: none; }
.legal-decline:hover { color: var(--error-text); text-decoration: underline; }

.legal-accepted {
    background: var(--accent-soft);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 6px;
    font-size: 13px;
}
.legal-accepted__title { margin: 0 0 4px; font-weight: 600; }
.legal-accepted__list { margin: 0; padding-left: 18px; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   US-021 — lectura publică a documentelor legale (/legal/terms, /legal/privacy)

   Fără casetă derulabilă cu înălțime fixă (aceea aparține scroll-to-enable din
   fluxul de consimțământ, BR-06): aici textul curge pe pagină, ca într-un
   document.
   --------------------------------------------------------------------------- */

.legal-view { max-width: 760px; margin: 0 auto; }

.legal-view__head {
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.legal-view__kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent);
}

.legal-view__meta {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ⚠ BUG-133 — BLOCUL S-A MUTAT ÎNTREG în `legal-prose.css`, ca să nu mai existe trei
   tipografii pentru același document. Aici erau `h1`, `h2` și `h3` toate la 16px, pe
   un corp de 15px: ierarhia de care se plângea owner-ul lipsea prin construcție, nu
   din întâmplare. Măsura (`max-width: 760px`) stătea pe `.legal-view`, părintele, și
   e înlocuită de `78ch` din foaia comună — aceeași valoare pe toate trei contextele. */

@media (max-width: 680px) {
    .auth-cards { grid-template-columns: 1fr; }
    .legal-doc__scroll { max-height: 200px; }
}

/* -- US-019 · cererea de acces extern ------------------------------------- */
/* Erori pe câmp (§8.4 — inline, nu doar sumar sus). Roșul e cel din
   --error-text, nu unul nou: aceeași eroare trebuie să arate la fel oriunde. */
.auth-fielderr {
    margin: 7px 0 0;
    font-size: 13px;
    color: var(--error-text);
}
.auth-fieldhint {
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
}
/* Marcajul „(opțional)" din etichete — deliberat discret: e o precizare, nu o
   informație de aceeași greutate ca numele câmpului. */
.auth-label__opt {
    font-weight: 400;
    color: var(--text-muted);
}
/* Input invalid: contur roșu PE LÂNGĂ mesajul text, niciodată în locul lui —
   culoarea singură nu e accesibilă. Selectorul e pe aria-invalid, adică pe exact
   ce marchează serverul, ca stilul să nu poată devia de la starea reală. */
.auth-input[aria-invalid="true"] {
    border-color: var(--error-text);
}
.auth-textarea {
    min-height: 96px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}
/* „Nu ai primit emailul?" — pliat, ca să nu invite la retrimiteri inutile. */
.auth-details {
    margin: 18px 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}
.auth-details > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}
.auth-details[open] > summary {
    margin-bottom: 10px;
}

/* ═══════════════════════════════════════ US-081 — TABLETĂ ȘI TELEFON (≤ 1024px)

   Regula de aur a lui US-081 (AC-8): fiecare regulă de aici stă sub prag. Peste 1025px
   paginile de auth rămân identice cu v0.8.0. Pragul existent de 680px (`.auth-cards`,
   `.legal-doc__scroll`) rămâne NEATINS și se compune cu acesta — vezi nota din `app.css`
   pentru de ce nu s-au unificat pragurile. */

@media (max-width: 1024px) {
    /* FR-6 / AC-4 — sub 16px, iOS Safari face zoom la focus și mută ecranul. Câmpurile
       de login sunt primul lucru pe care îl atinge un vizitator pe telefon, deci aici
       defectul s-ar fi văzut înaintea oricărui altuia. */
    .auth-input,
    .auth-textarea {
        font-size: 16px;
    }

    /* FR-6 — ținte de atingere. `.auth-btn` are 11px padding pe 15px text ≈ 41px. */
    .auth-btn {
        min-height: 44px;
        width: 100%;
    }

    /* FR-2 — la 360px, 24px de padding lateral pe fiecare parte mâncau o șesime din
       lățimea utilă a cardului. */
    .auth-body {
        padding: 16px 10px;
    }
}

@media (max-width: 640px) {
    /* FR-8 — tabelele din documentele legale derulează în containerul lor, nu
       deformează pagina.
       ⚠ BUG-133 — selectorul s-a mutat pe clasa comună: regula trebuie să se aplice în
       TOATE cele trei contexte, nu doar în pagina publică. Înainte, un tabel dintr-un
       document vechi deschis în poarta de acceptare lățea caseta pe telefon. */
    .legal-prose table {
        display: block;
        overflow-x: auto;
    }
}