/* Compact stat rows — same high→low bar charts as before, unframed, equal width */

.stats-panel--compact {
  --stat-chart-height: 36px;
  /* Bar strip width; outer chart box adds pad-x on both sides. */
  --stat-chart-plot-width: 9rem;
  --stat-chart-pad-x: 12px;
  --stat-chart-width: calc(
    var(--stat-chart-plot-width) + 2 * var(--stat-chart-pad-x)
  );
  /* Room for two-line names so every row shares the same pitch. */
  --stat-name-line-height: 1.2;
  --stat-name-lines: 2;
  --stat-row-pad-y: 0.45rem;
  --stat-row-height: max(
    calc(var(--stat-chart-height) + 14px),
    calc(
      var(--hero-chrome-caps-size, 0.75rem) * var(--stat-name-line-height) *
        var(--stat-name-lines) + 2 * var(--stat-row-pad-y)
    )
  );
  --stat-row-gap: 0;
  /*
   * Left gutter for the catalog minimap (14px wide; active thumb 14px).
   * Applied on .stats-panel__main so heading + every row clear the rail.
   */
  --catalog-scroll-gutter: 24px;
}

/* Give the wider chart + right pad room without crushing labels. */
.chart-panel:has(.stats-panel--compact) {
  --chart-panel-content-width: 23.5rem;
}

/* No framed panel — attributes sit on the page background. */
.stats-panel--compact.stats-panel--flat {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.stats-panel--compact.stats-panel--flat .stats-panel__main {
  /* Clear the absolutely-positioned .catalog-minimap at left:0;
     matching end pad so charts aren’t flush to the panel edge. */
  padding-inline: 0;
  padding-inline-start: var(--catalog-scroll-gutter);
  padding-inline-end: var(--catalog-scroll-gutter);
  /* One row of stage air under the catalog so long lists don’t hug the
     floor (keeps the last full row ~where Hit Power sat in the tall layout). */
  padding-bottom: var(--stat-row-height);
  box-sizing: border-box;
}

.stats-panel--compact.stats-panel--flat .stats-panel__overall {
  display: none !important;
}

.stats-panel--compact.stats-panel--flat .stats-panel__catalog,
.stats-panel--compact.stats-panel--flat .stats-panel__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 0;
  padding-inline: 0;
  /* Bottom air lives on __main so the minimap rail matches the row stack. */
  padding-bottom: 0;
}

.stats-panel--compact.stats-panel--flat .stats-panel__body {
  /* Drop shadow-bleed side inset so the panel edge reads as the frame. */
  --stats-panel-pad-x: 0px;
}

.stats-panel--compact.stats-panel--flat {
  --stats-panel-pad-x: 0px;
  --stats-panel-pad-top: 0px;
}

.stats-panel--compact .stat-group--compact {
  --stat-row-rule: rgba(0, 0, 0, 0.12);
  --stat-row-rule-active: rgba(0, 0, 0, 0.34);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Kill flat-mode label/extremes reserve so rows stay tight. */
  --chart-top-reserve: 0px;
  --chart-label-slack: 0px;
  --chart-top-reserve-idle: 0px;
  --chart-top-reserve-active: 0px;
}

/*
 * Compact row rules (one weight everywhere):
 * - every row has a top rule (including Overall)
 * - last row also has a bottom rule
 * Flat mode zeros first/second/last borders — beat that specificity here.
 */
.stats-panel--compact.stats-panel--flat .stats-panel__catalog > .stat-group--compact,
.stats-panel--compact.stats-panel--flat .stats-panel__list > .stat-group--compact {
  border: none;
  border-top: 1px solid var(--stat-row-rule);
  /* Kill accordion selected chrome that recolors borders / paints a wash. */
  border-color: var(--stat-row-rule);
  background: transparent;
  box-shadow: none;
  /* Base .stat-group fades background 120ms — wash must snap with the pointer. */
  transition: none;
}

.stats-panel--compact.stats-panel--flat .stats-panel__catalog > .stat-group--compact:last-child,
.stats-panel--compact.stats-panel--flat .stats-panel__list > .stat-group--compact:last-child {
  border-bottom: 1px solid var(--stat-row-rule);
}

/*
 * Browse / hover / selected: darken the rule above and the rule beneath.
 * While keyboard owns browse, ignore CSS :hover on other rows so only the
 * ↑/↓ target matches pointer-hover chrome.
 */
.stats-panel--compact.stats-panel--flat .stats-panel__catalog > .stat-group--compact:is(
    .stat-group--browse,
    .stat-group--focus
  ),
.stats-panel--compact.stats-panel--flat .stats-panel__list > .stat-group--compact:is(
    .stat-group--browse,
    .stat-group--focus
  ),
.stats-panel--compact.stats-panel--flat:not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__catalog
  > .stat-group--compact:hover,
.stats-panel--compact.stats-panel--flat:not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__list
  > .stat-group--compact:hover {
  border-top-color: var(--stat-row-rule-active);
}

.stats-panel--compact.stats-panel--flat .stats-panel__catalog > .stat-group--compact:is(
    .stat-group--browse,
    .stat-group--focus
  )
  + .stat-group--compact,
.stats-panel--compact.stats-panel--flat .stats-panel__list > .stat-group--compact:is(
    .stat-group--browse,
    .stat-group--focus
  )
  + .stat-group--compact,
.stats-panel--compact.stats-panel--flat:not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__catalog
  > .stat-group--compact:hover
  + .stat-group--compact,
.stats-panel--compact.stats-panel--flat:not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__list
  > .stat-group--compact:hover
  + .stat-group--compact {
  border-top-color: var(--stat-row-rule-active);
}

.stats-panel--compact.stats-panel--flat .stats-panel__catalog > .stat-group--compact:is(
    .stat-group--browse,
    .stat-group--focus
  ):last-child,
.stats-panel--compact.stats-panel--flat .stats-panel__list > .stat-group--compact:is(
    .stat-group--browse,
    .stat-group--focus
  ):last-child,
.stats-panel--compact.stats-panel--flat:not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__catalog
  > .stat-group--compact:hover:last-child,
.stats-panel--compact.stats-panel--flat:not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__list
  > .stat-group--compact:hover:last-child {
  border-bottom-color: var(--stat-row-rule-active);
}

.stats-panel--compact .stat-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: var(--stat-row-height);
  height: var(--stat-row-height);
  box-sizing: border-box;
  padding: var(--stat-row-pad-y) 0;
}

.stats-panel--compact .stat-row__index {
  flex: 0 0 1.35rem;
  box-sizing: border-box;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  text-align: right;
  align-self: center;
  line-height: 1.25rem;
}

.stats-panel--compact .stat-row__label {
  /* Fill space between index and fixed-width chart — don’t clip names early. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  align-self: center;
}

.stats-panel--compact .stat-row__label:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
  border-radius: 2px;
}

.stats-panel--compact .stat-row__name {
  display: block;
  font-size: var(--hero-chrome-caps-size);
  font-weight: var(--hero-chrome-caps-weight);
  line-height: var(--stat-name-line-height);
  letter-spacing: var(--hero-chrome-caps-tracking);
  text-transform: uppercase;
  color: var(--hero-chrome-caps-color);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/*
 * Browse (--browse) / pointer hover: row wash + bold label.
 * Selected (--focus): bold label + filled index — no grey row wash.
 * Keyboard ↑/↓ uses --browse; must match hover (specificity beats base transparent bg).
 */
.stats-panel--compact.stats-panel--flat
  .stats-panel__catalog
  > .stat-group--compact.stat-group--browse:not(.stat-group--focus),
.stats-panel--compact.stats-panel--flat
  .stats-panel__list
  > .stat-group--compact.stat-group--browse:not(.stat-group--focus),
.stats-panel--compact.stats-panel--flat:not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__catalog
  > .stat-group--compact:hover:not(.stat-group--focus),
.stats-panel--compact.stats-panel--flat:not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__list
  > .stat-group--compact:hover:not(.stat-group--focus) {
  background: var(--color-hover-fill, rgba(0, 0, 0, 0.05));
}

.stats-panel--compact.stats-panel--flat:not(.stats-panel--suppress-selected-wash)
  .stats-panel__catalog
  > .stat-group--compact.stat-group--focus.stat-group--browse,
.stats-panel--compact.stats-panel--flat:not(.stats-panel--suppress-selected-wash)
  .stats-panel__list
  > .stat-group--compact.stat-group--focus.stat-group--browse,
.stats-panel--compact.stats-panel--flat:not(.stats-panel--suppress-selected-wash):not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__catalog
  > .stat-group--compact.stat-group--focus:hover,
.stats-panel--compact.stats-panel--flat:not(.stats-panel--suppress-selected-wash):not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stats-panel__list
  > .stat-group--compact.stat-group--focus:hover {
  background: var(--color-hover-fill, rgba(0, 0, 0, 0.05));
}

.stats-panel--compact .stat-group--browse .stat-row__name,
.stats-panel--compact .stat-group--focus .stat-row__name,
.stats-panel--compact.stats-panel--flat:not(:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav))
  .stat-group--compact:hover
  .stat-row__name {
  font-weight: var(--hero-chrome-caps-weight-selected);
  color: var(--color-text);
}

/* Parked pointer after ↑/↓ steal / player ←/→: force ambient chrome on
   non-browse rows. */
.stats-panel--compact.stats-panel--flat:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav)
  .stats-panel__catalog
  > .stat-group--compact:hover:not(.stat-group--browse):not(.stat-group--focus),
.stats-panel--compact.stats-panel--flat:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav)
  .stats-panel__list
  > .stat-group--compact:hover:not(.stat-group--browse):not(.stat-group--focus) {
  background: transparent;
}

.stats-panel--compact.stats-panel--flat:is(.stats-panel--keyboard-chart-browse, .stats-panel--player-nav)
  .stat-group--compact:hover:not(.stat-group--browse):not(.stat-group--focus)
  .stat-row__name {
  font-weight: var(--hero-chrome-caps-weight);
  color: var(--hero-chrome-caps-color);
}

.stats-panel--compact .stat-group--focus .stat-row__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.25rem;
  padding: 0;
  border-radius: 999px;
  background: #101014;
  color: #fff;
  font-weight: 800;
  text-align: center;
}

/* Fixed-width plot on the right — every row shares the same chart width.
   pad-x insets the bars from the chart box; width already includes both sides. */
.stats-panel--compact .stat-row__chart {
  flex: 0 0 var(--stat-chart-width);
  width: var(--stat-chart-width);
  max-width: var(--stat-chart-width);
  min-width: var(--stat-chart-width);
  height: var(--stat-chart-height);
  min-height: var(--stat-chart-height);
  max-height: var(--stat-chart-height);
  margin: 0 0 0 auto;
  box-sizing: border-box;
  padding: 0;
  padding-inline: var(--stat-chart-pad-x);
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none !important;
}

.stats-panel--compact .stat-group--browse .stat-row__chart,
.stats-panel--compact .stat-group--focus .stat-row__chart,
.stats-panel--compact .stat-row__chart:hover,
.stats-panel--compact .stat-row__chart.stat-body__chart--frame-hover,
.stats-panel--compact .stat-row__chart.stat-body__chart--frame-fade {
  box-shadow: none !important;
  background: transparent;
}

/* Unframed bars sitting on the page */
.stats-panel--compact .stat-row__chart .stat-chart--bars {
  height: 100%;
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  --plot-inset: 0px;
  overflow: visible;
}

.stats-panel--compact .stat-row__chart .stat-chart__plot {
  height: 100%;
  inset: 0;
  padding: 0;
}

.stats-panel--compact .stat-row__chart .stat-chart__bars {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  padding: 0;
}

/* Under-capacity: JS snaps equal device-pixel bars across the plot
   (see snapFillBarStripWidths). Do not force flex — that aliases. */
.stats-panel--compact .stat-row__chart .stat-chart__bars--fill {
  display: block;
  position: relative;
  gap: 0;
}

.stats-panel--compact .stat-row__chart .stat-chart__extremes,
.stats-panel--compact .stat-row__chart .stat-chart__window-rail,
.stats-panel--compact .stat-row__chart .stat-chart__selection-triangle {
  display: none !important;
}

.stats-panel--compact .stat-row__chart .stat-chart__level {
  display: none !important;
}

/* Inspect ghost: lighter tint of each chart’s bar color.
   Ambient → neutral grey; selected (--focus) → pale blue. */
.stats-panel--compact
  .stat-group:not(.stat-group--focus)
  .stat-chart__bar--hover-ghost:not(.stat-chart__bar--selected),
.stats-panel--compact
  .stat-group:not(.stat-group--focus)
  .stat-chart__bar--hover-ghost:is(
    .stat-chart__bar--at-or-above,
    .stat-chart__bar--below
  ):not(.stat-chart__bar--selected) {
  background: var(--chart-bar-hover-ghost) !important;
  box-shadow: none;
  filter: none;
  opacity: 1;
  z-index: 3;
  transform-origin: bottom center;
  animation: ghost-bar-grow 200ms ease-out both;
}

.stats-panel--compact
  .stat-group--focus
  .stat-chart__bar--hover-ghost:not(.stat-chart__bar--selected),
.stats-panel--compact
  .stat-group--focus
  .stat-chart__bar--hover-ghost:is(
    .stat-chart__bar--at-or-above,
    .stat-chart__bar--below
  ):not(.stat-chart__bar--selected) {
  background: var(--chart-bar-hover-ghost-focus) !important;
  box-shadow: none;
  filter: none;
  opacity: 1;
  z-index: 3;
  transform-origin: bottom center;
  animation: ghost-bar-grow 200ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .stats-panel--compact .stat-chart__bar--hover-ghost:not(.stat-chart__bar--selected) {
    animation: none;
  }
}
.stats-panel--compact .stat-chart--comparing {
  --compare-delta: var(--color-bar);
}

.stats-panel--compact .stat-chart--comparing.stat-chart--compare-higher {
  --compare-delta: var(--chart-compare-higher);
}

.stats-panel--compact .stat-chart--comparing.stat-chart--compare-lower {
  --compare-delta: var(--chart-compare-lower);
}

.stats-panel--compact
  .stat-chart--comparing
  :is(.stat-chart__bar--compare-span, .stat-chart__bar--compare-peer):not(
    .stat-chart__bar--selected
  ) {
  background: var(--compare-delta) !important;
  filter: none;
  animation: none !important;
  opacity: 1;
}

/* Peer is color-coded only — never force a thinner width (breaks fill strips). */
.stats-panel--compact
  .stat-chart--comparing
  .stat-chart__bar--compare-peer:not(.stat-chart__bar--selected) {
  z-index: 4;
}

.stats-panel--compact .stat-chart__compare-end,
.stats-panel--compact .stat-chart__compare-ibeam {
  display: none !important;
}

/* Bars outside the selected↔hover range stay neutral grey. */
.stats-panel--compact
  .stat-chart--comparing
  .stat-chart__bar:not(.stat-chart__bar--selected):not(
    .stat-chart__bar--compare-span
  ):not(.stat-chart__bar--compare-peer) {
  background: var(--color-bar);
  filter: none;
}