/* iPod Rebuild — dark editorial. Committed to one visual world: this is a
   wall of sleeve art, and sleeve art wants a dark room. */
:root{
  --ground:#0C0B0A; --surface:#141310; --surface-2:#1B1A16;
  --rule:#2A2823; --rule-soft:#201F1B;
  --dim:#7E7A70; --body:#C3BEB1; --bright:#F4F1E8;
  --gold:#D4B26A; --gold-dim:#8A7440;
  --steel:#6E8796; --ok:#7FA07A; --warn:#C08A57;
  --bar:64px; --player:64px;
  --ctl:2.1rem;   /* header controls */
  --chip:1.75rem; /* filter-row controls */
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp:"Syne","IBM Plex Sans",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ground); color:var(--body); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  padding-bottom:var(--player);
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ------------------------------------------------------------- top bar */
header{
  position:sticky;top:0;z-index:40;background:rgba(12,11,10,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
}
.bar{display:flex;align-items:center;gap:.9rem;padding:0 1rem;min-height:var(--bar);flex-wrap:wrap}
.brand{font-family:var(--disp);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;
  color:var(--bright);white-space:nowrap;cursor:pointer}
.brand span{color:var(--gold-dim)}
.search{flex:1 1 200px;min-width:140px;position:relative}
.search input{
  width:100%;height:var(--ctl);background:var(--surface);border:1px solid var(--rule);
  color:var(--bright);padding:0 .7rem 0 2rem;border-radius:2px;font-size:.88rem;
  font-family:var(--sans);
}
.search input:hover{border-color:var(--gold-dim)}
.search input::placeholder{color:var(--dim)}
.search svg{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);
  width:.9rem;height:.9rem;stroke:var(--dim);fill:none;stroke-width:2}
select{
  appearance:none;-webkit-appearance:none;height:var(--ctl);
  background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23D4B26A'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:.62rem;
  border:1px solid var(--rule);border-radius:2px;color:var(--body);
  padding:0 1.75rem 0 .7rem;font-size:.74rem;font-family:var(--mono);
  letter-spacing:.04em;cursor:pointer;
}
select:hover{border-color:var(--gold-dim);color:var(--bright)}
.grp select{height:var(--chip);border-radius:99px;font-size:.7rem;padding:0 1.6rem 0 .75rem}
.btn{
  height:var(--ctl);display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);background:var(--surface);padding:0 .8rem;
  border-radius:2px;font-family:var(--mono);font-size:.74rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--body);white-space:nowrap;
}
.btn:hover{border-color:var(--gold-dim);color:var(--bright)}
.btn.on{background:var(--gold);border-color:var(--gold);color:#1a1509;font-weight:500}
.btn.gold{border-color:var(--gold-dim);color:var(--gold)}

.subbar{display:flex;padding:0 1rem .75rem;flex-wrap:wrap;align-items:center;row-gap:.55rem}
.grp{display:flex;align-items:center;gap:.32rem;flex-wrap:wrap;
  padding:0 .95rem;border-left:1px solid var(--rule)}
.grp:first-child{padding-left:0;border-left:0}
.grp.end{margin-left:auto;border-left:0;padding-right:0;gap:.3rem}
@media (max-width:900px){
  .grp{padding:0;border-left:0;width:100%}
  .grp.end{margin-left:0}
}
.glabel{font-family:var(--mono);font-size:.57rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-dim);margin-right:.25rem;white-space:nowrap}
.chip.ghost{border-style:dashed;border-color:#262420;color:var(--dim)}
.chip.ghost:hover{border-style:solid}
.chip.hearted{display:inline-flex;align-items:center;gap:.32rem}
.chip.hearted svg{width:.66rem;height:.66rem;fill:var(--dim);stroke:none;
  flex:none;display:inline-block}
.chip.hearted.on svg{fill:#1a1509}
.iconbtn{width:var(--ctl);height:var(--ctl);border:1px solid var(--rule);border-radius:2px;
  display:grid;place-items:center;color:var(--dim);flex:none;background:var(--surface)}
.iconbtn:hover{border-color:var(--gold-dim);color:var(--gold)}
.chip{
  height:var(--chip);display:inline-flex;align-items:center;gap:.3rem;
  border:1px solid var(--rule);background:transparent;padding:0 .7rem;
  border-radius:99px;font-family:var(--mono);font-size:.7rem;color:var(--dim);
  white-space:nowrap;
}
.chip:hover{color:var(--body);border-color:var(--gold-dim)}
.chip.on{background:var(--gold);border-color:var(--gold);color:#1a1509}
.chip.own.on{background:var(--ok);border-color:var(--ok);color:#0c140b}
.chip.want.on{background:var(--gold);border-color:var(--gold);color:#1a1509}
.sep{width:1px;height:1.1rem;background:var(--rule);margin:0 .35rem}
.count{font-family:var(--mono);font-size:.68rem;color:var(--dim);
  white-space:nowrap;margin-right:.45rem}

/* ------------------------------------------------------------- the wall */
main{padding:1.4rem 1rem 3rem}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:1.1rem}
@media (max-width:480px){.wall{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:.8rem}}
.card{position:relative;text-align:left;display:flex;flex-direction:column;gap:.45rem}
.sleeve{
  position:relative;aspect-ratio:1;background:var(--surface-2);overflow:hidden;
  border:1px solid var(--rule-soft);
}
.sleeve img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease,filter .35s ease}
.sleeve .hit{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;
  background:transparent;border:0;padding:0}
.card.playable:hover .sleeve img{filter:brightness(1.12)}
.card:hover .sleeve img{transform:scale(1.035);filter:brightness(1.06)}
.sleeve .noart{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.6rem;color:var(--dim);text-align:center;padding:.5rem}
.meta{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.meta .t{color:var(--bright);font-size:.82rem;line-height:1.25;font-weight:500;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.meta .a{color:var(--dim);font-size:.75rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.meta .n{font-family:var(--mono);font-size:.64rem;color:var(--gold-dim);
  letter-spacing:.04em;margin-top:.12rem}
.mark{position:absolute;top:.4rem;right:.4rem;padding:.1rem .34rem;border-radius:2px;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(12,11,10,.85);color:var(--dim)}
.mark.want{color:#1a1509;background:var(--gold)}
.mark.own{color:#0c140b;background:var(--ok)}
.mark.passed{color:var(--dim);background:rgba(12,11,10,.85);text-decoration:line-through}

/* icon buttons, shared by the grid toolbar and the album page */
.ic{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.solid{fill:currentColor;stroke:none}

.selbox{
  position:absolute;top:.4rem;left:.4rem;width:1.15rem;height:1.15rem;border-radius:2px;
  border:1px solid rgba(244,241,232,.45);background:rgba(12,11,10,.7);
  display:grid;place-items:center;opacity:0;transition:opacity .16s;z-index:2;
}
.card:hover .selbox,.card.sel .selbox,.selbox:focus-visible,body.selecting .selbox{opacity:1}
.selbox svg{width:.7rem;height:.7rem;stroke:var(--bright);opacity:0}
.card.sel .selbox{background:var(--gold);border-color:var(--gold)}
.card.sel .selbox svg{stroke:#1a1509;opacity:1}
.card.sel .sleeve{outline:2px solid var(--gold);outline-offset:-2px}

.cardtools{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.25rem;
  padding:.35rem;background:linear-gradient(to top,rgba(10,9,8,.92),rgba(10,9,8,0));
  opacity:0;transition:opacity .18s;
}
.card:hover .cardtools,.card:focus-within .cardtools{opacity:1}
@media (hover:none){.cardtools{opacity:1}.selbox{opacity:1}}
.tbtn{
  width:1.6rem;height:1.6rem;border-radius:2px;border:1px solid rgba(244,241,232,.22);
  background:rgba(12,11,10,.72);display:grid;place-items:center;color:var(--body);
}
.tbtn:hover{border-color:var(--gold);color:var(--gold)}
.tbtn.on{background:var(--gold);border-color:var(--gold);color:#1a1509}
.tbtn.own.on{background:var(--ok);border-color:var(--ok);color:#0c140b}
.tbtn.play{margin-left:auto}
.tbtn.play svg{fill:var(--gold);stroke:none}
.tbtn.play:hover svg{fill:var(--bright)}

/* ------------------------------------------------------------- detail */
.detail{max-width:1080px;margin:0 auto}
.back{font-family:var(--mono);font-size:.72rem;color:var(--dim);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.3rem;display:inline-block}
.back:hover{color:var(--gold);text-decoration:none}
.dhead{display:grid;grid-template-columns:300px 1fr;gap:2.2rem;align-items:start}
@media (max-width:760px){.dhead{grid-template-columns:1fr;gap:1.3rem}}
.dart{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--rule);
  background:var(--surface-2);max-width:100%}
.dtitle{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,4vw,2.4rem);
  line-height:1.04;letter-spacing:-.02em;color:var(--bright);margin:0 0 .3rem;
  text-wrap:balance}
.dartist{font-size:1.05rem;color:var(--gold);margin:0 0 1.1rem;display:inline-block}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.2rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:1.2rem}
.fact{background:var(--surface);padding:.62rem .7rem}
.fact .v{font-family:var(--disp);font-weight:700;font-size:1.12rem;color:var(--bright);
  line-height:1.15;font-variant-numeric:tabular-nums}
.fact .v.sm{font-size:.92rem;white-space:nowrap}
.fact .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);display:block;margin-top:.16rem}
.tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.1rem}
.tag{font-family:var(--mono);font-size:.66rem;color:var(--dim);border:1px solid var(--rule);
  padding:.14rem .48rem;border-radius:99px}
.actions{display:flex;gap:.4rem;flex-wrap:nowrap;margin-bottom:1.3rem;
  overflow-x:auto;padding-bottom:.25rem;scrollbar-width:thin}
.actions .btn{white-space:nowrap;flex:none}
@media (max-width:680px){.actions{flex-wrap:wrap;overflow:visible}}

.scorebar{display:flex;height:6px;margin:.1rem 0 1.1rem;background:var(--surface-2);
  border:1px solid var(--rule)}
.scorebar i{display:block;height:100%}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;font-family:var(--mono);font-size:.63rem;
  color:var(--dim);margin-top:-.8rem;margin-bottom:1.2rem}
.legend span{display:inline-flex;align-items:center;gap:.3rem}
.legend i{width:.5rem;height:.5rem;display:inline-block}

h2.sec{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dim);margin:2rem 0 .7rem;font-weight:400}
.tracks{border-top:1px solid var(--rule)}
.trk{display:grid;grid-template-columns:2rem minmax(0,1fr) 1rem 3.4rem 4.4rem 3rem 1.5rem;gap:.7rem;align-items:center;
  padding:.5rem .3rem;border-bottom:1px solid var(--rule-soft)}
.trk:hover{background:var(--surface)}
.trk .num{font-family:var(--mono);font-size:.72rem;color:var(--dim);text-align:right}
.trk .nm{color:var(--body);font-size:.9rem;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.trk.hot .nm{color:var(--bright)}
.trk .pc{font-family:var(--mono);font-size:.7rem;color:var(--gold-dim);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.25rem;justify-content:flex-end}
.trk .pc svg{width:.6rem;height:.6rem;fill:var(--gold-dim);flex:none}
.trk .pc.zero{color:var(--rule);}
.trk .pc.zero svg{fill:var(--rule)}
.heart{width:.8rem;height:.8rem;display:block;fill:none;stroke:var(--rule);stroke-width:2}
.heart.on{fill:#C4566A;stroke:#C4566A}
.trk.loved .nm{color:var(--bright)}
.trk .dur{font-family:var(--mono);font-size:.7rem;color:var(--dim);
  font-variant-numeric:tabular-nums;text-align:right}
.trk .lp{font-family:var(--mono);font-size:.68rem;color:var(--dim);text-align:right;
  white-space:nowrap}
.trk .lp.never{color:var(--rule)}
@media (max-width:660px){
  .trk{grid-template-columns:1.6rem minmax(0,1fr) 1rem 3rem 1.5rem;gap:.5rem}
  .trk .lp,.trk .dur{display:none}
}
.trk .pl{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule)}
.trk .pl svg{width:.6rem;height:.6rem;fill:var(--gold)}
.trk .pl:hover{border-color:var(--gold)}
.trk .pl.mute svg{fill:var(--dim)}

.morelist{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.morelist div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem .3rem;
  border-bottom:1px solid var(--rule-soft);font-size:.86rem}
.morelist span{font-family:var(--mono);font-size:.72rem;color:var(--dim)}

/* ------------------------------------------------------------- shuffle */
.shufwrap{position:relative;display:flex}
.shufmain{
  border:1px solid var(--gold-dim);background:var(--surface);color:var(--gold);
  height:var(--ctl);padding:0 .8rem;border-radius:2px 0 0 2px;border-right:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  line-height:1.2;min-width:5.6rem;
}
.shufmain:hover{background:var(--surface-2)}
.shufmain .sub{font-size:.58rem;letter-spacing:.04em;color:var(--dim);text-transform:none;
  max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shuftoggle{
  border:1px solid var(--gold-dim);background:var(--surface);border-radius:0 2px 2px 0;
  height:var(--ctl);padding:0 .5rem;display:grid;place-items:center;
}
.shuftoggle:hover{background:var(--surface-2)}
.shuftoggle svg{width:.65rem;height:.65rem;fill:var(--gold);transition:transform .18s}
.shufwrap.open .shuftoggle svg{transform:rotate(180deg)}
.shufpanel{
  position:absolute;top:calc(100% + 6px);right:0;z-index:70;width:min(21rem,calc(100vw - 2rem));
  background:var(--surface);border:1px solid var(--gold-dim);padding:.95rem 1rem 1rem;
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
@media (max-width:560px){.shufpanel{right:auto;left:0}}
.field{margin-bottom:.75rem}
.field:last-of-type{margin-bottom:.95rem}
.field label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.32rem}
.field .opts{display:flex;gap:.3rem;flex-wrap:wrap}
.shufpanel .foot{display:flex;gap:.4rem;align-items:center;border-top:1px solid var(--rule);
  padding-top:.8rem}
.shufpanel .foot .n{font-family:var(--mono);font-size:.63rem;color:var(--dim);margin-left:auto}

/* ------------------------------------------------------------- player */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--player);
  background:var(--surface);border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:.9rem;padding:0 1rem;
}
#pArtLink{display:block;flex:none;line-height:0}
#pArtLink:hover{outline:1px solid var(--gold)}
.player img{width:44px;height:44px;object-fit:cover;border:1px solid var(--rule);display:block}
.pinfo{min-width:0;flex:1}
.pinfo .pt{color:var(--bright);font-size:.85rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block;text-decoration:none}
.pinfo .pt:hover{color:var(--gold)}
.pinfo .pa{color:var(--dim);font-size:.74rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pinfo .pa a{color:var(--dim);text-decoration:none}
.pinfo .pa a:hover{color:var(--gold);text-decoration:underline}
.pacts{display:flex;gap:.3rem;flex:none;align-items:center}
.pacts .btn{padding:.34rem .55rem;font-size:.65rem;gap:.32rem}
.pacts .btn.on{background:var(--gold);border-color:var(--gold);color:#1a1509}
.pacts .btn.own.on{background:var(--ok);border-color:var(--ok);color:#0c140b}
@media (max-width:1180px){.pacts .lbl{display:none}.pacts .btn{padding:.34rem .45rem}}
.pbtn{width:2.1rem;height:2.1rem;border:1px solid var(--rule);border-radius:50%;
  display:grid;place-items:center;flex:none}
.pbtn svg{width:.8rem;height:.8rem;fill:var(--gold)}
.pbtn:hover{border-color:var(--gold)}
.prog{position:absolute;left:0;top:-1px;height:2px;background:var(--gold);width:0}
.empty{padding:4rem 1rem;text-align:center;color:var(--dim);font-family:var(--mono);
  font-size:.8rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------- selection bar */
.selbar{
  position:sticky;top:var(--bar);z-index:35;display:flex;align-items:center;gap:.45rem;
  flex-wrap:wrap;padding:.55rem 1rem;background:var(--surface-2);
  border-bottom:1px solid var(--gold-dim);
}
.selbar .n{font-family:var(--mono);font-size:.72rem;color:var(--gold);
  letter-spacing:.06em;margin-right:.35rem}
.selbar .spacer{margin-left:auto}
.btn.icn{display:inline-flex;align-items:center;gap:.42rem}
.selbar .btn{height:var(--chip)}
.pacts .btn{height:1.85rem}

/* ------------------------------------------------------------- toast */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--player) + 1rem);
  z-index:80;background:var(--surface-2);border:1px solid var(--gold-dim);
  color:var(--bright);padding:.5rem .9rem;font-family:var(--mono);font-size:.74rem;
  box-shadow:0 10px 30px rgba(0,0,0,.5);pointer-events:none;
  opacity:0;transition:opacity .18s,transform .18s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* ------------------------------------------------------- player waveform */
.wave{
  flex:1;min-width:80px;height:38px;cursor:pointer;display:block;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  margin:0 .55rem;box-sizing:border-box;
}
.player .pinfo{flex:0 1 15rem}
@media (max-width:700px){.wave{display:none}.player .pinfo{flex:1}}
.ptime{font-family:var(--mono);font-size:.66rem;color:var(--dim);
  font-variant-numeric:tabular-nums;flex:none}

/* --------------------------------------------------------- shortcuts */
.kbdwrap{position:fixed;inset:0;z-index:90;background:rgba(6,6,5,.78);
  display:grid;place-items:center;padding:1rem}
.kbdbox{background:var(--surface);border:1px solid var(--gold-dim);padding:1.5rem;
  max-width:34rem;width:100%;max-height:85vh;overflow:auto}
.kbdbox h3{font-family:var(--disp);font-weight:700;color:var(--bright);margin:0 0 1rem;
  font-size:1.15rem}
.kbdgrid{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;align-items:baseline}
.kbdgrid kbd{font-family:var(--mono);font-size:.7rem;background:var(--surface-2);
  border:1px solid var(--rule);border-bottom-width:2px;border-radius:3px;
  padding:.12rem .4rem;color:var(--gold);white-space:nowrap}
.kbdgrid span{font-size:.86rem;color:var(--body)}
.kbdgrid .h{grid-column:1/-1;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-dim);margin-top:.7rem}
.kbdgrid .h:first-child{margin-top:0}

/* =====================================================================
   Round 6 — compression-era assets, genre system, and the fixes Liv
   caught on the album page.
   ===================================================================== */

/* The canvas, not just the body. Safari was painting its own ground below
   the fold on any page taller than the window, because body was pinned to
   height:100% and the overflow had nothing behind it. */
:root{color-scheme:dark}
html{background:var(--ground);min-height:100%}
html,body{height:auto;min-height:100%}
body{background:var(--ground)}

/* ------------------------------------------------- wall: sizing control */
.wall{grid-template-columns:repeat(auto-fill,minmax(min(var(--cardw,148px),100%),1fr))}
@media (max-width:480px){
  .wall{grid-template-columns:repeat(auto-fill,minmax(min(var(--cardw,148px),46vw),1fr));gap:.8rem}
}
.rng{-webkit-appearance:none;appearance:none;width:6.5rem;height:var(--chip);
  background:transparent;cursor:ew-resize}
.rng::-webkit-slider-runnable-track{height:2px;background:var(--rule);border-radius:2px}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:.78rem;height:.78rem;border-radius:50%;
  background:var(--gtone,var(--gold));margin-top:-.34rem}
.rng::-moz-range-track{height:2px;background:var(--rule);border-radius:2px}
.rng::-moz-range-thumb{width:.78rem;height:.78rem;border:0;border-radius:50%;
  background:var(--gtone,var(--gold))}
.rngv{font-family:var(--mono);font-size:.6rem;color:var(--dim);min-width:2.2rem}

/* --------------------------------------------- nav colour hierarchy */
.grp[data-tone="years"]  {--gtone:#6E8796}
.grp[data-tone="genre"]  {--gtone:#7FA07A}
.grp[data-tone="show"]   {--gtone:#D4B26A}
.grp[data-tone="marked"] {--gtone:#C08A57}
.grp[data-tone="size"]   {--gtone:#9B8CC7}
.grp[data-tone="end"]    {--gtone:#6E7A70}
.grp{border-left-color:var(--gtone,var(--rule))}
.glabel{color:var(--gtone,var(--gold-dim))}
.grp .chip.on,.grp select:focus-visible{border-color:var(--gtone)}
.bar{box-shadow:inset 0 -1px 0 rgba(212,178,106,.20)}
.subbar{box-shadow:inset 0 -1px 0 rgba(110,135,150,.14)}

/* ------------------------------------------------- responsive chrome */
@media (max-width:900px){
  .bar{min-height:0;padding:.6rem 1rem;row-gap:.55rem;align-items:center}
  .search{order:9;flex:1 1 100%}
  .subbar{padding-top:.15rem}
}
@media (max-width:620px){
  .bar{gap:.55rem}
  .brand{font-size:.95rem}
  .bar #sort{flex:1 1 auto;min-width:0}
  .shufwrap{flex:none}
  .rng{width:5rem}
}

/* ------------------------------------------------- album page head */
.drow{display:flex;align-items:flex-start;gap:1rem;justify-content:space-between}
.drow .dtitle{flex:1 1 auto;min-width:0}
.yearbadge{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.08rem;
  border-left:2px solid var(--gold-dim);padding:.05rem 0 .05rem .65rem;margin-top:.5rem}
.yearbadge .yl{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.yearbadge .yv{font-family:var(--disp);font-weight:700;font-size:1.32rem;
  color:var(--bright);line-height:1}
@media (max-width:480px){.yearbadge .yv{font-size:1.05rem}}

.facts{grid-template-columns:repeat(auto-fit,minmax(7.2rem,1fr))}
.fact .v.sm{white-space:nowrap}
.fact.plays .range{display:block;font-family:var(--mono);font-size:.6rem;
  color:var(--gold-dim);margin-top:.2rem;white-space:nowrap}

/* ------------------------------------------------- genre tags */
.tag{display:inline-flex;align-items:center;gap:.32rem;background:none;
  padding:.16rem .55rem;line-height:1.5}
button.tag{cursor:pointer}
button.tag:hover{background:var(--surface-2)}
.tag .gic{width:.74rem;height:.74rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tag.fam{color:var(--gc)}
@supports (color:color-mix(in srgb,red,blue)){
  .tag.fam{border-color:color-mix(in srgb,var(--gc) 40%,transparent)}
  button.tag.fam:hover{background:color-mix(in srgb,var(--gc) 12%,transparent)}
}

/* ------------------------------------------------- top tracks */
.toptrax{display:flex;gap:.55rem;flex-wrap:wrap;align-items:stretch;margin:1.9rem 0 -.6rem}
.toplabel{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dim);align-self:center;flex:none}
.toptrk{display:flex;align-items:center;gap:.55rem;background:var(--surface);
  border:1px solid var(--rule);padding:.42rem .6rem;min-width:0;flex:1 1 13rem}
.toptrk .rank{font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--gold);flex:none}
.toptrk .tt{color:var(--bright);font-size:.82rem;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toptrk .tp{font-family:var(--mono);font-size:.61rem;color:var(--dim);white-space:nowrap;flex:none}
.toptrk .pl{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule);flex:none}
.toptrk .pl svg{width:.6rem;height:.6rem;fill:var(--gold)}
.toptrk .pl.mute svg{fill:var(--dim)}

/* ------------------------------------------------- track listing */
:root{--trkcols:2rem minmax(0,1fr) 1rem 3rem 6.6rem 3rem 1.5rem 1.5rem}
.tracks{border-top:0}
.trk,.trkhead{grid-template-columns:var(--trkcols)}
.trkhead{display:grid;gap:.7rem;align-items:center;padding:.4rem .3rem;
  border-bottom:1px solid var(--rule);color:var(--dim)}
.trkhead span{display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.57rem;letter-spacing:.12em;text-transform:uppercase}
.trkhead span:nth-child(1){justify-content:flex-end}
.trkhead span:nth-child(2){justify-content:flex-start}
.trkhead svg{width:.72rem;height:.72rem}
.trkhead svg:not([fill="none"]){fill:currentColor;stroke:none}
.trkhead .heart.on{fill:currentColor;stroke:none}
.trkhead .ic{fill:none;stroke:currentColor}
.trk .pc{justify-content:flex-end}
.trk .lfm{width:1.5rem;height:1.5rem;display:grid;place-items:center;opacity:.4;
  transition:opacity .15s}
.trk:hover .lfm{opacity:.75}
.trk .lfm:hover{opacity:1}
.trk .lfm .ic{width:.82rem;height:.82rem;fill:none;stroke:currentColor}
@media (max-width:760px){
  :root{--trkcols:1.7rem minmax(0,1fr) 1rem 2.6rem 1.5rem 1.5rem}
  .trk .lp,.trk .dur,
  .trkhead span:nth-child(5),.trkhead span:nth-child(6){display:none}
}

/* The cached sleeve is 600px, so a card must never be drawn wider than that —
   an auto-fill 1fr track will happily stretch past it and upscale the art. */
.card{max-width:600px}

/* There are exactly four facts, so let them land 2x2 rather than 3+1 with a
   dead cell hanging off the end. */
@media (max-width:620px){.facts{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   Round 7 — stacked view settings, a permanent context bar, genre theming.
   ===================================================================== */

/* Every accent in the app now runs through --accent, so filtering to a genre
   can re-theme the whole room by setting one variable on <html>. */
:root{
  --accent:#D4B26A; --accent-dim:#8A7440;
  --gold:var(--accent); --gold-dim:var(--accent-dim);
}

/* ------------------------------------------------------------ top bar */
header{border-bottom:0}
.bar{box-shadow:none;border-bottom:1px solid var(--rule);min-height:var(--bar);
  padding:0 1rem;gap:.7rem}
/* search was eating the bar; it now has a ceiling and yields to the buttons */
.search{flex:1 1 15rem;max-width:34rem;min-width:8rem}
.viewbtn{display:inline-flex;align-items:center;gap:.4rem;height:var(--ctl);
  padding:0 .7rem;border:1px solid var(--rule);background:var(--surface);
  color:var(--body);border-radius:2px;white-space:nowrap;flex:none}
.viewbtn .ic{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8}
.viewbtn .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase}
.viewbtn:hover{border-color:var(--accent-dim);color:var(--bright)}
.viewbtn.on{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}
@media (max-width:620px){.viewbtn .lbl{display:none}.viewbtn{padding:0 .55rem}}

/* ------------------------------------------- stacked view settings panel */
.viewpanel{
  overflow:hidden;padding:0 1rem;display:flex;flex-direction:column;
  border-bottom:1px solid var(--rule);background:var(--ground);
  transition:height .22s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){.viewpanel{transition:none}}
/* one row per kind of control, each tagged with its own colour down the left
   edge — no vertical dividers to clip into the row below */
.viewpanel .grp{
  width:100%;margin:0;gap:.3rem;align-items:center;flex-wrap:wrap;
  padding:.28rem 0 .28rem .72rem;
  border-left:2px solid var(--gtone,var(--rule));border-right:0;
}
.viewpanel .grp:first-child{padding-top:.75rem}
.viewpanel .grp:last-child{padding-bottom:.85rem}
.viewpanel .grp + .grp{border-top:0}
.viewpanel .glabel{min-width:5rem;flex:none}
.viewpanel .grp.subrow{opacity:.95}
.viewpanel .grp.subrow .glabel{padding-left:.9rem}
@media (max-width:560px){
  .viewpanel .glabel{min-width:0;width:100%;margin-bottom:.1rem}
}
.vrule{width:1px;height:1rem;background:var(--rule);margin:0 .35rem;flex:none}
.chip .ct{opacity:.55;font-size:.9em;margin-left:.1em}
.chip.on{border-color:var(--gtone,var(--accent));color:var(--bright)}
@supports (color:color-mix(in srgb,red,blue)){
  .chip.on{background:color-mix(in srgb,var(--gtone,var(--accent)) 15%,transparent)}
}
.chip.fam{--gtone:var(--gc);display:inline-flex;align-items:center;gap:.32rem}
.chip.fam .gic{width:.72rem;height:.72rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chip.fam:not(.on){color:var(--gc)}

/* notched size slider */
.rng{width:8rem}
.rng::-webkit-slider-runnable-track{height:2px;background:var(--rule)}
.rng::-webkit-slider-thumb{background:var(--gtone,var(--accent))}
.rng::-moz-range-thumb{background:var(--gtone,var(--accent))}
/* Safari draws its own tick marks for a range with a list, and they land
   beside the control rather than under it. The step already snaps; the
   readout already names the size. */
datalist{display:none}
.rng{background-image:repeating-linear-gradient(90deg,
  var(--rule) 0 1px, transparent 1px 12.5%);
  background-size:calc(100% - .78rem) 5px;background-position:.39rem 72%;
  background-repeat:no-repeat}

/* ------------------------------------------------------- context bar */
.ctxbar{border-bottom:1px solid var(--rule);background:var(--ground)}
.ctxrow{display:flex;align-items:center;gap:.4rem;padding:.42rem 1rem;flex-wrap:wrap;
  row-gap:.35rem}
.ctxrow .spacer{flex:1 1 auto}
.ctxrow .count{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--body);white-space:nowrap}
.ctxrow .count.accent{color:var(--accent)}
.ctxrow .fsum{font-family:var(--mono);font-size:.63rem;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24rem}
.ctxrow.sel{border-left:2px solid var(--accent)}
@media (max-width:640px){.hide-sm{display:none}}

/* the wall's lazy tail */
.sentinel{height:1px}

/* ------------------------------------------------- album page: marks row */
.markrow{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1.1rem}
.markrow .btn{white-space:nowrap}

/* ------------------------------------------------- top tracks, clickable */
.toptrk{width:auto;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--rule);background:var(--surface)}
.toptrk:hover{border-color:var(--accent-dim);background:var(--surface-2)}
.toptrk:hover .pl{border-color:var(--accent)}
.toptrk .pl{pointer-events:none}
a.toptrk:hover{text-decoration:none}

/* ------------------------------------------------ track listing headers */
.trkhead .th{display:flex;align-items:center;justify-content:center;gap:.2rem;
  font-family:var(--mono);font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);background:none;border:0;padding:0;min-width:0}
.trkhead .th.sortable{cursor:pointer}
.trkhead .th.sortable:hover{color:var(--body)}
.trkhead .th.on{color:var(--accent)}
.trkhead .th .caret{font-style:normal;font-size:.7em;line-height:1}
/* headers sit over right-aligned values, so they align right too */
.trkhead .th:nth-child(1){justify-content:flex-end}
.trkhead .th:nth-child(2){justify-content:flex-start}
.trkhead .th:nth-child(4),
.trkhead .th:nth-child(5),
.trkhead .th:nth-child(6){justify-content:flex-end}
.trkhead svg{width:.72rem;height:.72rem;flex:none}
.trkhead .th svg:not([fill="none"]){fill:currentColor;stroke:none}
.trkhead .heart.on{fill:currentColor;stroke:none}

/* =====================================================================
   Round 8 — row alignment, nav balance, reset.
   ===================================================================== */

/* Genre and Subgenre held their chips in a <span>, which is a single flex
   item: once it outgrew the row it wrapped whole, dropping its label onto a
   line of its own while every other row kept its label inline. display:contents
   dissolves the wrapper so the chips are flex items like all the others. */
#genreChips,#subChips,#decChips{display:contents}
.viewpanel .grp.subrow .glabel{padding-left:0}
.viewpanel .glabel{min-width:5.4rem}

/* the search takes whatever the buttons don't need, so the cluster on the
   right stays put as the window resizes */
.search{flex:1 1 auto;max-width:none;min-width:7rem}
.bar .shufwrap{margin-left:auto}

.chip.resetall{margin-left:auto;color:var(--dim)}
.chip.resetall:hover{color:var(--bright);border-color:var(--accent-dim)}
@media (max-width:760px){.chip.resetall{margin-left:0}}

/* Hang the label out to the left so every chip — including the ones that
   wrap onto a second line — starts in the same column. Previously a wrapped
   row ran back under its own label. */
.viewpanel .grp{position:relative;padding-left:6.1rem}
.viewpanel .glabel{position:absolute;left:.72rem;top:.5rem;min-width:0;margin:0}
.viewpanel .grp:first-child .glabel{top:.97rem}
.viewpanel .rng{margin-left:0}
@media (max-width:560px){
  .viewpanel .grp{padding-left:.72rem}
  .viewpanel .glabel{position:static;width:100%;margin-bottom:.15rem}
  .viewpanel .grp:first-child .glabel{top:auto}
}

/* =====================================================================
   Round 9 — reset control, settings, viewed trail, search suggestions.
   ===================================================================== */

.viewbtn.resetbtn:disabled{opacity:.34;cursor:default;border-color:var(--rule-soft)}
.viewbtn.resetbtn:disabled:hover{color:var(--body);border-color:var(--rule-soft)}
.viewbtn.resetbtn:not(:disabled){color:var(--accent);border-color:var(--accent-dim)}

/* a record you have already opened, marked quietly so the wall still reads
   as artwork first */
.card.seen .sleeve::after{
  content:'';position:absolute;top:.4rem;left:.4rem;width:.4rem;height:.4rem;
  border-radius:50%;background:var(--accent);opacity:.85;
  box-shadow:0 0 0 2px rgba(0,0,0,.45);pointer-events:none;z-index:2;
}
.card.seen .meta .t{color:var(--dim)}

/* ------------------------------------------------------------- settings */
.setbox{max-width:34rem;width:100%}
.setgrid{display:flex;flex-direction:column;gap:.1rem}
.setgrid .h{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-dim);margin:1rem 0 .35rem}
.setgrid .h:first-child{margin-top:0}
.srow{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--rule-soft)}
.srow:last-child{border-bottom:0}
.srow strong{display:block;font-family:var(--disp);font-size:1.05rem;
  color:var(--bright);font-weight:700}
.srow .note{font-size:.76rem;color:var(--dim);display:block;margin-top:.1rem}
.srow .sbtns{display:flex;gap:.4rem;flex:none}
.recent{display:flex;flex-direction:column;gap:.25rem;width:100%}
.recent a{font-size:.82rem;color:var(--body)}
.recent a:hover{color:var(--accent)}
.recent .note{display:inline;margin-left:.4rem;font-size:.72rem}
@media (max-width:520px){
  .srow{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ---------------------------------------------------------- suggestions */
.sugg{
  position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:60;
  background:var(--surface);border:1px solid var(--rule);
  box-shadow:0 18px 40px rgba(0,0,0,.5);max-height:min(60vh,26rem);
  overflow-y:auto;padding:.3rem;
}
.sugg .sh{font-family:var(--mono);font-size:.57rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dim);padding:.5rem .6rem .25rem}
.sugg .si{
  display:flex;align-items:baseline;gap:.5rem;width:100%;text-align:left;
  padding:.4rem .6rem;border-radius:2px;color:var(--body);font-size:.86rem;
}
.sugg .si:hover,.sugg .si.on{background:var(--surface-2);color:var(--bright)}
.sugg .si .sl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.sugg .si .ss{flex:none;font-family:var(--mono);font-size:.66rem;color:var(--dim)}
.sugg .si .dot{flex:none;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--dim);align-self:center}

/* the plays figure and the span it covers belong on one line */
.fact .vrow{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.fact .vrow .v{font-family:var(--disp);font-weight:700;font-size:1.12rem;
  color:var(--bright);line-height:1.15;font-variant-numeric:tabular-nums}
.fact.plays .vrow .range{margin-top:0;font-size:.62rem}

/* A record the catalogue match could not place with confidence. Quiet on the
   wall, but findable in one click from the Show row. */
.card .doubt{
  position:absolute;bottom:.4rem;left:.4rem;width:1.1rem;height:1.1rem;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(12,11,10,.78);border:1px solid var(--warn);color:var(--warn);
  font-family:var(--mono);font-size:.62rem;line-height:1;z-index:2;
  pointer-events:none;
}
#uncertainChip.on{border-color:var(--warn);color:var(--warn)}

/* =====================================================================
   Round 12 — three previews, an Apple Music column, a player that fits
   a phone.
   ===================================================================== */

:root{--trkcols:2rem minmax(0,1fr) 1rem 3rem 6.6rem 3rem 1.5rem 1.5rem 1.5rem}
.trk .lfm.apple .ic{width:.86rem;height:.86rem}
.trk .pl.none,.trk .lfm.none{border:0;background:none}
.trk .pl.none::after{
  content:'';width:.3rem;height:1px;background:var(--rule-soft);display:block;
}
@media (max-width:760px){
  :root{--trkcols:1.7rem minmax(0,1fr) 1rem 2.6rem 1.5rem 1.5rem 1.5rem}
  .trk .lp,.trk .dur,
  .trkhead .th:nth-child(5),.trkhead .th:nth-child(6){display:none}
}

/* The phone player: two rows. Everything that identifies and controls the
   clip on the first, the marking buttons spread across the second, rather
   than eight controls fighting over 390px. */
@media (max-width:640px){
  :root{--player:96px}
  .player{flex-wrap:wrap;align-content:center;padding:.4rem .7rem;
    gap:.45rem;row-gap:.4rem}
  .player img{width:34px;height:34px}
  #pArtLink{order:1}
  #pToggle{order:2}
  .pinfo{order:3;flex:1 1 30%}
  .ptime{order:4;margin-left:auto}
  #pNext{order:5}
  #pClose{order:6}
  .pacts{order:7;flex:1 1 100%;gap:.3rem}
  .pacts .btn{flex:1 1 0;justify-content:center;padding:.34rem .2rem}
  .pbtn{width:1.9rem;height:1.9rem}
}

/* A tag almost nobody in this library uses. Kept, because "Acid" and
   "Afro-Beat" are rare here and real, but dimmed so "Hairy Chest" stops
   competing with Indie for attention. */
.tag.rare{opacity:.5;font-size:.6rem}
.tag.rare:hover{opacity:1}

.sec .secnote{font-family:var(--sans);font-size:.72rem;letter-spacing:0;
  text-transform:none;color:var(--dim);margin-left:.1rem}

/* The last-played and duration headers sit over their values, centred with
   them, rather than pinned to the right edge of the column. */
.trkhead .th:nth-child(5),
.trkhead .th:nth-child(6){justify-content:center}
.trk .lp,.trk .dur{text-align:center}

/* genre chips in the shuffle panel match the ones in the view settings */
.shufpanel .chip.fam{--gtone:var(--gc)}
.shufpanel .chip.fam:not(.on){color:var(--gc)}

/* Direction of the active sort, shown on the chip itself. */
.chip .dircaret{font-style:normal;font-size:.8em;margin-left:.3em;opacity:.85}