/* =====================================================================
   ichamps — RACING SKIN (Phase 1: каркас)
   Слой поверх notion.css. Делает тёмную тему полноценной racing-темой:
   перекрашивает токены --n-* и стилизует общий каркас (сайдбар, шапки).
   Светлая тема (data-theme="light") остаётся прежней notion-светлой.
   Контентные страницы мигрируются отдельными фазами.
   ===================================================================== */

/* --- Бренд-акцент: оранж в обеих темах --- */
:root{
  color-scheme: light;            /* по умолчанию светлая системная схема */
  --n-accent:       #FF5A1F;
  --n-accent-hover: #E14A12;
  --n-accent-soft:  rgba(255,90,31,.12);
  --n-ring:         0 0 0 3px rgba(255,90,31,.20);
  /* статусные цвета дизайн-системы (значения из мокапов) */
  --prize: #CA8A04;               /* золото/призы в светлой теме */
  --live:  #DC2626;               /* live-статус в светлой теме */
  /* racing-поверхности (для будущих фаз) */
  --r-surface:   #141923;
  --r-surface-2: #1B2230;
  --r-surface-3: #232C3D;
}

/* ===================== ТЁМНАЯ RACING-ТЕМА ===================== */
/* Специфичность :root[data-theme="dark"] (0,2,0) — чтобы перебить notion.css,
   который определяет тёмные --n-* тоже через :root[data-theme="dark"]. Без :root
   (0,1,0) notion выигрывал и --n-accent оставался синим. */
:root[data-theme="dark"]{
  color-scheme: dark;             /* браузер не применяет авто-затемнение поверх */
  --n-text:          #EAEEF5;
  --n-text-muted:    #9AA6B8;
  --n-text-light:    #6B7689;
  --n-bg:            #0B0E14;
  --n-bg-subtle:     #141923;
  --n-bg-hover:      #1B2230;
  --n-bg-active:     #232C3D;
  --n-border:        #28303F;
  --n-border-strong: #3A4456;
  --n-accent:        #FF5A1F;
  --n-accent-hover:  #E14A12;
  --n-accent-soft:   rgba(255,90,31,.16);
  --n-danger:        #EF4444;
  --n-danger-hover:  #DC2626;
  --n-success:       #22C55E;
  --n-warning:       #F59E0B;
  --n-shadow:        0 8px 30px -12px rgba(0,0,0,.6);
  --n-shadow-lg:     0 16px 40px -16px rgba(0,0,0,.7);
  --n-ring:          0 0 0 3px rgba(255,90,31,.30);
  --prize: #FACC15;
  --live:  #EF4444;
  --r-surface:   #141923;
  --r-surface-2: #1B2230;
  --r-surface-3: #232C3D;
}

[data-theme="dark"] body{ background: var(--n-bg); color: var(--n-text); }
[data-theme="dark"] .bg-appbg{ background-color: var(--n-bg) !important; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6{ color: var(--n-text); }

/* ---------- Каркас: сайдбар (.r-side) ---------- */
[data-theme="dark"] .r-side{
  background: var(--r-surface) !important;
  border-color: var(--n-border) !important;
}
/* пункты навигации */
[data-theme="dark"] .r-side nav a{ color: var(--n-text-muted) !important; }
[data-theme="dark"] .r-side nav a:hover{ background: var(--r-surface-2) !important; color: var(--n-text) !important; }
/* активный пункт (в разметке: bg-slate-800 text-white) */
[data-theme="dark"] .r-side nav a.bg-slate-800{
  background: var(--n-accent-soft) !important;
  color: var(--n-accent) !important;
  box-shadow: none !important;
}
/* нижний блок действий */
[data-theme="dark"] .r-side .space-y-2 a.bg-slate-800{ background: var(--n-accent) !important; color:#fff !important; }
[data-theme="dark"] .r-side .space-y-2 a.bg-slate-800:hover{ background: var(--n-accent-hover) !important; }
[data-theme="dark"] .r-side .space-y-2 a.border{ background: var(--r-surface-2) !important; border-color: var(--n-border) !important; color: var(--n-text) !important; }
[data-theme="dark"] .r-side .space-y-2 a.border:hover{ border-color: var(--n-border-strong) !important; }
/* logout (красная кнопка) */
[data-theme="dark"] .r-side a.border-red-200{ background: transparent !important; border-color: rgba(239,68,68,.35) !important; color:#f87171 !important; }
[data-theme="dark"] .r-side a.border-red-200:hover{ background: rgba(239,68,68,.10) !important; }
/* разделители и подпись пользователя */
[data-theme="dark"] .r-side .border-t{ border-color: var(--n-border) !important; }
[data-theme="dark"] .r-side .text-slate-500{ color: var(--n-text-light) !important; }
/* переключатель языка (активный bg-slate-100) */
[data-theme="dark"] .r-side a.bg-slate-100,
[data-theme="dark"] .r-topbar a.bg-slate-100{ background: var(--r-surface-2) !important; color: var(--n-text) !important; }
[data-theme="dark"] .r-side .text-slate-500,
[data-theme="dark"] .r-topbar .text-slate-500{ color: var(--n-text-muted) !important; }

/* ---------- Каркас: верхние шапки (.r-topbar) ---------- */
[data-theme="dark"] .r-topbar{
  background: var(--r-surface) !important;
  border-color: var(--n-border) !important;
}
[data-theme="dark"] .r-topbar .border,
[data-theme="dark"] .r-topbar a.border,
[data-theme="dark"] .r-topbar button.border{ border-color: var(--n-border) !important; color: var(--n-text) !important; }
[data-theme="dark"] .r-topbar .text-slate-700{ color: var(--n-text) !important; }

/* ---------- Мобильный бэкдроп ---------- */
[data-theme="dark"] #mobileNavOverlay .bg-slate-900\/40{ background: rgba(0,0,0,.6) !important; }

/* =====================================================================
   ВИТРИНА /find — Phase 2
   ===================================================================== */
/* Перекрас светлых Tailwind-утилит страницы в токены (скоуп .r-discovery) */
[data-theme="dark"] .r-discovery .text-slate-900,
[data-theme="dark"] .r-discovery .text-slate-800,
[data-theme="dark"] .r-discovery .text-slate-700{ color: var(--n-text) !important; }
[data-theme="dark"] .r-discovery .text-slate-600,
[data-theme="dark"] .r-discovery .text-slate-500{ color: var(--n-text-muted) !important; }
[data-theme="dark"] .r-discovery .text-slate-400,
[data-theme="dark"] .r-discovery .text-slate-300{ color: var(--n-text-light) !important; }
[data-theme="dark"] .r-discovery .bg-white{ background: var(--r-surface) !important; }
[data-theme="dark"] .r-discovery .border-slate-200,
[data-theme="dark"] .r-discovery .border-slate-100{ border-color: var(--n-border) !important; }
[data-theme="dark"] .r-discovery .bg-slate-800{ background: var(--n-accent) !important; color:#fff !important; }
[data-theme="dark"] .r-discovery .bg-slate-800:hover,
[data-theme="dark"] .r-discovery .hover\:bg-slate-700:hover{ background: var(--n-accent-hover) !important; }
[data-theme="dark"] .r-discovery input[type="text"],
[data-theme="dark"] .r-discovery select{ background: var(--r-surface-2) !important; color: var(--n-text) !important; border-color: var(--n-border) !important; }
[data-theme="dark"] .r-discovery .hover\:bg-slate-50:hover,
[data-theme="dark"] .r-discovery .hover\:bg-slate-100:hover{ background: var(--r-surface-2) !important; }
[data-theme="dark"] .r-discovery .border-dashed{ border-color: var(--n-border-strong) !important; }

/* Карточка ивента (анатомия из макета discovery.html) */
.r-ev-card{ display:block; border:1px solid var(--n-border); background:var(--r-surface); border-radius:16px; overflow:hidden; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.r-ev-card:hover{ border-color:var(--n-border-strong); transform:translateY(-3px); box-shadow:var(--n-shadow); }
.r-ev-head{ position:relative; height:8rem; padding:.7rem .8rem; display:flex; flex-direction:column; overflow:hidden; color:#fff; }
.r-ev-head::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><path d='M20 120 C 80 20,140 40,180 90 S 300 150,380 40' fill='none' stroke='white' stroke-width='6' stroke-linecap='round' opacity='0.10'/></svg>") no-repeat right center; background-size:auto 130%; }
.r-ev-badges{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:.4rem; }
.r-badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.12rem .42rem; border-radius:6px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:#fff; white-space:nowrap; }
.r-ev-title{ position:relative; z-index:1; margin-top:auto; font-family:'Rubik','Inter',sans-serif; font-weight:700; font-size:1.02rem; line-height:1.15; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.r-ev-body{ padding:.85rem; }
.r-ev-foot{ margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--n-border); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.r-ev-btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:8px; background:var(--n-accent); color:#fff; font-size:.75rem; font-weight:600; white-space:nowrap; transition:background .15s ease; }
.r-ev-card:hover .r-ev-btn{ background:var(--n-accent-hover); }
.r-count{ display:inline-block; padding:.05rem .35rem; border-radius:5px; font-size:11px; font-weight:600; background:var(--n-accent-soft); color:var(--n-accent); }

/* ===================== Общие компоненты макета (canonical) ===================== */
.font-display{ font-family:'Rubik','Inter',sans-serif; }

/* ===== ЕДИНЫЙ СТАНДАРТ КНОПОК ===== primary=.btn-accent, secondary=.btn-ghost, danger=.btn-danger.
   Класс несёт базу (inline-flex/паддинги/радиус/вес/переход); если в разметке есть
   tailwind-утилиты px/py — они перекрывают паддинг класса, форма не ломается. */
.btn-accent,.btn-ghost,.btn-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem .9rem; border-radius:10px; font-weight:600; font-size:.875rem; line-height:1.2;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-accent{ background:var(--n-accent); color:#fff; }
.btn-accent:hover{ background:var(--n-accent-hover); color:#fff; }
.btn-ghost{ background:var(--n-bg-hover); border-color:var(--n-border); color:var(--n-text); }
.btn-ghost:hover{ border-color:var(--n-border-strong); color:var(--n-text); }
.btn-danger{ background:var(--n-danger); color:#fff; }
.btn-danger:hover{ background:var(--n-danger-hover); color:#fff; }
.btn-accent:disabled,.btn-ghost:disabled,.btn-danger:disabled,
.btn-accent.is-disabled,.btn-ghost.is-disabled{ opacity:.5; cursor:not-allowed; }
/* Кнопка «уже в составе»: спокойно-зелёная, под курсором превращается в отмену.
   Оба текста лежат в разметке, меняется только видимость — ширина не скачет. */
.reg-joined{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; font-weight:600; font-size:.875rem; line-height:1.2;
  border:1px solid transparent; cursor:pointer;
  background:var(--n-success); color:#fff;
  transition:background .15s ease;
}
.reg-joined:hover{ background:var(--n-danger); }
.reg-joined .reg-joined-off{ display:none; }
.reg-joined:hover .reg-joined-on{ display:none; }
.reg-joined:hover .reg-joined-off{ display:inline-flex; }
/* Тач: наведения нет, показываем только факт участия — отмена внутри окна */
@media (hover:none){
  .reg-joined:hover{ background:var(--n-success); }
  .reg-joined:hover .reg-joined-on{ display:inline-flex; }
  .reg-joined:hover .reg-joined-off{ display:none; }
}

/* legacy -> единый стандарт: bootstrap/notion primary становятся оранжевыми */
.btn-primary,.n-btn-primary{ background:var(--n-accent)!important; border-color:var(--n-accent)!important; color:#fff!important; }
.btn-primary:hover,.n-btn-primary:hover{ background:var(--n-accent-hover)!important; border-color:var(--n-accent-hover)!important; color:#fff!important; }
/* активная вкладка/таб, переключаемая из JS (только цвет, без сдвига формы) */
.r-tab-on{ background:var(--n-accent)!important; color:#fff!important; }

.chip{ display:inline-flex; align-items:center; gap:.4rem; background:var(--r-surface-2); border:1px solid var(--n-border); color:var(--n-text-muted); border-radius:99px; cursor:pointer; text-decoration:none; transition:transform .12s ease, background-color .15s, border-color .15s, color .15s; }
.chip:hover{ color:var(--n-text); border-color:var(--n-border-strong); }
.chip.on{ background:var(--n-accent-soft); border-color:var(--n-accent); color:var(--n-accent); }
.chip:active{ transform:scale(.95); }

.r-search{ background:var(--r-surface-2); border:1px solid var(--n-border); color:var(--n-text); }
.r-search::placeholder{ color:var(--n-text-light); }
.r-search:focus{ outline:none; border-color:var(--n-accent); box-shadow:0 0 0 3px var(--n-accent-soft); }

.r-select{ background:var(--r-surface-2); border:1px solid var(--n-border); color:var(--n-text); border-radius:8px; }
.r-select:focus{ outline:none; border-color:var(--n-accent); }

/* Сайдбар по макету discovery.html (вид мокапа, пункты — реальные) */
.r-sidehead{ display:flex; align-items:center; gap:.6rem; }
.r-logo-sq{ display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.75rem; background:var(--n-accent); color:#fff; font-family:'Rubik',sans-serif; font-weight:700; font-size:1.05rem; }
.r-side-label{ padding:0 .75rem; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--n-text-light); margin-bottom:.25rem; }
.nav-item{ display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem; border-radius:10px; color:var(--n-text-muted); font-size:.875rem; font-weight:500; text-decoration:none; transition:background-color .15s ease, color .15s ease; }
.nav-item:hover{ background:var(--r-surface-2); color:var(--n-text); }
.nav-item.active{ background:var(--n-accent-soft); color:var(--n-accent); }
.nav-item.active svg, .nav-item.active i{ color:var(--n-accent); }
.nav-item .ico{ width:1rem; height:1rem; display:inline-flex; align-items:center; justify-content:center; flex:none; }

/* =====================================================================
   ДЕТАЛЬНАЯ СТРАНИЦА СОРЕВНОВАНИЯ — порт макета event.html 1-в-1.
   Скоуп .r-detail. Компоненты-канон макета (panel/tab/track-head/surface*).
   Значения берём из токенов проекта — в тёмной теме они попиксельно равны
   токенам макета (#141923/#1B2230/#232C3D/#28303F/#FF5A1F/#EAEEF5 ...).
   ===================================================================== */

/* поверхности и текст-хелперы */
.r-detail .panel{ background:var(--n-bg); border:1px solid var(--n-border); border-radius:16px; }
.r-detail .surface{ background:var(--n-bg); }
.r-detail .surface-2{ background:var(--n-bg-subtle); }
.r-detail .surface-3{ background:var(--n-bg-active); }
.r-detail .bd{ border-color:var(--n-border); }
.r-detail .bd-s{ border-color:var(--n-border-strong); }
.r-detail .muted{ color:var(--n-text-muted); }
.r-detail .dim{ color:var(--n-text-light); }

[data-theme="dark"] .r-detail .panel{ background:var(--r-surface); }
[data-theme="dark"] .r-detail .surface{ background:var(--r-surface); }
[data-theme="dark"] .r-detail .surface-2{ background:var(--r-surface-2); }
[data-theme="dark"] .r-detail .surface-3{ background:var(--r-surface-3); }

/* подчёркнутые табы макета */
.r-detail .tab{ display:inline-flex; align-items:center; gap:.45rem; color:var(--n-text-muted);
  border-bottom:2px solid transparent; padding:.65rem .25rem; font-weight:600; font-size:.875rem;
  text-decoration:none; white-space:nowrap; transition:color .15s ease, border-color .15s ease; }
.r-detail .tab:hover{ color:var(--n-text); }
.r-detail .tab.is-active{ color:var(--n-text); border-color:var(--n-accent); }
.r-detail .tab.is-active i{ color:var(--n-accent); }

/* шапка-баннер: всегда тёмная → текст белый в обеих темах (как в макете) */
.r-detail .track-head{ position:relative; overflow:hidden; color:#fff;
  --n-text:#fff; --n-text-muted:rgba(255,255,255,.72); --n-text-light:rgba(255,255,255,.62);
  --n-border:rgba(255,255,255,.24); --n-border-strong:rgba(255,255,255,.42); }
.r-detail .track-head::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='220'><path d='M30 170 C 120 30, 220 60, 280 130 S 460 200, 560 50' fill='none' stroke='white' stroke-width='8' stroke-linecap='round' opacity='0.09'/></svg>") no-repeat right center;
  background-size:auto 130%; }
/* кнопки-призраки/факты внутри шапки используют полупрозрачные поверхности */
.r-detail .track-head .btn-ghost{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.24); color:#fff; }
.r-detail .track-head .btn-ghost:hover{ border-color:rgba(255,255,255,.42); }
.r-detail .track-head .surface-2{ background:rgba(255,255,255,.14); }

/* быстрые факты: тонкие разделители ячеек */
.r-detail .r-facts > div{ border-color:var(--n-border); }

/* ---- тёмный ремап tailwind-утилит контента вкладок (по образцу .r-discovery) ---- */
[data-theme="dark"] .r-detail .bg-white{ background:var(--r-surface) !important; }
[data-theme="dark"] .r-detail .bg-gray-50,
[data-theme="dark"] .r-detail .bg-slate-50{ background:var(--r-surface-2) !important; }
[data-theme="dark"] .r-detail .bg-gray-100,
[data-theme="dark"] .r-detail .bg-slate-100{ background:var(--r-surface-3) !important; color:var(--n-text) !important; }
[data-theme="dark"] .r-detail .text-gray-800,
[data-theme="dark"] .r-detail .text-gray-700,
[data-theme="dark"] .r-detail .text-slate-900,
[data-theme="dark"] .r-detail .text-slate-800,
[data-theme="dark"] .r-detail .text-slate-700{ color:var(--n-text) !important; }
[data-theme="dark"] .r-detail .text-gray-600,
[data-theme="dark"] .r-detail .text-gray-500,
[data-theme="dark"] .r-detail .text-slate-600,
[data-theme="dark"] .r-detail .text-slate-500{ color:var(--n-text-muted) !important; }
[data-theme="dark"] .r-detail .text-gray-400,
[data-theme="dark"] .r-detail .text-slate-400{ color:var(--n-text-light) !important; }
[data-theme="dark"] .r-detail .border-gray-200,
[data-theme="dark"] .r-detail .border-gray-100,
[data-theme="dark"] .r-detail .border-slate-200,
[data-theme="dark"] .r-detail .border-slate-100{ border-color:var(--n-border) !important; }
[data-theme="dark"] .r-detail .divide-slate-700\/30 > * + *{ border-color:var(--n-border) !important; }
[data-theme="dark"] .r-detail .hover\:bg-slate-50:hover,
[data-theme="dark"] .r-detail .hover\:bg-slate-100:hover,
[data-theme="dark"] .r-detail .hover\:bg-gray-100:hover,
[data-theme="dark"] .r-detail .hover\:bg-slate-700\/20:hover,
[data-theme="dark"] .r-detail .hover\:bg-slate-700\/30:hover{ background:var(--r-surface-2) !important; }
[data-theme="dark"] .r-detail input[type=text],
[data-theme="dark"] .r-detail input[type=number],
[data-theme="dark"] .r-detail input[type=search],
[data-theme="dark"] .r-detail select,
[data-theme="dark"] .r-detail textarea{ background:var(--r-surface-2) !important; color:var(--n-text) !important; border-color:var(--n-border) !important; }

/* ---- Подчёркивание-линия под заголовком -------------------------------
   Растёт слева направо при наведении на карточку или ссылку. Ставится на
   сам заголовок, поэтому подчёркивается только он, а не весь текст ссылки. */
.u-line{
  display:inline;
  background-image:linear-gradient(var(--n-accent), var(--n-accent));
  background-repeat:no-repeat;
  background-position:0 calc(100% + 1px);   /* на пиксель ниже базовой линии текста */
  background-size:0 2px;
  transition:background-size .25s ease;
}
a:hover .u-line,
.race-row:hover .u-line,
.group:hover .u-line,
.card:hover .u-line,
.r-ev-card:hover .u-line,
.champ-card:hover .u-line,
tr:hover .u-line{ background-size:100% 2px; }
@media (prefers-reduced-motion: reduce){ .u-line{ transition:none } }


/* =====================================================================
   ФОН ПРОЕКТА — общий слой для всех страниц.
   Два размытых пятна вверху (гаснут маской к середине) плюс редкие
   скоростные линии на всю высоту окна. Слой фиксированный и лежит ПОД
   содержимым: панели непрозрачны, поэтому свечение видно в промежутках
   между ними и за шапкой. Разметку добавляет base.html одним блоком.
   ===================================================================== */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx .glowwrap{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 78%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 78%)}
.bgfx .glow{position:absolute;border-radius:9999px;filter:blur(80px);opacity:.42}
.bgfx .glow-a{width:520px;height:520px;top:-190px;right:-120px;
  background:radial-gradient(circle,rgba(255,90,31,.55),transparent 70%)}
.bgfx .glow-b{width:440px;height:440px;top:-140px;left:-140px;
  background:radial-gradient(circle,rgba(44,130,246,.32),transparent 70%)}
.bgfx .speedlines{position:absolute;inset:0;opacity:.28}
.bgfx .speedlines span{position:absolute;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--n-accent),transparent);
  animation:bgSpeed linear infinite;will-change:transform,opacity}
@keyframes bgSpeed{0%{transform:translateX(-30%);opacity:0}10%{opacity:.9}100%{transform:translateX(420px);opacity:0}}
/* В светлой теме фон тише: на белом те же значения читаются грязью. */
:root[data-theme="light"] .bgfx .glow{opacity:.26}
:root[data-theme="light"] .bgfx .speedlines{opacity:.14}
@media (prefers-reduced-motion:reduce){ .bgfx .speedlines{display:none} }


/* =====================================================================
   СХЕМА ТРАССЫ — оживление статичной карты (перенос из мокапа).
   Файл в static/track-maps — это один путь со штрихом, поэтому он же
   служит и «полотном» дороги, и направляющей для машин. Разметку
   достраивает JS после подстановки svg (см. championship_detail.html).
   Анимация схемы стоит на паузе и оживает при наведении на карточку.
   ===================================================================== */
.map-box .trk-bed{stroke:var(--n-bg-active)}
.map-box .trk-line{fill:none;stroke:var(--n-accent);stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:trkDraw 1.5s cubic-bezier(.2,.6,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes trkDraw{to{stroke-dashoffset:0}}
.map-box .trk-line.is-future{stroke:var(--n-text-light)}
.map-box .car-lead{filter:drop-shadow(0 0 6px var(--n-accent))}
/* Бегущая подсветка контура: короткий штрих идёт по трассе кругами.
   Стоит на паузе вместе с машинами и включается наведением на строку. */
.map-box .trk-flash{fill:none;stroke:#fff;stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.65));
  opacity:0;transition:opacity .2s ease}
.rcard:hover .map-box .trk-flash{opacity:.95}
@media (prefers-reduced-motion:reduce){ .map-box .trk-flash{display:none} }
@media (prefers-reduced-motion:reduce){ .map-box .trk-line{stroke-dashoffset:0} }

/* =====================================================================
   ПОЯВЛЕНИЕ СОДЕРЖИМОГО — каскад секций (перенос из мокапа).
   Вешается на контейнер: прямые дети выезжают по очереди.
   ===================================================================== */
.fx-cascade > *{animation:fxUp .34s cubic-bezier(.2,.6,.2,1) both}
.fx-cascade > *:nth-child(1){animation-delay:0ms}
.fx-cascade > *:nth-child(2){animation-delay:60ms}
.fx-cascade > *:nth-child(3){animation-delay:120ms}
.fx-cascade > *:nth-child(4){animation-delay:180ms}
.fx-cascade > *:nth-child(5){animation-delay:240ms}
.fx-cascade > *:nth-child(6){animation-delay:300ms}
.fx-cascade > *:nth-child(n+7){animation-delay:360ms}
@keyframes fxUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Волна внутри переключаемых вкладок: содержимое раскрывается построчно,
   как таблица зачёта. Панель во вкладке часто одна, и каскад по её детям
   выглядит как появление одним куском.
   Ступеней двенадцать — дальше строки идут разом, иначе низ длинного
   списка доезжает через секунду после верха.
   Клиентское переключение (админка, профиль) перезапускает анимацию само:
   display:none снимает её, возврат в поток запускает заново. */
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *){animation:fxUp .3s cubic-bezier(.2,.6,.2,1) both}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(1){animation-delay:0ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(2){animation-delay:28ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(3){animation-delay:56ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(4){animation-delay:84ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(5){animation-delay:112ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(6){animation-delay:140ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(7){animation-delay:168ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(8){animation-delay:196ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(9){animation-delay:224ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(10){animation-delay:252ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(11){animation-delay:280ms}
:is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *):nth-child(n+12){animation-delay:308ms}
@media (prefers-reduced-motion:reduce){ :is(.tab-content, [data-panel], .ch-panel) :is(tbody > tr, .rowlist > *){animation:none} }

/* =====================================================================
   «ЭТО ВЫ» — одинаково в списках и таблицах (перенос из мокапа).
   Заливка во всю ширину панели, ровная планка 3px у левого края.
   Радиуса нет нигде: на скруглении планка выгибается дугой.
   ===================================================================== */
.is-me{background:rgba(255,90,31,.10);box-shadow:inset 3px 0 0 var(--n-accent);border-radius:0}
/* Заливка идёт во всю ширину панели: строка выходит на её поля отрицательным
   margin и возвращает их padding'ом. Иначе подсветка обрывается за 20px до
   края, а планка «это вы» висит в воздухе посреди панели.
   Только для списков — прямых детей панели: вложенные в колонки на поля
   выходить не должны. */
.panel.p-5{--pad:1.25rem}
.panel.p-4{--pad:1rem}
.panel > .rowlist > .is-me{margin-left:calc(var(--pad, 0px) * -1);margin-right:calc(var(--pad, 0px) * -1);
  padding-left:var(--pad, 0px);padding-right:var(--pad, 0px)}
/* В таблицах фон строки перекрывается непрозрачным фоном ячеек (полосатость
   DataTables), поэтому красим сами ячейки, а планку рисуем псевдоэлементом
   поверх — inset-тень под фоном ячейки не видна. */
tr.is-me > td{background:rgba(255,90,31,.10);border-radius:0}
tr.is-me > td:first-child{position:relative}
tr.is-me > td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--n-accent)}
/* Таблицы: подсветка строки доходит до краёв панели, поэтому боковые поля
   живут в крайних ячейках, а не на контейнере. Селекторы пробивают обёртки:
   в «Таблицах» между контейнером и таблицей DataTables вставляет свои
   .dataTables_wrapper > .row > .col-sm-12, в «Результатах» их нет. */
.tblwrap{overflow-x:auto}
.tblwrap table > thead > tr > th:first-child,
.tblwrap table > tbody > tr > td:first-child{padding-left:var(--tpad, 1rem)}
.tblwrap table > thead > tr > th:last-child,
.tblwrap table > tbody > tr > td:last-child{padding-right:var(--tpad, 1rem)}
/* внутри панели с полями таблица выходит на них, как список */
.panel.p-5 > .tblwrap{margin-left:-1.25rem;margin-right:-1.25rem;--tpad:1.25rem}

.me-tag{display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--n-accent);background:var(--n-accent-soft);border-radius:5px;padding:.05rem .3rem;margin-left:.4rem}


/* =====================================================================
   ГРАФИК «БОРЬБА ЗА ТИТУЛ» на вкладке «Обзор».
   Сетка проявляется, линии рисуют себя слева направо, следом точки и
   легенда. pathLength=1 нормализует длины: линии разной длины доезжают
   одновременно, иначе нижняя дорисовывается заметно раньше верхней.
   ===================================================================== */
.ch-grid{opacity:0;animation:chFade .35s ease forwards;animation-delay:var(--d,0ms)}
.ch-line{stroke-dasharray:1;stroke-dashoffset:1;
  animation:chDraw 1.15s cubic-bezier(.25,.6,.2,1) forwards;animation-delay:var(--d,0ms)}
.ch-dot{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:chPop .34s cubic-bezier(.2,.7,.3,1.6) forwards;animation-delay:var(--d,0ms)}
.ch-lg{opacity:0;animation:chUp .3s ease forwards;animation-delay:var(--d,0ms)}
@keyframes chDraw{to{stroke-dashoffset:0}}
@keyframes chFade{to{opacity:1}}
@keyframes chPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes chUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ch-line{stroke-dashoffset:0}
  .ch-grid,.ch-dot,.ch-lg{opacity:1}
}


/* =====================================================================
   СПИСОК СТРОК (.rowlist) — общий приём страницы соревнования.
   Строки разделяются одной волосяной линией, у первой её нет. Класс
   использовался в разметке, но правила для него не существовало, поэтому
   разделителей между этапами и участниками просто не было.
   ===================================================================== */
.rowlist > * + *{border-top:1px solid var(--n-border)}


/* =====================================================================
   ПОДПИСИ ОСЕЙ у графиков (динамика iRating в паспорте, борьба за титул
   в обзоре чемпионата).
   Живут HTML-слоем поверх графика — svg растянут preserveAspectRatio="none",
   и текст внутри него исказился бы по горизонтали. Слева освобождена
   колонка под значения, снизу — полоса под подписи шкалы времени.
   ===================================================================== */
.chart-plot{position:relative;padding-left:3rem}
.chart-y{position:absolute;left:0;top:0;bottom:0;width:3rem;pointer-events:none}
.chart-y span{position:absolute;right:.5rem;transform:translateY(-50%);
  font-size:11px;line-height:1;color:var(--n-text-muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.chart-x{position:relative;height:1rem;margin-top:.25rem;margin-left:3rem}
.chart-x span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.chart-x span:first-child{transform:none}


/* =====================================================================
   СОРТИРОВКА ТАБЛИЦ по клику на заголовок (замена DataTables).
   ===================================================================== */
table.sortable th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
table.sortable th[data-sort]:hover{color:var(--n-text)}
/* Мышью рамка фокуса не нужна, с клавиатуры — обязательна. */
table.sortable th[data-sort]:focus{outline:none}
table.sortable th[data-sort]:focus-visible{outline:2px solid var(--n-accent);outline-offset:-2px}
/* Треугольник рисуем бордерами: символы стрелок есть не в каждом шрифте,
   и там, где глифа нет, в заголовке появляется мусор вместо стрелки. */
table.sortable th .arr{display:inline-block;width:0;height:0;margin-left:.35rem;
  vertical-align:middle;opacity:0;border-left:4px solid transparent;border-right:4px solid transparent}
table.sortable th.sorted-asc .arr{opacity:1;border-bottom:5px solid var(--n-accent)}
table.sortable th.sorted-desc .arr{opacity:1;border-top:5px solid var(--n-accent)}
/* Номер ключа при сортировке по нескольким столбцам (Shift+клик). */
table.sortable th[data-order-index]::after{content:attr(data-order-index);
  margin-left:.15rem;font-size:.55rem;font-weight:700;color:var(--n-accent);vertical-align:super}


/* =====================================================================
   КАРТОЧКА ОРГАНИЗАТОРА в блоке «О соревновании».
   ===================================================================== */
.org-card-face{display:inline-flex;align-items:center;gap:.75rem;max-width:100%}
.org-card-logo{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;
  border-radius:12px;overflow:hidden;background:var(--n-bg-active);border:1px solid var(--n-border);
  font-weight:700;font-size:.85rem;letter-spacing:.02em;color:var(--n-text-muted)}
.org-card-logo img{width:100%;height:100%;object-fit:cover}


/* =====================================================================
   ШИРИНА СТРАНИЦЫ — одна на весь проект.
   Обёртка 1240, содержимое 1200, боковые поля 20px. Раньше каждая
   страница задавала ширину сама (1320 / 1240 / 1200 / 7xl / 6xl) с
   разными полями, и контент прыгал при переходе между разделами.
   Узкие страницы (формы, диалоги) на .shell не переводятся: им ширина
   ограничена намеренно.
   ===================================================================== */
.shell{max-width:1240px;margin-left:auto;margin-right:auto;
  padding-left:1rem;padding-right:1rem;padding-top:1.5rem;padding-bottom:1.5rem}
@media (min-width:768px){.shell{padding-left:1.25rem;padding-right:1.25rem}}

/* Подмена протокола во вкладке «Результаты»: содержимое пригасает, пока
   грузится новое. Резкой смены нет — и нет моргания. */
#content-races{transition:opacity .12s ease}
#content-races.is-swapping{opacity:.45}

/* Полоса фильтров держится в одну строку: чипы не переносятся, а при
   нехватке места прокручиваются вбок. Полосу прокрутки прячем — она
   ломала бы высоту строки, а сам факт прокрутки виден по обрезанному чипу. */
.r-discovery .filter-strip{
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* прокрутка пальцем на тачскрине — без залипания на карточках */
  overscroll-behavior-x: contain;
}
.r-discovery .filter-strip::-webkit-scrollbar{ height: 0; width: 0; }
/* Чип не сжимается и не рвёт подпись: он либо целиком виден, либо уезжает
   за край строки — иначе вместо прокрутки фильтры молча худеют. */
.r-discovery .filter-strip > *{ flex: 0 0 auto; white-space: nowrap; }


/* ---------------------------------------------------------------------
   Выпадающее меню в теме сайта. Нативный <select> открывает список
   средствами ОС — белый фон и синяя подсветка, которые токенами не
   перекрасить. Здесь кнопка и меню нарисованы сами.
   --------------------------------------------------------------------- */
.r-drop{ position: relative; }
.r-drop-btn{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .375rem .5rem .375rem .625rem;
  font-size: .75rem; line-height: 1.2;
  background: var(--r-surface-2); border: 1px solid var(--n-border);
  border-radius: 8px; color: var(--n-text); white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease;
}
.r-drop-btn:hover{ border-color: var(--n-border-strong); }
.r-drop.open .r-drop-btn{ border-color: var(--n-accent); color: var(--n-accent); }
.r-drop.open .r-drop-btn i{ transform: rotate(180deg); }
.r-drop-btn i{ transition: transform .15s ease; opacity: .7; }

.r-drop-menu{
  position: absolute; z-index: 40; top: calc(100% + .35rem); right: 0;
  min-width: 100%; padding: .25rem;
  /* Меню висит над страницей, поэтому фон — поверхность, а не цвет фона:
     иначе список сливается со страницей и видна только рамка. */
  background: var(--r-surface-2);
  border: 1px solid var(--n-border-strong);
  border-radius: 10px; box-shadow: var(--n-shadow-lg, 0 12px 30px -12px rgba(0,0,0,.55));
  display: none;
}
.r-drop.open .r-drop-menu{ display: block; }

.r-drop-item{
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .4rem .55rem; border-radius: 7px;
  font-size: .75rem; color: var(--n-text-muted); text-decoration: none;
}
.r-drop-item:hover{ background: rgba(255,255,255,.06); color: var(--n-text); }
.r-drop-item.on{ background: var(--n-accent-soft); color: var(--n-accent); font-weight: 600; }
/* Галочка занимает место всегда — иначе пункты дёргаются при выборе. */
.r-drop-item .mark{ margin-left: auto; opacity: 0; }
.r-drop-item.on .mark{ opacity: 1; }