/* ============================================================================
   52-profiluri.css · GRUPUL 8 · „Cui i se potriveste"   namespace `xpf`  PREVIEW

   ⚠⚠ ZERO VALORI INVENTATE, si ZERO TREPTE DE LITERA NOI. Toate corpurile de
      mai jos sunt trepte care exista deja in tema — le-am numarat pe cele 18
      fisiere de sectiuni inainte sa aleg:
        21px (18 aparitii) · 20px (11) · 15,5px `--xf-sm` · 13,5px (58) ·
        12px (16) · 11px (11)
   ⚠ Ancorele de forma:
        20-grup2.css:82-99        titlu de sectiune, lede, card, titlu de card
        22-fair-value.css:71-77   `.xfv__badge` / `.xfv__chip`
        10-antet-date.css         `conic-gradient` — tehnica exista deja
        42-dividende.css          butonul de pliere si sageata lui
        50-piata.css              fereastra de ajutor

   ⚠ `xpf` e namespace NOU. Ocupate: xhd xhd2 xvd xvm xvp xar xgh xan xfv xpj
     xab xdp xaf xfn xrp xrs xcz xdv xrd xfx xct xpm.
   ============================================================================ */

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

.xpf__t{ margin:0; font-size:var(--xt-3); font-weight:700;
  line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.xpf__t::first-letter{ text-transform:uppercase; }
.xpf__badge{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px; margin:14px 0 0; }
/* ⚠ Pastila de sus e NEUTRA: „10 din 27" e o numaratoare, nu o nota. */
.xpf__chip{ flex:none; display:inline-flex; align-items:baseline; gap:7px;
  padding:5px 12px; border-radius:var(--xr-p); background:var(--xs-inset);
  font:500 var(--xt-8)/1.2 var(--xf); color:var(--xc-ink3); letter-spacing:0; }
.xpf__chip b{ font-weight:600; font-size:var(--xt-7); color:var(--xc-ink);
  font-variant-numeric:tabular-nums; }
.xpf__chip em{ font-style:normal; }
.xpf__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink); }
.xpf__lede b{ color:var(--xc-ink); font-weight:600; }
.xpf__n{ margin:14px 0 0; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); }

/* ══ PUNCTUL TARE SI PUNCTUL SLAB ═══════════════════════════════════════════
   ⚠⚠ FARA MUCHIE COLORATA si pe FONDUL CARDULUI (`--xs-card`), nu pe cel de
      celula — cerut. Cele doua cutii sunt de acelasi rang cu cardul de
      dimensiuni de dedesubt, deci trebuie sa arate ca el; muchia le facea sa
      para un avertisment.
   ⚠⚠ NUMELE E MAI MARE DECAT ETICHETA. Prima versiune facea invers — „Punctul
      tare" la 17px, „Sanatate financiara" la 15,5 — si argumentasem ca eticheta
      e intrebarea. Gresit: eticheta e o legenda care se citeste o data,
      raspunsul e ce cauta ochiul de fiecare data. Acum eticheta 13,5px (treapta
      cu 58 de aparitii in tema, cea a notelor) si raspunsul 20px (11 aparitii,
      treapta cifrelor de celula).
   ⚠ DOUA PE RAND SI PE TELEFON — cerut. Sunt o pereche care se citeste dintr-o
      privire; una sub alta ar fi sugerat o ordine care nu exista. */
.xpf__tens{ display:grid; gap:10px; margin:22px 0 0;
  grid-template-columns:repeat(2, minmax(0,1fr)); }
.xpf__tc{ min-width:0; padding:18px 20px; border-radius:var(--xr-i);
  background:var(--xs-card); box-shadow:var(--xe-lift); }
/* ⚠ `--xf-sm` (15,5px) si ALB. La 13,5px gri eticheta devenise prea stinsa —
   corectie peste corectie: prima data era 17px si concura cu raspunsul, apoi
   13,5px gri si se pierdea. 15,5px alb o tine lizibila fara s-o ridice peste
   raspunsul de 20px: ierarhia o duc acum si marimea, si culoarea. */
.xpf__tc span{ display:block; font:500 var(--xf-sm)/1.3 var(--xf); color:var(--xc-ink); }
.xpf__tc b{ display:block; margin-top:4px; font:600 var(--xt-5)/1.2 var(--xf);
  letter-spacing:-.014em; }
.xpf__tc.is-s b{ color:var(--xc-lime); }
.xpf__tc.is-w b{ color:var(--xc-pink); }

/* ══ CARDUL ═════════════════════════════════════════════════════════════════ */
.xpf__bento{ margin:14px 0 0; }
.xpf__card{ min-width:0; background:var(--xs-card); border-radius:28px;
  padding:10px 20px; box-shadow:var(--xe-lift); scroll-margin-top:78px; }

/* invelisul celor sase dimensiuni */
.xpf__dims{ display:block; }

/* ══ O DIMENSIUNE ═══════════════════════════════════════════════════════════
   ⚠⚠ FIECARE DIMENSIUNE ISI DESCHIDE PROPRIILE VERIFICARI. Prima versiune avea
      un al doilea card cu toate cele 28 la rand — o lista lunga care repeta
      numele dimensiunilor aratate alaturi si in care nu gaseai nimic.
   ⚠ Pliere pur CSS, cu `checkbox`: mai multe dimensiuni pot fi deschise
     simultan, spre deosebire de ferestrele de ajutor, unde radioul le tine
     exclusive. Aici compararea a doua dimensiuni e legitima. */
.xpf__d{ position:relative; }
.xpf__d + .xpf__d{ background:var(--xsep) no-repeat top/100% 1px; }
.xpf__ft{ position:absolute; opacity:0; pointer-events:none; }
/* ⚠ Numele si profilul iau randul; banda e a doua coloana, cu latime proprie.
   Pe telefon banda trece sub nume, ca fraza de profil sa nu se rupa in cuvinte. */
.xpf__dh{ display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center; gap:10px 14px; padding:16px 4px; cursor:pointer; }
.xpf__dh:not(label){ cursor:default; }

/* ── banda de segmente ─────────────────────────────────────────────────────
   ⚠⚠ BENZI, NU INELE — cerut, si e alegerea mai buna. Inelul cerea o cifra in
      mijloc, iar la 60px cifra si inelul se inghesuiau. Banda are toata latimea
      randului si — mai important — SE COMPARA intre randuri: sase inele
      alaturate nu se compara, sase benzi cu acelasi capat de start, da.
   ⚠ SEGMENTE, NU O BARA CONTINUA. Numitorul e mic si cunoscut (1-6), deci
      fiecare verificare are casuta ei: „5 din 6" se numara cu ochiul. O bara
      continua ar fi aratat proportia, dar ar fi ascuns cate verificari sunt.
   ⚠ Inaltimea e `--xbar / 2`, treapta reperelor secundare din tema; raza
      `--xr-p`, ca toate pistele. */
/* ⚠⚠ PE TELEFON BANDA TINE RANDUL INTREG. Cu `auto`, latimea ei se lua din
   textul fractiei — „5 din 6" e mai lat decat „0 din 1" — deci benzile ieseau de
   doua latimi diferite si nu se mai comparau intre ele. Masurat: doua latimi la
   390px, una singura dupa. Exact motivul pentru care am trecut de la inele la
   benzi: comparatia pe verticala. */
.xpf__sc{ grid-column:1 / -1; display:flex; align-items:center; gap:12px;
  min-width:0; margin-top:2px; }
.xpf__sc .xpf__bar{ flex:1 1 auto; }
.xpf__bar{ display:flex; gap:3px; }
.xpf__bar i{ display:block; flex:1 1 0; min-width:6px; height:calc(var(--xbar) / 2);
  border-radius:var(--xr-p); background:var(--xs-track); }
.xpf__fr{ font:500 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink3);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── numele si fractia ── */
.xpf__dl{ min-width:0; }
.xpf__dl b{ display:block; font:600 var(--xt-6)/1.25 var(--xf); letter-spacing:-.012em;
  color:var(--xc-ink); }
/* ⚠ Fraza de profil, sub nume: ea raspunde la titlul sectiunii. */
.xpf__dl em{ display:block; margin-top:4px; font:400 var(--xt-7)/1.4 var(--xf);
  font-style:normal; color:var(--xc-ink3); }

/* ── pastila de verdict ────────────────────────────────────────────────────
   ⚠⚠ PASTILA COLORATA, nu un cuvant gri sub nume. Era informatia cea mai
      comprimata din rand — „solid", „slab" — si arata ca o subsolare.
   ⚠ Fondul e culoarea la 14%, textul la plin: contrastul ramane al textului,
     iar fondul doar o incadreaza. `color-mix` e folosit deja in tema. */
/* ⚠ `justify-self:start` in blocul de BAZA, nu doar pe desktop. Pe telefon
   banda tine randul intreg, deci pastila ajunge singura pe randul urmator si,
   fara asta, se intindea pe toata latimea — un dreptunghi rosu de 250px pentru
   cuvantul „Slab". Prins pe captura de 390px. */
.xpf__v{ justify-self:start; flex:none; padding:5px 12px; border-radius:var(--xr-p);
  background:color-mix(in srgb, var(--k) 14%, transparent);
  font:600 var(--xt-8)/1.3 var(--xf); color:var(--k); white-space:nowrap; }
.xpf__v::first-letter{ text-transform:uppercase; }

/* ── sageata ── */
.xpf__ch{ flex:none; width:9px; height:9px; margin-right:4px;
  border-right:2px solid var(--xc-ink3); border-bottom:2px solid var(--xc-ink3);
  transform:translateY(-3px) rotate(45deg); transition:transform .18s ease; }
.xpf__ft:checked ~ .xpf__dh .xpf__ch{ transform:translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion:reduce){ .xpf__ch{ transition:none; } }

/* ── verificarile dimensiunii ── */
.xpf__ver{ display:none; padding:2px 4px 18px; }
.xpf__ft:checked ~ .xpf__ver{ display:block; }
.xpf__lst{ list-style:none; margin:0; padding:0; }
.xpf__ck{ position:relative; display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:8px 16px; padding:10px 0;
  font:400 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xpf__ck + .xpf__ck{ background:var(--xsep) no-repeat top/100% 1px; }
.xpf__cl{ min-width:0; cursor:default; }
label.xpf__cl{ cursor:pointer; }
/* ⚠ CUVANTUL E RASPUNSUL, culoarea doar il accentueaza: „trecut" si „picat" se
   citesc si in tonuri de gri. */
.xpf__cs{ flex:none; font-weight:600; white-space:nowrap; }
.xpf__ck.is-da .xpf__cs{ color:var(--xc-lime); }
.xpf__ck.is-nu .xpf__cs{ color:var(--xc-pink); }
.xpf__ck.is-na .xpf__cs{ color:var(--xc-ink4); }
.xpf__ck.is-na .xpf__cl{ color:var(--xc-ink3); }

/* fereastra de ajutor · aceeasi mecanica pur CSS ca in restul paginii
   ⚠ CLASA E `xpf__rt`, NU `xpf__t`: `xpf__t` e TITLUL DE SECTIUNE. */
.xpf__rt{ position:absolute; opacity:0; pointer-events:none; }
.xpf__x{ display:none; }
.xpf__tip{ display:none; }
.xpf__rt:checked ~ .xpf__x{ display:block; position:fixed; inset:0; z-index:8; }
.xpf__rt:checked ~ .xpf__tip{ display:block; flex-basis:100%; position:relative; z-index:9;
  margin:4px 0 2px; padding:13px 14px; border-radius:14px; background:var(--xs-track);
  font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); }
.xpf__tip b{ display:block; margin-bottom:5px; color:var(--xc-ink); font-weight:600; }
/* ⚠⚠ 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. */
.xpf__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; }
.xpf__i::before{ content:"i"; }
.xpf__rt:checked ~ .xpf__cl .xpf__i{ background:var(--xc-ink); color:var(--xc-bg); }

.mdsx .xpf + .band{ border-top:0; background-image:none; }

@container mdsx (min-width:900px){
  .xpf__card{ border-radius:var(--xr-c); padding:12px 28px; scroll-margin-top:82px; }
  /* ⚠ Cele doua cutii de sinteza stau alaturi de la 900px: sunt o pereche, iar
     una sub alta ar fi sugerat o ordine care nu exista. */
  .xpf__tens{ gap:13px; }
  /* ⚠⚠ SI COLOANA DE VERDICT ARE LATIME FIXA. Cu `auto`, latimea ei se lua din
     cuvant — „Solid" e mai lat decat „Mixt" — si impingea banda: masurat, trei
     capete de start diferite (1069, 1066, 1070px). Cinci pixeli nu se vad ca
     greseala, se vad ca neglijenta, si strica exact comparatia pe verticala
     pentru care am pus benzi. */
  .xpf__dh{ padding:20px 6px; gap:11px 16px;
    grid-template-columns:minmax(0,1fr) 200px 84px auto; }
  /* ⚠ 200px FIX pentru banda, pe desktop: benzile trebuie sa aiba acelasi capat
     de start si aceeasi lungime, altfel nu se mai compara intre randuri — exact
     motivul pentru care am trecut de la inele la benzi. */
  /* pe desktop revine in randul ei, cu latime fixa */
  .xpf__sc{ grid-column:auto; width:200px; flex-direction:column;
    align-items:stretch; gap:7px; margin-top:0; }
  .xpf__ver{ padding:2px 6px 22px; }
}