/* Значки наград на сайте и в админке (ADR-030, спек §5.5). Разметку строит lib/awards.php
   (award_badge_html): медальон размера --sl-award-size, внутри картинка с сервера (и скрытая запасная
   иконка) либо inline-SVG иконки lucide, которая красится currentColor.

   Цвета — тема сайта по ключам каталога (Backend/resources/award-badges.json): ключи общие с ACARS,
   значения свои, подобраны под светлую тему сайта. Неизвестный ключ рисуется золотом (база правила).
   Фон медальона — тот же цвет 12 %. Подключён и на сайте (includes/header.php), и в админке
   (admin/includes/nav.php): custom.css админка не грузит. */

.sl-award-badge {
    --sl-award-color: #b7791f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--sl-award-size, 48px);
    height: var(--sl-award-size, 48px);
    border-radius: 22%;
    overflow: hidden;
    vertical-align: middle;
}

.sl-award-badge[data-kind="icon"],
.sl-award-badge.sl-award-badge--fallback {
    color: var(--sl-award-color);
    background: color-mix(in srgb, var(--sl-award-color) 12%, transparent);
}

.sl-award-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Значок с картинкой несёт и запасную иконку (спек §9: при потере файла значок падает в иконку).
   Пока картинка жива, иконка скрыта; ошибку загрузки ловит assets/js/award-badges.js и ставит
   медальону класс sl-award-badge--fallback: картинка прячется, иконка видна. display:none убирает
   скрытую половину и из дерева доступности — читается то, что видно (alt картинки или aria-label иконки). */
.sl-award-badge-fallback {
    display: none;
}

.sl-award-badge--fallback img {
    display: none;
}

.sl-award-badge--fallback .sl-award-badge-fallback {
    display: inline-flex;
}

/* Свотч цвета в пикере админки — тот же цвет, что у медальона. */
.sl-award-swatch {
    --sl-award-color: #b7791f;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sl-award-color);
    vertical-align: middle;
}

.sl-award-badge[data-color="gold"],
.sl-award-swatch[data-color="gold"] {
    --sl-award-color: #b7791f;
}

.sl-award-badge[data-color="silver"],
.sl-award-swatch[data-color="silver"] {
    --sl-award-color: #718096;
}

.sl-award-badge[data-color="bronze"],
.sl-award-swatch[data-color="bronze"] {
    --sl-award-color: #a0612b;
}

.sl-award-badge[data-color="red"],
.sl-award-swatch[data-color="red"] {
    --sl-award-color: #c53030;
}

.sl-award-badge[data-color="green"],
.sl-award-swatch[data-color="green"] {
    --sl-award-color: #2f855a;
}

.sl-award-badge[data-color="blue"],
.sl-award-swatch[data-color="blue"] {
    --sl-award-color: #2b6cb0;
}

.sl-award-badge[data-color="purple"],
.sl-award-swatch[data-color="purple"] {
    --sl-award-color: #6b46c1;
}

/* --- Пикер значка в админке (lib/awards.php: award_badge_fields_html) --- */

.sl-award-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sl-award-pick,
.sl-award-color-pick {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 10px;
}

.sl-award-pick {
    padding: 2px;
}

.sl-award-color-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 10px 6px 0;
    padding: 2px 8px;
}

/* Радиокнопка невидима, но фокусируема: выбор показывает рамка. */
.sl-award-pick input,
.sl-award-color-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sl-award-pick:has(input:checked),
.sl-award-color-pick:has(input:checked) {
    border-color: #2b6cb0;
}

.sl-award-pick:has(input:focus-visible),
.sl-award-color-pick:has(input:focus-visible) {
    outline: 2px solid #2b6cb0;
    outline-offset: 2px;
}