/* UI-017 · load after surface CSS. Alpha, dimensions and spacing stay with their owners. */
.phone {
 --ui-glass-blur:13px;
 --ui-glass-saturation:1.12;
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 /* Background planes only: the labels, icons and animated character are never filtered. */
 .feed-header::before,
 .route-panel.dock-route>.route-top.dock-route-top,
 #routePanel>.route-top.fullscreen-route-top,
 .bottom-nav:has(.dock-character)::before,
 .bottom-nav:has(.dock-character)::after {
  -webkit-backdrop-filter:blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturation));
  backdrop-filter:blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturation));
 }

 /* Keep the parent unfiltered. Sibling ridge/rectangle backgrounds meet at bottom:100%
    without overlapping, so neither alpha nor blur is applied twice at the shoulder.
    The original ::before geometry remains available to the existing clearance reader. */
 .bottom-nav:has(.dock-character) {background:none;}
 .bottom-nav:has(.dock-character)::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:var(--dock-bar-surface);
 }
}

/* Reminder cards/overflow/collapsed pill already own blur(8px); retain them as-is.
   Unsupported engines retain the existing translucent surfaces with no new alpha. */