/* whatimado-map — full-height background; graph renders in upper band only */
whatimado-map {
  display: block;
  position: absolute;
  top: 0;
  left: var(--v2-center-gutter);
  right: var(--v2-center-gutter);
  height: var(--v2-map-band-h);
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

body.v2-app[data-phase="open"] {
  --v2-map-graph-shift-y: 0;
}

body.v2-app.is-hero-dismissing {
  --v2-map-graph-shift-y: 0;
}

body.v2-app[data-phase="open"]:not(.is-hero-dismissing) whatimado-map {
  --v2-map-svg-h: calc(
    var(--whatimado-frame-top-default) - var(--v2-kicker-reserve) - var(--v2-hero-node-gap)
      + var(--v2-map-band-offset-top)
  );
}

body.v2-app[data-phase="open"]:not(.is-hero-dismissing) whatimado-map .whatimado-map__stage {
  top: var(--v2-map-band-offset-top);
}

/*
 * Chat and missions: the stage is only the gap above the prompt frame.
 * --v2-docked-frame-top is the frame's top (set while the frame moves).
 */
body.v2-app.is-hero-dismissing whatimado-map,
body.v2-app:not([data-phase="open"]) whatimado-map {
  --v2-map-svg-h: calc(var(--v2-docked-frame-top, var(--whatimado-frame-top-default)) - var(--v2-map-frame-clearance));
}

/* Desktop: the map fills the column and slides under the frosted prompt. */
@media (min-width: 901px) {
  body.v2-app:not([data-phase="open"]) whatimado-map,
  body.v2-app.is-hero-dismissing whatimado-map {
    height: 100%;
    --v2-map-svg-h: 100%;
  }
}

body.v2-app.is-hero-dismissing whatimado-map .whatimado-map__stage,
body.v2-app:not([data-phase="open"]) whatimado-map .whatimado-map__stage {
  top: 0;
}

whatimado-map .whatimado-map__chrome {
  position: absolute;
  top: 0.55rem;
  left: 0.7rem;
  right: 0.65rem;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
}

.whatimado-map__roadmap-sticky {
  flex: 0 1 auto;
  align-self: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: auto;
  height: 2.2rem;
  max-width: min(34%, 14rem);
  margin: 0;
  padding: 0 0.5rem;
  color: var(--v2-yellow);
  font-family: var(--v2-font-hero);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  background: #060a0c;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-btn-radius);
  box-shadow: var(--v2-frame-shadow);
}

.whatimado-map__roadmap-sticky[hidden] {
  display: none !important;
}

/* The roadmap title and timeline stay in the layout (only unseen) so the map fit and every node keep their place. */
whatimado-map .whatimado-map__chrome .whatimado-map__roadmap-sticky,
whatimado-map .whatimado-map__chrome #map-timeline {
  visibility: hidden;
  pointer-events: none;
}

whatimado-map .whatimado-map__timeline-col,
whatimado-map .whatimado-map__timeline-col:has(#map-timeline:not([hidden])) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 0;
  max-width: none;
  width: auto;
  margin-left: 0;
  pointer-events: none;
}

whatimado-map .whatimado-map__timeline-col #map-timeline {
  order: 0;
  flex: 1 1 auto;
  height: 2.2rem;
  min-height: 0;
}

whatimado-map .whatimado-map__timeline-tools {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  pointer-events: none;
}

whatimado-map .v2-timeline__label {
  font-size: 0.64rem;
}

whatimado-map .v2-timeline__name {
  font-size: 0.58rem;
}

whatimado-map .whatimado-map__chrome .whatimado-map__new-roadmap,
whatimado-map .whatimado-map__chrome .whatimado-map__you-btn,
whatimado-map .whatimado-map__chrome .whatimado-map__link-btn,
whatimado-map .whatimado-map__chrome .v2-map-timeline {
  pointer-events: auto;
}

whatimado-map .whatimado-map__chrome .whatimado-map__new-roadmap,
whatimado-map .whatimado-map__chrome .whatimado-map__you-btn,
whatimado-map .whatimado-map__chrome .whatimado-map__link-btn {
  position: static;
  top: auto;
  right: auto;
}

whatimado-map[data-mode="ghost"],
whatimado-map[data-mode="faint"],
whatimado-map[data-mode="visible"] {
  opacity: 1;
}

whatimado-map[data-mode="ghost"] .whatimado-map__pan-surface,
whatimado-map[data-mode="faint"] .whatimado-map__pan-surface,
whatimado-map[data-mode="visible"] .whatimado-map__pan-surface,
whatimado-map[data-mode="ghost"] .whatimado-map__stage,
whatimado-map[data-mode="faint"] .whatimado-map__stage,
whatimado-map[data-mode="visible"] .whatimado-map__stage,
whatimado-map[data-mode="ghost"] .whatimado-map__svg,
whatimado-map[data-mode="faint"] .whatimado-map__svg,
whatimado-map[data-mode="visible"] .whatimado-map__svg {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

whatimado-map .whatimado-map__pan {
  will-change: transform;
}

whatimado-map.is-panning,
whatimado-map.is-panning .whatimado-map__pan-surface,
whatimado-map.is-panning .whatimado-map__stage,
whatimado-map.is-panning .whatimado-map__svg {
  cursor: grabbing;
}

body.v2-app.is-frame-dragging whatimado-map,
body.v2-app.is-frame-dragging whatimado-map * {
  pointer-events: none !important;
}

body.v2-app.is-frame-dragging whatimado-map .whatimado-map__stage {
  transition: none;
}

/*
 * Stage/SVG accept hits so node :hover / pointerenter work.
 * Empty map band still pans via main; pan-surface covers below the stage.
 */
whatimado-map[data-mode="ghost"] .whatimado-map__stage,
whatimado-map[data-mode="faint"] .whatimado-map__stage,
whatimado-map[data-mode="visible"] .whatimado-map__stage {
  pointer-events: auto;
}

whatimado-map .whatimado-map__pan-surface {
  position: absolute;
  inset: 0;
  z-index: 1;
}

whatimado-map[data-mode="ghost"] .whatimado-map__svg,
whatimado-map[data-mode="faint"] .whatimado-map__svg,
whatimado-map[data-mode="visible"] .whatimado-map__svg {
  pointer-events: auto;
}

whatimado-map .whatimado-map__layer--ghost,
whatimado-map .whatimado-map__edge--ghost,
whatimado-map .whatimado-map__edge--live {
  pointer-events: none;
}

whatimado-map .whatimado-map__new-roadmap {
  display: none !important;
}

body.v2-app whatimado-map .whatimado-map__new-roadmap {
  border-radius: var(--v2-btn-radius);
}

whatimado-map .whatimado-map__you-btn {
  z-index: 8;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v2-border);
  border-radius: 50%;
  background: var(--v2-glass-bg);
  backdrop-filter: blur(var(--v2-glass-blur)) saturate(var(--v2-glass-saturate));
  -webkit-backdrop-filter: blur(var(--v2-glass-blur)) saturate(var(--v2-glass-saturate));
  color: var(--v2-yellow);
  cursor: pointer;
  pointer-events: auto;
}

body.v2-app whatimado-map .whatimado-map__you-btn {
  border-radius: 50%;
}

whatimado-map .whatimado-map__you-crosshair {
  display: block;
  width: 1.12rem;
  height: 1.12rem;
}

whatimado-map .whatimado-map__badge--waiting circle {
  fill: rgba(8, 14, 16, 0.92);
  stroke: rgba(245, 213, 71, 0.85);
  stroke-width: 1.2;
}

whatimado-map .whatimado-map__badge--waiting text {
  fill: rgba(245, 213, 71, 0.95);
  font-size: 9px;
  font-weight: 700;
}

whatimado-map .whatimado-map__node--live.is-waiting .whatimado-map__node-body {
  stroke: rgba(245, 213, 71, 0.55);
}

whatimado-map .whatimado-map__you-btn:hover,
whatimado-map .whatimado-map__you-btn.is-active {
  background: rgba(4, 12, 14, calc(var(--v2-glass-alpha) + 0.12));
  color: var(--v2-yellow-bright);
  border-color: rgba(245, 213, 71, 0.7);
}

whatimado-map .whatimado-map__link-btn {
  z-index: 8;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v2-border);
  border-radius: 50%;
  background: var(--v2-glass-bg);
  backdrop-filter: blur(var(--v2-glass-blur)) saturate(var(--v2-glass-saturate));
  -webkit-backdrop-filter: blur(var(--v2-glass-blur)) saturate(var(--v2-glass-saturate));
  color: rgba(232, 244, 242, 0.72);
  cursor: pointer;
  pointer-events: auto;
}

body.v2-app whatimado-map .whatimado-map__link-btn {
  border-radius: 50%;
}

whatimado-map .whatimado-map__link-icon {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
}

whatimado-map .whatimado-map__link-btn.is-linked {
  color: var(--v2-yellow);
  border-color: rgba(245, 213, 71, 0.7);
}

whatimado-map .whatimado-map__link-btn.is-linked .whatimado-map__link-icon--on,
whatimado-map .whatimado-map__link-btn:not(.is-linked) .whatimado-map__link-icon--off {
  display: block;
}

whatimado-map .whatimado-map__link-btn:hover {
  color: var(--v2-yellow-bright);
}

whatimado-map .whatimado-map__help-btn {
  z-index: 8;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v2-border);
  border-radius: 50%;
  background: var(--v2-glass-bg);
  backdrop-filter: blur(var(--v2-glass-blur)) saturate(var(--v2-glass-saturate));
  -webkit-backdrop-filter: blur(var(--v2-glass-blur)) saturate(var(--v2-glass-saturate));
  color: rgba(232, 244, 242, 0.72);
  cursor: pointer;
  pointer-events: auto;
}

body.v2-app whatimado-map .whatimado-map__help-btn,
body.v2-app .v2-map-help__close {
  border-radius: 50%;
}

whatimado-map .whatimado-map__help-btn:hover {
  color: var(--v2-yellow-bright);
}

whatimado-map .whatimado-map__help-icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 900px) {
  whatimado-map .whatimado-map__chrome > .whatimado-map__help-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.75rem;
    height: 1.75rem;
  }

  whatimado-map .whatimado-map__chrome > .whatimado-map__help-btn .whatimado-map__help-icon {
    width: 0.9rem;
    height: 0.9rem;
  }
}

.v2-map-help {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 1.5rem;
  border: 0;
  background: rgba(3, 8, 10, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--v2-text, #e8f4f2);
}

.v2-map-help[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-map-help::backdrop {
  background: transparent;
}

.v2-map-help__text {
  max-width: 30rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  text-align: center;
}

.v2-map-help__close {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  right: max(0.9rem, env(safe-area-inset-right));
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v2-border);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.v2-map-help__close:hover {
  color: var(--v2-yellow-bright);
}

.v2-map-help__close svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

whatimado-map[data-mode="ghost"],
whatimado-map[data-mode="faint"],
whatimado-map[data-mode="visible"] {
  pointer-events: none;
}

whatimado-map .whatimado-map__node--live {
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

whatimado-map .whatimado-map__node--live:focus,
whatimado-map .whatimado-map__node--live:focus-visible {
  outline: none;
}

whatimado-map .whatimado-map__node--live.is-dragging {
  cursor: grabbing;
}

/* Unscaled hit pad — body is visual-only at scale(0.5) */
whatimado-map .whatimado-map__node-hit {
  fill: rgba(0, 0, 0, 0.001);
  stroke: none;
  pointer-events: all;
  cursor: pointer;
}

/*
 * Idle float — CSS only, no pointer required. Lives on a wrapper so hover/select
 * scale (transform on .whatimado-map__node-body) cannot replace this animation.
 */
whatimado-map .whatimado-map__node-float {
  --node-float-amp: -12px;
  transform-box: fill-box;
  transform-origin: center;
  animation-name: whatimado-node-float;
  animation-duration: var(--node-float-duration, 4.2s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--node-float-delay, 0s);
  animation-play-state: running;
}

whatimado-map .whatimado-map__node--live:hover .whatimado-map__node-float,
whatimado-map .whatimado-map__node--live.is-hover .whatimado-map__node-float,
whatimado-map .whatimado-map__node--live.is-selected .whatimado-map__node-float,
whatimado-map .whatimado-map__node--live.is-dragging .whatimado-map__node-float,
whatimado-map .whatimado-map__node--live.is-path-preview .whatimado-map__node-float {
  animation-play-state: running;
}

@keyframes whatimado-node-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, var(--node-float-amp, -12px), 0);
  }
}

whatimado-map .whatimado-map__node--live.is-entering {
  animation: whatimado-node-enter 0.52s ease-out both;
}

@keyframes whatimado-node-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

whatimado-map.is-dismissing-ghost .whatimado-map__layer--ghost {
  opacity: 0;
  transition: opacity 0.45s ease;
}

whatimado-map.is-ghost-dismissed .whatimado-map__layer--ghost {
  display: none;
}

whatimado-map[data-reading-pinned="1"] .whatimado-map__stage,
whatimado-map[data-focus-pinned="1"] .whatimado-map__stage {
  transition: none;
}

whatimado-map .whatimado-map__stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--v2-map-svg-h);
  z-index: 2;
  overflow: visible;
  transition:
    height var(--v2-hero-motion-duration) var(--v2-hero-motion-ease),
    top var(--v2-hero-motion-duration) var(--v2-hero-motion-ease),
    filter var(--v2-hero-motion-duration) var(--v2-hero-motion-ease);
  filter:
    brightness(calc(1 - var(--v2-map-dim, 0) * 0.38))
    saturate(calc(1 - var(--v2-map-dim, 0) * 0.22))
    blur(calc(var(--v2-map-dim, 0) * 0.6px));
}

whatimado-map .whatimado-map__stage,
whatimado-map .whatimado-map__svg {
  width: 100%;
}

whatimado-map .whatimado-map__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  overflow: visible;
}

whatimado-map .whatimado-map__layer--ghost,
whatimado-map .whatimado-map__layer--live {
  opacity: 1;
}

whatimado-map .whatimado-map__layer--live {
  isolation: isolate;
}

/* Dotted connectors between path nodes */
whatimado-map .whatimado-map__edge--ghost,
whatimado-map .whatimado-map__edge--live {
  fill: none;
  stroke: var(--v2-teal);
  stroke-width: var(--v2-map-edge-width, 1.45);
  stroke-linecap: round;
  stroke-dasharray: 1.35 5.75;
  opacity: 1;
}

/* Node map stays fully opaque — glass applies to frame/sidebars only */
whatimado-map .whatimado-map__node-body,
whatimado-map .whatimado-map__node--live text {
  opacity: 1;
}

/* Shared node body — visual scale only; layout radius stays constant */
whatimado-map .whatimado-map__node-body {
  stroke: none;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    stroke-width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1),
    filter 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

whatimado-map .whatimado-map__node--live.is-support .whatimado-map__node-body {
  fill: var(--v2-teal);
  transform: scale(0.78);
  stroke: #8a9399;
  stroke-width: 0.75;
}

whatimado-map .whatimado-map__node--live.is-support.is-start .whatimado-map__node-body {
  transform: scale(1);
}

whatimado-map .whatimado-map__node--live.is-roadmap .whatimado-map__node-body {
  transform: scale(0.96);
}

whatimado-map .whatimado-map__node--live.is-mission .whatimado-map__node-body {
  transform: scale(0.84);
}

whatimado-map .whatimado-map__node--live.is-task .whatimado-map__node-body {
  transform: scale(0.7);
}

/*
 * Phone roadmap: every dot paints at the open mission's size (the home sample's mission dot).
 * --v2-dot-even undoes each kind's rest scale so they all land on the mission's 0.84.
 */
@media (max-width: 900px) {
  whatimado-map.is-roadmap-open .whatimado-map__node--live {
    --v2-dot-even: 1.077;
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-start {
    --v2-dot-even: 0.84;
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-roadmap {
    --v2-dot-even: 0.875;
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-roadmap.is-alternate {
    --v2-dot-even: 1.215;
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-roadmap.is-selected {
    --v2-dot-even: 0.689;
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-mission {
    --v2-dot-even: 1;
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-task {
    --v2-dot-even: 1.2;
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live:not(.is-more) :is(.whatimado-map__node-body, .whatimado-map__node-aura) {
    transform-box: fill-box;
    transform-origin: center;
    scale: calc(var(--v2-roadmap-dot-boost, 1) * var(--v2-dot-even, 1));
  }

  whatimado-map.is-roadmap-open .whatimado-map__edge--live {
    stroke-width: calc(var(--v2-map-edge-width, 1.45) * 2.4);
  }
}

whatimado-map .whatimado-map__node--live.is-more .whatimado-map__node-body {
  fill: transparent;
  stroke: var(--v2-teal);
  stroke-width: 1.2;
  transform: none;
}

whatimado-map .whatimado-map__node--live.is-complete .whatimado-map__node-body {
  fill: var(--v2-yellow);
  stroke: none;
}

whatimado-map .whatimado-map__node--live.is-complete text {
  fill: var(--v2-yellow);
}

whatimado-map .whatimado-map__node--live.is-selected .whatimado-map__node-body {
  fill: var(--v2-yellow);
  transform: scale(1.22);
  stroke: none;
  stroke-width: 0;
}

whatimado-map .whatimado-map__node--live.is-more .whatimado-map__node-body,
whatimado-map .whatimado-map__node--live.is-more.is-selected .whatimado-map__node-body {
  fill: rgba(6, 10, 12, 0.9);
  stroke: rgba(215, 255, 246, 0.45);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  transform: none;
}

whatimado-map .whatimado-map__node--live text {
  font-size: 12.5px;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  stroke: #060a0c;
  stroke-width: 1px;
  paint-order: stroke fill;
  stroke-linejoin: round;
  font-family: var(--v2-font-hero);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: all;
  cursor: pointer;
  transition: fill 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

whatimado-map .whatimado-map__leader {
  stroke: rgba(46, 232, 214, 0.55);
  stroke-width: 1px;
  stroke-dasharray: 2 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  fill: none;
  pointer-events: none;
}

whatimado-map .whatimado-map__node--live.is-selected .whatimado-map__leader {
  stroke: rgba(245, 213, 71, 0.75);
}

whatimado-map .whatimado-map__node--live.is-support text {
  fill: var(--v2-teal);
}

whatimado-map .whatimado-map__node--live.is-more .whatimado-map__plus line {
  stroke: var(--v2-text, #e8fff8);
  stroke-width: 1.7px;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
}

whatimado-map .whatimado-map__node--live.is-selected text {
  fill: var(--v2-yellow);
  font-weight: 600;
}

whatimado-map .whatimado-map__node--live.is-label-crowded text {
  visibility: hidden;
}

whatimado-map .whatimado-map__node--live.is-kicker-off .whatimado-map__kicker {
  display: none;
}

whatimado-map .whatimado-map__node--live text.whatimado-map__kicker {
  fill: var(--v2-text-muted, #9aa8a6);
  font-weight: 500;
  letter-spacing: 0.14em;
}

whatimado-map .whatimado-map__node--live.is-alternate .whatimado-map__node-float {
  visibility: hidden;
}

whatimado-map.is-roadmap-open .whatimado-map__node--live.is-alternate .whatimado-map__node-float,
whatimado-map:has(.whatimado-map__node--live.is-roadmap.is-selected) .whatimado-map__node--live.is-alternate .whatimado-map__node-float,
whatimado-map .whatimado-map__node--live.is-alternate.is-focused .whatimado-map__node-float,
whatimado-map .whatimado-map__node--live.is-alternate.is-selected .whatimado-map__node-float {
  visibility: visible;
}

whatimado-map .whatimado-map__edge.is-alternate-edge {
  visibility: hidden;
}

whatimado-map.is-roadmap-open .whatimado-map__edge.is-alternate-edge,
whatimado-map:has(.whatimado-map__node--live.is-roadmap.is-selected) .whatimado-map__edge.is-alternate-edge,
whatimado-map .whatimado-map__edge.is-alternate-edge.is-revealed {
  visibility: visible;
}

whatimado-map .whatimado-map__node--live.is-roadmap.is-alternate .whatimado-map__node-body {
  fill: #8d95a5;
  stroke: #6d7580;
  stroke-width: 0.7;
}

whatimado-map .whatimado-map__node--live.is-alternate text {
  fill: #b7bec8;
  font-weight: 500;
}

whatimado-map .whatimado-map__node--live.is-focused:not(.is-selected) .whatimado-map__node-body {
  stroke: var(--v2-yellow);
  stroke-width: 1.15;
}

whatimado-map .whatimado-map__node--live[data-node-id="option-settings"] text,
whatimado-map .whatimado-map__node--live[data-node-id="option-analytics"] text {
  visibility: visible;
}

/* Soft diffused neon aura — selected path only */
whatimado-map .whatimado-map__node-aura {
  fill: rgba(245, 213, 71, 0.65);
  stroke: none;
  pointer-events: none;
  opacity: 0;
  filter: url(#whatimado-node-aura);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

whatimado-map .whatimado-map__node--live.is-selected .whatimado-map__node-aura {
  opacity: 1;
  animation: whatimado-anchor-aura-breathe 3.6s ease-in-out infinite;
}

/* You node — selected by default until a path node is chosen */
whatimado-map:not(:has(.whatimado-map__node--live.is-selected)) .whatimado-map__node--live.is-start .whatimado-map__node-body {
  fill: var(--v2-yellow);
  transform: scale(1);
  stroke: none;
  stroke-width: 0;
}

whatimado-map:not(:has(.whatimado-map__node--live.is-selected)) .whatimado-map__node--live.is-start text {
  fill: var(--v2-yellow);
  font-weight: 600;
}

whatimado-map:not(:has(.whatimado-map__node--live.is-selected)) .whatimado-map__node--live.is-start .whatimado-map__node-aura {
  opacity: 1;
  animation: whatimado-anchor-aura-breathe 3.6s ease-in-out infinite;
}

@keyframes whatimado-anchor-aura-breathe {
  0%,
  100% {
    opacity: 0.48;
  }
  50% {
    opacity: 0.78;
  }
}

/*
 * Hover / drag / path-card preview — spring pop from rest scale(0.5) + breathing glow.
 * Driven by .is-hover (map geometry), .is-dragging (touch pull) and .is-path-preview
 * (path cards). A pulled node stays lit for the whole drag and spring back home.
 */
whatimado-map .whatimado-map__node--live.is-support:not(.is-start):not(.is-selected):hover .whatimado-map__node-body,
whatimado-map .whatimado-map__node--live.is-support.is-hover:not(.is-start):not(.is-selected) .whatimado-map__node-body,
whatimado-map .whatimado-map__node--live.is-support.is-dragging:not(.is-start):not(.is-selected) .whatimado-map__node-body,
whatimado-map .whatimado-map__node--live.is-support.is-path-preview:not(.is-start):not(.is-selected) .whatimado-map__node-body {
  fill: var(--node-accent, #7dffef);
  /* Stays below the selected scale(1) so selection remains visually dominant */
  transform: scale(0.92);
  stroke: color-mix(in srgb, var(--node-accent, #7dffef) 82%, white);
  stroke-width: 1.25;
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--node-accent, #42fff0) 95%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--node-accent, #2ee8d6) 78%, transparent))
    drop-shadow(0 0 28px color-mix(in srgb, var(--node-accent, #2ee8d6) 52%, transparent));
}

whatimado-map .whatimado-map__node--live.is-support:not(.is-start):not(.is-selected):hover text,
whatimado-map .whatimado-map__node--live.is-support.is-hover:not(.is-start):not(.is-selected) text,
whatimado-map .whatimado-map__node--live.is-support.is-dragging:not(.is-start):not(.is-selected) text,
whatimado-map .whatimado-map__node--live.is-support.is-path-preview:not(.is-start):not(.is-selected) text {
  fill: var(--node-accent, #7dffef);
  font-weight: 600;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--node-accent, #42fff0) 70%, transparent));
}

whatimado-map .whatimado-map__node--live.is-support:not(.is-start):not(.is-selected):hover .whatimado-map__node-aura,
whatimado-map .whatimado-map__node--live.is-support.is-hover:not(.is-start):not(.is-selected) .whatimado-map__node-aura,
whatimado-map .whatimado-map__node--live.is-support.is-dragging:not(.is-start):not(.is-selected) .whatimado-map__node-aura,
whatimado-map .whatimado-map__node--live.is-support.is-path-preview:not(.is-start):not(.is-selected) .whatimado-map__node-aura {
  fill: var(--node-accent, #42fff0);
  opacity: 0.88;
  animation: whatimado-path-preview-aura 2.4s ease-in-out infinite;
}

@keyframes whatimado-path-preview-aura {
  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 0.85;
  }
}

/*
 * Selection inherits the hover bloom in yellow, so the glow raised on hover carries
 * through the click instead of snapping off. Yellow stays reserved for selection.
 */
whatimado-map .whatimado-map__node--live.is-selected .whatimado-map__node-body {
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--v2-yellow) 95%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--v2-yellow) 72%, transparent))
    drop-shadow(0 0 28px color-mix(in srgb, var(--v2-yellow) 48%, transparent));
}

/* The user's current path on an open roadmap: You, the open mission, and a clicked task */
whatimado-map.is-roadmap-open .whatimado-map__node--live.is-trail-node .whatimado-map__node-body {
  fill: var(--v2-yellow);
  stroke: none;
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--v2-yellow) 95%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--v2-yellow) 72%, transparent))
    drop-shadow(0 0 28px color-mix(in srgb, var(--v2-yellow) 48%, transparent));
}

whatimado-map.is-roadmap-open .whatimado-map__node--live.is-trail-node .whatimado-map__node-aura {
  opacity: 1;
  animation: whatimado-anchor-aura-breathe 3.6s ease-in-out infinite;
}

/* A trail node stays yellow while it is hovered or pulled */
whatimado-map.is-roadmap-open .whatimado-map__node--live.is-support.is-trail-node:not(.is-start):not(.is-selected):is(:hover, .is-hover, .is-dragging, .is-path-preview) .whatimado-map__node-body {
  fill: var(--v2-yellow);
}

whatimado-map.is-roadmap-open .whatimado-map__node--live.is-support.is-trail-node:not(.is-start):not(.is-selected):is(:hover, .is-hover, .is-dragging, .is-path-preview) .whatimado-map__node-aura {
  fill: var(--v2-yellow);
}

/* Titles on the path glow gold. The small Mission and Roadmaps labels above them keep their color. */
whatimado-map.is-roadmap-open .whatimado-map__node--live:is(.is-trail-node, .is-selected):not(.is-start) text.whatimado-map__label,
whatimado-map.is-roadmap-open .whatimado-map__node--live.is-support.is-trail-node:not(.is-start):not(.is-selected):is(:hover, .is-hover, .is-dragging, .is-path-preview) text.whatimado-map__label {
  fill: var(--v2-yellow);
  font-weight: 600;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--v2-yellow) 70%, transparent));
}

whatimado-map.is-roadmap-open .whatimado-map__edge--live.is-trail {
  stroke: var(--v2-yellow);
  stroke-width: calc(var(--v2-map-edge-width, 1.45) * 2.4);
  stroke-dasharray: none;
  filter:
    drop-shadow(0 0 2px color-mix(in srgb, var(--v2-yellow) 90%, transparent))
    drop-shadow(0 0 7px color-mix(in srgb, var(--v2-yellow) 60%, transparent));
}

/* Phone roadmap: every dot and title off the path shares one full teal, alternate roadmaps included. */
@media (max-width: 900px) {
  whatimado-map.is-roadmap-open .whatimado-map__node--live:not(.is-selected, .is-trail-node, .is-complete, .is-more) .whatimado-map__node-body {
    fill: var(--v2-teal);
    stroke: none;
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live:not(.is-selected, .is-trail-node, .is-complete, .is-more) text.whatimado-map__label {
    fill: var(--v2-teal);
  }

  /* An open task is a ring with the page color inside, so no line shows through. A ticked task fills yellow. */
  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-task:not(.is-complete) .whatimado-map__node-body,
  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-task.is-support:not(.is-complete):not(.is-start):not(.is-selected):is(:hover, .is-hover, .is-dragging, .is-path-preview) .whatimado-map__node-body {
    fill: var(--v2-bg);
    stroke: var(--v2-teal);
    stroke-width: calc(var(--v2-map-node-lg, 17) * 0.3);
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-task.is-trail-node:not(.is-complete) .whatimado-map__node-body,
  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-task.is-trail-node.is-support:not(.is-complete):not(.is-start):not(.is-selected):is(:hover, .is-hover, .is-dragging, .is-path-preview) .whatimado-map__node-body {
    stroke: var(--v2-yellow);
  }

  /* Thumb-sized targets: the dot's hit circle grows, and each title gets its own padded box. */
  whatimado-map.is-roadmap-open .whatimado-map__node-hit {
    transform-box: fill-box;
    transform-origin: center;
    scale: var(--v2-roadmap-hit-scale, 1);
  }

  /* The plus is a full-size teal dot with a dark plus inside. */
  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-more .whatimado-map__node-body,
  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-more.is-selected .whatimado-map__node-body {
    fill: var(--v2-teal);
    stroke: none;
    transform-box: fill-box;
    transform-origin: center;
    scale: var(--v2-roadmap-plus-scale, 1);
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-more .whatimado-map__plus {
    transform-box: fill-box;
    transform-origin: center;
    scale: var(--v2-roadmap-plus-scale, 1);
  }

  whatimado-map.is-roadmap-open .whatimado-map__node--live.is-more .whatimado-map__plus line {
    stroke: var(--v2-bg);
  }
}

whatimado-map .whatimado-map__label-hit {
  fill: rgba(0, 0, 0, 0.001);
  stroke: none;
  pointer-events: all;
  cursor: pointer;
}

/* Hovering or pulling the selected node lifts that same glow rather than replacing it */
whatimado-map .whatimado-map__node--live.is-selected.is-hover .whatimado-map__node-body,
whatimado-map .whatimado-map__node--live.is-selected.is-dragging .whatimado-map__node-body,
whatimado-map .whatimado-map__node--live.is-selected.is-path-preview .whatimado-map__node-body {
  stroke: color-mix(in srgb, var(--v2-yellow) 80%, white);
  stroke-width: 1.25;
  filter:
    drop-shadow(0 0 9px var(--v2-yellow))
    drop-shadow(0 0 24px color-mix(in srgb, var(--v2-yellow) 85%, transparent))
    drop-shadow(0 0 40px color-mix(in srgb, var(--v2-yellow) 55%, transparent));
}

whatimado-map .whatimado-map__node--live.is-selected.is-hover .whatimado-map__node-aura,
whatimado-map .whatimado-map__node--live.is-selected.is-dragging .whatimado-map__node-aura,
whatimado-map .whatimado-map__node--live.is-selected.is-path-preview .whatimado-map__node-aura {
  animation-name: whatimado-path-preview-aura;
  animation-duration: 2.4s;
}

/*
 * Reduced motion tones down travel and spring, not the glow. Colour and opacity
 * cross-fades are not vestibular triggers, so hover/selected auras keep fading
 * and breathing — only the scale pop shrinks and the spring easing flattens.
 */
@media (prefers-reduced-motion: reduce) {
  whatimado-map,
  whatimado-map .whatimado-map__layer--ghost {
    transition: none;
  }

  whatimado-map .whatimado-map__stage {
    transition: filter 0.15s ease;
  }

  whatimado-map .whatimado-map__node-body {
    transition:
      fill 0.35s ease,
      stroke 0.35s ease,
      stroke-width 0.35s ease,
      transform 0.35s ease,
      filter 0.45s ease;
  }

  whatimado-map .whatimado-map__node--live.is-selected .whatimado-map__node-aura,
  whatimado-map .whatimado-map__node--live.is-current .whatimado-map__node-aura,
  whatimado-map:not(:has(.whatimado-map__node--live.is-selected)) .whatimado-map__node--live.is-start .whatimado-map__node-aura {
    animation-duration: 6s;
  }

  whatimado-map .whatimado-map__node--live.is-support:not(.is-start):not(.is-selected):hover .whatimado-map__node-body,
  whatimado-map .whatimado-map__node--live.is-support.is-hover:not(.is-start):not(.is-selected) .whatimado-map__node-body,
  whatimado-map .whatimado-map__node--live.is-support.is-dragging:not(.is-start):not(.is-selected) .whatimado-map__node-body,
  whatimado-map .whatimado-map__node--live.is-support.is-path-preview:not(.is-start):not(.is-selected) .whatimado-map__node-body {
    transform: scale(0.78);
  }

  whatimado-map .whatimado-map__node--live.is-support:not(.is-start):not(.is-selected):hover .whatimado-map__node-aura,
  whatimado-map .whatimado-map__node--live.is-support.is-hover:not(.is-start):not(.is-selected) .whatimado-map__node-aura,
  whatimado-map .whatimado-map__node--live.is-support.is-dragging:not(.is-start):not(.is-selected) .whatimado-map__node-aura,
  whatimado-map .whatimado-map__node--live.is-support.is-path-preview:not(.is-start):not(.is-selected) .whatimado-map__node-aura {
    animation-duration: 4.2s;
  }

  whatimado-map .whatimado-map__node--live.is-selected.is-hover .whatimado-map__node-aura,
  whatimado-map .whatimado-map__node--live.is-selected.is-dragging .whatimado-map__node-aura,
  whatimado-map .whatimado-map__node--live.is-selected.is-path-preview .whatimado-map__node-aura {
    animation-duration: 4.2s;
  }

  /* Keep the idle bob running; only shorten travel so it is not a large pan */
  whatimado-map .whatimado-map__node-float {
    --node-float-amp: -8px;
  }
}