/*
 * Postlinkly tooltip system.
 *
 * Pure CSS — no JS, no library. Uses the [data-tooltip] attribute.
 * Loaded on every Postlinkly admin page.
 * Depends on admin-base.css for design tokens.
 *
 * @package Postlinkly
 * @since   1.1.0
 * @since   1.3.0 Tokenized bubble colours.
 */

/* ==========================================================================
   TOOLTIP
   Any element with [data-tooltip="..."] gets a hover tooltip bubble.
   Scoped under .postlinkly-wrap so design tokens resolve.
   ========================================================================== */

.postlinkly-wrap [data-tooltip] {
	position: relative;
	cursor: default;
}

/* Tooltip bubble */
.postlinkly-wrap [data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--pl-ink);
	color: var(--pl-surface);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	padding: 6px 10px;
	border-radius: var(--pl-radius-sm);
	max-width: 220px;
	white-space: normal;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 9999;
	box-shadow: var(--pl-shadow-md);
	font-family: var(--pl-font-sans);
}

/* Arrow pointing down */
.postlinkly-wrap [data-tooltip]::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 1px);
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--pl-ink);
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 9999;
}

.postlinkly-wrap [data-tooltip]:hover::after,
.postlinkly-wrap [data-tooltip]:focus-within::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.postlinkly-wrap [data-tooltip]:hover::before,
.postlinkly-wrap [data-tooltip]:focus-within::before {
	opacity: 1;
}

/* Left-anchored variant (for last-column elements near the viewport edge) */
.postlinkly-wrap [data-tooltip-pos="left"]::after {
	left: auto;
	right: 0;
	transform: translateX(0) translateY(4px);
}
.postlinkly-wrap [data-tooltip-pos="left"]::before {
	left: auto;
	right: 12px;
	transform: none;
}
.postlinkly-wrap [data-tooltip-pos="left"]:hover::after {
	transform: translateX(0) translateY(0);
}