@layer components {

/* ── ds-popover ─────────────────────────────────────────────────────────
 * MUI "Variable width Tooltip" — dark charcoal floating panel for
 * multi-sentence explanations. Sibling component to [[ds-tooltip]];
 * use this when content needs to wrap, ds-tooltip when it's a single
 * concise label on an icon button.
 *
 * Reference:
 *   - MODEC tooltip guideline (Image #117): "Use popover for longer text."
 *   - MUI Tooltip > Variable width (Images #123, #124).
 *
 * Visual: same charcoal background as ds-tooltip so the two read as one
 * family, but:
 *   - text WRAPS (white-space: normal)
 *   - max-width 300px default (matches MUI default), 500px / auto variants
 *   - taller padding (8px 12px) for comfortable reading
 *   - text-align: left
 *   - enter delay 250ms (slightly longer than tooltip's 200ms — long-form
 *     content should reward intent, not surprise on rapid mouseover)
 *
 * Usage (CSS-only, no JS):
 *
 *   <span data-popover="Available (Load < 70%). Current Workload …">
 *     ✅ Available
 *   </span>
 *
 *   <button data-popover="Long explanation…" data-popover-width="500" data-popover-place="top">…</button>
 *
 * Attributes:
 *   data-popover="…"                       — content. Required.
 *   data-popover-place="top|bottom|left|right"
 *                                          — placement (default: bottom).
 *   data-popover-width="300|500|auto"      — max-width preset (default: 300).
 *                                            "auto" = no max-width cap.
 *
 * Accessibility:
 *   The popover is presentation-only. For critical information the trigger
 *   element MUST carry its own accessible label/text or `aria-describedby`
 *   pointing to a hidden description — same rule as ds-tooltip.
 *
 * Do NOT combine `data-popover` and `data-tooltip` on the same element:
 *   they would both fire on hover and overlay each other. Pick one per the
 *   content length: short label → ds-tooltip; multi-sentence → ds-popover.
 * ─────────────────────────────────────────────────────────────────────── */

[data-popover] {
  position: relative;
}

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

  /* Same charcoal as ds-tooltip — visually one family. */
  background: #616161;
  color: #fff !important;

  font-family: var(--font-family-sans, "Noto Sans", sans-serif);
  font-size: 12px;                 /* one notch larger than tooltip 11px — easier to read in paragraphs */
  font-weight: 400;
  letter-spacing: 0.15px;
  line-height: 1.5;                /* MUI body2 line-height */

  padding: 8px 12px;               /* taller than tooltip — matches MUI Popover body padding */
  border-radius: 4px;

  /* Wrap by default — this is the whole point of the component.
   *
   * `width: max-content` is essential: when the trigger element is narrow
   * (a small pill, an icon button, a chart bar), a position:absolute
   * pseudo with `width: auto` shrinks to the available horizontal space
   * inside its containing block — for a 30px pill that's ~15px, and the
   * popover text ends up as a tall vertical strip (1 word per line).
   *
   * `width: max-content` overrides the shrink-to-fit: the element first
   * sizes to the content's *unwrapped* width, then `max-width` caps it
   * and forces wrapping inside the cap. Result: 300px-wide popover that
   * wraps cleanly to ~3-5 lines, regardless of trigger size. */
  white-space: normal;
  width: max-content;
  max-width: 300px;                /* MUI default */
  text-align: left;
  text-shadow: none;

  /* Subtle elevation — popover is informational, slightly above page chrome. */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.10),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);

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

  /* MUI motion. Enter delay is 250ms (vs tooltip's 200ms) — long-form
   * content rewards intentful hovers. Exit is immediate. */
  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% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

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

/* ── Width presets ───────────────────────────────────────────────────── */

[data-popover][data-popover-width="500"]::after { max-width: 500px; }
[data-popover][data-popover-width="auto"]::after { max-width: none; }

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

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

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

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

} /* end @layer components */