/* ============================================================
   CONTENT — роли учебного контента.

   Это язык, которым размечены уроки и тесты в content/. Автор
   контента пишет `<u>`, `<b>`, `.slot`, `.en`, `.ru` — и не думает
   о вёрстке; вёрстка живёт здесь и меняется, не трогая контент.

   Роли:
     .en        — фраза на изучаемом языке (моноширинный)
     .ru        — перевод/пояснение по-русски (курсив, тише)
     .slot, u   — ключевая форма внутри фразы (то, ради чего пример)
     .formula   — схема образования
     .mistake   — «так неправильно → так правильно»
     .scale     — лестница времени
   ============================================================ */

/* ------------------------------------------------------------
   Фраза и перевод
   ------------------------------------------------------------ */
.en {
  font-family: var(--font-mono);
  font-size: var(--fs-6);
  color: var(--text-soft);
  line-height: var(--lh-snug);
}
.en b { color: var(--text); font-weight: 600; }
/* ключевая форма — всегда цветом аспекта и с подчёркиванием:
   глаз должен цеплять её раньше остального предложения */
.en u {
  color: var(--accent-ink); text-decoration: none; font-weight: 600;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.ru { color: var(--text-dim); font-style: italic; font-size: var(--fs-3); }

/* ------------------------------------------------------------
   Формула образования
   ------------------------------------------------------------ */
.formula {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-5);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  margin: var(--s-2) 0; color: var(--text-soft);
  overflow-x: auto; white-space: nowrap;
}
.formula .lbl-l { color: var(--text-dim); flex: none; min-width: 8ch; }
.formula .op { color: var(--text-faint); flex: none; }
/* правая часть формулы — то, что надо запомнить */
.formula .slot { color: var(--accent-ink); font-weight: 600; }
.formula .lbl { color: var(--text-dim); font-size: var(--fs-2); margin-left: var(--s-2); }
.formulas { display: grid; gap: var(--s-2); max-width: 520px; }

/* ------------------------------------------------------------
   Карточка-пример: тап открывает перевод
   ------------------------------------------------------------ */
.ex-list { display: grid; gap: var(--s-3); }
.ex-hint {
  font-family: var(--font-mono); font-size: var(--fs-1); color: var(--text-faint);
  letter-spacing: 0.05em; text-align: center; margin-bottom: var(--s-2);
}
.rev {
  position: relative; text-align: center; cursor: pointer;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
  transition: border-color var(--dur-2) var(--ease);
}
/* уголок-подсказка вместо строки «нажми — перевод» под каждой карточкой */
.rev::after {
  content: ""; position: absolute; right: 12px; bottom: 10px;
  width: 6px; height: 6px; border-right: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint); transform: rotate(45deg);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.rev.is-open::after { transform: rotate(-135deg); opacity: 0.5; }
.rev .ru {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease), margin var(--dur-3) var(--ease);
}
.rev.is-open .ru { max-height: 140px; opacity: 1; margin-top: var(--s-3); }
@media (hover: hover) { .rev:hover { border-color: var(--border-strong); } }

/* активное вспоминание: русское → сказать по-английски */
.rev .prompt { font-size: var(--fs-6); color: var(--text); font-style: italic; }
.rev .answer {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease), margin var(--dur-3) var(--ease);
  font-family: var(--font-mono); font-size: var(--fs-6); color: var(--accent-ink); font-weight: 600;
}
.rev.is-open .answer { max-height: 160px; opacity: 1; margin-top: var(--s-4); }
.rev .tip-line {
  max-height: 0; opacity: 0; overflow: hidden; transition: all var(--dur-3) var(--ease);
  font-size: var(--fs-2); color: var(--text-dim);
}
.rev.is-open .tip-line { max-height: 80px; opacity: 1; margin-top: var(--s-2); }

/* ------------------------------------------------------------
   Микро-упражнение: задание слева, разбор под ним
   Карточка та же (.rev), но текст длиннее одной фразы — поэтому
   выравнивание по левому краю, а не по центру: строку в две-три
   строки по центру читать заметно тяжелее.
   ------------------------------------------------------------ */
.drill-task {
  color: var(--text-soft); font-size: var(--fs-4);
  max-width: 60ch; margin: 0 auto var(--s-4);
}
.rev.is-drill { text-align: left; padding-right: var(--s-6); }
.rev.is-drill .drill-label {
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: 0.05em;
  color: var(--text-faint); text-transform: uppercase; margin-bottom: var(--s-2);
}
.rev.is-drill .drill-q { font-size: var(--fs-4); color: var(--text); }
.rev.is-drill .drill-q b { color: var(--accent-ink); }
.rev.is-drill .answer {
  font-family: var(--font-sans); font-size: var(--fs-4); font-weight: 600;
  line-height: 1.5;
}
/* Потолки раскрытия щедрые намеренно: на телефоне разбор в 300 символов
   разворачивается в десяток строк, и подрезанный по max-height текст
   выглядит не как анимация, а как баг. Лишний запас стоит только того,
   что раскрытие доезжает чуть быстрее — это незаметно. */
.rev.is-drill.is-open .answer { max-height: 600px; margin-top: var(--s-3); }
.rev.is-drill.is-open .tip-line { max-height: 520px; }
.rev.is-drill .tip-line { line-height: 1.5; }

/* ------------------------------------------------------------
   Сравнение двух вариантов
   ------------------------------------------------------------ */
.vs { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
.vs-card {
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-4);
}
.vs-card .en { font-size: var(--fs-5); color: var(--text); }
.vs-card .ru { margin-top: var(--s-2); }
.vs-card .tg {
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: var(--s-3); color: var(--accent-ink);
}
.vs-card.is-alt .tg { color: var(--text-dim); }
@media (min-width: 640px) { .vs { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }

/* ------------------------------------------------------------
   Частые ошибки
   ------------------------------------------------------------ */
.mistake { display: grid; gap: var(--s-3); }
.mrow {
  display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-3);
}
.mrow .bad { color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--danger); }
.mrow .good { color: var(--text); }
.mrow .good::before { content: "→ "; color: var(--success-ink); }
.why { font-family: var(--font-sans); font-size: var(--fs-2); color: var(--text-dim); margin-top: 2px; }
@media (min-width: 640px) { .mrow { grid-template-columns: 1fr 1fr; gap: var(--s-3); font-size: var(--fs-4); } }

/* ------------------------------------------------------------
   Лестница времени (вчера / сегодня / завтра)
   ------------------------------------------------------------ */
.scale { display: grid; gap: 2px; font-family: var(--font-mono); max-width: 620px; }
.scale-row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline;
  gap: var(--s-3); padding: 10px var(--s-1); border-radius: var(--r-sm);
}
.scale-row .delta { color: var(--text-faint); font-size: var(--fs-5); text-align: right; }
.scale-row .en { color: var(--text-faint); font-size: var(--fs-5); }
.scale-row .ru { color: var(--text-faint); font-size: var(--fs-2); text-align: right; font-style: normal; }
.scale-row.today .delta, .scale-row.today .en { color: var(--c-blue-ink); }
.scale-row.today .en { font-weight: 700; }
.scale-row.today .ru { color: var(--text-soft); }
.scale-row.mark { background: var(--warn-soft); }
.scale-row.mark .delta, .scale-row.mark .en { color: var(--warn-ink); }
.scale-row.mark .en { font-weight: 700; }
.scale-row.mark .ru { color: var(--text); font-weight: 600; }
@media (min-width: 640px) {
  .scale-row { grid-template-columns: 64px 1fr auto; padding: var(--s-3) var(--s-1); }
}

/* ------------------------------------------------------------
   Ось времени (SVG). Рисуется в engine/timeline.js
   ------------------------------------------------------------ */
.tl-scroll {
  position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin-top: var(--s-2);
  /* края растворяются — видно, что ленту можно тянуть */
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.tl-scroll::-webkit-scrollbar { display: none; }
.tl { display: block; width: 100%; min-width: 460px; max-width: 720px; margin: 0 auto; overflow: visible; }
.tl .axis-line { stroke: var(--border-strong); stroke-width: 2; }
.tl .axis-head { fill: var(--border-strong); }
.tl .glow { animation: now-pulse 2.6s ease-in-out infinite; transform-origin: center; }
.tl .nowdot { stroke: var(--now); stroke-width: 2; stroke-dasharray: 2 4; }
.tl .lbl-now { fill: var(--now-ink); font-family: var(--font-mono); font-size: 15px; letter-spacing: 3px; }
.tl .lbl-end { fill: var(--text-dim); font-family: var(--font-mono); font-size: 14px; letter-spacing: 3px; }
.tl .cap { font-family: var(--font-mono); font-size: 16px; }

.tl .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tl-draw 1s 0.15s var(--ease) forwards; }
.tl .pop {
  opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center;
  animation: tl-pop var(--dur-3) var(--ease) forwards;
}
.tl .checkmark { opacity: 0; animation: tl-fade var(--dur-3) 0.9s forwards; }

@keyframes now-pulse { 0%, 100% { opacity: 0.35 } 50% { opacity: 0.8 } }
@keyframes tl-draw { to { stroke-dashoffset: 0; } }
@keyframes tl-pop  { to { opacity: 1; transform: scale(1); } }
@keyframes tl-fade { to { opacity: 1; } }