/*
 * tutorial.css — vzhled úvodního tutoriálu (coach-marks).
 *
 * Barvy jen přes tokeny aplikace → tmavý režim funguje bez prefers-color-scheme.
 * Scrim je záměrně tmavý v obou režimech (klasický „spotlight"), definovaný přes
 * proměnnou --tut-scrim, ať je hodnota na jednom místě. Vše prefixováno `tut-`.
 */

:root {
  --tut-scrim: rgba(12, 14, 18, .62);
  --tut-ring: var(--brand);
}
[data-tema="tmavy"] {
  --tut-scrim: rgba(0, 0, 0, .7);
}

/* Kontejner přes celou obrazovku — zachytává interakci (appka je po dobu
   tutoriálu „zamčená"), sám je průhledný; ztmavení dělá box-shadow díry. */
.tut-scrim {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  font-family: var(--font, system-ui, sans-serif);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Zvýrazněná díra (spotlight): obrovský box-shadow ztmaví okolí, prstenec ohraničí. */
.tut-hole {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px var(--tut-scrim);
  outline: 3px solid var(--tut-ring);
  outline-offset: 3px;
  pointer-events: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  z-index: 1;
}

/* Bublina s výkladem. */
.tut-bublina {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: min(320px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r, 18px);
  box-shadow: var(--sh, 0 6px 24px rgba(20, 22, 28, .18));
  padding: 16px 16px 14px;
  animation: tut-vjezd .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes tut-vjezd { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Šipka mířící k cíli (kosočtverec z pozadí + čáry rámečku na dvou hranách). */
.tut-sipka {
  position: absolute;
  left: 24px;
  width: 14px;
  height: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
.tut-bublina[data-smer="dolu"] .tut-sipka { top: -8px; border-right: 0; border-bottom: 0; }
.tut-bublina[data-smer="nahoru"] .tut-sipka { bottom: -8px; border-left: 0; border-top: 0; }

.tut-hlava { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tut-emoji { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.tut-titul { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.tut-text { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.45; }

.tut-tecky { display: flex; gap: 6px; margin: 0 0 14px; }
.tut-tecka { width: 20px; height: 5px; border-radius: 99px; background: var(--line); transition: background .3s ease; }
.tut-tecka.je-akt { background: var(--brand); }
/* vysoký kontrast: aktuální krok průvodce musí být odlišený (B4-14) */
@media (forced-colors: active) {
  .tut-tecka { forced-color-adjust: none; background: GrayText; }
  .tut-tecka.je-akt { background: Highlight; }
}

.tut-akce { display: flex; align-items: center; gap: 10px; }
.tut-preskoc {
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-family: var(--font, sans-serif);
  font-size: 14px;
  font-weight: 800;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 10px;
}
.tut-preskoc:hover { color: var(--ink); }
.tut-dalsi {
  margin-left: auto;
  background: var(--brand);
  color: var(--on-brand, #fff);
  border: 0;
  border-radius: 12px;
  padding: 11px 20px;
  font-family: var(--font, sans-serif);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 34%, transparent);
  transition: transform .12s ease, filter .2s ease;
}
.tut-dalsi:hover { filter: brightness(1.04); }
.tut-dalsi:active { transform: translateY(1px) scale(.99); }

.tut-preskoc:focus-visible,
.tut-dalsi:focus-visible {
  outline: 3px solid var(--tut-ring);
  outline-offset: 2px;
}

/* Oznamovací oblast pro odečítač obrazovky (vizuálně skrytá). */
.tut-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tut-hole { transition: none; }
  .tut-bublina { animation: none; }
}