/* app shell: side rail (desktop) / bottom tab bar (mobile), account menu, pages, states */
.nav{margin:0;gap:.3rem}
.nav a{position:relative;flex-direction:column;justify-content:center;gap:.2rem;padding:.55rem .3rem;min-height:56px;border-radius:16px;font:600 var(--fs-xs)/1.1 var(--font-head);letter-spacing:.01em;text-align:center;transition:color var(--dur-2),background-color var(--dur-2)}
.nav .ic{display:grid;place-items:center;width:44px;height:28px;border-radius:99px;transition:background-color var(--dur-2),transform var(--dur-2) var(--ease-out)}
.nav a:hover{color:var(--white)}
.nav a:hover .ic{background:var(--amber-dim);transform:translateY(-1px)}
.nav a:active .ic{transform:scale(.92)}
.nav a[aria-current=page]{background:none;color:var(--amber-text)}
.nav a[aria-current=page] .ic{background:var(--amber-dim);box-shadow:inset 0 0 0 1px var(--border-amber)}
.nav a:focus-visible{outline-offset:-2px}

@media(min-width:901px){
  .nav{position:fixed;z-index:15;left:max(.75rem,var(--sal));top:calc(var(--sat) + 76px);width:72px;display:flex;flex-direction:column;padding:.4rem;border:1px solid var(--border);border-radius:var(--r-3);background:var(--bg-card)}
  body[data-authed="1"] main{padding-left:calc(96px + clamp(.9rem,2.2vw,2rem))}
  body[data-authed="1"] .banners{padding-left:max(1.25rem,calc(96px + 1.25rem))}
}
@media(max-width:900px){
  .nav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:.3rem max(.5rem,var(--sar)) calc(.3rem + var(--sab)) max(.5rem,var(--sal));background:color-mix(in srgb,var(--bg-card) 90%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--border)}
  .nav a{flex:1;min-width:0;max-width:120px}
  body[data-authed="1"] main{padding-bottom:calc(5.5rem + var(--sab))}
  body[data-authed="1"] .toast{bottom:calc(5.2rem + var(--sab))}
}
@media(max-width:430px){.nav a{padding-inline:.1rem;font-size:var(--fs-xs);letter-spacing:0}}

.btn-icon[aria-expanded=true]{border-color:var(--amber);background:var(--amber-dim)}
.btn-icon[aria-expanded=true] svg{transform:rotate(180deg)}
.btn-icon svg{transition:transform var(--dur-2) var(--ease-out)}
.who{gap:.4rem}
.menu{position:fixed;inset:auto;margin:0;top:calc(var(--sat) + 60px);right:max(1rem,var(--sar));width:min(calc(100vw - 2rem),240px);padding:.4rem;border:1px solid var(--border-amber);border-radius:var(--r-2);background:var(--bg-card);color:var(--white);box-shadow:var(--sh-2);overflow:visible;transform-origin:top right}
.menu:popover-open{display:grid;gap:.1rem;animation:menuin var(--dur-1) var(--ease-out)}
@keyframes menuin{from{opacity:0;transform:scale(.96)}}
.menu a,.menu button{display:flex;align-items:center;width:100%;min-height:44px;padding:.5rem .8rem;border-radius:10px;color:var(--white);text-decoration:none;font:500 var(--fs-sm) var(--font-body);text-align:left;transition:background-color var(--dur-1)}
.menu a:hover,.menu button:hover{background:var(--amber-dim)}
.menu #logout:hover{color:var(--bad);background:rgba(239,68,68,.1)}
.menu hr{border:0;height:1px;background:var(--border);margin:.25rem .4rem}

.page{max-width:1080px;margin:0 auto;display:grid;gap:var(--s-6)}
.ph h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.ph p{margin-top:.3rem}
.pg2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.25rem;align-items:start}
.stack{display:grid;gap:var(--s-5);align-content:start}
.pg2 .stack>div+div{margin-top:.2rem}
.card .stack{gap:1rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.9rem}
.tt{display:grid;gap:.5rem;cursor:pointer;padding:.5rem;border:1px solid var(--border-ctl);border-radius:14px;background:var(--bg-card);transition:border-color .2s,transform .2s,background .2s}
.tt:hover{transform:translateY(-2px);border-color:var(--border-amber)}
.tt:has(input:checked){border-color:var(--amber);background:var(--amber-dim)}
.tt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.tt input{position:absolute;opacity:0;pointer-events:none}
.tt .tpv{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:10px 1fr 1fr;gap:4px;height:84px;padding:6px;border-radius:9px;background:#F5F0E6;border:1px solid rgba(10,10,10,.1)}
.tt .tpv i{border-radius:4px;background:#fff}
.tt .tpv .a{grid-column:1/-1;background:#F59E0B;opacity:.85}
.tt .tpv .d{background:#FFD700;opacity:.8}
.tt.d .tpv{background:#0A0A0A;border-color:rgba(255,255,255,.12)}
.tt.d .tpv i{background:#161616}.tt.d .tpv .a{background:#F59E0B}.tt.d .tpv .d{background:#A8731A}
.tt .tn{display:flex;align-items:center;gap:.4rem;font:600 var(--fs-sm) var(--font-head);padding:0 .2rem .1rem}
.tt:has(input:checked) .tn{color:var(--amber-text)}
.who-row{display:flex;align-items:center;gap:.8rem}
.avatar.lg{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--gold));color:#000;font:700 var(--fs-lg) var(--font-head)}

.steps4{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;counter-reset:s}
.steps4 li{display:grid;gap:.35rem;align-content:start;padding:.9rem;border:1px solid var(--border);border-radius:14px;background:var(--bg-card);transition:transform .2s,border-color .2s}
.steps4 li:hover{transform:translateY(-2px);border-color:var(--border-amber)}
.faq{display:grid;gap:.5rem;margin-top:.8rem}
.qa{border:1px solid var(--border);border-radius:14px;background:var(--bg-card);animation:rise .4s both;transition:border-color .2s}
.qa[open]{border-color:var(--border-amber)}
.qa summary{display:flex;align-items:center;gap:.8rem;justify-content:space-between;min-height:48px;padding:.6rem 1rem;cursor:pointer;list-style:none;font:600 var(--fs-sm) var(--font-head)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline-offset:-2px;border-radius:14px}
.qa .chev{flex:none;width:.6rem;height:.6rem;border-right:2px solid var(--amber-text);border-bottom:2px solid var(--amber-text);transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.qa[open] .chev{transform:rotate(225deg)}
.qa p{padding:0 1rem 1rem;color:var(--muted);font-size:var(--fs-sm)}
.qa[open] p{animation:rise .3s both}
.tips{list-style:none;display:grid;gap:.5rem;margin-top:.2rem}
.tips li{padding-left:1.5rem;position:relative;font-size:var(--fs-sm)}
.tips li::before{content:"";position:absolute;left:.2rem;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--amber);}

.statepg{max-width:520px;margin:clamp(2rem,10vh,6rem) auto 0;text-align:center;display:grid;justify-items:center;gap:.8rem;padding:clamp(1.5rem,5vw,2.5rem)}
.statepg h1{font-size:clamp(1.4rem,3.5vw,1.9rem)}
.statepg .btn-row{margin-top:.6rem}

@media(max-width:900px){.pg2{grid-template-columns:minmax(0,1fr)}.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.steps4{grid-template-columns:minmax(0,1fr)}.tiles{gap:.5rem}.menu{top:calc(var(--sat) + 56px)}}

/* touch targets: >=44px on touch / narrow screens */
@media(pointer:coarse),(max-width:900px){
  .btn-sm,.crumb,.crumb-back,.brand{min-height:44px}
  .brand{padding-inline:.15rem}
  .me{min-width:44px;min-height:44px;justify-content:center}
}

.done-card.warn h2::before{content:"!";background:var(--bad);color:var(--bg);box-shadow:0 0 0 6px color-mix(in srgb,var(--bad) 18%,transparent)}
.done-card h2{flex-wrap:wrap;text-align:center;gap:.5rem}
@media(pointer:coarse),(max-width:900px){.qr .rx .btn-icon{width:44px;height:44px}}
.done-card.warn h2{color:var(--white)}

@media(max-width:560px){.btn-row>.sp{display:none}}

/* wide screens: header + rail follow the 1200px content frame */
@media(min-width:1300px){
  .top{padding-left:calc((100vw - 1200px)/2 + 1.5rem);padding-right:calc((100vw - 1200px)/2 + 1.5rem)}
  .nav{left:calc((100vw - 1200px)/2 + .75rem)}
}

/* virtual queue: fixed-pitch rows positioned by JS (js/ui/upload.js) */
.q.v{position:relative;display:block;--rh:70px;--rg:7px;contain:layout}
.q.v .qr{position:absolute;left:0;right:0;top:0;height:var(--rh);content-visibility:visible;contain:layout paint style}
.q.v .qr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:14px}
.q.v .meta{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}
@media(max-width:560px){.q.v{--rh:108px}}
.qtabs{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.75rem 0 .5rem}
.qtabs [role=tab]{min-height:44px;padding:0 .9rem;border:1px solid var(--border);border-radius:100px;background:transparent;color:var(--muted);font:500 var(--fs-sm)/1 var(--font-body);cursor:pointer;white-space:nowrap}
.qtabs [role=tab] b{font-variant-numeric:tabular-nums;margin-left:.25rem}
.qtabs [role=tab][aria-selected=true]{border-color:var(--amber);color:var(--amber-text);background:var(--amber-dim)}
.qtabs [role=tab]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.qtabs .btn{min-height:44px;margin-left:auto}
.qpanel{max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
.qempty{padding:1rem;text-align:center}
.gnote{color:var(--amber-text);font-weight:500}

/* persistent left panel (album, folder, settings) on desktop: stays beside the queue and scrolls on its own */
@media(min-width:1100px){
  .grid{grid-template-columns:minmax(320px,clamp(320px,27vw,440px)) minmax(0,1fr)}
  .col#destCol{max-height:calc(100dvh - var(--hdr,64px) - 2.4rem);overflow:auto;overscroll-behavior:contain;padding:2px 6px 2px 2px;margin:-2px -6px -2px -2px;scrollbar-gutter:stable}
}

/* keyboard help overlay */
dialog.keys{width:min(92vw,520px);max-height:86dvh;overflow:auto;display:grid;gap:.6rem}
dialog.keys h2{font-size:var(--fs-lg)}
dialog.keys h3{font:600 var(--fs-xs) var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--amber-text);margin-top:.5rem}
dialog.keys dl{display:grid;gap:.15rem}
.krow{display:flex;align-items:center;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--border)}
.krow dt{flex:none;min-width:7.5rem;display:flex;flex-wrap:wrap;gap:.3rem}
.krow dd{margin:0;color:var(--muted);font-size:var(--fs-sm)}
kbd{display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .45rem;border:1px solid var(--border-ctl);border-bottom-width:2px;border-radius:7px;background:var(--bg-card2);color:var(--white);font:600 var(--fs-xs) var(--font-mono)}
dialog.keys{overflow-x:hidden}
@media(max-width:560px){.krow{flex-direction:column;align-items:flex-start;gap:.3rem}.krow dt{min-width:0}}
/* upload parity (native LIT UP) */
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.mcard{display:grid;gap:.2rem;align-content:start;text-align:left;padding:.75rem .85rem;border-radius:14px;border:1px solid var(--border-ctl);background:var(--bg-card);color:inherit;font:inherit;cursor:pointer;min-height:64px;transition:border-color var(--t,.2s),box-shadow var(--t,.2s)}
.mcard b{font-size:var(--fs-sm);font-weight:600}.mcard .sub{font-size:var(--fs-xs);color:var(--muted);line-height:1.35}
.mcard[aria-checked=true]{border-color:var(--amber);box-shadow:0 0 0 1px var(--border-amber),var(--sh-1);background:color-mix(in srgb,var(--amber) 7%,var(--bg-card))}
.mcard[aria-checked=true] .sub{color:var(--amber-text)}
.mcard:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
details.more{margin-top:.8rem;border:1px solid var(--border);border-radius:12px;padding:0 .8rem}
details.more>summary{cursor:pointer;padding:.6rem 0;font-weight:600;font-size:var(--fs-sm);min-height:44px;display:flex;align-items:center}
.mgrid{display:grid;gap:.7rem;padding-bottom:.8rem}
.inl{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted)}
.inl select{width:auto;min-width:4.5rem;min-height:40px}
.swl{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);cursor:pointer}
.vhelp{margin:.6rem 0 0;text-align:center}
.preline{margin:.6rem 0 0;color:var(--muted);line-height:1.45}
.ulive{display:grid;gap:.25rem;margin-top:.6rem;padding:.6rem .8rem;border:1px solid var(--border);border-radius:12px;background:var(--bg-card2);font-size:var(--fs-sm)}
.ulive .hint{color:var(--muted);font-size:var(--fs-sm)}
.linkbtn{justify-self:start;background:none;border:0;padding:.2rem 0;color:var(--amber-text);font:inherit;font-size:var(--fs-sm);text-decoration:underline;cursor:pointer;min-height:32px}
.stages{display:flex;gap:.35rem;margin-top:.55rem;flex-wrap:wrap}
.stages>div{display:flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:100px;border:1px solid var(--border);font-size:var(--fs-xs);color:var(--muted)}
.stages i{width:7px;height:7px;border-radius:50%;background:var(--border-ctl)}
.stages .act{border-color:var(--amber);color:var(--amber-text)}.stages .act i{background:var(--amber)}
.stages .done{color:var(--ok)}.stages .done i{background:var(--ok)}
.struct{margin-top:.8rem;padding:.7rem .85rem;border:1px solid var(--border);border-radius:12px;background:var(--bg-card)}
.sth{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.stl{list-style:none;margin:.55rem 0 0;padding:0;display:grid;gap:.25rem;max-height:220px;overflow:auto}
.stl label{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);min-height:36px;cursor:pointer}
.stl label span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stl small{color:var(--muted);flex:none}
.sumbar{margin-top:.8rem;padding:.55rem .8rem;border-radius:12px;border:1px solid var(--border-amber);background:color-mix(in srgb,var(--amber) 6%,var(--bg-card));font-size:var(--fs-sm);line-height:1.5}
.sumbar .bad{color:var(--bad)}
.flist{margin-top:.8rem;border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);border-radius:12px;padding:0 .8rem}
.flist>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;font-size:var(--fs-sm);color:var(--bad)}
.flist ul{margin:0 0 .7rem;padding-left:1.1rem;font-size:var(--fs-sm);max-height:260px;overflow:auto}
.qr[data-s=ready] .st{color:var(--ok)}
/* upload UX round 5 */
.mcards{grid-template-columns:repeat(3,1fr);margin-top:.9rem}
.mcard{min-height:0;padding:.6rem .7rem}
.drop[hidden],.stuck[hidden]{display:none}
.drop.compact{padding:1.1rem 1rem;gap:.35rem}.drop.compact img{width:34px}.drop.compact #dropSub{display:none}
#prefs .note{margin:.5rem 0 0}
details.opts{border:0;padding:0;margin-top:.4rem}
details.opts>summary{display:inline-flex;min-height:36px;color:var(--amber-text);text-decoration:underline;font-weight:500;list-style:none}
details.opts>summary::-webkit-details-marker{display:none}
details.opts[open]>summary{margin-bottom:.3rem}
details.opts .mgrid{padding:.2rem 0 .4rem}
details.adv>summary,details.moreways>summary{list-style:none;display:inline-flex}
details.adv>summary::-webkit-details-marker,details.moreways>summary::-webkit-details-marker{display:none}
details.adv[open]>summary,details.moreways[open]>summary{margin-bottom:.4rem}
.sug,.stuck{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;padding:.55rem .8rem;border-radius:12px;border:1px solid var(--border-amber);background:color-mix(in srgb,var(--amber) 7%,var(--bg-card));font-size:var(--fs-sm)}
.stuck{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 8%,var(--bg-card))}
.sline{margin:.5rem 0 0;font-size:var(--fs-sm);color:var(--muted)}
.linkbtn.inline{display:inline;min-height:0;font-size:inherit}
.next{display:grid;justify-items:center;gap:.4rem;margin-top:1rem}
#bStart{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.attn{outline:2px solid var(--amber);outline-offset:2px;transition:outline-color .3s}
@media(max-width:560px){.mcard .sub{font-size:var(--fs-xs)}.mcard b{font-size:var(--fs-sm)}}
.navmore{border:0;background:none;color:var(--muted);cursor:pointer;position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.55rem .3rem;min-height:56px;border-radius:16px;font:600 var(--fs-xs)/1.1 var(--font-head)}
.navmore[aria-current=page]{color:var(--amber-text)}
.navmore-pop{top:auto;bottom:calc(4.6rem + var(--sab));right:max(.75rem,var(--sar))}
.nav .navmore{flex:1;min-width:0;max-width:120px}
@media(max-width:600px){#login .hero .lede,#login .hero .trust,#login .hero .feats,#login .hero .chip{display:none}#login .hero h1{font-size:var(--fs-xl)}}
.nav .navmore-pop a{flex:none;max-width:none;flex-direction:row;justify-content:flex-start;min-height:44px;padding:.5rem .8rem;font:500 var(--fs-sm) var(--font-body);text-align:left;color:var(--white);border-radius:10px}
.nav .navmore-pop a[aria-current=page]{background:var(--amber-dim);color:var(--amber-text)}

/* ---- WP1 motion + theme (single source; page files must not add their own reduced-motion blocks) ---- */
.statepg .art{filter:none}
html.theming :where(body,.card,.top,.nav,.menu,dialog,input,select,.btn,.opt,.qr,.gbar,.fc){transition:background-color var(--dur-3) var(--ease-io),border-color var(--dur-3) var(--ease-io),color var(--dur-3) var(--ease-io)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* ---- WP2/3: upload quality cards (2 up), anchored ⋯ menu, hover-only row × */
#prefs .mcards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:380px){#prefs .mcards{grid-template-columns:minmax(0,1fr)}}
.qr .rx button{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--muted);font:400 var(--fs-lg)/1 var(--font-body);cursor:pointer;opacity:0;transition:opacity var(--dur-2,.2s),color var(--dur-2,.2s),border-color var(--dur-2,.2s)}
.qr:hover .rx button,.qr:focus-within .rx button,.qr .rx button:focus-visible{opacity:1}
.qr .rx button:hover{color:var(--white);border-color:var(--border)}
@media(pointer:coarse){.qr .rx button{opacity:1;width:44px;height:44px}}
@supports (anchor-name:--a){
  [popovertarget=upMenu]{anchor-name:--upm}
  #upMenu{position-anchor:--upm;top:calc(anchor(bottom) + .3rem);right:anchor(right);left:auto;bottom:auto;width:max-content;min-width:200px}
}