/* ============================================================
   css/shell-glass.css -- the liquid-glass skin of the app SHELL
   and the dashboard's widgets (26 Sep 2026, Kemal: "the actual
   platform" still showed white boxed nav buttons and opaque white
   pills after the page fragments moved to the shared atoms).

   WHAT THIS FILE OWNS
     sidebar  nav items, the Dashboard quick action, the greeting,
              the section labels, the OTHERS tray (Setting/Logout)
     header   every pill on the teal bar (menu, theme, language,
              notifications, profile, copy link)
     dashboard  stat tiles, category cards, the map overlay card,
              the chart cards' surface, the Refresh button
     floating the Feedback button and the eDash bot bubble

   THE MATERIAL, per DESIGN.md (glass is chrome, never content):
     * Controls and chrome are glass: a translucent tint, a specular
       top rim, a faint dark bottom rim, and a soft depth shadow.
     * The active nav item is a LIT glass pill: brand-teal glass with
       a specular sheen and a teal glow, white ink (>= 6.3:1).
     * Cards that hold a chart, a table or long text stay a flat,
       opaque, readable surface; they get a glass rim, no blur.
     * Refraction (the SVG displacement filter css/liquid.css and
       js/liquid.js own) is spent on three hero controls only: the
       bot bubble, the Feedback button and Refresh. Everything else
       costs no backdrop-filter at all -- the sidebar and header
       already carry their own tint/blur, so a nav item or a header
       pill only needs tint + rim to read as glass. That keeps the
       number of compositor layers flat, so scrolling the nav or a
       page never re-runs a blur per item.

   CASCADE. Loads after the master/ and page stylesheets and before
   css/liquid.css and css/glass.css (glass.css must stay last,
   scripts/check-stylesheet-order.py). Every selector below is written
   one class heavier than the glass.css dark-patch rule it has to beat
   (for example `html body .po-page .po-summary > .po-summary-item`,
   0,3,2, over glass.css's `html[data-theme="dark"] .po-page
   .po-summary-item`, 0,3,1), so source order is never what decides.

   FALLBACKS. The --sg-* plate tokens fold to opaque paper under
   html.glass-lite and under prefers-reduced-transparency /
   prefers-contrast / forced-colors (section 7); every transition is
   dropped under prefers-reduced-motion. No font-size or radius
   literal is added (scripts/check-type-roles.py): sizes read
   var(--type-*-size), radii var(--r-*).
   ============================================================ */

/* ------------------------------------------------------------
   0. TOKENS -- light, then the dark twin of every colour.
   ------------------------------------------------------------ */
:root {
  /* a control's resting glass on a light rail/card */
  --sg-plate: rgba(255, 255, 255, .58);
  --sg-plate-hover: rgba(255, 255, 255, .86);
  --sg-plate-edge: rgba(37, 52, 63, .10);
  --sg-rim-hi: rgba(255, 255, 255, .95);
  --sg-rim-lo: rgba(8, 20, 24, .07);
  --sg-depth: rgba(11, 79, 84, .14);
  /* raised stat tile: a vertical glass gradient */
  --sg-tile-top: rgba(255, 255, 255, .96);
  --sg-tile-bottom: rgba(236, 245, 245, .70);
  /* the lit pill: brand teal, both ends >= 6.3:1 against white ink */
  --sg-lit-top: #0F6A71;
  --sg-lit-bottom: #0B4F54;
  --sg-lit-edge: rgba(255, 255, 255, .30);
  --sg-lit-sheen: rgba(255, 255, 255, .22);
  --sg-lit-glow: rgba(15, 106, 113, .42);
  --sg-lit-ink: #FFFFFF;
  /* nav ink */
  --sg-ink: #25343F;
  --sg-icon: #0F6A71;
  --sg-danger-ink: #B3261E;          /* 6.1:1 on the light rail */
  --sg-danger-wash: rgba(214, 69, 69, .10);
  --sg-greet-accent: #A65200;        /* brand orange, deepened to 5.1:1 */
  --sg-greet-ink: #55676A;
  /* pills on the teal header: a smoked glass, white ink >= 6:1 */
  --sg-bar-pill: rgba(3, 34, 38, .26);
  --sg-bar-pill-hover: rgba(3, 34, 38, .40);
  --sg-bar-edge: rgba(255, 255, 255, .30);
  --sg-bar-rim: rgba(255, 255, 255, .34);
  --sg-bar-ink: #FFFFFF;
  --sg-bar-ink-soft: rgba(255, 255, 255, .86);
  /* the flat, readable surface under charts and lists */
  --sg-flat: #FFFFFF;
  /* focus */
  --sg-focus: #0F6A71;
  --sg-focus-on-bar: #FFFFFF;
  --sg-focus-halo: rgba(15, 106, 113, .28);
  /* map overlay card: thick glass over a moving map */
  --sg-overlay: rgba(255, 255, 255, .74);
  /* THE BACKDROP (section 8): a pre-blurred solar-field photo, a veil
     and three brand orbs, fixed behind the whole shell. */
  --bd-image: url("../assets/shell-backdrop-light.webp");
  --bd-base: #DCEBE8;
  --bd-veil: rgba(244, 248, 247, .16);
  --bd-orb-a: rgba(33, 167, 174, .46);   /* brand teal, top-left, behind the rail */
  --bd-orb-b: rgba(109, 195, 187, .52);  /* brand mint, bottom-right */
  --bd-orb-c: rgba(250, 137, 26, .16);   /* a low sun, centre-right */
  /* the chrome that now shows it: translucent, not white */
  --sg-rail: rgba(255, 255, 255, .50);
  --sg-rail-edge: rgba(255, 255, 255, .72);
  --sg-bar: rgba(15, 106, 113, .80);
  --sg-page: rgba(244, 247, 247, .80);
  --sg-page-muted: #4A5B5E;             /* bare page subtitles: >= 4.5:1 on the veil */
  --sg-nav-title: #3F5053;               /* 5.0:1+ on the thinner rail */
}
html[data-theme="dark"] {
  --sg-plate: rgba(255, 255, 255, .045);
  --sg-plate-hover: rgba(255, 255, 255, .09);
  --sg-plate-edge: rgba(231, 239, 240, .10);
  --sg-rim-hi: rgba(255, 255, 255, .12);
  --sg-rim-lo: rgba(0, 0, 0, .30);
  --sg-depth: rgba(0, 0, 0, .40);
  --sg-tile-top: rgba(255, 255, 255, .075);
  --sg-tile-bottom: rgba(255, 255, 255, .02);
  --sg-lit-top: #14808A;
  --sg-lit-bottom: #0B4F54;
  --sg-lit-edge: rgba(159, 222, 215, .38);
  --sg-lit-sheen: rgba(255, 255, 255, .16);
  --sg-lit-glow: rgba(33, 167, 174, .38);
  --sg-lit-ink: #FFFFFF;
  --sg-ink: #D3E1E3;
  --sg-icon: #6DC3BB;
  --sg-danger-ink: #EF7B7B;
  --sg-danger-wash: rgba(239, 107, 107, .14);
  --sg-greet-accent: #FA9A3A;
  --sg-greet-ink: #9AB0B4;
  --sg-bar-pill: rgba(0, 0, 0, .26);
  --sg-bar-pill-hover: rgba(0, 0, 0, .40);
  --sg-bar-edge: rgba(255, 255, 255, .20);
  --sg-bar-rim: rgba(255, 255, 255, .20);
  --sg-bar-ink: #FFFFFF;
  --sg-bar-ink-soft: rgba(255, 255, 255, .84);
  --sg-flat: #18272C;
  --sg-focus: #9FDED7;
  --sg-focus-on-bar: #FFFFFF;
  --sg-focus-halo: rgba(159, 222, 215, .30);
  --sg-overlay: rgba(20, 34, 39, .78);
  --bd-image: url("../assets/shell-backdrop-dark.webp");
  --bd-base: #0E1B1F;
  --bd-veil: rgba(10, 20, 24, .18);
  --bd-orb-a: rgba(20, 128, 138, .60);
  --bd-orb-b: rgba(33, 167, 174, .34);
  --bd-orb-c: rgba(250, 137, 26, .14);
  --sg-rail: rgba(14, 28, 32, .40);
  --sg-rail-edge: rgba(255, 255, 255, .14);
  --sg-bar: rgba(12, 84, 90, .70);
  --sg-page: rgba(12, 22, 26, .66);
  --sg-page-muted: #9AB0B4;
  --sg-nav-title: #A9BDC0;
}

/* ------------------------------------------------------------
   1. SIDEBAR -- nav items are glass rows, not white boxes.
   ------------------------------------------------------------ */
html body .edash-sidebar,
html body .edash-header,
html body .lg-modal {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Resting: no card, no outline -- the rail's own glass is the ground.
   Hover lifts a glass plate out of it. */
html body .edash-sidebar .sb-nav .sb-nav-item,
html body .edash-sidebar .sb-nav-group-footer .sb-nav-item,
html body .edash-sidebar .sb-quick-actions .sb-btn {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  color: var(--sg-ink);
  box-shadow: none;
  font-size: var(--type-body-size);
  font-weight: 500;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
html body .edash-sidebar :is(.sb-nav, .sb-nav-group-footer) .sb-nav-item .sb-nav-icon {
  background: transparent;
  border-radius: var(--r-ctl);
}
html body .edash-sidebar :is(.sb-nav, .sb-nav-group-footer) .sb-nav-item .sb-nav-icon i,
html body .edash-sidebar .sb-quick-actions .sb-btn i {
  color: var(--sg-icon);
}
html body .edash-sidebar :is(.sb-nav, .sb-nav-group-footer) .sb-nav-item:hover,
html body .edash-sidebar .sb-quick-actions .sb-btn:hover {
  background: var(--sg-plate-hover);
  border-color: var(--sg-plate-edge);
  color: var(--sg-ink);
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), inset 0 -1px 0 var(--sg-rim-lo),
              0 6px 16px -10px var(--sg-depth);
}
html body .edash-sidebar :is(.sb-nav, .sb-nav-group-footer) .sb-nav-item:hover .sb-nav-icon {
  background: transparent;
}

/* ACTIVE: the lit glass pill. Teal glass, a specular sheen across the
   top third (::before, never over the label's x-height), a light
   edge and a teal glow underneath. White ink, 6.3:1 at the lightest
   stop in light theme, 5.1:1+ in dark. */
html body .edash-sidebar :is(.sb-nav, .sb-nav-group-footer) .sb-nav-item.is-active,
html body .edash-sidebar .sb-quick-actions .sb-btn.is-active {
  background: linear-gradient(180deg, var(--sg-lit-top), var(--sg-lit-bottom));
  border: 1px solid var(--sg-lit-edge);
  color: var(--sg-lit-ink);
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--sg-lit-edge), inset 0 -1px 0 rgba(0, 0, 0, .18),
              0 8px 20px -8px var(--sg-lit-glow);
}
html body .edash-sidebar :is(.sb-nav, .sb-nav-group-footer) .sb-nav-item.is-active::before,
html body .edash-sidebar .sb-quick-actions .sb-btn.is-active::before {
  content: "";
  position: absolute;
  inset: 1px 1px 55% 1px;
  border-radius: var(--r-ctl) var(--r-ctl) 0 0;
  background: linear-gradient(180deg, var(--sg-lit-sheen), transparent);
  pointer-events: none;
}
html body .edash-sidebar :is(.sb-nav, .sb-nav-group-footer) .sb-nav-item.is-active .sb-nav-icon {
  background: transparent;
}
html body .edash-sidebar :is(.sb-nav, .sb-nav-group-footer) .sb-nav-item.is-active .sb-nav-icon i,
html body .edash-sidebar .sb-quick-actions .sb-btn.is-active i {
  color: var(--sg-lit-ink);
}

/* Focus: a visible ring on every control, outside the pill. */
html body .edash-sidebar :is(.sb-nav-item, .sb-btn, .sb-toggle):focus-visible {
  outline: 2px solid var(--sg-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--sg-focus-halo);
}

/* Section labels: small caps on the rail, read from the lifted ink
   glass.css already computes for AA (--mat-nav-title-ink). */
html body .edash-sidebar .sb-nav-group .sb-nav-title {
  margin: 0 0 6px 12px;
  font-size: var(--type-label-size);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--mat-nav-title-ink, var(--sg-greet-ink));
}
html body .edash-sidebar .sb-divider {
  height: 1px;
  border: 0;
  margin: 0 20px 14px;
  background: linear-gradient(90deg, transparent, var(--sg-plate-edge), transparent);
}
html body .edash-sidebar .sb-nav .sb-nav-group + .sb-nav-group {
  border-top-color: var(--sg-plate-edge);
}

/* Greeting: a small glass plate. "Hello," in the muted ink and the
   name in the brand orange, deepened in light theme so it clears AA
   (the old #FA891A was 2.4:1 -- flagged in glass.css section 2). */
html body .edash-sidebar .sb-greeting {
  margin: 0 16px 14px;
  padding: 10px 14px;
  font-size: var(--type-card-title-size);
  color: var(--sg-greet-ink);
  background: var(--sg-plate);
  border: 1px solid var(--sg-plate-edge);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), inset 0 -1px 0 var(--sg-rim-lo);
}
html body .edash-sidebar .sb-greeting .sb-greeting-label {
  font-weight: 500;
}
html body .edash-sidebar .sb-greeting .sb-greeting-name {
  color: var(--sg-greet-accent);
  font-weight: 700;
}

/* OTHERS: a glass tray instead of the opaque #6DC3BB slab (whose
   white rows were ~2:1). Setting reads like every other row; Logout
   is state-coloured by ink only, never by a red block. */
html body .edash-sidebar .sb-nav-group.sb-nav-group-footer {
  background: var(--sg-plate);
  border: 1px solid var(--sg-plate-edge);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), inset 0 -1px 0 var(--sg-rim-lo),
              0 10px 24px -16px var(--sg-depth);
  padding: 10px 8px;
}
html body .edash-sidebar .sb-nav-group.sb-nav-group-footer .sb-nav-title {
  color: var(--mat-nav-title-ink, var(--sg-greet-ink));
}
html body .edash-sidebar .sb-nav-group-footer .sb-nav-item.sb-nav-item-danger,
html body .edash-sidebar .sb-nav-group-footer .sb-nav-item.sb-nav-item-danger .sb-nav-icon i {
  color: var(--sg-danger-ink);
}
html body .edash-sidebar .sb-nav-group-footer .sb-nav-item.sb-nav-item-danger:hover {
  background: var(--sg-danger-wash);
  border-color: transparent;
  color: var(--sg-danger-ink);
}

/* The mobile drawer: the footer tray keeps its glass look inset from
   the drawer's edge instead of the full-bleed separator row. */
@media (max-width: 900px) {
  html body .edash-sidebar .sb-nav-group.sb-nav-group-footer {
    margin: 8px 16px 16px;
  }
}

/* ------------------------------------------------------------
   2. HEADER -- smoked-glass pills on the teal bar.
   ------------------------------------------------------------ */
html body .edash-header :is(.hd-menu-toggle, .hd-lang, .hd-notif, .hd-profile, .hd-link-btn) {
  background: var(--sg-bar-pill);
  border: 1px solid var(--sg-bar-edge);
  color: var(--sg-bar-ink);
  box-shadow: inset 0 1px 0 var(--sg-bar-rim), inset 0 -1px 0 rgba(0, 0, 0, .16),
              0 6px 14px -8px rgba(0, 0, 0, .35);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html body .edash-header :is(.hd-menu-toggle, .hd-lang, .hd-notif, .hd-profile, .hd-link-btn):hover {
  background: var(--sg-bar-pill-hover);
  border-color: var(--sg-bar-rim);
  color: var(--sg-bar-ink);
  transform: none;
}
html body .edash-header :is(.hd-menu-toggle, .hd-lang, .hd-notif, .hd-link-btn) i,
html body .edash-header .hd-lang .hd-lang-current,
html body .edash-header .hd-profile .hd-profile-name,
html body .edash-header .hd-profile .hd-caret {
  color: var(--sg-bar-ink);
}
html body .edash-header .hd-profile .hd-profile-role {
  color: var(--sg-bar-ink-soft);
}
html body .edash-header .hd-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: var(--r-chip);
  font-size: var(--type-body-size);
  cursor: pointer;
}
html body .edash-header .hd-theme-toggle {
  border-color: var(--sg-bar-edge);
  box-shadow: inset 0 1px 0 var(--sg-bar-rim), inset 0 1px 4px rgba(0, 0, 0, .22),
              0 6px 14px -8px rgba(0, 0, 0, .35);
}
html body .edash-header :is(.hd-menu-toggle, .hd-lang, .hd-notif, .hd-profile, .hd-link-btn, .hd-theme-toggle):focus-visible {
  outline: 2px solid var(--sg-focus-on-bar);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(3, 34, 38, .45);
}
@media (max-width: 1024px) {
  html body .edash-header .hd-link-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* ------------------------------------------------------------
   3. DASHBOARD -- flat readable cards, glass controls inside.
   ------------------------------------------------------------ */
/* Every dashboard card: an opaque surface with a glass rim, NO blur.
   They hold the map, charts and lists (DESIGN.md: no glass under
   content), and a blurred card behind a re-drawing chart is the
   scroll-jank this repo already removed once (TKT-000454). */
html body .po-page .po-card.card {
  background: var(--sg-flat);
  border: 1px solid var(--glass-edge, var(--sg-plate-edge));
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), 0 1px 2px var(--sg-rim-lo),
              0 14px 32px -20px var(--sg-depth);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* Stat tiles (All Projects / Online / Offline / Active Alerts):
   raised glass tiles, gradient + rim + depth; the value is opaque ink. */
html body .po-page .po-summary > .po-summary-item {
  background: linear-gradient(180deg, var(--sg-tile-top), var(--sg-tile-bottom));
  border: 1px solid var(--sg-plate-edge);
  border-radius: var(--r-ctl);
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), inset 0 -1px 0 var(--sg-rim-lo),
              0 6px 16px -10px var(--sg-depth);
  padding: 10px 4px;
  gap: 5px;
}
html body .po-page .po-summary > .po-summary-item .po-summary-value {
  font-size: var(--type-card-title-size);
}
html body .po-page .po-summary > .po-summary-item .po-summary-label {
  font-size: var(--type-label-size);
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}
html body .po-page .po-summary > .po-summary-item .po-summary-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--r-chip);
  box-shadow: inset 0 1px 0 var(--sg-rim-hi);
}

/* Category cards: the same raised glass, the category's own colour
   kept as a soft wash from the icon side (set inline by
   js/dashboard.js as --cat-color). */
html body .po-page .po-legend-list > .po-legend-row {
  background: linear-gradient(180deg, var(--sg-tile-top), var(--sg-tile-bottom));
  background: linear-gradient(100deg, color-mix(in srgb, var(--cat-color, var(--sg-icon)) 12%, transparent), transparent 65%),
              linear-gradient(180deg, var(--sg-tile-top), var(--sg-tile-bottom));
  border: 1px solid var(--sg-plate-edge);
  border-radius: var(--r-ctl);
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), inset 0 -1px 0 var(--sg-rim-lo),
              0 6px 16px -10px var(--sg-depth);
}
html body .po-page .po-legend-list > .po-legend-row .po-legend-icon {
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), 0 4px 10px -6px var(--sg-depth);
}

/* Map overlay card: thick glass over the map (chrome floating on
   content, like a popover), one blur, read from the material token
   so every gate turns it off. */
html body .po-page .po-map-card .po-map-stat {
  background: var(--sg-overlay);
  border: 1px solid var(--sg-plate-edge);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), inset 0 -1px 0 var(--sg-rim-lo),
              0 16px 32px -14px var(--sg-depth);
  -webkit-backdrop-filter: var(--mat-filter-regular);
          backdrop-filter: var(--mat-filter-regular);
}

/* Chart tool chips (PNG / SVG / Image / Link) under every chart card
   (js/chart-export.js): small glass chips, no blur -- they sit on the
   card's flat surface. 44x44 minimum, a phone in the field. */
html body .ed-card-tools .ed-card-tool {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 14px;
  font: 600 var(--type-button-size) / 1 'Montserrat', sans-serif;
  background: var(--sg-plate);
  border: 1px solid var(--sg-plate-edge);
  border-radius: var(--r-chip);
  color: var(--sg-ink);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), inset 0 -1px 0 var(--sg-rim-lo),
              0 4px 10px -8px var(--sg-depth);
  transition: background .18s ease;
}
html body .ed-card-tools .ed-card-tool:hover {
  background: var(--sg-plate-hover);
}
html body .ed-card-tools .ed-card-tool:focus-visible {
  outline: 2px solid var(--sg-focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   4. HERO CONTROLS -- Refresh, Feedback, the bot bubble.
      Glass pill + rim + depth on every tier; the cheap button blur
      on `glass`; refraction on glass-hd (section 5).
   ------------------------------------------------------------ */
html body .po-page .po-refresh-btn.btn,
html body .fbfab .fbfab-btn,
html body .eb-fab {
  background: linear-gradient(180deg, var(--sg-tile-top), var(--sg-plate));
  border: 1px solid var(--sg-plate-edge);
  border-radius: var(--r-chip);
  color: var(--sg-icon);
  box-shadow: inset 0 1px 0 var(--sg-rim-hi), inset 0 -1px 0 var(--sg-rim-lo),
              0 10px 24px -10px var(--sg-depth);
}
html body .po-page .po-refresh-btn.btn:hover:not(:disabled),
html body .fbfab .fbfab-btn:hover {
  background: var(--sg-plate-hover);
  color: var(--sg-icon);
}
html[data-theme="dark"] body .po-page .po-refresh-btn.btn,
html[data-theme="dark"] body .fbfab .fbfab-btn {
  color: var(--sg-ink);
}
html body .po-page .po-refresh-btn.btn:focus-visible,
html body .fbfab .fbfab-btn:focus-visible,
html body .eb-fab:focus-visible {
  outline: 2px solid var(--sg-focus);
  outline-offset: 3px;
}
html body .eb-fab {
  padding: 0;
  overflow: hidden;
}
html.glass body :is(.fbfab .fbfab-btn, .eb-fab, .po-page .po-refresh-btn.btn) {
  -webkit-backdrop-filter: var(--mat-filter-button);
          backdrop-filter: var(--mat-filter-button);
}

/* ------------------------------------------------------------
   5. REFRACTION on the hero controls only (glass-hd, >= 768px,
      and only once js/liquid.js has set .liquid-refract, which it
      refuses under reduced motion / transparency / more contrast /
      forced colours). js/liquid.js tags them `.liquid`.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  html.glass-hd body :is(.fbfab .fbfab-btn, .eb-fab, .po-page .po-refresh-btn.btn) {
    -webkit-backdrop-filter: var(--mat-filter-button);
            backdrop-filter: var(--mat-filter-button);
  }
  html.glass-hd.liquid-refract body :is(.fbfab .fbfab-btn, .eb-fab, .po-page .po-refresh-btn.btn).liquid {
    -webkit-backdrop-filter: var(--mat-filter-button);
            backdrop-filter: url(#edash-liquid-filter) var(--mat-filter-button);
  }
}

/* ------------------------------------------------------------
   6. MOTION -- nothing here animates on its own; hover fades are
      the only transitions and they go under reduced motion.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html body .edash-sidebar :is(.sb-nav-item, .sb-btn),
  html body .edash-header :is(.hd-menu-toggle, .hd-lang, .hd-notif, .hd-profile, .hd-link-btn),
  html body .ed-card-tools .ed-card-tool {
    transition: none;
  }
}

/* ------------------------------------------------------------
   7. THE GATES -- lite tier, reduced transparency, more contrast,
      forced colours: every translucent plate becomes opaque paper
      and every blur this file reads is already `none` via the
      --mat-filter-* tokens glass.css resets. Tokens only, no
      component selector, same shape as glass.css's own gates.
   ------------------------------------------------------------ */
html.glass-lite, html.glass-lite[data-theme="dark"] {
  --sg-plate: var(--glass-paper);
  --sg-plate-hover: var(--glass-paper);
  --sg-tile-top: var(--glass-paper);
  --sg-tile-bottom: var(--glass-paper);
  --sg-overlay: var(--glass-paper);
  --bd-image: none;
  --bd-veil: transparent;
  --bd-orb-a: transparent;
  --bd-orb-b: transparent;
  --bd-orb-c: transparent;
  --sg-rail: var(--mat-rail-solid);
  --sg-bar: var(--mat-bar-solid);
  --sg-page: var(--glass-paper-page);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  :root, :root[data-theme="dark"] {
    --sg-plate: var(--glass-paper);
    --sg-plate-hover: var(--glass-paper);
    --sg-tile-top: var(--glass-paper);
    --sg-tile-bottom: var(--glass-paper);
    --sg-overlay: var(--glass-paper);
    --sg-bar-pill: var(--mat-bar-solid);
    --sg-bar-pill-hover: var(--mat-bar-solid);
    --bd-image: none;
    --bd-veil: transparent;
    --bd-orb-a: transparent;
    --bd-orb-b: transparent;
    --bd-orb-c: transparent;
    --sg-rail: var(--mat-rail-solid);
    --sg-bar: var(--mat-bar-solid);
    --sg-page: var(--glass-paper-page);
  }
}
/* (a) no backdrop-filter support: the same solid shell, as glass.css does. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme="dark"] {
    --bd-image: none;
    --bd-veil: transparent;
    --bd-orb-a: transparent;
    --bd-orb-b: transparent;
    --bd-orb-c: transparent;
    --sg-rail: var(--mat-rail-solid);
    --sg-bar: var(--mat-bar-solid);
    --sg-page: var(--glass-paper-page);
  }
}
/* The escape hatch css/liquid.css section 4 keeps for its surfaces,
   for these three: a stale .liquid-refract never outlives a gate. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html body :is(.fbfab .fbfab-btn, .eb-fab, .po-page .po-refresh-btn.btn) {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
}
@media (prefers-contrast: more) {
  :root { --sg-plate-edge: #25343F; --sg-bar-edge: #FFFFFF; }
  :root[data-theme="dark"] { --sg-plate-edge: #E7EFF0; --sg-bar-edge: #FFFFFF; }
}
@media (forced-colors: active) {
  html body .edash-sidebar :is(.sb-nav-item, .sb-btn).is-active {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  html body .edash-sidebar :is(.sb-nav-item, .sb-btn).is-active::before {
    display: none;
  }
}

/* ------------------------------------------------------------
   8. THE BACKDROP -- something behind the glass (26 Sep 2026,
      Kemal: "the real platform has no liquid glass"). #66 made the
      rail and bar glass, but over a flat grey they read as a white
      panel: a translucent surface over one colour is just another
      colour. This puts the eDash solar field behind the shell.

   WHAT IT IS. One fixed element (.edash-backdrop, index.html) that
   paints assets/shell-backdrop-{light,dark}.webp -- the landing's
   site-1920 photo, cropped 16:10 to 1120x700, colour x1.45, Gaussian
   blur r=20 and toned to a pastel (light: 40% #DEF2EE) or a deep
   teal (dark: x0.72 then 42% #09181C), all at BUILD time with
   Pillow, WebP q62: 4.6 KB and 3.7 KB. No runtime filter touches it;
   `background-size: cover` upscales an image that is blurry anyway.
   Three radial-gradient orbs in brand teal, mint and a low sun sit
   on it and drift on transform only (48-64s), so the compositor
   moves them without a repaint; they stop under reduced motion and
   vanish under reduced transparency, more contrast, forced colours,
   no backdrop-filter support and the lite tier (section 7 gates).

   It sits above glass.css's own .edash-layout::before ground (same
   z-index, later in tree order), which stays as the fallback fill.

   WHAT SHOWS IT.
     .edash-sidebar >=901px  --sg-rail, 50% white / 54% ink, plus
                             blur+saturate in glass-hd (>=901px)
     .edash-header           --sg-bar, teal 80% / 70%
     .edash-content          --sg-page, an 80% / 66% veil of the page
                             colour so bare page text keeps AA;
                             cards with charts, tables and lists keep
                             their own flat, opaque surface (DESIGN.md
                             "glass is chrome, never content").
   ------------------------------------------------------------ */
html body .edash-layout > .edash-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background-color: var(--bd-base);
  background-image: linear-gradient(var(--bd-veil), var(--bd-veil)), var(--bd-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
html body .edash-backdrop > .edash-orb {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(closest-side, var(--bd-orb-a), transparent);
  will-change: transform;
}
html body .edash-backdrop > .edash-orb-a { top: -34vmax; left: -26vmax; }
html body .edash-backdrop > .edash-orb-b {
  right: -30vmax;
  bottom: -36vmax;
  background: radial-gradient(closest-side, var(--bd-orb-b), transparent);
}
html body .edash-backdrop > .edash-orb-c {
  top: 8vh;
  right: 6vw;
  width: 44vmax;
  height: 44vmax;
  background: radial-gradient(closest-side, var(--bd-orb-c), transparent);
}
@keyframes edash-orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vmax, 5vmax, 0) scale(1.08); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.glass-lite) body .edash-backdrop > .edash-orb {
    animation: edash-orb-drift 56s ease-in-out infinite alternate;
  }
  html:not(.glass-lite) body .edash-backdrop > .edash-orb-b { animation-duration: 64s; animation-direction: alternate-reverse; }
  html:not(.glass-lite) body .edash-backdrop > .edash-orb-c { animation-duration: 48s; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html body .edash-backdrop > .edash-orb { display: none; animation: none; }
}
html.glass-lite body .edash-backdrop > .edash-orb { display: none; }

/* The reading ground: a veil, not a wall. :not(:fullscreen) leaves a
   fullscreen operator chart on its own ground. */
html body .edash-layout .edash-content:not(:fullscreen),
html[data-theme="dark"] body .edash-layout .edash-content:not(:fullscreen) {
  background: var(--sg-page);
}

/* Bare page subtitles and tabs sit on the veil, not on a card. They
   shipped at --muted #7C8B8D (3.36:1 on flat paper, under AA before
   this file); on the veil they take an ink that clears 4.5:1 at the
   ground's darkest pixel, in both themes. */
html body .edash-layout .edash-content :is(h1, h2) + p,
html[data-theme="dark"] body .edash-layout .edash-content :is(h1, h2) + p,
html body .edash-layout .edash-content .adx-tabs > .adx-tab:not(.is-active),
html[data-theme="dark"] body .edash-layout .edash-content .adx-tabs > .adx-tab:not(.is-active) {
  color: var(--sg-page-muted);
}

/* The bar: teal glass over the photo, the specular rim on top. */
html body .edash-layout .edash-header,
html[data-theme="dark"] body .edash-layout .edash-header {
  background: var(--sg-bar);
  box-shadow:
    inset 0 1px 0 var(--mat-hi-deep),
    inset 0 -1px 0 var(--liquid-rim-lo),
    var(--mat-shadow-2);
}

/* The rail (desktop column only; the <=900px drawer floats over page
   content and keeps glass.css's thick tint). */
@media (min-width: 901px) {
  html body .edash-layout .edash-sidebar,
  html[data-theme="dark"] body .edash-layout .edash-sidebar {
    background: var(--sg-rail);
    box-shadow:
      inset 0 1px 0 var(--liquid-rim-hi),
      inset -1px 0 0 var(--sg-rail-edge),
      var(--mat-shadow-1);
  }
  html body .edash-layout .edash-sidebar .sb-nav-group:not(.sb-nav-group-footer) .sb-nav-title,
  html[data-theme="dark"] body .edash-layout .edash-sidebar .sb-nav-group:not(.sb-nav-group-footer) .sb-nav-title {
    color: var(--sg-nav-title);
  }
}

/* Frost: only the hd tier, only the desktop column and the bar. Reads
   --mat-filter-regular (blur 18 + saturate 1.4), which every lite /
   reduced-transparency gate already sets to none. What is behind them
   is the still photo and the slow orbs, never scrolling content, so
   this re-runs only as the orbs drift. css/liquid.css's refraction
   rule (0,4,1) still wins where it applies. */
@media (min-width: 901px) {
  html.glass-hd body .edash-layout .edash-sidebar,
  html.glass-hd body .edash-layout .edash-header {
    -webkit-backdrop-filter: var(--mat-filter-regular);
            backdrop-filter: var(--mat-filter-regular);
  }
}

/* The logo's "eDash" wordmark is #4A5666, 2.1:1 on the dark rail. Dark
   swaps in the same logo with the wordmark recoloured #E4F1F1 (the
   teal roundel untouched). A browser without content:url() on <img>
   keeps today's logo. */
html[data-theme="dark"] body .edash-sidebar .sb-brand-logo {
  content: url("../assets/images/logo-on-dark.png");
}