/* TrueNorth Core components. Colours come from Beaver Builder Global Styles via the --fl-global-* variables. */
.tn-route {
  --tn-map-line: var(--fl-global-laminate-bone, #F4EFE4);
  --tn-map-spot: var(--fl-global-follow-spot, #F5C451);
  --tn-map-rust: var(--fl-global-needle-light, #C2492B);
  position: relative; margin: 0;
}
.tn-route__stage { position: relative; width: 100%; aspect-ratio: 16 / 10; max-width: 100%; touch-action: pan-y; cursor: grab; }
.tn-route__stage:active { cursor: grabbing; }
.tn-route__stage canvas { display: block; width: 100% !important; height: 100% !important; }
.tn-route__cap { margin-top: 10px; font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--fl-global-laminate-bone, #F4EFE4) 72%, transparent); }
.tn-route__tip {
  position: absolute; z-index: 2; max-width: 260px; padding: 10px 12px; pointer-events: none;
  background: var(--fl-global-laminate-bone, #F4EFE4); color: var(--fl-global-midnight-route, #14233B);
  border-radius: 2px; font-size: 14px; line-height: 1.4;
}
.tn-route__tip strong { display: block; font-family: var(--fl-global-h1-font-family, sans-serif); font-size: 20px; line-height: 1.1; margin-bottom: 2px; }
.tn-route__tip[hidden] { display: none; }
/* the market list is the map's text alternative; it shows until the map draws */
.tn-route__list { columns: 3 140px; margin: 16px 0 0; padding-left: 1.2em; font-size: 15px; }
.tn-route.is-live .tn-route__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tn-route:not(.is-live) .tn-route__stage, .tn-route:not(.is-live) .tn-route__cap { display: none; }

.tn-lottie { width: 100%; }
.tn-lottie--needle { max-width: 220px; aspect-ratio: 1; }
.tn-lottie--affinity { max-width: 520px; aspect-ratio: 420 / 240; }
.tn-lottie--meter { max-width: 620px; aspect-ratio: 520 / 320; }
.tn-lottie svg { display: block; }