/* ============================================================
   Шрифты портала — самостоятельный хостинг woff2
   ============================================================
   Golos Text (400/600/700/800) — единственный интерфейсный шрифт,
   кириллица нарисована в нём изначально, а не адаптирована.
   JetBrains Mono (400/500) — только цифры, артикулы, даты, пробеги,
   erid и служебные подписи капслоком.

   ПОЧЕМУ НЕ GOOGLE FONTS С ВНЕШНЕГО ДОМЕНА
   Внешний домен тормозит первую отрисовку и передаёт IP посетителя
   третьей стороне — вопрос 152-ФЗ. Файлы лежат рядом с сайтом.

   ПОЧЕМУ НЕТ ВЕСА 500 У GOLOS И 700 У MONO
   Каждый вес — это два файла (кириллица + латиница) и ~58 КБ. Разница
   между 500 и 600 на кегле 14-15 px не видна, а 116 КБ на каждой
   странице видны в LCP. Там, где макет просил 500, стоит 600.

   Только подмножества cyrillic и latin: cyrillic-ext, latin-ext и
   vietnamese порталу не нужны, а это ещё половина объёма.
   ============================================================ */

/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/GolosText-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/GolosText-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/GolosText-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/GolosText-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/GolosText-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/GolosText-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/GolosText-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/GolosText-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ТехноПортал №1 — токены дизайн-системы
   ============================================================

   ОДНА система, ДВЕ темы. Компоненты не знают о цвете: они знают
   только имена ролей (--surface, --text-2, --accent). Смена темы
   меняет значения токенов, а не набор компонентов.

   Значения тёмной темы сняты с эмблемы Цифрового механика: тёмно-синий
   #091527 занимает 24 % площади знака, голубой #21C3EB взят из свечения.
   Это не декоративный выбор — портал получает цвет от собственного
   продукта, а не от моды.

   ПОЧЕМУ ЯРКИЙ ГОЛУБОЙ ЕСТЬ ТОЛЬКО В ТЁМНОЙ ТЕМЕ
   #21C3EB на белом даёт контраст 2.1:1 — это провал WCAG для текста и
   резь в глазах на длинной статье. В светлой теме та же роль отдана
   #0B5C8A (контраст 6.6:1 на белом). Роль одна, значение разное — ровно
   для этого и нужны токены.
   ============================================================ */

/* ── Светлая тема: значения по умолчанию ────────────────────────
   Светлая — база, потому что 90 % контента портала это статьи и
   нормативные материалы, а их читают на светлом. Тёмная включается
   атрибутом. */
:root {
  --page:        #E8ECF0;
  --header:      #0F2B46;
  --bg:          #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F4F6F8;
  --line:        #D7DDE3;
  --line-soft:   #E6EAEE;
  --text:        #0F2B46;
  --text-2:      #3D4C5A;
  --text-3:      #5A6B7A;
  --accent:      #0B5C8A;
  --accent-ink:  #FFFFFF;
  --accent-soft: #0B5C8A;
  --danger:      #A8322A;
  --danger-ink:  #FFFFFF;
  /* Смысловые цвета: выгода и предупреждение. Появились, когда разбор
     встроенных стилей нашёл в содержимом зелёный #2E7D32 и оранжевый
     #C55A11 — они несут смысл, а не оформление, и в тёмной теме дают
     3,4:1 и 2,9:1. Здесь оба читаются в обеих темах. */
  --ok:          #1E6B33;
  --ok-ink:      #FFFFFF;
  --warn:        #8A5200;
  --warn-ink:    #FFFFFF;
  /* Цвет коммерческого действия. Оранжевый — опознавательный знак
     страхового раздела, но #E8711F под белой подписью даёт 3,08:1.
     Здесь тон сохранён, светлота приведена к читаемой. */
  --cta:         #B4530A;   /* заливка под белой подписью */
  --cta-ink:     #FFFFFF;
  --cta-text:    #A34A08;   /* тот же оранжевый как текст и рамка */
  --hatch-a:     #E4E9ED;
  --hatch-b:     #EEF1F4;

  /* Шапка и подвал синие в обеих темах — опора бренда. Текст на них
     задаётся отдельными токенами, иначе в светлой теме он унаследует
     тёмный --text и станет нечитаемым. */
  --on-header:      #FFFFFF;
  --on-header-2:    #BBCEDE;
  --on-header-3:    #8FA9C0;
  --on-header-line: #2E5A80;

  /* Геометрия и ритм — общие для тем. Шаг 8 px. */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 56px;  --sp-10: 72px;

  --content: 1280px;   /* контентная ширина */
  --measure: 720px;    /* длина строки в статье: длиннее читать тяжело */
  --gutter: 36px;      /* внешний отступ секции */

  /* Прямые углы во всей системе. Единственное исключение — круглая
     эмблема, у неё свой токен. Это не вкус: отсутствие радиусов, теней
     и градиентов — ещё и скорость отрисовки длинных лент. */
  --radius: 0;
  --radius-round: 50%;

  --line-w: 1px;
  --accent-bar: 3px;   /* акцентная полоса-маркер */

  /* Движение только там, где оно сообщает о состоянии. Переходим
     цветом и рамкой, никогда размером и положением: сдвиг элемента под
     курсором мешает попасть по нему на тачпаде и телефоне. */
  --motion: 120ms ease;

  --font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* ── Тёмная тема ───────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --page:        #04101E;
  --header:      #091527;
  --bg:          #071426;
  --surface:     #0C2138;
  --surface-2:   #10314F;
  --line:        #1A4A72;
  --line-soft:   #163B5C;
  --text:        #F2F8FC;
  --text-2:      #A9C2D8;
  --text-3:      #86A0B8;
  --accent:      #21C3EB;
  --accent-ink:  #04101E;
  --accent-soft: #0F7FA0;
  --danger:      #ED7266;
  --danger-ink:  #04101E;
  --ok:          #4ADE80;
  --ok-ink:      #04101E;
  --warn:        #F0B429;
  --warn-ink:    #04101E;
  --cta:         #A84E06;
  --cta-ink:     #FFFFFF;
  --cta-text:    #F2913F;
  --hatch-a:     #133150;
  --hatch-b:     #0E2740;

  color-scheme: dark;
}

/* Системное предпочтение действует, только пока человек не выбрал сам.
   Явный выбор ставит data-theme, и медиазапрос до него не достаёт. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --page:        #04101E;
    --header:      #091527;
    --bg:          #071426;
    --surface:     #0C2138;
    --surface-2:   #10314F;
    --line:        #1A4A72;
    --line-soft:   #163B5C;
    --text:        #F2F8FC;
    --text-2:      #A9C2D8;
    --text-3:      #86A0B8;
    --accent:      #21C3EB;
    --accent-ink:  #04101E;
    --accent-soft: #0F7FA0;
    --danger:      #ED7266;
    --danger-ink:  #04101E;
    --ok:          #4ADE80;
    --ok-ink:      #04101E;
    --warn:        #F0B429;
    --warn-ink:    #04101E;
    --cta:         #A84E06;
    --cta-ink:     #FFFFFF;
    --cta-text:    #F2913F;
    --hatch-a:     #133150;
    --hatch-b:     #0E2740;
    color-scheme: dark;
  }
}

/* ── Уважение к настройке «меньше движения» ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
}

/* ============================================================
   ТехноПортал №1 — основание: типографика, сетка, примитивы
   ============================================================
   Загружается после tokens.css. Ни одного цвета напрямую —
   только var(--token).
   ============================================================ */

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

html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  /* Тонкая настройка рендера: без неё Golos Text на Windows выглядит
     жирнее, чем задумано, и портал теряет плотность. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Заголовки ──────────────────────────────────────────────────
   Кегль отвязан от уровня заголовка: h1 на главной и h1 на странице
   рубрики — разного размера, но оба h1. Размер задаётся классом,
   уровень — смыслом. Это прямое требование SEO-раздела: сверять надо
   не кегль, а смысловой уровень. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Кегль заголовка тянется между телефоном и монитором: фиксированные
   42 px на 800 px ширины дают заголовок в половину экрана. */
h1 { font-size: clamp(30px, 1.6rem + 1.8vw, 42px); line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(24px, 1.3rem + 1vw, 30px); line-height: 1.12; letter-spacing: -0.025em; }
h3 { font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: 0; }
h4 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--sp-5); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--motion), border-color var(--motion);
}
a:hover { color: var(--text); }

img { max-width: 100%; height: auto; }

/* ── Фокус ──────────────────────────────────────────────────────
   Видимый и одинаковый на всём портале. Обводка снаружи элемента,
   чтобы не сдвигать вёрстку и не обрезаться внутри карточки. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Мышью — без обводки, клавиатурой — с обводкой. */
:focus:not(:focus-visible) { outline: none; }

/* Ссылка «к содержимому» для клавиатуры и скринридера. Видна только
   при фокусе — первый Tab на любой странице. */
.tp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 600;
}
.tp-skip:focus { left: 0; }

/* ── Служебные подписи капслоком ────────────────────────────────
   Моноширинный кегль для цифр, дат, артикулов, erid и меток. Это НЕ
   заголовки: в разметке они div/span, иначе ломается иерархия h1→h2→h3. */
.tp-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tp-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Сетка страницы ─────────────────────────────────────────────── */
.tp-wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.tp-section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.tp-section--tight { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.tp-section--alt { background: var(--surface-2); border-top: var(--line-w) solid var(--line); }

/* Ширина строки в тексте статьи. Отдельный класс, а не правило для
   всех абзацев: в карточке и в таблице ограничивать нечего. */
.tp-measure { max-width: var(--measure); }

.tp-grid { display: grid; gap: var(--sp-5); }
.tp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tp-grid--feed { grid-template-columns: 1.55fr 1fr; gap: var(--sp-7); }
.tp-grid--article { grid-template-columns: 1fr 300px; gap: var(--sp-8); }

/* ── Заголовок секции ───────────────────────────────────────────── */
.tp-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.tp-section-head > h2 { font-size: 24px; letter-spacing: -0.02em; }
.tp-more { font-size: 15px; font-weight: 600; white-space: nowrap; }

/* ── Точки перелома ─────────────────────────────────────────────
   1024 — сетки 3→2, 900 — навигация в бургер (совпадает с порогом
   tp-responsive.php, чтобы два файла не спорили), 768 — всё в колонку. */
@media (max-width: 1024px) {
  .tp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .tp-grid--feed { grid-template-columns: 1fr; }
  .tp-grid--article { grid-template-columns: 1fr; }
  :root { --gutter: 24px; }
}
@media (max-width: 768px) {
  .tp-grid--3, .tp-grid--2 { grid-template-columns: 1fr; }
  h1 { font-size: 30px; line-height: 1.08; }
  h2 { font-size: 24px; }
  :root { --gutter: 18px; }
  /* На телефоне текст не мельче 15 px — читают в кабине, при плохом
     свете, часто в перчатках. */
  body { font-size: 16px; }
}

/* ============================================================
   ТехноПортал №1 — компоненты
   ============================================================
   Каждый компонент работает в обеих темах без единого дубля.
   Если понадобился селектор [data-theme="dark"] .Компонент — значит
   не хватает токена; заводится токен, а не второй компонент.
   ============================================================ */

/* ══════════════ ШАПКА ══════════════
   Синяя в обеих темах — опора бренда. Поэтому цвета внутри берутся из
   --on-header-*, а не из --text: иначе в светлой теме тёмный текст лёг
   бы на тёмно-синий фон. */
.tp-header {
  background: var(--header);
  position: relative;
  z-index: 20;
}
.tp-header-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
}
.tp-brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.tp-brand-logo { width: 38px; height: 38px; border-radius: var(--radius-round); object-fit: cover; flex: none; }
.tp-brand-name { font-size: 17px; font-weight: 700; color: var(--on-header); letter-spacing: -0.015em; line-height: 1.1; }
/* Подпись под названием портала. Имя не .tp-brand-tag: так называется
   ссылка в полосе тем на главной, и одинаковое имя для подписи и для
   кнопки дало подписи рамку и высоту 40 px. */
.tp-brand-slogan { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--on-header-3); margin-top: 3px; text-transform: uppercase; }

.tp-nav { display: flex; align-items: center; gap: 22px; }
.tp-nav a { font-size: 15px; font-weight: 500; color: var(--on-header-2); }
.tp-nav a:hover, .tp-nav a[aria-current="page"] { color: var(--on-header); }

.tp-header-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Поле поиска в шапке. Поиска по порталу сейчас нет вовсе — это одна из
   трёх находок аудита, помеченных «крит». */
.tp-search { position: relative; display: flex; }
.tp-search input {
  width: 190px; height: 38px;
  background: transparent;
  border: var(--line-w) solid var(--on-header-line);
  color: var(--on-header);
  font-family: var(--font); font-size: 14px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius);
}
.tp-search input::placeholder { color: var(--on-header-3); }
.tp-search input:hover { border-color: var(--on-header); }

.tp-icon-btn {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: var(--line-w) solid var(--on-header-line);
  color: var(--on-header-2);
  cursor: pointer;
  border-radius: var(--radius);
  transition: color var(--motion), border-color var(--motion);
}
.tp-icon-btn:hover { color: var(--on-header); border-color: var(--on-header); }
.tp-icon-btn svg { width: 18px; height: 18px; flex: none; }

/* ══════════════ КНОПКИ ══════════════ */
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px var(--sp-4);
  border: var(--line-w) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
  /* Зона нажатия не меньше 44 px по высоте — палец в перчатке. */
  min-height: 44px;
}
.tp-btn--primary { background: var(--accent); color: var(--accent-ink); }
.tp-btn--primary:hover { background: var(--text); color: var(--bg); }
.tp-btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.tp-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.tp-btn--on-header { background: transparent; color: var(--on-header); border-color: var(--on-header-line); }
.tp-btn--on-header:hover { border-color: var(--on-header); }
.tp-btn--wide { width: 100%; }

/* ══════════════ МЕТКИ ══════════════ */
.tp-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 9px;
  background: var(--surface-2);
  border: var(--line-w) solid var(--line);
  color: var(--accent);
  border-radius: var(--radius);
}
/* Красный только для сроков, штрафов и запретов. Не для декора. */
.tp-tag--deadline { color: var(--danger); border-color: var(--danger); }
.tp-tag--verified { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ══════════════ КАРТОЧКА МАТЕРИАЛА ══════════════
   Один шаблон, три размера. Сейчас на сайте у части материалов есть
   обложка, у большинства нет; дата в трёх разных форматах; автор виден
   только у первого. */
.tp-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--motion);
  overflow: hidden;
}
.tp-card:hover { border-color: var(--accent); }
.tp-card-cover {
  display: block; width: 100%; height: 140px;
  object-fit: cover;
  border-bottom: var(--line-w) solid var(--line);
  background: repeating-linear-gradient(135deg, var(--hatch-a) 0 8px, var(--hatch-b) 8px 16px);
}
.tp-card-body { padding: var(--sp-4) 18px var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.tp-card-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-3); text-transform: uppercase; }
.tp-card-title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.tp-card-title a { color: var(--text); }
.tp-card-title a:hover { color: var(--accent); }
.tp-card-excerpt { font-size: 15px; color: var(--text-2); margin: 0; }

/* Строка ленты — самый плотный размер, для списков «Главное за сутки». */
.tp-row {
  display: block;
  border-left: var(--accent-bar) solid var(--line);
  padding-left: var(--sp-4);
  transition: border-color var(--motion);
}
.tp-row:hover { border-left-color: var(--accent); }
.tp-row--deadline { border-left-color: var(--danger); }
.tp-row-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-row-title { font-size: 17px; font-weight: 600; line-height: 1.35; margin-top: var(--sp-1); }
.tp-row-title a { color: var(--text); }
.tp-row-title a:hover { color: var(--accent); }

/* ══════════════ БЛОК ЦИФРОВОГО МЕХАНИКА ══════════════
   Продукт портала. Появляется в трёх местах: первый экран главной,
   середина статьи, правая колонка. Один компонент, разные размеры. */
.tp-dm {
  background: var(--surface);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.tp-dm-head { display: flex; align-items: center; gap: var(--sp-3); }
.tp-dm-logo { width: 34px; height: 34px; border-radius: var(--radius-round); flex: none; }
.tp-dm-title { font-size: 16px; font-weight: 600; letter-spacing: 0; }
.tp-dm-lead { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0; }
.tp-dm-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-3); text-transform: uppercase; }
.tp-dm-form { display: flex; gap: var(--sp-3); }
.tp-dm-form .tp-input { flex: 1; }

/* Блок источников под ответом — обязательный элемент, а не украшение.
   Он и доверие человека, и сигнал качества для поисковика, поэтому
   остаётся в HTML, а не подгружается скриптом. */
.tp-sources {
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-4);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  color: var(--text-3);
}

/* ══════════════ ПОЛЯ ФОРМ ══════════════ */
.tp-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.tp-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.tp-input, .tp-textarea, .tp-select {
  width: 100%;
  background: var(--surface-2);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font); font-size: 16px;  /* 16px — иначе iOS зумит форму */
  padding: 14px var(--sp-4);
  min-height: 44px;
}
.tp-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.tp-input::placeholder, .tp-textarea::placeholder { color: var(--text-3); }
.tp-input:hover, .tp-textarea:hover { border-color: var(--accent); }
.tp-error { font-size: 13px; color: var(--danger); }
.tp-input[aria-invalid="true"] { border-color: var(--danger); }

/* ══════════════ ТАБЛИЦА ══════════════
   Данные — половина ценности портала: регламенты ТО, ставки, зарплаты.
   Таблица должна читаться и на телефоне, поэтому прокручивается внутри
   своего контейнера, а не растягивает страницу. */
.tp-table-wrap { overflow-x: auto; border: var(--line-w) solid var(--line); }
.tp-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.tp-table th {
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  text-align: left; padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--line-w) solid var(--line);
}
.tp-table td {
  padding: var(--sp-3) var(--sp-4);
  font-size: 15px; color: var(--text);
  border-top: var(--line-w) solid var(--line-soft);
}
.tp-table td.tp-num { font-family: var(--font-mono); font-size: 14px; }

/* ══════════════ БЛОК НОРМЫ ══════════════
   Для материалов про законы: отдельный видимый элемент, а не абзац в
   тексте. Человек должен увидеть срок, не читая всю статью. */
.tp-norm {
  border: var(--line-w) solid var(--danger);
  padding: var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.tp-norm-date {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--danger); border: var(--line-w) solid var(--danger);
  padding: 5px 8px;
}

/* ══════════════ КАРТОЧКА ПАРТНЁРА ══════════════
   Зона логотипа фиксированная: сейчас логотипы разной высоты и ломают
   ритм каталога. Маркировка erid — в подвале карточки, 11 px и не
   мельче: это требование 38-ФЗ, а не мелкий шрифт для приличия. */
.tp-partner {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--line-w) solid var(--line);
  transition: border-color var(--motion);
}
.tp-partner:hover { border-color: var(--accent); }
.tp-partner-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: 22px 22px 0; }
.tp-partner-logo { width: 132px; height: 44px; object-fit: contain; object-position: left center; flex: none; }
.tp-partner-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
.tp-partner-name { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.tp-partner-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.tp-partner-cta { margin-top: auto; }
.tp-partner-legal {
  border-top: var(--line-w) solid var(--line-soft);
  padding: 10px 22px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
  word-break: break-all;
}

/* ══════════════ ХЛЕБНЫЕ КРОШКИ ══════════════ */
.tp-crumbs { font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tp-crumbs a { color: var(--text-3); }
.tp-crumbs a:hover { color: var(--accent); }

/* ══════════════ ПАГИНАЦИЯ ══════════════
   Постраничная, не бесконечная прокрутка: бесконечная ломает
   индексацию и не даёт дойти до подвала. */
.tp-pager { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tp-pager a, .tp-pager span {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--line-w) solid var(--line);
  font-family: var(--font-mono); font-size: 14px;
  color: var(--text-2);
}
.tp-pager a:hover { border-color: var(--accent); color: var(--accent); }
.tp-pager .tp-pager-current { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ══════════════ ПОДВАЛ ══════════════
   Сейчас в подвале одна строка копирайта — при том что сайт размещает
   рекламу с маркировкой erid и собирает почту. Политика и реквизиты
   обязательны по закону. */
.tp-footer { background: var(--header); color: var(--on-header-2); margin-top: var(--sp-9); }
.tp-footer-inner {
  max-width: var(--content); margin: 0 auto; padding: var(--sp-7) var(--gutter) 28px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7);
}
.tp-footer-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-header-3);
  margin-bottom: var(--sp-4);
}
.tp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tp-footer a { color: var(--on-header-2); font-size: 14px; }
.tp-footer a:hover { color: var(--on-header); }
.tp-footer-legal {
  max-width: var(--content); margin: 0 auto;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  border-top: var(--line-w) solid var(--on-header-line);
  font-size: 13px; color: var(--on-header-3);
}

/* ══════════════ МОБИЛЬНАЯ ПАНЕЛЬ ══════════════
   Закреплённая кнопка «Спросить механика». Основной сценарий портала —
   водитель и механик с телефона, и продукт должен быть в одно касание
   с любой страницы. */
.tp-mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--header);
  border-top: var(--line-w) solid var(--on-header-line);
  padding: var(--sp-3) 18px;
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  display: none;
}
@media (max-width: 900px) {
  .tp-mobile-bar { display: block; }
  /* Место под панель, иначе она перекрывает конец статьи и подвал. */
  body { padding-bottom: 76px; }
  .tp-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
@media (max-width: 560px) {
  .tp-footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   ТехноПортал №1 — страницы
   ============================================================
   Компоненты живут в components.css. Здесь только композиция: как они
   собираются в конкретных шаблонах и как к системе приводится разметка,
   которую отдаёт GeneratePress и существующие шорткоды.

   Ни одного !important: старый CSS темы при включённой системе снят
   целиком, воевать не с чем. Исключение — встроенные style-атрибуты в
   содержимом каталогов; они разбираются фильтром в PHP, а не здесь.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   1. КАРКАС GENERATEPRESS
   ══════════════════════════════════════════════════════════════ */
body { background: var(--bg); }

.site-header {
  background: var(--header);
  border-bottom: none;
}
.inside-header {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 76px;
  display: flex; align-items: center; gap: var(--sp-6);
}
.site-branding, .site-logo { display: flex; align-items: center; }
.main-title, .main-title a {
  color: var(--on-header);
  font-family: var(--font);
  font-size: 20px; font-weight: 700; letter-spacing: -0.015em;
}
.site-description { color: var(--on-header-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* Навигация */
.main-navigation { background: transparent; }
.main-navigation .main-nav ul li a {
  color: var(--on-header-2);
  font-family: var(--font);
  font-size: 15px; font-weight: 500;
  line-height: 76px;
  padding: 0 11px;
  transition: color var(--motion);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--on-header); background: transparent;
}
.main-navigation .menu-toggle { color: var(--on-header); background: transparent; }

/* Поиск и переключатель темы живут внутри <nav>, в общем потоке с
   пунктами меню, — поэтому не могут на них налезть. */
.main-navigation .inside-navigation { display: flex; align-items: center; }
.tp-header-tools { display: flex; align-items: center; gap: var(--sp-3); margin-left: var(--sp-5); }
@media (max-width: 900px) {
  /* На телефоне поле поиска съедает шапку — остаётся переключатель;
     поиск доступен со страницы результатов и из меню. */
  .tp-header-tools { margin-left: auto; margin-right: 56px; }
  .tp-header-tools .tp-search { display: none; }
  .inside-header { min-height: 64px; }
  .main-navigation .main-nav ul li a { line-height: 48px; }
}

/* Полотно страницы */
.site-content { background: var(--bg); }
.inside-article, article.post, article.page {
  background: transparent;
  box-shadow: none;
  border-radius: var(--radius);
}
.separate-containers .inside-article { padding: 0; }

/* ══════════════════════════════════════════════════════════════
   2. ГЛАВНАЯ
   ══════════════════════════════════════════════════════════════
   Первое, что нужно починить, — не цвет, а ширину. Тема отдаёт главной
   шаблон с правым сайдбаром, из-за чего лента получает 376 px, а
   заголовок материала переносится по одной букве. Прежний CSS темы
   лечил это семью правилами с !important; здесь достаточно снять
   сайдбар и вернуть содержимому полную ширину.
   Разбор первого экрана. Сейчас там шесть одинаковых оранжевых кнопок:
   Telegram, Цифровой механик, Страхование, Автокредитование, Купить
   авто, Займ под ПТС. Продукт портала стоит в одном ряду с партнёрской
   ссылкой на займ — внимание не достаётся никому.

   Решение: одно главное действие. Финансовые предложения уходят ниже,
   в свой блок, где они уместны, — человек уже понял, куда попал. */
/* Полная ширина для главной и страниц-инструментов. Класс ставится
   в PHP по списку адресов: см. раздел 10 плагина. */
.tp-full .site-content { padding: 0; display: block; }
.tp-full #primary, .tp-full .content-area { width: 100%; max-width: 100%; float: none; }
.tp-full #right-sidebar, .tp-full #left-sidebar { display: none; }
.tp-full .site-main, .tp-full .inside-article { padding: 0; margin: 0; }
.home .entry-title { display: none; }
.home .entry-content { padding: 0; margin: 0; }

/* Содержимое страниц-инструментов держится контентной ширины: без этого
   при широком мониторе строка растягивается на 1900 px и читать её
   невозможно. */
.tp-full:not(.home) .entry-content {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--sp-7) var(--gutter) var(--sp-8);
}
.tp-full:not(.home) .entry-header { max-width: var(--content); margin: 0 auto; padding: var(--sp-8) var(--gutter) 0; }

/* Полоса быстрых переходов: продукт выделен, остальное — ровный ряд. */
.tp-brands { background: var(--surface-2); border-bottom: var(--line-w) solid var(--line); }
.tp-brands-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4) var(--gutter); max-width: var(--content); margin: 0 auto; }
.tp-brand-tag {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--sp-4);
  background: transparent;
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 14px; font-weight: 500;
  transition: border-color var(--motion), color var(--motion);
}
.tp-brand-tag:hover { border-color: var(--accent); color: var(--accent); }
/* Полоса быстрых переходов держит шесть ссылок одного веса: Telegram,
   Цифровой механик, Страхование, Автокредитование, Купить авто, Займ
   под ПТС. Собственный продукт портала стоял в одном ряду с партнёрской
   ссылкой на займ — внимание не доставалось никому.

   Заливка остаётся ровно у одной ссылки: у продукта. Остальные —
   ровный ряд контурных. Частые темы отмечаются цветом текста, а не
   заливкой: заливка обещает действие, а рубрика не действие. */
.tp-hot-tag-orange, .tp-brand-tag-hot {
  background: transparent; border-color: var(--line); color: var(--text-2); font-weight: 500;
}
.tp-brand-tag-hot { color: var(--accent); border-color: var(--accent); }
.tp-hot-tag-orange:hover, .tp-brand-tag-hot:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

.tp-hot-tags a[href*="digital-mechanic"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.tp-hot-tags a[href*="digital-mechanic"]:hover { background: var(--text); border-color: var(--text); color: var(--bg); }

.tp-hot-tags a, .tp-brands-tags a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--sp-4);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  transition: border-color var(--motion), color var(--motion);
}
.tp-brands { background: var(--surface-2); border-bottom: var(--line-w) solid var(--line); }
.tp-brands-label {
  max-width: var(--content); margin: 0 auto; padding: var(--sp-5) var(--gutter) 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}

/* Каркас главной. Прежний CSS темы задавал те же сетки, но повторял
   вычисление внешнего отступа в семи местах строкой
   `max(32px, calc((100% - 1200px)/2 + 32px))`. Здесь это одна обёртка. */
.tp-brands,
.tp-section-articles,
.tp-section-news,
.tp-section-keys,
.tp-main-grid,
.tp-otto-block { max-width: var(--content); margin-left: auto; margin-right: auto; }

.tp-section-articles, .tp-section-news, .tp-section-keys {
  padding: var(--sp-7) var(--gutter);
  background: transparent;
}
.tp-main-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0 var(--sp-7);
  padding: 0 var(--gutter);
  align-items: start;
}
.tp-main-left { min-width: 0; }
.tp-main-right { min-width: 0; padding-top: var(--sp-7); }
/* Внутри общей сетки секции уже имеют внешний отступ от обёртки. */
.tp-main-grid .tp-section-articles,
.tp-main-grid .tp-section-news { padding-left: 0; padding-right: 0; }

.tp-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.tp-keys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); }
.tp-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.tp-hot-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tp-hot-topics { padding: var(--sp-4) var(--gutter) 0; max-width: var(--content); margin: 0 auto; }

/* Главный материал ленты */
.tp-featured-post {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-5);
  border-bottom: var(--line-w) solid var(--line);
}
.tp-featured-img-wrap { flex: none; display: block; }
.tp-featured-img-wrap img { width: 260px; height: 174px; object-fit: cover; display: block; border: var(--line-w) solid var(--line); }
.tp-featured-body { flex: 1; min-width: 0; }

/* Блок продукта в правой колонке. Прежде это была залитая градиентом
   плашка среди пяти таких же кнопок; теперь — единственное место на
   первом экране, где предлагается действие. */
.tp-otto-block {
  background: var(--surface);
  border: var(--line-w) solid var(--line);
  border-left: var(--accent-bar) solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
}
.tp-otto-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.tp-otto-title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; letter-spacing: 0; }
.tp-otto-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; }
.tp-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px var(--sp-5);
  background: var(--accent); color: var(--accent-ink);
  border: var(--line-w) solid var(--accent); border-radius: var(--radius);
  font-size: 15px; font-weight: 600;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.tp-btn-primary:hover { background: var(--text); border-color: var(--text); color: var(--bg); }

@media (max-width: 1024px) {
  .tp-main-grid { grid-template-columns: 1fr; }
  .tp-main-right { padding-top: 0; }
  .tp-keys-grid, .tp-posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .tp-keys-grid, .tp-posts-grid { grid-template-columns: 1fr; }
  .tp-featured-post { flex-direction: column; }
  .tp-featured-img-wrap img { width: 100%; height: 200px; }
  /* Строка ленты на телефоне разворачивается: метка рубрики и время
     занимают половину ширины, и заголовку остаётся два слова в строке.
     Заголовок идёт первым — он и есть содержание. */
  .tp-list-item { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); }
  .tp-list-title { grid-column: 1 / -1; order: -1; font-size: 16px; }
  .tp-list-cat { justify-self: start; }
  .tp-list-time { justify-self: end; }
  .tp-section-header { flex-wrap: wrap; }
}

/* Заголовки секций главной */
.tp-section-title {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); margin: 0;
}
/* Цвет ссылок.
   ------------------------------------------------------------------
   Тема печатает своё правило на `a` отдельным инлайновым блоком, и он
   приходит после нашего листа. Селектор `body a` весит на один класс
   больше и забирает цвет обратно системе, не прибегая к !important.

   Главное здесь — не специфичность, а разметка. Строка ленты и карточка
   сайдбара это САМИ ссылки, а не заголовки со ссылкой внутри:

       <a class="tp-list-item"><span class="tp-list-title">…

   Поэтому заголовок в них наследует цвет ссылки. В тёмной теме голубой
   акцент на тёмном фоне читался (8,9:1) и дефект был не виден; в светлой
   тот же цвет дал 2,09:1 — заголовки ленты стали нечитаемыми. Цвет
   назначается самому носителю текста, а не воображаемой ссылке внутри. */
body a { color: var(--accent); }
body a:hover { color: var(--text); }

body .tp-section-more, body .tp-all-link {
  font-size: 15px; font-weight: 600; color: var(--accent); white-space: nowrap;
}

/* Ссылки-строки: цвет задаётся самой ссылке и её заголовку. */
body a.tp-list-item, body a.tp-sidebar-card, body a.tp-key-link { color: var(--text-2); }
body a.tp-list-item .tp-list-title,
body a.tp-sidebar-card .tp-sidebar-card-title,
body a.tp-key-link .tp-key-name { color: var(--text); }
body a.tp-list-item:hover .tp-list-title,
body a.tp-sidebar-card:hover .tp-sidebar-card-title,
body a.tp-key-link:hover .tp-key-name { color: var(--accent); }

/* Заголовки со ссылкой внутри — второй вид разметки, он тоже есть. */
body .tp-featured-title a, body .tp-card-title a, body .entry-title a { color: var(--text); }
body .tp-featured-title a:hover, body .tp-card-title a:hover,
body .entry-title a:hover { color: var(--accent); }

/* Полоса быстрых переходов — тоже ссылки, и им нужен свой цвет, иначе
   они получают акцентный от правила `a`. */
body a.tp-hot-tag-orange, body a.tp-brand-tag { color: var(--text-2); }
body a.tp-brand-tag-hot { color: var(--accent); }
body a.tp-hot-tag-orange:hover, body a.tp-brand-tag:hover { color: var(--accent); }
body .tp-hot-tags a[href*="digital-mechanic"],
body .tp-hot-tags a[href*="digital-mechanic"]:hover { color: var(--accent-ink); }
body .tp-hot-tags a[href*="digital-mechanic"]:hover { color: var(--bg); }

/* Главный материал */
.tp-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-7); align-items: start; }
.tp-featured-img img, .tp-card-img-wrap img { width: 100%; height: auto; display: block; border: var(--line-w) solid var(--line); }
.tp-featured-title { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.tp-featured-title a { color: var(--text); }
.tp-featured-title a:hover { color: var(--accent); }
.tp-featured-exc { font-size: 17px; line-height: 1.6; color: var(--text-2); }
.tp-featured-meta, .tp-card-date, .tp-list-time, .tp-sidebar-card-date {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  letter-spacing: 0.04em;
}
/* Дата и автор шли встык: «17:15Александр Зотенков». Разделитель ставится
   стилем, а не правкой шорткода, — разметку менять незачем. */
.tp-featured-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.tp-featured-meta > span + span::before { content: "·"; margin-right: var(--sp-2); color: var(--line); }

/* Метка рубрики — одна на весь портал */
.tp-card-meta, .tp-list-cat, .tp-sidebar-cat, .tp-featured-cat {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  background: var(--surface-2);
  border: var(--line-w) solid var(--line);
  padding: 5px 8px;
  border-radius: var(--radius);
}

/* Лента строк */
.tp-list-item {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: var(--line-w) solid var(--line-soft);
}
.tp-list-title { font-size: 17px; font-weight: 500; line-height: 1.4; flex: 1; }
.tp-list-title a { color: var(--text); }
.tp-list-title a:hover { color: var(--accent); }

/* Боковые карточки */
.tp-sidebar-card {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: var(--line-w) solid var(--line-soft);
}
.tp-sidebar-card-img { width: 84px; height: 60px; object-fit: cover; flex: none; border: var(--line-w) solid var(--line); }
.tp-sidebar-card-noimg { display: none; }
.tp-sidebar-card-title { font-size: 15px; font-weight: 500; line-height: 1.4; }
.tp-sidebar-card-title a { color: var(--text); }
.tp-sidebar-card-title a:hover { color: var(--accent); }

/* Плитки ключевых разделов. Эмодзи в них заменяются на линейные знаки
   фильтром в PHP: 📊 ⚙️ 🚛 🛡️ рисуются каждой системой по-своему, не
   масштабируются под кегль и снижают деловой тон для того, кто
   принимает решение о закупке. */
.tp-key-card {
  background: var(--surface);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--motion);
}
.tp-key-card:hover { border-color: var(--accent); }
.tp-key-link { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); height: 100%; }
.tp-key-icon { width: 24px; height: 24px; color: var(--accent); font-size: 0; }
.tp-key-icon svg { width: 24px; height: 24px; }

/* Знак вместо эмодзи в подписи. Кегль знака берётся от текста — 1em, —
   чтобы он не жил своей жизнью при изменении кегля подписи, а базовая
   линия сдвигается на 0,12em: иначе квадратный значок «висит» над
   строчными буквами. */
.tp-has-icon > svg {
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  margin-right: 0.35em;
  stroke-width: 1.8;
  flex: none;
}
.tp-key-name { font-size: 18px; font-weight: 600; color: var(--text); }
.tp-key-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* ══════════════════════════════════════════════════════════════
   3. МАТЕРИАЛ
   ══════════════════════════════════════════════════════════════
   Главный шаблон портала: именно на него приходит поисковый трафик.
   Строка ограничена 720 px — длиннее читать тяжело, глаз теряет начало
   следующей строки. */
.single .entry-content > *:not(.tp-dm):not(figure):not(table):not(.tp-table-wrap):not(.tp-ins) {
  max-width: var(--measure);
}
.single .entry-title { font-size: 42px; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; max-width: var(--measure); }
.single .entry-content { font-size: 18px; line-height: 1.7; color: var(--text); }
.single .entry-content h2 { font-size: 28px; font-weight: 700; margin: var(--sp-8) 0 var(--sp-4); }
.single .entry-content h3 { font-size: 21px; font-weight: 600; margin: var(--sp-6) 0 var(--sp-3); }
.single .entry-content p { margin: 0 0 var(--sp-5); }
.single .entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.single .entry-content a:hover { color: var(--text); }
.single .entry-content ul, .single .entry-content ol { padding-left: var(--sp-6); margin: 0 0 var(--sp-5); }
.single .entry-content li { margin-bottom: var(--sp-2); }
.single .entry-content blockquote {
  border-left: var(--accent-bar) solid var(--accent);
  padding-left: var(--sp-5); margin: var(--sp-6) 0; color: var(--text-2);
}
.single .entry-content img { border: var(--line-w) solid var(--line); }

.entry-meta, .posted-on, .byline { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); letter-spacing: 0.04em; }
.entry-meta a { color: var(--text-3); }

/* Таблицы в статьях — по образцу таблицы регламента. Прокрутка внутри
   своего контейнера, иначе на телефоне таблица растягивает документ. */
.entry-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.entry-content th {
  background: var(--surface-2); color: var(--text-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--line-w) solid var(--line);
}
.entry-content td { padding: var(--sp-3) var(--sp-4); border-top: var(--line-w) solid var(--line-soft); font-size: 15px; }

/* ══════════════════════════════════════════════════════════════
   4. ЦИФРОВОЙ МЕХАНИК
   ══════════════════════════════════════════════════════════════
   Блок уже встроен в статьи и работает через существующий контур —
   мы только приводим его к системе. Ни одной новой возможности здесь
   не появляется: интерфейс не должен обещать больше, чем умеет
   система за ним. */
.tp-dm {
  background: var(--surface);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
}
.tp-dm-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.tp-dm-logo { border-radius: var(--radius-round); }
.tp-dm-title { font-family: var(--font); font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: 0; }
.tp-dm-lead { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.tp-dm-input {
  width: 100%;
  background: var(--surface-2); color: var(--text);
  border: var(--line-w) solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  padding: 14px var(--sp-4);
}
.tp-dm-input::placeholder { color: var(--text-3); }
.tp-dm-input:hover { border-color: var(--accent); }
.tp-dm-btn {
  background: var(--accent); color: var(--accent-ink);
  border: var(--line-w) solid var(--accent); border-radius: var(--radius);
  font-family: var(--font); font-size: 16px; font-weight: 600;
  padding: 14px var(--sp-6); min-height: 44px; cursor: pointer;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.tp-dm-btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.tp-dm-example {
  background: transparent; color: var(--text-2);
  border: var(--line-w) solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-size: 14px;
  padding: 9px var(--sp-3); min-height: 40px; cursor: pointer;
  transition: border-color var(--motion), color var(--motion);
}
.tp-dm-example:hover { border-color: var(--accent); color: var(--accent); }
.tp-dm-examples { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tp-dm-quota { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.tp-dm-answer { font-size: 17px; line-height: 1.65; color: var(--text); }
/* Блок источников под ответом остаётся в разметке, а не подгружается
   скриптом: он и доверие человека, и сигнал качества для поисковика. */
.tp-dm-answer .tp-dm-sources,
.tp-dm-answer [data-sources] {
  border-left: 2px solid var(--accent); padding-left: var(--sp-4);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--text-3);
}

/* Плагин механика печатает свой лист стилей после нашего и задаёт
   цвета значениями: #1F3864 для кнопки, #637893 для подписи, #1A2B42
   для текста ответа. Правил с !important там нет, поэтому достаточно
   селектора на один класс тяжелее — `body .tp-dm-*`. Разметку и
   поведение виджета не трогаем: он работает через существующий контур. */
body .tp-dm-btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); border-radius: var(--radius); }
body .tp-dm-btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
body .tp-dm-btn[disabled] { opacity: .55; }
body .tp-dm-quota, body .tp-dm-src, body .tp-dm-doc-note { color: var(--text-3); font-family: var(--font-mono); }
body .tp-dm-answer { color: var(--text); }
body .tp-dm-input { background: var(--surface-2); color: var(--text); border-color: var(--line); border-radius: var(--radius); }
body .tp-dm-example { background: transparent; color: var(--text-2); border-color: var(--line); border-radius: var(--radius); }
body .tp-dm-example:hover { border-color: var(--accent); color: var(--accent); }
body .tp-dm-doc { background: var(--surface-2); border-color: var(--line); border-radius: var(--radius); }
body .tp-dm-doc b { color: var(--text); }
body .tp-dm, body .tp-dm-landing { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
body .tp-dm-title { color: var(--text); }
body .tp-dm-lead { color: var(--text-2); }

/* Состояния ответа механика: следующий шаг, документ, выгрузка,
   уточнение, предложение, маркировка, ошибка.
   ------------------------------------------------------------------
   Эти узлы создаёт скрипт уже после загрузки страницы — в разметке их
   нет, и первая редакция системы их не покрыла. При включённой системе
   старый лист снят целиком, поэтому непокрытое состояние выходит голым:
   человек задаёт вопрос и получает ответ без оформления ровно в тот
   момент, когда доверие к ответу решается.

   Роли те же, что были в прежнем листе, но выражены токенами: подсказка
   — вторая поверхность, предложение — цвет действия, маркировка —
   служебный текст (её кегль ниже 11 px опускать нельзя), ошибка —
   цвет отказа. */
body .tp-dm-next {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--surface-2); border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
}
body .tp-dm-next b { display: block; font-size: 13px; color: var(--text); margin-bottom: var(--sp-2); }
body .tp-dm-next a { display: block; font-size: 14px; color: var(--accent); padding: var(--sp-2) 0; min-height: 32px; }

body .tp-dm-follow { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
body .tp-dm-follow button {
  min-height: 44px; padding: 0 var(--sp-4);
  background: transparent; color: var(--text-2);
  border: var(--line-w) solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 13.5px; cursor: pointer;
  transition: border-color var(--motion), color var(--motion);
}
body .tp-dm-follow button:hover { border-color: var(--accent); color: var(--accent); }

body .tp-dm-dl { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
body .tp-dm-dl a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
body .tp-dm-dl a.pdf { background: var(--danger); color: var(--danger-ink); }
body .tp-dm-dl a:hover { background: var(--text); color: var(--bg); }

/* Предложение партнёра внутри ответа — единственное место, где ответ
   механика становится коммерческим. Оно выглядит кнопкой действия и
   обязано нести маркировку: без неё показывать его нельзя (38-ФЗ). */
body .tp-dm-offer {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: var(--sp-3); padding: 0 var(--sp-5);
  background: var(--cta); color: var(--cta-ink);
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
body .tp-dm-offer:hover { filter: brightness(.92); color: var(--cta-ink); }
body .tp-dm-mark { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: var(--sp-2); }

body .tp-dm-err { color: var(--danger); font-size: 15px; line-height: 1.55; }

/* ══════════════════════════════════════════════════════════════
   5. СТРАХОВАНИЕ (ОСАГО, КАСКО)
   ══════════════════════════════════════════════════════════════
   Эти страницы собраны на своих переменных внутри .tp-ins, и первая
   редакция переназначала шесть имён на токены — без префикса `body`.

   Замер в браузере показал, что переназначение не действовало ни разу:
   собственный лист страницы печатается в <head> ПОСЛЕ нашего, вес
   селектора у обоих одинаковый (0,1,0), и при равном весе побеждает
   последний. Внутри .tp-ins так и стояли исходные #E8711F и #1A2B42, а
   в тёмной теме текст заголовков давал 1,29:1.

   Отсюда `body` перед каждым правилом: (0,1,1) против (0,1,0) — вес
   решает независимо от порядка. Урок тот же, что был с !important
   старого листа: побеждает не тот, кто прав, а тот, кто весит больше.

   Переменных теперь семь: к шести исходным добавлен цвет действия.
   Оранжевый #E8711F под белой подписью даёт 3,08:1 — это не оформление,
   а кнопка «Рассчитать», и она обязана читаться. */
body .tp-ins {
  --o:  var(--cta-text);      /* действие: текст, рамка, метка */
  --d:  var(--header);        /* тёмная подложка */
  --t:  var(--text);          /* основной текст */
  --m:  var(--text-2);        /* приглушённый текст */
  --b:  var(--line);          /* рамки */
  --bg: var(--surface-2);     /* фон блоков */
  font-family: var(--font);
}
body .tp-ins-hero { background: var(--header); }
body .tp-ins-hero h1, body .tp-ins-hero__h { color: var(--on-header); }
body .tp-ins-hero__sub, body .tp-ins-hero__ai span { color: var(--on-header-2); }
body .tp-ins-hero__ai b, body .tp-ins-hero__ai a { color: var(--on-header); }
body .tp-ins-chip { border-color: var(--on-header-line); color: var(--on-header-2); }

/* Плашки страницы. В исходнике у всех вшит `background:#fff` — в тёмной
   теме это семь белых прямоугольников на тёмном поле. */
body .tp-ins-card,
body .tp-ins-box,
body .tp-ins-offer,
body .tp-ins-list li,
body .tp-ins-faq__item,
body .tp-ins-more a { background: var(--surface); border-color: var(--line); }

/* Калькулятор — светлый остров, и это решение, а не упущение. Внутри
   него чужая форма в <iframe>: она приходит белой, тематизировать её мы
   не можем и не вправе. Тёмная рамка вокруг белой формы выглядела бы
   поломкой. Поэтому остров объявляет светлый набор токенов целиком —
   всё, что внутри, само собой становится светлым и согласованным.
   Это тот же принцип «одна система, два набора»: набор просто выбран
   не темой, а содержимым. */
body .tp-ins-calc {
  background: #FFFFFF;
  color-scheme: light;
  --t: #0F2B46; --m: #3D4C5A; --b: #D7DDE3; --bg: #F4F6F8;
  --text: #0F2B46; --text-2: #3D4C5A; --text-3: #5A6B7A;
  --accent: #0B5C8A; --line: #D7DDE3; --line-soft: #E6EAEE;
  --surface: #FFFFFF; --surface-2: #F4F6F8;
}
body .tp-ins-offer--primary { background: var(--surface-2); border-color: var(--cta-text); }
body .tp-ins-box--good, body .tp-ins-list--good li { border-color: var(--ok); }
body .tp-ins-box--warn, body .tp-ins-list--warn li { border-color: var(--warn); }
body .tp-ins-table td { border-top-color: var(--line-soft); }
/* У ссылок-«таблеток» фон вшит белым, а цвет текста берётся из
   переменной. В тёмной теме это светло-голубой по белому — 1,84:1.
   Задаём обе стороны пары, а не одну. */
body .tp-ins-chips a {
  background: var(--surface); color: var(--text-2);
  border-color: var(--line); min-height: 44px;
}
body .tp-ins-chips a:hover { border-color: var(--accent); color: var(--accent); }

/* Кнопка. Подпись у неё белая и остаётся белой: правило `color` для
   .tp-ins-btn перекрыть не удалось ничем — ни весом селектора, ни
   !important; в браузере проверено, что зелёный литерал на этом
   элементе не применяется, тогда как на соседних из того же листа
   применяется. Источник перебивания не в разметке страницы.

   Отсюда решение: чинить не подпись, а заливку под ней. Белым по
   #E8711F было 3,08:1; по --cta 5,0:1 в светлой теме и 5,7:1 в
   тёмной, а сама кнопка отличается от фона страницы на 3,3:1 —
   порог для элемента управления. Так контраст перестаёт зависеть от
   того, чьё правило победит. */
body .tp-ins-btn { background: var(--cta); color: var(--cta-ink); }
body .tp-ins-btn:hover { background: var(--cta); filter: brightness(.92); }
body .tp-ins-btn--ghost { background: var(--surface); color: var(--cta-text); border-color: var(--cta-text); }
body .tp-ins-btn--ghost:hover { background: var(--surface-2); color: var(--cta-text); }
body .tp-ins-num { background: var(--cta); color: var(--cta-ink); font-family: var(--font-mono); }

/* Маркировка рекламы — не мельче 11 px и не бледнее 4,5:1. Это
   требование закона, а не мелкий шрифт «чтобы не мешал»: в исходнике
   #A8B4C2 на белом даёт 2,11:1. */
body .tp-ins-ad { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

/* ══════════════════════════════════════════════════════════════
   6. КАТАЛОГИ ПАРТНЁРОВ
   ══════════════════════════════════════════════════════════════
   Разметка приводится фильтром в PHP: встроенные style-атрибуты
   снимаются, добавляются классы и семантика. Здесь только вид.

   Зона логотипа фиксированная — сейчас логотипы разной высоты и
   пропорций, и ряд карточек «пляшет». */
.tp-partners-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  margin: var(--sp-6) 0;
}
@media (max-width: 1024px) { .tp-partners-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .tp-partners-grid { grid-template-columns: 1fr; } }

.tp-partner {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--line-w) solid var(--line);
  padding: 22px 22px 0;
  transition: border-color var(--motion);
}
.tp-partner:hover { border-color: var(--accent); }
.tp-partner-kicker { margin: 0 0 var(--sp-3); color: var(--text-3); }
/* Зона логотипа фиксированная. Сейчас логотипы разной высоты и
   пропорций, и ряд карточек «пляшет»: глаз ищет общую линию и не
   находит. Логотип вписывается по левому краю, как в макете. */
.tp-partner-logo {
  width: 132px; height: 44px;
  object-fit: contain; object-position: left center;
  display: block; margin: 0 0 var(--sp-4);
}
/* Логотипы партнёров нарисованы для белого фона. В тёмной теме им
   даётся собственная светлая подложка — это честнее, чем инвертировать
   чужой знак. */
:root[data-theme="dark"] .tp-partner-logo { background: #FFFFFF; padding: 4px 6px; width: 144px; }
.tp-partner-facts {
  margin: 0 0 var(--sp-5); padding-left: 18px; flex: 1;
  font-size: 15px; line-height: 1.55; color: var(--text-2);
}
.tp-partner-facts li { margin-bottom: 6px; }
.tp-partner .tp-btn { width: 100%; margin-bottom: var(--sp-4); }
.tp-partner-legal {
  margin: 0 -22px; padding: 10px 22px;
  border-top: var(--line-w) solid var(--line-soft);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--text-3); word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════
   6-бис. ЗОНЫ НАЖАТИЯ И ШИРОКИЕ ТАБЛИЦЫ В СОДЕРЖИМОМ
   ══════════════════════════════════════════════════════════════
   Замер на экране 375 px: метки рубрик на «Статьях» — 28 px по высоте
   при шестидесяти штуках на странице, ссылки разделов на «Компаниях» —
   24 px. Порог WCAG 2.2 (24 px) они проходят, свой собственный (44 px)
   — нет. Ссылка-строка во всю ширину не требует 44 px, чтобы в неё
   попасть, но 28 px мало, когда таких строк шестьдесят подряд. */
.tp-cat-tag, .entry-content .tp-cat-tag {
  display: inline-flex; align-items: center; min-height: 36px;
}

/* Таблица из содержимого оборачивается фильтром в PHP. Своей ширины
   она не знает, поэтому минимальную задаём здесь — иначе браузер
   сожмёт колонки до нечитаемого и прокручивать будет нечего. */
.entry-content .tp-table-wrap { margin: var(--sp-5) 0; }
.entry-content .tp-table-wrap > table { min-width: 520px; margin: 0; }
@media (min-width: 760px) {
  .entry-content .tp-table-wrap > table { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════
   7. АРХИВ РУБРИКИ
   ══════════════════════════════════════════════════════════════ */
.archive .site-main > article, .search .site-main > article {
  background: var(--surface);
  border: var(--line-w) solid var(--line);
  margin-bottom: var(--sp-5);
  transition: border-color var(--motion);
}
.archive .site-main > article:hover { border-color: var(--accent); }
.archive .entry-title, .search .entry-title { font-size: 22px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.archive .entry-title a, .search .entry-title a { color: var(--text); }
.archive .entry-title a:hover, .search .entry-title a:hover { color: var(--accent); }
.archive .entry-summary, .search .entry-summary { font-size: 16px; color: var(--text-2); }
.page-header { padding: var(--sp-6) 0; }
.page-header h1 { font-size: 32px; }

/* Постраничная навигация, не бесконечная прокрутка: бесконечная ломает
   индексацию и не даёт дойти до подвала. */
.paging-navigation .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.paging-navigation .page-numbers {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--line-w) solid var(--line);
  font-family: var(--font-mono); font-size: 14px; color: var(--text-2);
}
.paging-navigation .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.paging-navigation .page-numbers.current { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   8. САЙДБАР
   ══════════════════════════════════════════════════════════════ */
.sidebar .widget { background: var(--surface); border: var(--line-w) solid var(--line); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.sidebar .widget-title { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: 0; }
.sidebar a { color: var(--text-2); }
.sidebar a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   9. ПЕРЕКЛЮЧАТЕЛЬ: КАКАЯ ИКОНКА ВИДНА
   ══════════════════════════════════════════════════════════════
   Иконка показывает ЦЕЛЬ нажатия, а не текущее состояние: в тёмной
   теме солнце («включить светлую»), в светлой луна. Состояние
   сообщается словами в aria-label — глазу нужна цель, скринридеру
   состояние. */
.tp-theme-toggle .tp-icon-sun { display: none; }
:root[data-theme="dark"] .tp-theme-toggle .tp-icon-sun  { display: block; }
:root[data-theme="dark"] .tp-theme-toggle .tp-icon-moon { display: none; }

/* ══════════════════════════════════════════════════════════════
   10. ПОИСК И 404
   ══════════════════════════════════════════════════════════════
   Форма поиска темы приходит со своей вёрсткой. Приводим её к системе,
   а не заводим свою: механизм поиска рабочий, ему нужен вид, а не
   замена.

   Пустой результат — не тупик: под формой стоит вход к механику. Это
   единственное место портала, где человек уже сформулировал вопрос
   словами и не нашёл ответа. */
.search-form, .wp-block-search__inside-wrapper { display: flex; gap: var(--sp-2); max-width: var(--measure); }
.search-field, .wp-block-search__input {
  flex: 1;
  background: var(--surface-2); color: var(--text);
  border: var(--line-w) solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-size: 16px; padding: 13px var(--sp-4); min-height: 44px;
}
.search-submit, .wp-block-search__button {
  background: var(--accent); color: var(--accent-ink);
  border: var(--line-w) solid var(--accent); border-radius: var(--radius);
  font-family: var(--font); font-size: 15px; font-weight: 600;
  padding: 0 var(--sp-5); min-height: 44px; cursor: pointer;
}
.search-submit:hover, .wp-block-search__button:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.error404 .site-content, .search .site-content { padding-top: var(--sp-7); }

/* ══════════════════════════════════════════════════════════════
   11. ЭКРАН ЦИФРОВОГО МЕХАНИКА
   ══════════════════════════════════════════════════════════════
   Главный продукт портала выглядел как статья: поле ввода, кнопка и
   полторы тысячи знаков описания под ней. Плюс правый сайдбар темы
   съедал больше трети ширины — рабочей области оставалось 454 px из 800.

   Здесь страница собирается как инструмент: сверху знак, название и
   короткий лид, дальше во всю ширину — поле работы. Ничего нового
   интерфейс не обещает: показаны те же возможности, что и были. */
.page-id-11591 .entry-header,
body.tp-full .entry-header { padding-bottom: var(--sp-5); }
.page-id-11591 .entry-title { max-width: var(--measure); }

body.tp-full .tp-dm-landing,
body.tp-full .tp-dm {
  max-width: 860px;
  padding: var(--sp-7);
}
body.tp-full .tp-dm-head { gap: var(--sp-4); margin-bottom: var(--sp-4); }
body.tp-full .tp-dm-logo { width: 72px; height: 72px; }
body.tp-full .tp-dm-input { min-height: 96px; }
body.tp-full .tp-dm-examples { margin-top: var(--sp-4); }

/* Подпись над примерами — служебная, поэтому моноширинная и капслоком,
   но в разметке остаётся тем, чем была. */
body.tp-full .tp-dm-examples-label,
body .tp-dm-examples + p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* ══════════════════════════════════════════════════════════════
   12. БЛОК МЕХАНИКА В СТАТЬЕ
   ══════════════════════════════════════════════════════════════
   Главная точка перехода из чтения в продукт: человек уже читает про
   свою задачу. Блок выделяется полосой акцента слева — тем же приёмом,
   что и блок источников, потому что и то и другое про продукт. */
.single .tp-dm {
  border-left: var(--accent-bar) solid var(--accent);
  margin: var(--sp-8) 0;
  max-width: var(--measure);
}

/* ══════════════════════════════════════════════════════════════
   13. «ЧИТАЙТЕ ТАКЖЕ» И СВЯЗНОСТЬ
   ══════════════════════════════════════════════════════════════
   Кликов по внутренним статьям за 20 суток — 63 при 5409 просмотрах.
   Связность между материалами — самое слабое место портала, и она
   решается не стилем, а наличием блока. Стиль лишь делает его видимым. */
.tp-related, .tp-read-also { margin-top: var(--sp-8); max-width: var(--measure); }
.tp-related-title, .tp-read-also-title {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--text);
}

/* Форма уточнения и блок механика на странице результатов. */
.tp-search-again { margin-bottom: var(--sp-6); }
.tp-search-empty { max-width: var(--measure); margin-top: var(--sp-6); }
.search .site-main > article { padding: var(--sp-5); }

/* Вводный абзац и сноска каталога — после снятия встроенных стилей им
   нужен вид от системы, а не от браузера. */
.tp-full:not(.home) .entry-content > p { max-width: var(--measure); color: var(--text-2); }
.tp-full:not(.home) .entry-content > div:not(.tp-partners-grid):not(.tp-ins) {
  max-width: var(--measure);
  background: var(--surface-2);
  border: var(--line-w) solid var(--line);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-6) 0;
}

/* Виджет партнёра — чужая страница внутри нашей. Он нарисован для
   светлого фона и перекрасить его мы не вправе. Поэтому в тёмной теме
   он получает собственную светлую подложку и подпись: так видно, что
   это внешний сервис, а не сломанный участок портала. */
.tp-ins-calc__frame, .tp-ins-calc iframe {
  background: #FFFFFF;
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
}
:root[data-theme="dark"] .tp-ins-calc { position: relative; }
:root[data-theme="dark"] .tp-ins-calc::after {
  content: "Расчёт выполняет страховой партнёр";
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}