/* [cc 16.10] sx-referat.css · partea „referat”, Flota v2, varianta finală (direcția B „Vederea de sus” + altoirile; markup + desen: parts/referat.ro.php, notițele: js/sx-referat.js).
   O singură compoziție statică: același camion văzut de sus, de trei ori pe drum, cu punctul de pe frână în culoarea stării (Activ roz, Citit galben, Rezolvat verde),
   iar sub fiecare stare o frază simplă, la vedere. Singura interacțiune: cele 3 puncte deschid câte o notiță, în pagină (nu plutește peste nimic).
   ≥ 960 px: desenul lat (1200 × 278) e o grilă: desenul + punctele în celula 1 (poziția în % din lățime), notița în celula 2, sub desen.
   < 960 px: desenul înalt (360 × 516) tăiat în 3 benzi; notița se deschide sub banda punctului apăsat și împinge camionul următor în jos.
   Cerneala = creionul din #captura (captura-pen.css --cp-pen / --cp-mark), scrisul de mână = „Cmd Hand” (Caveat). Rândul din program = culorile implicite ale firmei
   (#F2DEDE, #FCF8E3, #DFF0D8) pe luminos; pe întunecat aceleași nuanțe, transparente (fără „placă albă”). Totul sub .sx-referat; spațiere Fibonacci (3 5 8 13 21 34 55). */

.sx-referat {
  --rf-pen: hsl(40 13% 23% / .66); --rf-mark: hsl(40 13% 20% / .9); --rf-mark2: hsl(40 9% 30% / .8);
  --rf-hand: "Cmd Hand", "Caveat", "Segoe Print", cursive;
  --rf-wheel: hsl(40 13% 23% / .5);
  /* cele trei stări: punctul (umplutură + inel), pata de sub camion, sublinierea */
  --rf-a-dot: #f6cbd2; --rf-a-ring: #b8475c; --rf-a-tint: rgba(232, 140, 158, .3);
  --rf-c-dot: #f7e39b; --rf-c-ring: #a37a0c; --rf-c-tint: rgba(236, 196, 70, .32);
  --rf-r-dot: #cbe8bd; --rf-r-ring: #3b7d31; --rf-r-tint: rgba(120, 190, 100, .3);
  --rf-halo: var(--bg, hsl(40 6% 94%));
  --rf-hair: var(--sx-hair-strong, rgba(20, 42, 62, .18));
  /* rândul desenat din program */
  --rf-row-a: #f2dede; --rf-row-c: #fcf8e3; --rf-row-r: #dff0d8; --rf-row-edge: rgba(20, 42, 62, .16);
}
html[data-theme="dark"] .sx-referat {
  --rf-pen: rgba(232, 228, 217, .62); --rf-mark: rgba(240, 236, 226, .92); --rf-mark2: rgba(232, 228, 217, .74);
  --rf-wheel: rgba(232, 228, 217, .5);
  /* roz, nu roșu de eroare (criticul, defectul 8) */
  --rf-a-dot: #f5c3cf; --rf-a-ring: #ee9cb3; --rf-a-tint: rgba(246, 170, 196, .2);
  --rf-c-dot: #f2d784; --rf-c-ring: #d9ad3a; --rf-c-tint: rgba(232, 190, 70, .22);
  --rf-r-dot: #bfe2ae; --rf-r-ring: #7cc06a; --rf-r-tint: rgba(120, 196, 100, .22);
  --rf-halo: var(--bg, #000000);
  --rf-hair: var(--sx-hair-strong, rgba(255, 255, 255, .18));
  --rf-row-a: rgba(246, 170, 196, .17); --rf-row-c: rgba(242, 215, 132, .15); --rf-row-r: rgba(160, 214, 140, .16); --rf-row-edge: rgba(255, 255, 255, .16);
}

/* ---------- figura: desenul lat + punctele în celula 1, notița în celula 2 ---------- */
.sx-referat .sx-referat-fig { margin: 0; }
.sx-referat .sx-referat-map { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sx-referat .sx-referat-art { display: block; width: 100%; height: auto; }
.sx-referat .sx-referat-art--wide { grid-area: 1 / 1; aspect-ratio: 1200 / 278; overflow: visible; }
.sx-referat .sx-referat-spot, .sx-referat .sx-referat-band { display: contents; }
.sx-referat .sx-referat-art--band { display: none; overflow: hidden; }

/* creionul */
.sx-referat .sx-referat-art .k, .sx-referat .sx-referat-art .k2 { fill: none; stroke: var(--rf-pen); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sx-referat .sx-referat-art .k { stroke-width: 1.5px; }
.sx-referat .sx-referat-art .k2 { stroke-width: 1.3px; opacity: .4; }
.sx-referat .sx-referat-art .k.f { opacity: .5; }
.sx-referat .sx-referat-art .k2.f { opacity: .18; }
.sx-referat .sx-referat-art .dash { fill: none; stroke: var(--rf-pen); stroke-width: 1.4px; stroke-dasharray: 13 13; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; }
.sx-referat .sx-referat-art .rf-wh { fill: var(--rf-wheel); }
.sx-referat .sx-referat-art .tint { stroke: none; }
.sx-referat .sx-referat-art .t-a { fill: var(--rf-a-tint); }
.sx-referat .sx-referat-art .t-c { fill: var(--rf-c-tint); }
.sx-referat .sx-referat-art .t-r { fill: var(--rf-r-tint); }
/* scrisul de mână */
.sx-referat .sx-referat-art .h { font-family: var(--rf-hand); fill: var(--rf-mark); letter-spacing: 0; word-spacing: 0; }
.sx-referat .sx-referat-art .hw { font-size: 29px; font-weight: 700; }
.sx-referat .sx-referat-art .hd { font-size: 22px; font-weight: 500; fill: var(--rf-mark2); }
.sx-referat .sx-referat-art .hb { font-size: 22px; font-weight: 600; }
.sx-referat .sx-referat-art .hs { font-size: 19px; font-weight: 500; fill: var(--rf-mark2); }
.sx-referat .sx-referat-art .hp { font-size: 17px; font-weight: 600; fill: var(--rf-mark2); }
.sx-referat .sx-referat-art .hn { font-size: 20px; font-weight: 600; }
.sx-referat .sx-referat-art .ul { stroke-width: 2.6px; opacity: 1; }
.sx-referat .sx-referat-art .ul.k2 { stroke-width: 1.6px; opacity: .5; }
.sx-referat .sx-referat-art .ul-a { stroke: var(--rf-a-ring); }
.sx-referat .sx-referat-art .ul-c { stroke: var(--rf-c-ring); }
.sx-referat .sx-referat-art .ul-r { stroke: var(--rf-r-ring); }
/* îndemnul „apasă” are sens doar când punctele deschid ceva (cu JS) */
.sx-referat .sx-referat-map:not(.is-js) .rf-hint { display: none; }

/* ---------- punctele: singurul lucru apăsabil ---------- */
.sx-referat .sx-referat-spot[data-k="a"] { --dot: var(--rf-a-dot); --ring: var(--rf-a-ring); }
.sx-referat .sx-referat-spot[data-k="c"] { --dot: var(--rf-c-dot); --ring: var(--rf-c-ring); }
.sx-referat .sx-referat-spot[data-k="r"] { --dot: var(--rf-r-dot); --ring: var(--rf-r-ring); }
.sx-referat .sx-referat-pin { grid-area: 1 / 1; align-self: start; justify-self: start; position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px;
  margin: calc(var(--yw) - 22px) 0 0 calc(var(--xw) - 22px); padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #1d2733; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sx-referat .sx-referat-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--dot);
  box-shadow: 0 0 0 2px var(--ring), 0 0 0 5px var(--rf-halo), 0 5px 13px -3px rgba(0, 0, 0, .38);
  font: 700 13px/1 var(--sx-f-sans); letter-spacing: 0; word-spacing: 0; font-variant-numeric: tabular-nums; transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) { .sx-referat .sx-referat-pin:hover .sx-referat-dot { transform: scale(1.12); } }
.sx-referat .sx-referat-pin:active .sx-referat-dot { transform: scale(.94); }
.sx-referat .sx-referat-pin[aria-expanded="true"] .sx-referat-dot { transform: scale(1.12); box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px var(--rf-halo), 0 0 0 7.5px var(--ring), 0 5px 13px -3px rgba(0, 0, 0, .38); }
.sx-referat .sx-referat-pin:focus { outline: none; }
.sx-referat .sx-referat-pin:focus-visible { outline: 2px solid var(--sx-focus, #1a74a2); outline-offset: 1px; }

/* ---------- notița: în pagină, sub desen (ecran lat) / sub oprire (telefon); al doilea clic, ×, Esc sau clic în afară o închid ---------- */
.sx-referat .sx-referat-pop { grid-area: 2 / 1; scroll-margin: 55px 0 21px; margin-top: 13px; padding: 5px 0 16px; border-top: 1px solid var(--rf-hair); border-bottom: 1px solid var(--rf-hair); color: var(--sx-ink); text-align: left; }
.sx-referat .sx-referat-pop[hidden] { display: none; }
.sx-referat .sx-referat-pop.is-in { animation: sx-referat-pop-in .2s cubic-bezier(.16, 1, .3, 1); }
@keyframes sx-referat-pop-in { from { opacity: 0; transform: translateY(-3px); } }
.sx-referat .sx-referat-pop-hd { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.sx-referat .sx-referat-pop-n { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1.5px var(--ring);
  color: #1d2733; font: 700 13px/1 var(--sx-f-sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sx-referat .sx-referat-pop-hd b { font: 600 17px/1.2 var(--sx-f-sans); letter-spacing: -.01em; color: var(--sx-ink); }
.sx-referat .sx-referat-pop-t { margin-right: auto; font: 400 14px/1.2 var(--sx-f-sans); letter-spacing: 0; color: var(--sx-ink3); white-space: nowrap; }
.sx-referat .sx-referat-x { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; margin: 0 -13px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sx-ink2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sx-referat .sx-referat-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (hover: hover) { .sx-referat .sx-referat-x:hover { color: var(--sx-ink); background: rgba(127, 127, 127, .12); } }
.sx-referat .sx-referat-x:focus { outline: none; }
.sx-referat .sx-referat-x:focus-visible { outline: 2px solid var(--sx-focus, #1a74a2); outline-offset: -6px; }
.sx-referat .sx-referat-pop-bd { display: grid; grid-template-columns: minmax(0, 34em) minmax(0, max-content); column-gap: 55px; row-gap: 13px; align-items: start; margin-top: 3px; }
.sx-referat .sx-referat-pop-p { margin: 0; font: 400 15px/22px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--sx-ink2); text-wrap: pretty; }

/* rândul desenat din program: doar etichetele reale, ≥ 13 px, în culoarea stării */
.sx-referat .sx-referat-row { display: block; min-width: 0; }
.sx-referat .sx-referat-row-ti { display: block; margin-bottom: 5px; font: 400 13px/18px var(--sx-f-sans); letter-spacing: 0; color: var(--sx-ink3); }
.sx-referat .sx-referat-row-g { display: grid; grid-template-columns: repeat(var(--n), auto); justify-content: start; font-variant-numeric: tabular-nums; }
.sx-referat .sx-referat-row-g .k { padding: 0 13px 3px; font: 400 13px/18px var(--sx-f-sans); letter-spacing: 0; word-spacing: 0; color: var(--sx-ink3); white-space: nowrap; }
.sx-referat .sx-referat-row-g .v { grid-row: 2; padding: 8px 13px; border-block: 1px solid var(--rf-row-edge); font: 500 15px/20px var(--sx-f-sans); letter-spacing: 0; word-spacing: 0; color: var(--sx-ink); white-space: nowrap; }
.sx-referat .sx-referat-row-g .k { grid-row: 1; }
.sx-referat .sx-referat-row-g .v.is-l { border-left: 1px solid var(--rf-row-edge); border-radius: 5px 0 0 5px; }
.sx-referat .sx-referat-row-g .v.is-r { border-right: 1px solid var(--rf-row-edge); border-radius: 0 5px 5px 0; }
.sx-referat .sx-referat-row-g .v.is-num { text-align: right; }
.sx-referat .sx-referat-row-g.is-a .v { background: var(--rf-row-a); }
.sx-referat .sx-referat-row-g.is-c .v { background: var(--rf-row-c); }
.sx-referat .sx-referat-row-g.is-iv .v.is-st { background: var(--rf-row-r); }

/* ---------- textul de sub desen ---------- */
.sx-referat .sx-referat-cap { margin-top: 21px; font: 400 15px/22px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--sx-ink2); text-wrap: pretty; }
.sx-referat .sx-referat-foot { margin-top: 5px; font: 400 13px/19px var(--sx-f-sans); letter-spacing: 0; word-spacing: 0; color: var(--sx-ink3); text-wrap: pretty; }

/* ---------- ecran îngust: desenul înalt, în 3 benzi; notița sub banda ei ---------- */
@media (max-width: 959px) {
  .sx-referat .sx-referat-map { display: block; max-width: 420px; }
  .sx-referat .sx-referat-art--wide { display: none; }
  .sx-referat .sx-referat-spot { display: block; }
  .sx-referat .sx-referat-band { display: block; position: relative; }
  .sx-referat .sx-referat-art--band { display: block; }
  .sx-referat .sx-referat-art .hw { font-size: 27px; }
  .sx-referat .sx-referat-art .hd { font-size: 19px; }
  .sx-referat .sx-referat-art .hb { font-size: 19px; }
  .sx-referat .sx-referat-art .hs { font-size: 18px; }
  .sx-referat .sx-referat-art .hn { font-size: 19px; }
  .sx-referat .sx-referat-art .hp { font-size: 13px; }
  .sx-referat .sx-referat-pin { position: absolute; left: calc(var(--mx) - 22px); top: calc(var(--my) - 22px); margin: 0; }
  .sx-referat .sx-referat-pop { margin: 5px 0 8px; padding-bottom: 13px; }
  .sx-referat .sx-referat-pop-bd { grid-template-columns: minmax(0, 1fr); }
  .sx-referat .sx-referat-row-g .k { padding-inline: 9px; }
  .sx-referat .sx-referat-row-g .v { padding: 8px 9px; }
  .sx-referat .sx-referat-cap { margin-top: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-referat .sx-referat-dot { transition: none; }
  .sx-referat .sx-referat-pin:hover .sx-referat-dot, .sx-referat .sx-referat-pin:active .sx-referat-dot { transform: none; }
  .sx-referat .sx-referat-pin[aria-expanded="true"] .sx-referat-dot { transform: none; }
  .sx-referat .sx-referat-pop.is-in { animation: none; }
}
@media print { .sx-referat .sx-referat-pop { display: none; } }