/* Site version menu (js/core/version-menu.js): one icon beside the theme toggle, opening a small
   menu. Tokens fall back to Zenith values so the v1 archive, which has no v2 tokens, can use it. */
/* Unlayered on purpose: v1 has unlayered page styles that would beat any @layer rule. Every selector is .vm-scoped. */

.version-menu {
  --vm-bg: var(--chrome-bg, rgb(30 28 25 / 0.78));
  --vm-text: var(--chrome-text, #ece6de);
  --vm-muted: var(--text-3, #b3aa9f);
  --vm-line: var(--line, rgb(236 230 222 / 0.14));
  --vm-hover: var(--surface-2, #2a2724);
  --vm-accent: var(--accent, #c8a064);
  --vm-radius: var(--radius-md, 10px);
  --vm-ease: var(--ease-enter, cubic-bezier(0.16, 1, 0.3, 1));
  --vm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vm-motion: var(--u-motion, 1);
  /* Theme toggle: 3 × 32px + 2px padding + 2px border = 100px wide, 16px from the edge, 8px gap. */
  position: fixed; z-index: 21; top: var(--edge, 16px); right: calc(var(--edge, 16px) + 100px + 8px);
  font-size: 12px; font-weight: 500; line-height: 1.3;
}

.vm-button, .vm-menu {
  background: var(--vm-bg); color: var(--vm-text); border: 1px solid var(--vm-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.28);
}

.vm-button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  border-radius: var(--vm-radius); color: var(--vm-muted);
  transition: color 160ms, background-color 600ms, border-color 600ms, transform calc(240ms * var(--vm-motion)) var(--vm-spring);
}
.vm-button:hover, .version-menu.is-open .vm-button { color: var(--vm-text); }
.vm-button:active { transform: scale(0.92); }
.vm-button:focus-visible { outline: 2px solid var(--vm-accent); outline-offset: 2px; }

.vm-button svg * { transform-box: fill-box; transform-origin: center; }
.vm-back, .vm-front, .vm-spark {
  transition: transform calc(420ms * var(--vm-motion)) var(--vm-spring), opacity calc(300ms * var(--vm-motion)) var(--vm-ease);
}
.vm-spark { color: var(--vm-accent); }
.vm-button:hover .vm-back, .version-menu.is-open .vm-back { transform: translate(-1.5px, 0.5px) rotate(-12deg); opacity: 0.8; }
.vm-button:hover .vm-front, .version-menu.is-open .vm-front { transform: translate(1px, -0.5px) rotate(5deg); }
.vm-button:hover .vm-spark { transform: scale(1.25) rotate(45deg); }
.version-menu.is-open .vm-spark { transform: scale(1.15) rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .vm-button:hover .vm-spark { animation: vm-twinkle calc(1400ms * var(--vm-motion)) ease-in-out infinite; }
}
@keyframes vm-twinkle { 50% { opacity: 0.55; } }

.vm-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 248px; padding: 4px;
  border-radius: var(--radius-lg, 16px);
  opacity: 0; transform: translateY(-6px) scale(0.96); transform-origin: top right;
  visibility: hidden; pointer-events: none;
  transition:
    opacity calc(180ms * var(--vm-motion)) var(--vm-ease),
    transform calc(180ms * var(--vm-motion)) var(--vm-ease),
    visibility 0s linear calc(180ms * var(--vm-motion));
}
.version-menu.is-open .vm-menu {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition:
    opacity calc(220ms * var(--vm-motion)) var(--vm-ease),
    transform calc(320ms * var(--vm-motion)) var(--vm-spring),
    visibility 0s;
}
.vm-head {
  margin: 0; padding: 8px 8px 4px; color: var(--vm-muted);
  font: 500 10px/1 var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace); letter-spacing: 0.08em; text-transform: uppercase;
}
.vm-menu a {
  display: grid; grid-template-columns: 28px 1fr 16px; align-items: center; gap: 8px;
  padding: 8px; border-radius: calc(var(--radius-lg, 16px) - 6px);
  color: var(--vm-text); text-decoration: none; outline: none;
  opacity: 0; transform: translateY(-4px);
  transition: background-color 160ms, opacity calc(220ms * var(--vm-motion)) var(--vm-ease), transform calc(260ms * var(--vm-motion)) var(--vm-ease);
}
.version-menu.is-open .vm-menu a { opacity: 1; transform: none; }
.version-menu.is-open .vm-menu a:nth-of-type(2) { transition-delay: 0s, calc(60ms * var(--vm-motion)), calc(60ms * var(--vm-motion)); }
.vm-menu a:hover, .vm-menu a:focus-visible { background: var(--vm-hover); }
.vm-menu a:focus-visible { box-shadow: inset 0 0 0 2px var(--vm-accent); }
.vm-menu b {
  display: grid; place-items: center; height: 22px; border-radius: 6px; border: 1px solid var(--vm-line);
  font: 600 11px/1 var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace); color: var(--vm-muted);
}
.vm-menu a[aria-checked='true'] b { color: var(--vm-accent); border-color: currentColor; }
.vm-model { display: grid; gap: 2px; font-weight: 500; }
.vm-model small { font-size: 11px; font-weight: 400; color: var(--vm-muted); }
.vm-check { color: var(--vm-accent); opacity: 0; }
.vm-menu a[aria-checked='true'] .vm-check { opacity: 1; }

@media (max-width: 640px) { .version-menu { top: 12px; right: calc(12px + 100px + 8px); } }