/* ==========================================================================
   Отдельные страницы: главная, программа, песочница, прогресс, словарь, 404.
   ========================================================================== */

/* --- Герой главной ---------------------------------------------------------- */
.hero { position: relative; padding-block: var(--s8) var(--s7); }
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s7); align-items: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px var(--s3);
  font-size: .82rem; font-weight: 600;
  color: var(--accent-text); background: var(--accent-soft);
  border-radius: var(--r-full);
}
.hero__title { margin-top: var(--s4); }
.hero__title em { font-style: normal; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { margin-top: var(--s4); max-width: 46ch; font-size: 1.12rem; color: var(--text-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s6); }
.hero__fact b { display: block; font-family: var(--font-head); font-size: 1.5rem; }
.hero__fact span { font-size: .84rem; color: var(--text-mute); }

/* 3D-сцена: разметка → стили → готовая страница */
.hero-stack { perspective: 1200px; perspective-origin: 60% 40%; }
.hero-stack__scene {
  position: relative;
  height: 430px;
  transform-style: preserve-3d;
  transform: rotateX(calc(14deg + var(--my, 0) * -6deg)) rotateY(calc(-22deg + var(--mx, 0) * 8deg));
  transition: transform var(--slow) var(--ease);
}
.hero-stack__layer {
  position: absolute;
  left: 50%; top: 50%;
  width: 276px; margin: -100px 0 0 -138px;
  padding: var(--s4);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  transform-style: preserve-3d;
  transition: transform var(--slow) var(--ease);
}
.hero-stack__layer--html {
  --calm-transform: translate3d(-88px, -128px, 0);
  transform: translate3d(-88px, calc(-128px * var(--spread, 1)), calc(-150px * var(--spread, 1)));
  border-top: 2px solid var(--html);
}
.hero-stack__layer--css {
  --calm-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  border-top: 2px solid var(--css);
}
.hero-stack__layer--page {
  --calm-transform: translate3d(88px, 128px, 0);
  transform: translate3d(88px, calc(128px * var(--spread, 1)), calc(150px * var(--spread, 1)));
  border-top: 2px solid var(--accent);
}

.hero-stack__cap {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3);
  font-family: var(--font-code); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute);
}
.hero-stack__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; }
.hero-stack__layer--html .hero-stack__dot { color: var(--html); }
.hero-stack__layer--css .hero-stack__dot { color: var(--css); }
.hero-stack__layer--page .hero-stack__dot { color: var(--accent); }
.hero-stack__code { font-family: var(--font-code); font-size: .74rem; line-height: 1.75; white-space: pre; overflow: hidden; }

.mini-page { display: grid; gap: 7px; }
.mini-page__bar { height: 12px; border-radius: 3px; background: var(--accent-grad); }
.mini-page__row { height: 8px; border-radius: 3px; background: var(--surface-3); }
.mini-page__row--short { width: 62%; }
.mini-page__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.mini-page__card { height: 34px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); }

/* --- Блоки главной ------------------------------------------------------------- */
.pitch { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.pitch__item {
  padding: var(--s5);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pitch__item .icon { color: var(--accent-text); margin-bottom: var(--s3); }
.pitch__title { font-size: 1.05rem; margin-bottom: var(--s2); }
.pitch__text { font-size: .94rem; color: var(--text-soft); }

.faq { display: grid; gap: var(--s2); max-width: 76ch; }
.faq__item { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5);
  font-weight: 600; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-code); color: var(--accent); font-size: 1.2rem; }
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 var(--s5) var(--s5); color: var(--text-soft); font-size: .95rem; }

.continue-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
  padding: var(--s5);
  background: color-mix(in oklab, var(--accent-soft) 40%, var(--surface-1));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.continue-card__text { flex: 1; min-width: 200px; }
.continue-card__label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; }
.continue-card__title { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; margin-top: 4px; }

/* --- Программа курса --------------------------------------------------------------- */
.module { margin-top: var(--s7); }
.module__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.module__num {
  font-family: var(--font-code); font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  padding: 3px var(--s2);
  color: var(--m, var(--accent-text)); background: color-mix(in oklab, var(--m, var(--accent)) 15%, transparent);
  border-radius: var(--r-full);
}
.module__title { font-size: 1.5rem; }
.module__meta { margin-left: auto; font-size: .85rem; color: var(--text-mute); }
.module__lead { max-width: 70ch; margin-bottom: var(--s4); color: var(--text-soft); }

/* --- Песочница ---------------------------------------------------------------------- */
.pg { display: grid; grid-template-rows: auto 1fr; gap: var(--s4); }
.pg__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pg__bar select {
  padding: var(--s2) var(--s3);
  color: var(--text); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.pg__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); min-height: 66vh; }
.pg__pane { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pg__pane .editor { flex: 1; }
.pg__pane .editor__pane { min-height: calc(66vh - 40px); }
.pg__preview { background: #fff; }
.pg__preview iframe { width: 100%; height: 100%; min-height: 66vh; border: 0; }
.pg__status { font-size: .84rem; color: var(--text-mute); margin-left: auto; }

/* --- Прогресс ------------------------------------------------------------------------ */
.prog-top { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: center; }
.prog-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s4); }
.prog-stat { padding: var(--s4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); }
.prog-stat b { display: block; font-family: var(--font-head); font-size: 1.7rem; }
.prog-stat span { font-size: .84rem; color: var(--text-mute); }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s4); }
.badge {
  display: grid; gap: var(--s2); place-items: center;
  padding: var(--s5) var(--s4); text-align: center;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md);
  opacity: .45; filter: grayscale(1);
  transition: opacity var(--base) var(--ease), filter var(--base) var(--ease), transform var(--base) var(--ease);
}
.badge.is-earned { opacity: 1; filter: none; }
.badge.is-earned:hover { transform: translateY(-3px); }
.badge__ring {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: var(--r-full);
  color: var(--b, var(--accent));
  background: color-mix(in oklab, currentColor 15%, transparent);
  border: 2px solid currentColor;
}
.badge__name { font-weight: 700; font-size: .95rem; }
.badge__note { font-size: .8rem; color: var(--text-mute); }

/* --- Словарь и шпаргалки ----------------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.filter-bar input[type="search"] {
  flex: 1; min-width: 220px;
  padding: var(--s3) var(--s4);
  color: var(--text); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-full);
}
.chip {
  padding: var(--s2) var(--s4);
  font-size: .87rem; font-weight: 600; color: var(--text-soft);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-full);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.chip:hover { color: var(--text); }
.chip.is-active { color: #fff; background: var(--accent); border-color: transparent; }

.glossary { display: grid; gap: var(--s5); }
.glossary__letter { font-family: var(--font-head); font-size: 1.6rem; color: var(--accent-text); }
.glossary__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); }
.gterm { padding: var(--s4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); scroll-margin-top: 100px; }
.gterm__name { font-size: 1.02rem; }
.gterm__en { font-family: var(--font-code); font-size: .8rem; color: var(--accent-text); }
.gterm__def { margin-top: var(--s2); font-size: .93rem; color: var(--text-soft); }
.gterm__link { margin-top: var(--s3); font-size: .84rem; }

.sheet-group { margin-top: var(--s6); }
.sheet-group__title { margin-bottom: var(--s3); font-size: 1.25rem; }
.sheet-row code { color: var(--accent-text); }
.sheet-row pre { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); font-size: .78rem; background: var(--bg-deep); border-radius: 6px; overflow-x: auto; }

/* --- 404 ---------------------------------------------------------------------------------- */
.nf { display: grid; place-items: center; gap: var(--s5); padding-block: var(--s9); text-align: center; }
.nf__code { font-family: var(--font-head); font-size: clamp(4rem, 14vw, 9rem); line-height: 1; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf__links { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* --- Адаптив ------------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-stack__scene { height: 330px; }
  .pg__split { grid-template-columns: 1fr; }
  .pg__preview iframe { min-height: 44vh; }
  .prog-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

@media (max-width: 560px) {
  /* На узком экране слои сходятся ближе, иначе сцена вылезает за край. */
  .hero-stack__layer { width: 210px; margin: -80px 0 0 -105px; padding: var(--s3); }
  .hero-stack__layer--html { --calm-transform: translate3d(-46px, -74px, 0); transform: translate3d(-46px, calc(-74px * var(--spread, 1)), calc(-110px * var(--spread, 1))); }
  .hero-stack__layer--page { --calm-transform: translate3d(46px, 74px, 0);   transform: translate3d(46px, calc(74px * var(--spread, 1)), calc(110px * var(--spread, 1))); }
  .hero-stack__scene { height: 290px; }
  .hero-stack__code { font-size: .66rem; }
  .hero__facts { gap: var(--s4); }
}

/* --- Курсы как ступени ------------------------------------------------------------------ */
.course-steps { display: grid; gap: var(--s5); }
.course-step {
  position: relative;
  display: grid;
  gap: var(--s3);
  padding: var(--s6);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.course-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: hsl(var(--step-hue) 75% 60%);
}
.course-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); }
.course-step__num {
  padding: 3px var(--s3);
  font-family: var(--font-code); font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  color: hsl(var(--step-hue) 75% 62%);
  background: hsl(var(--step-hue) 75% 62% / .14);
  border-radius: var(--r-full);
}
.course-step__title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.course-step__title a { color: inherit; text-decoration: none; }
.course-step__title a:hover { color: var(--accent-text); }
.course-step__meta { margin-left: auto; font-size: .85rem; color: var(--text-mute); }
.course-step__lead { max-width: 70ch; color: var(--text-soft); }

.course-step__bar { display: grid; gap: var(--s2); }
.course-step__track { height: 6px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; }
.course-step__fill {
  display: block; height: 100%; width: 0;
  background: var(--accent-grad);
  border-radius: var(--r-full);
  transition: width var(--slow) var(--ease);
}
.course-step__done { font-size: .84rem; color: var(--text-mute); }

.course-step__modules { display: grid; gap: var(--s2); margin: var(--s2) 0 0; padding-left: 1.4em; }
.course-step__modules li { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: .93rem; }
.course-step__modules li::marker { color: hsl(var(--step-hue) 75% 60%); font-family: var(--font-code); font-size: .8rem; }
.course-step__modules a { color: var(--text); text-decoration: none; }
.course-step__modules a:hover { color: var(--accent-text); text-decoration: underline; }
.course-step__modules span { margin-left: auto; font-size: .82rem; color: var(--text-mute); white-space: nowrap; }

.course-step__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.course-step__note { font-size: .84rem; color: var(--text-mute); }
.module__soon { color: var(--text-mute); font-size: .93rem; }

@media (max-width: 640px) {
  .course-step { padding: var(--s5) var(--s4); }
  .course-step__meta { margin-left: 0; width: 100%; }
}

/* --- Финал курса ---------------------------------------------------------------------- */
.course-end {
  margin-top: var(--s7);
  padding: var(--s6);
  background: color-mix(in oklab, var(--ok-soft) 50%, var(--surface-1));
  border: 1px solid color-mix(in oklab, var(--ok) 35%, transparent);
  border-radius: var(--r-md);
}
.course-end__label {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s2);
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ok);
}
.course-end__title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
.course-end__text { margin-top: var(--s3); color: var(--text-soft); max-width: 60ch; }
.course-end__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* Заголовок курса внутри карты обучения */
.map__course {
  margin: var(--s6) 0 var(--s3);
  font-size: 1.15rem;
}
.map__course:first-child { margin-top: 0; }
.map__course a { color: var(--text); text-decoration: none; }
.map__course a:hover { color: var(--accent-text); }
.course-step__modules span.is-done { color: var(--ok); font-weight: 600; }

/* --- Лента модулей на карточке курса (главная) ---------------------------------- */
.course-step__segs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
.course-step__seg {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.course-step__seg-fill {
  position: relative;
  display: block;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.course-step__seg-fill::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--seg-done, 0%);
  background: hsl(var(--seg-hue, 262) 72% 60%);
  transition: width var(--slow) var(--ease);
}
.course-step__seg-name {
  font-size: .72rem;
  color: var(--text-mute);
  /* Названия модулей длинные, а колонок пять: обрезаем, полное имя в title. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.course-step__seg.is-done .course-step__seg-name { color: var(--ok); }

@media (max-width: 640px) {
  .course-step__segs { grid-auto-flow: row; grid-auto-columns: auto; }
  .course-step__seg { grid-template-columns: 1fr auto; align-items: center; gap: var(--s3); }
  .course-step__seg-name { order: -1; white-space: normal; }
}

/* --- Прогресс по курсам --------------------------------------------------------- */
.prog-course { margin-block-start: var(--s6); }
.prog-course + .prog-course { margin-block-start: var(--s8); }
.prog-course__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.prog-course__head h3 { margin: 0; }
.prog-course__head p { margin: 0; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.prog-course__track {
  height: 8px;
  margin: var(--s3) 0 var(--s5);
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.prog-course__track span {
  display: block;
  height: 100%;
  background: var(--accent-grad);
  transition: width var(--slow) var(--ease);
}

.badge__bar {
  display: block;
  height: 4px;
  margin-block-start: var(--s2);
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.badge__bar i {
  display: block;
  height: 100%;
  background: var(--b, var(--accent));
  transition: width var(--slow) var(--ease);
}

/* --- Сертификат ------------------------------------------------------------------ */
.cert-name { max-width: 26rem; }
.cert-list { display: grid; gap: var(--s6); }
.cert {
  display: grid;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.cert__frame {
  border-radius: var(--r-md);
  overflow: hidden;
  /* Сертификат нарисован под 1200×848, вписываем его в любую ширину. */
  aspect-ratio: 1200 / 848;
  background: #fff;
}
.cert__frame svg { display: block; width: 100%; height: 100%; }
.cert__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --- Избранное в шпаргалке ------------------------------------------------------- */
.sheet-row__fav { width: 1px; text-align: center; }
.star {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.star:hover { color: var(--warn); background: var(--warn-soft); }
.star.is-on { color: var(--warn); }
.star.is-on .icon { fill: currentColor; }
.sheet-row.is-fav > th { box-shadow: inset 3px 0 0 var(--warn); }
.btn.is-on { color: var(--warn); border-color: var(--warn); }
.sheet-note { color: var(--text-mute); }