/**
 * Chips — компактные метки для метаданных в строках (эпики, списки).
 * Figma 764:8110 «badges»: pill, 13px medium, основной текст, лёгкая обводка и читаемый фон.
 *
 * Ряд «метки + выбор»: .gc-chip-group > (.gc-chip-select-wrap | fieldset.gc-chip-toggle-fieldset > .gc-chip-toggle > .gc-chip …);
 * Чекбоксы меток — в fieldset с visually-hidden legend (WCAG 1.3.1).
 * Native select как чип — .gc-chip-select-wrap > select.gc-input.gc-chip-select (см. inputs.css).
 */

.gc-chip {
    --gc-chip-min-height: 28px;
    --gc-chip-pad-y: var(--space-1);
    --gc-chip-pad-x: var(--space-2-5);
    --gc-chip-font: var(--font-size-14);
    --gc-chip-icon: var(--font-size-16);
    --gc-chip-gap: var(--space-1);
    display: inline-flex;
    align-items: center;
    align-self: center;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    gap: var(--gc-chip-gap);
    min-height: var(--gc-chip-min-height);
    padding: var(--gc-chip-pad-y) var(--gc-chip-pad-x);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: var(--gc-chip-font);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    background: var(--surface-control);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--transition-fast) var(--ease-in-out),
        border-color var(--transition-fast) var(--ease-in-out),
        box-shadow var(--transition-fast) var(--ease-in-out),
        color var(--transition-fast) var(--ease-in-out);
}

.gc-chip__icon {
    flex-shrink: 0;
    font-size: var(--gc-chip-icon);
    line-height: 1;
    pointer-events: none;
}

.gc-chip__label {
    min-width: 0;
    pointer-events: none;
}

/* Композеры заметок / ряды метаданных — менее «пилюля», ближе к квадрату */
.gc-chip.gc-chip--square {
    border-radius: var(--radius-12);
}

/*
 * Selected / static accent — инверсия fill-primary (как default badge), не accent-link.
 */
.gc-chip--accent,
.gc-chip[aria-pressed="true"],
.gc-chip[aria-checked="true"],
.gc-chip-toggle:has(input:checked) .gc-chip,
label.gc-chip.gc-chip-selectable:has(input:checked) {
    background: var(--fill-primary);
    color: var(--text-on-fill-primary);
    border-color: var(--fill-primary);
}

/* sm = лента Show; dense — alias */
.gc-chip.gc-chip--sm,
.gc-chip.gc-chip--dense {
    --gc-chip-min-height: 24px;
    --gc-chip-pad-y: var(--space-product-2);
    --gc-chip-pad-x: var(--space-2);
    --gc-chip-font: var(--font-size-13);
    --gc-chip-icon: var(--font-size-13);
    line-height: var(--gc-list-meta-line-height);
}

.gc-chip.gc-chip--lg,
.weapon-note-tag-chips .gc-chip {
    --gc-chip-min-height: 32px;
    --gc-chip-pad-y: var(--space-1-5);
    --gc-chip-pad-x: var(--space-3);
    --gc-chip-font: var(--font-size-13);
    --gc-chip-icon: var(--font-size-16);
    --gc-chip-gap: var(--space-1-5);
    border-color: var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: none;
}

.gc-chip.gc-chip--lg .gc-chip__label,
.weapon-note-tag-chips .gc-chip .gc-chip__label {
    font-size: var(--gc-chip-font);
}

.gc-chip.gc-chip--lg .gc-chip__icon,
.weapon-note-tag-chips .gc-chip .gc-chip__icon {
    font-size: var(--gc-chip-icon);
}

/*
 * Glass pill — паритет subheader title-pill / nav-track (navbar.css).
 * Для микро-меток на canvas (сумма на плитке раздела профиля и т.п.).
 */
.gc-chip.gc-chip--glass {
    border-color: var(--border-subtle);
    background: var(--gc-mobile-nav-nav-track-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),
        inset 0 1px 0 color-mix(in srgb, var(--fill-emphasis-inverse) 16%, transparent);
}

@supports not (backdrop-filter: blur(1px)) {
    .gc-chip.gc-chip--glass {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--surface-secondary);
    }
}

@media (hover: hover) and (pointer: fine) {
    .gc-chip.gc-chip--glass:hover {
        background: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
        box-shadow:
            var(--gc-mobile-nav-icon-shadow),
            inset 0 1px 0 color-mix(in srgb, var(--fill-emphasis-inverse) 22%, transparent);
    }
}

/* Группа: sm (6px) — чипы с иконкой, не 2px вплотную */
.gc-chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1-5);
    row-gap: var(--space-1-5);
}

/* Поле формы: чипы на всю ширину колонки, перенос под подписью */
.gc-form-group > .gc-chip-group {
    display: flex;
    width: 100%;
}

/*
 * Группа чекбоксов-чипов: семантика fieldset/legend (WCAG 1.3.1).
 * Визуально без рамки — только ряд .gc-chip-toggle.
 */
fieldset.gc-chip-toggle-fieldset {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-product-2);
    row-gap: var(--space-product-2);
    margin: 0;
    padding: 0;
    min-width: 0;
    border: none;
}

fieldset.gc-chip-toggle-fieldset legend {
    padding: 0;
}

/* Чекбокс скрыт, вид — чип (выбор меток в одном ряду с gc-chip-select и др.) */
.gc-chip-toggle {
    cursor: pointer;
    margin: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.2 — минимальный размер цели (Level AA): 24×24 CSS px */
    min-width: var(--space-6);
    min-height: var(--space-6);
}

/* Инпут остаётся в дереве доступа и фокусируемым; клик — по подписи (APG checkbox + label) */
.gc-chip-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.gc-chip-toggle .gc-chip {
    transition:
        background var(--transition-fast) var(--ease-in-out),
        border-color var(--transition-fast) var(--ease-in-out),
        color var(--transition-fast) var(--ease-in-out);
}

.gc-chip-toggle:has(input:focus-visible) .gc-chip {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
}

button.gc-chip {
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

button.gc-chip:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
}

/*
 * Чекбокс с видом классического чипа: кликабельна вся площадь label (.gc-chip), без вложенного .gc-chip-toggle.
 */
label.gc-chip.gc-chip-selectable {
    position: relative;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

label.gc-chip.gc-chip-selectable input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

label.gc-chip.gc-chip-selectable:has(input:disabled),
.gc-chip-toggle:has(input:disabled),
button.gc-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

label.gc-chip.gc-chip-selectable:has(input:focus-visible) {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
}

@media (hover: hover) and (pointer: fine) {
    label.gc-chip.gc-chip-selectable:hover:not(:has(input:disabled)) {
        border-color: var(--border-default);
        background-color: color-mix(in srgb, var(--fill-primary) 6%, var(--surface-control));
        color: var(--text-primary);
    }

    label.gc-chip.gc-chip-selectable:hover:not(:has(input:disabled)):has(input:checked),
    .gc-chip-toggle:hover:not(:has(input:disabled)):has(input:checked) .gc-chip,
    button.gc-chip:hover:not(:disabled):is([aria-pressed="true"], [aria-checked="true"]),
    a.gc-chip:hover:is([aria-pressed="true"], [aria-checked="true"]),
    .gc-chip--accent:hover {
        background: color-mix(in srgb, var(--fill-primary) 88%, var(--text-on-fill-primary));
        border-color: var(--fill-primary);
        color: var(--text-on-fill-primary);
    }

    .gc-chip-toggle:hover:not(:has(input:disabled)) .gc-chip {
        border-color: var(--border-default);
        background-color: color-mix(in srgb, var(--fill-primary) 6%, var(--surface-control));
    }

    button.gc-chip:hover:not(:disabled):not([aria-pressed="true"]):not([aria-checked="true"]),
    a.gc-chip:hover:not(.gc-chip--accent):not(.gc-chip--tinted-neutral):not([aria-pressed="true"]):not([aria-checked="true"]) {
        border-color: var(--border-default);
        background-color: color-mix(in srgb, var(--fill-primary) 6%, var(--surface-control));
        color: var(--text-primary);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gc-chip,
    .gc-chip-toggle .gc-chip,
    label.gc-chip.gc-chip-selectable {
        transition: none;
    }
}

/* Tinted pill-link (Figma tag / profile upcoming): neutral fill, caption medium, caret */
a.gc-chip.gc-chip--tinted-neutral {
    /* Dark: surface-subtle на canvas — без warm-brown от --tint-tinted-neutral; light — Figma Tint/Tinted/Neutral */
    --gc-chip-tinted-neutral-bg: var(--surface-subtle);
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-color: transparent;
    background: var(--gc-chip-tinted-neutral-bg);
    color: var(--text-primary);
    font-size: var(--type-ui-caption-size);
    font-weight: 500;
    line-height: var(--type-ui-caption-line-height);
    text-decoration: none;
    transition:
        background var(--transition-fast) var(--ease-in-out),
        color var(--transition-fast) var(--ease-in-out);
}

html[data-theme="light"] a.gc-chip.gc-chip--tinted-neutral {
    --gc-chip-tinted-neutral-bg: var(--tint-tinted-neutral);
}

@media (prefers-color-scheme: light) {
    html:not([data-theme]) a.gc-chip.gc-chip--tinted-neutral {
        --gc-chip-tinted-neutral-bg: var(--tint-tinted-neutral);
    }
}

a.gc-chip.gc-chip--tinted-neutral .gc-chip__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--font-size-16);
    height: var(--font-size-16);
    pointer-events: none;
}

a.gc-chip.gc-chip--tinted-neutral .gc-chip__caret i {
    font-size: var(--font-size-16);
    line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
    a.gc-chip.gc-chip--tinted-neutral:hover {
        border-color: transparent;
        background: color-mix(in srgb, var(--fill-primary) 6%, var(--gc-chip-tinted-neutral-bg));
        color: var(--text-primary);
    }
}

a.gc-chip.gc-chip--tinted-neutral:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
}

a.gc-chip.gc-chip--tinted-neutral:active {
    background: color-mix(in srgb, var(--fill-primary) 10%, var(--gc-chip-tinted-neutral-bg));
}

/* tinted-neutral иначе снимает кромку; pill glow (CARD_GLOW --pill) — kind-mark border + inset */
a.gc-chip.gc-chip--tinted-neutral.gc-card-glow-shell--pill {
    border-color: var(--gc-pill-mark-border);
    box-shadow: inset 0 1px 0 var(--gc-pill-mark-inset);
}

@media (hover: hover) and (pointer: fine) {
    @media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
    a.gc-chip.gc-chip--tinted-neutral.gc-card-glow-shell--pill:hover {
        border-color: var(--gc-pill-mark-border);
    }
    }
}

/* Сегментированная группа (как gc-btn-group): общая обводка, без зазоров между чипами */
.gc-chip-group--segmented {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
}

/**
 * Секция списка по месяцу/дню — bordered pill (list_events / profile / лента льгот).
 * Разметка: button.gc-month-toggle + .gc-month-icon (ph-bold ph-caret-down)
 * Шеврон: styles.css — caret expand contract (aria-expanded).
 * Токены: variables.css (--gc-month-toggle-*)
 */
button.gc-month-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    box-sizing: border-box;
    margin: 0;
    padding: var(--gc-month-toggle-padding-block) var(--gc-month-toggle-padding-inline);
    border: 1px solid var(--gc-month-toggle-border-color);
    border-radius: var(--radius-full);
    background: var(--gc-month-toggle-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--gc-month-toggle-font-size);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background var(--transition-fast) var(--ease-in-out),
        border-color var(--transition-fast) var(--ease-in-out),
        color var(--transition-fast) var(--ease-in-out);
}

button.gc-month-toggle:hover {
    background: var(--gc-month-toggle-hover-bg);
    color: var(--text-primary);
}

button.gc-month-toggle:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: 2px;
}

button.gc-month-toggle .gc-month-icon {
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    button.gc-month-toggle,
    button.gc-month-toggle .gc-month-icon {
        transition: none;
    }
}

.gc-chip-group--segmented > .gc-chip {
    flex-shrink: 0;
    border-radius: 0;
}

.gc-chip-group--segmented > .gc-chip + .gc-chip {
    margin-left: -1px;
}

.gc-chip-group--segmented > .gc-chip:first-child {
    border-radius: var(--radius-12) 0 0 var(--radius-12);
}

.gc-chip-group--segmented > .gc-chip:last-child {
    border-radius: 0 var(--radius-12) var(--radius-12) 0;
}

/* Один сегмент — как капсула сегмент-контроля (не pill), совпадает с краями группы из двух+ чипов */
.gc-chip-group--segmented > .gc-chip:only-child {
    border-radius: var(--radius-12);
}