/* Biegi Kujawy i Pomorze — zywica.tech/biegi
   Jeden wyróżnik: data jako numer startowy (bib z dziurkami na agrafki). Reszta spokojna. */
:root{
  --asfalt:#1E2832; --asfalt-2:#3C4B57; --tlo:#E8ECEF; --papier:#FFFFFF;
  --mata:#F4C531; --las:#157A57; --dzieci:#D33F49; --linia:#C7CFD5; --szary:#5A6873;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif; --tekst:"Atkinson Hyperlegible",system-ui,sans-serif;
  --r:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--asfalt);font:17px/1.55 var(--tekst)}
a{color:var(--las);text-underline-offset:3px}
a:hover{color:var(--asfalt)}
:focus-visible{outline:3px solid var(--asfalt);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;margin:0 0 .4em;letter-spacing:.005em}
h1{font-size:clamp(40px,7vw,72px)} h2{font-size:clamp(26px,3.4vw,34px)} h3{font-size:24px}
p{margin:0 0 .8em;max-width:68ch}
.w{max-width:1160px;margin:0 auto;padding:0 20px}
.waska{max-width:760px}
main>.w:first-child{padding-top:34px}
main>.w.uklad,main>.w.intro{padding-top:0}
.intro{padding-top:38px!important}
.wyc{color:var(--szary);font-size:15px;font-weight:400}
.pomin{position:absolute;left:-999px}.pomin:focus{left:12px;top:12px;background:var(--papier);padding:8px 12px;z-index:10}

/* nagłówek */
.gora{background:var(--asfalt);color:var(--papier)}
.gora .w{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:var(--papier);text-decoration:none;font:800 18px/1 var(--display)}
.logo-bib{display:grid;place-items:center;width:36px;height:30px;background:var(--papier);color:var(--asfalt);border-radius:3px;border-top:6px solid var(--mata);font:900 18px var(--display)}
.gora nav{display:flex;gap:4px;flex-wrap:wrap}
.gora nav a{color:#D5DDE3;text-decoration:none;padding:8px 12px;border-radius:var(--r);font-weight:700}
.gora nav a:hover{background:var(--asfalt-2);color:var(--papier)}
.gora nav a[aria-current]{color:var(--asfalt);background:var(--mata)}

/* numer startowy */
.bib{position:relative;flex:none;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;
  width:74px;height:70px;background:var(--papier);border:1px solid var(--linia);border-radius:4px;
  border-top:10px solid var(--mata);padding:2px 0 4px;color:var(--asfalt);
  background-image:radial-gradient(circle at 7px 7px,var(--tlo) 2.6px,transparent 3.2px),radial-gradient(circle at calc(100% - 7px) 7px,var(--tlo) 2.6px,transparent 3.2px),
    radial-gradient(circle at 7px calc(100% - 7px),var(--tlo) 2.6px,transparent 3.2px),radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),var(--tlo) 2.6px,transparent 3.2px)}
.bib-mies{font:700 12px/1 var(--tekst);letter-spacing:.04em;margin-top:2px}
.bib-dzien{font:900 36px/1 var(--display);align-self:center}
.bib-do{font-size:18px;font-weight:800}
.bib-dt{font:400 12px/1 var(--tekst);color:var(--szary)}
.bib.lks{border-top-color:var(--las)}
.bib.duzy{width:156px;height:150px;border-top-width:22px;border-radius:6px;padding:4px 0 10px;transform:rotate(-2.5deg);box-shadow:0 2px 0 var(--linia)}
.bib.duzy .bib-mies{font-size:18px} .bib.duzy .bib-dzien{font-size:86px} .bib.duzy .bib-do{font-size:36px} .bib.duzy .bib-dt{font-size:16px}
.bib.duzy{background-image:radial-gradient(circle at 12px 12px,var(--tlo) 4.5px,transparent 5.3px),radial-gradient(circle at calc(100% - 12px) 12px,var(--tlo) 4.5px,transparent 5.3px),
    radial-gradient(circle at 12px calc(100% - 12px),var(--tlo) 4.5px,transparent 5.3px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),var(--tlo) 4.5px,transparent 5.3px)}

/* wstęp i najbliższy start */
.intro{padding-top:38px}
.intro p{font-size:18px}
.start{margin:18px 0 26px}
.start-w{display:flex;gap:34px;align-items:center;padding-top:22px;padding-bottom:22px;border-top:3px solid var(--asfalt);border-bottom:1px solid var(--linia)}
.start-kiedy{font-weight:700;color:var(--las);margin:0 0 4px}
.start h2{font-size:clamp(30px,4.5vw,46px)}
.start-dyst{font-weight:700}

/* przyciski i pola */
button,.przycisk{display:inline-flex;align-items:center;gap:6px;font:700 16px var(--tekst);padding:11px 18px;border-radius:var(--r);
  border:2px solid var(--asfalt);background:var(--asfalt);color:var(--papier);cursor:pointer;text-decoration:none;margin:0 6px 6px 0}
button:hover,.przycisk:hover{background:var(--asfalt-2);border-color:var(--asfalt-2);color:var(--papier)}
.przycisk.jasny,button.jasny{background:var(--papier);color:var(--asfalt)}
.przycisk.jasny:hover,button.jasny:hover{background:var(--tlo);color:var(--asfalt)}
button.link{background:none;border:0;color:var(--las);padding:0;margin:0;text-decoration:underline;font-weight:700;font-size:15px}
.pole{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pole>span{font-weight:700;font-size:15px}
.pole small{font-weight:400;color:var(--szary)}
input,select,textarea{font:16px var(--tekst);padding:10px 12px;border:2px solid var(--linia);border-radius:var(--r);background:var(--papier);color:var(--asfalt);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--asfalt);outline:none}

.szukaj{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;background:var(--papier);padding:16px;border-radius:var(--r);border:1px solid var(--linia)}
.szukaj .pole-q{flex:2.2;min-width:220px}
.szukaj .pole{min-width:150px}
.szukaj button{margin:0}
.skroty{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 28px}
.skrot{padding:8px 14px;border-radius:999px;border:2px solid var(--asfalt);color:var(--asfalt);text-decoration:none;font-weight:700;background:transparent}
.skrot:hover{background:var(--papier)}
.skrot.wl{background:var(--asfalt);color:var(--papier)}

/* układ dwóch kolumn */
.uklad{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start;padding-bottom:50px}
.kolumna-boczna{position:sticky;top:16px;display:flex;flex-direction:column;gap:22px}
.lista-gora{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.lista-akcje{display:flex;gap:16px;align-items:baseline}
.mies-tyt{margin:26px 0 8px;padding-bottom:6px;border-bottom:3px solid var(--asfalt);display:flex;gap:10px;align-items:baseline}
.mies-tyt .wyc{font-family:var(--tekst)}
.biegi{list-style:none;margin:0;padding:0}
.bieg{border-bottom:1px solid var(--linia)}
.bieg-link{display:flex;gap:16px;padding:14px 4px;color:inherit;text-decoration:none;align-items:flex-start}
.bieg-link:hover{background:rgba(255,255,255,.55)}
.bieg-link:hover .bieg-nazwa{text-decoration:underline;text-underline-offset:3px}
.bieg-tresc{display:flex;flex-direction:column;gap:2px;min-width:0}
.bieg-nazwa{font-weight:700;font-size:18px;line-height:1.3}
.bieg-gdzie{color:var(--asfalt-2)}
.bieg-dyst{font-weight:700;color:var(--las)}
.bieg-znaki{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:3px}
.znak{font-size:13px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--asfalt-2);color:var(--asfalt-2)}
.znak-dzieci{border-color:var(--dzieci);color:var(--dzieci);background:#FDECEE}
.znak-lks{border-color:var(--las);color:var(--papier);background:var(--las)}
.znak-minal{border-color:var(--szary);color:var(--szary)}
.odl{font-size:14px;color:var(--szary)}
.pusto{background:var(--papier);padding:20px;border-radius:var(--r);border:1px dashed var(--asfalt-2);margin-top:14px}

/* kalendarz miesięczny */
.kal{background:var(--papier);border-radius:var(--r);border:1px solid var(--linia);padding:14px}
.kal-gora{display:flex;justify-content:space-between;align-items:center}
.kal-gora h2{margin:0;font-size:26px}
.kal-gora a{font:800 26px/1 var(--display);text-decoration:none;color:var(--asfalt);padding:2px 10px;border-radius:var(--r)}
.kal-gora a:hover{background:var(--tlo)}
.kal table{width:100%;border-collapse:collapse;margin-top:8px;table-layout:fixed}
.kal th{font-size:12px;color:var(--szary);font-weight:700;padding:4px 0}
.kal td{text-align:center;padding:2px;height:40px}
.kal td span,.kal td a{display:flex;flex-direction:column;align-items:center;justify-content:center;height:38px;border-radius:4px;font-size:15px;color:var(--szary)}
.kal td.ma a{color:var(--asfalt);font-weight:700;background:#FDF3D0;text-decoration:none}
.kal td.ma a:hover{background:var(--mata)}
.kal td.wybr a{background:var(--asfalt);color:var(--papier)}
.kal td.dzis span,.kal td.dzis a{box-shadow:inset 0 0 0 2px var(--las)}
.kropki{font-size:10px;line-height:.6;letter-spacing:1px}

/* mapy */
.mapa{background:#D6DEE3;border-radius:var(--r);border:1px solid var(--linia)}
.mapa-mala{height:260px}
.mapa-duza{height:min(72vh,640px);margin-top:14px}
.mapa-bieg{height:300px}
.mini-mapa h2{font-size:26px}
.pin{display:grid;place-items:center;width:32px;height:30px;background:var(--papier);border:1px solid var(--asfalt);border-top:6px solid var(--mata);border-radius:3px;font:900 16px/1 var(--display);color:var(--asfalt);box-shadow:0 1px 2px rgba(30,40,50,.35)}
.pin.lks{border-top-color:var(--las)}
.pin.dzieci{outline:2px dashed var(--dzieci);outline-offset:1px}
.leaflet-popup-content{font:15px/1.4 var(--tekst);margin:12px 14px}
.leaflet-popup-content b{font-size:16px}
.mapa-filtry{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.mapa-filtry .pole{max-width:260px}
.chipy{border:0;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chipy legend{font-weight:700;font-size:15px;padding:0;margin-bottom:4px;float:left;width:100%}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:7px 12px;border-radius:999px;border:2px solid var(--asfalt);font-weight:700;cursor:pointer;background:var(--papier)}
.chip input:checked+span{background:var(--asfalt);color:var(--papier)}
.chip input:focus-visible+span{outline:3px solid var(--las);outline-offset:2px}

/* strona biegu */
.karta-biegu{padding-top:22px;padding-bottom:50px}
.okruchy{font-size:15px;color:var(--szary)}
.kb-gora{display:flex;gap:34px;align-items:center;margin:14px 0 26px}
.kb-gora h1{font-size:clamp(34px,5vw,58px)}
.kb-znaki{display:flex;gap:6px;flex-wrap:wrap}
.kb-opis{font-size:18px}
.kb-uklad{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:start}
.fakty{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:0 0 20px;background:var(--papier);padding:18px 20px;border-radius:var(--r);border:1px solid var(--linia)}
.fakty dt{font-weight:700;color:var(--szary)} .fakty dd{margin:0;font-weight:700}
.uwaga{font-size:15px;color:var(--asfalt-2);border-left:4px solid var(--mata);padding-left:12px}
.obok{margin-top:34px}

/* statystyki */
.kafle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0 30px}
.kafel{background:var(--papier);border:1px solid var(--linia);border-radius:var(--r);padding:16px;margin:0}
.kafel b{display:block;font:900 54px/1 var(--display);margin-bottom:4px}
.wykresy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px;padding-bottom:50px}
.slupki{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.slupki li{display:grid;grid-template-columns:150px minmax(0,1fr) 36px;gap:10px;align-items:center}
.s-et{font-size:15px;text-align:right;color:var(--asfalt-2)}
.s-tor{height:18px;display:block}
.s-pas{display:block;height:100%;background:var(--las);border-radius:0 4px 4px 0}
.slupki li:hover .s-pas{background:var(--asfalt)}
.s-war{font-weight:700;font-variant-numeric:tabular-nums}

/* formularze */
.formularz fieldset{border:0;border-top:3px solid var(--asfalt);padding:14px 0 6px;margin:0 0 18px;display:flex;flex-direction:column;gap:14px}
.formularz legend{font:800 26px var(--display);padding:0 8px 0 0}
.rzad{display:flex;gap:14px;flex-wrap:wrap}
.rzad .pole{min-width:170px}
.zaznacz{display:flex;gap:10px;align-items:flex-start;font-weight:700}
.zaznacz input{width:22px;height:22px;flex:none;margin-top:2px}
.nie-wypelniaj{position:absolute;left:-5000px}
.blad{background:#FDECEE;border-left:4px solid var(--dzieci);padding:10px 14px;font-weight:700}
.ok{background:#E3F2EA;border-left:4px solid var(--las);padding:10px 14px;font-weight:700}
.admin-lista li{margin-bottom:8px}
.tabela{overflow-x:auto} .tabela table{border-collapse:collapse;width:100%;background:var(--papier)} .tabela td,.tabela th{padding:7px 10px;border-bottom:1px solid var(--linia);text-align:left;font-size:15px}

.dol{background:var(--asfalt);color:#C9D3DA;padding:28px 0;font-size:15px}
.dol a{color:var(--mata)}
.dol .wyc{color:#93A3AF}

@media (max-width:900px){
  .uklad{grid-template-columns:minmax(0,1fr)}
  .kolumna-boczna{position:static}
  .mini-mapa{display:none}
  .kb-uklad,.wykresy{grid-template-columns:minmax(0,1fr)}
  .kafle{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  body{font-size:16px}
  .start-w,.kb-gora{gap:18px}
  .bib.duzy{width:108px;height:106px;border-top-width:16px}
  .bib.duzy .bib-dzien{font-size:58px} .bib.duzy .bib-mies{font-size:14px} .bib.duzy .bib-dt{font-size:13px}
  .bib{width:62px;height:62px} .bib-dzien{font-size:30px}
  .bieg-link{gap:12px}
  .slupki li{grid-template-columns:96px minmax(0,1fr) 30px}
  .gora nav a{padding:6px 9px}
  .fakty{grid-template-columns:1fr;gap:2px} .fakty dd{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media (forced-colors:active){.bib,.pin{border:2px solid CanvasText}}