/*
  SEO-страницы: статьи тем и сценариев и их ленты (задача 1116, эпик 1102).

  🔴 ОДИН лист на все четыре вида страниц — требование владельца от
  19.09.2026: «если что-то решу в стиле поменять, чтобы это наследовалось на
  все». Поэтому здесь нет ни одного своего цвета и ни одного своего кегля:
  только токены оболочки (`--retro-*`, `--color-*`, `--text-*`, `--font-*`).
  Поменял токен — поменялись и эти страницы, и остальной продукт. Сторож —
  `seo_pages::tests::the_stylesheet_uses_only_shell_tokens`.

  Раскладка утверждена макетами (#1115, docs/specs/seo-mockups/).
*/

.seo-page { background: var(--retro-bg); min-height: 100dvh; }
.seo-wrap { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.seo-read { max-width: 680px; }

/* ── Раскладка документации (21.09.2026) ────────────────────────────────
   Три колонки: дерево раздела, статья, её оглавление. Боковых может не
   быть — у сценария нет раздела, у короткой статьи нет заголовков, — и
   тогда колонка просто не рисуется: `grid-template-areas` тут не нужен,
   порядок задаёт сама разметка.

   🔴 Ширины в `ch`, а не в пикселях: колонка считается по кеглю, и при
   смене шкалы `--text-*` раскладка едет вместе с текстом, а не отдельно. */
.seo-docs {
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr; gap: 0 40px; align-items: start;
}
@media (min-width: 1100px) {
  .seo-docs { grid-template-columns: 26ch minmax(0, 1fr) 24ch; }
  /* Порядок в разметке — статья, дерево, оглавление; на широком экране
     дерево встаёт первой колонкой. */
  .seo-aside { order: -1; }
  /* Боковые колонки стоят на месте, пока читатель идёт по статье, и
     прокручиваются внутри себя: в самом большом разделе 47 статей.

     🔴 Высота учитывает полосу согласия (`--consent-height`, `consent.html`):
     без этого замером 21.09 два нижних пункта дерева оказались под ней. */
  .seo-aside, .seo-toc {
    position: sticky; top: 96px; overflow-y: auto;
    max-height: calc(100dvh - 120px - var(--consent-height, 0px));
  }
  .seo-aside { padding-top: 96px; }
  .seo-toc { padding-top: 96px; }
  /* На широком экране оглавление в потоке не нужно — оно справа. */
  .seo-toc-inline { display: none; }
}
@media (max-width: 1099px) {
  /* Узкий экран: правой колонки нет, её список приезжает свёрнутым в потоке,
     а дерево стоит под статьёй — «другие статьи раздела». */
  .seo-toc { display: none; }
  .seo-aside { border-top: 2px solid var(--retro-border); margin-top: 32px; padding-top: 24px; }
}
.seo-main { min-width: 0; }

/* Дерево раздела */
.seo-tree { font-family: var(--font-ui); }
.seo-tree-title {
  font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--retro-muted); cursor: pointer; padding: 8px 0; list-style: none;
}
.seo-tree-title::-webkit-details-marker { display: none; }
.seo-tree-title a { color: var(--retro-text); text-decoration: none; }
.seo-tree-list { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--retro-border); }
.seo-tree-list li { margin: 0 0 2px; }
.seo-tree-list a {
  display: block; padding: 6px 8px; font-size: var(--text-sm); line-height: 1.4;
  color: var(--retro-muted); text-decoration: none; overflow-wrap: anywhere;
}
.seo-tree-list a:hover { color: var(--retro-text); background: var(--retro-surface); }
.seo-tree-list a[aria-current="page"] {
  color: var(--color-accent-text); background: var(--retro-surface); font-weight: 700;
}

/* Оглавление статьи */
.seo-toc { font-family: var(--font-ui); }
.seo-toc-title {
  font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--retro-muted); margin: 0 0 10px;
}
.seo-toc ul, .seo-toc-inline ul { list-style: none; margin: 0; padding: 0; }
.seo-toc li { margin: 0 0 8px; }
.seo-toc a, .seo-toc-inline a {
  font-size: var(--text-sm); line-height: 1.45; color: var(--retro-muted);
  text-decoration: none; overflow-wrap: anywhere;
}
.seo-toc a:hover, .seo-toc-inline a:hover { color: var(--color-accent-text); }
.seo-toc-inline {
  font-family: var(--font-ui); max-width: 680px; margin: 0 0 24px;
  border: 2px solid var(--retro-border); padding: 12px 16px;
}
.seo-toc-inline > summary {
  font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--retro-muted); cursor: pointer;
}
.seo-toc-inline li { margin: 8px 0 0; }

/* «Было полезно?» */
.seo-helpful {
  border-top: 2px solid var(--retro-border); margin: 40px 0 0; padding: 20px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
}
.seo-helpful-title, .seo-helpful-thanks {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--retro-muted); margin: 0;
}
.seo-helpful-form { display: flex; gap: 8px; }
.seo-helpful-btn {
  min-height: 44px; padding: 10px 20px; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--retro-text); background: var(--retro-surface);
  border: 2px solid var(--retro-border-dark);
}
.seo-helpful-btn:hover { border-color: var(--retro-text); }

.seo-crumbs {
  font-family: var(--font-ui); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--retro-muted); padding-top: 96px; margin: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.seo-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--retro-border); }
.seo-crumbs a:hover { color: var(--retro-text); }

.seo-kicker {
  font-family: var(--font-ui); font-size: var(--text-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent-text); margin: 0 0 12px;
}
.seo-h1 {
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(var(--text-4xl), 4vw, var(--text-6xl));
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--retro-text); margin: 0 0 18px;
}
.seo-lead {
  font-family: var(--font-sans); font-size: var(--text-lg);
  line-height: 1.75; color: var(--retro-muted); margin: 0 0 20px;
}
.seo-meta {
  font-family: var(--font-ui); font-size: var(--text-xs);
  color: var(--retro-muted); display: flex; gap: 16px; flex-wrap: wrap;
  padding-bottom: 32px; border-bottom: 2px solid var(--retro-border);
}
.seo-meta a { color: inherit; }

.seo-body { padding: 36px 0 8px; }
.seo-body h2 {
  font-family: var(--font-ui); font-size: var(--text-xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.005em;
  color: var(--retro-text); margin: 40px 0 14px;
}
.seo-body h3 {
  font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600;
  color: var(--retro-text); margin: 22px 0 8px;
}
.seo-body p, .seo-body li {
  font-family: var(--font-sans); font-size: var(--text-lg);
  line-height: 1.75; color: var(--kv-body);
}
.seo-body p { margin: 0 0 14px; }
.seo-body ul, .seo-body ol { padding-left: 22px; margin: 0 0 14px; }
.seo-body a { color: var(--color-accent-text); }
/* Ссылка-якорь заголовка: в продукте она проявляется при наведении
   (`markdown_css.html`), здесь — то же правило. Без него у каждого
   заголовка статьи торчала решётка. */
.seo-body .markdown-heading-anchor { opacity: 0; text-decoration: none; padding-left: 8px; }
.seo-body h2:hover .markdown-heading-anchor,
.seo-body h3:hover .markdown-heading-anchor,
.seo-body .markdown-heading-anchor:focus-visible { opacity: 1; }
.seo-body code { overflow-wrap: anywhere; font-size: var(--text-sm); }
.seo-body pre { overflow-x: auto; }
.seo-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 14px; }
.seo-body th, .seo-body td {
  text-align: left; border-bottom: 1px solid var(--retro-border); padding: 10px 8px;
  font-family: var(--font-sans); font-size: var(--text-md); color: var(--kv-body); vertical-align: top;
}
.seo-body th {
  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--retro-muted); font-weight: 400;
}

.seo-section-title {
  font-family: var(--font-ui); font-size: var(--text-xl); font-weight: 700;
  text-transform: uppercase; color: var(--retro-text); margin: 40px 0 14px;
}

/* Шаги плана */
.seo-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.seo-steps > li {
  counter-increment: step; position: relative;
  border: 2px solid var(--retro-border-dark); padding: 16px 20px 14px 64px; margin: 0 0 12px;
}
.seo-steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 18px; top: 16px;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-lg);
  color: var(--color-accent-text);
}
.seo-step-title { display: block; font-family: var(--font-ui); font-size: var(--text-md); color: var(--retro-text); margin-bottom: 4px; }
.seo-step-text { font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.7; color: var(--retro-muted); }

/* Кнопка действия */
.seo-offer {
  background: var(--retro-elevated); border: 2px solid var(--retro-text);
  padding: 24px; margin: 36px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center;
}
.seo-offer-title { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: 700; color: var(--retro-text); margin: 0 0 6px; }
.seo-offer-text { font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.6; color: var(--retro-muted); margin: 0; }
.seo-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  box-sizing: border-box; background: var(--color-accent); color: var(--color-on-accent);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 12px 18px; white-space: nowrap; border: 0; cursor: pointer;
}
.seo-btn-quiet {
  display: inline-block; font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--retro-text); text-decoration: none; border-bottom: 1px solid var(--retro-border-dark);
}

/* Внешние источники */
.seo-resources { list-style: none; padding: 0; margin: 0 0 14px; }
.seo-resources > li {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--retro-border); padding: 10px 0;
}
.seo-resource-link { font-family: var(--font-sans); font-size: var(--text-md); color: var(--retro-text); }
.seo-resource-note { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--retro-muted); display: block; }
.seo-tag {
  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--retro-border-dark); padding: 2px 6px; white-space: nowrap; color: var(--retro-muted);
}
.seo-tag-free { border-color: var(--color-accent); color: var(--color-accent-text); }

/* Задачи с проверкой ответа — форма как на экране практики
   (`practice_session.html` + `step_inputs.html`): вариант занимает всю строку
   и нажимается целиком, отметка — кружок, вердикт приходит цветной полосой.
   Скриптов здесь нет: ответ уходит GET-формой, сверяет сервер. */
.seo-task {
  border: 2px solid var(--retro-border-dark); background: var(--retro-surface);
  padding: 20px; margin: 0 0 12px; scroll-margin-top: 96px;
}
.seo-task[data-verdict="right"] { border-color: var(--kv-blue); }
.seo-task[data-verdict="wrong"] { border-color: var(--color-error); }
/* 🔴 Селектор из двух классов НЕ для красоты: задачи стоят внутри `.seo-body`,
   где `.seo-body p` задаёт цвет и отступ телу статьи. Правило из одного класса
   ему проигрывает по весу — замером 21.09 белая надпись вердикта вышла тёмной
   на синем (2.4:1). Вопрос и вердикт держатся тем же весом. */
.seo-task .seo-task-prompt {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--font-sans); font-size: var(--text-lg); line-height: 1.6;
  color: var(--kv-body); margin: 0 0 14px;
}
.seo-task-num {
  flex-shrink: 0; font-family: var(--font-ui); font-weight: 700;
  font-size: var(--text-lg); color: var(--color-accent-text);
}
.seo-task-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.seo-task-options { display: flex; flex-direction: column; gap: 8px; flex: 1 1 100%; margin: 0; }
.seo-task-option {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; box-sizing: border-box;
  padding: 14px; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.5;
  color: var(--kv-body); background: var(--retro-bg); border: 2px solid var(--retro-border);
}
.seo-task-option:hover { border-color: var(--retro-text); }
.seo-task-option:has(input:checked) { border-color: var(--color-accent); }
.seo-task-option:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Системный переключатель спрятан, а не выброшен: клавиатура и чтец работают
   по нему, рисует отметку кружок рядом — его размер и цвет настраиваются. */
.seo-task-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seo-task-tick {
  display: flex; width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px;
  align-items: center; justify-content: center;
  border: 2px solid var(--retro-border-dark); border-radius: 50%;
}
.seo-task-option:has(input:checked) .seo-task-tick { border-color: var(--color-accent); }
.seo-task-tick::after { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; }
.seo-task-option:has(input:checked) .seo-task-tick::after { background: var(--color-accent); }
.seo-task-option-text { min-width: 0; }
.seo-task-input {
  font-family: var(--font-ui); font-size: var(--text-md); padding: 12px; min-width: 0;
  flex: 1 1 220px; min-height: 44px; box-sizing: border-box;
  border: 2px solid var(--retro-border-dark); background: var(--retro-bg); color: var(--retro-text);
}
.seo-task-check { flex: 0 0 auto; min-width: 150px; }
/* Вердикт — заливка, как полоса отклика у практики: белым по цвету, а не
   цветной строкой на фоне страницы. Разбор ответа не печатается: задача
   решается повторной попыткой. */
.seo-task .seo-task-verdict {
  display: block; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700;
  line-height: 1.5; padding: 12px 14px; margin: 14px 0 0;
}
.seo-task .seo-task-verdict-right { background: var(--kv-blue); color: var(--color-on-accent); }
.seo-task .seo-task-verdict-wrong { background: var(--color-error-fill); color: var(--color-on-accent); }

/* «Ещё» под статьёй */
.seo-more { padding: 40px 0 72px; border-top: 2px solid var(--retro-border); margin-top: 32px; }
.seo-more-title {
  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--retro-muted); margin: 0 0 16px; font-weight: 400;
}
.seo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.seo-card {
  display: block; text-decoration: none; border: 2px solid var(--retro-border-dark);
  padding: 16px 18px; background: var(--retro-surface);
}
.seo-card:hover { border-color: var(--retro-text); }
.seo-card-kicker { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-text); }
.seo-card-title { display: block; font-family: var(--font-ui); font-size: var(--text-md); color: var(--retro-text); margin: 6px 0; line-height: 1.4; }
.seo-card-lead { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.6; color: var(--retro-muted); }

/* Ленты */
.seo-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding-bottom: 28px; border-bottom: 2px solid var(--retro-border); }
.seo-chip {
  font-family: var(--font-ui); font-size: var(--text-sm); text-decoration: none;
  color: var(--retro-text); border: 2px solid var(--retro-border-dark); padding: 6px 12px;
}
.seo-chip[aria-current] { background: var(--retro-text); color: var(--retro-bg); border-color: var(--retro-text); }
.seo-feed { list-style: none; padding: 0; margin: 0; }
.seo-feed > li { border-bottom: 1px solid var(--retro-border); padding: 22px 0; }
.seo-feed-kicker { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-text); }
.seo-feed-link {
  display: block; font-family: var(--font-ui); font-size: var(--text-xl); font-weight: 700;
  color: var(--retro-text); text-decoration: none; margin: 6px 0 8px; line-height: 1.3;
}
.seo-feed-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.seo-feed-lead { font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.7; color: var(--retro-muted); margin: 0; max-width: 680px; }
.seo-empty { font-family: var(--font-sans); font-size: var(--text-lg); color: var(--retro-muted); padding: 40px 0; }
.seo-pager {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-size: var(--text-sm); padding: 28px 0 72px;
}
.seo-pager a { color: var(--retro-text); text-decoration: none; border: 2px solid var(--retro-border-dark); padding: 8px 14px; }
.seo-pager-place { color: var(--retro-muted); }
.seo-pager-off { visibility: hidden; }

/* Текст раздела над списком его статей */
.seo-section-text { padding: 12px 0 8px; }
.seo-section-text h2:first-child { margin-top: 0; }

/* Снятая с индекса страница — предупреждение читателю */
.seo-notice {
  font-family: var(--font-sans); font-size: var(--text-md); color: var(--retro-muted);
  border: 2px solid var(--retro-border-dark); padding: 12px 16px; margin: 0 0 20px;
}

@media (max-width: 640px) {
  .seo-crumbs { padding-top: 84px; }
  .seo-offer { grid-template-columns: 1fr; }
  .seo-btn { text-align: center; }
  .seo-steps > li { padding-left: 52px; }
  .seo-steps > li::before { left: 14px; }
  .seo-pager { flex-wrap: wrap; }
  /* Узкий экран: поле и кнопка проверки — в свои строки во всю ширину,
     иначе кнопка ужимается до неудобной полоски рядом с полем. */
  .seo-task { padding: 16px; }
  .seo-task-input { flex: 1 1 100%; }
  .seo-task-check { flex: 1 1 100%; }
}