/* Custom utilities ponad PicoCSS. */

:root {
  --pulse-meta-color: var(--pico-muted-color);
}

/* === Daily view === */

.daily-hero {
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 1.5rem;
}

.daily-lead {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
}

.daily-brief-meta {
  margin: 0.5rem 0 0;
  color: var(--pulse-meta-color);
}

/* Brief — jedna pełna wersja (tryby tweet/5min/15min zdjęte 2026-06-11) */
.brief-full {
  margin-bottom: 2rem;
}

/* === Brief: podcast + transkrypcja === */

.brief-back {
  margin: 0 0 0.5rem;
}

.brief-podcast {
  margin: 1.5rem 0 2.5rem;
  padding: 1.25rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
}

.brief-podcast > h2 {
  margin-top: 0;
}

.brief-podcast audio {
  width: 100%;
}

.brief-podcast-meta {
  margin: 0.5rem 0 0;
  color: var(--pulse-meta-color);
}

.brief-podcast-label {
  margin: 1rem 0 0.25rem;
}
.brief-podcast-label:first-of-type {
  margin-top: 0.25rem;
}

.brief-transcript {
  margin-top: 1.5rem;
  border-top: 1px solid var(--pico-muted-border-color);
  padding-top: 1rem;
}

.brief-transcript > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--pico-muted-color);
}

.dialog {
  margin: 1rem 0 0;
}

.dialog-turn {
  margin-bottom: 0.9rem;
}

.dialog-turn dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

.dialog-turn dd {
  margin: 0.1rem 0 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--pico-muted-border-color);
}

.dialog-host dd {
  border-left-color: var(--pico-primary);
}

.dialog-expert dd,
.dialog-guest1 dd {
  border-left-color: var(--confidence-medium, #b8860b);
}

/* Panel 3-osobowy: drugi gość trzecią barwą, żeby był wizualnie odróżnialny od pierwszego */
.dialog-guest2 dd {
  border-left-color: #2a7f9e;
}

/* === Brief: archiwum === */

.brief-archive {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.6rem;
}

.brief-archive-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  text-decoration: none;
}

.brief-archive-item:hover {
  border-color: var(--pico-primary);
}

.brief-archive-date {
  font-weight: 600;
}

.brief-archive-meta {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}

/* === Match list (dziś + upcoming) === */

.match-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.match-list li > a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.4rem;
  text-decoration: none;
}

.match-list strong {
  min-width: 3.5em;
}

.match-label {
  flex: 1 1 auto;
  font-weight: 500;
}

.match-meta {
  color: var(--pulse-meta-color);
  font-size: 0.85em;
}

/* === Team pulse (lista wpisów logów) === */

.pulse-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.pulse-list li {
  display: grid;
  grid-template-columns: 3em 9em 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--pico-muted-border-color);
}

.pulse-list li > strong {
  font-family: var(--pico-font-family-monospace, monospace);
}

.pulse-when {
  color: var(--pulse-meta-color);
  font-size: 0.85em;
  white-space: nowrap;
}

/* Kolumny przypięte na sztywno — brak godziny nie może wepchnąć tytułu do wąskiej kolumny (bug „tytuł pionowo") */
.pulse-list li > strong { grid-column: 1; }
.pulse-when { grid-column: 2; }
.pulse-title { grid-column: 3; }
.pulse-source { grid-column: 4; }
.news-gestures { grid-column: 1 / -1; }

.pulse-title {
  line-height: 1.35;
  min-width: 0;
}

.pulse-source {
  font-size: 0.85em;
  white-space: nowrap;
}

.pulse-details {
  grid-column: 1 / -1;
  font-size: 0.9em;
  color: var(--pico-color);
  border-left: 3px solid var(--pico-muted-border-color);
  padding-left: 0.8rem;
  margin-top: 0.2rem;
}
.pulse-details > :first-child { margin-top: 0; }
.pulse-details > :last-child { margin-bottom: 0; }
.pulse-details p { margin: 0.3rem 0; }

/* Newsy short/full: skrót = esencja w feedzie, pełny tekst w rozwijanym <details> */
.pulse-summary {
  grid-column: 1 / -1;
  font-size: 0.95em;
  margin-top: 0.2rem;
}
.pulse-summary > :first-child { margin-top: 0; }
.pulse-summary > :last-child { margin-bottom: 0; }
.pulse-summary p { margin: 0.3rem 0; }
.pulse-full {
  grid-column: 1 / -1;
  margin-top: 0.3rem;
}
.pulse-full > summary {
  cursor: pointer;
  font-size: 0.82em;
  color: var(--accent);
  list-style: none;
}
.pulse-full > summary::-webkit-details-marker { display: none; }
.pulse-full > summary::before { content: "▸ "; }
.pulse-full[open] > summary::before { content: "▾ "; }
.pulse-full .pulse-details { margin-top: 0.2rem; }

/* === Mobile (< 600px) === */

@media (max-width: 600px) {
  .daily-lead {
    font-size: 1.1rem;
  }

  .pulse-list li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "team   when"
      "title  title"
      "source source";
  }

  .pulse-list li > strong { grid-area: team; }
  .pulse-when { grid-area: when; text-align: right; }
  .pulse-title { grid-area: title; }
  .pulse-source { grid-area: source; }
}

/* === Match page === */

.match-hero {
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 1.5rem;
}

.match-special {
  color: var(--pulse-meta-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85em;
  margin: 0 0 0.3rem;
}

.match-hero h1 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  line-height: 1.25;
}

.match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  color: var(--pulse-meta-color);
  margin: 0.25rem 0;
  font-size: 0.95em;
}

.match-status {
  margin: 0.5rem 0 0;
  font-weight: 600;
}

.match-section {
  margin: 0 0 2rem;
}

.match-empty,
.match-tbd {
  color: var(--pulse-meta-color);
  border-left: 3px solid var(--pico-muted-border-color);
  padding: 0.4rem 0.8rem;
  margin: 0;
}

.match-prediction,
.match-result {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}

.match-prediction dt,
.match-result dt {
  font-weight: 600;
  color: var(--pulse-meta-color);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.team-snapshot {
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.5rem;
}

.team-snapshot h3 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
}

.team-snapshot ul {
  margin: 0.3rem 0 0.8rem 1rem;
  padding-left: 0;
}

@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: 1fr;
  }

  .match-prediction,
  .match-result {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .match-prediction dt,
  .match-result dt {
    margin-top: 0.4rem;
  }
}

/* === Confidence badges (już w Fazie 1 zaplanowane) === */

.confidence-high,
.confidence-medium,
.confidence-low,
.confidence-unknown {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
}

.confidence-high { background: #1f8a3e; color: #fff; }
.confidence-medium { background: #e0a000; color: #000; }
.confidence-low { background: #7d7d7d; color: #fff; }
.confidence-unknown { background: transparent; color: var(--pulse-meta-color); border: 1px dashed var(--pulse-meta-color); }

/* === Teams index (siatka 48 drużyn na daily) === */

.teams-index {
  margin-top: 2rem;
}

.teams-index-hint {
  color: var(--pulse-meta-color);
  margin: -0.3rem 0 1rem;
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.teams-group {
  padding: 0.8rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.4rem;
  margin: 0;
}

.teams-group h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0rem;
  color: var(--pulse-meta-color);
}

.teams-group ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 0.3rem;
}

.teams-group li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  padding: 0.25rem 0;
}

.teams-flag {
  font-size: 1.1em;
}

.teams-name {
  flex: 1 1 auto;
}

.teams-code {
  color: var(--pulse-meta-color);
  font-family: var(--pico-font-family-monospace, monospace);
  font-size: 0.85em;
}

/* === Team page === */

.team-hero {
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 1rem;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
}
.team-hero-main { min-width: 0; flex: 1 1 auto; }

/* Lokalizator kraju w heros: mapa świata + pinezka + ludność/powierzchnia */
.team-locator { flex: 0 0 auto; width: 192px; }
.loc-map {
  position: relative; border: 1px solid var(--hairline); border-radius: var(--r-md);
  overflow: hidden; background: #eef2f5;
}
.loc-map img { display: block; width: 100%; }
.loc-dot {
  position: absolute; width: 9px; height: 9px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 104, 54, 0.22), 0 0 0 1px #fff;
}
.loc-facts { list-style: none; margin: 0.55rem 0 0; padding: 0; font-size: 0.78rem; }
.loc-facts li { white-space: nowrap; line-height: 1.55; }
.loc-k { color: var(--ink-muted); }
.loc-v { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .team-locator { width: 160px; } }

.team-hero h1 {
  margin: 0 0 0.5rem;
  font-size: 1.7rem;
  line-height: 1.2;
}

.team-flag {
  margin-right: 0.3rem;
}

/* Lokalne flagi SVG (flagcdn, CC0). Emoji fallback gdy brak pliku. */
.flag-svg {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: -0.12em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Stały prostokąt 3:2 + object-fit — flagi o różnych proporcjach (np. Katar 28:11)
   zajmują tę samą szerokość, więc nazwy w listach się równają. */
.team-flag.flag-svg {
  height: 1.1em;
  width: 1.65em;
  object-fit: cover;
}

.teams-flag.flag-svg {
  height: 0.95em;
  width: 1.425em;
  object-fit: cover;
}

.match-flag {
  margin: 0 0.3rem;
}

.match-flag.flag-svg {
  vertical-align: -0.1em;
}

/* Ikony outline w pasku nav (Decision log D10) — ikona + etykieta, jeden kolor currentColor. */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-ico {
  height: 1.05em;
  width: auto;
  flex: 0 0 auto;
}
/* Kolorowy emblemat jako znak w nav (zamiast napisu „WC2026"). */
.nav-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.nav-emblem {
  height: 2.4rem;
  width: auto;
  display: block;
}
/* Linki nav zawijają się na wąskim ekranie zamiast wychodzić poza kadr. */
.nav-links {
  flex-wrap: wrap;
  row-gap: 0.15rem;
}

/* Klikalna nazwa drużyny (makro team_link) — flaga + nazwa, wspólne dla całego serwisu. */
.team-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
}
.team-link:hover {
  text-decoration: underline;
}
.team-link .team-flag {
  margin-right: 0;
}
.team-tbd {
  color: var(--pico-muted-color);
}

/* Tabele grup: sortowalne nagłówki + klikalne wiersze. */
.mecze-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.mecze-sortable::after {
  content: " ↕";
  opacity: 0.4;
  font-size: 0.8em;
}
.mecze-sortable[aria-sort="ascending"]::after {
  content: " ↑";
  opacity: 1;
}
.mecze-sortable[aria-sort="descending"]::after {
  content: " ↓";
  opacity: 1;
}
.mecze-standings tbody tr[data-href] {
  cursor: pointer;
}
.mecze-standings tbody tr[data-href]:hover {
  background: color-mix(in srgb, var(--pico-primary) 6%, transparent);
}

.team-code {
  color: var(--pulse-meta-color);
  font-weight: 400;
  font-size: 0.85em;
}

.team-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  color: var(--pulse-meta-color);
  margin: 0.2rem 0 0.4rem;
  font-size: 0.95em;
}

.team-status {
  margin: 0.3rem 0 0;
  font-size: 0.95em;
}

.team-status p {
  margin: 0;
}

/* Strona drużyny (zoomy zdjęte 2026-06-11; style .team-zoom-bar/.team-tweet-* skasowane razem z nimi) */
.team-context {
  font-size: 1.0rem;
  line-height: 1.6;
  margin: 0;
}

.team-keyfacts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}

.team-keyfacts dt {
  font-weight: 600;
  color: var(--pulse-meta-color);
}

.team-top-players {
  margin: 0.4rem 0 0 1.2rem;
  padding-left: 0;
}

.team-style {
  margin: 0;
  padding-left: 1.2rem;
}

@media (max-width: 600px) {
  .team-keyfacts {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .team-keyfacts dt {
    margin-top: 0.4rem;
  }
}

.team-section {
  margin: 0 0 1.8rem;
}

.team-section h2 {
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
}

.team-section h3 {
  font-size: 1.0rem;
  margin: 0.8rem 0 0.4rem;
  color: var(--pulse-meta-color);
}

.team-next-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.4rem;
  text-decoration: none;
}

.team-next-card strong {
  font-size: 1.05em;
}

.team-next-when,
.team-next-tag {
  color: var(--pulse-meta-color);
  font-size: 0.9em;
}

.team-upcoming {
  list-style: none;
  padding-left: 0;
  margin: 0.6rem 0 0;
  display: grid;
  gap: 0.3rem;
}

.team-upcoming a {
  color: var(--pulse-meta-color);
  font-size: 0.9em;
}

.team-pulse-list li {
  grid-template-columns: 3em 4em 1fr auto;
}

.pulse-type {
  color: var(--pulse-meta-color);
  font-style: italic;
}

.team-empty {
  color: var(--pulse-meta-color);
  border-left: 3px solid var(--pico-muted-border-color);
  padding: 0.4rem 0.8rem;
  margin: 0;
}

.team-accuracy {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}

.team-accuracy dt {
  font-weight: 600;
  color: var(--pulse-meta-color);
}

@media (max-width: 600px) {
  .team-pulse-list li {
    grid-template-columns: 1fr auto;
  }
  .team-accuracy {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .team-accuracy dt {
    margin-top: 0.4rem;
  }
}


/* === Sparkline formy (Faza 5) === */
.sparkline {
  margin: 0.25rem 0;
}

.sparkline-form {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Forma: kafelki W/R/P z łagodnym tłem + mini-wynik meczu pod literą (Wariant 8, wybór
   Michała 25.06). WYŚRODKOWANE, bez legendy; tooltip (jak pogoda) = z kim mecz i jaki wynik. */
.form-cells { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.form-cell {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: help;
}
.form-letter {
  width: 24px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; font-style: normal;
}
.form-score { font-size: 0.6rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.form-cell.form-w .form-letter { background: #e8f4ec; color: #1f8a4c; }
.form-cell.form-d .form-letter { background: #f0f0f2; color: #6e6e73; }
.form-cell.form-l .form-letter { background: #fbeae8; color: #d6493b; }
/* Tooltip nad kafelkiem (lustro .mc-wx-tip pogody), wyśrodkowany ze strzałką w dół. */
.form-tip {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  display: none; z-index: 20; white-space: nowrap;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: .4em .6em;
  font-size: 0.76rem; font-weight: 500; color: var(--ink);
}
.form-tip::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px; background: #fff;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.form-tip-opp { font-weight: 600; }
.form-tip-score { color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-left: 2px; }
.form-cell:hover .form-tip, .form-cell:focus .form-tip, .form-cell:focus-within .form-tip { display: block; }

/* === Drabinka (Faza 6, Blok 1) === */
.bracket-hero { margin-bottom: 1rem; }
.bracket-lead { color: var(--pico-muted-color); font-size: 0.9rem; }
.mecze-ical, .team-ical { color: var(--pico-muted-color); font-size: 0.85rem; }

.bracket-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}

.bracket-group-card {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.4rem;
  padding: 0.5rem 0.7rem;
}

.bracket-group-card h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }

.bracket-standings { list-style: none; margin: 0; padding: 0; }

.bracket-standings li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.85rem;
  padding: 0.1rem 0;
}

.bracket-standings .bracket-pos {
  font-weight: 700;
  width: 1rem;
  color: var(--pico-primary);
}

.bracket-standings .bracket-team { flex: 1; }
.bracket-standings .bracket-slot,
.bracket-thirds .bracket-slot {
  font-size: 0.7rem;
  color: var(--pico-muted-color);
}

.bracket-standings li.is-empty .bracket-team { color: var(--pico-muted-color); }

.bracket-thirds { margin-top: 1rem; }
.bracket-thirds-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.3rem;
  font-size: 0.85rem;
}

.bracket-ko-section { margin-top: var(--s6); }

/* Faza pucharowa = wyrównane drzewo: kolumny rund tej samej wysokości,
   mecze rozłożone równo (space-around), więc runda N centruje się między
   parami rundy N-1. Czysto CSS, bez łączników. */
.bracket-rounds {
  display: flex;
  align-items: stretch;
  gap: var(--s3);
  overflow-x: auto;
  padding-bottom: var(--s2);
  -webkit-overflow-scrolling: touch;
}

.bracket-round {
  flex: 1 1 0;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--s2);
}

.bracket-round-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 var(--s1);
}

.bracket-match {
  display: block;
  align-self: stretch;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s2) var(--s3);
  text-decoration: none;
  color: var(--ink);
  background: var(--surface, #fff);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bracket-match:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}

.bracket-match-id {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
}

.bracket-match-slot { display: block; font-size: 0.9rem; font-weight: 600; }

.bracket-match-meta {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-muted);
}

.bracket-match-tbd {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
  border-radius: var(--r-pill);
  background: var(--hairline);
  color: var(--ink-muted);
}

/* Mobile: drabinka w pionie - rundy jedna pod drugą, mecze w siatce.
   Bez poziomego scrolla i bez 16-kartowej kolumny na całą wysokość ekranu. */
@media (max-width: 640px) {
  .bracket-rounds {
    flex-direction: column;
    gap: var(--s5);
    overflow-x: visible;
  }
  .bracket-round {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s2);
  }
  .bracket-round-title { grid-column: 1 / -1; }
}

/* === Monte Carlo (Faza 6, Blok 2) === */
.mc-section { margin: 1rem 0 1.5rem; }
.mc-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.mc-head h2 { margin: 0; }

.mc-switch {
  display: inline-flex;
  gap: 0.8rem;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
}
.mc-switch label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }

.mc-disclaimer {
  font-size: 0.78rem;
  color: var(--pico-muted-color);
  margin: 0.3rem 0 0.7rem;
}

/* Przełączanie widoczności per model (sterowane data-model na .bracket-page) */
.mc-favorites, .mc-fog { display: none; }
.bracket-page[data-model="fifa"] .mc-favorites[data-model="fifa"],
.bracket-page[data-model="predykcje"] .mc-favorites[data-model="predykcje"] { display: block; }
.bracket-page[data-model="fifa"] .mc-fog[data-model="fifa"],
.bracket-page[data-model="predykcje"] .mc-fog[data-model="predykcje"] { display: flex; }

.mc-favorites table { font-size: 0.85rem; }
.mc-favorites td:not(:first-child),
.mc-favorites th:not(:first-child) { text-align: right; }

.mc-fog {
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}
.mc-fog-team {
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--pico-primary-background, #1095c1);
  color: #fff;
  white-space: nowrap;
}

/* Projektowane tabele grup (Monte Carlo) */
.bracket-proj { display: none; list-style: none; margin: 0; padding: 0; }
.bracket-page[data-model="fifa"] .bracket-proj[data-model="fifa"],
.bracket-page[data-model="predykcje"] .bracket-proj[data-model="predykcje"] { display: block; }

.bracket-proj li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  padding: 0.1rem 0;
  color: var(--pico-muted-color);
}
.bracket-proj li.is-advancing { color: var(--pico-color); font-weight: 600; }
.bracket-proj .bracket-pos { width: 1rem; font-weight: 700; color: var(--pico-primary); }
.bracket-proj .bracket-team { flex: 1; }
.bracket-proj .bracket-prob { font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.bracket-proj li.is-advancing .bracket-prob { color: var(--pico-primary); }

/* === Projekcja deterministyczna (Faza 6 — rozegrany turniej) === */
.mc-champ, .bracket-proj-wrap, .bracket-ko-result { display: none; }
.bracket-page[data-model="fifa"] .mc-champ[data-model="fifa"],
.bracket-page[data-model="predykcje"] .mc-champ[data-model="predykcje"],
.bracket-page[data-model="fifa"] .bracket-proj-wrap[data-model="fifa"],
.bracket-page[data-model="predykcje"] .bracket-proj-wrap[data-model="predykcje"] { display: block; }
.bracket-page[data-model="fifa"] .bracket-ko-result[data-model="fifa"],
.bracket-page[data-model="predykcje"] .bracket-ko-result[data-model="predykcje"] { display: flex; }

.bracket-proj-wrap .bracket-proj { display: block; }

.mc-champ {
  border: 1px solid var(--pico-primary);
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  margin: 0.6rem 0;
  text-align: center;
}
.mc-champ-title {
  margin: 0; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--pico-muted-color);
}
.mc-champ-name { margin: 0.1rem 0; font-size: 1.6rem; font-weight: 800; color: var(--pico-primary); }
.mc-champ-sub { margin: 0; font-size: 0.85rem; color: var(--pico-muted-color); }

.mc-fav { margin-top: 0.5rem; }
.mc-fav summary { cursor: pointer; font-size: 0.9rem; color: var(--pico-muted-color); }

.bracket-pts { font-size: 0.72rem; color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
.bracket-proj li.is-advancing .bracket-pts { color: var(--pico-color); }

.bracket-scores { margin-top: 0.3rem; }
.bracket-scores summary { cursor: pointer; font-size: 0.72rem; color: var(--pico-muted-color); }
.bracket-scores ul { list-style: none; margin: 0.2rem 0 0; padding: 0; font-size: 0.78rem; }
.bracket-scores li { padding: 0.05rem 0; }

.bracket-ko-result {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}
.ko-side { color: var(--pico-muted-color); }
.ko-side.is-winner { color: var(--pico-color); font-weight: 700; }
.ko-sep { color: var(--pico-muted-color); }
.ko-pens { font-size: 0.65rem; color: var(--pico-muted-color); }
.bracket-ko-result .mc-fog { flex-basis: 100%; }

/* === Strona /szanse/ (Faza 6 — pełen rozkład procentów) === */
.szanse-page .by-model { display: none; }
.szanse-page[data-model="fifa"] .by-model[data-model="fifa"],
.szanse-page[data-model="predykcje"] .by-model[data-model="predykcje"] { display: block; }

/* w obrębie /szanse/ mgła i tabele projekcji są zawsze widoczne (scope przez .by-model) */
.szanse-page .mc-fog { display: flex; }
.szanse-page .bracket-proj { display: block; }

.szanse-section { margin: 1.5rem 0; }
.szanse-round {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--pico-muted-color); margin: 0.8rem 0 0.4rem;
}
.szanse-matches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}
.szanse-match {
  display: block;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
  text-decoration: none;
  color: inherit;
}
.szanse-match:hover { border-color: var(--pico-primary); }
.szanse-match-slot { display: block; font-size: 0.85rem; font-weight: 600; margin: 0.1rem 0 0.25rem; }

/* Strony JEDNA POD DRUGĄ (Wariant 2, decyzja Michała 25.06) - pełna szerokość, żeby długa
   nazwa drużyny się nie ucinała („Republika Południowej Afryki", nie „Republika P..."). */
.szanse-fog {
  display: flex; flex-direction: column; gap: 0.25rem;
  margin-top: 0.35rem;
}
.szanse-ko-mid { text-align: center; color: var(--pico-muted-color); font-size: 0.7rem; line-height: 1; }
.szanse-fog-side { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.szanse-fog-head {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--pico-muted-color); padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 0.15rem;
}
.szanse-fog-row {
  display: flex; justify-content: space-between; gap: 0.4rem;
  font-size: 0.72rem; line-height: 1.5;
}
.szanse-fog-team { color: var(--pico-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szanse-fog-pct { color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
/* Pewna obsada strony (Wariant 2): flaga + nazwa, bez % - „BRA 100%" było redundancją. */
.szanse-ko-team { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem;
  font-weight: 700; min-width: 0; margin-top: 0.1rem; }
.szanse-ko-team .flag-svg { height: 1em; width: 1.5em; object-fit: cover; border-radius: 3px; flex: 0 0 auto; }
/* Zwycięzca rozegranego meczu KO (awansował dalej) - zielone tło + chip, na sekcji „Kto w którym meczu". */
.szanse-ko-adv { background: rgba(0,104,54,0.12); border-radius: 6px; padding: 0.15rem 0.4rem; margin: 0.1rem -0.1rem 0; }
.szanse-ko-chip { font-size: 0.62em; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px;
  padding: 0.1em 0.5em; margin-left: auto; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }

.mc-fav-title { font-size: 0.95rem; margin: 0.5rem 0 0.3rem; }
.mc-fav-more { font-size: 0.82rem; margin: 0.3rem 0 0; }

/* === Dashboard modelu (Faza 7) === */
.model-section { margin: 1.5rem 0 2rem; }
.model-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.model-head h2 { margin: 0; }

.model-version {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 1rem;
  background: var(--pico-muted-border-color);
  color: var(--pico-muted-color);
}

.model-empty {
  color: var(--pulse-meta-color);
  border-left: 3px solid var(--pico-muted-border-color);
  padding: 0.4rem 0.8rem;
  margin: 0.6rem 0;
  font-size: 0.88rem;
}

.model-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0;
}
.model-card {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.5rem;
  padding: 0.7rem 0.8rem;
  text-align: center;
}
.model-card-num { display: block; font-size: 1.5rem; font-weight: 800; color: var(--pico-primary); }
.model-card-label { display: block; font-size: 0.78rem; color: var(--pico-muted-color); margin-top: 0.2rem; }

.model-phases, .model-corrections { font-size: 0.85rem; }
.model-phases td:not(:first-child),
.model-phases th:not(:first-child) { text-align: right; }
.model-corrections td:nth-child(2) { color: var(--pico-muted-color); font-size: 0.8rem; }

.model-mc { border-top: 1px solid var(--pico-muted-border-color); padding-top: 1rem; }
.model-mc-block { margin: 0.8rem 0; }
.model-mc-champ { font-size: 0.9rem; margin: 0.3rem 0 0.6rem; }
.model-mc-block table { font-size: 0.85rem; }
.model-mc-block td:not(:first-child),
.model-mc-block th:not(:first-child) { text-align: right; }

/* === Gesty scoringu newsów (Faza 8) === */
.news-gestures {
  grid-column: 1 / -1;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.news-gestures-label {
  font-size: 0.8rem;
  color: var(--pulse-meta-color);
}
.news-gesture {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  line-height: 1.3;
  background: var(--pico-card-background-color, #fff);
  color: var(--pico-color);
  border: 1px solid var(--pico-primary);
  border-radius: 0.5rem;
  cursor: pointer;
}
.news-gesture:hover { background: var(--pico-primary); color: var(--pico-primary-inverse); }
.news-gesture.is-active {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  border-color: var(--pico-primary);
  font-weight: 600;
}

/* === Mój profil czytania (Faza 8) === */
.model-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.model-profile-grid h3 { font-size: 0.95rem; margin: 0 0 0.3rem; }
.model-profile-grid table { font-size: 0.85rem; }
.model-profile-grid td:last-child { text-align: right; color: var(--pico-muted-color); }

/* === Teaser briefu na stronie głównej (brief przeniesiony do /brief/) === */
.brief-teaser { margin: 1rem 0; }
.brief-teaser a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--pico-primary);
  border-radius: 0.5rem;
  text-decoration: none;
}
.brief-teaser a:hover { background: var(--pico-primary); color: var(--pico-primary-inverse); }
.brief-teaser span { font-size: 0.85rem; color: var(--pico-muted-color); }
.brief-teaser a:hover span { color: var(--pico-primary-inverse); }

/* === Zwijanie starszych wpisów feedu === */
.pulse-older { margin-top: 0.8rem; }
.pulse-older > summary {
  cursor: pointer;
  color: var(--pico-primary);
  font-weight: 600;
  padding: 0.4rem 0;
}
.pulse-older[open] > summary { margin-bottom: 0.5rem; }

/* === Strona /newsy/ — grupy dzienne === */
.news-day { margin: 1.5rem 0; }
.news-day > h2 {
  font-size: 1.05rem;
  color: var(--pulse-meta-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding-bottom: 0.3rem;
  margin-bottom: 0.6rem;
}

/* === Strona /mecze/ — tabele grup + kalendarz === */
/* Tabele grup potrzebują więcej miejsca niż drabinkowe karty kodów (flaga + pełna nazwa
   + 4 kolumny) — własny szerszy grid, żeby się nie nakładały na wąskim ekranie. */
.mecze-tables .bracket-groups {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.mecze-standings { font-size: 0.8rem; margin: 0; width: 100%; }
/* Większa czcionka TYLKO górna tabela faworytów (droga do mistrza), nie grupy/trzecie
   (decyzja Michała 25.06). */
.szanse-fav { font-size: 0.92rem; }
.szanse-fav th, .szanse-fav td { padding: 0.3rem 0.45rem; }
/* Opis mechanizmu + źródła „siły drużyny" - mała czcionka zamiast leadu (decyzja Michała 25.06). */
.szanse-method { font-size: 0.8rem; line-height: 1.45; color: var(--ink-muted);
  max-width: var(--col-read, 720px); margin: var(--s2) 0 0; }
.mecze-thirds { margin: var(--s6) 0; max-width: var(--col-read, 720px); }
.mecze-thirds-note { color: var(--ink-muted); font-size: 0.85rem; margin: 0 0 var(--s3); }
/* Pico daje komórkom ~1rem paddingu z każdej strony — przy 5 kolumnach tabela puchła
   ponad swój slot w siatce i nachodziła na sąsiednią. Ciasny padding = tabela mieści się. */
.mecze-standings th, .mecze-standings td { padding: 0.2rem 0.35rem; }
.mecze-standings th:not(:nth-child(2)), .mecze-standings td:not(:nth-child(2)) { text-align: center; }
.mecze-standings td { vertical-align: middle; }
.mecze-standings .mecze-pos { color: var(--pulse-meta-color); }
.mecze-standings .team-link { gap: 0.35rem; min-width: 0; }
/* Klik łapie cały wiersz (data-href) - nazwa drużyny bez podkreślenia (zbędne). */
.mecze-standings .team-link, .mecze-standings .team-link:hover { text-decoration: none; }
.mecze-standings .team-link .team-flag { flex: 0 0 auto; }
.mecze-standings tr.is-advancing { background: color-mix(in srgb, var(--pico-primary) 12%, transparent); }
/* „100% poza" - miękki róż z ceglastej czerwieni strony (#c2281e), tekst przygaszony; parytet z zielenią. */
.mecze-standings tr.is-eliminated { background: color-mix(in srgb, #c2281e 9%, transparent); }
.mecze-standings tr.is-eliminated td, .mecze-standings tr.is-eliminated .team-link { color: var(--ink-muted); }
/* Linia odcięcia w tabeli 3. miejsc (8 z 12 awansuje). */
.mecze-cutline td { padding: 3px 0; border-top: 1px dashed color-mix(in srgb, #c2281e 45%, var(--hairline));
  text-align: center; font-size: 0.68rem; letter-spacing: 0.02em; color: var(--ink-muted); }
.mecze-standings tbody tr.mecze-cutline:hover { background: none; }
/* Słowa-legendy w opisie: kolor słowa = kolor wiersza (zielony awans / czerwone odpadnięcie). */
.mc-disclaimer .leg-green { color: var(--pico-primary); }
.mc-disclaimer .leg-red { color: #c2281e; }
.mecze-round { margin: 1rem 0 0.4rem; color: var(--pulse-meta-color); font-size: 1rem; }
.mecze-calendar h3 { margin-top: 1.5rem; }

/* === Linki "zobacz wszystkie" na landingu === */
.section-more { margin: 0.6rem 0 0; }
.section-more a { font-size: 0.9rem; font-weight: 600; }

/* === Paginacja /newsy/ === */
.news-pager {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--pico-muted-border-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  font-size: 0.9rem;
}
.news-pager-pages { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.news-pager-pages strong { color: var(--pico-primary); }
.news-pager .is-disabled { color: var(--pico-muted-border-color); }

/* === Strona główna — hub sekcji === */
.home-hub { margin: 2rem 0; }
.home-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.8rem;
}
.home-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.5rem;
  text-decoration: none;
}
.home-card:hover { border-color: var(--pico-primary); background: color-mix(in srgb, var(--pico-primary) 6%, transparent); }
.home-card strong { font-size: 1.05rem; }
.home-card span { font-size: 0.82rem; color: var(--pico-muted-color); }

/* Strona /orchestrator/ — chipy kolejki, wiersze sekretów */
.orch-queue { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0; }
.orch-chip { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 0.6rem; font-size: 0.8rem; font-family: var(--pico-font-family-monospace); }
.orch-done { background: color-mix(in srgb, #2e7d32 18%, transparent); color: #1b5e20; }
.orch-todo { background: var(--pico-card-sectionning-background-color, #eee); color: var(--pico-muted-color); }
.orch-secret-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; flex-wrap: wrap; }
.orch-secret-row code { font-weight: 600; }
.orch-del { width: auto; padding: 0.1rem 0.6rem; margin: 0; font-size: 0.78rem; }
.orch-ok { color: #1b5e20; }
.orch-err { color: var(--pico-del-color, #b00020); }
.orch-secret-row input { flex: 1 1 14rem; margin: 0; min-width: 10rem; }
.orch-save { width: auto; padding: 0.1rem 0.7rem; margin: 0; font-size: 0.82rem; }
.orch-live { background: color-mix(in srgb, #ff8f00 22%, transparent); color: #e65100; }
.orch-banner { padding: 0.5rem 0.8rem; border-radius: 0.4rem; margin: 0.4rem 0; }
.orch-pending-banner { background: color-mix(in srgb, #ff8f00 16%, transparent); }
.orch-alert-banner { background: color-mix(in srgb, #b00020 14%, transparent); }
.orch-alert-banner ul { margin: 0.3rem 0 0; }
.orch-secret-table { width: 100%; font-size: 0.85rem; }
.orch-secret-table td { vertical-align: top; padding: 0.35rem 0.4rem; }
.orch-secret-table input { width: 100%; margin: 0.2rem 0; min-width: 8rem; }
.orch-secret-table .orch-save, .orch-secret-table .orch-del { margin: 0.1rem 0.3rem 0.1rem 0; }
.orch-secret-table small { color: var(--pico-muted-color); }
.orch-ctrl-day { padding: 0.5rem 0; border-top: 1px solid var(--pico-muted-border-color, #ddd); }
.orch-ctrl-kickoff { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0; flex-wrap: wrap; }
.orch-ctrl-kickoff input { width: 5rem; margin: 0; }
.orch-ctrl-day .orch-chip { cursor: pointer; }

/* Zakładki */
.orch-tabs { display: flex; gap: 0.3rem; margin: 0.6rem 0 1rem; border-bottom: 2px solid var(--pico-muted-border-color, #ddd); }
.orch-tab { width: auto; margin: 0; padding: 0.5rem 0.9rem; border: none; border-radius: 0.4rem 0.4rem 0 0;
  background: transparent; color: var(--pico-muted-color); font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.orch-tab[aria-selected="true"] { background: var(--pico-primary-background, #1095c1); color: #fff; }

/* Kalendarz dni (czerwiec + lipiec) */
.orch-cal-wrap { margin: 0.4rem 0 0.8rem; }
.orch-cal-head { font-size: 0.95rem; margin: 0 0 0.3rem; }
.orch-cal { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.6rem 0 0.3rem; }
.orch-cal-month { width: auto; font-size: 0.8rem; margin: 0; }
.orch-cal-month caption { font-weight: 700; text-align: left; padding: 0.2rem 0; }
.orch-cal-month th { padding: 0.2rem 0; text-align: center; font-weight: 600; color: var(--pico-muted-color); font-size: 0.72rem; }
.orch-cal-day, .orch-cal-empty { width: 2rem; height: 2rem; text-align: center; padding: 0; vertical-align: middle; }
.orch-cal-day { cursor: pointer; border-radius: 0.3rem; }
.orch-cal-day:hover { background: var(--pico-card-sectionning-background-color, #eee); }
.orch-cal-has { font-weight: 700; box-shadow: inset 0 -3px 0 color-mix(in srgb, #2e7d32 60%, transparent); }
.orch-cal-today { outline: 2px solid var(--pico-primary, #1095c1); outline-offset: -2px; }
.orch-cal-sel { background: var(--pico-primary-background, #1095c1); color: #fff; }
.orch-cal-sel:hover { background: var(--pico-primary-background, #1095c1); }
.orch-cal-legend { font-size: 0.75rem; color: var(--pico-muted-color); margin: 0.2rem 0; }
.orch-cal-dot { display: inline-block; width: 0.7rem; height: 0.3rem; border-radius: 0.2rem;
  background: color-mix(in srgb, #2e7d32 60%, transparent); vertical-align: middle; }
.orch-cal-todaymark { outline: 2px solid var(--pico-primary, #1095c1); outline-offset: 1px; border-radius: 0.2rem; padding: 0 0.2rem; }

/* Pasek stanu (hero) */
.orch-status { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.6rem 0.8rem; border-radius: 0.5rem; margin: 0.4rem 0 0.8rem;
  background: var(--pico-card-sectionning-background-color, #f3f3f3); }
.orch-st-badge { font-weight: 700; font-size: 1rem; }
.orch-st-chain, .orch-st-budget { font-size: 0.85rem; color: var(--pico-muted-color);
  font-family: var(--pico-font-family-monospace); }
.orch-status.orch-st-ok { background: color-mix(in srgb, #2e7d32 14%, transparent); }
.orch-status.orch-st-run { background: color-mix(in srgb, #1095c1 12%, transparent); }
.orch-status.orch-st-pending { background: color-mix(in srgb, #ff8f00 16%, transparent); }
.orch-status.orch-st-alert { background: color-mix(in srgb, #b00020 14%, transparent); }

/* Łańcuch dnia (oś czasu) */
.orch-chain { list-style: none; padding: 0; margin: 0.4rem 0; }
.orch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--pico-muted-border-color, #eee); font-size: 0.9rem; }
.orch-row-icon { width: 1.1rem; text-align: center; font-weight: 700; }
.orch-row-id { font-family: var(--pico-font-family-monospace); min-width: 7rem; }
.orch-row-time { font-size: 0.82rem; color: var(--pico-muted-color); font-family: var(--pico-font-family-monospace); }
.orch-row-dur { font-size: 0.78rem; color: var(--pico-muted-color); }
.orch-row-done .orch-row-icon { color: #2e7d32; }
.orch-row-fired .orch-row-icon { color: #e65100; }
.orch-row-wait, .orch-row-off { color: var(--pico-muted-color); }

/* Badge modelu — Sonnet/Haiku ostrzeżeniem (reguła Opus-only) */
.orch-model { font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 0.5rem; font-family: var(--pico-font-family-monospace); }
.orch-model-ok { background: color-mix(in srgb, #2e7d32 16%, transparent); color: #1b5e20; }
.orch-model-warn { background: color-mix(in srgb, #b00020 16%, transparent); color: #b00020; font-weight: 700; }

/* Wynik /fire */
.orch-http { font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 0.5rem; font-family: var(--pico-font-family-monospace); }
.orch-http-ok { background: color-mix(in srgb, #2e7d32 16%, transparent); color: #1b5e20; }
.orch-http-bad { background: color-mix(in srgb, #b00020 16%, transparent); color: #b00020; font-weight: 700; }

/* Tabela odpowiedzi /fire */
.orch-fire-table { width: 100%; font-size: 0.82rem; }
.orch-fire-table td, .orch-fire-table th { padding: 0.3rem 0.4rem; vertical-align: top; }
.orch-raw { font-size: 0.72rem; white-space: pre-wrap; word-break: break-word; margin: 0.3rem 0 0; }
.orch-muted { color: var(--pico-muted-color); }

/* Log decyzji */
.orch-notes { font-size: 0.85rem; }
.orch-notes li { margin: 0.2rem 0; }
.orch-note-ts { font-family: var(--pico-font-family-monospace); color: var(--pico-muted-color); margin-right: 0.5rem; }

/* Planowanie — nagłówek dnia z godziną ostatniego meczu */
.orch-ctrl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }

.orch-lastmatch { font-size: 0.82rem; color: var(--pico-muted-color); font-family: var(--pico-font-family-monospace); }
.orch-skipchip { cursor: pointer; }
.orch-skip-label { font-size: 0.82rem; color: var(--pico-muted-color); margin: 0.5rem 0 0.2rem; }

/* ===================================================================== */
/* REDESIGN 2026-06 — warstwa „Apple" (na końcu pliku → wygrywa kaskadą)  */
/* ===================================================================== */

/* --- Pasek górny (sticky, lekki blur) --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--hairline);
}
/* UWAGA: bez backdrop-filter na site-header — tworzyłby containing block dla
   position:fixed .tabbar (nested) i przyklejał ją do dołu headera, nie ekranu. */
.site-header-inner {
  display: flex; align-items: center; gap: var(--s5);
  height: 56px;
}
.nav-brand { display: inline-flex; align-items: center; padding: 0; flex: 0 0 auto; }
.nav-emblem { height: 34px; width: auto; display: block; }
.nav-links {
  display: flex; align-items: center; gap: var(--s2);
  list-style: none; margin: 0; padding: 0; flex: 1 1 auto;
}
.nav-links li { margin: 0; }
.nav-link {
  display: inline-block; padding: 0.4rem 0.8rem; border-radius: var(--r-pill);
  color: var(--ink); font-size: 0.95rem; font-weight: 500; text-decoration: none;
}
.nav-link:hover { background: var(--bg-soft); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Dolny pasek zakładek wyłączony — Michał chce menu na górze także na iPhone. */
.tabbar { display: none; }

/* --- Mobile: menu zostaje NA GÓRZE jako przewijalny poziomo pasek pigułek --- */
@media (max-width: 640px) {
  .site-header-inner {
    height: auto; min-height: 56px; flex-wrap: wrap; gap: var(--s2) var(--s3); padding-block: 8px;
  }
  .nav-brand { order: 1; }
  .nav-links {
    order: 3; flex: 1 1 100%;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: var(--s1); scrollbar-width: none;
    margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4) 4px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; padding: 0.4rem 0.75rem; font-size: 0.95rem; }
  .nav-link[aria-current="page"] { background: var(--accent-soft); }
}

/* --- Stopka (cicha strefa: Kid, Orkiestrator) --- */
.site-footer { border-top: 1px solid var(--hairline); margin-top: var(--s9); background: var(--bg-soft); }
.site-footer-inner {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6);
  align-items: center; justify-content: space-between; padding-block: var(--s6);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s5); }
.footer-links a { color: var(--ink-muted); font-size: 0.9rem; }
.footer-build { color: var(--ink-muted); }

/* --- Nagłówki sekcji (eyebrow + duży H2) --- */
.eyebrow {
  display: block; font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 0.4rem;
}
.section-header { margin: var(--s8) 0 var(--s5); }
.section-header h2 { margin: 0; }
.section-header .section-sub { color: var(--ink-muted); margin: 0.3rem 0 0; }
main.container > section { margin-bottom: var(--s8); }
main.container > section:last-child { margin-bottom: 0; }

/* --- Hero stron (duży, z oddechem, bez twardej kreski) --- */
.daily-hero, .match-hero, .team-hero, .bracket-hero {
  border-bottom: 0; padding: var(--s6) 0 var(--s5); margin-bottom: var(--s5);
}
.daily-lead { font-size: 1.4rem; line-height: 1.4; font-weight: 500; max-width: var(--col-read); }
.match-hero h1, .team-hero h1 { font-size: var(--fs-h1); }

/* --- Karty: miękki cień zamiast obwódki --- */
.home-card, .model-card, .teams-group, .team-snapshot, .brief-podcast,
.team-next-card, .bracket-group-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bracket-match, .szanse-match, .match-list li > a, .brief-archive-item, .brief-teaser a {
  border-radius: var(--r-md);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.home-card:hover, .brief-archive-item:hover, .team-next-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-lift);
  border-color: var(--hairline); text-decoration: none;
}
a.bracket-match:hover, a.szanse-match:hover, .match-list li > a:hover {
  border-color: var(--accent); box-shadow: var(--shadow-card);
}

/* --- Kolumna czytania dla treści tekstowych --- */
.brief-full, .brief-podcast, .brief-transcript, .brief-back, .daily-brief-meta {
  max-width: var(--col-read);
}
/* Strony tekstowe czytają się lepiej w węższej, wyśrodkowanej kolumnie */
.team-page, .match-page { max-width: 880px; margin-inline: auto; }
.team-section h2 { font-size: 1.35rem; }
.team-section { margin-bottom: var(--s6); }

/* Teza — jedno zdanie ramujące nad portretem (eyebrow, jak nagłówek Concacaf/Guardian) */
.team-teza {
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--accent); text-transform: none; margin: 0 0 var(--s3);
}

/* Portret drużyny — lead pisany prozą (proza ≠ półsłówka) */
.team-portret-section { margin-bottom: var(--s7); }
.team-portret p {
  font-size: 1.18rem; line-height: 1.62; color: var(--text);
  margin: 0 0 var(--s4);
}
.team-portret p:first-child { font-size: 1.24rem; }
.team-portret p:last-child { margin-bottom: 0; }
/* Sekcje-oceny pisane prozą (Styl gry, Prognoza) — akapit, nie lista */
.team-prose p { line-height: 1.6; margin: 0 0 var(--s3); }
.team-prose p:last-child { margin-bottom: 0; }

/* Beat ze zdjęciem zawodnika — foto obok prozy */
.team-beat-photo .team-beat-body {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--s4); align-items: start;
}
.player-photo { margin: 0; }
.player-photo img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center;
  border-radius: var(--r-md); display: block; background: var(--bg-soft);
}
.player-photo figcaption { font-size: 0.8rem; font-weight: 600; color: var(--text); margin-top: 0.4rem; line-height: 1.25; }
.player-credit { display: block; font-size: 0.68rem; font-weight: 400; color: var(--ink-muted); margin-top: 0.1rem; }
@media (max-width: 600px) {
  .team-beat-photo .team-beat-body { grid-template-columns: 110px 1fr; gap: var(--s3); }
}

/* Sparingi przed mundialem — flaga + rywal + wynik + kontekst, mecz pod meczem */
.sparingi { list-style: none; margin: 0; padding: 0; }
.sparingi li {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 0.4rem 0.9rem;
  align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--hairline);
}
.sparingi li:last-child { border-bottom: 0; }
.spar-flag { display: block; width: 28px; height: 19px; object-fit: cover; border-radius: 2px; align-self: center; box-shadow: 0 0 0 1px var(--hairline); }
.spar-name { font-weight: 600; }
.spar-score { font-variant-numeric: tabular-nums; font-weight: 600; }
.spar-ctx { grid-column: 2 / -1; color: var(--ink-muted); font-size: 0.85rem; }

/* --- Strona główna: hero meczu --- */
/* Hero ścieśnione: nadpisuje globalny `main.container > section { margin-bottom: --s8 }` (wyższa
   specyficzność!) i ścina padding - licznik blisko nav, karty „Dziś gramy" tuż pod nim
   (Michał: za dużo pustego nad i pod licznikiem). */
.home-hero { text-align: center; padding: var(--s2) 0 var(--s3); }
main.container > .home-hero { margin: calc(-1 * var(--s3)) 0 var(--s3); }
.home-hero .eyebrow { margin-bottom: var(--s3); }
.home-hero + .match-cards { margin-top: 0; }
.home-hero + .match-cards .section-header { margin-top: var(--s3); }

/* Odliczanie do najbliższego gwizdka — licznik wspiera, caption (który mecz) jest treścią */
.countdown {
  display: flex; align-items: baseline; justify-content: center;
  gap: 0.2rem 0.6rem; flex-wrap: wrap; margin: var(--s2) 0 var(--s3);
}
.cd-num {
  font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 700; line-height: 0.95;
  letter-spacing: var(--tracking-tight); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cd-unit { font-size: 0.95rem; font-weight: 500; color: var(--ink-muted); margin-right: var(--s2); }
.cd-word {
  font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 700; line-height: 1;
  letter-spacing: var(--tracking-tight); color: var(--ink);
}
.cd-live {
  font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent); text-transform: uppercase;
}
.home-hero-match {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s5); margin: var(--s3) 0; text-decoration: none; color: var(--ink); flex-wrap: wrap;
}
.home-hero-match:hover { text-decoration: none; }
.hhm-side {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: var(--tracking-tight);
}
.hhm-flag.flag-svg { height: 1.05em; width: 1.575em; object-fit: cover; border-radius: 4px; }
.hhm-vs { color: var(--ink-muted); font-size: 1.1rem; font-weight: 500; }
.home-hero-when { color: var(--ink-muted); font-size: 1.05rem; margin: var(--s3) 0 0; }
.home-hero-cta { margin: var(--s4) 0 0; }
.home-hero-cta a { font-weight: 600; }
@media (max-width: 640px) {
  .home-hero { padding: var(--s2) 0 var(--s3); }
  .home-hero-match { flex-direction: column; gap: var(--s2); }
  .hhm-vs { font-size: 0.95rem; }
}

/* --- Wspólny wzorzec meczu (strona DZIŚ): A · środek (wynik/godzina) · B ---
   .versus-row, NIE .match-row — tamta klasa to wiersz terminarza na stronie drużyny. */
.versus-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  column-gap: var(--s3); row-gap: var(--s2);  /* wąski odstęp do wiersza strzelców pod wynikiem */
  align-items: center;
}
.vr-team { display: flex; align-items: center; gap: var(--s2); font-weight: 700; letter-spacing: var(--tracking-tight); min-width: 0; }
/* PL: nazwa na zewnątrz, flaga przy środku. Lewa drużyna dosunięta do środka (prawo), prawa do środka (lewo). */
.vr-a { justify-content: flex-end; text-align: right; }
.vr-b { justify-content: flex-start; text-align: left; }
.vr-flag.flag-svg { height: 1em; width: 1.5em; object-fit: cover; border-radius: 3px; flex: 0 0 auto; }
.vr-name { min-width: 0; }
.vr-center {
  font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight); padding: 0 var(--s3); white-space: nowrap;
}
.vr-score { font-size: 1.5rem; }
.vr-time { font-size: 1.15rem; color: var(--ink-muted); }
/* Pole wyniku z wynikiem do przerwy (format 20.06). Rozmiary w EM → skalują się z wynikiem
   (hero duży, listy 1.25rem). Trik „ducha": niewidoczny nawias z lewej = realny z prawej,
   więc SAM wynik ląduje na osi, a do przerwy wisi z prawej. */
.vr-center.vr-col { display: inline-flex; flex-direction: column; align-items: center; }
.vr-l1 { display: block; white-space: nowrap; }
.vr-half { font-size: 0.42em; color: var(--ink-muted); font-weight: 600; margin-left: 0.32em; white-space: nowrap; }
.vr-ghost { font-size: 0.42em; font-weight: 600; visibility: hidden; margin-right: 0.32em; white-space: nowrap; }
/* Wynik bez „do przerwy": half jako niewidoczny spacer (ta sama geometria co realne „do przerwy"),
   żeby SAM wynik (i dwukropek) lądował identycznie jak w meczach z przerwą - bez tego goły 0:0
   wyśrodkowywał się i dwukropek siadał ~6px w lewo względem pozostałych meczów. */
.vr-half.is-spacer { visibility: hidden; }
.vr-l2 { font-size: 0.32em; color: var(--ink-muted); font-weight: 600; margin-top: 0.28em; line-height: 1.2; white-space: nowrap; }
.vr-l2 b { color: var(--accent); font-weight: 800; }
/* Chip „awans" przy drużynie, która przeszła dalej (KO). Rozmiar w em względem nazwy. */
.vr-adv { font-size: 0.5em; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px;
  padding: 0.12em 0.5em; margin: 0 0.3em; vertical-align: 0.12em; text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap; }
/* Mecz nocny: dyskretny znacznik przy godzinie, nie w linii meta. */
.vr-night { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
            color: var(--accent); margin-left: .25rem; vertical-align: .5em; }

/* Strzelcy pod wierszem meczu — po stronach, jak drużyny */
.yr-scorers-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  color: var(--ink-muted); font-size: 0.85rem; line-height: 1.5; margin-top: var(--s2);
}
.yr-side-b { text-align: right; }
.yr-scorers { color: var(--ink-muted); font-size: 0.85rem; margin: var(--s2) 0 0; text-align: center; }

/* --- Strona główna: karty meczów dnia (treść + miniatura stadionu) --- */
.match-cards { display: grid; gap: var(--s4); margin-top: var(--s5); }
.match-card {
  display: flex; gap: var(--s4); align-items: stretch;  /* wysokość = treść; miniatura wypełnia, brak pustego pola nad/pod nazwami */
  padding: var(--s2) var(--s3); border-radius: var(--r-card); background: var(--bg-card);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.match-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); text-decoration: none; }
.match-card .vr-name { font-size: 1.15rem; }
.match-card-body { flex: 1 1 auto; min-width: 0; align-self: center; }
/* Rynna godziny z lewej (styl ramówki): godzina meczu, kreska oddzielająca od reszty */
.mc-time {
  flex: 0 0 auto; min-width: 3em; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 1px solid var(--hairline); padding-right: var(--s3);
}
.mc-time-night { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-muted); }
.mc-meta { color: var(--ink-muted); font-size: 0.9rem; margin: var(--s2) 0 0; text-align: center; }
.mc-highlight { font-size: 0.95rem; line-height: 1.5; margin: var(--s3) 0 0; color: var(--ink); text-align: center; }
/* Dyskretny licznik TUŻ POD GODZINĄ w rynnie - mały, wyszarzony, zwarty (nie rozpycha kolumny). */
.mc-countdown { font-size: 0.66rem; font-weight: 500; color: var(--ink-muted); margin-top: 2px;
  letter-spacing: 0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-countdown:empty { display: none; }
.mc-countdown.is-live { color: var(--accent); font-weight: 600; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .mc-countdown.is-live { animation: none; } }
.mc-thumb {
  flex: 0 0 150px; width: 150px; min-height: 3.4rem; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
}
@media (max-width: 640px) {
  .match-card { flex-direction: column; gap: var(--s2); align-items: stretch; }
  .mc-thumb { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 6; }
  /* W kolumnie godzina nad meczem: bez pionowej kreski, cienka pozioma linia pod; licznik inline obok godziny */
  .mc-time { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--s2);
    border-right: none; border-bottom: 1px solid var(--hairline); padding: 0 0 var(--s1); min-width: 0; text-align: left; }
  .mc-countdown { margin-top: 0; }
  .mc-time-night { display: inline; margin-left: var(--s2); }
}

/* Tabele grup w grze na stronie DZIŚ — reużycie stylu/szerokości kolumn z /mecze/ */
.home-groups { margin-top: var(--s7); }
.home-groups .bracket-groups {
  margin-top: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* Podpis pod odliczaniem: który mecz odliczamy — to jest treść hero, licznik wspiera */
.cd-caption { color: var(--ink); font-size: 1.15rem; font-weight: 600; margin: 0; min-height: 1.4em; }

/* --- Strona główna: sekcja „Wczoraj na boiskach" --- */
.home-yesterday { margin-top: var(--s6); }
.yesterday-list { display: grid; gap: var(--s3); margin-top: var(--s4); }
.yesterday-row {
  display: block; padding: var(--s2) var(--s3); border-radius: var(--r-card);
  background: var(--bg-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.yesterday-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); text-decoration: none; }
.yr-post { color: var(--ink); font-size: 0.95rem; line-height: 1.5; margin: var(--s3) 0 0; }
@media (max-width: 640px) {
  .versus-row .vr-name { font-size: 0.95rem; }
  .vr-score { font-size: 1.25rem; }
  .vr-time { font-size: 0.95rem; white-space: normal; text-align: center; padding: 0 var(--s2); }
  .match-card .vr-name { font-size: 1rem; }
}

/* --- Strona meczu: hero versus + przebieg + zmiany (przebudowa 2026-06-12) --- */
.match-hero { text-align: center; }
.match-hero .versus-row { margin: var(--s4) 0 var(--s2); }
.match-hero .vr-name { font-size: clamp(1.25rem, 4vw, 1.8rem); }
.match-hero .vr-score { font-size: clamp(2rem, 7vw, 2.8rem); }
.match-hero .vr-time { font-size: clamp(1.3rem, 5vw, 1.9rem); }
.match-hero .vr-flag.flag-svg { height: 1.15em; width: 1.725em; }
.match-hero .vr-sc { font-size: 0.95rem; }
.match-eyebrow { color: var(--ink-muted); font-size: 0.85rem; font-weight: 600; margin: 0 0 var(--s2); }
.match-reschedule { color: var(--ink-muted); font-size: 0.85rem; font-style: italic; margin: var(--s1) 0 0; }
.match-tile-meta { color: var(--ink-muted); font-size: 0.9rem; margin: var(--s2) 0 0; }
.match-hero .match-meta { justify-content: center; }
.match-live-pill {
  display: inline-block; padding: 0.2rem 0.8rem; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.match-timeline { list-style: none; margin: 0; padding: 0; }
.match-timeline li {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: 0.4rem 0; border-bottom: 1px solid var(--hairline);
}
.match-timeline li:last-child { border-bottom: 0; }
.tl-minute { flex: 0 0 3.4em; text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tl-icon { flex: 0 0 auto; }
.lineup-subs-label { margin: var(--s3) 0 0.2rem; font-weight: 600; font-size: 0.88rem; }
.lineup-subs { color: var(--ink-muted); font-size: 0.9rem; }
/* Bez bulletów - numer (skład) i minuta (zmiany) są już znacznikiem wiersza */
.lineup-xi, .lineup-subs { list-style: none; padding-left: 0; }
.lineup-xi li { padding: 1px 0; }
/* Ikony zdarzeń przy zawodniku: gol ⚽, karny ⚽ᵏ, samobój ⚽ na czerwono */
.ev { margin-left: 4px; font-size: 0.9em; white-space: nowrap; }
.ev-pen sup { font-size: 0.65em; font-weight: 700; vertical-align: super; }
.ev-og { background: rgba(200, 32, 32, 0.20); border-radius: 999px; padding: 1px 3px; }
/* Kartki rysowane CSS (emoji 🟨/🟥 renderuje się jako brzydkie kwadraty) */
.card { display: inline-block; width: 0.64em; height: 0.88em; border-radius: 2px; margin-left: 5px;
  vertical-align: -0.1em; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.card-y { background: #f4c20d; }
.card-r { background: #d62828; }
.card-min { margin-left: 3px; font-size: 0.78em; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineup-coach { color: var(--ink-muted); font-size: 0.88rem; margin: 0 0 var(--s2); }
/* Zmiennik wcięty pod zmienianym zawodnikiem: ↑ minuta (zielona) + nazwisko, wyciszony */
.sub-on { color: #1a8a3c; font-size: 0.78em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineup-in { padding-left: 1.7em; color: var(--ink-muted); font-size: 0.92em; }
.stats-flag.flag-svg { height: 1em; width: 1.5em; object-fit: cover; border-radius: 2px; vertical-align: -0.18em; }
/* Słupek udziału pod parą statystyk: lewa = akcent, reszta = neutralny tor. Prowadzi oko, liczby zostają. */
.match-stats .stat-bar-row td { padding: 0 0.3rem 0.55rem; border-bottom: none; }
.stat-bar { display: block; height: 4px; border-radius: 2px; background: var(--accent-soft); overflow: hidden; }
.stat-bar-a { display: block; height: 100%; background: var(--accent); }

/* --- Strona główna: karta briefu --- */
.home-brief-card {
  display: flex; align-items: center; gap: var(--s4); padding: var(--s5);
  border-radius: var(--r-card); background: var(--bg-card); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.home-brief-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); text-decoration: none; }
.hbc-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.hbc-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.hbc-text strong { font-size: 1.1rem; }
.hbc-text span { color: var(--ink-muted); font-size: 0.95rem; }
.hbc-go { flex: 0 0 auto; color: var(--ink-muted); font-size: 1.3rem; }

/* --- Strona główna: teaser newsów --- */
.news-teaser { list-style: none; margin: 0; padding: 0; }
.news-teaser li { margin: 0; }
.news-teaser li a {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: var(--s4); align-items: baseline;
  padding: var(--s4) 0; border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink);
}
.news-teaser li:first-child a { border-top: 1px solid var(--hairline); }
.news-teaser li a:hover { color: var(--accent); }
.nt-team { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); font-weight: 600; }
.nt-title { line-height: 1.4; }
.nt-when { color: var(--ink-muted); font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 640px) {
  .news-teaser li a { grid-template-columns: 2.8rem 1fr; }
  .nt-when { display: none; }
}

/* --- /newsy/ : wpisy jako miękkie karty (scope: tylko strona newsy) --- */
.news-day { margin: var(--s7) 0; }
.news-day > h2 {
  font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-muted);
  border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s4);
}
.news-day .pulse-list { display: grid; gap: var(--s3); }
.news-day .news-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.3rem 0.7rem; align-items: baseline;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  border-radius: var(--r-card); background: var(--bg-card); box-shadow: var(--shadow-card);
}
.news-day .news-card > strong { font-family: var(--font-mono); }
.news-day .news-card > strong a { color: var(--accent); font-size: 0.82rem; }
.news-day .news-card .pulse-title { grid-column: 1 / -1; font-size: 1.05rem; line-height: 1.4; }
.news-day .news-card .pulse-when { color: var(--ink-muted); }
.news-day .news-card .pulse-details,
.news-day .news-card .pulse-summary,
.news-day .news-card .pulse-full { grid-column: 1 / -1; }

/* --- /druzyny/ : siatka grup, karty z oddechem --- */
.teams-index { margin-top: var(--s5); }
.teams-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
.teams-group { padding: var(--s4) var(--s5); }
.teams-group h3 { color: var(--ink-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.teams-group li a { padding: 0.4rem 0; border-radius: var(--r-md); }
.teams-group li a:hover { color: var(--accent); }

/* --- Plakietki ryzyka (stadion / mecz / drużyna) --- */
.badge-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
  font-size: 0.74rem; font-weight: 600; line-height: 1.3;
  background: var(--accent-soft); color: var(--accent);
}
.badge-altitude { background: rgba(90, 60, 160, 0.10); color: #5a3ca0; }
.badge-altitude::before { content: "⛰"; }
.badge-heat-extreme { background: rgba(200, 40, 30, 0.10); color: #c2281e; }
.badge-heat-extreme::before { content: "🔥"; }
.badge-heat-high { background: rgba(210, 130, 0, 0.12); color: #b06e00; }
.badge-heat-high::before { content: "🌡"; }
.badge-jetlag { background: rgba(0, 90, 160, 0.10); color: #0a5da0; }
.badge-jetlag::before { content: "✈"; }
.badge-weather { background: rgba(0, 122, 180, 0.10); color: #036; font-weight: 700; }

/* --- /stadiony/ : indeks + szczegół --- */
.venues-group { margin-top: var(--s6); }
.venues-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.venue-card {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: var(--s4) var(--s5); border-radius: var(--r-card);
  background: var(--bg-card); box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--ink); border: 1px solid var(--hairline);
}
.venue-card { padding: 0; overflow: hidden; }
.venue-card > strong, .venue-card > .venue-city, .venue-card > .venue-facts, .venue-card > .badge-row {
  padding-left: var(--s5); padding-right: var(--s5);
}
.venue-card > strong { padding-top: var(--s3); }
.venue-card > .badge-row { padding-bottom: var(--s4); margin-top: var(--s3); }
.venue-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.venue-card strong { font-size: 1.05rem; }
.venue-thumb { display: block; aspect-ratio: 16 / 9; background: var(--bg-soft); }
.venue-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.venue-photo { margin: var(--s5) 0 0; }
.venue-photo img { width: 100%; border-radius: var(--r-card); display: block; box-shadow: var(--shadow-card); }
.venue-photo figcaption { margin-top: var(--s2); font-size: 0.78rem; color: var(--ink-muted); }
.venue-photo figcaption a { color: var(--ink-muted); }

/* --- Galeria stadionu --- */
.venue-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.venue-gallery figure { margin: 0; }
.venue-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; box-shadow: var(--shadow-card); }
.venue-gallery figcaption { margin-top: 0.25rem; font-size: 0.7rem; color: var(--ink-muted); line-height: 1.35; }

/* --- Kuracja zdjęć (★ główne / ✕ usuń) --- */
.curate-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s4) 0; }
.curate-bar button {
  font-size: 0.82rem; padding: 0.35rem 0.8rem; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--bg-card); color: var(--ink); cursor: pointer;
}
#curate-save { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.curate-status { font-size: 0.8rem; color: var(--ink-muted); }
.photo-tile { position: relative; }
.photo-tools { display: none; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); gap: var(--s2); z-index: 3; }
.curating .photo-tile .photo-tools { display: flex; }
.photo-tools button {
  font-size: 0.74rem; padding: 0.25rem 0.55rem; border-radius: var(--r-pill);
  border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.94); color: var(--ink);
  box-shadow: var(--shadow-card);
}
.photo-tools .pt-del { background: rgba(194, 40, 30, 0.92); color: #fff; }
.curating .photo-tile { outline: 2px dashed transparent; outline-offset: 3px; border-radius: var(--r-md); }
.photo-tile.is-main { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-md); }
.photo-tile.is-main::before {
  content: "★ główne"; position: absolute; top: 6px; left: 6px; z-index: 3;
  font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
}
.photo-tile.marked-del { outline: 3px solid #c2281e; outline-offset: 3px; }
.photo-tile.marked-del img { opacity: 0.4; filter: grayscale(0.6); }
.photo-tile.marked-del::after {
  content: "do usunięcia"; position: absolute; top: 6px; right: 6px; z-index: 3;
  font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill);
  background: #c2281e; color: #fff;
}

/* --- Statyczna mapa stadionów (kontur + punkty z podpisem i dymkiem zdjęcia) --- */
/* === Indeks /stadiony/: wspólna mapa NA, zdjęcia-kółka z lejkiem (układ w JS) === */
/* bez nagłówka - mapa osadzona wysoko, na poziomie eyebrow ze strony „Dziś" (ten sam pull-up co .home-hero) */
main.container > .na-map-section { margin: calc(-1 * var(--s3)) 0 0; }
.na-map {
  position: relative; max-width: 940px; margin: 0 auto;
  border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
}
.na-bg { display: block; width: 100%; }
.na-lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* marker = zdjęcie-kółko + nazwa miasta; pozycjonuje JS (left/top), czubek lejka = punkt areny */
.na-mk {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--ink); opacity: 0; transition: opacity 0.3s;
}
.na-map.is-live .na-mk { opacity: 1; }
.na-mk:hover, .na-mk:focus-visible { z-index: 30; text-decoration: none; }
.na-ph-wrap { width: 60px; height: 60px; line-height: 0; }
.na-photo {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); display: block;
  transform-origin: center; cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.22s;
}
/* hover/focus = tooltip: kółko ze zdjęciem się powiększa (animacja), nazwa ustępuje */
.na-mk:hover .na-photo, .na-mk:focus-visible .na-photo {
  transform: scale(1.95); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.na-nm {
  background: #fff; border-radius: 6px; padding: 1px 6px;
  font-weight: 600; font-size: 0.68rem; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); transition: opacity 0.18s;
}
.na-mk:hover .na-nm, .na-mk:focus-visible .na-nm { opacity: 0; }
/* Spis zapasowy (bez JS / czytniki ekranu) */
.na-list { margin-top: var(--s6); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5); }
.na-list ul { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.na-list li { padding: 3px 0; }
.na-list-city { color: var(--ink-muted); font-size: 0.82rem; }
@media (max-width: 600px) { .na-ph-wrap, .na-photo { width: 44px; height: 44px; } .na-nm { font-size: 0.6rem; } }

.venues-map-section { margin-top: var(--s5); }
.stadium-map { position: relative; max-width: 820px; margin: 0 auto; }
.stadium-map-base { width: 100%; display: block; border-radius: var(--r-card); }
.map-dot { position: absolute; width: 0; height: 0; z-index: 2; }
.map-dot.is-current { z-index: 4; }
.map-dot:hover, .map-dot.is-open { z-index: 20; }

/* Kropka */
.map-dot-pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.map-dot.is-current .map-dot-pin { background: #c2281e; width: 17px; height: 17px; }

/* Podpis miasta — zawsze widoczny, odsunięty wg data-lp */
.map-dot-label {
  position: absolute; white-space: nowrap; font-size: 0.66rem; font-weight: 600;
  padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.9);
  color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); pointer-events: none;
}
.map-dot[data-lp="s"] .map-dot-label { left: 0; top: 9px; transform: translateX(-50%); }
.map-dot[data-lp="n"] .map-dot-label { left: 0; bottom: 9px; transform: translateX(-50%); }
.map-dot[data-lp="e"] .map-dot-label { left: 9px; top: 0; transform: translateY(-50%); }
.map-dot[data-lp="w"] .map-dot-label { right: 9px; top: 0; transform: translateY(-50%); }
.map-dot.is-current .map-dot-label { background: #c2281e; color: #fff; }

/* Dymek ze zdjęciem — hover (desktop) i .is-open (tap) */
.map-pop {
  position: absolute; left: 0; bottom: 16px; transform: translateX(-50%);
  width: 180px; background: var(--bg-card); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift); overflow: hidden; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 0.12s; pointer-events: none;
}
.map-dot:hover .map-pop, .map-dot.is-open .map-pop { opacity: 1; visibility: visible; }
.map-pop img { width: 100%; height: 104px; object-fit: cover; display: block; }
.map-pop-name { display: block; font-weight: 600; padding: 6px 8px 0; font-size: 0.82rem; }
.map-pop-city { display: block; padding: 0 8px 8px; font-size: 0.72rem; color: var(--ink-muted); }
/* Wąski ekran: statyczne podpisy nachodzą i wychodzą poza kontur (klastry obu wybrzeży) —
   chowamy je, mapa zostaje czysta (piny), nazwę niesie dymek po tapnięciu (.map-pop-city). */
@media (max-width: 520px) {
  .map-pop { width: 150px; }
  .map-dot-label { display: none; }
}

/* Warianty mapy (do oceny) */
.map-variants { margin-top: var(--s7); }
.map-variants h2 { margin-top: 0; }
.map-variant { margin: 0 0 var(--s6); }
.map-variant figcaption { font-weight: 600; margin-bottom: var(--s2); color: var(--ink-muted); }
.map-thumb {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.map-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-dot.is-current .map-thumb { border-color: #c2281e; width: 50px; height: 50px; }
/* W wariancie miniatur podpis zawsze pod miniaturą */
.v-thumbs .map-dot-label { top: 24px; bottom: auto; left: 0; right: auto; transform: translateX(-50%); }

/* --- Strzałki przy zdjęciu głównym + lightbox pełnoekranowy --- */
.venue-photo { position: relative; cursor: zoom-in; }
.photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.photo-prev { left: 10px; }
.photo-next { right: 10px; }
.photo-nav:hover { background: rgba(0, 0, 0, 0.7); }
.curating .photo-nav { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lb-img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 6px; }
.lb-nav, .lb-close {
  position: absolute; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff;
  cursor: pointer; border-radius: 50%;
}
.lb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2rem; }
.lb-prev { left: 3vw; }
.lb-next { right: 3vw; }
.lb-close { top: 4vw; right: 4vw; width: 44px; height: 44px; font-size: 1.3rem; }
.lb-nav:hover, .lb-close:hover { background: rgba(255, 255, 255, 0.28); }
.lb-caption {
  position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; text-align: center; padding: 0 1rem;
}
.lb-caption a { color: #fff; }
.lb-count { opacity: 0.6; margin-left: 0.5rem; }
@media (max-width: 520px) { .lb-nav { width: 40px; height: 40px; font-size: 1.5rem; } .lb-prev { left: 2vw; } .lb-next { right: 2vw; } }

/* --- Autorzy zdjęć (na dole strony stadionu) --- */
.venue-credits-note { color: var(--ink-muted); font-size: 0.85rem; margin: 0 0 var(--s3); }
.credits-list { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.credits-list li { font-size: 0.82rem; color: var(--ink-muted); }
.credits-list a { color: var(--ink-muted); }
.venue-city { color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.venue-facts { font-size: 0.82rem; color: var(--ink-muted); }
.venue-facts-muted { font-size: 0.78rem; }
/* Dane areny: karty faktów z hierarchią (wartość mocna, etykieta drobna nad nią) */
.venue-facts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--s3); margin: 0;
}
.venue-facts-grid > div {
  background: var(--bg-soft); border-radius: var(--r-md); padding: var(--s3) var(--s4);
}
.venue-facts-grid dt {
  color: var(--ink-muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 0.2rem;
}
.venue-facts-grid dd { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* --- Widżet stadionu na stronie meczu --- */
.match-venue-head { margin: 0 0 0.2rem; }
.match-venue-head a { text-decoration: none; }
.match-venue-facts { margin: 0; color: var(--ink-muted); font-size: 0.85rem; }

/* --- Strona drużyny: skład 26, tabela grupy, ciekawostki --- */
.squad { display: flex; flex-direction: column; gap: var(--s4); }
.squad-line h4 { margin: 0 0 0.35rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); }
.squad-count { color: var(--accent); font-weight: 700; }
.squad-players { list-style: none; margin: 0; padding: 0; }
.squad-players li {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) 6.2em 3.2em minmax(7em, 13em);
  gap: 0.3rem 1rem; align-items: baseline;
  padding: 0.35rem 0; border-bottom: 1px solid var(--hairline);
}
.sq-no { text-align: right; color: var(--ink-muted); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.xi-no { display: inline-block; min-width: 1.5em; text-align: right; color: var(--ink-muted); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.sq-name { font-weight: 600; }
.sq-dob { text-align: right; color: var(--text); font-size: 0.84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sq-age { text-align: right; color: var(--ink-muted); font-size: 0.84rem; white-space: nowrap; }
.sq-club { color: var(--ink-muted); font-size: 0.88rem; }
@media (max-width: 600px) {
  .squad-players li { grid-template-columns: 1.4em minmax(0, 1fr) auto auto; gap: 0.2rem 0.7rem; }
  .sq-club { grid-column: 2 / -1; }
}
.sq-cap {
  display: inline-block; font-size: 0.62rem; font-weight: 700; color: #fff;
  background: var(--accent); border-radius: 3px; padding: 0 0.25rem; vertical-align: middle;
}
/* Mecze drużyny — jednolity wiersz-link (każdy mecz tak samo) */
.team-matches { list-style: none; margin: 0; padding: 0; }
.team-matches li { margin: 0 0 0.45rem; }
.match-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 1rem; align-items: baseline;
  padding: 0.6rem 0.85rem; border: 1px solid var(--hairline); border-radius: var(--r-md);
  color: var(--text); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.match-row:hover { border-color: var(--accent); box-shadow: var(--shadow-card); text-decoration: none; }
.match-row.is-next { border-left: 3px solid var(--accent); }
.mr-when { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: 0.9rem; white-space: nowrap; }
.mr-label { font-weight: 600; }
.mr-tag { color: var(--ink-muted); font-size: 0.82rem; white-space: nowrap; }

/* „Pokaż starsze" — paging feedu newsów */
.news-more {
  margin: var(--s4) 0 0; padding: 0.5rem 1.2rem;
  background: transparent; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  color: var(--accent); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s ease;
}
.news-more:hover { border-color: var(--accent); }
.group-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.group-table th, .group-table td { padding: 0.45rem 0.3rem; text-align: left; border-bottom: 1px solid var(--hairline); }
.group-table th:first-child, .group-table td:first-child { width: 1.3rem; color: var(--ink-muted); }
.group-table th:not(:nth-child(2)), .group-table td:not(:nth-child(2)) { text-align: center; }
.group-table th:not(:nth-child(2)), .group-table td:not(:nth-child(2)) { width: 2.1rem; }
.group-table th:nth-child(2), .group-table td:nth-child(2) { width: auto; }
.group-table td:nth-child(2) a { text-decoration: none; }
.group-table thead th { color: var(--ink-muted); font-weight: 600; }
.group-table tr.is-current { background: var(--accent-soft); font-weight: 600; }
/* Litera grupy jako ikona przy nazwie (tabela 3. miejsc) */
.group-badge { display: inline-block; min-width: 1.25em; padding: 0 0.3em; margin-left: 0.35em;
  font-size: 0.72em; font-weight: 700; text-align: center; color: var(--ink-muted);
  background: var(--section, #f0f0f2); border-radius: 4px; vertical-align: 0.08em; }
@media (max-width: 640px) {
  .group-table { font-size: 0.82rem; }
  .group-table th, .group-table td { padding: 0.4rem 0.2rem; }
}
/* Zabezpieczenie wąskiego ekranu: tabela 10 kolumn nie ściska się poniżej czytelności. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .group-table { min-width: 30rem; }
.szanse-section .table-scroll table { min-width: 34rem; }
/* Kolumna-ładunek „Mistrz": ten sam akcent (zieleń), tło proporcjonalne do wartości. */
.szanse-section td.fav-champ { font-variant-numeric: tabular-nums; }
.szanse-section th.fav-champ-h { color: var(--accent, #006836); border-bottom: 2px solid var(--accent, #006836); }
.team-prognoza { margin-top: var(--s4); line-height: 1.55; color: var(--text); }

/* --- Dashboard: faworyci + grupy w pigułce --- */
.fav-list { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.fav-list li a {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0.6rem var(--s4); border-radius: var(--r-md);
  background: var(--bg-card); box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--ink);
}
.fav-list li a:hover { box-shadow: var(--shadow-lift); }
.fav-flag { width: 26px; height: auto; border-radius: 3px; flex: none; }
.fav-name { font-weight: 600; flex: 1; }
.fav-pct { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.groups-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.group-mini { padding: var(--s4); border-radius: var(--r-card); background: var(--bg-card); box-shadow: var(--shadow-card); }
.group-mini h3 { margin: 0 0 var(--s2); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); }
.group-mini ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.group-mini li a { display: flex; align-items: center; gap: var(--s2); padding: 0.3rem 0.2rem; border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.group-mini li a:hover { background: var(--accent-soft); }
.group-mini-flag { width: 22px; height: auto; border-radius: 2px; flex: none; }
.gm-name { flex: 1; font-size: 0.92rem; }
.gm-rank { color: var(--ink-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* --- Strona stadionu: nagłówek z paskiem faktów + nawigacja między arenami + mini-mapka --- */
.venue-head { display: flex; gap: var(--s5); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.venue-head-main { flex: 1; min-width: 240px; }
.venue-title { margin: 0; }
.venue-lead { margin: var(--s2) 0 0; color: var(--ink-muted); font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 0.2rem var(--s3); }
.venue-lead strong { color: var(--ink); }
.venue-switch { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); font-size: 0.85rem; }
.venue-switch a { color: var(--ink-muted); text-decoration: none; }
.venue-switch a:hover { color: var(--accent); }
.venue-locator { margin: 0; }
.venue-locator figcaption { margin-top: 0.3rem; font-size: 0.72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mini-map { position: relative; width: 280px; max-width: 42%; flex: none; }
.mini-map img { width: 100%; display: block; border-radius: var(--r-md); border: 1px solid var(--hairline); }
.mini-dot {
  position: absolute; transform: translate(-50%, -50%); width: 13px; height: 13px;
  border-radius: 50%; background: #c2281e; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
@media (max-width: 640px) {
  .venue-head { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .mini-map { width: 200px; max-width: 60%; }
}

/* === Strona stadionu: tytuł + małe kafelki NAD zdjęciem (czytelność), czyste zdjęcie, lokalizacja (06-14) === */
.venue-head2 { margin: 0 0 var(--s4); }
.venue-head2 .venue-title { margin: 0.1rem 0 0; }
.venue-head2 .badge-row { margin: var(--s3) 0 0; }
.venue-fifa { color: var(--ink-muted); font-size: 0.92rem; margin: 0.15rem 0 0; font-style: italic; }
/* Pasek faktów areny (wariant 4): karta z działkami - klub | pojemność-hero | rok/wysokość/zegar */
.venue-facts2 {
  display: flex; align-items: stretch; margin: var(--s4) 0 0;
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); background: var(--bg-card); overflow: hidden;
}
.venue-facts2 > div { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--s4) var(--s5); }
.venue-facts2 > div + div { border-left: 1px solid var(--hairline); }
.vf2-club { flex-direction: column !important; align-items: flex-start; justify-content: center; gap: var(--s2); }
.vf2-club-row { display: flex; align-items: center; gap: var(--s3); }
.vf2-crest { width: 46px; height: 46px; object-fit: contain; flex: none; }
/* arena dwóch drużyn: kluby jeden pod drugim, drobniej */
.vf2-club--multi { gap: var(--s1); }
.vf2-club--multi .vf2-crest { width: 30px; height: 30px; }
.vf2-club--multi .vf2-big { font-size: 1.1rem; }
.vf2-cap { flex: 1; align-items: center; text-align: center; }
.vf2-cap .vf2-big { font-size: 1.95rem; font-weight: 800; }
.vf2-side { align-items: flex-end; text-align: right; }
.vf2-big { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.vf2-sm { font-size: 1.05rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.vf2-lab { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
@media (max-width: 640px) {
  .venue-facts2 { flex-direction: column; }
  .venue-facts2 > div + div { border-left: 0; border-top: 1px solid var(--hairline); }
  .vf2-cap, .vf2-side { align-items: flex-start; text-align: left; }
}
/* Hero-galeria areny: główne szerokie + wąska kolumna miniaturek; poziome wypełniają, złe-ratio z tłem */
.venue-shots { display: flex; gap: 8px; align-items: stretch; margin: 0 0 var(--s6); }
.venue-shots > * { min-width: 0; }
.vs-main { flex: 5 1 0; margin: 0; position: relative; cursor: zoom-in; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
.vs-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; }
.vs-th { flex: 1 1 0; min-height: 0; margin: 0; position: relative; cursor: zoom-in; border-radius: 8px; overflow: hidden; background: #15161a; }
.vs-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-th.vs-odd img { object-fit: contain; }
.vs-hidden { display: none; }
.vs-more { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; pointer-events: none; }
@media (max-width: 640px) {
  .venue-shots { flex-direction: column; }
  .vs-main { flex: none; aspect-ratio: 16/10; }
  .vs-col { flex: none; flex-direction: row; }
  .vs-th { aspect-ratio: 4/3; }
}
/* Opis areny nad zdjęciem (lead, kilka zdań) */
.venue-lead-prose { max-width: var(--col-read); margin: 0 0 var(--s5); font-size: 1.08rem; line-height: 1.6; color: var(--ink); }
.venue-lead-prose p { margin: 0; }
.venue-lead-prose p + p { margin-top: var(--s2); color: var(--ink-muted); font-size: 0.96rem; }
/* Opis redaktora + lokalizacja: tekst po lewej, mapa po prawej (zbalansowane, opcja 1) */
.venue-about-loc { display: flex; gap: var(--s5); align-items: flex-start; }
.venue-about-loc > * { min-width: 0; }
.al-text { flex: 1.3 1 0; font-size: 1.08rem; line-height: 1.6; color: var(--ink); }
.al-text p { margin: 0; }
.al-text p + p { margin-top: var(--s2); }
.al-map { flex: 1 1 0; margin: 0; }
@media (max-width: 640px) { .venue-about-loc { flex-direction: column; } .al-map { width: 100%; } }
/* O arenie: dwa akapity prozy pod jednym nagłówkiem */
.venue-about p + p { margin-top: var(--s3); }
.venue-location .venue-locator { margin: 0; max-width: 360px; }
.venue-location .venue-locator figcaption { margin-top: 0.35rem; font-size: 0.8rem; color: var(--ink-muted); }
/* Mapa USA: wspólny statyczny obraz (offline) + celownik na pozycji areny + polskie nazwy krajów */
.usmap { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-card); }
.usmap > img { display: block; width: 100%; height: auto; }
.usmap-lab { position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  color: #5a5a5f; font-weight: 700; font-size: clamp(10px, 1.4vw, 14px); letter-spacing: 0.08em;
  text-transform: uppercase; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff; }
.usmap-cross { position: absolute; transform: translate(-50%, -50%); line-height: 0; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.usmap-cross svg { width: clamp(28px, 4.4vw, 40px); height: auto; }
.usmap-cap { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--ink-muted); }
@media (max-width: 640px) {
  .venue-stats .vs-num { font-size: 1.25rem; }
}


/* === Moduł prognoz: lista /prognozy/mecze/ + karta /prognozy/mecz/{ID}/ === */

.prog-day { margin-top: var(--s7); }
.prog-day h2 { font-size: 1.05rem; color: var(--ink-muted); margin-bottom: var(--s3); }
.prog-today {
  display: inline-block; margin-left: var(--s2); padding: 0.05rem 0.55rem;
  border-radius: var(--r-pill); background: var(--accent); color: #fff;
  font-size: 0.72rem; font-weight: 600; vertical-align: middle;
}
.prog-row {
  display: block; padding: var(--s3) var(--s4); margin-bottom: var(--s3);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  text-decoration: none; color: inherit; background: #fff;
  transition: box-shadow 0.15s ease;
}
.prog-row:hover { box-shadow: var(--shadow-soft, 0 2px 10px rgba(0, 0, 0, 0.08)); }
.prog-line {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  justify-content: center; margin: var(--s2) 0 0; font-size: 0.88rem;
}
.prog-typ { font-weight: 600; }
.prog-grade { color: var(--ink-muted); }
.prog-muted { color: var(--ink-muted); }
.prog-past-head { margin-top: var(--s8); border-top: 1px solid var(--hairline); padding-top: var(--s5); }
.prog-meta { color: var(--ink-muted); margin-top: var(--s2); }
.prog-typ-big { font-size: 1.4rem; display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.prog-rozklad { color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-top: var(--s2); }
.prog-fineprint { color: var(--ink-muted); font-size: 0.82rem; margin-top: var(--s5); }

/* /mecze/ — akordeon kolejek/rund (bieżąca otwarta, reszta zwinięta) + scoreboard zakończonych */
.mecze-acc {
  border: 1px solid var(--hairline); border-radius: var(--radius, 12px);
  margin: var(--s3) 0; background: #fff; overflow: hidden;
}
.mecze-acc > summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  padding: var(--s4) var(--s5); cursor: pointer; list-style: none; font-weight: 700;
}
.mecze-acc > summary::-webkit-details-marker { display: none; }
.mecze-acc > summary::after {
  content: "▸"; color: var(--ink-muted); font-weight: 400; margin-left: auto;
}
.mecze-acc[open] > summary::after { content: "▾"; }
.mecze-acc-title { letter-spacing: var(--tracking-tight); }
.mecze-acc-meta { color: var(--ink-muted); font-weight: 400; font-size: 0.9rem; }
.mecze-acc.is-done > summary { color: var(--ink-muted); }
.mecze-acc-body { padding: 0 var(--s5) var(--s3); }
.mecze-day { margin-top: var(--s4); }
.mecze-day:first-child { margin-top: 0; }
.mecze-day-head {
  margin: 0 0 var(--s2); padding-bottom: var(--s2); font-size: 0.9rem; font-weight: 700;
  color: var(--ink); border-bottom: 1px solid var(--hairline);
}
/* Bez kreski między meczami - oddziela odstęp; bez podkreślenia w hover (FIFA-like, subtelnie) */
.mecze-row {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s1) var(--s3); border-radius: 10px;
  color: inherit; text-decoration: none;
}
.mecze-row:hover { background: var(--section, #f5f5f7); text-decoration: none; }
/* Rynna godziny z lewej (jak karty dnia), kompaktowa; reszta wiersza wypełnia */
.mecze-row .mc-time { font-size: 0.95rem; min-width: 2.8em; padding-right: var(--s3); }
.mecze-row-main { flex: 1 1 auto; min-width: 0; }
/* Pogoda pod godziną na liście meczów planowanych: trigger (ikona+temp) + tooltip z detalem.
   Rynna staje się kolumną: godzina na górze, pod nią dyskretny trigger. Dymek na hover/focus. */
.mc-time.mc-time-wx { flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; border-bottom: none; border-right: 1px solid var(--hairline);
  padding: 0 var(--s3) 0 0; min-width: 5.2em; }
.mc-wx { position: relative; display: inline-flex; }
.mc-wx-trig { font-size: 0.78rem; font-weight: 600; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; }
.mc-wx-tip { position: absolute; left: 0; top: calc(100% + 6px); display: none; z-index: 20;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: .45em .65em; white-space: nowrap;
  font-size: 0.78rem; font-weight: 500; color: var(--ink); text-align: left; }
.mc-wx-tip::before { content: ""; position: absolute; left: 14px; top: -5px; transform: rotate(45deg);
  width: 9px; height: 9px; background: #fff;
  border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline); }
.mc-wx:hover .mc-wx-tip, .mc-wx:focus-within .mc-wx-tip { display: block; }
.mc-wx-row { display: block; font-variant-numeric: tabular-nums; }
.mc-wx-row + .mc-wx-row { margin-top: 2px; }

/* Tooltip szansy awansu na /szanse/ (bliźniak pogody, prawo-kotwiczony - ostatnia kolumna wąskiej karty) */
.prob { position: relative; display: inline-flex; outline: none; }
.prob-trig { font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help;
  border-bottom: 1px dotted var(--ink-muted); }
.prob-tip { position: absolute; right: 0; top: calc(100% + 6px); display: none; z-index: 20;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: .5em .7em; white-space: nowrap;
  font-size: 0.78rem; font-weight: 500; color: var(--ink); text-align: left; }
.prob-tip::before { content: ""; position: absolute; right: 14px; top: -5px; transform: rotate(45deg);
  width: 9px; height: 9px; background: #fff;
  border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline); }
.prob:hover .prob-tip, .prob:focus-within .prob-tip { display: block; }
.prob-tip-team { display: block; font-weight: 700; margin-bottom: 3px; }
.prob-row { display: block; font-variant-numeric: tabular-nums; }
.prob-row + .prob-row { margin-top: 2px; }
.prob-yes b { color: var(--accent); }
.prob-no { color: var(--ink-muted); }
.prob-extra { margin-top: 4px; padding-top: 3px; border-top: 1px solid var(--hairline); color: var(--ink-muted); }

/* Tooltip rozegranych meczów na nazwie drużyny (/szanse/, lewo-kotwiczony - druga kolumna od lewej) */
.res { position: relative; display: inline-flex; align-items: center; }
.res-tip { position: absolute; left: 0; top: calc(100% + 6px); display: none; z-index: 20;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: .5em .7em; white-space: nowrap;
  font-size: 0.78rem; font-weight: 500; color: var(--ink); text-align: left; }
.res-tip::before { content: ""; position: absolute; left: 14px; top: -5px; transform: rotate(45deg);
  width: 9px; height: 9px; background: #fff;
  border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline); }
.res:hover .res-tip, .res:focus-within .res-tip { display: block; }
.res-tip-head { display: block; font-weight: 700; margin-bottom: 3px; }

/* Tabela „Szanse 3. miejsc" jest w `.table-scroll` (overflow-x:auto wymusza clip w PIONIE), więc
   tooltip otwierany w dół ucinał się na dolnych wierszach (Szkocja, Ekwador). Dla 5 ostatnich
   wierszy (z kreską odcięcia) otwieramy tooltip DO GÓRY - mają nad sobą całą tabelę (Michał 25.06). */
.mecze-thirds tbody tr:nth-last-child(-n+5) .res-tip,
.mecze-thirds tbody tr:nth-last-child(-n+5) .prob-tip {
  top: auto; bottom: calc(100% + 6px);
}
.mecze-thirds tbody tr:nth-last-child(-n+5) .res-tip::before,
.mecze-thirds tbody tr:nth-last-child(-n+5) .prob-tip::before {
  top: auto; bottom: -5px;
  border-left: none; border-top: none;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.res-row { display: block; font-variant-numeric: tabular-nums; }
.res-row + .res-row { margin-top: 2px; }
.res-mark { display: inline-block; width: 1.1em; text-align: center; }
.res-w .res-mark { color: var(--accent); }
.res-r .res-mark { color: var(--ink-muted); }
.res-p .res-mark { color: #c2281e; }
/* „Wczoraj na boiskach": górny rząd rynna|mecz wyśrodkowany jak /mecze/ (rynna = makro `mc_time`),
   proza post-match pełną szerokością pod spodem - rynna justuje się względem MECZU, nie całej karty. */
.yr-top { display: flex; gap: var(--s3); align-items: center; }
.yr-main { flex: 1 1 auto; min-width: 0; }
/* Rynna „Wczoraj" = szerokość i justunek jak karty meczów NIEROZEGRANYCH (`.match-card .mc-time`):
   do treści (min 3em, nie wymuszone 5.2em z makra) i wyśrodkowana, nie szersza od planowanych. */
.yesterday-row .mc-time.mc-time-wx { min-width: 3em; align-items: center; }
/* Strzelcy w DRUGIM wierszu tego samego gridu versus-row (kolumny 1fr/auto/1fr) → zawsze
   trafiają w wewn. krawędzie flag, niezależnie od wielkości wyniku (mały na /mecze/, duży w hero). */
.vr-sc { font-size: 0.78rem; line-height: 1.3; color: var(--ink-muted); min-width: 0; }
.vr-sc-a { text-align: right; }
.vr-sc-b { text-align: left; }
.mecze-scorers-flat { font-size: 0.78rem; color: var(--ink-muted); text-align: center; margin: var(--s1) 0 0; }
.mecze-row-meta { display: block; text-align: center; color: var(--ink-muted); font-size: 0.78rem; margin-top: var(--s1); }
.mecze-row-resched { font-style: italic; }  /* nota przełożenia: ten sam font co pasek meta, kursywa = to nota */
.mecze-row .vr-center { min-width: 3.4rem; text-align: center; }
/* DESKTOP: stały tor środka (zamiast `auto`) → flagi równają się we WSZYSTKICH wierszach niezależnie
   od treści środka: „–" (przyszły), goły „0:0" (bez przerwy), „(0:1)1:1(0:1)" (z przerwą), „karne 4:3".
   Bez tego mecz bez danych o przerwie zwężał kolumnę auto i flagi siadały bliżej niż w pozostałych
   wierszach (kazus 0:0; zmierzone 83px z przerwą vs 20px bez). Tor stały na gridzie wiersza, nie
   `width` na elemencie - `auto`-track sizing ignorował width pojedynczego itemu. 5.4rem mieści
   najszerszy realny układ z przerwą. Tylko desktop (mobile = osobny układ, węższy). */
@media (min-width: 640px) {
  .mecze-row .versus-row { grid-template-columns: 1fr 5.4rem 1fr; }
}
.mecze-row.is-final .vr-score { font-size: 1.25rem; color: var(--ink); }
.mecze-row .vr-time { font-size: 1rem; }
/* Mecz KO bez pełnej obsady (Wariant 2): znana drużyna w pełnej sile (flaga + nazwa),
   etykieta slotu przygaszona (`.vr-slot`) - odróżnia placeholder od realnej drużyny.
   Globalny (nie tylko `.versus-ko`), bo hero strony meczu używa zwykłego `.versus-row`. */
.vr-slot { color: var(--ink-muted); font-weight: 600; }

/* === Porównanie drużyn na stronie meczu (przed gwizdkiem) === */
.match-compare table.cmp {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--s5);
}
.cmp th, .cmp td {
  padding: 0.5rem 0.6rem; text-align: center; vertical-align: middle;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.cmp thead .cmp-head { font-size: 1.05rem; padding-bottom: 0.7rem; }
.cmp-flag { width: 1.5em; height: auto; vertical-align: -0.25em; margin-right: 0.2em; }
/* Nieznana strona meczu KO w porównaniu: etykieta slotu zamiast flagi+nazwy (przygaszona). */
.cmp-slot { color: var(--ink-muted); font-weight: 600; font-size: 0.85em; }
.cmp tbody th[scope="row"] {
  text-align: left; font-weight: 500; font-size: 0.9rem;
  color: var(--ink-muted); white-space: nowrap;
}
.cmp tbody td { font-weight: 600; }
.cmp .cmp-pre { font-weight: 400; font-size: 0.82rem; color: var(--ink-muted); }
.cmp-form-row .sparkline { display: flex; justify-content: center; }

.cmp-block { margin-top: var(--s5); }
.cmp-colhead {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); font-weight: 600; margin: 0 0 var(--s3);
}
.cmp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.cmp-list { list-style: none; margin: 0; padding: 0; }
.cmp-list li { margin-bottom: 0.35rem; line-height: 1.4; }
.cmp-club { color: var(--ink-muted); font-weight: 400; font-size: 0.85rem; }
.cmp-beat-cell .player-photo { width: 104px; margin: 0 auto var(--s2); }
.cmp-beat-cell .team-prose p { font-size: 0.92rem; }

@media (max-width: 600px) {
  .cmp th, .cmp td { padding: 0.45rem 0.35rem; }
  .cmp thead .cmp-head { font-size: 0.92rem; }
  .cmp tbody th[scope="row"] { font-size: 0.8rem; white-space: normal; }
  .cmp tbody td { font-size: 0.92rem; }
  .cmp-pair { gap: var(--s2); }
  .cmp-beat-cell .player-photo { width: 84px; }
  .cmp-beat-cell .team-prose p { font-size: 0.85rem; }
}

/* === Hero strony meczu: nazwy drużyn klikalne, BEZ podkreślenia === */
.vr-link, .vr-link:hover { text-decoration: none; color: inherit; }
.vr-link:hover .vr-name { color: var(--accent); }

/* ============================================================
   ADMIN — wspólna warstwa paneli administracji (apple, na tokenach)
   Wszystko zakresowane pod .admin-panel, żeby nie mieszać ze stronami
   czytelniczymi. Panele dziedziczą base.html.j2 (nav + stopka); ich dawny
   samodzielny inline CSS był duplikatem tokens.css — teraz jeden język.
   ============================================================ */
.admin-panel { max-width: 880px; margin: 0 auto; }

/* Pasek nawigacji administracji — drugorzędny wobec głównego nav, pod headerem.
   Tło pełnej szerokości + wewnętrzny `.container` trzyma pigułki w osi treści. */
.admin-subnav { background: var(--bg-soft); border-bottom: 1px solid var(--hairline); }
.admin-subnav ul.container { display: flex; gap: var(--s1); list-style: none; margin-block: 0; padding-block: var(--s2); overflow-x: auto; flex-wrap: nowrap; }
.admin-subnav li { flex: 0 0 auto; }
.admin-subnav-link { display: block; padding: var(--s1) var(--s3); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.admin-subnav-link:hover { background: var(--accent-soft); color: var(--accent); }
.admin-subnav-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

/* Nagłówek panelu — ten sam wzorzec wejścia co strony czytelnicze */
.admin-head { padding: 0 0 var(--s5); border-bottom: 1px solid var(--hairline); margin: 0 0 var(--s6); }
.admin-head h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin: var(--s2) 0 var(--s3); }
.admin-lead { color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--col-read); margin: 0; }
.admin-lead strong { color: var(--ink); }
.admin-panel code { background: var(--bg-soft); padding: .1rem .35rem; border-radius: 6px; font-family: var(--font-mono); font-size: .9em; }

/* Pasek narzędzi */
.admin-toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s6); }
.admin-toolbar .hint { color: var(--ink-muted); font-size: var(--fs-small); }
.admin-panel .counter { color: var(--ink); font-size: var(--fs-small); font-weight: 600; }

/* Przyciski — pigułka akcentowa */
.admin-panel .btn { display: inline-block; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--r-pill); padding: .45rem 1.1rem; font-size: var(--fs-small); font-weight: 600; line-height: 1.2; cursor: pointer; }
.admin-panel .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.admin-panel .btn.ghost { background: transparent; color: var(--accent); }
.admin-panel .btn.ghost:hover { background: var(--accent-soft); }
.admin-panel .btn.done { background: #3a3a3c; border-color: #3a3a3c; color: #fff; }
.admin-panel .btn:disabled { opacity: .5; cursor: default; }

/* Karta — audyt / flaga / sekcja narzędzia */
.admin-card, .admin-panel .audit, .admin-panel .flag {
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: var(--s5); margin: 0 0 var(--s5); background: var(--bg-card);
}
.admin-card > h2, .admin-panel .audit > h2, .admin-panel .flag > h2 { font-size: var(--fs-h3); margin: 0 0 .15rem; }
.admin-panel .meta { color: var(--ink-muted); font-size: var(--fs-small); margin: 0 0 .5rem; }
.admin-panel .overall { background: var(--bg-soft); border-radius: var(--r-md); padding: .75rem 1rem; margin: 0 0 1.25rem; font-style: italic; }
.admin-panel .rescan { float: right; }

/* Chipy statusu/wagi */
.admin-panel .chip { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--r-pill); padding: .15rem .6rem; vertical-align: middle; }
.admin-panel .chip.must-fix { background: #fdeceb; color: var(--bad); }
.admin-panel .chip.szlif, .admin-panel .chip.pending { background: #fbf3da; color: var(--warn); }
.admin-panel .chip.confirmed { background: var(--accent-soft-2); color: var(--accent); }
.admin-panel .flag > h2 .chip { margin-left: .5rem; }

/* Usterka / pozycja audytu */
.admin-panel .finding { border-top: 1px solid var(--hairline); padding: 1.1rem 0 .25rem; }
.admin-panel .finding:first-of-type { border-top: 0; }
.admin-panel .finding h3 { display: inline; font-size: 1.05rem; margin: 0 0 0 .5rem; }
.admin-panel .where { color: var(--ink-muted); font-size: var(--fs-small); margin: .35rem 0 .5rem; }
.admin-panel .why { margin: 0 0 .75rem; }
.admin-panel .why strong, .admin-panel .diag strong, .admin-panel .fix strong { color: var(--accent); }
.admin-panel .diag, .admin-panel .fix { margin: 0 0 .5rem; }

/* Redaktor — cytat + czego czytelnik chce + pary [old → new] */
.admin-panel blockquote.quote { border-left: 3px solid var(--hairline); margin: .5rem 0; padding: .1rem 0 .1rem .8rem; font-style: italic; }
.admin-panel .target { color: var(--ink-muted); font-size: .82rem; margin: 0 0 .5rem; }
.admin-panel .wants { background: var(--accent-soft); border-radius: var(--r-md); padding: .75rem 1rem; margin: 0 0 .75rem; }
.admin-panel .wants strong { color: var(--accent); }
.admin-panel .pairs { margin: .5rem 0 .75rem; }
.admin-panel .pair { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5; background: var(--bg-soft); border-radius: 8px; padding: .5rem .7rem; margin: 0 0 .4rem; }
.admin-panel .pair .old { color: var(--bad); }
.admin-panel .pair .new { color: var(--accent); }
.admin-panel .pair .arrow { color: var(--ink-muted); }

/* Prompt do skopiowania */
.admin-panel .prompt-wrap { position: relative; }
.admin-panel pre.prompt { background: var(--ink); color: var(--bg-soft); border-radius: var(--r-md); padding: 1rem; margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; max-height: 360px; overflow: auto; }
.admin-panel .copy { position: absolute; top: .6rem; right: .6rem; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--r-pill); padding: .35rem .9rem; font-size: .82rem; font-weight: 600; cursor: pointer; }
.admin-panel .copy.done { background: #3a3a3c; }

/* Decyzje — zastosuj / odrzuć / cofnij / badge'e */
.admin-panel .controls { float: right; display: inline-flex; align-items: center; gap: .7rem; }
.admin-panel .decide { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-small); color: var(--ink-muted); cursor: pointer; user-select: none; }
.admin-panel .toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-small); color: var(--ink-muted); cursor: pointer; user-select: none; }
.admin-panel .decide input, .admin-panel .toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; }
.admin-panel .finding.is-accepted { background: var(--accent-soft); border-radius: 10px; padding-left: .6rem; padding-right: .6rem; }
.admin-panel .finding.is-done, .admin-panel .finding.is-reject { opacity: .5; }
.admin-panel .finding.is-stale { opacity: .6; }
.admin-panel .audit.is-superseded { opacity: .55; }
.admin-panel .done-badge, .admin-panel .reject-badge, .admin-panel .stale-badge { float: right; font-size: .78rem; font-weight: 700; color: var(--ink-muted); }
.admin-panel .done-badge { color: var(--accent); }
.admin-panel .superseded-tag { font-size: .76rem; font-weight: 700; color: var(--ink-muted); }
.admin-panel .undo, .admin-panel .mark, .admin-panel .restore { margin-left: .5rem; background: transparent; border: 0; font-size: .76rem; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }
.admin-panel .undo { color: var(--ink-muted); }
.admin-panel .undo:hover { color: var(--bad); }
.admin-panel .mark, .admin-panel .restore { color: var(--accent); }
.admin-panel .reject-btn { background: transparent; border: 0; color: var(--bad); font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }

/* Fakty — legenda + diff stara/nowa + akcje + stan */
.admin-panel .legend { list-style: none; padding: 0; margin: 0 0 var(--s6); font-size: var(--fs-small); color: var(--ink-muted); }
.admin-panel .legend li { margin: .15rem 0; }
.admin-panel .legend b { color: var(--ink); }
.admin-panel .flag.is-decided { opacity: .72; }
.admin-panel .kv { color: var(--ink-muted); font-size: var(--fs-small); margin: .25rem 0; }
.admin-panel .kv code { color: var(--ink); }
.admin-panel .reason { background: rgba(184, 134, 11, .1); border-radius: var(--r-md); padding: .75rem 1rem; margin: .6rem 0 .9rem; }
.admin-panel .reason strong { color: var(--warn); }
.admin-panel .diff { margin: .6rem 0 .9rem; }
.admin-panel .side { border-radius: var(--r-md); padding: .75rem 1rem; margin: 0 0 .6rem; }
.admin-panel .side .tag { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .35rem; }
.admin-panel .side.old { background: #fdeceb; }
.admin-panel .side.old .tag { color: var(--bad); }
.admin-panel .side.new { background: var(--accent-soft); }
.admin-panel .side.new .tag { color: var(--accent); }
.admin-panel .actions { margin: .75rem 0 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.admin-panel .actions button { border-radius: var(--r-pill); padding: .45rem 1.05rem; font-size: .88rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; background: transparent; }
.admin-panel .actions .accept { background: var(--accent); color: var(--accent-ink); }
.admin-panel .actions .recheck { color: var(--warn); border-color: var(--warn); }
.admin-panel .actions .confirm { color: var(--accent); border-color: var(--accent); }
.admin-panel .actions .retract { color: var(--bad); border-color: var(--bad); }
.admin-panel .state { margin: .75rem 0 0; font-size: var(--fs-small); font-weight: 700; }
.admin-panel .state.accepted, .admin-panel .state.confirm { color: var(--accent); }
.admin-panel .state.recheck { color: var(--warn); }
.admin-panel .state.retract { color: var(--bad); }

/* Wrzutnia — drop + lista plików */
.admin-panel .drop { display: block; cursor: pointer; border: 2px dashed var(--hairline); border-radius: 14px; padding: 2rem 1.25rem; text-align: center; background: var(--bg-soft); transition: border-color .15s, background .15s; }
.admin-panel .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.admin-panel .drop p { margin: .3rem 0; color: var(--ink-muted); }
.admin-panel input[type=file] { display: none; }
.admin-panel #status { margin-top: 1rem; font-size: .95rem; min-height: 1.4rem; }
.admin-panel #status.ok { color: var(--accent); }
.admin-panel #status.err { color: var(--bad); }
.admin-panel ul.files { list-style: none; padding: 0; margin: 0; }
.admin-panel ul.files li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--hairline); font-size: .95rem; }
.admin-panel ul.files li:last-child { border-bottom: 0; }
.admin-panel ul.files .meta { color: var(--ink-muted); white-space: nowrap; }

/* Test głosów */
.admin-panel .tag { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .6rem; }
.admin-panel .what { margin: .25rem 0 .75rem; }
.admin-panel .listen { background: var(--bg-soft); border-radius: 10px; padding: .6rem .85rem; margin: .85rem 0 0; }
.admin-panel .listen strong { color: var(--accent); }
.admin-panel .clip { margin: .9rem 0 0; }
.admin-panel .clip-label { margin: 0 0 .15rem; font-weight: 600; font-size: .95rem; }
.admin-panel .clip-label small { font-weight: 400; color: var(--ink-muted); }
.admin-panel audio { width: 100%; }
.admin-panel .sent { font-style: italic; }
.admin-panel .decided { color: var(--accent); font-weight: 600; }

/* Pusty stan */
.admin-panel .empty { color: var(--ink-muted); }

/* Zdrowie hosta (panel Mac) — JEDEN pasek faktów jak na stronie areny (`.venue-facts2`):
   białe tło, ramka + miękki cień, komórki oddzielone „|", na mobile stos. Reużywa `.vf2-*`. */
.mac-facts { margin-top: 0; }
.mac-facts > div { flex: 1; }
.mac-facts .vf2-warn { color: var(--bad); }

@media (max-width: 600px) {
  .admin-panel .controls, .admin-panel .rescan,
  .admin-panel .done-badge, .admin-panel .reject-badge, .admin-panel .stale-badge { float: none; margin-top: .5rem; }
}

/* === Felieton — dział czytelniczy (proza w wąskiej, wyśrodkowanej kolumnie) === */
.felieton { max-width: var(--col-read); margin-inline: auto; }
.felieton-hero { padding: var(--s7) 0 var(--s5); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s6); }
.felieton-hero h1 { font-size: var(--fs-h1); line-height: 1.12; margin: 0 0 var(--s3); }
.felieton-sub { font-size: 1.3rem; line-height: 1.4; font-weight: 500; color: var(--ink-muted); margin: 0 0 var(--s4); }
.felieton-meta { margin: 0; color: var(--ink-muted); }
.felieton-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.felieton-body p { margin: 0 0 var(--s5); }
.felieton-body > p:first-of-type { font-size: 1.18rem; line-height: 1.55; }
.felieton-body h2 { font-size: 1.3rem; margin: var(--s7) 0 var(--s3); }
.felieton-body h3 { font-size: 1.08rem; margin: var(--s6) 0 var(--s2); }
.felieton-body blockquote {
  margin: var(--s5) 0; padding: var(--s2) 0 var(--s2) var(--s5);
  border-left: 3px solid var(--accent); color: var(--ink-muted); font-style: italic;
}

@media (max-width: 600px) {
  .felieton-hero { padding: var(--s5) 0 var(--s4); margin-bottom: var(--s5); }
  .felieton-sub { font-size: 1.15rem; }
  .felieton-body > p:first-of-type { font-size: 1.1rem; }
}

/* === Przegląd (/brief/): sub-nav sekcji, kompaktowy podcast, felieton, materiały testowe === */
/* Treść na pełną szerokość kolumny strony (jak Dziś/Mecze/Prognozy), nie wąski 720 */
.brief-full, .brief-section, .brief-intro, .brief-felieton, .brief-tests { max-width: none; }
.brief-section .brief-full { margin-bottom: 0; }

/* Druga nawigacja: lepki pasek skoków do sekcji, pod głównym nav (czystszy niż admin) */
.brief-subnav {
  position: sticky; top: 56px; z-index: 40;
  background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--hairline);
}
.brief-subnav ul.container {
  display: flex; gap: var(--s2); list-style: none; margin-block: 0;
  padding-block: var(--s2); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
}
.brief-subnav ul.container::-webkit-scrollbar { display: none; }
.brief-subnav li { flex: 0 0 auto; }
.brief-subnav-link {
  display: block; padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-muted);
  text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.brief-subnav-link:hover { background: var(--accent-soft); color: var(--accent); }
.brief-subnav-link[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }

.brief-head { margin: var(--s4) 0 var(--s5); }
.brief-head h1 { margin: 0; }
.brief-back { margin: 0 0 var(--s2); font-size: var(--fs-small); }

/* Podcast: mała kontrolka z prawej (play + czas + szybkość), bez pełnego playera */
.podcast-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin: var(--s5) 0 var(--s6); padding: var(--s2) 0; border-bottom: 1px solid var(--hairline);
}
.podcast-bar-label {
  font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-muted);
}
.podcast-ctrl { display: inline-flex; align-items: center; gap: var(--s3); }
.pp-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
}
.pp-play:hover { background: var(--accent-hover); }
.pp-ico { width: 20px; height: 20px; }
.pp-ico-pause { display: none; }
.podcast-ctrl.is-playing .pp-ico-play { display: none; }
.podcast-ctrl.is-playing .pp-ico-pause { display: inline; }
.pp-time { font-variant-numeric: tabular-nums; font-size: var(--fs-small); color: var(--ink-muted); min-width: 3em; text-align: right; }
.pp-speed {
  border: 1px solid var(--hairline); background: var(--bg); color: var(--ink);
  border-radius: var(--r-pill); padding: var(--s1) var(--s3); font-size: var(--fs-small);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.pp-speed:hover { border-color: var(--accent); color: var(--accent); }
.podcast-pending { margin: 0 0 var(--s6); color: var(--ink-muted); }

/* Sekcje przeglądu: odstęp + margines na lepkie paski przy skoku z anchora (scrollspy) */
.brief-intro { margin: 0 0 var(--s6); }
.brief-intro > p:first-child { font-size: 1.12rem; line-height: 1.55; }
.brief-section { scroll-margin-top: 112px; margin: 0 0 var(--s7); }

/* Felieton wpięty w przegląd: proza dziedziczy .felieton-body z działu Felieton */
.brief-felieton { margin: var(--s8) 0 0; }
.brief-felieton-title { font-size: var(--fs-h2); line-height: 1.15; margin: 0 0 var(--s2); }
.brief-felieton-sub { font-size: 1.15rem; line-height: 1.4; font-weight: 500; color: var(--ink-muted); margin: 0 0 var(--s4); }

.brief-tests { margin-top: var(--s8); border-top: 1px solid var(--hairline); padding-top: var(--s4); }
.brief-tests > summary { cursor: pointer; font-weight: 600; color: var(--ink-muted); font-size: var(--fs-small); }
.brief-tests-h { font-size: 1rem; color: var(--ink-muted); margin: var(--s5) 0 var(--s2); }
.brief-tests audio { width: 100%; }

/* Herby klubów / logo ligi (Ekstraklasa). Eksport z biblioteka.db -> dist/static/logos/<slug>.<ext>,
   render makrem partials/_emblem.html.j2. W ODRÓŻNIENIU od flag herb zachowuje proporcje
   (object-fit:contain, nie cover - kadrowanie ucięłoby godło) i nie ma ramki/cienia. Trzy rozmiary:
   sm (lista/wiersz, inline jak flaga), domyślny (nagłówek sekcji), lg (hero strony klubu/meczu). */
.club-logo {
  display: inline-block;
  height: 1.6em;
  width: auto;
  vertical-align: -0.28em;
  object-fit: contain;
}
.club-logo-sm {
  display: inline-block;
  height: 1.15em;
  width: 1.6em;
  vertical-align: -0.18em;
  object-fit: contain;
}
.club-logo-lg {
  display: block;
  height: 96px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}