/* ============================================================================
   x-argumente.css · „Argumente pro și contra" · namespace `xar`
   Generat de `fac_ar.py` la 2026-09-12 19:36:15. NU se editeaza de mana.

   ⚠ TOATE argumentele si TOATE etichetele vin din compunerea TEMEI
     (`mds_ba_argumente`, `mds_anz_ai_arguments`, `mds_anz_impleteste`), nu se
     recompun aici. Locurile 2 si 4 raman ale AI-ului, ca in tema.
   ⚠ R23-R26 din REGULI.md: titlu de sectiune 26→34, text de sprijin `--xf-sm`,
     culori numai din treptele temei.
   ============================================================================ */

/* ⚠ Spatiul dintre cardul de verdict si titlul sectiunii sta pe BANDA, nu pe
   `.xar`: banda incepe cu titlul, iar `.xar` e doar corpul de sub el.
   Cu marginea aici, titlul ramanea lipit de marginea de jos a cardului. */
.xar{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em; }
.xar *{ box-sizing:border-box; border:0; }
/* ⚠ CASETA E ANCORATA LA BAZA CARDULUI. In flux ar sta INTRE primele trei
   argumente si rest, adica sus in card; apasarea etichetei muta focalizarea pe
   ea, iar Safari aduce elementul focalizat in ecran - deci pagina s-ar fi
   miscat singura inainte ca `mds-xdp.js` sa decida unde se ajunge. Cu
   `bottom:0` nu misca nimic. Vezi nota de la pliaj, mai jos. */
.xar__r{ position:absolute; left:0; bottom:0; width:1px; height:1px;
  opacity:0; pointer-events:none; scroll-margin-block:120px; }
.xar__t{ margin:0; font-size:var(--xt-3); font-weight:700; line-height:1.15;
  letter-spacing:-.022em; }
.xar__t::first-letter{ text-transform:uppercase; }
.xar__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf); letter-spacing:-.006em;
  color:var(--xc-ink); }

/* ── comutatorul Pro / Contra, pe mobil ───────────────────────────────────
   ⚠ Coloanele au lungimi foarte diferite - pe cele sapte de referinta merg de
     la 1 la 9 argumente. Stivuite pe mobil, cea scurta ar parea o greseala
     langa cea lunga. Comutatorul le pune fata in fata. */
.mdsx .xar__tabs{ display:flex; gap:6px; margin:22px 0 0; padding:4px;
  border-radius:var(--xr-p); background:var(--xs-track); width:fit-content;
  max-width:100%; grid-template-columns:none; }
/* ⚠⚠ (0,3,0), NU (0,1,0). Tabul poarta si clasa `facts__tab`, ceruta de
   `mds-facts.js` - iar tema are `.mdsx .facts__tab` (0,2,0) cu ALT design:
   `padding:8px 6px`, `font:600 13px`, `border-radius:8px`, `text-align:center`.
   Cat timp tabul era `<label class="xar__tab">`, regula (0,1,0) ajungea. In clipa
   in care a primit `facts__tab` pentru script, tema a luat conducerea si taburile
   s-au facut mai mici si patrate. A CINCEA oara aceeasi capcana in proiect.
   ⚠ `appearance:none` si `background:none`: elementul e acum `<button>`, iar
     fundalul implicit al browserului (gri deschis) se vedea pe tabul inactiv. */
/* ⚠ 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. */
.mdsx .xar__tabs .xar__tab{ display:flex; align-items:center; gap:8px; padding:9px 18px;
  border-radius:var(--xr-p); font:600 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink3);
  cursor:pointer; white-space:nowrap; text-align:left;
  appearance:none; -webkit-appearance:none; background:none; border:0; }
.mdsx .xar__tabs .xar__tab b{ font:600 var(--xt-8)/1 var(--xf); color:var(--xc-ink4); }
.mdsx .xar__tabs .xar__tab:hover{ color:var(--xc-ink); }
/* ⚠⚠ SELECTORI PE SUFIX DE ID. Blocul de productie genereaza un `uid` stabil
   per activ (`xa6acb4-pro`), ca doua sectiuni in aceeasi pagina sa nu-si incurce
   comutatoarele. Un selector cu id fix prindea in preview si NU prindea nimic in
   productie: coloana ramanea ascunsa pe mobil. Masurat. */
/* ⚠ Starea activa e `.is-on`, pusa de `mds-facts.js`. Selectorii pe radio au
   disparut odata cu radio-urile. Tabul 1 e Pro, tabul 2 e Contra. */
.mdsx .xar__tabs .xar__tab.is-on{ background:var(--xs-card); color:var(--xc-ink); }
.mdsx .xar__tabs .xar__tab:nth-child(1).is-on b{ color:var(--xc-lime); }
.mdsx .xar__tabs .xar__tab:nth-child(2).is-on b{ color:var(--xc-pink); }

/* ── pista: SWIPE pe mobil, fara al doilea card vizibil ────────────────────
   ⚠ Mecanica vine de la TEMA (`mds-design.css:653-655`), ca la „Sumar date":
     `display:flex`, `overflow-x:auto`, `scroll-snap-type:x mandatory`, bara
     ascunsa, coloanele `flex:0 0 100%` cu `scroll-snap-align:center`.
   ⚠⚠ AICI COLOANA E 100%, NU 88% ca la „Sumar date". Acolo al doilea card se
     vede putin dinadins - sunt trei si peek-ul spune ca mai urmeaza. Aici sunt
     doua si exista taburi deasupra, deci peek-ul ar arata doar un card taiat.
     `gap` 0 si fara margini negative, din acelasi motiv. */
/* ⚠⚠ `gap` = gutiera containerului (20px). Coloana e 100% din pista, care e
   ingustata cu gutiera de fiecare parte - deci fara gap, al doilea card ar
   incepe exact cu 20px inainte de marginea ecranului si s-ar vedea. Cu gap egal
   cu gutiera, incepe FIX la marginea ecranului. Masurat: 370px → 390px. */
.mdsx .xar__g{ display:flex; gap:20px; margin:14px 0 0; padding:2px 0; }
/* ⚠ Fara muchia de 1px din `--xe-lift` - vezi nota din `10-antet-date.css`. */
/* ⚠ `position:relative` e blocul de referinta pentru `.xar__r` (linia 17).
   Nu schimba nimic vizual: singurul element pozitionat din card e caseta. */
/* ⚠⚠ `scroll-margin-top` LIPSEA SI AICI, acelasi defect ca la `.xin__c`: la
      inchiderea listei „Arata mai putine", `mds-xdp.js` aduce cardul in ecran,
      iar fara marja varful lui se aseaza la 0px - adica sub antetul lipit al
      temei. Masurat inainte de reparatie, la 390px si la 1440px: marja 0px,
      varf 0px. 78/82px e conventia temei (`verdict.css:345-357`). */
.mdsx .xar__c{ min-width:0; flex:0 0 100%; scroll-snap-align:center; display:block;
  position:relative;
  background:var(--xs-card); border-radius:20px; padding:20px 20px 22px;
  box-shadow:0 22px 48px -28px rgba(0,0,0,1); scroll-margin-top:78px; }

/* ── antetul coloanei ── */
.xar__hd{ display:flex; align-items:baseline; gap:12px; margin:0 0 4px;
  padding-bottom:14px; background:var(--xsep) no-repeat bottom/100% 1px; }
/* ⚠ Culoarea coloanei sta in ETICHETA, nu in fundalul cardului: doua carduri
   colorate, unul verde si unul rosu, ar trage ochiul inaintea textului - iar
   textul e lucrul care conteaza aici. */
/* ⚠⚠ CERUT: exact cat `.xin__n` de la Indicatoare, doar cu culorile ei.
      Masurat inainte: marimea si grosimea erau DEJA aceleasi (20px/600 pe
      mobil, 21,5px/600 pe desktop, amandoua din `--xt-4`). Singura diferenta
      era inaltimea randului, 1,2 fata de 1,25. Acum sunt identice declaratie cu
      declaratie, in afara de `color`, care ramane `--ac` (verde la Pro, rosu la
      Contra). */
.xar__lb{ font-weight:600; font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; color:var(--ac); }
.xar__n{ margin-left:auto; font:400 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink4); }

/* ── argumentele ── */
.xar__l{ list-style:none; margin:0; padding:0; }
.xar__i{ display:flex; align-items:flex-start; gap:13px; padding:16px 0; }
.xar__i + .xar__i{ background:var(--xsep) no-repeat top/100% 1px; }
/* ⚠ Pictograma e un emoji venit din banca (`ico`), nu o pictograma desenata.
   Cercul ii da o cutie stabila, ca randurile sa nu danseze cand emoji-urile au
   latimi diferite. */
.xar__ico{ flex:none; width:34px; height:34px; display:flex; align-items:center;
  justify-content:center; border-radius:50%; background:var(--xs-inset);
  font-style:normal; font-size:var(--xt-6); line-height:1; }
/* ⚠ Punctul neutru cand banca n-a dat emoji: pastreaza alinierea fara sa
   sugereze un simbol care nu exista. */
.xar__ico--gol::before{ content:""; width:7px; height:7px; border-radius:50%;
  background:var(--xc-ink4); }
.xar__tx{ min-width:0; }
.xar__tx b{ display:block; font:600 var(--xf-sm)/1.5 var(--xf); letter-spacing:-.006em;
  color:var(--xc-ink); }
.xar__tx em{ display:block; margin-top:5px; font:400 var(--xt-7)/1.55 var(--xf);
  font-style:normal; color:var(--xc-ink3); }
/* ⚠ Eticheta „AI", pe argumentele SCRISE, nu pe cele calculate. Ghidul cere
   marcarea textelor AI (D0-MAR), iar `mds_anz_impleteste()` le amesteca fara sa
   lase nicio urma a sursei. Sta in linie cu titlul, discreta: nu e un
   avertisment, e o precizare. */
.xar__ai{ display:inline-block; margin-left:7px; padding:2px 7px; border-radius:var(--xr-p);
  background:var(--xs-track); font:600 var(--xt-8)/1.35 var(--xf); letter-spacing:.04em;
  color:var(--xc-ink4); vertical-align:1px; }
.xar__src{ color:var(--xc-ink2); font-weight:600; text-decoration:none;
  white-space:nowrap; }
.xar__src:hover{ color:var(--xc-ink); }

/* ── pliajul: primele trei raman, restul se deschid ── */

/* ⚠⚠ REVENIREA LA CARD DUPA INCHIDERE · CA RESTUL PAGINII, nu invers.
   Aici a fost o vreme exceptia paginii: pliajul tinea pozitia pe loc, dinadins.
   Venea dintr-o citire gresita a cerintei - „ramane mai jos in pagina, nu
   revine inapoi sus la cardul inchis" descria DEFECTUL, nu ce se voia. Acum
   face ce face tot restul: la „Arata mai putine", cardul strans revine in
   ecran. Mecanismul e in `mds-xdp.js`, care asculta si `.xar__r`.

   ⚠ `overflow-anchor:none` pe randurile care dispar RAMANE, si acum are alt
     rost: fara el, browserul se agata de un rand care tocmai se ascunde si
     muta pagina cu cateva sute de pixeli inainte ca scriptul sa apuce sa
     deruleze - adica un salt in plus, vizibil, urmat de corectie.

   ⚠ `.xar__r` ancorata la `bottom:0` (linia 17) ramane si ea: pe Safari,
     apasarea etichetei muta focalizarea pe caseta si browserul o aduce in
     ecran. Ancorata sus in card, ar fi tras pagina inainte ca scriptul sa
     decida; la baza cardului, nu misca nimic si scriptul ramane singurul care
     hotaraste unde se ajunge. */
.xar__l--rest{ display:none; overflow-anchor:none; }
/* ⚠ Pliajul foloseste `-m-pro` / `-m-con`, ca sufixul lui sa nu se confunde cu
   al comutatorului de coloana. */
[id$="-m-pro"]:checked ~ .xar__l--rest,
[id$="-m-con"]:checked ~ .xar__l--rest{ display:block;
  background:var(--xsep) no-repeat top/100% 1px; }
.xar__more{ display:flex; align-items:center; justify-content:center; 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; }
.xar__more:hover{ background:var(--xs-track); }
.xar__more-b{ display:none; }
[id$="-m-pro"]:checked ~ .xar__more .xar__more-a,
[id$="-m-con"]:checked ~ .xar__more .xar__more-a{ display:none; }
[id$="-m-pro"]:checked ~ .xar__more .xar__more-b,
[id$="-m-con"]:checked ~ .xar__more .xar__more-b{ display:inline; }

@container mdsx (min-width:900px){
  /* ⚠ Toate la (0,3,0), peste `mds-design.css:713-717`, care face pista o grila
     de TREI cu `gap:0`, `padding:18px 30px 0` si un chenar in stanga. */
  .mdsx .xar__tabs{ display:none; }
  .mdsx .xar__g{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px; margin:20px 0 0; padding:0; overflow:visible; align-items:start; }
  .mdsx .xar__c{ flex:none; display:block; border-radius:var(--xr-c);
    padding:29px 31px 31px; border-left:0; scroll-margin-top:82px; }
}

/* ══ AȘEZAREA BENZII, doar pentru `#argumente` ═════════════════════════════
   ⚠⚠ Blocul `sectiune` NU se atinge: are 8 consumatori in tema. Se corecteaza
      doar ASEZAREA lui, si numai pe secțiunea asta.
   ⚠ Pe desktop, `.mdsx .band` e o grila `minmax(0,240px) minmax(0,1fr)` cu
     titlul lipicios in coloana 1 (`mds-design.css:481-493`). Costul e scris in
     tema, la `ARG-2`: fiecare coloana de argumente primeste
     `(latime − 288) / 2`, adica ~356px pe o coloana de 1000px in loc de ~500px.
     Cu argumente de 20-40 de cuvinte inseamna cinci randuri in loc de trei.
   ⚠ Aici banda redevine o singura coloana, cu titlul deasupra - ca toate
     celelalte sectiuni refacute. Argumentele recapata latimea intreaga.
   ⚠ `.mdsx #argumente.band` e (0,2,1), deci bate (0,2,0) al temei indiferent de
     ordinea de tiparire. */
/* ⚠ 56px, aceeasi distanta ca intre „Sumar date" si cardul de verdict. */
/* ⚠⚠ `overflow-x:clip` OPRESTE DERULAREA ORIZONTALA A PAGINII.
   Pista are `overflow-x:auto` si se deruleaza singura, dar extinderea ei (700px)
   se propaga in `scrollWidth`-ul benzii, iar pagina capata 17px de derulare
   orizontala pe mobil. Masurat, si nu s-a reparat nici cu `overflow:hidden` pe
   `.xar`, nici cu `max-width`. `clip` opreste propagarea FARA sa creeze un al
   doilea container de derulare - `hidden` ar fi creat unul, si asta era problema.
   Verificat: derularea paginii 17px → 0, iar pista tot se deruleaza. */
/* ⚠⚠ PADDING-UL DE JOS E ACUM ZERO, si e o RASTURNARE a notei de mai devreme.
   Nota veche spunea sa se pastreze (28px mobil / 40px desktop, cifrele temei
   din `mds-design.css:195` si `:481`), fiindca sub banda statea antetul
   grupului „Valoarea & Evaluare" si fara ele ramanea lipit.
   Nu mai sta: mutarea Argumentelor sub Sumar date pune dedesubt cardul de
   Verdict, care isi aduce singur distanta din `--xsp-sec`. Cu padding-ul pe
   loc, Argumente → Verdict ar fi iesit 39+40 = 79px, adica de doua ori cat
   restul paginii - exact neregularitatea pe care punctul 7 o repara.
   Distanta deasupra antetului de grup sta acum pe `.xgh` (`20-grup2.css`).
   ⚠ Pe laterale ramane tot zero: padding-ul ar reduce latimea coloanelor. */
.mdsx #argumente.band{ margin:var(--xsp-sec,39px) 0 0; padding:0; border-top:0;
  overflow-x:clip; }
/* ⚠ `.band::before` e deja `display:none` in tema (`01-blocuri.css:102`).
   Linia de accent a fost MUTATA pe `.dek::after` (`01-blocuri.css:106`), ca
   spatiul sa stea pe banda si sa nu depinda de ce urmeaza. E marcajul de
   sectiune, acelasi pe toate sectiunile - se PASTREAZA. */
.mdsx #argumente.band::before{ display:none; }
/* ⚠ `.mdsx .ch` are `border-bottom:1px solid var(--line)` (`mds-design.css:415`)
   si `display:flex`. Aici devine bloc, fara linie: titlul si subtitlul stau unul
   sub altul, ca la toate celelalte sectiuni refacute. */
.mdsx #argumente .ch{ display:block; position:static; padding:0; border-bottom:0; }
/* ⚠⚠ CULOAREA. `.mdsx .ch__t` (`mds-design.css:417`) ia `color:var(--c)`, adica
   culoarea benzii - iar banda de argumente e pornita cu `var(--lime)`, deci
   titlul iesea VERDE. In restul sectiunilor refacute titlurile sunt albe, iar
   verdele ar sugera ca titlul e „pro". Masurat pe captura, nu presupus. */
.mdsx #argumente .ch__t{ margin:0; font-size:var(--xt-3);
  font-weight:700; line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.mdsx #argumente .dek,.mdsx #argumente p.dek{ margin:14px 0 0;
  font:400 var(--xf-sm)/1.55 var(--xf); letter-spacing:-.006em; color:var(--xc-ink); }
/* ⚠⚠ LINIA VERDE DE SUB SUBTITLU, SCOASA.
   E marcajul de sectiune al temei: `01-blocuri.css:106` l-a mutat de pe
   `.band::before` pe `.dek::after`, ca spatiul sa stea pe banda.
   ⚠ Am spus initial ca se pastreaza, fiindca „e acelasi pe toate sectiunile".
     GRESIT: e acelasi pe toate sectiunile TEMEI, dar niciuna dintre cele
     refacute nu mai foloseste `.band` - antetul si „Sumar date" sunt marcaj
     propriu. Masurat: linia apare DOAR aici, 240px verde, si iese in evidenta
     tocmai fiindca nicaieri altundeva nu exista. */
.mdsx #argumente .dek::after,
.mdsx #argumente p.dek::after{ display:none; content:none; }

@container mdsx (min-width:900px){
  .mdsx #argumente.band{ display:block; padding:0; }
  .mdsx #argumente .ch{ grid-column:auto; grid-row:auto; position:static;
    display:block; top:auto; }
  .mdsx #argumente .band>*:not(.ch),
  .mdsx #argumente .xar{ grid-column:auto; }
}

/* ══ RAZA CARDULUI · 20 → 28px pe mobil ════════════════════════════════════
   ⚠ MASURAT pe pagina randata la 390px, nu dedus din CSS: toate celelalte
     carduri ale paginii sunt la 28px (`.xrz__card`, `.xan__c`, `.xct__card`,
     `.xpf__card`, `.xpm__card`, `.cd`), iar `.xar__c` era singurul la 20px.
     Pe desktop era deja `--xr-c` (31px), deci corect - se schimba doar mobilul.
   ⚠⚠ REGULA E IN `@container ... (max-width:899px)`, NU LIBERA. Pusa libera la
      coada fisierului, batea si blocul de desktop de la linia 168 (aceeasi
      specificitate 0,2,0, dar mai jos in fisier) si ducea cardul de la 31px la
      28px si pe desktop. Masurat pe pagina randata: 28px la 1440, unde trebuie
      31. Legata de latime, atinge exact ce trebuie. */
@container mdsx (max-width:899px){
  .mdsx .xar__c{ border-radius:28px; }
}

/* ⚠⚠ BANDA DE AURA DE SUB TITLU A FOST SCOASA (cerut). Era un gradient de
      2px care trecea o data la intrarea in ecran, aprins de un
      `IntersectionObserver` din `blocks/x-argumente.php`. Au plecat toate
      trei: regula, `@keyframes xarBanda` si exceptia pentru
      `prefers-reduced-motion`. Marcajul si scriptul au plecat odata cu ele,
      deci nu ramane niciun element mort in pagina. */