/* [cc 15.10 captura-pen] Secțiunea #captura (Dispecerat): poza programului cu o comandă deschisă + notițe scrise de mână, ca pe pagina 1
   (C4-1/demo-plansa.css: aceeași cerneală, același scris „Cmd Hand” = Caveat, declarat de menu-harta.css). JS: captura-pen.js.
   ≥ 900 px (cu JS, .cp.is-on): coloana din stânga + banda de deasupra țin notițele, poza stă în dreapta-jos; săgețile = un SVG peste toată figura.
   < 900 px sau fără JS: poza pe lățimea coloanei (pe telefon decupată la partea din stânga, ca să se poată citi) și notițele = listă sub poză, fără numere.
   Teme: html[data-theme=light] = luminos, altfel închis (ca final.css); poza e cea a temei (două capturi, aceeași geometrie). Nimic pe <html>/<body>. */

/* ---------- cerneala (pagina 1: --d7-pen / --d7-mark) + fundalul pozei pentru „halo” ---------- */
.cp{--cp-pen:rgba(232,228,217,.62);--cp-mark:rgba(232,228,217,.8);--cp-halo:rgba(22,23,26,.86);
  --cp-hand:"Cmd Hand","Caveat","Segoe Print",cursive;--cp-col:clamp(150px,14vw,200px);--cp-gap:28px;--cp-band:60px;--cp-fs:20px;--cp-lh:24px}
:root[data-theme=light] .cp{--cp-pen:hsl(40 13% 23% / .66);--cp-mark:hsl(40 13% 23% / .82);--cp-halo:rgba(245,245,245,.88)}

.s-cp .sh{margin-bottom:clamp(28px,3.4vw,44px)}
.cp{position:relative;margin:0}
.cp-stage{position:static}

/* fereastra programului: ca .shot-win (margine --line, colțuri 8, aceeași umbră) */
.cp-win{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#16171a;box-shadow:0 -20px 80px rgba(0,0,0,.35)}
:root[data-theme=light] .cp-win{background:#f5f5f5;box-shadow:0 -10px 50px rgba(20,42,62,.10)}
.cp-img{display:block;width:100%;height:auto}
.cp-img--l{display:none}
:root[data-theme=light] .cp-img--l{display:block}
:root[data-theme=light] .cp-img--d{display:none}

/* ---------- lista (telefon, tabletă îngustă, fără JS) ---------- */
.cp-cap{margin-top:22px}
.cp-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;margin:0;padding:0;list-style:none}
.cp-n{position:relative;padding-left:24px;font:400 19px/23px var(--cp-hand);letter-spacing:0;word-spacing:0;color:var(--cp-mark)}
.cp-n::before{content:"";position:absolute;left:2px;top:11px;width:14px;height:6px;background:var(--cp-pen);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 3.4C4 2.6 8.5 2.4 12.6 3'/%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 14 6' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 3.4C4 2.6 8.5 2.4 12.6 3'/%3E%3C/svg%3E") center/contain no-repeat}
.cp-n a{color:inherit;text-decoration:underline;text-decoration-color:var(--cp-pen);text-decoration-thickness:1px;text-underline-offset:4px;-webkit-tap-highlight-color:transparent}
.cp-n a:hover{color:var(--ink);text-decoration-color:currentColor}
.cp-n a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.cp-n .ar{width:.6em;height:.6em;margin-left:.25em;vertical-align:.05em}
.cp-pen{display:none}
@media (max-width:899px){
  /* poza: doar partea din stânga a paginii Comenzi (x 0–856 din 1280: ID … Destinație, iar la puncte Tip … Kg), ca textul să rămână de citit */
  .cp-win{aspect-ratio:856 / 768}
  .cp-img{width:149.54%;max-width:none}
}
@media (max-width:560px){
  .cp-cap{margin-top:18px}
  .cp-notes{grid-template-columns:minmax(0,1fr);gap:6px}
  .cp-n{font-size:19px;line-height:23px}
}

/* ---------- notițele lângă poză (≥ 900 px, JS le pune .is-on și le dă poziția) ---------- */
@media (min-width:900px){
  .cp.is-on .cp-stage{padding:var(--cp-band) 0 0 calc(var(--cp-col) + var(--cp-gap))}
  .cp.is-on .cp-cap{margin:0}
  .cp.is-on .cp-notes{display:block}
  .cp.is-on .cp-n{position:absolute;left:0;top:0;z-index:2;padding:0;font-size:var(--cp-fs);line-height:var(--cp-lh)}
  .cp.is-on .cp-n::before{content:none}
  .cp.is-on .cp-n[data-at=left]{width:var(--cp-col);text-align:right;text-wrap:balance;transform:rotate(-1.4deg);transform-origin:100% 12px}
  .cp.is-on .cp-n[data-at=top]{white-space:nowrap;transform:rotate(-1.2deg);transform-origin:0 50%}
  .cp.is-on .cp-n[data-align=end]{transform-origin:100% 50%}
  .cp.is-on .cp-pen{position:absolute;left:0;top:0;z-index:1;display:block;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .cp-pen .k{stroke:var(--cp-pen);stroke-width:1.5px}
  .cp-pen .k2{stroke:var(--cp-pen);stroke-width:1.3px;opacity:.4}
  .cp-pen .halo{stroke:var(--cp-halo);stroke-width:6px}
}
@media (min-width:900px) and (max-width:1179px){.cp{--cp-fs:18px;--cp-lh:22px;--cp-band:54px;--cp-gap:24px}}

/* ---------- scrierea, o singură dată, când figura intră în ecran (JS: .is-armed → .is-drawn); nimic la mișcare redusă ---------- */
.cp.is-on.is-armed .cp-pen path{stroke-dasharray:1 1;stroke-dashoffset:1}
.cp.is-on.is-armed .cp-n{opacity:0}
.cp.is-on.is-armed.is-drawn .cp-pen path{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.45,0,.2,1) var(--d,0s)}
.cp.is-on.is-armed.is-drawn .cp-pen path.h{transition-duration:.18s}
.cp.is-on.is-armed.is-drawn .cp-n{opacity:1;transition:opacity .45s ease var(--d,0s)}
@media (prefers-reduced-motion:reduce){
  .cp .cp-pen path{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}
  .cp .cp-n{opacity:1!important;transition:none!important}
}