/* Хичээлийн төлөв ба сургалт сонгох удирдлага. */
.lessons-shell > .who { margin-bottom: var(--s5); }
.who > span { min-width: 0; overflow-wrap: anywhere; }
.who > button { flex-shrink: 0; }
.lesson-tabs { margin-bottom: var(--s7); }
.lesson-tabs .segmented { padding: var(--s1); }
.lessons-state, .lessons-empty {
  display: grid; justify-items: start; gap: var(--s5);
  padding: var(--s7); background: var(--paper-2); border-radius: var(--radius);
}
.lessons-state > div:first-child { display: grid; gap: var(--s3); }
.lessons-state h2 { max-width: 26ch; }
.lessons-empty p { margin: 0; max-width: 56ch; font-size: var(--t-sm); }
#course-panel { scroll-margin-top: var(--s6); }
#lessons-state-title { scroll-margin-top: var(--s6); }
@media (max-width: 374px) {
  .lessons-state, .lessons-empty { padding: var(--s5); }
  .lessons-state .btn--do { min-width: 0; width: 100%; }
}

.lesson-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-block: var(--s4); }
.row.is-complete .row__dur { color: var(--ink); }
.course-materials { margin-block: var(--s4); }
.course-materials h3 { font-size: var(--t-sm); }
.course-materials ul { padding-left: var(--s5); line-height: 1.8; }

.account-auth { display: grid; gap: var(--s5); min-width: 0; }
.auth-modes { gap: var(--s6); }
.auth-modes [aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.auth-title { font-size: var(--d-3); }
.auth-text-button { justify-self: start; cursor: pointer; font: inherit; }
.account-auth > .auth-text-button { min-height: 44px; }
.legacy-access { min-width: 0; }
.legacy-access > summary { cursor: pointer; font-size: var(--t-sm); padding-block: var(--s3); }
.legacy-access .gate__form { margin-top: var(--s5); }
.account-tools { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.account-tools > p { overflow-wrap: anywhere; }
#legacy-upgrade { margin-bottom: var(--s6); }
#auth-terms { line-height: 1.7; }
@media (max-width: 480px) {
  .gate__form, .account-auth { max-width: 100%; width: 100%; }
  .gate__form .btn--do { min-width: 0; width: 100%; }
}