/* ============================================================================
   50-piata.css · GRUPUL 7 · antetul + „Volatilitate si risc" +
   „Randament fata de risc"   ·   namespace `xpm`   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:71-77   `.xfv__badge` / `.xfv__chip`
        24-proiectii.css:109-114  `.xpj__mc` — celula de metrica
        46-flux.css               grila de celule, pragul de patru coloane
        48-context.css            fereastra de ajutor in celula

   ⚠ `xpm` 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.
   ============================================================================ */

/* ══ ANTETUL GRUPULUI 7 ═════════════════════════════════════════════════════
   ⚠ Aceeasi distanta ca la grupurile 3-6: 62px mobil / 88px desktop, cifrele
     din `14-argumente.css:163`. */
/* ⚠ 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. */
.xpm__gh{ overflow-x:clip; }

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

.xpm__t{ margin:0; font-size:var(--xt-3); font-weight:700;
  line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.xpm__t::first-letter{ text-transform:uppercase; }
/* invelisul pastilei · `.xfv__badge--h` (22-fair-value.css:71-73) */
.xpm__badge{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  margin:14px 0 0; }
/* ⚠ PASTILA E NEUTRA. O volatilitate de 44% nu e „rea" — e alt fel de actiune,
   nu o actiune proasta. Un Sharpe de 0,59 la fel: se compara intre companii, nu
   cu un prag. Culoarea ar fi pus o judecata pe care datele n-o sustin. */
.xpm__chip{ flex:none; display:inline-flex; align-items:baseline; gap:7px;
  padding:5px 12px; border-radius:var(--xr-p); background:var(--xs-inset);
  font:600 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink);
  font-variant-numeric:tabular-nums; letter-spacing:0; }
.xpm__chip em{ font-style:normal; font-weight:500; font-size:var(--xt-8); color:var(--xc-ink3); }
.xpm__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink); }
.xpm__lede b{ color:var(--xc-ink); font-weight:600; }
.xpm__n{ margin:14px 0 0; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); }

/* ══ BENTO ══════════════════════════════════════════════════════════════════
   ⚠ La „Volatilitate" sunt doua carduri (sase celule si sapte); la „Randament
     fata de risc" unul singur, cu noua. `:only-child` ii da randul intreg. */
.xpm__bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  margin:22px 0 0; align-items:start; }
.xpm__bento > *{ grid-column:span 6; min-width:0; }

/* ⚠⚠ CARDUL E EL INSUSI UN CONTAINER. Pana acum, numarul de coloane din grila
   de celule se lua dupa latimea PAGINII (`@container mdsx`), nu a cardului — iar
   cele doua n-au aceeasi relatie in fiecare sectiune.
   MASURAT: la 1920px, cardul are 753px, dar regula de la 1400px ii dadea PATRU
   coloane, deci celule de 162px, iar „Volatilitate anualizata (1 an)" se rupea
   pe TREI randuri. La 1440, acelasi card avea 543px si doua coloane de 232px —
   doua randuri. Aceeasi eticheta, trei latimi diferite, fara logica.
   Acum pragurile sunt pe CARD: o coloana pana la 560px, doua pana la 840, trei
   pana la 1120, patru peste. Cifrele vin din latimea de care are nevoie
   eticheta cea mai lunga ca sa incapa pe un rand: ~230px text + 32px padding. */
.xpm__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;
  container-type:inline-size; container-name:xpmc; }
.xpm__ct{ margin:0 0 18px; font-weight:600;
  font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; color:var(--xc-ink); }
.xpm__ct::first-letter{ text-transform:uppercase; }

/* ── celulele ──────────────────────────────────────────────────────────────
   ⚠ Doua pe rand pana la 1400px de container, patru peste — acelasi prag scris
     ca la grupurile 4, 5 si 6, si din acelasi motiv: `auto-fit` e monoton si ar
     trece prin 3, lasand o celula singura pe randul al doilea. */
.xpm__tri{ min-width:0; display:grid; gap:10px;
  grid-template-columns:minmax(0, 1fr); }
@container xpmc (min-width:560px){ .xpm__tri{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } }
@container xpmc (min-width:840px){ .xpm__tri{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@container xpmc (min-width:1120px){ .xpm__tri{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ── asezari fixate, cerute ────────────────────────────────────────────────
   ⚠ Pragurile automate de mai sus raman IMPLICITUL, pentru cardurile la care
     numarul de celule nu se stie dinainte. Cand se stie — doua, trei sau patru —
     asezarea e o decizie de design, nu una calculata, si se scrie aici.
   ⚠ SPECIFICITATE, NU ORDINE: fiecare regula de mai jos are doua clase (0,2,0)
     fata de una singura a implicitului (0,1,0), deci castiga indiferent unde e
     scrisa si indiferent de latimea cardului. E a treia oara in sesiunea asta
     cand ma bazez pe asta in loc de ordine. */

/* doua celule, doua pe rand, peste tot */
.xpm__tri.xpm__tri--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }

/* trei celule: pe telefon doua sus si a treia singura, pe toata latimea */
.xpm__tri.xpm__tri--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.xpm__tri.xpm__tri--3 > :nth-child(3){ grid-column:1 / -1; }

/* patru celule: pe telefon doua cate doua */
.xpm__tri.xpm__tri--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }

/* ⚠⚠ „TOATE PE UN RAND" SE DECIDE DUPA LATIMEA CARDULUI, nu a paginii — si e
   o corectie facuta dupa ce am masurat rezultatul cerut.
   MASURAT cu pragul pe pagina (900px): la 1440, cele patru celule de la
   „Oscilatoare" ieseau de 111px, iar „Panta volumului cumulat (50 de zile)" se
   rupea pe SAPTE randuri. La „Cat de adanc a cazut", celulele de 152px rupeau
   „Zile pana la recuperare" pe cinci.
   Pragurile de mai jos sunt latimea de la care eticheta cea mai lunga din fiecare
   card incape in cel mult trei randuri: 620px pentru trei celule, 700px pentru
   patru. Sub ele, asezarea ramane cea de telefon.
   ⚠ La 1920 amandoua se indeplinesc si randul e intreg, cum ai cerut; la 1440
     cardurile sunt prea inguste, si atunci doua randuri citibile bat unul ilizibil. */
@container xpmc (min-width:620px){
  .xpm__tri.xpm__tri--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .xpm__tri.xpm__tri--3 > :nth-child(3){ grid-column:auto; }
}
/* ⚠ 660, nu 700: `container-type:inline-size` masoara CUTIA DE CONTINUT, nu
   cea de bordura. Cardul de 753px are 68px de padding, deci containerul e 685 —
   sub pragul de 700 pe care il pusesem, si cele patru celule ramaneau doua cate
   doua chiar si la 1920px. Masurat, nu dedus. */
@container xpmc (min-width:660px){
  .xpm__tri.xpm__tri--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
.xpm__c{ position:relative; min-width:0; padding:15px 16px;
  border-radius:var(--xr-i); background:var(--xs-inset); }
.xpm__cl{ display:block; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xpm__cl::first-letter{ text-transform:uppercase; }
.xpm__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); }

/* ⚠⚠ CAND CELULA TINE RANDUL INTREG, eticheta trece LA STANGA si cifra LA
   DREAPTA, pe aceeasi linie. Altfel ramanea eticheta sus, cifra dedesubt, si
   300px de gol in dreapta — o cutie pe jumatate folosita. E tiparul de rand din
   Setari / Sanatate: numele pe o parte, valoarea pe cealalta.
   ⚠ Pragul e acelasi 560px al cardului de la care grila trece la doua coloane:
     sub el celula e singura pe rand, deci are loc; peste el sunt doua alaturate
     si forma verticala redevine cea potrivita.
   ⚠ `flex-wrap` + `flex-basis:100%` pe fereastra: se deschide pe un rand propriu
     sub pereche, nu intre eticheta si cifra. */
/* ⚠⚠ NUMAI PE GRILELE FARA ASEZARE FIXATA. Forma „eticheta stanga / cifra
   dreapta" e buna cand celula tine randul intreg. De cand exista `--2`, `--3` si
   `--4`, celula poate avea 146px si totusi sa cada sub pragul de 559 al
   CARDULUI — iar atunci eticheta si cifra se bat pe acelasi rand si se
   suprapun. Prins pe captura de 390px: „Volatilitate anualizata (1 an)" peste
   „44,58%".
   Excluderea e explicita, nu prin `[class*=]`: vreau sa se vada care sunt. */
@container xpmc (max-width:559px){
  .xpm__tri:not(.xpm__tri--2):not(.xpm__tri--3):not(.xpm__tri--4) .xpm__c:has(.xpm__cv){
    display:flex; flex-wrap:wrap; align-items:baseline;
    justify-content:space-between; gap:10px 16px; }
  /* ⚠ Separarea se face PE `.xpm__lb`, nu pe `.xpm__c`: eticheta si cifra sunt
     amandoua INAUNTRUL lui (e o `<label>` care le cuprinde, ca sa fie toata
     zona apasabila). `space-between` pus pe parinte n-avea ce sa desparta —
     vedea un singur copil. Prins pe captura: cifra statea lipita de eticheta,
     nu la marginea din dreapta. */
  .xpm__tri:not(.xpm__tri--2):not(.xpm__tri--3):not(.xpm__tri--4) .xpm__c .xpm__lb{
    display:flex; flex:1 1 100%; width:100%; min-width:0;
    align-items:baseline; justify-content:space-between; gap:16px; }
  .xpm__tri:not(.xpm__tri--2):not(.xpm__tri--3):not(.xpm__tri--4) .xpm__c .xpm__cl{ min-width:0; }
  .xpm__tri:not(.xpm__tri--2):not(.xpm__tri--3):not(.xpm__tri--4) .xpm__c .xpm__cv{ flex:none; margin-top:0; text-align:right; }
  .xpm__tri:not(.xpm__tri--2):not(.xpm__tri--3):not(.xpm__tri--4) .xpm__c .xpm__tip{ flex-basis:100%; }
}

/* ── fereastra de ajutor · pur CSS ─────────────────────────────────────────
   ⚠⚠ CLASA E `xpm__rt`, NU `xpm__t`: `xpm__t` e TITLUL DE SECTIUNE. Greseala
      asta am facut-o de trei ori in loturile trecute; o scriu inainte.
   ⚠ SPECIFICITATE, NU ORDINE: `.xpm__tip` porneste ascunsa si se arata printr-un
     selector mai specific. La lotul 30, o regula scrisa „mai sus" a pierdut si
     toate cele sase ferestre s-au deschis deodata. Nu mai depind de ordine. */
.xpm__rt{ position:absolute; opacity:0; pointer-events:none; }
.xpm__lb{ display:block; cursor:pointer; }
.xpm__x{ display:none; }
.xpm__tip{ display:none; }
.xpm__rt:checked ~ .xpm__x{ display:block; position:fixed; inset:0; z-index:8; }
.xpm__rt:checked ~ .xpm__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); }
.xpm__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. */
.xpm__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; }
.xpm__i::before{ content:"i"; }
.xpm__rt:checked ~ .xpm__lb .xpm__i{ background:var(--xc-ink); color:var(--xc-bg); }

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

/* ══ DESKTOP · pragul temei, pe CONTAINER (20-grup2.css:207) ══ */
@container mdsx (min-width:900px){
  .xpm__card{ border-radius:var(--xr-c); padding:29px 31px 31px; scroll-margin-top:82px; }
  .xpm__bento{ gap:13px; }
  .xpm__bento > *{ grid-column:span 3; }
  .xpm__bento:has(> :only-child) > *{ grid-column:span 6; }
  /* ⚠ Pragurile grilei de celule s-au mutat pe CARD (vezi `@container xpmc`):
     acolo e masura care conteaza. */
}

/* ══ DOT PLOT si PROFIL DE ADANCIME ═════════════════════════════════════════
   ⚠⚠ DE CE EXISTA. Cercetat inainte de scris: o bara consuma mult spatiu ca sa
      reprezinte un singur numar, in timp ce un punct il reprezinta direct, iar
      doua puncte pe acelasi rand fac comparatia „inainte / dupa" imediata. Si:
      graficele cu puncte incap in containere inguste — coloana de 302px de pe
      telefon, unde o bara ar fi concurat cu eticheta.
   ⚠ Regula care decide punct vs bara: daca scara CONTINE UN ZERO CU INTELES, se
     pune bara de la zero (scaderi); daca nu (beta, unde reperul e 1,00 si nu 0),
     se pune punct. Nu e o alegere de stil, e regula de citire.

   ⚠ ZERO VALORI INVENTATE. Ancorele:
        22-fair-value.css:84-95   pista `--xbar`, marcaj rotund de 16px centrat
        22-fair-value.css:88      linia de reper, `rgba(255,255,255,.20)`
        24-proiectii.css:80-92    marcaj cu `translate(-50%,-50%)`
   ⚠ AL DOILEA INDICIU, NU DOAR CULOARE: fiecare rand isi poarta CIFRA langa el,
     iar perechea 1an/3ani are si o linie care le uneste. Un cititor care nu
     distinge verdele de roz citeste tot din pozitie si din cifra. */
.xpm__plot{ position:relative; margin:0 0 18px; }
/* ⚠⚠ A TREIA COLOANA ARE LATIME MARGINITA, nu `auto`.
   BUG MASURAT: cu `auto`, coloana crestea dupa continut. Randul „Beta" are si
   pastila de stare („mai agitata decat piata", 22 de caractere), deci coloana se
   umfla si AXA SE STRANGEA — 119px, fata de 212px pe celelalte trei randuri de
   beta. Banda parea rupta exact pe randul ala.
   `minmax(72px, 96px)` o tine fixa: cifra incape, iar starea se rupe pe mai
   multe randuri sub ea, fara sa mai fure din pista. */
/* ⚠⚠ COLOANE PROPORTIONALE, nu fixe. A doua masuratoare a aratat ca eticheta
   fixa la 200px lasa axa cu 51px pe un card de 463px (1280px latime pagina) —
   tehnic „egale intre ele", dar prea scurte ca sa poti citi o pozitie.
   Acum toate trei sunt in `fr`, deci se imparte ce e disponibil: eticheta 1,2 ·
   axa 1,3 · cifra intre 72 si 104px. Axa masoara 103px pe telefon si 303px pe
   1920 — creste cu cardul, nu sare. */
/* ⚠⚠ PE TELEFON, BARA STA LIPITA DE CIFRA, LA DREAPTA. Cu trei coloane in `fr`,
   bara cadea la mijlocul randului, cu gol de o parte si de alta, iar cifra
   ramanea singura in dreapta — ochiul avea doua lucruri de urmarit in loc de
   unul. Acum eticheta ia ce ramane, iar bara si cifra formeaza un bloc la
   dreapta: pozitia si valoarea se citesc dintr-o miscare.
   ⚠ Pe desktop raman proportiile: acolo e loc, iar o bara mai lunga se citeste
     mai bine decat una de 96px. */
.xpm__row{ position:relative; display:grid;
  grid-template-columns:minmax(0, 1fr) 96px minmax(72px, 104px);
  align-items:center; gap:12px 10px; padding:9px 0; }
/* ⚠⚠ `--xf-sm` (15,5px), NU 13,5. Eticheta unui rand de grafic e acelasi lucru
   cu eticheta unei celule — `.xpm__cl` e la 15,5px — deci sta pe aceeasi
   treapta. Prima versiune o scrisese la 13,5px, treapta NOTELOR, si randurile
   pareau subordonate celulelor de sub ele, desi sunt subiectul cardului.
   Treptele folosite aici, toate din scara paginii: 15,5px eticheta si cifra,
   12px valoarea secundara (3 ani), 13,5px fereastra si eticheta reperului. */
.xpm__rl{ min-width:0; font:500 var(--xf-sm)/1.35 var(--xf); color:var(--xc-ink2); }
.xpm__rl--b{ display:inline; cursor:pointer; }
.xpm__rv{ flex:none; font:600 var(--xf-sm)/1.2 var(--xf); color:var(--xc-ink);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
/* ⚠ A doua valoare (3 ani) e mai stinsa si mai mica: e contextul, nu subiectul. */
.xpm__rv em{ display:block; margin-top:2px; font:500 var(--xt-8)/1.2 var(--xf);
  font-style:normal; color:var(--xc-ink3); }

/* pista fiecarui rand · inaltimea `--xbar / 2`, treapta reperelor secundare */
.xpm__ax{ position:relative; display:block; height:calc(var(--xbar) / 2);
  border-radius:var(--xr-p); background:var(--xs-track); }
.xpm__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; }
/* ⚠ Punctul „3 ani" e gol pe dinauntru, nu doar mai palid: forma diferita tine
   si in tonuri de gri, culoarea nu. */
.xpm__dot--b{ background:var(--xs-card); box-shadow:0 0 0 2px var(--xc-ink3); z-index:2; }
.xpm__ln{ position:absolute; top:50%; height:2px; transform:translateY(-50%);
  background:var(--xc-ink3); opacity:.55; z-index:1; }
/* linia de reper · aceeasi intensitate ca `.xfv__tick i` (22-fair-value.css:88)
   ⚠ Sta IN pista fiecarui rand, nu peste tot graficul: procentul se masoara pe
     axa, iar graficul e o grila cu coloane si inainte, si dupa ea. */
.xpm__ref{ position:absolute; top:-9px; bottom:-9px; width:1px;
  background:rgba(255,255,255,.20); z-index:0; }
/* randul de eticheta al reperului: fara pista, doar cuvantul sub linie */
.xpm__row--l{ padding:0; }
.xpm__ax--l{ height:14px; background:none; }
.xpm__refl{ position:absolute; top:0; transform:translateX(-50%);
  font:500 var(--xt-8)/1 var(--xf); font-style:normal; color:var(--xc-ink4);
  white-space:nowrap; }

/* ── fereastra de ajutor pe randul de grafic ───────────────────────────────
   ⚠ E AL PATRULEA COPIL AL GRILEI, cu `grid-column:1/-1`: se deschide pe un rand
     propriu, sub cel la care se refera. Intr-o eticheta de 124px (mobil) n-ar fi
     incaput o fraza, iar `position:absolute` ar fi acoperit randurile de dedesubt.
   ⚠ SPECIFICITATE, NU ORDINE: `.xpm__tip--r` porneste ascunsa si se arata
     printr-un selector mai specific. */
.xpm__tip--r{ grid-column:1 / -1; margin:10px 0 2px; }
.xpm__rt:checked ~ .xpm__tip.xpm__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); }
.xpm__rt:checked ~ .xpm__rl .xpm__i{ background:var(--xc-ink); color:var(--xc-bg); }

/* profil de adancime: bare de la zero */
.xpm__bar{ position:absolute; left:0; top:0; height:100%;
  border-radius:var(--xr-p); background:var(--xc-pink); }

@container mdsx (min-width:900px){
  /* ⚠ SI AICI `minmax`, nu `auto`. Prima reparatie am facut-o doar in blocul de
     baza; regula asta de desktop o suprascria, iar pe 1280/1440/1920 axa de la
     Beta ramanea strangulata (39px la 1280, fata de 132px pe celelalte randuri).
     A doua oara in aceeasi zi cand repar ceva intr-un loc si uit ca exista o
     suprascriere mai jos — de aia masor DUPA fiecare reparatie, pe toate
     latimile, nu doar pe una. */
  /* pe desktop revin proportiile: e loc, si o bara mai lunga se citeste mai bine */
  .xpm__row{ gap:12px 16px;
    grid-template-columns:minmax(0, 1.2fr) minmax(56px, 1.3fr) minmax(72px, 104px); }
  .xpm__ax{ height:var(--xbar); }
  .xpm__dot{ width:15px; height:15px; }
}

/* ══ SCARA CU ZONE si RANDURI DE STARE ══════════════════════════════════════
   ⚠⚠ A TREIA FORMA DIN GRUP, cu motiv. Oscilatoarele sunt singurele metrici de
      pe pagina care au PRAGURI RECUNOSCUTE: 30 si 70 la RSI, ±100 la CCI, 0 si
      1 la banda Bollinger, 20 si 25 la puterea tendintei. Un RSI de 39 nu spune
      nimic fara sa stii ca 30 inseamna „vandut excesiv"; cu zonele desenate,
      pozitia raspunde singura.
      La beta nu exista praguri (de aia acolo e punct pe scara goala), iar la
      rapoartele de risc pragul e 0 (de aia acolo e doar o linie).

   ⚠⚠ ZONELE SUNT NEUTRE, TOATE LA FEL. Prima versiune le colora verde si roz —
      verde jos la RSI, roz sus. Randat, se citea gresit: verdele de la RSI 30
      parea „bine", desi un RSI sub 30 nu e nici bun, nici rau, e doar o miscare
      intinsa. Si mai rau, la ADX verdele era SUS, deci aceeasi culoare insemna
      doua lucruri diferite in acelasi card.
      Acum zonele doar MARCHEAZA regiuni cu nume. Ce inseamna fiecare scrie in
      fereastra de ajutor; pragul scrie sub linie.
   ⚠ Transparente, 30%: sunt fundal, nu masuratoare. La aceeasi intensitate cu
     punctul, ochiul ar fi citit intai banda si abia apoi valoarea. */
.xpm__row--s{ padding:11px 0; }
.xpm__ax--z{ overflow:visible; }
.xpm__zn{ position:absolute; top:0; bottom:0; border-radius:var(--xr-p); }
/* pragul · aceeasi intensitate ca `.xfv__tick i` (22-fair-value.css:88) */
.xpm__pg{ position:absolute; top:-3px; bottom:-3px; width:1px;
  background:rgba(255,255,255,.28); }
.xpm__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); }
/* ⚠ Randul cu praguri are nevoie de loc dedesubt pentru cifrele lor. */
.xpm__row--s{ padding-bottom:24px; }

/* ── randuri de stare ──────────────────────────────────────────────────────
   ⚠ CUVANTUL E RASPUNSUL, culoarea doar il accentueaza: „da" si „nu" se citesc
     si in tonuri de gri, o bulina colorata nu. */
.xpm__plot--st{ margin-top:18px; }
.xpm__row--st{ grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:11px 0; }
.xpm__row--st + .xpm__row--st{ background:var(--xsep) no-repeat top/100% 1px; }
.xpm__st{ font:600 var(--xf-sm)/1.2 var(--xf); white-space:nowrap; }
.xpm__st::first-letter{ text-transform:uppercase; }
.xpm__st.is-y{ color:var(--xc-lime); }
.xpm__st.is-n{ color:var(--xc-pink); }

@container mdsx (min-width:900px){
  .xpm__row--st{ grid-template-columns:minmax(0,1fr) auto; }
}

/* ══ STARE si VERDICT, ca text langa cifra ══════════════════════════════════
   ⚠⚠ DOUA LUCRURI DIFERITE. „Vandut excesiv" e o STARE cu nume consacrat, nu o
      judecata — nu inseamna „de cumparat". „Moderat" la un Sharpe e un VERDICT,
      fiindca acolo exista o directie de „mai bine" care se poate sustine.
      Starile raman NEUTRE (`--xc-ink3`); verdictele primesc culoare.
   ⚠ CUVANTUL E RASPUNSUL, culoarea doar il accentueaza: „moderat" se citeste si
     in tonuri de gri, o pastila colorata nu.
   ⚠ Treapta: 12px, aceeasi cu valoarea secundara `.xpm__rv em` si cu `em`-ul
     pastilelor. Sta sub cifra, deci nu-i poate concura marimea. */
.xpm__sv{ display:block; margin-top:3px; font:500 var(--xt-8)/1.25 var(--xf);
  font-style:normal; color:var(--xc-ink3); white-space:normal; }
.xpm__sv.is-bun{ color:var(--xc-lime); }
.xpm__sv.is-mod{ color:var(--xc-yellow); }
.xpm__sv.is-slab{ color:var(--xc-pink); }
/* ⚠ Cand randul poarta si stare, cifra nu mai poate fi centrata pe verticala:
   blocul creste in jos, iar punctul de pe pista trebuie sa ramana in dreptul
   cifrei principale. */
.xpm__row:has(.xpm__sv){ align-items:start; }
.xpm__row:has(.xpm__sv) .xpm__ax{ margin-top:6px; }
.xpm__row:has(.xpm__sv) .xpm__rl{ margin-top:2px; }