/* Help cards -- the floating launcher and the ?hl= "show me" pulse.
   Colours are Bootstrap --bs-* variables so both light and dark mode work
   without a second rule (see the CSS conventions note). */

.avHelpBtn {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	z-index: 1035;          /* under the offcanvas (1045), over page content */
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
}

/* The bottom-right corner is where thumbs land on a phone, and several screens
   already put a primary action there. Shrink and lift slightly on small
   viewports rather than covering it. */
@media (max-width: 575.98px) {
	.avHelpBtn { width: 38px; height: 38px; font-size: 1rem; right: .6rem; bottom: 4.2rem; }
}

@media print {
	.avHelpBtn { display: none; }
}

/* "Show me" landed here. Ring the real control for a few seconds -- this is
   what replaces a screenshot library, so it has to read clearly against any
   background without knowing what it is wrapping. */
.avHelpPulse {
	animation: avHelpPulse 1.4s ease-out 3;
	border-radius: var(--bs-border-radius);
	outline: 2px solid var(--bs-primary);
	outline-offset: 3px;
}

@keyframes avHelpPulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .55); }
	70%  { box-shadow: 0 0 0 .65rem rgba(var(--bs-primary-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
	.avHelpPulse { animation: none; }
}

#avHelpPanel { width: 26rem; max-width: 92vw; }

#avHelpBody h6:first-child { margin-top: 0 !important; }
#avHelpBody ul { margin-bottom: .5rem; }