/* Shared, compact navigation for the catalog and individual beat pages. */
.sound-nav { display:flex; gap:7px; overflow-x:auto; padding:3px 2px 10px; margin:0 0 12px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.sound-nav a { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:40px; padding:8px 13px; border:1px solid var(--line); border-radius:22px; color:var(--text-secondary); font-size:12px; line-height:1.4; text-decoration:none; white-space:nowrap; }
.sound-nav a:hover { color:var(--text); background:var(--surface-panel); }
.sound-nav a[aria-current="page"] { color:var(--text); background:var(--surface-control); border-color:var(--line-strong); }
.sound-nav a:focus-visible,.collection-guide summary:focus-visible { outline:2px solid var(--brand-gold); outline-offset:2px; }
.collection-intro { padding:2px 2px 14px; max-width:760px; }
.collection-intro h1 { margin:0; font-size:28px; font-weight:600; letter-spacing:-.8px; line-height:1.2; }
.collection-intro p { margin:9px 0 0; color:var(--text-secondary); font-size:13px; line-height:1.65; }
.collection-guide { margin:30px 0 20px; border-top:1px solid var(--line); }
.collection-guide details { border-bottom:1px solid var(--line); }
.collection-guide summary { padding:16px 4px; cursor:pointer; color:var(--text-secondary); font-size:13px; line-height:1.5; }
.collection-guide p { max-width:780px; margin:0; padding:0 4px 18px; color:var(--text-muted); font-size:13px; line-height:1.7; }
#beat-content > .sound-nav { margin-top:24px; }
.collection-browse:empty { display:none; }
.collection-browse .sound-nav { flex-wrap:wrap; gap:0 20px; overflow:visible; margin:20px 0 0; padding:16px 4px 4px; border-top:1px solid var(--line); }
.collection-browse .sound-nav::before { content:"Browse by style"; flex-basis:100%; margin-bottom:4px; color:var(--text-muted); font-size:12px; font-weight:600; }
.collection-browse .sound-nav a { min-height:44px; padding:8px 0; border:0; border-radius:0; background:none; color:var(--text-muted); }
.collection-browse .sound-nav a[aria-current="page"] { color:var(--text); }
.collection-browse .sound-nav a:hover { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:600px) {
  .sound-nav { gap:6px; margin-bottom:8px; }
  .sound-nav a { min-height:44px; padding:8px 12px; font-size:11px; }
  .collection-intro h1 { font-size:24px; }
  .collection-intro p { font-size:12px; }
}