/* sm-warm-shell.css — тёплая тема только для оболочки главной страницы.

   index.html живёт двумя жизнями: гостю это витрина с фотографией и
   приглашением, вошедшему ученику — его «Мои курсы». Витрину мы не трогаем,
   поэтому здесь нет ни одной переменной: цвета вписаны прямо в правила и
   действуют только на меню слева и колонку курсов справа. Середина страницы
   продолжает читать --color-* из modernist.css и остаётся прежней.

   Подключается ПОСЛЕ modernist.css и sm-ui.css — тем и перебивает их.
   Значения совпадают с sm-warm.css: если тема поедет, править надо оба. */

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

/* ---------- меню слева ---------- */
.side {
  background: #211a19; color: #f5efe9;
  font-family: "Nunito", system-ui, sans-serif;
}
.side-top { border-bottom: 0; padding: 20px 16px 16px; }
.side-name span:first-child { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.side-name span:last-child { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: #a89a92; }
.flag { border-radius: 3px; }

.roles { padding: 0 12px 14px; gap: 4px; }
.roles button {
  border-radius: 9px; padding: 8px 6px;
  font-family: "Nunito", system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: #2b2220; color: #a89a92;
}
.roles button.on { background: #f5efe9; color: #211a19; }
.roles button:not(.on):hover { background: #3a2e2b; color: #f5efe9; }

.navlist { padding: 0 10px; gap: 1px; }
.navItem {
  padding: 9px 11px; border-radius: 9px; border-left: 0;
  background: transparent; color: #a89a92;
}
.navItem:hover { background: #2b2220; color: #f5efe9; }
.navItem.on { background: #3a2e2b; color: #fffdf8; border-left: 0; }
.navItem span.t { font-size: 13px; font-weight: 600; }
.navItem.on span.t { font-weight: 700; }
.navItem .badge {
  border-radius: 999px; min-width: 20px; height: 20px;
  background: #f5efe9; color: #211a19; font-size: 11px; font-weight: 700;
}
.navItem .soon { color: #6d5f5a; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.navItem[disabled]:hover { background: transparent; color: #a89a92; }

.side-user { border-top: 1px solid #3a2e2b; padding: 14px 16px; }
.side-user .av { border-radius: 50%; background: #f5efe9; color: #211a19; font-weight: 700; }
.side-user .who b { font-size: 13px; font-weight: 700; }
.side-user .who span { font-size: 11px; color: #a89a92; }
.side-user .out { color: #a89a92; border-radius: 9px; }
.side-user .out:hover { color: #f5efe9; background: #2b2220; }

/* ---------- колонка курсов справа ---------- */
.home-hero .rail {
  border-left: 1px solid #e9e2d6; background: #f8f2e8;
  font-family: "Nunito", system-ui, sans-serif; color: #241a18;
}
.rail .rail-hd {
  border-bottom: 1px solid #e9e2d6;
  font-family: "Nunito", system-ui, sans-serif; color: #7d726a;
}
.rail .rail-assigned { background: #211a19; color: #fffdf8; }
.rail .rail-assigned .k { color: #e8a3b6; }
.rail .rail-assigned h3 { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }
.rail .rail-assigned p { color: #a89a92; font-weight: 400; }
.rail .rail-assigned .go { background: #7c2340; color: #fff; border-radius: 9px; font-weight: 600; }
.rail .rail-assigned .go:hover { background: #a34762; }

.rail .sect { color: #7d726a; font-family: "Nunito", system-ui, sans-serif; }
.rail .crs-row { border-bottom: 1px solid #e9e2d6; }
.rail .crs-row:hover { background: #fdf7ec; box-shadow: none; }
.rail .crs-row.assigned { background: #fdf7ec; border-left-color: #7c2340; }
.rail .crs-row .num { background: #f4ece0; border-radius: 9px; }
.rail .crs-row:hover .num { background: #fffdf8; }
.rail .crs-row .t { font-size: 15px; font-weight: 700; letter-spacing: 0; color: #241a18; }
.rail .crs-row .d { font-size: 12px; font-weight: 400; color: #7d726a; }
.rail .crs-row:hover .t { color: #7c2340; }
.rail .crs-row .tag { background: #7c2340; color: #fff; border-radius: 9px; font-weight: 700; }

/* ---------- узкий экран: верхняя полоса и выезжающее меню ---------- */
@media (max-width: 820px) {
  .sm-bar { background: #211a19; color: #f5efe9; border-bottom: 0; }
  .sm-bar-name { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; letter-spacing: .04em; }
  .sm-burger { color: #f5efe9; border-radius: 9px; }
  .sm-burger .badge { background: #f5efe9; color: #211a19; border-radius: 999px; font-weight: 700; }
  .side { box-shadow: 2px 0 30px rgba(20, 14, 13, .5); }
  .sm-scrim { background: rgba(20, 14, 13, .55); }
}