/* Obecný deck-viewer — sdílené tokeny s web/index.html (Fraunces/Work Sans/IBM Plex Mono) */
:root{
  --paper:#ECE7DA;
  --paper-raised:#F7F4EC;
  --paper-deep:#E3DCC9;
  --ink:#262219;
  --graphite:#6E6656;
  --rule:#D2C9B0;
  --accent-amber:#A8752A;
  --accent-blue:#2C5384;
  --accent-rust:#9C4430;
  --accent-blue-fg:#FBF8F0;
  --sans:'Work Sans', ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --serif:'Fraunces', ui-serif, Georgia, serif;
  --mono:'IBM Plex Mono', Consolas, "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
html.dark{
  --paper:#1B211D;
  --paper-raised:#232A24;
  --paper-deep:#161B18;
  --ink:#E9E4D6;
  --graphite:#A6A08D;
  --rule:#37402F;
  --accent-amber:#E0AE5D;
  --accent-blue:#7FA8DC;
  --accent-rust:#E08B72;
  --accent-blue-fg:#181D19;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not(.light){
    --paper:#1B211D;
    --paper-raised:#232A24;
    --paper-deep:#161B18;
    --ink:#E9E4D6;
    --graphite:#A6A08D;
    --rule:#37402F;
    --accent-amber:#E0AE5D;
    --accent-blue:#7FA8DC;
    --accent-rust:#E08B72;
    --accent-blue-fg:#181D19;
    color-scheme: dark;
  }
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent-blue); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent-blue); outline-offset:2px; }

.progress-track{ position:fixed; top:0; left:0; right:0; height:3px; background:var(--rule); z-index:30; }
#progress{ height:100%; width:0; background:var(--accent-blue); transition:width .18s ease; }

header{
  position:fixed; top:3px; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px 18px; background:var(--paper-raised); border-bottom:1px solid var(--rule);
  transition:opacity .25s ease;
}
header .t{ font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header .t span{ color:var(--graphite); }
header nav{ display:flex; align-items:center; gap:14px; flex:none; }
header a, header button.linklike{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px;
  background:none; border-top:none; border-left:none; border-right:none; color:var(--ink); cursor:pointer;
}
header a:hover, header button.linklike:hover{ border-color:var(--accent-blue); }

.slide{ display:none; }
.slide.active{
  display:flex; flex-direction:column; height:100vh;
  padding:46px 0 58px; overflow:auto;
  transition:padding .25s ease;
}
.frame{
  flex:1 1 auto; min-height:38vh; display:flex; align-items:center; justify-content:center;
  padding:10px 14px; position:relative;
  transition:padding .25s ease;
}
.frame img, .frame video{
  /* width/height 100% + object-fit:contain, ne max-width/height s auto: s auto se
     obrázek jen nejvýš zmenšuje na dostupný prostor, ale nikdy nezvětší nad svou
     vlastní pixelovou velikost (slajdy jsou 1920×1080 PNG). Na monitoru větším než
     1920×1080, typicky projektor nebo ultrawide na celou obrazovku, tak zůstával
     zbytečně malý uprostřed černé plochy (Filip 28. 9., 3440×1440 monitor). */
  width:100%; height:100%;
  object-fit:contain; background:#fff; border:1px solid var(--rule);
}
.frame.has-hand{ padding-bottom:44px; }
.frame .hand-badge{
  position:absolute; right:14px; bottom:8px; width:24px; height:24px;
  color:#0F766E; pointer-events:none;
}

.counter{
  position:fixed; left:18px; bottom:14px; z-index:20;
  font-family:var(--mono); font-size:.78rem; color:var(--graphite);
  background:var(--paper-raised); border:1px solid var(--rule); padding:6px 10px;
  transition:opacity .25s ease;
}
.nav{ position:fixed; right:18px; bottom:14px; z-index:20; display:flex; gap:8px; transition:opacity .25s ease; }
.nav button{
  font-family:var(--mono); font-size:1.1rem; line-height:1; cursor:pointer;
  background:var(--accent-blue); color:var(--accent-blue-fg);
  border:1px solid var(--accent-blue); padding:14px 16px; min-height:44px; min-width:44px;
  border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.nav button:hover{ filter:brightness(1.1); }
.nav button:disabled{ opacity:.35; cursor:default; }
.nav button#fsBtn{ background:var(--paper-raised); color:var(--ink); border-color:var(--rule); }
.nav button#fsBtn:hover{ border-color:var(--accent-blue); }

/* autohide UI po nečinnosti (chování blízké PowerPointu) */
body.idle header, body.idle .counter, body.idle .nav{ opacity:0; pointer-events:none; }

/* Celá obrazovka: slajd naroste na celou plochu HNED při kliknutí na tlačítko,
   nečeká se na nečinnost myši (dřív to tak bylo svázané s .idle a chvíli po
   kliknutí to vypadalo pořád jako v okně, viz Filip 28. 9. screenshot). Lišta
   nahoře a dolní ovládání jsou position:fixed, takže dál plavou NAD slajdem,
   ne vedle něj, přesně jako ovládací prvky přehrávače videa přes celou
   obrazovku. Až uplyne pár sekund nečinnosti, zmizí (`body.idle` níž) a slajd
   zůstane bez ničeho navrch. Černé pozadí `.frame` řeší poměr stran: když
   obrazovka není přesně 16:9, `object-fit:contain` nechá pruh po stranách
   nebo nahoře/dole, a ten je teď černý jako u filmu nebo PowerPointu, ne
   barva stránky. */
body.fullscreen-active .slide.active{ padding:0; }
body.fullscreen-active .frame{ padding:0; background:#000; }
body.fullscreen-active .frame img, body.fullscreen-active .frame video{
  border:none; background:#000;
}
/* Titulková lišta (název bloku, řečník, akce, datum) je užitečná při prohlížení
   v okně, ale při promítání na celou obrazovku je to jen text navíc přes slajd.
   Schovaná natrvalo, ne jen po nečinnosti jako counter/nav (Filip 28. 9.). */
body.fullscreen-active header{ display:none; }

/* blackscreen (klávesa b/w, běžné u prezentačních clickerů) */
.blackout{
  position:fixed; inset:0; z-index:40; display:none; background:#000;
}
.blackout.white{ background:#fff; }
body.blackout-on .blackout{ display:block; }

@media (max-width:640px){
  header{ flex-wrap:wrap; }
  header .t{ font-size:.68rem; white-space:normal; }
  header nav{ gap:10px; }
  .frame{ padding:6px 8px; }
  .frame.has-hand{ padding-bottom:38px; }
  .frame .hand-badge{ right:8px; bottom:6px; width:22px; height:22px; }
}