/*
  Анкеты профориентации (кабинет собирает ответы, считает CRM). Стили только
  для того, чего не было в kabinet.css: легенда шкалы, варианты-предложения
  (статусы), тройная оценка (ОПГ), одна длинная страница без деления на
  экраны и подсветка пропущенного пункта при отправке (решение Ильи от
  22.09.2026 — «выглядит устрашающе», убрали страницы совсем).

  Подключается в osnova-kabineta.html ПОСЛЕ kabinet.css — переопределяет и
  дополняет его классы точечно, самого kabinet.css не трогает. Токены цвета
  и размера — из masterskaya.css, числами внутри компонентов не пишем.
*/

/* ---------- Легенда шкалы (карта интересов) — в липкой шапке .kab-hod ---------- */

.anketa-legenda{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--liniya);
}
.anketa-legenda-delenie{
  font-family:var(--mono); font-size:12px; color:var(--tush);
  white-space:nowrap;
}
.anketa-legenda-delenie b{
  font-family:var(--sans); color:var(--tekst); margin-right:4px;
}

/* ---------- Варианты-предложения (статусы): полные фразы, не короткие слова ---------- */

.anketa-varianty{ flex-direction:column; gap:8px }
.anketa-varianty .kab-otvet{ width:100% }
.anketa-varianty .kab-otvet span{
  display:block; width:100%; text-align:start; white-space:normal; line-height:1.4;
}

/* ---------- Тройная оценка (ОПГ): текст, под ним три подписанных ряда кнопок ---------- */

.anketa-troynaya{ display:flex; flex-direction:column; gap:14px }
.anketa-pole{ display:flex; flex-direction:column; gap:6px }
.anketa-pole > .kab-metka{ margin:0 }

/* Кнопки оценки — сетка с равными колонками, а не flex-wrap по ширине текста.
   Раньше «делаю, как правило, хорошо» растягивало свою кнопку шире соседней
   «—», и это читалось как подсказка — выбери кнопку покрупнее (замечание
   Ильи 22.09.2026). grid-auto-flow:column + grid-auto-columns:1fr делит ряд
   на равные колонки по числу вариантов самого ряда (у «Умения»/«Ощущений»
   их четыре, у «Желания» три) — внутри ряда все кнопки одной ширины и, по
   умолчанию grid, одной высоты. Общий min-height ниже ещё и уравнивает
   высоту между тремя рядами, даже если текст в одном перенёсся на две строки. */
.anketa-pole .kab-otvety{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px;
}
.anketa-pole .kab-otvet{ min-width:0 }
.anketa-pole .kab-otvet span{
  box-sizing:border-box; width:100%; height:100%; min-height:64px; padding:8px 10px;
}

/* На телефоне — тот же принцип, только в столбец: текст утверждения, под ним
   три строки кнопок, каждая на всю ширину, чтобы попадать пальцем без
   промаха. Ширина у них и так одна (100%), min-height выше уравнивает высоту. */
@media (max-width:560px){
  .anketa-pole .kab-otvety{ display:flex; flex-direction:column }
  .anketa-pole .kab-otvet{ width:100% }
  .anketa-pole .kab-otvet span{ width:100%; text-align:center }
}

/* ---------- Одна длинная страница: кнопка «Отправить» + подсветка пропуска ---------- */

.anketa-knopki{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px }

/* Якорь «#punkt-N» (vidy.py, _prinyat_shag_ankety шлёт сюда при пропуске):
   браузер сам скроллит к элементу с этим id, CSS :target подсвечивает его —
   без единой строчки JS и без прощупывания, какой пункт имелся в виду. */
.kab-punkt-oprosa:target{
  border-color:var(--oshibka);
  background:color-mix(in srgb, var(--oshibka) 12%, var(--fon2));
}

/* ---------- Обложка «Анкета N» ---------- */

.anketa-legenda:empty{ display:none }

/* Подпись к оценке ОПГ: цифра крупно, объяснение рядом мельче. */
.anketa-troynaya .kab-otvet span{display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; text-align:left}
.anketa-hint{font-size:13px; color:var(--tush); font-family:var(--sans); font-weight:400; line-height:1.3}