/**
 * ==================================
 * GunCult UI Kit - Layout Utilities
 * ==================================
 * 
 * Система utility классов для layout и positioning
 */

/* ===================================
   Display
   =================================== */
.gc-block { display: block !important; }
.gc-inline-block { display: inline-block !important; }
.gc-inline { display: inline !important; }
.gc-flex { display: flex !important; }
.gc-inline-flex { display: inline-flex !important; }
.gc-grid { display: grid !important; }
.gc-inline-grid { display: inline-grid !important; }
.gc-hidden { display: none !important; }

/* ===================================
   Responsive Visibility (breakpoint: 768px = md)
   =================================== */

/* Только на десктопе: скрыт на мобильных, виден на md+ */
.gc-desktop-only {
    display: none !important;
}

@media (min-width: 768px) {
    .gc-desktop-only {
        display: block !important;
    }
}

/* Только на мобильных: виден на мобильных, скрыт на md+ */
@media (min-width: 768px) {
    .gc-mobile-only {
        display: none !important;
    }
}

/* ===================================
   Flexbox - Direction
   =================================== */
.gc-flex-row { flex-direction: row !important; }
.gc-flex-row-reverse { flex-direction: row-reverse !important; }
.gc-flex-col { flex-direction: column !important; }
.gc-flex-col-reverse { flex-direction: column-reverse !important; }

/* ===================================
   Flexbox - Wrap
   =================================== */
.gc-flex-wrap { flex-wrap: wrap !important; }
.gc-flex-nowrap { flex-wrap: nowrap !important; }
.gc-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* ===================================
   Flexbox - Justify Content
   =================================== */
.gc-justify-start { justify-content: flex-start !important; }
.gc-justify-end { justify-content: flex-end !important; }
.gc-justify-center { justify-content: center !important; }
.gc-justify-between { justify-content: space-between !important; }
.gc-justify-around { justify-content: space-around !important; }
.gc-justify-evenly { justify-content: space-evenly !important; }

/* ===================================
   Flexbox - Align Items
   =================================== */
.gc-items-start { align-items: flex-start !important; }
.gc-items-end { align-items: flex-end !important; }
.gc-items-center { align-items: center !important; }
.gc-items-baseline { align-items: baseline !important; }
.gc-items-stretch { align-items: stretch !important; }

/* ===================================
   Flexbox - Align Content
   =================================== */
.gc-content-start { align-content: flex-start !important; }
.gc-content-end { align-content: flex-end !important; }
.gc-content-center { align-content: center !important; }
.gc-content-between { align-content: space-between !important; }
.gc-content-around { align-content: space-around !important; }
.gc-content-stretch { align-content: stretch !important; }

/* ===================================
   Flexbox - Align Self
   =================================== */
.gc-self-auto { align-self: auto !important; }
.gc-self-start { align-self: flex-start !important; }
.gc-self-end { align-self: flex-end !important; }
.gc-self-center { align-self: center !important; }
.gc-self-stretch { align-self: stretch !important; }

/* ===================================
   Flexbox - Grow & Shrink
   =================================== */
.gc-flex-grow-0 { flex-grow: 0 !important; }
.gc-flex-grow-1 { flex-grow: 1 !important; }
.gc-flex-shrink-0 { flex-shrink: 0 !important; }
.gc-flex-shrink-1 { flex-shrink: 1 !important; }
.gc-flex-1 { flex: 1 !important; }

/* ===================================
   Grid - Template Columns
   =================================== */
.gc-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.gc-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.gc-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.gc-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.gc-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.gc-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.gc-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

/* Grid - Auto columns */
.gc-grid-cols-auto { grid-template-columns: auto !important; }
.gc-grid-cols-min { grid-template-columns: min-content !important; }
.gc-grid-cols-max { grid-template-columns: max-content !important; }

/* ===================================
   Grid - Template Rows
   =================================== */
.gc-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
.gc-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
.gc-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
.gc-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
.gc-grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }

/* ===================================
   Grid - Column Span
   =================================== */
.gc-col-span-1 { grid-column: span 1 / span 1 !important; }
.gc-col-span-2 { grid-column: span 2 / span 2 !important; }
.gc-col-span-3 { grid-column: span 3 / span 3 !important; }
.gc-col-span-4 { grid-column: span 4 / span 4 !important; }
.gc-col-span-6 { grid-column: span 6 / span 6 !important; }
.gc-col-span-12 { grid-column: span 12 / span 12 !important; }
.gc-col-span-full { grid-column: 1 / -1 !important; }

/* ===================================
   Position
   =================================== */
.gc-static { position: static !important; }
.gc-relative { position: relative !important; }
.gc-absolute { position: absolute !important; }
.gc-fixed { position: fixed !important; }
.gc-sticky { position: sticky !important; }

/* ===================================
   Position - Inset
   =================================== */
.gc-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.gc-inset-auto { top: auto; right: auto; bottom: auto; left: auto; }

/* Individual positions */
.gc-top-0 { top: 0 !important; }
.gc-right-0 { right: 0 !important; }
.gc-bottom-0 { bottom: 0 !important; }
.gc-left-0 { left: 0 !important; }

.gc-top-auto { top: auto !important; }
.gc-right-auto { right: auto !important; }
.gc-bottom-auto { bottom: auto !important; }
.gc-left-auto { left: auto !important; }

/* ===================================
   Z-Index
   =================================== */
.gc-z-0 { z-index: 0 !important; }
.gc-z-10 { z-index: 10 !important; }
.gc-z-20 { z-index: 20 !important; }
.gc-z-30 { z-index: 30 !important; }
.gc-z-40 { z-index: 40 !important; }
.gc-z-50 { z-index: 50 !important; }
.gc-z-100 { z-index: 100 !important; }
.gc-z-999 { z-index: 999 !important; }
.gc-z-max { z-index: 9999 !important; }
.gc-z-auto { z-index: auto !important; }

/* ===================================
   Width
   =================================== */
.gc-w-auto { width: auto !important; }
.gc-w-full { width: 100% !important; }
.gc-w-screen { width: 100vw !important; }
.gc-w-min { width: min-content !important; }
.gc-w-max { width: max-content !important; }
.gc-w-fit { width: fit-content !important; }

/* Fixed widths */
.gc-w-0 { width: 0 !important; }
.gc-w-1\/4 { width: 25% !important; }
.gc-w-1\/3 { width: 33.333333% !important; }
.gc-w-1\/2 { width: 50% !important; }
.gc-w-2\/3 { width: 66.666667% !important; }
.gc-w-3\/4 { width: 75% !important; }

/* ===================================
   Height
   =================================== */
.gc-h-auto { height: auto !important; }
.gc-h-full { height: 100% !important; }
.gc-h-screen { height: 100vh !important; }
.gc-h-min { height: min-content !important; }
.gc-h-max { height: max-content !important; }
.gc-h-fit { height: fit-content !important; }

/* Fixed heights */
.gc-h-0 { height: 0 !important; }
.gc-h-1\/4 { height: 25% !important; }
.gc-h-1\/3 { height: 33.333333% !important; }
.gc-h-1\/2 { height: 50% !important; }
.gc-h-2\/3 { height: 66.666667% !important; }
.gc-h-3\/4 { height: 75% !important; }

/* ===================================
   Min/Max Width
   =================================== */
.gc-min-w-0 { min-width: 0 !important; }
.gc-min-w-full { min-width: 100% !important; }
.gc-min-w-min { min-width: min-content !important; }
.gc-min-w-max { min-width: max-content !important; }

.gc-max-w-xs { max-width: 20rem !important; }      /* 320px */
.gc-max-w-sm { max-width: 24rem !important; }      /* 384px */
.gc-max-w-md { max-width: 28rem !important; }      /* 448px */
.gc-max-w-lg { max-width: 32rem !important; }      /* 512px */
.gc-max-w-xl { max-width: 36rem !important; }      /* 576px */
.gc-max-w-2xl { max-width: 42rem !important; }     /* 672px */
.gc-max-w-3xl { max-width: 48rem !important; }     /* 768px */
.gc-max-w-4xl { max-width: 56rem !important; }     /* 896px */
.gc-max-w-5xl { max-width: 64rem !important; }     /* 1024px */
.gc-max-w-6xl { max-width: 72rem !important; }     /* 1152px */
.gc-max-w-7xl { max-width: 80rem !important; }     /* 1280px */
.gc-max-w-full { max-width: 100% !important; }
.gc-max-w-screen { max-width: 100vw !important; }
.gc-max-w-none { max-width: none !important; }

/* ===================================
   Min/Max Height
   =================================== */
.gc-min-h-0 { min-height: 0 !important; }
.gc-min-h-full { min-height: 100% !important; }
.gc-min-h-screen { min-height: 100vh !important; }

.gc-max-h-full { max-height: 100% !important; }
.gc-max-h-screen { max-height: 100vh !important; }
.gc-max-h-none { max-height: none !important; }

/* ===================================
   Overflow
   =================================== */
.gc-overflow-auto { overflow: auto !important; }
.gc-overflow-hidden { overflow: hidden !important; }
.gc-overflow-visible { overflow: visible !important; }
.gc-overflow-scroll { overflow: scroll !important; }

.gc-overflow-x-auto { overflow-x: auto !important; }
.gc-overflow-y-auto { overflow-y: auto !important; }
.gc-overflow-x-hidden { overflow-x: hidden !important; }
.gc-overflow-y-hidden { overflow-y: hidden !important; }

/* ===================================
   Object Fit
   =================================== */
.gc-object-contain { object-fit: contain !important; }
.gc-object-cover { object-fit: cover !important; }
.gc-object-fill { object-fit: fill !important; }
.gc-object-none { object-fit: none !important; }
.gc-object-scale-down { object-fit: scale-down !important; }

/* ===================================
   Page Containers
   =================================== */

/* GC Container (Tailwind-style) */
.gc-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .gc-container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .gc-container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .gc-container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .gc-container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .gc-container {
        max-width: 1536px;
    }
}

/* Page Container (стандартный контейнер страницы) */
.page-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (max-width: 767.98px) {
    .page-container {
        padding: 0; /* Без отступов на мобильных - элементы сами управляют своими отступами */
    }
}

/* Form Page Wrapper (обертка для форм с сабхедером) */
.form-page-wrapper {
    width: 100%;
    max-width: 720px;
    margin: var(--space-6) auto;
    padding: 0 var(--space-4);
}

@media (max-width: 767.98px) {
    .form-page-wrapper {
        margin: var(--space-4) 0;
        padding: 0;
    }
}

/* Form Page Container (узкий контейнер для форм) */
.form-page-container {
    width: 100%;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

@media (max-width: 767.98px) {
    .form-page-container {
        padding: var(--space-4) var(--space-2);
        overflow-x: hidden;
    }
    
    /* Фикс для Bootstrap row - убираем отрицательные маргины на мобильных */
    .form-page-container .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .form-page-container .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Page Container Flush (без боковых отступов) */
.page-container-flush {
    width: 100%;
    max-width: var(--layout-page-max-width);
    margin: 0 auto;
    padding: var(--space-4) 0;
}

/*
 * Reading column: --layout-event-main-max-width только с context rail (≥1280).
 * <1280 rail скрыт — колонка заполняет .gc-app-main (иначе 1120–1279: 768px + gutter).
 * Источник правды: .gc-page-grid. Алиасы — boot/Blade/channel subpage без PageGrid.
 */
.page-container-flush.gc-page-grid {
    max-width: none;
    margin-inline: auto;
    width: 100%;
}

@media (min-width: 1280px) {
    .page-container-flush.gc-page-grid,
    .page-container-flush:has(.weapon-show-page-layout),
    .page-container-flush:has(.stage-show-page-layout),
    body:has(.gc-app-body > .gc-context-rail)
        .page-container-flush:has(.event-show-page-layout):not(:has(.event-show-columns > .split-left)),
    .events-index-main,
    .event-show-page-layout > .event-show-main.event-section-main,
    .event-content,
    .weapon-show-page-layout,
    .stage-show-page-layout,
    body:has(.gc-app-body > .gc-context-rail)
        .event-show-page-layout:not(:has(.event-show-columns > .split-left)) {
        max-width: var(--layout-event-main-max-width);
        margin-inline: auto;
        width: 100%;
    }

    .gc-page-grid__main {
        gap: var(--space-6);
    }
}

.page-container-flush.gc-page-grid:has(.split-left) {
    max-width: none;
}

.gc-page-grid__main {
    display: flex;
    flex-direction: column;
    gap: var(--layout-section-gap);
    min-width: 0;
    width: 100%;
}

@media (max-width: 1279px) {
    .page-container-flush {
        padding: var(--layout-section-gap) var(--layout-content-inset-x);
    }
}

/*
 * Desktop + app rail: горизонтальный inset только на .gc-app-main
 * (--layout-app-rail-main-inset-x). Не дублировать content-inset на flush
 * (иначе 992–1279 — «лишние» поля слева/справа).
 * Под шапкой gap только --layout-three-col-subheader-gap на page-layout,
 * не section-gap padding-top на flush (иначе двойной отступ 992–1279).
 */
@media (min-width: 992px) {
    /* Guest pages have no app rail; their chrome still needs the main inset. */
    body:not(:has(.gc-app-rail)) .gc-app-main:has(.gc-three-col-subheader) {
        --gc-app-main-inset-x: var(--layout-app-rail-main-inset-x);
        padding-inline: var(--gc-app-main-inset-x);
    }

    body:not(:has(.gc-app-rail)) .gc-app-main:has(.gc-three-col-subheader) .page-container-flush {
        padding-inline: 0;
    }

    body:not(:has(.gc-app-rail)) .gc-app-main .gc-three-col-subheader + .page-container-flush {
        padding-top: 0;
    }

    body:has(.gc-app-rail) .page-container-flush {
        padding-inline: 0;
    }

    body:has(.gc-app-rail) .gc-three-col-subheader + .page-container-flush {
        padding-top: 0;
    }

    /*
     * Gap под chrome: show → .event-show-page-layout; forms → .split-form-wrapper;
     * index/catalog → .catalog-main (прямой потомок flush или main внутри PageGrid).
     */
    .gc-three-col-subheader + .page-container-flush > .catalog-main,
    .gc-three-col-subheader + .page-container-flush .gc-page-grid__main.catalog-main,
    .gc-three-col-subheader + .page-container-flush > .catalog-layout {
        padding-top: var(--layout-three-col-subheader-gap);
    }
}

/* ===================================
   Three-col page subheader (Figma 1907:17299)
   Sticky shell: back + title + meta | actions
   Adaptive: один chrome web + mobile (glass title_bar).
   Legacy: tabbed .gc-mobile-nav-top (.gc-nav-track) — subheader скрыт <992.
   =================================== */

.gc-three-col-subheader {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    height: var(--layout-three-col-subheader-height);
    min-height: var(--layout-three-col-subheader-height);
    /* Mobile title_bar: transparent shell + glass controls */
    background: transparent;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    --gc-subheader-focus-outline: var(--gc-focus-outline);
    --gc-subheader-focus-outline-offset: var(--gc-focus-outline-offset);
    --gc-subheader-hover-bg: color-mix(in srgb, var(--text-primary) 8%, var(--surface-primary));
}

/*
 * <992: тот же glass chrome, что desktop; safe-area + ритм как .gc-nav-header.
 * Inertia AppShell без fixed mobile top — subheader = page chrome.
 */
@media (max-width: 991.98px) {
    .gc-three-col-subheader {
        height: auto;
        min-height: calc(
            env(safe-area-inset-top, 0px) + var(--gc-mobile-nav-header-row-min-height)
        );
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Scrim под sticky chrome (как .gc-mobile-nav-top::before) */
    .gc-three-col-subheader::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            var(--gc-app-content-bg, var(--surface-canvas)) 0%,
            color-mix(in srgb, var(--gc-app-content-bg, var(--surface-canvas)) 38%, transparent) 58%,
            color-mix(in srgb, var(--gc-app-content-bg, var(--surface-canvas)) 10%, transparent) 88%,
            transparent 100%
        );
        pointer-events: none;
        z-index: -1;
    }

    /*
     * Inertia / pages без rail: inset на main (desktop inset — app-rail.css ≥992).
     * Горизонт только здесь — не padding на __primary (см. desktop-chrome).
     * Blade: subheader — прямой потомок main.
     * Inertia AppShell: subheader внутри обёртки (hidden на визит-скелетон) —
     * нужен descendant :has(), не только `>`.
     * Flush без второго content-inset — тот же контракт, что ≥992 + rail.
     */
    .gc-app-main:has(.gc-three-col-subheader) {
        --gc-app-main-inset-x: var(--layout-content-inset-x);
        padding-inline: var(--gc-app-main-inset-x);
    }

    .gc-app-main:has(.gc-three-col-subheader) .page-container-flush {
        padding-inline: 0;
    }

    /*
     * Blade: простой title_bar (@section mobileNav → .gc-nav-header без tabs)
     * дублирует adaptive subheader — прячем fixed top + offset.
     */
    body:has(.gc-three-col-subheader):not(:has(.gc-mobile-nav-top .gc-nav-track)) .gc-mobile-nav-top,
    body:has(.gc-three-col-subheader):not(:has(.gc-mobile-nav-top .gc-nav-track)) #gcMobileNavOffset {
        display: none !important;
    }

    /*
     * Profile/channel tabbed mobile chrome: tabs владеют верхом —
     * page subheader остаётся desktop-only (как раньше).
     */
    body:has(.gc-mobile-nav-top .gc-nav-track) .gc-three-col-subheader {
        display: none;
    }
}

@media (min-width: 992px) {
    body:has(.gc-app-rail):has(.gc-three-col-subheader) {
        --layout-context-rail-sticky-top: calc(
            var(--layout-three-col-subheader-height)
            + var(--layout-three-col-subheader-gap)
        );
    }
}

/* title_bar row: back | title/meta | actions (≥992 title в leading; <992 title по центру) */
.gc-three-col-subheader__primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    /* Горизонт — только padding main (main-inset-x). py: ≥992 высота 56 центрирует chrome 40px; <992 — как .gc-nav-header */
    padding-inline: 0;
    padding-block: 0;
    box-sizing: border-box;
}

@media (max-width: 991.98px) {
    .gc-three-col-subheader__primary {
        padding-block: var(--space-3);
    }

    /* Табы сразу под title_bar: нижний py шапки = space/2, без второго padding-top на треке */
    .gc-three-col-subheader--has-tabs .gc-three-col-subheader__primary {
        padding-bottom: var(--space-2);
    }
}

/* Optional center (filter tabs): true center, leading/actions in side columns */
.gc-three-col-subheader--has-center .gc-three-col-subheader__primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-content: stretch;
    column-gap: var(--space-3);
}

.gc-three-col-subheader__leading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1 1 auto;
}

.gc-three-col-subheader--has-center .gc-three-col-subheader__leading {
    flex: none;
    justify-self: start;
    max-width: 100%;
}

.gc-three-col-subheader__center {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    min-width: 0;
}

.gc-three-col-subheader__center .gc-tabs {
    width: fit-content;
    max-width: 100%;
}

.gc-three-col-subheader--has-center .gc-three-col-subheader__actions {
    justify-self: end;
}

/* Back / Notify: glass circle — тот же fill/blur, что у title pill */
.gc-three-col-subheader .gc-btn.gc-three-col-subheader__back:is(.gc-btn-icon, .gc-btn-icon-sm),
.gc-three-col-subheader .gc-btn.gc-three-col-subheader__notify:is(.gc-btn-icon, .gc-btn-icon-sm) {
    flex-shrink: 0;
    margin-bottom: 0;
    width: var(--gc-mobile-nav-title-icon-size);
    height: var(--gc-mobile-nav-title-icon-size);
    min-width: var(--gc-mobile-nav-title-icon-size);
    min-height: var(--gc-mobile-nav-title-icon-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--gc-mobile-nav-title-pill-bg);
    backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    -webkit-backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: var(--gc-subheader-control-shadow, var(--gc-mobile-nav-icon-shadow));
    color: var(--text-primary);
    --gc-btn-hairline: 0 0 #0000;
    --gc-btn-elevation: 0 0 #0000;
}

.gc-three-col-subheader .gc-btn.gc-three-col-subheader__back:is(.gc-btn-icon, .gc-btn-icon-sm):hover,
.gc-three-col-subheader .gc-btn.gc-three-col-subheader__notify:is(.gc-btn-icon, .gc-btn-icon-sm):hover {
    background: var(--gc-subheader-hover-bg);
    color: var(--text-primary);
}

.gc-three-col-subheader .gc-btn.gc-three-col-subheader__back:is(.gc-btn-icon, .gc-btn-icon-sm) i,
.gc-three-col-subheader .gc-btn.gc-three-col-subheader__notify:is(.gc-btn-icon, .gc-btn-icon-sm) i {
    font-size: var(--font-size-20);
    line-height: 1;
}

/* Optical: Phosphor caret-left mass sits right of geometric center in a 40 circle */
.gc-three-col-subheader .gc-btn.gc-three-col-subheader__back:is(.gc-btn-icon, .gc-btn-icon-sm) i.ph-caret-left {
    transform: translateX(-1px);
}

/* Title + meta — glass pill (≥992 сразу справа от back; <992 — центр title_bar) */
.gc-three-col-subheader__title-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
    height: var(--gc-mobile-nav-title-icon-size);
    padding: 0 var(--space-4);
    box-sizing: border-box;
    background: var(--gc-mobile-nav-title-pill-bg);
    backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    -webkit-backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: var(--gc-subheader-control-shadow, var(--gc-mobile-nav-icon-shadow));
}

@media (max-width: 991.98px) {
    .gc-three-col-subheader__title-group--menu:has(.gc-dropdown) {
        padding-inline: 0;
    }
}

.gc-three-col-subheader__title {
    margin: 0;
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: var(--gc-mobile-nav-tab-line-height);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.gc-three-col-subheader__title-group:has(.gc-list-avatar),
.gc-three-col-subheader__title-group:has(.gc-list-avatar-fallback) {
    padding-inline-start: var(--space-1-5);
}

.gc-three-col-subheader__title-group .gc-list-avatar,
.gc-three-col-subheader__title-group .gc-list-avatar-fallback {
    flex-shrink: 0;
}

/*
 * <992: title + meta по центру title_bar (равные 1fr слева/справа).
 * Слева — back (второй уровень) или колокольчик (корневой экран);
 * справа — actions (Создать / overflow).
 * --has-center: фильтры уходят на вторую строку (или скрыты доменным CSS).
 */
@media (max-width: 991.98px) {
    .gc-three-col-subheader:has(.gc-three-col-subheader__title-group) .gc-three-col-subheader__primary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        justify-content: stretch;
        column-gap: var(--space-2);
    }

    .gc-three-col-subheader:has(.gc-three-col-subheader__title-group) .gc-three-col-subheader__leading {
        display: contents;
    }

    .gc-three-col-subheader:has(.gc-three-col-subheader__title-group) .gc-three-col-subheader__back,
    .gc-three-col-subheader:has(.gc-three-col-subheader__title-group) .gc-three-col-subheader__notify,
    .gc-three-col-subheader:has(.gc-three-col-subheader__title-group) .gc-three-col-subheader__leading > .gc-three-col-subheader__skeleton-back {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .gc-three-col-subheader:has(.gc-three-col-subheader__title-group) .gc-three-col-subheader__title-group {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        min-width: 0;
        max-width: 100%;
    }

    .gc-three-col-subheader:has(.gc-three-col-subheader__title-group) .gc-three-col-subheader__actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        min-width: 0;
    }

    .gc-three-col-subheader--has-center:has(.gc-three-col-subheader__title-group) .gc-three-col-subheader__center {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        justify-content: center;
    }
}

.gc-three-col-subheader__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    margin-inline-start: 0;
}

/* Owner / entity chip next to page title (weapon show).
 * Размер здесь — иначе .sidebar-avatar (40) / .gc-avatar-24 врезаются в pill (40). */
.gc-three-col-subheader__owner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
    border-radius: var(--radius-full);
    text-decoration: none;
    color: inherit;
    background: var(--surface-elevated);
    /* better-ui image edge on shell (overflow clips child outlines) */
    outline: 1px solid color-mix(in srgb, var(--fill-emphasis) 10%, transparent);
    transition-property: transform, opacity;
    transition-duration: var(--transition-fast);
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.gc-three-col-subheader__owner :is(
    img,
    .gc-avatar,
    .sidebar-avatar,
    .sidebar-avatar-placeholder,
    [class*='gc-avatar-']
) {
    box-sizing: border-box;
    width: var(--space-4);
    height: var(--space-4);
    min-width: var(--space-4);
    min-height: var(--space-4);
    max-width: var(--space-4);
    max-height: var(--space-4);
    border-radius: var(--radius-full);
    object-fit: cover;
    font-size: var(--font-size-11);
    font-weight: 500;
    line-height: 1;
}

.gc-three-col-subheader__owner:hover {
    opacity: 0.85;
}

.gc-three-col-subheader__owner:active {
    transform: scale(0.96);
}

.gc-three-col-subheader__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Icon-only actions — glass circles (Share, ⋯).
 * Специфичность > dropdown.css (грузится позже): .gc-three-col-subheader + .gc-btn. */
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-btn:is(.gc-btn-icon, .gc-btn-icon-sm),
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-btn.gc-btn-bordered:is(.gc-btn-icon, .gc-btn-icon-sm),
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-dropdown > .gc-btn.gc-dropdown-toggle:is(
    .gc-btn-icon,
    .gc-btn-icon-sm,
    .gc-dropdown-toggle-icon
) {
    width: var(--gc-mobile-nav-title-icon-size);
    height: var(--gc-mobile-nav-title-icon-size);
    min-width: var(--gc-mobile-nav-title-icon-size);
    min-height: var(--gc-mobile-nav-title-icon-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--gc-mobile-nav-title-pill-bg);
    backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    -webkit-backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: var(--gc-subheader-control-shadow, var(--gc-mobile-nav-icon-shadow));
    color: var(--text-primary);
    --gc-btn-hairline: 0 0 #0000;
    --gc-btn-elevation: 0 0 #0000;
}

.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-btn:is(.gc-btn-icon, .gc-btn-icon-sm):hover,
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-btn.gc-btn-bordered:is(.gc-btn-icon, .gc-btn-icon-sm):hover,
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-dropdown > .gc-btn.gc-dropdown-toggle:is(
    .gc-btn-icon,
    .gc-btn-icon-sm,
    .gc-dropdown-toggle-icon
):hover {
    background: var(--gc-subheader-hover-bg);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-btn:is(.gc-btn-icon, .gc-btn-icon-sm) i,
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-btn.gc-btn-bordered:is(.gc-btn-icon, .gc-btn-icon-sm) i,
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-dropdown > .gc-btn.gc-dropdown-toggle:is(
    .gc-btn-icon,
    .gc-btn-icon-sm,
    .gc-dropdown-toggle-icon
) i {
    font-size: var(--font-size-16);
    line-height: 1;
}

/*
 * Labeled glass pill — SecondaryAction + MenuTrigger («Действия» / «Добавить»).
 * Бить .gc-dropdown > .gc-btn.gc-btn-bordered… из dropdown.css (sm-radius / без shadow).
 */
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-btn.gc-btn-bordered.gc-btn-sm:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs),
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs) {
    height: var(--gc-mobile-nav-title-icon-size);
    min-height: var(--gc-mobile-nav-title-icon-size);
    padding: 0 var(--space-3);
    gap: var(--space-1-5);
    box-sizing: border-box;
    background: var(--gc-mobile-nav-title-pill-bg);
    backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    -webkit-backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: var(--gc-subheader-control-shadow, var(--gc-mobile-nav-icon-shadow));
    color: var(--text-primary);
    --gc-btn-hairline: 0 0 #0000;
    --gc-btn-elevation: 0 0 #0000;
}

.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-btn.gc-btn-bordered.gc-btn-sm:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs):hover,
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs):hover,
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs)[aria-expanded="true"] {
    background: var(--gc-subheader-hover-bg);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs) > .ph-dots-three-outline {
    font-size: var(--font-size-16);
    line-height: 1;
}

/* PrimaryAction CTA — высота/radius как chrome; fill остаётся у .gc-btn-primary (инверсия темы) */
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-btn.gc-btn-primary.gc-btn-sm,
.gc-three-col-subheader .gc-three-col-subheader__actions > .gc-dropdown > .gc-btn.gc-btn-primary.gc-dropdown-toggle {
    height: var(--gc-mobile-nav-title-icon-size);
    min-height: var(--gc-mobile-nav-title-icon-size);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    box-sizing: border-box;
}

/* Add/Create: plus + подпись; <992 — primary кружок, не glass-select.
 * Потомки `__actions`, не только `>`: sheet / `.gc-dropdown` / glow не ломают селектор. */
.gc-three-col-subheader .gc-three-col-subheader__add.gc-dropdown-toggle .gc-dropdown-caret {
    display: none;
}

@media (max-width: 991.98px) {
    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn.gc-btn-sm.gc-three-col-subheader__add,
    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions a.gc-btn.gc-btn-sm[href*="/create"],
    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn.gc-btn-sm[aria-label*="Добавить"] {
        width: var(--gc-mobile-nav-title-icon-size);
        min-width: var(--gc-mobile-nav-title-icon-size);
        height: var(--gc-mobile-nav-title-icon-size);
        min-height: var(--gc-mobile-nav-title-icon-size);
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: var(--radius-full);
        overflow: hidden;
    }

    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn.gc-btn-primary.gc-three-col-subheader__add,
    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions a.gc-btn.gc-btn-primary[href*="/create"],
    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn.gc-btn-primary[aria-label*="Добавить"] {
        color: var(--gc-btn-primary-fg);
    }

    .gc-three-col-subheader .gc-three-col-subheader__cta-label,
    .gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn[aria-label*="Добавить"] .gc-dropdown-caret,
    .gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn[aria-label*="Добавить"] .gc-caret {
        display: none;
    }

    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn.gc-three-col-subheader__add i,
    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions a.gc-btn[href*="/create"] i,
    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn[aria-label*="Добавить"] .ph-plus,
    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn[aria-label*="Добавить"] i.ph-plus {
        font-size: var(--font-size-18);
        line-height: 1;
        color: var(--gc-btn-primary-fg);
    }

    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions a.gc-btn.gc-btn-primary[href*="/create"]:not(:has(.ph-plus))::before,
    .gc-three-col-subheader.gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn.gc-btn-primary[aria-label*="Добавить"]:not(:has(.ph-plus))::before {
        content: "\e3d4";
        font-family: "Phosphor-Bold";
        font-size: var(--font-size-18);
        line-height: 1;
        color: var(--gc-btn-primary-fg);
        speak: never;
    }
}

/* Участники — glass pill control (facepile + count) */
.gc-three-col-subheader__participants {
    --gc-subheader-facepile-ring: var(--surface-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
    height: var(--gc-mobile-nav-title-icon-size);
    padding: 0 var(--space-3) 0 var(--space-2);
    box-sizing: border-box;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--gc-mobile-nav-title-pill-bg);
    backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    -webkit-backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    box-shadow: var(--gc-subheader-control-shadow, var(--gc-mobile-nav-icon-shadow));
    cursor: pointer;
    font: inherit;
    text-align: start;
    text-decoration: none;
    color: var(--text-primary);
    transition-property: transform, background-color, color;
    transition-duration: var(--transition-fast);
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.gc-three-col-subheader__participants:hover {
    --gc-subheader-facepile-ring: var(--gc-subheader-hover-bg);
    background: var(--gc-subheader-hover-bg);
    color: var(--text-primary);
}

.gc-three-col-subheader__participants:active {
    transform: scale(0.96);
}

/* Glass controls keep the same shadow in every pointer state. */
.gc-three-col-subheader .gc-btn-bordered {
    --gc-btn-soft-hover-shadow: var(--gc-subheader-control-shadow, var(--gc-mobile-nav-icon-shadow));
}

.gc-three-col-subheader .gc-btn.gc-btn-bordered:is(:active, [aria-expanded="true"]),
.gc-three-col-subheader .gc-btn.gc-three-col-subheader__back:active,
.gc-three-col-subheader .gc-btn.gc-three-col-subheader__notify:active {
    background: var(--gc-subheader-hover-bg);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/*
 * Keyboard focus — один паттерн для back / notify / owner / facepile / tabs / actions / CTA.
 * Hover-fill не заменяет кольцо. html бьёт control-glow и .gc-btn:focus-visible { outline: none }.
 * Не трогаем .gc-dropdown-item (меню внутри Blade-dropdown).
 */
.gc-three-col-subheader :is(
    .gc-btn,
    .gc-three-col-subheader__owner,
    .gc-three-col-subheader__participants,
    .gc-tab-link
):focus:not(:focus-visible) {
    outline: none;
}

html .gc-three-col-subheader :is(
    .gc-btn,
    .gc-three-col-subheader__owner,
    .gc-three-col-subheader__participants,
    .gc-tab-link
):focus-visible,
html:not([data-gc-control-glow='off']) .gc-three-col-subheader .gc-dropdown > .gc-btn.gc-dropdown-toggle.gc-card-glow-shell--control:focus-visible,
html .gc-three-col-subheader .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs):focus-visible,
html .gc-three-col-subheader .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:is(.gc-btn-icon, .gc-btn-icon-sm, .gc-btn-icon-xs):focus-visible {
    outline: var(--gc-subheader-focus-outline);
    outline-offset: var(--gc-subheader-focus-outline-offset);
}

html .gc-three-col-subheader :is(
    .gc-btn.gc-three-col-subheader__back,
    .gc-btn.gc-three-col-subheader__notify,
    .gc-three-col-subheader__participants
):focus-visible,
html .gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn:not(.gc-btn-primary):focus-visible,
html:not([data-gc-control-glow='off']) .gc-three-col-subheader .gc-btn:not(.gc-btn-primary).gc-card-glow-shell--control:focus-visible,
html .gc-three-col-subheader .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:not(.gc-btn-icon):not(.gc-btn-icon-sm):not(.gc-btn-icon-xs):focus-visible,
html .gc-three-col-subheader .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle:is(.gc-btn-icon, .gc-btn-icon-sm, .gc-btn-icon-xs):focus-visible {
    box-shadow: var(--gc-subheader-control-shadow, var(--gc-mobile-nav-icon-shadow));
}

html .gc-three-col-subheader .gc-three-col-subheader__actions .gc-btn.gc-btn-primary:focus-visible,
html:not([data-gc-control-glow='off']) .gc-three-col-subheader .gc-btn.gc-btn-primary.gc-card-glow-shell--control:focus-visible {
    box-shadow: var(--gc-btn-hairline), var(--gc-btn-elevation);
}

.gc-three-col-subheader__avatar-stack {
    padding-left: 0;
    flex-shrink: 0;
}

/* Специфичность > .gc-avatar-stack img (border 2px surface-panel) */
.gc-three-col-subheader__avatar-stack > :is(.gc-img-slot, img, .gc-avatar, .gc-avatar-24, .gc-list-avatar-fallback) {
    box-sizing: border-box;
    border: none;
    /* Кольцо = фон pill-контрола (через переменную на кнопке) */
    box-shadow: 0 0 0 1.5px var(--gc-subheader-facepile-ring);
    pointer-events: none;
    transition-property: box-shadow;
    transition-duration: var(--transition-fast);
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Facepile subheader: левый поверх правого (отдельно от карточек / DOM-порядка) */
.gc-three-col-subheader__avatar-stack > *:nth-child(1) { z-index: 3; }
.gc-three-col-subheader__avatar-stack > *:nth-child(2) { z-index: 2; }
.gc-three-col-subheader__avatar-stack > *:nth-child(3) { z-index: 1; }

.gc-three-col-subheader__avatar-stack > .gc-list-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-11);
    font-weight: 500;
    line-height: 1;
}

.gc-three-col-subheader__participants-count {
    font-size: var(--font-size-13);
    font-weight: 500;
    line-height: var(--type-ui-meta-line-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline-end: var(--space-1);
}

/* Solo facepile (один аватар) не несёт стека — прячем даже если JS ещё отдал пилюлю */
.gc-three-col-subheader__participants:not(:has(.gc-avatar-stack > :nth-child(2))) {
    display: none;
}

@media (max-width: 991.98px) {
    .gc-three-col-subheader__participants,
    .gc-three-col-subheader__participants-count,
    .gc-three-col-subheader__participants .gc-skeleton-event-subheader-participants-count {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gc-three-col-subheader__owner,
    .gc-three-col-subheader__participants {
        transition-property: background-color, color, opacity;
    }

    .gc-three-col-subheader__owner:active,
    .gc-three-col-subheader__participants:active {
        transform: none;
    }
}

.gc-three-col-subheader__tabs {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
}

.gc-three-col-subheader__tabs .gc-nav-bar,
.gc-three-col-subheader__tabs .gc-nav-track {
    flex: 1 1 auto;
    min-width: 0;
}

/* Section nav (profile lists): Blade analog `.gc-nav-track`. Desktop — app rail. */
@media (min-width: 992px) {
    .gc-three-col-subheader__tabs--adaptive {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .gc-three-col-subheader--has-tabs.gc-three-col-subheader:has(.gc-three-col-subheader__tabs--adaptive) {
        height: auto;
    }
}

/* Page Layout - управляет gap между секциями страницы (header и контент) */
.page-layout {
    display: flex;
    flex-direction: column;
    gap: var(--layout-section-gap);
    /* padding убран - управляется через page-container-flush */
}

@media (max-width: 767.98px) {
    .page-layout {
        gap: var(--layout-section-gap);
    }
}

/* Центрированный контент (для форм редактирования и т.п.) */
.page-content-centered {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ===================================
   Catalog Layout (Grid с сайдбаром)
   =================================== */

.catalog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* Desktop (≥1280): контент + вторичный сайдбар; --page — левый nav с 992 */
@media (min-width: 1280px) {
    .catalog-layout:not(.catalog-layout--page) {
        grid-template-columns: 1fr var(--layout-catalog-sidebar-width);
        gap: var(--space-6);
    }

    .catalog-layout.sidebar-left:not(.catalog-layout--page) {
        grid-template-columns: var(--layout-catalog-sidebar-width) 1fr;
    }

    .catalog-layout:not(.catalog-layout--page):has(.catalog-sidebar-wide):not(.sidebar-left) {
        grid-template-columns: 1fr var(--layout-catalog-sidebar-wide-width);
    }

    .catalog-layout.sidebar-left:not(.catalog-layout--page):has(.catalog-sidebar-wide) {
        grid-template-columns: var(--layout-catalog-sidebar-wide-width) 1fr;
    }

    .catalog-layout.catalog-layout--without-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Планшет (992–1279): одна колонка — main без правого rail */
@media (min-width: 992px) and (max-width: 1279px) {
    .catalog-layout:not(.catalog-layout--page) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.catalog-main {
    min-width: 0;
    padding: 0; /* Без боковых отступов - горизонтальный инсет у gc-panel-header / gc-panel-content */
    display: flex;
    flex-direction: column;
    gap: var(--layout-section-gap);
}

.catalog-layout--without-sidebar .catalog-main {
    grid-column: 1 / -1;
}

/* Detail pages — тот же section-gap, что и у .catalog-main */
.catalog-main--content {
    gap: var(--layout-section-gap);
}

.catalog-sidebar {
    min-width: 0;
    padding: 0 var(--space-4);
}

@media (min-width: 992px) {
    .catalog-sidebar {
        padding: 0;
        background: transparent;
        border-radius: 0;
        overflow: visible;
        position: sticky;
        top: var(--layout-context-rail-sticky-top);
        align-self: start;
        max-height: none;
        z-index: 1;
    }

    /* Тень на .catalog-nav (styles.css); скролл — на nav, не на aside (не клипировать shadow) */
    .catalog-sidebar:not(.profile-sidebar-sections) > .catalog-nav {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .catalog-sidebar:not(.profile-sidebar-sections) > .catalog-nav[data-gc-scroll-pass="1"] {
        overflow: visible;
    }

    /*
     * html.gc-root-scroll-lock ломает sticky на .split-left; bridge фиксирует .sidebar-content,
     * aside держит min-height — колонка не схлопывается, лоадаут не прыгает.
     */
    body.modal-open .split-left > .sidebar-content.gc-sticky-sidebar-frozen,
    body.modal-open .catalog-sidebar.gc-sticky-sidebar-frozen {
        position: fixed !important;
        top: var(--gc-sticky-sidebar-fixed-top) !important;
        left: var(--gc-sticky-sidebar-fixed-left) !important;
        width: var(--gc-sticky-sidebar-fixed-width) !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        margin: 0 !important;
        z-index: 0 !important;
        pointer-events: none;
    }
}

@media (max-width: 1279px) {
    .catalog-layout:not(.catalog-layout--page) > .catalog-sidebar {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .catalog-layout:not(.catalog-layout--page) > .catalog-sidebar {
        display: block;
    }

    /*
     * Context rail в catalog-layout: stretch + sticky на ячейке с top = линия контента.
     * (legacy top: 67px при app rail сдвигал rail ниже main — см. event-show-constructor.css)
     */
    .catalog-layout:not(.catalog-layout--page) {
        align-items: stretch;
    }

    .catalog-layout:not(.catalog-layout--page) > .catalog-sidebar {
        top: var(--layout-context-rail-sticky-top);
    }

    /* split-layout (event loadout и др.): sticky на .sidebar-content, aside — stretch-контейнер */
    .split-layout {
        align-items: stretch;
    }

    .split-layout > .split-left {
        position: relative;
        top: auto;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        overflow: visible;
        z-index: 1;
    }

    .split-layout > .split-left > .sidebar-content {
        position: sticky;
        top: var(--layout-context-rail-sticky-top);
        align-self: flex-start;
        width: 100%;
        flex-shrink: 0;
    }

    .split-layout > .split-left:not(:has(> .sidebar-content)) {
        position: sticky;
        top: var(--layout-context-rail-sticky-top);
        align-self: start;
        display: block;
    }
}

/* ===================================
   Context rail fallback (<1280)
   Контент вторичного rail в main, пока колонка скрыта (планшет 992–1279 и mobile).
   Вместо d-lg-none / d-none d-lg-flex для дублирования rail.
   =================================== */

.gc-until-layout-rail {
    display: block;
}

.gc-until-layout-rail-flex {
    display: flex;
}

@media (min-width: 1280px) {
    .gc-until-layout-rail,
    .gc-until-layout-rail-flex {
        display: none !important;
    }
}

/* Desktop (≥1280): контент, который дублируется в rail-fallback на <1280 */
.gc-from-layout-rail,
.gc-from-layout-rail-flex {
    display: none !important;
}

@media (min-width: 1280px) {
    .gc-from-layout-rail {
        display: block !important;
    }

    .gc-from-layout-rail-flex {
        display: flex !important;
    }

    /* display:contents на desktop — обёртка hero не ломает flex-gap main */
    .event-show-intro-cluster.gc-from-layout-rail {
        display: contents !important;
    }
}

/* Legacy: d-lg-none на fallback-блоках — показывать на планшете, скрывать с rail */
@media (min-width: 992px) and (max-width: 1279px) {
    .channel-feed-mobile-rail.d-lg-none,
    .exercise-layout-rail-fallback.d-lg-none {
        display: block !important;
    }
}

@media (max-width: 991.98px) {
    .catalog-layout--page > .catalog-sidebar {
        display: none;
    }

    /* Секции на всю ширину вьюпорта; горизонтальные поля у контента задают gc-panel-header / gc-panel-content */
    .catalog-main {
        order: 1;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Полноэкранный лейаут каталога (Notion-style):
   sidebar прибит к левому краю, без внешнего max-width. */
.catalog-layout--page {
    width: 100%;
    gap: 0;
}

@media (min-width: 992px) {
    .catalog-layout--page {
        grid-template-columns: 240px 1fr;
        min-height: calc(100vh - 56px);
        align-items: start;
    }

    .catalog-layout--page .catalog-sidebar {
        background: var(--surface-panel);
        border: none;
        border-right: 1px solid var(--border-subtle);
        border-radius: 0;
        overflow: visible;
        overflow-y: auto;
        padding: var(--space-4) 0;
        position: sticky;
        top: 56px;
        height: calc(100vh - 56px);
        max-height: none;
        align-self: start;
    }

    .catalog-layout--page .catalog-main {
        padding: var(--space-4) var(--space-6);
    }
}

/* ===================================
   Catalog Header - определен в catalog.css
   =================================== */
/* Стили .catalog-header и дочерних элементов см. в catalog.css */

/* ===================================
   Mobile Navigation Offset
   Два режима — как у мобильной шапки: без табов / с табами (variables.css --gc-mobile-nav-*).
   =================================== */

.gc-mobile-nav-offset {
    /* Компактная шапка: safe-area + title_bar (64px) */
    height: calc(env(safe-area-inset-top, 0px) + var(--gc-mobile-nav-compact-inner-height));
}

.gc-mobile-nav-offset-with-tabs {
    /* Расширенная шапка: safe-area + title_bar (64) + nav_bar (48) = 112px */
    height: calc(env(safe-area-inset-top, 0px) + var(--gc-mobile-nav-expanded-inner-height));
}

.gc-mobile-nav-offset-level-2 {
    height: calc(env(safe-area-inset-top, 0px) + var(--gc-mobile-nav-compact-inner-height));
}

@media (min-width: 992px) {
    .gc-mobile-nav-offset,
    .gc-mobile-nav-offset-with-tabs,
    .gc-mobile-nav-offset-level-2 {
        height: 0;
    }
}

/* ===================================
   Сайт: оболочка, футер, юридические страницы
   =================================== */

/* app.blade: body > .gc-app-frame > (.gc-app-chrome | .gc-app-shell). */
.gc-app-frame {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gc-app-chrome {
    flex: 0 0 auto;
    min-width: 0;
}

/*
 * Режим без chrome (join и др.): вёрстка не рендерит навбары, но body всё ещё получает
 * padding-top/bottom из navbar.css под фиксированные бары — сбрасываем.
 */
html.gc-hide-app-chrome body {
    --gc-body-pad-top: 0px;
    --gc-body-pad-bottom: 0px;
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 992px) {
    html.gc-hide-app-chrome body {
        padding-top: 0 !important;
    }
}

.gc-app-shell {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Тело shell */
.gc-app-shell > .gc-app-body {
    min-width: 0;
}

/* Основной блок: classic — высота по контенту; Inertia — flex-grow на колонку scroll (ниже) */
.gc-app-main {
    --gc-app-main-inset-x: 0px;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--gc-app-content-bg);
}

/*
 * Inertia viewport shell — один скролл-контракт на весь апп.
 * Документ не скроллится. Колонки: .gc-app-main__scroll, .gc-context-rail__scroll.
 * Inertia save/restore: [scroll-region] на Viewport (GcScrollArea scrollRegion).
 * Classic Blade (без body.inertia-shell) — по-прежнему документ-скролл.
 * Спека: docs/ui-kit/THREE_COL_LAYOUT.md § Scroll
 */
html:has(body.inertia-shell) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    scrollbar-gutter: auto;
    overscroll-behavior: none;
}

body.inertia-shell {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
    /* Документ не скроллится: pad-bottom на body — полоса 100dvh (док канала ~156px). */
    padding-bottom: 0 !important;
}

/*
 * iOS standalone PWA: 100dvh / -webkit-fill-available не включают home indicator,
 * а overflow:hidden на html → #app → .gc-app-shell обрезает padding таббара
 * (env(safe-area-inset-bottom)) — жёсткий клип и пустая полоса снизу.
 * Высота оболочки = dvh + inset, чтобы clip-box покрыл cover-viewport.
 */
html.gc-web-app-standalone:has(body.inertia-shell) {
    --gc-visual-viewport-bottom-shift: 0px;
    --gc-standalone-shell-height: calc(100dvh + env(safe-area-inset-bottom, 0px));
    height: var(--gc-standalone-shell-height);
    min-height: var(--gc-standalone-shell-height);
    max-height: none;
}

html.gc-web-app-standalone body.inertia-shell,
html.gc-web-app-standalone body.inertia-shell > #app {
    height: var(--gc-standalone-shell-height);
    min-height: var(--gc-standalone-shell-height);
    max-height: none;
}

html.gc-web-app-standalone .gc-mobile-nav-bottom,
html.gc-web-app-standalone .gc-mobile-nav-pinned-fixed {
    transform: none;
}

html.gc-web-app-standalone.gc-mobile-chrome-scroll-hidden .gc-mobile-nav-bottom:not(.gc-nav-preview),
html.gc-web-app-standalone .gc-mobile-nav-bottom.gc-mobile-nav-bottom--hidden {
    transform: translate3d(
        0,
        calc(100% + var(--gc-mobile-bottom-nav-inset-x) + env(safe-area-inset-bottom, 0px) + 2px),
        0
    );
    pointer-events: none;
}

/*
 * Inertia 3 `@inertia`: payload — sibling `<script data-page="app" type="application/json">`,
 * корень UI — `#app`. Не вешать display/flex на [data-page]: UA прячет script,
 * author display:flex показывает JSON текстом на каждой странице.
 */
body.inertia-shell > #app {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.inertia-shell .gc-app-frame,
body.inertia-shell .gc-app-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* overflow не hidden: иначе clip фиксированных app/context rail (margin-gutter) */
body.inertia-shell .gc-app-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.inertia-shell .gc-app-body > .gc-app-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

body.inertia-shell .gc-app-main__scroll {
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
    /* Overlay у края колонки: bleed в padding-inline main, контент остаётся в gutter */
    margin-inline: calc(-1 * var(--gc-app-main-inset-x, 0px));
}

body.inertia-shell .gc-app-main__scroll.gc-scroll-area {
    overflow: hidden;
}

@media (min-width: 992px) {
    /* Radix sets top/bottom inline; margins inset only the track, not the page. */
    body.inertia-shell .gc-app-main__scroll > .gc-scroll-area__scrollbar[data-orientation='vertical'] {
        margin-top: var(--space-2);
        margin-bottom: var(--space-2);
    }
}

/* Scroll-колонка: явная высота flex-родителя → % min-height у контента внутри viewport */
body.inertia-shell .gc-app-main:not(.gc-app-main--fill) > .gc-app-main__scroll.gc-scroll-area {
    height: 100%;
    max-height: 100%;
}

body.inertia-shell .gc-app-main:not(.gc-app-main--fill) .gc-app-main__scroll.gc-scroll-area--vertical > .gc-scroll-area__viewport {
    min-height: 100%;
}

body.inertia-shell .gc-app-main__scroll.gc-scroll-area--vertical > .gc-scroll-area__viewport > div {
    padding-inline: var(--gc-app-main-inset-x, 0px);
}

/*
 * Fill: страница занимает остаток колонки, shell не скроллится
 * (iframe lab — один скролл внутри кадра, не overlay shell).
 */
body.inertia-shell .gc-app-main--fill .gc-app-main__scroll.gc-scroll-area--vertical > .gc-scroll-area__viewport {
    overflow: hidden;
}

body.inertia-shell .gc-app-main--fill .gc-app-main__scroll.gc-scroll-area--vertical > .gc-scroll-area__viewport > div {
    height: 100%;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
}

body.inertia-shell .gc-app-main--fill .gc-app-main__page,
body.inertia-shell .gc-app-main--fill .gc-app-main__page--fill {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.inertia-shell .gc-app-main--fill .gc-app-main__page > .gc-three-col-subheader {
    flex-shrink: 0;
}

body.inertia-shell .gc-app-main--fill .gc-app-main__scroll > .gc-scroll-area__scrollbar {
    display: none;
}

/*
 * page-stack: футер у низа колонки на короткой странице (grid/flex, не position: sticky).
 * Inertia: stack hidden={showSkeleton} — футер только после загрузки.
 * Radix ScrollArea: viewport > div > stack — % min-height только если inner div = flex/grid + min-height 100%.
 */
.gc-app-main__page-stack {
    box-sizing: border-box;
    width: 100%;
}

/* Inner Radix wrapper — полная высота viewport scroll-колонки */
body.inertia-shell .gc-app-main:not(.gc-app-main--fill) .gc-app-main__scroll.gc-scroll-area--vertical > .gc-scroll-area__viewport > div {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    min-height: 100%;
    box-sizing: border-box;
}

body.inertia-shell .gc-app-main__scroll.gc-scroll-area--vertical > .gc-scroll-area__viewport > div > .gc-app-main__page-stack {
    flex: 1 1 auto;
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: stretch;
    width: 100%;
    box-sizing: border-box;
}

/*
 * `hidden` = UA `display: none`, но правило выше задаёт `display: grid` —
 * атрибут не прячет stack. Футер (1fr auto, min-height 100%) липнет к низу
 * колонки на время визита, потом уезжает с контентом.
 */
body.inertia-shell .gc-app-main__scroll.gc-scroll-area--vertical > .gc-scroll-area__viewport > div > .gc-app-main__page-stack[hidden] {
    display: none;
}

body.inertia-shell .gc-app-main__page-stack > .gc-app-main__page {
    min-height: 0;
    min-width: 0;
}

/* Visit skeleton — sibling hidden page-stack; не растягивать на min-height 100% колонки */
body.inertia-shell .gc-app-main__page--visit {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    height: auto;
}

body.inertia-shell .gc-app-main__page-stack > .gc-site-footer {
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 0;
    padding-inline: 0;
}

/*
 * <992: .gc-site-footer скрыт, документ Inertia не скроллится (padding-bottom на body = 0).
 * Клиренс конца ленты — на колонке (stack / visit-кости), не на футере.
 * Лента канала с compose-доком задаёт свой pad на .channel-posts-main (posts.css).
 */
@media (max-width: 991.98px) {
    html:not(.gc-hide-app-chrome) body.inertia-shell:not(:has(.channel-feed-mobile-dock.has-compose)) .gc-app-main__page-stack,
    html:not(.gc-hide-app-chrome) body.inertia-shell:not(:has(.channel-feed-mobile-dock.has-compose)) .gc-app-main__page--visit {
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    }

    html:not(.gc-hide-app-chrome) body.inertia-shell:has(.gc-mobile-nav-bottom):not(:has(.channel-feed-mobile-dock.has-compose)) .gc-app-main__page-stack,
    html:not(.gc-hide-app-chrome) body.inertia-shell:has(.gc-mobile-nav-bottom):not(:has(.channel-feed-mobile-dock.has-compose)) .gc-app-main__page--visit {
        /* --gc-body-pad-bottom = высота таббара, уже с safe-area */
        padding-bottom: calc(var(--space-6) + var(--gc-body-pad-bottom, 0px));
    }
}

/* Classic (document scroll): shell flex-grow + stack min-height viewport */
body:not(.inertia-shell) .gc-app-frame {
    flex: 1 1 auto;
}

body:not(.inertia-shell) .gc-app-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

body:not(.inertia-shell) .gc-app-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

body:not(.inertia-shell) .gc-app-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

body:not(.inertia-shell) .gc-app-main__page-stack {
    flex: 1 1 auto;
    min-height: calc(100vh - var(--gc-body-pad-top, 0px) - var(--gc-body-pad-bottom, 0px));
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: stretch;
    width: 100%;
    box-sizing: border-box;
}

body:not(.inertia-shell) .gc-app-main__page-stack > .gc-app-main__page {
    min-height: 0;
    min-width: 0;
}

/* F5 boot overlay: колонка без Radix — колесо, без OS-gutter */
body.inertia-shell .gc-app-body > .gc-app-main:not(:has(.gc-scroll-area)) {
    overflow-y: auto;
    scrollbar-width: none;
}

body.inertia-shell .gc-app-body > .gc-app-main:not(:has(.gc-scroll-area))::-webkit-scrollbar {
    display: none;
}

/*
 * Context rail — правый chrome (weapon show и др.), симметрия app rail слева.
 * Fixed к правому краю viewport; сдвигает .gc-app-main (и subheader внутри).
 * Содержимое flush (без padding на __scroll), как gc-panel--flush.
 */
/*
 * ─── Context rail module (ContextRailModule.jsx) ───
 * Секция на базе .catalog-nav без «карточки»: transparent + без рамки
 * (THREE_COL_LAYOUT § Context rail — Index catalog-nav / ContextRailModule).
 * Шапка (title + count + action), тело — строки / чипы / empty, flush внизу.
 */
.catalog-nav.gc-context-rail-module {
    --gc-context-rail-module-title-inset: var(--space-2);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    --gc-tabs-r-outer: 0px;
}

.gc-context-rail-module__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-1) var(--gc-context-rail-module-title-inset) var(--space-1);
}

.gc-context-rail-module__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-1-5);
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-13);
    font-weight: 600;
    line-height: var(--line-height-list-title);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gc-context-rail-module__title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-context-rail-module__count {
    flex-shrink: 0;
    font-size: var(--font-size-13);
    font-weight: 500;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.gc-context-rail-module__action {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.gc-context-rail-module__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 0;
}

/* Фильтры ленты / брифингов: ряд чипов, не catalog-nav-item.
 * ≥1280 в chrome — inline только у stack (inset-x). Fallback в main — body space/2
 * поверх .catalog-nav inset (= 16px до контента, как inset-x). */
.events-index-rail-nav .gc-context-rail-module__body {
    padding-inline: var(--space-2);
}

.gc-context-rail .events-index-rail-nav .gc-context-rail-module__body,
.gc-context-rail .stages-index-rail-nav .gc-context-rail-module__body,
.stages-index-rail-nav .gc-context-rail-module__body {
    padding-inline: 0;
}

/*
 * /stages rail: stack (≥1280) = inset-x со всех сторон (как profile stack).
 * Inter-group = space/4 (≥2× rows space/2); title→controls = space/2;
 * строки = space/2. GroupTitle без своего padding.
 */
.stages-index-rail-nav .gc-context-rail-module__body {
    gap: var(--space-4);
}

.stages-index-rail-nav > .gc-context-rail-module__header {
    padding-inline: 0;
}

.events-index-rail-nav .catalog-nav-group-title,
.stages-index-rail-nav .catalog-nav-group-title {
    padding-inline: 0;
}

.stages-index-rail-nav .catalog-nav-group-title {
    padding-block: 0;
}

.events-index-rail-nav__chips {
    width: 100%;
}

.stages-index-rail-nav__chips {
    width: 100%;
}

/*
 * Ownership на /stages — kit md pills, outline rest / fill-primary active.
 */
.stages-index-rail-nav__chips .gc-chip {
    background: transparent;
    border-color: var(--border-default);
    color: var(--text-primary);
    box-shadow: none;
}

.stages-index-rail-nav__chips .gc-chip[aria-pressed="true"],
.stages-index-rail-nav__chips .gc-chip[aria-current="page"] {
    background: var(--fill-primary);
    color: var(--text-on-fill-primary);
    border-color: var(--fill-primary);
}

@media (hover: hover) and (pointer: fine) {
    .stages-index-rail-nav__chips a.gc-chip:hover:not([aria-pressed="true"]):not([aria-current="page"]) {
        background: var(--surface-interaction-control-hover);
        border-color: var(--border-default);
        color: var(--text-primary);
    }
}

.stages-index-rail-nav__chips a.gc-chip:active {
    transform: scale(0.96);
}

.stages-index-rail-nav__chip-bone {
    height: calc(var(--space-6) + var(--space-1));
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.stages-index-rail-nav__sort,
.stages-index-rail-nav__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    width: 100%;
}

.stages-index-rail-nav__radios,
.stages-index-rail-nav__checks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.stages-index-rail-nav__radios .gc-radio-wrapper,
.stages-index-rail-nav__checks .gc-checkbox-wrapper {
    margin: 0;
    gap: var(--space-2);
}

.stages-index-rail-nav__sort-bone,
.stages-index-rail-nav__radio-bone,
.stages-index-rail-nav__check-bone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.stages-index-rail-nav__radio-dot {
    width: var(--gc-checkbox-size);
    height: var(--gc-checkbox-size);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.stages-index-rail-nav__check-box {
    width: var(--gc-checkbox-size);
    height: var(--gc-checkbox-size);
    border-radius: var(--gc-checkbox-radius);
    flex-shrink: 0;
}

.stages-index-rail-nav__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.stages-index-rail-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.stages-index-rail-nav__actions .gc-btn {
    flex: 1;
    justify-content: center;
}

.stages-index-rail-nav__action-bone {
    height: var(--gc-btn-sm-min-height);
    width: 100%;
    border-radius: var(--gc-btn-sm-radius, var(--radius-full));
}

/* Строка: media + title/subtitle + trailing (бейдж / caret). Subtitle — одна строка. */
.gc-context-rail-module .catalog-nav-item .catalog-nav-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Frame 44px, не колонка `.catalog-nav-item i` (1.25rem / 15px). */
.gc-context-rail-module .catalog-nav-item .gc-list-media-icon i,
.gc-context-rail-module .catalog-nav-item .gc-list-media-icon :is(.ph, .ph-fill, .ph-bold) {
    width: auto;
    min-width: 0;
    font-size: var(--gc-list-media-glyph-size);
}

.gc-context-rail-module__caret {
    margin-left: auto;
    color: var(--text-secondary);
}

.catalog-nav-item .gc-badge + .gc-context-rail-module__caret {
    margin-left: 0;
}

/* Инсет для не-строк (stat-list, текст) = inset пункта */
.gc-context-rail-module__inset {
    padding-inline: var(--space-2);
    min-width: 0;
}

/* Flush-блок внизу карточки (мозаика настрела): к краям, скругление = внешнее */
.gc-context-rail-module__flush {
    margin-inline: calc(-1 * var(--catalog-nav-inset));
    margin-bottom: calc(-1 * var(--catalog-nav-inset));
    min-width: 0;
    border-radius: 0 0 var(--gc-tabs-r-outer) var(--gc-tabs-r-outer);
    overflow: hidden;
}

.gc-context-rail-module__flush .profile-nastr-strip--rail {
    border-radius: 0;
    border-top: 1px solid var(--border-subtle);
}

.gc-context-rail-module__flush .profile-widget-nastr {
    padding: 0;
    width: 100%;
    min-width: 0;
}

/* Пустой модуль: GcPanelEmptyPlaceholder listShell — без второй карточки, компактнее */
.gc-context-rail-module .gc-panel-empty-placeholder--list-shell .gc-panel-empty-placeholder__card {
    padding: var(--space-4) var(--space-2) var(--space-3);
}

.gc-context-rail {
    display: none;
}

@media (min-width: 1280px) {
    .gc-context-rail {
        /*
         * Inset модулей (карточки, заголовки, catalog-nav): как профиль
         * и карточка мероприятия — zone + space/2 = 16px. Flush-медиа
         * (настрел, обложка канала/эпика) — padding 0, не этот токен.
         */
        --profile-rail-widget-inset-x: calc(var(--gc-list-zone-padding) + var(--space-2));
        --profile-rail-widget-stack-gap: var(--profile-rail-widget-inset-x);
        --gc-context-rail-stack-height: 100vh;
        --gc-context-rail-stack-height: 100dvh;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1024;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: var(--layout-context-rail-chrome-width);
        height: var(--gc-context-rail-stack-height);
        margin: 0;
        padding: 0;
        background: var(--surface-primary);
        border: 0;
        border-left: 1px solid var(--border-subtle);
        border-radius: 0;
        overflow: hidden;
        pointer-events: auto;
    }

    /*
     * Visit-кости — отдельный sibling-aside (AppShell).
     * Ниже live rail (1024) и rail с колонкой (1025), чтобы шимер
     * не рисовался поверх context sidepage.
     */
    .gc-context-rail[aria-hidden="true"] {
        z-index: 1023;
    }

    .gc-context-rail__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
        padding: 0;
        box-sizing: border-box;
        /* Overlay (GcScrollArea) или hidden native — не резервировать OS-gutter */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /*
         * Ловушка слоя: кости (.gc-skeleton animation), glow (isolation),
         * аватары (z-index: 10) иначе участвуют в stacking context рейла
         * и рисуются поверх .gc-context-sidepage-host (z-index: 2).
         * Спека: docs/ui-kit/CONTEXT_SIDEPAGE.md § Слои
         */
        position: relative;
        z-index: 0;
        isolation: isolate;
    }

    .gc-context-rail__scroll::-webkit-scrollbar {
        display: none;
    }

    /* Radix Root: native overflow ломает overlay и даёт gutter даже без overflow */
    .gc-context-rail__scroll.gc-scroll-area {
        overflow: hidden;
    }

    .gc-context-rail__scroll > .gc-scroll-area__viewport,
    .gc-context-rail__scroll > *:not(.gc-scroll-area__scrollbar):not(.gc-scroll-area__corner) {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
    }

    body.inertia-shell .gc-context-rail__scroll.gc-scroll-area {
        flex: 1 1 0;
        height: 100%;
        max-height: 100%;
    }

    /* AppShell wrapper внутри viewport — контент растёт, не сжимается в высоту колонки */
    body.inertia-shell .gc-context-rail__scroll.gc-scroll-area--vertical > .gc-scroll-area__viewport > div > div {
        min-height: min-content;
    }

    /*
     * Flush: секции без внешнего gutter и скругления оболочки —
     * chrome rail уже даёт край (border-l), как gc-panel--flush.
     */
    .gc-context-rail .sidebar-event-info-block,
    .gc-context-rail .sidebar-profile-block,
    .gc-context-rail .event-context-sidebar-loadout,
    .gc-context-rail .sidebar-list-block,
    .gc-context-rail .gc-rail-section-shell,
    .gc-context-rail .profile-rail-people-list.catalog-nav,
    .gc-context-rail .channel-sidebar-card {
        --gc-corner-outer: 0px;
        border-radius: 0;
    }

    /*
     * Index catalog-nav / ContextRailModule в chrome: без «карточки»
     * surface-secondary (THREE_COL_LAYOUT § Context rail). People-list и
     * upcoming канала — свой inset (bleed / --catalog-nav-inset space/1).
     * stages/events soft-module — inset только у stack, иначе двойной
     * padding-block над чипами/табами (0,5,0 бил zeroing 0,3,0).
     */
    .gc-context-rail .catalog-nav:not(.profile-rail-people-list):not(.channel-upcoming-nav):not(.channel-pinned-nav):not(.stages-index-rail-nav):not(.events-index-rail-nav):not(.gc-legal-rail-module) {
        --catalog-nav-inset: var(--space-2);
        --gc-tabs-r-outer: 0px;
        border-radius: 0;
        background: transparent;
        margin-inline: 0;
        width: 100%;
        box-sizing: border-box;
        padding-inline: var(--space-2);
        padding-block: var(--profile-rail-widget-inset-x);
    }

    .gc-context-rail .events-index-context-rail-stack,
    .gc-context-rail .stages-index-context-rail-stack,
    .gc-context-rail .gc-legal-context-rail-stack {
        /* Как profile-show-sidebar-stack: inset-x и block, и inline (не space/2). */
        padding: var(--profile-rail-widget-inset-x);
        gap: var(--profile-rail-widget-stack-gap);
        box-sizing: border-box;
    }

    /* Soft-module в stack: без своего inset — его даёт stack выше. */
    .gc-context-rail .events-index-context-rail-stack > .catalog-nav.gc-context-rail-module,
    .gc-context-rail .stages-index-context-rail-stack > .catalog-nav.gc-context-rail-module,
    .gc-context-rail .gc-legal-context-rail-stack > .catalog-nav.gc-context-rail-module {
        --gc-tabs-r-outer: 0px;
        --catalog-nav-inset: 0px;
        border-radius: 0;
        background: transparent;
        margin-inline: 0;
        width: 100%;
        box-sizing: border-box;
        padding-block: 0;
        padding-inline: 0;
    }

    .gc-app-body:has(> .gc-context-rail) > .gc-app-main {
        margin-right: var(--layout-context-rail-chrome-width);
    }

    .gc-app-body:has(> .gc-context-rail.exercise-show-context-rail) {
        --layout-context-rail-chrome-width: var(--layout-secondary-sidebar-width-wide);
    }

    body:has(.gc-context-rail) .gc-app-shell > .gc-site-footer {
        margin-right: var(--layout-context-rail-chrome-width);
    }

    /*
     * Context sidepage — Telegram-style right column.
     * Слот = тот же .gc-context-rail (chrome, ширина, без оверлея).
     * Спека: docs/ui-kit/CONTEXT_SIDEPAGE.md
     */
    .gc-context-rail--sidepage {
        z-index: 1025;
    }

    .gc-context-rail--sidepage > .gc-context-rail__scroll {
        contain: paint;
    }

    .gc-context-sidepage-host {
        position: absolute;
        inset: 0;
        z-index: 2;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        background: var(--surface-primary);
    }

    .gc-context-sidepage-host--leave {
        pointer-events: none;
    }
}

.gc-context-sidepage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: 100%;
    background: var(--surface-primary);
}

.gc-context-sidepage-host {
        animation: gc-context-sidepage-in var(--transition-base) var(--ease-out) both;
}

.gc-context-sidepage-host--leave {
    animation: gc-context-sidepage-out var(--transition-base) var(--ease-in) both;
    pointer-events: none;
}

.gc-context-sidepage__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex: 0 0 auto;
    height: var(--layout-app-chrome-header-height);
    padding-inline: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    box-sizing: border-box;
}

.gc-context-sidepage__title {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-size: var(--font-size-15);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-context-sidepage__header-identity {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1 1 auto;
}

.gc-context-sidepage__header-identity .gc-list-avatar,
.gc-context-sidepage__header-identity .gc-list-avatar-fallback,
.gc-context-sidepage__header-identity [class*="gc-avatar-"] {
    flex-shrink: 0;
}

.gc-context-sidepage__back,
.gc-context-sidepage__close,
.gc-context-sidepage__header-actions {
    flex: 0 0 auto;
}

.gc-context-sidepage__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
}

.gc-context-sidepage__close {
    margin-inline-start: 0;
}

.gc-context-sidepage__scroll {
    flex: 1 1 auto;
    min-height: 0;
}

/* Viewport inner (Radix table-wrapper) тянется на высоту колонки — empty центрируется */
.gc-context-sidepage__scroll.gc-scroll-area--vertical > .gc-scroll-area__viewport > div {
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column;
}

.gc-context-sidepage__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0;
    padding-inline: var(--gc-inset-padding, var(--space-4));
    padding-block: var(--gc-inset-padding, var(--space-4));
    box-sizing: border-box;
    min-height: 100%;
}

/* Content with its own insets must not receive a second panel inset. */
.gc-context-sidepage__body.gc-responsive-context-panel__body--flush,
.gc-modal .modal-body.gc-responsive-context-panel__body--flush > .gc-modal-content--section {
    padding: 0;
}

/* List-at-edge (товарищи): remainder T/B so hover matches L/R. Empty keeps full inset. */
.gc-context-sidepage__body--list {
    padding-block: var(--gc-inset-hover-edge, calc(var(--space-4) - var(--gc-list-row-padding)));
}

.gc-context-sidepage__body--list:has(.gc-empty-state) {
    padding-block: var(--gc-inset-padding, var(--space-4));
}

/* Шторка <1280: товарищи без .gc-context-sidepage, padding на .gc-modal-content--section. */
.gc-modal-sidepanel .gc-modal-content--section:has(> .gc-context-sidepage__stack--inset-list) {
    padding-inline: var(--gc-inset-padding, var(--space-4));
    padding-block: var(--gc-inset-hover-edge, calc(var(--space-4) - var(--gc-list-row-padding)));
}

.gc-modal-sidepanel .gc-modal-content--section:has(> .gc-context-sidepage__stack--inset-list .gc-empty-state) {
    padding-block: var(--gc-inset-padding, var(--space-4));
}

.gc-context-sidepage__stack {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
}

.gc-context-sidepage__stack--swap {
    --gc-context-sidepage-swap-x: 0;
    animation: gc-context-sidepage-swap var(--transition-base) var(--ease-out) both;
}

.gc-context-sidepage__stack--forward {
    --gc-context-sidepage-swap-x: var(--space-4);
}

.gc-context-sidepage__stack--back {
    --gc-context-sidepage-swap-x: calc(-1 * var(--space-4));
}

.gc-context-sidepage__footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
    position: relative;
    z-index: 2;
}

.gc-context-sidepage__media {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: calc(-1 * var(--gc-inset-padding, var(--space-4))) calc(-1 * var(--gc-inset-padding, var(--space-4))) 0;
    min-width: 0;
}

.gc-context-sidepage__cover {
    margin: 0;
    overflow: hidden;
    background: var(--surface-secondary);
}

.gc-context-sidepage__cover .gc-briefing-img-container,
.gc-context-sidepage__cover .gc-hero-cover-media {
    border-radius: 0;
    aspect-ratio: var(--gc-media-cover-aspect);
}

.gc-context-sidepage__cover-skeleton {
    display: block;
    width: 100%;
    aspect-ratio: var(--gc-media-cover-aspect);
}

.gc-context-sidepage__action-skeleton {
    display: block;
    width: 100%;
    height: var(--gc-btn-height-md, 36px);
    border-radius: var(--radius-8);
}

.gc-context-sidepage__identity > .gc-skeleton-avatar,
.gc-context-sidepage__identity-head > .gc-skeleton-avatar {
    width: 80px;
    height: 80px;
}

.gc-context-sidepage__stack .event-roster-weapon-cards .loadout-weapon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
}

.gc-context-sidepage__media + .gc-context-sidepage__identity,
.gc-context-sidepage__cover + .gc-context-sidepage__identity {
    padding-top: var(--gc-inset-padding, var(--space-4));
}

.gc-context-sidepage__gallery {
    padding: 0 var(--gc-inset-padding, var(--space-4));
    box-sizing: border-box;
    min-width: 0;
}

.gc-context-sidepage__gallery .weapon-show-hero-thumbs {
    --weapon-show-gallery-cols: 2;
}

.gc-context-sidepage__gallery + .gc-context-sidepage__identity {
    padding-top: var(--gc-inset-padding, var(--space-4));
}

.gc-context-sidepage__identity {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--gc-inset-hover-edge, calc(var(--space-4) - var(--gc-list-row-padding)));
}

.gc-context-sidepage__stack,
.gc-context-sidepage__identity,
.gc-context-sidepage__identity-head,
.gc-context-sidepage__identity-links,
.gc-context-sidepage__section,
.gc-context-sidepage__section-body,
.gc-context-sidepage__actions {
    width: 100%;
    min-width: 0;
    align-self: stretch;
    box-sizing: border-box;
}

/* Context sidepage: строки — bleed hover в padding body, иконка/текст на линии секций (LIST_STACK).
   Шторка <1280 — тот же bleed: превью живёт в .gc-modal-sidepanel, не в .gc-context-sidepage. */
.gc-context-sidepage .gc-interactive-row:not(.gc-open-list-tree-block__header),
.gc-context-sidepage .event-info-community,
.gc-context-sidepage .gc-open-list-tree-block,
.gc-modal-sidepanel .gc-context-sidepage__identity-links .gc-interactive-row,
.gc-modal-sidepanel .gc-context-sidepage__stack .gc-interactive-row:not(.gc-open-list-tree-block__header),
.gc-modal-sidepanel .gc-context-sidepage__section .gc-interactive-row:not(.gc-open-list-tree-block__header),
.gc-modal-sidepanel .gc-context-sidepage__section .event-info-community,
.gc-modal-sidepanel .gc-context-sidepage__section .gc-open-list-tree-block {
    box-sizing: border-box;
    width: calc(100% + (2 * var(--gc-inset-row-padding, var(--gc-list-row-padding))));
    max-width: none;
    margin-inline: calc(-1 * var(--gc-inset-row-padding, var(--gc-list-row-padding)));
}

/* Вложенная secondary-панель: bleed ломает радиус/inset (hover клипается родителем) */
.gc-context-sidepage .gc-panel .gc-interactive-row:not(.gc-open-list-tree-block__header),
.gc-context-sidepage .gc-panel .event-info-community,
.gc-modal-sidepanel .gc-panel .gc-interactive-row:not(.gc-open-list-tree-block__header),
.gc-modal-sidepanel .gc-panel .event-info-community {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.gc-context-sidepage__body > .gc-empty-state,
.gc-context-sidepage__stack > .gc-empty-state {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

.gc-context-sidepage__identity-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-self: stretch;
    width: 100%;
    min-width: 0;
}

.gc-context-sidepage__identity-links .gc-interactive-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-self: stretch;
    min-width: 0;
    box-sizing: border-box;
    border-radius: var(--radius-12);
}

.gc-context-sidepage__identity-head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.gc-context-sidepage__identity-head > :first-child {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
}

/* Профиль участника — Telegram User Info: аватар над именем, центр. */
.gc-context-sidepage__identity-head--stack {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
}

.gc-context-sidepage__identity-head--stack .gc-context-sidepage__identity-copy {
    align-items: center;
    flex: 0 1 auto;
    width: 100%;
}

.gc-context-sidepage__identity-head--stack .gc-context-sidepage__name {
    -webkit-line-clamp: 3;
}

.gc-context-sidepage__identity-head--stack .gc-context-sidepage__chips {
    justify-content: center;
}

.gc-context-sidepage__identity-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
}

.gc-context-sidepage__name {
    margin: 0;
    font-size: var(--font-size-18);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

a.gc-context-sidepage__name {
    color: inherit;
    text-decoration: none;
}

a.gc-context-sidepage__name:hover {
    color: inherit;
}

.gc-context-sidepage__meta {
    margin: 0;
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-context-sidepage__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

/* Статус оружия — пилюля в ряду чипов (Figma 2022:8094), не full-bleed полоса над фото. */
.gc-context-sidepage__chips .weapon-card-strip-row {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    min-width: 0;
}

.gc-context-sidepage__chips .weapon-card-strip-pill {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    align-self: auto;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
}

.gc-context-sidepage__chips .weapon-card-strip-type {
    gap: var(--space-1-5);
}

.gc-context-sidepage__chips .weapon-card-strip-type-label {
    flex: 0 1 auto;
}

.gc-context-sidepage__chips .weapon-card-strip-type-heart {
    font-size: var(--font-size-13);
}

.gc-context-sidepage__chips .weapon-card-strip-pill.weapon-card-strip-pill--favorite.weapon-card-strip-pill--muted,
.gc-context-sidepage__chips .weapon-card-strip-pill.weapon-card-strip-pill--favorite {
    --weapon-card-strip-bg: var(--tint-tinted-rose);
    --weapon-card-strip-bg-hover: var(--tint-tinted-rose);
    --weapon-card-strip-bg-active: var(--tint-tinted-rose);
    --weapon-card-strip-text: var(--text-on-tint-tinted);
    color: var(--weapon-card-strip-text);
    border-color: transparent;
    box-shadow: none;
}

/* Ряд с статус-пилюлей: калибр/класс той же высоты, что Figma badges 8×16. */
.gc-context-sidepage__chips:has(.weapon-card-strip-row) .gc-badge {
    --gc-badge-min-height: 0;
    --gc-badge-pad-y: var(--space-2);
    --gc-badge-pad-x: var(--space-4);
    --gc-badge-font: var(--font-size-13);
    --gc-badge-radius: var(--radius-full);
    --gc-badge-line-height: 1.4;
}

.gc-context-sidepage__chips:has(.weapon-card-strip-row) .gc-badge-secondary {
    background: var(--surface-sunken);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.gc-context-sidepage__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block: var(--gc-inset-hover-edge, calc(var(--space-4) - var(--gc-list-row-padding)));
    border-top: 1px solid var(--border-subtle);
}

/* Title sits on the content line; rows below are not at chrome. */
.gc-context-sidepage__section:has(> .gc-context-sidepage__section-title) {
    padding-block: var(--gc-inset-padding, var(--space-4));
}

/* Первая секция после шапки: без линии. Untitled list → remainder; titled → content line. */
.gc-context-sidepage__identity + .gc-context-sidepage__section {
    border-top: none;
    padding-top: var(--gc-inset-hover-edge, calc(var(--space-4) - var(--gc-list-row-padding)));
}

.gc-context-sidepage__identity + .gc-context-sidepage__section:has(> .gc-context-sidepage__section-title) {
    padding-top: var(--gc-inset-padding, var(--space-4));
}

.gc-context-sidepage__section-body {
    min-width: 0;
}

.gc-context-sidepage__section-title {
    margin: 0;
    font-size: var(--font-size-13);
    font-weight: 500;
    color: var(--text-secondary);
}

.gc-context-sidepage__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--gc-inset-padding, var(--space-4));
    border-top: 1px solid var(--border-subtle);
}

.gc-context-sidepage__actions .gc-btn {
    width: 100%;
    justify-content: center;
}

.gc-context-sidepage__footer-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
}

.gc-context-sidepage__footer-actions .gc-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

.gc-context-sidepage .gc-open-list-tree-block,
.gc-modal-sidepanel .gc-context-sidepage__stack .gc-open-list-tree-block {
    --gc-list-open-item-bg: transparent;
    --gc-list-open-item-hover-bg: var(--gc-interactive-hover-bg);
    background: transparent;
    border-radius: var(--radius-12);
    overflow: visible;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {

.gc-context-sidepage .gc-open-list-tree-block:is(:hover, :focus-within),

.gc-modal-sidepanel .gc-context-sidepage__stack .gc-open-list-tree-block:is(:hover, :focus-within) {
    background: var(--gc-interactive-hover-bg);
} }

.gc-context-sidepage .gc-open-list-tree-block:is( :focus-within),

.gc-modal-sidepanel .gc-context-sidepage__stack .gc-open-list-tree-block:is( :focus-within) {
    background: var(--gc-interactive-hover-bg);
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {

.gc-context-sidepage .gc-open-list-tree-block:focus-within:not(:hover),

.gc-modal-sidepanel .gc-context-sidepage__stack .gc-open-list-tree-block:focus-within:not(:hover) {
    background: transparent;
} }

.gc-context-sidepage .gc-open-list-tree-block:focus-within,

.gc-modal-sidepanel .gc-context-sidepage__stack .gc-open-list-tree-block:focus-within {
    background: transparent;
}

.gc-context-sidepage .gc-open-list-tree-block--static,
.gc-modal-sidepanel .gc-context-sidepage__stack .gc-open-list-tree-block--static {
    background: transparent;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {

.gc-context-sidepage .gc-open-list-tree-block--static:is(:hover, :focus-within),

.gc-modal-sidepanel .gc-context-sidepage__stack .gc-open-list-tree-block--static:is(:hover, :focus-within) {
    background: transparent;
} }

.gc-context-sidepage .gc-open-list-tree-block--static:is( :focus-within),

.gc-modal-sidepanel .gc-context-sidepage__stack .gc-open-list-tree-block--static:is( :focus-within) {
    background: transparent;
}

@keyframes gc-context-sidepage-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes gc-context-sidepage-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes gc-context-sidepage-swap {
    from {
        opacity: 0;
        transform: translateX(var(--gc-context-sidepage-swap-x, 0));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gc-context-sidepage-host,
    .gc-context-sidepage-host--leave,
    .gc-context-sidepage__stack--swap {
        animation: none;
    }
}

/*
 * Холст контента (main / footer / page-skeleton overlay).
 * Дефолт — Surface/Page (canvas). Формы: content-surface="primary" на x-layouts.app
 * → класс на <html> с первого paint, без :has и без перебивок каскада.
 */
html {
    --gc-app-content-bg: var(--surface-page);
}

html.gc-content-surface-primary {
    --gc-app-content-bg: var(--surface-primary);
}

/* Футер сайта: без page-max-width контейнера (как three-col subheader) —
   inset на корне. Не ставить width:100% — с margin-left (rail) даёт горизонтальный скролл;
   width:auto у block сам сжимается под margin. */
.gc-site-footer {
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    border-top: none;
    background: var(--gc-app-content-bg);
    padding-inline: var(--layout-content-inset-x);
    padding-left: calc(var(--layout-content-inset-x) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--layout-content-inset-x) + env(safe-area-inset-right, 0px));
    padding-top: var(--space-4);
    /* Снизу чуть больше воздуха над зоной таббара; safe-area для home indicator */
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
    .gc-site-footer {
        padding-top: var(--space-6);
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 991.98px) {
    .gc-site-footer {
        display: none;
    }
}

.gc-site-footer-row {
    width: 100%;
    min-width: 0;
}

.gc-site-footer-row--brand {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

/* Кнопка слева, копирайт справа (противоположный угол) */
.gc-site-footer-row--legal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.gc-site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--text-primary);
    border-radius: var(--radius-8);
    transition: opacity var(--transition-fast) ease;
}

.gc-site-footer-brand:hover {
    opacity: 0.88;
}

.gc-site-footer-brand:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: 3px;
}

.gc-site-footer-logo {
    display: block;
    height: 18px;
    width: auto;
}

.gc-site-footer-copy-inline {
    flex-shrink: 0;
    font-size: var(--font-size-13);
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: end;
}

.gc-site-footer-legal.gc-dropdown,
.gc-auth-legal.gc-dropdown {
    display: inline-block;
}

/* Компактный bordered trigger; остальное — gc-btn-bordered + gc-dropdown-toggle */
.gc-site-footer-legal .gc-site-footer-legal-toggle.gc-dropdown-toggle,
.gc-auth-legal .gc-dropdown-toggle {
    padding: var(--space-1) var(--space-2);
    min-height: calc(var(--space-6) + var(--space-1));
    height: auto;
    font-size: var(--font-size-12);
    line-height: var(--type-ui-meta-line-height, 1.25);
}

/* Юридические страницы */
.gc-legal-shell {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gc-legal-page {
    width: min(100%, 42rem);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.gc-legal-page-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.gc-legal-page-inner {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.gc-legal-page-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gc-legal-page-eyebrow {
    margin: 0;
    font-size: var(--font-size-13);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.gc-legal-page-title {
    margin: 0;
    font-size: var(--font-size-30);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text-primary);
    font-family: var(--font-family-heading);
}

.gc-legal-page-fallback {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.gc-legal-page-card.gc-panel {
    overflow: visible;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
}

.gc-legal-page-card-content.gc-panel-content {
    gap: var(--space-4);
    padding: var(--space-6);
}

.gc-legal-draft.gc-callout {
    border: 1px solid rgba(var(--warning-color-rgb), 0.35);
}

.gc-legal-prose {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gc-legal-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
    scroll-margin-top: var(--space-8);
}

.gc-legal-section:first-child {
    padding-top: 0;
    border-top: none;
}

.gc-legal-section h2 {
    margin: 0;
    font-size: var(--font-size-18);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--text-primary);
    font-family: var(--font-family-heading);
}

.gc-legal-section p {
    margin: 0;
    font-size: var(--font-size-15);
    line-height: 1.65;
    color: var(--text-secondary);
}

.gc-legal-section p strong {
    color: var(--text-primary);
    font-weight: 600;
}

.gc-legal-section ul {
    margin: 0;
    padding-left: 1.25em;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-15);
    line-height: 1.65;
    color: var(--text-secondary);
}

.gc-legal-section a {
    color: var(--accent-link);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.gc-legal-section a:hover {
    color: var(--accent-link-hover);
}

/* Legal rail shell — inset стека = общий index-stack контракт выше (≥1280) */
@media (min-width: 1280px) {
    body.gc-legal-body .gc-auth-split-wrapper--document {
        padding-left: max(var(--gc-auth-split-inset), env(safe-area-inset-left, 0px));
        padding-right: calc(var(--layout-context-rail-chrome-width) + var(--gc-auth-split-inset));
    }

    body.gc-legal-body .gc-auth-footer {
        display: none;
    }

    .gc-legal-page-fallback {
        display: none;
    }

    .gc-legal-context-rail .gc-context-rail__stack {
        padding: 0;
    }
}

@media (max-width: 1279.98px) {
    .gc-legal-context-rail {
        display: none;
    }

    .gc-legal-page-fallback .gc-legal-context-rail-stack {
        padding: var(--space-3);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-16);
        background: var(--surface-primary);
    }
}

@media (max-width: 991px) {
    .gc-legal-page-title {
        font-size: var(--font-size-24);
    }

    .gc-legal-section {
        padding-top: var(--space-4);
    }

    .gc-legal-section h2 {
        font-size: var(--font-size-16);
    }
}

/* ===================================
   Usage Examples
   =================================== */

/*
Example 1: Centered flex container
<div class="gc-flex gc-items-center gc-justify-center gc-h-screen">
    <div>Centered content</div>
</div>

Example 2: Grid layout
<div class="gc-grid gc-grid-cols-3 gc-gap-md">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Example 3: Responsive container
<div class="gc-container gc-mx-auto gc-px-md">
    <p>Content with max-width and centering</p>
</div>

Example 4: Sticky header
<header class="gc-sticky gc-top-0 gc-z-50 gc-w-full">
    <nav>Navigation</nav>
</header>

Example 5: Full-height sidebar
<aside class="gc-w-64 gc-h-screen gc-sticky gc-top-0 gc-overflow-y-auto">
    Sidebar content
</aside>
*/