/* Mobile bottom dock for the v3 marketing pages.
 *
 * D1. site.js injects the .mk-dock navigation into every marketing page, and
 * its styles live in styles/mkt.css. The 80 v3 pages do not load mkt.css, so
 * the dock was rendering unstyled: position:static, at the very bottom of the
 * document. At 375px on /pricing it sat at top: 9939px on a 9971px page, which
 * meant those pages had no usable navigation on a phone at all, because the
 * header nav[data-sm-hide] is display:none below 880px.
 *
 * This file is the dock's own styles, self-contained, so the v3 pages get
 * trunk's existing mobile navigation working as designed. It deliberately does
 * NOT pull in mkt.css: that stylesheet carries the whole legacy marketing
 * system and would restyle pages built on v3.
 *
 * TOKENS. mkt.css defines --accent, --accent-soft, --ease and --t-fast; the v3
 * pages do not, so every use here carries a fallback. The fallbacks are the
 * design system v3 values: green is a fill at #5f8730 and an ink at #46641f,
 * because #5f8730 as text on a light surface is 4.03:1 and fails.
 *
 * SEE ALSO. js/nav-v3.js is the DESKTOP half of v3 navigation: it builds the
 * mega-menu panels behind the header's three dropdown triggers, above 900px.
 * This file is the MOBILE half. They do not overlap and neither replaces the
 * other.
 */

.mk-dock {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--bg, #fafaf9) 88%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--border, #e8e6e5);
  box-shadow: 0 -10px 40px -24px rgba(31, 36, 29, .18);
  -webkit-user-select: none; user-select: none;
  transform: translateY(0);
  transition: transform .32s var(--ease, cubic-bezier(.4, 0, .2, 1));
  will-change: transform;
}

.mk-dock.is-hidden { transform: translateY(calc(100% + 8px)); }

.mk-dock-inner {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 520px; margin-inline: auto; height: 58px;
}

.mk-dock-item {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-3, #78716c);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 0; width: 100%; height: 100%; padding: 6px 2px 7px; margin: 0;
  font: inherit; font-size: 10px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.1; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  border-radius: 0; box-shadow: none;
  transition: color var(--t-fast, .16s) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.mk-dock-ic {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 9px; color: inherit;
  transition:
    background var(--t-fast, .16s) var(--ease, cubic-bezier(.4, 0, .2, 1)),
    color var(--t-fast, .16s) var(--ease, cubic-bezier(.4, 0, .2, 1)),
    transform var(--t-fast, .16s) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.mk-dock-ic svg, .mk-dock-ic .ic, .mk-dock-ic .aria-mark { width: 22px; height: 22px; }

.mk-dock-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-dock-item:hover,
.mk-dock-item:focus-visible {
  color: var(--ink, #0c0a09); outline: none; background: transparent; border: 0;
}

.mk-dock-item:active .mk-dock-ic { transform: scale(.92); }

.mk-dock-item.on,
.mk-dock-item[aria-current="page"] { color: var(--accent-ink, #46641f); }

.mk-dock-item.on .mk-dock-ic,
.mk-dock-item[aria-current="page"] .mk-dock-ic {
  background: var(--accent-soft, #eef3e6);
  color: var(--accent-ink, #46641f);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #5f8730) 18%, transparent);
}

.mk-dock-item.on .mk-dock-lbl,
.mk-dock-item[aria-current="page"] .mk-dock-lbl { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .mk-dock { transition: none; }
  .mk-dock-ic { transition: none; }
}

@media (max-width: 940px) {
  .mk-dock { display: block; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}