/* [cc 16.10] site26 · sx-tahograf.css: portat din site-sectiuni/sectiuni/tahograf-a.css (02.10, #57), totul sub .sx-tahograf, clase ta-*, doar px.
   Discul, Sinteza si Calcul Detasare sunt desenate de noi in limbajul site-ului: urmeaza tema paginii (html[data-theme="dark"], neutru pe negru);
   obiectele fizice (cardul soferului, numarul de inmatriculare, foaia PDF) raman deschise. Culorile activitatilor = AETR din program. */

.sx-tahograf {
  --ta-gap: clamp(44px, 5.6vw, 80px);
  /* activitățile (AETR, driver.card.query.php :148): grafic + text cu contrast pe alb */
  --ta-drive: #e4472d; --ta-drive-t: #bd3820;
  --ta-work: #3c73cb;  --ta-work-t: #2c5eae;
  --ta-avail: #98a1ad; --ta-avail-t: #5a6471;
  --ta-rest: #58aa51;  --ta-rest-t: #2d7432;
  /* discul */
  --ta-plate-hi: #fefdfb;
  --ta-plate-lo: #f0eee8;
  --ta-plate-shadow:
    0 0 0 1px rgba(28, 38, 50, .06),
    0 1px 2px rgba(28, 38, 50, .05),
    0 10px 22px -8px rgba(28, 38, 50, .09),
    0 34px 64px -20px rgba(28, 38, 50, .16),
    0 80px 120px -48px rgba(28, 38, 50, .22);
  --ta-rim: rgba(28, 38, 50, .075);
  --ta-hub: #f4f2ed;
  --ta-hub-shadow: inset 0 1px 3px rgba(28, 38, 50, .08), inset 0 0 0 1px rgba(28, 38, 50, .055), 0 1px 0 rgba(255, 255, 255, .95);
  --ta-ink: #1d2733;                      /* gradațiile, acul, urma dintre benzi */
  --ta-guide: rgba(29, 39, 51, .085);
  --ta-glow: rgba(253, 252, 249, .9);
  /* cardul de calcul */
  --ta-card: #ffffff;
  --ta-card-shadow:
    0 0 0 1px rgba(28, 38, 50, .06),
    0 1px 2px rgba(28, 38, 50, .05),
    0 6px 14px -4px rgba(28, 38, 50, .07),
    0 22px 44px -12px rgba(28, 38, 50, .12),
    0 52px 92px -32px rgba(28, 38, 50, .16);
  --ta-soft: rgba(29, 39, 51, .055);
  --ta-rule: rgba(29, 39, 51, .09);
  --ta-track: rgba(29, 39, 51, .07);
  --ta-box-line: #aab2bc;
  --ta-check: #ffffff;
  --ta-money: hsl(40 30% 97%);
  /* cardul șoferului (obiect fizic: rămâne deschis și pe tema închisă) */
  --ta-dc-a: #fdfcf8; --ta-dc-b: #ecebe4;
  --ta-dc-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .7),
    0 0 0 1px rgba(29, 39, 51, .10),
    0 2px 3px rgba(23, 32, 43, .10),
    0 16px 28px -12px rgba(23, 32, 43, .34),
    0 40px 64px -30px rgba(23, 32, 43, .30);
  overflow-x: clip;                       /* lumina din spatele discului e mai lată decât ecranul telefonului */
}
html[data-theme="dark"] .sx-tahograf {
  --ta-drive: #f0654b; --ta-drive-t: #f58b75;
  --ta-work: #6b9ae6;  --ta-work-t: #95b6ef;
  --ta-avail: #8a93a0; --ta-avail-t: #b3bac4;
  --ta-rest: #6cbc64;  --ta-rest-t: #93d08b;
  --ta-plate-hi: #1e1e1e;
  --ta-plate-lo: #141414;
  --ta-plate-shadow: 0 0 0 1px rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .4), 0 44px 90px -26px rgba(0, 0, 0, .85);
  --ta-rim: rgba(255, 255, 255, .06);
  --ta-hub: #101010;
  --ta-hub-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 0 rgba(255, 255, 255, .04);
  --ta-ink: #e6e6e6;
  --ta-guide: rgba(255, 255, 255, .075);
  --ta-glow: rgba(255, 255, 255, .05);
  --ta-card: #141414;
  --ta-card-shadow: 0 0 0 1px rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .35), 0 30px 60px -20px rgba(0, 0, 0, .8);
  --ta-soft: rgba(255, 255, 255, .07);
  --ta-rule: rgba(255, 255, 255, .10);
  --ta-track: rgba(255, 255, 255, .08);
  --ta-box-line: #5c5c5c;
  --ta-check: #101010;
  --ta-money: rgba(255, 255, 255, .03);
  --ta-dc-a: #e6e3da; --ta-dc-b: #d2cec4;
  --ta-dc-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .4), 0 30px 50px -18px rgba(0, 0, 0, .75);
}
/* culoarea fiecărei activități, oriunde apare (bandă, rând, bifă, citire) */
.sx-tahograf [data-k="drive"] { --k: var(--ta-drive); --k-t: var(--ta-drive-t); }
.sx-tahograf [data-k="work"]  { --k: var(--ta-work);  --k-t: var(--ta-work-t); }
.sx-tahograf [data-k="avail"] { --k: var(--ta-avail); --k-t: var(--ta-avail-t); }
.sx-tahograf [data-k="rest"]  { --k: var(--ta-rest);  --k-t: var(--ta-rest-t); }
.sx-tahograf b, .sx-tahograf strong { word-spacing: -0.02em; }
/* base.css strânge spațierea pe ORICE element (body *): copiii textelor cu spațiere proprie o moștenesc de la părinte */
.sx-tahograf :is(.ta-note, .ta-id-pl, .ta-places, .ta-calc-d, .ta-axis, .ta-cb, .ta-r-k, .ta-dc-tag) * { letter-spacing: inherit; word-spacing: inherit; }

/* ---------- 1. Antetul (titlul are mărimea, interliniajul și spațierea din base.css, ca secțiunile-reper: 38 px la 1440) ---------- */
.sx-tahograf .ta-head { display: grid; gap: 18px; justify-items: start; max-width: 940px; margin-bottom: clamp(52px, 6vw, 84px); }
.sx-tahograf .ta-lede { margin-top: 4px; font-size: 19px; line-height: 1.6; max-width: 590px; }

/* ---------- 2. Scena ---------- */
.sx-tahograf .ta-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
.sx-tahograf .ta-stage > * { min-width: 0; }

/* --- 2a. Ziua: fișierul de card, linia în 00:00, discul --- */
.sx-tahograf .ta-day { margin: 0; display: grid; justify-items: center; align-content: start; }
.sx-tahograf .ta-file {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 18px 9px 10px; border-radius: 14px; background: var(--ta-card); box-shadow: var(--ta-card-shadow);
  transition: opacity .45s ease, transform .6s var(--sx-ease);
}
/* cipul cardului (obiectul real, nu decor) */
.sx-tahograf .ta-chip {
  position: relative; flex: 0 0 auto; width: 30px; height: 23px; border-radius: 5px;
  background: linear-gradient(140deg, #efd795 0%, #d4ad58 52%, #b48a38 100%);
  box-shadow: inset 0 0 0 1px rgba(92, 66, 20, .45), 0 1px 1px rgba(60, 40, 10, .15);
}
.sx-tahograf .ta-chip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: rgba(92, 66, 20, .5); }
.sx-tahograf .ta-chip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 34%; width: 32%; border-left: 1px solid rgba(92, 66, 20, .5); border-right: 1px solid rgba(92, 66, 20, .5); }
.sx-tahograf .ta-file-t { display: grid; line-height: 1.3; }
.sx-tahograf .ta-file-t b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--sx-ink); }
.sx-tahograf .ta-file-t span { font-size: 12.5px; letter-spacing: -0.005em; word-spacing: 0; color: var(--sx-ink3); }
.sx-tahograf .ta-feed { position: relative; z-index: 3; display: block; width: 2px; height: 34px; }
.sx-tahograf .ta-feed::before {
  content: ""; position: absolute; inset: 0; border-radius: 1px; background: var(--sx-accent);
  transform-origin: 50% 0; transition: transform .38s var(--sx-ease) .2s;
}
.sx-tahograf .ta-feed::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--sx-accent); box-shadow: 0 0 0 3px var(--ta-plate-hi); transition: opacity .2s ease .5s, transform .3s var(--sx-ease) .5s;
}

/* --- 2a'. Cardul șoferului (≥ 960, grefat din varianta B): obiectul din care pleacă ziua (F-tahograf §15). Stă înclinat peste
   marginea discului, sus în stânga, cu numele fișierului ca etichetă; linia lui coboară în 00:00. Pe telefon: pastila de mai sus.
   Pozițiile sunt în procente din disc (discul e pătrat), deci cardul se micșorează odată cu el. --- */
.sx-tahograf .ta-disc { position: relative; width: 100%; max-width: 540px; }
.sx-tahograf .ta-dc, .sx-tahograf .ta-dc-feed { display: none; }
.sx-tahograf .ta-dc {
  position: absolute; z-index: 3; left: 1%; top: -15%; width: 41%; pointer-events: none;
  transform: rotate(-6deg);
  transition: opacity .35s ease, transform .8s var(--sx-ease), translate .8s var(--sx-ease);
}
.sx-tahograf .ta-dc-card {
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 85.6 / 54; border-radius: 11px; overflow: hidden;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(120, 168, 214, .20), transparent 58%),
    radial-gradient(110% 130% at 0% 100%, rgba(226, 160, 186, .20), transparent 62%),
    linear-gradient(118deg, var(--ta-dc-a) 0%, var(--ta-dc-b) 100%);
  box-shadow: var(--ta-dc-shadow); color: #1d2733;
}
.sx-tahograf .ta-dc-card, .sx-tahograf .ta-dc-card * { letter-spacing: .01em; word-spacing: 0; }
.sx-tahograf .ta-dc-print {                 /* fondul de securitate: rozeta și liniile fine */
  position: absolute; inset: 0;
  background:
    repeating-radial-gradient(circle at 96% 6%, rgba(40, 90, 150, .085) 0 .6px, transparent 1px 4.4px),
    repeating-linear-gradient(-16deg, rgba(160, 80, 112, .05) 0 .6px, transparent 1px 3.8px);
  -webkit-mask: linear-gradient(100deg, transparent 22%, #000 70%);
          mask: linear-gradient(100deg, transparent 22%, #000 70%);
}
.sx-tahograf .ta-dc-ro {
  position: absolute; left: 6cqw; top: 6.4cqw; width: 11.6cqw; height: 7.8cqw; border-radius: 1.2cqw;
  display: grid; place-items: center; background: #21508f; color: #ffffff; font-size: 4.2cqw; font-weight: 700; line-height: 1;
  box-shadow: inset 0 0 0 .45cqw rgba(242, 201, 76, .9);
}
.sx-tahograf .ta-dc-hd { position: absolute; left: 20.6cqw; top: 5.6cqw; display: grid; line-height: 1.12; }
.sx-tahograf .ta-dc-hd small { font-size: 2.5cqw; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #5d6874; }
.sx-tahograf .ta-dc-hd b { font-size: 4.9cqw; font-weight: 700; color: #22324a; letter-spacing: -.005em; }
.sx-tahograf .ta-dc-ph {
  position: absolute; right: 6.4cqw; top: 6.4cqw; width: 16.5cqw; aspect-ratio: 3 / 4; border-radius: 1.6cqw; overflow: hidden;
  background: linear-gradient(165deg, #e2e6eb, #c6cdd6);
}
.sx-tahograf .ta-dc-ph svg { display: block; width: 100%; height: 100%; fill: #a3adb9; }
.sx-tahograf .ta-dc-chip {
  position: absolute; left: 7cqw; top: 26.5cqw; width: 14.6cqw; aspect-ratio: 40 / 32; border-radius: 2.3cqw; overflow: hidden;
  background: linear-gradient(135deg, #f4df9c 0%, #d9b45c 40%, #bf933f 68%, #e6ca7c 100%);
  box-shadow: inset 0 0 0 .32cqw rgba(110, 80, 22, .38), 0 .3cqw .6cqw rgba(90, 64, 18, .18);
}
.sx-tahograf .ta-dc-chip svg { display: block; width: 100%; height: 100%; fill: none; stroke: rgba(104, 74, 20, .55); stroke-width: 1.1; }
.sx-tahograf .ta-dc-f {
  position: absolute; left: 27.4cqw; top: 25cqw; display: grid; gap: .7cqw;
  font-size: 3.7cqw; font-weight: 600; line-height: 1.32; color: #1d2733; font-variant-numeric: tabular-nums lining-nums;
}
.sx-tahograf .ta-dc-f i { display: inline-block; min-width: 4.8cqw; margin-right: 1.2cqw; font-style: normal; font-size: 2.7cqw; font-weight: 500; color: #67727f; }
.sx-tahograf .ta-dc-holo {                  /* luciul trece o singură dată peste card, cât se citește fișierul */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .62) 43%, rgba(176, 218, 255, .34) 49%, rgba(255, 196, 230, .28) 55%, transparent 66%);
  background-size: 300% 100%; background-position: 100% 0;
}
.sx-tahograf .ta-dc-tag {
  position: absolute; right: -7%; top: 0; transform: translateY(-82%);
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; white-space: nowrap;
  background: var(--ta-card); box-shadow: var(--ta-card-shadow);
  font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; word-spacing: 0; color: var(--sx-ink); font-variant-numeric: tabular-nums;
}
.sx-tahograf .ta-dc-tag svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--sx-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-tahograf .ta-dc-feed { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sx-tahograf .ta-dc-feed path {
  fill: none; stroke: var(--sx-accent); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--sx-ease) .2s;
}
.sx-tahograf .ta-dc-feed circle { fill: var(--sx-accent); stroke: var(--ta-plate-hi); stroke-width: 3.6; transition: opacity .2s ease .5s; }

.sx-tahograf .ta-dial {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1;
  container: tadial / inline-size; border-radius: 50%; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.sx-tahograf .ta-dial::before {               /* lumina moale din spatele discului */
  content: ""; position: absolute; z-index: -1; inset: -22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--ta-glow), transparent);
}
.sx-tahograf .ta-dial:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 6px; border-radius: 50%; }
.sx-tahograf .ta-plate {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--ta-plate-hi) 0 50%, var(--ta-plate-lo) 100%);
  box-shadow: var(--ta-plate-shadow);
}
.sx-tahograf .ta-plate::after { content: ""; position: absolute; inset: 1.9%; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ta-rim); }
.sx-tahograf .ta-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* gradațiile: la 15 minute, la oră, la 3 ore (ca pe axa benzii din program) */
.sx-tahograf .ta-ticks path { fill: none; stroke: var(--ta-ink); stroke-linecap: round; }
.sx-tahograf .ta-tick-q { stroke-width: 1.1; opacity: .17; }
.sx-tahograf .ta-tick-h { stroke-width: 1.4; opacity: .36; }
.sx-tahograf .ta-tick-3 { stroke-width: 2.2; opacity: .66; }
.sx-tahograf .ta-hours text {
  font-family: var(--sx-f-sans); font-size: 17px; font-weight: 500; fill: var(--sx-ink2);
  text-anchor: middle; dominant-baseline: central; letter-spacing: 0; word-spacing: 0; font-variant-numeric: tabular-nums lining-nums;
}
.sx-tahograf .ta-guides circle { fill: none; stroke: var(--ta-guide); stroke-width: 1.2; }
/* ziua de lucru (de la începutul la sfârșitul ei, din locurile de pe card): pe margine, cu cele două puncte */
.sx-tahograf .ta-work { fill: none; stroke: var(--ta-ink); stroke-width: 2.2; opacity: .5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.sx-tahograf .ta-pin { fill: var(--ta-plate-hi); stroke: var(--ta-ink); stroke-width: 2.2; transition: opacity .3s ease; }
/* activitățile */
.sx-tahograf .ta-arc { fill: none; stroke: var(--k); stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: opacity .25s ease; }
.sx-tahograf .ta-arc[data-k="drive"] { stroke-width: 26px; }
.sx-tahograf .ta-arc[data-k="work"]  { stroke-width: 16px; }
.sx-tahograf .ta-arc[data-k="avail"] { stroke-width: 10px; }
.sx-tahograf .ta-arc[data-k="rest"]  { stroke-width: 6px; }
/* urma acului între benzi, la fiecare schimbare de activitate */
.sx-tahograf .ta-jump { fill: none; stroke: var(--ta-ink); stroke-width: 1.5; stroke-linecap: round; opacity: .36; transition: opacity .2s ease; }
.sx-tahograf .ta-hand { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.sx-tahograf .ta-hand path { fill: none; stroke: var(--ta-ink); stroke-width: 2.4; stroke-linecap: round; }
.sx-tahograf .ta-hand circle { fill: var(--ta-ink); }
.sx-tahograf .ta-stylus { opacity: 0; fill: var(--k, var(--ta-rest)); stroke: var(--ta-plate-hi); stroke-width: 4; transition: opacity .2s ease; pointer-events: none; }
/* punctul din care pleacă linia spre c10 (doar cu linia) */
.sx-tahograf .ta-mark { display: none; transition: opacity .3s ease; }
.sx-tahograf .is-wired .ta-mark { display: inline; }
.sx-tahograf .ta-mark-h { fill: none; stroke: var(--ta-plate-hi); stroke-width: 7; }
.sx-tahograf .ta-mark-r { fill: none; stroke: var(--sx-accent); stroke-width: 2.6; }

/* mijlocul discului: cine, când, cu ce camion și unde a început / s-a terminat ziua de lucru; în timpul citirii, ora acului */
.sx-tahograf .ta-hub {
  position: absolute; left: 50%; top: 50%; width: 47.5%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--ta-hub); box-shadow: var(--ta-hub-shadow);
  display: grid; place-items: center; text-align: center; pointer-events: none;
}
.sx-tahograf .ta-id, .sx-tahograf .ta-live { grid-area: 1 / 1; display: grid; justify-items: center; }
/* cele două straturi din mijloc se schimbă pe rând, niciodată suprapuse: cel care pleacă se stinge primul (140 ms, fără
   întârziere), cel care vine așteaptă 170 ms și apare în 220 ms. Tranziția e scrisă pe fiecare stare (aici: vine „cine/când”;
   în § 3: vine citirea acului). */
.sx-tahograf .ta-id { transition: opacity .22s ease .17s; }
.sx-tahograf .ta-live { opacity: 0; transition: opacity .14s ease; }
.sx-tahograf .ta-id-d { font-size: clamp(11px, 2.4cqw, 13px); line-height: 1.3; letter-spacing: 0; word-spacing: 0; color: var(--sx-ink2); }
.sx-tahograf .ta-id-n { margin-top: 3px; font-size: clamp(17px, 4.3cqw, 23.5px); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; color: var(--sx-ink); }
.sx-tahograf .ta-id-v {
  margin-top: 5px; padding: 1px 7px; border-radius: 5px; background: var(--ta-soft);
  font-size: clamp(10.5px, 2.25cqw, 12px); font-weight: 600; line-height: 1.5; letter-spacing: .06em; word-spacing: 0; color: var(--sx-ink2);
  font-variant-numeric: tabular-nums lining-nums;
}
.sx-tahograf .ta-id-pl, .sx-tahograf .ta-pl {
  display: grid; grid-template-columns: repeat(4, auto); column-gap: 8px; row-gap: 2px; align-items: baseline;
  font-size: clamp(10.5px, 2.2cqw, 12px); line-height: 1.45; letter-spacing: 0; word-spacing: 0; font-variant-numeric: tabular-nums lining-nums;
}
.sx-tahograf .ta-id-pl { margin-top: clamp(9px, 2.4cqw, 13px); padding-top: clamp(8px, 2cqw, 11px); border-top: 1px solid var(--ta-rule); }
.sx-tahograf .ta-id-pl i, .sx-tahograf .ta-pl i { font-style: normal; color: var(--sx-ink3); text-align: left; }
.sx-tahograf .ta-id-pl span, .sx-tahograf .ta-pl span { color: var(--sx-ink); text-align: right; }
.sx-tahograf .ta-id-pl span:nth-of-type(4n + 2), .sx-tahograf .ta-pl span:nth-of-type(4n + 2) { color: var(--sx-ink2); text-align: center; }
.sx-tahograf .ta-live-t { font-size: clamp(26px, 7.2cqw, 39px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; word-spacing: 0; color: var(--sx-ink); font-variant-numeric: tabular-nums lining-nums; }
.sx-tahograf .ta-live-a {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 7px;
  font-size: clamp(12.5px, 2.7cqw, 14.5px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--k-t);
}
.sx-tahograf .ta-live-a::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.sx-tahograf .ta-live-s { margin-top: 5px; min-height: 1.45em; font-size: clamp(11px, 2.3cqw, 12.5px); line-height: 1.45; letter-spacing: 0; word-spacing: 0; color: var(--sx-ink2); font-variant-numeric: tabular-nums; }

/* sub 960: pastila de sub disc are legenda culorilor (altfel culorile se explică abia un ecran mai jos); sub 560 are și
   începutul / sfârșitul zilei, care în mijlocul discului nu mai încap. Legenda e ca etichetele de bandă din varianta C. */
.sx-tahograf .ta-places { display: none; }
.sx-tahograf .ta-lg { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 18px; }
.sx-tahograf .ta-lg > span {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 13px; line-height: 1.3; letter-spacing: -0.01em; word-spacing: 0; color: var(--sx-ink2);
}
.sx-tahograf .ta-lg > span[data-k="drive"] { color: var(--sx-ink); }
.sx-tahograf .ta-lg i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }

/* textele de sub piese (ca în harta HERE) */
.sx-tahograf .ta-cap { justify-self: start; max-width: 460px; }
.sx-tahograf .ta-cap--day { margin-top: 40px; }
.sx-tahograf .ta-cap h3 { font-size: 17.5px; line-height: 1.3; letter-spacing: -0.014em; text-wrap: balance; }
.sx-tahograf .ta-cap > p { margin-top: 8px; font-size: 15.5px; line-height: 1.58; color: var(--sx-ink2); max-width: 46ch; text-wrap: pretty; }
.sx-tahograf .ta-cap > .ta-note { margin-top: 12px; font-size: 13px; line-height: 1.5; letter-spacing: -0.01em; word-spacing: 0; }
.sx-tahograf .ta-replay {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 10px 2px 2px;
  border: 0; border-radius: var(--sx-r-pill); background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; word-spacing: 0; color: var(--sx-ink2);
}
.sx-tahograf .ta-replay[hidden] { display: none; }
.sx-tahograf .ta-replay-i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--sx-hair-strong); background: var(--ta-card); color: var(--sx-ink);
  transition: border-color var(--sx-t-fast) ease, color var(--sx-t-fast) ease, transform .4s var(--sx-ease);
}
.sx-tahograf .ta-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-tahograf .ta-replay:hover { color: var(--sx-accent-text); }
.sx-tahograf .ta-replay:hover .ta-replay-i { border-color: var(--sx-accent); color: var(--sx-accent); transform: rotate(-40deg); }
.sx-tahograf .ta-replay:active .ta-replay-i { transform: rotate(-40deg) scale(.92); }
.sx-tahograf .ta-replay:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 3px; border-radius: var(--sx-r-pill); }

/* --- 2b. Sinteza activității (versiunea nouă): pe fundal, fără chenar; rândurile sunt și legenda discului --- */
.sx-tahograf .ta-side { display: grid; align-content: start; }
.sx-tahograf .ta-sum-h {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--sx-hair-strong);
}
.sx-tahograf .ta-sum-h h3 { font-size: 16px; line-height: 1.3; letter-spacing: -0.014em; }
.sx-tahograf .ta-sum-h h3 span { margin-left: 8px; font-size: 13px; font-weight: 400; letter-spacing: 0; word-spacing: 0; color: var(--sx-ink2); font-variant-numeric: tabular-nums; }
.sx-tahograf .ta-new {
  font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 1.4; letter-spacing: .005em; word-spacing: 0;
  padding: 2px 9px; border-radius: var(--sx-r-pill); background: var(--sx-soon-bg); color: var(--sx-ink); white-space: nowrap;
}
.sx-tahograf .ta-rows { list-style: none; margin: 0; padding: 6px 0 0; }
.sx-tahograf .ta-rows li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  min-height: 44px; padding: 3px 10px; margin: 0 -10px; border-radius: 10px;
  transition: opacity .2s ease, background-color .2s ease;
}
.sx-tahograf .ta-rows li:focus { outline: none; }
.sx-tahograf .ta-rows li:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 0; }
.sx-tahograf .ta-sw { display: block; height: var(--h, 4px); border-radius: 2px; background: var(--k); }
.sx-tahograf .ta-rows li[data-k="drive"] { --h: 11px; min-height: 54px; }
.sx-tahograf .ta-rows li[data-k="work"]  { --h: 7px; }
.sx-tahograf .ta-rows li[data-k="avail"] { --h: 4.5px; }
.sx-tahograf .ta-rows li[data-k="rest"]  { --h: 3px; }
.sx-tahograf .ta-rn { font-size: 16px; line-height: 1.3; letter-spacing: -0.015em; word-spacing: 0; color: var(--sx-ink); }
.sx-tahograf .ta-rv {
  font-size: 22px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; word-spacing: 0; color: var(--sx-ink); text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
/* „Total condus” e singurul evidențiat, ca în program */
.sx-tahograf .ta-rows li[data-k="drive"] .ta-rv { font-size: 34px; font-weight: 600; letter-spacing: -0.035em; color: var(--ta-drive-t); }
.sx-tahograf .ta-rows li[data-k="drive"] .ta-rn { font-weight: 600; }
.sx-tahograf .ta-sum-f { display: flex; flex-wrap: wrap; gap: 6px 32px; margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--sx-hair-strong); }
.sx-tahograf .ta-sum-f > div { display: flex; align-items: baseline; gap: 10px; }
.sx-tahograf .ta-sum-f dt { font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; word-spacing: 0; color: var(--sx-ink2); }
.sx-tahograf .ta-sum-f dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--sx-ink); font-variant-numeric: tabular-nums lining-nums; }
.sx-tahograf .ta-bandw { margin-top: 16px; }
.sx-tahograf .ta-band { position: relative; height: 16px; border-radius: 4px; overflow: hidden; background: var(--ta-track); box-shadow: inset 0 0 0 1px var(--ta-rule); }
.sx-tahograf .ta-band i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc(var(--w) * 100%); background: var(--k); transition: opacity .25s ease; }
.sx-tahograf .ta-axis {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 11.5px; line-height: 1.3; letter-spacing: 0; word-spacing: 0; color: var(--sx-ink2); font-variant-numeric: tabular-nums;
}
.sx-tahograf .ta-band-cap { margin-top: 6px; font-size: 13px; line-height: 1.45; letter-spacing: -0.01em; word-spacing: 0; color: var(--sx-ink2); }

/* --- 2c. Calcul Detașare: bucată din fereastra programului --- */
.sx-tahograf .ta-calc { --ta-px: 22px; position: relative; z-index: 2; margin-top: 44px; border-radius: 18px; background: var(--ta-card); box-shadow: var(--ta-card-shadow); }
.sx-tahograf .ta-calc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 18px var(--ta-px) 0; }
.sx-tahograf .ta-nw { white-space: nowrap; }
.sx-tahograf .ta-calc-h { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; word-spacing: 0; color: var(--sx-ink); }
.sx-tahograf .ta-calc-d { display: inline-flex; gap: 10px; font-size: 12.5px; line-height: 1.4; letter-spacing: 0; word-spacing: 0; color: var(--sx-ink3); font-variant-numeric: tabular-nums; }
.sx-tahograf .ta-tag {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; word-spacing: 0; color: var(--sx-ink2);
  background: var(--ta-soft); border-radius: var(--sx-r-pill); padding: 2px 9px; white-space: nowrap;
}
/* bifele stau sub c10: ele aleg ce intră în orele din card */
.sx-tahograf .ta-tl { min-width: 0; margin: 0 var(--ta-px); padding: 2px 0 18px; border: 0; }
.sx-tahograf .ta-tl legend { float: left; width: 100%; padding: 0; margin: 0 0 9px; font-size: 12.5px; line-height: 1.4; letter-spacing: -0.005em; word-spacing: 0; color: var(--sx-ink3); }
.sx-tahograf .ta-tl-row { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx-tahograf .ta-cb {
  position: relative; display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px 0 11px;
  border-radius: 10px; border: 1px solid var(--ta-rule); background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1.2; letter-spacing: -0.012em; word-spacing: 0; color: var(--sx-ink); user-select: none;
  transition: border-color var(--sx-t-fast) ease, background-color var(--sx-t-fast) ease;
}
.sx-tahograf .ta-cb input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.sx-tahograf .ta-box {
  position: relative; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--ta-box-line); background: var(--ta-card);
  transition: background-color var(--sx-t-fast) ease, border-color var(--sx-t-fast) ease, transform .2s var(--sx-ease);
}
.sx-tahograf .ta-box::after {
  content: ""; position: absolute; inset: 1px; background: var(--ta-check); opacity: 0; transform: scale(.6);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .15s ease, transform .25s var(--sx-ease);
}
.sx-tahograf .ta-cb input:checked + .ta-box { background: var(--k); border-color: var(--k); }
.sx-tahograf .ta-cb input:checked + .ta-box::after { opacity: 1; transform: none; }
.sx-tahograf .ta-cb:has(input:checked) { border-color: color-mix(in srgb, var(--k) 50%, transparent); background: color-mix(in srgb, var(--k) 9%, transparent); }
.sx-tahograf .ta-cb:not(.ta-cb--off):hover { border-color: var(--ta-box-line); }
.sx-tahograf .ta-cb:not(.ta-cb--off):hover .ta-box { border-color: var(--sx-ink2); }
.sx-tahograf .ta-cb:has(input:checked):hover .ta-box { border-color: var(--k); }
.sx-tahograf .ta-cb:not(.ta-cb--off):active .ta-box { transform: scale(.88); }
.sx-tahograf .ta-cb:has(input:focus-visible) { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
/* Pauză: blocată în program (readonly disabled), deci nu se bifează niciodată */
.sx-tahograf .ta-cb--off { cursor: not-allowed; color: var(--sx-ink3); background: repeating-linear-gradient(-45deg, var(--ta-soft) 0 3px, transparent 3px 7px); }
.sx-tahograf .ta-cb--off .ta-box { border-style: dashed; background: transparent; }
.sx-tahograf .ta-cb--off .ta-box::after {
  opacity: .9; transform: none; inset: 2px; background: var(--sx-ink3);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.sx-tahograf .ta-r {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px; align-items: center;
  margin: 0 var(--ta-px); padding: 12px 0;
}
.sx-tahograf .ta-r--c10 { margin-top: 14px; padding: 12px 0 12px; border-top: 1px solid var(--ta-rule); }
.sx-tahograf .ta-r--c9 { border-top: 1px dashed var(--ta-rule); }
.sx-tahograf .ta-r-k { font-size: 14px; line-height: 1.35; letter-spacing: -0.012em; word-spacing: 0; color: var(--sx-ink); }
.sx-tahograf .ta-r-k i {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: var(--ta-soft);
  font-style: normal; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .02em; color: var(--sx-ink2); vertical-align: 1px;
}
.sx-tahograf .ta-r-v {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end; white-space: nowrap;
  font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; word-spacing: 0; color: var(--sx-ink);
  font-variant-numeric: tabular-nums lining-nums; transition: opacity .4s ease, color .4s ease;
}
.sx-tahograf .ta-r-s { font-size: 12.5px; line-height: 1.45; letter-spacing: -0.005em; word-spacing: 0; color: var(--sx-ink3); transition: opacity .4s ease; }
.sx-tahograf .ta-r--c9 .ta-r-v { font-size: 20px; font-weight: 500; color: var(--sx-ink2); }
.sx-tahograf .ta-r--c11 {
  margin: 0; padding: 16px var(--ta-px) 18px; border-top: 1px solid var(--ta-rule);
  border-radius: 0 0 18px 18px; background: var(--ta-money);
}
.sx-tahograf .ta-r--c11 .ta-r-v { font-size: 30px; }
/* pe telefon: linia scurtă din Sinteză în calcul (aceeași ca linia din fișier în 00:00) */
.sx-tahograf .ta-feed--calc { display: none; }

/* --- 2d. Linia spre c10 (desenată din JS, doar pe ecran lat) --- */
.sx-tahograf .ta-stage > .ta-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; display: none; }
.sx-tahograf .ta-stage.is-wired > .ta-wires { display: block; }
.sx-tahograf .ta-w { fill: none; stroke: var(--sx-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset .56s cubic-bezier(.3, .55, .45, 1); }
.sx-tahograf .ta-w-node { fill: var(--sx-accent); stroke: var(--ta-card); stroke-width: 3; transition: opacity .2s ease .5s; }

/* ---------- 3. Stările: intrarea, citirea, bifele ---------- */
.sx-tahograf .ta-stage.is-armed .ta-file { opacity: 0; transform: translateY(-10px); }
.sx-tahograf .ta-stage.is-armed .ta-feed::before { transform: scaleY(0); transition: none; }
.sx-tahograf .ta-stage.is-armed .ta-feed::after { opacity: 0; transform: scale(.4); transition: none; }
.sx-tahograf .ta-stage:is(.is-armed, .is-play) .ta-jump:not(.is-on),
.sx-tahograf .ta-stage:is(.is-armed, .is-play) .ta-pin:not(.is-on) { opacity: 0; }
.sx-tahograf .ta-stage:is(.is-armed, .is-play, .is-scrub) .ta-id { opacity: 0; transition: opacity .14s ease; }
.sx-tahograf .ta-stage:is(.is-armed, .is-play, .is-scrub) .ta-live { opacity: 1; transition: opacity .22s ease .17s; }
.sx-tahograf .ta-stage.is-armed .ta-id { transition: none; }
/* cardul (≥ 960): intră înclinat mai tare, se așază, luciul trece o dată peste el, apoi linia coboară în 00:00 */
.sx-tahograf .ta-stage.is-armed .ta-dc { opacity: 0; translate: -4% -6%; transform: rotate(-12deg); transition: none; }
.sx-tahograf .ta-stage.is-armed .ta-dc-feed path { stroke-dashoffset: 1; transition: none; }
.sx-tahograf .ta-stage.is-armed .ta-dc-feed circle { opacity: 0; transition: none; }
.sx-tahograf .ta-stage.is-play .ta-dc-holo { animation: sx-tahograf-holo 1.3s cubic-bezier(.45, 0, .2, 1) .12s both; }
@keyframes sx-tahograf-holo { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.sx-tahograf .ta-stage:is(.is-play, .is-scrub) .ta-hand { opacity: 1; }
.sx-tahograf .ta-stage.is-play .ta-stylus { opacity: 1; }
.sx-tahograf .ta-stage:is(.is-armed, .is-play) .ta-band { clip-path: inset(0 calc(100% - var(--ta-p, 0) * 100%) 0 0); }
/* calculul așteaptă linia: valorile stinse, linia nedesenată */
.sx-tahograf .ta-stage.is-pend .ta-w { stroke-dashoffset: 1; transition: none; }
.sx-tahograf .ta-stage.is-pend .ta-w-node, .sx-tahograf .ta-stage.is-pend .ta-mark { opacity: 0; transition: none; }
/* doar c10 și c11 așteaptă linia; c9 e estimarea din km și încărcări, nu vine din card, deci rămâne aprinsă */
.sx-tahograf .ta-stage.is-wired.is-pend :is(.ta-r--c10, .ta-r--c11) .ta-r-v { opacity: .18; }
.sx-tahograf .ta-stage.is-wired.is-pend :is(.ta-r--c10, .ta-r--c11) .ta-r-s { opacity: .35; }
.sx-tahograf .ta-stage.is-wired:not(.is-pend) .ta-r--c10 .ta-r-v { transition-delay: .42s; }
.sx-tahograf .ta-stage.is-wired:not(.is-pend) .ta-r--c11 .ta-r-v { transition-delay: .62s; }
/* citirea unei activități */
.sx-tahograf .ta-stage.is-scrub .ta-arc:not(.is-hot) { opacity: .26; }
.sx-tahograf .ta-stage.is-scrub .ta-jump { opacity: .18; }
/* un rând din Sinteză: doar banda lui rămâne aprinsă */
.sx-tahograf .ta-stage[data-lane] .ta-arc, .sx-tahograf .ta-stage[data-lane] .ta-band i { opacity: .16; }
.sx-tahograf .ta-stage[data-lane] .ta-jump { opacity: .14; }
.sx-tahograf .ta-stage[data-lane="drive"] .ta-arc[data-k="drive"], .sx-tahograf .ta-stage[data-lane="drive"] .ta-band i[data-k="drive"],
.sx-tahograf .ta-stage[data-lane="work"] .ta-arc[data-k="work"],   .sx-tahograf .ta-stage[data-lane="work"] .ta-band i[data-k="work"],
.sx-tahograf .ta-stage[data-lane="avail"] .ta-arc[data-k="avail"], .sx-tahograf .ta-stage[data-lane="avail"] .ta-band i[data-k="avail"],
.sx-tahograf .ta-stage[data-lane="rest"] .ta-arc[data-k="rest"],   .sx-tahograf .ta-stage[data-lane="rest"] .ta-band i[data-k="rest"] { opacity: 1; }
.sx-tahograf .ta-stage[data-lane] .ta-rows li { opacity: .42; }
.sx-tahograf .ta-stage[data-lane="drive"] .ta-rows li[data-k="drive"], .sx-tahograf .ta-stage[data-lane="work"] .ta-rows li[data-k="work"],
.sx-tahograf .ta-stage[data-lane="avail"] .ta-rows li[data-k="avail"], .sx-tahograf .ta-stage[data-lane="rest"] .ta-rows li[data-k="rest"] { opacity: 1; background: var(--ta-soft); }
/* cât ești pe calcul (sau după o bifă): pe cadran rămân aprinse doar orele socotite timp lucrat; pauza nu se socotește niciodată */
.sx-tahograf .ta-stage.is-count .ta-arc[data-k="rest"],
.sx-tahograf .ta-stage.is-count.n-drive .ta-arc[data-k="drive"],
.sx-tahograf .ta-stage.is-count.n-work .ta-arc[data-k="work"],
.sx-tahograf .ta-stage.is-count.n-avail .ta-arc[data-k="avail"] { opacity: .16; }
.sx-tahograf .ta-stage.is-count .ta-jump { opacity: .14; }
/* la fel pe banda din Sinteză și pe rândurile ei: pe telefon, banda stă chiar deasupra calculului, deci bifa se vede aici */
.sx-tahograf .ta-stage.is-count .ta-band i[data-k="rest"],
.sx-tahograf .ta-stage.is-count.n-drive .ta-band i[data-k="drive"],
.sx-tahograf .ta-stage.is-count.n-work .ta-band i[data-k="work"],
.sx-tahograf .ta-stage.is-count.n-avail .ta-band i[data-k="avail"] { opacity: .16; }
.sx-tahograf .ta-stage.is-count .ta-rows li[data-k="rest"],
.sx-tahograf .ta-stage.is-count.n-drive .ta-rows li[data-k="drive"],
.sx-tahograf .ta-stage.is-count.n-work .ta-rows li[data-k="work"],
.sx-tahograf .ta-stage.is-count.n-avail .ta-rows li[data-k="avail"] { opacity: .4; }

/* ---------- 5. Ecran lat (≥ 960): discul în stânga, Sinteza și calculul în dreapta; linia drept spre c10 ---------- */
@media (min-width: 960px) {
  .sx-tahograf .ta-stage { grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr); column-gap: var(--ta-gap); align-items: start; }
  .sx-tahograf .ta-side { padding-top: 6px; }
  /* JS: --ta-dy pune rândul c10 în dreptul primului condus de pe disc */
  .sx-tahograf .ta-calc { margin-top: var(--ta-dy, 44px); }
  .sx-tahograf .ta-cap--calc { margin-top: 34px; }
  /* cardul șoferului ține locul pastilei cu fișierul; deasupra discului îi facem loc (procent din lățimea coloanei = a discului) */
  .sx-tahograf .ta-day > .ta-file, .sx-tahograf .ta-day > .ta-feed { display: none; }
  .sx-tahograf .ta-disc { margin-top: 23%; }
  .sx-tahograf .ta-dc, .sx-tahograf .ta-dc-feed { display: block; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .sx-tahograf .ta-rows li[data-k="drive"] .ta-rv { font-size: 30px; }
  .sx-tahograf .ta-calc { --ta-px: 18px; }
  .sx-tahograf .ta-cb { padding: 0 10px 0 9px; font-size: 13.5px; }
}

/* ---------- 6. Tabletă (640–959): discul pe mijloc, sub el Sinteza și calculul unul lângă altul ---------- */
@media (min-width: 640px) and (max-width: 959px) {
  .sx-tahograf .ta-disc { max-width: 470px; }
  .sx-tahograf .ta-cap--day { justify-self: center; text-align: center; }
  .sx-tahograf .ta-cap--day > p { margin-inline: auto; }
  .sx-tahograf .ta-side { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 44px); align-items: start; }
  .sx-tahograf .ta-sum { grid-column: 1; grid-row: 1 / span 2; }
  .sx-tahograf .ta-calc { grid-column: 2; grid-row: 1; margin-top: 0; }
  .sx-tahograf .ta-cap--calc { grid-column: 2; grid-row: 2; margin-top: 28px; }
}

/* ---------- 7. Telefon (< 640): o coloană; discul cât ecranul, ziua de lucru sub el ---------- */
@media (max-width: 639px) {
  .sx-tahograf .ta-head { margin-bottom: 44px; }
  .sx-tahograf .ta-lede { font-size: var(--sx-fs-lede-c); line-height: var(--sx-lh-body); }
  .sx-tahograf .ta-stage { row-gap: 56px; }
  .sx-tahograf .ta-file { padding: 8px 14px 8px 9px; gap: 10px; }
  .sx-tahograf .ta-feed { height: 26px; }
  .sx-tahograf .ta-hours text { font-size: 22px; }
  .sx-tahograf .ta-cap--day { margin-top: 30px; }
  .sx-tahograf .ta-feed--calc { display: block; justify-self: center; height: 40px; margin-top: 26px; }
  .sx-tahograf .ta-calc { --ta-px: 18px; margin-top: 0; }
  .sx-tahograf .ta-cap--calc { margin-top: 26px; }
  .sx-tahograf .ta-cb { min-height: 44px; }
  .sx-tahograf .ta-r-v { font-size: 24px; }
  .sx-tahograf .ta-r--c11 .ta-r-v { font-size: 27px; }
}
/* sub 960: pastila de sub disc (legenda culorilor) */
@media (max-width: 959px) {
  .sx-tahograf .ta-places {
    display: grid; justify-items: center; row-gap: 9px; margin-top: 22px; padding: 10px 16px 11px;
    border-radius: 12px; background: var(--ta-soft);
  }
  .sx-tahograf .ta-places .ta-pl { display: none; }
}
@media (max-width: 559px) {
  .sx-tahograf .ta-id-pl { display: none; }
  .sx-tahograf .ta-places .ta-pl { display: grid; font-size: 13px; }
  .sx-tahograf .ta-places .ta-pl i { color: var(--sx-ink2); }   /* ink3 pe fundal nu ajunge la 4,5:1 */
  .sx-tahograf .ta-lg {
    display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 4px 22px;
    width: 100%; padding-top: 9px; border-top: 1px solid var(--ta-rule);
  }
}

/* ---------- 8. Mișcare redusă: totul pe loc, desenat ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-tahograf .ta-file, .sx-tahograf .ta-feed::before, .sx-tahograf .ta-feed::after, .sx-tahograf .ta-w,
  .sx-tahograf .ta-w-node, .sx-tahograf .ta-r-v, .sx-tahograf .ta-arc, .sx-tahograf .ta-id, .sx-tahograf .ta-live,
  .sx-tahograf .ta-dc, .sx-tahograf .ta-dc-feed path, .sx-tahograf .ta-dc-feed circle, .sx-tahograf .ta-band i { transition: none !important; }
  .sx-tahograf .ta-dc-holo { animation: none !important; }
}
@media print {
  .sx-tahograf .ta-replay { display: none !important; }
  .sx-tahograf .ta-dc-card, .sx-tahograf .ta-dc-chip, .sx-tahograf .ta-lg i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}