/*
 * Shared audience switch (.aud-strip).
 *
 * Loaded on both page-for-physicians.php and page-for-patients.php.
 * Pill-shaped segmented toggle (centered) — ported from the
 * for-patients.html draft's `.aud-toggle`: dot markers instead of
 * 01/02 numbering, active side filled dark with a gold dot.
 *
 * The dark fill is a single absolutely-positioned thumb (.aud-thumb)
 * that slides between the two sides. Because navigation reloads the
 * page, the thumb animates in from the opposite side on load — so
 * moving physicians -> patients reads as a left-to-right slide.
 */

.aud-strip {
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}

.aud-row {
  display: flex;
  justify-content: center;
  padding: 11px 0;
}

.aud-toggle {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  animation: aud-rise .5s cubic-bezier(.16, 1, .3, 1) both;
}

/* Dark fill: a grid item occupying the ACTIVE column, so it hugs that label's
   own width (no oversized half-width fill that reaches the other side's dot,
   and no width change when the active side flips). On load it slides in from
   the opposite side. */
.aud-thumb {
  grid-row: 1;
  grid-column: 1;
  align-self: stretch;
  border-radius: 999px;
  background: var(--ink);
  z-index: 0;
  view-transition-name: aud-thumb;
}
.aud-toggle--patients .aud-thumb {
  grid-column: 2;
}
.aud-toggle a { grid-row: 1; }
.aud-toggle a:nth-of-type(1) { grid-column: 1; }
.aud-toggle a:nth-of-type(2) { grid-column: 2; }

.aud-toggle a {
  position: relative;
  z-index: 1;
  justify-content: center;
  padding: 5px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--muted);
  border-radius: 999px;
  transition: color .25s ease, background .25s ease, transform .2s ease;
}

.aud-toggle a .aud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  transition: background .25s ease, opacity .25s ease;
}

.aud-toggle a:hover {
  color: var(--ink-2);
}

.aud-toggle a:not(.is-on):active {
  transform: scale(.97);
}

.aud-toggle a.is-on {
  color: var(--paper);
  view-transition-name: aud-active;
}

.aud-toggle a.is-on .aud-dot {
  background: var(--gold);
  opacity: 1;
  animation: aud-dot-breathe 3s ease-in-out infinite;
}

@keyframes aud-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aud-dot-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(184, 134, 47, 0);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.25);
  }
}

/* Cross-document view transition: the dark pill slides from the previous
   page's side to the new one on navigation between For physicians / For
   patients (Chrome/Edge/Safari). Page content cuts instantly (root 0s); only
   the thumb morphs. Browsers without cross-document support (e.g. Firefox)
   just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 0s; }
::view-transition-group(aud-thumb),
::view-transition-group(aud-active) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
/* Active label + gold dot ride ABOVE the sliding pill (z-index), so the text
   never hides behind the dark thumb during the slide. */
::view-transition-group(aud-thumb)  { z-index: 1; }
::view-transition-group(aud-active) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .aud-toggle,
  .aud-thumb,
  .aud-toggle a.is-on .aud-dot {
    animation: none;
  }
  .aud-thumb { view-transition-name: none; }
  .aud-toggle a.is-on { view-transition-name: none; }
}