/* Ambient sound control.
 *
 * WCAG 2.2 SC 1.4.2 / F23 require a mechanism for long audio that is both *visible* and *operable*,
 * so this is a persistent control rather than a settings row. It is deliberately small and sits above
 * the footer's own controls: visible at a glance, never in the way. The whole thing is opt-in from
 * script, so if ambient-control.js never loads there is no empty shell left behind — the elements are
 * created by the script, not by the markup.
 */

.ambient-control {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--sans);
  /* The control must stay reachable in every scene, including over the illustrated background,
     so it carries its own ground rather than relying on what is behind it. */
  color: var(--ink);
}

.ambient-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(248, 245, 237, .93);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(35, 46, 34, .12);
  transition: background 180ms, border-color 180ms, color 180ms;
}

.ambient-toggle:hover,
.ambient-toggle:focus-visible {
  background: var(--surface, #faf8f2);
  border-color: var(--gold, #ad9570);
}

.ambient-toggle:focus-visible {
  outline: 3px solid var(--gold, #ad9570);
  outline-offset: 3px;
}

.ambient-toggle .ambient-icon {
  font-size: 14px;
  line-height: 1;
  color: var(--gold, #ad9570);
}

/* On state reads as pressed through both colour and the label text, so it does not depend on hue. */
.ambient-control[data-enabled="true"] .ambient-toggle {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper, #f6f4ed);
}

.ambient-control[data-enabled="true"] .ambient-toggle .ambient-icon {
  color: var(--gold, #d9c08a);
}

/* A remembered-but-not-playing state is marked so the button does not look switched on before the
   visitor has actually started it. */
.ambient-control[data-remembered="on"][data-enabled="false"] .ambient-toggle {
  border-style: dashed;
}

.ambient-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 216px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 245, 237, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(35, 46, 34, .14);
}

/* Collapsed by default so the persistent control costs almost no screen; the panel is revealed by
   the toggle and stays open once used. */
.ambient-control[data-collapsed="yes"] .ambient-panel {
  display: none;
}

.ambient-volume {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--muted, #5f6a5c);
}

.ambient-volume input[type="range"] {
  width: 100%;
  min-height: 24px;
  accent-color: var(--ink);
}

.ambient-volume output {
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
  color: var(--ink);
}

.ambient-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted, #5f6a5c);
}

.ambient-note:empty {
  display: none;
}

/* The label sits directly on the toggle's own ground, so it needs its own colour rather than
   inheriting the panel's night-time body colour. Measured: with the inherited #e8eee7 the on-state
   label over the semi-transparent ground read only ~2.8:1; a near-black label on the same pill is
   12.9:1. The icon keeps the brand gold, which is decorative and aria-hidden. */
/* Off state: near-black label on the light pill (12.1:1 measured). */
.ambient-toggle .ambient-text {
  color: #26332b;
}

.ambient-control[data-enabled="true"] .ambient-toggle .ambient-text {
  color: var(--paper, #f6f4ed);
}

/* Night flips the pill to a dark ground, so BOTH states need a light label. A near-black label here
   measured 1.00:1 — invisible — which is exactly the kind of defect that only shows up if the
   off state is actually rendered and measured rather than assumed. */
html[data-scene-theme="night"] .ambient-toggle .ambient-text {
  color: #e8eee7;
}

/* Night + on: the pill inverts to light, so the label returns to dark (12.9:1 measured). */
html[data-scene-theme="night"] .ambient-control[data-enabled="true"] .ambient-toggle .ambient-text {
  color: #17242c;
}

/* Night: the control keeps its own ground so it is legible over the darker scene. */
html[data-scene-theme="night"] .ambient-toggle,
html[data-scene-theme="night"] .ambient-panel {
  background: rgba(23, 36, 44, .93);
  border-color: rgba(203, 232, 225, .28);
  color: #e8eee7;
}

html[data-scene-theme="night"] .ambient-control[data-enabled="true"] .ambient-toggle {
  background: #dcebe3;
  border-color: #dcebe3;
  color: #17242c;
}

html[data-scene-theme="night"] .ambient-volume,
html[data-scene-theme="night"] .ambient-note {
  color: #b3c6bb;
}

html[data-scene-theme="night"] .ambient-volume output {
  color: #e8eee7;
}

/* Narrow screens: keep it out of the thumb's way and no larger than it needs to be. */
@media (max-width: 640px) {
  .ambient-control {
    right: 12px;
    bottom: 12px;
  }

  .ambient-panel {
    min-width: 190px;
  }
}

/* Readers who ask for less transparency get flat surfaces, matching the rest of the site. */
@media (prefers-reduced-transparency: reduce) {
  .ambient-toggle,
  .ambient-panel {
    background: var(--paper, #f6f4ed);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media print {
  .ambient-control {
    display: none;
  }
}