/* ── Tooltip (icon-only buttons) — ported from the reference app.css ──────
   Opt in by adding  data-tooltip="Label"  to any element. The bubble shows
   on hover AND keyboard focus (focus-visible), so it never sticks after a
   mouse click. Appears BELOW the element by default; add
   data-tooltip-pos="top" to flip it above (use for elements near the bottom
   of the screen, e.g. floating action buttons).

   WARNING (deviation from the reference): the reference guarded its
   position:relative against Tailwind positioning utilities; this app has no
   Tailwind, so the rule applies unconditionally — do NOT decorate elements
   that rely on their own absolute/fixed positioning (an inline `position:`
   still wins). MudBlazor components keep MudTooltip; this system is for
   plain HTML buttons.

   The Profile "Show Tooltips" toggle (TooltipSettingsService) suppresses all
   bubbles by putting .fc-tooltips-off on the app root (MainLayout).

   Tokens: colour/type/elevation map 1:1 onto tokens.css. The bubble gap uses
   --space-1 (8px); the arrow gap subtracts the 5px arrow border from that same
   token so the tip stays flush with the bubble if the token ever changes. The
   remaining literals (6px radius, 6px padding, 5px arrow, 1.2 line-height,
   0.2px tracking) have NO token whose value matches — --radius-sm is 8px and
   --text-xs-lh is 18px, so substituting either would resize the bubble. */

[data-tooltip] { position: relative; }

[data-tooltip]::after,
[data-tooltip]::before {
    position: absolute;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: var(--fc-z-tooltip);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
/* Bubble */
[data-tooltip]::after {
    content: attr(data-tooltip);
    top: calc(100% + var(--space-1));
    transform: translateX(-50%) translateY(-2px);
    background: var(--color-text-primary);
    color: var(--color-surface-default);
    font-family: var(--font-body);
    font-size: var(--text-xs-size);
    font-weight: var(--fw-normal);
    line-height: 1.2;
    letter-spacing: 0.2px;
    white-space: nowrap;
    padding: 6px var(--space-1);
    border-radius: 6px;
    box-shadow: var(--elevation-md);
}
/* Arrow */
[data-tooltip]::before {
    content: "";
    top: calc(100% + var(--space-1) - 5px);
    transform: translateX(-50%) translateY(-2px);
    border: 5px solid transparent;
    border-bottom-color: var(--color-text-primary);
}
/* Top variant — bubble + arrow above the element */
[data-tooltip][data-tooltip-pos="top"]::after {
    top: auto;
    bottom: calc(100% + var(--space-1));
    transform: translateX(-50%) translateY(2px);
}
[data-tooltip][data-tooltip-pos="top"]::before {
    top: auto;
    bottom: calc(100% + var(--space-1) - 5px);
    border: 5px solid transparent;
    border-bottom-color: transparent;
    border-top-color: var(--color-text-primary);
}
/* Reveal on hover / keyboard focus, with a small delay */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0.15s;
}

/* Horizontal alignment — keeps a tooltip inside an overflow:hidden media box
   when its button sits in a corner/edge. "end" pins the bubble's right edge
   to the button and opens leftward; "start" pins the left edge and opens rightward. */
[data-tooltip][data-tooltip-align="end"]::after    { left: auto; right: 0;    transform: translateX(0) translateY(-2px); }
[data-tooltip][data-tooltip-align="end"]::before   { left: auto; right: 12px; transform: translateX(0) translateY(-2px); }
[data-tooltip][data-tooltip-align="start"]::after  { left: 0;               transform: translateX(0) translateY(-2px); }
[data-tooltip][data-tooltip-align="start"]::before { left: 12px;            transform: translateX(0) translateY(-2px); }
[data-tooltip][data-tooltip-align="end"]:hover::after,
[data-tooltip][data-tooltip-align="end"]:hover::before,
[data-tooltip][data-tooltip-align="end"]:focus-visible::after,
[data-tooltip][data-tooltip-align="end"]:focus-visible::before,
[data-tooltip][data-tooltip-align="start"]:hover::after,
[data-tooltip][data-tooltip-align="start"]:hover::before,
[data-tooltip][data-tooltip-align="start"]:focus-visible::after,
[data-tooltip][data-tooltip-align="start"]:focus-visible::before { transform: translateX(0) translateY(0); }

/* Profile "Show Tooltips" OFF — suppress every bubble */
.fc-tooltips-off [data-tooltip]::after,
.fc-tooltips-off [data-tooltip]::before {
    display: none !important;
}