/*
 * Glass effect: an optional style inspired by Apple's Liquid Glass, switched on in the Appearance
 * menu (html[data-glass="on"]). Following Apple's Materials guidance:
 *  - Glass is only for the layer of controls and navigation that floats above the content (header,
 *    side menu, dialogs, menus, search, toasts). Content cards stay nearly solid.
 *  - It uses the "regular" variant (strong blur and luminosity) because these parts carry text.
 *  - A soft brand-coloured background gives the glass something to show through.
 *  - It falls back to solid when the device asks for less transparency or more contrast, or when the
 *    browser can't blur. The exam page never loads it.
 */
:root[data-glass="on"] {
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-strong: rgba(255, 255, 255, .74);
  --glass-line: rgba(255, 255, 255, .7);
  --glass-edge: rgba(16, 24, 40, .08);
  --glass-hi: rgba(255, 255, 255, .85);
  --glass-shadow: 0 10px 30px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06);
  --glass-blur: blur(22px) saturate(180%);
  --glass-card: rgba(255, 255, 255, .86);
  --glass-wash:
    radial-gradient(1100px 700px at -5% -10%, rgba(26, 46, 139, .32), transparent 60%),
    radial-gradient(900px 620px at 105% 5%, rgba(200, 147, 58, .30), transparent 58%),
    radial-gradient(900px 700px at 55% 110%, rgba(216, 38, 44, .18), transparent 60%),
    radial-gradient(700px 500px at 35% 55%, rgba(91, 112, 219, .16), transparent 65%);
}
@media (prefers-color-scheme: dark) {
  :root[data-glass="on"]:not([data-theme="light"]) {
    --glass-bg: rgba(24, 31, 46, .55);
    --glass-bg-strong: rgba(24, 31, 46, .74);
    --glass-line: rgba(255, 255, 255, .10);
    --glass-edge: rgba(0, 0, 0, .35);
    --glass-hi: rgba(255, 255, 255, .14);
    --glass-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
    --glass-card: rgba(23, 29, 39, .86);
    --glass-wash:
      radial-gradient(1100px 700px at -5% -10%, rgba(75, 95, 209, .30), transparent 60%),
      radial-gradient(900px 620px at 105% 5%, rgba(217, 165, 77, .14), transparent 58%),
      radial-gradient(900px 700px at 55% 110%, rgba(240, 90, 90, .12), transparent 60%),
      radial-gradient(700px 500px at 30% 55%, rgba(91, 112, 219, .14), transparent 65%);
  }
}
:root[data-glass="on"][data-theme="dark"] {
  --glass-bg: rgba(24, 31, 46, .55);
  --glass-bg-strong: rgba(24, 31, 46, .74);
  --glass-line: rgba(255, 255, 255, .10);
  --glass-edge: rgba(0, 0, 0, .35);
  --glass-hi: rgba(255, 255, 255, .14);
  --glass-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
  --glass-card: rgba(23, 29, 39, .86);
  --glass-wash:
    radial-gradient(1100px 700px at -5% -10%, rgba(75, 95, 209, .30), transparent 60%),
    radial-gradient(900px 620px at 105% 5%, rgba(217, 165, 77, .14), transparent 58%),
    radial-gradient(900px 700px at 55% 110%, rgba(240, 90, 90, .12), transparent 60%),
    radial-gradient(700px 500px at 30% 55%, rgba(91, 112, 219, .14), transparent 65%);
}

/* The background the glass floats over. */
:root[data-glass="on"] body:not(.exam-mode) { background: var(--glass-wash), var(--bg); background-attachment: fixed; }

/* ---------- the glass layer ---------- */
:root[data-glass="on"] .topbar,
:root[data-glass="on"] .sidenav,
:root[data-glass="on"] .app-dialog,
:root[data-glass="on"] .search-dialog,
:root[data-glass="on"] details.row-menu .row-menu-list,
:root[data-glass="on"] .appearance-menu,
:root[data-glass="on"] .toast {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-line);
}
/* Panels with a lot of text use a thicker glass. */
:root[data-glass="on"] .app-dialog,
:root[data-glass="on"] .search-dialog,
:root[data-glass="on"] details.row-menu .row-menu-list,
:root[data-glass="on"] .appearance-menu { background: var(--glass-bg-strong); }
:root[data-glass="on"] .topbar { border-bottom: 1px solid var(--glass-edge); }
:root[data-glass="on"] .sidenav { border-right: 1px solid var(--glass-edge); }
:root[data-glass="on"] .app-dialog::backdrop,
:root[data-glass="on"] .search-dialog::backdrop { background: rgba(16, 24, 40, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
:root[data-glass="on"] .toast { color: var(--ink); }

/* Floating side menu on wide screens: rounded, inset from the edges, like a sidebar in Apple's design. */
@media (min-width: 1024px) {
  :root[data-glass="on"] .sidenav { top: calc(var(--top-h) + 10px); bottom: 10px; left: 10px; width: calc(var(--nav-w) - 16px); border-radius: 18px; border: 1px solid var(--glass-line); }
}
:root[data-glass="on"] .sidenav .tab { border-radius: 999px; }
:root[data-glass="on"] .sidenav .tab:hover { background: var(--glass-hi); }
:root[data-glass="on"] .sidenav .tab.active { background: var(--brand-soft); box-shadow: inset 0 1px 0 var(--glass-hi); }

/* Header controls become rounded pills that sit in the glass. */
:root[data-glass="on"] .topbar .btn.secondary,
:root[data-glass="on"] .topbar .theme-btn,
:root[data-glass="on"] .topbar .menu-btn,
:root[data-glass="on"] .search-btn { border-radius: 999px; background: var(--glass-hi); border-color: var(--glass-line); }

/* ---------- content layer: nearly solid ("thick" material), no blur ---------- */
:root[data-glass="on"] .card,
:root[data-glass="on"] .home-card,
:root[data-glass="on"] .ph-card,
:root[data-glass="on"] .table-wrap,
:root[data-glass="on"] .stat { background: var(--glass-card); }

/* The sign-in card floats like a sheet, so it gets glass too. */
:root[data-glass="on"] .signin { background: transparent; }
:root[data-glass="on"] .signin-inner {
  background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); border-radius: 22px; padding: 32px 30px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* ---------- fall back to solid when asked, or when blur isn't available ---------- */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root[data-glass="on"] .topbar, :root[data-glass="on"] .sidenav, :root[data-glass="on"] .app-dialog,
  :root[data-glass="on"] .search-dialog, :root[data-glass="on"] details.row-menu .row-menu-list,
  :root[data-glass="on"] .appearance-menu, :root[data-glass="on"] .toast, :root[data-glass="on"] .signin-inner {
    background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root[data-glass="on"] .card, :root[data-glass="on"] .home-card, :root[data-glass="on"] .ph-card,
  :root[data-glass="on"] .table-wrap, :root[data-glass="on"] .stat { background: var(--card); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-glass="on"] .topbar, :root[data-glass="on"] .sidenav, :root[data-glass="on"] .app-dialog,
  :root[data-glass="on"] .search-dialog, :root[data-glass="on"] details.row-menu .row-menu-list,
  :root[data-glass="on"] .appearance-menu, :root[data-glass="on"] .toast, :root[data-glass="on"] .signin-inner { background: var(--card); }
}