/* ==========================================================================
   [cc 19.10 piese-sectiuni] sx-eta.css · #etransport „Codul UIT, de la ANAF până în mapa șoferului”
   Piesa „Foaia UIT” din site-sectiuni (sectiuni/etransport.css, 05.10), adusă înapoi pe pagina Documente refăcută.
   Din piesa veche: pânza 1140×740 cu fereastra E-Transport General (cadrul v34), foaia, mapa, folia, cursorul, QR-ul pătrățel cu pătrățel,
   indexul de pași. Ce e nou:
     - povestea merge singură o dată, în timp (sx-eta.js), nu mai e legată de derulare: fără pista de 400vh, scena are o înălțime fixă
       (lat: lățimea coloanei × 740/1124, cel mult 660 px; telefon: 420–500 px);
     - doar transform și opacity se mișcă (lipirea „hârtiuței”, tiparul pe loc, lucirea foliei și semnele pe rând au acum elementele lor);
     - pasul 5: pe 3 rânduri camionul nou stă cu roșu sub cel vechi, „În Prelucrare”, creionul devine „Verificare”;
     - aspectul paginii: Work Sans (--ws), textul paginii pe --ink / --ink2 / --mute / --line; fereastra programului și hârtia rămân
       deschise și pe tema închisă (ca celelalte ferestre din site27.css), doar umbrele și mapa se schimbă.
   Fără JS: pânza în flux, cu zoom (--eta-z), în starea de la sfârșitul pasului 4; pașii sunt listă. Toate regulile sub .sx-eta.
   ========================================================================== */

/* ---------- 0. Tokeni ---------- */
.sx-eta {
  --eta-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* fereastra programului (cadrul v34: bara de sus și șina închise, pânza deschisă) */
  --eta-bb: #1e1d1a; --eta-bb-hi: #2d2b27; --eta-bb-ink: #efebe1; --eta-bb-mute: #a19c91;
  --eta-cv: #f7f6f2; --eta-dot: rgba(29, 39, 51, .085);
  --eta-sf: #ffffff; --eta-sf2: #f3f2ee; --eta-line: #e3e1db;
  --eta-ink: #1d2733; --eta-ink2: #4f5b68; --eta-ink3: #5f6a78;
  --eta-acc: #1a74a2; --eta-acc-ink: #ffffff; --eta-acc-soft: #e7f0f7; --eta-acc-line: rgba(26, 116, 162, .38);
  --eta-red: #b42f22;
  /* hârtia */
  --eta-paper: #fdfcf9; --eta-paper-ink: #1b222b; --eta-paper-ink2: #545d68; --eta-paper-line: #d3d7dc; --eta-qr: #161a20;
  /* mapa și folia */
  --eta-board: #24384f; --eta-board-hi: #2f4864; --eta-board-lo: #1a2a3c; --eta-stitch: rgba(232, 238, 245, .30); --eta-hole: #16222f;
  --eta-label: #f4f0e6; --eta-label-ink: #1d2733; --eta-label-ink2: #4f5b68;
  --eta-film: rgba(226, 238, 247, .13); --eta-film-edge: rgba(36, 72, 108, .22); --eta-sheen: rgba(255, 255, 255, .55);
  /* umbre */
  --eta-win-sh: 0 0 0 1px rgba(14, 13, 11, .92), 0 2px 4px rgba(23, 32, 43, .10), 0 14px 28px -10px rgba(23, 32, 43, .22),
                0 40px 80px -28px rgba(23, 32, 43, .34), 0 90px 140px -60px rgba(23, 32, 43, .30);
  --eta-paper-sh: 0 0 0 1px rgba(23, 32, 43, .05), 0 1px 1px rgba(23, 32, 43, .08), 0 3px 6px -2px rgba(23, 32, 43, .10),
                  0 18px 34px -12px rgba(23, 32, 43, .26), 0 52px 80px -40px rgba(23, 32, 43, .34);
  --eta-board-sh: 0 1px 2px rgba(15, 25, 40, .30), 0 20px 36px -14px rgba(15, 25, 40, .42), 0 60px 90px -44px rgba(15, 25, 40, .45);
  /* partea paginii (fragmentul de sub pasul 5) */
  --eta-f-red: #b42f22;
}
:root:not([data-theme="light"]) .sx-eta {
  --eta-paper: #ebe8e0; --eta-paper-ink: #1d2733; --eta-paper-ink2: #4c5561; --eta-paper-line: #c4c0b6;
  --eta-board: #1c2c3f; --eta-board-hi: #263b53; --eta-board-lo: #121d2b; --eta-stitch: rgba(220, 230, 242, .22); --eta-hole: #0d1620;
  --eta-label: #e6e1d4; --eta-label-ink: #1d2733; --eta-label-ink2: #48525e;
  --eta-film: rgba(196, 220, 240, .08); --eta-film-edge: rgba(190, 215, 240, .22); --eta-sheen: rgba(255, 255, 255, .26);
  --eta-win-sh: 0 0 0 1px rgba(255, 255, 255, .13), 0 2px 6px rgba(0, 0, 0, .45), 0 44px 96px -30px rgba(0, 0, 0, .9);
  --eta-paper-sh: 0 1px 1px rgba(0, 0, 0, .4), 0 4px 8px -2px rgba(0, 0, 0, .35), 0 26px 50px -18px rgba(0, 0, 0, .85);
  --eta-board-sh: 0 0 0 1px rgba(255, 255, 255, .07), 0 2px 3px rgba(0, 0, 0, .5), 0 30px 60px -20px rgba(0, 0, 0, .85);
  --eta-f-red: #f08a7a;
}

.sx-eta .eta-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sx-eta .eta-nw { white-space: nowrap; }
.sx-eta .eta-i { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 1. Scena: fără JS = starea de la sfârșitul pasului 4, scalată cu zoom ---------- */
.sx-eta .eta-fig { position: relative; }
.sx-eta .eta-stage { --eta-z: .86; --eta-mx: 0px; position: relative; overflow: clip; }
.sx-eta .eta-cv { position: relative; width: 1140px; height: 740px; zoom: var(--eta-z); margin-left: var(--eta-mx); font-family: var(--ws); }
.sx-eta .eta-cv, .sx-eta .eta-cv * { letter-spacing: 0; word-spacing: 0; }
@media (max-width: 1199px) { .sx-eta .eta-stage { --eta-z: .84; } }
@media (max-width: 1023px) { .sx-eta .eta-stage { --eta-z: .74; } }
@media (max-width: 899px) { .sx-eta .eta-stage { --eta-z: .78; --eta-mx: -670px; margin-inline: calc(var(--sx-gutter) * -1); } }

/* cu JS: scena are înălțimea ei, pânza e așezată de „cameră” (translate + scale) */
.sx-eta.eta-js .eta-stage { width: 100%; aspect-ratio: 1124 / 740; max-height: 620px; overflow: visible; }
.sx-eta.eta-js .eta-cv { position: absolute; left: 0; top: 0; zoom: 1; margin: 0; transform-origin: 0 0; }
@media (max-width: 899px) {
  .sx-eta.eta-js .eta-stage { width: auto; aspect-ratio: auto; max-height: none; height: clamp(420px, 122vw, 476px); overflow: clip; }
}
/* cât merge povestea: straturi proprii pentru ce se mișcă (scoase la final, ca textul să se redeseneze clar). .eta-warm = aceleași straturi,
   puse (din sx-eta.js) când scena e la cel mult un ecran distanță și povestea n-a pornit încă, ca desenarea lor să nu cadă pe primul cadru */
.sx-eta:is(.eta-anim, .eta-warm) :is(.eta-win, .eta-doc, .eta-sheet, .eta-board, .eta-film, .eta-sheen, .eta-cur, .eta-rip, .eta-v) { will-change: transform, opacity; }
/* ce se schimbă ÎN fereastră și PE foaie (rândurile, butonul, imprimanta, tiparul, QR-ul) stă pe straturi mici, ca să nu se redeseneze
   la fiecare cadru fereastra sau foaia întreagă, cu umbrele lor mari (măsurat 19.10: cadre de 100–300 ms la pasul 5 fără asta) */
.sx-eta:is(.eta-anim, .eta-warm) :is(.eta-tb, .eta-dl, .eta-prn, .eta-grid, .eta-frag) { will-change: transform; }
.sx-eta:is(.eta-anim, .eta-warm) :is(.eta-qcv, .eta-qhd) { will-change: transform, opacity; }
@media (max-width: 899px) { .sx-eta:is(.eta-anim, .eta-warm) .eta-cv { will-change: transform; } }

/* ---------- 2. Fereastra: E-Transport General în cadrul v34 ---------- */
.sx-eta .eta-win {
  position: absolute; z-index: 1; left: 16px; top: 20px; width: 800px; height: 304px;
  border-radius: 15px; background: var(--eta-bb); box-shadow: var(--eta-win-sh); overflow: hidden; transform-origin: 0 0;
}
.sx-eta .eta-top { position: absolute; left: 0; right: 0; top: 0; height: 36px; display: flex; align-items: flex-end; color: var(--eta-bb-mute); }
.sx-eta .eta-logo { flex: 0 0 auto; width: 48px; height: 36px; display: grid; place-items: center; color: var(--eta-bb-ink); }
.sx-eta .eta-logo .eta-i { width: 19px; height: 19px; }
.sx-eta .eta-tab {
  position: relative; height: 28px; display: inline-flex; align-items: center; margin-left: 12px; padding: 0 16px;
  border-radius: 9px 9px 0 0; background: var(--eta-cv); color: var(--eta-ink); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.sx-eta .eta-tab::before, .sx-eta .eta-tab::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 9px; }
.sx-eta .eta-tab::before { left: -9px; background: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 8.5px, var(--eta-cv) 9px); }
.sx-eta .eta-tab::after { right: -9px; background: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 8.5px, var(--eta-cv) 9px); }
.sx-eta .eta-av { margin: 0 12px 8px auto; width: 20px; height: 20px; border-radius: 50%; background: var(--eta-bb-hi); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sx-eta .eta-rail { position: absolute; left: 0; top: 36px; bottom: 0; width: 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 12px; }
.sx-eta .eta-ri { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--eta-bb-mute); }
.sx-eta .eta-wcv {
  position: absolute; left: 48px; top: 36px; right: 0; bottom: 0; overflow: hidden; border-top-left-radius: 12px;
  background-color: var(--eta-cv); background-image: radial-gradient(var(--eta-dot) 1px, transparent 1.3px); background-size: 18px 18px;
}
/* pagina e derulată: primul rând întreg e rândul de filtre cu butonul albastru */
.sx-eta .eta-page {
  position: absolute; left: 12px; right: 12px; top: -14px; bottom: 12px; display: flex; flex-direction: column;
  padding: 24px 14px 10px; border-radius: 10px; background: var(--eta-sf); box-shadow: 0 0 0 1px var(--eta-line), 0 1px 2px rgba(23, 32, 43, .04);
  color: var(--eta-ink2);
}
.sx-eta .eta-frow { display: flex; align-items: center; gap: 6px; }
.sx-eta .eta-in {
  flex: 0 0 118px; height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 7px 0 8px;
  border-radius: 6px; box-shadow: inset 0 0 0 1px var(--eta-line); background: var(--eta-sf); color: var(--eta-ink3);
  font-size: 9px; white-space: nowrap; overflow: hidden;
}
.sx-eta .eta-in .eta-i { width: 10px; height: 10px; }
.sx-eta .eta-dl {
  flex: 0 0 auto; height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 7px; border-radius: 6px;
  background: var(--eta-acc); color: var(--eta-acc-ink); font-size: 9px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 1px rgba(23, 32, 43, .12); transform-origin: 50% 50%;
}
.sx-eta .eta-dl .eta-i { width: 12px; height: 12px; stroke-width: 1.6; }
.sx-eta .eta-srch {
  flex: 1 1 auto; min-width: 0; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 6px; background: var(--eta-sf2); box-shadow: inset 0 0 0 1px var(--eta-line); color: var(--eta-ink2);
  font-size: 9px; font-weight: 600; white-space: nowrap; overflow: hidden;
}
.sx-eta .eta-srch .eta-i { width: 11px; height: 11px; }
.sx-eta .eta-ttl { margin: 12px 0 9px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--eta-ink); }
/* tabelul: tăiat curat la coloana UIT (bifa, ID-ul și Data Descărcare Mesaj nu se văd); în stânga se stinge pe 14px */
.sx-eta .eta-tbl {
  position: relative; overflow: hidden; border-radius: 0 8px 8px 0;
  -webkit-mask: linear-gradient(to right, transparent 0, #000 14px);
          mask: linear-gradient(to right, transparent 0, #000 14px);
}
.sx-eta .eta-tbl::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid var(--eta-line); border-left: 0; border-radius: 0 8px 8px 0; pointer-events: none; }
.sx-eta .eta-th, .sx-eta .eta-tr {
  display: grid; grid-template-columns: 114px 78px 58px 82px 84px 50px 50px 60px 60px minmax(0, 1fr); align-items: center;
}
.sx-eta .eta-th { height: 30px; background: var(--eta-sf2); border-bottom: 1px solid var(--eta-line); font-size: 8.5px; font-weight: 600; line-height: 1.15; color: var(--eta-ink3); }
.sx-eta .eta-th > span { padding: 0 3px; text-align: center; }
.sx-eta .eta-th .is-sort { display: inline-flex; align-items: center; justify-content: center; gap: 1px; color: var(--eta-ink); }
.sx-eta .eta-th .is-sort .eta-i { width: 10px; height: 10px; color: var(--eta-acc); }
.sx-eta .eta-tb { position: relative; height: 144px; }
.sx-eta .eta-rows { position: absolute; left: 0; right: 0; top: 0; }
.sx-eta .eta-rows--old { opacity: 0; }
.sx-eta .eta-tr { position: relative; height: 36px; font-size: 9.5px; line-height: 1.22; color: var(--eta-ink2); text-align: center; font-variant-numeric: tabular-nums; }
.sx-eta .eta-tr + .eta-tr { border-top: 1px solid var(--eta-line); }
.sx-eta .eta-tr > span { position: relative; min-width: 0; padding: 0 3px; }
.sx-eta .eta-tr em { display: block; font-size: 8px; font-style: italic; line-height: 1.25; color: var(--eta-ink3); white-space: nowrap; }
.sx-eta .eta-tr b { font-weight: 500; color: var(--eta-ink); }
/* semnul de rând ales (rândul nou; la pasul 5 cele trei rânduri ale camionului B909DEM) */
.sx-eta .eta-sel { position: absolute; inset: 0; background: var(--eta-acc-soft); box-shadow: inset 0 0 0 1px var(--eta-acc-line); opacity: 0; pointer-events: none; }
.sx-eta:not(.eta-js) .eta-tr--uit .eta-sel { opacity: 1; }
/* pasul 5: valoarea nouă, cu roșu și înclinat, sub cea veche (G:1184-1235); starea; creionul -> „Verificare” */
.sx-eta .eta-tr .eta-red { color: var(--eta-red); opacity: 0; }
.sx-eta .eta-st { display: grid; place-items: center; }
.sx-eta .eta-st > span { grid-area: 1 / 1; }
.sx-eta .eta-s1 { opacity: 0; line-height: 1.15; }
.sx-eta .eta-sw .eta-i { grid-area: 1 / 1; }
.sx-eta .eta-sw1 { opacity: 0; }
.sx-eta .eta-ac { display: flex; justify-content: center; gap: 3px; }
.sx-eta .eta-b {
  position: relative; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px;
  background: var(--eta-sf2); color: var(--eta-ink2); box-shadow: inset 0 0 0 1px var(--eta-line);
}
.sx-eta .eta-b .eta-i { width: 11px; height: 11px; }
.sx-eta .eta-b--p { background: var(--eta-acc); color: var(--eta-acc-ink); box-shadow: none; }
.sx-eta .eta-prn-ring { position: absolute; inset: -3px; border-radius: 7px; box-shadow: 0 0 0 3px var(--eta-acc-line); opacity: 0; pointer-events: none; }

/* fereastra îngustă (telefon): fără șină și filtre; UIT, Dată Expirare, Declarant, Nr. Vehicul și imprimanta */
.sx-eta.eta-narrow .eta-win { width: 396px; height: 340px; }
.sx-eta.eta-narrow .eta-rail { display: none; }
.sx-eta.eta-narrow .eta-wcv { left: 0; border-top-left-radius: 0; }
.sx-eta.eta-narrow .eta-tab { font-size: 12px; }
.sx-eta.eta-narrow .eta-page { left: 10px; right: 10px; padding: 22px 10px 10px; }
.sx-eta.eta-narrow .eta-in, .sx-eta.eta-narrow .eta-srch { display: none; }
.sx-eta.eta-narrow .eta-dl { height: 28px; gap: 6px; padding: 0 12px 0 9px; font-size: 10.5px; }
.sx-eta.eta-narrow .eta-dl .eta-i { width: 13px; height: 13px; }
.sx-eta.eta-narrow .eta-ttl { max-width: 300px; margin: 13px auto 10px; font-size: 11px; line-height: 1.35; text-wrap: balance; }
.sx-eta.eta-narrow .eta-tbl { -webkit-mask: none; mask: none; border-radius: 8px; }
.sx-eta.eta-narrow .eta-tbl::after { border-left: 1px solid var(--eta-line); border-radius: 8px; }
.sx-eta.eta-narrow .eta-th, .sx-eta.eta-narrow .eta-tr { grid-template-columns: 118px 68px minmax(0, 1fr) 56px 32px; }
.sx-eta.eta-narrow :is(.eta-cdt, .eta-ctr, .eta-crm, .eta-crf, .eta-cst) { display: none; }
.sx-eta.eta-narrow .eta-b:not(.eta-b--p) { display: none; }
.sx-eta.eta-narrow .eta-th { height: 32px; font-size: 9px; }
.sx-eta.eta-narrow .eta-tb { height: 160px; }
.sx-eta.eta-narrow .eta-tr { height: 40px; font-size: 10px; }
.sx-eta.eta-narrow .eta-tr em { font-size: 8.5px; }
.sx-eta.eta-narrow .eta-b { width: 21px; height: 21px; }
.sx-eta.eta-narrow .eta-b .eta-i { width: 12px; height: 12px; }

/* fără JS, pe lat: fereastra mai mică, întreagă la stânga mapei; pe îngust se vede doar mapa */
.sx-eta:not(.eta-js) .eta-win { transform: translateY(130px) scale(.82); }
@media (max-width: 899px) { .sx-eta:not(.eta-js) .eta-win { visibility: hidden; } }

/* cursorul și inelul clicului (doar în poveste) */
.sx-eta .eta-cur, .sx-eta .eta-rip { display: none; }
.sx-eta.eta-js .eta-cur, .sx-eta.eta-js .eta-rip { display: block; }
.sx-eta .eta-cur {
  position: absolute; z-index: 6; left: 0; top: 0; width: 18px; height: 25px; overflow: visible; pointer-events: none; transform-origin: 2px 2px;
  filter: drop-shadow(0 1px 1px rgba(10, 14, 20, .28)) drop-shadow(0 5px 7px rgba(10, 14, 20, .2));
}
.sx-eta .eta-cur path { fill: #fbfbf8; stroke: #1d2733; stroke-width: 1.5; stroke-linejoin: round; }
.sx-eta .eta-rip { position: absolute; z-index: 5; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--eta-acc); opacity: 0; pointer-events: none; }

/* ---------- 3. Foaia, mapa, folia ---------- */
.sx-eta .eta-doc { position: absolute; z-index: 2; left: 700px; top: 36px; width: 420px; height: 594px; transform: rotate(-1.4deg); transform-origin: 50% 56%; }
.sx-eta .eta-board {
  position: absolute; left: -22px; top: 14px; width: 452px; height: 672px; border-radius: 14px;
  background: linear-gradient(165deg, var(--eta-board-hi) 0%, var(--eta-board) 36%, var(--eta-board-lo) 100%); box-shadow: var(--eta-board-sh);
}
.sx-eta .eta-board::before { content: ""; position: absolute; inset: 7px; border-radius: 9px; border: 1.25px dashed var(--eta-stitch); }
.sx-eta .eta-board::after { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .07)); }
.sx-eta .eta-blabel {
  position: absolute; left: 36px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 13px 7px 11px;
  border-radius: 3px; background: var(--eta-label); color: var(--eta-label-ink); font-size: 13px; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 5px 10px -5px rgba(0, 0, 0, .4); transform: rotate(-.7deg);
}
.sx-eta .eta-blabel b { font-weight: 600; color: var(--eta-label-ink); }
.sx-eta .eta-blabel span { padding-left: 10px; border-left: 1px solid rgba(29, 39, 51, .2); color: var(--eta-label-ink2); }
.sx-eta .eta-sheet {
  position: absolute; inset: 0; padding: 13px 26px 0; background: var(--eta-paper); color: var(--eta-paper-ink);
  box-shadow: var(--eta-paper-sh); transform: translateY(28px); font-variant-numeric: tabular-nums;
}
.sx-eta .eta-ph { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; margin: 0 -10px 13px; font-size: 7.5px; line-height: 1.3; color: var(--eta-paper-ink2); }
.sx-eta .eta-ph span:first-child { justify-self: start; }
.sx-eta .eta-pf { position: absolute; right: 16px; bottom: 10px; font-size: 7.5px; color: var(--eta-paper-ink2); }
.sx-eta .eta-grid { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 13px; font-size: 11px; line-height: 15px; }
.sx-eta .eta-k { text-align: right; color: var(--eta-paper-ink2); white-space: nowrap; }
.sx-eta .eta-k--h { font-weight: 600; color: var(--eta-paper-ink); }
.sx-eta .eta-x { min-width: 0; white-space: nowrap; color: var(--eta-paper-ink); }
.sx-eta .eta-x--w { white-space: normal; }
.sx-eta .eta-x--w .eta-p { max-width: 100%; }
.sx-eta .eta-hr { grid-column: 1 / -1; height: 1px; margin: 5px 0; background: var(--eta-paper-line); }
/* valorile care zboară din rândul listei: în zbor au o hârtiuță sub ele (.eta-chip, opacitatea din JS) */
.sx-eta .eta-v { position: relative; display: inline-block; isolation: isolate; transform-origin: 0 0; }
.sx-eta .eta-chip {
  position: absolute; z-index: -1; inset: -1px -4px; border-radius: 4px; background: var(--eta-paper); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1px var(--eta-acc-line), 0 8px 18px -5px rgba(15, 22, 32, .38);
}
.sx-eta.eta-js .eta-v { z-index: 1; }
/* valorile tipărite pe loc: o bandă de hârtie (.eta-pw) se strânge spre dreapta (scaleX din JS), deci textul apare de la stânga la dreapta */
.sx-eta .eta-p, .sx-eta .eta-pq { position: relative; display: inline-block; }
.sx-eta .eta-pw { display: none; }
.sx-eta.eta-js .eta-pw {
  display: block; position: absolute; inset: -2px -3px; background: var(--eta-paper); transform-origin: 100% 50%; pointer-events: none;
}
.sx-eta .eta-k--q { align-self: start; padding-top: 4px; white-space: normal; text-align: center; font-weight: 600; line-height: 1.3; color: var(--eta-paper-ink); }
.sx-eta .eta-qw { position: relative; display: block; width: 90px; height: 90px; margin-top: 3px; }
.sx-eta .eta-qr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.sx-eta .eta-qr rect.m { width: 1.04px; height: 1.04px; fill: var(--eta-qr); }
/* tipărirea (sx-eta.js): QR-ul stă întreg sub o hârtie de culoarea foii (.eta-qcv) care se trage în jos rând cu rând (scaleY, origine jos; cu 1 px peste marginea de jos, ca rândul 21 să nu se vadă pe sub ea);
   linia de tipar (.eta-qhd) merge pe marginea ei. Doar transform / opacity, pe straturi proprii; 236 de pătrățele nu se mai restilizează la fiecare cadru. */
.sx-eta .eta-qcv, .sx-eta .eta-qhd { display: none; }
.sx-eta.eta-js .eta-qcv { display: block; position: absolute; left: -3px; right: -3px; top: 0; bottom: -1px; background: var(--eta-paper); transform-origin: 50% 100%; pointer-events: none; }
.sx-eta.eta-js .eta-qhd { display: block; position: absolute; left: -6px; right: -6px; top: -1px; height: 2px; border-radius: 1px; background: var(--eta-acc); opacity: 0; pointer-events: none; }
/* pe telefon foaia se vede întreagă, deci literele ei cresc puțin */
.sx-eta.eta-narrow .eta-grid { grid-template-columns: 138px minmax(0, 1fr); font-size: 12px; line-height: 16px; }
.sx-eta.eta-narrow .eta-ph { font-size: 8px; }
.sx-eta.eta-narrow .eta-qw { width: 96px; height: 96px; }

/* folia (cu perforația din stânga); lucirea e un element care trece pe deasupra (transform) */
.sx-eta .eta-film {
  position: absolute; z-index: 3; left: -8px; top: 22px; width: 436px; height: 606px; border-radius: 5px; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .08)), var(--eta-film);
  box-shadow: inset 1px 0 0 var(--eta-film-edge), inset -1px 0 0 var(--eta-film-edge), inset 0 -1px 0 var(--eta-film-edge), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.sx-eta .eta-film::before {
  content: ""; position: absolute; z-index: 1; left: 1px; top: 0; bottom: 0; width: 6px;
  background:
    radial-gradient(circle, var(--eta-hole) 0 2.1px, rgba(0, 0, 0, 0) 2.6px) 50% 22% / 6px 6px no-repeat,
    radial-gradient(circle, var(--eta-hole) 0 2.1px, rgba(0, 0, 0, 0) 2.6px) 50% 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--eta-hole) 0 2.1px, rgba(0, 0, 0, 0) 2.6px) 50% 78% / 6px 6px no-repeat;
}
.sx-eta .eta-film::after { content: ""; position: absolute; left: 8px; right: 0; top: 0; height: 2px; border-radius: 5px 5px 0 0; background: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); }
.sx-eta .eta-sheen {
  position: absolute; left: 0; top: -4%; bottom: -4%; width: 46%;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 0%, var(--eta-sheen) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(125%);
}

/* ---------- 4. Indexul de pași și textul ---------- */
.sx-eta .eta-caps { position: relative; z-index: 3; }
.sx-eta .eta-nav { position: relative; display: grid; grid-auto-rows: 30px; align-content: start; }
.sx-eta .eta-nav::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.sx-eta .eta-nb {
  position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0; padding: 0 14px 0 0;
  border: 0; border-radius: 0 7px 7px 0; background: none; cursor: pointer; font: inherit; text-align: left; color: var(--mute);
  -webkit-tap-highlight-color: transparent; transition: color .15s ease;
}
.sx-eta .eta-nb-k { position: relative; flex: 0 0 22px; height: 12px; }
.sx-eta .eta-nb-k::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 22px; height: 2px; border-radius: 0 2px 2px 0;
  background: var(--line); transform-origin: 0 50%; transform: scaleX(.37); transition: transform .35s var(--eta-ease), background-color .2s ease;
}
.sx-eta .eta-nb-n { flex: 0 0 auto; min-width: 1.1ch; font: 600 13px/1 var(--ws); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sx-eta .eta-nb-t { font: 500 14px/1.2 var(--ws); letter-spacing: -.005em; white-space: nowrap; }
@media (hover: hover) {
  .sx-eta .eta-nb:hover { color: var(--ink); }
  .sx-eta .eta-nb:hover .eta-nb-k::before { transform: scaleX(.6); background: color-mix(in srgb, var(--ink) 45%, var(--line)); }
}
.sx-eta .eta-nb:active :is(.eta-nb-n, .eta-nb-t) { transform: translateX(1px); }
.sx-eta .eta-nb.is-past .eta-nb-k::before { background: color-mix(in srgb, var(--ink) 50%, transparent); }
.sx-eta .eta-nb[aria-current] { color: var(--ink); }
.sx-eta .eta-nb[aria-current] .eta-nb-k::before { transform: none; background: var(--ink); }
.sx-eta .eta-nb[aria-current] .eta-nb-t { font-weight: 600; }
.sx-eta .eta-nb:focus { outline: none; }
.sx-eta .eta-nb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sx-eta .eta-cl { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.sx-eta .eta-c h3 { margin: 0 0 8px; font: 500 20px/26px var(--ws); letter-spacing: -.014em; word-spacing: 0; color: var(--ink); text-wrap: balance; }
.sx-eta .eta-c p { font: 400 16px/24px var(--ws); letter-spacing: -.005em; word-spacing: 0; color: var(--ink2); max-width: 44ch; text-wrap: pretty; }

/* fragmentul de rând din E-Transport General (pasul 5) */
.sx-eta .eta-frag {
  display: inline-grid; grid-template-columns: repeat(3, auto); max-width: 100%; margin-top: 14px; overflow: hidden;
  border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-variant-numeric: tabular-nums;
}
.sx-eta .eta-frag, .sx-eta .eta-frag * { letter-spacing: 0; word-spacing: 0; }
.sx-eta .eta-fh {
  padding: 6px 12px; background: color-mix(in srgb, var(--ink) 5%, var(--card)); border-bottom: 1px solid var(--line);
  font: 500 12px/16px var(--ws); color: var(--mute); text-align: center; white-space: nowrap;
}
.sx-eta .eta-fh + .eta-fh, .sx-eta .eta-fd + .eta-fd { border-left: 1px solid var(--line); }
.sx-eta .eta-fd { display: grid; align-content: center; padding: 8px 12px 9px; font: 400 13px/18px var(--ws); color: var(--ink); text-align: center; white-space: nowrap; }
.sx-eta .eta-fr { display: block; font-size: 12.5px; line-height: 17px; font-style: italic; color: var(--eta-f-red); }
.sx-eta .eta-fs > span { grid-area: 1 / 1; }
.sx-eta .eta-fs0 { opacity: 0; }

/* în poveste, pe lat: indexul în stânga, un singur text odată, în același loc (JS pune top și lățimea) */
@media (min-width: 900px) {
  .sx-eta.eta-js .eta-caps {
    position: absolute; left: 0; top: 0; width: 640px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 36px; align-items: start;
  }
  .sx-eta.eta-js .eta-cl { margin: 0; }
  .sx-eta.eta-js .eta-c { max-width: var(--eta-cn, 420px); }
  .sx-eta.eta-js .eta-c--wide { max-width: none; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); column-gap: clamp(28px, 3.4vw, 52px); align-items: start; }
  .sx-eta.eta-js .eta-c--wide h3 { margin: 0; font-size: 22px; line-height: 28px; }
  .sx-eta.eta-js .eta-c--wide p { max-width: 48ch; padding-top: 2px; }
}
.sx-eta.eta-js .eta-c { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .55s var(--eta-ease); }
.sx-eta.eta-js .eta-c.is-on { opacity: 1; transform: none; }
/* pe telefon: sub scenă; indexul arată doar numerele (eticheta rămâne pentru cititoare) */
@media (max-width: 899px) {
  .sx-eta.eta-js .eta-caps { margin-top: 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 6px; align-items: start; }
  .sx-eta.eta-js .eta-cl { margin: 0; }
  .sx-eta.eta-js .eta-nav { grid-auto-rows: 34px; margin-top: -5px; }
  .sx-eta.eta-js .eta-nb { gap: 5px; padding-right: 8px; }
  .sx-eta.eta-js .eta-nb-k { flex-basis: 15px; }
  .sx-eta.eta-js .eta-nb-k::before { width: 15px; transform: scaleX(.4); }
  .sx-eta.eta-js .eta-nb[aria-current] .eta-nb-k::before { transform: none; }
  .sx-eta.eta-js .eta-nb-n { font-size: 14px; }
  .sx-eta.eta-js .eta-nb-t { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .sx-eta .eta-c h3 { font-size: 19px; line-height: 25px; margin-bottom: 6px; }
  .sx-eta .eta-c p { font-size: 16px; line-height: 23px; max-width: 60ch; }
}
@media (max-width: 560px) {
  .sx-eta .eta-frag { grid-template-columns: repeat(2, auto); }
  .sx-eta .eta-frag .eta-f-dt { display: none; }
  .sx-eta .eta-frag .eta-f-dt + .eta-fh, .sx-eta .eta-frag .eta-f-dt + .eta-fd { border-left: 0; }
}

/* fără poveste: pașii devin o listă numerotată sub scenă */
.sx-eta:not(.eta-js) .eta-nav { display: none; }
.sx-eta:not(.eta-js) .eta-caps { margin-top: 26px; }
.sx-eta:not(.eta-js) .eta-cl { counter-reset: eta; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.sx-eta:not(.eta-js) .eta-c { counter-increment: eta; padding-top: 14px; border-top: 1px solid var(--line); }
.sx-eta:not(.eta-js) .eta-c h3::before { content: counter(eta); margin-right: 9px; color: var(--mute); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .sx-eta:not(.eta-js) .eta-cl { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 5. Jos ---------- */
.sx-eta .eta-foot { margin: 26px 0 0; max-width: 74ch; font: 400 16px/24px var(--ws); letter-spacing: -.005em; word-spacing: 0; color: var(--mute); text-wrap: pretty; }
@media (max-width: 899px) { .sx-eta .eta-foot { margin-top: 16px; } }

/* ---------- 6. Mișcare redusă: nicio mișcare pornită singură (sx-eta.js), nicio tranziție ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-eta .eta-c, .sx-eta .eta-nb, .sx-eta .eta-nb-k::before { transition: none; }
}