/* Blokovy monospace styl: #111 podklad, 5px ramy, zadne zaobleni, zadne stiny.
   Zadny externi zdroj: pismo Cascadia Mono (OFL) lezi vedle stranky.
   Systemove pismo nestaci: anonymni okno Firefoxu ukaze jen zakladni pisma
   systemu a rozvrh by pak nemel stejnou sirku znaku. */

@font-face{
  font-family:"Koleje Mono";
  src:url("CascadiaMono.woff2") format("woff2");
  font-weight:200 700;
  font-display:block;
}

:root{
  --podklad:#111;
  --text:#eee;
  --akcent:#f44;
  --panel:hsl(0,0%,16%);
  --zalozka:hsl(0,0%,13.2%);
  --zalozka-aktivni:hsl(0,0%,30%);
  --vstup:#1d1d1d;
  --druhy-text:hsl(0,0%,70%);
  --ticho:hsl(0,0%,28%);
  --cara:#303030;
  --sedy:#777;
  --sedy-ram:rgb(64.6,64.6,64.6);
  --hover-podklad:rgb(96.9,0,0);
  --mono:"Koleje Mono","Cascadia Mono","DejaVu Sans Mono",Consolas,monospace;
  color-scheme:dark;
}

/* iOS v krajine jinak sam zvetsuje pismo */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
::selection{background-color:var(--text);color:var(--podklad)}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}

body{
  background-color:var(--podklad);
  color:var(--text);
  display:flex;
  flex-direction:column;
  font-family:var(--mono);
  font-size:16px;
  line-height:1.6;
  margin:0 auto;
  max-width:1600px;
  min-height:100vh;
  /* vyrez a Dynamic Island na telefonu (viewport-fit=cover) */
  padding:30px max(30px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(30px,env(safe-area-inset-left));
  width:100%;
}

h2{font-size:30px}
h1,h2,h3,h4{line-height:1.2}

a{color:var(--akcent);outline:0;text-decoration:none}
a:hover,a:focus{text-decoration:underline}

/* ---------- tlacitka ---------- */

button{
  background-color:var(--panel);
  border:solid 5px var(--text);
  color:var(--text);
  font-family:inherit;
  font-size:inherit;
  outline:none;
  overflow:hidden;
  padding:10px 15px;
  text-align:center;
  text-overflow:ellipsis;
  transition:all .1s;
  white-space:nowrap;
  width:min-content;
}
button:disabled{background-color:var(--panel);border-color:var(--sedy-ram);color:var(--sedy)}
button:not(:disabled){cursor:pointer}
/* bez zpozdeni a priblizeni po dvojitem klepnuti */
button,a{touch-action:manipulation}
button:not(:disabled):active{transform:translateY(2px)}
button:not(:disabled):hover,
button:not(:disabled):focus-visible{background-color:hsl(0,0%,20%)}
/* druhotne tlacitko: tmavsi vypln jako neaktivni zalozka */
button.tise{background-color:var(--zalozka)}
button.tise:disabled{background-color:var(--zalozka)}

.prazdno{color:var(--druhy-text)}

.karta{
  background-color:var(--podklad);
  border:solid 5px var(--text);
  display:flex;
  flex-direction:column;
  gap:15px;
  min-width:0;
  padding:15px;
}

/* ---------- menu nahore uprostred ---------- */

.menu{display:flex;justify-content:center}
.menu button:not(:first-child){margin-left:-5px}
/* stranka, ktera je prave otevrena */
.menu button.aktivni,.menu button.aktivni:not(:disabled):hover{background-color:var(--zalozka-aktivni)}

/* ---------- hlavicka karty ---------- */

.hlavicka{
  align-items:center;
  border-bottom:dashed 2px var(--cara);
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  justify-content:space-between;
  /* nahore 5 px + 15 px karty = 20 px, stejne jako dole: nadpis i Obnovit jsou ve stredu pasu */
  padding:5px 20px 20px;
}
.hlavicka>div{min-width:0}
/* nadpis je zaroven prepinac dnu: vybrany bily, ostatni sede, bez ramu.
   Najeti mysi nemeni barvu, jen jmeno mirne zvetsi (bez posunu okolniho textu). */
.prepinac{display:flex;flex-wrap:wrap;gap:0 20px}
.prepinac button,
.prepinac button:not(:disabled):hover,
.prepinac button:not(:disabled):focus-visible{
  background:none;
  border:0;
  color:var(--sedy);
  font-weight:inherit;
  line-height:inherit;
  padding:0;
  width:auto;
}
.prepinac button:not(.aktivni):hover,
.prepinac button:not(.aktivni):focus-visible{transform:scale(1.06)}
.prepinac button:not(.aktivni):active{transform:scale(1.06) translateY(2px)}
.prepinac button.aktivni,
.prepinac button.aktivni:not(:disabled):hover,
.prepinac button.aktivni:not(:disabled):focus-visible{color:var(--text)}
/* chod, ktery den nema: tlumeny, bez zvetseni pri najeti */
.prepinac button:disabled,.prepinac button:disabled:hover{opacity:.4;transform:none}
/* nadpis chodu ve stejnem stylu jako jmena vydejen, jen bez najeti a klikani */
#linux-popis,.hlavicka .popis{color:var(--druhy-text);font-size:15px}
.hlavicka .popis{display:block}

/* ---------- LinuxDays ---------- */

/* Rozvrh z bloku: vyska bloku = delka prednasky, hodiny vlevo, soubezne vedle sebe.
   Levy pruh bloku je uroven, stejne barvy jako zbyvajici porce v menze. */
#linux{gap:0;margin-top:30px}
#linux .prazdno{padding:15px 0 0 20px}
/* den ve sloupcich vedle sebe (jeden, kdyz se vejde); kazdy ma vlastni osu hodin */
.linux-program{align-items:flex-start;display:flex;gap:0 30px;margin:20px 20px 5px}
.linux-sloupec{flex:1 1 0;min-width:0;position:relative}
.linux-program:empty{display:none}
.linux-hodina{
  border-top:dashed 2px var(--cara);
  color:var(--druhy-text);
  font-size:14px;
  left:0;
  line-height:1;
  padding-top:4px;
  position:absolute;
  right:0;
}
.linux-plocha{bottom:0;left:60px;position:absolute;right:0;top:0}
.linux-blok{
  background-color:var(--zalozka);
  border:solid 2px var(--sedy-ram);
  border-left-width:6px;
  color:var(--text);
  display:flex;
  flex-direction:column;
  line-height:1.3;
  overflow:hidden;
  padding:5px 10px;
  position:absolute;
}
.linux-hodina b{font-weight:inherit}
.linux-blok>b{font-weight:700;overflow-wrap:anywhere}
.linux-meta{color:var(--druhy-text);font-size:14px;overflow-wrap:anywhere}
.linux-meta span+span::before{content:" · "}
a.linux-blok{-webkit-tap-highlight-color:transparent}
a.linux-blok:hover,a.linux-blok:focus-visible,a.linux-blok:active{background-color:var(--panel);border-color:var(--text);text-decoration:none}
.linux-blok.uroven-zacatecnici{border-left-color:hsl(130,50%,55%)}
.linux-blok.uroven-pokrocili{border-left-color:hsl(38,100%,60%)}
.linux-blok.uroven-hackeri{border-left-color:var(--akcent)}
.linux-blok.prestavka{background:none;border-style:dashed;border-left-width:2px;justify-content:center}
.linux-blok.prestavka b{color:var(--druhy-text);font-weight:400}
/* Chrome by caru mohl vzit za kotvu posunu a s kazdou minutou posouvat stranku */
.linux-ted{border-top:solid 2px var(--akcent);left:50px;overflow-anchor:none;position:absolute;right:0;z-index:1}
.linux-ted::before{background-color:var(--akcent);content:"";height:10px;left:-5px;position:absolute;top:-6px;width:10px}
/* legenda vpravo v hlavicce, vedle dnu */
.linux-legenda{color:var(--druhy-text);display:flex;flex-wrap:wrap;font-size:14px;gap:5px 20px}
.linux-legenda span[class]::before{content:"";display:inline-block;height:12px;margin-right:8px;width:6px}
.linux-legenda .uroven-zacatecnici::before{background-color:hsl(130,50%,55%)}
.linux-legenda .uroven-pokrocili::before{background-color:hsl(38,100%,60%)}
.linux-legenda .uroven-hackeri::before{background-color:var(--akcent)}

/* ---------- Stanky ---------- */

#stanky{margin-top:30px}
/* seznam ve sloupcich podle sirky okna, na telefonu jeden */
.stanky-seznam{columns:3 340px;column-gap:30px;list-style:none;margin:0;padding:5px 20px 0}
.stanky-seznam li{break-inside:avoid;padding-bottom:15px}
.stanky-seznam a{font-weight:700}
.stanky-seznam p{color:var(--druhy-text);font-size:14px;line-height:1.5;margin:2px 0 0}
.stanky-plan{align-self:center;max-width:900px;width:100%}
.stanky-plan img{background:#fff;border:solid 5px var(--text);display:block;height:auto;width:100%}
.stanky-zdroj{color:var(--sedy);font-size:13px;margin:0;padding:0 20px}

/* Siroka obrazovka s mysi: karta LinuxDays saha ke spodku okna a den se do ni vejde
   (meritko pocita app.js). Kratka prednaska je jeden radek: nazev, kdo, kdy a kde. */
@media only screen and (min-width:1100px) and (pointer:fine){
  .linux-blok{padding:3px 10px}
  .linux-blok.kratky{align-items:baseline;column-gap:15px;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;line-height:1.2;padding:1px 10px}
  .linux-blok.prestavka.kratky{align-content:center;justify-content:flex-start}
  .linux-blok.kratky>b{font-size:15px}
}
/* nizke okno (1080p se zvetsenim 150 %): pul okraju kolem karty */
@media only screen and (min-width:1100px) and (max-height:700px) and (pointer:fine){
  body{padding-bottom:15px;padding-top:15px}
  
  #linux{margin-top:15px}
  #linux .hlavicka{padding-bottom:10px}
  #linux .linux-program{margin-top:12px}
}

@media only screen and (max-width:560px){
  .prepinac{font-size:18px;gap:0 15px}
  .stanky-seznam,.stanky-zdroj{padding-left:5px;padding-right:5px}
  /* rozvrh na telefonu: uzsi okraje a sloupec hodin, bloky dostanou vic mista */
  /* rozvrh na telefonu: hodina jen cislem v uzkem sloupci, bloky skoro pres celou kartu,
     pod nazvem kdo a na dalsim radku kdy a kde */
  .linux-program{margin:15px 0 18px}
  .linux-hodina span{display:none}
  .linux-plocha{left:26px}
  .linux-ted{left:20px}
  .linux-blok{padding:6px 8px}
  .linux-meta span{display:block}
  .linux-meta span+span::before{content:none}
  .linux-blok.soubezny{padding:5px 6px}
  .linux-blok.soubezny>b{font-size:14px}
  .linux-blok.soubezny .linux-meta{font-size:13px}
  .linux-legenda{gap:5px 15px}
}

@media only screen and (max-width:420px){
  .prepinac{font-size:17px;gap:0 12px}
}