/* Guided route (path.js). Copper is used here because it marks the route (D16, D33). */
.pa-route .pa-ghost { fill: none; stroke: var(--copper); stroke-opacity: .22; stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; stroke-linejoin: round; }
.pa-route .pa-under, .pa-route .pa-line { fill: none; stroke-dasharray: 1; stroke-linecap: round; stroke-linejoin: round; transition-property: stroke-dashoffset; transition-timing-function: ease-in-out; }
.pa-route .pa-under { stroke: var(--ink); stroke-opacity: .7; stroke-width: 5.5; }
.pa-route .pa-line { stroke: var(--copper); stroke-width: 2.6; }
.pa-route .pa-start { fill: var(--ink); stroke: var(--copper); stroke-width: 1.6; }
.pa-route .pa-mk { opacity: 0; transition: opacity .3s; }
.pa-route .pa-mk.is-on { opacity: 1; }
.pa-route .pa-mk circle { fill: var(--ink); stroke: var(--copper); stroke-width: 1.6; }
.pa-route .pa-mk.is-cur circle { fill: var(--copper); }
.pa-route .pa-mk text { fill: var(--copper); font-size: 10px; text-anchor: middle; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; }
.pa-route .pa-mk.is-cur text { fill: var(--ink); }

.pa-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; padding-top: 14px; border-top: 1px solid #262d38; }
.pa-ui[hidden] { display: none; }
.pa-opts, .pa-nav { display: flex; align-items: center; gap: 6px; }
.pa-nav[hidden] { display: none; }
.pa-btn {
  background: none; color: var(--steam); border: 1px solid #3a4452; padding: 6px 14px;
  font: inherit; font-size: 13px; letter-spacing: .06em; cursor: pointer;
}
.pa-btn:hover:not(:disabled) { border-color: var(--copper); color: var(--copper); }
.pa-btn[aria-pressed="true"] { border-color: var(--copper); color: var(--copper); }
.pa-btn:disabled { color: var(--mist); border-color: #262d38; cursor: not-allowed; }
.pa-btn:focus-visible { outline: 2px solid var(--steam); outline-offset: 2px; }
.pa-primary { padding: 8px 18px; }
.pa-jp { font-family: "Zen Antique", serif; padding: 6px 12px; }
.pa-status { min-width: 12.5em; text-align: center; font-size: 13px; color: var(--mist); letter-spacing: .04em; }

@media (max-width: 560px) {
  .pa-status { min-width: 0; flex: 1; }
  .pa-nav { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-route .pa-under, .pa-route .pa-line, .pa-route .pa-mk { transition: none; }
}