/* Diagram na stronach tresciowych (/maty/, /koncowki/, /motywy/).
 *
 * Plansza to siatka 8x8 z pol `<span>`, bierki to SVG wklejone wprost w HTML
 * przez scripts/lib/diagram.mjs — zero JavaScriptu i zero requestow. Powod
 * jest tam opisany: strony klastrow nie moga dodawac blokow inline, bo CSP
 * dopuszcza tu wylacznie skrypt zgody po hashu SHA-256.
 *
 * Wyglad ma byc TEN SAM, co plansza w aplikacji (css/board.css): te same
 * tokeny pol, ten sam komplet figur (assets/pieces/pieces.svg), ta sama rama
 * i wspolrzedne w rogach. Diagram na stronie tresciowej i plansza w grze to
 * dla czytelnika jedna rzecz.
 *
 * Wersja ekranowa uzywa tokenow motywu (--sq-light/--sq-dark), wiec diagram
 * zmienia sie razem z motywem strony. W druku wymuszamy czern na bieli,
 * dokladnie jak w css/print-sheet.css.
 *
 * BEZ WARTOSCI ZAPASOWYCH. Do 02.09.2026 kazde odwolanie mialo tu ksztalt
 * `var(--token, #wartosc)`. Zapasy byly martwe, bo wszystkie 86 stron ladujacych
 * ten arkusz laduje css/base.css WCZESNIEJ (pilnuje tego test/planszaTokeny.test.js),
 * ale przechowywaly caly rownolegly komplet kolorow: dwa odcienie starej palety
 * mistrzow (#f3f0e8, #b9b4a7), pare #364239 / #17201d czytana przy audycie jako
 * czwarty zestaw kolorow pol, oraz recznie przepisane kolory bierek. Zapas, ktory
 * nikt nie widzi, nie jest zabezpieczeniem, tylko drugim zrodlem prawdy.
 *
 * Diagram NIE dostal wlasnego, cichszego wariantu pol. Sprawdzone na zywo:
 * przy szerokosci 21 rem i ramce 3 px plansza czyta sie w tekscie jako ilustracja,
 * a nie jako panel, wiec przyciemnianie przez color-mix odbieraloby jej zwiazek
 * z plansza w aplikacji bez zysku dla skladu. Diagram i plansza to dla czytelnika
 * jedna rzecz, wiec biora dokladnie te same tokeny. */

.diagram {
  margin: var(--sp-5) 0;
  max-width: 21rem;
}

.diagram figcaption {
  margin-top: var(--sp-2);
  font-size: .9rem;
  color: var(--text-dim);
  line-height: 1.45;
}

.diagram-board {
  display: grid;
  /* OBIE osie musza byc minmax(0, 1fr), nie samo 1fr. `1fr` to skrot od
     minmax(auto, 1fr), wiec sciezka nie zejdzie ponizej min-content: pole z
     bierka jest wieksze od pustego i plansza rozjezdza sie w pionie oraz
     w poziomie. Zero jako minimum odbiera zawartosci prawo do rozpychania. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  aspect-ratio: 1;
  width: 100%;
  /* Rama i cien jak w .board (css/board.css), tylko cienszy — diagram jest
     mniejszy od planszy w grze. */
  border: 3px solid color-mix(in srgb, var(--accent) 20%, var(--bg-raised));
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: 0 6px 8px rgba(0,0,0,.24);
}

.diagram-board .sq {
  position: relative;
  display: grid;
  place-items: center;
}

.diagram-board .sq.light { background: var(--sq-light); }
.diagram-board .sq.dark { background: var(--sq-dark); }

/* Wspolrzedne w rogach pol — jak na planszy w aplikacji: cyfry w pierwszej
   kolumnie, litery w ostatnim rzedzie. Bez nich czytelnik nie ma jak polaczyc
   notacji z podpisu ("mat ruchem Hg7") z pozycja na diagramie. */
.diagram-board .coord {
  position: absolute;
  font-family: var(--font-mono);
  font-size: clamp(8px, 2.1vw, 11px);
  font-weight: 800;
  line-height: 1;
  opacity: .92;
  pointer-events: none;
}
.diagram-board .coord-file { right: 3px; bottom: 2px; }
.diagram-board .coord-rank { left: 3px; top: 2px; }
.diagram-board .sq.light .coord { color: var(--sq-dark); }
.diagram-board .sq.dark .coord { color: var(--sq-light); }

/* Bierki: ten sam autorski komplet SVG, co plansza w aplikacji. Kolor idzie
   przez --pc-fill/--pc-edge, dokladnie jak w css/board.css, wiec bialy pionek
   na jasnym polu i czarny na ciemnym maja obrys i nie zlewaja sie z tlem. */
.diagram-board .pc {
  display: block;
  width: 92%;
  height: 92%;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.42));
}
.diagram-board .pc.w {
  --pc-fill: var(--pc-white-fill);
  --pc-edge: var(--pc-white-edge);
}
.diagram-board .pc.b {
  --pc-fill: var(--pc-black-fill);
  --pc-edge: var(--pc-black-edge);
}

/* Dwa diagramy obok siebie, gdy strona pokazuje wzorzec z dwoch stron planszy.
   Gorne ograniczenie kolumny jest wazne: bez niego na szerokim ekranie plansza
   rosla do ~400 px i dominowala strone, ktora jest przede wszystkim tekstem. */
.diagram-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 20rem));
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
}

.diagram-pair .diagram { margin: 0; max-width: none; }

/* HEX-DOZWOLONY: standard skladu diagramow szachowych na papierze — czern na
   bieli, pole ciemne szare, rysunek wewnetrzny bierki w kolorze przeciwnym do
   wypelnienia. To jest kontrakt DRUKU, a nie motywu: tokeny motywu daja tu tlo
   ciemne albo kremowe i arkusz wychodzi z drukarki nieczytelny. Ta sama regula
   siedzi w css/print-sheet.css. */
@media print {
  .diagram-board {
    border-color: #000;
    box-shadow: none;
  }
  .diagram-board .sq.light { background: #fff; }
  .diagram-board .sq.dark { background: #c9c9c9; }
  .diagram-board .sq.light .coord { color: #000; }
  .diagram-board .sq.dark .coord { color: #000; }
  /* Na papierze bierka bierze kolor z wypelnienia, a rysunek wewnetrzny
     (korona, grzywa, krzyz) z obrysu w kolorze przeciwnym — tak wygladaja
     diagramy w ksiazkach szachowych. */
  .diagram-board .pc { filter: none; }
  .diagram-board .pc.w { --pc-fill: #fff; --pc-edge: #000; }
  .diagram-board .pc.b { --pc-fill: #111; --pc-edge: #fff; }
}

/* ---- grywalny diagram: przycisk i zywa plansza (js/diagram-playout.js) ---- */
/* Przycisk dostawia JS, wiec bez JavaScriptu nie ma martwego UI. Zywa plansza
   uzywa .board z css/board.css — strony z grywalnym diagramem laduja OBA
   arkusze (generatory: arkusze: ['diagram', 'board']). Kolory przez tokeny
   z base.css, z zapasowymi wartosciami dla bezpieczenstwa. */

/* Wszystkie wartosci zapasowe usuniete 02.09.2026 (fala 10). Poprzedni zapis
   bronil #17201d jako „neutralnego tla panelu, niezaleznego od palety marki" —
   to bylo nieprawda w obie strony: wartosc pochodzila z wycofanej palety
   mistrzow, a przy motywie JASNYM dawala czarny panel z kremowym napisem, czyli
   dokladnie odwrotnosc reszty strony. */
.diagram-graj {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.diagram-graj:hover { border-color: var(--accent); }
.diagram-graj:disabled { opacity: .7; cursor: progress; }

.diagram-live { display: grid; gap: 10px; }
.diagram-live-wrap { position: relative; }
.diagram-live .board { width: 100%; }
.diagram-live-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.diagram-live-level {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.diagram-live-level select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-3); /* 16 px: iOS nie powieksza pola (D-F4-03) */
}
.diagram-live-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.diagram-live-btn:hover { border-color: var(--accent); }
.diagram-live-status { min-height: 1.5em; margin: 0; font-size: 13.5px; color: var(--text-dim); }