/* Beat Library — a tracklist, the way professional music libraries present a catalogue. */
.wrap.lib { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.toolbar .seg { margin: 0; }
.seg .ar { font-family: 'IBM Plex Sans Arabic', sans-serif; margin-left: 6px; opacity: .7; font-weight: 500; }
.search-wrap { flex: 1 1 260px; max-width: 360px; }
.search { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; background: var(--surface) !important; border: 1px solid var(--hairline) !important; color: var(--cream); font: 500 .95rem var(--ui); }
.search:focus { border-color: var(--sand) !important; }
.progress { margin: 0; color: var(--muted); font-size: .85rem; }

/* the tracklist */
.crate { border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface); overflow: hidden; }
.crate-head, .beat-row { display: grid; grid-template-columns: 52px 34px minmax(0, 1fr) 64px 130px 64px 74px auto; gap: 12px; align-items: center; padding: 0 14px; }
.crate-head { min-height: 40px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hairline); }
.crate-body { display: block !important; }
.beat-row { min-height: 68px; border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background .15s; }
.beat-row:last-child { border-bottom: 0; }
.beat-row:hover { background: var(--surface-2); }
.beat-row.playing { background: #2B2621; }
.beat-row.playing .no { color: var(--orange); }
.pb { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--ink); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; }
.pb .svg-i { width: 16px; height: 16px; }
.beat-row:hover .pb, .pb:focus-visible { border-color: var(--sand); }
.beat-row.playing .pb { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.no { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; font-size: .85rem; }
.ttl { min-width: 0; }
.ttl b { display: block; color: var(--cream); font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl small { display: block; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m { font-size: .85rem; color: var(--sand); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m.pending { color: var(--muted); }
.acts { display: flex; gap: 6px; justify-content: flex-end; }
.acts .btn { min-height: 38px; padding: 6px 12px !important; font-size: .82rem; background: transparent !important; border: 1px solid var(--hairline) !important; color: var(--cream) !important; }
.acts .btn:hover { border-color: var(--sand) !important; }
.acts .btn .svg-i { width: 16px; height: 16px; }
.acts .btn.done { color: var(--green) !important; }
.empty-note { padding: 24px; color: var(--muted); margin: 0; }

/* medium: drop the key and quality columns */
@media (max-width: 980px) {
  .crate-head, .beat-row { grid-template-columns: 52px 30px minmax(0, 1fr) 56px 56px auto; }
  .c-key, .c-qc, .m.key, .m.qc { display: none; }
  .acts .btn .lbl { display: none; }
}
/* phone: title + meta line, actions as icon buttons */
@media (max-width: 620px) {
  .crate-head { display: none; }
  .beat-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; }
  .no, .m { display: none; }
  .ttl small::after { content: attr(data-meta); }
  .acts .btn { min-width: 40px; min-height: 40px; padding: 6px !important; }
  .acts .btn.wav { display: none !important; }
  .acts { gap: 4px; }
}

.door-wide { margin-top: 8px; }

/* blueprint drawer in the brand */
.bp-head { background: var(--surface-2) !important; color: var(--cream); border-bottom: 1px solid var(--hairline); }
.bp-head h2 { font-family: var(--display) !important; color: var(--cream) !important; }
.bp-head p { color: var(--sand) !important; }
.bp-head .x { background: var(--ink) !important; color: var(--cream) !important; display: inline-flex; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; }
.drawer-panel { background: var(--ink) !important; border-left: 1px solid var(--hairline) !important; }
.drawer { background: rgba(10, 9, 8, .6) !important; }