@layer components {

/* ── ds-tooltip ─────────────────────────────────────────────────────────
 * MUI Tooltip — dark charcoal pill, white text, single concise line.
 *
 * Reference: MODEC tooltip guideline (Image #117): "Briefly describe a UI
 * element. Avoid wrapping text to multiple lines or including many pieces
 * of information. Use popover for longer text."
 *
 * Usage (CSS-only, no JS needed):
 *
 *   <button data-tooltip="Collapse sidebar" aria-label="Collapse sidebar">…</button>
 *   <button data-tooltip="Refresh" data-tooltip-place="bottom">…</button>
 *
 * Attributes:
 *   data-tooltip="…"                 — the tooltip text. Required.
 *   data-tooltip-place="top|bottom|left|right"
 *                                    — placement relative to anchor (default: bottom).
 *   data-tooltip-multiline           — opt-in wrap up to 240px; otherwise nowrap.
 *
 * Accessibility:
 *   Always pair with `aria-label` (or visible text) so screen readers can
 *   announce the element. `data-tooltip` is presentation-only — don't
 *   put critical information in it that's not also accessible.
 *
 * Why CSS-only and not JS-anchored (like MUI Popper):
 *   No bundler in this codebase, and these tooltips are short labels on
 *   icon buttons in the chrome — overflow:visible parents, no scroll
 *   container clipping. A pseudo-element bubble is sufficient. Richer
 *   floating cards (chart hover, structured data) keep using
 *   .ds-chart-tooltip — that's a different component for a different job.
 * ─────────────────────────────────────────────────────────────────────── */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 9999;

  /* Solid MUI grey.700 + white text. `!important` on color defends
   * against ancestor `color:` rules that would otherwise inherit into
   * the ::after pseudo (e.g. icon buttons whose own `color:` is dark
   * for the SVG `currentColor`) — without the override the tooltip
   * text would render dim against the charcoal background. */
  background: #616161;
  color: #fff !important;

  font-family: var(--font-family-sans, "Noto Sans", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-shadow: none;

  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;

  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  /* MUI motion: 100ms fade, 200ms enter delay, 0ms exit delay. */
  transition:
    opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 100ms;

  /* Default placement: below the anchor, horizontally centered. */
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 200ms, 0s;
}

/* ── Placement variants ──────────────────────────────────────────────── */

[data-tooltip][data-tooltip-place="top"]::after {
  top: auto;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}

[data-tooltip][data-tooltip-place="left"]::after {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + 6px);
  transform: translateY(-50%);
}

[data-tooltip][data-tooltip-place="right"]::after {
  top: 50%;
  bottom: auto;
  left: calc(100% + 6px);
  right: auto;
  transform: translateY(-50%);
}

/* ── Opt-in multi-line wrap (use sparingly — popover is preferred per MUI) ── */
[data-tooltip][data-tooltip-multiline]::after {
  white-space: normal;
  max-width: 240px;
  text-align: center;
}

} /* end @layer components */