/* ==========================================================================
   global-tooltip — the platform hover / focus bubble (ADR-131 atom)
   ==========================================================================

   ONE dark glass bubble, two renderers, so the look is declared once:

     1. .global-tooltip — a single <div> appended to <body> by accessibility.js,
        which owns every [data-tooltip] element via delegated listeners. It is
        position:fixed, so no overflow:hidden ancestor can clip it and no
        stacking context can trap it, and the JS flips it to the opposite side
        and clamps it to the viewport when the preferred side would run off the
        page. The 300ms hover dwell is a setTimeout in the JS, so the fade here
        carries no delay of its own.
     2. .global-tooltip--rich — a Bootstrap tooltip carrying a header plus
        label/value rows (skill ratings). Applied via data-bs-custom-class.

   Everything below is on tokens: no raw hex, no raw radius, no raw shadow.
   Geometry rides --radius-card and elevation rides --shadow-modal (the shared
   overlay tokens), so the bubble can't drift from every other floating surface.
   The bubble's own glass fill lives in the custom properties here so the two
   renderers cannot drift apart from each other again.
   ========================================================================== */

:root {
    --global-tooltip-bg: rgba(15, 15, 15, 0.92);
    --global-tooltip-bg-rich: rgba(15, 15, 15, 0.95);

    --global-tooltip-border-color: rgba(255, 255, 255, 0.08);
    --global-tooltip-rule: rgba(255, 255, 255, 0.2);

    /* Text on the glass. The bright value is the ink-surface foreground token;
       the two dimmed steps stay alpha-based so they read through the blur. */
    --global-tooltip-fg-muted: rgba(255, 255, 255, 0.85);
    --global-tooltip-fg-faint: rgba(255, 255, 255, 0.6);

    --global-tooltip-blur: 12px;

    --global-tooltip-pad-y: var(--spacing-xsm);
    --global-tooltip-pad-x: var(--spacing-smd);
    --global-tooltip-weight: 500;
    --global-tooltip-leading: 1.4;
    --global-tooltip-max-w: 16rem;

    --global-tooltip-fade: 150ms;
}

.global-tooltip {
    position: fixed;
    z-index: var(--z-portal);
    width: max-content;
    max-width: var(--global-tooltip-max-w);
    padding: var(--global-tooltip-pad-y) var(--global-tooltip-pad-x);
    font-size: var(--font-size-sm);
    font-weight: var(--global-tooltip-weight);
    line-height: var(--global-tooltip-leading);
    color: var(--color-neutral-ink-fg);
    /* Shrink-to-fit but capped: short tips stay on one tight line, long ones
       wrap into a box instead of running off the side of a drawer. Multi-line
       tooltips (a name over its roles) arrive as "\n" in the attribute, so
       honour it and centre the stack. */
    white-space: pre-line;
    text-align: center;
    overflow-wrap: break-word;
    background: var(--global-tooltip-bg);
    backdrop-filter: blur(var(--global-tooltip-blur));
    -webkit-backdrop-filter: blur(var(--global-tooltip-blur));
    border: 1px solid var(--global-tooltip-border-color);
    border-radius: var(--radius-card);
    /* Overlay/drawer elevation token — the tooltip floats over app chrome. */
    box-shadow: var(--shadow-modal);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--global-tooltip-fade) ease-out,
        visibility var(--global-tooltip-fade) ease-out;
}

.global-tooltip--visible {
    opacity: 1;
    visibility: visible;
}

.tooltip.global-tooltip--rich {
    --bs-tooltip-max-width: 280px;
    --bs-tooltip-bg: var(--global-tooltip-bg-rich);
    --bs-tooltip-padding-x: 0.875rem;
    --bs-tooltip-padding-y: 0.75rem;
}

.tooltip.global-tooltip--rich .tooltip-inner {
    max-width: var(--bs-tooltip-max-width);
    text-align: left;
}

.global-tooltip__body {
    min-width: 180px;
}

.global-tooltip__header {
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xsm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-ink-fg);
    border-bottom: 1px solid var(--global-tooltip-rule);
}

.global-tooltip__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-xs);
}

.global-tooltip__label {
    margin-right: var(--spacing-smd);
    color: var(--global-tooltip-fg-muted);
}

.global-tooltip__value {
    white-space: nowrap;
}

.global-tooltip__value .workers-rating-value {
    margin-right: var(--spacing-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-ink-fg);
}

.global-tooltip__value .workers-rating-stars {
    color: var(--color-warning);
    letter-spacing: 0;
}

.global-tooltip__value .workers-rating-count {
    margin-left: var(--spacing-xs);
    color: var(--global-tooltip-fg-faint);
}