/* Most — poradnik dla rodziców. Paleta: projekt UX §7 (jedno znaczenie na kolor). */
:root{
  --morski:#1f6f6b;      /* akcja, link */
  --morski-jasny:#e2f0ee;/* tła, aktywna zakładka */
  --tlo:#f6f3ec;         /* ciepłe tło */
  --piasek:#f4e3cf;      /* wsparcie emocjonalne */
  --bursztyn:#8a4b00;    /* wyłącznie terminy i ostrzeżenia */
  --zielony:#2d6a3e;     /* zrobione / sprawdzone */
  --tekst:#22302e;
  --drobny:#55625f;
  --karta:#fffdf8;
  --linia:#d9d3c5;

  /* 4 stopnie + display (design 1b) */
  --t-etykieta:.875rem;
  --t-drobne:1rem;
  --t-tresc:1.125rem;    /* 18 px — UX §5 */
  --t-tytul:1.375rem;
  --t-display:1.75rem;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --r:12px;
  --nav-h:64px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-bottom:calc(var(--nav-h) + 16px);scroll-padding-top:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--t-tresc);line-height:1.6;color:var(--tekst);background:var(--tlo);padding-bottom:calc(var(--nav-h) + 8px)}
@media (min-width:900px){body{padding-bottom:0}html{scroll-padding-bottom:16px}}
a{color:var(--morski);text-underline-offset:.15em;padding-block:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--morski);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%}
strong,b{font-weight:700}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-60px;background:var(--morski);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:50;font-weight:700}
.skip-link:focus{top:8px}

/* Nagłówek */
.top{background:var(--karta);border-bottom:1px solid var(--linia)}
.top-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:var(--s2);padding:.5rem 16px;min-height:60px}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--t-tytul);color:var(--tekst);text-decoration:none}
.brand svg{width:36px;height:36px;flex:none}
.top-search{margin-left:auto;display:flex;align-items:center;gap:.4rem;min-height:48px;padding:0 .9rem;border:1px solid var(--linia);border-radius:999px;color:var(--morski);text-decoration:none;font-size:var(--t-drobne);background:var(--tlo)}
.test-banner{background:var(--piasek);text-align:center;font-size:var(--t-etykieta);padding:.35rem 16px}

/* Nawigacja: dół na telefonie, góra na komputerze */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--karta);border-top:1px solid var(--linia)}
.nav ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);max-width:1100px;margin:0 auto}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--nav-h);text-decoration:none;color:var(--drobny);font-size:var(--t-etykieta);line-height:1.2;text-align:center;padding:4px 2px}
.nav a .ic{font-size:1.3rem;line-height:1}
.nav a[aria-current="page"]{color:var(--morski);background:var(--morski-jasny);font-weight:700}
@media (min-width:900px){
  .nav{position:static;border-top:0;border-bottom:1px solid var(--linia)}
  .nav a{flex-direction:row;gap:.4rem;min-height:52px;font-size:var(--t-drobne)}
}

main{max-width:1100px;margin:0 auto;padding:var(--s3) 16px var(--s4)}
.narrow{max-width:760px}
h1{font-size:var(--t-display);line-height:1.25;margin-bottom:var(--s1)}
h2{font-size:var(--t-tytul);line-height:1.3;margin:var(--s3) 0 var(--s1)}
h3{font-size:var(--t-tresc);margin:var(--s2) 0 .25rem}
p,ul,ol,table,dl,details{margin-bottom:var(--s2)}
ul,ol{padding-left:1.4rem}
li{margin-bottom:.3rem}
.etykieta{font-size:var(--t-etykieta);text-transform:uppercase;letter-spacing:.06em;color:var(--drobny);font-weight:700;margin-bottom:.25rem}
.drobne{font-size:var(--t-drobne);color:var(--drobny)}
.lead{max-width:70ch}

/* Przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.6rem 1.1rem;border-radius:10px;border:2px solid var(--morski);background:var(--morski);color:#fff;font:inherit;font-size:var(--t-drobne);font-weight:700;text-decoration:none;cursor:pointer}
.btn.alt{background:var(--karta);color:var(--morski)}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--s2)}
.big{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:72px;padding:.8rem 1rem;margin-bottom:.6rem;border:2px solid var(--morski);border-radius:var(--r);background:var(--karta);color:var(--tekst);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.big .ic{font-size:1.6rem}
.big .opis{display:block;font-size:var(--t-drobne);color:var(--drobny)}
.big .arr{margin-left:auto;color:var(--morski);font-size:1.5rem}
.big:hover{background:var(--morski-jasny)}
.wiek{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem;margin-bottom:var(--s2)}
.wiek .big{min-height:56px;margin:0;justify-content:center;font-weight:700}

/* Ramki */
.box{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);padding:var(--s2);margin-bottom:var(--s2)}
.box > :last-child{margin-bottom:0}
.wsparcie{background:var(--piasek);border-color:#e6cfb3}
.zaufanie{border-left:4px solid var(--zielony)}
.powrot{background:var(--morski-jasny);border-color:#bcd9d5}
.uklad{display:grid;gap:var(--s3)}
@media (min-width:900px){.uklad{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}}

/* Terminy i statusy — zawsze ikona + słowo */
.warn{color:var(--bursztyn);font-weight:700}
.ok{color:var(--zielony);font-weight:700}
.dw{display:inline-block;font-size:var(--t-etykieta);font-weight:700;color:var(--bursztyn);border:1px solid var(--bursztyn);border-radius:6px;padding:0 .35rem;line-height:1.5;white-space:nowrap}
.nowe{display:inline-block;font-size:var(--t-etykieta);font-weight:700;color:var(--zielony);border:1px solid var(--zielony);border-radius:6px;padding:0 .35rem;margin-left:.3rem}

/* Kroki etapu */
.kroki{list-style:none;padding:0;counter-reset:k}
.krok{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);padding:.8rem 1rem;margin-bottom:.7rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;align-items:start}
.krok:has(input:checked){border-color:var(--zielony);background:#eef5ef}
.krok input{width:28px;height:28px;margin-top:.15rem;accent-color:var(--zielony);cursor:pointer}
.krok label{cursor:pointer}
.krok .meta{grid-column:2;font-size:var(--t-drobne);display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center}
.krok .meta a{display:inline-flex;align-items:center;min-height:44px}
.krok .cal{font:inherit;font-size:var(--t-drobne);min-height:44px;background:none;border:0;color:var(--morski);text-decoration:underline;cursor:pointer;padding:0}
.postep{font-weight:700;color:var(--zielony)}
.etap-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-bottom:var(--s2)}

/* Karty */
.lista-kart{list-style:none;padding:0;display:grid;gap:.6rem}
@media (min-width:700px){.lista-kart{grid-template-columns:1fr 1fr}}
.lista-kart a{display:block;min-height:48px;background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);padding:.7rem 1rem;text-decoration:none;color:var(--tekst);height:100%}
.lista-kart a:hover{border-color:var(--morski)}
.lista-kart .nr{color:var(--morski);font-weight:700}
.lista-kart .opis{display:block;font-size:var(--t-drobne);color:var(--drobny)}
.fakty{display:grid;gap:.6rem;margin-bottom:var(--s2)}
@media (min-width:700px){.fakty{grid-template-columns:repeat(3,1fr)}}
.fakt{background:var(--morski-jasny);border-radius:var(--r);padding:.7rem 1rem}
.fakt dt{font-size:var(--t-etykieta);text-transform:uppercase;letter-spacing:.06em;color:var(--drobny);font-weight:700}
.fakt dd{font-size:var(--t-drobne)}
.fakt.termin{background:#fbefe1}
details.sek{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);margin-bottom:.7rem}
details.sek > summary{cursor:pointer;min-height:52px;display:flex;align-items:center;padding:.5rem 1rem;font-weight:700;font-size:var(--t-tytul);list-style:none}
details.sek > summary::-webkit-details-marker{display:none}
details.sek > summary::after{content:"+";margin-left:auto;color:var(--morski);font-size:1.4rem}
details.sek[open] > summary::after{content:"–"}
details.sek > .in{padding:0 1rem 1rem}
details.sek h2{font-size:var(--t-tresc);margin:0}
.dok{list-style:none;padding:0}
.dok li{display:flex;gap:.6rem;align-items:flex-start}
.dok input{width:24px;height:24px;margin-top:.2rem;flex:none;accent-color:var(--zielony)}
.stopka-karty{border-top:2px solid var(--linia);padding-top:var(--s2);margin-top:var(--s3);font-size:var(--t-drobne)}
.tabela{overflow-x:auto;margin-bottom:var(--s2)}
.tabela:focus-visible{outline-offset:0}
table{border-collapse:collapse;width:100%;font-size:var(--t-drobne);background:var(--karta)}
th,td{border:1px solid var(--linia);padding:.45rem .6rem;text-align:left;vertical-align:top}
th{background:var(--morski-jasny)}
.szukaj{display:flex;flex-direction:column;gap:.3rem;margin-bottom:var(--s2)}
.szukaj input{font:inherit;min-height:48px;padding:.5rem .8rem;border:2px solid var(--drobny);border-radius:10px;background:#fff;width:100%;max-width:520px}
select,input[type=month]{font:inherit;min-height:48px;padding:.4rem .6rem;border:2px solid var(--drobny);border-radius:10px;background:#fff;color:var(--tekst)}

/* Arkusze (dialog) */
dialog{border:0;border-radius:var(--r);padding:var(--s3);max-width:min(560px,calc(100vw - 32px));width:100%;background:var(--karta);color:var(--tekst);margin:auto}
dialog::backdrop{background:rgba(20,30,28,.55)}
dialog h2{margin-top:0}
.link-osob{width:100%;font:inherit;font-size:var(--t-drobne);padding:.5rem;border:1px solid var(--linia);border-radius:8px;background:#fff;color:var(--tekst);min-height:48px}
.qr{display:flex;justify-content:center;margin:var(--s2) 0}
.qr img{width:200px;height:200px;image-rendering:pixelated}
.info-tryb{background:#fbefe1;border:1px solid var(--bursztyn);border-radius:var(--r);padding:.6rem 1rem;margin-bottom:var(--s2)}

/* Stopka */
.foot{background:var(--karta);border-top:1px solid var(--linia);margin-top:var(--s4)}
.foot-in{max-width:1100px;margin:0 auto;padding:var(--s3) 16px;display:grid;gap:var(--s2)}
@media (min-width:900px){.foot-in{grid-template-columns:1.2fr 1fr}}
.foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.foot a{display:inline-flex;align-items:center;min-height:44px}
.foot .linkbtn{font:inherit;background:none;border:0;color:var(--morski);text-decoration:underline;cursor:pointer;min-height:44px}
.tel{font-size:var(--t-tytul);font-weight:700;white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{
  .nav,.top-search,.foot,.btn-row,.skip-link,.test-banner,.krok .cal{display:none!important}
  body{background:#fff;padding:0}
  details.sek{border:0}
  details.sek > summary::after{content:""}
  a{color:#000}
}
.etykieta a{display:inline-block;padding-block:.3em}
.krok .krok-opis{grid-column:2;font-size:var(--t-drobne);color:var(--drobny);margin:0}
.zgoda{position:fixed;left:8px;right:8px;bottom:calc(var(--nav-h) + 8px);z-index:30;max-width:640px;margin:0 auto;background:var(--karta);border:2px solid var(--morski);border-radius:var(--r);padding:var(--s2);box-shadow:0 4px 20px rgba(0,0,0,.18)}
.zgoda p{font-size:var(--t-drobne);margin:.4rem 0 .8rem}
@media (min-width:900px){.zgoda{bottom:16px}}