.metric-info { display: inline; }
.metric-info-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 4px; padding: 0;
  border: 1px solid #8696bd; border-radius: 50%; background: transparent;
  color: #35568d; font: 700 14px Georgia, serif; cursor: pointer; vertical-align: middle;
}
.metric-info-button:hover, .metric-info-button[aria-expanded="true"] { background: #e1eaff; color: #1747bd; }
.metric-info-button:focus-visible { outline: 2px solid #1747bd; outline-offset: 3px; }
.metric-info-panel {
  position: fixed; z-index: 10000; box-sizing: border-box;
  width: 320px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 16px 18px; border: 1px solid #d7dfee; border-radius: 12px;
  background: #fff; color: #263650; box-shadow: 0 8px 28px #18325b26;
  font-size: 14px; font-weight: 400; line-height: 1.6; text-align: left;
}
.metric-info-panel[hidden] { display: none; }
.metric-info-panel a { color: #1747bd; text-decoration: underline; }