/* ============================================================
   Вайбкодинг — интерактивный курс
   Дизайн: «бумажный» минимализм, оливковый акцент, тонкие линейки.
   ============================================================ */

/* ---------- 1. Токены ---------- */

:root {
  --paper: #f4f3ee;
  --paper-2: #fbfaf7;
  --ink: #14140f;
  --ink-2: #45453c;
  --ink-3: #6f6f64;
  --line: #dedbd0;
  --line-strong: #b9b5a6;
  --line-ink: #33322a;
  --accent: #7f9a45;
  --accent-soft: #c9d8a3;
  --accent-bg: #e7eed6;
  --danger: #b4442f;
  --danger-bg: #f8e6e1;
  --warn: #a8752a;
  --warn-bg: #f8eedb;
  --info: #3d6f96;
  --info-bg: #e2eef7;
  --ok: #4d7c3f;
  --ok-bg: #e6f0dd;
  --code-bg: #f7f6f0;
  --code-ink: #2b2b23;
  --code-bar: #edebe2;
  --code-border: #e0ddd1;
  --tok-com: #8a8f7c;
  --tok-str: #4a7538;
  --tok-num: #a25f26;
  --tok-key: #2e6c9e;
  --tok-fn: #856517;
  --tok-tag: #2e6c9e;
  --tok-attr: #4a7538;
  --tok-op: #a44f39;
  --shadow: 0 1px 2px rgba(20, 20, 15, .06), 0 8px 28px rgba(20, 20, 15, .07);
  --shadow-sm: 0 1px 2px rgba(20, 20, 15, .07);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --sidebar-w: 310px;
  --toc-w: 300px;
  --topbar-h: 60px;
  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 820px;
}

[data-theme="dark"] {
  --paper: #101210;
  --paper-2: #181a17;
  --ink: #eceade;
  --ink-2: #b8b8ac;
  --ink-3: #8b8b80;
  --line: #2c2f2a;
  --line-strong: #414539;
  --line-ink: #c9c8bb;
  --accent: #b6ca85;
  --accent-soft: #4d5a33;
  --accent-bg: #232919;
  --danger: #e58a74;
  --danger-bg: #33211d;
  --warn: #e0b26a;
  --warn-bg: #322819;
  --info: #8dbde2;
  --info-bg: #1b2833;
  --ok: #a5cf87;
  --ok-bg: #1f2a19;
  --code-bg: #0b0d0a;
  --code-ink: #e4e2d4;
  --code-bar: #14170f;
  --code-border: #262a20;
  --tok-com: #6f7b62;
  --tok-str: #c6da8f;
  --tok-num: #e5b877;
  --tok-key: #8fc0e8;
  --tok-fn: #e6d089;
  --tok-tag: #8fc0e8;
  --tok-attr: #c6da8f;
  --tok-op: #d3927f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ---------- 2. База ---------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--accent-soft); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
button { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

::selection { background: var(--accent-soft); color: #14140f; }

/* тонкие ненавязчивые полосы прокрутки */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. Шапка ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--ink); border-radius: 8px; flex: none;
}
.brand__mark svg { width: 20px; height: 20px; stroke: var(--accent-soft); fill: none; }
.brand__mark circle { fill: var(--accent-soft); stroke: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text b { font-size: 16px; letter-spacing: -.01em; }
.brand__text small { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }

.topbar__burger-text { font-size: 13px; font-weight: 550; }

.topbar__progress { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 190px; }
.topbar__progress-label { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.topbar__actions { display: flex; gap: 4px; }

.meter { flex: 1; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .35s ease; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: var(--paper-2); border-color: var(--line); }

/* кнопка меню видна всегда: на широком экране прячет и возвращает левую колонку,
   на узком — выдвигает её поверх страницы. Правило идёт после .icon-btn, чтобы перебить grid */
.topbar__burger {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; height: 36px; padding: 0 11px; flex: none;
}
@media (max-width: 560px) {
  .topbar__burger-text { display: none; }
  .topbar__burger { width: 36px; padding: 0; }
}
[data-theme="light"] .i-moon, [data-theme="dark"] .i-sun { display: none; }

#accountBtn { position: relative; }
#accountBtn .dot {
  position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--paper);
}
#accountBtn .dot[data-state="syncing"] { background: var(--warn); }
#accountBtn .dot[data-state="error"] { background: var(--danger); }

/* ---------- 4. Каркас ---------- */

.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; }
/* на широком экране кнопкой в шапке левое меню можно убрать — тексту становится просторнее */
.layout.is-collapsed { grid-template-columns: minmax(0, 1fr); }
.layout.is-collapsed > .sidebar { display: none; }

.sidebar {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  padding: 18px 12px 60px;
  scrollbar-width: thin;
}

/* нижнее поле небольшое: 120 пикселей оставляли под концом урока пустой экран */
.main { --main-pt: 34px; --main-pb: 56px; min-width: 0; padding: var(--main-pt) 40px var(--main-pb); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.wrap--wide { max-width: 1080px; }

/* ---------- 5. Сайдбар ---------- */

.side-section + .side-section { margin-top: 22px; }
.side-title {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 10px 8px; margin: 0;
}

.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--ink-2);
  font-size: 14px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left;
}
.side-link:hover { background: var(--paper-2); color: var(--ink); }
.side-link.is-active { background: var(--accent-bg); color: var(--ink); font-weight: 600; }
.side-link__icon { width: 18px; text-align: center; color: var(--ink-3); font-weight: 700; }

.side-mod { border-radius: 11px; margin-bottom: 4px; }
.side-mod__head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; background: none; border: 0; cursor: pointer; border-radius: 9px; text-align: left;
}
.side-mod__head:hover { background: var(--paper-2); }
.side-mod__num { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .06em; flex: none; }
.side-mod__title { font-size: 13.5px; font-weight: 600; line-height: 1.3; flex: 1; }
.side-mod__chev { width: 14px; height: 14px; color: var(--ink-3); transition: transform .2s; flex: none; }
.side-mod.is-open .side-mod__chev { transform: rotate(90deg); }
.side-mod__ring { flex: none; }

.side-mod__list { display: none; padding: 2px 0 8px 14px; margin-left: 12px; border-left: 1px solid var(--line); }
.side-mod.is-open .side-mod__list { display: block; }

.side-lesson {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 6px 9px; border-radius: 8px; font-size: 13px; line-height: 1.4;
  color: var(--ink-2); text-decoration: none; border: 0; background: none; cursor: pointer; text-align: left;
}
.side-lesson:hover { background: var(--paper-2); color: var(--ink); }
.side-lesson.is-active { background: var(--accent-bg); color: var(--ink); font-weight: 600; }
.side-lesson.is-done { color: var(--ink-3); }
.side-lesson.is-done .side-lesson__text { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.side-lesson__tick {
  width: 15px; height: 15px; border: 1.5px solid var(--line-strong); border-radius: 5px; flex: none; margin-top: 3px;
  display: grid; place-items: center; opacity: .55;
}
.side-lesson.is-done .side-lesson__tick { background: var(--accent); border-color: var(--accent); opacity: 1; }
/* отмечен пройденным, но тест или практика ещё не закончены: цвет тот же, отличает только незачёркнутый текст */
.side-lesson.is-done.is-partial .side-lesson__tick {
  background: var(--accent); border-color: var(--accent);
}
.side-lesson.is-done.is-partial .side-lesson__text { text-decoration: none; }
/* начатый урок — тот же цвет, что у пройденного, но закрашена половина квадрата */
.side-lesson.is-started .side-lesson__tick {
  border-color: var(--accent); opacity: 1; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0 50%, transparent 50% 100%);
}
.side-lesson__tick svg { width: 10px; height: 10px; stroke: var(--paper); stroke-width: 3; opacity: 0; }
.side-lesson.is-done .side-lesson__tick svg { opacity: 1; }

/* закрытый урок — замок вместо отметки, габариты те же, что у квадратика */
.side-lesson__lock {
  width: 15px; height: 15px; flex: none; margin-top: 3px;
  display: grid; place-items: center; box-sizing: border-box;
}
.side-lesson__lock svg { width: 13px; height: 13px; stroke: var(--ink-3); stroke-width: 1.6; fill: none; }
.prow__lock svg { width: 15px; height: 15px; stroke: var(--ink-3); stroke-width: 1.6; fill: none; vertical-align: middle; }

.side-badge {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 99px;
  background: var(--line); color: var(--ink-3); margin-left: 6px; vertical-align: middle;
}

/* ---------- 6. Типографика контента ---------- */

.h-hero {
  font-size: clamp(34px, 6vw, 60px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800;
  margin: 0 0 18px;
}
h1.page-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 10px; font-weight: 800; }
.prose h2 {
  font-size: 25px; line-height: 1.25; letter-spacing: -.02em; font-weight: 750;
  margin: 32px 0 14px;
}
.prose > h2 {
  position: relative;
  margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--line);
}
.prose > h2::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 3px;
  background: var(--accent-soft); border-radius: 2px;
}
.prose h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; margin: 30px 0 10px; }
.prose h4 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.prose p { margin: 0 0 15px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 0 0 7px; }
.prose li > ul, .prose li > ol { margin-top: 7px; }
.prose strong { font-weight: 680; }
.prose .lead { font-size: 18.5px; line-height: 1.55; color: var(--ink-2); }

.prose :not(pre) > code, .inline-code {
  font-family: var(--mono); font-size: .875em;
  background: var(--accent-bg); color: var(--ink);
  padding: .12em .38em; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--accent-soft) 60%, transparent);
  word-break: break-word;
}
.codeblock pre code { background: none; border: 0; padding: 0; }

mark {
  background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
  color: inherit;
  font-weight: 600;
  padding: .1em .32em;
  margin: 0 -.06em;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme="dark"] mark {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--ink);
}

.kbd, kbd {
  font-family: var(--mono); font-size: 11.5px; padding: 2px 6px; border-radius: 5px;
  background: var(--paper-2); border: 1px solid var(--line); border-bottom-width: 2px; color: var(--ink-2);
}

.muted { color: var(--ink-3); }
.small { font-size: 13.5px; }
.center { text-align: center; }

/* ---------- 7. Общие элементы ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 20px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--paper-2); color: var(--ink); font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: transform .12s ease, background .15s;
}
.btn:hover { background: var(--accent-bg); }
.btn:active { transform: translateY(1px); }
/* кнопка, до которой ещё не дошли: например «Отметить пройденным» без теста и практики */
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--paper-2); }
.btn--primary[disabled]:hover { background: var(--ink); }
.btn[disabled]:active { transform: none; }
.btn svg { width: 17px; height: 17px; }
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: #000; color: #fff; }
[data-theme="dark"] .btn--primary { background: var(--accent); color: #12140e; border-color: var(--accent); }
[data-theme="dark"] .btn--primary:hover { background: #c7da96; color: #12140e; }
.btn--ghost { border-color: var(--line); background: transparent; }
.btn--sm { padding: 7px 13px; font-size: 13px; border-radius: 8px; border-width: 1px; }
.btn--block { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; line-height: 1.5; padding: 4px 11px; border-radius: 99px;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2);
  max-width: 100%;
}
.chip svg { width: 14px; height: 14px; flex: none; }
.chip--accent { background: var(--accent-bg); border-color: var(--accent-soft); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.card--flat { box-shadow: none; }

.divider { height: 1px; background: var(--line); border: 0; margin: 34px 0; }
.rule-strong { height: 2px; background: var(--line-strong); border: 0; margin: 26px 0 18px; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- 8. Главная ---------- */

.hero { padding: 30px 0 10px; }
.hero__kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px;
}
.hero__kicker::before { content: ""; width: 26px; height: 8px; background: var(--accent-soft); display: block; }
.hero__lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 640px; margin: 0 0 26px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--paper-2); padding: 18px 20px; }
.stat b { display: block; font-size: 27px; letter-spacing: -.03em; line-height: 1.1; }
.stat span { font-size: 12.5px; color: var(--ink-3); }

/* Карточка модуля — в стиле методички из программы курса */
.modcard { border-top: 2px solid var(--line-ink); padding: 22px 0 30px; }
.modcard__head { display: flex; align-items: flex-start; gap: 18px; }
.modcard__bar { width: 7px; align-self: stretch; min-height: 34px; background: var(--accent-soft); flex: none; margin-top: 3px; }
.modcard__title { font-size: clamp(22px, 3.4vw, 33px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; margin: 0; flex: 1; }
.modcard__num { font-size: clamp(22px, 3.4vw, 33px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); opacity: .85; }
.modcard__badge {
  display: inline-block; margin-top: 12px; font-size: 11.5px; padding: 3px 9px;
  background: var(--line); color: var(--ink-2); border-radius: 4px;
}
.modcard__meta { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.modcard__meta-k { font-size: 13px; font-weight: 650; }
.modcard__meta-v { color: var(--ink-2); }
.modcard__section { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px dashed var(--line); }
.modcard__section-k { font-size: 13px; color: var(--ink-3); }
.modcard__section ol, .modcard__section ul { margin: 0; padding-left: 20px; }
.modcard__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.modcard__prog { font-size: 12.5px; color: var(--ink-3); }

/* ---------- 9. Урок ---------- */

.lesson-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.lesson-top a { text-decoration: none; }
.lesson-top a:hover { color: var(--ink); }

.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 26px; }

.resume {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  margin: 0 0 26px; padding: 14px 18px; border-radius: var(--radius);
  background: var(--paper-2); border: 1px dashed var(--accent-soft);
}

.lesson-goals { background: var(--accent-bg); border: 1px solid var(--accent-soft); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 30px; }
.lesson-goals h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 10px; border: 0; padding: 0; }
.lesson-goals ul { margin: 0; padding-left: 20px; }
.lesson-goals li { margin-bottom: 5px; }

/* заголовки не должны прятаться под липкую шапку при переходе по якорю */
.prose h2, .prose h3, .prose h4, .main [id] { scroll-margin-top: calc(var(--topbar-h) + 20px); }

/* устроено как левая колонка: прилипает сразу под шапкой, занимает всю высоту экрана
   и держит запас снизу, чтобы последний пункт не упирался в край */
.toc {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  /* поля страницы на колонку не действуют: она идёт от шапки до низа экрана, как левое меню */
  margin-top: calc(-1 * var(--main-pt)); margin-bottom: calc(-1 * var(--main-pb));
  font-size: 13px; border-left: 2px solid var(--line); padding: 0 8px 60px 14px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
/* шапка оглавления остаётся на виду, когда список внутри колонки прокручивается */
/* отступ сверху внутри самой шапки: она прилипает к краю колонки,
   и без него заголовок упирался бы в верхнюю кромку */
.toc__head { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 10px 0 8px; }
.toc__title { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-bottom: 10px; }
/* счётчик прочитанного идёт в строке заголовка, поэтому без верхнего регистра */
.toc a { display: block; padding: 4px 0; color: var(--ink-3); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); font-weight: 650; }
.toc a:focus-visible { outline-offset: -2px; }
.toc a { position: relative; padding-left: 18px; }
.toc a[data-level="3"] { padding-left: 30px; font-size: 12.5px; }
.toc a::before {
  content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: transparent;
}
.toc a[data-level="3"]::before { left: 14px; }
.toc a.is-read::before { background: var(--accent); border-color: var(--accent); }
.toc a.is-read { color: color-mix(in srgb, var(--ink-3) 80%, transparent); }
.toc a.is-active { color: var(--ink); font-weight: 650; }

.toc__read { margin: 0 0 12px; }
.toc__read .meter { height: 4px; }
/* счётчик стоит в строке заголовка, поэтому без верхнего регистра и с отступом от него */
.toc__read-label { font-size: 11px; color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-left: 7px; }

/* текст по центру своей колонки, оглавление прижато к правому краю окна */
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--toc-w); gap: 44px; }
/* у страниц с оглавлением правое поле лишнее: колонка сама держит дистанцию от текста,
   а до края экрана оставался пустой коридор */
@media (min-width: 1221px) { .main:has(.lesson-layout) { padding-right: 18px; } }
.lesson-layout > .prose { max-width: var(--wrap); width: 100%; margin: 0 auto; }
@media (max-width: 1220px) { .lesson-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 9a. Оглавление на узком экране: кнопка и панель снизу ---------- */

/* на широком экране кнопка не нужна — колонка и так на виду */
.toc-fab, .toc-col__backdrop, .toc-col__close { display: none; }

@media (max-width: 1220px) {
  .toc-fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 15px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600;
    box-shadow: var(--shadow); cursor: pointer;
  }
  .toc-fab svg { width: 17px; height: 17px; }
  .toc-fab:hover { border-color: var(--line-strong); }

  .toc-col {
    position: fixed; inset: auto 0 0 0; z-index: 61;
    background: var(--paper); border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
    max-height: 72vh; padding: 8px 18px 22px;
    transform: translateY(101%); transition: transform .22s ease;
    /* прокручивается только список внутри, иначе крестик и шапка уезжают вверх */
    display: flex; flex-direction: column; overflow: hidden;
  }
  .toc-col::before {                       /* полоска-ручка, как у шторок на телефоне */
    content: ""; display: block; width: 38px; height: 4px; margin: 6px auto 12px;
    border-radius: 2px; background: var(--line-strong);
  }
  .toc-col.is-open { transform: translateY(0); }

  .toc-col__backdrop {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: rgba(20, 20, 15, .38); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .toc-col__backdrop.is-open { opacity: 1; pointer-events: auto; }

  .toc-col::before { flex: none; }
  .toc-col .toc {
    position: static; max-height: none; border-left: 0; padding: 0; font-size: 14.5px;
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  /* отступ справа — чтобы длинный заголовок не заезжал под кнопку закрытия */
  .toc-col .toc__head { padding-bottom: 10px; padding-right: 44px; }
  .toc-col .toc a { padding: 9px 0 9px 20px; }        /* палец, а не курсор */
  .toc-col .toc a[data-level="3"] { padding-left: 32px; font-size: 13.5px; }
  .toc-col .toc__title { font-size: 12px; }

  .toc-col__close {
    display: grid; place-items: center; position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 34px; height: 34px; padding: 0; border-radius: 50%;
    border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2);
    cursor: pointer;
  }
  .toc-col__close svg { width: 16px; height: 16px; display: block; }
  .toc-col__close:hover { border-color: var(--line-strong); color: var(--ink); }
}

/* ---------- 10. Блоки контента ---------- */

.callout {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
  padding: 16px 18px; border-radius: var(--radius); margin: 22px 0;
  border: 1px solid var(--line); background: var(--paper-2);
}
.callout__icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; font-weight: 800; font-size: 13px; }
.callout__title { font-weight: 700; margin: 0 0 4px; }
.callout__body > :last-child { margin-bottom: 0; }
.callout--tip { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.callout--tip .callout__icon { background: var(--ok); color: var(--paper); }
.callout--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.callout--warn .callout__icon { background: var(--warn); color: var(--paper); }
.callout--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.callout--danger .callout__icon { background: var(--danger); color: var(--paper); }
.callout--info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.callout--info .callout__icon { background: var(--info); color: var(--paper); }
.callout--note { background: var(--paper-2); }
.callout--note .callout__icon { background: var(--ink-3); color: var(--paper); }

.codeblock { margin: 22px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--code-border); background: var(--code-bg); }
.codeblock__bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--code-bar); border-bottom: 1px solid var(--code-border);
}
.codeblock__lang { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.codeblock__cap { font-size: 12.5px; color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codeblock__copy {
  display: inline-flex; align-items: center; gap: 6px; background: var(--paper-2); border: 1px solid var(--line);
  color: var(--ink); font-size: 11.5px; font-weight: 550; padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.codeblock__copy:hover { background: var(--accent-bg); border-color: var(--accent-soft); color: var(--ink); }
.codeblock__copy svg { width: 13px; height: 13px; }
.codeblock pre { margin: 0; padding: 15px 16px; overflow-x: auto; }
.codeblock code { font-family: var(--mono); font-size: 13.2px; line-height: 1.62; color: var(--code-ink); white-space: pre; }

/* подсветка */
.tok-com { color: var(--tok-com); font-style: italic; }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-key { color: var(--tok-key); font-weight: 600; }
.tok-fn  { color: var(--tok-fn); }
.tok-tag { color: var(--tok-tag); }
.tok-attr{ color: var(--tok-attr); }
.tok-op  { color: var(--tok-op); }
[data-theme="dark"] .tok-key { font-weight: 400; }

.promptbox { margin: 24px 0; border: 1px solid var(--accent-soft); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.promptbox__head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--accent-bg); border-bottom: 1px solid var(--accent-soft); }
.promptbox__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
.promptbox__title { font-weight: 650; font-size: 14.5px; flex: 1; }
.promptbox__text { padding: 16px; font-family: var(--mono); font-size: 13.2px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.promptbox__note { padding: 0 16px 14px; font-size: 13px; color: var(--ink-3); }

.steps { counter-reset: step; margin: 24px 0; padding: 0; list-style: none; }
.steps__item { position: relative; padding: 0 0 22px 46px; border-left: 2px solid var(--line); margin-left: 15px; }
.steps__item:last-child { border-left-color: transparent; padding-bottom: 4px; }
.steps__item::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: -16px; top: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-bg); color: var(--ink); border: 1.5px solid var(--accent-soft);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.steps__title { font-weight: 700; margin: 3px 0 6px; font-size: 16.5px; }
.steps__item > :last-child { margin-bottom: 0; }

.checklist { margin: 24px 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: var(--paper-2); }
.checklist__title { font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.checklist__title .count { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-left: auto; font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { width: 20px; height: 20px; border: 1.6px solid var(--line-strong); border-radius: 6px; flex: none; margin-top: 1px; display: grid; place-items: center; transition: .15s; }
.check__box svg { width: 12px; height: 12px; stroke: var(--paper); stroke-width: 3.2; opacity: 0; }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:checked ~ .check__text { color: var(--ink-3); text-decoration: line-through; }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check__text { line-height: 1.5; }

.quiz { margin: 26px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.quiz__head {
  padding: 12px 18px; background: var(--accent-bg); color: var(--ink-2);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--accent-soft);
}
.quiz__body { padding: 18px 20px; background: var(--paper-2); }
.quiz__q { font-weight: 650; margin: 0 0 14px; font-size: 16.5px; }
.quiz__opts { display: grid; gap: 8px; }
.quiz__opt {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; background: var(--paper); transition: .15s;
}
.quiz__opt:hover { border-color: var(--line-strong); }
.quiz__opt input { position: absolute; opacity: 0; }
.quiz__marker { width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.quiz__opt.is-right { border-color: var(--ok); background: var(--ok-bg); }
.quiz__opt.is-right .quiz__marker { background: var(--ok); border-color: var(--ok); color: var(--paper); }
.quiz__opt.is-wrong { border-color: var(--danger); background: var(--danger-bg); }
.quiz__opt.is-wrong .quiz__marker { background: var(--danger); border-color: var(--danger); color: var(--paper); }
.quiz__opt.is-disabled { cursor: default; }
.quiz__explain { margin-top: 14px; padding: 13px 15px; border-radius: 10px; background: var(--info-bg); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); font-size: 14.5px; }
.quiz__explain b { display: block; margin-bottom: 3px; }
.quiz__foot { display: flex; gap: 10px; align-items: center; margin-top: 14px; }

.tbl-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: var(--radius); }
table.tbl { border-collapse: collapse; width: 100%; font-size: 14.5px; background: var(--paper-2); }
table.tbl th, table.tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl th { background: var(--accent-bg); font-weight: 700; font-size: 13px; white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: 0; }

.terms { margin: 22px 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.term { background: var(--paper-2); padding: 14px 18px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; }
.term__t { font-weight: 700; }
.term__d { color: var(--ink-2); }
@media (max-width: 640px) { .term { grid-template-columns: 1fr; gap: 4px; } }

.details { margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); overflow: hidden; }
.details > summary { padding: 13px 18px; cursor: pointer; font-weight: 650; list-style: none; display: flex; align-items: center; gap: 10px; }
.details > summary::-webkit-details-marker { display: none; }
.details > summary::before { content: "+"; font-family: var(--mono); font-size: 17px; color: var(--accent); font-weight: 700; }
.details[open] > summary::before { content: "–"; }
.details__body { padding: 0 18px 16px; }
.details__body > :last-child { margin-bottom: 0; }

.taskbox { margin: 26px 0; border: 1px solid var(--accent-soft); border-radius: var(--radius); overflow: hidden; }
.taskbox__head { padding: 13px 18px; background: var(--accent-bg); border-bottom: 1px solid var(--accent-soft); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.taskbox__head .chip { margin-left: auto; }
.taskbox__body { padding: 18px; background: var(--paper-2); }
.taskbox__body > :last-child { margin-bottom: 0; }

.figure { margin: 24px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 18px; overflow-x: auto; }
.figure pre { margin: 0; font-family: var(--mono); font-size: 12.6px; line-height: 1.5; color: var(--ink-2); white-space: pre; }
.figure figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-3); }

.keypoints { margin: 30px 0; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); }
.keypoints h3 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .07em; }
.keypoints ul { margin: 0; padding-left: 20px; }

.notes { margin: 30px 0; }
.notes textarea {
  width: 100%; min-height: 120px; resize: vertical; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); font: inherit; font-size: 14.5px;
}
.notes__row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }

.lesson-done {
  margin: 40px 0 26px; padding: 24px; border-radius: var(--radius);
  background: var(--accent-bg); border: 1px solid var(--accent-soft);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.lesson-done__text { flex: 1 1 320px; min-width: 0; }
.lesson-done .btn { flex: none; }
.lesson-nav { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-top: 30px; }
.lesson-nav__btn { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--paper-2); }
.lesson-nav__btn:hover { border-color: var(--line-strong); }
.lesson-nav__btn small { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.lesson-nav__btn b { font-weight: 650; line-height: 1.35; }
.lesson-nav__btn--next { text-align: right; align-items: flex-end; }
.lesson-nav__btn.is-locked { opacity: .55; cursor: default; background: transparent; }
.lesson-nav__btn.is-locked:hover { border-color: var(--line); }

/* подсказка «что осталось до следующего урока» */
.lesson-gate {
  margin: 22px 0 4px; padding: 16px 18px; border-radius: var(--radius);
  border: 1px dashed var(--line-strong); background: var(--paper-2); font-size: 14px;
}
.lesson-gate ul { margin: 8px 0 0; padding-left: 20px; }
.lesson-gate li { margin-bottom: 3px; }
/* сделанное не исчезает из списка, а зачёркивается — видно, сколько уже пройдено */
.lesson-gate li.is-done { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.lesson-gate.is-open { border-style: solid; border-color: var(--accent-soft); background: var(--accent-bg); }

/* закрытые уроки: видно, что они есть, но открыть нельзя */
.side-lesson.is-locked, .prow.is-locked { opacity: .5; cursor: default; }
.side-lesson.is-locked:hover, .prow.is-locked:hover { background: none; border-color: var(--line); }
.side-lesson.is-locked .side-lesson__tick { border-style: dashed; }
.is-locked-text { color: var(--ink-3); }

/* мои проекты */
.project-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-card__field { display: block; margin-top: 10px; }
.project-card__input {
  display: block; width: 100%; margin-top: 4px; padding: 7px 10px;
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.project-card__input:focus-visible { border-color: var(--accent-soft); }

/* работа над ошибками */
.review-group { margin-top: 40px; }
.review-group h2 { margin-bottom: 4px; }
.review-card {
  margin: 20px 0; padding: 16px 18px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper-2);
}
.review-card.is-fixed { border-color: var(--accent-soft); background: var(--accent-bg); }
.review-card__fixed { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--accent-ink, var(--ink-2)); }
.review-card__was { font-size: 13.5px; color: var(--ink-3); margin-bottom: 10px; }
.review-card__was b { color: var(--ink-2); font-weight: 600; }
.review-card .quiz { margin: 0; }

/* переключатель порядка прохождения */
.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }

/* отметки нарисованы сами, а не системой: у браузерных чекбоксов свой вид в каждой ОС
   и своя палитра, из-за которой в светлой теме они выглядели чужеродно */
/* контур рисуется внутренней тенью, а не рамкой: дробная рамка на маленьком круге
   выглядит рваной, и её толщина меняла бы геометрию при выборе */
.switch input {
  appearance: none; -webkit-appearance: none; margin: 3px 0 0; flex: none;
  width: 18px; height: 18px; border: 0; background: var(--paper-2);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.switch input[type="checkbox"] { border-radius: 5px; }
.switch input[type="radio"] { border-radius: 50%; }
.switch input:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.switch input:checked { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* галочка во флажке */
.switch input[type="checkbox"]::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg); opacity: 0;
}
.switch input[type="checkbox"]:checked::after { opacity: 1; }

/* точка в переключателе версии: выбор одного из нескольких, а не «включено/выключено» */
.switch input[type="radio"]:checked { background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--accent); }
.switch input[type="radio"]::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: scale(0);
  transition: transform .15s;
}
.switch input[type="radio"]:checked::after { transform: scale(1); }

/* ---------- 11. Прогресс / служебные страницы ---------- */

.progress-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: center; }
@media (max-width: 640px) { .progress-hero { grid-template-columns: 1fr; } }
.ring { --p: 0; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); }
.ring__in { width: 108px; height: 108px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }

.mini-ring { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: none; }
.mini-ring svg { width: 18px; height: 18px; overflow: visible; transform: rotate(-90deg); }
.mini-ring circle { fill: none; stroke-width: 2.5; }
.mini-ring .mini-ring__bg { stroke: var(--line-strong); opacity: .55; }
.mini-ring .mini-ring__fg { stroke: var(--accent); stroke-linecap: round; }
.mini-ring .mini-ring__done { fill: var(--accent); stroke: none; }
.mini-ring__tick { fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(90deg); transform-origin: 9px 9px; }

.plist { display: grid; gap: 10px; margin: 24px 0; }
.prow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 130px 70px; gap: 14px; align-items: center;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper-2); text-decoration: none; }
.prow:hover { border-color: var(--line-strong); }
.prow__num { font-weight: 800; color: var(--accent); }
.prow__title { font-weight: 650; line-height: 1.3; }
.prow__sub { font-size: 12.5px; color: var(--ink-3); }
.prow__pct { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 700px) { .prow { grid-template-columns: 34px minmax(0, 1fr) 56px; } .prow .meter { display: none; } }

/* ---------- 11a. Поле ввода ---------- */

.input {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
  font: inherit; font-size: 14.5px; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--line-strong); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.input--mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: .01em; }

/* поле с иконкой слева и кнопкой справа: путь к папке, адрес репозитория и подобное */
.field { display: flex; align-items: center; gap: 8px; }
.field__box { position: relative; flex: 1; min-width: 0; }
.field__box .input { padding-left: 38px; }
.field__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-3); pointer-events: none;
}
.field__box:focus-within .field__icon { color: var(--accent); }
.field__hint { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.field__hint code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--accent-bg); color: var(--ink-2); padding: 1px 6px; border-radius: 6px;
}
@media (max-width: 560px) { .field { flex-wrap: wrap; } .field .btn { width: 100%; } }

/* ---------- 12. Конструктор промптов ---------- */

.pb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .pb { grid-template-columns: 1fr; } }
.pb__field { margin-bottom: 16px; }
.pb__field label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.pb__field .hint { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.pb__field textarea, .pb__field input, .pb__field select {
  width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink); font: inherit; font-size: 14px;
}
.pb__field textarea { min-height: 74px; resize: vertical; }
.pb__out { position: sticky; top: calc(var(--topbar-h) + 20px); }
.pb__preview { font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap;
  background: var(--code-bg); color: var(--code-ink); padding: 18px; border-radius: var(--radius); min-height: 260px; max-height: 60vh; overflow: auto; }

/* ---------- 13. Модалка поиска ---------- */

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding: 10vh 16px 16px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 15, .45); backdrop-filter: blur(2px); }
.modal__win { position: relative; width: min(720px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.modal__win--narrow { width: min(430px, 100%); }
/* специфичность выше, чем у .modal__body ниже, — иначе поля прилипают к краям окна */
.modal__body.auth { padding: 18px 20px 20px; display: block; }
.auth .pb__field { margin-bottom: 14px; }
.auth__hint { margin-top: 7px; }
.auth__error { color: var(--danger); min-height: 20px; margin: 0 0 6px; }
.modal__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.modal__icon { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.modal__head input { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.modal__body { max-height: 56vh; overflow-y: auto; padding: 8px; }
.modal__foot { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.sresult { display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none; color: inherit; }
.sresult:hover, .sresult.is-active { background: var(--accent-bg); }
.sresult__t { font-weight: 650; font-size: 14.5px; }
.sresult__s { font-size: 12.5px; color: var(--ink-3); }
.sresult mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------- 14. Тост ---------- */

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: 10px; font-size: 14px;
  z-index: 120; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 15. Адаптив ---------- */

@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; width: min(320px, 86vw); z-index: 45;
    background: var(--paper); transform: translateX(-102%); transition: transform .25s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.is-open { transform: none; }
  .sidebar-backdrop { position: fixed; inset: var(--topbar-h) 0 0; background: rgba(20,20,15,.4); z-index: 44; }
  .main { padding: 26px 20px 90px; }
  .topbar__progress { min-width: 120px; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 12px; gap: 10px; }
  .brand { flex: none; }
  .brand__text small { display: none; }
  .topbar__progress { min-width: 0; flex: 1 1 60px; }
  .topbar__progress-label { display: none; }
  .topbar__actions { flex: none; }
  .main { padding: 20px 16px 80px; }
  .modcard__meta, .modcard__section { grid-template-columns: 1fr; gap: 6px; }
  /* кнопка «Копировать» не должна уезжать за край блока: переносим её на вторую строку */
  .promptbox__head, .codeblock__bar { flex-wrap: wrap; }
  .promptbox__title { flex: 1 1 100%; }
  /* длинный «Результат: …» в шапке урока на телефоне переносится по словам, а не уезжает вбок */
  .chip { white-space: normal; }
}
/* совсем узкие телефоны: название курса уступает место кнопкам, знак остаётся */
@media (max-width: 430px) {
  .brand__text { display: none; }
}

/* ---------- 16. Печать ---------- */

@media print {
  /* на бумаге всегда светлая палитра: иначе тёмная тема печатает белый текст по белому */
  :root, :root[data-theme="dark"] {
    --paper: #fff; --paper-2: #fff;
    --ink: #111; --ink-2: #333; --ink-3: #555;
    --line: #ddd; --line-strong: #bbb; --line-ink: #333;
    --accent: #4a5d29; --accent-soft: #c9d8a3; --accent-bg: #f1f4e8;
    --danger: #a03c2a; --danger-bg: #fbf0ed;
    --warn: #8f6524; --warn-bg: #fbf4e6;
    --info: #35617f; --info-bg: #eef4f9;
    --ok: #446d38; --ok-bg: #f0f5eb;
    --code-bg: #f7f7f4; --code-ink: #1c1c18; --code-bar: #eeece5; --code-border: #ddd;
    --tok-com: #6f7364; --tok-str: #3f6630; --tok-num: #8b5220;
    --tok-key: #275a83; --tok-fn: #6f5413; --tok-tag: #275a83;
    --tok-attr: #3f6630; --tok-op: #8c422f;
    --shadow: none; --shadow-sm: none;
  }

  .topbar, .sidebar, .toc-col, .lesson-nav, .notes, .lesson-done, .sidebar-backdrop,
  .resume, .promptbox .btn, .codeblock__copy, .quiz__reset { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; }
  body { background: #fff; color: #111; }
  .card, .callout, .promptbox, .codeblock, .terms, .tbl-wrap { box-shadow: none; }

  /* не разрывать смысловые куски между страницами */
  .codeblock, .promptbox, .callout, .figure, .term, .quiz, table { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .prose a { color: inherit; text-decoration: underline; }
}