@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@700..900&family=Manrope:wght@400;600;700&display=swap');

:root {
  --blue: #2F57E1;
  --blue-dark: #284466;
  --orange: #FF632F;
  --ink: #212020;
  --bg-card: #EDF0F8;
  --bg-card-alt: #EDF6FF;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Manrope', -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
}
header {
  background: var(--blue-dark);
  color: #fff;
  padding: 32px 20px;
}
header .wrap { max-width: 900px; margin: 0 auto; }
header .logo { height: 32px; width: auto; display: block; margin-bottom: 14px; }
header h1 {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 900;
  font-size: 1.7rem;
  margin: 0 0 8px;
 text-transform: uppercase;}
header p { margin: 0; opacity: 0.85; }
header .back-link {
  display: inline-block;
  margin-bottom: 14px;
  color: #fff;
  opacity: 0.85;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}
header .back-link:hover { text-decoration: underline; }

main { max-width: 900px; margin: 0 auto; padding: 32px 20px 60px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.card {
  display: block;
  border: 1px solid #e2e6ef;
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, background .15s;
}
.card.active { border-color: var(--blue); background: var(--bg-card-alt); }
.card.stub { cursor: default; background: var(--bg-card); }
.card h3 {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 800;
  color: var(--blue-dark);
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.card p { margin: 0 0 10px; color: #444; font-size: 0.9rem; }
.card ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; color: #555; }
.card ul li { margin-bottom: 4px; }

.badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-block;
}
.badge.ready { background: var(--blue); color: #fff; }
.badge.stub { background: #eee; color: #777; }
.badge.progress { background: var(--orange); color: #fff; }

.lede { color: #444; font-size: 1rem; margin: 0 0 28px; max-width: 640px; }

footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 60px;
  font-size: 0.85rem;
  color: #888;
}

.characters { margin-top: 48px; }
.characters h2 {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 800;
  color: var(--blue-dark);
  font-size: 1.25rem;
  margin: 0 0 8px;
}
.char-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.char-card {
  flex: 0 1 260px;
}
.char-card {
  border: 1px solid #e2e6ef;
  border-radius: 16px;
  padding: 22px 16px 18px;
  background: #fff;
  text-align: center;
}
.char-avatar {
  width: 92px;
  height: 92px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bg-card-alt);
  overflow: hidden;
}
.char-avatar svg { width: 100%; height: 100%; display: block; }
.char-name {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 800;
  color: var(--blue-dark);
  font-size: 1rem;
  margin: 0 0 2px;
}
.char-role {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange);
  margin-bottom: 10px;
}
.char-desc { font-size: 0.85rem; color: #444; line-height: 1.5; margin: 0; }

/* --- Ярлычок типа материала на карточке -------------------------------
   Заведён 2026-09-07, цветовая система пересмотрена 2026-09-08 (правки
   пользователя). Два яруса: на витрине уровня — курс / спецкурс / статья,
   внутри курса — урок / блок курсов / тест / замер.
   Оформление повторяет пилюлю `eyebrow` внутри уроков — нового в систему
   не заводим. Три смысловые группы, у каждой — тон (частый ярлык) →
   заливка (реже/особое) → контур (самый редкий), без цветов вне брендбука:
     СИНИЙ (#2F57E1)      — курс, блок курсов
     РЫЖИЙ (#FF632F)      — урок, спецкурс, статья
     ЧЁРНЫЙ (#212020)     — тест, замер
   Полная таблица соответствий — см. 03_TEMPLATES/Промт_единый_стиль_Брусника_ЛМС.md. */
.card-tag {
  display: inline-block;
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 800;
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 9px;
}
.card-tag--k  { background: #EDF0F8; color: #2F57E1; }               /* курс — синий тон */
.card-tag--k2 { background: #2F57E1; color: #fff; }                  /* блок курсов — синяя заливка */
.card-tag--s  { background: #FFE8DF; color: #FF632F; }               /* урок — рыжий тон */
.card-tag--s2 { background: #FF632F; color: #fff; }                  /* спецкурс — рыжая заливка */
.card-tag--s3 { background: #fff; color: #FF632F; border: 1.5px solid #FF632F; } /* статья — рыжий контур */
.card-tag--a  { background: #EFF1F4; color: #212020; }               /* тест — чёрный тон */
.card-tag--a2 { background: #212020; color: #fff; }                  /* замер — чёрная заливка */
.card.stub .card-tag { opacity: 0.65; }