/**
 * B&B Library — citation apparatus.
 *
 * Academic in structure, friendly in voice: the notes are unobtrusive in
 * reading and complete when consulted. Colour is defined at token level for
 * both themes, and every colour has a value on bare :root so nothing depends
 * on a media query resolving.
 */

:root {
	--bb-ink: #1a1714;
	--bb-soft: #4a443d;
	--bb-muted: #79726b;
	--bb-rule: #e3ded5;
	--bb-accent: #8c3a22;
	--bb-flag: #8a5a1f;
	--bb-flag-bg: #f8f1e2;
	--bb-miss: #8c2f2f;
	--bb-miss-bg: #f9ecec;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bb-ink: #ede8e0;
		--bb-soft: #c0b9af;
		--bb-muted: #8f877e;
		--bb-rule: #322d27;
		--bb-accent: #d9714d;
		--bb-flag: #d2a252;
		--bb-flag-bg: #262015;
		--bb-miss: #e08a72;
		--bb-miss-bg: #2a1c17;
	}
}

:root[data-theme="dark"] {
	--bb-ink: #ede8e0;
	--bb-soft: #c0b9af;
	--bb-muted: #8f877e;
	--bb-rule: #322d27;
	--bb-accent: #d9714d;
	--bb-flag: #d2a252;
	--bb-flag-bg: #262015;
	--bb-miss: #e08a72;
	--bb-miss-bg: #2a1c17;
}

/* --- inline reference --- */

.bb-noteref {
	font-size: 0.7em;
	line-height: 0;
	vertical-align: super;
}

.bb-noteref a {
	color: var(--bb-accent);
	text-decoration: none;
	padding: 0 0.1em;
}

.bb-noteref a:hover,
.bb-noteref a:focus-visible {
	text-decoration: underline;
}

/* Give the jumped-to note a moment of emphasis so the reader lands. */
.bb-endnotes li:target {
	background: var(--bb-flag-bg);
	outline: 2px solid var(--bb-flag);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- notes --- */

.bb-endnotes,
.bb-bibliography {
	margin: 3rem 0 0;
	padding-top: 1.4rem;
	border-top: 1px solid var(--bb-rule);
	color: var(--bb-soft);
	font-size: 0.9rem;
	line-height: 1.55;
}

.bb-endnotes h2,
.bb-bibliography h2 {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-muted);
	margin: 0 0 1.1rem;
}

.bb-bibliography h3 {
	font-size: 0.95rem;
	margin: 1.5rem 0 0.5rem;
	color: var(--bb-ink);
}

.bb-endnotes ol {
	margin: 0;
	padding-left: 1.6rem;
}

.bb-endnotes li {
	margin-bottom: 0.55rem;
	scroll-margin-top: 2rem;
}

.bb-backref {
	text-decoration: none;
	color: var(--bb-muted);
	margin-left: 0.3em;
}

.bb-backref:hover {
	color: var(--bb-accent);
}

/* Hanging indent, as a bibliography wants. */
.bb-bibliography ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-bibliography li {
	margin-bottom: 0.6rem;
	padding-left: 1.5rem;
	text-indent: -1.5rem;
}

/*
 * The other names a record has been filed under — one line above the claims,
 * quiet on purpose. It is a finding aid for a reader who came looking under
 * "Stradivarius", not a claim about the man, so it must not read louder than
 * the sourced statements below it.
 */
.bb-also-known {
	margin: 0 0 0.9rem;
	font-size: 0.95em;
}

.bb-also-known__label {
	font-variant: small-caps;
	letter-spacing: 0.02em;
	color: var(--bb-flag);
}

/* --- honesty markers --- */

.bb-readas,
.bb-caveat {
	display: inline;
	color: var(--bb-flag);
	font-size: 0.92em;
}

.bb-caveat::before {
	content: "— ";
}

.bb-missing {
	background: var(--bb-miss-bg);
	color: var(--bb-miss);
	padding: 0.05em 0.35em;
	border-radius: 2px;
	font-weight: 600;
}

/* --- cite this --- */

/*
 * Sits at the foot of every page. Quiet by construction: it is apparatus, not
 * argument, and it should be findable without competing with the record above
 * it. Same rule, same weight as the endnotes it follows on paper.
 */
.bb-cite {
	margin: 3rem 0 0;
	padding-top: 1.4rem;
	border-top: 1px solid var(--bb-rule);
	color: var(--bb-soft);
	/* Furniture at the foot of the page, not a second voice competing with
	   the record above it — a step quieter than the 0.9rem this used to
	   carry, and every size below is scaled down to match. */
	font-size: 0.8rem;
	line-height: 1.55;
}

/*
 * 20 August 2026. This used to set its own small-caps uppercase look —
 * "same...as the endnotes it follows" in the comment above, but [endnotes]
 * is never actually invoked on any live page (class-bb-notes.php's docblock
 * — nothing calls the shortcode), so in practice this h2 was the only
 * section heading on a maker page NOT in the theme's own h2 face, next to
 * "What this record rests on" and "Mentioned, not yet worked" in the bare
 * theme style. Dropping the override, rather than adding one to the other
 * two, matches every content h2 to the theme's own — the lower-risk
 * direction, since the theme's h2 is what every other section already used.
 */
.bb-cite__head {
	margin: 0 0 0.35rem;
}

/*
 * Picker and copy button share one row — the choice and the control that
 * acts on it, where the reader's eye already is.
 */
.bb-cite__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.8rem;
	margin: 0 0 0.9rem;
}

/*
 * The style picker: a <fieldset> of native radios, hidden but never
 * unfocusable, with the label doing the visible work. Switching styles is
 * CSS, not script — a reader with JavaScript off still gets a working
 * selector, arrow-key navigation and a real focus ring, all of it for free
 * from the platform. <fieldset> plus a real <legend> is what makes the group
 * announce as one to a screen reader — no ARIA required to say so.
 */
.bb-cite__picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.4rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.bb-cite__picker-legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bb-cite__pick {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bb-cite__opt label {
	display: inline-block;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--bb-muted);
	border: 1px solid transparent;
	border-radius: 2px;
	padding: 0.18rem 0.5rem;
	cursor: pointer;
}

.bb-cite__opt label:hover {
	color: var(--bb-accent);
}

.bb-cite__pick:checked + label {
	color: var(--bb-ink);
	border-color: var(--bb-rule);
	background: var(--bb-flag-bg);
}

/* The focus ring belongs on the label, since the input it belongs to is
   clipped to a pixel. Without this the picker is invisible to a keyboard. */
.bb-cite__pick:focus-visible + label {
	outline: 2px solid var(--bb-accent);
	outline-offset: 2px;
}

/*
 * The citation reads as a quotation of itself — set off, so a reader can see
 * at a glance where it starts and stops before copying it.
 */
.bb-cite__text {
	margin: 0;
	padding-left: 0.9rem;
	border-left: 2px solid var(--bb-rule);
	color: var(--bb-ink);
	/* A URL inside a citation is long and unbreakable; let it wrap rather
	   than push the page sideways on a phone. */
	overflow-wrap: anywhere;
}

/*
 * BibTeX and RIS are structured data, not prose, and got their own
 * treatment: smaller again than the prose citation above (0.7rem against the
 * block's 0.8rem), so a multi-line monospace block cannot out-shout the
 * plain-text styles next to it. white-space: pre keeps the line breaks a
 * BibTeX or RIS parser depends on.
 */
.bb-cite__text--code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.7rem;
	line-height: 1.45;
	white-space: pre;
	overflow-x: auto;
	tab-size: 2;
}

/* One pane at a time; which one is the reader's choice, read straight off the
   radio they chose. No script involved and no state to keep in sync. */
.bb-cite__pane {
	display: none;
}

.bb-cite:has(.bb-cite__pick[value="chicago-note"]:checked) .bb-cite__pane[data-style="chicago-note"],
.bb-cite:has(.bb-cite__pick[value="chicago-bib"]:checked) .bb-cite__pane[data-style="chicago-bib"],
.bb-cite:has(.bb-cite__pick[value="mla"]:checked) .bb-cite__pane[data-style="mla"],
.bb-cite:has(.bb-cite__pick[value="apa"]:checked) .bb-cite__pane[data-style="apa"],
.bb-cite:has(.bb-cite__pick[value="bibtex"]:checked) .bb-cite__pane[data-style="bibtex"],
.bb-cite:has(.bb-cite__pick[value="ris"]:checked) .bb-cite__pane[data-style="ris"] {
	display: block;
}

/* Each pane names itself for a screen reader, so "MLA 9" is not knowledge you
   have to have carried over from the picker. Sighted readers have the
   highlighted label above; the fallback below turns these visible. */
.bb-cite__pane-name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Where :has() is unsupported the picker cannot work, so it is removed rather
 * than left as a dead control, and every style is shown at once under its own
 * heading. Degraded, but nothing is hidden and nothing is unreachable.
 */
@supports not (selector(:has(*))) {

	.bb-cite__picker {
		display: none;
	}

	.bb-cite__pane {
		display: block;
		margin-top: 0.9rem;
	}

	.bb-cite__pane-name {
		position: static;
		display: block;
		width: auto;
		height: auto;
		margin: 0 0 0.2rem;
		clip: auto;
		clip-path: none;
		font-size: 0.7rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--bb-muted);
	}
}

.bb-cite__uncitable {
	margin: 0 0 0.9rem;
	padding: 0.5rem 0.7rem;
	background: var(--bb-flag-bg);
	border-left: 3px solid var(--bb-flag);
	color: var(--bb-flag);
	font-size: 0.76rem;
}

/* Sits inline in .bb-cite__controls, next to the picker it acts on. */
.bb-cite__copy {
	font: inherit;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--bb-soft);
	background: none;
	border: 1px solid var(--bb-rule);
	border-radius: 2px;
	padding: 0.3rem 0.7rem;
	cursor: pointer;
}

.bb-cite__copy:hover,
.bb-cite__copy:focus-visible {
	color: var(--bb-accent);
	border-color: var(--bb-accent);
}

/* Confirms in text ("Copied" / "Selected — press copy"), never by colour
   alone — the colour marks it as apparatus, the words carry the meaning. */
.bb-cite__said {
	font-size: 0.72rem;
	color: var(--bb-flag);
}

.bb-cite__note,
.bb-cite__licence {
	margin: 0.8rem 0 0;
	font-size: 0.72rem;
	color: var(--bb-muted);
}

.bb-cite__licence a {
	color: inherit;
}

/* Appraisers and peer reviewers print these pages. */
@media print {

	/*
	 * A printed page cannot be clicked, so the copy button and the style
	 * picker go — one row, .bb-cite__controls, so one rule removes both. The
	 * citation itself prints — whichever style the reader had chosen when
	 * they pressed print, which is the one they wanted.
	 */
	.bb-cite__controls {
		display: none;
	}

	.bb-cite__text--code {
		white-space: pre-wrap;
	}


	.bb-noteref a {
		color: inherit;
	}

	.bb-endnotes,
	.bb-bibliography {
		break-before: auto;
	}

	.bb-endnotes li,
	.bb-bibliography li {
		break-inside: avoid;
	}

	.bb-backref {
		display: none;
	}

	.bb-missing {
		background: none;
		outline: 1px solid var(--bb-miss);
	}
}

/* --- evidence path and evidence base (class-bb-evidence.php) --- */

/*
 * The per-claim path mark sits beside the confidence pill. The two document
 * states are quiet — they confirm, they do not warn — while the two research
 * states borrow the missing-reference treatment, because a claim written
 * from this project's own notes is a defect a reader must see, not a style.
 */
.bb-evpath {
	font-size: 0.78em;
	letter-spacing: 0.02em;
	color: var(--bb-muted);
	white-space: nowrap;
}

.bb-evpath::before {
	content: "· ";
}

.bb-evpath--research_cited,
.bb-evpath--research_uncited {
	background: var(--bb-miss-bg);
	color: var(--bb-miss);
	padding: 0.05em 0.35em;
	border-radius: 2px;
	font-weight: 600;
	white-space: normal;
}

.bb-evbase {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bb-rule);
}

.bb-evbase__docs,
.bb-evbase__claims {
	color: var(--bb-soft);
}

.bb-evbase__rule,
.bb-evbase__nobaseline,
.bb-evbase__note {
	color: var(--bb-muted);
	font-size: 0.92em;
}

.bb-evbase__baseline {
	margin: 0.4rem 0 0;
	padding-left: 1.2rem;
}

.bb-evbase__baseline li {
	margin-bottom: 0.45rem;
}

/* -----------------------------------------------------------------
 * In-progress maker pages (3 September 2026)
 *
 * A page that is deliberately thin should look deliberately thin, not
 * like a finished record that failed to load. The banner is the loudest
 * thing on it: a reader who lands here from a search for a family name
 * must know within one line that nothing here has been checked yet.
 * ----------------------------------------------------------------- */

.bb-inprogress__banner {
	margin: 0 0 1.4rem;
	padding: 0.8rem 1rem;
	border-left: 4px solid var(--bb-soft, #8a7f6d);
	background: var(--bb-tint, #f6f3ec);
}

.bb-inprogress__heading {
	margin-top: 1.6rem;
}

.bb-inprogress__sources {
	margin: 0.6rem 0 0;
	padding-left: 1.2rem;
}

.bb-inprogress__source {
	margin-bottom: 0.55rem;
}

.bb-inprogress__help {
	margin-top: 1.6rem;
	color: var(--bb-muted, #5a5347);
}

/* The "in progress" mark on a listing row — a state, not a warning. */
.bb-tag--inprogress {
	white-space: nowrap;
}