/*
 * Page-image citation pages, and the leaf grid on a source record.
 *
 * Its own file rather than an addition to bb-library.css: that sheet is shared
 * with every other screen on the site and was being edited by other work while
 * this was built. Everything here is additive and namespaced to .bb-leaf /
 * .bb-leaves, with two exceptions noted below where it extends the existing
 * citation block rather than restyling it.
 */

/* ---------------------------------------------------------------------------
 * The citation block, extended — NOT restyled.
 *
 * bb-library.css shows one pane at a time by naming each style value in a
 * :has() selector, so a block offering values it has never heard of would show
 * no citation at all. These two rules add this page's two forms to that list
 * and change nothing about the six already there.
 * ------------------------------------------------------------------------ */
.bb-cite:has(.bb-cite__pick[value="leaf"]:checked) .bb-cite__pane[data-style="leaf"],
.bb-cite:has(.bb-cite__pick[value="seen"]:checked) .bb-cite__pane[data-style="seen"] {
	display: block;
}

/* And the same fallback the shared sheet makes for browsers without :has() —
   every form visible at once under its own name, rather than a dead picker. */
@supports not (selector(:has(*))) {
	.bb-cite--leaf .bb-cite__pane {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
 * The leaf itself
 * ------------------------------------------------------------------------ */

.bb-leaf__fig {
	margin: 0 0 1.6rem;
}

/*
 * A page scan is tall. Left to fill the column it pushes everything that
 * explains it — what it is, where it came from, how to cite it — off the
 * bottom of the screen, which is the arrangement that made attachment pages
 * worth neglecting in the first place. Capped at the viewport height so the
 * page and its apparatus are visible together.
 */
.bb-leaf__img {
	display: block;
	max-width: 100%;
	max-height: 80vh;
	width: auto;
	height: auto;
	border: 1px solid var(--bb-rule, #d8d2c8);
	background: #fff;
}

.bb-leaf__cap {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--bb-quiet, #6b6459);
}

.bb-leaf__zoom {
	white-space: nowrap;
	opacity: 0.85;
}

.bb-leaf__sec {
	margin: 1.8rem 0;
}

.bb-leaf__sec h2 {
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
}

.bb-leaf__lede {
	font-size: 1.05rem;
}

/* A leaf whose volume nothing on the site can name is a gap, and reads as one. */
.bb-leaf__lede--nosource,
.bb-leaf__folio--none {
	border-left: 3px solid var(--bb-flag, #b08a3e);
	padding-left: 0.8rem;
}

.bb-leaf__what,
.bb-leaf__dating,
.bb-leaf__spec,
.bb-leaf__rights-note {
	font-size: 0.9rem;
	color: var(--bb-quiet, #6b6459);
}

.bb-leaf__rights {
	font-size: 0.95rem;
}

/* The same two-column definition list the source record uses, so a reader
   moving between a source and one of its leaves meets one layout. */
.bb-leaf__fields {
	margin: 0.6rem 0;
	font-size: 0.9rem;
}

.bb-leaf__fields > div {
	display: flex;
	gap: 0.8rem;
	padding: 0.25rem 0;
	border-bottom: 1px solid var(--bb-rule-faint, #ece7de);
}

.bb-leaf__fields dt {
	flex: 0 0 9rem;
	color: var(--bb-quiet, #6b6459);
}

.bb-leaf__fields dd {
	margin: 0;
	/* sha256 and long identifiers must wrap rather than widen the page. */
	overflow-wrap: anywhere;
}

.bb-leaf__links ul {
	margin: 0;
	padding-left: 1.1rem;
}

.bb-leaf__caution {
	display: block;
	font-size: 0.85rem;
	color: var(--bb-quiet, #6b6459);
}

.bb-leaf__original p {
	font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
 * The leaves a source record holds
 * ------------------------------------------------------------------------ */

.bb-leaves {
	margin: 2rem 0;
}

.bb-leaves__lede {
	font-size: 0.9rem;
	color: var(--bb-quiet, #6b6459);
}

.bb-leaves__grid {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1rem;
}

.bb-leaves__item a {
	display: block;
	text-decoration: none;
}

.bb-leaves__thumb {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--bb-rule, #d8d2c8);
	background: #fff;
}

.bb-leaves__label {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------------
 * The full-corpus gallery at /gallery/ — same grid idiom as .bb-leaves__grid
 * above, one size up, because this list runs to several hundred tiles rather
 * than one volume's few dozen.
 * ------------------------------------------------------------------------ */

.bb-gallery__grid {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1.2rem;
}

.bb-gallery__item a {
	display: block;
	text-decoration: none;
}

.bb-gallery__thumb {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--bb-rule, #d8d2c8);
	background: #fff;
}

.bb-gallery__label {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	line-height: 1.3;
}

/* A leaf with no bb_source record is a gap, and reads as one — the same
   left-rule treatment .bb-leaf__lede--nosource gives an unresolved leaf on
   its own citation page. */
.bb-gallery__item--nosource {
	border-left: 3px solid var(--bb-flag, #b08a3e);
	padding-left: 0.6rem;
}

.bb-gallery__pagination {
	margin: 2rem 0 0;
}

.bb-gallery__pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-gallery__pagination a.page-numbers,
.bb-gallery__pagination span.page-numbers {
	display: inline-block;
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--bb-rule, #d8d2c8);
	text-decoration: none;
	font-size: 0.9rem;
}

.bb-gallery__pagination span.page-numbers.current {
	background: var(--bb-rule, #d8d2c8);
	font-weight: 600;
}