/*
 * Vokolo — design systém appky.
 *
 * Barvy převzaté z vokolopriglu.cz (3. 9. 2026): signální červená #FF3A2B,
 * text #212121, bílý podklad, písmo Poppins. Appka tak vypadá jako
 * pokračování webu, ne jako cizí věc.
 *
 * Světlá je výchozí, protože taková je značka. Tmavá varianta se zapne
 * sama podle nastavení telefonu — appka se čte i za šera před startem.
 *
 * POZOR: Poppins je zatím jen v seznamu písem, NENÍ nahrané u nás.
 * Google Fonts nepoužíváme (zakazuje je CSP a nefungovaly by offline) —
 * až klub dodá brandové podklady, doplní se soubory do static/pisma/
 * a @font-face sem. Do té doby padá na systémové bezpatkové písmo.
 */
:root {
  /* Podklad */
  --pozadi:        #ffffff;
  --pozadi-2:      #f4f4f4;
  --karta:         #ffffff;
  --karta-vys:     #f4f4f4;
  --linka:         #e4e4e4;

  /* Text */
  --text:          #212121;
  --text-2:        #5a5a5a;
  --text-3:        #8a8a8a;

  /* Značka a signály */
  --znacka:        #ff3a2b;   /* červená z webu závodu */
  --akce:          #ff3a2b;
  --krize:         #b3271e;   /* tmavší než značka, ať krize nesplyne */
  --uspech:        #2e9e4f;
  --varovani:      #c9860a;

  /* Rozměry */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --lista: 64px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadi:      #121212;
    --pozadi-2:    #1c1c1c;
    --karta:       #1e1e1e;
    --karta-vys:   #272727;
    --linka:       #343434;

    --text:        #f2f2f2;
    --text-2:      #a8a8a8;
    --text-3:      #7c7c7c;

    /* Na černé je čistá #FF3A2B moc agresivní — o odstín světlejší. */
    --znacka:      #ff5c4d;
    --akce:        #ff5c4d;
    --krize:       #e0523f;
    --uspech:      #3fb950;
    --varovani:    #d29922;

    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * Atribut `hidden` musí porazit i naše vlastní `display`.
 * Bez tohohle řádku prvek s `display: flex` zůstane vidět, i když ho
 * JavaScript „schová" — a uživatel kouká natrvalo na výzvu k zapnutí
 * notifikací, které už dávno zapnuté má.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--text);
  font: 15px/1.55 Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Místo pro spodní lištu i pro výřez telefonu. */
  padding-bottom: calc(var(--lista) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* ------------------------------------------------------------- typografie */

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.0625rem; font-weight: 700; }
h3 { font-size: 0.9375rem; font-weight: 600; }
p  { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

.tlumene  { color: var(--text-2); }
.poznamka { color: var(--text-3); font-size: 0.8125rem; line-height: 1.45; }

.nadpis-sekce {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ------------------------------------------------------------------ layout */

.obsah {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 14px 24px;
}

.karta {
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: var(--r-m);
  padding: 16px;
  margin-bottom: 12px;
}

.karta.uzka { max-width: 400px; margin: 40px auto; }

/* --------------------------------------------------------------------- hero */

/*
 * Hlavní obrazovka. Odpočet je schválně největší prvek na stránce —
 * jedno číslo, které se hýbe, udělá s pocitem z appky víc než cokoli jiného.
 */
.hero {
  position: relative;
  margin: 0 -14px 4px;
  padding: calc(env(safe-area-inset-top) + 28px) 24px 28px;
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--znacka) 26%, transparent) 0%,
      transparent 62%),
    linear-gradient(180deg, var(--pozadi-2) 0%, var(--pozadi) 100%);
  overflow: hidden;
}

/* Vlnovka dole — decentní odkaz na přehradu, čistě CSS. */
.hero::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -1px;
  height: 26px;
  background: var(--pozadi);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* S fotkou: obrázek dole, přes něj přechod, aby text zůstal čitelný
   i na světlém snímku. Bez toho by se na fotce z poledního slunce
   nedal přečíst název závodu. */
.hero-foto {
  background-size: cover;
  background-position: center;
}
.hero-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pozadi) 55%, transparent) 0%,
    color-mix(in srgb, var(--pozadi) 78%, transparent) 55%,
    var(--pozadi) 100%);
}

.hero-vnitrek { position: relative; z-index: 1; }

.hero-akce {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.hero-akce .tlacitko { width: auto; flex: 1 1 auto; }

.hero-znacka {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--znacka) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--znacka) 32%, transparent);
  color: var(--znacka);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero h1 { margin: 14px 0 6px; font-size: 2rem; }
.hero .kdy { color: var(--text-2); font-size: 0.9375rem; }

.odpocet {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.odpocet-dil {
  flex: 1;
  padding: 12px 6px 10px;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--karta) 82%, transparent);
  border: 1px solid var(--linka);
  text-align: center;
  backdrop-filter: blur(6px);
}

.odpocet-cislo {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.odpocet-popis {
  display: block;
  margin-top: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* V den závodu se odpočet přebarví — appka pozná, že je „ten den". */
.odpocet.dnes .odpocet-cislo { color: var(--akce); }

/* --------------------------------------------------------------- upozornění */

.vyzva {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--akce) 15%, var(--karta)) 0%, var(--karta) 65%);
  border-color: color-mix(in srgb, var(--akce) 34%, transparent);
}

.vyzva .ikona {
  flex: none;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--akce) 20%, transparent);
  color: var(--akce);
}

.vyzva-text { flex: 1; min-width: 0; }
.vyzva h2 { margin-bottom: 4px; }

/* ----------------------------------------------------------------- prvky */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;               /* dotykový cíl i v rukavicích */
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--akce);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.tlacitko:active { transform: scale(.98); }
.tlacitko:disabled { opacity: .55; cursor: default; }

.tlacitko.druhotne {
  background: var(--karta-vys);
  color: var(--text);
  border: 1px solid var(--linka);
  font-weight: 600;
}

.tlacitko.uzke { width: auto; }

.pole {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  margin: 6px 0 14px;
  border: 1px solid var(--linka);
  border-radius: 12px;
  background: var(--pozadi-2);
  color: var(--text);
  font: inherit;
}
.pole:focus {
  outline: none;
  border-color: var(--znacka);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--znacka) 22%, transparent);
}
textarea.pole { min-height: 92px; resize: vertical; line-height: 1.5; }
label { font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }

/* Přepínač úrovní notifikací — velký dotykový řádek, ne drobný checkbox. */
.prepinac {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linka);
  cursor: pointer;
}
.prepinac:last-of-type { border-bottom: 0; }
.prepinac input { position: absolute; opacity: 0; pointer-events: none; }

.prepinac .packa {
  flex: none;
  width: 46px; height: 28px;
  border-radius: 999px;
  background: var(--linka);
  position: relative;
  transition: background .18s ease;
}
.prepinac .packa::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}
.prepinac input:checked + .packa { background: var(--uspech); }
.prepinac input:checked + .packa::after { transform: translateX(18px); }
.prepinac input:disabled + .packa { opacity: .5; }

.prepinac-popis { flex: 1; min-width: 0; }
.prepinac-popis strong { display: block; font-size: 0.9375rem; font-weight: 600; }

/* ------------------------------------------------- obsahové bloky podle typu */

.blok-nadpis {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.blok-nadpis h2 { flex: 1; min-width: 0; }

/* Formátovaný text od organizátorů (tučné, odrážky, klikací kontakty). */
.text-obsah { color: var(--text-2); line-height: 1.6; }
.text-obsah p { margin: 0 0 10px; }
.text-obsah p:last-child { margin-bottom: 0; }
.text-obsah strong { color: var(--text); }
.text-obsah ul { margin: 0 0 10px; padding-left: 20px; }
.text-obsah li { margin-bottom: 5px; }
.text-obsah a { color: var(--znacka); }

/* Časová osa harmonogramu. Čas vlevo, svislá linka, události vpravo —
   dá se přejet očima, na rozdíl od odstavce s časy v textu. */
.osa { list-style: none; margin: 0; padding: 0; position: relative; }
.osa::before {
  content: "";
  position: absolute;
  left: 58px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--linka);
}
.osa-bod {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 9px 0;
}
.osa-cas {
  flex: 0 0 46px;
  text-align: right;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  padding-top: 1px;
}
.osa-tecka {
  position: relative;
  z-index: 1;
  flex: none;
  width: 11px; height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--karta);
  border: 2px solid var(--linka);
}
.osa-telo { flex: 1; min-width: 0; line-height: 1.35; }
.osa-telo strong { display: block; font-size: 0.9375rem; }
.osa-telo .poznamka { display: block; margin-top: 2px; }

/* V den závodu appka zvýrazní, co je právě na řadě (dopočítá app.js). */
.osa-bod.ted .osa-tecka { background: var(--znacka); border-color: var(--znacka); }
.osa-bod.ted .osa-cas { color: var(--znacka); }
.osa-bod.probehlo { opacity: .5; }

/* Kontakty — v den závodu se volá, ne opisuje z odstavce. */
.kontakty { display: grid; gap: 12px; }
.kontakt { display: flex; gap: 12px; align-items: flex-start; }
.kontakt-iniciala {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--znacka) 16%, transparent);
  color: var(--znacka);
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
}
.kontakt-telo { flex: 1; min-width: 0; line-height: 1.35; }
.kontakt-role {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kontakt-akce { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5px; }
.kontakt-akce a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--znacka);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Seznam s ikonami — občerstvení, doprava. */
.seznam-ikony { list-style: none; margin: 0; padding: 0; }
.seznam-ikony li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linka);
  line-height: 1.35;
}
.seznam-ikony li:last-child { border-bottom: 0; }
.seznam-ikony > li > div { flex: 1; min-width: 0; }
.seznam-ikony strong { display: block; font-size: 0.9375rem; }
.seznam-ikona {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--znacka) 13%, transparent);
  color: var(--znacka);
}
.seznam-popisek {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* Krizové pokyny nesmí vypadat jako obyčejný odstavec. */
.karta.varovani {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: color-mix(in srgb, var(--krize) 10%, var(--karta));
  border-color: color-mix(in srgb, var(--krize) 35%, transparent);
}
.varovani-ikona {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--krize) 18%, transparent);
  color: var(--krize);
}
.varovani-telo { flex: 1; min-width: 0; }
.varovani-telo h2 { margin-bottom: 8px; }

/* --------------------------------------------------------- bloky obsahu */

.blok { padding: 0; overflow: hidden; }

.blok-hlava {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.blok-ikona {
  flex: none;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--znacka) 15%, transparent);
  color: var(--znacka);
}

.blok-hlava h2 { flex: 1; min-width: 0; }

.sipka {
  flex: none;
  color: var(--text-3);
  transition: transform .2s ease;
}
.blok.otevreny .sipka { transform: rotate(90deg); }

.blok-telo {
  padding: 0 16px 16px 64px;
  color: var(--text-2);
  white-space: pre-line;
}

/* ---------------------------------------------------------------- události */

.nadpis-sekce .odkaz-vic {
  margin-left: auto;
  color: var(--znacka);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
}

.filtry {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 0 14px;
  scrollbar-width: none;
}
.filtry::-webkit-scrollbar { display: none; }

.filtr {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--karta);
  border: 1px solid var(--linka);
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
}
.filtr.aktivni {
  background: var(--znacka);
  border-color: var(--znacka);
  color: #fff;
}

/* Plakátová karta — hlavní závody a nejbližší událost. */
.udalost-velka {
  display: block;
  margin-bottom: 14px;
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: var(--r-l);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, transform .14s ease;
}
.udalost-velka:hover {
  border-color: color-mix(in srgb, var(--znacka) 50%, transparent);
  transform: translateY(-2px);
}

.uv-obraz {
  position: relative;
  height: 168px;
  background-size: cover;
  background-position: center;
}
.uv-obraz::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%,
              color-mix(in srgb, var(--karta) 85%, transparent) 100%);
}

/* Datum jako lísteček nalepený na fotku — čte se dřív než název. */
.uv-datum {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pozadi) 78%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linka);
  font-variant-numeric: tabular-nums;
}
.uv-datum .den { font-size: 1.0625rem; font-weight: 800; }
.uv-datum .mesic {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-2);
}

.uv-telo { padding: 16px 18px 18px; }
.uv-telo h2 { margin: 5px 0 8px; font-size: 1.25rem; }

/* Popis zkrátíme na tři řádky — karta má lákat, ne vysvětlovat. */
.uv-popis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uv-udaje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--linka);
  font-size: 0.8125rem;
  color: var(--text-2);
}
.uv-udaje span { display: inline-flex; align-items: center; gap: 6px; }
.uv-udaje svg { color: var(--znacka); }

.udalost {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  margin-bottom: 10px;
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: var(--r-m);
  color: inherit;
  text-decoration: none;
  transition: border-color .14s ease, transform .12s ease;
}
.udalost:hover { border-color: color-mix(in srgb, var(--znacka) 45%, transparent); }
.udalost:active { transform: scale(.99); }

/* Datum jako trhací kalendář — nejrychleji čitelná informace na kartě. */
.udalost-datum {
  flex: none;
  width: 48px;
  padding: 7px 0;
  border-radius: 11px;
  text-align: center;
  background: color-mix(in srgb, var(--znacka) 15%, transparent);
  color: var(--znacka);
}
.udalost-datum.trenink {
  background: color-mix(in srgb, var(--uspech) 15%, transparent);
  color: var(--uspech);
}
.udalost-datum.akce {
  background: color-mix(in srgb, var(--varovani) 15%, transparent);
  color: var(--varovani);
}
.udalost-datum .den {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.udalost-datum .mesic {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.udalost-telo { flex: 1; min-width: 0; }
.udalost-telo h3 { margin: 3px 0 2px; }

.stitek-typ {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--znacka);
}
.stitek-typ.trenink { color: var(--uspech); }
.stitek-typ.akce    { color: var(--varovani); }

/* Proběhlé události ustupují do pozadí, ale zůstávají dostupné. */
.probehle { opacity: .62; }

/* Kompaktní seznam kategorií — jeden blok, řádek na kategorii,
   drobnosti pod názvem, tlačítko vpravo. Pět samostatných karet
   s plnou výškou se na mobilu neprolistuje. */
.karta-seznam { padding: 4px 16px 14px; }

.kat-radek {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linka);
}
.kat-radek:last-of-type { border-bottom: 0; }

.kat-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.kat-text strong { display: block; font-size: 0.9375rem; }
.kat-drobne {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tlacitko.maly {
  flex: 0 0 auto;
  width: auto;
  min-height: 34px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  border-radius: 8px;
}

/* Údaje v postranním panelu pod sebou, těsněji. */
.udaje-seznam { display: grid; gap: 12px; margin-top: 10px; }

.udaj { display: flex; align-items: flex-start; gap: 12px; }
.udaj-ikona {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--znacka) 14%, transparent);
  color: var(--znacka);
}
.udaj strong { font-size: 0.875rem; }
.udaj p { margin: 2px 0 0; }

/* -------------------------------------------------------- zprávy / historie */

.zprava {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linka);
}
.zprava:last-child { border-bottom: 0; }

.zprava-pruh {
  flex: none;
  width: 3px;
  border-radius: 3px;
  background: var(--text-3);
}
.zprava.krizova   .zprava-pruh { background: var(--krize); }
.zprava.organizacni .zprava-pruh { background: var(--varovani); }
.zprava.novinky   .zprava-pruh { background: var(--znacka); }

.zprava-telo { flex: 1; min-width: 0; }
.zprava-telo h3 { margin-bottom: 3px; }
.zprava-telo p { color: var(--text-2); font-size: 0.875rem; }
.zprava-kdy { color: var(--text-3); font-size: 0.75rem; }

.stitek {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stitek.krizova     { background: color-mix(in srgb, var(--krize) 18%, transparent); color: var(--krize); }
.stitek.organizacni { background: color-mix(in srgb, var(--varovani) 20%, transparent); color: var(--varovani); }
.stitek.novinky     { background: color-mix(in srgb, var(--znacka) 20%, transparent); color: var(--znacka); }

/* ------------------------------------------------------------------ články */

/* Celá kartička je odkaz, takže se musí zrušit barva a podtržení —
   jinak prohlížeč obarví a podtrhne i nadpis a perex uvnitř. */
.clanek {
  display: block;
  margin-bottom: 14px;
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: var(--r-l);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, transform .14s ease;
}
.clanek:hover {
  border-color: color-mix(in srgb, var(--znacka) 45%, transparent);
  transform: translateY(-2px);
}
.clanek:active { transform: scale(.995); }

/* Perex na tři řádky — kartička má nalákat, ne odvyprávět článek. */
.clanek .poznamka {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clanek-obraz {
  height: 170px;
  background-size: cover;
  background-position: center;
  background-color: var(--pozadi-2);
}
.clanek-telo { padding: 16px 18px 18px; }
.clanek-telo h2 { margin: 5px 0 8px; font-size: 1.1875rem; }
.clanek-kdy {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--znacka);
}

@media (min-width: 768px) {
  .clanek-obraz { height: 230px; }
}

/* ------------------------------------------------------- detail článku */

.clanek-hlavni-obraz {
  height: 200px;
  margin: 0 -14px;
  background-size: cover;
  background-position: center;
  background-color: var(--pozadi-2);
}
.clanek-hlavicka { padding: 18px 0 6px; }
.clanek-hlavicka h1 { margin-top: 6px; font-size: 1.5rem; }

/* Text článku. Přebíráme cizí obsah, takže tu nelze spoléhat na to,
   jaké značky přijdou — styluje se obecně, ne podle konkrétních tříd. */
.clanek-obsah { font-size: 1rem; line-height: 1.65; color: var(--text); }
.clanek-obsah p { margin: 0 0 14px; }
.clanek-obsah h2 { margin: 26px 0 10px; font-size: 1.25rem; }
.clanek-obsah h3 { margin: 22px 0 8px; font-size: 1.0625rem; }
.clanek-obsah h4 { margin: 18px 0 6px; font-size: 1rem; }
.clanek-obsah ul, .clanek-obsah ol { margin: 0 0 14px; padding-left: 22px; }
.clanek-obsah li { margin-bottom: 6px; }
.clanek-obsah a { color: var(--znacka); }
.clanek-obsah a.tlacitko { color: var(--text); text-decoration: none; }
.clanek-obsah img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
  margin: 16px 0;
}
.clanek-obsah figure { margin: 16px 0; }
.clanek-obsah figcaption {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.clanek-obsah blockquote {
  margin: 16px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--znacka);
  color: var(--text-2);
}
.clanek-obsah table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.clanek-obsah th, .clanek-obsah td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--linka);
  text-align: left;
}
.clanek-obsah details {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--pozadi-2);
  border-radius: var(--r-s);
}
.clanek-obsah summary { cursor: pointer; font-weight: 600; }

.clanek-pata {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 8px;
}
.clanek-pata .tlacitko { width: auto; flex: 1 1 auto; }

/* Galerie: vodorovné listování prstem, bez knihovny a bez JS.
   Elementorový swiper bez svého JavaScriptu nefunguje — tohle ano,
   a hlavně i offline. */
.galerie {
  display: flex;
  gap: 10px;
  margin: 16px -14px;
  padding: 0 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.galerie::-webkit-scrollbar { display: none; }
.galerie img {
  flex: 0 0 84%;
  margin: 0;
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Bez počitadla, teček a šipek není na řadě obrázků poznat, že se
   s ní dá hýbat — člověk uvidí jednu fotku a další si nenajde.
   Prvky doplňuje app.js, aby uložené HTML článku zůstalo jednoduché. */
.galerie-obal { position: relative; margin: 16px 0; }
.galerie-obal .galerie { margin: 0 -14px; padding: 0 14px; }

.galerie-pocitadlo {
  position: absolute;
  top: 10px; right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #000 62%, transparent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.galerie-tecky {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.galerie-tecky span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--linka);
  transition: background .18s ease, width .18s ease;
}
.galerie-tecky span.aktivni { width: 18px; border-radius: 3px; background: var(--znacka); }

.galerie-sipka {
  position: absolute;
  top: calc(50% - 24px);
  width: 36px; height: 36px;
  display: none;
  place-items: center;
  border: 1px solid var(--linka);
  border-radius: 50%;
  background: color-mix(in srgb, var(--karta) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.galerie-sipka.vlevo { left: 6px; }
.galerie-sipka.vpravo { right: 6px; }
.galerie-obal.na-zacatku .galerie-sipka.vlevo,
.galerie-obal.na-konci .galerie-sipka.vpravo { opacity: .35; }

/* Šipky jen tam, kde je myš — na mobilu se listuje prstem. */
@media (hover: hover) and (min-width: 768px) {
  .galerie-sipka { display: grid; }
}

@media (min-width: 768px) {
  .clanek-hlavni-obraz { height: 320px; margin: 0; border-radius: var(--r-l); }
  .clanek-hlavicka h1 { font-size: 2rem; }
  .clanek-obsah { font-size: 1.0625rem; }
  .galerie { margin: 16px 0; padding: 0; }
  .galerie img { flex: 0 0 48%; }
}

/* ------------------------------------------------------------ prázdný stav */

.prazdno {
  padding: 36px 20px;
  text-align: center;
  color: var(--text-3);
}
.prazdno svg { margin-bottom: 12px; opacity: .5; }

/* Načítací skeleton — ať appka nebliká prázdnotou, než dojdou data. */
.skeleton {
  height: 62px;
  border-radius: var(--r-m);
  margin-bottom: 12px;
  background: linear-gradient(90deg, var(--karta) 25%,
              var(--karta-vys) 50%, var(--karta) 75%);
  background-size: 200% 100%;
  animation: puls 1.4s ease-in-out infinite;
}
@keyframes puls {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------- navigace */

/*
 * Dvě navigace, jedna sada odkazů. Na mobilu je vidět jen spodní lišta,
 * od tabletu výš jen horní menu — appka se na telefonu ovládá palcem
 * odspodu, na počítači myší odshora. Přepíná se čistě v CSS.
 */

/* --- mobil: spodní lišta --- */
.lista {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  height: calc(var(--lista) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--pozadi-2) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--linka);
}

.lista a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-3);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 600;
}
.lista a.aktivni { color: var(--znacka); }
.lista a:active { opacity: .6; }

/* --- desktop: hlavička s vodorovným menu --- */
.hlavicka { display: none; }

.hlavicka-vnitrek {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.znacka {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Selektory musí mít stejnou specificitu jako `.znacka img`, jinak je
   pravidlo o skrývání nepřebije a v hlavičce svítí obě loga naráz. */
.znacka img { height: 34px; width: auto; display: block; }
.znacka img.logo-tmave { display: none; }
@media (prefers-color-scheme: dark) {
  .znacka img.logo-svetle { display: none; }
  .znacka img.logo-tmave { display: block; }
}

.menu-nahore { display: flex; gap: 4px; }

.menu-nahore a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background .14s ease, color .14s ease;
}
.menu-nahore a:hover { background: var(--karta); color: var(--text); }
.menu-nahore a.aktivni {
  background: color-mix(in srgb, var(--znacka) 15%, transparent);
  color: var(--znacka);
}
.menu-nahore svg { width: 17px; height: 17px; }

@media (min-width: 768px) {
  body { padding-bottom: 40px; }

  .lista { display: none; }

  .hlavicka {
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--pozadi-2) 92%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linka);
  }

  .obsah { max-width: 820px; padding: 0 24px 40px; }

  /* Hero už nesedí pod výřezem telefonu, ale pod hlavičkou. */
  .hero {
    margin: 20px 0 12px;
    padding: 36px 32px 32px;
    border-radius: var(--r-l);
    border: 1px solid var(--linka);
  }
  .hero::after { display: none; }
  .hero h1 { font-size: 2.5rem; }

  .odpocet-cislo { font-size: 2rem; }

  .pruh-offline { bottom: 20px; left: auto; right: 20px; }

  .karta { padding: 20px; }

  /* Tlačítka na širokém plátně nemají důvod být přes celou šířku. */
  .tlacitko { width: auto; }
  .tlacitko.siroke { width: 100%; }
}

@media (min-width: 1024px) {
  .obsah { max-width: 1040px; }

  /* Dva sloupce: širší obsah, užší postranní panel. Jeden sloupec textu
     uprostřed velkého monitoru vypadá jako nedodělaná appka. */
  .rozvrzeni {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  /* Postranní panel jde s obsahem, ale zůstane na očích při rolování. */
  .sloupec-vedlejsi {
    position: sticky;
    top: 86px;
  }

  .mrizka {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-items: start;
  }
  .mrizka > .karta { margin-bottom: 0; }

  .uv-obraz { height: 230px; }
  .uv-telo h2 { font-size: 1.5rem; }
}

/* ---------------------------------------------------- postranní panely */

.nadpis-panelu {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Loga partnerů. Vždy na bílé dlaždici — loga jsou dělaná pro bílý
   podklad a na tmavém režimu by se rozpadla (tmavé nápisy, průhlednost). */
.logo-partnera {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: 10px;
  transition: border-color .14s ease, transform .12s ease;
}
.logo-partnera img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
a.logo-partnera:hover {
  border-color: color-mix(in srgb, var(--znacka) 45%, transparent);
  transform: translateY(-1px);
}
.logo-partnera.velke { aspect-ratio: 5 / 2; padding: 18px 24px; }
.logo-partnera.mini {
  flex: none;
  width: 60px;
  height: 42px;
  aspect-ratio: auto;
  padding: 5px 7px;
  border-radius: 7px;
}

.loga-mrizka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.loga-mrizka.velka { grid-template-columns: 1fr; }

.partner-role {
  margin: 12px 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.partner-generalni { display: block; color: inherit; text-decoration: none; }
.partner-generalni .partner-role { text-align: center; margin-top: 8px; }
.partner-vsichni { display: inline-block; margin-top: 12px; font-size: 0.8125rem; }

@media (min-width: 768px) {
  .loga-mrizka { grid-template-columns: repeat(4, 1fr); }
  .sloupec-vedlejsi .loga-mrizka { grid-template-columns: repeat(3, 1fr); }
}

/* Vstup pro organizátory dole v Info. Nenápadný, ale je poznat, že se
   na něj dá kliknout — v šedé patičce ho nenašel ani majitel appky. */
.vstup-organizatori { margin-top: 22px; padding: 0; }
.vstup-organizatori a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}
.vstup-ikona {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--karta-vys);
  color: var(--text-3);
}
.vstup-text { flex: 1; min-width: 0; line-height: 1.3; }
.vstup-text strong { display: block; font-size: 0.9375rem; }
.vstup-organizatori:hover {
  border-color: color-mix(in srgb, var(--znacka) 40%, transparent);
}
.vstup-organizatori:hover .vstup-ikona { color: var(--znacka); }

/* Pruh pro přihlášeného organizátora nahoře v appce: kde je a cesta
   zpátky do administrace. Veřejnost ho nikdy neuvidí. Tmavý, ať se
   neplete s obsahem appky. */
/* Nepřilepený: na mobilu by i se simulací zabral třetinu obrazovky. */
.pruh-organizator {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: #212121;
  color: #d8d8d8;
  font-size: 0.8125rem;
}
.pruh-organizator svg { vertical-align: -2px; }
.pruh-organizator strong { color: #fff; }
.pruh-organizator a { color: #fff; font-weight: 600; text-decoration: underline; }

/* ------------------------------------------------------ skupiny a nástěnka */

/* Z pozvánky: pole pro přidání se musí okamžitě najít. */
.skupina-box.zvyraznena {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akce) 45%, transparent);
}
.skupina-box h2 svg { vertical-align: -2px; color: var(--uspech); }
.skupina-box .tlacitko { margin-top: 12px; }
.skupina-box .chyba { margin-top: 10px; }
.poznamka.drobne { font-size: 0.75rem; margin-top: 8px; }
.cekam {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--varovani) 16%, transparent);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.cekam svg { vertical-align: -2px; }

.kroky {
  margin: 8px 0 4px;
  padding-left: 20px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-2);
}
.kroky li + li { margin-top: 4px; }
.kroky svg { vertical-align: -2px; }

.nastenka { padding-top: 4px; padding-bottom: 4px; }
.prazdno-radek { margin: 12px 0; }
.starsi-zpravy summary {
  padding: 12px 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--znacka);
}
.zprava-telo h3 { margin-top: 6px; }
.zprava-komu {
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--text-3);
}

.moje-skupiny .karta-seznam { margin-bottom: 16px; }
.skupina-radek {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linka);
  color: inherit;
  text-decoration: none;
}
.skupina-radek:last-child { border-bottom: 0; }
.skupina-radek .sipka { color: var(--text-3); }

/* Podpis autora — má být vidět, ne křičet. */
.podpis {
  margin: 28px 0 8px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-3);
}
.podpis a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--linka);
}
.podpis a:hover { color: var(--znacka); border-bottom-color: var(--znacka); }

/* ------------------------------------------------------------------ pruhy */

.pruh-offline {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--lista) + env(safe-area-inset-bottom) + 12px);
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--karta-vys);
  border: 1px solid var(--linka);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  font-size: 0.8125rem;
  font-weight: 600;
}

.chyba {
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--akce) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--akce) 35%, transparent);
  color: var(--text);
  font-size: 0.875rem;
}

/* =========================================================== administrace ==
   Administrace je vlastní prostředí, ne další stránka appky: vlastní
   hlavička, vlastní menu, žádná spodní lišta pro běžce. Organizátor tu
   pracuje u počítače, ne za běhu na trati. */

body.admin { padding-bottom: 40px; }

/* Potvrzení po akci (uloženo, odesílá se…). */
.hlaska {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--uspech) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--uspech) 35%, transparent);
  font-size: 0.875rem;
}
.hlaska svg { flex: none; color: var(--uspech); }

.pod-polem { margin: -8px 0 14px; }
.hlava-akce { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.tlacitka-radek { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.radek-kopirovat { display: flex; gap: 8px; align-items: flex-start; }
.radek-kopirovat .pole { flex: 1; min-width: 0; }
.radek-kopirovat .tlacitko { margin-top: 2px; }

.clanky-k-oznameni {
  margin: 14px 0 4px;
  padding: 0 12px;
  border: 1px solid var(--linka);
  border-radius: 12px;
}
.clanky-k-oznameni summary {
  padding: 11px 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}
.clanek-vybrany {
  margin: -4px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--karta-vys);
}

/* Řádky bloku: čas/role, název, podrobnost — na mobilu pod sebou. */
.radky-bloku { margin: 4px 0 10px; }
.radky-hlavicka { display: none; }
.radek-bloku {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--linka);
}
.radek-bloku .pole { margin: 0; }
.smazat-radek { font-weight: 400; color: var(--text-3); font-size: 0.8125rem; }
.pole-s-popiskem { display: block; }
.pole-s-popiskem .pole { margin-top: 6px; }
@media (min-width: 760px) {
  .radky-hlavicka {
    display: grid;
    grid-template-columns: 110px 1fr 1.3fr 70px;
    gap: 8px;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-3);
  }
  .radek-bloku {
    grid-template-columns: 110px 1fr 1.3fr 70px;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
  }
  /* Kontakty mají o sloupec víc: role, jméno, telefon, e-mail. */
  .radek-bloku.typ-kontakty { grid-template-columns: 130px 1fr 0.8fr 1fr 70px; }
  .radek-bloku.typ-seznam,
  .radek-bloku.typ-trasa { grid-template-columns: 90px 1fr 1.3fr 130px 70px; }
  .radek-bloku.typ-vlny { grid-template-columns: 90px 140px 1fr 70px; }
  .radek-bloku.typ-karty { grid-template-columns: 120px 1fr 1.6fr 130px 70px; }
  .radek-bloku.typ-otazky { grid-template-columns: 1fr 1.8fr 70px; }
}

/* Když už člověk zprávy odebírá, pole se zklidní — nic mu nenabízí. */
.skupina-box.je-clen {
  background: var(--karta);
  border-color: var(--linka);
}
.skupina-box.je-clen .ikona {
  background: color-mix(in srgb, var(--uspech) 16%, transparent);
  color: var(--uspech);
}

.vysvetlivky p { margin: 0 0 6px; font-size: 0.875rem; color: var(--text-2); }
.vysvetlivky p:last-child { margin-bottom: 0; }
.kat-radek.vypnuty .kat-text { opacity: 0.55; }

.admin-lista {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--pozadi-2);
  border-bottom: 1px solid var(--linka);
}
.admin-lista-vnitrek {
  max-width: 1060px;
  margin: 0 auto;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 20px;
}

.admin-znacka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.admin-znacka svg { color: var(--znacka); }

/* Menu na mobilu: vodorovně posuvná řada přes celou šířku pod hlavičkou.
   Zalamující se odkazy dělaly na telefonu tři řádky a nešly trefit. */
.admin-menu {
  grid-column: 1 / -1;
  order: 3;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -14px;
  padding: 2px 14px 0;
}
.admin-menu::-webkit-scrollbar { display: none; }
.admin-menu a { flex: none; white-space: nowrap; }
.admin-menu a {
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
}
.admin-menu a:hover { background: var(--karta); color: var(--text); }
.admin-menu a.aktivni {
  background: color-mix(in srgb, var(--znacka) 14%, transparent);
  color: var(--znacka);
}

.admin-vpravo {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
}
/* Na úzkém displeji zůstane u návratu jen ikona a u uživatele odhlášení. */
.admin-zpet span { display: none; }
.admin-kdo-jmeno { display: none; }
.admin-zpet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--linka);
  border-radius: 8px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
}
.admin-zpet:hover { border-color: var(--znacka); color: var(--znacka); }
.admin-kdo { color: var(--text-3); }
.admin-kdo a { color: var(--text-3); }

.admin-obsah {
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

.drobecky { margin: 0 0 6px; font-size: 0.8125rem; color: var(--text-3); }
.drobecky a { color: var(--text-2); text-decoration: none; }

/* Rozcestník na přehledu — kam se odsud dá jít. */
.admin-dlazdice { display: grid; gap: 12px; margin-bottom: 8px; }
.dlazdice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: inherit;
  text-decoration: none;
}
.dlazdice:hover { border-color: color-mix(in srgb, var(--znacka) 45%, transparent); }
.dlazdice > div { flex: 1; min-width: 0; line-height: 1.35; }
.dlazdice strong { display: block; font-size: 0.9375rem; }
.dlazdice-ikona {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--znacka) 14%, transparent);
  color: var(--znacka);
}

/* Skupina polí, které patří k sobě — „komu" a „kam" je jedna otázka,
   ne tři nesouvisející řádky pod sebou. */
.skupina {
  margin: 4px 0 18px;
  padding: 14px 16px 4px;
  border: 1px solid var(--linka);
  border-radius: 10px;
  background: var(--pozadi-2);
}
.skupina legend {
  padding: 0 6px;
  font-family: var(--display, inherit);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Formuláře schované do rozbalení — jinak je z administrace stěna polí. */
.skryty-formular {
  border-color: color-mix(in srgb, var(--znacka) 35%, transparent);
}
.skryty-formular.vnoreny {
  padding: 14px 0 4px;
  border-top: 1px solid var(--linka);
}

.doruceno {
  flex: none;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.nebezpecna-zona {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  border-color: color-mix(in srgb, var(--krize) 30%, transparent);
}
.nebezpecna-zona > div { flex: 1; min-width: 0; }
.tlacitko.nebezpecne { background: var(--krize); }

/* Nenápadná textová akce (smazat, skrýt) — nesmí vypadat jako hlavní
   tlačítko, ať se po ní nesahá omylem. */
.odkaz-smazat {
  background: none;
  border: 0;
  padding: 6px 0 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-3);
  text-decoration: underline;
  cursor: pointer;
}
.odkaz-smazat:hover { color: var(--krize); }

@media (min-width: 760px) {
  .admin-lista-vnitrek {
    padding: 0 20px;
    min-height: 58px;
    grid-template-columns: auto 1fr auto;
  }
  .admin-menu {
    grid-column: auto;
    order: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .admin-zpet span { display: inline; }
  .admin-kdo-jmeno { display: inline; }

  .admin-dlazdice { grid-template-columns: repeat(3, 1fr); }
  .admin-sloupce {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
}

/* --------------------------------------------------- staré prvky administrace */

.admin-hlava {
  padding: calc(env(safe-area-inset-top) + 20px) 0 6px;
}

.metriky { display: flex; gap: 10px; margin-bottom: 12px; }

.metrika {
  flex: 1;
  padding: 14px;
  border-radius: var(--r-m);
  background: var(--karta);
  border: 1px solid var(--linka);
}
.metrika .cislo {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.metrika .popis { font-size: 0.75rem; color: var(--text-3); }

.sablony { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sablony .tlacitko { width: auto; min-height: 40px; padding: 8px 14px;
                     font-size: 0.8125rem; }

.tabulka { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tabulka th, .tabulka td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--linka);
}
.tabulka th {
  color: var(--text-3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

/* ============================================================ závodní den ==
   Úvod v den závodu: velký stav, zpráva od pořadatelů, teď a další,
   přepínač Běžím / Fandím. Pořadí karet řídí --b (běžec) a --f (fanoušek)
   přes CSS order — přepínač tak nic neschová, jen přeskládá. */

.zd-stav {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--karta) 86%, transparent);
  border: 1px solid var(--linka);
  backdrop-filter: blur(6px);
}
.zd-stav-popis {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.zd-stav-cas {
  display: block;
  margin: 2px 0;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--akce);
}
.zd-stav-dalsi { display: block; font-size: 0.875rem; color: var(--text-2); }

.zd-zprava .zprava { padding-top: 8px; }
.zd-zprava.krizova {
  border-color: color-mix(in srgb, var(--krize) 55%, transparent);
  background: color-mix(in srgb, var(--krize) 9%, var(--karta));
}

.zd-ted { display: grid; gap: 10px; }
.zd-ted-radek { display: flex; gap: 12px; align-items: baseline; }
.zd-ted-radek strong { font-size: 1rem; }
.zd-ted-stitek {
  flex: none;
  min-width: 52px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--akce);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.zd-ted-stitek.dalsi { background: var(--karta-vys); color: var(--text-2); }

.zd-prepinac {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 4px 0 14px;
  padding: 4px;
  border-radius: 14px;
  background: var(--karta-vys);
}
.zd-prepinac button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.zd-prepinac button[aria-pressed="true"] {
  background: var(--karta);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.zd-obsah { display: flex; flex-direction: column; gap: 0; }
.zd-obsah > * { order: var(--b); }
.zd-obsah[data-rezim-obsah="fandim"] > * { order: var(--f); }

.zd-dlazdice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.zd-dlazdice a {
  order: var(--b);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 10px 6px;
  border-radius: var(--r-s);
  background: var(--karta);
  border: 1px solid var(--linka);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}
.zd-dlazdice a svg { color: var(--akce); }
.zd-obsah[data-rezim-obsah="fandim"] .zd-dlazdice a { order: var(--f); }
.zd-dlazdice a.zd-vysledky { background: var(--akce); border-color: var(--akce); color: #fff; }
.zd-dlazdice a.zd-vysledky svg { color: #fff; }

.zd-muj-start label { margin-top: 10px; display: block; }
.zd-muj-start .pole { margin-top: 6px; }
.zd-stan {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--uspech) 14%, transparent);
  font-weight: 600;
}

.zd-okno { display: block; margin-top: 3px; font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.bod-trasy.ted .zd-okno { color: var(--akce); }
.bod-trasy.probehlo { opacity: .55; }

.zd-partner {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 8px 0 0;
  text-decoration: none;
}
.zd-partner .logo-partnera { width: min(320px, 100%); }

/* --------------------------------------------------- detail: údaje, stav */

.cipy { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--karta) 85%, transparent);
  border: 1px solid var(--linka);
  font-size: 0.8125rem;
  font-weight: 600;
}
.cip.vyprodano, .stitek-stav {
  background: var(--text);
  border-color: var(--text);
  color: var(--pozadi);
}
.stitek-stav {
  flex: none;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.tlacitko.stav-registrace { cursor: default; opacity: .8; }

/* ------------------------------------------------------ nové typy bloků */

.blok-obrazek {
  position: relative;
  display: block;
  margin: 4px 0 12px;
  border-radius: var(--r-s);
  overflow: hidden;
  border: 1px solid var(--linka);
  background: #fff;
}
.blok-obrazek img { display: block; width: 100%; height: auto; }
.blok-obrazek-popis {
  position: absolute;
  right: 8px; bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(33, 33, 33, .78);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.body-trasy { list-style: none; margin: 0 0 4px; padding: 0; position: relative; }
.body-trasy::before {
  content: "";
  position: absolute;
  left: 73px; top: 12px; bottom: 12px;
  width: 2px;
  background: color-mix(in srgb, var(--akce) 35%, transparent);
}
.bod-trasy { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.bod-km {
  flex: none;
  width: 54px;
  padding-top: 3px;
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.bod-znacka {
  position: relative;
  z-index: 1;
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--karta);
  border: 2px solid var(--akce);
  color: var(--akce);
}
.bod-trasy.vystraha .bod-znacka { border-color: var(--varovani); color: var(--varovani); }
.bod-trasy.zavod .bod-znacka { background: var(--akce); color: #fff; }
.bod-trasy > div { flex: 1; min-width: 0; line-height: 1.35; }
.bod-trasy strong { display: block; font-size: 0.9375rem; }

.vlny { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.vlna {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: var(--r-s);
  background: var(--karta-vys);
  text-align: center;
}
.vlna-pismeno {
  justify-self: center;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--akce);
  color: #fff;
  font-weight: 800;
}
.vlna-cas { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.vlna-kdo { font-size: 0.75rem; color: var(--text-3); line-height: 1.25; }

.karticky { display: grid; gap: 10px; }
@media (min-width: 620px) { .karticky { grid-template-columns: 1fr 1fr; } }
.karticka {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-s);
  background: var(--karta-vys);
}
.karticka-ikona {
  flex: none;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--akce) 16%, transparent);
  color: var(--akce);
}
.karticka strong { display: block; font-size: 0.9375rem; }
.karticka-stitek {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--karta);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-2);
}
.karticka .poznamka { margin: 4px 0 0; }

.otazky { display: grid; }
.otazka { border-bottom: 1px solid var(--linka); }
.otazka:last-child { border-bottom: 0; }
.otazka summary {
  padding: 12px 0;
  cursor: pointer;
  font-weight: 600;
  list-style-position: inside;
}
.otazka[open] summary { color: var(--akce); }
.otazka .text-obsah { padding: 0 0 12px; }

/* ------------------------------------------ simulace dne (jen organizátor) */

.simulace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.simulace button {
  padding: 4px 10px;
  border: 1px solid #555;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.simulace button.aktivni { background: var(--akce); border-color: var(--akce); }

/* Obrázek bloku v administraci */
.obrazek-bloku { display: grid; gap: 6px; margin: 4px 0 12px; }
.obrazek-bloku img { max-width: 240px; border-radius: 8px; border: 1px solid var(--linka); }
.obrazek-bloku label { font-weight: 600; }