@layer components {
  .autosave-failure {
    background: var(--color-negative);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lifted);
    color: var(--color-ink-inverted);
    font-size: 0.8125rem;
    font-weight: 600;
    inset-block-end: 1rem;
    inset-inline-start: 50%;
    margin: 0;
    padding: 0.625rem 1rem;
    position: fixed;
    transform: translateX(-50%);
    z-index: var(--z-toast);
  }

}

/* The state the autosave-form controller puts on a field while it is being
   saved: a strip sweeping along its bottom edge. A utility, not a component
   rule — the `utilities` layer is later than `components`, so the sweep's
   `background-*` beat any component's `background` shorthand without
   `!important`, and the animation still owns `background-position`. */
@layer utilities {
  .autosave-saving {
    animation: autosave-sweep 0.8s linear infinite;
    background-image: linear-gradient(90deg, transparent 0%, var(--color-brand) 50%, transparent 100%);
    background-position: -100% 100%;
    background-repeat: no-repeat;
    background-size: 50% 2px;
  }

  @keyframes autosave-sweep {
    from { background-position: -100% 100%; }
    to { background-position: 200% 100%; }
  }
}