/* Banner — persistent top-of-page notification bar.
 * Used for guest mode CTA, announcements, etc.
 */

@layer components {
  .banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    padding: var(--block-space-s) var(--inline-space-l);
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);

    & p {
      margin: 0;
    }
  }

  .banner--info {
    background: color-mix(in oklch, var(--color-accent) 8%, var(--color-surface));
    border-color: color-mix(in oklch, var(--color-accent) 30%, transparent);
  }

  .banner__actions {
    display: flex;
    gap: var(--inline-space-s);
    flex-shrink: 0;
  }
}