/* 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%; 
display: flex;
  align-items: center;
  gap: 10px;
}
.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;
}

.hr-form-factor {
  display: flex;
  gap: 14px;
  margin-bottom: 22px; /* spacing before search */
  flex-wrap: wrap;
}

.hr-form-factor button {
  appearance: none;
  border: 2px solid #000;
  background: #fff;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 22px;
  border-radius: 999px; /* pill style */
  cursor: pointer;
  transition: all 0.18s ease;
  text-transform: uppercase;
}

.hr-form-factor button:hover {
  background: #000;
  color: #fff;
}

.hr-form-factor button.active {
  background: #000;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.hr-form-factor button:focus-visible {
  outline: 3px solid #4d90fe;
  outline-offset: 2px;
}

.hr-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.hr-share-label {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
}

.hr-share-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
}

/* underline ONLY the button text */
.hr-share-btn > span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* visual separator */
.hr-share-btn::after {
  content: " /";
  margin-left: 6px;
  color: #888;
  text-decoration: none !important;
  pointer-events: none;
}

/* no separator on last item */
.hr-share-btn:last-of-type::after {
  content: "";
}

.hr-form-factor-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

input[id$="-search"] {
  display: block;
  width: 100%;
  max-width: 420px;
}