@layer components {
  /* The release card rides the toast stack but is a card, not an inverted sentence. It is drawn again on every page,
     so it never slides in (data-settled). */
  .toast.toast--card {
    align-items: flex-start; gap: 12px; width: calc(100% - 18px); padding: 16px 40px 16px 16px;
    background: var(--card); color: var(--card-foreground); border: 1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: 0 10px 30px -8px oklch(0 0 0 / .28), var(--shadow-sm);
  }
  .release-prompt-icon { display: inline-flex; flex: none; color: var(--jx-accent, var(--primary)); }
  .release-prompt-body { flex: 1; min-width: 0; }
  .release-prompt-title { display: block; font-size: 14px; font-weight: 600; }
  .release-prompt-text { margin: 2px 0 0; color: var(--muted-foreground); }
  .release-prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .release-prompt-later { border-color: transparent; box-shadow: none; background: none; }
  .toast.toast--card .toast-close { position: absolute; inset-block-start: 8px; inset-inline: auto 8px; translate: none; }
  .toast.toast--card .toast-close:is(:hover, :active) { background: var(--accent); color: var(--accent-foreground); }
}