/* Dojezeno · základ decku. Plocha 1920 × 1080 (16:9) škálovaná na okno, světlé plátno jako deck z Děčína.
   Geometrie: nadpis má na každém slajdu pruh 164 px (dva řádky 76 px), obsah začíná všude na 272 px (64 + 164 + 44).
   Zelená = snědeno a úspora, oranžová = vyhozeno. Jeden roh (22 px), jeden stín, čára ilustrací 3 px. Slajdové styly: css/sNN.css. */

:root {
  --stranka: #f5f5f7; --karta: #ffffff; --text: #1d1d1f; --text2: #1d1d1f; --text3: #6e6e73;   /* obsah černě, šedá jen drobný text (zdroje, legendy, štítky) */
  --linka: #e5e5ea; --linka2: #d2d2d7;
  --zelena: #248a3d; --zelena-svetla: #d3f0dc; --zelena-zivá: #30d158;
  --oranz: #c9601b; --oranz-svetla: #f8e0cf; --oranz2: #e38b4d;
  --seda: #aeaeb2;
  --r: 22px; --r2: 14px; --pilulka: 999px;
  --stin: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);
  --stin-velky: 0 2px 4px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.10);
  --sklo: rgba(255, 255, 255, 0.72);
  --pismo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, sans-serif;
  --ven: cubic-bezier(0.16, 1, 0.3, 1);       /* vstupy a odhalení */
  --plynule: cubic-bezier(0.65, 0, 0.35, 1);  /* změny stavu */
  --kresli: cubic-bezier(0.3, 0.6, 0.2, 1);   /* kreslení grafů a čar */
  --okraj-x: 80px;
  --mezera: 44px;
  --nadpis: 164px;
  --obsah-y: 272px;                           /* kde začíná obsah pod nadpisem */
  --odsazeni: 28px;
  --cara: 3px;                                /* tloušťka čáry ilustrací */
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--stranka); }
body { font-family: var(--pismo); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 30px; line-height: 1.45; }
[hidden] { display: none !important; }
b, strong { font-weight: 700; }
::selection { background: rgba(36, 138, 61, 0.2); }

.jeviste { position: fixed; inset: 0; background: var(--stranka); }
.plocha { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }

/* slajd: prolnutí a posun 14 px, 400 ms; odcházející jen zhasne; zpět přijede shora */
.slajd {
  position: absolute; inset: 0; box-sizing: border-box; padding: 64px var(--okraj-x) 56px; overflow: hidden;
  background: var(--stranka); opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 400ms var(--ven), transform 400ms var(--ven), visibility 0s linear 400ms;
}
.slajd.aktivni { opacity: 1; visibility: visible; transform: none; transition: opacity 400ms var(--ven), transform 400ms var(--ven); z-index: 2; }
.slajd.odchazi { transform: none; transition: opacity 260ms var(--ven), visibility 0s linear 260ms; }
.slajd.zpet { transform: translateY(-14px); transition: none; }
.slajd *, .slajd *::before, .slajd *::after { box-sizing: border-box; }

/* typografie */
.slajd h1 { font-weight: 700; font-size: 76px; line-height: 1.08; letter-spacing: -0.02em; margin: 0; max-width: 1560px; min-height: var(--nadpis); text-wrap: balance; }
.slajd h2 { font-weight: 700; font-size: 38px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.slajd h3 { font-weight: 700; font-size: 30px; line-height: 1.2; margin: 0; }
.slajd p { margin: 0; text-wrap: pretty; }
.stitek { font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--text2); }
.text { font-size: 30px; line-height: 1.45; }
.tlumene { color: var(--text2); }
.mala { font-size: 22px; line-height: 1.35; color: var(--text3); }
.zelena { color: var(--zelena); }
.oranz { color: var(--oranz); }
.velke-pismo { text-transform: uppercase; letter-spacing: 0.06em; font-size: 22px; font-weight: 700; }
/* jediný řádek zdroje na slajdu (jen u tvrdých čísel): dole, drobně */
.zdroj { position: absolute; left: var(--okraj-x); right: 360px; bottom: 30px; font-size: 20px; line-height: 1.3; color: var(--text3); }

/* velká čísla: číslo tučně, jednotka tlumeně */
.cislo { margin: 0; font-weight: 800; font-size: 200px; line-height: 0.9; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cislo small { font-size: 0.4em; font-weight: 600; color: var(--text2); margin-left: 0.08em; letter-spacing: -0.01em; }
.cislo.obri { font-size: 320px; }
.cislo.stredni { font-size: 120px; }
.cislo.male { font-size: 84px; }
.pod-cislo { margin: 16px 0 0; font-weight: 600; font-size: 32px; line-height: 1.3; color: var(--text2); }

/* karty a mřížky */
.karta { background: var(--karta); border-radius: var(--r); box-shadow: var(--stin); padding: var(--odsazeni) 32px; min-width: 0; }
.karta.zelena-karta { background: var(--zelena-svetla); box-shadow: none; }
.karta.oranz-karta { background: var(--oranz-svetla); box-shadow: none; }
.mrizka { display: grid; gap: 32px; margin-top: var(--mezera); align-items: stretch; }
.m2 { grid-template-columns: 1fr 1fr; }
.m3 { grid-template-columns: repeat(3, 1fr); }
.m4 { grid-template-columns: repeat(4, 1fr); }

/* pilulka (štítek nebo výzva) */
.pilulka { display: inline-flex; align-items: center; gap: 14px; padding: 14px 30px 16px; border-radius: var(--pilulka); font-weight: 700; font-size: 30px; line-height: 1.2; background: var(--text); color: #fff; }
.pilulka.svetla { background: var(--karta); color: var(--text); box-shadow: var(--stin); }
.pilulka .tecka { width: 16px; height: 16px; border-radius: 50%; background: var(--zelena-zivá); animation: pulz 1.6s ease-in-out infinite; }
@keyframes pulz { 50% { opacity: 0.35; } }
/* věta ve skleněné pilulce (jako „Tohle je Děčín v červnu 2013“) */
.veta-sklo {
  display: inline-block; padding: 18px 40px 20px; border-radius: var(--pilulka); background: var(--sklo);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 36px rgba(0, 0, 0, 0.12);
  font-weight: 600; font-size: 36px; line-height: 1.25; letter-spacing: -0.01em; color: var(--text2); white-space: nowrap;
}
.veta-sklo b { color: var(--text); }

/* ilustrace: jedna sada, čára 3 px, zakulacené konce; barva přes currentColor */
.ilu { display: block; fill: none; stroke: currentColor; stroke-width: var(--cara); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ikona { width: 64px; height: 64px; color: var(--text); }
.ikona.zelena { color: var(--zelena); }
.ikona.oranz { color: var(--oranz); }

/* kroky uvnitř slajdu: data-krok="n" je vidět od kroku n, data-jen-krok="n" jen v kroku n */
[data-krok], [data-jen-krok] { opacity: 0; transform: translateY(16px); transition: opacity 480ms var(--ven), transform 480ms var(--ven); }
[data-krok].je, [data-jen-krok].je { opacity: 1; transform: none; }
[data-krok].bez-posunu, [data-jen-krok].bez-posunu { transform: none; }
.hned [data-krok], .hned [data-jen-krok], .hned .po-kroku { transition: none !important; animation: none !important; }

/* vstup prvků slajdu po 70 ms (třídu vstup a --zpozdeni přidává deck.js jen při pohybu dopředu) */
.vstup { opacity: 0; animation: vstup 600ms var(--ven) var(--zpozdeni, 0ms) both; }
@keyframes vstup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ukazatel průběhu: talíř vpravo nahoře, zelený oblouk = jak daleko jsme (talíř se „dojídá“) */
.prubeh { position: absolute; right: 64px; top: 52px; z-index: 5; width: 92px; height: 92px; pointer-events: none; transition: opacity 400ms var(--ven); }
.prubeh .okraj { fill: var(--karta); stroke: var(--linka2); stroke-width: 2; }
.prubeh .vnitrek { fill: none; stroke: var(--linka); stroke-width: 2; }
.prubeh .jidlo { fill: none; stroke: var(--zelena); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 700ms var(--ven); }
.prubeh.skryty { opacity: 0; }

/* panel poznámek (N), stopky, černá obrazovka (B) */
.poznamky {
  position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 50; max-height: 44vh; overflow: auto;
  padding: 18px 26px; border-radius: 18px; background: rgba(29, 29, 31, 0.93); color: #f5f5f7;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 19px/1.5 var(--pismo);
}
.poznamky .hlava { display: flex; justify-content: space-between; gap: 16px; font-weight: 700; color: #a1a1a6; margin-bottom: 8px; }
.poznamky p { margin: 6px 0; }
.poznamky p.krok { color: #30d158; }
.poznamky p.zdroj-p { color: #a1a1a6; font-size: 16px; }
#hud-cas { font-variant-numeric: tabular-nums; }
#hud-cas.pozor { color: #ff9f0a; }
#hud-cas.pres { color: #ff453a; }
.cerna { position: fixed; inset: 0; z-index: 60; background: #000; }

/* tisk do PDF: každý slajd jedna strana, všechno odkryté */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { overflow: visible; height: auto; background: #fff; }
  .jeviste { position: static; }
  .plocha { position: static; transform: none !important; width: auto; height: auto; }
  .slajd { position: relative; width: 1920px; height: 1080px; opacity: 1 !important; visibility: visible !important; transform: none !important; break-after: page; transition: none !important; }
  [data-krok], [data-jen-krok] { opacity: 1 !important; transform: none !important; }
  .vstup { animation: none !important; opacity: 1 !important; }
  .poznamky, .cerna, .prubeh { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .slajd, [data-krok], [data-jen-krok] { transition: none !important; }
  .vstup { animation: none !important; opacity: 1; }
}
.ilu * { vector-effect: non-scaling-stroke; }