/* ═══════════════════════════════════════════════════════════════════════════
   94-etf.css - formele proprii ale paginii de fond.                  LOT 106

   ⚠⚠ PRIMUL CSS NOU DE LA LOTUL 98, si a fost nevoie de un motiv.
     Loturile 99-105 n-au scris nicio regula: toate capitolele foloseau clasele
     paginii de actiuni, din `20-grup2.css` si `10-antet-date.css`. A iesit
     corect si repetitiv - trei familii de forme pe douasprezece capitole, din
     care noua erau „un card cu o lista". Masurat: `.xan__leg` de zece ori,
     `.xan__kv` de cinci ori, zero accente de culoare.

     Fisierul asta adauga PATRU forme, si atat. Fiecare rezolva o treaba pe care
     lista n-o putea face:

       .xef__bars   proportia se vede inainte de a citi cifra
       .xef__bento  o placa mare cu inelul, trei placi mici cu faptele
       .xef__luni   cand s-au intamplat socurile, nu doar cat de mari au fost
       .xef__pana   cum se accelereaza comisionul, ce un tabel nu poate arata

   ⚠ NICIO MARIME DE TEXT NOUA. Tot ce scrie aici foloseste `--xt-2..8` sau
     `--xf-sm`, exact ca pagina de actiuni. Tokenii sunt fluizi (`clamp` cu
     `cqi`, vezi `00-shell.css:148`), deci se micsoreaza singuri pe container
     ingust; o cifra scrisa de mana ar fi rupt scara.

   ⚠ PRAGURILE SUNT `@container mdsx`, NU `@media`. Cardurile stau intr-un
     container numit (`mds-design.css:158`, `container:mdsx / inline-size`), iar
     `.xan__pair` trece pe doua coloane la 900px de CONTAINER, nu de fereastra.
     Cu `@media` formele s-ar fi rearanjat la alta latime decat cardurile care
     le tin.

   ⚠ Placile din bento sunt `.xan__mc` ale temei, nu unele noi: padding 15/16,
     eticheta `--xf-sm` la 500, cifra `--xt-5` la 600. Aici se adauga doar al
     treilea rand, dupa reteta lui `.xct__sub` din grupul de context.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · RANDURI CU BARA IN COLOANA NUMELUI ────────────────────────────────
   Bara E ponderea, deci proportia se citeste inainte de cifra.

   ⚠⚠ BARA STA NUMAI IN COLOANA NUMELUI. Prima varianta o intindea peste tot
     randul, iar pe randurile late umplutura trecea pe sub suma: cifra statea
     „in bara" pe unele randuri si in afara ei pe altele, adica acelasi element
     insemna doua lucruri. Cu grila de doua coloane, bara nu poate ajunge acolo.

   ⚠ FARA BORDURA COLORATA LA STANGA. O avusesem, si muchia ei tare taia prin
     litere pe randurile scurte. A ramas doar umplutura, care e si singurul
     lucru care codeaza o cifra.

   ⚠ Inaltimea randului e FIXA, 32px, cat tine azi un `.xan__leg li`. Forma se
     schimba, inaltimea cardului nu. */
.xef__bars{ list-style:none; margin:var(--xv-in) 0 0; padding:0; display:grid; gap:4px; }
.xef__bars li{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; }
.xef__n{ position:relative; display:flex; align-items:center; min-width:0;
  height:32px; padding:0 12px; border-radius:10px; overflow:hidden; }
/* ⚠ `opacity`, nu `color-mix`: acelasi rezultat, fara intrebari de suport. */
.xef__f{ position:absolute; left:0; top:0; bottom:0; width:var(--w);
  background:var(--f); opacity:.22; }
/* ⚠ `position:relative` pe text: elementele pozitionate se deseneaza in ordinea
   din document, deci numele trece peste umplutura fara `z-index`. */
.xef__n em{ position:relative; font-style:normal; font-size:var(--xf-sm);
  color:var(--xc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xef__r{ display:flex; align-items:center; gap:13px; flex:none; }
.xef__v{ font:600 var(--xt-6)/1 var(--xf); font-variant-numeric:tabular-nums; white-space:nowrap; }
.xef__p{ font-size:var(--xt-7); color:var(--xc-ink3); font-variant-numeric:tabular-nums;
  width:5ch; text-align:right; }
/* ⚠⚠ PE CONTAINER INGUST NUMELE SE RUPE, NU SE TAIE. Prima varianta tinea
   randul la 32px si punea puncte-puncte: masurat la 390px pe VWCE, „Taiwan
   Semiconductor Manufacturing Co. Ltd." cerea 315px si primea 217, deci pe
   telefon scria „Taiwan Semiconductor Manufac…". Lista de dinainte, cu
   `.xan__leg`, lasa numele sa curga pe doua randuri si se vedea intreg.
   O inaltime frumoasa nu merita un nume ciuntit, deci randul creste.
   Procentul tot iese: bara spune deja proportia, iar spatiul se duce la nume. */
/* ⚠ DOUA PRAGURI DIFERITE, fiindca sunt doua probleme diferite.
     Sub 900 de container, cardul e pe toata latimea dar tot ingust: masurat,
     `.xan__pair` da 480px la orice container intre 560 si 899, deci coloana
     numelui primeste 297px iar numele cel mai lung cere 315. Acolo numele se
     rupe. Randul ramane la 32px cand numele incape pe un rand, fiindca
     `min-height` si o captuseala de 5px lasa un rand la 29px.
     Sub 560 iese si procentul: acolo nici asa nu e destul loc. */
@container mdsx (max-width:899px){
  .xef__n{ height:auto; min-height:32px; padding:5px 12px; }
  /* ⚠ `line-height` explicit: mostenit, randul de text masoara 25px, iar cu
     captuseala de 5px randul ajungea la 35px si crestea TOATE randurile, nu
     doar pe cel care se rupe. Cu 1,3 un rand da 20px, deci 30 cu tot cu
     captuseala, sub `min-height` - si atunci numai numele lungi cresc. */
  .xef__n em{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
}
@container mdsx (max-width:559px){ .xef__p{ display:none; } }

/* ── 2 · BENTO: inel plus placi ────────────────────────────────────────────
   ⚠ Pe container ingust: prima placa pe tot randul, celelalte doua alaturi.
     Pe container larg: doua coloane, inelul stanga, placile stivuite dreapta.
     Distanta e 10px in amandoua, cat are `.xan__mini`. */
.xef__bento{ display:grid; gap:12px; grid-template-columns:1fr; margin:var(--xv-in) 0 0; }
.xef__inel{ position:relative; display:flex; align-items:center; justify-content:center; padding:6px 0; }
.xef__inel svg{ display:block; width:100%; max-width:232px; height:auto; }
/* ⚠⚠ CIFRA DIN INEL E HTML, NU `<text>` IN SVG. Tokenii de marime sunt fluizi
   si se rezolva pe container; intr-un SVG scalat, un `font-size` in tokeni s-ar
   fi intins odata cu desenul si ar fi iesit din scara restului paginii. Asa,
   inelul e doar doua cercuri, iar cifra e text obisnuit, cu `--xt-2`, adica
   exact marimea unui `.xan__hero`. */
.xef__inelt{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.xef__inelt b{ font:700 var(--xt-2)/1 var(--xf); letter-spacing:-.022em;
  font-variant-numeric:tabular-nums; }
.xef__inelt span{ margin-top:6px; font:500 var(--xt-8)/1.3 var(--xf); color:var(--xc-ink3); }
.xef__lat{ display:grid; gap:10px; grid-template-columns:1fr 1fr; align-content:start; }
.xef__lat > :first-child{ grid-column:1 / -1; }
/* al treilea rand al placii, dupa reteta lui `.xct__sub` (48-context.css:233) */
.xef__d{ display:block; margin-top:6px; font:400 var(--xt-8)/1.35 var(--xf); color:var(--xc-ink3); }
@container mdsx (min-width:900px){
  .xef__bento{ grid-template-columns:1.4fr 1fr; }
  .xef__inel{ padding:10px 0; }
  .xef__lat{ grid-template-columns:1fr; }
  .xef__lat > :first-child{ grid-column:auto; }
}

/* ── 3 · BANDA DE LUNI ─────────────────────────────────────────────────────
   O casuta pe luna, cate un semn pentru fiecare zi iesita din rand.

   ⚠⚠ ASTA ARATA CE LISTA ASCUNDE. O lista sortata dupa marime spune cat de mari
     au fost socurile, dar niciodata cand. Masurat pe CSPX: trei din noua au
     cazut in 17 zile, in octombrie 2025, si inca doua in aceeasi saptamana din
     aprilie 2026, cu sapte luni goale intre ele. Ciorchinii nu se vad nicaieri
     altundeva in pagina.

   ⚠ E singurul loc din capitolele de fond unde verdele si rosul spun ceva
     adevarat: sus a urcat, jos a scazut. In rest raman doar pentru Pro/Contra
     si pentru pretul in sus si in jos.

   ⚠ Semnele au `flex:1 1 0` cu plafon, nu inaltime fixa: o luna cu un soc da o
     bara de 21px, una cu trei da trei de cate 20px, si nimic nu da pe afara,
     oricate ar fi. Cu inaltime fixa, a treia bara iesea din casuta cu 1px. */
.xef__luni{ list-style:none; margin:var(--xv-in) 0 0; padding:0; display:grid; gap:4px; }
.xef__b{ display:flex; flex-direction:column-reverse; gap:4px; height:80px; padding:5px;
  border-radius:11px; background:var(--xs-inset); }
.xef__luni li.is-on .xef__b{ background:var(--xs-track); }
.xef__b i{ flex:1 1 0; min-height:8px; max-height:21px; border-radius:6px; }
.xef__b i.is-up{ background:var(--xc-lime); }
.xef__b i.is-dn{ background:var(--xc-pink); }
.xef__m{ display:block; margin-top:8px; text-align:center;
  font:500 var(--xt-8)/1 var(--xf); color:var(--xc-ink3); }
.xef__luni li.is-on .xef__m{ color:var(--xc-ink); }
/* ⚠ Pe container ingust, treisprezece etichete de luna nu incap: „iun" cere
   vreo 20px, iar casuta ajunge la 18px. Se sting, si capetele intervalului se
   scriu o singura data, sub banda. */
.xef__capete{ display:none; justify-content:space-between; margin:9px 0 0;
  font:500 var(--xt-8)/1 var(--xf); color:var(--xc-ink3); }
@container mdsx (max-width:559px){
  .xef__luni{ gap:3px; }
  .xef__b{ height:64px; }
  .xef__m{ display:none; }
  .xef__capete{ display:flex; }
}
.xef__chei{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px;
  margin:18px 0 0; padding:0; font-size:var(--xf-sm); color:var(--xc-ink2); }
.xef__chei li{ display:flex; align-items:center; gap:9px; line-height:1.2; }
.xef__chei i{ width:11px; height:11px; border-radius:3px; flex:none; }
/* ⚠ Mostra „luna linistita" e fundalul cardului, deci invizibila fara contur. */
.xef__chei i.is-gol{ background:var(--xs-inset); box-shadow:inset 0 0 0 1px #2e2e33; }

/* ── 4 · PANA COSTULUI ─────────────────────────────────────────────────────
   ⚠⚠ SE DESENEAZA CHIAR DIFERENTA, NU DOUA CURBE. Prima varianta punea „cu
     comision" si „fara", una peste alta. La 0,07% pe an distanta dintre ele e
     un fir de par pe un grafic inalt de 185px: desenul promitea ca „se casca"
     si livra o linie dubla. Acum se deseneaza numai cat s-a luat, cumulat, de
     la zero pana la capat. Aceleasi trei cifre din tabelul de dedesubt, dar
     forma spune ce tabelul nu spune: in primii zece ani se aduna $128, iar in
     ultimii zece, $977.

   ⚠ `vector-effect:non-scaling-stroke` pe linii: SVG-ul se intinde pe latime cu
     `preserveAspectRatio="none"`, deci fara el conturul s-ar fi ingrosat
     neuniform pe portiunile inclinate. */
.xef__pana{ margin:var(--xv-in) 0 0; }
.xef__pana svg{ display:block; width:100%; height:176px; overflow:visible; }
.xef__panax{ display:grid; grid-template-columns:repeat(3,1fr); text-align:right;
  margin-top:12px; font:500 var(--xt-8)/1 var(--xf); color:var(--xc-ink3); letter-spacing:.02em; }
@container mdsx (max-width:559px){ .xef__pana svg{ height:132px; } }

/* ── 5 · CALCULATORUL DIN `#randament` ─────────────────────────────────────
   ⚠⚠ CUTIA VINE `hidden` DIN PHP si o dezveleste scriptul. Fara JavaScript,
     cardul ramane intreg - PHP randeaza toate cifrele pe suma implicita - dar
     nu se vede un control care nu raspunde la nimic.

   ⚠ Cifra din camp e `--xt-2`, adica marimea unui `.xan__hero`: suma pe care o
     scrie cititorul e eroul cardului, nu o eticheta de formular. Restul
     marimilor sunt tot din tokeni, ca peste tot in fisierul asta. */
.xef__calc{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin:var(--xv-in) 0 0; padding:18px 20px; border-radius:var(--xr-i);
  background:var(--xs-inset); }
.xef__calc[hidden]{ display:none; }
.xef__calcl{ flex:1 1 100%; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink); }
.xef__calci{ display:flex; align-items:baseline; gap:5px; }
.xef__calci span{ font:700 var(--xt-2)/1.04 var(--xf); color:var(--xc-ink3);
  letter-spacing:-.022em; }
.xef__calci input{ width:5.5ch; min-width:0; padding:0; background:none;
  color:var(--xc-ink); font:700 var(--xt-2)/1.04 var(--xf); letter-spacing:-.022em;
  font-variant-numeric:tabular-nums; border:0; border-bottom:2px solid #2a2a2e;
  outline:0; border-radius:0; -moz-appearance:textfield; }
.xef__calci input:focus{ border-bottom-color:var(--xc-teal); }
.xef__calcp{ display:flex; flex-wrap:wrap; gap:7px; margin-left:auto; }
.xef__calcp button{ padding:7px 13px; border:0; border-radius:var(--xr-p); cursor:pointer;
  background:var(--xs-track); color:var(--xc-ink2); font:600 var(--xt-7)/1 var(--xf); }
.xef__calcp button.is-on{ background:rgba(48,213,200,.14); color:var(--xc-teal); }
/* ⚠ Pe container ingust, presetarile trec pe randul lor: `margin-left:auto` le
   lipea de dreapta si campul ramanea inghesuit la 360px. */
@container mdsx (max-width:559px){
  .xef__calcp{ margin-left:0; flex:1 1 100%; }
}

.xef__grw{ list-style:none; margin:var(--xv-in) 0 0; padding:0; }
.xef__grw li{ padding:14px 0; }
.xef__grw li + li{ background:var(--xsep) no-repeat top/100% 1px; }
.xef__grc{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.xef__grt{ font-size:var(--xf-sm); color:var(--xc-ink2); }
.xef__grv{ font:600 var(--xt-5)/1.1 var(--xf); letter-spacing:-.012em;
  font-variant-numeric:tabular-nums; }
/* ⚠ Bara are DOUA felii: cat ai pus si cat s-a adaugat. Asa se vede cum castigul
   inghite baza pe masura ce fereastra se lungeste - la un an e un sfert din bara,
   la zece ani sunt trei sferturi. O bara dintr-o bucata n-ar fi spus asta. */
.xef__grb{ display:flex; gap:3px; height:12px; margin:10px 0 0; }
.xef__grb i{ border-radius:4px; min-width:4px; }
.xef__grb i:first-child{ background:#2f2f34; border-radius:6px 4px 4px 6px; }
.xef__grb i:last-child{ border-radius:4px 6px 6px 4px; }
.xef__grs{ display:block; margin:9px 0 0; font:400 var(--xt-8)/1.4 var(--xf);
  color:var(--xc-ink3); }