/* ==========================================================================
   tendery — «Реестр под копирку». База: сброс, типографика, сетка, шапка, подвал.
   Подключается после tokens.css. Медиазапросы — только 768px и 1200px.
   Содержание:
     1. Сброс                     5. Заголовок блока .tn-sec-head
     2. Типографика               6. Шапка .tn-header (.tn-topline, .tn-mast, .tn-nav, .tn-menu)
     3. Служебные классы          7. Подвал .tn-footer
     4. Сетка .tn-container       8. Знак .tn-mark
   ========================================================================== */

/* ---------- 1. Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tn-bg);
  color: var(--tn-text);
  font: var(--tn-fw-regular) var(--tn-fs-body)/var(--tn-lh-body) var(--tn-font-body);
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: inherit; text-align: left; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: var(--tn-focus); outline-offset: var(--tn-focus-offset); }
html.tn-lock-menu, html.tn-lock-filter { overflow: hidden; }

/* ---------- 2. Типографика ---------- */
h1, h2, h3, h4 {
  font-family: var(--tn-font-heading);
  font-weight: var(--tn-fw-bold);
  letter-spacing: var(--tn-ls-heading);
  color: var(--tn-text);
}
h1 { font-size: var(--tn-fs-h1); line-height: var(--tn-lh-h1); text-wrap: balance; }
h2 { font-size: var(--tn-fs-h2); line-height: var(--tn-lh-h2); }
h3 { font-size: var(--tn-fs-h3); line-height: var(--tn-lh-h3); }
h4 { font-size: var(--tn-fs-h4); line-height: var(--tn-lh-h4); font-weight: var(--tn-fw-semibold); }

a {
  color: var(--tn-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--tn-t), background-color var(--tn-t), border-color var(--tn-t);
}
a:hover { color: var(--tn-accent-deep); }
a:active { color: var(--tn-accent-press); }
strong, b { font-weight: var(--tn-fw-bold); }

/* ---------- 3. Служебные классы ---------- */
.tn-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* переход по якорю: заголовок не прижимается к краю окна */
:target, [id^="h-"], .tn-reg { scroll-margin-top: var(--tn-sp-16); }
.tn-skip {
  position: absolute; left: 8px; top: -100px; z-index: var(--tn-z-popover);
  padding: 8px 12px; background: var(--tn-surface); border: var(--tn-border-ink); color: var(--tn-text);
}
.tn-skip:focus { top: 8px; }

.tn-lead { font-size: var(--tn-fs-lead); line-height: var(--tn-lh-lead); max-width: 84ch; }
.tn-small { font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); }
.tn-micro { font-size: var(--tn-fs-micro); line-height: var(--tn-lh-micro); color: var(--tn-text-muted); }
.tn-muted { color: var(--tn-text-muted); }
.tn-dash { color: var(--tn-text-faint); }

/* впечатанные данные: число, цена, дата */
.tn-num {
  font-family: var(--tn-font-mono);
  font-weight: var(--tn-fw-medium);
  font-size: var(--tn-fs-num);
  line-height: var(--tn-lh-num);
  color: var(--tn-accent);
  font-variant-numeric: tabular-nums;
  word-spacing: var(--tn-ws-num);
  white-space: nowrap;
}
.tn-num--s { font-size: var(--tn-fs-num-s); }
.tn-num--l { font-size: var(--tn-fs-num-l); font-weight: var(--tn-fw-semibold); }
.tn-num--xl { font-size: var(--tn-fs-num-xl); font-weight: var(--tn-fw-semibold); line-height: 1.05; }
.tn-unit { font-family: var(--tn-font-body); font-size: var(--tn-fs-small); color: var(--tn-text-muted); word-spacing: normal; }
.tn-date {
  display: block;
  word-spacing: var(--tn-ws-num);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-fs-th);
  line-height: var(--tn-lh-th);
  color: var(--tn-text-muted);
  letter-spacing: var(--tn-ls-mono);
}

.tn-icon { width: var(--tn-icon); height: var(--tn-icon); flex: none; stroke-width: var(--tn-icon-stroke); }
.tn-icon--s { width: var(--tn-icon-s); height: var(--tn-icon-s); stroke-width: var(--tn-icon-stroke-s); }
.tn-icon--l { width: var(--tn-icon-l); height: var(--tn-icon-l); }

/* ---------- 4. Сетка ---------- */
.tn-container {
  width: 100%;
  max-width: var(--tn-container);
  margin-inline: auto;
  padding-inline: var(--tn-gutter);
}
.tn-main { display: block; padding-bottom: var(--tn-section); }
.tn-section { margin-top: var(--tn-section); }
.tn-grid { display: grid; grid-template-columns: repeat(var(--tn-cols), minmax(0, 1fr)); gap: var(--tn-gap); }
.tn-grid > * { min-width: 0; grid-column: 1 / -1; }
.tn-cols-2, .tn-cols-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-24) var(--tn-gap); }
.tn-cols-2 > *, .tn-cols-3 > * { min-width: 0; }
body.has-cmpbar { padding-bottom: var(--tn-cmpbar-h); }

/* ---------- 5. Заголовок блока ---------- */
.tn-sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--tn-sp-8) var(--tn-sp-24);
  border-top: var(--tn-rule);
  padding-top: var(--tn-sp-12);
  margin-bottom: var(--tn-block-gap);
}
.tn-sec-head > :only-child { grid-column: 1 / -1; }
.tn-sec-head__note { grid-column: 1 / -1; max-width: 84ch; color: var(--tn-text-muted); font-size: var(--tn-fs-ui); line-height: 1.45; }
.tn-sec-head__link { font-size: var(--tn-fs-ui); white-space: nowrap; }

/* ---------- 6. Шапка ---------- */
.tn-header { background: var(--tn-bg); border-bottom: var(--tn-rule); }

.tn-topline { background: var(--tn-bg-2); word-spacing: var(--tn-ws-num); font-family: var(--tn-font-mono); font-size: var(--tn-fs-micro); letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted); }
.tn-topline__in { display: flex; align-items: center; justify-content: space-between; gap: var(--tn-sp-16); min-height: var(--tn-topline-h); }
.tn-topline__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-topline__links { display: none; gap: var(--tn-sp-20); }
.tn-topline__links a { color: var(--tn-text-muted); }
.tn-topline__links a:hover { color: var(--tn-accent-deep); }

.tn-mast__in { display: flex; align-items: center; justify-content: space-between; gap: var(--tn-sp-16); min-height: var(--tn-mast-h); }
.tn-brand { display: flex; align-items: center; gap: var(--tn-sp-8); min-width: 0; color: var(--tn-text); text-decoration: none; }
.tn-brand:hover { color: var(--tn-accent-deep); }
.tn-brand__name { font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-brand); line-height: 1; }
.tn-brand__tag { word-spacing: var(--tn-ws-num); display: none; margin-left: var(--tn-sp-8); padding-left: var(--tn-sp-12); border-left: var(--tn-border-strong); font-family: var(--tn-font-mono); font-size: var(--tn-fs-label); line-height: var(--tn-lh-label); letter-spacing: var(--tn-ls-mono); color: var(--tn-text-muted); }
.tn-mast__side { display: flex; align-items: center; gap: var(--tn-sp-12); flex: none; }
.tn-mast .tn-mast__cta { display: none; }
.tn-mast__menu {
  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); background: var(--tn-surface);
  font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-ui);
  transition: background-color var(--tn-t);
}
.tn-mast__menu:hover { background: var(--tn-bg-2); }

.tn-nav { display: none; border-top: var(--tn-border); }
.tn-nav__in { display: flex; justify-content: space-between; gap: var(--tn-sp-24); }
.tn-nav__list { display: flex; margin-left: calc(-1 * var(--tn-sp-12)); }
.tn-nav__list--aux { margin-left: 0; margin-right: calc(-1 * var(--tn-sp-12)); }
.tn-nav__link {
  position: relative; display: flex; align-items: center; min-height: var(--tn-nav-h); padding: 0 var(--tn-sp-12);
  color: var(--tn-text); text-decoration: none; font-size: var(--tn-fs-ui); white-space: nowrap;
}
.tn-nav__link:hover { background: var(--tn-bg-2); color: var(--tn-text); }
.tn-nav__link[aria-current] { font-weight: var(--tn-fw-bold); }
/* метка текущего пункта — по ширине слова, а не поля ссылки: у крайних пунктов она не выходит за контейнер */
.tn-nav__link[aria-current]::after {
  content: ""; position: absolute; left: var(--tn-sp-12); right: var(--tn-sp-12); bottom: 0;
  border-bottom: var(--tn-bw-mark) solid var(--tn-accent);
}

/* меню до 1200px: панель на весь экран */
.tn-menu { position: fixed; inset: 0; z-index: var(--tn-z-menu); overflow-y: auto; background: var(--tn-surface); }
.tn-menu__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--tn-mast-h); padding: 0 var(--tn-gutter); border-bottom: var(--tn-rule); }
.tn-menu__title { font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-brand); }
.tn-menu__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-menu__close:hover { background: var(--tn-bg-2); }
.tn-menu__body { padding: 0 var(--tn-gutter) var(--tn-sp-24); }
.tn-menu__label { display: block; padding: var(--tn-sp-16) 0 var(--tn-sp-4); }
.tn-menu__link { display: flex; align-items: center; justify-content: space-between; gap: var(--tn-sp-12); min-height: 52px; border-bottom: var(--tn-border); color: var(--tn-text); text-decoration: none; font-size: 17px; }
.tn-menu__link:hover { color: var(--tn-accent-deep); background: var(--tn-bg); }
.tn-menu__cta { margin-top: var(--tn-sp-24); }

/* ---------- 7. Подвал ---------- */
.tn-footer { background: var(--tn-carbon); color: var(--tn-on-carbon); }
.tn-footer :focus-visible { outline: var(--tn-focus-on-carbon); }
.tn-footer a { color: var(--tn-on-carbon); text-decoration: none; }
.tn-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tn-footer__line { word-spacing: var(--tn-ws-num); border-bottom: 1px solid var(--tn-carbon-line); font-family: var(--tn-font-mono); font-size: var(--tn-fs-micro); letter-spacing: var(--tn-ls-mono); color: var(--tn-on-carbon-muted); }
.tn-footer__line-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tn-sp-4) var(--tn-sp-16); min-height: 40px; padding-block: var(--tn-sp-8); }
.tn-footer__line a { color: var(--tn-accent-on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tn-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tn-sp-32) var(--tn-gap); padding-block: var(--tn-sp-40); }
.tn-footer__cols > * { min-width: 0; }
.tn-footer__brand { display: flex; align-items: center; gap: var(--tn-sp-8); font-family: var(--tn-font-heading); font-weight: var(--tn-fw-bold); font-size: var(--tn-fs-brand); line-height: 1; }
.tn-footer__about { margin-top: var(--tn-sp-12); max-width: 44ch; font-size: var(--tn-fs-ui); line-height: 1.5; color: var(--tn-on-carbon-muted); }
.tn-footer__label { word-spacing: var(--tn-ws-num); display: block; margin-bottom: var(--tn-sp-8); 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-on-carbon-muted); }
.tn-footer__link { display: flex; align-items: center; min-height: 44px; font-size: var(--tn-fs-ui); line-height: 1.3; }
.tn-footer__disc { padding: var(--tn-sp-12) var(--tn-sp-16); border: 1px solid var(--tn-carbon-line); font-size: var(--tn-fs-small); line-height: var(--tn-lh-small); color: var(--tn-on-carbon); }
.tn-footer__disc a { color: var(--tn-accent-on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tn-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--tn-sp-8) var(--tn-sp-20); padding-block: var(--tn-sp-20) var(--tn-sp-32); font-size: var(--tn-fs-micro); line-height: var(--tn-lh-micro); color: var(--tn-on-carbon-muted); }
.tn-footer__bottom a { color: var(--tn-on-carbon-muted); }

/* ---------- 8. Знак ---------- */
.tn-mark { width: var(--tn-mark); height: var(--tn-mark); flex: none; }
.tn-mark__copy { stroke: var(--tn-accent); }
.tn-mark__stamp { fill: var(--tn-bg); stroke: var(--tn-accent-2); }
.tn-mark__no { stroke: var(--tn-accent-2); }
.tn-footer .tn-mark__copy, .tn-cmpbar .tn-mark__copy { stroke: var(--tn-on-carbon-muted); }
.tn-footer .tn-mark__stamp { fill: var(--tn-carbon); stroke: var(--tn-accent-2-on-dark); }
.tn-footer .tn-mark__no { stroke: var(--tn-accent-2-on-dark); }

/* ---------- 768px ---------- */
@media (min-width: 768px) {
  html.tn-lock-filter { overflow: visible; }
  .tn-cols-2, .tn-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-topline__links { display: flex; }
  .tn-brand__tag { display: block; }
  .tn-mast .tn-mast__cta { display: inline-flex; }
  .tn-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-footer__link { min-height: 36px; }
}

/* ---------- 1200px ---------- */
@media (min-width: 1200px) {
  html.tn-lock-menu { overflow: visible; }
  .tn-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tn-mast__menu { display: none; }
  .tn-nav { display: block; }
  .tn-menu { display: none; }
  .tn-footer__cols { grid-template-columns: 5fr 3fr 3fr 3fr; }
}