/* [cc 17.10] sx-alimentari.css · partea „alimentari”, varianta finală Flota v2 (A „Graficul desenat” + grafturi). Markup: parts/alimentari.ro.php, deschis/închis: js/sx-alimentari.js.
   Un grafic de creion pe toată lățimea: luna camionului B 101 DEM, porțiune cu porțiune (de la un plin la altul, late cât km-ii). Linia plină = cât a consumat, punctată = cât trebuia;
   hașura dintre ele = diferența, scrisă în litri („sub normă” sub minusuri). Fără axă cu cifre: notița „mai sus = mai multă motorină”. Cota „1.442 km între două plinuri” pe porțiunea-poveste.
   Dedesubt: datele plinurilor, „tone duse” și banda de tone. Alegi o porțiune → cifrele ei apar SUB grafic, pe un rând ca rândul de fapte (locul îl ține .sx-alimentari-slot, înălțimea o pune JS-ul).
   Liniile = SVG întins pe lățime (preserveAspectRatio none + vector-effect: grosimea rămâne în px); hașura, cifrele și notițele = HTML, deci drepte și clare la orice lățime.
   < 700 px: notițele devin o legendă deasupra graficului, cifrele unei porțiuni pe două coloane.
   Temă: implicit luminos; html[data-theme="dark"] = închis. Totul sub .sx-alimentari; nimic pe html/body. Spațiere Fibonacci (3 5 8 13 21 34 55 89). */

.sx-alimentari {
  --al-ph: 192px;          /* înălțimea graficului */
  --al-hand: "Cmd Hand", "Caveat", "Segoe Print", cursive;
  --al-real: hsl(40 13% 15% / .92);
  --al-real2: hsl(40 13% 23% / .4);
  --al-norm: hsl(40 13% 23% / .72);
  --al-mark: hsl(40 13% 20% / .9);
  --al-note: hsl(40 13% 23% / .82);   /* 17.10: „sub normă” scris de mână ≥ 4,5:1 (cu --al-norm, .72, era 4,39:1); linia punctată rămâne pe --al-norm */
  --al-over: #9c5c10;
  --al-over-hatch: rgba(156, 92, 16, .55);
  --al-over-fill: rgba(156, 92, 16, .08);
  --al-under-fill: hsl(40 13% 23% / .09);
  --al-ton: hsl(40 13% 23% / .14);
  --al-band: hsl(40 13% 23% / .045);
  --al-band-on: hsl(40 13% 23% / .075);
  --al-dim: .3;
  --al-ease: cubic-bezier(.16, 1, .3, 1);
}
html[data-theme="dark"] .sx-alimentari {
  --al-real: rgba(242, 239, 231, .94);
  --al-real2: rgba(232, 228, 217, .38);
  --al-norm: rgba(232, 228, 217, .72);
  --al-mark: rgba(232, 228, 217, .9);
  --al-note: rgba(232, 228, 217, .76);
  --al-over: #d4a855;
  --al-over-hatch: rgba(212, 168, 85, .6);
  --al-over-fill: rgba(212, 168, 85, .1);
  --al-under-fill: rgba(232, 228, 217, .09);
  --al-ton: rgba(232, 228, 217, .17);
  --al-band: rgba(255, 255, 255, .035);
  --al-band-on: rgba(255, 255, 255, .065);
  --al-dim: .42;
}

/* ---------- așezarea: graficul pe toată lățimea, apoi legenda, apoi un singur rând de text ---------- */
.sx-alimentari .sx-alimentari-fig { position: relative; margin: 0; min-width: 0; }
.sx-alimentari .sx-alimentari-chart {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "plot" "x" "tl" "t" "slot";
  grid-template-rows: var(--al-ph) 28px auto auto auto;
}
.sx-alimentari .sx-alimentari-plot { grid-area: plot; position: relative; min-width: 0; }
.sx-alimentari .sx-alimentari-x { grid-area: x; position: relative; }
.sx-alimentari .sx-alimentari-tl { grid-area: tl; }
.sx-alimentari .sx-alimentari-t { grid-area: t; }
.sx-alimentari .sx-alimentari-slot { grid-area: slot; height: var(--al-slot, 0px); transition: height .2s var(--al-ease); }

/* liniile (SVG întins; grosimile în px) */
.sx-alimentari .sx-alimentari-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-alimentari .sx-alimentari-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.sx-alimentari .sx-alimentari-plins path { stroke: var(--sx-hair); stroke-width: 1px; }
.sx-alimentari .sx-alimentari-svg .sx-alimentari-base { stroke: var(--sx-hair-strong); stroke-width: 1px; }
.sx-alimentari .sx-alimentari-norm { stroke: var(--al-norm); stroke-width: 1.7px; stroke-dasharray: 6 5; }
.sx-alimentari .sx-alimentari-real { stroke: var(--al-real); stroke-width: 2.3px; }
.sx-alimentari .sx-alimentari-real2 { stroke: var(--al-real2); stroke-width: 1.2px; }
.sx-alimentari .sx-alimentari-seg { transition: opacity .2s ease; }

/* hașura diferenței + litrii (HTML, pe aceleași coloane ca liniile) */
.sx-alimentari .sx-alimentari-marks,
.sx-alimentari .sx-alimentari-t,
.sx-alimentari .sx-alimentari-hit { display: grid; grid-template-columns: var(--al-cols); margin: 0; padding: 0; list-style: none; }
.sx-alimentari .sx-alimentari-marks { position: absolute; inset: 0; pointer-events: none; }
.sx-alimentari .sx-alimentari-m { position: relative; margin: 0; padding: 0; list-style: none; transition: opacity .2s ease; }
.sx-alimentari .sx-alimentari-gap { position: absolute; left: 8px; right: 8px; top: var(--t); bottom: calc(100% - var(--b)); min-height: 3px; }
.sx-alimentari .is-over > .sx-alimentari-gap { background: repeating-linear-gradient(135deg, var(--al-over-hatch) 0 1px, transparent 1px 5px), var(--al-over-fill); }
.sx-alimentari .is-under > .sx-alimentari-gap { background: var(--al-under-fill); }
.sx-alimentari .sx-alimentari-dl { position: absolute; left: 50%; top: var(--t); transform: translate(-50%, calc(-100% - 5px)); display: flex; align-items: baseline; gap: 6px; font: 400 13px/18px var(--sx-f-sans); letter-spacing: 0; word-spacing: 0; color: var(--sx-ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-alimentari .sx-alimentari-dl b { font-weight: 500; color: var(--sx-ink2); }
.sx-alimentari .sx-alimentari-dl em { font: 400 17px/18px var(--al-hand); font-style: normal; color: var(--al-note); }
/* sub normă: litrii sub linii, cu „sub normă” dedesubt (peste normă: deasupra) */
.sx-alimentari .is-under > .sx-alimentari-dl { top: var(--b); transform: translate(-50%, 5px); flex-direction: column; align-items: center; gap: 0; }
.sx-alimentari .sx-alimentari-dl, .sx-alimentari .sx-alimentari-note, .sx-alimentari .sx-alimentari-span span { text-shadow: 0 0 3px var(--sx-bg0), 0 0 3px var(--sx-bg0), 0 0 6px var(--sx-bg0); }
.sx-alimentari .is-star > .sx-alimentari-dl { font-size: 18px; line-height: 24px; }
.sx-alimentari .is-star > .sx-alimentari-dl b { font-weight: 600; color: var(--sx-ink); }
.sx-alimentari .is-star > .sx-alimentari-dl em { font-size: 21px; line-height: 24px; color: var(--al-mark); }

/* cota de creion pe porțiunea-poveste: „1.442 km între două plinuri”, cu liniuțe la capete */
.sx-alimentari .sx-alimentari-span { position: absolute; top: 0; left: calc(var(--x0) + 8px); width: calc(var(--x1) - var(--x0) - 16px); margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; transition: opacity .2s ease; }
.sx-alimentari .sx-alimentari-span span { font: 400 19px/20px var(--al-hand); letter-spacing: 0; word-spacing: 0; color: var(--al-mark); white-space: nowrap; }
.sx-alimentari .sx-alimentari-span i { position: relative; align-self: stretch; height: 9px; border-inline: 1.4px solid var(--al-mark); }
.sx-alimentari .sx-alimentari-span i::before { content: ""; position: absolute; left: 1px; right: 1px; top: 3.5px; border-top: 1.4px solid var(--al-mark); transform: rotate(-.25deg); }

/* notițele de creion (pe lat: pe grafic, cu săgeți) */
.sx-alimentari .sx-alimentari-legend { grid-area: plot; position: relative; z-index: 1; pointer-events: none; }
.sx-alimentari .sx-alimentari-note { position: absolute; z-index: 1; margin: 0; display: flex; align-items: flex-end; gap: 0; pointer-events: none; font: 400 20px/22px var(--al-hand); letter-spacing: 0; word-spacing: 0; color: var(--al-mark); white-space: nowrap; transition: opacity .2s ease; }
.sx-alimentari .sx-alimentari-note svg { flex: none; overflow: visible; fill: none; stroke: var(--al-mark); stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round; }
.sx-alimentari .sx-alimentari-note i { display: none; }
/* „mai sus = mai multă motorină”: sus, în stânga, cu o săgeată în sus */
.sx-alimentari .sx-alimentari-note--up { left: 0; top: 0; align-items: flex-start; gap: 5px; }
.sx-alimentari .sx-alimentari-note--up svg { width: 14px; height: 30px; }
.sx-alimentari .sx-alimentari-note--up span { padding-top: 1px; white-space: normal; }
.sx-alimentari .sx-alimentari-note--up br { display: inline; }
/* „cât a consumat” din stânga porțiunii-poveste, spre linia plină */
.sx-alimentari .sx-alimentari-note--real { left: calc(var(--nx) - 3px); top: var(--ny); align-items: center; gap: 3px; transform: translate(-100%, -50%); }
.sx-alimentari .sx-alimentari-note--real svg { width: 40px; height: 24px; margin-top: 8px; }
.sx-alimentari .sx-alimentari-note--real span { text-align: right; }
/* „cât trebuia, după tone” de dedesubt, spre linia punctată */
.sx-alimentari .sx-alimentari-note--norm { left: var(--nx); top: calc(var(--ny) + 5px); flex-direction: column; align-items: center; gap: 2px; transform: translateX(-50%); }
.sx-alimentari .sx-alimentari-note--norm svg { width: 24px; height: 34px; }
.sx-alimentari .sx-alimentari-note--norm span { text-align: center; }

/* axa de jos: datele plinurilor, cu un punct pe linie */
.sx-alimentari .sx-alimentari-xl { position: absolute; top: 0; transform: translateX(-50%); padding-top: 10px; font: 400 12px/16px var(--sx-f-sans); letter-spacing: 0; color: var(--sx-ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-alimentari .sx-alimentari-xl::before { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--al-real); }
.sx-alimentari .sx-alimentari-xl.is-first { transform: none; }
.sx-alimentari .sx-alimentari-xl.is-first::before { left: 0; }
.sx-alimentari .sx-alimentari-xl.is-last { transform: translateX(-100%); }
.sx-alimentari .sx-alimentari-xl.is-last::before { left: auto; right: -3px; margin-left: 0; }
.sx-alimentari .sx-alimentari-xl small { font: inherit; }

/* tonele duse (din comenzi): eticheta de creion + o bandă mică sub fiecare porțiune */
.sx-alimentari .sx-alimentari-tl { display: flex; align-items: flex-end; gap: 3px; margin: 0; font: 400 18px/20px var(--al-hand); letter-spacing: 0; word-spacing: 0; color: var(--al-mark); transition: opacity .2s ease; }
.sx-alimentari .sx-alimentari-tl svg { flex: none; width: 12px; height: 16px; margin-bottom: -3px; overflow: visible; fill: none; stroke: var(--al-mark); stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round; }
.sx-alimentari .sx-alimentari-t li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; height: 34px; margin: 0; padding: 0 8px; list-style: none; transition: opacity .2s ease; }
.sx-alimentari .sx-alimentari-t span { font: 400 12px/16px var(--sx-f-sans); letter-spacing: 0; color: var(--sx-ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-alimentari .sx-alimentari-t i { display: block; align-self: stretch; height: calc(var(--h) * 13px); background: var(--al-ton); border-top: 1.5px dashed var(--al-norm); }

/* ---------- stratul de ales: o porțiune = un buton (toată înălțimea, ≥ 44 px lățime) ---------- */
.sx-alimentari .sx-alimentari-hit { grid-column: 1; grid-row: 1 / 5; position: relative; z-index: 3; }
.sx-alimentari .sx-alimentari-hit > li { display: flex; margin: 0; padding: 0; list-style: none; min-width: 0; }
.sx-alimentari .sx-alimentari-btn { position: relative; flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: default; -webkit-tap-highlight-color: transparent; }
.sx-alimentari .is-js .sx-alimentari-btn { cursor: pointer; }
.sx-alimentari .sx-alimentari-btn::before { content: ""; position: absolute; inset: 0 1px; background: transparent; transition: background-color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .sx-alimentari .is-js .sx-alimentari-btn:hover::before { background: var(--al-band); }
}
.sx-alimentari .sx-alimentari-btn[aria-expanded="true"]::before { background: var(--al-band-on); }
.sx-alimentari .sx-alimentari-btn:focus { outline: none; }
.sx-alimentari .sx-alimentari-btn:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: -2px; }

/* o porțiune aleasă: celelalte trec în spate (în întunecat, mai puțin: rămân citibile) */
.sx-alimentari .has-sel .sx-alimentari-seg:not(.is-on),
.sx-alimentari .has-sel .sx-alimentari-m:not(.is-on),
.sx-alimentari .has-sel .sx-alimentari-note,
.sx-alimentari .has-sel .sx-alimentari-span { opacity: var(--al-dim); }
.sx-alimentari .has-sel .sx-alimentari-t li:not(.is-on) { opacity: .45; }

/* ---------- cifrele unei porțiuni: SUB grafic, pe un rând ca rândul de fapte (nu peste porțiunea pe care o citești) ---------- */
.sx-alimentari .sx-alimentari-tip { position: absolute; top: calc(100% + 13px); left: 0; right: 0; z-index: 4; box-sizing: border-box; padding: 13px 55px 8px 0; border-top: 1px solid var(--sx-hair-strong); background: var(--sx-bg0); color: var(--sx-ink); text-align: left; opacity: 0; transition: opacity .16s ease; }
.sx-alimentari .sx-alimentari-tip[hidden] { display: none; }
.sx-alimentari .sx-alimentari-tip.is-open { opacity: 1; }
/* firul de creion de la porțiunea aleasă până la rând */
.sx-alimentari .sx-alimentari-tip::before, .sx-alimentari .sx-alimentari-tip::after { pointer-events: none; }
.sx-alimentari .sx-alimentari-tip::before { content: ""; position: absolute; left: var(--ax, 50%); top: -14px; width: 1.4px; height: 13px; margin-left: -.7px; background: var(--al-mark); }
.sx-alimentari .sx-alimentari-tip::after { content: ""; position: absolute; left: var(--ax, 50%); top: -3.5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--al-mark); }
.sx-alimentari .sx-alimentari-tip-dl { display: flex; flex-wrap: wrap; gap: 13px 55px; margin: 0; }
.sx-alimentari .sx-alimentari-tip-dl > div { display: grid; gap: 2px; min-width: 0; }
.sx-alimentari .sx-alimentari-tip-dl dt { font: 400 13px/20px var(--sx-f-sans); letter-spacing: 0; word-spacing: 0; color: var(--sx-ink3); font-variant-numeric: tabular-nums; }
.sx-alimentari .sx-alimentari-tip-dl .is-h dt { font-weight: 500; color: var(--sx-ink2); }
.sx-alimentari .sx-alimentari-tip-dl dd { margin: 0; font: 400 15px/22px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--sx-ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-alimentari .sx-alimentari-tip-dl dd b { font-weight: 600; font-size: 16px; color: var(--sx-ink); }
.sx-alimentari .sx-alimentari-tip-dl .is-d.is-over b { box-shadow: inset 0 -3px 0 var(--al-over-fill), 0 2px 0 var(--al-over); }
.sx-alimentari .sx-alimentari-x-btn { position: absolute; top: 5px; right: -8px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sx-ink3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sx-alimentari .sx-alimentari-x-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .sx-alimentari .sx-alimentari-x-btn:hover { color: var(--sx-ink); } }
.sx-alimentari .sx-alimentari-x-btn:focus { outline: none; }
.sx-alimentari .sx-alimentari-x-btn:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: -4px; }

/* ---------- sub grafic: legenda (din ce sunt cifrele + date inventate) și un singur rând de text ---------- */
.sx-alimentari .sx-alimentari-cap { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 34px; row-gap: 3px; margin: 8px 0 0; padding: 0; font: 400 13px/20px var(--sx-f-sans); letter-spacing: 0; word-spacing: 0; color: var(--sx-ink3); text-wrap: pretty; }
.sx-alimentari .sx-alimentari-hint { display: none; color: var(--sx-ink2); }
.sx-alimentari .is-js .sx-alimentari-hint { display: inline; }
.sx-alimentari .sx-alimentari-p { margin: 16px 0 0; font: 400 18px/27px var(--sx-f-sans); letter-spacing: -.012em; word-spacing: 0; color: var(--sx-ink); text-wrap: pretty; }

/* ---------- telefon ---------- */
@media (max-width: 699px) {
  .sx-alimentari { --al-ph: 200px; }
  .sx-alimentari .sx-alimentari-chart { grid-template-areas: "legend" "plot" "x" "tl" "t" "slot"; grid-template-rows: auto var(--al-ph) 28px auto auto auto; }
  .sx-alimentari .sx-alimentari-hit { grid-row: 2 / 6; }
  .sx-alimentari .sx-alimentari-legend { grid-area: legend; display: flex; flex-wrap: wrap; column-gap: 21px; row-gap: 3px; margin: 0 0 21px; }
  .sx-alimentari .sx-alimentari-note, .sx-alimentari .sx-alimentari-note--up, .sx-alimentari .sx-alimentari-note--real, .sx-alimentari .sx-alimentari-note--norm { position: static; flex-direction: row; transform: none; align-items: center; gap: 8px; font-size: 19px; line-height: 24px; }
  .sx-alimentari .sx-alimentari-note--up { order: 3; gap: 5px; }
  .sx-alimentari .sx-alimentari-note--up svg { width: 10px; height: 19px; }
  .sx-alimentari .sx-alimentari-note--real svg, .sx-alimentari .sx-alimentari-note--norm svg { display: none; }
  .sx-alimentari .sx-alimentari-note i { display: block; width: 26px; height: 0; border-top: 2px solid var(--al-real); }
  .sx-alimentari .sx-alimentari-note--norm i { border-top: 2px dashed var(--al-norm); }
  .sx-alimentari .sx-alimentari-note br, .sx-alimentari .sx-alimentari-note--up br { display: none; }
  .sx-alimentari .has-sel .sx-alimentari-note { opacity: 1; }
  .sx-alimentari .sx-alimentari-span { left: calc(var(--x0) + 4px); width: calc(var(--x1) - var(--x0) - 8px); }
  .sx-alimentari .sx-alimentari-span span { font-size: 17px; line-height: 18px; }
  .sx-alimentari .sx-alimentari-dl { font-size: 12px; line-height: 16px; }
  .sx-alimentari .sx-alimentari-dl em { font-size: 15px; line-height: 15px; }
  .sx-alimentari .is-star > .sx-alimentari-dl { flex-direction: column; align-items: center; gap: 0; font-size: 16px; line-height: 20px; }
  .sx-alimentari .is-star > .sx-alimentari-dl em { font-size: 18px; line-height: 18px; }
  .sx-alimentari .sx-alimentari-xl small { display: none; }
  .sx-alimentari .sx-alimentari-t li { padding: 0 4px; }
  .sx-alimentari .sx-alimentari-gap { left: 4px; right: 4px; }
  .sx-alimentari .sx-alimentari-tip { padding-right: 34px; }
  .sx-alimentari .sx-alimentari-tip-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 21px; }
  .sx-alimentari .sx-alimentari-tip-dl .is-h, .sx-alimentari .sx-alimentari-tip-dl .is-d { grid-column: 1 / -1; }
  .sx-alimentari .sx-alimentari-tip-dl dd { white-space: normal; }
  .sx-alimentari .sx-alimentari-x-btn { top: 2px; right: -10px; }
  .sx-alimentari .sx-alimentari-p { font-size: 17px; line-height: 26px; }
}

/* ---------- mișcare redusă: fără tranziții ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-alimentari .sx-alimentari-tip,
  .sx-alimentari .sx-alimentari-seg,
  .sx-alimentari .sx-alimentari-m,
  .sx-alimentari .sx-alimentari-t li,
  .sx-alimentari .sx-alimentari-tl,
  .sx-alimentari .sx-alimentari-note,
  .sx-alimentari .sx-alimentari-span,
  .sx-alimentari .sx-alimentari-slot,
  .sx-alimentari .sx-alimentari-btn::before { transition: none; }
}