/* DRAFT: persistent version of the original DartyForLife glass capsule. */
body[data-glass-dock] {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
html:has(.glass-dock) {
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}
.gtabs.glass-dock {
  box-sizing: border-box;
  position: fixed;
  z-index: 1100;
  inset: auto 0 calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: stretch;
  width: min(500px, calc(100% - 28px));
  min-width: 0;
  max-width: none;
  min-height: 62px;
  margin: 0 auto;
  padding: 6px;
  border: 0;
  border-radius: 100px;
  background: rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(9px) saturate(240%) brightness(1.18);
  backdrop-filter: blur(9px) saturate(240%) brightness(1.18);
  box-shadow: 0 18px 48px -18px #0009, 0 2px 6px -1px #0004,
    inset 0 1px 0 #ffffff66, inset 0 -1px 0 #ffffff14;
  isolation: isolate;
}
.gtabs.glass-dock::before,
.gtabs.glass-dock .gtabs-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, #ffffffb3, #ffffff33 25%, #ffffff1a 55%, #ffffff40 85%, #ffffffa6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.gtabs.glass-dock::after { display: none; }
.gtabs.glass-dock .gtabs-pill {
  box-sizing: border-box;
  position: absolute;
  inset: 6px auto 6px 0;
  width: calc((100% - 12px) / 4);
  height: auto;
  border: 0;
  border-radius: 100px;
  transform: translateX(6px);
  background: linear-gradient(180deg, #ffffff47, #ffffff17 52%, #ffffff26);
  box-shadow: 0 8px 22px -10px #0008, inset 0 1px 0 #ffffff66, inset 0 -1px 0 #ffffff1a;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: none;
}
.gtabs.glass-dock .gtabs-pill::after { display: none; }
.gtabs.glass-dock.ready .gtabs-pill {
  opacity: 1;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1);
}
.gtabs.glass-dock .gtab {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 12px 6px;
  border-radius: 100px;
  color: #f2f4f6;
  font: 700 13px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 4px #000b;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color .2s ease;
}
.gtabs.glass-dock .gtab[aria-current="page"] { color: #fff; }
.gtabs.glass-dock:not(.ready) .gtab.is-active { background: #ffffff20; }
.gtabs.glass-dock .gtab:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
body[data-glass-dock] #islandBtn { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
body[data-glass-dock] #islandPanel { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
@media(max-width:600px) {
  .gtabs.glass-dock { width: calc(100% - 24px); min-height: 58px; padding: 5px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .gtabs.glass-dock .gtabs-pill { top: 5px; bottom: 5px; }
  .gtabs.glass-dock .gtab { min-height: 46px; font-size: 10.5px; padding: 10px 2px; }
}
@media(prefers-reduced-motion:reduce) {
  .gtabs.glass-dock.ready .gtabs-pill, .gtabs.glass-dock .gtab { transition: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gtabs.glass-dock { background-color: #1d222b; }
}

/* Shared glass finish for the header and action buttons. */
header.site,
header.site.scrolled {
  background: linear-gradient(120deg, #ffffff18, #ffffff03 45%, #ffffff0d), rgba(14,18,24,.42);
  border-bottom: 1px solid #ffffff3b;
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 0 1px 0 #ffffff29, 0 6px 24px #0002;
}
header.site.scrolled { background-color: rgba(14,18,24,.65); }
body[data-glass-dock] :is(.btn,.btn-primary,.btn-bars,.btn-asu,.ev-cta,.hamburger,.menu-close,.gm-close) {
  background: linear-gradient(155deg, #ffffff30, #ffffff08 48%, #ffffff17), rgba(20,24,30,.64) !important;
  color: #f7f8fa !important;
  border: 1px solid #ffffff52 !important;
  box-shadow: inset 0 1px 1px #ffffff80, inset 0 -1px 0 #ffffff1f, 0 5px 16px #0003 !important;
  -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
  backdrop-filter: blur(8px) saturate(160%) !important;
  text-shadow: 0 1px 3px #0009;
  transition: background-color .18s ease, border-color .18s ease;
}
/* The header already blurs its backdrop; avoid stacking another blur inside it. */
body[data-glass-dock] header.site :is(.btn,.hamburger) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (hover:hover) {
  body[data-glass-dock] :is(.btn,.ev-cta,.hamburger,.menu-close,.gm-close):hover {
    background-color: rgba(65,72,83,.78) !important;
    border-color: #ffffff94 !important;
  }
}
body[data-glass-dock] :is(.btn,.ev-cta,.hamburger,.menu-close,.gm-close):active {
  background-color: rgba(12,16,22,.82) !important;
}
body[data-glass-dock] :is(.btn,.ev-cta,.hamburger,.menu-close,.gm-close):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  header.site,header.site.scrolled { background-color:#20242b; }
  body[data-glass-dock] :is(.btn,.ev-cta,.hamburger,.menu-close,.gm-close) { background-color:#252a32 !important; }
}

/* Notification actions need crisp type, without a blurred dark surface. */
body[data-glass-dock] .empty-note button[data-notify] {
  background:#f4f4f0 !important; color:#171717 !important;
  text-shadow:none !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid #f4f4f0 !important;
}
body[data-glass-dock] .empty-note button[data-notify]:hover {
  background:#fff !important; border-color:#fff !important;
}