/* ============================================================
   English from Zero — каркас страницы (shell)
   Единый скелет для всех роутов: page → page-head → section → grid → card|row.
   Подключается последним, поэтому переопределяет legacy-слой.
   ============================================================ */

/* ------------------------------------------------------------
   1. Полотнище страницы

   Базовые правила каркаса обёрнуты в :where() — у них нулевая
   специфичность. Поэтому legacy-классы-контейнеры (.auth-card,
   .complete-banner, .sidebar …) из style.css переопределяют их
   без !important, пока страницы не переведены на новый шаблон (этап 4).
   ------------------------------------------------------------ */

:where(.app),
.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--page-pad);
}

.page--reading { max-width: var(--page-max-reading); }
.page--narrow  { max-width: var(--page-max-narrow); }
.page--flush   { padding-left: 0; padding-right: 0; }

/* Двухколоночный режим: урок со списком тем. */
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.layout--reverse { grid-template-columns: minmax(0, 1fr) 300px; }
.layout-side { position: sticky; top: calc(var(--topbar-h) + var(--s-3)); }
.layout-main { min-width: 0; }

/* ------------------------------------------------------------
   2. Шапка страницы — единственное место с h1
   ------------------------------------------------------------ */

.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.page-head--hero {
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, #221b3f 0%, #1a1630 55%, #151022 100%);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.page-eyebrow {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--text-3);
}
.page-head--hero .page-eyebrow { color: var(--accent-ink); }

.page-title {
  margin: 0;
  font-size: var(--fs-display);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}
.page-head--hero .page-title { font-size: clamp(1.7rem, 1.2rem + 2vw, var(--fs-display)); }

.page-sub {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body);
  color: var(--text-2);
  text-wrap: pretty;
}

/* Правый/нижний угол: кнопки и метрики. На узких экранах переносится под заголовок. */
.page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
}
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.page-bar .page-actions:first-child { margin-right: auto; }

/* ------------------------------------------------------------
   3. Секция
   ------------------------------------------------------------ */

.section { margin-bottom: var(--s-5); }
.section:last-child { margin-bottom: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}

.section-title {
  margin: 0;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-head);
}

.section-sub { margin: calc(-1 * var(--s-2)) 0 var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }

.section-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ------------------------------------------------------------
   4. Сетка
   ------------------------------------------------------------ */

.grid { display: grid; gap: var(--gap); align-items: start; }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid--tile { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid--stack { grid-template-columns: 1fr; gap: var(--gap-sm); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 260px; }

.grid > .span-2 { grid-column: span 2; }
.grid > .span-all { grid-column: 1 / -1; }

/* ------------------------------------------------------------
   5. Карточка — единственная «коробка» в системе

   Базовый блок в :where() (нулевая специфичность) — временный мост:
   элементы вида `class="card auth-card"` / `card complete-banner`
   сохраняют отступы legacy-класса, пока страница не переведена на
   новый шаблон. Снять вместе со style.css (этап 5).
   Модификаторы .card--* намеренно обычной специфичности.
   ------------------------------------------------------------ */

:where(.card) {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--s-4);
}

.card--tile     { padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-2); }
.card--flush     { padding: 0; overflow: hidden; }
.card--quiet     { box-shadow: none; background: var(--surface-2); }
.card--inset     { background: var(--surface-inset); }

.card--accent {
  border-top: 2px solid var(--step, var(--accent));
}
.card--step { --step: var(--accent); border-top: 2px solid var(--step); }
.card--words    { --step: var(--step-words); }
.card--theory   { --step: var(--step-theory); }
.card--practice { --step: var(--step-practice); }
.card--reading  { --step: var(--step-reading); }
.card--review   { --step: var(--step-review); }

.card--success { border-top: 2px solid var(--ok); }
.card--pending { border-style: dashed; border-color: var(--line-strong); background: var(--surface-inset); box-shadow: none; }

/* Подъём только там, где карточка действительно кликабельна. */
.card--interactive { transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
.card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.card__head:last-child { margin-bottom: 0; }

.card__title { margin: 0; font-size: var(--fs-h3); }
.card__sub   { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.card__body  > :last-child { margin-bottom: 0; }
.card__foot  { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }

.card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--tint-accent);
  color: var(--accent);
}
.card__icon--words    { background: var(--tint-words);    color: var(--step-words); }
.card__icon--theory   { background: var(--tint-theory);   color: var(--step-theory); }
.card__icon--practice { background: var(--tint-practice); color: var(--step-practice); }
.card__icon--reading  { background: var(--tint-reading);  color: var(--step-reading); }
.card__icon--review   { background: var(--tint-review);   color: var(--step-review); }

.card__num { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.card__num small { font-size: var(--fs-h3); font-weight: 600; color: var(--text-2); }

/* ------------------------------------------------------------
   6. Row — строка списка: leading | main | meta | trailing
   ------------------------------------------------------------ */

.row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

a.row:hover, button.row:hover { background: var(--surface-2); text-decoration: none; }
a.row:hover { transform: translateX(3px); }

.row--bare  { padding-left: 0; padding-right: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.row--bare:last-child { border-bottom: 0; }
.row--done    { border-color: var(--tint-ok-line);    background: var(--tint-ok); }
.row--current { border-color: var(--tint-practice-line); background: var(--tint-practice); }
.row--muted   { color: var(--text-4); }

.row__leading { grid-column: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.row__main    { grid-column: 2; min-width: 0; }
.row__meta    { grid-column: 3; color: var(--text-2); font-size: var(--fs-sm); }
.row__trailing{ grid-column: 4; display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }

.row__title { font-weight: 700; }
.row__sub   { color: var(--text-2); font-size: var(--fs-sm); }

.row__mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line-strong);
  color: transparent;
  font-weight: 800;
}
.row--done .row__mark    { border-color: var(--ok); background: var(--ok); color: #052412; }
.row--current .row__mark { border-color: var(--step-practice); color: var(--step-practice); }

/* ------------------------------------------------------------
   7. Состояния
   ------------------------------------------------------------ */

.state-empty {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--text-2);
}
.state-empty__icon { font-size: 2.6rem; line-height: 1; }
.state-empty__title { font-size: var(--fs-h2); font-weight: 800; color: var(--text-1); }

/* ------------------------------------------------------------
   8. Адаптив каркаса
   ------------------------------------------------------------ */

@media (max-width: 960px) {
  .layout, .layout--reverse, .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .layout-side { position: static; }
}

@media (max-width: 720px) {
  :root { --page-pad: var(--s-4) var(--s-3) var(--s-6); --gap: var(--s-3); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid > .span-2 { grid-column: auto; }
  .page-head { margin-bottom: var(--s-4); }
  .page-head--hero { padding: var(--s-4) var(--s-3); }
  .row { gap: var(--s-2); padding: var(--s-2); }
  .row__meta { display: none; }
}

@media (max-width: 480px) {
  .row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .row__meta { display: none; }
  .page-actions .btn { flex: 1; }
}