/* ---------------------------------------------------------------------------
   The guided tour.

   The dim and the hole are one element, not two: a box-shadow large enough to
   cover the viewport, cast outward from a transparent rectangle. That way the
   highlighted control is genuinely visible rather than shown through a hole cut
   in an overlay, and there is nothing between the reader and what it points at.
   --------------------------------------------------------------------------- */
.ci-tour-open {
	overflow: hidden;
}

.ci-tour {
	position: fixed;
	inset: 0;
	/* Above the compound panel, which sits at --ci-modal-layer (1000) and its
	   scrim one above that. The tour walks the reader through that panel, so it
	   has to be over it. */
	z-index: calc(var(--ci-modal-layer, 1000) + 100);
}

/* Catches a click anywhere off the highlight, which ends the tour. */
.ci-tour__veil {
	position: absolute;
	inset: 0;
}

.ci-tour__hole {
	position: absolute;
	border-radius: 12px;
	box-shadow: 0 0 0 9999px rgba(10, 14, 28, .62);
	transition: top .28s cubic-bezier(.4, 0, .2, 1),
		left .28s cubic-bezier(.4, 0, .2, 1),
		width .28s cubic-bezier(.4, 0, .2, 1),
		height .28s cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
}

/* A ring, so the highlight is still visible against a dark control. */
.ci-tour__hole::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid #254CFE;
	border-radius: inherit;
}

.ci-tour__box {
	position: absolute;
	width: min(360px, calc(100vw - 32px));
	padding: 20px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 60px -20px rgba(10, 14, 28, .5);
}

.ci-tour__box.is-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ci-tour__step {
	margin: 0 0 6px;
	font-family: var(--ci-mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8891A8;
}

.ci-tour__title {
	margin: 0 0 8px;
	font-family: var(--body, 'PT Serif', Georgia, serif);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: #131B2E;
}

.ci-tour__body {
	margin: 0 0 18px;
	font-family: var(--body, 'PT Serif', Georgia, serif);
	font-size: 14.5px;
	line-height: 1.6;
	color: #4A5060;
}

.ci-tour__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ci-tour__nav {
	display: inline-flex;
	gap: 8px;
}

.ci-tour button {
	font-family: inherit;
	cursor: pointer;
	border-radius: 8px;
}

.ci-tour__skip {
	padding: 8px 4px;
	border: 0;
	background: none;
	font-size: 13.5px;
	color: #8891A8;
}

.ci-tour__skip:hover {
	color: #131B2E;
}

.ci-tour__back {
	padding: 9px 14px;
	border: 1px solid #C7D0E8;
	background: #fff;
	font-size: 13.5px;
	font-weight: 650;
	color: #131B2E;
}

.ci-tour__next {
	padding: 9px 18px;
	border: 1px solid transparent;
	background: #254CFE;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
}

.ci-tour__next:hover {
	filter: brightness(1.08);
}

.ci-tour button:focus-visible {
	outline: 2px solid #254CFE;
	outline-offset: 2px;
}

/* The replay button in the masthead. */
.ci-tour-start {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	padding: 7px 13px;
	border: 1px solid #C7D0E8;
	border-radius: 8px;
	background: #fff;
	font-family: var(--ci-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #4A5060;
	cursor: pointer;
}

.ci-tour-start:hover {
	border-color: #254CFE;
	color: #254CFE;
}

.ci-tour-start svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

@media (max-width: 640px) {
	.ci-tour__box {
		/* Pinned to the bottom on a phone: positioning a card next to a control
		   on a small screen tends to put it half off the edge. */
		top: auto !important;
		bottom: 16px;
		left: 16px !important;
		right: 16px;
		width: auto;
	}

	.ci-tour__box.is-center {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ci-tour__hole {
		transition: none;
	}
}

/* While the panel is being fetched: the dim stays, the card says nothing new,
   and the ring is hidden rather than left pointing at the tile that has just
   been covered. */
.ci-tour.is-waiting .ci-tour__hole {
	opacity: 0;
}

.ci-tour.is-waiting .ci-tour__box {
	opacity: .55;
	pointer-events: none;
}