/* ==========================================================================
   Компоненты: кнопки, карточки, заметки, код, таблицы, списки, бейджи.
   Один компонент — один блок. Порядок совпадает с порядком в §8.
   ========================================================================== */

/* --- Кнопки --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s3) var(--s5);
  font-family: var(--font-text);
  font-size: .95rem; font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
              border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); border-color: var(--border-strong); color: var(--text); }
.btn:active { transform: translateY(0); }

.btn--primary {
  color: #fff;
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 6px 20px -8px var(--glow);
}
.btn--primary:hover { box-shadow: 0 12px 28px -10px var(--glow); color: #fff; }

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

.btn--sm { padding: var(--s2) var(--s3); font-size: .87rem; }
.btn--lg { padding: var(--s4) var(--s6); font-size: 1.02rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* --- Карточка урока -------------------------------------------------------- */
.lesson-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5);
  color: inherit;
  text-decoration: none;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--base) var(--ease), border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.lesson-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
  pointer-events: none;
}
.lesson-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.lesson-card:hover::after { opacity: 1; }

.lesson-card__top { display: flex; align-items: center; gap: var(--s3); }
.lesson-card__num {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  font-family: var(--font-code); font-size: .85rem; font-weight: 700;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
}
.lesson-card__meta { margin-left: auto; font-size: .8rem; color: var(--text-mute); }
.lesson-card__title { font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.lesson-card__lead { color: var(--text-soft); font-size: .92rem; }
.lesson-card__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s2); }
.lesson-card--done .lesson-card__num { color: var(--ok); background: var(--ok-soft); }
.lesson-card--done::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--ok);
}

/* --- Бейджи и метки --------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--s2);
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  color: var(--text-mute);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.tag--html { color: var(--html); background: var(--html-soft); border-color: transparent; }
.tag--css  { color: var(--css);  background: var(--css-soft);  border-color: transparent; }
.tag--ok   { color: var(--ok);   background: var(--ok-soft);   border-color: transparent; }

/* --- Заметки ---------------------------------------------------------------- */
.note {
  padding: var(--s4) var(--s5);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--c, var(--info));
  border-radius: var(--r-sm);
}
.note__title {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s2);
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: var(--c, var(--info));
}
.note__body { font-size: .97rem; color: var(--text-soft); }
.note__body strong { color: var(--text); }
.note--tip     { --c: var(--ok);   background: color-mix(in oklab, var(--ok-soft) 55%, var(--surface-1)); }
.note--info    { --c: var(--info); background: color-mix(in oklab, var(--info-soft) 55%, var(--surface-1)); }
.note--warn    { --c: var(--warn); background: color-mix(in oklab, var(--warn-soft) 55%, var(--surface-1)); }
.note--danger  { --c: var(--bad);  background: color-mix(in oklab, var(--bad-soft) 55%, var(--surface-1)); }
.note--analogy { --c: var(--accent-text); background: color-mix(in oklab, var(--accent-soft) 55%, var(--surface-1)); }

/* --- Блок кода --------------------------------------------------------------- */
.code {
  margin: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.code__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3) var(--s2) var(--s4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.code__lang {
  font-family: var(--font-code); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  padding: 2px 7px;
  border-radius: 5px;
}
.code--html .code__lang { color: var(--html); background: var(--html-soft); }
.code--css  .code__lang { color: var(--css);  background: var(--css-soft); }
.code__file { font-family: var(--font-code); font-size: .82rem; color: var(--text-mute); }
.code__copy {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 4px var(--s2);
  font-size: .78rem; color: var(--text-mute);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.code__copy:hover { color: var(--text); background: var(--surface-3); }
.code__copy.is-done { color: var(--ok); }

.code__body { overflow-x: auto; padding-block: var(--s3); }
.code pre { margin: 0; }
.code code { display: block; font-size: .87rem; line-height: 1.65; }
/* min-height держит высоту пустой строки: раньше её держал  ,
   но он пачкал буфер обмена. */
.code__line { display: flex; min-height: 1.65em; padding-inline: var(--s3) var(--s4); }
.code__line--mark { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.code__num {
  flex: none; width: 2.2em; padding-right: var(--s3);
  color: var(--text-mute); opacity: .55;
  text-align: right; user-select: none;
}
.code__text { white-space: pre; }

/* Токены подсветки */
.tok--tag { color: var(--tok-tag); }
.tok--attr { color: var(--tok-attr); }
.tok--string { color: var(--tok-string); }
.tok--punct { color: var(--tok-punct); }
.tok--comment { color: var(--tok-comment); font-style: italic; }
.tok--doctype { color: var(--tok-doctype); }
.tok--entity { color: var(--tok-entity); }
.tok--prop { color: var(--tok-prop); }
.tok--val { color: var(--tok-val); }
.tok--num { color: var(--tok-num); }
.tok--color { color: var(--tok-color); }
.tok--at { color: var(--tok-at); }
.tok--pseudo { color: var(--tok-pseudo); }
.tok--sel-class { color: var(--tok-sel-class); }
.tok--var { color: var(--tok-var); }

/* --- Сравнение «плохо / хорошо» ----------------------------------------------- */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.compare__side {
  padding: var(--s4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-top: 3px solid var(--c);
  border-radius: var(--r-md);
}
.compare__side--bad  { --c: var(--bad); }
.compare__side--good { --c: var(--ok); }
.compare__label {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3);
  font-weight: 700; font-size: .88rem; color: var(--c);
}
.compare__code {
  margin: 0; padding: var(--s3);
  font-size: .82rem; line-height: 1.6;
  background: var(--bg-deep);
  border-radius: var(--r-sm);
  overflow-x: auto;
}
.compare__why { margin-top: var(--s3); font-size: .9rem; color: var(--text-soft); }

/* --- Таблицы -------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th, .table td { padding: var(--s3) var(--s4); text-align: left; vertical-align: top; }
.table thead th {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table tbody tr + tr { border-top: 1px solid var(--border); }
.table tbody th { font-weight: 600; color: var(--text); }
.table td { color: var(--text-soft); }
.table code { font-size: .85em; white-space: nowrap; }

/* --- Пошаговая инструкция --------------------------------------------------------- */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--s4); }
.steps__item {
  position: relative;
  padding: var(--s4) var(--s5) var(--s4) var(--s8);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  counter-increment: step;
}
.steps__item::before {
  content: counter(step);
  position: absolute; left: var(--s4); top: var(--s4);
  display: grid; place-items: center;
  width: 28px; height: 28px;
  font-family: var(--font-code); font-size: .82rem; font-weight: 700;
  color: #fff; background: var(--accent-grad); border-radius: var(--r-full);
}
.steps__title { margin-bottom: var(--s2); font-size: 1rem; }
.steps__body { font-size: .95rem; color: var(--text-soft); }

/* --- Термины ------------------------------------------------------------------------ */
.terms { display: grid; gap: var(--s3); }
.terms__row {
  display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.terms__term { font-weight: 700; }
.terms__en { display: block; font-family: var(--font-code); font-size: .8rem; font-weight: 400; color: var(--accent-text); }
.terms__def { color: var(--text-soft); font-size: .95rem; }

/* --- Ошибки новичков ------------------------------------------------------------------ */
.mistakes { display: grid; gap: var(--s3); }
.mistakes__title { display: flex; align-items: center; gap: var(--s2); color: var(--warn); font-size: 1.1rem; }
.mistake {
  padding: var(--s4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.mistake__what { margin-bottom: var(--s2); font-size: 1rem; }
.mistake__why, .mistake__fix { font-size: .93rem; color: var(--text-soft); }
.mistake__fix { margin-top: var(--s2); }
.mistake__tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bad); background: var(--bad-soft); border-radius: var(--r-full);
}
.mistake__tag--ok { color: var(--ok); background: var(--ok-soft); }

/* --- Чек-лист и «что дальше» -------------------------------------------------------------- */
.checklist {
  padding: var(--s5);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.checklist__title { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); font-size: 1.05rem; }
.checklist__list { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.checklist__item { display: flex; align-items: flex-start; gap: var(--s3); }
.checklist__box { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); }
.checklist__item label { font-size: .95rem; color: var(--text-soft); cursor: pointer; }
.checklist__box:checked + label { color: var(--text-mute); text-decoration: line-through; }

.next-up {
  padding: var(--s5);
  background: color-mix(in oklab, var(--accent-soft) 45%, var(--surface-1));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.next-up__label {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s2);
  font-weight: 700; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text);
}

/* --- Кольцевой прогресс ------------------------------------------------------------------- */
.ring { display: grid; place-items: center; }
.ring__svg { transform: rotate(-90deg); }
.ring__track { stroke: var(--surface-3); }
.ring__bar { stroke: url(#ring-grad); stroke-linecap: round; transition: stroke-dashoffset var(--slow) var(--ease); }
.ring__value { grid-area: 1 / 1; font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; }
.ring__svg { grid-area: 1 / 1; }

/* --- Хлебные крошки ------------------------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: .85rem; color: var(--text-mute); list-style: none; padding: 0; }
.crumbs a { color: var(--text-mute); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); opacity: .5; }

/* --- Тонкая полоса общего прогресса под шапкой ---------------------------------- */
/* Две пиксельные линии: тонкая нитка не должна конкурировать с полосой чтения,
   поэтому она чуть бледнее и лежит выше. */
.site-progress {
  position: relative;
  height: 2px;
  background: color-mix(in oklab, var(--border) 70%, transparent);
}
.site-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-grad);
  transition: width var(--slow) var(--ease);
}

/* --- Экран «модуль пройден» ------------------------------------------------------ */
.reward {
  border: 0;
  padding: 0;
  /* Глобальный сброс обнуляет margin у всех элементов, и модальный dialog
     перестаёт центроваться сам. Возвращаем auto явно. */
  margin: auto;
  max-width: min(30rem, 92vw);
  background: transparent;
  color: inherit;
  overflow: visible;
}
.reward::backdrop { background: color-mix(in oklab, #0b0a16 72%, transparent); }
.reward.is-fallback {
  position: fixed;
  inset-block-start: 10vh;
  inset-inline: 0;
  margin-inline: auto;
  z-index: 320;
}

.reward__inner {
  display: grid;
  justify-items: center;
  gap: .6rem;
  padding: 2.4rem 1.6rem 1.6rem;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgb(12 8 40 / .34);
  animation: reward-in .32s var(--ease) both;
}

.reward__badge {
  position: relative;
  width: 7rem;
  aspect-ratio: 1;
  margin-block-end: .4rem;
  transform-style: preserve-3d;
  transition: transform .9s var(--ease);
}
.reward__badge.is-flipped { transform: rotateY(180deg); }

.reward__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .1rem;
  border-radius: 50%;
  backface-visibility: hidden;
  color: #fff;
  background: linear-gradient(150deg,
    hsl(var(--reward-hue, 262) 82% 64%),
    hsl(var(--reward-hue, 262) 72% 46%));
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / .28);
}
.reward__face--back { transform: rotateY(180deg); }
.reward__num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.reward__word { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

.reward__kicker { margin: 0; font-size: .85rem; color: var(--text-mute); }
.reward__title { margin: 0; font-size: 1.5rem; }
.reward__module { margin: 0; font-weight: 600; }
.reward__stats { margin: 0; font-size: .9rem; color: var(--text-mute); }
.reward__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-block-start: 1rem; }

/* Без 3D-перспективы переворот выглядит как сжатие по горизонтали. */
@supports (transform-style: preserve-3d) {
  .reward__inner { perspective: 800px; }
}

/* --- Сообщение о недоступном хранилище -------------------------------------------- */
.storage-note {
  position: fixed;
  inset-inline: var(--s4);
  inset-block-end: var(--s4);
  z-index: 280;
  display: flex;
  align-items: start;
  gap: var(--s3);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}
.storage-note__text { margin: 0; font-size: .85rem; color: var(--text-soft); }
.storage-note__close {
  flex: none;
  width: 1.75rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-mute);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.storage-note__close:hover { background: var(--surface-3); color: var(--text); }