/* block_picker.css — Pomona Pro hierarchical block picker styles
 * Loaded once. Reused across all picker mount sites.
 * Uses Pomona's existing CSS variables (--bg, --tx, --tm, --br, --rs, etc.) where possible
 * with fallbacks for standalone test harness use.
 */

.bp-root {
  font-family: inherit;
  color: var(--tx, #2c2c2a);
  font-size: 14px;
}

.bp-row {
  display: grid;
  grid-template-columns: 1fr 100px 64px;
  grid-template-areas: "search middles add";
  gap: 8px;
  align-items: stretch;
  margin: 0 0 12px 0;
}
.bp-row.bp-row-no-middles {
  grid-template-columns: 1fr 64px;
  grid-template-areas: "search add";
}
.bp-input-wrap { grid-area: search; position: relative; }
.bp-middles    { grid-area: middles; }
.bp-btn        { grid-area: add; }

@media (max-width: 560px) {
  .bp-row {
    grid-template-columns: 1fr 80px;
    grid-template-areas: "search search" "middles add";
  }
  .bp-row.bp-row-no-middles {
    grid-template-columns: 1fr;
    grid-template-areas: "search" "add";
  }
}

.bp-search,
.bp-middles,
.bp-btn {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--br, #d3d1c7);
  border-radius: var(--rs, 8px);
  font-size: 14px;
  font-family: inherit;
  background: var(--sf, #fff);
  color: var(--tx, #2c2c2a);
}
.bp-middles { padding: 0 8px; }
.bp-btn { cursor: pointer; padding: 0 14px; }
.bp-btn:hover { background: var(--bg, #f1efe8); }
.bp-btn:active { transform: scale(0.98); }

.bp-search:focus,
.bp-middles:focus,
.bp-btn:focus {
  outline: none;
  border-color: var(--gm, #888780);
  box-shadow: 0 0 0 2px rgba(100,100,100,0.12);
}

/* Results dropdown */
.bp-results {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--sf, #fff);
  border: 1px solid var(--br, #d3d1c7);
  border-radius: var(--rs, 8px);
  z-index: 1000;
  display: none;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.bp-results-up.bp-open {
  top: auto;
  bottom: 42px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
}
.bp-results.bp-open { display: block; }

.bp-section {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--tm, #888780);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg, #f5f4ee);
  border-bottom: 1px solid var(--br, #e8e6df);
  position: sticky;
  top: 0;
}

.bp-result {
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--br, #f1efe8);
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
}
.bp-result:last-child { border-bottom: none; }
.bp-result:hover,
.bp-result.bp-active { background: var(--bg, #f1efe8); }

.bp-result-parent { background: #FAEEDA; color: #633806; }
.bp-result-parent:hover,
.bp-result-parent.bp-active { background: #FAC775; }
.bp-result-parent .bp-badge { background: #854F0B; color: #FAEEDA; }
.bp-result-parent .bp-meta-text { color: #854F0B; }

.bp-result-variety { background: #EEEDFE; color: #3C3489; }
.bp-result-variety:hover,
.bp-result-variety.bp-active { background: #CECBF6; }
.bp-result-variety .bp-badge { background: #3C3489; color: #EEEDFE; }
.bp-result-variety .bp-meta-text { color: #3C3489; }

.bp-result-more {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--tm, #888780);
  text-align: center;
  font-style: italic;
}

.bp-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
  letter-spacing: 0.4px;
}

.bp-name { flex: 1; }
.bp-meta-text { color: var(--tm, #888780); font-size: 12px; flex-shrink: 0; }

/* Chips area */
.bp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  padding: 8px;
  border: 1px dashed var(--br, #d3d1c7);
  border-radius: var(--rs, 8px);
  background: var(--bg, #f1efe8);
}
.bp-chips:empty::before {
  content: "Selected blocks will appear here";
  font-size: 12px;
  color: var(--tm, #b4b2a9);
  padding: 4px;
}

.bp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 5px 5px 11px;
  background: var(--sf, #fff);
  border: 1px solid var(--br, #d3d1c7);
  border-radius: var(--rs, 8px);
  font-size: 13px;
  color: var(--tx, #2c2c2a);
}
.bp-chip-label { line-height: 1.2; }
.bp-chip-x {
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  padding: 2px 6px;
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
}
.bp-chip-x:hover { opacity: 1; background: rgba(0,0,0,0.06); }

.bp-chip-full {
  background: #FAEEDA;
  border-color: #BA7517;
  color: #633806;
}
.bp-chip-full .bp-chip-x { color: #633806; }

.bp-chip-variety {
  background: #EEEDFE;
  border-color: #534AB7;
  color: #3C3489;
}
.bp-chip-variety .bp-chip-x { color: #3C3489; }

.bp-meta {
  font-size: 12px;
  color: var(--tm, #888780);
  margin-top: 8px;
}