/* Catalog controls and reusable song rows. */
.browse-controls{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:0 0 16px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.browse-controls>label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);min-width:120px;flex:1}
.browse-controls .browse-query{flex:2;min-width:180px}
.browse-controls input[type=search],.browse-controls select{width:100%;height:38px;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);padding:6px 9px;font-size:13px}
.browse-controls .browse-favorites{flex-direction:row;align-items:center;min-height:38px;min-width:110px;flex:0 0 auto;font-size:12px}
.browse-favorites input{width:18px;height:18px;accent-color:var(--accent)}
.browse-controls #browseReset{font-size:12px;min-height:38px}
#browseView .filter-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.difficulty-pill,.filter[data-filter]{white-space:nowrap}
.difficulty-pill.level-beginner,.filter[data-filter=beginner]{color:#6ee7a0;border:1px solid #3eb86a70;background:#23804a1c}
.difficulty-pill.level-intermediate,.filter[data-filter=intermediate]{color:#f8d66d;border:1px solid #d8ad3b70;background:#b886151c}
.difficulty-pill.level-advanced,.filter[data-filter=advanced]{color:#ff909b;border:1px solid #e8657370;background:#b93c501c}
.difficulty-pill.level-unknown,.filter[data-filter=unknown]{color:var(--muted);border:1px solid var(--line);background:var(--surface-2)}
#browseView .filter.active{box-shadow:inset 0 0 0 1px currentColor}
[data-theme=light] .level-beginner,[data-theme=light] .filter[data-filter=beginner]{color:#176332}
[data-theme=light] .level-intermediate,[data-theme=light] .filter[data-filter=intermediate]{color:#755100}
[data-theme=light] .level-advanced,[data-theme=light] .filter[data-filter=advanced]{color:#a21d35}
.browse-list .browse-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;align-items:center;padding:8px;min-height:72px}
.browse-row .browse-open{display:grid;grid-template-columns:28px minmax(150px,2fr) minmax(80px,1fr) 120px 60px;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;padding:0;border:0;background:none;color:var(--text)}
.browse-row .browse-index{font-size:12px;color:var(--muted)}
.browse-row .browse-song{display:flex;gap:12px;align-items:center;min-width:0}
.browse-row .browse-art{width:46px;height:50px;flex:0 0 46px}
.browse-row .browse-identity{display:flex;flex-direction:column;min-width:0;gap:3px}
.browse-row .browse-identity strong{font-size:15px;overflow-wrap:anywhere;color:var(--text)}
.browse-row .browse-identity>span{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.browse-row .browse-genre{font-size:12px;color:var(--muted)}
.browse-row .difficulty-pill{justify-self:start;font-size:11px;padding:4px 8px}
.browse-row .browse-key{font-size:13px}
.browse-favorite{width:40px;height:40px;min-width:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--muted);font-size:23px}
.browse-favorite.active{color:var(--accent);border-color:var(--accent)}
.song-card .genre:empty{display:none}
@media(max-width:700px){
 .browse-controls{gap:8px;padding:10px;display:grid;grid-template-columns:1fr 1fr}
 .browse-controls>label{min-width:0}.browse-controls .browse-query{grid-column:1/-1;min-width:0}
 .browse-controls .browse-favorites{min-width:0}.browse-controls #browseReset{justify-self:start}
 .browse-list .browse-row{gap:3px;padding:8px;grid-template-columns:minmax(0,1fr) 40px}
 .browse-row .browse-open{grid-template-columns:minmax(0,1fr) auto;gap:4px 7px}
 .browse-row .browse-index,.browse-row .browse-genre{display:none}
 .browse-row .browse-song{grid-column:1;grid-row:1/3;gap:8px}.browse-row .browse-art{width:32px;height:40px;flex-basis:32px}
 .browse-row .browse-identity strong{font-size:13px}.browse-row .browse-identity>span{font-size:11px}
 .browse-row .difficulty-pill{grid-column:2;grid-row:1;font-size:9px;padding:3px 5px}
 .browse-row .browse-key{grid-column:2;grid-row:2;font-size:11px}
}

.browse-filters{flex:0 0 auto;min-width:0;margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.browse-filters>summary{cursor:pointer;padding:12px 14px;min-height:44px;color:var(--accent-2);font-weight:700;touch-action:manipulation}
#browseFilterCount:not(:empty){display:inline-block;margin-left:8px;border-radius:20px;background:var(--accent-2);color:var(--bg);padding:1px 7px;font-size:12px}
.browse-filter-body{padding:0 10px 10px;max-height:40vh;overflow:auto;touch-action:pan-y}
.browse-filter-body .browse-controls{margin-bottom:0}
#browseView .page-head{flex-shrink:0}
#browseGrid{min-height:0;flex:1;overflow-y:auto;touch-action:pan-y}
@media(max-width:1100px){#browseView .page-head{padding-bottom:10px;margin-bottom:10px}#browseView .page-head .eyebrow{margin-bottom:6px}}
/* 0.8.51: rows below the screen are not laid out or painted until scrolled near (all rows are 72px tall, so the
   reserved size is exact). Browsers without content-visibility ignore this. */
.browse-list .browse-row{content-visibility:auto;contain-intrinsic-size:auto 72px}