/* База знаний (/help) — вся собственная разметка страниц: шапка (гостевая переиспользуется как есть из header.html/footer.html, без второго состояния — см. ниже, у полосы поиска), сетка разделов, документ статьи, блоки «где/кому доступно», подсказки, оглавление, экран-обёртка. Классы экранов продукта (.app, .tbl, .bd, .wiz, .prod, .ph, .sit…) сюда НЕ входят — они целиком в help-screens.css (копия wave1/screens/_screens.css, не редактируется). Здесь — обёртка вокруг них (.hlp-ui-*). Все селекторы с префиксом hlp- — сознательно: landing.css и tsekh360.css уже занимают короткие имена вроде .nav, .hero, .crumbs, .steps, .badge, .chip, .toc, .lead, .app (общий сброс страницы это тихо не поймает, см. правило «занятые имена в дизайн-системе» в CLAUDE.md) — префикс исключает коллизию, а не полагается на порядок подключения файлов. Экраны продукта (_screens.css/_screens2.css) этим приёмом не защищены — их классы не редактируются и переименовать нельзя. Волна 2 столкнула .cc-btn (карточка клиента, help-screens2.css) с .cc-btn лендинга — это КНОПКА СОГЛАСИЯ НА COOKIE («Принять cookies», #cc .cc-btn.cc-yes в layout.html, есть на КАЖДОЙ странице сайта, не только /help). Обе декларации — голый класс, специфичность (0,1,0), выигрывает та, что подключена позже — help-screens2.css грузится после landing.css в каждом /help. Правки исходника нет и не может быть; исправление — ниже, отдельным блоком с явной специфичностью (1,1,0) через #cc, а не переименование. */ .p-help{ --hlp-hint:#9A9A9A; --hlp-text:#2F2F2F; --hlp-line-soft:var(--border-subtle); --hlp-doc:17px;--hlp-doc-lh:1.68; --hlp-col-nav:220px;--hlp-col-toc:190px;--hlp-gap:48px; --hlp-text-w:760px; /* help-screens.css = копия wave1/screens/_screens.css (не редактируется, см. шапку build-help.js) — она ссылается на переменные прототипа (--ink/--line/--muted/…), которых нет ни в одном другом файле сайта. Объявлены здесь, а не в самом _screens.css, и сознательно только под .p-help, а не в глобальном :root — иначе имена вроде --line рисковали бы однажды столкнуться с токеном, который появится в дизайн-системе. */ --ink:var(--text-primary); --muted:var(--text-secondary); --hint:var(--hlp-hint); --line:var(--border); --line-soft:var(--hlp-line-soft); --page:var(--surface-2); --bad:var(--error); /* --ok — волна 4 (_screens4.css): та же прототипная роль «успех/готово», что и --bad для «ошибка/просрочено» — один токен и на текст (.s-oc-fr .s-ok, .s-tm-act, .s-green, .s-pu-t .s-ok), и на заливку полосы прогресса (.s-oc-prg s), зеркалит --bad:var(--error) построчно выше. Без этой строки сборка падает на assertCustomPropsDefined() — var(--ok) не резолвился нигде на сайте (проверено `node build.js`). */ --ok:var(--success); --accent-bg:var(--accent-soft); --accent-dark:var(--accent-hover); } /* ───── кнопка согласия на cookie — восстановление после коллизии имени ───── help-screens2.css (волна 2, карточка клиента) несёт свой .cc-btn, голым классом, специфичность (0,1,0) — ровно как у .cc-btn/.cc-yes в landing.css, которые задают КНОПКУ СОГЛАСИЯ НА COOKIE (#cc, есть на каждой странице сайта). help-screens2.css в /help грузится позже landing.css, и при равной специфичности позже подключённое правило выигрывает по свойствам, которые объявляют оба: font-size/padding/border-radius/border у обеих, background/color — у .cc-btn волны 2 и у .cc-yes лендинга. Экран редактировать нельзя, поэтому чиним здесь — тем же приёмом, что и недостающие переменные выше: явная специфичность (1,1,0) через #cc, а не переименование. Значения — дословно то, что уже в landing.css. */ #cc .cc-btn{font-family:inherit;font-size:13.5px;font-weight:var(--fw-medium);line-height:1;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .2s var(--ease)} #cc .cc-yes{background:var(--accent);color:#fff} #cc .cc-yes:hover{background:var(--accent-hover)} @media(max-width:560px){ #cc .cc-btn{width:100%;text-align:center} } /* ───── поле формы-заглушки «Мастер настройки — шаг 3» — восстановление после коллизии имени ───── Задача landing/help-polish, п.2б: «Сумма договора» и «Клиент» в onboarding-order.html — единственные два поля с классом-модификатором .s-fld.s-ph («placeholder», незаполненное поле — используется ТОЛЬКО в этом экране). Тот же .s-ph отдельным, ГОЛЫМ классом несёт совсем другой смысл в help-screens.css — корневая обёртка экрана телефона рабочего (worker-phone.html, «.s-ph» = «телефон», не «placeholder»): .s-ph{max-width:360px;margin:0 auto;padding:14px 12px;font:13px/1.45…}. Специфичность (0,1,0) у телефонного .s-ph ниже, чем (0,3,0) у .s-wiz-form .s-fld.s-ph{color:…} — но специфичность сравнивается ПО СВОЙСТВУ, а не по правилу целиком: .s-wiz-form .s-fld.s-ph трогает только color, max-width и margin остаются целиком за телефонным .s-ph. Отсюда и баг: у обоих полей max-width:360px и margin-left/right:auto — те самые «узкие поля посередине», не задуманная вёрстка, а бесплатное наследие чужого экрана. Замерено (1440px, /help/getting-started/pervyy-zapusk, ДО правки): max-width 360px, margin-left 50.15px, margin-right 50.16px. Экран не редактируется — чиним тем же приёмом, что и .cc-btn/.p-help section выше: своё правило с заведомо более высокой специфичностью, а не переименование. */ .s-wiz-form .s-fld.s-ph{max-width:none;margin:0 0 9px} /* ───── поиск в сайдбаре (задача landing/nav-and-search) ───── Было: отдельная полоса-плашка под шапкой на каждой статье/категории — «второй этаж» (жалоба задания). Убрана целиком: .hlp-side-search теперь живёт ВНУТРИ левой колонки .hlp-page, над .hlp-side-nav — там же, где макет nav-search-preview.html её показывает (оформление — своё, дизайн- система сайта, не макет: там только структура и поведение). .hlp-side (обёртка над .hlp-side-search + .hlp-side-nav) — sticky САМА, но БЕЗ overflow — тот же приём, что снимает .hlp-hero::-hidden ниже. Прокрутка длинного списка разделов остаётся на .hlp-side-nav (как и была до этой задачи), НЕ переезжает на общую обёртку: переехав, она бы обрезала выпадающий список подсказок поиска ровно тем же способом, что табу задание просит починить (п.4) — .hlp-sres лежит внутри .hlp-side-search, а тот, будь у .hlp-side overflow, оказался бы её потомком. .hlp-side-nav ниже — сосед .hlp-side-search, не родитель: его собственный overflow-y:auto не задевает поле поиска вообще. top:87px — .nav 71px (высота+граница, тот же расчёт, что был у снятой полосы) + 16px (--space-4) зазора, чтобы поиск не облипал шапку при скролле встык. */ .hlp-side{position:sticky;top:87px} .hlp-side-search{position:relative;margin-bottom:var(--space-6, 24px)} .hlp-side-search-form{display:flex;align-items:center;gap:8px;border:1px solid var(--border); border-radius:10px;padding:9px 11px;background:#fff;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)} .hlp-side-search-form:focus-within{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft)} .hlp-side-search-form svg{flex:none;stroke:var(--hlp-hint);pointer-events:none} .hlp-side-search-form input{font:14.5px/1 var(--font-sans);border:0;outline:0;width:100%; background:transparent;color:var(--text-primary)} .hlp-side-search-form input::placeholder{color:var(--hlp-hint)} /* ───── результаты поиска (dropdown) — общий вид у большого/сайдбарного/ строчного полей ───── */ .hlp-sres{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border); border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.12);padding:6px;text-align:left;display:none;z-index:120; max-height:440px;overflow:auto} .hlp-sres.hlp-open{display:block} .hlp-sres a{display:block;padding:9px 12px;border-radius:8px;text-decoration:none} .hlp-sres a:hover{background:var(--surface-2)} .hlp-sres .hlp-sres-t{font-size:14px;font-weight:600;color:var(--text-primary);display:block;margin-bottom:2px} .hlp-sres .hlp-sres-m{font-size:12px;color:var(--hlp-hint);display:block} .hlp-sres .hlp-sres-m b{color:var(--text-secondary);font-weight:500} .hlp-sres mark{background:#FFF1CC;color:inherit;border-radius:2px} .hlp-sres .hlp-sres-none{padding:16px 12px;font-size:13.5px;color:var(--text-secondary)} /* Сайдбарное поле — 220px (--hlp-col-nav), список подсказок шире самого поля (задача, баг «подсказки обрезаются» — п.4): width:100% на 220px был бы нечитаем — три слова заголовка уже не помещаются в строку. max(100%,340px) — не уже поля (растягивался бы, будь контент шире), и не уже 340px минимум, тот же приём, что в макете. На мобильном (одна колонка ≥660px контента) 100% уже даёт комфортную ширину — отдельный override не нужен: max(100%,340px) на content-box ~660+ даёт 100% САМ, не 340px. Своя прокрутка — min(60vh,380px): без нижнего предела длинный список подсказок на низком окне ушёл бы за нижний край экрана — ни у ОДНОГО родителя (.hlp-side — overflow-y:auto, но .hlp-sres — потомок .hlp-side-search, НЕ .hlp-side-nav, где живёт этот overflow) нет overflow:hidden, который бы это дополнительно обрезал. */ .hlp-side-search .hlp-sres{width:max(100%,340px);max-height:min(60vh,380px)} .hlp-bigsearch{position:relative} /* ───── главная ───── */ /* Тот же класс коллизии, что описан в шапке файла про .cc-btn — только через голый тег, не через класс. landing.css несёт сайтовое section{padding:var(--space-24) 0} (96px), без области действия: оно применяется к ЛЮБОМУ
на сайте, а /help грузит landing.css ради общей шапки и подвала (см. header.html/footer.html), не только ради них. .hlp-hero и .hlp-sect ни разу не объявляли свой padding — нечему было перебить сайтовое правило, и оно молча добавляло 96px сверху и снизу к каждой секции, поверх её собственного намеренного отступа (у .hlp-hero-in — 68/72px, у .hlp-sect — margin:48px). Отсюда и был «разрыв в пол-экрана» между «Разделы» и «Быстрый старт»: не одна правка ритма, а сложенные вместе намеренный отступ и случайный чужой. Специфичность (0,1,1) у .p-help section, выше голого (0,0,1) у section в landing.css — побеждает при любом порядке подключения файлов, как и у .cc-btn выше. Дальше отступы — только своим margin/padding ниже. */ .p-help section{padding:0} /* overflow:hidden — БЫЛО, снято задачей landing/nav-and-search (баг «подсказки обрезаются», п.4: «скорее всего overflow у hero» — им и оказался). Держал градиентное свечение .hlp-hero::before, которое не выходило за пределы секции — тот псевдоэлемент убран другой задачей (landing/help-polish, п.1а, «убрать градиент совсем»), и с тех пор overflow:hidden ничего не стриг, кроме как раз .hlp-sres — выпадающий список подсказок под большим полем поиска, ниже 100% высоты секции, обрезался ровно этим правилом. Ничего внутри .hlp-hero больше не требует обрезки. */ .hlp-hero{background:#fff;border-bottom:1px solid var(--border);position:relative} .hlp-hero-in{padding:68px 40px 72px;text-align:center;position:relative} .hlp-hero-lab{font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-hover);margin-bottom:14px} .hlp-hero h1{margin:0 0 10px;font-size:38px;line-height:1.15;color:var(--text-primary);letter-spacing:-.8px} .hlp-hero-in>p{margin:0 auto 30px;color:var(--text-secondary);font-size:17px;line-height:1.55;max-width:600px} .hlp-bigsearch{max-width:660px;margin:0 auto} .hlp-bigsearch form{position:relative} .hlp-bigsearch input{width:100%;height:56px;border:1px solid var(--border);border-radius:13px;background:#fff; padding:0 16px 0 48px;font:16px var(--font-sans);color:var(--text-primary);outline:none;box-shadow:0 2px 10px rgba(26,26,26,.05)} .hlp-bigsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),0 2px 10px rgba(252,64,0,.10)} .hlp-bigsearch svg{position:absolute;left:18px;top:19px;stroke:var(--hlp-hint);pointer-events:none} /* Пины — не ссылки на статьи, а кнопки: клик вставляет ярлык в поле поиска и запускает тот же живой поиск, что и набор руками (задача landing/help-polish, см. wireSearchBox()/initHeroChips() в help.js). Раньше это были прямо на статью — смена тега на