/* The route chart's ink (route-ink.js): a stop written on the paper beside its dot, and the "You" mark. Brown ink on the
   chart's own parchment; nothing here moves under reduced motion except the pulse, which stops. */
.route-ink {
  position: absolute; z-index: 3; box-sizing: border-box; width: max-content; max-width: min(16em, 70%); max-height: calc(100% - 8px); overflow: auto;
  padding: 8px 26px 8px 11px; border-radius: 6px; background: rgba(240, 225, 190, 0.94); border: 1px solid #8a6c42;
  box-shadow: 0 2px 8px rgba(60, 40, 15, 0.35); color: #3d2a18; font: italic 600 13px/1.35 Georgia, 'Times New Roman', serif;
  text-align: left; cursor: default;
}
.ink-title { font-size: 14px; font-weight: 700; color: #2b1b0c; }
.ink-line { color: #4a3420; }
.ink-title:empty, .ink-line:empty { display: none; }
.route-ink-close {
  position: absolute; right: 2px; top: 1px; min-height: 0; width: 24px; height: 24px; padding: 0; border: 0; background: none;
  color: #6b4a2c; font: 400 20px/22px Georgia, serif; cursor: pointer;
}
.ink-ways { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; animation: ink-dry 0.4s ease-out; }
.ink-way {
  min-height: 30px; padding: 3px 10px; border-radius: 999px; border: 1px solid #6b4a2c; background: rgba(255, 248, 230, 0.7);
  color: #4a3420; font: 600 12px var(--font); text-decoration: none; display: inline-flex; align-items: center; cursor: pointer;
}
.route-dot.inked { outline: 2px solid #a3261b; outline-offset: 2px; }
@keyframes ink-dry { from { opacity: 0; } to { opacity: 1; } }

.route-you { position: absolute; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; display: grid; place-items: center; }
.route-you-ring { width: 14px; height: 14px; border-radius: 50%; background: #1f4e79; border: 2px solid #f5e7c6; box-shadow: 0 0 0 1px #1f4e79; animation: you-pulse 2.4s ease-out infinite; }
.route-you-word { position: absolute; top: 15px; font: italic 700 11px Georgia, serif; color: #1f4e79; paint-order: stroke; -webkit-text-stroke: 2.4px #ecdcb4; }
@keyframes you-pulse { 0% { box-shadow: 0 0 0 1px #1f4e79, 0 0 0 0 rgba(31, 78, 121, 0.5); } 100% { box-shadow: 0 0 0 1px #1f4e79, 0 0 0 16px rgba(31, 78, 121, 0); } }
@media (prefers-reduced-motion: reduce) { .route-you-ring, .ink-ways { animation: none; } }