/* Картинг СПб: оформление сайта. Без внешних шрифтов и библиотек: всё с этого сервера.
   Этот же файл подключает админка (admin.css поверх): имена переменных и общих классов
   (.button, .badge, .notice, .nav, .card-meta…) не меняем. */

/* Палитра: холодный серый фон, белые плитки, графитовая шапка и оранжево-красный акцент
   «стартового огня». Цвета типов — те же в фильтре, в клетках месяца и на карточках. */
:root {
  --bg: #f2f3f5;
  --surface: #ffffff;
  --surface-2: #eceef1;
  --text: #14161a;
  --muted: #5a5f68;
  --line: #e3e5e9;
  --line-strong: #cdd0d6;
  /* Акцент на белом — около 3:1: им рисуем отметки, черту в меню и фокус. Мелкий текст и заливка
     кнопки с белой надписью — тёмным оттенком (5,1:1). */
  --accent: #ff5a36;
  --accent-strong: #c93a1b;
  --accent-hover: #a83014;
  --accent-soft: #fff0eb;
  --accent-ink: #ffffff;
  --link: #14161a;
  --link-line: #ff5a36;
  --focus: #ff5a36;
  --c-competition: #f0502d;
  --c-prep_practice: #c98a0b;
  --c-training: #3170e8;
  --c-school: #1f9a55;
  --c-special: #8b48dc;
  --c-other: #7d828b;
  /* Текст на заливке цветом типа: тот же оттенок, затемнённый до 7:1 и выше. */
  --ink-mix: #000;
  /* Шапка: графитовая полоса в обеих темах. */
  --top-bg: #14161a;
  --top-text: #ffffff;
  --top-muted: #b4b9c1;
  --top-hover: #2a2d33;
  --warn-bg: #fff3e0;
  --warn: #7c4a03;
  --review-bg: #eef1ff;
  --review: #3b3f9e;
  --cancel: #b42318;
  --cancel-bg: #fdecea;
  --preview-bg: #fff6d1;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgb(20 22 26 / 0.05), 0 1px 4px rgb(20 22 26 / 0.04);
  --shadow-pop: 0 12px 32px rgb(20 22 26 / 0.16);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 0.9375rem;
  --control: 40px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f11;
    --surface: #18191d;
    --surface-2: #23252a;
    --text: #eceef1;
    --muted: #a3a8b0;
    --line: #2a2d33;
    --line-strong: #3f434a;
    --accent: #ff6a48;
    --accent-strong: #ff8466;
    --accent-hover: #ffa28a;
    --accent-soft: #3a1f18;
    --accent-ink: #14161a;
    --link: #eceef1;
    --link-line: #ff6a48;
    --focus: #ff6a48;
    --c-competition: #ff6a48;
    --c-prep_practice: #e6a93a;
    --c-training: #7aa7ff;
    --c-school: #4cc985;
    --c-special: #c58af9;
    --c-other: #9aa0aa;
    --ink-mix: #fff;
    --top-bg: #08090a;
    --top-text: #ffffff;
    --top-muted: #a3a8b0;
    --top-hover: #1f2126;
    --warn-bg: #3a2a10;
    --warn: #ffd59a;
    --review-bg: #23264a;
    --review: #c3c8ff;
    --cancel: #ff8a80;
    --cancel-bg: #3b1a17;
    --preview-bg: #332d0e;
    --shadow: 0 0 0 1px rgb(255 255 255 / 0.03);
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.55);
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0 0 var(--s-2);
}

h1 {
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.125rem;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0 0 var(--s-3);
}

/* Только поля по бокам: отступы сверху и снизу у main, шапки и подвала — свои (padding: 0 16px
   обнулял отступ main, и заголовок страницы стоял вплотную к меню). */
.wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding-inline: var(--s-4);
}

/* Месяц сеткой: шире, чтобы в клетке помещалось название. */
.wrap-wide {
  max-width: 90rem;
}

.skip {
  position: absolute;
  left: -999px;
}

.skip:focus {
  left: var(--s-4);
  top: var(--s-2);
  z-index: 10;
  background: var(--surface);
  padding: var(--s-2) var(--s-3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.muted {
  color: var(--muted);
}

@media (min-width: 34rem) {
  h1 {
    font-size: 1.75rem;
  }
}

/* --- шапка и подвал --- */

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* Шапка сайта — графитовая полоса (у админки шапка светлая, её разметка другая). */
body:not(.admin) > .top {
  --text: var(--top-text);
  --surface-2: var(--top-hover);
  background: var(--top-bg);
  border-bottom: 0;
  color: var(--top-text);
}

.top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  min-height: 56px;
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}

.brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

/* Клетчатый флаг — знак сайта. */
.brand::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 4px;
  background:
    conic-gradient(var(--text) 25%, transparent 0 50%, var(--text) 0 75%, transparent 0) 0 0 / 50% 50%;
  border: 2px solid var(--text);
}

.brand {
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.nav a {
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 999px;
}

.nav a:hover {
  background: var(--surface-2);
}

.nav a[aria-current="page"] {
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
}

/* В графитовой шапке: разделы приглушены, открытый — белый с оранжевой чертой снизу. */
body:not(.admin) > .top .nav a {
  position: relative;
  color: var(--top-muted);
}

body:not(.admin) > .top .nav a:hover {
  color: var(--top-text);
}

body:not(.admin) > .top .nav a[aria-current="page"] {
  background: transparent;
  color: var(--top-text);
}

body:not(.admin) > .top .nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

@media (min-width: 34rem) {
  .nav a {
    padding: 6px 14px;
  }

  body:not(.admin) > .top .nav a[aria-current="page"]::after {
    left: 14px;
    right: 14px;
  }
}

/* Телефон: шесть разделов в строку не помещаются — меню своей строкой под названием сайта,
   прокручивается вбок и у края растворяется, как типы в фильтрах. Открытый раздел site.js
   сдвигает в видимую часть. Поля по 2 px — чтобы не срезало рамку фокуса; справа 16 px — чтобы
   последний раздел можно было вывести из-под затухания. */
@media (max-width: 33.99rem) {
  .nav {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    margin: -2px;
    padding: 2px 16px 2px 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a {
    flex: none;
  }
}

/* Самые узкие телефоны (до 360 px): меню — в одну строку, у подписки и у «Назад»/«Вперёд» —
   только значки (название ссылки то же). */
@media (max-width: 22.49rem) {
  .nav a {
    padding: 6px 5px;
    font-size: var(--fs-sm);
  }

  .subscribe-word,
  .pager-word {
    display: none;
  }

  .button.subscribe-button {
    padding: 0 var(--s-3);
  }
}

.preview-bar {
  background: var(--preview-bg);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  padding: var(--s-2) 0;
}

main {
  padding-top: var(--s-4);
  padding-bottom: 3rem;
  min-height: 60vh;
}

@media (min-width: 40rem) {
  main {
    padding-top: var(--s-5);
  }
}

.foot {
  margin-top: var(--s-5);
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--s-5) 0 var(--s-6);
}

.foot a {
  color: var(--muted);
}

/* --- заголовок страницы, панель инструментов --- */

.page-head {
  margin-bottom: var(--s-4);
}

.lead {
  color: var(--muted);
  font-size: 1.05rem;
}

/* Заголовок календаря: месяц или неделя, переходы, вид, подписка — одной строкой. */
.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
}

.cal-head h1 {
  margin: 0;
  margin-right: auto;
}

.cal-head .lead {
  flex-basis: 100%;
  margin: calc(-1 * var(--s-2)) 0 0;
  order: 1;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  width: 100%;
}

.toolbar > .pager-buttons {
  grid-column: 1 / -1;
}

.pager-buttons {
  display: flex;
  gap: var(--s-1);
}

.pager-buttons .button {
  flex: 1 1 0;
}

/* Месяц на телефоне: стрелки и «Сегодня» — рядом с названием месяца, вид и подписка — строкой
   ниже, чтобы сетка начиналась выше. Не помещается — название месяца переносится. */
.cal-head-month {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-3);
}

.cal-head-month h1 {
  font-size: 1.25rem;
}

.cal-head-month .toolbar {
  display: contents;
}

.cal-head-month .pager-buttons {
  grid-area: 1 / 2;
}

.cal-head-month .pager-buttons .button {
  flex: none;
  padding: 0 var(--s-3);
}

.cal-head-month .pager-word {
  display: none;
}

/* Вид и подписка — своей строкой: не делят колонку со стрелками и переносятся, если тесно. */
.toolbar-views {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.cal-head-month .toolbar-views {
  grid-area: 2 / 1 / auto / -1;
}

.subscribe-extra {
  display: none;
}

/* Лента и неделя на телефоне: «Подписаться» — значком (название у ссылки полное) в строке
   заголовка ленты и в строке «Назад · Сегодня · Вперёд» недели; освободившуюся строку занимает
   поиск. */
@media (max-width: 39.99rem) {
  .cal-head-feed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--s-2);
  }

  .cal-head-feed .lead {
    grid-column: 1 / -1;
    margin: 0;
  }

  .cal-head-feed .toolbar {
    grid-area: 1 / 2;
    display: block;
    width: auto;
  }

  .cal-head-week .toolbar > .pager-buttons {
    grid-column: auto;
  }

  .cal-head-feed .subscribe-word,
  .cal-head-week .subscribe-word {
    display: none;
  }

  .cal-head-feed .button.subscribe-button,
  .cal-head-week .button.subscribe-button {
    padding: 0 var(--s-3);
  }
}

/* Самые узкие (до 360 px): заголовок ленты со значком подписки — в одну строку. */
@media (max-width: 22.49rem) {
  .cal-head-feed h1 {
    font-size: 1.375rem;
  }
}

@media (min-width: 40rem) {
  .toolbar,
  .cal-head-month .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    gap: var(--s-2) var(--s-3);
  }

  .cal-head-month {
    display: flex;
  }

  .cal-head-month h1 {
    font-size: 1.5rem;
  }

  .cal-head-month .pager-word,
  .subscribe-extra {
    display: inline;
  }

  .toolbar-views {
    display: contents;
  }

  .pager-buttons .button,
  .cal-head-month .pager-buttons .button {
    flex: 0 0 auto;
    padding: 0 var(--s-4);
  }
}

/* «Месяц | Список»: одна из двух ссылок — текущий вид. */
.segmented {
  display: inline-flex;
  justify-self: start;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: var(--surface-2);
}

.segmented a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--s-4);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 500;
}

.segmented a:hover {
  color: var(--text);
}

.segmented a[aria-current="page"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgb(20 22 26 / 0.12);
}

/* Внизу ленты: «Раньше» и «Следующие две недели» — кнопками. */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
}

.pager a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control);
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-md);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.pager a:hover {
  background: var(--surface-2);
}

.empty,
.notice {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s-4);
  color: var(--muted);
}

.notice {
  border-style: solid;
  border-color: transparent;
  background: var(--warn-bg);
  color: var(--warn);
}

.section-title {
  margin-top: var(--s-6);
}

/* --- кнопки и пометки --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  padding: 0 var(--s-4);
  border-radius: 999px;
  border: 1px solid var(--accent-strong);
  background: var(--accent-strong);
  color: var(--accent-ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.button-quiet {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.button-quiet:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

/* «Подписаться» — единственная тёмная кнопка в строке календаря. */
.button.subscribe-button {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.button.subscribe-button:hover {
  background: var(--muted);
  border-color: var(--muted);
}

.button svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-5) 0;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}

.badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  padding: 0 var(--s-2);
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn);
}

.badge-cancelled {
  background: var(--cancel-bg);
  color: var(--cancel);
}

.badge-review {
  background: var(--review-bg);
  color: var(--review);
}

.alert {
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  background: var(--warn-bg);
  color: var(--warn);
}

.alert-cancelled {
  background: var(--cancel-bg);
  color: var(--cancel);
  font-weight: 600;
}

.alert-review {
  background: var(--review-bg);
  color: var(--review);
}

.alert-past {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
}

.count {
  display: inline-block;
  min-width: 1.35rem;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}

/* --- фильтры --- */

/* Поиск и строка фильтров над календарём, без рамки: календарю — вся высота экрана. Помещаются
   рядом (месяц на широком экране) — одной строкой, иначе поиск — строкой выше. */
.filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}

.filter-search {
  position: relative;
  display: flex;
  flex: 1 1 14rem;
  max-width: 26rem;
}

/* 16 px: на iPhone поле мельче увеличивает страницу при вводе. Справа — место под кнопку «Найти». */
.filter-search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  font: inherit;
  font-size: 1rem;
  padding: 0 38px 0 var(--s-3);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.filter-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.filter-search input:hover {
  border-color: var(--text);
}

.search-button {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.search-button:hover {
  color: var(--text);
  background: var(--surface-2);
}

.search-button svg {
  width: 16px;
  height: 16px;
}

.filter-bar {
  position: relative; /* от строки отмеряется панель «Ещё фильтры» */
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  gap: var(--s-2);
}

.filter-bar .type-chips {
  flex: 0 1 auto;
  min-width: 0;
}

/* Узкий экран: типы — одной строкой с прокруткой вбок, кнопки справа остаются на месте; у края
   типы растворяются — видно, что строку можно сдвинуть. Поля по 2 px — чтобы не срезало рамку
   фокуса. */
.chip-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -2px;
  padding: 2px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
}

.chip-row::-webkit-scrollbar {
  display: none;
}

/* У правого края строки. На телефоне — значок ✕ с числом, на экране шире — «Сбросить» с числом. */
.filter-reset {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.filter-reset svg {
  width: 1em;
  height: 1em;
}

.reset-word {
  display: none;
}

.more-filters {
  flex: none;
  min-width: 0;
}

.more-filters > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.more-filters > summary::-webkit-details-marker {
  display: none;
}

.more-filters > summary:hover,
.more-filters[open] > summary {
  border-color: var(--text);
}

/* Галочка вниз; у раскрытой — вверх. */
.more-filters > summary::after {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  margin-left: 2px;
}

.more-filters[open] > summary::after {
  transform: translateY(25%) rotate(-135deg);
}

/* Выбранное в «Ещё фильтрах» — рядом с кнопкой: видно, какие условия действуют. Занимает только
   свободное место строки (с многоточием или совсем пропадает): типы из-за него не переносятся. */
.more-chosen {
  flex: 1 1 0;
  min-width: 0;
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
}

/* Телефон: кнопка — «Ещё» с числом; полное название и выбранное слышит читалка. */
@media (max-width: 33.99rem) {
  .more-long,
  .more-chosen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

@media (min-width: 34rem) {
  .filter-reset svg {
    display: none;
  }

  .reset-word {
    display: inline;
  }
}

/* Панель «Ещё фильтры» — поверх календаря, во всю ширину строки фильтров: сетка не сдвигается.
   Закрывается кнопкой, а с JavaScript — ещё Esc и щелчком мимо (site.js). */
.more-body {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 75vh;
  overflow-y: auto;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

/* Телефон: клуб и трасса — в две колонки, серия (названия длиннее) — во всю ширину. */
.filter-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-2);
}

.filter-selects label:last-child {
  grid-column: 1 / -1;
}

.filter-selects label {
  display: grid;
  gap: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--muted);
}

select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0 var(--s-2);
  min-height: var(--control);
  width: 100%;
  min-width: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--s-1);
  padding: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chips legend {
  width: 100%;
}

.chip {
  position: relative;
  flex: none;
}

.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.chip:hover span {
  border-color: var(--text);
}

.chip input:checked + span {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Точка цвета типа: та же, что у событий в сетке, — фильтр заодно служит легендой. */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--type, var(--c-other));
  flex: none;
}

.chip input:checked + span .dot {
  box-shadow: 0 0 0 1.5px var(--surface);
}

.filter-row {
  display: grid;
  gap: var(--s-3);
}

/* «Показать» — только без JavaScript: в строке фильтров, чтобы панель её не закрывала. */
.filter-actions {
  flex: none;
  margin: 0;
}

.filter-actions .button {
  min-height: 32px;
  font-size: var(--fs-sm);
  padding: 0 var(--s-3);
}

.filter-form.js .filter-actions {
  display: none;
}

@media (min-width: 34rem) {
  .filter-selects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
  }

  .filter-selects label:last-child {
    grid-column: auto;
  }

  .filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56rem) {
  .chip-row {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Широкий экран: клуб, трасса, серия, «Где» и «Для кого» — одной строкой. */
@media (min-width: 64rem) {
  .more-body {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
    align-items: start;
    gap: var(--s-3);
  }

  .filter-selects,
  .filter-row {
    display: contents;
  }

  /* Кнопки «Где» и «Для кого» ниже списков: ставим их по середине высоты списка. */
  .more-body .chip {
    margin-block: calc((var(--control) - 32px) / 2);
  }
}

/* --- карточки событий --- */

.day {
  margin-bottom: var(--s-4);
}

/* Заголовок дня — крупно и без линии: карточки под ним сами отделены от фона. */
.day > h2,
.day-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
}

.day.is-today > h2 {
  color: var(--accent-strong);
}

/* Карточка — строка списка: события подряд (обычно один день) идут сплошной панелью с линией
   между ними, скругление — у первой и последней. Слева время, справа название (не больше двух
   строк) и строка meta. Нажимается вся карточка: ссылка названия растянута на неё (::after),
   ссылки в строке meta лежат поверх. */
.card {
  --type: var(--c-other);
  position: relative;
  display: grid;
  align-items: baseline;
  gap: 0 var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px var(--s-3) 8px calc(var(--s-3) + 8px);
  box-shadow: var(--shadow);
}

/* Цвет типа — скруглённая полоска у левого края карточки; у неподтверждённого — пунктиром. */
.card::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: var(--type);
}

.card + .card {
  border-top: 0;
}

.card:not(.card + .card) {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.card:not(:has(+ .card)) {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  margin-bottom: var(--s-2);
}

@media (hover: hover) {
  .card:hover {
    background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  }
}

.card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* clip-path строки meta делает её отдельным слоем поверх растянутой ссылки: нажатие на текст
   строки пропускаем сквозь неё, ловят только ссылки и подсказка метки. */
.card .card-meta {
  pointer-events: none;
}

.card .card-meta a,
.card .badge[title] {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* Телефон: время — в строке названия, строка meta под ними во всю ширину. */
@media (max-width: 33.99rem) {
  .card {
    grid-template-columns: fit-content(6.5rem) minmax(0, 1fr);
  }

  .card-body {
    display: contents;
  }

  /* Длинный срок («26–30 октября») в колонке ломался и сдвигал название вправо — он строкой
     над названием. */
  .card.has-long-time {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Обычное «19:30» — одной ширины во всех карточках, названия встают в одну линию. */
  .card-time {
    min-width: 2.75rem;
  }

  .card .card-meta {
    grid-column: 1 / -1;
  }
}

.type-competition { --type: var(--c-competition); }
.type-prep_practice { --type: var(--c-prep_practice); }
.type-training { --type: var(--c-training); }
.type-school { --type: var(--c-school); }
.type-special { --type: var(--c-special); }
.type-other { --type: var(--c-other); }

.card.is-unconfirmed::before {
  background: repeating-linear-gradient(to bottom, var(--type) 0 5px, transparent 5px 8px);
}

.card-time {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.card-title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Не больше двух строк с многоточием. Обрезает сама ссылка, а не заголовок: overflow заголовка
   срезал бы рамку фокуса ссылки. */
.card-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
}

.card-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--link-line);
}

.card-meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
}

.card-meta a {
  color: var(--muted);
  text-decoration-color: var(--line-strong);
}

.card-meta a:hover {
  text-decoration-color: var(--link-line);
}

/* Строка meta карточки: части через «·», перенос — только целой частью. Разделитель — ::before
   шириной --sep перед каждой частью; строка сдвинута влево на --sep и срезана clip-path, так что
   у первой части каждой строки он не виден. Срез на 4 px левее края: точка стоит в середине
   ячейки, а рамке фокуса ссылки (outline-offset 2px) место нужно. Место и цена — цветом
   текста, они важнее типа. */
.card .card-meta {
  --sep: 1em;
  align-items: baseline;
  gap: 0;
  margin: 0 0 0 calc(-1 * var(--sep));
  clip-path: inset(-4px -4px -4px calc(var(--sep) - 4px));
  line-height: 1.35;
}

.card .card-meta > * {
  white-space: nowrap;
}

.card .card-meta > :not(.badge)::before {
  content: "·";
  display: inline-block;
  width: var(--sep);
  text-align: center;
  color: var(--muted);
}

.card .card-meta > .badge + :not(.badge)::before {
  content: "";
}

.card .card-meta > .badge {
  margin-left: var(--sep);
}

.card .card-place {
  white-space: normal;
  min-width: 0;
}

.card .card-place,
.card .card-price,
.card .card-meta a {
  color: var(--text);
}

.card .card-price {
  font-variant-numeric: tabular-nums;
}

.card-type .dot {
  margin-right: 5px;
}

/* Тип подписан словом; цветная точка лишь повторяет его. */
.type-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 600;
}

/* Точка — только там, где известен тип события (в админке подпись бывает и не типом). */
.event .type-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--type, var(--c-other));
}

.is-cancelled .card-title a,
h1.is-cancelled,
.is-cancelled > a {
  text-decoration: line-through;
}

.repeats {
  margin: var(--s-1) 0 var(--s-2);
}

.repeats > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--s-1) 0;
}

/* Телефон: строка «Регулярные события» — под палец, не ниже 36 px. */
@media (max-width: 33.99rem) {
  .repeats > summary {
    padding: var(--s-2) 0;
  }
}

.repeat-list,
.regular,
.plain,
.entity-list,
.repeat-dates {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Цвет типа — от класса type-* на той же строке. Своё --type здесь не задаём: правило ниже
   .type-* в файле перебило бы его, и все строки были бы серыми. */
.repeat {
  padding: var(--s-1) 0 var(--s-1) 10px;
  border-left: 3px solid var(--type, var(--c-other));
  margin: var(--s-1) 0;
  font-size: var(--fs-md);
}

.repeat a,
.regular a {
  color: var(--text);
  text-decoration: none;
}

.repeat a:hover,
.regular a:hover {
  text-decoration: underline;
  text-decoration-color: var(--link-line);
}

.repeat-time {
  display: inline-block;
  min-width: 3.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Как у .repeat: цвет — от класса type-* на строке, своё --type (.regular li весомее .type-*)
   делало все строки серыми. */
.regular li {
  border-left: 3px solid var(--type, var(--c-other));
  padding: var(--s-1) 0 var(--s-1) 10px;
  margin: 6px 0;
}

@media (min-width: 34rem) {
  .card {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }
}

/* --- неделя --- */

.week-day {
  margin-bottom: var(--s-4);
}

/* Пустой день — одной строкой: «Вторник, 27 октября — событий нет». */
.week-day.is-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.week-day.is-empty > h2 {
  margin: 0;
  padding: 0;
  border: 0;
}

.week-day.is-empty > p {
  margin: 0;
}

.week-day > h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.week-day.is-today > h2 {
  color: var(--accent-strong);
}

.week-day.is-empty > h2 {
  color: var(--muted);
}

/* --- месяц --- */

.month-only {
  margin-bottom: var(--s-4);
}

.month-only > h2 {
  font-size: var(--fs-md);
  color: var(--muted);
  border: 0;
  padding: 0;
  margin-bottom: var(--s-2);
}

/* Месяц — плитки дней с промежутками: каждая клетка — своя белая карточка. */
.month {
  --gap: 4px;
  display: grid;
  gap: var(--gap);
}

.month-head,
.month-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--gap);
}

.month-head div {
  padding: 2px 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.month-head abbr {
  text-decoration: none;
}

/* Узкая сетка (планшет, неделя на телефоне): место под число дня и две строки точек и счётчиков —
   у любой клетки, чтобы высота строки не прыгала, когда точки переносятся. Слагаемые: поля
   клетки, число дня, зазор, две строки по 11 px и зазор между ними 3 px. */
.cell {
  position: relative;
  min-width: 0;
  min-height: calc(2 * var(--s-1) + 1.75rem + 2px + 2 * 0.6875rem + 3px);
  padding: var(--s-1);
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Дни соседних месяцев — без заливки, пунктирной рамкой. */
.cell.is-other {
  background: transparent;
  box-shadow: none;
  outline: 1px dashed var(--line-strong);
  outline-offset: -1px;
}

.cell.is-today {
  box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow);
}

.cell-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

/* На телефоне вся клетка — ссылка на список дня. */
.cell-day::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cell-day:hover {
  background: var(--surface-2);
}

.cell.is-other .cell-day {
  color: var(--muted);
  font-weight: 400;
}

.cell.is-today .cell-day {
  background: var(--accent-strong);
  color: var(--accent-ink);
}

.cell.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
  outline: 0;
}

.cell-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--muted);
}

.cell-dots .dot {
  width: 7px;
  height: 7px;
}

.cell-dots .dot.is-cancelled,
.dot.is-hollow {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--type, var(--muted));
}

.cell-events,
.cell-foot {
  display: none;
}

/* Полная сетка: время и название в клетке. Число дня — маленькое, над событиями. */
@media (min-width: 56rem) {
  .month {
    --gap: 6px;
  }

  .month-head div {
    padding: 0 var(--s-2);
    text-align: left;
  }

  /* Место под число дня и два события (MONTH_CELL_LIMIT) по две строки — у любой клетки, даже
     пустой: строки месяца одной высоты, сколько бы событий ни было в дне и как бы ни переносились
     названия. Это min-height, а не height: с крупным шрифтом клетка растёт, ничего не обрезается.
     Слагаемые: поля клетки 5 + 5 px; число дня 1,5rem и отступ под ним 4 px; два события по две
     строки 13 px × 1,3 с полями 2 + 2 px и зазор между ними 4 px. */
  .cell {
    min-height: calc(10px + 1.5rem + 4px + 2 * (2 * 0.8125rem * 1.3 + 4px) + 4px);
    padding: 5px;
    gap: 0;
    align-items: stretch;
  }

  .cell-day {
    align-self: flex-start;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 4px;
    font-size: 0.8125rem;
  }

  .cell-day::after {
    content: none;
  }

  .cell-dots {
    display: none;
  }

  .cell-events {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* «Ещё N» — в строке числа дня, справа: клетка не растёт на лишнюю строку. */
  .cell-foot {
    display: block;
    position: absolute;
    top: 6px;
    right: 6px;
    margin: 0;
  }
}

/* Цвет типа — от класса type-* на том же элементе, как у .repeat: своё --type перебило бы его. */
.cell-event {
  margin: 0;
}

.cell-event + .cell-event {
  margin-top: 4px;
}

/* Не выше двух строк: время, название и где — подряд; что не влезло, обрезается с конца
   (первым — место). Целиком — в подсказке и в списке дня. Событие — плашка в цвет типа: светлая
   заливка, текст того же оттенка, затемнённый до читаемого (в тёмной теме — осветлённый). */
.cell-event a {
  position: relative; /* скрытая подпись для читалки — внутри ссылки, а не под клеткой */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--type, var(--c-other)) 10%, var(--surface));
  color: color-mix(in srgb, var(--type, var(--c-other)) 45%, var(--ink-mix));
  font-size: 0.8125rem;
  line-height: 1.3;
  text-decoration: none;
}

.cell-event a:hover {
  background: color-mix(in srgb, var(--type, var(--c-other)) 20%, var(--surface));
}

.cell-time {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cell-place {
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* Соревнование заметнее всего: заливка гуще и полужирное название. */
.cell-event.type-competition:not(.is-regular) a {
  background: color-mix(in srgb, var(--type) 17%, var(--surface));
}

.cell-event.type-competition:not(.is-regular) a:hover {
  background: color-mix(in srgb, var(--type) 27%, var(--surface));
}

.cell-event.type-competition:not(.is-regular) .cell-title {
  font-weight: 600;
}

/* Регулярное — без заливки: занятие по расписанию не выглядит подтверждённой гонкой. */
.cell-event.is-regular a,
.cell-event.is-cancelled a {
  background: transparent;
}

.cell-event.is-regular a:hover,
.cell-event.is-cancelled a:hover {
  background: var(--surface-2);
}

.cell-event.is-regular .cell-title {
  color: var(--muted);
}

.cell-regular {
  margin-right: 3px;
  font-weight: 400;
}

.cell-event.is-unconfirmed a {
  outline: 1px dashed var(--type, var(--c-other));
  outline-offset: -1px;
}

/* Пунктир сделан рамкой outline — при фокусе с клавиатуры она уступает обычной рамке фокуса. */
.cell-event.is-unconfirmed a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.cell-event.is-continued .cell-title {
  color: var(--muted);
}

.cell-event.is-cancelled .cell-title {
  color: var(--muted);
  text-decoration: line-through;
}

.cell-status {
  color: var(--warn);
  font-weight: 600;
}

/* «+N» — серый значок в строке числа дня. */
.cell-more {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.cell-more:hover {
  background: var(--text);
  color: var(--surface);
}

/* Условные обозначения под сеткой: только текст, без кнопок. */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.cal-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dashed {
  display: inline-block;
  width: 16px;
  height: 0.9rem;
  border: 1px dashed var(--muted);
  border-radius: 4px;
}

.legend-race {
  display: inline-block;
  width: 16px;
  height: 0.9rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--c-competition) 17%, var(--surface));
}

.legend-only-full {
  display: none !important;
}

@media (min-width: 56rem) {
  .legend-only-full {
    display: inline-flex !important;
  }

  .legend-only-compact {
    display: none !important;
  }
}

/* Список выбранного дня под сеткой. */
.day-panel {
  margin-top: var(--s-5);
  scroll-margin-top: var(--s-4);
}

.day-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: var(--s-2);
}

.day-panel-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.day-panel-links {
  display: flex;
  gap: var(--s-4);
  font-size: var(--fs-sm);
}

.list-days .day {
  scroll-margin-top: var(--s-4);
}

/* Переход по неделям — только на телефоне, над неделей открытого дня. */
.week-bar {
  display: none;
}

.week-bar-title {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: var(--fs-md);
}

/* Телефон (до 600 px): семь колонок месяца не сжимаем — от сетки остаётся неделя открытого
   дня, под ней сразу список дня, условные обозначения — в конце. Переход к дню прокручивает
   страницу так, что неделя остаётся видна над списком. */
@media (max-width: 37.49rem) {
  .month-view {
    display: flex;
    flex-direction: column;
  }

  .month-view > .cal-legend {
    order: 1;
    margin-top: var(--s-4);
  }

  .week-bar {
    display: grid;
    grid-template-columns: var(--control) minmax(0, 1fr) var(--control);
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
  }

  .week-bar .button {
    padding: 0;
  }

  .month-week:not(.is-chosen-week) {
    display: none;
  }

  .day-panel {
    margin-top: var(--s-3);
    scroll-margin-top: 9.5rem;
  }
}

/* --- страница события --- */

.event-kicker {
  color: var(--muted);
  margin-bottom: var(--s-1);
}

.event-kicker a {
  color: var(--muted);
}

.facts {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow);
}

/* Строки фактов разделены тонкой линией. */
.facts > div + div {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.facts > div {
  display: grid;
  gap: 2px;
}

.facts dt {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.facts dd {
  margin: 0;
}

.repeat-dates {
  margin-top: 6px;
  color: var(--muted);
}

/* Подсказка приехать заранее: время соревнования — старт квалификации или гонки. */
.arrival {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.program {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 34rem) {
  .facts > div {
    grid-template-columns: 8rem 1fr;
    gap: var(--s-4);
  }
}

.sources {
  margin-top: var(--s-6);
}

.sources ul {
  padding-left: 1.2rem;
}

/* --- каталог --- */

/* Строка каталога — карточка без колонки времени, на любой ширине одна колонка. Свой класс к .card
   весомее правил колонок .card выше. */
.card.card-name {
  grid-template-columns: minmax(0, 1fr);
}

.catalog-section > h2 .muted {
  font-weight: 400;
}

/* --- клубы --- */

/* Клубы: на телефоне — в столбик, шире — в две колонки. Нажимается вся карточка: ссылка названия
   растянута на неё (a::after), трассы, серии и ближайшее событие — ссылки поверх. */
.entity-list {
  display: grid;
  gap: var(--s-2);
}

@media (min-width: 48rem) {
  .entity-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
}

.entity {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s, transform 0.15s;
}

.entity h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.entity h2 a {
  color: var(--text);
  text-decoration: none;
}

.entity h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.entity p a {
  position: relative;
  z-index: 1;
}

.entity-arrow {
  flex: none;
  color: var(--muted);
}

@media (hover: hover) {
  .entity:hover {
    border-color: var(--line-strong);
    box-shadow: 0 6px 18px rgb(20 22 26 / 0.08);
    transform: translateY(-1px);
  }

  .entity:hover h2 a {
    text-decoration: underline;
    text-decoration-color: var(--link-line);
  }

  .entity:hover .entity-arrow {
    color: var(--accent-strong);
  }
}

.entity p {
  margin: var(--s-1) 0 0;
}

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

  .entity:hover {
    transform: none;
  }
}

/* --- подписка --- */

.steps h2 {
  margin-top: var(--s-5);
}

.copy {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  min-height: var(--control);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

/* --- сообщение об ошибке, «О проекте» --- */

.report {
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
}

.report summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  margin-bottom: var(--s-3);
}

.report-form label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s-1);
}

.report-form textarea {
  width: 100%;
  font: inherit;
  padding: var(--s-2) 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice-ok {
  background: var(--review-bg);
  color: var(--review);
}

.prose {
  max-width: 44rem;
}

.prose h2 {
  margin-top: var(--s-5);
}

/* --- афиша события (выбирает модератор) --- */

.poster {
  margin: var(--s-4) 0;
}

.poster img {
  display: block;
  max-width: 100%;
  max-height: 36rem;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.event-description {
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-width: 44rem;
  margin: var(--s-4) 0;
}

/* Карточка события: «Подробности» из анонса клуба и регламента серии. */
.event-card {
  margin: var(--s-5) 0;
}

.event-card h2 {
  font-size: 1.15rem;
  margin: 0 0 var(--s-1);
}

.event-card .facts dd {
  overflow-wrap: anywhere;
}

.regulation-card {
  margin-top: var(--s-3);
}

.regulation-card summary {
  cursor: pointer;
  color: var(--muted);
}