/* Practice Center */
.practice-container { max-width: 680px; margin: 0 auto; }
.practice-modes { display: grid; gap: var(--space-4); min-width: 0; }
.practice-modes__grid { display: grid; gap: var(--space-3); min-width: 0; }
.practice-mode { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-3); background: var(--color-bg-secondary); }
.practice-mode h3, .practice-mode p { margin: 0; }
.practice-mode .btn { min-height: 44px; white-space: normal; }
.practice-recommended, .practice-result { display: flex; flex-direction: column; gap: var(--space-4); }
.practice-section-title { margin: 0; font-size: var(--font-size-xl); }
.practice-dashboard, .practice-history { display: grid; gap: var(--space-4); }
.practice-dashboard__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.practice-dashboard__stat { min-width: 0; padding: var(--space-3); border-radius: var(--radius-3); background: var(--color-bg-secondary); }
.practice-dashboard__stat dt { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.practice-dashboard__stat dd { margin: var(--space-1) 0 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.practice-history__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.practice-history__item { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.practice-history__item:last-child { padding-bottom: 0; border-bottom: 0; }
.practice-history__item span { color: var(--color-text-secondary); }
.practice-recommended__eyebrow { margin: 0; color: var(--color-primary); font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); letter-spacing: var(--type-overline-letter-spacing); text-transform: uppercase; }
.practice-recommended__count, .practice-result h2 { margin: 0; font-size: var(--font-size-2xl); }
.practice-breakdown { padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.practice-breakdown__title { margin: 0 0 var(--space-2); font-size: var(--font-size-base); }
.practice-breakdown__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.practice-breakdown__list li { display: flex; justify-content: space-between; gap: var(--space-4); }
.practice-unavailable { margin: 0; color: var(--color-text-secondary); }
.practice-priority-note { margin: 0; padding: var(--space-3); border-radius: var(--radius-3); background: var(--color-bg-secondary); color: var(--color-text-secondary); }
.practice-city-filter { display: grid; gap: var(--space-2); }
.practice-city-filter label { font-weight: var(--font-weight-semibold); }
.practice-city-filter select { min-height: 44px; padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-3); background: var(--color-bg-primary); color: var(--color-text-primary); }
.practice-city-filter p { margin: 0; }
.practice-page .empty-state__action { min-height: 44px; }
.practice-progress { display: grid; gap: var(--space-2); }
.practice-progress__text { margin: 0; font-weight: var(--font-weight-semibold); }
.practice-progress__track { height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-bg-tertiary); }
.practice-progress__fill { height: 100%; border-radius: inherit; background: var(--color-primary); transition: width var(--duration-normal) var(--ease-out); }
.practice-exercise { min-width: 0; }
.practice-page .exercise-prompt { color: var(--color-text-primary); }
.practice-result__stats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); margin: 0; }
.practice-result__stats dt { color: var(--color-text-secondary); }
.practice-result__stats dd { margin: 0; font-weight: var(--font-weight-bold); }
.practice-result__actions { display: grid; gap: var(--space-3); }
.practice-result__actions .btn { min-height: 44px; }
@media (min-width: 48rem) { .practice-dashboard__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .practice-result__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .practice-progress__fill { transition: none; } }

.sentence-builder-container,
.sentence-builder-stage,
.sentence-builder-session,
.sentence-builder-session__exercise { min-width: 0; }
.sentence-builder-filter { display: grid; gap: var(--space-2); }
.sentence-builder-filter label { font-weight: var(--font-weight-semibold); }
.sentence-builder-filter select { width: 100%; min-height: 44px; padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-3); background: var(--color-bg-primary); color: var(--color-text-primary); }
.sentence-builder-filter p { margin: 0; }
.sentence-builder-summary { display: grid; gap: var(--space-3); min-width: 0; }
.sentence-builder-summary__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.sentence-builder-summary__stats > div { min-width: 0; padding: var(--space-3); border-radius: var(--radius-3); background: var(--color-bg-secondary); }
.sentence-builder-summary__stats dt { color: var(--color-text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.sentence-builder-summary__stats dd { margin: var(--space-1) 0 0; color: var(--color-text-primary); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.sentence-builder-session { display: grid; gap: var(--space-4); }
.sentence-builder-session__source { margin: 0; color: var(--color-primary); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.sentence-builder-session__progress { margin: 0; color: var(--color-text-secondary); }
.sentence-builder-session__instruction { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-xl); }
.sentence-builder-next { width: 100%; min-height: 44px; white-space: normal; }
.sentence-builder-empty { display: grid; gap: var(--space-3); }
.sentence-builder-empty h2, .sentence-builder-empty p { margin: 0; }

@media (min-width: 48rem) {
  .practice-modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sentence-builder-summary__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .sentence-builder-page *,
  :root:not([data-motion="full"]) .exercise-word-button { scroll-behavior: auto; animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Pronunciation - local, optional listen-and-repeat mode. */
.pronunciation-container,
.pronunciation-stage,
.pronunciation-player,
.pronunciation-player-card { min-width: 0; }
.pronunciation-filter { display: grid; gap: var(--space-2); }
.pronunciation-filter label { font-weight: var(--font-weight-semibold); }
.pronunciation-filter select { width: 100%; min-height: 48px; padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-3); background: var(--color-bg-primary); color: var(--color-text-primary); }
.pronunciation-filter p,
.pronunciation-progress p,
.pronunciation-player__context,
.pronunciation-player__translation,
.pronunciation-player__guide,
.pronunciation-player__instruction,
.pronunciation-status,
.pronunciation-privacy-note,
.pronunciation-recording-indicator { margin: 0; }
.pronunciation-player { display: grid; gap: var(--space-4); text-align: center; }
.pronunciation-progress { display: flex; justify-content: flex-end; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.pronunciation-player__context { color: var(--color-primary); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.pronunciation-player__word { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-3xl); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.pronunciation-player__translation { color: var(--color-text-primary); font-size: var(--font-size-xl); overflow-wrap: anywhere; }
.pronunciation-player__guide { color: var(--color-text-secondary); font-size: var(--font-size-lg); overflow-wrap: anywhere; }
.pronunciation-player__instruction { padding-top: var(--space-3); border-top: 1px solid var(--color-divider); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.pronunciation-status { min-height: var(--space-5); overflow-wrap: anywhere; }
.pronunciation-privacy-note { padding: var(--space-3); border-radius: var(--radius-3); background: var(--color-bg-secondary); color: var(--color-text-secondary); text-align: left; overflow-wrap: anywhere; }
.pronunciation-recording-indicator { padding: var(--space-3); border: 2px solid var(--color-error); border-radius: var(--radius-3); background: var(--color-warning-bg-soft); color: var(--color-text-primary); font-weight: var(--font-weight-bold); }
.pronunciation-controls { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.pronunciation-control { width: 100%; min-width: 0; min-height: 48px; white-space: normal; }
.pronunciation-empty { display: grid; gap: var(--space-3); }
.pronunciation-empty h2,
.pronunciation-empty p { margin: 0; }
.pronunciation-empty .btn { min-height: 48px; }

@media (min-width: 48rem) {
  .pronunciation-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pronunciation-next { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .pronunciation-page * { scroll-behavior: auto; animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}