/* ============================================================================
   32-afacere-date.css · cele PATRU CARDURI CU DATE · namespace `xaf`
   PREVIEW.

   ⚠⚠ ZERO VALORI INVENTATE. Ancorele, ca la loturile dinainte:
        20-grup2.css:82-84       titlu de sectiune  clamp(26,…,34)
        20-grup2.css:88-89       lede               `--xf-sm` 15.5px
        20-grup2.css:91-95       cardul             `--xs-card`, r28→34, --xe-lift
        20-grup2.css:97-99       titlu de card      clamp(21,…,24)
        20-grup2.css:130-137     lista cu separator `--xsep` intre randuri
        22-fair-value.css:74-77  `.xfv__chip` — pastila
        22-fair-value.css:50-56  `.xfv__bento` — grila care isi umple golurile
        22-fair-value.css:83-84  pista `--xbar` / `--xs-track`
        24-proiectii.css:113-114 nota mica `500 13.5px/1.2` pe `--xc-ink3`
        afacere.css              mecanismul ferestrei de ajutor (radio + tooltip)
        raportari.css:497-541    butonul de pliere
        verdict.css:345-357      `scroll-margin-top` 78 / 82px
        30-afacere.css           distanta de 56px intre sectiuni

   ⚠ `xaf` e namespace NOU. Ocupate: xhd xhd2 xvd xvm xvp xar xgh xan xfv xpj
     xab xdp.
   ============================================================================ */

.xaf{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em;
  margin-top:var(--xsp-sec,39px); overflow-x:clip; }
.xaf *{ box-sizing:border-box; border:0; }

.xaf__t{ margin:0; font-size:var(--xt-3); font-weight:700;
  line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.xaf__t::first-letter{ text-transform:uppercase; }
.xaf__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink); }

/* ── BENTO · 2x2 pe desktop, stiva pe mobil ────────────────────────────────
   ⚠ AICI NU E PISTA CU SWIPE, deliberat. Cardurile de la „Despre" au doua
     paragrafe si intra intr-un ecran; astea au pana la opt randuri de date cu
     bara si doua fraze fiecare. Un card inalt intr-o pista orizontala ascunde
     continut in spatele unui gest si rupe derularea verticala a degetului.
     Cele patru raspunsuri se citesc de sus in jos, ca patru intrebari.
   ⚠ `min-width:0` pe celula (R30): fara el, o eticheta lunga de metrica cere
     `min-content` si sparge coloana. */
.xaf__bento{ display:grid; grid-template-columns:1fr; gap:12px; margin:28px 0 0;
  align-items:start; }
.xaf__c{ min-width:0; background:var(--xs-card); border-radius:28px;
  padding:26px 24px 28px; box-shadow:var(--xe-lift); scroll-margin-top:78px; }

/* ── antetul cardului · intrebarea + pastila de scor ───────────────────────
   ⚠ Intrebarea si pastila pe acelasi rand, cu pastila impinsa la dreapta.
     `align-items:baseline` ca pastila sa stea pe linia de baza a titlului, nu
     centrata pe o intrebare care se rupe in doua randuri. */
.xaf__top{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:0 0 12px; }
.xaf__ct{ margin:0; min-width:0; font-weight:600;
  font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; }
.xaf__ct::first-letter{ text-transform:uppercase; }
/* Pastila · declaratiile lui `.xfv__chip` (22-fair-value.css:74).
   ⚠ `--bc` se seteaza inline, din `mds_anz_score_color()`. */
.xaf__chip{ flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:var(--xr-p);
  background:color-mix(in srgb, var(--bc) 16%, transparent);
  color:var(--bc); font-weight:600; font-size:var(--xt-7); font-variant-numeric:tabular-nums; }
/* Fraza de raspuns · `--xf-sm`, ca lede-ul. `b` e cifra din bancă. */
.xaf__cl{ margin:0 0 4px; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink2); }
.xaf__cl b{ color:var(--xc-ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ── lista de metrici ──────────────────────────────────────────────────────
   ⚠ Separator intre randuri prin `--xsep`, ca la `.xan__leg` (20-grup2.css:133):
     un gradient de 1px care se stinge spre dreapta, nu o bordura care taie
     cardul in felii. */
.xaf__l{ list-style:none; margin:16px 0 0; padding:0; }
.xaf__r{ position:relative; padding:14px 0 0; }
.xaf__r + .xaf__r{ margin-top:14px; background:var(--xsep) no-repeat top/100% 1px; }
.xaf__r--gol{ padding:0; margin:0; }

/* rândul de sus: eticheta + cifra */
.xaf__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.xaf__k{ min-width:0; font:500 var(--xf-sm)/1.35 var(--xf); color:var(--xc-ink); }
.xaf__v{ flex:none; font:600 var(--xt-6)/1.2 var(--xf); letter-spacing:-.008em;
  font-variant-numeric:tabular-nums; }

/* ⚠ Iconita de ajutor sta LIPITA de eticheta, nu la capatul randului. Motivul e
   al temei (`analiza-afacere1.php:122`): la capatul unui rand lung pare rupta
   de textul pe care il explica. */
/* ⚠⚠ ICONITA „i" · REGULA UNICA, ACEEASI IN TOATE SECTIUNILE.
   MASURAT inainte: patru fisiere aveau patru reguli diferite si iconita cadea
   la +13px in Bilant, +5px in Context, +3px la Piata si 0 la Profiluri, fata de
   centrul textului. In plus, sarea in aceeasi sectiune (+13 vs +3, +5 vs +25)
   cand eticheta se rupea pe doua randuri.
   `vertical-align:middle` aliniaza mijlocul cutiei cu linia de baza PLUS
   jumatate din inaltimea literei mici — adica exact centrul optic al textului.
   E singura valoare care nu depinde de corpul de litera al etichetei, deci tine
   la 13,5px, la 15,5px si la 17px la fel.
   ⚠ `inline-block`, nu `inline-flex`: linia de baza a unei cutii flex se ia de
     la primul ei element, iar aici continutul vine dintr-un `::before` — de aia
     `baseline` dadea rezultate imprevizibile. */
.xaf__i{ display:inline-block; width:15px; height:15px; margin-left:6px;
  border-radius:50%; background:var(--xs-track); color:var(--xc-ink3);
  font:700 10px/15px var(--xf); font-style:normal; text-align:center;
  vertical-align:middle; }
.xaf__i::before{ content:"i"; }

/* ── bara de percentila ────────────────────────────────────────────────────
   ⚠⚠ BARA E NEUTRA, NU COLORATA DIN `good`. Masurat pe toate cele sapte, 357 de
      perechi: `sector_pct` e deja orientat (mare = bun) si NU se inverseaza
      pentru metricile „mai mic = mai bine"; acordul cu `good` e 88% pe `higher`
      si 95% pe `lower`, iar dezacordurile stau lipite de 50 — `good` judeca pe
      prag absolut, percentila pe unul relativ. Colorata din `good`, o bara la
      percentila 52 ar iesi rosie si si-ar contrazice propria pozitie.
      Culoarea ramane pe CIFRA, unde e si azi.
   ⚠ Inaltimea e `--xbar` / 2: bara asta e un reper secundar pe un rand de
     lista, nu pista principala a unei sectiuni. */
.xaf__tr{ position:relative; height:calc(var(--xbar) / 2); margin:10px 0 0;
  border-radius:var(--xr-p); background:var(--xs-track); overflow:hidden; }
.xaf__fl{ position:absolute; left:0; top:0; height:100%; border-radius:var(--xr-p);
  background:var(--xc-ink); opacity:.86; }
/* Fraza de percentila · `af.percentila`, catalogul temei, cinci limbi. */
.xaf__pc{ margin:8px 0 0; font:400 var(--xt-7)/1.35 var(--xf); color:var(--xc-ink3); }
.xaf__pc b{ color:var(--xc-ink2); font-weight:600; font-variant-numeric:tabular-nums; }
/* Comparatia pe trei niveluri · exista la 6 din 24 de metrici; unde lipseste,
   randul nu se emite deloc (regula ghidului: se omite tacut, nu „N/A"). */
.xaf__cmp{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:6px 0 0;
  font:500 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink3); }
.xaf__cmp b{ color:var(--xc-ink2); font-weight:600; font-variant-numeric:tabular-nums; }

/* ── fereastra de ajutor · pur CSS, tiparul temei ──────────────────────────
   ⚠ Radiouri cu `name` comun pe card, deci doua ferestre nu pot fi deschise
     simultan. Eticheta `.xaf__x` tinteste radioul „niciunul" si inchide.
   ⚠ SELECTOR PE SUFIX DE ID nu e necesar aici: `name` si `id` poarta deja
     `uid`-ul per activ, deci CSS-ul nu se leaga de niciun id. */
/* ⚠⚠ `xaf__rt`, NU `xaf__t`. Prima versiune numea radioul ferestrei `.xaf__t` —
   exact numele TITLULUI DE SECTIUNE, cateva zeci de linii mai sus. A doua regula
   a castigat si titlul a primit `position:absolute; opacity:0`: disparut din
   pagina, fara nicio eroare. Garda mea de coliziuni compara fisiere INTRE ele,
   nu clase in ACELASI fisier — de aceea n-a prins-o; prins masurand stilul
   calculat al titlului, care avea `opacity:0`. */
.xaf__rt{ position:absolute; opacity:0; pointer-events:none; }
.xaf__lb{ display:block; cursor:pointer; }
.xaf__x{ display:none; }
.xaf__tip{ display:none; }
.xaf__rt:checked ~ .xaf__x{ display:block; position:fixed; inset:0; z-index:8; }
.xaf__rt:checked ~ .xaf__tip{
  display:block; position:relative; z-index:9; margin:12px 0 0;
  padding:15px 16px; border-radius:var(--xr-i); background:var(--xs-inset);
  font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); }
.xaf__tip b{ display:block; margin-bottom:5px; color:var(--xc-ink); font-weight:600; }
.xaf__rt:checked ~ .xaf__lb .xaf__i{ background:var(--xc-ink); color:var(--xc-bg); }

/* ── plierea rândurilor suplimentare ───────────────────────────────────────
   ⚠ `display:none` pe randurile ascunse, NU `max-height`: aici nu e un bloc de
     text care se taie, ci randuri intregi. O taietura la jumatatea unei bare ar
     arata ca un bug.
   ⚠ `.xaf__ft` e FRATE cu `.xaf__l`: selectorul e `~`. */
.xaf__ft{ position:absolute; opacity:0; pointer-events:none; }
.xaf__ft:not(:checked) ~ .xaf__l .xaf__r--extra{ display:none; }
/* ⚠ `overflow-anchor` — la inchidere, randurile dispar si pagina ar ramane mai
   jos. Tiparul temei, `raportari.css:578`. Scriptul `mds-xdp.js` acopera Safari
   si cazul in care ancorarea nu ajunge; se leaga de `.xdp__*`, deci pentru
   sectiunea asta ar trebui extins — vezi „Ce nu s-a verificat". */
.xaf__r--extra{ overflow-anchor:none; }
/* ⚠ BUTOANELE SI TABURILE COBOARA O TREAPTA: `--xt-7` (13,5px), nu `--xf-sm`
   (15,5px). 24 din cele 29 stateau exact la marimea prozei pe care o
   intrerup, si la 600 — adica strigau mai tare decat ce scria in ele.
   Cutia ramane neatinsa (44px inaltime, acelasi padding), deci se apasa la
   fel de usor cu degetul. */
.xaf__fx{ overflow-anchor:auto; }

/* ⚠ Aceeasi raza si acelasi comportament ca `.xdp__fx` si `.xar__more`: trei
   butoane cu acelasi rol pe aceeasi pagina trebuie sa arate identic. */
.xaf__fx{ display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin:18px 0 0; padding:13px 16px; min-height:44px;
  border-radius:var(--xr-p); background:var(--xs-inset);
  font:600 var(--xt-7)/1 var(--xf); color:var(--xc-ink); cursor:pointer;
  transition:background .15s ease; }
.xaf__fx:hover{ background:#141417; }
.xaf__fx::after{ content:""; width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg); transition:transform .18s ease; }
/* ⚠ Fondul ramane si la deschis — vezi nota de la `.xdp__fx`. */
.xaf__ft:checked ~ .xaf__fx{ color:var(--xc-ink2); }
.xaf__ft:checked ~ .xaf__fx::after{ transform:translateY(2px) rotate(-135deg); }
.xaf__fb{ display:none; }
.xaf__ft:checked ~ .xaf__fx .xaf__fa{ display:none; }
.xaf__ft:checked ~ .xaf__fx .xaf__fb{ display:block; }

/* Nota de subsol a sectiunii · cea mai mica treapta, ca `.xan__src`
   (20-grup2.css:196). */
.xaf__nota{ margin:18px 0 0; font:400 var(--xt-8)/1.5 var(--xf); color:var(--xc-ink3); }

/* ⚠ SEPARATORUL DE SUB SECTIUNE, ca la `20-grup2.css:203` si `30-afacere.css`. */
.mdsx .xaf + .band{ border-top:0; background-image:none; }

@media (prefers-reduced-motion:reduce){
  .xaf__fx,.xaf__fx::after{ transition:none; }
}

/* ══ DESKTOP · pragul temei, pe CONTAINER (20-grup2.css:207) ══ */
@container mdsx (min-width:900px){
  .xaf__bento{ grid-template-columns:1fr 1fr; gap:13px; }
  .xaf__c{ border-radius:var(--xr-c); padding:29px 31px 31px; scroll-margin-top:82px; }
  /* ⚠ SUPRASCRIEREA DE DESKTOP A FOST SCOASA. Era `font-size:18px` peste un
     `17px` de baza — doua cifre la un pixel una de alta, adica exact ce strange
     scara. Pe jetoane iesea T6 pe mobil si T5 pe desktop, un salt de doua
     trepte pentru aceeasi cifra. Ramane T6 la amandoua latimi. */
}