/* Модуль «Обучение»: список курсов, уроки, материалы урока. Перенесено из
   public/styles.css как было (24 сентября 2026); подключается только у
   включённого модуля. Левая колонка курсов — общими классами колонки
   (`side__…`, `siderow`), своих правил ей не нужно. */


/* ── Курсы ───────────────────────────────────────────────────────────────────

   Не база знаний: там дерево и поиск, здесь порядок и отметка «прошёл».
   Курс читают подряд, поэтому колонка узкая — как у базы знаний, по той же
   причине: длинную строку читать тяжело, а курс именно читают. */
.page--narrow { max-width: min(var(--kb-line), 100%); }

.kursy {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.kurs {
  display: flex; flex-direction: column; gap: var(--s-2); text-align: left;
  padding: var(--s-4); background: var(--raised); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); font: inherit;
  transition: border-color var(--fast), background var(--fast);
}
.kurs:hover { border-color: var(--border-strong); }
.kurs__head { display: flex; align-items: center; gap: var(--s-2); }
.kurs__name { font-size: var(--t-md); font-weight: 600; }
.kurs__sum { margin: 0; }
.kurs__foot { margin-top: auto; }
/* Пройденный курс — тише прочих: он сделан, и звать он больше не должен. */
.kurs.is-done .kurs__name { color: var(--text-dim); }

.urok {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s-4);
  margin-bottom: var(--s-3);
}
.urok__head { display: flex; align-items: center; gap: var(--s-3); }
.urok__n { flex: none; min-width: 18px; }
.urok__name { flex: 1; min-width: 0; margin: 0; font-size: var(--t-md); }
.urok__done { flex: none; display: flex; align-items: center; gap: var(--s-1); cursor: pointer; }
.urok__body { margin-top: var(--s-3); line-height: 1.6; white-space: pre-wrap; }
.urok__edit { margin-top: var(--s-3); width: 100%; resize: vertical; }
/* Пройденный урок не вычёркивается: текст в нём остаётся нужным — к нему
   возвращаются. Гасим только заголовок и рамку. */
.urok.is-done { border-color: var(--border); background: var(--surface); }
.urok.is-done .urok__name { color: var(--text-dim); }

/* Материалы урока: картинки показываются сразу, остальное строкой.
   Ради картинок их и кладут — «вот так выглядит правильный лист»
   объясняет быстрее абзаца. */
.urok__files {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3);
}
.urok__pic {
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: none; cursor: pointer; overflow: hidden; line-height: 0;
}
.urok__pic img { width: 160px; height: 120px; object-fit: cover; display: block; }
.urok__file {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--t-sm); cursor: pointer;
}
.urok__file:hover { border-color: var(--border-strong); }
.urok__file-ic {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .04em;
  color: var(--text-faint);
}