/* Presentation / lesson slide viewer */

.pres-shell{
  max-width: 980px; margin: 0 auto; padding: 24px 20px 80px;
  position: relative; z-index: 1;
}
.pres-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.pres-title{ flex:1; min-width: 200px; }
.pres-title h1{ font-size: clamp(20px,3vw,26px); margin: 0 0 4px; }
.pres-title .meta{ font-size: 13px; color: var(--text-faint); }

.pres-actions{ display:flex; gap:10px; }
.pres-actions .btn{ padding: 10px 18px; font-size: 14px; }

.pres-stage{
  position: relative;
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.slide{
  display: none;
  aspect-ratio: 16/9;
  padding: 40px 48px;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(500px 260px at 10% -10%, rgba(58,92,255,.18), transparent 60%),
    radial-gradient(400px 240px at 100% 110%, rgba(58,92,255,.14), transparent 60%);
}
.slide.active{ display: flex; }
.slide .kicker{ color: var(--accent); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.slide h2{ font-size: clamp(20px, 3.6vw, 34px); margin: 0 0 16px; }
.slide p, .slide li{ font-size: clamp(13px, 1.8vw, 17px); color: var(--text-dim); }
.slide ul{ padding-left: 22px; list-style: disc; }
.slide li{ margin-bottom: 8px; }
.slide .slide-num-badge{
  position:absolute; bottom: 16px; right: 20px; font-size: 12px; color: var(--text-faint);
}
.slide table{ width:100%; border-collapse: collapse; font-size: clamp(11px,1.6vw,14px); }
.slide th, .slide td{ text-align:left; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.slide th{ color: var(--text); }

/* ---- 6 reusable slide types (см. «Дизайн-концепция презентаций») ---- */
.slide .type-badge{
  position:absolute; top:16px; left:20px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color: var(--text-faint);
  display:flex; align-items:center; gap:5px;
}

/* 1. Титульный */
.slide-title{ align-items:center; text-align:center; }
.slide-title h2{ font-size: clamp(24px, 4.4vw, 40px); }
.slide-title .kicker{ margin: 0 auto 14px; }

/* 2. Тезис/принцип — одна мысль крупным шрифтом */
.slide-thesis{ align-items:center; text-align:center; justify-content:center; }
.slide-thesis h2{ font-size: clamp(24px, 4.4vw, 38px); max-width: 640px; margin: 0 auto; }
.slide-thesis p{ max-width: 560px; margin: 12px auto 0; font-size: clamp(14px,2vw,18px); }

/* 3. Пример/скриншот — уже покрыт базовым .slide (текст+таблица/список) */
.slide-example{}

/* 4. Промпт-карточка — визуально отличается: акцентный фон + иконка копирования */
.slide-prompt{
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(232,166,60,.14), transparent 65%);
}
.slide-prompt .prompt-card{
  background: var(--bg-soft); border: 1px solid rgba(232,166,60,.35); border-radius: var(--radius-m);
  padding: 22px 26px; position: relative; font-family: var(--font-mono);
  font-size: clamp(13px, 2vw, 17px); color: var(--text); line-height: 1.6;
}
.slide-prompt .prompt-card::before{
  content: "📋 Промпт — можно скопировать";
  display:block; font-family: var(--font); font-size: 11px; font-weight:700;
  text-transform: uppercase; letter-spacing:.05em; color: var(--data-accent); margin-bottom: 12px;
}

/* 5. Пошаговый список */
.slide-steps ol{ list-style:none; padding:0; counter-reset: step; }
.slide-steps ol li{
  counter-increment: step; position:relative; padding-left: 40px; margin-bottom: 14px;
}
.slide-steps ol li::before{
  content: counter(step); position:absolute; left:0; top:0;
  width: 26px; height: 26px; border-radius:50%; background: var(--accent); color:#0b0c14;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
}

/* 6. Итог/чек-лист */
.slide-summary ul{ list-style:none; padding:0; }
.slide-summary ul li{ padding-left: 28px; position:relative; }
.slide-summary ul li::before{ content:"✓"; position:absolute; left:0; color: var(--success); font-weight:800; }
.slide-summary .next-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.slide-summary .next-links a{
  font-size: 13px; padding: 8px 14px; border-radius:100px; border:1px solid var(--border); color: var(--text-dim);
}
.slide-summary .next-links a:hover{ border-color: var(--accent); color: var(--accent); }

.pres-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px; border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.pres-nav-btn{
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display:flex; align-items:center; justify-content:center; cursor: pointer; font-size: 18px;
  transition: border-color .15s ease, color .15s ease;
}
.pres-nav-btn:hover{ border-color: var(--accent); color: var(--accent); }
.pres-nav-btn:disabled{ opacity: .3; cursor: default; }
.pres-nav-btn:disabled:hover{ border-color: var(--border); color: var(--text); }

.pres-progress{ display:flex; align-items:center; gap: 10px; font-size: 13px; color: var(--text-faint); }
.pres-dots{ display:flex; gap:6px; }
.pres-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.pres-dot.active{ background: var(--accent); transform: scale(1.4); }

.pres-toc{
  margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface); padding: 20px 22px;
}
.pres-toc h3{ margin: 0 0 12px; font-size: 15px; }
.pres-toc-list{ display:grid; gap:6px; }
.pres-toc-list button{
  display:flex; gap:10px; align-items:center; width:100%; text-align:left;
  background:none; border:none; color: var(--text-dim); padding: 8px 10px; border-radius: 8px;
  cursor:pointer; font-size: 14px;
}
.pres-toc-list button:hover{ background: var(--surface-2); color: var(--text); }
.pres-toc-list button.active{ background: rgba(58,92,255,.14); color: var(--text); }
.pres-toc-list .n{ width: 20px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 640px){
  .slide{ padding: 26px 24px; }
}