/* PillNav.vanilla.css — PillNav.css (original, kept alongside) adapted into a mobile BOTTOM nav on the contractor-app tokens.
   Class names unchanged (.pill-nav-container .pill-nav .pill-nav-items .pill-list .pill .hover-circle .label-stack .pill-label .pill-label-hover).
   Removed with the logo/hamburger: .pill-logo, .mobile-menu-*, .desktop-only/.mobile-only. */
.pill-nav-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--space-2) + var(--safe-bottom));
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.pill-nav {
  --base: var(--accent-fill);       /* hover-circle fill */
  --pill-bg: var(--surface);
  --pill-text: var(--text-2);
  --hover-text: var(--on-accent);
  --pill-h: 3.5rem;                 /* 56 */
  --pill-gap: 3px;
  width: min(100%, 28rem);
  display: flex;
  pointer-events: auto;
}
.pill-nav-items {
  position: relative;
  width: 100%;
  height: calc(var(--pill-h) + 6px);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2), inset 0 0 0 var(--border-w) var(--border-strong);
}
.pill-list {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: var(--pill-gap);
  margin: 0;
  padding: 3px;
  height: 100%;
}
.pill-list > li { display: flex; flex: 1 1 0; min-width: 0; height: 100%; }

.pill {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  height: 100%;
  padding: 0 var(--space-1);
  background: var(--pill-bg);
  color: var(--pill-text);
  text-decoration: none;
  border-radius: var(--radius-pill);
  box-sizing: border-box;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  line-height: 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.pill .hover-circle {
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 50%;
  background: var(--base);
  z-index: 1;
  display: block;
  pointer-events: none;
  will-change: transform;
}
.pill .label-stack { position: relative; display: inline-block; line-height: 1; z-index: 2; }
.pill .pill-label,
.pill .pill-label-hover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  line-height: 1;
}
.pill .pill-label { position: relative; z-index: 2; will-change: transform; }
.pill .pill-label-hover { position: absolute; left: 0; right: 0; top: 0; color: var(--hover-text); z-index: 3; will-change: transform, opacity; }
/* hover copy is parked below the pill by gsap; without gsap keep it hidden */
.pill .pill-label-hover { opacity: 0; }

/* focus ring: the pill clips (overflow hidden), so ring the rim inside */
.pill:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: calc(var(--ring-w) * -1 - 1px); border-radius: var(--radius-pill); }

/* progressive enhancement: active pill is filled even before gsap runs (the hover-circle then covers it identically) */
.pill.is-active { background: var(--base); color: var(--on-accent); }
.pill.is-active .hover-circle { background: var(--base); }
@media (prefers-reduced-motion: reduce) { .pill, .pill .hover-circle { transition: none; } }