/* ============================================================================
   36-raportari.css · RAPORTARI SI SURPRIZE · namespace `xrp`   PREVIEW

   ⚠⚠ ZERO VALORI INVENTATE. Ancorele:
        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 statistica
        30-afacere.css            pista cu swipe, distanta de 56px
        34-financiare.css         aceleasi tipare de card si pliere
        verdict.css:345-357       `scroll-margin-top` 78 / 82px

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

   ⚠⚠ DOUA BLOCURI ALE TEMEI SE REFOLOSESC CA ATARE, cu marcajul lor:
        `.rp__*`  tabelul de reactii   (`mds_rap_reactii()`)
        `.cd`     cardul graficului    (`mds_rap_traiectorie()`)
      Sunt cele mai dense parti si rescrise ar fi fost prima sursa de erori.
      Se re-imbraca de aici, la (0,3,0) — `.mdsx .xrp .cd` bate `.mdsx .cd`
      indiferent de ordinea de tiparire (R5). Nu se atinge `raportari.css`.
   ============================================================================ */

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

/* ⚠⚠ TITLUL E ALB. Azi banda porneste cu `--lime`/`--yellow`/`--pink` dupa rata
   de depasire, iar `mds-design.css:417` da `.ch__t{color:var(--c)}`: masurat,
   titlul iese `rgb(255,212,0)` la TSLA.US. Culoarea ramane, dar pe PASTILA de
   langa titlu, unde spune ceva — rata de depasire. */
/* ⚠ TITLUL NU MAI E FLEX: pastila a iesit din el, deci `::first-letter` se poate
   aplica direct pe `<h3>`, fara `<span>`-ul de ocolire. */
.xrp__t{ margin:0;
  font-size:var(--xt-3); font-weight:700;
  line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.xrp__t::first-letter{ text-transform:uppercase; }
/* invelisul pastilei · `.xfv__badge--h` (22-fair-value.css:71-73) */
.xrp__badge{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  margin:14px 0 0; }

/* Pastila · `.xfv__chip` (22-fair-value.css:74). */
.xrp__chip{ flex:none; 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; }
.xrp__chip em{ font-style:normal; font-weight:500; font-size:var(--xt-8);
  color:color-mix(in srgb, var(--bc) 78%, var(--xc-ink)); }
.xrp__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink); }

/* ⚠ `.xrp__p` — paragraful din cardul istoricului. Regula fusese STEARSA din
   greseala odata cu blocul cifrelor eroice, iar marcajul o folosea in
   continuare: paragraful cadea pe stilul implicit de browser, 16px/normal,
   singurul text din sectiune care nu era pe scara. Prins comparand clasele din
   CSS cu cele din marcaj, nu cu ochiul. */
.xrp__p{ margin:16px 0 0; font:400 var(--xf-sm)/1.6 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink2); }
.xrp__p b{ color:var(--xc-ink); font-weight:600; }
.xrp__n{ margin:14px 0 0; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); }
.xrp__n b{ color:var(--xc-ink2); font-weight:600; }
/* ⚠ DOUA CLASE PENTRU ACELASI LUCRU, si asta e deliberat. `.xrp__z` e liniuta
   pe care o pun EU cand lipseste rata de depasire. `.fin__z` e cea pe care o
   pune `mds_rap_pc()` al temei cand primeste `null` — n-o pot schimba fara sa
   ating `analiza-raportari.php` (R33), iar antetul acelui fisier isi declara
   deja dependenta de `date-financiare.css` pentru ea. O stilizez aici, in
   sectiunea mea, ca sa nu depind de ordinea de incarcare a altei sectiuni. */
.xrp__z,
.xrp .fin__z{ font-style:normal; color:var(--xc-ink4); }

/* ── carduri ──
   ⚠⚠ SCARA E CEA A GRUPULUI 2, nu una proprie. Prima versiune inventase o
      treapta de titlu de card, `clamp(19px … 21px)`, care nu exista nicaieri
      altundeva. Treptele reale, folosite identic de `.xan__ct` (20-grup2.css:90),
      `.xfv__ct` (22-fair-value.css:62) si `.xpj__ct` (24-proiectii.css:56):
        titlu de sectiune  clamp(26px, 23.5px + 0.64cqi, 34px)  700
        titlu de card      clamp(21px, 20.06px + 0.24cqi, 24px) 600
        cifra eroica       clamp(30px, 25.63px + 1.12cqi, 44px) 700
        text de sprijin    --xf-sm (15,5px)
        nota               13,5px
   ⚠ `margin:0` — distantele le da grila bento, nu cardurile. */
.xrp__card{ min-width:0; display:block; background:var(--xs-card);
  border-radius:28px; padding:26px 24px 28px; box-shadow:var(--xe-lift);
  margin:0; scroll-margin-top:78px; }
.xrp__ct{ margin:0; font-weight:600;
  font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; color:var(--xc-ink); }
.xrp__cs{ margin:12px 0 0; font:400 var(--xf-sm)/1.55 var(--xf); color:var(--xc-ink2); }
.xrp__cs b{ color:var(--xc-ink); font-weight:600; }
/* ⚠ „Ultimele 8 trimestre", nu „ultimele": cheia din catalog e cu litera mica,
   fiindca in fraza veche venea la mijloc de propozitie. Aici deschide un rand. */
.xrp__cs--cap::first-letter{ text-transform:uppercase; }

.xrp__big{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px;
  margin:12px 0 0; }
/* cifra eroica · `.xfv__hero` (22-fair-value.css:68) si `.xpj__hero b` (:76) */
/* ⚠ CULOAREA STARII, din `--bc` setat inline pe `.xrp__big`: lime cand raportarea
   e programata sau e chiar azi, yellow cand data a trecut si n-a venit alta.
   ⚠ `--bc` are o rezerva pe `--xc-ink`: daca vreodata nu se seteaza, linia ramane
     alba, nu invizibila. */
.xrp__bv{ font:700 var(--xt-1)/1 var(--xf);
  letter-spacing:-.022em; color:var(--bc, var(--xc-ink)); font-variant-numeric:tabular-nums; }
/* ⚠ CAND DATA A TRECUT, in locul cifrei intra o linie scurta si tare, pe
   ACEEASI treapta. Nota sectiunii vechi: fara ea, fraza ramanea singura la
   marimea textului obisnuit si se pierdea — iar asta e starea tuturor activelor
   acum, nu o exceptie. */
/* ⚠ Cand data a trecut, textul intra pe treapta de TITLU DE CARD, nu pe una
   proprie: e o propozitie, nu o cifra, iar la 44px ar fi ocupat doua randuri. */
.xrp__bv.is-text{ font-size:var(--xt-4);
  letter-spacing:-.012em; line-height:1.25; }
.xrp__bu{ font:500 var(--xf-sm)/1 var(--xf); color:var(--xc-ink2); }
.xrp__bt{ flex:1 1 100%; margin-top:8px; font:400 var(--xf-sm)/1.55 var(--xf);
  color:var(--xc-ink2); }
.xrp__bt b{ color:var(--xc-ink); font-weight:600; }

/* ── celulele de statistica · `.xpj__mc` (24-proiectii.css:109) ────────────
   ⚠ PISTA, NU GRILA, ca la antetul grupului 3 si la Date financiare: `min-width:0`
     pe pista (R30), snap, bara ascunsa. Patru celule nu incap niciodata pe 390px. */
/* ⚠ `align-items:stretch` EXPLICIT. Masurat: cele patru celule ieseau de
   inaltimi diferite, fiindca notele de sub cifra au una, doua sau trei randuri.
   Patru cutii cu baza la inaltimi diferite arata ca o eroare de asezare. */
.xrp__tri{ min-width:0; display:flex; align-items:stretch; gap:10px; margin:18px 0 0; padding:2px 0;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; }
.xrp__tri::-webkit-scrollbar{ display:none; }
/* ⚠⚠ LATIME RESPONSIVA: `clamp(152px, 46%, 210px)`. Masurat pe textul real la
   390px — „$24,60 mld" la 20px cere ~112px plus 32px de padding, deci podeaua de
   152px are aer. La 350px de pista da 161px si se vad doua celule plus jumatate
   din a treia; peste 456px se opreste la 210px, ca sa nu creasca fara rost. */
.xrp__c{ min-width:0; flex:0 0 clamp(152px, 46%, 210px); scroll-snap-align:start;
  padding:15px 16px; border-radius:var(--xr-i); background:var(--xs-inset); }
.xrp__cl{ display:block; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xrp__cl::first-letter{ text-transform:uppercase; }
.xrp__cv{ display:block; margin-top:2px; font:600 var(--xt-5)/1.1 var(--xf);
  letter-spacing:-.014em; font-variant-numeric:tabular-nums; }
.xrp__cn{ display:block; margin-top:6px; font:500 var(--xt-7)/1.35 var(--xf); color:var(--xc-ink3); }
.xrp__cn b{ color:var(--xc-ink2); font-weight:600; }

/* ── B · asteptarile analistilor ── */
.xrp__kv{ list-style:none; margin:16px 0 0; padding:0; }
.xrp__kv li{ display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; padding:11px 0; font:400 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xrp__kv li + li{ background:var(--xsep) no-repeat top/100% 1px; }
/* ⚠ „Profit pe actiune estimat", nu „profit": aceeasi situatie — `rp.an_trim` e
   scrisa cu litera mica in catalog, dar aici deschide randul. */
.xrp__kv li > span::first-letter{ text-transform:uppercase; }
.xrp__kv em{ font-style:normal; color:var(--xc-ink4); }
.xrp__kv b{ flex:none; color:var(--xc-ink); font-weight:600;
  font-variant-numeric:tabular-nums; }

/* ══ CARDUL ISTORICULUI ════════════════════════════════════════════════════
   ⚠ FARA MUCHIE DE ACCENT. Era o banda de 2px in culoarea verdictului sus pe
     card; scoasa la cerere. Culoarea ramane DOAR pe cifre — niciun fond, nicio
     dunga: singura suprafata colorata din sectiune era ea.
   ⚠ TITLUL CARDULUI e din nou nume de rubrica, pe treapta obisnuita de card.
     Concluzia a urcat sub titlul sectiunii, ca fraza de introducere. */

/* ── cele trei metrici · CARDURI pe o pista ────────────────────────────────
   ⚠ Fiecare cifra sta in cardul ei (`--xs-inset`), nu libera pe fondul cardului
     mare: cerut explicit, si e acelasi tipar ca celulele din antetul grupului 3.
   ⚠ ETICHETA E ALBA (`--xc-ink`), nu gri. Ea spune CE masori; culoarea ramane pe
     cifra, unde spune CUM sta.
   ⚠ PISTA CU SWIPE: `min-width:0` (R30), snap, bara ascunsa. Pe desktop cele
     trei umplu randul, deci nu mai are ce derula. */
.xrp__h3{ min-width:0; display:flex; align-items:stretch; 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; }
.xrp__h3::-webkit-scrollbar{ display:none; }
/* ⚠⚠ LATIME RESPONSIVA, nu procent fix. `clamp(176px, 56%, 240px)`:
     la 350px de pista da 196px, la 480px da 240px si se opreste acolo.
     Cu 76% fix, la 350px iesea 266px — doua carduri si un pic, adica pare ca
     n-are ce derula; iar pe un ecran lat ar fi crescut la nesfarsit.
   ⚠ Podeaua de 176px e masurata: „Reactia medie cand depaseste" la 15,5px are
     nevoie de ~140px ca sa nu se rupa in patru randuri, plus 36px de padding. */
.xrp__hc{ min-width:0; flex:0 0 clamp(176px, 56%, 240px); scroll-snap-align:start;
  padding:16px 18px 18px; border-radius:var(--xr-i); background:var(--xs-inset); }
.xrp__hl{ display:block; font:600 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink); }
.xrp__hl::first-letter{ text-transform:uppercase; }
/* treapta eroica · `.xfv__hero` (22-fair-value.css:68) */
.xrp__hv{ display:block; margin-top:6px;
  font:700 var(--xt-1)/1 var(--xf);
  letter-spacing:-.022em; font-variant-numeric:tabular-nums; }
.xrp__hn{ display:block; margin-top:10px; font:500 var(--xt-7)/1.4 var(--xf); color:var(--xc-ink3); }
.xrp__hn b{ color:var(--xc-ink2); font-weight:600; }

/* ── banda de istoric · opt segmente ───────────────────────────────────────
   ⚠⚠ SEGMENTE, NU PATRATELE CU `+` SI `&minus;`. Opt cutii de 22px cu o glifa
      inauntru aratau ca un rand de butoane care nu fac nimic. Acum e o banda:
      opt dungi rotunjite, imparte latimea intre ele, colorate dupa rezultat.
      Culoarea spune tot, fara niciun caracter — si e forma pe care o are deja
      bara de percentila din celelalte sectiuni.
   ⚠ Inaltimea e `--xbar` / 2 (5px), aceeasi ca barele secundare de la Date
     financiare: e un reper, nu o masuratoare. */
/* ⚠ GROSIMEA E 8px, aceeasi ca barele de probabilitate de la Proiectii
   (`.xpj__pb`, 24-proiectii.css:128), si acelasi fond `--xs-inset` sub ele.
   Erau 5px — `--xbar / 2` — adica treapta barelor SECUNDARE de la Date
   financiare. Aici banda e reperul principal al cardului, nu o nota. */
.xrp__st{ display:flex; gap:4px; margin:16px 0 0; }
.xrp__m{ flex:1 1 0; min-width:0; height:8px;
  border-radius:var(--xr-p); background:var(--xs-inset); }
.xrp__m.is-b{ background:var(--xc-lime); }
.xrp__m.is-m{ background:var(--xc-pink); }
.xrp__m.is-n{ background:var(--xs-inset); }
/* eticheta ascunsa din fiecare segment */
.xrp__sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── D+E · cele doua carduri mari ──────────────────────────────────────────
   ⚠ BENTO, nu pista: cardurile au un tabel de opt randuri si un grafic — inalte
     amandoua. Un card inalt intr-o pista orizontala ascunde continut in spatele
     unui gest si rupe derularea verticala. Aceeasi decizie ca la cele patru
     carduri cu date. */
/* ══ BENTO ═════════════════════════════════════════════════════════════════
   Cele cinci blocuri nu sunt egale ca greutate, iar o coloana simpla le-ar da
   tuturor aceeasi latime. Sase coloane, cu spanuri:
     A urmatoarea raportare   4/6   e lucrul cautat primul, are trei cifre
     B asteptarile analistilor 2/6  o lista de trei randuri
     C istoricul depasirilor   6/6  patru celule pe un rand cer latimea intreaga
     D reactiile               3/6
     E traiectoria             3/6  se citesc impreuna, despre aceeasi masuratoare
   ⚠ Pe mobil TOATE trec pe 6/6, adica o coloana. Nu se comuta pe `display`:
     spanurile raman aceleasi, se schimba doar numarul de coloane.
   ⚠ `align-items:start` — cardurile au inaltimi foarte diferite (o lista de trei
     randuri langa un card cu trei cifre); intinse la aceeasi inaltime, cel mic
     ar fi ramas cu jumatate de suprafata goala. */
.xrp__bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  margin:22px 0 0; align-items:start; }
.xrp__bento > *{ grid-column:span 6; margin:0; min-width:0; }
.xrp__b3{ min-width:0; }

/* ── perechea de sus · UN CARD PE MOBIL, DOUA PE DESKTOP ───────────────────
   ⚠⚠ `display:contents` in mod implicit: invelisul NU exista ca si cutie, iar
      cele doua `section` dinauntru sunt direct celule in grila bento, cu
      spanurile lor. Asa nu emit marcajul de doua ori.
   ⚠ `min-width:0` trebuie repetat pe copii: regula `.xrp__bento > *` tinteste
     INVELISUL, nu ei, iar cu `display:contents` el nu mai e celula de grila. */
.xrp__pair{ display:contents; }
.xrp__pair > *{ min-width:0; }

/* ⚠⚠ RE-IMBRACAREA CARDULUI TEMEI, la (0,3,0). `mds_rap_traiectorie()` intoarce
   un `<section class="cd">` cu `.cd__top` / `.cd__body`, stilizat de tema.
   Aici primeste suprafata si razele limbajului nou, fara sa se atinga
   `raportari.css` sau `mds-design.css`. */
/* ⚠ `scroll-margin-top` si pe cardul TEMEI: `mds-xdp.js` il aduce inapoi in
   ecran dupa inchiderea pliajului, iar fara marja ar ajunge sub antet. */
.mdsx .xrp .cd{ margin:0; background:var(--xs-card); border:0; border-radius:28px;
  padding:26px 24px 28px; box-shadow:var(--xe-lift); scroll-margin-top:78px; }
.mdsx .xrp .cd__top{ margin:0 0 16px; padding:0; border:0; }
/* ⚠ ACEEASI treapta ca `.xrp__ct`: cardul temei si cardurile mele stau unul
   langa altul in bento, iar doua titluri de card la marimi diferite pe acelasi
   rand sunt exact lucrul care se vede. */
.mdsx .xrp .cd__ttl{ font-weight:600;
  font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; color:var(--xc-ink); }
.mdsx .xrp .cd__sub{ margin-top:12px; font:400 var(--xf-sm)/1.55 var(--xf);
  color:var(--xc-ink2); }
.mdsx .xrp .cd__body{ padding:0; }

/* cifrele mari din cardul graficului */
.mdsx .xrp .big{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 0; }
.mdsx .xrp .big > div{ min-width:0; padding:15px 16px; border-radius:var(--xr-i);
  background:var(--xs-inset); }
.mdsx .xrp .big b{ display:block; font:600 var(--xt-5)/1.1 var(--xf); letter-spacing:-.014em;
  color:var(--xc-ink); font-variant-numeric:tabular-nums; }
.mdsx .xrp .big span{ display:block; margin-top:6px; font:400 var(--xt-7)/1.35 var(--xf);
  color:var(--xc-ink3); }

/* ── tabelul de reactii, re-imbracat ───────────────────────────────────────
   ⚠ Marcajul e al temei (`mds_rap_reactii()`), inclusiv `is-extra` pe randurile
     de la al cincilea in sus. Doar suprafata si scara se schimba. */
.mdsx .xrp .rp__rx{ margin:16px 0 0; }
.mdsx .xrp .rp__hd{ color:var(--xc-ink3); font:600 var(--xt-8)/1 var(--xf);
  letter-spacing:.06em; text-transform:uppercase; padding-bottom:10px; }
.mdsx .xrp .rp__r{ padding:11px 0; font-family:var(--xf); }
.mdsx .xrp .rp__r + .rp__r{ background:var(--xsep) no-repeat top/100% 1px; border-top:0; }
.mdsx .xrp .rp__dt{ font:500 var(--xt-7)/1.35 var(--xf); color:var(--xc-ink2); }
.mdsx .xrp .rp__v{ font:600 var(--xf-sm)/1.2 var(--xf); font-variant-numeric:tabular-nums; }
.mdsx .xrp .rp__s{ font:500 var(--xt-7)/1 var(--xf); color:var(--xc-ink3); }
.mdsx .xrp .rp__dr{ font:400 var(--xt-8)/1 var(--xf); color:var(--xc-ink4); }
.mdsx .xrp .rp__b{ border-radius:7px; font:700 var(--xt-8)/1 var(--xf); }
.mdsx .xrp .rp__b.is-b{ background:color-mix(in srgb, var(--xc-lime) 16%, transparent); color:var(--xc-lime); }
.mdsx .xrp .rp__b.is-m{ background:color-mix(in srgb, var(--xc-pink) 16%, transparent); color:var(--xc-pink); }
.mdsx .xrp .rp__t{ background:var(--xs-track); border-radius:var(--xr-p); }
.mdsx .xrp .rp__z{ background:rgba(255,255,255,.18); }

/* ── plierea tabelului de reactii · `uid`, nu id fix ───────────────────────
   ⚠ `mds_rap_card_reactii()` al temei foloseste id-ul FIX `rp-rex`
     (`analiza-raportari.php:488`). Aici cardul si caseta sunt ale mele, cu
     `uid` per activ (R7); din tema se refoloseste doar tabelul.
   ⚠ Caseta se emite INAINTEA tabelului: selectorul e `~`, frate care urmeaza. */
.xrp__ft{ position:absolute; opacity:0; pointer-events:none; }
.xrp__ft:not(:checked) ~ .rp__rx .rp__r.is-extra{ display:none; }
/* ⚠ `--xr-p`, nu `12px`, si FARA `background:transparent` la deschidere: sunt
   aceleasi doua defecte reparate la `.xdp__fx` si `.xaf__fx` (punctele 13-14).
   Cererea le numea acolo, dar butonul asta e al treilea exemplar al aceluiasi
   tipar pe aceeasi pagina — lasat asa, ar fi fost singurul cu alta raza si
   singurul care dispare cand e deschis. */
/* ⚠ 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. */
.xrp__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; }
.xrp__fx:hover{ background:#141417; }
.xrp__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; }
.xrp__ft:checked ~ .xrp__fx{ color:var(--xc-ink2); }
.xrp__ft:checked ~ .xrp__fx::after{ transform:translateY(2px) rotate(-135deg); }
.xrp__fb{ display:none; }
.xrp__ft:checked ~ .xrp__fx .xrp__fa{ display:none; }
.xrp__ft:checked ~ .xrp__fx .xrp__fb{ display:block; }

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

@media (prefers-reduced-motion:reduce){
  .xrp__tri{ scroll-snap-type:none; }
  .xrp__fx,.xrp__fx::after{ transition:none; }
}

/* ══ MOBIL · sub pragul temei ══════════════════════════════════════════════
   ⚠ Cerut: pe mobil, „Ce asteapta analistii" intra IN cardul „Urmatoarea
     raportare". Doua carduri unul sub altul, fiecare cu suprafata, umbra si
     raza proprie, pentru sase randuri de continut, sunt doua chenare unde
     ajunge unul.
   ⚠ Invelisul ia suprafata de card, iar cele doua `section` raman goale pe
     dinauntru. Despartitorul e `--xsep`, acelasi gradient de 1px folosit intre
     randurile de lista din toata tema — nu o bordura care taie cardul in doua. */
@container mdsx (max-width:899px){
  .xrp__pair{ display:block; grid-column:span 6;
    background:var(--xs-card); border-radius:28px; padding:26px 24px 28px;
    box-shadow:var(--xe-lift); scroll-margin-top:78px; }
  .xrp__pair > .xrp__card{ background:none; box-shadow:none; border-radius:0;
    padding:0; }
  .xrp__pair > .xrp__card + .xrp__card{ margin-top:24px; padding-top:24px;
    background:var(--xsep) no-repeat top/100% 1px; }
  /* lista de analisti nu mai are nevoie de aerul ei de sus: il da separatorul */
  .xrp__pair > .xrp__card--an .xrp__kv{ margin-top:12px; }
}

/* ══ DESKTOP · pragul temei, pe CONTAINER (20-grup2.css:207) ══ */
@container mdsx (min-width:900px){
  .xrp__card{ border-radius:var(--xr-c); padding:29px 31px 31px; scroll-margin-top:82px; }
  .mdsx .xrp .cd{ border-radius:var(--xr-c); padding:29px 31px 31px; scroll-margin-top:82px; }
  /* ⚠ Patru celule umplu exact randul; trei la cardul de raportare. */
  .xrp__c{ flex:0 0 calc((100% - 2 * 10px) / 3); }
  .xrp__bento{ gap:13px; }
  .xrp__card--nx{ grid-column:span 4; }
  .xrp__card--an{ grid-column:span 2; }
  /* ⚠ CAND E SINGUR, IA TOT RANDUL. Masurat pe cele sapte: EL.RO n-are lista de
     analisti, IMP.RO si O.US n-au cardul de raportare. Ramas pe 2/6, cardul de
     analisti al lui IMP.RO ar fi stat singur intr-un rand, cu patru sesimi
     goale langa el. */
  .xrp__pair:has(> :only-child) > *{ grid-column:span 6; }
  .xrp__card--ist{ grid-column:span 6; }
  .xrp__h3{ gap:13px; }
  .xrp__hc{ flex:0 0 calc((100% - 2 * 14px) / 3); }
  .xrp__b3{ grid-column:span 3; }
  .mdsx .xrp .big{ grid-template-columns:repeat(3,1fr); }
}

/* ══ PUNCTUL 15 · pe mobil, doua carduri pornesc PLIATE ════════════════════
   „Cum a reacționat prețul" (`.xrp__card--rc`, al meu) si „Cum se mișcă
   prețul" (`.xrp .cd`, al temei). Se vad titlul, textul introductiv si o
   sageata; restul apare la apasare.

   ⚠⚠ MASURAT DE CE: pe 390px cele doua carduri aveau 575px si 524px, adica
      1099px — mai mult de un ecran si un sfert doar ele doua, intr-o sectiune
      care mai are trei carduri. Pliate, sectiunea incepe cu toate cele cinci
      titluri vizibile si omul alege ce deschide.

   ⚠ Comutatorul e pus de `mds-xrp.js`: cardul temei nu poate primi marcaj din
     PHP (R33). Fara script, cardurile raman desfasurate — comportamentul de
     dinainte, nimic stricat.

   ⚠⚠ `@container mdsx (max-width:899px)`, adica MAX-width — singurul bloc de
      felul asta din fisier, si dinadins. Restul fisierului scrie regulile de
      mobil la baza si le acopera intr-un `min-width:900px`. Aici n-ar fi mers:
      ar fi trebuit sa ANULEZ pe desktop un `display:none` pus la baza, iar
      valoarea de anulat difera de la element la element (`block`, `flex`,
      `grid`, `table-row`). `revert` nu e de incredere peste marcaj al temei.
      Cu `max-width`, pe desktop regula pur si simplu nu exista si fiecare
      element isi pastreaza `display`-ul propriu. */
.mdsx .xrp .xrp__zt{ position:absolute; opacity:0; pointer-events:none; }
.mdsx .xrp .xrp__zx{ display:none; }

@container mdsx (max-width:899px){
  /* ⚠ Se ascund FRATII de dupa caseta, mai putin capul cardului si sageata.
     `.xrp__ct` + `.xrp__cs` sunt capul cardului meu; `.cd__top` e capul
     cardului temei si contine deja si titlul, si subtitlul. */
  .mdsx .xrp .is-z > .xrp__zt:not(:checked) ~ *:not(.xrp__ct):not(.xrp__cs):not(.cd__top):not(.xrp__zx){
    display:none; }
  .mdsx .xrp .is-z > .xrp__zx{ display:flex; }
}

/* Sageata · acelasi desen ca la `.xrp__fx::after`, ca sa nu existe doua feluri
   de sageata in aceeasi sectiune. Rotunda si de 40px: singura ei treaba e sa
   fie apasabila, iar 40px e pragul de la care se nimereste cu degetul. */
.mdsx .xrp .xrp__zx{ align-items:center; justify-content:center;
  width:40px; height:40px; margin:18px auto 0; border-radius:50%;
  background:var(--xs-inset); color:var(--xc-ink2); cursor:pointer;
  transition:background .15s ease, color .15s ease; }
.mdsx .xrp .xrp__zx:hover{ background:#141417; color:var(--xc-ink); }
.mdsx .xrp .xrp__zx::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; }
.mdsx .xrp .xrp__zt:checked ~ .xrp__zx::after{
  transform:translateY(2px) rotate(-135deg); }

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

/* ══ BLOCURILE TEMEI, ADUSE PE SCARĂ · punctul de typografie ════════════════
   ⚠⚠ `.rp__*`, `.is-cap` si `.is-mid` sunt clase ale TEMEI, din
      `analiza-raportari.php` si `assets/css/sections/raportari.css`. R33 le
      scoate din discutie ca fisiere, dar sectiunea asta le re-imbraca deja
      (vezi antetul fisierului), asa ca se aliniaza de aici.
   ⚠ MASURAT inainte: erau 23 de elemente la 12,5px, 20 la 10,5px si 2 la 15px —
      adica trei marimi in afara scarii, toate in aceeasi sectiune.
   ⚠ `.is-cap` si `.is-mid` stateau la 9,5px, cele mai mici din toata pagina:
      etichetele de sub graficul de traiectorie. Urca la 12px, podeaua. */
.mdsx .xrp .rp__n,
.mdsx .xrp .rp__tj-v,
.mdsx .xrp .rp__fw-l,
.mdsx .xrp .rp__fw-v{ font-size:var(--xt-8); }
.mdsx .xrp .rp__tj-p,
.mdsx .xrp .rp__fwt,
.mdsx .xrp .rp__fw-n,
.mdsx .xrp .is-p,
.mdsx .xrp .is-n,
.mdsx .xrp .is-cap,
.mdsx .xrp .is-mid{ font-size:var(--xt-8); }
/* Etichetele butonului temei („Vezi mai mult" / „Vezi mai puțin"): acelasi
   tratament ca butoanele mele — o treapta sub textul din jur. */
.mdsx .xrp .rp__x-a,
.mdsx .xrp .rp__x-b{ font-size:var(--xt-7); }

/* ⚠ Ultimele doua blocuri ale temei ramase in afara scarii, ambele in tabelul
   de reactii: antetul de coloana (`.rp__hd span`, 10,5px) si pastila de
   proportie (`.rp__pil span` cu `em` inauntru, 10,5 si 12,5px). N-au clasa
   proprie pe span, deci se tintesc prin parinte. */
.mdsx .xrp .rp__hd span,
.mdsx .xrp .rp__pil span{ font-size:var(--xt-8); }
.mdsx .xrp .rp__pil span em{ font-size:var(--xt-8); }