/* ==========================================================================
   THE DOCK - one definition, every page.

   The homepage's navigation since the 2026-09-25 rebuild, and every page's
   since 2026-09-26, when it replaced the old top bar on the case studies and
   Projects. index.html, vola.html, gpay.html, marketplace.html,
   ai-website-builder.html and projects.html all link this file and
   assets/js/dock.js: a second copy of the dock is exactly how the navigation
   drifts between the homepage and a case study.

   The MARKUP is written once, in index.html; `node build-dock.js` copies it
   into the other pages. A page changes the dock only through that markup:
   `is-dark` for the dark glass on a page whose ground is dark in both themes,
   `data-spy` (homepage) or `data-current` (everywhere else) for the lit item.
   Never restyle .dock or .dk from a page's own sheet.

   It depends on nothing a page declares - its easing, face and tints are its
   own. Width (not scale) grows under the pointer so neighbours make room,
   which is what makes it read as a dock and not a row of buttons.
   ========================================================================== */
:root{
  --dock-h:78px;
  /* The dock's top edge, from the bottom of the screen (home bar included). */
  --dock-top:calc(var(--dock-h) + max(14px, env(safe-area-inset-bottom)));
  /* consent.js places its bar from this: above the dock, never on it. */
  --consent-bottom:calc(var(--dock-top) + 12px);
}

.dock{
  --dk-glass:rgba(255,255,255,.34);--dk-edge:rgba(255,255,255,.55);--dk-hi:rgba(255,255,255,.6);
  --dk-sep:rgba(0,0,0,.18);--dk-dot:rgba(0,0,0,.65);--dk-drop:rgba(0,0,0,.45);
  --dk-ease:cubic-bezier(.2,.8,.2,1);--dk-spring:cubic-bezier(.34,1.56,.64,1);
  position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;
  display:flex;align-items:flex-end;gap:7px;height:var(--dock-h);padding:9px 10px;border-radius:24px;
  background:var(--dk-glass);border:1px solid var(--dk-edge);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 0 var(--dk-hi) inset,0 18px 40px -16px var(--dk-drop);
  transition:transform .5s var(--dk-spring),opacity .3s;
}
/* THE DARK GLASS - on html.dark, and always on a page whose ground is dark in
   both themes (GPay, Marketplace: `is-dark` in their markup). The light
   glass's black rule and dot vanish on those grounds. */
html.dark .dock,.dock.is-dark{
  --dk-glass:rgba(22,22,24,.5);--dk-edge:rgba(255,255,255,.14);--dk-hi:rgba(255,255,255,.1);
  --dk-sep:rgba(255,255,255,.24);--dk-dot:rgba(255,255,255,.85);--dk-drop:rgba(0,0,0,.6);
}
/* STEPPING ASIDE - a page adds .away when something should have the whole
   screen: the homepage's quick look, a game on /play. */
.dock.away{transform:translateX(-50%) translateY(140%);opacity:0;pointer-events:none}
.dock-sep{width:1px;align-self:stretch;margin:4px 3px;background:var(--dk-sep)}
.dk{position:relative;display:block;width:calc(58px * var(--s,1));height:calc(58px * var(--s,1));transition:width .16s ease-out,height .16s ease-out;flex:none;border-radius:15px;text-decoration:none}
.dk svg{width:100%;height:100%;display:block;border-radius:inherit;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.dk .tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,4px);background:rgba(30,30,30,.86);color:#fff;font:600 12.5px/1 'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;padding:7px 10px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:.18s}
.dk:hover .tip,.dk:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
.dk:focus-visible{outline:3px solid var(--sky-deep,#2f6fb5);outline-offset:3px}
.dk::after{content:'';position:absolute;left:50%;bottom:-7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--dk-dot);opacity:0;transition:opacity .25s}
.dk[aria-current="true"]::after{opacity:1}
.dk:active svg{filter:brightness(.85)}
.dk.bounce{animation:dk-bounce .6s var(--dk-ease)}
@keyframes dk-bounce{0%,100%{translate:0 0}35%{translate:0 -16px}65%{translate:0 0}80%{translate:0 -5px}}
.dk .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* THE THEME ITEM - pages with dark mode only; theme.js binds #themeSwitch.
   It shows the state the page is IN (sun on light, moon on dark), and its
   tip names the other one. */
.dk-theme{padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.dk-theme .dk-day,.dk-theme .dk-sun,.dk-theme .dk-night,.dk-theme .dk-moon{transition:opacity .3s ease}
.dk-theme .dk-night,.dk-theme .dk-moon,html.dark .dk-theme .dk-day,html.dark .dk-theme .dk-sun{opacity:0}
html.dark .dk-theme .dk-night,html.dark .dk-theme .dk-moon{opacity:1}
.dk-theme .tip .on-dark,html.dark .dk-theme .tip .on-light{display:none}
html.dark .dk-theme .tip .on-dark{display:inline}

/* THE WORDMARK - the homepage's VEZIGN(R), at the top of every other page, in
   the page's own ink (--mark-ink, or the text colour). Inter Tight 800 comes
   from each page's Google Fonts request. It scrolls away with the page:
   nothing is pinned to the top any more. */
.site-mark{position:absolute;left:50%;top:clamp(16px,2.4vw,28px);transform:translateX(-50%);z-index:30;
  font:800 clamp(17px,1.5vw,21px)/1 'Inter Tight','Satoshi',system-ui,sans-serif;letter-spacing:-.02em;
  color:var(--mark-ink,currentColor);text-decoration:none;white-space:nowrap}
.site-mark sup{font-size:.55em;vertical-align:.7em;margin-left:1px}

/* Room at the end of a page so the dock never sits on its last line. The
   homepage's footer pays its own; every other page opts in with body.docked. */
body.docked{padding-bottom:calc(var(--dock-top) + 16px)}

@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  :root{--dock-h:62px}
  .dock{gap:5px;padding:7px 8px;border-radius:20px}
  .dk{width:44px;height:44px;border-radius:12px}
}
@media (max-width:760px){.dk.m-hide{display:none}}
@media (max-width:380px){.dock{gap:4px;padding:7px 7px}}
@media (pointer:coarse){.site-mark{padding:14px 10px;margin:-14px -10px}}
@media (prefers-reduced-motion:reduce){
  .dock,.dk,.dk .tip,.dk::after,.dk-theme *{transition:none}
  .dk.bounce{animation:none}
}
@media print{.dock{display:none}}