/* The human / agent switch at the top of the landing page and its agent
   view (templates/view_toggle.html). The two options are the same width.
   The highlight is drawn over them and ignores the pointer; inside it the
   labels are repeated in white, shifted back as far as it moves, so they
   hold still while it slides: each letter turns white as the highlight
   reaches it. */
.vt {
  position: relative; display: flex; gap: 2px; width: max-content; margin: 18px auto 0; padding: 3px;
  border-radius: 999px; background: #E9E7E0;
}
.vt .vt-opt {
  display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  width: 84px; height: 28px; margin: 0; padding: 0; flex: none;
  color: #5F5E58; font: 600 12.5px "Inter", system-ui, sans-serif; text-decoration: none;
}
.vt a.vt-opt:hover { color: #262622; }
/* Using the switch highlights nothing: no tap flash, no selected label, no
   focus ring after a click (the keyboard still gets one). */
.vt { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.vt a.vt-opt:focus:not(:focus-visible) { outline: none; }
.vt svg { flex: none; overflow: visible; }
.vt svg * { transform-box: fill-box; }
/* The icon just switched to says hello (viewtoggle.js adds vt-go to both
   its copies, so the highlight's stays aligned with the one under it): the
   person pops their head up; the robot's antenna boings and it blinks. */
.vt-go .vt-head { transform-origin: 50% 50%; animation: vt-peek 520ms cubic-bezier(.3, 1.6, .5, 1) 60ms both; }
.vt-go .vt-antenna { transform-origin: 50% 100%; animation: vt-boing 640ms ease-out 60ms both; }
.vt-go .vt-eyes { transform-origin: 50% 50%; animation: vt-blink 640ms ease-in-out 60ms both; }
@keyframes vt-peek { from { transform: translateY(5px) scale(.6); } to { transform: translateY(0) scale(1); } }
@keyframes vt-boing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-28deg); } 35% { transform: rotate(22deg); } 55% { transform: rotate(-12deg); } 75% { transform: rotate(6deg); } }
@keyframes vt-blink { 0%, 55%, 100% { transform: scaleY(1); } 65%, 72% { transform: scaleY(.1); } }
.vt-thumb {
  position: absolute; top: 3px; left: 3px; width: 84px; height: 28px; overflow: hidden;
  border-radius: 999px; background: #262622; pointer-events: none;
}
.vt-thumb-labels { display: flex; gap: 2px; }
.vt-thumb .vt-opt { color: #fff; }
.vt:has(a[data-view="agent"][aria-current="page"]) .vt-thumb { transform: translateX(86px); }
.vt:has(a[data-view="agent"][aria-current="page"]) .vt-thumb-labels { transform: translateX(-86px); }
.vt-thumb, .vt-thumb-labels { transition: transform 180ms cubic-bezier(.3, 0, .2, 1); }
/* The landing page carries both views; the hidden one stays hidden,
   whatever display its own rules give it. */
main[data-view][hidden] { display: none !important; }

/* Switching views in place (viewtoggle.js) is a view transition, as is
   leaving the agent view's own page for the landing page; a browser
   without them just switches. The page fades out, then the new one in,
   over the paper colour, so the two never show at once. The toggle is
   left out of the snapshots: its new state shows live, and its own
   transition above slides the highlight. Short, so that an agent's
   screenshot right after the click shows the new page. */
@view-transition { navigation: auto; }
.vt { view-transition-name: vt; }
::view-transition { background: #F5F4F0; }
::view-transition-old(vt) { display: none; }
::view-transition-new(vt) { animation: none; }
::view-transition-group(vt) { animation: none; }
::view-transition-group(root) { animation-duration: 180ms; }
::view-transition-old(root) { animation: 70ms ease-in both vt-fade-out; }
::view-transition-new(root) { animation: 110ms ease-out 70ms both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .vt-thumb, .vt-thumb-labels { transition: none; }
  .vt-go * { animation: none; }
}