/* Liquid Glass over the opaque base in styles.css. Glass stays on the functional layer only:
   the sidebar, the toolbar's controls, sheets and toasts float above the content in a translucent,
   blurred material with a light rim; groups, tables and other content stay opaque (materials.md).
   Shapes round to capsules and concentric corners. Reduced transparency and increased contrast
   fall back to opaque surfaces. Rules are prefixed with :root so they outrank the base rule they
   restyle, including the base's own media-query variants. */
:root {
  --r-group: 14px;
  --r-inner: 9px;
  --r-control: 999px;
  --r-seg: 999px;
  --r-field: 9px;
  --r-search: 999px;
  --r-row: 9px;
  --r-sheet: 24px;
  --r-toast: 18px;
  --glass: rgba(255, 255, 255, 0.6);
  --glass-thick: rgba(255, 255, 255, 0.8);   /* text-heavy surfaces: sheets, toasts */
  --glass-thumb: rgba(255, 255, 255, 0.95);
  --glass-blur: blur(24px) saturate(1.5);
  --glass-rim: inset 0 0 0 0.5px rgba(255, 255, 255, 0.75), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --glass-lift: 0 8px 28px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --glass: rgba(44, 44, 46, 0.58);
    --glass-thick: rgba(44, 44, 46, 0.8);
    --glass-thumb: rgba(255, 255, 255, 0.2);
    --glass-rim: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --glass-lift: 0 8px 28px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

/* Sidebar: a floating glass pane, inset from the window edges. */
:root .sidebar {
  margin: 8px 0 8px 8px; top: 8px; height: calc(100vh - 16px);
  border-radius: 18px; padding: 14px 10px 12px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-lift);
}

/* Toolbar: no bar at all. Content fades and blurs where it meets the controls (scroll edge effect),
   and the controls themselves are glass capsules; the one prominent action is tinted glass. */
:root .topbar { background: transparent; }
:root .topbar::after {
  top: 0; bottom: -18px; height: auto; z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 80%, transparent) 70%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
  transition: opacity 200ms ease;
}
:root .topbar .btn,
:root .topbar .scope-toggle {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root .topbar .btn { min-height: 32px; padding: 6px 16px; }
:root .topbar .btn-secondary,
:root .topbar .scope-toggle {
  background: var(--glass); box-shadow: var(--glass-rim), var(--glass-lift);
}
:root .topbar .btn-secondary:hover:not(:disabled) { background: var(--glass-thick); }
:root .topbar .btn:not(.btn-secondary) {
  background: color-mix(in srgb, var(--blue) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 6px 18px color-mix(in srgb, var(--blue) 28%, transparent);
}
:root .topbar .btn:not(.btn-secondary):hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 88%, var(--label)); }
:root .topbar .scope-toggle { padding: 3px; }
:root .topbar .scope-toggle button { min-height: 26px; }
:root .topbar .scope-toggle button[aria-checked="true"] { background: var(--glass-thumb); }

/* Sheets and toasts: thicker glass, since they carry text. */
:root .launch-card,
:root .dialog,
:root .toast {
  background: var(--glass-thick);
  -webkit-backdrop-filter: blur(40px) saturate(1.6); backdrop-filter: blur(40px) saturate(1.6);
  box-shadow: var(--glass-rim), 0 24px 60px rgba(0, 0, 0, 0.22);
}
:root .dialog, :root .launch-card { padding: 22px; }
:root .dialog-actions .btn, :root .launch-actions .btn,
:root .dialog-actions .signout, :root .launch-actions .signout { min-width: 84px; }

/* Narrow windows: the sidebar becomes a floating glass bar that content scrolls under. */
@media (max-width: 900px) {
  :root .sidebar {
    margin: 8px 8px 0; top: 8px; height: auto; border-radius: 18px; padding: 10px 12px;
  }
}

/* Reduce Transparency and Increase Contrast: the same shapes, opaque. */
@media (prefers-reduced-transparency: reduce) {
  :root .sidebar { background: var(--sidebar); }
  :root .topbar .btn-secondary, :root .topbar .scope-toggle { background: var(--group); }
  :root .launch-card, :root .dialog, :root .toast { background: var(--elevated); }
  :root .sidebar, :root .topbar .btn, :root .topbar .scope-toggle,
  :root .topbar::after, :root .launch-card, :root .dialog,
  :root .toast { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root .topbar::after { background: var(--bg); -webkit-mask-image: none; mask-image: none; bottom: 0; }
}
@media (prefers-contrast: more) {
  :root .sidebar { background: var(--sidebar); box-shadow: 0 0 0 1px var(--separator); }
  :root .topbar .btn-secondary, :root .topbar .scope-toggle { background: var(--group); box-shadow: 0 0 0 1px var(--separator); }
  :root .launch-card, :root .dialog, :root .toast { background: var(--elevated); box-shadow: 0 0 0 1px var(--separator), var(--shadow-pop); }
}