/* === widgets.css — квиз, результаты, тост, медиа-заглушки, интерактивные задания === */

/* ── Quiz ─────────────────────────────────────────────── */
.mc-question { margin-bottom: 28px; }
/* Антиква у формулировки вопроса — четвёртое и последнее правило, уцелевшее
   от `slides.css`. Для editorial-страниц его дублирует `editorial.css`,
   но здесь оно принадлежит самому виджету и работает вне зависимости
   от системы страниц. */
.mc-question__text { font-family: var(--font-serif); font-weight: 700; font-size: .95rem; margin-bottom: 12px; line-height: 1.5; }
.mc-options  { display: flex; flex-direction: column; gap: 8px; }
.mc-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 2px solid var(--border);
  border-radius: 9px; cursor: pointer; background: var(--surface);
  text-align: left; font-size: .88rem; width: 100%;
  transition: border-color .15s, background .15s;
}
.mc-option:hover:not(:disabled) { border-color: var(--indigo); background: var(--indigo-lt); }
.mc-letter {
  width: 26px; height: 26px; border-radius: 50%; background: #EBEBF5;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
.mc-option.is-correct            { border-color: var(--green); background: #ECFDF5; }
.mc-option.is-correct .mc-letter { background: var(--green); color: #fff; }
.mc-option.is-wrong              { border-color: var(--red); background: #FEF2F2; }
.mc-option.is-wrong .mc-letter   { background: var(--red); color: #fff; }
.mc-feedback { font-size: .82rem; margin-top: 7px; font-weight: 600; min-height: 18px; }

/* ── Toast ────────────────────────────────────────────── */
/* Нижняя панель стала плавающей (см. --chrome-bottom в tokens.css) —
   тост поднят над ней и оформлен стеклом вместо сплошной заливки. */
.toast {
  position: fixed; bottom: calc(var(--chrome-bottom) + 12px); left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--glass-bg-strong); color: var(--ink); padding: 10px 26px;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-radius: var(--glass-radius); font-size: .85rem; opacity: 0;
  box-shadow: var(--glass-shadow-lg), inset 0 0 0 1px var(--glass-border-2);
  transition: all .32s var(--ease-glass); pointer-events: none; z-index: 200;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══ Интерактивная начинка (медиа NotebookLM + задания) ══ */

/* ── Медиа-заглушки ─────────────────────────────────────── */
.media-embed {
  margin: 14px 0 6px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--indigo);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.media-embed--audio        { border-left-color: #3D2DBE; }
.media-embed--video        { border-left-color: #D97706; }
.media-embed--presentation { border-left-color: #059669; }
.media-embed--mindmap      { border-left-color: #DB2777; }
.media-embed--infographic  { border-left-color: #0369A1; }

.media-embed__label {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  font-weight: 700; font-size: .9rem; color: var(--text);
  background: var(--indigo-lt);
  border-bottom: 1px solid var(--border);
}
.media-embed--video .media-embed__label        { background: #FEF3C7; }
.media-embed--presentation .media-embed__label  { background: #ECFDF5; }
.media-embed--mindmap .media-embed__label       { background: #FDF2F8; }
.media-embed__label span { font-size: 1.15rem; line-height: 1; }

.media-embed__slot audio { width: 100%; display: block; }
.media-embed__slot video,
.media-embed__slot img   { width: 100%; display: block; max-height: 440px; }
.media-embed__slot video { background: #000; object-fit: contain; }
.media-embed__slot img   { background: var(--glass-bg-soft); object-fit: contain; }

/* Ментальная карта — отдельный документ в рамке.
   ⚠ width задаётся явно: при одном лишь aspect-ratio браузер вправе считать
   ширину ОТ высоты (грабля №2 editorial-системы, ловилась дважды).
   min-height не ставить по той же причине. */
.media-embed__frame {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  border: 0; background: transparent;
}
/* Листалка презентаций и инфографики. Слайд 16:9 плюс поле под стрелки
   и счётчик; у инфографики лист высокий и прокручивается внутри рамки. */
.media-embed__frame--deck { aspect-ratio: 16 / 11; }

/* Ниже 700px карта разворачивается вертикально: 16:10 на телефоне дало бы
   на 29 узлов полосу в 210px высотой. Листалке высота нужна по другой
   причине — на узкой рамке слайд 16:9 съёживается, и остаётся поле под
   стрелки, которые на телефоне стоят по бокам. */
@media (max-width: 700px) {
  .media-embed__frame { aspect-ratio: 3 / 4; }
  .media-embed__frame--deck { aspect-ratio: 4 / 5; }
}

/* Раскрытие карты, презентации или инфографики поверх страницы по кнопке
   внутри рамки. z-index выше тоста (200) и верхней вуали (150) — иначе они
   лягут поверх. aspect-ratio обязательно снять: с ним высота считалась бы
   от пропорции, а не от inset (грабля №2).

   ⚠ Точка отсчёта для `fixed` — ОКНО, и это держится на одной строке
   в base.css: `.slide.is-active { transform: none }`. Пока там стоял
   тождественный `scale(1)`, точкой отсчёта был сам слайд, а он прокручиваемый
   контейнер: рамка вставала в начало прокрутки вместо экрана читателя
   (замер: `top: -11663` при прокрутке 11663). Прежний комментарий здесь
   утверждал обратное — он был написан по замеру в среде с включённым
   `prefers-reduced-motion`, где трансформ погашен и дефект не воспроизводится. */
.media-embed__frame.is-expanded {
  position: fixed; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; z-index: 210;
  background: var(--paper);
}
/* Обвязку на время раскрытия гасит media.js теми же классами .nav--hidden
   и .chrome--hidden, которыми пользуется nav.js на обложке. Своего правила
   здесь нет намеренно: механизм уже есть и проверен. */

.media-embed__note {
  margin: 0; padding: 12px 18px; font-size: .85rem;
  color: var(--muted); line-height: 1.55;
}

/* Заглушка при пустом data-src — пунктир стал холодным (glass-border-2) */
.media-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 7px;
  padding: 32px 22px; margin: 14px;
  border: 2px dashed var(--glass-border-2);
  border-radius: var(--glass-radius);
  background: var(--glass-bg-soft);
  color: var(--muted);
}
.media-ph__icon  { font-size: 2.4rem; line-height: 1; }
.media-ph__title { font-weight: 700; font-size: .96rem; color: var(--text); }
.media-ph__hint  { font-size: .78rem; color: var(--muted); max-width: 480px; line-height: 1.5; }
.media-ph code {
  background: var(--indigo-lt); padding: 1px 6px; border-radius: 5px;
  font-size: .76rem; color: var(--indigo); font-weight: 600;
}

/* ── «Найди пару» (Duolingo-стиль) ──────────────────────── */
.match-game { margin: 12px 0 6px; }
.match-game__hint { font-size: .82rem; color: var(--muted); margin: 0 0 12px; }
.match-pair { display: none; }
.match-game__board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
.match-item {
  padding: 12px 14px; border: 2px solid var(--border); border-radius: 9px;
  background: var(--surface); cursor: pointer; text-align: left;
  font-size: .86rem; color: var(--text); width: 100%; line-height: 1.4;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.match-item:hover:not(:disabled) { border-color: var(--indigo); background: var(--indigo-lt); }
.match-item.is-selected {
  border-color: var(--indigo); background: var(--indigo-lt);
  box-shadow: 0 0 0 3px rgba(61,45,190,.16);
}
.match-item.is-correct { border-color: var(--green); background: #ECFDF5; cursor: default; }
.match-item.is-wrong   { border-color: var(--red);   background: #FEF2F2; animation: match-shake .34s; }
.match-item:disabled   { cursor: default; }
@keyframes match-shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}
.match-game__reset {
  margin-top: 14px; padding: 7px 16px; border-radius: 20px;
  border: 2px solid var(--border); background: var(--surface);
  font-size: .8rem; font-weight: 700; color: var(--indigo); cursor: pointer;
  transition: all .2s;
}
.match-game__reset:hover { border-color: var(--indigo); background: var(--indigo-lt); }
.match-game.is-complete .match-game__reset { border-color: var(--green); color: var(--green); }

/* ── Карточки-перевёртыши ───────────────────────────────── */
/* backdrop-filter нестабилен на элементах с 3D-трансформацией (rotateY),
   поэтому стекло даём контейнеру-обёртке, а грани карточки — просто
   полупрозрачным фоном без blur. */
.flashcards {
  margin: 12px 0 6px; padding: 14px;
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 0 0 1px var(--glass-border-2);
}
.flashcards__hint { font-size: .82rem; color: var(--muted); margin: 0 0 12px; }
.flashcards__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.flashcard {
  border: none; background: none; padding: 0; cursor: pointer;
  perspective: 900px; height: 122px; font-family: inherit;
}
/* display: block обязателен и не декоративен. Разметка виджета отдаёт внутренним
   контейнером <span>, то есть строчный элемент, а строчный элемент игнорирует и
   width/height, и transform. Без этой строки бокс .flashcard__inner был 0×0,
   грани карточки (absolute, inset: 0) сжимались до размера собственного текста
   и наползали друг на друга, а переворот не выполнялся вовсе. Замерено на
   слайдах 10, 12 и 15: карточка 153×122, лицевая грань 24×24. */
.flashcard__inner {
  display: block;
  position: relative; width: 100%; height: 100%;
  transition: transform .5s; transform-style: preserve-3d;
}
.flashcard.is-flipped .flashcard__inner { transform: rotateY(180deg); }
.flashcard__face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px; border-radius: var(--glass-radius-sm); box-shadow: var(--glass-shadow); line-height: 1.4;
  /* Длинное русское слово в карточку по ширине не влезает и вылезает за край:
     «Словообразовательная цепочка» при поле карточки 167px давала 170px.
     Переносим по слогам — заменять термин на короткий нельзя, он из источника.

     Именно `anywhere`, а не `break-word`. Грань — flex-контейнер, текст в ней
     анонимный flex-элемент с min-width: auto, то есть шириной по min-content.
     `break-word` на min-content не влияет вовсе и потому здесь бесполезен
     (замерено: с ним оставалось те же 170 против 167); `anywhere` уменьшает
     min-content, и слово наконец переносится. */
  overflow-wrap: anywhere; hyphens: auto;
}
.flashcard__front { background: var(--indigo); color: #fff; font-weight: 700; font-size: .92rem; }
.flashcard__front::after {
  content: '↻'; position: absolute; bottom: 7px; right: 10px;
  font-size: .8rem; opacity: .6; font-weight: 400;
}
.flashcard__back {
  background: var(--surface); color: var(--text);
  border: 2px solid var(--green); font-size: .8rem; transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .flashcard__inner { transition: none; }
}

/* ── Мини-тест (автономный) ─────────────────────────────── */
.inline-quiz {
  margin: 12px 0 6px; padding: 14px 16px;
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 0 0 1px var(--glass-border-2);
}
.inline-quiz .mc-question:last-child { margin-bottom: 4px; }

/* — Кнопки навигации — */
/* .btn-primary и .btn-outline сняты вместе с блоком Results: последним их
   носителем была легаси-страница «Результаты», перенесённая на editorial. */
.nav-btn { border-radius: 999px; font-family: var(--font-sans); }

/* — Медиа: стекло + тонированные типы по токенам вместо хардкод-оттенков — */
.media-embed {
  border: none;
  border-left: 4px solid var(--accent);
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 0 0 1px var(--glass-border-2);
}
.media-embed--audio        { border-left-color: var(--accent); }
.media-embed--video        { border-left-color: var(--gold); }
.media-embed--presentation { border-left-color: var(--good); }
.media-embed--mindmap      { border-left-color: color-mix(in srgb, var(--bad) 55%, var(--accent) 45%); }
.media-embed--infographic  { border-left-color: color-mix(in srgb, var(--gold) 45%, var(--ink) 55%); }
.media-embed__label {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-border-2);
  font-family: var(--font-sans);
}
.media-embed--video .media-embed__label        { background: color-mix(in srgb, var(--gold) 16%, var(--glass-bg-soft)); }
.media-embed--presentation .media-embed__label { background: color-mix(in srgb, var(--good) 16%, var(--glass-bg-soft)); }
.media-embed--mindmap .media-embed__label      { background: color-mix(in srgb, var(--accent) 16%, var(--glass-bg-soft)); }
.media-embed__note { color: var(--ink-soft); }
.media-ph code { background: var(--glass-bg-strong); color: var(--accent); }

/* — Интерактив: шрифты, радиусы, стеклянные поверхности — */
.mc-option, .match-item, .match-game__hint, .flashcards__hint,
.media-embed__note, .mc-letter { font-family: var(--font-sans); }
.mc-option, .match-item { border-radius: var(--glass-radius-sm); }

.mc-option {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 0 0 1px var(--glass-border-2);
  transition: border-color .32s var(--ease-glass), background .32s var(--ease-glass),
    box-shadow .32s var(--ease-glass), transform .32s var(--ease-glass);
}
.mc-option:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border-2));
  background: color-mix(in srgb, var(--accent) 10%, var(--glass-bg-strong));
  box-shadow: var(--glass-shadow);
  transform: translateY(-1px);
}
.mc-option.is-correct {
  border-color: color-mix(in srgb, var(--good) 55%, var(--glass-border-2));
  background: color-mix(in srgb, var(--good) 16%, var(--glass-bg-strong));
}
.mc-option.is-wrong {
  border-color: color-mix(in srgb, var(--bad) 55%, var(--glass-border-2));
  background: color-mix(in srgb, var(--bad) 16%, var(--glass-bg-strong));
}

.match-item {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 0 0 1px var(--glass-border-2);
  transition: border-color .32s var(--ease-glass), background .32s var(--ease-glass),
    box-shadow .32s var(--ease-glass), transform .32s var(--ease-glass);
}
.match-item:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border-2));
  background: color-mix(in srgb, var(--accent) 10%, var(--glass-bg-strong));
  box-shadow: var(--glass-shadow);
  transform: translateY(-1px);
}
.match-item.is-selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border-2));
  background: color-mix(in srgb, var(--accent) 14%, var(--glass-bg-strong));
  box-shadow: var(--glass-shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.match-item.is-correct {
  border-color: color-mix(in srgb, var(--good) 55%, var(--glass-border-2));
  background: color-mix(in srgb, var(--good) 16%, var(--glass-bg-strong));
}
.match-item.is-wrong {
  border-color: color-mix(in srgb, var(--bad) 55%, var(--glass-border-2));
  background: color-mix(in srgb, var(--bad) 16%, var(--glass-bg-strong));
}
.match-game__reset {
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition: background .32s var(--ease-glass), border-color .32s var(--ease-glass),
    box-shadow .32s var(--ease-glass);
}
.match-game__reset:hover { background: var(--glass-bg-strong); box-shadow: var(--glass-shadow); }

/* Грани флеш-карточки — полупрозрачный плоский фон без blur (см. комментарий выше) */
.flashcard__front { background: color-mix(in srgb, var(--accent) 88%, transparent); }
.flashcard__back  {
  background: var(--glass-bg-strong);
  border-color: color-mix(in srgb, var(--good) 45%, var(--glass-border-2));
}