/* LearnPath. Внешний вид — решение D9 (docs/ui-borrowings.md): палитра «Мох» из Plantick, три фигуры
   (плашка, полка, капсула) без рамок и теней, ярусы движения 150/300/520 мс.
   Порядок: шрифты, токены, основа, шапка, фигуры и общие элементы, страницы, урок, поповер, движение. */

/* ---------- Шрифты ---------- */

/* Самохостинг: портал не ходит на сторонние домены. Literata — заголовки, Commissioner — интерфейс и текст,
   JetBrains Mono — код. Вариативные woff2, наборы символов отбираются по unicode-range. */

/* Commissioner */
@font-face { font-family: Commissioner; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/commissioner-normal-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Commissioner; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/commissioner-normal-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Commissioner; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/commissioner-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Commissioner; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/commissioner-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Literata */
@font-face { font-family: Literata; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/literata-normal-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Literata; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/literata-normal-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Literata; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/literata-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Literata; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/vendor/fonts/literata-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* JetBrains Mono */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/vendor/fonts/jetbrains-mono-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/vendor/fonts/jetbrains-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

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

:root {
  color-scheme: light dark;

  /* Ручной выбор темы кладёт в <meta name="color-scheme"> значение light или dark (см. app.js).
     Без JS meta остаётся «light dark», и сайт следует системной теме. */
  &:has(> head > meta[name="color-scheme"][content="dark"]) { color-scheme: dark; }
  &:has(> head > meta[name="color-scheme"][content="light"]) { color-scheme: light; }

  /* Палитра «Мох» (Plantick). Глубина набирается тоном: канвас -> плашка -> полка. */
  --paper:      light-dark(#f6f5ee, #141514);     /* канвас, фон body */
  --panel:      light-dark(#eae9e0, #1f201e);     /* плашка */
  --sheet:      light-dark(#dddccf, #282a27);     /* полка внутри плашки */
  --ink:        light-dark(#1b1f19, #edeee6);     /* текст */
  --ink-2:      light-dark(#494f45, #b3b8ac);
  --ink-3:      light-dark(#5d6259, #8d9487);     /* вторичный текст */
  --locked-surface: color-mix(in oklab, var(--ink) 9%, var(--panel));
  --hairline:   light-dark(#dbdacb, #373a36);     /* единственная линия — полоса прокрутки */
  --accent:     light-dark(#3d5f3a, #8fb587);     /* «верно», главное действие, нажатое */
  --accent-ink: light-dark(#f6f5ee, #131611);     /* текст на акценте */
  --danger:     light-dark(#7f342c, #eba79d);     /* «неверно», ошибка */
  --danger-soft:  color-mix(in oklab, var(--danger) 16%, var(--sheet));
  --accent-tint:  color-mix(in oklab, var(--accent) 20%, var(--sheet));

  /* Лёгкий тон поверх любой поверхности: наведение на строку, вставки кода. */
  --wash: color-mix(in oklab, var(--ink) 9%, transparent);

  /* Что лежит на поверхности (капсулы, поля, полоски), берёт следующий тон: канвас -> плашка,
     плашка -> полка, полка -> плашка. Иначе элемент сливается с фоном. Плашка и полка задают это ниже. */
  --lift: var(--panel);

  /* Цвета веток: только подкраска капсулы ветки поверх токенов выше, не вторая палитра. */
  --track-teal: light-dark(#0D9488, #2DD4BF);
  --track-amber: light-dark(#D97706, #FBBF24);
  --track-blue: light-dark(#2563EB, #60A5FA);
  --track-violet: light-dark(#7C3AED, #A78BFA);
  --track-green: light-dark(#16A34A, #4ADE80);
  --track-lime: light-dark(#65A30D, #A3E635);
  --track-sky: light-dark(#0284C7, #38BDF8);
  --track-red: light-dark(#DC2626, #F87171);
  --track-pink: light-dark(#DB2777, #F472B6);
  --track-indigo: light-dark(#4F46E5, #818CF8);
  --track-orange: light-dark(#EA580C, #FB923C);
  --track-yellow: light-dark(#CA8A04, #FACC15);
  --track-cyan: light-dark(#0891B2, #22D3EE);
  --track-rose: light-dark(#E11D48, #FB7185);

  /* Роль в программе: собственные подписи, отдельно от зелёного освоения. */
  --curriculum-profile: light-dark(#67428c, #c8a5ee);
  --curriculum-prerequisite: light-dark(#225f79, #8dcce4);
  --curriculum-preparation: light-dark(#82475f, #e4adc3);

  --font-display: Literata, Georgia, serif;       /* только заголовки */
  --font-ui: Commissioner, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-ui: 0.9375rem;
  --step: 0.9rem;
  --gap: 0.3rem;
  --radius: 22px;
  --radius-shelf: 15px;
  --radius-cell: 9px;
  --radius-chip: 999px;
  --plate: clamp(0.75rem, 2.2vw, 1.5rem); /* поле внутри плашки; у Plantick cqi, у нас vw: контейнеров-замеров нет */
  --column: 80rem; /* интерфейс на ПК — до 1280 px, отдельно от ширины чтения */
  --tap: 2.75rem; /* минимальная цель касания */

  /* Ярусы движения: отклик / переход / сцена. Уход всегда быстрее входа. */
  --tier-1: 150ms;
  --tier-2: 300ms;
  --tier-3: 520ms;

  accent-color: var(--accent);
}

/* ---------- Основа ---------- */

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

[hidden] { display: none !important; }

/* Место под полосу прокрутки занято всегда: иначе страница прыгает вбок, когда полоса появляется
   (выросла высота) или пропадает. Если когда-нибудь понадобится блокировать прокрутку body —
   только вместе с этим правилом. */
html { scrollbar-gutter: stable; }

/* Полосы прокрутки: тонкие, цвета линии, без подложки; одно правило на весь сервис.
   Старый Safari без scrollbar-color получает то же через ::-webkit-scrollbar.
   При повышенной контрастности — заметнее. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
@media (prefers-contrast: more) {
  * { scrollbar-color: var(--ink-3) transparent; }
}
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 9999px; }
  ::-webkit-scrollbar-track { background: transparent; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: var(--text-ui)/1.5 var(--font-ui);
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
}

/* Заголовки поддерживают левую ось чтения; отдельное выравнивание — только у входа. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.006em;
  text-wrap: balance;
}
h1 { margin-block: 0.5rem 0.25rem; font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); line-height: 1.15; text-align: left; }
.plate > h2, .note > label { display: block; font-size: 1.25rem; line-height: 1.3; text-align: left; }

p { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.2em; }

button, select, input, textarea { font: inherit; color: inherit; }
button { padding: 0; background: none; border: 0; cursor: pointer; }

/* Правило проекта: фокус без окантовки, клавиатура обозначается изменением тона. */
:focus, :focus-visible { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-chip);
  background: var(--accent);
  color: var(--accent-ink);
}
.skip-link:focus { top: 1rem; }

.wrap, .page { width: min(100% - 1.5rem, var(--column)); margin-inline: auto; }
body[data-route="lesson"] .page { --column: 74rem; }
main { padding-block: 0.5rem 3rem; }

/* Страница и статья урока — колонка плашек, воздух между ними задаёт --step. */
.page, .lesson { display: flex; flex-direction: column; gap: var(--step); }

/* ---------- Три фигуры: плашка, полка, капсула ---------- */

.plate {
  --lift: var(--sheet);
  padding: var(--plate);
  border-radius: var(--radius);
  background: var(--panel);
}
.plate:is(section, form, header) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--step); }

/* Полка: строка внутри плашки. Для HTML урока с сервера — те же правила по селекторам. */
.shelf, .prose :is(blockquote, details) {
  --lift: var(--panel);
  border-radius: var(--radius-shelf);
  background: var(--sheet);
}

/* Капсула: кнопка и пункт навигации. Фон — тон «над поверхностью» (--lift). */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-block-size: var(--tap);
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-chip);
  background: var(--lift);
  color: var(--ink);
  font-size: var(--text-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tier-1) ease, color var(--tier-1) ease;
}
.chip[aria-current="page"] { background: var(--accent-tint); }
.chip-primary, .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.chip:disabled { opacity: 0.6; cursor: default; } /* прозрачность, а не --ink-3: так читается и на акценте */

/* Поля: тон «над поверхностью», без рамки; фокус — обводка. */
input:not([type="radio"], [type="checkbox"]),
textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: var(--radius-cell);
  background: var(--lift);
  font-size: var(--text-ui);
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { min-height: 8rem; line-height: 1.5; resize: vertical; }
@supports (field-sizing: content) {
  textarea { field-sizing: content; min-height: 6rem; }
}
/* На сенсорных iOS приближает страницу, когда фокус получает поле мельче 16 px. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="radio"], [type="checkbox"]), textarea { font-size: 1rem; }
}

input[type="radio"], input[type="checkbox"] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; }

.field label { display: block; margin-bottom: 0.375rem; color: var(--ink-2); font-size: 0.875rem; font-weight: 500; }

.check { display: inline-flex; align-items: center; gap: 0.625rem; min-height: var(--tap); cursor: pointer; }

.form-error { margin: 0; color: var(--danger); }
.form-error:empty { display: none; }

.state { margin: 1.5rem 0; color: var(--ink-3); text-align: center; text-wrap: pretty; }
.state-error { padding: 1rem; border-radius: var(--radius-shelf); background: var(--danger-soft); color: var(--ink); }
.state-error p { margin: 0 0 0.75rem; }

.tag {
  display: inline-block;
  padding: 0 0.6rem;
  border-radius: var(--radius-chip);
  background: var(--lift);
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.6;
  font-weight: 400;
}
.tag-doubt { background: var(--accent-tint); color: var(--ink); }

mark { border-radius: 3px; background: color-mix(in oklab, var(--accent) 32%, transparent); color: inherit; }

/* Капсула ветки: имя ветки, подкрашенное её цветом (--track из setTrackColor). Цвет — подкраска, не смысл. */
.track-chip {
  display: inline-block;
  align-self: flex-start;
  padding: 0.2rem 0.8rem;
  border-radius: var(--radius-chip);
  background: color-mix(in oklab, var(--track, var(--accent)) 22%, var(--panel));
  color: var(--ink);
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

/* Отметка статуса: у каждого статуса своя форма, цвет только усиливает. */
.status { display: inline-flex; align-items: center; gap: 0.5rem; }
.mark {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--ink-3);
  border-radius: 50%;
}
.mark-started { border-color: var(--accent); }
.mark-started::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--accent);
}
.mark-done, .mark-tested_out { border-color: var(--accent); background: var(--accent); }
.mark-tested_out { border-radius: 2px; }
.mark-done::after, .mark-tested_out::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mark-skipped::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 6px;
  height: 2px;
  background: var(--ink-3);
}

/* Полоска прогресса: заливка акцентом по тону «над поверхностью» (на плашке — полка, на полке — плашка). */
.bar { display: block; flex: 1; block-size: 0.4rem; overflow: hidden; border-radius: var(--radius-chip); background: var(--lift); }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* ---------- Шапка и навигация ---------- */

.site-header { padding-block: 0.5rem; }
.header-row { display: flex; align-items: center; gap: 0.65rem; min-height: 4rem; }

.brand {
  margin-inline-end: 0.5rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}

.brand-mark { display: grid; place-content: center; width: 2rem; height: 2rem; border-radius: 0.65rem; background: var(--accent); color: var(--accent-ink); font: 600 1.45rem/1 var(--font-display); }
.brand-mark span { display: inline; position: absolute; margin-left: 0.65rem; margin-top: 0.05rem; color: color-mix(in oklab, var(--accent-ink) 60%, transparent); }
.header-search input { width: 9rem; }
.site-nav { display: flex; align-items: center; gap: 0.2rem; }
.site-nav > .chip, .nav-more > button { padding-inline: 0.8rem; font-size: 0.875rem; }
.nav-short { display: none; }
.nav-count { display: inline-grid; place-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; border-radius: 1rem; background: var(--accent); color: var(--accent-ink); font-size: 0.7rem; }
.nav-more { position: relative; }
body[data-route="login"] .site-header { display: none; }

@media (width >= 1050px) {
  .header-search { margin-inline-start: auto; }
}

/* На телефоне и планшете основные разделы остаются под рукой в нижней панели. */
@media (width < 1050px) {
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  body[data-route="login"] { padding-bottom: 0; }
  .header-search { display: none; }
  .theme-toggle { margin-inline-start: auto; }

  .site-nav {
    --lift: var(--sheet);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gap);
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--panel);
  }
  .site-nav .chip { min-block-size: 3rem; padding-inline: 0.1rem; font-size: 0.78rem; }
  .site-nav > .chip { flex-wrap: wrap; gap: 0.1rem; }
  .site-nav .nav-long { display: none; }
  .site-nav .nav-short { display: inline; }
  .nav-more > button { width: 100%; }
  .nav-more .menu-list { top: auto; bottom: calc(100% + 0.8rem); }
}

/* ---------- Списки: главная, ветки, результаты ---------- */

.rows, .results, .lesson-list, .glossary {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.8rem 1rem; }
.row-link { border-radius: inherit; color: inherit; text-decoration: none; }
.row-text { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.row-text a { color: var(--accent); }
.row-progress { display: flex; align-items: center; align-self: stretch; gap: 0.75rem; margin: 0.15rem 0 0; }
.row-count { color: var(--ink-3); font-size: 0.875rem; white-space: nowrap; }

/* ---------- Страницы ---------- */

.login { max-width: 22rem; margin-inline: auto; padding-top: 14vh; } /* padding, не margin: отступ не должен схлопываться наружу и давать прокрутку */
.login h1 { margin-bottom: 1.5rem; }
.login-form .chip { width: 100%; }

.continue { display: grid; justify-items: center; gap: 0.5rem; padding: 1.25rem 1rem; text-align: center; }
.continue-title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.006em; text-wrap: balance; }
.continue-meta { margin: 0 0 0.75rem; color: var(--ink-3); text-wrap: pretty; }
.continue .track-chip { align-self: center; }

.track-group { display: grid; gap: var(--gap); }
.track-group > h3 { margin-block: 0.75rem 0.35rem; color: var(--ink-2); font: 600 0.85rem/1.5 var(--font-ui); text-align: left; }
@media (width >= 1100px) {
  .track-group .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.track-head { text-align: left; }
.track-head h1 { margin: 0.25rem 0; }
.track-desc { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.track-head .row-progress { width: min(100%, 28rem); }

.lesson-row {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
  padding: 0.4rem 1rem;
}
.lesson-row.is-missing { color: var(--ink-3); }
.lesson-name a, a.result-title { text-decoration: none; }
.lesson-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; }
.lesson-minutes { color: var(--ink-3); font-size: 0.875rem; white-space: nowrap; }

.glossary-item { padding: 0.8rem 1rem; }
.glossary dt { font-weight: 600; }
.glossary dd { margin: 0.25rem 0 0; text-wrap: pretty; }
.glossary-lesson { display: block; margin-top: 0.375rem; }
.search-count { color: var(--ink-3); }

form.search-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.75rem; }
.search-results { display: flex; flex-direction: column; gap: var(--step); }
.result { padding: 0.8rem 1rem; }
.result.is-missing { color: var(--ink-3); }
.result-title { font-weight: 600; }
.result-title .tag { margin-inline-start: 0.625rem; }
.result-meta, .result-snippet { margin: 0.25rem 0 0; text-wrap: pretty; }
.result-meta { color: var(--ink-3); }

/* ---------- Урок ---------- */

.lesson-head { display: grid; justify-items: start; gap: 0.6rem; text-align: left; }
.lesson-head h1 { margin: 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; padding: 0; list-style: none; color: var(--ink-3); font-size: 0.875rem; }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; }
.lesson-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0; color: var(--ink-3); font-size: 0.875rem; }
.lesson-status { color: var(--ink-2); }
.quiz-jump { margin: 0; text-align: left; }

/* Урок на ПК шире обычной книжной колонки; длина строки ограничена отдельно
   от всей страницы. Код, таблицы, тесты и задания занимают ширину плашки. */
.prose { font-size: 1.0625rem; line-height: 1.65; }
.plate.prose > * { max-width: 66rem; margin-inline: auto; } /* одна мера у текста и заголовков, независимо от их кегля */
.plate.prose > :is(.code-block, table, .lp-quiz, .lp-task) { max-width: 100%; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose :is(p, li, blockquote) { text-wrap: pretty; }
.prose ul, .prose ol { padding-inline-start: 1.5em; }
.prose li + li { margin-top: 0.25em; }
.prose li::marker { color: var(--ink-3); }
.prose img { max-width: 100%; height: auto; }
.prose hr { margin: 2rem 0; border: 0; } /* линий в языке нет: разделитель — воздух */

/* Заголовки внутри урока — по левому краю: осознанное отступление от D9 (там заголовки по центру).
   Длинный текст читают сверху вниз и пробегают заголовки глазом; центрированные подзаголовки ломают просмотр. */
.prose :is(h2, h3, h4) { text-align: left; }
.prose h2 { margin: 2.25rem 0 0.75rem; font-size: 1.5rem; line-height: 1.3; }
.prose h3 { margin: 1.75rem 0 0.5rem; font-size: 1.25rem; line-height: 1.3; }
.prose h4 { margin: 1.5rem 0 0.5rem; font-size: 1.0625rem; line-height: 1.4; }
.plate.prose > :is(h2, h3, h4) { margin-inline: auto; }

.prose blockquote { margin: 1.25rem auto; padding: 0.75rem 1rem; }
.prose blockquote > :last-child { margin-bottom: 0; }

/* Таблица: строки — полки, разведены воздухом, шапка без фона. */
.prose table { display: block; max-width: 100%; margin: 1.25rem 0; overflow-x: auto; border-collapse: separate; border-spacing: 0 var(--gap); font-size: 1rem; line-height: 1.5; }
.prose th, .prose td { padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.prose td { background: var(--sheet); }
.prose td:first-child { border-radius: var(--radius-cell) 0 0 var(--radius-cell); }
.prose td:last-child { border-radius: 0 var(--radius-cell) var(--radius-cell) 0; }
.prose th { color: var(--ink-2); font-weight: 600; }

code, pre { font-family: var(--font-mono); font-variant-ligatures: none; } /* без лигатур: -- и -> в командах должны читаться как набраны */
:not(pre) > code { padding: 0.1em 0.4em; border-radius: var(--radius-cell); background: var(--wash); font-size: 0.9em; overflow-wrap: anywhere; }
pre code { font-size: 0.875rem; }

.code-block { margin: 1.25rem 0; }
.code-bar { display: flex; justify-content: flex-end; padding: 0.25rem 0.5rem 0; }
.code-block pre { margin: 0; padding: 0.5rem 1rem 0.875rem; overflow-x: auto; line-height: 1.55; tab-size: 4; }

/* Вопросы собеседования: нативная семантика details, высота и шеврон — GSAP. */
.prose details { margin: 0 auto 1em; display: flow-root; } /* flow-root: нижний отступ последнего абзаца остаётся внутри полки */
.prose details:has(+ details) { margin-bottom: var(--gap); }
.prose summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: var(--tap);
  padding: 0.5rem 1rem;
  border-radius: inherit;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.prose summary::-webkit-details-marker { display: none; }
.prose details[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.prose summary:not(.is-enhanced)::after, .details-chevron {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  translate: 0 -3px; /* шеврон тяжелее снизу: поднимаем к середине строки */
  transform-origin: 75% 75%; /* вращение вокруг середины самого шеврона, а не квадрата */
}
.prose details[open] > summary:not(.is-enhanced)::after { rotate: 225deg; }
.prose details > :not(summary) { margin-inline: 1rem; }
.details-body { display: flow-root; }

/* Термины */
.term {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted var(--accent) 2px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Тест: вопрос лежит на плашке, варианты — полки. */
.lp-quiz { display: grid; gap: 1.5rem; margin-block: 1.5rem; scroll-margin-top: 1rem; } /* шапка не липкая: запас под воздух, не под шапку */
.question { font-size: 1.0625rem; line-height: 1.5; }
.question fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.question legend { margin-bottom: 0.6rem; padding: 0; font-weight: 600; }
.prev-result { margin: -0.25rem 0 0.6rem; color: var(--ink-3); font-size: 0.875rem; }

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: var(--tap);
  margin-bottom: var(--gap);
  padding: 0.65rem 0.9rem;
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--tier-1) ease;
}
.option input { margin-top: 0.125rem; }
.option-text { flex: 1; min-width: 0; }
.verdict { flex: none; margin-inline-start: auto; font-weight: 600; }
.option:not(.is-ok, .is-bad):has(input:checked) { background: color-mix(in oklab, var(--ink) 10%, var(--sheet)); }
fieldset:disabled .option { cursor: default; }
.option.is-ok { background: var(--accent-tint); }
.option.is-ok .verdict { color: var(--accent); }
.option.is-bad { background: var(--danger-soft); }
.option.is-bad .verdict { color: var(--danger); }

.explain { margin: 0.75rem 0 0; padding: 0.75rem 1rem; }
.question-after { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; margin-top: 0.5rem; }
.quiz-summary { display: grid; gap: 0.25rem; margin: 0; padding: 0.75rem 1rem; font-weight: 600; }
.quiz-summary:empty { display: none; }

/* Задания: полка; поле ответа и отправка лежат на ней, поэтому берут тон плашки (--lift). */
.task { margin-block: 1.5rem; padding: 1rem; }
.task h3 { margin: 0 0 0.15rem; }
.task-kind { margin: 0 0 0.75rem; color: var(--ink-3); font-size: 0.875rem; }
.task-body { font-size: 1.0625rem; }
.task-body > :last-child { margin-bottom: 0; }
.task-controls { margin-top: 1rem; }
.answer-form label { display: block; margin-bottom: 0.375rem; font-weight: 500; }
.answer-form .chip { margin-top: 0.75rem; }
.submission { margin-bottom: 1rem; }
.submission-status { margin: 0 0 0.5rem; font-weight: 600; }
.status-pending { color: var(--ink-3); }
.status-accepted { color: var(--accent); }
.status-needs_work { color: var(--danger); }
.submission-label { margin: 0.75rem 0 0.25rem; color: var(--ink-3); font-size: 0.875rem; }
.answer { padding: 0.75rem 1rem; border-radius: var(--radius-cell); background: var(--lift); overflow-wrap: anywhere; white-space: pre-wrap; }

/* Конспект, статус, соседние уроки */
.note-status { min-height: 1.5rem; margin: 0; color: var(--ink-3); font-size: 0.875rem; }

.buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.next-link { justify-self: center; white-space: normal; text-align: center; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  align-items: flex-start;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--tier-1) ease;
}
.pager-prev { grid-column: 1; }
.pager-next { grid-column: 2; align-items: flex-end; text-align: right; }
.pager-label { color: var(--ink-3); font-size: 0.875rem; }
.pager-title { font-weight: 600; text-wrap: balance; }
@media (width < 640px) {
  .pager { grid-template-columns: 1fr; }
  .pager-prev, .pager-next { grid-column: 1; align-items: flex-start; text-align: left; }
}

/* ---------- Поповер с определением термина ---------- */

/* Основной вид: нижняя панель на всю ширину. Так на телефоне и в браузерах без якорного позиционирования.
   Только тоном (--paper над плашками), без рамки и тени. Вход и уход — 150 мс, уход чуть резче. */
.term-popover {
  --lift: var(--panel);
  --popover-y: 16; /* сдвиг входа и ухода в px, читает GSAP */
  position: fixed;
  inset: auto 0 0 0;
  width: auto;
  max-width: none;
  max-height: 70dvh;
  margin: 0;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--paper);
  color: var(--ink);
}
.popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.popover-head h2 { margin: 0.4rem 0 0; font-size: 1.125rem; text-align: left; }
.term-popover p { margin: 0.5rem 0 0; text-wrap: pretty; }

/* Широкий экран: поповер у самого термина, при нехватке места переворачивается. */
@media (width >= 640px) {
  @supports (anchor-name: --a) {
    .term-popover {
      --popover-y: -6;
      position-anchor: --term-anchor;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
      inset: auto;
      margin: 0.375rem 0;
      width: max-content;
      max-width: min(24rem, calc(100vw - 2rem));
      padding: 1rem;
      border-radius: var(--radius-shelf);
    }
  }
}

/* ---------- Наведение, нажатие, движение ---------- */

/* Наведение — только там, где оно есть: iOS держит :hover после нажатия. */
@media (hover: hover) {
  .chip:not(.chip-primary, [aria-pressed="true"]):hover { background: color-mix(in oklab, var(--ink) 8%, var(--lift)); }
  .chip-primary:hover, .chip[aria-pressed="true"]:hover { background: color-mix(in oklab, var(--ink) 14%, var(--accent)); }
  a.track-chip:hover { background: color-mix(in oklab, var(--track, var(--accent)) 32%, var(--panel)); }
  .row-link:hover, .prose summary:hover, .term:hover { background: var(--wash); }
  fieldset:not(:disabled) .option:hover { background: color-mix(in oklab, var(--ink) 10%, var(--sheet)); }
  .pager-link:hover { background: color-mix(in oklab, var(--ink) 6%, var(--panel)); }
  .lesson-name a:hover, a.result-title:hover { text-decoration: underline; }
}

/* Движение — motion.js (GSAP); в CSS остаются только переходы цвета. */
@media (prefers-reduced-motion: reduce) {
  :root { --tier-1: 0ms; --tier-2: 0ms; --tier-3: 0ms; }
}

/* ---------- Учебный кабинет: ясная ось, крупный следующий шаг, компактная карта ---------- */

.brand-mark { position: relative; }
.brand-mark span { right: 0.28rem; bottom: 0.2rem; margin: 0; }
.muted, .page-intro { color: var(--ink-2); }
.eyebrow { font: 600 0.7rem/1.5 var(--font-ui); letter-spacing: 0.11em; text-transform: uppercase; }
.page-intro { max-width: 48rem; text-wrap: pretty; }
.chip-wide { white-space: normal; text-align: left; }
select { display: block; min-width: 0; max-width: 100%; width: 100%; min-height: var(--tap); padding: 0.65rem 2rem 0.65rem 0.8rem; border: 0; border-radius: var(--radius-cell); background: var(--lift); }
select:disabled { opacity: 0.55; }
.dashboard-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-block: 1.5rem 0.6rem; }
.dashboard-heading h1 { margin-block: 0.35rem 0.65rem; font-size: clamp(2rem, 2.5vw, 2.9rem); }
.dashboard-heading .eyebrow { color: var(--accent); }
.dashboard-heading .role-picker { flex: 0 0 21rem; }
.role-picker { display: grid; gap: 0.4rem; max-width: 35rem; }
.role-picker { position: relative; }
.route-explanation { padding-top: 0.2rem; }
/* BarMenu/SettingSelect (Plantick): одинаковые списки, без теней и рамок. */
.menu-select, .nav-more { position: relative; }
.select-field { display: grid; gap: 0.4rem; }
.select-label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); }
.select-now { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; width: 100%; min-height: 2.75rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-cell); background: var(--lift); text-align: left; }
.select-value { min-width: 0; }
.menu-chevron { display: inline-flex; flex: none; color: var(--ink-3); }
.menu-chevron svg { display: block; }
.menu-list { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 35; display: flex; flex-direction: column; gap: 0.15rem; min-width: 11rem; padding: 0.3rem; border-radius: var(--radius-shelf); background: var(--sheet); }
.menu-row { display: flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding-inline: 0.8rem; border-radius: var(--radius-cell); font-size: 0.9375rem; color: var(--ink); text-align: left; text-decoration: none; white-space: nowrap; }
.select-list { left: 0; min-width: 0; max-height: calc(6.5 * 2.75rem + 6 * 0.15rem); overflow-y: auto; overscroll-behavior: contain; }
.select-list > .menu-row { white-space: normal; flex: none; }
.menu-row[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.select-now:disabled { opacity: 0.6; }
@media (hover: hover) {
  .menu-row:not([aria-pressed="true"]):hover { background: color-mix(in oklab, var(--sheet) 88%, var(--ink)); }
}
.role-picker > label { font-size: 0.8rem; font-weight: 600; }
.role-picker > .muted { font-size: 0.75rem; max-width: 33rem; }
.role-picker .form-error:empty { display: none; }
.plate.learning-panel { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 0; padding: 0; overflow: hidden; }
.learning-overview { --lift: color-mix(in oklab, var(--accent-ink) 22%, transparent); display: flex; flex-direction: column; align-items: start; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.7rem); background: var(--accent); color: var(--accent-ink); }
.learning-overview .muted { color: color-mix(in oklab, var(--accent-ink) 84%, transparent); }
.learning-overview h2 { font-size: clamp(1.85rem, 2.5vw, 2.55rem); line-height: 1.2; }
.learning-overview > .eyebrow { opacity: 0.8; }
.learning-overview > .bar { flex: none; width: 100%; background: var(--lift); margin-top: 0.15rem; }
.learning-overview .bar > span { background: var(--accent-ink); }
.learning-overview > .muted:last-child { font-size: 0.8rem; max-width: 30rem; }
.big-count { font-size: 1.85rem; font-weight: 500; line-height: 1.25; margin-top: auto; }
.big-count > span { display: block; font-size: 0.8rem; font-weight: 400; margin-top: 0.25rem; }
.learning-next.shelf { --lift: var(--sheet); display: flex; flex-direction: column; align-items: start; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2.7rem); border-radius: 0; background: var(--panel); }
.learning-next > .eyebrow { color: var(--ink-3); }
.learning-next > h3 { max-width: 30rem; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.35; text-wrap: pretty; }
.learning-next > .muted { max-width: 31rem; font-size: 0.85rem; }
.learning-next > .chip { margin-top: auto; padding-inline: 1.4rem; }
.repeat-link { color: var(--ink-2); font-size: 0.8rem; text-underline-offset: 0.3em; }
.grade-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; margin-block: 0.1rem 0.8rem; }
.grade-step { display: flex; align-items: center; gap: 0.8rem; padding: 1.1rem; background: var(--panel); color: var(--ink); text-decoration: none; }
.grade-step[aria-current="step"] { background: var(--accent-tint); }
.step-number { display: grid; place-content: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--paper); color: var(--ink-2); font-size: 0.85rem; }
.grade-step.is-current .step-number, .grade-step.is-completed .step-number { background: var(--accent); color: var(--accent-ink); }
.step-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.step-text strong { font-size: 0.9rem; }
.step-text .muted { font-size: 0.72rem; }
.grade-step.is-planned { opacity: 0.7; }
@media (width >= 1100px) {
  .plate:has(> #started-heading) > .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tag-earned { color: var(--accent); background: var(--accent-tint); }
.grade-tag { font-size: 0.73rem; color: var(--accent); text-decoration: none; }
.section-heading { display: grid; gap: 0.4rem; margin-bottom: 0.4rem; }
.section-heading h2 { font-size: 1.6rem; }
.section-heading .eyebrow { color: var(--ink-3); }
.section-heading > .muted { font-size: 0.85rem; }
.direction-topics { display: grid; gap: 0.6rem; }
.direction-topics h2 { font-size: 1.4rem; }
.grade-description > .bar { width: min(100%, 32rem); flex: none; }
.grade-description > .tag { justify-self: start; }
.module-grid, .roles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0.8rem; }
.roadmap-module { min-width: 0; }
.roadmap-module > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; cursor: pointer; list-style: none; }
.roadmap-module > summary::-webkit-details-marker { display: none; }
.roadmap-module .module-title { grid-column: 1; font-weight: 600; }
.roadmap-module > summary > .muted { grid-column: 1; font-size: 0.8rem; }
.roadmap-module .details-chevron { grid-column: 2; grid-row: 1 / 3; }
.roadmap-module .details-body { margin-top: 0.9rem; }
.roadmap-module.is-mastered { background: var(--accent-tint); }
.roadmap-module.is-started .module-title::before { content: "● "; color: var(--track-amber); font-size: 0.8rem; }
.roadmap-module .lesson-row { grid-template-columns: 1rem minmax(0, 1fr); padding: 0.85rem; gap: 0.6rem; align-items: start; }
.roadmap-module .lesson-name { flex-direction: column; align-items: start; }
.roadmap-module .lesson-name .tag { padding: 0; background: none; font-size: 0.72rem; color: var(--ink-3); }
.roadmap-module .lesson-minutes { grid-column: 2; font-size: 0.72rem; }
.achievement-list, .competency-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.achievement-list li { padding: 1rem; }
.role-card { min-height: 17rem; align-content: start; }
.role-percent { font-size: 2.1rem; font-weight: 500; }
.role-percent > span { display: block; font-size: 0.8rem; color: var(--ink-3); font-weight: 400; }
.role-card > .bar, .role-summary > .bar { width: 100%; flex: none; }
.role-card > .tag, .role-card > .chip, .role-summary > .chip { justify-self: start; }
.role-summary { max-width: 45rem; }
.competency { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem; padding: 1rem; }
.competency > .bar, .competency > .muted { grid-column: 1 / -1; width: 100%; font-size: 0.75rem; }
.suggestion { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem; }
.suggestion > .muted { font-size: 0.8rem; }
.repeat-filters { max-width: 48rem; }
.repeat-filters > button { justify-self: start; }
.repeat-stage { width: 100%; max-width: 56rem; }
.repeat-question { scroll-margin-top: 1.5rem; }
.repeat-question > .bar { flex: none; width: 100%; }
.repeat-question .option { margin-top: 0.5rem; }
.repeat-question legend { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); padding: 0; margin-block: 0.5rem 0.9rem; }
.repeat-question > button { justify-self: start; }
.repeat-feedback { display: grid; gap: 0.6rem; }
.repeat-empty, .repeat-result { display: grid; gap: 1rem; }
.lesson-next-path { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.lesson-next-path > .chip { justify-self: start; }
.learning-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 30; max-width: min(28rem, calc(100vw - 2rem)); padding: 1rem 1.25rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-shelf); font-size: 0.85rem; }
.achievement-dialog { margin: auto; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); border: 0; color: var(--ink); padding: clamp(1.5rem, 5vw, 3rem); text-align: left; }
.achievement-dialog[open] { display: grid; gap: 1rem; }
.achievement-dialog { background: var(--paper); }
.achievement-dialog::backdrop { background: light-dark(color-mix(in oklab, var(--ink) 30%, transparent), rgb(0 0 0 / 0.6)); }
.achievement-dialog h2 { font-size: 2rem; }
.achievement-symbol { display: grid; place-content: center; width: 4rem; height: 4rem; border-radius: 50%; font-size: 2rem; background: var(--accent-tint); color: var(--accent); }
.achievement-dialog .chip { justify-self: start; }
body[data-route="login"] h1 { text-align: center; }

@media (width >= 1250px) {
  .roles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (width < 1050px) {
  .learning-toast { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .dashboard-heading { flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 1rem; }
  .dashboard-heading .role-picker { flex: auto; }
}
@media (width < 700px) {
  .plate.learning-panel { grid-template-columns: minmax(0, 1fr); }
  .learning-overview, .learning-next.shelf { padding: 1.3rem; gap: 0.85rem; }
  .learning-overview > h2 { font-size: 1.8rem; }
  .learning-overview .big-count { font-size: 1.5rem; }
  .grade-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .grade-step { padding: 0.85rem; gap: 0.55rem; }
  .step-number { width: 1.7rem; height: 1.7rem; }
  .step-text strong { font-size: 0.8rem; }
  .step-text .muted { font-size: 0.67rem; }
  .module-grid, .roles-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-heading h1 { font-size: 1.9rem; }
  .role-card { min-height: 0; }
  .lesson-row { gap: 0.5rem; grid-template-columns: 1.1rem minmax(0, 1fr) auto; }
}

/* Дорожная карта: связи показывают порядок, тон блока — состояние обучения. */
.plate.roadmap-overview { display: flex; align-items: center; gap: 1.4rem; }
.map-overall-percent { font: 600 2.5rem/1 var(--font-display); color: var(--accent); }
.map-overview-text { flex: 1; display: grid; gap: 0.4rem; }
.map-overview-text .muted { font-size: 0.8rem; }
.roadmap-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.6rem; }
.map-grade-filters .chip { font-size: 0.8rem; padding-inline: 0.8rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; font-size: 0.75rem; color: var(--ink-2); }
.map-legend > span { display: inline-flex; gap: 0.4rem; align-items: center; }
.legend-dot { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 0.2rem; background: var(--sheet); }
.legend-dot.is-started { background: var(--track-amber); }
.legend-dot.is-mastered { background: var(--accent); }
.legend-dot.is-optional { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }
.map-help { font-size: 0.8rem; max-width: 65rem; }
.roadmap-canvas { display: grid; gap: 2.2rem; margin-top: 1rem; }
.map-phase { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.6rem; }
.map-phase-head { position: relative; display: flex; flex-direction: column; align-items: start; gap: 0.7rem; padding-left: 2.8rem; padding-top: 0.1rem; }
.map-phase-head::before { content: ""; position: absolute; left: 0.9rem; top: 2.3rem; bottom: -2.3rem; width: 2px; background: var(--sheet); }
.map-phase:last-child .map-phase-head::before { bottom: 0; }
.map-phase-number { position: absolute; left: 0; top: 0; display: grid; place-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.8rem; }
.map-phase-head .eyebrow { color: var(--ink-3); }
.map-phase-head h2 { font-size: 1.25rem; line-height: 1.35; text-align: left; }
.map-phase-head > .muted { font-size: 0.78rem; }
.phase-progress { font-size: 0.75rem; color: var(--ink-2); }
.phase-progress strong { font-size: 1.25rem; color: var(--ink); }
.map-track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1rem; align-items: start; }
.map-track { min-width: 0; }
.map-track-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 2rem; padding-bottom: 0.8rem; }
.map-track-head .muted { font-size: 0.7rem; }
.map-track-head .track-chip { font-size: 0.8rem; }
.map-node-chain { display: grid; gap: 0.65rem; position: relative; padding-left: 0.9rem; }
.map-node-chain::before { content: ""; position: absolute; width: 2px; left: 0.1rem; top: -0.3rem; bottom: 1.7rem; background: var(--sheet); }
.map-node { position: relative; min-width: 0; background: var(--panel); border-radius: var(--radius-shelf); }
.map-node::before { content: ""; position: absolute; left: -0.8rem; top: 1.4rem; width: 0.8rem; height: 2px; background: var(--sheet); }
.map-node.is-started { background: color-mix(in oklab, var(--track-amber) 12%, var(--panel)); }
.map-node.is-mastered { background: var(--accent-tint); }
.map-node.is-locked { background: color-mix(in oklab, var(--panel) 65%, var(--paper)); }
.map-node.is-locked > summary { color: var(--ink-3); }
.map-lesson-list > .is-locked,
.lesson-row.is-locked { color: var(--ink-3); }
.map-lesson-list > .is-locked a,
.lesson-row.is-locked a,
.is-locked .grade-tag { color: var(--ink-3); }
.map-node.is-optional { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
.map-node > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 0.8rem; align-items: center; gap: 0.4rem 0.45rem; padding: 1rem; cursor: pointer; list-style: none; }
.map-node > summary::-webkit-details-marker { display: none; }
.map-node-title { grid-column: 1; font-size: 0.85rem; line-height: 1.35; }
.node-percent { grid-column: 2; font-size: 0.9rem; }
.node-count { grid-column: 1 / 3; font-size: 0.7rem; color: var(--ink-2); }
.map-node .details-chevron { grid-column: 3; grid-row: 1 / 3; }
.node-segments { display: flex; gap: 0.15rem; grid-column: 1 / -1; margin-block: 0.3rem 0.1rem; }
.node-segments > i { flex: 1; height: 0.3rem; border-radius: 1rem; background: var(--sheet); }
.node-segments > .is-started { background: var(--track-amber); }
.node-segments > .is-mastered { background: var(--accent); }
.node-state, .node-missing { font-size: 0.65rem; color: var(--ink-3); }
.node-state { grid-column: 1; }
.node-missing { grid-column: 2 / -1; text-align: right; }
.map-node.is-started .node-state { color: var(--ink-2); }
.map-node.is-mastered .node-state { color: var(--accent); }
.map-lesson-list { list-style: none; margin: 0; padding: 0 0.8rem 0.8rem; display: grid; gap: 0.6rem; }
.map-lesson-list > li { display: grid; grid-template-columns: 0.8rem minmax(0, 1fr); gap: 0.55rem; padding: 0.7rem; background: var(--paper); border-radius: var(--radius-cell); }
.map-lesson-list a { color: var(--ink); font-size: 0.8rem; text-decoration: none; }
.map-lesson-list .muted, .map-lesson-list .lesson-mastered { font-size: 0.65rem; margin-top: 0.35rem; }
.lesson-mastered { color: var(--accent); }
@media (width < 1150px) {
  .map-track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-phase { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.1rem; }
}
@media (width < 700px) {
  .plate.roadmap-overview { flex-wrap: wrap; gap: 0.8rem; }
  .roadmap-overview > .chip { flex: 1 0 100%; }
  .map-overall-percent { font-size: 2rem; }
  .map-phase { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .map-phase-head::before { display: none; }
  .map-phase-head { min-height: 3rem; }
  .map-phase-head > .muted { max-width: 35rem; }
  .map-track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.6rem; }
  .map-node > summary { padding: 0.8rem; }
}
@media (width < 480px) {
  .map-track-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 480px) {
  .site-nav { grid-template-columns: 1.05fr 1.15fr 1.4fr 1.6fr 0.9fr; gap: 0.15rem; padding-inline: 0.35rem; }
}
@media (width < 360px) {
  .site-nav .chip { font-size: 0.68rem; }
  .site-nav .menu-chevron svg { width: 12px; height: 12px; }
}

/* Фаза 3: те же плашки, полки и общие меню; раскладка новых разделов. */
.small { font-size: 0.8125rem; }
.split-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.metric { display: grid; gap: 0.5rem; color: var(--ink); text-decoration: none; min-width: 0; }
.metric-label { color: var(--ink-2); font-size: 0.875rem; }
.metric-value { display: block; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metric .muted { font-size: 0.8125rem; }
.report-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 1rem; }
.report-grid > *, .transfer-grid > *, .home-pulse > * { min-width: 0; }
.report-wide { grid-column: 1 / -1; }
.chart-box { position: relative; height: 16rem; min-width: 0; }
.chart-lines { height: 21rem; }
.chart-probe { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.goal-progress { display: grid; gap: 0.7rem; }
.data-details { min-width: 0; }
.data-details > summary { display: flex; align-items: center; gap: 0.65rem; min-height: var(--tap); list-style: none; cursor: pointer; color: var(--ink-2); font-size: 0.875rem; }
.data-details > summary::-webkit-details-marker { display: none; }
.data-details > .details-body { display: grid; gap: 0.8rem; }
.table-scroll, .calendar-scroll { max-width: 100%; min-width: 0; overflow-x: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0 0.25rem; text-align: left; font-size: 0.8125rem; }
.data-table :is(th, td) { padding: 0.5rem; }
.data-table th { font-weight: 500; color: var(--ink-2); }
.data-table td { background: var(--lift); }
.data-table td:first-child { border-radius: var(--radius-cell) 0 0 var(--radius-cell); }
.data-table td:last-child { border-radius: 0 var(--radius-cell) var(--radius-cell) 0; }
.activity-calendar { display: grid; grid-template-rows: repeat(7, 0.85rem); grid-auto-flow: column; grid-auto-columns: 0.85rem; gap: 0.25rem; width: max-content; }
.activity-day { background: var(--sheet); border-radius: 3px; }
.activity-day[data-level="1"] { background: color-mix(in oklab, var(--accent) 25%, var(--sheet)); }
.activity-day[data-level="2"] { background: color-mix(in oklab, var(--accent) 45%, var(--sheet)); }
.activity-day[data-level="3"] { background: color-mix(in oklab, var(--accent) 70%, var(--sheet)); }
.activity-day[data-level="4"] { background: var(--accent); }
.forecast-row { display: grid; gap: 0.4rem; padding: 0.85rem 1rem; }
.forecast-row > strong { font-size: 0.9375rem; }
.transfer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.work-list, .review-preview, .assessment-stage, .assessment-form, .import-summary { display: grid; gap: 1rem; }
.review-preview:empty, .import-summary:empty { display: none; }
.review-feedback, .exam-panel { display: grid; gap: 0.6rem; padding: 1rem; }
.work-list h2 { font-size: 1.2rem; }
.answer { overflow-wrap: anywhere; }
.import-counts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1rem; margin: 0; font-size: 0.8125rem; }
.import-counts dd { margin: 0; font-variant-numeric: tabular-nums; }
.assessment-filters { display: grid; grid-template-columns: 1fr 1.4fr 0.75fr; gap: 0.8rem; }
.assessment-question { min-width: 0; }
.assessment-question fieldset { min-width: 0; }
.assessment-progress { display: grid; gap: 0.5rem; }
.assessment-history { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.85rem 1rem; }
.exam-panel input { max-width: 100%; }
input[type="file"] { max-width: 100%; font-size: 0.875rem; }
input[type="file"]::file-selector-button { border: 0; border-radius: var(--radius-chip); min-height: var(--tap); padding: 0.4rem 1rem; margin-right: 0.7rem; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.home-pulse { display: grid; grid-template-columns: 0.9fr 0.9fr 1.2fr; gap: 0.75rem; }
.home-pulse > .plate { display: grid; align-content: start; gap: 0.65rem; }
.home-pulse h2 { font-size: 1.4rem; }
.home-pulse a { font-size: 0.8125rem; }
.mini-readiness { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1rem; }
.mini-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.25rem 0.5rem; color: var(--ink); text-decoration: none; }
.mini-role > span:first-child { font-size: 0.7rem; line-height: 1.3; }
.mini-role strong { font-size: 0.75rem; }
.mini-role > .bar { grid-column: 1 / -1; }
#more-menu { max-height: min(calc(6.5 * 2.75rem + 6 * 0.15rem), 70dvh); overflow-y: auto; overscroll-behavior: contain; }
#more-menu > .menu-row { flex: none; }
@media (width < 900px) {
  .report-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .home-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-pulse > :last-child { grid-column: 1 / -1; }
  .mini-readiness { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (width < 650px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-grid, .transfer-grid, .assessment-filters { grid-template-columns: minmax(0, 1fr); }
  .chart-lines { height: 25rem; }
  .mini-readiness { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width < 380px) {
  .home-pulse { grid-template-columns: minmax(0, 1fr); }
}
/* Ссылки на знания, на которые опирается урок. */
.lesson-prerequisites h2 { font-size: 1.25rem; margin-block: 0 .5rem; }
.lesson-prerequisites ul { padding-inline-start: 1.25rem; margin-block: .75rem 0; }
.lesson-prerequisites li { margin-block: .5rem; }
.lesson-prerequisites li span { display: block; font-size: .8rem; }

/* На широком ПК карта использует место для четвёртой колонки веток. */
@media (width >= 1600px) {
  body[data-route="roadmap"] .page { width: min(100% - 3rem, 110rem); }
  .map-track-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Состав направления: категории относятся к отдельным урокам, а не ко всей ветке. */
.curriculum-badge { --curriculum-color: var(--ink-3); display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-chip); background: color-mix(in oklab, var(--curriculum-color) 12%, var(--panel)); color: var(--curriculum-color); font-size: 0.72rem; font-weight: 500; line-height: 1.4; }
.curriculum-profile { --curriculum-color: var(--curriculum-profile); }
.curriculum-prerequisite { --curriculum-color: var(--curriculum-prerequisite); }
.curriculum-preparation { --curriculum-color: var(--curriculum-preparation); }
.curriculum-badge::before { content: ""; flex: none; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; }
.curriculum-outside::before { display: none; }
.curriculum-counts { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.row-text > .curriculum-counts { margin-top: 0.5rem; }
.curriculum-context { display: flex; flex-wrap: wrap; align-items: start; gap: 0.3rem 0.6rem; margin-top: 0.35rem; min-width: 0; }
.lesson-name > .curriculum-context { flex-basis: 100%; }
.curriculum-reason { flex-basis: 100%; min-width: 0; font-size: 0.78rem; color: var(--ink-2); }
.curriculum-reason > summary { cursor: pointer; padding-block: 0.25rem; width: fit-content; }
.curriculum-reason > ul { display: grid; gap: 0.4rem; margin: 0.3rem 0 0.5rem; padding-left: 1.1rem; }
.curriculum-reason a { text-decoration: underline; text-underline-offset: 0.16em; }
.curriculum-reason summary:focus-visible { background: var(--wash); border-radius: var(--radius-cell); }
.map-track-head > .curriculum-counts { flex-basis: 100%; }
.map-node > summary > .curriculum-counts, .roadmap-module > summary > .curriculum-counts { grid-column: 1 / -1; }
.map-node .curriculum-counts .curriculum-badge { font-size: 0.65rem; padding: 0.15rem 0.4rem; }
.map-lesson-list .curriculum-reason a { color: var(--ink-2); font-size: 0.72rem; text-decoration: underline; }
.map-lesson-list .curriculum-reason > summary { font-size: 0.72rem; }
.lesson-head > .curriculum-context { margin-top: 0; }

/* Доступность отделена от цветных категорий программы и статуса освоения. */
.lock-badge { display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content; padding: 0.2rem 0.5rem; border-radius: var(--radius-chip); background: var(--paper); color: var(--ink-2); font-size: 0.72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.lock-badge-icon { display: inline-flex; flex: none; }
.lock-badge-icon svg { display: block; width: 0.9rem; height: 0.9rem; }
.map-node.is-locked, .roadmap-module.is-locked, .lesson-row.is-locked,
.map-lesson-list > .is-locked, [data-learning-library] .shelf.is-locked,
.locked-lesson, .pager-link.is-locked { background: var(--locked-surface); color: var(--ink-2); }
.map-node.is-locked > summary, .roadmap-module.is-locked > summary,
.map-lesson-list > .is-locked a, .lesson-row.is-locked a { color: var(--ink-2); }
.map-node > summary > .lock-badge, .roadmap-module > summary > .lock-badge { grid-column: 1 / -1; justify-self: start; }
.map-lesson-list .lock-badge { display: flex; margin-block: 0.3rem 0.15rem; font-size: 0.65rem; }
.map-lesson-list > .is-locked,
.roadmap-module.is-locked .lesson-row.is-locked { background: color-mix(in oklab, var(--paper) 80%, var(--locked-surface)); }
.locked-lesson > .lock-badge, .pager-link > .lock-badge { justify-self: start; }

/* Инструкция доступна из шапки; объяснения собраны по задачам. */
.help-toggle { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; font: italic 600 1.35rem/1 var(--font-display); }
.status-comment { color: var(--ink-2); }

/* Учебный чат: та же плашка и полки, что у урока, без перекрытия шапки. */
.assistant-launcher { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40; }
.assistant-panel { position: fixed; z-index: 45; right: 1rem; bottom: 4.75rem; width: min(30rem, calc(100vw - 2rem)); height: min(46rem, calc(100dvh - 7rem)); display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 1rem; overflow: hidden; }
.assistant-heading, .assistant-tabs, .assistant-compose-actions { display: flex; gap: 0.4rem; align-items: center; }
.assistant-heading { justify-content: space-between; }
.assistant-heading h2 { font-size: 1.1rem; margin: 0; }
.assistant-heading .act { font-size: 1.5rem; }
.assistant-tabs { flex-wrap: wrap; }
.assistant-tabs .chip { min-height: 2.3rem; padding: 0.4rem 0.8rem; }
.assistant-tabs [aria-pressed="true"] { background: var(--accent-tint); }
.assistant-messages, .assistant-memory { overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.assistant-question, .assistant-reply { margin: 0 0 0.75rem; padding: 0.8rem; overflow-wrap: anywhere; }
.assistant-question { margin-left: 2rem; background: var(--accent-tint); }
.assistant-reply { margin-right: 0.5rem; }
.assistant-question p, .assistant-reply p { margin: 0 0 0.5rem; white-space: pre-wrap; }
.assistant-question p:last-child, .assistant-reply p:last-child { margin-bottom: 0; }
.assistant-answer { min-width: 0; line-height: 1.55; }
.assistant-answer p { white-space: normal; }
.assistant-answer > :first-child { margin-top: 0; }
.assistant-answer > :last-child { margin-bottom: 0; }
.assistant-answer pre { max-width: 100%; overflow: auto; font-size: 0.8rem; white-space: pre; overflow-wrap: normal; }
.assistant-answer pre code { font-size: inherit; }
.assistant-answer ul, .assistant-answer ol { margin: 0.5rem 0; padding-left: 1.25rem; }
.assistant-answer li + li { margin-top: 0.35rem; }
.assistant-answer :is(h1, h2, h3, h4, h5, h6) { margin: 0.85rem 0 0.5rem; font-size: 1rem; line-height: 1.4; }
.assistant-answer :is(h1, h2) { font-size: 1.1rem; }
.assistant-answer :not(pre) > code { padding: 0.1rem 0.25rem; border-radius: 0.2rem; background: var(--lift); font-size: 0.9em; }
.assistant-answer blockquote { margin: 0.75rem 0; padding: 0.5rem 0.75rem; background: var(--wash); border-radius: var(--radius-cell); color: var(--ink-2); }
.assistant-answer hr { border: 0; height: 1px; margin: 1rem 0; background: var(--line); }
.assistant-answer input[type="checkbox"] { width: 1em; height: 1em; margin-right: 0.3em; vertical-align: middle; }
.assistant-table { margin: 0.75rem 0; }
.assistant-table table { width: 100%; border-collapse: separate; border-spacing: 0 0.2rem; font-size: 0.85rem; }
.assistant-table :is(th, td) { padding: 0.4rem 0.6rem; vertical-align: top; }
.assistant-table td { background: var(--wash); }
.assistant-table [align="left"] { text-align: left; }
.assistant-table [align="center"] { text-align: center; }
.assistant-table [align="right"] { text-align: right; }
.assistant-code { margin: 0.75rem 0; background: var(--wash); }
.assistant-code-bar { justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; }
.assistant-code-bar .chip { min-height: 2rem; padding: 0.3rem 0.65rem; font-size: 0.75rem; white-space: normal; }
.assistant-sources, .assistant-starters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.75rem; }
.assistant-sources .chip, .assistant-starters .chip { white-space: normal; height: auto; font-size: 0.8rem; text-align: left; }
.assistant-composer { margin: 0; }
.assistant-composer textarea, .assistant-memory textarea { width: 100%; min-height: 4.5rem; max-height: 10rem; resize: vertical; }
.assistant-compose-actions { justify-content: space-between; margin-top: 0.5rem; }
.assistant-context, .assistant-notice { margin: 0; }
.assistant-notice:empty { display: none; }
.assistant-memory h3 { margin: 1rem 0 0.5rem; font-size: 1rem; }
.assistant-memory h3:first-child { margin-top: 0; }
.assistant-memory p { font-size: 0.875rem; }
.assistant-memory form, .assistant-memory label { display: grid; gap: 0.5rem; }
.assistant-history { display: grid; gap: 0.4rem; }
.assistant-thread { display: block; text-align: left; white-space: normal; }
@media (max-width: 540px) {
  .assistant-panel { inset: auto 0.5rem max(0.5rem, env(safe-area-inset-bottom)); width: auto; height: min(42rem, calc(100dvh - 1rem)); }
  .assistant-launcher { right: 0.75rem; bottom: max(0.75rem, env(safe-area-inset-bottom)); }
}
.help-toggle:focus-visible, .help-topics .chip:focus-visible { background: var(--accent); color: var(--accent-ink); }
.help-topics { max-width: 60rem; }
.help-topics .chip { font-size: 0.8rem; }
.help-sections { display: grid; gap: 0.8rem; max-width: 60rem; }
.help-section { margin: 0; padding: 1.1rem 1.4rem; }
.help-sections.prose > details.help-section { width: 100%; margin: 0; }
.help-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; scroll-margin-top: 1rem; }
.help-section > summary h2 { margin: 0; font-size: 1.25rem; }
.help-section > summary:hover, .help-section > summary:focus-visible { background: transparent; color: var(--accent); }
.help-section > summary:focus-visible h2 { text-decoration: underline; text-underline-offset: 0.2em; }

/* Клавиатурный фокус без новых рамок и прямоугольных подложек. */
:where(a, button, summary):focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
:where(input:not([type="radio"], [type="checkbox"]), textarea, select):focus-visible { background: color-mix(in oklab, var(--accent) 10%, var(--paper)); }
.option:has(input:focus-visible) { background: color-mix(in oklab, var(--accent) 12%, var(--paper)); }
label:has(> input:is([type="checkbox"], [type="radio"]):focus-visible) { text-decoration: underline; text-underline-offset: 0.22em; }
.help-section .details-body > :first-child { margin-top: 1rem; }
.help-section .details-body > :last-child { margin-bottom: 0; }
.help-categories p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
@media (width < 480px) {
  .help-section { padding: 0.85rem 1rem; }
  .help-section > summary h2 { font-size: 1.1rem; }
}