/* Жидкое стекло: материал навигационного уровня.
   Подключается после desktop.css — последним в стопке.

   Что это за материал. В WWDC25 Apple свела прежний «размытый фон» к
   физической модели: слой не просто размывает подложку, он её преломляет.
   Отсюда три признака, которые отличают стекло от матовой плёнки:

   1) линза. Край слоя гнёт свет сильнее середины, поэтому по периметру идёт
      светлый кант, а не ровная рамка одной толщины;
   2) блик. Свет падает сверху, значит верхняя кромка ярче нижней, и на
      скруглении блик затухает — он не обводит фигуру по кругу;
   3) подвижность. Материал реагирует на действие: при наведении стекло
      «толстеет» — кант ярче, тень глубже.

   Где он применяется. У Apple стекло живёт на уровне навигации: панель
   вкладок, боковое меню, тулбар, всплывающие слои. Содержимое остаётся на
   непрозрачной поверхности — текст и цифры читают часами, и подложка под
   ними не должна двигаться. Здесь то же разделение: рамка окна, его полоса,
   боковое меню, диалоги и всплывающие сообщения — стекло; таблицы, карточки
   показателей и панели внутри содержимого остаются такими, какими их сделал
   desktop.css.

   Почему не liquid-glass.css. Тот файл лежит в стопке до desktop.css, и
   desktop.css намеренно гасит его почти везде: стекло на каждой из полусотни
   кнопок делало интерфейс мокрым. Этот слой идёт после и возвращает материал
   точечно — туда, где он несёт смысл: плоскость, которая лежит поверх других.

   Без backdrop-filter весь блок не применяется: поверхности остаются
   непрозрачными и читаемыми. */

:root{
 /* Толщина стекла. Чем выше слой, тем глубже размытие под ним.
    Мелкое (--ios-glass-blur) осталось без применения, когда окно перешло на
    одну плоскость: меню, содержимое и полоса больше не носят стекло каждое
    своё. Токен сохранён — он пара к глубокому и понадобится следующему слою,
    который ляжет поверх плоскости. */
 --ios-glass-blur:blur(20px) saturate(170%);
 --ios-glass-blur-deep:blur(34px) saturate(180%);
 /* Заливка. Это не цвет поверхности, а мутность самого стекла: сквозь неё
    видно подложку окна и обои за ней. Доля подобрана по контрасту, замер
    снимком — см. ниже про светлую тему. */
 --ios-glass-fill:rgba(255,255,255,.78);
 --ios-glass-fill-strong:rgba(255,255,255,.86);
 /* Кант линзы: светлее сверху, где падает свет, и слабее снизу. */
 --ios-glass-edge:rgba(255,255,255,.75);
 --ios-glass-edge-low:rgba(255,255,255,.28);
 --ios-glass-rim:rgba(18,28,48,.1);
 --ios-glass-shadow:0 1px 2px rgba(18,28,48,.05),0 10px 32px rgba(18,28,48,.1);
 --ios-glass-shadow-deep:0 8px 24px rgba(18,28,48,.1),0 32px 80px rgba(18,28,48,.2);
 /* Стекло на уровне содержимого — плитки показателей, панель списка, поля
    поиска. Оно лежит ниже навигационного: под ним не обои, а подложка окна,
    поэтому размытие мельче, а яркость правится отдельно — иначе плита не
    отличалась бы от плоскости, на которой лежит.

    Две цифры здесь выбраны замером снимка, а не на глаз.

    Подъёма яркости в светлой теме нет. Подложка окна под плитой — 242,245,250,
    почти белая, и brightness(1.02) выводил композит в 254,254,255: ровно
    прежний непрозрачный #fff, материал на снимке не читался вовсе. Всю работу
    делает насыщенность: она разводит каналы почти серой подложки (240,245,255)
    и голубой подтон проходит сквозь заливку наверх.

    Доля белого ниже, чем у навигационного слоя: 0.52 против 0.78. При 0.72
    подтон снова тонул в белом. На 0.52 плита выходит 251,252,254 — на девять
    ступеней светлее полотна (242,245,250) и холоднее его, рамка под кантом
    садится до 227,229,233, а сам кант даёт 255,255,255. Четыре ступени —
    полотно, рамка, кант, плита — и складываются в линзу.
    Контраст не страдает: тёмный текст на 251 держит около 14:1 при пороге 4.5.
    Здесь, в отличие от меню, под стеклом лежит почти плотная подложка окна, а
    не сами обои, поэтому запас есть. */
 --ios-pane-blur:blur(16px) saturate(190%);
 --ios-pane-fill:rgba(255,255,255,.52);
 --ios-pane-fill-strong:rgba(255,255,255,.66);
 --ios-pane-field:rgba(255,255,255,.4);
 /* Кант линзы этого слоя берётся чистым белым, а не бликом в 0.75: плита
    сама почти белая, и приглушённый блик давал на ней 254 против 253 — линии
    не было видно. */
 --ios-pane-edge:rgba(255,255,255,1);
 --ios-pane-edge-low:rgba(255,255,255,.45);
 --ios-pane-shadow:0 1px 2px rgba(18,28,48,.05),0 8px 22px rgba(18,28,48,.08);
 /* Плоскость содержимого (#app .main) — самый нижний слой материала. Под ней
    уже обои: оболочка окна прозрачна (см. ниже). Прежде доля была 92 % —
    почти плотная плита, и рядом со стеклянным меню она читалась мёртвой.

    Глубина в двух темах разная, и это не вкус. Обои под окном — светлое
    голубое свечение. В тёмной теме оно уходит ПОД тёмный текст и запас не
    трогает: на 34 % самая уязвимая надпись держит 4.78. В светлой то же
    свечение подсвечивает фон ПОД тёмным текстом и съедает разницу — ровно
    та же причина, по которой ниже подписям меню вернули ступень темнее.

    Замер по пикселям, по всем вкладкам, у надписей, лежащих на самой
    плоскости (надзаголовок, подзаголовок раздела, строки времени, сноска):
    светлая тема уже при нынешних 92 % даёт 4.58 при пороге 4.5, на 84 % —
    4.47. Поэтому в светлой глубина идёт в паре с оттенком приглушённого
    текста: 78 % и ступень темнее дают 5.1 вместо 4.58, то есть материал
    появляется, а читаемость не падает, а растёт. */
 --ios-plane-fill:color-mix(in srgb,var(--bg) 78%,transparent);
}
/* В светлой теме стекло плотнее, чем в тёмной, и это не вкус, а контраст.
   Обои под окном — голубое свечение; на тёмной теме оно уходит под тёмный
   текст и подписи остаются читаемыми (9.3–10.0), а на светлой подсвечивает
   фон под тёмным текстом и съедает разницу: при доле 0.55 пункты меню давали
   3.87–3.91 при пороге 4.5. Замер снимком на обеих темах. */
:root[data-theme="dark"]{
 --ios-glass-fill:rgba(140,166,208,.14);
 --ios-glass-fill-strong:rgba(146,172,214,.2);
 --ios-glass-edge:rgba(255,255,255,.34);
 --ios-glass-edge-low:rgba(255,255,255,.08);
 --ios-glass-rim:rgba(0,0,0,.4);
 --ios-glass-shadow:0 1px 2px rgba(3,7,16,.3),0 10px 32px rgba(3,7,16,.42);
 --ios-glass-shadow-deep:0 8px 24px rgba(3,7,16,.42),0 32px 80px rgba(3,7,16,.6);
 /* В тёмной теме плита светлее подложки: стекло поднимает то, что под ним,
    а не затемняет. Доля та же малая, что у навигационного слоя. Замер:
    подложка 15,21,36 — плита 33,43,64, кант 166,180,200. */
 --ios-pane-blur:blur(16px) saturate(180%) brightness(1.1);
 --ios-pane-fill:rgba(146,172,214,.14);
 --ios-pane-fill-strong:rgba(150,176,218,.18);
 --ios-pane-field:rgba(140,166,208,.1);
 --ios-pane-edge:rgba(255,255,255,.4);
 --ios-pane-edge-low:rgba(255,255,255,.1);
 --ios-pane-shadow:0 1px 2px rgba(3,7,16,.28),0 8px 22px rgba(3,7,16,.34);
 /* Тёмная тема отпускает плоскость глубже: светлые обои уходят под тёмный
    фон, а не под текст, и запас не страдает — на 34 % худшая надпись даёт
    4.78 при пороге 4.5. Глубже не идём: буквальный рецепт меню
    (--ios-glass-fill) проваливает шапку таблицы до 3.16. */
 --ios-plane-fill:color-mix(in srgb,var(--bg) 34%,transparent);
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

/* --- Одна плоскость на всё окно ---
   Стекло держит сама оболочка, а меню, содержимое и полоса заголовка лежат на
   ней прозрачными областями. Так и устроено окно в системе: материал — свойство
   окна, а не каждой его части по отдельности.

   До этого стекло было у каждой части своё. Стыки удалось свести растушёвкой
   краёв (перепад между соседними пикселями ≤ 8), но видно было не стык:
   замер по левой половине меню, куда растушёвка не достаёт, показал
   38,48,72 против 17,33,52 у содержимого — **разница 18.7 по всей площади**.
   Две большие ровные области разной светлоты читаются как две панели, сколько
   их края ни растушёвывай. Одна плоскость убирает причину: 18.7 → 0.3.

   Почему не совпадало раньше: `backdrop-filter` берёт то, что лежит позади
   конкретного элемента. Меню стояло над обоями, содержимое — над уже
   отфильтрованным слоем, и одинаковый рецепт давал на них разный результат.
   Теперь фильтр один и применяется один раз, поэтому совпадение точное, а не
   подогнанное.

   Доля заливки — --ios-plane-fill, разная в двух темах; почему именно так,
   объяснено там же, у переменной. Это единственный слой материала над обоями,
   и на нём лежит весь текст панели. */
#app.app-shell{
 background:var(--ios-plane-fill);
 backdrop-filter:var(--ios-glass-blur-deep);
 -webkit-backdrop-filter:var(--ios-glass-blur-deep);
}
#app .main{
 /* Прозрачна: материал держит оболочка. Собственного фона и фильтра нет —
    иначе вернулась бы разница слоёв, ради которой всё и переделано. */
 background:transparent;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}

/* Кант линзы по периметру окна. Отдельный слой, а не border: градиент идёт
   сверху вниз, поэтому верхняя кромка ярче нижней — как при свете сверху.
   Рисуется маской: заливка видна только в полосе шириной 1 px по краю. */
#app.app-shell::before{
 content:"";
 position:absolute;inset:0;
 border-radius:inherit;
 padding:1px;
 background:linear-gradient(180deg,var(--ios-glass-edge),var(--ios-glass-edge-low) 42%,transparent);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;
 mask-composite:exclude;
 pointer-events:none;
 z-index:3;
}

/* --- Полоса окна: часть той же плоскости --- */
.window-bar{
 /* Прозрачна, как меню и содержимое: своя заливка снова сделала бы её
    отдельной панелью. Полоса идёт во всю ширину окна и снизу граничит сразу
    с двумя областями — любая собственная светлота даёт черту хотя бы с одной
    из них. Это уже проверялось дважды: с растушёвкой к низу перепад под меню
    был 39, без неё — 8; прозрачная полоса даёт 0, потому что разделять нечего.
    Полосу обозначают светофор, заголовок и блик по верхней кромке.

    Объявления нужны явные: desktop.css задаёт фон и рамку тем же селектором
    .window-bar, и просто не упомянуть их здесь недостаточно — выиграет
    прежнее правило. */
 background:transparent;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
 border-bottom:0;
 box-shadow:inset 0 1px 0 var(--ios-glass-edge);
}

/* --- Боковое меню: такая же прозрачная область той же плоскости.
   Селектор повторяет тему — theme-light.css красит меню собственным
   непрозрачным градиентом (:root[data-theme="light"] .sidebar), и без равной
   специфичности в светлой теме оно осталось бы закрашенным. --- */
:root[data-theme="light"] #app .sidebar,
#app .sidebar{
 /* Ни заливки, ни фильтра: материал держит оболочка. Прежде здесь было своё
    стекло с растушёвкой правого края на 80 px — она сводила стык, но не
    уровни: по левой половине меню, куда растушёвка не достаёт, оставалось
    38,48,72 против 17,33,52 у содержимого. Прозрачность убирает саму причину,
    а не её край: разница по площади 18.7 → 0.3.

    Пункты меню при этом видны не хуже: контраст подписи к фону вырос с 12.74
    до 15.48 — плоскость под ними темнее прежней собственной заливки. */
 background:transparent;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
 /* Черты справа нет: плоскость сплошная, и делить её нечем. Меню от
    содержимого отделяют отступ и выключка, а не линия и не тон.
    Обнулять рамку нужно обоими селекторами: theme-light.css задаёт её с
    большей специфичностью, и без первого правило светлой темы осталось бы со
    старой линией. */
 border-right:0;
}

/* Выбранный раздел — капля стекла с собственным кантом, а не плоская заливка.
   Слой рисует motion.css в ::after (подсветку нужно провести между двумя
   пунктами), поэтому материал добавляется туда же. */
.nav-item::after{
 box-shadow:inset 0 1px 0 var(--ios-glass-edge-low),0 1px 3px rgba(3,7,16,.18);
}

/* Подписи меню в светлой теме стоят на границе порога: --nav-ink-soft давал
   4.40 на непрозрачной панели, а под стеклом обои добавляют света, и замер
   снимком показывает 4.17. Ступень темнее возвращает запас, не меняя
   иерархию: подпись остаётся тише заголовка раздела и активного пункта.
   Селектор повторяет тему — в theme-light.css эти цвета заданы с той же
   специфичностью. */
:root[data-theme="light"] #app .nav-item{color:#59636f}
:root[data-theme="light"] #app .nav-heading{color:#5d6675}
:root[data-theme="light"] #app .connection-card div>span{color:#5d6675}

/* То же самое, но для текста, лежащего прямо на плоскости содержимого:
   надзаголовок раздела, подзаголовок, строки времени, сноска. Все они
   заданы var(--muted) (#667080) и под стеклом теряют запас — замер по всем
   вкладкам давал 3.75–4.4 при пороге 4.5. Ступень темнее возвращает 5.1+,
   иерархию не трогая: подпись остаётся тише заголовка.

   Правило намеренно узкое — только прямые дети вида и шапки раздела. Внутри
   плит (таблицы, карточки, диалоги) var(--muted) остаётся прежним: там под
   текстом плотная поверхность, запас есть, и менять цвет было бы вмешательством
   без причины. */
:root[data-theme="light"] #app .main .page-header .eyebrow,
:root[data-theme="light"] #app .main #page-description,
:root[data-theme="light"] #app .main>.view>.footnote,
:root[data-theme="light"] #app .main .view-footer,
:root[data-theme="light"] #app .main>.view>.section-head .muted{color:#5d6675}

/* --- Диалоги: плоскость над всем окном --- */
#app~dialog.modal,dialog.modal{
 background:var(--ios-glass-fill-strong);
 backdrop-filter:var(--ios-glass-blur-deep);
 -webkit-backdrop-filter:var(--ios-glass-blur-deep);
 border:1px solid var(--ios-glass-rim);
 box-shadow:inset 0 1px 0 var(--ios-glass-edge),var(--ios-glass-shadow-deep);
}
dialog.modal::backdrop{
 background:rgba(6,11,22,.3);
 backdrop-filter:blur(6px);
 -webkit-backdrop-filter:blur(6px);
}

/* --- Всплывающие слои: живут поверх содержимого ровно столько, сколько
   нужно, и материал показывает, что они не часть страницы --- */
#app .toast,#app .notification-popup,#app .chart-tooltip,
#app .settings-drawer{
 background:var(--ios-glass-fill-strong);
 backdrop-filter:var(--ios-glass-blur-deep);
 -webkit-backdrop-filter:var(--ios-glass-blur-deep);
 border:1px solid var(--ios-glass-rim);
 box-shadow:inset 0 1px 0 var(--ios-glass-edge),var(--ios-glass-shadow);
}

/* ==========================================================================
   Вкладка «Аккаунты»: материал на уровне содержимого
   ==========================================================================

   Навигационный слой выше лежит над обоями. Здесь слой ниже: под плитками
   показателей и панелью списка — подложка окна (#app .main), почти плотная.
   Поэтому материал задаётся иначе:

   — размытие мельче (16 вместо 20–34): размывать под собой почти нечего,
     работу делает насыщенность — она разводит каналы почти нейтральной
     подложки, и её подтон проходит сквозь заливку наверх;
   — подъём яркости только в тёмной теме. Там плита должна стать светлее
     подложки, иначе стекло над ровным фоном читалось бы просто другим серым.
     В светлой подложка и так почти белая: тот же приём выводил композит в
     254,254,255 — в прежний непрозрачный #fff, и материал исчезал;
   — кант и блик рисует отдельный слой с маской, как у рамки окна: светлая
     линия по периметру, ярче сверху. Это и отличает линзу от плёнки.

   Что осталось плотным. Строки таблицы с балансами прозрачности не получают:
   они лежат НА плите панели, а не рядом с ней. Отдельной непрозрачной
   карточки для таблицы здесь нет и быть не может — таблица занимает панель
   целиком, от канта до канта, и «плотная таблица в стеклянной рамке» дала бы
   стекло шириной в один пиксель. Вместо этого плита держит плотность сама:
   её заливка лежит поверх непрозрачной подложки окна, под цифрами нет ни
   обоев, ни движущейся картинки, и композит под строкой — почти постоянный
   цвет. Шапка таблицы взята ступенью плотнее: это верхняя кромка плиты, где
   и собирается свет. --- */

/* Плитки показателей и панель со списком — одна плита. */
#app .stats-grid>.stat-card,
#app .account-panel{
 position:relative;
 background:var(--ios-pane-fill);
 backdrop-filter:var(--ios-pane-blur);
 -webkit-backdrop-filter:var(--ios-pane-blur);
 border:1px solid var(--ios-glass-rim);
 box-shadow:var(--ios-pane-shadow);
}
/* Кант линзы. Отдельный слой, а не border: градиент идёт сверху вниз, и
   верхняя кромка ярче нижней — как при свете сверху. Заливка видна только в
   полосе шириной 1 px по краю; у панели слой лежит поверх таблицы, поэтому
   кант не перекрывается строками. */
#app .stats-grid>.stat-card::before,
#app .account-panel::before,
#app #view-accounts .footnote::after{
 content:"";
 position:absolute;inset:0;
 border-radius:inherit;
 padding:1px;
 background:linear-gradient(180deg,var(--ios-pane-edge),var(--ios-pane-edge-low) 45%,transparent);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;
 mask-composite:exclude;
 pointer-events:none;
 z-index:2;
}
/* Шапка таблицы: верхняя кромка плиты. Собственного размытия не берёт —
   панель под ней уже размыла подложку, второй проход стоил бы кадров и
   ничего не добавил. */
#app .account-panel thead{
 background:var(--ios-pane-fill-strong);
}

/* Поля отбора: поиск и фильтр лежат прямо на подложке окна, своей карточки
   у них нет — материал и показывает, что это отдельные плоскости. */
#app #view-accounts .search-box input,
#app #view-accounts .toolbar select{
 background:var(--ios-pane-field);
 backdrop-filter:var(--ios-pane-blur);
 -webkit-backdrop-filter:var(--ios-pane-blur);
 border:1px solid var(--ios-glass-rim);
 box-shadow:inset 0 1px 0 var(--ios-pane-edge-low);
}
/* Поле в работе — плотное: пока в него печатают, подложка под знаками не
   должна просвечивать. Правило повторяет специфичность предыдущего, иначе
   фокус остался бы прозрачным. */
#app #view-accounts .search-box input:focus,
#app #view-accounts .toolbar select:focus{
 background:var(--surface);
 border-color:var(--accent);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* Сноска со щитом. Своей коробки у неё нет — одна строка текста, — поэтому
   плита рисуется отдельным слоем за текстом. Так материал появляется, а
   отступы, размеры и положение строки остаются прежними: слой выведен из
   потока и ничего не двигает. */
#app #view-accounts .footnote{position:relative;z-index:0}
#app #view-accounts .footnote::before{
 content:"";
 position:absolute;inset:-10px -14px;
 border-radius:var(--radius-md,12px);
 background:var(--ios-pane-fill);
 backdrop-filter:var(--ios-pane-blur);
 -webkit-backdrop-filter:var(--ios-pane-blur);
 box-shadow:var(--ios-pane-shadow);
 pointer-events:none;
 z-index:-1;
}
#app #view-accounts .footnote::after{
 inset:-10px -14px;
 border-radius:var(--radius-md,12px);
}

/* --- Подвижность: материал отвечает на действие ---
   Стекло «толстеет» под курсором — кант ярче. Больше ничего не меняется:
   движение здесь отвечает на наведение, а не живёт само по себе. */
@media(hover:hover){
 #app .nav-item:hover:not(:disabled):not(.selected){
  box-shadow:inset 0 1px 0 var(--ios-glass-edge-low);
 }
 #app .stats-grid>.stat-card:hover,
 #app .account-panel:hover{
  background:var(--ios-pane-fill-strong);
  border-color:var(--ios-glass-rim);
  box-shadow:var(--ios-pane-shadow);
 }
}

}

/* --- Доступность ---
   Размытие дорого при прокрутке и мешает тем, кто отключил прозрачности.
   Поверхности становятся плотными, геометрия и отступы не меняются. */
@media(prefers-reduced-transparency:reduce){
 #app.app-shell,#app .main,.window-bar,#app .sidebar,dialog.modal,
 #app .toast,#app .notification-popup,#app .chart-tooltip,#app .settings-drawer,
 #app .stats-grid>.stat-card,#app .account-panel,
 #app #view-accounts .footnote::before,
 #app #view-accounts .search-box input,#app #view-accounts .toolbar select{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
 }
 #app.app-shell{background:var(--bg)}
 #app .main{background:var(--bg)}
 /* Плоскость снова плотная, обои под текст не просвечивают — значит и
    компенсация оттенка не нужна: приглушённый текст возвращается к
    var(--muted), как во всей остальной панели. */
 :root[data-theme="light"] #app .main .page-header .eyebrow,
 :root[data-theme="light"] #app .main #page-description,
 :root[data-theme="light"] #app .main>.view>.footnote,
 :root[data-theme="light"] #app .main .view-footer,
 :root[data-theme="light"] #app .main>.view>.section-head .muted{color:var(--muted)}
 .window-bar,#app .sidebar,
 :root[data-theme="light"] #app .sidebar{background:var(--surface)}
 /* Черты возвращаются. Без прозрачности поверхности плотные и одноцветные:
    растушёвка снята вместе с материалом (.main выше берёт сплошной var(--bg)),
    а разделять их больше нечем — без линии меню и содержимое слились бы в
    одно поле. Там, где стекло работает, границу показывает сам материал;
    здесь эту работу берёт на себя линия. */
 .window-bar{border-bottom:1px solid var(--ios-glass-rim)}
 #app .sidebar,
 :root[data-theme="light"] #app .sidebar{border-right:1px solid var(--ios-glass-rim)}
 dialog.modal,#app .toast,#app .notification-popup,
 #app .chart-tooltip,#app .settings-drawer{background:var(--surface)}
 #app.app-shell::before{display:none}
 /* Поверхности вкладки «Аккаунты» становятся плотными. Кант линзы и плита
    под сноской снимаются целиком: без прозрачности преломлять нечего, а
    лишняя подложка под строкой текста только дробила бы страницу. */
 #app .stats-grid>.stat-card,#app .account-panel{background:var(--surface)}
 #app .account-panel thead{background:var(--surface-soft)}
 #app #view-accounts .search-box input,
 #app #view-accounts .toolbar select{background:var(--surface-soft);box-shadow:none}
 #app .stats-grid>.stat-card::before,#app .account-panel::before,
 #app #view-accounts .footnote::before,
 #app #view-accounts .footnote::after{display:none}
}