/* 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;--grn:#1f9a3d;--grn-t:#0e6a2a;--yel:#f6c500;--yel-t:#6b5300;--red:#e2262b;--red-t:#b0141a;
 --plate:transparent;--plate-pad:0;
 --cover-l:78%;--cover-ink:#545c66;
 --shadow:0 18px 48px -12px rgba(22,24,27,.28),0 2px 6px rgba(22,24,27,.08);--scrim:rgba(16,19,23,.35);
 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;--grn:#2aae55;--grn-t:#62d088;--yel:#f2c40f;--yel-t:#f2c40f;--red:#ef4a4e;--red-t:#ff8083;
 --plate:#e8ebee;--plate-pad:2px 4px;
 --cover-l:24%;--cover-ink:#aab2bc;
 --shadow:0 18px 48px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4);--scrim:rgba(0,0,0,.55);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}
body.modal{overflow:hidden}
button,input,select,textarea{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}
header.site.tabbed{border-bottom:0}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts:empty{display:none}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--sheet);border-radius:5px;padding:7px 12px;font-weight:620;white-space:nowrap;color:var(--key)}
.btn:hover{background:var(--sheet2)}
.btn.pri{background:var(--key);color:var(--paper);border-color:var(--key)}
.btn.pri:hover{background:var(--key2)}
.btn:disabled{opacity:.6;cursor:default}
.linkb{background:none;border:0;padding:0;color:var(--acc-t);text-decoration:underline;text-underline-offset:3px}
/* Songs | Requests */
.ptabs{display:flex;border-bottom:1px solid var(--line)}
.ptabs button{border:0;background:none;padding:9px 14px;font-weight:650;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px}
.ptabs button:first-child{padding-left:2px}
.ptabs button:hover{color:var(--key)}
.ptabs button[aria-pressed="true"]{color:var(--key);border-bottom-color:var(--key)}
.ptabs .n{font-weight:500;margin-left:4px}

/* 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}
.c-who{width:160px}.c-when{width:96px}.c-st{width:120px}
.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,.tag.you{background:color-mix(in srgb,var(--acc) 18%,var(--sheet));color:var(--acc-t)}
.tag.ns{border:1px solid var(--line);color:var(--mute);font-weight:600;text-transform:none;letter-spacing:0}
.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)}
.empty .btn{margin-top:10px}

/* the requests table */
.who{overflow:hidden;text-overflow:ellipsis;font-weight:600}
.who .none{font-weight:400;color:var(--mute);font-style:italic}
.when{color:var(--mute)}
.pill{display:inline-block;font-size:11px;font-weight:700;border-radius:3px;padding:1px 6px;white-space:nowrap}
.pill.lib,.pill.add{background:color-mix(in srgb,var(--grn) 16%,var(--sheet));color:var(--grn-t)}
.pill.req{background:color-mix(in srgb,var(--yel) 26%,var(--sheet));color:var(--yel-t)}
.pill.mine{background:var(--sheet2);color:var(--mute)}
.songs tr.you td{background:color-mix(in srgb,var(--acc) 7%,var(--sheet))}
.songs tr.you td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.songs tr.you:hover td{background:color-mix(in srgb,var(--acc) 12%,var(--sheet))}

/* Request a song: a centred pop-up, the whole screen on a phone */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:20}
.dialog{position:fixed;left:50%;top:6vh;transform:translateX(-50%);width:min(520px,calc(100vw - 32px));max-height:88vh;background:var(--paper);z-index:21;box-shadow:var(--shadow);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px}
.phead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.phead h2{margin:0;font-size:17px;font-weight:720}
.iconb{border:0;background:none;padding:6px;border-radius:4px;color:var(--mute);display:grid}
.iconb:hover{background:var(--sheet2);color:var(--key)}
.pbody{overflow:auto;padding:16px}
.field{margin-bottom:14px;position:relative}
.field label,.field .lbl{display:block;font-size:12.5px;font-weight:650;margin-bottom:4px}
.field label .mu{font-weight:400}
.ddwrap{position:relative}
.inp{width:100%;border:1px solid var(--line);border-radius:5px;background:var(--sheet);padding:8px 10px;outline:none}
.inp:focus{border-color:var(--acc)}
textarea.inp{resize:vertical;min-height:56px}
.inp.bad{border-color:var(--red)}
.err{color:var(--red-t);font-size:12.5px;margin-top:4px}
.blockerr{margin:0 0 12px}
.hint{color:var(--mute);font-size:12px;margin-top:4px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.dd{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--sheet);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);z-index:4;overflow:hidden;max-height:min(52vh,420px);overflow-y:auto}
.dd .it{display:flex;gap:10px;align-items:center;padding:7px 10px;cursor:pointer;border-top:1px solid var(--line2)}
.dd .it:first-child{border-top:0}
.dd .it.act{background:var(--sheet2)}
.dd .it.lib .tt{color:var(--mute)}
.dd .it .tt{flex:1;min-width:0}
.dd .it .tt b{display:block;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd .it .tt span{display:block;color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd .cover{width:32px;height:32px;font-size:10.5px}
.dd .msg{padding:10px;color:var(--mute);font-size:13px}
.dd .man{color:var(--acc-t);font-weight:620}
.dd .src{padding:5px 10px;font-size:11px;color:var(--mute);background:var(--sheet2);display:flex;justify-content:space-between}
.picked{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:6px;background:var(--sheet);padding:8px 10px}
.picked .tt{flex:1;min-width:0}
.picked b{display:block;font-weight:640}
.picked span{color:var(--mute);font-size:12.5px}
.picked .cover{width:38px;height:38px;font-size:12px}
.note{border-radius:6px;padding:10px 12px;margin:8px 0 0;font-size:13px;background:color-mix(in srgb,var(--grn) 12%,var(--sheet));border:1px solid color-mix(in srgb,var(--grn) 35%,var(--line))}
.done{padding:14px;border:1px solid color-mix(in srgb,var(--grn) 40%,var(--line));background:color-mix(in srgb,var(--grn) 10%,var(--sheet));border-radius:6px}
.done b{display:block;font-size:15px;margin-bottom:4px}
.done p{margin:0 0 10px;color:var(--key2)}
.done .btns{display:flex;gap:8px;flex-wrap:wrap}
.sendrow{display:flex;gap:10px;align-items:center}
.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,.c-who,.c-when,.who,.when{display:none}
 .c-cv{width:52px}.c-tr{width:100px}.c-st{width:92px}
 .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}
 .dialog{top:0;left:0;transform:none;width:100vw;max-height:100vh;height:100%;border-radius:0;border:0}
 header.site .acts{width:100%}
 header.site .acts .btn{flex:1;justify-content:center}
}