/* ============================================================================
   Korki Szczecin — style modułu (na bazie tokens.css portalu).
   Kolory korków = WYŁĄCZNIE semantyka statusów (mapa + listy). Reszta neutralna.
   ========================================================================== */

/* ---- semantyczne kolory poziomów korka (spójne mapa/listy/legenda) ---- */
:root{
  --band-free:#16A34A; --band-light:#84CC16; --band-medium:#F59E0B;
  --band-heavy:#EF4444; --band-blocked:#7F1D1D; --band-unknown:#9CA3AF;
  --band-free-soft:#DCFCE7; --band-light-soft:#ECFCCB; --band-medium-soft:#FEF3C7;
  --band-heavy-soft:#FEE2E2; --band-blocked-soft:#F3D9D6; --band-unknown-soft:#EEF0F2;
  --kk-maxw:min(1320px,94vw);
}
[data-theme="dark"]{
  --band-free:#22C55E; --band-light:#A3E635; --band-medium:#FBBF24;
  --band-heavy:#F87171; --band-blocked:#B91C1C; --band-unknown:#6B7280;
  --band-free-soft:#0E2A1A; --band-light-soft:#26310F; --band-medium-soft:#3A2E0E;
  --band-heavy-soft:#3A1715; --band-blocked-soft:#2C1413; --band-unknown-soft:#23262B;
}

.kk-wrap{ max-width:var(--kk-maxw); margin:0 auto; padding:0 28px; }
.kk-ico{ width:1em; height:1em; vertical-align:-.125em; flex:none; }

/* ---- live badge ---- */
.live{ display:inline-flex; align-items:center; gap:8px; font:700 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--band-heavy); }
.live .pulse{ width:9px; height:9px; border-radius:50%; background:var(--band-heavy); position:relative; }
.live .pulse::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--band-heavy); opacity:.6; animation:kkpulse 1.8s ease-out infinite; }
@keyframes kkpulse{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(1.8); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .live .pulse::after{ animation:none; } }

/* ---- band badge / pill ---- */
.band{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:99px; font:700 11.5px/1 var(--sans); }
.band .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.band--free{ background:var(--band-free-soft); color:var(--band-free); }
.band--light{ background:var(--band-light-soft); color:#5e7a0e; }
[data-theme="dark"] .band--light{ color:var(--band-light); }
.band--medium{ background:var(--band-medium-soft); color:#9a6b00; }
[data-theme="dark"] .band--medium{ color:var(--band-medium); }
.band--heavy{ background:var(--band-heavy-soft); color:var(--band-heavy); }
.band--blocked{ background:var(--band-blocked-soft); color:var(--band-blocked); }
[data-theme="dark"] .band--blocked{ color:#fca5a5; }
.band--unknown{ background:var(--band-unknown-soft); color:var(--band-unknown); }

/* ---- HERO map (home) ---- */
.kk-hero{ position:relative; }
.kk-map{ width:100%; background:var(--surfaceAlt); }
.kk-map--hero{ height:clamp(420px, 62vh, 640px); }
.kk-map--corr{ height:clamp(360px, 52vh, 540px); }
.kk-map{ position:relative; }
/* Wyższa specyficzność niż .maplibregl-map z maplibre-gl.css (ładowany później) */
.kk-map .kk-mapcanvas{ position:absolute; inset:0; width:100%; height:100%; }

/* overlay podsumowania na mapie */
.kk-overlay{ position:absolute; z-index:6; top:18px; left:18px; max-width:380px;
  background:color-mix(in srgb,var(--surface) 92%, transparent); backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-lg); }
.kk-overlay h2{ font:600 19px/1.2 var(--serif); margin:10px 0 6px; }
.kk-overlay p{ font-size:13.5px; color:var(--inkSoft); margin:0; line-height:1.5; }
.kk-overlay .when{ font-size:11.5px; color:var(--inkDim); margin-top:12px; display:flex; align-items:center; gap:7px; }
.kk-overlay .when .kk-ico{ font-size:13px; }

/* legenda */
.kk-legend{ position:absolute; z-index:6; right:18px; bottom:18px; width:236px;
  background:color-mix(in srgb,var(--surface) 94%, transparent); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md); overflow:hidden; }
.kk-legend__h{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; cursor:pointer; user-select:none; }
.kk-legend__h b{ font:700 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--inkSoft); }
.kk-legend__h .kk-ico{ font-size:15px; color:var(--inkDim); transition:transform .2s; }
.kk-legend.collapsed .kk-legend__h .chev{ transform:rotate(-90deg); }
.kk-legend__body{ padding:0 14px 14px; display:grid; gap:9px; }
.kk-legend.collapsed .kk-legend__body{ display:none; }
.kk-legrow{ display:flex; align-items:center; gap:10px; font:500 12.5px/1 var(--sans); color:var(--inkSoft); }
.kk-legline{ width:22px; height:5px; border-radius:3px; flex:none; }
.kk-legrow.dim{ opacity:.7; }
.kk-legrow .kk-ico{ font-size:15px; }

/* przełącznik warstw */
.kk-layers{ position:absolute; z-index:6; right:18px; top:18px; display:flex; flex-direction:column; gap:6px;
  background:color-mix(in srgb,var(--surface) 94%, transparent); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:var(--shadow-md); }
.kk-layer{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:9px; border:none; background:none; cursor:pointer;
  font:600 12.5px/1 var(--sans); color:var(--inkSoft); white-space:nowrap; }
.kk-layer .kk-ico{ font-size:16px; color:var(--inkDim); }
.kk-layer:hover{ background:var(--surfaceAlt); color:var(--ink); }
.kk-layer.on{ background:var(--accentSoft); color:var(--accent); }
.kk-layer.on .kk-ico{ color:var(--accent); }

/* przycisk wyśrodkuj */
.kk-recenter{ position:absolute; z-index:6; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 15px; border-radius:99px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(10px); font:600 12.5px/1 var(--sans); color:var(--ink); cursor:pointer; box-shadow:var(--shadow-md); }
.kk-recenter .kk-ico{ font-size:15px; color:var(--accent); }
.kk-recenter:hover{ border-color:var(--accent); }

/* tooltip hover odcinka */
.kk-tip{ position:absolute; z-index:8; pointer-events:none; background:var(--invBg); color:var(--invInk);
  padding:9px 12px; border-radius:10px; font:500 12px/1.4 var(--sans); box-shadow:var(--shadow-lg); max-width:240px; opacity:0; transform:translateY(4px); transition:opacity .12s; }
.kk-tip.show{ opacity:1; transform:none; }
.kk-tip b{ display:block; font-weight:700; margin-bottom:2px; }
.kk-tip .row{ display:flex; align-items:center; gap:7px; color:color-mix(in srgb,var(--invInk) 75%,transparent); }
.kk-tip .sw{ width:10px; height:10px; border-radius:50%; flex:none; }

/* maplibre popup -> motyw */
.maplibregl-popup-content{ font-family:var(--sans); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-lg); background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.maplibregl-popup-tip{ border-top-color:var(--surface) !important; border-bottom-color:var(--surface) !important; }
.kk-pop__t{ display:flex; align-items:center; gap:8px; font:700 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; }
.kk-pop h4{ font:600 16px/1.25 var(--serif); margin:8px 0 4px; }
.kk-pop p{ font-size:13px; color:var(--inkSoft); margin:0 0 4px; line-height:1.5; }
.kk-pop .meta{ font-size:11.5px; color:var(--inkDim); margin-top:8px; display:flex; align-items:center; gap:6px; }
.maplibregl-ctrl-group{ border-radius:12px !important; overflow:hidden; box-shadow:var(--shadow-md) !important; }

/* ---- sekcje / nagłówki strony ---- */
.kk-ph{ padding:34px 0 6px; }
.kk-ph .kk-kicker{ font:700 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.kk-ph h1{ font:600 44px/1.04 var(--serif); letter-spacing:-.02em; margin:0 0 10px; text-wrap:balance; }
.kk-ph p.lead{ color:var(--inkSoft); max-width:60ch; margin:0; font-size:15.5px; }

.kk-sec{ padding:42px 0; border-top:1px solid var(--line); }
.kk-sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 22px; flex-wrap:wrap; }
.kk-sec__head h2{ font:600 27px/1.05 var(--serif); margin:0; letter-spacing:-.01em; }
.kk-sec__head .sub{ font-size:13.5px; color:var(--inkDim); margin-top:5px; }

/* statystyki paskowe */
.kk-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.kk-stat{ background:var(--surface); padding:18px 20px; }
.kk-stat b{ display:block; font:600 30px/1 var(--serif); }
.kk-stat span{ font:600 10.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--inkDim); margin-top:8px; display:flex; align-items:center; gap:6px; }
.kk-stat span .kk-ico{ font-size:13px; }

/* lista korków */
.jam-list{ display:flex; flex-direction:column; gap:10px; }
.jam{ display:grid; grid-template-columns:6px 1fr auto; gap:0 16px; align-items:center; padding:0; overflow:hidden; cursor:pointer; transition:transform .12s, box-shadow .15s, border-color .14s; }
.jam:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.jam.is-active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accentSoft); }
.jam__bar{ width:6px; align-self:stretch; }
.jam__bar--free{ background:var(--band-free); } .jam__bar--light{ background:var(--band-light); }
.jam__bar--medium{ background:var(--band-medium); } .jam__bar--heavy{ background:var(--band-heavy); }
.jam__bar--blocked{ background:var(--band-blocked); } .jam__bar--unknown{ background:var(--band-unknown); }
.jam__main{ padding:15px 0; min-width:0; }
.jam__top{ display:flex; align-items:center; gap:9px; margin-bottom:7px; flex-wrap:wrap; }
.jam__ref{ font:700 10.5px/1 var(--sans); letter-spacing:.04em; color:var(--accentInk); background:var(--ink); padding:4px 8px; border-radius:6px; }
.jam__ref[data-cls="motorway"], .jam__ref[data-cls="expressway"]{ background:var(--secondary); }
.jam__name{ font:500 16.5px/1.2 var(--serif); color:var(--ink); }
.jam__dir{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--inkDim); }
.jam__dir .kk-ico{ font-size:13px; }
.jam__meta{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--inkSoft); flex-wrap:wrap; }
.jam__meta div{ display:flex; align-items:center; gap:6px; } .jam__meta .kk-ico{ font-size:13px; color:var(--inkDim); }
.jam__cause{ color:var(--inkDim); }
.jam__side{ padding:15px 18px 15px 0; display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; text-align:right; }
.jam__delay{ font:600 18px/1 var(--sans); color:var(--ink); }
.jam__delay small{ font:500 11px/1 var(--sans); color:var(--inkDim); display:block; margin-top:4px; }
.jam__conf{ display:inline-flex; align-items:center; gap:6px; font:600 10.5px/1 var(--sans); color:var(--inkDim); }
.confbar{ width:46px; height:5px; border-radius:3px; background:var(--surfaceAlt); overflow:hidden; }
.confbar i{ display:block; height:100%; background:var(--inkDim); border-radius:3px; }

/* kafelki korytarzy */
.corr-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.corr-tile{ display:flex; flex-direction:column; gap:11px; padding:18px; color:inherit; transition:transform .14s, box-shadow .15s, border-color .14s; }
.corr-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.corr-tile__top{ display:flex; align-items:center; justify-content:space-between; }
.corr-tile__badge{ width:42px; height:30px; border-radius:8px; display:grid; place-items:center; font:700 13px/1 var(--sans); background:var(--secondary); color:var(--secondaryInk); }
.corr-tile__badge.art{ background:var(--ink); color:var(--accentInk); }
.corr-tile b{ font:500 16px/1.2 var(--serif); }
.corr-tile .corr-tile__st{ font-size:12px; color:var(--inkDim); display:flex; align-items:center; gap:7px; }

/* sparkline */
.spark-card{ padding:22px 24px; }
.spark-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:6px; }
.spark-head h3{ font:600 17px/1.2 var(--serif); margin:0; }
.spark-head .now{ font:600 12px/1 var(--sans); color:var(--accent); }
.spark-wrap{ position:relative; }
.spark-svg{ width:100%; height:96px; display:block; overflow:visible; }
.spark-axis{ display:flex; justify-content:space-between; font:600 10px/1 var(--sans); color:var(--inkDim); margin-top:8px; }

/* blok „kiedy wyjechać" */
.best{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.best__c{ padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.best__c .lab{ font:700 10px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--inkDim); }
.best__c .val{ font:600 22px/1 var(--serif); }
.best__c.good .val{ color:var(--band-free); } .best__c.bad .val{ color:var(--band-heavy); }
.best__c .note{ font-size:12px; color:var(--inkDim); }

/* faq */
.faq{ display:flex; flex-direction:column; gap:0; }
.faq__q{ border-top:1px solid var(--line); padding:18px 0; cursor:pointer; }
.faq__q:first-child{ border-top:none; }
.faq__q summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; font:500 17px/1.3 var(--serif); color:var(--ink); list-style:none; }
.faq__q summary::-webkit-details-marker{ display:none; }
.faq__q summary .kk-ico{ font-size:18px; color:var(--inkDim); transition:transform .2s; flex:none; }
.faq__q[open] summary .kk-ico{ transform:rotate(45deg); }
.faq__q p{ font-size:14.5px; color:var(--inkSoft); line-height:1.65; margin:12px 0 2px; max-width:74ch; }

/* skeleton */
.kk-skel{ background:linear-gradient(90deg, var(--surfaceAlt) 25%, var(--line) 37%, var(--surfaceAlt) 63%); background-size:400% 100%; animation:kkshimmer 1.4s ease infinite; border-radius:8px; }
@keyframes kkshimmer{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* breadcrumb */
.kk-crumb{ display:flex; align-items:center; gap:8px; font:600 12px/1 var(--sans); letter-spacing:.04em; color:var(--inkDim); padding:18px 0 0; }
.kk-crumb a{ color:inherit; } .kk-crumb a:hover{ color:var(--accent); } .kk-crumb .kk-ico{ font-size:13px; opacity:.6; }

@media(max-width:1024px){ .corr-grid{ grid-template-columns:repeat(3,1fr); } .kk-stats{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:760px){
  .kk-ph h1{ font-size:32px; }
  .corr-grid{ grid-template-columns:1fr 1fr; }
  .kk-overlay{ left:12px; right:12px; top:12px; max-width:none; }
  .kk-legend{ right:12px; bottom:12px; width:200px; }
  .kk-layers{ right:12px; top:auto; bottom:12px; left:12px; flex-direction:row; flex-wrap:wrap; }
  .kk-recenter{ display:none; }
  .jam{ grid-template-columns:6px 1fr; } .jam__side{ grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; padding:0 0 14px; width:100%; }
}