/* dock27 LITE v3 (Oct 26 2026) — "grey glass", no blur anywhere, cheap on old iPhones (A11 / iOS 16, 60 Hz).
   Active only when <html> has class zlite (touch devices, or ?d27=lite).
   No backdrop-filter, no SVG filter, no clip-path, no mask. Moving layers (pill, lens) move by transform only, fade by opacity only.
   v3 fix: the pill's inline transition got stuck at "none" (double snap at load) so every tap teleported; the snap is now a class. */
html.zlite .d27{transition:none;will-change:auto}
/* the bar: plain semi-transparent grey + 1px light rim + soft shadow (looks like glass, no blur) */
html.zlite .d27-bg{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 48%,rgba(255,255,255,.03)),linear-gradient(rgba(120,120,128,.30),rgba(120,120,128,.30)),rgba(30,30,34,.62)!important;
border:1px solid rgba(255,255,255,.16);box-sizing:border-box;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 26px rgba(0,0,0,.38),0 1px 3px rgba(0,0,0,.25)!important}
html.zlite .d27-bg::after{content:none!important}
html.zlite .d27-bg::before{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0));opacity:1}
/* the selection pill: lighter grey glass; slides by transform (300 ms ease-out) */
html.zlite .d27-pill{left:0;top:0;background:rgba(255,255,255,.15)!important;border:1px solid rgba(255,255,255,.20);box-sizing:border-box;
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 8px rgba(0,0,0,.22)!important;
transition:transform .3s cubic-bezier(.22,.8,.3,1),opacity .14s ease;will-change:transform,opacity}
html.zlite .d27-pill.snap{transition:none!important}
html.zlite .d27.lensing .d27-pill{opacity:0}
html.zlite .d27-pill>.d27-fl{transition:none;background:rgba(255,255,255,.22)!important}
/* the lens (finger): a slightly bigger, lighter grey-glass pill. Outer layer moves (translate3d), inner layer scales + fades */
html.zlite .d27-lens{position:absolute;left:0;top:0;z-index:3;opacity:1!important;overflow:visible;isolation:auto;
background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
transform:translate3d(0,0,0);will-change:transform;pointer-events:none;transition:none}
html.zlite .d27-lens.glide{transition:transform .3s cubic-bezier(.22,.8,.3,1)}
html.zlite .d27-lens.follow{transition:transform .09s linear}
html.zlite .d27-lens::before,html.zlite .d27-lens::after{content:none}
html.zlite .d27-lg{position:absolute;inset:0;border-radius:999px;opacity:0;transform:scale(.86);will-change:transform,opacity;
transition:opacity .14s ease,transform .22s cubic-bezier(.22,.8,.3,1);
background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.14) 55%,rgba(255,255,255,.18));
border:1px solid rgba(255,255,255,.38);box-sizing:border-box;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.22)}
html.zlite .d27-lg::before{content:"";position:absolute;left:14%;right:14%;top:6%;height:30%;border-radius:999px;
background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
html.zlite .d27-lens.up .d27-lg{opacity:1;transform:scale(1)}
html.zlite .d27-lens.up.release .d27-lg{opacity:0;transform:scale(.92);transition:opacity .16s ease,transform .2s ease}
html.zlite .d27-lin{display:none!important}
html.zlite .d27 :is(button,a){transition:color .2s ease}
html.zlite .d27 :is(button,a).hover{color:var(--d27-ink)}
@media (prefers-color-scheme:light){html.zlite .d27:not([data-theme=dark]) .d27-bg{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.2)),rgba(200,200,206,.55)!important;border-color:rgba(255,255,255,.6)}}
html.zlite .d27[data-theme=light] .d27-bg{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.2)),rgba(200,200,206,.55)!important;border-color:rgba(255,255,255,.6)}
/* bottom fade strip: plain gradient, no backdrop-filter */
html.zlite #zpb>i:nth-child(1){display:none}
html.zlite #zpb>i:nth-child(2){background:linear-gradient(to bottom,rgba(3,8,6,0),rgba(3,8,6,.38) 40%,rgba(3,8,6,.80) 85%,rgba(3,8,6,.88))}
/* the full-screen background glows: keep their colours, stop the endless animation + the 30px blur filter (they sat under the dock) */
html.zlite body::before{animation:none!important;opacity:.8;will-change:auto}
html.zlite body::after{animation:none!important;filter:none!important;will-change:auto}
@media (prefers-reduced-motion:reduce){html.zlite .d27-pill,html.zlite .d27-lens.glide,html.zlite .d27-lens.follow,html.zlite .d27-lg{transition:none!important}}