/* Источник: проект Claude Design, base/layout.css плюс каркас сайта сервиса.
   Срез 14 августа 2026. Переменных не объявляет.

   Контейнер один на шапку, содержимое и подвал - кросс-проектное правило. */

/* Полосы прокрутки - фирменные. Серая полоса браузера на тёплой плоскости
   лендинга читается как чужая деталь, приклеенная к краю окна.

   Объявлено глобально и один раз: полос на сайте несколько - страница, список
   подсказок города, слой названий, - и разные полосы в одном продукте выглядят
   недоделкой. Узлы, которые прячут свою полосу совсем, объявляют это у себя и
   побеждают специфичностью, поэтому их это правило не трогает.

   width/height, а не логические свойства: у `::-webkit-scrollbar` это не коробка
   документа, а размер самого органа прокрутки, и логической пары у него нет. */
html{scrollbar-color:var(--sc-acc-600) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sc-acc-600);border-radius:var(--sc-radius-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--sc-acc-700)}
::-webkit-scrollbar-corner{background:transparent}

/* Переходы по якорям - плавные. На колесо мыши это правило НЕ влияет: браузер
   применяет его только к программной прокрутке и к переходам по ссылкам-якорям.
   Плавность колеса делает скрипт (`main.js`), и он же умолкает под системной
   настройкой «меньше движения» - в отличие от этой строки, которую надо гасить
   отдельно. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.sc-skip-link{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:var(--sc-z-toast);
  padding:12px 20px;background:var(--sc-surface);border:var(--sc-rule-w-hair) solid var(--sc-border-strong);
  border-radius:var(--sc-radius)}
.sc-skip-link:focus{inset-inline-start:0}

.sc-wrap{max-inline-size:var(--sc-container-max);margin-inline:auto;padding-inline:var(--sc-container-pad)}
@media (max-width:600px){.sc-wrap{padding-inline:var(--sc-container-pad-mobile)}}

.sc-band{inline-size:100%;padding-block:var(--sc-section-y)}
.sc-band--tight{padding-block:var(--sc-space-32)}

.sc-rule{border:0;border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline);margin:0}

/* Панель: карточка кабинета. Волосяная линия, скругление 16, тени нет.
   Тень появляется только когда панель липкая или лежит слоем поверх. */
.sc-panel{background:var(--sc-surface);border:var(--sc-rule-w-hair) solid var(--sc-hairline);
  border-radius:var(--sc-radius);padding:var(--sc-space-24)}
.sc-panel--flush{padding:0;overflow:hidden}
.sc-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sc-space-16);
  padding:var(--sc-space-16) var(--sc-space-24);border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.sc-panel__body{padding:var(--sc-space-24)}
.sc-panel__scroll{overflow:auto;overscroll-behavior:contain}

/* Приклеенная строка действий. Резервирует место под собой: прокручивается
   содержимое, а строка стоит. Завершающая кнопка не уезжает за край никогда. */
.sc-sticky-actions{position:sticky;inset-block-end:0;z-index:var(--sc-z-sticky);
  display:flex;align-items:center;justify-content:flex-end;gap:var(--sc-space-12);flex-wrap:wrap;
  min-block-size:var(--sc-sticky-actions-h);padding:var(--sc-space-12) var(--sc-space-24);
  background:var(--sc-surface);border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline);
  box-shadow:var(--sc-shadow-sticky)}
.sc-sticky-actions--between{justify-content:space-between}
.sc-sticky-host{display:flex;flex-direction:column;min-block-size:0}
.sc-sticky-host__scroll{flex:1;min-block-size:0;overflow:auto;padding-block-end:var(--sc-space-24)}

/* --- Каркас сайта сервиса --- */

.sc-site-header{position:sticky;inset-block-start:0;z-index:var(--sc-z-sticky);
  background:var(--sc-bg-page);border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.sc-site-header .sc-wrap{display:flex;align-items:center;gap:var(--sc-space-24);
  min-block-size:var(--sc-header-h)}

.sc-brand{font-size:var(--sc-text-h3);font-weight:var(--sc-fw-medium);color:var(--sc-text);
  text-decoration:none;white-space:nowrap}
.sc-brand:hover,.sc-brand:visited{color:var(--sc-text)}

.sc-main{display:block}

/* Экран-приложение: мастер сборки и регистрация. Занимает окно целиком, потому
   что внутри него живёт собственная коробка прокрутки - без заданной высоты
   `block-size:100%` у `.sc-w` разрешился бы в `auto`, колонка перестала бы
   центрироваться, а расчёт предела высоты поля подробностей (он считается от
   clientHeight этой коробки) начал бы врать.

   100dvh, а не 100vh: на телефоне адресная строка сворачивается, и vh оставляет
   под ней полосу, до которой нельзя доскроллить. */
.sc-app{block-size:100dvh}

/* АДМИН-ПАНЕЛЬ WORDPRESS ОТНИМАЕТ ВЫСОТУ, и не учесть это значит получить ДВЕ
   полосы прокрутки на каждом экране-приложении.

   Механика: панель стоит `position:fixed`, а место под неё WordPress освобождает
   правилом `html{margin-top:32px !important}` в своём же стиле. Экран при этом
   ровно `100dvh` и начинается ПОСЛЕ этого отступа - документ выходит за окно
   ровно на высоту панели. Замерено на кабинете: `documentElement` переполнялся на
   32 точки, и к внутренней прокрутке области раздела добавлялась внешняя, а
   нижняя группа боковой полосы («Referrals», «Help») уезжала под сгиб на 16 -
   `.sc-k-frame{overflow:hidden}` её обрезал.

   Числа и порог взяты у WordPress, а не выбраны: 32 на широком, 46 при 782 и
   ниже, где панель выше. Класс `admin-bar` на `body` ставит тоже он, поэтому
   человеку без панели (а клиентская роль `sc_client` её не видит вовсе) ничего не
   вычитается.

   Побочно правило лечит мастер, регистрацию и экран сборки: `.sc-app` у них общий,
   и двойная прокрутка была на всех трёх - просто на них нижнюю группу нечему было
   обрезать, и это не бросалось в глаза. */
body.admin-bar .sc-app{block-size:calc(100dvh - 32px)}

@media screen and (max-width:782px){
  body.admin-bar .sc-app{block-size:calc(100dvh - 46px)}
}

.sc-site-footer{border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline);
  padding-block:var(--sc-space-48)}
.sc-site-footer .sc-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sc-space-24)}
.sc-site-footer p{margin:0;color:var(--sc-text-muted);font-size:var(--sc-text-body-sm)}

/* ПРАВИЛ `.sc-nav` ЗДЕСЬ БОЛЬШЕ НЕТ.
   Стояли три штуки под навигацию подвала (`.sc-nav ul`, `.sc-nav a`) и не красили
   НИЧЕГО: подвал и шапка лендинга собраны на `.sc-ln-foot__*` и `.sc-ln-nav__*`.
   Единственный `class="sc-nav"` в теме - боковая полоса кабинета, где это сам `ul` с
   кнопками внутри, и мёртвые правила ждали там первой же ссылки: «Настройки» и
   «Помощь» - естественные `<a>`, и они молча получили бы приглушённый цвет и
   подчёркивание при наведении. Имя отдано навигации кабинета, как в системе-источнике;
   её правила живут в `cabinet.css` под `.sc-k`. */

/* Кнопок здесь НЕТ намеренно. Они живут в parts/buttons.css - побайтовой копии
   файла из проекта Claude Design. Своя версия .sc-btn, написанная по памяти,
   стояла здесь и расходилась с системой: не было ни --ink, ни --sm/--lg, а
   вариант --outline был прозрачным вместо плоскости. Разметка макета,
   собранная на настоящих классах, ломалась об эту подделку.

   Ссылка-кнопка не должна менять цвет посещённой: это единственное, что тема
   добавляет к системному файлу, и добавляет здесь, а не правкой копии.

   ВЕС ПРАВИЛА ОБНУЛЁН НАМЕРЕННО, И ЭТО НЕ КОСМЕТИКА. Написанное как `.sc-btn:visited`
   оно весит (0,2,0) и перебивает КАЖДЫЙ модификатор кнопки - `.sc-btn--accent` весит
   (0,1,0). Наружу это вышло так: призыв к тарифу в боковой полосе становился ссылкой,
   человек по ней проходил, и со следующего показа `inherit` красил белую подпись
   чернилом полосы - белым по синему становилось тёмным по синему. Владелец: «тут текст
   должен быть белый». Соседний Upgrade наверху справа не `.sc-btn` вовсе, поэтому он и
   был помечен «тут ок» - два внешне одинаковых органа расходились ровно этим.

   Замер тут ЛЖЁТ по построению: `getComputedStyle()` прячет состояние посещённой ссылки
   ради приватности и всегда отдаёт непосещённый цвет. Спрашивать надо специфичность
   правил, а не цвет узла.

   `:where()` даёт нулевой вес, и этого достаточно: авторское правило бьёт стиль
   браузера по ПРОИСХОЖДЕНИЮ, а не по весу, - фиолетовая ссылка не вернётся. Зато любой
   модификатор со своим цветом теперь выигрывает без борьбы. */
:where(.sc-btn:visited){color:inherit}

/* --- шлюз между полем на главной и сборкой --- */

.sc-start{max-inline-size:min(100%,72ch)}
.sc-start__form{display:flex;flex-direction:column;gap:var(--sc-space-8);
  margin-block:var(--sc-gap-block)}
.sc-start__label{font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium)}
.sc-start__input{padding:var(--sc-space-16);background:var(--sc-surface);color:var(--sc-text);
  border:var(--sc-rule-w-hair) solid var(--sc-border-strong);border-radius:var(--sc-radius);
  font:inherit;font-size:var(--sc-text-body);line-height:var(--sc-lh-body);resize:vertical}
.sc-start__actions{margin:var(--sc-space-8) 0 0}
.sc-start__note{margin-block-start:var(--sc-gap-section)}
.sc-start__note p{margin:var(--sc-space-12) 0 0;max-inline-size:var(--sc-measure)}

/* Строка о хранении. В ПОТОКЕ подвала, а не плавающая: низ экрана уже занят
   липким полем, кнопкой виджета доступности и кнопкой паузы. Отметка о закрытии
   ставится классом на <html> до первой отрисовки, поэтому вернувшийся человек не
   видит её ни одного кадра. */
.sc-notice{border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline);
  padding-block:var(--sc-space-16);background:var(--sc-surface-sunken)}
.sc-notice__inner{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--sc-space-16)}
.sc-notice__text{margin:0;max-inline-size:var(--sc-measure);
  font-size:var(--sc-text-body-sm);line-height:var(--sc-lh-body-sm)}
html.sc-notice-done .sc-notice{display:none}
/* Без скрипта кнопка ничего не закроет, и показывать её нечестно. */
html.no-js .sc-notice__close{display:none}

/* Плашка выбора о записи поведения - ПЛАВАЮЩАЯ, в отличие от строки о хранении: это вопрос,
   а до подвала доходят единицы (решение владельца 24.09.2026). Слой - листа, а не всплывашки:
   плашка выше содержимого, но под кнопкой виджета доступности, которая обязана оставаться
   нажимаемой. Без скрипта записи нет, и спрашивать о ней нечестно.
   КАРТОЧКА В УГЛУ, А НЕ ПОЛОСА ВО ВСЮ ШИРИНУ - второе решение владельца того же дня (SCRUM-300):
   полоса закрывала низ каждого экрана. Угол - начало строки, потому что конец занят кнопкой
   доступности (`atx-pos-be`: 20 от края плюс 60 самой кнопки); 92 - это они и зазор 12. На
   узком экране карточка поэтому уже ширины экрана ровно на кнопку и не ложится на неё. */
.sc-notice--consent{position:fixed;inset-inline-start:var(--sc-space-16);inset-block-end:var(--sc-space-16);
  z-index:var(--sc-z-sheet);inline-size:min(24rem,calc(100% - var(--sc-space-16) - 92px));
  padding:var(--sc-space-16);border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius);
  box-shadow:var(--sc-shadow-overlay);background:var(--sc-surface)}
.sc-notice--consent .sc-notice__inner{display:flex;flex-direction:column;align-items:stretch;gap:var(--sc-space-12)}
/* Две кнопки поровну: отказ не труднее согласия ни весом, ни шириной. */
.sc-notice__acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sc-space-8)}
/* Поля кнопки уже обычных: на 390 кнопка получает 120, и «No, thanks» с полями системы ломалась
   на две строки - отказ выглядел тяжелее согласия. */
.sc-notice__acts > .sc-btn{inline-size:100%;justify-content:center;padding-inline:var(--sc-space-12);white-space:nowrap}
html.sc-consent-done .sc-notice--consent,html.no-js .sc-notice--consent{display:none}
/* Короткая редакция вопроса - на узком экране, где полная закрывала половину страницы и форму
   регистрации (замер 12.10.2026 на 390: ~300 точек высоты). */
.sc-notice__short{display:none}
@media (max-width:600px){.sc-notice--consent .sc-notice__long{display:none}.sc-notice--consent .sc-notice__short{display:inline}
  .sc-notice--consent{padding:var(--sc-space-12)}.sc-notice--consent .sc-notice__inner{gap:var(--sc-space-8)}}
/* Вход обратно к выбору - такая же подпись подвала, как соседние: без подчёркивания и своего
   цвета. Что это кнопка, говорит подчёркивание под указателем и кольцо фокуса. */
.sc-ln-foot__choice{padding:0;border:0;background:none;font:inherit;color:inherit;
  text-decoration:none;cursor:pointer}
.sc-ln-foot__choice:hover{text-decoration:underline}
html.no-js .sc-ln-foot__choice{display:none}

/* Появление блока при прокрутке. Скрытое состояние объявляется ТОЛЬКО когда
   движение разрешено и есть JS: иначе страница без скрипта осталась бы пустой. */
.sc-enter{opacity:1}
html.js .sc-enter{opacity:0;translate:0 12px;
  transition:opacity var(--sc-dur-enter) var(--sc-ease-enter),translate var(--sc-dur-enter) var(--sc-ease-enter)}
html.js .sc-enter.is-in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){html.js .sc-enter{opacity:1;translate:0 0}}
html.atx-rm .sc-enter,html[data-sc-motion="reduce"] .sc-enter{opacity:1;translate:0 0}

/* «Тариф заполнен» (`template-parts/plans/full.php`): причина с числами и выходы. На экране
   сборки стоит под заголовком отказа и прижат к началу строки, как сам заголовок; в воротах
   мастера - по центру колонки. На главной строки нет (решение владельца 05.10.2026). */
.sc-plan-full{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sc-space-16)}
.sc-plan-full__why{margin:0;max-inline-size:48ch;font-size:var(--sc-text-body);color:var(--sc-ink-700);text-wrap:pretty}
.sc-plan-full__ways{display:flex;flex-wrap:wrap;gap:var(--sc-space-8)}
.sc-w-gate .sc-plan-full{align-items:center;text-align:center}
.sc-w-gate .sc-plan-full__ways{justify-content:center}

/* Метка «Tab» подсказки в пустом поле (`assets/js/ghost.js`, SCRUM-308). Висит над полем в
   `body`, место ставит скрипт; видна, только пока поле пустое и не закрыто другим окном. На
   телефоне это кнопка: Tab там нет, и подсказка берётся нажатием. */
/* На единицу ниже корня виджета доступности (`.atx-root`, 2147483000): метка не ложится
   поверх круглой кнопки (владелец 05.10.2026). У липкого поля слой поднимает скрипт. */
.sc-ghost-tab{position:fixed;z-index:2147482999;display:none;align-items:center;block-size:22px;margin:0;
  padding-inline:7px;border:1px solid var(--sc-ink-200);border-radius:6px;background:var(--sc-surface);
  color:var(--sc-ink-600);font:inherit;font-size:12px;line-height:1;cursor:pointer;
  box-shadow:0 1px 0 var(--sc-ink-200)}
.sc-ghost-tab.is-on{display:inline-flex}
.sc-ghost-tab:hover{color:var(--sc-ink-900);border-color:var(--sc-ink-300)}