/* Дизайн-система ad2sub (05.11.2026, правки четвёртого консилиума 06.11.2026). Один файл для сайта, блога, шапки, теста по книге
   и серверного паспорта; кабинет и блог берут те же значения через tailwind.config. Правила и образцы: /lp/ds/ .
   Подключение: <link rel="stylesheet" href="/lp/ds.css"> (шрифт подтягивается отсюда). */
@import url("/lp/fonts/onest.css");

:root {
  /* бумага и чернила */
  --paper: #FAF9F7;
  --white: #FFFFFF;
  --ink: #16131E;
  --text: #2B2833;
  --muted: #6F6B7A;
  --soft: #9B96A3;
  /* линии и рамки — смесь чернил с бумагой (10 % и 15 %), того же тепла, что поверхности; на чернилах — 20 % бумаги */
  --line: #E3E2E1;
  --line2: #EFEDF0;
  --line-ink: #444149;
  /* единственный цвет: деньги — только там, где деньги, и в знаке; ссылки и подчёркивания чернилами */
  --money: #1F6E43;
  --money-bg: #EEF6F0;
  --accent: var(--ink);
  /* смысловые цвета состояний, только в кабинете и отчёте */
  --warn: #9A5B10;
  --warn-bg: #FBF3E6;
  --danger: #B3261E;
  --danger-bg: #FBECEA;
  /* второй тон и поверхности: лента для чередования секций, подложка под снимки, рамка белых панелей */
  --paper-2: #F2F0EC;
  --mat: #E9E6E1;
  --frame: #D8D6D6;
  /* шрифт и геометрия */
  --font: "Onest", "Onest Fallback", "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
  --w: 1104px;
  --gutter: 32px;
  /* веса — лестница переменного Onest: чем мельче кегль, тем плотнее штрих; 600 только у плиток, кнопок и «Итого» */
  --w-h1: 480;
  --w-h2: 500;
  --w-h3: 550;
  --w-h4: 600;
  /* движение: неподвижность по умолчанию. 150 — цвет и подчёркивание, 240 — проявление, 120 — уход, 320 — единственный росчерк */
  --e-dev: cubic-bezier(.2, .6, .2, 1);
  --e-exit: cubic-bezier(.4, 0, .2, 1);
  --e-pen: var(--e-dev);
  --t-fast: 150ms;
  --t-in: 240ms;
  --t-out: 120ms;
  --t-data: 320ms;
  --t-dev: 240ms;
  color-scheme: light;
}

/* ===== база ===== */
html { background: var(--paper); -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 24px; -webkit-font-smoothing: antialiased; font-synthesis: none; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: var(--w-h4); }
p { margin: 0; }
p, li, dd, figcaption { text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ink :focus-visible, .a2-ink :focus-visible, .a2-cookie :focus-visible { outline-color: var(--paper); }
::selection { background: var(--ink); color: var(--paper); }
.ink ::selection, .a2-ink ::selection, .a2-cookie ::selection { background: var(--paper); color: var(--ink); }

/* ===== шкала: пять кеглей, межстрочные в пикселях, вес растёт к мелким кеглям ===== */
.ds-h1 { font-size: 62px; line-height: 64px; letter-spacing: -0.025em; font-weight: var(--w-h1); }
.ds-h1.opt, .opt { margin-left: -0.06em; } /* оптический вынос первой буквы со стемом (Б В Г Е И К М Н П Р Ш Ц Ы Ь Ю); круглые — .opt-r */
.opt-r { margin-left: -0.03em; }
.ds-h2 { font-size: 44px; line-height: 48px; letter-spacing: -0.02em; font-weight: var(--w-h2); }
.ds-h2s { font-size: 28px; line-height: 32px; letter-spacing: -0.012em; font-weight: var(--w-h3); } /* заголовок секции внутри главы */
.ds-h3 { font-size: 21px; line-height: 28px; letter-spacing: -0.01em; font-weight: var(--w-h4); }
.ds-lead { font-size: 21px; line-height: 32px; color: var(--text); }
.ds-body { font-size: 17px; line-height: 24px; }
.ds-small { font-size: 14px; line-height: 24px; }
.ds-kicker { font-size: 14px; line-height: 24px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; } /* рубрика над заголовком */
.ds-muted { color: var(--muted); }
.ds-ink { color: var(--ink); }
.ds-money { color: var(--money); }
@media (max-width: 1023px) { :root { --w-h1: 500; } .ds-h1 { font-size: 40px; line-height: 44px; } }
@media (max-width: 760px) { .ds-h2 { font-size: 28px; line-height: 32px; } }

/* ===== сетка и отступы (шаг 8; между секциями ритм 112/80, на телефоне 72/56) ===== */
.ds-wrap { max-width: calc(var(--w) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.ds-narrow { max-width: 634px; }
.ds-mt8 { margin-top: 8px; } .ds-mt16 { margin-top: 16px; } .ds-mt24 { margin-top: 24px; } .ds-mt32 { margin-top: 32px; }
.ds-mt48 { margin-top: 48px; } .ds-mt64 { margin-top: 64px; } .ds-mt96 { margin-top: 96px; }
@media (max-width: 760px) { :root { --gutter: 16px; } .ds-mt96 { margin-top: 64px; } }

/* ===== действия: тёмная кнопка (одна на экран), ссылка-действие 500 чернилами, ссылка в тексте с серым подчёркиванием ===== */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: var(--radius); background: var(--ink); color: var(--paper); font: 600 17px/24px var(--font); border: 1px solid var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.ds-btn:hover { background: color-mix(in oklab, var(--ink) 80%, white); border-color: color-mix(in oklab, var(--ink) 80%, white); }
.ds-btn:active { transform: scale(.98); }
.ds-btn.sm { height: 40px; padding: 0 20px; font-size: 14px; }
.ds-btn.light { background: var(--white); color: var(--ink); border-color: var(--frame); font-weight: 500; }
.ds-btn.light:hover { background: var(--paper-2); border-color: var(--soft); }
.ds-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; text-decoration-color: var(--ink); text-decoration-skip-ink: auto; transition: text-decoration-thickness .15s; }
.ds-link:hover { text-decoration-thickness: 2px; }
.ds-text-link { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--soft); text-decoration-skip-ink: auto; }
.ds-text-link:hover { text-decoration-color: var(--ink); }

/* ===== линейки и списки: линии только у данных ===== */
.ds-rule { border-top: 1px solid var(--ink); }
.ds-rule-light { border-top: 1px solid var(--line); }
.ds-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.ds-list li { padding: 8px 0 7px; border-bottom: 1px solid var(--line); color: var(--text); }
.ds-list a { color: var(--ink); font-weight: 500; }

/* ===== числа: табличные цифры только в столбцах, разряды узким пробелом из шрифта (U+202F), минус U+2212 ===== */
.num { font-variant-numeric: tabular-nums; }
.ts { letter-spacing: 0; } /* старые спаны вокруг U+202F ничего не добавляют; экспорт их снимает */

/* ===== таблица данных: 2 px — начало данных, 1 px чернил — шапка и «Итого», 1 px серая — строки ===== */
.ds-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: 17px; line-height: 24px; color: var(--text); }
.ds-table th { text-align: left; font-weight: 500; font-size: 14px; line-height: 24px; color: var(--muted); padding: 8px 0 7px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.ds-table td { padding: 8px 0 7px; border-bottom: 1px solid var(--line); }
.ds-table th.r, .ds-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table td.money { color: var(--money); font-weight: 500; font-variant-numeric: tabular-nums; }
.ds-table td.dash { color: var(--muted); }
.ds-table tr.total td { font-weight: 600; color: var(--ink); border-top: 1px solid var(--ink); border-bottom: 0; padding-bottom: 6px; }
.ds-table tr.total td.money { color: var(--money); }
.ds-table td.mark { position: relative; font-weight: 600; color: var(--ink); }
.ds-table td.mark::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.ds-table-caption { display: flex; gap: 16px; font-size: 14px; line-height: 24px; margin-bottom: 8px; }
.ds-table-caption b { font-weight: 500; color: var(--ink); }
.ds-table-caption span { color: var(--muted); }
.ds-table-source { margin-top: 8px; font-size: 14px; line-height: 24px; color: var(--muted); } /* строка источника под таблицей или графиком */
.ds-table-wrap { overflow-x: auto; }
@media (max-width: 760px) { .ds-table .wide { display: none; } .ds-table td.mark::before { left: -8px; } }

/* ===== снимки кабинета: на подложке, без окна ===== */
.ds-figure { margin: 0; }
.ds-figure img { display: block; width: 100%; height: auto; padding: 24px; border: 0; border-radius: var(--radius); background: var(--mat); }
.ds-caption { margin-top: 8px; padding-left: 24px; font-size: 14px; line-height: 24px; color: var(--muted); max-width: 634px; }
@media (max-width: 480px) { .ds-figure img { padding: 12px; } .ds-caption { padding-left: 12px; } }

/* ===== движение: только то, что сообщает, и только под указателем ===== */
.ds-btn, .ds-link, .ds-text-link { transition: background-color .15s, border-color .15s, text-decoration-color .15s, transform .2s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto !important; } }