/* ============================================================================
   34-financiare.css · §12 DATE FINANCIARE · namespace `xfn`   PREVIEW

   ⚠⚠ ZERO VALORI INVENTATE. Ancorele:
        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:130-137     lista cu separator `--xsep`
        22-fair-value.css:74-77  `.xfv__chip` - pastila
        22-fair-value.css:79     `.xfv__meta` - randul de meta
        24-proiectii.css:109-114 `.xpj__mc` - adancitura de reper
        14-argumente.css:40-53   `.xar__tabs` - banda de taburi
        12-verdict.css:256-260   pista cu bara ascunsa
        30-afacere.css           distanta de 56px intre sectiuni
        verdict.css:345-357      `scroll-margin-top` 78 / 82px
      Logica pastrata din `date-financiare.css`, cu motivele ei, e marcata
      „nota veche".

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

.xfn{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em;
  margin-top:var(--xsp-sec,39px);
  /* ⚠ nota veche: `--fin-sus` = cat de jos incepe zona lipita (headerul temei),
     `--fin-ctrl` = inaltimea barei de comutatoare. Scriptul le CITESTE de aici;
     nu le masoara, i le impun. */
  /* ⚠ `--xfn-ctrl` TREBUIE sa fie inaltimea REALA a barei lipicioase: scriptul o
     citeste ca sa stie de unde incepe banda cu anii. Cifrele de mai jos sunt
     MASURATE pe randare, nu alese: taburi 45px + gutiera 10px + randul de
     segmente 36px = 91px pe mobil; pe desktop totul intra pe un rand, 46px.
     ⚠ Prima incercare a fost 80px si 44px, adica SUB naltimea reala - iar bara
       are inaltime impusa, deci copiii s-au strans si textul a iesit din
       pastile. Prins masurand `scrollHeight` fata de `clientHeight`. */
  --xfn-sus:0px; --xfn-ctrl:91px; }
.xfn *{ box-sizing:border-box; border:0; }

.xfn__t{ margin:0; font-size:var(--xt-3); font-weight:700;
  line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.xfn__t::first-letter{ text-transform:uppercase; }
.xfn__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink); }
/* ⚠ Comutatoarele ies din flux. Nota veche: focusul mutat de o eticheta ar
   derula pagina daca `input`-ul ar sta in fluxul normal. */
.xfn__r{ position:fixed; top:0; left:0; width:0; height:0; opacity:0;
  pointer-events:none; }

/* ══ BARA DE COMUTATOARE ════════════════════════════════════════════════════
   ⚠ LIPITA SUB ANTETUL TEMEI. Nota veche: un tabel de patruzeci de randuri se
     citeste degeaba daca anii au iesit din ecran. Bara ramane la vedere, iar
     banda cu anii (JS) se aseaza exact sub ea. */
.xfn__ctrl{ position:sticky; top:var(--xfn-sus); z-index:8;
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  height:var(--xfn-ctrl); box-sizing:border-box;
  margin:24px 0 0; background:var(--xc-bg); }
/* ⚠⚠ `flex:none` PE AMANDOUA. Bara are inaltime IMPUSA (scriptul o citeste din
   `--xfn-ctrl` ca sa stie de unde incepe banda lipicioasa). Fara `flex:none`,
   copiii se STRANG cand suma lor depaseste inaltimea impusa: masurat la 390px,
   pista de taburi ajungea la 32px cu pastile de 34px inauntru, iar textul iesea
   sub marginea de jos a pastilei. Asta era buguletul cu „Cont de profit lipit de
   marginea de jos" - nu o problema de aliniere, ci una de inaltime. */
.xfn__ctrl > *{ flex:none; }

/* Taburile situatiei · culorile si formele de la `.xpj__tabs`
   (24-proiectii.css:45-49): adancitura `--xs-track`, pastila `--xr-p`,
   `600 var(--xf-sm)/1.2` pe `--xc-ink3`, activ pe `--xs-card`/`--xc-ink`.
   ⚠ `line-height:1.2`, nu 1: cu 1 pastila avea 34px iar textul 15,5px, si orice
     strangere a containerului scotea litera din cutie.
   ⚠ `width:fit-content; max-width:100%` - ca la Proiectii: banda e cat cuprinde,
     nu cat randul.
   ⚠ Pista cu bara ascunsa, ca la `.xvp__tr` (12-verdict.css:256): pe 390px cele
     trei etichete („Cont de profit", „Bilant", „Fluxuri de numerar") nu incap. */
.xfn__tabs{ display:flex; gap:6px; padding:4px; border-radius:var(--xr-p);
  background:var(--xs-track); width:fit-content; max-width:100%;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none; }
.xfn__tabs::-webkit-scrollbar{ display: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. */
.xfn__tab{ flex:none; padding:9px 16px; border-radius:var(--xr-p);
  font:600 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink3); white-space:nowrap;
  cursor:pointer; transition:background .15s ease, color .15s ease; }
.xfn__tab:hover{ color:var(--xc-ink); }

/* ⚠ UN SINGUR RAND, cu derulare daca nu incape. Cerut: „Anual, Trimestrial,
   Sume, Procente si bifa sa incapa pe un rand daca e posibil". La 390px suma lor
   masurata e 444px, deci NU incap - dar `flex-wrap:wrap` le rupea in doua
   randuri si urca bara la 96px. Pista le tine pe un rand si le face accesibile
   prin swipe, ca taburile de deasupra. */
.xfn__right{ display:flex; flex-wrap:nowrap; align-items:center; gap:10px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none; }
.xfn__right::-webkit-scrollbar{ display:none; }
.xfn__right > *{ flex:none; }
/* Segmentele · aceleasi culori ca taburile, o treapta mai mica. */
.xfn__seg{ display:flex; gap:4px; padding:3px; border-radius:var(--xr-p);
  background:var(--xs-track); }
.xfn__sg{ padding:7px 13px; border-radius:var(--xr-p);
  font:600 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink3); white-space:nowrap;
  cursor:pointer; transition:background .15s ease, color .15s ease; }
.xfn__sg:hover{ color:var(--xc-ink); }
.xfn__det{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:500 var(--xt-7)/1 var(--xf); color:var(--xc-ink3); }
.xfn__det:hover{ color:var(--xc-ink); }
.xfn__box{ width:15px; height:15px; border-radius:5px; background:var(--xs-track);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }

/* ⚠⚠ STAREA · SELECTORI PE SUFIX DE ID (R7). Id-urile poarta `uid` per activ,
   deci CSS-ul nu se poate lega de ele direct. Sectiunea veche folosea
   `#fs-is`, `#fp-a`, `#fd` - id-uri FIXE in tot documentul. */
.xfn:has([id$="-fs-is"]:checked) .xfn__tab:nth-child(1),
.xfn:has([id$="-fs-bs"]:checked) .xfn__tab:nth-child(2),
.xfn:has([id$="-fs-cf"]:checked) .xfn__tab:nth-child(3){
  background:var(--xs-card); color:var(--xc-ink); }
.xfn:has([id$="-fp-a"]:checked) .xfn__seg:not(.xfn__seg--fmt) .xfn__sg:nth-child(1),
.xfn:has([id$="-fp-t"]:checked) .xfn__seg:not(.xfn__seg--fmt) .xfn__sg:nth-child(2),
.xfn:has([id$="-fm-v"]:checked) .xfn__seg--fmt .xfn__sg:nth-child(1),
.xfn:has([id$="-fm-p"]:checked) .xfn__seg--fmt .xfn__sg:nth-child(2){
  background:var(--xs-card); color:var(--xc-ink); }
.xfn:has([id$="-fd"]:checked) .xfn__box{ background:var(--xc-ink); box-shadow:none; }

/* panourile */
.xfn__pan{ display:none; }
.xfn:has([id$="-fs-is"]:checked):has([id$="-fp-a"]:checked) .xfn__pan--isa,
.xfn:has([id$="-fs-is"]:checked):has([id$="-fp-t"]:checked) .xfn__pan--ist,
.xfn:has([id$="-fs-bs"]:checked):has([id$="-fp-a"]:checked) .xfn__pan--bsa,
.xfn:has([id$="-fs-bs"]:checked):has([id$="-fp-t"]:checked) .xfn__pan--bst,
.xfn:has([id$="-fs-cf"]:checked):has([id$="-fp-a"]:checked) .xfn__pan--cfa,
.xfn:has([id$="-fs-cf"]:checked):has([id$="-fp-t"]:checked) .xfn__pan--cft{ display:block; }
/* nota veche: subcomponentele sunt ascunse implicit; „toate randurile" le arata */
.xfn__tbl tr.lv2{ display:none; }
.xfn:has([id$="-fd"]:checked) .xfn__tbl tr.lv2{ display:table-row; }
/* nota veche: comutatorul Sume / Procente schimba ce celula se vede */
.xfn__vp{ display:none; }
.xfn:has([id$="-fm-p"]:checked) .xfn__va{ display:none; }
.xfn:has([id$="-fm-p"]:checked) .xfn__vp{ display:inline; }

/* ══ REPERELE ═══════════════════════════════════════════════════════════════
   ⚠ Adancitura e `.xpj__mc` (24-proiectii.css:109): `padding:15px 16px`,
     `--xr-i`, `--xs-inset`; eticheta `500 var(--xf-sm)/1.4` pe `--xc-ink2`.
     Cifra urca la 20px, ca la minicardurile de la Proiectii. */
/* ⚠ PISTA, NU GRILA. Cerut: cele trei pe un rand, cu swipe. Aceeasi mecanica
     de la `.xab__tri` (30-afacere.css): flex + snap + bara ascunsa +
     `min-width:0` pe pista (R30 - fara el pista se INTINDE in loc sa deruleze).
   ⚠ FUNDALUL E `--xs-card`, ca la `.xaf__c` (32-afacere-date.css), nu
     `--xs-inset`: reperele sunt carduri de sine statatoare, nu adancituri
     dintr-un card. Vine si `--xe-lift`, care merge cu suprafata aia.
   ⚠ COTA 78% pe mobil: la 390px o treime ar da 110px, iar „$94,83 mld" la 20px
     cere ~120px plus 32px padding. 78% da ~273px si lasa al doilea card sa se
     vada pe sfert, ceea ce spune ca pista deruleaza. */
.xfn__ks{ min-width:0; display:flex; gap:10px; margin:20px 0 0; padding:2px 0;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; }
.xfn__ks::-webkit-scrollbar{ display:none; }
.xfn__k{ min-width:0; flex:0 0 78%; scroll-snap-align:start;
  padding:18px 20px 20px; border-radius:var(--xr-i);
  background:var(--xs-card); box-shadow:var(--xe-lift); }
.xfn__kl{ display:block; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xfn__kl::first-letter{ text-transform:uppercase; }
.xfn__kv{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 9px; margin-top:2px;
  font:600 var(--xt-5)/1.1 var(--xf); letter-spacing:-.014em; font-variant-numeric:tabular-nums; }
/* Pastila de variatie · `.xfv__chip` (22-fair-value.css:74), o treapta mai mica. */
.xfn__chip{ display:inline-flex; align-items:center; padding:3px 9px;
  border-radius:var(--xr-p); background:color-mix(in srgb, var(--bc) 16%, transparent);
  color:var(--bc); font:600 var(--xt-8)/1 var(--xf); font-variant-numeric:tabular-nums; }
/* ⚠ nota veche: scara are SEMN. Daca seria coboara sub zero, apare linia de zero
   si barele merg in jos; fara ea, −120 mld ar arata identic cu +120 mld. */
.xfn__kc{ display:flex; align-items:stretch; gap:3px; position:relative;
  height:46px; margin-top:12px; }
.xfn__bc{ position:relative; flex:1; border-radius:2px; background:var(--xs-track); }
.xfn__bc i{ position:absolute; left:0; right:0; border-radius:2px; }
/* ⚠ nota veche: sezonalitatea e o LINIUTA, nu o culoare - culoarea e deja luata
   de semnul valorii, iar doua coduri pe acelasi element nu se citesc. */
.xfn__bc.is-sez::after{ content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:1.5px; border-radius:1px; background:var(--xc-ink2); opacity:.55; }
.xfn__b0{ position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,.18);
  pointer-events:none; z-index:2; }

/* ── coloane apasabile ──────────────────────────────────────────────────────
   ⚠ Radiourile ies din flux; altfel ar ocupa loc in randul de coloane si ar
     strica latimile. `position:absolute` fata de `.xfn__kc`, care e `relative`.
   ⚠ Suprafata de atins e TOATA coloana, nu doar bara colorata: la o valoare
     mica bara are 3% din 46px, adica sub 2px - imposibil de nimerit cu degetul.
     Coloana are latimea ei intreaga si toata inaltimea graficului. */
.xfn__bt{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
label.xfn__bc{ cursor:pointer; }
label.xfn__bc:hover{ background:#232327; }
.xfn__bt:checked + .xfn__bc{ background:#2b2b31;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }

/* randul de sub grafic · capetele seriei, sau perioada selectata */
.xfn__kx{ display:flex; justify-content:space-between; margin-top:7px; }
.xfn__kx i{ font:500 var(--xt-8)/1 var(--xf); font-style:normal; color:var(--xc-ink3); }
.xfn__kd{ display:none; margin-top:7px; }
.xfn__kd i{ display:none; font:500 var(--xt-8)/1 var(--xf); font-style:normal;
  color:var(--xc-ink); font-variant-numeric:tabular-nums; }
.xfn__kd i b{ margin-right:8px; font-weight:600; color:var(--xc-ink3); }
.xfn__kd .xfn__z{ display:inline; margin:0; }

/* ⚠⚠ CAND O COLOANA E SELECTATA, randul de capete SE INLOCUIESTE cu detaliul -
   nu se adauga sub el. Adaugat, cardul ar fi crescut cu un rand la prima apasare
   si toate cele trei carduri de pe pista ar fi sarit. Inlocuit, inaltimea nu se
   schimba deloc. */
.xfn__k:has(.xfn__bt:checked) .xfn__kx{ display:none; }
.xfn__k:has(.xfn__bt:checked) .xfn__kd{ display:block; }
/* ⚠ Zece reguli, nu una: seria are cel mult zece perioade anuale (`asset.py`
   trimite 10 exercitii si 8 trimestre). Selectorul leaga id-ul pe SUFIX de
   pozitia din randul de detaliu, ca marcajul sa poarte `uid`-ul per activ (R7). */
.xfn__k:has([id$="-b0"]:checked) .xfn__kd i:nth-child(1),
.xfn__k:has([id$="-b1"]:checked) .xfn__kd i:nth-child(2),
.xfn__k:has([id$="-b2"]:checked) .xfn__kd i:nth-child(3),
.xfn__k:has([id$="-b3"]:checked) .xfn__kd i:nth-child(4),
.xfn__k:has([id$="-b4"]:checked) .xfn__kd i:nth-child(5),
.xfn__k:has([id$="-b5"]:checked) .xfn__kd i:nth-child(6),
.xfn__k:has([id$="-b6"]:checked) .xfn__kd i:nth-child(7),
.xfn__k:has([id$="-b7"]:checked) .xfn__kd i:nth-child(8),
.xfn__k:has([id$="-b8"]:checked) .xfn__kd i:nth-child(9),
.xfn__k:has([id$="-b9"]:checked) .xfn__kd i:nth-child(10){ display:block; }

/* ══ CARDUL CU TABEL ════════════════════════════════════════════════════════
   ⚠ Tabelul intra intr-un card `--xs-card`, ca toate celelalte sectiuni
     refacute. Padingul lateral e ZERO: coloana cu denumiri e `sticky left:0` si
     trebuie sa se lipeasca de marginea cardului, nu de o gutiera. Aerul il dau
     celulele. */
/* ⚠ `scroll-margin-top` e valoarea TEMEI (verdict.css:348) PLUS inaltimea barei
     lipicioase de comutatoare: la inchiderea plierii, `mds-xdp.js` face
     `scrollIntoView({block:'start'})`, iar fara marja cardul ar ajunge sub bara,
     nu sub antetul paginii. */
.xfn__card{ margin:12px 0 0; background:var(--xs-card); border-radius:28px;
  padding:0; box-shadow:var(--xe-lift); overflow:hidden;
  scroll-margin-top:calc(78px + var(--xfn-ctrl)); }

/* ⚠ nota veche: DERULARE LATERALA, SI ATAT. Fara inaltime marginita, deci pe
   verticala deruleaza PAGINA. Coloana cu denumiri e `sticky left`.
   ⚠ ANTETUL DIN TABEL NU SE LIPESTE si nici nu incearca: `overflow-x:auto` face
     containerul scrollport, deci `sticky` s-ar raporta la el si ar ateriza in
     mijlocul tabelului. Lipirea o face banda desenata de `mds-xfn.js`. */
.xfn__sc{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
.xfn__tbl{ border-collapse:collapse; width:max-content; min-width:100%;
  font-variant-numeric:tabular-nums; }
.xfn__tbl th,.xfn__tbl td{ padding:0; font-weight:400; }

.xfn__tbl thead th{ background:var(--xs-card);
  padding:18px 14px 12px; font:600 var(--xt-8)/1 var(--xf); letter-spacing:.04em;
  text-transform:uppercase; color:var(--xc-ink2); text-align:right; white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.08); }
/* coltul: lipit la stanga, deci deasupra celorlalte */
.xfn__tbl thead th:first-child{ position:sticky; left:0; z-index:6;
  background:var(--xs-card); text-align:left; padding-left:24px; min-width:200px; }
.xfn__tbl tbody th{ position:sticky; left:0; z-index:2; background:var(--xs-card);
  padding:12px 14px 12px 24px; text-align:left;
  font:500 var(--xf-sm)/1.35 var(--xf); color:var(--xc-ink2); }
.xfn__tbl td{ padding:12px 14px; text-align:right;
  font:500 var(--xf-sm)/1.3 var(--xf); color:var(--xc-ink2); white-space:nowrap; }
.xfn__tbl td:last-child{ padding-right:24px; }
.xfn__tbl tbody tr:hover td{ background:rgba(255,255,255,.028); }
.xfn__tbl tbody tr:hover th{ background:#17171a; }

/* niveluri · nota veche: 0 = total ingrosat, 1 = componenta, 2 = subcomponenta */
.xfn__tbl tr.lv0 th{ color:var(--xc-ink); font-weight:600; }
.xfn__tbl tr.lv0 td{ color:var(--xc-ink); font-weight:600; }
.xfn__tbl tr.lv0 th,.xfn__tbl tr.lv0 td{ border-top:1px solid rgba(255,255,255,.13); }
.xfn__tbl tr.lv1 th,.xfn__tbl tr.lv1 td{ border-top:1px solid rgba(255,255,255,.06); }
.xfn__tbl tr.lv2 th{ padding-left:44px; color:var(--xc-ink3); font-size:var(--xt-7); }
.xfn__tbl tr.lv2 td{ color:var(--xc-ink3); font-size:var(--xt-7); }
.xfn__tbl td.is-neg{ color:var(--xc-pink); }
.xfn__tbl tr.lv2 td.is-neg{ color:color-mix(in srgb, var(--xc-pink) 70%, transparent); }
/* ⚠ nota veche: marjele sunt derivate si SCRIE PE ELE, cu `=` si cursiv. */
.xfn__tbl tr.xfn__der th{ font-style:italic; color:var(--xc-ink3); }
.xfn__tbl tr.xfn__der td{ color:var(--xc-ink3); }
.xfn__tbl tr.xfn__der th::before{ content:"= "; opacity:.5; }
.xfn__z{ font-style:normal; color:var(--xc-ink4); }

/* ── PRIMA COLOANA DE DATE · perioada recenta ──────────────────────────────
   ⚠⚠ VARIATIA NU MAI E COLOANA SEPARATA. Era, si impingea anii la dreapta: prima
      cifra pe care o vedea ochiul era un procent, nu o suma - pe dos fata de cum
      se citeste un tabel financiar. Acum sta IN celula recenta, dupa cifra:
      sageata, suma, variatia.
   ⚠⚠ CULOAREA E DIRECTIA, NU JUDECATA. „Cheltuieli +20%" iese verde, desi nu e o
      veste buna. Tabelul arata cifre BRUTE; judecata sta in §13, iar ghidul o
      spune explicit (`SECTIUNE_12` §9: „fara interpretare aici"). Legenda o scrie. */
.xfn__nh i{ display:block; margin-top:4px; font-style:normal; font-weight:500;
  font-size:var(--xt-8); letter-spacing:.02em; color:var(--xc-ink4);
  text-transform:none; white-space:nowrap; }
.xfn__now{ box-shadow:inset -1px 0 0 rgba(255,255,255,.06); }
.xfn__ar{ margin-right:6px; vertical-align:1px; }
.xfn__ar.is-up{ color:var(--xc-lime); }
.xfn__ar.is-dn{ color:var(--xc-pink); }
/* ⚠ Variatia pe rand propriu sub cifra, nu langa ea: langa, celula recenta ar fi
     ajuns cu ~70px mai lata decat vecinele si coloana ar fi sarit din rand. */
.xfn__d{ display:block; margin-top:3px; font:600 var(--xt-8)/1.2 var(--xf);
  font-variant-numeric:tabular-nums; }
.xfn__d.is-up{ color:var(--xc-lime); }
.xfn__d.is-dn{ color:var(--xc-pink); }

/* ── explicatia, ca rand propriu sub randul cu cifre ───────────────────────
   ⚠ nota veche: NU e o fereastra plutitoare. Tabelul sta intr-un container cu
     `overflow-x:auto`, care ar taia orice element pozitionat absolut. Un rand
     nou nu poate fi taiat, se citeste la fel pe mobil si ramane in HTML pentru
     motoarele de cautare. */
.xfn__qi{ position:fixed; top:0; left:0; width:0; height:0; opacity:0; pointer-events:none; }
/* ⚠⚠ `inline`, NU `inline-flex`, SI ASTA E UN DEFECT REPARAT. Eticheta vine de
      la `mds_x_et_i()` (`x-dict.php:161`) ca `text + SPATIU +
      <span class="x-nw">ultimul-cuvant<i></i></span>`, ca iconita sa nu ramana
      singura pe randul urmator.
      Intr-un container FLEX, textul si acel `span` devin DOUA ELEMENTE FLEX
      asezate una langa alta. Pe o coloana de 168px, pe mobil, asta arata exact
      ca o coloana taiata in doua: „Cerceta / re si" intr-o jumatate si
      „dezvoltare" in cealalta, cu textul rupt in mijlocul cuvintelor. Masurat
      la 390px, inainte: 206 etichete, dintre care 5 pe mai multe randuri, una
      ajunsa pe 14 randuri. Pe desktop nu se vedea: acolo nu se rupe niciuna.
      Ca `inline`, textul si `span`-ul curg ca orice proza si se rup intre
      cuvinte, iar ultimul cuvant ramane lipit de iconita, adica exact ce voia
      `mds_x_et_i()`.
   ⚠ `gap` a disparut odata cu flexul, si trebuia: `gap` era acolo ca sa puna la
     loc spatiul dintre cele doua noduri, fiindca un container flex ARUNCA nodul
     de text format doar din spatiu (vezi nota din `40-crize.css`). Fara flex,
     spatiul din marcaj exista si nu mai e nimic de pus la loc. Verificat pe
     randare, in toate cele cinci limbi: zero etichete lipite.
   ⚠ Iconita se aliniaza din `vertical-align:middle` (regula de mai jos), care a
     fost scrisa de la inceput pentru context inline - nota ei o spune. */
.xfn__q{ display:inline; cursor:pointer; }
.xfn__q:hover{ color:var(--xc-ink); }
/* ⚠⚠ 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. */
.xfn__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; }
.xfn__i::before{ content:"i"; }
.xfn__qi:checked + .xfn__q .xfn__i{ background:var(--xc-ink); color:var(--xc-bg); }
.xfn__tbl tr.xfn__x{ display:none; }
.xfn__tbl tr:has(.xfn__qi:checked) + tr.xfn__x{ display:table-row; }
/* ⚠ PADDING SIMETRIC. Prima versiune avea `0` sus: masurat, paragraful incepea
   la 0px de marginea de sus a randului si lasa 19px dedesubt, deci textul se
   lipea de randul cu cifre. */
.xfn__tbl tr.xfn__x td{ padding:14px 24px; text-align:left; white-space:normal;
  position:sticky; left:0; }
.xfn__tbl tr.xfn__x p{ margin:0; max-width:74ch;
  font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); }
.xfn__tbl tr.xfn__x b{ color:var(--xc-ink); font-weight:600; }

/* titlu de tabel doar pentru cititoarele de ecran */
.xfn__sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── plierea pe mobil ──────────────────────────────────────────────────────
   ⚠ PE DESKTOP SE VAD TOATE: regula de ascundere sta doar in blocul de mobil,
     iar butonul e `display:none` in afara lui. Nota veche.
   ⚠ Caseta se emite INAINTEA tabelului: selectorul e `~`, frate care urmeaza. */
.xfn__vt-t{ position:fixed; top:0; left:0; width:0; height:0; opacity:0; pointer-events:none; }
/* ⚠ Ancorarea CSS, ca la „Despre" si la cele patru carduri: cand randurile
   ascunse dispar, browserul sa nu se agate de ele. Masurat la lotul 7: singura,
   duce „langa card"; `mds-xdp.js` duce „la card". */
.xfn__extra{ overflow-anchor:none; }
.xfn__vt{ overflow-anchor:auto; }
.xfn__vt{ display:none; }
.xfn__extra{ display:table-row-group; }

.xfn__gol{ margin:16px 0 0; padding:19px 21px; border-radius:var(--xr-i);
  background:var(--xs-inset); font:400 var(--xf-sm)/1.5 var(--xf); color:var(--xc-ink2); }

/* ── banda lipicioasa cu anii, desenata de `mds-xfn.js` ────────────────────
   ⚠ nota veche: copia e tabelul INTREG, nu doar antetul, ca sa aiba exact
     aceleasi latimi de coloana fara `table-layout:fixed`. Corpul e ascuns prin
     inaltimea benzii. */
/* ⚠⚠ COPIA NU PRIMESTE `min-width:0`. Prima versiune i-l punea, si de acolo venea
   dezalinierea de pe desktop: tabelul real are `min-width:100%` si se INTINDE la
   1100px, iar copia, scapata de plafon, se stranegea la latimea ei naturala.
   Masurat, cu banda aprinsa la 1440:
     original  1100px · coloane la  300 659 790 906 1023 1139 1260
     copie     1006px · coloane la  300 629 748 854  961 1067 1177
   adica anii cadeau cu pana la 83px la stanga coloanelor lor. Pe mobil nu se
   vedea, fiindca acolo tabelul depaseste oricum containerul si `min-width:100%`
   nu mai are ce sa intinda.
   ⚠ `min-width:100%` al tabelului se raporteaza la BANDA, careia scriptul ii
     impune `width = sc.clientWidth` - deci exact latimea containerului real. */
.xfn__hd{ position:fixed; z-index:7; overflow:hidden; pointer-events:none;
  background:var(--xs-card); display:none; }
.xfn__hd.is-on{ display:block; }

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

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

/* ⚠⚠ SUB ANTETUL MOBIL AL TEMEI. `.mds-header--mobile` e
   `position:sticky; top:0; z-index:40`, inalt de 56px (`mds-shell.css:48-49`,
   tokenul `--mds-hdr-m` din `mds-metrics.css:9`), iar bara mea are `z-index:8`:
   fara marja, se lipeste LA 0 si intra sub logo. Asta se vedea ca „taburile
   Income statement / Balance sheet / Cash flow nu apar, se vede doar randul al
   doilea" - primii 56px din cei 91 ai barei erau acoperiti.

   ⚠ `@media`, NU `@container`. Antetul temei e comutat de LATIMEA FERESTREI
     (`mds-shell.css:119` - `@media(max-width:992px)` ascunde varianta desktop si
     o arata pe cea mobila), nu de latimea containerului de continut. Sectiunea
     veche pune aceeasi regula intr-un `@container mdsx (max-width:599px)`
     (`date-financiare.css:241`), deci intre 600 si 992px de fereastra bara ei
     intra si acum sub antet. Aici nu.
   ⚠ Pe desktop ramane 0: pe pagina de activ, `mds-asset.css:8` ascunde antetul
     desktop, fiindca il inlocuieste sidebarul. */
@media (max-width:992px){
  .xfn{ --xfn-sus:var(--mds-hdr-m, 56px); }
}

/* ══ MOBIL ══════════════════════════════════════════════════════════════════ */
@container mdsx (max-width:899px){
  /* nota veche: peste optzeci de randuri inseamna cinci-sase ecrane de derulare
     pe 390px, pentru o singura declaratie. Se vede o treime, restul la buton. */
  .xfn__extra{ display:none; }
  .xfn:has(.xfn__vt-t:checked) .xfn__extra{ display:table-row-group; }
  .xfn__vt{ display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; margin:0; padding:14px 16px; min-height:44px;
    background:var(--xs-inset); font:600 var(--xt-7)/1 var(--xf);
    color:var(--xc-ink); cursor:pointer; }
  .xfn__vt::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; }
  .xfn__vt-t:checked ~ .xfn__vt::after{ transform:translateY(2px) rotate(-135deg); }
  .xfn__vt-b{ display:none; }
  .xfn__vt-t:checked ~ .xfn__vt .xfn__vt-a{ display:none; }
  .xfn__vt-t:checked ~ .xfn__vt .xfn__vt-b{ display:block; }
  /* ⚠⚠ COLOANA RECENTA TREBUIE SA INCAPA INTREAGA pe 390px. Cardul are 350px;
       masurat, celula recenta cere ~118px („$94,83 mld" la 15,5px + padding).
       Deci denumirile primesc cel mult 350 − 118 = 232px, iar cu o margine de
       siguranta: 168px. Nu e o cifra aleasa din ochi - e diferenta.
     ⚠ Fontul denumirilor scade la 13,5px, iar cel al subcomponentelor la 12,5px:
       „Cheltuieli comerciale si administrative" nu incape pe 168px la 15,5px si
       s-ar rupe in trei randuri. Celulele cu cifre RAMAN la 15,5px - ele sunt
       raspunsul, nu eticheta.
     ⚠ Indentarea nivelului 2 scade de la 44 la 30px: pe o coloana de 168px,
       44px de indentare inseamna un sfert din latime pierdut. */
  /* ⚠⚠ `max-width` + `white-space:normal`, NU doar `min-width`. Tabelul e
       `width:max-content`, deci browserul da fiecarei coloane latimea
       continutului ei: cu doar `min-width:168px`, coloana de denumiri masura
       276px si impingea anul recent afara din ecran. Plafonul o obliga sa rupa
       randul. */
  .xfn__tbl thead th:first-child{ min-width:150px; max-width:168px; padding-left:16px; }
  /* ⚠⚠ `break-word`, NU `anywhere`, si diferenta conteaza tocmai aici.
       `anywhere` intra si in calculul latimii MINIME a coloanei: browserul
       socoteste ca se poate rupe intre oricare doua litere, deci latimea minima
       a coloanei devine cat o litera, si coloana se stramteaza pana cand
       cuvintele chiar se rup in mijloc. `break-word` rupe un cuvant doar cand
       altfel ar iesi din celula, dar NU schimba latimea minima, deci coloana
       isi pastreaza latimea celui mai lung cuvant.
       Impreuna cu `display:inline` pe `.xfn__q`, asta scoate ruperile din
       mijlocul cuvintelor raportate la 390px. */
  .xfn__tbl tbody th{ max-width:168px; white-space:normal; overflow-wrap:break-word;
    padding-left:16px; padding-right:10px; font-size:var(--xt-7); }
  .xfn__tbl tr.lv2 th{ padding-left:30px; font-size:var(--xt-8); }
  .xfn__tbl thead th{ padding-left:10px; padding-right:10px; }
  .xfn__tbl td{ padding-left:10px; padding-right:10px; }
  .xfn__tbl td:last-child{ padding-right:16px; }
  .xfn__tbl tr.xfn__x td{ padding:12px 16px; }
  .xfn__card{ border-radius:22px; }
}

/* ══ DESKTOP · pragul temei, pe CONTAINER (20-grup2.css:207) ══ */
@container mdsx (min-width:900px){
  .xfn{ --xfn-ctrl:46px; }
  .xfn__ctrl{ flex-direction:row; align-items:center; justify-content:space-between;
    gap:14px; }
  .xfn__right{ margin-top:0; }
  .xfn__ks{ gap:11px; }
  /* ⚠ Trei umplu exact randul; pista ramane, dar nu mai are ce derula. */
  .xfn__k{ flex:0 0 calc((100% - 2 * 12px) / 3); padding:20px 22px 22px; }
  .xfn__card{ border-radius:var(--xr-c); scroll-margin-top:calc(82px + var(--xfn-ctrl)); }
  .xfn__tbl thead th:first-child{ min-width:230px; padding-left:29px; }
  .xfn__tbl tbody th{ padding-left:29px; }
  .xfn__tbl td:last-child{ padding-right:32px; }
  .xfn__tbl tr.xfn__x td{ padding:16px 32px; }
}