/* ============================================================================
   48-context.css · GRUPUL 8 · antetul de grup + „Pozitia in sector"
   namespace `xct`   PREVIEW

   ⚠⚠ ZERO VALORI INVENTATE. Ancorele:
        20-grup2.css:45-66        `.xgh` — antetul de grup. Se REFOLOSESTE.
        20-grup2.css:82-99        titlu de sectiune, lede, card, titlu de card
        22-fair-value.css:71-77   `.xfv__badge` / `.xfv__chip`
        42-dividende.css          tabelul si plierea lui
        46-flux.css               gutiera de 10px, numele care se rupe
        24-proiectii.css:80-92    bara de percentila: `--xbar`, `--xr-p`

   ⚠ `xct` e namespace NOU. Ocupate: xhd xhd2 xvd xvm xvp xar xgh xan xfv xpj
     xab xdp xaf xfn xrp xrs xcz xdv xrd xfx.
   ============================================================================ */

/* ══ ANTETUL GRUPULUI 8 ═════════════════════════════════════════════════════
   ⚠ `.xgh` se refoloseste, ca la grupurile 3-6. Distanta deasupra e aceeasi —
     62px mobil / 88px desktop, cifrele din `14-argumente.css:163`. */
/* ⚠ Distanta deasupra antetului de grup NU MAI E AICI: sta o singura data,
   pe `.xgh` (`20-grup2.css`), cu marimea din `--xsp-grup` (`00-shell.css`).
   Erau sapte reguli identice in sapte fisiere, iar antetul primului grup —
   singurul fara clasa proprie — ramasese pe dinafara, cu distanta ZERO. */
.xct__gh{ overflow-x:clip; }

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

.xct__t{ margin:0; font-size:var(--xt-3); font-weight:700;
  line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.xct__t::first-letter{ text-transform:uppercase; }
/* invelisul pastilei · `.xfv__badge--h` (22-fair-value.css:71-73) */
.xct__badge{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  margin:14px 0 0; }
/* ⚠ PASTILA E NEUTRA: apartenenta la un sector nu e o judecata. Fond `--xs-inset`,
   ca celulele — nu color-mix pe un prag care aici n-ar insemna nimic. */
.xct__chip{ flex:none; display:inline-flex; align-items:baseline; gap:7px;
  padding:5px 12px; border-radius:var(--xr-p); background:var(--xs-inset);
  font:600 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink); letter-spacing:0; }
.xct__chip em{ font-style:normal; font-weight:500; font-size:var(--xt-8); color:var(--xc-ink3); }
.xct__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink); }
.xct__lede b{ color:var(--xc-ink); font-weight:600; }
.xct__n{ margin:14px 0 0; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); }
.xct__z{ font-style:normal; color:var(--xc-ink4); }

/* ══ BENTO · doua carduri ═══════════════════════════════════════════════════
   ⚠ Cardul de sector are cinci coloane si pana la 12 randuri; cel de piata are
     patru coloane si sase randuri. Pe desktop stau unul langa altul, dar cel
     mare ia 4/6 si cel mic 2/6: nu sunt egale ca greutate, si nici nu trebuie
     sa arate asa. */
.xct__bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  margin:22px 0 0; align-items:start; }
.xct__bento > *{ grid-column:span 6; min-width:0; }

.xct__card{ min-width:0; display:block; background:var(--xs-card);
  border-radius:28px; padding:26px 24px 28px; box-shadow:var(--xe-lift);
  scroll-margin-top:78px; }
.xct__ct{ margin:0 0 18px; font-weight:600;
  font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; color:var(--xc-ink); }
.xct__ct::first-letter{ text-transform:uppercase; }

/* ── tabelele ──────────────────────────────────────────────────────────────
   ⚠ Gutiera e 10px, nu 14: masurata la Insideri, unde cu 14px ultima coloana se
     taia pe 390px (46-flux.css). Aici sunt CINCI coloane, deci conteaza si mai
     mult.
   ⚠ `overflow-x:auto` pe inveli|s (R29): daca tot nu incap, deruleaza TABELUL,
     nu pagina. */
.xct__sc{ overflow-x:auto; scrollbar-width:none; }
.xct__sc::-webkit-scrollbar{ display:none; }
.xct__tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.xct__tbl th{ padding:0 0 10px 10px; text-align:right;
  font:600 var(--xt-8)/1 var(--xf); letter-spacing:.06em; text-transform:uppercase;
  color:var(--xc-ink3); white-space:nowrap; }
.xct__tbl th:first-child{ padding-left:0; text-align:left; }
.xct__tbl td{ padding:11px 0 11px 10px; text-align:right;
  font:500 var(--xf-sm)/1.35 var(--xf); color:var(--xc-ink2); white-space:nowrap; }
.xct__tbl td:first-child{ padding-left:0; text-align:left; }
.xct__tbl td b{ color:var(--xc-ink); font-weight:600; }
.xct__tbl tbody tr + tr td{ background:var(--xsep) no-repeat top/100% 1px; }
/* ⚠ Numele indicatorului e lung („Rentabilitatea capitalurilor proprii"): se
   rupe pe mai multe randuri, ca tabelul sa nu deruleze. */
/* ⚠ `text-align:left` EXPLICIT. In tabelul de indicatori numele e prima coloana
   si primea alinierea din `td:first-child`; in cel de comparabile e a DOUA, deci
   ramanea la dreapta, lipit de bara. Prins pe captura. */
.xct__tbl td.xct__nm{ white-space:normal; text-align:left; color:var(--xc-ink); }

/* ⚠⚠ PE MOBIL, COLOANA DE INDUSTRIE DISPARE. Masurat la 390px: cele cinci
   coloane cereau 506px intr-o pista de 302 — 204px de derulare laterala, adica
   jumatate din tabel ascunsa. Am incercat intai sa le ingustez; nu ajungea.
   Din cele cinci, mediana INDUSTRIEI e cea care se poate pierde: sectorul si
   pozitia duc deja comparatia, iar industria e o rafinare a aceluiasi lucru.
   ⚠ SE ASCUNDE PRIN CSS, NU PRIN PHP: marcajul ramane intreg, deci un cititor
     de ecran si un motor de cautare vad toate cele cinci coloane. Doar ochiul
     de pe telefon vede patru.
   ⚠ ANTETELE SE RUP pe mobil: „mediana sector" pe doua randuri costa 8px
     inaltime si scuteste 50px latime. */
@container mdsx (max-width:899px){
  /* ⚠⚠ DOAR PE TABELUL DE INDICATORI (`--m`). Prima versiune scria
     `.xct__tbl th:nth-child(4)`, fara clasa, si ascundea a patra coloana din
     AMANDOUA tabelele — inclusiv „diferenta" de la „Fata de piata", care e
     chiar cifra pentru care exista tabelul acela. Prins la randare, pe
     captura de 390px: se vedeau doar trei coloane din patru. */
  .xct__tbl--m th:nth-child(4),
  .xct__tbl--m td:nth-child(4){ display:none; }
  .xct__tbl th{ white-space:normal; }
  /* ⚠ GUTIERA 6px SI BARA 32px, DOAR PE MOBIL. Masurat pas cu pas la 390px:
     cu patru coloane tabelul cerea inca 333px intr-o pista de 302. Am scazut
     gutiera (3 × 4px) si bara (44 -> 32px, cu gap 6 in loc de 8) — 26px — si
     intra. N-am scazut CORPUL DE LITERA: 15,5px e treapta paginii, iar un tabel
     de cifre citit pe telefon e ultimul loc unde merita micsorat textul. */
  .xct__tbl th{ padding-left:6px; }
  .xct__tbl td{ padding-left:6px; }
  .xct__tbl th:first-child,
  .xct__tbl td:first-child{ padding-left:0; }
  .xct__pb{ width:32px; }
  .xct__pw{ gap:6px; }
}
.xct__d{ font-weight:600; font-variant-numeric:tabular-nums; }
.xct__d.is-up{ color:var(--xc-lime); }
.xct__d.is-dn{ color:var(--xc-pink); }

/* ── bara de pozitie ───────────────────────────────────────────────────────
   ⚠⚠ ASTA E LUCRUL CARE FACE SECTIUNEA. O cifra („ROE 5,0%") nu spune nimic;
      aceeasi cifra cu o bara care arata unde cade in sector spune tot. Bara e
      citita dintr-o privire, cifra o confirma.
   ⚠ Inaltimea e `--xbar / 2`, treapta barelor secundare: e un reper langa o
     cifra, nu masuratoarea principala a cardului.
   ⚠ PERCENTILA E DEJA ORIENTATA de engine (100 = cel mai bine), deci bara se
     umple direct, fara nicio inversare dupa `direction`. Verificat pe TSLA.US:
     P/E 369,75 -> 1, Datorie/EBITDA 0,69 -> 85. */
/* ⚠⚠ COLOANA DE POZITIE E ALINIATA LA STANGA, antet si celula. Celelalte cifre
   stau la dreapta, cum se cuvine pentru numere. Aici insa continutul nu e o
   cifra, e o BARA plus o cifra: aliniata la dreapta, bara pornea de la un x
   diferit pe fiecare rand si antetul „pozitia" cadea peste numar, nu peste bara
   — ochiul citeste bara si vede antetul in alta parte. La stanga, toate barele
   pornesc din acelasi punct si antetul sta exact deasupra lor.
   ⚠ Latimea barei e fixa, deci si numerele de dupa ea raman aliniate intre ele. */
.xct__pc{ white-space:nowrap; text-align:left; }
.xct__tbl--m th:last-child{ text-align:left; }
/* ⚠ Antetul coloanei de nume, la stanga ca si numele de sub el. In tabelul de
   indicatori e prima coloana si primeste alinierea din `th:first-child`; in cel
   de comparabile e a doua, deci trebuie spus separat. Verificat masurand
   alinierea antetului fata de celula, coloana cu coloana. */
.xct__tbl--c th:nth-child(2){ text-align:left; }
.xct__pw{ display:inline-flex; align-items:center; gap:8px; }
.xct__pb{ position:relative; display:block; width:56px; height:calc(var(--xbar) / 2);
  border-radius:var(--xr-p); background:var(--xs-track); overflow:hidden; }
.xct__pb i{ position:absolute; inset:0 auto 0 0; display:block;
  border-radius:var(--xr-p); }
.xct__pw b{ min-width:22px; text-align:right; font-weight:600;
  font-variant-numeric:tabular-nums; }

/* ── fereastra de ajutor pe numele indicatorului ───────────────────────────
   ⚠⚠ FEREASTRA E UN RAND PROPRIU DE TABEL (`.xct__dr`), nu o cutie absoluta.
      O celula de 106px n-are loc pentru o fraza, iar `position:absolute` peste
      un tabel care deruleaza lateral ar fi iesit din pista si s-ar fi taiat.
      Ca rand, se deschide sub indicatorul la care se refera si tine toata
      latimea tabelului.
   ⚠ CLASA E `xct__rt`, NU `xct__t`: `xct__t` e TITLUL DE SECTIUNE. Greseala
     asta am facut-o de trei ori in loturile trecute; o scriu inainte.
   ⚠ Radiouri cu `name` comun pe tabel, deci doua ferestre nu pot fi deschise
     simultan. `.xct__x` acopera ecranul si inchide la orice apasare in afara. */
.xct__rt{ position:absolute; opacity:0; pointer-events:none; }
/* ⚠ `inline`, NU `inline-flex`: cu flex, numele si „i" stateau pe un singur rand
   si coloana crestea de la 106px la 127px — masurat, tabelul derula 40px in loc
   de 19 la 390px. Inline, „i" curge cu textul si se rupe odata cu el. */
.xct__lb{ display:inline; cursor:pointer; }
.xct__x{ display:none; }
.xct__rt:checked ~ .xct__x{ display:block; position:fixed; inset:0; z-index:8; }
/* ⚠⚠ ICONITA „i" · REGULA UNICA, ACEEASI IN TOATE SECTIUNILE.
   MASURAT inainte: patru fisiere aveau patru reguli diferite si iconita cadea
   la +13px in Bilant, +5px in Context, +3px la Piata si 0 la Profiluri, fata de
   centrul textului. In plus, sarea in aceeasi sectiune (+13 vs +3, +5 vs +25)
   cand eticheta se rupea pe doua randuri.
   `vertical-align:middle` aliniaza mijlocul cutiei cu linia de baza PLUS
   jumatate din inaltimea literei mici — adica exact centrul optic al textului.
   E singura valoare care nu depinde de corpul de litera al etichetei, deci tine
   la 13,5px, la 15,5px si la 17px la fel.
   ⚠ `inline-block`, nu `inline-flex`: linia de baza a unei cutii flex se ia de
     la primul ei element, iar aici continutul vine dintr-un `::before` — de aia
     `baseline` dadea rezultate imprevizibile. */
.xct__i{ display:inline-block; width:15px; height:15px; margin-left:6px;
  border-radius:50%; background:var(--xs-track); color:var(--xc-ink3);
  font:700 10px/15px var(--xf); font-style:normal; text-align:center;
  vertical-align:middle; }
.xct__i::before{ content:"i"; }
.xct__rt:checked ~ .xct__lb .xct__i{ background:var(--xc-ink); color:var(--xc-bg); }
/* randul de definitie: ascuns pana se apasa „i" de deasupra lui */
.xct__dr{ display:none; }
.xct__dr td{ padding:0 0 14px !important; background:none !important; }
tr:has(.xct__rt:checked) + .xct__dr{ display:table-row; }
.xct__tip{ display:block; position:relative; z-index:9; padding:13px 14px;
  border-radius:14px; background:var(--xs-inset);
  font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); white-space:normal;
  text-align:left; }
.xct__tip b{ display:block; margin-bottom:5px; color:var(--xc-ink); font-weight:600; }

/* ⚠⚠ VARIANTA DIN CELULA (la macro, unde celulele sunt in grila, nu in tabel).
   `.xct__tip.xct__tip--c` are (0,2,0) fata de (0,1,0) al regulii de baza, deci
   `display:none` castiga indiferent de ordine. Prima oara am scris-o cu o
   singura clasa, INAINTEA regulii de baza: `.xct__tip{display:block}` venea dupa
   si o batea, iar TOATE cele sase ferestre erau deschise deodata pe randare.
   A doua oara in aceeasi sesiune cand o regula scrisa „mai sus" pierde — de aia
   nu ma mai bazez pe ordine. */
.xct__c{ position:relative; }
.xct__tip.xct__tip--c{ display:none; margin-top:12px; }
.xct__rt:checked ~ .xct__tip.xct__tip--c{ display:block; }

/* ── tabelul de comparabile ────────────────────────────────────────────────
   ⚠ Simbolul e coloana de identificare: monospațiat ar fi fost o alta familie
     de litere pe pagina, deci ramane la fel, doar cu greutate mai mare.
   ⚠ Sectorul sta SUB nume, nu intr-o coloana proprie: pe 390px o a cincea
     coloana n-ar fi incaput, iar sectorul e o precizare a numelui, nu o
     dimensiune de comparat. */
.xct__sy{ color:var(--xc-ink) !important; white-space:nowrap; }
/* ── logo + simbol ─────────────────────────────────────────────────────────
   ⚠ 28px, aceeasi treapta ca avatarele mici din tema. Colt rotunjit `--xr-i`
     redus: un logo patrat cu colturi taiate se citeste ca logo; un cerc l-ar fi
     facut sa para poza de profil.
   ⚠ `object-fit:contain` si fond `--xs-track`: logourile vin in proportii
     diferite, iar `cover` ar fi taiat din ele. */
.xct__sw{ display:inline-flex; align-items:center; gap:9px; }
.xct__sw b{ font-weight:600; }
.xct__lg{ flex:none; width:28px; height:28px; border-radius:8px;
  background:var(--xs-track); object-fit:contain; }
/* ⚠ MONOGRAMA E NEUTRA: paleta paginii inseamna „bine / rau / atentie", iar o
   culoare pe un logo ar fi citita ca o judecata despre compania aia. */
.xct__lg--m{ display:inline-flex; align-items:center; justify-content:center;
  font:600 var(--xt-7)/1 var(--xf); color:var(--xc-ink3); }
.xct__sub{ display:block; margin-top:3px; font:400 var(--xt-8)/1.35 var(--xf);
  font-style:normal; color:var(--xc-ink3); }
/* ── celule de metrica (macro) si lista de detalii ─────────────────────────
   ⚠ Aceeasi forma ca la „Detineri" din grupul 6: eticheta deasupra, cifra
     dedesubt, doua pe rand pana la 1400px de container, patru peste. */
.xct__tri{ min-width:0; display:grid; gap:10px;
  grid-template-columns:repeat(2, minmax(0, 1fr)); }
.xct__c{ min-width:0; padding:15px 16px; border-radius:var(--xr-i);
  background:var(--xs-inset); }
.xct__cl{ display:block; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xct__cl::first-letter{ text-transform:uppercase; }
.xct__cv{ display:block; margin-top:2px; font:600 var(--xt-5)/1.1 var(--xf);
  letter-spacing:-.014em; font-variant-numeric:tabular-nums; color:var(--xc-ink); }
.xct__kv{ list-style:none; margin:18px 0 0; padding:0; }
.xct__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); }
.xct__kv li:first-child{ background:var(--xsep) no-repeat top/100% 1px; padding-top:18px; }
.xct__kv li + li{ background:var(--xsep) no-repeat top/100% 1px; }
.xct__kv b{ flex:none; color:var(--xc-ink); font-weight:600;
  font-variant-numeric:tabular-nums; }

/* ── plierea tabelului de indicatori ───────────────────────────────────────
   ⚠ Sase vizibili din doisprezece. Sase e jumatate: destul cat sa se vada
     tiparul (unde e peste mediana, unde e sub), nu atat cat sa devina un perete
     de cifre. Restul la buton.
   ⚠ Caseta e FRATE cu invelisul tabelului: selectorul e `~`. */
.xct__ft{ position:absolute; opacity:0; pointer-events:none; }
.xct__ft:not(:checked) ~ .xct__sc .xct__extra{ display:none; }
.xct__extra{ overflow-anchor:none; }
/* ⚠ 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. */
.xct__fx{ overflow-anchor:auto; display:flex; align-items:center; justify-content:center;
  gap:9px; width:100%; margin:16px 0 0; padding:13px 16px; min-height:44px;
  border-radius:12px; background:var(--xs-inset);
  font:600 var(--xt-7)/1 var(--xf); color:var(--xc-ink); cursor:pointer;
  transition:background .15s ease; }
.xct__fx:hover{ background:#141417; }
.xct__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; }
.xct__ft:checked ~ .xct__fx{ background:transparent; color:var(--xc-ink2); }
.xct__ft:checked ~ .xct__fx::after{ transform:translateY(2px) rotate(-135deg); }
.xct__fb{ display:none; }
.xct__ft:checked ~ .xct__fx .xct__fa{ display:none; }
.xct__ft:checked ~ .xct__fx .xct__fb{ display:block; }

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

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

/* ══ DESKTOP · pragul temei, pe CONTAINER (20-grup2.css:207) ══ */
@container mdsx (min-width:900px){
  .xct__card{ border-radius:var(--xr-c); padding:29px 31px 31px; scroll-margin-top:82px; }
  .xct__bento{ gap:13px; }
  /* ⚠ 4/6 si 2/6, nu 3/3: tabelul de indicatori are CINCI coloane si pana la
     douasprezece randuri; cel de performanta are patru coloane si sase randuri.
     Egale, primul s-ar fi ingustat si ar fi derulat degeaba. */
  .xct__bento > .xct__card:first-child{ grid-column:span 4; }
  .xct__bento > .xct__card:last-child{ grid-column:span 2; }
  /* ⚠⚠ CARDUL DE COMPARABILE TINE RANDUL INTREG. Ma bazasem pe
     `.xct__bento:has(> :only-child) > *{span 6}`, dar aia are specificitate
     (0,2,0) — `:has()` o ia de la argumentul ei, `:only-child` — iar regula de
     deasupra are (0,3,0) si o batea. Am scris atunci `.xct__card--w` in blocul
     de baza; tot n-a mers, fiindca blocul de baza vine INAINTEA acestei
     interogari de container, iar la specificitate egala castiga ultima scrisa.
     Masurat de DOUA ORI ca tot nu mergea, cu regula scrisa dupa `:last-child`,
     la specificitate egala. A treia oara am incetat sa ma bazez pe ordine si am
     urcat specificitatea: `.xct__card.xct__card--w` e (0,4,0) fata de (0,3,0),
     deci castiga indiferent unde e scrisa. Regula care depinde de ordine e o
     regula care se strica la prima reorganizare a fisierului. */
  .xct__bento > .xct__card.xct__card--w{ grid-column:span 6; }
  /* ⚠ La macro cele doua carduri sunt EGALE (3/6 + 3/6), nu 4/6 + 2/6: unul are
     patru celule si trei randuri, celalalt doua celule si trei randuri. Cu 2/6,
     cardul mic iesea 357px, iar celulele lui ~150px — cu fereastra de ajutor
     deschisa, textul se rupea in cuvinte de cate un rand. */
  .xct__bento > .xct__card.xct__card--h{ grid-column:span 3; }
  .xct__bento:has(> :only-child) > *{ grid-column:span 6; }
  .xct__pb{ width:64px; }
  .xct__tri{ gap:11px; }
  /* ⚠ Regula 4/6 + 2/6 e pentru sectiunea cu doua carduri. Cand cardul e
     singur (comparabile), `:only-child` de mai sus ii da randul intreg. */
}

@container mdsx (min-width:1400px){
  .xct__tri{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

@container mdsx (max-width:899px){
  /* pe mobil, coloana de scor ramane — sunt doar patru si toate scurte */
  .xct__tbl--c th,
  .xct__tbl--c td{ padding-left:8px; }
  .xct__tbl--c th:first-child,
  .xct__tbl--c td:first-child{ padding-left:0; }
}