: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:#625a4c;--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)}
/* the calendar's ONLY reference to news (portal 2026-09-07): one quiet line */
.hero-news{margin:.85rem 0 0;font-size:.9rem;color:rgba(255,255,255,.66)}
.hero-news a{color:rgba(255,255,255,.9);text-decoration:underline;text-underline-offset:.15em}
.hero-news a:hover{color:#fff}
.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-yr{font-size:.72em;opacity:.75;margin-left:1px}
/* 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}

/* Termin = month calendar (items 18 + 30, owner 2026-09-16): three columns from
   the current month, count + heat per month (the wheel's hf() ramp, dark-aware
   through the same --heat tokens as the cells), red = picked, dashed + lock =
   past the anonymous horizon. "Miesiące | Dni" reuses the Region island's
   .ex-geo-sw pill; the day grid below is unchanged. */
.ter-ctl{display:flex;flex-direction:column;align-items:center;gap:8px}
.ter-sw{margin:0}
.ex-geo-b:disabled{opacity:.4;cursor:default}
.mcal{display:grid;grid-template-columns:repeat(3,66px);gap:4px}
.mcal[hidden]{display:none}
.mc{position:relative;font:inherit;border:0;border-radius:8px;padding:5px 2px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;background:color-mix(in srgb,var(--f,var(--surface-2)) var(--heat-pct,100%),var(--heat-mix,#fff));color:var(--cell-ink,#1f2933);font-size:12.5px;font-weight:800;line-height:1.1;transition:background .28s,box-shadow .12s,transform .1s}
.mc-m{display:flex;align-items:baseline;gap:3px}
.mc-y{font-size:8px;font-weight:700;opacity:.75;letter-spacing:.04em}
.mc-n{font-size:11px;font-weight:800;opacity:.75;font-variant-numeric:tabular-nums;display:flex;align-items:center;min-height:13px}
.mc-n svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mc.mc-zero{background:var(--surface-2);color:var(--text-muted)}
@media(hover:hover){.mc:hover{box-shadow:0 0 0 2px var(--brand-500);transform:translateY(-1px);z-index:1}}
.mc.is-on{background:#ff0201;color:#fff}
.mc.is-on .mc-n{opacity:.85}
.mc.mc-lock{background:transparent;border:1px dashed var(--border);color:var(--text-muted);opacity:.75;text-decoration:none}
.mc.mc-lock:hover,.mc.mc-lock:focus-visible{opacity:1;color:var(--brand-700)}
@media(max-width:640px){.mcal{grid-template-columns:repeat(3,62px)}}

/* 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}
/* heat mixed through the same --heat tokens as the month cells, ink from
   --cell-ink — in dark mode a faded light cell with near-white ink hid the
   day number (owner 2026-09-17); a day without starts keeps the muted ink
   instead of an opacity fade */
.dg-cell{position:relative;width:34px;height:34px;border-radius:6px;background:color-mix(in srgb,var(--f,var(--surface-2)) var(--heat-pct,100%),var(--heat-mix,#fff));display:flex;align-items:center;justify-content:center;font:inherit;border:0;cursor:pointer;color:var(--cell-ink,#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}
/* a day without starts sits on the plain surface (owner 2026-09-17: the mixed
   zero-heat grey with muted ink was unreadable in dark mode) */
.dg-cell.dg-zero{background:var(--surface-2);color:var(--text-muted)}
.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)}
/* pointer devices only: on touch the emulated :hover sticks to the last tapped card and
 * made the first card "move" after a wheel gesture (owner 2026-09-08) */
@media(hover:hover){.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){
  /* owner 2026-09-09/10 (priority): compact cards were too small on the phone —
     the list pulls back most of the container's 1.25rem side padding (a .5rem
     gutter stays, "a bit narrower, not edge to edge"), half the gap between
     cards; the sticky week header stretches edge to edge so it covers the
     cards while scrolling. */
  .event-list{grid-template-columns:1fr;max-width:none;margin:0 -.75rem;gap:.5rem}
  .event-row{border-radius:.5rem}
  .day-sep{padding:0 .75rem;margin:.3rem 0 -.2rem}
  .fb-summary{margin-left:-1.25rem;margin-right:-1.25rem;padding-left:.5rem;padding-right:.5rem}
  .rail{gap:.75rem}
  .rail-item{flex-basis:calc(100% - 2.75rem)}
}

.newev-static{margin:1.25rem 0 0;text-align:center;font-size:.95rem;color:var(--text-muted)}
.newev-chip{display:inline-block;margin-left:.35rem;padding:.45rem 1rem;border-radius:999px;border:1.5px solid var(--brand-500);color:var(--brand-700);background:var(--surface);font-weight:700;text-decoration:none}
.newev-chip:hover{background:var(--brand-500);color:#fff}
html.o-auth .newev-static{display:none}
.events-footer{margin:1.75rem 0 0;text-align:center}
.events-more{font:inherit;font-size:.95rem;font-weight:700;padding:.7rem 1.4rem;border-radius:999px;border:1.5px solid var(--brand-500);background:var(--surface);color:var(--brand-700);cursor:pointer}
.events-more:hover{background:var(--brand-500);color:#fff}
.events-more[hidden]{display:none}
/* day separators (owner 2026-09-09): a rule with only the distance in days on the right */
.event-row:nth-child(n+16){content-visibility:auto;contain-intrinsic-size:auto 150px}
.day-sep{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;margin:.15rem 0 -.45rem;list-style:none;opacity:.75}
.day-sep-l{flex:1;height:1px;background:var(--border)}
.day-sep-k{font-size:.72rem;font-weight:600;color:#5b3a1e;background:#f3e7d9;border-radius:999px;padding:.1rem .55rem;white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
html.dark .day-sep-k{color:#e8c9a8;background:#3a2c20}
.day-sep-k q{font-style:italic;font-weight:500;quotes:"„" "”"}
.day-sep-k.is-free{opacity:.55;font-weight:500;background:transparent;border:1px dashed var(--border);color:var(--text-muted);pointer-events:auto}
.day-sep-k.is-free:hover{opacity:1}
.day-sep-t{font-size:.7rem;font-weight:600;color:var(--text-muted);white-space:nowrap}
.sort-sw{margin-left:auto;display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px;text-transform:none;letter-spacing:0}
.sort-b{font:inherit;font-size:.74rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text-muted);background:transparent;border:0;border-radius:999px;padding:.28rem .7rem;cursor:pointer}
.sort-b.is-on{background:var(--brand-500);color:#fff}
.ev-when{display:block;text-align:right;font-size:.7rem;font-weight:700;color:var(--text-muted);background:var(--surface-2);border-top:1px solid var(--border);padding:.18rem .6rem;letter-spacing:.02em}
.ev-km{display:block;text-align:right;font-size:.7rem;font-weight:800;color:#0f766e;background:var(--surface-2);border-top:1px solid var(--border);padding:.18rem .6rem;letter-spacing:.02em}
html.dark .ev-km{color:#3fb48e}
.day-sep[hidden]{display:none}
/* cancelled rows: the same card, greyed, a red stamp, no link */
.event-row.is-cancelled .event-link{position:relative;display:block;cursor:default}
.event-row.is-cancelled img{filter:grayscale(.6);opacity:.55}
.event-stamp{position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(-8deg);font-weight:800;font-size:.95rem;letter-spacing:.12em;color:#fff;background:#ff0201;padding:.25rem .75rem;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.25);line-height:1.3}
/* giveaway banner inside the promoted rail */
.rail-giveaway{display:grid;grid-template-columns:120px 1fr;gap:.9rem;align-items:center;margin:0 0 1rem;padding:.7rem .9rem;border-radius:.85rem;background:linear-gradient(105deg,var(--brand-500),var(--brand-600));color:#fff;text-decoration:none;line-height:1.3}
.rail-giveaway[hidden]{display:none}
.rg-card{width:120px;height:auto;border-radius:.5rem;display:block;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.rg-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.rg-k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.9}
.rg-t{font-size:1rem;font-weight:800}
.rg-c{font-size:.85rem;opacity:.95}
.rg-b{display:inline-block;margin-top:.3rem;background:#fff;color:var(--brand-600);font-size:.82rem;font-weight:800;padding:.25rem .7rem;border-radius:999px;width:max-content}
@media(max-width:600px){.rail-giveaway{grid-template-columns:88px 1fr}.rg-card{width:88px}}
.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:underline;text-underline-offset:.15em}   /* underline: link-in-text-block — colour alone was 1.46:1 vs the paragraph */

@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}
.exw-lead .ter-ctl{width:fit-content;margin-inline:auto}
/* 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}
/* Termin content centers in the collapsed-card mount too (owner 2026-09-01):
 * the panels are moved DOM nodes, so each mount needs its own centering —
 * these mirror the .exw-lead rules above. */
.exw-card-b .week-grid{justify-content:center}
.exw-card-b .ter-ctl{width:fit-content;margin-inline:auto}
.exw-card-b #day-grid{width:fit-content;margin-inline:auto}
.exw-card-b .ex-cat{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-lead .ex-dim,.exw-card{will-change:opacity,transform}
.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:flex-start;padding-top:10px}
.exw-wheel-svg{width:100%;max-width:340px;height:auto;display:block;transform:translateZ(0)}
/* ── 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);transform:translateZ(0)}  /* 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);will-change:opacity}
.pvw-mask{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;transform:translateZ(0)}
.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}
/* inside the wheel the day grid is one step smaller (owner 2026-09-17: a
   six-row month — January 2027 — touched the ring): 28px cells, 3px gaps,
   tighter head — the month calendar and the desktop grid keep their size */
/* both Termin modes start at the same height (owner 2026-09-17, like the
   Region island): the panel fills the body, the switch sits at the top; the
   month calendar centres in the space below it, the day grid stays under the switch */
/* geometry (owner 2026-09-17, second pass): the switch sits a little lower
   (7% of the wheel), the month calendar is centred on the WHEEL's centre (the
   panel spans the body, so its own centre is the wheel's), and the day grid
   centres between the switch and the count line (the bottom padding leaves
   the count's band out of the flex centring) */
.pvw-body .ex-when{height:100%;box-sizing:border-box;display:flex;flex-direction:column}
.pvw-body .ter-ctl{position:relative;gap:5px;flex:1 1 auto;justify-content:flex-start;padding-top:calc(var(--pvw,400px)*.07);padding-bottom:calc(var(--pvw,400px)*.09);box-sizing:border-box}
.pvw-body .mcal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
.pvw-body #day-grid{margin:auto auto}
.pvw-body .dg-head{margin-bottom:3px}
.pvw-body .dg-grid{grid-template-columns:repeat(7,28px);gap:3px}
.pvw-body .dg-cell{width:28px;height:28px;font-size:12.5px;border-radius:5px}
.pvw-body .dg-dow{font-size:9px;padding-bottom:0}
.pvw-body .dg-label{font-size:11.5px;min-width:8ch}
.pvw-body .ter-ctl{margin:0 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:28px;height:28px;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}

/* 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}
/* phone: the sticky header spans edge to edge; its text and buttons keep the
   same .5rem gutter as the cards (owner 2026-09-10) — this rule comes after
   the padding reset above, so it wins at equal specificity */
@media (max-width:720px){html.js[data-pv="mobile"] .fb-summary{padding-left:.5rem;padding-right:.5rem}}
/* 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 .pvw-clear{display:flex}
.pvw-clear svg{width:15px;height:15px}
.pvw-clear.idle{opacity:.45;pointer-events:none}
/* ── Announcement cards (message center family, shared with /aktualnosci) ── */
.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 .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. */
/* Focus mode is BOTH versions since 2026-08-31 (desktop round): the rules
 * below are mode-agnostic; anchoring off everywhere for the same unpin
 * compensation reason as mobile (Chrome double-corrects otherwise). */
html.js{overflow-anchor:none}
html.js.pv-focus .site-header{display:none}
html.js.pv-focus .kawa{display:none}   /* the coffee strip leaves with the header in focus mode (owner 2026-09-11) */
html.js.pv-focus .stats-hero{display:none}
html.js.pv-focus .section-rail{display:none}
html.js.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.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.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}
/* Desktop focus (owner 2026-08-31): ONLY the wheel + the selected dimension's
 * panel stay on top — the collapsed dimension summary cards hide, and the
 * sticky block shrinks to the exw-main row. */
html.js[data-pv="desktop"].pv-focus .exw-cards{display:none}
html.js[data-pv="desktop"].pv-focus .explorer-controls.exw{gap:0}
/* flow == stuck on desktop too: .section-results keeps .4rem top padding
 * outside the mobile media query — zero it while focused (round-3 rule) */
html.js.pv-focus .section-results{padding-top: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{transform-origin:100px 100px}
.exw-qlbl{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}
/* item 18 C: tiles are the no-JS stand-in; with JS the map asset replaces them before paint */
html.o-js .region-map[data-swap]{visibility:hidden}
.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. */
/* item 30 (owner 2026-09-16): the OPEN sport tab reads as a tab — its own
   tint with a red underline — not as a pressed chip; a real selection (the
   .is-active single-discipline toggle) is the only red fill. */
/* the open tab takes the PANEL's neutral surface (owner 2026-09-16: the heat
   tint read as "selected") — heat stays on the closed tabs and on the chips */
.sport-vtabs button.sport-vtab[aria-selected="true"]{background:var(--surface);color:var(--text);border-bottom:3px solid #ff0201;border-radius:7px 7px 2px 2px;box-shadow:inset 0 0 0 1px var(--border)}
@media(hover:hover){.sport-vtabs button.sport-vtab[aria-selected="true"]:hover{background:var(--surface);color:var(--text)}}
.sport-vtabs .sport-vtab.sport-vtab-toggle.is-active{background:#ff0201;color:#fff;border-bottom-color:transparent}
.sport-vtabs .sport-vtab.sport-vtab-toggle.is-active .sport-vtab-count{color:#fff;opacity:.8}
.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}
}
/* ── Portal navigation (shared module; header links + mobile tab bar) ──── */

.pnav{display:flex;align-self:stretch;margin-left:1.5rem;margin-right:auto;gap:.15rem}
.pnav-a{position:relative;display:flex;align-items:center;padding:0 .7rem;color:var(--header-text);opacity:.78;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.pnav-a:hover{opacity:1}
.pnav-a.is-on{opacity:1}
.pnav-a.is-on::after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand-500)}
.pnav-badge{display:inline-block;margin-left:.35rem;min-width:1.1em;padding:0 .35em;border-radius:999px;background:#f0141e;color:#fff;font-size:.7rem;font-weight:800;line-height:1.5;text-align:center;vertical-align:middle}
.pnav-badge[hidden]{display:none}
.ptab{display:none}
@media (max-width:760px){
  .pnav{display:none}
  .nav-cta{display:none} /* "Konto" lives in the tab bar (owner 2026-09-07) */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .ptab{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;align-items:stretch;height:calc(58px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(0,0,0,.06)}
  .ptab-a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-muted);font-size:.68rem;font-weight:700;text-decoration:none}
  .ptab-a svg{width:22px;height:22px}
  .ptab-a.is-on{color:var(--brand-700)}
  .ptab .pnav-badge{position:absolute;top:6px;left:calc(50% + 6px);margin:0}
  html.pv-focus .ptab{display:none}
  html.pv-focus body{padding-bottom:0}
}
/* phase 3 islands: logged-in chips on the explorer ("Twój widok", "Obserwowane") */
.isl-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .25rem}
.isl-chip{font:inherit;font-size:.82rem;font-weight:700;padding:.3rem .75rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.isl-chip[aria-pressed="true"]{background:var(--brand-500);border-color:var(--brand-500);color:#fff}
.isl-chip .isl-n{font-size:.72rem;font-weight:800;opacity:.85}
/* change-report form (feature-gap item 5): under the calendar list and on event pages, logged-in only */
.isl-newev{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:1rem 0 .5rem;font-size:.9rem;color:var(--text-muted)}
.isl-newev-b[aria-pressed="true"]{background:var(--brand-500);border-color:var(--brand-500);color:#fff}
.isl-report{flex-basis:100%;display:flex;flex-direction:column;gap:.5rem;max-width:34rem;margin:.5rem 0 0;padding:.9rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.isl-report[hidden]{display:none!important}
.isl-report-h{margin:0;font-size:.9rem;font-weight:700;color:var(--text)}
.isl-report-in,.isl-report-ta{font:inherit;font-size:16px;width:100%;box-sizing:border-box;padding:.45rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}
.isl-report-ta{resize:vertical;min-height:4.5rem}
.isl-report-in:focus,.isl-report-ta:focus{outline:2px solid var(--brand-500);outline-offset:1px}
.isl-report-row{display:flex;gap:.5rem;flex-wrap:wrap}
.isl-btn{font:inherit;font-size:.9rem;font-weight:700;padding:.45rem 1rem;border-radius:999px;border:1px solid var(--brand-500);background:var(--brand-500);color:#fff;cursor:pointer}
.isl-btn[disabled]{opacity:.6;cursor:default}
.isl-btn-2{background:var(--surface);color:var(--text);border-color:var(--border)}
.isl-report-msg{margin:0;font-size:.88rem;font-weight:600;color:#b91c1c}
.isl-report-msg.is-ok{color:#047857}
.isl-report-kawa{color:var(--brand-700);font-weight:700;text-decoration:underline}
.evt-report[aria-pressed="true"]{background:var(--brand-500);color:#fff;border-color:var(--brand-500)}
.evt-cta .isl-report{margin-top:.75rem}

/* Aktualności for recognised visitors (feature-gap item 7): detailed change list + unread line */
.news-read{display:flex;align-items:center;justify-content:space-between;gap:.5rem .75rem;flex-wrap:wrap;padding:.7rem 1rem;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--text-muted)}
.news-read-t{font-weight:600}
.news-det{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.news-det-a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;color:inherit;text-decoration:none}
a.news-det-a:hover .news-det-n{text-decoration:underline}
.news-det-k{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.12rem .45rem;border-radius:999px;background:var(--surface-2);color:var(--text-muted);white-space:nowrap}
.news-det-k.is-new{background:#d1fae5;color:#065f46}
.news-det-k.is-signup{background:#ffedd5;color:#9a3412}
.news-det-img{height:25px;width:auto;border-radius:4px;vertical-align:middle}
.news-det-k.is-cancel{background:#fee2e2;color:#991b1b}
.news-det-k.is-date,.news-det-k.is-place{background:#ede9fe;color:#5b21b6}
.news-det-k.is-dist,.news-det-k.is-ms{background:#fef3c7;color:#92400e}
.news-det-n{font-weight:700;color:var(--text)}
.news-det-fol{color:#ff0201;font-weight:800}
.news-det-b{flex-basis:100%;font-size:.86rem;color:var(--text-muted)}
/* "Tagi" = second mode of the Kategoria dimension (logged-in island), all tags inside the wheel */
.ex-tagsw{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}
@media(hover:hover){.ex-tagsw:hover{background:var(--surface-2)}}
.ex-tagsw.is-active{background:#ff0201;color:#fff}
.ex-tags{width:100%}
/* in the wheel: back link at the top, the list centred between it and the count below (owner 2026-09-08) */
.pvw-body .ex-what2.tags-on .ex-tags{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.pvw-body .ex-what2.tags-on .ex-tags-list{margin:auto}
/* the list centres between "← kategorie" and the COUNT line, not the panel's
   bottom edge (owner 2026-09-17): the count's band is kept out of the centring */
.pvw-body .ex-what2.tags-on .ex-tags{padding-bottom:calc(var(--pvw,400px)*.0625)}
/* [hidden] must beat .ex-cat{display:flex} while the tags mode is on */
#cat-tabs[hidden],.ex-tags[hidden]{display:none!important}
.ex-tags-head{display:flex;justify-content:center;margin:0 0 .7rem}
.ex-tags-list{list-style:none;padding:0 0 .4rem;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .3rem;max-width:calc(var(--pvw,400px)*.75)} /* .75: clear of the wheel's ‹ › arrows */
.ex-tag{font:inherit;font-size:.76rem;font-weight:700;line-height:1.15;padding:.24rem .52rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.28rem}
.ex-tag-n{font-size:.7rem;font-weight:800;opacity:.75}
.ex-tag[aria-pressed="true"]{background:#ff0201;border-color:#ff0201;color:#fff}
.ex-tag.is-zero:not([aria-pressed="true"]){opacity:.45}
/* tag heat: tint follows the counter share (--tn 0..1), selected stays red */
.ex-tags-list .ex-tag:not([aria-pressed="true"]){background:color-mix(in srgb,#f97316 calc(var(--tn,0)*55%),var(--surface));border-color:color-mix(in srgb,#f97316 calc(var(--tn,0)*70%),var(--border))}
/* tags mode sits at the top of the wheel body (owner 2026-09-08) */
.pvw-body .ex-what2.tags-on{height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:.25rem;overflow-y:auto;scrollbar-width:none}
.ex-tag[aria-pressed="true"] .ex-tag-n{opacity:.9}
@media(hover:hover){.ex-tag:hover{border-color:var(--brand-500)}}
.exw-card .ex-tags-list{justify-content:flex-start;max-width:none}
.exw-card .ex-tags-head{justify-content:flex-start}
/* "Miejscowości" = second mode of the Region dimension (logged-in island): Mapa | Miejscowości switch, towns panel inside the wheel */
.ex-geo-sw{display:inline-flex;margin:0 auto;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--surface)}
.ex-where{display:flex;flex-direction:column;align-items:center}
/* both Region modes start at the same height: the panel fills the body, content from the top */
.pvw-body .ex-where{height:100%;box-sizing:border-box;justify-content:flex-start;padding-top:.4rem}
.ex-where .region-map-svg,.ex-where .region-map{margin-top:.45rem}
.ex-geo-b{font:inherit;font-size:.74rem;font-weight:800;padding:.22rem .7rem;border:0;background:none;color:var(--text);cursor:pointer;line-height:1.2}
.ex-geo-b[aria-pressed="true"]{background:#ff0201;color:#fff}
.region-map-svg[hidden],.region-map[hidden],.ex-town[hidden]{display:none!important}
.ex-town{width:100%;max-width:calc(var(--pvw,400px)*.76);margin:1.2rem auto 0;display:flex;flex-direction:column;gap:1.2rem;align-items:stretch}
.ex-town .ex-tag{font-size:.86rem;padding:.32rem .7rem}
.ex-town-r .ex-tag{font-size:.78rem;padding:.26rem .52rem}
.ex-town-r{flex-wrap:nowrap}
.ex-town-inw{position:relative}
.pvw-body .ex-town-inw{margin:0 1.3rem} /* clear of the wheel's ‹ › arrows */
.ex-town-in{padding-right:2rem!important}
.ex-town-x{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);border:0;background:none;font:inherit;font-size:.95rem;font-weight:800;line-height:1;padding:.25rem .4rem;color:var(--text);opacity:.6;cursor:pointer;border-radius:6px}
.ex-town-x:hover{opacity:1}
.ex-town-x[hidden]{display:none!important}
/* 16px: iOS Safari zooms the page into any focused input with a smaller font (owner 2026-09-08) */
.ex-town-in,.ex-town-q{font:inherit;font-size:16px;width:100%;box-sizing:border-box;padding:.2rem .55rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}
.ex-town-in:focus,.ex-town-q:focus{outline:2px solid var(--brand-500);outline-offset:1px}
.ex-town-sug{position:absolute;left:0;right:0;top:100%;z-index:20;list-style:none;margin:2px 0 0;padding:.2rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.14);text-align:left;max-height:170px;overflow:auto}
.ex-town-s{font:inherit;font-size:.8rem;width:100%;text-align:left;padding:.3rem .5rem;border:0;background:none;color:var(--text);cursor:pointer;border-radius:6px}
.ex-town-s:hover,.ex-town-s:focus{background:var(--surface-2)}
.ex-town-chips,.ex-town-r{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .32rem}
.ex-town-r{align-items:center}
.exw-card .ex-town{max-width:none}
.exw-card .ex-town-chips,.exw-card .ex-town-r{justify-content:flex-start}
.exw-card .ex-tags-head{justify-content:flex-start}
.nav-cta .pnav-badge{margin-left:.4rem}
.nav-ava{width:22px;height:22px;border-radius:50%;vertical-align:-6px;margin-right:.45rem;background:#f3f4f6}
.ptab-ava{width:22px;height:22px;border-radius:6px}
html.pv-focus .isl-bar{display:none}
/* "Obserwowane" on the wheel (bottom-left, logged-in only; same family as .pvw-pin) */
.pvw-fol{display:flex;position:absolute;bottom:2px;left: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)}
.pvw-fol svg{width:16px;height:16px}
/* "Twój widok" — top-right, under the focus pin (owner 2026-09-17); same family as .pvw-fol */
.pvw-view{display:flex;position:absolute;top:42px;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 10px rgba(0,0,0,.18)}
.pvw-view svg{width:17px;height:17px}
.pvw-view[aria-pressed="true"]{background:#ff0201;box-shadow:0 3px 12px rgba(255,2,1,.4)}
.pvw-fol[aria-pressed="true"]{background:#ff0201;box-shadow:0 3px 12px rgba(255,2,1,.4)}
.pvw-fol[aria-pressed="true"] svg{fill:#fff}
.pvw-fol-n{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#fff;color:#ff0201;font-size:10px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}