:root {
  --footer-copyright-height: 50px;
  --footer-previous-module-gap: 50px;
  --footer-tabbar-gap: 50px;
  --footer-tabbar-height: 56px;
  --footer-tabbar-bottom: max(30px, env(safe-area-inset-bottom));
  --footer-tabbar-clearance: calc(var(--footer-tabbar-gap) + var(--footer-tabbar-height) + var(--footer-tabbar-bottom));
  --navigation-bg: rgba(250, 250, 250, 0.66);
  --navigation-overlay: rgba(0, 0, 0, 0);
  --navigation-bg-hover: rgba(9, 87, 87, 0.08);
  --navigation-border: #ffffff;
  --navigation-line: rgba(0, 0, 0, 0.08);
  --dock-tooltip-bg: #f2f2f2;
  --dock-tooltip-border: #ffffff;
  --dock-tooltip-text: #151716;
  --dock-tooltip-filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06))
    drop-shadow(0 -6px 6px rgba(0, 0, 0, 0.03))
    drop-shadow(0 14px 14px rgba(0, 0, 0, 0.08));
}

:root[data-theme="dark"] {
  --navigation-bg: rgba(255, 255, 255, 0.08);
  --navigation-overlay: rgba(0, 0, 0, 0.2);
  --navigation-bg-hover: rgba(209, 254, 254, 0.10);
  --navigation-border: rgba(255, 255, 255, 0.18);
  --navigation-line: rgba(255, 255, 255, 0.08);
  --dock-tooltip-bg: #141414;
  --dock-tooltip-border: rgba(255, 255, 255, 0.18);
  --dock-tooltip-text: #ffffff;
  --dock-tooltip-filter: none;
}

.site-footer-copy {
  display: grid;
  align-self: stretch;
  margin: 0;
  place-items: center;
  text-align: center;
}

.site-footer:has(> .site-footer-copy) {
  min-height: var(--footer-copyright-height);
  height: var(--footer-copyright-height);
  padding: 0;
}

.site-footer.subpage-footer {
  justify-content: center;
  text-align: center;
}

body.subpage-body:has(> .subpage-footer) > main.subpage-main {
  padding-bottom: var(--footer-previous-module-gap);
}

body:has(> .site-footer + .dock-shell .site-dock) {
  padding-bottom: var(--footer-tabbar-clearance);
}

main.page:has(> .site-footer > .bottom-nav) {
  padding-bottom: var(--footer-tabbar-clearance);
}

main.page:has(> .site-footer > .bottom-nav) > .site-footer {
  margin-top: var(--footer-previous-module-gap);
}

.site-dock,
.bottom-nav {
  border-color: var(--navigation-border);
  background: linear-gradient(var(--navigation-overlay), var(--navigation-overlay)), var(--navigation-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.popover-surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.popover-surface-path {
  fill: var(--popover-surface-bg);
  stroke: var(--popover-surface-border);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: var(--popover-surface-filter, none);
}

.popover-surface-content,
.social-preview > :not(.popover-surface) {
  position: relative;
  z-index: 1;
}

.dock-tooltip {
  --popover-surface-bg: var(--dock-tooltip-bg);
  --popover-surface-border: var(--dock-tooltip-border);
  --popover-surface-filter: var(--dock-tooltip-filter);
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 10px);
  left: 50%;
  width: max-content;
  padding: 5px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--dock-tooltip-text);
  font-family: var(--font-latin, var(--font));
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transform-origin: bottom center;
  transition-property: opacity, transform, visibility;
  transition-duration: 140ms, 160ms, 140ms;
  transition-timing-function: ease-out, cubic-bezier(0.2, 0, 0, 1), ease-out;
}

.shared-bottom-navigation > :is(a, button):hover .dock-tooltip,
.shared-bottom-navigation > :is(a, button):focus-visible .dock-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.shared-bottom-navigation .dock-settings-toggle[aria-expanded="true"] .dock-tooltip,
.shared-bottom-navigation .case-settings-toggle[aria-expanded="true"] .dock-tooltip {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
}

@media (hover: none) and (pointer: coarse), (max-width: 740px) {
  .dock-tooltip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock-tooltip {
    transition-duration: 1ms;
  }
}

@media (max-width: 740px) {
  :root {
    --footer-tabbar-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .dock-shell,
  body:has(> #main:not(.subpage-main)) .dock-shell {
    bottom: var(--footer-tabbar-bottom);
  }
}