/* Сброс, типографика, иконки, общие анимации. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  transition: background .45s ease, color .45s ease;
}

button {
  font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; text-align: left;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease,
    transform .12s ease, opacity .15s ease;
}
.go:active, .addbtn:active, .ibtn:active, .tile:active, .mi:active, .groupbtn:active, nav .add:active { transform: scale(.97); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); }
.hide { display: none !important; }
.grow { flex: 1; }

/* ─── иконки: спрайт в index.html, <svg class="ic"><use href="#i-…"></svg> ─── */
.ic {
  width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px;
  transition: transform .25s var(--ease);
}
.ic.sm { width: 15px; height: 15px; }

/* ─── движение ─── */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* каскад появления играет только под .fresh — при смене экрана, не при каждой перерисовке */
.fresh .rise { animation: rise .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}