/* ============================================================
   Kodama - sound-library.css
   Styles for the home-practice sound library: the dedicated
   library pages (sound-hyp-koa4eA.html / sound-mis-9P9JIA.html,
   generated from templates/<track>/sound-library.html.j2) and the
   in-page picker on each track's Module 5. Reuses .player-btn
   (program.css) for playback and .tr-cap-style caps for group
   titles - this file only adds what those don't already cover.
   Load order: tokens.css -> base.css -> program.css ->
   program-<track>.css -> sound-library.css
   ============================================================ */

/* filter bar on the library page (chips built by sound-library.js) */
.sound-filters { margin: 0.4rem 0 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; }
.filter-row { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.filter-label {
  flex: 0 0 auto; min-width: 6.5rem;
  font-family: var(--font-body); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.filter-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filter-chip {
  font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.25rem 0.85rem; line-height: 1.5; cursor: pointer;
}
.filter-chip:hover { background: var(--paper-2); }
.filter-chip[aria-pressed="true"] {
  background: var(--sage); color: var(--accent-deep); border-color: var(--accent-soft);
}
.filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 32rem) { .filter-label { min-width: 100%; } }

/* category groups on the library page */
.sound-group { margin: 1.6rem 0 0; }
.sound-group:first-child { margin-top: 0.4rem; }
.sound-group-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.6rem;
}

.sound-list { display: flex; flex-direction: column; gap: 0.6rem; }
.sound-row {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.6rem 0.05rem;
}
.sound-row + .sound-row { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.sound-row .player-btn { flex: 0 0 auto; padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.sound-meta { display: flex; flex-direction: column; gap: 0.2rem; min-width: 8rem; }
.sound-label { font-family: var(--font-body); color: var(--ink); font-size: 0.98rem; }
.sound-tags { display: flex; gap: 0.6rem; align-items: center; }
.sound-duration { font-size: 0.75rem; color: var(--muted); }

/* suggested-tier pill: a starting guess, not a verdict */
.tier-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  line-height: 1.5;
  white-space: nowrap;
}
.tier-tag[data-tier="20-30"] { background: var(--sage); color: var(--accent-deep); border-color: var(--accent-soft); }

.sound-empty {
  padding: 1rem 1.1rem; border: 1px dashed var(--line); border-radius: 8px;
  color: var(--muted); font-size: 0.94rem; text-align: center;
}

/* Module 5's in-page picker: a select + player + repeat toggle +
   "use this" button, sitting inside a .tool block. */
.lib-picker-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 0.8rem 0; }
.lib-picker-row select {
  flex: 1 1 16rem; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line); border-radius: 4px; padding: 0.6rem 0.8rem;
}
.lib-loop { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; }
.lib-loop input { accent-color: var(--accent); }
.lib-use-btn { flex: 0 0 auto; }