/* Попап-квиз подбора программы.

   Карточка тёмная при ЛЮБОЙ температуре страницы - тот же приём, что у
   заставки (zastavka.css) и у консоли формы: тёмная плашка поверх
   кремовой страницы читается как отдельный слой, а не как её часть.
   Поэтому токены темы здесь переобъявлены тёмным набором. Без этого
   общие компоненты - .btn-line, .lbl, .meta - брали бы цвета кремовой
   темы (тёмно-синий текст, глухое золото) и встали бы невидимыми на
   тёмном фоне.

   Фон и рамка повторяют .form-console из blocks.css: квиз и форма -
   один и тот же разговор о записи, и выглядеть они должны как одна
   поверхность, а не как два разных окна. */

.quiz{position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:var(--gap-3)}
/* Скрытые шаги и сам попап убираются атрибутом hidden. Правило нужно
   потому, что собственные display у блоков перебили бы его. */
.quiz[hidden],.quiz [hidden]{display:none}
body.quiz-on{overflow:hidden}

.quiz-veil{position:absolute;inset:0;
  background:color-mix(in srgb,var(--deep) 62%,transparent);
  animation:quiz-veil-in var(--dur-2) var(--ease) both}

.quiz-card{position:relative;width:min(560px,100%);max-height:88dvh;overflow-y:auto;
  padding:var(--gap-4);
  background:color-mix(in srgb,var(--deep) 88%,transparent);
  border:1px solid rgba(241,233,217,.18);
  backdrop-filter:blur(18px);
  --bg:var(--deep);--surface:var(--navy);
  --text:var(--cream);--text-soft:var(--text-muted);--text-dim:var(--slate);
  --line:var(--hair);--accent:var(--gold);--accent-ink:var(--ink);
  color:var(--text);
  animation:quiz-in var(--dur-3) var(--ease) both}

.quiz-x{position:absolute;top:6px;right:8px;width:44px;height:44px;padding:0;
  background:transparent;border:0;cursor:pointer;color:var(--cream);
  font:400 26px/1 var(--ui);opacity:.7;
  transition:opacity var(--dur-1) var(--ease)}

.quiz-count{display:block;margin:0 0 var(--gap-2)}
.quiz-title{font-size:var(--step-2);margin-bottom:var(--gap-3);padding-right:32px}
.quiz-q{font-family:var(--disp);font-size:var(--step-1);line-height:1.25;margin:0}
.quiz-note{color:var(--text-soft);margin-top:var(--gap-2)}

.quiz-options{display:grid;gap:10px;margin-top:var(--gap-3)}
/* Вариант ответа - крупная мишень, а не микрокнопка: на телефоне по ней
   попадают большим пальцем. Прописные из .btn здесь сняты - фразы в
   четыре слова капслоком не читаются. */
.quiz-option{width:100%;text-align:left;padding:15px 18px;
  font-size:var(--step-0);font-weight:500;letter-spacing:.02em;text-transform:none;
  border-color:rgba(241,233,217,.28);color:var(--cream);
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}

.quiz-cards{display:grid;gap:10px;margin-top:var(--gap-3)}
.quiz-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-2);
  padding:14px 16px;border:1px solid rgba(241,233,217,.18)}
.quiz-item-text{flex:1 1 200px;min-width:0}
.quiz-item h3{font-size:var(--step-1)}
.quiz-item .meta{margin:0;margin-top:4px}
/* Цена не должна переноситься посреди числа - разряды отделены обычным
   пробелом, и браузер считает его местом переноса. */
.quiz-item .meta span{white-space:nowrap}
.quiz-book{flex:0 0 auto}

.quiz-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--gap-3)}
.quiz-more{margin:var(--gap-3) 0 0;font-size:var(--step--1)}
.quiz-more a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

.quiz-foot{margin:var(--gap-3) 0 0}
.quiz-later{appearance:none;background:transparent;border:0;padding:0;cursor:pointer;
  color:var(--text-dim);font:500 var(--step--1)/1.4 var(--ui);
  text-decoration:underline;text-underline-offset:3px}

@keyframes quiz-veil-in{from{opacity:0}to{opacity:1}}
@keyframes quiz-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes quiz-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}

/* Телефон: карточка приходит снизу во всю ширину. Окно посреди экрана
   на 390 px оставляет по бокам поля, за которые всё равно никто не
   попадает пальцем, и съедает высоту, нужную вариантам ответа. */
@media (max-width:600px){
  .quiz{align-items:flex-end;padding:0}
  .quiz-card{width:100%;max-height:86dvh;padding:var(--gap-3) var(--gap-3) var(--gap-4);
    animation-name:quiz-up}
  .quiz-title{font-size:var(--step-1)}
  .quiz-book{width:100%}
}


@media (hover:hover){
  .quiz-x:hover{opacity:1}
  .quiz-option:hover{border-color:color-mix(in srgb,var(--gold) 60%,transparent);
    background:color-mix(in srgb,var(--gold) 12%,transparent)}
  .quiz-later:hover{color:var(--cream)}
}