/* landing_pages/worked_example/_lookup — one catalog entry: each result with its
 * meaning and its share of people, drawn as an SVG bar. */

.landing-lookup {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

@media (max-width: 47.999rem) {
  .landing-lookup { padding: var(--spacing-24); }
}

.landing-lookup__rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Alleles, meaning and share on one line; the bar under them, full width. */
.landing-lookup__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--spacing-4) var(--spacing-12);
}

.landing-lookup__alleles {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  color: var(--text-primary);
}

.landing-lookup__meaning {
  font-size: var(--font-size-16);
  color: var(--text-secondary);
}

.landing-lookup__share {
  font-size: var(--font-size-14);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.landing-lookup__bar {
  grid-column: 1 / -1;
  width: 100%;
  height: var(--spacing-4);
}

.landing-lookup__bar-track { fill: var(--background-surface-2); }
.landing-lookup__bar-fill { fill: var(--text-secondary); }