/* ============================================================================
   x-valoare-justa.css · §8 VALOARE JUSTA · namespace `xfv`
   Generat de `fac_fv.py` la 2026-09-10 20:39:01.

   CONSTRUIT DUPA GHIDURI, nu dupa demo:
     GHID_CONSTRUCTIE §8   blocurile cerute: `bar-range` · `stat-callout`
                           reverse DCF · `tornado-chart` · `triangulation-table`
                           · `score-card`-uri (Graham, Buffett IV, EPV, DCF,
                           mean fair value)
     CATALOG_BLOCURI §1-2  anatomia fiecarui bloc + varianta mobil
     IMBUNATATIRI §8       „o singura valoare justa TITLU + restul ca detaliu
                           «metode»" si „leaga de `iv_confidence_label`"
   Textele din `texte-valoare-justa.ro.json`, catalogul temei, cu assert.

   ⚠ BENTO pe desktop, stiva pe mobil. Ghidul cere pentru mobil: „bar-range
     full-width, reverse DCF ca 2 cifre fata-in-fata, tornado vertical,
     triangulare = card per scenariu" — primele trei sunt asa; triangularea
     ramane tabel cu derulare, vezi „CE NU S-A VERIFICAT".

   ⚠⚠ NU se afirma CARE modele au fost pastrate de motor. Reconstituirea temei
      si cea a demoului 06 dau seturi DIFERITE de patru, ambele trecand
      verificarea pe NUMAR. Vezi comentariul din `cel_modele()`.
   ============================================================================ */

/* ⚠ TOKENI PROPRII. Fisierul trebuie sa fie autonom: la productie se incarca
   separat si nu poate presupune ca `x-grup2.css` a definit tot ce foloseste.
   Masurat inainte: `--xc-cyan` NU era definit in `x-grup2.css`, deci
   `background:var(--xc-cyan)` cadea si bara pargiei DOMINANTE — cea mai
   importanta din tornado — se randa transparenta, latime 344px, invizibila. */
:root{
  --xc-cyan:#1d9bf0;
  --xc-violet:#7d7aff;
}

.xfv{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em; margin-top:var(--xsp-sec,39px); }
.xfv *{ box-sizing:border-box; border:0; }
/* ⚠ Titlul sectiunii e MAI MARE decat titlurile de card. Inainte erau 22px
   amandoua pe mobil, deci nu se distingea ierarhia. Acum 26→34 fata de 19→22. */
.xfv__t{ margin:0; font-size:var(--xt-3); font-weight:700; line-height:1.15;
  letter-spacing:-.022em; text-wrap:nowrap; }
.xfv__t::first-letter{ text-transform:uppercase; }
/* ⚠ `--xf-sm` = marimea lui `lede`. Cerut: subtitlul de card, textul pastilei,
   capetele scarii, legenda scarii, randul de meta si etichetele de model trec
   toate aici. Erau intre 11,5 si 13px si se citeau ca note de subsol. */
:root{ --xf-sm:15.5px; }
.xfv__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf); letter-spacing:-.006em;
  color:var(--xc-ink); }

/* ── BENTO ─────────────────────────────────────────────────────────────────
   Mobil: o coloana. Desktop: sase coloane, celulele isi cer latimea.
   `dense` umple golurile cand o celula lipseste (reverse DCF si tornado exista
   pe 3 din 7, sensibilitatea la rate pe 6 din 7). */
.xfv__bento{ display:grid; grid-template-columns:1fr; gap:12px; margin:28px 0 0;
  grid-auto-flow:dense; }
/* ⚠ `min-width:0`. Minimul automat al unui item de grila e `min-content`, iar
   tabelul de triangulare are sase coloane de cifre: fara asta, celula cerea
   505px intr-o coloana de 350 si toata pagina capata derulare orizontala.
   Masurat inainte de reparatie: toate cele sase celule la 505px pe 390px. */
.xfv__c{ min-width:0; background:var(--xs-card); border-radius:28px;
  padding:26px 24px 28px; box-shadow:var(--xe-lift); }
.xfv__top{ margin:0 0 18px; }
.xfv__ct{ margin:0; font-weight:600; font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; }
.xfv__ct::first-letter{ text-transform:uppercase; }
.xfv__cs{ margin:8px 0 0; font:400 var(--xf-sm)/1.5 var(--xf); color:var(--xc-ink2); }

.xfv__hero{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 14px;
  font-size:var(--xt-1); font-weight:700; letter-spacing:-.022em;
  line-height:1.04; font-variant-numeric:tabular-nums; }
.xfv__hero em{ font:600 var(--xt-6)/1.2 var(--xf); font-style:normal; letter-spacing:-.006em; }
.xfv__badge{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px; margin:14px 0 0;
  font-size:var(--xf-sm); color:var(--xc-ink2); }
.xfv__badge--h{ margin:14px 0 0; }
.xfv__chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px;
  border-radius:var(--xr-p); background:color-mix(in srgb, var(--bc) 16%, transparent);
  color:var(--bc); font-weight:600; font-size:var(--xt-7); }
/* ⚠ Bulina din pastila a fost scoasa. */
.xfv__meta{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:22px 0 0;
  font:400 var(--xf-sm)/1.45 var(--xf); color:var(--xc-ink2); }
.xfv__meta b{ color:var(--xc-ink); font-weight:600; }

/* ── bar-range, scara logaritmica ── */
.xfv__scw{ position:relative; margin:24px 0 0; padding-bottom:26px; }
.xfv__sc{ position:relative; height:var(--xbar); border-radius:var(--xr-p);
  background:var(--xs-track); overflow:hidden; }
/* ⚠ Laterale rotunjite, ca la `.xpj__zone` (24-proiectii.css:89). Zona se termina
   in interiorul pistei, iar un capat taut drept arata a eroare de randare langa o
   pista care e rotunjita. Aceeasi raza (`--xr-p`), nu una noua. */
.xfv__zone{ position:absolute; top:0; height:100%; border-radius:var(--xr-p);
  background:var(--xc-lime); opacity:.32; }
.xfv__tick{ position:absolute; top:0; height:var(--xbar); }
.xfv__tick i{ position:absolute; left:0; top:0; width:1px; height:100%; background:rgba(255,255,255,.20); }
.xfv__tick.is-1 i{ background:rgba(255,255,255,.42); }
.xfv__tick em{ position:absolute; left:0; top:calc(var(--xbar) + 7px); transform:translateX(-50%);
  font:500 var(--xt-8)/1 var(--xf); font-style:normal; color:var(--xc-ink3); white-space:nowrap; }
.xfv__tick.is-1 em{ color:var(--xc-ink2); font-weight:600; }
.xfv__m{ position:absolute; top:calc(var(--xbar) / 2); width:16px; height:16px; border-radius:50%;
  transform:translate(-50%,-50%); box-shadow:0 2px 10px rgba(0,0,0,.85); z-index:3; }
.xfv__m--v{ background:var(--xc-lime); } .xfv__m--p{ background:var(--xc-ink); }
.xfv__scl{ display:flex; justify-content:space-between; gap:16px; margin:4px 0 0;
  font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink); }
.xfv__scl span:last-child{ text-align:right; }
.xfv__cap{ margin:10px 0 0; font:400 var(--xf-sm)/1.5 var(--xf); color:var(--xc-ink3); }
.xfv__cap b{ color:var(--xc-ink2); font-weight:600; }

.xfv__note,.xfv__warn{ margin:22px 0 0; padding:19px 21px; background:var(--xs-inset);
  border-radius:var(--xr-i); }
.xfv__note p,.xfv__warn p{ margin:0; font:400 var(--xt-7)/1.55 var(--xf); color:var(--xc-ink2); }
.xfv__warn{ background:color-mix(in srgb, var(--xc-orange) 12%, var(--xs-inset)); }
.xfv__warn p{ color:var(--xc-ink); }

/* ── stat-callout: doua cifre fata-in-fata ── */
.xfv__duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.xfv__duo > div{ padding:16px 18px; border-radius:var(--xr-i); background:var(--xs-inset); }
.xfv__dl{ display:block; font:500 var(--xt-8)/1.3 var(--xf); color:var(--xc-ink3); }
.xfv__duo b{ display:block; margin-top:9px; font:700 var(--xt-4)/1 var(--xf); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.xfv__duo b i{ font:500 .5em/1 var(--xf); font-style:normal; color:var(--xc-ink3);
  margin-left:.15em; letter-spacing:0; }
.xfv__vd{ margin:16px 0 0; }

/* ── tornado ── */
.xfv__tor{ display:grid; grid-template-columns:1fr auto; gap:5px 12px; margin-top:16px; }
.xfv__tl{ font:500 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink); }
.xfv__tv{ font:600 var(--xt-7)/1.3 var(--xf); text-align:right; font-variant-numeric:tabular-nums; }
.xfv__tb{ grid-column:1/-1; height:8px; border-radius:var(--xr-p); background:var(--xs-inset); }
.xfv__tb i{ display:block; height:100%; border-radius:var(--xr-p); background:var(--xc-teal); }
.xfv__tor.is-dom .xfv__tb i{ background:var(--xc-cyan); }
.xfv__tor.is-dom .xfv__tl{ font-weight:700; }
.xfv__tn{ grid-column:1/-1; font:400 var(--xt-8)/1.3 var(--xf); color:var(--xc-ink4);
  font-variant-numeric:tabular-nums; }

/* ── score-cards, modelele ── */
.xfv__mg{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.xfv__mc{ padding:15px 16px; border-radius:var(--xr-i); background:var(--xs-inset); }
/* ⚠ `--xc-ink2` (#9c9a96), nu alb. Alb pur pe o eticheta de card concura cu
   cifra de sub ea, care e lucrul important. E treapta reala imediat urmatoare
   din tema; intre ea si `--ink` nu exista alta, si nu inventez una (R17).
   ⚠ `min-height` scazut de la 2,7em la 2,4em si marginea cifrei de la 6 la 2px:
     spatiul dintre eticheta si pret era prea mare. */
.xfv__ml{ display:block; font:500 var(--xf-sm)/1.3 var(--xf); color:var(--xc-ink2);
  min-height:2.4em; }
.xfv__mc b{ display:block; margin-top:2px; font:600 var(--xt-5)/1.1 var(--xf); letter-spacing:-.014em;
  font-variant-numeric:tabular-nums; }
.xfv__mc em{ display:block; margin-top:6px; font:500 var(--xt-7)/1.25 var(--xf); font-style:normal;
  font-variant-numeric:tabular-nums; }

/* ── triangulare ── */
/* ── PLIAJUL DE MOBIL ──────────────────────────────────────────────────────
   Cerut: pe mobil se vede DOAR cardul cu valoarea justă, iar modelele se
   deschid dintr-un buton aflat în josul lui.
   ⚠ Comutatorul e ÎNAINTEA celor doua carduri, iar eticheta e ÎNĂUNTRUL
     primului: `for=` leaga oricum, iar selectorul de frate `~` ajunge la al
     doilea card. Pur CSS, zero JavaScript. */
.xfv__mt{ position:absolute; opacity:0; pointer-events:none; }
.xfv__mb{ display:flex; align-items:center; justify-content:center; gap:9px;
  margin:22px 0 0; padding:11px 18px; border-radius:var(--xr-p);
  background:var(--xs-inset); font:600 var(--xf-sm)/1.3 var(--xf);
  color:var(--xc-ink); cursor:pointer; }
.xfv__mb:hover{ background:var(--xs-track); }
.xfv__mb-b{ display:none; }
.xfv__mt:checked ~ .xfv__c--a .xfv__mb-a{ display:none; }
.xfv__mt:checked ~ .xfv__c--a .xfv__mb-b{ display:inline; }
.xfv__c--e{ display:none; }
.xfv__mt:checked ~ .xfv__c--e{ display:block; }

.xfv__tw{ overflow-x:auto; }
.xfv__tt{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.xfv__tt th,.xfv__tt td{ padding:9px 10px; text-align:right; white-space:nowrap; }
.xfv__tt thead th{ font:600 var(--xt-8)/1.3 var(--xf); letter-spacing:.06em; text-transform:uppercase;
  color:var(--xc-ink4); }
.xfv__tt thead tr:first-child th{ color:var(--xc-ink2); }
.xfv__tt tbody th{ text-align:left; font:600 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink); }
.xfv__tt tbody td{ font:500 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink2); }
.xfv__tt tbody tr + tr th,.xfv__tt tbody tr + tr td{
  background:var(--xsep) no-repeat top/100% 1px; }

/* ══ DESKTOP · bento ══ */
@container mdsx (min-width:900px){
  .xfv__bento{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:13px; }
  .xfv__c{ border-radius:var(--xr-c); padding:29px 31px 31px; }
  .xfv__c--a{ grid-column:span 4; }
  .xfv__c--b{ grid-column:span 2; }
  .xfv__c--c{ grid-column:span 3; }
  .xfv__c--d{ grid-column:span 3; }
  /* ⚠ Pe desktop butonul dispare si modelele sunt mereu vizibile. */
  .xfv__mb{ display:none; }
  .xfv__c--e{ display:block; grid-column:span 6; }
  .xfv__c--f{ grid-column:span 6; }
  .xfv__c--b .xfv__duo{ grid-template-columns:1fr; }
  .xfv__mg{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .xfv__tt th,.xfv__tt td{ padding:11px 14px; }
}