/* ==========================================================================
   Custom chart hover panel (#4066) — the HTML tooltip that replaces Plotly's
   native hover box on opted-in charts. Colours come entirely from the shared
   --varial-* / --chart-* tokens (branding.css), so light/dark tracks the app
   with no JS theme detection. Logic: static/js/domain/chart-hover-panel.js.
   ========================================================================== */

.vrl-chart-hover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040; /* above the sticky results nav (1020) + its dropdown (1031),
                    the "+ N more" pill (1001) and chart controls — the hover must
                    never be occluded by the tab strip it floats over (#4189) */
  pointer-events: none; /* never steal the mousemove from the chart underneath */
  min-width: 190px;
  max-width: 300px;
  padding: 8px 10px 9px;
  background: var(--varial-card-bg, #ffffff);
  border: 1px solid var(--varial-border, #e7e0cc);
  border-radius: var(--varial-radius-md, 0.375rem);
  box-shadow: var(--varial-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
  font-family: var(--varial-font-family, "Inter", sans-serif);
  font-size: 12px;
  line-height: 1.35;
  color: var(--varial-gray-900, #131210);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 90ms ease, transform 90ms ease;
}

.vrl-chart-hover.is-visible {
  opacity: 1;
  transform: none;
}

.vch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--varial-border, #e7e0cc);
}

.vch-x {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  color: var(--varial-gray-900, #131210);
}

/* A long axis-title subtitle (e.g. a box chart's "P10-P90 box, median, min/max
   whiskers…" caption) wraps instead of overflowing the card — min-width: 0 lets a
   flex item shrink below its content's natural width so wrapping can kick in. */
.vch-unit {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--varial-gray-400, #6e6a63);
  text-align: right;
  overflow-wrap: break-word;
}

.vch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2.5px 0;
}

.vch-sw {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
}

.vch-sw--line {
  width: 12px;
  height: 3px;
  border-radius: 2px;
}

.vch-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--varial-gray-600, #4d4a46);
}

.vch-val {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
  color: var(--varial-gray-900, #131210);
}

.vch-rng {
  padding: 0 1px;
  font-weight: 500;
  color: var(--varial-gray-400, #6e6a63);
}

/* Expanded reference-year sub-rows under a scenario header row. */
.vch-sub {
  padding: 1px 0 1px 20px; /* indent past the header swatch */
}

/* Keeps name alignment when a group header carries no colour swatch (the colour
   belongs to the members, e.g. fuel-coloured MLF). */
.vch-sw--empty {
  background: transparent;
}

/* Sub-rows that carry their own colour swatch (member = the colour dimension). */
.vch-sub--color {
  padding-left: 12px;
}

.vch-sub-label {
  color: var(--varial-gray-400, #6e6a63);
  font-size: 11px;
}

.vch-sub .vch-val {
  font-weight: 500;
  font-size: 11px;
  color: var(--varial-gray-600, #4d4a46);
}

/* Box/whisker stat rows: emphasise the median so it reads first. */
.vch-stat--med .vch-sub-label {
  color: var(--varial-gray-900, #131210);
  font-weight: 600;
}

.vch-stat--med .vch-val {
  color: var(--varial-gray-900, #131210);
  font-weight: 700;
  font-size: 12px;
}

.vch-more {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px dashed var(--varial-border, #e7e0cc);
  font-size: 11px;
  color: var(--varial-gray-400, #6e6a63);
}

/* Fixed-dark variant for the marketing hero (data-hover-dark), which owns a dark
   palette independent of the page theme. Values mirror the hero's hover tokens. */
.vrl-chart-hover--dark {
  background: #1e293b;
  border-color: #334155;
  color: #f8f7f5;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.vrl-chart-hover--dark .vch-head {
  border-bottom-color: #334155;
}

.vrl-chart-hover--dark .vch-x,
.vrl-chart-hover--dark .vch-val {
  color: #f8f7f5;
}

.vrl-chart-hover--dark .vch-name,
.vrl-chart-hover--dark .vch-sub .vch-val {
  color: #cbd5e1;
}

.vrl-chart-hover--dark .vch-unit,
.vrl-chart-hover--dark .vch-rng,
.vrl-chart-hover--dark .vch-sub-label,
.vrl-chart-hover--dark .vch-more {
  color: #94a3b8;
}

.vrl-chart-hover--dark .vch-more {
  border-top-color: #334155;
}

.vrl-chart-hover--dark .vch-stat--med .vch-sub-label,
.vrl-chart-hover--dark .vch-stat--med .vch-val {
  color: #f8f7f5;
}

/* When the custom panel owns a chart, suppress Plotly's ENTIRE native hover layer
   for it — the unified box AND the per-point labels Plotly can draw alongside it
   (which render outside `.hovertext`, so hiding that node alone leaked a couple of
   labels). The whole `.hoverlayer` holds only hover artifacts, so hiding it is
   complete and safe; hover EVENTS still fire (they drive our panel), and spikelines
   live in a separate layer. Plotly sets no inline `display` here, so a plain rule
   wins — no !important needed (keeps this in the components layer per
   static/CLAUDE.md). */
.js-plotly-plot.vrl-hover-panel-on .hoverlayer {
  display: none;
}