/* Wheel Navigator: hub-and-spoke AI Academy map.
   Uses the app's real CSS variables (--surface, --surface-2, --signal,
   --line, --text, --muted, --signal-rgb) -- no new design tokens. */

@keyframes wnavPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--signal-rgb), .45); }
  50% { box-shadow: 0 0 0 8px rgba(var(--signal-rgb), 0); }
}
.orbit-node.mastered { animation: wnavPulse 2.2s ease-in-out infinite; }
.orbit-node:hover { border-color: var(--signal) !important; }

.wnav-optional-badge {
  position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}

.wnav-hud {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
}

.wnav-hud-track { position: relative; justify-self: start; }
.wnav-track-pill {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.wnav-track-pill:hover { border-color: var(--signal); }

.wnav-track-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 180px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.35);
}
.wnav-track-menu button {
  text-align: left; background: none; border: none; color: var(--text);
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-family: inherit;
}
.wnav-track-menu button:hover { background: var(--surface-2); }

.wnav-hud-level { text-align: center; min-width: 140px; }
.wnav-hud-level-label { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12.5px; color: var(--signal); margin-bottom: 4px; }
.wnav-hud-xp-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.wnav-hud-xp-fill { height: 100%; background: var(--signal); border-radius: 999px; transition: width .3s ease; }
.wnav-hud-xp-label { font-size: 10.5px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; }

.wnav-minimap { justify-self: end; width: 52px; height: 52px; }

.wnav-orbit-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  /* Room for .wnav-rewind (top:100% + margin) below the square */
  margin: 0 auto 72px;
  overflow: visible;
}
.wnav-orbit-clearance { height: 0; }

.wnav-rewind {
  /* Sits below the circle entirely (not inside its bounding box) so it never
     overlaps the two spokes nearest the bottom gap -- those can sit as low
     as ~90% of the wrap's height on narrow viewports. */
  position: absolute; left: 50%; top: 100%; margin-top: 14px; transform: translateX(-50%);
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  padding: 8px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.wnav-rewind:disabled { opacity: .3; cursor: default; }

/* Mobile: HUD was a 3-col grid that clipped LEVEL/XP; orbit absolute spokes
   painted under the fixed bottom ribbon without expanding scroll height. */
@media (max-width: 640px) {
  .wnav-hud {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "track map"
      "level level";
    gap: 10px 8px;
    padding: 10px 12px;
  }
  .wnav-hud-track { grid-area: track; min-width: 0; max-width: 100%; }
  .wnav-track-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wnav-hud-level {
    grid-area: level;
    min-width: 0;
    width: 100%;
    text-align: left;
  }
  .wnav-hud-level-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wnav-minimap { grid-area: map; width: 44px; height: 44px; }

  .wnav-orbit-wrap {
    max-width: min(100%, 400px);
    margin: 0 auto 56px;
  }
  /* Extra scroll runway so the hub + bottom spokes clear the sticky ribbon */
  .wnav-orbit-clearance {
    height: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .wnav-spoke-btn {
    width: clamp(52px, 17vw, 72px) !important;
    height: clamp(52px, 17vw, 72px) !important;
    font-size: 10px !important;
  }
  .wnav-spoke-ring {
    width: clamp(58px, 19vw, 78px) !important;
    height: clamp(58px, 19vw, 78px) !important;
  }
  .wnav-hub-dial {
    width: clamp(84px, 26vw, 120px) !important;
    height: clamp(84px, 26vw, 120px) !important;
    font-size: 14px !important;
  }

  /* In-page help marker already exists on this view; FAB covers spoke nodes. */
  body:has(#wnavOrbitWrap) #jrHelpFab {
    display: none !important;
  }
}