/* Transparent components. Their host supplies the backdrop and foreground. */
.glass-surface {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-edge);
  border-radius: var(--glass-radius);
  background: var(--glass-face), var(--glass-fill);
  box-shadow: var(--glass-bevel), var(--glass-shadow);
}
.glass-surface::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.glass-surface:where([data-waypoint]:not([data-waypoint="none"]))::after {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--waypoint-x, 50%);
  width: 104px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--waypoint-color), transparent);
  opacity: 0.84;
  pointer-events: none;
}
.waypoint-wash {
  position: absolute;
  top: 0;
  left: var(--waypoint-x, 50%);
  width: min(148px, 30%);
  height: 72px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--waypoint-color) 7.5%, transparent), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.glass-surface[data-waypoint]:not([data-waypoint="none"]) .waypoint-wash { opacity: 1; }
.glass-dock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 12px 6px;
  background: transparent;
}
.dock-button {
  position: relative;
  display: grid;
  place-items: start center;
  flex: 0 0 48px;
  width: 48px;
  height: 56px;
  padding: 0;
  color: inherit;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.icon-glass {
  --icon-fill: rgb(255 255 255 / 0.035);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--icon-rest-size);
  height: var(--icon-rest-size);
  border: 1px solid var(--glass-edge);
  border-radius: var(--icon-radius);
  background: var(--glass-face), var(--icon-fill);
  box-shadow: var(--glass-bevel), var(--glass-shadow-small);
  transform-origin: top center;
  transition: transform 240ms var(--motion-ease), background-color 180ms var(--motion-ease), border-color 180ms var(--motion-ease), box-shadow 180ms var(--motion-ease);
}
.icon-glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.icon-glass svg { display: block; width: 24px; height: 24px; overflow: visible; }
.dock-button:not(:is([aria-pressed="true"], [aria-current="page"])) [data-accent] { fill: currentColor; fill-opacity: 0.2; }
.dock-button:not(:is([aria-pressed="true"], [aria-current="page"])) [data-accent-stroke] { stroke: currentColor; }
.dock-button:is([aria-pressed="true"], [aria-current="page"]) .icon-glass {
  transform: scale(calc(54 / 42));
  border-color: transparent;
}
.dock-button:is([aria-pressed="true"], [aria-current="page"]) .icon-glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--signature-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.dock-button:is([aria-pressed="true"], [aria-current="page"])::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 16px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--signature-gradient);
}
.dock-button[data-next="true"]:not(:is([aria-pressed="true"], [aria-current="page"]))::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--waypoint-color);
}
.dock-button:hover:not(:disabled):not([aria-disabled="true"]):not(:is([aria-pressed="true"], [aria-current="page"])) .icon-glass { transform: scale(1.12); }
.dock-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .icon-glass { background: var(--glass-face), var(--action-hover-fill); box-shadow: var(--glass-bevel), var(--action-hover-shadow); }
.dock-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]):not(:is([aria-pressed="true"], [aria-current="page"])) .icon-glass { border-color: var(--action-hover-edge); }
.dock-button:focus-visible { outline: 2px solid var(--electric-blue); outline-offset: 6px; border-radius: 12px; }
.dock-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 6px;
  color: var(--porcelain);
  background: var(--ink);
  font: 500 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.dock-button:is(:hover, :focus-visible) .dock-tooltip { opacity: 1; }
[data-host="light"] {
  color: var(--ink);
  --glass-fill: rgb(255 255 255 / 0.025);
}
[data-host="light"] .icon-glass { --icon-fill: rgb(255 255 255 / 0.045); }
[data-host="light"] .dock-button[data-next="true"]:not(:is([aria-pressed="true"], [aria-current="page"]))::after { box-shadow: 0 0 0 1px rgb(23 23 25 / 0.35); }
@media (prefers-reduced-motion: reduce) { .icon-glass { transition: none; } }