/* Экран видеоуроков. Цвета — общие для кабинета: /assets/design/tokens.css.
   Раньше здесь стоял свой :root с синим #2f6bff, хотя комментарий утверждал,
   что «переменные и тон те же, что на странице задач» — совпадал один --muted.
   Ребёнок ходит между разделами и не должен чувствовать смену сайта. */

main { max-width: var(--w-app); margin: 0 auto; padding: 24px 5% 64px; }
/* Каталог — широкая витрина: шапка, навигация и карточки держат одну ось. */
body[data-screen="scr-list"] main { max-width: var(--w-wide); }
/* Урок — экран с роликом и разговором вокруг него: ему нужна вся ширина. */
body[data-screen="scr-player"] main { max-width: var(--w-wide); }

/* Скрытие через атрибут hidden — единственный способ спрятать блок в этом
   скрипте, но любой класс с display перебивает его по специфичности. Так
   «Урок досмотрен» висел под непросмотренным уроком, варианты ответа — под
   шахматной линией, а виджет ритма — без данных. */
[hidden] { display: none !important; }

.screen { display: none; }
.screen.on { display: block; }

.page-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.page-sub { color: var(--muted); margin-top: 6px; }
.empty { color: var(--muted); padding: 24px 0; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
}
.gate { text-align: center; padding: 48px 24px; }
.pawn { font-size: 2rem; display: block; margin-bottom: 8px; }

.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  border-radius: 9px; padding: 9px 16px;
}
.btn:hover { filter: brightness(1.05); }
.btn:disabled { background: #e9eaee; color: var(--muted); border-color: var(--border); cursor: default; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.ghost:hover { background: rgba(47,107,255,0.07); }

.chip {
  font: inherit; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; margin: 4px;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }

.skeleton { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.skeleton i {
  width: 56px; height: 8px; border-radius: 4px; background: #eceef2;
  animation: pulse 1.2s ease-in-out infinite;
}
.skeleton i:nth-child(2) { animation-delay: .15s; }
.skeleton i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

/* ─── библиотека и плейлисты */

.library-head {
  position: relative; overflow: hidden; display: flex; justify-content: space-between;
  gap: 24px; padding: 26px 28px; color: #fff; border-radius: 18px;
  /* градиент вёл в прежний синий раздела; теперь — в фирменный фиолетовый */
  background: linear-gradient(120deg, #1b1a3d 0%, #2f2c73 58%, var(--brand) 140%);
  box-shadow: 0 16px 38px rgba(20,33,61,.16);
}
.library-head .page-sub { max-width: 660px; color: rgba(255,255,255,.74); }
.library-kicker { margin-bottom: 5px; color: #9dc1ff; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.library-mark { align-self: center; font-family: Georgia, serif; font-size: 4.6rem; line-height: 1; color: rgba(255,255,255,.12); transform: rotate(-8deg); }

.playlist-nav { display: grid; gap: 22px; margin-top: 18px; }
.playlist-section { min-width: 0; }
.playlist-section.general {
  padding: 17px; background: #fff8eb; border: 1px solid #f0d6a5; border-radius: 16px;
}
.playlist-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 0 2px 10px;
}
.playlist-section-head strong { font-size: .92rem; }
.playlist-section-head span { color: var(--muted); font-size: .74rem; text-align: right; }
.playlist-section.general .playlist-section-head strong { color: #85570f; }
.playlist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.playlist-tab {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.playlist-tab:hover { border-color: #b8c9f7; transform: translateY(-1px); }
.playlist-tab.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(47,107,255,.1); }
.playlist-mark {
  flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 42px;
  color: #fff; background: #14213d; border-radius: 9px; font-family: Georgia, serif;
  font-size: 1rem; font-weight: 700;
}
.playlist-tab.active .playlist-mark { background: var(--brand); }
.playlist-section.general .playlist-mark { background: #85570f; }
.playlist-section.general .playlist-tab.active .playlist-mark { background: var(--brand); }
.playlist-tab strong, .playlist-tab small { display: block; }
.playlist-tab strong { overflow: hidden; font-size: .83rem; line-height: 1.25; }
.playlist-tab small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.playlist-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 28px 0 12px; }
.playlist-heading span { color: var(--brand); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.playlist-heading h2 { margin-top: 2px; font-size: 1.28rem; line-height: 1.25; }
.playlist-heading p { max-width: 510px; color: var(--muted); font-size: .82rem; text-align: right; }

/* ─── лига видеотеки

   Не ещё одна белая карточка, а маленькое кинотабло: тёмный экран, тёплая
   сигнальная полоса и «перфорация» сверху. При этом структура та же, что у
   рейтинга задач — область, личный результат, общая таблица. */

.lesson-leaderboard {
  position: relative; overflow: hidden; margin-top: 18px; padding: 25px 24px 20px;
  color: #f8f7ff; background: #17162f; border: 1px solid #302f57; border-radius: 17px;
  box-shadow: 0 16px 34px rgba(23,22,47,.14);
}
.lesson-leaderboard::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 7px;
  background: repeating-linear-gradient(90deg, #f2c14e 0 18px, transparent 18px 28px);
  opacity: .9;
}
.leaderboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.leaderboard-kicker {
  margin-bottom: 3px; color: #f2c14e; font-size: .66rem; font-weight: 850;
  letter-spacing: .16em; text-transform: uppercase;
}
.leaderboard-head h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.leaderboard-scope { margin-top: 3px; color: #aba9c7; font-size: .78rem; font-weight: 600; }
.leaderboard-tabs {
  display: inline-flex; flex: 0 0 auto; padding: 3px; background: #222143;
  border: 1px solid #3b3964; border-radius: 10px;
}
.leaderboard-tabs button {
  min-height: 38px; padding: 7px 12px; color: #bdbbd5; background: transparent;
  border: 0; border-radius: 7px; font: inherit; font-size: .77rem; font-weight: 750; cursor: pointer;
}
.leaderboard-tabs button.selected { color: #17162f; background: #f2c14e; }
.leaderboard-mine { display: flex; gap: 10px; margin: 18px 0 12px; }
.leaderboard-mine-item {
  min-width: 105px; padding: 10px 12px; background: rgba(255,255,255,.055);
  border: 1px solid #37355d; border-radius: 11px;
}
.leaderboard-mine-item b, .leaderboard-mine-item span { display: block; }
.leaderboard-mine-item b { color: #f2c14e; font-size: 1.05rem; line-height: 1.15; }
.leaderboard-mine-item span { margin-top: 3px; color: #9d9bb9; font-size: .68rem; font-weight: 650; }
.leaderboard-table-wrap { overflow-x: auto; border: 1px solid #343258; border-radius: 12px; }
.leaderboard-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.leaderboard-table th {
  padding: 9px 12px; color: #8f8dab; background: #1f1e3c; font-size: .65rem;
  font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase;
}
.leaderboard-table td { padding: 11px 12px; border-top: 1px solid #302e51; font-weight: 650; }
.leaderboard-table tr.mine td { color: #fff; background: rgba(242,193,78,.09); }
.leaderboard-place { width: 72px; color: #f2c14e; font-size: 1rem; font-weight: 900 !important; }
.leaderboard-player { min-width: 150px; }
.leaderboard-player small { display: block; color: #f2c14e; font-size: .66rem; font-weight: 800; }
.leaderboard-progress { display: grid; grid-template-columns: minmax(90px,1fr) 42px; align-items: center; gap: 9px; min-width: 160px; }
.leaderboard-progress > i { height: 6px; overflow: hidden; background: #2d2b4d; border-radius: 999px; }
.leaderboard-progress > i > b { display: block; height: 100%; background: #70d6a3; border-radius: inherit; }
.leaderboard-progress span { color: #a8a6c1; font-size: .74rem; text-align: right; }
.leaderboard-goal { margin-top: 11px; color: #d8d7e5; font-size: .78rem; font-weight: 650; }
.leaderboard-goal::before { content: "▶"; margin-right: 7px; color: #f2c14e; font-size: .65rem; }
.leaderboard-empty { padding: 20px !important; color: #aaa8c0; text-align: center; }
.leaderboard-empty span, .leaderboard-empty .btn { display: block; margin: 0 auto; }
.leaderboard-empty .btn { margin-top: 9px; color: #f2c14e; border-color: #5a5678; }

/* ─── список уроков */

.lesson-list { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 860px) { .lesson-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .lesson-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lesson-card {
  min-width: 0; display: flex; gap: 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px;
}
/* Досмотренный урок — состояние карточки, а не ещё одна конкурирующая кнопка. */
.lesson-card.watched {
  border-color: rgba(54,178,107,.45);
  background: linear-gradient(135deg, rgba(233,249,239,.7), var(--card) 45%);
}
.lesson-card.watched .bar i { background: var(--ok); }
.lesson-card .poster {
  position: relative; flex: 0 0 108px; height: 72px; border-radius: 9px; overflow: hidden;
  background: #eef1f7; display: flex; align-items: center; justify-content: center;
}
.lesson-card .poster img { width: 100%; height: 100%; object-fit: cover; }
.watched-mark {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center;
  width: 24px; height: 24px; color: #fff; background: var(--ok);
  border: 2px solid #fff; border-radius: 50%; font-size: .72rem; font-weight: 800;
  box-shadow: 0 2px 8px rgba(21,96,54,.24);
}
.lesson-body { flex: 1; min-width: 0; }
.lesson-body h3 { font-size: 0.98rem; font-weight: 700; line-height: 1.35; }
.lesson-body .meta { color: var(--muted); font-size: 0.8rem; margin: 4px 0 8px; }
.lesson-body .voice { color: #254fbd; font-weight: 700; }
.lesson-body .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.lesson-body .row.action-only { justify-content: flex-end; }
.lesson-card.watched .lesson-action {
  color: var(--text); background: rgba(255,255,255,.76); border-color: var(--border);
}
.lesson-card.watched .lesson-action:hover { color: var(--brand); border-color: var(--brand); }

.bar { height: 6px; border-radius: 3px; background: #eceef2; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); transition: width .3s ease; }

.badge {
  font-size: 0.72rem; font-weight: 700; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.badge.ready { color: var(--brand); border-color: var(--brand); }
.badge.done { color: var(--ok); border-color: var(--ok); }
.badge.test { color: #5b4b17; border-color: #d8c77f; background: #fff9dc; }
.badge.test.ready { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

@media (max-width: 760px) {
  .playlist-grid { grid-template-columns: 1fr; }
  .playlist-section.general { padding: 13px; }
  .playlist-section-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .playlist-section-head span { text-align: left; }
  .playlist-tab { min-height: 64px; }
  .playlist-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .playlist-heading p { text-align: left; }
}
@media (max-width: 480px) {
  .library-head { padding: 22px 20px; }
  .library-mark { display: none; }
}

/* ─── плеер */

.player-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.player-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.player-col { min-width: 0; }
.player-side { min-width: 0; }
@media (min-width: 860px) {
  .player-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .player-side .watch-status { margin-top: 0; }
  /* в узкой колонке процент и кнопка теста не встают в одну строку */
  .player-side .watch-status .row { flex-direction: column; align-items: stretch; gap: 8px; }
  .player-side .watch-status .row .btn { width: 100%; }
  .player-side .rate-row { flex-wrap: wrap; }
}
video {
  width: 100%; max-height: 62vh; background: #000;
  border-radius: 12px; display: block;
}
@media (min-width: 860px) { video { max-height: 70vh; } }
.watch-status { margin-top: 12px; }
.watch-status .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.watch-text { color: var(--muted); font-size: 0.85rem; }
/* Досмотренный урок отмечаем цветом и здесь, и в полосе: это та самая видимая
   перемена, ради которой ребёнок доводит урок до конца. */
.watch-status.watched .watch-text { color: var(--ok); font-weight: 700; }
.watch-status.watched .bar i { background: var(--ok); }
.skip-note {
  color: var(--warn); font-size: 0.85rem; margin-top: 10px;
  padding: 8px 12px; border: 1px solid var(--warn); border-radius: 9px;
  background: #fffbeb;
}

/* ─── тест */

.question { border-top: 1px solid var(--border); padding: 18px 0; }
.question:first-child { border-top: none; }
.question h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
  margin-bottom: 8px; cursor: pointer;
}
.option:hover { border-color: var(--brand); }
.option input { margin-top: 4px; }
.board-holder { max-width: 340px; margin: 8px 0; }
.hint { color: var(--muted); font-size: 0.82rem; }
.move-input {
  font: inherit; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 9px; width: 160px; margin-top: 6px;
}
.move-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

.quiz-actions, .err-actions, .result-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;
}

/* ─── разбор */

.miss {
  border: 1px solid var(--border); border-radius: 11px;
  padding: 14px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.miss p { margin: 0; flex: 1; min-width: 220px; }

/* ─── панель составления заданий: живёт под роликом, видна только автору */

.author-panel {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
}
.author-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.author-grid { display: grid; gap: 18px; margin-top: 16px; }
@media (min-width: 860px) { .author-grid { grid-template-columns: 360px 1fr; } }
.author-side { display: flex; flex-direction: column; gap: 14px; }
.author-field { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.author-field input[type="text"], .author-field textarea {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400;
  color: var(--text); padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
}
.author-field textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.author-field input:focus, .author-field textarea:focus {
  outline: 2px solid rgba(47,107,255,.24); border-color: var(--brand);
}
.required { margin-left: 5px; color: #9b4b2f; font-size: .72rem; font-weight: 500; }
.author-sides { display: flex; gap: 16px; margin-top: 6px; font-weight: 400; color: var(--text); }
.author-sides label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.task-type-picker {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px;
}
.task-type {
  display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto;
  column-gap: 11px; text-align: left; padding: 13px 14px; color: var(--text);
  border: 1px solid var(--border); border-radius: 13px; background: #fff; cursor: pointer;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.task-type > span {
  grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: #f1eee4; color: #233a2a; font: 700 1.25rem Georgia, serif;
}
.task-type b { font-size: .93rem; }
.task-type small { color: var(--muted); margin-top: 2px; }
.task-type:hover { transform: translateY(-1px); border-color: #9aac9c; }
.task-type.selected { border-color: #294e35; box-shadow: 0 0 0 2px rgba(41,78,53,.13); }
.task-type.selected > span { background: #294e35; color: #fff; }
.task-common {
  display: grid; grid-template-columns: minmax(220px, .75fr) minmax(280px, 1.25fr); gap: 12px 16px;
  padding: 16px; border: 1px solid #ded9ca; border-radius: 14px; background: #fbfaf5;
}
.time-anchor {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; color: var(--muted); font-size: .82rem; border-top: 1px dashed #d9d3c3; padding-top: 10px;
}
.author-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.btn.publish { background: #294e35; border-color: #294e35; color: #fff; }

/* Запись партии, а не столбик ходов: номер, ход белых и чёрных в одной строке,
   варианты — с отбивкой слева. В самой строке только ходы: рамка при наведении
   у кнопки уже заложена прозрачной, поэтому ширина не меняется. */
.move-tree {
  margin-top: 8px; max-height: 260px; overflow-y: auto; font-variant-numeric: tabular-nums;
}
.move-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 2px; padding: 2px 0; }
/* Вариант — рамка, а не отступ: всё, что относится к ветке, включая её
   продолжение после вложенных вариантов, лежит внутри этой рамки. */
.move-line.variation {
  margin: 5px 0 5px 12px; padding: 2px 0 2px 10px;
  border-left: 2px solid var(--border); font-size: 0.95em; color: var(--muted);
}
.move-alt-of { font-size: 0.75rem; color: var(--muted); opacity: 0.85; }
.move-no { color: var(--muted); font-size: 0.85rem; padding-left: 5px; }
.move-no:first-child { padding-left: 0; }
.move-link {
  font: inherit; font-weight: 600; color: inherit; background: transparent;
  border: 1px solid transparent; border-radius: 7px; padding: 2px 6px; cursor: pointer;
}
.move-link:hover { border-color: var(--border); }
.move-link.sel { background: rgba(47,107,255,0.1); color: var(--brand); }
.move-comment {
  color: #72502d; font: italic .88rem Georgia, serif; padding: 1px 4px; line-height: 1.45;
}
.move-comment.before { margin-left: 3px; }
.move-nag { color: #9b4b2f; font-weight: 800; margin-left: -2px; }
/* Кнопка ветки живёт рядом с ходом, но место под неё занято всегда: иначе
   запись дёргалась бы под курсором, появляясь и исчезая из потока. */
.move-slot { display: inline-flex; align-items: center; }
.move-branch {
  font: inherit; font-size: 0.9em; line-height: 1; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 2px 4px; margin-left: 1px; cursor: pointer;
  opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.move-slot:hover .move-branch,
.move-slot.sel .move-branch,
.move-branch:focus-visible { opacity: 1; }
.move-branch:hover { color: var(--brand); border-color: var(--border); }
.keys-hint { margin-top: 4px; font-size: 0.76rem; color: var(--muted); }
/* Действия над выделенным ходом — под списком. Кнопки внутри строки меняли бы
   её ширину при наведении, и запись дёргалась бы под курсором.
   Панель липнет к низу записи: на телефоне она иначе уходит под экран, и до
   неё приходится скроллить после каждого выбора хода. */
.move-actions {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; padding: 8px 0 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%);
}
.btn.small, .btn.ghost.small { font-size: 0.82rem; font-weight: 600; padding: 5px 11px; }
.branch-hint { margin-top: 8px; font-size: 0.82rem; }
/* Режим «ставим вариант» должен читаться с одного взгляда: пока он включён,
   любой сыгранный ход уйдёт в ветку, а не в основную линию. */
.branch-state {
  flex: 1 1 100%; font-size: 0.82rem; font-weight: 700; color: var(--brand);
}

.annotation-card {
  padding: 13px; border: 1px solid #d7c9ae; border-radius: 12px;
  background: linear-gradient(145deg, #fffdf7, #f7f2e7); box-shadow: inset 3px 0 #b78345;
}
.annotation-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.annotation-head b { color: #47351f; font-family: Georgia, serif; }
.annotation-head span { color: var(--muted); font-size: .72rem; }
.annotation-card label { display: block; color: var(--muted); font-size: .77rem; margin-top: 8px; }
.annotation-card textarea {
  display: block; width: 100%; min-height: 52px; margin-top: 4px; resize: vertical;
  border: 1px solid #d7c9ae; border-radius: 8px; padding: 8px; font: .88rem/1.4 Georgia, serif;
}
.nag-palette { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.nag-chip {
  min-width: 35px; min-height: 32px; border: 1px solid #d7c9ae; border-radius: 8px;
  background: #fff; color: #633f23; font-weight: 800; cursor: pointer;
}
.nag-chip.selected { color: #fff; background: #8d5e2e; border-color: #8d5e2e; }

.choice-editor { margin-top: 16px; }
.choice-test-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 12px; padding: 13px 15px; border: 1px solid #d8d2c3;
  border-radius: 13px; background: #f7f2e7;
}
.choice-test-head span, .choice-test-head b { display: block; }
.choice-test-head span { color: #355842; font: 700 .72rem/1.2 Georgia, serif;
  letter-spacing: .08em; text-transform: uppercase; }
.choice-test-head b { margin-top: 3px; color: #2d4635; }
.choice-questions { display: grid; gap: 14px; }
.choice-question-card {
  padding: 16px; border: 1px solid #d8d2c3; border-radius: 15px;
  background: linear-gradient(135deg, #fffef9 0%, #f8f5ec 100%);
  box-shadow: inset 4px 0 #8ba58d;
}
.choice-question-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; color: #355842;
}
.choice-question-head > span { display: flex; align-items: center; gap: 4px; }
.choice-question-prompt, .choice-question-explain {
  display: block; width: 100%; resize: vertical; color: var(--text);
  border: 1px solid #d7c9ae; border-radius: 10px; padding: 10px 12px;
  background: #fff; font: inherit; line-height: 1.45;
}
.choice-question-prompt { font-weight: 650; }
.choice-question-explain { margin-top: 10px; color: var(--muted); font-size: .86rem; }
.choice-question-options { margin: 10px 0 8px; }
.choice-option-edit {
  display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: start;
  margin: 8px 0; padding: 10px; border: 1px solid var(--border); border-radius: 11px; background: #fff;
}
.choice-option-edit input[type="radio"] { margin-top: 11px; accent-color: #294e35; }
.choice-option-fields { display: grid; gap: 8px; }
.choice-option-label, .choice-option-hint {
  display: grid; gap: 3px; font-size: .78rem; color: var(--muted);
}
.choice-option-fields input {
  width: 100%; padding: 8px 9px; font: inherit;
  border: 1px solid #cabd9e; border-radius: 8px; background: #fffdf8;
}
.choice-option-fields input:focus { outline: 2px solid #294e35; outline-offset: 1px; }
.choice-option-hint input {
  border-style: dashed; background: transparent; color: var(--muted); font-size: .86rem;
}
.choice-remove { border: 0; background: transparent; color: #9a674d; cursor: pointer; padding: 8px; }
.question-remove { font-size: 1.2rem; }

.setup-panel { margin-top: 16px; padding: 16px; border: 1px solid #cabd9e; border-radius: 15px; background: #f7f2e7; }
.setup-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.setup-title span { font: 700 1.05rem Georgia, serif; color: #3f3524; }
.setup-title small { color: var(--muted); }
.setup-shell { display: grid; grid-template-columns: minmax(250px, 360px) 1fr; gap: 12px 18px; }
.setup-board {
  grid-column: 1; display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1;
  border: 5px solid #5f4b35; border-radius: 4px; overflow: hidden; box-shadow: 0 9px 22px rgba(59,45,29,.18);
}
.setup-square { border: 0; display: grid; place-items: center; padding: 0; font-size: clamp(24px, 5vw, 43px); cursor: pointer; }
.setup-square.light { background: #eee4ca; }
.setup-square.dark { background: #73906d; }
.piece-palette { grid-column: 2; display: grid; grid-template-columns: repeat(6, 42px); gap: 6px; align-content: start; }
.piece-pick { width: 42px; height: 42px; border: 1px solid #c9bea8; border-radius: 9px; background: #fff; font-size: 27px; cursor: pointer; }
.piece-pick.selected { outline: 3px solid rgba(41,78,53,.3); border-color: #294e35; background: #edf3eb; }
.setup-presets, .setup-meta, .setup-shell > .quiz-actions { grid-column: 2; }
.setup-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.setup-meta { display: grid; gap: 10px; color: var(--muted); font-size: .85rem; }
.setup-meta select { margin-left: 7px; font: inherit; }
.setup-meta fieldset { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.setup-meta legend { margin-bottom: 5px; }
.setup-meta fieldset label { color: var(--text); }

.position-prompt { max-width: 760px; color: var(--muted); margin: 3px 0 14px; font-size: 1rem; }
.annotation-feed { display: grid; gap: 7px; }
.annotation-bubble {
  padding: 9px 11px; border-left: 3px solid #b78345; border-radius: 0 9px 9px 0;
  background: #fbf5e9; color: #5b442b; font: .9rem/1.45 Georgia, serif;
}
.choice-solver { display: grid; gap: 9px; }
.choice-answer {
  display: flex; align-items: center; gap: 10px; padding: 12px 13px; text-align: left;
  border: 1px solid var(--border); border-radius: 11px; background: #fff; color: var(--text); cursor: pointer;
}
.choice-answer:hover { border-color: #879d89; transform: translateY(-1px); }
.choice-answer.selected { border-color: #294e35; box-shadow: 0 0 0 2px rgba(41,78,53,.12); }
.choice-answer.correct { border-color: #2d7144; background: #edf7ef; }
.choice-answer.wrong { border-color: #a45e4a; background: #fff1ec; }
.review-tree { max-height: 300px; overflow: auto; padding: 12px; border-radius: 11px; background: #f8f5ec; }
.review-move { padding: 3px 0; font-family: Georgia, serif; }
.review-move.variation { margin-left: 14px; padding-left: 9px; border-left: 2px solid #d3c8b4; }

/* На телефоне запись — основной инструмент, а не подпись под доской:
   крупные цели, больше места и никакой прокрутки внутри маленькой рамки. */
@media (max-width: 859px) {
  .leaderboard-head { align-items: flex-start; flex-direction: column; gap: 11px; }
  .leaderboard-tabs { width: 100%; }
  .leaderboard-tabs button { flex: 1; }
  .leaderboard-mine { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .leaderboard-mine-item { min-width: 0; padding: 9px; }
  .leaderboard-table { table-layout: fixed; }
  .leaderboard-table th, .leaderboard-table td { padding: 9px 7px; }
  .leaderboard-table th:nth-child(1) { width: 48px; }
  .leaderboard-table th:nth-child(2) { width: 33%; }
  .leaderboard-table th:nth-child(3) { width: 28%; }
  .leaderboard-place { width: auto; }
  .leaderboard-player { min-width: 0; }
  .leaderboard-progress { display: block; min-width: 0; }
  .leaderboard-progress > i { display: none; }
  .leaderboard-progress span { display: block; text-align: left; }
  .task-type-picker, .task-common { grid-template-columns: 1fr; }
  .time-anchor { grid-column: 1; align-items: flex-start; flex-direction: column; }
  .setup-shell { grid-template-columns: 1fr; }
  .setup-board, .piece-palette, .setup-presets, .setup-meta, .setup-shell > .quiz-actions { grid-column: 1; }
  .piece-palette { grid-template-columns: repeat(7, minmax(36px, 1fr)); }
  .piece-pick { width: 100%; }
  .move-tree { max-height: none; }
  /* На тач-экране наводить некуда — кнопка ветки видна всегда */
  .move-branch { opacity: 1; padding: 8px 8px; min-height: 40px; }
  .keys-hint { display: none; }
  .move-link { padding: 8px 10px; min-height: 40px; display: inline-flex;
    align-items: center; }
  .move-row { gap: 4px 6px; }
  .move-actions { padding: 10px 0; gap: 10px; }
  .btn.small, .btn.ghost.small { font-size: 0.9rem; padding: 11px 16px; min-height: 44px; }
  .branch-state { flex-basis: 100%; font-size: 0.88rem; }
  .choice-test-head, .choice-question-head { align-items: flex-start; flex-direction: column; }
}

.author-list { list-style: none; margin-top: 8px; font-weight: 400; color: var(--text); }
.author-list li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem;
}
.author-list li:last-child { border-bottom: none; }

/* ─── ставка до просмотра и вывод после

   Урок доводит до конца не просмотр, а сформулированная мысль, поэтому оба
   блока живут рядом с плеером и не перекрывают его: приглашение — полоса под
   полосой прогресса, а не модалка. */

.predict { margin: 0 0 12px; padding: 12px 14px; background: var(--soft); border-radius: 12px; }
.predict-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.predict-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.predict-row input {
  flex: 1 1 220px; font: inherit; color: var(--text); padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 9px;
}
.predict-echo {
  margin: 0 0 12px; padding: 10px 12px; color: var(--muted); font-size: 0.85rem;
  background: var(--soft); border-radius: 10px;
}

.takeaway-invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding: 14px 16px;
  background: var(--soft); border: 1px solid var(--border); border-radius: 12px;
}
.takeaway-invite b { display: block; }

.takeaway-box {
  padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.takeaway-box textarea {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400;
  color: var(--text); padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; resize: vertical;
}
.takeaway-box .quiz-actions { margin-top: 12px; align-items: center; }

.collection { margin-top: 22px; }
.collection h2 { font-size: 1rem; margin-bottom: 10px; }
.collection-item {
  margin: 0 0 10px; padding: 12px 14px; font-size: 0.88rem; line-height: 1.45;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
.collection-item b { color: var(--muted); font-size: 0.78rem; font-weight: 700; }


/* ─── ритм занятий: недельная цель и один следующий шаг */

.rhythm {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 18px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.rhythm-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.rhythm-main b { font-size: 1rem; }
.rhythm .bar { margin: 6px 0 2px; }


/* ─── выбор стартовой позиции задания */

.start-pos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.start-pos details { flex: 1 1 100%; font-size: 0.82rem; color: var(--muted); }
.start-pos summary { cursor: pointer; }
.start-pos input {
  width: 100%; margin: 8px 0; font: inherit; font-size: 0.82rem; color: var(--text);
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
}
.btn.small { padding: 7px 12px; font-size: 0.82rem; }


/* ─── оценка урока и комментарии семьи */

.rate-box {
  margin-top: 14px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
.rate-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rate-title { font-weight: 700; }
.stars { display: inline-flex; gap: 2px; }
.star {
  padding: 0 2px; font-size: 1.35rem; line-height: 1; color: #cbd5e1;
  background: none; border: 0; cursor: pointer;
}
.star.on { color: #f59e0b; }
.star:hover { color: #f59e0b; }
.rate-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rate-row input {
  flex: 1 1 240px; font: inherit; color: var(--text); padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 9px;
}
.rate-list { margin-top: 12px; }
.rate-item {
  margin: 0 0 8px; padding: 10px 12px; font-size: 0.86rem; line-height: 1.45;
  background: var(--soft); border-radius: 10px;
}
.rate-item b { color: var(--muted); font-size: 0.78rem; }

/* ─── заметки по ходу ролика

   Черновик, а не сочинение: поле в одну строку, момент видео пилюлей слева,
   список под ним. Живёт в правой колонке плеера, поэтому ширины своей не
   просит и растёт вниз по мере записи. */

.notes {
  margin-top: 14px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
.notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.notes-title { font-weight: 700; }
/* Место для письма должно быть видно до того, как в него попали: серая плашка
   без границы читалась как подпись под заголовком, и мысль уходила в соседнее
   поле отзыва. Поэтому рамка и белый фон — всегда, а не только в фокусе. */
.notes-compose {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 9px;
  background: var(--white); border: 1px solid var(--border); border-radius: 11px;
}
/* Поле пишущего подсвечивается целиком: рамка вокруг textarea внутри плашки
   выглядела бы вторым вложенным полем. */
.notes-compose:focus-within {
  background: var(--white); border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(84, 81, 231, .15);
}
.notes-compose textarea {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 150px;
  padding: 6px 2px; font: inherit; line-height: 1.4; color: var(--text);
  background: transparent; border: 0; resize: none;
}
.notes-compose textarea::placeholder { color: var(--muted); opacity: 1; }
.notes-compose textarea:focus { outline: none; }
.note-stamp {
  flex: 0 0 auto; padding: 6px 9px; font: inherit; font-size: 0.78rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--brand); background: var(--white);
  border: 1px solid var(--border); border-radius: 8px;
}
button.note-stamp { cursor: pointer; }
button.note-stamp:hover { background: var(--soft); }
.notes-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.notes-hint { flex: 1 1 170px; min-width: 0; line-height: 1.35; }
/* Состояние черновика — служебная строка: она сообщает, где сейчас лежит
   написанное, и не должна спорить за внимание с самой заметкой. */
.note-draft-state { flex: 1 1 100%; min-width: 0; font-size: 0.78rem; opacity: .8; }
.note-draft-state:empty { display: none; }
.notes-empty { margin-top: 10px; color: var(--muted); font-size: 0.85rem; }
.notes-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; list-style: none; }
.note {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px;
  background: var(--white); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-mid); border-radius: 10px;
}
.note-text { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.note-tools { display: flex; flex: 0 0 auto; gap: 2px; }
/* На тач-экране наводить некуда — кнопки заметки видны всегда */
@media (hover: hover) {
  .note-tools { opacity: 0; transition: opacity .12s; }
  .note:hover .note-tools, .note:focus-within .note-tools { opacity: 1; }
}
.note-tool {
  padding: 5px 7px; font: inherit; font-size: 0.85rem; line-height: 1; color: var(--muted);
  background: none; border: 0; border-radius: 7px; cursor: pointer;
}
.note-tool:hover { background: var(--soft); color: var(--brand); }
.note-tool.danger:hover { background: var(--red-light); color: var(--red); }
.note-tool.armed {
  color: var(--red); background: var(--red-light); font-size: 0.75rem; font-weight: 700;
}

/* Свои заметки на экране вывода: вывод пишется из них, а не заново по памяти. */
.takeaway-notes { margin: 0 0 14px; padding: 12px 14px; background: var(--soft); border-radius: 12px; }
.takeaway-notes > b { display: block; margin-bottom: 8px; font-size: 0.9rem; }
.takeaway-notes .notes-list { margin-top: 0; }

@media (max-width: 859px) {
  .note-stamp { padding: 9px 11px; }
  .note-tool { padding: 9px 10px; min-height: 40px; }
}