/* ═══════════════════════════════════════════════════════════════════════════
   Raportări și surprize.   RAP-LOT1

   ⚠ TIPOGRAFIA VINE DIN SCARĂ. `--f-h1`, `--f-corp`, `--f-mic`, `--f-nota`,
     `--f-fin`. Tokenii cresc singuri pe desktop; valorile scrise de mână nu.

   ⚠ TREI VALORI ÎN PX, toate copiate din reguli existente și citate acolo unde
     apar: 10,5px eticheta mică (`mds-design.css:415`, `:762`), 9,5px cea mai
     mică treaptă a temei. Scara n-are token sub 12px.

   ⚠ CARDURILE NU AU CSS AICI. Folosesc `.mini`, `.mini__c.sx__card` și
     TOOLTIP-2, definite în `mds-design.css` și `afacere.css`. Refolosite ca să
     moștenească și reparația de salt la clic, nu redesenate.

   ⚠ `.big` și `.kv` sunt ale temei (`mds-design.css:195`, `:200`). Nu se ating.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 00 · cardul „urmeaza raportarea" ────────────────────────────────────
   ⚠ FARA NICIO REGULA PE CONTAINER. Cardul e `<section class="cd">`, exact ca
     „Recomandarea analistilor" si ca panourile din „Afacerea si rezultatele":
     fundal, chenar, raza si antet vin din `.mdsx .cd` (`mds-design.css:716`).
     Trei versiuni anterioare incercasera o forma proprie — gradient, muchie
     colorata de accent, banda subtire — si toate aratau ca un element strain
     langa restul paginii.

   Mai jos sunt DOAR cele doua lucruri care nu exista in componenta temei:
   randul cu cifra zilelor si nota mica de sub cifrele din `.mini`. */

/* ⚠ GRADIENT PE CARD, dupa tiparul lui `.mdsx .end` (`mds-design.css:287`):
     `linear-gradient(160deg, ...)` peste fundalul de card al temei. Se adauga
     pe `.cd`, nu pe un container propriu, ca sa nu se piarda chenarul si raza.
   ⚠ 12% IN COLT, o singura oprire, stins la 70%. Peste atat, cardul incepe sa
     arate colorat, nu accentuat; sub, nu se mai vede pe fundalul inchis.
   ⚠ SELECTOR CU `:has()`, ca sa prinda DOAR cardul asta, nu toate `.cd` din
     pagina. Alternativa ar fi fost o clasa in plus pe marcaj, dar cardul e
     `<section class="cd">` tocmai ca sa fie identic cu celelalte. */
.mdsx .band .cd:has(> .cd__body > .rp__nx-l){
	background:
		linear-gradient(160deg,
			color-mix(in srgb, var(--c) 12%, transparent),
			transparent 70%),
		#121214;
}

/* ⚠ TITLUL SI SUBTITLUL PE ACELASI RAND, fara chenar de card. `.lbl2` da
     tipografia; `em` adauga perioada, in gri, dupa un separator.

   ⚠ `margin-top: 0`, ALTFEL CADE CU 34px MAI JOS DECAT TITLUL SECTIUNII.
     `valoare-justa.css:162` pune `.mdsx .band .lbl2{ margin-top:34px }`, iar
     comentariul de acolo spune de ce: „in capitolele existente vine mereu dupa
     un paragraf". Al nostru e PRIMUL element din banda, deci marginea il
     impinge sub titlul de sectiune, care pe desktop sta in coloana din stanga
     si incepe de sus. Regula e mai specifica decat `.mdsx .lbl2` (3 > 2), deci
     trebuie batuta cu una la fel de specifica. */
.mdsx .band .lbl2.rp__nxt{ margin-top: 0; }
.mdsx .rp__nxt em{
	font-style: normal;
	font-weight: 400;
	color: var(--ink-3);
}
.mdsx .rp__nxt em::before{
	content: "\00b7";
	margin: 0 7px;
	color: var(--ink-4);
}
/* fara cardul din jur, randul cu cifra n-are padding propriu */
.mdsx .rp__nx-l{ margin-top: var(--s-4) !important; }

/* rândul cu cifra: `baseline` ca unitatea sa stea pe linia cifrei */
.mdsx .rp__nx-l{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 10px;
	margin: 0 !important;
}
/* ⚠ SELECTORUL ARE `p` IN EL, si asta e cheia. `.mdsx .band p b` (specificitate
     0,2,2) forteaza `font-size:13px` pe orice `<b>` dintr-un paragraf de banda
     (`mds-design.css:193`). Regula mea era `.mdsx .rp__nx-d` (0,2,0), deci
     PIERDEA: cifra iesea la 13px, oricat de mare era tokenul.
     Prins din captura, nu din cod: in preview cifra parea mica si credeam ca
     fisierul e vechi. `.mdsx .band p b.rp__nx-d` e 0,3,2 si castiga.
     Tema insasi avertizeaza despre regula asta, la `valoare-justa.css`:
     „Fara regula asta, `.mdsx .band p b` (0,2,2) le-ar fi facut 13px".

   ⚠ TOT RANDUL URCA, nu doar cifra. Cu numarul pe `--f-cifra` (31px) si restul
     pe `--f-corp` (15px), linia se citea ca text mic cu o cifra in el: „12" iesea
     in evidenta, dar „zile pana la raportarea de pe 20 septembrie" — adica
     informatia — ramanea marunta.
     Acum unitatea si textul sunt pe `--f-lead` (17 -> 19), tokenul frazei de
     deschidere a sectiunilor.

   ⚠ CIFRA E PE `--f-h3` (23 -> 25), sub titlul cardului ca greutate vizuala,
     nu peste el. `--f-cifra` (26 -> 31) e tokenul cifrelor care SUNT subiectul
     unui card — pretul-tinta, scorul — si acolo cifra e singura pe rand. Aici
     sta intr-o propozitie, langa „zile pana la raportarea de pe...", deci la
     31px domina o fraza pe care ar trebui doar s-o inceapa.
   ⚠ Ce era inainte, si de ce: `--f-cifra` (26 -> 31), NU pe `--f-h1`. `--f-h1` e tokenul
     TITLULUI DE SECTIUNE (`.mdsx .ttl`, 36 -> 38): o cifra dintr-un card
     ajungea mai mare decat antetul paginii. `--f-cifra` e tokenul cifrelor mari
     din carduri (`.mdsx .big b`), si se aseaza corect intre titlul cardului
     (`--f-cd-ttl`, 20px) si titlul sectiunii.
     ⚠ Prima incercare cu `--f-cifra` PAREA prea mica, dar atunci regula inca
       pierdea in fata lui `.mdsx .band p b` si nu se aplica deloc: se vedeau
       13px, nu 26. Tokenul n-a fost niciodata testat pana acum. */
.mdsx .band p b.rp__nx-d{
	font: 400 var(--f-h3)/1 var(--m);
	letter-spacing: -.05em;
	color: var(--c);
}
.mdsx .rp__nx-u{ font: 400 var(--f-corp)/1 var(--b); color: var(--ink-2); }
/* ⚠ CAND IN LOCUL CIFREI E TEXT („Nu e anuntata"), acelasi token de marime dar
     alta familie si alta chinga: `--m` e fontul cifrelor, cu `letter-spacing`
     negativ, si strange urat literele. `--h` e fontul titlurilor. */
.mdsx .band p b.rp__nx-d.is-text{
	font-family: var(--h);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
}
/* ⚠ CAND IN LOC DE CIFRA E TEXT („Nu e anuntata"), fraza de langa are nevoie de
     aer deasupra pe mobil: cele doua se aseaza una sub alta, iar `align-items:
     baseline` le lipeste. Pe desktop stau pe acelasi rand si nu e nevoie. */
.mdsx .rp__nx-t{
	flex: 1 1 22ch;
	font-size: var(--f-corp);
	line-height: 1.5;
	color: var(--ink-2);
}
/* la fel pentru data din fraza: altfel `.mdsx .band p b` o face 13px mono */
.mdsx .band p .rp__nx-t b{
	font-family: var(--b);
	font-weight: 600;
	font-size: inherit;
	color: var(--ink);
	letter-spacing: 0;
}

/* ⚠ ETICHETELE CIFRELOR, ALINIATE CU CARDURILE MARI. `.mdsx .mini__k` al temei
     e 11px pe `--ink-3` (`mds-design.css:1008`), potrivit pentru doua cuvinte
     langa o cifra. „Profit pe actiune asteptat" se rupe pe doua randuri, deci
     trece pe `--f-mic` si `--ink-2`, exact ca `.mini__c.sx__card .mini__k` din
     `afacere.css:181`, folosita de „Rata de depasire" si „Surpriza
     standardizata". Aceeasi eticheta, aceeasi marime. */
.mdsx .rp__nx-m .mini__k{
	font-size: var(--f-mic);
	line-height: 1.35;
	color: var(--ink-2);
}

/* nota de sub cifrele din `.mini`: numarul de analisti sau intervalul */
.mdsx .rp__nx-s{
	display: block;
	margin-top: 6px;
	font: 400 10.5px/1.4 var(--b);
	font-style: normal;
	color: var(--ink-3);
}

/* ⚠ TREI COLOANE CAND SUNT TREI CIFRE. `.mdsx .mini` e pe doua
     (`mds-design.css:1005`), deci a treia ramanea singura pe randul ei si
     jumatate de card iesea gol. `:has()` numara copiii, deci regula se aplica
     singura: cu doua cifre ramane pe doua coloane, fara nicio exceptie scrisa.
   ⚠ Numai peste 600px. Pe telefon, trei coloane ar sparge cifrele. */
@container mdsx (min-width:600px){
	.mdsx .rp__nx-m:has(> :nth-child(3)){
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container mdsx (max-width:599px){
	.mdsx .rp__nx-t{ flex: 1 1 100%; margin-top: 4px; }
	.mdsx .rp__nx-d.is-text + .rp__nx-t{ margin-top: 9px; }

	/* ⚠ PE TELEFON, „Data trecuta" IESE. Doua cifre incap pe un rand; a treia
	     ar fi impins cardul cu inca un rand pentru o informatie care se vede
	     oricum, mai jos, in tabelul cu reactiile. Se ascunde a treia cifra,
	     oricare ar fi ea, nu una anume: regula nu presupune ce contine. */
	.mdsx .rp__nx-m > :nth-child(3){ display: none; }
}

/* ── 01 · bifele ─────────────────────────────────────────────────────────── */
.mdsx .rp__st{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--s-4);
}
.mdsx .rp__m{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	font-style: normal;
	/* ⚠ `--m`, fontul cifrelor: semnul `+`/`-` de aici e acelasi cu cel din
	     procentele de mai jos, deci trebuie sa fie desenat de acelasi font. */
	font: 400 var(--f-corp)/1 var(--m);
}
.mdsx .rp__m.is-b{ background: color-mix(in srgb, var(--lime) 16%, transparent); color: var(--lime); }
.mdsx .rp__m.is-m{ background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--pink); }
.mdsx .rp__m.is-n{ background: rgba(255,255,255,.05); color: var(--ink-3); }

.mdsx .rp__n{ font-size: var(--f-nota); color: var(--ink-3); }
.mdsx .rp__kv em{ font-style: normal; color: var(--ink-3); }

/* ── 02 · reacțiile, un rând pe trimestru ────────────────────────────────── */
/* ⚠ UN SINGUR RAND. Descrierea, bara si detaliile pe trei randuri insemnau
     opt trimestre in douazeci si patru de randuri, vreo 700px. Cu latimi fixe
     pe coloana, aceleasi cifre incap pe unul singur, la ~270px. */
.mdsx .rp__rx{ margin-top: var(--s-4); }
.mdsx .rp__hd,
.mdsx .rp__r{
	display: grid;
	grid-template-columns: 86px 104px minmax(90px, 1fr) 72px 74px;
	gap: var(--s-3);
	align-items: center;
}
.mdsx .rp__hd{ padding-bottom: 8px; }
/* 10,5px uppercase: eticheta mica a temei, `.mdsx .sum__lbl` (mds-design:415) */
.mdsx .rp__hd span{
	font: 600 10.5px/1 var(--b);
	letter-spacing: .06em;
	text-transform: uppercase;
	/* ⚠ „RAPORTAREA / REZULTATUL / A DOUA ZI" PE ALB: sunt capetele de coloana ale
	     tabelului, nu note. Pe `--ink-3` se citeau ca text secundar, desi spun ce
	     contine fiecare coloana. */
	color: var(--ink);
}
.mdsx .rp__hd span:nth-child(4),
.mdsx .rp__hd span:nth-child(5){ text-align: right; }
.mdsx .rp__r{ padding: 9px 0; border-top: 1px solid var(--line); }
.mdsx .rp__dt{ font: 400 var(--f-nota)/1 var(--m); letter-spacing: -.04em; color: var(--ink-2); }
.mdsx .rp__sr{ display: inline-flex; align-items: center; gap: 7px; }
.mdsx .rp__b{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	font-size: var(--f-fin);
	flex: none;
}
.mdsx .rp__b.is-b{ background: color-mix(in srgb, var(--lime) 16%, transparent); color: var(--lime); }
.mdsx .rp__b.is-m{ background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--pink); }
.mdsx .rp__b.is-n{ background: rgba(255,255,255,.05); color: var(--ink-3); }
.mdsx .rp__s{ font: 400 var(--f-nota)/1 var(--m); letter-spacing: -.04em; color: var(--ink-3); }
.mdsx .rp__t{
	position: relative;
	display: block;
	height: 7px;
	border-radius: 99px;
	background: rgba(255,255,255,.05);
}
.mdsx .rp__z{
	position: absolute;
	left: 50%;
	top: -3px;
	bottom: -3px;
	width: 1px;
	background: rgba(255,255,255,.22);
}
.mdsx .rp__f{ position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.mdsx .rp__v{ font: 400 var(--f-mic)/1 var(--m); letter-spacing: -.04em; text-align: right; }
.mdsx .rp__dr{
	font: 400 var(--f-nota)/1 var(--m);
	letter-spacing: -.04em;
	text-align: right;
	color: var(--ink-3);
}

/* ── 03 · înainte de raportare ───────────────────────────────────────────── */
.mdsx .rp__pls{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4); }
.mdsx .rp__pl{
	padding: 6px 13px;
	border-radius: 99px;
	font: 500 var(--f-fin)/1 var(--b);
	background: color-mix(in srgb, var(--c) 14%, transparent);
	color: var(--c);
}
.mdsx .rp__pl.is-2{ background: rgba(255,255,255,.05); color: var(--ink-2); }

/* ── traiectoria in jurul raportarii ─────────────────────────────────────
   ⚠ Cardul e `<section class="cd">`, ca restul paginii: fundal, chenar si raza
     vin din `.mdsx .cd`. Aici sunt doar graficul, axa si legenda. */
.mdsx .rp__tj-c{
	display: block;
	width: 100%;
	height: 150px;
	overflow: visible;
}
.mdsx .rp__tj-x{
	display: flex;
	justify-content: space-between;
	margin-top: 9px;
}
/* ⚠ ETICHETA DIN MIJLOC LA 50%, nu 62%. Cele doua ferestre sunt acum egale in
     zile, deci si in latime. Cand partea dinainte lipseste, linia verticala sta
     la marginea din stanga si eticheta o urmeaza. */
.mdsx .rp__tj-x i.is-mid{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: var(--ink-2);
}
.mdsx .rp__tj-x.is-doar-dupa{ justify-content: flex-end; }
.mdsx .rp__tj-x.is-doar-dupa i.is-mid{ left: 2%; transform: none; }
.mdsx .rp__tj-x{ position: relative; }
.mdsx .rp__tj-x i{
	font: 400 9.5px/1 var(--b);
	font-style: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-3);
}
/* ⚠ TITLURILE CELOR DOUA JUMATATI PE ALB: sunt capete de sectiune in grafic,
     nu note. Ziua raportarii ramane gri, e doar un reper. */
.mdsx .rp__tj-x i.is-cap{ font-weight: 600; color: var(--ink); }
.mdsx .rp__tj-leg{
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin-top: var(--s-4);
}
.mdsx .rp__tj-g{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 400 var(--f-nota)/1.4 var(--b);
	color: var(--ink-2);
}
.mdsx .rp__tj-g i{ width: 14px; height: 2px; border-radius: 1px; flex: none; }

/* verdictul „in pret": o fraza, nu o pastila */
.mdsx .rp__tj-v{
	margin-top: var(--s-4) !important;
	font-size: var(--f-nota);
	line-height: 1.55;
	color: var(--ink-2);
}
.mdsx .rp__tj-v b{
	font-family: var(--b);
	font-weight: 600;
	font-size: inherit;
	letter-spacing: 0;
	color: var(--ink);
}

@container mdsx (max-width:599px){
	.mdsx .rp__tj-c{ height: 118px; }
}

/* ── ferestrele, banda compacta sub grafic ───────────────────────────────
   ⚠ Erau opt casete cu chenar, de cate trei randuri: ocupau mai mult decat
     graficul pe care il explicau. Acum sunt randuri subtiri, fara chenar, in
     acelasi card. */
/* fara chenar de sus: separarea o face acum butonul de deasupra */
.mdsx .rp__fw2{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
	margin-top: var(--s-4);
}
@container mdsx (min-width:700px){
	.mdsx .rp__fw2:has(> :nth-child(2)){
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-6);
	}
}
/* coloana: titlu + lista. Fara chenar — separarea o face titlul. */
.mdsx .rp__fwc{ min-width: 0; }
/* ⚠ „INAINTE DE RAPORTARE" / „DUPA RAPORTARE" PE ALB: sunt titlurile celor doua
     coloane, nu note de subsol. Pe `--ink-3` se citeau ca text secundar, desi
     spun exact ce contine fiecare jumatate. */
.mdsx .rp__fwt{
	display: block;
	font: 600 10.5px/1 var(--b);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink);
}
.mdsx .rp__fwl{
	margin: 9px 0 0 !important;
	padding: 0;
	list-style: none;
}
/* un rand = o linie: fereastra, cifra, rata. Nimic pe randuri separate. */
.mdsx .rp__fwl li{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--s-3);
	align-items: baseline;
	padding: 5px 0;
	border-bottom: 1px solid var(--line);
}
.mdsx .rp__fwl li:last-child{ border-bottom: 0; }
.mdsx .rp__fw-l{ font-size: var(--f-nota); color: var(--ink-2); }
.mdsx .rp__fw-v{
	font: 400 var(--f-nota)/1 var(--m);
	letter-spacing: -.04em;
	text-align: right;
	min-width: 52px;
}
.mdsx .rp__fw-n{
	font: 400 10.5px/1 var(--b);
	font-style: normal;
	color: var(--ink-3);
	text-align: right;
	min-width: 78px;
}

/* ── procentele de pe grafic ─────────────────────────────────────────────
   ⚠ Etichetele stau in HTML peste SVG, nu in `<text>`: un `<text>` intr-un SVG
     cu `preserveAspectRatio="none"` se intinde odata cu el si iese deformat. */
.mdsx .rp__tj-w{ position: relative; }
.mdsx .rp__tj-p{
	position: absolute;
	transform: translate(-50%, 50%);
	padding: 1px 5px;
	border-radius: 5px;
	background: color-mix(in srgb, #121214 88%, transparent);
	font: 400 10.5px/1.3 var(--m);
	letter-spacing: -.03em;
	white-space: nowrap;
	pointer-events: none;
}
/* ⚠ ETICHETA URMEAZA SEMNUL, ca linia: verde peste zero, rosu sub. */
.mdsx .rp__tj-p.is-p{ color: var(--lime); }
.mdsx .rp__tj-p.is-n{ color: var(--pink); }

/* ── linia de interpretare, sub cifra din card ───────────────────────────
   ⚠ Spune ce inseamna cifra ACELEI companii, nu ce inseamna metrica in general
     — aceea sta in fereastra. `--ink-3` ca sa nu concureze cu cifra. */
.mdsx .rp__w{
	display: block;
	margin-top: 7px;
	font: 400 10.5px/1.4 var(--b);
	color: var(--ink-3);
}

/* ── bara de proportie „cat din miscare, inainte / dupa" ─────────────────
   ⚠ Doua bucati care insumeaza 100%, nu o bara pe scara absoluta: intrebarea e
     cum se imparte miscarea, nu cat de mare e. */
.mdsx .rp__pib{
	display: flex;
	height: 8px;
	margin-top: var(--s-5);
	border-radius: 99px;
	overflow: hidden;
	background: rgba(255, 255, 255, .05);
}
.mdsx .rp__pib i{ background: var(--ink-3); }
.mdsx .rp__pib b{ background: var(--c); }
.mdsx .rp__pil{
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	margin-top: 8px;
}
.mdsx .rp__pil span{
	font: 400 10.5px/1.4 var(--b);
	color: var(--ink-3);
}
.mdsx .rp__pil span:last-child{ text-align: right; }
.mdsx .rp__pil em{
	font: 400 var(--f-nota)/1 var(--m);
	font-style: normal;
	letter-spacing: -.03em;
	color: var(--ink-2);
}
.mdsx .rp__pil span:last-child em{ color: var(--c); }

.mdsx .rp__nesig{ font-style: normal; color: var(--yellow); }

/* ── mobil ───────────────────────────────────────────────────────────────── */
@container mdsx (max-width:599px){
	/* la 390px nu incap cinci coloane: cade deriva de cinci zile, cea mai putin
	   urgenta, si se strang latimile fixe */
	.mdsx .rp__hd,
	.mdsx .rp__r{ grid-template-columns: 74px 88px minmax(60px, 1fr) 64px; gap: var(--s-2); }
	.mdsx .rp__hd span:nth-child(5),
	.mdsx .rp__dr{ display: none; }
	.mdsx .rp__hd span:nth-child(4){ text-align: right; }
	.mdsx .rp__tj-c{ height: 88px; }
}

/* ── comutatorul „Vezi mai mult" ─────────────────────────────────────────
   ⚠ FARA JAVASCRIPT: caseta de bifat plus `~`. Ascunsa cu `opacity`, nu cu
     `display:none`, ca sa ramana in ordinea de tabulare si eticheta sa poata fi
     actionata de la tastatura.
   ⚠ ACTIV SI PE DESKTOP: randurile vechi si ferestrele lungi sunt la fel de
     putin urgente pe orice ecran.
   ⚠ SELECTORII AU DOUA FORME fiindca randurile de reactii stau intr-un `.rp__rx`
     iar ferestrele in `.rp__fw2`: `~` prinde doar frati, nu descendenti. */
.mdsx .rp__x-t{ position: absolute; opacity: 0; pointer-events: none; }

/* ⚠ CE SE ASCUNDE. `~` prinde doar frati, deci fiecare tinta isi are selectorul
     ei: randurile de reactii stau in `.rp__rx`, ferestrele si textele in
     `.rp__more`. */
.mdsx .rp__x-t:not(:checked) ~ .rp__rx .rp__r.is-extra,
.mdsx .rp__x-t:not(:checked) ~ .rp__r-x,
.mdsx .rp__x-t:not(:checked) ~ .rp__fw2 .is-extra,
.mdsx .rp__x-t:not(:checked) ~ .rp__more{ display: none; }

/* ⚠ BUTON, NU LINK. Prima varianta era text de 12,5px cu un chevron de 7px:
     prea mic ca sa para apasabil si sub pragul de 44px recomandat pentru o
     tinta de atins cu degetul. Acum e o bara pe toata latimea, cu chenar. */
.mdsx .rp__x{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin-top: var(--s-5);
	padding: 13px 16px;
	border: 1px solid var(--line-2);
	border-radius: 12px;
	background: rgba(255, 255, 255, .03);
	font: 600 var(--f-corp)/1 var(--b);
	color: var(--ink);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.mdsx .rp__x:hover{ background: rgba(255, 255, 255, .06); border-color: var(--line-3); }
/* chevron desenat din doua muchii, ca sa nu depinda de vreun font */
.mdsx .rp__x::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 .rp__x-t:checked ~ .rp__x{ background: transparent; color: var(--ink-2); }
.mdsx .rp__x-t:checked ~ .rp__x::after{ transform: translateY(2px) rotate(-135deg); }
.mdsx .rp__x-b{ display: none; }
.mdsx .rp__x-t:checked ~ .rp__x .rp__x-a{ display: none; }
.mdsx .rp__x-t:checked ~ .rp__x .rp__x-b{ display: block; }

/* fraza de tipar, sub tabelul de reactii */
.mdsx .rp__r-x{ margin-top: var(--s-4) !important; }

/* titlul asteptarilor, mutat sub cifrele din `.mini` */
.mdsx .band .lbl2.rp__ant{ margin-top: 30px; }

/* ── titlurile, toate la aceeasi marime ──────────────────────────────────
   ⚠ ERAU DOUA MARIMI DIFERITE. `.cd__ttl` e 20px fix (`mds-design.css:730`),
     iar `.lbl2` e 19px care urca la 21px peste 900px (`:1097` si `:1289`). In
     aceeasi sectiune, „Istoricul depasirilor" iesea mai mare decat „Cum a
     reactionat pretul", desi sunt titluri de acelasi rang.
   ⚠ SE ALINIAZA LA `.cd__ttl`, adica la titlul cardurilor „Recomandarea
     analistilor" si „Pret-tinta": aceea e marimea de referinta pentru un titlu
     de card in restul paginii.
   ⚠ Regula bate `.mdsx .band .lbl2` din `valoare-justa.css` (specificitate 3),
     deci trebuie la fel de specifica; `.mdsx .band` plus doua clase da 4. */
.mdsx .band .lbl2.rp__nxt,
.mdsx .band .lbl2.rp__ant,
.mdsx .band .rp__t2{
	font: 600 20px/1.2 var(--h);
	letter-spacing: -.015em;
	color: var(--ink);
}
@container mdsx (min-width:900px){
	.mdsx .band .lbl2.rp__nxt,
	.mdsx .band .lbl2.rp__ant,
	.mdsx .band .rp__t2{ font-size: 20px; }
}

/* ⚠ DERULAREA NU MAI SARE LA INCHIDERE. Cand continutul pliat dispare, butonul
     de sub el urca, iar pagina ramane unde era: sub card, in sectiunea
     urmatoare. `overflow-anchor` pe blocurile care se schimba spune browserului
     sa nu se agate de ele, deci ancora ramane cardul, iar pagina il urmeaza.
     Chrome si Edge il respecta; Safari il ignora, unde comportamentul ramane
     cel de acum. */
.mdsx .rp__more,
.mdsx .rp__r.is-extra,
.mdsx .rp__fwl .is-extra,
.mdsx .rp__r-x{ overflow-anchor: none; }
.mdsx .rp__x{ overflow-anchor: auto; }

/* ── cele doua carduri pe acelasi rand, pe desktop ───────────────────────
   ⚠ `.cd-row` E CLASA TEMEI (`mds-design.css:785`): coloana pe mobil, doua
     coloane peste 900px, gap 22px. O foloseste deja Proiectii si „Afacerea si
     rezultatele". Nu se scrie nicio grila noua.
   ⚠ `align-items: start` ca cele doua carduri sa nu se intinda la aceeasi
     inaltime: unul are tabel, celalalt grafic, si arata prost egalizate. */
@container mdsx (min-width:900px){
	.mdsx .rp__2col{ align-items: start; }
}