/* A row of filters above a list: search box, selects, pills. Wraps on narrow screens */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.filters__search {
  flex: 1 1 16rem;
  max-width: 28rem;
}

.filters__count {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Two columns of key/value pairs on a record's page; one column on phones */
.details--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));

  .details__wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .details--grid {
    grid-template-columns: 1fr;
  }
}

/* A record's page: main column and a side column (map, photos) on wide screens */
.record-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 64rem) {
  .record-layout {
    grid-template-columns: 1fr;
  }
}

/* Two short fields side by side in a form (dates, numbers); stacked on phones */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 40rem) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* The record's name in a table row, linking to its page */
.table__link {
  font-weight: var(--weight-medium);
}

/* A small second line in a table cell (e.g. when a colony was last counted) */
.table__subtext {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}