/* ============================================================================
   13-indicatoare.css · „Trei indicatoare" · cadran cu sapte trepte
   Marcajul: `inc/sections/x-indicatoare.php`.
   Asezat INAINTEA benzii `#argumente` prin `blocks/x-sectiune.php`.

   ⚠ Prefixul 13 e inaintea lui 14 (Argumente) si dupa 12 (Verdict): folderul se
     incarca alfabetic prin `glob` (`01-css-sectiuni.php:31`), deci ordinea din
     nume e ordinea de tiparire. Nu e nevoie de nicio inregistrare.

   ⚠ TOATE JETOANELE SUNT ALE TEMEI, din `20-grup2.css:23-37` si `00-shell.css`.
     Niciunul redefinit aici: daca paleta se schimba acolo, se schimba si aici.
   ============================================================================ */

.xin{ margin:var(--xsp-sec,39px) 0 0; font-family:var(--xf);
  letter-spacing:-.004em; color:var(--xc-ink); scroll-margin-top:82px; }

.xin__h{ margin:0 0 16px; }
.xin__t{ margin:0; font-size:var(--xt-3); font-weight:700; line-height:1.18;
  letter-spacing:-.022em; color:var(--xc-ink); }
.xin__t::first-letter{ text-transform:uppercase; }
.xin__l{ margin:10px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink2); }

/* ⚠ LINKUL CATRE METODOLOGIE sta pe acelasi rand cu lede-ul, nu pe unul propriu:
   e o trimitere, nu un indemn. Subliniat, ca sa se vada ca e link intr-un
   paragraf de text; verde numai la hover, ca sa nu concureze cu cifrele. */
.xin__met{ color:var(--xc-ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:var(--xc-ink4); }
.xin__met:hover{ color:var(--xc-ac); text-decoration-color:currentColor; }

/* ══ PISTA · SWIPE PE MOBIL, GRILA PE DESKTOP ══════════════════════════════
   ⚠⚠ CERUT: pe mobil cele trei carduri stau pe UN RAND si se trag cu degetul,
      cu vecinul din dreapta vizibil putin, ca sa se vada ca mai urmeaza.
      Acelasi tipar ca la „Sumar date" (`10-antet-date.css:119`): coloana la
      88%, `scroll-snap-align:center`, iar marginile negative fac pista sa
      sangereze pana la marginile coloanei, ca al treilea card sa nu para taiat.
      `scroll-padding` opreste snap-ul la aceeasi margine.

   ⚠ MECANICA SCRISA AICI, nu imprumutata prin clasa `facts__track`. Tema o are
     (`mds-design.css:653`) si „Sumar date" o foloseste, dar acolo vine la pachet
     cu `mds-facts.js`, care cere taburi cate coloane sunt. Sectiunea asta n-are
     taburi, deci patru linii proprii sunt mai ieftine decat o dependenta care
     s-ar putea trezi ca lipsesc taburile.

   ⚠ `align-items:start` pe desktop: cele trei carduri au panouri de inaltimi
     foarte diferite (8 sectiuni, 4-10 metrici, 14 semnale). Intinse, cardul cu
     patru randuri ar fi capatat doua ecrane de gol cand vecinul e deschis. */
.xin__g{ display:flex; gap:12px; margin:0 -18px; padding:2px 18px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scroll-padding:0 18px; scrollbar-width:none; -ms-overflow-style:none; }
.xin__g::-webkit-scrollbar{ display:none; }

/* ⚠ FARA MUCHIA DE 1px din `--xe-lift`, ca la `.xhd__c`: umbra are doua
   straturi, iar primul (`0 1px 1px`) se citeste ca o bordura. Ramane doar cel
   care ridica cardul. `--xe-lift` NU se atinge: il folosesc alte carduri. */
/* ⚠⚠ `scroll-margin-top` LIPSEA, si asta era defectul raportat: la inchiderea
      panoului „Cum se calculeaza", `mds-xdp.js` cheama `scrollIntoView` cu
      `block:'start'`, iar fara marja varful cardului se aseaza la 0px de
      marginea de sus - adica SUB antetul lipit al temei
      (`mds-shell.css:9` si `:48`, `position:sticky; top:0`).
      Masurat inainte de reparatie, la 390px si la 1440px: `scroll-margin-top`
      0px, varful cardului la 0px de sus, deci acoperit.
   ⚠ 78px pe mobil si 82px pe desktop NU SUNT ALESE AICI: e conventia temei,
     aceeasi cu `verdict.css:345-357` si cu toate celelalte carduri din lista
     lui `mds-xdp.js` (`.xdv__card`, `.xct__card`, `.xcz__card`). De aia ele
     reveneau corect si al meu nu.
   ⚠ Valoarea NU se scaleaza cu restul la desktop: compenseaza un antet care nu
     face parte din `.mdsx` si nu se micsoreaza (vezi `00-shell.css:41`). */
.xin__c{ position:relative; min-width:0; flex:0 0 88%; scroll-snap-align:center;
  display:block; background:var(--xs-card); border-radius:28px;
  box-shadow:0 22px 48px -28px rgba(0,0,0,1); padding:26px 24px 28px;
  scroll-margin-top:78px; }

/* ⚠ CERUT: numele e ALB si la STANGA, nu centrat. Marimea e cea a titlurilor de
   card din restul paginii (`--xt-4`, 600), ca la `.xan__ct` si `.xpj__ct`. */
.xin__n{ margin:0; font-weight:600; font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; color:var(--xc-ink); }

/* ⚠ Cadranul e singurul lucru centrat prin sine: e un obiect radial, aliniat la
   stanga ar fi aratat a greseala. */
.xin__cd{ display:block; width:100%; max-width:230px; height:auto;
  margin:14px auto 2px; }

/* ⚠ CERUT: verdictul e CENTRAT. Fraza de sub el merge la centru odata cu el -
   centrat deasupra, aliniat la stanga dedesubt, arata a greseala. */
.xin__et{ margin:8px 0 0; text-align:center; font-size:var(--xt-3);
  font-weight:700; line-height:1.15; letter-spacing:-.018em; color:var(--k); }
.xin__p{ margin:8px 0 0; text-align:center; min-height:1.5em;
  font:400 var(--xf-sm)/1.5 var(--xf); color:var(--xc-ink2); }

/* ══ CARDUL FARA SCOR ══════════════════════════════════════════════════════
   ⚠⚠ ABTINEREA SE VEDE, NU SE ASCUNDE. Cand un indicator n-are destule date,
      cardul RAMANE pe pagina: cadranul e intreg dar stins peste tot, locul
      cifrei e gol, iar sub cadran scrie de ce. Alternativa - sa nu randam
      cardul - ar fi lasat cititorul cu doua carduri din trei si fara sa stie
      de ce lipseste al treilea.

   ⚠ ETICHETA NU PRIMESTE CULOARE DE TREAPTA. `--k` e pus pe card la gri
     (`#7d7a74`) chiar din PHP, deci „Date insuficiente" nu poate iesi verde
     sau rosu; regula de aici doar slabeste cadranul, ca sa nu concureze cu
     textul care poarta informatia.

   ⚠ FARA `opacity` PE TOT CARDUL: ar fi spalat si textul explicativ, adica
     exact partea care conteaza cand nu exista cifra. */
.xin__c--gol .xin__cd{ opacity:.55; }
.xin__c--gol .xin__et{ font-size:var(--xt-4); font-weight:600; }

/* ══ BUTONUL ═══════════════════════════════════════════════════════════════
   ⚠⚠ CERUT: identic cu butonul de la Argumente (`.xar__more`,
      `14-argumente.css:152`). Aceeasi cutie, acelasi fond `--xs-inset`, acelasi
      hover `--xs-track`, acelasi `padding:11px 18px`, aceeasi treapta de text.
      Varianta dinainte avea fond alb transparent si o bordura de un fir - alt
      buton, in aceeasi pagina, pentru acelasi gest.
   ⚠ Chevronul RAMANE (cerut mai devreme: „un buton/sageata care sa deschida").
     E singura diferenta fata de `.xar__more`, si e voita: butonul de la
     Argumente lungeste o lista, asta deschide un panou. */
.xin__ck{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.xin__x{ display:flex; align-items:center; justify-content:center; gap:9px;
  margin:16px 0 0; padding:11px 18px; border-radius:var(--xr-p);
  background:var(--xs-inset); font:600 var(--xt-7)/1.3 var(--xf);
  color:var(--xc-ink); cursor:pointer; }
.xin__x:hover{ background:var(--xs-track); }
.xin__x::after{ content:""; width:9px; height:9px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg); transition:transform .18s ease; }
.xin__ck:checked ~ .xin__x::after{ transform:translateY(2px) rotate(-135deg); }
.xin__xb{ display:none; }
.xin__ck:checked ~ .xin__x .xin__xa{ display:none; }
.xin__ck:checked ~ .xin__x .xin__xb{ display:block; }

/* ══ PANOUL ════════════════════════════════════════════════════════════════
   ⚠⚠ CERUT: FARA CARD IN CARD. Panoul avea fond `--xs-inset`, raza `--xr-i` si
      o bordura - adica un al doilea card inauntrul cardului. Acum e continut
      obisnuit: doar o linie de separare deasupra, ca orice bloc care urmeaza
      altuia in cardurile paginii.
   ⚠ Randurile sunt pe tiparul lui `.xan__leg li` (`20-grup2.css:146`): acelasi
     `gap:10px`, acelasi `padding:8px 0`, acelasi separator `--xsep` intre ele,
     aceeasi bulina de 9px, aceleasi trepte de text. */
/* ⚠⚠ `max-height:0`, NU `display:none`, SI E O ALEGERE DE SEO / AEO, nu una de
      stil. Randarea e IDENTICA - masurat la 390px si la 1440px, inchis si
      deschis: 479/479/479px si 423/446/423px inchise, 1951px si 1860px deschise,
      aceleasi cifre cu ambele variante.

      Diferenta e ce vad EXTRACTOARELE DE TEXT. Mozilla Readability - folosita de
      Reader Mode si inglobata in multe conducte de citire pentru modele - taie
      nodurile prin `isNodeVisible()`, care se uita la `node.style.display`,
      `hidden` si `aria-hidden`. `max-height:0` trece de filtrul ala; un
      `display:none` calculat din foaie de stil trece si el, dar orice extractor
      care se uita la stilul CALCULAT, nu la cel inline, il taie.

      In panou stau cifrele companiei - valorile pilonilor, percentilele
      metricilor, citirile semnalelor - adica singurul continut UNIC de acolo.
      Pe el chiar il vrem citit.

   ⚠ NU se foloseste niciodata `hidden`, `aria-hidden="true"` sau
     `position:absolute; left:-9999px` pentru plierea asta. Ultimul e trecut
     explicit ca incalcare in politicile Google („Using CSS to position text
     off-screen"), iar primele doua sunt taiate de extractoare. Acordeonul pe
     caseta si CSS e chiar tiparul pe care Google il da ca legitim.

   ⚠ FARA JAVASCRIPT, si asta conteaza mai mult decat pare: crawlerele modelelor
     nu executa JS (GPTBot si ClaudeBot cer fisierele .js dar nu le ruleaza).
     Un panou incarcat la clic ar fi invizibil pentru ele - si, dupa
     documentatia Google pentru JS, neindexabil daca nu e in HTML-ul randat.

   ⚠ Marginea si padding-ul se muta pe starea deschisa: cu `max-height:0` cutia
     ramane in flux, deci un padding lasat pe ea ar fi adaugat 32px de gol sub
     fiecare card inchis. */
.xin__d{ overflow:hidden; max-height:0; margin:0; padding:0;
  background:var(--xsep) no-repeat top/100% 1px; }
.xin__ck:checked ~ .xin__d{ max-height:none; margin:16px 0 0; padding:16px 0 0; }

.xin__dh{ margin:0 0 6px; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); }
.xin__dh b{ color:var(--xc-ink); font-weight:600; }
/* ⚠⚠ CE A MAI RAMAS DIN `.xin__dh`, dupa ce proza din panouri a fost scoasa
      (cerut: „nu sunt ok textele alea si nu trebuie sa apara"):
        - `.xin__dh` simplu: o singura propozitie, si numai pe un card care se
          ABTINE. Acolo e tot continutul panoului - fara ea, butonul „Cum se
          calculeaza" ar deschide o casuta goala.
        - `.xin__dh--2`: capetele de familie de la Evaluare si Tehnic, care
          poarta scorul familiei („Profit fata de capitalizare: 8,2 din 100").
          Nu sunt proza, sunt etichete de grup: randurile de sub fiecare ii
          apartin, iar fara ele nu s-ar mai vedea nici din ce familie face parte
          o metrica, nici cat cantareste familia.
      La Fundamente nu mai e niciunul: panoul e o lista de noua randuri.
   ⚠ Separatorul isi face treaba INTRE grupuri. Aceeasi linie ca intre randuri. */
.xin__dh--2{ margin-top:18px; padding-top:16px;
  background:var(--xsep) no-repeat top/100% 1px; }
/* ⚠⚠ PRIMUL CAP DE FAMILIE N-ARE CE DESPARTI. De cand introducerea a disparut,
      el e primul lucru din panou, iar `.xin__d` isi are deja linia lui sus:
      masurat, ieseau doua linii una sub alta si 34px de gol inainte de prima
      eticheta. Regula asta il aduce lipit de marginea panoului. */
.xin__d > .xin__dh--2:first-child{ margin-top:0; padding-top:0; background:none; }

.xin__r{ display:flex; align-items:center; gap:10px; padding:8px 0;
  font-size:var(--xf-sm); color:var(--xc-ink2); }
.xin__r + .xin__r{ background:var(--xsep) no-repeat top/100% 1px; }
.xin__r > i{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--kr); }
/* ⚠⚠ `:not(.xin__pb)` NU E DECOR. Bara de percentila e tot un `span`, deci
   `.xin__r > span` o prindea si pe ea - si o batea la specificitate ((0,1,1)
   fata de (0,1,0) al lui `.xin__pb`). Masurat: bara raporta `flex:1 1 0%` in loc
   de latimea ei, eticheta si bara imparteau exact 117px fiecare, iar trecerea
   barei pe rand propriu pe mobil n-avea niciun efect. */
.xin__r > span:not(.xin__pb){ flex:1; min-width:0; }
.xin__r > b{ flex:none; font:600 var(--xt-6)/1 var(--xf); color:var(--xc-ink);
  font-variant-numeric:tabular-nums; }
/* ⚠⚠ VALOAREA SUB ETICHETA, NU LANGA EA. Pe trei coloane, „Media scurta peste
   cea lunga" langa „MA50 vs MA200" strangea eticheta la un cuvant pe rand si
   cele doua se suprapuneau. Masurat la 1440: cardul are 268px inauntru, iar
   perechea cerea 310px. Stivuit, niciun rand nu mai are concurenta. */
.xin__r small{ display:block; margin-top:3px; font-size:var(--xt-7);
  line-height:1.4; color:var(--xc-ink); font-variant-numeric:tabular-nums; }
.xin__r small.xin__sub{ color:var(--xc-ink3); }

.xin__pb{ flex:none; width:58px; height:5px; border-radius:var(--xr-p);
  background:var(--xs-track); overflow:hidden; }
.xin__pb i{ display:block; width:var(--w); height:100%; border-radius:var(--xr-p);
  background:var(--kr); }

/* ⚠⚠ CERUT: BUTONUL TRECE SUB PANOU CAND E DESCHIS, PE AMBELE LATIMI.
   Altfel „Inchide" ramane sus, iar omul care a derulat prin paisprezece semnale
   trebuie sa urce inapoi ca sa inchida.
   ⚠ Prima versiune legase regula de `@container ... (max-width:899px)`, cu
     argumentul ca pe desktop panoul lung ar impinge butonul sub pliu. Argumentul
     era al meu, nu al cererii: pe desktop cardurile au inaltimi foarte diferite
     (7 randuri la Fundamente, 14 la Tehnic), iar butonul la inaltimi diferite in
     trei carduri alaturate arata mai rau decat unul care sta jos in toate trei.
   ⚠ `order` merge fiindca `.xin__c` devine coloana flex la deschidere; inchis,
     ordinea din marcaj e deja cea buna, deci regula nu se aplica. */
.xin__c:has(.xin__ck:checked){ display:flex; flex-direction:column; }
.xin__c:has(.xin__ck:checked) > .xin__d{ order:1; }
.xin__c:has(.xin__ck:checked) > .xin__x{ order:2; margin-top:16px; }

@container mdsx (max-width:899px){
  /* ⚠⚠ BARA TRECE SUB ETICHETA. Masurat la 390px: cardul are 334px, minus
     padding 48 raman 286, iar eticheta primea 286 - 10 - 58 - 10 - 40 = 168px.
     „Datorii si solvabilitate" si „Calitatea profitului" se rupeau in doua
     randuri, iar cu numarul de metrici dedesubt fiecare rand ajungea la trei
     linii - pe opt sectiuni, un card cat un ecran si jumatate degeaba.
     Cu `flex-wrap` si bara pe tot randul, eticheta primeste toata latimea. */
  .xin__r{ flex-wrap:wrap; }
  .xin__pb{ order:3; flex:1 0 100%; width:auto; margin-top:8px; }

}

@container mdsx (min-width:900px){
  /* ⚠ Pe desktop nu mai e pista: grila de trei, fara margini negative si fara
     snap. `overflow:visible` e OBLIGATORIU - altfel umbra cardurilor s-ar taia
     la marginea pistei. */
  .xin__g{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px; margin:0; padding:0; overflow:visible; align-items:start; }
  /* ⚠ 82px pe desktop, ca la toate celelalte carduri ale temei
     (`42-dividende.css:200`, `48-context.css:292`, `40-crize.css:155`). */
  .xin__c{ flex:none; border-radius:var(--xr-c); padding:29px 31px 31px;
    box-shadow:var(--xe-lift); scroll-margin-top:82px; }
}

@media (prefers-reduced-motion:reduce){
  .xin__g{ scroll-behavior:auto; }
  .xin__x::after{ transition:none; }
}