/* Lista pytan Magic Camping. Mobile-first, bez zaleznosci zewnetrznych.
   Kolory z systemu strony: granat = struktura, zielen = potwierdzenie, bursztyn = do zrobienia. */

:root {
  --brand:#282E79;
  --brand-deep:#1D2257;
  --nature:#2F6B4F;
  --nature-soft:#E4F0E9;
  --cta:#92500F;
  --cta-soft:#FBEEDF;
  --bg:#F7F4EC;
  --card:#FFFFFF;
  --text:#14271F;
  --muted:#5C6660;
  --border:#DFD9CB;
  --radius:8px;
  --pill:6px;
  color-scheme:light;
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust:100%;
}

.srodek { width:min(760px, 100% - 2rem); margin-inline:auto; }

/* ---------- Naglowek ---------- */
.naglowek {
  background:var(--brand);
  color:#fff;
  padding:2rem 0 1.75rem;
  padding-top:calc(2rem + env(safe-area-inset-top, 0px));
}
.marka {
  margin:0 0 .4rem;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#B9BEEA;
}
.naglowek h1 { margin:0 0 .8rem; font-size:1.65rem; line-height:1.2; }
.naglowek .lead { margin:0 0 .6rem; color:#DCDEF4; font-size:.98rem; }
.naglowek a { color:#fff; text-underline-offset:3px; }

/* ---------- Pasek postepu (sticky) ---------- */
.postep-pasek {
  position:sticky; top:0; z-index:10;
  background:rgba(247,244,236,.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:.6rem 0;
}
.postep-tresc { display:flex; align-items:center; gap:.8rem; }
.postep-tor {
  flex:1 1 auto; height:6px; border-radius:999px;
  background:#E6E1D5; overflow:hidden;
}
.postep-wypelnienie {
  display:block; height:100%; width:0;
  background:var(--nature);
  transition:width .35s ease;
}
.postep-opis { margin:0; font-size:.82rem; font-weight:600; color:var(--muted); white-space:nowrap; }

/* ---------- Sekcje ---------- */
main { padding:1.5rem 0 3rem; }
.sekcja { margin:0 0 2.5rem; }
.sekcja h2 {
  margin:0 0 .3rem; font-size:1.3rem; line-height:1.25;
  display:flex; align-items:center; gap:.55rem;
}
.sekcja h2::before {
  content:""; width:10px; height:10px; border-radius:50%; flex:none;
  background:var(--muted);
}
.sekcja--pilne h2::before { background:var(--cta); }
.sekcja--wazne h2::before { background:var(--brand); }
.sekcja--zwykle h2::before { background:var(--nature); }
.sekcja--koniec h2::before { display:none; }
.sekcja__lead { margin:0 0 1.2rem; color:var(--muted); font-size:.95rem; }

/* ---------- Karta pytania ---------- */
.karta {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem 1rem .8rem;
  margin-bottom:.9rem;
  transition:border-color .25s ease;
}
.karta--gotowa { border-color:#C9D8CE; }
.karta__tytul { margin:0 0 .4rem; font-size:1.05rem; line-height:1.3; }
.karta__opis { margin:0 0 1rem; color:var(--muted); font-size:.94rem; }

/* Wybor: dwa duze przyciski, palec trafia bez celowania */
.wybor { display:flex; gap:.5rem; margin-bottom:.9rem; }
.wybor__btn {
  flex:1 1 0; min-height:48px;
  padding:.7rem .5rem;
  border:1.5px solid var(--border);
  border-radius:var(--pill);
  background:#fff; color:var(--text);
  font:inherit; font-size:.92rem; font-weight:600;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.wybor__btn:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.wybor__btn--tak.jest-wybrany {
  background:var(--nature); border-color:var(--nature); color:#fff;
}
.wybor__btn--nie.jest-wybrany {
  background:var(--cta-soft); border-color:var(--cta); color:var(--cta);
}

/* Komentarz. font-size 16px, inaczej iOS przybliza strone przy kliknieciu. */
.komentarz { display:block; }
.komentarz__etykieta {
  display:block; margin-bottom:.35rem;
  font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.komentarz textarea {
  width:100%; max-width:100%;
  padding:.7rem .75rem;
  border:1.5px solid var(--border);
  border-radius:var(--pill);
  background:#FDFCF9; color:var(--text);
  font:inherit; font-size:16px; line-height:1.5;
  resize:vertical;
  overflow:hidden;
}
.komentarz textarea:focus-visible { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }

/* Miejsce na komunikat jest zarezerwowane na stale, zeby "Zapisano" nie przesuwalo karty. */
.status {
  margin:.35rem 0 0; min-height:1rem;
  font-size:.8rem; font-weight:600; color:var(--nature);
  opacity:0; transition:opacity .25s ease;
}
.status.widoczny { opacity:1; }
.status.blad { color:#A3271F; }

/* ---------- Stopka ---------- */
.stopka {
  border-top:1px solid var(--border);
  padding:1.5rem 0;
  padding-bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px));
  color:var(--muted); font-size:.85rem;
}
.stopka p { margin:0; }

/* ---------- Podglad dla nas ---------- */
.podglad main { padding-top:2rem; }
.podglad h1 { margin:0 0 .3rem; font-size:1.5rem; }
.podglad .lead { margin:0 0 2rem; color:var(--muted); }
.podglad h2 { margin:2rem 0 .8rem; font-size:1.1rem; }
.karta--ok   { border-left:4px solid var(--nature); }
.karta--todo { border-left:4px solid var(--cta); }
.karta--pusta { opacity:.65; }
.odp-status { margin:0 0 .5rem; font-weight:700; }
.odp-status--ok { color:var(--nature); }
.odp-status--todo { color:var(--cta); }
.odp-status--pusta { color:var(--muted); font-weight:400; font-style:italic; }
.odp-kod { font-weight:400; font-size:.8rem; color:var(--muted); }
.odp-komentarz {
  margin:.6rem 0 0; padding:.7rem .9rem;
  background:var(--bg); border-radius:var(--pill);
  font-size:.95rem;
}
.odp-czas { margin:.6rem 0 0; font-size:.75rem; color:var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* Ekran PIN (2026-08-15): jedna karta na srodku, duze pole, klawiatura numeryczna na telefonie. */
.pin-strona { min-height:100dvh; display:grid; place-items:center; padding:1.5rem; }
.pin-karta { width:100%; max-width:24rem; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.6rem 1.4rem 1.8rem; text-align:center; }
.pin-karta .marka { color:var(--brand); }
.pin-karta h1 { margin:0 0 .5rem; font-size:1.4rem; line-height:1.25; }
.pin-karta .lead { margin:0 0 1.2rem; color:var(--muted); }
.pin-form { display:grid; gap:.7rem; }
.pin-etykieta { font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pin-pole { width:100%; font:inherit; font-size:1.8rem; letter-spacing:.4em; text-align:center; padding:.6rem .4rem;
  border:1px solid var(--border); border-radius:var(--radius); background:#FBFAF6; color:var(--text); }
.pin-pole:focus { outline:2px solid var(--brand); outline-offset:2px; border-color:var(--brand); }
.pin-blad { margin:0; color:#8A2C2C; font-weight:600; }
.pin-przycisk { font:inherit; font-weight:700; font-size:1.05rem; padding:.85rem 1rem; border:0; border-radius:var(--pill);
  background:var(--brand); color:#fff; cursor:pointer; min-height:48px; }
.pin-przycisk:hover, .pin-przycisk:focus-visible { background:var(--brand-deep); }

/* Podglad: karta z sama odpowiedzia tekstowa (bez przyciskow). */
.podglad .karta--tekst { border-color:#C9D8CE; }