/* ===================================================================
   Каталог серверов: заголовок, вкладки, поиск с фильтрами, список
   карточек, пагинация.

   Значения — только из tokens.css. Адаптив внизу файла, четыре
   брейкпоинта: 1200 / 1024 / 768 / 480.

   Удалено как мёртвое (ни одного вхождения в templates/ и static/js/):
   .servers-header__filters и её -category/--title/--options, .servers__pages,
   .servers__load-more, .section-support и весь блок .support__*. Около
   120 строк, которые пережили свою разметку.
   =================================================================== */

/* ------------------------------------------------------------------
   Заголовок страницы
   ------------------------------------------------------------------ */

.servers__page-title {
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    color: var(--text);
    margin: 0 0 var(--sp-3);
    text-wrap: pretty;
}

.servers__page-subtitle {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-medium);
    color: var(--text-3);
    line-height: var(--lh-snug);
    margin: 0 0 var(--sp-7);
}

/* Блок посадочной страницы (/tag/<slug>/, /version/<slug>/): описание тега и
   размер подборки. На главной его нет — контекста, который он объясняет, там
   тоже нет. Подзаголовок над ним прижимается вплотную. */
.servers__landing {
    margin: calc(-1 * var(--sp-5)) 0 var(--sp-7);
    padding: var(--sp-5);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.servers__landing-text {
    max-width: var(--measure);
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.servers__landing-count {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-4);
}

.servers__landing-text:only-child,
.servers__landing-count:only-child {
    margin-top: 0;
}

.servers__landing-count strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Панель каталога: вкладки и поиск в одной строке
   ------------------------------------------------------------------ */

.servers-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-bottom: var(--sp-7);
}

/* Вкладка «Новые сервера» прячет поиск и фильтры — там другой порядок. */
.servers-header.filters-hidden search {
    display: none;
}

.servers-header search {
    flex: 1 1 420px;
    min-width: 0;
}

/* ---- Сегментированный переключатель вкладок ---- */

.servers__categories {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
    padding: var(--sp-1);
    list-style: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    flex-shrink: 0;
}

.servers__categories-item {
    display: flex;
}

.servers__categories-button {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 36px;
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.servers__categories-button:hover {
    color: var(--text);
}

.servers__categories-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.servers__categories-button.is-active {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: var(--fw-bold);
}

.servers__categories-icon {
    flex-shrink: 0;
    opacity: 0.7;
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.servers__categories-button:hover .servers__categories-icon {
    opacity: 1;
}

/* Иконки — белые SVG; на жёлтом фоне их надо погасить в чёрный. */
.servers__categories-button.is-active .servers__categories-icon {
    filter: brightness(0);
    opacity: 1;
}

/* ---- Строка поиска и фильтров ---- */

.servers__search {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 10;
}

.servers__inline-elements {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    position: relative;
}

.servers__search-bar {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.servers__search-input {
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--sp-4) 0 42px;
    /* Граница поля должна быть видна: порог WCAG 1.4.11 — 3:1. */
    border: 1px solid var(--border-input);
    border-radius: var(--r-md);
    background-color: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-small);
    transition: border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.servers__search-input::placeholder {
    color: var(--text-4);
}

.servers__search-input:hover {
    border-color: var(--text-4);
}

.servers__search-input:focus-visible {
    border-color: var(--accent);
    background-color: var(--surface-3);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.servers__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: 0.45;
    pointer-events: none;
}

fieldset.servers__filters {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    border: 0;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.servers__version {
    display: flex;
    align-items: center;
}

.servers__socials {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
    flex-shrink: 0;
}

.servers__socials .footer__social-link {
    display: flex;
    align-items: center;
}

/* ------------------------------------------------------------------
   Пикеры версии и тегов
   ------------------------------------------------------------------ */

.version-picker {
    position: relative;
}

.version-picker__toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--control-h);
    padding: 0 var(--sp-4);
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.version-picker__toggle:hover {
    border-color: var(--border-strong);
    background-color: var(--surface-3);
}

.version-picker__toggle:focus {
    outline: none;
}

.version-picker__toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.version-picker__toggle[aria-expanded="true"] {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

.version-picker__label {
    color: var(--text-3);
    font-weight: var(--fw-medium);
}

.version-picker__toggle[aria-expanded="true"] .version-picker__label {
    color: var(--accent);
}

.version-picker__arrow {
    display: inline-block;
    width: 7px;
    height: 7px;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform var(--dur-slow) var(--ease);
    flex-shrink: 0;
    margin-top: -3px;
}

.version-picker__toggle[aria-expanded="true"] .version-picker__arrow {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.version-picker__dropdown {
    position: absolute;
    top: calc(100% + var(--sp-2));
    left: 0;
    min-width: 100%;
    max-width: calc(100vw - var(--sp-8));
    visibility: hidden;
    background-color: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    z-index: 100;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top center;
    transition: opacity var(--dur-slow) var(--ease),
                transform var(--dur-slow) var(--ease);
    pointer-events: none;
    max-height: 260px;
    overflow-y: auto;
    padding: var(--sp-1);
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

.version-picker__dropdown::-webkit-scrollbar {
    width: 6px;
}

.version-picker__dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.version-picker__dropdown::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
}

.version-picker__dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.version-picker__option {
    display: block;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--r-xs);
    text-align: left;
    background: none;
    color: var(--text-2);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}

.version-picker__option:hover,
.version-picker__option:focus {
    background-color: var(--surface-4);
    color: var(--text);
    outline: none;
}

.version-picker__option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.version-picker__option.is-selected,
.version-picker__option.active {
    color: var(--accent);
    font-weight: var(--fw-bold);
}

/* ---- Пикер тегов ---- */

.tag-picker {
    position: static;
}

.tag-picker__dropdown {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    left: auto;
    width: 580px;
    max-width: calc(100vw - var(--sp-8));
    background-color: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top right;
    transition: opacity var(--dur-slow) var(--ease),
                transform var(--dur-slow) var(--ease),
                visibility var(--dur-slow);
    pointer-events: none;
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.tag-picker__dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.tag-picker__category-title {
    display: block;
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-4);
    margin-bottom: var(--sp-3);
}

.tag-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.tag-picker__chip,
.servers-header__filter--button {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.tag-picker__chip:hover,
.servers-header__filter--button:hover {
    border-color: var(--text-4);
    color: var(--text);
    background: var(--surface-4);
}

.tag-picker__chip:focus-visible,
.servers-header__filter--button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tag-picker__chip.active,
.servers-header__filter--button.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: var(--fw-semibold);
}

.tag-picker__divider {
    height: 1px;
    background: var(--border);
}

/* ------------------------------------------------------------------
   Список серверов
   ------------------------------------------------------------------ */

.servers__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}

/* Полоса слева задаётся одной переменной --card-spine, а не тремя
   конкурирующими правилами. Порядок приоритета получается сам собой:
   прозрачная по умолчанию → жёлтая у топ-3 → цвет купленного выделения,
   который server-cards.js ставит инлайном и который перебивает оба.

   Рисуется псевдоэлементом, а НЕ inset box-shadow: box-shadow участвует
   в transition ради тени при наведении, и Chrome залипает на прежнем
   цвете, когда значение приходит из var() — переменная уже #B8E6D0, а
   тень всё ещё жёлтая. Разведены: цвет — в ::before, движение — в тени. */
.server-card {
    --card-spine: transparent;

    position: relative;
    padding: var(--sp-6) var(--sp-7);
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.server-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    background: var(--card-spine);
    pointer-events: none;
}

.server-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
}

.server-card--top {
    --card-spine: var(--accent);
}

/* Лёгкая заливка в цвет выделения — только слева, чтобы не спорить с
   текстом. Не поддержан color-mix — просто не будет подложки. */
.server-card[data-highlight] {
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--card-spine) 10%, transparent),
        transparent 340px
    );
}

.server-card__stretched-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--r-lg);
}

.server-card__stretched-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Раскладка карточки. display:contents у двух обёрток нужен, чтобы
   баннер и кнопка IP встали в правую колонку, а название и цифры —
   в левую, не трогая разметку (её же отдаёт AJAX-обновление списка). */
.server-card__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--sp-7);
    row-gap: var(--sp-4);
    align-items: start;
}

.server-card__header {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.server-card__info {
    display: contents;
}

.server-details__wrapper {
    display: contents;
}

.server-card__headerwrapper {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.server-card__rank {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--surface-4);
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

.server-card--top .server-card__rank {
    background: var(--accent);
    color: var(--accent-contrast);
}

.rank-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.server-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    min-width: 0;
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-snug);
    color: var(--text);
}

.server-name a {
    color: inherit;
}

.server-description {
    margin: var(--sp-2) 0 0;
    max-width: 560px;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--text-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---- Баннер 468×60 ----
   Размер задан только здесь: HTML-атрибутов width/height у <img> нет,
   иначе фильтры adblock вида img[width="468"][height="60"] режут его
   как стандартный IAB Full Banner. */
.server-placeholder {
    grid-column: 2;
    grid-row: 1;
    flex-shrink: 0;
    width: 468px;
    height: 60px;
    border-radius: var(--r-sm);
    object-fit: cover;
    border: 1px solid var(--border-strong);
}

/* ---- Строка характеристик ---- */

.server-details {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-6);
    min-width: 0;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-4);
}

.detail-icon {
    flex-shrink: 0;
    fill: none;
}

.detail-text {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.detail-label {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-4);
}

/* Баллы подсвечиваются, только когда они есть: ноль жёлтым — обещание,
   которого нет. */
.detail-item--paid {
    color: var(--accent);
}

.detail-item--paid .detail-text {
    color: var(--accent);
}

/* ---- Кнопка с адресом ---- */

.server-link-wrapper {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    position: relative;
    display: flex;
    z-index: 1;
}

.server-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: var(--r-md);
    background-color: var(--accent);
    color: var(--accent-contrast);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}

.server-link:hover {
    background-color: var(--accent-hover);
}

.server-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.server-link--launcher {
    background-color: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-weight: var(--fw-semibold);
}

.server-link--launcher:hover {
    background-color: var(--surface-4);
}

.server-link-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-icon {
    flex-shrink: 0;
    fill: none;
}

/* Подсказки ([data-tooltip], .copy-tooltip, .server-limit-tooltip) и
   .detail-icon-wrap переехали в global.css: они нужны каталогу, карточке
   сервера, профилю и управлению сервером, а лежали копиями в трёх файлах. */

.screenshot-clickable {
    cursor: pointer;
}

.screenshot-clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* ------------------------------------------------------------------
   Пагинация
   ------------------------------------------------------------------ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding-top: var(--sp-5);
    margin-bottom: var(--sp-10);
}

.pagination__page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}

.pagination__page:hover {
    background: var(--surface-4);
    color: var(--text);
}

.pagination__page:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.pagination__page--current {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: var(--fw-bold);
    pointer-events: none;
}

.pagination__ellipsis {
    padding: 0 var(--sp-1);
    color: var(--text-4);
    font-size: var(--fs-small);
}

/* ------------------------------------------------------------------
   Пустая выдача и состояние загрузки
   ------------------------------------------------------------------ */

.servers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--sp-10) var(--sp-6);
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.servers-empty__icon {
    color: var(--accent);
    margin-bottom: var(--sp-4);
    opacity: 0.85;
}

.servers-empty__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    color: var(--text);
}

.servers-empty__hint {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text-3);
}

.servers__list.is-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}

/* ------------------------------------------------------------------
   Появление карточек
   ------------------------------------------------------------------ */

@keyframes serverCardIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#servers-list .server-card {
    opacity: 0;
    animation: serverCardIn var(--dur-slow) var(--ease) forwards;
}

#servers-list .server-card:nth-child(1)  { animation-delay: 0ms; }
#servers-list .server-card:nth-child(2)  { animation-delay: 40ms; }
#servers-list .server-card:nth-child(3)  { animation-delay: 80ms; }
#servers-list .server-card:nth-child(4)  { animation-delay: 120ms; }
#servers-list .server-card:nth-child(5)  { animation-delay: 160ms; }
#servers-list .server-card:nth-child(6)  { animation-delay: 200ms; }
#servers-list .server-card:nth-child(7)  { animation-delay: 240ms; }
#servers-list .server-card:nth-child(8)  { animation-delay: 280ms; }
#servers-list .server-card:nth-child(9)  { animation-delay: 320ms; }
#servers-list .server-card:nth-child(10) { animation-delay: 360ms; }

/* ==================================================================
   Вкладка-ссылка «Народный топ»

   Две первые вкладки — <button> и переключаются через AJAX, третья ведёт на
   отдельный адрес. Внешне это один ряд, поэтому ссылке нужны только те
   свойства, что у кнопки берутся из user-agent по умолчанию.
   ================================================================== */
a.servers__categories-button {
    text-decoration: none;
}

.servers__categories-button .servers__categories-icon {
    flex-shrink: 0;
}

/* ==================================================================
   Поиск — на собственной строке

   .servers-header держит три группы: вкладки режимов, переключатель платформы
   и блок поиска с фильтрами. В один ряд они помещались, пока групп было две;
   с появлением платформы у .servers__search-bar (flex: 1 1 260px, min-width: 0)
   не осталось запаса, и поле сжалось до пары символов.

   Разрыв строки, а не «сделать поле пошире»: первая строка отвечает на вопрос
   «какая выдача», вторая — «чем её сузить», и поиску там достаётся вся ширина,
   оставшаяся от тегов и версии.
   ================================================================== */
.servers-header > search {
    flex: 1 1 100%;
    min-width: 0;
}

/* ==================================================================
   Переключатель платформы (Java / Bedrock)
   ================================================================== */
.platform-switch {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    flex-shrink: 0;
}

.platform-switch__item {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.platform-switch__item:hover {
    background: var(--surface-3);
    color: var(--text);
}

.platform-switch__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.platform-switch__item.is-active {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: var(--fw-bold);
}

/* ==================================================================
   Голосование

   Разметка одна на каталог и карточку сервера (app/vote-button.html),
   поэтому и стили лежат в home.css — его подключают обе страницы.
   Само число голосов — обычный .detail-item в ряду метрик, своих стилей
   ему не нужно.
   ================================================================== */
.vote__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: var(--control-h);
    padding: 0 var(--sp-4);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.vote__button:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.vote__button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Проголосовавшему кнопка не «сломана», а отработана: гасим до нейтрального
   вида и снимаем курсор-указатель, но оставляем читаемый контраст. */
.vote__button:disabled,
.vote__button.is-voted {
    background: var(--surface-3);
    border-color: var(--border);
    color: var(--text-3);
    cursor: default;
}

.vote__icon {
    flex-shrink: 0;
    fill: none;
}

/* В народном топе в ячейку с адресом приезжает ещё и кнопка голоса. Рядом они
   делят ширину и оба становятся нечитаемы, поэтому раскладываем столбиком.
   :has() — чтобы не заводить модификатор, который пришлось бы протаскивать
   через два условия в шаблоне списка. */
.server-link-wrapper:has(.vote__button) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
}

.server-link-wrapper:has(.vote__button) .vote__button {
    width: 100%;
}

/* ==================================================================
   Адаптив
   ================================================================== */

/* Баннер 468px + колонка названия перестают помещаться раньше, чем
   контейнер упирается в край, — карточка переезжает в одну колонку. */
@media (max-width: 1024px) {
    .server-card__content {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--sp-4);
    }

    .server-card__header  { grid-column: 1; grid-row: 1; }
    .server-details       { grid-column: 1; grid-row: 2; }
    .server-placeholder   { grid-column: 1; grid-row: 3; max-width: 100%; }
    .server-link-wrapper  { grid-column: 1; grid-row: 4; }

    .server-link {
        max-width: 468px;
    }
}

@media (max-width: 768px) {
    .servers-header {
        gap: var(--sp-3);
    }

    .servers__categories {
        width: 100%;
    }

    .servers__categories-item {
        flex: 1;
    }

    .servers__categories-button {
        width: 100%;
        justify-content: center;
    }

    /* Переключатель платформы занимает всю строку и делит её поровну —
       иначе «Все / Java / Bedrock» жмётся к левому краю под вкладками. */
    .platform-switch {
        width: 100%;
    }

    .platform-switch__item {
        flex: 1;
        justify-content: center;
        padding: 0 var(--sp-2);
    }

    .servers__inline-elements {
        flex-wrap: wrap;
        row-gap: var(--sp-3);
    }

    .servers__search-bar {
        flex: 1 1 100%;
    }

    fieldset.servers__filters {
        flex: 1 1 auto;
    }

    .version-picker__toggle {
        width: 100%;
        justify-content: space-between;
    }

    /* Соцсети дублируются в подвале — на узком экране это лишняя строка. */
    .servers__socials {
        display: none;
    }

    .server-card {
        padding: var(--sp-5);
    }

    .tag-picker__dropdown {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform-origin: top center;
    }
}

@media (max-width: 480px) {
    /* При 320px пара «Все сервера / Новые сервера» не влезала и вторую
       кнопку срезало (WCAG 1.4.10). Иконки декоративные — alt="" — и
       уходят первыми, текст важнее. */
    .servers__categories-icon {
        display: none;
    }

    .servers__categories-item {
        min-width: 0;
    }

    .servers__categories-button {
        padding: 0 var(--sp-3);
    }

    .server-card {
        padding: var(--sp-4);
    }

    .server-placeholder,
    .server-link {
        width: 100%;
        max-width: none;
    }

    .server-details {
        gap: var(--sp-2) var(--sp-4);
    }

    .servers__socials {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #servers-list .server-card {
        animation: none;
        opacity: 1;
    }

    .version-picker__dropdown,
    .tag-picker__dropdown,
    .version-picker__arrow {
        transition-duration: 0.01ms;
    }
}