.wn-hint {
  position: fixed;
  bottom: 1.2rem;
  right: 1.4rem;
  z-index: 1500;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim, #8B8BA8);
  background: var(--bg-surface, #0a0a12);
  border: 1px solid var(--text-dim, #8B8BA8);
  padding: 0.35rem 0.6rem;
  opacity: 0.55;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.wn-hint:hover {
  opacity: 1;
  color: var(--text-bright, #EDEDF5);
  border-color: var(--accent, #6060cc);
}
.wn-hint kbd {
  color: var(--accent-glow, #7f7fff);
  font-family: inherit;
}

.wn-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  background: rgba(3, 3, 6, 0.78);
  backdrop-filter: blur(2px);
}
.wn-overlay.open { display: flex; }

.wn-panel {
  width: min(540px, 92vw);
  background: var(--bg-surface, #0a0a12);
  border: 1px solid var(--accent, #6060cc);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 30px rgba(127, 127, 255, 0.14);
  font-family: 'Share Tech Mono', monospace;
  animation: wn-in 0.12s ease-out;
}
@keyframes wn-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wn-prompt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--text-dim, #8B8BA8);
}
.wn-prompt .wn-sigil {
  color: var(--accent-glow, #7f7fff);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.wn-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-bright, #EDEDF5);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.06em;
  caret-color: var(--accent-glow, #7f7fff);
}
.wn-input::placeholder { color: var(--text-dim, #8B8BA8); }

.wn-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  max-height: 46vh;
  overflow-y: auto;
}
.wn-item {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 1rem;
  color: var(--text, #C4C4D8);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.wn-item .wn-arrow {
  color: var(--accent, #6060cc);
  opacity: 0;
}
.wn-item .wn-sub {
  margin-left: auto;
  color: var(--text-dim, #8B8BA8);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wn-item.sel,
.wn-item:hover {
  background: rgba(96, 96, 204, 0.14);
  color: var(--text-bright, #EDEDF5);
}
.wn-item.sel .wn-arrow { opacity: 1; }
.wn-item.current .wn-name::after {
  content: ' ·';
  color: var(--accent-glow, #7f7fff);
}
.wn-empty {
  padding: 0.9rem 1rem;
  color: var(--text-dim, #8B8BA8);
  font-size: 12px;
}

.wn-foot {
  display: flex;
  gap: 1.2rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--text-dim, #8B8BA8);
  color: var(--text-dim, #8B8BA8);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.wn-foot kbd { color: var(--text, #C4C4D8); font-family: inherit; }

@media (max-width: 640px) {
  /* the nav bar carries its own [ jump ] on mobile — the floating
     hint would just duplicate it in a corner that's already busy */
  .wn-hint { display: none; }

  .wn-overlay { padding-top: 8vh; }

  /* 16px stops iOS from zooming the page when the field focuses */
  .wn-input { font-size: 16px; }

  .wn-item { padding: 0.7rem 1rem; }  /* comfortable tap targets */
}

@media (hover: none) {
  .wn-foot { display: none; }
}