/* sound-grid: a grid of devices (components/sound-grid.js reads the list from data-src).
   All of them: the ones with a sound clip in full with a green dot, the rest faded.
   With "clips": only the devices whose clip can be played, named, tap to play.
     <div class="sound-grid" data-src="…/devices.json" data-img="…/{id}.webp"></div>
     <div class="sound-grid clips" data-src="…" data-img="…" data-audio="…/sounds/">
       <script type="application/json">{"canon-ae1": {"file": "canon-ae1.mp3", "credit": "…"}}</script></div> */
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; padding: 12px; background: var(--gray-100); }
.sound-grid figure { margin: 0; position: relative; aspect-ratio: 1; border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06); display: grid; place-items: center; overflow: hidden; }
.sound-grid img { width: 80%; height: 80%; object-fit: contain; }
.sound-grid figure[data-sound="unresolved"] img, .sound-grid figure[data-sound="no-intrinsic-sound"] img { opacity: 0.18; filter: grayscale(1); }
.sound-grid figure[data-sound="ready"]::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; border-radius: 50%; background: #2f8f5b; }
@media (max-width: 640px) { .sound-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; padding: 8px; } }

.sound-grid.clips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 380px; margin: auto; padding: 12px; }
.sound-grid.clips img { width: 72%; height: 72%; }
.sound-grid.clips figcaption { position: absolute; bottom: 5px; max-width: 95%; color: var(--gray-1100); font-size: 11px; text-align: center; line-height: 1.1; }
.sound-grid.clips button { all: unset; box-sizing: border-box; position: absolute; inset: 0; border-radius: 8px; cursor: pointer; }
.sound-grid.clips button:focus-visible { box-shadow: 0 0 0 2px var(--gray-1200); }
.sound-grid.clips figure[data-clip] { box-shadow: 0 0 0 1.5px #2f8f5b; }
.sound-grid.clips figure.is-playing { background: color-mix(in oklch, #2f8f5b 14%, var(--surface)); }
@media (max-width: 640px) { .sound-grid.clips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; } }