/* Стекло (22.10, Max: «добавить элементы Apple-овского стекла там, где уместно, дизайн не переделывать»).

   Правила Apple для Liquid Glass, на которых это стоит: стекло только у ПЛАВАЮЩЕГО слоя управления и навигации
   (панель, меню, подсказки, плеер), никогда у контента (карточки, списки, строки) и никогда стекло на стекле.
   Поэтому список ниже короткий и закрытый: новый элемент сюда добавляют, только если он парит над страницей.

   Что умеет CSS и что нет: размытие, насыщенность того, что за стеклом, тонкая подсветка кромки сверху и по бокам,
   мягкий блик в углу, внутреннее свечение у края — это здесь. Преломление (линза, которая гнёт картинку под краем)
   — нет: только SVG-фильтром в backdrop-filter, он работает в одном Chromium и дорог. Не делаем.

   Подключён последним, после theme.css и mobile.css: меняет только материал (фон, размытие, кромка, тень), форму
   и размеры оставляет файлам экранов. Значения света — токены ниже, оттенок берётся из --surface-raised, поэтому
   стекло идёт за темой само. Выключается одной строкой в index.html и sw.js. */

/* Light theme (Max 27.10: «в светлой теме стекла почти не видно»): white glass on a near-white page reads as
   nothing, white rims on white too. So in light the glass is thinner (more of the page shows through, blurred and
   saturated), it gets a fine plum hairline outside and a soft shade inside the lower edge — the rim shows by its
   dark side — and a deeper shadow under it. */
:root {
  --glass-blur: 24px;
  --glass-sat: 2;
  --glass-fill-a: color-mix(in srgb, var(--surface-raised) 58%, transparent);
  --glass-fill-b: color-mix(in srgb, var(--surface-raised) 30%, transparent);
  --glass-sheen: rgb(255 255 255 / 0.75);
  --glass-rim: rgb(255 255 255 / 0.95);
  --glass-rim-soft: rgb(255 255 255 / 0.5);
  --glass-shade: color-mix(in srgb, var(--plum) 10%, transparent);
  --glass-glow: rgb(255 255 255 / 0.35);
  --glass-edge: color-mix(in srgb, var(--plum) 16%, transparent);
  --glass-line: color-mix(in srgb, var(--plum) 14%, transparent);
  --glass-shadow: color-mix(in srgb, var(--plum) 50%, transparent);
}
:root[data-theme="dark"] {
  --glass-fill-a: color-mix(in srgb, var(--surface-raised) 56%, transparent);
  --glass-fill-b: color-mix(in srgb, var(--surface-raised) 30%, transparent);
  --glass-sheen: rgb(255 255 255 / 0.17);
  --glass-rim: rgb(255 255 255 / 0.38);
  --glass-rim-soft: rgb(255 255 255 / 0.12);
  --glass-shade: rgb(0 0 0 / 0.25);
  --glass-glow: rgb(255 255 255 / 0.07);
  --glass-edge: rgb(255 255 255 / 0.12);
  --glass-line: rgb(255 255 255 / 0.08);
  --glass-shadow: rgb(0 0 0 / 0.65);
}

/* The floating layer. `:root` in front lifts specificity over the per-screen rules (e.g. the dark .menu shadow). */
:root .ls__card, :root .ls__mini, :root .ls__dock,
:root .ls__menu,
:root .tabbar,
:root .menu,
:root .term-pop,
:root .toast,
:root .nt-tabs {
  background:
    radial-gradient(130% 120% at 8% -12%, var(--glass-sheen), transparent 52%),
    linear-gradient(165deg, var(--glass-fill-a), var(--glass-fill-b));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.04);
  border-color: var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 var(--glass-rim-soft),
    inset 1px 0 0 var(--glass-rim-soft),
    inset -1px 0 0 var(--glass-rim-soft),
    inset 0 -10px 18px -12px var(--glass-shade),
    inset 0 0 22px var(--glass-glow),
    0 0 0 0.5px var(--glass-line),
    0 16px 36px -16px var(--glass-shadow);
}

/* Navigation bars of the screens: glass too, Apple's own first use for it. Thinner than a panel: no corner sheen,
   no long shadow, the page scrolls under it and shows through blurred. */
:root :is(.db-top, .nt-top, .ag-top, .pf-top, .st-top, .hw-top, .lib-top, .sc-top, .al-top, .ad-top, .as-top,
          .cs-top, .cu-top, .pl-top) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 72%, transparent),
                                      color-mix(in srgb, var(--surface-raised) 46%, transparent));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom-color: var(--glass-edge);
  box-shadow: inset 0 -1px 0 var(--glass-rim-soft), 0 12px 28px -24px var(--glass-shadow);
}

/* Sheets and cards that float over the page: the roll-call card, the install banner, the palette, the share
   sheet. A bit more fill than the bars: there is text in them and the page behind keeps moving. */
:root :is(.maybe, .inst, .pal, .nt-share, .mv__card) {
  --glass-fill-a: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  --glass-fill-b: color-mix(in srgb, var(--surface-raised) 56%, transparent);
  background:
    radial-gradient(130% 120% at 8% -12%, var(--glass-sheen), transparent 52%),
    linear-gradient(165deg, var(--glass-fill-a), var(--glass-fill-b));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.04);
  border-color: var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 var(--glass-rim-soft),
    inset 0 0 22px var(--glass-glow),
    0 0 0 0.5px var(--glass-line),
    0 22px 44px -20px var(--glass-shadow);
}

/* The tab bar floats (iOS 26): a pill with light from above, the same hairline and a shadow that lands under it.
   A bit more fill than the panels: five labels stay readable over any page. */
:root .tabbar {
  --glass-fill-a: color-mix(in srgb, var(--surface-raised) 64%, transparent);
  --glass-fill-b: color-mix(in srgb, var(--surface-raised) 42%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 var(--glass-rim-soft),
    inset 0 -12px 20px -14px var(--glass-shade),
    inset 0 0 22px var(--glass-glow),
    0 0 0 0.5px var(--glass-line),
    0 18px 36px -14px var(--glass-shadow),
    0 2px 6px -2px color-mix(in srgb, var(--glass-shadow) 50%, transparent);
}

/* The sticky tab strip is a pill on the page: a thinner shadow, it sits close to the header. */
:root .nt-tabs { box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-soft), 0 8px 22px -14px var(--glass-shadow); }

/* Player controls on top of the glass: no second glass, only a light tint and a lit edge. */
.ls__play {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, white), var(--accent));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 8px 16px -8px var(--accent);
}
.ls__chip { background: color-mix(in srgb, var(--text) 7%, transparent); }
.ls__voice:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }

/* No blur to do, or the reader asked for no transparency: an ordinary solid surface, as before. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .ls__card, :root .ls__mini, :root .ls__dock, :root .ls__menu, :root .tabbar, :root .menu, :root .term-pop, :root .toast, :root .nt-tabs,
  :root :is(.db-top, .nt-top, .ag-top, .pf-top, .st-top, .hw-top, .lib-top, .sc-top, .al-top, .ad-top, .as-top, .cs-top, .cu-top, .pl-top),
  :root :is(.maybe, .inst, .pal, .nt-share, .mv__card) {
    background: var(--surface-raised);
  }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  :root .ls__card, :root .ls__mini, :root .ls__dock, :root .ls__menu, :root .tabbar, :root .menu, :root .term-pop, :root .toast, :root .nt-tabs,
  :root :is(.db-top, .nt-top, .ag-top, .pf-top, .st-top, .hw-top, .lib-top, .sc-top, .al-top, .ad-top, .as-top, .cs-top, .cu-top, .pl-top),
  :root :is(.maybe, .inst, .pal, .nt-share, .mv__card) {
    background: var(--surface-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media print { :root .tabbar, :root .toast { background: none; box-shadow: none; } }

/* The «Спросить» button in the corner: the same lit upper edge as the play button. Plain selector on purpose, so the
   focus ring rule (.tw-fab:focus-visible) stays stronger. */
.tw-fab { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), var(--shadow-md); }