/* Reset, document defaults, shared utilities. */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  overflow-x: hidden;                 /* the page itself never scrolls sideways */
  -webkit-tap-highlight-color: transparent;
}

body.modal-open { overflow: hidden; }

/* class-based display rules must not defeat the hidden attribute */
[hidden] { display: none !important; }

a { color: var(--primary); }
button { font-family: inherit; color: inherit; }

h1, h2, h3 { line-height: 1.25; }

/* ---------- utilities ---------- */
.muted { color: var(--muted); }
.pad { padding: 10px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.spacer { flex: 1; }

.center-empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.center-empty .big { font-size: 44px; margin-bottom: 10px; }

.ok-mark { color: var(--ok); font-weight: 800; }
.err-mark { color: var(--primary); font-weight: 800; }

.spin {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff;
  border-radius: 50%; animation: sp .7s linear infinite;
}
.spin-dark { border-color: rgba(128, 128, 128, .25); border-top-color: var(--primary); }
@keyframes sp { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}