/* ─────────────────────────────────────────────────────────────────
   FA Glossary
   Inline clickable terms + right-side overlay sidebar.

   Brand notes:
   - Inline indicator uses warm cream (#F4EBE0) tint and brown icon
     (#8B6F4A) — distinct from FA's primary red but warm/inviting.
   - Panel uses neutral white + Near Black (#1C1D21) text per brand
     palette. Backdrop uses Near Black at low opacity.
   ───────────────────────────────────────────────────────────────── */

/* ── Inline indicator ─────────────────────────────────────────── */

.fa-gloss-term {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	padding: 0.05em 0.4em;
	margin: 0;
	background-color: #E8F2F6; /* pale blue, derived from Light Ice Blue #CCEAF1 */
	border: 0;
	border-radius: 0.25em;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.fa-gloss-term:hover {
	background-color: #D6E5EC;
}

.fa-gloss-term:focus-visible {
	outline: none;
	background-color: #D6E5EC;
	box-shadow: 0 0 0 2px rgba( 195, 63, 63, 0.45 );
}

.fa-gloss-icon {
	width: 0.95em;
	height: 0.95em;
	color: #5C8AA0; /* slate blue — visible against pale blue tint */
	flex-shrink: 0;
	transform: translateY( 0.1em ); /* nudge icon to optical center */
}

.fa-gloss-label {
	/* Inherits everything from surrounding text */
}

/* ── Backdrop ─────────────────────────────────────────────────── */

.fa-gloss-backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba( 28, 29, 33, 0.4 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 99998;
}

.fa-gloss-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ── Side panel (desktop) ─────────────────────────────────────── */

.fa-gloss-panel {
	position: fixed;
	top: 12px;
	right: 12px;
	bottom: 12px;
	width: min( 28vw, 480px );
	min-width: 360px;
	max-width: calc( 100vw - 24px );
	background-color: #FCFAF8; /* match course content page background */
	border-radius: 16px;
	box-shadow: 0 12px 48px rgba( 0, 0, 0, 0.14 ), 0 2px 8px rgba( 0, 0, 0, 0.04 );
	transform: translateX( calc( 100% + 24px ) );
	transition: transform 0.25s cubic-bezier( 0.4, 0, 0.2, 1 );
	z-index: 99999;
	display: flex;
	flex-direction: column;
	outline: none;
}

.fa-gloss-panel.is-open {
	transform: translateX( 0 );
}

.fa-gloss-close {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 32px;
	height: 32px;
	padding: 6px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #1C1D21;
	cursor: pointer;
	transition: background-color 0.15s ease;
	z-index: 1;
}

.fa-gloss-close:hover {
	background-color: #F2F4F5;
}

.fa-gloss-close:focus-visible {
	outline: none;
	background-color: #F2F4F5;
	box-shadow: 0 0 0 2px rgba( 195, 63, 63, 0.45 );
}

.fa-gloss-close svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fa-gloss-panel-inner {
	flex: 1;
	overflow-y: auto;
	padding: 64px 32px 32px;
	border-radius: 16px;
	-webkit-overflow-scrolling: touch;
}

.fa-gloss-panel-title {
	margin: 0 0 16px;
	font-size: 1.5rem;
	font-weight: 600;
	color: #1C1D21;
	line-height: 1.25;
}

.fa-gloss-panel-body {
	color: #333333;
	font-size: 1rem;
	line-height: 1.6;
}

.fa-gloss-panel-body p {
	margin: 0 0 1em;
}

.fa-gloss-panel-body p:last-child {
	margin-bottom: 0;
}

.fa-gloss-panel-body ul,
.fa-gloss-panel-body ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

.fa-gloss-panel-body li {
	margin-bottom: 0.4em;
}

.fa-gloss-panel-body strong {
	color: #1C1D21;
}

.fa-gloss-panel-body code {
	background-color: #F2F4F5;
	padding: 0.1em 0.3em;
	border-radius: 0.25em;
	font-size: 0.9em;
}

.fa-gloss-panel-body a {
	color: #C33F3F;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fa-gloss-panel-body a:hover {
	text-decoration-thickness: 2px;
}

/* Prevent background scroll-bleed when panel is open on desktop. */
body.fa-gloss-open {
	overflow: hidden;
}

/* ── Mobile: bottom sheet ─────────────────────────────────────── */

@media ( max-width: 768px ) {
	.fa-gloss-panel {
		top: auto;
		bottom: 12px;
		right: 12px;
		left: 12px;
		width: auto;
		min-width: 0;
		max-width: none;
		height: 80vh;
		transform: translateY( calc( 100% + 24px ) );
		border-radius: 16px;
		box-shadow: 0 -4px 24px rgba( 0, 0, 0, 0.14 ), 0 2px 8px rgba( 0, 0, 0, 0.04 );
	}

	.fa-gloss-panel.is-open {
		transform: translateY( 0 );
	}

	/* Mobile grabber handle — visual cue that the sheet is dismissable */
	.fa-gloss-panel::before {
		content: '';
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		background-color: #DEDFE2;
		border-radius: 2px;
		transform: translateX( -50% );
		pointer-events: none;
	}

	.fa-gloss-close {
		top: 18px;
		left: auto;
		right: 12px;
	}

	.fa-gloss-panel-inner {
		padding: 56px 24px 24px;
	}
}

/* ── Print: render terms as plain text ────────────────────────── */

@media print {
	.fa-gloss-term {
		background: transparent;
		padding: 0;
	}

	.fa-gloss-icon {
		display: none;
	}

	.fa-gloss-backdrop,
	.fa-gloss-panel {
		display: none !important;
	}
}