/* fx.css · nav/dock, a floating dock of links that tucks away while you read · owner: Lizzy East · all rights reserved */

/* Four labelled links float at the bottom of the screen. fx.js tucks the dock below
   the edge while you scroll down and brings it back as soon as you scroll up, at the
   top or at the end. It never hides while it holds keyboard focus, and comes back at
   once when focus arrives. Jumps and focus stop above it (scroll-padding). */
html:has([data-fx~="nav/dock"]) { scroll-padding-bottom: 6.5rem; }
[data-fx~="nav/dock"] {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 10;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin-inline: auto;
  padding: 6px;
  border-radius: 22px;
  background: var(--fx-dock-bg, rgb(17 17 23 / 0.92));
  color: var(--fx-dock-ink, #ffffff);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 40px -18px rgb(0 0 0 / 0.6);
  backdrop-filter: blur(12px);
}
[data-fx~="nav/dock"] ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
[data-fx~="nav/dock"] a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 68px;
  min-height: 56px;
  padding: 7px 10px 6px;
  border-radius: 16px;
  color: inherit;
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
[data-fx~="nav/dock"] svg { display: block; width: 22px; height: 22px; }
[data-fx~="nav/dock"] a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; background: rgb(255 255 255 / 0.12); }
@media (hover: hover) and (pointer: fine) {
  [data-fx~="nav/dock"] a:hover { background: rgb(255 255 255 / 0.12); }
}
[data-fx~="nav/dock"].is-tucked { translate: 0 calc(100% + 2rem); }
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="nav/dock"] { transition: translate var(--fx-dock-dur, 320ms) var(--fx-ease); }
  [data-fx~="nav/dock"]:focus-within { transition-duration: 0s; }
}
[data-fx~="nav/dock"]:focus-within { translate: none; }