/* Illustrated, shared sound shelves. The cover sets the mood; controls stay explicit. */
.sound-gallery { min-width: 0; margin-block: 1.75rem; scroll-margin-top: 1.5rem; }
.sound-gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; }
.sound-gallery-heading > div:first-child { min-width: 0; }
.sound-gallery-heading h2 { margin: 0; font-size: 1.375rem; font-weight: 550; line-height: 1.25; letter-spacing: -.025em; }
.sound-gallery-heading p { margin-top: .25rem; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.sound-gallery-arrows { display: flex; flex-shrink: 0; gap: .25rem; }
.sound-gallery-arrows button { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); }
.sound-gallery-arrows button:hover { color: var(--ink); border-color: var(--sage); }
.sound-gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(176px, 11.5rem, 85%); gap: .875rem; list-style: none; min-width: 0; margin: 0 -.375rem; padding: .375rem .375rem .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: .375rem; -webkit-overflow-scrolling: touch; }
.sound-tile { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: 0; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 19px; background: oklch(20% .025 246); transition: border-color 200ms ease-out, background-color 200ms ease-out; }
.sound-tile.is-selected { border-color: var(--sage); background: oklch(25% .03 200); }
.sound-tile-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sound-tile-copy { padding: .875rem .875rem .25rem; }
.sound-tile-copy h3 { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.35; font-weight: 550; letter-spacing: -.01em; }
.sound-tile-copy p { margin-top: .375rem; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.sound-tile-actions { display: flex; align-items: center; justify-content: space-between; gap: .25rem; padding: .375rem .5rem .5rem; }
.sound-tile-select { display: flex; align-items: center; justify-content: center; gap: .25rem; flex: 1; min-width: 0; min-height: 44px; padding: .5rem .375rem; border-radius: 11px; background: transparent; color: var(--sage); font-size: .875rem; font-weight: 550; }
.sound-tile-select .icon { width: 17px; height: 17px; flex-shrink: 0; }
.sound-tile-select:hover { background: oklch(83% .045 157 / .09); }
.sound-tile-select[aria-pressed="true"] { color: var(--ink); }
.sound-gallery-preview { display: grid; place-items: center; position: relative; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; border: 1px solid oklch(77% .018 233 / .45); border-radius: 50%; color: var(--ink); background: transparent; }
.sound-gallery-preview > .icon { width: 18px; height: 18px; }
.sound-gallery-preview:hover { border-color: var(--sage); background: oklch(83% .045 157 / .08); }
.sound-gallery-preview.is-playing,.sound-gallery-preview.is-loading { background: var(--sage); color: var(--sage-ink); border-color: var(--sage); }
.sound-gallery-preview.is-audible > .icon { opacity: 0; }
.sound-playing-bars { display: flex; align-items: center; justify-content: center; gap: 3px; position: absolute; inset: 0; pointer-events: none; }
.sound-playing-bars i { display: block; width: 2px; height: 14px; border-radius: 2px; background: currentColor; transform: scaleY(.35); animation: sound-level 1s ease-in-out infinite alternate; }
.sound-playing-bars i:nth-child(2) { animation-delay: -.45s; }
.sound-playing-bars i:nth-child(3) { animation-delay: -.7s; }
.sound-gallery-silence { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .125rem; padding: .5rem .375rem; font-size: .875rem; }
.sound-gallery-silence[aria-pressed="true"] { color: var(--ink); }
.sound-gallery-compact { margin-block: 1.25rem; }
.sound-gallery-compact .sound-gallery-heading h2 { font-size: 1.125rem; }
.sound-gallery-compact .sound-gallery-track { grid-auto-columns: clamp(160px, 10rem, 85%); gap: .75rem; }
.sound-gallery-compact .sound-tile-copy { padding: .75rem .625rem .25rem; }
.sound-gallery-compact .sound-tile-copy h3 { font-size: .9375rem; }
.sound-gallery-compact .sound-tile-copy p { font-size: .75rem; }
.sound-gallery-compact .sound-tile-actions { padding-inline: .375rem; }
.sound-gallery button:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
.sound-tile button:focus-visible { outline-offset: -3px; }
@keyframes sound-level { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (min-width: 760px) {
  .sound-gallery-track { grid-auto-columns: clamp(208px, 13rem, 85%); gap: 1rem; }
  .sound-gallery-compact .sound-gallery-track { grid-auto-columns: clamp(176px, 11rem, 85%); }
}
@media (max-width: 360px) {
  .sound-gallery-heading { flex-wrap: wrap; }
  .sound-gallery-track { grid-auto-columns: clamp(168px, 10.5rem, 90%); }
  .sound-gallery-compact .sound-gallery-track { grid-auto-columns: clamp(160px, 10rem, 90%); }
}
@media (prefers-reduced-motion: reduce) {
  .sound-tile { transition: none; }
  .sound-playing-bars i { animation: none; }
  .sound-playing-bars i:nth-child(2) { transform: scaleY(.8); }
  .sound-gallery-track { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .sound-tile-art { opacity: .6; }
  .sound-tile { border-color: ButtonText; }
  .sound-tile.is-selected { border-color: Highlight; outline: 2px solid Highlight; outline-offset: -3px; }
  .sound-gallery-preview.is-playing,.sound-gallery-preview.is-loading { color: HighlightText; background: Highlight; }
  .sound-playing-bars { display: none; }
  .sound-gallery-preview.is-audible > .icon { opacity: 1; }
}