/* --- Notices, toasts and status (js/components/notice.js) ------------------------------------ */

/* An inline notice: an icon and a line of text on a ground. Neutral on --surface-2; an
   error on --danger-soft with a --danger icon; done with a check. The words carry the
   meaning, the colour only repeats it. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  color: var(--fg);
  border-radius: var(--radius-md);
}
.notice > .icon { margin-top: .125rem; color: var(--fg-muted); }
.notice-text { flex: 1; min-width: 0; margin: 0; }
.notice > .btn { flex: none; align-self: center; }
.notice-error { background: var(--danger-soft); }
.notice-error > .icon { color: var(--danger); }
.notice-ok > .icon { color: var(--fg); }

/* Toasts, bottom centre above the player bar (above the mini player and the tab bar on
   a phone); a toast is a notice at elevation 2. The region lets clicks through where it
   has no toast. What a screen reader hears is the visually hidden .toasts-live log
   beside the stack (notice.js). */
.toasts {
  position: fixed;
  bottom: calc(var(--bar-h) + var(--safe-b) + var(--space-4));
  left: 50%;
  z-index: 40;
  width: min(28rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}
.toasts-list { display: grid; gap: var(--space-2); }
.toast {
  align-items: center;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  pointer-events: auto;
  animation: toast-in var(--motion-slow) var(--ease);
}
.toast > .icon { margin-top: 0; }
.toast.notice-error { background: var(--danger-soft); }
.toast-close { flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* A state in words with a mark before it: a dot for idle (muted) and running (brass), a
   check for done, an alert icon for a failure. Running also shows an indeterminate
   <progress> on its own line, so it reads as running with motion off. A grid, so long
   text wraps beside its mark (centred on the first line) rather than under it. */
.status {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.status-dot {
  width: 8px;
  height: 8px;
  margin-top: calc((1.5em - 8px) / 2);
  border-radius: 50%;
  background: var(--fg-muted);
}
.status > .icon { width: 1rem; height: 1rem; margin-top: calc((1.5em - 1rem) / 2); }
.status[data-state="running"] .status-dot { background: var(--accent); }
.status[data-state="ok"] { color: var(--fg); }
.status[data-state="error"] { color: var(--danger); }
.status-progress { grid-column: 1 / -1; height: 4px; }

@media (max-width: 40rem) {
  .toasts { bottom: calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + var(--space-4)); }
}