@charset "UTF-8";
/* ČŠO — vzhled soutěžního webu.
 *
 * Rozvržení vychází ze stolnytenis.info, který si federace vybrala jako
 * vzor: světle šedá plocha, na ní bílé karty se zaoblenými rohy, tabulka
 * vždy uvnitř karty a s barevným pruhem místo hlavičky, nad obsahem
 * drobečková navigace a vlevo seznam soutěží, ve kterém je vidět, kde
 * člověk zrovna je. Barva je červená, ne modrá.
 *
 * Systémové písmo, žádný build, žádné stahované fonty.
 */

:root {
  --red: #c1121f;
  --red-deep: #96101a;
  --red-dark: #6d0b13;
  --red-tint: #fcf0f1;
  --green: #1a6b46;
  --amber: #9a6212;

  --ink: #1e2126;
  --ink-soft: #454b54;
  --muted: #6b727c;
  --line: #e3e6ea;
  --line-soft: #eef0f3;
  --page: #f2f3f5;
  --card: #ffffff;
  --hover: #f7f8fa;

  --on-red: #ffffff;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(30, 33, 38, .06), 0 1px 3px rgba(30, 33, 38, .04);
}

* { box-sizing: border-box; }

/* Atribut `hidden` musí schovávat i to, čemu jsme sami nastavili `display`.
   Prohlížeč ho zařizuje pravidlem `[hidden] { display: none }` ve svém
   výchozím stylu, jenže to je slabší než jakékoli pravidlo odsud — a
   `button { display: inline-block }` níž ho přebije. Odeslání karty se pak
   `hidden` označí a stejně je vidět. */
[hidden] { display: none !important; }

/* Sloupec přes celou výšku okna, aby patička na krátké stránce klesla ke dnu.
   Bez toho končí přihlašovací formulář v horní třetině a pod patičkou zůstane
   pruh prázdné šedi — vypadá to, jako by se stránka nedonačetla.

   `dvh` kvůli mobilům: `100vh` tam počítá s plnou výškou i ve chvíli, kdy je
   vidět lišta prohlížeče, a patička by o ten kus přesahovala pod okraj. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font: 15px/1.55 var(--font);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red-deep); text-underline-offset: 2px; }
a:hover { color: var(--red); }

/* --- horní lišta -------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.25rem;
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Lišta se od stránky odděluje barvou, ne linkou. Ta vedla přes celou šířku a
   rozbalená nabídka do ní shora zajížděla, takže se čára lámala přes její horní
   hranu a vypadala jako oddělovač uvnitř nabídky. Bílá na šedé ploše stačí. */

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink);
}

/* Znak svazu. Výška se drží lišty, šířka se dopočítá — znak je vyšší než
   širší, takže pevná šířka by ho zdeformovala. */
.brand img { height: 2.1rem; width: auto; flex: none; display: block; }

.topbar nav { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }

.topbar nav a,
.topbar .link {
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}

.topbar nav a:hover, .topbar .link:hover { color: var(--red); }

.user { color: var(--muted); font-size: .87rem; white-space: nowrap; }

/* Přihlašovací adresa je celý e-mail a v liště, kde teď stojí dvě rozbalovátka
   s ikonou, se pod 48 rem zlomí na dva řádky a lištu tím zvýší. Kdo je
   přihlášený, pozná to i podle „Odhlásit“ vedle. */
@media (max-width: 48rem) {
  .user { display: none; }
}

.inline { display: inline; }

.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ink-soft); }

/* --- drobečky a rozvržení ---------------------------------------------- */

/* `1 0 auto`, ne `1`: základem zůstane výška obsahu, takže dlouhá stránka se
   chová jako dosud a jen ta krátká se roztáhne.

   `width: 100%` je nutnost, ne pojistka. Ve sloupcovém flexu se roztažení na
   celou šířku ruší, jakmile má prvek `auto` okraj — a ty tu jsou od začátku,
   kvůli centrování. Bez šířky by se <main> smrštil na šířku obsahu: úzká karta
   kontaktu by strhla doprostřed i drobečkovou navigaci nad sebou. */
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem 4rem;
}

.crumbs {
  font-size: .86rem;
  color: var(--muted);
  margin: 0 0 .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red); text-decoration: underline; }
/* Oddělovač zapsaný escapem, ne znakem: soubor je UTF-8, ale Django ho
   servíruje jako "text/css" bez charsetu, a bez @charset výš si prohlížeč
   bajty E2 80 BA přečetl po jednom jako latin-1 a vykreslil "›".
   @charset to spraví; escape navíc znamená, že tenhle glyf na kódování
   souboru nezávisí vůbec. */
.crumbs span::before { content: "\203A"; margin-right: .4rem; color: var(--muted); opacity: .55; }
.crumbs span:first-child::before { content: none; }

/* Vlevo seznam soutěží, vpravo obsah. Na užší obrazovce jde seznam nad něj. */
/* minmax(0, 1fr), ne prosté 1fr: „1fr“ znamená minmax(auto, 1fr) a to auto
   nedovolí sloupci zúžit se pod min-content šířku svého obsahu. Tabulka
   výsledků má min-width 34rem, takže na telefonu roztáhla celý sloupec i
   stránku na 546 px v 375px okně a karta vylezla z obrazovky. Nula jako
   minimum dovolí sloupci se zmenšit a posouvání nechá na .scroll-x, kam
   patří. */
.layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }

@media (max-width: 62rem) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

/* --- karta -------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 0 0 1.1rem;
}

.card-head {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}

.card-head h2, .card-head h1 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.card-head p { margin: .15rem 0 0; font-size: .87rem; color: var(--muted); }

.card-body { padding: 1.1rem; }

/* --- postranní seznam soutěží ------------------------------------------ */

.side-list { list-style: none; margin: 0; padding: .5rem 0; }

.side-list li { position: relative; }

.side-list a {
  display: block;
  padding: .42rem 1rem .42rem 1.75rem;
  font-size: .9rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 3px solid transparent;
}

/* Tečka na spojnici, ať je vidět, kde v seznamu člověk stojí. */
.side-list a::before {
  content: "";
  position: absolute;
  left: .72rem;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
}

.side-list a:hover { background: var(--hover); color: var(--red); }

.side-list a.is-current {
  color: var(--red-deep);
  font-weight: 600;
  background: var(--red-tint);
  border-left-color: var(--red);
}

.side-list a.is-current::before { border-color: var(--red); background: var(--red); }

.side-group { padding: .55rem 1.1rem .2rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* --- pruh přepínačů ----------------------------------------------------- */

/* Jen rozvržení pruhu; vzhled samotných záložek si nese `.tabs-soutez` níž.
   Dřív tu bylo i `.tabs a { … }` a `.tabs a.is-current { … }`, jenže nabídka
   otevřené záložky leží uvnitř `.tabs`, takže ta pravidla obarvila i položky
   v ní: vybraná byla celý červený pruh přes celou nabídku a ostatní dostaly
   rámeček a stín jako tlačítka. Potomkovský selektor si nevybírá, kam až
   doleze. */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }

/* Hlavička karty s tlačítkem vpravo — „Nový tým“, „Registrovat hráče“. */
.card-head.row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Přihlášení, registrace a formuláře nepotřebují celou šířku stránky. */
.narrow { max-width: 32rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; }
.actions form { margin: 0; }

.meta { color: var(--muted); font-size: .89rem; margin: .15rem 0 0; }

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.list-plain li:last-child { border-bottom: 0; }

.note { color: var(--muted); font-size: .89rem; }

/* Skóre utkání: velké číslo a pod ním, komu patří. */
.scoreline { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }

/* Drobný nadpis nad skupinou odkazů nebo tabulkou — „1. liga“ nad svými
   skupinami na úvodu, pásmo účasti v žebříčku. Nese míň váhy než h2: dělí
   obsah, nezačíná nový. */
.strip-label {
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- záložky soutěže ----------------------------------------------------- */

/* Ikona nad názvem a nabídka pod tou otevřenou — uspořádání podle vzoru
   (stolnytenis.info). Nečinná záložka je prostý odkaz, aby se dala přepnout
   jedním kliknutím; teprve ta současná rozbaluje své pohledy, protože varianty
   se hledají až tam, kde člověk zrovna stojí. */
.tabs-soutez { align-items: stretch; }

.tabs-soutez > a,
.tabs-soutez > .tab-menu > summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 6.5rem;
  padding: .55rem .85rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.tabs-soutez svg { width: 1.35rem; height: 1.35rem; }
.tabs-soutez > a:hover { border-color: var(--red); color: var(--red); }

.tab-menu { position: relative; }
.tab-menu > summary::-webkit-details-marker { display: none; }
.tab-menu > summary::marker { content: ""; }

/* Vybraná záložka je červená jako dřív `.tabs a.is-current` — je to totéž
   sdělení, jen k němu přibyla nabídka.

   Selektor musí jít přes `.tabs-soutez`, i když by `.tab-menu > summary` samo
   o sobě stačilo trefit. Rozvržení pár řádků výš je zapsané jako
   `.tabs-soutez > .tab-menu > summary`, tedy (0,2,1), a kratší zápis má
   (0,1,1) — prohrál by, i když stojí níž. Pozdější pravidlo vyhrává jedině
   mezi stejně silnými selektory. Přesně tohle se stalo: barva se nepropsala
   a vybraná záložka vypadala k nerozeznání od ostatních. */
.tabs-soutez > .tab-menu > summary {
  background: var(--red);
  border-color: var(--red);
  color: var(--on-red);
}

/* Šipka dolů jen u té, která má co rozbalit. */
.tab-menu > summary::after {
  content: "";
  width: .34rem;
  height: .34rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.1rem);
  opacity: .85;
}

.tab-menu[open] > summary::after { transform: rotate(-135deg) translateY(-.15rem); }
.tab-menu > .dropdown-menu { top: calc(100% + .35rem); }

/* Nadpis oddílu uvnitř nabídky — „Rozpis týmu“ nad seznamem týmů. Linka nad
   ním odděluje pohledy na celou soutěž od výběru jednoho týmu.

   Vlastní jméno, ne `.dropdown-label`: tak se totiž jmenuje drobný popisek
   v hlavičce rozbalovátka („Sezóna“ nad ročníkem). Když to jméno dostal i
   tenhle nadpis, spadla jeho linka a verzálky i na lištu. */
.menu-group {
  margin-top: .3rem;
  padding: .5rem .55rem .2rem;
  border-top: 1px solid var(--line-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Vybraný tým v jeho vlastním rozpisu. Je na každém řádku, takže bez vyznačení
   nejde poznat, které utkání hraje doma a které venku. */
.schedule .is-picked { font-weight: 700; }

/* --- kapitán soupisky ---------------------------------------------------- */

/* Kapitán se hledá v seznamu jmen, ne v hlavičce nad ním. Značka nese slovo,
   ne jen barvu — na soupisce o šesti jménech by se odstín dal přehlédnout a
   pro čtečku by neznamenal nic. */
.captain-tag {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--red-tint);
  border: 1px solid #f2d3d5;
  color: var(--red-deep);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

tbody tr.is-captain { background: var(--red-tint); }
tbody tr.is-captain td:first-child { font-weight: 600; }

.actions-cell { white-space: nowrap; }
.actions-cell form + form { margin-left: .7rem; }

:root[data-theme="dark"] .captain-tag { border-color: #5a2b30; }

/* --- rejstříky ----------------------------------------------------------- */

.hledani { display: flex; align-items: center; gap: .4rem; margin: 0; flex-wrap: wrap; }

/* Pole nesmí dědit `width: 100%` od obyčejného inputu — v hlavičce karty stojí
   vedle nadpisu, ne nad vlastním popiskem. */
.hledani input { width: 13rem; max-width: 100%; padding: .4rem .55rem; font-size: .9rem; }
.hledani button { padding: .42rem .8rem; font-size: .9rem; }
.hledani-zrusit { font-size: .87rem; color: var(--muted); }

.strankovani {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  border-top: 1px solid var(--line-soft);
  padding: .7rem 1.1rem;
  font-size: .9rem;
}

/* --- žebříček jednotlivců ------------------------------------------------ */

.uspesnost { min-width: 46rem; }
.uspesnost tbody td:first-child { color: var(--muted); width: 2.75rem; }
.uspesnost tbody td:nth-child(2) { font-weight: 600; white-space: nowrap; }
.uspesnost tbody td:nth-child(3) { color: var(--muted); white-space: nowrap; }
/* Účast je kontext k procentu vedle, ne výsledek — nese proto míň váhy. */
.uspesnost tbody td:nth-child(9) { color: var(--muted); }
.uspesnost tbody tr:first-child { background: var(--red-tint); }
.uspesnost tbody tr:first-child td:first-child { color: var(--red-deep); font-weight: 700; }

/* Předěl mezi pásmy účasti. Je uvnitř karty, aby bylo vidět, že jde pořád o
   tentýž žebříček, jen o jeho druhou půlku. */
.split-note { border-top: 1px solid var(--line); background: var(--hover); }
.split-note .strip-label { margin-bottom: .2rem; }
.split-note p:last-child { margin: 0; }

/* --- nadpisy ------------------------------------------------------------ */

h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .8rem; }
h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1rem; font-weight: 700; margin: 0; }

/* --- tabulky ------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

/* Barevný pruh místo hlavičky — to je na vzoru to nejnápadnější. */
thead th {
  background: var(--red);
  color: var(--on-red);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  padding: .6rem .7rem;
  white-space: nowrap;
}

thead th:first-child { padding-left: 1.1rem; }
thead th:last-child { padding-right: 1.1rem; }

tbody td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .92rem;
}

tbody td:first-child { padding-left: 1.1rem; }
tbody td:last-child { padding-right: 1.1rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--hover); }

/* Tabulka soutěže: pořadí, tučné body, vedoucí tým podbarvený. */
.standings tbody td:first-child { color: var(--muted); width: 2.75rem; }
.standings tbody td:last-child { font-weight: 700; }
.standings tbody tr:first-child { background: var(--red-tint); }
.standings tbody tr:first-child td:first-child { color: var(--red-deep); font-weight: 700; }
.standings tbody td:nth-child(2) { white-space: nowrap; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tabulka na úzké obrazovce posouvá, nikdy neláme jméno týmu. Minimální
   šířka je jiná pro devítisloupcovou tabulku a pro šestisloupcový rozpis —
   jedno číslo pro obojí buď rozpis mačká, nebo tabulce dělá zbytečný posun. */
.scroll-x table { min-width: 34rem; }
.scroll-x table.schedule { min-width: 44rem; }

/* Kolo jako nadpis nad svými řádky, ne sloupec opakovaný na každém z nich. */
.schedule tbody tr.round-row th {
  background: var(--hover);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  padding: .5rem 1.1rem;
  text-align: left;
  font-weight: 400;
}

.schedule tbody tr:first-child.round-row th { border-top: 0; }

.round-pill {
  display: inline-block;
  margin-right: .5rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--on-red);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Táž geometrie jako na detailu utkání a na zápisové kartě: domácí zprava ke
   skóre, hosté zleva od něj. */
.schedule .side-home { text-align: right; }
.schedule .side-away { text-align: left; }
.schedule .legs-head { text-align: center; width: 7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.schedule .is-winner { font-weight: 700; color: var(--red-deep); }
.schedule tbody td:nth-child(3),
.schedule tbody td:nth-child(4) { white-space: nowrap; }

@media (max-width: 30rem) {
  thead th, tbody td { padding-left: .5rem; padding-right: .5rem; }
  thead th:first-child, tbody td:first-child { padding-left: .7rem; }
  .topbar { padding: .55rem .8rem; }
  .topbar nav { gap: .85rem; }

  /* Značka, sezóna a „Registrovat klub / Přihlásit“ se na 375 px do jedné
     řádky nevejdou: lišta měřila 411 px, takže se celá stránka posouvala do
     stran a napravo od ní svítil pruh pozadí. Odkazy proto jdou pod značku.
     Schovat by se nedaly — přihlášení je to jediné, kvůli čemu sem
     nepřihlášený člověk chodí. */
  .topbar { flex-wrap: wrap; row-gap: .45rem; }
  .topbar nav { width: 100%; margin-left: 0; justify-content: flex-end; }
  main { padding: .9rem .8rem 3rem; }
}

/* --- stavy utkání ------------------------------------------------------- */

.pill {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .16rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pill-official, .pill-walkover { color: var(--green); background: #eaf5ef; border-color: #cfe6da; }
.pill-submitted, .pill-live { color: var(--amber); background: #fdf4e3; border-color: #f0dfba; }
.pill-disputed { color: var(--red-deep); background: var(--red-tint); border-color: #f2d3d5; }
.pill-scheduled, .pill-postponed, .pill-cancelled { color: var(--muted); background: var(--page); border-color: var(--line); }

/* --- skóre -------------------------------------------------------------- */

/* Konečný výsledek. Jedině tenhle je `score` — viz test
   test_the_public_match_page_never_prints_a_live_tally_as_a_bare_score. */
.score { font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; margin: 0; white-space: nowrap; }

/* Rozehrané a zapsané skóre je menší a jantarové, ne plným inkoustem jako
 * platný výsledek: velikost i barva jsou součástí toho, aby si ho nikdo
 * nespletl s konečným, vedle visačky stavu a věty, které to říkají slovy. */
.score-pending { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; color: var(--amber); margin: 0; white-space: nowrap; }
.score-pending-note { margin: .3rem 0 0; }

/* Neodehráno. Pomlčka, ne „0:0“ — nula ku nule je výsledek, a tenhle zápas
   žádný nemá. */
.score-none { font-size: 2rem; font-weight: 700; color: var(--line); margin: 0; }

.score-caption { font-size: .84rem; color: var(--muted); margin: .7rem 0 0; text-align: center; }

/* --- detail utkání ------------------------------------------------------- */

/* Tři sloupce: domácí zprava k číslu, hosté zleva od něj. Skóre stávalo pod
   nadpisem „Domácí — Hosté“ jako holé „4 : 2“, u kterého nebylo poznat, komu
   ty čtyři patří. Postavit každé číslo k jeho týmu je celý smysl téhle mřížky. */
.scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.scoreboard-home { text-align: right; }
.scoreboard-away { text-align: left; }
.scoreboard-score { text-align: center; }

.scoreboard-side a {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}

.scoreboard-side a:hover { color: var(--red); }
.scoreboard-side.is-winner a { color: var(--red-deep); }

.scoreboard-role {
  display: block;
  margin-top: .2rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.scoreboard-meta {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: .87rem;
  color: var(--muted);
}

.scoreboard-meta a { color: var(--muted); }
.scoreboard-meta a:hover { color: var(--red); }

/* Co se s výsledkem dá udělat. Potvrzení a rozpor jsou dvě odpovědi na tutéž
   otázku, ne dvě nezávislá tlačítka pod sebou — proto jeden blok s mezerou a
   druhá odpověď přivázaná ke svému políčku s důvodem. */
.decision { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.decision > form { margin: 0; width: 100%; }

.decision-alt { padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.decision-alt label { font-weight: 400; color: var(--muted); margin-bottom: .45rem; }

.decision-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.decision-row input { flex: 1 1 18rem; max-width: 26rem; }

/* Zásah svazu stojí pod čarou: není to další možnost vedle kapitánových, je to
   přepsání jejich výsledku někým jiným. */
.federation-action { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.federation-action .note { margin: 0 0 .8rem; }

/* Čára odděluje od kapitánových tlačítek. Když žádná nejsou — a svazový
   pracovník je typicky nevidí — není co oddělovat a zbyla by po ní jen linka a
   prázdné místo nad textem. */
.federation-action:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Herní karta ke čtení. Sloupce v témž pořadí jako na zápisové kartě. */
.gamesheet { min-width: 40rem; }
.gamesheet td:first-child { color: var(--muted); width: 2.5rem; }
.gamesheet .kind { color: var(--muted); width: 6rem; white-space: nowrap; }
.gamesheet .side-home { text-align: right; }
.gamesheet .side-away { text-align: left; }
.gamesheet .legs-head { text-align: center; width: 5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gamesheet tbody .legs-head { font-weight: 600; }

/* Vyhraný zápas je vidět na straně, která ho vyhrála. Tučně a barvou, ne
   podbarvením celé buňky: přes šest řádků by z toho byla šachovnice. */
.gamesheet .is-winner a { color: var(--red-deep); font-weight: 700; }

/* Ve čtyřhře stála jména vedle sebe bez čehokoli mezi nimi a „Ondřej Veselý
   Tomáš Černý“ se četlo jako jedno jméno. */
.pair-sep { color: var(--muted); margin: 0 .35rem; font-weight: 400; }

@media (max-width: 34rem) {
  .scoreboard { gap: .5rem; }
  .scoreboard-side a { font-size: 1rem; }
  .score { font-size: 1.9rem; }
  .score-pending { font-size: 1.5rem; }
}

/* Průběžný stav v rozpisu. Táž jantarová jako .score-pending na detailu,
   aby číslo nešlo splést s konečným výsledkem, který je v barvě odkazu.

   Selektor musí jmenovat i `a`: `a:hover` výš má specificitu (0,1,1) a samotné
   `.score-running` (0,1,0) by přebilo — po najetí myší by se číslo přebarvilo
   zpátky na červenou a vypadalo by jako hotový výsledek. */
a.score-running { color: var(--amber); font-weight: 600; }
a.score-running:hover { color: var(--amber); text-decoration: underline; }

/* --- úvodní stránka ----------------------------------------------------- */

/* Co po kapitánovi někdo chce: vlevo o co jde, vpravo tlačítko, kterým to
   vyřídí. Na telefonu jde tlačítko pod text, ne vedle něj. */
.todo li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.1rem; }
.todo-what { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.todo-what .note { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

@media (max-width: 40rem) {
  .todo li { flex-direction: column; align-items: stretch; gap: .6rem; }
}

/* --- rozcestník na úvodu ------------------------------------------------ */

.group-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

.group-links a {
  display: inline-block;
  padding: .35rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .89rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.group-links a:hover { border-color: var(--red); color: var(--red); background: var(--red-tint); }

/* --- herní karta -------------------------------------------------------- */

/* Popisek, který nese čtečka, ale na obrazovce ho nese hlavička sloupce. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cardsheet { min-width: 46rem; }
.cardsheet td { vertical-align: middle; }
.cardsheet td:first-child { font-weight: 700; width: 2.5rem; }
.cardsheet td:nth-child(2) { color: var(--muted); width: 6rem; }
.cardsheet select { width: 100%; max-width: none; margin-bottom: .3rem; }
.cardsheet select:last-of-type { margin-bottom: 0; }

/* Zápas, který už je uložený na serveru. Světle zelené podbarvení, ne rámeček:
   je to stav řádku, ne chyba ani volba, a přes šest řádků nesmí přebít pole,
   která se teprve vyplňují. */
.cardsheet tbody tr.is-saved { background: #f4faf6; }

.saved-tag {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .35rem;
  border-radius: 999px;
  background: #eaf5ef;
  border: 1px solid #cfe6da;
  color: var(--green);
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
}

:root[data-theme="dark"] .cardsheet tbody tr.is-saved { background: #14251b; }
:root[data-theme="dark"] .saved-tag { background: #163024; border-color: #29513c; }

.legs-cell { width: 9rem; }
.legs { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.legs input { width: 3.2rem; max-width: none; text-align: center; padding: .45rem .3rem; }
.legs-sep { color: var(--muted); font-weight: 700; }

/* Na telefonu se řádek rozpadne na kartičku jednoho zápasu — tabulka s pěti
   sloupci formulářových polí se na 375 px číst nedá a vodorovný posun se ve
   formuláři, který se vyplňuje shora dolů, plete. */
@media (max-width: 48rem) {
  .scroll-x .cardsheet { min-width: 0; }
  .cardsheet thead { display: none; }
  .cardsheet tbody tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0 1.1rem 1.1rem;
    padding: .3rem 0;
  }
  .cardsheet tbody tr:first-child { margin-top: 1.1rem; }
  .cardsheet tbody td {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
    border: 0;
    padding: .35rem .8rem;
    width: auto;
  }
  .cardsheet tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .82rem;
  }
  .legs { justify-content: flex-start; }
}

/* --- přihlášení, registrace, obnova hesla -------------------------------- */

/* Jediné stránky webu, které nemají nic vedle sebe: nic se tu nelistuje ani
   neporovnává, vyplní se jeden formulář a jde se dál. Sloupec je proto úzký a
   uprostřed — karta na 32 rem doteď zapadla vlevo nahoře 74rem široké stránky
   a vypadalo to, že se zbytek nenačetl. */
.auth { max-width: 25rem; margin: 0 auto; padding: 1.75rem 0 1rem; }

/* Registrace se ptá na jedenáct věcí ve dvou oddílech; na 25 rem je z toho
   nekonečný pásek. */
.auth-wide { max-width: 30rem; }

.auth-mark { text-align: center; margin: 0 0 1.3rem; }
.auth-mark img { height: 2.9rem; width: auto; display: inline-block; }

.auth-mark p {
  margin: .45rem 0 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Červený proužek nahoře je totéž, čím se na webu značí hlavička tabulky:
   karta patří ke zbytku webu, aniž by se sem tahalo cokoli nového. Stín je
   hlubší než u ostatních karet — je tu sama a má se od plochy odlepit. */
.auth-card {
  border-top: 3px solid var(--red);
  box-shadow: 0 14px 34px -20px rgba(30, 33, 38, .45), var(--shadow);
}

.auth-card .card-head { text-align: center; padding: 1.15rem 1.4rem 1rem; }
.auth-card .card-head h1 { font-size: 1.3rem; margin: 0; }
.auth-card .card-head p { margin: .3rem 0 0; }
.auth-card .card-body { padding: 1.3rem 1.4rem 1.4rem; }
.auth-card .card-body > p:first-child { margin-top: 0; }

/* Nadpis oddílu, ne nadpis obsahu: „Váš účet“ a „Klub“ jen dělí jeden dlouhý
   sloupec polí na dvě půlky, tak mají váhu popisku, ne titulku. */
.auth-section { margin: 0 0 1.9rem; }
.auth-section:last-of-type { margin-bottom: 0; }

.auth-section > h2 {
  margin: 0 0 .9rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Na těchhle stránkách je jedno tlačítko a nic jiného, takže smí přes celou
   kartu — je to zároveň jediné, co se dá dělat dál. */
.auth .actions { margin-top: 1.3rem; }
.auth .actions button, .auth .actions .button { width: 100%; padding: .6rem 1rem; text-align: center; }

/* Odkazy pod kartou, ne v ní: „zapomněli jste heslo“ není součást formuláře. */
.auth-foot { margin: 1.1rem 0 0; text-align: center; font-size: .89rem; color: var(--muted); }
.auth-foot p { margin: .4rem 0 0; }
.auth-foot p:first-child { margin-top: 0; }

@media (max-width: 30rem) {
  .auth { padding-top: 1.1rem; }
  .auth-card .card-head, .auth-card .card-body { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* --- formuláře ---------------------------------------------------------- */

form p { margin: 0 0 .95rem; }

/* Pole vysázené přes web/_pole.html — viz komentář tam. */
.field { margin: 0 0 .95rem; }
.field:last-child { margin-bottom: 0; }
.field > input, .field > select { max-width: none; }
.field.is-wrong > input, .field.is-wrong > select { border-color: var(--red); }

/* Chyba u pole je jedna věta pod ním, ne odrážka: puntík má smysl v seznamu,
   kde se položky přebírají, tady je to jediné, co u pole zbývá přečíst. */
.field .errorlist { list-style: none; margin: .3rem 0 0; padding: 0; }

.help { margin: .3rem 0 0; font-size: .81rem; line-height: 1.45; color: var(--muted); }
.help ul, .help ol { margin: .1rem 0 0; padding-left: 1.05rem; }

/* Chyby, které nepatří žádnému poli. Vypadají jako hláška nahoře na stránce,
   protože to je totéž sdělení — jen se týká zrovna tohohle formuláře. */
.form-errors {
  margin: 0 0 1.1rem;
  padding: .6rem .8rem;
  border: 1px solid #f2d3d5;
  border-left: 3px solid var(--red);
  border-radius: 6px;
  background: var(--red-tint);
}

.form-errors .errorlist { list-style: none; margin: 0; padding: 0; }
.form-errors li { font-size: .9rem; color: var(--red-deep); }

label { display: block; font-size: .87rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .25rem; }

input, select {
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font: inherit;
  font-size: .94rem;
  color: var(--ink);
  width: 100%;
  max-width: 26rem;
}

/* Vlastní šipka místo systémové.
 *
 * Systémovou si kreslí prohlížeč sám těsně u rámečku a v každém z nich jinak —
 * mezera mezi šipkou a okrajem byla menší než odsazení textu na druhé straně,
 * takže pole vypadalo nakřivo. `appearance: none` ji vypne a zbytek už je
 * obyčejné pozadí, které se dá umístit přesně: šipka má napravo stejných .7rem,
 * jako má text nalevo, a `padding-right` drží dlouhá jména, aby do ní nenajela.
 *
 * Barva je v SVG napevno, protože data URI nevidí na proměnné; tmavý režim si
 * proto obrázek přepisuje níž. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b727c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: .7rem auto;
  padding-right: 2rem;
}

input:focus, select:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }

button, .button {
  display: inline-block;
  padding: .52rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--red);
  color: var(--on-red);
  font: inherit;
  font-size: .94rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

button:hover, .button:hover { background: var(--red-deep); color: var(--on-red); }

/* The card screen's second button — saving progress during an evening,
 * beside the primary "Odeslat výsledek"/"Uložit opravu" submit, which stays
 * the plain red button above so the frequent action never outweighs the
 * final one. */
/* Zbytek úkolů. Vypadá jako další řádek seznamu, protože to je — jen se
   rozbaluje; proto linka nahoře a stejné odsazení jako mají řádky nad ním. */
.todo-more > summary {
  padding: .6rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .89rem;
  font-weight: 600;
  color: var(--red-deep);
  cursor: pointer;
  list-style: none;
}

.todo-more > summary::-webkit-details-marker { display: none; }
.todo-more > summary::marker { content: ""; }
.todo-more > summary:hover { background: var(--hover); }
.todo-more > summary::after { content: " ▾"; color: var(--muted); }
.todo-more[open] > summary::after { content: " ▴"; }
/* Rozbalený zbytek už je vidět celý, takže hranice mezi ním a řádky nad ním
   nemá co dělit. */
.todo-more[open] > summary { border-bottom: 1px solid var(--line-soft); }

.button-secondary { background: var(--card); color: var(--ink-soft); border: 1px solid var(--line); }
.button-secondary:hover { background: var(--hover); color: var(--ink); }

.topbar .link { background: none; }
.topbar .link:hover { background: none; }

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 1rem;
  padding: .9rem 1.1rem;
  background: var(--card);
}

legend { font-size: .93rem; font-weight: 700; padding: 0 .4rem; }

/* --- hlášky ------------------------------------------------------------- */

.messages { list-style: none; padding: 0; margin: 0 0 1.1rem; }

.messages li {
  padding: .65rem .9rem;
  border: 1px solid #cfe6da;
  border-left: 3px solid var(--green);
  border-radius: 6px;
  background: #eaf5ef;
  margin-bottom: .5rem;
  font-size: .93rem;
}

.messages li.warning { border-color: #f0dfba; border-left-color: var(--amber); background: #fdf4e3; }
.messages li.error { border-color: #f2d3d5; border-left-color: var(--red); background: var(--red-tint); }

.errorlist { color: var(--red-deep); font-size: .88rem; margin: .3rem 0 0; padding-left: 1.1rem; }

/* --- patička ------------------------------------------------------------- */

/* Bílá na šedé ploše, bez linky — stejně jako lišta nahoře. Jeden řádek: stojí
   pod každou stránkou webu, takže se drží co nejmenší. */
.footer { background: var(--card); margin-top: 2.5rem; font-size: .84rem; color: var(--muted); }

.footer-inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: .95rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
  justify-content: space-between;
}

/* --- seznam údajů (kontakt) ---------------------------------------------- */

/* Popisek vlevo, hodnota vpravo. `auto` u prvního sloupce ho udrží přesně tak
   široký, jak je nejdelší popisek — hodnoty pak stojí v jedné ose. */
.facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem 1.6rem;
  margin: 0;
  font-size: .93rem;
}

.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* Stránka s pár řádky textu; přes celou šířku by řádky plavaly v prázdnu. */
.card-narrow { max-width: 34rem; }

/* --- tmavý režim --------------------------------------------------------- */

/* Výchozí je světlý vzhled, ať má návštěvník v systému cokoli: šipková liga
   se čte hlavně na papírově bílém pozadí a svaz chce, aby web vypadal pokaždé
   stejně. Tmavý se zapne jedině `data-theme="dark"`, které na <html> vypíše
   server podle cookie (apps/web/views.py::motiv).

   Proto tu není žádné `@media (prefers-color-scheme: dark)`: kdyby bylo,
   systémová preference by přebíjela výchozí volbu svazu a hodnoty by se
   musely psát dvakrát. */

:root[data-theme="dark"] {
    --red: #d93a48;
    --red-deep: #ef7d87;
    --red-dark: #f5a3aa;
    --red-tint: #2a1a1c;
    --green: #57b98c;
    --amber: #d7a44a;

    --ink: #e7e9ec;
    --ink-soft: #bcc1c8;
    --muted: #8b929b;
    --line: #333940;
    --line-soft: #282d33;
    --page: #16191d;
    --card: #1d2126;
    --hover: #23282e;
}

/* Doladění komponent, které si nevystačí se samotnými proměnnými. */
:root[data-theme="dark"] .pill-official,
:root[data-theme="dark"] .pill-walkover { background: #163024; border-color: #29513c; }
:root[data-theme="dark"] .pill-submitted,
:root[data-theme="dark"] .pill-live { background: #322612; border-color: #574523; }
:root[data-theme="dark"] .messages li { background: #163024; border-color: #29513c; }
:root[data-theme="dark"] .messages li.warning { background: #322612; border-color: #574523; }
:root[data-theme="dark"] .messages li.error { background: var(--red-tint); border-color: #5a2b30; }
:root[data-theme="dark"] .form-errors { border-color: #5a2b30; }

/* Šipka v rozbalovacím poli. Táž kresba, jen ve tmavém --muted — barva je
   uvnitř data URI a proměnnou tam dostat nejde. */
:root[data-theme="dark"] select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238b929b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}


/* --- rozbalovátko sezón --------------------------------------------------- */

.dropdown { position: relative; }

/* Bez rámečku, s ikonou a dvouřádkovým popiskem — uspořádání podle vzoru
   (stolnytenis.info). Ohraničí se až podbarvením pod myší; rámeček kolem
   každé položky dělal z lišty řadu tlačítek. */
.dropdown summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .6rem;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: background-color .15s;
}

/* Trojúhelníček, kterým Safari a Firefox <summary> značí, nahrazuje šipka níž. */
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary::marker { content: ""; }

.dropdown summary:hover { background: var(--hover); }
.dropdown[open] summary { background: var(--hover); }

.dropdown-icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--red); }

/* Název nabídky nahoře, její současná hodnota pod ním. Ne obráceně: v liště
   člověk hledá „Sezóna“, hodnota je k tomu popisek. */
.dropdown-text { display: flex; flex-direction: column; line-height: 1.2; }
.dropdown-label { font-size: .87rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.dropdown-value { font-size: .74rem; font-weight: 400; color: var(--muted); }

.dropdown summary::after {
  content: "";
  width: .38rem;
  height: .38rem;
  margin-left: .15rem;
  flex: none;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-.12rem);
}

.dropdown[open] summary::after { transform: rotate(-135deg) translateY(-.15rem); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 30;
  min-width: 11rem;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px -8px rgba(30, 33, 38, .35);

  /* Mezera mezi položkami, aby dvě podbarvené nesplynuly v jeden pruh — ta,
     na které člověk stojí, a ta pod myší spolu sousedí běžně.

     `gap` na flexu, ne `li + li { margin-top }`: tím druhým by se přepsal
     vlastní horní okraj `.menu-group`. Selektor `.dropdown-menu li + li` má
     (0,1,2) proti (0,1,0) u `.menu-group`, takže by nadpis „Rozpis týmu“ o
     svoje odsazení nad linkou přišel. `gap` se s okrajem sčítá a nic
     nepřebíjí. */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .4rem .55rem;
  border-radius: 5px;
  font-size: .92rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.dropdown-menu a:hover { background: var(--red-tint); color: var(--red-deep); }

/* Kde v nabídce člověk stojí. Podbarvení jako v postranním seznamu, ne plný
   červený pruh — ten sem doteď padal z `.tabs a.is-current`, protože nabídka
   leží uvnitř pruhu záložek, a vypadalo to jako tlačítko přes celou nabídku. */
.dropdown-menu a.is-current { background: var(--red-tint); color: var(--red-deep); font-weight: 600; }

@media (max-width: 40rem) {
  /* Na úzké obrazovce padá hodnota, ne název. Dokud byl název tím drobným
     šedým řádkem, schovával se on — teď je nahoře a je to to, po čem člověk
     v liště sahá; „2026/27“ bez „Sezóna“ nad tím neříká nic. */
  .dropdown-value { display: none; }
  .dropdown summary { gap: .4rem; padding: .3rem .45rem; }
}

/* --- přepínač motivu ------------------------------------------------------ */

.motiv { display: flex; margin: 0; }

.motiv button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}

.motiv button:hover { color: var(--red); background: var(--hover); border-color: var(--line); }
.motiv svg { width: 1.15rem; height: 1.15rem; }

/* Ve světlém režimu nabízíme tmavý (měsíc), v tmavém světlý (sluníčko).
   Obě tlačítka jsou v HTML pořád — viz komentář v base.html.

   Selektory musí obsahovat `button`: `.motiv button` výš má specificitu
   (0,1,1) a přebilo by samotné `.motiv-to-light` (0,1,0) bez ohledu na
   pořadí — první verze proto ukazovala obě ikony vedle sebe. */
.motiv button.motiv-to-light { display: none; }

:root[data-theme="dark"] .motiv button.motiv-to-dark { display: none; }
:root[data-theme="dark"] .motiv button.motiv-to-light { display: inline-flex; }


/* Přesun utkání přímo v rozpisu — jen pro oblastního administrátora.
   Details v buňce termínu: zavřené nezabírá nic, otevřené rozbalí formulář
   pod datem. Inputy jsou schválně malé — je to zásah do rozpisu, ne stránka. */
.reschedule summary { cursor: pointer; color: var(--red); }
.reschedule-form { display: grid; gap: .35rem; padding: .5rem 0 .25rem; max-width: 16rem; }
.reschedule-form label { display: grid; gap: .15rem; font-size: .8rem; color: var(--muted); }
.reschedule-form input { font: inherit; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); }
.reschedule-form .input-kolo { width: 5rem; }
.reschedule-form button { justify-self: start; }

/* Náhled nezveřejněné sezóny — pruh přes celou stránku, aby se rozepsaná
   sezóna nedala splést se zveřejněnou. Jantar, ne červená: nic se nerozbilo. */
.draft-banner {
  margin: 0 0 1rem;
  padding: .55rem .9rem;
  border: 1px solid #b8860b55;
  border-left: 4px solid #b8860b;
  border-radius: 6px;
  background: color-mix(in srgb, #b8860b 12%, var(--bg));
  color: var(--text);
  font-size: .9rem;
}

/* Přesun utkání přímo v rozpisu — jen pro oblastního administrátora.
   Details v buňce termínu: zavřené nezabírá nic, otevřené rozbalí formulář
   pod datem. Inputy jsou schválně malé — je to zásah do rozpisu, ne stránka. */
.reschedule summary { cursor: pointer; color: var(--red); }
.reschedule-form { display: grid; gap: .35rem; padding: .5rem 0 .25rem; max-width: 16rem; }
.reschedule-form label { display: grid; gap: .15rem; font-size: .8rem; color: var(--muted); }
.reschedule-form input { font: inherit; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); }
.reschedule-form .input-kolo { width: 5rem; }
.reschedule-form button { justify-self: start; }

/* Náhled nezveřejněné sezóny — pruh přes celou stránku, aby se rozepsaná
   sezóna nedala splést se zveřejněnou. Jantar, ne červená: nic se nerozbilo. */
.draft-banner {
  margin: 0 0 1rem;
  padding: .55rem .9rem;
  border: 1px solid #b8860b55;
  border-left: 4px solid #b8860b;
  border-radius: 6px;
  background: color-mix(in srgb, #b8860b 12%, var(--bg));
  color: var(--text);
  font-size: .9rem;
}

/* Panel nasazení nad kartou: dva sloupce (domácí / hosté), v každém pozice
   karty. Kompaktní — je to pomůcka nad tabulkou, ne druhý formulář. */
.lineup h2 { margin: 0 0 .25rem; font-size: 1rem; }
.lineup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 2rem; }
.lineup-grid h3 { margin: .35rem 0; font-size: .85rem; color: var(--muted); }
.lineup-grid label { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; font-weight: 600; }
.lineup-grid select { flex: 1; font: inherit; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); }


/* Klíč zápasu na kartě („1:A“) a přehled střídání. Klíč strojopisem vedle
   typu zápasu — totéž, co tiskne papírová karta; střídání jako krátký seznam
   nad tabulkou, který se objeví, až když nějaké je. */
.cardsheet .kluc {
  margin-left: .4rem;
  font-family: Menlo, "DejaVu Sans Mono", monospace;
  font-size: .78rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 .3rem;
}
.strida ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.strida li { margin: .15rem 0; }