/* ===================================================================
   EA Part 2 — учебный корпус
   Визуальный язык: бланк налоговой формы и бухгалтерская ведомость.
   Подписанные поля, тонкие линейки, колонка сумм справа.
   =================================================================== */

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

:root {
  --paper:      #FBFBF8;
  --paper-sunk: #F2F3EE;   /* утопленные поля бланка */
  --ink:        #22252A;
  --ink-soft:   #5A6066;
  --ink-faint:  #868D93;
  --rule:       #C7CDC7;
  --rule-hair:  #E1E5DF;
  --ledger:     #DCE8DC;   /* полоса ведомости */
  --accent:     #17604A;   /* нумерация, активное состояние */
  --accent-pale:#E8F0EA;
  --stamp:      #9A2B2B;   /* штемпель: только ловушки */
  --stamp-pale: #F6EAEA;
  --on-accent:  #FFFFFF;   /* текст поверх заливки акцентом */

  --serif: "Source Serif 4", "Source Serif Pro", Cambria, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --measure: 36em;         /* длина строки прозы, < 80 знаков */
  --gap:     1.5rem;

  color-scheme: light;
}

/* Тёмная тема — набор токенов повторяется дважды намеренно.

   Первый блок отвечает на системную настройку, но отступает, если
   читатель явно выбрал светлую. Второй срабатывает от кнопки и должен
   победить даже на светлой системе. В чистом CSS без препроцессора
   переиспользовать один набор нельзя, поэтому значения продублированы:
   при правке менять оба блока. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #16191A;
    --paper-sunk: #1E2223;
    --ink:        #E3E6E2;
    --ink-soft:   #A8AEAB;
    --ink-faint:  #7C8380;
    --rule:       #3A403C;
    --rule-hair:  #2A2F2C;
    --ledger:     #1F2A22;
    --accent:     #6FB394;
    --accent-pale:#1C2A24;
    --stamp:      #D98A8A;
    --stamp-pale: #2A1E1E;
    --on-accent:  #101713;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:      #16191A;
  --paper-sunk: #1E2223;
  --ink:        #E3E6E2;
  --ink-soft:   #A8AEAB;
  --ink-faint:  #7C8380;
  --rule:       #3A403C;
  --rule-hair:  #2A2F2C;
  --ledger:     #1F2A22;
  --accent:     #6FB394;
  --accent-pale:#1C2A24;
  --stamp:      #D98A8A;
  --stamp-pale: #2A1E1E;
  --on-accent:  #101713;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 40em) { body { font-size: 16px; } }

p { max-width: var(--measure); margin: 0 0 0.9em; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

strong { font-weight: 600; }
em.term { font-style: normal; color: var(--ink-soft); }

/* Английский термин рядом с русским переводом */
.orig { color: var(--ink-soft); font-size: 0.92em; }

/* Ссылка на норму или публикацию */
.cite {
  font-family: var(--sans);
  font-size: 0.78em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---------- Переключение языка --------------------------------------- */

html[data-lang="ru"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="ru"] { display: none; }

/* Инлайновые элементы не должны становиться блоками при показе */
html[data-lang="ru"] span[lang="ru"],
html[data-lang="en"] span[lang="en"] { display: inline; }

/* ---------- Верхняя панель ------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.5rem 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.86rem;
}

/* Три строки шапки на телефоне съедали 128 px, и вместе с липкой строкой
   разделов постоянная обстановка занимала пятую часть экрана. Порядок
   меняется так, чтобы переключатели поднялись к названию: остаётся две
   строки, ничего не убирая. */
@media (max-width: 40em) {
  .topbar { row-gap: 0.35rem; padding: 0.45rem 1.25rem; }
  .topbar__mark { order: 1; }
  .switches { order: 2; }
  .topbar nav { order: 3; flex-basis: 100%; gap: 0.9rem; }
}

.topbar__mark {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

.topbar nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.topbar nav a { color: var(--ink-soft); text-decoration: none; }
.topbar nav a:hover { color: var(--accent); text-decoration: underline; }
.topbar nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ===================================================================
   Тренажёр

   Вопрос, варианты и разбор берут готовые классы .q / .opt / .why со
   страницы модуля: тренажёр — тот же материал в другом режиме, и
   выглядеть он должен так же. Здесь только то, чего в модуле нет:
   экран настройки, строка состояния захода и экран итога.
   =================================================================== */

.trainer > div[hidden] { display: none !important; }

.tr__group { margin: 0 0 2.2rem; }
.tr__group h2 {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
}

.tr__group--row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 40em) { .tr__group--row { grid-template-columns: 1fr; gap: 1.6rem; } }

/* --- выбор модулей --- */

.tr__mods { display: grid; border-top: 1px solid var(--rule-hair); }

.tr__mod {
  display: grid;
  grid-template-columns: auto 2rem 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid var(--rule-hair);
  font-family: var(--sans);
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--ink-faint);
}
.tr__mod.is-on { color: var(--ink); }
.tr__mod input { margin: 0; accent-color: var(--accent); }
.tr__mod-no { font-weight: 600; color: inherit; }
.tr__mod.is-on .tr__mod-no { color: var(--accent); }
.tr__mod-n { font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.tr__modacts { display: flex; gap: 1rem; margin-top: 0.5rem; }

.tr__link {
  font: inherit;
  font-family: var(--sans);
  font-size: 0.85rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-soft);
  cursor: pointer;
}
.tr__link:hover { color: var(--accent); text-decoration: underline; }

/* --- отбор --- */

.tr__filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (max-width: 34em) { .tr__filters { grid-template-columns: 1fr; } }

.tr__filter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font: inherit;
  font-family: var(--sans);
  font-size: 0.92rem;
  text-align: left;
  padding: 0.55rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
}
.tr__filter:hover { border-color: var(--accent); }
.tr__filter.is-on { border-color: var(--accent); background: var(--accent-pale); font-weight: 500; }

/* Пустая корзина не прячется: ноль рядом с «с ошибкой» — сам по себе ответ. */
.tr__filter.is-empty { color: var(--ink-faint); }
.tr__filter-n { font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.tr__filter.is-on .tr__filter-n { color: var(--accent); }

/* --- объём и порядок --- */

.tr__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tr__chip {
  font: inherit;
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.35rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
}
.tr__chip:hover { border-color: var(--accent); }
.tr__chip.is-on { border-color: var(--accent); background: var(--accent-pale); font-weight: 500; }

/* --- запуск --- */

.tr__start {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem 0 2.5rem;
}

.tr__go {
  font: inherit;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1.6rem;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  cursor: pointer;
}
.tr__go:hover:not([disabled]) { filter: brightness(1.08); }
.tr__go[disabled] { opacity: 0.45; cursor: default; }
.tr__go--quiet { background: none; color: var(--ink); border-color: var(--rule); }
.tr__go--quiet:hover { border-color: var(--accent); color: var(--accent); }

.tr__will { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); }
.tr__empty { font-family: var(--sans); color: var(--ink-soft); }

/* --- история заходов --- */

.tr__runs table {
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.88rem;
}
.tr__runs th, .tr__runs td {
  text-align: left;
  padding: 0.35rem 1.2rem 0.35rem 0;
  border-bottom: 1px solid var(--rule-hair);
}
.tr__runs thead th { color: var(--ink-faint); font-weight: 500; font-size: 0.8rem; }
.tr__runs-pct { font-variant-numeric: tabular-nums; }

/* --- заход --- */

.run__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  margin-bottom: 1.4rem;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.88rem;
}
.run__pos { font-weight: 600; }
.run__tally { display: flex; gap: 0.9rem; font-variant-numeric: tabular-nums; }
.run__ok { color: var(--accent); }
.run__no { color: var(--stamp); }
.run__pct { color: var(--ink-soft); }

.trainer .q { border-bottom: 0; padding-top: 0; }
.opt.is-picked { border-color: var(--accent); background: var(--accent-pale); }

.run__where {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
}

.run__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.4rem 0 0; }

.run__flag, .run__sure, .run__next {
  font: inherit;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.run__flag.is-on { border-color: var(--stamp); color: var(--stamp); background: var(--stamp-pale); }
.run__sure[disabled] { opacity: 0.4; cursor: default; }
.run__sure:not([disabled]):hover { border-color: var(--accent); }
.run__sure--yes:not([disabled]) { border-color: var(--ink); }
.run__next {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}

.run__move { display: flex; justify-content: space-between; margin: 1.2rem 0 0; }
.run__quit { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule-hair); }

/* --- итог --- */

.done__head { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }

.done__pct {
  font-family: var(--sans);
  font-size: clamp(2.6rem, 9vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.done__lines p { margin: 0 0 0.3rem; font-family: var(--sans); font-size: 0.95rem; }
.done__sure { color: var(--ink-soft); font-size: 0.87rem !important; max-width: 34em; }

.done__strip { display: flex; gap: 3px; margin: 0 0 2.5rem; flex-wrap: wrap; }
.done__tick { width: 10px; height: 26px; background: var(--rule); }
.done__tick.is-ok { background: var(--accent); }
.done__tick.is-no { background: var(--stamp); }
.done__tick.is-skip { background: var(--rule); }

.done__secs {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.done__secs th, .done__secs td {
  text-align: left;
  padding: 0.45rem 0.8rem 0.45rem 0;
  border-bottom: 1px solid var(--rule-hair);
  font-weight: 400;
}
.done__secs thead th { color: var(--ink-faint); font-size: 0.8rem; }
.done__secs tbody td { font-variant-numeric: tabular-nums; width: 5.5rem; }
.done__secs tbody th a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.done__secs tbody th a:hover { border-bottom-color: var(--accent); }

.done__item { border-bottom: 1px solid var(--rule-hair); }
.done__item > summary {
  display: grid;
  grid-template-columns: 1.4rem 1.6rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0.2rem;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  list-style: none;
}
.done__item > summary::-webkit-details-marker { display: none; }
.done__item[open] > summary { font-weight: 500; }
.done__no { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.done__stem { color: var(--ink); }
.done__mark { font-weight: 600; }
.done__mark.is-ok { color: var(--accent); }
.done__mark.is-no { color: var(--stamp); }
.done__mark.is-skip { color: var(--ink-faint); }
.done__item .q { padding: 0.4rem 0 1.2rem 3rem; }
@media (max-width: 40em) { .done__item .q { padding-left: 0; } }
.done__item .opt { cursor: default; }

.done__acts { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 2.5rem 0 0; }

/* ---------- Список модулей в верхней панели --------------------------

   Нативный <details>: открывается щелчком и клавиатурой без единой
   строки состояния в JS. Панель липкая, поэтому список доступен на
   любой прокрутке — ради этого он здесь, а не только внизу страницы. */

.modmenu { position: relative; }

.modmenu > summary {
  list-style: none;
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.modmenu > summary::-webkit-details-marker { display: none; }
.modmenu > summary:hover { color: var(--accent); }
.modmenu[open] > summary { color: var(--ink); font-weight: 500; }
.modmenu__chev { font-size: 0.62em; color: var(--ink-faint); display: inline-block; }
.modmenu[open] .modmenu__chev { transform: rotate(180deg); }

.modmenu__list {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: -0.75rem;
  z-index: 30;
  width: min(26rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: 0.35rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.modmenu__list a,
.modmenu__soon {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.1rem 0.5rem;
  padding: 0.4rem 0.9rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
}
.modmenu__list a:hover { background: var(--accent-pale); text-decoration: none; }
.modmenu__list a[aria-current="page"] { background: var(--accent-pale); font-weight: 500; }
.modmenu__no { font-weight: 600; color: var(--accent); }
.modmenu__soon { color: var(--ink-faint); }
.modmenu__soon .modmenu__no { color: var(--ink-faint); }

.modmenu__all {
  grid-template-columns: 1fr !important;
  border-bottom: 1px solid var(--rule-hair);
  margin-bottom: 0.35rem;
  color: var(--ink-soft) !important;
}

/* ---------- Переход к соседнему модулю ------------------------------- */

.modnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1rem;
  margin: 3rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.88rem;
}

.modnav__step {
  color: var(--ink);
  text-decoration: none;
  display: block;
  max-width: 18em;
}
.modnav__step:hover { color: var(--accent); }
.modnav__step:last-child { grid-column: 3; text-align: right; margin-left: auto; }
.modnav__no { display: block; font-weight: 600; color: var(--accent); font-size: 0.8rem; }
.modnav__all { color: var(--ink-soft); text-decoration: none; white-space: nowrap; align-self: center; }
.modnav__all:hover { color: var(--accent); }
.modnav__end { display: block; }

@media (max-width: 40em) {
  .modnav { grid-template-columns: 1fr; gap: 0.8rem; }
  .modnav__step:last-child { grid-column: 1; text-align: left; margin-left: 0; }
  .modnav__end { display: none; }
}

.switches { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }

.langswitch, .themeswitch { display: flex; border: 1px solid var(--rule); }

.langswitch button, .themeswitch button {
  font: inherit;
  font-weight: 500;
  padding: 0.15rem 0.7rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.5;
}

.langswitch button + button,
.themeswitch button + button { border-left: 1px solid var(--rule); }

.langswitch button[aria-pressed="true"],
.themeswitch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

.themeswitch button { padding: 0.15rem 0.55rem; }

/* ---------- Сетка страницы модуля ------------------------------------ */

.wrap { max-width: 76rem; margin: 0 auto; padding: 2rem 1.25rem 5rem; }

.layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; }

@media (max-width: 62em) {
  /* minmax(0, 1fr), а не 1fr: по умолчанию колонка грида не сжимается
     ниже min-content своего содержимого, и широкая таблица растягивает
     всю страницу, вызывая горизонтальную прокрутку body. */
  .layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* То же на уровне детей: без min-width:0 прокрутка внутри .scroller
   не спасает — элемент всё равно требует ширину своей таблицы. */
.layout > * { min-width: 0; }
.scroller { min-width: 0; }

/* ---------- Шапка-бланк ---------------------------------------------- */

.sheet {
  border: 1.5px solid var(--ink);
  margin-bottom: 2.5rem;
  background: var(--paper);
}

.sheet__title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--ink);
}

.sheet__no {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.sheet__title h1 {
  font-family: var(--sans);
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 26em;
}

/* Подписанные поля, как в верхней части налоговой формы */
.sheet__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.field { padding: 0.55rem 1.1rem; border-right: 1px solid var(--rule-hair); }
.field:last-child { border-right: 0; }

.field dt {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}

.field dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.4;
}

@media (max-width: 40em) {
  .field { border-right: 0; border-top: 1px solid var(--rule-hair); }
}

/* Сноска соответствия учебнику — появляется только если есть xref.local.js */
.xref {
  padding: 0.4rem 1.1rem;
  border-top: 1px solid var(--rule-hair);
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* ---------- Боковое оглавление --------------------------------------- */

.toc { font-family: var(--sans); font-size: 0.84rem; }

@media (min-width: 62.01em) {
  .toc { position: sticky; top: 4rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; }
}

.toc h2 {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}

.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-top: 1px solid var(--rule-hair); }
.toc a {
  display: block;
  padding: 0.4rem 0;
  color: var(--ink-soft);
  text-decoration: none;
}
.toc a:hover { color: var(--accent); }
.toc a.is-current { color: var(--ink); font-weight: 500; }
.toc a.is-current::before {
  content: "";
  display: inline-block;
  width: 3px; height: 0.8em;
  margin-right: 0.5rem;
  vertical-align: -0.05em;
  background: var(--accent);
}

/* ---------- Переключатель разделов на узком экране --------------------

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

   Высоты обеих липких полос считает app.js и кладёт в переменные:
   верхняя панель переносит строки на узком экране, и угадать её высоту
   в CSS нельзя. Из тех же переменных берётся отступ прокрутки к якорю,
   иначе заголовок раздела уезжает под панели. */

.toc__toggle { display: none; }

@media (max-width: 62em) {
  .toc {
    position: sticky;
    top: var(--topbar-h, 3rem);
    z-index: 10;
    margin: 0 -1.25rem 1.5rem;
    padding: 0 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }

  .toc h2 { display: none; }

  .toc__toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .toc__now {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .toc__chev {
    flex: none;
    color: var(--ink-faint);
    font-size: 0.7em;
  }
  .toc.is-open .toc__chev { transform: rotate(180deg); }

  .toc ol { display: none; }
  .toc.is-open ol {
    display: block;
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: 0.5rem;
  }

  /* Крупнее для пальца: минимальная цель нажатия. */
  .toc a { padding: 0.6rem 0; }
}

/* Части внутри подраздела. Появились там, где правила двух методов идут
   вперемешку: область действия должна задаваться структурой, а не оговоркой
   в каждом абзаце. Заголовок части тяжелее обычного и отбит линией сверху. */
h3.part {
  margin: 3.4rem 0 0.9rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--rule);
  font-family: var(--sans);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.part__note {
  margin: 0 0 1.8rem;
  max-width: 34em;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- Заголовки разделов --------------------------------------- */

.sub { margin: 3rem 0 1.2rem;
  scroll-margin-top: calc(var(--topbar-h, 3rem) + var(--tocbar-h, 0px) + 1rem); }
.sub:first-child { margin-top: 0; }

.sub h2 {
  font-family: var(--sans);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 1.5px solid var(--ink);
  max-width: var(--measure);
}

.sub h2 .num { color: var(--accent); margin-right: 0.5rem; }

h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  margin: 2rem 0 0.6rem;
  max-width: var(--measure);
}

/* ---------- Вводный концептуальный блок ------------------------------ */

.concept {
  background: var(--accent-pale);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.3rem;
  margin: 0 0 2.5rem;
}

.concept h2 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.concept p:last-child { margin-bottom: 0; }

/* ---------- Таблицы правил ------------------------------------------- */

table { border-collapse: collapse; width: 100%; margin: 1.2rem 0 1.8rem; }

.scroller { overflow-x: auto; margin: 1.2rem 0 1.8rem; }
.scroller table { margin: 0; }

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule-hair);
}

thead th {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 0.35rem;
}

tbody th {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  width: 34%;
}

td { font-size: 0.95rem; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

/* Узкий первый столбец для нумерованных перечней */
table.numbered tbody th { width: 2.5rem; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- Расчётный пример: строки ведомости ------------------------ */

.example {
  border: 1px solid var(--rule);
  margin: 1.5rem 0 2rem;
  background: var(--paper);
}

.example__head {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunk);
}

/* Расчётные таблицы примеров и самопроверок не влезают в 360 px: прокрутка
   остаётся внутри блока, иначе вбок едет вся страница. */
.example__body, details.check > div { overflow-x: auto; }
.example__body { padding: 0.9rem; }
.example__body > p { font-size: 0.95rem; }
.example__body > p:last-of-type { margin-bottom: 0; }

.ledger { width: 100%; border-collapse: collapse; margin: 0.8rem 0 0; }

.ledger td {
  padding: 0.3rem 0.6rem;
  border-bottom: 0;
  font-size: 0.95rem;
}

.ledger tbody tr:nth-child(odd) { background: var(--ledger); }

.ledger td:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 1%;
  font-weight: 500;
}

/* Итоговая строка всегда без полосы, независимо от её чётности.
   Селектор специально повторяет вес правила :nth-child(odd) выше —
   иначе полоса выигрывает по специфичности и итог оказывается зелёным. */
.ledger tbody tr.total { background: var(--paper); }

.ledger tr.total td {
  border-top: 1px solid var(--ink);
  font-weight: 600;
}

.ledger tr.total td:last-child { border-bottom: 3px double var(--ink); }

/* ---------- Ловушка: красный штемпель --------------------------------- */

.trap {
  border: 1px solid var(--stamp);
  background: var(--stamp-pale);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0 2rem;
}

.trap h3 {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--stamp);
  margin: 0 0 0.5rem;
}

.trap p:last-child { margin-bottom: 0; }
.trap p { max-width: 40em; }

/* ---------- Схема-развилка -------------------------------------------- */

.fork {
  font-family: var(--sans);
  font-size: 0.88rem;
  margin: 1.5rem 0 2rem;
  display: grid;
  gap: 0.6rem;
}

.fork__q {
  padding: 0.5rem 0.8rem;
  border: 1.5px solid var(--ink);
  font-weight: 600;
  justify-self: start;
}

.fork__branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; }

.fork__b {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper-sunk);
}

.fork__b b { display: block; font-weight: 600; margin-bottom: 0.1rem; }
.fork__b--no { border-left-color: var(--stamp); }

/* ---------- Ловушки списком и «Проверь себя» -------------------------- */

.pitfalls { margin: 2.5rem 0; }

details.check {
  border-top: 1px solid var(--rule-hair);
  padding: 0.5rem 0;
}

details.check summary {
  cursor: pointer;
  font-size: 0.97rem;
  max-width: var(--measure);
}

details.check summary::marker { color: var(--accent); }
details.check > div { padding: 0.5rem 0 0.3rem 1.2rem; font-size: 0.95rem; color: var(--ink-soft); }
details.check > div p { max-width: 34em; }

/* ---------- Тренажёр --------------------------------------------------- */

.quiz { margin: 3.5rem 0 0; border-top: 1.5px solid var(--ink); padding-top: 1.5rem; }

.quiz__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.quiz__head h2 { font-family: var(--sans); font-size: 1.1rem; font-weight: 600; margin: 0; }

.quiz__score {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.quiz__advice {
  margin: 1.6rem 0 0.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper-soft, transparent);
}

.quiz__advice-head {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.quiz__advice ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }

.quiz__advice li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.95rem;
}

.quiz__advice a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.quiz__advice a:hover { border-bottom-color: var(--accent); }

.quiz__miss {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.q { border-bottom: 1px solid var(--rule-hair); padding: 1.1rem 0 1.3rem; }

.q__stem { max-width: 40em; margin: 0 0 0.8rem; }
.q__stem .qnum { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--accent); margin-right: 0.5rem; }

.q__opts { display: grid; gap: 0.35rem; max-width: 44em; }

.opt {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: start;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 0.6rem;
  background: transparent;
  border: 1px solid var(--rule-hair);
  color: inherit;
  cursor: pointer;
}

.opt:hover:not([disabled]) { border-color: var(--accent); }
.opt[disabled] { cursor: default; }
.opt__k { font-family: var(--sans); font-weight: 600; color: var(--ink-faint); }

.opt.is-correct { border-color: var(--accent); background: var(--accent-pale); }
.opt.is-correct .opt__k { color: var(--accent); }
.opt.is-wrong { border-color: var(--stamp); background: var(--stamp-pale); }
.opt.is-wrong .opt__k { color: var(--stamp); }

/* Разбор каждого варианта, а не только верного */
.why { display: none; margin: 0.7rem 0 0; padding-left: 0.6rem; border-left: 2px solid var(--rule); }
.q.is-answered .why { display: block; }
.why dl { margin: 0; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.15rem 0.4rem; font-size: 0.9rem; }
.why dt { font-family: var(--sans); font-weight: 600; color: var(--ink-faint); }
.why dd { margin: 0; color: var(--ink-soft); max-width: 40em; }
.why dd.ok { color: var(--ink); }

.quiz__hint {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 40em;
  margin: 0 0 1.4rem;
}

.quiz__acts { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.quiz__acts .tr__go { text-decoration: none; display: inline-block; }

.quiz__reset {
  font-family: var(--sans);
  font-size: 0.82rem;
  margin-top: 1.5rem;
  padding: 0.35rem 0.9rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  cursor: pointer;
}
.quiz__reset:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Карта модулей на главной ---------------------------------- */

.section-head {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 2.5rem 0 0;
}

.modules { display: grid; gap: 0; margin: 2rem 0 0; border-top: 1.5px solid var(--ink); }

.module {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.7rem 0.2rem;
  border-bottom: 1px solid var(--rule-hair);
  text-decoration: none;
  color: inherit;
}

a.module:hover { background: var(--accent-pale); }

.module__no { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.module__name { font-family: var(--sans); font-size: 0.97rem; }
.module__sub { display: block; font-family: var(--serif); font-size: 0.87rem; color: var(--ink-soft); margin-top: 0.1rem; }

.module__state { font-family: var(--sans); font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; }
.module--soon { color: var(--ink-faint); }
.module--soon .module__no { color: var(--ink-faint); }

/* ---------- Справочник цифр -------------------------------------------- */

.figures td.val { font-weight: 600; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.figures td.src { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint); }
.figures td.src a { color: inherit; }

/* ---------- Футер ------------------------------------------------------ */

.pagefoot {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.pagefoot p { max-width: 46em; }

/* ---------- Доступность и печать --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus { left: 0.5rem; top: 0.5rem; z-index: 50; background: var(--paper); padding: 0.4rem 0.8rem; border: 1px solid var(--accent); }

@media print {
  .topbar, .toc, .quiz__reset { display: none; }
  .layout { grid-template-columns: 1fr; }
  body { font-size: 10.5pt; background: #fff; }
  .q.is-answered .why, .why { display: block; }
  details.check[open] > div, details.check > div { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}