/**
 * §8 Valoare justă.   VJ-1
 *
 * Mecanisme REFOLOSITE din temă, nu reinventate:
 *   `.band` `.ch` `.ch__t` `.ch__s` `.dek`   capitolul, din `analiza-band.php`
 *   `.cd`                                    cardul de sinteză
 *   `.big`                                   cifrele mari
 *   `.bar` `.bar__f` `.bar__d` `.bar__ends`  bara de interval
 *   `.chip`                                  badge-ul
 *   `.fx` `.fx__i` `.fx__tip`                definițiile, din `analiza-facts.php`
 *   `.lbl2` `.kicker` `.ttl` `.lede`         tipografia
 *   `.vmod`                                  fereastra, din `sections/verdict.css`
 *   `.mo`                                    pliajul lung
 *
 * Mărimile sunt cele ale temei: 11,5 · 12 · 12,5 · 13 · 13,5 · 15 · 16 · 19 ·
 * 26 · 31 px. Nicio mărime nouă.
 *
 * ⚠ CULOAREA capitolului e `--cyan`. Se folosește și la „bilanț și dividende"
 *   (`analiza.php`), dar acela e în grupul 4, la șase capitole distanță.
 *   `--orange` e vecinul direct — capitolul „evaluare", același grup — și de
 *   aceea nu se poate folosi aici.
 *
 * ⚠ SPECIFICITATE. `functions.php:43` include `inc/core/enqueue.php`, iar
 *   `inc/sections/` abia la linia 63, deci fișierele din `assets/css/sections/`
 *   se înregistrează ÎNAINTEA lui `mds-design.css`. La dependență egală ordinea
 *   din coadă decide tipărirea, deci orice suprascriere a unei reguli din temă
 *   are nevoie de specificitate mai mare, nu doar de poziție mai târzie.
 *   Regulile care suprascriu sunt marcate mai jos, fiecare cu motivul.
 *
 *   Verificate una câte una, pe reguli care pot atinge efectiv elementele de
 *   aici — nu pe orice regulă care se termină la fel:
 *     `.big.vj__big b`   bate `.mdsx .big b`      (3 > 2)   `.vj__big` E un `.big`
 *     `.band .vj__lead`  bate `.mdsx .band p`     (3 > 2)   e un `<p>` în bandă
 *     `.band .vj__note`  bate `.mdsx .band p`     (3 > 2)   la fel
 *     `.ch .vj__chip`    bate `.mdsx .chip`       (3 > 2)
 *     `.vj__scale .bar__d` bate `.mdsx .bar__d`   (3 > 2)
 *     `.band .lbl2`      bate `.mdsx .lbl2`       (3 > 2)
 *     `.vj__gh .vj__ghl` bate `.mdsx .lede`       (3 > 2)
 */

/* ══ ANTETUL DE GRUP ═══════════════════════════════════════════════════════
   Tiparul din `analiza-head.php`: `.kicker` + `h2.ttl` + `.lede`. Antetul
   paginii e deja `h2`, iar capitolele folosesc `h3` pentru `.ch__t`; grupul
   rămâne deci `h2`, doar la o treaptă mai mică de mărime. */
.mdsx .vj__gh { margin: 34px 0 30px; }
.mdsx .vj__ght { margin: 0; font-size: 26px; line-height: 1.15; }

/* ⚠ SUPRASCRIE `.mdsx .lede{max-width:46ch}`. Lățimea aia e potrivită pentru
     introducerea paginii, prea îngustă pentru un antet care descrie cinci
     secțiuni: textul ieșea pe patru rânduri într-o coloană de o treime. */
.mdsx .vj__gh .vj__ghl { max-width: none; margin-top: 12px; font-size: 15px; }

/* ══ CAPITOLUL ═════════════════════════════════════════════════════════════ */

/* ⚠ `.chip` are culoarea HARDCODATĂ pe lime în `mds-design.css`
     (`background:rgba(184,217,74,.13); color:var(--lime)`) și nu citește nicio
     variabilă — badge-ul ieșea verde și când spunea „supraevaluat".
   ⚠ `align-self` înseamnă altceva pe cele două lățimi: pe mobil `.ch` e
     flex-ROW cu `align-items:baseline`, iar o pastilă cu padding coboară sub
     linia titlului, deci `center` o urcă pe mijloc. Pe desktop `.ch` devine
     flex-COLUMN cu `align-items:flex-start`, iar axa transversală e ORIZONTALA:
     acolo `center` ar împinge-o spre mijlocul coloanei, nu sub titlu. */
/* ⚠ Badge-ul e ÎNĂUNTRUL lui `.ch__s`, nu frate cu `.ch__t`: blocul
     `analiza-band.php` pune tot `meta` într-un singur `<span class="ch__s">`.
     De aceea `align-self` n-avea niciun efect — nu e copil de flex al lui `.ch`
     — și de aceea stătea lipit de preț: aceeași linie, fără spațiu.
     `.ch__s` devine bloc, iar badge-ul coboară pe rând propriu. */
.mdsx .ch .ch__s { display: block; white-space: normal; }
.mdsx .ch .vj__chip {
	/* ⚠ `display: flex`, NU `inline-flex`. `.chip` din temă e `inline-flex`,
	     deci pastila rămâne pe RÂNDUL prețului oricâtă marjă i-ai pune —
	     `margin-top` nu mută un element inline pe linie nouă. `flex` o face
	     bloc, iar `width:max-content` o împiedică să se întindă pe toată
	     lățimea coloanei. */
	display: flex;
	width: max-content;
	max-width: 100%;
	margin-top: 11px;
	background: color-mix(in srgb, var(--bc) 14%, transparent);
	color: var(--bc);
	font-size: 11.5px;
	padding: 7px 13px;
}
.mdsx .vj__chs { width: 100%; margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.mdsx .vj__chs b { font-weight: 600; color: var(--ink-2); }
.mdsx .vj__sub { margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: var(--ink-3); }

/* ══ CARDUL DE SINTEZĂ ═════════════════════════════════════════════════════ */
/* ⚠ `.mdsx .cd { padding:24px 0 22px }` — padding ORIZONTAL ZERO. Conținutul
     nu e lipit fiindcă am uitat marja, ci fiindcă tema o pune pe `.cd__top` și
     `.cd__body` (0 30px), iar cardul de aici n-are nici antet, nici corp: are
     copii direcți. Fără padding pe `.cd`, totul atinge marginea.
   ⚠ SPECIFICITATE: `.mdsx .vj__card` = 2, egal cu `.mdsx .cd`. Fișierele din
     `sections/` se încarcă ÎNAINTEA lui `mds-design.css` (`functions.php:43` vs
     63), deci la egalitate pierdeam. `.cd.vj__card` = 3 câștigă. */
.mdsx .cd.vj__card { margin: 22px 0 0; padding: 20px 18px; }

/* ⚠ SUPRASCRIE `.mdsx .big b{color:var(--c)}`. Regula temei colorează toate
     cifrele mari deodată; cu trei alături, ierarhia se pierde și pagina pare
     dominată de accent. Doar prima ia culoarea. */
.mdsx .big.vj__big b { color: var(--ink); }
.mdsx .big.vj__big .vj__big--a b { color: var(--c); }

/* ⚠ `.bar` are `margin:0`; marja vine din selectori de frate
     (`.tg__lead + .bar`, `.rk__lead + .bar`) care nu acoperă cazul de aici.
   ⚠ La 6px, o zonă justă care ocupă 9% din scară era o dungă invizibilă. */
/* ⚠ `--bc` explicit: fără el, `.bar__f` cade pe `var(--vc)` — verdictul. */
/* ⚠ VJ-SPATIU-2. ATENTIE, aici au fost DOUA erori suprapuse.

     1. Regula asta era MOARTA. `.mdsx .vj__scale` = (0,2,0), la fel ca
        `.mdsx .bar` din temă (mds-design.css:900). Fisierul asta se tiparea
        INAINTEA temei, deci la egalitate castiga tema: bara avea `height:6px`
        si `margin:0`, nu 12px si 20px. De-aia era lipita de text.
        `inc/sections/01-ordine-css.php` (ARH-SEC-3) repara ordinea pentru tot
        folderul; abia dupa el regula de mai jos se aplica.

     2. Chiar aplicata, 20px era prea putin. Marcajele barei sunt 17px pe o
        bara de 12px si sunt centrate pe ea (`top:50%` + `translate(-50%,-50%)`),
        deci ies cu (17−12)/2 = 2,5px in sus SI in jos:

          deasupra   20 − 2,5 = 17,5px
          dedesubt   10 − 2,5 =  7,5px   ← eticheta atingea marcajul

        Acum 28 sus si 16 jos → 25,5 si 13,5px optic. Bara si etichetele ei
     `margin-top:10px` (mds-design.css:924). Marcajele barei sunt 17px pe o
     bara de 12px si sunt centrate pe ea (`top:50%` + `translate(-50%,-50%)`),
     deci ies cu (17−12)/2 = 2,5px in sus SI in jos. Golul OPTIC era:

       deasupra   20 − 2,5 = 17,5px   (+2,4px semi-interlinie a etichetei)
       dedesubt   10 − 2,5 =  7,5px   (eticheta `.bar__ends` are line-height 1)

     Sapte pixeli si jumatate intre marcaj si „zona justa …”: bara si eticheta
     ei se citeau ca un singur bloc greu, lipit de etichetele cifrelor de
     deasupra. Acum 28 sus si 16 jos → 25,5 si 13,5 optic. */
.mdsx .vj__scale { height: 12px; margin: var(--s-7) 3px 0; --bc: var(--c); }

/* ⚠ Selector de frate, specificitate 3: merge si daca ordinea de tiparire s-ar
     schimba inapoi. Bate `.mdsx .bar__ends` = 2 (mds-design.css:924).
     Se aplica DOAR etichetelor barei din acest card; celelalte bare din tema
     (analisti, pret-tinta, risc) raman la 10px. */
.mdsx .vj__scale + .bar__ends { margin-top: var(--s-4); }
.mdsx .vj__scale .bar__f { min-width: 16px; }
.mdsx .vj__scale .bar__d { width: 17px; height: 17px; }
/* Marcajul medianei ia culoarea capitolului, cel al prețului rămâne neutru:
   sunt două lucruri diferite și nu trebuie să arate la fel. */
.mdsx .vj__scale .bar__d--t { --bc: var(--c); }
.mdsx .vj__scale .bar__d--p { --bc: var(--ink); }

/* ⚠ `.bar__f` are `inset:0 auto 0 0` — `left` e fixat la 0, iar `margin-left`
     inline nu-l deplasează previzibil. Zona justă nu începe de la capătul barei
     când prețul e mult peste interval. */
.mdsx .vj__zone { left: var(--l, 0); right: auto; }

.mdsx .vj__fx { list-style: none; margin: 0; padding: 0; }
.mdsx .vj__card > .vj__fx { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ══ TIPOGRAFIE DE SECȚIUNE ════════════════════════════════════════════════
   ⚠ `.lbl2` n-are `margin-top` — în capitolele existente vine mereu după un
     bloc cu marjă proprie jos. Aici urmează direct după un paragraf. */
.mdsx .band .lbl2 { margin-top: 34px; }
.mdsx .band .vj__lead { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.mdsx .band .vj__lead b { font-weight: 600; color: var(--ink); }
.mdsx .band .vj__note { margin: 16px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }
.mdsx .band .vj__note b { font-weight: 600; color: var(--ink-2); }

/* ══ PÂRGHIILE ═════════════════════════════════════════════════════════════
   ⚠ Lățimea barei ESTE procentul: 27,9% ocupă 27,9%. O normalizare la cea mai
     mare pârghie ar umple bara de sus, deși eticheta de lângă scrie 27,9%. */
.mdsx .vj__tor { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 16px 0 0; }
.mdsx .vj__tor-l { font-size: 13px; color: var(--ink); }
.mdsx .vj__tor-l u { text-decoration: none; font-size: 11.5px; color: var(--ink-4); }
.mdsx .vj__tor-b { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,.05); }
.mdsx .vj__tor-b i {
	position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), var(--c));
}
.mdsx .vj__tor-v { font: 400 13.5px/1 var(--m); color: var(--ink); }
.mdsx .vj__tor-n { font-size: 12px; color: var(--ink-4); }

/* ══ MODELELE ══════════════════════════════════════════════════════════════ */
/* ⚠ VJ-GRILA-1. Era `repeat(2, minmax(0,1fr))` — DOUA coloane fixe la orice
     latime. Pe mobil e corect; pe o coloana de 1000px, doua carduri de 495px
     cu o cifra in ele arata intinse.
     Acum `auto-fill` cu `--s-min-card`: 150px pe mobil (deci tot DOUA pe un
     telefon de 390px, ca acum) si 210px pe desktop (deci patru). Nicio latime
     de coloana nu se mai scrie aici. */
.mdsx .vj__grid { display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--s-min-card), 1fr));
	gap: 9px; margin: 14px 0 0; }
.mdsx .vj__m { padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; }
.mdsx .vj__m b { display: block; font: 600 12.5px/1.35 var(--b); color: var(--ink); }
.mdsx .vj__m s { display: block; margin-top: 5px; text-decoration: none; font: 400 19px/1 var(--m); color: var(--c); }
.mdsx .vj__m i { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--ink-4); }
.mdsx .vj__m--off { opacity: .55; border-style: dashed; }
.mdsx .vj__m--off s { color: var(--ink-3); text-decoration: line-through; }

/* ══ PLIAJ PE CHECKBOX ═════════════════════════════════════════════════════
   Tiparul `.fx__t` / `.ist__t` din temă. `<details>` nu se poate forța deschis
   din CSS, iar pe desktop cele două subsecțiuni trebuie să fie mereu vizibile.
   ⚠ Butonul poartă TITLUL și descrierea; cu titlul singur, cardul închis nu
     spunea nimic despre ce e înăuntru. */
/* Ancora pentru pozitionarea absoluta a inputului ascuns. */
.mdsx .vj__dd { position: relative; }
.mdsx .vj__dd-t { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.mdsx .vj__ddl { display: none; }
.mdsx .vj__dd-b {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	margin-top: 22px; padding: 14px 15px;
	border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.mdsx .vj__dd-b--sm { padding: 12px 15px; font: 600 12.5px/1.35 var(--b); color: var(--ink-2); }
.mdsx .vj__dd-h b { display: block; font: 600 13.5px/1.35 var(--b); color: var(--ink); }
.mdsx .vj__dd-h em { display: block; margin-top: 5px; font-style: normal; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.mdsx .vj__dd-h em b { display: inline; font-weight: 600; color: var(--ink-2); }
/* `-4px` compensează centrul optic al triunghiului rotit cu 45°. */
.mdsx .vj__dd-b i {
	width: 8px; height: 8px; flex: none; margin-top: -4px;
	border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
	transform: rotate(45deg); transition: .15s;
}
.mdsx .vj__dd-t:checked ~ .vj__dd-b i { transform: rotate(225deg); margin-top: 2px; }
.mdsx .vj__dd-c { display: none; }
.mdsx .vj__dd-t:checked ~ .vj__dd-c { display: block; margin-top: 12px; }
/* Descrierea e pe buton, deci nu se repetă înăuntru când se deschide. */
.mdsx .vj__dd-c > .vj__lead { display: none; }

.mdsx .vj__cum {
	padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2);
	border-bottom: 1px solid rgba(255,255,255,.16); cursor: pointer;
}
.mdsx .vj__cum:hover { color: var(--ink); }
.mdsx .vj__cum:focus { outline: none; }
.mdsx .vj__cum:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ══ TRIANGULARE ═══════════════════════════════════════════════════════════ */
.mdsx .vj__tri, .mdsx .vj__trihd {
	display: grid; grid-template-columns: 1fr; gap: 2px;
	padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px;
}
.mdsx .vj__trihd { border-top: 0; padding-bottom: 2px; }
.mdsx .vj__tri b { font-weight: 600; color: var(--ink); }
.mdsx .vj__tri span, .mdsx .vj__trihd span {
	display: grid; grid-template-columns: 52px repeat(3, 1fr); gap: 10px; color: var(--ink-3);
}
.mdsx .vj__tri u, .mdsx .vj__trihd u { text-decoration: none; color: var(--ink-4); font-size: 12px; }
.mdsx .vj__tri s { text-decoration: none; font-family: var(--m); color: var(--ink-2); }
.mdsx .vj__trihd s { font-family: var(--b); font-size: 11.5px; color: var(--ink-4); }

/* ══ FEREASTRA CU FORMULE ══════════════════════════════════════════════════ */
.mdsx .vj__def { padding: 16px 0; border-top: 1px solid var(--line); }
.mdsx .vj__def:first-child { border-top: 0; padding-top: 4px; }
.mdsx .vj__def b { display: block; font: 600 13.5px/1.35 var(--b); color: var(--ink); }
.mdsx .vj__def code { display: block; margin: 7px 0 9px; font: 400 12.5px/1.5 var(--m); color: var(--cyan); }
.mdsx .vj__def p { margin: 0; font-size: 13px; line-height: 1.62; color: var(--ink-2); }
.mdsx .vj__def p b { display: inline; font-weight: 600; color: var(--ink); }

@container mdsx (min-width:900px) {
	.mdsx .vj__gh { margin-top: 48px; margin-bottom: 38px; }
	.mdsx .vj__ght { font-size: 31px; }
	.mdsx .vj__gh .vj__ghl { max-width: 82ch; margin-top: 14px; font-size: 16px; }


	.mdsx .cd.vj__card { padding: 24px 26px; }
	.mdsx .vj__tor { grid-template-columns: 200px minmax(0,1fr) 62px; gap: 5px 16px; align-items: center; }
	.mdsx .vj__tor-n { grid-column: 2 / -1; }
	.mdsx .vj__grid { gap: 11px; }

	/* Cele două subsecțiuni, una lângă alta. Butonul dispare, titlul apare,
	   conținutul e mereu deschis. */
	.mdsx .vj__duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
	.mdsx .vj__duo .vj__ddl { display: block; }
	.mdsx .vj__duo .vj__dd-b { display: none; }
	.mdsx .vj__duo .vj__dd-c { display: block; margin-top: 0; }
	.mdsx .vj__duo .vj__dd-c > .vj__lead { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEC-LOT6 · cele două pliaje: titlul la mărimea butoanelor, conținutul în
   card pe mobil.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── #8a · TITLUL PLIAJULUI, LA MARIMEA BUTOANELOR DE VERDICT ───────────────
   „Ce creștere e deja în preț” si „Ce mișcă cel mai mult estimarea” sunt
   comenzi de acelasi fel cu „Vezi istoricul verdictelor”: apesi si se deschide
   ceva. Butonul acela isi scrie titlul cu `15px/600` (`.vmod__t i`,
   verdict.css); pliajele scriau `13,5px`. Aceeasi functie, aceeasi marime. */
.mdsx .vj__dd-h b {
	font-size: var(--f-corp);
}

/* ── #8b · CARDUL SE EXTINDE, NU APARE UNUL NOU ─────────────────────────────
   Corectat fata de lotul trecut: pusesem continutul intr-un AL DOILEA card, sub
   bara. Acum bara si continutul sunt acelasi card, care creste.

   CUM. Cand pliajul e deschis, chenarul trece de pe bara (`.vj__dd-b`) pe
   invelis (`.vj__dd`), cu exact aceleasi valori: `14px 15px`, bordura de 1px,
   raza 12px. Bara isi pierde chenarul si paddingul, deci ramane rand de titlu
   INAUNTRUL cardului, iar continutul curge sub ea, in acelasi chenar.

   ⚠ Valorile sunt copiate din `.mdsx .vj__dd-b` de mai sus, ca marginea sa cada
     exact unde cadea si inainte de apasare — altfel cardul „sare” cu cativa
     pixeli in momentul deschiderii.
   ⚠ Doar pe mobil: pe desktop `.vj__duo` afiseaza ambele coloane deschise, fara
     bara de comanda (`.vj__dd-b{display:none}`), deci nu exista card de extins.
   ⚠ `:has()` e folosit si de temă (mds-design.css:638), deci nu introduce o
     cerinta noua de browser. */
@container mdsx (max-width:899px){
	.mdsx .vj__dd:has(.vj__dd-t:checked) {
		margin-top: 22px;
		padding: 14px 15px;
		border: 1px solid var(--line);
		border-radius: 12px;
	}
	.mdsx .vj__dd:has(.vj__dd-t:checked) .vj__dd-b {
		margin-top: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
	}
	.mdsx .vj__dd-t:checked ~ .vj__dd-c {
		margin-top: 12px;
	}
}

/* ── #5 · TITLURILE CARDURILOR DE MODEL, LA MARIMEA PLIAJELOR ───────────────
   „Formula Graham”, „Prețul just Lynch” erau 12,5px — marime de eticheta sub o
   cifra, desi sunt titlul cardului. Trec la marimea titlului de pliaj
   („Ce creștere e deja în preț”), adica `--f-corp`.

   ⚠ DOAR `font-size`: familia si greutatea raman ale temei. */
.mdsx .vj__m b {
	font-size: var(--f-corp);
}

/* ── #7 · PASTILA, IN DREAPTA TITLULUI, PE MOBIL ────────────────────────────
   `.mdsx .ch .vj__chip` are `margin-top:11px`, deci pastila cade pe rândul
   urmator, sub pret. `.ch` e insa `display:flex` cu `justify-content:
   space-between`: fara marja de sus si cu voie sa se stranga, pastila urca pe
   rândul titlului, la dreapta lui.

   ⚠ `flex:0 1 auto` cu `min-width:0`: daca titlul e lung, pastila se strange in
     loc sa impinga rândul. `flex-wrap` ramane, deci pe un ecran foarte ingust
     tot coboara — dar coboara pentru ca nu incape, nu din principiu. */
@container mdsx (max-width:899px){
	.mdsx .ch .vj__chip {
		margin-top: 0;
		flex: 0 1 auto;
		min-width: 0;
	}
}