/* Marchenholm — score-bar.css : the signature horizontal bar component. */

.mh-score-bar {
  position: relative;
  height: 12px;
  width: 100%;
  background: var(--c-paper-alt);
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--c-stone);
}

.mh-score-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--score, 0%);
  background: var(--c-stone); /* default — overridden by semantic class */
  transition: none;
}

.mh-score-bar--hi  .mh-score-bar__fill { background: var(--c-score-hi);  }
.mh-score-bar--mid .mh-score-bar__fill { background: var(--c-score-mid); }
.mh-score-bar--lo  .mh-score-bar__fill { background: var(--c-score-lo);  }

/* Hero variant — slightly slimmer, 10px */
.mh-score-bar--hero {
  height: 10px;
  border: none;
  background: var(--c-paper-alt);
}

/* Full-width variant — used in card pillar rows */
.mh-score-bar--pillar {
  height: 12px;
}

/* Compare-grid delta highlight (applied by server/compare.js to the higher-scoring row on a pillar) */
.mh-compare-delta-winner {
  border-left: 3px solid var(--c-accent);
  padding-left: 8px;
}