@charset "UTF-8";

/**
 * tooltips.css 2.0.0
 * Author: hybrid.
 *
 * Tooltip system — hover (desktop) and click (mobile) behaviors.
 * Requires tooltips.js for positioning and state management.
 * Fixed tooltips rendered in #tooltipContainer (inside #overlays).
 *
 * States
 * default  : .tooltip (hidden)
 * active   : .tooltip.active
 * body     : body.tooltiped (mobile/clickable tooltip open)
 *
 * Variants
 * .is-clickable  — pointer-events enabled, close button visible on mobile
 *
 * Tokens
 * --tooltip-close-icon   icon mask-image for close button (default: --icon-close)
 * --tooltip-close-size   close button tap target size
 *
 * Dependencies
 * tooltips.js            — handles positioning, show/hide, mobile detection
 * icons-vars.css         — --icon-close
 * --bright-color         defined in colors.css
 * --dark-color           defined in colors.css
 * --font-size            defined in fonts.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */

:root {
	/* container */
	--tooltip-container-filter: blur(.25rem);
	--tooltip-container-opacity: .75;
	/* tooltip */
	--tooltip-font-size: var(--font-size);
	--tooltip-text-color: var(--bright-color);
	--tooltip-background-color: var(--dark-color);
	--tooltip-close-icon: var(--icon-close);
	--tooltip-close-size: 2.5rem;
	--tooltip-close-transform: scale(.8);
	--tooltip-padding: 1.25em;
	--tooltip-max-width: 60rem;
	--tooltip-margins: calc(-1 * var(--tooltip-close-size)) 1.25rem 1.25rem;
}

@media (min-width: 760px) {
	#tooltipContainer {
		--tooltip-padding: 2.5em;
	}
}



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== TOOLTIP ============================== */

.tooltip {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	color: var(--tooltip-text-color);
	background: var(--tooltip-background-color);
	border: 0;
	opacity: 0;
	font-size: var(--tooltip-font-size);
	padding: var(--tooltip-padding);
	visibility: hidden;
	pointer-events: none;
}
.tooltip.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* ============================== TOGGLE ============================== */

.tooltip-toggle {
	position: relative;
}

@media (hover: hover) {
	.tooltip-toggle:not(.is-clickable):hover .tooltip {
		opacity: 1;
		visibility: visible;
	}
}
@media (hover: none) {
	.tooltip-toggle:not(.is-clickable).hover .tooltip {
		opacity: 1;
		visibility: visible;
	}
}


/* ============================== CLOSE ============================== */

.tooltip > .tooltip-close {
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tooltip-close-size);
	height: var(--tooltip-close-size);
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}
.tooltip > .tooltip-close::before {
	content: "";
	display: block;
	height: 1em;
	aspect-ratio: 1/1;
	background: currentColor;
	mask-image: var(--tooltip-close-icon);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

@media (hover: hover) {
	.tooltip > .tooltip-close:hover {
		transform: var(--tooltip-close-transform);
	}
}
@media (hover: none) {
	.tooltip > .tooltip-close.hover {
		transform: var(--tooltip-close-transform);
	}
}


/* ============================== BODY TOOLTIPED ============================== */

body.tooltiped main {
	filter: var(--tooltip-container-filter);
	pointer-events: none;
}
body.tooltiped .clickoutside {
	opacity: var(--tooltip-container-opacity);
	visibility: visible;
	pointer-events: auto;
}


/* ============================== CONTAINER ============================== */

#tooltipContainer {
	position: fixed;
	z-index: 2000;
	inset: 0;
	pointer-events: none;
	overflow: visible;
}
#tooltipContainer .tooltip {
	position: absolute;
	z-index: 2000;
	top: 0;
	left: 0;
	max-width: var(--tooltip-max-width);
	margin: var(--tooltip-margins);
}
#tooltipContainer .tooltip.is-clickable {
	pointer-events: all;
}


/* ============================== MOBILE ============================== */

body.tooltiped #tooltipContainer .tooltip,
body.mobile #tooltipContainer .tooltip {
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	max-width: none;
	pointer-events: all;
}
#tooltipContainer .tooltip .tooltip-close {
	visibility: hidden;
}
body.tooltiped #tooltipContainer .tooltip .tooltip-close,
body.mobile #tooltipContainer .tooltip .tooltip-close {
	visibility: visible;
}
#tooltipContainer .tooltip .tooltip-close + * {
	margin-top: 0;
	margin-right: var(--tooltip-close-size);
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific overrides */

/* ============================== IN GRID ============================== */

.tooltip-toggle .tooltip {
	display: none;
}


/* ============================== IN LIST ============================== */

.grid.list .item .tooltip {
	position: relative;
	z-index: 10;
	top: auto;
	left: auto;
	right: auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	color: var(--dark-color);
	background: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}


/* ============================== CONTENT ============================== */

.tooltip .titles > * {
	padding: 0;
	color: inherit;
	background: none;
}
.tooltip .titles > * + * {
	margin-top: .25em;
}