/* =========================================================
   Компоненты: раздел 3 макета + общие куски раздела 5
   (шапка, подвал, правая панель, редактор заметки …).
   ========================================================= */

/* --- Логотип --- */
/* Надпись — живой текст ({{ SITE_NAME }}), строчными её делает CSS */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-bold);
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
  font-variant-ligatures: none;
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
  color: light-dark(var(--gl-color-black), var(--accent));
}

.logo__mark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

.logo__top { fill: var(--logo-top); stroke: var(--logo-top); }

.logo--sm { font-size: 1.0625rem; gap: 6px; }
.logo--sm .logo__mark { width: 24px; height: 24px; }

/* --- Кнопки --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.btn:active { transform: scale(0.97); }

.btn--lg { padding: 14px 26px; font-size: var(--fs-md); }
.btn--block { width: 100%; }

.btn--accent { color: var(--on-accent); background: var(--accent); }
.btn--accent:hover { filter: brightness(0.95); }

.btn--ink { color: var(--on-ink); background: var(--ink); }
.btn--ink:hover { opacity: 0.88; }

.btn--ghost { background: transparent; border-color: var(--border); }
.btn--ghost:hover { border-color: var(--text); }

/* Контурная кнопка на тёмном (ink) фоне */
.btn--on-ink { color: var(--on-ink); background: transparent; border-color: color-mix(in srgb, var(--on-ink) 30%, transparent); }
.btn--on-ink:hover { border-color: var(--on-ink); }

.btn kbd {
  padding: 1px 6px;
  font-size: var(--fs-xs);
  background: rgb(0 0 0 / 0.08);
  border-radius: 6px;
}

.pill {
  display: inline-flex;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  transition: background var(--transition);
}

.pill:hover { background: var(--accent); color: var(--on-accent); }

.link-arrow { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

.icon-btn,
.round-btn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--transition);
}

.icon-btn { border-color: var(--border); }
.icon-btn:hover { border-color: var(--text); }
.round-btn:hover { transform: rotate(45deg); }

.round-btn--sm { width: 34px; height: 34px; font-size: var(--fs-sm); border-color: var(--border); }
.round-btn--sm:hover { transform: none; border-color: var(--text); }

/* --- Навигация --- */
.nav-link {
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: background var(--transition);
}

.nav-link:hover { background: var(--surface-2); }

/* --- Теги, чипы, бейджи --- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tag {
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  opacity: 0.85;
}

.tag--level-2 { color: var(--warning); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip {
  padding: 6px 14px;
  font-size: var(--fs-sm);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.chip:hover { border-color: var(--text); }
.chip--active { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }

.badge {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
}

.badge--done { color: var(--success); background: var(--success-bg); }
.badge--current { color: var(--on-accent); background: var(--accent); }
.badge--on-accent { color: var(--accent); background: var(--on-accent); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* --- Направления --- */
.tracks { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--on-ink) 25%, transparent);
  border-radius: var(--radius-pill);
}

.track--active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.track--soon { opacity: 0.45; cursor: default; }
.track small { font-size: var(--fs-xs); font-weight: var(--fw-bold); }

.tracks--light .track { border-color: var(--border); }
.tracks--light .track--active { border-color: var(--accent); }

/* --- Прогресс --- */
.progress {
  height: 6px;
  overflow: hidden;
  background: rgb(127 127 127 / 0.2);
  border-radius: var(--radius-pill);
}

.progress__bar {
  width: var(--value, 0%);
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

/* --- Вкладки --- */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.tab {
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
}

.tab:hover { color: var(--text); }
.tab--active { color: var(--text); background: var(--surface-2); }
.tab--static { color: var(--text); font-family: var(--font-code); font-size: var(--fs-xs); cursor: default; }

/* Вкладки-«таблетки» верхнего уровня (переключатель движков) */
.tabs--pills {
  display: inline-flex;
  max-width: 100%;   /* шире экрана — вкладки прокручиваются внутри, а не вся страница */
  margin-bottom: var(--space-5);
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.tabs--pills .tab { padding: 8px 18px; }

/* --- Уведомления --- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
}

.alert a { font-weight: var(--fw-bold); }

.alert__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  color: #fff;
  border-radius: 50%;
}

.alert--success { background: var(--success-bg); }
.alert--success .alert__icon { background: var(--success); }
.alert--error { background: var(--error-bg); }
.alert--error .alert__icon { background: var(--error); }
.alert--loading { background: var(--surface); border: 1px dashed var(--border); }

.callout {
  padding: var(--space-4);
  font-size: var(--fs-sm);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-2);
}

.callout--warning { background: var(--warning-bg); border-color: var(--warning); }

.spinner {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner--sm { width: 12px; height: 12px; }

@keyframes spin { to { transform: rotate(360deg); } }

.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--ok { background: var(--success); }

/* --- Поля формы --- */
.field { display: grid; gap: var(--space-1); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-bold); }

.field__input {
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
}

.field__input:focus { outline: none; border-color: var(--text); }
.field__input--error { border-color: var(--error); }
.field__input:disabled { color: var(--muted); cursor: not-allowed; }
.field__error { font-size: var(--fs-xs); color: var(--error); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }

.search { display: flex; gap: var(--space-2); max-width: 560px; }

.search__input {
  flex: 1;
  min-width: 0;
  padding: 12px 20px;
  color: var(--on-ink);
  background: color-mix(in srgb, var(--on-ink) 10%, transparent);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
}

.search__input::placeholder { color: color-mix(in srgb, var(--on-ink) 55%, transparent); }
.search__input:focus { outline: none; border-color: var(--accent); }

/* Поиск на светлом фоне */
.search--light { width: min(100%, 380px); }
.search--light .search__input { color: var(--text); background: var(--surface); border-color: var(--border); }
.search--light .search__input::placeholder { color: var(--muted); }

/* --- Таблица данных --- */
.table-wrap { overflow-x: auto; }

.table-wrap--bordered {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  font-family: var(--font-code);
  font-size: var(--fs-sm);
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 10px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);   /* еле заметная сетка: строки и столбцы */
}

.data-table th:last-child,
.data-table td:last-child { border-right: 0; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table th { font-weight: var(--fw-bold); background: var(--surface-2); }
.data-table tbody tr:hover { background: var(--surface-2); }

.data-table--compact th,
.data-table--compact td { padding: 6px 12px; font-size: var(--fs-xs); }

.type { margin-left: 4px; font-size: var(--fs-xs); color: var(--muted); }
.null { color: var(--muted); font-style: italic; }

/* Diff таблицы после INSERT / UPDATE / DELETE */
.row--added   { background: var(--success-bg); box-shadow: inset 3px 0 var(--success); }
.row--changed { background: var(--warning-bg); box-shadow: inset 3px 0 var(--warning); }
.row--removed { color: var(--muted); text-decoration: line-through; background: var(--error-bg); box-shadow: inset 3px 0 var(--error); }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-xs); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; }
.legend__swatch--added { background: var(--success); }
.legend__swatch--changed { background: var(--warning); }
.legend__swatch--removed { background: var(--error); }
.legend__swatch--accent { background: var(--accent); }
.legend__swatch--done { background: var(--surface); border: 2px solid var(--success); }
.legend__swatch--plain { background: var(--surface); border: 1px solid var(--border); }
.legend__swatch--soon { border: 1px dashed var(--muted); }
.legend--cards { margin-bottom: var(--space-4); }

/* --- Блок кода --- */
.code-block {
  overflow: hidden;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.code-block__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 6px 16px;
  font-family: var(--font-code);
  font-size: var(--fs-xs);
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.code-block__copy {
  padding: 4px 10px;
  font-size: var(--fs-xs);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.code-block__copy:hover { border-color: var(--text); }

.code-block pre,
.snippet,
.sql-output {
  padding: var(--space-4);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* --- Карточки и панели --- */
.panel,
.task,
.workspace,
.result,
.sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.panel { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); }

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.course-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.course-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 280px;
  padding: var(--space-5);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), border-color var(--transition);
}

a.course-card:hover { transform: translateY(-3px); border-color: var(--text); }

.course-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 40px; margin-bottom: auto; }
.course-card__title { font-size: 1.75rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.course-card__text { font-size: var(--fs-sm); opacity: 0.75; }
.course-card__meta { font-size: var(--fs-xs); opacity: 0.7; }

.course-card--accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.course-card--accent .progress { background: rgb(0 0 0 / 0.12); }
.course-card--accent .progress__bar { background: var(--on-accent); }
.course-card--soon { color: var(--muted); background: transparent; border-style: dashed; }
.course-card--done { border-color: var(--success); }
.course-card--done .progress__bar { background: var(--success); }

.course-card__step {
  align-self: center;
  font-family: var(--font-code);
  font-size: var(--fs-xs);
  opacity: 0.6;
}

.avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-weight: var(--fw-bold);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 50%;
}

.avatar--lg { width: 72px; height: 72px; font-size: var(--fs-lg); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}

.stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.stat__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.stat__label { font-size: var(--fs-sm); color: var(--muted); }

.facts { display: grid; gap: var(--space-3); }
.facts div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); }
.facts dt { color: var(--muted); }
.facts dd { font-weight: var(--fw-bold); text-align: right; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs [aria-current] { color: var(--text); }

.page-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-head .muted { margin-top: var(--space-2); }

/* H1 страниц — Unbounded (--font-display); он шире Manrope, поэтому размер меньше --fs-xl */
.page-title { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); hyphens: auto; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
.page-title--xl { font-size: clamp(1.75rem, 4.4vw, 3.2rem); max-width: 18ch; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.section-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.section-title--sm { font-size: var(--fs-lg); margin-bottom: var(--space-3); }

.filter-bar__right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Боковая панель (тем, разделов, инфо) — всегда справа */
.sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: grid;
  align-content: start;
  gap: var(--space-3);
  max-height: calc(100vh - var(--header-h) - var(--space-6));
  padding: var(--space-5);
  overflow-y: auto;
}

.sidebar__head { display: flex; justify-content: space-between; align-items: baseline; }
.sidebar__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.sidebar__title--sm { margin-top: var(--space-3); font-size: var(--fs-md); }

.topic { border-top: 1px solid var(--border); padding-top: var(--space-3); }

.topic summary {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  list-style: none;
  cursor: pointer;
}

.topic summary::-webkit-details-marker { display: none; }
.topic__count { font-weight: var(--fw-bold); color: var(--muted); }
.topic ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; }

.lesson a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--muted);
  border-radius: var(--radius-sm);
}

.lesson a::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.lesson a:hover { color: var(--text); background: var(--surface-2); }
.lesson--done a::before { background: var(--success); border-color: var(--success); }
.lesson--current a { color: var(--on-accent); background: var(--accent); font-weight: var(--fw-bold); }

/* Задачи темы — правее урока и без точки, с подписью «Задача N», чтобы не путать с темами */
.lesson--task a { margin-left: var(--space-5); }
.lesson--task a::before { display: none; }
.lesson__label { flex-shrink: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); opacity: 0.7; }
/* Решённая задача: подпись зелёная с галочкой (у задач нет точки, как у урока) */
.lesson--task.lesson--done .lesson__label { color: var(--success); opacity: 1; }
.lesson--task.lesson--done .lesson__label::after { content: ' ✓'; }

/* Программа курса в тренажёре: темы сразу под разделом, без своего выпадающего списка */
.module-nav .topic--flat { padding-top: 0; }
.topic--flat ul { margin-top: 0; }


.toc { display: grid; gap: 2px; }
.toc a { padding: 6px 10px; font-size: var(--fs-sm); text-decoration: none; color: var(--muted); border-radius: var(--radius-sm); }
.toc a:hover { color: var(--text); background: var(--surface-2); }

.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }

.prev-next__link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.prev-next__link:hover { border-color: var(--text); }
.prev-next__link--next { text-align: right; }
.prev-next__link span { font-size: var(--fs-xs); font-weight: var(--fw-bold); }

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7);
  color: var(--on-ink);
  background: var(--ink);
  border-radius: var(--radius-lg);
}

.cta__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.cta__text { margin-top: var(--space-2); opacity: 0.7; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.faq { display: grid; gap: var(--space-2); }

.faq__item {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.faq__item summary { font-weight: var(--fw-bold); cursor: pointer; }
.faq__item p { margin-top: var(--space-3); color: var(--muted); }

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.divider::before,
.divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }


/* --- Сегментный переключатель (Django ORM / SQLAlchemy) --- */
.seg { display: inline-flex; padding: 2px; margin-left: var(--space-2); background: var(--surface-2); border-radius: var(--radius-pill); }
.seg__item { padding: 4px 12px; font-size: var(--fs-xs); color: var(--muted); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.seg__item--active { color: var(--text); background: var(--surface); }

/* --- Выпадающий список --- */
.select select {
  appearance: none;
  padding: 7px 36px 7px 14px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.select select:hover { border-color: var(--text); }

/* --- Кнопка поменьше --- */
.btn--sm { padding: 6px 14px; font-size: var(--fs-xs); }

/* --- Список заметок (профиль) --- */
.notes { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.note-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

.note-card__src { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); text-decoration: none; }
.note-card__src:hover { color: var(--text); }


/* ===== Общее из раздела «Страницы» ===== */

/* --- Шапка --- */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--space-3) 0;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

.header__inner > .logo { justify-self: start; }

.header__nav {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.header__actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.mobile-menu { position: relative; display: none; }
.mobile-menu summary { list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }

.mobile-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  display: grid;
  gap: var(--space-1);
  min-width: 200px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}

/* --- Главная --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.step {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.step__num { font-family: var(--font-code); font-size: var(--fs-sm); color: var(--muted); }
.step__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.step--accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.step--accent .step__num { color: inherit; opacity: 0.6; }

/* --- Курс --- */
.course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  align-items: start;
  gap: var(--space-5);
}

.course-main { display: grid; gap: var(--space-4); min-width: 0; }

/* --- Задача --- */
/* Карточка таблицы БД: одна и та же для схемы, результатов запросов и JOIN.
   Изменения показываем только цветом строк (row--*, m1–m3), стиль таблицы не меняется. */
.schema-table,
.db-table {
  min-width: 200px;
  overflow: hidden;
  font-family: var(--font-code);
  font-size: var(--fs-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.db-table { justify-self: start; max-width: 100%; overflow-x: auto; }
.db-table .data-table { width: auto; min-width: 100%; }
.db-table .data-table th { background: var(--surface); color: var(--muted); }

.schema-table__name,
.db-table__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  font-weight: var(--fw-bold);
  color: var(--on-ink);
  background: var(--ink);
}

/* --- Подвал --- */
.footer { padding: var(--space-7) 0 var(--space-5); border-top: 1px solid var(--border); }

.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-5);
  font-size: var(--fs-sm);
}

.footer__col { display: grid; align-content: start; justify-items: start; gap: var(--space-2); }
.footer__col a:not(.logo) { color: var(--muted); text-decoration: none; }
.footer__col a:not(.logo):hover { color: var(--text); }
.footer__label { margin-bottom: var(--space-1); font-weight: var(--fw-bold); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
  font-size: var(--fs-sm);
}

.footer__links { display: flex; gap: var(--space-2); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer__legal a { color: var(--muted); text-decoration: none; }
.footer__legal a:hover { color: var(--text); }

/* --- Сайдбар: раздел → темы --- */
.module-nav { border-top: 1px solid var(--border); padding-top: var(--space-3); }

.module-nav > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  list-style: none;
  cursor: pointer;
}

.module-nav > summary::-webkit-details-marker { display: none; }
.module-nav__title { flex: 1; }

.module-nav__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-size: var(--fs-xs);
  background: var(--surface-2);
  border-radius: 50%;
}

.module-nav--done .module-nav__num { color: #fff; background: var(--success); }
.module-nav--current .module-nav__num { color: var(--on-accent); background: var(--accent); }
.module-nav--done > summary .topic__count { color: var(--success); }
.module-nav[open] > summary { margin-bottom: var(--space-2); }
.module-nav .topic { margin-left: 30px; padding-top: var(--space-2); border-top: 0; }
.module-nav .topic summary { font-weight: var(--fw-regular); }

/* --- Тренажёр: сессия, журнал выполнения, визуализация JOIN --- */
.schema-table__flag {
  padding: 1px 6px;
  font-family: var(--font-main);
  font-size: 10px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

/* --- Правая панель: две плашки-аккордеон (заметки + материалы) --- */
.side-panel {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.side-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.side-card[open] { border-color: var(--text); }

.side-card__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-5);
  list-style: none;
  cursor: pointer;
}

.side-card__head::-webkit-details-marker { display: none; }

.side-card__head::after {
  content: '+';
  grid-row: 1;
  grid-column: 2;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--muted);
}

.side-card[open] .side-card__head::after { content: '−'; }
.side-card__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.side-card__meta { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--muted); }
/* Открытая плашка занимает остаток высоты экрана и прокручивается внутри (без полосы прокрутки) */
.side-card__body {
  display: grid;
  gap: var(--space-3);
  max-height: calc(100vh - var(--header-h) - 220px);
  padding: 0 var(--space-5) var(--space-5);
  overflow-y: auto;
  scrollbar-width: none;
}
.side-card__body::-webkit-scrollbar { display: none; }

.side-card__body > .progress { margin-bottom: var(--space-1); }
.side-card__body > .side-card__link { margin-top: var(--space-2); }
.side-card__link { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; }
.side-card__link:hover { text-decoration: underline; }

/* --- Редактор заметки с форматированием --- */
.note-editor {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Тема заметки — отдельное подписанное поле, чтобы было ясно, что сюда писать */
.note-editor__meta {
  display: grid;
  gap: 6px;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.note-editor__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }

.note-editor__title {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.note-editor__title::placeholder { font-weight: var(--fw-regular); color: var(--muted); }
.note-editor__title:focus { outline: none; border-color: var(--text); }

.note-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.note-editor__toolbar button {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  font-size: var(--fs-sm);
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.note-editor__toolbar button:hover { background: var(--surface); }
.note-editor__sep { width: 1px; height: 18px; margin: 0 4px; background: var(--border); }

.note-editor__area {
  min-height: 160px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  outline: none;
}

.note-editor__area:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.note-editor__area p { margin: 0 0 var(--space-2); }

.note-editor__area ul,
.note-editor__area ol { margin: 0 0 var(--space-2); padding-left: var(--space-5); }

.note-editor__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--space-4);
  font-size: var(--fs-xs);
  border-top: 1px solid var(--border);
}

.note-editor__foot a { font-weight: var(--fw-bold); text-decoration: none; }


/* ===== Замена макет-механики (раздел 4 макета) =====
   В макете активный пункт меню и кнопку темы делал CSS; в проекте
   активный пункт помечает шаблон классом, а тему переключает js/theme.js. */

/* Отступы страницы: в макете их давал экран .screen */
main { padding: var(--space-6) 0 var(--space-8); }

.nav-link--active,
.nav-link--active:hover {
  color: var(--on-ink);
  background: var(--ink);
}

/* Активная вкладка-«таблетка» (в макете её включала radio-кнопка) */
.tabs--pills .tab--active { color: var(--on-ink); background: var(--ink); }
.tab[aria-disabled="true"] { cursor: default; opacity: 0.6; }

/* В макете кнопка темы была <label>; у <button> убираем фон браузера */

button.icon-btn { color: inherit; background: transparent; }

/* Сообщения Django над страницей (вход, выход, письмо отправлено) */
.stack-messages { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.auth__card .stack-messages { margin: 0; padding: 0; }


/* --- Первый экран (главная, «О проекте»): тёмный блок, заголовок Unbounded --- */
.hero {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7);
  color: var(--on-ink);
  background: var(--ink);
  border-radius: var(--radius-lg);
}

.hero__text { display: grid; gap: var(--space-5); justify-items: start; }

.hero__title {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4.2vw, 3.2rem);   /* Unbounded широкий — чуть меньше обычного */
  font-weight: var(--fw-display);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  hyphens: auto;   /* длинные слова широких шрифтов не вылезают за край на телефоне */
}

.hero__lead { max-width: 48ch; opacity: 0.7; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Первый экран главной: текст + иллюстрация */
.hero--home {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
}

/* --- Ряды «текст + рисунок» (главная: «Что внутри», «О проекте»: «Как устроен сайт») --- */
.showcase__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.showcase { display: block; }
.showcase__row + .showcase__row { margin-top: clamp(64px, 8vw, 112px); }

.showcase__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--space-7);
}

.showcase__row--reverse .showcase__text { order: 2; }
.showcase__text { display: grid; justify-items: start; gap: var(--space-3); }
.showcase__title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15; }  /* меньше заголовка блока */
.showcase__text p { max-width: 48ch; }

/* Подложка рисунка: лаймовая с бликом и точечной текстурой. Внутри — всегда светлая схема:
   карточки белые, как скриншоты интерфейса, одинаково в светлой и тёмной теме. */
.showcase__art {
  width: 100%;
  max-width: 460px;
  justify-self: center;
  padding: var(--space-5) var(--space-4);
  color-scheme: light;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 0%, rgb(255 255 255 / 0.55), transparent 55%),
    radial-gradient(rgb(0 0 0 / 0.07) 1px, transparent 1.5px) 0 0 / 14px 14px,
    var(--gl-color-accent);
  border-radius: var(--radius-lg);
}

/* Детали рисунков «Что внутри» (классы sc-*) */
.sc-card { fill: var(--surface); }
.sc-card-shadow { filter: drop-shadow(0 10px 18px rgb(20 30 0 / 0.18)) drop-shadow(0 2px 4px rgb(20 30 0 / 0.1)); }
.sc-ink { fill: var(--ink); }
.sc-accent { fill: var(--accent); }
.sc-head { fill: var(--surface-2); }
.sc-track { fill: var(--surface-2); }
.sc-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.sc-added { fill: var(--success-bg); }
.sc-added-mark { fill: var(--success); }
.sc-ok { fill: var(--success); }
.sc-ok-bg { fill: var(--success-bg); }
.sc-field { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.sc-field--new { stroke: var(--ink); stroke-width: 1.5; }
.sc-code { fill: var(--code-bg); stroke: var(--border); stroke-width: 1; }
.sc-check { fill: none; stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-check--w { stroke: #fff; }
.sc-arrow { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.sc-t { font-family: var(--font-main); font-size: 13px; fill: var(--text); }
.sc-t--mono { font-family: var(--font-code); font-size: 12px; }
.sc-t--sm { font-size: 11.5px; }
.sc-t--xs { font-size: 10.5px; }
.sc-t--b { font-weight: 600; }
.sc-t--i { font-style: italic; }
.sc-t--u { text-decoration: underline; }
.sc-t--c { text-anchor: middle; }
.sc-t--r { text-anchor: end; }
.sc-t--muted { fill: var(--muted); }
.sc-t--onink { fill: var(--on-ink); }
.sc-t--accent { fill: var(--accent); }
.sc-t--ok { fill: var(--success); font-weight: 600; }
.sc-t--title { font-family: var(--font-display); font-size: 17px; }
.sc-t--sm-title { font-size: 14px; }

.eyebrow--dark { color: var(--muted); opacity: 1; }

.checks { display: grid; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); padding: 0; list-style: none; font-size: var(--fs-sm); }
.checks li { display: flex; align-items: center; gap: var(--space-2); }

.checks li::before {
  content: '✓';
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 50%;
}

/* --- «Сообщить об ошибке»: кнопка под выделенным текстом + окно (урок, задача) --- */
.report-btn {
  position: absolute;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--on-ink);
  background: var(--ink);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px var(--gl-shadow-default);
  cursor: pointer;
}

.report-btn::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

.report-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.report-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.report-dialog:focus { outline: none; }
.report-dialog [data-report-close] { color: inherit; background: transparent; border-color: var(--border); }

.report-dialog__body,
.report-dialog [data-report-fields] { display: grid; gap: var(--space-4); }
.report-dialog__body { padding: var(--space-6); }
.report-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.report-dialog__title { font-size: var(--fs-lg); }

.report-dialog__quote {
  max-height: 160px;
  margin: 0;
  overflow-y: auto;
  white-space: pre-wrap;
}

.report-dialog__comment { min-height: 88px; resize: vertical; border-radius: var(--radius-md); }