/* page style: roku-route-map */
body[data-site-route='/roku-remote-over-tailscale/'] .roku-route-map {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(5,minmax(0,1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

body[data-site-route='/roku-remote-over-tailscale/'] .roku-route-map li {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding: var(--space-sm);
}

body[data-site-route='/roku-remote-over-tailscale/'] .roku-route-map strong {
  font-size: var(--meta-size);
  line-height: var(--meta-line);
}

body[data-site-route='/roku-remote-over-tailscale/'] .roku-route-map span {
  color: var(--muted);
  font-size: 12px;
  line-height: 17px;
}

body[data-site-route='/roku-remote-over-tailscale/'] .roku-route-map li + li {
  position: relative;
}

body[data-site-route='/roku-remote-over-tailscale/'] .roku-route-map li + li::before {
  background: var(--surface);
  color: var(--accent);
  content: "→";
  font-family: var(--mono);
  font-weight: 600;
  left: calc(-1 * var(--space-sm));
  padding: 0 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
}

@media (max-width:700px) {
  body[data-site-route='/roku-remote-over-tailscale/'] .roku-route-map {
    grid-template-columns: 1fr;
  }

  body[data-site-route='/roku-remote-over-tailscale/'] .roku-route-map li + li::before {
    content: "↓";
    left: 50%;
    top: calc(-1 * var(--space-sm) / 2);
    transform: translate(-50%,-50%);
  }
}