/* IPIE inline help — trigger, tooltip, popover styles + variant tokens.
 *
 * Two theme scopes:
 *   - `.ipie-help-trigger` base styles + colour tokens.
 *   - `body.wp-admin .ipie-help-trigger` overrides for the admin palette.
 *
 * CSS custom properties (`--ipie-help-info`, etc.) make per-theme tone tuning
 * a one-line override.
 */

:root {
	--ipie-help-info:    var(--ipie-link, #2563eb);   /* blue → site link */
	--ipie-help-question:#16a34a;   /* green */
	--ipie-help-warning: #d97706;   /* amber */
	--ipie-help-panel-bg:        #1f2937;
	--ipie-help-panel-fg:        #f9fafb;
	--ipie-help-panel-border:    transparent;
	--ipie-help-popover-bg:      #ffffff;
	--ipie-help-popover-fg:      #111827;
	--ipie-help-popover-border:  #e5e7eb;
	--ipie-help-link:            var(--ipie-link, #2563eb);
}

body.wp-admin {
	--ipie-help-info:           var(--ipie-link, #2271b1);
	--ipie-help-question:       #00a32a;
	--ipie-help-warning:        #b26200;
	--ipie-help-panel-bg:       #1d2327;
	--ipie-help-panel-fg:       #f6f7f7;
	--ipie-help-popover-bg:     #ffffff;
	--ipie-help-popover-fg:     #1d2327;
	--ipie-help-popover-border: #c3c4c7;
	--ipie-help-link:           var(--ipie-link, #2271b1);
}

/* -------------------------------------------------------------------------
   Trigger button
   ------------------------------------------------------------------------- */

.ipie-help-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;             /* WCAG 2.2 minimum touch target */
	height: 24px;
	padding: 0;
	margin: 0 0 0 0.25em;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--ipie-help-info);
	cursor: pointer;
	vertical-align: middle;
	line-height: 0;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.ipie-help-trigger:hover,
.ipie-help-trigger:focus-visible {
	background: rgba(0, 0, 0, 0.06);
	outline: none;
}

.ipie-help-trigger:focus-visible {
	box-shadow: 0 0 0 2px var(--ipie-help-info);
}

.ipie-help-trigger__icon {
	width: 16px;
	height: 16px;
	display: block;
}

.ipie-help-trigger--info     { color: var(--ipie-help-info); }
.ipie-help-trigger--question { color: var(--ipie-help-question); }
.ipie-help-trigger--warning  { color: var(--ipie-help-warning); }

.ipie-help-trigger--question:focus-visible { box-shadow: 0 0 0 2px var(--ipie-help-question); }
.ipie-help-trigger--warning:focus-visible  { box-shadow: 0 0 0 2px var(--ipie-help-warning); }

/* -------------------------------------------------------------------------
   Panel (shared base — native [popover] element)
   ------------------------------------------------------------------------- */

.ipie-help-panel {
	/* The browser's [popover] UA stylesheet sets `inset: 0; margin: auto`
	   which centres the panel in the viewport. Reset both — Floating UI sets
	   `left` / `top` inline at open time and we want those to be the only
	   positioning inputs (otherwise `right: 0; bottom: 0` stretches the
	   panel down/right from wherever left/top land). */
	position: fixed;
	inset: auto;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	max-width: 90vw;
	font-size: 14px;
	line-height: 1.45;
	box-sizing: border-box;
	z-index: 100000;
	font-family: Arial, Helvetica, sans-serif;
}

.ipie-help-panel:not(:popover-open) {
	display: none;
}

/* -------------------------------------------------------------------------
   Tooltip variant — single line, plain text, dark chip
   ------------------------------------------------------------------------- */

.ipie-help-panel--tooltip {
	padding: 6px 10px;
	background: var(--ipie-help-panel-bg);
	color: var(--ipie-help-panel-fg);
	border-radius: 4px;
	max-width: 280px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* -------------------------------------------------------------------------
   Popover variant — multi-line, may contain limited HTML
   ------------------------------------------------------------------------- */

.ipie-help-panel--popover {
	padding: 12px 14px;
	background: var(--ipie-help-popover-bg);
	color: var(--ipie-help-popover-fg);
	border: 1px solid var(--ipie-help-popover-border);
	border-radius: 6px;
	max-width: 360px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.ipie-help-panel__title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 6px;
	color: inherit;
}

.ipie-help-panel__body p {
	margin: 0 0 0.6em;
}
.ipie-help-panel__body p:last-child { margin-bottom: 0; }

.ipie-help-panel__body ul,
.ipie-help-panel__body ol {
	margin: 0 0 0.6em;
	padding-left: 1.4em;
}

.ipie-help-panel__body a {
	color: var(--ipie-help-link);
	text-decoration: underline;
}

/* Warning popover gets an accent border so the variant reads beyond the icon. */
.ipie-help-panel--warning.ipie-help-panel--popover {
	border-left: 3px solid var(--ipie-help-warning);
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ipie-help-panel { transition: none !important; }
}