/* Вид A «Тихая книга» для экрана курса и «Панели ведущего» (look-a.341102a.css). Слова Лираз 30.10.2026: «перебор этого золота, это выглядит колхозом … жирным шрифтом и
   фиолетовым, базар-вокзал … белый, контраст»; 01.11.2026 на снимок своей панели загрузки: «не нравится этот интерфейс» (громоздкий); «A, делай».
   Макет-эталон: new-look/a (README: один цвет, одна роль). Экран ведёт себя как оглавление книги: слова, номера, воздух; иерархию держат размер, начертание и поля,
   тонкая линия вместо рамки; единственный сдержанный синий означает «сюда можно нажать».

   ОБЛАСТЬ: только экран курса, корень #v-courses[data-crs="course"] (список курсов, зал, чат и остальное приложение не затронуты). ПОДКЛЮЧЕНИЕ: после всех css курсов.
   ОПОРА: внутри области переназначены общие опоры приложения (--gold-text, --gold-rgb, --gold-fill, --on-gold, --violet, --ink*, --glass*, --line, --bg0, --teal) на
   спокойные токены --la-*. Поэтому модули курса (карточки, корзина, строка файла, плейлист, «Начать урок», конспект в панели), которым опоры приходят по наследству,
   перекрашиваются целиком, а золотых плашек и фиолетовых заливок в области не остаётся ни у одного из них. Токены: два набора, тёмный по умолчанию и светлый
   (html[data-theme="light"]); числом цвет в правилах ниже не пишется, кроме токенов.
   Без :has(), inset, dvh, color-mix(), oklch: Chromium 99 (бабушкин самсунг). Направление — логическими свойствами, иврит справа налево. Значки — только SVG модулей. */

#v-courses[data-crs="course"] {
  --la-serif: Georgia, "Times New Roman", "Frank Ruhl Libre", serif;
  --la-sans: Arial, 'Helvetica Neue', Helvetica, 'Heebo', system-ui, sans-serif; /* тот же ряд, что --ui приложения: system-ui на Linux (DejaVu) шире Arial на ~15%, строки «Сохранено · …» и кнопки не влезали (CI v309) */
  /* ночь (по умолчанию) */
  --la-paper: #141619;
  --la-card: #1c1e21;
  --la-tint: #27292c;
  --la-ink: #d6d4d0;
  --la-ink-2: #a9abaf;
  --la-ink-3: #909296;
  --la-line: #2f3033;
  --la-line-strong: #6c6f73;
  --la-accent: #76a3ce;
  --la-accent-hover: #8bb6df;
  --la-on-accent: #141619;
  --la-line-rgb: 108, 111, 115;
  --la-danger: #e0907f;

  /* опоры приложения → токены вида A */
  --gold-text: var(--la-ink-2);
  --gold-rgb: var(--la-line-rgb);
  --gold-fill: var(--la-accent);
  --on-gold: var(--la-on-accent);
  --gold: var(--la-accent);
  --gold2: var(--la-accent);
  --violet: var(--la-accent);
  --teal: var(--la-ink);
  --ink: var(--la-ink);
  --ink-dim: var(--la-ink-2);
  --ink-faint: var(--la-ink-3);
  --glass: var(--la-card);
  --glass2: var(--la-tint);
  --line: var(--la-line);
  --bg0: var(--la-paper);
  --danger-text: var(--la-danger);

  background: var(--la-paper);
  color: var(--la-ink);
  font-family: var(--la-sans);
  accent-color: var(--la-accent);
  caret-color: var(--la-accent);
}
html[data-theme="light"] #v-courses[data-crs="course"] {
  --la-paper: #efeeeb;
  --la-card: #f7f6f3;
  --la-tint: #e4e3e0;
  --la-ink: #2b2e32;
  --la-ink-2: #4a4d52;
  --la-ink-3: #616368;
  --la-line: #d7d6d2;
  --la-line-strong: #84868a;
  --la-accent: #225079;
  --la-accent-hover: #144065;
  --la-on-accent: #f7f6f3;
  --la-line-rgb: 132, 134, 138;
  --la-danger: #9a3a28;
}
html[lang="he"] #v-courses[data-crs="course"] {
  --la-serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --la-sans: Arial, 'Helvetica Neue', Helvetica, 'Heebo', system-ui, sans-serif;
}
#v-courses[data-crs="course"] ::selection { background: var(--la-accent); color: var(--la-on-accent); }
#v-courses[data-crs="course"] .disp { font-family: var(--la-serif); }

/* Начертаний два: 400 и 500. Жирнее нигде нет. Заглавных букв с разрядкой нет. */
#v-courses[data-crs="course"] * { font-weight: 400; letter-spacing: 0; text-transform: none; }
#v-courses[data-crs="course"] button, #v-courses[data-crs="course"] h3, #v-courses[data-crs="course"] h4, #v-courses[data-crs="course"] h5,
#v-courses[data-crs="course"] .lc-name, #v-courses[data-crs="course"] .hlrow-name { font-weight: 500; }
html #v-courses[data-crs="course"] input:not([type="file"]), html #v-courses[data-crs="course"] textarea, html #v-courses[data-crs="course"] select {
  font-family: var(--la-sans); border-color: var(--la-line-strong); background-color: transparent; color: var(--la-ink); box-shadow: none; }

/* ---------- шапка: одна строка (стрелка, «Курсы», название) ---------- */
#v-courses[data-crs="course"] .crs-mhead { min-height: 44px; margin: 0 0 4px; }
#v-courses[data-crs="course"] .crs-mback, #v-courses[data-crs="course"] .crs-mback.crs-mback-hall { color: var(--la-ink); border-radius: 10px; }
#v-courses[data-crs="course"] .crs-mback:hover { background: var(--la-tint); }
#v-courses[data-crs="course"] .crs-mcrs { color: var(--la-ink-2); font-size: calc(16px * var(--fs, 1)); font-weight: 400; }
#v-courses[data-crs="course"] .crs-msep { color: var(--la-ink-2); }
#v-courses[data-crs="course"] .crs-mtitle, html[data-theme="light"] #v-courses[data-crs="course"] .crs-mtitle { color: var(--la-ink); font-family: var(--la-sans); font-size: calc(16px * var(--fs, 1));
  font-weight: 500; line-height: 1.3; }
#v-courses[data-crs="course"] .crs-shead .crs-mtitle.crs-stitle { font-family: var(--la-serif); font-size: calc(20px * var(--fs, 1)); }
#v-courses[data-crs="course"] .crs-mcourse { color: var(--la-ink-3); font-size: calc(14px * var(--fs, 1)); font-weight: 400; }

/* ---------- меню курса: слова книги, не плитки ---------- */
#v-courses[data-crs="course"] .crs-menu { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0 0 8px; }
#v-courses[data-crs="course"] .crs-mi { position: static; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 44px; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--la-ink); font-size: calc(16px * var(--fs, 1)); font-weight: 400; line-height: 1.3; text-align: start; }
#v-courses[data-crs="course"] .crs-mi:active { transform: none; }
#v-courses[data-crs="course"] .crs-menu .crs-mi-ic { display: none; }
#v-courses[data-crs="course"] .crs-menu .crs-mi-t { max-width: none; overflow: visible; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--la-line-strong);
  text-decoration-thickness: 1px; text-underline-offset: 5px; }
#v-courses[data-crs="course"] .crs-menu .crs-mi:hover .crs-mi-t { text-decoration-color: var(--la-ink); }
#v-courses[data-crs="course"] .crs-mi-dot { position: static; width: 8px; height: 8px; background: var(--la-accent); }
#v-courses[data-crs="course"] .crs-mi-panel { display: flex; justify-content: flex-start; gap: 10px; width: auto; max-width: 100%; min-height: 44px; margin: 8px 0 0; padding: 0 16px;
  border: 0; border-radius: 10px; background: var(--la-tint); color: var(--la-ink); }
#v-courses[data-crs="course"] .crs-mi-panel:hover { background: var(--la-line); }
#v-courses[data-crs="course"] .crs-mi-panel .crs-mi-ic { display: block; width: 20px; height: 20px; color: var(--la-ink-2); }
#v-courses[data-crs="course"] .crs-mi-panel .crs-mi-t { flex: 0 1 auto; text-decoration: none; }
#v-courses[data-crs="course"] .crs-mi-panel .crs-mi-go { color: var(--la-ink-2); width: 16px; height: 16px; }
#v-courses[data-crs="course"] button:focus-visible, #v-courses[data-crs="course"] a:focus-visible, #v-courses[data-crs="course"] input:focus-visible,
#v-courses[data-crs="course"] .lc-head:focus-visible { outline: 2px solid var(--la-accent); outline-offset: 2px; }

/* ---------- заголовки разделов: серифный, обычный ---------- */
#v-courses[data-crs="course"] .lc-h, #v-courses[data-crs="course"] .cm-pslots-h, #v-courses[data-crs="course"] .ls-h-sub { margin: 28px 0 8px; color: var(--la-ink); font-family: var(--la-serif);
  font-size: calc(24px * var(--fs, 1)); font-weight: 400; line-height: 1.15; }
#v-courses[data-crs="course"] .lc-hint, #v-courses[data-crs="course"] .lc-empty { color: var(--la-ink-3); font-size: calc(14px * var(--fs, 1)); line-height: 1.4; }

/* ---------- кнопки: одна главная (синяя), одна второстепенная (контур) ---------- */
#v-courses[data-crs="course"] .lc-btn, #v-courses[data-crs="course"] .ls-btn, #v-courses[data-crs="course"] .bk-btn {
  min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: calc(15px * var(--fs, 1)); font-weight: 500; line-height: 1.2; white-space: nowrap; box-shadow: none; }
#v-courses[data-crs="course"] .lc-btn-s { min-height: 40px; padding: 0 12px; font-size: calc(14px * var(--fs, 1)); }
#v-courses[data-crs="course"] .lc-btn-gold, #v-courses[data-crs="course"] .ls-btn-gold, #v-courses[data-crs="course"] .bk-btn-gold {
  border: 1px solid transparent; background: var(--la-accent); color: var(--la-on-accent); }
#v-courses[data-crs="course"] .lc-btn-gold:hover, #v-courses[data-crs="course"] .ls-btn-gold:hover, #v-courses[data-crs="course"] .bk-btn-gold:hover { background: var(--la-accent-hover); }
#v-courses[data-crs="course"] .lc-btn-line, #v-courses[data-crs="course"] .ls-btn-line, #v-courses[data-crs="course"] .bk-btn-line {
  border: 1px solid var(--la-line-strong); background: transparent; color: var(--la-ink); }
#v-courses[data-crs="course"] .lc-btn-line:hover, #v-courses[data-crs="course"] .ls-btn-line:hover, #v-courses[data-crs="course"] .bk-btn-line:hover { background: var(--la-tint); }
#v-courses[data-crs="course"] .lc-btn[disabled] { opacity: .55; }
#v-courses[data-crs="course"] .lc-ic-b { color: var(--la-ink-2); border-radius: 10px; }
#v-courses[data-crs="course"] .lc-ic-b:hover { background: var(--la-tint); }

/* ---------- материалы курса: строки с тонкой линией ---------- */
#v-courses[data-crs="course"] .lc-mat.is-over, #v-courses[data-crs="course"] .lc-card.is-over, #v-courses[data-crs="course"] .lc-ph.is-over { outline: 2px dashed var(--la-accent); outline-offset: 3px; }
#v-courses[data-crs="course"] .lc-rows { gap: 0; }
#v-courses[data-crs="course"] .lc-pl { min-height: 48px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--la-line); border-radius: 0; background: transparent; color: var(--la-accent);
  font-size: calc(16px * var(--fs, 1)); font-weight: 500; }
#v-courses[data-crs="course"] .lc-pl .lc-pl-ic { width: 22px; height: 22px; }
#v-courses[data-crs="course"] .lc-hid { color: var(--la-ink-2); font-weight: 400; }
#v-courses[data-crs="course"] .lc-plw { margin: 0; }
#v-courses[data-crs="course"] .hlrow { gap: 12px; min-height: 52px; padding: 6px 2px; border-bottom: 1px solid var(--la-line); border-radius: 0; background: transparent; color: var(--la-ink); }
#v-courses[data-crs="course"] .hlrow-name { font-size: calc(16px * var(--fs, 1)); font-weight: 400; }
#v-courses[data-crs="course"] .hlrow-meta { color: var(--la-ink-2); font-size: calc(11.5px * var(--fs, 1)); }
#v-courses[data-crs="course"] .hlrow-ic { color: var(--la-ink-2); }
#v-courses[data-crs="course"] .hlrow-circle { background: var(--la-tint); color: var(--la-ink); }
#v-courses[data-crs="course"] .hlrow-ok { background: var(--la-tint); color: var(--la-ink); }
#v-courses[data-crs="course"] .hlrow-err { background: transparent; color: var(--la-danger); box-shadow: 0 0 0 1px var(--la-danger); }
#v-courses[data-crs="course"] .hlrow-busy { background: transparent; }
#v-courses[data-crs="course"] .hlrow-track { stroke: var(--la-line); }
#v-courses[data-crs="course"] .hlrow-prog { stroke: var(--la-accent); }
#v-courses[data-crs="course"] .hlrow-stop { fill: var(--la-ink); }
#v-courses[data-crs="course"] .hlrow-hid { box-shadow: none; }
/* Загрузка в ходе — одна тонкая строка, а не плитка: имя, «45% · 215 МБ», маленький круг-стоп. */
#v-courses[data-crs="course"] .lc-ups { gap: 0; }
#v-courses[data-crs="course"] .lc-ups .hlrow { min-height: 44px; padding: 2px 2px; }
#v-courses[data-crs="course"] .lc-ups .hlrow-circle { width: 32px; height: 32px; }
#v-courses[data-crs="course"] .lc-ups .hlrow-ring { width: 32px; height: 32px; }
#v-courses[data-crs="course"] .lc-ups .hlrow-name { font-size: calc(14px * var(--fs, 1)); }
#v-courses[data-crs="course"] .lc-ups .hlrow-meta { font-size: calc(13px * var(--fs, 1)); }
#v-courses[data-crs="course"] .lc-upline { color: var(--la-accent); font-size: calc(14px * var(--fs, 1)); font-weight: 400; }

/* ---------- карточки уроков ---------- */
#v-courses[data-crs="course"] .lc-list { gap: 12px; }
#v-courses[data-crs="course"] .lc-card { border: 1px solid var(--la-line); border-radius: 12px; background: var(--la-card); }
#v-courses[data-crs="course"] .lc-card.is-open { border-color: var(--la-line-strong); }
#v-courses[data-crs="course"] .lc-head { gap: 12px; min-height: 0; padding: 16px; align-items: flex-start; }
/* Обложка урока — прямоугольник 16:9, как в YouTube; нет картинки — тот же прямоугольник с номером. */
#v-courses[data-crs="course"] .lc-lead { width: 96px; height: 54px; border: 0; border-radius: 8px; background: var(--la-tint); }
#v-courses[data-crs="course"] .lc-lead.has-img { background: var(--la-tint); }
#v-courses[data-crs="course"] .lc-numc { color: var(--la-ink-2); font-family: var(--la-serif); font-size: calc(26px * var(--fs, 1)); font-weight: 400; line-height: 1; }
#v-courses[data-crs="course"] .lc-lead.has-img .lc-numc { right: 4px; bottom: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--la-paper);
  color: var(--la-ink); font-size: calc(13px * var(--fs, 1)); }
html[dir="rtl"] #v-courses[data-crs="course"] .lc-lead.has-img .lc-numc, #v-courses[data-crs="course"] [dir="rtl"] .lc-lead.has-img .lc-numc { right: auto; left: 4px; }
#v-courses[data-crs="course"] .lc-main { gap: 4px; }
#v-courses[data-crs="course"] .lc-name { color: var(--la-ink); font-family: var(--la-serif); font-size: calc(20px * var(--fs, 1)); font-weight: 500; line-height: 1.25; }
#v-courses[data-crs="course"] .lc-sub { gap: 2px 12px; color: var(--la-ink-2); font-size: calc(14px * var(--fs, 1)); line-height: 1.4; }
#v-courses[data-crs="course"] .lc-page { color: var(--la-ink-2); font-weight: 400; }
#v-courses[data-crs="course"] .lc-go { color: var(--la-ink-2); margin-top: 2px; }
/* Состояние: значок + слово, без заливки и пунктира (глаз — открыт, перечёркнутый глаз — скрыт). */
#v-courses[data-crs="course"] .lc-pill { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--la-ink); font-size: calc(14px * var(--fs, 1)); font-weight: 400; }
#v-courses[data-crs="course"] .lc-pill-hid { color: var(--la-ink-2); }
/* Чипы материалов (чего нет — бледно, без подложки). */
#v-courses[data-crs="course"] .lc-chips { gap: 8px; padding: 0 16px 12px; }
#v-courses[data-crs="course"] .lc-chip { min-height: 32px; padding: 0 12px; border-radius: 8px; background: var(--la-tint); color: var(--la-ink); font-size: calc(14px * var(--fs, 1)); font-weight: 400; }
#v-courses[data-crs="course"] .lc-chip-off { border: 0; background: transparent; color: var(--la-ink-3); }
#v-courses[data-crs="course"] .lc-miss { margin: 0 16px 14px; color: var(--la-ink-3); font-size: calc(14px * var(--fs, 1)); font-weight: 400; }
#v-courses[data-crs="course"] .lc-miss-ok { color: var(--la-ink-2); }
#v-courses[data-crs="course"] .lc-body { gap: 16px; padding: 14px 16px 16px; border-top: 1px solid var(--la-line); }
#v-courses[data-crs="course"] .lc-sec { gap: 8px; }
#v-courses[data-crs="course"] .lc-sech h5 { margin: 0; color: var(--la-ink-2); font-size: calc(14px * var(--fs, 1)); font-weight: 500; }
#v-courses[data-crs="course"] .lc-ph { padding: 10px 0 0; border: 0; border-top: 1px solid var(--la-line); border-radius: 0; color: var(--la-ink-3); font-size: calc(14px * var(--fs, 1)); }
#v-courses[data-crs="course"] .lc-msg { color: var(--la-ink-2); font-size: calc(14px * var(--fs, 1)); font-weight: 400; }
#v-courses[data-crs="course"] .lc-inline { padding: 12px 0; border: 0; border-top: 1px solid var(--la-line-strong); border-bottom: 1px solid var(--la-line-strong); border-radius: 0; background: transparent; }
#v-courses[data-crs="course"] .lc-field { color: var(--la-ink-2); font-size: calc(14px * var(--fs, 1)); }
#v-courses[data-crs="course"] .lc-field input { min-height: 44px; border: 1px solid var(--la-line-strong); border-radius: 10px; background: transparent; color: var(--la-ink); }
#v-courses[data-crs="course"] .lc-pale input { border-style: solid; border-color: var(--la-line); }
#v-courses[data-crs="course"] .lc-emptybox { border: 1px solid var(--la-line); border-radius: 12px; color: var(--la-ink-2); }
#v-courses[data-crs="course"] .lc-emptybox b { font-family: var(--la-serif); font-weight: 400; color: var(--la-ink); }
#v-courses[data-crs="course"] .lc-skbar { border-radius: 12px; background: var(--la-card); }
#v-courses[data-crs="course"] .lc-dupname { color: var(--la-ink-2); }

/* «Дочитали до стр.» и «Добавить конспект» (рисует lesson-start) — без собственной рамки */
#v-courses[data-crs="course"] .ls-markstate, #v-courses[data-crs="course"] .ls-done, #v-courses[data-crs="course"] .ls-host { color: var(--la-ink-2); font-size: calc(14px * var(--fs, 1)); font-weight: 400; }
#v-courses[data-crs="course"] .ls-lesson, #v-courses[data-crs="course"] .ls-form { border: 0; border-top: 1px solid var(--la-line); border-radius: 0; background: transparent; padding-inline: 0; }
#v-courses[data-crs="course"] .ls-pill, #v-courses[data-crs="course"] .ls-past-h, #v-courses[data-crs="course"] .ls-bin-h2 {
  color: var(--la-ink-2); font-size: calc(14px * var(--fs, 1)); font-weight: 500; }
#v-courses[data-crs="course"] .ls-bin { border: 1px solid var(--la-line-strong); border-radius: 12px; background: transparent; }
#v-courses[data-crs="course"] .ls-bin.is-over { background: var(--la-tint); }
#v-courses[data-crs="course"] .ls-pg::-webkit-progress-value { background: var(--la-accent); }
#v-courses[data-crs="course"] .ls-pg::-moz-progress-bar { background: var(--la-accent); }

/* ---------- «Смотреть подряд» и «Слушать подкастом» ---------- */
#v-courses[data-crs="course"] .pl-panel { border: 1px solid var(--la-line); border-radius: 12px; background: var(--la-card); }
#v-courses[data-crs="course"] .pl-btn[aria-pressed="true"] { background: var(--la-tint); }
#v-courses[data-crs="course"] .pl-title { font-family: var(--la-serif); font-weight: 500; }
#v-courses[data-crs="course"] .pl-count, #v-courses[data-crs="course"] .pl-n, #v-courses[data-crs="course"] .pl-now { color: var(--la-ink-2); font-weight: 400; }
#v-courses[data-crs="course"] .pl-item[aria-current="true"] { background: var(--la-tint); color: var(--la-ink); }
#v-courses[data-crs="course"] .pl-nav, #v-courses[data-crs="course"] .pl-head .lc-ic-b { border: 1px solid var(--la-line-strong); color: var(--la-ink); background: transparent; }

/* ---------- компьютер: обложка крупнее, колонка по опоре ширины ---------- */
@media (min-width: 720px) {
  #v-courses[data-crs="course"] .lc-lead { width: 128px; height: 72px; }
  #v-courses[data-crs="course"] .lc-numc { font-size: calc(30px * var(--fs, 1)); }
  #v-courses[data-crs="course"] .lc-head { padding: 16px 20px; gap: 16px; }
  #v-courses[data-crs="course"] .lc-chips { padding: 0 20px 14px; }
  #v-courses[data-crs="course"] .lc-miss { margin-inline: 20px; }
  #v-courses[data-crs="course"] .lc-body { padding-inline: 20px; }
}
@media (max-width: 359px) {
  #v-courses[data-crs="course"] .lc-lead { width: 80px; height: 45px; }
  #v-courses[data-crs="course"] .lc-head { padding: 12px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #v-courses[data-crs="course"] .lc-btn, #v-courses[data-crs="course"] .crs-mi { transition: none; }
}