/* =============================================================================
   Beacon Tooltip System
   Unified tooltip styling for all Beacon pages

   USAGE:
   ─────
   1. Include this file:
      <link rel="stylesheet" href="/assets/css/components/beacon-tooltips.css">

   2. Tier 1 — Simple text (pure CSS, zero JS):
      <button data-beacon-tooltip="Save layout (Ctrl+S)">💾</button>

      Positioning modifiers (optional, default is bottom-center):
      data-beacon-tooltip-pos="top"
      data-beacon-tooltip-pos="left"
      data-beacon-tooltip-pos="right"
      data-beacon-tooltip-pos="bottom"   (default)

   3. Tier 2 — Rich content panel (JS-positioned):
      <div class="beacon-tooltip-panel">
        <h4>Panel Heading</h4>
        <p>Explanatory body text.</p>
        <pre class="beacon-tooltip-code">code example</pre>
      </div>
      Show/hide by toggling .is-visible on the panel element.

   DESIGN TOKENS USED:
   --z-tooltip (from design-system.css)
   --color-primary-rgb / --glow-blue
   --font-primary
   --radius-sm
============================================================================= */
/* =============================================================================
   TIER 1 — data-beacon-tooltip (Pure CSS)
   Attribute-driven, no JS required
============================================================================= */
[data-beacon-tooltip] {
    position: relative;
}
[data-beacon-tooltip]::after {
    content: attr(data-beacon-tooltip);
    position: absolute;
    z-index: var(--z-tooltip, 10000);
    /* Visual */
    background: rgba(15, 20, 32, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--glow-blue, 107, 182, 255), 0.35);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(var(--glow-blue, 107, 182, 255), 0.08);
    /* Typography */
    font-family: var(--font-primary, 'Inter', 'Segoe UI', Arial, sans-serif);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
    white-space: normal;
    letter-spacing: 0.01em;
    /* Sizing */
    padding: 7px 11px;
    max-width: 260px;
    width: max-content;
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
/* Arrow base */
[data-beacon-tooltip]::before {
    content: '';
    position: absolute;
    z-index: var(--z-tooltip, 10000);
    border: 5px solid transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
/* ── Bottom (default) ────────────────────────────────────── */
[data-beacon-tooltip]:not([data-beacon-tooltip-pos])::after,
[data-beacon-tooltip][data-beacon-tooltip-pos="bottom"]::after {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}
[data-beacon-tooltip]:not([data-beacon-tooltip-pos])::before,
[data-beacon-tooltip][data-beacon-tooltip-pos="bottom"]::before {
    top: calc(100% + -2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border-bottom-color: rgba(var(--glow-blue, 107, 182, 255), 0.3);
}
/* ── Top ─────────────────────────────────────────────────── */
[data-beacon-tooltip][data-beacon-tooltip-pos="top"]::after {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}
[data-beacon-tooltip][data-beacon-tooltip-pos="top"]::before {
    bottom: calc(100% + -2px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    border-top-color: rgba(var(--glow-blue, 107, 182, 255), 0.3);
}
/* ── Left ────────────────────────────────────────────────── */
[data-beacon-tooltip][data-beacon-tooltip-pos="left"]::after {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}
[data-beacon-tooltip][data-beacon-tooltip-pos="left"]::before {
    right: calc(100% + -2px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    border-left-color: rgba(var(--glow-blue, 107, 182, 255), 0.3);
}
/* ── Right ───────────────────────────────────────────────── */
[data-beacon-tooltip][data-beacon-tooltip-pos="right"]::after {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}
[data-beacon-tooltip][data-beacon-tooltip-pos="right"]::before {
    left: calc(100% + -2px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    border-right-color: rgba(var(--glow-blue, 107, 182, 255), 0.3);
}
/* ── Hover State — all positions ─────────────────────────── */
[data-beacon-tooltip]:hover::after,
[data-beacon-tooltip]:hover::before,
[data-beacon-tooltip]:focus-visible::after,
[data-beacon-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    /* reset the slide-in offset */
}
/* Fix non-centered positions on hover */
[data-beacon-tooltip][data-beacon-tooltip-pos="top"]:hover::after,
[data-beacon-tooltip][data-beacon-tooltip-pos="top"]:focus-visible::after,
[data-beacon-tooltip]:not([data-beacon-tooltip-pos]):hover::after,
[data-beacon-tooltip]:not([data-beacon-tooltip-pos]):focus-visible::after,
[data-beacon-tooltip][data-beacon-tooltip-pos="bottom"]:hover::after,
[data-beacon-tooltip][data-beacon-tooltip-pos="bottom"]:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}
[data-beacon-tooltip][data-beacon-tooltip-pos="top"]:hover::before,
[data-beacon-tooltip][data-beacon-tooltip-pos="top"]:focus-visible::before,
[data-beacon-tooltip]:not([data-beacon-tooltip-pos]):hover::before,
[data-beacon-tooltip]:not([data-beacon-tooltip-pos]):focus-visible::before,
[data-beacon-tooltip][data-beacon-tooltip-pos="bottom"]:hover::before,
[data-beacon-tooltip][data-beacon-tooltip-pos="bottom"]:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}
[data-beacon-tooltip][data-beacon-tooltip-pos="left"]:hover::after,
[data-beacon-tooltip][data-beacon-tooltip-pos="left"]:hover::before,
[data-beacon-tooltip][data-beacon-tooltip-pos="left"]:focus-visible::after,
[data-beacon-tooltip][data-beacon-tooltip-pos="left"]:focus-visible::before {
    transform: translateY(-50%) translateX(0);
}
[data-beacon-tooltip][data-beacon-tooltip-pos="right"]:hover::after,
[data-beacon-tooltip][data-beacon-tooltip-pos="right"]:hover::before,
[data-beacon-tooltip][data-beacon-tooltip-pos="right"]:focus-visible::after,
[data-beacon-tooltip][data-beacon-tooltip-pos="right"]:focus-visible::before {
    transform: translateY(-50%) translateX(0);
}
/* ── Wide variant — for longer descriptions ──────────────── */
[data-beacon-tooltip-size="wide"]::after {
    max-width: 340px;
}
/* =============================================================================
   TIER 2 — .beacon-tooltip-panel (Rich Content, JS-positioned)
   Same visual language, supports headings / paragraphs / code blocks
============================================================================= */
.beacon-tooltip-panel {
    position: fixed;
    z-index: var(--z-tooltip, 10000);
    /* Visual — same as Tier 1 */
    background: rgba(15, 20, 32, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--glow-blue, 107, 182, 255), 0.35);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55),
        0 0 10px rgba(var(--glow-blue, 107, 182, 255), 0.08);
    /* Typography */
    font-family: var(--font-primary, 'Inter', 'Segoe UI', Arial, sans-serif);
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    /* Sizing */
    padding: 12px 16px;
    min-width: 240px;
    max-width: 360px;
    /* Hidden by default */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
    isolation: isolate;
}
/* Arrow — points upward by default */
.beacon-tooltip-panel::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(var(--glow-blue, 107, 182, 255), 0.3);
}
/* Left-aligned arrow variant (e.g. banners) */
.beacon-tooltip-panel--arrow-left::before {
    left: 24px;
    transform: none;
}
/* Visible state — toggle via JS */
.beacon-tooltip-panel.is-visible {
    visibility: visible;
    opacity: 1;
}
/* ── Rich content elements ─────────────────────────────── */
.beacon-tooltip-panel h4 {
    margin: 0 0 6px 0;
    color: rgba(var(--glow-blue, 107, 182, 255), 1);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.beacon-tooltip-panel p {
    margin: 0 0 6px 0;
    color: rgba(255, 255, 255, 0.82);
}
.beacon-tooltip-panel p:last-child {
    margin-bottom: 0;
}
.beacon-tooltip-code {
    display: block;
    background: rgba(var(--glow-blue, 107, 182, 255), 0.08);
    border: 1px solid rgba(var(--glow-blue, 107, 182, 255), 0.15);
    border-radius: 4px;
    padding: 8px 10px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    margin: 6px 0 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}