/* ===== Pill bar — the floating capsule =====
   One surface shared by the bottom nav dock and the Hero's sound/colour/theme
   controls, so the two read as the same object rather than two takes on it.
   Owns only the capsule itself: surface, radius, shadow, and the horizontal
   run of items inside. Anything specific (the nav's sliding highlight pill,
   the controls' placement) stays with its own block. */

.pill-bar {
  /* exposed because .nav__pill (the sliding highlight) has to inset itself by
     exactly this much — it's absolutely positioned, so it can't inherit the
     padding the way a normal child would */
  --pill-bar-pad: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--pill-bar-pad);
  background: var(--c-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: background var(--theme-dur) var(--ease-out);
}

/* Round icon buttons living inside a bar. They carry no surface of their own —
   the capsule is the surface — so hover is the only thing that paints, using
   the same --c-bg wash the nav's highlight pill uses. */
.pill-bar__btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  /* Muted at rest, full ink on hover / focus / while its menu is open. These
     are secondary controls sitting over the Hero — at full contrast four
     black glyphs read as the loudest thing in the corner. The colour is the
     resting state, not a disabled one: they still take pointer events, and
     they light up the moment you go near them. */
  color: var(--c-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-hover),
              color var(--motion-hover);
}
.pill-bar__btn:hover,
.pill-bar__btn:focus-visible,
.pill-bar__btn[aria-expanded="true"] { color: var(--c-ink); }
.pill-bar__btn:hover { background: var(--c-bg); }
.pill-bar__btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
/* Thinner than the 2px the icons carry as a presentation attribute — a CSS
   stroke-width wins over that, so the SVGs themselves stay untouched. */
.pill-bar__btn svg { width: 20px; height: 20px; stroke-width: 1.5; }


/* A pill on its own, outside any bar — same capsule language, used for the
   footer contact links so they read as buttons rather than inline text. */
.pill-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  /* veiled like the cards — these sit in the footer, directly under the dock,
     which is exactly where the two whites used to blend. The .pill-bar above
     deliberately keeps the SOLID --c-surface: it's the fixed foreground layer
     everything else passes beneath, and it only reads that way if it's the
     one opaque surface on the page. */
  background: var(--c-surface-veil);
  border-radius: var(--radius-pill);
  /* one tier lighter than the bar's: these are small, and they're shy, so a
     heavy shadow sliding around under an 80px button reads as noise */
  box-shadow: var(--shadow-xs);
  color: var(--c-ink);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--theme-dur) var(--ease-out),
              box-shadow var(--motion-hover);
}
/* Hover goes through --lift, consumed inside the shared [data-shy] transform.
   Its own `transform` here would wipe out the flee offset — see shy.css. */
.pill-link:hover,
.pill-link:focus-visible {
  --lift: -2px;
  box-shadow: var(--shadow-sm);
}
.pill-link:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

@media (max-width: 768px) {
  .pill-bar { --pill-bar-pad: var(--space-1); }
  .pill-bar__btn { width: 34px; height: 34px; }
  .pill-bar__btn svg { width: 18px; height: 18px; }
}