/* A-09 country list: search in three languages, the list with its unsaved changes and the special codes. The search
   field, chips, banners and save bar are the design system's, from app.css. */
.bh-countries, .bh-special { display: grid; gap: var(--space-4); }

.bh-matches {
  display: grid; gap: 2px; padding: var(--space-2); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-overlay);
}
.bh-match { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); min-height: var(--target-min); padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); }
.bh-match:hover { background: var(--sunken); }
.bh-match-text { display: grid; min-width: 0; }
.bh-match-name { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-match-listed { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--success-ink); font-weight: var(--weight-bold); }

.bh-country-list { overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-country-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "place action" "added action";
  align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3);
}
.bh-country-row + .bh-country-row { border-top: 1px solid var(--line); }
.bh-country-row.is-pending { background: var(--warning-bg); }
.bh-country-row.is-pending .bh-chip--warning { background: var(--card); box-shadow: inset 0 0 0 1px var(--warning-ink); }
.bh-country-place { grid-area: place; min-width: 0; overflow-wrap: anywhere; }
.bh-country-place code { margin-left: var(--space-1); font-family: var(--font-mono); font-size: var(--text-small); color: var(--ink-2); }
.bh-country-added { grid-area: added; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-country-row > .bh-btn { grid-area: action; }
@media (min-width: 768px) {
  .bh-country-row { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem) auto; grid-template-areas: "place added action"; }
}

.bh-special-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.bh-special-row > p { flex: 1 1 260px; min-width: 0; }