/* ============================================================
 * Platform tooltip — macOS help-tag.
 *
 * Spec: specs/ui-platform.yaml > components.tooltip
 *
 * Single instance teleported to document.body by app/js/ui/tooltip/.
 * Hidden by default; visible when [data-visible="true"] is set by
 * the JS module after motion.tooltip_delay_ms of hover.
 *
 * All values resolve through CSS variables (theme palette + structural
 * tokens declared in app/next/css/themes.css). No literal pixel/colour
 * values live here — token-only per spec §cascade-doctrine.
 * ============================================================ */

@layer platform {
  .sift-tooltip {
    position: fixed;
    z-index: var(--z-tooltip);
    pointer-events: none;

    /* Position — JS writes --tip-x / --tip-y as inline custom properties.
       MSoT-friendly: the CSS positions via var(), JS only feeds coordinates. */
    left: var(--tip-x, 0);
    top:  var(--tip-y, 0);

    /* Geometry — spec §components.tooltip.geometry */
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-md);
    font-family: var(--font-family, inherit);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.4;
    max-width: var(--tooltip-max-width);
    /* Help-tag is single-line by default; long labels wrap inside max-width. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Palette — wired via theme.color.tooltip_* in themes.css */
    background: var(--tooltip-bg);
    color:      var(--tooltip-fg);
    border: 1px solid var(--tooltip-border);
    box-shadow: var(--lf-shadow-tooltip);

    /* Motion — fade only, no position animation (spec non-goals). */
    opacity: 0;
    transition: opacity var(--motion-tooltip-fade) ease-out;
  }

  .sift-tooltip[data-visible="true"] {
    opacity: 1;
  }

  /* Optional keyboard-shortcut suffix.
     Set via [data-tip-kbd] on the target; module renders into this slot. */
  .sift-tooltip__kbd {
    margin-left: var(--sp-2);     /* spec §geometry.gap_kbd */
    font-size: 0.92em;
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    color: var(--tooltip-kbd-fg);
  }

  /* Touch devices — never show; module also bails out of event listeners. */
  @media (hover: none) {
    .sift-tooltip { display: none !important; }
  }

  /* Reduced motion — drop the fade. */
  @media (prefers-reduced-motion: reduce) {
    .sift-tooltip { transition: none; }
  }
}