@scope (tooltip-ui) {
  :where(:scope) {
    /* Host (anchor) tokens. The popover itself escapes to top-layer and
       cannot inherit these — top-layer rules below reference --a-*
       directly per documented exception. */
    --tooltip-host-display: inline-flex;
  }
  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: var(--tooltip-host-display);
    position: relative;
  }
}

/*
 * ── Tooltip popover (lives in top-layer, outside @scope) ──
 *
 * .tooltip-popup is rendered into the top layer via the Popover API,
 * so it does NOT inherit custom properties from the <tooltip-ui> host.
 * Therefore we reference --a-* design tokens directly here.
 * There is no way to bridge component tokens to the top layer via CSS alone.
 */

.tooltip-popup {
  box-sizing: border-box;
  margin: 0;
  padding: var(--a-space-1) var(--a-space-2);
  background: var(--a-fg);
  color: var(--a-bg);
  font-family: var(--a-font-family);
  font-size: var(--a-ui-sm);
  line-height: 1.4;
  border: none;
  border-radius: var(--a-radius-full);
  box-shadow: var(--a-shadow-sm);
  white-space: nowrap;
  pointer-events: none;
  /* Fade in on first paint via @starting-style. */
  opacity: 1;
  transition: opacity var(--a-duration-fast) var(--a-easing-out);
  /* No z-index needed — Popover API renders in the top layer which
     has its own stacking above all document content. */
}

.tooltip-popup:popover-open {
  display: block;
  @starting-style { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-popup { transition: none; }
}

/* ── Pointer-follow mode (chart/heatmap) ──
   Richer card: surface bg (not inverse), multi-row layout, indicator dot
   per row reads `--tooltip-indicator-color` which the host injects per-row.
   Copies `--color-{key}` + `--chart-0..9` from the target chart at show
   time so series-keyed colors resolve despite the top-layer cascade break. */
.tooltip-popup[data-follows="pointer"] {
  --tooltip-indicator-size:  var(--a-space-2-5);
  --tooltip-label-weight:    var(--a-weight-medium);
  --tooltip-value-weight:    var(--a-weight-semibold);

  /* Sized to its content — shared tooltip width reads as too wide for
     short messages ("Mar 48") and doesn't help long ones either. max-width
     prevents runaway text when values are long. */
  width: max-content;
  max-width: 18rem;
  padding: var(--a-space-2) var(--a-space-3);
  background: var(--a-canvas-0);
  color: var(--a-fg);
  border: 1px solid var(--a-border-subtle);
  border-radius: var(--a-radius-md);
  box-shadow: var(--a-shadow-md);
  font-size: var(--a-ui-tiny);
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: var(--a-space-0-5);

  /* Elastic pointer follow — smooth the left/top updates so the tooltip
     trails the pointer briefly rather than snapping on every mousemove.
     Short ease-out duration keeps it snappy; prefers-reduced-motion drops
     the transition entirely below. */
  transition: left var(--a-duration-fast) var(--a-easing-out),
              top  var(--a-duration-fast) var(--a-easing-out);
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-popup[data-follows="pointer"] {
    transition: none;
  }
}

.tooltip-popup[data-follows="pointer"] [data-tip-role="label"] {
  color: var(--a-fg-subtle);
  font-weight: var(--tooltip-label-weight);
}

.tooltip-popup[data-follows="pointer"] [data-tip-role="series"] {
  color: var(--a-fg-subtle);
  font-size: calc(var(--a-ui-tiny) * 0.95);
}

.tooltip-popup[data-follows="pointer"] [data-tip-row] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--a-space-1) var(--a-space-2);
  padding: var(--a-space-px) 0;
}

/* Multi-series mode: the row the pointer is actually over gets a
   brighter name weight to stand out from the other series rows. */
.tooltip-popup[data-follows="pointer"] [data-tip-row][data-hovered] [data-tip-role="name"],
.tooltip-popup[data-follows="pointer"] [data-tip-row][data-hovered] [data-tip-role="value"] {
  color: var(--a-fg-strong);
  font-weight: var(--a-weight-semibold);
}

.tooltip-popup[data-follows="pointer"] [data-tip-role="name"] {
  color: var(--a-fg-subtle);
  font-weight: var(--a-weight-normal);
}

.tooltip-popup[data-follows="pointer"] [data-tip-role="value"] {
  font-weight: var(--tooltip-value-weight);
  color: var(--a-fg);
}

.tooltip-popup[data-follows="pointer"] [data-tip-role="pct"] {
  color: var(--a-fg-subtle);
  font-weight: var(--a-weight-normal);
}

/* Indicator variants — dot / line / dashed */
.tooltip-popup[data-follows="pointer"][data-indicator="dot"] [data-indicator] {
  display: inline-block;
  width: var(--tooltip-indicator-size);
  height: var(--tooltip-indicator-size);
  border-radius: 50%;
  background: var(--tooltip-indicator-color, var(--a-data-0));
  flex-shrink: 0;
}

.tooltip-popup[data-follows="pointer"][data-indicator="line"] [data-indicator] {
  display: inline-block;
  width: calc(var(--tooltip-indicator-size) * 1.6);
  height: 2px;
  background: var(--tooltip-indicator-color, var(--a-data-0));
  flex-shrink: 0;
}

.tooltip-popup[data-follows="pointer"][data-indicator="dashed"] [data-indicator] {
  display: inline-block;
  width: calc(var(--tooltip-indicator-size) * 1.6);
  border-top: 2px dashed var(--tooltip-indicator-color, var(--a-data-0));
  flex-shrink: 0;
}

.tooltip-popup[data-follows="pointer"][data-indicator="none"] [data-indicator] {
  display: none;
}
