fix(tooltip): caret matches the panel + soft shadow (no longer a black blob)

Follow-up to the un-clip fix (c3def5d6). With the caret no longer clipped it was
visible, but it rendered in `currentColor` (the dark text colour) — a black triangle
on a light panel. Colour it to the panel bg (a seamless caret) + the panel border on
the two exposed edges, and give it its own `drop-shadow` so the matched (light) caret
still reads against the page — the panel's box-shadow is rectangular and never reaches
the caret. This is the "matched + visible" caret (the drop-shadow-on-the-silhouette
idea) now that overflow:visible lets it show.

VERIFICATION CAVEAT: confirmed the colour at the computed-style level (polygon fill ==
panel background, was the dark text colour). Could NOT capture a stable screenshot —
the demo tooltip closes on every programmatic/cursor interaction, so the visual pop of
the drop-shadow is unverified here. If the matched caret reads too faint, bump the
drop-shadow alpha or fall back to the darker caret.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/uix/eidos/components/tooltip/tooltip.css

@@ -78,22 +78,48 @@
 
 /* ── Arrow ──────────────────────────────────────────────────────────────── */
 
-/* `display: block` keeps the SVG off the text baseline. Inline added ~21px of
- * phantom height, which both misaligned the caret AND — since the positioner adds
- * the measured arrow height to the gap (`offset = sideOffset + arrowHeight`) —
- * pushed the panel too far from the trigger. This is the fix that mattered.
- *
- * The caret colour is left as `currentColor` (the panel's dark text colour), the
- * long-standing behaviour: it reads against the page. Matching the caret to the
- * panel bg is technically "correct" (a seamless extension) but makes it INVISIBLE
- * on a light-on-light tooltip — the panel is defined by its box-shadow, which the
- * separate caret element doesn't share. A properly matched-and-visible caret needs
- * its own drop-shadow; deferred until that can be verified. */
+/* `display: block` keeps the SVG off the text baseline — inline added ~21px of
+ * phantom height that both misaligned the caret AND pushed the panel too far from
+ * the trigger (the positioner adds the measured arrow height to the gap). */
 [data-tooltip-arrow] svg {
 	display: block;
 	overflow: visible;
 }
 
+/* Colour the SVG shapes directly — the polygon/path carry `fill`/`stroke =
+ * "currentColor"` presentation attributes that a `fill`/`stroke` on the wrapping
+ * <span> can't override. The body matches the panel bg (a seamless caret, not a
+ * dark blob) and the two exposed edges take the panel border. Now that the content
+ * is `overflow: visible` (the caret is no longer clipped), that border outline is
+ * what makes the matched caret read against the page — same as the popover. */
+[data-tooltip-arrow] polygon {
+	fill: var(--_tooltip-bg, var(--tooltip-bg));
+	stroke: none;
+}
+
+[data-tooltip-arrow] path {
+	stroke: var(--_tooltip-border, var(--tooltip-border));
+	stroke-width: var(--tooltip-border-width);
+	vector-effect: non-scaling-stroke;
+}
+
+/* The caret shares the panel bg, so it needs its own soft shadow to read against
+ * the page — the panel's box-shadow is rectangular and stops at the panel edge, so
+ * it never reaches the caret. `drop-shadow` follows the triangle's silhouette. */
+[data-tooltip-arrow] {
+	filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--tooltip-color) 35%, transparent));
+}
+
+/* Outline variant: transparent bg → fill with the surface, stroke the edges. */
+[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] polygon,
+[data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] polygon {
+	fill: var(--color-surface-default);
+}
+[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] path,
+[data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] path {
+	stroke: var(--color-border-strong);
+}
+
 /* ── Entrance / exit ─────────────────────────────────────────────────────────
  * Tooltip morfo's data-state values: 'closed' | 'delayed-open' | 'instant-open'.
  * 'delayed-open' (hover) scales in subtly; 'instant-open' (keyboard focus)