@layer components {
  .form-draft-notice,
  .form-error-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--row-inset);
    border-block: 1px solid var(--border-default);
    background: var(--bg-subtle);
  }
  .form-draft-notice { flex-shrink: 0; gap: var(--space-2); font-size: var(--type-body); }
  .form-draft-notice > div,
  .form-error-summary > div {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
  }

  .form-draft-notice > div:last-child {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-2);
  }
  .form-draft-notice strong { font-weight: var(--weight-medium); }
  .form-draft-notice span,
  .form-error-summary button {
    color: var(--text-secondary);
    font-size: var(--type-caption);
  }

  .form-error-summary {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border-default));
  }

  .form-error-summary button {
    min-height: var(--control-height);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    text-align: left;
  }

  .form-safety-backdrop {
    z-index: var(--z-confirm);
  }

  .form-safety-dialog {
    max-width: var(--dialog-compact-width);
  }

  .form-safety-dialog > p {
    margin: 0;
    color: var(--text-secondary);
  }

  @media (max-width: 767px) {
    .form-draft-notice,
    .form-error-summary {
      display: grid;
      justify-content: stretch;
    }
    .form-draft-notice > div:last-child {
      width: 100%;
    }

    .form-draft-notice .button {
      flex: 1 1 0;
      min-height: var(--touch-target);
    }
  }
}