.route-entry { display: grid; gap: .35rem; margin-block: 1rem; justify-items: start; }
.route-entry p { margin: 0; font-size: .87rem; }
.route-primary {
  min-height: 44px;
  padding: .64rem 1rem;
  border: 1px solid #28204f;
  border-radius: .55rem;
  background: #28204f;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.route-primary:disabled { cursor: wait; opacity: .65; }
.route-dialog {
  border: 1px solid #d9d2e7;
  border-radius: 1rem;
  padding: 0;
  width: min(96%, 39rem);
  max-width: none;
  max-height: 92vh;
  max-height: 92dvh;
  color: #211b33;
  background: #fff;
  overscroll-behavior: contain;
}
.route-dialog::backdrop { background: rgb(26 19 47 / .7); }
.route-panel { padding: clamp(1rem, 2.5vw, 1.75rem); }
.route-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.route-heading h2 { margin: 0; }
.route-heading button, .route-alternatives button {
  min-height: 44px;
  border: 1px solid #dad3e6;
  border-radius: .55rem;
  padding: .5rem .75rem;
  background: #f8f5fc;
  color: #28204f;
  font: inherit;
  cursor: pointer;
}
.route-destination { font-weight: 700; margin-block: .5rem 1rem; }
.route-form, .route-street-fields { display: grid; gap: .4rem; }
.route-form label { font-weight: 700; }
.route-form input, .route-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #b6acc7;
  border-radius: .5rem;
  padding: .5rem;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: max(1rem, 16px);
}
.route-note, .route-status, .route-map figcaption { color: #524869; font-size: .9rem; }
.route-note { margin: .25rem 0; }
.route-status { min-height: 1.4em; margin-block: .5rem; }
.route-summary { font-weight: 700; }
.route-alternatives { display: flex; flex-wrap: wrap; gap: .4rem; }
.route-alternatives button[aria-pressed="true"] { background: #28204f; color: #fff; }
.route-map { margin: .6rem 0; }
.route-map svg { display: block; width: 100%; background: #f3f1f7; border-radius: .65rem; }
.nav-map-streets, .nav-map-alternate, .nav-map-route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav-map-streets { stroke: #c3bacf; stroke-width: 1; }
.nav-map-alternate { stroke: #7d7199; stroke-width: 4; stroke-dasharray: 6 3; }
.nav-map-route { stroke: #1d52a8; stroke-width: 5.5; }
.nav-map-origin { fill: #3f286e; stroke: #fff; stroke-width: 2; }
.nav-map-destination { fill: #f5a927; stroke: #3d2815; stroke-width: 2; }
.nav-map-user { fill: #1467d7; stroke: #fff; stroke-width: 2; }
.nav-map-north { fill: #423256; font: 14px system-ui, sans-serif; }
.route-next { background: #eff4ff; padding: .6rem; border-radius: .5rem; margin-top: .6rem; }
.route-next strong, .route-next span { display: block; }
.route-next span { margin-top: .15rem; font-size: .9rem; }
.route-steps { margin-top: .7rem; }
.route-steps summary { cursor: pointer; font-weight: 700; }
.route-steps li { padding-block: .2rem; }
.route-offline { margin-block: .6rem; }
.route-offline button {
  min-height: 44px;
  padding: .45rem .7rem;
  border: 1px solid #c5b9d8;
  border-radius: .5rem;
  background: #f8f5fc;
  color: #28204f;
  font: inherit;
  cursor: pointer;
}
.nav-map-incident { fill: #ffb75c; stroke: #8f3510; stroke-width: 2; }
.route-alert { color: #6d2a10; background: #fff1da; border-radius: .5rem; padding: .45rem .65rem; }