/* ============================================================
   Ambience: the soundscape picker in the Aa panel, and its quick toggles
   ============================================================ */

.amb-row { gap: 10px; }
.amb-picks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.amb-pick {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
  min-width: 0; padding: 8px 2px 7px; border-radius: 10px;
  font-size: 11.5px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--ink-2);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.amb-pick svg { width: 22px; height: 22px; flex: none; transition: transform .35s var(--ease); }
.amb-pick:hover { background: var(--bg-2); color: var(--ink); }
.amb-pick[aria-checked="true"] {
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 35%, transparent);
}
.amb-pick[data-amb="off"][aria-checked="true"] { color: var(--ink); background: var(--bg-2); box-shadow: none; }
.amb-pick[aria-checked="true"]:not([data-amb="off"]) svg { animation: amb-breathe 3.6s ease-in-out infinite; }
@keyframes amb-breathe { 50% { transform: translateY(-1px) scale(1.06); } }

.amb-vol { gap: 6px; }
.amb-vi { display: inline-flex; color: var(--ink-3); }
.amb-vi svg { width: 18px; height: 18px; }
.amb-vol input[type="range"] { accent-color: var(--gold); }
.amb-silent { padding-top: 2px; }

/* player bar chip: icon only, gold while a soundscape is chosen */
.chip.pl-amb { min-width: 34px; justify-content: center; }

/* phones: the text panel is a roomy sheet */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .type-sheet .amb-picks { gap: 6px; }
  .type-sheet .amb-pick { min-height: 64px; padding: 10px 2px 8px; border-radius: 12px; background: var(--bg-2); font-size: 12px; }
  .type-sheet .amb-pick[aria-checked="true"]:not([data-amb="off"]) { background: color-mix(in oklab, var(--gold) 15%, var(--bg-2)); }
  .type-sheet .amb-vi svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .amb-pick svg { animation: none !important; transition: none; }
}