/* ── THE STUDIO PHONE DOCK ────────────────────────────────────────────
   The same bottom nav the stores carry, as one shared machine.
   Add studio-dock.css + studio-dock.js to any aexperiences.studio page
   and the dock appears under 900px. Nothing else to wire up.
   Accelerated Experiences LLC. */

/* Oct 16 2026 (Anthony): on laptops the dock is the same pill, at the TOP of the screen, like the phone */
@media(min-width:900px){ body{padding-bottom:0} }

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;justify-content:center;pointer-events:none;padding:0 10px calc(10px + env(safe-area-inset-bottom))}
@media(min-width:900px){ .tabbar{display:flex} }

.dock{pointer-events:auto;position:relative;display:flex;width:100%;max-width:560px;justify-content:space-between;gap:2px;padding:6px;border-radius:999px;overflow:hidden;background:rgba(255,252,246,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line-2,rgba(90,5,23,.3));box-shadow:0 14px 40px rgba(36,20,23,.14)}
.dock a,.dock button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 2px;border:0;background:none;border-radius:999px;cursor:pointer;text-decoration:none;color:rgba(36,20,23,.74);font-family:var(--sans,'Manrope',system-ui,sans-serif);font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1.1;transition:background .2s,color .2s}
.dock .dk-bird{width:24px;height:24px;object-fit:contain;display:block}
.tabbar .dock .dk-bird{width:22px !important;height:22px !important}
.dock svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dock .on{background:var(--red,#c8102e);color:#f3ede2}

@media(max-width:560px){
  .tabbar{padding:0 12px calc(12px + env(safe-area-inset-bottom))}
  .dock a,.dock button{min-height:52px;padding:7px 2px;font-size:11px}
  .dock svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){ .dock a,.dock button{transition:none} }

/* Birdseye is coming (Oct 15 2026) */
.dock a.dk-soon{opacity:.45;cursor:default}

/* THE FOLDING DOCK — lifted from the Studio page (Oct 14) to every page, every width (Oct 16) */
@keyframes dkNudge{0%,100%{transform:translateX(0)}20%{transform:translateX(5px)}40%{transform:translateX(0)}60%{transform:translateX(4px)}80%{transform:translateX(0)}}
 .tabbar{justify-content:flex-start !important}
 .tabbar .dock{transition:max-width .55s cubic-bezier(.6,0,.2,1),padding .3s}
 .tabbar .dock .dk-toggle{flex:0 0 auto;width:0;padding:0 !important;overflow:hidden;opacity:0;transition:width .4s,opacity .3s}
 .tabbar .dock .dk-toggle svg{transition:transform .4s}
 .tabbar.sr-fold .dock{max-width:132px}
 .tabbar.sr-fold .dock>*:not(.on):not(.dk-toggle){flex:0 0 0;width:0;padding:0 !important;opacity:0;overflow:hidden;pointer-events:none}
 .tabbar.sr-fold .dock .on{flex:0 0 74px}
 .tabbar.sr-fold .dock .dk-toggle{width:44px;opacity:1}
 .tabbar.sr-fold .dock .dk-toggle{animation:dkNudge 2.4s ease-in-out 1.2s 2}
 .tabbar:not(.sr-fold) .dock .dk-toggle.dk-shown{width:40px;opacity:1}
 .tabbar:not(.sr-fold) .dock .dk-toggle.dk-shown svg{transform:rotate(180deg)}
 .tabbar .dock>*{transition:flex .5s cubic-bezier(.6,0,.2,1),opacity .3s,width .5s}

/* Oct 14 2026 (Anthony): the dock lives at the top right, in place of the menu button. It arrives open across the top,
   then folds to the RIGHT into a Home pill with an arrow pointing left; tap the arrow (or Home) to slide it open again. */
body{padding-bottom:0 !important}
 .nav .menu-btn{display:none !important}
 .tabbar{top:calc(env(safe-area-inset-top,0px) + (var(--nav) - 50px) / 2) !important;bottom:auto !important;left:0 !important;right:0 !important;padding:0 10px !important;justify-content:flex-end !important;z-index:75 !important}
 .tabbar .dock{max-width:min(100%,560px) !important;padding:3px !important;box-shadow:0 8px 24px rgba(0,0,0,.35)}
 .tabbar .dock a,.tabbar .dock button{min-height:42px !important;padding:3px 2px !important;font-size:9.5px !important;gap:2px !important}
 .tabbar .dock svg{width:18px !important;height:18px !important}
 .tabbar .dock .dk-toggle{order:-1}
 .tabbar.sr-fold .dock{max-width:112px !important}
 .tabbar.sr-fold .dock .on{flex:0 0 60px !important}
 .tabbar.sr-fold .dock .dk-toggle{width:40px !important}
 .tabbar.sr-fold .dock .dk-toggle svg{transform:rotate(180deg)}
 .tabbar:not(.sr-fold) .dock .dk-toggle.dk-shown svg{transform:none !important}
 .tabbar.sr-fold .dock .dk-toggle{animation:dkNudgeL 2.4s ease-in-out 1.2s 2 !important}
@keyframes dkNudgeL{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(0)}60%{transform:translateX(-4px)}80%{transform:translateX(0)}}

.tabbar{padding-right:10px !important}

/* Oct 16 2026: a page with no room of its own (the B~Log) folds to the Home pill */
.tabbar.sr-fold .dock>.dk-pin{flex:0 0 60px !important;width:auto !important;opacity:1 !important;padding:3px 2px !important;pointer-events:auto !important;overflow:visible !important}