/* Общие стили отдельных инструментов: анализ текста и доступ ИИ-ботов.
   Опирается на токены styles.css, своей палитры не заводит. */

.tk:not(.section) { padding: var(--s12) 0 var(--s16); }
.tk__shell { display: grid; gap: var(--s8); }

.tk__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: clamp(20px, 3vw, 32px);
}

/* вкладки */
.tk__tabs { display: flex; gap: var(--s2); margin-bottom: var(--s6); flex-wrap: wrap; }
.tk__tab {
  appearance: none; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r1);
  padding: 10px 18px; font: inherit; font-size: .95rem; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.tk__tab:hover { color: var(--text); border-color: var(--line-strong); }
.tk__tab.is-active { color: var(--paper); border-color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); }
.tk__tab:focus-visible { outline: none; box-shadow: var(--focus); }

/* поля ввода */
.tk__textarea, .tk__input {
  width: 100%; background: var(--surface-deep); color: var(--text);
  border: 1px solid var(--line-control); border-radius: var(--r1);
  padding: 14px 16px; font: inherit; font-size: 1rem; line-height: 1.55;
  transition: border-color .18s var(--ease);
}
.tk__textarea { resize: vertical; min-height: 220px; }
.tk__textarea:focus, .tk__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.tk__hint { margin: var(--s2) 0 0; color: var(--quiet); font-size: .875rem; }

.tk__actions { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s5); flex-wrap: wrap; }
.tool-form .tk__actions { margin-top: 0; }   /* интервал задаёт сама форма */
.tk__error {
  margin: var(--s4) 0 0; padding: 12px 14px;
  border: 1px solid var(--danger); border-radius: var(--r1);
  background: color-mix(in oklch, var(--danger) 10%, var(--surface-deep));
  color: var(--danger); font-size: 14px; line-height: 1.5;
}
.tk__status { margin: var(--s4) 0 0; color: var(--muted); font-size: .95rem; }

/* результат */
.tk__result { display: grid; gap: var(--s6); }
.tk-result__source { color: var(--muted); font-size: .95rem; margin: 0; word-break: break-word; }

.tk-stats {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: .95rem;
}
.tk-stats b { color: var(--paper); font-weight: 600; }

/* Шесть карточек ложатся 3+3, а не 5+1: ряд из пяти и одинокая шестая
   читаются как сбой вёрстки. */
.tk-metrics { display: grid; gap: var(--s3); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tk-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tk-metrics { grid-template-columns: 1fr; }
  .tk-metric.is-lead { grid-column: span 1; } }
.tk-metric {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r1); padding: var(--s5); display: grid; gap: 6px;
  --tk-state: var(--quiet);
}
.tk-metric.is-good { --tk-state: oklch(72% .15 145); }
.tk-metric.is-warn { --tk-state: oklch(80% .15 85); }
.tk-metric.is-bad  { --tk-state: var(--danger); }
.tk-metric__dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tk-state); margin-left: 8px; vertical-align: middle;
}
.tk-metric__value { font-size: 1.7rem; font-weight: 600; color: var(--paper); line-height: 1.1; }
.tk-metric__name  { color: var(--text); font-size: .95rem; }
.tk-metric__note  { color: var(--quiet); font-size: .82rem; }

.tk-block { display: grid; gap: var(--s3); }
.tk-block h3 { margin: 0; font-size: 1.15rem; color: var(--paper); }
.tk-block__lead { margin: 0; color: var(--muted); font-size: .95rem; }

.tk-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tk-chip {
  background: var(--surface-deep); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; font-size: .87rem; color: var(--text);
}

.tk-list { margin: 0; padding-left: 1.25em; color: var(--text); display: grid; gap: var(--s3); }
.tk-list b { color: var(--paper); }

.tk-recs { display: grid; gap: var(--s3); }
.tk-rec {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r1); padding: var(--s5); --tk-state: var(--quiet);
}
.tk-rec--high { --tk-state: var(--danger); }
.tk-rec--medium { --tk-state: oklch(80% .15 85); }
/* Зелёный в отчёте означает «в норме». Рекомендация низкой важности —
   всё-таки работа, поэтому она нейтральная, а не зелёная. */
.tk-rec--low { --tk-state: var(--quiet); }
.tk-rec h4::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tk-state); margin-right: 9px; vertical-align: middle;
}
.tk-rec h4 { margin: 0 0 var(--s2); font-size: 1rem; color: var(--paper); }
.tk-rec p { margin: 0 0 var(--s2); color: var(--muted); font-size: .95rem; }
.tk-rec__do { color: var(--text) !important; }

.tk-note { margin: 0; color: var(--quiet); font-size: .85rem; }

.tk__field { margin-top: var(--s5); }
.tool-form .tk__field { margin-top: 0; }
.tk__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 550; color: var(--text); }
.tk__label-note { color: var(--quiet); font-weight: 400; }

.tk-section {
  margin: var(--s6) 0 0; padding-top: var(--s6);
  border-top: 1px solid var(--line); font-size: 1.25rem; color: var(--paper);
}
/* Ширины колонок фиксируем: иначе браузер подбирает их по содержимому каждой
   таблицы отдельно, и в соседних блоках столбцы стоят по-разному. */
.tk-tbl { table-layout: fixed; }
.tk-tbl td:nth-child(1), .tk-tbl th:nth-child(1) { width: 32%; }
.tk-tbl td:nth-child(2), .tk-tbl th:nth-child(2) { width: 16%; }
.tk-tbl td:nth-child(3), .tk-tbl th:nth-child(3) { width: auto; }
.tk-tbl td:nth-child(4), .tk-tbl th:nth-child(4) { width: 14%; }
.tk-tbl td { vertical-align: top; overflow-wrap: anywhere; }
.tk-tbl td:first-child { color: var(--text); }
.tk-tbl__note { color: var(--quiet); font-size: .85rem; }
.tk-weak {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--quiet); font-size: .75rem;
}

/* цитируемость */
.tk-find { display: grid; gap: var(--s3); }
.tk-find__item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r1); padding: var(--s5); --tk-state: var(--quiet);
}
.tk-find__item.is-high { --tk-state: var(--danger); }
.tk-find__item.is-medium { --tk-state: oklch(80% .15 85); }
.tk-find__item.is-low { --tk-state: oklch(72% .15 145); }
.tk-find__item h4::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tk-state); margin-right: 9px; vertical-align: middle;
}
.tk-find__item h4 { margin: 0 0 var(--s2); font-size: 1rem; color: var(--paper); }
.tk-find__item p { margin: 0; color: var(--muted); font-size: .95rem; }
.tk-ok {
  background: var(--surface); border: 1px solid oklch(72% .15 145 / .45);
  border-radius: var(--r1); padding: var(--s5);
  color: var(--muted); font-size: .95rem;
}

/* информационные блоки страницы */
.tk__head { margin-bottom: var(--s8); }
.tk__head h2 {
  font-size: clamp(30px, 4.6vw, 48px); line-height: 1.06;
  letter-spacing: -.04em; font-weight: 580;
}
.tk__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tk__grid li {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s6);
}
.tk__grid h3 { margin: 0 0 var(--s2); font-size: 1.05rem; color: var(--paper); }
.tk__grid p { margin: 0; color: var(--muted); font-size: .95rem; }
.tk__grid-accent { border-color: var(--accent); }

.tk__links { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tk__link-card {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s6);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.tk__link-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tk__link-card h3 { margin: 0 0 var(--s2); font-size: 1.05rem; color: var(--paper); }
.tk__link-card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* таблица ботов */
.tk-bots { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tk-bots caption { text-align: left; color: var(--muted); padding-bottom: var(--s3); }
.tk-bots th, .tk-bots td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tk-bots th { color: var(--quiet); font-weight: 500; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.tk-bots td b { color: var(--paper); font-weight: 600; }
.tk-bots__wrap { overflow-x: auto; }
.tk-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tk-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tk-state--open { color: oklch(72% .15 145); }
.tk-state--blocked { color: var(--danger); }
.tk-state--unknown { color: var(--quiet); }
.tk-role { color: var(--quiet); font-size: .85rem; }

@media (max-width: 640px) {
  .tk-metric__value { font-size: 1.45rem; }
  .tk__card { padding: var(--s5); }
}


/* ── Графика ──
   Каждый график строится по данным ответа: оси, единицы и опорные линии
   подписаны. График, который остаётся осмысленным без данных, — украшение. */
.tk-charts { display: grid; gap: var(--s10); }
.tk-fig { margin: 0; display: grid; gap: var(--s2); }
.tk-fig__t { color: var(--paper); font-size: .98rem; font-weight: 550; }
.tk-fig__d { margin: 0; color: var(--quiet); font-size: .85rem; line-height: 1.5; max-width: 70ch; }
.tk-chart {
  width: 100%; height: auto; display: block;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r1);
}
.tk-axis { stroke: oklch(70% .01 95 / .22); stroke-width: 1; }
.tk-grid { stroke: oklch(70% .01 95 / .12); stroke-width: 1; }
.tk-ref  { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; }
.tk-mark { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.tk-bar  { fill: oklch(72% .02 90 / .28); }
.tk-bar--mid { fill: oklch(72% .02 90 / .62); }
.tk-chart:hover .tk-bar { transition: fill .2s var(--ease); }
.tk-curve { fill: none; stroke: var(--accent); stroke-width: 2; }
.tk-dot { fill: var(--paper); stroke: var(--accent); stroke-width: 2; }
/* Кегль в единицах viewBox: при ширине 1000 и контейнере ~1130 px это даёт
   на экране около 13 px во всех графиках одинаково. */
.tk-lbl {
  fill: var(--quiet); font-size: 12px; font-family: var(--font);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.tk-lbl--ax { fill: oklch(58% .01 95); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tk-lbl--ref { fill: var(--accent); }

/* шкала: положение значения относительно ориентира, не украшение */
.tk-gauge {
  position: relative; display: block; height: 6px; border-radius: 3px;
  background: var(--surface-deep); overflow: hidden;
}
.tk-gauge__band { position: absolute; top: 0; height: 100%; background: oklch(72% .15 145 / .35); }
.tk-gauge__band--warn { background: oklch(80% .15 85 / .35); }
.tk-gauge__mark {
  position: absolute; top: -2px; width: 2px; height: 10px; background: var(--paper);
}

/* подсветка проблем прямо в тексте */
.tk-marked {
  background: var(--surface-deep); border: 1px solid var(--line); border-radius: var(--r1);
  padding: var(--s5); color: var(--text); line-height: 1.7; font-size: .96rem;
  max-height: 420px; overflow-y: auto;
}
.tk-mk { border-radius: 3px; padding: 1px 3px; color: var(--paper); background: transparent; }
.tk-mk--ai   { box-shadow: inset 0 -2px 0 var(--danger); }
.tk-mk--bur  { box-shadow: inset 0 -2px 0 oklch(80% .15 85); }
.tk-mk--spam { box-shadow: inset 0 -2px 0 oklch(70% .17 45); }
.tk-lg { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--s4); font-size: .85rem; }
.tk-lg::before { content: ''; width: 14px; height: 3px; border-radius: 2px; }
.tk-lg--ai::before   { background: var(--danger); }
.tk-lg--bur::before  { background: oklch(80% .15 85); }
.tk-lg--spam::before { background: oklch(70% .17 45); }

@media (prefers-reduced-motion: reduce) {
  .tk__link-card { transition: none; }
}

/* ── Панель разбора ──
   Блок собран как единица чтения: шапка с выводом, данные, сноска с оговоркой.
   Заголовок несёт вывод, а не название метрики. */
.tk-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); padding: clamp(16px, 2.4vw, 24px);
  display: grid; gap: var(--s4);
}
.tk-panel__head { display: grid; gap: 4px; }
.tk-panel__head h4 {
  margin: 0; font-size: 1.08rem; color: var(--paper); font-weight: 600;
  letter-spacing: -.01em;
}
.tk-panel__head p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.tk__result .tk-panel + .tk-panel { margin-top: calc(var(--s4) * -1 + var(--s6)); }

.tk-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-bots th.tk-num { text-align: right; }

/* строка-полоса: доля слова в объёме, не декоративная заливка */
.tk-rowbar {
  display: block; height: 6px; min-width: 60px; border-radius: 3px;
  background: var(--surface-deep); overflow: hidden;
}
.tk-rowbar__fill { display: block; height: 100%; background: var(--line-strong); }
.tk-rowbar__fill.is-warn { background: oklch(80% .15 85); }
.tk-rowbar__fill.is-bad  { background: var(--danger); }
.tk-bots tr.is-bad td:first-child,
.tk-bots tr.is-warn td:first-child { color: var(--paper); }

.tk-forms {
  display: block; color: var(--quiet); font-size: .82rem; margin-top: 2px;
}

/* фактические связи */
.tk-triples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.tk-triple {
  display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(140px, 1.6fr);
  gap: var(--s3); align-items: baseline;
  padding: 10px 12px; background: var(--surface-deep);
  border: 1px solid var(--line); border-radius: var(--r1);
}
.tk-triple__s { color: var(--paper); font-weight: 550; }
.tk-triple__r {
  color: var(--accent); font-size: .78rem; text-transform: lowercase;
  padding: 2px 9px; border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  border-radius: 999px; white-space: nowrap;
}
.tk-triple__o { color: var(--muted); font-size: .93rem; }
.tk-num-flag {
  color: oklch(72% .15 145); font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.tk-pmi { color: var(--quiet); font-style: normal; font-size: .78rem; }

@media (max-width: 640px) {
  .tk-triple { grid-template-columns: 1fr; gap: 6px; }
  .tk-triple__r { justify-self: start; }
}

/* ══ Состояния: цвет читается за секунду, статус продублирован словом ══
   Значения OKLCH подобраны под фон surface, контраст текста к фону 11:1,
   рамки к фону — не ниже 5,8:1. */
.tk__result {
  --tk-bad-bg:      oklch(28% .045 25);
  --tk-bad-border:  oklch(68% .16 25);
  --tk-bad-text:    oklch(92% .045 25);
  --tk-warn-bg:     oklch(29% .045 85);
  --tk-warn-border: oklch(73% .14 85);
  --tk-warn-text:   oklch(94% .055 85);
  --tk-good-bg:     oklch(28% .04 145);
  --tk-good-border: oklch(69% .14 145);
  --tk-good-text:   oklch(92% .05 145);
}

/* ── Сводка: вердикт за три секунды ── */
.tk-verdict {
  position: relative; overflow: hidden;
  display: grid; gap: var(--s5); padding: clamp(24px, 3.4vw, 36px);
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  background: oklch(22.5% .008 95);
}
.tk-verdict::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--accent);
}
.tk-verdict.is-good::before { background: oklch(69% .14 145); }
.tk-verdict.is-bad::before  { background: var(--tk-bad-border); }
/* слабое свечение только у статуса, не по всей карточке */
.tk-verdict::after {
  content: ''; position: absolute; top: -60px; left: -40px; width: 320px; height: 180px;
  background: radial-gradient(closest-side, oklch(65% .14 60 / .16), transparent);
  pointer-events: none;
}
.tk-verdict.is-good::after { background: radial-gradient(closest-side, oklch(69% .14 145 / .13), transparent); }
.tk-verdict.is-bad  { border-color: var(--tk-bad-border); }
.tk-verdict.is-warn { border-color: oklch(73% .14 85 / .55); }
.tk-verdict.is-good { border-color: oklch(69% .14 145 / .5); }
.tk-verdict__top { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-start; justify-content: space-between; }
.tk-verdict__title { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 620; letter-spacing: -.02em; color: var(--paper); }
.tk-verdict__sub { margin: 6px 0 0; color: var(--text); font-size: 1rem; opacity: .92; }
.tk-verdict__counts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tk-count {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 14px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: oklch(20% .006 95 / .55);
  font-size: .88rem; color: var(--text); white-space: nowrap;
}
.tk-count b { font-size: 1.15rem; font-weight: 650; }
.tk-count.is-bad  { border-color: var(--tk-bad-border);  color: var(--tk-bad-text); }
.tk-count.is-warn { border-color: var(--tk-warn-border); color: var(--tk-warn-text); }
.tk-count.is-good { border-color: var(--tk-good-border); color: var(--tk-good-text); }
.tk-verdict__main { display: grid; gap: 6px; padding-top: var(--s4); border-top: 1px solid oklch(70% .01 95 / .18); }
.tk-verdict__main b { color: var(--paper); font-weight: 600; }
.tk-verdict__main p { margin: 0; color: var(--text); font-size: .97rem; line-height: 1.55; }
.tk-verdict__facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--text); opacity: .75; font-size: .87rem; }

/* ── Бейдж статуса: слово плюс цвет, не только цвет ── */
.tk-badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: start;
  padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  letter-spacing: .01em; border: 1px solid currentColor; white-space: nowrap;
}
.tk-badge.is-bad  { color: var(--tk-bad-text);  background: oklch(28% .045 25 / .55); }
.tk-badge.is-warn { color: var(--tk-warn-text); background: oklch(29% .045 85 / .55); }
.tk-badge.is-good { color: var(--tk-good-text); background: oklch(28% .04 145 / .5); }

/* плитка метрики: значение крупно, статус словом и цветом */
.tk-metric { position: relative; background: var(--surface-deep); }
.tk-metric.is-bad  { border-color: oklch(68% .16 25 / .5); }
.tk-metric.is-warn { border-color: var(--line); }
.tk-metric.is-good { border-color: var(--line); }
.tk-metric__value { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 650; letter-spacing: -.02em; }
.tk-metric__name { font-size: .98rem; font-weight: 550; color: var(--paper); }
.tk-metric__note { font-size: .8rem; line-height: 1.45; }
.tk-metric__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }

/* ── Детали под спойлером: закрытое summary несёт результат ── */
.tk-det {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  overflow: hidden;
}
.tk-det + .tk-det { margin-top: var(--s3); }
.tk-det > summary {
  cursor: pointer; list-style: none; padding: 14px clamp(14px, 2vw, 20px);
  /* Сетка, а не space-between: при трёх элементах свободное место
     распределялось между ними, и бейдж состояния гулял по строке от блока
     к блоку. Теперь у него своя колонка постоянной ширины. */
  display: grid; grid-template-columns: 1fr 132px 14px;
  align-items: center; gap: var(--s4);
  color: var(--paper); font-weight: 550; font-size: .98rem;
}
.tk-det > summary > span:first-child { min-width: 0; }
.tk-det > summary .tk-badge { justify-self: end; }
.tk-det > summary::-webkit-details-marker { display: none; }
.tk-det > summary::after {
  content: '+'; color: var(--quiet); font-size: 1.1rem; line-height: 1;
}
.tk-det[open] > summary::after { content: '–'; }
.tk-det > summary:hover { background: oklch(70% .01 95 / .05); }
.tk-det > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.tk-det__meta { color: var(--quiet); font-weight: 400; font-size: .86rem; }
.tk-det__body { padding: 0 clamp(14px, 2vw, 20px) var(--s5); display: grid; gap: var(--s4); }

/* ── Ранжированный список вместо таблицы частот ── */
.tk-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tk-rank li {
  display: grid; grid-template-columns: 26px minmax(90px, 1fr) auto 96px;
  gap: var(--s3); align-items: center; padding: 7px 10px;
  background: var(--surface-deep); border-radius: var(--r1);
}
.tk-rank__n { color: var(--quiet); font-size: .8rem; font-variant-numeric: tabular-nums; }
.tk-rank__w { color: var(--paper); font-size: .94rem; overflow-wrap: anywhere; }
.tk-rank__v { color: var(--text); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-rank li.is-bad  .tk-rank__w { color: var(--tk-bad-text); }
.tk-rank li.is-warn .tk-rank__w { color: var(--tk-warn-text); }

/* ── Пары «показатель — значение» вместо таблиц ── */
.tk-dl { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; }
.tk-dl > div {
  background: var(--surface-deep); border: 1px solid var(--line);
  border-radius: var(--r1); padding: 14px 16px; display: grid; gap: 4px;
}
.tk-dl dt { color: var(--text); font-size: .9rem; }
.tk-dl dd { margin: 0; color: var(--paper); font-size: 1.3rem; font-weight: 620; letter-spacing: -.01em; }
.tk-dl .tk-dl__note { color: var(--quiet); font-size: .79rem; line-height: 1.4; font-weight: 400; }

@media (max-width: 560px) {
  .tk-rank li { grid-template-columns: 22px 1fr auto; }
  .tk-rank li > :nth-child(4) { display: none; }
}

/* ── Легенда подсветки со счётчиком (приём Hemingway Editor) ── */
.tk-legend { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tk-legend .tk-lg {
  margin: 0; padding: 5px 12px; border-radius: 999px;
  background: var(--surface-deep); border: 1px solid var(--line);
  color: var(--text); gap: 8px;
}
.tk-legend .tk-lg b { color: var(--paper); font-weight: 650; font-variant-numeric: tabular-nums; }
.tk-legend .tk-lg.is-empty { opacity: .45; }

/* ── Светофор проверок (приём Yoast SEO) ── */
.tk-checklist {
  display: grid; gap: var(--s4); padding-top: var(--s4);
  border-top: 1px solid oklch(70% .01 95 / .18);
}
.tk-checkgroup { display: grid; gap: var(--s2); }
.tk-checkgroup__t {
  margin: 0; font-size: .82rem; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; display: flex; align-items: center; gap: 8px;
}
.tk-checkgroup__t span {
  font-size: .78rem; padding: 1px 8px; border-radius: 999px;
  border: 1px solid currentColor; font-weight: 600;
}
.tk-checkgroup__t.is-bad  { color: var(--tk-bad-text); }
.tk-checkgroup__t.is-warn { color: var(--tk-warn-text); }
.tk-checkgroup__t.is-good { color: var(--tk-good-text); }
.tk-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tk-check li {
  display: grid; grid-template-columns: 10px 1fr auto; gap: var(--s3);
  align-items: center; padding: 7px 12px; border-radius: var(--r1);
  background: oklch(20% .006 95 / .5); font-size: .93rem;
}
.tk-check__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--quiet); }
.tk-check li.is-bad  .tk-check__dot { background: var(--tk-bad-border); }
.tk-check li.is-warn .tk-check__dot { background: var(--tk-warn-border); }
.tk-check li.is-good .tk-check__dot { background: var(--tk-good-border); }
.tk-check__n { color: var(--text); }
.tk-check__v { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Уровень читателя (приём Readable и Hemingway) ── */
.tk-audience {
  display: grid; gap: 2px; padding: var(--s4) 0 0;
  border-top: 1px solid oklch(70% .01 95 / .18);
}
.tk-audience__lbl { color: var(--text); opacity: .75; font-size: .82rem; }
.tk-audience b { color: var(--paper); font-size: 1.25rem; font-weight: 620; letter-spacing: -.01em; }
.tk-audience__d { color: var(--text); opacity: .8; font-size: .88rem; }


/* ── «Что исправить»: решение до метрик ── */
.tk-fix {
  display: grid; gap: var(--s3); padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  background: var(--surface); justify-items: start;
}
.tk-fix.is-bad  { border-color: var(--tk-bad-border); }
.tk-fix.is-warn { border-color: oklch(73% .14 85 / .6); }
.tk-fix__t {
  margin: 0; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 620;
  color: var(--paper); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
}
.tk-fix__v { font-size: 1.5rem; font-weight: 680; font-variant-numeric: tabular-nums; }
.tk-fix__why { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.55; }
.tk-fix .tk-chips { justify-self: stretch; }
.tk-fix__do {
  display: grid; gap: 6px; padding-top: var(--s3); justify-self: stretch;
  border-top: 1px solid var(--line);
}
.tk-fix__do b { color: var(--paper); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.tk-fix__do p { margin: 0; color: var(--text); font-size: .96rem; line-height: 1.55; }
.tk-fix__do a { justify-self: start; margin-top: var(--s2); }
.tk-quote {
  margin: 0; justify-self: stretch; padding: 12px 14px;
  border-left: 1px solid var(--line-strong); background: var(--surface-deep);
  color: var(--text); font-size: .93rem; line-height: 1.55;
}

.tk-mk--rep { box-shadow: inset 0 -2px 0 oklch(65% .16 250); }
.tk-lg--rep::before { background: oklch(65% .16 250); }


/* ══ Единая аналитическая шкала — фирменный приём отчёта ══
   Один и тот же элемент в карточке метрики, в главном замечании и в деталях:
   положение значения относительно ориентира, а не абстрактная полоска. */
.tk-scale { display: grid; gap: 5px; }
.tk-scale__track {
  position: relative; display: block; height: 6px; border-radius: 3px;
  background: oklch(26% .006 95); overflow: visible;
}
.tk-scale__ok, .tk-scale__warn {
  position: absolute; top: 0; height: 100%; border-radius: 3px;
}
.tk-scale__ok   { left: 0; background: oklch(69% .14 145 / .35); }
.tk-scale__warn { background: oklch(73% .14 85 / .3); }
.tk-scale__ref {
  position: absolute; top: -3px; width: 1px; height: 12px;
  background: oklch(80% .01 95 / .5);
}
.tk-scale__dot {
  position: absolute; top: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  transform: translateY(-50%); border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 3px oklch(22% .008 95);
}
.tk-scale__legend {
  display: flex; justify-content: space-between; color: var(--quiet); font-size: .74rem;
}
.tk-scale__legend i { font-style: normal; }
.is-bad  .tk-scale__dot { background: var(--tk-bad-border); }
.is-warn .tk-scale__dot { background: var(--tk-warn-border); }
.is-good .tk-scale__dot { background: oklch(72% .14 145); }

/* ── Сегменты проверок: шесть реальных проверок, а не выдуманный балл ── */
.tk-score { display: grid; gap: 6px; justify-items: end; align-content: start; }
.tk-score__n {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 680; color: var(--paper);
  line-height: 1; letter-spacing: -.03em; display: flex; align-items: baseline; gap: 8px;
}
.tk-score__n i { font-style: normal; font-size: .95rem; font-weight: 500; color: var(--quiet); }
.tk-score__l { color: var(--text); opacity: .8; font-size: .84rem; }
.tk-segs { display: flex; gap: 5px; margin-top: 2px; }
.tk-seg { width: 22px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.tk-seg.is-good { background: oklch(69% .14 145); }
.tk-seg.is-warn { background: oklch(73% .14 85); }
.tk-seg.is-bad  { background: var(--tk-bad-border); }

/* ── «Что исправить»: слева доказательство, справа действие ── */
.tk-fix { justify-items: stretch; gap: var(--s4); }
.tk-fix__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.tk-fix__k {
  display: block; color: var(--quiet); font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 4px;
}
.tk-fix__v { font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 680; letter-spacing: -.03em; color: var(--paper); }
.tk-fix__scale { max-width: 420px; }
.tk-fix__cols { display: grid; gap: var(--s6); grid-template-columns: 1fr 1fr; align-items: start; }
.tk-fix__ev > b, .tk-fix__do > b {
  display: block; margin-bottom: var(--s3); color: var(--paper);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
}
.tk-fix__ev .tk-chips { gap: 6px; }
.tk-fix__do { border-top: 0; padding-top: 0; }
@media (max-width: 720px) { .tk-fix__cols { grid-template-columns: 1fr; gap: var(--s5); } }

/* ── Проблемная метрика крупнее: композиция вместо ровной сетки ── */
.tk-metrics { grid-auto-flow: dense; }
.tk-metric.is-lead {
  grid-column: span 2; align-content: start;
  background: oklch(21.5% .008 95);
}
.tk-metric.is-lead.is-bad  { border-color: oklch(68% .16 25 / .45); }
.tk-metric.is-lead.is-warn { border-color: oklch(73% .14 85 / .4); }
.tk-metric.is-lead .tk-metric__value { font-size: clamp(2.1rem, 4vw, 2.9rem); }
.tk-metric.is-lead .tk-metric__name { font-size: 1.05rem; }
@media (max-width: 700px) { .tk-metric.is-lead { grid-column: span 1; grid-row: auto; } }

/* ── Распределение длин: простые полосы вместо гистограммы ── */
.tk-distro { display: grid; gap: 8px; }
.tk-distro__row { display: grid; grid-template-columns: 110px 1fr 42px; gap: var(--s3); align-items: center; }
.tk-distro__l { color: var(--text); font-size: .9rem; }
.tk-distro__bar { height: 12px; border-radius: 3px; background: oklch(25% .006 95); overflow: hidden; }
.tk-distro__bar i { display: block; height: 100%; background: oklch(72% .02 90 / .3); }
.tk-distro__row.is-mid .tk-distro__bar i { background: oklch(72% .02 90 / .68); }
.tk-distro__v { color: var(--paper); font-size: .88rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Заголовки разделов: редакционная подача и крупный ритм ── */
.tk-head {
  display: flex; align-items: baseline; gap: var(--s4);
  margin-top: var(--s16); padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.tk-head__n {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.03em;
  color: oklch(45% .01 95); line-height: 1;
}
.tk-head__t { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 620; color: var(--paper); letter-spacing: -.02em; }
.tk-head__s { margin: 4px 0 0; color: var(--muted); font-size: .93rem; }

/* три уровня воздуха: внутри блока, между блоками, между главами */
.tk__result { gap: var(--s6); }
.tk__result > .tk-verdict + .tk-fix { margin-top: calc(var(--s6) * -1 + var(--s5)); }
.tk-section { margin-top: var(--s16); }


/* ══ Первый экран: заголовок и рабочая область — одна композиция ══ */
.tool-hero__tech {
  max-width: 62ch; margin-top: 10px; color: var(--quiet);
  font-size: .88rem; line-height: 1.55;
}
.tk--hero:not(.section) { padding-top: var(--s6); }


/* переключатель режимов: один элемент с двумя состояниями */
.tk__seg {
  display: inline-flex; gap: 0; margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.tk__segbtn {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 2px; margin-right: var(--s6); font: inherit; font-size: .95rem;
  color: var(--quiet); position: relative;
  transition: color .16s var(--ease);
}
.tk__segbtn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent;
}
.tk__segbtn:hover { color: var(--text); }
.tk__segbtn.is-active { color: var(--paper); }
.tk__segbtn.is-active::after { background: var(--accent); }
.tk__segbtn:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r1); }

/* рабочая область: сюда работают с текстом, а не заполняют поле */
.tk__textarea--work {
  min-height: 250px; border-color: var(--line); background: var(--bg);
  font-size: 1.02rem; line-height: 1.65; padding: 18px 18px 8px;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.tk__count { font-variant-numeric: tabular-nums; }

/* необязательное — свёрнуто, чтобы не спорить весом с основным полем */
.tk__adv { margin-top: var(--s4); }
.tk__adv > summary {
  cursor: pointer; list-style: none; color: var(--muted); font-size: .89rem;
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
}
.tk__adv > summary::-webkit-details-marker { display: none; }
.tk__adv > summary::before { content: '+'; color: var(--accent); font-size: 1rem; }
.tk__adv[open] > summary::before { content: '–'; }
.tk__adv > summary:hover { color: var(--text); }
.tk__adv .tk__label { margin-top: var(--s3); }
.tk__again { margin-top: var(--s4); }

/* что будет после анализа — до того, как человек нажал кнопку */
/* display: flex перебивает атрибут hidden — правило ниже обязательно */
.tk__after[hidden] { display: none; }
.tk__after {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s3);
  padding-top: var(--s2);
}
.tk__after-l { color: var(--quiet); font-size: .86rem; margin-right: 2px; }
.tk__after-i {
  color: var(--text); font-size: .86rem; padding: 4px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.tk__after-n {
  flex-basis: 100%; margin: 6px 0 0; color: var(--quiet);
  font-size: .84rem; line-height: 1.55; max-width: 78ch;
}

/* состав анализа: три смысловые группы без сетки карточек */
.tk__head-lead { margin: var(--s3) 0 0; color: var(--muted); font-size: 1rem; max-width: 70ch; }
.tk__groups {
  display: grid; gap: var(--s10) var(--s8); margin-top: var(--s10);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tk__group h3 {
  margin: 0 0 var(--s4); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: .82rem; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--quiet);
}
.tk__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.tk__group li { display: grid; gap: 3px; }
.tk__group b { color: var(--paper); font-weight: 550; font-size: 1rem; }
.tk__group span { color: var(--muted); font-size: .89rem; line-height: 1.5; }

@media (max-width: 560px) {
  .tk__bar { flex-direction: column; align-items: stretch; }
}


/* ══ Editorial-слой ══
   Из присланного гайда взято то, что работает на тёмном экране: контраст
   кеглей, широкие поля, один акцент, монохром в данных. Печатные приёмы
   (бумага, лак, формат) и молочный фон к этому носителю не относятся. */

/* Отчёт шире обычной страницы: пустое место здесь работает на статус.
   Блок запуска намеренно живёт в общей сетке — иначе колонки формы
   расходятся с остальными инструментами. */
.tk__result { max-width: 1180px; }
.tk__result { margin-inline: auto; }

/* Контраст кеглей: крупная цифра и мелкий контекст под ней */
.tk-verdict__title { font-size: clamp(1.7rem, 3.6vw, 2.9rem); letter-spacing: -.035em; line-height: 1.05; }
.tk-score__n { font-size: clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing: -.045em; gap: 0; }
.tk-score__l { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.tk-fix__v   { font-size: clamp(2.2rem, 4vw, 3.1rem); letter-spacing: -.04em; }
.tk-metric.is-lead .tk-metric__value { letter-spacing: -.035em; }

/* Заголовок графика — как рубрика в журнале */
.tk-fig__t {
  font-size: .78rem; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--quiet);
}
.tk-fig__d { font-size: .84rem; }

/* Выноска: главный вывод крупной строкой, а не абзацем среди прочих */
.tk-pull {
  margin: var(--s8) 0; padding-left: var(--s6);
  border-left: 1px solid var(--accent);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.5;
  color: var(--paper); font-weight: 480; max-width: 62ch; letter-spacing: -.01em;
}
.tk-pull b { font-weight: 650; }

/* Разделы отчёта: номер как крупный тихий знак, не как бейдж */
.tk-head__n { font-size: clamp(2rem, 3.6vw, 2.8rem); color: oklch(38% .008 95); font-weight: 600; }
.tk-head { gap: var(--s6); }

/* Справочная часть страницы отделена от отчёта фоном */
.section.faq, .section.tk__next { background: oklch(14.5% .005 95); }
.section.faq { padding-top: var(--s16); }


/* ══ Отделка поверхностей ══ */
:root { --tk-r: 12px; --tk-line: oklch(70% .01 95 / .1); --tk-line-2: oklch(70% .01 95 / .16); }

/* Единый радиус: карточки 12px, поля и мелкие элементы — 8px */
.tk__card, .tk-panel, .tk-det, .tk-verdict, .tk-fix, .tk-metric,
.tk__group, .tk-rec, .tk-find__item, .tk-ok, .tk-chart, .tk-marked, .tk__link-card {
  border-radius: var(--tk-r);
}
.tk__textarea, .tk__input, .tk-rank li, .tk-check li, .tk-dl > div { border-radius: 8px; }

/* Тонкие разделители вместо жёстких границ */
.tk-metric, .tk-panel, .tk-det, .tk__group h3, .tk-rank li, .tk-dl > div,
.tk-bots th, .tk-bots td { border-color: var(--tk-line); }
.tk-bots th, .tk-bots td { border-bottom-color: var(--tk-line); }
.tk-head, .tk-section, .tk-fix__do, .tk-audience, .tk-checklist { border-top-color: var(--tk-line); }
.tk-verdict, .tk-fix { border-color: var(--tk-line-2); }

/* Больше воздуха внутри блоков */
.tk-metric { padding: clamp(16px, 2vw, 22px); gap: 8px; }
.tk-panel { padding: clamp(20px, 2.8vw, 28px); }
.tk-det__body { padding: 0 clamp(18px, 2.4vw, 26px) var(--s6); }
.tk-det > summary { padding: 16px clamp(18px, 2.4vw, 26px); }
.tk__result { gap: var(--s8); }
.tk-head { margin-top: var(--s20); padding-top: var(--s8); }

/* Шкалы тоньше, со скруглёнными концами и мягкой подсветкой заполненной части */
.tk-scale__track { height: 5px; border-radius: 999px; }
.tk-scale__ok, .tk-scale__warn { border-radius: 999px; }
.tk-scale__ok { box-shadow: 0 0 12px oklch(69% .14 145 / .18); }
.tk-rowbar, .tk-distro__bar { border-radius: 999px; height: 5px; }
.tk-rowbar__fill, .tk-distro__bar i { border-radius: 999px; }
.tk-distro__row.is-mid .tk-distro__bar i { box-shadow: 0 0 14px oklch(65% .14 60 / .25); }
.tk-seg { border-radius: 999px; }

/* Отклик на наведение: лёгкий подъём и более заметная обводка */
.tk-metric, .tk-panel, .tk-det, .tk-rank li {
  transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
@media (hover: hover) {
  .tk-metric:hover, .tk-panel:hover { border-color: var(--tk-line-2); transform: translateY(-1px); }
  .tk-det:hover { border-color: var(--tk-line-2); }
  .tk-rank li:hover { background: oklch(24% .006 95); }
  .tk-chip { transition: border-color .16s var(--ease), color .16s var(--ease); }
  .tk-chip:hover { border-color: var(--tk-line-2); color: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
  .tk-metric, .tk-panel, .tk-det, .tk-rank li { transition: none; }
  .tk-metric:hover, .tk-panel:hover { transform: none; }
}

/* Нумерация разделов: тонкий знак в круге вместо крупной цифры */
.tk-head__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--tk-line-2); border-radius: 50%;
  font-size: .88rem; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); background: oklch(20% .006 95);
}
.tk-head { align-items: center; }

/* Длинные предложения — как цитата, а не строка списка */
.tk-list li { padding-left: var(--s4); border-left: 1px solid var(--tk-line-2); list-style: none; }
.tk-list { padding-left: 0; }

/* Подвал отчёта и вторичные подписи — тише */
.tk-note, .tk-fig__d { color: oklch(58% .008 95); }

/* ── Глубина фона и внешние поля ──
   Плоская заливка на большом экране читается как админка. Два очень слабых
   пятна дают глубину, не превращая фон в градиентную подложку. */
.tool-page {
  background-image:
    radial-gradient(60% 40% at 12% 0%, oklch(30% .03 60 / .10), transparent 70%),
    radial-gradient(50% 35% at 92% 8%, oklch(28% .02 250 / .07), transparent 72%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 720px) { .tool-page { background-image: none; } }

/* Внешние поля на десктопе: отчёт не должен упираться в край экрана */
@media (min-width: 1100px) {
  /* Отчёт держит собственные поля. Блок запуска идёт в общей сетке,
     иначе его колонки уже, чем у остальных инструментов. */
  .tk--hero .shell:not(.tool-launch__layout),
  .tk .shell:not(.tool-launch__layout) { padding-inline: clamp(48px, 4vw, 72px); }
}


/* ══ Фирменные паттерны из брендбука ══
   Паспорт замера и метки достоверности — те же, что в статьях и кейсах.
   Отчёт перестаёт быть отдельным островом со своей вёрсткой. */
.tk-pass {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0;
  border: 1px solid var(--tk-line); border-radius: var(--tk-r); overflow: hidden;
}
.tk-pass > div {
  padding: 16px 18px;
  border-right: 1px solid var(--tk-line); border-bottom: 1px solid var(--tk-line);
}
.tk-pass dt {
  color: var(--quiet); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 7px;
}
.tk-pass dd {
  margin: 0; color: var(--text); font-size: 20px; font-weight: 580;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.tk-pass dd small {
  display: block; margin-top: 5px; color: var(--muted);
  font-size: 11.5px; font-weight: 400; line-height: 1.45;
}
.tk-pass dd b { font-weight: 580; }

/* метки достоверности: тот же набор знаков, что в статьях */
.tk-claim {
  display: inline-flex; align-items: center; gap: 7px; min-height: 22px;
  color: var(--quiet); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-top: 6px;
}
.tk-claim i { font-style: normal; font-size: 10px; line-height: 1; }
.tk-claim--ok  { color: oklch(67% .1 162); }
.tk-claim--est { color: oklch(78% .11 95); }
.tk-claim--un  { color: var(--quiet); }

.tk-sub {
  margin: 0 0 var(--s3); color: var(--quiet); font-size: .78rem;
  font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
}


/* ══ bb-take: позиция с основанием и условием опровержения ══ */
.tk-take { border-left: 2px solid var(--accent); padding: 4px 0 4px 22px; }
.tk-take__label {
  margin: 0 0 10px; color: var(--accent); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 620;
}
.tk-take p { color: var(--text); font-size: 15.5px; line-height: 1.6; max-width: 62ch; margin: 0; }
.tk-take__base {
  margin-top: 10px !important; color: var(--quiet) !important;
  font-size: 12.5px !important; line-height: 1.55;
}
.tk-take b { color: var(--paper); font-weight: 620; }

/* ══ bb-scope: границы метода ══ */
.tk-scope {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
  border: 1px solid var(--tk-line); border-radius: var(--tk-r); overflow: hidden;
}
.tk-scope > div {
  padding: 18px 20px; border-right: 1px solid var(--tk-line);
  border-bottom: 1px solid var(--tk-line);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.tk-scope b {
  display: block; margin-bottom: 8px; color: var(--text); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 620;
}


/* Оценка параметра в паспорте: цвет значения и точка перед подписью */
.tk-pass dd.is-good { color: var(--tk-good-text); }
.tk-pass dd.is-warn { color: var(--tk-warn-text); }
.tk-pass dd.is-bad  { color: var(--tk-bad-text); }
.tk-pass dd small { color: var(--muted); }
.tk-pass > div.is-good dt::before,
.tk-pass > div.is-warn dt::before,
.tk-pass > div.is-bad dt::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 7px; vertical-align: middle;
}
.tk-pass > div.is-good dt::before { background: oklch(69% .14 145); }
.tk-pass > div.is-warn dt::before { background: oklch(73% .14 85); }
.tk-pass > div.is-bad  dt::before { background: var(--tk-bad-border); }


/* Цвет столбцов графика по смысловой зоне, а не для красоты */
.tk-bar--ok   { fill: oklch(69% .14 145 / .62); }
.tk-bar--warn { fill: oklch(73% .14 85 / .6); }
.tk-bar--bad  { fill: oklch(68% .16 25 / .6); }
.tk-legend-zones { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: 6px; }
.tk-zone { display: inline-flex; align-items: center; gap: 7px; color: var(--quiet); font-size: .8rem; }
.tk-zone::before { content: ''; width: 12px; height: 6px; border-radius: 2px; }
.tk-zone--ok::before   { background: oklch(69% .14 145 / .62); }
.tk-zone--warn::before { background: oklch(73% .14 85 / .6); }
.tk-zone--bad::before  { background: oklch(68% .16 25 / .6); }


/* Кнопка «Проверить другой текст»: тот же язык, что у остальных действий */
/* Кнопка повторного прогона — обычная вторичная кнопка из tool-base.css.
   Свой кегль и padding здесь давали 46px против 44px на других страницах. */
.tk__again:hover { color: var(--paper); border-color: var(--accent); background: oklch(24% .01 60 / .5); }

/* Длинные предложения: длина крупно и с оценкой, текст рядом */
.tk-long { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.tk-long li {
  display: grid; grid-template-columns: 76px 1fr; gap: var(--s4); align-items: start;
  padding: 14px 16px; background: var(--surface-deep);
  border: 1px solid var(--tk-line); border-radius: 8px;
}
.tk-long__n {
  display: grid; justify-items: center; gap: 2px;
  font-size: 1.5rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.tk-long__n i { font-style: normal; font-size: .68rem; font-weight: 400; color: var(--quiet); letter-spacing: .04em; }
.tk-long li.is-bad  .tk-long__n { color: var(--tk-bad-text); }
.tk-long li.is-warn .tk-long__n { color: var(--tk-warn-text); }
.tk-long li.is-good .tk-long__n { color: var(--tk-good-text); }
.tk-long__t { color: var(--muted); font-size: .93rem; line-height: 1.55; }
.tk-long__note {
  display: block; margin-top: 6px; color: var(--quiet);
  font-size: .8rem; font-weight: 500;
}

/* Примеры предложений — цитата, а не акцент: вес и цвет ниже основного текста */
.tk-list li { color: var(--muted); font-size: .92rem; font-weight: 400; line-height: 1.55; }
.tk-panel .tk-list li { color: var(--muted); }

/* Счёт проверок: «из N» отдельной строкой под цифрой. Рядом с крупным
   числом любой горизонтальный отступ читается как слипшийся текст. */
.tk-score { justify-items: end; text-align: right; overflow: visible; }
.tk-score__n { display: block; line-height: .95; }
.tk-score__n i {
  display: block; margin-top: 6px; font-style: normal;
  font-size: .95rem; font-weight: 500; color: var(--quiet); letter-spacing: .02em;
}
.tk-verdict__top { overflow: visible; }


/* Совет под отклонившимся параметром */
.tk-tip {
  display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--tk-line);
  color: var(--text); font-size: 12px; font-weight: 400; line-height: 1.5;
}
.tk-tip b {
  display: block; margin-bottom: 4px; color: var(--quiet);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 620;
}
.tk-pass > div.is-bad, .tk-pass > div.is-warn { background: oklch(21% .007 95); }


/* Проверка на автоматику: тот же механизм, что в аудите URL */


/* Шапка: показатели инструмента блоками — компонент переехал в tool-base.css,
   который подключён ко всем пяти инструментам. Здесь он был доступен только
   трём из них. */

/* Лид шапки: 58ch при кегле 18px рвут строку на висячих словах
   («и другие», «Без единого»). Даём больше ширины и просим браузер
   выравнивать перенос по смыслу. */
  .tool-hero--tight .tool-hero__lead { text-wrap: pretty; }
.tool-hero--tight h1 { text-wrap: balance; }


/* Поле адреса — основной сценарий, значит и вес у него больший */

/* Ограничение ширины у заголовка и лида снято по требованию: строки идут
   на всю доступную ширину контейнера. */
.tool-hero__tech { max-width: none; }


/* Нейтральное состояние: данных мало, число показываем, вердикт — нет.
   Раньше такие карточки всё равно красились в зелёный или красный. */
.tk-metric.is-none { border-color: var(--tk-line-2); }
.tk-metric.is-none .tk-metric__value { color: var(--muted); }
.tk-badge.is-none {
  color: var(--quiet); border-color: var(--tk-line-2); background: transparent;
}
.tk-seg.is-none { background: var(--tk-line-2); }


/* Статус свёрнутого блока: бейдж справа, полоса состояния слева */
.tk-det.is-bad  { border-left: 2px solid var(--danger); }
.tk-det.is-warn { border-left: 2px solid var(--warn, oklch(80% .15 85)); }
.tk-det.is-good { border-left: 2px solid var(--ok, oklch(72% .15 145)); }


/* Итог без вердикта: рамка и счёт нейтральные */
.tk-verdict.is-none { border-color: var(--tk-line-2); }
.tk-verdict.is-none .tk-verdict__title { color: var(--text); }
.tk-score.is-none .tk-score__n { color: var(--muted); }


/* Числа в таблицах — вправо и табличными цифрами: столбец должен читаться
   сверху вниз, а не прыгать по ширине символов. */
.tk-tbl td:nth-child(2), .tk-tbl td:nth-child(3) {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tk-tbl th:nth-child(2), .tk-tbl th:nth-child(3) { text-align: right; }
/* Пояснению — свободная ширина, числам — узкие фиксированные доли */
.tk-tbl { table-layout: fixed; }
.tk-tbl th:first-child { width: 26%; }
.tk-tbl th:nth-child(2), .tk-tbl th:nth-child(3) { width: 13%; }
.tk-tbl th:last-child { width: auto; }

/* Подписи продвинутых метрик читались хуже всего, а объясняют самое сложное */
.tk-pass dt { font-size: 13.5px; }
.tk-pass dd small { font-size: 13px; }

/* Предупреждение об урезанном тексте стоит до выводов и должно читаться */
.tk-note--top {
  margin: 0 0 var(--s4); padding: 10px 14px;
  border-left: 2px solid var(--accent); background: var(--surface);
  color: var(--text); font-size: 13.5px;
}


@media (max-width: 560px) {
  /* Узкий экран: колонка бейджа сжимается, иначе заголовку не остаётся места */
  .tk-det > summary { grid-template-columns: 1fr auto 14px; gap: var(--s3); }
}


/* Правило robots, по которому вынесен вердикт */
.tk-rule {
  display: block; margin-top: 4px; color: var(--quiet);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
}


/* ══════════════════════════════════════════════════════════════════════
   Отчёт по макету: шапка вердикта, знаки разделов, строки проверок.
   Порядок в шапке — подпись, число, сегменты: читатель сначала узнаёт,
   что считаем, и лишь потом видит счёт.
   ══════════════════════════════════════════════════════════════════════ */

/* Полоса и свечение сверху уступили место спокойной карточке: статус несут
   кикер, число и цвет строк, а не подсветка контейнера. */
.tk-verdict::before { display: none; }
.tk-verdict::after { opacity: .5; }
.tk-verdict.is-good { border-color: oklch(69% .14 145 / .22); }
.tk-verdict.is-warn { border-color: oklch(73% .14 85 / .3); }
.tk-verdict.is-bad  { border-color: oklch(68% .16 25 / .35); }

.tk-verdict__head { display: grid; gap: 6px; min-width: 0; }
.tk-verdict__kicker {
  color: oklch(72% .15 145); font-size: .74rem; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase;
}
.tk-verdict.is-bad  .tk-verdict__kicker { color: var(--tk-bad-text); }
.tk-verdict.is-warn .tk-verdict__kicker { color: var(--tk-warn-text); }
.tk-verdict__title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; }
.tk-verdict__sub { color: var(--muted); font-size: .98rem; }

/* Счёт: подпись сверху, крупное число, «из 6» рядом на базовой линии */
.tk-score { justify-items: end; gap: 4px; }
.tk-score__l {
  color: var(--quiet); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-align: right;
}
.tk-score__n {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem); font-weight: 650;
  line-height: 1; letter-spacing: -.03em; color: oklch(72% .15 145);
}
.tk-verdict.is-bad  .tk-score__n { color: var(--tk-bad-text); }
.tk-verdict.is-warn .tk-score__n { color: var(--tk-warn-text); }
.tk-score.is-none .tk-score__n { color: var(--paper); }
.tk-score__n i {
  font-style: normal; font-size: .95rem; font-weight: 500;
  letter-spacing: 0; color: var(--muted);
}
.tk-segs { gap: 7px; }
.tk-seg { width: 26px; height: 4px; }

/* Факты о тексте: значок, число, подпись — и тонкие разделители между */
.tk-verdict__facts {
  display: flex; flex-wrap: wrap; gap: 0; opacity: 1;
  padding-top: var(--s4); border-top: 1px solid oklch(70% .01 95 / .18);
}
.tk-fact {
  display: flex; align-items: center; gap: 12px;
  padding: 2px clamp(18px, 2.6vw, 34px) 2px 0; margin-right: clamp(18px, 2.6vw, 34px);
  border-right: 1px solid oklch(70% .01 95 / .16);
}
.tk-fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.tk-fact__i { width: 22px; height: 21px; flex: none; color: var(--quiet); }
.tk-fact__b { display: grid; gap: 1px; }
.tk-fact__b b {
  color: var(--paper); font-size: 1.16rem; font-weight: 620;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.tk-fact__b i { font-style: normal; color: var(--quiet); font-size: .84rem; }

/* Группа проверок: подпись и число в мягкой плашке, а не в кольце */
.tk-checkgroup__t span {
  padding: 2px 9px; border: 0; border-radius: 6px;
  background: oklch(70% .01 95 / .1); color: inherit;
}
.tk-checkgroup__t.is-good span { background: oklch(28% .04 145 / .75); }
.tk-checkgroup__t.is-warn span { background: oklch(29% .045 85 / .7); }
.tk-checkgroup__t.is-bad  span { background: oklch(28% .045 25 / .7); }

/* Строка проверки: значок состояния, название с подсказкой, полоса, число */
.tk-check li {
  grid-template-columns: 22px minmax(0, 1fr) minmax(120px, .85fr) auto;
  gap: var(--s3) var(--s4); padding: 9px 14px;
}
.tk-check__dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: oklch(70% .01 95 / .12); color: var(--paper);
}
.tk-check__dot svg { width: 15px; height: 15px; }
.tk-check li.is-good .tk-check__dot { background: oklch(69% .14 145); color: oklch(20% .03 145); }
.tk-check li.is-warn .tk-check__dot { background: oklch(80% .15 85); color: oklch(24% .04 85); }
.tk-check li.is-bad  .tk-check__dot { background: var(--tk-bad-border); color: oklch(22% .04 25); }
.tk-check__n { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); }
.tk-check__q {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center; cursor: help;
  border: 1px solid oklch(70% .01 95 / .3); color: var(--quiet);
  font-size: 10.5px; font-weight: 600; line-height: 1;
}
.tk-check__q:hover { color: var(--text); border-color: var(--line-strong); }
.tk-check__bar {
  position: relative; height: 5px; border-radius: 999px;
  background: oklch(70% .01 95 / .14); overflow: hidden;
}
.tk-check__bar i {
  position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px;
  background: var(--quiet);
}
.tk-check li.is-good .tk-check__bar i { background: oklch(69% .14 145); }
.tk-check li.is-warn .tk-check__bar i { background: oklch(80% .15 85); }
.tk-check li.is-bad  .tk-check__bar i { background: var(--tk-bad-border); }

@media (max-width: 720px) {
  /* Полосе на узком экране места нет — остаются значок, название и число */
  .tk-check li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .tk-check__bar { display: none; }
  .tk-fact { border-right: 0; padding-right: 0; margin-right: var(--s5); }
}

/* Знак раздела: 01–02 базовый разбор кругом, 03–04 углублённый квадратом */
.tk-head--deep .tk-head__n {
  border-radius: 8px; border-color: oklch(61.5% .13 39 / .55);
  color: var(--accent);
}

/* Статус в карточке метрики: слово капсом и точка — как в макете */
.tk-badge {
  text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; padding: 4px 11px;
}
.tk-metric .tk-badge::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-left: 1px;
}


/* ── Структура предложений: три числа, затем полосы ────────────────────
   Полоса красится по той же шкале, что и графики: рабочий диапазон
   зелёный, хвосты — жёлтый и красный. */
.tk-figstat {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: clamp(16px, 3vw, 40px); align-items: start;
  padding: var(--s5) 0; margin-bottom: var(--s2);
  border-top: 1px solid var(--tk-line); border-bottom: 1px solid var(--tk-line);
}
.tk-figstat > div { display: grid; gap: 3px; padding-right: clamp(16px, 3vw, 40px); }
.tk-figstat > div + div { border-left: 1px solid var(--tk-line); padding-left: clamp(16px, 3vw, 40px); }
.tk-figstat b {
  color: var(--paper); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 640;
  line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.tk-figstat i { font-style: normal; color: var(--quiet); font-size: .87rem; line-height: 1.4; }
.tk-figstat .tk-figstat__top { color: var(--muted); font-size: .87rem; }
.tk-figstat > div.is-good b { color: oklch(72% .15 145); font-size: clamp(1.15rem, 1.9vw, 1.45rem); }

.tk-distro__row { grid-template-columns: 130px 1fr 46px; }
.tk-distro__bar { height: 6px; border-radius: 999px; }
.tk-distro__bar i { background: oklch(72% .02 90 / .4); border-radius: 999px; }
.tk-distro__row.is-good .tk-distro__l,
.tk-distro__row.is-good .tk-distro__v { color: oklch(72% .15 145); }
.tk-distro__row.is-good .tk-distro__bar i { background: oklch(69% .14 145); }
.tk-distro__row.is-warn .tk-distro__bar i { background: oklch(80% .15 85); }
.tk-distro__row.is-bad  .tk-distro__bar i { background: var(--tk-bad-border); }

@media (max-width: 720px) {
  .tk-figstat { grid-auto-flow: row; }
  .tk-figstat > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--tk-line); padding-top: var(--s4); }
}


/* ── Продвинутые метрики: цвет значения и рамка у отклонившейся карточки ──
   Бледный «почти белый» зелёный не читался как оценка: значение теперь
   в том же цвете, что и точка у подписи. */
.tk-pass dd.is-good { color: oklch(72% .15 145); }
.tk-pass dd.is-warn { color: oklch(80% .15 85); }
.tk-pass dd.is-bad  { color: oklch(70% .17 25); }
/* Обводка внутренней тенью, а не рамкой: border добавлял ячейке лишний
   пиксель, и подсвеченная карточка вылезала из ряда. */
.tk-pass > div.is-warn, .tk-pass > div.is-bad {
  position: relative; z-index: 1; border-radius: var(--tk-r);
  border-right-color: transparent;
}
.tk-pass > div.is-warn { box-shadow: inset 0 0 0 1px oklch(73% .14 85 / .55); }
.tk-pass > div.is-bad  { box-shadow: inset 0 0 0 1px oklch(68% .16 25 / .6); }
.tk-pass > div.is-warn .tk-tip b { color: oklch(80% .15 85); }
.tk-pass > div.is-bad  .tk-tip b { color: oklch(70% .17 25); }


/* ── Самые длинные предложения: номер, длина, текст, превышение ────────
   Правая колонка отвечает на вопрос «насколько длиннее нормы», который
   раньше читателю приходилось считать в уме. */
.tk-figstat--center { text-align: center; }
.tk-figstat--center > div { justify-items: center; }
.tk-figstat--center > div.is-bad b  { color: oklch(70% .17 25); }
.tk-figstat--center > div.is-warn b { color: oklch(80% .15 85); }

.tk-long li {
  grid-template-columns: 34px 62px minmax(0, 1fr) 92px;
  align-items: start; gap: var(--s3) var(--s5);
  border-left: 2px solid transparent;
}
.tk-long li.is-bad  { border-left-color: oklch(68% .16 25 / .8); }
.tk-long li.is-warn { border-left-color: oklch(73% .14 85 / .55); }
.tk-long__i {
  color: var(--quiet); font-size: .82rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .04em; padding-top: 6px;
}
.tk-long li.is-bad .tk-long__i { color: oklch(70% .17 25); }
.tk-long__over { display: grid; gap: 1px; justify-items: end; text-align: right; }
.tk-long__over b {
  color: oklch(80% .15 85); font-size: 1.05rem; font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.tk-long li.is-bad .tk-long__over b { color: oklch(70% .17 25); }
.tk-long__over i { font-style: normal; color: var(--quiet); font-size: .72rem; line-height: 1.3; }

@media (max-width: 720px) {
  .tk-long li { grid-template-columns: 28px 54px minmax(0, 1fr); }
  .tk-long__over { grid-column: 2 / -1; justify-items: start; text-align: left; }
}


/* ── Текст с проблемами: счётчики, ключ подсветки и сам текст в одной рамке ──
   Раньше счётчики были отдельными пилюлями и висели над панелью: связь
   «столько-то мест — вот они» приходилось достраивать глазами. */
.tk-marked-wrap {
  border: 1px solid var(--tk-line); border-radius: var(--tk-r);
  background: oklch(19% .006 95); overflow: hidden;
}
.tk-legend {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  border-bottom: 1px solid var(--tk-line);
}
.tk-legend .tk-lg {
  margin: 0; padding: 14px clamp(14px, 2vw, 22px); border: 0; border-radius: 0;
  background: transparent; gap: 10px; font-size: .95rem;
}
.tk-legend .tk-lg + .tk-lg { border-left: 1px solid var(--tk-line); }
.tk-legend .tk-lg::before { display: none; }
.tk-lg__i { width: 18px; height: 18px; flex: none; }
.tk-lg__sw { width: 14px; height: 3px; border-radius: 2px; background: currentColor; flex: none; }
.tk-lg__n { color: var(--text); }
.tk-legend .tk-lg b { margin-left: auto; font-size: 1.05rem; }
.tk-lg--ai   { color: var(--tk-bad-border); }
.tk-lg--bur  { color: oklch(80% .15 85); }
.tk-lg--spam { color: oklch(70% .17 45); }
.tk-lg--rep  { color: oklch(65% .16 250); }
.tk-legend .tk-lg.is-empty { opacity: .5; }
.tk-legend .tk-lg.is-empty .tk-lg__n,
.tk-legend .tk-lg.is-empty b { color: var(--quiet); }

/* Ключ подсветки: что означает каждый цвет в тексте ниже */
.tk-marked__key {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5);
  margin: 0; padding: 12px clamp(14px, 2vw, 22px);
  color: var(--quiet); font-size: .84rem;
}
.tk-key { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.tk-key::before { content: ''; width: 11px; height: 11px; border-radius: 3px; }
.tk-key--ai::before  { background: oklch(62% .19 25); }
.tk-key--rep::before { background: oklch(80% .15 85); }
.tk-key--etc::before { background: oklch(60% .01 95); border-radius: 50%; }

/* Сам текст: моноширинный, как в редакторе, отметки — заливкой, а не
   подчёркиванием: на длинном тексте подчёркивания сливались со строкой */
.tk-marked-wrap .tk-marked {
  border: 0; border-radius: 0; background: transparent;
  margin: 0 clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px);
  padding: 0; max-height: 460px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88rem; line-height: 1.85; color: var(--muted);
}
.tk-marked-wrap .tk-mk { box-shadow: none; padding: 2px 4px; border-radius: 4px; }
.tk-marked-wrap .tk-mk--ai   { background: oklch(45% .17 25 / .55); color: oklch(95% .04 25); }
.tk-marked-wrap .tk-mk--bur  { background: oklch(55% .13 85 / .3); color: oklch(94% .05 85); }
.tk-marked-wrap .tk-mk--spam { background: oklch(55% .14 45 / .3); color: oklch(94% .05 45); }
.tk-marked-wrap .tk-mk--rep  { background: oklch(60% .12 85 / .22); color: oklch(92% .06 85); }

@media (max-width: 720px) {
  .tk-legend { grid-auto-flow: row; }
  .tk-legend .tk-lg + .tk-lg { border-left: 0; border-top: 1px solid var(--tk-line); }
}


/* ── Частоты слов и словосочетаний: сетка ячеек вместо строки пилюль ──
   Число всегда в правом углу ячейки, поэтому столбик чисел читается
   сам по себе, без вглядывания в текст. */
.tk-freq {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 1px solid var(--tk-line); border-radius: var(--tk-r); overflow: hidden;
}
.tk-freq__i {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 12px 16px; min-width: 0;
  border-right: 1px solid var(--tk-line); border-bottom: 1px solid var(--tk-line);
}
.tk-freq__w { color: var(--text); font-size: .95rem; overflow-wrap: anywhere; }
.tk-freq__i b {
  color: var(--muted); font-weight: 620; font-size: 1rem;
  font-variant-numeric: tabular-nums; flex: none;
}
.tk-freq__i.is-hot b { color: oklch(80% .15 85); }
.tk-freq__i.is-plain { justify-content: flex-start; }
.tk-freq__i.is-plain .tk-freq__w { color: var(--tk-bad-text); }

/* Счётчик отметок красится тем же цветом, что и его значок */
.tk-legend .tk-lg b { color: currentColor; }
.tk-legend .tk-lg.is-empty b { color: var(--quiet); }


/* ── Устойчивые сочетания: три колонки с числом у правого края ────────
   Пилюли разной длины прыгали по строке, и частоты не сравнивались. */
.tk-pairs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
}
.tk-pair {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--tk-line); min-width: 0;
}
.tk-pair__w { color: var(--text); font-size: .95rem; overflow-wrap: anywhere; }
.tk-pair b {
  margin-left: auto; color: oklch(70% .17 25); font-weight: 620;
  font-variant-numeric: tabular-nums; flex: none;
}

/* Статус в заголовке спойлера — словом, без пилюли: в макете это подпись,
   а не кнопка, и она не спорит с заголовком за внимание */
.tk-det > summary .tk-badge {
  border: 0; background: transparent; padding: 0;
  font-size: .88rem; letter-spacing: 0; text-transform: none; font-weight: 550;
}
.tk-det > summary .tk-badge.is-good { color: var(--muted); }
.tk-det > summary .tk-badge.is-warn { color: oklch(80% .15 85); }
.tk-det > summary .tk-badge.is-bad  { color: oklch(70% .17 25); }

/* Найденные AI-шаблоны — тот же красный, что и подсветка в тексте выше */
.tk-block--ai .tk-freq__w { color: oklch(70% .17 25); }
.tk-block--ai .tk-freq__i b { color: oklch(70% .17 25); }


/* ══ Правки по разбору макета ══════════════════════════════════════════ */

/* Колонка значения фиксированной ширины: без неё полоса в строке прыгала
   влево-вправо, подстраиваясь под «5» и «14.8 сл.» */
.tk-check li { grid-template-columns: 22px minmax(0, 1fr) minmax(120px, .85fr) 78px; }
.tk-check__v { text-align: right; }

/* Адрес разобранной страницы — карточка со значком, а не строка в потоке */
.tk-source {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; margin-top: var(--s4);
  border: 1px solid var(--tk-line); border-radius: var(--tk-r);
  background: oklch(19% .006 95);
}
.tk-source__i { width: 20px; height: 20px; flex: none; color: var(--quiet); margin-top: 1px; }
.tk-source p { margin: 0; color: var(--quiet); font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.tk-source a { color: oklch(72% .15 145); text-decoration: underline; text-underline-offset: 3px; }
.tk-source a:hover { color: oklch(80% .15 145); }
.tk-source__t { color: var(--text); }

/* Инфоблок «на каком объёме посчитано» — под карточками метрик */
.tk-info {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; margin-top: var(--s3);
  border: 1px solid var(--tk-line); border-radius: var(--tk-r);
  background: oklch(19% .006 95);
}
.tk-info__i {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: oklch(28% .04 145 / .8); color: oklch(80% .15 145);
  font-size: .82rem; font-weight: 700; font-style: italic;
}
.tk-info p {
  margin: 0; padding-left: 14px; border-left: 1px solid var(--tk-line);
  color: var(--muted); font-size: .93rem; line-height: 1.55;
}

/* Значок в счётчике проблем красится своим цветом — раньше побеждало
   общее правило легенды и треугольник оставался серым */
.tk-legend .tk-lg--ai   { color: var(--tk-bad-border); }
.tk-legend .tk-lg--bur  { color: oklch(80% .15 85); }
.tk-legend .tk-lg--spam { color: oklch(62% .16 250); }
.tk-legend .tk-lg--rep  { color: oklch(80% .15 85); }
.tk-legend .tk-lg.is-empty { color: var(--quiet); }

/* ── Частоты по основам: таблица с шапкой ── */
.tk-stems { border: 1px solid var(--tk-line); border-radius: var(--tk-r); overflow: hidden; }
.tk-stems__t { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tk-stems__t th {
  text-align: left; padding: 11px 16px; color: var(--quiet);
  font-size: .8rem; font-weight: 500; border-bottom: 1px solid var(--tk-line);
}
.tk-stems__t td { padding: 11px 16px; border-bottom: 1px solid var(--tk-line); vertical-align: middle; }
.tk-stems__t tr:last-child td { border-bottom: 0; }
.tk-stems__n { width: 46px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.tk-stems__w { width: 32%; color: var(--paper); overflow-wrap: anywhere; }
.tk-stems__r { color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-stems__b { width: 22%; }
.tk-stems__b .tk-rowbar { height: 4px; }
.tk-stems__mark { color: var(--quiet); }
.tk-stems__t tr.is-warn .tk-stems__mark { color: oklch(80% .15 85); }
.tk-stems__t tr.is-bad  .tk-stems__mark { color: oklch(70% .17 25); }
.tk-stems__t tr.is-warn .tk-rowbar__fill { background: oklch(80% .15 85); }
.tk-stems__t tr.is-bad  .tk-rowbar__fill { background: oklch(70% .17 25); }

/* ── Фактическая связь как схема: предмет — отношение — свойство ── */
.tk-triple {
  display: grid; grid-template-columns: minmax(180px, .9fr) minmax(120px, .5fr) minmax(200px, 1.2fr);
  align-items: center; gap: var(--s4);
  padding: 18px 20px; border: 1px solid oklch(61.5% .13 39 / .45);
  border-radius: var(--tk-r); background: oklch(19% .006 95);
}
.tk-triple__s { color: var(--paper); font-size: 1.02rem; font-weight: 620; line-height: 1.35; }
.tk-triple__r { display: flex; align-items: center; gap: 10px; color: var(--accent); }
.tk-triple__r i { flex: 1; height: 0; border-top: 1px dashed currentColor; }
.tk-triple__r em { font-style: normal; font-size: .92rem; white-space: nowrap; }
.tk-triple__r .tk-triple__arrow { position: relative; }
.tk-triple__r .tk-triple__arrow::after {
  content: ''; position: absolute; right: 0; top: -4px;
  border: 4px solid transparent; border-left-color: currentColor;
}
.tk-triple__rt { display: none; }
.tk-triple__o { color: var(--text); font-size: .97rem; line-height: 1.5; }

@media (max-width: 720px) {
  /* На узком экране схема разворачивается в строки: линия со стрелкой
     теряет смысл, отношение показываем словом */
  .tk-triple { grid-template-columns: 1fr; gap: 8px; }
  .tk-triple__r { display: none; }
  .tk-triple__rt { display: block; color: var(--accent); font-size: .9rem; }
}

/* ── Пассивный залог: статус словом, примеры — цитатами ── */
.tk-panel__head h4 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.tk-quotes li {
  padding-left: var(--s4); border-left: 2px solid oklch(80% .15 85 / .8);
  color: var(--muted); font-size: .95rem; line-height: 1.6; font-style: italic;
}
.tk-panel.is-bad .tk-quotes li { border-left-color: oklch(70% .17 25 / .8); }
.tk-panel.is-good .tk-quotes li { border-left-color: oklch(69% .14 145 / .55); }

/* ── Подвал карточки «Ритм»: расшифровка повторов внутри той же рамки ── */
.tk-pass__foot {
  grid-column: 1 / -1; display: grid; gap: 10px;
  padding: 16px 18px; border-top: 1px solid var(--tk-line);
}
.tk-pass__foot-t { color: var(--quiet); font-size: .88rem; }
.tk-tri { display: flex; flex-wrap: wrap; gap: 0; }
.tk-tri__i {
  padding: 2px clamp(12px, 1.8vw, 20px) 2px 0; margin-right: clamp(12px, 1.8vw, 20px);
  border-right: 1px solid var(--tk-line); color: var(--text); font-size: .92rem;
}
.tk-tri__i:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.tk-tri__i b { color: oklch(80% .15 85); font-weight: 620; font-variant-numeric: tabular-nums; }

/* Цитаты пассива всегда янтарные: это примеры того, что стоит переписать,
   даже когда общая доля в норме */
.tk-panel.is-good .tk-quotes li { border-left-color: oklch(80% .15 85 / .7); }
/* Статус рядом с заголовком панели — подписью, а не пилюлей */
.tk-panel__head .tk-badge {
  border: 0; background: transparent; padding: 0;
  font-size: .92rem; letter-spacing: 0; text-transform: none; font-weight: 550;
}
.tk-panel__head .tk-badge::after { display: none; }

/* Рамка переехала на обёртку: подвал стоит под сеткой карточек, а не в ней */
.tk-passbox { border: 1px solid var(--tk-line); border-radius: var(--tk-r); overflow: hidden; }
.tk-passbox .tk-pass { border: 0; border-radius: 0; }
.tk-passbox .tk-pass > div:last-child { border-bottom: 0; }


/* ── Четыре типа отметок — четыре разных тона ──────────────────────────
   Канцелярит и частые повторы красились одним янтарным (оба hue 85) и
   в тексте не различались. Разведены по кругу: красный, фиолетовый,
   оранжевый, янтарный. Цвет квадрата в ключе совпадает с заливкой. */
.tk-marked-wrap .tk-mk--ai   { background: oklch(48% .2 15 / .68);   color: oklch(96% .04 15); }
.tk-marked-wrap .tk-mk--bur  { background: oklch(52% .18 325 / .6);  color: oklch(96% .04 325); }
.tk-marked-wrap .tk-mk--spam { background: oklch(48% .14 250 / .55); color: oklch(94% .05 250); }
.tk-marked-wrap .tk-mk--rep  { background: oklch(80% .15 100 / .42); color: oklch(98% .03 100); }

.tk-key--ai::before   { background: oklch(62% .19 25); }
.tk-key--bur::before  { background: oklch(62% .18 325); }
.tk-key--spam::before { background: oklch(62% .16 250); }
.tk-key--rep::before  { background: oklch(80% .15 85); }
.tk-key--etc::before  { background: oklch(60% .01 95); border-radius: 50%; }

/* Тот же тон у значка канцелярита в счётчиках */
.tk-legend .tk-lg--bur { color: oklch(66% .18 325); }

/* Подчёркивания вне панели (если разметка используется в другом месте) */
.tk-mk--bur { box-shadow: inset 0 -2px 0 oklch(66% .18 325); }


/* ══ Отчёт на телефоне ═════════════════════════════════════════════════
   Блок стоит последним намеренно. Мобильные правила отчёта уже дважды
   перебивались поздними десктопными правками: медиазапрос не добавляет
   специфичности, поэтому побеждает тот, кто ниже. Всё, что должно
   пережить следующую волну правок, живёт здесь.
   Замеры: Chromium и WebKit, 393 / 375 / 360 / 320 px. */

@media (max-width: 720px) {

  /* Строка проверки. Десктопная сетка с колонками 120px и 78px сжимала
     название до 7px на 393px и до нуля на 375px и уже: значок подсказки
     садился поверх числа. Полосе на телефоне места нет — остаются значок
     состояния, название и значение.
     Эти же фиксированные колонки задавали min-content 296px всей карточке
     вердикта, из-за чего на 320px её заголовок уезжал за правый край. */
  .tk-check li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .tk-check__bar { display: none; }
  /* Название — inline-flex, и значок подсказки шёл отдельным флекс-элементом:
     когда он не влезал в строку, то садился поверх числа, а после переноса
     висел один на своей строке. На узком экране пускаем его в поток текста,
     как обычный знак после последнего слова. */
  .tk-check__n { display: block; }
  .tk-check__q { vertical-align: middle; margin-left: 7px; }

  /* Частоты по основам. Таблица держала 350.7px на любой ширине экрана и
     контейнер с overflow:hidden молча срезал колонку «Интенсивность» —
     её не видел никто. Полоса здесь иллюстрация к числу, которое стоит
     соседней колонкой, поэтому на телефоне она уходит первой. */
  .tk-stems { overflow-x: auto; }
  .tk-stems__b,
  .tk-stems__t th:nth-child(4) { display: none; }
  .tk-stems__t { font-size: .88rem; }
  .tk-stems__t th,
  .tk-stems__t td { padding: 10px 8px; }
  .tk-stems__n { width: 30px; }
  /* `anywhere` задаёт колонке min-content в один символ, и без колонки полосы
     таблица ужимала «Основу» до 78px, разрывая слова: «knowled/ge».
     `break-word` рвёт только то, что не помещается целиком, а на ширину
     колонки не влияет. Совсем длинную основу подхватит overflow-x выше. */
  .tk-stems__w { width: auto; overflow-wrap: break-word; }
}

@media (max-width: 560px) {

  /* Заголовок спойлера. `1fr` — это `minmax(auto, 1fr)`, и автоминимум
     заголовка съедал колонку статуса до 10px: «В норме» наползало на текст.
     `minmax(0, 1fr)` разрешает заголовку переноситься. */
  .tk-det > summary { grid-template-columns: minmax(0, 1fr) auto 14px; }

  /* Карточки «Ритм» и «Лексика». `auto-fit minmax(170px, 1fr)` давал две
     колонки ровно на 393px — ширине ходовых iPhone, — и ярлыки капсом
     рвались посреди слова: «В ПОЛОСЕ 10– 20 СЛОВ», «ПОВТОР 3- ГРАММ». */
  .tk-pass { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {

  /* Длинные предложения. Номер и счётчик слов забирали 82px из ширины
     строки, тексту оставалось 123px на 320px — два слова в строке.
     Разводим по этажам: сверху номер со счётчиком, ниже само предложение. */
  .tk-long li { grid-template-columns: auto minmax(0, 1fr); }
  .tk-long__i { grid-column: 1; grid-row: 1; align-self: center; padding-top: 0; }
  .tk-long__n {
    grid-column: 2; grid-row: 1;
    display: flex; align-items: baseline; gap: 7px;
    font-size: 1.25rem;
  }
  .tk-long__t { grid-column: 1 / -1; grid-row: 2; }
  .tk-long__over { grid-column: 1 / -1; grid-row: 3; }
}