/* One route vocabulary across writing, previewing and checking versions. */
[data-writing-workspace] {
  --writing-ease: cubic-bezier(.22,.8,.24,1);
  color: var(--ny-text); font-family: var(--nylon-type-ui);
}
.writing-route-nav {
  display: flex; align-items: stretch; gap: clamp(25px,4vw,56px);
  margin: 0 0 24px; border-bottom: 1px solid var(--ny-line);
  font: 500 14px/1.5 var(--nylon-type-ui);
}
.writing-route-nav a {
  display: inline-flex; align-items: center; min-height: 46px;
  position: relative; padding: 10px 0 12px;
  color: var(--ny-muted); text-decoration: none; white-space: nowrap;
  transition: color 150ms ease;
}
.writing-route-nav [hidden] { display: none; }
.writing-route-nav .writing-route-back { gap: 7px; }
.writing-route-back>span { transition: transform 180ms var(--writing-ease,ease); }
.writing-route-pages { display: flex; align-items: stretch; gap: clamp(20px,3vw,32px); min-width: 0; }
.writing-route-nav a:is(:hover,:focus-visible,[aria-current="page"]) { color: var(--ny-text); }
.writing-route-nav a[aria-current="page"] { font-weight: 650; }
.writing-route-pages a::after {
  content: ""; position: absolute; height: 2px; bottom: -1px; left: 0; right: 0;
  background: var(--ny-link); transform: scaleX(0); transform-origin: left center;
  transition: transform 200ms var(--writing-ease,ease);
}
.writing-route-pages a[aria-current="page"]::after { transform: scaleX(1); animation: writing-route-ink 240ms var(--writing-ease,ease); }
.writing-route-nav a:focus-visible { outline: 2px solid var(--ny-focus); outline-offset: 3px; }
@keyframes writing-route-ink { from { transform: scaleX(.3); } to { transform: scaleX(1); } }
@media (hover:hover) and (pointer:fine) {
  .writing-route-back:hover>span { transform: translateX(-3px); }
  .writing-route-pages a:hover::after { transform: scaleX(1); }
}
@media (max-width:600px) {
  .writing-route-nav { gap: 24px; margin-bottom: 20px; font-size: 13px; }
  .writing-route-pages { flex: 1; justify-content: space-between; gap: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .writing-route-nav a,.writing-route-back>span,.writing-route-pages a::after { transition: none; animation: none!important; }
}
@media (forced-colors:active) {
  .writing-route-pages a[aria-current="page"] { text-decoration: underline; }
  .writing-route-pages a::after { background: LinkText; }
}