/* ==========================================================================
   tendery — «Реестр под копирку». Компоненты дизайн-системы (05-design.md).
   Подключается после tokens.css и base.css. Один класс — один стиль везде,
   вариации — модификаторами. Раскладка конкретных страниц — в page-*.css.

   СПИСОК КОМПОНЕНТОВ
   Фирменный приём
     .tn-regno                       номер записи «№ 017» (--pre — со словом «запись» на телефоне)
     .tn-stamp                       штамп: --type --free --trial --ask --nodata --mark --top --in --l; __cell
     .tn-label                       машинописная подпись поля
     .tn-fields / .tn-field          графы: __k подпись, __v значение, __n примечание; --form — строки бланка с отточием
     .tn-sheet                       лист со вторым листом под копирку; __label, __body, __foot
   Мелкие
     .tn-logo                        плитка логотипа: --s --l; __img
     .tn-co                          связка «плитка + название + штамп типа»: __body __name __short __types
     .tn-yn                          «есть / нет» со значком: --yes --no
     .tn-tag, .tn-count              рубрика без рамки; число при ссылке
     .tn-disc                        строка раскрытия о вознаграждении
   Управление
     .tn-btn                         кнопка: --primary --secondary --text --on-carbon; --s --l --block
     .tn-chip / .tn-chips            чип (aria-pressed), ряд чипов; --x — чип-условие с крестиком; __check
     .tn-check                       флажок: __box __text; --radio; --s
     .tn-input, .tn-select           поле и список; .tn-control — подпись + поле + подсказка (__hint, __error)
     .tn-tabs                        вкладки: __tab (aria-selected), __panel
   Реестр
     .tn-reg                         реестр с фильтрами: __bar __need __tools __status __main __after; --side — фильтры слева от 1200px, --bar — фильтры строкой над таблицей
     .tn-found                       счётчик «Найдено N из M»
     .tn-filter                      панель фильтров: __head __title __close __body __group __foot __apply; --bar — строка над таблицей
     .tn-table-wrap                  обёртка таблицы (прокрутка); --fit — без прокрутки, шапка прилипает
     .tn-table                       таблица: --reg (реестр, до 768px — карточки), --compact, --scroll (мин. ширина 640px), --key (выделенная колонка: th/td.tn-table__key)
                                     __row __no __name __num __score __act __toggle __more __group; __wide — колонка только от 1200px, __full — графа карточки на всю ширину;
                                     th: .tn-th--no --num --price --yn --trial --score --act --key --wide
     .tn-sort                        кнопка сортировки в шапке таблицы
     .tn-empty                       пустой результат отбора
   Карточки и оценка
     .tn-card                        карточка компании: __top __head __name __link __short __why __act __foot; --top
     .tn-trio                        «Первые три по оценке»
     .tn-score                       оценка: --s --m --l; __of __cap
     .tn-marks                       разбивка оценки: __row __name __bar (пять <i>, закрашенные — .is-on) __val __why __total
   Текст и доверие
     .tn-faq                         вопросы и ответы (<details>): __item __q __a
     .tn-crumbs                      хлебные крошки
     .tn-trust                       автор и методика: __who __name __role __facts __stamp __crit __disc
     .tn-prose                       SEO-текст; .tn-note (--warn --example --brief), .tn-toc
     .tn-post                        строка статьи: __meta __title __lead
   Списки и блоки
     .tn-links                       ссылки-строки: __item __name
     .tn-sections                    разделы сайта строками: __item __title __what __subs
     .tn-rows                        строки «плитка — название — условие — число»: __item __main __text __meta; --2
     .tn-matrix                      «кто с какими закупками работает»: __table __list __type
     .tn-proscons                    плюсы и минусы: __col --plus --minus
     .tn-review                      мини-обзор записи: __head __name __aud __terms __act
     .tn-steps                       шаги: __item __no __title __text
     .tn-quiz                        подбор: __q __progress __opts __opt __nav; --teaser
     .tn-calc                        калькулятор: __form __result __row __total __note; --mini
     .tn-cmpbar                      закреплённая панель сравнения: __list __item __count __hint __act
     .tn-cmp                         таблица «рядом»: __head __row __k __v, .is-best
     .tn-co-head                     шапка обзора: __main __side __act
     .tn-sticky-cta                  закреплённая кнопка обзора на телефоне
     .tn-plans                       тарифы
     .tn-verdict                     «кому что подойдёт»: __item
     .tn-terms                       словарь: __letters, dl
   ========================================================================== */

/* ==========================================================================
   Фирменный приём
   ========================================================================== */
.tn-regno, .tn-label, .tn-field__k, .tn-sheet__label, .tn-tag, .tn-count, .tn-found, .tn-crumbs, .tn-post__meta, .tn-cmp__k,
.tn-score__of, .tn-score__cap, .tn-table thead th, .tn-cmpbar__count { word-spacing: var(--tn-ws-num); }
.tn-regno {
  font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: var(--tn-fs-num-s);
  line-height: var(--tn-lh-label); letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.tn-stamp {
  display: inline-flex; align-items: center; min-height: var(--tn-stamp-h);
  padding: 2px 7px; border: var(--tn-bw-rule) solid currentColor; border-radius: var(--tn-r-1);
  font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-stamp); line-height: 1.15;
  text-transform: uppercase; letter-spacing: var(--tn-ls-caps); color: var(--tn-accent-2);
  background: transparent; vertical-align: middle;
}
.tn-stamp--type { border: 1px solid var(--tn-line-strong); color: var(--tn-text-muted); font-weight: var(--tn-fw-semibold); }
.tn-stamp--free { color: var(--tn-success); }
.tn-stamp--trial { color: var(--tn-accent); }
.tn-stamp--ask { color: var(--tn-warning); }
.tn-stamp--nodata { color: var(--tn-warning); border: var(--tn-border-nodata); }
.tn-stamp--mark { color: var(--tn-accent-2); }
.tn-stamp--top { background: var(--tn-accent-2); border-color: var(--tn-accent-2); color: var(--tn-on-accent-2); }
.tn-stamp--in { padding: 0; align-items: stretch; }
.tn-stamp__cell { display: flex; align-items: center; gap: 6px; padding: 2px 7px; }
.tn-stamp__cell + .tn-stamp__cell { border-left: var(--tn-bw-rule) solid currentColor; }
.tn-stamp__cell b { font-family: var(--tn-font-mono); font-weight: var(--tn-fw-semibold); letter-spacing: 0; text-transform: none; }
.tn-stamp--l { min-height: var(--tn-stamp-h-l); font-size: var(--tn-fs-stamp-l); padding: 4px 10px; transform: rotate(var(--tn-stamp-tilt)); }
.tn-stamp--l.tn-stamp--in { padding: 0; }
.tn-stamp--l .tn-stamp__cell { padding: 4px 10px; }

.tn-label {
  font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: var(--tn-fs-label);
  line-height: var(--tn-lh-label); letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted);
}

.tn-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tn-field-min), 1fr)); gap: var(--tn-sp-12) var(--tn-sp-16); }
.tn-field { min-width: 0; padding-bottom: var(--tn-sp-8); border-bottom: var(--tn-border); }
.tn-field__k { display: block; margin-bottom: var(--tn-sp-2); font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: var(--tn-fs-label); line-height: var(--tn-lh-label); letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted); }
.tn-field__v { display: block; font-size: var(--tn-fs-ui); line-height: var(--tn-lh-ui); }
.tn-field__n { display: block; margin-top: var(--tn-sp-2); font-size: var(--tn-fs-micro); line-height: var(--tn-lh-micro); color: var(--tn-text-muted); }
.tn-field--wide { grid-column: 1 / -1; }
.tn-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tn-fields--form { display: block; }
.tn-fields--form .tn-field { display: flex; flex-wrap: wrap; align-items: baseline; min-height: 36px; padding: var(--tn-sp-6) 0; border-bottom: 0; }
.tn-fields--form .tn-field__k { margin: 0; }
.tn-fields--form .tn-field__k::after { content: ""; }
.tn-fields--form .tn-field__dots { display: none; flex: 1; min-width: 16px; margin: 0 var(--tn-sp-8) 4px; border-bottom: var(--tn-leader); }
.tn-fields--form .tn-field__v { flex: 1 0 100%; }

.tn-sheet { position: relative; background: var(--tn-surface); border: var(--tn-border-ink); }
.tn-sheet::after {
  content: ""; position: absolute; pointer-events: none;
  top: var(--tn-copy-shift); left: var(--tn-copy-shift);
  right: calc(-1 * var(--tn-copy-shift)); bottom: calc(-1 * var(--tn-copy-shift));
  border-right: var(--tn-border-copy); border-bottom: var(--tn-border-copy);
}
.tn-sheet__label { display: block; margin-bottom: var(--tn-sp-6); font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: var(--tn-fs-label); line-height: var(--tn-lh-label); letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted); }
.tn-sheet__body { padding: var(--tn-sp-16); }
.tn-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tn-sp-8) var(--tn-sp-16); padding: var(--tn-sp-12) var(--tn-sp-16); border-top: var(--tn-border); }

/* ==========================================================================
   Мелкие
   ========================================================================== */
.tn-logo {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--tn-logo-m); height: var(--tn-logo-m);
  background: var(--tn-surface); border: var(--tn-border-strong); border-radius: var(--tn-r-1);
  font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: 20px; line-height: 1; color: var(--tn-text-muted);
  text-transform: uppercase; overflow: hidden;
}
.tn-logo__img { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: var(--tn-surface); }
.tn-logo.is-loaded { color: transparent; }
.tn-logo--s { width: var(--tn-logo-s); height: var(--tn-logo-s); font-size: 16px; }
.tn-logo--s .tn-logo__img { width: 20px; height: 20px; }
.tn-logo--l { width: var(--tn-logo-l); height: var(--tn-logo-l); font-size: 32px; }
.tn-logo--l .tn-logo__img { width: 40px; height: 40px; }

.tn-co { display: flex; align-items: flex-start; gap: var(--tn-sp-12); min-width: 0; }
.tn-co__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-sp-4) var(--tn-sp-8); min-width: 0; min-height: var(--tn-logo-m); }
.tn-co__name { font-weight: var(--tn-fw-bold); font-size: 17px; line-height: 1.25; color: var(--tn-text); text-decoration: none; }
a.tn-co__name:hover { color: var(--tn-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tn-co--row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tn-sp-6) var(--tn-sp-12); }
.tn-co--row > .tn-co__short, .tn-co--row > .tn-co__types { grid-column: 1 / -1; margin-top: 0; }
.tn-co__short { margin-top: var(--tn-sp-6); font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); }
.tn-co__types { margin-top: var(--tn-sp-4); font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); }

.tn-yn { display: inline-flex; align-items: center; gap: var(--tn-sp-4); font-size: var(--tn-fs-ui); line-height: var(--tn-lh-ui); white-space: nowrap; }
.tn-yn--yes { color: var(--tn-success); font-weight: var(--tn-fw-bold); }
.tn-yn--no { color: var(--tn-text-muted); }

.tn-tag { font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: var(--tn-fs-label); line-height: var(--tn-lh-label); letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted); }
.tn-count { font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: var(--tn-fs-num-s); color: var(--tn-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tn-disc { font-size: var(--tn-fs-micro); line-height: var(--tn-lh-micro); color: var(--tn-text-muted); max-width: 84ch; }

/* ==========================================================================
   Управление
   ========================================================================== */
.tn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tn-sp-8);
  min-height: var(--tn-control-h); padding: 0 var(--tn-sp-16);
  border: 1px solid transparent; border-radius: var(--tn-r-1);
  font-family: var(--tn-font-body); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-ui); line-height: 1.2;
  text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
  transition: color var(--tn-t), background-color var(--tn-t), border-color var(--tn-t);
}
.tn-btn--primary { background: var(--tn-accent); border-color: var(--tn-accent); color: var(--tn-on-accent); }
.tn-btn--primary:hover { background: var(--tn-accent-deep); border-color: var(--tn-accent-deep); color: var(--tn-on-accent); }
.tn-btn--primary:active { background: var(--tn-accent-press); border-color: var(--tn-accent-press); color: var(--tn-on-accent); }
.tn-btn--secondary { background: var(--tn-surface); border-color: var(--tn-line-ink); color: var(--tn-text); }
.tn-btn--secondary:hover { background: var(--tn-bg-2); color: var(--tn-text); }
.tn-btn--secondary:active { background: var(--tn-bg-2); border-width: 2px; padding: 0 calc(var(--tn-sp-16) - 1px); color: var(--tn-text); }
.tn-btn--text {
  min-height: 44px; padding: 0; border: 0; justify-content: flex-start;
  font-weight: var(--tn-fw-regular); color: var(--tn-accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tn-btn--text:hover { color: var(--tn-accent-deep); }
.tn-btn--text:active { color: var(--tn-accent-press); }
.tn-btn--on-carbon { background: var(--tn-surface); border-color: var(--tn-surface); color: var(--tn-text); }
.tn-btn--on-carbon:hover { background: var(--tn-bg-2); border-color: var(--tn-bg-2); color: var(--tn-text); }
.tn-btn--on-carbon:active { background: var(--tn-bg-3); border-color: var(--tn-bg-3); }
.tn-btn--s { min-height: var(--tn-control-h-s); padding: 0 var(--tn-sp-12); font-size: var(--tn-fs-small); }
.tn-btn--s.tn-btn--secondary:active { padding: 0 calc(var(--tn-sp-12) - 1px); }
.tn-btn--s.tn-btn--text, .tn-btn--text.tn-btn--s { padding: 0; }
.tn-btn--l { min-height: var(--tn-control-h-l); }
.tn-btn--block { display: flex; width: 100%; }
.tn-btn[disabled], .tn-btn[aria-disabled="true"] { background: var(--tn-bg-3); border-color: var(--tn-bg-3); color: var(--tn-text-muted); cursor: default; pointer-events: none; }
.tn-btn--secondary[disabled], .tn-btn--secondary[aria-disabled="true"] { background: var(--tn-surface); border-color: var(--tn-line); color: var(--tn-text-faint); }
.tn-btn--text[disabled], .tn-btn--text[aria-disabled="true"] { background: none; color: var(--tn-text-faint); }

.tn-chips { display: flex; flex-wrap: wrap; gap: var(--tn-sp-8); }
.tn-chip {
  display: inline-flex; align-items: center; gap: var(--tn-sp-6);
  min-height: var(--tn-chip-h); padding: 0 var(--tn-sp-12);
  background: var(--tn-surface); border: var(--tn-border-strong); border-radius: var(--tn-r-1);
  font-family: var(--tn-font-body); font-size: var(--tn-fs-ui); line-height: 1.2; color: var(--tn-text);
  text-decoration: none; cursor: pointer;
  transition: color var(--tn-t), background-color var(--tn-t), border-color var(--tn-t);
}
.tn-chip:hover { background: var(--tn-bg-2); color: var(--tn-text); }
.tn-chip__check { display: none; }
.tn-chip[aria-pressed="true"], .tn-chip[aria-current] { background: var(--tn-accent-tint); border-color: var(--tn-accent); color: var(--tn-accent-deep); font-weight: var(--tn-fw-bold); }
.tn-chip[aria-pressed="true"] .tn-chip__check { display: block; }
.tn-chip[disabled] { background: var(--tn-bg-3); color: var(--tn-text-muted); cursor: default; }
.tn-chip .tn-count { color: inherit; }
.tn-chip--x { background: var(--tn-accent-tint); border-color: var(--tn-accent); color: var(--tn-accent-deep); font-size: var(--tn-fs-small); }
.tn-chip--x:hover { background: var(--tn-surface); color: var(--tn-accent-deep); }

.tn-check { position: relative; display: flex; align-items: flex-start; gap: var(--tn-sp-8); min-height: 44px; padding: 12px 0; font-size: var(--tn-fs-ui); line-height: 1.35; cursor: pointer; }
.tn-check input { position: absolute; left: 0; top: 12px; width: var(--tn-check); height: var(--tn-check); margin: 0; opacity: 0; cursor: pointer; }
.tn-check__box { position: relative; flex: none; width: var(--tn-check); height: var(--tn-check); background: var(--tn-surface); border: var(--tn-border-ink); border-radius: var(--tn-r-0); transition: background-color var(--tn-t), border-color var(--tn-t); }
.tn-check__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--tn-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.tn-check input:checked + .tn-check__box { background: var(--tn-accent); border-color: var(--tn-accent); }
.tn-check input:checked + .tn-check__box::after { opacity: 1; }
.tn-check input:focus-visible + .tn-check__box { outline: var(--tn-focus); outline-offset: var(--tn-focus-offset); }
.tn-check:hover .tn-check__box { border-color: var(--tn-accent); }
.tn-check__text { min-width: 0; }
.tn-check--radio .tn-check__box { border-radius: var(--tn-r-round); }
.tn-check--radio .tn-check__box::after { left: 4px; top: 4px; width: 10px; height: 10px; border: 0; border-radius: var(--tn-r-round); background: var(--tn-accent); transform: none; }
.tn-check--radio input:checked + .tn-check__box { background: var(--tn-surface); border-color: var(--tn-accent); }
.tn-check--s { min-height: 32px; padding: 6px 0; font-size: var(--tn-fs-small); }
.tn-check--s input { top: 6px; }

.tn-control { display: block; min-width: 0; }
.tn-control > .tn-label { display: block; margin-bottom: var(--tn-sp-6); }
.tn-control__hint { display: block; margin-top: var(--tn-sp-4); font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); color: var(--tn-text-muted); }
.tn-control__error { display: block; margin-top: var(--tn-sp-4); font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); color: var(--tn-error); }
.tn-input, .tn-select select {
  display: block; width: 100%; min-height: var(--tn-control-h); padding: 0 var(--tn-sp-12);
  background: var(--tn-surface); border: var(--tn-border-strong); border-radius: var(--tn-r-1);
  font-family: var(--tn-font-body); font-size: var(--tn-fs-input); line-height: 1.2; color: var(--tn-text);
  transition: border-color var(--tn-t);
  -webkit-appearance: none; appearance: none;
}
.tn-input:hover, .tn-select select:hover, .tn-input:focus, .tn-select select:focus { border-color: var(--tn-line-ink); }
.tn-input[aria-invalid="true"] { border: 2px solid var(--tn-error); }
.tn-input--num { font-family: var(--tn-font-mono); font-weight: var(--tn-fw-semibold); font-size: var(--tn-fs-num-l); color: var(--tn-accent); font-variant-numeric: tabular-nums; }
.tn-inputbox { position: relative; display: block; }
.tn-inputbox .tn-input { padding-right: 44px; }
.tn-inputbox__unit { position: absolute; right: var(--tn-sp-12); top: 0; bottom: 0; display: flex; align-items: center; font-size: var(--tn-fs-small); color: var(--tn-text-muted); pointer-events: none; }
.tn-select { position: relative; display: block; }
.tn-select select { padding-right: 36px; cursor: pointer; text-overflow: ellipsis; }
.tn-select .tn-icon { position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; pointer-events: none; color: var(--tn-text); }

.tn-tabs { display: flex; overflow-x: auto; border-bottom: var(--tn-border-strong); }
.tn-tabs__tab {
  display: inline-flex; align-items: center; gap: var(--tn-sp-6); flex: none;
  min-height: var(--tn-control-h); padding: 0 var(--tn-sp-16); margin: 0 -1px -1px 0;
  background: var(--tn-bg); border: var(--tn-border-strong); border-top: var(--tn-bw-mark) solid var(--tn-line-strong);
  font-size: var(--tn-fs-ui); color: var(--tn-text); text-decoration: none; white-space: nowrap;
  transition: background-color var(--tn-t);
}
.tn-tabs__tab:hover { background: var(--tn-bg-2); color: var(--tn-text); }
.tn-tabs__tab[aria-selected="true"], .tn-tabs__tab[aria-current] { background: var(--tn-surface); border-top-color: var(--tn-accent); border-bottom-color: var(--tn-surface); font-weight: var(--tn-fw-bold); }
.tn-tabs__panel { background: var(--tn-surface); border: var(--tn-border-strong); border-top: 0; }

/* ==========================================================================
   Реестр: раскладка, фильтры, таблица
   ========================================================================== */
.tn-reg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-12); }
.tn-reg > * { min-width: 0; }
.tn-reg__bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-12); }
.tn-reg__bar > * { min-width: 0; }
.tn-reg__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-sp-8); align-items: end; }
.tn-reg__tools--1 { grid-template-columns: minmax(0, 1fr); }
.tn-reg__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-sp-4) var(--tn-sp-16); }
.tn-reg__status .tn-chips { flex: 1 0 100%; }
.tn-reg__status .tn-chips:empty { display: none; }
.tn-reg__after { margin-top: var(--tn-sp-16); display: grid; gap: var(--tn-sp-8); }
.tn-found { font-family: var(--tn-font-mono); font-weight: var(--tn-fw-semibold); font-size: var(--tn-fs-num); letter-spacing: var(--tn-ls-mono); font-variant-numeric: tabular-nums; }

.tn-filter { display: none; background: var(--tn-surface); border: var(--tn-border-strong); }
.tn-filter.is-open { display: block; position: fixed; inset: 0; z-index: var(--tn-z-menu); overflow-y: auto; border: 0; }
.tn-filter__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--tn-sp-12); min-height: var(--tn-mast-h); padding: 0 var(--tn-sp-16); background: var(--tn-surface); border-bottom: var(--tn-rule); }
.tn-filter__title { font-family: var(--tn-font-heading); font-weight: var(--tn-fw-semibold); font-size: var(--tn-fs-h4); line-height: var(--tn-lh-h4); }
.tn-filter__close { display: inline-flex; align-items: center; gap: var(--tn-sp-8); min-height: 44px; padding: 0 var(--tn-sp-12); border: var(--tn-border-ink); border-radius: var(--tn-r-1); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-ui); }
.tn-filter__body { padding: 0 var(--tn-sp-16) var(--tn-sp-8); }
.tn-filter__group { padding: var(--tn-sp-12) 0; border-top: var(--tn-border); min-width: 0; }
.tn-filter__group:first-child { border-top: 0; }
.tn-filter__group > .tn-label { display: block; margin-bottom: var(--tn-sp-6); }
.tn-filter__group .tn-control + .tn-control { margin-top: var(--tn-sp-12); }
.tn-filter__sub { margin: var(--tn-sp-4) 0 var(--tn-sp-4) 28px; }
.tn-filter__foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tn-sp-8) var(--tn-sp-12); padding: var(--tn-sp-12) var(--tn-sp-16); background: var(--tn-surface); border-top: var(--tn-rule); }
.tn-filter__apply { flex: 1 0 100%; }

.tn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tn-table-wrap--fit { overflow: visible; }
.tn-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--tn-surface); font-size: var(--tn-fs-table); line-height: var(--tn-lh-table); }
.tn-table--scroll { min-width: 640px; }
.tn-table th, .tn-table td { padding: var(--tn-sp-12) var(--tn-sp-8); vertical-align: top; border-bottom: var(--tn-border); border-right: var(--tn-border); text-align: left; }
.tn-table th:last-child, .tn-table td:last-child { border-right: 0; }
.tn-table thead th {
  vertical-align: bottom; background: var(--tn-surface); border-bottom: var(--tn-rule-double);
  font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: var(--tn-fs-th); line-height: var(--tn-lh-th);
  letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted);
}
.tn-table tbody th { font-weight: var(--tn-fw-bold); }
/* числа — вправо; селектор с .tn-table, иначе его перебивает «.tn-table td { text-align: left }» */
.tn-table td.tn-table__num, .tn-table th.tn-table__num, .tn-table th.tn-th--num, .tn-table th.tn-th--price { text-align: right; }
.tn-table__key { background: var(--tn-accent-tint); }
.tn-table thead th.tn-table__key { background: var(--tn-accent-tint); color: var(--tn-accent-deep); }
.tn-table__group th { padding: var(--tn-sp-8); background: var(--tn-bg-2); border-right: 0; font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: 18px; line-height: 1.2; color: var(--tn-text); }
.tn-table__group .tn-table__group-note { margin-left: var(--tn-sp-8); font-family: var(--tn-font-body); font-weight: var(--tn-fw-regular); font-size: var(--tn-fs-small); color: var(--tn-text-muted); }
.tn-table__toggle { min-height: 32px; font-size: var(--tn-fs-small); gap: var(--tn-sp-4); }
.tn-table__toggle[aria-expanded="true"] .tn-icon { transform: rotate(180deg); }
.tn-table__more > td { padding: var(--tn-sp-16); background: var(--tn-bg); border-right: 0; }
.tn-table__more-note { margin-top: var(--tn-sp-12); font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); color: var(--tn-text-muted); }
.tn-table__more-note b { color: var(--tn-text); }

.tn-sort { display: inline-flex; align-items: flex-end; gap: 2px; width: 100%; font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; justify-content: inherit; }
th.tn-th--num .tn-sort, th.tn-th--price .tn-sort { justify-content: flex-end; text-align: right; }
.tn-sort:hover { color: var(--tn-accent-deep); }
.tn-sort__ico { width: 12px; height: 12px; flex: none; stroke-width: 2; }
.tn-sort__ico path { stroke: var(--tn-text-faint); }
th[aria-sort] { color: var(--tn-text); }
th[aria-sort] .tn-sort { color: var(--tn-text); font-weight: var(--tn-fw-semibold); }
th[aria-sort="ascending"] .tn-sort__up, th[aria-sort="descending"] .tn-sort__down { stroke: var(--tn-accent); }

/* --reg до 768px: строка — карточка */
.tn-table--reg, .tn-table--reg > tbody { display: block; }
.tn-table--reg > thead { display: none; }
.tn-table--reg .tn-table__row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--tn-sp-12) var(--tn-sp-16); padding: var(--tn-sp-16); border-bottom: var(--tn-border-ink); }
.tn-table--reg .tn-table__row > td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; background: none; }
.tn-table--reg .tn-table__row > td[data-label] { padding-bottom: var(--tn-sp-8); border-bottom: var(--tn-border); }
.tn-table--reg .tn-table__row > td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--tn-sp-2); font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: var(--tn-fs-label); line-height: var(--tn-lh-label); letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted); }
.tn-table--reg .tn-table__no, .tn-table--reg .tn-table__name, .tn-table--reg .tn-table__act, .tn-table--reg .tn-table__full { grid-column: 1 / -1; }
.tn-table--reg .tn-table__no { margin-bottom: calc(-1 * var(--tn-sp-4)); }
.tn-table--reg .tn-table__name .tn-co__body { padding-right: 76px; }
.tn-table--reg .tn-table__toggle { display: flex; }
.tn-table--reg .tn-table__row > .tn-table__score { position: absolute; top: var(--tn-sp-16); right: var(--tn-sp-16); padding: 0; border: 0; text-align: center; }
.tn-table--reg .tn-table__row > td.tn-table__score::before { display: none; }
.tn-table--reg .tn-table__row > td.tn-table__score { padding: 0; border: 0; }
.tn-table--reg .tn-table__score::after { content: "из 100"; display: block; margin-top: 2px; font-family: var(--tn-font-mono); font-size: var(--tn-fs-th); color: var(--tn-text-muted); }
.tn-table--reg .tn-table__score--nodata::after { display: none; }
.tn-table--reg .tn-table__score--nodata { max-width: 72px; }
.tn-table--reg .tn-table__row > .tn-table__act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-sp-8); align-items: center; }
.tn-table--reg .tn-table__act .tn-btn { min-height: 44px; font-size: var(--tn-fs-ui); }
.tn-table--reg .tn-table__act .tn-check { grid-column: 1 / -1; }
.tn-table--reg .tn-table__group, .tn-table--reg .tn-table__more { display: block; }
.tn-table--reg .tn-table__group th { display: block; border-bottom: var(--tn-border-ink); padding: var(--tn-sp-8) var(--tn-sp-16); }
.tn-table--reg .tn-table__more > td { display: block; border-bottom: var(--tn-border-ink); }
.tn-table--reg .tn-regno__pre { display: inline; }
.tn-regno__pre { display: none; }

.tn-empty { padding: var(--tn-sp-24) var(--tn-sp-16); }
.tn-empty__title { font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-h3); line-height: var(--tn-lh-h3); }
.tn-empty__text { margin: var(--tn-sp-8) 0 var(--tn-sp-16); max-width: 60ch; color: var(--tn-text-muted); }

/* ==========================================================================
   Карточки и оценка
   ========================================================================== */
.tn-score {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: var(--tn-score-w-s); height: var(--tn-score-h-s);
  background: var(--tn-surface); border: var(--tn-border-score); border-radius: var(--tn-r-1);
  font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-score-s); line-height: 1; color: var(--tn-accent);
  font-variant-numeric: tabular-nums;
}
.tn-score__of, .tn-score__cap { font-family: var(--tn-font-mono); font-weight: var(--tn-fw-regular); font-size: var(--tn-fs-th); line-height: 1.2; color: var(--tn-text-muted); }
.tn-score--m { width: var(--tn-score-w-m); height: var(--tn-score-h-m); font-size: var(--tn-fs-score-m); }
.tn-score--l { width: var(--tn-score-w-l); height: var(--tn-score-h-l); font-size: var(--tn-fs-score-l); gap: 2px; }

.tn-marks { background: var(--tn-surface); border: var(--tn-border-strong); padding: var(--tn-sp-16); }
.tn-marks__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tn-sp-4) var(--tn-sp-12); padding: var(--tn-sp-12) 0; border-bottom: var(--tn-border); }
.tn-marks__name { font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-ui); }
.tn-marks__name .tn-label { margin-left: var(--tn-sp-8); font-weight: var(--tn-fw-medium); }
.tn-marks__val { font-family: var(--tn-font-mono); font-weight: var(--tn-fw-semibold); font-size: var(--tn-fs-num); color: var(--tn-accent); white-space: nowrap; }
.tn-marks__bar { grid-column: 1 / -1; display: flex; gap: 2px; }
.tn-marks__bar i { flex: 1; height: 8px; background: var(--tn-bg-3); }
.tn-marks__bar i.is-on { background: var(--tn-accent); }
.tn-marks__why { grid-column: 1 / -1; font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); color: var(--tn-text-muted); }
.tn-marks__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tn-sp-8) var(--tn-sp-16); margin-top: -1px; padding-top: var(--tn-sp-12); border-top: var(--tn-rule-double); }

.tn-card { position: relative; display: flex; flex-direction: column; gap: var(--tn-sp-12); min-width: 0; padding: var(--tn-sp-16); background: var(--tn-surface); border: var(--tn-border-strong); transition: border-color var(--tn-t); }
.tn-card:hover { border-color: var(--tn-line-ink); }
.tn-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-sp-6) var(--tn-sp-12); }
.tn-card__head { display: flex; align-items: center; gap: var(--tn-sp-12); }
.tn-card__name { flex: 1; min-width: 0; align-self: center; font-family: var(--tn-font-body); font-weight: var(--tn-fw-bold); font-size: 17px; line-height: 1.25; }
.tn-card__link { color: var(--tn-text); text-decoration: none; }
.tn-card__link::after { content: ""; position: absolute; inset: 0; }
.tn-card__link:hover { color: var(--tn-accent-deep); }
.tn-card__short { font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); }
.tn-card__why { padding: var(--tn-sp-8) var(--tn-sp-12); background: var(--tn-accent-tint); font-size: var(--tn-fs-ui); line-height: 1.4; color: var(--tn-text); }
.tn-card__why .tn-label { display: block; color: var(--tn-accent-deep); }
.tn-card__act { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-sp-8); margin-top: auto; }
.tn-card__foot { position: relative; z-index: 1; }
.tn-card .tn-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tn-trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-gap); }

/* ==========================================================================
   Текст и доверие
   ========================================================================== */
.tn-faq { border-top: var(--tn-rule); border-bottom: var(--tn-rule); max-width: 920px; }
.tn-faq__item + .tn-faq__item { border-top: var(--tn-border); }
.tn-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--tn-sp-16); min-height: 52px; padding: var(--tn-sp-16) 0; font-weight: var(--tn-fw-bold); font-size: 16px; line-height: 1.35; transition: color var(--tn-t); }
.tn-faq__q:hover { color: var(--tn-accent-deep); }
.tn-faq__item[open] .tn-faq__v { display: none; }
.tn-faq__a { max-width: var(--tn-measure); padding-bottom: var(--tn-sp-20); }
.tn-faq__a p + p { margin-top: var(--tn-sp-8); }

.tn-crumbs { padding: var(--tn-sp-16) 0 var(--tn-sp-12); font-family: var(--tn-font-mono); font-size: var(--tn-fs-micro); line-height: 1.5; letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted); }
.tn-crumbs ol { display: flex; flex-wrap: wrap; }
.tn-crumbs li { display: none; }
.tn-crumbs li:nth-last-child(2) { display: flex; }
.tn-crumbs li:nth-last-child(2)::before { content: "←"; margin-right: var(--tn-sp-8); }
.tn-crumbs a { color: var(--tn-text-muted); }
.tn-crumbs a:hover { color: var(--tn-accent-deep); }
.tn-crumbs [aria-current] { color: var(--tn-text); }

.tn-trust { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-16); padding: var(--tn-sp-16); background: var(--tn-surface); border: var(--tn-border-strong); }
.tn-trust > * { min-width: 0; }
.tn-trust__stamp { justify-self: start; transform: none; }
.tn-trust__who { display: flex; align-items: flex-start; gap: var(--tn-sp-12); }
.tn-trust__who .tn-logo { width: 48px; height: 48px; }
.tn-trust__name { font-weight: var(--tn-fw-bold); font-size: 17px; line-height: 1.25; }
.tn-trust__role { margin: var(--tn-sp-2) 0 var(--tn-sp-4); font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); color: var(--tn-text-muted); }
.tn-trust__crit { display: flex; flex-wrap: wrap; gap: var(--tn-sp-8); margin-top: var(--tn-sp-12); }
.tn-trust__crit li { display: inline-flex; align-items: baseline; gap: var(--tn-sp-6); padding: var(--tn-sp-4) var(--tn-sp-8); border: var(--tn-border); font-size: var(--tn-fs-small); line-height: 1.3; }
.tn-trust__links { display: flex; flex-wrap: wrap; gap: var(--tn-sp-4) var(--tn-sp-20); margin-top: var(--tn-sp-8); font-size: var(--tn-fs-ui); }
.tn-trust__disc { grid-column: 1 / -1; max-width: none; padding-top: var(--tn-sp-12); border-top: var(--tn-border); }

.tn-prose { max-width: var(--tn-measure); font-size: var(--tn-fs-prose); line-height: var(--tn-lh-prose); }
.tn-prose > * + * { margin-top: var(--tn-sp-12); }
.tn-prose h2 { margin-top: var(--tn-sp-40); padding-top: var(--tn-sp-40); border-top: var(--tn-border); }
.tn-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tn-prose h3 { margin-top: 28px; }
.tn-prose h4 { margin-top: var(--tn-sp-20); }
.tn-prose ul, .tn-prose ol { display: grid; gap: var(--tn-sp-8); }
.tn-prose ul > li, .tn-prose ol > li { position: relative; padding-left: var(--tn-sp-24); }
.tn-prose ul > li::before { content: "—"; position: absolute; left: 0; font-family: var(--tn-font-mono); color: var(--tn-text-muted); }
.tn-prose ol { counter-reset: tn-ol; }
.tn-prose ol > li { counter-increment: tn-ol; }
.tn-prose ol > li::before { content: counter(tn-ol); position: absolute; left: 0; font-family: var(--tn-font-mono); font-weight: var(--tn-fw-semibold); color: var(--tn-accent); }
.tn-prose blockquote { padding-left: var(--tn-sp-16); border-left: var(--tn-rule); font-family: var(--tn-font-heading); font-style: italic; font-size: 20px; line-height: 1.35; }
.tn-prose .tn-table { font-size: var(--tn-fs-table); }
.tn-prose .tn-table thead th { background: var(--tn-bg-2); border-bottom: var(--tn-border-ink); }

.tn-note { padding: var(--tn-sp-12) var(--tn-sp-16); border-left: var(--tn-bw-mark) solid var(--tn-line-ink); background: var(--tn-surface); font-size: var(--tn-fs-ui); line-height: 1.5; }
.tn-note > * + * { margin-top: var(--tn-sp-8); }
.tn-note > .tn-stamp { color: var(--tn-text); }
.tn-note--brief { border: var(--tn-border-ink); border-left-width: var(--tn-bw-mark); }
.tn-note--warn { border-left-color: var(--tn-accent-2); background: var(--tn-accent-2-tint); }
.tn-note--warn > .tn-stamp { color: var(--tn-accent-2-deep); }
.tn-note--example { border-left-color: var(--tn-accent); background: var(--tn-accent-tint); }
.tn-note--example > .tn-stamp { color: var(--tn-accent-deep); }

.tn-toc { padding: var(--tn-sp-12) var(--tn-sp-16); border: var(--tn-border-strong); background: var(--tn-surface); font-size: var(--tn-fs-ui); }
.tn-toc ol { counter-reset: tn-toc; display: grid; gap: var(--tn-sp-6); margin-top: var(--tn-sp-8); }
.tn-toc li { counter-increment: tn-toc; display: flex; gap: var(--tn-sp-8); }
.tn-toc li::before { content: counter(tn-toc); font-family: var(--tn-font-mono); font-weight: var(--tn-fw-semibold); color: var(--tn-accent); }

.tn-posts { border-bottom: var(--tn-border); }
.tn-post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-4); padding: var(--tn-sp-16) 0; border-top: var(--tn-border); }
.tn-post__meta { font-family: var(--tn-font-mono); font-size: var(--tn-fs-micro); line-height: 1.4; letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted); }
.tn-post__title { font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: 20px; line-height: 1.2; }
.tn-post__title a { color: var(--tn-text); text-decoration: none; }
.tn-post__title a::after { content: ""; position: absolute; inset: 0; }
.tn-post__title a:hover { color: var(--tn-accent-deep); }
.tn-post__body { min-width: 0; }
.tn-post__lead { margin-top: var(--tn-sp-4); font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); color: var(--tn-text-muted); }

/* ==========================================================================
   Списки и блоки
   ========================================================================== */
.tn-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--tn-gap); border-top: var(--tn-border); }
.tn-links__item { display: flex; align-items: center; gap: var(--tn-sp-12); min-height: 48px; padding: var(--tn-sp-8) 0; border-bottom: var(--tn-border); color: var(--tn-text); text-decoration: none; font-size: var(--tn-fs-ui); line-height: 1.3; }
.tn-links__item:hover { color: var(--tn-accent-deep); background: var(--tn-bg-2); }
.tn-links__name { flex: 1; min-width: 0; }
.tn-links__item .tn-icon { color: var(--tn-accent); }

.tn-sections { background: var(--tn-surface); border: var(--tn-border-ink); }
.tn-sections__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-8); padding: var(--tn-sp-16); }
.tn-sections__item + .tn-sections__item { border-top: var(--tn-border); }
.tn-sections__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tn-sp-4) var(--tn-sp-12); }
.tn-sections__title a { font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: 20px; line-height: 1.2; color: var(--tn-text); text-decoration: none; }
.tn-sections__title a:hover { color: var(--tn-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tn-sections__what { font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); color: var(--tn-text-muted); }
.tn-sections__subs { display: grid; gap: var(--tn-sp-4); font-size: var(--tn-fs-ui); line-height: 1.35; }
.tn-sections__subs a { display: inline-flex; align-items: baseline; gap: var(--tn-sp-6); min-height: 32px; padding: var(--tn-sp-4) 0; }

.tn-rows { background: var(--tn-surface); border: var(--tn-border-strong); }
.tn-rows__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tn-sp-4) var(--tn-sp-16); padding: var(--tn-sp-12) var(--tn-sp-16); border-bottom: var(--tn-rule-double); }
.tn-rows__head h3 { font-size: var(--tn-fs-h4); line-height: var(--tn-lh-h4); }
.tn-rows__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tn-sp-6) var(--tn-sp-12); align-items: center; padding: var(--tn-sp-12) var(--tn-sp-16); }
.tn-rows__item + .tn-rows__item { border-top: var(--tn-border); }
.tn-rows__main { display: flex; align-items: center; gap: var(--tn-sp-8); min-width: 0; }
.tn-rows__name { font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-ui); line-height: 1.25; color: var(--tn-text); text-decoration: none; }
.tn-rows__name:hover { color: var(--tn-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tn-rows__text { grid-column: 1 / -1; font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); }
.tn-rows__meta { grid-row: 1; grid-column: 2; text-align: right; }
.tn-rows__foot { padding: var(--tn-sp-8) var(--tn-sp-16); border-top: var(--tn-border); font-size: var(--tn-fs-ui); }

.tn-matrix__table { display: none; }
.tn-matrix .tn-table { min-width: 760px; }
.tn-matrix .tn-table th, .tn-matrix .tn-table td { padding: var(--tn-sp-8); vertical-align: middle; }
.tn-matrix .tn-table thead th { vertical-align: top; }
.tn-matrix__type { display: block; font-family: var(--tn-font-body); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-small); letter-spacing: 0; color: var(--tn-text); }
.tn-matrix__name { display: flex; align-items: center; gap: var(--tn-sp-8); font-weight: var(--tn-fw-bold); }
.tn-matrix__name a { color: var(--tn-text); text-decoration: none; }
.tn-matrix__name a:hover { color: var(--tn-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; }
.tn-matrix__list { background: var(--tn-surface); border: var(--tn-border-strong); }
.tn-matrix__list details + details { border-top: var(--tn-border); }
.tn-matrix__list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--tn-sp-12); min-height: 52px; padding: var(--tn-sp-8) var(--tn-sp-16); }
.tn-matrix__list summary b { display: block; }
.tn-matrix__list summary span { font-size: var(--tn-fs-small); color: var(--tn-text-muted); }
.tn-matrix__list details[open] > summary .tn-icon { transform: rotate(180deg); }
.tn-matrix__names { padding: 0 var(--tn-sp-16) var(--tn-sp-16); font-size: var(--tn-fs-ui); line-height: 1.5; }
.tn-matrix__names .tn-label { display: block; margin-top: var(--tn-sp-8); }

.tn-proscons { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-16) var(--tn-gap); }
.tn-proscons__col > .tn-label { display: block; margin-bottom: var(--tn-sp-6); }
.tn-proscons__col ul { display: grid; gap: var(--tn-sp-6); }
.tn-proscons__col li { position: relative; padding-left: var(--tn-sp-20); font-size: var(--tn-fs-ui); line-height: 1.4; }
.tn-proscons__col li::before { position: absolute; left: 0; top: 0; font-family: var(--tn-font-mono); font-weight: var(--tn-fw-semibold); }
.tn-proscons__col--plus li::before { content: "+"; color: var(--tn-success); }
.tn-proscons__col--minus li::before { content: "−"; color: var(--tn-text-muted); }

.tn-review { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-12); padding: var(--tn-sp-16); background: var(--tn-surface); border: var(--tn-border-strong); }
.tn-review > * { min-width: 0; }
.tn-review__head { display: flex; align-items: flex-start; gap: var(--tn-sp-12); }
.tn-review__title { flex: 1; min-width: 0; }
.tn-review__name { font-family: var(--tn-font-body); font-weight: var(--tn-fw-bold); font-size: 18px; line-height: 1.25; }
.tn-review__name a { color: var(--tn-text); text-decoration: none; }
.tn-review__name a:hover { color: var(--tn-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tn-review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-sp-4) var(--tn-sp-12); margin-top: var(--tn-sp-4); }
.tn-review__aud { font-size: var(--tn-fs-ui); line-height: 1.45; }
.tn-review__terms { padding-top: var(--tn-sp-12); border-top: var(--tn-border); font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); }
.tn-review__terms .tn-label { display: block; margin-bottom: var(--tn-sp-2); }
.tn-review__act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-sp-8); }

.tn-steps { counter-reset: tn-step; }
.tn-steps__item { position: relative; counter-increment: tn-step; padding: 0 0 var(--tn-sp-20) calc(var(--tn-step-no) + var(--tn-sp-16)); }
.tn-steps__item::before { content: counter(tn-step); position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--tn-step-no); height: var(--tn-step-no); background: var(--tn-surface); border: var(--tn-border-ink); font-family: var(--tn-font-mono); font-weight: var(--tn-fw-semibold); font-size: var(--tn-fs-small); color: var(--tn-accent); }
.tn-steps__item::after { content: ""; position: absolute; left: calc(var(--tn-step-no) / 2); top: var(--tn-step-no); bottom: 0; border-left: var(--tn-border-strong); }
.tn-steps__item:last-child { padding-bottom: 0; }
.tn-steps__item:last-child::after { display: none; }
.tn-steps__title { padding-top: 3px; font-size: var(--tn-fs-h4); line-height: var(--tn-lh-h4); font-weight: var(--tn-fw-semibold); }
.tn-steps__text { margin-top: var(--tn-sp-4); font-size: var(--tn-fs-ui); line-height: 1.45; color: var(--tn-text-muted); max-width: 60ch; }

.tn-quiz { background: var(--tn-surface); border: var(--tn-border-strong); padding: var(--tn-sp-16); }
.tn-quiz__progress { display: flex; align-items: center; gap: var(--tn-sp-12); margin-bottom: var(--tn-sp-12); }
.tn-quiz__scale { display: flex; gap: 3px; }
.tn-quiz__scale i { display: block; width: 20px; height: 8px; background: var(--tn-bg-3); }
.tn-quiz__scale i.is-done { background: var(--tn-accent); }
.tn-quiz__q { font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-h3); line-height: var(--tn-lh-h3); }
.tn-quiz__opts { display: grid; gap: var(--tn-sp-8); margin-top: var(--tn-sp-16); }
.tn-quiz__opt { display: flex; align-items: center; gap: var(--tn-sp-12); min-height: 52px; padding: var(--tn-sp-8) var(--tn-sp-12); background: var(--tn-surface); border: var(--tn-border-strong); border-radius: var(--tn-r-1); color: var(--tn-text); text-decoration: none; font-size: var(--tn-fs-ui); line-height: 1.3; text-align: left; transition: background-color var(--tn-t), border-color var(--tn-t); }
.tn-quiz__opt:hover { background: var(--tn-bg); border-color: var(--tn-line-ink); color: var(--tn-text); }
.tn-quiz__opt[aria-checked="true"], .tn-quiz__opt.is-on { background: var(--tn-accent-tint); border-color: var(--tn-accent); }
.tn-quiz__opt b { display: block; font-size: 16px; }
.tn-quiz__opt span { color: var(--tn-text-muted); font-size: var(--tn-fs-small); }
.tn-quiz__opt > div { flex: 1; min-width: 0; }
.tn-quiz__opt .tn-icon { color: var(--tn-accent); }
.tn-quiz__nav { display: flex; justify-content: space-between; gap: var(--tn-sp-12); margin-top: var(--tn-sp-16); }
.tn-quiz__note { margin-top: var(--tn-sp-12); }

.tn-calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-20) var(--tn-gap); }
.tn-calc > * { min-width: 0; }
.tn-calc__form { display: grid; gap: var(--tn-sp-16); align-content: start; }
.tn-calc__result { padding: var(--tn-sp-16); }
.tn-calc__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tn-sp-4) var(--tn-sp-16); padding: var(--tn-sp-8) 0; border-bottom: var(--tn-border); }
.tn-calc__total { margin-top: -1px; padding-top: var(--tn-sp-12); border-top: var(--tn-rule-double); }
.tn-calc__total .tn-label { display: block; margin-bottom: var(--tn-sp-4); }
.tn-calc__note { margin-top: var(--tn-sp-12); }
.tn-calc--mini { padding: var(--tn-sp-16); background: var(--tn-surface); border: var(--tn-border-strong); }
.tn-calc--mini .tn-calc__form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-sp-12); }
.tn-calc__out { display: grid; gap: var(--tn-sp-8); align-content: start; }

.tn-cmpbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--tn-z-cmpbar); background: var(--tn-carbon); border-top: 1px solid var(--tn-carbon-line); color: var(--tn-on-carbon); }
.tn-cmpbar :focus-visible { outline: var(--tn-focus-on-carbon); }
.tn-cmpbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--tn-sp-12); min-height: var(--tn-cmpbar-h); }
.tn-cmpbar__list { display: none; gap: var(--tn-sp-16); min-width: 0; }
.tn-cmpbar__item { display: flex; align-items: center; gap: var(--tn-sp-8); min-width: 0; font-size: var(--tn-fs-small); font-weight: var(--tn-fw-bold); }
.tn-cmpbar__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-cmpbar__x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--tn-on-carbon-muted); }
.tn-cmpbar__x:hover { color: var(--tn-on-carbon); background: var(--tn-carbon-2); }
.tn-cmpbar__count { font-family: var(--tn-font-mono); font-size: var(--tn-fs-small); }
.tn-cmpbar__hint { display: block; font-family: var(--tn-font-body); font-size: var(--tn-fs-micro); color: var(--tn-on-carbon-muted); }
.tn-cmpbar__act { display: flex; align-items: center; gap: var(--tn-sp-12); flex: none; }
.tn-cmpbar__clear { color: var(--tn-accent-on-dark); font-size: var(--tn-fs-small); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; min-height: 44px; }
.tn-cmpbar__clear:hover { color: var(--tn-on-carbon); }

.tn-cmp { background: var(--tn-surface); border: var(--tn-border-ink); }
.tn-cmp__head, .tn-cmp__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tn-cmp__head > *, .tn-cmp__row > * { min-width: 0; padding: var(--tn-sp-12); }
.tn-cmp__head { border-bottom: var(--tn-rule-double); }
.tn-cmp__head > .tn-cmp__k { display: none; }
.tn-cmp__co { display: grid; gap: var(--tn-sp-8); justify-items: start; align-content: start; }
.tn-cmp__co + .tn-cmp__co, .tn-cmp__v + .tn-cmp__v { border-left: var(--tn-border); }
.tn-cmp__row { border-bottom: var(--tn-border); }
.tn-cmp__row:last-child { border-bottom: 0; }
.tn-cmp__k { grid-column: 1 / -1; padding: var(--tn-sp-6) var(--tn-sp-12); background: var(--tn-bg-2); font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: var(--tn-fs-label); line-height: var(--tn-lh-label); letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted); }
.tn-cmp__v { min-height: 48px; font-size: var(--tn-fs-ui); line-height: 1.4; }
.tn-cmp__v.is-best { background: var(--tn-accent-tint); }
.tn-cmp__best { display: block; margin-top: var(--tn-sp-2); font-size: var(--tn-fs-micro); color: var(--tn-accent-deep); }

.tn-co-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-16); }
.tn-co-head > * { min-width: 0; }
.tn-co-head__main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tn-sp-8) var(--tn-sp-16); align-items: start; }
.tn-co-head__main > .tn-lead, .tn-co-head__main > .tn-co-head__meta { grid-column: 1 / -1; }
.tn-co-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-sp-8) var(--tn-sp-16); }
.tn-co-head__act { display: grid; gap: var(--tn-sp-8); }

.tn-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--tn-z-cta); display: flex; align-items: center; justify-content: space-between; gap: var(--tn-sp-12); min-height: var(--tn-sticky-cta-h); padding: var(--tn-sp-6) var(--tn-gutter); background: var(--tn-surface); border-top: var(--tn-rule); }
.tn-sticky-cta__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-ui); }
body.has-cmpbar .tn-sticky-cta { bottom: var(--tn-cmpbar-h); }

.tn-plans .tn-table { min-width: 600px; }
.tn-plans__year { background: var(--tn-accent-tint); }
.tn-plans__foot { margin-top: var(--tn-sp-8); }

.tn-verdict { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-gap); }
.tn-verdict__item { display: grid; gap: var(--tn-sp-12); align-content: start; padding: var(--tn-sp-16); background: var(--tn-surface); border: var(--tn-border-ink); }
.tn-verdict__head { display: flex; align-items: center; gap: var(--tn-sp-12); }
.tn-verdict__item ul { display: grid; gap: var(--tn-sp-6); }
.tn-verdict__item li { position: relative; padding-left: var(--tn-sp-20); font-size: var(--tn-fs-ui); line-height: 1.4; }
.tn-verdict__item li::before { content: "—"; position: absolute; left: 0; font-family: var(--tn-font-mono); color: var(--tn-text-muted); }
.tn-verdict__act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-sp-8); }

.tn-terms__letters { display: flex; flex-wrap: wrap; gap: var(--tn-sp-8); margin-bottom: var(--tn-sp-16); }
.tn-terms dl { border-top: var(--tn-rule); }
.tn-terms dt { padding-top: var(--tn-sp-12); font-weight: var(--tn-fw-bold); font-size: 17px; }
.tn-terms dd { padding-bottom: var(--tn-sp-12); border-bottom: var(--tn-border); max-width: var(--tn-measure); }

/* ==========================================================================
   768px
   ========================================================================== */
@media (min-width: 768px) {
  .tn-fields--form .tn-field { flex-wrap: nowrap; }
  .tn-fields--form .tn-field__dots { display: block; }
  .tn-fields--form .tn-field__v { flex: 0 1 auto; text-align: right; }
  .tn-sheet__body { padding: var(--tn-sp-20); }

  .tn-btn--text { min-height: var(--tn-control-h-s); }
  .tn-chip { font-size: var(--tn-fs-small); }
  .tn-check { min-height: 32px; padding: 6px 0; }
  .tn-check input { top: 6px; }

  .tn-reg__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tn-sp-12) var(--tn-sp-24); }
  .tn-reg__need { flex: 1 1 auto; }
  .tn-reg__tools { flex: 0 0 auto; margin-left: auto; grid-template-columns: auto minmax(200px, auto); }
  .tn-reg__status { flex: 1 0 100%; }
  .tn-reg--bar .tn-reg__status { flex: 1 1 0; order: -1; min-width: 240px; }
  .tn-reg--bar [data-filter-open] { display: none; }
  .tn-reg--bar .tn-reg__tools { grid-template-columns: minmax(200px, auto); }

  .tn-filter.is-open, .tn-filter--bar { display: block; position: static; inset: auto; z-index: auto; overflow: visible; border: var(--tn-border-strong); }
  .tn-filter__head { position: static; min-height: 0; padding: var(--tn-sp-12) var(--tn-sp-16) 0; border-bottom: 0; }
  .tn-filter__close { display: none; }
  .tn-filter__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--tn-sp-24); padding: var(--tn-sp-4) var(--tn-sp-16) var(--tn-sp-4); }
  .tn-filter__group:nth-child(-n+3) { border-top: 0; }
  .tn-filter__foot { position: static; padding: var(--tn-sp-8) var(--tn-sp-16); border-top: var(--tn-border); }
  .tn-filter__apply { display: none; }
  .tn-filter--bar .tn-filter__head, .tn-filter--bar .tn-filter__foot { display: none; }
  .tn-filter--bar .tn-filter__body { grid-template-columns: 2fr 1fr 1fr; padding-top: 0; }

  /* --reg от 768px: обычная таблица */
  .tn-table--reg { display: table; table-layout: fixed; }
  .tn-table--reg > thead { display: table-header-group; }
  .tn-table--reg > tbody { display: table-row-group; }
  .tn-table--reg .tn-table__row, .tn-table--reg .tn-table__group, .tn-table--reg .tn-table__more { display: table-row; position: static; padding: 0; border: 0; }
  .tn-table--reg .tn-table__row > td { display: table-cell; height: var(--tn-row-h); padding: var(--tn-sp-12) var(--tn-sp-8); border-bottom: var(--tn-border); border-right: var(--tn-border); transition: background-color var(--tn-t); }
  .tn-table--reg .tn-table__row > td[data-label] { padding-bottom: var(--tn-sp-12); }
  .tn-table--reg .tn-table__row > td:last-child { border-right: 0; }
  .tn-table--reg .tn-table__row > td[data-label]::before { display: none; }
  .tn-table--reg .tn-table__row > td.tn-table__num { text-align: right; }
  .tn-table--reg .tn-table__row:hover > td { background: var(--tn-bg); }
  .tn-table--reg .tn-table__row:hover > td.tn-table__key { background: var(--tn-accent-tint); }
  .tn-table--reg .tn-table__row > td.tn-table__key { background: var(--tn-accent-tint); }
  .tn-table--reg .tn-table__no { margin: 0; }
  .tn-table--reg .tn-table__name .tn-co__body { padding-right: 0; min-height: 0; }
  .tn-table--reg .tn-co--row > .tn-logo { grid-row: 1 / span 3; }
  .tn-table--reg .tn-co--row > .tn-co__short, .tn-table--reg .tn-co--row > .tn-co__types { grid-column: 2; }
  .tn-table--reg .tn-table__toggle { display: inline-flex; min-height: 0; margin-left: var(--tn-sp-8); vertical-align: baseline; }
  .tn-table--reg .tn-table__row > td.tn-table__score { position: static; padding: var(--tn-sp-12) var(--tn-sp-8); border-bottom: var(--tn-border); border-right: var(--tn-border); text-align: center; }
  .tn-table--reg .tn-table__score::after { display: none; }
  .tn-table--reg .tn-table__score--nodata { max-width: none; }
  .tn-table--reg .tn-table__row > .tn-table__act { display: table-cell; }
  .tn-table--reg .tn-table__act .tn-btn { display: flex; width: 100%; min-height: var(--tn-control-h-s); font-size: var(--tn-fs-small); padding: 0 var(--tn-sp-8); }
  .tn-table--reg .tn-table__act .tn-btn + .tn-btn { margin-top: var(--tn-sp-6); }
  .tn-table--reg .tn-table__act .tn-check { margin-top: var(--tn-sp-6); min-height: 24px; padding: 2px 0; }
  .tn-table--reg .tn-table__act .tn-check input { top: 2px; }
  .tn-table--reg .tn-table__group th { display: table-cell; padding: var(--tn-sp-8); border-bottom: var(--tn-border); }
  .tn-table--reg .tn-table__more > td { display: table-cell; border-bottom: var(--tn-border); }
  .tn-table--reg .tn-regno__pre { display: none; }
  .tn-table--reg .tn-table__wide, .tn-table--reg .tn-th--wide { display: none; }
  .tn-table--reg .tn-table__row > td.tn-table__wide { display: none; }
  .tn-table-wrap--fit .tn-table thead th { position: sticky; top: 0; z-index: var(--tn-z-sticky); }
  .tn-co__name { font-size: 16px; }

  .tn-th--no { width: 56px; }
  .tn-th--price { width: 104px; }
  .tn-th--yn { width: 92px; }
  .tn-th--score { width: 76px; }
  .tn-th--act { width: 116px; }
  .tn-th--key { width: 190px; }

  .tn-card { padding: var(--tn-sp-20); }
  .tn-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-trio > :first-child { grid-column: 1 / -1; }
  .tn-faq__q { font-size: 17px; }

  .tn-crumbs li, .tn-crumbs li:nth-last-child(2) { display: flex; }
  .tn-crumbs li:nth-last-child(2)::before { content: none; }
  .tn-crumbs li + li::before, .tn-crumbs li:nth-last-child(2):not(:first-child)::before { content: "/"; margin: 0 var(--tn-sp-8); color: var(--tn-text-faint); }

  .tn-trust { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tn-sp-16) 0; padding: var(--tn-sp-24); }
  .tn-trust__stamp { position: absolute; top: var(--tn-sp-16); right: var(--tn-sp-20); transform: rotate(var(--tn-stamp-tilt)); }
  .tn-trust__who { padding-right: var(--tn-sp-24); }
  .tn-trust__facts { padding-left: var(--tn-sp-24); padding-top: var(--tn-sp-40); border-left: var(--tn-border); }

  .tn-post { grid-template-columns: 128px minmax(0, 1fr) auto; gap: var(--tn-sp-4) var(--tn-sp-20); align-items: baseline; }
  .tn-post__title { font-size: 22px; }
  .tn-post__lead { font-size: var(--tn-fs-ui); }
  .tn-post__lead { max-width: var(--tn-measure); }

  .tn-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-links__item { min-height: 44px; }
  .tn-sections__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tn-sp-8) var(--tn-sp-24); padding: var(--tn-sp-16) var(--tn-sp-20); }
  .tn-sections__subs a { min-height: 28px; padding: var(--tn-sp-2) 0; }

  .tn-rows__item { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) auto; }
  .tn-rows__text { grid-column: auto; }
  .tn-rows__meta { grid-row: auto; grid-column: auto; }

  .tn-matrix__table { display: block; }
  .tn-matrix__list { display: none; }

  .tn-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-review { padding: var(--tn-sp-20); }
  .tn-review__act { grid-template-columns: repeat(2, max-content); }

  .tn-quiz { padding: var(--tn-sp-24); }
  .tn-quiz--teaser .tn-quiz__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-calc--mini { padding: var(--tn-sp-20); }

  .tn-cmpbar__list { display: flex; }
  .tn-cmpbar__count { display: none; }
  .tn-cmp__head, .tn-cmp__row { grid-template-columns: 160px repeat(2, minmax(0, 1fr)); }
  .tn-cmp__head > .tn-cmp__k { display: block; background: none; }
  .tn-cmp__k { grid-column: auto; padding: var(--tn-sp-12); background: none; }
  .tn-cmp__k + .tn-cmp__v, .tn-cmp__k + .tn-cmp__co { border-left: var(--tn-border); }

  .tn-co-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .tn-co-head__act { grid-template-columns: repeat(2, max-content); }
  .tn-sticky-cta { display: none; }
  .tn-verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   1200px
   ========================================================================== */
@media (min-width: 1200px) {
  .tn-reg--side { grid-template-columns: var(--tn-filter-w) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--tn-sp-12) var(--tn-sp-24); }
  .tn-reg--side > .tn-filter { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: var(--tn-sp-16); display: block; inset: auto; z-index: auto; overflow: visible; border: var(--tn-border-strong); }
  .tn-reg--side > .tn-reg__bar { grid-column: 2; grid-row: 1; }
  .tn-reg--side > .tn-reg__main { grid-column: 2; grid-row: 2; }
  .tn-reg--side .tn-filter__body { display: block; }
  .tn-reg--side .tn-filter__group:nth-child(-n+3) { border-top: var(--tn-border); }
  .tn-reg--side .tn-filter__group:first-child { border-top: 0; }
  .tn-reg--side .tn-reg__need, .tn-reg--side [data-filter-open] { display: none; }
  .tn-reg--side .tn-reg__tools { grid-template-columns: minmax(200px, auto); }
  .tn-reg--side .tn-reg__status { flex: 1 1 0; order: -1; min-width: 240px; }

  .tn-table--reg .tn-th--wide { display: table-cell; }
  .tn-table--reg .tn-table__row > td.tn-table__wide { display: table-cell; }
  .tn-th--no { width: var(--tn-regno-w); }
  .tn-th--num { width: 88px; }
  .tn-th--trial { width: 84px; }
  .tn-th--act { width: 124px; }
  .tn-th--key { width: 240px; }

  .tn-trio { grid-template-columns: 6fr 3fr 3fr; }
  .tn-trio > :first-child { grid-column: auto; }
  .tn-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tn-links--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-sections__item { grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .tn-sections__subs { grid-template-columns: minmax(0, 1fr); }
  .tn-review { grid-template-columns: minmax(0, 1fr); }
}