/* The labs' look: the parts every lab has, the same everywhere but in each lab's own colours. Link it before a
   lab's own <style>, which sets the lab's colours on :root and adds its own look (and can change any of these).
   Colours a lab sets:
     --bg --panel --panel2 --line --text --muted   its background, boxes, lines and text (each lab is tinted)
     --accent --accent2                             its own colour and a second one
     --good --bad                                   green and red
     --on-accent                                    text on its accent colour (a dark shade of it)
     --toast-line, --tip-accent, --tip-bg           optional: the message's border, the info box's colour and back */
*{box-sizing:border-box}
[hidden]{display:none !important} /* hidden means hidden, whatever display a class gives it */
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:13.5px;margin:10px 0 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}

/* the ← to all the tools, next to a lab's name at the top */
.home-link{color:var(--muted);text-decoration:none;font-weight:700;font-size:18px;padding:2px 8px;border-radius:8px;margin-left:-8px}
.home-link:hover{color:var(--text);background:var(--panel2)}

/* buttons */
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font:inherit;font-weight:600;
  cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn:hover{border-color:var(--accent)}
.btn.small{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#111)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.rec{background:var(--bad);border-color:var(--bad);color:#2a0606}
.btn:disabled{opacity:.45;cursor:default}

/* text boxes and menus */
select,input[type=text],input[type=number],input[type=search]{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;font:inherit;min-width:0}

/* trays: a group of buttons that go together, in a faint box (a tray with nothing showing in it goes) */
.tray{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 6px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.18)}
.tray:not(:has(> :not([hidden]))){display:none}

/* the message at the bottom (shared/core.js toast) */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--panel2);border:1px solid var(--toast-line,var(--accent));
  color:var(--text);padding:10px 16px;border-radius:12px;opacity:0;transition:.25s;pointer-events:none;z-index:60;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.good{border-color:var(--good)}
.toast.bad{border-color:var(--bad)}

/* the info box for anything with a data-tip (shared/core.js) */
.lab-tip{position:fixed;z-index:70;left:0;top:0;max-width:290px;background:var(--tip-bg,#0b0c14);border:1px solid color-mix(in srgb,var(--tip-accent,var(--accent)) 60%,transparent);
  border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.45;color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.55);pointer-events:none;
  opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.lab-tip.show{opacity:1;transform:none}
.lab-tip b{color:var(--tip-accent,var(--accent));margin-bottom:3px;font-size:13.5px}

/* song lists: a card for each song (Songbook.card in shared/songs.js), in letter groups */
.song-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.song-cards .az{grid-column:1/-1;margin:12px 2px 0;font-size:14px;font-weight:900;color:var(--accent);letter-spacing:.08em;border-bottom:1px solid var(--line);padding-bottom:4px}
.song-cards .az:first-child{margin-top:0}
.song-card{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 13px 10px 16px;display:flex;flex-direction:column;gap:2px;
  position:relative;overflow:hidden;min-height:76px;cursor:pointer;color:var(--text);font:inherit}
.song-card:hover{border-color:var(--accent);background:var(--panel2)}
.song-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--hue,var(--accent));opacity:.8}
.song-card b{font-size:15px;line-height:1.25;padding-right:46px}
.song-card small{color:var(--muted);font-size:13px}
.song-card .marks{position:absolute;top:9px;right:10px;font-size:13px;letter-spacing:1px;opacity:.9;display:flex;gap:3px}
.song-card .marks i{font-style:normal}
/* how well-known a song or artist is (Songbook.fameBadge, shared/fame.js): 🏆 Big hit, 👍 Well known, 💎 Deep cut, 🌟 Big name,
   🎯 One-hit wonder */
.fame-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;line-height:1.55;border:1px solid;border-radius:999px;padding:0 8px;white-space:nowrap;vertical-align:middle}
.fame-badge.f-hit{color:#ffd166;border-color:rgba(255,209,102,.45)}
.fame-badge.f-known{color:#8fd3ff;border-color:rgba(143,211,255,.4)}
.fame-badge.f-deep{color:#c9a7ff;border-color:rgba(201,167,255,.4)}
.fame-badge.f-big{color:#ffe08a;border-color:rgba(255,224,138,.45)}
.fame-badge.f-one{color:#ff9fb2;border-color:rgba(255,159,178,.45)}
/* its album cover on the left (Songbook.cover), like Spotify's lists; .cover works on its own too (Fretlab's and Stagelab's cards) */
.song-card.with-cover{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:11px;row-gap:1px;align-content:start}
.song-card.with-cover > :not(.cover){grid-column:2}
.song-card.with-cover > :is(.chs,.parts){grid-column:1/-1}
.song-card.with-cover > .cover{grid-row:1/3;align-self:start}
.cover{width:48px;height:48px;flex:none;border-radius:6px;overflow:hidden;display:block;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover.none{display:grid;place-items:center;background:linear-gradient(145deg,var(--hue,var(--accent)),rgba(0,0,0,.6));color:rgba(255,255,255,.85);font-weight:900;font-size:21px;line-height:1}
.cover.round{border-radius:50%} /* an artist's picture (Songbook.artistCover) */
.song-card .chs{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.song-card .chs i{font-style:normal;font-size:12px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.06);border-radius:6px;padding:0 6px}
.song-card .chs i[data-chord]:hover{color:var(--text);background:rgba(255,255,255,.14)}


/* the end of a song list drawn a screenful at a time (shared/songlist.js, Fretlab drawList): when it nears the screen, more songs are drawn */
.list-more{grid-column:1/-1;flex-basis:100%;height:1px}