/* ═══════════════════════════════════════════════════════════════════════════
   Date financiare.   FIN-LOT1

   ⚠ FARA MARCAJUL DE SCARA STRICTA, si scrie de ce.

     Fisierul foloseste unsprezece valori care nu sunt pe scara `.mdsx`:
       3, 5, 6, 7, 9, 9.5, 10, 10.5, 11.5, 14, 192

     Toate vin din demo-ul aprobat (`situatii-financiare-mobil.html`), care are
     propria lui scara, mai fina, potrivita unui tabel dens. `--s-2` e 8px si
     `--s-4` e 16px; intre ele nu exista nimic, iar un tabel cu padding de 8 e
     inghesuit si cu 16 e rasfirat. La fel la tipografie: scara are 12.5 si 13,
     dar eticheta unui reper are nevoie de 10.5 ca sa incapa pe doua randuri.

     Fortarea lor pe scara ar schimba exact aspectul pe care l-ai aprobat.
     Precedent in tema: `valoare-justa.css`, `tooltip.css`, `verdict.css` si
     `culoare-neutra.css` sunt tot fara marcaj, din acelasi motiv.

   ⚠ Numele marcajului NU se scrie aici cu cratima: garda il cauta ca sir in
     fisier, deci pana si o mentiune intr-un comentariu il face sa creada ca
     fisierul e marcat. Prins la rulare.

     `192px` e latimea minima a coloanei fixe, masurata pe cel mai lung nume de
     rand („Alte elemente ale rezultatului global"). Nu e o valoare de scara, e
     o constrangere de continut.

   ⚠ COMUTAREA E DIN `:has()`, fara JavaScript. Trei grupuri de `input` la
     inceputul sectiunii: situatie (`fs-*`), perioada (`fp-*`), format (`fm-*`),
     plus bifa de detalii (`fd`). Fiecare combinatie are regula ei.

   ⚠ TOATE `input`-urile sunt `position:fixed; top:0; left:0`. Un `radio` de
     0x0 lasat la pozitia lui statica face browserul sa deruleze pagina cand
     eticheta ii muta focusul. Reparat o data la cardurile din Profitabilitate;
     nu se repeta.

   ⚠ FARA `content-visibility` pe panouri. Am incercat-o ca optimizare si am
     ascuns tabelul: panourile ascunse sunt deja `display:none`, deci n-avea ce
     optimiza, iar regula de afisare suprascrie `display` dar NU si
     `content-visibility`, deci panoul vizibil ramanea cu ea si se randa ca o
     cutie goala cat era in afara ecranului.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DOUA MARIMI, AMANDOUA IMPUSE, NU MASURATE ─────────────────────────────
   `--fin-sus`  cat de jos incepe zona lipita. Headerul mobil al temei e
                `position:sticky; top:0; z-index:40`, inalt de 56px
                (`mds-metrics.css:9`, tokenul `--mds-hdr-m`). Fara asta, bara
                de comutatoare dispare in spatele logo-ului si al meniului.
                Pe desktop headerul nu e lipit, deci 0.
   `--fin-ctrl` inaltimea barei. Nu o masor: i-o IMPUN cu `height`, mai jos.
                Prima versiune o ghicea la 88px pe mobil, iar cand bara iesea
                pe doua randuri randul cu anii intra peste tabel. O valoare
                impusa nu poate sa nu se potriveasca. */
.mdsx .fin{ margin-top:var(--s-6); --fin-sus:0px; --fin-ctrl:84px; }
.mdsx .fin__r{ position:fixed; top:0; left:0; width:0; height:0; opacity:0; pointer-events:none; }

.mdsx .fin__ctrl{ position:sticky; top:var(--fin-sus); z-index:8; margin:0 calc(-1 * var(--s-5));
  padding:0 var(--s-5); background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(16px); }
/* ⚠ DOUA RANDURI PE ORICE LATIME: taburile sus, comutatoarele dedesubt.
     Inaltimile sunt IMPUSE (44 + 40), deci `--fin-ctrl` e adevarat prin
     constructie, nu masurat. */
.mdsx .fin__bar{ display:flex; flex-direction:column; align-items:stretch; gap:0;
  height:var(--fin-ctrl); box-sizing:border-box;
  border-bottom:1px solid var(--line); }
.mdsx .fin__tabs{ display:flex; height:44px; align-items:flex-end; gap:var(--s-6);
  overflow-x:auto; scrollbar-width:none; }
.mdsx .fin__tabs::-webkit-scrollbar{ display:none; }
.mdsx .fin__tab{ flex:none; padding:15px 0 13px; border-bottom:2px solid transparent;
  font:600 var(--f-lead)/1 var(--h); letter-spacing:-.015em; color:var(--ink-2); cursor:pointer;
  white-space:nowrap; margin-bottom:-1px; }
.mdsx .fin__tab:hover{ color:var(--ink); border-bottom-color:var(--line); }
.mdsx .fin__right{ display:flex; height:40px; align-items:center;
  justify-content:flex-start; gap:var(--s-5); border-top:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; }
.mdsx .fin__right::-webkit-scrollbar{ display:none; }
.mdsx .fin__pers{ display:flex; gap:0; padding:3px; border-radius:99px;
  background:rgba(255,255,255,.05); }
.mdsx .fin__per{ padding:6px 13px; border-radius:99px; font:500 var(--f-fin)/1 var(--b);
  color:var(--ink-2); cursor:pointer; }
.mdsx .fin__per:hover{ color:var(--ink); }
.mdsx .fin__det{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font:500 var(--f-fin)/1 var(--b); color:var(--ink-2); white-space:nowrap; }
.mdsx .fin__box{ width:13px; height:13px; border:1px solid var(--line); border-radius:4px; }

.mdsx .fin__pan{display:none}
.mdsx .fin:has(#fs-is:checked) .fin__tab:nth-child(1){color:var(--ink);border-bottom-color:var(--c)}
.mdsx .fin:has(#fs-bs:checked) .fin__tab:nth-child(2){color:var(--ink);border-bottom-color:var(--c)}
.mdsx .fin:has(#fs-cf:checked) .fin__tab:nth-child(3){color:var(--ink);border-bottom-color:var(--c)}
.mdsx .fin:has(#fp-a:checked) .fin__pers:not(.fin__fmt) .fin__per:nth-child(1){background:rgba(255,255,255,.11);color:var(--ink)}
.mdsx .fin:has(#fp-t:checked) .fin__pers:not(.fin__fmt) .fin__per:nth-child(2){background:rgba(255,255,255,.11);color:var(--ink)}
.mdsx .fin:has(#fm-v:checked) .fin__fmt .fin__per:nth-child(1){background:rgba(255,255,255,.11);color:var(--ink)}
.mdsx .fin:has(#fm-p:checked) .fin__fmt .fin__per:nth-child(2){background:rgba(255,255,255,.11);color:var(--ink)}
.mdsx .fin:has(#fd:checked) .fin__box{background:var(--c);border-color:var(--c)}
.mdsx .fin:has(#fd:checked) .fin__det{color:var(--ink-2)}
.mdsx .fin:has(#fd:checked) .fin__tbl tr.lv2{display:table-row}
.mdsx .fin:has(#fm-p:checked) .fin__va{display:none}
.mdsx .fin:has(#fm-p:checked) .fin__vp{display:inline}
.mdsx .fin:has(#fs-is:checked):has(#fp-a:checked) .fin__pan--isa{display:block}
.mdsx .fin:has(#fs-is:checked):has(#fp-t:checked) .fin__pan--ist{display:block}
.mdsx .fin:has(#fs-bs:checked):has(#fp-a:checked) .fin__pan--bsa{display:block}
.mdsx .fin:has(#fs-bs:checked):has(#fp-t:checked) .fin__pan--bst{display:block}
.mdsx .fin:has(#fs-cf:checked):has(#fp-a:checked) .fin__pan--cfa{display:block}
.mdsx .fin:has(#fs-cf:checked):has(#fp-t:checked) .fin__pan--cft{display:block}

/* ⚠ DERULARE LATERALA, SI ATAT. Fara inaltime marginita, deci pe verticala
     deruleaza PAGINA: cardurile pleaca in sus odata cu restul, cum trebuie.
     Coloana cu denumiri e `sticky left`, deci ea nu se misca lateral.
   ⚠ ANTETUL DIN TABEL NU SE LIPESTE si nici nu incearca: `overflow-x:auto`
     face containerul scrollport, deci `sticky` s-ar raporta la el si ar
     ateriza in mijlocul tabelului. Lipirea o face banda separata de mai jos,
     desenata de `mds-financiare.js`. */
.mdsx .fin__sc{ margin:0 calc(-1 * var(--s-5)); overflow-x:auto;
  -webkit-overflow-scrolling:touch; }
.mdsx .fin__tbl{ border-collapse:collapse; width:max-content; min-width:100%;
  font-variant-numeric:tabular-nums; }
.mdsx .fin__tbl th,.mdsx .fin__tbl td{ padding:0; font-weight:400; }
/* ⚠ ANTETUL SE LIPESTE SUB BARA DE COMUTATOARE. Un tabel de patruzeci de
     randuri se citeste degeaba daca anii au iesit din ecran: nu mai stii ce
     coloana privesti. `top` e exact inaltimea barei, altfel randul ori intra
     sub ea, ori lasa o dunga de fundal intre ele.
   ⚠ FUNDAL OPAC OBLIGATORIU: sub el aluneca cifrele. */
.mdsx .fin__tbl thead th{ background:var(--mdsx-bg);
  /* 10,5px: aceeasi eticheta mica, `mds-design.css:415` */
  padding:16px 14px 9px; font:500 10.5px/1 var(--b);
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink);
  text-align:right; white-space:nowrap;
  box-shadow:0 1px 0 var(--line); }
/* ⚠ Regula pentru coloana recenta a fost STEARSA. Cand antetul era pe
     `--ink-3`, ea il ridica la `--ink-2` ca sa iasa in evidenta. Acum tot randul
     e pe `--ink`, deci aceeasi regula l-ar fi facut pe cel recent MAI STINS
     decat vecinii lui: exact pe dos. Coloana recenta se recunoaste oricum dupa
     sageata si dupa bara plina din card. */
/* ⚠ FUNDAL OPAC, NU `var(--bg)`. Banda are propriul fundal, iar `--bg` e
     tokenul paginii: pe mobil, unde coloana chiar se suprapune peste cifre,
     diferenta se vedea ca text peste text. `--mdsx-bg` e culoarea reala a
     fundalului paginii; peste ea pun aceeasi tenta ca banda, ca sa nu existe
     nicio nuanta intre coloana fixa si restul tabelului. */
/* coltul: lipit si sus, si la stanga, deci deasupra amandurora */
.mdsx .fin__tbl thead th:first-child{ position:sticky; left:0; z-index:6;
  background:var(--mdsx-bg);
  text-align:left; padding-left:var(--s-5); min-width:192px; }
.mdsx .fin__tbl tbody th{ position:sticky; left:0; z-index:2; background:var(--mdsx-bg);
  padding:10px 14px 10px var(--s-5); text-align:left; font-size:var(--f-mic); line-height:1.35;
  color:var(--ink-2); }
.mdsx .fin__tbl td{ padding:10px 14px; text-align:right; font:400 var(--f-mic)/1.3 var(--m);
  letter-spacing:-.04em; color:var(--ink-2); white-space:nowrap; }
.mdsx .fin__tbl td:last-child{ padding-right:var(--s-5); }
/* ⚠ LA HOVER, COLOANA FIXA PRIMESTE FUNDAL COMPUS, nu semitransparent peste
     nimic: altfel cifrele care aluneca pe dedesubt se vad prin ea. */
.mdsx .fin__tbl tbody tr:hover td{ background:rgba(255,255,255,.028); }
.mdsx .fin__tbl tbody tr:hover th{
  background:color-mix(in srgb, #fff 2.8%, var(--mdsx-bg)); }

/* ierarhia o face tipografia, nu culoarea */
.mdsx .fin__tbl tr.lv0 th{ color:var(--ink); font-weight:600; }
.mdsx .fin__tbl tr.lv0 td{ color:var(--ink); }
.mdsx .fin__tbl tr.lv0 th,.mdsx .fin__tbl tr.lv0 td{ border-top:1px solid rgba(255,255,255,.13); }
.mdsx .fin__tbl tr.lv1 th,.mdsx .fin__tbl tr.lv1 td{ border-top:1px solid var(--line); }
/* ⚠ `--s-8`, nu `--s-9`. Scara are 1-8, 10 si 12; `--s-9` nu exista, deci
     `var(--s-9)` invalida declaratia intreaga si indentarea nivelului trei
     disparea tacut pe desktop. R3. */
.mdsx .fin__tbl tr.lv2 th{ padding-left:var(--s-8); color:var(--ink-3); font-size:var(--f-nota); }
.mdsx .fin__tbl tr.lv2 td{ color:var(--ink-3); font-size:var(--f-nota); }
.mdsx .fin__tbl td.is-neg{ color:var(--pink); }
.mdsx .fin__tbl tr.lv2 td.is-neg{ color:color-mix(in srgb, var(--pink) 70%, transparent); }
.mdsx .fin__z{ font-style:normal; color:var(--ink-3); opacity:.35; }

/* singura culoare din tabel: directia */
.mdsx .fin__ar{ margin-right:6px; vertical-align:1px; }
.mdsx .fin__ar.is-up{ color:var(--lime); }
.mdsx .fin__ar.is-dn{ color:var(--pink); }
.mdsx .fin__gol{ color:var(--ink-3); }
/* forma afisata: sume sau procente. Ambele sunt in marcaj, se vede una. */
.mdsx .fin__vp{ display:none; }
/* randurile derivate: calculate din doua randuri de deasupra, nu raportate */
.mdsx .fin__tbl tr.fin__der th{ font-style:italic; color:var(--ink-3); }
.mdsx .fin__tbl tr.fin__der td{ color:var(--ink-3); }
.mdsx .fin__tbl tr.fin__der th::before{ content:"= "; opacity:.5; }
/* titlu de tabel, doar pentru cititoarele de ecran si pentru motoare */
.mdsx .fin__sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.mdsx .fin__leg{ margin-top:var(--s-4); }

/* ── reperele vizuale, deasupra tabelului ─────────────────────────────────── */
.mdsx .fin__ks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-3); margin:var(--s-5) 0 var(--s-2); }
.mdsx .fin__k{ padding:var(--s-3) var(--s-4) var(--s-2);
  border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.018); }
/* 10,5px uppercase cu `letter-spacing`: eticheta mica a temei, copiata din
   `.mdsx .sum__lbl` (mds-design.css:415) si `.mdsx .chg__lbl` (:762). Scara
   n-are token sub 12px. */
.mdsx .fin__kl{ display:block; font:500 10.5px/1.2 var(--b); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); }
.mdsx .fin__kv{ display:flex; align-items:center; margin-top:7px;
  font:400 var(--f-corp)/1 var(--m); letter-spacing:-.045em; color:var(--ink); }
.mdsx .fin__kv .fin__ar{ margin:0 0 0 7px; }
/* 11,5px: treapta de text secundar a temei, `.mdsx .meta b` (mds-design.css:338),
   `.mdsx .nv__i` (:350), `.mdsx .pf__i span` (:379). */
.mdsx .fin__kp{ margin-left:7px; font:400 11.5px/1 var(--m); font-style:normal; color:var(--ink-3); }
.mdsx .fin__kc{ display:flex; align-items:stretch; gap:3px; position:relative;
  height:46px; margin-top:var(--s-3); }
.mdsx .fin__bc{ position:relative; flex:1; border-radius:2px;
  background:rgba(255,255,255,.025); }
.mdsx .fin__bc i{ position:absolute; left:0; right:0; border-radius:2px; }
.mdsx .fin__bc.is-sez::after{ content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:1.5px; border-radius:1px; background:var(--ink-2); opacity:.55; }
.mdsx .fin__b0{ position:absolute; left:0; right:0; height:1px;
  background:rgba(255,255,255,.18); }
.mdsx .fin__kx{ display:flex; justify-content:space-between; margin-top:5px; }
/* 9,5px: cea mai mica treapta folosita in tema, pe `.mdsx .meta-label`.
   Sub eticheta de card, unde 12px ar fi concurat cu cifra. */
.mdsx .fin__kx i{ font:400 9.5px/1 var(--m); font-style:normal; color:var(--ink-3); opacity:.7; }



/* ── explicatia, ca rand propriu sub randul cu cifre ───────────────────────
   ⚠ NU e o fereastra plutitoare. Tabelul sta intr-un container cu
     `overflow-x:auto`, care ar fi taiat orice element pozitionat absolut. Un
     rand nou nu poate fi taiat, se citeste la fel pe mobil, si ramane in HTML
     pentru motoarele de cautare. */
.mdsx .fin__qi{ position:fixed; top:0; left:0; width:0; height:0; opacity:0; pointer-events:none; }
.mdsx .fin__q{ display:inline-flex; align-items:baseline; gap:7px; cursor:pointer; }
.mdsx .fin__q:hover{ color:var(--ink); }
.mdsx .fin__tbl tr.fin__x{ display:none; }
.mdsx .fin__tbl tr:has(.fin__qi:checked) + tr.fin__x{ display:table-row; }
.mdsx .fin__tbl tr:has(.fin__qi:checked) th{ color:var(--ink); }
/* ⚠ CELULA NU E LIPITA, PARAGRAFUL E. Prima versiune punea `position:sticky`
     pe `<td colspan>`, care are latimea intregului tabel: la derulare laterala
     textul pleca din ecran impreuna cu cifrele. Acum celula sta pe loc si
     paragraful din ea ramane lipit la stanga, deci explicatia se citeste
     oricat ai derula. */
.mdsx .fin__tbl tr.fin__x td{ padding:0 0 14px; text-align:left;
  white-space:normal; font-family:var(--b); background:var(--mdsx-bg); }
.mdsx .fin__tbl tr.fin__x p{ position:sticky; left:0; display:block;
  width:min(64ch, 92vw); margin:0; padding:0 var(--s-5); font:400 var(--f-nota)/1.6 var(--b);
  color:var(--ink-3); }
.mdsx .fin__tbl tr.fin__x b{ font-weight:500; font-family:var(--m); font-size:var(--f-fin);
  letter-spacing:-.04em; color:var(--ink-2); }

@container mdsx (max-width:599px){
  /* headerul temei e lipit sus pe mobil; zona noastra incepe sub el */
  .mdsx .fin{ --fin-sus:var(--mds-hdr-m,56px); }

  /* ⚠ DOUA RANDURI, CU INALTIMI IMPUSE. Taburile sus, restul dedesubt.
       44 + 40 = 84, si `--fin-ctrl` spune exact 84: randul cu anii se lipeste
       sub bara, nu peste tabel. Prima versiune GHICEA 88 si de acolo venea
       suprapunerea. Fiecare rand se deruleaza lateral pe cont propriu, deci
       nimic nu mai iese din ecran, oricat de lungi ar fi etichetele. */
  .mdsx .fin__tabs{ gap:var(--s-5); }
  .mdsx .fin__tab{ font-size:var(--f-corp); padding:0 0 11px; }
  .mdsx .fin__right{ gap:var(--s-4); }
  .mdsx .fin__pers{ flex:none; }
  .mdsx .fin__per{ padding:5px 11px; font-size:11.5px; }
  .mdsx .fin__det{ flex:none; font-size:11.5px; }



  /* ⚠ CARDURILE SANGEREAZA DOAR SPRE DREAPTA. La stanga incep de unde incepe
       textul; la dreapta ies pana la marginea ecranului, ca sa se vada ca mai
       urmeaza unul. Un spatiu si in dreapta face cardul sa para taiat aiurea.
       Banda are `padding:28px 20px` (`mds-design.css:186`), deci scoaterea e
       exact latimea aceea. */
  .mdsx .fin__ks{ display:flex; gap:var(--s-3);
    margin:var(--s-4) calc(-1 * var(--s-5)) var(--s-2) 0;
    padding-right:var(--s-5);
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .mdsx .fin__ks::-webkit-scrollbar{ display:none; }
  .mdsx .fin__k{ flex:0 0 74%; scroll-snap-align:start; }

  .mdsx .fin__tbl thead th:first-child{ min-width:150px; }
  .mdsx .fin__tbl tbody th{ font-size:var(--f-nota); padding-right:10px; }
  .mdsx .fin__tbl td{ padding:10px; font-size:var(--f-nota); }
  .mdsx .fin__tbl tr.lv2 th{ padding-left:var(--s-7); }
}

/* ═══ BANDA CU ANII, LIPITA DE PAGINA ═══════════════════════════════════════
   Desenata de `assets/js/mds-financiare.js`. Contine o copie a tabelului, din
   care se vede doar antetul: asa coloanele au exact latimile originalului,
   fara masuratori si fara `table-layout:fixed`.

   ⚠ `position: fixed`, nu `sticky`. Trebuie sa scape de containerul cu
     `overflow-x`, care i-ar fi fost scrollport. `top`, `left`, `width` si
     `height` le pune scriptul, din pozitia reala a tabelului.
   ⚠ `pointer-events: none`: banda e decorativa. Degetul trebuie sa ajunga la
     tabelul de dedesubt, altfel derularea laterala s-ar opri in ea.
   ⚠ Fara JavaScript, `.is-on` nu se pune niciodata si banda nu exista. Pagina
     ramane exact ca inainte. */
.mdsx .fin__hd{ display:none; }
.mdsx .fin__hd.is-on{ display:block; position:fixed; z-index:7;
  overflow:hidden; pointer-events:none; background:var(--mdsx-bg);
  box-shadow:0 1px 0 var(--line); }
.mdsx .fin__hd .fin__tbl{ will-change:transform; }
.mdsx .fin__hd .fin__tbl tbody{ visibility:hidden; }
/* ⚠ Coltul benzii sta peste celelalte celule, ca anii sa treaca pe dedesubt,
     exact ca in tabelul real unde coloana cu denumiri e `sticky left`.
     Fundal opac obligatoriu: sub el aluneca cifrele. */
.mdsx .fin__hd .fin__tbl thead th:first-child{ position:relative; z-index:2;
  background:var(--mdsx-bg); will-change:transform; }

/* ── „Vezi toate randurile", doar pe telefon ─────────────────────────────
   ⚠ PE DESKTOP NU EXISTA: butonul e `display:none` in afara blocului mobil, iar
     `.fin__extra` n-are nicio regula de ascundere acolo.
   ⚠ `fin__vt`, NU `fin__x`: aceea e deja luata de randul de nota din tabel
     (`analiza-date-financiare.php:438`).
   ⚠ Caseta ascunsa cu `opacity`, nu `display:none`, ca sa ramana in ordinea de
     tabulare.
   ⚠ `overflow-anchor` ca pagina sa nu ramana sub tabel la inchidere. */
.mdsx .fin__vt-t{ position: absolute; opacity: 0; pointer-events: none; }
.mdsx .fin__vt{ display: none; }
.mdsx .fin__vt-b{ display: none; }

@container mdsx (max-width:599px){
	.mdsx .fin__vt-t:not(:checked) ~ .fin__sc .fin__extra{ display: none; }
	.mdsx .fin__extra{ overflow-anchor: none; }

	.mdsx .fin__vt{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		width: 100%;
		margin-top: var(--s-4);
		padding: 13px 16px;
		border: 1px solid var(--line-2);
		border-radius: 12px;
		background: rgba(255, 255, 255, .03);
		font: 600 var(--f-corp)/1 var(--b);
		color: var(--ink);
		cursor: pointer;
	}
	/* chevron din doua muchii, ca sa nu depinda de vreun font */
	.mdsx .fin__vt::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;
	}
	.mdsx .fin__vt-t:checked ~ .fin__vt{ background: transparent; color: var(--ink-2); }
	.mdsx .fin__vt-t:checked ~ .fin__vt::after{ transform: translateY(2px) rotate(-135deg); }
	.mdsx .fin__vt-t:checked ~ .fin__vt .fin__vt-a{ display: none; }
	.mdsx .fin__vt-t:checked ~ .fin__vt .fin__vt-b{ display: block; }
}