/* css/modules/route-canvas.css: the self-drawing farm loop overlay drawn by js/modules/route-canvas.js (.rc, .rc-*).
 * Linked on every atlas page that mounts a loop (zone pages full, boards and the brief preview). Tokens only.
 * Motion: transform / opacity / stroke-dashoffset. Everything collapses under prefers-reduced-motion.
 * 2026-10-02 extensions (below the approved block): .rc-pin / .rc-f-* faction tints, .rc-t-* stop halo tiers, .rc-composite two-panel
 * stack, .rc-plate in-map caption + credit. The approved Midnight rules above the marker are unchanged. */

.rc { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-surface); border-radius: 0; }
.rc > .rc-map, .rc > .rc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rc > .rc-map { object-fit: fill; transform-origin: 50% 50%; }
.rc > .rc-svg { transform-origin: 50% 50%; overflow: visible; }
.rc.is-live > .rc-map, .rc.is-live > .rc-svg { animation: rc-drift 26s var(--ease-in-out) infinite alternate; }
@keyframes rc-drift { from { transform: scale(1); } to { transform: scale(1.02); } }

.rc-path { stroke: var(--color-gold); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rc-preview .rc-path { stroke-width: 7; }

.rc-pois { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.rc-svg.is-ready .rc-pois { opacity: 1; }
.rc-poi { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); fill: var(--text-secondary); stroke: var(--bg-app); stroke-width: 2; paint-order: stroke; }
.rc-svg.is-ready .rc-poi { opacity: 0.92; }
.rc-k-town { fill: var(--text-primary); transition-delay: 0ms; }
.rc-k-flight { fill: var(--coin-silver); transition-delay: 90ms; }
.rc-k-abundance { fill: var(--coin-copper); transition-delay: 180ms; }
.rc-k-dungeon { fill: var(--text-secondary); transition-delay: 270ms; }
.rc-k-delve { fill: var(--text-secondary); transition-delay: 360ms; }
.rc-k-portal { fill: none; stroke: var(--color-midnight); stroke-width: 3; transition-delay: 450ms; }
.rc-k-vendor { fill: var(--coin-silver); transition-delay: 540ms; }
.rc-k-landmark { fill: var(--text-muted); transition-delay: 630ms; }
.rc-k-quest { fill: var(--text-muted); transition-delay: 720ms; }
.rc-poi-label { font-family: var(--font-body); font-size: 19px; font-weight: 600; fill: var(--text-primary); stroke: var(--bg-app); stroke-width: 4; paint-order: stroke; display: none; }
@media (min-width: 760px) { .rc-full .rc-poi-label { display: block; } }

.rc-stop { transform-box: fill-box; }
.rc-stop-dot { fill: var(--color-gold); transform: scale(0.6); opacity: 0.45; transform-box: fill-box; transform-origin: center; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.rc-stop-halo { fill: none; stroke: var(--color-gold); stroke-width: 2; opacity: 0; transform: scale(0.6); transform-box: fill-box; transform-origin: center; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.rc-stop-n { font-family: var(--font-mono); font-size: 14px; font-weight: 600; fill: var(--text-inverted); opacity: 0; transition: opacity 180ms var(--ease-out); pointer-events: none; }
.rc-stop.is-hit .rc-stop-dot { transform: scale(1); opacity: 1; }
.rc-stop.is-hit .rc-stop-halo { transform: scale(1); opacity: 0.6; }
.rc-stop.is-hit .rc-stop-n { opacity: 1; }

.rc-pen { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none; }
.rc-pen.is-on { opacity: 1; }
.rc-pen-dot { fill: var(--color-gold); stroke: var(--bg-app); stroke-width: 2; }
.rc-pen-halo { fill: var(--color-gold); fill-opacity: 0.22; }

@media (prefers-reduced-motion: reduce) {
  .rc.is-live > .rc-map, .rc.is-live > .rc-svg { animation: none; }
  .rc-pois, .rc-poi { opacity: 1; transition: none; }
  .rc-stop-dot, .rc-stop-halo, .rc-stop-n { transition: none; }
}

/* ---- 2026-10-02 extensions: Forever pins, tiers, two panels, plate ---- */

/* Pins (Forever zones): the glyph is the kind, the tint is the faction, always beside the printed name.
   Two ignition groups: flight points at 0ms, towns and landmarks 150ms later, each staggered by --stagger-pin. */
.rc-pin { transition-delay: calc(var(--pd, 0ms) + var(--i, 0) * var(--stagger-pin)); }
.rc-g-flight { --pd: 0ms; }
.rc-g-place { --pd: 150ms; }
.rc-pin.rc-k-town { fill: var(--pin-town); }
.rc-pin.rc-k-landmark { fill: var(--pin-landmark); }
.rc-pin.rc-k-dungeon { fill: var(--pin-dungeon); }
.rc-pin.rc-k-flight { fill: var(--pin-both); }
.rc-pin.rc-f-alliance { fill: var(--pin-alliance); }
.rc-pin.rc-f-horde { fill: var(--pin-horde); }
.rc-pin.rc-f-both { fill: var(--pin-both); }

/* Stop halo tier: the verdict of the unit the stop names. The dot stays gold (it is a position on the loop); only the ring tints. */
.rc-stop.rc-t-worth .rc-stop-halo { stroke: var(--v-worth); }
.rc-stop.rc-t-worth.is-hit .rc-stop-halo { opacity: 0.85; }
.rc-stop.rc-t-thin .rc-stop-halo { stroke: var(--v-thin); }
.rc-stop.rc-t-floor .rc-stop-halo { stroke: var(--v-floor); }
.rc-stop.rc-t-floor.is-hit .rc-stop-halo { opacity: 0.4; }
.rc-stop.rc-t-nodata .rc-stop-halo { stroke: var(--v-nodata); stroke-dasharray: 4 4; }
.rc-stop.rc-t-nodata.is-hit .rc-stop-halo { opacity: 0.4; }

/* One pulse on the Lap press: the halo swells and fades once, transform + opacity only. */
.rc-stop.is-pulse .rc-stop-halo { animation: rc-pulse calc(var(--dur-pop) * 3) var(--ease-out) 1; }
@keyframes rc-pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }

/* Two-panel art (the-barrens): the two Cata panels stack into one 3:4 canvas and the overlay spans both. */
.rc-composite { display: grid; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 4; background: var(--bg-surface); }
.rc-composite > .rc-host { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.rc-composite > .rc-host > .rc-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; transform-origin: 50% 50%; }
.rc-composite.is-live > .rc-host > .rc-map { animation: rc-drift 26s var(--ease-in-out) infinite alternate; }

/* In-map plate, full mode only: the suggested-loop line and the credit ride on the art so no caller can drop them. */
.rc-plate { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: baseline; justify-content: space-between; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); background: linear-gradient(to top, oklch(0.10 0.015 260 / 0.85), oklch(0.10 0.015 260 / 0)); pointer-events: none; }
.rc-plate-loop { flex: 1 1 24ch; min-width: 0; }
.rc-plate-credit { flex: 0 1 auto; color: var(--text-muted); font-size: inherit; }
@media (max-width: 759px) {
  .rc-plate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rc-plate-loop, .rc-plate-credit { font-size: 0; line-height: 0; }
  .rc-plate-loop::after, .rc-plate-credit::after { content: attr(data-short); display: block; font-size: var(--text-xs); line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-pin { transition: none; }
  .rc-stop.is-pulse .rc-stop-halo { animation: none; }
  .rc-composite.is-live > .rc-host > .rc-map { animation: none; }
}