/* [cc 19.10] sx-cmr.css · #cmr, direcția A (copia câștigătoare, documente-v3/cmr/) „un desen văzut de sus + o apăsare” (markup + desen: make.js → cmr.html; JS: sx-cmr.js).
   Ideea în 5 secunde: programul completează singur foaia CMR din comandă (4, 5 sau 6 exemplare, fiecare cu banda lui); la descărcare apeși bifa „fără rezerve” și vezi
   ce primește dispecerul: fără rezerve nu primește nimic, cu rezerve primește un mesaj în program.
   Un singur lucru apăsabil: bifa „Fără rezerve” de pe foaia de la descărcare (al doilea clic o întoarce). Înainte de apăsare mesajul are doar contur punctat (ca „nu ajunge pe factură” la Service).
   Fără JS, la „mișcare redusă” și la tipar: starea cu mesajul, totul la vedere. Creionul = #dosar / #referat / #service (--cz-pen, --cz-mark), scrisul de mână = „Cmd Hand” (Caveat).
   ≥ 960 px desenul lat (1200 × 304); mai îngust desenul înalt (360 × 620), camionul pe verticală, cu aceleași patru stații și etichetele benzilor. Totul sub .sx-cmr; spațiere Fibonacci (3 5 8 13 21 34 55). */

.sx-cmr {
  --cz-pen: hsl(40 13% 23% / .66); --cz-mark: hsl(40 13% 20% / .9); --cz-mark2: hsl(40 9% 30% / .8);
  --cz-hand: "Cmd Hand", "Caveat", "Segoe Print", cursive;
  --cz-paper: #fffdf8; --cz-face: #fffdf8;
  --cz-fold: rgba(224, 178, 98, .36); --cz-fold-ink: #b07a1c;
  --cz-ok: #2f8a3e; --cz-ok-ink: #2a7a37; --cz-ok-tint: #cbe8bd;
  --cz-warn: #b5651d; --cz-warn-ink: #a2540f; --cz-warn-tint: #f3d9a8;
  --cz-c1: #d0021b; --cz-c2: #1a56c4; --cz-c3: #1e8a3c; --cz-c4: #1d1d1b;
  --cz-halo: var(--bg, hsl(40 6% 94%));
}
html[data-theme="dark"] .sx-cmr {
  --cz-pen: rgba(232, 228, 217, .62); --cz-mark: rgba(240, 236, 226, .92); --cz-mark2: rgba(232, 228, 217, .74);
  --cz-paper: #262422; --cz-face: #2c2a27;
  --cz-fold: rgba(224, 178, 98, .2); --cz-fold-ink: #e0b45a;
  --cz-ok: #7cc96c; --cz-ok-ink: #8fd37f; --cz-ok-tint: #2d4a2b;
  --cz-warn: #e0a24e; --cz-warn-ink: #e8b363; --cz-warn-tint: #4d3a1a;
  --cz-c1: #ff7a6b; --cz-c2: #7aa7ff; --cz-c3: #78d68a; --cz-c4: #e6e2d6;
  --cz-halo: var(--bg, #000000);
}

/* titlul: o propoziție pe rând de la 960 px în sus; pe telefon curge firesc */
.sx-cmr .sx-cmr-s { display: inline; }
@media (min-width: 960px) { .s27 .sx.sx-cmr header h2 { max-width: 22em; } .sx-cmr .sx-cmr-s { display: block; } }

/* ---------- figura ---------- */
.sx-cmr .sx-cmr-fig { margin: 0; }
.sx-cmr .sx-cmr-map { position: relative; max-width: 1152px; }   /* 1152 = cât are desenul lat cu cuprinsul din stânga la 1200 px; fără JS (fără cuprins) nu crește peste, ca secțiunea să rămână ≤ 900 la 1440 */
@supports (container-type: inline-size) { .sx-cmr .sx-cmr-map { container-type: inline-size; } }
.sx-cmr .sx-cmr-art { display: block; width: 100%; height: auto; overflow: visible; }
.sx-cmr .sx-cmr-art--tall { display: none; }

/* creionul */
.sx-cmr .sx-cmr-art .k, .sx-cmr .sx-cmr-art .k2 { fill: none; stroke: var(--cz-pen); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sx-cmr .sx-cmr-art .k { stroke-width: 1.5px; }
.sx-cmr .sx-cmr-art .k2 { stroke-width: 1.3px; opacity: .4; }
.sx-cmr .sx-cmr-art .k.f { opacity: .5; }
.sx-cmr .sx-cmr-art .k2.f { opacity: .18; }
.sx-cmr .sx-cmr-art .k.bx { stroke: var(--cz-mark); }
.sx-cmr .sx-cmr-art .k.ar, .sx-cmr .sx-cmr-art .k2.ar { stroke: var(--cz-mark); }
.sx-cmr .sx-cmr-art .k.ar { stroke-width: 2px; }
.sx-cmr .sx-cmr-art .k.ar1, .sx-cmr .sx-cmr-art .k2.ar1 { stroke: var(--cz-mark2); }
.sx-cmr .sx-cmr-art .k.ar1 { stroke-width: 1.6px; }
.sx-cmr .sx-cmr-art .pp { fill: var(--cz-paper); stroke: none; }
.sx-cmr .sx-cmr-art .wh { fill: var(--cz-pen); stroke: none; opacity: .7; }
.sx-cmr .sx-cmr-art .fold { fill: var(--cz-fold); stroke: none; }
.sx-cmr .sx-cmr-art .gh { fill: none; stroke: var(--cz-pen); stroke-width: 1.4px; stroke-dasharray: 5 6; stroke-linecap: round; opacity: .7; vector-effect: non-scaling-stroke; }
.sx-cmr .sx-cmr-art .dash { fill: none; stroke: var(--cz-pen); stroke-width: 1.4px; stroke-dasharray: 9 9; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; }
.sx-cmr .sx-cmr-art .gh.sk { opacity: .4; }
/* bifa: verde, groasă, ca pusă de mână */
.sx-cmr .sx-cmr-art .k.tk { stroke: var(--cz-ok); stroke-width: 3.6px; }
.sx-cmr .sx-cmr-art .k2.tk { stroke: var(--cz-ok); stroke-width: 2.2px; opacity: .55; }
/* benzile exemplarelor (order.cmr.print.php:751-755): roșu, albastru, verde, negru */
.sx-cmr .sx-cmr-art .bt { stroke: none; opacity: .14; }
.sx-cmr .sx-cmr-art .bb { stroke: none; opacity: .88; }
.sx-cmr .sx-cmr-art .bt1, .sx-cmr .sx-cmr-art .bb1 { fill: var(--cz-c1); }
.sx-cmr .sx-cmr-art .bt2, .sx-cmr .sx-cmr-art .bb2 { fill: var(--cz-c2); }
.sx-cmr .sx-cmr-art .bt3, .sx-cmr .sx-cmr-art .bb3 { fill: var(--cz-c3); }
.sx-cmr .sx-cmr-art .bt4, .sx-cmr .sx-cmr-art .bb4 { fill: var(--cz-c4); }
.sx-cmr .sx-cmr-art .bl1 { fill: var(--cz-c1); } .sx-cmr .sx-cmr-art .bl2 { fill: var(--cz-c2); }
.sx-cmr .sx-cmr-art .bl3 { fill: var(--cz-c3); } .sx-cmr .sx-cmr-art .bl4 { fill: var(--cz-c4); }
/* scrisul de mână */
.sx-cmr .sx-cmr-art .h { font-family: var(--cz-hand); fill: var(--cz-mark); letter-spacing: 0; word-spacing: 0; }
.sx-cmr .sx-cmr-art .ht { font-size: 31px; font-weight: 700; }
.sx-cmr .sx-cmr-art .hc { font-size: 26px; font-weight: 700; fill: var(--cz-mark2); }
.sx-cmr .sx-cmr-art .hs { font-size: 18px; font-weight: 700; fill: var(--cz-mark2); }
.sx-cmr .sx-cmr-art .hb { font-size: 18px; font-weight: 700; }   /* etichetele benzilor: ca restul scrisului de mână (era 15) */
.sx-cmr .sx-cmr-art .hd { font-size: 21px; font-weight: 500; fill: var(--cz-mark2); }
.sx-cmr .sx-cmr-art .hn { font-size: 23px; font-weight: 600; }
.sx-cmr .sx-cmr-art .hh { font-size: 25px; font-weight: 700; }
.sx-cmr .sx-cmr-art .hl { font-size: 19px; font-weight: 600; fill: var(--cz-mark2); }
.sx-cmr .sx-cmr-art .hv { font-size: 22px; font-weight: 500; }
.sx-cmr .sx-cmr-art .hq { font-size: 20px; font-weight: 600; fill: var(--cz-mark2); }
.sx-cmr .sx-cmr-art .hg2 { font-size: 24px; font-weight: 700; fill: var(--cz-ok-ink); }
.sx-cmr .sx-cmr-art .hw2 { font-size: 24px; font-weight: 700; fill: var(--cz-warn-ink); }
.sx-cmr .sx-cmr-art .ul { stroke-width: 2.6px; opacity: 1; }
.sx-cmr .sx-cmr-art .ul.k2 { stroke-width: 1.6px; opacity: .5; }
.sx-cmr .sx-cmr-art .ul-fold { stroke: var(--cz-fold-ink); }
.sx-cmr .sx-cmr-art .ul-pen { stroke: var(--cz-pen); }
.sx-cmr .sx-cmr-nw { white-space: nowrap; }

/* cele două stări: „fără rezerve” (înainte de apăsare) și „cu rezerve” + mesaj (după) */
.sx-cmr .sx-cmr-art .cz-ok, .sx-cmr .sx-cmr-art .cz-res, .sx-cmr .sx-cmr-art .cz-hint { transition: opacity .25s ease; }
.sx-cmr .sx-cmr-map:not(.is-res) .cz-res { opacity: 0; }
.sx-cmr .sx-cmr-map.is-res .cz-ok { opacity: 0; }
.sx-cmr .sx-cmr-map:not(.is-js) .cz-hint, .sx-cmr .sx-cmr-map.is-res .cz-hint { opacity: 0; visibility: hidden; }

/* ---------- bifa: singurul lucru apăsabil ---------- */
.sx-cmr .sx-cmr-btn { --bs: 64px; position: absolute; left: var(--bxw); top: var(--byw); z-index: 2; display: grid; place-items: center; width: var(--bs); height: var(--bs); margin: calc(var(--bs) / -2) 0 0 calc(var(--bs) / -2); padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--cz-mark); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sx-cmr .sx-cmr-map:not(.is-js) .sx-cmr-btn { cursor: default; }
.sx-cmr .sx-cmr-face { position: relative; display: grid; place-items: center; width: calc(var(--bs) * .8125); height: calc(var(--bs) * .8125); border-radius: 50%; background: var(--cz-ok-tint);
  box-shadow: 0 0 0 2px var(--cz-ok), 0 0 0 5px var(--cz-halo), 0 6px 14px -4px rgba(0, 0, 0, .38); transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; }
.sx-cmr .cz-ic { display: block; width: calc(var(--bs) * .47); height: calc(var(--bs) * .47); overflow: visible; }
.sx-cmr .cz-ic .k, .sx-cmr .cz-ic .k2 { fill: none; stroke: var(--cz-mark); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sx-cmr .cz-ic .k { stroke-width: 1.7px; }
.sx-cmr .cz-ic .k2 { stroke-width: 1.3px; opacity: .4; }
.sx-cmr .cz-ic .k.tk { stroke: var(--cz-ok); stroke-width: 3.2px; }
.sx-cmr .cz-ic .k2.tk { stroke: var(--cz-ok); stroke-width: 2px; opacity: .55; }
.sx-cmr .cz-ic .k.ex, .sx-cmr .cz-ic .k2.ex { stroke: var(--cz-warn-ink); }
.sx-cmr .cz-ic .k.ex { stroke-width: 3px; }
.sx-cmr .cz-ic .k2.ex { stroke-width: 2px; opacity: .55; }
.sx-cmr .cz-ic .exd { fill: var(--cz-warn-ink); }
.sx-cmr .cz-ic .cz-ic-ok, .sx-cmr .cz-ic .cz-ic-res { transition: opacity .2s ease; }
.sx-cmr .sx-cmr-map:not(.is-res) .cz-ic-res { opacity: 0; }
.sx-cmr .sx-cmr-map.is-res .cz-ic-ok { opacity: 0; }
.sx-cmr .cz-ic .cz-ic-res { position: absolute; }
.sx-cmr .sx-cmr-map.is-res .sx-cmr-face { background: var(--cz-warn-tint); box-shadow: 0 0 0 2px var(--cz-warn), 0 0 0 5px var(--cz-halo), 0 6px 14px -4px rgba(0, 0, 0, .38); }
@media (hover: hover) { .sx-cmr .sx-cmr-map.is-js .sx-cmr-btn:hover .sx-cmr-face { transform: scale(1.07); } }
.sx-cmr .sx-cmr-btn:active .sx-cmr-face { transform: scale(.95); }
.sx-cmr .sx-cmr-btn:focus { outline: none; }
.sx-cmr .sx-cmr-btn:focus-visible .sx-cmr-face { outline: 2px solid var(--sx-focus, #1a74a2); outline-offset: 6px; }

/* desenul lat se micșorează sub ~1130 px; butonul + halo (5 px) trebuie să încapă între „CMR descărcat” și „rezerve:” (≈ 35 unități de desen în jos, 44 în sus): B ≤ (35·s − 7) / .406, cu s = lățimea desenului / 1200 */
@media (min-width: 960px) { @supports (width: 1cqw) { .sx-cmr .sx-cmr-btn { --bs: clamp(44px, calc(7.18cqw - 17.2px), 64px); } } }

/* ---------- textul de sub desen ---------- */
.sx-cmr .sx-cmr-cap { margin-top: 8px; max-width: 108ch; font: 400 16px/24px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--sx-ink2); text-wrap: pretty; }
.sx-cmr .sx-cmr-inv { color: var(--sx-ink3); }
.sx-cmr .sx-cmr-more { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-hair-strong, rgba(20, 42, 62, .3)); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sx-cmr .sx-cmr-more:hover { text-decoration-color: currentColor; }
.sx-cmr .sx-cmr-more:focus-visible { outline: 2px solid var(--sx-focus, #1a74a2); outline-offset: 3px; border-radius: 3px; }

/* ---------- ecran îngust: desenul înalt ---------- */
@media (max-width: 959px) {
  .s27 .sx.sx-cmr .sx-cmr-head { margin-bottom: 21px; }
  /* [cc 19.10 asm] eticheta de sus și etichetele faptelor: tokenul paginii (site27.css, 12,5 px), ca în toate secțiunile; ridicarea la 16 px doar aici a ieșit (decizie de site pentru David: un rând în site27.css). Copia de dinainte: sx-cmr.before-asm.css */
  .sx-cmr .sx-cmr-map { max-width: 420px; }
  .sx-cmr .sx-cmr-art--wide { display: none; }
  .sx-cmr .sx-cmr-art--tall { display: block; }
  .sx-cmr .sx-cmr-btn { left: var(--bxt); top: var(--byt); }
  @supports (width: 1cqw) { .sx-cmr .sx-cmr-btn { --bs: clamp(52px, calc(11.4cqw + 23.2px), 64px); } }   /* 64 de la 358 px de desen în sus, 56 la 288 (telefon de 320): rămâne loc între bifă și textele din jur */
  .sx-cmr .sx-cmr-art .ht { font-size: 29px; }
  .sx-cmr .sx-cmr-art .hc { font-size: 24px; }
  .sx-cmr .sx-cmr-art .hs { font-size: 18.5px; }
  .sx-cmr .sx-cmr-art .hd { font-size: 18px; }
  .sx-cmr .sx-cmr-art .hn { font-size: 20px; }
  .sx-cmr .sx-cmr-art .hh { font-size: 22px; }
  .sx-cmr .sx-cmr-art .hl { font-size: 19.5px; }
  .sx-cmr .sx-cmr-art .hv { font-size: 19.5px; }
  .sx-cmr .sx-cmr-art .hq { font-size: 18px; }
  .sx-cmr .sx-cmr-art .hg2, .sx-cmr .sx-cmr-art .hw2 { font-size: 21px; }
  .sx-cmr .sx-cmr-cap { margin-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-cmr .sx-cmr-art .cz-ok, .sx-cmr .sx-cmr-art .cz-res, .sx-cmr .sx-cmr-art .cz-hint, .sx-cmr .sx-cmr-face, .sx-cmr .cz-ic .cz-ic-ok, .sx-cmr .cz-ic .cz-ic-res { transition: none; }
  .sx-cmr .sx-cmr-map.is-js .sx-cmr-btn:hover .sx-cmr-face, .sx-cmr .sx-cmr-btn:active .sx-cmr-face { transform: none; }
}
/* tipar: starea cu mesaj */
@media print { .sx-cmr .sx-cmr-map .cz-res { opacity: 1 !important; } .sx-cmr .sx-cmr-map .cz-ok, .sx-cmr .sx-cmr-map .cz-hint, .sx-cmr .sx-cmr-btn { display: none; } }