/* ============ SEO Audit report — result.php ============ */
/* Дополняет styles.css. Токены и базовые компоненты (шапка, футер,
   .button, .crumbs, cookie-баннер) приходят оттуда.
   Статусные цвета: зелёный/охра/красный — только статус, не бренд. */

/* ============ Токены отчёта + компат-слой для inline-стилей ============ */

:root{
  /* статусные цвета отчёта */
  --ok:oklch(62% .09 162);
  --warn:oklch(72% .11 80);
  --info:oklch(68% .07 250);
  --mono:SKMono,ui-monospace,Consolas,monospace;

  /* компат: inline-стили result.php написаны на токенах старого дизайна */
  --space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;
  --space-xl:32px;--space-2xl:48px;--space-3xl:64px;
  --text-xs:12px;--text-sm:14px;--text-3xl:clamp(30px,4.6vw,44px);
  --bg-surface:var(--surface-deep);
  --bg-elevated:var(--surface);
  --border:var(--line);
  --border-subtle:var(--line);
  --text-secondary:var(--muted);
  --text-muted:var(--quiet);
  --radius-sm:4px;--radius-md:8px;
  --audit-pass:var(--ok);
  --audit-pass-bg:color-mix(in oklch,var(--ok) 9%,transparent);
  --audit-warn:var(--warn);
  --audit-warn-bg:color-mix(in oklch,var(--warn) 9%,transparent);
  --audit-fail:var(--danger);
  --audit-fail-bg:color-mix(in oklch,var(--danger) 9%,transparent);
  --font-mono:var(--mono);
  --accent-green:var(--ok);
  --accent-terra:var(--accent);
}

/* ============ Каркас страницы ============ */

.container{width:min(var(--container),calc(100% - var(--gutter)*2));margin-inline:auto}
.container--narrow{max-width:720px}

.audit-section{padding-block:var(--s16);border-top:1px solid var(--line)}
.audit-section:first-of-type{border-top:0}

.audit-section__title{max-width:26ch;margin-bottom:var(--s6);font-size:clamp(27px,4.2vw,42px);line-height:1.06;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.audit-section__title small{font-family:var(--font);letter-spacing:0}
.audit-subsection-title{margin-bottom:var(--s4);font-size:18px;line-height:1.25;letter-spacing:-.02em;font-weight:550}

.section-header__label{color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.01em}
.page-header__title{font-size:clamp(30px,4.6vw,46px);line-height:1.06;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.mini-meta{color:var(--quiet);font-size:12px;line-height:1.5}

.audit-back-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:var(--s2);color:var(--muted);font-size:14px;transition:color 160ms var(--ease)}
.audit-back-link__icon{display:inline-flex;line-height:1}.audit-back-link__icon .ic{width:15px;height:15px}

.audit-page-title{margin-top:6px;font-size:clamp(34px,5.4vw,66px);line-height:1.04;letter-spacing:-.045em;font-weight:600}
.audit-page-title__prefix{display:block;margin-bottom:6px;color:var(--muted);font-size:clamp(17px,2vw,22px);font-weight:500;letter-spacing:-.02em}
.audit-page-title__domain{display:block;overflow-wrap:anywhere}
.audit-url-display{margin-top:12px;color:var(--muted);font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}

code{font-family:var(--mono);font-size:.86em;padding:2px 6px;background:var(--surface);border-radius:var(--r1);overflow-wrap:anywhere}

/* ============ Кнопки (.btn — разметка отчёта, .button приходит из styles.css) ============ */

.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:1px solid transparent;border-radius:var(--r2);background:transparent;color:var(--text);font:inherit;font-size:15px;font-weight:650;line-height:1.2;cursor:pointer;text-decoration:none;transition:background 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--surface-deep)}
.btn--secondary{border-color:var(--accent);color:var(--text)}
.btn--ghost{border-color:var(--line-strong);color:var(--muted)}
.btn--lg{padding:14px 26px}
.btn:disabled{opacity:.5;cursor:default}

.audit-export-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s6)}
.audit-action-button{min-height:44px;padding:9px 16px;font-size:14px;font-weight:550}
.audit-action-button svg{display:block;flex:none}

/* ============ Бейджи и пилюли статусов ============ */

.audit-badge{display:inline-flex;align-items:center;padding:3px 7px;border:1px solid;border-radius:var(--r1);font-family:var(--mono);font-size:11px;font-weight:550;line-height:1.4;letter-spacing:.02em;white-space:nowrap}
.audit-badge--passed{color:var(--ok);border-color:color-mix(in oklch,var(--ok) 45%,transparent);background:var(--audit-pass-bg)}
.audit-badge--warning{color:var(--warn);border-color:color-mix(in oklch,var(--warn) 45%,transparent);background:var(--audit-warn-bg)}
.audit-badge--error{color:var(--danger);border-color:color-mix(in oklch,var(--danger) 45%,transparent);background:var(--audit-fail-bg)}
.audit-badge--na{color:var(--quiet);border-color:var(--line-strong);background:transparent}

.audit-pill{display:inline-flex;align-items:center;padding:3px 9px;border:1px solid var(--line-strong);border-radius:var(--r1);font-family:var(--mono);font-size:11px;line-height:1.4;white-space:nowrap;color:var(--muted)}
.audit-pill--green{color:var(--ok);border-color:color-mix(in oklch,var(--ok) 45%,transparent)}
.audit-pill--red{color:var(--danger);border-color:color-mix(in oklch,var(--danger) 45%,transparent)}
.audit-pill--gray{color:var(--quiet)}

.tag{display:inline-flex;align-items:center;padding:3px 10px;border:1px solid var(--line-strong);border-radius:var(--r1);font-size:12px;color:var(--muted)}
.tag--green{color:var(--ok);border-color:color-mix(in oklch,var(--ok) 40%,transparent)}

/* ============ Общий балл ============ */

.audit-score-hero{display:grid;gap:var(--s8);margin-top:var(--s10);padding-top:var(--s8);border-top:1px solid var(--line-strong)}
.audit-score-hero__circle{display:flex;flex-direction:column;align-items:center;gap:14px;justify-self:center}
.audit-score-circle{display:block;width:190px;height:190px}
.audit-score-circle--xl{width:min(230px,60vw);height:auto;aspect-ratio:1}
.audit-score-circle__bg{fill:none;stroke:var(--line);stroke-width:7}
.audit-score-circle__value{fill:none;stroke-width:7;stroke-linecap:butt;transform:rotate(-90deg);transform-origin:60px 60px}
.audit-score-circle__value--green{stroke:var(--ok)}
.audit-score-circle__value--amber{stroke:var(--warn)}
.audit-score-circle__value--warning{stroke:oklch(66% .14 55)}
.audit-score-circle__value--error{stroke:var(--danger)}
.audit-score-circle__text{fill:var(--text);font-family:var(--font);font-size:34px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.audit-score-circle__label{fill:var(--quiet);font-family:var(--font);font-size:9px;letter-spacing:.04em}
.audit-grade{padding:3px 16px;border:1px solid var(--line-strong);border-radius:var(--r1);font-size:20px;font-weight:650;line-height:1.4}
.audit-grade--green{color:var(--ok);border-color:color-mix(in oklch,var(--ok) 45%,transparent)}
.audit-grade--amber{color:var(--warn);border-color:color-mix(in oklch,var(--warn) 45%,transparent)}
.audit-grade--warning{color:oklch(66% .14 55);border-color:color-mix(in oklch,oklch(66% .14 55) 45%,transparent)}
.audit-grade--error{color:var(--danger);border-color:color-mix(in oklch,var(--danger) 45%,transparent)}
.audit-score-hero__verdict{max-width:56ch;font-size:clamp(17px,1.6vw,20px);line-height:1.45;letter-spacing:-.015em;font-weight:450}

/* Бенчмарк-шкала */
.audit-benchmark{margin-top:var(--s6)}
.audit-benchmark__bar{position:relative;display:flex;height:8px;border-radius:2px;overflow:visible}
.audit-benchmark__zone{height:100%}
.audit-benchmark__zone--low{background:color-mix(in oklch,var(--danger) 22%,transparent);border-radius:2px 0 0 2px}
.audit-benchmark__zone--mid{background:color-mix(in oklch,var(--warn) 22%,transparent)}
.audit-benchmark__zone--high{background:color-mix(in oklch,var(--ok) 22%,transparent);border-radius:0 2px 2px 0}
.audit-benchmark__avg{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--quiet)}
.audit-benchmark__you{position:absolute;top:50%;width:12px;height:12px;border:2px solid var(--bg);border-radius:50%;background:var(--accent);transform:translate(-50%,-50%)}
.audit-benchmark__labels{display:flex;justify-content:space-between;margin-top:8px;color:var(--quiet);font-size:11px}

/* Категории */
.audit-categories{margin-top:var(--s6);border-top:1px solid var(--line)}
.audit-cat-row{display:grid;grid-template-columns:minmax(96px,150px) 1fr 34px;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.audit-cat-label{font-size:13px;color:var(--muted)}
.audit-cat-bar{height:4px;background:var(--surface);border-radius:2px;overflow:hidden}
.audit-cat-bar__fill{height:100%;border-radius:2px}
.audit-cat-bar__fill--green{background:var(--ok)}
.audit-cat-bar__fill--amber{background:var(--warn)}
.audit-cat-bar__fill--warning{background:oklch(66% .14 55)}
.audit-cat-bar__fill--error{background:var(--danger)}
.audit-cat-score{font-family:var(--mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}

/* Полосы направлений вырастают каскадом вслед за кольцом.
   Масштабируем ширину, заданную сервером, а не саму ширину: transform не вызывает layout.
   --i приходит из result.php, задержка 60ms на строку, 8 строк укладываются в 480ms.
   Глобальный сброс prefers-reduced-motion гасит анимацию, forwards оставляет полосу на месте. */
@keyframes audit-cat-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.audit-cat-bar__fill{
  transform-origin:left center;
  animation:audit-cat-grow 550ms var(--ease) both;
  animation-delay:calc(300ms + var(--i,0) * 60ms);
}
/* Глобальный сброс обнуляет duration, но не delay: без этой строки полосы
   при reduced-motion всё равно выскакивали по очереди в течение секунды. */
@media (prefers-reduced-motion:reduce){
  .audit-cat-bar__fill{animation:none;transform:none}
}

/* ============ Сворачиваемые блоки ============ */

.audit-collapsible{border-block:1px solid var(--line)}
.audit-collapsible+.audit-collapsible{border-top:0}
.audit-collapsible__title{min-height:52px;display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;font-size:15px;font-weight:550;user-select:none}
.audit-collapsible__title::-webkit-details-marker{display:none}
.audit-collapsible__title::before{content:"+";flex:none;width:16px;color:var(--accent);font-weight:500;text-align:center}
.audit-collapsible[open]>.audit-collapsible__title::before{content:"–"}
.audit-collapsible>:not(summary){margin-bottom:var(--s5)}

/* ============ Радар ============ */

.audit-radar-wrapper{display:flex;justify-content:center}
.audit-radar{display:block;width:min(430px,100%);height:auto}
.audit-radar__grid{fill:none;stroke:var(--line)}
.audit-radar__axis{stroke:var(--line)}
.audit-radar__dot{r:4px;stroke:var(--bg);stroke-width:1;cursor:default}
.audit-radar__label{font-family:var(--mono);font-size:11px;text-anchor:middle;dominant-baseline:middle}
.audit-radar__tooltip{font-family:var(--font);font-size:11px;text-anchor:middle;opacity:0;pointer-events:none;transition:opacity 160ms var(--ease)}
.audit-radar__dot:hover+.audit-radar__tooltip{opacity:1}

/* ============ Вердикты первого экрана ============ */

.audit-verdicts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--s8)}
.audit-verdict{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r1)}
.audit-verdict__icon{display:inline-flex;align-items:center}.audit-verdict__icon .ic{width:15px;height:15px}
.audit-verdict__text{font-size:13px;color:var(--muted)}
.audit-verdict--good .audit-verdict__icon{color:var(--ok)}
.audit-verdict--warn .audit-verdict__icon{color:var(--warn)}
.audit-verdict--bad .audit-verdict__icon{color:var(--danger)}
.audit-verdict-mini{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r1);font-size:12px;color:var(--muted)}
.audit-verdict-mini::before{content:"";width:7px;height:7px;border-radius:50%}
.audit-verdict-mini--good::before{background:var(--ok)}
.audit-verdict-mini--bad::before{background:var(--danger)}

/* ============ Sticky-навигация по разделам ============ */

.audit-nav{position:sticky;top:0;z-index:15;background:color-mix(in oklch,var(--bg) 94%,transparent);border-block:1px solid var(--line);backdrop-filter:blur(8px)}
.audit-nav__list{display:flex;gap:2px;overflow-x:auto;list-style:none;scrollbar-width:none}
.audit-nav__list::-webkit-scrollbar{display:none}
.audit-nav__link{display:flex;align-items:center;min-height:48px;padding:0 13px;border-bottom:2px solid transparent;color:var(--muted);font-size:13px;white-space:nowrap;transition:color 160ms var(--ease),border-color 160ms var(--ease)}
.audit-nav__link--active{color:var(--text);border-bottom-color:var(--accent)}

/* ============ Таблицы ============ */

.audit-table-wrapper,.audit-scroll-table{overflow-x:auto}
.audit-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.55}
.audit-table th{padding:0 16px 10px 0;border-bottom:1px solid var(--line-strong);color:var(--quiet);font-size:11px;font-weight:550;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.audit-table td{padding:11px 16px 11px 0;border-bottom:1px solid var(--line);text-align:center;vertical-align:top}
.audit-table th:first-child,.audit-table td:first-child{color:var(--text);min-width:130px;text-align:left}
.audit-table td:not(:first-child){color:var(--muted)}
.audit-table td:last-child{padding-right:0;white-space:nowrap}
.audit-table strong{color:var(--text);font-weight:600}
.audit-table a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.audit-table--redirects td:first-child{min-width:0;width:34px;color:var(--quiet)}
.audit-table__url{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}
.audit-table__text{overflow-wrap:anywhere}
.audit-table__detail{font-size:13px}
.audit-table__detail--empty{color:var(--quiet)}

/* ============ Redirect Checker ============ */

.audit-redirect-hero{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6) var(--s10);margin-bottom:var(--s8)}
.audit-redirect-score svg{display:block}
.audit-redirect-score text{font-family:var(--font);letter-spacing:-.04em}
.audit-redirect-badges{display:grid;gap:12px}
.audit-redirect-badge-row,.audit-redirect-conninfo{display:flex;flex-wrap:wrap;gap:8px}

.audit-chain{margin-bottom:var(--s8)}
.audit-chain__flow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.audit-chain__hop{display:grid;gap:5px}
.audit-chain__code{justify-self:start;padding:3px 10px;border:1px solid;border-radius:var(--r1);font-family:var(--mono);font-size:12px;font-weight:550;white-space:nowrap}
.audit-chain__url{max-width:280px;overflow:hidden;color:var(--muted);font-family:var(--mono);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.audit-chain__time{color:var(--quiet);font-family:var(--mono);font-size:11px}
.audit-chain__arrow{color:var(--quiet);font-size:16px}
.audit-chain__total{margin-top:14px;color:var(--muted);font-size:13px}
.audit-chain__total strong{color:var(--text);font-weight:600}

/* ============ SERP и соцсети — светлые «документные» образцы ============ */

.audit-serp-preview{max-width:600px;padding:18px 20px;background:oklch(98% .006 90);border:1px solid var(--line-strong);border-radius:var(--r1)}
.audit-serp-preview__url{color:oklch(40% .02 150);font-size:13px;overflow-wrap:anywhere}
.audit-serp-preview__title{margin-top:5px;color:oklch(42% .16 264);font-size:18px;line-height:1.3;font-weight:500}
.audit-serp-preview__desc{margin-top:4px;color:oklch(42% .01 90);font-size:14px;line-height:1.55}

.audit-social-preview{max-width:480px;border:1px solid var(--line-strong);border-radius:var(--r1);overflow:hidden}
.audit-social-preview__image{aspect-ratio:1.91/1;background-color:var(--surface);background-size:cover;background-position:center}
.audit-social-preview__image--empty{display:grid;place-content:center;color:var(--quiet);font-size:13px}
.audit-social-preview__body{padding:12px 16px;background:var(--surface-deep)}
.audit-social-preview__site{color:var(--quiet);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.audit-social-preview__title{margin-top:4px;font-size:14px;font-weight:550;line-height:1.35}
.audit-social-preview__desc{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.5}

/* ============ Дерево заголовков ============ */

.audit-heading-tree{display:grid;gap:2px;font-family:var(--mono);font-size:13px}
.audit-heading-tree__item{display:flex;gap:10px;padding:3px 0}
.audit-heading-tree__tag{flex:none;width:24px;color:var(--quiet)!important;font-weight:550}
.audit-heading-tree__text{color:var(--muted);overflow-wrap:anywhere}

/* ============ Контент: числа и проверки ============ */

.audit-content-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s5) var(--s8);margin-bottom:var(--s8)}
.audit-content-stat{padding-top:14px;border-top:1px solid var(--line-strong)}
.audit-content-stat__value{font-size:clamp(24px,3vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.audit-content-stat--hero .audit-content-stat__value{font-size:clamp(30px,4vw,42px)}
.audit-content-stat__label{margin-top:7px;color:var(--quiet);font-size:11px}
.audit-content-grid{display:grid;gap:var(--s5) var(--s6)}
.audit-content-grid--2col{grid-template-columns:1fr 1fr}

.audit-content-checks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s6)}
.audit-content-check{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r1)}
.audit-content-check__icon{display:inline-flex;align-items:center}.audit-content-check__icon .ic{width:14px;height:14px}
.audit-content-check__icon--yes{color:var(--ok)}
.audit-content-check__icon--no{color:var(--quiet)}
.audit-content-check__label{font-size:13px;color:var(--muted)}
.audit-trust-signals{display:flex;flex-wrap:wrap;gap:8px}

/* ============ Текст и читаемость ============ */

.audit-text-hero{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8) var(--s12);margin-bottom:var(--s8)}
.audit-text-score{display:flex;flex-direction:column;align-items:center;gap:10px}
.audit-text-score svg{display:block}
.audit-text-score text{font-family:var(--font);letter-spacing:-.04em}
.audit-text-score__label{color:var(--muted);font-size:13px}
.audit-text-hero__stats{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--s5) var(--s6);min-width:min(100%,340px)}
.audit-text-hero__stat{display:flex;flex-direction:column;padding-top:12px;border-top:1px solid var(--line-strong)}
.audit-text-hero__stat-value{font-size:clamp(20px,2.2vw,27px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.audit-text-hero__stat-label{margin-top:5px;color:var(--quiet);font-size:11px}

.audit-gauges{display:grid;gap:var(--s6);margin-bottom:var(--s6)}
.audit-gauge__header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.audit-gauge__label{font-size:13px;color:var(--muted)}
.audit-gauge__value{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.audit-gauge__track{position:relative;height:8px;background:var(--surface);border-radius:2px}
.audit-gauge__zone{position:absolute;top:0;bottom:0}
.audit-gauge__fill{position:absolute;top:0;bottom:0;left:0;border-radius:2px}
.audit-gauge__marker{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px solid;transform:translateX(-1px)}
.audit-gauge__zones-labels{display:flex;justify-content:space-between;gap:8px;margin-top:6px}

.audit-histogram{display:flex;align-items:flex-end;gap:clamp(6px,1.5vw,14px);height:150px;padding-top:6px}
.audit-histogram__bar-group{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%;min-width:0}
.audit-histogram__count{color:var(--quiet);font-family:var(--mono);font-size:11px}
.audit-histogram__bar{width:min(100%,42px);border-radius:2px 2px 0 0}
.audit-histogram__label{color:var(--quiet);font-family:var(--mono);font-size:10px;white-space:nowrap}

.audit-wordcloud{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding-block:var(--s2)}
/* Цвет слова приходит из result.php (палитра --data-*). Прежний
   color:var(--muted)!important перебивал его и вместе с прозрачностью
   опускал мелкие слова до 2,5:1. */
.audit-wordcloud__word{line-height:1.2}

.audit-ngrams-grid{display:grid;gap:var(--s6)}

/* ============ Ссылки и медиа ============ */

.audit-links-grid{display:grid;gap:var(--s8)}

/* ============ Quick Wins ============ */

.audit-qw-progress{display:grid;gap:10px;max-width:520px;margin-bottom:var(--s6)}
.audit-qw-progress__text{color:var(--muted);font-size:13px}
.audit-qw-progress__text strong{color:var(--text);font-weight:600}
.audit-qw-progress__bar{height:6px;background:var(--surface);border-radius:2px;overflow:hidden}
.audit-qw-progress__fill{height:100%;background:var(--ok);border-radius:2px;transition:width 300ms var(--ease)}

.audit-qw-hero{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6) var(--s10);margin-bottom:var(--s6)}
.audit-qw-hero__number{font-size:clamp(38px,5vw,52px);font-weight:600;line-height:1;letter-spacing:-.05em}
.audit-qw-hero__label{display:block;margin-top:6px;color:var(--quiet);font-size:12px}
.audit-qw-hero__bar-wrap{flex:1;min-width:min(100%,260px)}
.audit-qw-stackbar{display:flex;gap:2px;height:8px;border-radius:2px;overflow:hidden}
.audit-qw-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;color:var(--muted);font-size:12px}
.audit-qw-legend__item{display:inline-flex;align-items:center;gap:7px}
.audit-qw-legend__item strong{color:var(--text);font-weight:600}
.audit-qw-legend__dot{width:8px;height:8px;border-radius:50%}

.audit-quickwins{border-top:1px solid var(--line-strong)}
.audit-quickwin{padding:24px 0 24px 18px;border-bottom:1px solid var(--line);border-left:2px solid var(--line)}
.audit-quickwin--critical{border-left-color:var(--danger)}
.audit-quickwin--high,.audit-quickwin--medium{border-left-color:var(--warn)}
.audit-quickwin--low{border-left-color:var(--line-strong)}
.audit-quickwin__header{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.audit-quickwin__num{color:var(--quiet);font-family:var(--mono);font-size:12px}
.audit-quickwin__effort{margin-left:auto;color:var(--quiet);font-size:12px}
.audit-quickwin__title{max-width:60ch;font-size:18px;line-height:1.3;letter-spacing:-.02em;font-weight:550}
.audit-quickwin__impact{max-width:68ch;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.6}
.audit-quickwin__action,.audit-quickwin__evidence,.audit-quickwin__effect{max-width:68ch;margin-top:9px;color:var(--muted);font-size:14px;line-height:1.6}
.audit-quickwin__action strong,.audit-quickwin__evidence strong,.audit-quickwin__effect strong{color:var(--text);font-weight:600}
.audit-quickwin--done{opacity:.5}
.audit-quickwin--done .audit-quickwin__title{text-decoration:line-through;text-decoration-thickness:1px}

.audit-qw-check{position:relative;display:inline-flex;width:22px;height:22px;cursor:pointer}
.audit-qw-check__input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.audit-qw-check__box{width:20px;height:20px;display:grid;place-content:center;border:1px solid var(--line-strong);border-radius:var(--r1);background:var(--bg);transition:background 160ms var(--ease),border-color 160ms var(--ease);pointer-events:none}
.audit-qw-check__box::after{content:"";width:13px;height:13px;background:var(--surface-deep);opacity:0;-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}
.audit-qw-check__input:checked+.audit-qw-check__box{background:var(--ok);border-color:var(--ok)}
.audit-qw-check__input:checked+.audit-qw-check__box::after{opacity:1}
.audit-qw-check__input:focus-visible+.audit-qw-check__box{outline:2px solid var(--accent);outline-offset:3px}

/* ============ Финальная CTA ============ */

.cta-section{padding-block:var(--s20);border-top:1px solid var(--line);background:var(--surface-deep)}
.cta-section__title{max-width:20ch;font-size:clamp(30px,4.6vw,46px);line-height:1.05;letter-spacing:-.045em;font-weight:600}
.cta-section__text{color:var(--muted);font-size:16px;line-height:1.62}
.audit-paths-v2{display:grid;gap:var(--s6)}
.audit-path{padding:26px 24px;border-top:1px solid var(--line-strong);background:var(--bg)}
.audit-path--hero{border-top-color:var(--accent)}
.audit-path--secondary-row{display:grid;gap:var(--s6)}
.audit-path__title{font-size:20px;font-weight:550;letter-spacing:-.02em}
.audit-path__desc{max-width:52ch;margin:8px 0 18px;color:var(--muted);font-size:14px;line-height:1.6}

/* ============ Toast (создаёт audit.js) ============ */

.audit-toast{position:fixed;left:50%;bottom:24px;z-index:80;max-width:min(90vw,420px);padding:12px 18px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2);color:var(--text);font-size:14px;line-height:1.5;opacity:0;transform:translate(-50%,8px);transition:opacity 200ms var(--ease),transform 200ms var(--ease);pointer-events:none}
.audit-toast--visible{opacity:1;transform:translate(-50%,0)}
.audit-toast--error{border-color:var(--danger)}
.audit-toast--success{border-color:var(--ok)}

/* ============ Остаточные литеральные цвета старой палитры в inline-коде ============ */

[style*="rgba(45,212,168"]{border-color:color-mix(in oklch,var(--ok) 30%,transparent)!important}
[style*="rgba(239,68,68"]{border-color:color-mix(in oklch,var(--danger) 30%,transparent)!important}
[style*="rgba(245,158,11"]{border-color:color-mix(in oklch,var(--warn) 30%,transparent)!important}
[stroke="#f97316"]{stroke:var(--warn)}
[fill="#f97316"]{fill:var(--warn)}
.audit-histogram__bar[style*="#f97316"]{background:var(--warn)!important}

/* ============ Hover ============ */

@media (hover:hover){
  .audit-back-link:hover{color:var(--text)}
  .audit-nav__link:hover{color:var(--text)}
  .btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .btn--secondary:hover{border-color:var(--accent-hover);color:var(--accent-hover)}
  .btn--ghost:hover{border-color:var(--text);color:var(--text)}
  .audit-table a:hover{color:var(--accent)}
}

/* ============ Desktop ============ */

@media (min-width:60rem){
  .audit-section{padding-block:var(--s20)}
  .audit-score-hero{grid-template-columns:250px minmax(0,1fr);gap:var(--s16);align-items:center}
  .audit-score-hero__circle{justify-self:start}
  .audit-links-grid{grid-template-columns:1fr 1fr;gap:var(--s16)}
  .audit-ngrams-grid{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .audit-gauges{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s12)}
  .audit-paths-v2{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
  .audit-path--secondary-row{grid-template-columns:1fr;gap:var(--s5)}
  .audit-content-grid--2col{grid-template-columns:1fr 1fr}
}

/* ============ Mobile ============ */

@media (max-width:40rem){
  .audit-export-buttons{gap:8px}
  .audit-action-button{flex:1 1 auto;justify-content:center}
  .audit-chain__url{max-width:200px}
  .audit-quickwin{padding-left:14px}
  .audit-quickwin__effort{margin-left:0;flex-basis:100%}
  .audit-content-grid--2col{grid-template-columns:1fr 1fr;gap:var(--s5)}

  /* Таблица редиректов складывается в карточки-строки */
  .audit-table--stack-mobile thead{display:none}
  .audit-table--stack-mobile tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .audit-table--stack-mobile td{display:block;padding:3px 0;border-bottom:0}
  .audit-table--stack-mobile td[data-label="#"]{display:none}
  .audit-table--stack-mobile td::before{content:attr(data-label);display:block;margin-bottom:2px;color:var(--quiet);font-size:10px;letter-spacing:.05em;text-transform:uppercase}
  .audit-table--stack-mobile td[data-label="Сценарий"]{color:var(--text);font-weight:550}
  .audit-table--stack-mobile td[data-label="Сценарий"]::before{content:none}
  .audit-table--stack-mobile td:last-child{white-space:normal}
  .audit-table--stack-mobile .audit-table__detail--empty{display:none}
}

@media (max-width:30rem){
  .audit-verdict{flex:1 1 45%}
  .audit-histogram{gap:4px}
  .audit-text-hero__stats{grid-template-columns:1fr 1fr}
}

/* ============ Доступность ============ */

@media (prefers-reduced-motion:reduce){
  .audit-toast,.audit-qw-progress__fill{transition:none}
}
@media (prefers-contrast:more){
  .audit-badge,.audit-pill,.audit-verdict,.audit-verdict-mini,.btn{border-width:2px}
}
@media (forced-colors:active){
  .audit-badge,.audit-pill,.btn{forced-color-adjust:auto}
  .audit-cat-bar__fill,.audit-qw-progress__fill,.audit-gauge__fill{background:Highlight}
}

/* ============ Print — источник PDF-экспорта ============ */
/* Белый фон, тёмный текст. Никаких fixed-декораций: всё декоративное и
   навигационное скрыто, иначе оно растрируется на каждой странице PDF. */

@media print{
  .site-header,.site-footer,.audit-nav,.audit-export-buttons,.audit-back-link,
  .cta-section,.back-to-top,.cookie-banner,.audit-toast,.skip-link,
  .audit-qw-check{display:none!important}

  html{scroll-behavior:auto;background:#fff!important;color-scheme:light}
  body{background:#fff!important;color:#16150f!important;font-size:12pt}
  .audit-section,.audit-path{background:#fff!important;border-color:#d9d6cd!important}
  .audit-section{padding-block:16pt;break-inside:auto}
  .audit-section__title,.audit-subsection-title,.audit-page-title,.page-header__title,
  .audit-score-hero__verdict,.audit-quickwin__title,.cta-section__title,
  .audit-content-stat__value,.audit-text-hero__stat-value,.audit-qw-hero__number,
  .audit-table strong,.audit-quickwin__action strong,.audit-quickwin__evidence strong,
  .audit-quickwin__effect strong,.audit-qw-progress__text strong,.audit-qw-legend__item strong,
  .audit-chain__total strong{color:#16150f!important}
  .audit-page-title__prefix,.audit-url-display,.audit-cat-label,.audit-verdict__text,
  .audit-content-check__label,.audit-gauge__label,.audit-quickwin__impact,
  .audit-quickwin__action,.audit-quickwin__evidence,.audit-quickwin__effect,
  .audit-table td:not(:first-child),.audit-heading-tree__text,.audit-wordcloud__word,
  .audit-chain__url,.audit-chain__total,.audit-text-score__label,.audit-qw-legend,
  .cta-section__text,.audit-social-preview__desc{color:#4c4a43!important}
  .mini-meta,.audit-histogram__count,.audit-histogram__label,.audit-quickwin__num,
  .audit-quickwin__effort,.audit-content-stat__label,.audit-text-hero__stat-label,
  .audit-qw-hero__label,.audit-benchmark__labels,.audit-chain__time,
  .audit-social-preview__site,.audit-heading-tree__tag{color:#6d6a61!important}
  .section-header__label{color:#9a4f30!important}

  .audit-table th{color:#6d6a61}
  .audit-table td,.audit-table td:first-child{color:#16150f}
  .audit-verdict-mini,.audit-cat-score,.audit-collapsible__title{color:#16150f!important}
  .audit-table td,.audit-table--stack-mobile tr,.audit-quickwin,.audit-cat-row,
  .audit-categories,.audit-collapsible,.audit-quickwins,.audit-score-hero,
  .audit-content-stat,.audit-text-hero__stat{border-color:#d9d6cd!important}
  .audit-verdict,.audit-verdict-mini,.audit-content-check,.audit-badge--na,
  .audit-pill,.audit-serp-preview,.audit-social-preview,.audit-grade,
  .audit-qw-check__box{border-color:#c8c5bb!important}
  code{background:#f1efe9;color:#16150f}
  .audit-cat-bar,.audit-gauge__track,.audit-qw-progress__bar{background:#eceae3!important}
  .audit-social-preview__body{background:#fff!important}
  .audit-social-preview__image{background-color:#f1efe9}
  .audit-score-circle__bg{stroke:#e4e2da}
  .audit-score-circle__text{fill:#16150f}
  .audit-score-circle__label{fill:#6d6a61}
  .audit-radar__grid,.audit-radar__axis{stroke:#d9d6cd}
  .audit-radar__dot{stroke:#fff}

  /* Статусные цвета обязаны доехать до бумаги */
  .audit-badge,.audit-pill,.audit-cat-bar__fill,.audit-benchmark__zone,
  .audit-benchmark__you,.audit-benchmark__avg,.audit-gauge__fill,.audit-gauge__zone,
  .audit-histogram__bar,.audit-qw-stackbar__seg,.audit-qw-legend__dot,
  .audit-qw-progress__fill,.audit-chain__code{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .audit-table--stack-mobile thead{display:table-header-group}
  tr,.audit-quickwin,.audit-verdict,.audit-content-stat,.audit-gauge,
  .audit-serp-preview,.audit-social-preview,.audit-chain__hop{break-inside:avoid}
  .audit-quickwin{padding-block:12pt}
  a{color:inherit;text-decoration:none}
}

/* Дубль «SEO-аудит» в шапке: префикс остаётся в H1 для семантики, визуально скрыт */
.audit-page-title__prefix.visually-hidden-prefix{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Знак статуса вместо буквы: подпись читает скринридер, глазу хватает формы.
   Размер поднят до 15: на 14 галочка в рамке выглядела мельче цифр строки. */
.audit-badge .ic{width:15px;height:15px}
.audit-sev-icon{vertical-align:middle;margin-right:4px}
.audit-action-button{gap:8px}

/* ── Отчёт: мера чтения и горизонтальное переполнение ─────────────────
   Замер по отчёту sk-seo-ru-f0e1c1.

   1. Строка. Абзацы шли на всю ширину контейнера — 1320px при кегле 13–14px,
   то есть медиана 142 символа и максимум 153. Читать такую строку тяжело:
   глаз не находит начало следующей. Ограничиваем только текстовые потоки,
   таблицы, шкалы, карточки и сетки остаются во всю ширину. */
.audit-section > .container > p,
.audit-section > .container > ul,
.audit-section > .container > ol,
.audit-collapsible > p,
.audit-note,
.audit-section__intro{max-width:74ch}

/* 2. Переполнение на мобильном. Страница уезжала вбок на 96px при окне 390,
   и ширина документа держалась ровно на 486px при любом окне. Причина —
   .sr-only внутри широких таблиц: они позиционированы абсолютно, а обёртка
   с overflow-x была статической и потому не служила им содержащим блоком,
   так что прокрутка их не обрезала. Делаем обёртку содержащим блоком. */
.audit-table-wrapper,
.audit-scroll-table{position:relative}

/* Колонка сетки n-грамм не сжималась ниже содержимого: 1fr держит min-content,
   а внутри таблица с min-width 540px. На 320px сетка выходила за экран на 10px
   и страница ехала вбок. minmax(0,1fr) разрешает колонке быть уже содержимого,
   прокрутку берёт на себя обёртка таблицы. */
.audit-ngrams-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width: 900px){
  .audit-ngrams-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Шкала-бенчмарк: зоны стали видимыми ──────────────────────────────
   Зоны красились смесью 22% с прозрачным, и на светлом фоне отличались от
   него на 1.37–1.41 — то есть выглядели одинаково серыми, шкала читалась
   бесцветной. Подняли до 70%: каждая зона берёт не меньше 3:1 к фону.

   Одного цвета мало: на 70% соседние зоны отличаются друг от друга всего
   на 1.08 — они разного тона, но почти одной светлоты, и для дальтоника
   сливаются. Поэтому между зонами идёт разделитель цветом страницы, и
   границы 0 → 70 → 100 видны независимо от восприятия цвета. */
.audit-benchmark__bar{height:10px}
/* Генерируемый site-palette.css перекрашивает зоны в самые бледные ступени
   шкалы, поэтому перебиваем важностью — сам палитровый файл не трогаем. */
body[data-sk-theme="anatomy"] .audit-benchmark__zone--low{background:color-mix(in srgb,var(--danger) 70%,var(--surface-deep))!important}
body[data-sk-theme="anatomy"] .audit-benchmark__zone--mid{background:color-mix(in srgb,var(--warn) 70%,var(--surface-deep))!important}
body[data-sk-theme="anatomy"] .audit-benchmark__zone--high{background:color-mix(in srgb,var(--ok) 70%,var(--surface-deep))!important}
.audit-benchmark__zone--mid,
.audit-benchmark__zone--high{box-shadow:inset 2px 0 0 var(--bg)}
/* Маркер «вы здесь» был терракотовым: на зелёной зоне при балле 97 он
   читался как тревога, хотя показывает положение, а не оценку. Делаем его
   нейтральным — светлая точка в тёмной обводке видна на всех трёх зонах. */
body[data-sk-theme="anatomy"] .audit-benchmark__you{
  background:var(--surface-deep)!important;
  border:2px solid var(--text)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--surface-deep) 80%,transparent);
}

/* ── Типографика в таблицах ───────────────────────────────────────────
   Замер по отчёту: внутри ячеек соседствовали пять кеглей — 12.5, 13, 13.5,
   14 и 15px — и два семейства, причём наоборот: бейджи шли моноширинным,
   а <code> обычным. Читать такую таблицу тяжело, глаз спотыкается на каждой
   смене размера.

   Оставляем три ступени и одно осмысленное исключение:
     15px — не используем в таблице вовсе, это кегль текста страницы
     14px — значение в ячейке
     13px — второстепенное: адрес, пояснение, вложенная подпись
     12px — бейдж статуса
   Моноширинный остаётся только у <code>: там он несёт смысл. */
.audit-table td,
.audit-table th{font-size:14px}
.audit-table td :is(span,div,b,strong,em,small){font-size:inherit}
.audit-table td.audit-table__url,
.audit-table td.audit-table__detail,
.audit-table td :is(small,.audit-table__note),
.audit-table td span:not(.audit-badge):not(.sr-only):not([class]){font-size:13px}
.audit-table :is(code,kbd,samp){
  font-family:var(--mono);
  font-size:13px;
}
.audit-table .audit-badge{
  font-family:inherit;
  font-size:12px;
  font-weight:550;
  letter-spacing:.01em;
}

/* ── Предпросмотр в Google ────────────────────────────────────────────
   Блок показывает, как страница выглядит в выдаче, поэтому и оформлен как
   выдача, а не как элемент нашего сайта: белое поле, гарнитура Arial, синий
   заголовок #1a0dab, серое описание #4d5156, сверху значок сайта, имя домена
   и путь хлебными крошками. Прежний вариант был набран нашей гарнитурой в
   зелёной палитре и на выдачу не походил вовсе.
   !important здесь обязателен: site-palette.css перекрашивает эти же классы
   правилом body[data-sk-theme="anatomy"] :is(.audit-serp-preview__title) —
   специфичность выше нашей, и без пометки тема забирает цвет и шрифт назад. */
.audit-serp-preview{
  max-width:600px;
  padding:16px 18px;
  background:#fff!important;
  border:0;
  border-radius:var(--r1);
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
}
.audit-serp-preview *{font-family:inherit!important}
.audit-serp-preview__site{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.audit-serp-preview__favicon{
  position:relative;display:grid;place-items:center;width:26px;height:26px;flex:none;
  border:1px solid #dadce0;border-radius:50%;overflow:hidden;
  background:#f8f9fa;color:#5f6368!important;font-size:13px;font-weight:700;line-height:1;
}
/* Настоящий значок сайта ложится поверх буквы. Не загрузился — onerror
   убирает картинку, и снизу остаётся буква домена. */
.audit-serp-preview__favicon-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:4px;background:#fff;
}
.audit-serp-preview__brand{display:grid;gap:1px;min-width:0}
.audit-serp-preview__name{color:#202124!important;font-size:14px;line-height:1.3}
.audit-serp-preview__path{
  color:#4d5156!important;font-size:12px;line-height:1.3;overflow-wrap:anywhere;
}
.audit-serp-preview__title{
  margin-top:2px;color:#1a0dab!important;font-size:20px;line-height:1.3;
  font-weight:400;overflow-wrap:anywhere;
}
.audit-serp-preview__desc{
  margin-top:3px;color:#4d5156!important;font-size:14px;line-height:1.58;
}
