/* Route page (route-better.html): only what the other pages do not have; the colors are the tokens of tokens.css. The look is the one of
   the speed test and of the stability test: a centered column, the primary action in the same outlined button, the numbers in the primary color. */

/* Some rules below set a display, and that would win over the hidden attribute: hidden has to keep meaning hidden */
#routeArea [hidden],
#routeSide [hidden] {
  display: none !important;
}

#routeArea {
  max-width: 40em;
  margin: 1.5em auto 0;
  padding: 0 1rem;
}

/* The action: the button is centered by the column, like the start button of the other pages */
.route-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  margin: 1.4em 0 1em;
}

.route-button {
  display: inline-block;
  box-sizing: border-box;
  width: calc(10em / 1.05);
  height: calc(3.5em / 1.05);
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 1.05em;
  line-height: calc(3.2em / 1.05);
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: 0.15em solid var(--primary);
  border-radius: var(--radius-button);
  transition: all 0.3s;
}

.route-button:hover:not(:disabled) {
  box-shadow:
    0 0 2em rgba(0, 0, 0, 0.1),
    inset 0 0 1em rgba(0, 0, 0, 0.1);
}

.route-button:disabled {
  color: var(--muted);
  cursor: default;
  border-color: var(--border);
  opacity: 0.8;
}

.route-button[aria-busy="true"] {
  cursor: progress;
}

.route-button:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0.125rem;
}

#routeStatus {
  min-height: 1.4em;
  font-size: 0.9em;
  color: var(--muted);
}

.route-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  border: 0.15em solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* The result, in the order it is read: the summary, the networks, the largest rise, then the view of the hops */
.route-results {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  text-align: left;
}

.route-summary {
  padding: 1em 1.2em;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-card);
}

.route-summary h3 {
  margin: 0 0 0.6em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--muted);
}

.route-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  margin: 0;
  text-align: center;
}

.route-stats dt {
  font-size: 0.8em;
  color: var(--muted);
}

.route-stats dd {
  margin: 0.1em 0 0;
  font-size: 1.7em;
  line-height: 1.1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

#routeEnd {
  padding-top: 0.8em;
  margin: 0.9em 0 0;
  font-size: 0.9em;
  border-top: 0.0625rem solid var(--border);
}

#routeMtu {
  margin-top: 0.8em;
}

.route-mtu-text {
  margin: 0;
  font-size: 0.9em;
  font-weight: 600;
}

.route-hint,
.route-groups-title {
  margin: 0.2em 0;
  font-size: 0.85em;
  color: var(--muted);
}

/* The networks of the route are part of its summary, under the numbers, the end and the MTU */
#routeGroups {
  padding-top: 0.8em;
  margin-top: 0.9em;
  border-top: 0.0625rem solid var(--border);
}

#routeGroups ol {
  padding-left: 1.6em;
  margin: 0.2em 0;
  font-size: 0.9em;
}

.route-table-wrap {
  margin-top: 0;
}

.route-table caption {
  padding: 0.5em 0.6em;
  text-align: left;
  color: var(--muted);
  font-size: 0.85em;
}

.route-table th[scope="row"],
.route-table td {
  vertical-align: top;
}

.route-table td {
  text-align: left;
}

/* The words of a column start at its left; the numbers end at its right */
.route-table th[scope="col"] {
  text-align: left;
}

.route-table th[scope="col"]:nth-child(3) {
  text-align: right;
}

.route-table td.route-time {
  min-width: 6em;
  text-align: right;
  white-space: nowrap;
}

.route-address {
  font-family: ui-monospace, monospace;
  word-break: break-all;
}

.route-you {
  padding: 0.05em 0.4em;
  font-family: inherit;
  font-size: 0.8em;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: var(--radius-button);
}

.route-bar {
  display: block;
  height: 0.25rem;
  margin-top: 0.2em;
  margin-left: auto;
  background: var(--primary);
  border-radius: 0.125rem;
}

.hop-none td,
.hop-none th {
  color: var(--muted);
  font-style: italic;
}

/* Hops with no answer in a row: one line, with a vertical ellipsis where the address would be */
.route-gap-mark {
  font-size: 1.6em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.hop-jump td,
.hop-jump th {
  background: var(--primary-subtle);
}

.route-country.doubt {
  color: var(--muted);
}

/* The views of the route: table or chart */
.route-views {
  display: inline-flex;
  align-self: center;
  margin: 0;
  overflow: hidden;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-button);
}

.route-views button {
  min-height: 2.5rem;
  padding: 0.3em 1em;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 0;
  cursor: pointer;
}

.route-views button[aria-pressed="true"] {
  color: var(--on-primary);
  background: var(--primary);
}

.route-views button:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: -0.1875rem;
}

.route-chart {
  margin-top: 0;
}

.route-chart h3 {
  margin: 0.6em 0 0.2em;
  font-size: 0.95em;
}

.route-chart-summary,
.route-chart-readout {
  margin: 0.2em 0;
  font-size: 0.85em;
  color: var(--muted);
}

.route-chart-readout {
  min-height: 1.4em;
  overflow-wrap: anywhere;
}

/* The chart and the map are a box with a chin attached below it: the legend of the chart, or the controls of the map */
.route-figure {
  overflow: hidden;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-card);
}

.route-chin {
  padding: 0.5em 0.75em;
  margin: 0;
  background: var(--surface-muted);
  border-top: 0.0625rem solid var(--border);
}

.route-chart-host {
  position: relative;
  overflow: hidden;
}

.route-chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 1em;
  font-size: 0.8em;
  color: var(--muted);
  list-style: none;
}

.route-key {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35em;
  vertical-align: -0.1em;
}

.route-key-time {
  background: var(--primary);
  border-radius: 50%;
}

.route-key-internal {
  background: var(--muted);
  border-radius: 50%;
}

.route-key-slow {
  box-sizing: border-box;
  background: var(--surface);
  border: 0.125rem solid var(--muted);
  border-radius: 50%;
}

.route-key-silent {
  width: auto;
  line-height: 1;
}

.route-key-jump {
  box-sizing: border-box;
  background: var(--primary-subtle);
  border: 0.0625rem solid var(--border);
}

.route-key-mtu {
  width: 0;
  height: 1em;
  border-left: 0.125rem dashed var(--muted);
}

.route-key-you {
  box-sizing: border-box;
  border: 0.125rem solid var(--text);
  border-radius: 50%;
}

/* The map: countries of the route */
.route-map {
  margin-top: 0;
}

.route-map h3 {
  margin: 0 0 0.2em;
  font-size: 0.95em;
}

.route-map-none {
  font-size: 0.85em;
  color: var(--muted);
}

.route-map-host {
  overflow: hidden;
}

.route-map-host svg {
  display: block;
  width: 100%;
}

.route-map-sea {
  fill: var(--surface);
}

.route-map-land {
  fill: var(--surface-muted);
  stroke: var(--border);
  stroke-width: 0.6px;
  vector-effect: non-scaling-stroke;
}

.route-map-on {
  fill: var(--primary);
  fill-opacity: 0.45;
  stroke: var(--primary);
}

.route-map-doubt {
  fill: url(#routeMapHatch);
  stroke: var(--muted);
  stroke-dasharray: 3 2;
}

.route-map-hatch-bg {
  fill: var(--surface-muted);
}

.route-map-hatch {
  fill: var(--muted);
  fill-opacity: 0.55;
}

.route-map-leg {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.75px;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.route-map-leg-tail {
  stroke: var(--muted);
  stroke-dasharray: 1.5 4;
  stroke-width: 2px;
}

.route-map-arrow {
  fill: var(--text);
}

.route-map-arrow.route-map-leg-tail {
  fill: var(--muted);
  stroke: none;
}

.route-map-spot {
  fill: var(--primary);
  fill-opacity: 0.45;
  stroke: var(--primary);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.route-map-spot-doubt {
  fill: var(--surface-muted);
  stroke: var(--muted);
  stroke-dasharray: 3 2;
}

.route-map-you {
  fill: none;
  stroke: var(--text);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.route-map-leg-near {
  stroke-dasharray: none;
  stroke-width: 1.25px;
}

.route-map-node circle {
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.route-map-node text {
  fill: var(--surface);
  font-family: inherit;
  font-weight: 700;
}

.route-map-node-borrowed circle {
  fill: var(--surface);
  stroke: var(--text);
  stroke-dasharray: 2 1.5;
}

.route-map-node-borrowed text {
  fill: var(--text);
}

.route-map-node-doubt circle {
  fill: var(--surface);
  stroke: var(--muted);
  stroke-dasharray: 2 1.5;
}

.route-map-node-doubt text {
  fill: var(--muted);
}

.route-map-host {
  touch-action: pan-x pan-y;
}

.route-map-host.route-map-pannable {
  cursor: grab;
}

.route-map-host.route-map-chosen {
  touch-action: none;
}

.route-map-zoom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.route-map-zoom button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.2em 0.8em;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-button);
}

/* In high contrast --secondary is white, the colour of the first line: the other direction takes the yellow */
html.high-contrast .route-map-leg.route-map-leg-other,
html.high-contrast .route-map-you.route-map-you-other,
html.high-contrast .route-map-landing.route-map-landing-other {
  stroke: var(--primary);
}

html.high-contrast .route-map-arrow.route-map-leg-other,
html.high-contrast .route-map-via.route-map-via-other {
  fill: var(--primary);
}

html.high-contrast .route-map-dot-other {
  stroke: var(--primary);
}

html.high-contrast .route-map-dot-group text {
  fill: var(--primary);
}

.route-both {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1em;
  align-items: center;
}

.route-both-button {
  min-height: 2.5rem;
  padding: 0.2em 0.8em;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-button);
}

.route-both-button[aria-pressed="true"] {
  background: var(--primary-subtle);
  border-color: var(--primary);
}

.route-both-button:focus-visible,
.route-both-way:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0.125rem;
}

/* The two directions: they say which line is which, and the one that is not on the screen is chosen by pressing it */
.route-both-ways {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.6em;
  padding: 0;
  margin: 0;
  font-size: 0.85em;
  list-style: none;
}

.route-both-way {
  display: flex;
  gap: 0.4em;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.2em 0.7em;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  background: none;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-button);
}

.route-both-way[aria-pressed="true"] {
  font-weight: 600;
  border-color: var(--border);
}

.route-both-way:disabled {
  color: var(--muted);
  cursor: default;
}

.route-both-way svg {
  flex: none;
  width: 1.8em;
  height: 0.7em;
}

.route-map-zoom button:disabled {
  cursor: default;
  opacity: 0.45;
}

.route-map-zoom button:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0.125rem;
}

@media (max-width: 30em) {
  #routeArea {
    padding: 0;
  }

  /* A narrow table: the long addresses of IPv6 would break in four lines at the size of the other text */
  .route-address {
    font-size: 0.72em;
  }

  .route-table th,
  .route-table td {
    padding: 0.45em 0.3em;
  }

  .route-stats dd {
    font-size: 1.4em;
  }

  .route-table td.route-network {
    min-width: 7em;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-button {
    transition: none;
  }
}

.route-map-leg-land {
  stroke-dasharray: none;
  stroke-width: 1.25px;
}

.route-map-leg-sea {
  stroke-dasharray: 2 4;
}

.route-map-landing {
  fill: var(--surface);
  stroke: var(--text);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

/* The other way of the route, under the one of the numbers: the colour is another one, and the dashes are the same (land, sea, tail) */
.route-map-leg.route-map-leg-other {
  stroke: var(--secondary);
  stroke-opacity: 0.9;
}

.route-map-arrow.route-map-leg-other {
  fill: var(--secondary);
  stroke: none;
}

.route-map-you.route-map-you-other {
  stroke: var(--secondary);
  stroke-dasharray: 3 2;
}

.route-map-landing.route-map-landing-other {
  stroke: var(--secondary);
}

.route-map-via.route-map-via-other {
  fill: var(--secondary);
  stroke: var(--surface);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

/* A network that is only in the other direction: a hollow point of the colour of that direction, with its letter */
.route-map-dot-other {
  fill: var(--surface);
  stroke: var(--secondary);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.route-map-dot-group text {
  fill: var(--secondary);
  font-family: inherit;
  font-weight: 700;
}

.route-showing {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 0.9em;
  margin: 0 0 1em;
  background: var(--primary-subtle);
  border: 0.0625rem solid var(--primary);
  border-radius: var(--radius-card);
}

/* An author display beats the hidden attribute, so the strip says it itself */
.route-showing[hidden] {
  display: none;
}

.route-showing:focus {
  outline: none;
}

.route-showing:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0.125rem;
}

#historySection {
  margin-top: 2em;
}

.route-back-clip {
  display: flex;
  gap: 0.5em;
  align-items: center;
  margin: 0.5em 0;
}

.route-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

.route-map-via {
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

/* Blank, before a route is drawn in them: the box of the chart and of the map have their size already */
.route-chart-host:empty {
  min-height: 15rem;
}

.route-map-host:empty {
  aspect-ratio: 3 / 2;
}

@media (min-width: 37.5em) {
  .route-map-host:empty {
    aspect-ratio: 2 / 1;
  }
}

/* The direction: "Server → you" or "You → server", over the action */
.route-direction {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 1.4em auto 0;
}

.route-direction button:disabled {
  color: var(--muted);
  cursor: default;
}

.route-direction button {
  flex: 1 1 auto;
}

/* The route the visitor traced: the commands to run, and the box to paste what they print. It lives in the panel at the side. */
.route-back {
  padding: 1em 1.2em;
  margin: 0;
  text-align: left;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-card);
}

.route-back h2 {
  margin: 0 0 0.6em;
  font-size: 1em;
}

.route-back p {
  margin: 0.6em 0;
  font-size: 0.9em;
}

.route-back .route-views {
  margin: 0.4em 0;
}

.route-command {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  margin: 0.5em 0;
}

.route-back code {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5em 0.7em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: anywhere;
  user-select: all;
  background: var(--surface-muted);
  border: 0.0625rem solid var(--border);
  border-radius: calc(var(--radius-card) / 2);
}

p.route-hint code {
  display: inline;
  padding: 0.1em 0.4em;
}

.route-back label {
  display: block;
  margin: 1em 0 0.3em;
  font-size: 0.9em;
  font-weight: 600;
}

.route-paste {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 7rem;
  padding: 0.6em 0.7em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em;
  line-height: 1.4;
  color: var(--text);
  resize: vertical;
  background: var(--surface-muted);
  border: 0.0625rem solid var(--border);
  border-radius: calc(var(--radius-card) / 2);
}

.route-paste:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0;
}

.route-paste-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  align-items: center;
  justify-content: center;
  margin-top: 0.8em;
}

.route-button-small {
  width: auto;
  min-width: 10em;
  height: 2.9rem;
  padding: 0 1.2em;
  line-height: 1;
}

.route-back-notes p {
  margin: 0.4em 0;
}

.route-back-notes .route-error,
.route-back-trace .route-error {
  font-weight: 600;
  color: var(--text);
}

/* The networks of the two directions: two lists side by side, one under the other on a narrow screen; the networks that are in only one of
   them have a mark and are bold (so it is not only a color) */
.route-compare {
  padding: 1em 1.2em;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-card);
}

.route-compare h3 {
  margin: 0 0 0.6em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--muted);
}

.route-compare p {
  margin: 0.4em 0;
  font-size: 0.9em;
}

.route-compare-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  gap: 0.8em 1.4em;
  margin-top: 0.6em;
}

.route-compare-lists h4 {
  margin: 0 0 0.3em;
  font-size: 0.85em;
  color: var(--muted);
}

.route-compare-lists ol {
  padding-left: 1.4em;
  margin: 0;
  font-size: 0.9em;
}

.route-compare-only {
  font-weight: 600;
}

.route-compare-mark {
  display: inline-block;
  width: 1.2em;
  color: var(--primary);
}

/* The letter of a network, in a round badge like the circles of the map: the same letter in both directions. The internal network has a dot
   and a network that is not known a question mark, dashed like their circles of the map */
.route-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.45em;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1;
  color: var(--surface);
  vertical-align: 0.05em;
  background: var(--text);
  border-radius: 50%;
}

.route-letter.route-letter-none {
  color: var(--muted);
  background: none;
  border: 0.0625rem dashed var(--muted);
}

.route-letters-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.route-compare-note {
  color: var(--muted);
  font-size: 0.85em;
}

/* "Save to history" while it cannot be pressed: it looks off but stays a button the keyboard can stay on */
.route-back-secondary .history-action[aria-disabled="true"],
.route-back-secondary .history-action[aria-disabled="true"]:hover {
  color: var(--muted);
  cursor: default;
  background: none;
  border-color: var(--border);
  opacity: 0.8;
}

/* The button that starts the trace with the browser extension, and what it is waiting for */
.route-back-trace {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  align-items: center;
  justify-content: center;
  margin: 0.6em 0;
}

.route-back-trace .route-hint {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
}

/* An error of the button that traces the way back, as a red box at the top of the screen, in the middle: the same words as the line under the button, which is
   what a screen reader reads (the box is only for the eyes). It goes by itself, or with a click. Red with white letters in both themes. */
.route-toast {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  left: 1rem;
  z-index: 500;
  box-sizing: border-box;
  max-width: 32rem;
  padding: 0.8em 1.1em;
  margin: 0 auto;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: #b3261e;
  border: 2px solid #fff;
  border-radius: 0.6em;
  box-shadow: 0 0.4em 1.4em rgb(0 0 0 / 45%);
  animation: route-toast-in 0.2s ease-out;
}

.route-toast[hidden] {
  display: none;
}

@keyframes route-toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.6em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-toast {
    animation: none;
  }
}

/* The panel at the side. It is not a dialog: it floats over the right of the page, does not push it, and the page behind stays usable.
   Under the red box of the errors (500) and the panel of the themes (1000) and the privacy dialog, over everything else of the page. */
.route-side {
  position: fixed;
  top: 4rem;
  right: 1rem;
  bottom: 4rem;
  z-index: 400;
  box-sizing: border-box;
  width: min(23rem, calc(100vw - 2rem));
  padding: 0.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 0.4rem 1.6rem rgb(0 0 0 / 30%);
}

.route-side[hidden],
.route-side-toggle[hidden] {
  display: none;
}

.route-side .route-back {
  border: 0;
}

.route-side-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  width: 2em;
  height: 2em;
  padding: 0;
  margin: 0 0 0 0.5em;
  font: inherit;
  font-size: 0.95em;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-button);
}

.route-side-close:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.route-side-toggle {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 400;
  padding: 0.6em 1.1em;
  font: inherit;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  background: var(--surface);
  border: 0.15em solid var(--primary);
  border-radius: 2em;
  box-shadow: 0 0.2rem 0.8rem rgb(0 0 0 / 35%);
}

/* The button on the edge never covers the last links of the page */
body.route-side-on {
  padding-bottom: 4.5rem;
}

@media (max-width: 37.5em) {
  /* A sheet that comes up from the bottom */
  .route-side {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 85dvh;
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
}

@media (forced-colors: active) {
  .route-side,
  .route-side-toggle,
  .route-toast {
    border: 0.125rem solid CanvasText;
  }
}

@media print {
  .route-side,
  .route-side-toggle,
  .route-toast {
    display: none;
  }
}

/* The card of the way back, in the panel: the title and what it is for, the way chosen, then what that way needs, the box for the result, one
   main action, the secondary ones, and how the data is handled. One accent colour for the action; the rest is quiet. */
.route-back h2 {
  padding-right: 2.8em;
  margin: 0 0 0.3em;
  font-size: 1.15em;
}

.route-back .route-back-lead {
  margin: 0 0 0.4em;
  color: var(--muted);
}

.route-back .route-label {
  display: block;
  margin: 1.1em 0 0.4em;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Segmented choices: the whole width, the words on one line */
.route-segments {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.route-segments button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.3em 0.5em;
  font-size: 0.9em;
  white-space: nowrap;
}

.route-back .route-views.route-segments {
  margin: 0.4em 0;
}

.route-button-block {
  display: block;
  width: 100%;
  margin: 0;
}

/* The main action stays at the bottom of the panel while the rest scrolls: it is never under the fold or under the button on the edge */
.route-back-action {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 0.7em 0 0.3em;
  margin-top: 0.4em;
  background: var(--surface);
}

.route-button-primary {
  color: var(--on-primary);
  background: var(--primary);
}

.route-button-primary:disabled {
  cursor: default;
  opacity: 0.7;
}

/* A text that is an action but not the main one: a link that is a button */
.route-link {
  padding: 0.2em 0;
  font: inherit;
  font-size: 0.85em;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}

.route-link:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0.1em;
}

.route-back-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1.2em;
  margin: 0.4em 0 0;
}

.route-back-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  justify-content: center;
}

.route-back-secondary > :not([hidden]) {
  margin-top: 0.7em;
}

.route-back .route-privacy-summary {
  margin: 0.9em 0 0.3em;
  text-align: center;
}

.route-disclosure {
  font-size: 0.9em;
}

.route-disclosure summary {
  padding: 0.3em 0;
  color: var(--muted);
  cursor: pointer;
}

.route-disclosure summary:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0.1em;
}

/* The card is a tool, not a page: smaller letters for everything that is not the title, and tighter spaces, so that it fits without a scroll bar on
   an ordinary screen (it still scrolls inside itself on a short one, with the main action kept at its bottom). */
.route-side .route-back {
  padding: 0.5em 0.9em;
  font-size: 0.95rem;
}

.route-side .route-back p {
  margin: 0.4em 0;
  font-size: 0.92em;
}

.route-side .route-back h2 {
  font-size: 1.15em;
}

.route-side .route-back .route-back-lead {
  margin: 0 0 0.2em;
}

.route-side .route-back .route-label {
  margin: 0.6em 0 0.25em;
  font-size: 0.85em;
}

.route-side .route-back .route-views button {
  padding: 0.2em 0.5em;
  font-size: 0.95em;
}

/* On a phone the choices keep the height of a finger */
@media (min-width: 37.5em) {
  .route-side .route-back .route-views button {
    min-height: 1.75rem;
  }
}

.route-side .route-back .route-views.route-segments {
  margin: 0.3em 0;
}

.route-side .route-back code {
  padding: 0.35em 0.55em;
  font-size: 0.95em;
}

.route-side .route-back .route-command {
  margin: 0.4em 0;
}

.route-side .route-back .route-paste {
  min-height: 4rem;
  font-size: 0.95em;
}

.route-side .route-back .route-link {
  font-size: 0.95em;
}

.route-side .route-back .route-button-block {
  height: 2.2rem;
  font-size: 1em;
  line-height: 1;
}

.route-side .route-back .route-back-action {
  padding: 0.5em 0 0.2em;
}

.route-side .route-back .route-privacy-summary {
  margin: 0.5em 0 0.1em;
}

.route-side .route-back .route-disclosure {
  font-size: 1em;
}

.route-side .route-back .route-disclosure summary {
  padding: 0.15em 0;
}

.route-side .route-back .history-action {
  font-size: 0.95em;
}

/* With both directions on, the networks of each one are under the name of its direction */
.route-groups-way {
  margin: 0.6em 0 0.2em;
  font-weight: 600;
}

/* The end of the route and the MTU are toasts; their paragraphs stay for a screen reader, with nothing of their own to show (the ids above would
   otherwise keep their line and their spaces) */
#routeEnd.route-visually-hidden,
#routeMtu.route-visually-hidden {
  padding: 0;
  margin: -1px;
  border: 0;
}

/* A switch for what is on or off (the way of the clipboard): the native checkbox, with role="switch", on top of a track and a handle that follow
   its state. It is the toggle of PrimeVue 4 (a track of 2.5 by 1.5, a round handle of 1 that goes to the other end), so the keyboard (Space), the
   label and the screen reader are the ones of a checkbox, and nothing here needs a script. */
.route-back-clip {
  display: flex;
  gap: 0.6em;
  align-items: center;
  margin: 0.5em 0;
  cursor: pointer;
}

.route-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 2.5em;
  height: 1.5em;
}

.route-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.route-switch-track {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--muted) 45%, var(--surface));
  border: 0.0625rem solid transparent;
  border-radius: 1.875em;
  transition: background-color 0.2s;
}

.route-switch-handle {
  position: absolute;
  top: 50%;
  left: 0.25em;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  background: var(--on-primary, #fff);
  border-radius: 50%;
  box-shadow: 0 0.0625em 0.1875em rgb(0 0 0 / 30%);
  transition: left 0.2s;
}

.route-switch:hover input:not(:checked) + .route-switch-track {
  background: color-mix(in srgb, var(--muted) 60%, var(--surface));
}

.route-switch input:checked + .route-switch-track {
  background: var(--primary);
}

.route-switch input:checked + .route-switch-track .route-switch-handle {
  left: calc(100% - 1.25em);
}

.route-switch input:focus-visible + .route-switch-track {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0.125rem;
}

.route-back-clip-text {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .route-switch-track,
  .route-switch-handle {
    transition: none;
  }
}

@media (forced-colors: active) {
  .route-switch-track {
    background: Canvas;
    border-color: ButtonText;
  }

  .route-switch input:checked + .route-switch-track {
    background: Highlight;
  }

  .route-switch-handle {
    background: ButtonText;
    forced-color-adjust: none;
  }
}

/* What is needed before the button of the extension works: two short steps, there only while the extension has not answered */
.route-setup {
  order: -1;
  flex-basis: 100%;
  text-align: left;
}

.route-setup .route-label {
  margin: 0.2em 0 0.3em;
}

.route-steps {
  padding-left: 1.3em;
  margin: 0;
}

.route-steps li {
  margin: 0.3em 0;
}

.route-steps a {
  display: block;
  color: var(--primary);
}

/* The samples in the chin of the chart: the lines that the chart draws (solid, in the colour of the action, for the direction on the screen;
   dashed, in the second colour, for the other), so the legend never says another colour than the chart */
.route-chart-leg,
.route-chart-leg-other {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.route-chart-leg {
  stroke: var(--primary);
  stroke-width: 2.5px;
}

.route-chart-leg-other {
  stroke: var(--secondary);
  stroke-width: 2px;
  stroke-dasharray: 6 4;
}

/* The command in a field with the copy button inside it, at the right (the pattern of an input with an icon button of PrimeVue 4: a text button, a
   small icon in the colour of the action, a soft background when the pointer is on it). The command leaves room for the button. */
.route-copy-field {
  position: relative;
  display: block;
}

.route-copy-field code,
.route-side .route-back .route-copy-field code {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 2.6rem;
  padding-right: 2.9em;
}

.route-copy-button {
  position: absolute;
  top: 50%;
  right: 0.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  margin-top: -1.05rem;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-button);
  transition: background-color 0.15s;
}

.route-copy-button:hover:not(:disabled) {
  background: var(--primary-subtle);
}

.route-copy-button:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0.0625rem;
}

.route-copy-button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.6;
}

.route-copy-button svg {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .route-copy-button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .route-copy-button {
    color: ButtonText;
    border: 0.0625rem solid ButtonText;
  }
}

/* The box for the output of the command is also the place where things are dropped and pasted (the field of the other projects: a dashed box
   that takes the colour of the action while something is over it, with the clip in its corner, and a card with the name of the file that the
   text came from). The text stays a text box: it is seen, edited and sent from it. */
.route-drop {
  position: relative;
  background: var(--surface-muted);
  border: 0.0625rem dashed var(--border);
  border-radius: calc(var(--radius-card) / 2);
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.route-drop:hover {
  border-color: var(--muted);
}

.route-drop:focus-within {
  border-style: solid;
  border-color: var(--primary);
}

.route-drop.dragging {
  background: var(--primary-subtle);
  border-style: solid;
  border-color: var(--primary);
}

.route-drop .route-paste {
  background: transparent;
  border: 0;
  border-radius: inherit;
  /* the room that the clip takes in the corner */
  padding-right: 3em;
  padding-bottom: 2.4em;
  resize: vertical;
}

.route-drop .route-paste:focus {
  outline: none;
}

.route-drop-button {
  position: absolute;
  right: 0.3em;
  bottom: 0.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-button);
}

.route-drop-button:hover {
  background: var(--primary-subtle);
}

.route-drop-button:focus-visible,
.route-file-remove:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0.0625rem;
}

.route-drop-button svg,
.route-file-remove svg,
.route-file-icon svg {
  display: block;
}

.route-file {
  display: flex;
  gap: 0.6em;
  align-items: center;
  padding: 0.4em 0.5em 0.4em 0.7em;
  margin: 0.5em 0 0;
  background: var(--surface-muted);
  border: 0.0625rem solid var(--border);
  border-radius: calc(var(--radius-card) / 2);
}

.route-file-icon {
  flex: none;
  color: var(--muted);
}

.route-file-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.route-file-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-file-meta {
  font-size: 0.85em;
  color: var(--muted);
}

.route-file-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-button);
}

.route-file-remove:hover {
  color: var(--text);
  background: var(--primary-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .route-drop {
    transition: none;
  }
}

@media (forced-colors: active) {
  .route-drop,
  .route-file {
    border-color: ButtonText;
  }

  .route-drop.dragging {
    border-color: Highlight;
  }
}