/* ============================================================
   glass.css: the material tiers and the gates. Loads LAST on every
   page that links it (DESIGN.md principle 9).

   Ported from R3-eDash css/glass.css (GLASS-1 to GLASS-4) and the
   gates of css/shell-glass.css section 17, cut down to the surfaces
   stockflow has. The tier class on <html> is written once, before
   paint, by js/glassLite.js (inlined into every page head by
   src/lib/html.js):

     html.glass-lite  solid surfaces, no blur anywhere
     html.glass       the header pill, the user menu and the login
                      card get a real backdrop-filter
     html.glass-hd    the same, and liquid.css may add refraction

   A selector that ADDS a blur is written :where(html.glass...) so
   it never outranks a gate below.
   ============================================================ */

/* GLASS-1, the bar: the header pill floats over scrolling content
   on a desktop, so it frosts what passes under it. On a phone the
   pill is denser and nothing scrolls under it long enough to need
   the blur. */
@media (min-width: 861px) {
  /* the rail frosts the still wash behind it: one layer, it never scrolls content under it */
  :where(html.glass, html.glass-hd) body .sf-side {
    background: var(--gl-pill-glow), var(--gl-pill-tint-blur);
    -webkit-backdrop-filter: var(--gl-pill-blur);
            backdrop-filter: var(--gl-pill-blur);
  }
  :where(html.glass, html.glass-hd) body .sf-hpill {
    background: var(--gl-pill-tint-blur);
    -webkit-backdrop-filter: var(--gl-pill-blur);
            backdrop-filter: var(--gl-pill-blur);
  }
}

/* GLASS-2, the surface: the user menu and the login card */
:where(html.glass, html.glass-hd) body .sf-menu {
  background: var(--gl-sheen), var(--mat-thick);
  -webkit-backdrop-filter: var(--mat-filter-thick);
          backdrop-filter: var(--mat-filter-thick);
}
:where(html.glass, html.glass-hd) body .auth-card {
  background: var(--gl-sheen), var(--mat-regular);
  -webkit-backdrop-filter: var(--mat-filter-thick);
          backdrop-filter: var(--mat-filter-thick);
}
/* the public tracking header: a short pill over the map page */
:where(html.glass, html.glass-hd) body .trk-h {
  background: var(--gl-pill-tint-blur);
  -webkit-backdrop-filter: var(--mat-filter-regular);
          backdrop-filter: var(--mat-filter-regular);
}

/* ------------------------------------------------------------
   THE GATES. Same promise in all five: solid surfaces, no blur.
   ------------------------------------------------------------ */
html.glass-lite {
  --gl-pill-a: .97;
  --mat-thick: var(--surface);
  --mat-regular: var(--surface);
  --mat-thin: var(--surface);
  --mat-filter-thick: none;
  --mat-filter-regular: none;
  --gl-pill-blur: none;
}
html.glass-lite body :is(.sf-side, .sf-hpill, .sf-menu, .auth-card, .trk-h) {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --gl-pill-a: .97; --mat-thick: var(--surface); --mat-regular: var(--surface); --mat-thin: var(--surface); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  :root, :root[data-theme="dark"] {
    --gl-pill-a: .98;
    --gl-pill-tint-blur: var(--gl-pill-sheen), rgba(var(--gl-pill-rgb), .98);
    --mat-thick: var(--surface);
    --mat-regular: var(--surface);
    --mat-thin: var(--surface);
    --mat-filter-thick: none;
    --mat-filter-regular: none;
    --gl-pill-blur: none;
  }
  html body :is(.sf-side, .sf-hpill, .sf-menu, .auth-card, .trk-h) {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  html body .sf-nav a.on, html body .seg a.on {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  html body :is(.sf-side, .sf-hpill, .card, .btn) { border: 1px solid CanvasText; }
}