/* Fit + accessibility + multiselect + sort arrows + description block */
.headphone-ranker { font: inherit; width: 100%; }
.hr-description { margin-bottom: 1rem; }
.hr-controlbar { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.hr-search { padding: .5rem .6rem; min-width: 220px; max-width: 100%; }
.hr-clear { padding: .5rem .75rem; border: 1px solid #ccc; background: #f9f9f9; border-radius: .375rem; cursor: pointer; }
.hr-resultcount { opacity: .8; }
.hr-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; margin-bottom: .5rem; }
.hr-filter > label { display:block; font-size: .9rem; margin-bottom: .25rem; font-weight: 700; } /* only the top label is bold */
/* Controls */
.hr-filter select, .hr-filter input[type="number"], .hr-ms-toggle { width: 100%; padding: .45rem .6rem; border: 1px solid #dcdcdc; border-radius: .375rem; background: #fff; }
/* Multiselect dropdown */
.hr-ms-toggle { position: relative; text-align: left; }
.hr-ms-toggle::after { content: "▾"; position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); opacity: .6; }
.hr-ms-menu { position: absolute; top: 100%; left: 0; min-width: 100%; background: #fff; border: 1px solid #dcdcdc; border-radius: .375rem; padding: .4rem; max-height: 220px; overflow: auto; box-shadow: 0 8px 20px rgba(0,0,0,.08); z-index: 1000; } /* absolute overlay to prevent layout shift */
.hr-ms-item { display: flex; align-items: center; gap: .5rem; padding: .25rem .2rem; cursor: pointer; font-weight: 400; } /* not bold */
/* Table */
.hr-tablewrap { overflow:auto; border: 1px solid #e5e5e5; border-radius: .5rem; width: 100%; max-width: 100%; }
.hr-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.hr-table th, .hr-table td { padding: .5rem .6rem; border-bottom: 1px solid #eee; }
.hr-table th { position: sticky; top: 0; background: #fafafa; cursor: pointer; }
.hr-table td { white-space: normal; word-break: normal; }
.hr-table th[data-sort="asc"]::after { content: " ▲"; }
.hr-table th[data-sort="desc"]::after { content: " ▼"; }
.hr-table th[data-sort="none"]::after { content: " ↕"; color: #bbb; }
.screen-reader-text { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.headphone-ranker-error { padding: .75rem; border:1px solid #f2c6c6; background: #fff3f3; color:#8a1f1f; border-radius: .375rem; }
/* Inline range controls: [Min] – [Max] */
.hr-filter .hr-range {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.hr-filter .hr-range input[type="number"] {
  width: 110px;            /* adjust as needed */
  min-width: 90px;
}

.hr-filter .hr-range .hr-range-sep {
  user-select: none;
  line-height: 1;
  opacity: .8;
}