/* Hall of Legends tabs (Hall | Suggested), /plugins/legendary-ratings.html. Shell only: each panel's content
   is built elsewhere. Behavior: legendary-tabs.js. */
/* overflow-y is spelled out because leaving it off does not leave it alone: when one axis is
   not visible the other computes from visible to auto, so overflow-x: auto quietly made this a
   vertical scroll container too. The tabs carry margin-bottom: -1px to sit over the border, which
   is 1px of content past a 44px box, and 1px of overflow is enough to render a full height
   scrollbar. That was the stray bar at the right of the tab row, and it was also taking 15px of
   width from the tabs: 948px element, 933px client. The horizontal scroll it was added for is
   still here and still only appears when the tabs genuinely do not fit. */
.hl .hl-tabs {
  display: flex; gap: 0.3rem; margin: 0 0 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  overflow-x: auto;
  overflow-y: hidden;
}
.hl .hl-tab {
  flex: 0 0 auto;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0.6rem 1.2rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #9aa3b8;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hl .hl-tab:hover,
.hl .hl-tab:focus-visible { color: #fff; }
.hl .hl-tab[aria-selected="true"] { color: var(--hl-s); border-bottom-color: var(--hl-s); }
.hl .hl-panel[hidden] { display: none; }