.root {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.track {
  flex: 1;
  height: 8px;
  background: var(--surface-muted, #f0f0f0);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}

.fill {
  position: relative;
  height: 100%;
  border-radius: var(--radius-sm, 6px);
  transform-origin: left center;
  overflow: hidden;
  transition: width 0.5s var(--ease-out, ease);
}

.fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.38),
    transparent
  );
  transform: translateX(-120%);
  pointer-events: none;
}

.fillSuccess {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--success) 85%, #000),
    var(--success)
  );
}

/* High scores catch a gold sheen instead of white — same sweep, warmer light. */
.fillSuccess::after {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--studio-accent-warm, #e2b36a) 70%, #fff),
    transparent
  );
}

.fillWarning {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--warning) 85%, #000),
    var(--warning)
  );
}

.fillDanger {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--danger) 85%, #000),
    var(--danger)
  );
}

.scoreValue {
  font-size: 13px;
  font-weight: 650;
  min-width: 3.2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
}

.scoreSuccess {
  color: var(--success, #1d9e75);
}

.scoreWarning {
  color: var(--warning, #ba7517);
}

.scoreDanger {
  color: var(--danger, #e24b4a);
}

.reason {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.notes {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

.evidenceToggle {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, var(--muted));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.evidenceList {
  margin: 0;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.evidencePositive,
.evidenceNegative {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  font-style: italic;
}

@media (prefers-reduced-motion: no-preference) {
  .fill {
    animation: scoreGrow 0.7s var(--ease-out, ease) both;
  }

  .fill::after {
    animation: scoreSheen 0.85s var(--ease-out, ease) 0.35s both;
  }
}

@keyframes scoreGrow {
  from {
    transform: scaleX(0.08);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes scoreSheen {
  to {
    transform: translateX(130%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fill,
  .fill::after {
    animation: none;
  }
}

.evidencePositive::marker {
  color: var(--success);
}

.evidenceNegative::marker {
  color: var(--danger);
}