@layer components {
  /* Level Change Banner
   * Shown on dashboard when a CEFR sub-skill level changes.
   * Reuses dismiss_controller for auto-dismiss and flash-in animation.
   */

  .level-change-banner {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space) var(--inline-space-l);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in oklch, oklch(var(--lch-green)) 40%, transparent);
    background: color-mix(in oklch, oklch(var(--lch-green)) 8%, var(--color-surface));
    animation: flash-in 200ms ease;
  }

  .level-change-banner__close {
    margin-inline-start: auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;

    &:hover {
      color: var(--color-ink);
    }
  }

  .level-change-banner.hide {
    opacity: 0;
    translate: 0 -0.5rem;
    transition: opacity 150ms ease, translate 150ms ease;
  }
}