/* Real fetched values — 4 real toast variants share this exact shell
   (nodes 377:9759 "Pinned for you", 384:9785 "Pinned for all team
   members", 384:9779 "Unpinned for you", 384:9791 "Unpinned for all team
   members"; only the message text differs, see js/app.js's showToast
   call sites). Positioned by #toast-root (index.html) — this class is
   just the pill itself. Slide up/hold/slide down is driven by
   js/app.js's showToast via inline transform + var(--transition-standard),
   matching every other state-change animation in this app.
   background-color: --background-modal-box, not --background-fade-scrim
   — real fetched value re-confirmed across all 4 variants (a real color
   change from the earlier single-variant fetch, not a guess). */
.toast {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--background-modal-box);
  /* Real fetched effect (all 4 toast nodes list "Button: Effect(type:
     GLASS, radius: 100)"), same token every button in this app already
     uses for its own glass blur. */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: transform var(--transition-standard);
}

.toast__label {
  flex: 1 0 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-primary);
}

/* img/icons/check.svg's own real aspect ratio (24x17, a bare checkmark,
   not a check-in-circle) — sized by width only so it isn't stretched. */
.toast__icon {
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: auto;
}