/* Общий материал детской лиги. Размытие только на отдельных панелях,
   без полноэкранного фильтра и многократного размытия вложенных карточек. */
.jl {
    --jl-ink: #f0f6f2;
    --jl-muted: #d0ded6;
    --jl-accent: #e4c080;
    --jl-gold-ink: #14271f;
    --jl-surface: rgb(4 36 27 / 38%);
    --jl-line: rgb(220 241 229 / 22%);
    --jl-line-strong: rgb(227 240 230 / 35%);
    --jl-glass-blur: 18px;
    --jl-glass-fill: rgb(5 35 27 / 88%);
    --jl-glass-reflection: linear-gradient(
        135deg,
        rgb(255 255 255 / 15%) 0%,
        rgb(255 255 255 / 3%) 42%,
        rgb(228 192 128 / 7%) 100%
    );
    --jl-glass-shadow: 0 12px 32px -12px rgb(0 10 6 / 42%),
        inset 0 1px 0 rgb(255 255 255 / 28%),
        inset 1px 0 0 rgb(255 255 255 / 9%),
        inset 0 -1px 0 rgb(0 12 7 / 22%);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .jl {
        --jl-glass-fill: rgb(3 35 26 / 48%);
    }
}

.jl :is(
    .jl-nav,
    .jl-card,
    .jl-note,
    .jl-empty,
    .jl-error,
    .jl-filter-panel,
    .jl-table-wrap,
    .jl-launch-note,
    .jlh-hero__copy,
    .jlh-panel,
    .jlh-event,
    .jlh-board,
    .jlh-step,
    .jlh-parents,
    .jlh-cta,
    .jlh-empty
) {
    background: var(--jl-glass-reflection), var(--jl-glass-fill);
    border: 1px solid var(--jl-line-strong);
    box-shadow: var(--jl-glass-shadow);
    -webkit-backdrop-filter: blur(var(--jl-glass-blur)) saturate(145%);
    backdrop-filter: blur(var(--jl-glass-blur)) saturate(145%);
}

.jl .jlh-hero__copy {
    padding: 28px;
    border-radius: 24px;
}

.jl :is(.jl-heading, .jlh-head) {
    text-shadow: 0 2px 8px rgb(0 13 7 / 65%);
}

.jl .jl-nav {
    padding: 16px;
    border-radius: 20px;
}

/* Цвет ступени остаётся видимым на стеклянных карточках. */
.jl .jlh-step {
    border-top: 3px solid var(--ball-color, var(--jl-accent));
}

.jl .jl-launch-note {
    border-left: 3px solid var(--jl-accent);
}

.jl .jl-error {
    background: linear-gradient(135deg, rgb(255 255 255 / 10%), transparent),
        rgb(101 23 31 / 78%);
    border-color: rgb(255 162 166 / 55%);
}

/* Вложенные поверхности получают лёгкий тон, без дополнительного blur. */
.jl :is(.jl-card, .jl-note, .jlh-panel, .jlh-parents, .jlh-board)
    :is(.jl-card, .jl-note, .jl-table-wrap) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgb(1 27 20 / 26%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}

.jl .jl-table thead {
    background: rgb(0 25 18 / 40%);
}

.jl :is(.jl-badge, .jlh-status, .jlh-facts li, .jl-match-tabs a) {
    background: rgb(7 41 31 / 38%);
    border-color: var(--jl-line);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}

.jl .jl-badge--verified {
    background: rgb(15 94 56 / 65%);
    border-color: rgb(95 232 152 / 55%);
    color: #baffd4;
}

.jl .jl-nav-link {
    background: linear-gradient(145deg, rgb(255 255 255 / 7%), transparent),
        rgb(0 24 17 / 30%);
    border-color: var(--jl-line);
    color: var(--jl-ink);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%);
}

.jl .jl-button,
.jl .jl-nav-link[aria-current],
.jl .jl-match-tabs a[aria-current] {
    background: linear-gradient(145deg, rgb(255 255 255 / 26%), transparent),
        rgb(228 192 128 / 90%);
    border-color: rgb(255 228 180 / 65%);
    color: var(--jl-gold-ink);
    box-shadow: 0 4px 16px rgb(0 15 8 / 18%),
        inset 0 1px 0 rgb(255 255 255 / 45%);
}

.jl .jl-button.jl-button-outline,
.jl .jl-button.jl-button--ghost {
    background: linear-gradient(145deg, rgb(255 255 255 / 10%), transparent),
        rgb(0 28 19 / 38%);
    border-color: var(--jl-line-strong);
    color: var(--jl-accent);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%);
}

.jl :is(.jl-field, .jl-filter) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
),
.jl .jl-inline-field :is(input, select) {
    background: rgb(0 22 16 / 55%);
    border-color: var(--jl-line-strong);
    color: var(--jl-ink);
    box-shadow: inset 0 1px 4px rgb(0 12 7 / 22%),
        0 1px 0 rgb(255 255 255 / 8%);
}

.jl select option {
    background: #082b20;
    color: var(--jl-ink);
}

.jl input::placeholder,
.jl textarea::placeholder {
    color: #bbcec2;
}

@media (hover: hover) and (pointer: fine) {
    .jl .jl-nav-link:hover,
    .jl :is(.jl-button-outline, .jl-button--ghost):hover {
        background: linear-gradient(145deg, rgb(255 255 255 / 18%), transparent),
            rgb(9 50 35 / 60%);
        border-color: var(--jl-accent);
        color: #fff4de;
        box-shadow: 0 8px 20px -8px rgb(0 8 4 / 45%),
            inset 0 1px 0 rgb(255 255 255 / 32%);
    }

    .jl .jl-nav-link[aria-current]:hover {
        background: linear-gradient(145deg, rgb(255 255 255 / 35%), transparent),
            #e4c080;
        color: var(--jl-gold-ink);
    }
}

@media (width <= 640px) {
    .jl {
        --jl-glass-blur: 10px;
    }

    .jl .jlh-hero__copy {
        padding: 22px;
    }

    .jl .jl-nav {
        padding: 12px;
        border-radius: 16px;
    }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    .jl {
        --jl-glass-fill: #082b20;
        --jl-glass-reflection: linear-gradient(transparent, transparent);
    }

    .jl :is(.jl-nav, .jl-card, .jl-note, .jl-empty, .jl-error,
        .jl-filter-panel, .jl-table-wrap, .jl-launch-note, .jlh-hero__copy, .jlh-panel,
        .jlh-event, .jlh-board, .jlh-step, .jlh-parents, .jlh-cta, .jlh-empty) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}