/*
 * Stars: three slots, earned ones filled. Always paired with a text count for screen readers
 * and for people who do not perceive the colour difference:
 *   <p class="stars" role="img" aria-label="2 étoiles"> … </p>
 */
@layer components {
  [data-theme] {
    .stars {
      display: inline-flex;
      gap: var(--space-1);
      color: var(--color-border);

      .icon {
        --icon-size: var(--star-size, 1.75rem);
        vertical-align: 0;
      }
    }

    .star--earned {
      color: var(--color-reward);
      /* A darker rim keeps the yellow readable on white. */
      filter: drop-shadow(0 1.5px 0 var(--color-reward-strong));
    }

    .stars--lg { --star-size: 2.75rem; }
    .stars--sm { --star-size: 1.15rem; }

    .badge-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
      gap: var(--space-4);
      padding: 0;
      list-style: none;
    }

    .badge-card {
      align-items: center;
      text-align: center;
    }

    .badge-card__medal {
      display: grid;
      place-items: center;
      width: 5rem;
      height: 5rem;
      border: var(--border-width) solid var(--color-reward-strong);
      border-radius: var(--radius-full);
      background: var(--color-reward-soft);
      color: var(--color-reward-strong);

      .icon {
        --icon-size: 2.75rem;
        vertical-align: 0;
      }
    }

    .badge-stars {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-1);
      color: var(--color-text-muted);
      font-size: var(--text-sm);
      font-weight: var(--weight-strong);
    }

    .badge-card__section {
      color: var(--color-text-muted);
      font-size: var(--text-sm);
    }

    .badge-card__feedback {
      align-self: stretch;
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-control);
      background: var(--color-surface-sunken);
      font-size: var(--text-md);
      text-align: start;

      :where(h3) {
        margin-bottom: var(--space-1);
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--weight-strong);
      }
    }

    /* Star criteria on a challenge: one row per star level. */
    .criteria {
      display: grid;
      gap: var(--space-3);

      > div {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: var(--space-3);
      }

      :where(dt) {
        padding-top: 0.15em;
      }
    }
  }
}