/* =========================================================
   Overview / Technical view switch (shared by both pages).
   Relies on each page defining --ink, --bg, --line, --muted.
   The highlighted pill slides between pages via a
   cross-document view transition (Chrome, Edge, Safari 18.2+);
   other browsers simply navigate.
   ========================================================= */

@view-transition { navigation: auto; }

.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  view-transition-name: view-switch;
}
.view-switch__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 550;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease;
}
.view-switch__opt:hover { color: var(--ink); }
.view-switch__opt[aria-current="page"],
.view-switch__opt.is-on {
  background: var(--ink);
  color: var(--bg);
}
.view-switch__opt[aria-current="page"] { view-transition-name: view-pill; }
.view-switch.is-leaving .view-switch__opt[aria-current="page"]:not(.is-on) { background: transparent; color: var(--muted); }
.view-switch__glyph {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.02em;
  opacity: .75;
}
@media (max-width: 380px) {
  .view-switch__opt { padding: 0 10px; font-size: 12.5px; }
  .view-switch__glyph { display: none; }
}

/* page crossfade between the two views */
::view-transition-old(root) { animation: vt-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .44s cubic-bezier(.2, .7, .1, 1) both; }
::view-transition-group(view-pill),
::view-transition-group(view-switch) { animation-duration: .45s; animation-timing-function: cubic-bezier(.3, .8, .2, 1); }
::view-transition-old(view-pill), ::view-transition-new(view-pill) { height: 100%; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print { .view-switch { display: none !important; } }