/*
 * Glossary (spec 012, US15): inline term triggers, the popover / bottom sheet, and the glossary page. Loaded only on pages
 * that hold a term or the glossary (Frontend\GlossaryTips).
 */

/* The first occurrence of a term becomes a button that looks like the surrounding text with a dotted underline: no change of
   width or line height, so nothing shifts when the script upgrades it. Inside a running sentence that is the WCAG 2.5.8 inline
   exception; a term that is the only content of its cell or list item (glossary.js adds --solo) is NOT in a sentence and gets
   a 24 px high box (below). The dotted line and the pointer tell it can be tapped. */
.ee-term__btn {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-align: inherit;
	text-decoration: underline dotted;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.ee-term__btn--solo {
	display: inline-block;
	min-height: 24px;
	padding-block: 3px;
	box-sizing: border-box;
	vertical-align: middle;
}

.ee-term__btn:hover,
.ee-term__btn[aria-expanded="true"] {
	text-decoration-style: solid;
	background: rgb(211 229 215 / 0.55);
}

.ee-term__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The popover: desktop = a card under the term (the script sets left / top or bottom), phone = a bottom sheet. */
.ee-gl-pop {
	--ee-gl-width: 352px;
	position: fixed;
	inset: auto;
	margin: 0;
	width: min(var(--ee-gl-width), calc(100vw - 16px));
	max-height: min(60vh, 28rem);
	box-sizing: border-box;
	overflow: auto;
	padding: 0.8rem 1rem 0.9rem;
	border: 1px solid var(--ee-line, #cfc8bb);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 32px -10px rgb(0 0 0 / 0.4);
	color: #1a1a1a;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: start;
	text-transform: none;
}

.ee-gl-pop:focus {
	outline: none;
}

.ee-gl-pop:focus-visible {
	outline: 2px solid var(--ee-blue, #243b4a);
	outline-offset: 2px;
}

.ee-gl-pop p {
	margin: 0;
}

.ee-gl-pop__title {
	font-weight: 700;
	color: var(--ee-blue, #243b4a);
}

.ee-gl-pop__def {
	margin-top: 0.25rem;
}

.ee-gl-pop__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-top: 0.6rem;
}

.ee-gl-pop__actions a,
.ee-gl-pop__close {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 0.1rem;
	font: inherit;
	font-weight: 600;
}

.ee-gl-pop__actions a {
	color: var(--ee-blue, #243b4a);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ee-gl-pop__close {
	margin-inline-start: auto;
	border: 0;
	background: none;
	color: #4a4a4a;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ee-gl-pop__actions :is(a, button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

@media (max-width: 639px) {
	.ee-gl-pop {
		inset: auto 0 0 0 !important;
		width: 100%;
		max-height: 40vh;
		max-height: 40dvh;
		border-width: 1px 0 0;
		border-radius: 14px 14px 0 0;
		padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -10px 30px -12px rgb(0 0 0 / 0.45);
	}

	/* While a sheet is open, anything that scrolls into view (focus, scrollIntoView) stops above it (WCAG 2.4.11). */
	html:has(.ee-gl-pop:popover-open) {
		scroll-padding-bottom: 42vh;
	}

	.ee-gl-pop::backdrop {
		background: rgb(0 0 0 / 0.25);
	}

	.ee-gl-pop__actions a,
	.ee-gl-pop__close {
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ee-gl-pop:popover-open {
		animation: ee-gl-in 0.16s ease-out;
	}

	@keyframes ee-gl-in {
		from {
			opacity: 0;
			transform: translateY(6px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* The glossary page. */
.ee-gl {
	max-width: 46rem;
}

.ee-gl__back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.ee-gl__index ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.ee-gl__index a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 0.7rem;
	border: 1px solid var(--ee-line, #cfc8bb);
	border-radius: 999px;
	font-size: 0.9375rem;
	text-decoration: none;
}

.ee-gl__index a:hover {
	background: #eef4ef;
}

.ee-gl__term {
	padding-block: 0.25rem 0.5rem;
	border-top: 1px solid var(--ee-line, #e3ddd2);
}

.ee-gl__term h2 {
	scroll-margin-top: 6rem;
	margin: 1rem 0 0.4rem;
	font-size: 1.35rem;
	line-height: 1.25;
}

.ee-gl__term p {
	margin: 0 0 0.6rem;
}

.ee-gl__term:has(:target) {
	background: #f3f8f4;
	box-shadow: -0.6rem 0 0 #f3f8f4, 0.6rem 0 0 #f3f8f4;
}

.ee-gl__see {
	font-size: 0.9375rem;
	color: #4a4a4a;
}