/* Baza comună a paginilor-unealtă publice (calculator salarii, verificator CUI, calendar fiscal,
   generator de factură).

   Există fiindcă fiecare pagină nouă își copia aceleași ~80 de linii: tokeni de culoare, reset,
   antet cu brand și comutator de limbă, tipografie, footer. La a patra copie, o schimbare de temă ar
   fi însemnat patru fișiere editate manual, deci trei șanse să rămână unul în urmă.

   Paginile legale (termeni, confidențialitate, cookies) NU folosesc fișierul ăsta dinadins: sunt
   stabile și verificate, iar a le muta pe un CSS nou ar fi risc de regresie pentru 14 linii câștigate.
   Ce e specific unei unelte rămâne în <style> în pagina ei. */

:root {
  --bg: #0e1113;
  --surface: #171a1c;
  --surface2: #1d2123;
  --ink: #eef2f0;
  --t2: #b4bdb8;
  --muted: #7f8a86;
  --green: #a3e635;
  --red: #f87171;
  --amber: #fbbf24;
  --border: #2a3033;
  --radius: 14px;
  --maxw: 1060px;
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* Tema deschisă vine din preferința sistemului. Nu are comutator: o unealtă publică pe care intri
   pentru 40 de secunde n-are nevoie de setări, are nevoie să arate bine din prima. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8f5;
    --surface: #fff;
    --surface2: #f1f3ee;
    --ink: #141a16;
    --t2: #4a554d;
    /* --muted ține etichetele de formular și titlurile de panou, adică text normal:
       vechiul #7a857e dădea 3.43-3.83:1 pe alb/--bg, sub minimul AA de 4.5:1.
       #646d67 urcă la 4.79-5.35:1 pe toate cele trei suprafețe deschise. */
    --muted: #646d67;
    --green: #4d7c0f;
    --red: #b91c1c;
    --amber: #b45309;
    --border: #e2e6dc;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.65 var(--font);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ── Antet ──
   Lipit sus, inclusiv pe telefon. Nu e cosmetic: paginile-unealtă sunt lungi (formular + explicații),
   iar meniul de unelte era ancorat la antet — după derulare antetul ajungea la -837px, deci panoul
   se deschidea complet în afara ecranului. Prins măsurând DUPĂ derulare; la scroll 0 părea în regulă.
   Cu antetul lipit, declanșatorul e mereu pe ecran, deci panoul are de ce să se agațe. */
header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 70;
}
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 18px; }
/* Forma o da marca (celula de fagure), nu cutia. */
.logo { width: 28px; display: grid; place-items: center; }
.logo svg { width: 28px; height: 28px; display: block; }
.hnav { display: flex; align-items: center; gap: 16px; }
.hnav a { color: var(--t2); text-decoration: none; font-size: 14px; }
.hnav a:hover { color: var(--green); }

/* Pe telefon linkurile de navigare se ascund, dar comutatorul de limbă NU: cineva care nu citește
   româna trebuie să poată ieși din pagină de pe orice ecran.
   `>` e obligatoriu, nu stilistic: fără el regula prindea și linkurile din INTERIORUL panoului de
   unelte (sunt descendenți de .hnav), iar panoul rămânea un dreptunghi gol de 16px. Prins măsurând
   înălțimea lui în browser, nu citind CSS-ul. */
@media (max-width: 620px) {
  .hnav > a:not(.keep) { display: none; }
}

/* ── Meniul de unelte gratuite ──
   Construit pe <details>/<summary>, nu pe <select>: un select care navighează la „change" declanșează
   navigarea când cineva umblă cu săgețile printre opțiuni — o capcană de accesibilitate cunoscută.
   <details> dă gratuit deschidere cu tastatura și funcționare fără JavaScript, iar linkurile rămân
   <a> reale în HTML, deci sînt văzute de crawler exact ca înainte. */
/* `display: flex` pe <details>, nu `block`: implicit, textul din <summary> ieșea 3,9px mai jos decât
   al celorlalte elemente din antet (măsurat în browser). Cauza: <summary> e inline-flex, iar
   înălțimea lui vine din conținut, nu din cutia întinsă a <details> — deci textul se așeza altundeva
   decât în ancorele simple. Cu details ca flex centrat, diferența e exact 0. Un `line-height` egal
   NU rezolvă: încercat, tot 3,9px. */
.tools-menu { position: relative; display: flex; align-items: center; }
.tools-menu summary {
  list-style: none; cursor: pointer; color: var(--t2);
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
  transition: color .15s;
}
.tools-menu summary::-webkit-details-marker { display: none; }
.tools-menu summary::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); flex: 0 0 auto;
}
.tools-menu summary:hover { color: var(--green); }
.tools-menu summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.chev {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .18s;
}
.tools-menu[open] .chev { transform: rotate(225deg) translateY(-2px); }

.tools-pop {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 288px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 7px; box-shadow: 0 18px 44px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 2px;
}
/* Punte invizibilă până la panou: fără ea, drumul cu mouse-ul trece peste un gol și meniul se
   închide „de la sine". */
.tools-pop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

.tools-pop a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 11px; border-radius: 10px; text-decoration: none; transition: background .14s;
}
.tools-pop a strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tools-pop a span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.tools-pop a:hover { background: color-mix(in srgb, var(--green) 8%, transparent); }
.tools-pop a:hover strong { color: var(--green); }
.tools-pop a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* <details> închis își ascunde copiii — DAR numai dacă autorul nu le pune un `display` propriu.
   `display: flex` de mai sus anulează ascunderea implicită, deci panoul rămânea vizibil permanent.
   Prins la verificare în browser: înălțimea panoului era 252px și cu meniul închis. */
.tools-menu:not([open]) .tools-pop { display: none; }

/* Pagina curentă nu se mai oferă în meniu: un link către locul în care ești deja e zgomot. */
.tools-pop a[aria-current="page"] { display: none; }


@media (max-width: 560px) {
  /* Pe ecrane înguste, panoul NU mai poate fi ancorat la declanșator: marginea din dreapta a
     declanșatorului nu e marginea ecranului (măsurat la 375px — panoul ieșea 58px în stânga).
     Îl ancorăm la ECRAN, iar poziția de sus vine din antetul real, măsurată de tools-menu.js —
     nu dintr-o valoare ghicită care s-ar strica la prima schimbare de înălțime a antetului. */
  .tools-pop {
    position: fixed;
    top: var(--tools-top, 64px);
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
    /* Panoul nu poate depăși ecranul nici în înălțime: la patru unelte încape, dar dacă mai adăugăm,
       se derulează în loc să iasă jos. */
    max-height: calc(100vh - var(--tools-top, 64px) - 16px);
    overflow-y: auto;
  }
  .tools-pop::before { display: none; }
}

.lang { display: flex; gap: 6px; }
.lang button {
  background: transparent; border: 1px solid var(--border); color: var(--t2);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; font: 600 12px var(--font);
}
.lang button.active { background: var(--green); color: #0e1113; border-color: var(--green); }

/* ── Corp ── */
main { padding: 30px 0 64px; }
h1 { font-size: 27px; margin: 0 0 6px; line-height: 1.25; }
.lead { color: var(--t2); margin: 0 0 24px; max-width: 660px; }
h2 { font-size: 19px; margin: 34px 0 10px; padding-top: 10px; border-top: 1px solid var(--border); }
p, li { color: var(--t2); }
a { color: var(--green); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
/* Titlul unui panou e h2, nu h3: după <h1> urma direct h3, iar saltul de nivel e raportat ca eroare
   de accesibilitate (un cititor de ecran anunță o secțiune lipsă). Aspectul rămâne eticheta mică:
   `font` scurtează dimensiunea de la h2, iar border-top/padding-top ale lui h2 se anulează aici —
   panoul are deja chenar propriu, o linie în plus ar tăia titlul de conținutul lui. */
.panel h2, .panel h3 {
  margin: 0 0 14px; font: 600 13px var(--font); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); border-top: 0; padding-top: 0;
}

/* Două coloane: intrările la stânga, rezultatul la dreapta. Se pliază pe o coloană sub 880px, unde
   două coloane ar face câmpurile prea înguste ca să se poată tasta în ele. */
.grid { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 880px) { .grid { grid-template-columns: 1fr; } }

/* ── Formular ── */
.f { margin-bottom: 12px; }
.f.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: block; font: 500 12px var(--font); color: var(--muted); margin-bottom: 5px; }
/* Etichetă existentă pentru cititorul de ecran, invizibilă pe ecran: e nevoie acolo unde titlul
   panoului spune deja despre ce e vorba, dar câmpul rămâne fără nume accesibil. NU folosim
   display:none — ar scoate textul și din arborele de accesibilitate, adică exact ce voiam să evităm.
   Merge cu .ro/.en înăuntru: limba ascunsă e display:none, deci numele rămâne într-o singură limbă. */
label.sr-only {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
input[type=number], input[type=text], input[type=date], select, textarea {
  width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px;
  color: var(--ink); padding: 9px 11px; font: 600 14px var(--font);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); }
textarea { font-weight: 400; resize: vertical; min-height: 60px; }
.chk { display: flex; align-items: flex-start; gap: 8px; margin: 9px 0; color: var(--t2); font-size: 13px; cursor: pointer; line-height: 1.4; }
.chk input { width: 15px; height: 15px; accent-color: var(--green); margin-top: 2px; flex: 0 0 auto; }
.sep { height: 1px; background: var(--border); margin: 14px 0; }

.btn {
  display: inline-block; background: var(--green); color: #0e1113; text-decoration: none;
  border: 0; cursor: pointer; font: 700 13px var(--font); padding: 10px 18px; border-radius: 9px;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn-quiet {
  background: var(--surface2); border: 1px solid var(--border); color: var(--t2);
  border-radius: 8px; padding: 6px 11px; cursor: pointer; font: 600 12px var(--font);
}
.btn-quiet:hover { color: var(--ink); border-color: var(--muted); }

/* ── Tabel de rezultate ── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); }
th:first-child { text-align: left; }
td { padding: 7px 8px; color: var(--t2); border-bottom: 1px solid var(--border); }
td.n { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Mesaje ── */
.err { color: var(--red); font-size: 13px; margin-top: 12px; }
.note { font-size: 12.5px; color: var(--muted); }

/* Avertismentul care trebuie citit, nu ocolit: ambru, cu bară pe stânga. */
.warn {
  background: color-mix(in srgb, var(--amber) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--border));
  border-left: 3px solid var(--amber);
  border-radius: 10px; padding: 12px 14px; margin: 14px 0;
  font-size: 13px; color: var(--t2); line-height: 1.55;
}

/* ── Chemarea spre aplicație ── */
.cta { margin-top: 30px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: var(--radius); padding: 18px 20px; }
.cta h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.cta p { margin: 0 0 12px; font-size: 13.5px; }

/* ── Subsol ── */
footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); font-size: 13px; }
footer a { color: var(--t2); text-decoration: none; margin-right: 14px; }

/* ── Bilingv fără duplicare de pagină ──
   Un singur document, două seturi de texte. Alternativa (două fișiere HTML) s-ar despărți la prima
   modificare făcută doar într-unul. legal.js pune clasa show-en pe body. */
.en { display: none; }
body.show-en .ro { display: none; }
body.show-en .en { display: block; }
span.ro, span.en { display: inline; }
body.show-en span.ro { display: none; }
span.en { display: none; }
body.show-en span.en { display: inline; }

/* ── Tipărire ──
   Rămâne doar rezultatul: cine dă print vrea documentul, nu formularul cu care l-a obținut. */
@media print {
  header, footer, .cta, .tools, .lead, .prose, .panel.inputs, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .grid { grid-template-columns: 1fr; }
  .panel { border: 0; padding: 0; }
  td, th { color: #000; }
}

/* ═══════════════ Atingere: telefon și tabletă ═══════════════

   Ținta e `pointer: coarse`, nu o lățime: o tabletă în orizontal are 1024px și tot cu degetul se
   folosește. Două lucruri de aici nu se văd în emularea de pe desktop, dar strică pagina pe un
   telefon real:

   1. FONT DE 16px PE CÂMPURI. Safari pe iOS mărește TOATĂ pagina când atingi un câmp cu font mai mic
      de 16px, iar apoi nu o micșorează la loc — omul rămâne cu un layout mărit și derulare orizontală.
      Câmpurile erau la 14px (măsurat pe toate cele patru unelte).

   2. ZONE DE ATINGERE. Casetele de bifat erau 15×15px, butoanele 28–30px înălțime. Sub ~40px, un deget
      ratează des; Apple recomandă 44px. Nu mărim doar caseta, ci și zona din jurul etichetei — acolo
      apasă lumea de fapt. */
@media (pointer: coarse) {
  input[type=number], input[type=text], input[type=date], input[type=email], select, textarea {
    font-size: 16px;
    padding: 11px 12px;
  }

  /* Bifele: caseta mai mare ȘI rând mai înalt, ca ținta reală să fie tot rândul. */
  .chk {
    /* 10px sus/jos duc rândul la ~44px, adică ținta recomandată pentru un deget. Eticheta ESTE
       ținta (e un <label>), nu doar pătratul de 20px din stânga. */
    padding: 10px 0;
    font-size: 14px;
    gap: 11px;
  }
  .chk input { width: 20px; height: 20px; margin-top: 1px; }

  .btn { padding: 13px 20px; font-size: 14px; min-height: 44px; }
  .btn-quiet { padding: 10px 14px; font-size: 13px; min-height: 40px; }

  /* Declanșatorul meniului de unelte: zonă de atingere reală, nu doar textul. */
  .tools-menu summary { padding: 10px 2px; font-size: 15px; }
  .tools-pop a { padding: 12px 12px; }
  .tools-pop a strong { font-size: 14.5px; }
  .tools-pop a span { font-size: 12.5px; }

  .lang button { padding: 9px 12px; min-height: 40px; }

  /* Etichetele și textele mărunte cresc puțin: pe un ecran ținut în mână, 12px e sub limita de citit
     confortabil, iar aici sînt exact explicațiile care fac unealta de folos. */
  label { font-size: 12.5px; }
  .note, .anaf-status { font-size: 13px; }
  p, li { font-size: 15.5px; }
  .lead { font-size: 16px; }
}