/* Route figure: tangle → one drawn line. Colors come from the page tokens
   (--ink, --muted, --rule, --snes-red, --font-mono / --fm) so it sits in
   both the site and the packets, light or dark. */
.route-fig { margin: 0; }
.route { position: relative; width: 100%; }
.route-svg { display: block; width: 100%; height: auto; overflow: visible; }

.route-tile-box { fill: var(--paper-2, #fff); stroke: var(--rule, #e3e4e8); stroke-width: 1; }
.route-glyph .gs { fill: none; stroke: var(--ink, #222); stroke-width: 1.1; stroke-linecap: square; stroke-linejoin: miter; opacity: 0.62; }
.route-glyph .gs.g2 { stroke-width: 2; opacity: 0.8; }
.route-glyph .gs.gd { stroke-dasharray: 2 3; }
.route-glyph .gf { fill: var(--ink, #222); stroke: none; opacity: 0.55; }
.route-glyph .gt { fill: var(--ink, #222); font-family: var(--font-display, 'Inter', system-ui, sans-serif); font-weight: 700; letter-spacing: -0.03em; opacity: 0.62; }
.route-svg--narrow .route-tile--step .route-tile-box { stroke: var(--rule, #e3e4e8); }
.route-tile--step .route-glyph .gs { opacity: 0.5; }
.route-tile--step .route-glyph .gf { opacity: 0.42; }
.route-label { font-size: 15px; }
.route-label { font-family: var(--font-mono, var(--fm, 'JetBrains Mono', Menlo, monospace)); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--muted, #6b6d76); }

/* Clutter behind the tiles: sheets, notes, photos. Faint until filed. */
.route-cl-box { fill: var(--paper-2, #fff); stroke: var(--muted, #6b6d76); stroke-width: 1; opacity: 0.55; }
.route-cl-note { fill: var(--accent-soft, #eef0f3); }
.route-cl-ln { fill: none; stroke: var(--muted, #6b6d76); stroke-width: 1; opacity: 0.45; }
.route-tile { cursor: default; }
.route-master { fill: none; stroke: none; pointer-events: none; }
/* Hover: the tile wakes up (ink hairline + label), nothing moves. */
.route.is-play .route-tile:hover .route-tile-box { stroke: var(--ink, #222); }
.route.is-play .route-tile:hover .route-label { fill: var(--ink, #222); }
.route.is-play .route-tile:hover .route-glyph .gs { opacity: 0.85; }
.route.is-dragging .route-tile:hover .route-tile-box { stroke: var(--ink, #222); }
.route-tile-box, .route-label, .route-glyph .gs { transition: stroke 0.18s, fill 0.18s, opacity 0.18s; }

/* Vendor segments: many short grey lines, each stopping short of the next system. */
.route-seg { stroke: var(--muted, #6b6d76); stroke-width: 1.1; opacity: 0.55; }
.route-seg--dash { stroke-dasharray: 4 4; }
.route-seg-end { fill: var(--muted, #6b6d76); }

/* The one line. Drawn by dash offset, so it never appears "already there". */
.route-line { fill: none; stroke: var(--ink, #222); stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: square; }

/* Information on the move: ink blobs along connected lines. */
.route-blob { fill: var(--ink, #222); opacity: 0; }

/* The signature square: always present, red, rides the line, then rests. */
.route-dot-sq { fill: var(--snes-red, #FF3B30); }
.route-tile { transform-box: view-box; }
.route-dot-hop { transform-box: fill-box; transform-origin: 50% 100%; }
.route.is-done .route-dot-hop { animation: route-hop 3.6s 1.2s infinite; }
.route.is-done .route-dot:nth-child(2) .route-dot-hop { animation-delay: 2.4s; }
.route.is-done .route-dot:nth-child(3) .route-dot-hop { animation-delay: 3.6s; }
@keyframes route-hop {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.4, 1); }
  7%   { transform: translateY(-11px); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  14%  { transform: translateY(0) scale(1.12, 0.88); }
  18%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0); }
}

.route-cap { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--muted, #6b6d76); max-width: 62ch; }
.route-cap b { color: var(--ink, #222); font-weight: 650; }
.route-replay {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: default;
  color: var(--muted, #6b6d76); opacity: 0; transition: opacity 0.4s, color 0.2s; pointer-events: none;
}
.route-replay svg { width: 20px; height: 20px; fill: currentColor; opacity: 0.55; }
.route.is-done + .route-cap .route-replay, .route-fig.is-ready .route-replay { opacity: 1; pointer-events: auto; }
.route-replay:hover svg { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .route-dot-hop { animation: none !important; }
  .route-replay { display: none; }
}