.popular-stocks { display: grid; gap: 1rem; }
.popular-stocks__header { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
.popular-stocks__exchange { width: min(15rem, 100%); flex: 0 0 auto; }
.popular-stocks__controls .card-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.popular-stocks__tabs { gap: .35rem; }
.popular-stocks__tabs .nav-link { display: inline-flex; align-items: center; gap: .4rem; }
.popular-stocks__window { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; }
.popular-stocks__window select { width: 8.5rem; }
.popular-stocks__state { min-height: 14rem; display: flex; align-items: center; justify-content: center; gap: .65rem; padding: 2rem; text-align: center; }
.popular-stocks__state--error { color: var(--bs-danger-text-emphasis) !important; flex-direction: column; }
.popular-stocks__table th:first-child, .popular-stocks__table td:first-child { width: 4.5rem; text-align: center; }
.popular-stocks__rank { font: 700 1.15rem/1 var(--bs-font-monospace); }
.popular-stocks__symbol { font-weight: 700; text-decoration: none; }
.popular-stocks__activity-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.popular-stocks__disclosure { display: flex; gap: .5rem; align-items: flex-start; }

@media (max-width: 767.98px) {
    .popular-stocks__header, .popular-stocks__controls .card-body { align-items: stretch; flex-direction: column; }
    .popular-stocks__exchange { width: 100%; }
    .popular-stocks__tabs { display: grid; grid-template-columns: 1fr; }
    .popular-stocks__tabs .nav-link { justify-content: center; }
    .popular-stocks__window { justify-content: space-between; }
    .popular-stocks__window select { flex: 1; max-width: 12rem; }
    .popular-stocks__results .table-responsive { overflow: visible; }
    .popular-stocks__table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .popular-stocks__table, .popular-stocks__table tbody, .popular-stocks__table tr, .popular-stocks__table td { display: block; width: 100%; }
    .popular-stocks__table tbody { display: grid; gap: .75rem; padding: .75rem; }
    .popular-stocks__table tr { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .75rem; }
    .popular-stocks__table td, .popular-stocks__table td:first-child { display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding: .4rem 0; border: 0; text-align: end !important; }
    .popular-stocks__table td::before { content: attr(data-label); color: var(--bs-secondary-color); font-size: .875rem; text-align: start; }
}