/* «Свайпы». Макет — «README - Свайпы (палитра v2)».

   Сессия на всё окно: сверху «Закрыть», полоса сессии и счётчик, ниже
   поле с одним вопросом. Колонка 640 px по центру: вопрос, схема,
   варианты и кнопки лежат на одной вертикальной оси. */

/* ── Роли экрана ─────────────────────────────────────────────────────
   Палитра v2 теперь общая (tokens.css); здесь только то, что есть лишь
   на этом экране. Заливки одинаковы в обеих темах, «чернила» — свои. */
body[data-view="quiz"] {
  --q-green: #1DB954; --q-green-ink: var(--accent-ink); --q-green-hover: #2BC764;
  --q-brass: #D9B44A; --q-brass-ink: var(--brass);
  --q-bad: #C87C68; --q-bad-ink: var(--bad-ink);
  --q-on-green: var(--on-accent); --q-on-brass: #2A1D00;
  --q-key: #1F2623; --q-track: #1E2421; --q-rest: #161B19;
  --q-say: #1B221E; --q-say-ok: #0E6B33; --q-say-ok-text: #EDF2EF;
  --q-glow-ok: var(--glow-ok); --q-glow-bad: var(--glow-bad);
  --q-progress: var(--grad-progress);
  --q-overlay: rgba(5, 7, 6, .6);
  overflow: hidden;
}
:root[data-theme="light"] body[data-view="quiz"] {
  --q-key: #E8EBE6; --q-track: #DCE0DA; --q-rest: #DFE3DD;
  --q-say: #FFFFFF; --q-say-ok: rgba(14, 107, 51, .10); --q-say-ok-text: #121614;
  --q-overlay: rgba(18, 22, 20, .35);
}

/* Оболочка на время сессии прячется: выход — «Закрыть». */
body[data-view="quiz"] .rail, body[data-view="quiz"] .topbar { display: none }
#v-quiz.on {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  height: var(--vh, 100dvh);
  display: flex; flex-direction: column; background: var(--bg);
  padding: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ── Рейл сессии ── */
.qz-top { display: flex; align-items: center; gap: 16px; padding: 13px 20px 11px; flex: none }
.qz-icon {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted); cursor: pointer;
}
body.in-telegram .qz-icon { width: 44px; height: 44px }
@media (hover: hover) { .qz-icon:hover { color: var(--text); border-color: var(--line-2) } }
.qz-icon:focus-visible { outline: 2px solid var(--q-green-ink); outline-offset: 2px }
.qz-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--q-track); overflow: hidden }
.qz-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--q-progress); transition: width 450ms var(--ease) }
.qz-count { min-width: 44px; text-align: right; font-size: 12px; color: var(--muted); font-feature-settings: 'tnum' 1 }

/* ── Поле ──
   Исход читается сразу тремя вещами: подсветкой варианта, рамкой поля и
   свечением от нижней кромки. Свечение линейное: радиальное на широком
   поле выглядит косым. */
.qz-field {
  position: relative; flex: 1; min-height: 0; margin: 0 8px 8px;
  display: flex; flex-direction: column;
  border: 2px solid var(--q-rest); border-radius: 20px; overflow: hidden;
  transition: border-color 250ms ease;
}
.qz-field::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  pointer-events: none; opacity: 0; transition: opacity 250ms ease;
}
.qz-field.is-ok { border-color: var(--q-green-ink) }
.qz-field.is-ok::after { opacity: 1; background: linear-gradient(to top, var(--q-glow-ok), transparent) }
.qz-field.is-bad { border-color: var(--q-bad-ink) }
.qz-field.is-bad::after { opacity: 1; background: linear-gradient(to top, var(--q-glow-bad), transparent) }

.qz-scroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; padding: 24px 60px 8px }
/* Колонка тянется на всю высоту прокрутки, схема — единственный
   растяжимый слот: на низком окне первой уменьшается она, а вопрос и
   варианты остаются видны. Ниже своего минимума схема не сжимается —
   тогда прокручивается поле. */
.qz-col {
  max-width: 640px; min-height: 100%; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: transform 120ms ease, opacity 180ms ease;
}
.qz-col.is-dragging { transition: none; cursor: grabbing }
.qz-col.is-flying { opacity: 0 }
.qz-kicker { flex: none; margin-bottom: 14px; color: var(--muted); letter-spacing: .16em }
.qz-q { flex: none; margin: 0 0 20px; font-size: 20px; line-height: 29px; font-weight: 600; text-wrap: pretty }
.qz-media { flex: 1 1 0; min-height: 130px; max-height: 220px; margin-bottom: 20px; display: flex; justify-content: center }
.qz-media .qf { width: auto; height: 100%; max-width: min(100%, 560px) }
.qz-lead { flex: none; margin: 0; font-size: 15px; line-height: 22px; color: var(--muted) }
.qz-hint { flex: none; margin: 16px 0 0; font-size: 13.5px; line-height: 20px; color: var(--muted) }
.qz-hint.is-off { visibility: hidden }

/* ── Вариант ответа ──
   Левая кромка всегда 3 px: меняется цвет, а не геометрия, и карточка не
   дёргается при смене состояния. Приглушение — цветом текста, не
   прозрачностью. */
.qz-opts { flex: none; display: grid; gap: 10px; text-align: left }
.qz-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 14px;
  color: var(--text); font-family: inherit; font-size: 15px; line-height: 22px; text-align: left; cursor: pointer;
  transition: background-color var(--t-press) ease, border-color var(--t-press) ease;
}
@media (hover: hover) { .qz-opt:not(:disabled):hover { background: var(--panel-2); border-color: var(--line-2) } }
.qz-opt:disabled { cursor: default; pointer-events: none }
.qz-opt:focus-visible { outline: 2px solid var(--q-green-ink); outline-offset: 2px }
.qz-key {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 10px; background: var(--q-key); color: var(--muted); font-size: 11px;
}
/* Выбран, но не проверен — латунь: значение есть, окончательным его
   считать рано. Зелёный остаётся за верным. */
.qz-opt.is-sel { background: var(--brass-wash); border-color: var(--q-brass-ink) }
.qz-opt.is-sel .qz-key { background: var(--q-brass); color: var(--q-on-brass) }
.qz-opt.is-right { background: var(--accent-wash); border-color: var(--q-green-ink) }
.qz-opt.is-right .qz-key { background: var(--q-green); color: var(--q-on-green) }
.qz-opt.is-wrong { background: var(--bad-wash); border-color: var(--q-bad-ink); color: var(--q-bad-ink) }
.qz-opt.is-wrong .qz-key { background: var(--q-bad); color: var(--q-on-brass) }
.qz-opt.is-rest { color: var(--muted) }

/* ── Зона действия ──
   Кнопки по центру экрана. Сплошная зелёная — только «Дальше»: заливка
   означает подтверждение. Выключенная кнопка — цветом, а не прозрачностью. */
.qz-act { position: relative; z-index: 2; flex: none; min-height: 104px; display: flex; align-items: center; justify-content: center; padding: 12px 16px 16px }
.qz-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.qz-btn {
  min-height: 48px; padding: 14px 30px; border-radius: 99px; border: 1.5px solid transparent;
  font-family: inherit; font-size: 15px; line-height: 1.2; font-weight: 600; cursor: pointer;
  transition: background-color var(--t-press) ease, border-color var(--t-press) ease;
}
.qz-btn:focus-visible { outline: 2px solid var(--q-green-ink); outline-offset: 2px }
.qz-btn--solid { background: var(--q-green); color: var(--q-on-green) }
.qz-btn--line { background: var(--panel); border-color: var(--q-green-ink); color: var(--text) }
.qz-btn--ghost { background: var(--panel-3); color: var(--text) }
@media (hover: hover) {
  .qz-btn--solid:hover { background: var(--q-green-hover) }
  .qz-btn--line:not(:disabled):hover, .qz-btn--ghost:hover { background: var(--panel-2) }
}
.qz-btn:disabled { background: var(--panel); border-color: var(--line); color: var(--muted); cursor: default }

/* ── Наставник ──
   Не носитель статуса: без него экран понятен. На широком окне стоит в
   левом нижнем углу поля, вне потока, реплика над ним — сбоку она
   перекрывала бы кнопки. На узком — маленькая фигура с репликой над
   кнопками. */
.qz-mentor { pointer-events: none }
.qz-mentor-img { display: block }
.qz-say {
  padding: 11px 14px; border-radius: 14px 14px 14px 4px;
  background: var(--q-say); border: 1px solid var(--line); color: var(--text);
  font-size: 13.5px; line-height: 20px; font-weight: 600; text-align: left;
  animation: qz-say 220ms ease both; transition: opacity 220ms ease;
}
.qz-say.is-ok { background: var(--q-say-ok); border-color: transparent; color: var(--q-say-ok-text) }
.qz-say.is-bad { border-left: 3px solid var(--q-bad-ink) }
.qz-say.is-gone { opacity: 0 }
@keyframes qz-say { from { opacity: 0; transform: translateY(4px) } }
@media (min-width: 1100px) {
  .qz-mentor { position: absolute; left: 18px; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px }
  .qz-mentor-img { width: 86px; height: auto; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6)) }
  .qz-say { width: min(210px, 21vw) }
}
@media (max-width: 1099px) {
  .qz-act { flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 8px 12px 12px }
  .qz-mentor, .qz-btns { width: 100%; max-width: 640px; margin: 0 auto }
  .qz-mentor { display: flex; align-items: flex-end; gap: 8px; min-height: 56px }
  .qz-mentor:empty { display: none }
  .qz-mentor-img { order: -1; width: 44px; height: 56px; object-fit: cover; object-position: top; flex: none }
  .qz-say { flex: 1 }
  .qz-btns { flex-wrap: nowrap }
  .qz-btn { flex: 1 1 0; padding: 14px 16px }
}
@media (max-width: 640px) {
  .qz-top { padding: 10px 12px 8px; gap: 12px }
  .qz-scroll { padding: 16px 16px 8px }
  .qz-field { margin: 0 6px 6px }
}

/* ── Тост и разбор ── */
.qz-toast {
  position: fixed; left: 50%; bottom: 128px; z-index: 60; transform: translateX(-50%);
  padding: 10px 16px; border-radius: 99px; background: var(--panel-3); color: var(--text);
  font-size: 13.5px; pointer-events: none; opacity: 0; transition: opacity var(--t-toast) ease;
}
.qz-toast.on { opacity: 1 }
.qz-modal {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
  background: var(--q-overlay); opacity: 0; transition: opacity 220ms ease;
}
.qz-modal[hidden] { display: none }
.qz-modal.on { opacity: 1 }
.qz-modal-in {
  position: relative; width: min(520px, 100%); max-height: 85%; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 24px;
}
.qz-modal-x { position: absolute; top: 14px; right: 14px }
.qz-modal-t { display: flex; align-items: center; gap: 8px; margin: 0 48px 12px 0; font-size: 20px; line-height: 29px; font-weight: 600 }
.qz-modal-t.is-ok { color: var(--q-green-ink) }
.qz-modal-t.is-bad { color: var(--q-bad-ink) }
.qz-modal-lead { margin: 0 0 10px; font-size: 15px; line-height: 22px; color: var(--text) }
.qz-modal-why { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted) }

@media (prefers-reduced-motion: reduce) {
  .qz-col, .qz-bar i, .qz-field, .qz-field::after, .qz-say, .qz-modal, .qz-toast { transition: none; animation: none }
}

/* ── Схемы ───────────────────────────────────────────────────────── */
/* qf:begin — страница проверки берёт стили схем отсюда, между метками. */
.qf { display: block; width: 100%; height: auto }
.qf-grid { fill: none; stroke: var(--line); stroke-width: 1 }
.qf-axis, .qf-tick { stroke: var(--line-2); stroke-width: 1 }
.qf-mid { stroke: var(--line-2); stroke-width: 1 }
.qf-frame { fill: none; stroke: var(--line-2); stroke-width: 1 }
.qf-floor { stroke: var(--muted-3); stroke-width: 2 }
.qf-mark { stroke: var(--brass); stroke-width: 1.2; stroke-dasharray: 3 3 }
.qf-mark--bad { stroke: var(--bad-ink) }
.qf-dimline { stroke: var(--muted-3); stroke-width: 1 }
.qf-dimline--ok { stroke: var(--accent-ink); stroke-width: 1.6 }
.qf-dimline--bad { stroke: var(--bad-ink); stroke-width: 1.6 }

.qf-main { fill: none; stroke: var(--accent-ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round }
.qf-main--thick { stroke-width: 2.4 }
.qf-main--thin { stroke-width: 1.3 }
.qf-main--dim { stroke: var(--muted-3); opacity: .7 }
.qf-main--bad { stroke: var(--bad-ink) }
.qf-main--warn { stroke: var(--brass) }
.qf-main--ok { stroke: var(--accent-ink) }
.qf-alt { fill: none; stroke: var(--muted-3); stroke-width: 1.3; stroke-dasharray: 4 3 }
.qf-fill { fill: var(--accent-wash); stroke: none }
.qf-shade { fill: var(--panel-3); opacity: .6; stroke: none }
.qf-shade--ok { fill: var(--accent-wash); opacity: 1 }
.qf-shade--bad { fill: var(--bad-wash); opacity: 1 }
.qf-shade--warn { fill: var(--brass-wash); opacity: 1 }

.qf-bar { stroke: var(--muted-3); stroke-width: 3; stroke-linecap: round }
.qf-bar--main, .qf-bar--ok { stroke: var(--accent-ink) }
.qf-bar--bad { stroke: var(--bad-ink); stroke-width: 3.4 }
.qf-tail { stroke: var(--line-2); stroke-width: 1.1 }
.qf-noise { fill: none; stroke: var(--muted-3); stroke-width: 1; opacity: .45 }
.qf-refl { fill: none; stroke: var(--muted-3); stroke-width: .8; stroke-dasharray: 2 2; opacity: .8 }
.qf-arc { fill: none; stroke: var(--line-2); stroke-width: 1.4 }
.qf-wire { stroke: var(--muted-3); stroke-width: 2.4; stroke-linecap: round }
.qf-wire--ok { stroke: var(--accent-ink) }

.qf-src { fill: var(--accent-ink) }
.qf-person { fill: var(--panel-2); stroke: var(--text); stroke-width: 1.4 }
.qf-person-l { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round }
.qf-magnet { fill: var(--panel-3); stroke: var(--line-2); stroke-width: 1 }
.qf-spk { fill: var(--panel-2); stroke: var(--text); stroke-width: 1.2 }

.qf-box { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 1 }
.qf-box--ok { fill: var(--accent-wash); stroke: var(--accent-hi) }
.qf-box--bad { fill: var(--bad-wash); stroke: var(--bad-ink) }
.qf-box--warn { fill: var(--brass-wash); stroke: var(--brass) }
.qf-box--dim { fill: var(--panel); stroke: var(--line); stroke-dasharray: 3 2 }
.qf-level { fill: var(--muted-3) }
.qf-level--ok { fill: var(--accent) }
.qf-level--bad { fill: var(--bad-ink) }
.qf-level--warn { fill: var(--brass) }
.qf-level--dim { fill: var(--line-2) }
.qf-track { fill: var(--panel-3) }
.qf-panel { fill: var(--panel); stroke: var(--line); stroke-width: 1 }
.qf-panel--bad { stroke: var(--bad-ink); stroke-dasharray: 4 3 }
.qf-formula { fill: var(--panel); stroke: var(--line-2); stroke-width: 1 }
.qf-hi { fill: var(--accent-wash); stroke: var(--accent-edge); stroke-width: 1 }

.qf-arrow { fill: none; stroke: var(--muted-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
.qf-arrow--ok { stroke: var(--accent-ink) }
.qf-arrow--bad { stroke: var(--bad-ink) }
.qf-arrow--warn { stroke: var(--brass) }
.qf-arrow--dim { stroke: var(--line-2) }
.qf-arrow--thick { stroke-width: 2.6 }
.qf-dot { fill: var(--accent-ink) }
.qf-dot--dim { fill: var(--muted-3) }
.qf-dot--bad { fill: var(--bad-ink) }
.qf-dot--tiny { opacity: .75 }

.qf-t { font-family: var(--font-mono); font-size: 9px; fill: var(--muted-3) }
.qf-tl { font-family: var(--font-ui); font-size: 10px; fill: var(--text) }
.qf-tb { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; fill: var(--text) }
.qf-th { font-family: var(--font-mono); font-size: 9px; fill: var(--muted-3); letter-spacing: .04em }
.qf-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 500; fill: var(--muted-3); letter-spacing: .06em }
.qf-t--box { fill: var(--text) }
.qf-t--ok, .qf-tl--ok, .qf-tag--ok { fill: var(--accent-ink) }
.qf-t--bad, .qf-tl--bad, .qf-tag--bad { fill: var(--bad-ink) }
.qf-t--warn, .qf-tl--warn { fill: var(--brass) }
.qf-t--dim, .qf-tl--dim, .qf-tag--dim { fill: var(--muted-3) }
/* qf:end */

@media (prefers-reduced-motion: reduce) { .qz-card { transition: none } }