/* WoR song library: the friends' read-only copy of the app's Songs page. Light or dark follows the system. */
@font-face{font-family:"Archivo";src:url("fonts/Archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
 --paper:#e8ebee;--sheet:#f4f6f8;--sheet2:#dfe3e8;--key:#16181b;--key2:#33383e;--mute:#545c66;--line:#c3c9d0;--line2:#d6dbe1;
 --acc:#00a0df;--acc-t:#00608c;
 --plate:transparent;--plate-pad:0;
 --cover-l:78%;--cover-ink:#545c66;
 color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
 --paper:#101317;--sheet:#171b20;--sheet2:#21262c;--key:#e8ebee;--key2:#c6ccd3;--mute:#97a0aa;--line:#2e353d;--line2:#252a31;
 --acc:#1aa8e5;--acc-t:#62c6f1;
 --plate:#e8ebee;--plate-pad:2px 4px;
 --cover-l:24%;--cover-ink:#aab2bc;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--key);font:400 14px/1.45 "Archivo",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.num{font-variant-numeric:tabular-nums}
.hide{display:none!important}
.mu{color:var(--mute)}

/* page */
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
header.site{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap;padding:22px 0 10px;border-bottom:1px solid var(--line)}
header.site h1{margin:0;font-size:22px;font-weight:750;font-stretch:112%;letter-spacing:-.01em}
header.site p{margin:2px 0 0;color:var(--mute);font-size:13px}
/* Later: the Request a song button and a Songs | Requests switch go in .acts and under the header. */
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts:empty{display:none}

/* sticky toolbar: search first, then the filter tabs */
.bar{position:sticky;top:0;z-index:5;background:var(--paper);padding:10px 0 0}
.row1{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.tabs{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--sheet);flex:none;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:none;padding:8px 13px;font-weight:620;white-space:nowrap;color:var(--key)}
.tabs button+button{border-left:1px solid var(--line)}
.tabs button .n{color:var(--mute);font-weight:500;margin-left:5px}
.tabs button[aria-pressed="true"]{background:var(--key);color:var(--paper)}
.tabs button[aria-pressed="true"] .n{color:inherit;opacity:.75}
/* From GH & Rock Band and the arrow that opens its game picker, one tab */
.tgrp{display:flex;border-left:1px solid var(--line)}
.tgrp .gdd{padding:8px 9px;border-left:1px solid var(--line);color:var(--mute);display:grid;place-items:center}
.tgrp.on .gdd{background:var(--key);color:var(--paper);border-left-color:color-mix(in srgb,var(--paper) 30%,var(--key))}
.tgrp .gdd[aria-expanded="true"] .ico{transform:rotate(180deg)}
.gmenu{position:absolute;z-index:6;width:340px;max-width:calc(100vw - 32px);max-height:min(70vh,520px);overflow-y:auto;background:var(--sheet);border:1px solid var(--line);border-radius:5px;padding:4px;box-shadow:0 8px 24px rgb(0 0 0 / .18)}
.gmenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;border:0;border-radius:3px;background:none;padding:5px 8px;text-align:left;color:var(--key);font-weight:600}
.gmenu button:hover,.gmenu button:focus-visible{background:var(--sheet2)}
.gmenu button:focus-visible{outline-offset:-2px}
/* the picked game: tinted, not inverted, so logos drawn in black stay visible */
.gmenu button[aria-checked="true"]{background:var(--sheet2);box-shadow:inset 3px 0 0 var(--acc)}
.gmenu .glogo{flex:none;width:58px;display:flex;justify-content:center}
.gmenu .glogo .plogo{height:28px;max-width:58px;object-fit:contain}
.gmenu .gall{padding-left:2px}
.gmenu .gnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmenu .n{margin-left:auto;padding-left:8px;color:var(--mute);font-weight:500;font-variant-numeric:tabular-nums}
.search{flex:1 1 260px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:5px;background:var(--sheet);padding:0 10px;min-height:38px}
.search input{flex:1;border:0;background:none;outline:none;min-width:0;padding:8px 0}
.search input::-webkit-search-cancel-button{display:none}
.search:focus-within{border-color:var(--acc)}
.search .x{border:0;background:none;padding:2px;color:var(--mute);display:grid}
.count{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:var(--mute);font-size:12.5px;padding:9px 0 8px;border-bottom:1px solid var(--key)}
.count b{color:var(--key);font-weight:650}
.sortsel{display:none;border:1px solid var(--line);border-radius:5px;background:var(--sheet);padding:4px 6px;font-size:12.5px}

/* the song table */
table.songs{border-collapse:collapse;width:100%;table-layout:fixed;background:var(--sheet)}
.songs th,.songs td{padding:0 8px;text-align:left;border-bottom:1px solid var(--line2);white-space:nowrap}
.songs thead th{position:sticky;top:var(--stick,0);z-index:3;height:36px;font-size:12px;color:var(--mute);font-weight:620;background:var(--sheet);border-bottom:1px solid var(--line)}
.songs th button{background:none;border:0;padding:0;font-weight:620;color:inherit;display:inline-flex;gap:3px;align-items:center;height:30px}
.songs th button:hover,.songs th button.on{color:var(--key)}
.songs th .ico.ar{width:11px;height:11px;stroke-width:2.4}
.songs td{height:60px}
.songs tbody tr:hover td{background:var(--sheet2)}
.c-cv{width:62px}.c-gp{width:170px}.c-yr{width:62px}.c-ln{width:70px}.c-tr{width:116px}
.r{text-align:right!important}
.cover{position:relative;width:44px;height:44px;border-radius:3px;display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--cover-ink);background:hsl(var(--h) 6% var(--cover-l));user-select:none;overflow:hidden}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ti{overflow:hidden}
.ti b{display:block;font-weight:640;font-size:15px;overflow:hidden;text-overflow:ellipsis}
.ti .a{display:block;color:var(--mute);font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.ti .mm{display:none}
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:3px;padding:0 5px;margin-left:6px;vertical-align:2px;line-height:17px}
.tag.new{background:color-mix(in srgb,var(--acc) 18%,var(--sheet));color:var(--acc-t)}
.gp{color:var(--mute);overflow:hidden;text-overflow:ellipsis}
.plogo{display:block;height:32px;width:auto;max-width:100%}
.plogo.dk{background:var(--plate);padding:var(--plate-pad);border-radius:3px}
.og{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;vertical-align:middle}
.og .plogo{flex:none}
.otx{flex:none;display:inline-block;max-width:118px;padding:3px 6px;border:1px solid var(--line);border-radius:3px;color:var(--key2);font-size:11.5px;font-weight:650;line-height:1.25;white-space:normal}
.tiers{display:inline-flex;gap:3px}
.t{width:24px;height:24px;border-radius:3px;font-size:12px;font-weight:650;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.tl{color:var(--key)}.td{color:var(--paper)}
.ih button{width:24px;justify-content:center;position:relative}
.ih .ico{width:17px;height:17px}
.ih button.on::after{content:"";position:absolute;bottom:0;left:5px;right:5px;height:2px;background:var(--key);border-radius:1px}
.empty td{height:auto;padding:36px 16px;text-align:center;white-space:normal;color:var(--mute)}
.foot{color:var(--mute);font-size:12px;padding:18px 0 40vh}

/* phone: fold columns rather than scroll sideways */
@media (max-width:700px){
 .c-gp,.c-yr,.c-ln,.gp,.yr,.ln{display:none}
 .c-cv{width:52px}.c-tr{width:100px}
 .songs th,.songs td{padding:0 4px}
 .songs td:first-child,.songs th:first-child{padding-left:6px}
 .songs td{height:58px}
 .cover{width:40px;height:40px;font-size:12px}
 .ti b{font-size:14.5px}
 .ti .mm{display:inline}
 .t{width:21px;height:21px;font-size:11px}
 .ih button{width:21px}
 .tiers{gap:2px}
 .sortsel{display:inline-block}
 header.site{padding-top:16px}
 header.site h1{font-size:19px}
 .tabs{width:100%}
 /* All, New and Community share the first row; From GH & Rock Band and its arrow get the second to themselves */
 .tabs{flex-wrap:wrap;overflow:hidden}
 .tabs>button{flex:1 1 0}
 .tabs button{padding:8px 9px}
 .tabs .n{margin-left:4px}
 .tgrp{flex:1 1 100%;min-width:0;border-left:0;border-top:1px solid var(--line)}
 .tgrp>button[data-tab]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .gmenu{left:0;right:0!important;width:auto;max-width:none}
 .count{font-size:12px}
}