/**
 * The most-cited list, and the "cited by" page it links to.
 *
 * Deliberately sparse. The list is meant to sit in a sidebar or mid-post in
 * whatever theme is active, so it takes its type and colour from the
 * surrounding content rather than asserting its own — a widget that arrives
 * with opinions about font size is the one that looks wrong everywhere.
 */

/*
 * Numbered, explicitly.
 *
 * Tailwind's Preflight resets `ol, ul, menu { list-style: none }`. Inside post
 * content .prose puts the markers back, but a widget is not .prose — so in a
 * sidebar the list kept this padding and lost its numbers, leaving an indent
 * with nothing in it.
 *
 * The class is doubled to (0,2,0). One class beats the reset's (0,0,1), but
 * inside post content Typography restyles lists with `.prose :where(ol)` — and
 * :where() contributes nothing, leaving that at (0,1,0), a tie that load order
 * settles. The theme loads last, so it was winning: the list kept its padding,
 * which .prose does not set, and lost its margin to `.prose :where(li)`'s
 * 0.5em. Two classes win outright wherever the list is placed.
 */
.footnotes-most-cited__list.footnotes-most-cited__list {
	margin: 0;
	padding-left: 1.25em;
	list-style-type: decimal;
	list-style-position: outside;
}

/*
 * A rule between entries, drawn rather than marked up.
 *
 * <ol> may contain only <li>, so an <hr> between items is invalid — a browser
 * hoists it out of the list and the numbering restarts around it. A separator
 * between list items is what a border is for, and this way the last entry does
 * not need a rule suppressed after it: :not(:last-child) simply never draws
 * one.
 *
 * currentColor at low opacity, so it follows the surrounding text on whatever
 * surface the list lands on rather than assuming a light background.
 */
.footnotes-most-cited__list.footnotes-most-cited__list > .footnotes-most-cited__item {
	padding-bottom: 0.6em;
	margin-bottom: 0.6em;
}

.footnotes-most-cited__list.footnotes-most-cited__list > .footnotes-most-cited__item:not( :last-child ) {
	border-bottom: 1px solid;
	border-bottom-color: color-mix( in srgb, currentColor 18%, transparent );
}

.footnotes-most-cited__list.footnotes-most-cited__list > .footnotes-most-cited__item:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

/*
 * The reference itself, in the site's referencing style. Block, so the count
 * and the purchase chip sit under it rather than trailing off the end of a
 * long Harvard reference in a narrow column.
 */
.footnotes-most-cited__reference {
	display: block;
	margin-bottom: 0.35em;
}

/*
 * The count, as a chip.
 *
 * Muted small text beside a reference did not read as something to click, and
 * the purchase chip next to it did — so the one that navigates looked like an
 * aside while the one that leaves the site looked like the control. Same
 * geometry as that chip (0.15em 0.5em, 999px, line-height 1) so the two sit on
 * one line without one riding higher than the other.
 *
 * Colour from currentColor rather than a fixed grey: this lands in a sidebar,
 * a footer or mid-post, on whatever surface the theme is using, and it has to
 * follow dark mode without knowing about it.
 */
.footnotes-most-cited__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.15em 0.5em;
	border: 1px solid;
	border-color: color-mix( in srgb, currentColor 35%, transparent );
	border-radius: 999px;
	font-size: 0.82em;
	line-height: 1;
	white-space: nowrap;
	vertical-align: baseline;
}

/*
 * Colour is deliberately not set on the anchor.
 *
 * The theme's own link rule wins here anyway — .prose a is (0,1,1) against
 * this class's (0,1,0) — and it is right that it does: a chip that navigates
 * should be in whatever colour the site uses for links, and muting it grey was
 * part of why it did not read as something to click. Declaring a colour and
 * losing would leave the appearance an accident of load order; declaring none
 * makes it the theme's business on purpose.
 *
 * The static form is not a link, so it takes the muted tone instead.
 */
span.footnotes-most-cited__chip {
	color: var( --bh-text-muted, rgba( 0, 0, 0, 0.55 ) );
}

/*
 * No underline: a pill with a rule through it reads as a mistake, the same
 * reason the purchase chip refuses one. The hover state is the fill.
 */
a.footnotes-most-cited__chip {
	text-decoration: none;
}

a.footnotes-most-cited__chip:hover,
a.footnotes-most-cited__chip:focus {
	border-color: currentColor;
	background-color: color-mix( in srgb, currentColor 10%, transparent );
	text-decoration: none;
}

a.footnotes-most-cited__chip:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * The cited-by page. A generated page, so it leans on the theme for width and
 * rhythm and only sets what the theme cannot know about.
 */
.footnotes-cited-by__reference {
	margin-bottom: 1.5em;
	padding-left: 0.9em;
	border-left: 3px solid var( --bh-primary, currentColor );
	font-size: 0.95em;
}

.footnotes-cited-by__list {
	margin: 0;
	padding-left: 1.25em;
}

.footnotes-cited-by__item {
	margin-bottom: 0.5em;
}

.footnotes-cited-by__count {
	font-size: 0.85em;
	color: var( --bh-text-muted, rgba( 0, 0, 0, 0.55 ) );
	white-space: nowrap;
}

/*
 * Headroom above the affiliate disclosure.
 *
 * The notice sets margin: 0, which is right where it was written for — inside
 * the reference container, which provides its own spacing. Appended after this
 * list it had none, so its top sat flush against the last entry's rule.
 *
 * Scoped to the pairing rather than changed at the source, so the notice keeps
 * behaving as before everywhere else. The adjacent-sibling selector is (0,2,0)
 * against the notice's own (0,1,0).
 *
 * The bibliography is here too: the standing discography and filmography pages
 * end the same way, with the notice appended after the list, so they arrived
 * with the same flush edge. The rule belongs with the two lists that trip over
 * it rather than being split across two stylesheets.
 *
 * In rem, not em. The notice is set at 0.82em, so an em here is its em — "1em"
 * bought 13px of headroom rather than the 16 it reads as, and the gap was
 * narrower than the space between two entries. rem is the page's measure and
 * means the same thing wherever the notice is scaled to.
 *
 * Both lists now close with a last entry whose own margin is zero, so this is
 * the whole of the separation rather than an addition to it.
 */
.footnotes-most-cited + .footnotes-amazon-disclosure,
.footnotes-bibliography + .footnotes-amazon-disclosure {
	margin-top: 2rem;
}