/* ═══════════════════════════════════════════════════════════
   stencils.css — Stencil library panel (Panel A)
   ═══════════════════════════════════════════════════════════ */

/* ── Tab bar ── */
#e7_lib_tabs {
  display:    flex;
  gap:        0;
  border-bottom: var(--border-dim);
  flex-shrink: 0;
}

.e7_tab {
  padding:        6px 14px;
  font-size:      0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:         pointer;
  color:          var(--text-secondary);
  border-bottom:  2px solid transparent;
  transition:     all 0.15s;
}

.e7_tab.active {
  color:         var(--green);
  border-color:  var(--green);
}

.e7_tab:hover:not(.active) { color: #999; }

/* ── Tab content panels ── */
.e7_tab_content { display: none; flex: 1; overflow-y: auto; padding: 12px; }
.e7_tab_content.active { display: block; }

/* ── Stencil cards ── */
.e7_stencil_card {
  padding:       10px 0;
  border-bottom: var(--border-dim);
  animation:     fadeIn 0.3s ease;
}

.e7_stencil_card.e7_selected {
  background: rgba(0,255,136,0.05);
  border-left: 2px solid var(--green);
  padding-left: 8px;
}

.e7_stencil_card_id {
  color:     var(--green);
  font-size: 0.78rem;
}

.e7_stencil_card_bits {
  color:     var(--amber);
  font-size: 0.65rem;
}

.e7_stencil_card_breakdown {
  color:     var(--text-secondary);
  font-size: 0.62rem;
  margin-top: 2px;
}

.e7_select_btn {
  margin-top:     6px;
  background:     transparent;
  border:         var(--border-dim);
  color:          var(--text-secondary);
  padding:        3px 10px;
  font-family:    var(--font-mono);
  font-size:      0.62rem;
  letter-spacing: 1px;
  cursor:         pointer;
  transition:     all 0.15s;
}

.e7_select_btn:hover {
  border-color: var(--green);
  color:        var(--green);
}

/* ── Combo section ── */
.e7_section_label {
  color:          var(--text-secondary);
  font-size:      0.6rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding:        10px 0 6px;
  border-top:     var(--border-dim);
  margin-top:     6px;
}

.e7_combo_card {
  padding:       8px 0;
  border-bottom: 1px solid var(--bg-surface);
  font-size:     0.68rem;
}

.e7_combo_name  { color: var(--text-primary); }
.e7_combo_desc  { color: var(--text-secondary); font-size: 0.62rem; margin-top: 2px; }

/* ── Instrument selector (slides in under fx.spot) ── */
#e7_instr_selector {
  display:       none;
  margin-top:    10px;
  border:        var(--border-dim);
  padding:       10px;
  background:    rgba(0,0,0,0.3);
}

#e7_instr_selector.e7_visible { display: block; }

#e7_instr_title {
  color:          var(--green);
  font-size:      0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom:  8px;
}

.e7_instr_item {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        4px 0;
  border-bottom:  1px solid var(--bg-surface);
  font-size:      0.68rem;
}

.e7_instr_item input[type="checkbox"] { accent-color: var(--green); }
.e7_instr_name  { color: var(--text-primary); flex: 1; }
.e7_instr_cost  { color: var(--text-secondary); font-size: 0.62rem; }

#e7_instr_total {
  color:      var(--amber);
  font-size:  0.68rem;
  margin-top: 8px;
  text-align: right;
}

#e7_instr_confirm_btn {
  width:          100%;
  margin-top:     8px;
  background:     transparent;
  border:         var(--border-green);
  color:          var(--green);
  padding:        6px;
  font-family:    var(--font-mono);
  font-size:      0.68rem;
  letter-spacing: 1px;
  cursor:         pointer;
  transition:     all 0.2s;
}

#e7_instr_confirm_btn:hover { background: var(--green-dim); }

#e7_instr_confirm_msg {
  font-size:  0.65rem;
  margin-top: 4px;
  min-height: 1em;
}

/* ── Build tab ── */
#e7_build_list {
  padding: 8px 0;
}

.e7_build_item {
  padding:       8px 0;
  border-bottom: var(--border-dim);
  font-size:     0.7rem;
}

.e7_build_item_name { color: var(--text-primary); }
.e7_build_item_meta { color: var(--text-secondary); font-size: 0.62rem; margin-top: 2px; }