/**
 * Citations: numbers in the text, the pop-up / inline note, and the list.
 */

/* Number in the text */
.curio-fn {
	padding: 0 2px;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: super;
}

/* Inline (not inline-block): an inline-block counts as its own "word", so the
   number could wrap to the start of the next line on narrow screens. */
.curio-fn__ref,
.curio-rich-text .curio-fn__ref {
	position: relative;
	display: inline;
	padding: 0 2px;
	border-radius: 2px;
	color: var(--c-link);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/* A 24x24px tap/click area around the small number (WCAG 2.5.8), without
   changing the line height or how the number looks. */
.curio-fn__ref::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	min-width: 1.5rem;
	height: 1.5rem;
	transform: translate(-50%, -50%);
}

.curio-fn__ref:hover,
.curio-fn__ref[aria-expanded="true"] {
	background-color: var(--c-gray-light);
	text-decoration: none;
}

.curio-fn__ref:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 1px;
}

/* Notes stay hidden in the text; the script shows them. */
.curio-fn__note[hidden] {
	display: none;
}

/* Phones: the note opens as a block under the line. */
.curio-fn__note.is-inline {
	display: block;
	margin: 0.75em 0;
	padding: 0.625em 0.875em;
	border-left: 3px solid var(--c-tag);
	background-color: var(--c-gray-light);
	color: var(--c-gray-mid);
	font-size: 0.8125rem;
	line-height: 1.45;
	animation: curio-fn-drop 0.2s ease-out;
}

/* Desktop pop-up: the same note, placed under the number by the script
   (positioned inside its paragraph, so it moves with the text). */
.curio-fn__note.is-pop {
	position: absolute;
	z-index: 20;
	display: block;
	box-sizing: border-box;
	max-width: 36rem;
	margin: 0;
	padding: 0.75rem 1.25rem 0.875rem;
	border: 1px solid var(--c-gray-mid);
	border-radius: 3px;
	background-color: var(--c-white);
	box-shadow: 0 6px 18px rgba(20, 18, 28, 0.12);
	color: var(--c-gray-mid);
	font-family: var(--f-primary);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 300;
	letter-spacing: normal;
	line-height: 1.5;
	text-align: left;
	text-indent: 0;
	text-transform: none;
	white-space: normal;
	vertical-align: baseline;
	animation: curio-fn-drop 0.18s ease-out;
}

/* Connector line from the number to the pop-up. */
.curio-fn__note.is-pop::before {
	content: "";
	position: absolute;
	top: -0.625rem;
	left: var(--curio-fn-x, 2.25rem);
	width: 1px;
	height: 0.625rem;
	background-color: var(--c-gray-mid);
}

.curio-fn__note a {
	color: var(--c-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.curio-fn__note a:hover {
	color: var(--c-primary);
}

@keyframes curio-fn-drop {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.curio-fn__note.is-pop,
	.curio-fn__note.is-inline {
		animation: none;
	}
}

/* List in the Citations section */
.curio-cites {
	margin: 0;
	padding: 0;
	list-style: none;
}

.curio-cite {
	display: flex;
	gap: 0.75rem;
	scroll-margin-top: 6rem;
}

.curio-cite + .curio-cite {
	margin-top: 0.375rem;
}

.curio-cite__num {
	flex: 0 0 1.5rem;
	color: var(--c-gray-mid);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.curio-cite__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.curio-cite__text a {
	color: var(--c-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.curio-cite:target {
	background-color: var(--c-gray-light);
}

@media print {
	.curio-fn__note {
		display: none !important;
	}
}