/* Стекло вместо песочного фона (Артём 27.10.2026: «этот дурацкий фон убери и
   замени на эффект стекла, как в айфонах», образец — светлое запотевшее стекло
   с каплями). Подключать сразу после site.css: свои фоны карточек из файлов
   ниже (rex, stats…) остаются в силе.
   Под стеклом — glass-drops.svg (свой рисунок, tools/debut-glass/gen_drops.py):
   серо-бирюзовая подложка и капли, гуще сверху; слой неподвижный.
   Карточки — матовое стекло: размытие на подложке ::before, а не на самой
   карточке — backdrop-filter у карточки сделал бы её опорой для position:
   fixed внутри (окна Лиса и т. п.). Тёмной темы в кабинете нет.
   Подключено в кабинете семьи, админке и кабинете тренера (Артём 27.10:
   «стекло нравится, и на них тоже»). */
:is(.cabinet-page, body.admin, body.trener) {
  --bg: #e7eff1;
  --surface-2: #edf2f4;
  --line: #dbe3e6;
  --line-strong: #bfcbd0;
  --muted: #4f5466; /* темнее общего: серый текст на стекле держит AA */
  --glass: rgba(255, 255, 255, .6);
  --glass-bar: rgba(255, 255, 255, .62);
  --glass-edge: rgba(255, 255, 255, .85);
  --glass-blur: blur(16px) saturate(160%);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 30px rgba(31, 74, 84, .1), 0 1px 2px rgba(31, 74, 84, .08);
}
/* Фон body перекрыл бы слой с каплями; html — сильнее body.admin/.trener из
   admin.css и trener.css, которые подключены позже. */
html :is(.cabinet-page, body.admin, body.trener) { background: transparent; }
html:has(> :is(.cabinet-page, body.admin, body.trener)) { background: #d6e5e8; }
:is(.cabinet-page, body.admin, body.trener)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #d6e5e8 url("glass-drops.svg") center top / cover no-repeat;
}

:where(.cabinet-page, body.admin, body.trener) .card {
  position: relative;
  background: transparent;
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
:where(.cabinet-page, body.admin, body.trener) .card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.cabinet-page .site-header,
.cabinet-page.is-app .cab-tabbar {
  background: var(--glass-bar);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.cabinet-page .site-header { border-bottom-color: rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(31, 74, 84, .08); }
.cabinet-page.is-app .cab-tabbar { border-top-color: rgba(255, 255, 255, .7); box-shadow: 0 -1px 0 rgba(31, 74, 84, .08); }
.cabinet-page.is-app .cab-tab:active { background: rgba(255, 255, 255, .5); }
.cabinet-page.is-app .cab-badge { box-shadow: 0 0 0 2px #fff; }

/* Текст вне карточек (подвал, записка про личную ссылку) — тоже на стекле:
   прямо на каплях серый текст не держит AA. */
.cabinet-page .site-footer { background: var(--glass-bar); border-top: 1px solid var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.cabinet-page .cabinet-note { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: rgba(255, 255, 255, .75); }

/* Колонка разделов на широком экране: внутри шапки, а шапка сама размывает —
   у колонки размытие не сработает, поэтому плашка плотнее. */
@media (min-width: 1100px) {
  .cabinet-page.is-paged .cab-anchors {
    padding: var(--s2); border: 1px solid var(--glass-edge); border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .78); box-shadow: var(--glass-shadow);
  }
}

/* Кабинет тренера: шапка с вкладками — светлое стекло. */
body.trener .t-head {
  background: var(--glass-bar); border-bottom-color: rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(31, 74, 84, .08);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}

/* Содержимое тренера и админки лежит прямо на фоне (заголовки разделов,
   дата занятия, серые подсказки) — под ним одна стеклянная панель, иначе
   текст на каплях не читается. */
body.trener .t-main { margin-top: var(--s4); margin-bottom: calc(var(--s8) + env(safe-area-inset-bottom)); }
:is(body.trener .t-main, body.admin main.app) { position: relative; padding: var(--s4); border-radius: var(--r-lg); }
:is(body.trener .t-main, body.admin main.app)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 1px solid var(--glass-edge); border-radius: inherit; background: var(--glass); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
@media (max-width: 620px) {
  body.trener .t-main { width: calc(100% - 2 * var(--s3)); }
  :is(body.trener .t-main, body.admin main.app) { padding: var(--s3); }
}

/* Админка: тёмная шапка остаётся тёмной (белый текст), но стеклянной. На
   телефоне шапка не липнет, а вкладки — position: fixed внутри неё: размытие
   на шапке сделало бы её опорой для вкладок, поэтому там размывают сами
   вкладки. */
body.admin .app-header { background: rgba(20, 21, 26, .86); }
@media (min-width: 621px) {
  body.admin .app-header { -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
}
@media (max-width: 620px) {
  body.admin .app-header nav {
    background: rgba(20, 21, 26, .86);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  }
}

/* Нет размытия или просят меньше прозрачности — непрозрачные плашки. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :is(.cabinet-page, body.admin, body.trener) { --glass: rgba(255, 255, 255, .9); --glass-bar: rgba(255, 255, 255, .96); }
}
@media (prefers-reduced-transparency: reduce) {
  :is(.cabinet-page, body.admin, body.trener) { --glass: #fff; --glass-bar: #fff; --glass-blur: none; }
  .cabinet-page .site-header, .cabinet-page.is-app .cab-tabbar, body.trener .t-head,
  body.admin .app-header, body.admin .app-header nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
}