/* album page, batch-1 screens 2+3: hero "your rating" box, critic / reviewer cards, paged tracklist, more-from beside it. Loaded after styles.css; markup + logic in album-b1.js and album() in app.js. */
/* ---- hero: the paper "your rating" box (tape on top, spaced label, big number, edit + share buttons) ---- */
.alb .yours.yv2{overflow:visible;padding:24px 18px 18px}
.alb .yours.yv2>.tape{position:absolute;z-index:3}
.alb .yours.yv2 .lab{margin:0 0 12px}
.alb .yours .shr{display:inline-flex;align-items:center;gap:7px}

/* ---- scores | reviews, then the press row, then tracklist | more from them ---- */
.alb .cols,.alb .tlw{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);padding:var(--sec) 0 0;align-items:start}
.alb .press{padding:var(--sec) 0 0}
.alb .press[hidden]{display:none}
.alb .tlw:has(#morebox[hidden]){grid-template-columns:minmax(0,1fr)}
.alb #morebox .seeall{display:inline-block;margin-top:18px}
@media(max-width:860px){.alb .cols,.alb .tlw{grid-template-columns:minmax(0,1fr)}}

/* ---- critic + reviewer cards: every outlet in its own colours, a faint pattern from its branding, its own score scale ---- */
.alb .oh{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.alb .oh>b{font:900 18px Unbounded,sans-serif;letter-spacing:-.04em}
.alb .pnav{margin-left:auto;display:flex;align-items:center;gap:8px}
.alb .pnav button,.alb .tpn button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);font:700 17px Outfit,sans-serif;transition:border-color .15s,transform .1s}
.alb .pnav button:hover:not(:disabled),.alb .tpn button:hover:not(:disabled){border-color:var(--butter)}
.alb .pnav button:active:not(:disabled),.alb .tpn button:active:not(:disabled){transform:scale(.9)}
.alb .pnav button:disabled,.alb .tpn button:disabled{opacity:.3;cursor:default}
.alb .pg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;grid-auto-rows:1fr;animation:pin .3s cubic-bezier(.2,.9,.3,1.15)}
.alb .pg.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@keyframes pin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.alb .oc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-height:196px;padding:14px;background:var(--pat),var(--bg);color:var(--fg);border-radius:var(--r-md);overflow:hidden;transition:transform .2s cubic-bezier(.3,1.3,.5,1);box-shadow:inset 0 0 0 1px rgba(127,127,127,.2)}
.alb .oc{text-decoration:none}
.alb .oc:hover{transform:translateY(-4px) rotate(-.6deg)}.alb .oc.rvw:hover{transform:translateY(-4px) rotate(.6deg)}
.alb .oc:focus-visible{outline:2px solid var(--butter);outline-offset:3px}
.alb .pbar{position:absolute;left:0;right:0;top:0;height:6px}
.alb .pt{display:flex;flex-direction:column;align-items:center;gap:10px}.alb .pt b{font:800 18px/1.1 Outfit,sans-serif}
.alb .lg{width:76px;height:76px;flex:none;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);display:grid;place-items:center}
.alb .rvw .lg{border-radius:50%}
.alb .lg img,.alb .lg svg{display:block;width:100%;height:100%;object-fit:cover}
.alb .lg .lgi{font:900 28px Unbounded,sans-serif;color:#111}
.alb .lg.mul{background:#f7941d}.alb .lg.mul img{object-fit:contain;padding:6px;mix-blend-mode:multiply}
.alb .ps{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.alb .pf{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 11px Outfit,sans-serif;opacity:.8}.alb .pf .go{opacity:1;font-weight:800}
.alb .s-ring{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:3px solid #111;font:700 23px Georgia,serif}
.alb .s-big{font:900 42px/1 Unbounded,sans-serif;letter-spacing:-.05em}
.alb .s-bar{display:block;width:40px;height:5px}
.alb .s-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:#efe6cf;color:#20453a;font:900 24px/1 Unbounded,sans-serif;letter-spacing:-.05em;text-align:center}.alb .s-badge small{display:block;margin-top:3px;font:700 9px Outfit,sans-serif;letter-spacing:0}
.alb .s-frac b{font:900 42px/1 Unbounded,sans-serif;letter-spacing:-.05em}.alb .s-frac i{font:700 16px Outfit,sans-serif;font-style:normal;opacity:.75}
.alb .s-box{font:900 23px Outfit,sans-serif;border:3px solid;padding:4px 10px}
.alb .s-word{font:800 13px Outfit,sans-serif;letter-spacing:.02em;border-bottom:2px solid;line-height:1.3}
.alb .s-none{font:700 13px Outfit,sans-serif;opacity:.9;border:1.5px dashed;padding:6px 9px;border-radius:var(--r-sm)}
.alb .s-stars{display:flex;gap:2px;font-size:26px;line-height:1}.alb .s-stars i{font-style:normal}.alb .s-stars i.e{opacity:.25}
.alb .s-stars i.h{background:linear-gradient(90deg,var(--sc) 50%,rgba(127,127,127,.35) 50%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.alb .s-grade{display:grid;place-items:center;min-width:64px;height:64px;padding:0 10px;border:3px solid;border-radius:6px;font:900 34px/1 Georgia,serif}
.alb .oc.o-ice-kingdom .pt b{color:#5fcff5;font-weight:900;text-shadow:2px 2px 0 #111}.alb .oc.o-ice-kingdom .pf{color:#cfeef9}
.alb .iknum{display:inline-flex;align-items:flex-end;gap:0;height:58px}.alb .iknum img{height:100%;width:auto;display:block}.alb .iknum img+img{margin-left:-2px}.alb .iknum img.dec{height:65%}   /* the art's own proportions: the decimal is ~65% of the whole number, same bottom line */
.alb .oc.o-ice-kingdom .s-big{color:#5fcff5;text-shadow:3px 3px 0 #111}
@media(max-width:700px){.alb .oh{flex-wrap:wrap;row-gap:6px}.alb .oh>b{flex:1 0 100%}.alb .pnav .lab{white-space:nowrap}
 .alb .pg,.alb .pg.three{gap:8px}.alb .oc{min-height:176px;padding:10px;gap:8px}.alb .pt{gap:6px}.alb .pt b{font-size:12px}.alb .lg{width:56px;height:56px}
 .alb .s-big,.alb .s-frac b{font-size:26px}.alb .s-frac i{font-size:12px}.alb .s-ring{width:48px;height:48px;font-size:17px}.alb .s-badge{width:50px;height:50px;font-size:18px}.alb .s-box{font-size:15px;padding:3px 6px}
 .alb .s-none{font-size:11px;padding:4px 6px}.alb .s-stars{font-size:15px}.alb .s-grade{min-width:46px;height:46px;font-size:24px}.alb .iknum{height:40px}.alb .pf{font-size:10px}}
@media(max-width:1000px) and (min-width:701px){.alb .oc{padding:10px}.alb .lg{width:60px;height:60px}.alb .pt b{font-size:14px}.alb .s-big,.alb .s-frac b{font-size:32px}.alb .iknum{height:46px}}

/* ---- tracklist: 12 a page, your ratings as tier-coloured chips, edit = the shared grading slider ---- */
.alb .tlh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.alb .tpn{display:flex;align-items:center;gap:8px}
.alb .edb{font:700 13px Outfit,sans-serif;padding:7px 14px;min-height:36px;border-radius:var(--r-sm);border:1.5px solid var(--line);transition:border-color .15s}.alb .edb:hover{border-color:var(--butter)}.alb .edb.on{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.alb .tl .tpg{animation:pin .3s cubic-bezier(.2,.9,.3,1.15)}
.alb .tl .tr{display:grid;grid-template-columns:28px minmax(0,1fr) 48px 66px;gap:12px;align-items:center;min-height:46px;padding:6px 0;border-top:1px solid var(--line)}
.alb .tl .tr.th{min-height:0;border-top:0;padding-bottom:4px}.alb .tl .th span{font:700 11px Outfit,sans-serif;color:var(--text-muted)}
.alb .tl .tr .n{font:700 12px Outfit,sans-serif;color:var(--text-muted)}.alb .tl .tr .nm{font-size:16px;min-width:0;overflow-wrap:anywhere}
.alb .tl .tr .a{font:900 15px Unbounded,sans-serif;letter-spacing:-.03em;color:var(--butter);text-align:right;padding-right:6px}.alb .tl .tr.th .a{font:700 11px Outfit,sans-serif;color:var(--text-muted);padding-right:6px}
.alb .tl .tr.th .y{font:700 11px Outfit,sans-serif;color:var(--text-muted)}
.alb .tl .tr .y{justify-self:end;font:900 14px/1 Unbounded,sans-serif;letter-spacing:-.03em}
.alb .tl .tr .y.yc{color:var(--ink);background:var(--tc);border-radius:4px;padding:5px 7px 4px;min-width:46px;text-align:center}
.alb .tl .tr .no{color:var(--text-muted);font-weight:700}
.alb .tl .tr .ed{display:none;align-items:center;gap:10px;min-width:0}
.alb .tl .ed output{flex:none;font:900 15px Unbounded,sans-serif;color:var(--ink);background:var(--tc,var(--butter));border-radius:4px;padding:3px 7px;min-width:46px;text-align:center}
.alb .tl.editing .tr{grid-template-columns:28px minmax(110px,.7fr) minmax(0,1.8fr)}
.alb .tl.editing .tr.th{display:none}.alb .tl.editing .tr .a,.alb .tl.editing .tr .y{display:none}.alb .tl.editing .tr .ed{display:flex}
.alb .tl .jr{min-width:0}
.alb .tl .jr input:not(:disabled)::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--tc) var(--p),#252c52 var(--p));animation:none}   /* beats the generic gold track in styles.css */
.alb .tl .jr input:not(:disabled)::-moz-range-progress{background:var(--tc);animation:none}
.alb .mf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
.alb #morepg:empty{display:none}
@media(max-width:620px){.alb .mf{gap:20px 10px}
 .alb .tl .tr{grid-template-columns:22px minmax(0,1fr) 36px 60px;gap:8px}.alb .tl .tr .y.yc{font-size:13px;min-width:44px;padding:5px 5px 4px}
 .alb .tl.editing .tr{grid-template-columns:24px minmax(0,1fr) minmax(120px,1fr)}}
@media(prefers-reduced-motion:reduce){.alb .pg,.alb .tl .tpg{animation:none}.alb .oc,.alb .oc:hover{transition:none}}

/* ---- per-outlet colours + pattern (from each outlet's branding) ---- */
.alb .oc.o-pitchfork{--bg:#ffffff;--fg:#111111;--pat:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 9px)}
.alb .oc.o-paste{--bg:#121212;--fg:#ffffff;--pat:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 11px)}
.alb .oc.o-still-listening{--bg:#20453a;--fg:#efe6cf;--pat:repeating-radial-gradient(circle at 92% 8%,rgba(239,230,207,.09) 0 1.5px,transparent 1.5px 13px)}
.alb .oc.o-the-line-of-best-fit{--bg:#f4f1ea;--fg:#111111;--pat:repeating-linear-gradient(-30deg,rgba(0,163,155,.12) 0 2px,transparent 2px 22px)}
.alb .oc.o-clash{--bg:#000000;--fg:#ffffff;--pat:radial-gradient(rgba(255,255,255,.12) 1.2px,transparent 1.6px) 0 0/11px 11px}
.alb .oc.o-exclaim{--bg:#f7941d;--fg:#151515;--pat:radial-gradient(rgba(0,0,0,.1) 1.2px,transparent 1.6px) 0 0/11px 11px}
.alb .oc.o-the-independent{--bg:#ffffff;--fg:#111111;--pat:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 9px)}
.alb .oc.o-sputnikmusic{--bg:#2b3a55;--fg:#e8edf5;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 7l1.6 3.4 3.7.4-2.8 2.5.8 3.7-3.3-1.9-3.3 1.9.8-3.7-2.8-2.5 3.7-.4z' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E")}
.alb .oc.o-allmusic{--bg:#0f2747;--fg:#ffffff;--pat:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/16px 16px}
.alb .oc.o-nme{--bg:#e4002b;--fg:#ffffff;--pat:repeating-linear-gradient(100deg,rgba(255,255,255,.08) 0 2px,transparent 2px 7px,transparent 7px 30px)}
.alb .oc.o-under-the-radar{--bg:#111111;--fg:#ffffff;--pat:repeating-radial-gradient(circle at 100% 100%,rgba(31,149,214,.16) 0 1.5px,transparent 1.5px 16px)}
.alb .oc.o-consequence{--bg:#f6f3ee;--fg:#111111;--pat:radial-gradient(rgba(0,0,0,.08) .8px,transparent 1.2px) 0 0/5px 5px}
.alb .oc.o-the-a-v-club{--bg:#111111;--fg:#ffffff;--pat:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/16px 16px}
.alb .oc.o-the-needle-drop{--bg:#ffd400;--fg:#111111;--pat:repeating-radial-gradient(circle at 115% 115%,rgba(0,0,0,.12) 0 1.5px,transparent 1.5px 9px)}
.alb .oc.o-turning-the-tables{--bg:#1f6f6a;--fg:#eef4f0;--pat:repeating-radial-gradient(circle at 92% 8%,rgba(239,230,207,.09) 0 1.5px,transparent 1.5px 13px)}
.alb .oc.o-nfr-podcast{--bg:#3a2b6b;--fg:#efe9ff;--pat:repeating-linear-gradient(90deg,rgba(239,233,255,.08) 0 2px,transparent 2px 6px)}
.alb .oc.o-hthaze{--bg:#5fd3ff;--fg:#0d2340;--pat:repeating-radial-gradient(ellipse at 0 120%,rgba(13,35,64,.1) 0 2px,transparent 2px 14px)}
.alb .oc.o-ice-kingdom{--bg:#525252;--fg:#e9f7fd;--pat:linear-gradient(45deg,#4a4a4a 25%,transparent 25% 75%,#4a4a4a 75%) 0 0/34px 34px,linear-gradient(45deg,#4a4a4a 25%,transparent 25% 75%,#4a4a4a 75%) 17px 17px/34px 34px,radial-gradient(rgba(0,0,0,.18) .8px,transparent 1.2px) 0 0/6px 6px}