/* ==========================================================================
   WORLD DAILY · floating tab bar, modelled on the iOS 26 tab bar
   Resting: translucent capsule, monochrome icons, a quiet pill behind the selected tab.
   Touching: a clear glass lens rises out of the bar (taller and wider than it), magnifies
   the icons beneath it, bends light at its rim and stretches with the finger's speed.
   Skins come from --tb-* tokens so every style can re-dress the same physics.
   ========================================================================== */
:root{
  --tb-bg:rgba(250,250,252,.76);--tb-ink:#1C1C1E;--tb-on:var(--accent);--tb-pill:rgba(120,120,128,.15);
  --tb-filter:blur(18px) saturate(190%);--tb-radius:999px;
  --tb-shadow:inset 0 0 0 .5px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(0,0,0,.06),0 10px 30px -8px rgba(0,0,0,.24);
  --lens-fill:radial-gradient(130% 90% at 50% 0%,rgba(255,255,255,.42),rgba(255,255,255,.08) 62%),rgba(255,255,255,.06);
  --lens-shadow:inset 0 1.5px 1px rgba(255,255,255,.95),inset 0 -1.5px 1.5px rgba(255,255,255,.45),inset 0 0 14px rgba(255,255,255,.22),0 10px 26px -8px rgba(0,0,0,.3);
  --lens-rim:conic-gradient(from 200deg,rgba(255,60,120,.75),rgba(255,190,60,.6),rgba(80,255,190,.65),rgba(60,150,255,.75),rgba(190,90,255,.65),rgba(255,60,120,.75));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --tb-bg:rgba(30,30,32,.58);--tb-ink:#F2F2F7;--tb-pill:rgba(255,255,255,.13);
  --tb-shadow:inset 0 0 0 .5px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.16),0 12px 32px -8px rgba(0,0,0,.7);
  --lens-fill:radial-gradient(130% 90% at 50% 0%,rgba(255,255,255,.2),rgba(255,255,255,.03) 62%),rgba(255,255,255,.03);
  --lens-shadow:inset 0 1.5px 1px rgba(255,255,255,.6),inset 0 -1.5px 1.5px rgba(255,255,255,.25),inset 0 0 14px rgba(255,255,255,.1),0 12px 28px -8px rgba(0,0,0,.6)}}
:root[data-theme="dark"]{
  --tb-bg:rgba(30,30,32,.58);--tb-ink:#F2F2F7;--tb-pill:rgba(255,255,255,.13);
  --tb-shadow:inset 0 0 0 .5px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.16),0 12px 32px -8px rgba(0,0,0,.7);
  --lens-fill:radial-gradient(130% 90% at 50% 0%,rgba(255,255,255,.2),rgba(255,255,255,.03) 62%),rgba(255,255,255,.03);
  --lens-shadow:inset 0 1.5px 1px rgba(255,255,255,.6),inset 0 -1.5px 1.5px rgba(255,255,255,.25),inset 0 0 14px rgba(255,255,255,.1),0 12px 28px -8px rgba(0,0,0,.6)}

.tabbar-wrap{position:fixed;z-index:50;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;width:min(520px,calc(100vw - 28px));pointer-events:none}
.tabbar,.tab-mode{pointer-events:auto;background:var(--tb-bg);-webkit-backdrop-filter:var(--tb-filter);backdrop-filter:var(--tb-filter);box-shadow:var(--tb-shadow);
  transition:background .4s,box-shadow .4s,border-radius .4s}
.tabbar{flex:1;min-width:0;border-radius:var(--tb-radius);padding:4px}
.tb-track{position:relative;display:flex;height:54px;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.tb-item,.tb-ghost{all:unset;box-sizing:border-box;position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--tb-ink);font:600 10.5px/1 var(--ui);letter-spacing:.02em;transition:color .35s}
.tb-item{z-index:1}
.tb-item svg,.tb-ghost svg{width:25px;height:25px;flex:none}
.tb-item[data-on],.tb-ghost[data-on]{color:var(--tb-on)}
.tb-item:focus-visible{outline:2px solid var(--tb-on);outline-offset:-2px;border-radius:var(--tb-radius)}
.tb-pill{position:absolute;z-index:0;left:0;top:0;height:100%;border-radius:var(--tb-radius);background:var(--tb-pill);pointer-events:none;will-change:transform}
/* the lens */
.tb-lens{position:absolute;z-index:2;left:0;top:0;border-radius:var(--tb-radius);overflow:hidden;pointer-events:none;opacity:0;transform-origin:50% 50%;will-change:transform,width;
  background:var(--lens-fill);box-shadow:var(--lens-shadow);
  -webkit-backdrop-filter:blur(.6px) saturate(170%) brightness(1.06);backdrop-filter:blur(.6px) saturate(170%) brightness(1.06)}
.tb-mag{position:absolute;left:0;top:0;display:flex;will-change:transform;
  filter:drop-shadow(1.2px 0 0 rgba(255,40,90,.4)) drop-shadow(-1.2px 0 0 rgba(0,190,255,.4))}
.tb-ghost{height:100%}
.tb-rim{position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:var(--lens-rim);opacity:.85;filter:blur(.4px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tb-rim::after{content:"";position:absolute;left:14%;right:14%;top:1px;height:38%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
/* while pressed, the real icons fade a little so the lens reads as the focus */
.tb-track.pressing .tb-item{color:color-mix(in srgb,var(--tb-ink) 72%,transparent)}
.tb-track.pressing .tb-item[data-on]{color:color-mix(in srgb,var(--tb-on) 72%,transparent)}

/* day / night: separate round glass button, grows under the finger like iOS */
.tab-mode{all:unset;box-sizing:border-box;pointer-events:auto;flex:none;cursor:pointer;width:62px;height:62px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--tb-ink);font:600 9.5px/1 var(--ui);background:var(--tb-bg);-webkit-backdrop-filter:var(--tb-filter);backdrop-filter:var(--tb-filter);box-shadow:var(--tb-shadow);
  transition:transform .5s cubic-bezier(.3,1.35,.5,1),box-shadow .4s,background .4s;-webkit-tap-highlight-color:transparent}
.tab-mode svg{width:24px;height:24px}
.tab-mode.hold{transform:scale(1.16);box-shadow:var(--lens-shadow);transition:transform .35s cubic-bezier(.3,1.35,.5,1)}
.tab-mode.pop svg{animation:modeSpin .7s cubic-bezier(.3,1.35,.5,1)}
@keyframes modeSpin{0%{transform:rotate(-60deg) scale(.7);opacity:.3}100%{transform:none;opacity:1}}
.tab-mode:focus-visible{outline:2px solid var(--tb-on);outline-offset:3px}
@media(max-width:420px){.tb-track{height:52px}.tab-mode{width:60px;height:60px}.tb-item svg,.tb-ghost svg{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.tb-lens{display:none}.tb-pill{transition:transform .2s}}
@media print{.tabbar-wrap{display:none}}