/* Modern browser and small-screen compatibility overrides. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-wrap: break-word;
}

a:focus-visible {
  outline: 3px solid #ffb300;
  outline-offset: 3px;
}

.nav-action {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .bar .wrap {
    gap: 12px;
  }

  .brand {
    font-size: 18px;
    letter-spacing: 0.05em;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .route-board,
  .network-map {
    min-height: 310px;
  }

  .node {
    max-width: 42%;
    font-size: 12px;
  }

  .node.cera {
    right: 8%;
  }

  .network-map .n2 {
    left: 48%;
  }

  .network-map .n3 {
    right: 5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.route-tool {
  background: #e7f4ff;
}

.route-form {
  display: flex;
  gap: 12px;
  max-width: 720px;
  margin-top: 24px;
}

.route-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.route-form input {
  min-width: 0;
  flex: 1;
  border: 1px solid #9ab8d8;
  padding: 12px 14px;
  font: inherit;
}

.route-form button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.route-status {
  min-height: 1.7em;
  margin: 16px 0 0;
  font-weight: 700;
}

.route-output {
  display: none;
  max-width: 920px;
  max-height: 420px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 18px;
  background: #071a33;
  color: #d5eaff;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}

.route-output:not(:empty) {
  display: block;
}

@media (max-width: 520px) {
  .route-form {
    flex-direction: column;
  }
}