/* Движок: раскладка страниц курса без оформления. Цвета, шрифты, рамки и украшения задаёт тема курса (config.json → site.theme). */
/* --- База --- */
* { box-sizing: border-box; }
body { margin: 0; padding: 20px; }
/* --- Контейнер слайда --- */
.slide { padding: 30px 40px; margin: 0 auto 20px; max-width: 1080px; position: relative; overflow: hidden; }
/* длинные абзацы-прозу держим читаемой шириной, широкие блоки — на всю */
.slide > p,
.theory-block > p,
.task > p { max-width: 75ch; }
/* самоочистка от плавающей навигации */
.slide::after { content: ""; display: block; clear: both; }
/* --- Заголовки --- */
.main-title { text-align: center; margin: 20px 0; }
h2 { margin-bottom: 20px; }
h3 { margin-top: 25px; }
h4 { margin-top: 20px; }
/* --- Блоки контента --- */
/* --- Титульная: вступление и дисклеймер --- */
.lead-intro { text-align: center; max-width: 760px; margin: 0 auto 18px; }
.disclaimer { padding: 12px 16px; margin: 0 auto 22px; max-width: 820px; }
.theory-block { padding: 15px; margin: 20px 0; }
.section-card { padding: 20px; margin: 15px 0; }
.section-title { margin-bottom: 15px; display: flex; align-items: center; }
.section-title::before { content: "✦"; margin-right: 10px; }
.section-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding-left: 25px; }
/* --- Примеры, задачи, заметки --- */
.example { padding: 15px; margin: 10px 0; }
.task { padding: 20px; margin: 20px 0; }
.hint { margin-top: 15px; padding-left: 20px; }
.warning { padding: 15px; margin: 10px 0; }
.note { padding: 15px; margin: 10px 0; }
.note-card { padding: 15px; margin: 20px 0; display: flex; align-items: center; gap: 15px; }
.complexity { padding: 10px; margin: 5px 0; }
.file-structure { padding: 10px; white-space: pre; }
/* --- Код --- */
code { padding: 2px 6px; }
.code-section { margin: 15px 0; }
pre[class*="language-"] { margin: 10px 0; padding: 15px; overflow: auto; }
code[class*="language-"] { padding: 0; }
/* --- Ссылки и навигация --- */
a { transition: all 0.25s ease; }
.section-links a:hover { transform: translateX(5px); }
a.back, a.forward { display: inline-block; margin-top: 25px; padding: 8px 16px; }
a.back { float: left; }
a.forward { float: right; }
/* со сдвигом от левого края: не по центру */
/* небольшая «водяная» картинка-заметка */
/* ============================================================
   Виджет «Содержание» (сайдбар) — toc.js
   ============================================================ */
#toc-sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; z-index: 1000; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.28s ease; }
#toc-sidebar.toc-visible { transform: none; }
/* на десктопе открытый сайдбар отодвигает контент, не накрывая его */
@media (min-width: 1024px) {
    body.toc-on { padding-left: 300px; }
}
.toc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.toc-logo { display: flex; align-items: center; gap: 10px; }
.toc-logo-img { width: 34px; height: 34px; object-fit: contain; }
.toc-x { cursor: pointer; padding: 4px 8px; }
.toc-scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px 6px; }
.toc-scroll::-webkit-scrollbar { width: 8px; }
.toc-section { margin: 2px 0; }
.toc-sec-title { width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.toc-sec-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; }
.toc-caret { transition: transform 0.2s ease; }
.toc-expanded .toc-caret { transform: rotate(90deg); }
.toc-items { list-style: none; margin: 0 0 4px; padding: 0; display: none; }
.toc-expanded .toc-items { display: block; }
.toc-items a { display: block; padding: 6px 12px 6px 40px; }
.toc-all { display: block; text-align: center; padding: 12px; }
/* кнопка-переключатель: toc.js переносит её внутрь слайда, в правый верхний угол; когда шапка слайда уезжает — «плавает» (fixed) там же */
#toc-toggle { position: absolute; top: 8px; right: 8px; z-index: 1001; width: 40px; height: 40px; cursor: pointer; }
#toc-toggle.toc-float { position: fixed; top: 10px; right: 10px; }
#toc-backdrop { position: fixed; inset: 0; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }
#toc-backdrop.toc-visible { opacity: 1; pointer-events: auto; }
/* ============================================================
   Глоссарий: подчёркнутые термины, всплывающая карточка, страница glossary.html
   ============================================================ */
.gl { text-underline-offset: 3px; cursor: help; }
.gl-pop { position: fixed; z-index: 1300; width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 480px); overflow: auto; padding: 14px 16px; }
.gl-pop p { margin: 8px 0; }
.gl-pop pre { margin: 8px 0; padding: 10px; }
.gl-pop-head { display: flex; align-items: center; gap: 8px; }
.gl-pop-head b { flex: 1; }
.gl-x { cursor: pointer; padding: 2px 6px; }
.gl-pop-where { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.gl-pop-where a { text-underline-offset: 2px; }
.gl-pop-all { display: block; margin-top: 10px; }
.gl-kind { padding: 2px 8px; white-space: nowrap; }
.gl-link { display: inline-block; padding: 8px 18px; }
.gl-tools { margin: 14px 0 8px; }
#gl-q { width: 100%; max-width: 420px; padding: 10px 14px; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gl-chip { padding: 6px 14px; cursor: pointer; }
#gl-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin: 18px 0; }
.gl-card { padding: 14px 16px; }
.gl-card[hidden] { display: none; }
.gl-card h3 { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gl-card p { margin: 6px 0; }
.gl-where a { margin-right: 10px; text-underline-offset: 2px; }
/* --- Адаптивность --- */
@media (max-width: 640px) {
    body { padding: 10px; }
    .slide { padding: 18px; }
/* кнопка содержания лежит в правом верхнем углу слайда: заголовок встаёт в одну строку с ней, титульный блок опускаем */
    .slide > h2:first-child { margin-top: 0; padding-right: 50px; min-height: 40px; }
    .slide > .hero:first-child { margin-top: 34px; }
    .section-links { grid-template-columns: 1fr; padding-left: 0; }
    a.back, a.forward { float: none; display: block; text-align: center; margin: 8px 0 0; }
    #toc-sidebar { width: 86vw; max-width: 320px; }
}