/* 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 je ve stredu pasu */
  padding:5px 20px 20px;
}
.hlavicka>div{min-width:0}
/* sedy podnadpis pod nadpisem karty */
.hlavicka .popis{color:var(--druhy-text);display:block;font-size:15px}


/* ---------- MeshCore ---------- */

/* Na sirokem okne karta saha ke spodku okna: mapa vlevo, cisla vpravo.
   Na uzkem okne je mapa nahore pres celou sirku a cisla pod ni. */
.karta{margin-top:30px}
#mesh{flex:1 1 auto}
.mesh-telo{display:flex;flex:1 1 auto;gap:30px;min-height:0;padding:5px 20px 0}
.mesh-mapa{flex:1 1 auto;min-height:0;min-width:0;position:relative}
.mesh-mapa canvas{display:block;height:100%;left:0;position:absolute;top:0;width:100%}
.mesh-bok{display:flex;flex:0 0 330px;flex-direction:column;gap:25px;min-width:0}
.mesh-cisla{display:flex;flex-direction:column;gap:15px}
.mesh-cisla dt{color:var(--druhy-text);font-size:14px}
.mesh-cisla dd{font-size:26px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.mesh-cisla dd small{color:var(--druhy-text);display:block;font-size:14px;font-weight:400;line-height:1.4}
.mesh-top{border-top:dashed 2px var(--cara);padding-top:20px}
.mesh-top h3{color:var(--druhy-text);font-size:14px;font-weight:400;margin-bottom:8px}
.mesh-top ol{counter-reset:poradi;list-style:none}
.mesh-top li{counter-increment:poradi;display:flex;gap:10px;line-height:1.5}
.mesh-top li::before{color:var(--sedy);content:counter(poradi);width:1ch}
.mesh-top li span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mesh-top li b{color:var(--druhy-text);font-weight:400}
#mesh-stav{font-size:14px;margin-top:auto}
/* jmeno uzlu pod mysi */
.mesh-stitek{
  background-color:var(--podklad);
  border:solid 2px var(--text);
  font-size:14px;
  line-height:1.3;
  padding:4px 8px;
  pointer-events:none;
  position:absolute;
  white-space:nowrap;
  z-index:1;
}
.mesh-stitek small{color:var(--druhy-text);display:block;font-size:13px}
.zdroj{color:var(--sedy);font-size:13px;padding:0 20px}
/* legenda vpravo v hlavicce: barvy paketu */
.mesh-legenda{color:var(--druhy-text);display:flex;flex-wrap:wrap;font-size:14px;gap:5px 20px}
.mesh-legenda span::before{content:"";display:inline-block;height:10px;margin-right:8px;width:10px}
.mesh-legenda .typ-zprava::before{background-color:hsl(38,100%,60%)}
.mesh-legenda .typ-advert::before{background-color:hsl(130,50%,55%)}
.mesh-legenda .typ-trace::before{background-color:var(--akcent)}

/* ---------- Archiv ---------- */

.archiv-seznam{list-style:none;padding:5px 20px 0}
.archiv-seznam li{padding-bottom:15px}
.archiv-seznam a{font-weight:700}
.archiv-seznam p{color:var(--druhy-text);font-size:14px;line-height:1.5;margin:2px 0 0}

/* uzke okno: mapa nahore v pomeru stran Ceska, pod ni cisla ve dvou sloupcich */
@media only screen and (max-width:1099px){
  .mesh-telo{flex-direction:column;gap:25px}
  .mesh-mapa{aspect-ratio:1.75;flex:none;width:100%}
  .mesh-bok{flex:none;gap:20px}
  .mesh-cisla{display:grid;gap:15px 30px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  #mesh-stav{margin-top:0}
}
/* nizke okno (MacBook Air 1440 x 720, 1080p se zvetsenim 150 %): pul okraju kolem karty,
   dve cisla vedle sebe, uzsi mezery, at se karta vejde bez posouvani */
@media only screen and (min-width:1100px) and (max-height:820px){
  body{padding-bottom:15px;padding-top:15px}
  .karta{margin-top:15px}
  .hlavicka{padding-bottom:10px}
  .mesh-bok{gap:15px}
  .mesh-cisla{display:grid;gap:10px 20px;grid-template-columns:1fr 1fr}
  .mesh-cisla div:last-child{grid-column:1 / -1}
  .mesh-cisla dd{font-size:22px}
  .mesh-top{padding-top:15px}
  .mesh-top li{line-height:1.4}
}
@media only screen and (max-width:560px){
  body{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}
  h2{font-size:24px}
  /* mapa az k ramu karty, text dal 20 px od nej jako nadpis */
  .mesh-mapa{margin:0 -20px;width:calc(100% + 40px)}
  .mesh-cisla dd{font-size:22px}
}