/* assets/zagrozenia.css
   Purpose: strona /zagrozenia — pytania z numerem, rysunek sygnałów syreny, kroki, ramka „Do sprawdzenia”;
            oraz /zagrozenia-spotkanie — zapis spotkania dla starszych (sekcja na końcu pliku)
   NOT for: wspólnego wyglądu narzędzi (→ odjazdy.css: .pasek, .podtytul, .stopka, .zrodlo)

   ZASADY jak w narzędziach: duży druk, mocny kontrast, zero animacji. Rysunek sygnałów
   jest czystym CSS i aria-hidden — treść niesie tekst obok, rysunek tylko pomaga zapamiętać.
   Fala modulowana BEZ podziałki czasu: rozporządzenie (Dz.U. 2025 poz. 645) mówi tylko
   „modulowany dźwięk przez trzy minuty”, a „6 s / 6 s” było wyłącznie w napisach ze spotkania. */

.zag { max-width: 46rem; }
.zag p { font-size: 1.08rem; line-height: 1.6; margin: 0 0 .8rem; }

.pyt { padding: 1.8rem 0 .6rem; border-top: 2px solid var(--rule); }
.pyt:first-of-type { margin-top: 1rem; border-top: 3px solid var(--ink); }
.pyt h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); letter-spacing: -.02em;
          line-height: 1.15; margin-bottom: .9rem; display: flex; gap: .8rem; align-items: baseline; }
.nr { font-family: var(--mono); font-size: .85rem; font-weight: 500; color: var(--amber);
      letter-spacing: .08em; flex-shrink: 0; }

/* Dopisek „wg spotkania” — inny wygląd niż fakt ze źródła, żeby nie dało się ich pomylić. */
.zag .wg { padding: .7rem .95rem; border-left: 3px solid var(--rule-hard); background: var(--paper-warm);
      color: var(--ink-soft); font-size: 1rem; }
.zag .zr { font-size: .92rem; color: var(--ink-faint); }

/* ── sygnały ───────────────────────────────────────────── */
.sygnaly { list-style: none; padding: 0; margin: 0 0 1rem; }
.sygnaly li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.1rem; align-items: center;
              padding: .9rem 0; border-bottom: 1px solid var(--rule); font-size: 1.08rem; line-height: 1.5; }
.fala { display: block; height: 2.4rem; }
/* Rośnie i opada: fala z gradientu radialnego, powtarzana w poziomie. */
.fala-mod { background:
  radial-gradient(circle at 50% 100%, transparent 58%, var(--amber) 59% 72%, transparent 73%) 0 0 / 1.25rem 1.2rem repeat-x,
  radial-gradient(circle at 50% 0, transparent 58%, var(--amber) 59% 72%, transparent 73%) .625rem 1.2rem / 1.25rem 1.2rem repeat-x; }
.fala-ciagla { background: linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 4px no-repeat; }
.fala-krotka { background: linear-gradient(var(--ink-faint), var(--ink-faint)) 0 50% / 34% 4px no-repeat; }
/* Straż: trzy osobne „górki” z przerwami — szary, bo to sygnał nie dla mieszkańców. */
.fala-osp { background:
  radial-gradient(circle at 50% 100%, transparent 58%, var(--ink-faint) 59% 72%, transparent 73%) 0 .6rem / 1.6rem 1.2rem no-repeat,
  radial-gradient(circle at 50% 100%, transparent 58%, var(--ink-faint) 59% 72%, transparent 73%) 2.9rem .6rem / 1.6rem 1.2rem no-repeat,
  radial-gradient(circle at 50% 100%, transparent 58%, var(--ink-faint) 59% 72%, transparent 73%) 5.8rem .6rem / 1.6rem 1.2rem no-repeat; }
@media (max-width: 480px) {
  .sygnaly li { grid-template-columns: 1fr; gap: .5rem; }
  .fala { width: 7.5rem; }
}

/* ── listy ─────────────────────────────────────────────── */
.lista { padding-left: 1.2rem; margin: 0 0 1rem; }
.lista li, .kroki li { font-size: 1.08rem; line-height: 1.55; margin-bottom: .6rem; }
.kroki { list-style: none; counter-reset: krok; padding: 0; margin: 0 0 1rem; }
.kroki li { counter-increment: krok; position: relative; padding-left: 2.7rem; }
.kroki li::before { content: counter(krok); position: absolute; left: 0; top: .05rem;
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--mono); font-size: .9rem; color: var(--paper-pure); background: var(--ink); }

/* ── liczby z powiatu ──────────────────────────────────── */
.liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.liczby div { display: flex; flex-direction: column; border-top: 3px solid var(--ink); padding-top: .5rem; }
.liczby dt { font-size: .88rem; color: var(--ink-faint); order: 2; }
.liczby dd { margin: 0; font-family: var(--mono); font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); font-weight: 500; order: 1; }

/* ── do sprawdzenia ────────────────────────────────────── */
.sprawdz { margin-top: 2.2rem; padding: 1.2rem 1.3rem; border: 2px solid var(--amber); border-radius: 4px;
           background: var(--amber-wash); }
.sprawdz h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.sprawdz p { margin: 0; }

/* ── /zagrozenia-spotkanie: zapis dla starszych ───────────
   Większy druk i cele dotyku min. 48 px — czytają głównie osoby starsze, często na telefonie. */
.senior p, .senior li { font-size: 1.2rem; line-height: 1.7; }
.senior .wg { font-size: 1.1rem; }
.senior .skrot { font-size: 1.3rem; line-height: 1.6; color: var(--ink); }
.senior .uwaga { padding: .8rem 1rem; border-left: 4px solid var(--amber); background: var(--amber-wash); }
.kadr { margin: 1.4rem 0; }
.kadr a { display: block; }
.kadr img { display: block; width: 100%; height: auto; border-radius: 4px; }
.kadr figcaption { font-size: 1rem; color: var(--ink-faint); margin-top: .5rem; }
.spis { list-style: none; padding: 0; margin: 1.6rem 0 0; border-top: 3px solid var(--ink); }
.senior .spis li { margin: 0; }
.spis a { display: flex; gap: 1rem; align-items: baseline; min-height: 48px; padding: .75rem 0;
          border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 600; }
.spis a:hover { color: var(--amber); }
.spis .nr { min-width: 3.6rem; }
.obejrzyj { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: .55rem 1.1rem;
            border: 2px solid var(--ink); border-radius: 4px; color: var(--ink); text-decoration: none; font-weight: 600; }
.obejrzyj:hover { background: var(--ink); color: var(--paper-pure); }
.obejrzyj .cicho { font-weight: 400; font-size: .95rem; }
/* Zapis zwinięty: kto chce tylko najważniejszego, nie przewija godziny tekstu. */
.zapis { margin: .4rem 0 1rem; border: 2px solid var(--rule-hard); border-radius: 4px; background: var(--paper-pure); }
.zapis summary { min-height: 48px; padding: .8rem 1rem; font-size: 1.15rem; font-weight: 600; cursor: pointer; }
.zapis summary:hover { color: var(--amber); }
.zapis[open] summary { border-bottom: 1px solid var(--rule); }
.zapis p { padding: 0 1rem; }
.zapis p:first-of-type { margin-top: 1rem; }