/*
 * Оформление страницы «Тестировщик МОП».
 *
 * Направление: журнал наблюдения за разговором. Инструмент, а не бланк:
 * сверху узкое табло с ходом прогона, разговор идёт стенограммой с
 * хронометражом на левом поле, оценка выглядит как пульт с делениями 0–3.
 * Служебное (табло, таймкоды, баллы, ярлыки) набрано моноширинным.
 * Речь обеих сторон — антиквой, потому что стенограмму читают долго.
 * Заголовки и управление — гротеском: моноширинный заголовок читался
 * как распечатка из терминала и спорил с речью.
 *
 * Глубина вместо жирных рамок: карточка — белая на светло-серой подложке
 * с мягкой тенью. Тень есть только у того, что можно нажать или что лежит
 * поверх страницы (карточка, кнопка, пульт, таймер). На печати тени и
 * скругления снимаются — бумаге они не нужны.
 *
 * Правило цвета: цвет всегда что-то кодирует.
 *   зона балла   — от кирпичного (0) до тёмно-зелёного (3);
 *   блок шкал    — три метки групп в отчёте;
 *   ветка        — успех или провал точки выхода;
 *   петроль      — всё, что принадлежит ведущему, а не кандидату.
 * Крупные заливки не плотнее 16 %, цветом текст не набирается.
 */

:root {
  --фон:           #eaeeee;
  --фон-верх:       #f1f4f4;
  --паз:            inset 0 1px 2px rgba(18, 33, 42, .06);
  --фон-паз:       #dbe2e2;
  --карта:         #ffffff;
  --карта-тень:    #f2f5f5;
  --чернила:       #12212a;
  --полутон:       #5a6b72;
  --линия:         #ccd6d6;
  --линия-тонкая:  #e3e9e9;

  /* петроль = территория ведущего */
  --прибор:        #0e5a63;
  --прибор-фон:    #dde9ea;

  /* зоны балла: монотонная лестница «нет → сильно» */
  --зона-0:        #a03a30;
  --зона-0-фон:    #f4e3e0;
  --зона-1:        #8b6215;
  --зона-1-фон:    #f2ead7;
  --зона-2:        #2c7a5f;
  --зона-2-фон:    #dfece6;
  --зона-3:        #14563f;
  --зона-3-фон:    #d9e7e0;

  /* блоки шкал */
  --блок-клиент:   #2c4c8c;
  --блок-деньги:   #146856;
  --блок-добро:    #6e3a63;

  --шрифт-прибор: 'JetBrains Mono', 'IBM Plex Mono', 'Roboto Mono', 'DejaVu Sans Mono', Consolas, 'Courier New', monospace;
  --шрифт-речь:   Constantia, Cambria, 'Charis SIL', 'Noto Serif', 'DejaVu Serif', Georgia, serif;
  --шрифт-текст:  'Montserrat', 'Fira Sans', 'Noto Sans', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --шрифт-заголовок: 'Montserrat', 'Segoe UI Semibold', 'Segoe UI', system-ui, 'Fira Sans', 'Noto Sans', Roboto, Arial, sans-serif;

  /* тени: мягкая — лежит на подложке, подъём — поднято курсором */
  /* тени трёхслойные: волосяная линия прижимает край, короткая даёт объём,
     длинная и очень мягкая отрывает карточку от подложки. Одной длинной мало —
     край расплывается, и карточка выглядит размытой, а не поднятой */
  --тень-мягкая: 0 0 0 1px rgba(18, 33, 42, .03), 0 1px 2px rgba(18, 33, 42, .04), 0 4px 14px rgba(18, 33, 42, .05);
  --тень-подъём: 0 0 0 1px rgba(18, 33, 42, .04), 0 3px 8px rgba(18, 33, 42, .07), 0 14px 32px rgba(18, 33, 42, .10);
  --свет-прибор: 0 0 0 3px rgba(14, 90, 99, .15);

  /* кнопки и поля вынесены в переменные ради тёмной темы: там чернила
     становятся светлыми, и кнопка «фон чернилами, текст белым» пропала бы */
  --кнопка-фон:          #4a3aff;
  --кнопка-текст:        #f2f6f5;
  --кнопка-наведение:    #3d2ee0;
  --кнопка-тихая-наведение: #ffffff;
  --кнопка-ведущий:      #0e5a63;
  --кнопка-ведущий-наведение: #0b4d55;
  --поле-фон:            #ffffff;
  --линия-наведение:     #a6b6b6;
  /* подписи на тёмных панелях (шапка, табло, таймер). Панели тёмные
     в обеих темах, поэтому цвет один и тот же. Был #8ea3a4 — при мелком
     разреженном моношрифте читался как выключенный: разрядка и верхний
     регистр и без того съедают контраст, так что здесь нужен запас */
  --подпись-на-тёмном: #b7cdce;

  /* «стекло» — липкие плашки поверх содержимого: они полупрозрачны,
     поэтому цвет им нужен свой, а не карточный */
  --стекло:              rgba(255, 255, 255, .93);
  --насечка:             rgba(255, 255, 255, .75);

  --поле: clamp(16px, 4vw, 48px);
  --радиус: 10px;
  --радиус-карта: 16px;
  --радиус-мелкий: 6px;

  /* светлая грань по верхнему краю карточки: без неё белое на светло-сером
     выглядит плоской заплаткой, а не поднятым листом */
  --грань: inset 0 1px 0 rgba(255, 255, 255, .9);

  /* свечение титульного экрана — взято из шаблона «BRIX HR»
     (projects/Дизайн-система/разборы/титул-BRIX-HR.md). Это чистый декор:
     смысла не несёт, живёт только на старте и в рабочие экраны не пущено,
     иначе поспорит с цветовым кодом баллов */
  /* Второй акцент — индиго из шаблона BRIX Assessment. Взят вместо красного
     намеренно: красный в этом интерфейсе уже означает «ноль баллов» и «жёсткий
     флаг», и в роли украшения читался бы как тревога. Индиго не кодирует
     ничего, поэтому им метим движение: ход прогона, номера этапов, прогресс.
     Кнопка действия тоже индиговая. Красной она побыла недолго и была
     возвращена: красный здесь уже означает ноль баллов и жёсткий флаг,
     и «начать» с «отказать» выходили одного рода */
  --акцент:      #4a3aff;
  --акцент-фон:  #e7e5ff;
  --свечение-тепло: rgba(255, 45, 70, .16);
  --свечение-холод: rgba(74, 58, 255, .16);
}

/* ---------- тёмная тема ----------
   Правило цвета то же, что в светлой: цвет кодирует смысл, а не настроение.
   Меняются только значения переменных — зоны балла остаются лестницей
   «нет → сильно», петроль остаётся территорией ведущего, просто светлее:
   на тёмном фоне тёмно-зелёный и кирпичный сливаются в грязь.

   Фон не чёрный, а сине-серый: страницу читают долго, и чистый чёрный
   с белым текстом даёт ореол вокруг букв. Карточка светлее фона — так же,
   как в светлой теме она белее подложки, глубина остаётся на месте.

   Значения приходится писать дважды: один раз для выбранной руками тёмной,
   один — для системной. Свести в одно место без препроцессора нельзя,
   поэтому правило простое: правишь здесь — правь и ниже. */

:root[data-тема="тёмная"] {
  color-scheme: dark;

  --фон:           #050816;
  --фон-верх:       #0a0f20;
  --паз:            inset 0 1px 2px rgba(0, 0, 0, .35);
  --фон-паз:       #111827;
  --карта:         #0f172a;
  --карта-тень:    #111827;
  --чернила:       #f9fafb;
  --полутон:       #94a3b8;
  --линия:         #1f2937;
  --линия-тонкая:  #131a28;

  --прибор:        #6cb4bd;
  --прибор-фон:    #172532;

  --зона-0:        #e08b7d;
  --зона-0-фон:    #2a1e28;
  --зона-1:        #d6b269;
  --зона-1-фон:    #292524;
  --зона-2:        #6dc5a2;
  --зона-2-фон:    #17282e;
  --зона-3:        #55bd98;
  --зона-3-фон:    #13272c;

  --блок-клиент:   #8fa9e6;
  --блок-деньги:   #57bda5;
  --блок-добро:    #c396bd;

  --тень-мягкая: 0 0 0 1px rgba(0, 0, 0, .30), 0 1px 2px rgba(0, 0, 0, .30), 0 4px 14px rgba(0, 0, 0, .28);
  --тень-подъём: 0 0 0 1px rgba(0, 0, 0, .34), 0 3px 8px rgba(0, 0, 0, .34), 0 14px 32px rgba(0, 0, 0, .36);
  /* на тёмном грань не белая, а едва светлее фона: белая читалась бы как царапина */
  --грань: inset 0 1px 0 rgba(255, 255, 255, .05);
  --свет-прибор: 0 0 0 3px rgba(108, 180, 189, .22);

  --кнопка-фон:          #6d5cff;
  --кнопка-текст:        #f9fafb;
  --кнопка-наведение:    #7f70ff;
  --кнопка-тихая-наведение: #1a2230;
  /* петроль на кнопке остаётся тёмным: текст на ней белый, и светлый
     фон сделал бы его нечитаемым */
  --кнопка-ведущий:      #256f79;
  --кнопка-ведущий-наведение: #2d8590;
  --поле-фон:            #0b1220;
  --линия-наведение:     #334155;
  --стекло:              rgba(5, 8, 22, .93);
  --насечка:             rgba(0, 0, 0, .55);

  --акцент:      #8b7cff;
  --акцент-фон:  #1d1b3d;
  --свечение-тепло: rgba(255, 45, 70, .12);
  --свечение-холод: rgba(120, 105, 255, .15);
}

/* то же самое для тех, кто ничего не выбирал: берём тему из системы.
   «Светлая» выбрана руками — систему в этом случае не слушаем */
@media (prefers-color-scheme: dark) {
  :root:not([data-тема="светлая"]) {
    color-scheme: dark;

    --фон:           #050816;
    --фон-верх:       #0a0f20;
    --паз:            inset 0 1px 2px rgba(0, 0, 0, .35);
    --фон-паз:       #111827;
    --карта:         #0f172a;
    --карта-тень:    #111827;
    --чернила:       #f9fafb;
    --полутон:       #94a3b8;
    --линия:         #1f2937;
    --линия-тонкая:  #131a28;

    --прибор:        #6cb4bd;
    --прибор-фон:    #172532;

    --зона-0:        #e08b7d;
    --зона-0-фон:    #2a1e28;
    --зона-1:        #d6b269;
    --зона-1-фон:    #292524;
    --зона-2:        #6dc5a2;
    --зона-2-фон:    #17282e;
    --зона-3:        #55bd98;
    --зона-3-фон:    #13272c;

    --блок-клиент:   #8fa9e6;
    --блок-деньги:   #57bda5;
    --блок-добро:    #c396bd;

    --тень-мягкая: 0 0 0 1px rgba(0, 0, 0, .30), 0 1px 2px rgba(0, 0, 0, .30), 0 4px 14px rgba(0, 0, 0, .28);
    --тень-подъём: 0 0 0 1px rgba(0, 0, 0, .34), 0 3px 8px rgba(0, 0, 0, .34), 0 14px 32px rgba(0, 0, 0, .36);
    /* на тёмном грань не белая, а едва светлее фона: белая читалась бы как царапина */
    --грань: inset 0 1px 0 rgba(255, 255, 255, .05);
    --свет-прибор: 0 0 0 3px rgba(108, 180, 189, .22);

    --кнопка-фон:          #6d5cff;
    --кнопка-текст:        #f9fafb;
    --кнопка-наведение:    #7f70ff;
    --кнопка-тихая-наведение: #1a2230;
    --кнопка-ведущий:      #256f79;
    --кнопка-ведущий-наведение: #2d8590;
    --поле-фон:            #0b1220;
    --линия-наведение:     #334155;
    --стекло:              rgba(5, 8, 22, .93);
    --насечка:             rgba(0, 0, 0, .55);

  --акцент:      #8b7cff;
  --акцент-фон:  #1d1b3d;
  --свечение-тепло: rgba(255, 45, 70, .12);
  --свечение-холод: rgba(120, 105, 255, .15);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Подложка с еле заметным перепадом сверху вниз: плоская заливка на большой
     странице читается как незакрашенная область — особенно на экране оценки,
     который в десять тысяч точек высотой. Перепад в пару процентов даёт понять,
     что это поверхность. fixed — чтобы при прокрутке он не полз полосами */
  background: linear-gradient(180deg, var(--фон-верх) 0%, var(--фон) 45%);
  background-attachment: fixed;
  color: var(--чернила);
  font-family: var(--шрифт-текст);
  font-size: 16px;
  line-height: 1.55;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 20px; }
code { font-family: var(--шрифт-прибор); font-size: .92em; }

:focus-visible { outline: 2px solid var(--прибор); outline-offset: 2px; }
/* выделение: цвет текста задаём явно — иначе в тёмной теме светлые
   буквы ложатся на светлую подсветку и выделенное не прочитать */
::selection { background: #cbe0e1; color: #12212a; }

/* ---------- каркас ---------- */

.прибор {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 11px var(--поле);
  background: rgba(14, 27, 35, .93);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07), 0 8px 22px rgba(18, 33, 42, .10);
  color: #eaf0ef;
  font-family: var(--шрифт-прибор);
  font-size: 12px;
}

/* полоса хода прогона: тонкая линия по низу шапки. Ширину ставит
   интерфейс.js через --ход-прогона; считает не экраны, а сделанную работу */
.прибор::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--ход-прогона, 0);
  background: linear-gradient(90deg, var(--прибор), var(--акцент));
  transition: width .4s ease;
}

/* Две точки перед названием — знак из шаблона BRIX. Единственное место,
   где в шапке появляется цвет: она тёмная и до сих пор была совсем глухой */
.прибор__знак::before {
  content: '';
  display: inline-block;
  vertical-align: 2px;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: #ff2d46;
  box-shadow: 11px 0 0 -1px var(--акцент);
}

.прибор__знак {
  margin: 0;
  font-family: var(--шрифт-заголовок);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.012em;
}

.прибор__знак span {
  display: block;
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--подпись-на-тёмном);
  margin-top: 2px;
}

/* Знак — кнопка «на главную». Постоянной рамки ей не даём: шапка тёмная,
   и рамка вокруг названия читается как поле ввода. Кликабельность показываем
   курсором, подложкой под курсором и подсказкой. Правило «нажимается только
   то, что в рамке» здесь не нарушено: оно про показания табло, которые
   выглядят нажимаемыми, но не нажимаются, — тут наоборот.
   Селектор с button — у кандидата тот же знак остаётся простым абзацем */
button.прибор__знак {
  font-family: var(--шрифт-заголовок);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  /* поле под подложку и такой же отрицательный отступ: подложка появляется,
     а соседи в шапке не сдвигаются */
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: var(--радиус-мелкий);
  transition: background-color .15s ease;
}

button.прибор__знак:hover { background-color: rgba(255, 255, 255, .09); }
button.прибор__знак:active { background-color: rgba(255, 255, 255, .14); }

button.прибор__знак:focus-visible {
  outline: 2px solid var(--акцент);
  outline-offset: 2px;
}

.прибор__табло { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }

/* Показания прибора набраны просто текстом — без рамок и заливок.
   Пилюли из них делать нельзя: рядом стоят кнопки «Новый прогон» и «Архив»,
   и показание в пилюле читается как выключенная кнопка (проверено на живом
   человеке: спросили, почему «этап анкета» не нажимается). Нажимается
   в шапке только то, что в рамке. */
.табло-ячейка {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0;
}

.табло-ячейка__имя {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--подпись-на-тёмном);
}
.табло-ячейка__знач { font-size: 14px; font-variant-numeric: tabular-nums; }

/* «убрать кандидата»: в шапке нажимается только то, что в рамке —
   поэтому у крестика рамка есть, и он не путается с показанием прибора */
.табло-снять {
  margin-left: 2px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--подпись-на-тёмном);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.табло-снять:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
  color: #ffffff;
}
.табло-ячейка--тревога .табло-ячейка__знач { color: #f0b49c; }

.прибор__ходы { display: flex; gap: 8px; }

.прибор__ходы .кнопка-текст {
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 100px;
  padding: 5px 14px;
  background: rgba(255, 255, 255, .06);
  transition: background .15s, border-color .15s;
}

.прибор__ходы .кнопка-текст:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
}

.полотно {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px) var(--поле) 90px;
}

.экран { display: none; }
.экран.активный { display: block; }

.подвал {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px var(--поле) 40px;
  border-top: 1px solid var(--линия);
  font-size: 12.5px;
  color: var(--полутон);
}

/* ---------- типографика ---------- */

.надзаголовок {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--шрифт-прибор);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--полутон);
  margin: 0 0 14px;
}

/* петрольная насечка перед надзаголовком — отбивает его от заголовка */
.надзаголовок::before {
  content: '';
  flex: none;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--прибор);
}

.заголовок {
  font-family: var(--шрифт-заголовок);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 45px);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0;
}

.заголовок--средний { font-size: clamp(23px, 3.1vw, 33px); letter-spacing: -.02em; }

.лид {
  font-family: var(--шрифт-речь);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
  max-width: 62ch;
  margin: 18px 0 0;
}

.лид--узкий { font-size: 16px; max-width: 70ch; }
.лид, .раздел__пояснение, .блок-фактуры__пояснение, .оценка-кейс__финал { text-wrap: pretty; }

.сноска { font-size: 12.5px; color: var(--полутон); margin: 6px 0 0; }
.сноска--важно { color: var(--зона-0); }

.ошибка {
  font-size: 13px;
  color: var(--зона-0);
  background: var(--зона-0-фон);
  border-left: 3px solid var(--зона-0);
  border-radius: 0 var(--радиус) var(--радиус) 0;
  padding: 9px 12px;
  margin: 10px 0 0;
}

/* то же место, но с хорошей вестью */
.ошибка--удача { color: var(--зона-3); background: var(--зона-3-фон); border-left-color: var(--зона-3); }

/* ---------- управление ---------- */

.кнопка {
  font-family: var(--шрифт-текст);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 12px 22px;
  border: 1px solid var(--кнопка-фон);
  border-radius: var(--радиус);
  background-color: var(--кнопка-фон);
  /* блик по верхней кромке — на плоской заливке кнопка выглядит наклейкой,
     с бликом читается как физическая клавиша. Держим слабым: 6 % белого */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 55%);
  color: var(--кнопка-текст);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--тень-мягкая);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}

.кнопка:hover { background-color: var(--кнопка-наведение); box-shadow: var(--тень-подъём); transform: translateY(-1px); }
.кнопка:active { transform: none; box-shadow: none; }

.кнопка[disabled] {
  background-color: var(--фон-паз);
  background-image: none;
  border-color: var(--линия);
  color: var(--полутон);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* тихая кнопка светлая — блик на ней не читается, только мутит белый */
.кнопка--тихая { background-color: var(--карта); background-image: none; color: var(--чернила); border-color: var(--линия); }
.кнопка--тихая:hover { background-color: var(--кнопка-тихая-наведение); border-color: var(--чернила); }
.кнопка--узкая { padding: 9px 15px; font-size: 14px; }

/* петроль = территория ведущего: его кнопки нельзя путать с кнопками
   кандидата, тот отправляет реплики чёрной кнопкой */
.кнопка--ведущий { background-color: var(--кнопка-ведущий); border-color: var(--кнопка-ведущий); color: #f2f6f5; }
.кнопка--ведущий:hover { background-color: var(--кнопка-ведущий-наведение); border-color: var(--кнопка-ведущий-наведение); }
.кнопка--тихая.кнопка--ведущий { background-color: var(--карта); color: var(--прибор); border-color: var(--линия); }
.кнопка--тихая.кнопка--ведущий:hover { background-color: var(--прибор-фон); border-color: var(--прибор); }

.кнопка-текст {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}

.полотно .кнопка-текст { font-size: 14px; color: var(--прибор); }

/* необратимое действие не должно весить столько же, сколько соседние по
   строке «Отчёт» и «Выставить баллы»: «Удалить» стоит тише и краснеет
   только под курсором. Селектор с .полотно — чтобы не проиграть правилу выше */
.полотно .кнопка-текст--опасная { color: var(--полутон); border-bottom-color: transparent; }
.полотно .кнопка-текст--опасная:hover { color: var(--зона-0); border-bottom-color: currentColor; }

.кнопка-шаг {
  font-family: var(--шрифт-прибор);
  font-size: 15px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--линия);
  background: var(--карта);
  color: var(--чернила);
  cursor: pointer;
  border-radius: var(--радиус-мелкий);
  padding: 0;
  transition: border-color .15s, background .15s;
}

.кнопка-шаг:hover { border-color: var(--прибор); color: var(--прибор); }

input[type="text"], input[type="date"], textarea, select {
  font-family: var(--шрифт-текст);
  font-size: 15px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--линия);
  border-radius: var(--радиус);
  background: var(--поле-фон);
  color: var(--чернила);
  /* поле утоплено, карточка поднята — по одной этой разнице видно, куда
     можно писать, а что просто лежит на странице */
  box-shadow: var(--паз);
  transition: border-color .15s, box-shadow .15s;
}

input[type="text"]:hover, input[type="date"]:hover, textarea:hover, select:hover { border-color: var(--линия-наведение); }

input[type="text"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--прибор);
  box-shadow: var(--свет-прибор);   /* паз снимаем: поле «всплывает» под курсором */
}

textarea { font-family: var(--шрифт-речь); font-size: 16px; line-height: 1.45; resize: vertical; }

label { display: block; font-size: 12.5px; color: var(--полутон); margin-bottom: 4px; }

input[type="checkbox"], input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--прибор);
  flex: none;
  cursor: pointer;
}

.раскрыть > summary {
  font-family: var(--шрифт-прибор);
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  color: var(--прибор);
  padding: 6px 0;
  border-radius: var(--радиус-мелкий);
  transition: color .15s;
}

.раскрыть > summary:hover { color: var(--чернила); }

.раскрыть[open] > summary { color: var(--чернила); }

/* ---------- врезка ---------- */

.врезка {
  margin-top: 34px;
  padding: 18px 20px;
  background: var(--карта);
  border: 1px solid var(--линия);
  border-left: 4px solid var(--чернила);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
  font-size: 14px;
}

.врезка p:last-child { margin-bottom: 0; }

/* запасной путь, когда сервера нет: нужен, но глаз на него вести не надо */
.врезка__мелко {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--линия-тонкая);
  font-size: 13px;
  color: var(--полутон);
}

/* порядок действий ведущего: три шага, номера петролью — это его территория */
.врезка__шаги { margin: 12px 0 0; padding-left: 22px; }
.врезка__шаги li { margin-bottom: 8px; }
.врезка__шаги li:last-child { margin-bottom: 0; }
.врезка__шаги li::marker { color: var(--прибор); font-family: var(--шрифт-прибор); font-size: 13px; }
.врезка--ведущий { border-left-color: var(--прибор); background: var(--прибор-фон); }

.врезка__метка {
  font-family: var(--шрифт-прибор);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--прибор);
  margin-bottom: 6px;
}

/* ---------- экран старта ---------- */

/* Титульный экран собран по шаблону «BRIX HR» из дизайн-системы:
   бейджи → крупный заголовок → лид → три качества → подвал по краям.
   Свечение фона там было двумя картинками на 6,6 МБ; здесь это два
   радиальных градиента. Оно висит на #экран-старт, а не на body, потому
   что должно исчезать вместе со стартом: на брифинге и оценке цветное
   пятно за таблицами только мешает. */
#экран-старт::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 78% 4%, var(--свечение-тепло), transparent 62%),
    radial-gradient(52vw 52vw at 12% 92%, var(--свечение-холод), transparent 64%);
}

/* бейджи вместо надзаголовка: на титульном экране их два, и петрольная
   насечка перед строкой здесь была бы третьим элементом в ряду */
.бейджи {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

/* второй бейдж — индиго: пара «петроль + акцент» сразу задаёт, что в
   интерфейсе два цвета со смыслом, а не один служебный */
.бейдж--акцент { background: var(--акцент-фон); color: var(--акцент); }

.бейдж {
  font-family: var(--шрифт-прибор);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--прибор);
  background: var(--прибор-фон);
  border-radius: 100px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* три качества под лидом — «Точность · Скорость · Объективность» шаблона,
   пересказанные тем, что инструмент действительно делает */
.качества {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.качества li {
  position: relative;
  padding-left: 15px;
  font-family: var(--шрифт-текст);
  font-size: 13.5px;
  color: var(--полутон);
}

/* точка вместо галочки: список качеств, а не выполненных пунктов */
.качества li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--прибор);
}

/* Три точки разного цвета — приём с титульного слайда шаблона. Здесь это
   можно: титул к оценке отношения не имеет, шкал на нём нет, и красный
   ничего не обещает. На рабочих экранах так делать нельзя */
.качества li:nth-child(1)::before { background: #ff2d46; }
.качества li:nth-child(2)::before { background: var(--акцент); }
.качества li:nth-child(3)::before { background: var(--прибор); }

.старт {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* Montserrat шире Inter при том же кегле: на 47px строка «Здесь он продаёт
   трижды» переставала помещаться и последнее слово уезжало одно на строку */
.старт .заголовок { font-size: clamp(27px, 4.1vw, 43px); }

/* Цепочка этапов — раскладка со слайда 4 шаблона BRIX Assessment
   (projects/Дизайн-система/разборы/brix-assessment-pptx.md): карточки с
   номером в кружке, между ними стрелка. Взята за то, что показывает главное
   свойство прогона — он последовательный, и пропустить этап нельзя.
   Сетка оттуда же: карточки равной ширины, зазор 12. */
.цепочка {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  /* цепочка идёт во всю ширину полотна, под обеими колонками старта:
     в узкой текстовой колонке карточки выходили в ладонь шириной и
     рвали текст по два слова в строку */
  margin: 40px 0 0;
  padding: 0;
}

.цепочка__шаг {
  position: relative;
  padding: 16px 15px 17px;
  background: var(--карта);
  border: 1px solid var(--линия);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
}

/* стрелка в зазоре между карточками. Рисуем средствами шрифта, а не
   картинкой: масштабируется вместе с текстом и живёт в обеих темах */
.цепочка__шаг + .цепочка__шаг::before {
  content: '→';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 12px;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--шрифт-прибор);
  font-size: 13px;
  line-height: 1;
  color: var(--полутон);
}

.цепочка__верх {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
}

/* номер в кружке — из шаблона. У нас он не украшение: показывает,
   что этапы идут по порядку, а не набором на выбор */
.цепочка__номер {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--акцент-фон);
  color: var(--акцент);
  font-family: var(--шрифт-прибор);
  font-size: 11px;
  letter-spacing: -.02em;
}

.цепочка__метка {
  font-family: var(--шрифт-прибор);
  font-size: 11.5px;
  color: var(--полутон);
  letter-spacing: .02em;
}

.цепочка__имя {
  font-family: var(--шрифт-заголовок);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 6px;
}

.цепочка__текст {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--полутон);
  margin: 0;
}

.ход { list-style: none; margin: 30px 0 0; padding: 0; }

.ход li {
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--линия);
}

.ход li:last-child { border-bottom: 1px solid var(--линия); }

/* метка хода — петрольная пилюля: сколько это стоит времени или сил */
.ход__метка {
  align-self: start;
  justify-self: start;
  font-family: var(--шрифт-прибор);
  font-size: 12px;
  color: var(--прибор);
  letter-spacing: -.01em;
  background: var(--прибор-фон);
  border-radius: 100px;
  padding: 3px 11px;
  white-space: nowrap;
}

.ход__текст { font-size: 14.5px; }

.анкета {
  padding: 24px;
  background: var(--карта);
  border: 1px solid var(--линия);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-подъём), var(--грань);
  position: sticky;
  top: 76px;
}

.анкета__имя {
  font-family: var(--шрифт-прибор);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--полутон);
  margin: 0 0 14px;
}

.анкета label { margin-top: 12px; }
.анкета .кнопка { width: 100%; margin-top: 18px; }

/* ---------- брифинг ---------- */

.брифинг__шапка {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--линия);
}

.часы {
  min-width: 200px;
  padding: 16px 18px;
  background: linear-gradient(160deg, #1c303a, var(--чернила));
  color: #eaf0ef;
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-подъём);
}

.часы__цифры {
  font-family: var(--шрифт-прибор);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.часы__подпись {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--подпись-на-тёмном);
  margin: 6px 0 10px;
}

.часы__желоб { display: block; height: 5px; background: #33454c; border-radius: 100px; overflow: hidden; }
.часы__полоса { display: block; height: 100%; width: 100%; background: #7fb0a4; border-radius: 100px; transition: width 1s linear; }
.часы--мало .часы__полоса { background: #d99b6a; }

.брифинг__низ { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--линия); }
.брифинг__низ .сноска { max-width: 60ch; }

/* ---------- карточка фактуры ---------- */

.фактура { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.фактура-навигация { display: flex; gap: 8px; flex-wrap: wrap; }

.фактура-навигация__ход {
  font-family: var(--шрифт-прибор);
  font-size: 12px;
  text-decoration: none;
  color: var(--прибор);
  background: var(--карта);
  border: 1px solid var(--линия);
  border-radius: 100px;
  padding: 6px 14px;
  transition: border-color .15s, background .15s;
}

.фактура-навигация__ход:hover { border-color: var(--прибор); background: var(--прибор-фон); }

/* прыжок по ссылке не должен заводить заголовок блока под шапку */
.блок-фактуры { scroll-margin-top: 84px; }

/* каждый блок фактуры — отдельная карточка: в разговоре по ней ищут глазами */
.блок-фактуры {
  min-width: 0;
  padding: 18px 20px;
  background: var(--карта);
  border: 1px solid var(--линия);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
}

.блок-фактуры__имя + .блок-фактуры__пояснение { margin-top: 6px; }

.блок-фактуры__имя {
  font-family: var(--шрифт-прибор);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.блок-фактуры__пояснение { font-size: 13px; color: var(--полутон); margin: 0 0 14px; max-width: 70ch; }

.таблица { width: 100%; border-collapse: collapse; font-size: 14px; }
.таблица th, .таблица td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--линия-тонкая); vertical-align: top; }
.таблица th {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--полутон);
  font-weight: 400;
}
.таблица td.цифра { font-family: var(--шрифт-прибор); }
.таблица td.цифра--коротко { white-space: nowrap; }
.таблица td.примечание { color: var(--полутон); font-size: 13px; }
.таблица tbody tr { transition: background .12s; }
.таблица tbody tr:hover { background: var(--карта-тень); }
.обёртка-таблицы { overflow-x: auto; max-width: 100%; }

.строки { display: grid; gap: 10px; }

.строка-факта {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--линия-тонкая);
  font-size: 14px;
}

.строка-факта__имя { font-weight: 600; }
.строка-факта__знач { font-family: var(--шрифт-прибор); font-size: 13.5px; }
.строка-факта--запрет .строка-факта__имя { color: var(--зона-0); }
.строка-факта--запрет .строка-факта__знач { font-family: var(--шрифт-текст); font-size: 14px; }

/* в пульте ведущего та же фактура идёт без карточек — места мало */
.фактура--сжатая .блок-фактуры {
  padding: 12px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--линия-тонкая);
  border-radius: 0;
  box-shadow: none;
}

/* разбор настоящего звонка: вопрос клиента — как отвечали — что работает */
.эталон-звонка {
  padding: 14px 0;
  border-top: 1px solid var(--линия-тонкая);
}

.эталон-звонка:first-child { border-top: 0; padding-top: 4px; }
.эталон-звонка__вопрос { font-family: var(--шрифт-речь); font-size: 15.5px; margin: 0 0 6px; }
.эталон-звонка__ответ { font-size: 14px; margin: 0 0 6px; }

.эталон-звонка__что {
  font-size: 13.5px;
  color: var(--прибор);
  background: var(--прибор-фон);
  border-radius: var(--радиус-мелкий);
  padding: 8px 12px;
  margin: 0;
}

.фактура--сжатая {
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.фактура--сжатая .таблица { font-size: 12.5px; }
.фактура--сжатая .строка-факта { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.фактура--сжатая .блок-фактуры__пояснение { display: none; }

/* ---------- разговор ---------- */

.разговор__шапка { padding-bottom: 18px; border-bottom: 1px solid var(--линия); }

.ярлык-кейс {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--шрифт-прибор);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--прибор);
  background: var(--прибор-фон);
  padding: 5px 13px;
  border-radius: 100px;
  margin: 0 0 14px;
}

.шаги { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }

.шаг-метка {
  font-family: var(--шрифт-прибор);
  font-size: 12px;
  padding: 6px 13px;
  border: 1px solid var(--линия);
  background: var(--карта);
  color: var(--полутон);
  border-radius: 100px;
  cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}

.шаг-метка:hover { border-color: var(--прибор); color: var(--прибор); }
.шаг-метка.пройден { color: var(--чернила); border-color: var(--линия-наведение); }

.шаг-метка.текущий {
  background: var(--прибор);
  border-color: var(--прибор);
  color: #fff;
  box-shadow: 0 1px 8px rgba(14, 90, 99, .3);
}

.разговор__сетка {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .85fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: 26px;
  align-items: start;
}

/* хронометраж — подпись страницы: ширина куска = время на реплику */
.хронометраж { margin-bottom: 20px; }

.хронометраж__верх {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--полутон);
  margin-bottom: 6px;
}

.хронометраж__лента {
  display: flex;
  gap: 2px;
  height: 26px;
  background: var(--фон-паз);
  border-radius: 100px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(18, 33, 42, .05);
}

.хронометраж__кусок {
  background: #b3c3c2;
  min-width: 3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--шрифт-прибор);
  font-size: 10px;
  color: var(--чернила);
  overflow: hidden;
}

.хронометраж__кусок--долгий { background: #dfc194; }
.хронометраж__кусок--текущий { background: var(--прибор); color: #fff; }
.хронометраж__пусто { font-size: 12px; color: var(--полутон); font-family: var(--шрифт-текст); padding: 4px 8px; }

/* стенограмма */
.чат { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.реплика {
  display: grid;
  grid-template-columns: 8ch minmax(0, 1fr);
  gap: 14px;
  animation: появление .18s ease-out;
}

@keyframes появление { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.реплика__поле {
  font-family: var(--шрифт-прибор);
  font-size: 11px;
  color: var(--полутон);
  line-height: 1.45;
  padding-top: 3px;
  text-align: right;
}

.реплика__поле b {
  display: block;
  color: var(--чернила);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* реплики двух сторон различаются формой, а не только цветом: у клиента
   срезан левый верхний угол, у кандидата — правый, как в переписке */
.реплика__текст {
  font-family: var(--шрифт-речь);
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  padding: 13px 17px;
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
}

.реплика--клиент .реплика__текст {
  background: var(--карта);
  border: 1px solid var(--линия);
  border-left: 3px solid #9fb2b8;
  border-top-left-radius: var(--радиус-мелкий);
}

.реплика--кандидат .реплика__текст {
  background: var(--прибор-фон);
  border: 1px solid #b3cbce;
  border-left: 3px solid var(--прибор);
  border-top-right-radius: var(--радиус-мелкий);
}

.реплика--кандидат .реплика__поле b { color: var(--прибор); }

.ввод {
  margin-top: 24px;
  padding: 18px;
  background: var(--карта);
  border: 1px solid var(--линия);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
}

.ввод__верх { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ввод__верх label { margin-bottom: 6px; }

.ввод__часы {
  font-family: var(--шрифт-прибор);
  font-size: 12px;
  color: var(--полутон);
  font-variant-numeric: tabular-nums;
}

.ввод__низ { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.ввод__низ .сноска { margin: 0; }

/* пульт ведущего */
.пульт {
  position: sticky;
  top: 76px;
  padding: 20px;
  background: var(--карта);
  border: 1px solid var(--линия);
  border-top: 3px solid var(--прибор);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
  align-self: start;
}

.пульт__шапка {
  font-family: var(--шрифт-прибор);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--прибор);
  margin: 0 0 14px;
}

.пульт__блок { padding: 14px 0; border-top: 1px solid var(--линия-тонкая); }
.пульт__блок:first-of-type { border-top: 0; padding-top: 0; }
.пульт__имя { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.пульт__кнопки { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.пульт__блок .кнопка { width: 100%; }
.пульт__кнопки .кнопка { width: auto; flex: 1 1 auto; }
.пульт textarea { font-size: 14px; }

.шаг-указатель {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--шрифт-прибор);
  font-size: 12px;
  color: var(--полутон);
}

.портрет-строка { font-size: 13px; margin: 0 0 8px; }
.портрет-строка b { font-family: var(--шрифт-прибор); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--полутон); display: block; font-weight: 400; }

.ловушка-в-пульте { font-size: 13px; padding: 8px 0; border-top: 1px solid var(--линия-тонкая); }
.ловушка-в-пульте i { color: var(--полутон); font-style: normal; }

.выход-выбор {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--радиус-мелкий);
  cursor: pointer;
  transition: background .12s;
}

.выход-выбор:hover { background: var(--карта-тень); }
.выход-выбор span { display: block; }
.выход-выбор__метка { font-family: var(--шрифт-прибор); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.выход-выбор--успех .выход-выбор__метка { color: var(--зона-3); }
.выход-выбор--провал .выход-выбор__метка { color: var(--зона-0); }

/* ---------- экран оценки ---------- */

.прогресс-оценки {
  position: sticky;
  top: 70px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 11px 18px;
  background: var(--стекло);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--линия);
  border-radius: 100px;
  box-shadow: var(--тень-мягкая), var(--грань);
  font-family: var(--шрифт-прибор);
  font-size: 12px;
}

.прогресс-оценки b { font-weight: 500; }

.прогресс-оценки__желоб {
  flex: none;
  display: block;
  width: 86px;
  height: 6px;
  border-radius: 100px;
  background: var(--фон-паз);
  overflow: hidden;
}

.прогресс-оценки__полоса { display: block; height: 100%; background: linear-gradient(90deg, var(--прибор), var(--акцент)); border-radius: 100px; transition: width .25s ease; }

.приманки {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--зона-0-фон);
  border: 1px solid #e0b6ae;
  border-left: 4px solid var(--зона-0);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
  font-size: 14px;
}

.приманки__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--зона-0);
  margin: 0 0 8px;
}

.приманки ul { margin: 0; padding-left: 18px; }
.приманки li { margin-bottom: 5px; }

.оценка-кейс { margin-top: 40px; }

.оценка-кейс__шапка { padding-bottom: 14px; border-bottom: 1px solid var(--чернила); }
.оценка-кейс__имя { font-family: var(--шрифт-заголовок); font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.оценка-кейс__финал { font-size: 14px; color: var(--полутон); margin: 0; max-width: 75ch; }

.мимо-кейса { margin-top: 18px; }

.шаг-оценка { border-bottom: 1px solid var(--линия); }

.шаг-оценка > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  /* поля по бокам и вынос наружу отрицательным margin: без этого подсветка
     под курсором обрывается ровно по буквам и выглядит браком вёрстки */
  padding: 14px 12px;
  margin: 0 -12px;
  border-radius: var(--радиус);
  cursor: pointer;
  font-family: var(--шрифт-прибор);
  font-size: 14px;
  transition: background-color .15s;
}

.шаг-оценка > summary:hover { background-color: var(--фон-паз); }
.шаг-оценка[open] > summary { background-color: transparent; }

.шаг-оценка__номер { color: var(--прибор); }
.шаг-оценка__тема { font-family: var(--шрифт-текст); font-size: 15px; font-weight: 600; }
.шаг-оценка__статус { margin-left: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--полутон); }
.шаг-оценка__статус::before { content: '● '; font-size: 9px; vertical-align: 1px; color: var(--линия); }
.шаг-оценка__статус.готов { color: var(--зона-3); }
.шаг-оценка__статус.готов::before { color: var(--зона-3); }

.шаг-оценка__тело { padding: 4px 0 24px; display: grid; gap: 20px; }

.поле-оценки__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--полутон);
  margin: 0 0 8px;
}

.эталон {
  padding: 15px 18px;
  background: var(--зона-3-фон);
  border-left: 4px solid var(--зона-3);
  border-radius: 0 var(--радиус) var(--радиус) 0;
  font-family: var(--шрифт-речь);
  font-size: 15px;
}

.список-провалов, .список-ловушек { list-style: none; margin: 0; padding: 0; }

.список-провалов li { padding: 9px 0; border-top: 1px solid var(--линия-тонкая); font-size: 14px; }
.список-провалов li b { display: block; font-family: var(--шрифт-речь); font-weight: 400; }
.список-провалов li i { font-style: normal; color: var(--полутон); font-size: 13px; }

.ловушка {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid var(--линия-тонкая);
  border-radius: var(--радиус-мелкий);
  font-size: 14px;
  transition: background .12s;
}

.ловушка:hover { background: var(--карта-тень); }

.ловушка__вопрос { display: block; font-family: var(--шрифт-речь); }
.ловушка__реакция { display: block; color: var(--полутон); font-size: 13px; margin-top: 3px; }
.ловушка__флаг { font-family: var(--шрифт-прибор); font-size: 11px; color: var(--зона-0); margin-top: 4px; display: block; }

.реплики-шага { display: grid; gap: 10px; }

.реплика-шага {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  gap: 12px;
  font-size: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--линия-тонкая);
}

.реплика-шага__поле { font-family: var(--шрифт-прибор); font-size: 11px; color: var(--полутон); text-align: right; }
.реплика-шага__текст { font-family: var(--шрифт-речь); white-space: pre-wrap; }
.реплика-шага--клиент .реплика-шага__текст { color: var(--полутон); }

/* пульт делений 0–3 */
.шкала-набор {
  border: 1px solid var(--линия);
  border-radius: var(--радиус-карта);
  padding: 16px 18px;
  margin: 0 0 12px;
  background: var(--карта-тень);
}

.шкала-набор__верх { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.шкала-набор__имя { font-size: 15px; font-weight: 600; }
.шкала-набор__вес { font-family: var(--шрифт-прибор); font-size: 11px; color: var(--полутон); }
.шкала-набор__что { font-size: 13px; color: var(--полутон); margin: 0 0 12px; }

.деления { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.деление {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--линия);
  border-radius: var(--радиус);
  background: var(--поле-фон);
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}

.деление:hover { border-color: var(--линия-наведение); box-shadow: var(--тень-мягкая); transform: translateY(-1px); }
.деление__балл { font-family: var(--шрифт-прибор); font-size: 15px; line-height: 1.2; }
.деление__зона { font-family: var(--шрифт-прибор); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--полутон); }
.деление__текст { grid-column: 1 / -1; color: var(--полутон); }

.деление--0 { border-left: 3px solid var(--зона-0); }
.деление--1 { border-left: 3px solid var(--зона-1); }
.деление--2 { border-left: 3px solid var(--зона-2); }
.деление--3 { border-left: 3px solid var(--зона-3); }
.деление--нет { border-left: 3px solid var(--линия); grid-column: 1 / -1; }

.деление.выбрано { border-color: var(--чернила); box-shadow: inset 0 0 0 1px var(--чернила); transform: none; }
.деление--0.выбрано { background: var(--зона-0-фон); }
.деление--1.выбрано { background: var(--зона-1-фон); }
.деление--2.выбрано { background: var(--зона-2-фон); }
.деление--3.выбрано { background: var(--зона-3-фон); }
.деление--нет.выбрано { background: var(--карта-тень); }

.шкала-мимо {
  padding: 12px 15px;
  border: 1px dashed var(--линия);
  border-radius: var(--радиус);
  background: var(--карта-тень);
  font-size: 13px;
  color: var(--полутон);
  margin-bottom: 10px;
}

.шкала-мимо b { color: var(--чернила); }

/* флаги */
.флаги { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 24px; }

.флаги__группа { border-top: 1px solid var(--линия); padding-top: 14px; }
.флаги__имя { font-family: var(--шрифт-прибор); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 4px; }
.флаги__имя--жёсткие { color: var(--зона-0); }
.флаги__имя--мягкие { color: var(--зона-1); }
.флаги__пояснение { font-size: 12.5px; color: var(--полутон); margin: 0 0 10px; }

.флаг {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-top: 1px solid var(--линия-тонкая);
  border-radius: var(--радиус-мелкий);
  font-size: 13.5px;
  transition: background-color .15s;
}

/* флагов в списке два десятка, отмечают их мышью — подсветка строки под
   курсором показывает, в какую именно попадёшь */
.флаг:hover { background-color: var(--фон-паз); }
.флаг__что { display: block; color: var(--полутон); font-size: 12.5px; margin-top: 2px; }
.флаг--отмечен { background: var(--зона-0-фон); border-radius: var(--радиус-мелкий); padding: 8px 10px; }

.заметка { margin-top: 22px; }

/* ---------- отчёт ---------- */

.отчёт__шапка {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--чернила);
}

.отчёт__кто { font-family: var(--шрифт-заголовок); font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.025em; margin: 0; }
.отчёт__когда { font-family: var(--шрифт-прибор); font-size: 12px; color: var(--полутон); margin: 4px 0 0; }
.отчёт__ходы { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--линия); }

.решение {
  margin-top: 26px;
  padding: 24px 26px;
  border: 1px solid var(--линия);
  border-left: 6px solid var(--полутон);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
  background: var(--карта);
}

.решение__итог { font-family: var(--шрифт-заголовок); font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -.03em; margin: 0 0 10px; line-height: 1.04; }
.решение__причины { margin: 0; padding-left: 20px; font-size: 14.5px; }
.решение__причины li { margin-bottom: 4px; }

.решение--брать { border-left-color: var(--зона-3); background: var(--зона-3-фон); }
.решение--резерв { border-left-color: var(--зона-1); background: var(--зона-1-фон); }
.решение--отказать { border-left-color: var(--зона-0); background: var(--зона-0-фон); }

.раздел { margin-top: 38px; }

.раздел__имя {
  font-family: var(--шрифт-прибор);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--полутон);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--линия);
  margin: 0 0 18px;
}

.раздел__пояснение { font-size: 13px; color: var(--полутон); margin: -8px 0 18px; max-width: 72ch; }

.связка {
  padding: 17px 20px;
  border: 1px solid #ddd2b4;
  border-left: 4px solid var(--зона-1);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
  background: var(--зона-1-фон);
  margin-bottom: 12px;
}

.связка__имя { font-family: var(--шрифт-заголовок); font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 6px; }
.связка__что { font-size: 14.5px; margin: 0; }

.итог-плашка {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--линия);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
  background: var(--карта);
}

.итог-плашка__процент { font-family: var(--шрифт-прибор); font-size: 36px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.итог-плашка__знак { font-size: .5em; color: var(--полутон); margin-left: 3px; letter-spacing: 0; }

.итог-плашка__зона {
  font-family: var(--шрифт-прибор);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--карта-тень);
  color: var(--полутон);
}

/* зона итога цветом повторяет лестницу шкал: выше зона — темнее зелень */
.итог-плашка__зона--vhigh { color: var(--зона-3); background: var(--зона-3-фон); }
.итог-плашка__зона--high  { color: var(--зона-2); background: var(--зона-2-фон); }
.итог-плашка__зона--mid   { color: var(--зона-1); background: var(--зона-1-фон); }
.итог-плашка__зона--low,
.итог-плашка__зона--vlow  { color: var(--зона-0); background: var(--зона-0-фон); }
.итог-плашка__пояснение { font-size: 13px; color: var(--полутон); margin: 0; }

.блок-шкал { margin-bottom: 26px; padding-left: 12px; border-left: 3px solid var(--линия); }
.блок-шкал--клиент { border-left-color: var(--блок-клиент); }
.блок-шкал--деньги { border-left-color: var(--блок-деньги); }
.блок-шкал--добросовестность { border-left-color: var(--блок-добро); }

.блок-шкал__имя { font-family: var(--шрифт-прибор); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--полутон); margin: 0 0 12px; }
.блок-шкал--клиент .блок-шкал__имя { color: var(--блок-клиент); }
.блок-шкал--деньги .блок-шкал__имя { color: var(--блок-деньги); }
.блок-шкал--добросовестность .блок-шкал__имя { color: var(--блок-добро); }

.полоса-шкалы { padding: 12px 0; border-top: 1px solid var(--линия-тонкая); }
.полоса-шкалы:first-of-type { border-top: 0; }

.полоса-шкалы__верх { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.полоса-шкалы__имя { font-size: 15px; font-weight: 600; }
.полоса-шкалы__балл { font-family: var(--шрифт-прибор); font-size: 14px; margin-left: auto; font-variant-numeric: tabular-nums; }
.полоса-шкалы__кейсы { font-family: var(--шрифт-прибор); font-size: 11.5px; color: var(--полутон); }

.желоб {
  display: block;
  position: relative;
  height: 14px;
  background: var(--фон-паз);
  border-radius: 100px;
  /* видимое переполнение нужно насечке ворот: она выходит за края полосы,
     иначе её не отличить от белых делений внутри */
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(18, 33, 42, .05);
}

.желоб__полоса { display: block; height: 100%; background: var(--полутон); border-radius: 100px; }
.желоб__полоса--0 { background: var(--зона-0); }
.желоб__полоса--1 { background: var(--зона-1); }
.желоб__полоса--2 { background: var(--зона-2); }
.желоб__полоса--3 { background: var(--зона-3); }

.желоб__деление { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--насечка); }

/* насечка ворот: где проходит порог решения «брать» по этой шкале */
.желоб__ворота {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--чернила);
  border-radius: 2px;
}

.метка-ворота {
  font-family: var(--шрифт-прибор);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--чернила);
  background: var(--фон-паз);
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
}

.метка-ворота--мимо { color: var(--зона-0); background: var(--зона-0-фон); }

.полоса-шкалы__низ { display: flex; gap: 10px; align-items: baseline; margin-top: 7px; flex-wrap: wrap; }

.зона-метка {
  font-family: var(--шрифт-прибор);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 100px;
  white-space: nowrap;
}

/* метка зоны — заливка светлым фоном той же зоны: цифру видно издалека */
.зона-метка--0 { color: var(--зона-0); background: var(--зона-0-фон); border-color: transparent; }
.зона-метка--1 { color: var(--зона-1); background: var(--зона-1-фон); border-color: transparent; }
.зона-метка--2 { color: var(--зона-2); background: var(--зона-2-фон); border-color: transparent; }
.зона-метка--3 { color: var(--зона-3); background: var(--зона-3-фон); border-color: transparent; }
.зона-метка--нет { color: var(--полутон); background: var(--карта-тень); border-color: transparent; }

.полоса-шкалы__расшифровка { font-family: var(--шрифт-речь); font-size: 14px; margin: 0; flex: 1 1 320px; }

.список-флагов { list-style: none; margin: 0; padding: 0; }
.список-флагов li { padding: 9px 0; border-top: 1px solid var(--линия-тонкая); font-size: 14px; }
.список-флагов li b { font-weight: 600; }
.список-флагов li span { display: block; color: var(--полутон); font-size: 13px; }
.список-флагов--жёсткие li b { color: var(--зона-0); }
.список-флагов--мягкие li b { color: var(--зона-1); }

.нет-данных { font-size: 14px; color: var(--полутон); font-family: var(--шрифт-речь); }

.стенограмма { margin-bottom: 30px; }
.стенограмма__шапка { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.стенограмма__имя { font-family: var(--шрифт-заголовок); font-size: 16px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.стенограмма__итог { font-family: var(--шрифт-прибор); font-size: 11.5px; color: var(--полутон); margin-left: auto; }

.ветка-метка {
  font-family: var(--шрифт-прибор);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid currentColor;
}

.ветка-метка--успех { color: var(--зона-3); background: var(--зона-3-фон); border-color: transparent; }
.ветка-метка--провал { color: var(--зона-0); background: var(--зона-0-фон); border-color: transparent; }

.оговорка {
  margin-top: 40px;
  padding: 17px 20px;
  border: 1px solid var(--линия);
  border-left: 4px solid var(--чернила);
  border-radius: var(--радиус-карта);
  background: var(--карта);
  font-size: 13px;
}

.оговорка b { display: block; margin-bottom: 4px; }

/* ---------- архив ---------- */

.архив__ходы { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 20px; align-items: center; }

.архив-строка {
  display: grid;
  grid-template-columns: auto minmax(0, 1.6fr) 11ch auto 7ch minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 12px;
  border-bottom: 1px solid var(--линия-тонкая);
  border-radius: var(--радиус);
  font-size: 14px;
  transition: background .12s;
}

.архив-строка:hover { background: var(--карта); }
.архив-строка:first-of-type { border-top: 1px solid var(--чернила); }
.архив-строка__имя { font-weight: 600; }
.архив-строка__дата, .архив-строка__процент { font-family: var(--шрифт-прибор); font-size: 12.5px; color: var(--полутон); }
.архив-строка__связки { font-size: 12.5px; color: var(--полутон); }
.архив-строка__действия { display: flex; gap: 12px; justify-content: flex-end; }

.решение-метка {
  /* и метка решения, и статус живут в одной колонке списка — обе прижаты
     к её левому краю, иначе колонка «дрожит» от строки к строке */
  justify-self: start;
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid currentColor;
  white-space: nowrap;
  text-align: center;
}

.решение-метка--брать { color: var(--зона-3); background: var(--зона-3-фон); border-color: transparent; }
.решение-метка--резерв { color: var(--зона-1); background: var(--зона-1-фон); border-color: transparent; }
.решение-метка--отказать { color: var(--зона-0); background: var(--зона-0-фон); border-color: transparent; }

/* Пустой кабинет по раскладке шаблона BRIX Assessment: значок в кружке,
   имя состояния, пояснение и шаги с номерами. Пунктирная рамка осталась —
   она отличает «здесь пока пусто» от карточки с данными */
.пусто {
  padding: 38px 24px 30px;
  text-align: center;
  color: var(--полутон);
  background: var(--карта-тень);
  border: 1px dashed var(--линия);
  border-radius: var(--радиус-карта);
}

.пусто__значок {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--прибор-фон);
  color: var(--прибор);
}

.пусто__значок svg { width: 22px; height: 22px; }

.пусто__имя {
  font-family: var(--шрифт-заголовок);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--чернила);
  margin: 0 0 5px;
}

.пусто__текст {
  font-family: var(--шрифт-речь);
  font-size: 15px;
  margin: 0 auto;
  max-width: 52ch;
}

/* шаги «что делать дальше» — нумерованные строки со слайда 3 шаблона.
   Слева направо не разложить: текст разной длины, поэтому столбиком,
   но с той же парой «номер в кружке + заголовок с пояснением» */
.шаги-пусто {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 24px auto 0;
  padding: 0;
  max-width: 62ch;
  text-align: left;
}

.шаги-пусто li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 13px;
  background: var(--карта);
  /* обычная линия, а не тонкая: на тёмной теме карточка шага лежит на
     почти таком же тёмном фоне пустого блока и без внятной рамки пропадает */
  border: 1px solid var(--линия);
  border-radius: var(--радиус);
}

.шаги-пусто__номер {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--прибор-фон);
  color: var(--прибор);
  font-family: var(--шрифт-прибор);
  font-size: 11px;
}

.шаги-пусто__текст { font-size: 13.5px; line-height: 1.5; }
.шаги-пусто__текст b { color: var(--чернила); }

.сравнение { margin-top: 34px; overflow-x: auto; }
.сравнение table { min-width: 560px; }
.сравнение .лучший { font-weight: 600; }

/* ---------- адаптив ---------- */

@media (max-width: 980px) {
  .старт, .брифинг__шапка, .разговор__сетка { grid-template-columns: minmax(0, 1fr); }
  .анкета, .пульт { position: static; }
  .часы { max-width: 260px; }
  .прибор { position: relative; }   /* не sticky, но полоса хода остаётся при шапке */
  .прогресс-оценки { position: static; }
  .деления { grid-template-columns: minmax(0, 1fr); }
  .разговор__лево { order: 1; }
  .пульт { order: 2; }
}

@media (max-width: 660px) {
  body { font-size: 15.5px; }

  /* На узком экране панель у правого края перестаёт быть безобидной: она
     ложится ровно на поле, куда кандидат пишет реплику. Уводим её вниз,
     разворачиваем в строку и ужимаем — там под ней край карточки, а не ввод */
  .уголок {
    top: auto;
    bottom: 12px;
    right: 12px;
    transform: none;
    flex-direction: row;
  }
  .уголок__кнопка { width: 34px; height: 34px; }

  /* Панель всё равно висит над содержимым — на узком экране деваться ей
     некуда. Приглушаем, пока к ней не тянутся: под полупрозрачной видно,
     что там внизу, а по касанию она возвращается в полную силу */
  .уголок { opacity: .55; transition: opacity .15s; }
  .уголок:hover, .уголок:focus-within { opacity: 1; }
  .прибор { gap: 10px 12px; padding: 10px var(--поле); }
  .прибор__табло { gap: 14px; margin-left: 0; }
  .табло-ячейка__знач { font-size: 12.5px; }
  .часы { max-width: none; }
  .реплика { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .реплика__поле { text-align: left; }
  .реплика__поле b { display: inline; margin-right: 8px; }
  .реплика-шага { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .реплика-шага__поле { text-align: left; }
  .строка-факта { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ход li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .архив-строка { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .архив-строка__дата, .архив-строка__связки { display: none; }
  .архив-строка__действия { grid-column: 2 / -1; justify-content: flex-start; }
  .отчёт__ходы .кнопка, .архив__ходы .кнопка { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

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

@media print {
  /* фоновое свечение титульного экрана на бумагу не идёт */
  #экран-старт::before { display: none; }

  @page { margin: 13mm; }

  /* на бумаге тема всегда светлая: тёмный отчёт съест картридж, а зоны
     балла, рассчитанные на светящийся экран, на бумаге выцветают */
  :root, :root[data-тема="тёмная"] {
    color-scheme: light;
    --фон: #ffffff;
    --фон-верх: #ffffff;
    --паз:      none;
    --фон-паз: #eef1f1;
    --карта: #ffffff;
    --карта-тень: #f2f5f5;
    --чернила: #12212a;
    --полутон: #5a6b72;
    --линия: #ccd6d6;
    --линия-тонкая: #e3e9e9;
    --прибор: #0e5a63;
    --прибор-фон: #dde9ea;
    --зона-0: #a03a30; --зона-0-фон: #f4e3e0;
    --зона-1: #8b6215; --зона-1-фон: #f2ead7;
    --зона-2: #2c7a5f; --зона-2-фон: #dfece6;
    --зона-3: #14563f; --зона-3-фон: #d9e7e0;
    --блок-клиент: #2c4c8c;
    --блок-деньги: #146856;
    --блок-добро: #6e3a63;
    --кнопка-фон: #12212a;
    --кнопка-текст: #f2f6f5;
    --кнопка-ведущий: #0e5a63;
    --поле-фон: #ffffff;
    --стекло: #ffffff;
    --насечка: rgba(255, 255, 255, .75);
  }

  body { background: #fff; font-size: 10.5pt; }
  .прибор, .подвал, .без-печати { display: none !important; }

  /* на бумаге тени бессмысленны, а скругления съедают линии рамок */
  * { box-shadow: none !important; }
  .решение, .связка, .итог-плашка, .врезка, .оговорка, .блок-фактуры, .приманки { border-radius: 2pt; }
  .полотно { padding: 0; max-width: none; }
  .экран { display: none !important; }
  .экран.активный { display: block !important; }

  .раздел { margin-top: 16pt; break-inside: avoid; }
  .решение, .связка, .итог-плашка, .полоса-шкалы, .блок-шкал, .оговорка, .стенограмма__шапка { break-inside: avoid; }
  .реплика-шага, .список-флагов li { break-inside: avoid; }
  .заголовок, .раздел__имя { break-after: avoid; }

  .желоб { border: 1px solid var(--линия); height: 11pt; }
  .желоб__ворота { background: #000; }
  .прибор::after { display: none; }
  .хронометраж__лента { border: 1px solid var(--линия); height: 16pt; }
  .отчёт__шапка { border-bottom-width: 1.5pt; }
  .стенограмма { font-size: 9.5pt; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- решение «не оценено» ----------
   Незаполненный бланк — это не вердикт кандидату, поэтому цвета отказа
   у него нет: нейтральная серая полоса и явная пометка «черновик»,
   которая видна и на бумаге. */

.решение--не-оценено { border-left-color: var(--полутон); background: var(--карта-тень); }
.решение--не-оценено .решение__итог { color: var(--полутон); }
.решение-метка--не-оценено { color: var(--полутон); }

.черновик-метка {
  display: inline-block;
  font-family: var(--шрифт-прибор);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--полутон);
  border: 1px dashed var(--полутон);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}

@media print {
  .черновик-метка { border-style: dashed; }
  .решение--не-оценено { border-left-width: 5pt; }
}

/* ---------- «Как он говорил»: счётные наблюдения ----------
   Территория ведущего (петроль), но не тревога: это не флаги и не баллы.
   Цифры набраны приборным шрифтом и стоят без заливок — заливка рядом
   с делениями шкал читалась бы как ещё один орган управления. */

.речь {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--карта);
  border: 1px solid var(--линия);
  border-left: 4px solid var(--прибор);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
  font-size: 14px;
}

.речь__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--прибор);
  margin: 0 0 12px;
}

.речь__ряд {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--линия-тонкая);
}

.речь__пункт { display: flex; flex-direction: column; gap: 2px; }

.речь__число {
  font-family: var(--шрифт-прибор);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--чернила);
  line-height: 1.1;
}

.речь__подпись {
  font-size: 11.5px;
  color: var(--полутон);
  max-width: 22ch;
}

.речь__выводы { margin: 12px 0 8px; padding: 0; list-style: none; }

.речь__вывод {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
  max-width: 88ch;
}

/* точка вместо маркера: список коротких, но важных строк */
.речь__вывод::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--зона-1);
}

@media print {
  .речь { box-shadow: none; break-inside: avoid; }
}

/* ---------- черновик разметки ----------
   Предложение Claude стоит внутри набора шкалы, но ниже делений и заметно
   тише их: это подсказка, а не орган управления. Единственное активное
   место — кнопка «поставить», всё остальное только читается. */

.черновик-оценки {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--прибор-фон);
  border: 1px solid #b9d0d2;
  border-left: 4px solid var(--прибор);
  border-radius: var(--радиус-карта);
  font-size: 14px;
}

.черновик-оценки__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--прибор);
  margin: 0 0 8px;
}

.черновик-оценки__что { margin: 0 0 12px; max-width: 88ch; }

.черновик-оценки__кнопки {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.черновик-оценки__кнопки .сноска { margin: 0; max-width: 60ch; }

.совет {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--линия);
  font-size: 13px;
}

.совет__метка {
  font-family: var(--шрифт-прибор);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--полутон);
}

.совет__балл {
  font-family: var(--шрифт-прибор);
  font-size: 15px;
  color: var(--прибор);
}

.совет__почему { color: var(--полутон); flex: 1 1 24ch; }

/* цитата — единственное место, где звучит сам кандидат: набираем её речью */
.совет__цитата {
  flex: 1 1 100%;
  font-family: var(--шрифт-речь);
  font-size: 14px;
  color: var(--чернила);
  border-left: 2px solid var(--линия);
  padding-left: 10px;
  margin: 2px 0 0;
}

.совет__итог {
  font-size: 12px;
  color: var(--зона-2);
}

.совет--совпал .совет__балл { color: var(--зона-2); }

@media print {
  .черновик-оценки, .совет { display: none; }
}

/* ---------- запись голоса (кандидатская часть) ----------
   Панель стоит внутри формы ввода, между текстом и кнопкой отправки: она
   часть одного действия — сказать клиенту, а не отдельная затея. Цвет
   петрольный, потому что запись слушает руководитель, а не клиент. */

.голос {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--прибор-фон);
  border: 1px solid #b9d0d2;
  border-radius: var(--радиус-карта);
}

.голос__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--прибор);
  margin: 0 0 6px;
}

.голос__что { margin: 0 0 12px; font-size: 13.5px; max-width: 70ch; }

.голос__пульт {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* часы записи набраны крупно и приборным шрифтом: во время записи это
   единственное, за чем следит глаз */
.голос__часы {
  font-family: var(--шрифт-прибор);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--прибор);
}

.голос__плеер { height: 34px; max-width: 100%; }

.голос__низ { margin: 10px 0 0; }

.ссылка-кнопка {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--полутон);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ссылка-кнопка:hover { color: var(--чернила); }

/* запись у реплики на странице руководителя */
.реплика-шага__голос { display: block; margin-top: 6px; }
.реплика-шага__голос audio { height: 32px; max-width: 320px; vertical-align: middle; }
.реплика-шага__нет-голоса { font-size: 12px; color: var(--зона-1); }

/* ---------- «что умеет и чему учить» ----------
   Раздел отчёта, который не про баллы, а про обучение. Два столбца
   (умеет / учить) и выделенный первый шаг обучения над ними. Цитата
   набрана речью, как везде, где звучит сам кандидат. */

.главное {
  margin-bottom: 20px;
  padding: 16px 18px;
  background: var(--зона-1-фон);
  border-left: 4px solid var(--зона-1);
  border-radius: var(--радиус-карта);
}

.главное__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--зона-1);
  margin: 0 0 8px;
}

.главное__что { margin: 0 0 8px; max-width: 80ch; }

.главное__цитата,
.разбор__цитата {
  display: block;
  font-family: var(--шрифт-речь);
  font-size: 14px;
  border-left: 2px solid var(--линия);
  padding-left: 10px;
  margin: 0 0 8px;
  max-width: 80ch;
}

.главное__как { margin: 0 0 4px; max-width: 80ch; }

.разбор {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 28px;
}

.разбор__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--зона-3);
  margin: 0 0 10px;
}

.разбор__имя--слабое { color: var(--зона-1); }

.разбор__список { margin: 0; padding: 0; list-style: none; }

.разбор__пункт {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--линия-тонкая);
}

.разбор__пункт:last-child { border-bottom: 0; }

.разбор__что { display: block; margin-bottom: 5px; }

/* альтернативная фраза — то, ради чего этот раздел и нужен:
   не «работай над возражениями», а что именно сказать */
.разбор__как { display: block; font-size: 13.5px; color: var(--полутон); }
.разбор__как b { color: var(--чернила); font-weight: 600; }

@media print {
  .главное { break-inside: avoid; }
  .разбор__пункт { break-inside: avoid; }
}

/* ---------- кабинет ----------
   Главный экран нанимающей стороны. Правило страницы то же: цвет кодирует
   смысл, крупных заливок нет. Цветом здесь помечены только два состояния —
   «ждёт ваших баллов» (работа стоит из-за нас) и «берём». */

.кабинет__шапка {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.кабинет__кнопки { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- поток найма ----------
   Показания стоят в том порядке, в котором человек проходит найм:
   позвали → проходят → ждут баллов → решено. Стрелки между ними — не
   украшение: они говорят, что это одна очередь, а не четыре независимых
   счётчика. Крупная цифра только там, где нужно ваше действие; ступень
   с нулём приглушена, потому что ноль здесь — это «пусто», а не новость. */

.поток {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 26px;
  padding: 18px 22px;
  background: var(--карта);
  border: 1px solid var(--линия);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-мягкая), var(--грань);
}

.поток__ступень { display: flex; align-items: baseline; gap: 9px; }

.поток__число {
  font-family: var(--шрифт-прибор);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--чернила);
}

.поток__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--полутон);
}

.поток__ступень--пусто .поток__число { color: var(--полутон); opacity: .55; }
.поток__ступень--пусто .поток__имя { opacity: .7; }

/* единственное место, где кабинет повышает голос: работа без баллов
   держит решение по человеку и ждёт именно вас */
.поток__ступень--дело .поток__число { color: var(--зона-1); }
.поток__ступень--дело .поток__имя { color: var(--зона-1); }

.поток__стрелка {
  align-self: center;
  width: 22px;
  height: 1px;
  background: var(--линия);
  position: relative;
}

.поток__стрелка::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--линия);
  border-right: 1px solid var(--линия);
  transform: rotate(45deg);
}

/* решения — не ступень потока, а его расшифровка: тем же кеглем, что подписи */
.поток__решения {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--полутон);
}

.поток__решения b { font-family: var(--шрифт-прибор); font-weight: 400; color: var(--чернила); }

@media (max-width: 560px) {
  .поток { gap: 10px 16px; }
  .поток__стрелка { display: none; }
}

/* «что требует внимания» — список дел, поэтому стоит выше всех разделов
   и набран крупнее сносок */
.дела {
  margin-bottom: 30px;
  padding: 16px 20px;
  background: var(--зона-1-фон);
  border-left: 4px solid var(--зона-1);
  border-radius: var(--радиус-карта);
}

.дела__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--зона-1);
  margin: 0 0 10px;
}

/* дело и его объяснение — две строки разного веса: первую читают каждый
   день, вторую один раз. Маркеры-точки убраны: список коротких дел
   и без них читается списком, а точки добавляли шум слева */
.дела ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.дела li { display: grid; gap: 2px; max-width: 88ch; }

.дела__дело { font-size: 15px; }
.дела__дело b { font-family: var(--шрифт-прибор); font-weight: 500; }
.дела__зачем { font-size: 13px; color: var(--полутон); }

.воронка { display: grid; gap: 8px; }

.воронка__ступень {
  display: grid;
  grid-template-columns: 15em 1fr 3em 3.5em;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

.воронка__желоб {
  height: 12px;
  background: var(--фон-паз);
  border-radius: 3px;
  overflow: hidden;
}

.воронка__полоса {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--прибор), var(--акцент));
  transition: width .3s ease;
}

.воронка__число,
.воронка__доля {
  font-family: var(--шрифт-прибор);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.воронка__доля { color: var(--полутон); font-size: 12px; }

.сводшкалы { display: grid; gap: 7px; }

.сводшкалы__строка {
  display: grid;
  grid-template-columns: 15em 1fr 3em 4.5em;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

.сводшкалы__желоб {
  height: 10px;
  background: var(--фон-паз);
  border-radius: 3px;
  overflow: hidden;
}

.сводшкалы__полоса { display: block; height: 100%; background: var(--полутон); }
/* id зон приходят из рубрики и они латинские: none / weak / ok / strong */
.сводшкалы__полоса--none { background: var(--зона-0); }
.сводшкалы__полоса--weak { background: var(--зона-1); }
.сводшкалы__полоса--ok { background: var(--зона-2); }
.сводшкалы__полоса--strong { background: var(--зона-3); }

.сводшкалы__балл {
  font-family: var(--шрифт-прибор);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.сводшкалы__людей { font-size: 12px; color: var(--полутон); }

.люди { display: grid; }

.люди__строка {
  display: grid;
  grid-template-columns: minmax(11em, 1.4fr) 6.5em 9em 4.5em minmax(11em, 1.6fr) auto;
  align-items: center;
  gap: 12px;
  /* строку читают глазами по горизонтали, поэтому подсветка идёт во всю
     ширину списка, а не только по тексту: так не теряешь строку на полпути */
  padding: 12px 12px;
  margin: 0 -12px;
  border-radius: var(--радиус);
  border-bottom: 1px solid var(--линия-тонкая);
  font-size: 13.5px;
  transition: background .12s;
}

.люди__строка:hover { background: var(--карта-тень); }

.люди__имя { font-weight: 600; font-size: 14.5px; }

/* почта под именем: второй строкой, чтобы не растягивать колонку */
.люди__почта {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--полутон);
  text-decoration: none;
  word-break: break-all;
}

.люди__почта:hover { color: var(--прибор); text-decoration: underline; }

.люди__проверка {
  margin-left: 6px;
  font-family: var(--шрифт-прибор);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--полутон);
  font-weight: 400;
}

.люди__дата,
.люди__хвост { color: var(--полутон); }

.люди__процент {
  font-size: 14px;
  color: var(--чернила);

  font-family: var(--шрифт-прибор);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* прочерк — это «нет данных», а не результат: он не должен спорить
   с настоящими процентами в той же колонке */
.люди__процент--нет { color: var(--полутон); opacity: .6; }

.люди__флаг { display: block; color: var(--зона-0); font-weight: 600; }

.люди__действия { display: flex; gap: 12px; justify-content: flex-end; }

/* статус — не решение: набираем его тише, чем метку решения, чтобы
   «ждёт оценки» не читалось как вердикт */
.статус-метка {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--шрифт-прибор);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--полутон);
}

/* точка перед статусом: ряд точек читается сверху вниз одним взглядом,
   а пилюля остаётся только у решения — вердикт в списке один */
.статус-метка::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: .75;
}

.статус-метка--ждёт-оценки { color: var(--зона-1); }
.статус-метка--проходит { color: var(--прибор); }

@media (max-width: 800px) {
  .воронка__ступень,
  .сводшкалы__строка { grid-template-columns: 9em 1fr 3em 3.5em; }
  .люди__строка { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .люди__действия { justify-content: flex-start; }
}

/* ---------- связь с сервером ----------
   Подключение стоит первым блоком кабинета: пока сервера нет, всё
   остальное на экране может оказаться неполным. Когда подключён — блок
   становится тихим и уходит на второй план. */

.связь {
  margin-bottom: 26px;
  padding: 16px 20px;
  background: var(--прибор-фон);
  border: 1px solid #b9d0d2;
  border-left: 4px solid var(--прибор);
  border-radius: var(--радиус-карта);
  font-size: 14px;
}

.связь--готова {
  background: var(--карта);
  border-color: var(--линия);
  border-left-color: var(--зона-2);
}

.связь__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--прибор);
  margin: 0 0 8px;
}

.связь--готова .связь__имя { color: var(--зона-2); }

.связь__что { margin: 0 0 12px; max-width: 88ch; }
.связь__беда { color: var(--зона-0); }

.связь__форма {
  display: grid;
  grid-template-columns: max-content minmax(200px, 26em);
  align-items: center;
  gap: 8px 12px;
}

.связь__форма label { font-size: 13px; color: var(--полутон); }

.связь__форма input {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--линия);
  border-radius: var(--радиус);
  background: var(--карта);
  color: var(--чернила);
}

.связь__форма input:focus { outline: none; border-color: var(--прибор); box-shadow: var(--свет-прибор); }
.связь__форма button { grid-column: 2; justify-self: start; }

.связь__кнопки { display: flex; gap: 10px; flex-wrap: wrap; }

/* приглашение кандидата: выдача ссылки прямо из кабинета */
.приглашение {
  margin-bottom: 26px;
  padding: 16px 20px;
  background: var(--карта);
  border: 1px solid var(--линия);
  border-left: 4px solid var(--прибор);
  border-radius: var(--радиус-карта);
  font-size: 14px;
}

/* сервер не подключён: возможность видна, но пока не работает */
.приглашение--спит {
  border-left-color: var(--линия);
  color: var(--полутон);
}

.приглашение--спит .приглашение__имя { color: var(--полутон); }

.приглашение__имя {
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--прибор);
  margin: 0 0 8px;
}

.приглашение__что { margin: 0 0 12px; max-width: 88ch; }

.приглашение__форма {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.приглашение__форма input[type="text"],
.приглашение__форма input[type="email"] {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  width: 12em;
  border: 1px solid var(--линия);
  border-radius: var(--радиус);
  background: var(--карта);
  color: var(--чернила);
}

/* адрес почты длиннее имени — поле шире, иначе конец не виден */
.приглашение__форма input[type="email"] { width: 16em; }

.приглашение__форма input[type="text"]:focus,
.приглашение__форма input[type="email"]:focus {
  outline: none;
  border-color: var(--прибор);
  box-shadow: var(--свет-прибор);
}

/* пояснение к проверочному прогону длинное — ему нужна вся строка */
.приглашение__проверка {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  color: var(--полутон);
}

.приглашение__итог {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--прибор-фон);
  border-radius: var(--радиус);
}

.приглашение__кто { margin: 0 0 8px; }

.приглашение__ссылка { margin: 0 0 10px; }

/* ссылку читают глазами и диктуют голосом — нужен крупный ровный шрифт
   и перенос по знакам, чтобы она не уезжала за край на узком экране */
.приглашение__ссылка code {
  font-family: var(--шрифт-прибор);
  font-size: 14px;
  word-break: break-all;
  color: var(--чернила);
}

.приглашение__кнопки { display: flex; gap: 10px; flex-wrap: wrap; }

/* готовое письмо: текст правится на месте, поэтому это поле, а не абзац */
.письмо {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--линия);
}

.письмо__имя {
  margin: 0 0 4px;
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--прибор);
}

.письмо__что { margin: 0 0 8px; font-size: 13px; color: var(--полутон); max-width: 78ch; }

.письмо textarea {
  font-family: var(--шрифт-текст);
  font-size: 14px;
  line-height: 1.5;
  min-height: 168px;
}

.письмо__службы { margin: 10px 0 0; font-size: 13px; color: var(--полутон); }
.письмо__точка { margin: 0 8px; color: var(--полутон); }

.приглашение__памятка {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--полутон);
  max-width: 78ch;
}

/* ---------- панель у края экрана ----------
   Две кнопки, которые нужны редко, но должны быть под рукой на любом
   экране: тема и настройки. Держатся у правого края по центру — там их
   не заденешь, работая с формой, и они не спорят с шапкой.
   На печати панели нет: она в разметке помечена как «без-печати». */

.уголок {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: rgba(24, 34, 41, .92);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

.уголок__кнопка {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #dbe6e6;
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}

.уголок__кнопка:hover { background: rgba(255, 255, 255, .16); color: #ffffff; transform: translateY(-1px); }
.уголок__кнопка:active { transform: none; }
.уголок__кнопка:focus-visible { outline: 2px solid #7fc4cc; outline-offset: 2px; }
.уголок__кнопка svg { width: 19px; height: 19px; display: block; }

/* на узком экране панель уезжает вниз-вправо и ложится в строку:
   по центру правого края она перекрывала бы содержимое */
@media (max-width: 720px) {
  .уголок {
    top: auto;
    bottom: 12px;
    right: 12px;
    transform: none;
    flex-direction: row;
  }
}

/* ---------- окно настроек ----------
   Здесь живёт то, что настраивают раз и надолго: тема и связь с сервером.
   Форма подключения именно здесь, а не в кабинете: она нужна раз в жизни
   браузера, а место на первом экране занимала постоянно. */

.окно {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 6vh, 64px) 16px;
  background: rgba(9, 16, 20, .5);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}

.окно[hidden] { display: none; }

.окно__карта {
  width: min(560px, 100%);
  background: var(--карта);
  color: var(--чернила);
  border: 1px solid var(--линия);
  border-radius: var(--радиус-карта);
  box-shadow: var(--тень-подъём), var(--грань);
  padding: 22px 24px 24px;
}

.окно__шапка {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.окно__имя { margin: 0; font-family: var(--шрифт-заголовок); font-size: 20px; font-weight: 600; }

.окно__закрыть {
  font: inherit;
  font-size: 13px;
  color: var(--полутон);
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
}

.окно__закрыть:hover { color: var(--чернила); }

.окно__раздел { margin-top: 22px; }
.окно__раздел:first-of-type { margin-top: 14px; }

.окно__имя-раздела {
  margin: 0 0 6px;
  font-family: var(--шрифт-прибор);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--прибор);
}

.окно__что { margin: 0 0 10px; font-size: 13.5px; color: var(--полутон); max-width: 60ch; }

/* переключатель темы: три положения, выбранное залито — видно без подписи */
.выбор-темы { display: flex; gap: 8px; flex-wrap: wrap; }

.выбор-темы__кнопка {
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid var(--линия);
  border-radius: var(--радиус);
  background: var(--карта);
  color: var(--чернила);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.выбор-темы__кнопка:hover { border-color: var(--линия-наведение); }

.выбор-темы__кнопка[aria-pressed="true"] {
  background: var(--прибор-фон);
  border-color: var(--прибор);
  color: var(--прибор);
  font-weight: 600;
}

.окно__форма { display: grid; gap: 8px; }
.окно__форма label { margin-bottom: 0; }
.окно__кнопки { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.окно__состояние {
  margin: 0 0 10px;
  font-size: 13.5px;
}

.окно__состояние b { color: var(--зона-2); }
.окно__состояние--нет b { color: var(--полутон); }

/* отметка «сохранено» на экране оценки: служебная строка, не сообщение */
.связь-метка {
  margin: 8px 0 0;
  font-family: var(--шрифт-прибор);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--полутон);
}

.связь-метка--тревога { color: var(--зона-0); }

@media (max-width: 760px) {
  .цепочка { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* стрелка переезжает из зазора сбоку в зазор сверху и смотрит вниз */
  .цепочка__шаг + .цепочка__шаг::before {
    content: '↓';
    left: 50%;
    top: -11px;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 700px) {
  .связь__форма { grid-template-columns: 1fr; }
  .связь__форма button { grid-column: 1; }
}