/* ============================================================================
   x-proiectii.css · §9 PROIECTII · namespace `xpj`
   Generat de `fac_pj.py` la 2026-09-10 21:25:38. NU se editeaza de mana.

   DUPA GHIDURI:
     SECTIUNE_09 §5   fan/banda cu comutator de orizont · probability-bars ·
                      descompunerea randamentului · stres
     SECTIUNE_09 §5   mobil: „un orizont vizibil odata (comutator pastile);
                      probabilitatile ca lista de bare; stres compact"
     CATALOG_BLOCURI  `fan-chart` · `probability-bars` · `longterm-projection`
                      · `stress-bars`
   Textele din `texte-proiectii.ro.json`, catalogul temei, cu assert.

   ⚠⚠ STRUCTURA, dupa restructurarea din lotul 78: PATRU CARDURI INTREGI, unul
      pe perioada, intr-o pista la nivel de sectiune (`.xpj__g`). Fiecare card
      isi are banda, disclaimerul, butonul si probabilitatile ale lui. Inainte
      era un singur card cu o pista de panouri inauntru, si de acolo veneau
      toate defectele raportate. Vezi nota lunga de la `.xpj__g`.
   ⚠ COMUTATOR PUR CSS pentru desktop: patru radiouri inaintea pistei, selector
     de frate pana la cardul perioadei. Pe mobil alege degetul, iar `mds-xpj.js`
     tine taburile si pista sincronizate.
   ⚠ La 6 si 12 luni blocul de jos arata PROBABILITATILE; la 3 si 5 ani
     arata DESCOMPUNEREA randamentului, fiindca probabilitatile nu exista pe
     orizonturile lungi. Nu se inventeaza si nu se lasa gol.
   ⚠ R23-R26 din REGULI.md: titlu sectiune 26→34, titlu card 21→24, text de
     sprijin `--xf-sm`, culori numai din treptele temei.
   ============================================================================ */

:root{ --xc-cyan:#1d9bf0; }

/* ⚠ `scroll-margin-top` ramane si pe sectiune, pentru ancora din meniu. Cel
   care conteaza la inchiderea probabilitatilor e pe `.xpj__c`, fiindca acolo
   revine `mds-xdp.js`: cardul perioadei, nu toata sectiunea.
   78/82px e conventia temei (`verdict.css:345-357`). */
.xpj{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em;
  margin-top:var(--xsp-sec,39px); scroll-margin-top:78px; }
.xpj *{ box-sizing:border-box; border:0; }
.xpj__t{ margin:0; font-size:var(--xt-3); font-weight:700; line-height:1.15;
  letter-spacing:-.022em; text-wrap:nowrap; }
.xpj__t::first-letter{ text-transform:uppercase; }
.xpj__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf); letter-spacing:-.006em;
  color:var(--xc-ink); }
.xpj__meta{ margin:10px 0 0; font:400 var(--xt-7)/1.4 var(--xf); color:var(--xc-ink3); }
.xpj__meta b{ color:var(--xc-ink2); font-weight:600; }

/* ── comutatorul de orizont ── */
/* ⚠⚠ `.xpj__r`, NU `.xpj__t`. Prima versiune folosea `.xpj__t` si pentru
   titlul sectiunii (`<h3 class="xpj__t">`), si pentru radio-uri. Regula de
   ascundere venea a doua, cu aceeasi specificitate, deci ascundea TITLUL:
   masurat `opacity:0`, `position:absolute`. Coliziune in propriul namespace -
   garda de nume verifica tema, nu si consecventa interna. */
/* ⚠⚠ ASCUNDEREA ASTA NU SCOATE ELEMENTUL DIN CALEA FOCUSULUI, si de aici venea
      saltul raportat: la apasarea unui tab, eticheta bifeaza radioul prin
      `for`, radioul primeste focus, iar browserul deruleaza pagina ca sa-l
      aduca in ecran. Masurat la 390px, FARA NICIUN JAVASCRIPT incarcat: 6896
      -> 6184, adica pagina sarea inapoi in cardul de Valoare justa.
      Reparatia NU e aici, e in marcaj: radiourile stau acum imediat inaintea
      barei de taburi, deci pozitia lor statica e chiar bara pe care tocmai a
      apasat degetul si derularea de focus nu mai are unde sa sara.
   ⚠ Deci nu muta radiourile inapoi in capul sectiunii, oricat de curat ar
     arata acolo. Masoara inainte: `scrollY` inainte si dupa un click pe tab. */
.xpj__r{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
/* ⚠ `--xs-track` (#1c1c1f), nu `--xs-inset` (#0e0e10): pe fundalul paginii
   adancitura era prea aproape de negru si bara nu se citea ca un comutator. */
.xpj__tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 0; padding:4px;
  border-radius:var(--xr-p); background:var(--xs-track); width:fit-content; max-width:100%; }
/* ⚠ 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. */
.xpj__tab{ padding:9px 16px; border-radius:var(--xr-p); font:600 var(--xt-7)/1.2 var(--xf);
  color:var(--xc-ink3); cursor:pointer; white-space:nowrap; }
.xpj__tab:hover{ color:var(--xc-ink); }

/* ══ PISTA · UN CARD INTREG PE PERIOADA ═════════════════════════════════════
   ⚠⚠ CERUT, dupa doua incercari gresite: „principiul de swipe stanga dreapta
      si afisaj la Probabilitati, cum au si cele 3 carduri cu indicatori".
      Deci tiparul e copiat cap-coada de la `.xin__g` / `.xin__c`
      (`13-indicatoare.css:49` si `:70`): pista sta la nivel de SECTIUNE, iar
      ce aluneca in ea e CARDUL CU RAMA LUI.

   ⚠⚠ CE ERA INAINTE, ca sa nu se refaca: doua piste, una in cardul benzii si
      una in cardul probabilitatilor, fiecare cu patru panouri. De acolo veneau
      amandoua defectele raportate:
        - la swipe se misca doar continutul, rama statea pe loc;
        - pista sangera cu `margin-inline:-24px` pana la muchia cardului, deci
          in acelasi card se vedeau bucati din perioadele vecine.
      Ambele dispar cand unitatea care aluneca e cardul, nu panoul.

   ⚠⚠ SI REGULILE DE LIPIRE AU DISPARUT ODATA CU ELE. Cardul de probabilitati
      nu mai e un al doilea card care se lipeste de primul cu
      `border-radius:28px 28px 0 0` si `margin-top:-12px`; e `.xpj__b`, o
      bucata din acelasi card. Aia e si cererea („cand se deschid datele sa fie
      tot in card"), si motivul pentru care mutarea infatisarii de pe card pe
      panouri, incercata la lotul 76, stricase tot: rupea exact regulile alea.
      Acum nu mai au ce rupe, fiindca nu mai exista.

   ⚠ Marginile negative fac pista sa sangereze pana la marginile coloanei, ca
     al patrulea card sa nu para taiat; `scroll-padding` opreste snap-ul la
     aceeasi margine. 18px, ca la Indicatoare - NU 24px, care era padding-ul
     cardului vechi si n-are corespondent aici.

   ⚠⚠ INALTIMEA CARDURILOR SE EGALIZEAZA DOAR CAT TIMP SUNT TOATE INCHISE, si
      asta a fost un defect raportat. Cardurile de 3 si 5 ani au un rand in plus
      fata de cele de 6 si 12 luni - `.xpj__cap`, nota cu randamentul anual -
      deci sunt cu 61px mai inalte (masurat: 462 fata de 523). Cu
      `align-items:start`, pista se face cat CEL MAI INALT card, iar sub cardul
      scurt ramanea un gol de 85px pana la disclaimer.
      `stretch` il inchide: toate patru ajung la 523, iar golul trece IN card,
      unde `.xpj__a` il absoarbe (vezi `flex:1 1 auto` de mai jos).

   ⚠⚠ DAR LA DESCHIDERE SE INTOARCE LA `start`, si aia nu e o subtilitate:
      probabilitatile adauga ~800px unui singur card. Intinse, celelalte trei ar
      fi capatat fiecare cate un ecran intreg de gol. De-aia regula a doua, pe
      `:has()`: cat timp vreo caseta e bifata, cardurile isi tin inaltimea lor.
   ⚠ `:has()` e deja folosit in tema pe aceleasi pagini (`13-indicatoare.css`,
     `.xin__c:has(.xin__ck:checked)`). Fara el, ramane `stretch` si la
     deschidere: arata mai slab, nu se strica nimic. */
.xpj__g{ display:flex; gap:12px; margin:20px -18px 0; padding:2px 18px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  overscroll-behavior-x:contain; scroll-padding:0 18px; align-items:stretch;
  scrollbar-width:none; -ms-overflow-style:none; }
.xpj__g:has(.xpj__ck:checked){ align-items:start; }
.xpj__g::-webkit-scrollbar{ display:none; }

/* ⚠⚠ FARA `touch-action`, SI ASTA E UN DEFECT REPARAT. Cardul avea
      `touch-action:pan-y`, ramas de la versiunea in care `mds-xpj.js` prindea
      gestul singur, cu `pointerdown/move/up`. Scriptul nu mai face asta - pista
      e un derulator nativ - iar `pan-y` ii spune browserului fix invers decat
      ne trebuie: pe elementul asta e voie numai pe verticala. Degetul pus PE
      CARD si tras lateral era inghitit, si pista nu se misca. Mergea doar in
      putinul care ramanea din pista sub carduri, unde `touch-action` e
      implicit.
      Raportat exact asa: „fac, dar doar daca fac cu degetul jos la finalul
      cardurilor". `.xin__c`, de la Indicatoare, n-a avut niciodata proprietatea
      asta - de-aia acolo swipe-ul mergea de oriunde.
   ⚠ Deci nu se pune la loc, in nicio varianta. Implicitul (`auto`) lasa si
     derularea paginii pe verticala, si pista pe orizontala, care e exact ce
     trebuie.
   ⚠ `position:relative` e pentru caseta de probabilitati, care e absoluta si
     trebuie sa ramana in card.
   ⚠ `scroll-margin-top` 78/82px e conventia temei (`verdict.css:345-357`):
     `mds-xdp.js` aduce cardul inapoi in ecran la inchiderea probabilitatilor,
     iar fara marja varful lui s-ar aseza sub antetul lipit. */
.xpj__c{ position:relative; min-width:0; flex:0 0 88%; scroll-snap-align:center;
  display:flex; flex-direction:column; 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; }
/* ⚠ Coloana cu banda absoarbe golul ramas cand cardul e intins la inaltimea
   celui mai inalt. Fara asta, cele 61px ar fi cazut SUB buton, adica exact
   golul pe care il mutam din afara cardului inauntru. Butonul isi pastreaza
   cei 22px de deasupra, fiindca spatiul se aduna deasupra lui, nu in marja
   lui - `margin-top:auto` l-ar fi lipit de continut pe cardul cel mai inalt,
   unde nu mai e nimic de impartit. */
.xpj__a{ flex:1 1 auto; min-width:0; }

/* ⚠ Perioada, in capul cardului. Fara ea, cardul vecin care se vede la muchie
   n-ar spune ce perioada e - singurul lucru care le deosebeste. Pe desktop se
   ascunde: acolo se vede un singur card si tabul aprins spune deja perioada. */
.xpj__ce{ margin:0 0 12px; font:600 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink3); }

/* ⚠⚠ REZERVA FARA JAVASCRIPT. Scriptul pune `has-js` pe sectiune; pana atunci
   - sau daca fisierul lipseste - pista redevine un teanc si radioul arata un
   singur card, adica exact comportamentul dinainte de pista. Fara asta, un
   browser fara JS ar fi aratat o pista pe care taburile n-o misca. */
.xpj:not(.has-js) .xpj__g{ display:block; overflow:visible; margin-inline:0;
  padding-inline:0; }
.xpj:not(.has-js) .xpj__c{ display:none; }
.xpj:not(.has-js) #xpj-h180:checked ~ .xpj__g .xpj__c--h180,
.xpj:not(.has-js) #xpj-h365:checked ~ .xpj__g .xpj__c--h365,
.xpj:not(.has-js) #xpj-h1095:checked ~ .xpj__g .xpj__c--h1095,
.xpj:not(.has-js) #xpj-h1825:checked ~ .xpj__g .xpj__c--h1825{ display:block; }

/* ⚠⚠ DOUA COPII ALE TITLULUI, UNA SINGURA VIZIBILA. Pe mobil se arata cea din
      antetul sectiunii, DEASUPRA comutatorului de perioade (cerut); pe desktop
      cea din card, unde e titlul coloanei din stanga. Vezi nota din
      `mds_xpj_sectiune()` pentru de ce nu se poate face din `order`. */
.xpj__top{ margin:0 0 18px; }
.xpj__top--m{ margin:18px 0 0; }
.xpj__top--d{ display:none; }
.xpj__ct{ margin:0; font-weight:600; font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; }
.xpj__cs{ margin:8px 0 0; font:400 var(--xf-sm)/1.5 var(--xf); color:var(--xc-ink2); }


/* ⚠ Valoare NEINCADRATA in atribut. Cu ghilimele, generatorul le scotea
   escapate (`[for=\"xpj-h180\"]`) si selectorul nu se potrivea: pastila
   activa ramanea necolorata. `xpj-h180` e identificator valid.
   ⚠ `.xpj__tabs`, nu `.xpj__h`: invelisul de antet a disparut, ca radiourile
     sa poata sta intre titlu si taburi si sa ramana frati cu ele. */
#xpj-h180:checked ~ .xpj__tabs [for=xpj-h180],
#xpj-h365:checked ~ .xpj__tabs [for=xpj-h365],
#xpj-h1095:checked ~ .xpj__tabs [for=xpj-h1095],
#xpj-h1825:checked ~ .xpj__tabs [for=xpj-h1825]{ background:var(--xs-card); color:var(--xc-ink); }

/* ── cifra mare si banda ── */
.xpj__hero{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 14px; }
.xpj__hero b{ font-size:var(--xt-1); font-weight:700;
  letter-spacing:-.022em; line-height:1.04; font-variant-numeric:tabular-nums; }
.xpj__hero em{ font:500 var(--xf-sm)/1.3 var(--xf); font-style:normal; color:var(--xc-ink2); }
.xpj__scw{ position:relative; margin:24px 0 0; }
.xpj__sc{ position:relative; height:var(--xbar); border-radius:var(--xr-p);
  background:var(--xs-track); overflow:hidden; }
/* ⚠ Banda e un gradient rosu→verde: capatul de jos si cel de sus nu sunt
   echivalente, iar o singura culoare ar sugera ca sunt. */
/* ⚠ FARA `opacity`. Prima versiune punea `.42` peste gradient, ceea ce il
   stingea pana la un maro-verzui: culorile nu se mai citeau. */
/* ⚠ `border-radius` PROPRIU. `overflow:hidden` al pistei taie doar capetele
   pastilei; zona nu incepe si nu se termina la marginile ei, deci laturile ei
   ramaneau drepte, spre deosebire de barele de probabilitate. */
.xpj__zone{ position:absolute; top:0; height:100%; border-radius:var(--xr-p);
  background:linear-gradient(90deg,var(--xc-pink),var(--xc-orange) 34%,var(--xc-teal) 68%,var(--xc-lime)); }
.xpj__zero{ position:absolute; top:0; width:1px; height:100%; background:rgba(255,255,255,.34); }
.xpj__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:2; }
.xpj__m--p{ background:var(--xc-ink); } .xpj__m--b{ background:var(--xc-cyan); }
.xpj__scl{ display:flex; justify-content:space-between; gap:16px; margin:14px 0 0;
  font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink); }
.xpj__scl span:last-child{ text-align:right; }
.xpj__cap{ margin:14px 0 0; font:400 var(--xf-sm)/1.5 var(--xf); color:var(--xc-ink3); }
.xpj__cap b{ color:var(--xc-ink); font-weight:600; font-variant-numeric:tabular-nums; }

.xpj__k{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:9px 22px;
  margin:16px 0 0; padding:0; font-size:var(--xf-sm); color:var(--xc-ink2); }
.xpj__k li{ display:flex; align-items:center; gap:9px; line-height:1.2; }
.xpj__d{ width:11px; height:11px; border-radius:50%; flex:none; }
.xpj__d--p{ background:var(--xc-ink); } .xpj__d--b{ background:var(--xc-cyan); }
.xpj__k b{ font-weight:600; color:var(--xc-ink); font-variant-numeric:tabular-nums; }

.xpj__mini{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:var(--xv-out) 0 0; }
.xpj__mc{ padding:15px 16px; border-radius:var(--xr-i); background:var(--xs-inset); }
.xpj__mc span{ display:block; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xpj__mc b{ display:block; margin-top:2px; font:600 var(--xt-5)/1.1 var(--xf); letter-spacing:-.014em;
  font-variant-numeric:tabular-nums; }
.xpj__mc em{ display:block; margin-top:4px; font:500 var(--xt-7)/1.2 var(--xf); font-style:normal;
  color:var(--xc-ink3); font-variant-numeric:tabular-nums; }

/* ── probability-bars / descompunere ── */
.xpj__vd{ margin:0 0 18px; }
.xpj__chip{ display:inline-flex; align-items:center; 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); }
.xpj__pl-l{ list-style:none; margin:0; padding:0; }
.xpj__pl-l li{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:11px 0; }
.xpj__pl-l li + li{ background:var(--xsep) no-repeat top/100% 1px; }
.xpj__pl{ font:500 var(--xf-sm)/1.35 var(--xf); color:var(--xc-ink); }
.xpj__pl em{ display:block; margin-top:2px; font:400 var(--xt-7)/1.3 var(--xf); font-style:normal;
  color:var(--xc-ink3); }
.xpj__pl-l b{ font:600 var(--xt-6)/1.2 var(--xf); text-align:right; font-variant-numeric:tabular-nums; }
.xpj__pb{ grid-column:1/-1; height:8px; border-radius:var(--xr-p); background:var(--xs-inset); }
.xpj__pb i{ display:block; height:100%; border-radius:var(--xr-p); min-width:3px; }

/* ══ PROBABILITATILE, IN ACELASI CARD ══════════════════════════════════════
   ⚠⚠ CERUT: „acel buton sa vada probabilitatile trebuie sa fie in carduri si
      cand se deschid datele sa fie tot in card, nu intr-un card separat".
      Deci `.xpj__b` e o BUCATA din cardul perioadei, nu un card langa el:
      n-are nici fond, nici raza, nici umbra proprie, si de-aia nu mai e nimic
      de lipit cand se deschide.
   ⚠ Caseta e la (0,2,0) prin `.xpj__c`, ca sa bata regula de baza fara `!`.

   ⚠⚠ CASETA E ANCORATA DE JOSUL CARDULUI, cu `bottom`, si asta nu e cosmetic.
      O casetă ascunsa primeste focus cand se apasa eticheta ei, iar browserul
      deruleaza pagina ca s-o aduca in ecran. Cat timp cardul era `display:block`
      ii ajungea pozitia statica, care cadea chiar langa buton. Din momentul in
      care cardul a devenit `display:flex`, pozitia statica a unui copil absolut
      sare in COLTUL DE SUS al containerului flex - si apasarea butonului a
      inceput sa urce pagina cu 650px. Masurat, dupa ce fusese 0px.
      `bottom` o tine langa buton in ambele stari: inchis, langa „Vezi si
      probabilitatea"; deschis, langa „Ascunde probabilitatea", care e tot in
      josul cardului. Masurat dupa reparatie: 0px in amandoua.
   ⚠ De-aia `.xpj__c` ramane `position:relative` SI pe desktop: altfel caseta
     s-ar ancora de `.mdsx__in`. */
.xpj__ck{ position:absolute; left:24px; bottom:28px;
  width:1px; height:1px; opacity:0; pointer-events:none; }
.xpj__b{ display:none; }
.xpj__c .xpj__ck:checked ~ .xpj__b{ display:block; }
.xpj__c .xpj__ck:checked ~ .xpj__pbt--o{ display:none; }

/* ⚠ BUTOANELE COBOARA O TREAPTA: `--xt-7` (13,5px), nu `--xf-sm` (15,5px).
   Cutia ramane neatinsa, deci se apasa la fel de usor cu degetul. */
.xpj__pbt{ display:flex; align-items:center; justify-content:center; margin:22px 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; }
.xpj__pbt:hover{ background:var(--xs-track); }
/* ⚠ Titlul blocului de probabilitate e mai mic decat cel principal: e o
   continuare in acelasi card, nu o sectiune noua. */
.xpj__b .xpj__ct{ font-size:var(--xt-5); }
/* ⚠ Separatorul tine locul muchiei dintre cele doua carduri de pe desktop: pe
   mobil e un singur card, deci despartirea trebuie sa se vada altfel. */
.xpj__b{ margin-top:22px; padding-top:22px;
  background:var(--xsep) no-repeat top/100% 1px; }

/* ── disclaimerul de conformare ── */
/* ⚠⚠ PE MOBIL STA SUB CARD, NU IN EL (cerut): copia `--m` e ultimul copil al
      sectiunii, dupa pista. Pe desktop se arata copia `--d`, din coloana cu
      banda a cardului. Cele doua sunt noduri diferite, in parinti diferiti,
      deci CSS-ul nu le poate reordona intre ele - de-aia se emit amandoua si se
      ascunde una.
   ⚠ Amandoua sunt vizibile SI CU PROBABILITATILE INCHISE. Inainte de
     restructurare, copia de mobil statea in cardul de probabilitati, adica pe
     telefon, in starea implicita, disclaimerul de conformare nu se vedea deloc.
     Conditia asta ramane oriunde s-ar mai muta. */
.xpj__disc-d{ display:none; }
.xpj__disc{ margin:26px 0 0; display:flex; flex-direction:column; gap:12px; }
/* ⚠ 22px sub pista, nu 26px ca in card: pista isi are deja 2px de padding, iar
   restul de aer il da umbra cardului. Masurat la 1440px, cei 26px din card NU
   se ating: randarea de desktop a ramas identica pixel cu pixel. */
.xpj__disc-m .xpj__disc{ margin-top:22px; }
/* ⚠⚠ `.xpj__dline`, NU `.xpj__d`. `.xpj__d` era deja bulina din legenda
   (`width:11px;height:11px;flex:none`), asa ca paragrafele de disclaimer erau
   strivite la 11×11 si se suprapuneau. A DOUA coliziune interna din sectiunea
   asta, dupa `.xpj__t` (titlu + radio). De aici garda de mai jos. */
.xpj__dline{ display:flex; align-items:flex-start; gap:11px; margin:0;
  font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); }
.xpj__dline img{ flex:0 0 22px; margin-top:1px; opacity:.75; }
.xpj__dline a{ color:var(--xc-ink2); text-decoration:none; white-space:nowrap; font-weight:600; }
.xpj__dline a:hover{ color:var(--xc-ink); }

/* ══ DESKTOP ═══════════════════════════════════════════════════════════════
   ⚠⚠ PE DESKTOP NU E PISTA SI NU SE SCHIMBA NIMIC DIN CE ERA: o singura
      perioada vizibila, aleasa din taburi, cu banda in stanga si
      probabilitatile in dreapta, doua carduri alaturate cu 13px intre ele.
      Cerut explicit („swipe doar pe mobil"), si masurat inainte si dupa.

   ⚠⚠ AICI INFATISAREA DE CARD CHIAR SE MUTA de pe `.xpj__c` pe cele doua
      coloane - exact mutarea care a stricat tot la lotul 76. Atunci era
      periculoasa fiindca de fondul si raza lui `.xpj__c` atarnau regulile care
      lipeau cardurile. Acum de ele nu mai atarna NIMIC: lipirea nu mai exista,
      iar pliajul lucreaza pe `display`, nu pe raze. Daca vreodata se adauga
      ceva care depinde de rama lui `.xpj__c`, regula asta trebuie recitita.

   ⚠ `overflow:visible` pe pista e obligatoriu: altfel umbra cardurilor s-ar
     taia la marginea ei. */
@container mdsx (min-width:900px){
  .xpj{ scroll-margin-top:82px; }
  .xpj__top--m{ display:none; }
  .xpj__top--d{ display:block; }
  .xpj__ce{ display:none; }
  .xpj__disc-d{ display:block; }
  .xpj__disc-m{ display:none; }

  .xpj__g{ display:block; overflow:visible; margin:20px 0 0; padding:0; }
  .xpj__c{ display:none; flex:none;
    background:none; box-shadow:none; border-radius:0; padding:0;
    scroll-margin-top:82px; }
  #xpj-h180:checked ~ .xpj__g .xpj__c--h180,
  #xpj-h365:checked ~ .xpj__g .xpj__c--h365,
  #xpj-h1095:checked ~ .xpj__g .xpj__c--h1095,
  #xpj-h1825:checked ~ .xpj__g .xpj__c--h1825{ display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr)); gap:13px; }

  .xpj__a{ grid-column:span 4; }
  .xpj__b{ grid-column:span 2; }
  .xpj__a,
  .xpj__c .xpj__ck:checked ~ .xpj__b,
  .xpj__b{ display:block; margin-top:0; padding:29px 31px 31px;
    background:var(--xs-card); border-radius:var(--xr-c); box-shadow:var(--xe-lift); }
  /* ⚠ Butonul dispare: pe desktop cele doua coloane sunt mereu amandoua
     vizibile, deci n-are ce deschide sau inchide. */
  .xpj__pbt,
  .xpj__c .xpj__ck:checked ~ .xpj__pbt--o{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .xpj__g{ scroll-behavior:auto; }
}