/**
 * reviews-summary.css — podsumowanie ocen na karcie produktu: średnia,
 * liczba zweryfikowanych opinii i rozkład od 5★ do 1★.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-reviews-summary__, nic stąd nie wycieka na cudze znaczniki. Wyjątki:
 * .dc-ring (komponent) i .dc-icon (rejestr) — dostrajane wyłącznie
 * w selektorach potomnych pod prefiksem sekcji.
 *
 * DLACZEGO OSOBNY PLIK, A NIE WARIANT reviews.css — pełne uzasadnienie
 * w docblocku reviews-summary.php. W skrócie: wspólne są trzy elementy
 * nagłówka, a różni wszystko poniżej — podsumowanie ocen, którego strona
 * główna nie ma wcale, i pas biegnący w DRUGIEJ OSI.
 *
 * KARTA OPINII JEST TU CO DO TOKENU TAKA SAMA JAK W reviews.css — promień,
 * szkło, obwódka, cień, awatar, inicjały, pismo nazwiska i podpisu.
 * Różni się WYŁĄCZNIE kolejność środka: autor u góry, ocena pod nim, cytat
 * na dole (makieta karty produktu), zamiast cudzysłowu na górze i autora
 * na dole (makieta strony głównej). To jest różnica układu wymuszona przez
 * oś pasa — karta w pasie pionowym jest wąska i wysoka — a nie druga
 * stylistyka. Wartości są przepisane, a nie współdzielone, bo to DRUGIE
 * wystąpienie: reguła 18 każe wydzielać przy trzecim albo przy pierwszym
 * rozjeździe kopii. Kandydat zgłoszony w raporcie.
 *
 * PANEL JEST JASNY W MOTYWIE JASNYM — to zwykła szklana karta sekcji,
 * nie czarny panel jak first-burn. Dlatego złoto bierze --dc-accent-strong
 * (reguła J), a nie --dc-accent, i dlatego kropka statusu bierze
 * --dc-success, a nie --dc-success-on-dark, którego używa reviews.css
 * na swoim ciemnym tle.
 */

/* ==========================================================================
   1. PANEL
   ========================================================================== */

/* .dc-reviews-summary nie ma tu żadnej deklaracji — szerokość i marginesy
   boczne daje .dc-container, pionowy oddech .dc-section, obie z base.css
   bez modyfikacji (reguła 8). Klasa zostaje w znaczniku jako nazwa bloku.

   BEZ overflow: hidden — poświata obwódki leży 4 px poza obrysem
   (design-audit.md, partia 6), a panel nie ma tu żadnej warstwy atmosfery,
   którą trzeba by przycinać.

   Scalenia: promień 28 trafia w --dc-radius-28 bez scalania, tło .5 ->
   --dc-surface-glass-soft co do wartości, szkło blur(20) saturate(165%)
   = --dc-blur-lg co do cyfry, obwódka biel .7 -> --dc-border-subtle,
   cień 0 16px 50px .09 -> --dc-shadow-xl (0 16 44 .14) + inset .92 -> .95
   (reguła 13). Padding clamp(32px, 4vw, 48px) złożony z tokenów bez
   scalania. */
.dc-reviews-summary__panel {
  position: relative;
  isolation: isolate;
  padding: clamp(var(--dc-space-32), 4vw, var(--dc-space-48));
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

/* ==========================================================================
   2. OBWÓDKA — FAZA I ZWROT
   Konstrukcja siedzi w components/ring.css, warstwy wstawia znacznik.
   Makieta rysuje rant dokładnie tak jak komponent (stożek from
   var(--dc-ring), maska, 1,5 px, 7 s) — wartości trafiają w domyślne
   pokrętła co do jednej, więc sekcji zostaje sama faza i zwrot.

   Numer 3 z rejestru: start o 3/12 obrotu (90°), nieparzysty numer, czyli
   obrót W LEWO. Rejestr ma zajęte wszystkie dwanaście numerów, więc
   obowiązuje reguła „numer, którego nie ma na TEJ SAMEJ stronie": 3 nosi
   volume-picker, sekcja wyłącznie strony głównej, która z kartą produktu
   nigdy nie stoi razem. Ten sam sposób wyboru co przy product-hero (4 po
   origin), product-details (2 po about) i first-burn (9 po how-to-order).
   Pokrętła na panelu, nie na warstwie — zmienne własne dziedziczą się w dół.
   ========================================================================== */

.dc-reviews-summary__panel {
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -3 / 12);
}

/* ==========================================================================
   3. SIATKA PANELU
   Makietowe repeat(auto-fit, minmax(320px, 1fr)) trafia w --dc-grid-min-lg
   co do piksela; odstęp clamp(30px, 4vw, 56px) złożony z tokenów (30 -> 28).
   align-items: center jak w makiecie.

   Podział jak w makiecie: CAŁE podsumowanie w lewej kolumnie, pas kart
   w prawej. align-items: center trzyma podsumowanie w pionowej osi pasa,
   więc obie kolumny czytają się jako jeden blok, a nie dwa doklejone.

   min(..., 100%) jest OBOWIĄZKOWE: bez niego ścieżka minimalna toru jest
   przy 390 px szersza niż wnętrze panelu i kolumny wychodzą poza obrys.
   Sam auto-fit tego nie chroni — zwija liczbę kolumn, nie ich minimalną
   szerokość.
   ========================================================================== */

.dc-reviews-summary__grid {
  position: relative;
  z-index: var(--dc-z-raised);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: clamp(var(--dc-space-28), 4vw, var(--dc-space-56));
  align-items: center;
}

/* ==========================================================================
   4. NAGŁÓWEK
   ========================================================================== */

/* Nadtytuł: jedna czwórka z design-audit.md C.8 (partia 6) — 12 / 600 /
   --dc-tracking-widest, odstęp 14 do h2. Kolor --dc-accent-strong, bo
   panel jest jasny (reguła J). */
.dc-reviews-summary__eyebrow {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* Makietowe clamp(26px, 3vw, 34px) to --dc-display-4
   (clamp(26px, 3.2vw, 34px)) — podłoga i sufit trafiają co do piksela,
   różni się sam współczynnik vw. text-wrap: balance jak w makiecie:
   nagłówek ma dwa wiersze i bez tego pierwszy bywa o słowo dłuższy.
   Krój, waga i trakt przychodzą z base.css. */
.dc-reviews-summary__heading {
  margin-block-end: var(--dc-space-22);
  font-size: var(--dc-display-4);
  text-wrap: balance;
}

/* Wiersz o weryfikacji. W makiecie stoi pod rozkładem ocen, w tej sekcji
   zamyka kolumnę nagłówka — patrz docblock, akapit o dwóch kolumnach. */
.dc-reviews-summary__note {
  display: flex;
  align-items: center;
  gap: var(--dc-space-8);
  margin-block-start: var(--dc-space-24);
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
}

/* Kropka statusu — dekoracja, znaczenie niesie zdanie obok (aria-hidden
   w znaczniku). Rozmiar 8 px i zieleń trafiają w --dc-space-8
   i --dc-success bez scalania. --dc-success, a nie --dc-success-on-dark:
   ten panel jest jasny (nagłówek pliku). */
.dc-reviews-summary__dot {
  flex: none;
  width: var(--dc-space-8);
  height: var(--dc-space-8);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-success);
}

/* ==========================================================================
   5. ŚREDNIA OCENA I GWIAZDKI
   ========================================================================== */

.dc-reviews-summary__average {
  display: flex;
  align-items: baseline;
  gap: var(--dc-space-12);
  margin-block-end: var(--dc-space-6);
}

/* Makietowe 64 px / 800 / line-height 1 / trakt -.03em. Rozmiar scalony do
   --dc-display-1 (clamp(40px, 5vw, 58px)) — 64 jest jednym z czterech
   sufitów, które ten token scala (tokens.css: „scala sufity 64/58/54/52").
   Zysk poza samym scaleniem: makietowe 64 px jest STAŁE, więc przy 390 px
   liczba zabierałaby ponad połowę szerokości kolumny; clamp schodzi tam
   do 40 px. Trakt -.03em to --dc-tracking-tight co do przystanku. */
.dc-reviews-summary__average-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-display-1);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-text);
}

.dc-reviews-summary__stars {
  display: flex;
  gap: var(--dc-space-2);
  color: var(--dc-accent);
}

/* GWIAZDKA JEST JEDYNĄ IKONĄ RYSOWANĄ WYPEŁNIENIEM, a dc_icon() dokłada
   każdej ikonie fill="none" i stroke="currentColor" — i słusznie, bo
   wszystkie pozostałe są kreskowe (patrz inc/icons.php). Samo zdjęcie
   atrybutu nie wystarczy: base.css ma pod niego regułę svg[fill='none']
   o specyficzności (0,1,1), która bije atrybut prezentacyjny.

   Dlatego selektor jest DWUKLASOWY — (0,2,0) wygrywa z (0,1,1), bo liczba
   klas rozstrzyga przed liczbą atrybutów. Jedna klasa (0,1,0) by przegrała
   i gwiazdki wyszłyby konturem zamiast pełnym złotem.

   To DRUGIE takie nadpisanie w projekcie, po reviews.css — komentarz przy
   ikonie w inc/icons.php zapowiadał, że przy drugim dc_icon() powinna
   dostać wariant zamiast mnożenia nadpisań w sekcjach. Zgłoszone
   w raporcie zadania; nie zrobione, bo to zmiana w rejestrze ikon.

   currentColor bierze złoto z .dc-reviews-summary__stars wyżej, więc ikona
   działa w obu motywach bez ani jednej reguły dark. */
.dc-reviews-summary__stars .dc-icon--star {
  fill: currentColor;
  stroke: none;
}

/* 13,5 px -> --dc-text-base (skala tokenu to 13 / 13,5), odstęp 24. */
.dc-reviews-summary__count {
  margin-block-end: var(--dc-space-24);
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   6. ROZKŁAD OCEN
   Kolumna pięciu wierszy, każdy: stopień, słupek, liczba. Szerokość 340 px
   trafia w --dc-measure-xs co do piksela; odstęp 8 i wewnętrzny 10 —
   w --dc-space-8 i --dc-space-10, oba bez scalania.
   ========================================================================== */

.dc-reviews-summary__levels {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-8);
  max-width: var(--dc-measure-xs);
}

.dc-reviews-summary__level {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
}

/* Stałe szerokości słupków bocznych — 20 px na stopień i 34 px na liczbę —
   są w makiecie po to, żeby słupki zaczynały się i kończyły w jednej linii
   we wszystkich pięciu wierszach. Bez nich „174" i „1" dawałyby słupki
   różnej długości przy tym samym procencie. Scalenia: 20 -> --dc-space-20
   (trafienie), 34 -> --dc-space-32 (skala tokenu to 30 / 32 / 34).
   Makietowe #5a5a5a to --dc-text-secondary. */
.dc-reviews-summary__level-label {
  flex: none;
  width: var(--dc-space-20);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--dc-text-secondary);
}

.dc-reviews-summary__level-count {
  flex: none;
  width: var(--dc-space-32);
  font-size: var(--dc-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--dc-text-subtle);
}

/* Tor słupka: 7 px -> --dc-space-8 (skala tokenu to 7 / 8), promień pigułki,
   tło rgba(0,0,0,.07) -> --dc-surface-sunken. overflow: hidden przycina
   wypełnienie do promienia toru. */
.dc-reviews-summary__bar {
  flex: 1;
  height: var(--dc-space-8);
  overflow: hidden;
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-sunken);
}

/* Wypełnienie. Szerokość przychodzi ze znacznika jako DANA
   (--dc-reviews-summary-fill), a nie jako gotowa deklaracja width —
   dzięki temu w znaczniku stoi liczba, a w CSS reguła. Wartość domyślna 0%
   chroni przed pustym słupkiem na pełną szerokość, gdyby zmiennej
   zabrakło.

   MAKIETA ANIMUJE TU SZEROKOŚĆ od zera (transition 1,1 s) w chwili wjazdu
   sekcji w ekran. Motyw nie ma jeszcze mechanizmu wjazdu (data-reveal jest
   pomijane od pierwszej sekcji), a przejście bez niego albo doskoczyłoby
   przy wczytaniu strony, albo rozegrałoby się poza ekranem — czyli
   kosztowałoby ruch, którego nikt nie zobaczy. Słupek wypisuje więc od razu
   swoją szerokość. To samo rozstrzygnięcie co przy licznikach w about.php.
   // TODO: naliczanie słupków razem z mechanizmem wjazdu. */
.dc-reviews-summary__bar-fill {
  display: block;
  width: var(--dc-reviews-summary-fill, 0%);
  height: 100%;
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent);
}

/* ==========================================================================
   7. PAS OPINII — DWA OKNA PIONOWE

   Konstrukcja pasa siedzi w components/marquee.css (wariant
   .dc-marquee--vertical), mechanika w assets/js/marquee.js. Sekcji zostaje
   to, czym RÓŻNI SIĘ jej wystąpienie: liczba okien, odstęp między nimi
   i wysokość, w której pas ma się mieścić.

   WYSOKOŚĆ 560 px JEST LICZBĄ, NIE TOKENEM — i jest to jedyna taka wartość
   w tym pliku (reguła 17, punkt 5: grep ma ją znaleźć i to trafienie jest
   świadome). Powody, ten sam gatunek co przy 560 px plamy w about.css
   i 620 px kolumny tekstu tamże:

     a) to WYSOKOŚĆ OKNA POKAZU, a nie odstęp, promień ani rozmiar pisma —
        czyli nie należy do żadnej skali, którą tokens.css prowadzi;
     b) wartość jest wprost z makiety (product.html: height:560px na oknie
        pasa) i nie ma z czym jej scalać: skala --dc-space-* kończy się
        na 80 px;
     c) nie da się jej wyprowadzić z układu. Pierwsza wersja wiązała
        wysokość pasa z wysokością kolumny podsumowania (align-items:
        stretch + height: 100%) — działa przy dwóch kolumnach, ale gdy
        siatka zwinie się do jednej, pas nie ma się od czego odbić i rośnie
        do sumy wszystkich kart, czyli kilku tysięcy pikseli.

   Odstęp między oknami 16 px z makiety trafia w --dc-space-16 bez scalania.

   LICZBA OKIEN JEST AUTO-FIT, NIE WPISANA (reguła 9). Makieta ma dwa i przy
   1440 px wychodzą dwa — ale przy 390 px dwa okna dostają po ok. 120 px
   i karta łamie się na pojedyncze słowa, a nazwisko jest przycinane.
   minmax(--dc-grid-min-sm) zwija je wtedy do jednego okna na pełną
   szerokość. Zmierzone: 1440 -> 2 okna po 248 px, 768 -> 2 po 312, 390 ->
   1 okno 262 px.

   WYSOKOŚĆ STOI NA STREAMIE, NIE NA OKNIE — i to jest różnica, która robi
   całą robotę przy zwinięciu. Przy wysokości na oknie dwa okna jedno pod
   drugim dałyby 1120 px pasa na telefonie; przy wysokości na siatce dwa
   rzędy DZIELĄ te 560 px po połowie i sekcja zostaje tej samej wysokości
   niezależnie od liczby kolumn.
   ========================================================================== */

.dc-reviews-summary__stream {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-16);
  height: 560px;
}

/* Okno pasa. Maskę, przycinanie i oś ruchu daje komponent; sekcja podaje
   samą wysokość, bo tylko ona wie, ile miejsca ma w swoim układzie. */
.dc-reviews-summary__lane {
  height: 100%;
}

/* Odstęp między kartami w pasie — 16 px jak w makiecie. Pas jest kolumną
   flexa (komponent), więc wystarczy gap; marginesu na karcie nie ma,
   inaczej niż w wariancie poziomym, gdzie odstęp niesie margin-inline-end
   karty. */
.dc-reviews-summary__track {
  gap: var(--dc-space-16);
}

/* ==========================================================================
   8. KARTA OPINII
   Wartości co do tokenu jak .dc-reviews__card (nagłówek pliku): promień 18,
   szkło .86, obwódka subtelna, cień md + wewnętrzne rozjaśnienie, padding 22.
   Bez width i bez margin-inline-end — w pasie pionowym karta ma szerokość
   okna, a odstęp niesie gap pasa.
   ========================================================================== */

.dc-reviews-summary__card {
  display: flex;
  flex: none;
  flex-direction: column;
  padding: var(--dc-space-22);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-18);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-md), var(--dc-shadow-inset-top);
}

/* Autor NA GÓRZE karty — układ z makiety karty produktu. Odstęp 10 między
   awatarem a nazwiskiem i 9 pod całym wierszem trafiają w --dc-space-10
   i --dc-space-8 (skala 7/8). */
.dc-reviews-summary__author {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-8);
}

/* Awatar 40 px — wartość systemowa z design-audit.md C.8 („awatar 40 / 50%"),
   nie makietowe 36. Ta sama liczba co w reviews.css, żeby dwie sekcje
   pokazujące te same opinie nie rysowały ich w dwóch rozmiarach. */
.dc-reviews-summary__avatar,
.dc-reviews-summary__initials {
  flex: none;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border-radius: var(--dc-radius-full);
}

.dc-reviews-summary__avatar {
  object-fit: cover;
}

/* Inicjały w złotym kółku — wariant dla opinii bez zdjęcia. Rozstrzyga
   WYPEŁNIENIE pola zdjęcia w opinii, a nie pozycja na liście: puste pole
   znaczy inicjały (patrz dc_opinions() w mu-plugins/dc-opinie.php).
   Przepis identyczny z .dc-reviews__initials. */
.dc-reviews-summary__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--dc-border) solid var(--dc-border-accent);
  background-color: var(--dc-accent-a10);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-black);
  color: var(--dc-accent-strong);
}

/* min-width: 0 na kolumnie tożsamości — bez tego długi podpis
   („Częstochowa · kocioł automatyczny") rozpycha element flex ponad
   szerokość karty, bo domyślne min-width: auto nie pozwala mu zejść
   poniżej treści. */
.dc-reviews-summary__identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dc-reviews-summary__name {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
}

.dc-reviews-summary__meta {
  margin-block-start: var(--dc-space-2);
  font-size: var(--dc-text-xs);
  color: var(--dc-text-muted);
}

/* Ocena karty: pięć rysunków dla oka, jedno zdanie dla czytnika ekranu
   (znacznik). Gwiazdki 12 px jak w reviews.css. */
.dc-reviews-summary__rating {
  margin-block-end: var(--dc-space-10);
}

.dc-reviews-summary__card-stars {
  display: flex;
  gap: var(--dc-space-2);
  color: var(--dc-accent);
}

/* Wypełnienie gwiazdki — patrz sekcja 5, ten sam dwuklasowy selektor
   i ten sam powód. */
.dc-reviews-summary__card-stars .dc-icon--star {
  fill: currentColor;
  stroke: none;
}

/* GWIAZDKA PUSTA — TA SAMA BRYŁA, PRZYGASZONE ZŁOTO

   Ocena jedzie z bazy, więc gwiazdek jest zawsze pięć, a różni je samo
   wypełnienie. Puste NIE są rysowane konturem: obrys z rejestru ma 1,7 px,
   co przy ikonie 12 px zlewa ramiona gwiazdki w plamę — ten sam powód, dla
   którego wypełniona gwiazdka wyżej zdejmuje stroke. Zostaje ta sama bryła
   w złocie o alfie 0,30, czyli rządek pięciu kształtów, w którym od razu
   widać, ile jest zapalonych. --dc-accent-a30 nie zmienia się z motywem
   (złoto jest w obu to samo), więc i tu nie ma ani jednej reguły dark.

   OCENA JEST ATRYBUTEM DANYCH, NIE KLASĄ MODYFIKUJĄCĄ. Klasa w rodzaju
   --rating-3 wpisywałaby wartość w nazwę, a to jest DANA — ta sama zasada
   co przy szerokości słupka rozkładu, która idzie zmienną własną zamiast
   style="width:81%".

   :nth-child liczy tu SVG-i, bo są jedynymi elementami wewnątrz rządka.
   Progi są wypisane wprost dla czterech ocen zamiast liczone, bo skala ma
   pięć stopni i CSS nie umie sparametryzować :nth-child zmienną własną.
   Piątka nie ma tu wiersza — przy ocenie 5 nie gaśnie nic i drzewo jest
   dokładnie takie jak przed podłączeniem bazy.

   Specyficzność: (0,3,0) — atrybut (0,1,0) + klasa ikony (0,1,0) +
   :nth-child (0,1,0). Bije regułę wypełnienia wyżej, która ma (0,2,0). */
.dc-reviews-summary__card-stars[data-dc-rating='4'] .dc-icon--star:nth-child(n + 5),
.dc-reviews-summary__card-stars[data-dc-rating='3'] .dc-icon--star:nth-child(n + 4),
.dc-reviews-summary__card-stars[data-dc-rating='2'] .dc-icon--star:nth-child(n + 3),
.dc-reviews-summary__card-stars[data-dc-rating='1'] .dc-icon--star:nth-child(n + 2) {
  fill: var(--dc-accent-a30);
}

/* Cytat: 13 px, interlinia rozluźniona, tekst drugiego stopnia —
   co do tokenu jak .dc-reviews__text. */
.dc-reviews-summary__quote {
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-secondary);
}