/* Flash messages, validation summaries, waiting callouts and empty states. */
@layer components {
  [data-theme] {
    .flash,
    .callout,
    .error-summary {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      max-width: none;
      padding: var(--space-3) var(--space-4);
      border: var(--border-width) solid var(--notice-border, var(--color-border));
      border-radius: var(--radius-control);
      background: var(--notice-bg, var(--color-surface));
      color: var(--color-text);

      .icon {
        --icon-size: 1.4em;
        margin-top: 0.1em;
        color: var(--notice-border);
      }

      > :where(p, div) {
        flex: 1;
        min-width: 0;
      }
    }

    .flash--notice {
      --notice-bg: var(--color-success-soft);
      --notice-border: var(--color-success);
    }

    .flash--alert,
    .error-summary {
      --notice-bg: var(--color-danger-soft);
      --notice-border: var(--color-danger);
    }

    .error-summary {
      :where(h2) {
        font-size: var(--text-control);
        line-height: var(--leading-snug);
      }

      :where(ul) {
        margin: var(--space-2) 0 0;
        padding-inline-start: var(--space-5);
      }
    }

    /* "Your coach knows you are ready": a friendly holding message, not an error. */
    .callout {
      --notice-bg: var(--color-reward-soft);
      --notice-border: var(--color-reward-strong);
    }

    .callout--info {
      --notice-bg: var(--color-info-soft);
      --notice-border: var(--color-info);
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-6) var(--space-5);
      border: var(--border-width) dashed var(--color-border-strong);
      border-radius: var(--radius-card);
      color: var(--color-text-muted);
      text-align: center;

      .icon {
        --icon-size: 2.5rem;
        color: var(--color-border-strong);
      }
    }
  }
}