/*
 * baby-name-generator.css — per-tool styles for the Auspicious Baby Name Generator.
 * Only the suggested-name list (cards, initial-letter badge). Tokens only; no
 * inline styles (CSP: style-src 'self').
 */

.bn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.bn-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Names starting with a top auspicious letter (เดช / ศรี / มนตรี) get an accent. */
.bn-item--top {
  border-color: var(--success-200);
  background: var(--success-50);
}

.bn-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--blue-100);
  color: var(--blue-700);
  font: 700 var(--text-lg-size)/1 var(--font-sans);
}

.bn-item--top .bn-badge {
  background: var(--success-500);
  color: var(--text-on-brand);
}

.bn-body {
  min-width: 0;
}

.bn-name {
  margin: 0;
  font: 600 var(--text-lg-size)/var(--text-lg-line) var(--font-sans);
  color: var(--text-primary);
  word-break: break-word;
}

.bn-meaning {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-secondary);
}

.bn-why {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--text-muted);
}