/* ═══════════════════════════════════════════════════════════════
   emm-razbor.css · блок персонального разбора. Общий для /diagnostics/ и
   /quiz/. Опирается на токены страницы (--ink, --ochre, --hair, --paper),
   собственной палитры не заводит: иначе блок будет выглядеть чужим на обеих.
   ═══════════════════════════════════════════════════════════════ */

.rz{margin-top:34px;padding-top:26px;border-top:1.5px solid var(--ink)}

/* Атрибут hidden скрывает элемент правилом [hidden]{display:none} из стилей
   браузера, а у него нулевая специфичность. Любой наш display по классу его
   перебивает. Замер 24.08.2026: строка «Собираю разбор…» с display:flex
   оставалась на экране после прихода ответа, то есть человек видел вечное
   ожидание над готовым текстом. Правило общее, чтобы это не повторилось на
   каждом новом блоке. */
.rz [hidden]{display:none !important}
.rz-head h3{font:600 1.32rem/1.25 Lora,Georgia,serif;color:var(--ink)}
.rz-sub{margin-top:8px;color:var(--text);font-size:1.02rem;line-height:1.5;max-width:60ch}

/* Кнопка запуска. Крупная и с подписью: она стоит рядом с цифрой потерь, и
   человек должен понимать, что нажатие ничего не стоит и ни к чему не ведёт. */
.rz-go,.rz-want{
  margin-top:18px;width:100%;max-width:460px;display:block;
  padding:15px 22px;border:1px solid transparent;border-radius:var(--r,10px);
  background:var(--ochre);color:#fff;cursor:pointer;
  font:500 1.12rem/1.25 Inter,sans-serif;text-align:center;
}
.rz-go small,.rz-want small{
  display:block;margin-top:3px;font-size:.9rem;font-weight:400;opacity:.85;
}
.rz-go:hover,.rz-want:hover{background:var(--ochre-deep,#8f4419)}
.rz-go:disabled{opacity:.6;cursor:default}
.rz-go:focus-visible,.rz-want:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Строка про передачу данных стоит ДО нажатия, а не после. Сказать об этом
   после отправки было бы уведомлением о свершившемся, а не предупреждением. */
.rz-note{margin-top:10px;color:var(--ash,#8a8580);font-size:.9rem;line-height:1.45;max-width:56ch}

/* Ожидание. Раньше это была строка с тремя точками: на 20-55 секунд такой
   сигнал слишком слаб, человек считает, что сломалось, и уходит. Теперь это
   заметная карточка, в которой видно движение. */
.rz-wait{
  margin-top:18px;padding:20px;border:1.5px solid var(--ochre);
  border-radius:var(--r,10px);background:var(--wash,#faf6f1);max-width:60ch;
}

/* Полоса не доходит до края сама: см. потолок 96% в emm-razbor.js. */
.rz-bar{
  height:6px;border-radius:100px;background:rgba(168,84,31,.16);overflow:hidden;
}
.rz-bar i{
  display:block;height:100%;width:0;border-radius:100px;background:var(--ochre);
  transition:width .9s linear;
}

.rz-steps{margin-top:16px;list-style:none;display:grid;gap:9px}
.rz-steps li{
  position:relative;padding-left:30px;color:var(--ash,#8a8580);
  font-size:1.02rem;line-height:1.4;
}
/* Кружок слева это состояние шага. Пустой, пульсирующий или с галочкой:
   три разных знака, а не только цвет (WCAG 1.4.1). */
.rz-steps li::before{
  content:"";position:absolute;left:0;top:.15em;width:19px;height:19px;
  border-radius:50%;border:2px solid rgba(168,84,31,.3);box-sizing:border-box;
}
.rz-steps li.now{color:var(--ink);font-weight:600}
.rz-steps li.now::before{
  border-color:var(--ochre);
  animation:rzPulse 1.4s ease-in-out infinite;
}
.rz-steps li.done{color:var(--stone,#6b6560)}
.rz-steps li.done::before{
  content:"✓";background:var(--ochre);border-color:var(--ochre);color:#fff;
  display:grid;place-items:center;font:700 12px/1 Inter,sans-serif;
}
@keyframes rzPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,84,31,.35)}
                   70%{box-shadow:0 0 0 7px rgba(168,84,31,0)}}
@media (prefers-reduced-motion:reduce){
  .rz-steps li.now::before{animation:none}
  .rz-bar i{transition:none}
}

.rz-hold{margin-top:14px;color:var(--ink);font-size:1rem;line-height:1.5}
.rz-hold b{font-weight:600}
.rz-timer{margin-top:6px;color:var(--ash,#8a8580);font-size:.92rem;min-height:1.2em}
@media (prefers-reduced-motion:reduce){.rz-dots i{animation:none;opacity:.6}}

.rz-out{margin-top:20px;max-width:70ch}
.rz-out p{margin-top:14px;color:var(--ink);font-size:1.06rem;line-height:1.62}
.rz-out p:first-child{margin-top:0}

/* Порог перед второй частью. Рамка и фон отделяют его от текста разбора:
   это не продолжение чтения, а место, где человек делает выбор. */
.rz-gate{
  margin-top:24px;padding:20px;border:1.5px solid var(--ochre);
  border-radius:var(--r,10px);background:var(--wash,#faf6f1);max-width:60ch;
}
.rz-gate p{color:var(--ink);font-size:1.04rem;line-height:1.55}
.rz-gate .rz-want{margin-top:16px}

.rz-plan{margin-top:24px;max-width:70ch}
.rz-blk{
  margin-top:24px;font:600 1.12rem/1.3 Inter,sans-serif;color:var(--ochre-deep,#8f4419);
}
.rz-blk:first-child{margin-top:0}
.rz-plan p{margin-top:8px;color:var(--ink);font-size:1.04rem;line-height:1.6}

.rz-after{
  margin-top:24px;padding-left:14px;border-left:3px solid var(--ochre);
  color:var(--text);font-size:1.02rem;line-height:1.55;max-width:60ch;
}

@media(max-width:759px){
  .rz{margin-top:26px;padding-top:20px}
  .rz-head h3{font-size:1.2rem}
  .rz-sub{font-size:1rem}
  .rz-go,.rz-want{max-width:none;padding:14px 18px;font-size:1.06rem}
  .rz-out p,.rz-plan p{font-size:1.04rem}
  .rz-gate{padding:16px}
  .rz-wait{padding:16px}
  .rz-steps li{font-size:1rem;padding-left:28px}
}