/* OrbitLab global search palette + inline glossary tooltip.
   Shared component styling (used by every page that loads search.js / has
   inline [data-term] tooltips). Colours come from theme.css tokens. */

/* ---------------- search trigger (in a top bar) ---------------- */
.search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 11px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.search-trigger:hover { border-color: var(--accent); color: var(--text); }
.search-trigger kbd {
  font-family: inherit; font-size: 11px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: var(--bg);
}

/* ---------------- search overlay ---------------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 7, 14, 0.66); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 9vh 16px 16px;
}
.search-overlay[hidden] { display: none; }
.search-box {
  width: 100%; max-width: 640px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden; display: flex; flex-direction: column; max-height: 78vh;
  animation: search-pop 0.14s ease-out;
}
@keyframes search-pop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.search-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search-icon { font-size: 16px; opacity: 0.8; }
.search-input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text); font-size: 17px; font-family: inherit;
}
.search-input::placeholder { color: var(--muted); }
.search-esc { font-family: inherit; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }
.search-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.search-chip {
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
}
.search-chip:hover { color: var(--text); border-color: var(--accent); }
.search-chip.on { background: var(--accent); color: #04121a; border-color: var(--accent); font-weight: 600; }
.search-results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.search-result {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
}
.search-result.active { background: var(--panel-2); }
.res-type {
  flex-shrink: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 3px 7px; border-radius: 5px; margin-top: 2px; font-weight: 600;
  background: rgba(124, 156, 255, 0.16); color: var(--accent-2);
}
.res-planet { background: rgba(77, 208, 225, 0.16); color: var(--accent); }
.res-mission { background: rgba(92, 242, 160, 0.15); color: #5cf2a0; }
.res-glossary { background: rgba(255, 216, 107, 0.16); color: #ffd86b; }
.res-main { display: flex; flex-direction: column; min-width: 0; }
.res-title { font-size: 14.5px; color: var(--text); font-weight: 600; }
.res-summary { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result mark { background: rgba(255, 216, 107, 0.28); color: #ffe6a8; border-radius: 2px; padding: 0 1px; }
.search-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.search-empty-icon { font-size: 26px; color: var(--accent); opacity: 0.8; margin-bottom: 4px; }
.search-empty-title { color: var(--text); font-weight: 600; font-size: 15px; }
.search-empty-hint { font-size: 12.5px; }
.search-foot { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.search-hints kbd { font-family: inherit; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin: 0 1px; }
body.search-open { overflow: hidden; }

/* ---------------- inline glossary terms + tooltip ---------------- */
.term {
  border-bottom: 1px dotted var(--accent); cursor: help;
  color: inherit; text-decoration: none;
}
.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.term-tip {
  position: absolute; z-index: 70; max-width: 280px;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 9px;
  padding: 10px 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  font-size: 13px; line-height: 1.5; color: var(--text); pointer-events: none;
}
.term-tip[hidden] { display: none; }
.term-tip strong { display: block; color: var(--accent); margin-bottom: 3px; font-size: 13px; }
.term-tip span { color: var(--text-soft); }

@media (max-width: 820px) {
  .search-trigger-label { display: none; }
}