/**
 * FictionX Manaheg (curricula) - Frontend Styles
 *
 * The page shell below - tokens, hero, scrim, search pill, band, empty state - is
 * COPIED from assets/css/modules/updates/updates.css, as every module in this pass is.
 * If one of the shared values is changed, change the others.
 */

:root {
	--fxmh-teal: #26667c;        /* the site's own --bs-primary */
	--fxmh-teal-deep: #0E3D4C;
	--fxmh-ink: #0B2B33;
	--fxmh-muted: #5B7076;
	--fxmh-mist: #EFF3F4;
	--fxmh-rule: #DCE4E6;

	/* The theme's --bs-primary-rgb is 40,84,109, which is NOT --bs-primary (#26667c):
	   every rgba(var(--bs-primary-rgb), …) tint comes out a different blue. */
	--fxmh-primary-rgb: 38, 102, 124;
}

[data-bs-theme="dark"] {
	/* The teal is ink and border in almost every rule below, and on the dark surface
	   #26667c measured 2.85:1 - under the 4.5:1 a 12.5px label needs. Lightened for
	   dark only, which repairs every teal word at once rather than per component.
	   Its one BACKGROUND use (.fxmh-search-btn:hover, white text) is pinned back to the
	   deep teal further down, or that button would invert into pale-on-white. */
	--fxmh-teal: #4FA3BA;
	--fxmh-ink: #E8F0F2;
	--fxmh-muted: #9FB3B9;
	--fxmh-mist: #0F1B1F;
	--fxmh-rule: rgba(255, 255, 255, .10);
}

/* ==============================================================================
   The hero, on the band header.dwt paints behind every module page
   ============================================================================== */
.fxmh-hero {
	position: relative;
	z-index: 3;
	padding: 18px 0 0;
}
/* A one-way ramp: nothing at the top, where the band's video is left alone behind the
   nav, coming on through the lower half and ending opaque under the search pill.

   It was a near-opaque slab from edge to edge, which is the same mistake the library
   made: it read as a dark rectangle dropped on the page and drew a hard line where it
   met the bright band above it. Measured here at every width from 390 to 1920 — the
   scrim started at .87 immediately, so the cut was at the hero's top edge, around y=103
   on a desktop.

   The stops are deliberately uneven. A straight two-stop ramp spends most of its length
   pale, and that is the height at which the band's video changes tone, so the darkening
   is held back and then brought on quickly. These values are the library's, exactly —
   the two pages are meant to be indistinguishable here. */
.fxmh-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(5, 27, 34, 0) 0%,
		rgba(5, 27, 34, .10) 30%,
		rgba(5, 27, 34, .34) 52%,
		rgba(5, 27, 34, .70) 74%,
		rgba(5, 27, 34, .92) 89%,
		rgba(5, 27, 34, 1) 100%);
	pointer-events: none;
}
/* Start-aligned, not centred: a centred column reads as a campaign banner over the
   site's video band, and `text-align: start` resolves to right in Arabic and left in
   English on its own. The 46px below was clearance for the pill that hung off the
   hero's lower edge; nothing straddles the seam now, so it is 26px. */
.fxmh-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	padding-bottom: 26px;
}
.fxmh-hero-crumbs .breadcrumb {
	justify-content: flex-start;
	margin-bottom: 6px;
	opacity: .85;
}
.fxmh-hero-crumbs .breadcrumb-item,
.fxmh-hero-crumbs .breadcrumb-item a {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-weight: 500;
}
/* The crumbs carry Metronic's .text-hover-primary, whose rule is
   `color: var(--bs-text-primary) !important` — #26667c, the hero's own colour, so a
   hovered crumb vanished. Colour is not winnable here (.text-white is !important too),
   so the feedback rides on opacity. */
.fxmh-hero-crumbs .breadcrumb-item.opacity-75 {
	opacity: .72 !important;
	transition: opacity .2s ease;
}
.fxmh-hero-crumbs .breadcrumb-item.opacity-75:hover {
	opacity: 1 !important;
}
.fxmh-hero-crumbs .breadcrumb-item a:hover {
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.fxmh-hero-title {
	margin: 0;
	color: #fff;
	font-size: clamp(32px, 18px + 3.2vw, 56px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}
.fxmh-hero-sub {
	/* Not `auto`: that re-centres the paragraph inside the start-aligned column. */
	margin: 14px 0 0;
	max-width: 54ch;
	color: rgba(255, 255, 255, .86);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.9;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

/* --------------------------------------------------------------- the pill ---- */
.fxmh-search {
	display: flex;
	align-items: center;
	gap: 8px;
	width: min(620px, 100%);
	margin: 26px auto -46px;   /* the negative margin straddles the seam */
	padding: 7px;
	background: #fff;
	border-radius: 999px;
}
.fxmh-search-field {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding-inline-start: 16px;
	margin: 0;
}
.fxmh-search-icon {
	flex: 0 0 auto;
	color: var(--fxmh-muted);
	font-size: 15px;
}
.fxmh-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--fxmh-ink);
	font-size: 16px;
	font-weight: 500;
	padding: 10px 0;
}
.fxmh-search-input::placeholder {
	color: var(--fxmh-muted);
	font-weight: 400;
	opacity: 1;
}
.fxmh-search-input:focus {
	outline: 0;
}
.fxmh-search:focus-within {
	box-shadow: 0 0 0 3px rgba(var(--fxmh-primary-rgb), .35);
}
.fxmh-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.fxmh-search-btn {
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	background: var(--fxmh-teal-deep);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 30px;
	transition: background .2s ease;
}
.fxmh-search-btn:hover,
.fxmh-search-btn:focus-visible {
	background: var(--fxmh-teal);
}
[data-bs-theme="dark"] .fxmh-search-btn:hover,
[data-bs-theme="dark"] .fxmh-search-btn:focus-visible {
	background: #2E7E96;
}
[data-bs-theme="dark"] .fxmh-search {
	background: #16262B;
}
[data-bs-theme="dark"] .fxmh-search-btn {
	background: #2E7F96;
}
[data-bs-theme="dark"] .fxmh-search-btn:hover {
	background: #3C9AB4;
}

.fxmh-band {
	position: relative;
	z-index: 2;
	background: var(--fxmh-mist);
	/* 86px used to clear the pill hanging off the hero. Nothing straddles the seam
	   now, so this is the ordinary band padding the other listings use. 46px / -46px
	   / 86px were one system and moved together - none of the three is left here. */
	padding: 40px 0 56px;
}

.fxmh-resultline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--fxmh-rule);
}
.fxmh-resultline-text {
	margin: 0;
	color: var(--fxmh-muted);
	font-size: 15px;
	font-weight: 500;
}
.fxmh-resultline-text strong {
	color: var(--fxmh-ink);
	font-weight: 700;
}
.fxmh-clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fxmh-teal);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.fxmh-clear,
.fxmh-clear:hover {
	transition: color .2s ease;
}
.fxmh-clear:hover {
	color: var(--fxmh-teal-deep);
}
[data-bs-theme="dark"] .fxmh-clear:hover {
	color: var(--fxmh-ink);
}

.fxmh-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 64px 20px;
	background: var(--bs-body-bg);
	border: 1px solid var(--fxmh-rule);
	border-radius: 14px;
}
.fxmh-empty-icon {
	color: var(--fxmh-muted);
	font-size: 36px;
	opacity: .5;
	margin-bottom: 16px;
}
.fxmh-empty-title {
	margin: 0;
	color: var(--fxmh-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}
.fxmh-empty-text {
	margin: 10px 0 0;
	color: var(--fxmh-muted);
	font-size: 15px;
}
.fxmh-empty-text:empty {
	display: none;
}
.fxmh-empty-btn {
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	padding: 11px 26px;
	border-radius: 999px;
	background: var(--fxmh-teal);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease;
}
.fxmh-empty-btn:hover {
	background: var(--fxmh-teal-deep);
	color: #fff;
}


/* ==============================================================================
   The filter row
   ==============================================================================
   Grade, then subject, then a search - the shape of the data, which is three levels
   deep with the 317 books hanging off the LEAVES. It is a plain GET form: it works
   with no JavaScript, and a filtered view can be linked to or bookmarked.
   ============================================================================== */
.fxmh-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	padding: 18px 20px;
	margin-bottom: 28px;
	border: 1px solid var(--fxmh-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
}
.fxmh-filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 180px;
}
.fxmh-filter-label {
	color: var(--fxmh-muted);
	font-size: 12.5px;
	font-weight: 600;
}
.fxmh-select,
.fxmh-filter-input {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--fxmh-rule);
	border-radius: 10px;
	background: var(--bs-body-bg);
	color: var(--fxmh-ink);
	font-size: 13.5px;
	font-family: inherit;
	transition: border-color .2s ease;
}
.fxmh-select {
	/* The caret is an inline SVG chevron rather than two CSS triangles: at 5px those
	   render as a speck. A data URI cannot fail to load, and the side it sits on is
	   ours to choose, which the native caret is not. */
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23697A8D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: calc(100% - 14px) center;
	background-size: 12px 8px;
	background-repeat: no-repeat;
}
/* RTL: inline-start is the RIGHT edge, so the caret belongs on the LEFT of the box. */
[dir="rtl"] .fxmh-select {
	background-position: 14px center;
}
[data-bs-theme="dark"] .fxmh-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A8B4C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fxmh-select:disabled {
	opacity: .55;
	cursor: not-allowed;
}
.fxmh-select:focus,
.fxmh-filter-input:focus {
	outline: none;
	border-color: var(--fxmh-teal);
	box-shadow: 0 0 0 3px rgba(var(--fxmh-primary-rgb), .14);
}
.fxmh-filter-actions {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}
.fxmh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--fxmh-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fxmh-btn:hover {
	background: var(--fxmh-teal);
	color: #fff;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* btn-outline-* paints no border in this theme, so the quiet button gets its own. */
.fxmh-btn-quiet {
	background: transparent;
	border-color: var(--fxmh-rule);
	color: var(--fxmh-muted);
}
.fxmh-btn-quiet:hover {
	background: transparent;
	border-color: var(--fxmh-teal);
	color: var(--fxmh-teal);
}

/* ==============================================================================
   Sections and the shelf
   ============================================================================== */
.fxmh-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--fxmh-ink);
	font-size: 17px;
	font-weight: 700;
}
.fxmh-head i {
	color: var(--fxmh-teal);
	font-size: 15px;
}
.fxmh-head-n {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(var(--fxmh-primary-rgb), .10);
	color: var(--fxmh-teal);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.fxmh-sections {
	margin-bottom: 44px;
}
.fxmh-sec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	/* Equal rows: as plain flex items the cards take their height from their own text. */
	grid-auto-rows: 1fr;
	gap: 14px;
}
.fxmh-sec {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--fxmh-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
	text-decoration: none;
	/* Declared on :hover too. These are <a> elements and the theme's
	   a:hover { transition: color .2s ease } at (0,1,1) REPLACES the list below. */
	transition: border-color .2s ease, transform .2s ease;
}
.fxmh-sec:hover {
	border-color: var(--fxmh-teal);
	transform: translateY(-2px);
	transition: border-color .2s ease, transform .2s ease;
}
.fxmh-sec-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(var(--fxmh-primary-rgb), .10);
	color: var(--fxmh-teal);
	overflow: hidden;
}
.fxmh-sec-icon i {
	font-size: 17px;
	color: inherit;
}
.fxmh-sec-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fxmh-sec-body {
	min-width: 0;
}
.fxmh-sec-name {
	display: block;
	color: var(--fxmh-ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fxmh-sec-meta {
	display: block;
	margin-top: 2px;
	color: var(--fxmh-muted);
	font-size: 12.5px;
}
.fxmh-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
}
.fxmh-book {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--fxmh-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.fxmh-book:hover {
	border-color: var(--fxmh-teal);
	transform: translateY(-2px);
	transition: border-color .2s ease, transform .2s ease;
}
.fxmh-cover {
	position: relative;
	/* A textbook is taller than it is wide; 3/4 keeps a real cover uncropped. */
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--bs-body-bg);
}
.fxmh-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* No cover on disk, so the TITLE fills it - and comes out of the body below, so it is
   printed once. Opaque base first: the tint is translucent. */
.fxmh-cover-title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 14px;
	background-color: var(--bs-body-bg);
	background-image: linear-gradient(160deg,
		rgba(var(--fxmh-primary-rgb), .13) 0%,
		rgba(var(--fxmh-primary-rgb), .05) 100%);
	color: var(--fxmh-teal);
	text-align: center;
}
.fxmh-cover-title span {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .fxmh-cover-title {
	background-image: linear-gradient(160deg,
		rgba(var(--fxmh-primary-rgb), .26) 0%,
		rgba(var(--fxmh-primary-rgb), .10) 100%);
	color: #7FC3D6;
}
.fxmh-book-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px 14px;
}
.fxmh-book-title {
	margin: 0;
	color: var(--fxmh-ink);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.fxmh-book-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--fxmh-muted);
	font-size: 12px;
}
.fxmh-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(var(--fxmh-primary-rgb), .09);
	color: var(--fxmh-teal);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.fxmh-chip i {
	font-size: 11px;
	color: inherit;
	line-height: 1;
}
.fxmh-pager-wrap {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

@media (max-width: 767.98px) {
	.fxmh-hero {
		padding-top: 6px;
	}
	.fxmh-hero-inner {
		padding-bottom: 20px;
	}
	.fxmh-band {
		padding-top: 28px;
	}
	.fxmh-filter-actions {
		flex: 1 1 100%;
	}
	.fxmh-btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 575.98px) {
	.fxmh-shelf {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

@media (max-width: 991.98px) {
	/* The off-canvas drawer sits outside the viewport; without this the page can be
	   scrolled sideways to reach it. */
	.wrapper {
		overflow-x: clip;
	}
}

@keyframes fxmh-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.fxmh-hero-title,
.fxmh-hero-sub {
	animation: fxmh-rise .55s cubic-bezier(.22, .7, .3, 1) both;
}
.fxmh-hero-sub { animation-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
	.fxmh-hero-title,
	.fxmh-hero-sub {
		animation: none;
	}
	/* Reduced motion means no MOVEMENT, not a dead page. */
	.fxmh-book:hover,
	.fxmh-sec:hover {
		transform: none;
	}
}
/* =============================================================================
   THE DETAIL SHELL
   =============================================================================
   Copied from assets/css/modules/topics/topics.css (the .fxt-article* block, the
   origin) and shared verbatim with monq, mazaya, album, media, zawity, manaheg,
   govdalil and participate. Change one, change all nine.

   DELIBERATE DIVERGENCE between the copies - do not "fix" these back:
     album, media          -article-media is .is-figure: the picture IS the subject,
                           so it is contained, not cropped to 16/9
     media                 additionally .is-video, which holds an embed
     zawity, manaheg       -article-media is .is-cover: a portrait book cover
     govdalil, participate no -article-media rules at all - those rows carry no image

   -facts, -section, -filebar, -pager and -related are new vocabulary this shell
   introduces; they do not exist in topics.css.
   ============================================================================= */
/* The listing's band reserves 86px at the top for the search pill that overlaps the
   seam. A detail page has no pill, so it closes that gap. */
.fxmh-band-nopill {
	padding-top: 40px;
}

.fxmh-article {
	max-width: 900px;
	margin: 0 auto;
	border-radius: 18px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--fxmh-rule);
}
.fxmh-article-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--fxmh-mist);
}
.fxmh-article-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* No picture on disk: the placeholder is centred small and dimmed rather than
   stretched, so an absent image reads as absent instead of as a bad photograph. */
.fxmh-article-media.is-empty img {
	width: 32%;
	height: auto;
	margin: auto;
	position: absolute;
	inset: 0;
	opacity: .5;
	object-fit: contain;
}
[data-bs-theme="dark"] .fxmh-article-media.is-empty img {
	/* The shared SVG paints its own light gradient because the listings use it too. */
	filter: invert(.92) hue-rotate(180deg);
	opacity: .35;
}
.fxmh-article-inner {
	padding: 28px 38px 26px;
}
.fxmh-article-head {
	padding-bottom: 20px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--fxmh-rule);
}
.fxmh-article-cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(var(--fxmh-primary-rgb), .10);
	color: var(--fxmh-teal);
	font-size: 12.5px;
	font-weight: 700;
}
.fxmh-article-cat i {
	font-size: 11px;
	color: inherit;
}
/* The category arrives as a finished <a>, and the theme's --bs-link-color is ORANGE
   in a teal panel. (0,2,1) beats the link rule without reaching for !important. */
.fxmh-article-cat a {
	color: inherit;
	text-decoration: none;
}
.fxmh-article-title {
	margin: 0 0 14px;
	color: var(--fxmh-ink);
	font-size: 27px;
	font-weight: 800;
	line-height: 1.45;
	/* A stored title can be one unbroken token; without this it overflows the card. */
	overflow-wrap: anywhere;
}
.fxmh-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	color: var(--fxmh-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.fxmh-article-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.fxmh-article-meta-item i {
	font-size: 12px;
	color: inherit;
}

/* The body is the one place the stored HTML runs the show, so these rules CONTAIN it
   rather than style it: the measure, images that overflow, lists, and tables. */
.fxmh-article-body {
	max-width: 68ch;
	margin: 0 auto;
	color: var(--fxmh-ink);
	font-size: 15.5px;
	line-height: 2;
	overflow-wrap: anywhere;
}
.fxmh-article-body > *:first-child { margin-top: 0; }
.fxmh-article-body > *:last-child  { margin-bottom: 0; }
.fxmh-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.fxmh-article-body a {
	color: var(--fxmh-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fxmh-article-body h1,
.fxmh-article-body h2,
.fxmh-article-body h3,
.fxmh-article-body h4 {
	color: var(--fxmh-ink);
	font-weight: 700;
	line-height: 1.6;
}
/* Lists: the reference leaves these to the browser, which in RTL puts the marker on
   the wrong side and indents from the wrong edge. padding-inline-start is the fix in
   both directions. */
.fxmh-article-body ul,
.fxmh-article-body ol {
	padding-inline-start: 1.6em;
	margin-block: 0 16px;
}
.fxmh-article-body li {
	margin-bottom: 6px;
}
.fxmh-article-body blockquote {
	margin: 0 0 16px;
	padding-inline-start: 16px;
	border-inline-start: 3px solid rgba(var(--fxmh-primary-rgb), .35);
	color: var(--fxmh-muted);
}
.fxmh-article-body table {
	max-width: 100%;
	border-collapse: collapse;
}
.fxmh-article-body th,
.fxmh-article-body td {
	padding: 8px 12px;
	border: 1px solid var(--fxmh-rule);
	text-align: start;
}
/* A wide table scrolls inside the column instead of widening the page. The wrapper is
   added by assets/js/fx-detail.js from the body's data-fx-tables attribute. */
.fxmh-table-scroll {
	overflow-x: auto;
	margin: 0 0 18px;
	-webkit-overflow-scrolling: touch;
}
/* Editor HTML carries inline colours chosen against a white page; in dark mode they
   become unreadable. These neutralise the colour without touching the structure, and
   are the only !important rules in this sheet. */
[data-bs-theme="dark"] .fxmh-article-body [style*="color"]      { color: inherit !important; }
[data-bs-theme="dark"] .fxmh-article-body [style*="background"] { background: transparent !important; }
[data-bs-theme="dark"] .fxmh-article-body font[color]           { color: inherit !important; }
[data-bs-theme="dark"] .fxmh-article-body a[style*="color"],
[data-bs-theme="dark"] .fxmh-article-body a[style*="color"]:hover { color: var(--fxmh-teal) !important; }

/* ---- facts: label/value pairs for the fields a row actually carries ---------- */
.fxmh-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px 24px;
	margin: 26px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--fxmh-rule);
	border-radius: 14px;
	background: var(--fxmh-mist);
}
.fxmh-fact {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.fxmh-fact-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fxmh-muted);
	font-size: 12px;
	font-weight: 600;
}
.fxmh-fact-label i {
	font-size: 11px;
	color: inherit;
}
.fxmh-fact-value {
	color: var(--fxmh-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* ---- section: a titled block of stored HTML, repeated ----------------------- */
.fxmh-section {
	margin-top: 28px;
}
.fxmh-section-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	color: var(--fxmh-ink);
	font-size: 17px;
	font-weight: 700;
}
.fxmh-section-title i {
	color: var(--fxmh-teal);
	font-size: 14px;
}

/* ---- filebar: download / watch / open an external link ---------------------- */
.fxmh-filebar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding: 16px 18px;
	border: 1px solid var(--fxmh-rule);
	border-radius: 14px;
	background: var(--fxmh-mist);
}
.fxmh-filebar-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(var(--fxmh-primary-rgb), .10);
	color: var(--fxmh-teal);
}
.fxmh-filebar-icon i {
	font-size: 17px;
	color: inherit;
}
.fxmh-filebar-info {
	flex: 1 1 180px;
	min-width: 0;
}
.fxmh-filebar-title {
	display: block;
	color: var(--fxmh-ink);
	font-size: 14px;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.fxmh-filebar-hint {
	display: block;
	margin-top: 2px;
	color: var(--fxmh-muted);
	font-size: 12.5px;
}
.fxmh-filebar-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--fxmh-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	/* Declared on :hover too - these are <a> elements and the theme's
	   a:hover { transition: color .2s ease } at (0,1,1) REPLACES the list. */
	transition: background-color .2s ease, color .2s ease;
}
.fxmh-filebar-btn:hover {
	background: var(--fxmh-teal);
	color: #fff;
	transition: background-color .2s ease, color .2s ease;
}
/* btn-outline-* paints no border in this theme, so the quiet button gets its own. */
.fxmh-filebar-btn-quiet {
	background: transparent;
	border-color: var(--fxmh-rule);
	color: var(--fxmh-teal);
}
.fxmh-filebar-btn-quiet:hover {
	background: transparent;
	border-color: var(--fxmh-teal);
	color: var(--fxmh-teal);
}

/* ---- pager: previous / next within the same section ------------------------- */
.fxmh-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--fxmh-rule);
}
.fxmh-pager-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fxmh-teal);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: color .2s ease;
}
.fxmh-pager-link:hover {
	color: var(--fxmh-teal-deep);
	transition: color .2s ease;
}
/* RTL: the arrows point with the flow, not against it. */
[dir="rtl"] .fxmh-pager-link i {
	transform: scaleX(-1);
}

/* ---- the share footer ------------------------------------------------------- */
.fxmh-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--fxmh-rule);
}
.fxmh-actions-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fxmh-muted);
	font-size: 13px;
	font-weight: 600;
}
.fxmh-actions-label i {
	font-size: 12px;
	color: inherit;
}
.fxmh-share {
	display: flex;
	align-items: center;
	gap: 8px;
}
.fxmh-share > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--fxmh-mist);
	color: var(--fxmh-muted);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.fxmh-share > *:hover {
	background: rgba(var(--fxmh-primary-rgb), .12);
	color: var(--fxmh-teal);
	transition: background-color .2s ease, color .2s ease;
}
.fxmh-share i {
	font-size: 14px;
	color: inherit;
}
/* The copy button after a successful copy, set by assets/js/fx-detail.js. */
.fxmh-share > .is-done {
	background: rgba(23, 139, 86, .12);
	color: #15794C;
}
[data-bs-theme="dark"] .fxmh-share > .is-done {
	background: rgba(80, 205, 137, .18);
	color: #6FD9A0;
}

/* ---- back to the section ---------------------------------------------------- */
.fxmh-backlink {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 22px;
	color: var(--fxmh-muted);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: color .2s ease;
}
.fxmh-backlink:hover {
	color: var(--fxmh-teal);
	transition: color .2s ease;
}
[dir="rtl"] .fxmh-backlink i {
	transform: scaleX(-1);
}

/* ---- related: the block that used to be a sidebar --------------------------- */
.fxmh-related {
	max-width: 900px;
	margin: 36px auto 0;
}
.fxmh-related-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--fxmh-ink);
	font-size: 17px;
	font-weight: 700;
}
.fxmh-related-head i {
	color: var(--fxmh-teal);
	font-size: 15px;
}

@media (max-width: 767.98px) {
	.fxmh-article-inner {
		padding: 22px 18px 20px;
	}
	.fxmh-article-title {
		font-size: 21px;
	}
	.fxmh-actions {
		justify-content: center;
	}
	.fxmh-facts {
		padding: 16px 18px;
	}
}

@media print {
	.fxmh-actions,
	.fxmh-backlink,
	.fxmh-pager,
	.fxmh-related,
	.fxmh-hero {
		display: none;
	}
	.fxmh-article {
		border: 0;
		max-width: none;
	}
}

/* ---- the book divergence ---------------------------------------------------
   A book's media is its COVER: portrait, contained, and small enough that the
   facts beside it are the point. It is not a 16/9 banner and it is not the
   full-bleed figure the galleries use.
   -------------------------------------------------------------------------- */
.fxmh-article-media.is-cover {
	aspect-ratio: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 20px 4px;
	background: transparent;
}
.fxmh-article-media.is-cover img {
	width: auto;
	height: auto;
	max-width: 240px;
	max-height: 340px;
	object-fit: contain;
	border-radius: 10px;
	border: 1px solid var(--fxmh-rule);
}
/* No cover on disk: the TITLE fills the same box, as the shelf tiles do. */
.fxmh-cover-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 280px;
	padding: 20px 16px;
	border-radius: 10px;
	background-color: var(--bs-body-bg);
	background-image: linear-gradient(160deg,
		rgba(var(--fxmh-primary-rgb), .13) 0%,
		rgba(var(--fxmh-primary-rgb), .05) 100%);
	color: var(--fxmh-teal);
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .fxmh-cover-fallback {
	background-image: linear-gradient(160deg,
		rgba(var(--fxmh-primary-rgb), .26) 0%,
		rgba(var(--fxmh-primary-rgb), .10) 100%);
	color: #7FC3D6;
}
/* Two buttons side by side: read it here, or take it away. */
.fxmh-filebar-btns {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---- the reader page (the /file/ route) ------------------------------------
   The flipbook lives on its own page now rather than inside the card, so its
   jQuery and its plugin CSS load only for a reader who asked to read.
   -------------------------------------------------------------------------- */
.fxmh-reader {
	max-width: 1100px;
	margin: 0 auto;
	border-radius: 18px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--fxmh-rule);
	padding: 20px;
}
.fxmh-reader-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.fxmh-reader-title {
	margin: 0;
	color: var(--fxmh-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* The shared pager's active page.
   class.pager.php emits its own CSS as an inline <style> inside {PageNumber}, i.e.
   AFTER this sheet, so overriding it takes specificity rather than source order.
   Without this the current page stays the theme's blue while everything around it is
   teal - it was set on only 2 of the 14 sheets that render a pager. */
#kt_content .fx-pager .fx-pg-btn.active {
	background: var(--fxmh-teal);
	border-color: var(--fxmh-teal);
}