/* [cc 16.10] sx-stadii.css · partea „stadii”, varianta v3 „Evantaiul” (markup: parts/stadii.ro.php, liniile: js/sx-stadii.js).
   O compoziție statică, totul la vedere: sursa (butonul galben al șoferului) în stânga, trei rânduri în dreapta (poză mică + frază). Liniile de creion le desenează JS-ul
   peste figura .sx-stadii-fan (aceeași cerneală ca notițele din #captura: captura-pen.css --cp-pen); fără JS rămân doar sursa și cele trei rânduri.
   ≥ 1000 px: evantai (sursa | linii | poze aliniate la dreapta | text). < 1000 px: trunchi pe stânga, din buton în jos, cu o ramură spre fiecare poză (rânduri poză + text; < 680 px, textul sub poză).
   Pozele = ecranele reale desenate mic: programul (luminos / închis, ca #captura), emailul, pagina order.track.php (cu paleta ei reală, luminoasă / închisă), aplicația șoferului (mereu închisă).
   Temă: implicit luminos; html[data-theme="dark"] = închis. Totul sub .sx-stadii; nimic pe html/body. Spațiere Fibonacci (3 5 8 13 21 34 55 89). */

.sx-stadii {
  --sd-src: 240px; --sd-pic: 330px; --sd-txt: 420px; --sd-row: 132px; --sd-rgap: 21px; --sd-pgap: 34px; --sd-in: 34px;
  --sd-btn-y: 205px;   /* centrul butonului galben, de la marginea de sus a decupajului: aplicația 171 + bara 10 + 48/2 */
  --sd-ease: cubic-bezier(.16, 1, .3, 1);
  --sd-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sd-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  /* creionul (#captura) și pulsul (culoarea butonului) */
  --sd-pen: hsl(40 13% 23% / .66); --sd-pulse: #c98f22;
  /* programul, luminos */
  --sd-o-bg: #ffffff; --sd-o-bg2: #f6f7f9; --sd-o-ink: #1d2733; --sd-o-ink2: #4f5b68; --sd-o-ink3: #66717d; --sd-o-hair: #e4e7eb;
  --sd-o-fin: #e3f3e6; --sd-o-arr: #fdf3cf; --sd-o-red: #d40000; --sd-o-red-bg: #ffd3d4; --sd-o-ld: #2c6e22; --sd-o-ldl: #3d8b2f; --sd-o-ul: #1d2733; --sd-o-ul-ink: #ffffff; --sd-o-ul-line: #1d2733;
  /* emailul */
  --sd-m-bg: #ffffff; --sd-m-ink: #1f1f1f; --sd-m-ink2: #5f6368; --sd-m-box: #f4f4f4; --sd-m-av: #dfe5ec; --sd-m-av-ink: #4f5b68;
  /* pagina de urmărire (order.track.php, :root luminos) */
  --sd-t-bg: #f4f6f9; --sd-t-card: #ffffff; --sd-t-ink: #14181f; --sd-t-ink2: #4a5568; --sd-t-muted: #6b7688; --sd-t-line: #e3e7ee; --sd-t-ok: #0d7a4a; --sd-t-warn: #a15c00; --sd-t-warn-soft: #fff4e0; --sd-t-url: #e6e9ee;
  /* aplicația șoferului (mereu închisă) și ramele de telefon */
  --sd-a-bg: #151a1e; --sd-a-card: #1a2026; --sd-a-line: #2a3138; --sd-a-act: #3fa4c8; --sd-a-ink: #eef1f3; --sd-a-ink2: #9aa4ae; --sd-a-ink3: #737e89;
  --sd-a-ld: #7cc79a; --sd-a-ul: #e0ad55; --sd-a-btn: #e3b24e; --sd-a-btn2: #d6a13c; --sd-a-btn-ink: #1b1405;
  --sd-bezel: hsl(42 12% 12%); --sd-bezel-edge: inset 0 0 0 1px hsl(40 10% 30%);
  --sd-edge: rgba(20, 42, 62, .16);
  --sd-shadow: 0 1px 2px rgba(20, 42, 62, .06), 0 13px 34px -13px rgba(20, 42, 62, .26);
}
html[data-theme="dark"] .sx-stadii {
  --sd-pen: rgba(232, 228, 217, .62); --sd-pulse: #e2b453;
  --sd-o-bg: #17181b; --sd-o-bg2: #1f2024; --sd-o-ink: #e9e9ea; --sd-o-ink2: #b9bcc2; --sd-o-ink3: #8b9098; --sd-o-hair: rgba(255, 255, 255, .08);
  --sd-o-fin: rgba(106, 170, 106, .17); --sd-o-arr: rgba(226, 180, 83, .15); --sd-o-red: #ff7a7a; --sd-o-red-bg: rgba(255, 80, 80, .17); --sd-o-ld: #8fd09a; --sd-o-ldl: #4f9a60; --sd-o-ul: transparent; --sd-o-ul-ink: #e9e9ea; --sd-o-ul-line: rgba(233, 233, 234, .7);
  --sd-m-bg: #1f1f1f; --sd-m-ink: #e8eaed; --sd-m-ink2: #9aa0a6; --sd-m-box: #2a2a2a; --sd-m-av: #3c4043; --sd-m-av-ink: #e8eaed;
  --sd-t-bg: #0e0d0b; --sd-t-card: #1a1815; --sd-t-ink: #f5f3ef; --sd-t-ink2: #d6d1c8; --sd-t-muted: #a39d92; --sd-t-line: #36332c; --sd-t-ok: #4cc38a; --sd-t-warn: #e5a53a; --sd-t-warn-soft: #3a2a10; --sd-t-url: #24221d;
  --sd-bezel: #1c1c1e; --sd-bezel-edge: inset 0 0 0 1px rgba(255, 255, 255, .16);
  --sd-edge: rgba(255, 255, 255, .13);
  --sd-shadow: 0 21px 55px -21px rgba(0, 0, 0, .9);
}

/* ---------- figura ---------- */
.sx-stadii .sx-stadii-fan { position: relative; isolation: isolate; }
.sx-stadii .sx-stadii-outs { margin: 0; padding: 0; list-style: none; }
.sx-stadii .sx-stadii-out { margin: 0; padding: 0; list-style: none; min-width: 0; }
.sx-stadii .sx-stadii-pic, .sx-stadii .sx-stadii-drv { position: relative; z-index: 1; }

/* textul de lângă fiecare poză: eticheta (ca .facts dt) + fraza */
.sx-stadii .sx-stadii-txt { display: grid; gap: 5px; margin: 0; min-width: 0; }
.sx-stadii .sx-stadii-k { font: 500 12.5px/20px var(--sx-f-sans); letter-spacing: .12em; word-spacing: 0; text-transform: uppercase; color: var(--sx-ink3); }
.sx-stadii .sx-stadii-v { font: 400 18px/26px var(--sx-f-sans); letter-spacing: -.012em; word-spacing: 0; color: var(--sx-ink); text-wrap: pretty; }
.sx-stadii .sx-stadii-d { margin-top: 3px; font: 400 14.5px/21px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--sx-ink3); text-wrap: pretty; }
.sx-stadii .sx-stadii-txt--src { margin-top: 21px; }
.sx-stadii .sx-stadii-txt--src .sx-stadii-d { margin-top: 8px; font-size: 13px; line-height: 19px; }

/* ---------- sursa: decupajul de jos al aplicației șoferului (01-comanda-azi: cartonașele punctelor, bara cu CMR + butonul galben) ---------- */
.sx-stadii .sx-stadii-drv { width: var(--sd-src); max-width: 100%; padding: 0 7px 7px; border-radius: 0 0 38px 38px; background: var(--sd-bezel); box-shadow: var(--sd-bezel-edge), 0 21px 34px -21px rgba(0, 0, 0, .55);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55px); mask: linear-gradient(to bottom, transparent 0, #000 55px); }
.sx-stadii .sx-stadii-ap { height: 171px; padding: 21px 10px 0; background: var(--sd-a-bg); color: var(--sd-a-ink); font-family: var(--sd-sys); overflow: hidden; }
.sx-stadii .sx-stadii-ap * { letter-spacing: 0; word-spacing: 0; }
.sx-stadii .sx-stadii-ap-pt { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; column-gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--sd-a-line); border-radius: 13px; background: var(--sd-a-card); }
.sx-stadii .sx-stadii-ap-pt.is-act { display: block; height: auto; margin-top: 6px; padding: 0; border-color: var(--sd-a-act); }
.sx-stadii .sx-stadii-ap-ph { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 8px; height: 40px; padding: 0 10px; border-bottom: 1px solid var(--sd-a-line); }
.sx-stadii .sx-stadii-ap-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 10px; font-weight: 600; color: var(--sd-a-ld); }
.sx-stadii .sx-stadii-ap-no.is-ul { color: var(--sd-a-ul); }
.sx-stadii .sx-stadii-ap-ty { display: grid; line-height: 1.2; min-width: 0; }
.sx-stadii .sx-stadii-ap-ty b { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.sx-stadii .sx-stadii-ap-ty b.is-ld { color: var(--sd-a-ld); }
.sx-stadii .sx-stadii-ap-ty b.is-ul { color: var(--sd-a-ul); }
.sx-stadii .sx-stadii-ap-ty small { font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sd-a-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-stadii .sx-stadii-ap-pt.is-fin small { text-transform: none; letter-spacing: 0; color: var(--sd-a-ink); }
.sx-stadii .sx-stadii-ap-ok { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sd-a-ld); color: var(--sd-a-bg); }
.sx-stadii .sx-stadii-ap-ok svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-stadii .sx-stadii-ap-pb { display: grid; grid-template-columns: minmax(0, 1fr) 62px; align-items: center; gap: 8px; height: 62px; padding: 0 9px 0 10px; }
.sx-stadii .sx-stadii-ap-firm { display: grid; gap: 3px; min-width: 0; line-height: 1.2; }
.sx-stadii .sx-stadii-ap-firm b { font-size: 11.5px; font-weight: 700; color: var(--sd-a-ink); text-wrap: balance; }
.sx-stadii .sx-stadii-ap-firm small { font-size: 9px; color: var(--sd-a-ink2); }
.sx-stadii .sx-stadii-ap-plan { display: grid; justify-items: center; align-content: center; height: 46px; border-radius: 9px; background: #20272e; line-height: 1.15; }
.sx-stadii .sx-stadii-ap-plan small { font-size: 7px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sd-a-ink3); }
.sx-stadii .sx-stadii-ap-plan b { margin: 1px 0; font-size: 13.5px; font-weight: 700; color: var(--sd-a-ld); font-variant-numeric: tabular-nums; }
.sx-stadii .sx-stadii-ap-plan b + small { font-size: 8px; letter-spacing: 0; text-transform: none; color: var(--sd-a-ld); }
.sx-stadii .sx-stadii-ap-bar { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 10px 10px 14px; border-top: 1px solid var(--sd-a-line); border-radius: 0 0 31px 31px; background: var(--sd-a-bg); }
.sx-stadii .sx-stadii-ap-cmr { display: grid; place-items: center; align-content: center; gap: 1px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px #6f5a28; color: var(--sd-a-btn); font: 700 10px/1.1 var(--sd-sys); }
.sx-stadii .sx-stadii-ap-cmr svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* butonul galben: singurul lucru apăsabil din parte (un puls pe liniile de creion) */
.sx-stadii .sx-stadii-btn { display: grid; place-items: center; min-height: 48px; margin: 0; padding: 5px 10px; border: 0; border-radius: 12px; background: linear-gradient(var(--sd-a-btn), var(--sd-a-btn2)); color: var(--sd-a-btn-ink);
  font: 700 11.5px/1.2 var(--sd-sys); letter-spacing: .03em; text-transform: uppercase; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 13px -5px rgba(217, 168, 69, .6); transition: transform .14s ease, filter .2s ease; }
@media (hover: hover) { .sx-stadii .sx-stadii-btn:hover { filter: brightness(1.06); } }
.sx-stadii .sx-stadii-btn:active { transform: scale(.965); }
.sx-stadii .sx-stadii-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ---------- poza 1: programul (bara de sus cu banda roșie + punctele comenzii) ---------- */
.sx-stadii .sx-stadii-off { width: 330px; max-width: 100%; border: 1px solid var(--sd-edge); border-radius: 8px; background: var(--sd-o-bg); box-shadow: var(--sd-shadow); color: var(--sd-o-ink); font: 400 11px/1.3 var(--sd-sys); }
.sx-stadii .sx-stadii-off * { letter-spacing: 0; word-spacing: 0; }
.sx-stadii .sx-stadii-off-bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px 0 10px; border-bottom: 1px solid var(--sd-o-hair); border-radius: 7px 7px 0 0; background: var(--sd-o-bg2); }
.sx-stadii .sx-stadii-off-logo svg { display: block; width: 14px; height: 14px; fill: none; stroke: var(--sd-o-ink); stroke-width: 2.2; stroke-linejoin: round; }
.sx-stadii .sx-stadii-off-bar > b { margin-right: auto; font-size: 11.5px; font-weight: 600; color: var(--sd-o-ink); }
.sx-stadii .sx-stadii-off-band { min-width: 0; padding: 3px 7px; border-radius: 4px; background: var(--sd-o-red-bg); color: var(--sd-o-red); font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-stadii .sx-stadii-off-msg { position: relative; display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; color: var(--sd-o-ink2); }
.sx-stadii .sx-stadii-off-msg svg { width: 15px; height: 15px; fill: currentColor; }
.sx-stadii .sx-stadii-off-msg i { position: absolute; top: 1px; right: -6px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #d9302c; color: #ffffff; font: normal 700 8.5px/14px var(--sd-sys); text-align: center; box-shadow: 0 0 0 1.5px var(--sd-o-bg2); }
.sx-stadii .sx-stadii-off-th, .sx-stadii .sx-stadii-off-tr { display: grid; grid-template-columns: 66px minmax(0, 1fr) 94px 52px; column-gap: 8px; align-items: center; padding: 0 10px; }
.sx-stadii .sx-stadii-off-th { height: 18px; font: 400 8px/1 var(--sd-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--sd-o-ink3); }
.sx-stadii .sx-stadii-off-th span:last-child, .sx-stadii .sx-stadii-off-km { text-align: right; }
.sx-stadii .sx-stadii-off-tr { min-height: 34px; padding-block: 4px; border-top: 1px solid var(--sd-o-hair); }
.sx-stadii .sx-stadii-off-tr.is-fin { background: var(--sd-o-fin); }
.sx-stadii .sx-stadii-off-tr:last-child { border-radius: 0 0 7px 7px; }
.sx-stadii .sx-stadii-off-tr.is-arr { min-height: 42px; background: var(--sd-o-arr); }
.sx-stadii .sx-stadii-off-tag { display: grid; place-items: center; height: 18px; border-radius: 3px; font: 400 7.5px/1 var(--sd-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sx-stadii .sx-stadii-off-tag.is-ld { box-shadow: inset 0 0 0 1px var(--sd-o-ldl); color: var(--sd-o-ld); }
.sx-stadii .sx-stadii-off-tag.is-ul { background: var(--sd-o-ul); box-shadow: inset 0 0 0 1px var(--sd-o-ul-line); color: var(--sd-o-ul-ink); }
.sx-stadii .sx-stadii-off-loc { display: grid; line-height: 1.2; min-width: 0; }
.sx-stadii .sx-stadii-off-loc b { font-size: 11px; font-weight: 700; color: var(--sd-o-ink); }
.sx-stadii .sx-stadii-off-loc small { font-size: 8.5px; color: var(--sd-o-ink3); }
.sx-stadii .sx-stadii-off-t { line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-stadii .sx-stadii-off-t > b { font-size: 11px; font-weight: 600; color: var(--sd-o-ink); }
.sx-stadii .sx-stadii-off-t > small { font-size: 8.5px; color: var(--sd-o-ink3); }
.sx-stadii .sx-stadii-off-lt { display: block; font-size: 8px !important; }
.sx-stadii .sx-stadii-off-lt b { font-weight: 700; color: var(--sd-o-ink2); }
.sx-stadii .sx-stadii-off-km b { font-size: 11px; font-weight: 600; color: var(--sd-o-ink); font-variant-numeric: tabular-nums; }

/* ---------- poza 2: emailul primit de client ---------- */
.sx-stadii .sx-stadii-mail { width: 310px; max-width: 100%; padding: 11px 13px 12px; border: 1px solid var(--sd-edge); border-radius: 10px; background: var(--sd-m-bg); box-shadow: var(--sd-shadow); color: var(--sd-m-ink); font: 400 11px/1.35 var(--sd-sys); }
.sx-stadii .sx-stadii-mail * { letter-spacing: 0; word-spacing: 0; }
.sx-stadii .sx-stadii-mail-hd { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sx-stadii .sx-stadii-mail-av { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--sd-m-av); color: var(--sd-m-av-ink); font-size: 9px; font-weight: 700; }
.sx-stadii .sx-stadii-mail-from { display: grid; min-width: 0; line-height: 1.25; }
.sx-stadii .sx-stadii-mail-from b { font-size: 10.5px; font-weight: 700; color: var(--sd-m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-stadii .sx-stadii-mail-from small { font-size: 9px; color: var(--sd-m-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-stadii .sx-stadii-mail-subj { margin: 7px 0 0; font-size: 11.5px; font-weight: 700; line-height: 1.35; color: var(--sd-m-ink); overflow-wrap: anywhere; }
.sx-stadii .sx-stadii-mail-body { margin: 7px 0 0; padding: 5px 9px; border-radius: 6px; background: var(--sd-m-box); font-size: 9.5px; line-height: 1.55; color: var(--sd-m-ink2); }
.sx-stadii .sx-stadii-mail-body b { font-weight: 600; color: var(--sd-m-ink); }

/* ---------- poza 3: pagina de urmărire pe telefonul clientului (order.track.php, decupajul de sus) ---------- */
.sx-stadii .sx-stadii-trk { position: relative; z-index: 1; width: 204px; max-width: 100%; height: 142px; }
.sx-stadii .sx-stadii-trk-scr { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; padding: 6px 6px 0; border-radius: 32px 32px 0 0; background: var(--sd-bezel); box-shadow: var(--sd-bezel-edge); font-family: var(--sd-sys); color: var(--sd-t-ink);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent); mask: linear-gradient(to bottom, #000 calc(100% - 34px), transparent); }
.sx-stadii .sx-stadii-trk-scr::before { content: ""; position: absolute; inset: 6px 6px 0; z-index: -1; border-radius: 26px 26px 0 0; background: var(--sd-t-bg); }
.sx-stadii .sx-stadii-trk-scr * { letter-spacing: 0; word-spacing: 0; }
.sx-stadii .sx-stadii-trk-isl { position: relative; top: 6px; display: block; flex: 0 0 auto; width: 50px; height: 13px; margin: 0 auto; border-radius: 8px; background: #000000; }
.sx-stadii .sx-stadii-trk-url { display: flex; align-items: center; gap: 4px; height: 17px; margin: 13px 8px 0; padding: 0 7px; border-radius: 6px; background: var(--sd-t-url); color: var(--sd-t-ink2); font-size: 7.5px; white-space: nowrap; overflow: hidden; }
.sx-stadii .sx-stadii-trk-url svg { width: 8px; height: 8px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.4; }
.sx-stadii .sx-stadii-trk-card { margin: 6px 8px 0; border: 1px solid var(--sd-t-line); border-radius: 9px; background: var(--sd-t-card); overflow: hidden; }
.sx-stadii .sx-stadii-trk-head { padding: 6px 8px 6px; border-bottom: 1px solid var(--sd-t-line); line-height: 1.2; }
.sx-stadii .sx-stadii-trk-head b { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; color: var(--sd-t-ink); }
.sx-stadii .sx-stadii-trk-pill { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 999px; background: var(--sd-t-warn-soft); color: var(--sd-t-warn); font-size: 7.5px; font-weight: 700; }
.sx-stadii .sx-stadii-trk-prog { display: block; padding: 6px 8px 3px; }
.sx-stadii .sx-stadii-trk-prog > span { display: flex; justify-content: space-between; font-size: 8.5px; line-height: 1.2; }
.sx-stadii .sx-stadii-trk-prog > span b { font-weight: 600; color: var(--sd-t-ink); }
.sx-stadii .sx-stadii-trk-prog > i { display: block; height: 5px; margin-top: 4px; border-radius: 999px; background: var(--sd-t-line); overflow: hidden; }
.sx-stadii .sx-stadii-trk-prog > i > i { display: block; width: 50%; height: 100%; border-radius: 999px; background: var(--sd-t-ok); }
.sx-stadii .sx-stadii-trk-st { position: relative; margin: 0 8px 0 13px; padding: 0 0 6px 10px; border-left: 1.5px solid var(--sd-t-line); line-height: 1.2; }
.sx-stadii .sx-stadii-trk-st.is-done { margin-top: 7px; }
.sx-stadii .sx-stadii-trk-st::before { content: ""; position: absolute; left: -5px; top: 1px; width: 8.5px; height: 8.5px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--sd-t-muted); background: var(--sd-t-card); }
.sx-stadii .sx-stadii-trk-st.is-done::before { border-color: var(--sd-t-ok); background: var(--sd-t-ok); }
.sx-stadii .sx-stadii-trk-st b { display: block; font-size: 8.5px; font-weight: 700; color: var(--sd-t-ink); }
.sx-stadii .sx-stadii-trk-st small { display: block; font-size: 7.5px; color: var(--sd-t-muted); }
.sx-stadii .sx-stadii-trk-st.is-done small { color: var(--sd-t-ok); font-weight: 600; }

/* sosirea pulsului: un contur subțire în culoarea butonului, o singură dată */
.sx-stadii .sx-stadii-pic::after { content: ""; position: absolute; inset: -5px; border-radius: 13px; box-shadow: 0 0 0 1.5px var(--sd-pulse); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.sx-stadii .sx-stadii-trk::after { bottom: 0; border-radius: 37px 37px 0 0; -webkit-mask-image: linear-gradient(#000 50%, transparent 92%); mask: linear-gradient(#000 50%, transparent 92%); }
.sx-stadii .sx-stadii-out.is-hit .sx-stadii-pic::after { opacity: 1; transition-duration: .12s; }

/* ---------- liniile de creion (SVG pus de JS peste figură) ---------- */
.sx-stadii .sx-stadii-pen { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sx-stadii .sx-stadii-pen .k { stroke: var(--sd-pen); stroke-width: 1.5px; transition: stroke .3s ease; }
.sx-stadii .sx-stadii-pen .k2 { stroke: var(--sd-pen); stroke-width: 1.3px; opacity: .4; }
.sx-stadii .sx-stadii-pen .o { fill: var(--sd-pen); stroke: none; }
.sx-stadii .sx-stadii-pen .p { stroke: var(--sd-pulse); stroke-width: 2.6px; stroke-dasharray: .1 2; stroke-dashoffset: .1; opacity: 0; }
.sx-stadii .sx-stadii-fan.is-lit .sx-stadii-pen .k { stroke: var(--sd-pulse); transition-duration: .1s; }
/* desenul, o singură dată, când figura intră în ecran (JS: .is-armed → .is-drawn); nimic la mișcare redusă */
.sx-stadii .sx-stadii-fan.is-armed .sx-stadii-pen .k, .sx-stadii .sx-stadii-fan.is-armed .sx-stadii-pen .k2 { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sx-stadii .sx-stadii-fan.is-armed .sx-stadii-pen .o { opacity: 0; }
.sx-stadii .sx-stadii-fan.is-armed.is-drawn .sx-stadii-pen .k, .sx-stadii .sx-stadii-fan.is-armed.is-drawn .sx-stadii-pen .k2 { stroke-dashoffset: 0; transition: stroke-dashoffset .75s cubic-bezier(.45, 0, .2, 1) var(--d, 0s), stroke .3s ease; }
.sx-stadii .sx-stadii-fan.is-armed.is-drawn .sx-stadii-pen .h { transition-duration: .2s, .3s; }
.sx-stadii .sx-stadii-fan.is-armed.is-drawn .sx-stadii-pen .o { opacity: 1; transition: opacity .3s ease; }

/* ---------- ecran lat: evantaiul ---------- */
@media (min-width: 1000px) {
  .sx-stadii .sx-stadii-fan { display: grid; grid-template-columns: var(--sd-src) minmax(89px, 1fr) auto; align-items: start; }
  .sx-stadii .sx-stadii-src { grid-column: 1; margin-top: calc(var(--sd-row) * 1.5 + var(--sd-rgap) - var(--sd-btn-y)); }
  .sx-stadii .sx-stadii-outs { grid-column: 3; display: grid; row-gap: var(--sd-rgap); }
  .sx-stadii .sx-stadii-out { display: grid; grid-template-columns: var(--sd-pic) minmax(0, var(--sd-txt)); column-gap: var(--sd-pgap); align-items: center; min-height: var(--sd-row); }
  .sx-stadii .sx-stadii-pic { justify-self: end; }
}
@media (min-width: 1000px) and (max-width: 1239px) {
  .sx-stadii { --sd-src: 216px; --sd-txt: 340px; --sd-pgap: 26px; }
  .sx-stadii .sx-stadii-ap-pb { grid-template-columns: minmax(0, 1fr) 52px; gap: 6px; padding-right: 8px; }
  .sx-stadii .sx-stadii-ap-firm b { font-size: 10.5px; text-wrap: wrap; }
  .sx-stadii .sx-stadii-v { font-size: 17px; line-height: 25px; }
}

/* ---------- ecran îngust: trunchiul pe stânga ---------- */
@media (max-width: 999px) {
  .sx-stadii .sx-stadii-fan { padding-left: var(--sd-in); }
  .sx-stadii .sx-stadii-src { max-width: 340px; }
  .sx-stadii .sx-stadii-outs { display: grid; row-gap: 34px; margin-top: 55px; }
  .sx-stadii .sx-stadii-out { display: grid; grid-template-columns: var(--sd-pic) minmax(0, 1fr); column-gap: 26px; align-items: center; }
  .sx-stadii .sx-stadii-pic { justify-self: start; }
  .sx-stadii .sx-stadii-v { font-size: 17px; line-height: 25px; }
}
@media (min-width: 680px) and (max-width: 999px) {
  /* ca rândurile de dedesubt: telefonul în stânga, fraza șoferului lângă el */
  .sx-stadii .sx-stadii-src { display: grid; grid-template-columns: var(--sd-src) minmax(0, 1fr); column-gap: 26px; align-items: center; max-width: none; }
  .sx-stadii .sx-stadii-txt--src { margin-top: 0; }
}
@media (max-width: 679px) {
  .sx-stadii { --sd-in: 29px; }
  .sx-stadii .sx-stadii-out { grid-template-columns: minmax(0, 1fr); row-gap: 13px; }
  .sx-stadii .sx-stadii-outs { row-gap: 34px; margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-stadii .sx-stadii-btn, .sx-stadii .sx-stadii-pen .k, .sx-stadii .sx-stadii-pic::after { transition: none; }
  .sx-stadii .sx-stadii-btn:active { transform: none; }
  .sx-stadii .sx-stadii-pen .k, .sx-stadii .sx-stadii-pen .k2 { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .sx-stadii .sx-stadii-pen .o { opacity: 1 !important; }
  .sx-stadii .sx-stadii-pen .p { display: none; }
}
@media print { .sx-stadii .sx-stadii-pen .p { display: none; } }