/* ============================================================================
   40-crize.css · GRUPUL 4 · „Comportamentul in criza" · namespace `xcz`
   PREVIEW

   ⚠⚠ ZERO VALORI INVENTATE. Ancorele:
        20-grup2.css:82-99        titlu de sectiune, lede, card, titlu de card
        20-grup2.css:130-137      lista cu separator `--xsep`
        22-fair-value.css:68      cifra eroica clamp(30,…,44)
        22-fair-value.css:74-77   `.xfv__chip` — pastila
        24-proiectii.css:80-92    `.xpj__sc` / `.xpj__m` — pista si marcajele
        36-raportari.css          bento pe sase coloane
        38-riscuri.css            fereastra de ajutor, pur CSS
        verdict.css:345-357       `scroll-margin-top` 78 / 82px

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

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

/* ⚠⚠ TITLUL E ALB. Masurat pe randarea veche: `rgb(255,212,0)` la TSLA.US,
   fiindca banda porneste cu culoarea pragului. Culoarea trece pe pastila.
   ⚠ TITLUL NU E FLEX: pastila sta intr-un rand propriu dedesubt, deci
     `::first-letter` se aplica direct pe `<h3>`, fara `<span>` de ocolire. */
.xcz__t{ margin:0;
  font-size:var(--xt-3); font-weight:700;
  line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.xcz__t::first-letter{ text-transform:uppercase; }
/* invelisul pastilei · `.xfv__badge--h` (22-fair-value.css:71-73) */
.xcz__badge{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  margin:14px 0 0; }
.xcz__chip{ flex:none; display:inline-flex; align-items:baseline; gap:7px;
  padding:5px 12px; border-radius:var(--xr-p);
  background:color-mix(in srgb, var(--bc) 16%, transparent);
  color:var(--bc); font:600 var(--xt-7)/1.2 var(--xf); letter-spacing:0; }
.xcz__chip em{ font-style:normal; font-weight:500; font-size:var(--xt-8);
  color:color-mix(in srgb, var(--bc) 78%, var(--xc-ink)); }
.xcz__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink); }
.xcz__lede b{ color:var(--xc-ink); font-weight:600; }
.xcz__p{ margin:18px 0 0; font:400 var(--xf-sm)/1.6 var(--xf); color:var(--xc-ink2); }
.xcz__p b{ color:var(--xc-ink); font-weight:600; }
.xcz__n{ margin:12px 0 0; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); }

/* ══ BENTO · doua carduri ═══════════════════════════════════════════════════
   ⚠ `align-items:start`: cardul crizelor are patru-cinci randuri, cel al
     capturii doua; intinse la aceeasi inaltime, cel mic ar fi ramas gol. */
.xcz__bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  margin:22px 0 0; align-items:start; }
.xcz__bento > *{ grid-column:span 6; min-width:0; }

.xcz__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; }
.xcz__ct{ margin:0; font-weight:600;
  font-size:var(--xt-4); line-height:1.25;
  letter-spacing:-.012em; color:var(--xc-ink); }
/* ⚠ „Cat din scaderea pietei…", nu „cat": cheile `cz.k1` si `cz.rez` sunt scrise
   cu litera mica in catalog, fiindca in fraza veche veneau la mijloc de rand.
   Aici deschid un rand. Aceeasi corectie ca la „Ultimele 8 trimestre". */
.xcz__cs{ margin:8px 0 0; font:400 var(--xf-sm)/1.5 var(--xf); color:var(--xc-ink2); }
.xcz__cs::first-letter{ text-transform:uppercase; }

/* ── cifra eroica ──────────────────────────────────────────────────────────
   ⚠ Treapta e `.xfv__hero` (22-fair-value.css:68), aceeasi ca peste tot.
   ⚠ Culoarea vine din `--bc`, setat inline: la captura scaderii inseamna
     „amplifica / urmeaza / absoarbe", la rezilienta inseamna pragul. */
.xcz__hero{ margin:20px 0 0; }
.xcz__hk{ display:block; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xcz__hk::first-letter{ text-transform:uppercase; }
.xcz__hv{ display:block; margin-top:4px;
  font:700 var(--xt-1)/1 var(--xf);
  letter-spacing:-.022em; color:var(--bc, var(--xc-ink));
  font-variant-numeric:tabular-nums; }
/* ⚠ La cardul rezilientei eticheta vine DUPA cifra, nu inainte: acolo cifra e
   subiectul („53"), iar cuvantul o califica („Moderat"). La captura, invers. */
.xcz__hk.is-after{ margin-top:6px; color:var(--bc, var(--xc-ink2)); font-weight:600; }
.xcz__hd{ display:block; margin-top:8px; font:500 var(--xt-7)/1.4 var(--xf);
  color:var(--bc, var(--xc-ink3)); }

/* ── bara · actiunea fata de piata ─────────────────────────────────────────
   ⚠ Pista si marcajele sunt `.xpj__sc` / `.xpj__m` (24-proiectii.css:80-92):
     inaltimea `--xbar`, raza `--xr-p`, marcaj rotund de 16px centrat pe pista.
   ⚠ MARCAJUL PIETEI STA FIX LA MIJLOC, iar cel al actiunii se misca in jurul
     lui. Scara se opreste la 200%: peste atat marcajul ar iesi din bara, iar
     valoarea din legenda ramane cea reala. */
.xcz__bar{ position:relative; height:var(--xbar); margin:18px 0 0;
  border-radius:var(--xr-p); background:var(--xs-track); }
.xcz__bm,.xcz__bs{ position:absolute; top:50%; width:14px; height:14px;
  border-radius:50%; transform:translate(-50%,-50%); }
.xcz__bm{ background:var(--xs-card); box-shadow:0 0 0 2px var(--xc-ink3); }
.xcz__bs{ background:var(--bc, var(--xc-ink)); box-shadow:0 0 0 3px var(--xs-card); }
.xcz__leg{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:12px 0 0;
  font:400 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink3); }
.xcz__leg span{ display:inline-flex; align-items:center; gap:7px; }
.xcz__leg b{ color:var(--xc-ink2); font-weight:600; font-variant-numeric:tabular-nums; }
/* ⚠ ACELEASI BULINE CA PE BARA, doar scoase din pozitionare: in legenda stau in
   flux. Fara ele, doua marcaje pe bara si doua randuri de text sub ea nu se pot
   lega intre ele. Sunt cu doua puncte mai mici — sunt un reper, nu marcajul. */
.xcz__bm.is-leg,.xcz__bs.is-leg{ position:static; flex:none; width:12px; height:12px;
  transform:none; }
.xcz__bs.is-leg{ box-shadow:none; }

/* ── lista de randuri ──────────────────────────────────────────────────────
   ⚠ Separator `--xsep` intre randuri, ca la `.xan__leg` (20-grup2.css:133): un
     gradient de 1px care se stinge, nu o bordura care taie cardul in felii. */
.xcz__l{ list-style:none; margin:20px 0 0; padding:0; }
.xcz__r{ position:relative; display:block; padding:12px 0 0; }
.xcz__r + .xcz__r{ margin-top:12px; background:var(--xsep) no-repeat top/100% 1px; }
/* ⚠⚠ `gap`, NU `white-space`. `mds_x_et_i()` (x-dict.php:161) construieste
   eticheta ca `text + SPATIU + <span class="x-nw">ultimul-cuvant<i></i></span>`,
   ca iconita sa nu ramana singura pe randul urmator. Intr-un container FLEX,
   nodul de text format doar din spatiu E ARUNCAT — asa iesea „a cazut mult
   maimult" si „a rezistatmoderat".
   `gap` pune inapoi exact spatiul pierdut, si il pune INTRE ELEMENTE, deci nu
   depinde de cum e scris marcajul. Masurat: 105 aparitii pe pagina, 103 la
   `.xfn__q` si 2 la `.xcz__rl`.
   ⚠ 0.28em, nu o valoare in px: spatiul trebuie sa creasca odata cu litera, ca
     sa arate la fel la orice corp. */
.xcz__rl{ display:inline-flex; align-items:center; gap:.28em;
  font:500 var(--xf-sm)/1.35 var(--xf); color:var(--xc-ink); }
.xcz__rv{ float:right; margin-left:14px; font:600 var(--xf-sm)/1.35 var(--xf);
  font-variant-numeric:tabular-nums; }
.xcz__rn{ display:block; margin-top:4px; font:400 var(--xt-7)/1.4 var(--xf);
  font-style:normal; color:var(--xc-ink3); }

/* ── fereastra de ajutor · pur CSS, tiparul de la grupul 4 ─────────────────
   ⚠ `name` si `id` poarta `uid`-ul per activ, deci CSS-ul nu se leaga de niciun
     id (R7). Radioul „niciunul" inchide fereastra deschisa.
   ⚠⚠ CLASA E `xcz__rt`, NU `xcz__t`: `xcz__t` e TITLUL DE SECTIUNE. Am facut
      greseala asta de trei ori (`xaf__t`, `xrs__t`); acum o scriu inainte. */
.xcz__rt{ position:absolute; opacity:0; pointer-events:none; }
.xcz__lb{ display:block; cursor:pointer; }
.xcz__x{ display:none; }
.xcz__tip{ display:none; }
.xcz__rt:checked ~ .xcz__x{ display:block; position:fixed; inset:0; z-index:8; }
.xcz__rt:checked ~ .xcz__tip{ display:block; position:relative; z-index:9;
  margin:10px 0 2px; padding:13px 14px; border-radius:14px;
  background:var(--xs-inset); font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); }
.xcz__tip b{ display:block; margin-bottom:5px; color:var(--xc-ink); font-weight:600; }
.xcz__i{ display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; flex:none; margin-left:6px; border-radius:50%;
  background:var(--xs-track); color:var(--xc-ink3);
  font:700 10px/1 var(--xf); font-style:normal; }
.xcz__i::before{ content:"i"; }
.xcz__rt:checked ~ .xcz__lb .xcz__i{ background:var(--xc-ink); color:var(--xc-bg); }

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

/* ══ DESKTOP · pragul temei, pe CONTAINER (20-grup2.css:207) ══ */
@container mdsx (min-width:900px){
  .xcz__card{ border-radius:var(--xr-c); padding:29px 31px 31px; scroll-margin-top:82px; }
  .xcz__bento{ gap:13px; }
  .xcz__bento > *{ grid-column:span 3; }
  /* ⚠ Cand e singur, ia tot randul: la o companie fara captura masurata, cardul
     crizelor ar fi stat pe 3/6 cu jumatate de rand goala langa el. */
  .xcz__bento:has(> :only-child) > *{ grid-column:span 6; }
}