/* Smooth page scroll for any anchor/JS scrolls */
html {
  scroll-behavior: smooth;
}

/* Minimal custom spacing, rely on Carbon for styling */
:root {
  --stack-03: 1rem;
}

/* Simple vertical rhythm for tile content */
.stack > * + * {
  margin-top: var(--stack-03);
}

/* Make the Results tile act as a column container (title + scroll area) */
.results-tile {
  display: flex;
  flex-direction: column;
}

/* Dedicated scroll box for results (page doesn't grow tall) */
.results-scroll {
  height: 60vh;                 /* fixed visible area; adjust value as desired */
  overflow: auto;               /* scroll inside this box */
  overscroll-behavior: contain; /* avoid scrolling page when list hits edges */
}

/* Keep the structured list header visible while scrolling */
.results-scroll .bx--structured-list-thead {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
  box-shadow: 0 1px 0 0 #e0e0e0; /* subtle divider under header */
}

/* Result row affordances */
.result-row {
  cursor: pointer;
}

/* Hover and selected states, aligned with Carbon neutral palette */
.result-row:hover {
  background: #f4f4f4;
}

.result-row[aria-selected="true"] {
  background: #e8e8e8;
}

/* Result text styles */
.result-occupation {
  display: flex;
  flex-direction: column;
}
.result-occupation .name {
  font-weight: 600;
}
.result-occupation .alt {
  color: #6f6f6f;
  margin-top: .125rem;
  font-size: 0.875rem;
}

/* Optional: tweak on small screens for more space */
@media (max-width: 672px) {
  .results-scroll {
    height: 50vh;
  }
}