:root{
  --brand-50:#fff7ed;--brand-100:#ffedd5;--brand-200:#fed7aa;--brand-300:#fdba74;
  --brand-400:#fb923c;--brand-500:#fb8c2d;--brand-600:#f97316;--brand-700:#c2410c;
  --brand-800:#9a3412;--brand-900:#7c2d12;
  --gray-50:#fafaf7;--gray-100:#f5f3ee;--gray-200:#e8e4dc;--gray-300:#d6cfc1;
  /* gray-900 = slate-700 (#334155). Cool neutral that pairs cleanly
   * with the orange brand colour without competing for attention. */
  /* gray-400 recoloured #a39a88→#5b6572 for WCAG AA text contrast (~2.8:1 → ~5.9:1 on white);
   * its only consumers are small secondary TEXT (.wk-empty .wk-n) — no border usage. */
  --gray-400:#5b6572;
  --gray-500:#7d7565;--gray-700:#3d362b;--gray-900:#334155;
  --slate-700:#334155;--slate-800:#1e293b;--slate-300:#cbd5e1;--slate-400:#94a3b8;
  --header-h:80px;            /* sticky site-header height — filter bar sticks below it */
  --bg:#fafaf7;--surface:#ffffff;--surface-2:#f5f3ee;--border:#e8e4dc;
  --text:#334155;--text-muted:#7d7565;--header-bg:#334155;--header-text:#ffffff;
  /* category emblems (renderCategoryTabs). Warm + low-saturation so the chip
   * label stays the thing you read first. */
  --s-sky:#f3ede1;--s-far:#c9d4cd;--s-near:#7f9a90;
  --s-sun:#f6b45f;--s-sun-2:#ef9440;--s-ink:#4a5866;
  --s-flag:#4a5866;--s-flag-2:#fbfaf7;
  --lab-on:#c2410c;
  /* wheel explorer (2026-08-12 spec): quarter-icon ink, has-selection quarter
   * tint, and the region map's zero-count fill + stroke. The map tokens fix a
   * long-standing blend: heatFillRGB(0) ≈ --surface-2, so empty voivodships
   * vanished into the panel behind them. */
  --q-ico:#1f2933;
  --map-zero:#e8e4dc;--map-stroke:#fff;
  /* mobile wheel (spec delta 2026-08-21): scene inks, pill states, month-head
   * buttons, and the heat ramp's theme dial (100%/#fff = identity in light) */
  --mh-bg:#fff7ed;--mh-bd:#fdba74;--mh-ink:#c2410c;--mh-hov:#ffedd5;
  --heat-pct:100%;--heat-mix:#ffffff;--cell-ink:#1f2933;
}
html.dark{
  --bg:#1c1a2e;--surface:#25233d;--surface-2:#302d4c;--border:#3a3758;
  --text:#f1f2f7;--text-muted:#9a9bb2;--header-bg:#171528;--header-text:#f1f2f7;
  /* emblems retuned, not inverted — the sun must still read as lit */
  --s-sky:#2c2a47;--s-far:#38405a;--s-near:#59627f;
  --s-sun:#e09a4c;--s-sun-2:#c97f38;--s-ink:#c9cbe0;
  --s-flag:#c9cbe0;--s-flag-2:#2c2a47;
  --lab-on:#fb923c;
  /* wheel explorer: light icon ink + warm amber "has selection" tint (dark
   * values verified against a rendered dark screenshot — #54401f read as
   * olive, dark-on-dark icons were invisible). */
  --q-ico:#e8e9f2;
  --map-zero:#3a3758;--map-stroke:#1c1a2e;
  /* mobile wheel: dark is genuinely DARK (owner 2026-08-21) — scenes muted on
   * the dark ground, heat ramp dimmed 45% toward it (relative intensity
   * preserved), cell ink flips light */
  --mh-bg:#302d4c;--mh-bd:#55517e;--mh-ink:#fb923c;--mh-hov:#3a3758;
  --heat-pct:45%;--heat-mix:#16142a;--cell-ink:#f1f2f7;
  /* dark-only refinements */
  --shadow-card:0 1px 3px rgba(0,0,0,.5);
  --gray-700:#d2d3df;--gray-400:#8a8ba2;
  color-scheme:dark;
}
/* Histogram + region-map dark-mode refinements — grouped here (not scattered
 * per-rule) rather than beside each light rule far below. The active week
 * bar and the region-map heat scale itself stay brand orange in both themes. */
html.dark .histo .wk i{background:#3d3a5c}
html.dark .histo .wk-m1 i{background:#4a4770}
html.dark .histo .wk:hover i{background:var(--brand-300)}
/* .histo .wk-active i stays brand orange (#f97316) — unchanged */
html.dark .site-header{border-bottom-color:var(--border)}
/* brand-50/100 cream SURFACES → dark equivalents (were light islands / low-contrast in dark) */
html.dark .section-cta{background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%)}
html.dark .section-intro{background:var(--surface);border-bottom-color:var(--border)}
html.dark .week-empty{background:var(--surface-2);border-color:var(--border)}
html.dark .related-pill,html.dark .proof-partners li{background:var(--surface-2);border-color:var(--border);color:var(--brand-400)}
html.dark .related-pill:hover{background:var(--surface);border-color:var(--brand-500)}
html.dark .fb-clear{background:var(--surface-2);border-color:var(--border);color:var(--brand-400)}
html.dark .fb-clear:hover{background:var(--surface)}
html.dark .fb-dim[open]>summary{background:var(--surface-2);color:var(--brand-400)}
:root{--shadow-card:0 2px 10px rgba(0,0,0,.07)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer}

.site-header{background:var(--header-bg);border-bottom:1px solid #1e293b;position:sticky;top:0;z-index:10}
.header-row{display:flex;align-items:center;justify-content:space-between;height:80px;gap:1rem}
.header-actions{display:flex;align-items:center;gap:.75rem}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-img{height:48px;width:auto;display:block}
.nav-cta{background:var(--brand-500);color:var(--header-text);border:1.5px solid var(--header-text);padding:.55rem 1.1rem;border-radius:.5rem;text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap;box-shadow:0 2px 8px rgba(251,140,45,.25)}
.nav-cta:hover{background:var(--brand-600)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:transparent;color:var(--header-text);cursor:pointer;border-radius:.5rem;opacity:.9}
.theme-toggle:hover{background:rgba(255,255,255,.12);opacity:1}
/* page-version toggle (owner: compact, same language as .theme-toggle) —
   hidden until html.js; shows the version you'd switch TO, picked by the
   pre-paint html[data-pv] stamp, never by SSR state */
.pv-toggle{display:none}
html.js .pv-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:transparent;color:var(--header-text);cursor:pointer;border-radius:.5rem;opacity:.9}
.pv-toggle:hover{background:rgba(255,255,255,.12);opacity:1}
html.js[data-pv="mobile"] .pv-toggle .ic-pvm{display:none}
html.js[data-pv="desktop"] .pv-toggle .ic-pvd{display:none}
.theme-toggle .ic-sun{display:none}
html.dark .theme-toggle .ic-moon{display:none}
html.dark .theme-toggle .ic-sun{display:inline}

/* Stats hero — slate band (not orange). The orange is spent on the
 * histogram's active bar below, so the hero stays a calm dark surface that
 * lets the big number read. The headline number is the thesis. */
.stats-hero{background:var(--header-bg);color:var(--header-text);padding:2.75rem 0 2.5rem}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .85rem;font-size:.8rem;color:rgba(255,255,255,.72)}
.crumbs a{color:rgba(255,255,255,.85);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .crumb-sep{color:rgba(255,255,255,.45)}
.crumbs .crumb-current{color:var(--header-text);font-weight:600}
.stats-h1{margin:0 0 .9rem;font-size:clamp(1.6rem,3.8vw,2.35rem);line-height:1.15;color:var(--header-text);font-weight:800;letter-spacing:-.01em}
.stats-headline{margin:0;font-size:clamp(1.05rem,2.2vw,1.3rem);color:rgba(255,255,255,.92)}
.stats-headline strong{font-size:1.4em;font-weight:800;color:var(--header-text);font-variant-numeric:tabular-nums}
.stats-lead{margin:1rem 0 0;max-width:64ch;font-size:.98rem;line-height:1.55;color:rgba(255,255,255,.82)}
.hero-cta{display:inline-block;background:var(--surface);color:var(--brand-700);text-decoration:none;padding:.9rem 1.6rem;border-radius:.65rem;font-weight:700;font-size:1.02rem;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s}
.hero-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.24)}

.section{padding:2.5rem 0}
.section-title{margin:0 0 1.25rem;font-size:1.5rem;color:var(--text)}
.section-h2{margin:0 0 1rem;font-size:1.35rem;font-weight:700;color:var(--text);line-height:1.3}
.related-links{margin:2rem 0 0;padding:1.25rem 0 0;border-top:1px solid var(--border)}
.related-h3{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:var(--gray-700)}
.related-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.related-pill{display:inline-block;padding:.4rem .9rem;background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-200);border-radius:9999px;text-decoration:none;font-size:.9rem;font-weight:500;transition:background .15s,border-color .15s}
.related-pill:hover{background:var(--brand-100);border-color:var(--brand-300)}

/* Variant + homepage intro lead paragraph. */
.section-intro{background:var(--brand-50);padding:1.5rem 0;border-bottom:1px solid var(--brand-100)}
.variant-intro{margin:0 auto;max-width:760px;color:var(--text);font-size:1rem;line-height:1.55}

/* ── Promoted rail ── snap carousel at event-list card scale. Desktop: two
   cards per view + ~56px peek of the third, ‹ › buttons (RAIL_SCRIPT), edge
   fades signal hidden content. Mobile: swipe + next-card peek, no buttons. */
.section-rail{background:var(--surface);border-bottom:1px solid var(--border);padding:1.75rem 0}
.rail-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 1rem}
.rail-head{display:flex;align-items:center;gap:.45rem;margin:0;font-size:1.2rem;font-weight:800;color:var(--text)}
.rail-star{font-size:1.05em;line-height:1}
.rail-nav{display:flex;gap:.5rem}
.rail-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,opacity .15s}
.rail-btn:hover{background:var(--brand-50);border-color:var(--brand-300)}
.rail-btn:disabled{opacity:.35;cursor:default;background:var(--surface);border-color:var(--border)}
.rail-wrap{position:relative}
.rail-wrap::before,.rail-wrap::after{content:"";position:absolute;top:0;bottom:1rem;width:2.5rem;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.rail-wrap::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.rail-wrap::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
.rail-wrap.can-left::before{opacity:1}
.rail-wrap.can-right::after{opacity:1}
.rail{list-style:none;display:flex;gap:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.25rem .1rem 1rem;margin:0;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-item{flex:0 0 calc(50% - 44px);max-width:520px;scroll-snap-align:start}
.rail-card{display:block;border-radius:.85rem;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card);border:1px solid var(--brand-100);transition:transform .15s,box-shadow .15s}
.rail-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(251,140,45,.18)}
.rail-card picture,.event-link picture{display:block}   /* <picture> is inline by default — a descender gap under every card */
.rail-card img{width:100%;height:auto;display:block;aspect-ratio:1200/250}
@media (prefers-reduced-motion:reduce){.rail{scroll-behavior:auto}}
@media (hover:none){.rail-nav{display:none}}

/* ── Histogram navigator (CSS-only week nav) — the signature element ── */
.section-histo{background:var(--surface);padding:2rem 0 .5rem}
.histo-help{margin:0 0 1rem;font-size:.92rem;color:var(--text-muted)}
/* Bars flex to fill the full container width (same width as the map below);
   each bar: event count at the tip, week-start day below, month label + gridline
   at each month boundary — a readable date axis. */
.histo{display:flex;gap:4px;align-items:flex-end;height:122px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;padding:2px 0 36px}
.histo .wk{position:relative;flex:1 1 0;min-width:15px;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  border-radius:4px;text-decoration:none}
.histo .wk i{display:block;width:100%;background:#cbd5e1;border-radius:4px 4px 2px 2px;transition:background .12s,height .3s cubic-bezier(.4,0,.2,1)}
.histo .wk-n{font-size:.6rem;line-height:1;font-weight:700;color:var(--text-muted);
  font-variant-numeric:tabular-nums;margin-bottom:3px;pointer-events:none}
.histo .wk-m1 i{background:#aab6c6}              /* alternate-month shade → month grouping */
.histo .wk:hover i{background:#64748b}
.histo .wk-active i{background:#f97316}          /* current week */
.histo .wk-active{outline:2px solid #f9731633}
.histo .wk-active .wk-n{color:#f97316}
.histo .wk-empty{opacity:.55;pointer-events:none}
.histo .wk-empty .wk-n{color:var(--gray-400)}
/* date axis — week-start day under every bar (row 1) */
.histo .wk-day{position:absolute;bottom:-15px;left:0;right:0;text-align:center;font-size:.56rem;
  font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;pointer-events:none}
.histo .wk-active .wk-day{color:#f97316;font-weight:800}
/* month abbreviation under the first week of each month (row 2) */
.histo .wk-mon{position:absolute;bottom:-31px;left:0;font-size:.62rem;font-weight:700;
  color:var(--gray-700);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.histo .wk-active .wk-mon{color:#f97316}
/* faint gridline at each month boundary, spanning the bar + both label rows */
.histo .wk-mstart::before{content:"";position:absolute;left:-3px;top:0;bottom:-31px;width:1px;background:var(--border);pointer-events:none}
@media(max-width:640px){.histo .wk{min-width:15px}.histo .wk-mon{font-size:.56rem}.histo .wk-n{font-size:.5rem}.histo .wk-day{font-size:.5rem}}
/* Compact week picker: heat grid, months (columns) × week-of-month (rows). */
.week-grid{display:grid;grid-template-columns:1.5ch repeat(var(--wg-cols,6),34px);gap:4px;overflow-x:auto;padding-bottom:2px}
/* wg-colhead is a <button> (drills into the dzień/month grid) — reset the
   button chrome but keep the original label styling + add a click affordance. */
.wg-colhead{font:inherit;background:none;border:0;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--gray-700);text-align:center;align-self:end;padding-bottom:2px}
/* Only the interactive (button) form advertises clickability — at-rest link
   affordance so users DISCOVER the dzień drill-down (owner 2026-07-30: month
   headers looked static); taxonomy pages render plain divs with none of this. */
button.wg-colhead{cursor:pointer;color:var(--brand-700);text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px}
button.wg-colhead:hover,button.wg-colhead:focus-visible{color:var(--brand-500);text-decoration-style:solid}
.wg-rowhead{font-size:10px;font-weight:700;color:var(--gray-400);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.wg-cell{position:relative;width:34px;height:34px;border-radius:6px;background:var(--f,var(--surface-2));display:flex;align-items:center;justify-content:center;text-decoration:none;color:#1f2933;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;transition:background .28s,box-shadow .12s,transform .1s}
.wg-cell.wg-blank{background:transparent}
.wg-cell.wg-dim{color:transparent}
@media(hover:hover){a.wg-cell:hover{box-shadow:0 0 0 2px var(--brand-500);transform:translateY(-1px);z-index:1}}
.wg-cell.wg-active{background:#ff0201;color:#fff;box-shadow:0 0 0 2.5px var(--brand-700)}
.wg-n{pointer-events:none}
@media(max-width:640px){.week-grid{grid-template-columns:1.4ch repeat(var(--wg-cols,6),30px);gap:3px}.wg-cell{width:30px;height:30px;font-size:13px}.wg-colhead{font-size:9.5px}}
/* .week-grid sets an unconditional display:grid via its own rule, which
   otherwise beats the UA [hidden] stylesheet (author styles win over the UA
   default regardless of selector specificity) — reassert it (#day-grid is
   included defensively), same pattern as .sport-vpanel[hidden] below. */
.week-grid[hidden],#day-grid[hidden]{display:none}

/* Dzień/month drill-down grid (client-rendered by renderDayGrid — no server
   markup). Reuses the week-grid's sizing family (.dg-cell ~= .wg-cell) so
   switching between the two views reads as the same control, one level down. */
.dg-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:6px;flex-wrap:wrap}
.dg-back{font:inherit;background:none;border:0;padding:0;color:var(--brand-700);cursor:pointer;font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.dg-back:hover{color:var(--brand-500)}
.dg-nav{display:flex;align-items:center;gap:.4rem}
.dg-prev,.dg-next{font:inherit;background:none;border:1px solid var(--border);border-radius:4px;width:22px;height:22px;line-height:1;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dg-prev:hover,.dg-next:hover{border-color:var(--brand-500);color:var(--brand-700)}
.dg-label{font-size:12.5px;font-weight:800;color:var(--gray-700);text-transform:uppercase;letter-spacing:.02em;min-width:9ch;text-align:center}
.dg-grid{display:grid;grid-template-columns:repeat(7,34px);gap:4px}
.dg-dow{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--gray-700);text-align:center;padding-bottom:2px}
.dg-cell{position:relative;width:34px;height:34px;border-radius:6px;background:var(--f,var(--surface-2));display:flex;align-items:center;justify-content:center;font:inherit;border:0;cursor:pointer;color:#1f2933;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;transition:background .2s,box-shadow .12s,transform .1s}
.dg-cell.dg-blank{background:transparent;cursor:default;pointer-events:none}
.dg-cell.dg-zero{opacity:.45}
.dg-cell:hover:not(.dg-blank){box-shadow:0 0 0 2px var(--brand-500);transform:translateY(-1px)}
.dg-cell.is-active{background:#ff0201;color:#fff}
@media(max-width:640px){.dg-grid{grid-template-columns:repeat(7,30px)}.dg-cell{width:30px;height:30px;font-size:13px}.dg-dow{font-size:9.5px}}

/* Discipline chips — live inside the "Dyscyplina" (What) filter panel. */
.sport-tabs{list-style:none;padding:0;margin:0;display:flex;gap:.6rem;flex-wrap:wrap}
.sport-tab{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1.5px solid var(--border);border-radius:9999px;padding:.6rem 1rem;color:var(--text);font-weight:500;font-size:.95rem;transition:all .15s;white-space:nowrap;text-decoration:none}
@media(hover:hover){.sport-tab:hover{border-color:var(--tint,var(--brand-500))}}
.sport-tab.is-zero:not(.is-active){opacity:.45}   /* no events this week — listed + selectable, muted */
.sport-tab.is-active{background:var(--tint,var(--brand-500));color:var(--fg,#fff);border-color:var(--tint,var(--brand-500));opacity:1}
.sport-tab.is-active .sport-tab-count{color:var(--fg,#fff);opacity:.8}
/* Icon sits in a fixed disc, matching the Kategoria chips. The disc — not the
 * glyph — is the constant, which is what steadies the row: the 24×24 icons fill
 * their box by very different amounts (a full person-on-bike vs a skate boot),
 * so at 20px bare they read as different sizes. */
/* The disc carries the discipline's OWN colour — the same coding the generated
 * race cards use — so a chip and the cards it selects are recognisably the same
 * thing. Contained in a 34px circle it identifies without shouting; tinting the
 * whole chip would turn the row into a paintbox. */
.sport-tab-icon{width:34px;height:34px;flex:0 0 34px;border-radius:9999px;background:var(--tint,var(--brand-500));display:grid;place-items:center;color:var(--fg,#fff)}
.sport-tab-icon svg{width:19px;height:19px}
/* Selected: the chip takes the tint, so the disc inverts to stay visible.
 * Driven off --fg (readableOn(color)) so it works whichever way that resolved. */
.sport-tab.is-active .sport-tab-icon{background:var(--fg,#fff);color:var(--tint,var(--brand-500))}
/* Only chips that actually carry a disc get the tighter left padding — the
 * single-discipline sport toggles reuse .sport-tab without an icon. */
.sport-tab:has(.sport-tab-icon){gap:.55rem;padding:.38rem .9rem .38rem .38rem}
.sport-tab-count{color:var(--text-muted);font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}

/* Kategoria chips — same shape/behavior as discipline chips (.sport-tab),
   but plain buttons (no per-item tint, no taxonomy href to fall back to). */
/* Kategoria: the same flat language as everything it introduces. As four
 * bordered capsules around 34px emblems it carried more visual weight than the
 * four facets below it combined, which is backwards for a heading row. Border
 * and pill go, the emblem drops to 24px — it still identifies at a third of the
 * area — and the selected chip fills flat red, the one selected-state colour
 * the sport cells, the week grid and the map all already use. */
/* Kategoria = a left-aligned vertical list in EVERY context (card and lead —
 * it used to be a wrapping row, which centered ragged in the lead slot). */
.ex-cat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.ex-cat-chip{display:inline-flex;align-items:center;gap:.55rem;background:none;border:0;border-radius:8px;padding:.4rem .5rem;color:var(--text);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .15s;white-space:nowrap}
.ex-cat-emb{display:block;width:24px;height:24px;border-radius:9999px;flex:none}
@media(hover:hover){.ex-cat-chip:hover{background:var(--surface-2)}}
.ex-cat-chip.is-zero:not(.is-active){opacity:.45}   /* no events this week — listed + selectable, muted */
.ex-cat-chip.is-active{background:#ff0201;color:#fff;opacity:1}
.ex-cat-chip.is-active .ex-cat-n{color:#fff;opacity:.8}
.ex-cat-n{color:var(--text-muted);font-size:.85rem;font-weight:600}

/* ── Results + consolidated filter bar ──
   The histogram above is the WHEN navigator; WHERE (map) + WHAT (disciplines)
   are collapsible refinements here. The selected-week summary + clear button
   stick below the header so the list keeps its context while scrolling. */
.section-results{background:var(--surface);padding:.4rem 0 3rem}
.fb-summary{position:sticky;top:var(--header-h);z-index:9;background:var(--surface);display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem .85rem;padding:.7rem 0 .6rem;margin-bottom:.4rem;border-bottom:1px solid var(--surface-2)}
.fb-week{margin:0;font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.2;font-weight:800;color:var(--text)}
.fb-count{font-size:.92rem;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;text-transform:lowercase}
.fb-clear{margin-left:auto;background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-700);font-weight:600;font-size:.85rem;padding:.42rem .85rem;border-radius:9999px;cursor:pointer;white-space:nowrap}
.fb-clear:hover{background:var(--brand-100)}
.fb-dims{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem;margin:0 0 1.1rem}
.fb-dim{flex:0 0 auto}                  /* chip-sized when closed → both on one row */
.fb-dim[open]{flex:1 0 100%}            /* full width when open → panel spans the row */
.fb-dim>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1.5px solid var(--border);border-radius:9999px;padding:.55rem 1.05rem;font-weight:600;font-size:.92rem;color:var(--text);white-space:nowrap;user-select:none}
.fb-dim>summary::-webkit-details-marker{display:none}
.fb-dim>summary::after{content:"▾";font-size:.78em;color:var(--text-muted);margin-left:.15rem}
.fb-dim[open]>summary{border-color:var(--brand-500);background:var(--brand-50);color:var(--brand-800)}
.fb-dim[open]>summary::after{content:"▴"}
.fb-badge{font-style:normal;color:var(--brand-700);font-weight:700;font-size:.85em}
.fb-panel{margin:.85rem 0 .25rem}
.fb-panel-map{max-width:520px}
.event-empty{font-size:.95rem;color:var(--text-muted)}
.event-empty:not([hidden]){display:block;margin:.4rem 0 1rem}    /* keep the [hidden] attr authoritative */
.event-list{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:1100px}
.event-row{border-radius:.75rem;overflow:hidden;transition:transform .15s,box-shadow .15s;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-card)}
.event-row:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.event-link{display:block;text-decoration:none;color:inherit}
/* aspect-ratio duplicates the width/height attributes on purpose: it also holds
   the row open for any card that predates them, so the grid never collapses to
   zero height and reflows once the images land. */
.event-card-img{width:100%;height:auto;display:block;aspect-ratio:1200/250}
/* Empty-week state — friendly nudge back to the histogram. */
.week-empty{max-width:560px;margin:.5rem auto 0;padding:2rem 1.5rem;text-align:center;background:var(--brand-50);border:1px dashed var(--brand-200);border-radius:1rem}
.week-empty-lead{margin:0 0 .5rem;font-size:1.1rem;font-weight:700;color:var(--brand-700)}
.week-empty-sub{margin:0;font-size:.95rem;color:var(--gray-700)}
@media (max-width:720px){
  .event-list{grid-template-columns:1fr;max-width:560px}
  .rail{gap:.75rem}
  .rail-item{flex-basis:calc(100% - 2.75rem)}
}

.events-footer{margin:1.75rem 0 0;text-align:center}
.events-cta{display:inline-block;background:var(--brand-500);color:#fff;text-decoration:none;padding:.85rem 1.5rem;border-radius:.6rem;font-weight:700;font-size:1rem;box-shadow:0 4px 12px rgba(251,140,45,.25)}
.events-cta:hover{background:var(--brand-600)}

.section-proof{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.proof-headline{margin:0 0 .5rem;font-size:1.4rem;font-weight:700;color:var(--text);max-width:780px}
.proof-volume{margin:0 0 2rem;font-size:1.1rem;color:var(--gray-700);max-width:780px}
.proof-volume strong{color:var(--brand-700)}
.proof-subhead{margin:0 0 .85rem;font-size:.85rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.proof-stats{list-style:none;padding:0;margin:0 0 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.proof-stats li{background:var(--bg);border:1px solid var(--border);border-radius:.65rem;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.15rem}
.proof-num{font-size:1.6rem;font-weight:800;color:var(--text);line-height:1.1}
.proof-unit{font-size:.95rem;color:var(--text-muted);font-weight:600;margin-left:.15rem}
.proof-channel{font-size:.9rem;color:var(--gray-700)}
.proof-partners{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.proof-partners li{background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-200);padding:.55rem 1rem;border-radius:9999px;font-weight:600;font-size:.95rem}

.section-cta{background:linear-gradient(135deg,var(--brand-50) 0%,var(--brand-100) 100%);text-align:center}
.section-cta p{max-width:560px;margin:0 auto 1.5rem;color:var(--gray-700)}

.site-footer{background:var(--header-bg);color:var(--gray-300);padding:1.75rem 0;text-align:center;font-size:.875rem}
.site-footer a{color:var(--brand-400);text-decoration:none}

@media (max-width:640px){
  :root{--header-h:64px}
  .header-row{height:64px}
  .logo-img{height:36px}
  .stats-hero{padding:2.25rem 0 2rem}
  .section{padding:2rem 0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ── Explorer controls (discipline chips + region-name tiles + summary) ──
   Region tiles show FULL official voivodship names via .rt-name (not 2-char
   codes), so the grid uses a flexible min-height tile rather than a square
   aspect-ratio code-tile. */
.explorer-controls{display:flex;flex-direction:column;gap:48px;margin:28px 0 6px}
/* ── Wheel explorer layout (exw) ──
 * Strict 3-column alignment: the wheel column is EXACTLY one card column wide
 * (calc((100% - 2*gap)/3)) and the lead panel spans the remaining two, so
 * every vertical edge lines up with the card row below. The lead row is
 * height-locked (minmax) so spinning the wheel never moves the page. */
.explorer-controls.exw{gap:20px}
.exw-main{display:grid;grid-template-columns:calc((100% - 40px)/3) minmax(0,1fr);grid-template-rows:minmax(360px,auto);gap:20px;align-items:stretch}
/* Lead panel border + ring are the SAME red as the lead quarter's fill —
 * quarter and panel read as one continuous selected element. */
.exw-lead{border:1px solid #ff0201;box-shadow:0 0 0 1px #ff0201;border-radius:.75rem;background:var(--surface-2);padding:18px 20px;display:grid;place-items:center;min-width:0}
.exw-lead .ex-dim{width:100%}
/* Per-dimension lead layout: content centers as a compact block, label stays
 * left — every dimension follows the same rule. Map height is capped HERE only
 * (it keeps full size in the cards), which is what locks the row height. */
.exw-lead .region-map-svg{max-width:none}
.exw-lead .region-map-svg svg{width:auto;height:250px;margin-inline:auto}
.exw-lead .week-grid{justify-content:center}
/* dzień mode: shrink-wrap the day grid and center it like the week grid — and
 * with the block at grid width, .dg-head's space-between keeps the month nav
 * beside the days instead of flung to the wide lead panel's far edge. */
.exw-lead #day-grid{width:fit-content;margin-inline:auto}
.exw-lead .ex-cat{width:fit-content;margin-inline:auto}
.exw-lead .sport-tabs-control{max-width:440px;margin-inline:auto}
.exw-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.exw-card{background:var(--surface-2);border:1px solid var(--border);border-radius:.75rem;min-width:0}
.exw-card-h{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:13px 16px;color:var(--text);text-align:left;font:inherit;cursor:pointer}
.exw-card-h::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--brand-500);opacity:.55;flex:none}
.exw-card-h .nm{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.exw-card-h .sum{margin-left:auto;font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exw-card-h .sum.picked{color:#ff0201;font-weight:800}
.exw-card-h .chev{font-size:12px;color:var(--text-muted);transition:transform .2s;flex:none}
.exw-card.open .chev{transform:rotate(180deg)}
.exw-card-b{padding:2px 16px 16px}
/* The card header already names the dimension — the panel's own heading would
 * double it (mockup finding). */
.exw-card-b .ex-lab{display:none}
/* No-JS default is EXPANDED (full board, wheel inert); EXPLORER_LEAD_INIT adds
 * html.js, which is what arms the collapse. */
html.js .exw-card-b{display:none}
html.js .exw-card.open .exw-card-b{display:block}
/* ── Share panel ── popover off the Udostępnij button in the summary bar.
 * SSR ships it hidden and stateless; the controller fills the link at open. */
.exw-share{position:relative;margin-left:auto}
/* Same pill family as .fb-clear beside it (owner 2026-08-14: the filled-orange
 * version read as a second Logowanie CTA and floated oddly without filters). */
.exw-share-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand-50);
  border:1px solid var(--brand-100);color:var(--brand-700);border-radius:9999px;
  padding:.42rem .85rem;font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap}
.exw-share-btn:hover{background:var(--brand-100)}
html.dark .exw-share-btn{background:var(--surface-2);border-color:var(--border);color:var(--brand-400)}
html.dark .exw-share-btn:hover{background:var(--surface)}
/* share sits right-aligned; the clear button joins it instead of fighting for
 * the same auto margin */
.fb-clear:not([hidden])~.exw-share{margin-left:0}
.exw-share-pop{position:absolute;right:0;top:calc(100% + 10px);width:290px;max-width:calc(100vw - 32px);
  background:var(--brand-500);border:1px solid var(--brand-600);border-radius:.9rem;
  box-shadow:0 12px 34px rgba(194,65,12,.38);padding:14px;z-index:11}
.exw-share-pop[hidden]{display:none}
.exw-share-link{display:flex;gap:8px;margin-bottom:10px}
.exw-share-link input{flex:1;min-width:0;font:inherit;font-size:14px;font-weight:700;color:#334155;
  background:#fff;border:0;border-radius:.5rem;padding:.5rem .7rem}
.exw-share-copy{display:flex;align-items:center;justify-content:center;border:0;color:var(--brand-700);
  background:#fff;border-radius:.5rem;width:42px;cursor:pointer;font:inherit;font-weight:800;font-size:1rem;flex:none}
.exw-share-copy:hover{background:var(--brand-50)}
.exw-share-copy svg{width:18px;height:18px;fill:var(--brand-700)}
.exw-share-btn[aria-expanded="true"]{background:var(--brand-500);border-color:var(--brand-600);color:#fff}
/* Promote choreography: content fades out fast and uniform, swaps while
 * invisible, then fades back with a 55ms stagger in wheel order (--ord: 0 =
 * lead panel, 1..3 = cards). The global reduced-motion kill-switch flattens
 * both phases to an instant swap. */
.exw-lead .ex-dim,.exw-card{transition:opacity .26s ease,transform .26s ease;transition-delay:calc(var(--ord,0)*55ms)}
.exw.exw-fading .exw-lead .ex-dim,.exw.exw-fading .exw-card{opacity:0;transform:translateY(5px);transition-duration:.14s;transition-delay:0ms}
@media(max-width:760px){
  .explorer-controls{gap:30px;margin-top:18px}
  .explorer-controls.exw{gap:20px}
  /* single column: wheel (centered), lead panel, then the three cards */
  .exw-main{grid-template-columns:1fr;grid-template-rows:auto}
  .exw-wheel-svg{max-width:320px}
  .exw-cards{grid-template-columns:1fr}
  /* The 15rem cap exists to stop a right-aligned count drifting from its label
   * across a wide desktop column. A phone column is already narrower than that,
   * so the cap only pulls the rows in off the margin. */
  .sport-vpanel.sport-tabs .sport-tab{max-width:none}
}
/* Mobile: collapse the stacked padding between the week picker and the
   discipline/region controls — the desktop breathing room reads as dead space
   on a phone. */
@media(max-width:760px){
  .section-histo{padding:1.25rem 0 .25rem}
  .section-results{padding-top:0}
  .fb-summary{padding:.55rem 0 .45rem}
  /* .ex-dim stretches on mobile, so this header went full-width while the grid
   * it labels is a fixed ~234px — space-between then flung the month nav to the
   * page edge, far from the days it pages through. Grouped left, next to the
   * back link, it stays over its own grid. */
  .dg-head{justify-content:flex-start;gap:.5rem 1.2rem}
  /* The H2 fills the row on a phone, so the clear button wrapped onto a line of
   * its own, ABOVE the sentence it acts on. Ordering it after the summary is the
   * whole fix; the base margin-left:auto still parks it on the right, which is
   * where it belongs — it is an action, not part of the reading column. Desktop
   * keeps it beside the H2, where there is room. */
  .fb-clear{order:1}
  .exw-share{order:1}
}
/* ── The wheel (exw) ── quarter fills/icons/hub follow the theme; the TIRE is
 * brand-locked (--brand-600 both themes) — the wheel is the "o" of the
 * wordmark, so its color is identity, not chrome. Rotation transitions are
 * covered by the global prefers-reduced-motion kill-switch. */
.exw-wheel{display:flex;flex-direction:column;align-items:center;justify-content:center}
.exw-wheel-svg{width:100%;max-width:340px;height:auto;display:block}
/* ── Mobile page version v2 (spec addendum 2026-08-21) ────────────────────
 * The overlay .pvw-inner IS the mobile wheel: surface disc + four-quarter
 * RING (navigator + state) + curved names + live count; a dimension panel is
 * ALWAYS mounted (Termin home). Desktop and no-JS never see it; the desktop
 * wheel SVG is fully hidden in mobile mode. No hover on wheel elements
 * (owner): :active press wash + :focus-visible only. */
.pvw-inner,.pvw-hint{display:none}
/* isolate: the box's internal z-indexes (mask 5, nav 6, pin/clear 10) must
 * never escape into the page's stacking context — pin z:10 tied the sticky
 * header's z:10 and, coming later in the DOM, painted OVER it while the
 * wheel scrolled beneath (owner screenshot 2026-08-26) */
.pvw-box{position:relative;isolation:isolate;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1}
html.js[data-pv="mobile"] .pvw-inner{display:block}
html.js[data-pv="mobile"] .pvw-hint{display:block;text-align:center;font-size:.85rem;color:var(--text-muted);margin:.6rem 0 0}
html.js[data-pv="mobile"] .exw-main .exw-lead{display:none}
html.js[data-pv="mobile"] .exw-cards{display:none}
html.js[data-pv="mobile"] .exw-main{display:block}
html.js[data-pv="mobile"] .exw-wheel-svg{display:none}
html.js[data-pv="mobile"] .pvw-box{--pvw:min(90vw,78vh,400px);max-width:var(--pvw)}
.pvw-inner{position:absolute;inset:0;border-radius:50%;background:var(--surface);box-shadow:0 10px 32px rgba(28,26,46,.13)}  /* v3 polish: soft elevation */
.pvw-clip{position:absolute;inset:0;clip-path:circle(50%);display:flex;align-items:center;justify-content:center}
.pvw-body{width:80%;height:88%;overflow:hidden;box-sizing:border-box;padding:18px 0 10px;display:flex;flex-direction:column;justify-content:safe center;text-align:center;color:var(--text)}
.pvw-mask{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.pvw-mask text{pointer-events:none}
/* ring quarters take the taps; press wash is the pointer feedback and a
 * focus arc serves keyboard users */
.pvw-mask .pvr-hit{pointer-events:stroke;cursor:pointer;outline:none}
.pvw-mask .pvr-hit:active{stroke:rgba(0,0,0,.16)}
.pvw-mask .pvr-hit:focus-visible{stroke:rgba(255,255,255,.3)}
/* 44px hit area (audit 2026-08-22 rec 2, Apple HIG floor) — the glyph stays
 * small; the insets shift so its optical position is unchanged */
.pvw-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--brand-700);opacity:.6;font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.pvw-nav[data-dir="-1"]{left:25px}
.pvw-nav[data-dir="1"]{right:25px}
/* in-wheel panels: the ring names the dimension; content is width-capped
 * where the circle narrows */
.pvw-body .ex-lab{display:none}
.pvw-body .sport-tabs-control{max-width:calc(var(--pvw,400px)*.68);margin-inline:auto}
.pvw-body .sport-tab-icon{display:none}
.pvw-body .sport-tab{padding:.3rem .45rem}
.pvw-body .sport-tab-label{font-size:.84rem}
.pvw-body .sport-tab-count{font-size:.78rem}
.pvw-body .sport-vtab{padding:.32rem .5rem;font-size:.86rem}
/* reserve the tallest sport panel so switching sports never moves the tabs */
.pvw-body .sport-vpanels{padding:8px;min-height:134px}
/* Full discipline names (owner 2026-08-22: "TRIAT/DUAT" ellipsized on
 * iPhone): the small panels — Rolki(2)/Multi(3)/orientacja(5) — collapse the
 * legend GRID (repeat(2,minmax(0,1fr)) upstream) to one column, so every chip
 * gets the full row and long names never truncate. Rower keeps two columns:
 * its names are short and six full rows would be tall. Both classes named to
 * out-rank the (0,2,0) upstream rule. */
.pvw-body .sport-vpanel.sport-tabs[data-sport="2"],.pvw-body .sport-vpanel.sport-tabs[data-sport="3"],.pvw-body .sport-vpanel.sport-tabs[data-sport="5"]{grid-template-columns:1fr}
.pvw-body .sport-vpanel[data-sport="2"] .sport-tab,.pvw-body .sport-vpanel[data-sport="3"] .sport-tab,.pvw-body .sport-vpanel[data-sport="5"] .sport-tab{max-width:none}
.pvw-body .ex-cat{width:fit-content;max-width:calc(var(--pvw,400px)*.66);margin:0 auto}
/* dzień mode: min-content sizes the block to the GRID (the wide header row
 * wraps instead of widening the block and dragging the grid off-center —
 * iOS field bug 2026-08-22); head lines center over the centered grid */
.pvw-body #day-grid{width:min-content;margin-inline:auto}
.pvw-body .dg-head{width:100%;justify-content:center;column-gap:.9rem;row-gap:2px}
.pvw-body .dg-grid{margin-inline:auto}
.pvw-body .region-map-svg{max-width:none;width:100%;margin:0 auto}
.pvw-body .region-map-svg svg{width:auto;height:calc(var(--pvw,400px)*.68);max-width:100%;display:block;margin:0 auto}
.pvw-body .week-grid{margin:0 auto;width:max-content;grid-template-columns:1.5ch repeat(var(--wg-cols,6),34px);gap:4px}
.pvw-body .wg-cell{width:34px;height:34px;font-size:15px;background:color-mix(in srgb,var(--f,var(--surface-2)) var(--heat-pct,100%),var(--heat-mix,#fff));color:var(--cell-ink,#1f2933)}
/* the heat rule above out-cascades .wg-cell.wg-active (equal specificity,
 * later) — restate the selected week INSIDE the wheel so it reads exactly
 * like the day view's .dg-cell.is-active (owner 2026-08-26 round 4) */
.pvw-body .wg-cell.wg-active{background:#ff0201;color:#fff}
.pvw-body button.wg-colhead{width:100%;height:34px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--mh-bd);background:var(--mh-bg);color:var(--mh-ink);border-radius:6px;padding:0;text-decoration:none;cursor:pointer;line-height:1;margin-bottom:2px}
.pvw-body button.wg-colhead:active{background:var(--mh-hov)}
.pvw-body #day-grid .dg-prev,.pvw-body #day-grid .dg-next{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--mh-bd);background:var(--mh-bg);color:var(--mh-ink);font-size:1.15rem;line-height:1;cursor:pointer;padding:0;border-radius:6px}
.pvw-body #day-grid .dg-cell{color:var(--cell-ink,#1f2933)}
/* slate = has-selections quarters, BOTH versions (the amber tint token is retired) */
.exw-qlbl.on-sel .qicon{fill:#fff}
.exw-qlbl.on-sel .qicon-s{stroke:#fff}
/* seamless switch = crossfade only (owner 2026-08-23): the View Transition
 * morph is retired — its top-layer snapshots kept sliding over the sticky
 * header on iOS regardless of gating. Reduced motion: global kill-switch. */
.pv-fading .exw-main,.pv-fading .exw-cards,.pv-fading .pvw-hint{opacity:0;transition:opacity .14s ease}
/* compact hero + rail on the MOBILE VERSION (audit 2026-08-22 rec 1): the
 * wheel + count must land on the first phone screen — hero shrinks, the intro
 * clamps to one line, the rail drops its heading and tightens. Desktop and
 * no-JS keep the full hero. */
html.js[data-pv="mobile"] .stats-hero{padding:1.1rem 0 1rem}
html.js[data-pv="mobile"] .stats-h1{font-size:1.35rem;margin-bottom:.35rem}
html.js[data-pv="mobile"] .stats-headline{font-size:.98rem}
html.js[data-pv="mobile"] .stats-lead{margin-top:.45rem;font-size:.88rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html.js[data-pv="mobile"] .section-rail{padding:.8rem 0}
html.js[data-pv="mobile"] .rail-head{display:none}
html.js[data-pv="mobile"] .rail-nav{display:none}  /* touch swipes the rail; headingless arrows floated context-less */
html.js[data-pv="mobile"] .fb-summary{padding:.4rem 0 .35rem}
/* v4 slide on period step (v5: swipe-only stepping) */
html.js[data-pv="mobile"] #event-list{transition:transform .25s cubic-bezier(.3,1,.4,1),opacity .25s}
@media (prefers-reduced-motion: reduce){html.js[data-pv="mobile"] #event-list{transition:none}}
#event-list.pv-out-l{transform:translateX(-14%);opacity:0}
#event-list.pv-out-r{transform:translateX(14%);opacity:0}
/* Empty periods must still be swipeable (owner: dead spot when no events) —
 * without a floor the results area collapses to the empty-state line and the
 * swipe listener has nothing under the thumb. */
html.js[data-pv="mobile"] .results-body{min-height:38vh;touch-action:pan-y}
/* v5: pin + clear icon pair at the wheel's top-right corner (outside the
 * ring, inside the box) — the clear is the pin's ✕ twin, same idle rule. */
.pvw-clear{display:none;position:absolute;top:2px;right:40px;z-index:10;width:34px;height:34px;border-radius:999px;border:2px solid var(--brand-600);background:var(--surface);color:var(--brand-600);cursor:pointer;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.14);transition:opacity .2s}
html.js[data-pv="mobile"] .pvw-clear{display:flex}
.pvw-clear svg{width:15px;height:15px}
.pvw-clear.idle{opacity:.45;pointer-events:none}
/* ── Message feed (phase 3): wheel-corner toggle + card family ──────────── */
/* Toggle at the wheel's bottom-LEFT corner — the mirror of pin/✕ top-right
 * (owner mockup round 3). Both page versions; JS-gated (no-JS shows the
 * messages as a plain section instead). Rides the sticky wheel in focus. */
.pvw-msg{display:none;position:absolute;left:0;bottom:2px;z-index:10;width:34px;height:34px;border-radius:999px;border:0;background:var(--brand-600);color:#fff;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.28)}
html.js .pvw-msg{display:flex}
.pvw-msg svg{width:17px;height:17px}
.pvw-msg .ic-mc{display:none}
html.msg-open .pvw-msg{background:var(--header-bg)}
html.msg-open .pvw-msg .ic-mm{display:none}
html.msg-open .pvw-msg .ic-mc{display:block}
.pvw-msg-badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:999px;background:#ff0201;color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--surface)}
.pvw-msg-badge[hidden]{display:none}
/* feed swap: html-level class like pv-focus — events hide, messages show */
html.js .msg-list{display:none}
html.js.msg-open .msg-list{display:block}
html.js.msg-open #event-list,html.js.msg-open #event-empty,html.js.msg-open .events-footer{display:none}
/* cards — the approved mockup family on the landing's tokens */
.msg-list{margin:0 0 1rem}
.msg-card{--mtint:var(--brand-500);background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--mtint);border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.msg-t-promotion{--mtint:#f97316}.msg-t-coupon{--mtint:#10b981}.msg-t-stats{--mtint:#3b82f6}
.msg-t-version{--mtint:#6366f1}.msg-t-maintenance{--mtint:#dc2626}.msg-t-blog{--mtint:#ec4899}
.msg-t-maintenance{background:color-mix(in srgb,#dc2626 7%,var(--surface))}
.msg-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.msg-chip{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--mtint);border-radius:999px;padding:3px 9px}
.msg-when{font-size:11.5px;color:var(--text-muted)}
.msg-flag{margin-left:auto;color:#ff0201;font-size:11.5px;font-weight:800}
.msg-title{font-size:15.5px;font-weight:800;margin:0 0 3px;color:var(--text)}
.msg-body{font-size:13.5px;color:var(--text);margin:0;white-space:pre-line}
.msg-img{display:block;margin:9px 0 4px;border-radius:10px;width:100%;max-width:100%;object-fit:cover;aspect-ratio:16/7}
.msg-video{display:flex;align-items:center;gap:10px;margin:9px 0 4px;border-radius:10px;background:var(--header-bg);color:var(--header-text);padding:12px 14px;text-decoration:none;font-size:13.5px;font-weight:700}
.msg-play{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:#1f2933;display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
.msg-code{display:flex;align-items:center;gap:8px;margin-top:9px}
.msg-code code{flex:1;border:2px dashed var(--mtint);border-radius:10px;padding:9px 12px;font-size:15px;letter-spacing:.12em;text-align:center;color:var(--text)}
.msg-copy{background:var(--mtint);color:#fff;border:0;border-radius:10px;padding:10px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;min-width:96px}
.msg-cta{display:inline-block;margin-top:8px;background:var(--mtint);color:#fff;font-weight:800;font-size:13.5px;border-radius:999px;padding:8px 16px;text-decoration:none}
/* brand-filled: the surface-on-surface version vanished against the wheel
 * mask on a real phone (owner report 2026-08-26) */
.pvw-pin{display:none;position:absolute;top:2px;right:0;z-index:10;width:34px;height:34px;border-radius:999px;border:0;background:var(--brand-600);color:#fff;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.28)}
html.js[data-pv="mobile"] .pvw-pin{display:flex}
.pvw-pin svg{width:16px;height:16px}
.pvw-pin[aria-pressed="true"]{background:#ff0201;box-shadow:0 3px 12px rgba(255,2,1,.4)}
/* FOCUS MODE (v5): header/hero/rail/hint collapse; the wheel area pins.
 * Gate is the html-level class the pre-paint stamp writes. Scroll anchoring
 * is OFF on the mobile version: the unpin compensation scrolls manually
 * (Safari has no anchoring), and Chrome's anchoring would double it. */
html.js[data-pv="mobile"]{overflow-anchor:none}
html.js[data-pv="mobile"].pv-focus .site-header{display:none}
html.js[data-pv="mobile"].pv-focus .stats-hero{display:none}
html.js[data-pv="mobile"].pv-focus .section-rail{display:none}
html.js[data-pv="mobile"].pv-focus .pvw-hint{display:none}
/* NOTHING above the wheel while focused (owner 2026-08-26 round 3): the
 * summary block ("Starty: ..." + filter sentence + share) re-renders on
 * every filter change and its height shifts moved the wheel around. */
html.js[data-pv="mobile"].pv-focus .fb-summary{display:none}
/* sticky must live on an ancestor whose PARENT spans the list — .exw-wheel's
 * parent ends right below the wheel, so it cannot stick past itself. The
 * explorer-controls block sits inside the same .container as the results. */
/* margin-top:0 makes the flow position EQUAL the stuck position — the wheel
 * sits at the same pixel whether the page is at the top or scrolled deep
 * (owner round 3: "it doesn't move, never") */
html.js[data-pv="mobile"].pv-focus .explorer-controls.exw{position:sticky;top:0;z-index:30;background:var(--surface);padding-top:6px;margin-top:0;border-bottom:1px solid var(--border);margin-bottom:0}
.exw-wheel-svg .tire{fill:none;stroke:var(--brand-600);stroke-width:7}
.exw-wheel-svg .rim{fill:none;stroke:var(--text);stroke-width:1.4;opacity:.35}
.exw-wheel-svg .spoke{stroke:var(--text);stroke-width:1.1;opacity:.28}
.exw-rot{transition:transform .55s cubic-bezier(.35,.9,.3,1);transform-origin:100px 100px}
.exw-qlbl{transition:transform .55s cubic-bezier(.35,.9,.3,1);pointer-events:none}
/* Quarters are SVG buttons: suppress the UA focus rectangle (a box around a
 * wedge reads as a glitch) but keep keyboard focus visible on the shape itself
 * — same treatment as .region-map-svg a below. */
.exw-quad{cursor:pointer;stroke:var(--surface);stroke-width:2.5;transition:fill .2s,filter .15s;outline:none}
@media(hover:hover){.exw-quad:hover{filter:brightness(.95)}}
.exw-quad:focus{outline:none}
.exw-quad:focus-visible{stroke:var(--brand-700);stroke-width:4}
.exw-wheel-svg .qicon{fill:var(--q-ico)}
.exw-wheel-svg .qicon-s{fill:none;stroke:var(--q-ico);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.exw-qlbl.on-lead .qicon{fill:#fff}
.exw-qlbl.on-lead .qicon-s{stroke:#fff}
.exw-hub{fill:var(--surface);stroke:var(--border);stroke-width:1.5}
.exw-hub-n{font-size:30px;font-weight:800;fill:var(--text);text-anchor:middle;font-variant-numeric:tabular-nums}
.exw-hub-t{font-size:10.5px;font-weight:800;letter-spacing:.08em;fill:var(--text-muted);text-anchor:middle;text-transform:uppercase}
.ex-lab{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text);margin:0 0 14px;display:flex;align-items:center;gap:.45rem}
/* Facet pictogram — same icon the wheel quarter carries, so the quarter→panel
 * mapping is taught wherever both are on screen. currentColor: inherits the
 * label ink, including the .is-on brand tint. */
.dim-ico{width:16px;height:16px;flex:none;display:block}
.dim-ico .qicon{fill:currentColor}
.dim-ico .qicon-s{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Anchor bar: grey by default, brand once the facet is narrowing anything. */
.ex-lab::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--border);flex:none}
.ex-lab.is-on{color:var(--lab-on)}
/* Carry the active state on the anchor bar rather than a badge: it grows and
 * fills, which is legible in peripheral vision without competing with the
 * label it belongs to. */
.ex-lab.is-on::before{background:var(--brand-500);width:4px;height:16px}
/* How many values are selected in that facet — answers "what have I already picked"
 * without scrolling back up to look at the controls. */
/* The count is a detail OF the label, not a badge beside it — same colour, no
 * fill, no pill. A filled orange pill pulled the eye harder than the facet name
 * it was annotating. */
.ex-lab-n{font-size:11.5px;font-weight:600;letter-spacing:0;color:inherit;opacity:.72;font-variant-numeric:tabular-nums;text-transform:none}
.ex-lab-n::before{content:"·";margin-right:.3rem;opacity:.55}
/* Wydarzenia is the RESULT, not a fifth filter. That used to be said with a
 * rule above it, but a full-width line reads as a page section break — it cut
 * the row of facets off from the list they produce. Space says it instead, the
 * same call as the divider dropped from under the sport tabs. */
.ex-lab-results::before{background:var(--brand-500)}
/* region: labelled geographic grid on desktop */
.region-map{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.region-map .rt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:5px 4px;
  border:1.5px solid transparent;border-radius:8px;text-decoration:none;text-align:center;
  background:color-mix(in srgb, var(--brand-500) var(--heat,8%), var(--surface-2));color:var(--fg,var(--gray-700));
  transition:background .28s,border-color .12s}
.region-map .rt-name{font-size:10.5px;font-weight:700;line-height:1.1}
.region-map .rt-c{font-size:15px;font-weight:800;opacity:.9}
@media(hover:hover){.region-map .rt:hover{border-color:var(--brand-400)}}
.region-map .rt.is-active{background:#ff0201;color:#fff;border-color:#b30201;box-shadow:0 0 0 1px #b30201}
.region-map .rt.rt-zero{opacity:.45}
/* mobile: reflow to wrapping pills (inline grid-column/row become inert under flex) */
@media(max-width:760px){
  .region-map{display:flex;flex-wrap:wrap;gap:6px}
  .region-map .rt{flex:0 0 auto;flex-direction:row;gap:6px;min-height:0;padding:6px 11px}
}
/* region: heat-shaded clickable Poland map (replaces the tile cartogram) */
.region-map-svg{max-width:300px;margin-inline:auto}
.region-map-svg svg{display:block;width:100%;height:auto}
.voiv-region{stroke:var(--map-stroke);stroke-width:1.1;cursor:pointer;transition:fill .28s,stroke-width .12s,stroke .12s}
.region-map-svg a{outline:none}
.region-map-svg a:hover .voiv-region{stroke:var(--brand-600);stroke-width:1.8}
.region-map-svg a:focus-visible .voiv-region{stroke:var(--brand-700);stroke-width:2.2}
.voiv-region.is-active{stroke:#b30201;stroke-width:2.6;fill:#ff0201!important}  /* !important beats the inline heat fill */
/* opacity var: document CSS styles <use> clones and custom properties inherit
 * into them — the wheel's Region SCENE re-uses #pl-map-paths but zeroes the
 * count labels via --pv-mapnum (a selector cannot reach into use shadows) */
.voiv-count{font-size:52px;font-weight:800;fill:#1f2933;paint-order:stroke;stroke:#fff;stroke-width:5px;pointer-events:none;font-variant-numeric:tabular-nums;opacity:var(--pv-mapnum,1)}
/* Selected region (red fill) → white count, same schema as the active week cell. */
.region-map-svg a[aria-pressed="true"] .voiv-count{fill:#fff;stroke:#ff0201}
.explorer-summary{font-size:14.5px;color:var(--gray-700);margin:14px 0 0}
/* In the sticky bar the summary takes its own full-width row under the H2, so
 * the active filters and the count stay on screen while the list scrolls. */
.fb-summary .explorer-summary{flex:1 0 100%;margin:0;font-size:13.5px;line-height:1.45}
@media(max-width:640px){.fb-summary .explorer-summary{font-size:12.5px}}
/* Label for the results list — same treatment as DYSCYPLINA / REGION / TYDZIEŃ. */
.ex-lab-results{margin:34px 0 10px}
.explorer-summary strong{color:var(--text);font-variant-numeric:tabular-nums}
.wk.wk-dim{opacity:.5}
.explorer-controls .sport-tabs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
/* Explorer active chip sits on a LIGHT tint wash, so the label/count must be
   dark (white was illegible on pale disciplines); the icon keeps the tint. */
.explorer-controls .sport-tab.is-active{border-color:var(--tint);background:color-mix(in srgb,var(--tint) 14%,var(--surface));color:var(--text)}
.explorer-controls .sport-tab.is-active .sport-tab-icon{color:var(--tint)}
.explorer-controls .sport-tab.is-active .sport-tab-count{color:var(--text-muted);opacity:1}

/* ── DYSCYPLINA control ────────────────────────────────────────────────────
 * Region is a bare map and Termin a bare heat grid — both sit straight on the
 * page. This used to be a bordered card full of bordered pills, each wrapping a
 * 34px disc: three levels of rounding, and a different visual language from its
 * two neighbours. It now matches them — flat, dense, colour used as data.
 *
 * Markup is untouched. Everything below re-styles the classes renderFilterTab
 * and renderSportVTab already emit.
 *
 * SPECIFICITY: the panel is written .sport-vpanel.sport-tabs — both classes it
 * already carries — NOT .sport-vpanel alone. Further up there is
 * .explorer-controls .sport-tabs{display:flex}, which at (0,2,0) beats a single
 * class no matter how late it appears, so a lone .sport-vpanel rule silently
 * lost and the grid never applied on the explorer pages. Rules touching the
 * active chip go a level deeper still, to clear
 * .explorer-controls .sport-tab.is-active (0,3,0).
 *
 * NB: no backticks in these comments — the stylesheet is a TS template literal
 * and one would terminate it. */
.sport-tabs-control{display:flex;flex-direction:column;background:none;border:0;border-radius:0}

/* Sports: plain text tabs with an underline, mirroring Termin month headers,
 * which are already interactive labels. They flow inline and wrap naturally —
 * no fixed basis, because there is no box left for one to divide. */
/* Sports: heat cells on a 2x2 grid, reading exactly like a week cell or a
 * voivodship — background is --f, the shared hf()/heatFillRGB() ramp, so "busy"
 * looks the same orange in all three facets. Selected is #ff0201 with a
 * brand-700 ring, identical to .wg-active and .voiv-region.is-active. The old
 * underline is gone: a filled cell already carries the selected state, and a
 * rule under the row competed with the DYSCYPLINA label above it. */
.sport-vtabs{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;flex:0 0 auto;border-bottom:0}
.sport-vtabs>li{display:flex;min-width:0}
.sport-vtab{flex:1 1 auto;width:100%;display:flex;align-items:center;gap:.5rem;background:var(--f,var(--surface-2));border:0;border-bottom:2px solid transparent;border-radius:7px;padding:.5rem .6rem;color:#1f2933;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .28s,box-shadow .12s,transform .1s}
@media(hover:hover){.sport-vtab:hover{background:var(--f,var(--surface-2));color:#1f2933;box-shadow:0 0 0 2px var(--brand-500);transform:translateY(-1px);z-index:1}}
.sport-vtab-count{margin-left:auto;color:inherit;opacity:.62;font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums}
.sport-vtab-dot{color:var(--brand-500);font-size:.6rem;line-height:1}
/* Selected. Both the panel-switch button and the single-discipline <a> toggle,
 * and both go DEEPER than .explorer-controls .sport-tab.is-active (0,3,0) —
 * the toggle carries .sport-tab too, so that rule would otherwise repaint it
 * with the pale tint wash. */
.sport-vtabs button.sport-vtab[aria-selected="true"],
.sport-vtabs .sport-vtab.sport-vtab-toggle.is-active{background:#ff0201;color:#fff;border-bottom-color:transparent}
.sport-vtabs button.sport-vtab[aria-selected="true"] .sport-vtab-count,
.sport-vtabs .sport-vtab.sport-vtab-toggle.is-active .sport-vtab-count{color:#fff;opacity:.8}
.sport-vtabs button.sport-vtab[aria-selected="true"] .sport-vtab-dot,
.sport-vtabs .sport-vtab.sport-vtab-toggle.is-active .sport-vtab-dot{color:#fff}

/* All sport panels stack in ONE grid cell, so the container is always as tall
 * as the TALLEST panel and switching sports never moves the content below
 * (owner request — mirrors the mobile wheel's fixed panel area). Hidden panels
 * keep their footprint via visibility, not display: the [hidden] UA rule is
 * display:none, which would collapse them out of the measurement. The [hidden]
 * override is written .sport-vpanel.sport-tabs[hidden] (0,3,0) to out-rank
 * .explorer-controls .sport-tabs (0,2,0) — see the SPECIFICITY note above.
 * Mobile opts back out below: its panel area is already height-locked
 * (.pvw-body .sport-vpanels min-height) and was device-verified with
 * collapsing panels. */
.sport-vpanels{flex:1 1 auto;padding:0;display:grid}
.sport-vpanels>.sport-vpanel{grid-area:1/1}
.sport-vpanel.sport-tabs[hidden]{display:grid;visibility:hidden}
.pvw-body .sport-vpanel.sport-tabs[hidden]{display:none}
/* Disciplines: legend rows, two columns. The grid item is the <li>, so it and
 * the row inside both have to stretch — sizing only the row leaves it hugging
 * its own text and the columns do nothing. */
.sport-vpanel.sport-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem .9rem;align-content:start}
.sport-vpanel.sport-tabs>li{display:flex;min-width:0}
/* max-width caps the MEASURE of a row. The count is right-aligned so the
 * numbers form a scannable column, but in a wide container that pushed it
 * ~500px from its own label — two unrelated things at opposite edges — and
 * made the selected row a full-width slab. Capped, the pair stays readable
 * as a pair at any container width. */
.sport-vpanel.sport-tabs .sport-tab{flex:1 1 auto;min-width:0;max-width:15rem;display:flex;align-items:center;gap:.6rem;background:none;border:0;border-radius:7px;padding:.34rem .5rem;font-weight:600;font-size:.9rem;white-space:nowrap}
@media(hover:hover){.sport-vpanel.sport-tabs .sport-tab:hover{background:var(--surface-2);border-color:transparent}}
/* Selected: soft ground plus a bar in the discipline own colour, instead of
 * flooding the whole row with it. */
.sport-vpanel.sport-tabs .sport-tab.is-active{background:var(--surface-2);color:var(--text);box-shadow:inset 2px 0 0 var(--tint,var(--brand-500))}
/* The 34px disc becomes a 10px dot: the colour still identifies, and still
 * matches the race cards, on a tenth of the area. The icon goes with it — at
 * this size the colour and the name already do the identifying. */
.sport-vpanel.sport-tabs .sport-tab-icon{width:10px;height:10px;flex:0 0 10px;border-radius:9999px;background:var(--tint,var(--brand-500));display:block}
.sport-vpanel.sport-tabs .sport-tab-icon svg{display:none}
.sport-vpanel.sport-tabs .sport-tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sport-vpanel.sport-tabs .sport-tab-count{margin-left:auto;color:var(--text-muted);font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums}
.sport-vpanel.sport-tabs .sport-tab.is-active .sport-tab-count{color:var(--text-muted);opacity:1}
/* Zero this week: still listed and selectable, just out of the way. */
.sport-vpanel.sport-tabs .sport-tab.is-zero:not(.is-active){opacity:1}
.sport-vpanel.sport-tabs .sport-tab.is-zero:not(.is-active) .sport-tab-label,
.sport-vpanel.sport-tabs .sport-tab.is-zero:not(.is-active) .sport-tab-count{color:var(--text-muted);opacity:.6}
.sport-vpanel.sport-tabs .sport-tab.is-zero:not(.is-active) .sport-tab-icon{opacity:.35}

.sport-vpanel[hidden]{display:none}
@media(max-width:760px){
  .sport-vpanels{padding:10px}
}