@media(max-width:760px){
#top.show{display:block}
body{display:flex;flex-direction:column;padding-bottom:calc(68px + 24px + var(--nav-b))}
.wrap,main{display:contents}
#lhead{order:1;margin:max(24px,calc(env(safe-area-inset-top) + 36px)) 24px 12px;align-items:baseline}
#lhead h1{font-size:32px}#count{font-size:24px}
#lhead{padding-right:0}
#addb{flex:none;width:38px;height:38px;padding:0;font-size:0;margin-left:auto;margin-right:-2px}#addb::before{content:"+";font-size:20px;line-height:1}  /* right edge over the search button: 24px title margin - 2px = 16px header + 6px form padding */
#lsort{order:3;top:calc(env(safe-area-inset-top) + 8px);z-index:3;margin:-6px 10px 6px;padding:6px 6px 6px 14px}#lsort .srt{flex:1;min-width:0}#lsort select{flex:1;min-width:0}
#lsort.stuck #lsq{display:flex}#lsort.stuck label{display:none}#lsort.stuck{padding-left:6px}
/* the sort direction button sits under the search button and the + (same centre line): full row, 8px inside on the right */
#lsort:not(.stuck){align-self:stretch;padding-right:11px}
#dir{width:38px;height:38px;border-radius:19px}#lsort select{height:38px;border-radius:19px}
/* while the search field has the focus (0.8.2.2): search and sort scroll along (sticky). With the keyboard open iOS pans the visible
   area along with every scroll (visualViewport.offsetTop follows scrollY), so anything corrected by script lags behind. Therefore the
   body becomes the scroll area (fixed, as high as the part above the keyboard): the window no longer scrolls, iOS does not pan,
   and sticky is native. The tab bar shrinks to icons; --kb is the keyboard height, --vvh the visible height */
html.searching header.glass{position:sticky;top:calc(env(safe-area-inset-top) + 8px);z-index:4;margin:0 10px;padding:6px;border-radius:30px;background:var(--menu-bg);animation:searchIn var(--t24) cubic-bezier(.2,.8,.2,1)}
@keyframes searchIn{from{opacity:0;transform:translateY(14px) scale(.94)}}
#lsort{transition:top var(--t24) cubic-bezier(.2,.8,.2,1)}
html.searching #lsort{top:calc(env(safe-area-inset-top) + 62px);background:var(--menu-bg);border-color:var(--glass-line);box-shadow:var(--menu-shadow)}
/* the page itself stops scrolling and the body becomes the scroll area, as high as the part above the keyboard */
html.searching{overflow:hidden}  /* otherwise the body's overflow would be passed on to the viewport */
html.searching body{position:fixed;left:0;top:0;width:100%;height:var(--vvh,100dvh);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
nav#tabs{transition:left var(--t22) ease,right var(--t22) ease,height var(--t22) ease,bottom var(--t22) ease,border-radius var(--t22) ease}
@media(prefers-reduced-motion:reduce){html.searching header.glass{animation:none}#lsort,nav#tabs,.tb,.tb svg,.tb>span,#top{transition:none}}
html.searching #lsort.stuck #lsq{display:none}html.searching #lsort.stuck label{display:inline}html.searching #lsort.stuck{padding-left:14px}
html.searching nav#tabs{left:50px;right:50px;bottom:calc(var(--kb,0px) + 8px);height:34px;padding:3px;border-radius:17px}
html.searching .tb>span:not(.badge){display:none}
html.searching .tb svg{width:18px;height:18px}
html.searching .tb{border-radius:14px;gap:0}
/* scrolling down (0.8.4.1): the same compact bar as while searching, animated; scrolling up or reaching the top brings the labels back */
.tb>span:not(.badge){max-height:16px;transition:opacity var(--t18) ease,max-height var(--t22) ease}
.tb svg{transition:width var(--t22) ease,height var(--t22) ease}
.tb{transition:gap var(--t22) ease,border-radius var(--t22) ease}
html.minbar:not(.searching) nav#tabs{left:50px;right:50px;bottom:calc(var(--nav-b) + 2px);height:34px;padding:3px;border-radius:17px}
html.minbar:not(.searching) .tb>span:not(.badge){max-height:0;opacity:0;overflow:hidden}
html.minbar:not(.searching) .tb svg{width:18px;height:18px}
html.minbar:not(.searching) .tb{border-radius:14px;gap:0}
html.minbar #top{bottom:calc(34px + 12px + var(--nav-b))}
#top{transition:bottom var(--t22) ease,opacity var(--t20) ease}
header.glass{order:2;position:static;height:auto;margin:0 16px 12px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.brand,#ver,#gear,#statsb,#catb{display:none}
#sform{flex:1;max-width:none;height:48px;border-radius:24px;padding:0 6px 0 20px}
#go{width:38px;height:38px;border-radius:19px}
/* filters and sort become a bottom sheet */
aside{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:10;width:auto;max-height:88vh;padding:0 16px;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(var(--glass-tint),var(--glass-tint)),var(--glass-bg),var(--glass-solid);border-radius:var(--r-sheet) var(--r-sheet) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 12px;align-content:start;transform:translateY(105%);visibility:hidden;transition:transform var(--t25) ease,visibility 0s var(--t25)}
aside.open{transform:none;visibility:visible;transition:transform var(--t25) ease}
aside>*{grid-column:1/-1}aside>div:not([class]){grid-column:auto}
.f-tag{order:1}.sfoot{order:3}
.stop{display:block;position:sticky;top:0;z-index:1;margin:0 -16px;padding:0 16px;touch-action:none;background:var(--sheet-bar)}
.shandle{width:40px;height:5px;margin:8px auto 2px;border-radius:3px;background:var(--line)}
.shead{display:flex;align-items:center;justify-content:space-between;padding:2px 0 10px;border-bottom:1px solid var(--line)}
aside h2#stitle{margin:0;font:600 18px var(--sans);color:var(--ink);text-transform:none}
#reset{height:44px;padding:0 4px;border:0;background:none;color:var(--mint);font-weight:600}
.chip{flex:none}
.sfoot{display:block;position:sticky;bottom:0;margin:0 -16px;padding:12px 16px calc(12px + 68px + 8px + var(--nav-b));background:var(--sheet-bar);border-top:1px solid var(--line)}
#apply{width:100%;height:48px;border:0;border-radius:24px;background:var(--acc);color:var(--on-acc);font-weight:700}
#scrim{position:fixed;inset:0;z-index:9;background:var(--scrim)}
#scrim.show{display:block}
.fwrap{order:3;padding:0 16px}#wl{order:3;padding:0 16px}
.fwrap:has(#active:empty){display:none}
#active{margin:0 0 12px}
.grid{order:4;display:flex;flex-direction:column;gap:10px;padding:0 16px}
#msg{order:5}#more{order:6}
html.selmode nav#tabs{display:none}
#selbar{left:16px;right:16px;bottom:var(--nav-b);width:auto;transform:none;height:68px;padding:6px 6px 6px 18px;border-radius:34px}
#selbar .sbtn{height:44px;padding:0 14px;font-size:13px}
html.selmode #grid .card::after{top:50%;right:20px;margin-top:-12px}
.selb{width:38px;padding:0;justify-content:center}.selb span{display:none}
#selall .d{display:none}#selall .m{display:inline}
html.selmode #grid .card .dlw{display:none}
nav#tabs{display:flex;position:fixed;z-index:11;left:16px;right:16px;bottom:var(--nav-b);height:68px;padding:6px;gap:4px;border-radius:34px;--glass-tint:var(--tabs-tint)}
#top{bottom:calc(68px + 12px + var(--nav-b))}
.card{display:grid;grid-template-columns:var(--th,56px) minmax(0,1fr) 96px;align-items:center;gap:12px;border-radius:var(--r-row)}
.cover{padding:0;border-radius:var(--r-cover-s)}.cover .pt,.cover .pa{display:none}
.slot{display:contents}.slot>.cover{width:100%}  /* the phone shows rows: the cover is the grid cell itself, as before */
.info{min-width:0}.t,.a,.s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.t{margin:0}
.dlw{margin:0}.dl{height:44px}.dlw .dl:first-child{font-size:14px}.dl .d{display:none}.dl .m{display:inline}
.only-m{display:block}
/* iOS standalone does not paint ::backdrop under the status bar, so the full-screen dialog paints the backdrop itself */
#dlg[data-kind=book]{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;background:var(--book-backdrop);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the backdrop stays put; only the content slides in */
dialog#dlg[data-kind=book][open]{animation:none}
#dlg[data-kind=book][open] #dbody{animation:sheetup var(--t28) ease-out}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
#dlg[data-kind=book]::backdrop{background:var(--book-backdrop)}
#dlg[data-kind=book] .dhead{position:sticky;top:0;z-index:3;height:0;padding:0;background:none;overflow:visible}
#dlg[data-kind=book] .back{position:absolute;left:16px;top:max(16px,env(safe-area-inset-top));width:44px;height:44px;padding:0;border-radius:22px;font-size:20px;line-height:1;background:var(--glass-bg),var(--sheet-bar);border:1px solid var(--glass-line);color:var(--ink);box-shadow:var(--glass-shadow)}
#dlg[data-kind=book] .back .bt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#dlg[data-kind=book] .dgrid{display:block;padding:0}
#dlg[data-kind=book] .dcov{width:180px;margin:max(48px,calc(env(safe-area-inset-top) + 32px)) auto 22px;max-width:none}
#dlg[data-kind=book] .dcov img,#dlg[data-kind=book] .ph{border-radius:12px;box-shadow:var(--cover-shadow-l)}
#dlg[data-kind=book] .dmain{min-height:calc(100dvh - 330px);padding:24px 22px 0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;border:1px solid var(--glass-line);border-bottom:0;background:linear-gradient(var(--glass-tint),var(--glass-tint)),var(--glass-bg),var(--sheet-glass);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);display:flex;flex-direction:column}
#dlg[data-kind=book] .dact{position:sticky;bottom:0;margin-top:auto;max-width:none;margin-left:-22px;margin-right:-22px;padding:24px 22px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--glass-solid) 18px)}  /* text scrolling under the bar must not show through the buttons and messages */
dialog#dlg:is([data-kind=log],[data-kind=imp]){position:fixed;left:0;right:0;top:auto;bottom:0;margin:0;width:auto;max-width:none;max-height:88vh;border-bottom:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0}
dialog#sdlg::before,dialog#dlg:is([data-kind=log],[data-kind=imp])::before{content:"";display:block;width:40px;height:5px;margin:8px auto 0;border-radius:3px;background:var(--line)}
#dlg:is([data-kind=log],[data-kind=imp]) .dpad{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
dialog#sdlg,dialog#sdlg.set{position:fixed;left:0;right:0;top:auto;bottom:0;margin:0;width:auto;max-width:none;height:88dvh;max-height:88vh;z-index:10;border-bottom:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0}
dialog#sdlg{transform:translateY(105%);transition:transform var(--t25) ease}
dialog#sdlg.in{transform:none}
#sset{display:block;overflow:hidden}
.snav,.spane{position:absolute;inset:0;transition:transform var(--t25) ease,opacity var(--t25) ease}
#sset .snav,#sset .spane{padding:8px 16px calc(68px + 24px + var(--nav-b));border:0}
.spane{transform:translateX(100%)}
#sdlg.sub .spane.cur{transform:none}
#sdlg.sub .snav{transform:translateX(-30%);opacity:0;visibility:hidden;transition:transform var(--t25) ease,opacity var(--t25) ease,visibility 0s var(--t25)}
.spane .sback{display:inline-block}.snav .ss{display:block}
.snav .prow{flex-wrap:nowrap}.snav .prow .sbtn{width:auto;height:44px}
.spane.fade{animation:none}
#more{width:calc(100% - 32px);margin:16px}
#stats{order:4;padding:max(24px,calc(env(safe-area-inset-top) + 36px)) 16px 0}
#cats{order:4;padding:max(24px,calc(env(safe-area-inset-top) + 36px)) 16px 0}
.cbar h1{font-size:32px}
html.catalogs header{display:none}
.cgrid{display:flex;flex-direction:column;gap:10px}
.rrow{grid-template-columns:minmax(0,1fr) 44px}.rrow .fld:nth-child(2){grid-column:1/2}.rrow .xbtn{grid-row:1/3;grid-column:2}
.drow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px}.drow [data-dn]{grid-column:1/3}.drow .xbtn{grid-column:3;grid-row:1}.drow [data-dp]{grid-column:1/2}.drow [data-dtest]{grid-column:2/4}
#csearch{max-width:none}
.tb{font-size:11px}
#stats h1{margin:0 8px 14px;font-size:32px}
.sgrid{grid-template-columns:minmax(0,1fr);gap:12px}
.kpis dd,.big{font-size:34px}
html.stats header{display:none}
#toast{bottom:calc(68px + 16px + var(--nav-b))}
.dpad{padding:8px 16px 20px}
}
@media(max-width:1024px){#dlg[data-kind=book][open],#dlg:is([data-kind=log],[data-kind=imp])[open]{animation:sheetup var(--t28) ease-out}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media(min-width:1025px){#dlg[data-kind=book][open],#dlg[data-kind=book][open]::backdrop,#dlg:is([data-kind=log],[data-kind=imp])[open],#dlg:is([data-kind=log],[data-kind=imp])[open]::backdrop{animation:fadein var(--t12) ease-out}}
#sdlg[open]{animation:fadein var(--t12) ease-out}
#sdlg[open]::backdrop{animation:fadein var(--t12) ease-out}
/* Touch devices: sheets close by swiping, so the Back button is only reachable by keyboard / screen reader */
@media(max-width:1024px) and (pointer:coarse){
#dlg[data-kind=book] .dhead,#dlg:is([data-kind=log],[data-kind=imp]) .dhead{clip-path:inset(50%);overflow:hidden;width:1px;height:1px;padding:0;margin:0}
#dlg[data-kind=book] .dhead:focus-within{clip-path:none;overflow:visible;width:auto;height:0}
#dlg:is([data-kind=log],[data-kind=imp]) .dhead:focus-within{clip-path:none;overflow:visible;width:auto;height:auto;padding:8px}
}
@media(max-width:760px) and (pointer:coarse){
#sdlg .dhead{clip-path:inset(50%);overflow:hidden;width:1px;height:1px;padding:0;margin:0}
#sdlg .dhead:focus-within{clip-path:none;overflow:visible;width:auto;height:auto;padding:8px}
}
@media(max-width:760px){
#dlg[data-kind=book] .dmain::before{content:"";display:block;flex:none;width:40px;height:5px;margin:-14px auto 14px;border-radius:3px;background:var(--line)}
}
@media(min-width:761px) and (max-width:1024px){
dialog#dlg[data-kind=book]::before,dialog#dlg:is([data-kind=log],[data-kind=imp])::before{content:"";display:block;width:40px;height:5px;margin:8px auto 0;border-radius:3px;background:var(--line)}
}