/* Дизайн-система KritGO: токены и примитивы, общие для страниц на новом макете
   (/events, /events/{id}, /matches/{id}). Живёт отдельно от _Layout: остальной сайт
   по-прежнему на лестнице --ink-* и на эти переменные не завязан.
   Все цвета — только через переменные ниже: литерал не подхватит светлую тему. */

.kg {
    --kg-bg: #0A0F15;
    --kg-s1: #101720; --kg-s2: #151E29; --kg-s3: #1B2634; --kg-s4: #243040;
    --kg-bd: #222E3D; --kg-bd2: #33445A;
    --kg-t1: #EBF2F8; --kg-t2: #A8BACD; --kg-t3: #8598AC;
    --kg-ac: #4FC8F0; --kg-ac-fill: #29B6E8; --kg-ac-ink: #06202C;
    --kg-ac-soft: rgba(41,182,232,.13); --kg-ac-bd: rgba(41,182,232,.42);
    --kg-live: #3ADB86; --kg-live-soft: rgba(58,219,134,.11); --kg-live-bd: rgba(58,219,134,.34);
    --kg-soon: #E9B357; --kg-soon-soft: rgba(233,179,87,.12); --kg-soon-bd: rgba(233,179,87,.34);
    --kg-gold: #E0B24A;
    /* Служебные цвета результата и стороны — единственное, что редизайн матча добавил
       к палитре. Победа переиспользует --kg-live, поражению и сторонам нужны свои. */
    --kg-loss: #F0707F; --kg-loss-soft: rgba(240,112,127,.11); --kg-loss-bd: rgba(240,112,127,.34);
    --kg-atk: #E0A33C; --kg-def: #7DA2E8;

    /* IBM Plex Mono из макета не тянем: новый внешний шрифт — пункт чек-листа в AGENTS.md.
       Роль «числа моноширинно и выравниваются по разряду» закрывает системный моноширинный
       + tabular-nums, без единого лишнего запроса наружу. */
    --kg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    /* Семейство приходится называть явно: в шорткате `font:` оно обязательно, а `inherit`
       там невалиден — браузер молча выбрасывал всё объявление вместе с размером. */
    --kg-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

    color: var(--kg-t1);
}

[data-theme="light"] .kg {
    --kg-bg: #E9EEF3;
    --kg-s1: #FFFFFF; --kg-s2: #F4F7FA; --kg-s3: #E9EEF4; --kg-s4: #DCE4EC;
    --kg-bd: #D3DCE5; --kg-bd2: #AFBDCB;
    --kg-t1: #0E1720; --kg-t2: #46586B; --kg-t3: #5B6E82;
    --kg-ac: #0B6E92; --kg-ac-fill: #0E7FA8; --kg-ac-ink: #FFFFFF;
    --kg-ac-soft: rgba(14,127,168,.10); --kg-ac-bd: rgba(14,127,168,.40);
    --kg-live: #0E7A4E; --kg-live-soft: rgba(14,122,78,.09); --kg-live-bd: rgba(14,122,78,.32);
    --kg-soon: #8A5B06; --kg-soon-soft: rgba(138,91,6,.09); --kg-soon-bd: rgba(138,91,6,.30);
    --kg-gold: #8A6A12;
    --kg-loss: #B8323F; --kg-loss-soft: rgba(184,50,63,.09); --kg-loss-bd: rgba(184,50,63,.32);
    --kg-atk: #8A5E0F; --kg-def: #33549A;
}

/* ─────────────────────────── примитивы ─────────────────────────── */

.kg a { color: inherit; text-decoration: none; }

.kg-panel {
    background: var(--kg-s1);
    border: 1px solid var(--kg-bd);
    border-radius: 8px;
}

.kg-num {
    font-family: var(--kg-mono);
    font-variant-numeric: tabular-nums;
}

/* Надпись-метка над числом: «ПРИЗОВОЙ ФОНД», «КОМАНДЫ». */
.kg-label {
    font: 600 10.5px/1 var(--kg-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kg-t3);
}

/* Заголовок секции с линией на всю оставшуюся ширину. */
.kg-sec {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.kg-sec > span:first-child {
    font: 600 11.5px/1 var(--kg-sans);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--kg-t2);
    white-space: nowrap;
}
.kg-sec__count { font: 600 11.5px/1 var(--kg-mono); color: var(--kg-t3); }
.kg-sec__rule { flex: 1; height: 1px; background: var(--kg-bd); }

.kg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--kg-bd);
    border-radius: 4px;
    background: var(--kg-s2);
    color: var(--kg-t3);
    font: 600 11px/1 var(--kg-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.kg-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* Точку рисуем только у «идёт»: у остальных статусов она ничего не добавляет. */
.kg-badge:not(.is-live)::before { display: none; }
.kg-badge.is-live { background: var(--kg-live-soft); border-color: var(--kg-live-bd); color: var(--kg-live); }
.kg-badge.is-soon { background: var(--kg-soon-soft); border-color: var(--kg-soon-bd); color: var(--kg-soon); }

/* Плашка формата (7x7) — не статус, поэтому своя, нейтральная. */
.kg-tag {
    display: inline-block;
    padding: 4px 7px;
    border: 1px solid var(--kg-bd);
    border-radius: 4px;
    background: var(--kg-s2);
    color: var(--kg-t2);
    font: 600 11.5px/1 var(--kg-mono);
    white-space: nowrap;
}

/* ─────────────────────────── управление ─────────────────────────── */

.kg-seg {
    display: flex;
    background: var(--kg-s2);
    border: 1px solid var(--kg-bd);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    /* Полоса скроллится сама: три кнопки со счётчиками не влезают в 390px, а перенос
       ломает сам смысл сегментированного контрола. flex-wrap на родителе тут не спасает —
       переносится он, а не его содержимое (см. docs/lessons.md). */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.kg-seg::-webkit-scrollbar { display: none; }
.kg-seg > button {
    flex: none;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--kg-t2);
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 13px/1 var(--kg-sans);
    white-space: nowrap;
    cursor: pointer;
}
.kg-seg > button:hover { background: var(--kg-s3); color: var(--kg-t1); }
.kg-seg > button.is-on { background: var(--kg-ac-fill); color: var(--kg-ac-ink); font-weight: 600; }
.kg-seg__n {
    font: 600 11px/1 var(--kg-mono);
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--kg-s4);
    color: var(--kg-t3);
}
.kg-seg > button.is-on .kg-seg__n { background: rgba(0,0,0,.22); color: inherit; }

.kg-chip {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--kg-bd);
    border-radius: 6px;
    background: var(--kg-s2);
    color: var(--kg-t2);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 500 12.5px/1 var(--kg-sans);
    white-space: nowrap;
    cursor: pointer;
}
.kg-chip:hover { border-color: var(--kg-bd2); color: var(--kg-t1); }
.kg-chip.is-on {
    border-color: var(--kg-ac-bd);
    background: var(--kg-ac-soft);
    color: var(--kg-ac);
    font-weight: 600;
}

/* ─────────────────────────── прочие примитивы ─────────────────────────── */

.kg-logo {
    width: 44px; height: 44px;
    border-radius: 6px;
    border: 1px solid var(--kg-bd);
    background: var(--kg-s3);
    object-fit: contain;
    display: flex; align-items: center; justify-content: center;
    font: 600 13px/1 var(--kg-mono);
    color: var(--kg-t3);
    flex: none;
}

.kg-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--kg-t3); flex: none; }

.kg-empty {
    padding: 44px 20px;
    text-align: center;
    color: var(--kg-t3);
    font: 400 13.5px/1.6 var(--kg-sans);
}
.kg-empty b { display: block; margin-bottom: 6px; color: var(--kg-t1); font: 600 14.5px/1.4 var(--kg-sans); }

.kg-crumbs {
    display: flex; align-items: center; gap: 8px;
    font: 500 12.5px/1 var(--kg-sans); color: var(--kg-t3);
    margin-bottom: 12px;
}
.kg-crumbs a:hover { color: var(--kg-ac); }


/* Липкая полоса табов. Высоту шапки сайта меряет events.js и кладёт в --kg-navh:
   в _Layout она задана паддингами и на разных ширинах разная, зашивать пиксель нельзя. */
.kg-tabs {
    position: sticky;
    top: var(--kg-navh, 48px);
    z-index: 20;
    margin: 16px 0 22px;
    background: var(--kg-s1);
    border-top: 1px solid var(--kg-bd);
    border-bottom: 1px solid var(--kg-bd);
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.kg-tabs::-webkit-scrollbar { display: none; }
.kg-tabs > button {
    flex: none;
    height: 50px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    font: 500 13.5px/1 var(--kg-sans);
    color: var(--kg-t2);
    white-space: nowrap;
    cursor: pointer;
}
.kg-tabs > button:hover { color: var(--kg-t1); }
.kg-tabs > button.is-on { color: var(--kg-ac); font-weight: 600; box-shadow: inset 0 -2px 0 var(--kg-ac-fill); }
.kg-tabs__n { font: 600 11px/1 var(--kg-mono); padding: 2px 5px; border-radius: 4px; background: var(--kg-s3); color: var(--kg-t3); }

.kg-block { padding: 18px 20px; }
.kg-block__title {
    font: 600 11.5px/1 var(--kg-sans);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--kg-t2);
    margin-bottom: 12px;
}

/* Полосы фильтров и табов скроллятся сами, страница по горизонтали — никогда. */
.kg-scroller {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: wrap;
}
.kg-scroller::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
    .kg-scroller { flex-wrap: nowrap; padding-bottom: 2px; }
    .kg-scroller > * { flex: none; }
}

@media (max-width: 640px) {
    /* Тач-таргеты в стеке — 44px. */
    .kg-seg { width: 100%; }
    .kg-seg > button { height: 44px; }
    .kg-chip { height: 34px; }
    .kg-tabs > button { height: 46px; }
}