/* albums, album detail, share sheet. Tokens come from app.css (thelit.app palette). */
.pg{display:grid;gap:1.25rem;max-width:1680px;margin:0 auto}
.pg-h{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pg-h h1,.ahero h1{font-size:clamp(1.6rem,3.2vw,2.4rem);max-width:none;letter-spacing:-.03em;line-height:1.1}
.pg-h p{margin-top:.2rem}
.ico{display:inline-flex;flex:none}
.tools{display:flex;gap:.6rem;flex-wrap:wrap}
.srch{position:relative;flex:1 1 220px;max-width:460px;display:block}
.srch .ico{position:absolute;left:.9rem;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none}
.srch input{padding-left:2.6rem;border-radius:100px}
.sortl select{width:auto;min-width:9.5rem;border-radius:100px;padding-right:2rem}

.agrid{display:grid;gap:clamp(.8rem,1.6vw,1.4rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
@media(min-width:1800px){.agrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.agrid-empty{grid-column:1/-1}
.alb{position:relative;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .25s;animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.alb:hover,.alb:focus-within{transform:translateY(-3px);border-color:var(--border-amber);box-shadow:var(--shadow)}
.cover{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-card2)}
.cover-art,.cover-art svg,.cover img{position:absolute;inset:0;width:100%;height:100%;display:block}
.cover img{object-fit:contain;animation:fade .35s both}
.cover img.cv-bg{object-fit:cover;filter:blur(22px) saturate(1.2) brightness(.6);transform:scale(1.2)}
.cover img.cv-bg:not([src]){display:none}
.alb:hover .cover img,.alb:hover .cover-art svg{scale:1.04}
.cover img,.cover-art svg{transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.alb-b{display:grid;gap:.5rem;padding:.9rem 1rem 1rem}
.alb h2{font-size:1.05rem;margin:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stretch{color:inherit;text-decoration:none}
.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.stretch:focus-visible{outline:none}
.alb:has(.stretch:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.ameta{display:flex;align-items:center;gap:.5rem .9rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.aact{display:flex;gap:.4rem;flex-wrap:wrap;position:relative;z-index:2}
.aact .btn{flex:1 1 auto}
.sk-card{pointer-events:none;box-shadow:none}.sk-card .sk.cover{border-radius:0;min-height:0}
.sk-card:hover{transform:none;box-shadow:none;border-color:var(--border)}

.crumb-back{justify-self:start;color:var(--muted);text-decoration:none;font:600 .85rem var(--font-head);padding:.4rem .1rem;min-height:36px;display:inline-flex;align-items:center}
.crumb-back:hover{color:var(--amber-text)}
.ahero{display:grid;grid-template-columns:minmax(180px,320px) minmax(0,1fr);gap:clamp(1rem,2.4vw,2rem);align-items:center;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(.9rem,2vw,1.4rem)}
.ahero .cover{border-radius:var(--radius)}
.ahero-b{display:grid;gap:.8rem;min-width:0}
.ahero h1{overflow-wrap:anywhere}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap}
.sec{display:grid;gap:.8rem;align-content:start}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;min-height:36px}
.sec-h h2{font-size:1.1rem}
.crumbs{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.crumb{padding:.25rem .6rem;border-radius:100px;min-height:32px;font-weight:500}
.crumb:hover{background:var(--amber-dim)}
.crumb[aria-current=true]{color:var(--amber-text);font-weight:700}
.ftiles{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
.ftile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.7rem;align-items:center;text-align:left;padding:.8rem .9rem;border:1px solid var(--border-ctl);border-radius:14px;background:var(--bg-card);min-height:60px;transition:border-color .2s,background .2s,transform .2s;animation:rise .35s both}
.ftile .ico{grid-row:1/3;color:var(--amber);width:28px}
.ftile b{font:600 .92rem var(--font-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.ftile:hover{border-color:var(--amber);background:var(--amber-dim);transform:translateY(-2px)}
.flist{list-style:none;display:grid;gap:.3rem;margin-top:.6rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.flist li{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);min-height:44px;min-width:0}
.flist li .ico{color:var(--amber-text)}
.flist .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.sec input[type=search]{max-width:340px;border-radius:100px}

dialog.share-dlg{width:min(94vw,760px);max-width:760px;overflow:auto}
.share-dlg .row{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.share-dlg h2{font-size:1.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-body{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) 190px;align-items:start;margin-top:.6rem}
.share-main{display:grid;gap:.7rem;min-width:0}
.share-copy{display:flex;gap:.5rem}
.share-link{font-size:.9rem;text-overflow:ellipsis}
.qr-box{width:190px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--border);padding:0}
.qr-box.sk{background-size:200% 100%}
.qr-box svg,.qr-box img{display:block;width:100%;height:100%}.qr-box img{image-rendering:pixelated}
.share-h{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-text);margin:1.2rem 0 .4rem;font-family:var(--font-body);font-weight:600}
.toggles{display:grid;gap:.35rem}
.tg{display:flex;align-items:center;gap:1rem;padding:.65rem .85rem;border:1px solid var(--border);border-radius:14px;background:var(--bg-card)}
.tg.sk{min-height:60px;border:0}
.tgt{display:grid;flex:1;min-width:0}
.tgt b{font:600 .92rem var(--font-head)}
.sw{position:relative;flex:none;width:48px;height:28px;border-radius:100px;background:var(--track);border:1px solid var(--border-ctl);transition:background .2s,border-color .2s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-ctl);transition:translate .22s cubic-bezier(.2,.8,.2,1),background .2s}
.sw[aria-checked=true]{background:var(--amber);border-color:var(--amber)}
.sw[aria-checked=true]::after{translate:20px 0;background:#fff;border-color:#fff}
.sw:disabled{opacity:.6}
.sw{position:relative}.sw::before{content:"";position:absolute;inset:-9px -4px}

@media(min-width:760px){.share-dlg .grab{display:none}dialog.share-dlg{margin:auto;border-radius:var(--radius-lg);border-bottom:1px solid var(--border-amber);padding:1.2rem 1.5rem 1.4rem;animation:rise .3s both}}
@media(max-width:760px){
  .ahero{grid-template-columns:1fr}.ahero .cover{aspect-ratio:16/9}
  .share-body{grid-template-columns:1fr}.qr-box{justify-self:center;order:-1;width:min(60vw,200px)}
  .share-copy{flex-wrap:wrap}.share-copy .share-link{flex:1 1 100%}.share-copy .btn{flex:1}
  .btn-row .btn{flex:1 1 auto}
}
@media(max-width:560px){.alb .cover{aspect-ratio:16/9}}
@media(max-width:360px){.agrid{grid-template-columns:1fr}.sortl select{min-width:0;width:100%}.sortl{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.alb,.ftile,.cover img,.cover-art svg,.sw,.sw::after{transition:none!important;animation:none!important}.alb:hover{transform:none}}

:root[data-theme=dark] .cover-art{opacity:.82}

/* UX R4: nextStep, agree box, login/signup bits */
.next{display:grid;justify-items:center;gap:.6rem;text-align:center;padding:1.2rem 1rem}
.next b{font:600 1.05rem var(--font-head);color:var(--white)}
.next-link{color:var(--amber-text);font-weight:600;text-decoration:underline;background:none;border:0;cursor:pointer;min-height:36px;padding:.2rem .4rem;font:inherit}
.agree{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--muted);margin:.2rem 0 .8rem;cursor:pointer}
label.agree input[type=checkbox]{flex:none;width:1.15rem;height:1.15rem;min-height:0;padding:0;margin:.15rem 0 0;accent-color:var(--amber)}
.agree a{color:var(--amber-text);text-decoration:underline}
.note.bad{color:var(--bad);font-weight:600}
.more{margin-top:.8rem}
.more>summary{cursor:pointer;color:var(--amber-text);font-weight:600;min-height:44px;display:flex;align-items:center}
.more[open]>summary{margin-bottom:.5rem}
.ah-acts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.ah-acts .btn{min-height:44px}
@media(max-width:560px){.ah-acts .btn-primary{flex:1 1 100%}.ah-acts .btn-ghost{flex:1 1 0}}
@media(pointer:coarse){.gx-tabs a,.am-tab{min-height:44px}.pv-b{min-height:44px}.gx-selbar .btn{min-height:44px}}
.pshare-state{margin:.2rem 0 .6rem;font-weight:600;font-size:.9rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.wm-pos{grid-template-columns:repeat(2,1fr)}
.wm-pos button{font-size:.88rem;letter-spacing:0}
.wm-unsaved{position:sticky;bottom:.6rem;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .8rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-amber);box-shadow:var(--sh-1);font-weight:600}
.wm-unsaved[hidden]{display:none}

/* album page (round 6): one column that can shrink (an implicit grid track grows to its widest nowrap child = the sideways page scroll) */
.pg{grid-template-columns:minmax(0,1fr)}
.am-tabs{max-width:100%;scrollbar-width:none}
.am-tabs::-webkit-scrollbar{display:none}
.afl{list-style:none;display:grid;gap:.4rem;margin-top:.6rem;padding:0;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.afl li{min-width:0}
.afl a{display:flex;align-items:center;gap:.7rem;min-height:56px;padding:.4rem .7rem .4rem .4rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);color:inherit;text-decoration:none;min-width:0}
.afl a:hover{border-color:var(--border-amber)}
.afl img,.afl .afl-ph{width:44px;height:44px;flex:none;border-radius:8px;object-fit:cover;background:var(--track)}
.afl .afl-t{display:grid;min-width:0;flex:1}
.afl .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.afl .afl-s{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afl-more{justify-self:center;min-height:44px}
.fnone{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.wm-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.7rem .9rem;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border)}
.wm-row h2{font-size:1.05rem;margin-right:auto}
.wm-chip{display:inline-flex;align-items:center;min-height:32px;padding:.2rem .7rem;border-radius:100px;border:1px solid var(--border);font:500 .8rem var(--font-head);color:var(--muted);max-width:100%}
.wm-chip.ok{color:var(--amber-text);border-color:var(--border-amber);background:var(--amber-dim)}
.wm-row .btn{min-height:44px}
@media(max-width:560px){.wm-row .btn-primary{flex:1 1 auto}.sec-h .btn{min-height:44px}.ftile{min-height:56px}}
@media(max-width:480px){.am-tabs .am-tab{padding:.45rem .4rem;font-size:.78rem}.am-tabs{gap:.05rem}.am-tab .am-n{margin-left:.25rem}}
@media(max-width:420px){.am-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,auto);width:100%;overflow:visible;justify-content:stretch}.am-tabs .am-tab{white-space:normal;text-align:center;line-height:1.15;justify-content:center;padding:.4rem .35rem}}