.mc-interactive-chart {
  position: relative;
  z-index: 1;
  cursor: crosshair;
  outline: none;
  touch-action: none;
}

.mc-interactive-chart:focus-visible {
  border-radius: 8px;
  outline: 3px solid var(--mc-focus, #82b7d8);
  outline-offset: -3px;
}

.mc-interaction-overlay {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}

.mc-interaction-overlay.show {
  opacity: 1;
}

.mc-active-guide {
  stroke: var(--mc-guide, rgba(216, 203, 181, .48));
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.mc-tooltip-connector {
  stroke: var(--mc-connector, rgba(255, 213, 128, .68));
  stroke-width: 1;
}

.mc-active-halo {
  fill: var(--mc-halo-fill, rgba(255, 213, 128, .18));
  stroke: var(--mc-halo-stroke, rgba(255, 234, 191, .72));
  stroke-width: 1.5;
}

.mc-active-point {
  fill: var(--mc-active-point, #fff3cf);
  stroke: var(--mc-active-stroke, #ffd580);
  stroke-width: 2;
}

.mc-chart-tooltip {
  position: absolute;
  z-index: 5;
  display: none;
  width: max-content;
  min-width: min(188px, calc(50% - 20px));
  max-width: min(252px, calc(50% - 20px));
  padding: 9px 10px;
  border: 1px solid var(--mc-tooltip-border, rgba(255, 213, 128, .76));
  border-radius: 9px;
  background: var(--mc-tooltip-bg, rgba(13, 11, 9, .91));
  box-shadow: 0 9px 22px rgba(0, 0, 0, .45);
  color: var(--mc-tooltip-text, #f4ead8);
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.mc-chart-tooltip.show {
  display: block;
}

.mc-tooltip-heading,
.mc-tooltip-primary,
.mc-tooltip-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mc-tooltip-heading {
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mc-tooltip-date {
  color: var(--mc-tooltip-accent, #ffd580);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
}

.mc-tooltip-title {
  overflow: hidden;
  color: var(--mc-tooltip-muted, #b8aa91);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-tooltip-primary {
  margin: 6px 0 5px;
}

.mc-tooltip-primary span,
.mc-tooltip-rows dt {
  color: var(--mc-tooltip-muted, #b8aa91);
  font-weight: 500;
}

.mc-tooltip-primary strong {
  color: var(--mc-tooltip-accent, #ffd580);
  font-size: 13px;
  text-align: right;
}

.mc-tooltip-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  margin: 0;
}

.mc-tooltip-rows dt,
.mc-tooltip-rows dd {
  min-width: 0;
  margin: 0;
}

.mc-tooltip-rows dd {
  overflow-wrap: anywhere;
  text-align: right;
}

.mc-tooltip-footer {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.mc-tooltip-delta,
.mc-tooltip-status {
  min-width: 0;
}

.mc-tooltip-status {
  color: var(--mc-tooltip-muted, #b8aa91);
  text-align: right;
}

.mc-tooltip-delta.risk,
.mc-tooltip-status.risk,
.mc-tooltip-delta.increase,
.mc-tooltip-status.increase {
  color: var(--mc-risk, #f0ad72);
}

.mc-tooltip-delta.ease,
.mc-tooltip-status.ease,
.mc-tooltip-delta.decrease,
.mc-tooltip-status.decrease {
  color: var(--mc-ease, #83c5b1);
}

@media (max-width: 560px) {
  .mc-chart-tooltip {
    padding: 7px 8px;
    font-size: 10px;
  }

  .mc-tooltip-primary strong {
    font-size: 12px;
  }

  .mc-tooltip-heading,
  .mc-tooltip-primary,
  .mc-tooltip-footer {
    gap: 5px;
  }

  .mc-tooltip-rows {
    gap: 1px 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-interaction-overlay {
    transition: none;
  }
}