/* UI-кит и каркасные блоки: шапка, герой, кнопки, карточки, бейджи, поля форм,
   программа курса, CTA, футер. Все размеры — через токены из tokens.css. */

/* ---------- Шапка ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line-accent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 4rem;
}

.brand {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out-soft);
}

.brand:hover {
  color: var(--color-accent-ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.site-nav__link {
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out-soft);
}

.site-nav__link:hover {
  color: var(--color-accent-ink);
}

/* Текущий раздел кабинета: акцентный текст с подчёркиванием — видно и без
   цвета (underline не полагается только на оттенок). */
.site-nav__link[aria-current="page"] {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.site-nav__user {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

@media (max-width: 40rem) {
  /* Узкие экраны: имя студента прячем; ссылки при нехватке ширины
     переносятся на вторую строку — горизонтального скролла нет. */
  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-s);
  }

  .site-nav__link {
    white-space: nowrap;
  }

  .site-nav__user {
    display: none;
  }
}

/* ---------- Герой ---------- */

.hero {
  padding-block: var(--space-xl) var(--space-2xl);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.hero__lead {
  margin-top: var(--space-m);
  max-width: 36rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--color-ink-muted);
  text-wrap: balance;
}

.hero__actions {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
}

.hero__hint {
  margin-top: var(--space-m);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* ---------- Заголовок секции ---------- */

.section__head {
  max-width: var(--container-text);
  margin-bottom: var(--space-l);
}

.section__title {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section__sub {
  margin-top: var(--space-xs);
  color: var(--color-ink-muted);
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font: inherit;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-1) var(--ease-out-soft),
    background-color var(--dur-1) var(--ease-out-soft),
    border-color var(--dur-1) var(--ease-out-soft),
    color var(--dur-1) var(--ease-out-soft),
    box-shadow var(--dur-1) var(--ease-out-soft);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--s {
  padding: 0.5rem 1rem;
  font-size: var(--step--1);
}

.btn--l {
  padding: 0.9375rem 1.75rem;
  font-size: 1.0625rem;
}

.btn--primary {
  background: var(--color-accent-deep);
  color: var(--color-text-on-accent);
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-accent-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn .icon {
  transition: translate var(--dur-1) var(--ease-out-soft);
}

.btn--primary:hover:not(:disabled) .icon {
  translate: 3px 0;
}

.btn--secondary {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: transparent;
}

.btn--secondary:hover:not(:disabled) {
  border-color: var(--color-accent-ink);
  color: var(--color-accent-ink);
  background: var(--color-accent-soft);
  transform: translateY(-2px);
}

.btn--ghost {
  color: var(--color-accent-ink);
  background: transparent;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--color-accent-soft);
}

/* ---------- Карточки ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
  transition:
    transform var(--dur-2) var(--ease-out-soft),
    border-color var(--dur-2) var(--ease-out-soft),
    box-shadow var(--dur-2) var(--ease-out-soft);
}

.card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-m);
}

/* ---------- Бейджи статусов ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--color-ink-muted);
}

.badge--accent {
  border-color: transparent;
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
}

.badge--success {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge--danger {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.badge--warn {
  border-color: transparent;
  background: var(--color-warn-soft);
  color: var(--color-warn);
}

/* ---------- Поля форм ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field__label {
  font-size: var(--step--1);
  font-weight: 600;
}

.field__input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-s);
  transition:
    border-color var(--dur-1) var(--ease-out-soft),
    box-shadow var(--dur-1) var(--ease-out-soft);
}

.field__input::placeholder {
  color: var(--color-ink-soft);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.field__input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.field__error {
  font-size: var(--step--1);
  color: var(--color-danger);
}

.field__hint {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* ---------- Программа курса ---------- */

.program {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 60rem) {
  .program {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .program {
    grid-template-columns: 1fr;
  }
}

.program-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.program-card__num {
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-line-strong);
  font-variant-numeric: tabular-nums;
}

.program-card--first .program-card__num {
  color: var(--color-accent);
}

.program-card__title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.program-card__meta {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.program-card .badge {
  margin-top: var(--space-xs);
}

/* ---------- CTA ---------- */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-line);
}

.cta__title {
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.cta__text {
  margin-top: var(--space-s);
  max-width: 34rem;
  color: var(--color-ink-muted);
  text-wrap: balance;
}

.cta .btn {
  margin-top: var(--space-l);
}

/* ---------- Футер ---------- */

.site-footer {
  border-top: 1px solid var(--color-line);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-m);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out-soft);
}

.site-footer__link:hover {
  color: var(--color-accent-ink);
}
/* ---------- Страницы входа, приглашения и сообщений ---------- */

.auth {
  padding-block: var(--space-xl) var(--space-2xl);
}

.auth__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 26rem;
  margin-inline: auto;
  padding: var(--space-l) var(--space-m);
}

.auth__title {
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.auth__hint {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.auth__actions {
  display: flex;
  justify-content: flex-end;
}

.auth__actions--start {
  justify-content: flex-start;
}

/* ---------- Кабинет: общий прогресс и недели курса ---------- */

.dashboard-account {
  display: inline-flex;
  margin-bottom: var(--space-l);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out-soft);
}

.dashboard-account:hover {
  color: var(--color-accent-ink);
}

.course-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: var(--container-text);
  margin-bottom: var(--space-l);
}

.course-progress__label {
  font-size: var(--step-1);
  font-weight: 700;
}

.progress {
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent-deep);
}

/* Тонкая полоска прогресса внутри карточки недели. */
.progress--s {
  height: 0.375rem;
  width: 100%;
}

.program-card__num--accent {
  color: var(--color-accent);
}

/* Карточки недель в одном ряду сетки — одной высоты: ячейка растягивает
   карточку на всю строку грида. */
.program-item {
  display: flex;
}

.program-item > .week-card {
  flex: 1;
}

/* Карточка недели с датой в будущем: та же геометрия, приглушённые детали. */
.week-card--locked .program-card__num {
  color: var(--color-line);
}

.week-card--locked .program-card__title {
  color: var(--color-ink-muted);
}

.week-card--locked .progress__fill {
  background: var(--color-line-strong);
}

/* Карточки-ссылки (неделя, урок): без подчёркивания — кликабельность
   передаётся подложкой, ховером и бейджем, а не underline на всём тексте. */
a.week-card,
a.lesson-card {
  text-decoration: none;
}

.week-card .badge {
  margin-top: var(--space-xs);
}

/* ---------- Кабинет: страница недели ---------- */

.week-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out-soft);
}

.week-back:hover {
  color: var(--color-accent-ink);
}

.week-back .icon {
  transition: translate var(--dur-1) var(--ease-out-soft);
}

.week-back:hover .icon {
  translate: -3px 0;
}

.kicker {
  margin-bottom: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.week-head {
  margin-bottom: var(--space-l);
}

.week-head .progress {
  max-width: var(--container-text);
  margin-top: var(--space-s);
}

.lessons {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  max-width: var(--container-text);
}

.lesson-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  width: 100%;
}

.lesson-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.lesson-card__num {
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-line-strong);
  font-variant-numeric: tabular-nums;
}

.lesson-card__title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lesson-card__description {
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

/* Мелкая метка срока сдачи домашки в карточке недели. */
.lesson-card__deadline {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* Текущий урок: с него студент продолжает курс. */
.lesson-card--current {
  border-color: var(--color-accent);
}

.lesson-card--current .lesson-card__num {
  color: var(--color-accent);
}

/* Закрытые уроки: без тени и заливки, название размыто, описание читается —
   программа курса видна заранее, вход в урок — нет. */
.lesson-card--locked-date,
.lesson-card--locked-chain {
  background: transparent;
  box-shadow: none;
}

.lesson-card--locked-date .lesson-card__title,
.lesson-card--locked-chain .lesson-card__title {
  color: var(--color-ink-muted);
  filter: blur(2px);
  user-select: none;
}

.lesson-card--locked-date .lesson-card__description,
.lesson-card--locked-chain .lesson-card__description {
  color: var(--color-ink-soft);
}

/* ---------- Кабинет: заглушка урока и пустые состояния ---------- */

.lesson-stub {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: var(--container-text);
  padding: var(--space-l) var(--space-m);
}

.lesson-stub__text {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--color-ink-muted);
  text-wrap: balance;
}

.dashboard-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
}

.dashboard-empty__text {
  font-size: var(--step-1);
  font-weight: 600;
}

/* Кнопка выхода в навигации живёт внутри формы — снять базовые отступы формы. */
.site-nav__logout {
  display: flex;
}

/* ---------- Админка: списки ---------- */

.admin-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
}

.admin-empty__text {
  font-size: var(--step-0);
  color: var(--color-ink-muted);
}

.table-card {
  padding: 0;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.table th {
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--color-line-strong);
  color: var(--color-ink-soft);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table__num {
  font-variant-numeric: tabular-nums;
}

.table__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2xs);
  white-space: nowrap;
}

/* ---------- Админка: разделы, формы, копирование ссылок ---------- */

.admin-tabs {
  display: flex;
  /* Четыре раздела не помещаются в строку на узких экранах: переносим,
     а не прячем за горизонтальным скроллом. */
  flex-wrap: wrap;
  gap: var(--space-l);
  margin-bottom: var(--space-l);
}

.admin-tabs__link {
  padding-bottom: 0.25rem;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--color-ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition:
    color var(--dur-1) var(--ease-out-soft),
    border-color var(--dur-1) var(--ease-out-soft);
}

.admin-tabs__link:hover {
  color: var(--color-accent-ink);
}

.admin-tabs__link[aria-current="page"] {
  color: var(--color-ink);
  border-color: var(--color-accent);
}

.admin-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 30rem;
  margin-bottom: var(--space-l);
  padding: var(--space-l) var(--space-m);
}

.admin-card__title {
  font-size: var(--step-1);
  font-weight: 700;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.admin-form__actions {
  display: flex;
  justify-content: flex-end;
}

.copybox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
  border-color: var(--color-line-strong);
}

.copybox__title {
  font-size: var(--step-1);
  font-weight: 700;
}

.copybox__hint {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.copybox__link {
  width: 100%;
  padding: var(--space-s) var(--space-m);
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-s);
  font-family: ui-monospace, monospace;
  font-size: var(--step--1);
  word-break: break-all;
}

/* ---------- Админка: программа курса ---------- */

/* Мелкая подпись под названием в ячейке таблицы (например, «Уроков: 4»). */
.table__meta {
  display: block;
  margin-top: 2px;
  color: var(--color-ink-muted);
  font-size: var(--step--1);
}

/* Разрушающие действия (подтверждение удаления урока). */
.btn--danger {
  background: var(--color-danger);
  color: var(--color-text-on-accent);
}

.btn--danger:hover:not(:disabled) {
  background: var(--color-danger);
  filter: brightness(0.92);
  transform: translateY(-2px);
  box-shadow: var(--shadow-s);
}

/* Чекбокс в строке с подписью (например, «Урок под вопросом»). */
.field--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

.field__checkbox {
  width: 1.0625rem;
  height: 1.0625rem;
  accent-color: var(--color-accent-deep);
}

/* ---------- Страница урока ---------- */

.lesson-description {
  max-width: var(--container-text);
}

.week-head .watched-badge {
  margin-top: var(--space-s);
}

/* Каркас плеера: 16:9, скругления по токенам, тёмная сцена под видео. */
.player {
  position: relative;
  max-width: var(--container-text);
  aspect-ratio: 16 / 9;
  background: var(--color-ink);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Сцена тестового дубля (TEST_MODE): тот же каркас, плейсхолдер вместо видео. */
.player__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-m);
  text-align: center;
}

.player__icon {
  width: 3rem;
  height: 3rem;
  color: var(--color-text-on-accent);
  opacity: 0.85;
}

.player__note {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.72);
}

.player-test-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-s);
}

/* Заглушка «Видео скоро» для урока без записи. */
.player-soon {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  max-width: var(--container-text);
  padding: var(--space-l) var(--space-m);
}

.player-soon__icon {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.9rem;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.player-soon__title {
  font-size: var(--step-1);
  font-weight: 700;
}

.player-soon__text {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.lesson-watch {
  margin-top: var(--space-m);
}

/* Блок «Следующий урок» и домашка после зачёта просмотра. */
.lesson-next,
.lesson-homework,
.lesson-materials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  max-width: var(--container-text);
  margin-top: var(--space-l);
}

.lesson-next .kicker {
  margin-bottom: 0;
}

.lesson-next__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-accent-ink);
  text-decoration: none;
}

.lesson-next__link .icon {
  transition: translate var(--dur-1) var(--ease-out-soft);
}

.lesson-next__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lesson-next__link:hover .icon {
  translate: 3px 0;
}

.lesson-next__last {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--color-ink-muted);
}

.lesson-homework__title {
  font-size: var(--step-1);
  font-weight: 700;
}

.lesson-homework__text {
  font-size: var(--step-0);
  line-height: 1.6;
  white-space: pre-line;
}

.lesson-homework__note {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* --- Сдача домашки: форма и просмотр своей сдачи (тикет 08). --- */

.homework-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  width: 100%;
  margin-top: var(--space-s);
}

.homework-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.homework-sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  margin-top: var(--space-s);
}

.homework-sent__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.homework-sent__date {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.homework-sent__link-wrap {
  max-width: 100%;
}

.homework-sent__link {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.homework-sent__link:hover {
  color: var(--color-accent-deep);
}

.homework-sent__edit {
  margin-top: var(--space-2xs);
}

/* Длинные ссылки и комментарии в таблице сдач не разрывают колонки. */
.table__wrap {
  overflow-wrap: anywhere;
}

/* Узкие экраны: в таблице сдач прячем дату — статусы и «Принять» видны
   без горизонтального скролла; остальное сжимает карточка с прокруткой. */
@media (max-width: 40rem) {
  .table .col-date {
    display: none;
  }

  .table th,
  .table td {
    padding: var(--space-xs) var(--space-2xs);
  }
}

/* Служебная строка внутри ячейки статуса (попытки и даты писем):
   на десктопе дублировалась бы колонками, поэтому скрыта по умолчанию
   и показывается только там, где колонки свёрнуты. */
.table-meta {
  display: none;
}

.table-meta--error {
  color: var(--color-danger);
}

/* Узкие экраны: в таблице аутбокса маловажные колонки свёрнуты в подсказку
   статуса — таблица помещается в 390px без горизонтального скролла. */
@media (max-width: 40rem) {
  .table .col-attempts,
  .table .col-created,
  .table .col-sent {
    display: none;
  }

  .table-meta {
    display: block;
    margin-top: var(--space-2xs);
    font-size: var(--step--1);
    line-height: 1.45;
    color: var(--color-ink-soft);
  }
}

/* Колонка действий — по ширине кнопки, не растягивается контентом. */
@media (max-width: 40rem) {
  .table .table__actions {
    width: 1%;
    white-space: nowrap;
  }
}

/* ---------- Кабинет: ссылки настроек аккаунта ---------- */

.dashboard-account-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
  margin-bottom: var(--space-l);
}

.dashboard-account-links .dashboard-account {
  margin-bottom: 0;
}

/* ---------- Кабинет: привязка Telegram (тикет 10) ---------- */

/* Команду боту с кодом студенты перепечатывают с экрана телефона:
   моноширинный шрифт, крупный кегль и рамка, чтобы код читался по знакам. */
.tg-command__text {
  display: inline-block;
  padding: var(--space-xs) var(--space-m);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--step-2);
  letter-spacing: 0.08em;
}

.tg-chat {
  font-size: var(--step-0);
}

.tg-chat__id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}


/* --- Материалы урока (тикет 14): список файлов к скачиванию. --- */

.materials-list {
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.materials-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-s);
}

.materials-list__link {
  font-weight: 700;
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.materials-list__link:hover {
  text-decoration: none;
}

.materials-list__meta {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* ---------- Кабинет: дорожная карта (вертикальный таймлайн) ---------- */

.timeline {
  position: relative;
  max-width: var(--container-text);
  padding: 0;
  margin-block: 0;
  list-style: none;
}

/* Одна вертикальная линия на весь маршрут; узлы перекрывают её непрозрачным
   фоном, поэтому линия «проходит» через них. Хвост подобран под последний
   узел: линия не должна торчать ниже конца маршрута. */
.timeline::before {
  content: "";
  position: absolute;
  top: 2.1875rem;
  bottom: 2.5rem;
  left: calc(1.4375rem - 1px);
  width: 2px;
  background: var(--color-line);
}

.timeline-week,
.timeline-item {
  position: relative;
  padding-left: 3.75rem;
}

.timeline-week {
  padding-block: var(--space-s) var(--space-2xs);
}

.timeline-item {
  padding-block: var(--space-2xs);
}

.timeline-week__node,
.timeline-item__node {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
}

/* Узел недели: крупный номер на линии. */
.timeline-week__node {
  top: 0.75rem;
  left: 0;
  width: 2.875rem;
  height: 2.875rem;
  border: 2px solid var(--color-line-strong);
  color: var(--color-ink-muted);
  font-size: var(--step--1);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.timeline-week--locked .timeline-week__node {
  border-color: var(--color-line);
  color: var(--color-line-strong);
}

/* Узел урока: иконка статуса, центр на той же линии. */
.timeline-item__node {
  top: 0.75rem;
  left: 0.3125rem; /* (2.875rem - 2.25rem) / 2 — соосно с узлом недели */
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--color-line-strong);
  color: var(--color-ink-muted);
}

.timeline-item--watched .timeline-item__node {
  border-color: var(--color-success);
  color: var(--color-success);
}

.timeline-item--current .timeline-item__node {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.timeline-item--available .timeline-item__node {
  border-color: var(--color-accent-deep);
  color: var(--color-accent-ink);
}

/* Заголовок недели — типографский блок без карточки: крупно и с воздухом. */
.timeline-week__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.timeline-week__title {
  font-size: var(--step-1);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.timeline-week__meta {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.timeline-week__progress {
  width: min(16rem, 100%);
  margin-top: var(--space-2xs);
}

/* Карточка урока на маршруте; ссылка — только у доступных статусов. */
.timeline-item__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-s) var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}

a.timeline-item__body {
  width: 100%;
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-2) var(--ease-out-soft),
    border-color var(--dur-2) var(--ease-out-soft),
    box-shadow var(--dur-2) var(--ease-out-soft);
}

a.timeline-item__body:hover {
  transform: translateY(-3px);
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-m);
}

/* Текущий урок: «ты здесь» — акцентная рамка, как у карточки недели. */
.timeline-item--current .timeline-item__body {
  border-color: var(--color-accent);
}

.timeline-item__title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Закрытые уроки: название размыто — программа видна заранее, вход нет
   (то же решение, что на странице недели). */
.timeline-item__title--muted {
  color: var(--color-ink-muted);
  filter: blur(2px);
  user-select: none;
}

.timeline-item--locked-date .timeline-item__body,
.timeline-item--locked-chain .timeline-item__body {
  background: transparent;
  box-shadow: none;
}

/* Маркеры урока: материалы и домашка со сроком — мелкий мета-текст. */
.timeline-item__markers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
}

.marker {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}