/* Тема «Комната» — страницы группы «Учебник»: course.html (список уроков и страница урока),
   progress.html, test.html, teacher.html. Подключается после paper.css только на этих страницах.
   Чернильный контур, плоские заливки, бумага на тёплой стене, сплошная тень тушью. */

/* ---------- Общая раскладка ---------- */
/* paper.css задаёт .wrap { padding: 0 20px } и этим обнуляет вертикальные отступы main — возвращаем. */
main.wrap { padding-top: 22px; padding-bottom: 72px; min-height: calc(100vh - 190px); }
main.wrap > h1:first-child { margin-top: 18px; }
.lead { max-width: 62ch; }
.muted { color: var(--muted); }
.field-label { margin: 0 0 6px; }
a.back-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 4px 12px; border-radius: 9px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 700 14px var(--font-ui); text-decoration: none; box-shadow: 0 3px 0 var(--ink); transition: transform .25s var(--spring); }
a.back-link:hover { transform: translateY(-2px); }
.link-btn { color: var(--shu-2); font-weight: 700; }
.test-ok { color: var(--leaf-2); font-weight: 700; }

/* Полоска «прочно / выучено / учится»: толстая трубка тушью, сегменты разделены чертой —
   пустая полоска читается как пустая, а не как линия. */
.stage-bar { display: flex; height: 14px; margin: 4px 0; border: 2px solid var(--ink); border-radius: 8px; background: #fffaf0; overflow: hidden; }
.stage-bar i { display: block; height: 100%; flex: none; border-right: 2px solid var(--ink); }
.stage-bar .mature { background: var(--leaf-2); }
.stage-bar .known { background: var(--leaf); }
.stage-bar .learning { background: var(--n1); }
.legend { gap: 18px; font: 16px var(--font-hand); color: var(--ink-soft); margin: 12px 2px 0; }
.legend span { gap: 7px; }
.legend i { width: 22px; height: 14px; border: 2px solid var(--ink); border-radius: 5px; background: #fffaf0; }

/* Пометки-статусы: маленькие ярлыки тушью */
.pill { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: 0 2px 0 var(--ink); }
.pill.good, .pill.mode-sync { background: var(--leaf); color: var(--ink); }
.pill.mode-behind { background: var(--n2); color: var(--ink); }
.pill.mode-ahead { background: var(--n3); color: var(--ink); }
.pill.mode-start { background: var(--n1); color: var(--ink); }
.pill.mode-catch { background: #ffc98a; color: var(--ink); }

/* ---------- Курс: «Сейчас» + список уроков строками ---------- */
/* «Сейчас» — жёлтый стикер с единственной красной кнопкой страницы */
.cl-now { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; margin: 4px 0 26px; padding: 20px 26px; background: var(--n1);
  border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); transform: rotate(-.3deg); }
.cl-now-text { min-width: 0; }
.cl-now-label { margin: 0; font: 20px/1.1 var(--font-hand); color: var(--ink-soft); }
.cl-now-title { margin: 2px 0 4px; font: 900 clamp(24px, 3vw, 32px)/1.15 var(--font-display); color: var(--ink); }
.cl-now-sub { margin: 0; font: 15px/1.4 var(--font-ui); color: var(--ink-soft); }
.cl-now-go { flex: none; white-space: nowrap; text-decoration: none; }
/* на этой странице красная кнопка — только в «Сейчас»; кнопка доски ведёт туда же — убираем дубль */
#app > .course-board .cb-go { display: none; }
#app > .course-board { margin-bottom: 40px; }

.cl-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.cl-title h2 { margin: 0; font: 700 26px/1.2 var(--font-display); }
.cl-title span { font: 17px var(--font-hand); color: var(--ink-soft); }
/* все уроки — один лист, строки через пунктир */
.cl-list { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.cl-row + .cl-row { border-top: 2px dashed rgba(43, 37, 35, .2); }
.cl-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 48px; align-items: center; gap: 14px; min-height: 66px; padding: 9px 18px; box-sizing: border-box; color: var(--ink); text-decoration: none; }
.cl-head:hover { background: rgba(255, 224, 122, .3); }
.cl-head:focus-visible { outline: 3px solid var(--shu); outline-offset: -4px; }
.cl-num { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 11px; background: var(--paper); font: 700 16px var(--font-display); }
.cl-main { min-width: 0; display: grid; gap: 1px; }
.cl-main b { font: 700 17px/1.25 var(--font-display); }
.cl-grammar { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 13px/1.4 var(--font-ui); color: var(--ink-soft); }
.cl-status { justify-self: end; padding: 0 9px 1px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font: 15px/1.35 var(--font-hand); white-space: nowrap; }
.cl-status.passed { background: var(--leaf); }
.cl-status.now { background: var(--shu); color: #fff8ee; }
.cl-status.ahead { border-color: transparent; color: var(--muted); }
.cl-row.ahead .cl-num { border-style: dashed; background: var(--paper-2); color: var(--ink-soft); }
/* цвет номера — по вашему прогрессу, а не по группе: 0 — бумага, учится — жёлтый, освоен — зелёный */
.cl-row .cl-num.p-mid, .pg-lesson .cl-num.p-mid { background: var(--n1); }
.cl-row .cl-num.p-done, .pg-lesson .cl-num.p-done { background: var(--leaf); }
.cl-row.ahead .cl-main b { color: var(--ink-soft); }
/* кольцо прогресса урока: заливка по кругу, бумажная серединка с числом */
.cl-ring { position: relative; width: 48px; height: 48px; display: flex; align-items: baseline; justify-content: center; padding-top: 14px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50%;
  background: conic-gradient(var(--ring, #dd8a2a) calc(var(--p) * 1%), #e9dfca 0); }
.cl-ring.full { --ring: var(--leaf-2); } /* зелёное кольцо — только у освоенного урока */
.cl-ring::before { content: ''; position: absolute; inset: 5px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.cl-ring b, .cl-ring small { position: relative; color: var(--ink); line-height: 1; }
.cl-ring b { font: 800 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.cl-ring small { font: 700 9px/1 var(--font-ui); }
/* текущий урок группы — раскрыт: полоски и разделы */
.cl-row.open { background: var(--n1); }
.cl-row.open .cl-num { background: var(--shu); color: #fff8ee; }
.cl-row.open .cl-grammar { color: var(--ink); }
.cl-row.open .cl-head:hover { background: rgba(255, 255, 255, .25); }
.cl-detail { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 12px 28px; align-items: center; padding: 2px 18px 16px 70px; }
.cl-bars { display: grid; gap: 4px; }
.cl-bars .cb-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 46px; align-items: center; gap: 8px; }
.cl-bars .stage-bar { height: 12px; margin: 0; }
.cl-bars small { font: 15px/1.2 var(--font-hand); color: var(--ink); white-space: nowrap; }
.cl-bars .cb-n { text-align: right; font-variant-numeric: tabular-nums; }
.cl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: 0 3px 0 var(--ink);
  color: var(--ink); font: 700 14px var(--font-ui); text-decoration: none; transition: transform .25s var(--spring); }
.cl-link:hover { transform: translateY(-2px); color: var(--ink); }

/* ---------- Страница урока ---------- */
/* шапка урока — маленькая школьная доска, как на главной */
.lesson-hero { position: relative; align-items: flex-end; margin: 0 0 22px; padding: 24px 30px 26px; border: 3px solid var(--ink); border-radius: 14px; background: var(--board); color: var(--chalk);
  box-shadow: inset 0 0 0 8px var(--wood), inset 0 0 0 10.5px var(--ink), 0 6px 0 var(--ink); }
.lesson-hero > div:first-child { min-width: 0; padding: 4px 6px; }
.lesson-hero .field-label { color: var(--n1); font: 700 26px/1 var(--font-chalk); margin: 0 0 2px; }
.lesson-hero h1 { color: var(--chalk); font: 700 clamp(40px, 6vw, 64px)/1 var(--font-chalk); margin: 0 0 8px; }
.lesson-hero .muted { color: #c9d6c6; font: 17px/1.45 var(--font-ui); }
.lesson-class { padding: 4px 6px; }
.lesson-hero .btn.ghost { color: var(--chalk); border-color: var(--chalk); }
.lesson-hero .btn.ghost:hover { background: rgba(255, 255, 255, .08); }

/* цели урока — стикер */
/* Урок как страница учебника: части (слова, грамматика…), у каждой — материал и полоска практики в конце */
.lesson-parts { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 22px; padding: 8px 10px;
  background: var(--kraft); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.lesson-parts a { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); font: 700 14px var(--font-ui); white-space: nowrap; }
.lesson-parts a:hover { background: var(--paper); }
.lesson-parts a small { font: 14px var(--font-hand); color: var(--ink-soft); font-weight: 400; }
.lesson-parts a.done small { color: var(--leaf-2); }
.lesson-parts a.on { background: var(--n1); box-shadow: inset 0 0 0 2px var(--ink); }
.lesson-part { scroll-margin-top: 76px; margin: 0 0 34px; }
.part-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 700 40px/1 var(--font-chalk); }
.part-title span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50% 46% 52% 48%; background: var(--ink); color: var(--paper); font: 900 22px var(--font-display); transform: rotate(-4deg); }
.lesson-block.strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 22px; padding: 14px 18px; margin: 0; background: var(--paper-2); border-style: dashed; box-shadow: none; }
.lesson-block.strip.complete { background: #e3f3d8; }
.lesson-block.strip .strip-info { display: grid; gap: 6px; min-width: 0; }
.lesson-block.strip .strip-info p { margin: 0; }
.lesson-block.strip .strip-count { font: 17px var(--font-hand); color: var(--ink-soft); }
.lesson-block.strip .row-actions { margin: 0; }
/* темы грамматики — карточки (схемы появятся здесь) */
.lesson-part .topic-list { list-style: none; counter-reset: t; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; }
.lesson-part .topic-list li { counter-increment: t; display: flex; gap: 10px; align-items: baseline; padding: 12px 14px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.lesson-part .topic-list li::before { content: counter(t); font: 900 16px var(--font-display); color: var(--ink-soft); }
.lesson-part .topic-list li.seen { background: #e3f3d8; }
.lesson-part .topic-list a { color: var(--ink); text-decoration: none; font-weight: 700; }
.lesson-part .poster-slot:empty { display: none; }
.lesson-goals { position: relative; max-width: 720px; margin: 0 0 14px 8px; background: var(--n1); transform: rotate(-.6deg); padding: 22px 24px 18px; }
.lesson-goals::before { content: ''; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: rgba(169, 235, 250, .85); border: 2px solid var(--ink); transform: rotate(-3deg); }
.lesson-goals .field-label { color: var(--ink-soft); font-size: 22px; }
.lesson-goals ul { list-style: none; padding: 0; gap: 6px; font-size: 17px; }
.lesson-goals li { position: relative; padding-left: 30px; }
.lesson-goals li::before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); font: 700 13px/1 var(--font-ui); color: var(--leaf-2); }
.lesson-order { font: 17px/1.35 var(--font-hand); color: var(--ink-soft); margin: 6px 0 18px 4px; }

/* разделы урока — сетка листов в две колонки; нечётный последний растягивается сам */
#app:has(> .lesson-hero) { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: stretch; }
#app:has(> .lesson-hero) > * { flex: 1 1 100%; min-width: 0; }
#app:has(> .lesson-hero) > a.back-link { flex: 0 0 auto; }
#app:has(> .lesson-hero) > a.back-link + * { flex-basis: 100%; }
#app:has(> .lesson-hero) > .lesson-block { flex: 1 1 calc(50% - 8px); display: flex; flex-direction: column; margin-bottom: 16px; }
#app:has(> .lesson-hero) > .lesson-block:has(a[href^="test.html"]) { flex-basis: 100%; }
.lesson-block { padding: 20px 22px 20px; }
.lesson-block h2 { font: 700 23px/1.2 var(--font-display); margin: 0 0 6px; }
.lesson-block-head { margin-bottom: 8px; }
.lesson-block-head .muted { font: 16px var(--font-hand); color: var(--ink-soft); }
.lesson-block .stage-bar { height: 16px; margin: 0 0 12px; }
.lesson-block > p.muted { font-size: 15px; margin: 0; }
.lesson-block .row-actions { margin-top: auto; padding-top: 16px; }
.topic-list { margin: 0; font-size: 16px; gap: 6px; }
.topic-list a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(43, 37, 35, .35); text-underline-offset: 3px; font-weight: 600; }
.topic-list a:hover { color: var(--shu-2); text-decoration-color: currentColor; }
.topic-list li.seen a { color: var(--leaf-2); }
.kj-line { font-size: 30px; color: var(--ink); }
/* итоговый тест — главный лист внизу */
.lesson-block:has(a[href^="test.html"]) { background: var(--paper); border-width: 3px; box-shadow: 0 6px 0 var(--ink); }
.lesson-nav { flex-basis: 100%; margin-top: 8px; }

/* ---------- Прогресс ---------- */
.stats { gap: 16px; margin-bottom: 30px; }
.stats .stat { padding: 16px 18px; }
.stats .stat span { display: block; line-height: 1.2; margin-top: 4px; }
.section-title { margin: 34px 0 14px; }
.section-title h2 { font: 700 26px/1.2 var(--font-display); }
.section-title > .muted { font: 17px var(--font-hand); color: var(--ink-soft); }
.section-title a { font: 18px var(--font-hand); color: var(--shu-2); }
.progress-grid { gap: 18px; align-items: start; }
.progress-grid > .card { padding: 20px 22px; }
.progress-grid h3 { font: 700 20px/1.2 var(--font-display); }
.progress-grid .lesson-block-head .muted { font: 16px var(--font-hand); color: var(--ink-soft); }
.progress-grid .stage-bar { height: 16px; margin: 4px 0 4px; }
.row-chips { gap: 6px; margin-top: 12px; }
.row-chip { min-width: 36px; padding: 3px 7px; border-radius: 8px; font-size: 17px; }
.row-chip:not(.on) { border-style: dashed; color: #786a5c; }
/* «что я путаю» — розовые ярлычки */
.conf-list { display: flex; flex-wrap: wrap; gap: 10px; }
.conf-pair { display: inline-flex; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--n2); box-shadow: 0 3px 0 var(--ink); }
.conf-pair .jp { font-size: 24px; background: var(--paper); border: 2px solid var(--ink); border-radius: 7px; padding: 0 6px; min-width: 38px; }
.conf-pair i { color: var(--ink); font-weight: 700; }
.conf-pair small { margin-left: 4px; color: var(--ink); font: 17px var(--font-hand); }
.weak-list { list-style: none; padding: 0; gap: 0; font-size: 16px; }
.weak-list li { padding: 7px 0; border-bottom: 2px dashed rgba(43, 37, 35, .18); }
.weak-list li:last-child { border-bottom: 0; }
.weak-list .jp { font-size: 18px; font-weight: 600; }
.weak-list small { font: 15px var(--font-hand); }

/* верх: стикеры-счётчики + активность за 4 недели */
.pg-lead { margin: -4px 0 18px; font: 17px var(--font-hand); color: var(--ink-soft); }
.pg-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: stretch; margin-bottom: 8px; }
.pg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pg-stat { display: flex; flex-direction: column; justify-content: center; padding: 16px 18px; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
.pg-stat.s1 { background: var(--n1); transform: rotate(-1deg); } .pg-stat.s2 { background: var(--leaf); } .pg-stat.s3 { background: var(--n3); transform: rotate(.8deg); }
.pg-stat.zero { background: var(--paper-2); } /* ноль — без цветной заливки */
.pg-stat b { font: 900 46px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pg-stat span { margin-top: 4px; font: 18px/1.2 var(--font-hand); color: var(--ink); }
.pg-activity { padding: 14px 18px 12px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
.pg-act-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pg-act-head h2 { margin: 0; font: 700 20px/1.2 var(--font-display); }
.pg-act-head span { font: 16px var(--font-hand); color: var(--ink-soft); }
.pg-cal { display: grid; grid-template-columns: repeat(7, 28px); gap: 5px; justify-content: start; }
.pg-cal small { font: 13px/1 var(--font-hand); color: var(--ink-soft); text-align: center; }
.pg-day { display: block; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 7px; background: #fffaf0; }
.pg-day.l1 { background: #d6ecc9; } .pg-day.l2 { background: var(--leaf); } .pg-day.l3 { background: #5f9d6c; } .pg-day.l4 { background: var(--leaf-2); }
.pg-day.is-today { box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4.5px var(--shu); }
.pg-day.future { border-style: dashed; border-color: rgba(43, 37, 35, .25); background: transparent; }
.pg-act-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 10px 0 0; font: 15px/1.3 var(--font-hand); color: var(--ink-soft); }
.pg-act-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
.pg-act-legend .pg-day { width: 12px; height: 12px; border-width: 1.5px; border-radius: 3px; }
/* до ~1050 px стикеры рядом с календарём сжимались — ставим календарь под ними */
@media (max-width: 1050px) { .pg-top { grid-template-columns: 1fr; } .pg-stat { min-height: 120px; } }
.pg-rows-cap { margin: 12px 0 0; font: 16px/1.2 var(--font-hand); color: var(--ink-soft); }
.pg-rows-cap + .row-chips { margin-top: 6px; }
/* ссылки-стрелки — зона нажатия не меньше 44px */
.section-title a, .pg-test-row a { display: inline-flex; align-items: center; min-height: 44px; }

/* уроки: строка — номер, название, тест, кольцо; раскрытие — полоски по разделам */
.pg-lessons { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.pg-lesson + .pg-lesson, .pg-rest { border-top: 2px dashed rgba(43, 37, 35, .2); }
.pg-lesson summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 48px 18px; align-items: center; gap: 14px; min-height: 60px; padding: 8px 18px; box-sizing: border-box; cursor: pointer; list-style: none; }
.pg-lesson summary::-webkit-details-marker { display: none; }
.pg-lesson summary::after { content: '▾'; font-size: 16px; color: var(--ink-soft); transition: transform .2s; }
.pg-lesson[open] summary::after { transform: rotate(180deg); }
.pg-lesson summary:hover { background: rgba(255, 224, 122, .3); }
.pg-lesson summary:focus-visible { outline: 3px solid var(--shu); outline-offset: -4px; }
.pg-lesson summary > b { font: 700 17px/1.25 var(--font-display); }
.pg-lesson.now .cl-num { background: var(--shu); color: #fff8ee; }
.pg-lesson.ahead .cl-num { border-style: dashed; background: var(--paper-2); color: var(--ink-soft); }
.pg-test { padding: 0 8px 1px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font: 15px/1.35 var(--font-hand); white-space: nowrap; }
.pg-test.ok { background: var(--leaf); }
.pg-bars { display: grid; gap: 5px; max-width: 560px; padding: 2px 18px 16px 70px; }
.pg-bars .cb-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 54px; align-items: center; gap: 8px; }
.pg-bars .stage-bar { height: 12px; margin: 0; }
.pg-bars small { font: 15px/1.2 var(--font-hand); color: var(--ink-soft); white-space: nowrap; }
.pg-bars .cb-n { text-align: right; font-variant-numeric: tabular-nums; }
.pg-test-row { margin-top: 4px; }
.pg-test-row a { justify-self: end; font: 15px var(--font-hand); color: var(--shu-2); white-space: nowrap; }
.pg-rest { margin: 0; padding: 14px 18px; font: 17px var(--font-hand); color: var(--ink-soft); }

/* тесты — ярлычки; пусто — одна строка */
.pg-tests { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-test-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); color: var(--ink); font: 15px var(--font-ui); text-decoration: none; }
.pg-test-chip.ok { background: var(--leaf); }
.pg-test-chip b { font-family: var(--font-display); }
.pg-empty { margin: 0; font: 17px var(--font-hand); color: var(--ink-soft); }
.pg-weak { display: grid; gap: 12px; padding: 16px 20px; }

/* таблица уроков */
.progress-table-card { padding: 10px 16px 12px; }
.progress-table { font-size: 15px; }
.progress-table th { font: 16px var(--font-hand); color: var(--ink-soft); padding: 8px 8px; border-bottom: 2.5px solid var(--ink); }
.progress-table td { padding: 10px 8px; border-top: 0; border-bottom: 2px dashed rgba(43, 37, 35, .18); }
.progress-table tbody tr:last-child td { border-bottom: 0; }
.progress-table td:first-child a { color: var(--ink); font-weight: 700; text-decoration: none; }
.progress-table td:first-child a:hover { color: var(--shu-2); text-decoration: underline; }
.progress-table .stage-bar { height: 13px; margin: 0 0 3px; }
.progress-table small { font-size: 12px; }
.progress-table tr.ahead { opacity: 1; }
.progress-table tr.ahead td:first-child a { color: var(--muted); font-weight: 600; }
.progress-table tr.ahead .stage-bar { border-color: #8c7d70; }
.progress-table a.test-ok { color: var(--leaf-2); text-decoration: none; }
.progress-table tbody tr:hover { background: rgba(255, 224, 122, .28); }

/* ---------- Итоговый тест ---------- */
.test-intro { padding: 28px clamp(20px, 4vw, 40px) 30px; }
.test-intro .field-label { font-size: 22px; }
.test-intro h1 { margin: 2px 0 10px; }
.test-intro .test-lead { margin: 0 0 18px; max-width: 62ch; color: var(--ink-soft); }
.test-parts { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.test-parts li { padding: 4px 12px; border: 2px solid var(--ink); border-radius: 9px; font: 18px var(--font-hand); box-shadow: 0 2px 0 var(--ink); }
.test-parts li:nth-child(5n+1) { background: var(--n1); transform: rotate(-1.5deg); }
.test-parts li:nth-child(5n+2) { background: var(--n2); transform: rotate(1deg); }
.test-parts li:nth-child(5n+3) { background: var(--n3); transform: rotate(-.6deg); }
.test-parts li:nth-child(5n+4) { background: var(--leaf); transform: rotate(1.4deg); }
.test-parts li:nth-child(5n+5) { background: #ffc98a; transform: rotate(-1deg); }
.test-intro > p.muted { font: 17px var(--font-hand); color: var(--ink-soft); margin: 0 0 18px; }
.test-intro .btn.big { margin-top: 4px; }

.test-q .quiz-meta { font: 17px var(--font-hand); color: var(--ink-soft); }
.test-progress { height: 14px; margin: 8px 0 16px; border: 2px solid var(--ink); border-radius: 8px; background: #fffaf0; }
.test-progress i { background: var(--shu); border-right: 2px solid var(--ink); }
.test-progress i[style="width:0%"] { border-right: 0; }

.test-result { padding: 28px clamp(18px, 4vw, 40px) 30px; }
.test-result .done-check { width: 76px; height: 76px; font-size: 38px; margin-bottom: 12px; transform: rotate(-4deg); }
.test-result .done-check.fail { background: var(--n1) !important; color: var(--ink) !important; }
.test-result h2 { font: 900 clamp(32px, 5vw, 44px)/1.1 var(--font-display); margin: 0 0 6px; }
.test-result .test-lead { font-size: 18px; }
.test-secs { gap: 14px; margin: 6px 0 22px; }
.test-secs .stat { min-width: 120px; padding: 12px 16px; text-align: center; }
.test-secs .stat:nth-child(5n+1) { background: var(--n1); transform: rotate(-1deg); }
.test-secs .stat:nth-child(5n+2) { background: var(--n2); transform: rotate(.8deg); }
.test-secs .stat:nth-child(5n+3) { background: var(--n3); transform: rotate(-.5deg); }
.test-secs .stat:nth-child(5n+4) { background: var(--leaf); transform: rotate(1deg); }
.test-secs .stat:nth-child(5n+5) { background: #ffc98a; transform: rotate(-.8deg); }
.test-secs .stat b { font: 900 30px/1 var(--font-display); color: var(--ink); }
.test-secs .stat span { display: block; margin-top: 4px; font: 16px var(--font-hand); color: var(--ink-soft); }
.test-result .field-label { font-size: 21px; }
.test-result ul a { color: var(--shu-2); font-weight: 600; }
.test-mistakes { max-width: 640px; margin: 10px auto 0; text-align: center; }
.test-mistakes summary { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 2.5px dashed var(--ink); border-radius: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.test-mistakes summary::-webkit-details-marker { display: none; }
.test-mistakes summary::after { content: '▾'; transition: transform .2s; }
.test-mistakes[open] summary::after { transform: rotate(180deg); }
.test-mistakes summary:hover { background: rgba(255, 255, 255, .5); }
.test-mistakes ol { text-align: left; display: block; width: 100%; box-sizing: border-box; margin: 14px 0 0; padding: 4px 16px 4px 38px; background: #fffdf7; border: 2px solid var(--ink); border-radius: 12px; }
.test-mistakes li { padding: 10px 0; margin: 0; border-bottom: 2px dashed rgba(43, 37, 35, .18); line-height: 1.6; }
.test-mistakes li:last-child { border-bottom: 0; }
.test-mistakes li > .jp:first-child, .test-mistakes li > span:first-child { font-weight: 700; }

/* ---------- Преподавателю ---------- */
.tc-groups { gap: 12px; padding: 4px 4px 12px; }
.tc-groups .lesson-chip { padding: 10px 14px; border-width: 2.5px; border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.tc-groups .lesson-chip span { font: 15px var(--font-hand); color: var(--ink-soft); }
#report > * + * { margin-top: 20px; }
#report > p.muted { font: 16px var(--font-hand); color: var(--ink-soft); }
.tc-head { padding: 22px 24px; }
.tc-head h2 { margin: 0 0 6px; }
.tc-head > p.muted, .tc-invite > p.muted { font-size: 14px !important; }
.tc-row select { padding: 9px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fffdf7; font-weight: 600; max-width: 460px; }
.tc-invite { margin-top: 16px; padding-top: 14px; border-top: 2px dashed rgba(43, 37, 35, .3); }
.tc-link { padding: 9px 12px; border: 2px dashed var(--ink); border-radius: 10px; background: var(--kraft); color: var(--ink); font-size: 14px; }
.tc-create input { border: 2px solid var(--ink); background: #fffdf7; }
.tc-new summary { font: 700 18px var(--font-display); }
#report .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
#report .stats .stat:nth-child(4) { background: var(--leaf); transform: rotate(-.6deg); }
#report .stats .stat b { font-size: 40px; }
.tc-table th { white-space: nowrap; }
.tc-table td { min-width: 0; }
.tc-table .stage-bar { display: inline-flex; width: 80px; height: 13px; margin: 0 6px 0 0; vertical-align: middle; }
.tc-name b { font-family: var(--font-display); font-size: 16px; }
.tc-tests { font-weight: 700; }
.tc-weak { color: var(--ink-soft); font-size: 13px; }
.tc-weak div + div { margin-top: 2px; }
.tc-x .link-btn { text-decoration: none; font-size: 18px; color: var(--muted); }
.tc-x .link-btn:hover { color: var(--shu-2); }
#report > section.card > h3 { font: 700 20px/1.2 var(--font-display); margin: 0 0 10px; }
#report > section.card > ul { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; }

/* ---------- Телефон ---------- */
@media (max-width: 700px) {
  main.wrap { padding-top: 14px; padding-bottom: 48px; min-height: calc(100vh - 160px); }
  .cl-now { flex-direction: column; align-items: stretch; padding: 16px 16px 18px; margin-bottom: 22px; }
  .cl-now-go { justify-content: center; min-height: 52px; }
  .cl-head { grid-template-columns: 36px minmax(0, 1fr) 48px; grid-template-areas: "num main ring" "num status ring"; gap: 2px 12px; padding: 10px 14px; min-height: 66px; }
  .cl-head .cl-num { grid-area: num; width: 36px; height: 36px; }
  .cl-head .cl-main { grid-area: main; }
  .cl-grammar { display: none; }
  .cl-head .cl-status { grid-area: status; justify-self: start; font-size: 14px; padding: 0 7px; }
  .cl-status.ahead { padding: 0; }
  .cl-head .cl-ring { grid-area: ring; }
  .cl-detail { grid-template-columns: 1fr; padding: 4px 14px 16px; }
  .cl-bars .cb-row { grid-template-columns: 92px minmax(0, 1fr) 42px; }
  .cl-link { min-height: 44px; }

  .lesson-hero { padding: 20px 20px 22px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .lesson-goals { margin-left: 0; margin-right: 0; padding: 20px 18px 16px; }
  .part-title { font-size: 32px; } .part-title span { width: 38px; height: 38px; font-size: 19px; }
  .lesson-parts { margin-left: -4px; margin-right: -4px; }
  .lesson-block.strip { grid-template-columns: 1fr; }
  #app:has(> .lesson-hero) > .lesson-block { flex-basis: 100%; }
  .lesson-block { padding: 18px 16px; }

  .stats { gap: 10px; }
  .stats .stat { padding: 12px 12px; }
  .stats .stat b { font-size: 34px; }
  .stats .stat span { font-size: 15px; }
  .pg-top { grid-template-columns: 1fr; gap: 16px; }
  .pg-stats { gap: 10px; }
  .pg-stat { padding: 12px 12px; }
  .pg-stat b { font-size: 34px; }
  .pg-stat span { font-size: 16px; }
  .pg-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .pg-cal .pg-day { width: 100%; height: auto; aspect-ratio: 1; }
  .pg-lesson summary { grid-template-columns: 36px minmax(0, 1fr) auto 48px 12px; gap: 10px; padding: 8px 12px 8px 14px; min-height: 62px; }
  .pg-lesson summary > b { font-size: 16px; }
  .pg-bars { padding: 2px 14px 16px; }
  .pg-bars .cb-row { grid-template-columns: 88px minmax(0, 1fr) 50px; }
  .pg-test-chip { min-height: 44px; }
  .legend { gap: 6px 12px; }

  /* таблица уроков → карточки: название сверху, полоски по разделам сеткой */
  .progress-table-card::after { display: none; }
  .progress-table-card:not(:has(.tc-table)) { padding: 4px 14px; }
  .progress-table:not(.tc-table) thead { display: none; }
  .progress-table:not(.tc-table), .progress-table:not(.tc-table) tbody { display: block; }
  .progress-table:not(.tc-table) tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 0; border-bottom: 2px dashed rgba(43, 37, 35, .2); }
  .progress-table:not(.tc-table) tr:last-child { border-bottom: 0; }
  .progress-table:not(.tc-table) td { display: block; min-width: 0; padding: 0; border: 0; }
  .progress-table:not(.tc-table) td:first-child { grid-column: 1 / -1; white-space: normal; font-size: 16px; }
  .progress-table:not(.tc-table) tr { gap: 8px 14px; padding: 10px 0 12px; }
  .progress-table:not(.tc-table) td[data-label] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 4px; }
  .progress-table:not(.tc-table) td[data-label]::before { content: attr(data-label); grid-row: 1; grid-column: 1; font: 14px/1.2 var(--font-hand); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .progress-table:not(.tc-table) td[data-label] > small, .progress-table:not(.tc-table) td[data-label] > a { grid-row: 1; grid-column: 2; font-size: 12px; }
  .progress-table:not(.tc-table) td[data-label] > .stage-bar { grid-row: 2; grid-column: 1 / -1; height: 12px; margin: 2px 0 0; }

  #report .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #report .stats .stat b { font-size: 32px; }
  .tc-head { padding: 18px 16px; }
  .tc-table tr { padding: 14px 2px; border-bottom: 2px dashed rgba(43, 37, 35, .25); }
  .tc-table tbody tr:last-child { border-bottom: 0; }
  .progress-table.tc-table td { padding: 4px 0; border: 0; }
  .tc-table .tc-name { padding-right: 36px; padding-bottom: 6px; }
  .tc-invite .tc-row { flex-direction: column; align-items: stretch; }
  .tc-invite .tc-row .btn { align-self: flex-start; }
  .tc-table td[data-label]::before { font: 15px var(--font-hand); color: var(--ink-soft); }

  .test-intro, .test-result { padding: 22px 16px 24px; }
  .test-secs .stat { min-width: 0; flex: 1 1 calc(50% - 14px); }
  .test-mistakes ol { padding-left: 30px; }
}

/* ---- «Курс»: шапка — школьная доска с путём мелом и Цуки на полочке ---- */
.course-board { position: relative; margin: 6px 0 34px; padding: 26px 32px 30px; color: #ece8dc;
  background: radial-gradient(60% 40% at 30% 20%, rgba(236, 232, 220, .06), transparent 70%), radial-gradient(50% 30% at 75% 70%, rgba(236, 232, 220, .05), transparent 70%), #26392f;
  border: 14px solid #7c4d33; border-radius: 10px; box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px rgba(0, 0, 0, .25), 0 9px 0 3px var(--ink); }
/* полочка для мела внизу рамки */
.course-board::after { content: ''; position: absolute; left: -26px; right: -26px; bottom: -30px; height: 16px; background: #8a583b; border: 3px solid var(--ink); border-radius: 4px; box-shadow: inset 0 -5px 0 #6c422b; }
.cb-sub { margin: 0; font: 20px/1.2 var(--font-hand); color: #b9c4b6; }
.cb-h { margin: 10px 0 8px; font: 700 42px/1 var(--font-chalk); color: #ece8dc; letter-spacing: 0; text-shadow: 0 0 1px rgba(236, 232, 220, .5); }
h2.cb-h { font-size: 36px; margin-top: 18px; }
.cb-h em { font-style: normal; color: #ffe58a; }
.cp-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 9px; }
.cb-sep { align-self: center; font: 700 26px var(--font-chalk); color: #b9c4b6; margin: 0 4px; }
.cb-node { display: grid; justify-items: center; gap: 3px; text-decoration: none; color: #ece8dc; }
.cb-node i { width: 42px; height: 42px; display: grid; place-items: center; font: 600 19px var(--font-kana); font-style: normal; border: 2.5px solid rgba(236, 232, 220, .85); border-radius: 50% 46% 52% 48%; transition: transform .25s var(--spring); }
.lessons .cb-node i { font: 700 16px var(--font-display); width: 38px; height: 38px; }
.cb-node span { font: 15px/1 var(--font-hand); color: #b9c4b6; }
.cb-node:hover i { transform: translateY(-3px) rotate(-6deg); }
.cb-node.done i { background: rgba(236, 232, 220, .85); color: #26392f; }
.cb-node.now i { border: 3px solid #ffe58a; color: #ffe58a; transform: scale(1.14) rotate(-4deg); }
.cb-node.now span { color: #ffe58a; }
.cb-node.grp i { position: relative; } /* где группа — пунктирное кольцо поверх соседей (outline обрезался строкой выше) */
.cb-node.grp i::after { content: ''; position: absolute; z-index: 2; inset: -6px; border: 2.5px dashed #8fb6ff; border-radius: 50%; pointer-events: none; }
.cb-node.grp { position: relative; z-index: 2; }
.cb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0; font: 17px var(--font-hand); color: #b9c4b6; }
.cb-legend .lg { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(236, 232, 220, .85); margin-left: 6px; }
.cb-legend .lg.done { background: rgba(236, 232, 220, .85); } .cb-legend .lg.now { border-color: #ffe58a; } .cb-legend .lg.grp { border: 2px dashed #8fb6ff; }
.cb-go { display: inline-flex; margin-top: 18px; padding: 13px 24px; border-radius: 14px; text-decoration: none; font: 700 18px var(--font-display); color: #fff8ee; background: var(--shu); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), inset 0 -5px 0 var(--shu-2); transition: transform .25s var(--spring); }
.cb-go:hover { transform: translateY(-2px); }
.cb-go:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
/* Цуки сидит на полочке доски справа */
.cb-tsuki { position: absolute; right: 8px; bottom: -32px; width: 240px; height: 216px; cursor: pointer; z-index: 2; }
.cb-tsuki svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 760px) {
  .course-board { padding: 22px 18px 26px; border-width: 10px; margin-top: 12px; }
  .course-board::after { left: -20px; right: -20px; }
  .cb-h { font-size: 36px; } h2.cb-h { font-size: 30px; }
  .cb-node i { width: 36px; height: 36px; font-size: 16px; } .lessons .cb-node i { width: 32px; height: 32px; font-size: 14px; }
  /* зона нажатия кружков ~44px: поле вокруг, раскладка та же */
  .course-board .cb-node { padding: 4px; margin: -4px; } .course-board .lessons .cb-node { padding: 6px; margin: -6px; }
  /* на телефоне Цуки выглядывает из-за верхнего края доски */
  .cb-tsuki { right: 4px; top: -150px; bottom: auto; width: 170px; height: 153px; }
}

/* путь мелом прямо на доске сцены (координаты сцены, масштаб камеры) */
.scene.world .chalk-path { display: flex; flex-direction: column; gap: 2px; padding: 16px 22px 18px; color: #ece8dc; }
.scene.world .chalk-path .cb-sub { font-size: 15px; }
.scene.world .chalk-path .cb-h { font-size: 30px; margin: 6px 0 4px; }
.scene.world .chalk-path h2.cb-h { font-size: 27px; margin-top: 8px; }
.scene.world .chalk-path .cp-row { gap: 6px 5px; }
.scene.world .chalk-path .cb-node i { width: 30px; height: 30px; font-size: 14px; border-width: 2px; }
.scene.world .chalk-path .lessons .cb-node i { width: 27px; height: 27px; font-size: 12px; }
.scene.world .chalk-path .cb-node span { font-size: 11px; }
.scene.world .chalk-path .cb-sep { font-size: 20px; }
.scene.world .chalk-path .cb-legend { font-size: 13px; margin-top: 6px; }
.scene.world .chalk-path .cb-legend .lg { width: 11px; height: 11px; }
.scene.world .chalk-path .cb-go { margin-top: auto; align-self: flex-start; padding: 8px 16px; font-size: 14px; border-width: 2.5px; box-shadow: 0 4px 0 var(--ink), inset 0 -3px 0 var(--shu-2); }
/* на телефоне доска с путём — обычным блоком под сценой, без своей кошки (Цуки — в сцене) */
.course-board .chalk-path { display: contents; }
body.mobile .course-board { margin-top: 18px; padding-right: 18px; }

/* ---- «Прогресс»: книги-уроки на полке сцены (координаты сцены) ---- */
.shelf-cub { display: flex; align-items: flex-end; gap: 1px; padding: 0 2px; }
.shelf-cub .bk { flex: 1; min-width: 0; height: 92%; display: grid; place-items: start center; padding-top: 5px; text-decoration: none; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px 3px 1px 1px; background: linear-gradient(to top, var(--c, #d9463e) calc(var(--f) * 100%), #f3ead7 0); transition: transform .25s var(--spring); }
.shelf-cub .bk:nth-child(5n+1) { --c: #d9463e; } .shelf-cub .bk:nth-child(5n+2) { --c: #3f6fb5; } .shelf-cub .bk:nth-child(5n+3) { --c: #e6b34a; } .shelf-cub .bk:nth-child(5n+4) { --c: #5a9a6a; } .shelf-cub .bk:nth-child(5n) { --c: #8c5aa8; }
.shelf-cub .bk:nth-child(3n) { height: 86%; } .shelf-cub .bk:nth-child(4n+1) { height: 96%; }
/* номер прямо на корешке, без рамки — места мало */
.shelf-cub .bk i { font: 800 10px/1.02 var(--font-ui); font-style: normal; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -1px; } /* двузначный номер — столбиком, как на корешке */
.shelf-cub .bk.nb { --c: #8fca7a !important; height: 70%; } .shelf-cub .bk.nb i { font: 600 9px var(--font-kana); }
.shelf-cub .bk:hover { transform: translateY(-6px); }
.shelf-cub .bk.cur { position: relative; } .shelf-cub .bk.cur::after { content: ''; position: absolute; left: 30%; top: -14px; width: 7px; height: 22px; background: var(--shu); border: 1.5px solid var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.board-note { color: #ece8dc; font: 19px/1.2 var(--font-hand); }
.board-note b { font: 700 46px/1 var(--font-chalk); color: #ffe58a; } .board-note small { font-size: 14px; color: #b9c4b6; }
.shelf-cub .bk.cur { padding-top: 12px; } /* номер — под закладкой текущего урока */
.cp-row.lessons { overflow: visible; padding: 0; margin: 0; background: none; border: 0; } /* класс .lessons из style.css (лента уроков с прокруткой) резал кольцо «где группа» */

/* ---------- доски частей урока (assets/lesson-boards.js) ---------- */
/* частицы — свой цвет у каждой, на всех досках одинаковый */
.gf-p { display: inline-block; padding: 0 .28em; margin: 0 .06em; border-radius: 7px; font-weight: 700; font-style: normal; color: var(--ink); background: #e9dcc2; box-shadow: inset 0 0 0 2px rgba(43, 37, 35, .5); }
.p-wa { background: #a9dcf5; } .p-ga { background: #ffb4a8; } .p-wo { background: #b9e4a3; } .p-ni { background: #ffd08a; } .p-he { background: #ffe07a; }
.p-de { background: #d9c8ff; } .p-to { background: #ffc6e1; } .p-no { background: #e9c98f; } .p-mo { background: #9fe6d8; } .p-ka { background: #ffb1cd; }
.p-kara, .p-made { background: #cfe3f2; } .p-ya, .p-yori, .p-ne, .p-yo { background: #f3ead7; }
.gboards { display: grid; gap: 18px; margin: 0 0 16px; }
.gboard { position: relative; padding: 18px 22px 16px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.gboard.seen { background: #f6fbf1; }
.gboard header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gboard h3 { margin: 0; font: 800 20px/1.25 var(--font-display); }
.gb-num { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--ink); font: 900 16px var(--font-display); background: var(--n1); }
.gb-seen { margin-left: auto; font: 15px var(--font-hand); color: var(--leaf-2); }
/* формула: места для слов — пунктирные, частицы — цветные, неизменная часть — плашкой */
.gf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 14px 16px; background: #26392f; border: 10px solid #7c4d33; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.gf > span { font: 600 26px/1.2 'Klee One', serif; }
.gf-slot { padding: 4px 14px; border: 2.5px dashed rgba(236, 232, 220, .8); border-radius: 10px; color: #ece8dc; font-family: var(--font-chalk) !important; }
.gf .gf-p { padding: 4px 12px; border-radius: 999px; box-shadow: none; border: 2.5px solid #ece8dc; }
.gf-fix { padding: 4px 12px; border-radius: 8px; background: #ffe07a; color: var(--ink); border: 2.5px solid #ece8dc; }
/* схема темы (assets/grammar-art/lN.js) — под доской темы */
.gb-art:empty { display: none; }
.gb-art { margin-top: 14px; padding-top: 14px; border-top: 2px dashed rgba(43, 37, 35, .25); }
.gb-art > svg { display: block; width: 100%; height: auto; }
/* сцена темы: герой говорит пример в облачке, рядом рисунки слов; справа — доска с формулой */
.gb-body { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 14px 24px; align-items: start; }
.gb-body.solo { grid-template-columns: 1fr; }
.gb-scene { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; align-items: end; gap: 6px 4px; padding-top: 6px; }
.lb-hero { position: relative; cursor: pointer; }
.lb-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lb-hero .shade, .lb-hero .rim, .lb-hero .hatch, .lb-hero .guide, .lb-hero .say-ja, .lb-hero .say-ru { display: none; }
.gb-who { grid-row: 1 / 3; width: 150px; aspect-ratio: 10 / 9; margin: 0 -30px 0 -16px; align-self: end; }
.gb-scene.lamp .gb-who { align-self: start; margin-top: -26px; }
.gb-bubble { position: relative; grid-column: 2; display: grid; gap: 4px; justify-items: start; padding: 12px 16px; text-align: left; font: inherit; color: var(--ink); background: #fff;
  border: 2.5px solid var(--ink); border-radius: 18px 18px 18px 6px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transform: rotate(-.6deg); }
.gb-bubble::before { content: ''; position: absolute; left: -11px; bottom: 14px; width: 16px; height: 16px; background: #fff; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); }
.gb-bubble .jp { font: 600 22px/1.45 'Klee One', serif; }
.gb-bubble small { font: 16px var(--font-hand); color: var(--ink-soft); }
.gb-bubble:hover { transform: rotate(0) translateY(-2px); }
.gb-pics { grid-column: 2; display: flex; gap: 6px; min-height: 0; }
.gb-pics:empty { display: none; }
.lb-pic { width: 84px; height: 70px; }
.gb-pics.mini { grid-column: auto; } .gb-pics.mini .lb-pic { width: 46px; height: 38px; }
.gb-say { grid-template-columns: minmax(0, 1fr) auto; } .gb-say small { grid-column: 1; } .gb-say .gb-pics.mini { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-right: 6px; }
.gb-rule { margin: 0 0 12px; font: 17px/1.35 var(--font-hand); color: var(--ink-soft); }
.gb-ex { display: grid; gap: 8px; margin-bottom: 8px; }
.gb-say { display: grid; gap: 2px; justify-items: start; padding: 10px 40px 10px 14px; position: relative; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 2px solid rgba(43, 37, 35, .35); border-radius: 12px; cursor: pointer; }
.gb-say::after { content: ''; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; opacity: .45;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2523' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.gb-say:hover { border-color: var(--ink); }
.gb-say .jp { font: 20px/1.4 'Klee One', serif; }
.gb-say small { font: 15px var(--font-hand); color: var(--ink-soft); }
.gboard details { margin: 6px 0 4px; }
.gboard summary { cursor: pointer; font: 700 15px var(--font-ui); color: var(--ink-soft); }
.gb-more p { margin: 8px 0; font-size: 15px; line-height: 1.5; }
.gb-train { display: inline-block; margin-top: 6px; font: 700 15px var(--font-ui); color: var(--shu-2); }

/* диалог урока: облачка слева (первый голос) и справа (второй) */
/* диалог: Цуки и Кицунэ по сторонам, реплики между ними */
.db-stage { display: grid; grid-template-columns: 130px minmax(0, 1fr) 130px; gap: 12px; align-items: end; }
.db-who { position: sticky; bottom: 20px; width: 150px; aspect-ratio: 10 / 9; align-self: end; margin: 0 -14px; }
.dl-line .gb-pics.mini { display: inline-flex; margin-top: 2px; } .dl-line .gb-pics.mini:empty { display: none; }
.dboard { margin: 0 0 16px; padding: 16px 18px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.db-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; }
.db-head p { margin: 0; font: 17px var(--font-hand); color: var(--ink-soft); }
.db-head .row-actions { margin: 0; }
.db-lines { display: grid; gap: 10px; }
.dl-line { position: relative; display: grid; gap: 2px; max-width: 78%; padding: 10px 16px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.dl-line.l { justify-self: start; background: #eef6fb; border-bottom-left-radius: 4px; }
.dl-line.r { justify-self: end; background: #fff5e6; border-bottom-right-radius: 4px; }
.dl-line.on { background: var(--n1); }
.dl-line .jp { font: 20px/1.4 'Klee One', serif; }
.dl-ru { display: none; font: 15px var(--font-hand); color: var(--ink-soft); }
.dboard.show-ru .dl-ru { display: block; }

/* перевод: карточки «скажите сами» — ответ открывается по нажатию */
.pboard { margin: 0 0 16px; }
/* перевод: Банаси висит над карточками */
.pb-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pb-who { flex: none; width: 110px; aspect-ratio: 10 / 9; margin: -24px -10px -10px -6px; }
.pb-top .pb-head { margin: 0; }
.pb-card .gb-pics { grid-column: auto; } .pb-card .lb-pic { width: 64px; height: 54px; }
.pb-head { margin: 0 0 10px; font: 17px var(--font-hand); color: var(--ink-soft); }
.pb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pb-card { display: grid; gap: 6px; align-content: start; min-height: 104px; padding: 12px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px 14px 11px 13px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.pb-card:nth-child(2n) { transform: rotate(.5deg); } .pb-card:nth-child(3n) { transform: rotate(-.4deg); }
.pb-ru { font: 700 16px/1.3 var(--font-ui); }
.pb-ja { display: none; font: 19px/1.4 'Klee One', serif; }
.pb-tap { font: 14px var(--font-hand); color: var(--ink-soft); }
.pb-card.open { background: #fffbe9; } .pb-card.open .pb-ja { display: block; } .pb-card.open .pb-tap { display: none; }
@media (max-width: 760px) {
  .gboard { padding: 14px 14px 12px; }
  .gf { padding: 10px; border-width: 8px; gap: 6px; } .gf > span { font-size: 21px; }
  .dl-line { max-width: 92%; }
  .gb-body { grid-template-columns: 1fr; }
  .gb-scene { grid-template-columns: 96px minmax(0, 1fr); } .gb-who { width: 120px; margin: 0 -22px 0 -12px; }
  .gb-bubble .jp { font-size: 19px; }
  .db-stage { grid-template-columns: 1fr 1fr; } .db-stage .db-lines { grid-column: 1 / -1; grid-row: 2; }
  .db-who { position: relative; width: 120px; margin: 0; } .db-who.r { justify-self: end; }
}

/* тема простыми словами: мысль, пример с разбором по словам, «запомните», шпаргалка */
.gboard.plain h3 { font-size: 22px; }
.gb-idea { margin: 0 0 14px; font: 19px/1.45 var(--font-hand); color: var(--ink); max-width: 70ch; }
.gboard.plain .gb-scene { grid-template-columns: 130px minmax(0, 1fr); max-width: 760px; }
.gb-bubble.gloss { padding: 14px 18px 12px; }
.gl-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 6px; }
.gl { display: inline-grid; justify-items: center; gap: 4px; padding: 6px 10px 5px; border-radius: 10px; background: #f6f1e6; }
.gl b { font: 600 26px/1.15 'Klee One', serif; }
.gl small { font: 15px/1.1 var(--font-hand); color: var(--ink-soft); text-align: center; max-width: 9em; }
.gl.p-wa, .gl.p-ga, .gl.p-wo, .gl.p-ni, .gl.p-he, .gl.p-de, .gl.p-to, .gl.p-no, .gl.p-mo, .gl.p-ka, .gl.p-kara, .gl.p-made { box-shadow: inset 0 0 0 2px rgba(43, 37, 35, .45); }
.gl.p-wa { background: #a9dcf5; } .gl.p-no { background: #e9c98f; } .gl.p-mo { background: #9fe6d8; } .gl.p-ka { background: #ffb1cd; } .gl.p-ga { background: #ffb4a8; }
.gl.p-wo { background: #b9e4a3; } .gl.p-ni { background: #ffd08a; } .gl.p-he { background: #ffe07a; } .gl.p-de { background: #d9c8ff; } .gl.p-to { background: #ffc6e1; }
.gl.fix { background: #fff1b8; box-shadow: inset 0 0 0 2px rgba(43, 37, 35, .3); }
.gl-tr { margin-top: 8px; font: 17px var(--font-hand) !important; color: var(--ink) !important; }
.gb-label { margin: 14px 0 6px; font: 16px var(--font-hand); color: var(--ink-soft); }
.gb-tip { margin: 12px 0 0; padding: 10px 14px; background: #fff7d6; border-left: 5px solid var(--n1); border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.5; }
.gb-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 12px; }
.gb-cheat { font: 15px var(--font-hand); color: var(--ink-soft); } .gb-cheat .jp { font: 600 16px 'Klee One', serif; color: var(--ink); }
.gb-foot details { flex-basis: 100%; order: 3; } .gb-foot .gb-train { margin: 0; }
@media (max-width: 760px) {
  .gb-idea { font-size: 17px; }
  .gboard.plain .gb-scene { grid-template-columns: 1fr; } .gboard.plain .gb-who { grid-row: auto; width: 110px; margin: 0 0 -8px; }
  .gboard.plain .gb-bubble, .gboard.plain .gb-pics { grid-column: 1; }
  .gb-bubble.gloss::before { left: 26px; top: -11px; bottom: auto; border: 0; border-left: 2.5px solid var(--ink); border-top: 2.5px solid var(--ink); }
  .gl b { font-size: 21px; } .gl { padding: 5px 7px 4px; }
  .gb-say { grid-template-columns: minmax(0, 1fr); } .gb-say .gb-pics.mini { grid-column: 1; grid-row: auto; margin: 2px 0 0; }
}

/* раскладка темы: слева мысль и «запомните», справа герой с разбором; ниже схема, примеры в две колонки, низ — шпаргалка и кнопка */
.gboard.plain { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); column-gap: 26px;
  grid-template-areas: "head head" "left scene" "art art" "ex ex" "foot foot"; align-items: start; }
.gboard.plain > header { grid-area: head; }
.gboard.plain > .gb-left { grid-area: left; }
.gboard.plain .gb-idea { margin-bottom: 12px; }
.gboard.plain > .gb-scene { grid-area: scene; margin: 0; grid-template-columns: 104px minmax(0, 1fr); }
.gboard.plain .gb-who { width: 130px; margin: 0 -26px 0 -14px; }
.gboard.plain .gb-tip { margin: 0; }
.gboard.plain > .gb-art { grid-area: art; }
.gboard.plain > .gb-ex { grid-area: ex; margin: 4px 0 0; }
.gboard.plain > .gb-foot { grid-area: foot; }
.gb-ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 10px; }
.gboard.plain .gb-foot { justify-content: space-between; align-items: center; padding-top: 12px; margin-top: 14px; border-top: 2px dashed rgba(43, 37, 35, .2); }
.gboard.plain .gb-foot details { flex-basis: auto; order: 0; }
.gboard.plain .gb-foot .gb-train { margin-left: auto; text-decoration: none; }
.gboard.plain .gb-foot details[open] { flex-basis: 100%; order: 3; }
@media (max-width: 900px) {
  .gboard.plain { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .gboard.plain > * { grid-area: auto !important; }
  .gboard.plain > .gb-left { display: contents; } /* на узком: мысль, разбор, потом «запомните» */
  .gboard.plain .gb-idea { order: 1; } .gboard.plain > .gb-scene { order: 2; } .gboard.plain .gb-tip { order: 3; margin-top: 12px; }
  .gboard.plain > .gb-art { order: 4; } .gboard.plain > .gb-ex { order: 5; } .gboard.plain > .gb-foot { order: 6; }
  .gboard.plain > .gb-scene { grid-template-columns: 1fr; }
  .gb-ex-grid { grid-template-columns: minmax(0, 1fr); }
}

/* страница урока: «← Все уроки» и подменю курса — одной строкой (подменю справа) */
main:has(> #app > .back-link) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
main:has(> #app > .back-link) > #app { display: contents; }
main:has(> #app > .back-link) > .subnav { grid-row: 1; grid-column: 2; justify-self: end; margin: 0; }
main:has(> #app > .back-link) > #app > .back-link { grid-row: 1; grid-column: 1; margin: 0; }
main:has(> #app > .back-link) > #app > :not(.back-link) { grid-column: 1 / -1; }
main:has(> #app > .back-link) > #app > .lesson-hero { margin-top: 18px; }
@media (max-width: 560px) {
  /* на телефоне подменю — во всю ширину сверху, «← Все уроки» — под ним */
  main:has(> #app > .back-link) > .subnav { grid-column: 1 / -1; justify-self: stretch; }
  main:has(> #app > .back-link) > #app > .back-link { grid-row: 2; margin-top: 12px; justify-self: start; }
}

/* длинная страница урока: части и листы плаката за пределами экрана не считаются (стили, раскладка, отрисовка),
   герои в них стоят (их цикл видит, что они не на экране) */
.lesson-part, .poster .sheet { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.gb-art .w b { white-space: normal; } /* в схемах на узком экране слово может перенестись, а не вылезти за кнопку */

/* японские слова в объяснениях не рвём посреди слова (ま/せんでした): перенос — по пробелу, а если слово длиннее строки — где придётся */
.gb-cheat .jp, .gb-tip, .gb-idea { word-break: keep-all; overflow-wrap: anywhere; }
/* цветные частицы и выделенные куски внутри слова-кнопки — строчные: блок (inline-block) даёт браузеру место для переноса (じてんしゃ|で) */
.w b :is(.gf-p, em) { display: inline; }
/* итоговый тест части — после списка уроков */
.cl-final { margin-top: 18px; }
.cl-final h3 { margin: 0 0 2px; font: 700 20px var(--font-display); }
/* вводные темы на пути курса — квадратная «табличка», чтобы отличались от рядов и уроков */
.cb-node.intro i { border-radius: 9px 11px 8px 10px; border-style: dashed; color: #ffe58a; }
.lessons .cb-node.intro i { font: 600 18px var(--font-kana); }
.lesson-print { margin: 0 0 10px 8px; }

/* тренажёр прямо в уроке: полоска раскрывается в окно тренажёра (course.js inlineOpen) и складывается обратно */
.lesson-block.strip.open { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 12px; background: var(--paper); border-style: solid; box-shadow: 0 4px 0 var(--ink); }
.lesson-block.strip.open > :is(.strip-info, .row-actions) { display: none; }
.it-panel { overflow: hidden; transition: height .38s cubic-bezier(.3, 1.15, .5, 1); }
.it-panel.closing { transition-timing-function: ease-in; }
.it-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.it-bar b { margin-right: auto; font: 700 18px var(--font-display); }
.it-frame { display: block; width: 100%; height: 0; border: 0; background: transparent; }
.it-wait { padding: 30px 0; text-align: center; font: 18px var(--font-hand); color: var(--ink-soft); }
.strip-last { margin: 4px 0 0; font: 16px var(--font-hand); color: #2f7d4f; }
@media (prefers-reduced-motion: reduce) { .it-panel { transition: none; } }
.lesson-part .lesson-block.strip { scroll-margin-top: 92px; } /* раскрытый тренажёр — под липкой полоской частей урока */

/* прогресс урока в шапке: одна полоска, отметка порога теста (70%), что двигает урок */
.lesson-meter { margin: 0 0 16px; padding: 14px 18px 12px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
.lm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0 0 8px; }
.lm-head b { font: 700 19px var(--font-display); }
.lm-head span { font: 17px var(--font-hand); color: var(--ink-soft); }
.lesson-meter.open .lm-head span { color: #2f7d4f; font-weight: 700; }
.lm-bar { position: relative; height: 16px; background: #fff8e6; border: 2px solid var(--ink); border-radius: 9px; }
.lm-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px 0 0 7px; background: var(--n1); transition: width .4s; }
.lesson-meter.open .lm-bar i, .lesson-meter.passed .lm-bar i { background: #8fd18a; }
.lm-bar u { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 3px dashed var(--shu); }
.lm-bar u::after { content: 'тест'; position: absolute; top: -20px; left: -14px; font: 700 13px var(--font-hand); color: var(--shu); }
.lm-parts { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.lm-parts a { color: var(--ink); font-weight: 700; }
.lm-parts small { font: 13px var(--font-hand); }
/* подзаголовок внутри части (рэнсю в грамматике, пункты «Ещё практики») */
.part-sub { margin: 22px 0 10px; font: 700 19px var(--font-display); }
.part-sub small { font: 15px var(--font-hand); font-weight: 400; color: var(--ink-soft); }
.part-note { margin: -4px 0 12px; }
/* практика по желанию: свёрнута, полоски без счёта */
.lesson-more > summary { cursor: pointer; padding: 12px 16px; border: 2.5px dashed rgba(43, 37, 35, .45); border-radius: 12px; font: 700 16px var(--font-ui); color: var(--ink-soft); background: var(--paper-2); }
.lesson-more[open] > summary { margin-bottom: 6px; }
.lesson-block.strip.extra { grid-template-columns: minmax(0, 1fr) auto; }
/* липкая полоска частей — под липкой шапкой сайта, а не поверх неё */
.lesson-parts { top: 71px; }
.lesson-part .lesson-block.strip, .lesson-part { scroll-margin-top: 136px; }
@media (max-width: 760px) { .lesson-parts { top: 63px; } .lesson-part .lesson-block.strip, .lesson-part { scroll-margin-top: 124px; } }

.lesson-goals.done li::before { content: '✓'; } /* цели отмечены, когда урок освоен */

/* вопросы к диалогу урока (lesson-boards.js dialogQuiz) */
.dq-quiz { margin-top: 16px; }
.dq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dq-head h3 { margin: 0; font: 22px/1.2 var(--font-hand); }
.dq-score { font: 16px var(--font-hand); color: var(--ink-soft); }
.dq-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 14px; }
.dq-q { margin: 0 0 8px; font-size: 16px; }
.dq-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dq-opt { padding: 7px 14px; border: 2px solid var(--ink); border-radius: 10px; background: #fffdf7; font: 600 15px var(--font-ui); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.dq-opt.jp { font: 600 18px var(--font-kana); }
.dq-opt:hover:not(:disabled) { background: #fff3c4; }
.dq-opt:disabled { cursor: default; box-shadow: none; transform: translateY(3px); opacity: .55; }
.dq-opt.ok { background: #e9f6df; opacity: 1; }
.dq-opt.bad { background: #fde8ee; opacity: 1; }
.dq-note { display: block; margin-top: 6px; font: 15px var(--font-hand); color: var(--ink-soft); min-height: 1em; }

/* текст учебника (lesson-boards.js bookText) */
.bt-sheet { padding: 18px 20px; }
.bt-head { display: grid; gap: 4px; margin-bottom: 8px; }
.bt-head h3 { margin: 0; font: 600 26px/1.5 var(--font-kana); }
.bt-head .row-actions { margin-top: 6px; }
.bt-note { font-size: 13px; }
.bt-p { margin: 0 0 14px; line-height: 2.3; }
.bt-sent { display: inline; padding: 2px 3px; margin: 0; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 600 20px/2.3 var(--font-kana); text-align: left; cursor: pointer; }
.bt-sent:hover { background: #fff3c4; }
.bt-sent.on { background: #ffe07a; }
.bt-sent ruby rt { font: 500 11px/1 var(--font-kana); color: var(--ink-soft); }
.bt-ru { display: none; }
.show-ru .bt-ru { display: block; margin: -4px 0 6px; font: 15px/1.4 var(--font-ui); color: var(--ink-soft); }
.show-ru .bt-sent { display: block; }

/* отрывок текста к вопросу теста (мондай учебника) */
.test-passage { margin: 6px 0 10px; padding: 12px 14px; border: 2px dashed rgba(43, 37, 35, .3); border-radius: 12px; font: 600 18px/1.9 var(--font-kana); text-align: left; white-space: pre-line; }

/* Видеоурок школы (course.js videoBlock): плеер во всю ширину, постер — кадр ролика */
.video-block { padding: 14px 16px 16px; margin: 0 0 14px; }
.video-block .video-title { margin: 0 0 10px; }
.video-block video { display: block; width: 100%; height: auto; max-height: 70vh; border-radius: 10px; border: 2px solid var(--ink); background: #1d1715; }