/* Shared sound/calendar controls for every event. Only the flyer accent changes. */
#sound-toggle, #event-calendar {
  --sound-accent: var(--acid, var(--pink, #e6d947));
  position: fixed;
  z-index: 101;
  top: max(20px, calc(env(safe-area-inset-top) + 12px));
  right: max(20px, calc(env(safe-area-inset-right) + 12px));
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 10px;
  border: 1px solid #ecebe680;
  border-radius: 50%;
  background: #080908ed;
  color: #ecebe6;
  font: inherit;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
body[data-event="free-acid"] :is(#sound-toggle, #event-calendar) { --sound-accent: #c6ff3d; }
#event-calendar {
  top: max(76px, calc(env(safe-area-inset-top) + 68px));
  text-decoration: none;
}
#event-calendar.event-calendar--archive {
  grid-template-columns: 20px auto;
  gap: 9px;
  width: auto;
  padding: 10px 15px;
  border-radius: 24px;
  font: 10px/1 "Pickle Footer Mono", monospace;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* The native no-JS player replaces the sound circle and needs its own space. */
#background-audio:not([hidden]) ~ #event-calendar {
  top: max(128px, calc(env(safe-area-inset-top) + 120px));
}
#upcoming-nights { scroll-margin-top: max(144px, calc(env(safe-area-inset-top) + 136px)); }
#sound-toggle[hidden] { display: none; }
#sound-toggle svg, #event-calendar svg { display: block; width: 20px; height: 20px; pointer-events: none; }
#sound-toggle .sound-waves { display: none; }
#sound-toggle[aria-pressed="true"] .sound-waves { display: inline; }
#sound-toggle[aria-pressed="true"] .sound-slash { display: none; }
#sound-toggle[aria-pressed="true"] { color: var(--sound-accent); border-color: currentColor; }
#sound-toggle[data-error="true"] { color: #ffb397; border-color: currentColor; }
#sound-toggle:active, #event-calendar:active { transform: scale(.94); }
#sound-toggle:focus-visible, #event-calendar:focus-visible { outline: 2px solid var(--sound-accent); outline-offset: 4px; }
#sound-toggle > span, #sound-status, #event-calendar:not(.event-calendar--archive) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#background-audio:not([hidden]) {
  position: fixed;
  z-index: 101;
  top: max(76px, calc(env(safe-area-inset-top) + 68px));
  right: max(20px, calc(env(safe-area-inset-right) + 12px));
  width: min(240px, calc(100vw - 40px));
  height: 40px;
}
@media (hover: hover) {
  #sound-toggle:hover, #event-calendar:hover { color: var(--sound-accent); border-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  #sound-toggle, #event-calendar { transition: none; }
}
@media (forced-colors: active) {
  #sound-toggle, #event-calendar { background: Canvas; color: ButtonText; border-color: ButtonText; }
  #sound-toggle[aria-pressed="true"] { color: Highlight; border-color: Highlight; }
}