/* ==========================================================================
   SKŁAD · „SŁOIK ZE STU KRATEK” (kierunek D3, zatwierdzony przez właściciela 2026-10-02)
   Prototyp: _work/serwis_v2_2026-10/sklad_wizualizacja/D3.html. Arkusz ładuje WYŁĄCZNIE partials/v2/composition.njk i tylko wtedy,
   gdy istnieje model wizualizacji (filtr `compositionJar` → scripts/lib/sklad-jar.mjs), czyli gdy lista pokazuje liczby
   (bramka label_v6). W launch przy otwartej bramce ani ten arkusz, ani rysunek, ani skrypt nie trafiają na stronę.
   Zakres: kontener `.wl-sec__in.cx` sekcji #sklad. Tokeny: --wl-orange / --wl-black / --wl-white, kroje strony; zero gradientów, cieni i ramek.
   Kwadraty legendy: `::before` wiersza listy (markup listy bez zmian), kolor z `--cx-m<N>` ustawionych w stylu kontenera z danych.
   Ruch: wejście raz (opacity + transform kratek), wybór wiersza = przygaszenie pozostałych kratek (opacity). prefers-reduced-motion: bez przejść.
   Runda 2 (orzeczenie compliance 2026-10-02): cztery grupy — pełny pomarańcz (feed_meat), przygaszony pomarańcz = pomarańcz + 30 % czerni (feed_pork_other, ton prototypów D1/D2,
   color-mix w obrębie tokenów; bez color-mix: pełny pomarańcz), czerń (feed_other; runda 4: także tokoferole — kreskowanie usunięte); legenda grup + podpis pod słoikiem (`.cx-notes`), skala „1 kratka = 1% składu”,
   obrys powiększonej kratki i lupy (pomarańczowy pierścień z białą obwódką). Telefon: `.cx-fig` = display:contents — sticky jest sam `.cx-panel` (słoik + lupa + skala),
   legenda i podpis płyną pod nim (poza sticky). Desktop: `.cx-panel` = display:contents, wszystko w jednej siatce sticky w prawej kolumnie.
   Runda 3 (UX + orkiestrator 2026-10-02): przygaszony pomarańcz = pomarańcz + 40 % czerni (kontrast do pomarańczu ≥ 2,2:1, do czerni ≥ 2,8:1); obrys = sylwetka słoika 500 g
   (wieczko węższe od korpusu, ~połowa dawnej wysokości); desktop: szerokość słoika ograniczona wysokością ekranu (kolumna sticky mieści się z podpisem przy 1280×720 / 1366×768),
   od 1600 px do 360 px; telefon: panel sticky = słoik + gniazdo legendy (legenda grup ALBO odczyt wyboru) + skala, ≤ ~30 % ekranu razem z nagłówkiem; lupa z opisami POD panelem
   (poza sticky); bez sticky przy max-height 500 px (poziomo). Lupa: opisy od góry, sąsiedni składnik = biała kratka z czarnym obrysem (od 2026-10-02; dawniej ciemnoszary = czerń 60 %), obrys najmniejszego składnika (rozmaryn).
   ========================================================================== */
.cx{
  --cx-orange:var(--wl-orange);
  --cx-black:var(--wl-black);
  --cx-dim:var(--wl-orange);   /* bez color-mix: pełny pomarańcz (rysunek nadal czytelny, legenda grup i lista niosą podział) */
  --cx-none:transparent;       /* pozycja w mg/kg: wiersz listy bez kwadratu (nigdy kratka) */
  --cx-ring:2px;               /* obrys powiększonej kratki i lupy */
  /* szerokość rysunku słoika (viewBox 308 × 515 j., wys. = szer. / 0,598). Telefon: panel + nagłówek ≤ ~30 % ekranu → wys. słoika ≤ 30svh − nagłówek − 16 px (padding panelu) */
  --cxw:clamp(84px,calc((30svh - var(--v2-hdr,74px) - 16px) * .598),160px);
  --cx-stroke:2px;             /* obrys jak piktogram słoika kalkulatora (.v2-jar__line), grubość stała w px */
  --cx-zw:108px;               /* lupa: 10 × 10 kratek po 0,01 % + obrys (viewBox 108 j.); runda 3: na telefonie poza sticky, więc w pełnym rozmiarze */
  --cx-top:var(--v2-hdr,74px); /* sticky pod nagłówkiem */
}
@supports (color:color-mix(in srgb,red 60%,blue)){.cx{--cx-dim:color-mix(in srgb,var(--wl-orange) 60%,var(--wl-black));}}

/* --- wiersze listy: kwadrat legendy + cel dotyku ≥ 48 px ------------------------------------------------------------------ */
.cx .v2-comp__row{display:grid;grid-template-columns:14px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:48px;padding:8px;margin:0 -8px;}
.cx .v2-comp__row::before{content:"";display:block;width:14px;height:14px;background:var(--cx-sw,transparent);}
.cx .v2-comp__list{max-width:30rem;}
.cx [data-comp="main"]>.v2-comp__row:nth-child(1){--cx-sw:var(--cx-m1)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(2){--cx-sw:var(--cx-m2)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(3){--cx-sw:var(--cx-m3)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(4){--cx-sw:var(--cx-m4)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(5){--cx-sw:var(--cx-m5)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(6){--cx-sw:var(--cx-m6)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(7){--cx-sw:var(--cx-m7)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(8){--cx-sw:var(--cx-m8)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(9){--cx-sw:var(--cx-m9)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(10){--cx-sw:var(--cx-m10)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(11){--cx-sw:var(--cx-m11)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(12){--cx-sw:var(--cx-m12)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(13){--cx-sw:var(--cx-m13)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(14){--cx-sw:var(--cx-m14)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(15){--cx-sw:var(--cx-m15)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(16){--cx-sw:var(--cx-m16)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(17){--cx-sw:var(--cx-m17)}
.cx [data-comp="main"]>.v2-comp__row:nth-child(18){--cx-sw:var(--cx-m18)}
/* wybór (JS): pomarańczowy blok wiersza; kwadrat czernieje, żeby nie zniknął na pomarańczu */
.cx-js .v2-comp__row{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s;}
/* przycisk wyboru (JS, `aria-pressed`): przezroczysty, na całą powierzchnię wiersza — tekst listy bez zmian, zero przesunięcia układu */
.cx-pick{position:absolute;inset:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;}
.cx-pick:focus-visible{outline-offset:-3px;box-shadow:none;}
.cx .v2-comp__row.is-on{background:var(--wl-orange);}
.cx [data-comp="main"]>.v2-comp__row.is-on::before{background:var(--wl-black);}

/* --- rysunek. W markupie stoi `style="display:none"`: bez tego arkusza (brak CSS, błąd sieci) zostaje sama dzisiejsza lista. -------------------------------
   Telefon: `.cx-fig` znika z układu (display:contents); panel sticky = `.cx-panel` (słoik | gniazdo legendy nad skalą), pod nim podpis i lupa w przepływie. */
.cx .cx-fig{display:contents !important;}
.cx-panel{display:grid;grid-template-columns:var(--cxw) minmax(0,1fr);grid-template-areas:"jar slot" "jar scale";grid-template-rows:1fr auto;
  column-gap:16px;row-gap:8px;align-items:start;margin:32px 0 0;padding:8px 0;position:sticky;top:var(--cx-top);z-index:2;background:var(--wl-white);}
.cx-jarw{grid-area:jar;}
.cx-slot{grid-area:slot;display:grid;min-width:0;}
.cx-slot>*{grid-area:1 / 1;}
.cx-scale{grid-area:scale;align-self:end;margin:0;max-width:none;font:600 12px/1.3 var(--wl-mono);letter-spacing:.06em;text-transform:uppercase;}
.cx-legend{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.cx-legend__it,.cx-read{display:flex;align-items:baseline;gap:8px;margin:0;font:700 12px/1.3 var(--wl-mono);letter-spacing:.06em;text-transform:uppercase;}
/* odczyt wyboru (JS): w miejscu legendy, ten sam krój; legenda ukryta (visibility — wysokość gniazda bez zmian, zero przesunięcia) */
.cx-read{visibility:hidden;align-self:start;}
.cx-has-sel .cx-read{visibility:visible;}
.cx-has-sel .cx-legend{visibility:hidden;}
.cx-legend__name{min-width:0;}
.cx-legend__sum{flex:none;margin-left:auto;white-space:nowrap;}   /* suma grupy przy prawej krawędzi wiersza jak procent w liście (runda poprawek 2026-10-02) */
.cx .cx-note{margin:12px 0 0;}
/* lupa: na telefonie pod panelem, poza sticky — powiększenie | podpis lupy nad opisami */
.cx-zoomb{display:grid;grid-template-columns:var(--cx-zw) minmax(0,1fr);grid-template-areas:"side cap" "side keys";grid-template-rows:auto 1fr;column-gap:16px;row-gap:8px;align-items:start;margin:20px 0 0;}
.cx-side{grid-area:side;}
.cx-cap{grid-area:cap;margin:0;max-width:none;font:600 12px/1.3 var(--wl-mono);letter-spacing:0;text-transform:uppercase;}
.cx-cap span{display:block;}   /* runda 4: każde zdanie podpisu lupy od nowej linii także na telefonie („1” nie odrywa się od „mała kratka”) */
.cx-keys{grid-area:keys;min-width:0;}
/* podpowiedź nad listą: miejsce zajęte zawsze (bez JS niewidoczna — zero przesunięcia przy inicjalizacji), wariant dotyk / mysz z (hover:hover) */
.cx .cx-hint{display:block !important;visibility:hidden;margin:32px 0 0;}
.cx .cx-hint+.v2-comp__list{margin-top:8px;}   /* podpowiedź „przy liście”: odstęp listy (40 px) przechodzi nad podpowiedź */
.cx-js .cx-hint{visibility:visible;}
.cx-hint__t--mouse{display:none;}
@media (hover:hover){.cx-hint__t--touch{display:none;}.cx-hint__t--mouse{display:inline;}}
.cx-mark{fill:none;stroke:var(--wl-orange);stroke-width:var(--cx-ring);vector-effect:non-scaling-stroke;}
.cx-mark__halo{fill:none;stroke:var(--wl-white);stroke-width:calc(var(--cx-ring) + 2px);vector-effect:non-scaling-stroke;}
.cx-jar{display:block;width:var(--cxw);height:auto;overflow:visible;}
.cx-jar__line{fill:none;stroke:var(--wl-black);stroke-width:var(--cx-stroke);stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.cx-jar__lid{fill:var(--wl-white);}                            /* wieczko białe z czarnym obrysem — czerń w tym wykresie znaczy „pozostałe składniki” */
.cx-s,.cx-e{shape-rendering:crispEdges;}                       /* sąsiednie odcinki jednej kratki bez jasnej szczeliny antyaliasingu */
.cx-e{fill:var(--wl-black);opacity:.08;}                       /* kratka pusta (suma < 100 nie przechodzi bezpiecznika; zostaje dla pozycji niepełnych) */
.cx-c--orange{fill:var(--wl-orange);}
.cx-c--black{fill:var(--wl-black);}
.cx-c--dim{fill:var(--cx-dim);}
.cx-s,.cx-z,.cx-key,.cx-zring{transition:opacity .15s,background-color .15s;}
.cx-js .cx-jar .cx-s{cursor:pointer;}
.cx-zoom{display:block;width:var(--cx-zw);height:auto;overflow:visible;}
.cx-z--soft{fill:var(--wl-white);stroke:var(--wl-black);stroke-width:1.5px;vector-effect:non-scaling-stroke;}   /* sąsiedni składnik w lupie: kratka BIAŁA z czarnym obrysem (runda poprawek 2026-10-02: szarość z krycia czerni była powierzchnią z tokenu tekstowego; pełna czerń vs biała z obrysem = 21:1) */
.cx-z.is-on{opacity:1;}
.cx-keys__list{list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.cx-key{display:flex;align-items:baseline;gap:8px;margin:0;font:700 12px/1.3 var(--wl-mono);letter-spacing:.06em;text-transform:uppercase;}
.cx-key__sw{flex:none;width:10px;height:10px;}
.cx-key .cx-key__sw--soft{background:var(--wl-white);outline:2px solid var(--wl-black);outline-offset:-2px;}   /* jak kratki lupy: biały kwadrat z czarnym obrysem (outline do wewnątrz, nie border: strona nie ma ramek) */
.cx-key__sw--ring{outline:2px solid var(--wl-orange);outline-offset:1px;}
.cx-bg--orange{background:var(--wl-orange);}
.cx-bg--black{background:var(--wl-black);}
.cx-bg--dim{background:var(--cx-dim);}
.cx-key.is-on{background:var(--wl-orange);}
/* wybór: wszystko poza wybranym składnikiem gaśnie do 15 % */
.cx-has-sel .cx-s:not(.is-on),.cx-has-sel .cx-z:not(.is-on),.cx-has-sel .cx-zring:not(.is-on){opacity:.15;}

/* --- desktop ≥ 1100: lista w lewej kolumnie (bez zmiany rytmu), słoik w pustej prawej połowie, równo z górą listy, sticky ---------- */
@media (min-width:1100px){
  /* szerokość słoika: 22vw, ale wysokość kolumny sticky (słoik + skala + legenda + podpis ≈ słoik + 175 px) mieści się w ekranie z zapasem 16 px pod spodem
     (1280×720, 1366×768); 180 px = zmierzona część pod słoikiem (≈ 173 px przy 1280–1366) + zapas; ×0,598 = szer./wys. rysunku */
  .cx{--cxw:clamp(200px,min(22vw,calc((100vh - var(--cx-top) - 40px - 16px - 180px) * .598)),312px);--cx-stroke:3px;--cx-zw:108px;--cx-ring:3px;
    display:grid;grid-template-columns:minmax(0,30rem) minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr;column-gap:clamp(48px,5vw,80px);}
  .cx>*{grid-column:1;}
  .cx>.v2-sec-h{grid-column:1 / -1;}
  .cx>.cx-fig{display:grid !important;grid-column:2;grid-row:2 / -1;align-self:start;justify-self:start;margin-top:40px;padding:0;position:sticky;top:calc(var(--cx-top) + 40px);z-index:2;background:var(--wl-white);
    grid-template-columns:var(--cxw) 13.5rem;grid-template-areas:"jar side" "jar cap" "jar keys" "scale scale" "slot slot" "note note";grid-template-rows:auto auto 1fr auto auto auto;column-gap:24px;row-gap:14px;align-items:start;}
  .cx-panel,.cx-zoomb{display:contents;}
  .cx-scale{align-self:start;}
  .cx-legend{gap:4px;}
  .cx .cx-note{grid-area:note;margin:0;}
  .cx .cx-hint{margin-top:40px;}
  .cx-side{margin-top:calc(var(--cxw) * 97 / 308 - 5px);}   /* desktop: kratki lupy na wysokości górnego rzędu słoika (GEO.topRowY / GEO.vbW; tam leży powiększona kratka; 5 px = obrys lupy) */
  .cx-cap{letter-spacing:.1em;}
}
@media (min-width:1600px){.cx{--cxw:clamp(200px,min(22vw,calc((100vh - var(--cx-top) - 40px - 16px - 180px) * .598)),360px);}}
/* poziomo (niski ekran): bez sticky — panel zasłaniałby listę */
@media (max-height:500px){.cx-panel,.cx>.cx-fig{position:relative;top:auto;}}

/* --- wejście: kratki pojawiają się od dna (8 ms na kratkę ≈ 0,8 s + 0,35 s), potem lupa i legenda ------------------------------- */
.cx-cell{transform-box:fill-box;transform-origin:50% 50%;}
.cx-armed .cx-cell{opacity:0;transform:scale(.6);}
.cx-armed.cx-in .cx-cell{opacity:1;transform:none;transition:opacity .25s calc(var(--v) * 8ms),transform .35s var(--wl-ease) calc(var(--v) * 8ms);}
.cx-armed .cx-side,.cx-armed .cx-cap,.cx-armed .cx-keys,.cx-armed .cx-markg{opacity:0;}
.cx-armed.cx-in .cx-side,.cx-armed.cx-in .cx-cap,.cx-armed.cx-in .cx-keys,.cx-armed.cx-in .cx-markg{opacity:1;transition:opacity .3s .9s;}
/* skala, legenda grup i podpis pod słoikiem: zawsze widoczne (zastrzeżenia nie czekają na animację) */
@media (prefers-reduced-motion:reduce){.cx *,.cx *::before{transition:none !important;}}