/* ==========================================================================
   Projekt 29 — styl "tajne akta": teczka agentki w odcieniach baby blue / baby pink.
   Zasady: mobile-first (iPhone), minimalizm, kontrast WCAG AA (tekst >= 4,5:1,
   elementy interfejsu >= 3:1), cele dotykowe >= 44 px, widoczny fokus.
   Odstępy: skala 4 / 8 / 12 / 16 / 24 / 32 px (zmienne --s1 ... --s6).
   ========================================================================== */

:root{
  /* kolory */
  --blue:#bfe3fb;            /* baby blue */
  --pink:#ffc2d9;            /* baby pink — stan "wciśnięty" */
  --pink-strong:#f28fb3;     /* tylko dekoracja (kropki, linie, znaczniki) */
  --blue-line:#7fbde8;       /* dekoracyjne linie w kolorze bazowym (celownik, etykiety) */
  --ink:#1b2b3d;             /* granat — tekst główny, kontury (≈14:1 na bieli) */
  --text:#2a3f55;            /* tekst treści (≈10:1) */
  --muted:#4d6377;           /* tekst pomocniczy (≈6:1) */
  --rose:#a53a62;            /* róż do tekstu i pieczątek (≈6,2:1) */
  --blue-deep:#2b6591;       /* niebieski do tekstu i fokusu (≈6:1) */
  --border:#7890a5;          /* obramowania pól (≥3:1) */
  --hairline:rgba(43,101,145,.2); /* dekoracyjne linie */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; /* jedna czcionka w całym UI */

  /* skala odstępów (siatka 4 px) */
  --s1:.25rem;   /*  4 */
  --s2:.5rem;    /*  8 */
  --s3:.75rem;   /* 12 */
  --s4:1rem;     /* 16 */
  --s5:1.5rem;   /* 24 */
  --s6:2rem;     /* 32 */

  /* kształt */
  --radius:.875rem;
  --control:3.25rem;         /* 52 px — wysokość przycisków i pól */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; min-height:100vh; min-height:100dvh;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
          max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  color:var(--text);
  font-family:var(--font);
  font-size:1rem; line-height:1.5;
  background:#f4f8fd;
  display:flex; justify-content:center;
}
/* Tło jako stała warstwa — "background-attachment: fixed" jest zawodne w Safari na iOS */
body::before{
  content:""; position:fixed; top:0; right:0; bottom:0; left:0; z-index:-1;
  background:#f4f8fd url("../img/wroclaw-map.svg") center/cover no-repeat;
}
::selection{background:var(--pink)}
.wrap{width:100%; max-width:40rem; display:flex}

/* tylko dla czytników ekranu */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* widoczny fokus (WCAG 2.4.7) */
:focus-visible{outline:3px solid var(--blue-deep); outline-offset:3px}
h1:focus{outline:none}

/* ---------- karta-teczka ----------
   Układ pionowy: pasek → etykieta → tytuł → [strefa ilustracji, rozciągliwa] → treść → akcje.
   Wolne miejsce na wysokich ekranach pochłania strefa ilustracji (grafika zostaje na środku,
   odstępy nad i pod nią są równe), więc pola i przycisk zawsze są tuż nad dolną krawędzią. */
.card{
  position:relative; width:100%; display:flex; flex-direction:column;
  min-height:calc(100vh - 24px); min-height:calc(100dvh - 24px);
  padding:var(--s4) var(--s5) var(--s5); border-radius:1.25rem;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 40px rgba(43,101,145,.14);
  animation:enter .3s ease both;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card{-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
}
/* przerywana "perforacja" dookoła kartki */
.card::before{
  content:""; position:absolute; top:var(--s2); right:var(--s2); bottom:var(--s2); left:var(--s2);
  border:1px dashed var(--hairline); border-radius:.875rem; pointer-events:none;
}
@keyframes enter{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* pasek u góry */
.card-top{display:flex; align-items:center; gap:var(--s3); min-height:2.75rem}
.back{
  width:2.75rem; height:2.75rem; flex:0 0 2.75rem; display:grid; place-items:center;
  border:1.5px solid var(--border); border-radius:50%; background:#fff; color:var(--ink);
  text-decoration:none; font-size:1.25rem; line-height:1; cursor:pointer; padding:0; -webkit-appearance:none; appearance:none;
}
.brand{font:700 .75rem var(--font); letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.dots{display:flex; gap:var(--s1); margin-left:auto}
.dots i{width:.5rem; height:.25rem; border-radius:.125rem; background:var(--hairline)}
.dots i.done{background:var(--blue)}
.dots i.current{background:var(--pink-strong); width:.875rem}

/* etykieta raportu: ─── RAPORT 01 ─── */
.label{
  display:flex; align-items:center; gap:var(--s3); margin:var(--s3) 0 var(--s2);
  font:700 .75rem var(--font); letter-spacing:.2em; text-transform:uppercase; color:var(--blue-deep);
}
.label span{flex:0 1 auto; text-align:center; line-height:1.5}
.label::before,.label::after{content:""; flex:1 1 var(--s3); min-width:var(--s3); height:1px; background:var(--blue-line)}
h1{margin:0}
.page h1{font-size:clamp(1.625rem,7.5vw,2rem); line-height:1.15; letter-spacing:-.03em; font-weight:700; text-align:center; color:var(--ink)}

/* strefa ilustracji: rozciąga się, grafika w środku (równe odstępy nad i pod) */
.illus-zone{flex:1 0 auto; display:flex; align-items:center; justify-content:center; padding:var(--s4) 0}
.illus{--ill:7.5rem; position:relative; width:100%; display:flex; justify-content:center; padding:var(--s2) 0}
.illus img{width:var(--ill); height:var(--ill); display:block}
/* Nowoczesne przeglądarki: grafika rośnie, gdy na ekranie jest wolne miejsce (7,5–14 rem) */
@supports (container-type:size){
  .illus-zone{flex:1 1 0; min-height:10.5rem; container-type:size}
  .illus{--ill:clamp(7.5rem, 100cqh - 3rem, 14rem)}
}
/* celownik wokół grafiki */
.illus::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:calc(var(--ill) + 2rem); margin-left:calc((var(--ill) + 2rem) / -2);
  background:
    linear-gradient(var(--blue-line),var(--blue-line)) top left/.875rem 2px no-repeat,
    linear-gradient(var(--blue-line),var(--blue-line)) top left/2px .875rem no-repeat,
    linear-gradient(var(--blue-line),var(--blue-line)) bottom left/.875rem 2px no-repeat,
    linear-gradient(var(--blue-line),var(--blue-line)) bottom left/2px .875rem no-repeat,
    linear-gradient(var(--blue-line),var(--blue-line)) bottom right/.875rem 2px no-repeat,
    linear-gradient(var(--blue-line),var(--blue-line)) bottom right/2px .875rem no-repeat;
}
/* pieczątka (dekoracja; tekst z atrybutu data-stamp) */
.illus::after{
  content:attr(data-stamp); content:attr(data-stamp) / "";
  /* pieczątka leży na rogu celownika (tym samym przy każdym rozmiarze grafiki) i nie zasłania go tłem */
  position:absolute; top:calc(var(--s1) * -1); left:calc(50% + (var(--ill) + 2rem) / 2 - 3.25rem); transform:rotate(8deg);
  padding:.125rem var(--s2); border:2px solid var(--blue-deep); border-radius:.25rem;
  font:700 .625rem var(--font); letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
  color:var(--blue-deep); pointer-events:none;
}


/* ---------- treść: jednakowy odstęp 16 px między blokami ---------- */
.content > *{margin:0}
.content > * + *{margin-top:var(--s4)}
.content p{font-size:1.0625rem; line-height:1.6}
.content .lead{font-size:1.3125rem; font-weight:700; text-align:center; color:var(--ink)}

.content > .cipher,.content > .banner{margin-top:var(--s5); margin-bottom:var(--s5)}
.cipher{display:flex; flex-wrap:nowrap; justify-content:center; gap:var(--s2)}
.cipher span{
  flex:1 1 0; min-width:0; max-width:2.625rem; padding:var(--s2) 0; text-align:center; border-radius:.375rem;
  font:700 clamp(1.125rem,5.5vw,1.4375rem)/1.2 var(--font);
  background:#fff; border:1.5px solid var(--ink); color:var(--ink);
  box-shadow:2px 2px 0 var(--blue)
}

.content p.question{padding-left:var(--s3); border-left:3px solid var(--pink-strong); font-weight:700; color:var(--ink)}
.content p.task{padding-left:var(--s3); border-left:3px solid var(--blue); font-weight:600; color:var(--ink)}
.quote{padding:var(--s1) 0 var(--s1) var(--s4); border-left:3px solid var(--blue); font-style:italic; font-size:1.0625rem; line-height:1.6}
.step-label{color:var(--blue-deep); text-transform:uppercase; letter-spacing:.1em; font-size:.8125rem}
.items{padding-left:var(--s5)}
.items li{font-size:1.0625rem; line-height:1.55; padding-left:var(--s1)}
.items li + li{margin-top:var(--s1)}
.items li::marker{color:var(--blue-deep)}

.log{width:100%; border-collapse:collapse; font-size:.9375rem}
.log th{font:700 .75rem var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; padding:var(--s2) var(--s1); border-bottom:1.5px solid var(--ink)}
.log td{text-align:center; padding:var(--s3) var(--s1); border-bottom:1px dashed var(--border); color:var(--muted)}
.log td:first-child{font-weight:700; color:var(--ink)}

.banner{padding:var(--s4) 0; text-align:center; font:700 .9375rem var(--font);
  letter-spacing:.2em; text-transform:uppercase; color:var(--rose);
  border-top:1px solid var(--pink-strong); border-bottom:1px solid var(--pink-strong)}
.signature{text-align:right}
.signature p{margin:0}
.signature p + p{margin-top:var(--s1)}
.signature p:first-child{font-style:italic}
.signature p:last-child{font-weight:700; color:var(--rose)}

details.hint summary{
  display:flex; align-items:center; min-height:2.75rem; cursor:pointer; list-style:none;
  font:700 .8125rem var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep)
}
details.hint summary::-webkit-details-marker{display:none}
details.hint summary:active{background:var(--pink)}
details.hint summary::before{content:"+"; content:"+" / ""; margin-right:var(--s2); font-size:1.125rem}
details.hint[open] summary::before{content:"–"; content:"–" / ""}
details.hint p{margin:var(--s1) 0 0; font-size:1rem; padding-left:var(--s3); border-left:3px solid var(--blue)}

/* ---------- akcje: pola i przyciski (zawsze na dole karty) ---------- */
.actions{margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s4)}
.answer,.fields{display:flex; flex-direction:column; gap:var(--s3)}
.fields{gap:var(--s4)}
.field{display:flex; flex-direction:column; gap:var(--s2)}
.field label,.field-label{font:700 .9375rem/1.4 var(--font); color:var(--ink)}
.answer > .field-label{margin-bottom:calc(var(--s1) * -1)}  /* etykieta bliżej pola: 8 px */

input{
  width:100%; min-height:var(--control); padding:var(--s3) var(--s4); border:1.5px solid var(--border);
  border-radius:var(--radius); font:inherit; font-size:1rem; /* 16 px — iOS nie przybliża */
  background:#fff; color:var(--ink); caret-color:var(--rose); -webkit-appearance:none; appearance:none
}
.answer input{letter-spacing:.06em}
input::placeholder{color:#5c6f82; opacity:1}
input:focus{border-color:var(--blue-deep); box-shadow:0 0 0 4px rgba(255,194,217,.7)}
input[aria-invalid="true"]{border-color:var(--rose); border-width:2px}
input[readonly]{background:rgba(255,255,255,.6); color:var(--muted)}

.btn{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; min-height:var(--control); padding:var(--s3) var(--s5); border:1.5px solid var(--ink); border-radius:var(--radius);
  background:var(--blue); color:var(--ink); font:inherit; font-size:.9375rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; text-align:center; cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background-color .15s, transform .1s;
}
/* przyciski: baby blue, po przytrzymaniu (dotyk, klik, Enter/Spacja) zmieniają się w baby pink */
.btn,.btn.primary{background:var(--blue)}
@media (hover:hover){ .btn:hover,.btn.primary:hover{background:#a9d6f5} .back:hover{background:var(--blue)} }
.btn:active,.btn.primary:active{background:var(--pink); transform:translateY(1px) scale(.99)}
.back:active{background:var(--pink)}

.msg{margin:0; font-size:.9375rem; font-weight:700; color:var(--rose)}
.msg:empty{display:none}
/* pochwała jako pieczątka */
.completed-note{margin:0; padding:.25rem 0; color:var(--muted); font-size:.8rem; font-weight:600; letter-spacing:.02em; text-align:center}
.success{
  margin:0; padding:var(--s3) var(--s4); text-align:center;
  border:2px solid var(--rose); border-radius:var(--radius); background:rgba(255,194,217,.35);
  font:700 .9375rem var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--rose);
  animation:stamp .35s ease both;
}
.success::before{content:"✓"; content:"✓" / ""; margin-right:var(--s2)}
@keyframes stamp{from{opacity:0; transform:scale(1.15)}to{opacity:1; transform:scale(1)}}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* krasnale (dekoracja, krótkie, bez migotania) */
.gnomes{position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:50}

/* ---------- ekran powitalny ---------- */
.welcome .card{align-items:center; justify-content:center; text-align:center; padding-top:var(--s5)}
.welcome .illus-zone{flex:0 0 auto; width:100%; min-height:0; padding:var(--s5) 0; container-type:normal}
.welcome .illus{--ill:8rem}
.welcome h1{font-size:clamp(2.125rem,10vw,2.75rem); line-height:1.05; letter-spacing:-.04em; margin:0 0 var(--s2); text-transform:uppercase; font-weight:700; color:var(--ink)}
.kicker{margin:0; font:700 .8125rem var(--font); letter-spacing:.3em; text-transform:uppercase; color:var(--blue-deep)}
.intro{font-size:1.0625rem; line-height:1.6; max-width:21rem; margin:0}
.qr{display:flex; justify-content:center; margin:var(--s5) 0}
.qr img,.qr canvas{background:#fff; padding:var(--s3); border-radius:.5rem; max-width:100%; height:auto; border:1.5px solid var(--ink)}
.welcome .btn{width:auto; min-width:14rem}

@media (min-width:700px){ body{padding:24px} .card{min-height:calc(100vh - 48px); min-height:calc(100dvh - 48px); padding:var(--s5) var(--s6) var(--s6)} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }
@media (forced-colors:active){ .btn,.back,input,.cipher span{border:2px solid ButtonText} }