/* dock27 v2 — iOS 26/27 Liquid Glass tab bar (drop-in for the watch app's #dock; same markup works on Zybe Apple / ZyberDrive).
   Measured against Ariful's reference video IMG_0872 (Oct 24, 884x360 @60fps):
     track height H = 112 px; resting capsule 132 x 94 px  -> height 0.84 H, width 1.40 x its height (a short round capsule);
     glass lens 187 x 129 px -> 1.42 x the capsule's width, 1.37 x its height, 1.15 H (it overflows the track ~8% top and bottom).
   Glass: Chromium (Android Chrome, desktop) gets real refraction — backdrop-filter: url(#svg) with feDisplacementMap
   (edge bending + centre magnify + RGB-split fringes). WebKit/iOS (Safari, Bluefy, every iPhone browser) can't run an SVG
   filter inside backdrop-filter, so there the lens shows a live, magnified copy of the bar bent by an ordinary CSS
   filter:url(#svg) (which WebKit does render), over a blurred backdrop. dock27.js picks the mode (nav gets .d27-svg or .d27-clone).
   Only transform + opacity animate. Light/dark follows prefers-color-scheme, or data-theme="light|dark" on the nav. */
.d27{--d27-h:62px;--d27-pad:4px;--d27-accent:#0a84ff;--d27-ink:rgba(255,255,255,.95);--d27-on:#fff;
--d27-glass:rgba(30,30,36,.30);--d27-solid:rgba(36,36,42,.94);--d27-band:rgba(40,40,48,.08);
--d27-rim-a:rgba(255,255,255,.55);--d27-rim-b:rgba(255,255,255,.12);--d27-rim-c:rgba(255,255,255,.30);
--d27-shadow:0 14px 34px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.25);
--d27-lens-tint:rgba(215,240,255,.10);--d27-lens-ring:rgba(0,0,0,.42);
position:fixed;z-index:20;left:20px;right:20px;bottom:max(10px,calc(env(safe-area-inset-bottom) - 10px));max-width:440px;margin:0 auto;
height:var(--d27-h);padding:var(--d27-pad);border-radius:999px;display:flex;box-sizing:border-box;background:none;
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent;
transform:translate3d(0,0,0);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.32,.48,1);will-change:transform}
/* the bar's glass lives on its own layer so the nav is not a backdrop root (the lens must see the page through it) */
.d27-bg{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:var(--d27-solid);box-shadow:var(--d27-shadow)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.d27-bg{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 45%,rgba(255,255,255,.05)),var(--d27-glass);
-webkit-backdrop-filter:blur(7px) saturate(190%) brightness(1.06);backdrop-filter:blur(7px) saturate(190%) brightness(1.06)}
.d27.d27-svg .d27-bg{backdrop-filter:blur(3px) url(#d27-fbar) saturate(190%) brightness(1.08)}}
/* bright liquid rim: strong top-left specular, softer bottom-right, thin all round */
.d27-bg::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.25px;pointer-events:none;
background:linear-gradient(118deg,var(--d27-rim-a),var(--d27-rim-b) 26%,rgba(255,255,255,.04) 50%,var(--d27-rim-b) 74%,var(--d27-rim-c));
-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude}
.d27-bg::before{content:"";position:absolute;left:7%;right:7%;top:1px;height:42%;border-radius:999px 999px 40% 40%/100% 100% 30% 30%;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0));opacity:.9}
.d27.mini{transform:translate3d(0,8px,0) scale(.88)}

/* resting selection: a short, round accent capsule (size + position set by dock27.js from the measured ratios) */
.d27-pill,.d27-lens{position:absolute;left:0;top:0;border-radius:999px;pointer-events:none;
transform:translate3d(0,0,0);transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.d27-pill{z-index:1;width:70px;height:50px;background:var(--d27-accent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 1px rgba(0,0,0,.14),0 2px 8px rgba(10,132,255,.30)}
/* smooth-v3 (Oct 26): flash is a child layer animated by opacity only; SVG bend only while the lens is still */
/* the bright cyan-white wash the video shows the instant the finger lands / as the lens lands again */
.d27-pill>.d27-fl{position:absolute;inset:0;border-radius:inherit;opacity:0;will-change:opacity;pointer-events:none;
background:radial-gradient(120% 120% at 50% 20%,rgba(235,250,255,.95),rgba(150,215,255,.78) 60%,rgba(110,190,255,.72))}

/* the Liquid Glass lens: clear, magnifying, bright rim, RGB fringes, thin dark outline + lift shadow (as in the video) */
.d27-lens{z-index:3;opacity:0;width:100px;height:70px;overflow:hidden;isolation:isolate;
background:radial-gradient(70% 60% at 50% 55%,var(--d27-lens-tint),rgba(255,255,255,0) 100%);
box-shadow:0 0 0 1px var(--d27-lens-ring),inset 0 0 0 1.25px rgba(255,255,255,.9),inset 0 1.5px 1.5px rgba(255,255,255,.95),
inset 0 0 9px 1px rgba(255,255,255,.38),inset 6px 3px 6px -3px rgba(255,150,80,.75),inset -6px -3px 7px -3px rgba(60,150,255,.85),
inset -4px 5px 6px -4px rgba(255,80,150,.5),0 9px 20px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.25)}
.d27.d27-svg .d27-lens{-webkit-backdrop-filter:url(#d27-flens) saturate(135%) brightness(1.1);backdrop-filter:url(#d27-flens) saturate(135%) brightness(1.1)}
.d27.d27-clone .d27-lens{-webkit-backdrop-filter:blur(1.5px) saturate(150%) brightness(1.12);backdrop-filter:blur(1.5px) saturate(150%) brightness(1.12)}
/* specular: a crisp top highlight and a soft bottom glow, sitting above the refracted picture */
.d27-lens::before,.d27-lens::after{content:"";position:absolute;border-radius:999px;pointer-events:none;z-index:2}
.d27-lens::before{left:11%;right:11%;top:4%;height:30%;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));opacity:.8}
.d27-lens::after{left:20%;right:20%;bottom:5%;height:15%;background:linear-gradient(0deg,rgba(255,255,255,.42),rgba(255,255,255,0));opacity:.65}
/* fallback picture inside the lens: magnified live copy of the bar (dock27.js positions it), bent by filter:url(#d27-fclone) */
.d27-lin{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:1;display:none}
.d27.d27-clone .d27-lin{display:block}
.d27-lin.d27-bend{-webkit-filter:url(#d27-fclone);filter:url(#d27-fclone)}
.d27-mag{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.d27-band{position:absolute;left:0;top:0;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 45%,rgba(255,255,255,.05)),var(--d27-band);
box-shadow:inset 0 0 0 1.25px var(--d27-rim-c),inset 0 1.25px 0 var(--d27-rim-a)}
.d27-row{position:absolute;display:flex}
.d27-row :is(button,a){pointer-events:none}

.d27 :is(button,a){position:relative;z-index:2;flex:1 1 0;min-width:0;height:100%;margin:0;padding:6px 2px 5px;border:0;border-radius:999px;background:none;
-webkit-appearance:none;appearance:none;cursor:pointer;color:var(--d27-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
font:600 10px/1.15 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,sans-serif;letter-spacing:.01em;
-webkit-tap-highlight-color:transparent;transition:color .18s;text-decoration:none;box-sizing:border-box}
.d27 .di,.d27 .dl{display:block;transform:translate3d(0,0,0);will-change:transform}
.d27 .di{width:28px;height:26px;font-size:21px;line-height:26px;text-align:center}   /* emoji icons (Zybe Apple) sit in the same box as SVG ones */
.d27 .di svg{display:block;width:28px;height:26px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.d27 .dl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* the label must fit the short capsule: one line, slightly tighter on narrow phones */
@media (max-width:360px){.d27 :is(button,a){font-size:9.5px;letter-spacing:0}}
/* selected: white on the accent capsule; while the lens is up the capsule is gone, so every item is the plain ink outline */
.d27 :is(button,a).on{color:var(--d27-on)}
.d27.lensing :is(button,a).on,.d27.lensing :is(button,a).hover,.d27-row :is(button,a).on{color:var(--d27-ink)}
.d27 :is(button,a).on .di svg rect,.d27 :is(button,a).on[data-tab=faces] .di svg circle{fill:currentColor}
.d27 :is(button,a).on[data-tab=me] .di svg circle:first-child{fill:currentColor}
.d27 :is(button,a).on[data-tab=me] .di svg circle+circle{fill:var(--d27-fillink,var(--d27-accent));stroke:var(--d27-fillink,var(--d27-accent))}
.d27 :is(button,a).on[data-tab=me] .di svg path{stroke:var(--d27-fillink,var(--d27-accent));stroke-width:2}
.d27.lensing :is(button,a).on .di svg *,.d27-row :is(button,a) .di svg *{fill:none!important;stroke:currentColor!important;stroke-width:1.75!important}
.d27 .badge{position:absolute;top:6px;left:58%}
.d27 :is(button,a):focus-visible{outline:3px solid var(--d27-accent);outline-offset:-3px}

/* light appearance (variables only) */
@media (prefers-color-scheme:light){
.d27:not([data-theme=dark]){--d27-accent:#007aff;--d27-ink:#1c1c1e;
--d27-glass:rgba(255,255,255,.34);--d27-solid:rgba(248,248,251,.95);--d27-band:rgba(255,255,255,.10);
--d27-rim-a:rgba(255,255,255,.98);--d27-rim-b:rgba(255,255,255,.35);--d27-rim-c:rgba(255,255,255,.8);
--d27-shadow:0 0 0 .5px rgba(0,0,0,.07),0 12px 30px rgba(0,0,0,.16),0 2px 5px rgba(0,0,0,.08);
--d27-lens-tint:rgba(255,255,255,.14);--d27-lens-ring:rgba(0,0,0,.16)}}
.d27[data-theme=light]{--d27-accent:#007aff;--d27-ink:#1c1c1e;
--d27-glass:rgba(255,255,255,.34);--d27-solid:rgba(248,248,251,.95);--d27-band:rgba(255,255,255,.10);
--d27-rim-a:rgba(255,255,255,.98);--d27-rim-b:rgba(255,255,255,.35);--d27-rim-c:rgba(255,255,255,.8);
--d27-shadow:0 0 0 .5px rgba(0,0,0,.07),0 12px 30px rgba(0,0,0,.16),0 2px 5px rgba(0,0,0,.08);
--d27-lens-tint:rgba(255,255,255,.14);--d27-lens-ring:rgba(0,0,0,.16)}

/* optional rest style "tint" (stock iOS tab bar: grey glass capsule + accent icon) — add class d27-tint on the nav */
.d27.d27-tint .d27-pill{background:rgba(255,255,255,.16);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
.d27.d27-tint :is(button,a).on{color:var(--d27-accent);--d27-fillink:#fff}
@media (prefers-reduced-motion:reduce){.d27,.d27 :is(button,a){transition:none}.d27.mini{transform:none}}