/* MatchLens (formerly ATP Edge) v3 (task #43), from v2 — "Neon Stadion" with a sport switcher (variant S6).
   Tokens first; every colour below is one of these. */

:root {
  --bg: #0a0f14;
  --bg-2: #0d141b;
  --surface: #111a23;
  --surface-2: #16212c;
  --border: #1f2c38;
  --text: #e8edf2;
  --text-2: #c9d2db;
  --text-muted: #8d9aa8;
  --green: #22e37b;
  --green-ink: #04230f;
  --green-deep: #0f3a26;
  --green-nav: #164a31;
  --green-nav-line: #22744a;
  --warn-bg: #1d1708;
  --warn-line: #5a4510;
  --warn-text: #f1d58a;
  --miss: #ff7b72;

  /* light tip cards */
  --card: #f3f6f9;
  --card-line: #dfe5ec;
  --card-text: #121a23;
  --card-muted: #4f5b68;
  --bar-fav: #17a65a;
  --bar-rest: #dfe5ec;

  /* Every colour below the tokens is one of these (task #97); the palettes at the end of this file
     redefine them. The values here are the classic look. */
  --text-strong: #fff;
  --text-soft: #dbe3ea;
  --text-prose: #d5dde5;
  --text-3: #aeb9c4;
  --placeholder: #6f7c89;
  --social: #e3e9ef;
  --border-hover: #2e4050;
  --green-hover: #3cf08e;
  --track: #2a3642;
  --duel-rest: #4b5a69;
  --slight: #9be8bd;
  --tie: #f5a524;
  --hit-bg: #14452c;
  --miss-bg: #4a1c1a;
  --head-top: #0f1922;
  --head-bottom: #0c1219;
  --hero-bg: #0c1219;
  --hero-text: #fff;
  --hero-sub: #d5dde5;
  --hero-accent: var(--green);
  --card-chip: #e4e8ed;
  --card-chip-text: #3d4752;
  --card-accent: #0d6a35;
  --hit-soft: #dcf3e5;
  --hit-soft-text: #0d6a35;
  --miss-soft: #f8e6e3;
  --miss-soft-text: #8a3b33;
  --miss-chip: #fde2e0;
  --miss-chip-text: #a3261d;
  --mocne-bg: #d3f2df;
  --mocne-text: #0d6a35;
  --std-bg: #dbe8f7;
  --std-text: #1d4f86;
  --split-x: #c9d4df;
  --split-draw: #6cc995;
  --on-fav: #fff;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;

  --max: 1320px;
  --head-h: 132px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
p, h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--green); color: var(--green-ink); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--green); color: var(--green-ink); }
/* No neon glow under buttons, the logo or the menu's line (#231 E1 A, owner 11.10). */
.btn-primary:hover { background: var(--green-hover); transform: translateY(-1px); }
.btn-ghost { background: var(--surface-2); border-color: var(--border); color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; }
.btn-ghost:hover { border-color: var(--border-hover); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 12px; }

.icon-btn {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--border-hover); }

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--max); margin: 0 auto; height: 76px; padding: 0 24px;
  display: flex; align-items: center; gap: 24px;
}
.menu-btn { display: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 40px; height: 40px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font: italic 800 30px/1 var(--display); color: var(--text-strong); }
.brand-name em { font-style: italic; color: var(--green); }
.brand-tag { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }

.topnav { --nav-px: 14px; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topnav a { position: relative; padding: 10px var(--nav-px); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.topnav a:hover { color: var(--text-strong); }
.topnav a[aria-current="page"] { color: var(--green); font-weight: 600; }
.topnav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--nav-px); right: var(--nav-px); bottom: -2px; height: 3px;
  border-radius: 3px; background: var(--green);
}
.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: 12px; }

/* ---------- sport bar (desktop / tablet) ---------- */
.sportbar { border-top: 1px solid var(--border); background: var(--bg-2); --seam: var(--bg-2); }
.sportbar-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.sport-btn {
  flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 11px; height: 66px; padding: 0 14px;
  border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--text-3); font: 700 23px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sport-btn svg { width: 28px; height: 28px; }
.sport-btn:hover { color: var(--text-strong); }
.sport-btn[aria-current="page"] { color: var(--text-strong); border-bottom-color: var(--green); }
.sport-btn[aria-current="page"] .sp-line { stroke: var(--green); }
.sport-soon { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--border); color: var(--text-muted); }
/* "beta" (task #236 pkt 8): NHL and MLB until 100 settled picks of ours; a quiet outlined tag, the warning colour like "mała próbka". */
.beta-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 3px 6px; border: 1px solid currentColor; border-radius: 999px; font: 700 10.5px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--warn-text); white-space: nowrap; vertical-align: middle; cursor: help; }
.bottom-btn { position: relative; }
/* The phone's bottom bar has no room for the word: a small round β on the icon's corner (the word stays in the text for a screen reader, the title says why). */
.bottom-btn .beta-tag { position: absolute; top: 8px; right: 7px; width: 15px; height: 15px; margin: 0; padding: 0; justify-content: center; font-size: 0; background: var(--bg-2); }
.bottom-btn .beta-tag::after { content: "β"; font: 700 11px/1 var(--font); text-transform: none; }
.more-menu .beta-tag { margin-left: 8px; }

/* ---------- ticker ---------- */
.ticker { background: var(--bg-2); border-bottom: 1px solid var(--border); overflow: hidden; }
.ticker-inner {
  max-width: var(--max); margin: 0 auto; padding: 9px 24px;
  display: flex; gap: 24px; white-space: nowrap; font-size: 13px; color: var(--text-3);
}
.ticker-label { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green); flex: none; }
/* The track holds the list twice; sliding it by exactly half loops without a seam. */
.ticker-viewport {
  flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent);
}
.ticker-track { display: flex; width: max-content; }
.ticker-track.is-moving { animation: ticker var(--ticker-dur, 40s) linear infinite; }
.ticker-viewport:hover .ticker-track, .ticker-viewport:focus-within .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.tick { display: inline-flex; gap: 6px; padding-right: 28px; color: var(--text-3); }
a.tick:hover { color: var(--text-strong); }
.tick { align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .ticker-viewport { overflow-x: auto; scrollbar-width: none; }
}

/* ---------- layout ---------- */
.layout {
  flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 24px 24px 48px;
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px;
}

/* ---------- sidebar ---------- */
.sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: calc(var(--head-h) + 24px); align-self: start; }
.sidenav { display: flex; flex-direction: column; gap: 6px; }
.sidenav a {
  display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px;
  border-radius: var(--r); color: var(--text-2); font-weight: 500; border: 1px solid transparent;
}
.sidenav a svg { width: 22px; height: 22px; }
.sidenav a:hover { background: var(--surface); }
.sidenav a[aria-current="page"] { background: var(--green-nav); border-color: var(--green-nav-line); color: var(--text-strong); font-weight: 600; }
.sidenav a[aria-current="page"] svg { color: var(--green); }

/* ---------- main ---------- */
.main { min-width: 0; }
.view { display: flex; flex-direction: column; gap: 22px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff;
}
.avatar.is-fav { box-shadow: 0 0 0 2px var(--green); }

/* ---------- notice ---------- */
.notice { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-text); font-size: 14px; }
.notice svg { color: var(--warn-text); }

/* ---------- section head + pills ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.section-head h2 { font: 700 30px/1.1 var(--display); color: var(--text-strong); }
.home-note { color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 760px; margin: -4px 0 4px; }
/* The day the list shows (task #273): a phone only, where the strip of days scrolls off the screen. */
.day-now { display: none; }
@media (max-width: 720px) {
  .day-now:not([hidden]) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: -6px 0 -6px; padding: 8px 12px; border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: var(--r-sm); background: var(--surface); font-size: 15px; color: var(--text-2); }
  .day-now b { color: var(--text-strong); font-weight: 800; }
  .day-now a { color: var(--green); font-weight: 700; white-space: nowrap; }
}
.link-more { color: var(--green); font-weight: 600; font-size: 14px; }
.link-more:hover { text-decoration: underline; }

/* ---------- tip cards (split probability bar) ---------- */
.tips { display: flex; flex-direction: column; gap: 8px; }
.tips-status, .tips-empty { color: var(--text-muted); padding: 32px 24px; text-align: center; border: 1px dashed var(--border); border-radius: var(--r); }

  
 

.split { display: flex; height: 24px; border-radius: 6px; overflow: hidden; font-weight: 800; font-size: 12.5px; line-height: 24px; font-variant-numeric: tabular-nums; }
.split > span { padding: 0 10px; white-space: nowrap; background: var(--bar-rest); color: var(--card-muted); }
.split > span:last-child { text-align: right; }
.split > span.is-fav { background: var(--bar-fav); color: var(--on-fav); }
/* Football: home win, draw, away win. The draw is grey-blue, or a lighter green when the pick
   is "or draw"; every segment is wide enough for its share (threeBar in v2.js). */
.split-3 > span { padding: 0; text-align: center; overflow: hidden; }
.split-3 > span:first-child { text-align: left; padding-left: 10px; }
.split-3 > span:last-child { text-align: right; padding-right: 10px; }
.split-3 > span.is-x { background: var(--split-x); color: var(--card-chip-text); }
.split-3 > span.is-fav.is-draw { background: var(--split-draw); }

.m-head .split-3 { height: 30px; line-height: 30px; }

.chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
/* "Nierozegrany (why)" carries a sentence from the settle note: it wraps instead of widening a phone page. */
.chip.chip-pass { white-space: normal; }
.chip-hit {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800;
  padding: 6px 14px; background: var(--hit-soft); color: var(--hit-soft-text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hit-soft-text) 30%, transparent);
}
.chip-miss { background: var(--miss-chip); color: var(--miss-chip-text); }
.chip-pass { background: var(--card-chip); color: var(--card-chip-text); }
.chip-open { background: var(--card-chip); color: var(--card-chip-text); }

/* The result marks (task #177, set E "Kreska" of the mockup v3-znaki; v3.js resMark): one drawing
   per state, coloured by the state; in a chip they take the chip's text colour. 16 px unless the
   place says otherwise; in a list larger than the old ✓ ✗ (task #192: they were small and pale). */
.rmk { width: var(--rmk, 16px); height: var(--rmk, 16px); display: inline-block; flex: none; vertical-align: -.2em; overflow: visible; }
.rmk.st-hit { color: var(--hit); }
.rmk.st-miss { color: var(--miss); }
.rmk.st-void, .rmk.st-open { color: var(--text-muted); }
.chip .rmk { --rmk: 14px; color: inherit; margin-right: 5px; }
.chip-hit .rmk { --rmk: 16px; margin-right: 0; }
.tick .rmk { --rmk: 14px; }
.pick-key .rmk { --rmk: 14px; }
.th-mk { white-space: nowrap; }
.rec-table .rmk { --rmk: 13px; margin-right: 5px; }
.check-mk { display: flex; justify-content: center; }
.row-go .rmk { --rmk: 18px; }

.tier-tag { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--card-chip); color: var(--card-chip-text); }
.tier-tag.tier-vip { background: var(--green); color: var(--green-ink); }
.tier-tag.tier-mocne { background: var(--mocne-bg); color: var(--mocne-text); }
.tier-tag.tier-standard { background: var(--std-bg); color: var(--std-text); }

/* Typy: live picks and the archive as two tabs; both lists paged ten at a time. */
#archive-section { display: flex; flex-direction: column; gap: 16px; }
#archive-section[hidden], .view-tabs[hidden] { display: none; }
.view-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.view-tab {
  padding: 10px 16px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none;
  font-weight: 700; font-size: 15px; color: var(--text-muted); cursor: pointer;
}
.view-tab:hover { color: var(--text-strong); }
.view-tab[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--green); }

/* Wyniki (task #246, the owner's choice from mockup v3-wyniki-statystyki): the record (Bilans) and the picks
   (Typy) on one page, one of them at a time behind the switch below. "Wszystkie" and the sports are chips above it. */
.res-sports { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; margin-bottom: 18px; padding-bottom: 2px; }
.res-sports::-webkit-scrollbar { display: none; }
.res-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none;
}
.res-chip small { font-weight: 500; font-size: inherit; color: var(--text-muted); }
.res-chip:hover { border-color: var(--border-hover); color: var(--text-strong); }
.res-chip[aria-current="true"] { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.res-chip[aria-current="true"] small { color: var(--green-ink); }
/* The switch (11.10, #246 and #198): a segmented control, the chosen half filled, so it cannot be missed.
   One component for Wyniki (Bilans | Typy, a computer and a phone) and the phone's home page (Typy | Liczby). */
.seg-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border-hover); border-radius: var(--r); background: var(--surface); }
.seg-tab {
  flex: 1 1 0; min-width: 0; min-height: 46px; padding: 8px 14px; border: 0; border-radius: var(--r-sm); background: none;
  font: 700 16px/1.2 var(--font); text-align: center; color: var(--text-2); cursor: pointer;
}
.seg-tab:hover { background: var(--surface-2); color: var(--text-strong); }
.seg-tab[aria-selected="true"], .seg-tab[aria-selected="true"]:hover { background: var(--green); color: var(--green-ink); }
.seg-tab:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.res-tabs { max-width: 440px; margin-bottom: 20px; }
.res-sec { margin-bottom: 28px; }
.res-body { padding-top: 4px; display: flex; flex-direction: column; gap: 16px; }
/* One section at a time. */
.view[data-res-tab="bilans"] #res-typy, .view[data-res-tab="typy"] #res-bilans { display: none; }
@media (max-width: 720px) {
  .res-tabs { max-width: none; margin-bottom: 16px; }
  .res-sec { margin-bottom: 0; }
  .res-sports { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}
/* All sports at once: a header per sport inside a day. */
.res-sport { margin-top: 10px; }
.res-sport-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.res-sport-head svg { width: 18px; height: 18px; flex: none; }
.res-sport-head small { margin-left: auto; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
/* The sport table of "Wszystkie": a row opens that sport. */
.sp-table tbody th a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-weight: 700; text-decoration: none; }
.sp-table tbody th a:hover { text-decoration: underline; }
.sp-table tbody th svg { width: 18px; height: 18px; flex: none; }
.sp-table tbody tr:hover :is(th, td) { background: var(--surface-2); }
.sp-table .is-none :is(th, td) { color: var(--text-muted); }
.sp-table tfoot :is(th, td) { font-weight: 800; color: var(--text-strong); border-top: 2px solid var(--border-hover); }
.sp-table th[scope="row"] { white-space: nowrap; }
.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; }
.pager:empty { display: none; }
.pager-btn {
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--border); font-weight: 600; font-size: 14px; color: var(--text-soft); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.pager-btn:hover:not(:disabled) { border-color: var(--border-hover); }
.pager-btn[aria-current="page"] { background: var(--green); border-color: var(--green); color: var(--green-ink); font-weight: 700; }
.pager-btn:disabled { opacity: .35; cursor: default; }
.pager-gap { color: var(--text-muted); padding: 0 2px; }

/* ---------- filters (Typy) ---------- */
.filters-toggle { display: none; align-self: flex-start; }
.filters {
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.filters-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 140px; }
.field-search { flex: 2 1 220px; }
.field-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.field input, .field select {
  height: 42px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: 500 14px var(--font);
}
.field input::placeholder { color: var(--placeholder); }
.field input:focus, .field select:focus { outline: none; border-color: var(--green); }

.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--text-muted); }
.link-btn { border: 0; background: none; padding: 4px 0; color: var(--green); font-weight: 600; font-size: 14px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* ---------- match page ---------- */
.back-link { align-self: flex-start; color: var(--green); font-weight: 600; }
.back-link:hover { text-decoration: underline; }
.m-head {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px;
  background: linear-gradient(180deg, var(--head-top), var(--head-bottom));
  display: flex; flex-direction: column; gap: 22px;
}
.m-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text-muted); }
.m-meta b { color: var(--green); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.m-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; text-align: center; }
.m-player { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.m-player .avatar { width: 72px; height: 72px; font-size: 22px; }
.m-player h2 { font: 800 30px/1.05 var(--display); color: var(--text-strong); }
.m-player small { color: var(--text-muted); font-size: 14px; }
.m-x { font: 800 28px/1 var(--display); color: var(--text-muted); }
.m-split { display: flex; justify-content: space-between; font: 800 34px/1 var(--display); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.m-split .hi { color: var(--green); }
.m-split .lo { color: var(--text-muted); }
.m-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--track); }
.m-bar span:first-child { background: var(--green); }
.m-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.panel h3 { font: 700 24px/1.1 var(--display); color: var(--text-strong); }
.panel-sub { margin-top: -8px; font-size: 13px; color: var(--text-muted); }
/* Left-aligned, no hyphenation, as on other sites (owner, #174; the justification of #126 is gone). */
.prose p { color: var(--text-prose); line-height: 1.65; }
.prose p + p { margin-top: 10px; }
.prose b { color: var(--text-strong); }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.checks .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.flags { margin: 0; padding-left: 18px; color: var(--warn-text); font-size: 13.5px; }

/* The lines between tiles are each tile's 1 px shadow over the 1 px gap, so a cell left empty at a
   row's end reads as a blank cell, not a grey block. */
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--bg-2); border-radius: var(--r); overflow: hidden; }
.kv > div { background: var(--bg-2); padding: 12px 14px; box-shadow: 0 0 0 1px var(--border); }
/* Task #187: the tennis workload, six lines of notes, has a row of its own, so its row-mates keep
   their own height; its matches, sets and games share one line. */
.kv > .kv-wide { grid-column: 1 / -1; }
.kv dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.kv dd { margin: 4px 0 0; font: 800 24px/1 var(--display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.kv-hint { font-size: 12.5px; color: var(--text-muted); }
/* Task #187 (layout B): the analysis's numbers one tile per question, both sides in one tile in the
   header's order, the pick's value lit. The tiles of a row grow to fill it, the wide ones close the
   grid, so no cell is left empty at any width. */
.kv.kv-pairs { display: flex; flex-wrap: wrap; }
.kv-pairs > div { flex: 1 1 220px; min-width: 0; }
.kv-pairs > .kv-wide { flex-basis: 100%; }
.kv-pairs dd { line-height: 1.05; overflow-wrap: anywhere; }
.kv-pairs dd.kv-text { font: 700 16px/1.35 var(--font); }
.kv-pairs dd.kv-long { font: 600 15px/1.4 var(--font); }
.kv-pk { color: var(--green); }
.kv-sep { color: var(--text-muted); font-weight: 700; padding: 0 2px; }
.kv-who { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); }
.kv-who b { color: var(--text-strong); font-weight: 700; }
.kv-note { color: var(--text-muted); }
/* The workload (task #229): a column per side in the header's order, the pick's lit. */
.kv-pairs dd.kv-table { margin-top: 6px; font: 600 15px/1.3 var(--font); }
.kv-load { width: 100%; max-width: 440px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kv-load :is(th, td) { padding: 6px 0 6px 14px; text-align: right; border-top: 1px solid var(--border); }
.kv-load thead :is(th, td) { padding-top: 0; border-top: 0; font-size: 13px; font-weight: 700; color: var(--text-2); overflow-wrap: anywhere; }
.kv-load tbody th { padding-left: 0; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.kv-load td { font-weight: 800; color: var(--text-strong); white-space: nowrap; }
.kv-load .kv-pk { color: var(--green); }
@media (max-width: 640px) { .kv-pairs > div { flex-basis: 150px; } }

/* the eight pools, A against B */
.duel-legend { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); font-size: 13px; font-weight: 700; color: var(--text-2); }
.duel-legend span:last-child { text-align: right; }
.duel { display: grid; grid-template-columns: 48px minmax(0, 1fr) 120px minmax(0, 1fr) 48px; align-items: center; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.duel-label { text-align: center; font-weight: 600; color: var(--text-2); }
.duel-label small { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.duel-track { height: 12px; border-radius: 6px; background: var(--border); display: flex; }
.duel-track.is-a { justify-content: flex-end; }
.duel-fill { height: 12px; border-radius: 6px; background: var(--duel-rest); }
.duel-fill.is-lead { background: var(--green); }
.duel-fill.is-slight { background: var(--slight); }
.duel-fill.is-tie { background: var(--tie); }
.duel-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.duel-key span { display: inline-flex; align-items: center; gap: 6px; }
.duel-key i { width: 18px; height: 8px; border-radius: 4px; display: inline-block; }
.duel-key i.is-lead { background: var(--green); }
.duel-key i.is-slight { background: var(--slight); }
.duel-key i.is-tie { background: var(--tie); }

/* "Obszar po obszarze" of football, NFL, NHL and MMA (task #264): groups of rows, the pick's side lit green when
   it is the better number; the tag says whether the numbers count in the chance. Tokens only. */
.ar-names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.ar-names span { overflow-wrap: anywhere; }
.ar-names span:last-child { text-align: right; }
.ar-names small { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.ar-group { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.ar-head h4 { margin: 0; font: 700 17px/1.2 var(--display); letter-spacing: .02em; color: var(--text-strong); }
.ar-tag { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.ar-tag.is-info { background: var(--std-bg); color: var(--std-text); }
.ar-tag.is-model { background: var(--mocne-bg); color: var(--mocne-text); }
.ar-model { margin: 0; font-size: 13.5px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ar-model small { flex-basis: 100%; font-size: 12.5px; color: var(--text-muted); }
.ar-row { border-top: 1px solid var(--border); padding-top: 8px; }
.ar-label { margin: 0 0 4px; font-size: 13px; color: var(--text-2); }
.ar-label small { display: block; font-size: 12px; color: var(--text-muted); }
.ar-vals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; }
.ar-v { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-v.is-b { align-items: flex-end; text-align: right; }
.ar-v b { font: 800 22px/1.1 var(--display); color: var(--text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ar-v small { font-size: 12px; color: var(--text-muted); }
.ar-v.is-win b { color: var(--green); }
.ar-bar { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.ar-bar i { display: block; height: 100%; border-radius: 3px; background: var(--duel-rest); }
.ar-v.is-b .ar-bar i { margin-left: auto; }
.ar-v.is-win .ar-bar i { background: var(--green); }
.duel-num { font-weight: 700; }
.duel-gap { color: var(--text-muted); font-size: 12px; text-align: center; }
.duel-num.is-b { text-align: right; }
/* Who wins the area (task #229): the leader's number lit, the other's quieter. */
.duel-num.is-win { font-weight: 800; color: var(--green); }
.duel-num.is-lose { font-weight: 600; color: var(--text-muted); }
/* An area's name with what it means (task #176): dotted underline = there is an explanation; the tip
   opens under the name on hover (a mouse only: on a touch screen hover would stick), keyboard focus
   or a tap that pins it. The strip above the tip keeps it open while the pointer moves onto it. */
.tip { position: relative; display: inline-block; }
.tip-btn {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: help;
  text-decoration: underline dotted 1px var(--text-muted); text-underline-offset: 3px;
}
.tip-text {
  display: none; position: absolute; z-index: 6; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(260px, calc(100vw - 40px)); padding: 9px 11px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: 0 8px 24px -8px var(--pane-shadow); font-size: 13px; font-weight: 500; line-height: 1.45; text-align: left;
}
.tip-text::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
@media (hover: hover) { .tip:hover > .tip-text { display: block; } }
.tip-btn:focus-visible + .tip-text, .tip.is-open > .tip-text { display: block; }
.tip.is-hidden > .tip-text { display: none; }

.breakdown-player { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); }
.breakdown-player summary { cursor: pointer; padding: 14px 16px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; scroll-margin-top: calc(var(--head-h) + 16px); }
.breakdown-player summary span { margin-left: auto; color: var(--green); font-variant-numeric: tabular-nums; }
.breakdown-player summary::-webkit-details-marker { display: none; }
.breakdown-player summary::after { content: "▾"; color: var(--text-muted); }
.breakdown-player[open] summary::after { content: "▴"; }
.bd-close { align-self: center; }
.bd-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.bd-pool h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); display: flex; justify-content: space-between; }
.bd-pool h4 span { text-transform: none; letter-spacing: 0; }
.bd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; font-variant-numeric: tabular-nums; }
.bd-row .raw { color: var(--text-muted); }
.bd-row b { color: var(--text); font-weight: 700; }
.bd-row .pts { text-align: right; font-weight: 700; }
.bd-row.is-gap .raw { color: var(--warn-text); }
/* Narrower than a page (the analysis panel, a phone): the element and its value get the whole first
   line, "lepszy niż 86% zawodników" and the points the second, so neither breaks (task #176). */
.bd-body { container-type: inline-size; }
@container (max-width: 620px) {
  .bd-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "raw pts"; row-gap: 1px; padding: 6px 0; }
  .bd-row > :first-child { grid-area: label; }
  .bd-row .raw { grid-area: raw; font-size: 12.5px; }
  .bd-row .pts { grid-area: pts; }
}
@container (max-width: 290px) {
  .bd-row { column-gap: 8px; }
  .bd-row .raw { font-size: 12px; }
}
/* A long name and its rating: the rating goes under the name rather than the name breaking. */
.breakdown-player summary { flex-wrap: wrap; row-gap: 2px; }

.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.history li { display: grid; grid-template-columns: 28px 84px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.history li:first-child { border-top: 0; }
/* A line that carries its own date in the text (team sports, WTA; task #86): no date column. */
.history li.no-date { grid-template-columns: 28px minmax(0, 1fr); }
.wl { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.wl-w { background: var(--hit-soft); color: var(--hit-soft-text); }
.wl-l { background: var(--miss-soft); color: var(--miss-soft-text); }
.history a { color: var(--text); }
.history a:hover { color: var(--green); }
.history .date { color: var(--text-muted); }
.form-line { min-width: 0; }
.form-line small { display: block; color: var(--text-muted); font-size: 12px; }
.muted-line { color: var(--text-muted); font-size: 13.5px; }
/* Data-source attribution (O nas): small print, required by the data licences. */
.credits { margin-top: 32px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.credits a { color: inherit; }

/* Three figures: three in a row where there is room, otherwise one per row with the number on
   the right (two plus a wide third left an empty-looking quarter). */
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.stat { background: var(--surface); padding: 20px 24px; }

.stat-label { font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.stat-value { font: 800 40px/1.05 var(--display); color: var(--green); font-variant-numeric: tabular-nums; }
.stat-note { color: var(--text-muted); font-size: 12.5px; }

.calib { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 24px; }

.calib-sub { margin: 2px 0 14px; font-size: 13px; color: var(--text-muted); }
/* #261 (owner's variant A): a row is a head line (tier and its count on the left, the percent on the right)
   and a track across the whole row with a light grid every 25%; the ticks 0 / 25 / 50 / 75 / 100 stand under the last row. */
.calib-rows { display: flex; flex-direction: column; gap: 14px; }
.calib-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab val" "track track"; gap: 5px 10px; align-items: baseline; font-size: 13px; font-variant-numeric: tabular-nums; }
.calib-row > span:first-child { grid-area: lab; min-width: 0; color: var(--text-muted); font-size: 13px; }
.calib-row > .calib-track { grid-area: track; }
.calib-row > span:last-child { grid-area: val; text-align: right; font-weight: 700; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calib-n { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.calib-rows .calib-track { background: color-mix(in srgb, var(--track, var(--border)) 70%, transparent); }
.calib-rows .calib-track::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .75; background: linear-gradient(var(--border-hover), var(--border-hover)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--border-hover), var(--border-hover)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--border-hover), var(--border-hover)) 75% 0 / 1px 100% no-repeat; }
.calib-rows > .calib-empty { grid-column: 1 / -1; }
.calib-track { position: relative; height: 14px; border-radius: 4px; background: var(--border); }
.calib-fill { height: 14px; border-radius: 4px; background: var(--green); }
.calib-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-strong); opacity: .7; }
/* Task #202 b (/fx.js): the charts' bars slide in from the left in 1.0 s when they come into view, one
   row after another, the "promised" mark after them. clip-path, so nothing moves around. */
:is(#calib-rows, #home-all) :is(.calib-fill, .ha-split) { clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.2, .7, .2, 1) calc(var(--fx-i, 0) * 80ms); }
:is(#calib-rows, #home-all) .calib-mark { transition: opacity .3s ease calc(800ms + var(--fx-i, 0) * 80ms); }
:is(#calib-rows, #home-all) :is(.calib-fill, .ha-split).fx-wait { clip-path: inset(0 100% 0 0); transition: none; }
:is(#calib-rows, #home-all) .calib-track:has(> .fx-wait) .calib-mark { opacity: 0; transition: none; }

.calib-empty { padding: 24px 0; text-align: center; color: var(--text-muted); }

/* ---------- Typy: live picks above the archive ---------- */
.live-section { display: flex; flex-direction: column; gap: 16px; margin-bottom: 12px; }
.archive-head { margin-top: 8px; }
.archive-note { margin-top: -6px; }
.kv .kv-hint { margin-top: 4px; white-space: pre-line; }
/* An analysis is five points, one per line (task #134); keep the lines. */
#lp-text { white-space: pre-line; }
.lp-textarea { width: 100%; min-height: 180px; padding: 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font: inherit; line-height: 1.6; resize: vertical; }
.lp-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
#lp-edit { align-self: flex-start; }

/* ---------- NFL: factors, team comparison, backtest ---------- */
/* One grid for all the rows (task #245): every bar starts and ends in the same place; a long
   name ("Zmęczenie (mecz dzień po dniu)") breaks onto two lines instead of shortening its bar. */
.factors { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr) 150px; gap: 10px 12px; }
.factor { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; font-size: 13.5px; }
.factor-label { color: var(--text-2); font-weight: 600; }
.factor-track { display: grid; grid-template-columns: 1fr 1fr; height: 12px; background: var(--border); border-radius: 6px; overflow: hidden; }
.factor-track span { height: 12px; }
.factor-neg { justify-self: end; background: var(--tie); }
.factor-pos { justify-self: start; background: var(--green); }
/* The pick is the header's first name (#248): its bars go left of the middle, the other side's right. */
.factors.is-flip .factor-pos { grid-column: 1; grid-row: 1; justify-self: end; }
.factors.is-flip .factor-neg { grid-column: 2; grid-row: 1; justify-self: start; }
.factor-val { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.factor-val small { display: block; font-weight: 500; color: var(--text-muted); font-size: 12px; }
.kv-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.cmp-table th, .cmp-table td { padding: 8px 6px; border-top: 1px solid var(--border); text-align: right; }
.cmp-table th[scope="row"] { text-align: left; color: var(--text-muted); font-weight: 600; }
.cmp-table thead th { border-top: 0; color: var(--text-strong); }
.bt-stats { display: flex; flex-direction: column; gap: 16px; }
.bt-stats:empty { display: none; }
.bt-head { margin-top: 12px; }
.bt-table .bt-best { color: var(--green); font-weight: 800; }
.bt-table th[scope="row"] { white-space: normal; min-width: 110px; }
/* The numbers share the width evenly and the first column takes what its words need, not half
   the table (auto layout gave a season's year as much room as all the numbers, owner 8.10). */
.bt-table { table-layout: fixed; }
@media (max-width: 640px) {
  .factors { display: flex; flex-direction: column; }
  .factor { grid-template-columns: 1fr 110px; gap: 12px; }
  .factor-track { grid-column: 1 / -1; grid-row: 2; }
  .factor-label { grid-row: 1; }
  .factor-val { grid-row: 1; text-align: right; }
}

/* ---------- Statystyki: track record ---------- */
#record { display: flex; flex-direction: column; gap: 16px; }
.rec-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.rec-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.rec-table caption { text-align: left; padding: 16px 20px 6px; font-weight: 700; color: var(--text-strong); }
.rec-table th, .rec-table td { padding: 10px 20px; text-align: right; border-top: 1px solid var(--border); white-space: nowrap; }
.rec-table th:first-child { text-align: left; }
/* Coin flips: listed, not counted in the hit rate. */
.rec-uncounted td { color: var(--text-muted); }
/* "nierozliczone: k" (task #232 F1) never splits from its number. */
.rec-unsettled { white-space: nowrap; }
.rec-note { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.rec-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border-top: 0; }
/* A long heading ("Obiecana szansa") takes a second line instead of running past its column, which
   made the table scroll sideways on a laptop (#144). */
.rec-table thead th { white-space: normal; vertical-align: bottom; font-size: 11px; letter-spacing: .03em; padding-left: 8px; }
/* A tablet or small laptop still shows all seven columns, each about 100 px: smaller headings and padding, so the
   one-word headings ("Nietrafione", "Skuteczność") do not run into each other. */
@media (min-width: 641px) and (max-width: 1000px) {
  .rec-table th, .rec-table td { padding: 10px 8px; }
  .rec-table thead th { font-size: 10px; letter-spacing: 0; padding-left: 4px; }
  .rec-table-wrap .rec-table tr > :first-child { width: 19%; }
}
.rec-table .rec-hit { color: var(--green); font-weight: 800; }
.rec-table .rec-rate { color: var(--text-strong); font-weight: 800; }
/* A tier's sample beside its percentage (task #227 A4); under 30 picks the number greyed. */
.rec-table :is(.rec-rate, .rec-rate-2) .n-size { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); white-space: normal; }
:is(.n-size, .calib-v small) .nw { white-space: nowrap; }
.rec-table :is(.rec-rate, .rec-rate-2).is-small { color: var(--text-muted); }
.rec-sources { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 640px) {
  /* A phone keeps what answers the question: the tier, its picks, hits and the hit rate. */
  .rec-table th, .rec-table td { padding: 10px 8px; }
  /* 10 px and a narrow left padding: "Skuteczność" is one word and must fit its column (#144). */
  .rec-table thead th { font-size: 10px; letter-spacing: 0; padding-left: 4px; }
  .rec-table .tier-tag { font-size: 10px; padding: 2px 6px; letter-spacing: .02em; white-space: normal; }
  /* Four columns on a phone: the tier ("Wyrównane") and "Skuteczność" are the widest words, so they
     get the room ("Typy", "Trafione" are short); "poza skutecznością" may take a second line. */
  .rec-table-wrap .rec-table tr > :first-child { width: 30%; }
  .rec-table th[scope="row"] { white-space: normal; }
  .rec-table:not(.bt-table):not(.bt-mini) tr > :nth-child(2) { width: 19%; }
  .rec-table:not(.bt-table):not(.bt-mini) tr > :nth-child(4) { width: 23%; }
  .rec-table:not(.bt-table):not(.bt-mini) tr > :nth-child(6) { width: 28%; }
  /* The backtest tables keep their accuracy columns and drop the game count instead. */
  .rec-table.bt-table tr > :nth-child(3), .rec-table.bt-table tr > :nth-child(5) { display: table-cell; }
  .rec-table.bt-table tr > :nth-child(2) { display: none; }
  .rec-table tr > :nth-child(3), .rec-table tr > :nth-child(5), .rec-table tr > :nth-child(7) { display: none; }
}
/* Test on history (#178): two tables side by side on a computer, each column a stack of cards, one
   per row below that; a table of up to four columns keeps a reading width instead of the page's. */
.bt-group { font: 700 22px/1.1 var(--display); color: var(--text-strong); margin-top: 4px; }
.bt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.bt-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bt-narrow { width: 100%; max-width: 640px; }
/* Three columns fit a phone: the comparison keeps its log-loss, which the note under it explains. */
@media (max-width: 640px) { .rec-table.bt-mini tr > :nth-child(3) { display: table-cell; } }
@media (min-width: 1100px) {
  .bt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Half the page: six columns of numbers need less side padding to stay inside their cells. */
  .bt-grid .rec-table th, .bt-grid .rec-table td { padding-left: 14px; padding-right: 14px; }
  .bt-grid .rec-table caption { padding-left: 14px; padding-right: 14px; }
  /* A little more for the first column, so "Rzut monetą" stays on one line at 1100 px. */
  .bt-grid .rec-table tr > :first-child { width: 28%; }
  /* Situations ("Faworyt debiutuje w UFC") are sentences: a wide first column and a smaller font keep each on one line (#250). */
  .bt-grid .rec-table-wrap .rec-table.bt-sit tr > :first-child { width: 48%; }
}
/* "Bilans według sportu" on a phone (#275): the tier table's column widths (19 / 23 / 28%) left "Trafione z rozliczonych" and
   "Skuteczność" running into each other; this table has its own three columns (sport, hits of settled, rate). */
@media (max-width: 640px) {
  .rec-table-wrap .rec-table.sp-table tr > :first-child { width: 36%; }
  .rec-table-wrap .rec-table.sp-table tr > :nth-child(2) { width: 30%; }
  .rec-table-wrap .rec-table.sp-table tr > :nth-child(4) { width: 34%; }
}
/* Bilans według sportu i rodzaju typu (#290): a table on a computer, cards on a phone; "nowy" / "mało danych" badges, the percentage
   greyed under 30 settled picks; a phone's card opens in place for more figures (#298, the same chevron and dashed panel as
   "Przed meczem" under a row). Colours are tokens only. */
.bil-block { display: flex; flex-direction: column; gap: 14px; }
.bil-per { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.bil-pl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.bil-per .seg button[aria-pressed="false"] { color: var(--text-2); }
.bil-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.bil-badge.is-new { background: var(--std-bg); color: var(--std-text); }
.bil-badge.is-few { background: var(--card-chip); color: var(--card-chip-text); }
.bil-table .bil-nm { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-weight: 700; }
.bil-table .bil-nm svg { width: 18px; height: 18px; flex: none; }
.bil-table .bil-sub { display: block; margin-top: 3px; }
.bil-table .rec-note { display: block; margin-top: 2px; }
.bil-pct { font-weight: 800; color: var(--text-strong); }
.bil-pct.is-grey, .bil-note.is-grey b { color: var(--text-muted); }
.bil-table td { white-space: normal; }
.bil-table th:nth-child(n+2), .bil-table td:nth-child(n+2) { text-align: right; }
.bil-cards { display: none; }
.bil-h3 { margin: 4px 0 0; font-size: 15px; color: var(--text-strong); }
.bil-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.bil-ch a, .bil-ch .bil-nm { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); text-decoration: none; }
.bil-ch a:hover b { text-decoration: underline; }
.bil-ch svg { width: 18px; height: 18px; flex: none; }
.bil-ch b { font-size: 15px; }
.bil-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.bil-cv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.bil-cn { font: 800 38px/1 var(--display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.bil-cn.is-grey { color: var(--text-muted); font-size: 26px; }
.bil-cn.is-count { font-size: 30px; }
.bil-cs { margin: 0; font-size: 13px; color: var(--text-2); }
.bil-card.is-small .calib-fill { opacity: .45; }
.bil-note { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.bil-note b { color: var(--text-2); font-weight: 700; }
.bil-card[data-bil] { cursor: pointer; }
.bil-tg { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 28px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); text-align: left; cursor: pointer; }
.bil-tg:hover, .bil-tg:focus-visible { color: var(--text-strong); }
.bil-tg svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.bil-tg[aria-expanded="true"] svg { transform: rotate(180deg); }
.bil-more { margin: 0 -16px -14px; padding: 12px 16px 14px; border-top: 1px dashed var(--border-hover); border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--bg-2); }
.bil-more[hidden] { display: none; }
.bil-dl { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13.5px; color: var(--text-2); }
.bil-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bil-dl dt { margin: 0; color: var(--text-muted); }
.bil-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 600; }
@media (max-width: 720px) {
  .bil-table { display: none; }
  .bil-cards { display: flex; flex-direction: column; gap: 10px; }
}
.bt-sit th[scope="row"] { font-size: 13px; }
@media (min-width: 641px) { .rec-table-wrap .rec-table.bt-sit tr > :first-child { width: 42%; } }
/* A phone: the situation takes about half the width and may wrap to two lines; the two numbers stay readable. */
@media (max-width: 640px) { .rec-table-wrap .rec-table.bt-sit tr > :first-child { width: 52%; } .bt-sit th[scope="row"] { font-size: 12px; line-height: 1.25; } }

/* ---------- placeholder views ---------- */
.page-head { padding: 8px 0 4px; }
.page-title { font: 800 44px/1 var(--display); text-transform: uppercase; color: var(--text-strong); }
.page-sub { color: var(--text-muted); margin-top: 8px; }
.placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  padding: 64px 24px; border: 1px dashed var(--border); border-radius: var(--r-lg); color: var(--text-muted);
}
.placeholder svg { width: 44px; height: 44px; color: var(--green); }

/* ---------- O nas (task #52) and its glossary (task #40) ---------- */
.about { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.about p, .about li, .about dd { color: var(--text-2); font-size: 15px; line-height: 1.65; }

.glossary { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px 20px; margin: 0; }
.glossary dt { color: var(--text-strong); font-weight: 600; font-size: 15px; line-height: 1.65; }
.glossary dd { margin: 0; }
#slownik { scroll-margin-top: calc(var(--head-h) + 70px); }

/* ---------- Kontakt: the form (task #50) ---------- */
.contact { max-width: 820px; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.contact-field input, .contact-field select, .contact-field textarea {
  font: 16px/1.5 var(--font); color: var(--text); background: var(--bg-2); border: 1px solid var(--border); /* 16 px: iPhone zooms into smaller fields */
  border-radius: var(--r-sm); padding: 10px 12px;
}
.contact-field textarea { resize: vertical; min-height: 140px; }
.contact-field :focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-note { font-size: 13px; color: var(--text-muted); }
.contact-status { font-size: 14px; color: var(--text-2); }
.contact-status.is-error { color: var(--miss); }
.contact-status.is-ok { color: var(--green); }
@media (max-width: 720px) { .contact-row { grid-template-columns: minmax(0, 1fr); } }
/* The form and a short column beside it on a computer (task #180); one column under 981 px. */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.contact-layout .contact { max-width: none; }
.contact-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.contact-docs { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.contact-docs a { color: var(--green); font-weight: 600; }
.contact-docs a:hover { text-decoration: underline; }
@media (max-width: 980px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .glossary { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .glossary dd { margin-bottom: 10px; }
}

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 28px 24px; display: flex; align-items: center; gap: 32px; }
.brand-sm .brand-name { font-size: 24px; }
.brand-sm .brand-mark { width: 34px; height: 34px; }
.footnav { display: flex; gap: 28px; margin: 0 auto; font-size: 14px; color: var(--text-2); }
.footnav a:hover { color: var(--text-strong); }
.social { display: flex; gap: 18px; }
.social svg { width: 22px; height: 22px; color: var(--social); }
.social a:hover svg { color: var(--green); }
.footer-bottom {
  max-width: var(--max); margin: 0 auto; padding: 14px 24px 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted);
}

/* ---------- bottom sport bar (phone only) ---------- */
.bottombar { display: none; --seam: var(--bg-2); }
.bottom-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0;
  min-height: 62px; padding: 0 2px; border: 0; background: transparent; color: var(--text-3);
  font: 700 16px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; text-align: center; cursor: pointer;
}
.bottom-btn::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: transparent; margin-bottom: 2px; }
.bottom-btn svg { width: 28px; height: 28px; }
.bottom-btn[aria-current="page"] { color: var(--text-strong); }
.bottom-btn[aria-current="page"]::before { background: var(--green); }
.bottom-btn[aria-current="page"] .sp-line { stroke: var(--green); }
/* Eight sports share a phone's width: the columns are equal unless a name needs more ("Football"
   in English, see .bottombar's columns); the smallest phones get a smaller size. */
@media (max-width: 359px) { .bottom-btn { font-size: 14px; letter-spacing: .02em; } }
/* A sport without a mark keeps its line icon. */
.sp-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the sports' marks (task #147: round 6 of the mockup, football in variant C) ----------
   v3.js SPORT_MARKS: a body (.b) in the sport's colour, cut lines (.s) or patches (.c, .sm) in the
   white or dark ink, and under the body an outline (.halo): the dark ink mixed into the bar's own
   background (--seam) by --olm, --olw wide. Tennis has its outline on the light palettes only. */
:root {
  --sp-tenis: #d4df4f; --sp-nfl: #c98c5f; --sp-nba: #f08c42; --sp-nhl: #7dc0ec; --sp-pilka: #45c6a8; --sp-mma: #ee7070; --sp-mlb: #b4a4f4;
  --mk-white: #ffffff; --mk-dark: #16191d;
}
:root[data-palette="papier"], :root[data-palette="murawa"], :root[data-palette="maczka"] {
  --sp-tenis: #7b8a0e; --sp-nfl: #8c5a35; --sp-nba: #bf5a12; --sp-nhl: #2a73ad; --sp-pilka: #1d7f66; --sp-mma: #b8352d; --sp-mlb: #5b46b8;
  --ol-light: inline;
}
.spm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.spm {
  flex: none; overflow: visible; fill: none; stroke: none;
  --in: var(--seam, var(--bg-2)); --ol: color-mix(in srgb, var(--mk-dark) var(--olm, 0%), var(--seam, var(--bg-2)));
}
.spm.s-tenis { --sc: var(--sp-tenis); } .spm.s-nfl { --sc: var(--sp-nfl); } .spm.s-nba { --sc: var(--sp-nba); } .spm.s-nhl { --sc: var(--sp-nhl); }
.spm.s-pilka { --sc: var(--sp-pilka); } .spm.s-mma { --sc: var(--sp-mma); } .spm.s-mlb { --sc: var(--sp-mlb); }
.spm.in-w { --in: var(--mk-white); }
.spm.in-d { --in: var(--mk-dark); }
.spm.ol-1, .spm.ol-light { --olw: .55px; --olm: 32%; }
.spm.ol-2 { --olw: .8px; --olm: 45%; }
.spm.ol-3 { --olw: .8px; --olm: 85%; }
.spm.s-pilka.ol-2 { --olm: 52%; }
.spm.ol-light .halo { display: var(--ol-light, none); }
.spm .b { fill: var(--sc); }
.spm.body-w .b { fill: var(--mk-white); }
.spm .halo > * { fill: var(--ol); stroke: var(--ol); stroke-width: calc(2 * var(--olw, 0px)); stroke-linejoin: round; }
.spm .s { stroke: var(--in); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spm .s.t { stroke-width: .9; }
.spm .s.st { stroke-width: 3; stroke-dasharray: .8 1.5; stroke-linecap: butt; }
.spm .c { fill: var(--in); }
.spm .sm { stroke: var(--in); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .menu-btn { display: inline-grid; }
  .topnav { display: none; }
  .topbar-actions { margin-left: auto; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; top: var(--head-h); left: 0; bottom: 0; width: 270px; z-index: 30; padding: 20px 16px;
    background: var(--bg-2); border-right: 1px solid var(--border); overflow-y: auto;
    transform: translateX(-100%); transition: transform .2s ease;
    /* The desktop rule's align-self: start also shrinks a fixed box to its content in Chrome,
       which left the drawer ending mid-screen (task #41). */
    align-self: stretch;
  }
  body.nav-open .sidebar { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, .6); }
  /* The page behind an open drawer is dimmed; a tap on it closes the drawer (v2.js). */
  body.nav-open::after { content: ""; position: fixed; inset: var(--head-h) 0 0 0; z-index: 29; background: rgba(5, 8, 12, .6); }
  .footer-inner { flex-direction: column; gap: 18px; }
  .footnav { margin: 0; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
}

@media (max-width: 720px) {
  
  :root { --head-h: 64px; }
  body { padding-bottom: 76px; }
  .topbar-inner { height: 64px; gap: 12px; padding: 0 12px; }
  .sportbar { display: none; }
  .brand-name { font-size: 24px; }
  .brand-mark { width: 32px; height: 32px; }
  .topbar .brand-tag { display: none; }
  .btn-vip span { display: none; }
  /* A crown alone did not say what the button does (task #41). */
  .btn-vip { padding: 0 14px; gap: 6px; }
  .btn-vip::after { content: "VIP"; }
  .account-btn { display: none; }
  .ticker-inner { padding: 8px 16px; gap: 16px; font-size: 12.5px; }
  
  .layout { padding: 16px 16px 32px; gap: 16px; }
  .section-head h2 { font-size: 26px; }
  
  
  
  
  
  
  
  
  
  
  
  
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
  .stat-value { grid-column: 2; grid-row: 1 / span 2; }
  .stat-value { font-size: 34px; }
  .filters-toggle { display: inline-flex; }
  .filters:not(.is-open) { display: none; }
  
  .field { flex: 1 1 140px; }
  .m-head { padding: 20px 16px; }
  .m-player .avatar { width: 52px; height: 52px; font-size: 16px; }
  .m-player h2 { font-size: 22px; }
  .m-grid { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duel { grid-template-columns: 36px minmax(0, 1fr) 84px minmax(0, 1fr) 36px; gap: 6px; font-size: 12px; }
  .duel-legend { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); }
  .panel { padding: 18px 16px; }
  .page-title { font-size: 34px; }

  .bottombar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min-content, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: color-mix(in srgb, var(--bg-2) 97%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border); padding: 4px 2px calc(8px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* A quiet way in for the admins, from the footer (the account icon leads there too). */
.footer-admin { color: var(--text-muted); text-decoration: none; }
.footer-admin:hover { color: var(--text); }

/* ---------- palettes (task #97) ----------
   The five palettes from the mockup (#19, site/admin/makiety/matchlens-1.html) as options
   beside the classic look. Each one sets its few base colours (--p-*); the block under them
   derives every site token from those. No attribute = the classic tokens above. The hero
   keeps its own dark picture in every palette, so its text stays light. */
:root[data-palette] {
  --bg: var(--p-bg);
  --bg-2: color-mix(in srgb, var(--p-bg) 50%, var(--p-surface));
  --surface: var(--p-surface);
  --surface-2: color-mix(in srgb, var(--p-surface) 80%, var(--p-line));
  --border: var(--p-line);
  --border-hover: color-mix(in srgb, var(--p-line) 55%, var(--p-muted));
  --text: var(--p-text);
  --text-strong: var(--p-text);
  --text-2: color-mix(in srgb, var(--p-text) 82%, var(--p-muted));
  --text-soft: color-mix(in srgb, var(--p-text) 85%, var(--p-muted));
  --text-prose: color-mix(in srgb, var(--p-text) 88%, var(--p-muted));
  --text-3: color-mix(in srgb, var(--p-muted) 75%, var(--p-text));
  --text-muted: var(--p-muted);
  --placeholder: var(--p-muted);
  --social: var(--text-2);
  --green: var(--p-accent);
  --green-ink: var(--p-on-accent);
  --green-hover: color-mix(in srgb, var(--p-accent) 85%, var(--p-text));
  --green-deep: var(--p-chip);
  --green-nav: var(--p-chip);
  --green-nav-line: color-mix(in srgb, var(--p-accent) 45%, var(--p-chip));
  --warn-bg: color-mix(in srgb, #f0b23a 14%, var(--p-surface));
  --warn-line: color-mix(in srgb, #f0b23a 50%, var(--p-surface));
  --warn-text: var(--p-warn-text);
  --miss: var(--p-miss);
  --card: var(--p-surface);
  --card-line: var(--p-line);
  --card-text: var(--p-text);
  --card-muted: var(--p-muted);
  --bar-fav: var(--p-fill);
  --bar-rest: var(--p-track);
  --track: var(--p-track);
  --duel-rest: color-mix(in srgb, var(--p-muted) 55%, var(--p-track));
  --slight: color-mix(in srgb, var(--p-fill) 45%, var(--p-surface));
  --hit-bg: color-mix(in srgb, var(--p-hit) 20%, var(--p-surface));
  --miss-bg: color-mix(in srgb, var(--p-miss) 18%, var(--p-surface));
  --head-top: var(--p-surface);
  --head-bottom: var(--p-bg);
  --hero-accent: var(--p-hero-accent);
  --card-chip: var(--p-track);
  --card-chip-text: color-mix(in srgb, var(--p-text) 75%, var(--p-muted));
  --card-accent: var(--p-accent);
  --hit-soft: color-mix(in srgb, var(--p-hit) 16%, var(--p-surface));
  --hit-soft-text: color-mix(in srgb, var(--p-hit) 80%, var(--p-text));
  --miss-soft: color-mix(in srgb, var(--p-miss) 14%, var(--p-surface));
  --miss-soft-text: var(--p-miss);
  --miss-chip: color-mix(in srgb, var(--p-miss) 14%, var(--p-surface));
  --miss-chip-text: var(--p-miss);
  --mocne-bg: var(--p-chip);
  --mocne-text: var(--p-chip-text);
  --std-bg: color-mix(in srgb, #3b7dd8 16%, var(--p-surface));
  --std-text: color-mix(in srgb, #3b7dd8 55%, var(--p-text));
  --split-x: color-mix(in srgb, var(--p-track) 55%, var(--p-muted));
  --split-draw: color-mix(in srgb, var(--p-fill) 55%, var(--p-surface));
  --on-fav: var(--p-on-accent);
}
:root[data-palette="papier"] {
  --p-bg: #f6f7f9; --p-surface: #ffffff; --p-line: #dde2e8; --p-text: #141b24; --p-muted: #566170;
  --p-accent: #1f4f8f; --p-on-accent: #ffffff; --p-hit: #1d7a4a; --p-miss: #b8392b; --p-track: #e3e8ee;
  --p-fill: #1f4f8f; --p-chip: #e2eaf5; --p-chip-text: #173d70; --p-warn-text: #7a5300; --p-hero-accent: #8fb6ec;
  color-scheme: light;
}
:root[data-palette="grafit"] {
  --p-bg: #16191d; --p-surface: #1e2227; --p-line: #2e343c; --p-text: #e8eaed; --p-muted: #9ba4ae;
  --p-accent: #5cc38f; --p-on-accent: #0d1f15; --p-hit: #5cc38f; --p-miss: #e2826f; --p-track: #2e343c;
  --p-fill: #5cc38f; --p-chip: #24382d; --p-chip-text: #a9e4c5; --p-warn-text: #f1d58a; --p-hero-accent: #5cc38f;
}
:root[data-palette="tablica"] {
  --p-bg: #0e1726; --p-surface: #152034; --p-line: #25334d; --p-text: #e9eef6; --p-muted: #97a5bb;
  --p-accent: #f0b23a; --p-on-accent: #2a1c00; --p-hit: #62c48e; --p-miss: #ef8270; --p-track: #25334d;
  --p-fill: #f0b23a; --p-chip: #3b3018; --p-chip-text: #f7d48e; --p-warn-text: #f1d58a; --p-hero-accent: #f0b23a;
}
:root[data-palette="murawa"] {
  --p-bg: #f2f5f2; --p-surface: #ffffff; --p-line: #d5ded7; --p-text: #15211a; --p-muted: #536259;
  --p-accent: #1e6b45; --p-on-accent: #ffffff; --p-hit: #1e6b45; --p-miss: #b0413a; --p-track: #dfe7e1;
  --p-fill: #1e6b45; --p-chip: #dbeae1; --p-chip-text: #154d32; --p-warn-text: #7a5300; --p-hero-accent: #7fd6a6;
  color-scheme: light;
}
:root[data-palette="maczka"] {
  --p-bg: #f6f6f4; --p-surface: #ffffff; --p-line: #e0ddd9; --p-text: #1d1a18; --p-muted: #625c57;
  --p-accent: #b0502a; --p-on-accent: #ffffff; --p-hit: #2f7d4f; --p-miss: #a8322a; --p-track: #ebe7e3;
  --p-fill: #b0502a; --p-chip: #f5e2d8; --p-chip-text: #873c1e; --p-warn-text: #7a5300; --p-hero-accent: #f0a27e;
  color-scheme: light;
}

/* The switch in the header: a small menu of the palettes, each with three swatches. */
.palette { position: relative; }
.palette-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 250px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.palette-head { padding: 8px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.palette-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text); font-weight: 600; font-size: 14px; text-align: left; cursor: pointer;
}
.palette-opt:hover { background: var(--surface-2); }
.palette-opt[aria-checked="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--green); }
.palette-opt small { margin-left: auto; color: var(--text-muted); font-weight: 500; font-size: 12px; }
.swatch { display: inline-flex; flex: none; border-radius: 6px; overflow: hidden; border: 1px solid rgba(127, 127, 127, .35); }
.swatch i { width: 12px; height: 20px; }

/* ---------- v3: the new layout (task #43) ----------
   One menu and the sports in the header, the leagues under them, the ticker; no side menu on a
   computer (the sidebar is only the phone's drawer). Dziś is a list grouped by tournament with
   the headline number and the calibration beside it. Every colour is a token, so all the
   palettes above work here too. */
:root { --hit: var(--green); }
:root[data-palette] { --hit: var(--p-hit); }

.layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 981px) { .sidebar { display: none; } }
.brand-name { font-size: 32px; letter-spacing: .01em; }
/* The BadgerCalls logo (task #309, the owner's choice of 13.10): a black badger head with a slim headset,
   drawn as SVG. The headset takes the palette's accent and the sticker outline is white on the dark
   palettes and black on the light ones, so each palette has its own file (build_marks.mjs); Klasyczna
   is the base file. --brand-logo is the full mark (the header, with a mic boom); --brand-pick is the
   simplified one for 14-22 px (the pick marker by a name: thicker band, no boom). */
:root { --brand-logo: url("/brand/badgercalls-mark.svg"); --brand-pick: url("/brand/badgercalls-small.svg"); --brand-ink: #121314; --wordmark: var(--text-strong); }
:root[data-palette="papier"] { --brand-logo: url("/brand/badgercalls-mark-papier.svg"); --brand-pick: url("/brand/badgercalls-small-papier.svg"); --wordmark: var(--brand-ink); }
:root[data-palette="grafit"] { --brand-logo: url("/brand/badgercalls-mark-grafit.svg"); --brand-pick: url("/brand/badgercalls-small-grafit.svg"); }
:root[data-palette="tablica"] { --brand-logo: url("/brand/badgercalls-mark-tablica.svg"); --brand-pick: url("/brand/badgercalls-small-tablica.svg"); }
:root[data-palette="murawa"] { --brand-logo: url("/brand/badgercalls-mark-murawa.svg"); --brand-pick: url("/brand/badgercalls-small-murawa.svg"); --wordmark: var(--brand-ink); }
:root[data-palette="maczka"] { --brand-logo: url("/brand/badgercalls-mark-maczka.svg"); --brand-pick: url("/brand/badgercalls-small-maczka.svg"); --wordmark: var(--brand-ink); }
/* The wordmark: BADGER in the ink (black on the light palettes, the text colour on the dark ones), CALLS in the accent. */
:root { --wordmark-font: "Saira Condensed", "Barlow Condensed", "Arial Narrow", sans-serif; }
.brand-name { font-family: var(--wordmark-font); font-weight: 800; font-style: normal; color: var(--wordmark); }
.brand-name em { font-style: normal; color: var(--green); }
.brand-mark.brand-logo { display: block; flex: none; width: 54px; height: 54px; filter: none; background: var(--brand-logo) center / contain no-repeat; }
.brand-sm .brand-mark.brand-logo { width: 44px; height: 44px; }
/* On a phone BADGERCALLS is a letter longer than GOATORACLE was; smaller type and mark keep the VIP and
   palette buttons on a 360 px screen. */
@media (max-width: 720px) {
  .brand-mark.brand-logo { width: 34px; height: 34px; }
  .topbar .brand:has(.brand-logo) { gap: 6px; }
  .topbar .brand:has(.brand-logo) .brand-name { font-size: 21px; }
}
/* Under 360 px (a 320 px phone) the header ran past the screen edge and cut off the palette button (#146, #176, #181). */
@media (max-width: 359px) {
  .topbar-inner { gap: 8px; padding: 0 8px; }
  .topbar-actions { gap: 8px; }
  .topbar .brand:has(.brand-logo) .brand-name { font-size: 19px; }
  .btn-vip { padding: 0 10px; }
}
/* A computer's header grows with the window (task #211). Just above 980 px "Jak to działa" ("How it
   works" up to 1020 px) and the line under the name broke onto a second line: the menu grew taller and
   Dziś's underline dropped away from its label. Now no label breaks (nowrap above), the menu's links
   keep their own height, and from 981 px to 1280 px the logo (46 → 54 px), the name (28 → 32 px), its
   line (in step with the name), the menu's padding and the gaps grow with the window to full size;
   at 981 px with a scrollbar the English row still has about 55 px to spare. */
@media (min-width: 981px) {
  .topbar-inner { gap: clamp(16px, 2.6667vw - 10.13px, 24px); }
  .topbar .brand-mark.brand-logo { width: clamp(46px, 2.6667vw + 19.87px, 54px); height: clamp(46px, 2.6667vw + 19.87px, 54px); }
  .topbar .brand-name { font-size: clamp(28px, 1.3333vw + 14.93px, 32px); }
  .topbar .brand-tag { font-size: clamp(8.3px, .3958vw + 4.43px, 9.5px); }
  .topnav { --nav-px: clamp(10px, 1.3333vw - 3.07px, 14px); }
  .topbar-actions { gap: clamp(8px, 1.3333vw - 5.07px, 12px); margin-left: clamp(8px, 1.3333vw - 5.07px, 12px); }
  .topbar .btn-vip { padding: 0 clamp(16px, 1.3333vw + 2.93px, 20px); }
}

/* ---------- leagues under the sports ---------- */
.leaguebar { border-bottom: 1px solid var(--border); background: var(--bg-2); }
.leaguebar-inner { max-width: var(--max); margin: 0 auto; padding: 8px 24px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.league {
  flex: none; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-2); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.league:hover { border-color: var(--border-hover); color: var(--text-strong); }
.league[aria-current] { background: var(--green); border-color: var(--green); color: var(--green-ink); }
/* Tennis: ATP | WTA in this row instead of leagues (#147). */
.leaguebar-inner:has(.tour) { align-items: center; gap: 12px; }
.tour { flex: none; display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); }
.tour a { padding: 5px 18px; border-radius: 6px; font-weight: 700; font-size: 14px; color: var(--text-2); }
.tour a:hover { color: var(--text-strong); }
.tour a[aria-current] { background: var(--text-strong); color: var(--bg); }
.lb-note { flex: none; font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* ---------- "Więcej" in the sport bar: the sports without picks lately (#229 C1) ---------- */
.is-more { font-family: var(--display); }
.more-caret { font-size: .6em; margin-left: -4px; }
.bottom-btn .more-caret { display: none; }
.more-dots { display: grid; place-items: center; width: 28px; height: 28px; font: 800 20px/1 var(--font); letter-spacing: .05em; }
.more-menu {
  position: fixed; z-index: 45; min-width: 250px; max-width: calc(100vw - 16px); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 16px 40px var(--pane-shadow);
}
.more-menu[hidden] { display: none; }
.more-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--text); font-weight: 600; font-size: 14.5px; }
.more-menu a:hover, .more-menu a:focus-visible { background: var(--surface-2); color: var(--text-strong); }
.more-menu a[aria-current] { color: var(--text-strong); box-shadow: inset 3px 0 0 var(--green); }
.more-menu a svg { flex: none; width: 24px; height: 24px; }
.more-menu small { margin-left: auto; padding-left: 12px; font-weight: 500; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.more-menu p { margin: 4px 0 0; padding: 8px 12px 4px; font-size: 12.5px; color: var(--text-muted); border-top: 1px solid var(--border); }

/* ---------- Dziś: the days and yesterday's line ---------- */
.today-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* Task #146 (mockup v3-dni, round 2, variant A): ten days, the name and the date on the top line, the
   count alone under it, every day the same look. v3.js fitDays sets the widths: the tiles share the
   row when all fit (is-fill), else a strip that snaps, with part of the next day in view (is-strip). */
.days { display: flex; align-items: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; min-width: 0; max-width: 100%; }
.days::-webkit-scrollbar { display: none; }
.day {
  position: relative; flex: none; display: flex; flex-direction: column; gap: 2px; min-width: 96px; padding: 8px 10px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  font: inherit; text-align: left; cursor: pointer; user-select: none; -webkit-user-drag: none;
}
/* Task #274: a tile is its date (a link to the day, stretched over the whole tile) and the day's counts, each a link
   of its own above it ("10 trafione"); fitDays sets one width (the height is each tile's own, #297). */
a.day-head { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
a.day-head::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* A tile is as tall as its content (the owner, 12.10, version A of the mockup): "12/15 (80%)" and, only when something waits,
   a line of "5 czeka"; no room is kept for a line that is not there. The row does not stretch the tiles (#297): Wczoraj, with
   nothing waiting, is lower than Dziś; only the calendar tile takes the row's height (.day.is-cal). */
.day-counts { z-index: 1; display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.dr-main { font-size: 13px; }
.dr-pc { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.dr-open { font-size: 12px; color: var(--text-muted); }
/* On the lit day the line is a button (opens the breakdown menu); a little chevron says so. */
/* #297 (owner: "w złym miejscu, nachodzi na obręcz"): the line has no room beside its text (a phone's tile is 123 px, "42/58 (72%)" fills
   it), so the chevron stands in the tile's top right, level with the date, clear of the frame; the button's pseudo-element is
   placed against the tile, so tapping it opens the menu too. */
button.dc { width: calc(100% + 10px); border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
button.dc:hover, button.dc[aria-expanded="true"] { background: var(--surface-2); color: var(--text-strong); }
.dc.is-menu { position: static; }
.dc.is-menu::after { content: ""; position: absolute; right: 13px; top: 14px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.dc.is-menu[aria-expanded="true"]::after { top: 17px; transform: rotate(225deg); }
.dc-pop { position: fixed; z-index: 90; min-width: 210px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 1px; padding: 6px; background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--r); box-shadow: 0 14px 34px -8px var(--pane-shadow); font-size: 14px; color: var(--text-2); }
.dp-head { margin: 0; padding: 4px 8px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.dp-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; border-radius: 6px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.dp-note { margin: 0; padding: 6px 8px 4px; max-width: 220px; font-size: 12px; line-height: 1.35; color: var(--text-muted); border-top: 1px solid var(--border); }
.dp-item span { flex: 1; }
.dp-item b { font-variant-numeric: tabular-nums; color: var(--text-strong); }
.dp-item:hover, .dp-item:focus-visible { background: var(--surface-2); color: var(--text-strong); outline: none; }
.dp-item:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.dp-item.is-on { background: var(--surface-2); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border-hover); }
.dc-pip.is-all { border: 1.5px solid var(--text-muted); }
.dc { display: flex; align-items: center; gap: 6px; min-height: 22px; margin: 0 -5px; padding: 0 5px; border-radius: 6px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; text-decoration: none; }
.dc b { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.dc:hover { background: var(--surface-2); color: var(--text-strong); }
.dc.is-on { background: var(--surface-2); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border-hover); }
.dc-pip { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dc-pip.is-h { background: var(--hit); }
.dc-pip.is-m { background: var(--miss); }
.dc-pip.is-o { background: repeating-linear-gradient(135deg, var(--text-muted) 0 2px, transparent 2px 5px), var(--track); }
.dc-pip.is-v { border: 1.5px solid var(--text-muted); }
@media (pointer: coarse) { .dc { min-height: 26px; } }
/* Not played picks of the lit day, said once under the strip (not a tile's count, #274). */
.day-void { flex: 1 1 100%; margin: 0; font-size: 13.5px; color: var(--text-2); }
.day-void a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.day-void[hidden] { display: none; }
/* The bar over a list cut to one result (a count on a tile), with the way back to the whole day. */
.res-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: var(--r-sm); background: var(--surface); font-size: 14px; color: var(--text-2); }
.res-filter b { color: var(--text-strong); }
.res-filter a { white-space: nowrap; font-weight: 700; }
.ha-list > .res-filter { margin: 0; }
.day b { font-size: 14px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.day b .d-date { font-weight: 500; color: var(--text-2); margin-left: .3em; }
.day small { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
/* A day ahead with its matches known: "13 meczów" over "3 typy" (#274). */
.day small .d-games, .day small .d-picks { display: block; }
.day small .d-picks { color: var(--text-2); font-weight: 600; }
/* A settled day's result in its tile, "✓ 8 z 10" (task #186); the rest of the sentence only heard. */
.day small .rmk { --rmk: 13px; margin-right: 4px; vertical-align: -.15em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.day:hover { border-color: var(--border-hover); }
.day.is-on { border-color: var(--green); box-shadow: inset 0 -3px 0 var(--green); }
/* Empty days (task #229 C2, variant 2): no fill; a solid frame when nothing is on or picked, a dashed one
   when the schedule is not out yet; several in a row are one tile with their range. */
.day.is-empty { background: transparent; }
.day.k-later { border-style: dashed; }
.day.is-empty.is-on { border-style: solid; }
.day.is-cal { align-self: stretch; flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.day.is-cal svg { width: 18px; height: 18px; flex: none; }
.day.is-cal[aria-expanded="true"] { border-color: var(--green); }
.days.is-fill .day:not(.is-cal) { flex: 1 0 auto; }
/* Every tile as wide as the widest (task #212): sharing the row, equal parts of it. */
.days.is-eq.is-fill .day:not(.is-cal) { flex: none; }
.days.is-fill .day.is-cal { margin-left: auto; }
.days.is-strip { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.days.is-strip .day { scroll-snap-align: start; }
.days.is-strip::after { content: ""; flex: none; width: var(--trail, 0px); margin-left: -6px; }
.days.is-strip .day:not(.is-cal) { min-width: 0; }
/* A little tighter when that lets all ten share the row: the calendar as an icon (its name still read). */
.days.is-tight { gap: 4px; }
.days.is-tight .day { min-width: 0; padding-left: 9px; padding-right: 9px; }
.days.is-tight .day small { font-size: 12px; }
.days.is-tight .day.is-cal { padding: 0 10px; }
.days.is-tight .cal-label, .days.is-strip .cal-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.days.is-strip.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.days.is-strip.is-dragging .day { pointer-events: none; }
/* The edge fades only while there is more that way (a mask: only its opacity counts). */
.days[data-fade~="l"] { -webkit-mask-image: linear-gradient(90deg, transparent, var(--bg) 22px); mask-image: linear-gradient(90deg, transparent, var(--bg) 22px); }
/* Task #274: the calendar tile stays at the strip's right end whatever the scroll (an icon), over the tiles
   that pass under it, which show beside it: that is the sign of more, so no fade on the right. */
.days.is-strip .day.is-cal { position: sticky; right: 0; z-index: 3; padding: 0 12px; box-shadow: -10px 0 8px -4px var(--bg); }

/* The calendar: one day or a range, under the days on Dziś and under the filters in Wyniki. */
.cal-pop { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-start; }
.cal-pop[hidden] { display: none; }
.cal { display: flex; flex-direction: column; gap: 10px; width: 336px; max-width: 100%; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.live-filters .cal { background: var(--bg); }
.cal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--text-strong); }
.cal-head button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: inherit; font-size: 18px; cursor: pointer; }
.cal-head button:hover:not(:disabled) { background: var(--surface-2); }
.cal-head button:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cal-grid > * { height: 38px; display: grid; place-items: center; border-radius: 7px; position: relative; color: var(--text-2); }
.cal-grid button { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.cal-grid .dow { height: 22px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.cal-grid button:hover { background: var(--surface-2); }
.cal-grid .is-today { box-shadow: inset 0 0 0 1.5px var(--green); color: var(--text-strong); font-weight: 700; }
.cal-grid .has::after, .cal-grid .soon::after { content: ""; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; }
.cal-grid .has::after { background: var(--green); }
.cal-grid .soon::after { box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.cal-grid .off { color: var(--text-muted); }
.cal-grid .in { background: var(--surface-2); color: var(--text-strong); border-radius: 0; }
.cal-grid .edge { background: var(--green); color: var(--green-ink); font-weight: 800; }
.cal-grid .edge:hover { background: var(--green); }
.cal-grid .edge::after { background: var(--green-ink); box-shadow: none; }
.cal-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-muted); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.dot.is-soon { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.cal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; color: var(--text-2); border-top: 1px solid var(--border); padding-top: 10px; }
.cal-foot b { color: var(--text-strong); }
.cal-go { flex: none; height: 38px; padding: 0 16px; font-size: 12px; }
.cal-help { flex: 1 1 220px; max-width: 360px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

/* Wyniki: the period as chips (Dzisiaj, Wczoraj, Ostatnie 7 / 30 dni, Wybierz dni…). */
.field-wide { flex: 1 1 100%; min-width: 0; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-row button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-2); font: 600 13.5px var(--font); white-space: nowrap; cursor: pointer; }
.chips-row button:hover { border-color: var(--border-hover); color: var(--text-strong); }
.chips-row button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.chips-row svg { width: 15px; height: 15px; flex: none; }
.results-bar b { color: var(--text-2); }

/* A day ahead: a match with no pick yet, and the line saying when its picks come out. */
.soon-tag { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--text-muted); color: var(--text-2); white-space: nowrap; }
.row.is-soon { padding-top: 11px; padding-bottom: 11px; cursor: default; }
.row.is-soon:hover { background: none; }
.row.is-soon .soon-tag { grid-column: 3 / 6; grid-row: 1; justify-self: end; }
.note-line { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); padding: 10px 14px; border: 1px dashed var(--border-hover); border-radius: var(--r); }
/* Task #146, M3: a match with facts opens "Przed meczem" under its row; facts only, no chance. */
.row.is-toggle { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--border); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.row.is-toggle:first-child { border-top: 0; }
.row.is-soon.is-toggle:is(:hover, :active, :focus-visible) { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--green); }
.row.is-toggle .row-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.row.is-toggle[aria-expanded="true"] .row-go svg { transform: rotate(180deg); }
.pre { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-top: 1px dashed var(--border-hover); background: var(--bg-2); font-size: 14px; color: var(--text-2); }
.pre[hidden] { display: none; }
.pre p { margin: 0; }
.pre-title { font: 700 12.5px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pre-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 28px; }
.pre-side { min-width: 0; }
.pre-side h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; }
.pre-side h4 small { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.pre .pre-kv { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; font-size: 13.5px; line-height: 1.4; color: var(--text-muted); }
.pre-kv b, .pre-line b { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.pre .pre-k { margin-bottom: 4px; font-size: 12.5px; color: var(--text-muted); }
.pre-forms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pre-form { display: inline-flex; gap: 4px; }
.pre-form .wl { width: 22px; height: 22px; background: var(--surface-2); color: var(--text-2); }
.pre-form .wl.wl-w { background: var(--hit-soft); color: var(--hit-soft-text); }
.pre-form .wl.wl-l { background: var(--miss-soft); color: var(--miss-soft-text); }
.pre-form .wl.is-last { outline: 2px solid var(--text-muted); outline-offset: 1px; }
.pre-new { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pre-line { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.pre-foot { padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: var(--text-muted); }

/* ---------- Dziś: the list beside the numbers ---------- */
.today { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.today-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.today-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.group { display: flex; flex-direction: column; gap: 10px; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font: 700 26px/1.1 var(--display); color: var(--text-strong); }
.group-head small { font: 500 13px/1.3 var(--font); color: var(--text-muted); }
/* The list's key behind a "?" at the end of Dziś's first header (task #186, variant A's "?"): a 26 px
   circle with a 44 px touch area; the box opens under the whole header (on a phone its second line
   too), at its right edge, over the list. */
.group-top { display: flex; align-items: flex-start; gap: 12px; position: relative; }
.group-top > .group-head { flex: 1 1 auto; min-width: 0; }
.key-wrap { flex: none; }
.key-btn {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; margin-top: 1px;
  border: 1.5px solid var(--text-muted); border-radius: 50%; background: var(--surface); color: var(--text-2);
  font: 700 14px/1 var(--font); cursor: pointer;
}
.key-btn::after { content: ""; position: absolute; inset: -9px; }
.key-btn:hover, .key-btn[aria-expanded="true"] { border-color: var(--green); color: var(--text-strong); }
.key-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 4; width: 280px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 14px 34px -8px var(--pane-shadow); font: 400 13.5px/1.45 var(--font); color: var(--text-2); text-align: left;
}
.key-pop[hidden] { display: none; }
.key-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.key-pop li { display: flex; align-items: center; gap: 8px; }
.key-pop li b { color: var(--text-strong); }
.key-pop p { margin: 0; }
.key-sym { display: inline-flex; justify-content: center; width: 18px; flex: none; }
.key-pop .goat { --goat-h: 15px; margin: 0; }
.key-pop .rmk { --rmk: 14px; }
.day-sub { margin-top: 6px; font: 700 15px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(70px, 130px) 48px 104px var(--go-w, 16px);
  grid-template-areas: "time names bar pct tier go"; align-items: center; gap: 6px 14px;
  padding: 13px 16px; border-top: 1px solid var(--border); color: var(--text-2);
}
.row:first-child { border-top: 0; }
.row:hover { background: var(--surface-2); }
/* Task #202 c: a pick row lights up under the pointer, the finger or the keyboard: the surface a step
   lighter, an accent line on its left edge, the pick's underline a little thicker (a shadow and a
   decoration, so nothing moves). Not the row whose analysis is open: it is lit already (.is-open). */
.row { transition: background-color .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; }
.row:not(.is-open):is(:active, :focus-visible) { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--green); }
@media (hover: hover) { .row:not(.is-open):hover { box-shadow: inset 3px 0 0 var(--green); } }
.row:not(.is-open):is(:hover, :active, :focus-visible) .pk-name { text-decoration-thickness: 3px; }
.row.is-soon:is(:hover, :active, :focus-visible) { background: none; box-shadow: none; }
.row-time { grid-area: time; font-size: 14.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.row-names { grid-area: names; min-width: 0; font-size: 15px; line-height: 1.35; }
.row-names b { color: var(--text-strong); font-weight: 700; }
.row-names small { color: var(--text-muted); font-size: 13px; }
.row-dash { color: var(--text-muted); }
.row-note { display: block; margin-top: 2px; font-size: 12px; color: var(--warn-text); }
/* #265: the pill (kept for the older markup). */
.row-names .row-vs, .vs-pill { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--warn-line); border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); font-size: 11.5px; font-weight: 700; line-height: 1.55; white-space: nowrap; }
.chip-score { align-self: center; font-size: 13px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-bar { grid-area: bar; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--track) 80%, var(--text-muted)); box-shadow: inset 0 0 0 1px var(--border-hover); overflow: hidden; }
.row-bar i { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.row-bar i.is-b { margin-left: auto; }
.row-pct { grid-area: pct; text-align: right; font: 800 21px/1 var(--display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.row .tier-tag { grid-area: tier; justify-self: start; white-space: nowrap; }
.row-go { grid-area: go; display: flex; justify-content: center; align-items: center; font-weight: 700; color: var(--text-muted); }
/* Round 3 (#280, the owner's pick of the mockup v3-wynik-runda-3, list A option 1): no chip. A settled pick ends in its score as
   coloured text with the mark ("2:1 ✓", "0:2 ✗"; the colour says hit or miss, the digits add to it), and the row has a coloured edge
   (a shadow, so nothing moves; it stays under the pointer, the open row keeps its green one). A list holding a score makes the end
   column wide enough for it in every row (--go-w), so the levels stay in one column. Without a score (MMA, older tennis) the mark stands alone. */
.rows:has(.row-sc b) { --go-w: 112px; }
/* Under the dimmed page of a phone or a tablet the narrow list keeps the older two-line template, which has no room for the digits: the mark alone there. */
@media (max-width: 1099px) {
  @container (max-width: 600px) {
    html.pane-open:not(.pane-over) .rows .row { --go-w: 22px; }
    html.pane-open:not(.pane-over) .row-sc b { display: none; }
  }
}
.row-sc { grid-area: go; justify-self: end; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 800 20px/1.3 var(--display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.row-sc .rmk { --rmk: 15px; color: inherit; }
.row-sc > .rmk:only-child { --rmk: 18px; }
.row-sc.is-hit { color: var(--hit); }
.row-sc.is-miss { color: var(--miss); }
.row.has-edge.is-hit:not(.is-open) { box-shadow: inset 3px 0 0 var(--hit); }
.row.has-edge.is-miss:not(.is-open) { box-shadow: inset 3px 0 0 var(--miss); }

/* ---------- Dziś: the headline number and the calibration ---------- */
.box { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.box h3 { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.headline-num { font: 800 64px/1 var(--display); color: var(--green); }
.headline-note { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.seg button {
  flex: 1 0 auto; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent;
  font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.seg button:hover { color: var(--text-strong); }
.seg button[aria-pressed="true"] { background: var(--green); color: var(--green-ink); }
:is(.today-side, .pick-side) .calib-sub { margin: 0; font-size: 13.5px; line-height: 1.5; }
:is(.today-side, .pick-side) .calib-row > span:first-child { color: var(--text-2); font-size: 14px; }
:is(.today-side, .pick-side) .calib-track { height: 10px; border-radius: 5px; background: var(--track); }
:is(.today-side, .pick-side) .calib-fill { display: block; height: 10px; border-radius: 5px; }
:is(.today-side, .pick-side) .calib-mark { top: -4px; bottom: -4px; width: 3px; border-radius: 2px; opacity: 1; }
.calib-v { font-size: 16px !important; font-weight: 800 !important; color: var(--text-strong); }
.calib-row.is-small .calib-v { color: var(--text-muted); }
.calib-row.is-small .calib-fill { opacity: .45; }
.calib-axis { position: relative; height: 16px; margin-top: -6px; font-size: 11.5px; line-height: 16px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.calib-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.calib-axis span:first-child { transform: none; }
.calib-axis span:last-child { transform: translateX(-100%); }

@media (max-width: 980px) {
  .today { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .leaguebar-inner { padding: 8px 16px; }
  .today-head { gap: 10px; }
  .days { margin: 0 -16px; padding: 0 16px; max-width: none; scroll-padding-inline: 16px; }
  .day { min-width: 84px; padding: 7px 10px; }
  .day b { font-size: 13.5px; }
  .day small { font-size: 12px; }
  .cal { width: 100%; }
  .cal-help { display: none; }
  .group-head { font-size: 22px; }
  .headline-num { font-size: 52px; }
}

/* A narrow list (a phone, or a side column such as "Inne typy z tego turnieju"): each side on its
   own line across the full width and the numbers under them, so a long name or club never breaks
   or gets cut (task #43, comments 8.10). By the list's own width, not the screen's. */
.rows { container-type: inline-size; }
@container (max-width: 600px) {
  .row {
    grid-template-columns: 58px minmax(0, 1fr) 40px 104px var(--go-w, 14px);
    grid-template-areas: "names names names names go" "time bar pct tier go";
    column-gap: 10px; padding: 12px 14px;
  }
  .row-time { font-size: 13px; white-space: nowrap; }
  .row-pct { font-size: 18px; }
  .row.is-soon .soon-tag { grid-column: 2 / 5; grid-row: 2; justify-self: start; }
  .pre { padding: 12px 14px 14px; }
  .pre-sides { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Wyniki: our picks by day, with a search (task #43) ---------- */
.live-filters { margin-bottom: 4px; }
.live-filters .field:not(.field-search) { min-width: 0; }
.day-list { display: flex; flex-direction: column; gap: 22px; }
.day-block { display: flex; flex-direction: column; gap: 14px; }
.day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding-bottom: 6px; border-bottom: 2px solid var(--border); font: 800 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--text-strong); }
.day-head small { font: 600 13px/1.3 var(--font); text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.day-block .group-head { font-size: 20px; }
/* The search stays open on a phone: it is the reason to come here (the archive keeps its toggle). */
@media (max-width: 720px) { .filters.live-filters:not(.is-open) { display: flex; } }

/* ---------- the page of one pick (task #43) ----------
   The pair as a title with the pick lit, the chances as one bar, then two columns: everything the
   page had (analysis, numbers, what decided, area by area, rating details, form) and beside it the
   other picks of the tournament and how often this tier comes in. */
.pick-head { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pick-meta { font-size: 13.5px; color: var(--text-muted); }
.pick-title { margin: 0; font: 800 40px/1.05 var(--display); color: var(--text-2); }
.pick-side-name.is-pick { color: var(--text-strong); }
.pick-side-name small { font: 600 15px var(--font); color: var(--text-muted); }
.pick-dash { color: var(--text-muted); font-weight: 600; }
.pick-duel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.pick-duel b { font: 800 28px/1 var(--display); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pick-duel b.is-pick { color: var(--green); }
.pick-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--track); }
.pick-bar i { display: block; height: 100%; background: var(--duel-rest); }
.pick-bar i + i { flex: 1; }
.pick-bar i.is-pick { background: var(--green); }
.pick-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.pick-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pick-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pick-side:empty { display: none; }
@media (max-width: 980px) { .pick-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .pick-head { padding: 18px 16px; }
  .pick-title { font-size: 30px; }
  .pick-side-name { display: block; }
  .pick-dash { display: none; }
  .pick-duel b { font-size: 24px; }
}

/* The market's average odds outside the names (tasks #26 and #130, v3.js withMarket): the number
   and the name side by side in a flex row, the number's box exactly one line of the name tall
   (its own line-height = the name's line box: --lh of the name over --mk, its size against the
   name's), so both are centred on the same line at any size; a name that wraps keeps the number
   on its first line. On a narrow list or page the sides stand one under the other and both
   numbers make a column before the names, right-aligned so the commas line up. */
.mk-side { --mk: .8; --lh: 1.35; display: inline-flex; align-items: flex-start; gap: .55em; max-width: 100%; vertical-align: top; }
.mk-side > :not(.mk) { min-width: 0; }
.mk { flex: none; font-family: var(--font); font-weight: 500; font-size: calc(var(--mk) * 1em); line-height: calc(var(--lh) / var(--mk)); letter-spacing: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick-title .mk-side { --mk: .45; --lh: 1.05; gap: .3em; }
/* In the title the number takes the title's font; Barlow's line box sits .05em above its capitals'
   middle, a gap that grows with the size, so the smaller number moves down by the difference. */
.pick-title .mk { font-family: var(--display); font-weight: 600; position: relative; top: calc((1 / var(--mk) - 1) * .05em); }
@media (max-width: 720px) {
  .pick-title .mk-side { --mk: .55; display: flex; }
  .pick-title .mk { order: -1; min-width: 2.6em; text-align: right; }
}

/* Archive rows: no start time, the competition and score under the names (task #43). */
#all-tips .row-time { display: none; }
#all-tips .row { grid-template-columns: minmax(0, 1fr) minmax(70px, 130px) 48px 104px 16px; grid-template-areas: "names bar pct tier go"; }
.row-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); font-weight: 400; }
@container (max-width: 600px) {
  #all-tips .row { grid-template-columns: minmax(0, 1fr) 40px 104px 14px; grid-template-areas: "names names names go" "bar pct tier go"; }
}
#all-tips { display: flex; flex-direction: column; gap: 22px; }
/* The pages of archive matches: no initials in coloured circles (task #43, A3). */
.m-player .avatar { display: none; }

/* ---------- Jak to działa, VIP, Konto (task #43) ---------- */
/* The four steps as a numbered list, not four cards (#231 E1 A, owner 11.10): a row each, the number
   in the margin, the step's name and its words in one line of text. */
.steps { list-style: none; margin: 0; padding: 0; max-width: 760px; border-top: 1px solid var(--border); counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 14px 4px 14px 2.2em; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 15px; line-height: 1.5; }
.steps li::before { content: counter(step) "."; position: absolute; left: 4px; top: 14px; font: 700 15px/1.5 var(--font); color: var(--text-muted); }
.steps b { color: var(--text-strong); font-size: 15px; }
.steps b::after { content: " "; }
.how-lead { color: var(--text-prose); font-size: 15px; line-height: 1.65; }
.how-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.how-facts div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); }
.how-facts small { font-size: 12.5px; color: var(--text-muted); }
.how-facts b { font: 800 28px/1 var(--display); color: var(--text-strong); }
.box-note { max-width: 640px; }
.box-note p { color: var(--text-2); line-height: 1.6; }
.box-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 480px) {
  .steps li { padding: 12px 2px 12px 2em; }
  .steps li::before { top: 12px; left: 2px; }
}

/* ---------- fixes from the review of /v3/ (8.10) ---------- */
.row-time { white-space: nowrap; }
.row-tbd { letter-spacing: .04em; white-space: nowrap; } /* "--:--": a tennis match not yet in the order of play (task #148) */
/* Lists without start times (archive rows, a day with no times) leave the time column out. */
.rows.no-time .row-time { display: none; }
.rows.no-time .row { grid-template-columns: minmax(0, 1fr) minmax(70px, 130px) 48px 104px 16px; grid-template-areas: "names bar pct tier go"; }
@container (max-width: 600px) {
  .rows.no-time .row { grid-template-columns: minmax(0, 1fr) 40px 104px 14px; grid-template-areas: "names names names go" "bar pct tier go"; }
}
/* After a page change the list starts below the sticky header, not under it. */
#live-section, #archive-section .results-bar { scroll-margin-top: calc(var(--head-h) + 16px); }
/* The side column spaced like the main one. */
.today-side, .pick-side { gap: 22px; }
/* Statistics' tables: even columns, and the first one the same width in every table, so the
   numbers line up from table to table (30% in some and 22% in others looked uneven, #144). */
.rec-table { table-layout: fixed; }
.rec-table tr > :first-child { width: 24%; }
/* Sport buttons: the short names where the full ones do not fit (a tablet). */
.sp-short { display: none; }
@media (max-width: 1100px) {
  .sport-btn { padding: 0 10px; gap: 8px; }
  .sp-long { display: none; }
  .sp-short { display: inline; }
}
/* Rows that scroll sideways fade at the edge, so it is clear there is more. The days fade only
   while there is more that way (above), so Jutro is never dimmed. */
.leaguebar-inner {
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
@media (max-width: 720px) {
  .league { padding: 6px 10px; }
  .pager { gap: 4px; }
  .pager-btn { min-width: 34px; height: 36px; padding: 0 8px; }
  /* 16 px or the iPhone zooms into the field. */
  .field input, .field select { font-size: 16px; }
  .how-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .how-facts div { padding: 10px; }
  .how-facts b { font-size: 22px; }
  .footer-inner { padding: 24px 16px; }
  .footnav { gap: 10px 18px; }
}

/* ---------- Settings popover: PL / EN and animations (tasks #120, #202) ----------
   Both left the drawer and the footer (owner 11.10): the gear in the header opens one popover with the
   colours, the time zone, the language and the animations switch. PL / EN are links (an address each);
   the switch is a button with role menuitemcheckbox, its state is aria-checked and <html data-motion>. */
.palette-menu { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; }
/* The menu is a flex column: on a phone under about 720 px high its content is taller than the menu, and the
   items shrank to nothing, the PL / EN switch (overflow hidden) first, 2 px high (#276). Now they keep their height and the menu scrolls. */
.palette-menu > * { flex-shrink: 0; }
.set-seg { display: flex; margin: 0 4px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.set-seg a { flex: 1; display: grid; place-items: center; min-height: 44px; padding: 0 8px; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.set-seg a + a { border-left: 1px solid var(--border); }
.set-seg a:hover { color: var(--text-strong); }
.set-seg a[aria-checked="true"] { background: var(--surface-2); color: var(--text-strong); box-shadow: inset 0 -2px 0 var(--green); }
.set-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; margin-top: 6px; padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: 600 14px/1.2 var(--font); text-align: left; cursor: pointer; }
.set-switch:hover { background: var(--surface-2); }
.set-switch .switch { position: relative; flex: none; width: 40px; height: 22px; border: 1px solid var(--text-muted); border-radius: 11px; background: var(--surface-2); transition: background .15s, border-color .15s; }
.set-switch .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform .15s, background .15s; }
.set-switch[aria-checked="true"] .switch { background: var(--green); border-color: var(--green); }
.set-switch[aria-checked="true"] .switch::after { transform: translateX(18px); background: var(--surface); }
/* Admins' "Podgląd: darmowy użytkownik" (task #266): a bar above the header while it is on, and what only an admin sees goes. */
.freeview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 8px 16px; background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); color: var(--warn-text); font-size: 13.5px; line-height: 1.4; text-align: center; }
.freeview-bar[hidden] { display: none; }
.freeview-bar button { min-height: 32px; padding: 0 12px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 700 13px/1 var(--font); cursor: pointer; }
:root[data-free-view] #lp-edit, :root[data-free-view] .footer-admin { display: none !important; }
.set-switch-note { margin: 0; padding: 0 10px 4px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
/* Switched off by the reader (or by the system's own setting, above): nothing moves; the ticker is a strip to scroll. */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="off"] .ticker-viewport { overflow-x: auto; scrollbar-width: none; }
/* Time zone (task #120): Warsaw or the reader's own, under the colours in the palette's menu and
   under PL / EN in the phone's drawer; the zone once above a day's list, beside a time only on the
   day the clocks change. */
.palette-head-tz { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.palette-hint, .tz-drawer-hint { margin: 0; padding: 4px 10px 6px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.tz-drawer { display: flex; flex-direction: column; gap: 6px; margin-top: -16px; }
.tz-drawer-head { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.tz-drawer-hint { padding: 0; }
.tz-drawer-head-2 { margin-top: 10px; }
.set-seg.drawer-lang { margin: 0; }
.set-seg.drawer-lang a[aria-current="true"] { background: var(--surface-2); color: var(--text-strong); box-shadow: inset 0 -2px 0 var(--green); }
.tz-seg { display: flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.tz-seg button { flex: 1; min-width: 0; min-height: 52px; padding: 6px 8px; border: 0; background: none; color: var(--text-muted); font: 700 14px/1.2 var(--font); cursor: pointer; overflow-wrap: anywhere; }
.tz-seg button + button { border-left: 1px solid var(--border); }
.tz-seg button small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; }
.tz-seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text-strong); box-shadow: inset 0 -2px 0 var(--green); }
.row-tz { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
/* English page, Polish analysis: one line that says so, above the text. */
.prose .lp-lang-note { display: block; width: fit-content; max-width: 100%; margin: -2px 0 10px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text-2); text-align: left; }

/* ---------- Our pick: a small badger head by the name, underlined (task #149, the owner's variant A) ----------
   Before the name when the two sides share a line, after it when they stand one under the other (#190).
   Since #309 the marker is the badger (class and variables keep the old name "goat"): the simplified
   head --brand-pick (one per palette, 186 x 155 box, so 1.2 times as wide as high). Kept small on
   purpose (owner, 9.10: the mockup's mark pulled the eye, most on the pick page and on a phone): 16 px high in a
   list, 14 px in a narrow list; 22 px in a pick page's title, 17 px on a phone. */
.goat { display: inline-block; flex: none; width: calc(var(--goat-h, 20px) * 1.2); height: var(--goat-h, 20px); margin-right: 4px; background: var(--brand-pick) center / contain no-repeat; vertical-align: -3px; }
/* The goat's tip (task #199): whose pick it marks, over the goat on hover or a tap (v3.js bindGoatTip). */
.goat-tip {
  position: fixed; z-index: 60; max-width: min(260px, calc(100vw - 16px)); padding: 6px 10px; pointer-events: none;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: 0 8px 24px -8px var(--pane-shadow); font-size: 13px; font-weight: 600; line-height: 1.35;
}
.goat-tip[hidden] { display: none; }
.goat[data-tip] { cursor: help; }
.pk { white-space: nowrap; }
.pk-name { text-decoration: underline 2px var(--green); text-underline-offset: 4px; text-decoration-skip-ink: none; }
/* A pick against the market (#265, owner's way 2): the same underline, dotted, in the warning colour; the note is its title. */
.pk-name.vs-n { text-decoration-style: dotted; text-decoration-color: var(--warn-text); cursor: help; }
.row-other { color: var(--text-muted); }
/* The key over a list, once (owner: "koza = nasz typ · ✓ trafiony · ✗ nietrafiony"). */
.pick-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 -10px; font-size: 13px; color: var(--text-muted); }
.pick-key > span { display: inline-flex; align-items: center; gap: 5px; }
.pick-key .goat { --goat-h: 15px; margin: 0; }
/* Every pick two lines on any width (task #212, the owner's variant C of the mockup v3-nazwiska,
   10.10): side_a over side_b, the numbers beside them in the same columns, the odds before each
   name. Both names start at the row's edge and the goat goes after the picked name (task #190: in a
   gutter before it, it left a gap before every name). A name longer than its line ends in "…" (the
   row's title has the whole pair); the underline keeps its 3 px under the cut. */
.row-dash { display: none; }
.row-names .row-side { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
.row-side ~ .row-side, .row-names .mk-side ~ .mk-side { margin-top: 4px; }
.row-side .pk { display: inline-flex; align-items: baseline; column-gap: 5px; min-width: 0; flex: 0 1 auto; }
.row-side .pk > .goat { order: 1; margin: 0; position: relative; top: 4px; }
.row-side :is(.pk-name, .row-other, .row-nm) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 3px; margin-bottom: -3px; }
.row-side > small { flex: none; margin-left: .3em; white-space: nowrap; }
.row-names .mk-side { display: flex; }
.row-names .mk { order: -1; min-width: 3.4em; text-align: right; }
/* Task #241 (owner, 11.10): a row without odds (football, some NFL games) keeps its names in the same
   column as the rows with odds in its list (the odds' 3.4em at .8 plus the .55em gap), and the smaller
   odds sit on the middle of the name's letters, not on their top. */
.rows:has(.mk) .row-names > .row-side { padding-left: calc(3.4em * .8 + .55em); }
.row-names .mk { position: relative; top: var(--mk-drop, .14em); }
/* Round 3 (#280): on a computer the market's price is a button right after the name, as at a bookmaker's: ours filled green, the rival's
   a grey pill. A wide list (container over 600 px) and the list beside the analysis panel; a phone keeps the number and the framed one of
   its card. */
@container (min-width: 601px) {
  .row-names .mk { order: 2; top: 0; min-width: 0; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-hover); color: var(--text-2); font: 700 13.5px/1.4 var(--font); }
  .row-names .mk.is-pick { background: var(--green); box-shadow: none; color: var(--green-ink); font-weight: 800; }
  .row-names .mk-side { align-items: center; gap: 10px; }
  .rows:has(.mk) .row-names > .row-side { padding-left: 0; }
}
@media (min-width: 1100px) {
  @container (max-width: 600px) {
    html.pane-open:not(.pane-over) .rows:not(.is-tight) .row-names .mk { order: 2; top: 0; min-width: 0; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-hover); color: var(--text-2); font: 700 13.5px/1.4 var(--font); }
    html.pane-open:not(.pane-over) .rows:not(.is-tight) .row-names .mk.is-pick { background: var(--green); box-shadow: none; color: var(--green-ink); font-weight: 800; }
    html.pane-open:not(.pane-over) .rows:not(.is-tight) .row-names .mk-side { align-items: center; gap: 10px; }
    html.pane-open:not(.pane-over) .rows:not(.is-tight):has(.mk) .row-names > .row-side { padding-left: 0; }
  }
}
.row-time .row-tz { margin-left: 2px; }
/* The weekday after a time that falls on another day in the zone shown (task #203). */
.row-wd { font-size: .78em; font-weight: 600; }
/* Under the Start list: the zone of its times and a link to the switch (task #203). */
.tz-note { margin: 2px 2px 0; font-size: 12.5px; color: var(--text-muted); }
@container (max-width: 600px) {
  .goat { --goat-h: 18px; }
}
.pick-side-name:not(.is-pick) { color: var(--text-muted); }
.pick-title .goat { --goat-h: 22px; margin-right: 6px; vertical-align: 0; }
/* The underline never touches the line under it (task #176), at any size: it ends .27em below the
   baseline and Barlow's accented capitals (Ś, Ż) rise .91em above the next one, so the pick's own
   lines are --pk-lh tall (a long name that wraps) and the pick keeps .14em more under it (the other
   name below it, or the title's next line). In a title of one name per line that is a margin; in
   "A – B" on one line the pick is one box whose padding the line makes room for. */
.pick-title { --pk-lh: 1.4; }
.pick-title .pk-name { text-decoration-thickness: .09em; text-underline-offset: .18em; }
.pick-title .pick-side-name.is-pick { display: inline-block; max-width: 100%; padding-bottom: .14em; line-height: var(--pk-lh); }
.pick-title .mk-side:has(> .is-pick) { --lh: var(--pk-lh); }
.pick-title .mk-side > .pick-side-name.is-pick { padding-bottom: 0; }
.pick-title .mk-side:has(> .is-pick):not(:last-child) { margin-bottom: .14em; }
/* A title of one name per line (the analysis panel; a pick page on a phone): the names start at
   the same edge and the goat goes after the picked name, "lub remis" after the goat (task #190). */
.an-title .pick-side-name.is-pick { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .22em; }
.an-title .pick-side-name.is-pick > .goat { order: 1; margin: 0; }
.an-title .pick-side-name.is-pick > small { order: 2; }
.pick-rec { margin: -4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.pick-rec b { color: var(--text-2); font-weight: 700; }
.pick-verdict { margin: 2px 0 0; font-size: 17px; line-height: 1.4; color: var(--text-2); }
.pick-verdict b { color: var(--text-strong); font-weight: 800; }
.pick-verdict b.is-pick { color: var(--green); }
/* Round 3 (#280, mockup v3-wynik-runda-3, B2): the header of a settled pick is a score card: a row a side (name, the market's price, the
   sets in tennis, the digits), the end of the match and the verdict in its foot. The winner's row is lit. */
.sb { display: block; border: 1px solid var(--border-hover); border-radius: var(--r); background: var(--surface-2); overflow: hidden; }
.sb-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); }
.sb-row:first-child { border-top: 0; }
.sb-name { flex: 1 1 auto; min-width: 0; font: 800 26px/1.15 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--text-muted); overflow-wrap: anywhere; }
.sb-row.is-w .sb-name { color: var(--text-strong); }
.sb-name small { font: 600 14px var(--font); text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.sb-name .goat { --goat-h: 22px; margin-right: 6px; vertical-align: 0; }
.sb-name .pk-name { text-decoration-thickness: .08em; text-underline-offset: .18em; }
.sb .odd { flex: none; font: 600 15px/1.3 var(--font); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb .odd.is-pick { color: var(--text-strong); font-weight: 700; }
.sb-sets { display: inline-flex; gap: 8px; font: 700 18px/1 var(--display); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sb-sets sup { margin-left: 1px; font-size: .62em; vertical-align: top; position: relative; top: -.1em; }
.sb-row.is-w .sb-sets { color: var(--text-2); }
.sb-g { flex: none; min-width: 1.2em; text-align: right; font: 800 40px/1 var(--display); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sb-row.is-w .sb-g { color: var(--text-strong); }
.sb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 9px 16px; border-top: 1px solid var(--border); background: var(--surface); font: 500 13.5px/1.35 var(--font); color: var(--text-2); }
.sb-foot .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.sb-foot .chip .rmk { --rmk: 14px; margin-right: 0; }
.sb-foot .chip-hit { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hit-soft-text) 30%, transparent); }
.sb-foot .chip-miss { box-shadow: 0 0 0 1px color-mix(in srgb, var(--miss-chip-text) 30%, transparent); }
@media (min-width: 1100px) {
  .sb .odd { padding: 2px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-hover); color: var(--text-2); }
  .sb .odd.is-pick { background: var(--green); box-shadow: none; color: var(--green-ink); font-weight: 800; }
}
@media (max-width: 720px) {
  .sb-row { padding: 9px 12px; gap: 8px; }
  .sb-name { font-size: 21px; }
  .sb-name .goat { --goat-h: 17px; margin-right: 5px; }
  .sb-g { font-size: 34px; }
  .sb-sets { font-size: 16px; gap: 6px; }
  .sb-foot { padding: 9px 12px; }
}
/* #265: the against-the-market line under the verdict. */
.pick-vs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.pick-vs .vs-pill { font-size: 12px; }
@media (max-width: 720px) {
  .pick-title { font-size: 26px; line-height: 1.15; }
  .pick-title .goat { --goat-h: 17px; margin-right: 5px; }
  .pick-title .pick-side-name.is-pick { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .22em; }
  .pick-title .pick-side-name.is-pick > .goat { order: 1; margin: 0; }
  .pick-title .pick-side-name.is-pick > small { order: 2; }
  .pick-verdict { font-size: 15px; }
}
/* ---------- the analysis beside the list (task #133, variant A of the mockup) ----------
   A pick opens in a panel: beside the list on a computer (the list narrows, the numbers box steps
   aside), a sheet from the bottom on a phone. Tabs on top (task #229): Analiza, Liczby, Forma; the
   pick page's sections, each tagged with the tab it once had (mapped to the three below). */
:root {
  --pane-w: clamp(560px, 55vw, 960px);
  --pane-shadow: color-mix(in srgb, var(--bg) 70%, transparent);
  --pane-scrim: color-mix(in srgb, var(--bg) 72%, transparent);
}
:root[data-palette="papier"], :root[data-palette="murawa"], :root[data-palette="maczka"] { --pane-shadow: color-mix(in srgb, var(--text) 22%, transparent); }
.an { position: fixed; z-index: 50; display: flex; flex-direction: column; min-height: 0; background: var(--surface); color: var(--text); }
.an:focus { outline: none; }
.an:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.an-tool { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 20px; border-bottom: 1px solid var(--border); }
.an-pos { margin-right: auto; min-width: 0; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-tool .icon-btn { width: 40px; height: 40px; font-size: 22px; line-height: 1; color: var(--text-2); }
.an-tool .icon-btn:hover:not(:disabled) { color: var(--text-strong); }
.an-tool .icon-btn:disabled { opacity: .4; cursor: default; }
.an-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#pane-body > .view { gap: 0; }
#pane-body > .tips-status, #pane-body > .tips-empty { margin: 20px; }
.an-head.pick-head { gap: 12px; padding: 18px 20px 16px; background: none; border: 0; border-radius: 0; }
.an-title.pick-title { font-size: 32px; }
/* The panel is narrow at any width: one name per line, as on a phone (the pick's dot stays by its name). */
.an-title .pick-side-name { display: block; }
.an-title .pick-dash { display: none; }
.an-title .mk-side { --mk: .55; display: flex; }
.an-title .mk { order: -1; min-width: 2.6em; text-align: right; }
@media (min-width: 1100px) {
  .an-title .mk-side { align-items: center; gap: 12px; }
  .an-title .mk { order: 2; top: 0; min-width: 0; padding: 1px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-hover); background: var(--surface-2); color: var(--text-2); font: 700 15px/1.4 var(--font); }
  .an-title .mk.is-pick { background: var(--green); box-shadow: none; color: var(--green-ink); font-weight: 800; }
}
.an-tabs {
  position: sticky; top: 0; z-index: 3; display: flex; gap: 2px; padding: 0 10px;
  background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none;
  /* Sideways only (task #217): overflow-x alone made the strip a vertical scroller too, and the
     tab's underline (margin-bottom: -1px) overflowed it by a pixel, so on a phone an up or down drag
     on the strip scrolled (and on iOS rubber-banded) the tabs out of sight instead of the panel. */
  overflow-y: hidden; overscroll-behavior-x: contain;
}
.an-tab {
  flex: none; padding: 12px 7px 11px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent;
  background: none; font-weight: 700; font-size: 14px; color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.an-tab:hover { color: var(--text-strong); }
.an-tab[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--green); }
.an-tab:focus-visible { outline-offset: -4px; }
.an-body { padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 16px; }
/* One tab at a time, three tabs (task #229, C4 A): Analiza = the text and what decided (skrot,
   czynniki), Liczby = the numbers, the areas and the rating; "Inne typy z tego turnieju" is the
   list beside the panel already. */
.an-body:not([data-show="skrot"]) :is([data-tab="skrot"], [data-tab="czynniki"]),
.an-body:not([data-show="liczby"]) :is([data-tab="liczby"], [data-tab="obszary"], [data-tab="rating"]),
.an-body:not([data-show="forma"]) [data-tab="forma"], .an-body [data-tab="inne"] { display: none; }
.an-body :is(.pick-two, .pick-main, .pick-side) { display: contents; }
/* The sections lie flat in the panel. The text's heading is the tab's name, so it is for screen
   readers; the other sections share a tab, so theirs show. */
.an-body :is(.pick-main > .panel, .pick-side > .box) { padding: 0; background: none; border: 0; border-radius: 0; }
.an-body .pick-main > .panel[data-tab="skrot"] > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.an-body .pick-main > .panel:not([data-tab="skrot"]) { padding-top: 6px; }
.an-body .pick-main > .panel > .panel-sub { margin-top: 0; }
.an-body :is(.pick-side > .box > h3, .pick-main > .panel > h3) { font: 700 20px/1.1 var(--display); color: var(--text-strong); }
.an-body .calib-sub { margin: 0; font-size: 13.5px; line-height: 1.5; }
.an-body .calib-row > span:first-child { color: var(--text-2); font-size: 14px; }
.an-body .calib-track { height: 10px; border-radius: 5px; background: var(--track); }
.an-body .calib-fill { display: block; height: 10px; border-radius: 5px; }
.an-body .calib-mark { top: -4px; bottom: -4px; width: 3px; border-radius: 2px; opacity: 1; }
.an-body .m-grid .panel { padding: 16px 18px; gap: 10px; }
.an-body .m-grid .panel h3 { font-size: 20px; }
.an-grip { display: none; }
.an-dim { display: none; }
/* The row of the open pick, in the list beside the panel. */
.row.is-open { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--green); }
.row { scroll-margin: calc(var(--head-h) + 12px) 0 12px; }

/* A computer: the panel the whole height of the window on the right, over the header, the days and
   the ticker (task #182: under the header it was too small on a laptop); the list stays on the left. */
@media (min-width: 1100px) {
  .an {
    top: 0; right: 0; bottom: 0; width: var(--pane-w); z-index: 22;
    border-left: 1px solid var(--border); box-shadow: -18px 0 40px -24px var(--pane-shadow);
  }
  .an .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an .m-grid { grid-template-columns: minmax(0, 1fr); }
  .an-body .prose { max-width: 80ch; }
  /* The home page of all sports (task #243): the panel is a layer over its list and charts, which
     stay where they were (pane-over, v3.js openPane); a sport's Dziś and Wyniki narrow beside it. */
  html.pane-open:not(.pane-over) .layout { margin: 0 var(--pane-w) 0 max(0px, calc((100% - var(--pane-w) - var(--max)) / 2)); width: auto; }
  /* The header's rows start where the list starts. The sports, leagues and ticker end at the panel
     (they scroll sideways as on a phone); the menu and buttons would be half under it, so they step
     out until it closes (no focus lands on a control hidden under the panel either). */
  html.pane-open:not(.pane-over) :is(.topbar-inner, .sportbar-inner, .leaguebar-inner, .ticker-inner) { margin-left: max(0px, calc((100% - var(--pane-w) - var(--max)) / 2)); }
  html.pane-open:not(.pane-over) :is(.sportbar-inner, .leaguebar-inner, .ticker-inner) { margin-right: var(--pane-w); }
  html.pane-open .topbar :is(.topnav, .topbar-actions) { visibility: hidden; }
  html.pane-open:not(.pane-over) .today { grid-template-columns: minmax(0, 1fr); }
  html.pane-open:not(.pane-over) .today-side { display: none; }
  /* Beside the panel a name never breaks inside (task #176): a pair too long for its line breaks
     at the dash. A list wide enough for one row per pick drops the bar there (the number says the
     same), which gives the names its room. */
  html.pane-open:not(.pane-over) .row-side, html.pane-open:not(.pane-over) .row-side .pk { white-space: nowrap; }
  @container (min-width: 601px) {
    html.pane-open:not(.pane-over) .row-bar { display: none; }
    html.pane-open:not(.pane-over) .row { grid-template-columns: 72px minmax(0, 1fr) 48px 104px var(--go-w, 16px); grid-template-areas: "time names pct tier go"; }
    html.pane-open:not(.pane-over) :is(#all-tips, .rows.no-time) .row { grid-template-columns: minmax(0, 1fr) 48px 104px var(--go-w, 16px); grid-template-areas: "names pct tier go"; }
  }
  /* A list narrower than that (task #192): two lines a pick, not three. The names one under the
     other, the chance at the end of the first name's line and the tier at the end of the second's,
     where the space was empty; the result mark larger, beside both. The first line is one line of
     the names high, so the time and the chance sit on the first name and the tier on the second.
     A list in which a name would not fit beside them (is-tight, measured in v3.js fitRows) keeps
     the three lines, so a name is never broken or cut. */
  @container (max-width: 600px) {
    html.pane-open:not(.pane-over) .rows:not(.is-tight) .row {
      grid-template-columns: 58px minmax(0, 1fr) auto var(--go-w, 22px); grid-template-rows: calc(15px * 1.35) auto;
      grid-template-areas: "time names pct go" ". names tier go"; row-gap: 4px;
    }
    html.pane-open:not(.pane-over) .rows.no-time:not(.is-tight) .row, html.pane-open:not(.pane-over) #all-tips .rows:not(.is-tight) .row {
      grid-template-columns: minmax(0, 1fr) auto var(--go-w, 22px); grid-template-areas: "names pct go" "names tier go";
    }
    html.pane-open:not(.pane-over) .rows:not(.is-tight) .row-bar { display: none; }
    html.pane-open:not(.pane-over) .rows:not(.is-tight) .row-names { align-self: start; }
    html.pane-open:not(.pane-over) .rows:not(.is-tight) :is(.row-pct, .tier-tag) { justify-self: end; }
    html.pane-open:not(.pane-over) .rows:not(.is-tight) .tier-tag { align-self: start; }
    html.pane-open:not(.pane-over) .rows:not(.is-tight) .row-go .rmk { --rmk: 21px; }
    html.pane-open:not(.pane-over) .rows:not(.is-tight) .row.is-soon .soon-tag { grid-column: 3 / 5; grid-row: 1; justify-self: end; }
  }
}
/* From 1400 px the panel is 770 px or more: the numbers in three columns, the two forms side by side. */
@media (min-width: 1400px) {
  .an .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an .m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A phone or a tablet: a sheet from the bottom over the dimmed page; its handle drags it to half the
   screen, back to the top, or down to close (v3.js buildPane). */
@media (max-width: 1099px) {
  .an {
    top: 28px; left: 0; right: 0; bottom: 0; max-width: 760px; margin: 0 auto;
    border: 1px solid var(--border); border-bottom: 0; border-radius: 18px 18px 0 0; overflow: hidden;
    box-shadow: 0 -18px 40px -16px var(--pane-shadow); transition: transform .2s ease, top .22s ease;
    animation: pane-up .22s ease;
  }
  /* Half the screen (task #229, C4 A): the list above stays in sight and in reach. */
  .an.is-half { top: 50dvh; }
  .an.is-drag { transition: none; }
  .an-dim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 49; background: var(--pane-scrim); cursor: pointer; }
  .an-grip { display: grid; flex: none; place-items: center; width: 100%; height: 24px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
  .an-grip::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--text-muted); }
  .an-grip:focus-visible { outline-offset: -4px; }
  .an-tool { padding: 0 8px 8px 16px; }
  html.pane-open:not(.pane-half) { overflow: hidden; scrollbar-gutter: stable; }
  /* The list can scroll its last rows up out from under the half sheet. */
  html.pane-half body { padding-bottom: 50dvh; }
}
@keyframes pane-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .an { animation: none; transition: none; } }
@media (max-width: 720px) {
  .an-title.pick-title { font-size: 26px; }
  .an-head.pick-head { padding: 14px 16px; }
  .an-body { padding: 16px 16px 24px; }
  .an-tabs { padding: 0 6px; }
  /* Three tabs share the phone's width (task #229). */
  .an-tab { flex: 1 1 0; text-align: center; }
  .an .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Numbers that can be believed (task #227, owner's choices A1 A, A5 A, A6 B) ---------- */
/* "mała próbka": a quiet outlined tag in the palette's warning colour */
.small-n { display: inline-flex; align-items: center; font: 700 11.5px/1 var(--font); padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; color: var(--warn-text); white-space: nowrap; vertical-align: middle; }
.small-n[hidden] { display: none; }
/* A1: the live record on top of the home page, the test on history under it as a footnote */
.live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.live-kicker { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.box-headline .foot { padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.box-headline .foot b { color: var(--text-2); }
.live-mini[hidden] { display: none; }
.live-mini { display: none; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
.live-mini .headline-num { font-size: 44px; }
.live-mini > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.live-mini .headline-note { font-size: 13.5px; line-height: 1.4; }
.live-mini .headline-note b { color: var(--text-strong); }
.lm-hist { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
/* A5: three numbers and one sentence, the rest under "więcej" */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.trio > div { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trio > div + div { border-left: 1px solid var(--border); }
.trio strong { font: 800 30px/1 var(--display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.trio strong.is-main { color: var(--green); }
.trio span { font-size: 12.5px; color: var(--text-muted); line-height: 1.3; }
.box > .trio { background: var(--bg-2); }
.one-line { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.one-line b { color: var(--text-strong); }
.more-btn { border: 0; background: none; padding: 0; color: var(--green); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.more-body { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); padding: 10px 12px; margin-top: 8px; border-radius: var(--r-sm); background: var(--bg-2); display: flex; flex-direction: column; gap: 6px; }
.more-body[hidden] { display: none; }
.more-body > span { display: block; }
.coin-note { font-size: 12.5px; color: var(--text-muted); }
.coin-note b { color: var(--text-2); font-weight: 600; }
/* The coin flips, counted apart from the headline hit rate (task #287). */
.rec-coin { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.res-stack { display: flex; flex-direction: column; gap: 10px; }
/* A6: the record by tier as rows on a phone (a computer keeps the table) */
.tier-rows { display: none; }
.tc-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.tc-list > h3 { padding: 14px 16px 4px; font-size: 15px; color: var(--text-strong); }
.tc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "tag cnt pct" "bar bar bar" "sub sub sub"; align-items: center; gap: 6px 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.tc-list > h3 + .tc-row { border-top: 0; }
.tc-row .tier-tag { grid-area: tag; justify-self: start; }
.tc-cnt { grid-area: cnt; font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tc-cnt b { color: var(--text-strong); }
.tc-pct { grid-area: pct; font: 800 24px/1 var(--display); color: var(--text-strong); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.tc-bar { grid-area: bar; }
.tc-sub { grid-area: sub; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.tc-row.is-coin .tc-pct, .tc-row.is-coin .tc-cnt b { color: var(--text-muted); }
.tc-row.is-small .tc-pct { color: var(--text-muted); }
@media (max-width: 720px) {
  .live-mini { display: flex; }
  .box-headline.is-live { display: none; }
  .trio strong { font-size: 26px; }
  .trio > div { padding: 10px 10px; }
  .has-tier-rows > .rec-table-wrap { display: none; }
  .has-tier-rows > .tier-rows { display: block; }
}
.calib-tier-note { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
#calib-more:empty { display: none; }
.tc-bar { height: 10px; border-radius: 5px; background: var(--track); }
.tc-bar .calib-fill { display: block; height: 10px; border-radius: 5px; }
.tc-bar .calib-mark { top: -4px; bottom: -4px; width: 3px; border-radius: 2px; opacity: 1; }
.results-bar > #live-count { flex: 1; min-width: 0; }
/* On a phone "Wyczyść filtry" sat beside the three numbers and took a quarter of the row (#277): the numbers
   ("43 z 54") broke in two; now the reset link goes under them and the numbers get the whole width. */
.trio strong { white-space: nowrap; }
@media (max-width: 720px) {
  .results-bar { flex-wrap: wrap; }
  .results-bar > #live-count { flex: 1 1 100%; }
  .results-bar > #live-reset { margin-left: auto; }
}
/* "102 z 135" at 26 px was wider than its third of a 375 px screen; the small-sample note goes under the label. */
@media (max-width: 480px) {
  .trio strong { font-size: 22px; }
  .trio > div .small-n { display: block; margin: 2px 0 0; }
}
@media (max-width: 359px) {
  .trio > div { padding: 10px 8px; }
  .trio strong { font-size: 19px; }
}
.trio .small-n { color: var(--warn-text); font-size: 11.5px; margin-left: 4px; }

/* ---------- #260: the pick card on a phone (the owner's variant G of the mockup v3-telefon-karta-runda-2, with his
   changes of 11.10) ----------
   A narrow list (a phone, or a column such as "Inne typy z tego turnieju"): a head line (the time, the tier, the
   result), under it the two sides with their odds in a column at the right (ours framed) and the percent beside
   them, and a bar along the row's bottom edge that fills from the picked side's end: the left for the side on top,
   the right for the one under it. A long name or a four-part one wraps to a second line, never cut. Beside the
   analysis panel (html.pane-open, a list that is not is-tight) the older two-line layout stays. */
@container (max-width: 600px) {
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row {
    position: relative; overflow: hidden; padding: 10px 14px 12px; gap: 7px 8px; align-items: center;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-rows: auto;
    grid-template-areas: "time go score . tier" "names names names names names" "bar bar bar bar bar";
  }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) #all-tips .row, :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .rows.no-time .row {
    grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-rows: auto;
    grid-template-areas: "time go score . tier" "names names names names names" "bar bar bar bar bar";
  }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-time { font-size: 13px; line-height: 1.2; }
  /* #260 round 2 (owner, 12.10): the tier badge sits at the card's right edge where the chevron was, the result mark and the final
     score (#280) beside the time; the card itself (border, tap highlight) says it opens. The bar is a labelled track: the percent
     stands in the fill, at the end the fill grows from, so it reads as a percentage. */
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row .tier-tag { justify-self: end; align-self: center; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-go { grid-area: go; justify-self: start; align-self: center; min-width: 0; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-go:not(:has(.rmk)) { display: none; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-go .rmk { --rmk: 18px; }
  /* round 3 (#280): the score and the mark as one coloured text beside the time, where the mark alone stood */
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-sc { grid-area: go; justify-self: start; align-self: center; font-size: 18px; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-names { align-self: start; font-size: 14.5px; line-height: 1.3; --mk: .93; --lh: 1.3; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-bar { grid-area: bar; position: relative; height: 24px; border-radius: 12px; background: color-mix(in srgb, var(--track) 80%, var(--text-muted)); box-shadow: inset 0 0 0 1px var(--border-hover); }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-bar i { border-radius: 12px; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-pct { grid-area: bar; position: relative; z-index: 1; align-self: center; justify-self: start; padding: 0 12px; font: 800 16px/24px var(--display); letter-spacing: .02em; color: var(--green-ink); }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-pct.is-b { justify-self: end; }
  /* the sides: the name wraps, the odds stay at the right on the first line */
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-names .row-side, :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-names .mk-side { align-items: flex-start; white-space: normal; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-names .mk-side { width: 100%; gap: 8px; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-names .mk-side > .row-side { flex: 1 1 auto; min-width: 0; padding-left: 0; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .rows:has(.mk) .row-names > .row-side { padding-left: 0; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-side ~ .row-side, :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-names .mk-side ~ .mk-side { margin-top: 5px; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-side .pk { white-space: normal; align-items: flex-start; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-side :is(.pk-name, .row-other, .row-nm) { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; padding-bottom: 0; margin-bottom: 0; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-side .pk > .goat { top: 0; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-names .mk { order: 2; min-width: 3.1em; margin-left: auto; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; text-align: center; top: 0; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row-names .mk.is-pick { color: var(--text-strong); font-weight: 700; border-color: var(--border-hover); background: var(--surface-2); }
  /* a match with no pick yet: no percent, the names across the row */
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row.is-soon { padding-bottom: 11px; grid-template-columns: auto minmax(0, 1fr) auto 20px; grid-template-areas: "time . tier go" "names names names names"; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row.is-soon .row-go { display: flex; grid-area: go; justify-self: end; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row.is-soon .soon-tag { grid-area: tier; justify-self: end; }
  :is(html:not(.pane-open), html.pane-over, html.pane-open .rows.is-tight) .row.is-soon .row-names { grid-area: names; grid-column: 1 / -1; }
}
@media (max-width: 632px) {
  /* a card each, with a gap between them, instead of one box with hairlines (the list is as wide as a narrow container) */
  :is(.group, .ha-sport) > .rows, #all-tips .rows { gap: 10px; border: 0; border-radius: 0; background: none; overflow: visible; }
  :is(.group, .ha-sport) > .rows > .row, #all-tips .rows > .row { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
  :is(.group, .ha-sport) > .rows > .row.is-open, #all-tips .rows > .row.is-open { background: var(--surface-2); }
  :is(.group, .ha-sport) > .rows > .row.is-toggle[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
  :is(.group, .ha-sport) > .rows > .row.is-toggle + .pre { margin-top: -10px; border: 1px solid var(--border); border-top: 1px dashed var(--border-hover); border-radius: 0 0 var(--r) var(--r); }
}

/* ---------- padlocked picks and the free VIP picks (task #286) ----------
   A teaser row: the match, the time and the level; a dashed "dla VIP" chip where the side and the chance would be. It is a
   flex row (not the 6-column grid of .row), so none of the grid layouts of the list, the open pane or the phone card applies;
   on a narrow list the names take the first line and the time, the chip and the level the second. */
.lock-ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.row.is-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.row.is-locked .row-time { flex: 0 0 72px; }
.row.is-locked .row-names { flex: 1 1 200px; min-width: 0; }
.row.is-locked .row-side { white-space: normal; }
.row-lock { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 11px; border: 1px dashed var(--border-hover); border-radius: 999px; color: var(--text-2); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.row.is-locked .row-go { flex: none; width: 16px; text-align: center; color: var(--text-muted); }
@container (max-width: 600px) {
  .row.is-locked .row-names { order: 1; flex: 1 1 calc(100% - 40px); }
  .row.is-locked .row-go { order: 2; }
  .row.is-locked .row-time { order: 3; flex: none; }
  .row.is-locked .row-lock { order: 4; }
  .row.is-locked .tier-tag { order: 5; }
}
.rows.no-time .row.is-locked .row-time { display: none; }
.gift-bar { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: var(--r); background: var(--surface); }
.gift-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 14px; color: var(--text-2); }
.gift-head b { color: var(--text-strong); font-size: 15px; }
.gift-bar > .rows { border: 0; border-radius: 0; background: none; }
.lock-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; }
.lock-note .lock-ico { margin-top: 3px; }
.lock-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.lock-card .lock-ico { width: 20px; height: 20px; color: var(--green); }
.lock-card p { margin: 0; }

/* Unlocks for new accounts (task #286, site/v3/unlock.js; variant C of the mockup v3-vip-darmowy-i-zamek). Tokens only. The row's
   "Odblokuj", the bar over a day's list, the padlock page (clock, steps, one big button, a sticky bar on a phone) and the
   confirmation. */
.row-lock.row-unlock { border-style: solid; border-color: var(--green); background: var(--green); color: var(--green-ink); cursor: pointer; }
.row-lock.row-unlock:hover { background: var(--green-hover); border-color: var(--green-hover); }
.row-lock.row-unlock:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.row-lock.row-unlock .lock-ico { color: inherit; }
.unlock-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: var(--r); background: var(--surface); }
.unlock-bar.is-spent, .unlock-bar.is-over, .unlock-bar.is-unverified { border-left-color: var(--warn-line); }
.unlock-bar-text { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 260px; min-width: 0; color: var(--text-2); }
.unlock-bar-text .lock-ico { margin-top: 3px; width: 18px; height: 18px; color: var(--green); }
.unlock-bar-text > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.unlock-bar-text b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--text-strong); font-size: 15px; }
.unlock-bar-text small { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.unlock-bar-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.unlock-dots { display: inline-flex; gap: 5px; }
.unlock-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text-muted); }
.unlock-dots i.is-on { background: var(--green); border-color: var(--green); }
.lock-card.lk-c { gap: 16px; }
.lk-clock { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-text); }
.lock-card .lk-clock .lock-ico { width: 20px; height: 20px; margin-top: 2px; color: inherit; }
.lk-clock b { color: var(--text-strong); }
.lk-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lk-steps li { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.lk-steps li b { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: var(--green-ink); font: 800 17px/1 var(--display); }
.lk-main { display: flex; flex-direction: column; gap: 6px; }
.lk-main small { text-align: center; font-size: 13px; color: var(--text-2); }
.lk-big { width: 100%; justify-content: center; text-align: center; padding-block: 15px; font-size: 17px; }
.lk-or { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; color: var(--text-2); }
.lk-or::before, .lk-or::after { content: ""; flex: 1; height: 1px; background: var(--border-hover); }
.lk-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.lk-cta .btn { flex: 1 1 220px; justify-content: center; text-align: center; }
.lk-notice { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border-hover); background: var(--surface-2); color: var(--text-strong); font-weight: 600; }
.lk-sticky { display: none; }
@media (max-width: 820px) {
  .lk-sticky { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin: 0 -20px -28px; border-top: 1px solid var(--border-hover); background: var(--surface); }
  .lk-sticky span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; color: var(--text-strong); }
  .lk-sticky small { font-size: 12.5px; color: var(--text-2); }
  .lk-sticky .btn { flex: none; }
}
.unlock-dlg { width: min(420px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--border-hover); border-radius: var(--r-lg); background: var(--surface); color: var(--text); }
.unlock-dlg::backdrop { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.unlock-dlg h3 { margin: 0 0 8px; font: 700 22px/1.15 var(--display); color: var(--text-strong); }
.unlock-dlg p { margin: 0 0 10px; line-height: 1.5; color: var(--text-2); }
.unlock-dlg .unlock-dlg-match { font-weight: 700; color: var(--text-strong); }
.unlock-dlg .unlock-dlg-err { font-weight: 600; color: var(--miss); }
.unlock-dlg-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.perks { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }