/* МАСТЕР СБОРКИ САЙТА - раскладка экрана /start/.
   Перенесено один в один из макета design/v4/wizard/wizard.css, срез 15 августа 2026.
   Классы, вложенность и значения не переименовывались и не пересказывались.

   Файл НЕ объявляет ни одной переменной с префиксом --sc-: значения живут в
   tokens/*.css, здесь только ссылки. Локальная переменная раскладки макета
   называлась --sc-w-field и по этому правилу переименована в --w-field;
   значения у неё те же.

   Шрифт значков (@font-face "Material Symbols Rounded", класс .sc-icon и
   залитый .sc-icon--fill) здесь не объявляется - он живёт в parts/icons.css.
   Раньше в этой строке стоял landing.css, откуда объявление переехало: на
   мастере landing.css не подключается вовсе, и строка уводила от истины ровно
   там, где ищут пропавшие значки. */

/* МАСТЕР СБОРКИ САЙТА. Пластика витринная, а не кабинетная: человек пока не
   работает в кабинете, он получает сайт. Отсюда антиква в вопросе, тёплая
   плоскость лендинга и крупные скругления. Строгий гротеск начнётся позже.
   Раскладка держится на контейнерных запросах: экран живёт и во весь браузер,
   и кадром 390 на общем холсте. */
.sc-w,.sc-w-gate{position:relative;block-size:100%;display:flex;flex-direction:column;overflow:hidden;
  container-type:inline-size;background:var(--sc-l-plane);color:var(--sc-l-plane-on)}

/* Выход и возврат лежат слоем над колонкой: они не участвуют в её прокрутке и
   не съезжают вместе с содержимым. Обе цели нажатия 44px - это компонент. */
.sc-w__top{position:absolute;inset-block-start:0;inset-inline:0;z-index:4;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sc-space-8);
  padding:var(--sc-space-16);min-block-size:76px}
.sc-w__top > *{pointer-events:auto}

/* Прокручивается ВСЯ колонка целиком. Центрирование сделано авто-полями, а не
   justify-content:center: центрирование обрезало бы верх, как только содержимое
   переросло экран, и кнопка продолжения уехала бы за край. */
.sc-w__scroll{flex:1;min-block-size:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex}
.sc-w__scroll::-webkit-scrollbar{display:none}
.sc-w__col{inline-size:min(560px,100% - 48px);margin:auto;display:flex;flex-direction:column;
  align-items:center;gap:var(--sc-space-24);padding-block:var(--sc-space-96,96px) var(--sc-space-40,40px)}

.sc-w__icons{display:flex;align-items:center;gap:var(--sc-space-12);color:var(--sc-acc-600)}
.sc-w__icons .sc-icon{font-size:30px}
.sc-w__q{font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400);font-size:clamp(32px,3.4cqi,46px);
  line-height:1.1;letter-spacing:-.01em;margin:0;text-align:center;text-wrap:pretty;max-inline-size:20ch}
.sc-w__block{inline-size:100%;display:flex;flex-direction:column;align-items:center;gap:var(--sc-space-12)}
.sc-w__hint{margin:0;font-size:var(--sc-text-body-sm);color:var(--sc-ink-700);text-align:center;text-wrap:pretty}
/* Ссылка на шаг в строке причины - как ссылка «See some ideas» рядом: цвет акцента и черта. */
.sc-w__hint a{color:var(--sc-acc-700);text-decoration:underline;text-underline-offset:3px}
.sc-w__hint a:hover{text-decoration-thickness:2px}

/* Поле. Белая плоскость на тёплой - поле видно как поле, а не как пятно фона. */
.sc-w__input{inline-size:100%;font:inherit;font-size:var(--sc-text-lead);line-height:1.5;
  padding:var(--sc-space-20,20px) var(--sc-space-24);border-radius:var(--sc-l-radius);
  border:var(--sc-rule-w-hair) solid var(--sc-l-hairline);background:var(--sc-surface);color:var(--sc-text);
  resize:none;min-block-size:132px}
.sc-w__input--one{min-block-size:0;block-size:68px;padding-inline-start:56px;white-space:nowrap;text-overflow:ellipsis}
.sc-w__input::placeholder{color:var(--sc-text-placeholder)}

/* Таблетки выручки. Отмеченность несёт не только заливка: у выбранной появляется
   галочка. Подпись переносится ВНУТРИ таблетки - русская и немецкая строки
   длиннее английской, и обрезать их нельзя. */
.sc-w__pills{inline-size:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sc-space-12)}
.sc-w__pill{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--sc-space-8);
  min-block-size:64px;padding:var(--sc-space-12) var(--sc-space-20,20px);font:inherit;font-size:var(--sc-text-body);
  text-align:center;white-space:normal;text-wrap:pretty;cursor:pointer;
  border:var(--sc-rule-w-hair) solid var(--sc-l-hairline);border-radius:var(--sc-radius-pill);
  background:var(--sc-surface);color:var(--sc-l-plane-on);
  transition:background var(--sc-dur-fast) var(--sc-ease),border-color var(--sc-dur-fast) var(--sc-ease)}
.sc-w__pill:hover{border-color:var(--sc-accent)}
/* Выбранное состояние - заливка акцентом системы, как везде в продукте. Пара
   объявлена целиком: заливка и текст на ней, оба из системы. */
.sc-w__pill[aria-pressed="true"]{background:var(--sc-accent);color:var(--sc-accent-on);border-color:var(--sc-accent)}
.sc-w__pill .sc-icon{font-size:20px}
.sc-w__tick{position:absolute;inset-block-start:50%;margin-block-start:-10px;inset-inline-start:var(--sc-space-20,20px);
  inline-size:20px;block-size:20px;display:grid;place-items:center;pointer-events:none}
.sc-w__pill-t{min-inline-size:0;line-height:1.3;padding-inline:var(--sc-space-24)}
/* Таблетка тянется на всю высоту ряда сетки: подпись в две строки не вылезает
   за скруглённый край. */
.sc-w__pill{block-size:100%}

/* Автодополнение рисуется СЛОЕМ ПОВЕРХ. Оно не двигает ни чип языка, ни кнопку:
   список, раздвигающий раскладку, уводит кнопку из-под пальца. Пять строк, дальше
   прокрутка внутри списка. */
.sc-w__combo{--w-field:68px;position:relative;inline-size:100%;display:flex;flex-direction:column;align-items:center;gap:var(--sc-space-12)}
/* Место под список отведено ВСЕГДА: пять строк по 44 плюс поля. Пустое место под
   чипом - плата за то, что открытый список не двигает кнопку и не наезжает на неё. */
/* Слой считается от КОМБО, а не от этого места, поэтому position тут не нужен:
   иначе список привязывался бы к пустому месту под чипом. */
.sc-w__slot{inline-size:100%;block-size:232px}
.sc-w__combo-i{position:absolute;inset-block-start:0;inset-inline-start:var(--sc-space-20,20px);
  block-size:68px;display:flex;align-items:center;color:var(--sc-ink-700);pointer-events:none}
.sc-w__list{position:absolute;inset-block-start:calc(var(--w-field,68px) + var(--sc-space-12));
  inset-inline:0;z-index:6;margin:0;padding:6px;
  list-style:none;background:var(--sc-surface);border-radius:var(--sc-l-radius-sm);
  box-shadow:var(--sc-shadow-overlay);max-block-size:232px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.sc-w__opt{inline-size:100%;min-block-size:44px;display:flex;align-items:center;gap:var(--sc-space-8);
  padding-inline:var(--sc-space-16);font:inherit;font-size:var(--sc-text-body);text-align:start;
  background:none;border:0;border-radius:var(--sc-radius-sm,12px);cursor:pointer;color:var(--sc-text)}
.sc-w__opt:hover{background:var(--sc-l-surface)}
/* Строка списка в ОДНУ строку с многоточием: место названия длиннее ширины поля
   бывает часто, а переносить строку в списке фиксированной высоты нельзя. */
.sc-w__opt > span{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-w__opt b{font-weight:var(--sc-fw-medium)}
/* Панель ожидания: та же коробка, что у выдачи, - меняется только содержимое.
   Нажать в ней нечего, поэтому события указателя выключены: иначе первый же
   нетерпеливый клик попадал бы в пустоту вместо строки, которая вот-вот придёт. */
.sc-w__list--wait{pointer-events:none}
/* Высота полосы с полями даёт ровно 44 - высоту строки выдачи. Панель поэтому не
   прыгает в тот кадр, когда заготовку сменяет настоящий список. */
.sc-w__skel{display:block;block-size:14px;margin-block:15px;margin-inline:var(--sc-space-16);
  border-radius:var(--sc-radius-pill);background:var(--sc-l-surface);
  animation:sc-w-skel 1.2s var(--sc-ease) infinite}
/* Пульс прозрачностью, а не бегущий блик: блик - это горизонтальный градиент, а
   он не зеркалится, и в письме справа налево бежал бы не в ту сторону. */
@keyframes sc-w-skel{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.sc-w__skel{animation:none;opacity:.7}}

.sc-w__chip{display:inline-flex;align-items:center;gap:var(--sc-space-8);min-block-size:44px;
  padding-inline:var(--sc-space-16);font:inherit;font-size:var(--sc-text-body-sm);cursor:pointer;
  border:var(--sc-rule-w-hair) solid var(--sc-l-hairline);border-radius:var(--sc-radius-pill);
  background:var(--sc-surface);color:var(--sc-text)}
.sc-w__chip:hover{border-color:var(--sc-border-strong)}
.sc-w__chip span{white-space:nowrap}
.sc-w__chip .sc-icon{font-size:18px;color:var(--sc-ink-700)}

/* Кнопка продолжения во всю ширину поля и В ПОТОКЕ - как и точки под ней.
   Приклеенная к низу строка сталкивалась бы с центрированной колонкой. */
.sc-w__col .sc-btn{inline-size:100%}
/* Цифры в кружках, а не точки: точка не говорит, сколько пройдено и сколько
   осталось. Пройденный шаг помечен ГАЛОЧКОЙ, а не только цветом - состояние несёт
   второй признак. Цифра здесь указатель, а не текст страницы, поэтому кегль
   подписи; кружок 28 - это не цель нажатия, шаги не нажимаются. */
.sc-w__steps{display:flex;align-items:center;justify-content:center;gap:0;
  inline-size:100%;max-inline-size:420px;margin-inline:auto;padding-block-start:var(--sc-space-8)}
/* Клетка 44: пройденный шаг - настоящая кнопка возврата, и цель нажатия у неё полная,
   хотя кружок нарисован 28. У непройденных та же геометрия, чтобы ряд не дёргался. */
.sc-w__stepb{flex:none;inline-size:var(--sc-tap-min);block-size:var(--sc-tap-min);
  display:grid;place-items:center;padding:0;border:0;background:none}
button.sc-w__stepb{cursor:pointer}
button.sc-w__stepb:hover .sc-w__stepn{border-color:var(--sc-success);color:var(--sc-success)}
button.sc-w__stepb:hover .sc-w__stepn[data-state="done"]{background:var(--sc-success);color:var(--sc-success-on)}
/* Отрезок между кружками. Растягивается, поэтому расстояние держит сама полоса. */
.sc-w__bar{position:relative;flex:1;min-inline-size:16px;block-size:2px;border-radius:var(--sc-radius-pill);
  background:var(--sc-l-surface-2);overflow:hidden}
.sc-w__bar::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:0;
  background:var(--sc-success);transition:inline-size var(--sc-dur-slow) var(--sc-ease)}
.sc-w__bar[data-fill="full"]::after{inline-size:100%}
/* Половинной заливки нет: зелёным помечен только путь МЕЖДУ пройденными шагами. */
.sc-w__stepn{inline-size:28px;block-size:28px;border-radius:var(--sc-radius-pill);
  display:grid;place-items:center;font-size:var(--sc-text-caption);font-weight:var(--sc-fw-medium);
  font-variant-numeric:tabular-nums;
  border:var(--sc-rule-w-hair) solid var(--sc-l-hairline);background:transparent;color:var(--sc-ink-600);
  transition:background var(--sc-dur-base) var(--sc-ease),color var(--sc-dur-base) var(--sc-ease),
    border-color var(--sc-dur-base) var(--sc-ease),scale var(--sc-dur-base) var(--sc-ease)}
.sc-w__stepn[data-state="now"]{background:var(--sc-ink-950);color:var(--sc-plane);
  border-color:var(--sc-ink-950);scale:1.14}
/* Пройденный - ЗЕЛЁНЫЙ, пара объявлена целиком: заливка успеха и текст на ней. */
.sc-w__stepn[data-state="done"]{background:var(--sc-success);color:var(--sc-success-on);border-color:var(--sc-success)}
.sc-w__stepn .sc-icon{font-size:16px}
/* Пройденный шаг: галочка, а под указателем - цифра, куда вернёшься. Оба знака в
   одной клетке сетки, меняются прозрачностью: подмена текста дёргала бы ряд. */
.sc-w__stepn-c,.sc-w__stepn-n{grid-area:1 / 1;display:grid;place-items:center;
  transition:opacity var(--sc-dur-fast) var(--sc-ease)}
.sc-w__stepn-n{opacity:0}
button.sc-w__stepb:hover .sc-w__stepn-c,button.sc-w__stepb:focus-visible .sc-w__stepn-c{opacity:0}
button.sc-w__stepb:hover .sc-w__stepn-n,button.sc-w__stepb:focus-visible .sc-w__stepn-n{opacity:1}
@media (prefers-reduced-motion:reduce){.sc-w__stepn-c,.sc-w__stepn-n{transition:none}}

/* Переход между шагами: содержимое въезжает снизу с проявлением, вопрос первым,
   тело следом. Ход короткий - это смена экрана, а не представление. */
.sc-w__col{animation:sc-w-in var(--sc-dur-slow) var(--sc-ease) both}
.sc-w__col > *{animation:sc-w-in var(--sc-dur-slow) var(--sc-ease) both}
.sc-w__col > *:nth-child(1){animation-delay:0ms}
.sc-w__col > *:nth-child(2){animation-delay:50ms}
.sc-w__col > *:nth-child(3){animation-delay:100ms}
.sc-w__col > *:nth-child(4){animation-delay:150ms}
.sc-w__col > *:nth-child(5){animation-delay:200ms}
@keyframes sc-w-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){
  .sc-w__col,.sc-w__col > *{animation:none}
  .sc-w__stepn{transition:none}
  .sc-w__stepn[data-state="now"]{scale:1}
}

/* Слой поверх экрана: под затемнением видно и шаг, и точки. Затемнение внутри
   кадра, а не во всём окне - экран живёт кадром на общем холсте. */
.sc-w__scrim{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:var(--sc-space-24);
  background:rgba(18,19,23,.46)}
.sc-w__modal{position:relative;inline-size:min(460px,100%);display:flex;flex-direction:column;gap:var(--sc-space-16);
  padding:var(--sc-space-32);background:var(--sc-surface);color:var(--sc-text);
  border-radius:var(--sc-l-radius);box-shadow:var(--sc-shadow-overlay)}
.sc-w__modal h2{font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400);font-size:clamp(24px,2.6cqi,32px);
  line-height:1.15;margin:0;max-inline-size:18ch;text-wrap:pretty}
.sc-w__modal p{margin:0;color:var(--sc-ink-700);font-size:var(--sc-text-body);text-wrap:pretty}
.sc-w__modal .sc-btn{inline-size:100%}
.sc-w__modal-x{position:absolute;inset-block-start:var(--sc-space-8);inset-inline-end:var(--sc-space-8)}
.sc-w__acts{display:flex;flex-direction:column;gap:var(--sc-space-12);margin-block-start:var(--sc-space-8)}
.sc-w__langs{display:flex;flex-direction:column;gap:2px;max-block-size:280px;overflow-y:auto;margin:0;padding:0;list-style:none}
.sc-w__lang{inline-size:100%;min-block-size:52px;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sc-space-8);padding-inline:var(--sc-space-16);font:inherit;font-size:var(--sc-text-body);
  background:none;border:0;border-radius:var(--sc-radius-sm,12px);cursor:pointer;color:var(--sc-text);text-align:start}
.sc-w__lang:hover{background:var(--sc-l-surface)}
.sc-w__lang[aria-current="true"]{background:var(--sc-l-surface);font-weight:var(--sc-fw-medium)}
/* Строка языка - флаг, самоназвание, галочка у выбранного. Название отжимает
   галочку к концу строки само: без auto-поля space-between развёл бы ТРИ узла
   по краям и посадил название посередине. */
.sc-w__lang-n{margin-inline-end:auto}
/* Волосяная обводка обязательна: у польского, финского и мальтийского флага
   край белый, и без неё они растворяются в белой строке списка. */
.sc-w__flag{flex:none;inline-size:20px;block-size:14px;border-radius:2px;
  box-shadow:0 0 0 var(--sc-rule-w-hair) var(--sc-l-hairline)}


/* --- ШАГ 4: название --- */
/* min-block-size:0 обязателен: без него 132px из .sc-w__input побеждают высоту 68. */
.sc-w__input--plain{min-block-size:0;block-size:68px}
.sc-w__under{margin:0;display:flex;align-items:center;justify-content:center;gap:var(--sc-space-4);flex-wrap:wrap}
.sc-w__under > span{font-size:var(--sc-text-body-sm);color:var(--sc-ink-700)}
.sc-w__link{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:var(--sc-space-12);
  font:inherit;font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);color:var(--sc-acc-700);
  background:none;border:0;border-radius:var(--sc-radius-pill);cursor:pointer}
/* Выключенная кнопка: подсказывать нечем, ключ модели не настроен. Приглушение -
   это тот же цвет, поэтому вторым признаком снимается подчёркивание, а третьим
   стоит объяснение под строкой (`#sc-w-say`, связано через aria-describedby).
   Курсор возвращается к обычному: рука над кнопкой, которая не нажимается,
   обещает нажатие. */
.sc-w__link[disabled]{color:var(--sc-ink-500);cursor:default}
.sc-w__link[disabled] .sc-w__link-t{text-decoration:none}
/* Пока идёт вызов модели. Кнопка остаётся на месте и не меняет размер: подмена
   надписи на «загрузку» дёрнула бы строку под полем. */
.sc-w__link[aria-busy="true"]{color:var(--sc-ink-500);cursor:progress}
.sc-w__more[disabled]{color:var(--sc-ink-500);cursor:progress}
.sc-w__link:hover{background:var(--sc-acc-50)}
/* Линия идёт СКВОЗЬ значок и пробел. В флекс-контейнере подчёркивание детям не
   передаётся - значок и текст получали каждый своё, между ними оставался разрыв.
   Поэтому линия объявлена на строчной обёртке, где всё лежит одной строкой. */
.sc-w__link-t{display:inline-block;text-decoration:none;
  border-block-end:var(--sc-rule-w-hair) solid currentColor;padding-block-end:3px}
.sc-w__link-t .sc-icon{font-size:18px;vertical-align:-4px;margin-inline-end:6px}

/* --- МОДАЛКА ПОДСКАЗОК НАЗВАНИЙ ---
   Список прокручивается ВНУТРИ себя: шапка, крестик и количество видимых строк
   не зависят от длины выдачи. Строки разделены волосяной линией, без вложенной
   серой панели и без карточек: карточка в карточке в модалке - три рамки подряд.
   Названия набраны антиквой: здесь они главное на экране, а не строки списка. */
.sc-w__modal--wide{inline-size:min(620px,100%)}
.sc-w__ideas-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sc-space-12);flex-wrap:wrap;
  margin-block-start:var(--sc-space-8)}
.sc-w__ideas-top p{margin:0;font-size:var(--sc-text-body-sm);color:var(--sc-ink-700)}
.sc-w__ideas{margin:0;padding:0;list-style:none;max-block-size:300px;overflow-y:auto;scrollbar-width:thin;
  border-block:var(--sc-rule-w-hair) solid var(--sc-l-hairline)}
.sc-w__ideas li + li{border-block-start:var(--sc-rule-w-hair) solid var(--sc-l-hairline)}
.sc-w__idea{display:flex;align-items:center;gap:var(--sc-space-8);min-block-size:60px;padding-inline:2px}
.sc-w__star{flex:none;inline-size:44px;block-size:44px;display:grid;place-items:center;border:0;background:none;
  border-radius:var(--sc-radius-pill);cursor:pointer;color:var(--sc-ink-500)}
.sc-w__star:hover{background:var(--sc-l-surface)}
.sc-w__star[aria-pressed="true"]{color:var(--sc-acc-600)}
.sc-w__star .sc-icon{font-size:22px}
.sc-w__idea-n{flex:1;min-inline-size:0;font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400);font-size:21px;
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Действия скрыты прозрачностью, а НЕ visibility и НЕ display: при скрытии теми
   двумя кнопка выпадает из табуляции, focus-within не сработает никогда,
   и идущий по клавиатуре до действий не доберётся. Где наведения нет - видны всегда. */
.sc-w__idea-a{display:flex;align-items:center;gap:var(--sc-space-8);opacity:0;
  inline-size:0;overflow:hidden;
  transition:opacity var(--sc-dur-fast) var(--sc-ease)}
.sc-w__idea:hover .sc-w__idea-a,.sc-w__idea:focus-within .sc-w__idea-a,
.sc-w__idea[data-hover="true"] .sc-w__idea-a{inline-size:auto;overflow:visible}
.sc-w__idea:hover .sc-w__idea-a,.sc-w__idea:focus-within .sc-w__idea-a,
.sc-w__idea[data-hover="true"] .sc-w__idea-a{opacity:1}
/* Где наведения нет - действия видны всегда. Возвращать ОДНУ прозрачность мало:
   спрятаны они тремя объявлениями, и ширина оставалась нулевой внутри
   overflow:hidden. На телефоне строка выдачи оставалась без единого действия -
   выбрать предложенное название было нечем, слой превращался в список для
   чтения. Дефект унаследован от макета (design/v4/wizard/wizard.css), где
   комментарий обещает обратное тому, что делает правило. */
@media (hover:none){.sc-w__idea-a{opacity:1;inline-size:auto;overflow:visible}}
.sc-w__more{display:inline-flex;align-items:center;gap:6px;min-block-size:44px;padding-inline:var(--sc-space-12);
  font:inherit;font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);cursor:pointer;white-space:nowrap;
  border:var(--sc-rule-w-hair) solid var(--sc-l-hairline);border-radius:var(--sc-radius-pill);
  background:var(--sc-surface);color:var(--sc-text)}
.sc-w__more:hover{border-color:var(--sc-border-strong)}
.sc-w__more .sc-icon{font-size:18px;color:var(--sc-ink-700)}
.sc-w__use{display:inline-flex;align-items:center;gap:2px;min-block-size:44px;padding-inline:var(--sc-space-16) var(--sc-space-8);
  font:inherit;font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);cursor:pointer;white-space:nowrap;
  border:0;border-radius:var(--sc-radius-pill);background:var(--sc-accent);color:var(--sc-accent-on)}
.sc-w__use:hover{background:var(--sc-accent-hover)}
.sc-w__use .sc-icon{font-size:18px}

/* --- ШАГ 5: подробности --- */
/* inline-size:100%, а не shrink-to-fit: у растянутой по содержимому строки с
   инлайновыми кнопками замеренная ширина и нарисованная расходятся, и второй ряд
   уходит под следующий блок. */
.sc-w__sum{margin:0;inline-size:100%;font-size:var(--sc-text-body);line-height:1.75;color:var(--sc-ink-700);
  text-align:center;text-wrap:pretty}
/* Значение не переносится ВНУТРИ себя: двухстрочная инлайновая кнопка ломает
   строчный бокс и наезжает на соседние строки. Переносится сама фраза, между
   значениями. */
.sc-w__val{white-space:nowrap;font:inherit;font-weight:var(--sc-fw-medium);color:var(--sc-text);background:none;border:0;
  /* Ни вертикального паддинга, ни своего интерлиньяжа: инлайновая кнопка выше
     строчного бокса поднимает свою первую строку над строкой текста, и следующий
     блок наезжает на предложение. Высота кнопки равна высоте строки. */
  padding:0 2px;line-height:inherit;vertical-align:baseline;cursor:pointer;border-radius:6px;
  text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:4px;text-decoration-color:var(--sc-acc-300)}
.sc-w__val:hover{text-decoration-color:var(--sc-accent)}
/* Поле и всё, что при нём, живут в одной коробке: миниатюры сверху, текст, кнопка
   в углу. Коробка растёт вместе с текстом и никогда не прокручивается внутри. */
.sc-w__drop{inline-size:100%;display:flex;flex-direction:column;gap:var(--sc-space-12);padding:var(--sc-space-16);
  border:var(--sc-rule-w-hair) solid var(--sc-l-hairline);border-radius:var(--sc-l-radius);background:var(--sc-surface);
  cursor:text;transition:border-color var(--sc-dur-fast) var(--sc-ease)}
/* Нажатие в любом месте коробки ставит курсор в текст: коробка И ЕСТЬ поле. Кнопка
   вложений это не ломает - у неё свой cursor:pointer и своё нажатие. */
.sc-w__drop:hover{border-color:var(--sc-border-strong)}
.sc-w__drop:focus-within{border-color:var(--sc-ink-950);
  outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);outline-offset:var(--sc-focus-ring-offset)}
/* Кольцо у самой области снято: иначе обведён кусок поля внутри рамки, а не поле. */
.sc-w__area:focus,.sc-w__area:focus-visible{outline:0}
@media (prefers-reduced-motion:reduce){.sc-w__drop{transition:none}}
.sc-w__thumbs{display:flex;flex-wrap:wrap;gap:var(--sc-space-8)}
.sc-w__thumb{position:relative;inline-size:88px;block-size:88px;border-radius:var(--sc-l-radius-sm);
  overflow:hidden;background:var(--sc-l-surface);flex:none}
.sc-w__thumb img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
/* Затенённый кружок поверх снимка: пара здесь своя, как у любого слоя над
   фотографией: цвет снимка система не знает. */
.sc-w__thumb-x{position:absolute;inset-block-start:0;inset-inline-end:0;inline-size:44px;block-size:44px;
  display:grid;place-items:center;border:0;background:none;cursor:pointer;color:#fff}
.sc-w__thumb-x .sc-icon{font-size:18px;background:rgba(18,19,23,.62);border-radius:var(--sc-radius-pill);padding:4px}
/* Предел высоты задан и в CSS, и в JS: JS считает точную высоту под текст, CSS
   держит потолок, если скрипт не успел. Дальше поле прокручивается внутри себя -
   измеритель, подпись и кнопка остаются на месте. */
.sc-w__area{inline-size:100%;font:inherit;font-size:var(--sc-text-lead);line-height:1.5;border:0;background:none;
  color:var(--sc-text);resize:none;padding:0;min-block-size:84px;max-block-size:312px;
  overflow-y:hidden;scrollbar-width:thin}
.sc-w__area::placeholder{color:var(--sc-text-placeholder)}
.sc-w__drop-foot{display:flex;align-items:center;justify-content:flex-end}
.sc-w__attach{display:inline-flex;align-items:center;gap:6px;min-block-size:44px;padding-inline:var(--sc-space-12);
  font:inherit;font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);cursor:pointer;
  background:none;border:0;border-radius:var(--sc-radius-pill);color:var(--sc-text)}
.sc-w__attach:hover{background:var(--sc-l-surface)}
.sc-w__attach .sc-icon{font-size:20px;color:var(--sc-ink-700)}
/* Измеритель: заливка и подпись меняются вместе - одним цветом полнота не
   показывается. Подпись держит две строки: русская и немецкая длиннее. */
.sc-w__meter{inline-size:100%;display:flex;flex-direction:column;gap:var(--sc-space-8)}
.sc-w__segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-items:center}
/* Залитый сегмент отличается от пустого не только цветом: он вдвое толще. Пустой
   тонкий и светлый, залитый плотный - разница читается и без цвета. */
.sc-w__meter > p{transition:color var(--sc-dur-base) var(--sc-ease)}
.sc-w__meter[data-full="true"] > p{color:var(--sc-success)}
@media (prefers-reduced-motion:reduce){.sc-w__meter > p{transition:none}}
.sc-w__segs > i{block-size:4px;border-radius:var(--sc-radius-pill);background:var(--sc-l-surface-2);
  transition:background var(--sc-dur-base) var(--sc-ease),block-size var(--sc-dur-base) var(--sc-ease)}
.sc-w__segs i[data-on]{block-size:8px;background:var(--sc-ink-700)}
/* Лестница: один сегмент - нейтральный чернильный, два и три - акцентный синий,
   четыре - зелёный успеха из системы. Оранжевого в системе нет вовсе. */
.sc-w__segs[data-level="2"] i[data-on],.sc-w__segs[data-level="3"] i[data-on]{background:var(--sc-accent)}
.sc-w__segs[data-level="4"] i[data-on]{background:var(--sc-success)}
.sc-w__meter > p{margin:0;font-size:var(--sc-text-body-sm);color:var(--sc-ink-700);text-align:center;min-block-size:2.5em}

/* --- ШАГ НОЛЬ: АККАУНТ ---
   Единственный экран, которого в макете НЕТ вовсе: в проекте Claude Design его
   не существует, и собран он из готовых частей мастера по решению владельца.
   Своё здесь ровно одно правило - разделитель между входом через Google и
   входом по почте.

   Линии псевдоэлементами, а не двумя `<hr>`: тематический разлом один, а
   нарисовать его надо с двух сторон от слова. Никаких translate - слово стоит
   в потоке, и в RTL ряд переворачивается сам. */
.sc-w__or{inline-size:100%;display:flex;align-items:center;gap:var(--sc-space-12);
  font-size:var(--sc-text-body-sm);color:var(--sc-ink-700)}
.sc-w__or::before,.sc-w__or::after{content:"";flex:1;
  border-block-start:var(--sc-rule-w-hair) solid var(--sc-l-hairline)}

/* --- ТЕЛЕФОН 390 --- */
@container (max-width:520px){
  /* Селектор из двух классов, а не одного: правило .sc-w__input с min-block-size:120px
     стоит ниже в этом же блоке и при равной специфичности побеждало бы. */
  .sc-w .sc-w__input--plain{block-size:60px;min-block-size:0}
  .sc-w__modal--wide{inline-size:min(100%,460px)}
  .sc-w__ideas{max-block-size:240px}
  .sc-w__idea-n{font-size:18px}
  /* Телефон: модалка помещается в экран целиком. Поля затемнения 8 вместо 16,
     внутренние 16 вместо 24, заголовок и подписи на ступень мельче, список ниже.
     Сама модалка не выше 88 процентов сцены и прокручивается внутри себя - строка
     действий при этом остаётся на виду. */
  .sc-w__scrim{padding:var(--sc-space-8)}
  .sc-w__modal{padding:var(--sc-space-16);gap:var(--sc-space-8);max-block-size:88%;overflow-y:auto}
  .sc-w__modal h2{font-size:22px;max-inline-size:none}
  .sc-w__modal p{font-size:var(--sc-text-body-sm)}
  .sc-w__modal-x{inset-block-start:var(--sc-space-4);inset-inline-end:var(--sc-space-4)}
  .sc-w__ideas{max-block-size:208px}
  .sc-w__idea{min-block-size:52px;gap:var(--sc-space-4)}
  .sc-w__idea-n{font-size:17px}
  .sc-w__star{inline-size:40px;block-size:40px}
  .sc-w__ideas-top{gap:var(--sc-space-8);margin-block-start:0}
  .sc-w__ideas-top p{font-size:var(--sc-text-caption)}
  /* В кадре 390 действия не влезают рядом с названием: остаётся одно,
     второе живёт в шапке списка. */
  .sc-w__idea-a .sc-w__more{display:none}
  .sc-w__thumb{inline-size:72px;block-size:72px}
  .sc-w__area{font-size:var(--sc-text-body);min-block-size:72px;max-block-size:208px}
  .sc-w__sum{font-size:var(--sc-text-body-sm)}
  .sc-w__top{padding:var(--sc-space-12);min-block-size:64px}
  .sc-w__col{inline-size:min(100% - 32px,440px);gap:var(--sc-space-20,20px);padding-block:80px 32px}
  .sc-w__q{font-size:clamp(26px,7.6cqi,32px);max-inline-size:16ch}
  .sc-w__icons .sc-icon{font-size:26px}
  .sc-w__input{font-size:var(--sc-text-body);padding:var(--sc-space-16);min-block-size:120px}
  /* min-block-size обязателен: без него высота 120px из правила выше побеждает
     заданные 60, и однострочное поле вырастает в многострочное. */
  .sc-w__combo{--w-field:60px}
  .sc-w__input--one{block-size:60px;min-block-size:0;padding-inline-start:48px}
  .sc-w__combo-i{block-size:60px;inset-inline-start:var(--sc-space-16)}
  .sc-w__pill{min-block-size:60px;padding-inline:var(--sc-space-12);font-size:var(--sc-text-body-sm)}
  .sc-w__modal{padding:var(--sc-space-24);gap:var(--sc-space-12)}
  .sc-w__scrim{padding:var(--sc-space-16)}
  .sc-w__slot{block-size:220px}
  .sc-w__list{max-block-size:220px}
}

/* Кнопка входа через Google.
   ==========================================================================

   ВИД ЗАДАН ЧУЖИМ БРЕНДБУКОМ, И ЭТО ЕДИНСТВЕННОЕ МЕСТО ПРОДУКТА, ГДЕ МЫ ИДЁМ ЗА
   ЧУЖИМИ ЧИСЛАМИ. Google требует своего знака, своей подписи и минимальной
   высоты 40; узнаваемость тут и есть смысл - человек ищет глазами знакомый
   значок, а не читает надпись. Поэтому здесь белый фон и серая граница вместо
   нашей `.sc-btn--outline`, у которой и то, и другое своё.

   ЧТО ВСЁ-ТАКИ НАШЕ: ширина во всю колонку (у нас это столбец, а не ряд),
   скругление и шрифт - иначе кнопка выглядела бы вставкой из другого продукта.
   Отступление объявлено здесь, а не в докблоке разметки: правит вид этот файл. */

.sc-gbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	inline-size: 100%;
	min-block-size: 44px;
	padding-inline: var(--sc-space-16, 16px);
	border: 1px solid #747775;
	border-radius: var(--sc-radius, 8px);
	background: #fff;
	color: #1f1f1f;
	font: inherit;
	/* Вес токеном, а не числом: правка веса не должна становиться поиском по коду -
	   это правило темы, и его сторожит набор кабинета. Бренд Google просит «medium»,
	   и у нас это `--sc-fw-medium`. */
	font-weight: var(--sc-fw-medium);
	cursor: pointer;
	transition: background var(--sc-dur-fast, 120ms) var(--sc-ease, ease);
}

.sc-gbtn:hover:not([disabled]) {
	background: #f7f8f8;
}

.sc-gbtn:focus-visible {
	/* Токены кабинета: `--sc-focus` не объявлен нигде, и кольцо кнопки держалось на запасе -
	   акцентном синем, то есть совпадало с «выбранным», а фокус в кабинете чернильный. */
	outline: var(--sc-focus-ring-w) solid var(--sc-focus-ring);
	outline-offset: 2px;
}

.sc-gbtn[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

/* Знак не сжимается: при длинной подписи на узком экране флекс отобрал бы у него
   ширину, и от логотипа осталась бы полоска. */
.sc-gbtn__ico {
	display: flex;
	flex: 0 0 18px;
	inline-size: 18px;
	block-size: 18px;
}

.sc-gbtn__t {
	white-space: nowrap;
}