/* ambience.css — the ambient sound control.
   ---------------------------------------------------------------------------
   Bottom left, and deliberately not bottom right: on a phone the constellation
   map's legend sits bottom right, and a sound toggle landing on top of the
   topic filters would be two controls fighting for one thumb.

   It is the smallest thing on the page that is still a real control. Collapsed
   it is a pill with four bars in it; playing, the bars move, which is the only
   animation on this site that carries information rather than polish — it says
   sound is coming out of your machine right now, which somebody who has just
   arrived on a page with audio already running genuinely needs to know. */
.amb {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font: 500 10px/1 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---- the pill -------------------------------------------------------- */
.amb-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 11px;
  min-height: 34px;
  border: 1px solid var(--line-ink-str);
  background: rgba(17, 28, 46, .78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--on-ink-body);
  font: inherit; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.amb-toggle:hover { border-color: rgba(198, 217, 232, .5); color: var(--on-ink); }
.amb-toggle:focus-visible { outline: 2px solid var(--rust-ink); outline-offset: 2px; }
.amb.is-on .amb-toggle { border-color: rgba(224, 168, 142, .5); color: var(--on-ink); }
.amb-label { white-space: nowrap; }

/* four bars. At rest they are a flat, quiet row — a speaker glyph would be a
   volume control, and this is not one. */
.amb-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.amb-wave i {
  display: block; width: 2px; height: 3px;
  background: currentColor; opacity: .55;
  transform-origin: 50% 100%;
}
.amb.is-on .amb-wave i { opacity: 1; animation: amb-bar 1.1s var(--ease) infinite; }
.amb.is-on .amb-wave i:nth-child(1) { animation-delay: 0ms; }
.amb.is-on .amb-wave i:nth-child(2) { animation-delay: 160ms; }
.amb.is-on .amb-wave i:nth-child(3) { animation-delay: 420ms; }
.amb.is-on .amb-wave i:nth-child(4) { animation-delay: 260ms; }
@keyframes amb-bar {
  0%, 100% { height: 3px; }
  50%      { height: 12px; }
}

/* ---- the panel ------------------------------------------------------- */
.amb-panel {
  width: min(290px, calc(100vw - 28px));
  padding: 16px 16px 14px;
  border: 1px solid var(--line-ink-str);
  background: rgba(17, 28, 46, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--on-ink-body);
}
.amb-h {
  margin: 0; color: var(--on-ink-mute);
  font: 500 9.5px/1 var(--label); letter-spacing: .12em; text-transform: uppercase;
}
.amb-sub {
  margin: 8px 0 13px;
  font: 400 11.5px/1.5 var(--ui);
  letter-spacing: 0; text-transform: none;
  color: var(--on-ink-mute);
}
.amb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.amb-bed {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: rgba(198, 217, 232, .045);
  color: var(--on-ink-body);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.amb-bed b {
  display: block;
  font: 500 12px/1.25 var(--ui);
  letter-spacing: 0; text-transform: none; color: var(--on-ink);
}
.amb-bed span {
  display: block; margin-top: 2px;
  font: 400 11px/1.35 var(--ui);
  letter-spacing: 0; text-transform: none; color: var(--on-ink-mute);
}
.amb-bed:hover { background: rgba(198, 217, 232, .1); border-color: var(--line-ink-str); }
.amb-bed:focus-visible { outline: 2px solid var(--rust-ink); outline-offset: 1px; }
.amb-bed.is-sel { border-color: rgba(224, 168, 142, .55); background: rgba(224, 168, 142, .09); }
.amb-bed.is-sel b { color: var(--rust-ink); }

.amb-vol {
  display: flex; align-items: center; gap: 10px;
  margin: 13px 0 0;
  color: var(--on-ink-mute);
}
.amb-vol span { font: 500 9.5px/1 var(--label); letter-spacing: .12em; }
.amb-vol input {
  flex: 1; min-width: 0; height: 22px;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.amb-vol input::-webkit-slider-runnable-track {
  height: 2px; background: var(--line-ink-str);
}
.amb-vol input::-moz-range-track { height: 2px; background: var(--line-ink-str); }
.amb-vol input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -5.5px;
  border-radius: 50%; background: var(--on-ink); cursor: pointer;
}
.amb-vol input::-moz-range-thumb {
  width: 13px; height: 13px; border: 0;
  border-radius: 50%; background: var(--on-ink); cursor: pointer;
}
.amb-vol input:focus-visible { outline: 2px solid var(--rust-ink); outline-offset: 3px; }

.amb-off {
  display: block; width: 100%; margin: 12px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line-ink-str);
  background: transparent; color: var(--on-ink-mute);
  font: inherit; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.amb-off:hover { color: var(--on-ink); border-color: rgba(198, 217, 232, .45); }
.amb-off:focus-visible { outline: 2px solid var(--rust-ink); outline-offset: 2px; }

/* Print has no sound, and neither does a reader who asked for less motion:
   the bars stop, and the pill still says which bed is playing in words. */
@media print { .amb { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .amb.is-on .amb-wave i { animation: none; height: 8px; }
  .amb-toggle, .amb-bed, .amb-off { transition: none; }
}
/* Below this the pill would sit under the map's own legend on the home page,
   so it loses its word and keeps its bars. The accessible name is unchanged. */
@media (max-width: 480px) {
  .amb-label { position: absolute; width: 1px; height: 1px; overflow: hidden;
               clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .amb-toggle { padding: 9px 11px; }
}