/* ambience.css — the ambient sound control, in this site's own dress.
   ---------------------------------------------------------------------------
   The engine and the control are shared with thetreatmenttapes.com (see the
   note at the top of ambience.js); this stylesheet is the Terminology Tales
   version: the pill and its panel are ink, like the footer, with vellum text,
   the caption voice for labels and Newsreader for the beds, and foil where the
   sister site uses rust. Bottom left, out of the way of the reading column.

   Collapsed it is a pill with four bars in it; playing, the bars move — 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 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-family: var(--font-caps);
  font-size: var(--t-cap-sm); font-weight: 500; line-height: 1;
  letter-spacing: var(--track-caps-sm); 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-on-ink);
  background-color: rgba(15, 43, 74, .9);
  background-image: var(--grain-light);
  background-size: 320px 320px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--vellum);
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-luxe),
              color var(--d-fast) var(--ease-luxe);
}
.amb-toggle:hover { border-color: rgba(232, 226, 212, .45); color: var(--paper); }
.amb-toggle:focus-visible { outline: 2px solid var(--focus-ring-on-ink); outline-offset: 2px; }
.amb.is-on .amb-toggle { border-color: rgba(201, 169, 97, .7); color: var(--paper); }
.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; background: var(--foil); animation: amb-bar 1.1s var(--ease-luxe) 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-on-ink);
  background-color: rgba(15, 43, 74, .96);
  background-image: var(--grain-light);
  background-size: 320px 320px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--vellum);
}
.amb-h {
  margin: 0; color: var(--foil);
  font-family: var(--font-caps); font-size: var(--t-cap-sm); font-weight: 600;
  letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1;
}
.amb-sub {
  margin: 8px 0 13px;
  font-family: var(--font-reading); font-style: italic; font-size: .92rem; line-height: 1.45;
  letter-spacing: 0; text-transform: none; font-weight: 400;
  color: var(--sky);
}
.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(232, 226, 212, .05);
  color: var(--vellum);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-luxe), border-color var(--d-fast) var(--ease-luxe);
}
.amb-bed b {
  display: block;
  font-family: var(--font-reading); font-size: 1.02rem; font-weight: 500; line-height: 1.25;
  letter-spacing: 0; text-transform: none; color: var(--paper);
}
.amb-bed span {
  display: block; margin-top: 2px;
  font-family: var(--font-reading); font-style: italic; font-size: .88rem; font-weight: 400; line-height: 1.35;
  letter-spacing: 0; text-transform: none; color: var(--sky);
}
.amb-bed:hover { background: rgba(232, 226, 212, .1); border-color: var(--line-on-ink); }
.amb-bed:focus-visible { outline: 2px solid var(--focus-ring-on-ink); outline-offset: 1px; }
.amb-bed.is-sel { border-color: rgba(201, 169, 97, .6); background: rgba(201, 169, 97, .1); }
.amb-bed.is-sel b { color: var(--foil); }

.amb-vol {
  display: flex; align-items: center; gap: 10px;
  margin: 13px 0 0;
  color: var(--sky);
}
.amb-vol span { font-family: var(--font-caps); font-size: var(--t-cap-sm); font-weight: 600; letter-spacing: var(--track-caps); }
.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: rgba(232, 226, 212, .3); }
.amb-vol input::-moz-range-track { height: 2px; background: rgba(232, 226, 212, .3); }
.amb-vol input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -5.5px;
  border-radius: 50%; background: var(--foil); cursor: pointer;
}
.amb-vol input::-moz-range-thumb {
  width: 13px; height: 13px; border: 0;
  border-radius: 50%; background: var(--foil); cursor: pointer;
}
.amb-vol input:focus-visible { outline: 2px solid var(--focus-ring-on-ink); outline-offset: 3px; }

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

/* The pill is fixed at the bottom left, where the footer's copyright line
   begins on any screen narrower than the widest desk. Once the control has
   mounted (ambience.js marks <html>), the footer leaves it that room. */
@media (max-width: 86em) {
  html.has-ambience .ftr { padding-bottom: 5.75rem; }
}

/* 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; }
}