/* Оформление личного кабинета платформы найма.
   Взято из теста «Профиль продавца» ради общего языка, дополнено тем, что
   нужно рабочему экрану, а не документу: таблица кандидатов, окна, сводка.

   Исходное описание направления:
   Направление взято из мира заказчика: Adonis печатает и брендирует одежду,
   поэтому отчёт устроен как лист калибровки печати — измерительные линейки,
   моноширинные цифры, приводочные метки по краю. Палитра шла из CMYK;
   21.08.2026 пурпур заменён зелёным по просьбе заказчика, а всё, что
   означало тревогу — отказ, удаление, «требует уточнения», — отделено
   в свой красный: зелёный «Отказ» читался бы как «прошёл».

   Правило цвета (общее для наших инструментов): цветом кодируется смысл,
   крупные заливки не плотнее 16 %, текст цветом не набирается. */

:root {
  --бумага:      #F2F1ED;
  --бумага-тень: #E7E5DE;
  --чернила:     #14161C;
  --чернила-2:   #4C505C;
  --линия:       #CFCCC3;
  --зелень:      #1E7A3C;   /* акцент: значение, действие */
  --красный:     #C0392B;   /* тревога: отказ, удаление, «уточнить» */
  --розовый:     #C6117E;   /* метка раздела «Сравнить» в боковом меню */
  --голубой:     #0B6A85;   /* метка раздела «Архив»; циан, притемнённый под подпись */
  --циан:        #0E7C99;   /* второй голос: пояснения, ссылки */
  --охра:        #B57D00;   /* внимание, оговорки */
  --карточка:    #FFFFFF;   /* бумага под отчётом, полями и ответами */
  --карточка-ярче: #FAFAF8; /* та же карточка под курсором */
  --вердикт-циан: rgba(14,124,153,0.06);
  --вердикт-охра: rgba(181,125,0,0.08);
  --вердикт-зелень: rgba(30,122,60,0.07);
  --вердикт-красный: rgba(192,57,43,0.07);
  --значение-фон: rgba(20,22,28,0.10);
  --поле: clamp(1.25rem, 4vw, 3rem);
  color-scheme: light;
  --шрифт: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --моно: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--бумага);
  color: var(--чернила);
  font-family: var(--шрифт);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0.2em 0 0.5em;
}

h2 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1rem;
}

p { margin: 0 0 1rem; }

/* ── Метка: моноширинная надпись-эйбрау, как маркировка на печатной форме ── */
.метка {
  font-family: var(--моно);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--чернила-2);
  margin: 0;
}

.лид {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  max-width: 54ch;
  color: var(--чернила-2);
}

.сноска {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--чернила-2);
  max-width: 62ch;
  border-top: 1px solid var(--линия);
  padding-top: 1rem;
  margin-top: 2.5rem;
}

/* ── Шапка ───────────────────────────────────────────────────────────── */
.шапка {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.25rem var(--поле);
  border-bottom: 1px solid var(--линия);
}

.шапка__марка { display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap; }
/* Название кабинета — самая крупная надпись на экране: по ней сразу видно,
   в каком инструменте находишься. Метка «ADONIS» подросла следом, но
   осталась заметно мельче, иначе они спорят друг с другом. */
.шапка__марка strong {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.шапка__марка .метка { font-size: 0.8125rem; }
.шапка__меню { display: flex; gap: 1.25rem; }

.шапка__меню { align-items: center; }

.кнопка-значок {
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  color: var(--чернила);
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 2px;
}
.кнопка-значок:hover { border-color: var(--зелень); }
.кнопка-значок__метка {
  font-family: var(--моно);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--чернила-2);
}

/* ── Настройки ───────────────────────────────────────────────────────── */
.настройки {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: start center;
  padding: clamp(1rem, 6vh, 4rem) 1rem;
  background: rgba(20, 22, 28, 0.45);
}
.настройки[hidden] { display: none; }

.настройки__окно {
  width: min(34rem, 100%);
  background: var(--карточка);
  border: 1px solid var(--линия);
  padding: clamp(1.25rem, 4vw, 2rem);
  display: grid;
  gap: 1.5rem;
}
.настройки__шапка { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.настройки__шапка h2 { margin: 0; }
.настройка { display: grid; gap: 0.5rem; }
.настройка__имя { font-weight: 600; }
.настройка__что { font-size: 0.875rem; color: var(--чернила-2); margin: 0; }

.выбор { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.выбор button {
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 0.45rem 0.9rem;
  color: var(--чернила);
  background: transparent;
  border: 1px solid var(--линия);
  border-radius: 2px;
}
.выбор button[aria-pressed="true"] {
  border-color: var(--зелень);
  background: var(--вердикт-зелень);
  font-weight: 500;
}

.порог { display: flex; align-items: center; gap: 0.75rem; }
.порог input {
  font: inherit;
  font-family: var(--моно);
  width: 5rem;
  padding: 0.4rem 0.6rem;
  color: var(--чернила);
  background: var(--бумага);
  border: 1px solid var(--линия);
  border-radius: 2px;
}
.настройки__низ { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; }
/* .кнопка описана ниже по файлу, поэтому специфичность поднята намеренно */
.кнопка.опасно { color: var(--красный); border-color: var(--красный); }
.кнопка.опасно:hover { background: var(--красный); color: var(--бумага); }

/* ── Экраны ──────────────────────────────────────────────────────────── */
main { padding: clamp(2rem, 5vw, 4.5rem) var(--поле) 5rem; }
.экран { max-width: 62rem; margin: 0 auto; }
.экран[hidden] { display: none; }

/* Приводочная метка — типографский крест, тонкая отсылка к печати */
.полоса-приводки {
  width: 100%;
  height: 12px;
  margin-bottom: 2rem;
  background-image:
    linear-gradient(90deg, var(--циан) 0 12.5%, transparent 12.5% 25%),
    linear-gradient(90deg, var(--зелень) 0 12.5%, transparent 12.5% 25%);
  background-size: 96px 2px, 96px 2px;
  background-position: 0 5px, 48px 5px;
  background-repeat: repeat-x;
  opacity: 0.85;
}

/* ── Правила на старте ───────────────────────────────────────────────── */
.правила { list-style: none; margin: 2.5rem 0; padding: 0; max-width: 54ch; }
.правила li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--линия);
  color: var(--чернила-2);
}
.правила li:last-child { border-bottom: 1px solid var(--линия); }
.правила__номер {
  font-family: var(--моно);
  font-size: 0.8125rem;
  color: var(--зелень);
  padding-top: 0.15em;
}
.правила em { font-style: normal; color: var(--чернила); font-weight: 500; }

/* ── Анкета ──────────────────────────────────────────────────────────── */
.анкета {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: end;
  max-width: 46rem;
  margin-top: 2rem;
}
.поле { display: flex; flex-direction: column; gap: 0.4rem; }
.поле label {
  font-family: var(--моно);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--чернила-2);
}
.поле input {
  font: inherit;
  color: var(--чернила);
  padding: 0.7rem 0.85rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 2px;
}
.поле input:focus-visible { outline: 2px solid var(--зелень); outline-offset: 1px; }

/* ── Кнопки ──────────────────────────────────────────────────────────── */
.кнопка {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0.7rem 1.4rem;
  border-radius: 2px;
  border: 1px solid var(--чернила);
  background: transparent;
  color: var(--чернила);
  transition: background 0.15s ease, color 0.15s ease;
}
.кнопка:hover { background: var(--чернила); color: var(--бумага); }
.кнопка--главная { background: var(--чернила); color: var(--бумага); }
.кнопка--главная:hover { background: var(--зелень); border-color: var(--зелень); }
.кнопка--файл { display: inline-block; }
.кнопки { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

.кнопка-текст {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: var(--голубой);
  border-bottom: 1px solid currentColor;
}
.кнопка-текст:hover { color: var(--зелень); }

:where(button, input, label, a):focus-visible {
  outline: 2px solid var(--зелень);
  outline-offset: 2px;
}

/* ── Экран вопроса ───────────────────────────────────────────────────── */
.экран--вопрос { max-width: 46rem; padding-top: clamp(1rem, 6vh, 4rem); }

.ход { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(2rem, 8vh, 4rem); }
.ход__линейка {
  flex: 1;
  height: 3px;
  background: var(--бумага-тень);
  position: relative;
}
.ход__засечка {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--зелень);
  transition: width 0.25s ease;
}
.ход__счёт { font-family: var(--моно); font-size: 0.8125rem; margin: 0; }
.ход__всего { color: var(--чернила-2); }

.утверждение {
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  min-height: 4.5em;
  margin: 0 0 2.5rem;
}

.ответы { display: grid; gap: 0.75rem; }
.ответ {
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  color: var(--чернила);
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 2px;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.ответ:hover { border-color: var(--зелень); background: var(--карточка-ярче); transform: translateX(2px); }
.ответ__клавиша {
  font-family: var(--моно);
  font-size: 0.75rem;
  color: var(--чернила-2);
  border: 1px solid var(--линия);
  border-radius: 2px;
  padding: 0.1rem 0.45rem;
}
.назад { margin-top: 2rem; }

/* ── Сильные стороны кандидату ───────────────────────────────────────── */
.сильные { display: grid; gap: 1rem; margin: 2rem 0; max-width: 54ch; }
.сильная {
  border-left: 2px solid var(--зелень);
  padding: 0.25rem 0 0.25rem 1rem;
}
.сильная strong { display: block; }
.сильная span { color: var(--чернила-2); }

/* ── Отчёт ───────────────────────────────────────────────────────────── */
.отчёт { background: var(--карточка); border: 1px solid var(--линия); padding: clamp(1.5rem, 4vw, 3rem); }

.отчёт__шапка {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--чернила);
  padding-bottom: 1rem;
}
.отчёт__шапка h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0.15em 0 0; }
.отчёт__дата { font-family: var(--моно); font-size: 0.8125rem; color: var(--чернила-2); }

/* Вердикт */
.вердикт {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--линия);
  border-left-width: 3px;
}
.вердикт--на-симулятор { border-left-color: var(--циан); background: var(--вердикт-циан); }
.вердикт--резерв       { border-left-color: var(--охра); background: var(--вердикт-охра); }
.вердикт--отказ        { border-left-color: var(--красный); background: var(--вердикт-красный); }
.вердикт__слово { font-size: 1.25rem; font-weight: 600; }
.вердикт__итог { font-family: var(--моно); font-size: 1.25rem; }
.вердикт__пояснение { flex-basis: 100%; margin: 0; color: var(--чернила-2); font-size: 0.9375rem; }

/* Достоверность стоит выше шкал: сначала решаем, верим ли профилю */
.достоверность { margin: 1.5rem 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--линия); }
.достоверность__строка { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.достоверность__уровень { font-weight: 600; }
.достоверность__шкала { display: flex; gap: 3px; }
.достоверность__деление { width: 14px; height: 8px; border: 1px solid var(--линия); }
.достоверность__деление--полное { background: var(--чернила); border-color: var(--чернила); }

/* Линейка шкал — сигнатура отчёта */
.линейки { margin: 1.5rem 0 0; display: grid; gap: 0.35rem; }

.линейка {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 3rem 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem 0;
  border-top: 1px solid var(--бумага-тень);
}
.линейка__имя { line-height: 1.25; }
.линейка__имя b { font-weight: 600; }
.линейка__имя span { display: block; font-size: 0.8125rem; color: var(--чернила-2); }
.линейка__буква { font-family: var(--моно); color: var(--чернила-2); }
.линейка__число { font-family: var(--моно); font-size: 1rem; text-align: right; font-weight: 500; }

.линейка__полоса {
  position: relative;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, var(--линия) 0 1px, transparent 1px 20%);
  border-bottom: 1px solid var(--линия);
}
/* Цвет шкалы приходит из данных (--тон), одинаковый в отчёте и в сравнении. */
.линейка__значение {
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 0;
  background: hsl(var(--тон, 320) 55% 45% / 0.22);
  border-right: 2px solid hsl(var(--тон, 320) 60% 42%);
}
.линейка__зона {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 0.5rem;
  /* у высоких значений подпись уходит за правый край — ставим её слева */
  font-size: 0.75rem;
  font-family: var(--моно);
  color: var(--чернила-2);
  white-space: nowrap;
}
.линейка__зона--слева {
  transform: translate(-100%, -50%);
  padding-left: 0;
  padding-right: 0.5rem;
}

.ось {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 3rem 1fr;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.ось__числа {
  grid-column: 3;
  display: flex;
  justify-content: space-between;
  font-family: var(--моно);
  font-size: 0.6875rem;
  color: var(--чернила-2);
}

/* Связки */
.связка {
  border: 1px solid var(--линия);
  border-left: 3px solid var(--охра);
  padding: 0.9rem 1.15rem;
  margin-bottom: 0.75rem;
}
.связка h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.связка p { margin: 0; font-size: 0.9375rem; color: var(--чернила-2); }

/* Расшифровки */
.расшифровки { display: grid; gap: 1rem; }
.расшифровка { border-top: 1px solid var(--бумага-тень); padding-top: 0.85rem; }
.расшифровка__шапка { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.3rem; }
.расшифровка__имя { font-weight: 600; }
.расшифровка__зона {
  font-family: var(--моно);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--чернила-2);
}
.расшифровка p { margin: 0; color: var(--чернила-2); font-size: 0.9375rem; }

/* Предупреждения */
.предупреждения { margin: 1.5rem 0; padding-left: 1.15rem; }
.предупреждения li { color: var(--чернила-2); margin-bottom: 0.35rem; }

/* Заполнение */
.заполнение {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--линия);
}
.заполнение div { display: flex; flex-direction: column; gap: 0.15rem; }
.заполнение dt, .заполнение .подпись {
  font-family: var(--моно);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--чернила-2);
}
.заполнение .значение { font-family: var(--моно); font-size: 1.05rem; }

/* ── Таблица архива ──────────────────────────────────────────────────── */
.таблица-обёртка { overflow-x: auto; margin-top: 1.5rem; }
.таблица { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.таблица th, .таблица td {
  text-align: left;
  padding: 0.7rem 0.75rem 0.7rem 0;
  border-bottom: 1px solid var(--линия);
  white-space: nowrap;
}
.таблица th {
  font-family: var(--моно);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--чернила-2);
  font-weight: 500;
}
.таблица .цифра { text-align: right; font-family: var(--моно); }
.таблица tbody tr:hover { background: var(--бумага-тень); }


/* ── Тёмная тема ──────────────────────────────────────────────────────
   Те же роли, другой носитель: не оттиск на бумаге, а плёнка на просвет.
   Зелень, красный и циан подняты по светлоте, чтобы держать контраст
   на тёмном. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --бумага:      #14161C;
    --бумага-тень: #1E212A;
    --чернила:     #EDEBE5;
    --чернила-2:   #A5A9B4;
    --линия:       #414759;
    --зелень:      #3DBE72;
    --красный:     #FF6B5B;
    --розовый:     #FF5FB0;
    --голубой:     #4FC3E8;
    --циан:        #4FC3E8;
    --охра:        #E8B44A;
    --карточка:    #232733;
    --карточка-ярче: #2C3140;
    color-scheme: dark;
    --вердикт-циан:   rgba(79,195,232,0.10);
    --вердикт-охра:   rgba(232,180,74,0.12);
    --вердикт-зелень: rgba(61,190,114,0.12);
    --вердикт-красный: rgba(255,107,91,0.12);
    --значение-фон:   rgba(237,235,229,0.12);
  }
}

:root[data-theme="dark"] {
  --бумага:      #14161C;
  --бумага-тень: #1E212A;
  --чернила:     #EDEBE5;
  --чернила-2:   #A5A9B4;
  --линия:       #414759;
  --зелень:      #3DBE72;
  --красный:     #FF6B5B;
  --розовый:     #FF5FB0;
  --голубой:     #4FC3E8;
  --циан:        #4FC3E8;
  --охра:        #E8B44A;
  --карточка:    #232733;
  --карточка-ярче: #2C3140;
  color-scheme: dark;
  --вердикт-циан:   rgba(79,195,232,0.10);
  --вердикт-охра:   rgba(232,180,74,0.12);
  --вердикт-зелень: rgba(61,190,114,0.12);
  --вердикт-красный: rgba(255,107,91,0.12);
  --значение-фон:   rgba(237,235,229,0.12);
}

/* ── Печать: отчёт на бумаге должен совпадать с экраном ──────────────── */
@media print {
  @page { margin: 14mm; }
  .без-печати, .шапка { display: none !important; }

  /* Печатаем только карточку кандидата: список, фильтры и строка приглашения
     на бумаге не нужны, а окно по умолчанию — модалка поверх страницы. */
  body:has(#окно-карточки:not([hidden])) .каркас { display: none !important; }
  #окно-карточки:not([hidden]) {
    position: static;
    display: block;
    padding: 0;
    background: none;
  }
  #окно-карточки .окно__нутро {
    max-width: none;
    max-height: none;
    overflow: visible;
    border: 0;
    padding: 0;
    box-shadow: none;
  }
  #окно-карточки .окно__шапка { margin-bottom: 8pt; }
  body { background: #fff; color: #14161C; font-size: 10.5pt; }
  .отчёт, .ответ, .поле input { background: #fff; }
  main { padding: 0; }
  .отчёт { border: 0; padding: 0; }
  .экран { max-width: none; }
  .линейка, .расшифровка, .связка { break-inside: avoid; }
  .вердикт { break-inside: avoid; }
}

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

@media (max-width: 40rem) {
  .линейка, .ось { grid-template-columns: 1fr 2.5rem; }
  .линейка__полоса { grid-column: 1 / -1; }
  .ось__числа { grid-column: 1 / -1; }
}


/* ── Личный кабинет ──────────────────────────────────────────────────── */

main { max-width: 78rem; margin: 0 auto; }

.полоса-вакансий {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--линия);
}
.вакансии { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.вакансия {
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 0.4rem 0.85rem;
  color: var(--чернила);
  background: transparent;
  border: 1px solid var(--линия);
  border-radius: 2px;
}
.вакансия[aria-pressed="true"] { border-color: var(--зелень); background: var(--вердикт-зелень); font-weight: 500; }

/* Сводка: сколько кандидатов на каком шаге. Первое, что видно на экране,
   потому что это единственный вопрос, который задают каждый день. */
.сводка { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 1.5rem 0 2rem; }
.сводка__клетка { display: flex; flex-direction: column; gap: 0.15rem; }
.сводка__число { font-family: var(--моно); font-size: 1.75rem; line-height: 1; }
.сводка__что { font-family: var(--моно); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--чернила-2); }

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

   Поля собраны в одну карточку и разделены линиями, а не рамками у
   каждого: это один приём, а не пять отдельных полей. */
.отправка-блок { margin: 2rem 0 0; }
.отправка-блок__заголовок {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

.отправка {
  display: grid;
  grid-template-columns: minmax(9rem, 1.3fr) minmax(9rem, 1.3fr) minmax(7rem, 0.8fr) minmax(7rem, 0.9fr) minmax(8rem, 1fr) auto;
  align-items: stretch;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 2px;
}

.отправка__поле { position: relative; display: flex; }
.отправка__поле + .отправка__поле { border-left: 1px solid var(--линия); }

.отправка__поле input,
.отправка__поле select {
  font: inherit;
  width: 100%;
  color: var(--чернила);
  background: transparent;
  border: 0;
  padding: 0.85rem 1rem;
  border-radius: 0;
}
.отправка__поле input::placeholder { color: var(--чернила-2); }
.отправка__поле select { cursor: pointer; appearance: none; }
.отправка__поле input:focus-visible,
.отправка__поле select:focus-visible { outline: 2px solid var(--зелень); outline-offset: -2px; }

/* Стрелка у выпадающих полей рисуется фоном, а не символом в тексте:
   символ съезжает вместе с длинным названием вакансии. */
.отправка__поле--узкое select {
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) calc(50% + 1px), calc(100% - 0.85rem) calc(50% + 1px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Тест один: вместо поля выбора — просто его название в том же ряду.
   Не input и не кнопка: нажимать не на что, менять нечего. */
.отправка__тест {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.85rem 1rem;
  border-left: 1px solid var(--линия);
  color: var(--чернила-2);
  line-height: 1.3;
}

.отправка__кнопка { border-radius: 0; border-width: 0 0 0 1px; white-space: nowrap; }

/* Готовая ссылка появляется под строкой, на том же экране: кандидат уже
   в таблице, и уводить куда-то ради копирования ссылки незачем. */
.готовая-ссылка {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--циан);
  background: var(--вердикт-циан);
  border-radius: 2px;
}
.готовая-ссылка[hidden] { display: none; }
.готовая-ссылка__строка { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.готовая-ссылка code { font-family: var(--моно); font-size: 0.875rem; word-break: break-all; }
.готовая-ссылка .сноска { margin: 0.5rem 0 0; }

/* ── Поиск над таблицей ─────────────────────────────────────────────── */
.строка-таблицы {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}
.поиск { position: relative; display: flex; align-items: center; }
.поиск input {
  font: inherit;
  font-size: 0.9375rem;
  width: min(22rem, 60vw);
  color: var(--чернила);
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 2px;
  padding: 0.55rem 2rem 0.55rem 0.85rem;
}
.поиск input::placeholder { color: var(--чернила-2); }
.поиск input::-webkit-search-cancel-button { display: none; }
.поиск__сброс {
  position: absolute;
  right: 0.4rem;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0.2rem 0.35rem;
  color: var(--чернила-2);
}
.поиск__сброс:hover { color: var(--зелень); }
.поиск__сброс[hidden] { display: none; }

.таблица--кандидаты { margin-top: 0.75rem; }
.таблица--кандидаты tbody tr { cursor: pointer; }
.телефон-ячейка { font-family: var(--моно); font-size: 0.875rem; }
.сводка__клетка--важно .сводка__число { color: var(--зелень); }

.таблица td { white-space: nowrap; }
.таблица .имя-кандидата { font-weight: 500; }
.таблица .почта { display: block; font-size: 0.8125rem; color: var(--чернила-2); }
.таблица tbody tr { cursor: pointer; }

/* Значение теста в таблице: число плюс словесная зона мелким шрифтом */
.клетка-теста { font-family: var(--моно); font-size: 0.875rem; }
.клетка-теста span { font-family: var(--шрифт); color: var(--чернила-2); font-size: 0.8125rem; }
.клетка-теста--нет { color: var(--чернила-2); }

.ярлык {
  display: inline-block;
  font-size: 0.8125rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--линия);
  border-radius: 999px;
}
.ярлык--готово { border-color: var(--циан); }
.ярлык--симулятор, .ярлык--встреча { border-color: var(--циан); background: var(--вердикт-циан); }
.ярлык--отказ { border-color: var(--красный); }
.ярлык--резерв { border-color: var(--охра); background: var(--вердикт-охра); }

.пусто { color: var(--чернила-2); padding: 2rem 0; }

/* ── Окна ────────────────────────────────────────────────────────────── */
.окно {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: start center;
  padding: clamp(1rem, 5vh, 3rem) 1rem;
  background: rgba(20, 22, 28, 0.5);
  overflow-y: auto;
}
.окно[hidden] { display: none; }
.окно__нутро {
  width: min(38rem, 100%);
  background: var(--карточка);
  border: 1px solid var(--линия);
  padding: clamp(1.25rem, 4vw, 2rem);
  display: grid;
  gap: 1rem;
}
.окно__нутро--широкое { width: min(58rem, 100%); }
/* Широкая таблица внутри окна растягивала само окно: на телефоне шапка
   с кнопкой «Закрыть» уезжала за правый край экрана. Ограничиваем детей
   grid-контейнера — тогда прокручивается таблица, а не окно. */
.окно__нутро { max-width: 100%; }
.окно__нутро > * { min-width: 0; }
.окно__шапка { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.окно__шапка h2 { margin: 0; }

.форма { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; }
.поле--широкое { grid-column: 1 / -1; }
.подпись-поля { font-family: var(--моно); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--чернила-2); }
.форма select, .окно input[type="text"], .окно textarea {
  font: inherit;
  color: var(--чернила);
  background: var(--бумага);
  border: 1px solid var(--линия);
  border-radius: 2px;
  padding: 0.6rem 0.8rem;
  width: 100%;
}
.окно textarea { min-height: 12rem; resize: vertical; font-size: 0.9375rem; }
/* Заметка — одна-две строки на полях, а не полотно: она стоит выше
   результатов, и раздутое поле отодвигает их за край экрана. */
#заметка { min-height: 3.5rem; }
#вывод-отдачи { min-height: 5rem; }

.выбор { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.выбор button {
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 0.45rem 0.9rem;
  color: var(--чернила);
  background: transparent;
  border: 1px solid var(--линия);
  border-radius: 2px;
}
.выбор button[aria-pressed="true"] { border-color: var(--зелень); background: var(--вердикт-зелень); font-weight: 500; }

.готовая-ссылка { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--линия); }
.готовая-ссылка code {
  font-family: var(--моно);
  font-size: 0.875rem;
  padding: 0.7rem 0.85rem;
  background: var(--бумага);
  border: 1px solid var(--линия);
  word-break: break-all;
}

/* ── Карточка кандидата ──────────────────────────────────────────────── */
.карточка-шаги { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.вкладки { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0 1rem; border-bottom: 1px solid var(--линия); }
.вкладка {
  font: inherit;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  color: var(--чернила-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
}
.вкладка[aria-selected="true"] { color: var(--чернила); border-bottom-color: var(--зелень); font-weight: 500; }

.ответ-строка { padding: 0.85rem 0; border-top: 1px solid var(--бумага-тень); }
.ответ-строка--ключевой { border-left: 3px solid var(--зелень); padding-left: 0.85rem; }
.ответ-вопрос { font-size: 0.9375rem; color: var(--чернила-2); margin: 0 0 0.3rem; }
.ответ-текст { margin: 0; white-space: pre-wrap; }
.ответ-время { font-family: var(--моно); font-size: 0.75rem; color: var(--чернила-2); }

.звёзды { display: flex; gap: 0.2rem; margin-top: 0.4rem; }
.звезда { font: inherit; cursor: pointer; background: none; border: 0; padding: 0 0.1rem; color: var(--линия); font-size: 1.15rem; line-height: 1; }
.звезда[data-горит="да"] { color: var(--зелень); }

.по-типам { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 1rem 0; }
.по-типам div { display: flex; flex-direction: column; gap: 0.1rem; }
.по-типам .значение { font-family: var(--моно); font-size: 1.1rem; }
.по-типам .подпись { font-family: var(--моно); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--чернила-2); }

.подсказка-чтения { border: 1px solid var(--линия); border-left: 3px solid var(--циан); padding: 0.9rem 1.15rem; margin-bottom: 1rem; }
.подсказка-чтения h4 { margin: 0 0 0.4rem; font-size: 0.9375rem; }
.подсказка-чтения ul { margin: 0; padding-left: 1.1rem; font-size: 0.9375rem; color: var(--чернила-2); }

/* Строка служб в окне письма */
.письмо__службы { font-size: 0.875rem; color: var(--чернила-2); margin: 0; }
.письмо__точка { color: var(--линия); margin: 0 0.35rem; }


/* ── Сравнение кандидатов ────────────────────────────────────────────── */
.окно__нутро--во-весь-экран { width: min(92rem, 100%); }

.сравнение { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.сравнение th, .сравнение td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--бумага-тень); text-align: left; }
.сравнение thead th {
  position: sticky;
  top: 0;
  background: var(--карточка);
  border-bottom: 1px solid var(--линия);
  vertical-align: bottom;
  font-weight: 600;
  font-size: 0.9375rem;
}
.сравнение thead th span {
  display: block;
  font-family: var(--моно);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--чернила-2);
  font-weight: 400;
  margin-top: 0.2rem;
}
.сравнение .шкала-строка { white-space: nowrap; }
.сравнение .шкала-строка b { font-weight: 600; }
.сравнение .шкала-строка span { display: block; font-size: 0.8125rem; color: var(--чернила-2); }

/* Клетка со значением: число и полоса под ним — глазу проще ловить разницу
   по длине полосы, чем сравнивать двузначные числа в двенадцати строках. */
.клетка-значение { min-width: 5.5rem; }
.клетка-значение .число { display: block; font-family: var(--моно); font-variant-numeric: tabular-nums; }
/* span по умолчанию строчный: без display:block ширина к нему не
   применяется и полоса схлопывается в чёрточку. */
.клетка-значение .полоса {
  display: block;
  width: 100%;
  height: 8px;
  background: var(--бумага-тень);
  margin-top: 0.35rem;
  border: 1px solid var(--линия);
}
.клетка-значение .полоса i { display: block; height: 100%; background: var(--чернила-2); }
.клетка-значение--лучшая .число { font-weight: 600; color: var(--зелень); }
.клетка-значение--лучшая .полоса i { background: var(--зелень); }
.клетка-значение--нет { color: var(--чернила-2); }

.сравнение .строка-итог td, .сравнение .строка-итог th { border-bottom: 2px solid var(--чернила); }
.сравнение .строка-итог .число { font-size: 1.05rem; }
.сравнение .связки-строка td { font-size: 0.8125rem; color: var(--чернила-2); }


/* Полоса в сравнении красится тем же тоном шкалы, что и линейка в отчёте:
   один показатель — один цвет, где бы он ни встретился. */
.клетка-значение .полоса i { background: hsl(var(--тон, 320) 60% 45%); }
.клетка-значение--лучшая .полоса i { background: hsl(var(--тон, 320) 65% 45%); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .линейка__значение {
    background: hsl(var(--тон, 320) 60% 62% / 0.28);
    border-right-color: hsl(var(--тон, 320) 70% 66%);
  }
  :root:not([data-theme="light"]) .клетка-значение .полоса i { background: hsl(var(--тон, 320) 62% 60%); }
  :root:not([data-theme="light"]) .клетка-значение--лучшая .полоса i { background: hsl(var(--тон, 320) 70% 66%); }
}
:root[data-theme="dark"] .линейка__значение {
  background: hsl(var(--тон, 320) 60% 62% / 0.28);
  border-right-color: hsl(var(--тон, 320) 70% 66%);
}
:root[data-theme="dark"] .клетка-значение .полоса i { background: hsl(var(--тон, 320) 62% 60%); }
:root[data-theme="dark"] .клетка-значение--лучшая .полоса i { background: hsl(var(--тон, 320) 70% 66%); }


/* ── Телефон ──────────────────────────────────────────────────────────
   Кабинет открывают и с телефона: посмотреть, кто прошёл, пока едешь. */
@media (max-width: 30rem) {
  .шапка { padding: 0.85rem var(--поле); gap: 0.6rem; }
  .шапка__меню { flex-wrap: wrap; gap: 0.5rem; }
  .кнопка-значок { padding: 0.3rem 0.55rem; font-size: 0.8125rem; }
  .кнопка { padding: 0.6rem 1rem; }

  main { padding-top: 1.25rem; }

  .форма { grid-template-columns: 1fr; }

  /* На телефоне строка в шесть колонок нечитаема — разворачиваем в столбик,
     разделители переезжают с левого края на верхний. */
  .отправка { grid-template-columns: 1fr; }
  .отправка__поле + .отправка__поле { border-left: 0; border-top: 1px solid var(--линия); }
  .отправка__кнопка { border-width: 1px 0 0; }
  .отправка__тест { border-left: 0; border-top: 1px solid var(--линия); }
  .поиск input { width: 100%; }
  .строка-таблицы { margin-top: 1.5rem; }
  .окно { padding: 0.75rem 0.5rem; }
  .окно__нутро, .окно__нутро--широкое, .окно__нутро--во-весь-экран { padding: 1rem; }
  .сводка { gap: 1rem 1.5rem; }
  .сводка__число { font-size: 1.4rem; }

  /* Сравнение на телефоне: колонка показателя закреплена слева, иначе при
     прокрутке вбок непонятно, к какой строке относятся числа. Подписи шкал
     скрыты — на 390 px они съедали половину экрана, а названия говорят сами
     за себя. */
  .сравнение th, .сравнение td { padding: 0.45rem 0.5rem; }
  .сравнение .шкала-строка {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--карточка);
    max-width: 9.5rem;
    white-space: normal;
  }
  .сравнение .шкала-строка span { display: none; }
  .сравнение thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--карточка); }
  .клетка-значение { min-width: 4.25rem; }
}

/* ── Левый блок разделов ─────────────────────────────────────────────── */
/* Разделы стоят слева, а не в шапке: в шапке они мешались кандидату на
   странице теста, да и растут — список будет длиннее трёх. */
.каркас { display: grid; grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr); align-items: start; }

.боковая {
  position: sticky;
  top: 0;
  padding: clamp(2rem, 5vw, 4.5rem) 0 3rem clamp(1.25rem, 4vw, 3rem);
}
.боковая__меню { display: flex; flex-direction: column; gap: 0.25rem; }
.боковая__кнопка {
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  color: var(--чернила-2);
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 2px 2px 0;
}
/* У каждого раздела свой цвет: по нему узнают, где находишься, ещё до
   того, как прочитают подпись. Цвет держится в переменной кнопки, поэтому
   полоса, текст и обводка фокуса берут его из одного места. */
.боковая__кнопка[data-раздел="кабинет"]   { --цвет-раздела: var(--зелень); }
.боковая__кнопка[data-раздел="сравнение"] { --цвет-раздела: var(--розовый); }
.боковая__кнопка[data-раздел="архив"]     { --цвет-раздела: var(--голубой); }

/* Цвет держится у всех трёх постоянно, а не только у открытого раздела:
   «Сравнить» — окно, а не раздел, оно активным не становится никогда,
   и его цвет иначе не показался бы вовсе. Где мы находимся, видно по
   полосе потолще, жирной подписи и подложке. */
.боковая__кнопка {
  color: var(--цвет-раздела);
  border-left-color: var(--цвет-раздела);
}
.боковая__кнопка:hover { background: var(--карточка-ярче); }
.боковая__кнопка[aria-current="page"] {
  font-weight: 600;
  border-left-width: 3px;
  background: var(--карточка);
}
.боковая__кнопка:focus-visible { outline: 2px solid var(--цвет-раздела); outline-offset: -2px; }

/* Левый блок съедает поле у содержимого — возвращаем его слева поменьше.
   min-width: 0 и max-width: 100% обязательны оба: у main свой предел в 78rem,
   и внутри сетки он растягивался по таблице кандидатов до него, унося страницу
   вбок вместо прокрутки внутри обёртки таблицы. */
.каркас main { padding-left: clamp(1.25rem, 3vw, 2rem); min-width: 0; max-width: 100%; }

/* ── Выбор нескольких кандидатов ─────────────────────────────────────── */
.колонка-выбора { width: 2.5rem; text-align: center; }
.колонка-выбора input { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--зелень); }

.выбрано {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--вердикт-зелень);
  border: 1px solid var(--зелень);
  border-radius: 2px;
}
.выбрано[hidden] { display: none; }
.выбрано__счёт { font-weight: 600; }
.выбрано__действия { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.выбрано .кнопка-текст.опасно { color: var(--красный); }

@media (max-width: 60rem) {
  /* На узком экране разделы уезжают наверх строкой: колонка слева съедала
     половину ширины таблицы. */
  /* minmax(0,…), а не 1fr: иначе широкая таблица распирает колонку
     и страница едет вбок вместо прокрутки внутри обёртки. */
  .каркас { grid-template-columns: minmax(0, 1fr); }
  .боковая { position: static; padding: 1.25rem var(--поле) 0; }
  .боковая__меню { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
  /* Меню легло в строку: полоса раздела переезжает слева вниз, но остаётся
     цветной у всех трёх — как на широком экране. */
  .боковая__кнопка { border-left: 0; border-bottom: 2px solid var(--цвет-раздела); padding: 0.55rem 0.75rem; }
  .боковая__кнопка[aria-current="page"] { border-left: 0; border-bottom-width: 3px; }
  .каркас main { padding-left: var(--поле); }
}

/* ── Согласованность парных утверждений в карточке ───────────────────── */
.пометка-версии {
  margin: 0 0 1rem; padding: 0.6rem 0.9rem;
  border-left: 2px solid var(--охра);
  background: var(--вердикт-охра);
  color: var(--чернила-2);
}
.согласованность { margin: 0 0 1.5rem; }
.согласованность__итог { margin: 0.35rem 0 0.75rem; }
.пары { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.пара {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(6rem, 9rem) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--линия);
  background: var(--карточка);
}
.пара__состояние { font-family: var(--моно); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--чернила-2); }
.пара--уточнить { border-left-color: var(--красный); background: var(--вердикт-красный); }
.пара--уточнить .пара__состояние { color: var(--красный); }
.пара--слабое-расхождение { border-left-color: var(--охра); }
.пара--тяжёлая-тема { border-left-color: var(--циан); }

@media (max-width: 40rem) {
  .пара { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* Время прохождения: цветом отмечаем только выход за ориентир. */
.время-теста { margin: 0 0 1rem; color: var(--чернила-2); font-family: var(--моно); font-size: 0.8125rem; }
.время-теста--дольше { color: var(--охра); }

/* Ссылка-кнопка в шапке: тот же вид, что у кнопок рядом. */
a.кнопка-текст { text-decoration: none; display: inline-block; }

/* Крестик у вакансии: виден при наведении на неё, чтобы полоса не пестрила. */
.вакансия-обёртка { position: relative; display: inline-flex; align-items: center; }
.вакансия-убрать {
  font: inherit;
  line-height: 1;
  cursor: pointer;
  margin-left: -0.4rem;
  padding: 0.15rem 0.35rem;
  color: var(--чернила-2);
  background: none;
  border: 0;
  opacity: 0;
  transition: opacity 0.12s;
}
.вакансия-обёртка:hover .вакансия-убрать,
.вакансия-убрать:focus-visible { opacity: 1; }
.вакансия-убрать:hover { color: var(--красный); }

/* ── Смартфон: последний слой ─────────────────────────────────────────
   Стоит в конце файла нарочно. Медиазапрос специфичности не добавляет,
   и когда эти правила лежали выше, обычные правила таблицы и колонок,
   объявленные ниже, их перебивали — галочки оставались по 16 px.

   На 390 px в кабинет заходят посмотреть, кто прошёл, стоя в метро.
   Поэтому всё нажимаемое — не мельче 36–42 px, а моноширинные подписи
   подняты с 11 до 12 px: заглавными и в разрядку они читаются хуже
   строчных того же кегля. */
@media (max-width: 30rem) {
  .кнопка-текст {
    padding: 0.6rem 0.25rem;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .кнопка-значок { min-height: 40px; padding: 0.45rem 0.7rem; }
  .кнопка-значок__метка { font-size: 0.75rem; }

  .вакансия-убрать { min-width: 36px; min-height: 36px; }

  /* Галочка выбора кандидата: 16 px пальцем не поймать. */
  .колонка-выбора { width: 3rem; padding-right: 0.5rem; }
  .колонка-выбора input { width: 1.75rem; height: 1.75rem; }

  .сводка__что { font-size: 0.75rem; }
  .таблица th { font-size: 0.75rem; }

  /* Звёзды в «Отдаче» ставят пальцем, и промах ставит соседнюю оценку.
     18 px мало: разводим их шире и увеличиваем сам знак. */
  .звезда { font-size: 1.6rem; padding: 0.25rem 0.3rem; }

  /* Подписи в разборе «Логики» — 11 px заглавными в разрядку. */
  .по-типам .подпись { font-size: 0.75rem; }
}

/* ── Действия над карточкой: печать и PDF ────────────────────────────── */
/* Значков в шапке карточки четыре, и рядом «Закрыть»: на узком экране
   ряд не влезал и «Закрыть» уезжало за край. Разрешаем перенос. */
.окно__действия { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.значок {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font: inherit;
  cursor: pointer;
  color: var(--чернила-2);
  background: none;
  border: 1px solid var(--линия);
  border-radius: 2px;
  text-decoration: none;
}
.значок:hover { color: var(--циан); border-color: var(--циан); }
.значок:focus-visible { outline: 2px solid var(--циан); outline-offset: 2px; }
.значок--текст { font-family: var(--моно); font-size: 0.75rem; letter-spacing: 0.06em; }
.значок[aria-busy="true"] { opacity: 0.5; pointer-events: none; }
/* Погашенный значок оставляем видимым и с подсказкой: «отправить нечего»
   объясняет больше, чем исчезнувшая кнопка. */
.значок:disabled { opacity: 0.4; cursor: default; }
.значок:disabled:hover { color: var(--чернила-2); border-color: var(--линия); }

/* ── Смартфон: поля ввода ─────────────────────────────────────────────
   Ровно 16 px, ни пикселем меньше. Safari на iPhone приближает страницу
   сам, когда фокус попадает в поле мельче шестнадцати, и обратно уже
   не отъезжает — человек дописывает ответ, видя половину экрана. */
@media (max-width: 30rem) {
  /* Действия карточки — отдельной строкой под именем: рядом с заголовком
     четыре значка и «Закрыть» на телефоне не помещаются. */
  .окно__шапка { flex-wrap: wrap; }
  .окно__действия { width: 100%; justify-content: flex-start; gap: 0.5rem; }

  /* :root в селекторе не для красоты: размер полям задают правила вроде
     «.поиск input» и «.окно textarea», а медиазапрос специфичности
     не добавляет — голый «input» их не перебивал. */
  :root input, :root select, :root textarea { font-size: 16px; }
}


/* ── Вопросы теста и ответы кандидата ────────────────────────────────
   Список из ста строк читают глазами по диагонали: номер слева, текст
   посередине, ответ справа — колонкой, чтобы «Нет» подряд были видны
   без чтения. */
.вопросы-список {
  display: grid;
  gap: 0.25rem;
  max-height: min(60vh, 40rem);
  overflow-y: auto;
  padding-right: 0.25rem;
}
.вопрос {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(8rem, 13rem);
  gap: 0.5rem 1rem;
  align-items: start;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--линия);
  background: var(--бумага);
}
/* Реверсивные помечаем полосой: при чтении подряд легко забыть, что
   «Да» здесь считается минусом. */
.вопрос--наоборот { border-left-color: var(--чернила-2); }
.вопрос__номер { font-family: var(--моно); font-size: 0.8125rem; color: var(--чернила-2); }
.вопрос__текст { margin: 0; }
.вопрос__метки { margin: 0.3rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.вопрос__шкала {
  font-family: var(--моно);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  color: var(--чернила);
  background: hsl(var(--тон, 210) 45% 92%);
}
.вопрос__наоборот, .вопрос__пара {
  font-family: var(--моно);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--чернила-2);
  border: 1px solid var(--линия);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
}
.вопрос__справа { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; }
.вопрос__ответ { font-weight: 600; }
.вопрос__ответ--плюс { color: var(--зелень); }
.вопрос__ответ--минус { color: var(--красный); }
.вопрос__ответ--середина { color: var(--чернила); }
.вопрос__ответ--нет { color: var(--чернила-2); font-weight: 400; }
.вопрос__зачёт, .вопрос__время { font-family: var(--моно); font-size: 0.75rem; color: var(--чернила-2); }
.выбор__счёт { font-family: var(--моно); font-size: 0.75rem; color: var(--чернила-2); }
.выбор--шкалы, .выбор--сравнение { gap: 0.35rem; }
.выбор--сравнение .выбор__все { font-style: italic; }

/* Строка шкалы и строка пары ведут к ответам по этой шкале — показываем
   это курсором и подсветкой, иначе о переходе никто не догадается. */
.линейка--нажимается, .пара--нажимается { cursor: pointer; }
.линейка--нажимается:hover, .пара--нажимается:hover { background: var(--бумага-тень); }
.линейка--нажимается:focus-visible, .пара--нажимается:focus-visible {
  outline: 2px solid var(--циан);
  outline-offset: 2px;
}

@media (max-width: 45rem) {
  /* Тринадцать кнопок-шкал на телефоне занимали пол-экрана до первого
     вопроса. Кладём их в одну прокручиваемую строку. */
  .выбор--шкалы {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.3rem;
  }
  .выбор--шкалы button { white-space: nowrap; }
  .вопрос { grid-template-columns: 2rem minmax(0, 1fr); }
  .вопрос__справа { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
}


/* ── Смартфон: список кандидатов карточками ──────────────────────────
   Восемь колонок в таблицу 390 px не помещаются: до «Профиля», статуса
   и кнопки «Ответы» приходилось листать вбок три экрана, и человек,
   стоя в метро, видел только имя с телефоном. На узком экране строка
   разворачивается в карточку: имя крупно, остальное — подпись и
   значение в строку. Подписи берутся из data-подпись, потому что
   заголовки таблицы здесь скрыты. */
/* Показывается только на телефоне — см. блок ниже. */
.только-телефон { display: none; }

@media (max-width: 30rem) {
  .только-телефон { display: inline-block; }
  .таблица-обёртка { overflow-x: visible; }
  .таблица--кандидаты, .таблица--кандидаты tbody { display: block; width: 100%; }
  .таблица--кандидаты thead { display: none; }

  .таблица--кандидаты tbody tr {
    display: block;
    position: relative;
    margin-bottom: 0.6rem;
    padding: 0.8rem 0.9rem 0.8rem 3.2rem;
    border: 1px solid var(--линия);
    border-radius: 2px;
    background: var(--карточка);
  }

  .таблица--кандидаты td {
    display: flex;
    /* Подпись прижата влево, значение — вправо. Через space-between
       разъезжались клетки из двух частей: «50» и «· резерв». */
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.35rem;
    width: auto;
    padding: 0.2rem 0;
    border: 0;
    text-align: right;
  }
  .таблица--кандидаты td::before {
    content: attr(data-подпись);
    font-family: var(--моно);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--чернила-2);
    text-align: left;
    margin-right: auto;
  }
  /* Имя — заголовок карточки, ему подпись не нужна. */
  .таблица--кандидаты td.ячейка-имени {
    display: block;
    text-align: left;
    padding-bottom: 0.5rem;
  }
  .таблица--кандидаты td.ячейка-имени::before { content: none; }
  .таблица--кандидаты td:not([data-подпись])::before { content: none; }
  /* Пустая ячейка — это «Ответы» у того, кто ещё не сдал: в карточке
     она давала бы пустую строку. */
  .таблица--кандидаты td:empty { display: none; }

  /* Галочка — в левое поле карточки, к самому имени. */
  .таблица--кандидаты td.колонка-выбора {
    position: absolute;
    left: 0.7rem;
    top: 0.8rem;
    width: auto;
    padding: 0;
  }
  .таблица--кандидаты td.колонка-выбора::before { content: none; }
  .колонка-выбора input { width: 2rem; height: 2rem; }

  /* Ряд «выбрать всех» стоит над карточками отдельной строкой. */
  .строка-таблицы { align-items: flex-start; }
}