@charset "UTF-8";

/* =========================================================================
   Zápasový zpravodaj JMOP – vzhled
   Barvy: tráva a inkoust na světlém papíře, okrová jen pro „dnes“.
   Písma: IBM Plex Sans Condensed (titulky), IBM Plex Sans (text),
          IBM Plex Mono (časy, čísla utkání, skóre).
   ========================================================================= */

:root {
  --papir:        #edefe7;
  --papir-2:      #f7f8f2;
  --karta:        #fcfdf8;
  --inkoust:      #131d17;
  --inkoust-2:    #55625a;
  --travnik:      #2c6b47;
  --travnik-tmavy:#17402b;
  --okr:          #b8830f;
  --okr-svetly:   #f3e4bd;
  --lajna:        rgba(19, 29, 23, .13);
  --lajna-silna:  rgba(19, 29, 23, .30);
  --barva:        var(--inkoust-2);

  --titulky: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --text:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --sirka: 68rem;
  --vyska-filtru: 0px;
}

* { box-sizing: border-box; }

/* ---------------------------------------------------------------- archiv
   Odehrané ročníky mají teplou paletu, aby na první pohled bylo poznat, že
   nejde o probíhající sezónu. Mění se jen odstíny, rozvržení zůstává stejné.
   Barvy kategorií se nepřebarvují – ty musí zůstat stejné napříč ročníky. */

body.archiv {
  --papir:        #f1ede4;
  --papir-2:      #faf7f0;
  --karta:        #fdfbf6;
  --inkoust:      #211a12;
  --inkoust-2:    #61564a;
  --travnik:      #a95419;   /* pálená oranžová v roli hlavní barvy */
  --travnik-tmavy:#6b3310;
  --okr:          #2c6b47;   /* zvýraznění naopak zezelená, ať je vidět */
  --okr-svetly:   #dcebdf;
  --lajna:        rgba(33, 26, 18, .13);
  --lajna-silna:  rgba(33, 26, 18, .30);
}

.odznak-archiv {
  display: inline-block;
  margin-inline-start: .6em;
  padding: .12em .5em .16em;
  border: 1px solid rgba(250, 247, 240, .45);
  font: 600 .62rem/1.25 var(--text);
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: .12em;
}

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

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

body {
  margin: 0;
  background: var(--papir);
  color: var(--inkoust);
  font: 400 clamp(.95rem, .35vw + .88rem, 1.02rem)/1.5 var(--text);
  font-feature-settings: "tnum" 0;
}

.obal { width: min(100% - 2.4rem, var(--sirka)); margin-inline: auto; }

.jen-pro-ctecky {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

a { color: var(--travnik-tmavy); }

:focus-visible {
  outline: 2px solid var(--travnik);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- hlavička */

.hlavicka {
  background: var(--travnik-tmavy);
  color: var(--papir-2);
  padding: clamp(1.4rem, 4vw, 2.6rem) 0 clamp(1.2rem, 3vw, 2rem);
  /* jemné vodorovné lajny jako na hřišti */
  background-image: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 7px);
}

.nadtitulek {
  margin: 0 0 .5rem;
  font: 600 .74rem/1.3 var(--text);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(247, 248, 242, .62);
}

.znacka {
  margin: .12em 0 0;
  font-family: var(--titulky);
  font-weight: 700;
  font-size: clamp(2.5rem, 10.5vw, 6rem);
  line-height: .88;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.znacka__slovo { display: inline-block; }

.znacka__slovo--obrys {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(247, 248, 242, .8);
}

@supports not (-webkit-text-stroke: 1px #000) {
  .znacka__slovo--obrys { color: rgba(247, 248, 242, .55); }
}

.sezona {
  margin: .95rem 0 0;
  font: 500 .95rem/1 var(--data);
  letter-spacing: .06em;
  color: rgba(247, 248, 242, .78);
}
.sezona span { color: var(--papir-2); }
.sezona__lomeno { color: rgba(247, 248, 242, .45); padding-inline: .1em; }

/* přepínač ročníků */
.rocniky { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }

.rocnik {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  padding: .28rem .6rem .3rem;
  border: 1px solid rgba(247, 248, 242, .3);
  color: rgba(247, 248, 242, .8);
  text-decoration: none;
  font: 500 .84rem/1.2 var(--data);
  letter-spacing: .02em;
}
.rocnik:not(.rocnik--vybrany):hover { border-color: var(--papir-2); color: var(--papir-2); }

.rocnik--vybrany {
  background: var(--papir-2);
  border-color: var(--papir-2);
  color: var(--travnik-tmavy);
  font-weight: 600;
}

.blok .rocnik__stav {
  margin-inline-start: .45em;
  font: 500 .62rem/1 var(--text);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

.rocnik__stav {
  font: 500 .64rem/1 var(--text);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .65;
}

/* ------------------------------------------------------- nejbližší hrací den */

.dalsi {
  margin: clamp(1.4rem, 4vw, 2.6rem) 0 clamp(1rem, 2.5vw, 1.6rem);
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--lajna);
}

.dalsi__stitek {
  margin: 0 0 .35rem;
  font: 600 .72rem/1 var(--text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--travnik);
}

.dalsi__den {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .5em;
  font-family: var(--titulky);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
}

.dalsi__dow {
  font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--travnik);
}

.dalsi__datum { font-size: clamp(2.1rem, 8.5vw, 4.2rem); }

.dalsi__souhrn {
  margin: .5rem 0 0;
  font: 500 .95rem/1.45 var(--data);
  color: var(--inkoust-2);
}

.dalsi__odkaz { margin: .6rem 0 0; }
.dalsi__odkaz a {
  font: 600 .88rem/1 var(--text);
  text-decoration: none;
  border-bottom: 2px solid var(--travnik);
  padding-bottom: .15em;
}
.dalsi__odkaz a:hover { color: var(--travnik); }

/* ------------------------------------------------------------- pás sezóny */

.pas { margin: 0 0 clamp(1.2rem, 3vw, 2rem); }

.pas__dny {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0 0 1.35rem;
  list-style: none;
  height: 5.5rem;
  border-bottom: 1px solid var(--lajna-silna);
  position: relative;
}

.pas__polozka { flex: 1 1 0; min-width: 3px; position: relative; height: 100%; }

.pas__prestavka {
  flex: 0 1 7rem;
  min-width: 2.5rem;
  align-self: stretch;
  position: relative;
}
.pas__prestavka::before {
  content: "";
  position: absolute;
  inset-inline: .35rem;
  bottom: 0;
  border-bottom: 1px dashed var(--lajna-silna);
}
.pas__prestavka span {
  position: absolute;
  bottom: .3rem;
  inset-inline: 0;
  text-align: center;
  font: 500 .62rem/1 var(--text);
  letter-spacing: .04em;
  color: var(--inkoust-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pas__den {
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.pas__sloupec {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: calc(14% + var(--v, .2) * 86%);
  background: var(--travnik);
  transition: background-color .15s ease, height .2s ease;
}

.pas__den--minule .pas__sloupec { background: rgba(44, 107, 71, .32); }
.pas--archiv .pas__den--minule .pas__sloupec { background: var(--travnik); }
.pas__den:hover .pas__sloupec,
.pas__den:focus-visible .pas__sloupec { background: var(--okr); }
.pas__den--prazdny .pas__sloupec { background: var(--lajna); height: 4px; }

.pas__polozka--mesic::after {
  content: attr(data-mesic);
  position: absolute;
  bottom: -1.15rem;
  left: 0;
  font: 500 .66rem/1 var(--data);
  color: var(--inkoust-2);
  letter-spacing: .02em;
}

.pas__legenda {
  margin: .45rem 0 0;
  font: 400 .78rem/1.4 var(--text);
  color: var(--inkoust-2);
}
.pas__legenda [data-role="pas-shrnuti"] { color: var(--inkoust); font-weight: 500; }

/* ---------------------------------------------------------------- filtry */

.filtry {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 1.5rem;
  padding: .7rem 0 .6rem;
  background: color-mix(in srgb, var(--papir) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lajna);
  display: grid;
  gap: .55rem;
}

.filtry__lista,
.filtry__radek { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem; }

.filtry__panel { display: grid; gap: .55rem; }

.tlacitko--filtr { display: none; }

.stitky {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.stitek { position: relative; }
.stitek input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }

.stitek span {
  display: inline-block;
  padding: .3rem .6rem .32rem;
  border: 1px solid var(--lajna-silna);
  border-left: 3px solid var(--barva);
  background: var(--karta);
  font: 500 .82rem/1.15 var(--text);
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}

.stitek input:checked + span {
  background: var(--barva);
  border-color: var(--barva);
  color: #fff;
}
.stitek input:focus-visible + span { outline: 2px solid var(--travnik); outline-offset: 2px; }
.stitek:hover span { background: var(--papir-2); }
.stitek input:checked + span:hover { background: var(--barva); }

.pole { display: flex; align-items: center; gap: .4rem; }
.pole__popis {
  font: 600 .7rem/1 var(--text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inkoust-2);
}
.pole select,
.pole input {
  font: 400 .88rem/1.2 var(--text);
  padding: .34rem .5rem;
  border: 1px solid var(--lajna-silna);
  background: var(--karta);
  color: inherit;
  border-radius: 0;
  max-width: 100%;
}
.pole--hledat { flex: 1 1 12rem; }
.pole--hledat input { flex: 1 1 auto; min-width: 0; }

.prepinac { display: flex; border: 1px solid var(--lajna-silna); background: var(--karta); }
.prepinac label { position: relative; }
.prepinac input { position: absolute; opacity: 0; inset: 0; width: 100%; cursor: pointer; }
.prepinac span {
  display: block;
  padding: .34rem .65rem;
  font: 500 .82rem/1.2 var(--text);
  white-space: nowrap;
}
.prepinac input:checked + span { background: var(--travnik-tmavy); color: var(--papir-2); }
.prepinac input:focus-visible + span { outline: 2px solid var(--travnik); outline-offset: -2px; }

.tlacitko {
  font: 500 .82rem/1.2 var(--text);
  padding: .38rem .7rem;
  border: 1px solid var(--lajna-silna);
  background: var(--karta);
  color: var(--inkoust);
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
}
.tlacitko:hover { background: var(--papir-2); border-color: var(--travnik); }
.tlacitko--odeslat { background: var(--travnik-tmavy); color: var(--papir-2); border-color: var(--travnik-tmavy); }
.tlacitko--odeslat:hover { background: var(--travnik); border-color: var(--travnik); color: #fff; }

/* Když funguje JavaScript, tlačítko pro odeslání filtru není potřeba. Platí to
   jen pro filtry – přihlašovací formulář musí své tlačítko mít vždy. */
.js .filtry .tlacitko--odeslat,
.js .muj-oddil .tlacitko--odeslat { display: none; }

.filtry__stav {
  margin: 0;
  margin-inline-end: auto;
  font: 500 .8rem/1.3 var(--data);
  color: var(--inkoust-2);
}

/* ------------------------------------------------------------- kalendář */

.kalendar { margin-bottom: 2rem; scroll-margin-top: calc(var(--vyska-filtru) + 1rem); }

.kalendar__ovladani {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.kalendar__nazev {
  margin: 0;
  order: -1;
  font: 700 clamp(1.1rem, 3.2vw, 1.5rem)/1.1 var(--titulky);
  text-transform: uppercase;
  letter-spacing: .01em;
  flex: 1 1 auto;
}

.kalendar__sip {
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--lajna-silna);
  background: var(--karta);
  color: var(--inkoust);
  font-size: 1rem;
  cursor: pointer;
}
.kalendar__sip:hover { background: var(--travnik-tmavy); color: var(--papir-2); }
.kalendar__sip[disabled] { opacity: .35; cursor: default; }
.kalendar__sip[disabled]:hover { background: var(--karta); color: var(--inkoust); }

.kalendar__mrizka {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--lajna);
  border: 1px solid var(--lajna);
}

.kalendar__zahlavi {
  background: var(--papir);
  padding: .3rem .4rem;
  font: 600 .68rem/1 var(--text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inkoust-2);
  text-align: center;
}

.kalendar__bunka {
  background: var(--karta);
  min-height: 3.6rem;
  padding: .3rem .35rem .4rem;
  display: flex;
  flex-direction: column;
  gap: .22rem;
  text-align: left;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: default;
}
.kalendar__bunka--mimo { background: var(--papir); opacity: .5; }
.kalendar__bunka--hraci { cursor: pointer; }
.kalendar__bunka--hraci:hover { background: var(--papir-2); box-shadow: inset 0 0 0 2px var(--travnik); }
.kalendar__bunka--dnes { box-shadow: inset 0 0 0 2px var(--okr); background: var(--okr-svetly); }
.kalendar__bunka--vikend .kalendar__cislo { color: var(--travnik); }

.kalendar__cislo { font: 500 .82rem/1 var(--data); color: var(--inkoust-2); }
.kalendar__hraci .kalendar__cislo { color: var(--inkoust); font-weight: 600; }

.kalendar__pruhy { display: flex; flex-direction: column; gap: 2px; }
.kalendar__pruh { height: 4px; background: var(--barva); }
.kalendar__vic { font: 500 .66rem/1 var(--data); color: var(--inkoust-2); }

.kalendar__napoveda {
  margin: .5rem 0 0;
  font: 400 .78rem/1.4 var(--text);
  color: var(--inkoust-2);
}

/* --------------------------------------------------------------- seznam */

.den { margin-bottom: 1.6rem; scroll-margin-top: calc(var(--vyska-filtru) + 1rem); }
.den[hidden] { display: none; }

.den__hlava {
  position: sticky;
  top: var(--vyska-filtru);
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin: 0 0 .4rem;
  padding: .35rem 0 .3rem;
  background: color-mix(in srgb, var(--papir) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--inkoust);
  font-family: var(--titulky);
  font-weight: 700;
}

.den__dow {
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--travnik);
}
.den__datum { font-size: clamp(1.05rem, 3vw, 1.3rem); letter-spacing: -.01em; }
.den__pocet {
  margin-inline-start: auto;
  font: 500 .78rem/1 var(--data);
  color: var(--inkoust-2);
}

.den--dnes .den__hlava { border-bottom-color: var(--okr); }
.den--dnes .den__dow { color: var(--okr); }
.den--minule { opacity: .72; }
.seznam--archiv .den--minule { opacity: 1; }
.den--zvyrazneno .den__hlava { border-bottom-color: var(--okr); }

/* Sloupce se určují na seznamu, jednotlivé zápasy je přebírají přes subgrid.
   Bez toho má každý řádek vlastní mřížku a skóre se mezi řádky posouvá. */
.zapasy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 3.6rem 8.5rem minmax(0, 1fr) auto auto auto;
}

/* Chybějící údaj (skóre, rozhodčí, poznámka) nechá svou buňku prázdnou,
   takže zarovnání zůstane stejné napříč celým seznamem. */
.zapas {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-areas:
    "cas kat utkani      skore       meta        rozhodci"
    "cas kat podrobnosti podrobnosti podrobnosti podrobnosti";
  align-items: baseline;
  gap: .1rem .7rem;
  padding: .42rem .5rem .42rem .55rem;
  border-bottom: 1px solid var(--lajna);
  border-left: 3px solid var(--barva);
  background: var(--karta);
}
.zapas[hidden] { display: none; }
.zapas:hover { background: var(--papir-2); }

.zapas__cas {
  grid-area: cas;
  font: 500 .88rem/1.4 var(--data);
  color: var(--inkoust);
  font-variant-numeric: tabular-nums;
}

.zapas__kategorie {
  grid-area: kat;
  font: 600 .72rem/1.5 var(--text);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--barva);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zapas__utkani { grid-area: utkani; }
.zapas__tym { font-weight: 500; }
.zapas__vs { color: var(--inkoust-2); white-space: nowrap; }
.zapas__turnaj { font-weight: 600; }
.zapas__poradatel { color: var(--inkoust-2); font-size: .92em; }

.zapas__meta {
  grid-area: meta;
  font: 400 .76rem/1.5 var(--data);
  color: var(--inkoust-2);
  white-space: nowrap;
}

.zapas__skore {
  grid-area: skore;
  margin-inline-end: .4rem;
  font: 600 .95rem/1.4 var(--data);
  font-variant-numeric: tabular-nums;
}
.zapas__polocas { font-weight: 400; color: var(--inkoust-2); margin-inline-start: .35em; }

/* Poznámka je výjimečná, dostane vlastní řádek pod utkáním. */
.zapas__podrobnosti {
  grid-area: podrobnosti;
  font: 400 .78rem/1.4 var(--text);
  color: var(--inkoust-2);
}

.zapas__rozhodci {
  grid-area: rozhodci;
  font: 400 .76rem/1.5 var(--text);
  color: var(--inkoust-2);
  white-space: nowrap;
}
/* Samotné jméno by nebylo poznat, proto nenápadný popisek. */
.zapas__rozhodci::before {
  content: "rozhodčí ";
  font-size: .88em;
  opacity: .75;
}

/* Prohlížeče bez subgridu: řádky se mezi sebou nezarovnají, obsah ale zůstane
   čitelný a na svém místě. */
@supports not (grid-template-columns: subgrid) {
  .zapasy { display: block; }
  .zapas { grid-template-columns: 3.6rem 8.5rem minmax(0, 1fr) auto auto auto; }

  @media (max-width: 46rem) {
    .zapas { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
  }
}

/* Jednoduché zobrazení: zůstane čas, kategorie, soupeři a skóre. Kolo, číslo
   utkání, rozhodčí ani poznámka se nezobrazují – zápas se tím vejde na jeden
   řádek i na telefonu. */
.zobrazeni-jednoduche .zapas__meta,
.zobrazeni-jednoduche .zapas__rozhodci,
.zobrazeni-jednoduche .zapas__podrobnosti { display: none; }

/* Za skóre zůstává prázdný sloupec, aby zůstalo přibližně tam, kde je
   v podrobném zobrazení, a při přepnutí neuskočilo na pravý okraj. */
.zobrazeni-jednoduche .zapasy {
  grid-template-columns: 3.6rem 8.5rem minmax(0, 1fr) auto minmax(0, .6fr);
}

.zobrazeni-jednoduche .zapas {
  grid-template-areas: "cas kat utkani skore konec";
}

.zapas--turnaj { border-left-style: dashed; }

/* --------------------------------------------------------------- ostatní */

.hlaska {
  margin: 1.5rem 0;
  padding: .8rem 1rem;
  background: var(--karta);
  border-left: 3px solid var(--travnik);
  font-size: .95rem;
}
.hlaska--chyba { border-left-color: #a8402c; }
.hlaska code { font-family: var(--data); font-size: .9em; }

.paticka {
  margin-top: 2.5rem;
  padding: 1.4rem 0 2rem;
  border-top: 1px solid var(--lajna);
  color: var(--inkoust-2);
  font-size: .82rem;
}
.paticka p { margin: .2rem 0; }

.paticka__zdroj { margin-top: .6rem; }

.paticka__podpis {
  margin-top: 1.1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--lajna);
  color: var(--travnik-tmavy);
  font-style: italic;
}

/* Vlastník domény a verze tvoří spolu s podpisem uzavírající blok. */
.paticka__domena {
  margin-top: .35rem;
  font-size: .8rem;
}

.paticka__verze {
  font: 400 .74rem/1.4 var(--data);
  color: var(--inkoust-2);
}
.paticka__zdroj--chyba {
  padding: .4rem .6rem;
  border-left: 3px solid #a8402c;
  background: var(--karta);
  color: var(--inkoust);
}

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

.rozcestnik {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: 1.4rem 0 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--lajna);
  font: 500 .86rem/1.4 var(--text);
}
.rozcestnik span { color: var(--inkoust-2); }
.rozcestnik strong { font-weight: 600; }

.odkaz-tabulky {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font: 600 .84rem/1.2 var(--text);
  text-decoration: none;
  padding: .3rem .65rem;
  border: 1px solid var(--travnik);
  color: var(--travnik-tmavy);
  background: var(--karta);
}
.odkaz-tabulky:hover { background: var(--travnik-tmavy); border-color: var(--travnik-tmavy); color: var(--papir-2); }

.bloky { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }

.blok {
  padding: .4rem .8rem;
  border: 1px solid var(--lajna-silna);
  background: var(--karta);
  color: var(--inkoust);
  text-decoration: none;
  font: 500 .88rem/1.3 var(--text);
}
.blok:hover { border-color: var(--travnik); }
.blok--vybrany {
  background: var(--travnik-tmavy);
  border-color: var(--travnik-tmavy);
  color: var(--papir-2);
  font-weight: 600;
}

.tabulky__nadpis {
  margin: 0 0 1.2rem;
  font: 700 clamp(1.2rem, 3.4vw, 1.6rem)/1.1 var(--titulky);
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.kotvy { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.8rem; }
.kotvy a {
  padding: .24rem .55rem .26rem;
  border-left: 3px solid var(--barva);
  border-block: 1px solid var(--lajna);
  border-right: 1px solid var(--lajna);
  background: var(--karta);
  color: var(--inkoust);
  text-decoration: none;
  font: 500 .8rem/1.2 var(--text);
}
.kotvy a:hover { background: var(--barva); border-color: var(--barva); color: #fff; }

.tabulka { margin-bottom: 2.2rem; scroll-margin-top: 1rem; }

.tabulka__nazev {
  margin: 0 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--barva);
  font: 700 clamp(1.05rem, 3vw, 1.3rem)/1.15 var(--titulky);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--barva);
}

.tabulka__obal { overflow-x: auto; }

.poradi {
  width: 100%;
  border-collapse: collapse;
  background: var(--karta);
  font-size: .9rem;
}

.poradi th,
.poradi td {
  padding: .38rem .45rem;
  border-bottom: 1px solid var(--lajna);
  text-align: right;
  vertical-align: baseline;
}

.poradi thead th {
  font: 600 .7rem/1.2 var(--text);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inkoust-2);
  border-bottom: 1px solid var(--lajna-silna);
  white-space: nowrap;
}

.poradi abbr { text-decoration: none; border-bottom: 1px dotted var(--lajna-silna); cursor: help; }

.poradi__misto {
  width: 2.4rem;
  font: 500 .85rem/1.4 var(--data);
  color: var(--inkoust-2);
  text-align: right;
}

.poradi .poradi__tym {
  text-align: left;
  font: 500 .92rem/1.35 var(--text);
  width: 99%;
}

.poradi__cislo,
.poradi__skore,
.poradi__body {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.poradi__cislo { width: 2.2rem; }
.poradi__skore { width: 4.6rem; color: var(--inkoust-2); }
.poradi__rozdil { color: var(--inkoust-2); }
.poradi__body { width: 3rem; font-weight: 600; }
.poradi__cislo--prazdno { color: var(--inkoust-2); opacity: .6; }

.poradi tbody tr:hover { background: var(--papir-2); }

.poradi__radek--prvni .poradi__tym { font-weight: 600; }
.poradi__radek--prvni .poradi__misto { color: var(--okr); font-weight: 600; }
.poradi__radek--prvni td,
.poradi__radek--prvni th { border-bottom-color: var(--lajna-silna); }

.tabulka__legenda {
  margin: .5rem 0 0;
  font: 400 .78rem/1.45 var(--text);
  color: var(--inkoust-2);
}

/* ------------------------------------------------------------ nápověda */

.kotvy--obsah a { --barva: var(--travnik); }

.navod__uvod {
  margin: 0 0 1.4rem;
  max-width: 42rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.navod {
  margin-bottom: 2rem;
  max-width: 42rem;
  scroll-margin-top: 1rem;
}

.navod h2 {
  margin: 0 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--travnik);
  font: 700 clamp(1.05rem, 3vw, 1.3rem)/1.15 var(--titulky);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--travnik-tmavy);
}

.navod p { margin: .6rem 0; line-height: 1.6; }
.navod code { font: 500 .88em/1.4 var(--data); }

.navod__ukazka {
  padding: .5rem .7rem;
  background: var(--karta);
  border-left: 3px solid var(--lajna-silna);
  overflow-wrap: anywhere;
}

.navod__seznam { margin: .8rem 0 0; }

.navod__seznam dt {
  margin-top: .8rem;
  font-weight: 600;
}
.navod__seznam dt:first-child { margin-top: 0; }

.navod__seznam dd {
  margin: .15rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--lajna);
  color: var(--inkoust-2);
  line-height: 1.55;
}

.navod__znak {
  font-family: var(--data);
  font-weight: 500;
  color: var(--inkoust);
}

/* drobné ukázky ovládacích prvků přímo v textu */
.stitek--ukazka,
.tlacitko--ukazka {
  vertical-align: baseline;
  cursor: default;
  pointer-events: none;
}
.stitek--ukazka span { padding-block: .12rem .14rem; font-size: .78rem; }
.tlacitko--ukazka { padding: .14rem .45rem; font-size: .78rem; }

/* ---------------------------------------------------------- přehled (dashboard) */

.muj-oddil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1.4rem 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--lajna);
}

.muj-oddil__poznamka {
  font-size: .78rem;
  color: var(--inkoust-2);
}

.muj-oddil__vysvetleni {
  flex-basis: 100%;
  margin: .1rem 0 0;
  font-size: .82rem;
  color: var(--inkoust-2);
}

.mrizka {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}

.mrizka__strana { display: grid; gap: 1.2rem; position: sticky; top: 1rem; }

.panel { margin-bottom: 1.8rem; }
.mrizka__strana .panel { margin-bottom: 0; }

.panel__nazev {
  margin: 0 0 .7rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--inkoust);
  font: 700 clamp(1rem, 2.6vw, 1.2rem)/1.15 var(--titulky);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.panel__poznamka,
.panel__prazdno {
  margin: 0 0 .8rem;
  color: var(--inkoust-2);
  font-size: .9rem;
}

.panel__prazdno {
  padding: .9rem 1rem;
  background: var(--karta);
  border-left: 3px solid var(--lajna-silna);
}

.den__vice {
  margin: .3rem 0 0;
  font-size: .82rem;
}
.den__vice a { color: var(--inkoust-2); }
.den__vice a:hover { color: var(--travnik); }

.panel__dal { margin: .8rem 0 0; }
.panel__dal a {
  font: 600 .88rem/1.2 var(--text);
  text-decoration: none;
  border-bottom: 2px solid var(--travnik);
  padding-bottom: .12em;
}
.panel__dal a:hover { color: var(--travnik); }

/* v přehledu jsou hlavičky dnů kratší a nelepí se */
.panel .den { margin-bottom: 1.1rem; }
.panel .den__hlava { position: static; backdrop-filter: none; background: none; }

.panel--oznameni { padding: .9rem 1rem 1rem; background: var(--karta); border-left: 3px solid var(--okr); }
.panel--oznameni .panel__nazev { border-bottom-color: var(--okr); }
.oznameni p { margin: .4rem 0; font-size: .92rem; line-height: 1.55; }
.oznameni p:first-child { margin-top: 0; }

.rozcestí { margin: 0; padding: 0; list-style: none; }
.rozcestí li { border-bottom: 1px solid var(--lajna); }
.rozcestí a {
  display: block;
  padding: .5rem .1rem;
  text-decoration: none;
  font: 500 .9rem/1.35 var(--text);
  color: var(--inkoust);
}
.rozcestí a:hover { color: var(--travnik); padding-left: .35rem; }

.cisla { margin: 0; display: grid; gap: .1rem; }
.cisla > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .32rem 0;
  border-bottom: 1px solid var(--lajna);
}
.cisla dt { color: var(--inkoust-2); font-size: .86rem; }
.cisla dd {
  margin: 0;
  font: 600 1.05rem/1 var(--data);
  font-variant-numeric: tabular-nums;
}

.panel--tabulka { margin-top: .6rem; }
.kotvy--tabulky { margin-bottom: 1rem; }
.kotvy a.kotvy--vybrano {
  background: var(--barva);
  border-color: var(--barva);
  color: #fff;
  font-weight: 600;
}

.poradi__radek--muj { background: var(--okr-svetly); }
.poradi__radek--muj .poradi__tym { font-weight: 600; }

@media (max-width: 60rem) {
  .mrizka { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mrizka__strana { position: static; }
}

/* ------------------------------------------------------------- o webu */

.autori { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }

.autor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .2rem .9rem;
  padding: .6rem .7rem;
  background: var(--karta);
  border-left: 3px solid var(--travnik);
}

.autor__jmeno { font-weight: 600; }

.autor__role {
  grid-column: 1;
  font-size: .84rem;
  color: var(--inkoust-2);
}

.autor__mail {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font: 500 .92rem/1.3 var(--data);
  color: var(--travnik-tmavy);
  word-break: break-all;
}

.navod__poznamka {
  font-size: .86rem;
  color: var(--inkoust-2);
}

@media (max-width: 46rem) {
  .autor {
    grid-template-columns: minmax(0, 1fr);
  }
  .autor__mail { grid-row: auto; grid-column: 1; align-self: start; margin-top: .2rem; }
}

/* --------------------------------------------------------- zpravodaje */

.zpravodaje { list-style: none; margin: 0 0 1.2rem; padding: 0; }

.zpravodaj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: .3rem .9rem;
  padding: .6rem .7rem .6rem .6rem;
  border-bottom: 1px solid var(--lajna);
  border-left: 3px solid var(--travnik);
  background: var(--karta);
}
.zpravodaj:hover { background: var(--papir-2); }
.zpravodaj--nejnovejsi { border-left-color: var(--okr); }

.zpravodaj__nazev {
  font: 500 1rem/1.35 var(--text);
  color: var(--inkoust);
  text-decoration: none;
}
.zpravodaj__nazev:hover { color: var(--travnik); text-decoration: underline; }

.zpravodaj__typ {
  display: inline-block;
  margin-inline-start: .5em;
  padding: .05em .4em .1em;
  border: 1px solid var(--lajna-silna);
  font: 600 .62rem/1.5 var(--data);
  letter-spacing: .08em;
  color: var(--inkoust-2);
  vertical-align: .12em;
}

.zpravodaj__datum {
  font: 400 .82rem/1.4 var(--data);
  color: var(--inkoust-2);
  white-space: nowrap;
}

.zpravodaj__odznak {
  margin-inline-start: .5em;
  padding: .08em .45em .12em;
  background: var(--okr-svetly);
  color: var(--inkoust);
  font: 600 .62rem/1.5 var(--text);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zpravodaj__stahnout {
  font: 500 .84rem/1.2 var(--text);
  padding: .28rem .6rem;
  border: 1px solid var(--lajna-silna);
  background: var(--papir-2);
  color: var(--inkoust);
  text-decoration: none;
  white-space: nowrap;
}
.zpravodaj__stahnout:hover { background: var(--travnik-tmavy); border-color: var(--travnik-tmavy); color: var(--papir-2); }

.zpravodaje__poznamka {
  font-size: .86rem;
  color: var(--inkoust-2);
  line-height: 1.5;
}

@media (max-width: 46rem) {
  .zpravodaj {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .35rem;
  }
  .zpravodaj__nazev { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- kalendář akcí */

.akce { margin-bottom: 2.2rem; }

.akce__nazev {
  margin: 0 0 .6rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--inkoust);
  font: 700 clamp(1.05rem, 3vw, 1.3rem)/1.15 var(--titulky);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.akce__seznam { list-style: none; margin: 0; padding: 0; }

.akce__polozka {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: .2rem .9rem;
  align-items: baseline;
  padding: .5rem .6rem .5rem .55rem;
  border-bottom: 1px solid var(--lajna);
  border-left: 3px solid var(--travnik);
  background: var(--karta);
}
.akce__polozka:hover { background: var(--papir-2); }

.akce__polozka--minula { opacity: .6; border-left-color: var(--lajna-silna); }
.akce__polozka--dnes { border-left-color: var(--okr); background: var(--okr-svetly); }

.akce__datum {
  display: flex;
  align-items: baseline;
  gap: .45em;
  font: 500 .88rem/1.4 var(--data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.akce__dow {
  font: 600 .68rem/1.5 var(--text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--travnik);
}
.akce__polozka--minula .akce__dow { color: var(--inkoust-2); }

.akce__popis { line-height: 1.45; }

.akce__poznamka {
  margin-top: 1.6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--lajna);
  font-size: .86rem;
  color: var(--inkoust-2);
}

@media (max-width: 46rem) {
  .akce__polozka {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .1rem;
  }
  .akce__popis { font-size: .92rem; }
}

/* ------------------------------------------------------------- kontakty */

.odhlasit { color: rgba(247, 248, 242, .85); }
.odhlasit:hover { color: var(--papir-2); }

.prihlaseni {
  max-width: 30rem;
  margin: 2rem 0;
  padding: 1.4rem 1.5rem 1.6rem;
  background: var(--karta);
  border-left: 3px solid var(--travnik);
}

.prihlaseni__nazev {
  margin: 0 0 .5rem;
  font: 700 clamp(1.1rem, 3vw, 1.4rem)/1.15 var(--titulky);
  text-transform: uppercase;
}

.prihlaseni__popis { margin: 0 0 1rem; color: var(--inkoust-2); font-size: .92rem; }

.prihlaseni__formular { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.prihlaseni__formular input[type="password"] {
  font: 400 .95rem/1.2 var(--text);
  padding: .42rem .55rem;
  border: 1px solid var(--lajna-silna);
  background: var(--papir-2);
}

.filtry--kontakty { position: static; backdrop-filter: none; background: none; }

/* Tabulka kontaktů se roztáhne přes celou šířku okna, ne jen přes obsahový
   sloupec – u Oddílů je jedenáct sloupců a v užším prostoru se špatně ovládá. */
.kontakty__obal {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: clamp(.8rem, 2.5vw, 1.4rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Tabulka, která se ani přes celou šířku okna nevejde, dostane vlastní okno
   s rolováním – vodorovný posuvník je pak po ruce, ne až pod celou tabulkou.
   Třídu přidává skript jen tehdy, když je potřeba; jinak stránka roluje běžně. */
.kontakty__obal--siroka {
  max-height: calc(100vh - 5rem);
  overflow: auto;
}

.kontakty {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--karta);
  font-size: .88rem;
}

.kontakty th,
.kontakty td {
  padding: .42rem .5rem;
  border-bottom: 1px solid var(--lajna);
  text-align: left;
  vertical-align: baseline;
}

.kontakty thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--papir);
  font: 600 .7rem/1.25 var(--text);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--inkoust-2);
  border-bottom: 1px solid var(--lajna-silna);
  white-space: nowrap;
}

/* Sloupec s oddílem zůstane vidět i po odrolování doprava, jinak by nebylo
   poznat, ke komu řádek patří. */
.kontakty th:first-child,
.kontakty td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--karta);
  box-shadow: 1px 0 0 var(--lajna);
}
.kontakty thead th:first-child { z-index: 3; background: var(--papir); }
.kontakty tbody tr:hover td:first-child { background: var(--papir-2); }

.kontakty tbody tr:hover { background: var(--papir-2); }
/* Telefon ani e-mail se nemá lámat uprostřed. */
.kontakty td[data-sloupec*="Mobil"],
.kontakty td[data-sloupec*="Telefon"] { white-space: nowrap; }
.kontakty td[data-sloupec="Oddíl"] { white-space: nowrap; }
.kontakty tr[hidden] { display: none; }
.kontakty a { color: var(--travnik-tmavy); }
.kontakty__prazdno,
.kontakt__prazdno { color: var(--inkoust-2); opacity: .5; }
.kontakt__ano { font-weight: 600; color: var(--travnik); }

/* Na úzkém displeji se tabulka rozpadne na kartičky, ať se nemusí rolovat do stran. */
@media (max-width: 46rem) {
  .kontakty__obal {
    width: auto;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
  }

  .kontakty thead { display: none; }
  .kontakty td:first-child { position: static; box-shadow: none; background: none; }
  .kontakty,
  .kontakty tbody,
  .kontakty tr,
  .kontakty td { display: block; width: 100%; }

  .kontakty tr {
    margin-bottom: .7rem;
    padding: .5rem .6rem .6rem;
    background: var(--karta);
    border-left: 3px solid var(--travnik);
  }

  .kontakty td {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: .5rem;
    padding: .18rem 0;
    border: 0;
  }
  .kontakty td::before {
    content: attr(data-sloupec);
    font: 600 .68rem/1.5 var(--text);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--inkoust-2);
  }
}

/* ------------------------------------------------------ zpět na začátek */

.nahoru {
  position: fixed;
  right: clamp(.7rem, 2.5vw, 1.4rem);
  bottom: calc(clamp(.7rem, 2.5vw, 1.4rem) + env(safe-area-inset-bottom, 0px));
  z-index: 30;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;

  background: var(--travnik-tmavy);
  color: var(--papir-2);
  border: 1px solid var(--travnik-tmavy);
  text-decoration: none;
  font-size: 1.15rem;
  line-height: 1;

  box-shadow: 0 2px 10px rgba(19, 29, 23, .22);
  transition: opacity .18s ease, transform .18s ease, background-color .15s ease;
}

.nahoru:hover { background: var(--travnik); border-color: var(--travnik); }
.nahoru:active { transform: translateY(1px); }

/* Bez JavaScriptu je odkaz vidět pořád, s ním se objeví až po odrolování. */
.js .nahoru {
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
}

.js .nahoru--videt {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media print {
  .nahoru { display: none; }
}

/* ---------------------------------------------------------------- mobil */

@media (max-width: 46rem) {
  .obal { width: min(100% - 1.6rem, var(--sirka)); }

  /* Šipka „nahoru“ je ukotvená k oknu – patička jí uhne, ať nepřekrývá podpis. */
  .paticka { padding-bottom: 4.4rem; }

  /* Název utkání dostane celou šířku, aby se dlouhé názvy oddílů nelámaly po
     slabikách; rozhodčí a poznámka mají vlastní řádek pod skóre. */
  .zapasy { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }

  /* Skóre stojí vpravo vedle kategorie – stejně jako v jednoduchém zobrazení,
     aby při přepnutí neuskakovalo. Podrobnosti se řadí pod to. */
  .zapas {
    grid-template-columns: subgrid;
    grid-template-areas:
      "cas utkani      utkani"
      "cas kat         skore"
      "cas meta        meta"
      "cas rozhodci    rozhodci"
      "cas podrobnosti podrobnosti";
    row-gap: .12rem;
    padding-block: .5rem;
  }

  .zapas__rozhodci { font-size: .74rem; white-space: normal; }

  .zobrazeni-jednoduche .zapasy {
    grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  }
  .zobrazeni-jednoduche .zapas {
    grid-template-areas:
      "cas utkani utkani"
      "cas kat    skore";
  }

  .zapas__utkani { display: block; }
  .zapas__vs { padding-inline: .15em; }
  .zapas__meta { font-size: .72rem; text-align: left; }
  .zapas__kategorie { font-size: .68rem; }

  .pas__dny { height: 4.2rem; gap: 1px; }
  .pas__prestavka span { font-size: .55rem; }
  .pas__vysvetleni { display: none; }

  /* Na malém displeji je málo místa, filtry proto s obsahem odrolují pryč
     a nezabírají část obrazovky trvale. Hlavičky dnů lepivé zůstávají – ty jsou
     úzké a při rolování dlouhým rozpisem se hodí vědět, který den se čte. */
  .filtry { display: flex; flex-direction: column; position: static; }
  .filtry__lista { order: -1; }
  .js .tlacitko--filtr { display: inline-block; }
  .js .filtry--otevreno .tlacitko--filtr {
    background: var(--travnik-tmavy);
    border-color: var(--travnik-tmavy);
    color: var(--papir-2);
  }
  .js .filtry__panel { display: none; }
  .js .filtry--otevreno .filtry__panel { display: grid; }

  .filtry__lista .filtry__stav { flex-basis: 100%; order: 3; }
  .filtry__lista [data-role="ical"],
  .filtry__lista [data-role="vycistit"] { font-size: .76rem; padding: .32rem .5rem; }

  .pole { flex-wrap: wrap; }
  .pole--hledat { flex-basis: 100%; }

  /* Na úzkém displeji ustoupí rozdíl skóre, zbytek tabulky zůstane čitelný. */
  .poradi { font-size: .82rem; }
  .poradi th, .poradi td { padding: .34rem .28rem; }
  .poradi__rozdil { display: none; }

  .zapas__podrobnosti { font-size: .74rem; }
  .poradi__tym { font-size: .84rem; }
  .poradi__misto { width: 1.9rem; }
  .poradi__cislo { width: 1.6rem; }
  .poradi__skore { width: 3.9rem; font-size: .78rem; }

  .kalendar__bunka { min-height: 3.4rem; padding: .25rem .2rem .3rem; }
  .kalendar__cislo { font-size: .72rem; text-align: center; }
  .kalendar__pruh { height: 3px; }
}

/* Prohlížeče bez :has() – řádek se skóre se zalomí, ale zůstane čitelný. */
@media print {
  .filtry, .pas, .kalendar, .dalsi__odkaz { display: none; }
  body { background: #fff; }
  .hlavicka { background: #fff; color: #000; }
  .znacka__slovo--obrys { color: #000; -webkit-text-stroke: 0; }
  .zapas { break-inside: avoid; }
}