/* site.css — оформление публичной страницы школы. */

/* ---------- Шапка ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 248, 244, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 700; font-size: 1.125rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
/* Знак клуба — щит «ДЕБЮТ · КУДРОВО». Картинка вытянута по вертикали,
   поэтому задаём высоту, а ширину считает браузер. */
.logo .mark {
  display: block; width: auto; height: 40px; border-radius: 0; background: none;
}
.logo small { display: block; font-size: .6875rem; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); margin-left: auto; }
/* Пункт меню не должен ломаться посередине («Как\nучим»): при нехватке
   места переносится целиком. */
.site-nav a { color: var(--muted); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-header .btn { margin-left: var(--s4); }
@media (max-width: 860px) {
  .site-header .wrap { flex-wrap: wrap; gap: var(--s3); min-height: 0; padding-block: var(--s2); }
  .logo small { display: none; }

  /* Раньше на телефоне навигация просто пряталась, и родитель не мог ни
     дойти до расписания, ни попасть в личный кабинет — только листать всю
     страницу. Показываем её лентой с прокруткой под логотипом. */
  .site-nav {
    display: flex; order: 3; width: 100%; gap: var(--s4);
    overflow-x: auto; padding: 6px 0 2px; margin-left: 0;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  /* Палец толще курсора: строка в 22 пикселя высотой — это промах через раз.
     Растягиваем область нажатия по вертикали, не трогая саму типографику. */
  .site-nav a {
    flex: 0 0 auto; font-size: .875rem;
    display: inline-flex; align-items: center; min-height: 44px;
    padding-block: 2px;
  }
  .site-nav { padding: 0; gap: var(--s4) var(--s5); }
  .site-header .btn { margin-left: auto; }
}

/* ---------- Экран приветствия ---------- */
.hero { padding: var(--s8) 0 var(--s7); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 6px 14px; margin-bottom: var(--s4);
  background: var(--accent-soft); color: var(--accent-ink);
  border-radius: var(--r-pill); font-size: .8125rem; font-weight: 650;
}
.hero p.lead { font-size: 1.125rem; color: var(--muted); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.hero-facts div { max-width: 22ch; }
.hero-facts b { display: block; font-size: 1.75rem; letter-spacing: -.02em; }
.hero-facts span { color: var(--muted); font-size: .875rem; }

/* Доска. Раньше ряды задавались неявно и подстраивались под содержимое:
   строки с фигурами становились выше пустых, сумма перерастала высоту
   контейнера — и нижняя горизонталь уезжала за край. Отсюда явные
   grid-template-rows: восемь равных рядов, всегда полная доска. */
.board-figure { margin: 0; display: grid; gap: var(--s3); justify-items: center; }
.board {
  position: relative;
  aspect-ratio: 1; width: 100%; max-width: 420px;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 8px solid #2a2118;
  /* Единица cqi ниже считается от ширины самой доски — так фигуры
     остаются пропорциональными на любом экране. */
  container-type: inline-size;
}
.board-squares {
  position: absolute; inset: 0;
  display: grid;
  /* minmax(0, 1fr), а не просто 1fr: у обычного 1fr минимум равен размеру
     содержимого, поэтому клетки с фигурами раздували ряды и сетка вылезала
     за доску — нижняя горизонталь уезжала под рамку. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
}
.board-squares i { background: #f0e5d2; }
.board-squares i.dark { background: #a97d51; }
.board-squares i.piece { display: grid; place-items: center; font-style: normal; color: #14151a; font-size: 28px; font-size: 9cqi; }
.board-squares i.piece.light-piece { color: #fffdf8; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* Подсветка последнего хода: видно, что именно сейчас пошло. */
.board-squares i.from { box-shadow: inset 0 0 0 100vmax rgba(168, 80, 15, .22); }
.board-squares i.to { box-shadow: inset 0 0 0 100vmax rgba(168, 80, 15, .34); }

/* Слой фигур: каждая фигура позиционируется трансформацией, поэтому ход —
   это анимация transform, а не перерисовка доски. */
.board-pieces { position: absolute; inset: 0; }
.board-pieces .cp {
  position: absolute; top: 0; left: 0;
  width: 12.5%; height: 12.5%;
  display: grid; place-items: center;
  font-size: 28px; font-size: 9cqi; line-height: 1;
  color: #14151a;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
  will-change: transform;
}
.board-pieces .cp.light-piece { color: #fffdf8; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.board-pieces .cp.taken { opacity: 0; }
/* Пока идёт партия, фигуры из клеток убраны — их рисует слой выше. */
.board.live .board-squares i.piece { color: transparent; text-shadow: none; }

.board-caption {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  justify-content: center; max-width: 420px;
  color: var(--muted); font-size: .875rem;
}
.board-caption #board-move { font-variant-numeric: tabular-nums; }
.board-caption b { color: var(--ink); }

/* Человеку, который отключил анимации в системе, доска не должна мельтешить:
   партия не запускается сама, а ждёт кнопки. */
@media (prefers-reduced-motion: reduce) {
  .board-pieces .cp { transition: none; }
}

@media (max-width: 920px) {
  .hero { padding-top: var(--s6); }
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-media { order: -1; }
  .board { max-width: 300px; }
  .hero-facts { gap: var(--s5); margin-top: var(--s5); }
}

/* ---------- Секции ---------- */
section { padding: var(--s8) 0; }
.section-head { max-width: 62ch; margin-bottom: var(--s6); }
.section-head p { color: var(--muted); margin-bottom: 0; }
.kicker { color: var(--accent-ink); font-weight: 650; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s2); }

.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
/* Между рядами карточек клуба — такой же отступ, как между самими карточками. */
.club-facts { margin-top: var(--s4); }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: var(--s2); }
.card p:last-child { margin-bottom: 0; }
/* Иконки — свои, нарисованы линией в одном весе: системные эмодзи в каждой
   ОС выглядят по-своему и выпадают из оформления. */
.card .icon { display: block; margin-bottom: var(--s3); color: var(--accent); }
.card .icon svg { width: 34px; height: 34px; display: block; }

.alt { background: var(--surface-2); }

/* Программы */
.program { display: flex; flex-direction: column; }
.program .level { font-size: .8125rem; font-weight: 650; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .06em; }
.program ul { list-style: none; padding: 0; margin: var(--s3) 0 var(--s5); display: grid; gap: var(--s2); }
.program li { position: relative; padding-left: var(--s5); color: var(--muted); font-size: .9375rem; }
.program li::before { content: "♟"; position: absolute; left: 0; color: var(--accent); }
.program .price { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: var(--s2); }
.program .price b { font-size: 1.5rem; letter-spacing: -.02em; }
.program .price span { color: var(--muted); font-size: .875rem; }

/* Шаги */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.steps li { counter-increment: step; list-style: none; padding-top: var(--s5); border-top: 3px solid var(--line-strong); }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--font-num); font-size: .875rem; color: var(--accent); font-weight: 700; margin-bottom: var(--s2); }
.steps b { display: block; margin-bottom: var(--s1); }
.steps span { color: var(--muted); font-size: .9375rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Тренеры */
.coach { display: flex; gap: var(--s4); align-items: flex-start; }
/* Руководитель клуба — во всю ширину, тренеры парой под ним: трое в сетке на два
   столбца иначе оставляют одну карточку сиротой. */
.coach-lead { grid-column: 1 / -1; }
.coach .avatar {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em;
}
.coach h3 { font-size: 1.0625rem; margin-bottom: var(--s1); }
.coach .role { color: var(--accent-ink); font-size: .875rem; font-weight: 600; margin-bottom: var(--s2); }
.coach p { font-size: .9375rem; color: var(--muted); margin: 0; }

/* Вопросы */
.faq { display: grid; gap: var(--s2); max-width: 800px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.faq summary { cursor: pointer; padding: var(--s4) var(--s5); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); min-height: 44px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.375rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { padding: 0 var(--s5) var(--s4); color: var(--muted); margin: 0; }

/* ---------- Запись ---------- */
.signup .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
@media (max-width: 900px) { .signup .wrap { grid-template-columns: 1fr; gap: var(--s6); } }
.signup-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-md); }
.signup-form .btn { width: 100%; }
.consent { display: flex; gap: var(--s3); align-items: flex-start; font-size: .8125rem; color: var(--muted); margin: var(--s4) 0; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; }
.consent label { max-width: none; }

/* Сообщение о результате отправки. Место под него занято всегда — иначе
   форма дёргается, когда ответ появляется. */
.form-status { min-height: 24px; font-size: .9375rem; font-weight: 600; margin-top: var(--s3); }
.form-status[data-kind="ok"] { color: var(--ok); }
.form-status[data-kind="err"] { color: var(--danger); }

.contacts { display: grid; gap: var(--s4); }
.contacts a { font-weight: 600; }

/* ---------- Подвал ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s6) 0; color: var(--muted); font-size: .875rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; align-items: center; }
.site-footer a { color: var(--muted); }

/* ---------- Страница входа ---------- */
body.auth { display: grid; place-items: center; min-height: 100vh; background: var(--surface-2); }
.auth-card { width: min(100% - var(--s4), 420px); padding: var(--s5) 0; }
.auth-logo { justify-content: center; margin-bottom: var(--s5); }
.auth-title { font-size: 1.375rem; margin-bottom: var(--s2); }
.auth-back { text-align: center; margin-top: var(--s4); font-size: .875rem; }

/* На узких экранах подпись под логотипом переносится и раздувает шапку
   вдвое — на телефоне важнее CTA. */
@media (max-width: 420px) {
  .logo small { display: none; }
}

/* ---------- Мессенджеры ----------
   Кнопки, а не просто ссылки: на телефоне это основной способ написать, и
   промахнуться пальцем мимо строки текста легко. Фирменные логотипы не
   используем — только буквенный знак, чтобы не тащить чужие картинки. */
.messengers { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.messengers-title { flex-basis: 100%; margin: 0; }
.messenger { gap: var(--s2); padding-left: var(--s3); }
.messenger-mark {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  font-size: .8125rem; font-weight: 700; line-height: 1; color: #fff;
}
.messenger-max .messenger-mark { background: #7c4dff; }
.messenger-tg .messenger-mark { background: #2aabee; font-size: .875rem; }

/* Перемотка без анимации: позиция должна появиться сразу, а не «переехать». */
.board-pieces.instant .cp { transition: none; }

.messenger-wa .messenger-mark { background: #25d366; }
.messenger-vk .messenger-mark { background: #0077ff; font-size: .6875rem; }

/* ---------- Расписание ----------
   Цвета уровней повторяют легенду из расписания клуба (младшие — зелёные,
   средние — голубые, старшие — жёлтые, сборные — сиреневые), но приглушены
   под палитру сайта: полоса слева яркая, фон карточки — едва тонированный,
   а текст везде тёмный, чтобы контраст не зависел от цвета группы. */
:root {
  --lvl-jr: #2f8f5b;   --lvl-jr-soft: #eaf5ee;
  --lvl-mid: #2f7fb8;  --lvl-mid-soft: #e8f2f9;
  --lvl-sr: #c28a12;   --lvl-sr-soft: #fbf3df;
  --lvl-team: #9a4a8c; --lvl-team-soft: #f6ebf4;
}

.schedule-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.chip-jr::before { background: var(--lvl-jr); }
.chip-mid::before { background: var(--lvl-mid); }
.chip-sr::before { background: var(--lvl-sr); }
.chip-team::before { background: var(--lvl-team); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.schedule-select { width: auto; min-width: 200px; min-height: 40px; padding-block: var(--s2); }
.schedule-count { margin: 0 0 0 auto; }
@media (max-width: 720px) { .schedule-count { margin-left: 0; flex-basis: 100%; } }

.week { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
@media (max-width: 1060px) { .week { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .week { grid-template-columns: 1fr; } }

.day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); }
.day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.day-name {
  display: flex; align-items: center; gap: var(--s2);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: var(--s1) var(--s1) var(--s3);
}
.day-short { display: none; }
.day.today .day-name { color: var(--accent-ink); }
.day.today .day-name::after {
  content: "сегодня"; text-transform: none; letter-spacing: 0;
  font-size: .75rem; font-weight: 650; color: #fff;
  background: var(--accent); border-radius: var(--r-pill); padding: 1px 8px;
}

.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.slots li { max-width: none; }
.slot {
  display: grid; gap: 2px;
  padding: var(--s2) var(--s3) var(--s2) calc(var(--s3) + 2px);
  border-radius: var(--r-sm);
  border-left: 4px solid var(--line-strong);
  background: var(--surface-2);
  line-height: 1.35;
}
.slot-jr   { border-left-color: var(--lvl-jr);   background: var(--lvl-jr-soft); }
.slot-mid  { border-left-color: var(--lvl-mid);  background: var(--lvl-mid-soft); }
.slot-sr   { border-left-color: var(--lvl-sr);   background: var(--lvl-sr-soft); }
.slot-team { border-left-color: var(--lvl-team); background: var(--lvl-team-soft); }
.slot-time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.slot-group { font-weight: 600; font-size: .9375rem; }
.slot-note, .slot-venue { color: var(--muted); font-size: .8125rem; }
.slot-venue::before { content: "⌖ "; }
.day-empty { margin: var(--s1); font-size: .8125rem; }

/* На узких экранах знак чуть меньше: шапка и так в две строки. */
@media (max-width: 860px) { .logo .mark { height: 34px; } }

/* ---------- Личный кабинет ---------- */
.cabinet-page { background: var(--surface-2); }
.site-header .cabinet-schedule { margin-left: auto; }
.cabinet { padding: var(--s5) 0 var(--s8); display: grid; gap: var(--s4); }
.cabinet .form-status { margin: 0; min-height: 0; }
.cabinet .form-status:empty { display: none; }
.cabinet-loading { color: var(--muted); padding: var(--s7) 0; text-align: center; }
.cabinet-error { color: var(--danger); font-weight: 600; }
.cabinet h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: var(--s1); }
.cabinet h2 { font-size: 1.25rem; margin-bottom: var(--s3); }
.cabinet-note { text-align: center; max-width: 60ch; margin: var(--s2) auto 0; }
#content { display: grid; gap: var(--s4); }

.profile { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: start; }
@media (max-width: 640px) { .profile { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.avatar-block { display: grid; justify-items: center; gap: var(--s2); width: 180px; }
.avatar-frame {
  width: 150px; height: 150px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--ink); box-shadow: var(--shadow-md);
  border: 4px solid var(--surface);
}
.avatar-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-frame.busy { opacity: .5; }
.avatar-empty { color: #fff; font-size: 64px; line-height: 1; }
.avatar-actions { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: center; }
.avatar-actions label { cursor: pointer; }
.avatar-hint { text-align: center; font-size: .75rem; margin: 0; }
.profile-body { min-width: 0; width: 100%; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin: var(--s4) 0 0; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; text-align: left; } }
.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; }

/* Месяц строкой, сумма — крупно под ним: на узком экране они всё равно
   не помещались в одну строку и разъезжались посередине числа. */
.pay-sum { font-size: 1rem; margin-bottom: var(--s1); color: var(--muted); }
.pay-sum b {
  display: block; margin-top: 2px; color: var(--ink);
  font-size: 1.75rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pay-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

.invoice-list { list-style: none; margin: 0; padding: 0; display: grid; }
.invoice-list li { max-width: none; }
.invoice {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); align-items: center;
  padding: var(--s3) 0; border-top: 1px solid var(--line);
}
.invoice:first-child { border-top: 0; }
.invoice > div:first-child { display: grid; }
.invoice-actions { display: flex; gap: var(--s2); }
@media (max-width: 640px) { .invoice { grid-template-columns: 1fr; } }

.pay-dialog {
  width: min(100% - 2 * var(--s4), 720px); border: 0; border-radius: var(--r-lg); padding: 0;
  box-shadow: var(--shadow-lg); color: var(--ink); background: var(--surface);
}
.pay-dialog::backdrop { background: rgba(20, 21, 26, .5); }
.pay-dialog-head { display: flex; align-items: center; padding: var(--s4) var(--s5) 0; }
.pay-dialog-head h2 { margin: 0; font-size: 1.25rem; }
.pay-dialog-head .btn { margin-left: auto; }
.pay-dialog-body { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); padding: var(--s4) var(--s5); max-height: 70vh; overflow: auto; }
@media (max-width: 640px) { .pay-dialog-body { grid-template-columns: 1fr; } }
.qr-box { display: grid; justify-items: center; gap: var(--s2); }
.qr-box img { width: 220px; height: 220px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 6px; }
.qr-amount { text-align: center; margin: 0; max-width: 240px; }
.qr-amount b { display: block; font-size: 1.375rem; white-space: nowrap; }
.qr-amount .sub { display: block; }
.pay-steps { margin: 0 0 var(--s3); padding-left: 1.2em; display: grid; gap: var(--s1); }
.requisites summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.requisites dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: 0; font-size: .875rem; }
.requisites dt { color: var(--muted); }
.requisites dd { margin: 0; display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; word-break: break-word; }
.copy { border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: .75rem; cursor: pointer; padding: 2px 4px; text-decoration: underline; }
.pay-dialog-foot { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.pay-dialog-foot p { margin: 0; flex: 1; }

/* ---------- Вход для учеников ---------- */
.vhod-head p { max-width: 60ch; }
.vhod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 760px) { .vhod-grid { grid-template-columns: 1fr; } }
.vhod h2 { display: flex; align-items: center; gap: var(--s2); }
.vhod-max { background: #7c4dff; width: 28px; height: 28px; }
.max-wait { display: flex; gap: var(--s4); align-items: flex-start; margin-top: var(--s4); flex-wrap: wrap; }
.max-wait img { width: 180px; height: 180px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 6px; }
.max-wait .form-status { margin-top: var(--s2); }
.children { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: var(--s2); }
.children li { max-width: none; }
.child {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: var(--ink); background: var(--surface);
}
.child:hover { border-color: var(--ink); }
.child::after { content: "→"; color: var(--accent); font-weight: 700; }
.child span { margin-left: auto; }
#signed-out { display: grid; gap: var(--s4); }

.vhod-grid.single { grid-template-columns: minmax(0, 560px); }
.vhod-closed p:last-child { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }

/* Занятие в расписании — кнопка: нажатие открывает заявку с уже вписанной
   группой, днём и временем. */
.slot-pick { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.slot-pick:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.slot-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.slot-pick::after {
  content: 'Записаться →'; display: block; margin-top: 4px;
  font-size: .75rem; color: var(--accent); opacity: 0; transition: opacity .12s ease;
}
.slot-pick:hover::after, .slot-pick:focus-visible::after { opacity: 1; }
@media (hover: none) { .slot-pick::after { opacity: .8; } }

/* Кнопки под QR: сохранить картинку и скопировать реквизиты одним нажатием. */
.qr-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.qr-actions .btn { flex: 1 1 auto; }

/* Расписание ребёнка в кабинете. */
.lessons { margin-top: var(--s4); }
.lesson-list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lesson-list li {
  display: grid; grid-template-columns: 3.5em auto; gap: 2px var(--s3); align-items: baseline;
  padding: 6px var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.lesson-day { font-weight: 600; text-transform: capitalize; }
.lesson-time { font-variant-numeric: tabular-nums; }
.lesson-list .sub { grid-column: 2; }

/* Турниры ребёнка в кабинете. */
.cab-tournaments { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.cab-tournaments li { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); }
.cab-tournaments li.past { opacity: .8; }
.cab-t-name { font-weight: 600; }
.cab-t-state { margin-top: 4px; font-size: .9375rem; }
.cab-t-state.due { color: var(--danger); }
.cab-t-state.ok { color: var(--ok); }

/* ---------- Слайдер фотографий на первом экране ----------
   Стоит на месте шахматной доски. Кадры 4:3, один поверх другого, смена —
   плавным проявлением: сдвиг по горизонтали на телефоне спорил бы с
   прокруткой страницы. */
.slider { margin: 0; display: grid; gap: var(--s3); position: relative; }
.slides {
  list-style: none; margin: 0; padding: 0; position: relative;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: #e9e3d8; box-shadow: var(--shadow-lg);
}
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; }
.slide.is-active { opacity: 1; z-index: 1; }
/* Без скрипта виден первый снимок: остальные помечены hidden в разметке. */
.slide:not([hidden]):first-child { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slider-nav {
  position: absolute; top: calc(50% - 40px); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20, 21, 26, .55); color: #fff; font-size: 26px; line-height: 1;
  display: grid; place-items: center; padding: 0 0 3px;
  transition: background .15s ease;
}
.slider-nav:hover { background: rgba(20, 21, 26, .8); }
.slider-nav:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.slider-nav.prev { left: 10px; }
.slider-nav.next { right: 10px; }

.slider-caption { display: flex; align-items: center; justify-content: center; gap: var(--s4); flex-wrap: wrap; }
.slider-dots { display: inline-flex; gap: 2px; }
/* Сама точка маленькая, а область нажатия — 28 px: иначе пальцем не попасть. */
.slider-dots button {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.slider-dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong); transition: background .2s ease, transform .2s ease;
}
.slider-dots button[aria-selected="true"]::before { background: var(--accent); transform: scale(1.35); }
.slider-dots button:focus-visible { outline: 2px solid var(--focus); border-radius: 50%; }

@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }