/* Toast notifications. Kind is carried by the icon + the left-border STYLE
   (solid / accent / dashed / double), never colour alone. Reused by the future
   Notifications area — keep the card generic. */

.toast-host {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(22rem, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-left: 4px solid var(--c-ink);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
.toast--success { border-left-color: var(--c-accent-ink); }
.toast--warning { border-left-style: dashed; }
.toast--danger { border-left-width: 5px; border-left-style: double; }
.toast__icon { flex: 0 0 auto; color: var(--c-ink); }
.toast__icon svg { width: 1.25rem; height: 1.25rem; }
.toast__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toast__title { font-weight: var(--fw-semibold); }
.toast__text { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.toast__close { flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--r-sm); color: var(--c-ink-faint); }
.toast__close:hover { color: var(--c-ink); background: var(--c-surface-2); }
.toast__close svg { width: 0.9rem; height: 0.9rem; }

/* PWA "a new version is ready" prompt — a pinned bar, not a transient toast, so
   it waits for the user to act. */
.pwa-update {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  z-index: 210; display: flex; align-items: center; gap: var(--sp-3);
  max-width: calc(100vw - 2rem); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--c-ink); color: var(--c-surface); /* --c-surface is the inverse of --c-ink → legible in both themes */
  border-radius: var(--r-full); box-shadow: var(--shadow-md);
}
.pwa-update__txt { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.pwa-update__btn {
  flex: 0 0 auto; padding: var(--sp-1) var(--sp-4);
  background: var(--c-surface); color: var(--c-ink);
  border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.pwa-update__btn:hover { filter: brightness(0.94); }
.pwa-update__x {
  flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: var(--r-full); color: var(--c-surface); opacity: 0.7; font-size: 1.1rem; line-height: 1;
}
.pwa-update__x:hover { opacity: 1; background: rgba(128, 128, 128, 0.22); }