/* ============================================================
   OPIEKA — sekcja: reakcja
   ------------------------------------------------------------
   Plik roboczy jednej sekcji, ładowany PO opieka.css, więc nadpisuje
   reguły z tamtego pliku bez !important. Powstał 2026-08-27, żeby kilku
   agentów mogło pracować nad różnymi sekcjami bez kolizji w jednym pliku.
   Po zakończeniu przebudowy treść wraca do opieka.css, a ten plik znika.
   Zero hardkodów: kolory, typografia, odstępy tylko przez var(--token).
   ============================================================ */

/* ------------------------------------------------------------
   PRZEBUDOWA 2026-08-27 — założenia

   Uwaga Łukasza: „ściana informacji", „dalej jakiś czas reakcji, to nie czas
   naprawy", „skupić się bardziej na alarmach i szybkościach reakcji". Stąd
   trzy decyzje, które trzymają cały układ:

   1. Sekcja jest MACIERZĄ: cztery priorytety × dwie pory doby. Nagłówki
      kolumn stoją RAZ, nad listą. Poprzednia wersja powtarzała „W godzinach
      pracy" i „Wieczory, weekendy, dni wolne" przy każdym z ośmiu kafli.
      To było szesnaście słów, które nie niosły nic poza pozycją w siatce,
      a zjadały tyle miejsca, co same czasy.
   2. Wiersz to pasmo na --surface-04, nie dwa osobne kafle. Kafli robi się
      w ten sposób cztery zamiast ośmiu, a kolumny mają wspólną krawędź, więc
      wzrok skanuje w dół jedną kolumnę zamiast skakać po pudełkach.
      To NIE jest ten sam wzorzec, co „co robimy" i „awaria" obok: tam
      --surface-raised i --radius-2xl, tu płytsza powierzchnia i --radius-md.
   3. Każdy priorytet ma własny kolor (rampa czerwony → pomarańcz → żółty →
      zielony), zamówiona przez Łukasza 2026-08-27. Kolor żyje wyłącznie
      w plakietce z kodem i w cienkim pasku przy krawędzi wiersza, nigdy jako
      tło karty. Hierarchię alarmu robią NIE kolor, tylko większe wartości
      czasu i grubsza nazwa, bo cztery kolorowe plakietki są wobec siebie
      wizualnie równorzędne.
      Nadal BEZ --color-accent-bg: tym tłem cennik oznacza pakiet polecany
      i ma to zostać jednoznaczne (ta sama zasada co w awaria.php).

   Czego świadomie NIE zrobiono:
   - Nie <table>. Przy 768 px kolumny wychodzą po dwa słowa, a przy 390 px
     tabela i tak rozpada się na bloki. Siatka na <ul> pozwala na telefonie
     wrócić do etykiety w kaflu, która na desktopie jest tylko dla czytnika.
   - Nie <details> na rozróżnieniu reakcja/naprawa. To zobowiązanie umowne,
     a nie drobny druk: zeszło do rangi przypisu, ale zostaje widoczne bez
     kliknięcia i w rozmiarze --font-body, nie --font-caption.
   ------------------------------------------------------------ */

/* ---------- NAGŁÓWEK SEKCJI ---------- */
/* Trzy stopnie głośności, w kolejności wartości dla klienta (uwaga Łukasza
   2026-08-27: „pilnujemy Twojej strony 24 godziny" to wartość, a nie to, że
   pracujemy od 8 do 16):
     --lead  całodobowy monitoring i alarm o każdej porze, --font-h5, --ink-90
     (bez modyfikatora) godziny pracy i metoda czterech priorytetów
     --sub   zapowiedź samej tabeli, najciszej
   Żaden z nich nie jest głośniejszy od wartości czasu w tabeli, bo to ona
   jest treścią sekcji. */
.opieka-reakcja__note {
  max-width: 58ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}
.opieka-reakcja__note--lead {
  font-size: var(--font-h5);
  font-weight: var(--fw-medium);
  color: var(--ink-90);
}
.opieka-reakcja__note--lead + .opieka-reakcja__note {
  margin-top: var(--space-3);
}
.opieka-reakcja__note--sub {
  margin-top: var(--space-2);
  max-width: 58ch;
  color: var(--ink-50);
}
/* Gwiazdka wiążąca „czas pierwszej reakcji" z przypisem na dole sekcji.
   Jako PSEUDOELEMENT, nie znak w treści: w treści dziedziczyła stopień pisma
   akapitu i przy 1440 px puchła razem z nim (uwaga Łukasza 2026-08-27:
   „za duża, brzydko się skaluje"). Tutaj ma własny, stały rozmiar
   --font-caption niezależny od otoczenia.
   Bez vertical-align: super, bo glif gwiazdki w Rubiku sam siedzi wysoko
   w polu litery i super wypychało go ponad linię wersalików. Zamiast tego
   stała korekta 0.25em liczona od WŁASNEGO stopnia pisma pseudoelementu:
   przy mniejszym foncie gwiazdka opadała do połowy wysokości wiersza i czytała
   się jak kropka, a nie jak odnośnik.
   Nie link: cel jest w tej samej sekcji i widoczny bez nawigacji, a odnośnik
   wysokości ośmiu pikseli byłby celem nie do trafienia palcem. */
.opieka-reakcja__ref::after {
  content: "*";
  font-size: var(--font-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
  vertical-align: 0.25em;
  color: var(--color-accent);
  margin-left: 0.15em;
}

/* ---------- MACIERZ: NAGŁÓWKI KOLUMN + WIERSZE ---------- */
/* Jedna definicja kolumn dla nagłówka i wszystkich wierszy. Bez subgrid,
   bo pierwsza kolumna ma stałą szerokość, więc wiersze wyrównują się same
   i układ zostaje przewidywalny w każdej przeglądarce.
   20rem = 200 px: zmierzone, „P3  Zmiana planowana" z plakietką potrzebuje
   192 px, a przy 180 px łamało się na dwa wiersze i ten jeden wiersz macierzy
   był o 27 px wyższy od reszty. Kolumna
   „poza godzinami" jest wyraźnie szersza od „w godzinach pracy", bo trzyma
   najdłuższe wartości („do końca trzeciego dnia roboczego"), a lewa ma same
   krótkie liczby. Proporcja dobrana pomiarem, nie na oko.
   Wcięcie nagłówka kolumn jest identyczne z paddingiem wiersza, inaczej
   etykieta stoi o kilkadziesiąt pikseli w lewo od wartości, którą opisuje. */
.opieka-reakcja__tabela {
  --reakcja-cols: 20rem minmax(0, 0.34fr) minmax(0, 0.66fr);
  --reakcja-gap: var(--space-2);
  --reakcja-pad: var(--space-3);
}

.opieka-reakcja__kolumny {
  display: grid;
  grid-template-columns: var(--reakcja-cols);
  column-gap: var(--reakcja-gap);
  margin: 0 0 var(--space-2);
  padding-inline: var(--reakcja-pad);
}
.opieka-reakcja__kolumna {
  font: var(--fw-semibold) var(--font-caption)/1.3 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-50);
}
/* KOLORY PRIORYTETÓW — świadome odstępstwo od systemu, zamówione wprost przez
   Łukasza 2026-08-27 (czerwony, pomarańczowy, żółty, zielony). Motyw ma dwa
   kolory: czerwień akcentu i ciemne tło, więc ta rampa jest tu obcym ciałem
   i trzeba ją trzymać krótko:
   - kolor żyje TYLKO w plakietce z kodem i w cienkim pasku przy krawędzi
     wiersza. Tła kart zostają neutralne, inaczej cztery pastelowe płachty
     zabiłyby czerwień w całym serwisie;
   - wartości dobrane zgaszone (S i L niżej niż w wersjach „semaforowych"),
     tak żeby czytały się na #0b0b0b jako akcenty, a nie jako światła;
   - P0 to nie osobny kolor, tylko --color-accent, żeby alarm i marka zostały
     tym samym czerwonym;
   - kolor NIE jest jedynym nośnikiem informacji (WCAG 1.4.1): kod P0 do P3
     i nazwa priorytetu niosą ją niezależnie i mają tak zostać.
   Zmienne żyją tutaj, nie w tokens.css: to lokalna decyzja jednej sekcji,
   a nie nowy wymiar systemu. */
.opieka-reakcja__list {
  --prio-p1: #d9782f;  /* pomarańcz  */
  --prio-p2: #e0b33c;  /* żółty      */
  --prio-p3: #52a06a;  /* zielony    */

  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.opieka-reakcja__item--p0 { --prio: var(--color-accent); }
.opieka-reakcja__item--p1 { --prio: var(--prio-p1); }
.opieka-reakcja__item--p2 { --prio: var(--prio-p2); }
.opieka-reakcja__item--p3 { --prio: var(--prio-p3); }

/* Wiersz: etykieta + dwa czasy w jednej linii, opis pod spodem na całą
   szerokość. align-items: baseline, nie center: wartości mają różne stopnie
   pisma (alarm większy) i różną liczbę wierszy, więc centrowanie rozjeżdżało
   je pionowo. Na wspólnej linii pisma stoją równo niezależnie od tego. */
.opieka-reakcja__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--reakcja-cols);
  column-gap: var(--reakcja-gap);
  row-gap: var(--space-2);
  align-items: baseline;
  padding: var(--reakcja-pad);
  border-radius: var(--radius-md);
  background: var(--surface-04);
}

/* Odstęp kodu od nazwy celowo --space-1, nie --space-2: przy szerszym odstępie
   „P3  Zmiana planowana" nie mieściło się w kolumnie 180 px i łamało się na
   dwa wiersze, przez co jeden wiersz macierzy był o 35 px wyższy od reszty. */
.opieka-reakcja__label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-1);
  flex-wrap: wrap;
}
/* Zerowanie kafla z poprzedniej wersji: na desktopie czas nie ma już własnego
   tła ani promienia, bo tłem jest całe pasmo wiersza. Bez jawnego wyzerowania
   padding-block, background i border-radius zostałyby z opieka.css i dały
   kafel na kaflu. */
.opieka-reakcja__czas {
  grid-row: 1;
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.opieka-reakcja__kiedy {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  max-width: 68ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}

/* Plakietka kodu priorytetu. Ciemny tekst na kolorze, nie kolor na ciemnym:
   pomarańcz i żółć jako cienki tekst 14 px schodzą blisko progu WCAG, a jako
   TŁO pod tekstem w kolorze strony dają z zapasem powyżej 4,5:1. */
.opieka-reakcja__kod {
  align-self: baseline;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  font: var(--fw-black) var(--font-label)/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--surface-base);
  background: var(--prio);
}
.opieka-reakcja__nazwa {
  font: var(--fw-semibold) var(--font-body)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}

/* Wartość czasu jest nośnikiem informacji, więc jako jedyna w wierszu ma
   stopień nagłówkowy. Opis i etykiety zostają w --font-body i niżej. */
.opieka-reakcja__wartosc {
  display: block;
  font: var(--fw-semibold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
/* Etykieta w kaflu: na desktopie tylko dla czytnika ekranu (nagłówek kolumny
   stoi nad listą), na telefonie wraca jako widoczny podpis, bo tam nagłówka
   kolumn nie ma. */
.opieka-reakcja__cap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- ZNACZNIK PRZY KRAWĘDZI ---------- */
/* Drugi, cichszy nośnik koloru priorytetu. Element rysunkowy, nie ramka
   rozdzielająca, więc nie łamie zasady „bez hairline borderów" z tokens.css.
   Siedzi WEWNĄTRZ paddingu wiersza, bez powiększania go. Gdy alarm dostawał
   własny padding-left, cały jego wiersz przesuwał się w prawo i jego czasy
   nie stały już w jednej kolumnie z pozostałymi (zmierzone: 18 px w bok). */
.opieka-reakcja__item::before {
  content: "";
  position: absolute;
  left: var(--space-1);
  top: var(--reakcja-pad);
  bottom: var(--reakcja-pad);
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--prio);
}

/* ---------- ALARM ---------- */
/* Po dodaniu rampy kolorów sam czerwony chip już nie wystarcza do hierarchii:
   cztery kolorowe plakietki są wizualnie równorzędne. Alarm zostaje więc przy
   większych wartościach czasu i grubszej nazwie, i to one, a nie kolor, robią
   z niego pierwszy wiersz, który klient odczyta. */
.opieka-reakcja__item--alarm .opieka-reakcja__nazwa {
  font-weight: var(--fw-bold);
}
/* Czasy alarmu o stopień większe od pozostałych. Chip sam nie wystarczał:
   przy czterech wierszach o tej samej wadze wzrok nie miał się gdzie zaczepić,
   a to alarm ma być pierwszą rzeczą, którą klient odczyta z tej sekcji. */
.opieka-reakcja__item--alarm .opieka-reakcja__wartosc {
  font-size: var(--font-h4);
  font-weight: var(--fw-bold);
}

/* ---------- NOTA O ZEGARZE I PRZYPIS ---------- */
.opieka-reakcja__zegar {
  margin: var(--space-3) 0 0;
  max-width: 68ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}
.opieka-reakcja__zegar strong {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

/* Przypis: rangą niżej niż macierz (przygaszony kolor), ale ROZMIAREM taki sam
   jak reszta prozy w sekcji. Zejście do --font-caption zamieniłoby zobowiązanie
   umowne w drobny druk, a to jest dokładnie to, czego ta strona ma nie robić.

   PADDING ZEROWY, GWIAZDKA WISI NA ZEWNĄTRZ (uwaga Łukasza 2026-08-27).
   Wcześniej przypis miał padding-left --space-4, czyli jego tekst stał o 32 px
   w prawo od akapitu o zegarze tuż nad nim i od lewej krawędzi kolumny treści.
   Dwa akapity jeden pod drugim zaczynały się w dwóch różnych miejscach, więc
   oko widziało uskok, a gwiazdka siedziała w tej dziurze i zwracała na siebie
   uwagę. Teraz tekst wraca na wspólną oś, a gwiazdka wychodzi POZA kolumnę
   w lewo i przestaje przesuwać cokolwiek. */
.opieka-reakcja__przypis {
  position: relative;
  margin: var(--space-3) 0 0;
  padding-left: 0;
  max-width: 68ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-50);
}
.opieka-reakcja__przypis strong {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}
/* Gwiazdka przypisu, ta sama zasada co przy .opieka-reakcja__ref: pseudoelement
   z własnym, stałym stopniem pisma. W treści dziedziczyła --font-body i przy
   szerokim ekranie wychodziła nieproporcjonalnie duża.
   top w em od WŁASNEGO rozmiaru, więc znacznik siedzi na wysokości pierwszego
   wiersza akapitu niezależnie od tego, jak ten wiersz się złamie. */
/* right: calc(100% + odstęp) stawia prawą krawędź znaku o ten odstęp na lewo
   od lewej krawędzi akapitu, czyli cała gwiazdka wisi poza kolumną tekstu.
   Zmierzone przy 390 px: kolumna treści zaczyna się 20 px od krawędzi ekranu
   (--page-padding), a znak zajmuje pas od 10,5 px do 15,8 px, czyli mieści się
   w marginesie strony z zapasem. scrollWidth = clientWidth = 390, więc NIE ma
   poziomego przewijania. Gdyby --page-padding kiedyś zszedł poniżej mniej
   więcej 10 px, gwiazdka wyszłaby poza ekran i trzeba by ją na wąskich
   ekranach wrócić do linii tekstu. Dziś taki wariant byłby martwym kodem,
   więc go nie piszę. */
.opieka-reakcja__przypis::before {
  content: "*";
  position: absolute;
  right: calc(100% + var(--space-1));
  top: 0.35em;
  font-size: var(--font-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-accent);
}

/* Zastrzeżenie pod tabelą: mechanika dni roboczych plus furtka na indywidualne
   ustalenia. Stoi RAZ i pod całą tabelą, a nie przy każdej liczbie: przy ośmiu
   powtórzeniach „chyba że ustalimy inaczej" tabela przestałaby cokolwiek
   obiecywać, a tu obejmuje wszystkie osiem wartości naraz. */
.opieka-reakcja__zastrzezenie {
  margin: var(--space-3) 0 0;
  max-width: 68ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-50);
}

/* ---------- TELEFON I WĄSKI TABLET ---------- */
/* Poniżej 768 px trzy kolumny dałyby czasy po dwa słowa w wierszu, więc
   macierz rozkłada się na: etykieta, opis, dwa czasy obok siebie. Nagłówki
   kolumn znikają, a ich rolę przejmują podpisy w kaflach. */
@media (max-width: 768px) {
  .opieka-reakcja__kolumny { display: none; }

  .opieka-reakcja__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-2);
    row-gap: var(--space-3);
    align-items: start;
  }
  .opieka-reakcja__label { grid-column: 1 / -1; grid-row: 1; gap: var(--space-2); }
  .opieka-reakcja__kiedy { grid-column: 1 / -1; grid-row: 2; }
  .opieka-reakcja__czas {
    grid-row: 3;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-04);
  }
  .opieka-reakcja__cap {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 2px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    display: block;
    font: var(--fw-medium) var(--font-caption)/1.4 var(--font-sans);
    color: var(--ink-50);
  }
}

/* Poniżej 480 px dwie kolumny czasów dają około 150 px na wartość, czyli
   „od najbliższego dnia roboczego" łamie się na trzy wiersze i pasmo puchnie.
   Jedna kolumna, czasy jeden pod drugim. */
@media (max-width: 480px) {
  .opieka-reakcja__item {
    grid-template-columns: minmax(0, 1fr);
  }
  .opieka-reakcja__czas { grid-row: auto; }
}