/* ─────────────────────────────────────────────────────────────────
   css/board-search.css

   Topbar board search (js/builder/board-search.js): the #boardNameInput
   search-first dropdown and the rename-mode cue (rename = double-click).

   z-index: the listbox MUST clear the topbar dropdown panels —
   .topbar-dropdown-panel and the open .topbar-dropdown stack at 10050
   (smart-templates.css). 10060 wins without entering an arms race.

   LABEL: PILOT-READY (ships with board-search.js).
───────────────────────────────────────────────────────────────── */

/* (2026-06-11: the ✏️ pencil button was removed per Luke — rename is
   a double-click on the input now. Cue styles below still apply.)
   NOT a topbar action button (set stays Device|Worksheet|Import|Game). */

/* Rename mode — unmistakable amber cue so "I am editing the NAME"
   never gets confused with "I am searching". */
.board-name-input.is-renaming {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
  background: #fffbeb;
  /* base input text is var(--nav-text) (light, dark topbar) — the
     cream rename background needs dark ink or the name vanishes. */
  color: var(--ink,#1a1a2e);
}

/* ── Results listbox ─────────────────────────────────────────── */
#boardSearchListbox {
  position: fixed;
  z-index: 10060; /* > 10050 .topbar-dropdown-panel (smart-templates.css) */
  background: var(--surface,#fff);
  border: 1px solid var(--ink-muted, #e2e2e7);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  padding: 0.35rem;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  font-family: inherit;
}
#boardSearchListbox[hidden] { display: none; }

.bsr-group {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color:var(--ink-muted);
  padding: 0.45rem 0.6rem 0.2rem;
  user-select: none;
}

/* Result rows — 44px touch targets, keyboard navigable. */
.bsr-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}
.bsr-row:hover,
.bsr-row[aria-selected="true"] {
  background: #f3f1ff;
}
.bsr-row[aria-selected="true"] {
  box-shadow: inset 0 0 0 2px rgba(124, 92, 255, 0.35);
}

.bsr-icon { font-size: 1.15rem; flex-shrink: 0; }

.bsr-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bsr-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink, #1f1f23);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bsr-meta { font-size: 0.72rem; color:var(--ink-muted); }

/* Source chip — Mine vs Template. */
.bsr-chip {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  user-select: none;
}
.bsr-chip-mine { background: #e0edff; color: #6D28D9; }
.bsr-chip-tpl  { background: #ede9fe; color: #6d28d9; }

/* Per-row action buttons (Remix / Use). */
.bsr-action {
  flex-shrink: 0;
  border: 1px solid #d1d5db;
  background: var(--surface,#fff);
  color:var(--ink-soft);
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
  min-height: 30px;
}
.bsr-action:hover { background: var(--surface,#fff); border-color:var(--ink-muted); }
.bsr-action-primary {
  border-color: #7c5cff;
  background: #7c5cff;
  color: #fff;
}
.bsr-action-primary:hover { background: #6a4af2; border-color: #6a4af2; }

.bsr-empty {
  padding: 0.9rem 0.7rem;
  font-size: 0.85rem;
  color:var(--ink-muted);
  text-align: center;
}

.bsr-more {
  padding: 0.45rem 0.6rem 0.5rem;
  font-size: 0.74rem;
  color:var(--ink-muted);
  text-align: center;
  user-select: none;
}