/* Mongoose Tunes, "night session" (auctusclan, 2026-10-11; owner: "the green color it has looks terrible", "boost its graphics").
   Ink black, one warm amber accent, the covers as the main event. The Labs family bar above the page keeps the shared palette
   (venture-brand.css); everything below it is Tunes' own. Performance rules: no backdrop blur over the scrolling list, no
   always-running decoration, and cards off screen skip layout and paint (content-visibility). */
:root{
  --gold:#f2b450;--gold-l:#ffd28c;--gold-d:#b97a1e;--gold-dim:#d6a04c;--gold-faint:#f2b4500f;--coral:#ff7a59;
  --bg:#0c0b10;--bg2:#13121a;--bg3:#1b1924;--bg4:#24212f;
  --text:#f5f1e8;--text2:#b9b3c6;--text3:#8a8498;--border:#29262f;--border2:#3a3646;
  color-scheme:dark
}
html{background:var(--bg)}
body{font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;background:
  radial-gradient(1100px 520px at 88% -8%,#f2b45016,transparent 62%),
  radial-gradient(800px 480px at -12% 6%,#ff7a5910,transparent 60%),var(--bg);background-repeat:no-repeat;color:var(--text)}
body:before{display:none}
.orb{display:none}

/* ---- header: compact, so the music shows on the first screen ---- */
.page{max-width:1240px;padding:0 32px 14rem}
.page>header{text-align:left;padding:34px 0 18px;position:relative;margin-bottom:6px;border:0}
.page>header .eyebrow{color:var(--gold-dim);letter-spacing:2px;font-size:10px}
.site-title{font:700 60px/1 'DM Sans',system-ui,sans-serif;letter-spacing:-2.5px;color:var(--text)}
.site-title em{font:italic 400 64px/1 'Playfair Display',Georgia,serif;margin-left:12px;color:var(--gold);letter-spacing:-1px}
.tagline{text-transform:none;letter-spacing:.2px;font:15px/1.6 'DM Sans',system-ui,sans-serif;color:var(--text2);margin-top:12px}
.header-ornament{display:none}
/* the record: amber label, turning (transform only, so the compositor does it) */
.page>header:after{content:'';position:absolute;width:150px;height:150px;right:20px;top:26px;border-radius:50%;border:0;opacity:1;
  box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 60px #f2b45022;will-change:transform;
  background:radial-gradient(circle,#1a1208 0 5%,#f2b450 5.5% 25%,#c9842a 25.5% 27.5%,transparent 28%),
    conic-gradient(from 20deg,rgba(255,255,255,.16),transparent 12%,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%,transparent 88%,rgba(255,255,255,.16)),
    repeating-radial-gradient(circle,#0e0d12 0 1.5px,#1c1a22 1.5px 3px);
  animation:tunes-spin 9s linear infinite}
@keyframes tunes-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.page>header:after{animation:none}}

.account-bar{justify-content:flex-start;margin-top:4px;gap:10px}
.acc-pill{font:500 13px 'DM Sans',sans-serif;letter-spacing:0;min-height:38px;padding:8px 16px;color:var(--text);border:1px solid var(--border2);border-radius:999px;background:var(--bg2)}
.acc-pill:hover{border-color:var(--gold);color:var(--gold-l)}
#install-banner{margin:14px 0 10px;border-radius:10px;background:var(--bg2);border:1px solid var(--border)}

/* the counts: one quiet line, not a box */
.stats-bar{justify-content:flex-start;gap:22px;background:none;border:0;border-radius:0;padding:4px 0 0;margin:6px 0 22px}
.stat{flex-direction:row;align-items:baseline;gap:6px}
.stat-num{font:600 16px 'DM Sans',sans-serif;color:var(--text);text-shadow:none}
.stat-lbl{font:12px 'DM Sans',sans-serif;letter-spacing:0;text-transform:lowercase;color:var(--text3)}
.stat.clickable:hover .stat-num{color:var(--gold)}
.stat-div{display:none}

/* ---- controls: a solid sticky bar (a backdrop blur over 700 covers is what dropped frames) ---- */
.controls-bar{position:sticky;top:0;z-index:30;background:var(--bg);padding:12px 0;margin-bottom:10px;gap:8px}
.search-input{font:15px 'DM Sans',sans-serif;padding-block:13px;border:1px solid var(--border2);border-radius:999px;background:var(--bg2);color:var(--text)}
.search-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #f2b45022;outline:0}
.ctrl-pill{font:500 12px 'DM Sans',sans-serif;letter-spacing:0;text-transform:none;min-height:42px;border-radius:999px;padding:10px 15px;background:var(--bg2);border:1px solid var(--border2);color:var(--text2)}
.ctrl-pill:hover,.ctrl-pill.active,.ctrl-pill.on{border-color:var(--gold);color:var(--gold-l);background:#f2b45012}
.pill-playlists{border-color:#f2b45066;color:var(--gold-l)}
.filter-wrap:before,.filter-wrap:after{display:none}
.filter-row{padding:0;overflow:visible;gap:8px}
.filter-row label{display:flex;align-items:center;gap:14px;font:12px 'DM Sans',sans-serif;color:var(--text3);width:100%}
.filter-row select{font:14px 'DM Sans',sans-serif;max-width:420px;flex:1;min-width:0;padding:11px 14px;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:999px}
.section-label{margin:22px 0 14px}
.sl-text{font:600 13px 'DM Sans',sans-serif;letter-spacing:.5px;text-transform:none;color:var(--text)}
.sl-line{background:var(--border)}
.sl-count{color:var(--text3)}

/* ---- the shelf: tonight's picks, big covers ---- */
.shelf{margin:4px 0 8px}
.shelf h2{font:600 13px 'DM Sans',sans-serif;letter-spacing:.5px;color:var(--text);margin:0 0 12px;display:flex;align-items:baseline;gap:10px}
.shelf h2 small{font-weight:400;color:var(--text3)}
.shelf-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,230px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 14px;scrollbar-width:thin}
.shelf-item{scroll-snap-align:start;cursor:pointer;background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit}
.shelf-art{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--bg3);box-shadow:0 14px 34px #0007}
.shelf-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.shelf-item:hover .shelf-art img,.shelf-item:focus-visible .shelf-art img{transform:scale(1.04)}
.shelf-art:after{content:'\25B6';position:absolute;right:10px;bottom:10px;width:42px;height:42px;border-radius:50%;background:var(--gold);color:#1a1208;display:flex;align-items:center;justify-content:center;font-size:14px;padding-left:3px;box-sizing:border-box;opacity:0;transform:translateY(6px);transition:.25s;box-shadow:0 8px 20px #0008}
.shelf-item:hover .shelf-art:after,.shelf-item:focus-visible .shelf-art:after{opacity:1;transform:none}
.shelf-t{font:600 15px/1.3 'DM Sans',sans-serif;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelf-g{font:12px/1.4 'DM Sans',sans-serif;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelf[hidden]{display:none}

/* ---- the library: a wall of covers (body.tunes-list switches back to rows) ---- */
body:not(.tunes-list) #track-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:22px 18px}
body:not(.tunes-list) .track-card{background:none;border:0;border-radius:16px;overflow:visible;animation:none;opacity:1;position:relative;
  content-visibility:auto;contain-intrinsic-size:auto 250px}
body:not(.tunes-list) .track-card::before{display:none}
body:not(.tunes-list) .track-card:hover{transform:none;background:none}
body:not(.tunes-list) .track-top{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0}
body:not(.tunes-list) .track-thumb{width:100%;height:auto;aspect-ratio:1;border-radius:10px;border:0;background:var(--bg3);box-shadow:0 12px 30px #0006}
body:not(.tunes-list) .track-thumb img{transition:transform .45s}
body:not(.tunes-list) .track-card:hover .track-thumb img{transform:scale(1.04)}
body:not(.tunes-list) .track-thumb .play-overlay{inset:auto 10px 10px auto;width:44px;height:44px;border-radius:50%;background:var(--gold);color:#1a1208;font-size:15px;padding-left:3px;box-sizing:border-box;opacity:0;transform:translateY(6px);transition:.25s;box-shadow:0 8px 20px #0008}
body:not(.tunes-list) .track-card:hover .play-overlay{opacity:1;transform:none}
body:not(.tunes-list) .track-card.active .play-overlay{opacity:1;transform:none;background:var(--text)}
body:not(.tunes-list) .track-card.active .track-thumb{box-shadow:0 0 0 2px var(--gold),0 0 0 6px #f2b45024,0 16px 40px #f2b45030}
body:not(.tunes-list) .track-card.active .track-thumb img{filter:none}
body:not(.tunes-list) .track-info{padding:0 2px}
body:not(.tunes-list) .track-num{display:none}
body:not(.tunes-list) .track-title{font:600 15px/1.3 'DM Sans',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.tunes-list) .track-card.active .track-title{color:var(--gold-l)}
body:not(.tunes-list) .track-meta{display:flex;gap:8px;min-width:0}
body:not(.tunes-list) .track-tag{font:12px 'DM Sans',sans-serif;letter-spacing:0;text-transform:none;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body:not(.tunes-list) .track-hz{display:none}
body:not(.tunes-list) .track-desc{display:none!important}
body:not(.tunes-list) .track-card.expanded .track-desc{display:block!important;font-size:12px;line-height:1.5;color:var(--text2);margin-top:6px}
body:not(.tunes-list) .track-actions{position:absolute;top:8px;right:8px;gap:4px;opacity:0;transition:opacity .2s}
body:not(.tunes-list) .track-card:hover .track-actions,body:not(.tunes-list) .track-card:focus-within .track-actions{opacity:1}
body:not(.tunes-list) .track-actions .t-btn{width:34px;height:34px;min-width:34px;min-height:34px;border-radius:50%;background:#0c0b10cc;border:1px solid #ffffff22;color:var(--text)}
body:not(.tunes-list) .track-actions .t-btn.faved{color:var(--coral)}
body:not(.tunes-list) .prog-wrap{display:none;padding:6px 2px 0}
body:not(.tunes-list) .track-card.active .prog-wrap{display:flex}
body:not(.tunes-list) .track-card.in-queue::after{left:8px;right:auto;top:8px;z-index:2}
@media(hover:none){body:not(.tunes-list) .track-actions{opacity:1;top:6px;right:6px}body:not(.tunes-list) .track-actions .t-btn{width:30px;height:30px;min-width:30px;min-height:30px}body:not(.tunes-list) .track-actions .qb{display:none}}

/* rows (List view) */
body.tunes-list .track-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;animation:none;opacity:1;content-visibility:auto;contain-intrinsic-size:auto 86px}
body.tunes-list .track-card:hover{background:var(--bg3);border-color:var(--border2)}
body.tunes-list .track-card.active{background:#f2b4500d;border-color:#f2b45066}
body.tunes-list .track-top{padding:14px 18px}
body.tunes-list .track-thumb{width:52px;height:52px;border-radius:10px}
body.tunes-list .track-title{font:600 16px/1.4 'DM Sans',sans-serif}
.track-num,.track-tag,.track-hz,.track-time{font-size:10px}
.track-desc{font-size:12px;color:var(--text2)}
.track-actions button{min-width:34px;min-height:34px}
.prog-fill,#np-prog-fill{background:linear-gradient(90deg,var(--gold-d),var(--gold))}
.list-more{grid-column:1/-1;height:1px}

/* ---- now playing: the cover's own colors glow behind the bar ---- */
#np-bar{background:#0e0d13;border-top:1px solid #ffffff14;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate;overflow:hidden}
#np-bar:before{content:'';position:absolute;inset:-60px -40px 0;background:var(--np-art,none) center/cover no-repeat;filter:blur(46px) saturate(1.5);opacity:.42;z-index:-1;pointer-events:none;transition:opacity .6s}
.np-title{font:600 15px 'DM Sans',sans-serif}
.np-thumb{border-radius:10px;width:48px;height:48px;box-shadow:0 6px 18px #0008}
.np-controls button{min-width:40px;min-height:40px}
#btn-pp{background:var(--gold);color:#1a1208;border:0;box-shadow:0 6px 22px #f2b45040}
#btn-pp:hover{background:var(--gold-l)}

/* ---- panels and dialogs ---- */
.panel-hd-title{font:600 22px 'DM Sans',sans-serif}
.panel-hd{padding:22px}
.panel-close{width:40px;height:40px;color:var(--text)}
#panel{background:var(--bg2)}
.modal{border:1px solid var(--border2);border-radius:16px;background:var(--bg2)}
.modal-title{font-family:'DM Sans',sans-serif}

@media(max-width:760px){
  .page{padding:0 16px 14rem}
  .page>header{padding:24px 0 12px}
  .page>header:after{width:84px;height:84px;right:2px;top:30px;opacity:.95;box-shadow:0 8px 20px rgba(0,0,0,.5)}
  .site-title{font-size:40px;letter-spacing:-1.5px}
  .site-title em{display:block;font-size:46px;margin:2px 0 0}
  .tagline{font-size:13px;max-width:250px}
  .stats-bar{gap:16px;margin-bottom:14px}
  .controls-bar{position:relative;gap:6px}
  .search-wrap{flex-basis:100%}
  .ctrl-pill{min-height:40px;padding:8px 12px}
  .shelf-row{grid-auto-columns:minmax(150px,46vw);gap:12px}
  body:not(.tunes-list) #track-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  body:not(.tunes-list) .track-title{font-size:14px}
  body.tunes-list .track-top{gap:10px;padding:12px}
  body.tunes-list .track-thumb{width:44px;height:44px}
  .track-time{display:none}
}
/* the mood tints on the bar's top edge: amber, coral and violet instead of green */
body.mood-high #np-bar{border-top-color:#f2b45066!important}
body.mood-love #np-bar{border-top-color:#ff7a5966!important}
body.mood-dark #np-bar{border-top-color:#8a6cff55!important}

/* touch-ups after the first render (2026-10-11) */
.site-title em{display:inline;margin-left:14px}
.controls-bar{box-shadow:0 10px 16px -12px #000}
@media(max-width:760px){
  /* phones: the covers start on the first screen. Sign-in takes the record's corner; the counts live behind Queue and Mine */
  .page>header{padding:20px 0 6px}
  .page>header:after{display:none}
  .page>header .eyebrow{font-size:10px}
  .account-bar{position:absolute;top:18px;right:16px;margin:0}
  .acc-pill{min-height:34px;padding:6px 13px;font-size:12px}
  .site-title{font-size:36px}
  .site-title em{display:inline;font-size:40px;margin-left:8px}
  .tagline{font-size:13px;max-width:none;margin-top:8px}
  .stats-bar{display:none}
  #install-banner{margin:10px 0 6px;padding:10px 12px}
  .install-banner-text{font-size:12px}
  .section-label{margin:14px 0 10px}
}
/* the Mongoose companion (shared mongoose-companion.js, inline-styled) sat over the bar's next and share buttons: lift it while a
   song is loaded */
body:has(#np-bar.show) button[aria-label="Open Mongoose"]{bottom:calc(var(--np-h,150px) + 14px)!important}
@media(max-width:760px){body:has(#np-bar.show){--np-h:116px}}