/* ============================================================================
   38-riscuri.css · GRUPUL 4 · antetul de grup + „Datorii si solvabilitate"
   namespace `xrs`   PREVIEW

   ⚠⚠ ZERO VALORI INVENTATE. Ancorele:
        20-grup2.css:45-66        `.xgh` — antetul de grup. Se REFOLOSESTE.
        20-grup2.css:82-99        titlu de sectiune, lede, card, titlu de card
        22-fair-value.css:74-77   `.xfv__chip` — pastila
        24-proiectii.css:109-114  `.xpj__mc` — celula de metrica
        30-afacere.css            distanta de 62/88px deasupra antetului de grup
        32-afacere-date.css       fereastra de ajutor, pur CSS
        36-raportari.css          bento pe sase coloane, piste cu swipe
        verdict.css:345-357       `scroll-margin-top` 78 / 82px

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

/* ══ ANTETUL GRUPULUI 4 ═════════════════════════════════════════════════════
   ⚠ `.xgh` se refoloseste, ca la grupul 3: antetul de grup e acelasi component
     pe toate grupurile. Consecinta: fisierul depinde de `20-grup2.css`, care se
     incarca inaintea lui (glob alfabetic, 20 < 38).
   ⚠ DISTANTA DEASUPRA e aceeasi ca la grupul 3 — 62px mobil / 88px desktop,
     cifrele masurate si scrise in `14-argumente.css:163`. Clasa e proprie
     (`xrs__gh`), nu `.xgh`, ca sa nu se adune la antetul grupului 2, care isi ia
     distanta din `padding-bottom`-ul benzii de deasupra lui. */
/* ⚠ Distanta deasupra antetului de grup NU MAI E AICI: sta o singura data,
   pe `.xgh` (`20-grup2.css`), cu marimea din `--xsp-grup` (`00-shell.css`).
   Erau sapte reguli identice in sapte fisiere, iar antetul primului grup —
   singurul fara clasa proprie — ramasese pe dinafara, cu distanta ZERO. */
.xrs__gh{ overflow-x:clip; }

/* Pastila · `.xfv__chip` (22-fair-value.css:74), cu eticheta ei.
   ⚠ CIFRA SINGURA NU INSEAMNA NIMIC: „62,8" langa un titlu nu spune ce masoara.
     Eticheta vine din catalog (`g4.eticheta`, `sv.p1_sub`), nu scrisa de mine. */
.xrs__chipw{ margin:18px 0 0; }
.xrs__chip{ display:inline-flex; align-items:baseline; gap:7px; padding:5px 12px;
  border-radius:var(--xr-p); background:color-mix(in srgb, var(--bc) 16%, transparent);
  color:var(--bc); font:600 var(--xt-7)/1.2 var(--xf); font-variant-numeric:tabular-nums;
  letter-spacing:0; }
.xrs__chip em{ font-style:normal; font-weight:500; font-size:var(--xt-8);
  color:color-mix(in srgb, var(--bc) 78%, var(--xc-ink)); }

/* ══ SECTIUNEA ══════════════════════════════════════════════════════════════
   ⚠ Sectiune proprie, nu banda: masurat pe randarea veche, banda are 1100px pe
     desktop dar coloana de titlu ia 240 din ea. */
.xrs{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em;
  margin-top:var(--xsp-sec,39px); overflow-x:clip; }
.xrs *{ box-sizing:border-box; }

/* ⚠⚠ TITLUL E ALB. Azi banda porneste cu culoarea pragului, iar
   `mds-design.css:417` da `.ch__t{color:var(--c)}`: masurat, titlul iese
   `rgb(0,186,124)` la TSLA.US. Culoarea trece pe pastila, unde spune ceva.
   ⚠ TITLUL NU E FLEX: pastila sta intr-un rand propriu dedesubt, deci
     `::first-letter` se aplica direct pe `<h3>`. */
.xrs__t{ margin:0;
  font-size:var(--xt-3); font-weight:700;
  line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.xrs__t::first-letter{ text-transform:uppercase; }
/* invelisul pastilei · `.xfv__badge--h` (22-fair-value.css:71-73) */
.xrs__badge{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  margin:14px 0 0; }
.xrs__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink); }
.xrs__p{ margin:12px 0 0; font:400 var(--xf-sm)/1.6 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink2); }
.xrs__p b{ color:var(--xc-ink); font-weight:600; }

/* ══ BENTO · doua intrebari ═════════════════════════════════════════════════
   Sase coloane, ca la Raportari. Cele doua carduri iau 3/6 fiecare pe desktop si
   6/6 pe mobil.
   ⚠ `align-items:start`: la companiile unde un grup are patru metrici si celalalt
     una singura, intinse la aceeasi inaltime cel mic ar fi ramas gol pe jumatate. */
.xrs__bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  margin:22px 0 0; align-items:start; }
.xrs__bento > *{ grid-column:span 6; min-width:0; }

.xrs__card{ min-width:0; display:block; background:var(--xs-card);
  border-radius:28px; padding:26px 24px 28px; box-shadow:var(--xe-lift);
  scroll-margin-top:78px; }
/* titlu de card · aceeasi treapta ca `.xan__ct` / `.xfv__ct` / `.xpj__ct` */
.xrs__ct{ margin:0; font-weight:600;
  font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; color:var(--xc-ink); }
.xrs__cs{ margin:12px 0 0; font:400 var(--xf-sm)/1.55 var(--xf); color:var(--xc-ink2); }
.xrs__cs b{ color:var(--xc-ink); font-weight:600; }

/* ── celulele de metrica · pista cu swipe ──────────────────────────────────
   ⚠ `.xpj__mc` (24-proiectii.css:109) ca forma, pista ca asezare: `min-width:0`
     (R30), snap, bara ascunsa. Patru metrici nu incap niciodata pe 390px.
   ⚠ LATIME RESPONSIVA, nu procent fix: `clamp(168px, 62%, 230px)`. Podeaua e
     masurata — „Probabilitate de dificultate (Zmijewski)" la 15,5px are nevoie de
     ~136px ca sa se rupa in trei randuri, nu in cinci, plus 32px de padding. */
/* ⚠⚠ DOUA COLOANE, PATRU DOAR PE ECRAN LAT. Cerut exact asa.
   Prima versiune folosea `repeat(auto-fit, minmax(144px,1fr))`, care numara
   singur coloanele. MASURAT, iesea 2 / 2 / 2 / 3 / 4 pe latimile de container —
   iar la 1440px cele patru celule se asezau 3 + 1, cu o celula singura pe randul
   al doilea. `auto-fit` e monoton: nu poate sari de la 2 la 4 fara sa treaca
   prin 3. Deci pragul se scrie, nu se deduce.
   MASURAT pe cinci latimi de fereastra, dupa schimbare:
     390 / 768 / 1024 / 1440  ->  2 coloane
     1920                     ->  4 coloane  (container 1520px)
   ⚠ Pragul e 1400px pe CONTAINER, nu pe fereastra: cu sidebarul de 260px, un
     container de 1400 inseamna ~1660px de ecran. Sub el, cardul are cel mult
     543px, iar patru celule ar fi iesit de 111px — „Probabilitate de dificultate
     (Zmijewski)" s-ar fi rupt in cinci randuri.
   ⚠ `align-items:stretch` implicit la grila: intr-un rand, celulele au aceeasi
     inaltime chiar daca etichetele au unu, doua sau trei randuri. */
.xrs__tri{ min-width:0; display:grid; gap:10px; margin:18px 0 0;
  grid-template-columns:repeat(2, minmax(0, 1fr)); }
.xrs__c{ position:relative; min-width:0; padding:15px 16px;
  border-radius:var(--xr-i); background:var(--xs-inset); }
.xrs__cl{ display:block; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xrs__cv{ display:block; margin-top:2px; font:600 var(--xt-5)/1.1 var(--xf);
  letter-spacing:-.014em; font-variant-numeric:tabular-nums; color:var(--xc-ink); }

/* ── fereastra de ajutor · pur CSS, tiparul de la cele patru carduri cu date ──
   ⚠ Radiouri cu `name` comun pe card, deci doua ferestre nu pot fi deschise
     simultan. Eticheta `.xrs__x` tinteste radioul „niciunul" si inchide.
   ⚠ `name` si `id` poarta `uid`-ul per activ, deci CSS-ul nu se leaga de niciun
     id (R7). */
/* ⚠⚠ `xrs__rt`, NU `xrs__t`. Prima versiune numea radioul ferestrei `.xrs__t` —
   exact numele TITLULUI DE SECTIUNE, o suta de linii mai sus. A doua regula a
   castigat si titlul a primit `position:absolute; opacity:0`: a disparut din
   pagina, fara nicio eroare. A TREIA OARA cand fac aceeasi greseala (`xaf__t` la
   cele patru carduri cu date, `xrs__t` aici). Garda de coliziuni INTERNE — cea
   care cauta o clasa cu `opacity` SI `font-size` — o prinde; n-o rulasem pe
   fisierul asta inainte s-o arat. */
.xrs__rt{ position:absolute; opacity:0; pointer-events:none; }
.xrs__lb{ display:block; cursor:pointer; }
.xrs__x{ display:none; }
.xrs__tip{ display:none; }
.xrs__rt:checked ~ .xrs__x{ display:block; position:fixed; inset:0; z-index:8; }
.xrs__rt:checked ~ .xrs__tip{ display:block; position:relative; z-index:9;
  margin:12px 0 0; padding:13px 14px; border-radius:14px; background:var(--xs-track);
  font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); }
.xrs__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. */
.xrs__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; }
.xrs__i::before{ content:"i"; }
.xrs__rt:checked ~ .xrs__lb .xrs__i{ background:var(--xc-ink); color:var(--xc-bg); }

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

/* ══ DESKTOP · pragul temei, pe CONTAINER (20-grup2.css:207) ══ */
@container mdsx (min-width:900px){
  .xrs__card{ border-radius:var(--xr-c); padding:29px 31px 31px; scroll-margin-top:82px; }
  .xrs__bento{ gap:13px; }
  .xrs__bento > *{ grid-column:span 3; }
  /* ⚠ CAND E SINGUR, IA TOT RANDUL: la o companie unde un singur grup de metrici
     exista, cardul ar fi stat pe 3/6 cu jumatate de rand goala langa el. */
  .xrs__bento:has(> :only-child) > *{ grid-column:span 6; }
  .xrs__tri{ gap:11px; }
}

@container mdsx (min-width:1400px){
  /* patru pe un rand, cand chiar e loc */
  .xrs__tri{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* ══ SCARI CU ZONE · solvabilitate ══════════════════════════════════════════
   ⚠⚠ PRAGURILE NU SUNT INVENTATE. Sunt deja scrise in `metrici-riscuri.ro.json`,
      in textul `good_when` al fiecarei metrici: 75 la sanatatea creditului, 3 si
      5 la Datorie/EBITDA, 1,5 si 3 la acoperirea dobanzii, 3 la distanta pana la
      faliment. Scara DESENEAZA ce spune deja definitia in cuvinte.

   ⚠ SENSUL DIFERA INTRE RANDURI. La Datorie/EBITDA mai putin e mai bine, deci
     zona verde e in STANGA; la celelalte trei, in dreapta. Fara asta, aceeasi
     culoare ar fi insemnat lucruri opuse in acelasi card.

   ⚠ ZERO VALORI INVENTATE. Ancorele:
        22-fair-value.css:84-95   pista `--xbar`, marcaj rotund centrat
        22-fair-value.css:88      linia de prag, `rgba(255,255,255,.28)`
        50-piata.css              coloanele proportionale ale unui rand de grafic
   ⚠ TREPTE DE LITERA: 15,5 (`--xf-sm`), 13,5 si 11px — toate deja in tema. */
.xrs__plot{ margin:0 0 20px; }
.xrs__row{ position:relative; display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(56px, 1.3fr) minmax(64px, 92px);
  align-items:center; gap:10px 12px; padding:11px 0 26px; }
.xrs__rl{ min-width:0; font:500 var(--xf-sm)/1.35 var(--xf); color:var(--xc-ink2); }
label.xrs__rl{ display:inline; cursor:pointer; }
.xrs__rv{ font:600 var(--xf-sm)/1.2 var(--xf); color:var(--xc-ink);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.xrs__ax{ position:relative; display:block; height:calc(var(--xbar) / 2);
  border-radius:var(--xr-p); background:var(--xs-track); }
.xrs__zn{ position:absolute; top:0; bottom:0; border-radius:var(--xr-p); }
.xrs__pg{ position:absolute; top:-3px; bottom:-3px; width:1px;
  background:rgba(255,255,255,.28); }
.xrs__pgl{ position:absolute; top:calc(100% + 5px); transform:translateX(-50%);
  font:500 var(--xt-8)/1 var(--xf); font-style:normal; color:var(--xc-ink4); }
.xrs__dot{ position:absolute; top:50%; width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--xc-ink);
  box-shadow:0 0 0 3px var(--xs-card); z-index:3; }
/* fereastra de ajutor, pe un rand propriu al grilei
   ⚠ SPECIFICITATE, NU ORDINE: `.xrs__tip--r` porneste ascunsa si se arata
     printr-un selector mai specific. */
.xrs__tip--r{ grid-column:1 / -1; margin:8px 0 0; }
.xrs__rt:checked ~ .xrs__tip.xrs__tip--r{ display:block; position:relative; z-index:9;
  padding:13px 14px; border-radius:14px; background:var(--xs-track);
  font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); }

@container mdsx (min-width:900px){
  .xrs__row{ gap:10px 18px; padding:13px 0 28px; }
  .xrs__dot{ width:15px; height:15px; }
}