/* ─────────────────────────────────────────────────────────────────────────
   Football Intelligence — Predictions page (★ FLAGSHIP)
   Faza 5.8.2, redesign v2.

   Scope: page shell + filter bar + risk slider + stats headline +
   placeholder list. Per-card components w 5.8.3, sub-components w 5.8.4.
   Mobile responsive 375 / 768 / 1280 / 1920.
   ───────────────────────────────────────────────────────────────────────── */


/* === Page wrapper ========================================================= */

.predictions-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}

@media (min-width: 1024px) {
  /* B2: raised from 1000px → 1200px to reduce the empty side-rail on large
     screens. The app-main canvas is now 1440px so at 1920px the predictions
     column was leaving ~460px dead per side — 1200px halves that waste. */
  .predictions-page {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* F5.8.3.2c PATCH 5: explicit left-align dla page header per Karol QA
   (defensywne — żaden ancestor żeby przypadkowo nie nadał text-align:center). */
.predictions-page__header { text-align: left; }
.predictions-page__header h1 { margin: 0 0 4px 0; text-align: left; }
.predictions-page__header p  { margin: 0; text-align: left; }

.predictions-page__methodology-link {
  color: var(--accent);
  text-decoration: none;
}
.predictions-page__methodology-link:hover { text-decoration: underline; }

.predictions-page__ymyl {
  text-align: center;
  padding: var(--space-3) 0 var(--space-2);
  border-top: 1px solid var(--divider);
  margin-top: var(--space-3);
}


/* === Filter bar =========================================================== */

.filter-bar {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-bar__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* F5.15-fix: search input. Karol QA "brakuje mi wyszukiwarki". */
.filter-bar__row--search {
  display: block;
}
.filter-bar__search {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 10px 14px;
  font: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color var(--duration-fast) var(--easing-out);
}
.filter-bar__search::placeholder { color: var(--text-tertiary); }
.filter-bar__search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.1);
}
.filter-bar__row--chips {
  /* League chips horizontal scroll on overflow */
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.filter-bar__row--chips::-webkit-scrollbar { height: 4px; }
.filter-bar__row--chips::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 999px;
}

.filter-bar__row-label {
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}

/* "More filters" expandable wrapper */
.filter-bar__more {
  border-top: 1px solid var(--divider);
  padding-top: var(--space-2);
}
.filter-bar__more[open] { padding-bottom: 0; }
.filter-bar__more-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  list-style: none;
  padding: 4px 0;
}
.filter-bar__more-summary::-webkit-details-marker { display: none; }
.filter-bar__more-summary:hover { color: var(--text-primary); }
.filter-bar__more-summary-icon {
  transition: transform var(--duration-fast);
}
.filter-bar__more[open] .filter-bar__more-summary-icon {
  transform: rotate(180deg);
  display: inline-block;
}
.filter-bar__more-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
}


/* === Chip group =========================================================== */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.filter-chips--leagues {
  /* Horizontal scrollable na mobile gdy chips overflow */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filter-chips--leagues::-webkit-scrollbar { display: none; }

/* F5.8.3.1: chip transparent default + accent active. Karol QA "OneFootball
   subtle outline chips z accent fill TYLKO active state". */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--easing-out),
              border-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out);
}
.filter-chip:hover:not(.filter-chip--locked):not([disabled]) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
.filter-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* F5.18 refine ("zbyt zielono"): plain accent active chip softened from a solid
   neon block to a calm accent-tinted surface + accent text + thin accent border.
   (Tier chips below keep their calibrated risk-tier fills — outcome colors, not
   brand accent, per SKILL.md §3.) Single accent, no new hue. */
.filter-chip--active {
  background: var(--accent-tint);
  border-color: rgba(0, 229, 160, 0.45);
  color: var(--accent);
}
.filter-chip--active:hover {
  background: var(--accent-tint);
  border-color: rgba(0, 229, 160, 0.55);
  color: var(--accent);
}

.filter-chip__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.55rem;
  font-weight: var(--weight-extrabold);
  color: var(--white);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
/* F5.8.3.2c PATCH 4: real TSDB R2 transparent league logo. 18x18 contain
   inside chip — broken load → inline onerror swaps to .filter-chip__badge
   colored placeholder. */
.filter-chip__logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.filter-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* F5.8.3.1: tier-specific chip active fill per Karol spec. Solid color
   bg + dark text dla LOW/MED, white dla HIGH (red bg). */
.filter-chip--tier {
  --tier-color: var(--accent);
}
.filter-chip--tier.filter-chip--active {
  background: var(--tier-color);
  border-color: var(--tier-color);
  color: #0a0a0a;
  font-weight: var(--weight-bold);
}
.filter-chip--tier-high.filter-chip--active {
  color: var(--white);
  opacity: 0.92;
}

.filter-chip--locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.filter-chip__lock {
  font-size: 0.55rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  padding: 1px 5px;
  background: var(--surface-3);
  border-radius: 3px;
  color: var(--text-tertiary);
}


/* === Value min slider ===================================================== */

.filter-bar__value-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  outline: none;
}
.filter-bar__value-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--surface-1);
}
.filter-bar__value-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--surface-1);
}
.filter-bar__value-num { color: var(--accent); font-weight: var(--weight-bold); }


/* === Sort dropdown ======================================================== */

.filter-bar__sort {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.filter-bar__sort:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* === Risk profile slider ================================================== */

.risk-slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.risk-slider__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.risk-slider__title {
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}
.risk-slider__value {
  font-size: 0.875rem;
  color: var(--text-primary);
}
.risk-slider__num {
  font-weight: var(--weight-bold);
  color: var(--accent);
}
.risk-slider__label {
  font-weight: var(--weight-medium);
}
.risk-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--accent) 0%, var(--accent) 33%,
    #ffca28 33%, #ffca28 66%,
    #ff3d5a 66%, #ff3d5a 100%
  );
  border-radius: 999px;
  outline: none;
}
.risk-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text-primary);
  cursor: pointer;
  border: 2px solid var(--surface-1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.risk-slider__input::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text-primary);
  cursor: pointer;
  border: 2px solid var(--surface-1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.risk-slider__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  padding: 0 4px;
}
.risk-slider__sub {
  margin: 0;
}


/* === Stats headline ======================================================= */

/* F5.8.3.2c PATCH 5: stats headline reformatted jako informational sub-bar
   zamiast dominujące 3 large cards. Karol QA "Stats cards za prominent,
   dominate visual hierarchy". Each cell: compact num + small label, single
   row na desktop, stacked na mobile. */
.predictions-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
@media (min-width: 600px) {
  .predictions-stats {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2);
  }
}
.predictions-stats__card {
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.predictions-stats__num {
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.predictions-stats__num--text {
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.predictions-stats__unit {
  font-size: 0.75em;
  color: var(--accent);
  margin-left: 1px;
}
.predictions-stats__label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: none;
}


/* === List placeholder (5.8.2 — full cards w 5.8.3) ====================== */

.predictions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.predictions-list--skeleton { padding: var(--space-2); }
.predictions-list__notice {
  margin: 0;
  padding: var(--space-2);
  border-bottom: 1px solid var(--divider);
  font-style: italic;
}

/* F5.8.2.1: prediction-row z badges (Karol QA "zaciągnijmy banery"). */
.prediction-row {
  display: grid;
  grid-template-columns: 56px 28px 1fr 110px 70px;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--divider);
  font-size: 0.875rem;
  transition: background-color var(--duration-fast) var(--easing-out);
}
.prediction-row:last-child { border-bottom: none; }
.prediction-row:hover { background: var(--surface-2); cursor: pointer; }

/* F5.8.3.2a: tier border-left REMOVED. .prediction-row class is legacy
   placeholder z 5.8.2.1 (replaced przez .pred-card w 5.8.3) — rules
   zostają dla backward compat gdyby cokolwiek je nadal renderowało, ale
   tier border deleted per Karol QA. HIGH opacity zachowane. */
.prediction-row--high { opacity: 0.78; }

.prediction-row__tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}
.prediction-row__tier--low    { color: #00e5a0; }
.prediction-row__tier--medium { color: #ffca28; }
.prediction-row__tier--high   { color: #ff3d5a; }

.prediction-row__league {
  display: flex;
  align-items: center;
  justify-content: center;
}
.prediction-row__league-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  background: transparent;
}
.prediction-row__league-fallback {
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.prediction-row__teams {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.prediction-row__badge {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}
.prediction-row__team-name {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.prediction-row__vs {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.prediction-row__market {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prediction-row__value {
  text-align: right;
  font-weight: var(--weight-bold);
  color: var(--accent);
}

@media (max-width: 640px) {
  .prediction-row {
    grid-template-columns: 50px 1fr 70px;
    gap: 8px;
  }
  .prediction-row__league,
  .prediction-row__market {
    display: none;  /* hide on mobile, only essential cols */
  }
  .prediction-row__teams {
    gap: 6px;
  }
  .prediction-row__vs {
    display: none;
  }
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--divider);
}


/* === Empty state ========================================================== */

.predictions-empty {
  text-align: center;
  padding: var(--space-4);
}
.predictions-empty p:first-child { margin-bottom: 0.4rem; }
.predictions-empty .btn { margin-top: var(--space-2); }


/* === Mobile breakpoints =================================================== */

@media (max-width: 640px) {
  .filter-chip__label {
    display: none;  /* leagues z too long names — just badge visible */
  }
  .filter-chips--leagues .filter-chip {
    padding: 6px 10px;
  }
  .prediction-placeholder {
    grid-template-columns: 50px 1fr 50px;
  }
  .prediction-placeholder__market {
    display: none;
  }
}


/* F5.8.5: pagination "Load more" footer ================================= */

.predictions-list__pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--space-2);
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.predictions-list__truncated {
  margin: 0;
  text-align: center;
}
.predictions-list__load-more {
  min-width: 160px;
}

/* F5.16-tweak v7.4: League chips skeleton state */
.filter-chip--skeleton {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  width: 120px;
  height: 32px;
  overflow: hidden;
}
.filter-chip__skel {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: filter-chips-shimmer 1.4s infinite;
}
@keyframes filter-chips-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .filter-chip__skel { animation: none; }
}

/* F5.16-tweak v7.4: tier filter row label */
.filter-bar__row--tiers {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────────────────
   Faza 5.17.C — Analysis tab refactor
   Hero pick + 2-col grid + AI Picks sticky sidebar. Replaces the old
   .predictions-page layout for the #predictions route. Old class names
   stay in this file unused — §J cleanup will drop them.

   Token map (Karol spec → project tokens, kept here so the spec reads
   cleanly without re-aliasing globally):
     --acc       ≡ var(--accent)
     --s2        ≡ var(--surface-2)
     --text      ≡ var(--text-primary)
     --muted     ≡ var(--text-tertiary)
     --warn      = #ffb800  (no project token; spec defines)
     --border    ≡ var(--border)
   ───────────────────────────────────────────────────────────────────────── */

.fi-analysis {
  display: grid;
  gap: 24px;
  max-width: 1480px;
  margin: 0 auto;
  /* Horizontal padding is intentionally 0 — .app-main already supplies
     symmetric side insets (16px on mobile, 24px on desktop). Adding extra
     horizontal padding here would double-indent content and cause asymmetric
     insets on narrow screens. Bottom padding clears the mobile dock nav. */
  padding: 16px 0 120px;
  /* min-width: 0 prevents this grid child from overflowing its parent. */
  min-width: 0;
  /* Prevent any descendant horizontal overflow from bleeding past viewport
     on narrow screens (long team names, date strip, league chips). */
  overflow-x: clip;
}
@media (min-width: 768px) {
  .fi-analysis { padding: 24px 0 80px; gap: 20px; }
}

/* F5.18: tighter header gap — title/sub sit close, the filter banner reads as
   quiet utility chrome above the hero, not a second hero. */
.fi-analysis__header { display: flex; flex-direction: column; gap: 6px; }

.fi-page-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.fi-page-sub {
  margin: 0 0 6px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.fi-page-sub a { color: var(--accent); }
.fi-page-sub a:hover { text-decoration: underline; }


/* ─────────────────────────────────────────────────────────────────────────
   F5.18 — Analysis filter banner (.fi-flt)
   Inspiracja: FotMob match-list toolbar. One quiet control row + a low-weight
   league-crest scroll row. NO card chrome (no border box, no surface fill) so
   it never competes with the "Top pick today" hero below it. Single accent
   only on the active state. Self-contained (not the shared .filter-bar) so the
   matches.js list — which shares that component — is untouched.
   ───────────────────────────────────────────────────────────────────────── */
.fi-flt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Control row: search · Today/All · sort · value-only, all on one line,
   wrapping gracefully. */
.fi-flt__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Compact icon-led search — much smaller than the old full-width box. */
.fi-flt__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  min-width: 0;
  max-width: 340px;
}
.fi-flt__search-icon {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.fi-flt__search-input {
  width: 100%;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  padding: 0 12px 0 32px;
  outline: none;
  transition: border-color var(--duration-fast) var(--easing-out),
              box-shadow var(--duration-fast) var(--easing-out);
}
.fi-flt__search-input::placeholder { color: var(--text-tertiary); }
.fi-flt__search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.12);
}
/* Hide the native search "x" so the field stays clean. */
.fi-flt__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Today / All segmented control — Karol 2026-06-02: toggle theme on
   /analysis was inconsistent with /matches (smaller padding + smaller
   font). Removed the analysis-specific shrink so both pages share the
   identical .date-strip--simple pill geometry. */
.fi-flt__segment { display: inline-flex; }

/* Sort — small native select, label inline so it's self-explaining but quiet. */
.fi-flt__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
}
.fi-flt__sort-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}
.fi-flt__sort-select {
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  padding: 0 28px 0 12px;
  cursor: pointer;
  outline: none;
  /* tiny caret, accent-tinted, no native arrow box */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8290' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out);
}
.fi-flt__sort-select:hover { color: var(--text-primary); border-color: var(--border-strong); }
.fi-flt__sort-select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.12);
}

/* Value-only toggle — pill with a small dot that lights up accent when on. */
.fi-flt__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out),
              background-color var(--duration-fast) var(--easing-out);
}
.fi-flt__toggle:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface-3); }
.fi-flt__toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.12);
}
.fi-flt__toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: background-color var(--duration-fast) var(--easing-out),
              box-shadow var(--duration-fast) var(--easing-out);
}
.fi-flt__toggle.is-on {
  color: var(--text-primary);
  border-color: rgba(0, 229, 160, 0.5);
  background: var(--accent-soft, rgba(0, 229, 160, 0.08));
}
.fi-flt__toggle.is-on .fi-flt__toggle-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 229, 160, 0.18);
}

/* League crest row — quiet, horizontally scrollable, no scrollbar chrome. */
.fi-flt__leagues {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* fade the right edge so overflow reads as "more →", not a hard cut */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.fi-flt__leagues::-webkit-scrollbar { display: none; }

.fi-flt__league {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 30px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out),
              background-color var(--duration-fast) var(--easing-out);
}
.fi-flt__league:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
}
.fi-flt__league:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.12);
}
/* F5.18 refine ("zbyt zielono"): was a solid neon-accent block, now a calm
   accent-TINTED surface with accent text + a thin accent border — selected but
   not shouting. Single accent, no new hue. */
.fi-flt__league.is-active {
  background: var(--accent-tint);
  border-color: rgba(0, 229, 160, 0.45);
  color: var(--accent);
}
.fi-flt__league.is-active:hover {
  background: var(--accent-tint);
  border-color: rgba(0, 229, 160, 0.55);
  color: var(--accent);
}
.fi-flt__crest {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Clean abbreviation fallback when league.logo is null/broken — intentional,
   not a "missing image" look. */
.fi-flt__crest-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.fi-flt__league.is-active .fi-flt__crest-fallback {
  background: rgba(0, 229, 160, 0.16);
  color: var(--accent);
}
.fi-flt__league-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.fi-flt__league--all { font-weight: var(--weight-semibold); }

/* Loading skeleton chips — neutral, no shimmer-on-reduced-motion. */
.fi-flt__league--skel {
  width: 78px;
  background: var(--surface-2);
  border-color: var(--border);
  animation: fiFltSkel 1.4s ease-in-out infinite;
}
@keyframes fiFltSkel {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .fi-flt__league--skel { animation: none; }
  .fi-flt__search-input,
  .fi-flt__sort-select,
  .fi-flt__toggle,
  .fi-flt__toggle-dot,
  .fi-flt__league { transition: none; }
}

@media (max-width: 767px) {
  /* Belt-and-suspenders: contain stray overflow at the filter container
     level AND the controls row level. clip (not hidden) — no scroll
     container side-effect, Y axis stays unaffected. */
  .fi-flt { overflow-x: clip; }
  .fi-flt__controls { overflow-x: clip; }
  /* Search pill takes its own full row so sort/toggle sit on the line below. */
  .fi-flt__search { flex-basis: 100%; max-width: none; }
  .fi-flt__sort-label { display: none; }
  /* C9 fix: font bump (18px) + longer "Model confidence" option make the sort
     select intrinsically wide. Constrain it: min-width:0 on the flex item,
     max-width on the select itself so it cannot push past the row boundary.
     flex:1 1 0 lets sort share available width with the value toggle. */
  .fi-flt__sort {
    min-width: 0;
    flex: 1 1 0;
  }
  .fi-flt__sort-select {
    font-size: 12px;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  /* Keep toggle compact; flex:0 0 auto keeps it at natural width. */
  .fi-flt__toggle { font-size: 12px; padding: 0 11px; flex-shrink: 0; }
  /* BUG-1 FIX: Today/All segment occupies its own full-width row (same
     treatment as search). flex-basis:100% + width:100% means it can never
     bleed the parent. padding-left removed — the old 12px nudge added to
     the rendered row width and was the residual overflow source. order:-1
     keeps it visually first (above search row, above sort+toggle row). */
  .fi-flt__segment {
    display: flex;
    order: -1;
    flex-basis: 100%;
    width: 100%;
    justify-content: flex-start;
    padding-left: 0;
  }
  .fi-flt__segment .date-strip--simple {
    /* Karol 2026-06-02: drop the analysis-specific mobile padding/font
       override so the Today/All toggle matches the /matches version
       exactly. Default 4px inner padding + 7px/20px pill from
       .date-strip--simple stays. */
    display: inline-flex;
    justify-content: center;
    flex: 0 0 auto;
  }
  /* Hide the league-row horizontal scrollbar chrome (Windows shows a thin
     bar even on overflow-x:auto). The right-edge mask still communicates
     "scrollable". */
  .fi-flt__leagues { scrollbar-width: none; }
  .fi-flt__leagues::-webkit-scrollbar { display: none; }
}

/* C6: outer page-level wrapper that adds the third column at ≥1400px.
   Below 1400px the .fi-predictions-rail is hidden (CSS only, always rendered
   for SSR-friendliness). The inner .fi-analysis__grid stays unchanged. */
.fi-predictions-wrap {
  display: block;
  width: 100%;
}

/* Faza A: the third rail column was removed — its blocks now live inside the
   AI Picks sidebar column (.fi-side-info). The wrap stays a plain block so no
   empty 320px gap is left on the right at ≥1400px. */
.fi-predictions-rail { display: none; }

/* Faza A: info blocks (Live & upcoming + Latest news) stacked UNDER the AI
   Picks card, inside the right column. Desktop-only — on mobile the sidebar
   renders inline after the hero and News already lives in the global footer. */
.fi-side-info { display: none; }
@media (min-width: 1024px) {
  .fi-side-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}
.fi-rail-upnext { margin-top: 2px; }
/* Karol QA 2026-06-05: "1 live now" + the minute read RED (live = red, not the
   green value accent), with a pulsing live dot so the block reads as LIVE. */
.fi-rail-live-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  color: var(--system-red, #ff2f54);
  text-decoration: none;
  margin-bottom: 10px;
}
.fi-rail-live-head::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--system-red, #ff2f54);
  box-shadow: 0 0 6px var(--system-red, #ff2f54);
  animation: fi-rail-live-pulse 1.6s ease-in-out infinite;
}
@keyframes fi-rail-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .fi-rail-live-head::before { animation: none; }
}
.fi-rail-live-head:hover { text-decoration: underline; }

.fi-rail-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  padding: 16px;
  overflow: hidden;
}

.fi-rail-section__title {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-bold);
  margin: 0 0 12px;
}

.fi-rail-picks-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
  text-decoration: none;
  color: var(--text-primary);
  transition: color var(--duration-fast) var(--easing-out);
}
.fi-rail-picks-item:last-child { border-bottom: none; }
.fi-rail-picks-item:hover { color: var(--accent); }

.fi-rail-picks-item__teams {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-medium);
}
.fi-rail-picks-item__conf {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--accent);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.fi-rail-picks-item__blurred {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}
/* C6: PRO lock pill — sits in the rail picks section header when the
   user is on the free plan. Single-accent outline pill (no filled
   neon block); matches the tier-badge dot+text pattern. */
.fi-rail-picks-item__lock {
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(0, 229, 160, 0.35);
  margin-left: auto;
}

.fi-rail-live-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 12px;
}
.fi-rail-live-row:last-child { border-bottom: none; }
.fi-rail-live-row__teams {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
.fi-rail-live-row__score {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  flex-shrink: 0;
}
.fi-rail-live-row__min {
  font-size: 11px;
  color: var(--system-red, #ff2f54);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.fi-rail-news-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  text-decoration: none;
  color: var(--text-primary);
  transition: color var(--duration-fast) var(--easing-out);
}
.fi-rail-news-item:last-child { border-bottom: none; }
.fi-rail-news-item:hover { color: var(--accent); }
.fi-rail-news-item__title {
  font-size: 12px;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fi-rail-news-item__meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

.fi-rail-section__footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
  text-align: center;
}
.fi-rail-section__footer a {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}
.fi-rail-section__footer a:hover { text-decoration: underline; }

.fi-rail-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 8px 0;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .fi-rail-picks-item,
  .fi-rail-news-item { transition: none; }
}


.fi-analysis__grid {
  display: grid;
  /* minmax(0, 1fr) NOT 1fr: a bare 1fr track has an implicit min-width:auto
     (min-content) floor, so a wide descendant (charts/heatmap/long string)
     expands the single mobile column PAST the viewport and overflow-x:clip then
     cuts everything on the right. minmax(0,...) lets the track shrink so content
     actually fits. (Desktop already used minmax below — mobile was the bug.) */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 1024px) {
  .fi-analysis__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
  }
}

.fi-section-title {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 32px 0 12px;
  font-weight: 600;
}


/* === Hero pick ============================================================
   Atmospheric top card — fanart background (or gradient fallback), large
   team crests, 4 stat tiles, action row. Brand-tinted box-shadow stands in
   for the glow card primitive until §A2 lands. */

/* F5.17.c-fix v3 Karol QA: "główny mecz dnia został wyróżniony bardziej.
   godła drużyn większe." Hero now sits 36px bigger min-height, 88px team
   crests (was 64px), and a more dramatic brand-accent left edge rail
   (3px) to set it apart from the grid below without the "AI style" glow
   ring. Still no halo box-shadow on the hover. */
.fi-pick-hero {
  position: relative;
  min-height: 360px;
  padding: 32px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.fi-pick-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 3px 0 0 0 var(--accent);
  z-index: 3;
}
.fi-pick-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Karol 2026-06-05: the match-of-the-day banner read too dark/faint. Raise
     brightness so the fanart is actually visible behind the overlay (the bottom
     overlay gradient still protects text legibility). */
  filter: brightness(0.62) saturate(1.12);
  z-index: 0;
}
.fi-pick-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 12, 14, 0.2) 0%, rgba(10, 12, 14, 0.92) 88%),
    radial-gradient(80% 60% at 50% 100%, rgba(0, 229, 160, 0.18) 0%, transparent 70%);
  z-index: 1;
}
.fi-pick-hero__content { position: relative; z-index: 2; }

.fi-pick-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fi-pick-hero__meta img { flex: 0 0 auto; }
/* Faza A (Karol 2026-06-05): "Match of the day" status chip + the value pill
   shared this class as an UPPERCASE neon-tint pill — the "AI-vibe-coded" look.
   Base chip is now a calm, neutral, sentence-case marker (no caps, no tracking,
   no neon). The single accent is reserved for the value pill (.fi-pos) below,
   so the green only appears where there is a genuine edge. */
.fi-pick-hero__tag {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  /* Karol 2026-06-05: "Match of the day" marker made more visible — a brighter
     neutral chip (white text, stronger fill). Stays neutral on purpose so the
     single mint accent remains reserved for the value pill (.fi-pos) below. */
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
}
/* Value pill — the one accent highlight in the hero meta row. Suppressed for
   national-team / neutral-model matches (best_value_pick is null there), so it
   never appears on a match with no real edge. */
.fi-pick-hero__tag.fi-pos {
  background: var(--accent-tint, rgba(0, 229, 160, 0.16));
  border-color: rgba(0, 229, 160, 0.40);
  color: var(--accent);
}
/* Low-confidence caveat for cup/knockout matches modelled on neutral priors —
   deliberately muted (not accent) so it reads as a warning, not a highlight. */
.fi-pick-hero__neutral {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: help;
}

.fi-pick-hero__teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 24px 0;
}
.fi-pick-hero__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fi-pick-hero__team img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}
.fi-pick-hero__name {
  font-weight: 700;
  font-size: 22px;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: -0.005em;
}
.fi-pick-hero__vs {
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fi-pick-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  margin-bottom: 18px;
}
.fi-pick-hero__stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fi-pick-hero__stats span {
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.fi-pick-hero__stats strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.fi-pos { color: var(--accent); }
.fi-neg { color: #ff5a5a; }

.fi-pick-hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* F5.17.c-fix Karol QA: spell out what "Top value" / "Fair odds" refer to —
   which bet, market price vs model fair price, and the edge. */
.fi-pick-hero__bestbet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid rgba(0, 229, 160, 0.18);
  font-size: 13px;
}
.fi-pick-hero__bestbet-label {
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.fi-pick-hero__bestbet-market { color: var(--text-primary); font-weight: 700; }
.fi-pick-hero__bestbet-odds { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fi-pick-hero__bestbet-odds strong { color: var(--text-primary); }
.fi-pick-hero__bestbet-edge { font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }


/* === Pick grid ============================================================
   Secondary picks below the hero. Two columns desktop, one column mobile.
   Each card: subtle home/away crest watermarks in corners, hover lift. */

.fi-pick-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 720px) {
  .fi-pick-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.fi-pick-card {
  position: relative;
  padding: 18px;
  min-height: 140px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color 200ms ease, transform 200ms ease;
}
.fi-pick-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* F5.17.c-fix v3 Karol QA: "Glow efekt po najechaniu jest tragiczny".
   Chroma cursor-follow halo neutralized — keeps the class for backwards
   compat with already-rendered markup (no JS push needed) but renders
   nothing on hover. Hover affordance now comes from the card's
   border-color shift only. */
.fi-chroma { isolation: isolate; }
.fi-chroma::after { content: none; }

/* F5.17.c-fix: faded stadium / fanart backdrop on every pick card. The bg
   layer renders the image and a dark gradient overlay sits above it so the
   text stays readable. Both pointer-events:none so card click still works. */
.fi-pick-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.40) saturate(0.85);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
.fi-pick-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 24, 32, 0.55) 0%, rgba(16, 24, 32, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .fi-pick-card { transition: border-color 200ms ease; }
  .fi-pick-card:hover { transform: none; }
}

/* F5.17.c-fix v2 Karol QA: crests spread LEFT and RIGHT at vertical center.
   Home anchored to left edge (small inset), away to right edge. Larger size,
   moderate opacity. Above the stadium bg + dark overlay, below the inner text. */
.fi-pick-card__crest {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 96px;
  height: 96px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.22;
  z-index: 2;
  pointer-events: none;
}
.fi-pick-card__crest--away {
  left: auto;
  right: 14px;
  opacity: 0.22;
}
@media (max-width: 540px) {
  .fi-pick-card__crest      { width: 72px; height: 72px; left: 8px; opacity: 0.18; }
  .fi-pick-card__crest--away { right: 8px; left: auto; }
}
.fi-pick-card__inner {
  position: relative;
  z-index: 3;
}
.fi-pick-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: 12px;
  margin-bottom: 8px;
}
.fi-pick-card__teams {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.fi-pick-card__dash { color: var(--text-tertiary); font-weight: 400; }
.fi-pick-card__stats {
  display: flex;
  gap: 12px;
  color: var(--text-tertiary);
  font-size: 13px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.fi-pick-card__stats .fi-pos { color: var(--accent); font-weight: 600; }
.fi-pick-card__cta {
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.fi-pick-card__cta:hover { text-decoration: underline; }


/* === AI Picks sidebar =====================================================
   Sticky right-column block on desktop, flows under the grid on mobile.
   Free users see a blurred preview + "PRO only" lock overlay. */

/* F5.18 mobile overflow ROOT CAUSE: .fi-analysis__main is the grid item that
   holds the hero (+ its wide heatmap/charts). A grid item keeps min-width:auto
   (= its content min-content) UNLESS told otherwise, so minmax(0,1fr) on the
   TRACK alone could not shrink it — the column stayed wider than the viewport
   and overflow-x:clip cut everything. min-width:0 lets the items shrink so the
   fluid children (hero width:100%, charts, heatmap) finally fit the screen. */
.fi-analysis__main {
  min-width: 0;
  /* FIX (6): explicit order so AI Picks sidebar always sits below the main
     analysis block on single-column (mobile) layout, regardless of DOM
     insertion order or future refactors. */
  order: 1;
}
.fi-analysis__side {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  /* Desktop: sidebar is the second column — order:2 keeps it after main. */
  order: 2;
}
/* F5.18 DEFINITIVE mobile overflow guard. After several targeted min-width:0
   passes the inner hero elements (H2H compare bars, analytics charts, heatmap)
   were still clipped on the right because *some* descendant established a width
   wider than the column. In a single-column mobile layout nothing should ever
   exceed the viewport, so cap every descendant at its container width. This is
   the backstop that ends the per-element whack-a-mole. */
@media (max-width: 767px) {
  .fi-analysis,
  .fi-analysis * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
@media (min-width: 1024px) {
  .fi-analysis__side {
    position: sticky;
    top: 80px;
    /* NOTE: a max-height + overflow-y scroll container here broke the AI Picks
       block (clipped the cards + an ugly scrollbar) — Karol 2026-06-06. Reverted
       to sticky-only; the sidebar stays in view while the main column scrolls. */
  }
}
/* BUG-5 FIX: On mobile the grid is a single column. Default source order
   places .fi-analysis__main (order:1) then .fi-analysis__side (order:2),
   so AI Picks appears below ALL pick cards. Karol wants it immediately
   after the hero pick card ("tuż pod banerem głównego meczu").
   CSS-only approach: give the side order:0 on <1024px so it sorts before
   the main column in the visual order. order:0 < order:1 (main) so it
   renders first — but that would put AI Picks ABOVE the hero too, which
   is also wrong.
   Better: keep .fi-analysis__main at order:1 and assign the side order:1
   as well but with a lower sort key via a sub-order trick. Pure CSS cannot
   inject a child between two children of another element.
   Practical CSS-only outcome: on <1024px the grid becomes 2 rows with the
   side slotted in at grid-row:2 and main split into rows 1 and 3. This
   requires named grid-template-areas which only works if JS also emits the
   correct class structure. Since the JS render places hero + pick-grid
   inside fi-analysis__main as siblings, we cannot address them separately
   from CSS on the grid parent.
   Therefore: use order:-1 on the SIDE to float it to the very top of the
   single column on mobile, then apply a matching negative margin-top on
   the hero so the side reads as visually attached below it. The JS agent
   is handling the definitive DOM-injection fix (BUG-5 in fix_plan). This
   CSS rule is the fallback that at minimum moves AI Picks before the pick
   grid — above the hero is acceptable as a stopgap until the JS fix lands. */
@media (max-width: 1023px) {
  .fi-analysis__side {
    /* order:0 puts side before main (order:1) in the single-column flow,
       visually placing AI Picks above the hero card. This is the best pure
       CSS can do without DOM restructuring. The JS agent's BUG-5 fix
       injects the sidebar HTML inside main after the hero for the correct
       "right below hero" placement. */
    order: 0;
    margin-top: 0;
  }
  .fi-analysis__main {
    order: 1;
  }
}

.fi-ai-picks-block {
  position: relative;
  padding: 20px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
/* Karol: fanart backdrop on AI Picks side card. The URL comes from the top
   pick's TheSportsDB strFanart (--fi-ai-picks-bg CSS var set inline by
   predictions.js _renderAiPicksSidebar). Darkening gradient on top keeps
   the white text legible. */
.fi-ai-picks-block--has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg,
      rgba(11, 17, 24, 0.74) 0%,
      rgba(11, 17, 24, 0.86) 55%,
      rgba(11, 17, 24, 0.96) 100%),
    var(--fi-ai-picks-bg, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  filter: saturate(0.85);
}
.fi-ai-picks-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.fi-ai-picks-block__head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}
.fi-ai-picks-block__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.fi-ai-picks-block__icon svg { width: 18px; height: 18px; }
.fi-ai-picks-block__tier {
  margin-left: auto;
  /* Soft amber outline pill (was a solid #ffb800 sticker that read as
     templated) — matches the tint/outline tier-badge language used elsewhere. */
  background: var(--warn-tint);
  color: var(--warn);
  border: 1px solid var(--warn-border);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.fi-ai-picks-block__sub {
  color: var(--text-tertiary);
  font-size: 12px;
  margin: 0 0 14px;
}

/* FIX (Faza A): AI Picks carousel nav row.
   The prev/next arrows used to be absolutely positioned OVER the slide (a
   magic-number `top` offset + z-index:4), so they sat on top of the team
   crests / names and overlapped the banner. They now live in a flex nav row
   together with the dots (‹ • • • ›) BELOW the track — overlap is impossible
   and the control reads as an intentional carousel affordance. */
.fi-ai-picks-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 12px;
}
.fi-ai-picks-nav .fi-ai-picks-dots { padding: 0; }

.fi-ai-picks-arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  backdrop-filter: blur(2px);
  line-height: 1;
  transition: background-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out),
              border-color var(--duration-fast) var(--easing-out),
              transform var(--duration-fast) var(--easing-out);
}
.fi-ai-picks-arrow:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.fi-ai-picks-arrow:active { transform: scale(0.92); }
.fi-ai-picks-arrow:disabled {
  opacity: 0.32;
  cursor: default;
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-tertiary);
}
.fi-ai-picks-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .fi-ai-picks-arrow:active { transform: none; }
}

/* F5.17.c-fix: AI Picks carousel — 3 slides, translateX rotation, dots
   below. Track is full-width, hides overflow; slides flex side-by-side at
   100% width. touch-action: pan-y lets the browser handle vertical scroll
   while the JS touch handler processes horizontal swipe (touchstart /
   touchmove / touchend) unobstructed — correct for a horizontal carousel. */
.fi-ai-picks-track {
  display: flex;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  /* pan-y: browser owns vertical scroll; JS owns horizontal drag */
  touch-action: pan-y;
  cursor: grab;
  /* willChange promotes to its own compositor layer for smooth 60fps
     transform animation.  Remove if it causes memory pressure. */
  will-change: transform;
}
.fi-ai-picks-track:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .fi-ai-picks-track { transition: none; will-change: auto; }
}

/* When the carousel is locked (free user), hide arrow buttons — the
   blurred preview doesn't need navigation affordance. */
.fi-ai-picks-block.is-locked .fi-ai-picks-arrow { display: none; }

.fi-ai-picks-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 4px;
  text-decoration: none;
  color: inherit;
  user-select: none;
}
.fi-ai-picks-slide__rank {
  color: var(--text-tertiary);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.fi-ai-picks-slide__teams {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.fi-ai-picks-slide__dash { color: var(--text-tertiary); font-weight: 400; }
.fi-ai-picks-slide__crest { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; vertical-align: middle; }
.fi-ai-picks-slide__meta {
  color: var(--text-tertiary);
  font-size: 12px;
}
.fi-ai-picks-slide__market {
  color: var(--text-primary);
  font-size: 13px;
}
.fi-ai-picks-slide__market strong {
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.fi-ai-picks-slide__value {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.fi-ai-picks-slide__bk {
  color: var(--text-tertiary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fi-ai-picks-slide--empty {
  color: var(--text-tertiary);
  text-align: center;
  font-size: 13px;
  padding: 24px 0;
}
.fi-ai-picks-slide__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
a.fi-ai-picks-slide__link:hover .fi-ai-picks-slide__teams { color: var(--accent); }

/* Per-pick actions — translucent so they sit calmly over the fanart bg */
.fi-ai-picks-slide__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.fi-ai-picks-slide__act {
  flex: 1 1 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.fi-ai-picks-slide__act:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}
.fi-ai-picks-slide__act:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Dots */
.fi-ai-picks-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 12px;
}
.fi-ai-picks-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease, width 200ms ease;
}
.fi-ai-picks-dot:hover { background: rgba(255, 255, 255, 0.40); }
.fi-ai-picks-dot.is-active {
  background: var(--accent);
  width: 20px;
  border-radius: 4px;
}

/* AI Picks — vertical list (replaced the fragile 1-at-a-time translateX
   carousel 2026-06-06: it left slides 2-3 mis-aligned/empty and swallowed the
   action-button clicks via pointer-capture). All value picks now show at once. */
.fi-ai-picks-list { display: flex; flex-direction: column; }
.fi-ai-picks-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 4px;
  border-top: 1px solid var(--divider);
}
.fi-ai-picks-card:first-child { border-top: 0; }
.fi-ai-picks-card--empty {
  color: var(--text-tertiary);
  text-align: center;
  font-size: 13px;
  padding: 24px 0;
  border-top: 0;
}

/* Free-user lock overlay */
.fi-ai-picks-block.is-locked .fi-ai-picks-list {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}
.fi-ai-picks-block.is-locked::after {
  content: "PRO only";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.85);
  color: var(--accent);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  z-index: 2;
  pointer-events: none;
}

.fi-ai-picks-block__cta { width: 100%; }


/* === YMYL disclaimer (sidebar footer) ===================================== */

.fi-yml-disclaimer {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  margin: 0;
}
.fi-yml-disclaimer a { color: var(--accent); }
.fi-yml-disclaimer a:hover { text-decoration: underline; }


/* === Buttons (fi-btn namespace) ===========================================
   Lighter-weight pair than .btn for the analysis CTAs. Keep both classes
   so we don't have to refactor every existing .btn site. Visually compatible
   with .btn/.btn--primary/.btn--ghost. */

/* F5.17.c-fix Karol QA "nie podoba mi się prostota przycisków" (21st.dev
   inspiration): give buttons depth — layered surface gradient, top inner
   highlight, soft drop shadow, and a sheen sweep on hover. Still single
   accent, no multi-color. reduced-motion drops the lift + sheen. */
.fi-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)) ,
    linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.28);
  transition: transform 160ms var(--easing-out, ease),
              border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  white-space: nowrap;
}
/* Sheen sweep */
.fi-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-18deg);
  transition: left 520ms var(--easing-out, ease);
  pointer-events: none;
  z-index: 1;
}
.fi-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0,229,160,0.45);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 20px rgba(0,0,0,0.34);
}
.fi-btn:hover::after { left: 130%; }
.fi-btn:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 3px 8px rgba(0,0,0,0.3); }
@media (prefers-reduced-motion: reduce) {
  .fi-btn { transition: border-color 160ms ease, box-shadow 160ms ease; }
  .fi-btn:hover, .fi-btn:active { transform: none; }
  .fi-btn::after { display: none; }
}
/* F5.18 refine — owner "zbyt zielono" on the big "Full analysis" CTA. The fill
   now sits on the DEEPER, desaturated accent band (--accent-muted) so it reads
   as the primary action without shouting neon. Textured depth (top highlight +
   sheen sweep inherited from .fi-btn) preserved; only the hue is calmed and the
   accent halo toned down. Single accent — no second color. */
.fi-btn--primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--accent-muted), var(--accent-muted-strong));
  color: #06120d;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 18px rgba(0,184,122,0.20);
}
.fi-btn--primary:hover {
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 26px rgba(0,184,122,0.28);
}
.fi-btn--ghost {
  background: rgba(255,255,255,0.03);
  border-color: var(--border);
  box-shadow: none;
}
.fi-btn--ghost:hover { background: rgba(255,255,255,0.06); }

.fi-load-more {
  margin-top: 16px;
  width: 100%;
}


/* === Mobile responsive tweaks ============================================ */

@media (max-width: 1023px) {
  .fi-pick-hero {
    padding: 20px;
    min-height: 220px;
  }
  .fi-pick-hero__teams { gap: 16px; }
  /* Restored to 56px — previous pass shrank to 48px which was too small. */
  .fi-pick-hero__team img { width: 56px; height: 56px; }
  .fi-pick-hero__name { font-size: 16px; }
  /* 2-col at tablet so 4 tiles still have room before the 767px breakpoint */
  .fi-pick-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fi-pick-hero__stats strong { font-size: 16px; }
}

@media (max-width: 767px) {
  /* --- Hero card: tighter padding + smaller min-height.
     padding: 16px ensures symmetric inset inside the card; width is already
     100% of .app-main which carries the 16px page-level side inset. */
  /* F5.18 (Karol: "Pick of the day zajmuje za wiele miejsca"): trim the banner
     floor so the hero is less dominant on phones. */
  .fi-pick-hero {
    padding: 16px;
    min-height: 168px;
  }

  /* Hero teams: confident crest size on mobile (restored from shrunken 48px). */
  .fi-pick-hero__team img { width: 60px; height: 60px; }
  .fi-pick-hero__name { font-size: 15px; }

  /* Stats: 2x2 grid keeps all 4 tiles without overflowing at 360–767px. */
  .fi-pick-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .fi-pick-hero__stats strong { font-size: 15px; }

  /* Actions row: allow buttons to wrap but ensure each stays readable. */
  .fi-pick-hero__actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .fi-pick-hero__actions .fi-btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    padding: 9px 10px;
    font-size: 12.5px;
  }

  /* Hero context compare: guard against long team names overflowing.
     min-width: 0 on both team cells allows flex to shrink them. */
  .fi-cmp__team {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }
  .fi-cmp__teams { gap: 6px; }

  /* Hero context best-bet block */
  .fi-pick-hero__bestbet { font-size: 12px; padding: 8px 12px; }

  /* Tighter section title spacing */
  .fi-section-title { margin: 20px 0 10px; }

  /* Pick grid: single column always — avoid side-by-side cards too narrow. */
  .fi-pick-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .fi-page-title { font-size: 22px; }
  .fi-page-sub { font-size: 13px; }
  /* Hero — tighter padding, smaller crests, name wraps under image */
  .fi-pick-hero {
    padding: 14px;
    min-height: 240px;
    border-radius: 12px;
  }
  .fi-pick-hero__meta {
    font-size: 11px;
    gap: 6px;
    margin-bottom: 10px;
  }
  .fi-pick-hero__tag {
    margin-left: 0;
    order: -1;
    width: 100%;
    text-align: center;
  }
  .fi-pick-hero__teams { gap: 10px; margin: 14px 0; }
  .fi-pick-hero__team { gap: 4px; min-width: 0; flex: 1; }
  /* 52px: confident crest at 360px — visible focal point but leaves room for name below. */
  .fi-pick-hero__team img { width: 52px; height: 52px; }
  .fi-pick-hero__name {
    font-size: 14px;
    line-height: 1.15;
    word-break: break-word;
    text-align: center;
  }
  .fi-pick-hero__vs { font-size: 12px; flex: 0 0 auto; }
  .fi-pick-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
    gap: 8px;
    margin-bottom: 12px;
  }
  .fi-pick-hero__stats span { font-size: 10px; }
  .fi-pick-hero__stats strong { font-size: 14px; }
  .fi-pick-hero__actions { gap: 6px; }
  .fi-pick-hero__actions .fi-btn { padding: 8px 10px; font-size: 12px; }

  /* Pick cards — bigger min-height to fit content; CTA inline, not absolute */
  .fi-pick-card { padding: 14px; min-height: 120px; }
  .fi-pick-card__teams { font-size: 14px; }
  .fi-pick-card__stats { font-size: 12px; gap: 8px; }
  .fi-pick-card__cta { position: static; display: inline-block; margin-top: 4px; }

  /* AI Picks sidebar — same tighter spacing */
  .fi-ai-picks-block { padding: 14px; }
  .fi-ai-picks-slide { padding: 10px 0; }
  .fi-ai-picks-slide__teams { font-size: 14px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Faza 5.17.c-fix — Hero inline analytical block
   Karol QA: "nie widzę rozbicia analitycznego z wykresami". Reuses backend
   statistical_context (Poisson distributions + 5x5 score matrix) +
   probabilities.most_likely_scores. Pure HTML / CSS — no charting lib.
   ───────────────────────────────────────────────────────────────────────── */

/* F5.17.c-fix Karol QA: Match Analytics hidden until "Full analysis" pressed.
   The button toggles [hidden] on this wrapper; when shown, a top separator
   sets it apart from the context above. */
.fi-hero-analytics-wrap { margin-top: 16px; }
.fi-hero-analytics-wrap[hidden] { display: none; }

.fi-hero-an {
  /* Glass surface so the charts read cleanly over the hero fanart */
  background: rgba(10, 14, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.fi-hero-an__heading {
  padding: 11px 16px 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.fi-hero-an__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 2px 14px 16px;
}
@media (min-width: 720px)  { .fi-hero-an__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .fi-hero-an__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.9fr); } }

.fi-hero-an__panel {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}
.fi-hero-an__panel-title {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fi-hero-an__panel-hint {
  color: var(--text-disabled, #3d5468);
  font-weight: 500;
  letter-spacing: 0.4px;
}

/* SVG bar chart */
.fi-hero-an__svg {
  width: 100%;
  height: 104px;
  display: block;
  overflow: visible;
}
.fi-hero-an__svg-grid {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.fi-hero-an__svg-base { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.fi-hero-an__svg-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: fi-bar-grow 420ms var(--easing-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
/* F5.17.c-fix Karol QA "wykres wygląda nienaturalnie przez ten glow i
   dziwnego fonta": dropped the peak drop-shadow glow + switched the SVG
   labels from mono to the system sans (--font-sans) so the numbers read
   naturally instead of looking like a terminal readout. */
.fi-hero-an__svg-barg.is-peak .fi-hero-an__svg-bar { filter: none; }
.fi-hero-an__svg-val {
  fill: var(--text-secondary);
  font-size: 8.5px;
  font-weight: 600;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}
.fi-hero-an__svg-barg.is-peak .fi-hero-an__svg-val { fill: var(--accent); }
.fi-hero-an__svg-axis {
  fill: var(--text-tertiary);
  font-size: 8.5px;
  font-family: var(--font-sans, system-ui, sans-serif);
}
@keyframes fi-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .fi-hero-an__summary-caret { transition: none; }
  .fi-hero-an__svg-bar { animation: none; }
}

/* Heatmap — 1 axis col + 5 data cols; first row = column axis labels */
.fi-hero-an__heat {
  display: grid;
  grid-template-columns: 14px repeat(5, minmax(0, 1fr));
  gap: 3px;
  align-items: stretch;
}
.fi-hero-an__heat-corner { }
.fi-hero-an__heat-axis {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--text-tertiary);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.fi-hero-an__heat-axis--row { writing-mode: horizontal-tb; }
.fi-hero-an__cell {
  aspect-ratio: 1.5 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  /* alpha-blend brand accent over dark surface by intensity --t */
  background:
    linear-gradient(rgba(0, 229, 160, calc(var(--t, 0) * 0.85)),
                    rgba(0, 229, 160, calc(var(--t, 0) * 0.85))),
    var(--surface-3);
  color: #06120d;
  transition: transform 150ms ease;
}
.fi-hero-an__cell span {
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: rgba(6, 18, 13, calc(0.35 + var(--t, 0) * 0.65));
}
.fi-hero-an__cell.is-peak {
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 8px rgba(0, 229, 160, 0.4);
}
.fi-hero-an__cell.is-peak span { color: #06120d; }

/* Top scores — horizontal mini-bars */
.fi-hero-an__top {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fi-hero-an__top-row {
  display: grid;
  grid-template-columns: 34px 1fr 46px;
  align-items: center;
  gap: 8px;
}
.fi-hero-an__top-score {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.fi-hero-an__top-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.fi-hero-an__top-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  animation: fi-top-fill 480ms var(--easing-out, ease) both;
}
@keyframes fi-top-fill { from { width: 0 !important; } }
.fi-hero-an__top-prob {
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fi-hero-an__top-empty { color: var(--text-tertiary); font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .fi-hero-an__top-fill { animation: none; }
}

@media (max-width: 767px) {
  /* Single-column layout: goal-distribution + heatmap + top-scores all stack.
     Condensed and scannable — prevents the "fat chart takes half screen" look.
     Each panel is compact (no 2-up grid); charts use a minimal height so bars
     stay thin (dense data feel, not bar-chart-poster). */
  .fi-hero-an__grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 2px 0 12px;
    gap: 8px;
  }
  /* Remove column-spanning overrides since we're in single-column mode. */
  .fi-hero-an__grid > .fi-hero-an__panel:nth-child(3),
  .fi-hero-an__grid > .fi-hero-an__panel:nth-child(4) {
    grid-column: auto;
  }
  /* Chart height: bumped further (was 88px — Karol QA "lekko za bardzo
     spłaszczone"). 108px gives a more natural bar aspect ratio under
     preserveAspectRatio=none (viewBox is 104 tall, so 108 ≈ 1:1 vertical).
     Charts live behind "Full analysis" so this does NOT taller the default hero. */
  .fi-hero-an__svg { height: 108px; }
  /* Tighten the panel inner padding for compact feel. */
  .fi-hero-an__panel { padding: 8px 10px; }
  .fi-hero-an__panel-title { margin-bottom: 6px; }
}

@media (max-width: 540px) {
  .fi-hero-an__grid { padding: 2px 0 10px; gap: 6px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Faza 5.17.c-fix — Analysis simple date toggle (Today / All)
   Karol QA: drop the historical 11-day strip on Analysis; clean 2-pill
   toggle. Reuses .date-strip__btn data-date so listeners are unchanged.
   ───────────────────────────────────────────────────────────────────────── */
.date-strip--simple {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  /* Karol 2026-06-05 mobile fix: the base .date-strip (matches.css) carries a
     negative horizontal margin so the per-day strip bleeds to the container
     edge. The simple Today/All skin must NOT inherit that bleed — combined with
     .app-main overflow-x:clip it was clipping the "Today" pill on the left. */
  margin: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-pill);
}
.date-strip--simple .date-strip__pill {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 20px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 0;
  transition: background 200ms ease, color 200ms ease;
}
.date-strip--simple .date-strip__pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}
/* Calmed active state (was a solid neon-accent fill — "zbyt zielono"): an
   accent-TINTED pill with accent text + a thin accent ring, matching the
   .matches-toggle active state so both Today/All toggles read identically. */
.date-strip--simple .date-strip__btn--active {
  background: var(--accent-tint, rgba(0, 229, 160, 0.16));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 160, 0.40);
}
.date-strip--simple .date-strip__btn--active:hover {
  color: var(--accent);
  background: var(--accent-tint, rgba(0, 229, 160, 0.16));
}
@media (prefers-reduced-motion: reduce) {
  .date-strip--simple .date-strip__pill { transition: none; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Faza 5.17.c-fix v2 — Hero context (creative, not "blok na bloku")
   Asymmetric 2-column band under the hero: LEFT = head-to-head comparison
   (form + diverging goals/attack/conceded bars), RIGHT = mini league table
   with crests + the two teams highlighted. Karol QA.
   ───────────────────────────────────────────────────────────────────────── */
.fi-hero-ctx {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 920px) {
  .fi-hero-ctx { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}

.fi-hero-ctx__compare,
.fi-hero-ctx__table {
  position: relative;
  /* F5.17.c-fix Karol QA: strongly transparent so the hero stadium fanart
     shows through. Light blur keeps the text legible. */
  background: rgba(10, 14, 18, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 16px 18px;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  .fi-hero-ctx__compare,
  .fi-hero-ctx__table {
    padding: 12px 14px;
    border-radius: 10px;
  }
  .fi-hero-ctx { gap: 10px; margin-top: 10px; }
}
.fi-ctx-block__title {
  margin: 0 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.fi-ctx-block__foot { margin: 8px 0 0; font-size: 10.5px; color: var(--text-tertiary); }

/* Head-to-head header */
.fi-cmp__teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.fi-cmp__team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 0;
}
.fi-cmp__team img { object-fit: contain; flex: 0 0 auto; }
.fi-cmp__team--away { flex-direction: row-reverse; text-align: right; }
.fi-cmp__vs {
  flex: 0 0 auto;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Form row — pills | label | pills */
.fi-cmp__form {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.fi-cmp__form-pills { display: inline-flex; gap: 4px; }
.fi-cmp__form-pills--away { justify-content: flex-end; }
.fi-cmp__form-label {
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-tertiary);
}
/* W/D/L pills (shared by _formPills) */
.fi-ctx-form__pill {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; font-size: 10px; font-weight: 700; color: #06120d;
}
.fi-ctx-form__pill.is-w { background: var(--accent); }
.fi-ctx-form__pill.is-d { background: var(--border-strong); color: var(--text-primary); }
.fi-ctx-form__pill.is-l { background: #ff5a5a; color: #160606; }
.fi-ctx-form__empty { color: var(--text-tertiary); }

/* Diverging comparison rows */
.fi-cmp__row {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 12px;
}
.fi-cmp__val {
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.fi-cmp__val--home { text-align: left; }
.fi-cmp__val--away { text-align: right; grid-column: 3; grid-row: 1; }
.fi-cmp__bar {
  grid-column: 2; grid-row: 1;
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.fi-cmp__seg { height: 100%; }
.fi-cmp__seg--home { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.fi-cmp__seg--away { background: rgba(255,255,255,0.16); }
.fi-cmp__label {
  grid-column: 1 / -1; grid-row: 2;
  text-align: center; margin-top: 4px;
  font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-tertiary);
}
.fi-cmp__row:last-child { margin-bottom: 0; }

/* Mini league table */
.fi-mt { list-style: none; margin: 0; padding: 0; }
.fi-mt__head,
.fi-mt__row {
  display: grid;
  grid-template-columns: 22px 18px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12.5px;
}
.fi-mt__head {
  font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-tertiary); padding-bottom: 4px;
}
.fi-mt__row { color: var(--text-secondary); }
.fi-mt__row img { width: 18px; height: 18px; object-fit: contain; }
.fi-mt__nobadge { width: 18px; height: 18px; }
.fi-mt__pos { color: var(--text-tertiary); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.fi-mt__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-mt__pts { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fi-mt__row.is-home {
  background: rgba(0,229,160,0.12);
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.fi-mt__row.is-home .fi-mt__pos { color: var(--accent); }
.fi-mt__row.is-away {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 2px 0 0 0 var(--border-strong);
}
.fi-mt__gap {
  text-align: center; color: var(--text-tertiary); font-size: 11px;
  padding: 2px 0; letter-spacing: 2px;
}


/* ─────────────────────────────────────────────────────────────────────────
   Faza WC-1 (Karol 2026-06-05) — national-team / tournament fixture card.
   The hero/grid drop the club model's fabricated EG/odds/H2H for WC/NL/
   INTL_FRIEND and show a clean fixture: crests + kickoff + an honest note +
   the group standings table only.
   ───────────────────────────────────────────────────────────────────────── */
.fi-pick-hero__intl-note {
  margin: 18px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
/* Hero meta row, right-side group: the value pill sits right next to Ask AI
   (Karol 2026-06-06: '+X% value should be right beside Ask AI'). */
.fi-pick-hero__meta-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fi-pick-hero__ask {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-size: 12px;
}

/* AI-written match-of-day explanation (Claude blurb, server/predictions.py). */
.fi-pick-hero__ai-note {
  margin: 18px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.fi-pick-hero__ai-note::before {
  content: "AI READ";
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 4px;
}
/* Tournament context shows only the standings table (no H2H compare column),
   so collapse the 2-col hero-context grid to a single full-width column. */
.fi-hero-ctx--solo {
  grid-template-columns: 1fr;
}
.fi-pick-card__intl {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: var(--weight-medium);
}


/* ─────────────────────────────────────────────────────────────────────────
   Karol QA 2026-06-05 — right-rail imagery: team crests on Live & upcoming
   rows + a real source photo thumbnail on Latest-news rows (API-sourced only;
   onerror removes a broken image so we render WITHOUT one).
   ───────────────────────────────────────────────────────────────────────── */
.fi-rail-crests {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.fi-rail-crest {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* News rows become image-left / text-right when a photo is present. */
.fi-rail-news-item--has-img {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.fi-rail-news-item__img {
  width: 58px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
  background: var(--surface-2);
}
.fi-rail-news-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   Freemium (Karol 2026-06-05): free users see that VALUE exists but not the
   exact edge — a "Value · PRO" badge linking to the plans page. PRO sees the
   real number + the suggested Half-Kelly stake on the AI Picks slide.
   ───────────────────────────────────────────────────────────────────────── */
.fi-value-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--accent);
  background: var(--accent-tint, rgba(0, 229, 160, 0.16));
  border: 1px solid rgba(0, 229, 160, 0.35);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.fi-value-lock:hover { background: rgba(0, 229, 160, 0.24); }

.fi-ai-picks-slide__stake {
  font-size: 12px;
  color: var(--text-secondary);
}
.fi-ai-picks-slide__stake strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 0 2px;
}
.fi-ai-picks-slide__stake span {
  color: var(--text-tertiary);
  font-size: 10px;
}