/* Слайды с демонстрации: лицо слайда (общее для превью в тексте и для диалога) и
   сам лайтбокс. Размеры внутри лица — в единицах ширины рамки (cqw), поэтому один
   и тот же слайд читаем и в превью на 340px, и в диалоге на 960px. */

.slide-frame { container-type: inline-size; }
/* A real frame of the pair's screen (А7): the picture as it was, a glued scroll can be tall. */
.slide-shot {
  display: block;
  width: 100%;
  max-height: 70dvh;
  object-fit: contain;
  object-position: top;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.nt-slide .slide-shot { max-height: 420px; }
.slide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-3);
  max-height: 74dvh;
  overflow-y: auto;
}
.slide-grid__item {
  display: grid;
  gap: var(--s-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: var(--fs-12);
  text-align: left;
  cursor: zoom-in;
}
.slide-grid__item .slide-shot { aspect-ratio: 16 / 10; object-fit: cover; }
.slide-grid__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-md); }
.nt-head__screens { justify-self: start; }
.slide-face {
  display: grid;
  align-content: start;
  gap: 2.4cqw;
  aspect-ratio: 16 / 9;
  padding: 4.5cqw 5cqw;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-left: 1.2cqw solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  color: var(--text);
  text-align: left;
}
.slide-face__title {
  font-family: var(--font-display);
  font-size: 5.4cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.slide-face__lines {
  display: grid;
  gap: 1.2cqw;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: 3.5cqw;
  line-height: 1.3;
}
.slide-face__lines li::before { content: "—  "; color: var(--text-3); }
.slide-face__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 0.8cqw;
  font-size: 3.6cqw;
}
.slide-face__cell {
  display: grid;
  place-items: center;
  padding: 1.6cqw 1cqw;
  border-radius: 0.8cqw;
  background: var(--surface-2);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
}
.slide-face__cell.is-head { background: transparent; color: var(--text-2); font-weight: 600; font-family: inherit; }
.slide-face__cell.is-blank { visibility: hidden; }

/* ---------- Превью внутри текста конспекта ---------- */
.nt-slide {
  display: grid;
  gap: var(--s-2);
  width: min(100%, 360px);
  margin: var(--s-2) 0 var(--s-1);
}
/* Кнопка — прозрачная накладка на всё превью, а не обёртка вокруг него: в <button>
   нельзя класть абзацы и списки, из которых собрано лицо слайда. */
.nt-slide__box { position: relative; }
.nt-slide__btn {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  cursor: zoom-in;
  transition: box-shadow var(--dur-state) var(--ease-out);
}
.nt-slide__btn:hover { box-shadow: var(--shadow-sm); }
.nt-slide__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nt-slide__cap { color: var(--text-3); font-size: var(--fs-12); }

/* Прыжок из поиска приводит на слайд той же разовой вспышкой, что и на раздел. */
.nt-slide.is-called { animation: nt-hw-call 1.8s var(--ease-out); border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) {
  .nt-slide.is-called { animation: none; outline: 2px solid var(--accent); outline-offset: 4px; }
}

/* На бумаге слайд — такое же содержимое, как абзац; подсказка «увеличить» ни к чему. */
@media print {
  .nt-slide { break-inside: avoid; }
  .nt-slide__cap { display: none; }
}

/* ---------- Лайтбокс ---------- */
.slidebox {
  width: min(960px, calc(100vw - 2 * var(--gutter)));
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: transparent;
  overflow: visible;
}
.slidebox:not([open]) { display: none; }
.slidebox::backdrop {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.slidebox__card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.slidebox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.slidebox__cap { color: var(--text-2); font-size: var(--fs-14); }