:root {
	/* shared design tokens - matches coins/catalog/type */
	--documentation_border: rgb(227, 227, 227);
	--documentation_card_bg: #ffffff;
	--documentation_media_bg: #f6f6f6;
	--documentation_accent: #b7996d;
	--documentation_ink: #333333;
	--documentation_muted: #767676;

	/* local spacing scale */
	--documentation_space_xs: 0.6em;
	--documentation_space_sm: 1em;
	--documentation_space_md: 1.5em;
	--documentation_space_lg: 2.5em;

	/* reading width for text-heavy content */
	--documentation_text_measure: 50em;
}


#main {
	display: block;
	/* smooths page.less's #main width jump at 736px so grids can't regain a column while narrowing */
	width: clamp(80vw, calc(270px + 50vw), 95vw);
}

@media (prefers-reduced-motion: reduce) {
	.documentation_item a.row_wrapper,
	.documentation_item .thumb,
	.documentation_breadcrumb_link,
	.documentation_back_to_browse,
	.related_coin_item,
	.row_wrapper.detail .gallery .gallery_image,
	.documentation_lightbox,
	.documentation_lightbox_stage,
	.documentation_lightbox_image,
	.documentation_view_btn,
	#rows_container,
	#rows_container .pagination a,
	.documentation_description_paper,
	.documentation_description_fade,
	.documentation_description_toggle,
	.documentation_description_toggle:after,
	.gallery_secondary_grid,
	.gallery_secondary_fade {
		transition: none !important;
		animation-duration: 0.001ms !important;
	}
	#rows_container.view_grid a.row_wrapper:hover,
	.documentation_item a.row_wrapper:hover,
	.related_coin_item:hover,
	.row_wrapper.detail .gallery .gallery_image:hover {
		transform: none !important;
	}
	.documentation_lightbox_image {
		transition: none !important;
	}
}

.documentation_item a.row_wrapper:focus-visible,
.documentation_breadcrumb_link:focus-visible,
.documentation_back_to_browse:focus-visible {
	outline: 2px solid var(--documentation_accent);
	outline-offset: 2px;
}

/* h1/.golden-separator intentionally unstyled - inherits the shared global look every other page uses */

#main .inner > p {
	max-width: 42em;
	font-size: 1.05em;
	line-height: 1.6;
	color: #767676;
	margin-bottom: 2em;
}

#documentation_search_form {
	margin: var(--documentation_space_md) 0 var(--documentation_space_lg);
}

#documentation_search_form .button_submit input[type="button"] {
	margin-right: 1rem;
}

#rows_container .totals {
	white-space: nowrap;
}

#rows_container .rows_container {
	margin-bottom: 2em;
}

.documentation_browse_heading {
	font-size: 1.3em;
	font-weight: 600;
	color: var(--documentation_ink);
	margin: 0 0 1.2em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--documentation_border);
}

.documentation_fund_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
	gap: 1.75em;
	margin-bottom: 2.5em;
	/* cards size to their own content instead of stretching to the tallest sibling */
	align-items: start;
}

.documentation_item_fund .image_wrapper {
	height: 12em;
}

.documentation_item_fund .info_container {
	padding: 1.1em 1.2em 1.3em;
	gap: 0.6em;
}

/* clamp to 2 lines so card heights stay uniform regardless of title length */
.documentation_item_fund .documentation_title {
	font-size: 1.08em;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.documentation_item_count {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.35em;
	padding: 0.2em 0.65em;
	border-radius: 1em;
	background-color: var(--documentation_media_bg);
	color: var(--documentation_muted);
	font-size: 0.72em;
	font-weight: 600;
	opacity: 0;
	transition: opacity 0.3s ease;
	/* min-height reserves this badge's slot even when empty, for uniform card heights */
	min-height: 2.15em;
	box-sizing: border-box;
}

.documentation_item_count i {
	font-size: 0.9em;
	color: var(--documentation_accent);
}

.documentation_item_count.is_ready {
	opacity: 1;
}

.documentation_image_placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--documentation_border);
	font-size: 1.8em;
	background-color: var(--documentation_media_bg);
}

.documentation_search_status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-bottom: 1.25em;
	padding-bottom: 0.75em;
	border-bottom: 1px solid var(--documentation_border);
}

.documentation_search_status_info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em;
}

.documentation_search_status_text {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--documentation_ink);
}

/* !important needed to beat main.css's global button color reset */
.documentation_back_to_browse {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	color: var(--documentation_accent) !important;
	font-size: 0.85em;
	font-weight: 600;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	transition: opacity 0.15s ease;
}

.documentation_back_to_browse:hover {
	opacity: 0.75;
}

.documentation_empty_state {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 2em 0;
	color: var(--documentation_muted);
	font-size: 1em;
}

.documentation_empty_state i {
	font-size: 1.3em;
	color: var(--documentation_border);
}

.documentation_toolbar {
	display: flex;
	justify-content: flex-end;
}

.documentation_view_toggle {
	display: inline-flex;
	border: 1px solid var(--documentation_border);
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--documentation_media_bg);
}

/* box-shadow:none clears the global button ring */
.documentation_view_btn {
	width: 2.35em;
	height: 2.35em;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	box-shadow: none;
	background-color: transparent;
	color: var(--documentation_muted) !important;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	padding: 0;
	font-size: 0.9em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.documentation_view_btn + .documentation_view_btn {
	border-left: 1px solid var(--documentation_border);
}

.documentation_view_btn:hover,
.documentation_view_btn:focus,
.documentation_view_btn:active {
	outline: none;
	box-shadow: none;
	color: var(--documentation_ink) !important;
}

.documentation_view_btn.active,
.documentation_view_btn.active:hover {
	background-color: var(--documentation_accent);
	color: #fff !important;
}

.documentation_item {
	position: relative;
}

a.row_wrapper {
	display: flex;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.documentation_item .go_to_dedalo {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	font-size: 0.8em;
	color: var(--documentation_accent);
	z-index: 1;
}

.image_wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--documentation_media_bg);
}

.image_wrapper .thumb {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.image_wrapper .thumb.is_loaded {
	opacity: 1;
}

.documentation_card_dating {
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	background-color: rgba(255,255,255,0.92);
	color: #333333;
	font-size: 0.7em;
	font-weight: 600;
	padding: 0.15em 0.55em;
	border-radius: 0.3em;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.documentation_card_tag {
	align-self: flex-start;
	padding: 0.2em 0.65em;
	background-color: var(--documentation_media_bg);
	color: var(--documentation_accent);
	border-radius: 1em;
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	/* min-height reserves height for empty tags too (see .is_empty) */
	min-height: 2.15em;
	box-sizing: border-box;
}

/* reserves its slot (see draw_item) without showing an empty pill */
.documentation_card_tag.is_empty {
	opacity: 0;
}

.info_container {
	display: grid;
	/* label column sized to content, capped so long labels don't force a huge gap */
	grid-template-columns: minmax(7em, 14em) 1fr;
	grid-column-gap: var(--documentation_space_sm);
	width: 100%;
}

.documentation_item .info_container {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.documentation_title {
	grid-column: 1 / span 2;
	font-family: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
	font-size: 1.1em;
	font-weight: 500;
	margin-bottom: 0.5em;
	color: var(--documentation_ink);
	transition: color 0.2s ease;
}

.left-labels {
	grid-column: 1;
	text-align: right;
	color: var(--documentation_muted);
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
	padding-top: 0.15em;
}

.rigth-values {
	grid-column: 2;
	text-align: left;
	color: var(--documentation_ink);
}

/* full-width prose block (description, inscriptions) */
.long_field {
	grid-column: 1 / -1;
	margin: var(--documentation_space_sm) 0;
	padding-top: var(--documentation_space_xs);
}

.long_field_label {
	display: block;
	color: var(--documentation_muted);
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 0.5em;
}

.long_field_value {
	color: var(--documentation_ink);
	line-height: 1.65;
	margin: 0;
}

/* archival-paper look for the description block (see archive.js draw_description) -
   colors are local tints of --documentation_accent, not new palette additions */
.documentation_description_section {
	position: relative;
	margin-top: var(--documentation_space_lg);
	padding-top: var(--documentation_space_lg);
	max-width: var(--documentation_text_measure);
}

.documentation_description_label {
	display: block;
	font-weight: 600;
	color: var(--documentation_muted);
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.03em;
	margin-bottom: 0.7em;
}

.documentation_description_paper {
	/* shared by the grain overlay and fade gradient below, so tones can't drift apart */
	--paper_bg: #f9f2e0;

	position: relative;
	max-height: 13.5em;
	overflow: hidden;
	padding: 1.8em 2.2em;
	background-color: var(--paper_bg);
	background-image: radial-gradient(ellipse at 50% 40%, rgba(255,253,246,0.6) 0%, rgba(205,180,131,0.12) 100%);
	border: 1px solid #e3d3a8;
	border-radius: 2px;
	box-shadow:
		inset 0 0 0 1px rgba(255, 252, 240, 0.5),
		0 1px 2px rgba(60, 42, 16, 0.08),
		0 14px 28px -18px rgba(60, 42, 16, 0.32);
	transition: max-height 0.5s ease;
}

/* subtle paper grain via an SVG noise filter, not an image asset */
.documentation_description_paper:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.34 0 0 0 0 0.18 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
	pointer-events: none;
}

.documentation_description_text {
	position: relative;
	font-family: cambria, serif;
	font-size: 1.08em;
	line-height: 1.85;
	color: #362a1a;
	margin: 0;
}

/* drop cap on the first letter */
.documentation_description_text:first-letter {
	float: left;
	font-size: 2.6em;
	line-height: 0.78;
	padding: 0.05em 0.08em 0 0;
	color: var(--documentation_accent);
}

.documentation_description_fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5em;
	background: linear-gradient(to bottom, rgba(242, 230, 201, 0), var(--paper_bg));
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.documentation_description_paper.is_expanded .documentation_description_fade {
	opacity: 0;
}

/* outlined gold pill, centered, fills solid on hover - neutralizes main.css's
   global button reset (uppercase pill, inset box-shadow border, !important color) */
.documentation_description_toggle {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.5em;
	height: auto;
	margin: 1.3em auto 0;
	padding: 0.6em 1.5em;
	border: 1px solid var(--documentation_accent);
	border-radius: 2em;
	background-color: transparent;
	box-shadow: none !important;
	text-align: center;
	text-transform: uppercase;
	text-overflow: unset;
	white-space: normal;
	overflow: visible;
	font-family: inherit;
	font-size: 0.76em;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: var(--documentation_accent) !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.documentation_description_toggle:hover,
.documentation_description_toggle:active {
	box-shadow: none !important;
	background-color: var(--documentation_accent) !important;
	color: #fff !important;
	text-decoration: none;
}

.documentation_description_toggle:after {
	content: "\f107"; /* fa-chevron-down */
	font-family: FontAwesome;
	font-weight: normal;
	font-size: 0.9em;
	transition: transform 0.3s ease;
}

.documentation_description_toggle[aria-expanded="true"]:after {
	transform: rotate(180deg);
}

@media screen and (max-width: 736px) {
	.documentation_description_paper {
		padding: 1.3em 1.3em;
	}
	.documentation_description_text {
		font-size: 1em;
		line-height: 1.75;
	}
}

.vertical-group {
	grid-column: 2;
	display: flex;
	flex-flow: column;
}

.vertical-group .sub-vertical-group {
	width: 100%;
	margin-bottom: 0.5em;
}

.vertical-group .sub-vertical-group:last-child {
	margin-bottom: 0;
}

/* documents (attached PDFs, see archive.js draw_documents) - its own section rather than
   a field in the info_container grid, which misaligned label vs card */
.documentation_documents_section {
	position: relative;
	margin-top: var(--documentation_space_lg);
	padding-top: var(--documentation_space_lg);
	/* same width cap as sibling sections so their gold rules align */
	max-width: var(--documentation_text_measure);
}

.documentation_documents_label {
	display: block;
	font-weight: 600;
	color: var(--documentation_muted);
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.03em;
	margin-bottom: 0.6em;
}

.documentation_documents_list {
	display: flex;
	flex-flow: column;
	gap: 0.5em;
}

.documentation_document {
	display: flex;
	align-items: center;
	gap: 0.7em;
	max-width: var(--documentation_text_measure);
	padding: 0.7em 1em;
	border: 1px solid var(--documentation_border);
	border-radius: 6px;
	background-color: var(--documentation_card_bg);
	text-decoration: none;
	color: var(--documentation_ink);
	transition: border-color 0.15s ease;
}

/* color !important needed to beat main.css's global a:hover gold color */
.documentation_document:hover {
	border-color: var(--documentation_accent);
	color: var(--documentation_ink) !important;
}

.documentation_document_icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 5px;
	background-color: var(--documentation_media_bg);
	color: var(--documentation_accent);
	font-size: 1.2em;
}

.documentation_document_title {
	font-size: 0.9em;
	line-height: 1.35;
	color: var(--documentation_ink);
}

#rows_container {
	transition: opacity 0.2s ease;
}

#rows_container.loading {
	opacity: 0.35;
}

#rows_container.view_list a.row_wrapper {
	flex-wrap: wrap;
	border-bottom: 1px solid var(--documentation_border);
	padding: 1.25em 0;
}

#rows_container.view_list a.row_wrapper:hover {
	background-color: var(--documentation_media_bg);
}

#rows_container.view_list .documentation_item:last-child a.row_wrapper {
	border-bottom: none;
}

#rows_container.view_list .image_wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--documentation_media_bg);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 1em;
}

#rows_container.view_list .image_wrapper .thumb {
	height: 10em;
	max-width: 100%;
	object-fit: contain;
}

@media screen and (min-width: 736px) {
	#rows_container.view_list .image_wrapper {
		width: 30%;
		margin-bottom: 0;
	}
	#rows_container.view_list .info_container {
		width: 70%;
		padding-left: 1.5em;
	}
}

#rows_container.view_grid .rows_container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13.5em, 1fr));
	gap: 1.25em;
	/* cards size to content instead of stretching to the tallest sibling */
	align-items: start;
}

.documentation_item_fund a.row_wrapper,
.documentation_item_child a.row_wrapper,
.related_coin_item,
#rows_container.view_grid a.row_wrapper {
	flex-direction: column;
	border: 1px solid var(--documentation_border);
	border-radius: 8px;
	height: 100%;
	background-color: var(--documentation_card_bg);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	overflow: hidden;
	transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.documentation_item_fund a.row_wrapper:hover,
.documentation_item_child a.row_wrapper:hover,
.related_coin_item:hover,
#rows_container.view_grid a.row_wrapper:hover {
	box-shadow: 0 4px 10px rgba(0,0,0,0.12);
	border-color: var(--documentation_accent);
	transform: translateY(-1px);
}

.documentation_item_fund .thumb,
.documentation_item_child .thumb,
#rows_container.view_grid .thumb {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.documentation_item_fund a.row_wrapper:hover .thumb,
.documentation_item_child a.row_wrapper:hover .thumb,
#rows_container.view_grid a.row_wrapper:hover .thumb {
	transform: scale(1.02);
}

/* title picks up the accent color on hover, same quiet cue the ref_documentation
cards on the coin/type pages use */
.documentation_item_fund a.row_wrapper:hover .documentation_title,
#rows_container.view_grid a.row_wrapper:hover .documentation_title {
	color: var(--documentation_accent);
}

#rows_container.view_grid .image_wrapper {
	height: 9em;
}

#rows_container.view_grid .info_container {
	padding: 0.9em 1em;
}

#rows_container.view_grid .documentation_title {
	font-size: 0.95em;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	line-height: 1.3;
}

.row_wrapper.detail {
	display: flex;
	flex-direction: column;
	padding: 2em 0 3em;
}


.documentation_detail_nav:empty {
	margin: 0;
}

.documentation_breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 1.5em;
	font-size: 0.85em;
}

.documentation_breadcrumb_icon {
	color: var(--documentation_accent);
	margin-right: 0.2em;
}

.documentation_breadcrumb_link {
	color: var(--documentation_accent);
	text-decoration: none;
	padding: 0.25em 0.75em;
	border-radius: 1em;
	background-color: var(--documentation_media_bg);
	transition: background-color 0.15s ease;
}

.documentation_breadcrumb_link:hover {
	background-color: var(--documentation_border);
}

.documentation_breadcrumb_separator {
	color: #c9c9c9;
	font-size: 0.75em;
}

/* prev/next among siblings, filled by draw_sibling_nav (archive.js) */
.documentation_sibling_nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6em 1em;
}

.documentation_sibling_nav:not(:empty) {
	margin-bottom: 0.8em;
	padding: 0.5em 1em;
	border: 1px solid var(--documentation_border);
	border-radius: 6px;
	background-color: var(--documentation_card_bg);
}

.documentation_sibling_first {
	margin-right: auto;
}

.documentation_sibling_last {
	margin-left: auto;
}

.documentation_sibling_link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--documentation_accent);
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.documentation_sibling_link:hover {
	opacity: 0.75;
}

.documentation_sibling_link.is_disabled {
	color: var(--documentation_muted);
	opacity: 0.4;
}

.documentation_sibling_first,
.documentation_sibling_last {
	font-size: 0.9em;
	padding: 0.3em;
}

.documentation_sibling_position {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--documentation_muted);
	font-size: 0.8em;
	white-space: nowrap;
}

.documentation_sibling_jump {
	width: 3em;
	padding: 0.25em 0.4em;
	border: 1px solid var(--documentation_border);
	border-radius: 4px;
	background-color: var(--documentation_card_bg);
	color: var(--documentation_ink);
	font-size: 1em;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	/* hide native number spinner */
	appearance: textfield;
	-moz-appearance: textfield;
}

.documentation_sibling_jump::-webkit-outer-spin-button,
.documentation_sibling_jump::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.documentation_sibling_jump:focus {
	outline: none;
	border-color: var(--documentation_accent);
	box-shadow: 0 0 0 3px rgba(183,153,109,0.15);
}

.row_wrapper.detail .gallery {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--documentation_space_md);
	width: 100%;
	margin-bottom: var(--documentation_space_md);
	padding: var(--documentation_space_md);
	background-color: var(--documentation_media_bg);
	border-radius: 8px;
	box-sizing: border-box;
}

.row_wrapper.detail .gallery .gallery_figure {
	flex: 1 1 300px;
	max-width: 440px;
	margin: 0;
	/* fixed height avoids layout jump while the image is still loading */
	height: 20em;
}

/* a single hero image keeps the larger original size; the compact sizing
   above only kicks in once there's more than one */
.row_wrapper.detail .gallery .gallery_figure:only-child {
	flex-basis: 520px;
	max-width: 820px;
	height: 26em;
}

.row_wrapper.detail .gallery .gallery_image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--documentation_card_bg);
	border: 1px solid var(--documentation_border);
	border-radius: 6px;
	box-shadow: 0 3px 14px rgba(0,0,0,0.14);
	cursor: zoom-in;
	opacity: 0;
	transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.35s ease;
}

.row_wrapper.detail .gallery .gallery_image.is_loaded {
	opacity: 1;
}

.row_wrapper.detail .gallery .gallery_image:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.22);
	transform: translateY(-2px);
}

/* compact thumbnail strip for supporting images, opens the same lightbox as the hero */
.gallery_secondary {
	margin-bottom: var(--documentation_space_md);
}

.gallery_secondary_label {
	display: block;
	font-weight: 600;
	color: var(--documentation_muted);
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.03em;
	margin-bottom: 0.5em;
}

.gallery_secondary_grid {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	overflow: hidden;
	transition: max-height 0.5s ease;
}

/* collapses past 7 images to one row, see archive.js */
.gallery_secondary_fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3em;
	background: linear-gradient(to bottom, rgba(255,255,255,0), var(--documentation_card_bg));
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.gallery_secondary_grid.is_expanded .gallery_secondary_fade {
	opacity: 0;
}

.gallery_secondary_toggle {
	margin-top: 0.8em;
}

.gallery_secondary_image {
	width: 7em;
	height: 7em;
	object-fit: cover;
	background-color: var(--documentation_card_bg);
	border: 1px solid var(--documentation_border);
	border-radius: 6px;
	cursor: zoom-in;
	opacity: 0;
	transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.35s ease;
}

.gallery_secondary_image.is_loaded {
	opacity: 1;
}

.gallery_secondary_image:hover {
	box-shadow: 0 6px 16px rgba(0,0,0,0.2);
	transform: translateY(-2px);
}

/* lightbox . full-screen zoom/pan viewer, see archive.js open_lightbox */
.documentation_lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.985);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.documentation_lightbox:focus {
	outline: none;
}

.documentation_lightbox.is_open {
	opacity: 1;
}

.documentation_lightbox_stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	transform: scale(0.96);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.documentation_lightbox.is_open .documentation_lightbox_stage {
	transform: scale(1);
}

.documentation_lightbox_image {
	max-width: 88vw;
	max-height: 78vh;
	object-fit: contain;
	opacity: 0;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
	transition: opacity 0.3s ease;
}

.documentation_lightbox_image.is_loaded {
	opacity: 1;
}

.documentation_lightbox_spinner {
	position: absolute;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,0.2);
	border-top-color: var(--documentation_accent);
	animation: documentation_lightbox_spin 0.8s linear infinite;
}

.documentation_lightbox_spinner.hide {
	display: none;
}

@keyframes documentation_lightbox_spin {
	to { transform: rotate(360deg); }
}

.documentation_lightbox_caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.5em;
	text-align: center;
	color: rgba(255,255,255,0.85);
	font-size: 0.9em;
	padding: 0 4em;
	pointer-events: none;
}

.documentation_lightbox_caption.hide {
	display: none;
}

.documentation_lightbox_nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.85em;
	height: 2.85em;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.22);
	background-color: rgba(255,255,255,0.1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 18px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.03);
	color: rgba(255,255,255,0.88) !important;
	font-size: 1.1em;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.documentation_lightbox_nav:hover {
	background-color: rgba(255,255,255,0.22);
	border-color: rgba(255,255,255,0.4);
	color: #fff !important;
}

.documentation_lightbox_nav.hide {
	display: none;
}

.documentation_lightbox_prev {
	left: 1.25em;
	top: 50%;
	transform: translateY(-50%);
}

.documentation_lightbox_next {
	right: 1.25em;
	top: 50%;
	transform: translateY(-50%);
}

@media screen and (max-width: 736px) {

	.documentation_sibling_nav {
		justify-content: center;
	}

	.documentation_sibling_first,
	.documentation_sibling_last {
		margin: 0;
	}

	.row_wrapper.detail .gallery .gallery_figure,
	.row_wrapper.detail .gallery .gallery_figure:only-child {
		flex-basis: 300px;
		max-width: 100%;
		height: 16em;
	}

	.gallery_secondary_image {
		width: 5em;
		height: 5em;
	}

	.documentation_lightbox_image {
		max-width: 94vw;
		max-height: 72vh;
	}

	.documentation_lightbox_nav {
		width: 2.5em;
		height: 2.5em;
		font-size: 1em;
	}

	.documentation_lightbox_caption {
		padding: 0 3em;
		font-size: 0.8em;
	}

	.row_wrapper.detail > .documentation_title {
		font-size: 1.19em;
	}
}

/* first/last jump-to-edge buttons dropped below ~440px (most phone widths) -
below that, they no longer fit the prev/position/next group on one line and
wrap onto their own orphaned row. Prev/Next plus typing into the jump box
already cover the same ground, so this is a clean simplification rather
than a workaround */
@media screen and (max-width: 440px) {
	.documentation_sibling_first,
	.documentation_sibling_last {
		display: none;
	}
}

/* cambria + small-caps/letter-spacing, same treatment catalog.less's .name uses */
.row_wrapper.detail > .documentation_title {
	position: relative;
	font-family: cambria, serif;
	font-weight: 100;
	font-size: 1.615em;
	line-height: 1.3;
	font-variant: small-caps;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--documentation_ink);
	margin: 0.2em 0 0.8em;
	padding-bottom: 0.5em;
}

.row_wrapper.detail > .documentation_title:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 3em;
	height: 3px;
	border-radius: 2px;
	background-color: var(--documentation_accent);
}

.row_wrapper.detail .go_to_dedalo {
	position: static;
	grid-column: 1 / span 2;
	color: var(--documentation_accent);
	margin-bottom: 0.5em;
	display: inline-block;
}

.row_wrapper.detail .info_container {
	align-items: baseline;
	max-width: var(--documentation_text_measure);
}

/* divider above each row, not below - avoids a trailing empty line before the next section */
.row_wrapper.detail .info_container > .left-labels,
.row_wrapper.detail .info_container > .rigth-values,
.row_wrapper.detail .info_container > .vertical-group {
	padding: 0.3em 0;
	border-top: 1px solid var(--documentation_border);
}

.row_wrapper.detail .info_container > .left-labels:first-of-type,
.row_wrapper.detail .info_container > .rigth-values:first-of-type {
	border-top: none;
}

.row_wrapper.detail .info_container > .left-labels {
	font-weight: 600;
	color: var(--documentation_muted);
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.03em;
}

.row_wrapper.detail .info_container > .rigth-values {
	color: var(--documentation_ink);
	line-height: 1.5;
}

.documentation_contents_section,
.documentation_related_coins_section {
	position: relative;
	margin-top: var(--documentation_space_lg);
	padding-top: var(--documentation_space_lg);
}

/* short gold rule marks a deliberate section break, shared across sections.
   related_coins_section is excluded (uses its own tinted panel instead) */
.documentation_description_section:before,
.documentation_documents_section:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3em;
	height: 3px;
	border-radius: 2px;
	background-color: var(--documentation_accent);
}

/* contents_section isn't width-capped like its siblings, so its rule centers
   on the shared reading width instead of its own (wider) box */
.documentation_contents_section:before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--documentation_text_measure) / 2);
	transform: translateX(-50%);
	width: 3em;
	height: 3px;
	border-radius: 2px;
	background-color: var(--documentation_accent);
}

.documentation_contents_title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1.05em;
	font-weight: 700;
	color: #333333;
	margin: 0 0 1em;
}

.documentation_contents_title i {
	color: var(--documentation_accent);
}

.documentation_contents_filter {
	display: block;
	width: 100%;
	max-width: 26em;
	margin-bottom: 1em;
	padding: 0.6em 1em;
	border: 1px solid var(--documentation_border);
	border-radius: 2em;
	font-size: 0.9em;
	background-color: var(--documentation_card_bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.documentation_contents_filter:focus {
	outline: none;
	border-color: var(--documentation_accent);
	box-shadow: 0 0 0 3px rgba(183,153,109,0.15);
}

.documentation_contents_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
	gap: 0.75em;
	align-items: start;
}

.documentation_item_child .image_wrapper {
	height: 8em;
}

.documentation_item_child .info_container {
	padding: 0.9em 1em;
	gap: 0.3em;
}

.documentation_item_child .documentation_card_tag {
	margin-top: -0.9em;
	border-radius: 0;
}

.documentation_item_child .documentation_title {
	margin-bottom: 0;
	font-family: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.35;
	color: var(--documentation_ink);
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* secondary relation (archive.js draw_related_items) - full cards, same
   .documentation_contents_grid draw_contents uses, just under a quieter
   muted label instead of a bold heading */
.documentation_related_items_section {
	margin-top: var(--documentation_space_md);
	padding-top: var(--documentation_space_sm);
	border-top: 1px solid var(--documentation_border);
}

.documentation_related_items_label {
	display: block;
	font-weight: 600;
	color: var(--documentation_muted);
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.03em;
	margin-bottom: 0.6em;
}

/* tinted panel instead of a border - reads as its own module, not "more children" */
.documentation_related_coins_section {
	padding: var(--documentation_space_md);
	border-top: none;
	background-color: var(--documentation_media_bg);
	border-radius: 8px;
}

.documentation_related_coins_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
	gap: 0.75em;
}

.related_coin_images {
	display: flex;
	height: 8em;
	background-color: var(--documentation_media_bg);
}

.related_coin_images .image {
	width: 50%;
	height: 100%;
	object-fit: contain;
	background-color: #ffffff;
}

.related_coin_info {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.9em 1em;
}

.related_coin_mint {
	font-weight: 600;
	font-size: 0.95em;
	color: var(--documentation_ink);
}

.related_coin_secondary {
	font-size: 0.8em;
	color: var(--documentation_muted);
}

@media screen and (max-width: 736px) {

	.row_wrapper.detail .info_container {
		grid-template-columns: 100%;
	}

	.row_wrapper.detail .left-labels {
		text-align: left;
		font-weight: bold;
	}

	.row_wrapper.detail .rigth-values {
		grid-column: 1;
		margin-bottom: 0.5em;
	}

	.documentation_contents_grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.documentation_item_child a.row_wrapper {
		flex-direction: row;
		align-items: center;
		border: none;
		border-radius: 0;
		box-shadow: none;
		border-bottom: 1px solid var(--documentation_border);
		padding: 0.75em 0;
	}

	.documentation_item_child a.row_wrapper:hover {
		box-shadow: none;
		transform: none;
		background-color: var(--documentation_media_bg);
	}

	.documentation_item_child:last-child a.row_wrapper {
		border-bottom: none;
	}

	.documentation_item_child .image_wrapper {
		width: 4.5em;
		height: 4.5em;
		flex: 0 0 auto;
	}

	.documentation_item_child .info_container {
		flex: 1 1 auto;
		padding: 0 0 0 1em;
	}

	.documentation_item_child .documentation_card_tag {
		margin-top: 0;
		border-radius: 1em;
	}

	.documentation_related_coins_grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.related_coin_item {
		flex-direction: row;
		align-items: center;
		border: none;
		border-radius: 0;
		box-shadow: none;
		border-bottom: 1px solid var(--documentation_border);
	}

	.related_coin_item:hover {
		box-shadow: none;
		transform: none;
		background-color: var(--documentation_card_bg);
	}

	.related_coin_item:last-child {
		border-bottom: none;
	}

	.related_coin_images {
		width: 6em;
		height: 4.5em;
		flex: 0 0 auto;
	}

	.related_coin_info {
		flex: 1 1 auto;
		padding: 0.5em 0 0.5em 1em;
	}
}

/* pagination intentionally unstyled - shared global look from page/css/pagination.less */