/* BiegaMy — design tokens (SSOT). Kanon z zawodnik.html.
   Kaskada: per-plik :root (pozniej w zrodle) wygrywa na default -> wyglad 1:1.
   Motywy html[data-theme] (0,1,1) przebijaja per-plik :root (0,1,0) -> dzialaja globalnie. */

/* ══ SELF-HOSTED FONTS (KM1) — same-origin (github.io), przezywaja export-do-PNG ══
   Pliki w biegamy-assets/fonts/ (latin+latin-ext, PL OK). font-display:swap.
   ADDITIVE: Google Fonts <link> nadal w 20 plikach — oba zrodla rownolegle (Krok 2). */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/bebas-neue-400.woff2') format('woff2');}

@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/dm-sans-300.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/dm-sans-400.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/dm-sans-500.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/dm-sans-600.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/dm-sans-700.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:300;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/dm-sans-300-italic.woff2') format('woff2');}

@font-face{font-family:'DM Mono';font-style:normal;font-weight:300;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/dm-mono-300.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/dm-mono-400.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('https://filipjanczak1989-png.github.io/biegamy-assets/fonts/dm-mono-500.woff2') format('woff2');}

:root{
  --bg:#07070a; --card:#0f0f14; --card2:#13131b; --card3:#1a1a24;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.13);
  --accent:#e8561e; --accent2:#ff7040; --accent3:#ff9060; --accent-rgb:232,86,30;
  --fg:#f0ede8; --fg2:rgba(240,237,232,0.65); --fg3:rgba(240,237,232,0.32);
  --muted:#5a5766; --muted2:#2a2830;
  --green:#3db870; --yellow:#e8b840; --red:#e05050; --blue:#4e8cd6; --purple:#8a62d8;
  --glow-o:rgba(232,86,30,0.32); --glow-o2:rgba(232,86,30,0.14);
  --glow-g:rgba(61,184,112,0.25); --glow-b:rgba(78,140,214,0.2);
  --tile-radius:18px; --tile-radius-lg:22px; --tile-pad:16px 18px; --tile-pad-sm:12px 14px;
  --tile-shadow:0 8px 32px rgba(0,0,0,0.55),0 1px 0 rgba(255,255,255,0.04) inset;
  --tile-shadow-lg:0 16px 56px rgba(0,0,0,0.7),0 1px 0 rgba(255,255,255,0.05) inset;
  --dur-fast:0.18s; --dur-normal:0.32s; --dur-slow:0.45s;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-spring:cubic-bezier(0.34,1.4,0.64,1);
}
/* MOTYWY startowe — zmieniaja kolor wiodacy + glow; --bg/--fg zostaja (bezpieczne) */
html[data-theme="ocean"]{ --accent:#1e90e8; --accent2:#45a8ff; --accent3:#7cc4ff; --accent-rgb:30,144,232;
  --glow-o:rgba(30,144,232,0.32); --glow-o2:rgba(30,144,232,0.14); }
html[data-theme="forest"]{ --accent:#2fae5a; --accent2:#46c873; --accent3:#74dd97; --accent-rgb:47,174,90;
  --glow-o:rgba(47,174,90,0.32); --glow-o2:rgba(47,174,90,0.14); }
html[data-theme="grape"]{ --accent:#8a62d8; --accent2:#a585e8; --accent3:#c0a8f0; --accent-rgb:138,98,216;
  --glow-o:rgba(138,98,216,0.32); --glow-o2:rgba(138,98,216,0.14); }
html[data-theme="gold"]{ --accent:#d4a017; --accent2:#e8bf55; --accent3:#f0d27a; --accent-rgb:212,160,23;
  --glow-o:rgba(212,160,23,0.32); --glow-o2:rgba(212,160,23,0.14); }

/* ── KANON PRZYCISKOW (na tokenach -> reaguje na motywy) ──────────────
   theme.css jest WCZESNIEJ w zrodle niz per-plik <style> -> lokalne .btn-*
   (jesli istnieja) wygrywaja przy rownej specyficznosci. Migracja per-plik
   = usun lokalne .btn-* + zamien inline na class. Inline style > klasa
   (specyficznosc) -> przy migracji USUN inline. */
.btn{
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; font-weight:700; padding:12px 20px; border-radius:12px;
  border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; line-height:1; -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.btn:active{ transform:scale(0.97); }
.btn:disabled{ opacity:0.55; cursor:default; transform:none; }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:10px; border-radius:9px; }

.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; box-shadow:0 4px 16px var(--glow-o), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 28px var(--glow-o), inset 0 1px 0 rgba(255,255,255,0.2); }

.btn-secondary{
  background:rgba(var(--accent-rgb),0.10); color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),0.35);
}
.btn-secondary:hover{ background:rgba(var(--accent-rgb),0.16); border-color:rgba(var(--accent-rgb),0.5); }

.btn-ghost{ background:rgba(255,255,255,0.05); color:var(--fg2); border:1px solid var(--border); }
.btn-ghost:hover{ border-color:var(--border2); color:var(--fg); }

.btn-danger{ background:rgba(224,80,80,0.12); color:var(--red); border:1px solid rgba(224,80,80,0.35); }
.btn-danger:hover{ background:rgba(224,80,80,0.18); border-color:rgba(224,80,80,0.5); }

.btn-icon{
  width:36px; height:36px; padding:0; border-radius:10px; gap:0;
  background:rgba(255,255,255,0.06); color:var(--fg); border:1px solid var(--border);
}
.btn-icon:hover{ border-color:var(--border2); background:rgba(255,255,255,0.1); }

/* Info-chip "i" (powtarzalny w calej apce — tooltip metryki) */
.info-dot{
  width:18px; height:18px; border-radius:50%; padding:0; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  background:rgba(var(--accent-rgb),0.15); border:1px solid rgba(var(--accent-rgb),0.35);
  color:var(--accent); font-family:'DM Mono',monospace; font-size:10px; font-weight:700;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--dur-fast);
}
.info-dot:hover{ background:rgba(var(--accent-rgb),0.25); }
.info-dot-sm{ width:14px; height:14px; font-size:8px; }

/* === SHEET — bottom-sheet (SSOT, było: forki w profil.html + races.html) === */
.add-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s;}
.add-overlay.open{opacity:1;pointer-events:all;}
.add-sheet{width:100%;max-width:480px;background:var(--card2);border-radius:24px 24px 0 0;padding:0 20px env(safe-area-inset-bottom,24px);transform:translateY(60px);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);max-height:85vh;max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain;}
.add-overlay.open .add-sheet{transform:translateY(0);}

/* === ST — grupy/karty ustawień (wzorzec pod rollout na całą apkę) === */
.st-group{margin-bottom:18px;}
.st-label{font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:8px;}
.st-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px 15px;}
.st-card+.st-card{margin-top:8px;}

/* === NAV — bottom navigation (SSOT; kanon = Fork A z nutrition.html) === */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:420px;background:rgba(7,7,11,0.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.07);border-radius:28px 28px 0 0;display:flex;padding:10px 6px calc(22px + env(safe-area-inset-bottom, 0px));z-index:50;box-shadow:0 -8px 40px rgba(0,0,0,0.5);}
.nav-it{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;cursor:pointer;text-decoration:none;position:relative;transition:opacity 0.15s;-webkit-tap-highlight-color:transparent;}
.nav-it svg{width:22px;height:22px;stroke:var(--muted);stroke-width:1.7;transition:stroke 0.15s;}
.nav-it.active svg{stroke:var(--accent);}
.nav-lbl{font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);font-family:'DM Mono',monospace;white-space:nowrap;transition:color 0.15s;}
.nav-it.active .nav-lbl{color:var(--accent);}
.nav-it.active::before{content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:32px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);border-radius:0 0 3px 3px;box-shadow:0 0 14px rgba(var(--accent-rgb),0.75);}
/* #nav-mount = wrapper montażu NAV. Na stronach z `body>*{z-index:1}` (zawodnik/kalendarz)
   ten div łapie kontekst stackingu na z-index:1 i więzi w nim fixed-nav → sekcje in-flow
   (Forma/Społeczność/Ćwiczenia, też z-index:1, później w DOM) malują się NA navie = nieklikalny.
   Stary lokalny nav miał .bottom-nav{z-index:50} (klasa) przebijający body>* → własny kontekst 50.
   Podniesienie kontekstu wrappera do 50 przywraca stary porządek: nav NAD sekcjami, POD sheetami/modalami (300+). */
#nav-mount{ position:relative; z-index:50; }

/* === UTIL — .no-scrollbar: ukrycie paska przewijania w POZIOMYCH scrollerach UI
   (heatmapy, tygodniowe paski, karuzele filtrów). NIE na pionowych funkcjonalnych
   (modale/listy/wątki czatu). Scroll dalej działa — chowamy tylko wizualny pasek. === */
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;}
.no-scrollbar::-webkit-scrollbar{display:none;}

/* === VIEW TRANSITIONS (cross-document, MPA) — ETAP 1: sam cross-fade ==========
   @view-transition{navigation:auto} musi byc w OBU dokumentach (stary+nowy);
   dziala bo wszystkie strony linkuja ten theme.css (same-origin github.io).
   Progressive enhancement: przegladarki bez wsparcia ignoruja regule -> twarde
   przejscie jak dzis (zero regresji). Kierunkowy slide = ETAP 2 (pageswap/pagereveal). */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.16,1,0.3,1);
}

/* Dostepnosc: reduced-motion -> natychmiastowe przejscie, bez animacji */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* === VIEW TRANSITIONS — ETAP 2: kierunkowy slide L/P =========================
   Kierunek z atrybutu data-vt-dir na <html> (ustawia sb.js w handlerze pagereveal
   z sessionStorage, pisanego przez swipe TUZ przed location.href).
   Brak atrybutu (nawigacja nie-swipe) -> zadna regula ponizej nie matchuje ->
   zostaje cross-fade z ETAPU 1 (bezpieczny default, nigdy losowy slide).
   fwd  (swipe w LEWO, next): stara jedzie w LEWO,  nowa wchodzi z PRAWEJ.
   back (swipe w PRAWO, prev): stara jedzie w PRAWO, nowa wchodzi z LEWEJ.
   -> old i new zawsze w przeciwne krawedzie = spojny filmstrip.
   Czas/easing dziedziczone z reguly ETAPU 1 (220ms) — tu tylko animation-name. */
@keyframes bm-vt-old-to-left   { to   { transform: translateX(-100%); } }
@keyframes bm-vt-new-from-right{ from { transform: translateX(100%);  } }
@keyframes bm-vt-old-to-right  { to   { transform: translateX(100%);  } }
@keyframes bm-vt-new-from-left { from { transform: translateX(-100%); } }

html[data-vt-dir="fwd"]::view-transition-old(root)  { animation-name: bm-vt-old-to-left;   }
html[data-vt-dir="fwd"]::view-transition-new(root)  { animation-name: bm-vt-new-from-right; }
html[data-vt-dir="back"]::view-transition-old(root) { animation-name: bm-vt-old-to-right;  }
html[data-vt-dir="back"]::view-transition-new(root) { animation-name: bm-vt-new-from-left; }

/* reduced-motion: directional selektory sa BARDZIEJ specyficzne niz reguly E1,
   wiec ich animation-name przebilby `animation:none` z bloku wyzej -> jawnie zeruj. */
@media (prefers-reduced-motion: reduce) {
  html[data-vt-dir="fwd"]::view-transition-old(root),
  html[data-vt-dir="fwd"]::view-transition-new(root),
  html[data-vt-dir="back"]::view-transition-old(root),
  html[data-vt-dir="back"]::view-transition-new(root) { animation: none; }
}