/* ================= ТЕСТ «КАК ВЫ ОБРАЩАЕТЕСЬ С ЧУВСТВАМИ» (стили) =================
   Отдельная таблица, а не дописка в styles.css: тот уже перешагнул жёсткий
   предел по размеру, и добавлять в него новую секцию значит делать хуже.
   Переменные палитры берутся из styles.css — он подключён раньше.

   Префикс `et-` по правилу проекта: своя секция — свой префикс.

   ГЛАВНОЕ В ЭТОМ ЭКРАНЕ — не перегрузить человека. Сорок вопросов подряд
   отпугивают, поэтому на странице всегда десять, четыре варианта ответа лежат
   в ряд крупными кнопками, а прогресс виден постоянно. Никаких рамок,
   теней и акцентов там, где можно обойтись воздухом. */

.et-box{margin-top:28px}

/* ---------- Вступление ---------- */
.et-intro,.et-run,.et-result{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:28px}
.et-lead{font-size:17px;line-height:1.6}
.et-note{font-size:14px;color:var(--muted);margin-top:12px}
.et-facts{list-style:none;margin:18px 0 22px;display:grid;gap:8px;font-size:15px}
.et-facts li{padding-left:22px;position:relative}
.et-facts li::before{content:"·";position:absolute;left:8px;color:var(--purple);font-weight:800}
.et-intro .btn+.btn{margin-left:10px}

/* ---------- Прохождение ---------- */
.et-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.et-bar i{display:block;height:100%;background:var(--grad);transition:width .25s}
/* 14px, а не 13: цвет --muted на белом даёт 4.6:1 — порог пройден едва, и на
   мелком кегле такая строка первой становится нечитаемой. */
.et-step{font-size:14px;color:var(--muted);margin:10px 0 22px}

/* Вопрос — отдельный объект, а не строка в ленте. Линии снизу для этого мало:
   десять вопросов подряд на узком экране сливаются, и человек теряет, к чему
   относятся кнопки. Воздух сверху и пузырь вокруг номера дают границу. */
.et-q{border:0;padding:20px 0 22px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.et-q:first-of-type{padding-top:0}
.et-q:last-of-type{border-bottom:0;margin-bottom:6px}
.et-q legend{font-size:16px;line-height:1.5;margin-bottom:12px;font-weight:600}
.et-num{
  display:inline-block;background:var(--bg-soft);border-radius:999px;
  padding:2px 9px;margin-right:8px;font-size:13px;font-weight:700;color:var(--muted)}

/* Четыре варианта в ряд. На узком экране — в столбик: подписи длинные,
   в четыре колонки они рвутся по слогам и читаются хуже, чем список. */
.et-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.et-opt{
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;
  padding:12px 10px;border-radius:14px;cursor:pointer;transition:.18s;
  background:var(--bg-soft);color:var(--ink);border:2px solid transparent}
/* Наведение — только там, где есть чем наводить. На телефоне `:hover`
   срабатывает от касания и залипает: человек ответил, ушёл дальше, а на
   прошлом варианте осталась рамка, будто выбран он. */
@media (hover:hover){
  .et-opt:hover{border-color:var(--purple)}
}
.et-opt.is-on{background:var(--grad);color:#fff;border-color:transparent}

/* Тест проходят с клавиатуры: сорок вопросов мышкой — сорок точных попаданий.
   У кнопок ответа своя рамка занята выбором, поэтому фокус рисуется снаружи
   контура, иначе он неотличим от «выбрано». */
.et-opt:focus-visible,.et-box .btn:focus-visible{
  outline:3px solid var(--purple);outline-offset:2px}

.et-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.et-nav .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.et-hint{font-size:14px;color:var(--muted);margin-top:10px}

/* ---------- Результат ---------- */
/* Код профиля — справочная строка в конце, а не заголовок. Он нужен, чтобы
   человек нашёл свой профиль снова и назвал его в поддержке. */
.et-code{
  font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--purple-d);
  text-transform:uppercase;margin-top:20px}
.et-result h3{font-size:26px;line-height:1.2;margin:0 0 10px}
.et-result p{margin-top:12px}
.et-scales{display:grid;gap:16px;margin:24px 0 26px}
.et-scale-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.et-scale-head>span{font-size:14px;font-weight:700;color:var(--purple-d)}
.et-scale p{font-size:14px;color:var(--muted);margin-top:6px}
/* Шаг, который пока не получается, помечен цветом полосы и словом, а не
   значком «плохо»: это дефицит навыка, а не оценка человека. Слово нужно
   потому, что по одному цвету ориентируется не каждый. */
.et-scale.is-weak .et-bar i{background:var(--amber)}
.et-weak-label{
  font-size:12px;font-weight:700;color:var(--amber);margin-left:8px;
  letter-spacing:.02em;text-transform:none}
.et-first{padding:16px 18px;background:var(--bg-soft);border-radius:14px}
/* Предупреждение о бездумных ответах. Янтарная рамка, а не красная: человек
   ничего не сломал, ему просто стоит пройти ещё раз. */
.et-warn{
  padding:14px 16px;margin-bottom:18px;font-size:14px;
  border-left:4px solid var(--amber);background:#FFFBEB;border-radius:0 14px 14px 0}

@media (max-width:720px){
  .et-intro,.et-run,.et-result{padding:22px 18px}
  .et-opts{grid-template-columns:1fr}
  .et-opt{text-align:left;padding:12px 14px}
  .et-result h3{font-size:22px}
  .et-nav .btn{width:100%}
  .et-intro .btn+.btn{margin-left:0;margin-top:10px}
}

/* Полоса прогресса ползёт при каждом ответе — сорок раз за тест. Кому
   движение на экране мешает или вызывает тошноту, тот выключил анимации
   в системе, и мы это обязаны услышать. */
@media (prefers-reduced-motion:reduce){
  .et-bar i{transition:none}
  .et-opt{transition:none}
}