/* ─────────────────────────────────────────────────────────────────────────────
   TOAST — brief, self-dismissing confirmation. Driven by core/toast.js.

   This is where events go. The header status line (#status-text) holds state
   that is still true; anything describing a moment that has already passed
   ("Exported…", "Trainer disconnected") belongs here, because a toast expires
   and the header does not. See TKB-028.
   ───────────────────────────────────────────────────────────────────────────── */

#tk-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 4000;                 /* over drawers (100–400) and dialogs */
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 15px;
  background: var(--bg3, var(--bg1));
  color: var(--txt, var(--txt));
  border: 1px solid var(--bdr2, var(--bdr2));
  border-radius: 8px;
  font-size: var(--fs-base);
  line-height: 1.45;
  box-shadow: 0 12px 30px -10px #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#tk-toast.tk-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* The icon is the severity cue that survives without colour — colour alone
   fails WCAG 1.4.1, and orange-on-slate at this size is thin. */
#tk-toast .tk-toast-icon {
  flex-shrink: 0;
  font-size: var(--fs-base);
  line-height: 1.45;
  font-weight: 700;
}
#tk-toast .tk-toast-msg { min-width: 0; overflow-wrap: anywhere; }

/* The icon is the whole cue. There was a coloured left edge as well until
   TKF-310; it added nothing the icon did not already say. */
#tk-toast[data-kind="info"]  .tk-toast-icon { color: var(--blue,   var(--blue)); }
#tk-toast[data-kind="ok"]    .tk-toast-icon { color: var(--green,  var(--green)); }
#tk-toast[data-kind="warn"]  .tk-toast-icon { color: var(--amber,  var(--amber)); }
#tk-toast[data-kind="error"] .tk-toast-icon { color: var(--orange, var(--orange)); }

@media (prefers-reduced-motion: reduce) {
  #tk-toast { transition: opacity .18s ease; transform: translateX(-50%); }
  #tk-toast.tk-toast-show { transform: translateX(-50%); }
}