/* Страница «Реклама в Директе» — в стиле нынешнего кабинета Экосистемы.
   Перенесено из образца дизайнера docs/prototip/kabinet.css (шкурка «как сейчас», data-skin="old"):
   имена токенов те же, чтобы правки образца было легко переносить. Меню кабинета нет —
   страница работает отдельно; в кабинете меню даст сам кабинет. */
:root {
  --bg: #EEEAE2; --bg-img: linear-gradient(rgb(60 50 40 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(60 50 40 / 4%) 1px, transparent 1px);
  --surface: #F8F6F1; --field: #FCFBF8; --line: #E2DDD3; --line-strong: #CFC8BC;
  --text: #161412; --mute: #6B665E; --faint: #75706A; --accent: #B4472B; --radius: 18px;   /* mute ≥ 4,5 : 1 на фоне страницы, faint — на карточке */
  --lbl-font: "JetBrains Mono", monospace; --lbl-size: 12px; --lbl-case: uppercase; --lbl-ls: .22em;
  --h-font: "JetBrains Mono", monospace; --h-size: 13px; --h-w: 500; --h-case: uppercase; --h-ls: .2em; --h-color: var(--mute);
  --title-font: "Unbounded", sans-serif; --title-size: 26px; --title-w: 600;
  --num-font: "Unbounded", sans-serif; --num-w: 700; --num-size: 30px;
  --on: #141414; --on-text: #fff; --cta: #141414; --cta-hover: #000; --cta-text: #fff; --cta-font: "Unbounded", sans-serif; --cta-size: 15px; --cta-w: 600;
  --tag-bg: #E6E0D5; --tag-text: #3D3934; --chip: #E6E0D5; --take: #141414; --take-text: #fff; --drop: #B4472B;
  --advice: #2B5580; --advice-bg: #E3EBF3;
  --next-bg: #F8F6F1; --next-text: #161412; --next-mute: #6F6A62; --next-line: #E2DDD3;
  --side-bg: #171412; --side-text: #E9E4DC; --side-icon: #BDB6AC; --side-mute: #9E978E; --side-on: #2A2522;
}

* { box-sizing: border-box }
body { margin: 0;
  background: var(--bg); background-image: var(--bg-img); background-size: 5px 5px;
  font: 16px/1.5 "Onest", system-ui, sans-serif; color: var(--text) }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0 }
li { list-style: none }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
[hidden] { display: none !important }

/* ===== Каркас: меню кабинета слева, страница занимает остальное ===== */
/* Раскладка страницы — по её ширине (@container), а не окна: меню кабинета отнимает 260 px, а в кабинете Экосистемы оно может быть другим */
/* Границы — через «<» и «>=», а не 899/900: при масштабе браузера ширина бывает дробной (899,6 px), и в щель не попадает ни одно правило */
.app { display: grid; min-height: 100vh }
.page { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; overflow-x: clip }   /* clip, не hidden: печать-фон уходит за правый край без прокрутки вбок, а липкие ряд разделов и панель продолжают липнуть */
.top-bar { padding: 12px 16px; background: var(--side-bg); color: var(--side-text) }
.brand { display: flex; align-items: center; gap: 10px; font: 600 15px/1 "Unbounded", sans-serif; letter-spacing: .04em }
/* логотип — гусь в кепке (logo/gus.svg); белый край 1.2 px, чтобы чёрная кепка и худи не сливались с тёмным меню */
.brand .gus { flex: none; height: 38px; width: auto; margin: -8px 0;
  filter: drop-shadow(1.2px 0 0 #F8F6F1) drop-shadow(-1.2px 0 0 #F8F6F1) drop-shadow(0 1.2px 0 #F8F6F1) drop-shadow(0 -1.2px 0 #F8F6F1) }
.top-bar .brand .gus { height: 34px; margin: -10px 0 }   /* в шапке нет значка 24 px, как в образце: −10, чтобы шапка осталась 39 px */
.side { display: none; flex-direction: column; gap: 2px; background: var(--side-bg); color: var(--side-text); padding: 20px 10px; border-right: 1px solid var(--line) }
.side .brand { padding: 6px 14px 22px }
.side a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 42px; padding: 0 14px; font-size: 15px; border-radius: 10px }
.side .ic { color: var(--side-icon) }
.side .n { margin-left: auto; font: 500 12px "JetBrains Mono", monospace; color: var(--side-mute) }
.side .new { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--accent); color: #fff }
.side [aria-current] { background: var(--side-on) }
.side [aria-current]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #C9512C; border-radius: 10px 0 0 10px }
@media (min-width: 900px) {
  .app { grid-template-columns: 260px minmax(0, 1fr) }
  .side { display: flex }
  .top-bar { display: none }
}
/* шире 1400 не тянем: строки с фразой и числом на разных концах читаются хуже (образец) */
.main { flex: 1; width: 100%; max-width: 1400px; padding: 20px 16px 24px; display: grid; gap: 16px; align-content: start; min-width: 0 }
.result { display: grid; gap: inherit; min-width: 0 }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round }

/* ===== Общие элементы ===== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; min-width: 0 }
.card.stripe { border-left: 4px solid var(--accent) }
.lbl { display: block; font: 500 var(--lbl-size)/1.3 var(--lbl-font); text-transform: var(--lbl-case); letter-spacing: var(--lbl-ls); color: var(--mute) }
.h { font: var(--h-w) var(--h-size)/1.3 var(--h-font); text-transform: var(--h-case); letter-spacing: var(--h-ls); color: var(--h-color) }
/* последняя строка абзаца — не из одного слова; заголовки — строками поровну (вместе с неразрывными пробелами из stranica.js) */
.page { text-wrap: pretty }
.h { text-wrap: balance }
.h::before { content: "/ "; content: "/ " / "" }   /* «/» — оформление: на экране есть, читалка не произносит (аудит 29.10, п. 12) */
.hint { color: var(--mute); font-size: 14px; margin-top: 6px; max-width: 68ch }
.num { font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", monospace; font-size: .9em }
.big { font: var(--num-w) var(--num-size)/1.1 var(--num-font); letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.tag { display: inline-block; font: 500 11px "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); white-space: nowrap }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1.5px solid var(--line-strong); background: var(--surface); font-size: 15px; font-weight: 500; white-space: nowrap }
.btn:hover { border-color: var(--text) }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px;
  background: var(--cta); color: var(--cta-text); font: var(--cta-w) var(--cta-size)/1 var(--cta-font) }
.cta:hover { background: var(--cta-hover) }
.cta:disabled { background: var(--chip); color: var(--faint); cursor: not-allowed }
.cta .ic { width: 20px; height: 20px; stroke-width: 2 }
:focus-visible { outline: 2px solid #208085; outline-offset: 2px }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: 14px }

.pagehead .title { font: var(--title-w) var(--title-size)/1.15 var(--title-font); letter-spacing: -.01em }
.pagehead .title { font-size: min(var(--title-size), (100cqi - 32px) * .079) }   /* на 320 — 22,8 px: «Семантическое / ядро для рекламы» в две строки, «ядро» не остаётся одно; с ~360 — 26 px */
.pagehead p { color: var(--mute); margin-top: 8px; max-width: 62ch }
.pagehead .eyebrow { margin: 0 0 8px; max-width: none }   /* надзаголовок: откуда фразы (аудит текстов, Г5) */
/* «сколько ищут»: лупа, число, «/мес» (решения пользователя 30.10); .sr — текст только для читалки экрана */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.ic.lupa { width: 1em; height: 1em; margin-right: .25em; vertical-align: -.14em; color: var(--mute) }
.srch { white-space: nowrap }
.u { font: 400 .85em "Onest", sans-serif; letter-spacing: 0; color: var(--mute) }   /* «/мес» — мельче и тоньше числа (пользователь, 30.10) */

/* ===== Ввод ===== */
.form { display: grid; gap: 22px }
.form > * { max-width: 720px }   /* запрос — 1–3 слова в строке: поле во всю карточку — пустая простыня */
.field { display: grid; gap: 8px }
.seg2 { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--chip); justify-self: start }   /* как вкладки «Ядро | Слова спроса» */
.seg2 button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; font-size: 15px; cursor: pointer }
.seg2 button[aria-pressed="true"] { background: var(--surface); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / 12%) }
.seg2 button:disabled { color: var(--faint); cursor: not-allowed; display: inline-flex; align-items: center; gap: 6px }
.seg2 .ic { width: 16px; height: 16px }
textarea, select, .minus-in { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); padding: 12px 14px; font-size: 16px }
textarea { min-height: 120px; resize: vertical; line-height: 1.5 }
#masks::placeholder { color: color-mix(in srgb, var(--text) 40%, transparent) }   /* пример в пустом поле — полупрозрачным, не спутать с вписанным */
#masks:focus::placeholder { color: transparent }   /* поставили курсор — пример пропадает (решение пользователя 30.10) */
textarea:focus, select:focus, .minus-in:focus { border-color: var(--text); outline: none }
[aria-invalid="true"] { border-color: var(--drop) }
.field .row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline }
.count { font-size: 13px; color: var(--faint); white-space: nowrap }   /* «2 из 10» не рвётся на телефоне */
.count.over { color: var(--drop); font-weight: 600 }
textarea[aria-invalid="true"] { border-color: var(--drop) }
.go { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center }
/* город — своё поле с поиском вместо <select> (замечание пользователя 30.10: системный список серый и открывается поверх поля):
   как остальные поля, высотой с кнопку рядом; список — как окошко слова в ядре */
.city { position: relative; width: 280px; max-width: 100% }
.city input { width: 100%; min-height: 52px; padding: 0 40px 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); font-size: 16px; text-overflow: ellipsis }
.city input:focus { border-color: var(--text); outline: none }
.city::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute);
  transform: rotate(45deg); pointer-events: none; transition: transform .15s }
.city:has([aria-expanded="true"])::after { margin-top: -2px; transform: rotate(-135deg) }
.city ul { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 2px 4px rgb(38 34 31 / 6%), 0 10px 28px rgb(38 34 31 / 14%) }
.city li { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 10px 0 32px; border-radius: 8px; font-size: 15px; cursor: pointer }
.city li.act { background: var(--chip) }
.city li[aria-selected="true"] { font-weight: 600 }
.city li[aria-selected="true"]::before { content: ""; position: absolute; left: 13px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) }
.city li.whole { margin-bottom: 7px }   /* «Вся Россия» — первой, отдельно от городов */
.city li.whole::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -4px; height: 1px; background: var(--line) }
.city li.none { padding-left: 10px; color: var(--mute); cursor: default }
.warn { color: var(--drop); font-size: 14px }
#startHint.warn { margin-top: 6px }

.exrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--mute) }
.exrow span { display: contents }
.exrow button { border: 1px solid var(--line-strong); background: var(--field); border-radius: 8px; padding: 3px 9px; font-size: 14px }
.exrow button:hover { border-color: var(--text) }
.exrow button[aria-pressed="true"] { background: var(--chip); border-color: var(--chip); color: var(--tag-text) }
.pre summary { cursor: pointer; color: var(--accent); font-size: 15px; font-weight: 500 }
.fine summary { display: flex; align-items: center; gap: 10px; list-style: none; color: var(--mute) }   /* стрелка — как у групп */
.fine summary::-webkit-details-marker { display: none }
.fine summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); flex: none; margin-right: 4px; transition: transform .15s }
.fine[open] summary::before { transform: rotate(45deg) }
.fine .tune { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px }   /* как «Настроить группы» */
.fine-grid { display: grid; gap: 16px; margin-top: 12px; align-items: start;   /* поля на одной высоте, когда пояснения разной длины */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) }   /* две колонки — по ширине самой панели (Б.16е); min() — телефон 320 */
.fine-grid .field { gap: 6px }
.numin { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 15px }
.numin input { width: 90px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--field); padding: 8px 10px; font-size: 16px }

/* ===== Сбор ===== */
.run { display: grid; gap: 18px }
.run .btn { justify-self: start }
.run .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap }
.steps-run { display: grid; gap: 12px }
.steps-run li { display: flex; gap: 12px; align-items: flex-start; color: var(--faint) }
.steps-run li.on { color: var(--text) }
.steps-run li.done { color: var(--mute) }
.dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; margin-top: 1px }
.on .dot { border-color: var(--accent); border-top-color: transparent; animation: spin .9s linear infinite }
.done .dot { border-color: var(--accent); background: var(--accent); color: #fff }
.done .dot .ic { width: 14px; height: 14px; stroke-width: 3 }
@keyframes spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .on .dot { animation: none; border-top-color: var(--accent) } }

/* ===== Результат ===== */
.masks { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center }
.masks .chips { display: flex; flex-wrap: wrap; gap: 6px }
.masks .chip { background: var(--chip); padding: 4px 10px; border-radius: 8px; font-size: 15px }
.masks .where { color: var(--mute); font-size: 14px; flex-grow: 1 }   /* растёт и прижимает кнопки вправо, пока они в одной строке с запросом */
/* «Настроить группы» — пороги после сбора (Б.16): кнопка рядом с «Пересобрать», панель под ними во всю ширину.
   Кнопки переносятся только вместе — своей строкой слева (тест 30.10, Т5: на 1280 разъезжались) */
.masks .mbtns { display: flex; flex-wrap: wrap; gap: 10px }
.masks .btn .ic { width: 18px; height: 18px }
.tunebtn[aria-expanded="true"] { background: var(--chip); border-color: var(--chip) }
.masks .tune { flex-basis: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px }
.tune .fine-grid { margin-top: 0 }
/* поля — под число в 3–4 знака; подпись поля нажимается — попасть пальцем легко */
.tune .numin input { width: 64px; min-height: 34px; padding: 4px 10px; border-radius: 8px; font-size: 15px; -moz-appearance: textfield }
.tune .numin input::-webkit-inner-spin-button, .tune .numin input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
#tuneDone { margin: 12px 0 0; font-size: 14px }
#tuneDone:empty { display: none }
.example { flex-basis: 100%; font-size: 13px; color: var(--drop); font-weight: 500 }

.next { background: var(--next-bg); color: var(--next-text); border-color: var(--next-line); display: grid; gap: 18px }
.next .h { color: var(--next-text) }
.next .lbl { color: var(--next-mute) }
.next .linkbtn { color: var(--next-text) }
/* карточка итога — чёрной заливкой, цветом меню кабинета (решение пользователя 30.10): текст 16 : 1, подписи 9,1 : 1 */
#next { --next-bg: #171412; --next-text: #F3EFE8; --next-mute: #BDB6AC; --next-line: #171412 }
.stats { display: flex; flex-wrap: wrap; gap: 14px 40px }
.stats div { display: grid; gap: 6px }
/* шаги «что дальше» — полосой под «Пойдёт в рекламу», без рамки (решение пользователя 29.10): компьютер — в строку,
   планшет — номер над подписью, телефон — списком */
.steps-row { padding: 0 4px; margin-top: -4px }   /* ближе к карточке над ней */
.steps-row ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 0; list-style: none; counter-reset: st }
.steps-row li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; counter-increment: st; font-size: 14px }
.steps-row li::before { content: counter(st); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); font-size: 12px; line-height: 1; color: var(--mute) }
.steps-row li.ok::before { content: "✓"; background: var(--text); border-color: var(--text); color: var(--surface) }
.steps-row li:not(:last-child)::after { content: ""; width: 36px; height: 1.5px; margin-left: 4px; background: var(--line-strong) }
.steps-row .steplink { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer }
.steps-row a, .steps-row .steplink { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent); text-underline-offset: 3px }
.steps-row :is(a, .steplink):hover { text-decoration-color: currentColor }

.cols { display: grid; gap: 16px; min-width: 0 }
.sec-head { display: grid; gap: 4px; margin-bottom: 16px }

/* под вопросом */
.reasons { display: grid; gap: 12px }
.reason { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; background: var(--field) }
.reason .rt { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap }
.reason .rt .num { color: var(--mute); font-size: 14px }
.reason h3 { font-size: 17px; font-weight: 600 }
.reason .why { color: var(--mute); font-size: 14px }
/* совет — плашкой своего цвета: не красный (это «в минус» и ошибка), не чёрный (это нажатое «Беру») */
.reason .advice { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px;
  background: var(--advice-bg); color: var(--advice); font-size: 13px; font-weight: 600; white-space: nowrap }
.reason .advice .ic { width: 15px; height: 15px }
/* совет на вводе — тем же синим, что совет в «под вопросом»: синий здесь всегда значит «совет», красный — ошибку */
.tipbox { display: flex; gap: 10px; align-items: flex-start; max-width: 68ch; padding: 12px 14px; border-radius: 12px; background: var(--advice-bg); font-size: 14px }
.tipbox[hidden] { display: none }
.tipbox > .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--advice) }
.tipbox p { margin: 0 }
.tipbox b { color: var(--advice) }
.tipbox .btn { margin-top: 10px; background: var(--field) }
.tipbox p + p { margin-top: 8px }
/* Пр.4: фразы, к которым перешли из «Вернули …», ненадолго подсвечены — подсветка появляется сразу и гаснет плавно */
[data-fz] { transition: background-color .8s ease-out }
li[data-fz] { border-radius: 6px }
[data-fz].svet { background-color: var(--advice-bg); transition: none }
[data-fz]:focus { outline: none }
/* отклик «Снизить порог до 5» — строкой на месте совета, не советом (тест 30.10, Т11) */
.tipbox.done { padding: 0; background: none; color: var(--text) }
.tipbox.done > .ic, .tipbox.done b { color: var(--text) }
.tipbox:focus { outline: none }
/* динамика спроса (Б.4, образец дизайнера c3f16a8): 12 столбиков — месяцы года; пики — цветом акцента, остальные — серым */
.dtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.dtabs[hidden] { display: none }
.dtabs button { border: 1px solid var(--line-strong); background: var(--field); border-radius: 8px; padding: 4px 10px; font-size: 14px; min-height: 32px }
.dtabs button[aria-pressed="true"] { background: var(--on); border-color: var(--on); color: var(--on-text) }
.dsay { margin: 12px 0 0; max-width: 68ch; font-size: 15px; line-height: 1.5 }
.dsay:empty { display: none }
.dchart, .dline { transition: opacity .15s }
.loading .dchart, .loading .dline { opacity: .5 }   /* пока грузится другая маска, прежний график бледный */
.dchart { margin-top: 40px; max-width: 640px }   /* сверху — место для подписи пика и подсказки */
.dchart:empty { display: none }
.dplot { position: relative; height: 170px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; border-bottom: 1px solid var(--line-strong) }
.davg { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-strong); pointer-events: none }
.dcol { height: 100%; display: flex; align-items: flex-end; justify-content: center; outline-offset: 2px; border-radius: 4px; cursor: default }
.dcol i { position: relative; display: block; font-style: normal; width: min(24px, calc(100% - 2px)); border-radius: 4px 4px 0 0; background: #8E887F }
.dcol.hi i { background: var(--accent) }
.dcol i b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 3px; font-size: 12px; font-weight: 500; color: var(--mute); white-space: nowrap }
.dtip { position: absolute; transform: translate(-50%, -100%); width: max-content; max-width: 100%; padding: 6px 10px; border-radius: 8px; background: var(--on); color: var(--on-text); font-size: 13px; pointer-events: none; z-index: 2 }   /* на телефоне шире графика — в две строки */
.dtip[hidden] { display: none }
.dx { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 6px; font-size: 12px; color: var(--mute); text-align: center }
.dx .now { color: var(--text); font-weight: 600 }
.dx .now::after { content: ""; display: block; width: 4px; height: 4px; margin: 2px auto 0; border-radius: 50%; background: var(--text) }
.dleg { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin: 10px 0 0; font-size: 13px; color: var(--mute) }
.dleg i { display: inline-block; width: 16px; height: 0; border-top: 1px solid var(--line-strong); margin-right: 6px; vertical-align: middle }
.dleg span { display: inline-flex; align-items: center }
.dleg i.hi { width: 10px; height: 10px; border: 0; border-radius: 3px; background: var(--accent) }
.dtable { margin-top: 8px; border-collapse: collapse; font-size: 14px }
.dtable th { text-align: left; font-weight: 500; color: var(--mute); padding: 4px 16px 4px 0 }
.dtable td { padding: 3px 16px 3px 0; border-top: 1px solid var(--line) }
.dline { max-width: 640px; margin-top: 10px }
.dlplot { position: relative; height: 140px; border-bottom: 1px solid var(--line-strong) }
.dlplot svg { width: 100%; height: 100%; display: block; overflow: visible }
.dlplot polyline { fill: none; stroke: var(--text); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round }
.dlcross { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-strong); pointer-events: none }
.dlcross[hidden] { display: none }
.dlcross i { position: absolute; left: -5px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--surface) }
.dlcross b { position: absolute; top: -4px; left: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--surface); padding: 0 4px }
.dlcross.right b { left: auto; right: 8px }
.dlx { position: relative; height: 18px; margin-top: 4px; font-size: 12px; color: var(--mute) }
.dlx span { position: absolute; transform: translateX(-50%) }
.dlx span:first-child { transform: none }
.masks .tipbox { flex-basis: 100%; max-width: none }
.reason .all { display: flex; gap: 8px; flex-wrap: wrap }
.reason .all .btn { min-height: 38px; padding: 0 14px; font-size: 14px }
.reason .all > span { align-self: center; margin-right: auto }   /* совет слева, кнопки справа */
.reason.done { gap: 6px }
.dobor { margin-top: 14px }
.dobor .hint { margin-top: 0 }
.dobor .go2 { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap }
.dobor .btn { min-width: 196px }   /* с крутилкой ширина не прыгает */
.dobor .btn:disabled { color: var(--mute); cursor: progress }
.dobor .dot { width: 16px; height: 16px; margin-top: 0 }
.reason .sum { font-size: 14px; color: var(--mute) }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line) }
.prow .q { flex: 1; min-width: 0 }
.prow .q small { display: block; color: var(--faint); font-size: 13px }
.prow .q small.autoline { color: var(--mute); font-weight: 600 }
.prow .q small.warnline { color: var(--drop); font-weight: 600 }
.grp li small.warnline { display: block; margin-top: 2px; color: var(--drop); font-size: 13px; font-weight: 600; line-height: 1.35 }   /* взята «Беру» вопреки минус-слову (Пр.7) */
.yn { display: inline-flex; gap: 4px; flex: none }   /* две мягкие кнопки без общей рамки */
.yn button { border: 0; border-radius: 9px; background: var(--chip); color: var(--text); min-height: 34px; padding: 0 11px; font-size: 14px }
.yn button:hover { background: var(--line-strong) }
.yn [data-v="беру"][aria-pressed="true"] { background: var(--take); color: var(--take-text) }
.yn [data-v="нет"][aria-pressed="true"] { background: var(--drop); color: #fff }
.yn button.auto[aria-pressed="true"] { background: transparent; color: var(--drop); box-shadow: inset 0 0 0 2px var(--drop) }

/* группы */
.groups { display: grid }
.grp { border-top: 1px solid var(--line) }
.grp:last-child { border-bottom: 1px solid var(--line) }
.grp summary { display: flex; align-items: center; gap: 10px; padding: 12px 2px; cursor: pointer; list-style: none }
.grp summary::-webkit-details-marker { display: none }
.grp summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(-45deg); flex: none; margin-right: 4px; transition: transform .15s }
.grp[open] summary::before { transform: rotate(45deg) }
.grp .gname { font-weight: 500 }
.grp .gmeta { margin-left: auto; color: var(--mute); font-size: 14px; white-space: nowrap }
.grp ul { padding: 0 0 12px 22px; display: grid; gap: 4px }
.grp li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--mute) }
/* слово фразы группы — в минус на месте (аудит 29.10, п. 4; вид — из образца) */
.gw { border: 0; background: none; padding: 0 1px; margin: 0 -1px; font: inherit; color: inherit; border-radius: 3px; cursor: pointer;
  text-decoration: underline dotted transparent; text-underline-offset: 3px }
.grp li:hover .gw, .gw:focus-visible { text-decoration-color: var(--faint) }
.gw[aria-expanded="true"] { background: color-mix(in srgb, var(--drop) 14%, transparent); text-decoration-color: var(--drop) }
.grp li.gpop { position: relative; display: grid; gap: 6px; width: min(360px, 100%); margin: 6px 0 8px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fff; color: var(--text); font-size: 14px; box-shadow: 0 2px 4px rgb(38 34 31 / 6%), 0 10px 28px rgb(38 34 31 / 14%) }
.gpop::before { content: ""; position: absolute; top: -7px; left: var(--tx, 20px); width: 12px; height: 12px; background: #fff;
  border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); transform: rotate(45deg) }
.gpop p { margin: 0 }
.gpop .gps { color: var(--mute) }
.gpop .gpb { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.gpop .gmin { color: var(--drop); border-color: var(--drop) }
.gpop .btn { min-height: 36px; padding: 0 12px; font-size: 14px }
.grp li.ubrli { display: block }
.ubr { margin: 0 0 6px }
.more { margin-top: 14px }
.more summary { cursor: pointer; color: var(--mute); font-size: 14px }
.more ul { margin-top: 8px; display: grid; gap: 4px }
.more li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px }
.more small.by { color: var(--faint); font-size: 13px }

/* минус-слова */
.mchips { display: flex; flex-wrap: wrap; gap: 6px }
.mchip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip); border-radius: 8px; padding: 4px 6px 4px 10px; font-size: 15px }
.mchip.auto { padding-right: 10px }
/* свои и из решений «В минус» — первыми, своей подписью (аудит 29.10, п. 7) */
.msub { color: var(--mute); font-size: 13px; margin-bottom: 6px }
.msub.avto { margin-top: 12px }
.mchip.mine { background: var(--field); box-shadow: inset 0 0 0 1.5px var(--line-strong) }
.mchip button { border: 0; background: none; padding: 2px; display: grid; color: var(--mute); border-radius: 4px }
.mchip button:hover { color: var(--text); background: rgb(0 0 0 / 6%) }
.mchip .ic { width: 14px; height: 14px; stroke-width: 2.5 }
/* минус-фразы одного вопроса — строкой с раскрытием, как группы: свёрнутые не стена, начало списка видно */
.mgroups { margin-top: 14px }
.mgroups:empty { display: none }
/* название и счёт — одним абзацем (решение пользователя 30.10): перенос идёт по тексту, вторая строка — от начала названия, счёт не падает под стрелку */
.mgrp summary { padding: 10px 2px; min-width: 0; align-items: flex-start }
.mgrp summary::before { margin-top: 8px }   /* стрелка — по первой строке */
.mgrp .mt { flex: 0 1 auto; min-width: 0; line-height: 23px }
.mgrp summary b { font-weight: 500 }
.mgrp .mn { color: var(--mute); white-space: nowrap }
.mgrp .mprev, .plist .mprev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: 14px }
.mgrp .mprev { line-height: 23px }
.mgrp[open] .mprev, .plist[open] .mprev { visibility: hidden }
.mgrp .hint { margin: 0 0 10px 22px }
.mgrp .mchips { padding: 0 0 12px 22px }
/* фразы карточки «под вопросом» — свёрнуты, кроме первой карточки; объяснение, совет и кнопки на виду всегда */
.reason { min-width: 0 }   /* серое начало в одну строку не должно раздувать карточку */
.plist { min-width: 0 }
.plist:last-child { border-bottom: 0 }
.plist summary { padding: 10px 2px; min-width: 0 }
.plist .pn { font-weight: 500; white-space: nowrap }
.plist .pwarn { margin-left: -4px; color: var(--drop); white-space: nowrap }
/* решённое слово — одной строкой сверху: его фразы ушли вместе с ним (аудит 29.10, п. 1) */
.fold { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 9px 2px; border-top: 1px solid var(--line); color: var(--mute); font-size: 14px }
.fold .ic { width: 16px; height: 16px; color: var(--mute); align-self: flex-start; margin-top: 2px }
.fold > span { flex: 1; min-width: 0 }   /* на телефоне текст переносится рядом со значком, «Изменить» — следом */
.fold .linkbtn { margin-left: 4px }
.foldin { padding-left: 24px }   /* раскрытые «Изменить» фразы — сразу под строкой своего слова, с отступом */
/* хвост групп — строкой того же вида, что группа, но действием */
.gmore { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--accent); font: inherit; font-weight: 500; text-align: left; cursor: pointer }
.gmore::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); flex: none; margin-right: 4px }
.gmore .gmeta { margin-left: auto; color: var(--mute); font-size: 14px; font-weight: 400; white-space: nowrap }
.gmore:last-child { border-bottom: 1px solid var(--line) }
.gless::before { transform: rotate(-135deg) translate(-2px, -2px) }
/* навигация по разделам — полоса сверху, прилипает; раздел встаёт под неё (её высота — 52 px) */
/* раздел встаёт под полосу, фокус с клавиатуры не прячется ни под неё, ни под нижнюю панель (аудит 29.10, п. 12) */
html { scroll-padding-top: calc(var(--nav-h, 52px) + 16px); scroll-padding-bottom: calc(var(--dock-h, 0px) + 12px) }
[data-sec] { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; white-space: nowrap }
.nb { font-size: 13px; color: var(--mute) }
.nb.wait { color: var(--drop); font-weight: 600 }
.gwtabs .nb:not(.wait) { color: var(--tag-text) }   /* на --chip: --mute — 4,34 : 1, --tag-text — 8,7 (тест 30.10, Т10) */
/* «Ядро» и «Слова спроса» — вкладки одной карточки, пока колонки сбоку нет (уже 900 px) */
.gwtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: -6px; border-radius: 14px; background: var(--chip) }
.gwtabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; font-size: 15px; cursor: pointer }
.gwtabs button[aria-selected="true"] { background: var(--surface); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / 12%) }
@container (width < 900px) { .cols[data-gw="g"] > #s-w, .cols[data-gw="w"] > #s-g { display: none } }
.nb.ok .ic { width: 14px; height: 14px; stroke-width: 2.5 }
.secnav { position: sticky; top: 0; z-index: 6; min-width: 0;   /* не шире страницы: листается ряд внутри */
  margin: -8px 0 -4px; background: var(--bg); background-image: var(--bg-img); background-size: 5px 5px; border-bottom: 1px solid transparent }
/* листается и гаснет у края ряд, а не сама полоса: маска на полосе гасила и её фон — сквозь края просвечивал текст (тест 30.10, Т2) */
.secnav-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 0 }
.secnav-row::-webkit-scrollbar { display: none }
.secnav:not(.stuck) { background: none }   /* фон нужен, только когда ряд прилип к верху; на месте он закрыл бы печать в шапке */
.secnav.stuck { border-bottom-color: var(--line-strong) }
.secnav a { flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px }
.secnav a:hover { background: var(--chip) }
.secnav a[aria-current] { background: var(--on); color: var(--on-text) }
.secnav a[aria-current] .nb { color: inherit; opacity: .8 }
.secnav a[aria-current] .nb.wait { color: #FFB4A3; opacity: 1 }
/* фокус на пункте полосы не прокручивает страницу: полоса сама в зоне scroll-padding-top — без этого Tab уводил страницу вверх на ~300 px */
.secnav a { scroll-margin-top: calc(-1 * var(--nav-h, 52px) - 16px) }
/* исчезающая полоса (тест 30.10, В2): класс .hid ставит прокрутка вниз в окне ниже 900 px; наведение и фокус возвращают её */
.secnav { transition: transform .2s ease-out }
.secnav.hid:not(:focus-within) { transform: translateY(calc(-100% - 1px)) }
/* мышью: полоса 16 px у верхнего края — навели, полоса выехала и держится, пока над ней мышь.
   Только где есть наведение: на телефоне :hover залипает после нажатия, и полоса бы не пряталась */
@media (hover: hover) {
  .secnav.hid:hover { transform: none }
  .secnav.hid:not(:hover)::after { content: ""; position: absolute; inset: 100% 0 auto; height: 16px }
}
@media (prefers-reduced-motion: reduce) { .secnav { transition: none } }
.vernuli:not(:empty) { margin-top: 10px }
.vernuli .hint { margin-top: 4px }
.vernuli b { color: var(--text); font-weight: 600 }
.mtools { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap }

/* что убрали сами — «корзина» (аудит 29.10, п. 2): без фона, пунктир, всё серое; строка на причину */
.card.gone { background: transparent; border: 1.5px dashed var(--line-strong) }
.gone .h, .gone .mgrp summary b { color: var(--mute) }
.gone .mchip { color: var(--text) }   /* --mute на --chip — 4,34 : 1 (приёмка аудита 29.10) */
.gone .grp:last-child { border-bottom: 0 }
.gone .mprev { color: var(--mute) }   /* фон прозрачный: --faint на странице — 4,09 : 1 */
.uin { padding: 0 0 12px 22px }
.uin > .hint { margin: 0 0 10px }
.uwords { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; color: var(--mute); font-size: 14px }
.gone .ufr { display: block; padding: 0; columns: 2 260px; column-gap: 24px; font-size: 13px; color: var(--mute) }
.gone .ufr:focus { outline: 0 }
.gone .ufr li { display: block; break-inside: avoid; padding: 2px 0; font-size: 13px; color: var(--mute) }
.gone .ufr b { color: var(--mute); font-weight: 600 }
.uin > .linkbtn { margin-top: 6px }
/* «не по теме» — не мусор, там можно «Беру»: строкой в конце, название — цветом совета */
.gone .offrow summary b { color: var(--advice) }
/* одним абзацем, как все строки .mgrp; свои отличия: занимает всю строку, счёт с подписью переносится по словам */
.offrow .mt { flex: 1 }
.offrow .mn { white-space: normal }
/* «Не по теме»: запрос · показы · «Беру»; куда попал взятый — строкой под запросом */
.gone #offList { gap: 0 }
.gone #offList li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "q n b" "s s ."; align-items: center; gap: 0 12px;
  padding: 6px 0; border-top: 1px solid var(--line); color: var(--mute); font-size: 15px }
.gone #offList li .q { grid-area: q; overflow-wrap: anywhere }
.gone #offList li.on .q { color: var(--text) }
.gone #offList .num { grid-area: n; color: var(--mute) }
.gone #offList li small { grid-area: s; color: var(--mute); font-size: 13px }
.gone #offList li small.warnline { color: var(--drop); font-weight: 600 }
.gone #offList .yn { grid-area: b }

/* слова спроса */
.words .minus-in { margin: 12px 0 8px; font-size: 15px; padding: 10px 12px }
.wlist { display: grid }
.wlist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 0 }
/* слово спроса — кнопка: галочка (как у групп) · слово · фраз · показов; раскрытое — блок с фразами по местам (Б.1и) */
.wrow { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px }
.wopen { border: 0; background: none; padding: 0; min-height: 30px; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 6px }
.wopen::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  box-sizing: border-box; transform: rotate(-45deg); transition: transform .15s }
.wopen:hover::before { border-color: var(--text) }
.wopen[aria-expanded="true"]::before { transform: rotate(45deg) }
.wopen[aria-expanded="true"] .w { font-weight: 600 }
.wlist li.wblock { display: block; margin: 0 0 8px 40px; padding: 2px 0 4px 12px; border-left: 2px solid var(--line) }
.wsum { display: block; color: var(--mute); font-size: 13px }
.wplace { margin-top: 8px }
.wpt { font-size: 13px; color: var(--faint) }
.wlist .wblock li { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; font-size: 14px; color: var(--mute); line-height: 1.35 }
.wblock li > span:first-child { min-width: 0; overflow-wrap: anywhere }
.wblock b { color: var(--text); font-weight: 600 }
.wblock .linkbtn { font-size: 13px; margin-top: 2px }
.words .ubrali { margin: 0 0 8px }
.words .ubrali:empty { margin: 0 }
.ubrali b { color: var(--text); font-weight: 600 }
.wlist .w { min-width: 0; overflow-wrap: anywhere; line-height: 1.25 }
.wlist .num { color: var(--mute); font-size: 12px; white-space: nowrap }
.wlist .head { font-size: 12px; color: var(--faint) }
.wlist .none { display: block; color: var(--mute); font-size: 14px; padding: 8px 0 }
.wbtn { width: 30px; height: 30px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--field); font-size: 18px; line-height: 1; color: var(--mute) }
.wbtn:hover { border-color: var(--drop); color: var(--drop) }
#allWords { margin-top: 8px; font-size: 14px }

/* нижняя панель со скачиванием — во всю ширину окна */
.dock-wrap { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgb(38 34 31 / 8%) }
.dock { max-width: 1400px; padding: 12px 16px 16px; display: grid; gap: 8px }
.dock .cta { width: 100% }
.dock .what { font-size: 14px; color: var(--mute) }
.dock .what b { color: var(--text); font-weight: 600; white-space: nowrap }   /* число с подписью не рвётся: «108 минус-» / «слов» */
.dock .warn { font-size: 13px }
.dockbtns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.dpend { display: none; padding: 0; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--drop); text-align: left; cursor: pointer }
.dpend.ok { color: var(--mute); font-weight: 500; cursor: default }

/* ===== Под замочком (функции в планах) ===== */
.soon { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px dashed var(--line-strong); border-radius: 12px; color: var(--mute); font-size: 14px; line-height: 1.45 }
.soon > .ic { width: 18px; height: 18px; color: var(--faint); margin-top: 1px }
.soon b { color: var(--text); font-weight: 600 }
.soon .tag, .lockbtn .tag, .soon-link .tag { margin-left: 6px }
.soon-list { display: grid; gap: 8px }
/* шапка столбцов над группами (решение «А2», 30.10): как у «Слов спроса»; правый край — как у .gmeta строки (отступ summary 2 px) */
.ghead { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; padding: 0 2px; font-size: 12px; color: var(--faint); white-space: nowrap }
.phlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 16px }
.phlinks .soon-link, .phlinks .tag { color: var(--mute) }   /* 4,5 : 1 на фоне страницы, было 4,09 (аудит 29.10, п. 13) */
.soon-link { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--faint); cursor: default }
.soon-link .ic { width: 16px; height: 16px }
.vyhod { min-height: 44px; margin-left: auto; padding: 0 2px; border: 0; background: none; font-size: 14px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px }
.vyhod:hover { color: var(--text) }

/* ===== Страница входа ===== */
.vhod { display: grid; justify-items: center; align-content: center; gap: 24px; min-height: 100vh; padding: 24px 16px }
.vhod-forma { display: grid; gap: 18px; width: min(100%, 420px); padding: 24px }
.vhod-forma .pagehead { container-type: inline-size; padding: 0 }
.vhod-forma .title { font-size: 20px }
.vhod-forma input { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); padding: 10px 14px; font-size: 16px }
.vhod-forma input:focus { border-color: var(--text); outline: none }
.vhod-forma .cta { width: 100% }
.vhod-oshibka { color: var(--drop); font-size: 14px }
.lockbtn { color: var(--faint); border-style: dashed; cursor: not-allowed; font-weight: 400 }
.lockbtn:hover { border-color: var(--line-strong) }
.lockbtn .ic { width: 16px; height: 16px }

/* ===== Подсказки ===== */
.qbtn { display: inline-grid; width: 22px; height: 22px; margin-left: 8px; padding: 0; vertical-align: 2px; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: transparent; color: var(--mute); font: 600 12px/1 "Onest", sans-serif; text-transform: none; letter-spacing: 0 }
.qbtn:hover { color: var(--text); border-color: var(--text) }
.qbtn[aria-expanded="true"] { background: var(--text); border-color: var(--text); color: var(--surface) }
.next .qbtn { border-color: var(--next-mute); color: var(--next-mute) }
.hint.tip:not(.show) { display: none }
.pend { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 99px; vertical-align: 3px;
  box-shadow: inset 0 0 0 1.5px var(--drop); color: var(--drop); font: 600 12px/1.4 "Onest", sans-serif; text-transform: none; letter-spacing: 0 }
/* «осталось N» — красным, как строка «… ещё не решены — в рекламу не попадут» внизу; «всё решено» — спокойной меткой */
.pend.ok { background: var(--tag-bg); color: var(--tag-text); box-shadow: none }

/* ===== Компьютер ===== */
@container (width >= 900px) {
  .main { padding: 32px 40px 32px; gap: 20px }
  .card { padding: 24px 28px }
  .cols { grid-template-columns: minmax(0, 1fr) 300px; align-items: start }
  .gwtabs { display: none }   /* слова — колонкой сбоку */
  .flat > * { grid-column: 1 }
  .flat > .words { grid-column: 2; grid-row: 1 / span 5 }
  /* колонка не выше экрана над нижней панелью: длинный список прокручивается внутри, «Показать все» всегда видно */
  .words { padding: 22px 20px; position: sticky; top: 72px; max-height: calc(100vh - 192px); display: flex; flex-direction: column }   /* ниже полосы разделов */
  .words .wlist { overflow-y: auto; min-height: 0; padding-left: 4px; margin-left: -4px;   /* поле — под кольцо фокуса у «−» */
    scrollbar-gutter: stable; padding-right: 10px; margin-right: -10px }   /* справа — под полосу прокрутки: не ложится на числа и не сдвигает их */
  .words #allWords { align-self: start }
  .dock { padding: 14px 40px; grid-template-columns: 1fr auto; align-items: center }
  .dock .cta { width: auto }
  .stats { gap: 14px 56px }
  .next { row-gap: 12px; padding: 16px 24px }   /* низкая: заголовок и три числа, шаги — полосой под ней */
  .next .stats { flex-wrap: nowrap; column-gap: 40px }   /* три цифры — всегда в ряд */
}

/* ===== Планшет ===== */
@container (600px < width < 900px) {
  /* нижняя панель — в строку, как на компьютере: слева числа и «не решены», справа кнопка (тест 30.10, В2: 130 → 81 px) */
  .dock { grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-self: start; gap: 4px 16px }
  .dock .cta { width: auto }
  /* шаги — три колонки: номер над подписью, линия между номерами */
  .steps-row ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0 8px }
  .steps-row li { flex-direction: column; gap: 6px; text-align: center; font-size: 13px; line-height: 1.35 }
  .steps-row li:not(:last-child)::after { position: absolute; top: 11px; left: calc(50% + 17px); width: calc(100% - 26px); margin: 0 }
  .steps-row .steplink { text-align: center }
}

/* ===== Телефон: одиночные кнопки во всю ширину, кнопки причины поровну, итог — три колонки ===== */
@container (width <= 600px) {
  /* совет — своей строкой; кнопки делят строку, а длинные («Остальные в минус · 5») переносятся каждая на свою */
  .reason .all > span { margin-right: 100% }
  .reason .all > span:empty { display: none }
  .reason .all .btn { flex: 1 1 auto; padding: 0 8px }
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
  .stats .big { font-size: calc(var(--num-size) * .8); order: -1 }   /* число над подписью: подписи разной длины не сдвигают числа */
  .stats > div { align-content: start; gap: 4px }
  .stats .lbl { letter-spacing: .12em; white-space: nowrap }   /* «Минус-слов» в одну строку в колонке в треть ширины */
  .masks .mbtns { flex: 1 1 100%; order: 1 }   /* своей строкой, кнопки во всю ширину */
  .masks .mbtns .btn { flex: 1 1 100% }
  .masks .tune { order: 2 }   /* панель — под кнопками */
  .go .city, .go .cta { flex: 1 1 100% }
  .go .city { width: auto }   /* 280 px распирали карточку на 320 — поле во всю ширину и так */
  .city li { min-height: 44px }
  .mtools .btn { flex: 1 1 100% }
  .mgrp summary, .plist summary, .gmore { flex-wrap: wrap; row-gap: 2px }   /* начало списка — второй строкой, по названию */
  .mgrp .mt { flex: 1 1 0 }   /* иначе строка целиком уходит под стрелку */
  .mgrp .mprev, .plist .mprev { flex-basis: 100%; padding-left: 22px }
  .mgrp[open] .mprev, .plist[open] .mprev { display: none }
  .gmore { min-height: 44px }
  .gmore .gmeta { margin-left: 22px; flex-basis: 100% }
  .mgrp .hint, .mgrp .mchips, .uin, .gone #offList { margin-left: 0; padding-left: 0 }
  .dobor .go2 { display: grid }
  .gone #offList li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q b" "n b" "s b" }   /* кнопка справа, показы под запросом */
  .gone #offList .num { font-size: 13px; text-align: left }
  .gw { text-decoration-color: var(--faint) }   /* наведения нет — подчёркивание видно всегда */
  .gpop .btn { min-height: 44px }   /* кнопка во всю ширину, подпись строкой ниже */
  .dock .btn#dl { display: none }   /* на телефоне панель низкая: с файлом для Директа в ней только он, таблица — в шаге 3 */
  .dockbtns .cta { flex: 1 1 100% }
  /* одна строка ≈ 64 px: слева «N не решено ›», справа кнопка не во всю ширину; ошибка сервера — строкой над ними (аудит 29.10, п. 8) */
  .dock { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 10px 16px }
  .dock > div:first-child { display: contents }
  .dock .what, .dock .warn:not(.oshibka) { display: none }
  .dock .oshibka { grid-column: 1 / -1; margin-bottom: 4px }
  .dock .dpend { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; white-space: normal }
  .dock .cta { width: auto; min-height: 44px; padding: 0 16px }
  .dockbtns { flex-wrap: nowrap }
  .dockbtns .cta { flex: none }
}
/* узкий телефон: «Беру / В минус» — под фразой, фразе — вся ширина (тест 30.10, Т6: оставалось 90–130 px).
   Не скомканно (замечание пользователя 30.10): фраза и число — парой, пояснение — чуть отдельно, кнопки — с воздухом, строки — реже */
@container (width <= 400px) {
  .prow { flex-wrap: wrap; row-gap: 12px; padding: 14px 0 }
  .prow .q { flex-basis: 100%; line-height: 1.35 }
  .prow .q small { margin-top: 6px; line-height: 1.4 }
  .prow .q small.num { margin-top: 2px; font-size: 13px }
}

@container (width <= 360px) {
  .dock .cta .ic { display: none }   /* 320: со значком кнопка закрывала «N не решено» */
}

/* ===== Телефон: всё нажимаемое — не ниже 44 px ===== */
/* Кнопки решений растут сами; мелкие кнопки и ссылки — невидимой зоной нажатия, раскладка не меняется */
@container (width <= 600px) {
  .reason .all .btn, .seg2 button, .numin input { min-height: 44px }
  .tune .numin input { min-height: 36px }   /* ярлык-обёртка даёт 44 для пальца */
  /* шаги — списком сверху вниз, жмётся вся строка */
  .steps-row ol { flex-direction: column; align-items: stretch; gap: 0 }
  .steps-row li { min-height: 44px }   /* пальцем */
  .steps-row li:not(:last-child)::after { display: none }
  .steps-row :is(a, .steplink)::after { content: ""; position: absolute; inset: 0 }
  .secnav a { min-height: 44px }   /* полоса — 60 px */
  /* затухание у края, пока есть что листать (аудит 29.10, п. 10) */
  .secnav-row.fr { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent) }
  .secnav-row.fl { mask-image: linear-gradient(90deg, transparent, #000 40px) }
  .secnav-row.fl.fr { mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent) }
  .sec-head .pend, .row .pend { display: block; width: fit-content; margin: 8px 0 0 }   /* «осталось N» — своей строкой, «?» — за текстом (Пр.5) */
  .grp > summary { flex-wrap: wrap; row-gap: 2px }   /* «кухни от производителя» + счёт не помещаются в 320 — счёт уходит строкой ниже, вправо */
  .dtabs { row-gap: 12px }   /* зоны нажатия соседних рядов не наползают */
  .grp ul { gap: 12px }   /* слова фраз ядра: зона по высоте — до соседней фразы, не заходит на неё (тест 30.10, Т9) */
  .gw { position: relative }
  .gw::after { content: ""; position: absolute; inset: -6px 0 }
  .dtabs button { position: relative }
  .dtabs button::after { content: ""; position: absolute; inset: -6px 0 }   /* вид 32, зона 44 (тест 30.10, Т8) */
  .qbtn { position: relative }
  .qbtn::after { content: ""; position: absolute; inset: -11px }   /* зона 44 px, видимый размер 22 (аудит 29.10, п. 11) */
  .yn button { min-height: 38px; position: relative }
  .yn button::after { content: ""; position: absolute; inset: -3px 0 }   /* вид 38, зона нажатия 44 */
  .exrow { gap: 8px }
  .exrow button { min-height: 36px }
  .wlist li { grid-template-columns: 32px minmax(0, 1fr); padding: 0 }
  .wopen { min-height: 44px }   /* строка слова — 44 px, кнопка-слово на всю высоту */
  .wlist li.wblock { margin-left: 42px }
  .wbtn { width: 32px; height: 32px }
  .linkbtn, .wbtn, .exrow button, .pre summary, .more summary { position: relative }
  .linkbtn::after, .pre summary::after, .more summary::after { content: ""; position: absolute; inset: -12px 0 }
  .wbtn::after { content: ""; position: absolute; inset: -6px }
  .mchips { gap: 8px }
  .mchip { min-height: 40px }
  .mchip button { position: relative }
  .mchip button::after { content: ""; position: absolute; inset: -13px -10px }   /* крестик: зона не меньше 44 px */
  .exrow button::after { content: ""; position: absolute; inset: -4px 0 }
  .foldin { padding-left: 12px }
}

/* ===== Печать «Ручная проверка» в шапке (решения пользователя 30.10: штамп, «Последнее слово за вами», только на результате) =====
   Проверка идёт по всему результату — поэтому шапка, а не один раздел. На вводе и сборе печати нет (hidden), раскладка шапки — обычная.
   Появилась — «поставили»: пристук после короткой паузы, чтобы глаз успел увидеть результат. Мышь и пальцы проходят насквозь */
.pagehead { position: relative }
.stamp { position: absolute; right: 0; pointer-events: none; color: var(--drop); transform: rotate(-6deg); mix-blend-mode: multiply; z-index: 1;
  animation: stamp-press .32s cubic-bezier(.2, .9, .3, 1.15) .25s both }   /* из hidden в видимую — анимация запускается сама, при каждом показе результата */
.stamp svg { display: block; width: 100%; height: auto; overflow: visible }
.stamp .sb { font-family: "Onest", sans-serif; font-weight: 800 }
.stamp .sm { font-family: "JetBrains Mono", monospace; font-weight: 700 }   /* не «.sr»: так зовётся скрытый для глаз текст */
@keyframes stamp-press { from { transform: rotate(-6deg) scale(1.6); opacity: 0 } 55% { opacity: 1 } to { transform: rotate(-6deg) scale(1) } }
@keyframes stamp-press-bg { from { transform: rotate(-8deg) scale(1.5); opacity: 0 } 55% { opacity: 1 } to { transform: rotate(-8deg) scale(1) } }   /* телефон и планшет — печать-фон */
@media (prefers-reduced-motion: reduce) { .stamp { animation: none } }
/* компьютер: справа свободно (пояснение не шире 62ch) — печать по центру свободного места: между текстом шапки и правым краем,
   по высоте — посередине между верхом страницы и первой карточкой (пользователь, 30.10) */
@container (width >= 900px) {
  .pagehead:has(> .stamp:not([hidden])) { display: grid; grid-template-columns: minmax(0, 62ch) minmax(190px, 1fr); grid-template-rows: auto auto auto 1fr; align-items: start }   /* узко (1040) — текст уступает место печати; печать выше текста — запас уходит под ссылки, а не между строками */
  .pagehead:has(> .stamp:not([hidden])) > :not(.stamp) { grid-column: 1 }
  /* от верха страницы (отступ 32) до первой карточки: под шапкой — ряд разделов, справа он пустой; 20 − 8 + 53 − 4 + 20 = 81 */
  .pagehead > .stamp { position: static; grid-column: 2; grid-row: 1 / -1; place-self: center; width: min(220px, 100% - 40px); margin: -32px 0 -81px }
}
/* уже 900 — часть фона (пользователь, 30.10): крупная и бледная, под текстом шапки, уходит за правый край экрана.
   Места не занимает — ряд разделов не прыгает, когда она появляется. Обрезает её край кадра (.frame — overflow: clip; на странице — .page) */
@container (width < 900px) {
  .pagehead > :not(.stamp) { position: relative; z-index: 1 }   /* текст — над печатью */
  .stamp { z-index: 0; width: 230px; right: -40px; bottom: -22px; transform: rotate(-8deg) }
  .stamp svg { opacity: .3 }   /* бледность — у рисунка, а не у .stamp: анимация появления ведёт непрозрачность .stamp от 0 до 1 */
  .stamp { animation-name: stamp-press-bg }
}

/* ===== Память решений (Б.5, решения пользователя 30.10): окошко перед сбором, если запрос с этим городом уже собирали =====
   <dialog> + showModal(): фокус заперт в окошке, Esc — «не собирать». Компьютер — по центру; телефон — снизу во всю ширину, кнопки столбиком */
.pamyat { box-sizing: border-box; width: min(460px, 100vw - 32px); padding: 24px 24px 20px; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgb(0 0 0 / 25%) }
.pamyat::backdrop { background: rgb(22 20 18 / 45%) }
.pamyat form { display: grid; gap: 12px }
.pamyat h2 { padding-right: 36px; font: var(--title-w) 20px/1.3 var(--title-font); letter-spacing: -.005em }
.pm-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--mute) }
.pm-x:hover { color: var(--text); background: var(--chip) }
.pm-x .ic { width: 20px; height: 20px }
.pm-meta { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--chip); font-size: 14px; color: var(--mute); list-style: none }
.pm-meta b { color: var(--text); font-weight: 600 }
.pamyat p { color: var(--mute); font-size: 15px; line-height: 1.5 }
.pm-btns { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 10px; margin-top: 4px }   /* главная — справа, в разметке и в порядке фокуса — первая */
.pamyat .pm-note { margin-top: -4px; font-size: 13px; color: var(--faint) }
@container (width < 600px) {
  .pamyat { width: 100cqi; max-width: none; margin: auto auto 0; border-radius: var(--radius) var(--radius) 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)) }
  .pm-btns { flex-direction: column }
  .pm-btns > * { width: 100% }
}