/* Product layout only. Controls consume the frozen easyKR UI component styles. */
.ek-ui {
  --v2-paper: var(--ek-paper);
  --v2-ink: var(--ek-ink);
  --v2-muted: var(--ek-muted);
  --v2-line: var(--ek-line);
  --v2-accent: var(--ek-blue);
  --v2-accent-soft: var(--ek-blue-soft);
  --v2-success-soft: var(--ek-success-soft);
  --v2-danger: var(--ek-danger);
}
.ek-ui .v2-header { min-height: 88px; border-bottom: 1px solid var(--ek-line); }
.ek-ui .v2-nav { background: transparent; padding: 0; gap: 8px; border-radius: 0; }
.ek-ui .v2-nav a { border-radius: var(--ek-radius-sm); }
.ek-ui .v2-nav [aria-current="page"] { background: var(--ek-blue-soft); color: var(--ek-blue); box-shadow: none; }
.ek-ui .v2-shell { padding-top: 40px; }
.ek-ui .v2-preview-notice { background: var(--ek-tint); border: 0; color: var(--ek-muted); font-size: 12px; padding: 12px 16px; }
.ek-ui .v2-home-focus { width: 100%; text-align: left; margin: 24px auto 0; padding: 32px 0 40px; }
.ek-ui .v2-home-focus .v2-lesson-meta { margin-bottom: 24px; }
.ek-ui .v2-home-focus h1 { font-size: 26px; margin-bottom: 16px; }
.ek-ui .v2-home-focus .v2-muted { margin: 0; max-width: 560px; }
.ek-ui .v2-home-focus .v2-button-row { justify-content: flex-start; margin-top: 32px; gap: 16px; }
.ek-ui .v2-lesson-expression { font-size: clamp(36px, 5vw, 56px); margin-bottom: 20px; overflow-wrap: anywhere; }
.ek-ui .v2-learning-choices { margin-top: 8px; padding-top: 24px; }
.ek-ui .v2-learning-choices h2 { font-size: 18px; }
.ek-ui .v2-learning-choice { gap: 16px; padding-block: 20px; }
.ek-ui .v2-session-head { gap: 24px; }
.ek-ui .v2-session-head h1 { font-size: 26px; }
.ek-ui .v2-study-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) 256px; }
.ek-ui .v2-study-side { background: var(--ek-surface); border: 1px solid var(--ek-line); border-radius: var(--ek-radius); padding: 24px; }
.ek-ui .v2-study-side h2, .ek-ui .v2-study-side h3 { font-size: 17px; }
.ek-ui .v2-task { gap: 24px; }
.ek-ui .v2-task h2 { font-size: 23px; }
.ek-ui .v2-task-instruction { font-size: 16px; }
.ek-ui .v2-instruction { background: var(--ek-blue-soft); border-radius: var(--ek-radius); padding: 24px; }
.ek-ui .v2-instruction .v2-ko { font-size: 28px; text-align: left; }
.ek-ui .v2-option-copy { min-width: 0; overflow-wrap: anywhere; }
.ek-ui .v2-score-option { border: 1px solid var(--ek-line); border-radius: var(--ek-radius); background: var(--ek-surface); }
.ek-ui .v2-score-option:has(input:checked) { border-color: var(--ek-blue); background: var(--ek-blue-soft); }
.ek-ui .v2-answer-composer { border-radius: var(--ek-radius); border-color: var(--ek-line); box-shadow: none; background: var(--ek-surface); padding: 12px; }
.ek-ui .v2-answer-composer:focus-within { border-color: var(--ek-blue); box-shadow: var(--ek-ring); }
.ek-ui .v2-answer-composer:has([aria-invalid="true"]) { border-color: var(--ek-danger); }
.ek-ui .v2-answer-composer textarea { color: var(--ek-ink); }
.ek-ui .v2-answer-composer textarea::placeholder { color: var(--ek-muted); }
.ek-ui .v2-evaluation, .ek-ui .v2-notice { border-radius: var(--ek-radius); padding: 20px; }
.ek-ui .v2-feedback-step .v2-evaluation { border-left: 0; }
.ek-ui .v2-result-line { padding-block: 24px; }
.ek-ui .v2-answer-quote { font-size: 20px; }
.ek-ui .v2-history-head h1 { font-size: 26px; }
.ek-ui .v2-history-chapter > summary { flex-wrap: wrap; }
.ek-ui .v2-history-chapter > summary h2 { font-size: 18px; }
.ek-ui .v2-history-chapter > summary .v2-small { float: none; margin: 0 0 0 auto; }
.ek-ui .v2-history-row { padding-block: 24px; }
.ek-ui .v2-history-detail > summary { min-height: 44px; }
.ek-ui .v2-login-shell { padding-block: 40px; }
.ek-ui .v2-auth-card { width: min(100%, 420px); }
.ek-ui .v2-auth-card h1 { font-size: 26px; }
.ek-ui .v2-auth-card .auth-field label { font-weight: 500; }
.ek-ui .auth-field-error { color: var(--ek-danger); }
.ek-ui .v2-auth-card input:focus-visible, .ek-ui .v2-auth-card button:focus-visible, .ek-ui .v2-auth-card a:focus-visible { outline-color: var(--ek-blue); }
.ek-ui .v2-auth-card input[aria-invalid="true"] { border-color: var(--ek-danger); }
.ek-ui .v2-ai-notice { padding-top: 24px; border-top: 1px solid var(--ek-line); }
@media (max-width: 860px) {
  .ek-ui .v2-study-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .ek-ui .v2-header { min-height: 76px; padding-inline: 16px; gap: 8px; }
  .ek-ui .v2-nav { gap: 0; }
  .ek-ui .v2-nav a { min-width: 48px; padding-inline: 10px; }
  .ek-ui .v2-shell { padding: 24px 16px 40px; }
  .ek-ui[data-page="v2-today"] .v2-home-focus { text-align: center; margin-top: 0; padding-block: 16px; }
  .ek-ui[data-page="v2-today"] .v2-home-focus .v2-lesson-meta { margin-bottom: 16px; }
  .ek-ui[data-page="v2-today"] .v2-home-focus .v2-muted { margin-inline: auto; }
  .ek-ui[data-page="v2-today"] .v2-home-focus .v2-button-row { justify-content: center; margin-top: 24px; }
  .ek-ui .v2-home-focus h1, .ek-ui .v2-session-head h1 { font-size: 24px; }
  .ek-ui .v2-lesson-expression { font-size: 36px; }
  .ek-ui .v2-task h2 { font-size: 21px; }
  .ek-ui .v2-instruction, .ek-ui .v2-study-side { padding: 20px; }
  .ek-ui .v2-history-chapter > summary { gap: 8px; }
  .ek-ui .v2-history-chapter > summary .v2-small { margin-left: 0; }
  .ek-ui .v2-session-nav { gap: 8px; }
  .ek-ui .v2-session-nav .ek-button { padding-inline: 0; }
  .ek-ui .v2-footer { padding-inline: 16px; }
}

.ek-ui .v2-auth-card .auth-password-toggle { flex-basis: 64px; padding-inline: 8px; }

.ek-ui .v2-evaluation { background: var(--ek-tint); }
.ek-ui .v2-evaluation[data-verdict="passed"], .ek-ui .v2-evaluation[data-verdict="passed_with_notes"] { background: var(--ek-success-soft); }
.ek-ui .v2-evaluation[data-verdict="retry"] { background: var(--ek-blue-soft); }
.ek-ui .v2-prerequisites { margin-top: 8px; }
.ek-ui .v2-prerequisites > summary { font-size: 13px; }
.ek-ui .v2-prerequisites > p { margin-bottom: 16px; }
/* Native radio groups with no selection match :indeterminate. Keep the
   kit's checkbox mixed-state appearance from implying an answer was chosen. */
.ek-ui .ek-choice input[type="radio"]:indeterminate {
  background: var(--ek-surface);
  border-color: var(--ek-line);
}
.ek-ui .ek-choice input[type="radio"]:indeterminate::after { display: none; }