/* A future migrated page opts in with class="ui-v2" on its body. */
.ui-v2,
.ui-v2::before,
.ui-v2::after,
.ui-v2 *,
.ui-v2 *::before,
.ui-v2 *::after {
  box-sizing: border-box;
}

body.ui-v2 {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
}

.ui-v2 :where(button, input, select, textarea) {
  font: inherit;
}

/* Keep an accessible label available without adding visual space. */
.ui-v2 .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Same-site page changes cross-fade instead of flashing white. The header and rail keep their own
   names, so they stay put while only the page content changes. Browsers without cross-document
   view transitions navigate as before. */
@view-transition {
  navigation: auto;
}

.ui-v2 .ui-v2-header {
  view-transition-name: app-header;
}

.ui-v2 .ui-v2-sidebar {
  view-transition-name: app-rail;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-group(app-header),
::view-transition-group(app-rail) {
  animation-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}