/* ==========================================================================
   Settings — liquid glass surfaces.

   Scoped owner for `#screen-settings`. `learning-settings.css` remains the
   structural owner of the layout (grid, spacing, typography); this file is
   loaded last and restyles only the *surfaces* at higher specificity, so the
   two never fight and nothing here needs `!important`.

   The design language is the one the bottom navigation already established in
   `mobile-glass-nav.css`: a translucent tint over a blurred, slightly saturated
   backdrop, a hairline light edge, and a sheen along the top edge. Three rules
   carried over from there, deliberately:

   1. Contrast never depends on the blur. Every glass surface has an opaque
      fallback, so a browser without `backdrop-filter` — or a reader who asked
      the system for less transparency — gets a solid panel, not a washed-out
      one.
   2. Blur costs GPU per element. It is spent on the seven cards, never on the
      thirty rows inside them; rows get a plain wash instead.
   3. Colours come from the product token set, so all three themes follow.

   Glass also needs something behind it to be glass *of*. On the flat near-black
   background a blur has nothing to refract and reads as grey paint, so the
   screen carries its own soft ambient wash — a gradient, not an image, so it
   costs nothing to download and nothing to decode.
   ========================================================================== */

#screen-settings {
    /* One place to retune the material. */
    --tp-glass-tint: color-mix(in srgb, var(--tp-product-surface, #171310) 62%, transparent);
    --tp-glass-tint-strong: color-mix(in srgb, var(--tp-product-surface, #171310) 78%, transparent);
    --tp-glass-edge: color-mix(in srgb, var(--tp-product-text, #F5EBD8) 22%, transparent);
    --tp-glass-sheen: color-mix(in srgb, var(--tp-product-text, #F5EBD8) 38%, transparent);
    --tp-glass-blur: blur(18px) saturate(160%);
    --tp-glass-radius: 18px;
    position: relative;
    isolation: isolate;
}

/* Ambient wash: two wide, very low-opacity pools of light. This is what the
   panels above actually refract — without it "glass" is just a grey rectangle. */
#screen-settings::before {
    content: "";
    position: absolute;
    inset: -10% -20% auto;
    height: 620px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(52% 44% at 14% 0%,
            color-mix(in srgb, var(--tp-product-gold, #D4A24C) 46%, transparent) 0%, transparent 68%),
        radial-gradient(46% 40% at 94% 10%,
            color-mix(in srgb, var(--tp-color-primary, #3D8A55) 34%, transparent) 0%, transparent 70%);
    filter: blur(10px);
}

/* ── Карточки ───────────────────────────────────────────────────────────── */
#screen-settings .tp-settings-card,
#screen-settings .tp-settings-profile-card {
    position: relative;
    border: 1px solid var(--tp-glass-edge);
    border-radius: var(--tp-glass-radius);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--tp-product-text, #F5EBD8) 11%, transparent) 0%,
            color-mix(in srgb, var(--tp-product-text, #F5EBD8) 4%, transparent) 45%,
            transparent 100%),
        color-mix(in srgb, var(--tp-product-surface, #171310) 88%, transparent);
    -webkit-backdrop-filter: var(--tp-glass-blur);
    backdrop-filter: var(--tp-glass-blur);
    box-shadow:
        0 1px 0 0 color-mix(in srgb, var(--tp-product-text, #F5EBD8) 6%, transparent) inset,
        0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

/* Блик по верхнему ребру — именно он читается как «стекло», а не как панель. */
#screen-settings .tp-settings-card::before,
#screen-settings .tp-settings-profile-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    border-radius: var(--tp-glass-radius) var(--tp-glass-radius) 0 0;
    background: linear-gradient(90deg,
        transparent 0%, var(--tp-glass-sheen) 22%, var(--tp-glass-sheen) 78%, transparent 100%);
    pointer-events: none;
}

/* ── Строки ─────────────────────────────────────────────────────────────── */
/* Без blur: тридцать размытых слоёв на одном экране — это уже не украшение,
   а потерянные кадры при прокрутке. */
#screen-settings .tp-settings-row {
    border-bottom-color: color-mix(in srgb, var(--tp-product-text, #F5EBD8) 8%, transparent);
    transition: background-color .18s ease;
}

#screen-settings .tp-settings-row:hover,
#screen-settings label.tp-settings-row:focus-within {
    background: color-mix(in srgb, var(--tp-product-text, #F5EBD8) 4%, transparent);
}

/* Только материал значка. `display` здесь не трогается сознательно:
   `learning-settings.css` прячет значки на ширине до 900px, отдавая всю строку
   тексту, и это решение автора экрана, а не недосмотр. Первая версия этого
   файла его перебила — на телефоне появились значки, а подписи начали
   переноситься на лишнюю строку. */
#screen-settings .tp-settings-row__icon {
    border: 1px solid color-mix(in srgb, var(--tp-product-gold, #D4A24C) 24%, transparent);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--tp-product-gold, #D4A24C) 18%, transparent) 0%,
        color-mix(in srgb, var(--tp-product-gold, #D4A24C) 6%, transparent) 100%);
    color: var(--tp-product-gold, #D4A24C);
}

/* ── Выбор темы, переключатели, поля ────────────────────────────────────── */
#screen-settings .tp-theme-choice {
    border: 1px solid var(--tp-glass-edge);
    border-radius: 14px;
    background: color-mix(in srgb, var(--tp-product-surface, #171310) 72%, transparent);
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

#screen-settings .tp-theme-choice:hover {
    border-color: color-mix(in srgb, var(--tp-product-gold, #D4A24C) 40%, transparent);
}

#screen-settings .tp-theme-choice[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--tp-product-gold, #D4A24C) 62%, transparent);
    background: color-mix(in srgb, var(--tp-product-gold, #D4A24C) 12%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tp-product-gold, #D4A24C) 22%, transparent);
}

#screen-settings .tp-settings-row select,
#screen-settings .tp-settings-row input[type="text"],
#screen-settings .tp-settings-row input[type="number"] {
    border: 1px solid var(--tp-glass-edge);
    border-radius: 11px;
    background: color-mix(in srgb, var(--tp-product-surface, #171310) 55%, transparent);
    color: var(--tp-product-text, #F5EBD8);
}

/* Выбор языка сползал в две строки: «KZ RU» и «EN» под ними. Три кода — это
   один элемент управления, и разрывать его посередине нельзя. */
#screen-settings .lang-picker {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--tp-glass-edge);
    background: color-mix(in srgb, var(--tp-product-surface, #171310) 72%, transparent);
}

#screen-settings .lang-picker .lang-btn {
    min-width: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

#screen-settings .lang-picker .lang-btn.active {
    background: color-mix(in srgb, var(--tp-product-gold, #D4A24C) 16%, transparent);
    color: var(--tp-product-gold, #D4A24C);
}

/* ── Боковая навигация разделов (планшет и шире) ────────────────────────── */
#screen-settings .tp-settings-nav {
    border: 1px solid var(--tp-glass-edge);
    border-radius: var(--tp-glass-radius);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--tp-product-text, #F5EBD8) 11%, transparent) 0%,
            color-mix(in srgb, var(--tp-product-text, #F5EBD8) 4%, transparent) 45%,
            transparent 100%),
        color-mix(in srgb, var(--tp-product-surface, #171310) 88%, transparent);
    -webkit-backdrop-filter: var(--tp-glass-blur);
    backdrop-filter: var(--tp-glass-blur);
    padding: 6px;
}

#screen-settings .tp-settings-nav button {
    border-radius: 12px;
    transition: background-color .18s ease, color .18s ease;
}

#screen-settings .tp-settings-nav button[aria-selected="true"] {
    background: color-mix(in srgb, var(--tp-product-gold, #D4A24C) 14%, transparent);
    color: var(--tp-product-gold, #D4A24C);
}

/* ── Отказы от эффекта ──────────────────────────────────────────────────── */

/* Без backdrop-filter полупрозрачная заливка превратилась бы в блёклое пятно
   поверх фона, а не в стекло. Такой браузер получает честную плотную панель. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    #screen-settings .tp-settings-card,
    #screen-settings .tp-settings-profile-card,
    #screen-settings .tp-settings-nav {
        background: var(--tp-product-surface, #171310);
    }
    #screen-settings::before { display: none; }
}

/* Пользователь попросил у системы меньше прозрачности — просьба выполняется,
   а не украшается. */
@media (prefers-reduced-transparency: reduce) {
    #screen-settings .tp-settings-card,
    #screen-settings .tp-settings-profile-card,
    #screen-settings .tp-settings-nav {
        background: var(--tp-product-surface, #171310);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    #screen-settings::before { display: none; }
}

/* Режим повышенной контрастности живёт в самом продукте: там граница должна
   быть видна сама по себе, а не намекать на себя бликом. */
:root[data-contrast="high"] #screen-settings .tp-settings-card,
:root[data-contrast="high"] #screen-settings .tp-settings-profile-card,
:root[data-contrast="high"] #screen-settings .tp-settings-nav {
    border-color: var(--tp-product-border);
    background: var(--tp-product-surface, #171310);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
    #screen-settings .tp-settings-row,
    #screen-settings .tp-theme-choice,
    #screen-settings .tp-settings-nav button { transition: none; }
}