/* site/audio.css — the soundtrack pill that audio.js mounts.
 *
 * Fixed, bottom-left. One flat strip on a mist ground with a hairline
 * around it: no radius, no accent rail, no shadow. Mono type; the site's
 * palette (docs/SITE_PLAN.md, design plan). Hidden until entered
 * (.sa-on), fades with body.idle, touch-sized under 640 px. */

.sa-pill {
  --sa-mist: #eef4f1;
  --sa-tent: #152321;
  --sa-steel: #5b6b66;
  --sa-nozzle: #2b7f8b;
  --sa-nozzle-deep: #0e4c54;
  --sa-hair: rgba(21, 35, 33, 0.14);

  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:
    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sa-tent);
  background: rgba(238, 244, 241, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--sa-hair);
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    visibility 0s linear 0.6s;
}
.sa-pill.sa-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
body.idle .sa-pill.sa-on {
  opacity: 0;
  pointer-events: none;
}

.sa-pill__track {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px;
  border-right: 1px solid var(--sa-hair);
}
.sa-pill__dot {
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--sa-tent);
}
.sa-pill.sa-playing .sa-pill__dot {
  animation: sa-pulse 4s ease-in-out infinite;
}
.sa-pill.sa-muted .sa-pill__dot {
  background: var(--sa-steel);
  animation: none;
}
.sa-pill__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 44vw;
}
.sa-pill__title.sa-reason {
  color: var(--sa-steel);
}

.sa-pill__btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 14px;
  min-height: 36px;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--sa-steel);
  cursor: pointer;
  text-decoration: none;
}
.sa-pill__btn + .sa-pill__btn {
  border-left: 1px solid var(--sa-hair);
}
.sa-pill__btn:hover {
  color: var(--sa-nozzle-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sa-pill__btn:focus-visible {
  outline: 1px solid var(--sa-nozzle);
  outline-offset: -1px;
}
.sa-pill.sa-muted .sa-pill__mute {
  color: var(--sa-nozzle-deep);
}

@keyframes sa-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@media (max-width: 640px) {
  .sa-pill {
    left: 10px;
    right: 10px;
    bottom: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    font-size: 13px;
  }
  .sa-pill__track {
    flex: 1 1 auto;
  }
  .sa-pill__title {
    max-width: none;
  }
  .sa-pill__btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-pill,
  .sa-pill.sa-on {
    transform: none;
    transition:
      opacity 0.2s linear,
      visibility 0s linear 0.2s;
  }
  .sa-pill.sa-on {
    transition-delay: 0s;
  }
  .sa-pill.sa-playing .sa-pill__dot {
    animation: none;
  }
}