/* css/overlays.css — the modal (z: 90), toasts (z: 45), and the three
   load states (skeleton, empty, error). */

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.bit-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: bitFade 160ms ease both;
}
.bit-modal.is-closing { animation: bitModalOut 160ms ease both; }
.bit-modal__card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  max-height: calc(var(--bit-vv-h, 100dvh) - 32px);
  overflow: auto;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--card-border);
  background: var(--bg-1);
  box-shadow: var(--sh-3);
  animation: fadeUp 200ms var(--ease) both;
}
.bit-modal__card:focus { outline: none; }
.bit-modal__x { position: absolute; top: 8px; right: 8px; }
.bit-modal__title { font-size: 19px; font-weight: 700; padding-right: 44px; }
.bit-modal__body { color: var(--ink-muted); margin: var(--s-3) 0 0; }
.bit-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.bit-modal__actions .bit-btn { flex: 1 1 140px; }
@keyframes bitModalOut { to { opacity: 0; } }

/* ── Toasts ────────────────────────────────────────────────────────────────── */
.bit-toasts {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--s-2);
  pointer-events: none;
}
.bit-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-3);
  font-weight: 500;
  animation: fadeUp 200ms var(--ease) both;
}
.bit-toast svg { width: 20px; height: 20px; }
.bit-toast--ok svg { color: var(--ok); }
.bit-toast--warn svg { color: var(--warn); }
.bit-toast--error svg { color: var(--rust); }
.bit-toast--info svg { color: var(--accent-ink); }
.bit-toast.is-leaving { opacity: 0; transition: opacity 200ms; }

/* ── Skeletons ─────────────────────────────────────────────────────────────── */
.bit-skel-list { display: grid; gap: var(--s-3); }
.bit-skel {
  border-radius: var(--r-lg);
  background: var(--bg-1);
  border: 1px solid var(--card-border);
  animation: bitPulse 1.3s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.bit-skel--card { height: 150px; }
.bit-skel--row  { height: 76px; }
.bit-skel--line { height: 22px; border-radius: var(--r-sm); }
.bit-skel--head { height: 92px; }
@keyframes bitPulse { 50% { opacity: 0.55; } }

/* ── Empty and error states ────────────────────────────────────────────────── */
.bit-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  animation: bitFade 240ms ease both;
}
.bit-illo { display: block; width: 200px; max-width: 70%; color: var(--accent); }
.bit-illo svg { display: block; width: 100%; height: auto; }
.bit-state__title { font-size: 19px; font-weight: 700; }
.bit-state__body { margin: 0; max-width: 34em; color: var(--ink-muted); }
.bit-state__icon svg { width: 40px; height: 40px; color: var(--rust); }
.bit-state .bit-btn { margin-top: var(--s-2); }

/* ── Splash ────────────────────────────────────────────────────────────────── */
.bit-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  min-height: 60vh;
  color: var(--ink-muted);
}
.bit-splash__mark svg { width: 56px; height: 56px; color: var(--accent); }
.bit-splash > svg { width: 24px; height: 24px; }

/* A view's first paint staggers its cards in; a repaint of the same visit
   (a poll, a toggle) marks its host settled so nothing replays. */
.bit-settled, .bit-settled *:not(.bit-spin) { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .bit-spin { animation: bitSpin 1.6s linear infinite !important; }
}