/* Spirit and I song filter (Style + Subject) for the Play All / Singles players.
   Shared by index.html and singles.html. Markup is inserted by scripts/song-tags/build_song_tags.py.
   Uses the page's :root colors (--accent, --bg-card, --text-light, --text-muted, --accent-hover). */
.sf[hidden] { display:none; }
.tracklist .track-item.sf-hide { display:none !important; }
.sf { position:relative; margin:0 0 10px 0; }
.sf-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.sf-label { color:var(--accent); text-transform:uppercase; letter-spacing:2px; font-size:0.8rem; margin-right:4px; }
.sf-bar { position:relative; }
.sf-wrap { position:static; }
.sf-btn { -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; gap:6px; background:var(--bg-card); color:var(--text-light); border:1px solid #444; border-radius:8px; padding:6px 12px; font-size:0.9rem; font-family:inherit; cursor:pointer; line-height:1.3; }
.sf-btn:hover, .sf-btn:focus-visible { border-color:var(--accent); outline:none; }
.sf-btn[aria-expanded="true"] { border-color:var(--accent); color:var(--accent); }
.sf-btn.sf-on { border-color:var(--accent); }
.sf-btn[aria-expanded="true"] .sf-caret { transform:rotate(180deg); }
.sf-caret { transition:transform .15s; opacity:.8; }
.sf-badge { background:var(--accent); color:#111; border-radius:999px; font-size:0.75rem; font-weight:bold; padding:0 7px; line-height:1.5; }
.sf-btn-off { opacity:.45; cursor:not-allowed; }
.sf-btn-off:hover { border-color:#444; }
.sf-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sf-panel { position:absolute; top:calc(100% + 6px); left:0; z-index:50; background:var(--bg-card); border:1px solid #555; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.5); padding:6px; min-width:240px; max-height:60vh; overflow:auto; }
.sf-panel-wide { width:min(700px, calc(100vw - 40px)); box-sizing:border-box; max-height:70vh; }
.sf-section + .sf-section { margin-top:6px; border-top:1px solid #3a3a3a; padding-top:4px; }
.sf-heading { color:var(--accent); text-transform:uppercase; letter-spacing:2px; font-size:0.72rem; padding:6px 8px 2px; }
.sf-panel-wide .sf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); column-gap:4px; }
.sf-panel-head { display:none; }
.sf-opt { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:6px; cursor:pointer; font-size:0.9rem; color:var(--text-light); -webkit-tap-highlight-color:transparent; }
.sf-opt:hover { background:#333; }
.sf-opt:focus-within { background:#333; outline:1px solid var(--accent); }
.sf-opt input { accent-color:var(--accent); width:16px; height:16px; margin:0; flex:none; cursor:pointer; }
.sf-opt-name { flex:1; }
.sf-opt-n { color:var(--text-muted); font-size:0.75rem; }
.sf-opt.sf-zero .sf-opt-name { color:var(--text-muted); }
.sf-active { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.sf-active[hidden], .sf-panel[hidden], .sf-backdrop[hidden], .sf-badge[hidden] { display:none; }
.sf-chips { display:contents; }
.sf-chip { display:inline-flex; align-items:center; gap:4px; background:rgba(212,175,55,.12); color:var(--text-light); border:1px solid var(--accent); border-radius:999px; padding:2px 6px 2px 10px; font-size:0.8rem; font-family:inherit; cursor:pointer; }
.sf-chip.sf-chip-subject { border-style:dashed; }
.sf-chip:hover, .sf-chip:focus-visible { background:var(--accent); color:#111; outline:none; }
.sf-chip-x { font-size:1rem; line-height:1; padding:0 2px; }
.sf-clear { background:none; border:none; color:var(--accent); font-family:inherit; font-size:0.8rem; text-decoration:underline; cursor:pointer; padding:2px 4px; }
.sf-clear:hover, .sf-clear:focus-visible { color:var(--accent-hover); outline:none; }
.sf-status { margin:6px 0 0 0; color:var(--text-muted); font-size:0.85rem; min-height:1em; }
.sf-status:empty { display:none; }
.sf-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:900; }
/* Filter + song search on one row (home page). Search sits right; wraps under the filter on phones. */
.sf-row { display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:16px; row-gap:8px; margin:0 0 10px 0; }
/* .sf becomes "contents" so its pieces join the row: bar + search on line 1, chips and status full width below. */
.sf-row > .sf:not([hidden]) { display:contents; }
.sf-row .sf-bar { order:1; flex:1 1 auto; min-width:0; }
.sf-row .sf-active { order:3; flex:1 1 100%; margin-top:0; }
.sf-row .sf-status { order:4; flex:1 1 100%; margin:0; }
.sf-row > .sf-search { order:2; position:relative; flex:0 1 300px; max-width:300px; margin:0 0 0 auto; }
.sf-row .sf-search label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sf-row .sf-search input { width:100%; box-sizing:border-box; background:var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3Cpath d='M9.5 9.5L13 13' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px 50%; color:var(--text-light); border:1px solid #444; border-radius:8px; padding:5px 12px 5px 32px; font-size:16px; line-height:1.3; font-family:inherit; }
.sf-row .sf-search input:focus { outline:none; border-color:var(--accent); }
.sf-row .sf-search input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; width:14px; height:14px; cursor:pointer; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center; }
.sf-row .sf-search .song-search-list { margin-top:6px; z-index:60; }
@media (max-width: 640px) {
    .sf-row > .sf-search { flex:1 1 100%; max-width:none; margin:0; }
}
@media (max-width: 600px) {
    .sf-panel, .sf-panel-wide { position:fixed; top:auto; left:0; right:0; bottom:0; z-index:1000; min-width:0; width:100%; box-sizing:border-box; max-height:70vh; border-radius:14px 14px 0 0; border-bottom:none; padding:0 8px 16px; }
    .sf-panel-wide { width:100%; }
    .sf-panel-wide .sf-grid { grid-template-columns:1fr; }
    .sf-panel-head { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--bg-card); padding:12px 8px 8px; border-bottom:1px solid #3a3a3a; margin-bottom:4px; z-index:1; }
    .sf-panel-title { color:var(--accent); text-transform:uppercase; letter-spacing:2px; font-size:0.85rem; }
    .sf-done { background:var(--accent); color:#111; border:none; border-radius:8px; padding:6px 16px; font-family:inherit; font-size:0.9rem; font-weight:bold; cursor:pointer; }
    .sf-opt { padding:10px 8px; font-size:1rem; }
    .sf-opt input { width:20px; height:20px; }
}