/* ============================================================
   De Obște — main.css (redesign DIR-2 „PANOU")
   Sursă unică de stil pentru toate serviciile. Self-contained
   (fără CDN). Portat din docs/design/redesign/directia-2.html;
   completat cu di-* (diagrame SVG), label.option, dl.rezumat,
   honeypot/turnstile, cookie banner, selector de limbă, print.

   Metaforă: consola de operare calmă. Suprafețe pline, colțuri
   rotunjite, umbre moi. Semnătura: arcul de punte (broker).
   Font: „Public Sans" self-hosted (fișierele vin ulterior —
   acum cade pe stack-ul de sistem prin --sans).
   FĂRĂ dark mode (decizie founder).
   ============================================================ */

/* ---------- @font-face (Public Sans — fișierele vin ulterior) ---------- */
@font-face{
  font-family:"Public Sans";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/public-sans-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Public Sans";
  font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/public-sans-bold.woff2") format("woff2");
}
@font-face{
  font-family:"Public Sans";
  font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/public-sans-extrabold.woff2") format("woff2");
}

/* ---------- Reset minimal (peste reset-ul de la publicare) ---------- */
:root{
  /* --- Paletă (rece) --- */
  --bg:#EEF2F8;        /* fundal pagină, gri-albastru rece */
  --bg-2:#E3E9F2;      /* zone secundare */
  --surface:#FFFFFF;   /* carduri, tabel, câmpuri */
  --line:#D5DEEA;      /* borduri fine */
  --ink:#131C2B;       /* text principal (bleumarin-negru) */
  --ink-2:#3D4C63;     /* text secundar */
  --ink-3:#5E6E88;     /* muted */
  --brand:#1F4FD8;     /* primar (albastru încrezător) */
  --brand-600:#183FB0; /* primar hover */
  --brand-50:#E8EEFF;  /* tentă primar */
  --teal:#0C6C74;      /* accent secundar (arc de punte) — AA pe alb */
  --teal-50:#DBF1F2;
  /* Semantice */
  --succ:#0B7A47; --succ-50:#E1F4EA;
  --fail:#C43314; --fail-50:#FCE9E4;
  --deny:#6A3FC0; --deny-50:#EEE8FA;
  --neut:#47566E; --neut-50:#E9EEF5;
  /* Așteptare („cine e la rând?"): chihlimbar. Nu e o culoare nouă în sistem,
     sunt exact cele două valori pe care `.banner-demo` le folosea deja ca
     literale (text #7A5410, bordură #F5E4BD), promovate la tokeni. Singura
     nuanță liberă din paletă: albastrul e brand/interactiv, teal-ul e Cronica,
     movul e refuz, verdele e succes. Vezi `docs/brand/accesibilitate.md`. */
  --wait:#7A5410; --wait-50:#F5E4BD;
  /* --- Culori promovate din reguli de componenta ---
     Erau scrise direct in reguli, deci in afara sistemului: nu puteau fi
     verificate de galeria de brand, nu apareau in `tokens.md`, si nimeni nu
     stia ca exista. Valorile sunt IDENTICE cu cele de dinainte; promovarea nu
     schimba niciun pixel, doar le aduce unde pot fi vazute. */
  --on-brand:#fff;                       /* text pe suprafata saturata */
  --ctx:#1B3E9E; --ctx-line:#C9D6FF;     /* banda de context */
  --demo:#F5C451; --demo-ink:#5A3D00; --demo-50:#FFF6E6;  /* mediu demonstrativ */
  --fail-line:#F3C9BF; --fail-wash:#FEF7F5;               /* eroare de camp */
  /* Subsolul e singura suprafata inchisa a platformei, deci isi are propria
     mica paleta. Patru valori, nu una: fundal plus trei niveluri de cerneala. */
  --subsol-bg:#0F1B3A; --subsol-ink:#B9C7E6; --subsol-ink-2:#8FB4FF; --subsol-ink-3:#7E8FB8;
  /* --- Spațiere --- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;
  /* --- Raze (generoase, soft) --- */
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;
  /* --- Umbre (elevație moale) --- */
  --sh-1:0 1px 2px rgba(19,28,43,.06),0 1px 3px rgba(19,28,43,.05);
  --sh-2:0 2px 6px rgba(19,28,43,.07),0 8px 24px rgba(19,28,43,.06);
  --sh-brand:0 6px 18px rgba(31,79,216,.28);
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;display:flex;flex-direction:column;min-height:100vh}
h1,h2,h3{margin:0;font-weight:700;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
a{color:var(--brand)}
.num,.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(16px,5vw,32px)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
main{display:block;flex:1 0 auto}

/* ---------- Header ---------- */
/* `overflow-x:clip` e plasa de siguranță pentru tooltip-urile din slotul personal:
   dacă JS-ul lipsește, balonul nu poate împinge lățimea documentului, deci pagina
   nu capătă derulare orizontală la 320px. `clip` (nu `hidden`) e singura valoare
   care lasă axa verticală `visible`, deci balonul de dedesubt iese normal din
   antet. Cu JS, `--tt-shift` îl aduce în ecran înainte să atingă marginea. */
.antet{background:var(--surface);box-shadow:var(--sh-1);position:relative;z-index:5;overflow-x:clip}
.antet-inner{display:flex;align-items:center;gap:var(--s4);min-height:68px;flex-wrap:wrap;padding-block:var(--s3)}
.marca{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--ink);font-weight:800;font-size:1.18rem;letter-spacing:-.02em}
.marca svg{flex:0 0 auto}
.antet-serviciu{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);background:var(--teal-50);padding:5px 10px;border-radius:999px}
/* Accent-uri de brand per serviciu (pastila din antet) — vezi docs/brand/marca.md.
   Toate verificate AA (≥4.5:1 text pe tenta proprie). in nu are pastilă. */
.antet-serviciu--puntea{color:var(--brand);background:var(--brand-50)}
.antet-serviciu--cheia{color:var(--deny);background:var(--deny-50)}
.antet-serviciu--cronica{color:var(--teal);background:var(--teal-50)}
.antet-sp{flex:1 1 auto}

/* ---------- Selector de limbă ---------- */
.selector-limba{display:flex;gap:2px;background:var(--bg-2);border-radius:999px;padding:3px}
.selector-limba a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.02em;text-decoration:none;color:var(--ink-2)}
.selector-limba a:hover{color:var(--ink)}
.selector-limba a[aria-current="true"]{background:var(--surface);color:var(--brand);box-shadow:var(--sh-1)}

/* ---------- Butoane (UN SINGUR sistem) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 20px;border-radius:var(--r-md);font-family:inherit;font-size:.92rem;font-weight:700;line-height:1;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .15s,background .15s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primar{background:var(--brand);color:var(--on-brand);box-shadow:var(--sh-brand)}
.btn-primar:hover{background:var(--brand-600)}
.btn-secundar{background:var(--surface);color:var(--brand);border-color:var(--line);box-shadow:var(--sh-1)}
.btn-secundar:hover{border-color:var(--brand);background:var(--brand-50)}
.btn-pericol{background:var(--surface);color:var(--fail);border-color:var(--fail-50)}
.btn-pericol:hover{border-color:var(--fail)}
.btn-sm{min-height:44px;padding:9px 14px;font-size:.83rem;border-radius:var(--r-sm)}
/* Buton DOAR-ICONIȚĂ (slotul personal din antet, ADR-0054): pătrat 44x44, deci
   ținta tactilă rămâne întreagă chiar dacă textul dispare.
   SPECIFICITATE: `.btn-ico` și `.btn-sm` sunt amândouă (0,1,0) și se bat pe
   `padding`, deci decide ORDINEA. Regula asta trebuie să rămână DUPĂ `.btn-sm`;
   mutată deasupra, butonul ar recăpăta tăcut padding-ul orizontal și n-ar mai fi
   pătrat. Precedent în acest fișier: `.pasi li` (0,1,1) bate `.pas-curent`
   (0,1,0) indiferent de ordine — acolo s-a rezolvat prin specificitate, aici,
   fiind egale, singura pârghie e poziția. */
.btn-ico{width:44px;padding:0;flex:0 0 auto}
.btn-ico svg{width:22px;height:22px;flex:0 0 auto}

/* ---------- Benzi (banner demo + context) ---------- */
.benzi{padding-top:var(--s3)}
.banner{display:flex;gap:var(--s3);align-items:center;padding:12px 16px;border-radius:var(--r-md);font-size:.85rem;box-shadow:var(--sh-1);border:1px solid var(--line)}
.banner+.banner{margin-top:var(--s2)}
.banner b,.banner strong{font-weight:700}
/* Aceleași valori ca înainte, acum prin tokeni (`--wait`). Fundalul rămâne o
   spălare mai deschisă decât `--wait-50`: o bandă lată are nevoie de mai puțină
   tentă decât o pastilă mică pentru același semnal. */
.banner-demo{background:var(--demo-50);border-color:var(--wait-50);color:var(--wait)}
.banner-ctx,.banner-context{background:var(--brand-50);border-color:var(--ctx-line);color:var(--ctx)}
.banner-ico{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.ico-demo{background:var(--demo);color:var(--demo-ink)}
.ico-ctx{background:var(--brand);color:var(--on-brand)}

/* ---------- Secțiuni ---------- */
section{padding-block:var(--s7)}
/* Mobile-first: pe ecrane mici, 48px sus/jos pe secțiune lasă gap-uri prea mari
   (banner→titlu, text→card). Reducem la 24px sub 640px. */
@media(max-width:640px){section{padding-block:var(--s5)}}
.supratitlu{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:var(--s3)}
/* Masura titlului de erou: 24ch, nu 15ch.
   15ch e o regula buna pentru un titlu de trei-patru cuvinte, dar titlurile
   noastre au 37-65 de caractere, deci se rupeau in trei si patru randuri, cu
   ultimul cuvant ramas singur („tie.", „arate"). Masurat in Chromium pe textul
   real, in toate trei limbile: la 24ch toate incap in cel mult DOUA randuri de
   la 900px in sus (la 390px doua dintre ele raman pe trei, ceea ce e normal
   pentru un ecran de telefon). 28ch si 32ch nu castiga nimic in plus, deci am
   luat cea mai mica valoare care rezolva: masura ramane o disciplina, nu se
   lasa mai lat decat trebuie.
   `text-wrap:balance` egalizeaza randurile si scoate cuvantul orfan; singur, el
   NU rezolva nimic aici, fiindca limita era latimea, nu balansarea. */
.h-hero{font-size:clamp(2.1rem,6vw,3.4rem);max-width:24ch;letter-spacing:-.03em;text-wrap:balance}
.lead,.conducere{font-size:clamp(1.05rem,2.5vw,1.28rem);color:var(--ink-2);max-width:54ch;margin-top:var(--s4)}
.actiuni{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.sec-titlu{font-size:1.55rem;margin-bottom:var(--s2)}
.sec-intro{color:var(--ink-3);max-width:60ch;margin-bottom:var(--s5)}
/* proză generică în secțiuni de conținut */
main p+p{margin-top:var(--s3)}
main section>h2,main section>h3{margin-top:var(--s5)}
main ul,main ol{color:var(--ink-2);max-width:62ch}
main li{margin-top:var(--s2)}

/* ---------- Ritm vertical (pagini de aplicație) ----------
   Secțiunile de app (fără clasă de vitrină) primesc un ritm vertical UNITAR
   prin owl-selector, sursă unică a spațierii dintre blocurile de nivel-1 din
   `.wrap`. Elimină spațierea ad-hoc pe clase (vezi .roluri/.pasi-eticheta) și
   evită ambiguitatea colapsului de margini. Se aplică DOAR copiilor direcți ai
   lui `.wrap`, deci internele de formular/tabel nu sunt afectate. */
main section:not(.erou):not(.sectiune-vitrina)>.wrap>*+*{margin-top:var(--s5)}
/* Titlurile de secțiune (h2) primesc mai mult aer deasupra: separă secțiunile. */
main section:not(.erou):not(.sectiune-vitrina)>.wrap>*+h2{margin-top:var(--s7)}
/* Excepții mai strânse (proximitate): eticheta-kicker lipită de titlu; intro lipit
   de titlu; pașii lipiți de eticheta lor; nota-footnote lipită de conținutul ei. */
main section:not(.erou):not(.sectiune-vitrina)>.wrap>p.muted+h1{margin-top:var(--s2)}
main section:not(.erou):not(.sectiune-vitrina)>.wrap>h1+p,
main section:not(.erou):not(.sectiune-vitrina)>.wrap>h2+p{margin-top:var(--s3)}
main section:not(.erou):not(.sectiune-vitrina)>.wrap>*+.nota{margin-top:var(--s3)}
/* Notă-footnote: mică, discretă, atașată vizual de cardul de deasupra. */
.nota{font-size:.85rem;color:var(--ink-3);max-width:70ch}
code{font-variant-numeric:tabular-nums;background:var(--bg-2);border-radius:6px;padding:1px 6px;font-size:.85em}

/* arc de punte ca separator */
.arc-sep{height:2px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);position:relative;margin-block:0}
.arc-sep::after{content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);background:var(--bg);border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);border-radius:2px}

/* ---------- Hero card ---------- */
.hero-card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:clamp(24px,5vw,48px);position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--teal-50),transparent 70%)}
.hero-card>*{position:relative}

/* ---------- Breadcrumb pași ---------- */
/* Eticheta intra pe ACELASI rand cu pastilele (un singur bloc in owl, nu doua).
   Pe telefon pastilele nu incap langa ea si trece pe randul urmator: wrap. */
.pasi-bara{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.pasi-eticheta{margin:0;font-size:.75rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.pasi{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;counter-reset:pas}
.pasi li{counter-increment:pas;display:flex;align-items:center;gap:var(--s2);font-size:.86rem;font-weight:600;padding:9px 16px 9px 11px;border-radius:999px;background:var(--surface);color:var(--ink-3);box-shadow:var(--sh-1);border:1px solid var(--line)}
.pasi li::before{content:counter(pas);font-size:.76rem;font-weight:800;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--bg-2);color:var(--ink-3)}
/* Modificatorii de stare se scriu la specificitate CEL PUTIN EGALA cu regula de
   baza (`.pasi li` = 0-1-1). Ca simpla clasa (0-1-0) nu aveau niciun efect:
   fundalul si culoarea de baza castigau, deci nu se vedea pe ce pas esti. */
.pasi li.pas-facut{color:var(--succ)}
.pasi li.pas-facut::before{content:"✓";background:var(--succ);color:var(--on-brand)}
.pasi li.pas-curent{color:var(--on-brand);background:var(--brand);border-color:var(--brand);box-shadow:var(--sh-brand)}
/* Cerc alb PLIN, nu alb 25% peste brand: compozitul dadea 3.93:1 pe cifra, sub
   pragul AA de 4.5:1. Alb plin cu cifra --brand-600 da 8.74:1. */
.pasi li.pas-curent::before{background:var(--on-brand);color:var(--brand-600)}

/* ---------- Tabel ---------- */
.tabel-wrap{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.tabel-scroll{overflow-x:auto}
/* Tabel FARA `.tabel-wrap`: isi aduce singur suprafata, IDENTICA cu cea a
   tiparului de sectiune. Inainte avea in plus o bordura, deci cinci tabele
   aratau altfel decat celelalte doua, fara ca cineva sa fi decis asta.
   `.tabel-wrap` ramane util cand ai nevoie de `overflow:hidden`, ca sa se taie
   continutul la coltul rotunjit; vizual, cele doua cai sunt acum egale. */
.tabel-scroll:not(.tabel-wrap .tabel-scroll){background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.9rem}
caption{text-align:left;padding:var(--s4);color:var(--ink-3);font-size:.82rem}
/* ANTETUL DE COLOANA NU E INTERACTIV, si nu are voie sa para (ADR-0059 §D3).
   Nu livram sortare pe coloane, fiindca fiecare coloana sortabila ar cere un
   index dedicat pe calea care e deja plafonul de latenta. Deci nu livram nici
   afordanta ei: fara `cursor:pointer`, fara sageata in `::after`, fara stare de
   hover pe `th`, fara `aria-sort` in markup. Un antet care arata clicabil si nu
   e, e o minciuna, iar o sortare care ar reordona doar pagina afisata ar fi una
   mai mare. Aparat executabil de `antetele_de_coloana_nu_arata_sortabile`. */
thead th{text-align:left;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--bg);padding:var(--s3) var(--s4);white-space:nowrap;border-bottom:1px solid var(--line)}
tbody td{padding:var(--s4);border-bottom:1px solid var(--line);vertical-align:middle}
/* Timestamp-uri (coloana „moment"): font ceva mai mic + fără wrap, ca să încapă pe un rând. */
td .mono{font-size:.85rem;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--brand-50)}
.versiune{font-variant-numeric:tabular-nums;color:var(--ink-2);background:var(--bg-2);border-radius:6px;padding:2px 8px;font-size:.8rem;font-weight:600}
.aprob{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2)}
.aprob small{color:var(--ink-3);font-weight:500}
.td-actiuni{display:flex;gap:var(--s2);white-space:nowrap}
/* Slug-uri / identificatori inline nu se rup pe rânduri. */
td code,th code{white-space:nowrap}
/* Identificatorii de REFERINTA (corelare, amprenta, partitie) se rup, spre
   deosebire de identificatorii inline din proza, care nu au voie sa se rupa.
   Motivul: o corelare de 36 de caractere la 0.85em depaseste latimea utila la
   320px, iar `nowrap` impiedica ruperea chiar si la cratime, deci ar produce
   derulare orizontala a PAGINII, nu a unui container. Invariantul cere reflow
   complet la 320px fara derulare orizontala.
   In interiorul unui `.tabel-scroll` nu se aplica: acolo derularea e a
   containerului, prin design, si e mai lizibil un rand continuu. */
.rezumat dd code,
dl.rezumat code{white-space:normal;overflow-wrap:anywhere}
/* Acțiune-iconiță într-un tabel (ex. „Deschide serviciul"): compactă, cu tooltip. */
.actiune-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-sm);color:var(--brand);text-decoration:none}
.actiune-ico:hover{background:var(--brand-50)}
.actiune-ico svg{width:20px;height:20px}

/* ---------- Tooltip (CSS pur; JS-ul doar îl îmbunătățește) ----------
   Baza e CSS: apare la hover ȘI la `:focus-visible`, deci un buton fără text se
   poate identifica cu Tab, fără JavaScript. `app.js` adaugă exact ce CSS-ul nu
   poate: închiderea cu Escape și ținerea baloanelui în viewport (`--tt-shift`).

   Textul vine din `data-tooltip`, adică din catalog, prin template. Numele
   accesibil NU e ăsta, ci `aria-label`-ul elementului: `content` generat ar
   dubla anunțul, iar `aria-label` bate conținutul la calculul numelui.

   `width:max-content` + `max-width` în loc de `white-space:nowrap`: la 320px o
   etichetă lungă („A rólam szóló lekérdezések") ar fi ieșit din ecran pe un
   singur rând; acum se rupe în interiorul unei lățimi care încape sigur. */
.cu-tooltip{position:relative}
.cu-tooltip::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(calc(-50% + var(--tt-shift,0px))) translateY(3px);
  background:var(--ink);color:var(--on-brand);font-size:.8rem;font-weight:600;line-height:1.35;text-align:center;
  width:max-content;max-width:min(16rem,calc(100vw - 3rem));padding:6px 10px;border-radius:6px;
  box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:20}
.cu-tooltip::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);opacity:0;pointer-events:none;transition:opacity .12s;z-index:20}
.cu-tooltip:hover::after,.cu-tooltip:focus-visible::after{opacity:1;transform:translateX(calc(-50% + var(--tt-shift,0px))) translateY(0)}
.cu-tooltip:hover::before,.cu-tooltip:focus-visible::before{opacity:1}
/* Varianta DEDESUBT, pentru elementele din antet: deasupra lor nu există pagină,
   deci balonul ar fi ieșit pe sus. Specificitate egală cu regulile de bază
   (0,1,1 / 0,2,1), deci trebuie să rămână DUPĂ ele. */
.cu-tooltip--jos::after{bottom:auto;top:calc(100% + 7px);transform:translateX(calc(-50% + var(--tt-shift,0px))) translateY(-3px)}
.cu-tooltip--jos::before{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:var(--ink)}
.cu-tooltip--jos:hover::after,.cu-tooltip--jos:focus-visible::after{transform:translateX(calc(-50% + var(--tt-shift,0px))) translateY(0)}
/* Închis cu Escape (steagul îl pune `app.js`). Scris cu DOUĂ atribute ca să dea
   (0,3,1): trebuie să bată `:hover`/`:focus-visible` (0,2,1) indiferent de unde
   ajunge regula în fișier. */
.cu-tooltip[data-tooltip-ascuns][data-tooltip]::after,
.cu-tooltip[data-tooltip-ascuns][data-tooltip]::before{opacity:0}

/* ---------- Panou de secțiune (audit design S1: tipar de secțiune unic) ----------
   Tabelul stă în `.tabel-wrap` (suprafață unică, deja definit). Nota de secțiune
   devine subsol INTERN al panoului (`.panou-nota`), atașată vizual de tabel, nu
   un paragraf plutitor. Acțiunile de secțiune (link-uri) stau într-un rând
   dedicat `.sectiune-actiuni`, nu atârnă orfane. Rezolvă simultan: note
   plutitoare, link-uri orfane, grupare Gestalt. */
.panou-nota{margin:0;padding:var(--s3) var(--s4);background:var(--bg);border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-3)}
.sectiune-actiuni{display:flex;flex-wrap:wrap;gap:var(--s2)}
/* Celulă „fără valoare": tratament unitar, discret (audit design S2). */
.td-gol{color:var(--ink-3)}

/* ---------- Paginare pe cursor + filtre (ADR-0059) ----------
   Trei piese, doua asezari diferite, si diferenta NU e estetica:

   `.tabel-subsol` e subsolul INTERN al panoului, exact ca `.panou-nota`: bara
   de paginare navigheaza tabelul de deasupra ei, deci ii apartine. Cere
   `.tabel-wrap` (are `overflow:hidden`), ca sa se taie la coltul rotunjit.

   `.filtre` sta INAINTEA panoului si IN AFARA lui. Cand un filtru nu intoarce
   niciun rand, panoul e inlocuit de starea goala; o bara de filtre care ar fi
   trait inauntru ar disparea odata cu el, si omul ar ramane fara controlul cu
   care sa isi retraga filtrul. Suprafata ei e aceeasi cu a formularelor
   (`--surface`), fiindca e un formular. */
.tabel-subsol{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--bg);border-top:1px solid var(--line)}
/* `margin-left:auto` tine navigarea la dreapta si cand selectorul de dimensiune
   lipseste; la 320px randul se rupe si `auto` devine inert, deci nu lupta cu wrap-ul. */
.paginare{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-left:auto}
/* Nota de capat: `--ink-2` pe `--bg` = 7.75:1. NU `--ink-3` (4.60:1, la limita):
   nota asta e singura explicatie a butonului care lipseste, deci e continut. */
.paginare-capat{font-size:.85rem;color:var(--ink-2)}
.pag-glif{font-weight:800}
.paginare-dimensiune{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0}
.paginare-dimensiune label{font-size:.85rem;font-weight:700;color:var(--ink-2)}
/* `.control` e `width:100%`; aici campul e un fragment de rand, nu un formular
   pe coloana. (0,2,0) peste (0,1,0), deci nu depinde de ordine. */
.paginare-dimensiune .control{width:auto;min-height:44px;padding-block:9px}

.filtre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
/* Mobile-first: o coloana la 320px, apoi cate incap. `minmax(0,...)` pe item
   (`.filtru{min-width:0}`) e ce impiedica un `<select>` cu optiune lunga sa
   umfle grila si sa produca derulare orizontala a paginii. */
.filtre-campuri{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:640px){.filtre-campuri{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}}
.filtru{display:flex;flex-direction:column;gap:6px;min-width:0}
.filtru label{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.filtru .control{width:100%}
/* Bifa: tinta e tot randul, prin `label.option` (min-height 44px), nu patratul
   de 20px. `align-items:center` bate `baseline` din `label.option` prin (0,2,0). */
.filtru-bifa{justify-content:center}
.filtru-bifa .option{align-items:center;gap:var(--s3)}
.filtru-bifa input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--brand)}
.filtre-actiuni{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ---------- Badge-uri ----------
   Cinci familii semantice, fiecare răspunzând unei întrebări diferite; lista
   stărilor și justificarea stau în comentariul macroului (`macros.html`), ca să
   existe un singur loc unde se decide ce culoare capătă o stare.

   Specificitate: familiile sunt clase simple (0,1,0), la fel ca `.badge`, iar
   `.badge` nu declară nici `background`, nici `color`, deci nu există concurență
   indiferent de ordine. La fel pentru punct: `.badge::before` (0,1,1) dă doar
   forma, `.badge-*::before` (0,1,1) dă doar culoarea. Precedent în acest fișier:
   `.pasi li` (0,1,1) bate `.pas-curent` (0,1,0) oricum ai ordona fișierele. */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%}
.badge-succes{background:var(--succ-50);color:var(--succ)}.badge-succes::before{background:var(--succ)}
.badge-asteptare{background:var(--wait-50);color:var(--wait)}.badge-asteptare::before{background:var(--wait)}
.badge-refuz{background:var(--deny-50);color:var(--deny)}.badge-refuz::before{background:var(--deny)}
.badge-esec{background:var(--fail-50);color:var(--fail)}.badge-esec::before{background:var(--fail)}
.badge-neutru{background:var(--neut-50);color:var(--neut)}.badge-neutru::before{background:var(--neut)}
.badge-galerie{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- Formular ---------- */
.formular{max-width:580px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:clamp(20px,4vw,32px)}
.sumar-erori{background:var(--fail-50);border:1px solid var(--fail-line);border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s5);color:var(--fail);font-size:.88rem}
.sumar-erori strong{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.sumar-erori strong::before{content:"!";width:20px;height:20px;display:grid;place-items:center;background:var(--fail);color:var(--on-brand);border-radius:50%;font-size:.78rem;font-weight:800}
.sumar-erori ul{margin:0;padding-left:2em}
/* Notă de mediu în interiorul formularului (identificatorii sintetici):
   `p{margin:0}` e global, iar ritmul de secțiune se aplică doar copiilor
   direcți ai lui `.wrap`, deci nota din formular își cere singură aerul. */
.formular>.nota{margin-bottom:var(--s5)}
.camp{margin-bottom:var(--s5)}
.camp label,.camp-eticheta{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px}
.camp .req{color:var(--fail)}
.ajutor,.avertisment{font-size:.8rem;color:var(--ink-3);margin-bottom:8px}
.avertisment{color:var(--fail)}
.control{width:100%;min-height:46px;padding:11px 14px;font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:inset 0 1px 2px rgba(19,28,43,.04)}
.control:hover{border-color:var(--ink-3)}
.control:focus-visible{outline:3px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
select.control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E6E88' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.camp-eroare .control{border-color:var(--fail);background:var(--fail-wash)}
.eroare{display:flex;gap:6px;align-items:center;color:var(--fail);font-size:.8rem;margin-top:6px;font-weight:700}
.eroare::before{content:"!";width:16px;height:16px;display:grid;place-items:center;background:var(--fail);color:var(--on-brand);border-radius:50%;font-size:.7rem}
.form-actiuni{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}
/* Mesaj de eroare/alertă la nivel de pagină (Puntea: rezultat, eroare). */
.eroare-mesaj{background:var(--fail-50);border:1px solid var(--fail-line);border-radius:var(--r-md);padding:var(--s3) var(--s4);color:var(--fail);font-weight:600;font-size:.9rem;margin-top:var(--s4)}
/* Nav de linkuri pe rol (Puntea: pagina de alegere a procesului). */
.roluri{display:flex;flex-wrap:wrap;gap:var(--s2)}
/* fieldset / legend (formularele cetățean/admin) */
fieldset{border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:var(--s4) var(--s5);margin:0 0 var(--s5)}
legend{font-weight:800;font-size:.9rem;padding:0 var(--s2);color:var(--ink-2)}

/* Rând de opțiune (radio în listă) — întreaga etichetă e țintă tactilă. */
label.option{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s3) 0;min-height:44px;font-weight:400;cursor:pointer}

/* Honeypot off-screen (anti-bot) + widget Turnstile. */
.honeypot{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:var(--s3) 0}

/* „Infinite add" headere de context (ADR-0009). */
.ctx-rows{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s3)}
.ctx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--s2);align-items:center}
.ctx-row input{width:100%;margin:0}
.ctx-row .js-ctx-remove{white-space:nowrap}
.js-ctx-add{margin-top:var(--s1)}
@media(max-width:40rem){.ctx-row{grid-template-columns:1fr}}

/* ---------- Accordion ---------- */
.acc{max-width:740px;display:flex;flex-direction:column;gap:var(--s3)}
.acc details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.acc details[open]{box-shadow:var(--sh-2)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s3);padding:var(--s4);font-weight:700;font-size:.92rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);margin-left:auto;transition:transform .18s}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc-corp{padding:0 var(--s4) var(--s4)}
.acc-corp .camp:last-child{margin-bottom:0}
.metoda{font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:var(--brand-50);color:var(--brand)}

/* ---------- Carduri ---------- */
.carduri{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:640px){.carduri{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.carduri{grid-template-columns:repeat(3,1fr)}
  /* Exact 4 carduri: 2x2, ca să nu rămână un al 4-lea orfan pe rândul doi
     (audit design S5). :has() = fără JS. */
  .carduri:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(19,28,43,.12)}
.card-ico{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--brand-50);color:var(--brand)}
.card .domeniu{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal)}
.card h3{font-size:1.15rem}
.card p{font-size:.9rem;color:var(--ink-2)}
.card a{margin-top:auto;font-weight:700;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.card a::after{content:"→";transition:transform .15s}
.card a:hover::after{transform:translateX(3px)}
/* „În curând": semnalat prin suprafață estompată + bordură punctată, NU prin
   opacity pe text (opacity reduce contrastul sub prag, WCAG). Textul rămâne la
   contrast plin. */
.card-soon{background:var(--bg-2);box-shadow:none;border:1px dashed var(--line)}
.card-soon:hover{transform:none;box-shadow:none}
.card-soon .domeniu{color:var(--ink-3)}

/* ---------- Rezumat (dl) ---------- */
dl.rezumat{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:var(--s4) var(--s5);margin:var(--s5) 0;box-shadow:var(--sh-2)}
dl.rezumat::before{content:"";position:absolute;top:-1px;left:var(--s5);width:40px;height:2px;background:var(--brand);border-radius:999px}
dl.rezumat dt{font-weight:700;margin-top:var(--s3)}
dl.rezumat dt:first-of-type{margin-top:0}
dl.rezumat dd{margin:0 0 var(--s1);color:var(--ink-2)}

/* ---------- Empty state ---------- */
.gol{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:var(--s8) var(--s5);text-align:center}
.gol-ico{width:72px;height:72px;border-radius:50%;background:var(--brand-50);display:grid;place-items:center;margin:0 auto var(--s4)}
.gol h2,.gol h3{font-size:1.25rem;margin-bottom:var(--s2)}
.gol p{color:var(--ink-3);max-width:44ch;margin:0 auto var(--s5)}

/* ---------- Diagrame SVG (di-*) — flux + interop ---------- */
.diagrama-interop{margin:var(--s8) 0 0}
.diagrama-flux{margin:var(--s6) 0 0}
.diagrama-flux + .diagrama-flux{margin-top:var(--s8)}
.diagrama-interop__scroll,.diagrama-flux__scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:var(--s4)}
.diagrama-interop__svg{display:block;width:100%;height:auto;min-width:900px;font-family:var(--sans)}
.diagrama-flux__svg{display:block;width:100%;height:auto;min-width:640px;font-family:var(--sans)}
.diagrama-interop figcaption,.diagrama-flux figcaption{margin-top:var(--s3);font-size:.8125rem;line-height:1.5;color:var(--ink-3)}
/* -- Noduri -- */
.di-box--common{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.5}
.di-box--slow{fill:var(--surface);stroke:var(--line);stroke-width:1;stroke-dasharray:4 3}
.di-box--fast{fill:var(--brand-50);stroke:var(--brand);stroke-width:1.5}
.di-box--fast-strong{fill:var(--brand);stroke:var(--brand-600);stroke-width:1.5}
/* -- Text în noduri -- */
.di-txt{fill:var(--ink)}
.di-txt--slow{fill:var(--ink-3)}
.di-txt--on-brand{fill:var(--on-brand)}
/* -- Conectori -- */
.di-edge--slow{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:5 4}
.di-edge--fast{fill:none;stroke:var(--brand);stroke-width:2.5}
.di-arrowhead--slow{fill:var(--line)}
/* Muchia benzii de PREGATIRE: gri PLIN, nu punctat. Punctatul e rezervat unui
   singur inteles in legenda, consemnarea automata in Cronica; refolosit si
   pentru pregatire, ar fi facut diagrama sa spuna doua lucruri cu acelasi semn,
   exact pe pagina care exista ca sa explice. */
.di-edge--prep{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.di-arrowhead--prep{fill:var(--ink-3)}
.di-arrowhead--fast{fill:var(--brand)}
/* -- Insigne de traseu -- */
.di-badge--slow{fill:var(--bg-2);stroke:var(--line);stroke-width:1;stroke-dasharray:4 3}
.di-badge-txt--slow{fill:var(--ink-3)}
.di-badge--fast{fill:var(--brand-50);stroke:var(--brand);stroke-width:1}
.di-badge-txt--fast{fill:var(--brand-600)}
/* -- Legendă -- */
.di-legend-line--fast{stroke:var(--brand);stroke-width:2.5}
.di-legend-line--slow{stroke:var(--line);stroke-width:1.5;stroke-dasharray:5 4}

/* ---------- Vitrină (landing-uri) ---------- */
.vitrina .erou{padding-top:var(--s7)}
.sectiune-vitrina>.wrap>*{max-width:none}
.sectiune-vitrina__titlu h2{margin-top:0}
.sectiune-vitrina__corp{max-width:44rem}
.sectiune-vitrina__corp>*{max-width:none}
.sectiune-vitrina__corp>:first-child{margin-top:0}
@media(min-width:900px){
  /* Grila 2 coloane (titlu | corp) e pe `.wrap` interior — el e containerul
     ale cărui copii direcți sunt `__titlu`/`__corp`. Pusă pe `.sectiune-vitrina`
     ar prinde doar `.wrap` ca item și l-ar strânge în prima coloană de 15rem. */
  .sectiune-vitrina>.wrap{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s4) var(--s7);align-items:start}
  .sectiune-vitrina__titlu{grid-column:1}
  .sectiune-vitrina__corp{grid-column:2}
  .sectiune-vitrina>.wrap>figure{grid-column:1 / -1;max-width:none}
  /* `__corp` purta DOUA roluri, si numai unul dintre ele apartine coloanei 2:
     „corpul unei perechi titlu plus corp" si „continut de sectiune". In al
     doilea rol, coloana 2 il impinge la dreapta, sub o coloana 1 goala; asa
     aparea randul de actiuni final de pe pagina „de ce" a Puntii ca un buton
     ratacit in mijlocul paginii, sub o legenda care ocupa toata latimea.

     Reparatia scrie in CSS chiar definitia perechii: un corp e „al unui titlu"
     doar cand ii URMEAZA. Un corp care vine dupa altceva (o figura, un tabel)
     sau care deschide sectiunea nu are titlu pereche, deci se intinde pe toata
     latimea, exact ca `figure`. Nu e un selector care ghiceste instanta: e
     conditia pe care numele clasei o afirma deja.

     Specificitate (0,4,0) fata de (0,1,0) a regulii de baza, deci castiga
     indiferent de ordine; precedentul din acest fisier e `.pasi li` peste
     `.pas-curent`. Nu cere nicio schimbare in template-uri. */
  .sectiune-vitrina>.wrap>:not(.sectiune-vitrina__titlu)+.sectiune-vitrina__corp,
  .sectiune-vitrina>.wrap>.sectiune-vitrina__corp:first-child{grid-column:1 / -1}
}

/* ---------- Lista de alegeri (un pas de flux: proces, scop, operatiune) -------
   Inlocuieste `ul.plain`, care era singura componenta numita dupa MARKUP, nu dupa
   rol, si care de aceea a ajuns pe conturi de continut pentru care nu fusese
   desenata: titlu simplu, titlu plus meta, si un identificator tehnic.

   Decizia centrala: CARDUL E ALEGEREA, deci cardul e TINTA. Inainte, suprafata,
   elevatia si hover-ul promiteau o zona interactiva, dar clicabili erau circa 20
   de pixeli de titlu. Cardul mintea despre propria afordanta.

   Titlul se scrie ca titlu (culoarea cernelii, fara subliniere): afordanta vine
   din suprafata, chevron, hover si focus. Fara fir de accent sus: acela e
   semnatura cardului editorial din vitrina. Punctuala (§8): pagina alege intre
   card si rand de lista, dupa cate fatete are optiunea. */
.choice-list{list-style:none;margin:var(--s4) 0;padding:0;max-width:none;display:grid;gap:var(--s3)}
@media(min-width:640px){
  /* auto-FILL, nu auto-fit: cu un singur element cardul RAMANE la 20rem, nu se
     intinde pe toata latimea (cazul „Alege scopul", cu un singur scop). */
  .choice-list{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:var(--s4)}
}
.choice-list>li{margin:0}

.choice{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;column-gap:var(--s3);padding:var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);transition:box-shadow .15s,transform .15s,border-color .15s}
.choice:hover{box-shadow:var(--sh-2);transform:translateY(-1px);border-color:var(--brand)}
.choice-title{grid-column:1;margin:0;font-size:1.02rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
/* Link „intins": tinta e toata suprafata cardului. Numele accesibil al linkului
   ramane DOAR titlul, meta nu intra in el, de asta linkul nu inveleste cardul. */
.choice-link{color:var(--ink);text-decoration:none}
.choice-link::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.choice:hover .choice-link{color:var(--brand-600)}
.choice-meta{grid-column:1;margin:var(--s1) 0 0;font-size:.85rem;line-height:1.45;color:var(--ink-3)}
.choice-chevron{grid-column:2;grid-row:1;width:20px;height:20px;color:var(--brand);flex:none;transition:transform .15s}
.choice:hover .choice-chevron{transform:translateX(3px)}
/* Focus pe CARD, fiindca tinta reala e cardul. In browserele fara `:has()` ramane
   inelul global pe titlu: degradare corecta, focusul nu dispare niciodata. */
@supports selector(:has(*)){
  .choice:has(.choice-link:focus-visible){outline:3px solid var(--brand);outline-offset:2px}
  .choice-link:focus-visible{outline:none}
}

/* ---------- Carduri componente (vitrina In: puntea / cronica) ---------- */
.componente{display:grid;gap:var(--s3);margin-top:var(--s8)}
@media(min-width:640px){.componente{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.card-componenta{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6) var(--s5) var(--s5);box-shadow:var(--sh-1);transition:box-shadow .15s,transform .15s}
.card-componenta:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.card-componenta::before{content:"";position:absolute;top:-1px;left:var(--s5);width:40px;height:2px;background:var(--brand);border-radius:999px;transition:width .3s}
.card-componenta:hover::before{width:72px}
.card-componenta .domeniu{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);background:var(--teal-50);border-radius:999px;padding:3px 10px;margin-bottom:var(--s3)}
.card-componenta h2{margin:0 0 var(--s2);font-size:1.375rem}
.card-componenta p{margin:0 0 var(--s2);color:var(--ink-2)}
.card-componenta p:last-child{margin-bottom:0}

/* ---------- Pereche de detalii una lângă alta ---------- */
.vitrina-duo{display:grid;gap:var(--s6);margin:var(--s6) 0}
.vitrina-duo>section{max-width:none;margin:0;padding-block:0}
.vitrina-duo>section>*{max-width:none}
@media(min-width:768px){.vitrina-duo{grid-template-columns:1fr 1fr;gap:var(--s8)}}

/* ---------- Pași de proces (ol.proces) ---------- */
ol.proces{list-style:none;counter-reset:pas-proces;padding:0;margin:var(--s4) 0;max-width:none}
ol.proces>li{counter-increment:pas-proces;position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:var(--s3) var(--s4) var(--s3) 3.25rem;margin:var(--s3) 0;box-shadow:var(--sh-1);transition:box-shadow .15s,transform .15s}
ol.proces>li:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
ol.proces>li::after{content:"";position:absolute;top:-1px;left:var(--s4);width:40px;height:2px;background:var(--brand);border-radius:999px;transition:width .3s}
ol.proces>li:hover::after{width:72px}
ol.proces>li>h3{margin:0 0 var(--s1);font-size:1.02rem}
ol.proces>li>p:last-child{margin-bottom:0}
ol.proces>li::before{content:counter(pas-proces);position:absolute;left:var(--s4);top:var(--s3);width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--brand-50);color:var(--brand-600);font-weight:800;font-size:.9rem}
@media(min-width:640px){
  main.vitrina ol.proces{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin:var(--s4) 0}
  main.vitrina ol.proces>li{margin:0}
}
@media(min-width:960px){main.vitrina ol.proces{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}

/* ---------- Login demonstrativ: grupuri + carduri de persoană ---------- */
.grup-utilizatori{margin-top:var(--s8)}
.grup-eticheta{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4)}
.grup-eticheta::after{content:"";flex:1;height:1px;background:var(--line)}
.lista-persoane{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
@media(min-width:640px){.lista-persoane{grid-template-columns:repeat(2,1fr)}}
.card-persoana{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);box-shadow:var(--sh-1);transition:box-shadow .15s,border-color .15s,transform .15s}
.card-persoana:hover{box-shadow:var(--sh-2);border-color:var(--ink-3);transform:translateY(-1px)}
.persoana-antet{display:flex;align-items:center;gap:var(--s3)}
.avatar{flex:none;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;font-size:.9rem;font-weight:700;letter-spacing:.02em;background:var(--brand-50);color:var(--brand)}
.persoana-nume{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0}
.persoana-user{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--ink-3);margin:0;overflow-wrap:anywhere}
.insigne{display:flex;flex-wrap:wrap;gap:6px}
.insigna{display:inline-flex;align-items:center;font-size:.78rem;font-weight:700;line-height:1.2;padding:5px 10px;border-radius:999px;white-space:nowrap}
.insigna-rol{background:var(--brand-50);color:var(--brand-600)}
.insigna-admin{background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.persoana-descriere{font-size:.875rem;line-height:1.5;color:var(--ink-2);flex:1;margin:0}
.card-persoana form{margin-top:auto}
.card-persoana button{width:100%}

/* ---------- Footer ---------- */
.subsol{background:var(--subsol-bg);color:var(--subsol-ink);padding-block:var(--s7);margin-top:var(--s8)}
.subsol-inner{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between}
.subsol .marca{color:var(--on-brand);margin-bottom:var(--s2)}
.subsol small{font-size:.8rem;color:var(--subsol-ink-3);display:block;margin-top:var(--s2)}
.subsol nav{display:flex;gap:var(--s5);flex-wrap:wrap}
.subsol a{color:var(--subsol-ink);text-decoration:none;font-size:.85rem;font-weight:600}
.subsol a:hover{color:var(--on-brand)}
.subsol-disclaimer{color:var(--subsol-ink-2);font-size:.85rem;font-weight:600;max-width:40ch;margin-top:var(--s2)}
.subsol-contact{font-size:.85rem;margin-top:var(--s2)}
.subsol-contact a{text-decoration:underline}

/* ---------- Cookie banner ---------- */
.banner-cookie{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(19,28,43,.12)}
.banner-cookie[hidden]{display:none}
.banner-cookie-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);padding-block:var(--s4)}
.banner-cookie p{flex:1 1 320px;font-size:.86rem;color:var(--ink-2);margin:0}
.banner-cookie .actiuni{margin-top:0}

/* ---------- Pagini legale ---------- */
.wrap.pagina-legala{max-width:var(--maxw)}
.pagina-legala>*{max-width:70ch}
.pagina-legala h1{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:var(--s3)}
.pagina-legala h2{font-size:1.2rem;margin-top:var(--s6);margin-bottom:var(--s2)}
.pagina-legala p,.pagina-legala li{color:var(--ink-2)}
.pagina-legala .actualizat{color:var(--ink-3);font-size:.85rem;margin-bottom:var(--s5)}

/* ---------- Pagină de eroare ---------- */
.eroare-pagina{text-align:center;padding-block:var(--s8)}
.eroare-cod{font-size:clamp(3rem,10vw,5rem);font-weight:800;color:var(--brand);letter-spacing:-.04em;line-height:1}
.eroare-pagina h1{font-size:clamp(1.4rem,4vw,2rem);margin:var(--s4) 0 var(--s3)}
.eroare-pagina p{color:var(--ink-3);max-width:48ch;margin:0 auto var(--s5)}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){*{transition:none!important}
  /* ATENȚIE: `*` NU se potrivește cu pseudo-elementele, deci regula de mai sus nu
     atinge niciun `::before`/`::after`. Componentele care își animă pseudo-elementul
     își opresc singure tranziția, aici. Tooltip-ul apare pe loc, fără glisarea de
     3px: fără tranziție, offset-ul de start s-ar fi văzut ca un salt, nu ca o
     mișcare. (Restul pseudo-elementelor animate din fișier rămân neatinse; o
     regulă `*,*::before,*::after` ar fi o schimbare globală, nu una de componentă.) */
  .cu-tooltip::after,.cu-tooltip::before,
  .cu-tooltip--jos::after,.cu-tooltip--jos::before{transition:none}
  .cu-tooltip::after,.cu-tooltip--jos::after{transform:translateX(calc(-50% + var(--tt-shift,0px)))}
}

/* ---------- Print (Cronica: „cine mi-a accesat datele") ---------- */
@media print{
  body{background:#fff;color:#000;font-size:12pt}
  .antet,.subsol,.benzi,.banner,.banner-cookie,.selector-limba,.antet-iesire,.diagrama-flux,.actiuni,.form-actiuni,.btn{display:none!important}
  main{padding:0}
  section{padding-block:0}
  .tabel-scroll,.tabel-wrap{box-shadow:none;border:1px solid #999;overflow:visible}
  table{min-width:0;width:100%}
  thead th{background:#eee;color:#000}
  tbody tr:hover{background:transparent}
  a{color:#000;text-decoration:underline}
}

/* ---------- Chitanta de audit: lantul si evenimentele lui ----------
   Un tabel era forma gresita: partitia si actiunea de verificare erau IDENTICE
   pe fiecare rand, deci se repetau, umflau blocul si impingeau amprenta de 64 de
   caractere in afara ecranului. Sunt proprietati ale chitantei intregi.

   Forma corecta: lantul o data, sus; apoi evenimentele ca lista densa. Amprenta
   se rupe, nu deruleaza, fiindca aici nu mai exista container de derulare. */
.lant{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:var(--s3) 0}
.lant-eticheta{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lant code{white-space:normal;overflow-wrap:anywhere}

.lant-evenimente{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.lant-evenimente>li{display:grid;grid-template-columns:auto 1fr;gap:2px var(--s3);align-items:baseline;
  padding:var(--s3);background:var(--bg-2);border-radius:var(--r-md)}
/* Pozitia e ancora vizuala: cifre aliniate, ca sa se citeasca succesiunea. */
.lant-pozitie{grid-column:1;grid-row:1;font-variant-numeric:tabular-nums;font-weight:800;color:var(--brand-600)}
.lant-tip{grid-column:2;grid-row:1;font-weight:600}
/* Amprenta ocupa randul al doilea, pe toata latimea: e lunga si nu concureaza
   cu ce s-a intamplat, dar ramane INTREAGA, fiindca trunchiata nu s-ar putea
   verifica. */
.lant-amprenta{grid-column:1/-1;grid-row:2;font-size:.78rem;background:none;padding:0;
  color:var(--ink-3);white-space:normal;overflow-wrap:anywhere}

/* ---------- Grup personal in antet (ADR-0054) ----------
   Destinatiile care apartin PERSOANEI, nu paginii: „lucrurile mele" plus iesirea
   din cont, care e din aceeasi sfera. Inainte, „Activitatea mea" era tratata ca
   actiune de pagina, deci aparea pe doua pagini din noua, iar un functionar
   aflat la pasii 2-5 nu ajungea la ea fara sa abandoneze fluxul.

   Regula: prezente MEREU dupa autentificare, NICIODATA primare. Antetul e chrome
   ambiant, alb pe alb, la capatul opus fata de butonul primar din panou, deci nu
   concureaza cu decizia paginii. Intermitenta ar fi mai rea decat prezenta
   discreta: l-ar invata pe om ca nu se poate baza pe ele. */
.antet-personal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.antet-personal form{margin:0}