/* ============================================================
   SPORTY — zakładki dyscyplin, pasek sekcji, odcień tła (01.11.2026)
   Kolory dyscyplin: tokeny --sp-* w typowi/tokeny.css (wspólne dla obu skórek).
   Logika (która zakładka działa, która „wkrótce”): lib_sporty.php.
   Każdy element dostaje swój kolor przez --sp, a wszystko inne liczy się
   z tokenów skórki — dlatego działa i na granacie, i na kremowej TYPOWEJ.
   ============================================================ */

.sp-pilka,body[data-sport="pilka"]{--sp:var(--sp-pilka)}
.sp-hokej,body[data-sport="hokej"]{--sp:var(--sp-hokej)}
.sp-kosz,body[data-sport="kosz"]{--sp:var(--sp-kosz)}
.sp-siatka,body[data-sport="siatka"]{--sp:var(--sp-siatka)}
.sp-reczna,body[data-sport="reczna"]{--sp:var(--sp-reczna)}
.sp-tenis,body[data-sport="tenis"]{--sp:var(--sp-tenis)}

/* --- tło stron sportu: ledwie wyczuwalny odcień jego koloru --- */
body[data-sport]{background:color-mix(in srgb,var(--sp) 6%,var(--bg))}

/* --- zakładki sportów (pasek górny) --- */
.sp-zakl{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sp-zakl::-webkit-scrollbar{display:none}
.sp-z{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap;
  padding:7px 12px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--sp) 11%,var(--panel));
  border:1px solid color-mix(in srgb,var(--sp) 28%,var(--line));
  color:var(--tx);font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;
  line-height:1.2;text-decoration:none;transition:background .15s,border-color .15s}
a.sp-z:hover{background:color-mix(in srgb,var(--sp) 20%,var(--panel));border-color:color-mix(in srgb,var(--sp) 55%,var(--line));color:var(--tx)}
.sp-z.on{background:color-mix(in srgb,var(--sp) 24%,var(--panel));border-color:var(--sp);
  box-shadow:inset 0 -2px 0 var(--sp)}
.sp-ik{font-size:15px;line-height:1}
.sp-z.wkrotce{opacity:.55;cursor:default;border-style:dashed}
.sp-z small{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}

/* --- pasek sekcji bieżącego sportu (pod paskiem górnym) --- */
.sp-pod{background:color-mix(in srgb,var(--sp) 10%,var(--bg2));
  border-bottom:1px solid color-mix(in srgb,var(--sp) 34%,var(--line))}
.sp-pod-in{display:flex;align-items:stretch;gap:4px;overflow-x:auto;scrollbar-width:none;
  padding:0 clamp(14px,2.4vw,32px)}
.sp-pod-in::-webkit-scrollbar{display:none}
.sp-pod-tyt{display:flex;align-items:center;margin-right:10px;padding-right:14px;white-space:nowrap;
  font-size:12px;font-weight:800;color:var(--tx);border-right:1px solid color-mix(in srgb,var(--sp) 30%,var(--line))}
.sp-pod a{display:flex;align-items:center;white-space:nowrap;padding:11px 12px;
  font-size:13px;font-weight:600;color:var(--tx-soft);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.sp-pod a:hover{color:var(--tx)}
.sp-pod a.on{color:var(--tx);border-bottom-color:var(--sp);font-weight:800}

/* --- pasek aplikacji (.top): zakładki między znakiem a resztą menu --- */
.top .sp-zakl{margin-left:clamp(6px,1.4vw,22px)}
.top nav{margin-left:auto}

/* --- strona główna (.topbar) — ramka ma 1240 px, więc „wkrótce” od razu samą ikoną --- */
.topbar .sp-zakl{margin-left:4px}
.topbar .sp-z.wkrotce .sp-nz,.topbar .sp-z.wkrotce small{display:none}
.topbar .nav{margin-left:auto}

/* ciaśniej: dyscypliny „wkrótce” zostają samą ikoną */
@media(max-width:1320px){
  .sp-z{padding:7px 10px;font-size:12px}
  .sp-z.wkrotce .sp-nz,.sp-z.wkrotce small{display:none}
}
@media(max-width:1060px){
  .sp-z:not(.on) .sp-nz{display:none}
}
/* telefon: zakładki sportów we własnym wierszu, przewijane w bok, zawsze widoczne */
@media(max-width:860px){
  .top .sp-zakl{order:2;flex-basis:100%;margin-left:0;padding-bottom:2px}
  .sp-z:not(.wkrotce) .sp-nz{display:inline}
  .sp-pod-tyt{display:none}
  .sp-pod a{padding:10px 10px;font-size:12.5px}
}
@media(max-width:780px){
  .topbar__inner{flex-wrap:wrap;row-gap:8px;padding-bottom:8px}
  .topbar .sp-zakl{order:5;flex-basis:100%;margin-left:0}
  .topbar .sp-z:not(.wkrotce) .sp-nz{display:inline}
  .topbar{position:sticky}
  .topbar .nav{position:absolute;inset:100% 0 auto 0}
}