@layer components {
  /* Pronunciation Report
   * Session report page: summary scores, transcript with color-coded words, word detail panel.
   */

  /* Score color classes */
  .score--good { color: var(--color-positive); }
  .score--fair { color: var(--color-warning); }
  .score--weak { color: var(--color-negative); }
  .score--none { color: var(--color-ink-muted); }

  /* Summary section */
  .pronunciation-summary {
    padding: var(--block-space-l) var(--inline-space-l);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
  }

  .pronunciation-summary__scores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--inline-space-l);
    margin-block: var(--block-space);
  }

  .pronunciation-summary__weak {
    margin-block-start: var(--block-space);
    padding-block-start: var(--block-space);
    border-block-start: 1px solid var(--color-border);
  }

  /* Score cards */
  .score-card {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-s);
  }

  .score-card__label {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    font-weight: 500;
  }

  .score-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* Score bar */
  .score-bar {
    height: 0.375rem;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
  }

  .score-bar__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 300ms ease;

    &.score--good { background: var(--color-positive); }
    &.score--fair { background: var(--color-warning); }
    &.score--weak { background: var(--color-negative); }
  }

  /* Word badges */
  .word-badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius);
    background: color-mix(in srgb, currentColor 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  }

  /* Transcript */
  .transcript__message {
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space-s) var(--inline-space);
    border-radius: var(--radius);
  }

  .transcript__message--user {
    background: color-mix(in oklch, var(--color-link) 5%, var(--color-canvas));
  }

  .transcript__message--ai {
    background: var(--color-surface);
  }

  .transcript__role {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    min-width: 2rem;
    padding-block-start: 0.15em;
  }

  .transcript__content {
    flex: 1;
    line-height: 1.6;
  }

  /* Scored words in transcript */
  .word-scored {
    display: inline;
    padding: 0.1em 0.2em;
    margin: 0;
    font: inherit;
    line-height: inherit;
    background: none;
    border: none;
    border-bottom: 2px solid currentColor;
    cursor: pointer;
    border-radius: 0;

    &:hover {
      background: color-mix(in srgb, currentColor 10%, transparent);
    }

    &:focus-visible {
      outline: 2px solid var(--color-link);
      outline-offset: 2px;
    }
  }

  /* Word detail panel */
  .word-detail {
    position: sticky;
    bottom: var(--block-space);
    padding: var(--block-space) var(--inline-space-l);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 -2px 10px color-mix(in srgb, var(--color-ink) 8%, transparent);

    animation: slide-up 150ms ease;
  }

  .word-detail__close {
    position: absolute;
    top: var(--block-space-s);
    right: var(--inline-space);
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-ink-muted);
    cursor: pointer;
    padding: 0;

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

  .word-detail__word {
    font-size: 1.25rem;
    margin-block-end: var(--block-space-s);
  }

  .word-detail__scores {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--block-space-s) var(--inline-space-l);

    & dt {
      font-size: 0.875rem;
      color: var(--color-ink-muted);
    }

    & dd {
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
  }

  /* Audio section in word detail */
  .word-detail__audio {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-s);
    margin-block-start: var(--block-space);
    padding-block-start: var(--block-space);
    border-block-start: 1px solid var(--color-border);
  }

  .word-detail__no-audio {
    margin-block-start: var(--block-space);
    font-size: 0.875rem;
  }

  /* Audio player */
  .audio-player {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
  }

  .audio-player__label {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    min-width: 12ch;
  }

  .audio-player__progress {
    flex: 1;
    height: 0.25rem;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
  }

  .audio-player__progress-fill {
    height: 100%;
    background: var(--color-link);
    border-radius: 999px;
    width: 0%;
    transition: width 100ms linear;
  }

  @keyframes slide-up {
    from {
      opacity: 0;
      translate: 0 0.5rem;
    }
  }

  /* === Report layout === */

  .report {
    padding-block: var(--space-6);
  }

  .report-header {
    margin-block-end: var(--space-6);
  }

  .report-header__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }

  .report-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-small);
    margin-block-end: var(--space-4);
  }

  .report-meta__sep {
    color: var(--color-border);
  }

  .report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .report-tabs {
    margin-block-end: var(--space-6);
  }

  /* === Score grid (pronunciation tab) === */

  .score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-4);
    margin-block-end: var(--space-6);
  }

  .score-grid .score-card {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
  }

  .report-weak-words {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
  }

  /* === Vocabulary cards === */

  .vocab-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .vocab-card {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .vocab-card__word {
    font-weight: 600;
    font-size: 1.0625rem;
    margin-block-end: var(--space-1);
  }

  .vocab-card__translation {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    margin-block-end: var(--space-3);
  }

  .vocab-card__context {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    font-style: italic;
    padding-inline-start: var(--space-3);
    border-inline-start: 2px solid var(--color-border);
  }

  /* === Grammar correction cards === */

  .grammar-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .grammar-card {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .grammar-card__label {
    display: block;
    font-size: var(--font-size-caption);
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-end: var(--space-2);
  }

  .grammar-card__original {
    text-decoration: line-through;
    color: var(--color-error);
    margin-block-end: var(--space-2);
  }

  .grammar-card__corrected {
    color: var(--color-positive);
    font-weight: 500;
    margin-block-end: var(--space-3);
  }

  .grammar-card__explanation {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
  }

}