/* Keep the header steady while another document's content is loaded. */
html.route-positioning { scroll-behavior: auto !important; }
.route-loading { cursor: progress; }
.header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.route-loading .header::after { opacity: 1; animation: route-progress 1.4s ease-in-out infinite; }
.route-enter { animation: route-enter 160ms ease-out; }
#main:focus, #main [tabindex="-1"]:focus { outline: none; }
.navigation-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes route-enter { from { opacity: .82; } to { opacity: 1; } }
@keyframes route-progress { from { transform: scaleX(.12); } to { transform: scaleX(.95); } }
@media (prefers-reduced-motion: reduce) {
  .route-enter, .route-loading .header::after { animation: none; }
  .route-loading .header::after { transform: scaleX(.65); }
}