/* Základ: reset, rozloženie strany, prístupnosť */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 12px);
  scroll-behavior: smooth;
}
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
button, select, input, textarea { font: inherit; color: inherit; }
/* rýchle opakované ťuknutie (napr. na akord alebo tlačidlo +/−) nesmie mobilný prehliadač brať ako priblíženie */
a, button, label, summary, input, select, [role="button"] { touch-action: manipulation; }
.wrap {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
@media (min-width: 640px) { .wrap { padding-inline: 32px; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}