@layer components {
  /* Flash */
  /* Toasts stack at the top right, newest first, below the page's header or the editor's toolbar. */
  .toasts { position: fixed; top: 8rem; right: 1.6rem; z-index: 30; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .8rem; width: min(40rem, calc(100vw - 3.2rem)); pointer-events: none; }
  .toasts:empty { display: none; }
  .workspace > .toasts { position: absolute; top: calc(var(--gap) + 5.6rem); right: var(--gap); transition: right .2s ease; }
  .workspace.has-phone > .toasts { right: calc(var(--phone-width) + 2 * var(--gap)); }
  .workspace.has-inspector > .toasts { right: calc(var(--inspector-width) + 2 * var(--gap)); }
  .workspace.has-inspector.has-phone > .toasts { right: calc(var(--inspector-width) + var(--phone-width) + 3 * var(--gap)); }
  @media (max-width: 979px) { .workspace > .toasts, .workspace.has-phone > .toasts, .workspace.has-inspector > .toasts, .workspace.has-inspector.has-phone > .toasts { right: var(--gap); } }
  @media (max-width: 600px) { .toasts, .workspace > .toasts { top: auto; bottom: 1.6rem; right: 1.6rem; left: 1.6rem; width: auto; flex-direction: column; align-items: stretch; } }
  .flash { position: fixed; top: 8rem; right: 1.6rem; z-index: 30; display: flex; align-items: center; gap: .9rem; max-width: min(40rem, calc(100vw - 3.2rem)); padding: .9rem .6rem .9rem 1.3rem; border-radius: var(--r-card); background: var(--inverse); color: var(--on-inverse); font-size: 1.4rem; font-weight: 500; box-shadow: var(--shadow-float); }
  .toasts > .flash { position: static; max-width: 100%; pointer-events: auto; animation: toast-in .22s cubic-bezier(.2, .8, .2, 1); }
  .toasts > .flash.is-leaving { animation: toast-out .16s ease-in forwards; }
  @keyframes toast-in { from { opacity: 0; transform: translateX(1.6rem); } }
  @keyframes toast-out { to { opacity: 0; transform: translateX(1.6rem); } }
  @media (max-width: 600px) {
    @keyframes toast-in { from { opacity: 0; transform: translateY(1.2rem); } }
    @keyframes toast-out { to { opacity: 0; transform: translateY(1.2rem); } }
  }
  .flash-close { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-left: auto; padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: inherit; font: inherit; font-size: 1.8rem; line-height: 1; opacity: .6; cursor: pointer; }
  .flash-close:hover, .flash-close:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
  .flash::before { content: ""; flex: 0 0 auto; width: .8rem; height: .8rem; border-radius: 50%; background: #6fd49a; }
  .flash.is-error::before { background: #ff8a7a; }
  .flash.is-warning::before { background: var(--warning); }
  .flash.is-inline { position: static; transform: none; display: block; z-index: auto; max-width: none; margin: 0 0 1.6rem; padding: .9rem 1.2rem; border: 1px solid var(--warning-line); border-radius: var(--r-control); box-shadow: none; background: var(--warning-soft); color: var(--ink); }
  .flash.is-inline::before { display: none; }
  .flash.is-inline.is-error { background: var(--error-soft); border-color: var(--error-line); }
  .flash.is-inline.is-success { background: var(--ok-soft); border-color: var(--ok-line); }
  .flash code { font-size: 1.25rem; }
  .flash ul { margin: .4rem 0 0; padding-left: 2rem; }
  .flash-title { margin: 0; font-weight: 650; }
  /* A toast that offers one way back, as deleting a screen does. */
  .flash.has-action .flash-action { margin-left: auto; }
  .flash.has-action .flash-close { margin-left: 0; }
  .flash-text { min-width: 0; overflow-wrap: anywhere; }
  .flash-action { flex: none; padding: .4rem 1.1rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--r-control); background: transparent; color: inherit; font: inherit; font-size: 1.35rem; font-weight: 650; cursor: pointer; }
  .flash-action:hover { background: color-mix(in srgb, currentColor 14%, transparent); border-color: color-mix(in srgb, currentColor 50%, transparent); }
}