/*
 * Опросник сильных сторон: /tools/strengths/.
 * Разметка — layouts/partials/tool-strengths.html, поведение — js/strengths/page.js.
 * Раскладка панелей — css/portal-tools.css (.tool-wizard*), здесь только своё.
 *
 * Файл подключается только на своей странице (partials/head.html), поэтому
 * имена классов короткие и без опаски: страница одна.
 *
 * ЦВЕТА БЕРУТСЯ ИЗ ПАЛИТРЫ ПОРТАЛА (--course-*), А НЕ ИЗ ПАЛИТРЫ GITHUB.
 *
 * Первая редакция этого файла была написана на токенах --color-* (canvas,
 * border-default, fg-muted, accent-fg). Они существуют — в css/light.css и
 * css/dark.css, — но ни один из этих файлов на портале не подключён:
 * partials/head.html грузит токены из courses-v2.css, и там всё называется
 * --course-*. Незаданная переменная без запасного значения делает объявление
 * недействительным целиком, поэтому `border: 1px solid var(--color-border-default)`
 * не давал ни цвета, ни ТОЛЩИНЫ, ни СТИЛЯ: рамки не было вовсе, заливки не
 * было вовсе, приглушённый текст печатался цветом основного.
 *
 * Отсюда и «пять одинаковых кнопок с длинным текстом» в жалобе владельца:
 * кнопки были не одинаковыми, а НЕНАРИСОВАННЫМИ — пять подписей, висящих в
 * пустоте. Замер 2026-08-18: на /tools/strengths/ из 14 подключённых таблиц
 * ни одна не объявляла --color-*; getComputedStyle на подписи ответа отдавал
 * border-style: none при `border: 1px solid` в исходнике.
 *
 * Правило на будущее: цвет на странице портала берётся только из --course-*.
 * Проверяется это не глазами, а контрастом (npm run contrast:check) — но
 * контраст молчит там, где цвета нет вообще, поэтому правило записано здесь.
 */

/* ------------------------------------------------- страница целиком */

/*
 * БЕЗ СКРИПТА СТРАНИЦА ОБЯЗАНА ПРОКРУЧИВАТЬСЯ.
 *
 * css/portal-tools.css зажимает страницу инструмента в высоту экрана
 * (`.courses-body--tool .tool-page { height: calc(100dvh …); overflow: hidden }`)
 * — для инструмента-визарда это верно: панель прокручивается сама. Но правило
 * стоит БЕЗ признака `.js`, а без скрипта панелей нет: сервер отдаёт оговорки
 * и все 96 утверждений подряд, и обрезаются они молча.
 *
 * Замер 2026-08-18 (playwright, скрипт выключен, 1440×900): список утверждений
 * начинался на 631 px и имел высоту 4743 px при документе ровно в 900 —
 * то есть читателю без скрипта доставались первые ЧЕТЫРЕ утверждения из 96 и
 * ни одной возможности domotать. Обещание «страницу можно прочитать и
 * распечатать без скрипта» было ложным.
 *
 * Признак `.js` вешает partials/head.html первым же встроенным скриптом, так
 * что мигания нет: разметка ещё не разобрана, когда класс уже стоит.
 */
html:not(.js) .courses-body--tool .tool-page--strengths {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.strengths {
  padding: 0;
}

/* ------------------------------------------------------- рельс шагов */

/* Шаг «Полосы» до конца опросника недоступен, и это не оформление: результата
   у неотвеченного опросника нет вовсе (docs/sdd/career-strengths.md,
   Acceptance criteria, п. 3). Щелчок по нему отвечает остатком, а не пустой
   панелью, — это делает page.js. */
.tool-wizard__steps a.is-locked {
  color: var(--course-subtle);
  cursor: not-allowed;
  opacity: .55;
}

/* ------------------------------------------------------- 01. оговорки */

.strengths-intro {
  max-width: 1080px;
}

.strengths-note {
  background: var(--course-panel);
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  padding: 16px 20px 18px;
}

.strengths-note .tool-section-heading h2 {
  font-size: 19px;
}

.strengths-note__lead {
  color: var(--course-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 8px 0 14px;
}

/*
 * Четыре оговорки — сетка «подпись | текст», и у каждой подписи своя иконка.
 * Иконки здесь не украшение и не «чтобы было ярче»: оговорки читают по
 * диагонали, а различаются они РОДОМ, а не длиной. Ползунки — про то, что
 * инструмент даёт; крест — про то, чем он не является; реплика — про то, что
 * текст переведён нами; люди — про то, что сравнивать не с кем. Ровно те же
 * четыре знака стоят потом в результате: люди — у ипсативности.
 */
.strengths-note__list {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  margin: 0;
}

.strengths-note__list dt {
  align-items: start;
  color: var(--course-text);
  display: flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 8px;
  line-height: 1.4;
}

.strengths-note__list dt .course-icon {
  color: var(--course-cyan);
  flex: 0 0 auto;
  margin-top: 1px;
}

.strengths-note__list dd {
  color: var(--course-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.strengths-note__source {
  align-items: start;
  border-top: 1px solid var(--course-line);
  color: var(--course-subtle);
  display: flex;
  font-size: 12px;
  gap: 8px;
  line-height: 1.5;
  margin: 16px 0 0;
  padding-top: 12px;
}

.strengths-note__source .course-icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

.strengths-nojs {
  align-items: start;
  border: 1px dashed var(--course-line-strong);
  border-radius: var(--course-radius);
  color: var(--course-muted);
  display: flex;
  font-size: 13px;
  gap: 8px;
  line-height: 1.5;
  margin: 14px 0 0;
  padding: 11px 14px;
}

.strengths-nojs .course-icon { flex: 0 0 auto; margin-top: 2px; }

.strengths-intro__actions {
  justify-content: space-between;
}

/* Кнопка «Начать опросник» появляется только со скриптом: без него отвечать
   нельзя, и вести читателя в пустую панель было бы обманом. Ссылка на все
   утверждения стоит рядом и работает всегда. */
.strengths [data-strengths-begin] { display: none; }
.strengths.is-live [data-strengths-begin] { display: inline-flex; }
.strengths.is-live .strengths-nojs { display: none; }

/* --------------------------------------------------------- 02. ответы */

/*
 * ЕДИНСТВЕННАЯ ПАНЕЛЬ, ОБЯЗАННАЯ ПОМЕЩАТЬСЯ В ЭКРАН ЦЕЛИКОМ.
 *
 * Устроена как окно: заголовок, подписи шкалы и полоса листания неподвижны,
 * прокручивается только список утверждений. Прокрутка живёт внутри списка, а
 * не у документа, — иначе на длинной странице вопросов уезжает то полоса
 * листания (и не видно, куда нажимать), то подписи шкалы (и не видно, что
 * означает кружок).
 */
.strengths-run.tool-wizard__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 12px 2px 6px;
}

.strengths-run__head {
  align-items: baseline;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.strengths-run__head h2 {
  color: var(--course-text);
  font-size: 16px;
  margin: 0;
}

.strengths-run__caveats {
  align-items: center;
  color: var(--course-muted);
  display: inline-flex;
  font-size: 12px;
  gap: 5px;
  margin-left: auto;
  text-decoration: none;
}

.strengths-run__caveats:hover { color: var(--course-cyan); }

/*
 * ПОДПИСИ ШКАЛЫ — ОДИН РАЗ НА СТРАНИЦУ, А НЕ ПО РАЗУ НА УТВЕРЖДЕНИЕ.
 *
 * Восемь полей давали сорок подписей: «Совсем не про меня» повторялось восемь
 * раз подряд, и глаз читал их заново на каждой строке. Теперь подписи стоят
 * одной строкой над списком и держатся на месте, а под ними — колонки кружков,
 * растущих к краям шкалы. Крайние и середина читаются размером, направление —
 * стрелками по краям.
 *
 * Колонки подписей и колонки кружков — ОДНА И ТА ЖЕ сетка (переменная
 * --strengths-scale ниже), поэтому подпись стоит ровно над своим кружком без
 * подгонки на глаз.
 */
.strengths-run {
  --strengths-scale: clamp(300px, 40%, 600px);
  --strengths-gap: 18px;
}

.strengths-legend {
  align-items: center;
  border-bottom: 1px solid var(--course-line-strong);
  display: grid;
  flex: 0 0 auto;
  gap: 0 var(--strengths-gap);
  grid-template-columns: minmax(0, 1fr) var(--strengths-scale);
  margin-top: 8px;
  padding: 6px 2px 8px;
}

.strengths-legend__title {
  color: var(--course-subtle);
  font-size: 11px;
  letter-spacing: .06em;
  margin: 0;
  text-transform: uppercase;
}

.strengths-legend__marks {
  display: grid;
  gap: 0 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.strengths-legend__mark {
  align-items: center;
  color: var(--course-muted);
  display: flex;
  font-size: 10.5px;
  gap: 4px;
  justify-content: center;
  line-height: 1.25;
  text-align: center;
}

.strengths-legend__mark b { font-weight: 500; }

.strengths-legend__mark--low,
.strengths-legend__mark--high {
  color: var(--course-text);
}

.strengths-legend__mark--low b,
.strengths-legend__mark--high b { font-weight: 700; }

.strengths-legend__mark--low .course-icon,
.strengths-legend__mark--high .course-icon { color: var(--course-cyan); }

.strengths-legend__mark--mid { color: var(--course-subtle); }

/* Список утверждений — единственное, что прокручивается. */
.strengths-run__page {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

/*
 * Строка утверждения — строка таблицы, а не карточка.
 *
 * Карточками (рамка, скругление, отступ, зазор) восемь полей занимали 1247 px.
 * Рамка вокруг каждого утверждения ничего не сообщала: строки и так разделены
 * — глазу нужна линия, а не коробка. Волосяная линия вместо рамки и отсутствие
 * зазора между строками — это те самые 800 px, ради которых экран ответов и
 * помещается теперь в окно.
 */
.strengths-field {
  align-items: center;
  border-bottom: 1px solid var(--course-line);
  display: grid;
  gap: 0 var(--strengths-gap);
  grid-template-columns: minmax(0, 1fr) var(--strengths-scale);
  padding: 5px 2px;
}

.strengths-field:hover { background: var(--course-surface-soft, var(--course-control)); }

.strengths-field__text-box { min-width: 0; }

.strengths-field__text {
  color: var(--course-text);
  font-size: 13.5px;
  line-height: 1.35;
  margin: 0;
}

/* Английский оригинал приглушён, но не спрятан: перевод наш и
   невалидированный, и сверить его должно быть можно не наводя мышь. */
.strengths-field__origin {
  color: var(--course-subtle);
  font-size: 11px;
  line-height: 1.3;
  margin: 2px 0 0;
}

.strengths-field__options {
  align-items: center;
  display: grid;
  gap: 0 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
}

/*
 * Переключатель настоящий (input[type=radio]) и спрятан не display:none, а
 * уводом за пределы видимости: display:none вынимает его из дерева
 * доступности вместе с фокусом, и клавиатурой шкала стала бы непроходима.
 */
.strengths-field__options input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

/*
 * Кружок ответа. Мишень — вся колонка (36 px в высоту и вся её ширина), сам
 * кружок только рисуется: крайние крупные, середина мелкая и пунктиром. Так
 * шкала читается с одного взгляда, не читая ни одной подписи, — а подписи
 * стоят строкой выше и никуда не делись.
 */
.strengths-dot {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 36px;
  width: 100%;
}

.strengths-dot::before {
  background: var(--course-control);
  border: 2px solid var(--course-line-strong);
  border-radius: 50%;
  content: "";
  height: var(--strengths-dot, 22px);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  width: var(--strengths-dot, 22px);
}

.strengths-dot--1,
.strengths-dot--5 { --strengths-dot: 28px; }

.strengths-dot--2,
.strengths-dot--4 { --strengths-dot: 22px; }

.strengths-dot--3 { --strengths-dot: 16px; }

/* Середина шкалы — тонкое бледное кольцо, а НЕ пунктир: пунктирное кольцо в
   16 px глаз читает как индикатор загрузки (проверено на снимке экрана
   2026-08-18), и человек ждёт, пока оно «догрузится». */
.strengths-dot--3::before { background: transparent; }

.strengths-dot:hover::before {
  border-color: var(--course-cyan);
  transform: scale(1.08);
}

.strengths-field__options input:checked + .strengths-dot::before {
  background: var(--course-cyan);
  border-color: var(--course-cyan);
}

.strengths-field__options input:focus-visible + .strengths-dot::before {
  outline: 2px solid var(--course-focus);
  outline-offset: 3px;
}

/* Отвеченная строка гаснет: глазу нужно видеть, где он остановился, а не
   пересчитывать кружки. */
.strengths-field.is-answered .strengths-field__text { color: var(--course-muted); }

/* Полоса листания: счёт работы, тонкая полоска заполнения и три кнопки. */
.strengths-run__bar {
  align-items: center;
  border-top: 1px solid var(--course-line);
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  padding-top: 8px;
}

.strengths-run__meter {
  background: var(--course-control);
  border-radius: 3px;
  flex: 0 0 100%;
  height: 4px;
  margin-bottom: 2px;
  overflow: hidden;
}

.strengths-run__meter i {
  background: var(--course-cyan);
  display: block;
  height: 100%;
  transition: width .18s ease;
  width: 0;
}

.strengths-run__progress {
  color: var(--course-muted);
  font-family: var(--course-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.strengths-run__bar .tool-button { min-height: 34px; }

.strengths-run__bar .tool-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.strengths-run .tool-status {
  color: var(--course-muted);
  flex: 0 0 auto;
  font-size: 12px;
  margin: 6px 0 0;
}

.strengths-run .tool-status:empty { display: none; }

/* -------------------------------------------------------- 03. полосы */

.strengths-result .tool-section-heading h2 {
  align-items: center;
  display: flex;
  gap: 8px;
}

.strengths-result .tool-section-heading h2 .course-icon { color: var(--course-cyan); }

/*
 * Результат — не список, а лестница. Слева ось «выше … ниже», справа полосы,
 * у каждой свой рельс, и рельс к низу бледнеет. Длины у рельса нет: длина
 * читалась бы как балл, а балла тут нет и быть не может. Единственное, что
 * опросник знает, — «эта полоса выше той», и говорит это порядок и
 * насыщенность, а не число.
 */
.strengths-result__body {
  display: grid;
  gap: 16px;
  grid-template-columns: 74px minmax(0, 1fr);
  margin-top: 14px;
}

/* Ось стоит липко у верха и не растягивается на всю лестницу: растянутая
   ось уводила подпись «ниже» за нижний край, то есть половина оси была не
   видна ровно тогда, когда она нужна. */
.strengths-result__axis {
  align-items: center;
  align-self: start;
  color: var(--course-subtle);
  display: flex;
  flex-direction: column;
  font-size: 10.5px;
  gap: 4px;
  letter-spacing: .06em;
  padding: 6px 0;
  position: sticky;
  top: 0;
  text-transform: uppercase;
}

.strengths-result__axis .course-icon {
  color: var(--course-cyan);
  flex: 0 0 auto;
}

.strengths-result__bands {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.strengths-band {
  background: var(--course-panel);
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  overflow: hidden;
}

.strengths-band__rail { background: var(--course-cyan); }

.strengths-band__body { padding: 11px 14px 13px; }

.strengths-band h3 {
  color: var(--course-text);
  font-size: 14px;
  margin: 0;
}

.strengths-band__note {
  align-items: center;
  color: var(--course-subtle);
  display: flex;
  font-size: 11.5px;
  gap: 5px;
  margin: 3px 0 9px;
}

.strengths-band__list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.strengths-band__list li {
  background: var(--course-control);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
}

.strengths-band__list b {
  color: var(--course-text);
  font-size: 13px;
}

.strengths-band__label {
  color: var(--course-muted);
  font-size: 11px;
}

.strengths-band__reliability {
  color: var(--course-subtle);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.strengths-band__weak {
  align-items: start;
  color: var(--course-orange);
  display: flex;
  font-size: 10.5px;
  gap: 4px;
  line-height: 1.35;
  margin-top: 3px;
}

.strengths-band__weak .course-icon { flex: 0 0 auto; margin-top: 1px; }

.strengths-result__omega {
  color: var(--course-subtle);
  font-size: 11.5px;
  line-height: 1.5;
  margin: 10px 0 0;
}

.strengths-result__ipsative {
  align-items: start;
  border-left: 3px solid var(--course-cyan);
  color: var(--course-muted);
  display: flex;
  font-size: 12.5px;
  gap: 8px;
  line-height: 1.5;
  margin: 12px 0 0;
  padding: 6px 12px;
}

.strengths-result__ipsative .course-icon { flex: 0 0 auto; margin-top: 2px; }

/*
 * ТОЛКОВАНИЕ ПОД ПОЛОСАМИ.
 *
 * Раньше страница обрывалась на полосах, и человек оставался с картинкой без
 * смысла. Блок стоит ПОД полосами, а не над ними: сначала читатель видит свой
 * результат, потом — как его читать. Рамка слева та же, что у ипсативной
 * оговорки: говорят они об одном — это мера, а не приговор.
 */
.strengths-meaning {
  border-left: 3px solid var(--course-line);
  margin: 16px 0 0;
  padding: 2px 0 2px 12px;
}

.strengths-meaning h3 {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 7px;
  margin: 0 0 6px;
}

.strengths-meaning h3 .course-icon { color: var(--course-cyan); }

.strengths-meaning h4 {
  font-size: 12.5px;
  margin: 12px 0 4px;
}

.strengths-meaning p {
  color: var(--course-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 6px;
}

.strengths-meaning__not {
  color: var(--course-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0;
  padding-left: 18px;
}

.strengths-meaning__not li { margin-bottom: 4px; }

/* Строка «полосы восстановлены из кода»: пока кода не вставляли, её нет. */
.strengths-result__restored {
  color: var(--course-cyan);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 10px 0 0;
}

.strengths-result__restored:empty { display: none; }

.strengths-result__restored-actions { margin: 8px 0 0; }

/* ------------------------------------------------------ 04. что дальше */

.strengths-next { max-width: 1080px; }

/*
 * Знак в заголовке шага стоит В СТРОКЕ с ним, а не над ним. Без этого правила
 * .course-icon (блочный по умолчанию в наборе портала) уводил стрелку на
 * отдельную строку, и заголовок читался как «04 / ↓ / Что с этим делать» —
 * то же правило и по той же причине уже стоит у результата.
 */
.strengths-next .tool-section-heading h2,
.strengths-code .tool-section-heading h2 {
  align-items: center;
  display: flex;
  gap: 8px;
}

.strengths-next .tool-section-heading h2 .course-icon,
.strengths-code .tool-section-heading h2 .course-icon { color: var(--course-cyan); }

.strengths-next__block {
  border-top: 1px solid var(--course-line);
  margin-top: 16px;
  padding-top: 14px;
}

.strengths-next__block h3 {
  font-size: 13.5px;
  margin: 0 0 6px;
}

.strengths-next__hint,
.strengths-next__cant,
.strengths-next__low-yours {
  color: var(--course-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 8px;
}

.strengths-next__low-yours b { color: var(--course-text); }

.strengths-next__empty {
  align-items: start;
  color: var(--course-muted);
  display: flex;
  font-size: 12.5px;
  gap: 8px;
  line-height: 1.5;
  margin: 0 0 12px;
}

.strengths-next__empty .course-icon { flex: 0 0 auto; margin-top: 2px; }

.strengths-next__moves {
  color: var(--course-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0;
  padding-left: 18px;
}

.strengths-next__moves li { margin-bottom: 5px; }

/*
 * КАРТОЧКА ХОДА. Колонок нет: ход читается подряд, а список компетенций под
 * ним — это ссылки, которые ищут глазами, а не читают.
 */
.strengths-lean {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.strengths-lean__item {
  background: var(--course-panel);
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  padding: 10px 13px 11px;
}

.strengths-lean__name {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.strengths-lean__text {
  color: var(--course-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 8px;
}

.strengths-lean__skills-title,
.strengths-lean__none {
  color: var(--course-subtle);
  font-size: 11.5px;
  margin: 0 0 4px;
}

.strengths-lean__skills {
  display: grid;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.strengths-lean__skills a {
  color: var(--course-cyan);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
}

.strengths-lean__skills a:hover { text-decoration: underline; }

/* ----------------------------------------------------- 05. код результата */

.strengths-code { max-width: 1080px; }

.strengths-code__facts {
  display: grid;
  gap: 2px 14px;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  margin: 0 0 4px;
}

.strengths-code__facts dt {
  align-items: center;
  color: var(--course-text);
  display: flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 7px;
}

.strengths-code__facts dt .course-icon { color: var(--course-cyan); flex: 0 0 auto; }

.strengths-code__facts dd {
  color: var(--course-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 8px;
}

.strengths-code__block {
  border-top: 1px solid var(--course-line);
  margin-top: 14px;
  padding-top: 12px;
}

.strengths-code__block h3 {
  font-size: 13.5px;
  margin: 0 0 6px;
}

.strengths-code__empty {
  color: var(--course-muted);
  font-size: 12.5px;
  margin: 0 0 8px;
}

/*
 * Код набран моноширинным и крупно: его переписывают руками и диктуют вслух.
 * user-select: all — чтобы одно нажатие выделяло его целиком, а не по группе.
 */
.strengths-code__value {
  background: var(--course-control);
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  display: inline-block;
  font-family: var(--course-mono);
  font-size: 15px;
  letter-spacing: .08em;
  margin: 0 0 8px;
  padding: 7px 12px;
  user-select: all;
}

.strengths-code__form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
}

.strengths-code__form label {
  color: var(--course-subtle);
  font-size: 11.5px;
}

.strengths-code__form input {
  background: var(--course-control);
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  color: var(--course-text);
  flex: 1 1 260px;
  font-family: var(--course-mono);
  font-size: 13px;
  letter-spacing: .06em;
  min-height: 34px;
  padding: 4px 10px;
  text-transform: uppercase;
}

.strengths-code__form input:focus-visible {
  border-color: var(--course-cyan);
  outline: none;
}

.strengths-code__typos {
  align-items: start;
  color: var(--course-subtle);
  display: flex;
  font-size: 11.5px;
  gap: 7px;
  line-height: 1.5;
  margin: 14px 0 0;
}

.strengths-code__typos .course-icon { flex: 0 0 auto; margin-top: 2px; }

/* Сравнение: три строки словами и оговорка о повторяемости. */
.strengths-compare:empty { display: none; }

.strengths-compare {
  border-left: 3px solid var(--course-cyan);
  margin: 10px 0 0;
  padding: 4px 0 4px 12px;
}

.strengths-compare h4 {
  font-size: 12.5px;
  margin: 0 0 6px;
}

.strengths-compare p {
  color: var(--course-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 5px;
}

.strengths-compare__row--up b { color: var(--course-green); }
.strengths-compare__row--down b { color: var(--course-orange); }

.strengths-compare__note {
  align-items: start;
  display: flex;
  gap: 7px;
}

.strengths-compare__note .course-icon { flex: 0 0 auto; margin-top: 2px; }

/* ---------------------------------------------- 06. все утверждения */

.strengths-pool__list {
  columns: 2;
  column-gap: 32px;
  margin: 14px 0 0;
  padding-left: 22px;
}

.strengths-pool__item {
  break-inside: avoid;
  color: var(--course-text);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.strengths-pool__text { display: block; }

.strengths-pool__origin {
  color: var(--course-subtle);
  display: block;
  font-size: 11px;
}

/*
 * ВЫСОКОЕ ОКНО — СТРОКАМ ВОЗДУХ.
 *
 * На 1440×900 после укладки в экран оставалось 125 px пустоты под последним
 * утверждением: список сжат ровно настолько, чтобы влезть в 800, а не
 * настолько, насколько удобно читать. Отдаём запас строкам — на 1280×800
 * правило не срабатывает, и там раскладка остаётся плотной.
 */
@media (min-height: 860px) {
  .strengths-field { padding: 9px 2px; }
  .strengths-field__text { font-size: 14px; }
}

/* ------------------------------------------------------ узкий экран */

/*
 * До 900 px требование «влезает в экран» не предъявляется — так устроен весь
 * портал (docs/sdd/portal-one-viewport.md, «Мобильный экран: 640 px честно»,
 * п. 4). Обещание здесь другое и тоже проверяемое: документ не прокручивается,
 * прокручивается список утверждений, а подписи шкалы и полоса листания
 * остаются на экране.
 *
 * Шкала при этом переезжает ПОД утверждение: 300 px на пять колонок рядом с
 * текстом означали бы либо текст в одно слово на строку, либо кружки в
 * четверть пальца.
 */
@media (max-width: 900px) {
  .strengths-run { --strengths-scale: 100%; }

  .strengths-legend,
  .strengths-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .strengths-field { padding: 8px 2px 10px; }

  .strengths-legend__mark { font-size: 9.5px; }

  .strengths-note__list { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .strengths-note__list dd { margin-bottom: 10px; }

  .strengths-result__body { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .strengths-result__axis {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0;
  }

  .strengths-result__axis .course-icon { flex: 0 0 auto; transform: rotate(-90deg); }

  .strengths-pool__list { columns: 1; }

  .strengths-intro__actions { flex-wrap: wrap; }

  /* Подписи «что внутри кода» и «чего в нём нет» на телефоне встают под
     заголовок: 210 px под заголовок из двух слов оставляли строке ширину в
     полтора слова. */
  .strengths-code__facts { grid-template-columns: minmax(0, 1fr); }
  .strengths-code__form label { flex: 1 0 100%; }
}

/* ---------------------------------------------------------- печать */

/*
 * На бумаге панелей нет: печатается всё подряд — оговорки, все 96 утверждений
 * и полосы, если они уже посчитаны. Тот же приём и та же причина, что у хабов
 * портала (docs/sdd/portal-one-viewport.md, «Печать»): !important нужен, чтобы
 * перебить правило браузера [hidden] { display: none }.
 */
@media print {
  .strengths .tool-wizard__panel[hidden] { display: block !important; }
  .strengths .tool-wizard__steps,
  .strengths .tool-wizard__actions,
  .strengths .strengths-run__bar { display: none !important; }
  .strengths-run.tool-wizard__panel,
  .strengths-run__page { overflow: visible; }
  .strengths-pool__list { columns: 1; }
}