/* ============================================================
   Dock navbar (macOS-style magnification) — shared
   Bottom-centre pill, Swiss-minimal mono. Used by base.html
   (admin pages) and the standalone listing page. JS writes the
   per-tile transform on cursor proximity; reduced-motion falls
   back to a plain CSS hover scale.
   Load order: ds-tokens.css, then this file.
   ============================================================ */
#dock {
  position: fixed; left: 50%; bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: auto;          /* re-enable over the non-interactive #page */
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(245, 245, 240, 0.82);   /* --color-bg, translucent for the moving bg */
  border: 1px solid var(--color-border);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(14, 14, 14, 0.08);
}

.dock-item {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  color: var(--color-fg);
  text-decoration: none;
  transform-origin: 50% 100%;    /* tiles grow upward, like macOS */
  will-change: transform;
}
.dock-item svg { width: 22px; height: 22px; display: block; }

/* tooltip — caps micro-label floating above the tile on hover */
.dock-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 8px;
  font-size: var(--text-caption);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out-expo),
              transform var(--duration-fast) var(--ease-out-expo);
}
.dock-item:hover .dock-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* no GSAP magnification when motion is reduced — plain hover scale instead */
@media (prefers-reduced-motion: reduce) {
  .dock-item { transition: transform var(--duration-fast) var(--ease-out-expo); }
  .dock-item:hover { transform: scale(1.22); }
}