/* The Sounds section (instruments). Reuses the site's cover, biome and engine-page styles; only the
   accents differ: gold on violet, so Sounds never reads as an effect category. */
.cat-instrument { --acc: #f2c14e; }
.fam-analogue { --acc: #f2c14e; }
.fam-fm { --acc: #7fe0ff; }
.fam-va { --acc: #c39bff; }
.fam-hybrid { --acc: #ff8f6b; }
.snd-head { padding: clamp(40px, 7vw, 100px) var(--gutter) 10px; background: radial-gradient(900px 420px at 10% 0%, rgba(195, 155, 255, .16), transparent 70%); }
.snd-head h1 { margin: 0; font-size: clamp(48px, 8vw, 120px); line-height: .92; }
.snd-head .lede { max-width: 60ch; }
.snd-demo { display: flex; align-items: center; gap: 14px; margin-top: 18px; color: #d7dcdc; }
/* The hero Play is the page's first action: filled in the family colour, not an outline. */
.snd-demo .hero-play { background: linear-gradient(135deg, var(--acc, #f2c14e), var(--rasp)); border-color: transparent; box-shadow: 0 10px 34px -12px color-mix(in srgb, var(--acc, #f2c14e) 80%, transparent); }
.snd-demo .hero-play span { border-left-color: #12060b; }
.snd-demo .hero-play:hover { background: linear-gradient(135deg, var(--acc, #f2c14e), var(--rasp)); filter: brightness(1.08); }
.snd-demo .hero-play[aria-pressed="true"] span { background: #12060b; }
.snd-def { color: var(--muted); font-size: 13px; margin-left: 6px; }

/* The index bar (tools/sounds.py _bar, static/sounds-index.js): the Engines eco-bar, plus one line of
   licence and character chips that scrolls sideways rather than wrapping. */
.snd-bar { grid-template-columns: minmax(0, 1fr); }
.snd-tools { flex-wrap: nowrap; min-width: 0; }
.snd-tools .search { flex: none; }
.snd-tools .count { order: 3; margin-left: auto; white-space: nowrap; }
.snd-chiprow { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.snd-chiprow::-webkit-scrollbar { display: none; }
.snd-chiprow .chips { flex-wrap: nowrap; flex: none; }
.snd-chiprow .chips + .chips { padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--line-2); }
.snd-chiprow .chip { flex: none; white-space: nowrap; }
/* The filter chips: one height with the search field, the count in its own small pill, a pressed
   chip in the Sounds gold (Free in mint, Paid in amber, as their badges everywhere else). */
.snd-bar .jump, .snd-bar .chip { min-height: 36px; }
.snd-bar .search input { min-height: 36px; }
.snd-bar .search input:focus-visible { outline: 2px solid #f2c14e; outline-offset: 2px; border-color: transparent; }
.snd-bar .chip { --chip: #f2c14e; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; color: var(--text); background: rgba(237, 240, 238, .04); transition: background .16s, border-color .16s, color .16s; }
.snd-bar .chip:hover { border-color: var(--chip); background: color-mix(in srgb, var(--chip) 12%, transparent); }
.snd-bar .chip:focus-visible { outline: 2px solid var(--chip); outline-offset: 2px; }
.snd-bar .chip[aria-pressed="true"] { background: var(--chip); border-color: var(--chip); color: #12060b; }
.snd-bar .chip[data-snd-tier] { padding: 0 14px; }
.snd-bar .chip[data-snd-tier="email"], .snd-bar .chip[data-snd-tier="free"] { --chip: #9fe6c4; color: #9fe6c4; border-color: rgba(159, 230, 196, .5); }
.snd-bar .chip[data-snd-tier="paid"] { --chip: var(--amber); color: var(--amber); border-color: rgba(244, 163, 64, .5); }
.snd-bar .chip[data-snd-tier][aria-pressed="true"] { color: #12060b; border-color: var(--chip); }
.snd-style span { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; margin: 0; border-radius: 99px; background: rgba(237, 240, 238, .1); color: var(--muted); font: 600 12px/1 var(--ui); opacity: 1; }
.snd-style:hover span { color: var(--text); }
.snd-style[aria-pressed="true"] span { background: rgba(18, 6, 11, .18); color: #12060b; }
.snd-bar .snd-more { border-style: dashed; color: var(--muted); background: none; }
/* More chips than fit: the row scrolls sideways and fades out at its right edge instead of cutting one in half. */
.snd-chiprow { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); padding-right: 36px; }
.snd-empty { margin: 0; padding: clamp(48px, 8vw, 100px) var(--gutter); color: var(--muted); font-size: 18px; text-align: center; }
.snd-empty a { color: var(--text); }
@media (max-width: 900px) {
  .snd-tools { flex-wrap: wrap; }
  .snd-tools .search { flex: 1 1 180px; }
  .snd-tools .search input { width: 100%; }
  .snd-tools .count { order: 0; }
  .snd-chiprow { flex-basis: 100%; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
}

/* The view switch, in its own row under the bar's border, and the two flat views it sets on
   [data-eco] (static/sounds-index.js). "art" is the page with its family sections. "grid" and "table"
   are one alphabetical list with no sections: the family links in the bar filter instead of jumping. */
.snd-viewrow { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px var(--gutter) 0; }
.snd-view-label { font: 700 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.snd-view { flex: none; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(237, 240, 238, .04); }
.snd-view-btn { display: grid; place-items: center; width: 38px; height: 30px; padding: 0; border: 0; border-radius: 99px; background: none; color: var(--muted); cursor: pointer; transition: background .16s, color .16s; }
.snd-view-btn:hover { color: var(--text); }
.snd-view-btn:focus-visible { outline: 2px solid #f2c14e; outline-offset: 2px; }
.snd-view-btn[aria-pressed="true"] { background: #f2c14e; color: #12060b; }
.snd-thead { display: none; }
.jump.is-on { color: var(--bg); background: var(--acc); border-color: var(--acc); }
.jump.is-on i { background: var(--bg); }
.jump.is-on span { color: var(--bg); }

/* Both flat views: the sections dissolve and every cover joins one list, in name order. */
[data-view="grid"] .snd-list, [data-view="table"] .snd-list { display: grid; padding: 14px var(--gutter) clamp(32px, 4vw, 60px); }
[data-view="grid"] .biome, [data-view="grid"] .bento, [data-view="table"] .biome, [data-view="table"] .bento { display: contents; }
[data-view="grid"] .biome-head, [data-view="table"] .biome-head, [data-view="grid"] .biome::before, [data-view="grid"] .biome::after, [data-view="table"] .biome::before, [data-view="table"] .biome::after { display: none; }
[data-view="grid"] .cover, [data-view="table"] .cover { order: var(--i, 0); grid-column: auto; grid-row: auto; }
[data-view="grid"] .cover[hidden], [data-view="table"] .cover[hidden] { display: none; }

[data-view="grid"] .snd-list { grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 13vw, 210px), 1fr)); grid-auto-rows: clamp(200px, 16vw, 250px); gap: 10px; }
[data-view="grid"] .cover { border-radius: 14px; }
[data-view="grid"] .cover-art { min-height: 0; }
[data-view="grid"] .cover-story, [data-view="grid"] .cover-desc, [data-view="grid"] .cover-meta > span:first-child { display: none; }
[data-view="grid"] .cover-info { padding: 10px 12px 12px; gap: 4px; }
[data-view="grid"] .cover-name, [data-view="grid"] .size-xl .cover-name { font-size: 19px; }
[data-view="grid"] .cover-type { font-size: 11px; }
[data-view="grid"] .cover-meta { margin: 0; }
[data-view="grid"] .cover-play { top: 8px; right: 8px; width: 36px; height: 36px; }
[data-view="grid"] .cover-play span { border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }
[data-view="grid"] .cover-play[aria-pressed="true"] span { width: 10px; height: 10px; border: 0; }
[data-view="grid"] .cover-add { top: 8px; right: 50px; width: 36px; height: 36px; }

/* The table: one row a synth, columns lined up under their heads. The cover's own pieces are laid
   straight onto the row's grid (the link and its wrappers keep no box of their own). The first column
   is the synth's own scene, cut to the diamond of the home page's tile field. */
[data-view="table"] .snd-list { --cols: 46px minmax(120px, 1fr) minmax(150px, 1.25fr) minmax(0, 3fr) 184px 60px 60px 38px 38px; grid-template-columns: minmax(0, 1fr); gap: 0; }
[data-view="table"] .snd-thead, [data-view="table"] .cover { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 22px; padding: 10px 16px 10px 18px; }
[data-view="table"] .snd-thead { order: -1; padding-top: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font: 700 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
[data-view="table"] .snd-thead span:first-child { grid-column: 1 / 3; }

[data-view="table"] .cover { min-height: 68px; border-radius: 0; border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--acc); opacity: 1; transform: none; transition: background .14s; perspective: none; }
[data-view="table"] .cover:hover, [data-view="table"] .cover.is-playing { background: color-mix(in srgb, var(--acc) 9%, transparent); }
[data-view="table"] .cover-link, [data-view="table"] .cover-info, [data-view="table"] .cover-tags, [data-view="table"] .cover-meta { display: contents; }
[data-view="table"] .cover-art { grid-area: 1 / 1; display: block; flex: none; width: 46px; height: 46px; min-height: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: color-mix(in srgb, var(--acc) 30%, #0b0d10); }
[data-view="table"] .cover-story, [data-view="table"] .cover-glare { display: none; }
[data-view="table"] .cover-name, [data-view="table"] .size-xl .cover-name { grid-area: 1 / 2; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-view="table"] .cover-link:hover .cover-name { color: var(--acc); }
[data-view="table"] .cover-link:focus-visible .cover-name { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 3px; }
[data-view="table"] .cover-type { grid-area: 1 / 3; white-space: normal; line-height: 1.3; }
[data-view="table"] .cover-desc, [data-view="table"] .size-xl .cover-desc, [data-view="table"] .size-tall .cover-desc { grid-area: 1 / 4; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.4; }
[data-view="table"] .cover-meta > span:first-child { grid-area: 1 / 5; font-size: 13px; color: var(--muted); white-space: nowrap; }
[data-view="table"] .cover .tier { grid-area: 1 / 6; justify-self: start; }
[data-view="table"] .cover-price { grid-area: 1 / 7; font-size: 14px; }
[data-view="table"] .cover-add { grid-area: 1 / 8; position: static; width: 36px; height: 36px; opacity: 1; transform: none; }
[data-view="table"] .cover-play { grid-area: 1 / 9; position: static; width: 36px; height: 36px; background: color-mix(in srgb, var(--acc) 16%, transparent); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
[data-view="table"] .cover-play span { border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }
[data-view="table"] .cover-play[aria-pressed="true"] span { width: 10px; height: 10px; border: 0; }
/* Narrower: first the type and the voices go, then the description and the cart. A phone keeps the
   diamond, the name, the licence, the price and Play. */
@media (max-width: 1100px) {
  [data-view="table"] .snd-list { --cols: 46px minmax(120px, 1fr) minmax(0, 2.4fr) 60px 60px 38px 38px; }
  [data-view="table"] .cover-type, [data-view="table"] .cover-meta > span:first-child, [data-view="table"] .snd-thead span:nth-child(2), [data-view="table"] .snd-thead span:nth-child(4) { display: none; }
  [data-view="table"] .cover-desc, [data-view="table"] .size-xl .cover-desc, [data-view="table"] .size-tall .cover-desc { grid-area: 1 / 3; }
  [data-view="table"] .cover .tier { grid-area: 1 / 4; } [data-view="table"] .cover-price { grid-area: 1 / 5; }
  [data-view="table"] .cover-add { grid-area: 1 / 6; } [data-view="table"] .cover-play { grid-area: 1 / 7; }
}
@media (max-width: 640px) {
  [data-view="grid"] .snd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  [data-view="table"] .snd-list { --cols: 40px minmax(0, 1fr) 54px 52px 36px; }
  [data-view="table"] .snd-thead, [data-view="table"] .cover { column-gap: 12px; padding: 8px 8px 8px 12px; }
  [data-view="table"] .cover { min-height: 60px; }
  [data-view="table"] .cover-art { width: 40px; height: 40px; }
  [data-view="table"] .cover-desc, [data-view="table"] .cover-add, [data-view="table"] .snd-thead span:nth-child(3) { display: none; }
  [data-view="table"] .cover .tier { grid-area: 1 / 3; } [data-view="table"] .cover-price { grid-area: 1 / 4; } [data-view="table"] .cover-play { grid-area: 1 / 5; }
}

/* The test sounds row in the play dock: five fixed phrases, the chosen one lit (static/sounds-live.js). */
.dock-sounds { align-items: center; }
.dock-row-label { font: 700 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.dock-sound[aria-pressed="true"] { border-color: var(--snd, var(--amber)); color: var(--text); box-shadow: inset 0 0 0 1px var(--snd, var(--amber)); }