/* Diagram na stronach tresciowych (/maty/, /koncowki/, /motywy/).
 *
 * Ta sama technika, co arkusz do druku: siatka 8x8 z glifow Unicode, zero
 * JavaScriptu i zero obrazkow. Powod jest w scripts/lib/diagram.mjs — strony
 * klastrow nie moga dodawac blokow inline, bo CSP dopuszcza tu wylacznie
 * skrypt zgody po hashu SHA-256.
 *
 * 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. */

.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;
  grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.diagram-board .sq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 4.4vw, 26px);
  line-height: 1;
}

.diagram-board .sq.light { background: var(--sq-light, #d8d0bc); }
.diagram-board .sq.dark { background: var(--sq-dark, #263638); }

/* Bierki rysujemy jednym, pelnym glifem: biala to ten sam znak w bieli z
   czarnym obrysem. Dwa osobne zakresy Unicode roznia sie krojem w wielu
   fontach, wiec na jednej planszy wygladalyby niespojnie. */
.diagram-board .pc { color: #111; }
.diagram-board .pc.w {
  color: #fff;
  text-shadow:
    0 1px 0 #111, 0 -1px 0 #111, 1px 0 0 #111, -1px 0 0 #111,
    1px 1px 0 #111, -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111;
}

/* 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; }

@media print {
  .diagram-board .sq.light { background: #fff; }
  .diagram-board .sq.dark { background: #c9c9c9; }
  .diagram-board .pc { color: #000; }
  .diagram-board .pc.w { color: #fff; }
}