/*
 * Decyzje ownera ponad zatwierdzony wzorzec v2 (styles.css pozostaje bajt w bajt).
 *
 * 1.11.2026 — duże ekrany: sekcja wypełnia całą wysokość okna zamiast kończyć
 * się na 980 px, więc siatka działek nie urywa się u dołu (grid.js rysuje ją na
 * całą wysokość sekcji). Telefon i tablet (< 900 px) bez zmian.
 */
@media (min-width: 900px) {
  .cs { height: max(640px, 100vh); }
}

/*
 * 1.11.2026 — strzałka w „Powiadom mnie”: zamiast znaku „→” (drobny, położenie
 * zależne od metryk fontu) rysunek SVG wyśrodkowany w kółku. Rozmiar w em od
 * fontu kółka ze wzorca (17 px desktop, 16 px telefon), kolor jak dotąd (--acc).
 */
.cs-btn-arrow svg { display: block; width: 1.15em; height: 1.15em; }

/*
 * 1.11.2026 — zgoda (wariant B, tuż pod formularzem; wstawia ją cs-form.js) i stan
 * błędu jako stała część strony. Wyłącznie tokeny wzorca; jedyny nowy kolor to
 * #FF6B3D ze wskazania w README paczki („pill with a #FF6B3D border”). Odstęp od
 * formularza i rozmiar na telefonach jak notka wzorca.
 */
.cs-form.cs-form--error { border-color: #FF6B3D; }
.cs-note.cs-note--error { color: #FF6B3D; }
.cs-consent {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 460px; box-sizing: border-box;
  margin-top: -12px;
  font-size: 13px; line-height: 1.5; color: var(--mut2);
  cursor: pointer;
}
.cs-consent[hidden] { display: none; }
.cs-consent-box {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 16px; height: 16px; margin: 2px 0 0;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--field);
  display: grid; place-content: center;
  cursor: pointer;
}
.cs-consent-box:checked { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 12px var(--glow); }
.cs-consent-box:checked::after {
  content: ''; width: 8px; height: 4px;
  border-left: 2px solid var(--on-acc); border-bottom: 2px solid var(--on-acc);
  transform: translateY(-1px) rotate(-45deg);
}
.cs-consent-box:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.cs-consent a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 899px) {
  .cs-consent { margin-top: -10px; max-width: none; }
}
@media (max-width: 359px), (max-width: 899px) and (max-height: 600px) {
  .cs-consent { margin-top: -8px; font-size: 12px; }
}

/*
 * 1.11.2026 — małe telefony: pusta część paska z logo nie zasłania działek.
 * Pasek `.cs-header` ([data-ui]) biegnie przez całą szerokość; na 320×568 pasmo
 * działek jest niskie i środek działki 4 wypada pod nim, więc grid.js ignorował
 * stuknięcie. Dotyk łapie teraz tylko samo logo — ten sam układ, którego wzorzec
 * używa dla bloku tekstu (`.cs-content` przezroczysty, `.cs-copy` łapie).
 * Wygląd i grid.js bez zmian; zapytanie jak „Small phones” wzorca.
 */
@media (max-width: 359px), (max-width: 899px) and (max-height: 600px) {
  .cs-header { pointer-events: none; }
  .cs-logo { pointer-events: auto; }
}