/* ============ Публичные страницы KURS ============
   Только то, чего нет в общем слое: главная (герой, компоненты индекса, спарклайн),
   /tools/, /dca и длинные документы /about и /methodology.
   Каркас, шапка, подвал, карточка, кнопка, чип, таблица, лонгрид — assets/css/components.css.
   Токены — assets/css/app.css. Магических px здесь быть не должно. */

/* ---------- Заголовок страницы ----------
   Верхний отступ задаёт main (--space-page-top) — одинаково в обоих движках,
   поэтому своего margin-top у заголовка нет. */
.page-head { max-width: var(--measure-prose); margin: 0 0 var(--space-6); }
.page-head h1 { margin: 0 0 var(--space-3); }
/* Строка-снимок рынка над дашбордом: цифры, которые видны и без JS */
.snapshot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--fs-base); }
.snapshot b { color: var(--ink); }
.snapshot .dot { color: var(--muted); }

.section-more { margin: var(--space-4) 0 0; font-size: var(--fs-base); font-weight: 600; }

/* ---------- Главная: герой ----------
   Две колонки, три ячейки: слева лид и блок «New here?», справа гейдж во всю высоту.
   Гейдж центрирован по обеим строкам, поэтому блок под лидом занимает пустоту и вниз
   его не сдвигает; на узком экране (860px) порядок меняется на copy → гейдж → new. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "copy read" "new read";
  gap: var(--space-6) var(--space-8); align-items: center; margin: 0 0 var(--space-2);
}
.hero-copy { grid-area: copy; align-self: end; }
.hero-read { grid-area: read; }
.hero-new  { grid-area: new; align-self: start; }
/* единственное исключение из шкалы h1 — герой главной */
.hero h1 { font-size: var(--fs-h1-hero); line-height: 1.05; margin: 0 0 var(--space-4); letter-spacing: -.03em; }
.hero .lede { margin-bottom: 0; }

/* Врезка «New here?»: тише карточки-гейджа. Фон --bg, а не --card-2: в светлой теме
   --card-2 (#f9f9fb) СВЕТЛЕЕ фона страницы (#f0f0f3), и «тихая» врезка выходила ярче
   всего вокруг. Тон страницы + мягкая рамка без тени — врезка действительно отступает. */
.hero-new { background: var(--bg); border-color: var(--line-soft); box-shadow: none; padding: var(--space-4); }
.hero-new p { margin: 0; color: var(--ink2); font-size: var(--fs-base); line-height: 1.55; }
.hero-new .eyebrow { margin-bottom: var(--space-1); }
.hero-new p.hero-new-links { margin-top: var(--space-2); font-weight: 600; }
.hero-new-links .dot { color: var(--muted); margin: 0 var(--space-1); }
.hero-read { text-align: center; padding: var(--space-6); }
/* 264px — канонический размер viewBox гейджа: при нём значение внутри дуги
   рисуется ровно в --fs-3xl, а не «примерно похоже» */
.hero-gauge { max-width: 264px; margin: 0 auto; }
.hero-hint { margin: var(--space-4) auto 0; max-width: 42ch; font-size: var(--fs-base); line-height: 1.5; color: var(--ink2); }

/* Движение индекса и цены под гейджем (аудит E3-1, E3-3).
   Три ступени по убыванию веса: дельты --fs-base (их читают), «дней в зоне» и цены
   --fs-sm, дата среза остаётся --fs-xs. Внутри карточки это второй и третий кегли
   помимо заголовка — предел, который ставит контракт B7 (не более двух). Поэтому
   .hero-px и .hero-zone-days делят один кегль, а не берут каждый свой. */
.hero-delta {
  margin: var(--space-4) 0 0; font-size: var(--fs-base); color: var(--ink2);
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); justify-content: center;
}
.hero-delta b { font-weight: 700; color: var(--ink); }
.hero-delta b.up { color: var(--up); }
.hero-delta b.down { color: var(--down); }
.hero-zone-days { margin: var(--space-2) auto 0; max-width: 46ch; font-size: var(--fs-sm); color: var(--muted); }
.hero-zone-days b { color: var(--ink2); font-weight: 700; }
.hero-px {
  margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm); color: var(--ink2);
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); justify-content: center;
}
.hero-px b { font-weight: 700; }
.hero-px .sub { color: var(--muted); }
.hero-cta { margin: var(--space-5) 0 0; display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
/* Нишевый вход (JSON API) — текстовой строкой под кнопками, а не второй кнопкой:
   в CTA-площади героя он занимал половину при доле аудитории в проценты (A6). */
.hero-api { margin: var(--space-3) 0 0; }

/* ---------- Гейдж ---------- */
.gauge-svg { display: block; width: 100%; height: auto; }
.gauge-tick { fill: var(--muted); font-size: var(--fs-2xs); font-family: var(--font); }
/* Значение внутри дуги. Кегль задан в пользовательских единицах viewBox: при канонической
   ширине 264px это ровно --fs-3xl. */
.gauge-val {
  fill: var(--ink); font-family: var(--font); font-size: 44px; font-weight: 700;
  letter-spacing: -.02em;
  /* обводки у числа нет и не нужно: указатель стоит на дуге (r=95…125) и в область
     цифр (r ≤ 71) не заходит ни при каком значении */
}
/* Название зоны — интерпретация числа, поэтому крупно и цветом своей зоны.
   Пилюля 12.5px была самым мелким элементом карточки при числе в 44px: скачок без ступени. */
.reading-zone { margin: var(--space-2) 0 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; }
.reading-zone.z1 { color: var(--therm-1-ink); }
.reading-zone.z2 { color: var(--therm-2-ink); }
.reading-zone.z3 { color: var(--therm-3-ink); }
.reading-zone.z4 { color: var(--therm-4-ink); }
.reading-zone.z5 { color: var(--therm-5-ink); }
.reading-date { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Главная: компоненты индекса ---------- */
.comp-grid { align-items: start; }
.comps { list-style: none; margin: 0; padding: 0; }
.comps li { padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.comps li:first-child { border-top: 0; padding-top: 0; }
.comp-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.comp-name { font-weight: 600; font-size: var(--fs-base); }
.comp-score { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; }
.comp-bar {
  height: 8px; margin: var(--space-2) 0; border-radius: var(--radius-pill);
  background: var(--neutral-bg); overflow: hidden;
}
.comp-bar i { display: block; height: 100%; border-radius: var(--radius-pill); }
.comp-meta { font-size: var(--fs-xs); color: var(--ink2); }
.comp-meta .dot { color: var(--muted); }
.comps-card .fine { margin: var(--space-4) 0 0; }

.spark-wrap { margin: var(--space-3) 0 0; }
.spark-svg { display: block; width: 100%; height: auto; }
/* Полосы зон: в светлой теме те же цвета, что у гейджа, приглушённые до фона.
   В тёмной полупрозрачные насыщенные цвета сливались в грязный градиент — там берём
   готовые фоновые ступени токенов (--therm-N-bg) в полную силу. */
.spark-svg .band, .chart-svg .band { opacity: .12; }
:root[data-theme="dark"] .spark-svg .band,
:root[data-theme="dark"] .chart-svg .band { opacity: 1; }
:root[data-theme="dark"] .spark-svg .band.z1, :root[data-theme="dark"] .chart-svg .band.z1 { fill: var(--therm-1-bg); }
:root[data-theme="dark"] .spark-svg .band.z2, :root[data-theme="dark"] .chart-svg .band.z2 { fill: var(--therm-2-bg); }
:root[data-theme="dark"] .spark-svg .band.z3, :root[data-theme="dark"] .chart-svg .band.z3 { fill: var(--therm-3-bg); }
:root[data-theme="dark"] .spark-svg .band.z4, :root[data-theme="dark"] .chart-svg .band.z4 { fill: var(--therm-4-bg); }
:root[data-theme="dark"] .spark-svg .band.z5, :root[data-theme="dark"] .chart-svg .band.z5 { fill: var(--therm-5-bg); }
.spark-axis {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-1);
}
.kv-inline { display: flex; gap: var(--space-6); margin: var(--space-4) 0 0; }
.kv-inline div { display: flex; flex-direction: column; gap: 2px; }
.kv-inline dt { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kv-inline dd { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.what-grid .card p:last-child { margin-bottom: 0; }
/* Ключевая мысль карточки — ступень выше основного текста: две карточки сплошной прозы
   одного кегля читались как FAQ-свалка, а не как ответ на вопрос заголовка. */
.what-key { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--ink); margin: 0 0 var(--space-3); }

/* ---------- Главная: лента /learn/ ---------- */
/* карточка статьи — общая анатомия .post-card из components.css */
.post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Главная: тизер /tools/ и подписка ---------- */
.teaser {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  color: var(--ink);
}
.teaser:hover { text-decoration: none; border-color: var(--muted); }
.teaser h2 { margin: 0 0 var(--space-1); }
.teaser p { margin: 0; color: var(--ink2); max-width: 62ch; }
.teaser-go { font-size: var(--fs-xl); color: var(--brand); flex: none; }

/* ---------- Хвостовой CTA секции: вход на /markets ----------
   От .teaser отличается не тоном, а РОЛЬЮ: это не третья информационная карточка ряда,
   а дверь. Поверхность --brand-bg и рамка --brand — контракт B3 закрепляет --brand* за
   интерактивным, и брендовая плоскость рядом с двумя --card графиками читается «другим
   видом объекта» ещё до того, как прочитан текст. Запрет B8 №3 касается только графиков.
   Селекторы .teaser.cta (0,2,0) — чтобы перебить .teaser независимо от порядка строк. */
.teaser.cta {
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-cta);
  background: var(--brand-bg);
  border-color: var(--brand);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.cta h3 { margin: 0 0 var(--space-2); color: var(--ink); }
.cta p  { color: var(--ink2); max-width: 76ch; }

/* Пилюля-действие: анатомия .btn.secondary из контракта B6 (высота --control-h, паддинг
   0 --space-4, --radius-s, --fs-base/600, gap --space-2), но брендовым контуром.
   Заливки нет намеренно: в тёмной теме --on-solid на --brand даёт 2.64:1, а .btn:hover
   уводит фон в --brand-hover, где белый текст падает до 1.82:1. Контур — единственный
   вариант, проходящий AA в ОБЕИХ темах. */
.cta-go {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  flex: none; height: var(--control-h); padding: 0 var(--space-4);
  background: var(--card); color: var(--brand);
  border: 1px solid var(--brand); border-radius: var(--radius-s);
  font-size: var(--fs-base); font-weight: 600; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* 2.2 — та же обводка, что у иконок внутри .btn (components.css:140): тонкий → и был
   главной причиной «не считывается». Переход только на стрелке, не на пилюле. */
.cta-go .ic { stroke-width: 2.2; transition: transform var(--dur-fast) var(--ease); }

.teaser.cta:hover { border-color: var(--brand-hover); box-shadow: var(--shadow-hover); }
.cta:hover .cta-go { color: var(--brand-hover); border-color: var(--brand-hover); }
.cta:hover .cta-go .ic { transform: translateX(2px); }
.teaser.cta:active { transform: translateY(1px); }

/* хвостовая карточка-CTA идёт на всю ширину сетки: обрезанная по 60% оставляла дыру справа */
.nl h2 { margin-bottom: var(--space-2); }
.nl p { margin: 0 0 var(--space-3); color: var(--ink2); max-width: 70ch; }
/* Состав письма (аудит E3-16): пять строк с сегодняшними значениями. Список, а не проза —
   он описывает структуру, и структура должна быть видна формой. */
.nl-sample { margin: 0 0 var(--space-4); padding: 0 0 0 var(--space-5); max-width: 70ch; color: var(--ink2); }
.nl-sample li { margin-bottom: var(--space-1); font-size: var(--fs-sm); }
.nl-sample b { color: var(--ink); font-weight: 600; }

.nl-form { display: flex; gap: var(--space-2); flex-wrap: wrap; max-width: 560px; }
.nl-form input[type="email"] {
  flex: 1; min-width: 220px; height: var(--control-h); padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  font: inherit; font-size: var(--fs-base); background: var(--card); color: var(--ink);
}
.nl-form input[type="email"]:focus { outline: 2px solid var(--focus); border-color: var(--brand-2); }
.nl-form .btn { flex: none; }
.nl .fine { margin: var(--space-3) 0 0; }
.nl-ok { color: var(--ink); font-weight: 600; }
/* honeypot: поле есть в DOM, но недоступно человеку */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- /tools/ ---------- */
.tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); position: relative; }
a.tool:hover { text-decoration: none; border-color: var(--muted); }
/* «Растянутая ссылка»: карточка кликается целиком, но остаётся <div> — внутри живёт вторая
   ссылка, на парную статью, а вложить <a> в <a> нельзя. Псевдоэлемент перекрывает карточку,
   .tool-guide поднимается над ним по z-index и потому кликается отдельно. */
.tool-go { color: inherit; text-decoration: none; }
.tool-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Подсвечивается только та карточка, по которой есть куда кликнуть: у «Coming soon»
   ссылки нет, и общий .tool:hover обещал переход, которого не существует.
   Тень, а не одна рамка: --line → --muted для карточки-ссылки почти незаметно. */
.tool:has(.tool-go):hover { border-color: var(--muted); box-shadow: var(--shadow-hover); }
.tool:has(.tool-go:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tool-go:focus-visible { outline: none; }
.tool-guide {
  position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-2);
  margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm); color: var(--muted); flex: 0 0 auto;
}
.tool-guide .ic { color: var(--muted); flex: none; }
.tool-guide a { color: var(--ink2); font-weight: 600; }
/* «Coming soon» — пунктирная рамка без заливки: в тёмной теме --card-2 светлее карточки
   и нереализованный инструмент выглядел бы заметнее живого. */
.tool-soon { background: none; border-style: dashed; box-shadow: none; }
.tool-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.tool-head h2 { margin: 0; }
.tool p { margin: 0; font-size: var(--fs-base); color: var(--ink2); flex: 1; }
.tool-now { font-size: var(--fs-sm); color: var(--ink2); font-weight: 600; }
/* хвостовая карточка-CTA — на всю ширину */
.note { margin-top: var(--space-6); }
.note h2 { margin-bottom: var(--space-2); }
.note p { margin: 0; color: var(--ink2); max-width: 80ch; }

/* ---------- Страницы инструментов (/tools/mayer, /tools/200wma, /tools/fear-greed) ----------
   Карточки, чипы, таблицы и колонка чтения — общие (components.css). Здесь только
   серверный график и карточка «показание по активу». */

.chart-svg { display: block; width: 100%; height: auto; margin-top: var(--space-1); }
.chart-tick {
  fill: var(--muted); font-size: var(--fs-2xs); font-family: var(--font);
}
/* Подпись опорной линии лежит поверх данных: обводка цветом карточки выбивает её из графика */
.chart-tick.strong {
  fill: var(--ink2); font-weight: 700;
  paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round;
}
/* Подпись границы зоны у правого края — тот же приём, но цветом своей зоны:
   раньше зонные полосы стояли вообще без подписей, а ключ к ним лежал на 600px ниже. */
.chart-zone-lbl { font-size: var(--fs-2xs); font-family: var(--font); font-weight: 700;
  paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.chart-zone-lbl.z1 { fill: var(--therm-1-ink); }
.chart-zone-lbl.z2 { fill: var(--therm-2-ink); }
.chart-zone-lbl.z3 { fill: var(--therm-3-ink); }
.chart-zone-lbl.z4 { fill: var(--therm-4-ink); }
.chart-zone-lbl.z5 { fill: var(--therm-5-ink); }
.chart-zone-line { stroke-width: 1; opacity: .9; }
.chart-zone-line.z1 { stroke: var(--therm-1); }
.chart-zone-line.z2 { stroke: var(--therm-2); }
.chart-zone-line.z3 { stroke: var(--therm-3); }
.chart-zone-line.z4 { stroke: var(--therm-4); }
.chart-zone-line.z5 { stroke: var(--therm-5); }
.chart-grid { stroke: var(--data-grid); stroke-width: 1; }
.chart-axis { stroke: var(--data-axis); stroke-width: 1; }
.chart-ref { stroke: var(--data-ref); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.chart-key {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--ink2);
}
.chart-key span { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-key i { width: 14px; height: 3px; border-radius: 2px; flex: none; }

/* Показание по активу: крупное число, чип зоны, две-три подписи */
.read .read-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.read .read-top h2 { margin: 0; }
.read-sym { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .04em; }
.read-val {
  font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-2xl); letter-spacing: -.025em;
  margin: var(--space-2) 0 var(--space-2);
}
.read-sub { margin: 0; color: var(--ink2); font-size: var(--fs-base); }
.read .kv-inline { margin-top: var(--space-3); }
.read .kv-inline dd { font-size: var(--fs-h3); }
.as-of { margin: var(--space-3) 0 0; }
.tool-doc .tbl { margin-bottom: var(--space-5); }
/* карточка парной статьи стоит внутри колонки чтения — h3 и текст без внешних отступов.
   text-decoration снимается с повышенной специфичностью: .doc a подчёркивает инлайн-ссылки
   лонгрида и без этого подчеркнул бы всю карточку целиком. */
.doc a.teaser, .doc a.teaser:hover { text-decoration: none; }
.tool-related { margin: var(--space-7) 0; align-items: center; }
.tool-related h3 { margin: 0 0 var(--space-1); }
.tool-related p { margin: 0; font-size: var(--fs-base); color: var(--ink2); }
.tool-related .eyebrow { margin-bottom: var(--space-1); }

/* ---------- Обратный отсчёт халвинга (/tools/halving) ---------- */
/* Счётчик собирается на сервере, JS только меняет цифры внутри — потому фиксированная
   ширина ячейки: без неё строка дёргалась бы раз в секунду на смене разрядности.
   Это единственное место, где tabular-nums оставлен на крупном кегле: тикающий раз
   в секунду счётчик с пропорциональными цифрами дёргает подпись под собой. */
.hv-count { display: flex; flex-direction: column; }
.hv-clock { display: flex; gap: var(--space-2); margin: var(--space-4) 0 0; }
.hv-clock > div {
  flex: 1 1 0; min-width: 0; text-align: center;
  background: var(--neutral-bg); border-radius: var(--radius-s); padding: var(--space-2) var(--space-1);
}
.hv-clock .num {
  display: block; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-xl);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hv-clock em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.hv-note { margin: var(--space-3) 0 0; }
.hv-count .hv-note { margin-top: auto; padding-top: var(--space-3); }
/* Месяц-диапазон вместо числа: крупный кегль .read-val на «April 2028 – May 2028» не влезает */
.read-val.hv-band { font-size: var(--fs-xl); letter-spacing: -.015em; }
.hv-paces { margin-bottom: 0; }
/* Строка, которой тикает счётчик — остальные два срока справочные */
.tbl tr.hv-lead > td { background: var(--neutral-bg); font-weight: 600; }

.hv-bar {
  height: 8px; border-radius: var(--radius-pill); background: var(--neutral-bg);
  overflow: hidden; margin: var(--space-3) 0 var(--space-2);
}
.hv-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand-2); }

@media (max-width: 640px) {
  .hv-clock { gap: var(--space-1); }
}

/* ---------- Длинный документ (/about, /methodology) ----------
   Колонка чтения, кегль и заголовки — из общего слоя (.prose, .doc). Здесь только
   то, что есть лишь в документах KURS: разделители секций, формулы, широкие таблицы. */
/* Колонка чтения выравнивается по ЛЕВОМУ краю широкой сетки, а не центрируется:
   на /tools/* лид шёл в 720, карточки в 1140, а документ снова в 720 по центру — левый
   край страницы прыгал на ~200px (design-system A10, правило B2).

   `margin: 0 auto` здесь имел и второй, невидимый эффект: авто-поля отменяют растягивание
   grid-элемента, и внутри .article-layout колонка переходила на fit-content — на 375px
   это давало 475px при доступных 343 и уводило /methodology в горизонтальный скролл. */
.doc { margin: 0; }
.doc h1 { margin: 0 0 var(--space-3); }
.doc h2 { padding-top: var(--space-5); border-top: 1px solid var(--line-soft); }
.doc code {
  font-family: var(--font-mono);
  font-size: .9em; background: var(--neutral-bg); padding: 1px var(--space-1); border-radius: var(--radius-xs);
}
.doc .formula {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-5); font-size: var(--fs-h3); font-weight: 600; text-align: center;
}
.doc .formula code { background: none; padding: 0; font-size: var(--fs-base); font-weight: 600; }
.doc .updated { margin-top: var(--space-7); font-size: var(--fs-sm); color: var(--muted); }
.doc .limits li { margin-bottom: var(--space-3); }

/* ---------- Таблицы документа ----------
   Оформление — общее (.tbl в components.css); здесь только прокрутка на узких экранах
   и вылет широких таблиц за колонку чтения. */
.doc .tbl { display: block; overflow-x: auto; margin: 0 0 var(--space-5); }
.doc .u { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.doc .tbl .strong { font-weight: 700; }
.doc .zones-tbl td:first-child { white-space: nowrap; }
/* Таблицы на четыре колонки в колонке 720px превращают текст в лапшу — на широком экране
   они выходят на всю ширину .wrap (720 + 210×2 = 1140). Ниже 1180px запаса нет. */
@media (min-width: 1180px) {
  /* width: auto обязателен — с width: 100% из общего .tbl уравнение блока переопределено
     и отрицательные поля только сдвигают таблицу влево, не расширяя её */
  .doc .tbl-wide { margin-inline: -210px; width: auto; }
  /* …кроме страниц с боковым оглавлением: слева от колонки чтения места больше нет
     (она прижата к левому краю сетки), а справа стоит липкий боковик, и таблица
     уехала бы под него. Там широкая таблица прокручивается — как и на телефоне. */
  .article-layout .doc .tbl-wide { margin-inline: 0; width: 100%; }
}

/* ---------- Текущее показание (/methodology) ---------- */
.reading { margin: 0 0 var(--space-7); padding: var(--space-6); }
.reading-head { display: flex; gap: var(--space-7); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-5); }
.reading-gauge { flex: none; width: 264px; text-align: center; }
.reading-meta { flex: 1; min-width: 240px; }
.reading-hint { margin: var(--space-3) 0 0; font-size: var(--fs-prose); line-height: 1.5; color: var(--ink2); }
.reading .comp-now { margin-bottom: var(--space-2); }
.reading .fine { margin-bottom: 0; }

/* ---------- Страница вставки виджетов (/tools/embed) ----------
   Сами виджеты своего CSS отсюда не берут: /embed/* несёт стили инлайном и ни одного
   внешнего файла не тянет (его грузят читатели чужих сайтов). Здесь — только витрина. */
.em-block { margin-bottom: var(--space-6); }
.em-block > p { color: var(--ink2); max-width: 78ch; }
.em-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.em-head h2 { margin: 0; }
.em-sub { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink2); }

/* Витрина виджета: фон на ступень отличается от карточки — видно прозрачные углы iframe */
.em-demo {
  display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-5) 0 var(--space-4); padding: var(--space-5);
  background: var(--card-2); border: 1px solid var(--line-soft); border-radius: var(--radius-s);
}
.em-demo figure { margin: 0; }
.em-demo figcaption { margin-top: var(--space-2); text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.em-frame { display: block; border: 0; max-width: 100%; }
.em-demo-badge { justify-content: center; padding: var(--space-6) var(--space-5); }

/* Сниппет: кнопку Copy дорисовывает assets/js/copy.js, поэтому правое поле держим всегда —
   иначе при появлении кнопки текст под ней прыгал бы. */
.snip { position: relative; margin: 0 0 var(--space-3); }
.snip pre {
  margin: 0; overflow-x: auto; padding: var(--space-3) 96px var(--space-3) var(--space-4);
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.snip code { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink); }
.snip-copy {
  position: absolute; top: var(--space-2); right: var(--space-2); height: var(--control-h-xs); padding: 0 var(--space-3); cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  color: var(--ink2); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.snip-copy:hover { color: var(--ink); border-color: var(--muted); }
.snip-copy.ok { color: var(--brand-ink); background: var(--brand-bg); border-color: transparent; }

.em-opts { margin: var(--space-2) 0 var(--space-3); }
/* Имя параметра не переносится никогда; список значений — только пока есть место:
   на 375px три инлайн-кода в nowrap распирали таблицу за вьюпорт (карточка при этом
   не в .doc, и общий overflow-x оттуда сюда не достаёт). */
.em-opts td:first-child { white-space: nowrap; }
@media (min-width: 641px) { .em-opts td:nth-child(2) { white-space: nowrap; } }
.em-rules { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-5); color: var(--ink2); }
.em-rules li { margin-bottom: var(--space-2); }
.em-rules strong { color: var(--ink); }

/* ---------- /dca ----------
   Форма отправляется методом GET и считается на сервере; JS перехватывает submit и
   пересчитывает без перезагрузки. Инлайн-стилей с магическими px здесь больше нет. */
.dca-sub { margin-bottom: var(--space-4); }
.dca-form { display: flex; flex-direction: column; gap: var(--space-3); }
.dca-fields { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.dca-f-asset { min-width: 90px; }
.dca-f-amt { flex: 1; min-width: 130px; }
.dca-f-freq { min-width: 130px; }
.dca-f-start { min-width: 160px; }
.dca-toggle { align-items: flex-start; }
.dca-form .btn { align-self: flex-start; }

.dca-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.dca-tile {
  background: var(--card-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-s); padding: var(--space-2) var(--space-3);
}
/* Вес 700, а не 800: восьмисотый упразднён контрактом B1 */
.dca-tile-v { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; }
.dca-tile-v.up { color: var(--up); }
.dca-tile-v.down { color: var(--down); }
/* Пояснение к паре годовых ставок и доля выигрышей lump sum: продолжение блока плиток,
   поэтому тот же верхний отступ, что между плитками, а не отступ секции. */
.dca-why, .dca-wins { margin: var(--space-3) 0 0; }
.dca-wins strong { color: var(--ink); }

.dca-wi { margin-top: var(--space-4); }
/* Пустое состояние: раньше при негодном вводе на экране просто оставались прежние цифры,
   и человек не мог отличить «посчитано» от «проигнорировано». */
.dca-empty { grid-column: 1 / -1; margin: 0; color: var(--ink2); font-size: var(--fs-sm); }
/* Блок отказа /api/history — тот же паттерн, что showLoadError() на /markets */
.dca-error { grid-column: 1 / -1; margin: 0; }
.dca-error p { margin: 0 0 var(--space-2); color: var(--ink2); font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .dca-stats { grid-template-columns: 1fr; }
}

/* ---------- /glossary ----------
   Лонгрид (.doc) с плоским списком: колонка чтения, ступени заголовков и ссылки — общие.
   Термин с подсказкой (.term / .term-pop) и мостик .gloss-note живут в components.css:
   они встречаются и в теме /learn/. */
/* Селекторы с префиксом .gloss — лонгрид .doc задаёт h2/h3/a своими правилами
   специфичности (0,1,1), и одиночный класс их бы не перебил. */
/* Ряд A–Z липкий: страница 14 287px, и без него после первого прыжка вернуться к
   алфавиту можно было только скроллом наверх. top = высота шапки (63px). */
.gloss-az {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  position: sticky; top: 63px; z-index: 20;
  margin: var(--space-6) 0 0; padding: var(--space-3) 0;
  background: var(--bg); border-bottom: 1px solid var(--line-soft);
}
/* Буква читается как контрол: рамка в покое, высота --control-h-sm, пилюля.
   Раньше состояния покоя не было вовсе — 27 подписей висели голым текстом. */
.gloss .gloss-az a {
  min-width: var(--control-h-sm); min-height: var(--control-h-sm);
  justify-content: center; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); color: var(--ink2);
}
.gloss .gloss-az a:hover { background: var(--brand-bg); color: var(--brand-ink); border-color: transparent; }

/* Буква — разделитель, а не заголовок раздела: кегль мельче h2, роль в структуре — h2 */
.gloss .gloss-letter {
  font-size: var(--fs-base); margin: var(--space-7) 0 0; padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line); color: var(--muted);
  letter-spacing: .1em; scroll-margin-top: 84px;
}
/* scroll-margin-top больше: под шапкой теперь стоит ещё и липкий ряд A–Z */
.gloss-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 128px; }
.gloss-group .gloss-item:last-child { border-bottom: 0; }
/* Приход по якорю #mayer из статьи: подсветка гаснет за --dur-slow с задержкой, чтобы
   глаз успел найти термин среди 47. Раньше :target не имел стилей вовсе — человек
   приземлялся в стену текста и искал глазами. Фон, а не рамка: рамка сдвинула бы вёрстку. */
.gloss-item:target {
  animation: target-fade var(--dur-slow) var(--ease) 600ms both;
  border-radius: var(--radius-s);
}
@keyframes target-fade {
  from { background: var(--brand-bg); box-shadow: 0 0 0 var(--space-3) var(--brand-bg); }
  to { background: transparent; box-shadow: 0 0 0 var(--space-3) transparent; }
}

/* «Наверх» в конце каждой группы: 47 терминов на 14 000px, и без него возврат к
   алфавиту — это ручная прокрутка через полстраницы. */
.gloss-top { margin: var(--space-4) 0 0; text-align: right; }
.gloss .gloss-top a { font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }
.gloss .gloss-top a:hover { color: var(--brand); text-decoration: underline; }
.gloss .gloss-term { margin: 0 0 var(--space-1); font-size: var(--fs-lg); }
/* Якорь-решётка проявляется по наведению на термин и по собственному фокусу */
.gloss a.gloss-anchor {
  margin-left: var(--space-2); font-size: var(--fs-base); font-weight: 400; color: var(--muted);
  text-decoration: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.gloss-item:hover .gloss-anchor, .gloss a.gloss-anchor:focus-visible { opacity: 1; }
.gloss .gloss-aka { margin: 0 0 var(--space-2); font-size: var(--fs-sm); color: var(--muted); }
.gloss .gloss-short { margin: 0 0 var(--space-2); }
.gloss .gloss-note-p { margin: 0 0 var(--space-2); font-size: var(--fs-base); color: var(--ink2); }
.gloss-links { font-size: var(--fs-sm); }
/* Сетка 108px + остальное: при inline-block метке перенос второй строки уезжал ПОД неё,
   и «Where we use it» переставало читаться как подпись к списку. */
.gloss .gloss-links p {
  display: grid; grid-template-columns: 108px 1fr; gap: var(--space-1) var(--space-2);
  margin: var(--space-1) 0 0; color: var(--ink2);
}
.gloss-links .dot { color: var(--muted); }
.gloss-lbl {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); line-height: var(--lh-sm);
}
@media (max-width: 640px) {
  .gloss .gloss-links p { grid-template-columns: 1fr; gap: 0; }
}
.gloss-cta { margin-top: var(--space-7); }
.gloss-cta h3 { margin: 0 0 var(--space-1); }
.gloss-cta .eyebrow { margin-bottom: var(--space-1); }
/* .doc задаёт ссылкам сплошное подчёркивание — у карточки-тизера оно лишнее */
.doc a.gloss-cta, .doc a.gloss-cta:hover { text-decoration: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 1000px) {
  .post-grid, .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* Одна колонка: «New here?» уходит ПОД гейдж — иначе он уезжал бы за первый экран */
  .hero { grid-template-columns: 1fr; grid-template-areas: "copy" "read" "new"; gap: var(--space-6); }
  .hero-copy { align-self: auto; }

  /* Порядок секций главной на телефоне. В DOM инструменты стоят ПОСЛЕ ленты статей и
     оказывались на 3591px — 4.3 экрана вниз при документе в 4845px; другой вход в них
     был только через бургер. Порядок чтения меняем, а порядок в разметке (и в индексе)
     оставляем: Hero → New here? → Components → What → Tools → Learn → Newsletter.
     Флекс включается ровно на главной — .wrap общий для всего сайта. */
  body[data-page="home"] main > .wrap { display: flex; flex-direction: column; }
  body[data-page="home"] .s-tools { order: 1; }
  body[data-page="home"] .s-learn { order: 2; }
  body[data-page="home"] .s-newsletter { order: 3; }
  .grid-2 { grid-template-columns: 1fr; }
  .reading { padding: var(--space-5); }
  .reading-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .reading-gauge { width: 100%; max-width: 264px; margin: 0 auto; }
  .reading-meta { min-width: 0; text-align: center; }
}
@media (max-width: 640px) {
  .post-grid, .tool-grid { grid-template-columns: 1fr; }
  /* Три колонки инструментов в карточку 366px не влезали и уезжали в скролл контейнера:
     на узком экране отдаём им кегль и внутренние поля. */
  .tbl-wrap .tbl { font-size: var(--fs-xs); }
  .tbl-wrap .tbl th, .tbl-wrap .tbl td { padding-left: var(--space-2); padding-right: var(--space-2); }
  .hero-read { padding: var(--space-5) var(--space-4); }
  .teaser { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .teaser-go { align-self: flex-end; }
  /* Стопкой: пилюля становится баром во всю ширину карточки — на телефоне это самый
     однозначный вид «нажми сюда». Стрелка уезжает к правому краю бара. */
  .teaser.cta { gap: var(--space-4); }
  .cta-go { align-self: stretch; justify-content: space-between; }
  .kv-inline { gap: var(--space-5); }
}