/* Browse Database — category-first index. Shared parts come from design-system.css. */

.oa-browse-header {
  max-width: 760px;
}

/* Masonry-style columns: cards keep DOM order top-to-bottom per column,
   which groups Hydrocarbons/Halogens/Oxygen, then N/S/P, then the rest. */
.oa-browse-grid {
  columns: 3 320px;
  column-gap: var(--space-5);
}

.oa-cat-card {
  break-inside: avoid;
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--oa-line);
  background: var(--oa-card-gradient);
  box-shadow: var(--oa-shadow-card);
  transition: border-color var(--transition-normal);
}

.oa-cat-card:hover,
.oa-cat-card:focus-within {
  border-color: var(--oa-line-strong);
}

.oa-cat-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--oa-line);
}

/* Element-symbol tile: C, X, O, N, S, P */
.oa-cat-card__symbol {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(34, 211, 238, 0.32);
  background:
    radial-gradient(circle at 30% 25%, rgba(34, 211, 238, 0.22), transparent 70%),
    rgba(8, 26, 48, 0.9);
  color: var(--oa-cyan);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
}

.oa-cat-card__symbol--icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oa-cat-card__title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oa-text);
}

.oa-cat-card__sub {
  margin-top: 0.1rem;
  font-size: var(--fs-meta);
  color: var(--oa-text-2);
}

@media (max-width: 700px) {
  .oa-browse-grid {
    columns: 1;
  }
}