/**
 * EFFVIT RootPlayBook Search — nav icon + command-palette overlay.
 * The icon sits in the nav pill; the search only appears when opened. Dark card
 * with mint accent (#2fe3a0) to match the site. Scoped under .rpbs- so it can't
 * collide with theme or other plugin styles.
 */

/* ---- nav icon ---- */
.rpbs-navitem { list-style: none; display: flex; align-items: center; }
.rpbs-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9fb1a9;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.rpbs-navbtn:hover,
.rpbs-navbtn:focus-visible {
  color: #2fe3a0;
  background: rgba(47, 227, 160, 0.12);
  outline: none;
}
.rpbs-navic { width: 18px; height: 18px; }

/* ---- overlay ---- */
.rpbs-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147482000; /* below the Feedback survey stack, above page content */
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(64px, 12vh, 160px) 16px 16px;
  background: rgba(6, 12, 10, 0.58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.rpbs-overlay.is-open { display: flex; animation: rpbs-fade 0.14s ease; }
@keyframes rpbs-fade { from { opacity: 0; } to { opacity: 1; } }

.rpbs-modal {
  width: min(640px, 100%);
  animation: rpbs-rise 0.16s ease;
}
@keyframes rpbs-rise { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- search box ---- */
.rpbs-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0f1a15;
  border: 1.6px solid rgba(47, 227, 160, 0.6);
  border-radius: 14px;
  padding: 15px 17px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.rpbs-icon { width: 19px; height: 19px; color: #2fe3a0; flex: none; }
.rpbs-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #eef3f0;
  font-size: 16px;
  line-height: 1.4;
  padding: 0;
  margin: 0;
  box-shadow: none;
  font-family: inherit;
}
.rpbs-input::placeholder { color: #8fa39c; opacity: 1; }
.rpbs-input::-webkit-search-decoration,
.rpbs-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.rpbs-kbd {
  flex: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  color: #9fb1a9;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  padding: 2px 7px;
}

/* ---- results ---- */
.rpbs-panel {
  margin-top: 10px;
  background: #0f1a15;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5);
}
.rpbs-panel:empty { display: none; }

.rpbs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #cdd8d3;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.rpbs-item:last-child { border-bottom: 0; }
.rpbs-item:hover,
.rpbs-item.is-active { background: rgba(47, 227, 160, 0.1); color: #fff; }
.rpbs-item-ic { width: 16px; height: 16px; color: #5f7069; flex: none; }
.rpbs-item:hover .rpbs-item-ic,
.rpbs-item.is-active .rpbs-item-ic { color: #2fe3a0; }
.rpbs-item-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpbs-item-t mark { background: transparent; color: #2fe3a0; font-weight: 700; }
.rpbs-item-k {
  flex: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2fe3a0;
  border: 1px solid rgba(47, 227, 160, 0.3);
  border-radius: 5px;
  padding: 1px 6px;
}
.rpbs-empty { padding: 15px 16px; color: #8fa39c; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .rpbs-overlay.is-open,
  .rpbs-modal { animation: none; }
  .rpbs-navbtn { transition: none; }
}