/* GcInsetList: one content edge, row padding and interaction contract.
   See docs/ui-kit/LIST_STACK.md. Opt-in; existing flush lists are unaffected.
   Tokens also live on context sidepage / sheet so mixed parents share the same hover edge. */
.gc-inset-list {
    --gc-inset-padding: var(--space-4);
    --gc-inset-row-padding: var(--gc-list-row-padding, var(--space-3));
    --gc-inset-hover-edge: calc(var(--gc-inset-padding) - var(--gc-inset-row-padding));
}
/* Rail / sidepage: 6px from chrome is the source; content line = edge + row. */
.gc-inset-list.gc-inset-list--rail,
.gc-context-sidepage,
.gc-modal-sidepanel,
.gc-context-rail {
    --gc-inset-row-padding: var(--gc-list-row-padding, var(--space-3));
    --gc-inset-hover-edge: var(--space-1-5);
    --gc-inset-padding: calc(var(--gc-inset-hover-edge) + var(--gc-inset-row-padding));
}
.gc-inset-list {
    --gc-inset-gap: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: var(--gc-inset-gap);
    min-width: 0;
    padding: var(--gc-inset-padding);
    overflow: visible;
    box-sizing: border-box;
}
.gc-inset-list__title {
    margin: 0 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-12);
    font-weight: 600;
    line-height: 1.5;
}
.gc-inset-list .gc-inset-list__row,
.gc-inset-list.gc-inset-list--rail :is(
    .gc-interactive-row:not(.gc-open-list-tree-block__header):not(.event-info-join-lid-row),
    .catalog-nav-item,
    .event-info-community
) {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    width: calc(100% + 2 * var(--gc-inset-row-padding));
    max-width: none;
    margin-inline: calc(-1 * var(--gc-inset-row-padding));
    padding: var(--gc-inset-row-padding);
    min-height: 48px;
    border: 0;
    border-radius: var(--radius-12);
    background: transparent;
    color: var(--text-primary);
    text-decoration: none;
    text-align: start;
    font: inherit;
    box-sizing: border-box;
    transition: background-color var(--transition-fast);
}

/*
 * Join lid is a primary CTA, not an inset row: no bleed, padding stays inside the fill.
 * Otherwise rest title = --text-primary on Fill/Primary and hover «включает» отступы.
 */
.gc-inset-list.gc-inset-list--rail .event-info-join-stack__lid :is(
    a.gc-interactive-row,
    .gc-interactive-row
),
.gc-inset-list.gc-inset-list--rail .event-info-join-lid-row {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: var(--gc-list-row-padding) var(--space-4);
    min-height: 48px;
    background: transparent;
    color: inherit;
    border-radius: inherit;
}
.gc-inset-list.gc-inset-list--rail .event-info-join-stack__lid :is(.gc-list-title, .sidebar-community-chevron) {
    color: inherit;
}
.gc-inset-list.gc-inset-list--rail .event-info-join-stack__lid .gc-list-meta {
    color: color-mix(in srgb, var(--gc-btn-primary-fg) 78%, transparent);
}
@media (hover: hover) {
    .gc-inset-list.gc-inset-list--rail .event-info-join-stack__lid :is(
        a.gc-interactive-row,
        .gc-interactive-row
    ):hover {
        background: transparent;
        color: inherit;
    }
}

/*
 * Composite transport/crew: bleed the tree-block like a row (LIST_STACK sidepage).
 * Header stays inside — own bleed/hover would be a second, narrower/wider surface.
 */
.gc-inset-list.gc-inset-list--rail .gc-open-list-tree-block {
    --gc-open-list-tree-row-padding: var(--gc-inset-row-padding);
    box-sizing: border-box;
    width: calc(100% + 2 * var(--gc-inset-row-padding));
    max-width: none;
    margin-inline: calc(-1 * var(--gc-inset-row-padding));
    overflow: visible;
}
.gc-inset-list__row:is(label, button, a) { cursor: pointer; }
.gc-inset-list .gc-inset-list__row[data-selected] { background: var(--ui-accent-soft); }
@media (hover: hover) {
    .gc-inset-list .gc-inset-list__row:is(label, button, a):hover,
    .gc-inset-list.gc-inset-list--rail :is(a, button, .interactive):is(
        .gc-interactive-row:not(.gc-open-list-tree-block__header):not(.event-info-join-lid-row),
        .catalog-nav-item,
        .event-info-community
    ):hover {
        background: var(--gc-interactive-hover-bg, var(--surface-elevated));
    }
    .gc-inset-list .gc-inset-list__row[data-selected]:hover { background: var(--ui-accent-soft-strong); }
}
.gc-inset-list .gc-inset-list__row:focus-visible,
.gc-inset-list .gc-inset-list__row:has(input:focus-visible),
.gc-inset-list.gc-inset-list--rail :is(
    .gc-interactive-row:not(.gc-open-list-tree-block__header):not(.event-info-join-lid-row),
    .catalog-nav-item,
    .event-info-community
):focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: -2px;
    background: var(--ui-accent-soft);
}
.gc-inset-list__checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.gc-inset-list__check {
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    height: 20px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-4);
    color: transparent;
    align-self: center;
}
.gc-inset-list__row[data-selected] .gc-inset-list__check {
    background: var(--accent-link);
    border-color: var(--accent-link);
    color: var(--text-on-solid);
}
.gc-inset-list .gc-inset-list__row .gc-list-content { flex: 1; min-width: 0; }
.gc-inset-list .gc-inset-list__row .gc-list-content .gc-list-meta {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.5;
    margin-top: var(--space-1);
}
.gc-inset-list.gc-inset-list--rail {
    --gc-inset-gap: var(--space-2);
    /*
     * Inline: parent keeps --gc-inset-padding, row bleeds its padding → hover inset
     * = --gc-inset-hover-edge (space/1.5 = 6px). Block has no bleed, so padding-block
     * uses the same edge.
     */
    padding-inline: var(--gc-inset-padding);
    padding-block: var(--gc-inset-hover-edge);
}
/* Category kicker + rows: one list, no boxed group. Between clusters — related-group air. */
.gc-inset-list__cluster {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.gc-inset-list__cluster > .gc-inset-list__title {
    margin: 0;
}
.gc-inset-list:has(> .gc-inset-list__cluster),
.gc-inset-list.gc-inset-list--rail:has(> .gc-inset-list__cluster) {
    --gc-inset-gap: var(--space-3);
}
/* Stats and shot chips — content line, no second inset on top of --rail. */
.gc-inset-list.gc-inset-list--rail :is(.weapon-sidebar-stack--show-rail, .stage-show-rail-stack) > .gc-stat-list,
.gc-inset-list.gc-inset-list--rail .weapon-show-rail-shots,
.gc-inset-list.gc-inset-list--rail .gc-stage-sidebar-weapons {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
}
/* Price is static (no row-pad / bleed). Block-start = row-padding so copy sits like row text. */
.gc-inset-list.gc-inset-list--rail .event-info-price {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: var(--gc-inset-row-padding) 0 0;
}
/*
 * Adaptive event about: framed card. Price stays flush on the chrome;
 * entity rows share `.event-show-about-rail-entities` (rail inset).
 * Desktop --rail on the outer block is the inset; wrapper is display:contents.
 */
.event-show-about-rail-entities {
    display: contents;
}
.event-show-rail-fallback-about .gc-inset-list.gc-inset-list--rail {
    padding-inline: 0;
    padding-block: 0;
}
.event-show-rail-fallback-about .event-show-about-rail-entities {
    --gc-inset-row-padding: var(--gc-list-row-padding, var(--space-3));
    --gc-inset-hover-edge: var(--space-1-5);
    --gc-inset-padding: calc(var(--gc-inset-hover-edge) + var(--gc-inset-row-padding));
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--gc-inset-padding);
    padding-block-start: 0;
    padding-block-end: var(--gc-inset-hover-edge);
}
.event-show-rail-fallback-about .gc-inset-list.gc-inset-list--rail .event-show-about-rail-body > :is(
    .gc-interactive-row:not(.gc-open-list-tree-block__header),
    .gc-open-list-tree-block,
    .event-info-community
) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}
.event-show-rail-fallback-about .gc-inset-list.gc-inset-list--rail .event-show-about-rail-entities > :is(
    .gc-interactive-row,
    .event-info-community
),
.event-show-rail-fallback-about .gc-inset-list.gc-inset-list--rail .event-show-about-rail-entities .catalog-nav-item {
    width: calc(100% + (2 * var(--gc-inset-row-padding)));
    max-width: none;
    margin-inline: calc(-1 * var(--gc-inset-row-padding));
    padding: var(--gc-inset-row-padding);
    border-radius: var(--radius-12);
}
.event-show-rail-fallback-about .gc-inset-list.gc-inset-list--rail .event-info-price {
    padding: var(--space-2) var(--space-4);
}
/* Catalog rows and loadout rows use the same parent edge. */
.gc-inset-list--rail .profile-rail-people-list.catalog-nav,
.gc-inset-list--rail .profile-rail-people-rows {
    --catalog-nav-inset: 0px;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible;
}
/* Boxed selection: card chrome around the inset recipe. Storybook Selection; not the class modal. */
.gc-inset-list.gc-inset-list--boxed {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-16);
    background: var(--surface-secondary);
    overflow: hidden;
}
/* Class picker: tab chrome bleeds the list-zone inset (styles.css underline recipe). */
.weapon-class-inset-selector {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}
.weapon-class-inset-selector:has(> .weapon-class-inset-selector__tabs) {
    overflow: hidden;
}
.weapon-class-inset-selector__tabs {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-inline: calc(-1 * var(--gc-list-zone-padding));
    margin-block-start: calc(-1 * var(--gc-list-zone-padding));
    width: calc(100% + (2 * var(--gc-list-zone-padding)));
    max-width: none;
    padding: 0;
    align-self: stretch;
    background: var(--surface-panel);
}
.weapon-class-inset-selector > .gc-inset-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/*
 * None-only (калькулятор): рамка на линии контента модала (zone padding),
 * без второго --rail и без negative bleed в шапку.
 */
.weapon-class-inset-selector:not(:has(> .weapon-class-inset-selector__tabs)):not(:has(.gc-inset-list__cluster)) {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}
.weapon-class-inset-selector:not(:has(> .weapon-class-inset-selector__tabs)) > .gc-inset-list:not(:has(> .gc-inset-list__cluster)) {
    padding: 0;
    overflow: visible;
    flex: 0 0 auto;
}
/* None toggle: frame = ширина контента модала. С кластерами блид на --gc-inset-padding, не row. */
.weapon-class-inset-selector__none {
    margin: 0 0 var(--space-3);
    min-width: 0;
}
.weapon-class-inset-selector__none .gc-toggle-container.gc-toggle-inline,
.weapon-class-inset-selector__none .gc-toggle-container.gc-toggle-inline:has(.gc-toggle-meta) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-block: 0;
    padding: var(--gc-inset-row-padding, var(--space-3));
    min-height: 48px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-12);
    background: transparent;
    gap: 0;
    box-sizing: border-box;
}
.gc-inset-list--rail:has(> .gc-inset-list__cluster) .weapon-class-inset-selector__none .gc-toggle-container.gc-toggle-inline,
.gc-inset-list--rail:has(> .gc-inset-list__cluster) .weapon-class-inset-selector__none .gc-toggle-container.gc-toggle-inline:has(.gc-toggle-meta) {
    width: calc(100% + 2 * var(--gc-inset-padding));
    margin-inline: calc(-1 * var(--gc-inset-padding));
}
.weapon-class-inset-selector__none .gc-toggle-title {
    font-size: var(--gc-list-title-font-size);
    line-height: var(--gc-list-title-line-height);
}
@media (hover: hover) {
    .weapon-class-inset-selector__none .gc-toggle-container.gc-toggle-inline:hover {
        background: var(--gc-interactive-hover-bg, var(--surface-elevated));
        box-shadow: none;
    }
}
/* Скролл на списке, не на body — иначе линия табов уже шапки на ширину scrollbar. */
.weapon-class-picker-modal .modal-body.modal-body--nested:has(> .gc-modal-content--list) {
    overflow: hidden;
}
.weapon-class-picker-modal .gc-modal-content--list {
    overflow: hidden;
    padding-top: 0;
}
.weapon-class-inset-selector .gc-inset-list__row {
    align-items: flex-start;
}
.weapon-class-inset-selector .gc-inset-list__check,
.weapon-class-inset-selector .gc-class-badge {
    align-self: flex-start;
    margin-top: var(--space-1);
    flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) { .gc-inset-list .gc-inset-list__row { transition: none; } }