@layer components {
  /* Placement Test
   * Styles for the placement prompt page and "Your Level" results page.
   */

  /* Skills list on prompt page */
  .placement-skill {
    display: flex;
    gap: var(--inline-space);

    & dt {
      font-weight: 600;
      min-inline-size: 18ch;
    }

    & dd {
      color: var(--color-ink-muted);
    }
  }

  /* Overall level hero on results page */
  .placement-overall {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-s);
    padding: var(--block-space-l);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
  }

  .placement-overall__label {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .placement-overall__level {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-link);
    line-height: 1;
  }

  .placement-overall__date {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
  }

  /* Sub-skill cards on results page */
  .placement-skill-card {
    padding: var(--block-space) var(--inline-space-l);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-s);
  }

  .placement-skill-card__title {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    font-weight: 500;
  }

  .placement-skill-card__level {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-link);
  }

  .placement-skill-card__desc {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    line-height: 1.5;
  }

  /* CTA banner for dashboard and completion notice */
  .placement-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space-l);
    padding: var(--block-space) var(--inline-space-l);
    background: color-mix(in oklch, oklch(var(--lch-blue)) 8%, var(--color-canvas));
    border: 1px solid color-mix(in oklch, oklch(var(--lch-blue)) 20%, transparent);
    border-radius: var(--radius-lg);
  }
}