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

/* ── Quiz ─────────────────────────────────────────────── */
.mc-question { margin-bottom: 28px; }
.mc-question__text { 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; }

/* ── Results ──────────────────────────────────────────── */
.results-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; min-height: calc(100% - 52px);
}
.results-card {
  background:
    linear-gradient(170deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 32%, rgba(255,255,255,0) 60%),
    var(--glass-bg-strong);
  -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);
  padding: 44px 48px; box-shadow: var(--glass-shadow-lg), inset 0 0 0 1px var(--glass-border-2);
  text-align: center; max-width: 460px; width: 100%;
}
.results-score { font-size: 3.5rem; font-weight: 800; color: var(--indigo); line-height: 1; }
.results-of    { font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.results-stars { font-size: 2.2rem; letter-spacing: 6px; margin: 16px 0; }
.results-msg   { font-size: .95rem; color: var(--muted); margin-bottom: 28px; line-height: 1.55; }
.results-btns  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-outline {
  padding: 10px 22px; border: 2px solid var(--indigo);
  border-radius: 24px; background: transparent; color: var(--indigo);
  font-size: .85rem; font-weight: 700; cursor: pointer; transition: all .2s;
}
.btn-outline:hover { background: var(--indigo); color: #fff; }
.btn-primary {
  padding: 10px 22px; border: none; border-radius: 24px;
  background: var(--indigo); color: #fff;
  font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .2s;
}
.btn-primary:hover { background: #4A3DC0; }

/* ── 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; }

.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; }

/* — Кнопки навигации / первичные — */
.nav-btn, .btn-primary, .btn-outline { border-radius: 999px; font-family: var(--font-sans); }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }

/* — Медиа: стекло + тонированные типы по токенам вместо хардкод-оттенков — */
.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));
}