@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;

  /* A last resort, not the layout: the bar is meant to stay one row high, and
     the rules below shed the dropdown labels on a phone so that it does. What
     is left here is the guarantee that a bar which still does not fit wraps
     instead of pushing the page sideways. */
  flex-wrap: wrap;
  row-gap: .45rem;
}

/* 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. */
/* 86 rem, not 74: the leaderboard with the card's statistics needs about a
   thousand pixels and slid sideways in a narrower column. At 1440 it is there in
   one piece, and the schedule, the standings and the registries gain the room
   with it. */
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 86rem;
  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; }
/* Mřížka bez postranního panelu. Jeden potomek by jinak skončil v prvním
   sloupci, tedy v pruhu širokém 15.5rem, který mřížka drží pro panel. */
.layout-bez-panelu { grid-template-columns: minmax(0, 1fr); }

@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,
.side-list .side-empty {
  display: block;
  padding: .42rem 1rem .42rem 1.75rem;
  font-size: .9rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 3px solid transparent;
}

/* Soutěž, která ještě nemá vypsanou skupinu. Vidí ji jen ten, kdo sezónu staví,
   a nedá se na ni kliknout — není kam. Tvar má stejný jako odkazy vedle ní,
   protože do téhož seznamu patří; odlišuje ji ztlumená barva a dovětek
   „bez skupiny“. Tečka je táž jako u ostatních — vyplněnou má jen ta, na které
   člověk zrovna stojí.

   Do téhle podoby se dostala až po nahlášení: pravidla nad tím visela jen na
   `.side-list a`, takže `<span>` nedostal ani odsazení, ani tečku, ani velikost
   písma — a jméno soutěže viselo nezarovnané u levého okraje seznamu.

   Dovětek je v šabloně, ne v `content:`. Text vypsaný CSS není v DOM, takže ho
   nepřečte nic, co čte stránku, nedá se na něj napsat test — a stránka bez
   stylu ho ztratí úplně. */
.side-list .side-empty { color: var(--muted); cursor: default; }
.side-list .side-empty-note { font-size: .8rem; opacity: .75; }

/* Tečka na spojnici, ať je vidět, kde v seznamu člověk stojí. */
.side-list a::before,
.side-list .side-empty::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); }

/* A region folds. The country has fourteen of them with over thirty
   competitions between them, and on a phone the whole list stands above the
   content; open is the region being viewed. */
.side-region > summary {
  cursor: pointer;
  padding-top: .7rem;
  padding-bottom: .5rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.side-region > summary::-webkit-details-marker { display: none; }
.side-region > summary:hover { color: var(--ink-soft); background: var(--hover); }
.side-region[open] > summary { color: var(--ink-soft); }
.side-region > .side-list { padding-top: 0; }

/* The same on the season page, where a region is a whole card: there the card's
   head is what opens it. */
.region-card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6rem; }
.region-card > summary::-webkit-details-marker { display: none; }

/* One chevron for both folds, drawn here rather than left to the browser: the
   default triangle sits at the left edge and would break the indent the
   competition bullets line up on.

   `flex: none` is new to both — an empty pseudo-element has nothing to hold it
   open, so a long region name could squeeze it. */
.side-region > summary::after,
.region-card > summary::after {
  content: "";
  width: .45rem;
  height: .45rem;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.1rem, -.1rem);
  transition: transform .15s ease;
}
.side-region[open] > summary::after,
.region-card[open] > summary::after { transform: rotate(-135deg) translate(-.15rem, -.15rem); }

/* On the card the chevron stands next to a heading, so `currentColor` would
   make it as dark as the title. Grey, and a touch larger to match the bigger
   text; pushed to the far end, where the side panel uses `space-between`. */
.region-card > summary::after { color: var(--muted); width: .5rem; height: .5rem; margin-left: auto; }

.region-card > summary:hover { background: var(--hover); }

/* --- 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; }

/* The card's statistics after the ranking, behind a thin line: they are read, not
   ranked by. No min-width of their own: fourteen columns of numbers beside two
   names that never wrap hold the table past 58 rem anyway, and a number that
   never binds is one the next person would tune for nothing. */
/* Fourteen columns of a leaderboard, tighter than the site's other tables: this
   is the one that has to fit a laptop screen whole, and the columns are numbers,
   not sentences. */
.uspesnost thead th, .uspesnost tbody td { padding-left: .55rem; padding-right: .55rem; }
.uspesnost thead th:first-child, .uspesnost tbody td:first-child { padding-left: 1.1rem; }
.uspesnost thead th:last-child, .uspesnost tbody td:last-child { padding-right: 1.1rem; }
.uspesnost .stat { padding-left: .45rem; padding-right: .45rem; }
.uspesnost .stat-first { border-left: 1px solid var(--line); }
.uspesnost thead .stat-first { border-left-color: rgba(255, 255, 255, .35); }

/* 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); }

/* The venue under the date. A line of its own, because addresses run up to
   seventy characters and next to the date they would throw off the width of the
   whole table's first column. `max-width` keeps the longest one from stretching
   the column by itself: a longer one wraps onto two lines, which for a line read
   once before setting off is cheaper than scrolling the table sideways. */
.schedule .misto { display: block; max-width: 18rem; line-height: 1.25; }
.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; gap: .5rem; }
  .topbar nav { gap: .85rem; }
  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); }

/* Stavy žádosti o přesun. Čekání je jantarové jako „zapsáno“ — něco visí a
   někdo má rozhodnout; schválení zelené jako platný výsledek, zamítnutí
   červené. Vlastní řádek, protože stavy žádosti nejsou stavy utkání a splynout
   s nimi nemají. */
.pill-pending, .pill-agreed { color: var(--amber); background: #fdf4e3; border-color: #f0dfba; }
.pill-approved { color: var(--green); background: #eaf5ef; border-color: #cfe6da; }
.pill-refused { color: var(--red-deep); background: var(--red-tint); border-color: #f2d3d5; }

/* --- 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; }

/* The name reads the same whether it is a link (the match page) or plain text
   (the card, where a click away would lose a half-typed card). */
.scoreboard-side a,
.scoreboard-side .scoreboard-name {
  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,
.scoreboard-side.is-winner .scoreboard-name { 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,
  .scoreboard-side .scoreboard-name { 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; position: relative; }
a.score-running:hover { color: var(--amber); text-decoration: underline; }

/* Tepající tečka u průběžného čísla: „tohle se hraje právě teď“. Tepe tečka,
   ne číslo — blikající text se špatně čte a číslo je to, kvůli čemu se na řádek
   člověk dívá. Kdo si vypnul pohyb v systému, dostane tečku klidnou; barva
   a titulek odliší rozehrané utkání i bez ní.

   Visí mimo tok (``right: 100%``), aby čísla ve sloupci zůstala pod sebou:
   tečka v řádku by rozehraný výsledek posunula o svou šířku doprava a ve
   sloupci, kde se čísla čtou svisle, je takový posun vidět na první pohled.
   (``position: relative`` nese samotný odkaz výš, aby měl jeden selektor jeden
   blok.) */
.live-dot {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: .3rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--amber);
  animation: tep 1.6s ease-in-out infinite;
}

@keyframes tep {
  0%, 100% { opacity: 1; }
  50% { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* --- ú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); }

/* Správcovský pohled na sezónu: k odkazu přibude stav zveřejnění a tlačítko,
   takže se položky do řádku vedle sebe nevejdou a splývaly by. Sloupec, ne
   chipsy. */
.group-links-spravа { flex-direction: column; align-items: flex-start; gap: .5rem; }
.group-links-spravа li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Převzetí zápisu: věta o odpovědnosti vedle zaškrtávátka, ne pod ním — čte se
   jako jedna věc, ke které se člověk hlásí. */
.claim-consent { display: flex; gap: .55rem; align-items: flex-start; margin: .2rem 0 .8rem; }
.claim-consent input { margin-top: .2rem; flex: 0 0 auto; }
.claim-consent span { color: var(--muted); }

/* Poměr legů pod skóre a v rozpisu: druhé číslo téhož výsledku, takže menší
   a tlumené — vedle skóre, ne místo něj. */
.score-legs { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; }
.legs-note { display: block; color: var(--muted); font-size: .8rem; white-space: nowrap; }

/* --- 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 š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;
}

/* Vzhled pole, ne vzhled zaškrtávátka. Pravidlo nad tím bralo i checkbox
   a radio, a `width: 100%` z checkboxu udělalo sto pixelů široký čtverec, který
   v řádku odtlačil vlastní popisek do tří řádků. Zaškrtávátko si kreslí
   prohlížeč a nic z toho na něj nesedí — ani odsazení, ani rámeček, ani šířka.

   Výjimka zvlášť, ne `input:not([type="checkbox"])` v selektoru výš. Každé
   `:not()` nese specificitu svého argumentu, takže by ten selektor přeskočil
   `.hledani input` i všechny ostatní, které si šířku pole nastavují samy — a
   vyhledávací pole se roztáhlo přes celou hlavičku a odsunulo tlačítko „Hledat“
   na vlastní řádek. Přesně to se stalo. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
}

input:focus, select:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
/* Zaškrtávátku vlastní rámeček nekreslíme, takže by po `outline: 0` nebylo
   poznat, kde stojí fokus. Vrací se mu ten systémový. */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: revert; }

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 {
  /* The same width as <main> — otherwise the footer ends somewhere the content
     above it does not. */
  max-width: 86rem;
  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; }
}

/* On a phone the two dropdowns keep the icon alone. With both labels the bar
   needs about 530 px and wrapped to two rows — ninety pixels of sticky header
   above every page, on the screen that has the least of it to spare.

   The label is not dropped, only taken off the screen the way ``.sr-only``
   does it, so the icon keeps a name for a screen reader. That name is "Sezóna"
   and not "Sezóna 2026/2027": the value is already `display: none` under
   40 rem, and `display: none` is out of the accessibility tree, where a clipped
   pixel is not. The two declarations ``.sr-only`` has and this does not,
   `padding: 0` and `border: 0`, are resets `.dropdown-text` has nothing to
   reset.

   36 rem, not 30: with the labels a signed-in administrator's bar — the one
   that also carries "Správa" and "Odhlásit" — wants around 540 px, so between
   the two breakpoints it would go on wrapping. Under about 390 px it wraps
   still: the widths here are budgeted against what the bar carries today, and
   the answer when the next link is added to it is a third dropdown for the
   account, not another breakpoint. */
@media (max-width: 36rem) {
  .dropdown-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* The label is gone, so the icon alone is the target: 52 by 34 px. Past the
     24 px WCAG asks for, short of the 44 px Apple recommends — and growing it
     to 44 grows the sticky bar this rule exists to shrink. */
  .dropdown summary { padding: .45rem .5rem; }
}

/* --- 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; }

/* Prohození stran v rozpisu. Šipka nad odkazem na detail, protože otáčí to, co
   je na řádku vlevo a vpravo od ní — zavřená nezabírá víc než jeden znak,
   rozbalená vypíše, co z toho bude, a zeptá se na důvod.

   Šipka je sama o sobě celý popisek, takže trojúhelníček `details` by vedle ní
   byl druhý znak beze slova; skrývá se obojím zápisem, protože WebKit `::marker`
   nectí. Tělo panelu si vrací zarovnání a zalamování, které buňka výsledku
   sloupci vzala (`text-align: center`, `white-space: nowrap`). */
.swap-sides { margin: 0 0 .15rem; }
.swap-sides > summary {
  display: inline-block;
  list-style: none;
  padding: 0 .35rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.35;
}
.swap-sides > summary::-webkit-details-marker { display: none; }
.swap-sides > summary::marker { content: ""; }
.swap-sides > summary:hover { background: var(--red); border-color: var(--red); color: var(--on-red); }
/* Panel se nevejde do sloupce výsledku (7rem) a roztáhnout ho nesmí: rozbalení
   jednoho řádku by přeskládalo sloupce celé tabulky. Vyskakuje proto nad ní,
   ukotvený k buňce a vycentrovaný pod šipkou. */
.schedule td.legs-head { position: relative; }
.swap-sides .reschedule-form {
  position: absolute;
  z-index: 5;
  left: 50%;
  transform: translateX(-50%);
  width: 15rem;
  max-width: none;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 8px 24px rgba(30, 33, 38, .14);
  text-align: left;
  white-space: normal;
}
.swap-sides .reschedule-form .note { margin: 0; }

/* `.scroll-x` má vodorovné posouvání, a tím podle specifikace i svislé: panel
   otevřený na posledním řádku by se o spodní hranu boxu uřízl. Místo pod
   tabulkou se proto přidá jen tehdy, když je nějaký panel otevřený — jinak by
   pod rozpisem trvale zela prázdná dlaň. */
.scroll-x:has(details.swap-sides[open]) { padding-bottom: 12rem; }

/* Plánovač termínů. Nastavení nahoře jako popisný seznam ve sloupcích — je to
   šest údajů, na které se kouká najednou, ne tabulka k procházení. Vynechaný
   hrací den je ztlumený: v seznamu, kde většina řádků je kolo, se má poznat
   na první pohled, že tenhle není. */
.plan-nastaveni { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 0; }
.plan-nastaveni > div { min-width: 9rem; }
.plan-nastaveni dt { font-size: .8rem; color: var(--muted); }
.plan-nastaveni dd { margin: .1rem 0 0; }
.plan tbody tr.plan-vynechano td { color: var(--muted); background: var(--hover); }
/* Varování pod shrnutím: pořád poznámka, jen se neztratí mezi údaji nad ní. */
.plan-varovani { margin-top: .8rem; }

/* Řádek drobných polí — termíny soutěže i zadání přestávky. Řádek, ne mřížka
   formuláře: pole patří k sobě jako jedna věta („ve čtvrtek v 19:30, sudé týdny,
   bez svátků“). Zalamuje se, protože na 375 px se ta věta na řádek nevejde.

   Jméno popisuje tvar, ne jeden konkrétní formulář: používají ho dva a druhý
   žádné termíny nenastavuje. */
.pole-radek { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: 0 0 1rem; }
.pole-radek label { display: grid; gap: .15rem; font-size: .8rem; color: var(--muted); }
.pole-radek input, .pole-radek select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); }
.pole-radek .pole-prepinac { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--text); padding-bottom: .35rem; }
.pole-radek .pole-prepinac input { flex: none; }
/* Zaškrtávátko a tlačítko na vlastní řádek pod poli: v jedné řadě s nimi se
   popisek lámal do tří řádků v úzkém sloupci a tlačítko se stěhovalo podle
   toho, jak zrovna vyšlo zalomení. `flex-basis: 100%` je zlom, ne nová mřížka
   — pole nad ním se dál skládají do řady, jak se vejdou. */
.pole-radek .pole-zlom { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }

.prestavky { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.prestavky li { display: flex; align-items: center; gap: .7rem; }
.prestavky form { margin: 0; }
.prestavky button { padding: .15rem .5rem; font-size: .82rem; }

/* 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. */
/* Kdo hází první leg. Drobným a tlumeným vedle názvu zápasu: je to údaj
   z herní karty, ne výsledek — a kdyby křičel, přebil by legy, kvůli kterým
   se na kartu kouká. */
/* Drobný orámovaný štítek vedle textu: „D“/„H“ u zápasu na kartě, „SetDarts“
   u utkání na úvodu. Vizuální prvek, ne význam — proto obecné jméno; kdyby se
   jmenoval po jednom z těch dvou užití, druhé by se tvářilo jako omyl. */
.stitek {
  margin-left: .4rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 .3rem;
  white-space: nowrap;
}

.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; }

/* --- statistiky na kartě (180 / 140+ / 100+ / zavření) -------------------- */

/* Čtyři úzká pole pod jménem hráče, ne osm sloupců navíc: karta se vyplňuje
   i na mobilu a osm sloupců by ji rozšířilo přes obrazovku. Drží se ale
   mřížky řádku — stejné odsazení jako select nad nimi, stejná výška jako
   pole na legy — a čtou se jako doplněk, ne jako druhý formulář: vlásková
   linka nahoře, popisky verzálkami v barvě popisků tabulky. */
.card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .3rem;
  margin-top: .4rem;
  padding-top: .4rem;
  border-top: 1px solid var(--line-soft);
}
.card-stats .stat { display: grid; gap: .1rem; justify-items: center; }
/* Popisek nad každým polem, v každém řádku: karta se vyplňuje řádek po řádku
   a v hospodě, a název v hlavičce o obrazovku výš tam není k ničemu. */
.card-stats label {
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.card-stats input {
  width: 100%;
  max-width: none;
  padding: .3rem .2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Prázdné pole ustoupí do pozadí, vyplněné se přihlásí: kdo kartu kontroluje,
   hledá čísla, ne rámečky. */
.card-stats input:placeholder-shown { border-color: var(--line-soft); }
.card-stats .errorlist { grid-column: 1 / -1; }

:root[data-theme="dark"] .card-stats { border-top-color: #2a2f37; }

/* Na úzké obrazovce se řádek rozpadá na kartu bez hlavičky — každé pole si
   proto svůj popisek vezme zpátky. */
@media (max-width: 48rem) {
  /* Řádek je tu mřížka „popisek | pole“, takže blok statistik spadne do úzkého
     levého sloupce. Roztáhne se proto přes oba. */
  .cardsheet tbody .card-stats { grid-column: 1 / -1; margin-top: .2rem; }
}

/* Stránka utkání: jen to, co někdo zapsal, pod jménem hráče a v jeho zarovnání. */
.gamesheet .stats-note {
  display: block;
  margin-top: .1rem;
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Kód do tabletu v rozpisu. Opisuje se po znacích do aplikace, takže
   jednolitým písmem a s rozestupem — „U9TKW2“ se v proporcionálním fontu
   čte hůř, než se zdá, a překlep znamená, že se tablet nepřipojí a nikdo
   neví proč.

   Vedle stavu, ne místo něj: je to údaj navíc, ne jiný stav utkání. Vidí ho
   jen ten, komu ho dal pohled — tedy kapitáni a ten, kdo soutěž řídí. */
.tablet-code {
  display: inline-block;
  margin-left: .5rem;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}
/* Odkaz na živý přenos v rozpisu. Stojí vedle visačky stavu a vedle kódu pro
   tablet, tak nese jejich velikost — jinak by se z řádku vylomil a četl se
   jako důležitější než výsledek, kvůli kterému se na rozpis chodí. */
.live-link {
  display: inline-block;
  margin-left: .5rem;
  font-size: .78rem;
  white-space: nowrap;
}

.tablet-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--text);
  background: var(--hover);
  padding: .1rem .35rem;
  border-radius: 4px;
}

/* Políčko, které se nevyplňuje: karta utkání hraného v SetDarts. Legy
   i statistiky se tam zapsaly a sem přijdou hookem.

   Šedivé, ne jen `readonly`. Samotný atribut je nápis pro prohlížeč —
   vypadá to jako obyčejné pole, kapitán do něj klikne, nic se nestane a
   hledá, čím si formulář zablokoval. Barva to řekne dřív než ten klik.

   Kurzor zůstává `default`, ne `not-allowed`: pole se dá označit a zkopírovat,
   což je u čísel, která se přepisují jinam, k něčemu — zakázaná ruka by tvrdila
   opak. Tabulátor je přeskočí (`tabindex="-1"` z formuláře), protože prázdná
   zastávka mezi sestavami plete víc než pomáhá. */
.cardsheet input[readonly],
.gamesheet input[readonly] {
  background: var(--hover);
  color: var(--muted);
  border-color: var(--line);
  cursor: default;
}
.cardsheet input[readonly]:focus,
.gamesheet input[readonly]:focus {
  outline: none;
  border-color: var(--line);
  box-shadow: none;
}

/* Kód na kartě: opisuje se po znacích do tabletu uprostřed večera, takže
   větší a s rozestupem. Jednolité písmo proto, že „U9TKW2“ se v proporcionálním
   fontu čte hůř, než se zdá — a překlep znamená, že se tablet nepřipojí
   a nikdo neví proč. (Nuly a jedničky v něm nejsou, o to se stará SetDarts.) */
.tablet-code-big {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--hover);
  color: var(--text);
}

/* Výběr hráče v řádku, dokud nepadlo nasazení. Řádek je na střídání a střídat
   není koho — jména se do něj dostanou z panelu Nasazení, který do těchhle
   selectů píše.

   Proto ne `disabled`: zakázané pole by Django z POSTu zahodilo a sestava by
   se neuložila vůbec. Tohle je zámek pro ruku a oko — neklikatelné, mimo
   tabulátor, šedivé jako zamčené legy. Skutečné pravidlo („nasazení jednou,
   celé naráz“) drží služba. */
.cardsheet select.is-locked {
  pointer-events: none;
  background: var(--hover);
  color: var(--muted);
  border-color: var(--line);
}