/* ================================================================
   MF Suite — shared series/list layout variants
   ----------------------------------------------------------------
   Module-agnostic styles fed by Mf_Sv_Renderer. Everything is scoped
   under .msv so it never leaks into a module and never depends on a
   module's own custom properties. Uses a template-derived palette
   (magenta / cyan / lime / violet + tints), system font stacks only,
   and zero external requests (DSGVO). Frontend JS is allowed for
   variants, but #01 shows every item in a scroll-snap row, so it
   needs none.
   ================================================================ */

.msv {
	--msv-magenta: #ff2d78;
	--msv-cyan: #00b8d1;
	--msv-lime: #8fbf1f;
	--msv-violet: #8a2be2;
	--msv-magenta-tint: #ffe4ee;
	--msv-cyan-tint: #dff7fb;
	--msv-lime-tint: #eef7d9;
	--msv-violet-tint: #f0e4fb;
	--msv-radius-sm: 8px;
	--msv-radius-md: 14px;
	--msv-radius-lg: 22px;

	/* Neutral surface/ink, self-contained (with block-theme presets as a hint). */
	--msv-surface: var( --wp--preset--color--white, #ffffff );
	--msv-ink: var( --wp--preset--color--contrast, #16211d );
	--msv-ink-faint: #616c64;
	--msv-ink-light: #9998a3;
	--msv-line: #e3e3dc;
	--msv-line-strong: #d3d2da;
	--msv-sans: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
	--msv-mono: ui-monospace, sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;

	font-family: var( --msv-sans );
	color: var( --msv-ink );
}

/* ----------------------------------------------------------------
   Variant #01 — horizontal card row, with image
   ---------------------------------------------------------------- */

.msv-v01 .msv-heading {
	margin: 0 0 0.875rem;
	font-size: 1.125rem;
	font-weight: 600;
}

/* Horizontal scroll-snap row showing every item (no cap). */
.msv-v01 .msv-row {
	display: flex;
	gap: 0.875rem;
	margin: 0;
	padding: 0.25rem 0.25rem 0.75rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.msv-v01 .msv-row > li {
	flex: 0 0 220px;
	scroll-snap-align: start;
}

.msv-v01 .msv-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-md );
	background: var( --msv-surface );
	color: var( --msv-ink );
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.msv-v01 a.msv-card:hover,
.msv-v01 a.msv-card:focus-visible {
	border-color: var( --msv-magenta );
	transform: translateY( -2px );
}

/* Current item: unlinked, ringed in the variant magenta. */
.msv-v01 .msv-current {
	border: 2px solid var( --msv-magenta );
	background: var( --msv-magenta-tint );
}

.msv-v01 .msv-img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: cover;
}

.msv-v01 .msv-img--empty {
	background: var( --msv-cyan-tint );
}

.msv-v01 .msv-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.375rem;
	padding: 0.75rem 0.875rem 0.875rem;
}

.msv-v01 .msv-kicker {
	font-family: var( --msv-mono );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --msv-magenta );
}

.msv-v01 .msv-card-title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.msv-v01 .msv-kicker-time {
	font-weight: 400;
	text-transform: none;
	color: var( --msv-ink-faint );
}

/* ----------------------------------------------------------------
   Variant #02 — horizontal card row, WITHOUT image
   ---------------------------------------------------------------- */

/* Head line: label left, muted "N parts" count pushed to the right. */
.msv-v02 .msv-v02-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.msv-v02 .msv-v02-title {
	font-size: 0.9375rem;
	font-weight: 600;
}

.msv-v02 .msv-v02-count {
	margin-left: auto;
	font-family: var( --msv-mono );
	font-size: 0.75rem;
	font-weight: 400;
	color: var( --msv-ink-faint );
}

/* Horizontal scroll row showing every item (no cap). */
.msv-v02 .msv-row {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0 0 0.375rem;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.msv-v02 .msv-row > li {
	flex: 0 0 168px;
}

.msv-v02 .msv-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1rem;
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-md );
	background: var( --msv-surface );
	color: var( --msv-ink );
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.msv-v02 a.msv-card:hover,
.msv-v02 a.msv-card:focus-visible {
	border-color: var( --msv-ink );
}

.msv-v02 .msv-v02-num {
	font-family: var( --msv-mono );
	font-size: 1.25rem;
	font-weight: 700;
	color: var( --msv-line-strong );
}

.msv-v02 .msv-card-title {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

/* Current item: unlinked, ringed and numbered in the variant cyan. */
.msv-v02 .msv-current {
	border-color: var( --msv-cyan );
	background: var( --msv-cyan-tint );
}

.msv-v02 .msv-current .msv-v02-num {
	color: var( --msv-cyan );
}

/* ----------------------------------------------------------------
   Variant #03 — vertical thumbnail list (capped window + "+N more")
   ---------------------------------------------------------------- */

.msv-v03 .msv-heading {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	font-weight: 600;
}

/* The scroll wrapper is inserted by series-variants.js only when the list
   overflows its capped window; until then the list flows at its natural height.
   Shared by every list-family variant (#03, #04, …). */
.msv .msv-scroll {
	position: relative;
}

.msv-v03-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msv-v03-item {
	border-bottom: 1px solid var( --msv-line );
}

.msv-v03-item:last-child {
	border-bottom: none;
}

.msv-v03-link,
.msv-v03-static {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.75rem 0.375rem;
	color: inherit;
	text-decoration: none;
}

.msv-v03-badge {
	flex-shrink: 0;
	width: 1.25rem;
	font-family: var( --msv-mono );
	font-size: 0.8125rem;
	color: var( --msv-ink-faint );
	text-align: center;
}

.msv-v03-thumb {
	flex-shrink: 0;
	width: 80px;
	height: 45px;
	border-radius: var( --msv-radius-sm );
	object-fit: cover;
	background: var( --msv-line );
}

.msv-v03-thumb--empty {
	background: linear-gradient( 135deg, var( --msv-magenta-tint ), var( --msv-cyan-tint ) );
}

.msv-v03-text {
	min-width: 0;
}

.msv-v03-title {
	display: block;
	margin: 0 0 0.2rem;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
}

.msv-v03-meta {
	display: block;
	font-size: 0.8rem;
	color: var( --msv-ink-faint );
}

.msv-v03-link:hover .msv-v03-title,
.msv-v03-link:focus-visible .msv-v03-title {
	text-decoration: underline;
}

/* Current item (Next Read): magenta-tinted, unlinked, magenta badge. */
.msv-v03-item.msv-current {
	border-radius: var( --msv-radius-md );
	border-bottom-color: transparent;
	background: var( --msv-magenta-tint );
}

.msv-v03-item.msv-current .msv-v03-badge {
	font-weight: 700;
	color: var( --msv-magenta );
}

/* Overflow affordance: a bottom fade + a "+N more" counter, shown by the JS
   only while there are rows below the capped fold. Shared by every list-family
   variant (#03, #04, …). */
.msv .msv-more {
	display: none;
}

.msv .msv-scroll.is-more::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2.5rem;
	border-radius: 0 0 var( --msv-radius-md ) var( --msv-radius-md );
	background: linear-gradient( to bottom, transparent, var( --msv-surface ) );
	pointer-events: none;
}

.msv .msv-scroll.is-more .msv-more {
	display: block;
	position: absolute;
	bottom: 0.4rem;
	left: 50%;
	transform: translateX( -50% );
	font-size: 0.75rem;
	font-weight: 600;
	color: var( --msv-magenta );
	pointer-events: none;
}

/* ----------------------------------------------------------------
   Variant #04 — minimal text list (title left, reading time right)
   ---------------------------------------------------------------- */

.msv-v04 .msv-heading {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	font-weight: 600;
}

.msv-v04-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msv-v04-item {
	border-bottom: 1px solid var( --msv-line );
}

.msv-v04-item:last-child {
	border-bottom: none;
}

.msv-v04-link,
.msv-v04-static {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.8rem 0.125rem;
	color: inherit;
	text-decoration: none;
}

.msv-v04-title {
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
}

.msv-v04-time {
	flex-shrink: 0;
	font-family: var( --msv-mono );
	font-size: 0.8rem;
	color: var( --msv-ink-faint );
	white-space: nowrap;
}

.msv-v04-link:hover .msv-v04-title,
.msv-v04-link:focus-visible .msv-v04-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Current item (Next Read): bold title + magenta time. */
.msv-v04-item.msv-current .msv-v04-title {
	font-weight: 700;
}

.msv-v04-item.msv-current .msv-v04-time {
	font-weight: 700;
	color: var( --msv-magenta );
}

/* ----------------------------------------------------------------
   Variant #06 — collapsible "all parts" accordion (native <details>)
   ---------------------------------------------------------------- */

.msv-v06 {
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-md );
	padding: 0 1rem;
}

.msv-v06 summary {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.85rem 0.5rem;
	margin: 0 -0.5rem;
	border-radius: var( --msv-radius-sm );
	list-style: none;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.msv-v06 summary::-webkit-details-marker {
	display: none;
}

/* Chevron drawn from borders (no glyph dependency); rotates when open. */
.msv-v06 summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-left: auto;
	border-right: 2px solid var( --msv-ink-faint );
	border-bottom: 2px solid var( --msv-ink-faint );
	transform: rotate( 45deg );
	transition: transform 0.18s ease, border-color 0.18s ease;
}

.msv-v06[open] summary::after {
	transform: rotate( -135deg );
}

.msv-v06-count {
	font-family: var( --msv-mono );
	font-size: 0.8rem;
	font-weight: 400;
	color: var( --msv-ink-faint );
}

.msv-v06-list {
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
}

.msv-v06-item {
	border-top: 1px solid var( --msv-line );
}

.msv-v06-link,
.msv-v06-static {
	display: flex;
	gap: 0.75rem;
	padding: 0.65rem 0.25rem;
	color: inherit;
	text-decoration: none;
	font-size: 0.9rem;
}

.msv-v06-num {
	flex-shrink: 0;
	width: 1rem;
	font-family: var( --msv-mono );
	color: var( --msv-ink-faint );
}

.msv-v06-title {
	line-height: 1.35;
}

.msv-v06-link:hover .msv-v06-title,
.msv-v06-link:focus-visible .msv-v06-title {
	text-decoration: underline;
}

/* Current item (Next Read / current article in Related Posts): magenta text. */
.msv-v06-item.msv-current .msv-v06-title {
	font-weight: 600;
	color: var( --msv-magenta );
}

.msv-v06-item.msv-current .msv-v06-num {
	color: var( --msv-magenta );
}

/* ----------------------------------------------------------------
   Variant #09 — table-of-contents / timeline list (<ol>, capped 5)
   ---------------------------------------------------------------- */

.msv .msv-v09-title {
	display: inline-block;
	margin-bottom: 0.625rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var( --msv-ink-faint );
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --msv-ink-faint );
}

/* A thin rule down the LEFT edge (the list's own border, so it always spans the
   full height), then a gap, then the entries. The native ol marker is suppressed
   so only the variant's own number shows. */
/* Scoped under .msv (two classes) so these win over block-theme content rules
   like `.entry-content ol` / `.entry-content a` that would otherwise re-add the
   native ol padding/markers or recolour the links. */
/* margin-left leaves a little air to the LEFT of the rule; the rule↔content gap
   lives on the rows (below), NOT on the list padding — Next Read forces
   `.mnr-next-read ol { padding: 0 !important }`, which would otherwise erase it. */
.msv .msv-v09-list {
	margin: 0 0 0 0.5rem;
	padding: 0;
	border-left: 1px solid var( --msv-line-strong );
	list-style: none;
}

.msv .msv-v09-item {
	margin: 0;
}

/* Each entry, indented from the rule: dot · number · title, in flow. The left
   padding is the rule↔content gap (on the row, so the ol reset can't strip it). */
.msv .msv-v09-link,
.msv .msv-v09-static {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0 0.5rem 1.25rem;
	color: var( --msv-ink-faint );
	text-decoration: none;
	font-size: 0.9rem;
}

/* The small grey dot ("Böppel") — a flow marker at the start of each entry, well
   clear of the rule (so it is never clipped when the list scrolls). */
.msv .msv-v09-link::before,
.msv .msv-v09-static::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --msv-surface );
	border: 2px solid var( --msv-line-strong );
}

.msv .msv-v09-i {
	flex-shrink: 0;
	font-family: var( --msv-mono );
	color: var( --msv-ink-light );
}

.msv .msv-v09-link:hover,
.msv .msv-v09-link:focus-visible {
	color: var( --msv-ink );
}

/* Current item: filled magenta dot, magenta number, bold ink title. */
.msv .msv-v09-item.msv-current .msv-v09-static {
	color: var( --msv-ink );
	font-weight: 700;
}

.msv .msv-v09-item.msv-current .msv-v09-static::before {
	background: var( --msv-magenta );
	border-color: var( --msv-magenta );
}

.msv .msv-v09-item.msv-current .msv-v09-i {
	color: var( --msv-magenta );
}

/* ----------------------------------------------------------------
   Variant #10 — vertical milestone timeline (rule + done/active/future dots)
   ---------------------------------------------------------------- */

/* margin-left insets the whole timeline so the rule does not hug the edge;
   padding stays 0 so the Next Read `ol { padding:0 !important }` reset is a no-op. */
.msv .msv-v10-list {
	position: relative;
	margin: 0 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.msv .msv-v10-item {
	margin: 0;
}

.msv .msv-v10-link,
.msv .msv-v10-static {
	position: relative;
	display: flex;
	gap: 1rem;
	padding: 0 0 1.25rem;
	color: inherit;
	text-decoration: none;
}

/* The vertical rule, drawn PER ROW (each row carries its own segment, including
   the gap down to the next row) so the segments stack into one continuous line
   that scrolls with the content — a single list-level rule would only cover the
   visible box and leave scrolled-in rows without a line. */
.msv .msv-v10-link::before,
.msv .msv-v10-static::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 5px;
	width: 2px;
	background: var( --msv-line-strong );
}

/* The last row's segment stops at its dot (no trailing line past the timeline). */
.msv .msv-v10-item:last-child .msv-v10-link::before,
.msv .msv-v10-item:last-child .msv-v10-static::before {
	bottom: auto;
	height: 0.75rem;
}

.msv .msv-v10-item:last-child .msv-v10-link,
.msv .msv-v10-item:last-child .msv-v10-static {
	padding-bottom: 0;
}

/* The milestone dot, above the rule (future = hollow). */
.msv .msv-v10-dot {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-top: 0.15rem;
	border-radius: 50%;
	background: var( --msv-surface );
	border: 2px solid var( --msv-line-strong );
}

/* Done = filled grey; active = magenta with a soft glow ring. */
.msv .msv-v10-dot--done {
	background: var( --msv-ink-light );
	border-color: var( --msv-ink-light );
}

.msv .msv-v10-dot--active {
	background: var( --msv-magenta );
	border-color: var( --msv-magenta );
	box-shadow: 0 0 0 4px var( --msv-magenta-tint );
}

.msv .msv-v10-body {
	min-width: 0;
}

.msv .msv-v10-title {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
	color: var( --msv-ink-faint );
}

.msv .msv-v10-item.msv-current .msv-v10-title {
	color: var( --msv-ink );
}

.msv .msv-v10-meta {
	display: block;
	font-size: 0.8rem;
	color: var( --msv-ink-light );
}

.msv .msv-v10-item.msv-current .msv-v10-meta {
	font-weight: 600;
	color: var( --msv-magenta );
}

.msv .msv-v10-link:hover .msv-v10-title,
.msv .msv-v10-link:focus-visible .msv-v10-title {
	text-decoration: underline;
}

/* ----------------------------------------------------------------
   Variant #12 — overlay tiles (feature image + title overlay), horizontal row
   ---------------------------------------------------------------- */

.msv-v12 .msv-row {
	display: flex;
	gap: 0.875rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.msv-v12 .msv-row > li {
	flex: 0 0 260px;
	scroll-snap-align: start;
}

/* The card is a black column: the feature image on top, then a black zone; the
   caption bridges the two. */
.msv-v12 .msv-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var( --msv-radius-md );
	overflow: hidden;
	background: #0b0b0b;
	color: #ffffff;
	text-decoration: none;
}

.msv-v12 .msv-v12-media {
	position: relative;
	line-height: 0;
}

/* The feature image in a fixed Aufmacher-ratio (24/7) frame: the leading 2400×692
   Aufmacher fills it exactly (shown whole, no crop); other ratios (e.g. 1:1) are
   cover-cropped to the same band. */
.msv-v12 .msv-v12-img {
	display: block;
	width: 100%;
	aspect-ratio: 2400 / 692;
	object-fit: cover;
}

span.msv-v12-img--empty {
	aspect-ratio: 2400 / 692;
	background: linear-gradient( 160deg, var( --msv-magenta ), var( --msv-violet ) );
}

/* Fade the image's lower part into the card's black — solid black by the very
   bottom, so the caption sits on a strongly-dark background and stays readable. */
.msv-v12 .msv-v12-media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 72%;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba( 11, 11, 11, 0.85 ) 68%,
		#0b0b0b 100%
	);
}

/* Caption: only a small overlap into the image's solid-black foot, so the number
   and pin sit where the black is strong (readable) and the title runs on below. */
.msv-v12 .msv-v12-cap {
	position: relative;
	z-index: 1;
	margin-top: -0.85rem;
	padding: 0 0.875rem 0.875rem;
}

.msv-v12 .msv-v12-n {
	font-family: var( --msv-mono );
	font-size: 0.6875rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	opacity: 0.9;
}

/* The map-marker glyph. The Material Symbols font-family + liga must be set here
   (the plugin's material-symbols.css ships only the @font-face), and text-transform
   reset to none — the tagline's uppercase would otherwise break the ligature. */
.msv-v12 .msv-v12-pin {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-size: 1.2em;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	vertical-align: -0.22em;
	font-feature-settings: "liga";
	color: var( --msv-magenta );
}

.msv-v12 .msv-v12-title {
	margin: 0.25rem 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

/* Current tile: ringed in the variant magenta (its tagline carries the pin). */
.msv-v12 .msv-card.msv-current {
	outline: 2px solid var( --msv-magenta );
	outline-offset: -2px;
}

/* ----------------------------------------------------------------
   Variant #13 — carousel with arrow navigation (one card at a time)
   ---------------------------------------------------------------- */

.msv-v13-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.875rem;
}

.msv-v13-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --msv-ink );
}

.msv-v13-nav {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.msv-v13-prev,
.msv-v13-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border: 1px solid var( --msv-line-strong );
	border-radius: 50%;
	background: var( --msv-surface );
	color: var( --msv-ink-faint );
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.msv-v13-prev:hover:not( :disabled ),
.msv-v13-next:hover:not( :disabled ),
.msv-v13-prev:focus-visible,
.msv-v13-next:focus-visible {
	border-color: var( --msv-ink );
	color: var( --msv-ink );
}

.msv-v13-prev:disabled,
.msv-v13-next:disabled {
	opacity: 0.4;
	cursor: default;
}

.msv-v13-count {
	min-width: 2.75rem;
	font-family: var( --msv-mono );
	font-size: 0.75rem;
	color: var( --msv-ink-faint );
	text-align: center;
}

.msv-v13-track {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One slide visible at a time; the server marks the initial one is-active, the
   JS moves it. With no JS the initial (current) slide shows, the rest stay hidden. */
.msv-v13-slide {
	display: none;
}

.msv-v13-slide.is-active {
	display: block;
}

.msv-v13-card {
	display: block;
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-md );
	overflow: hidden;
	background: var( --msv-surface );
	color: var( --msv-ink );
	text-decoration: none;
	transition: border-color 0.15s ease;
}

a.msv-v13-card:hover,
a.msv-v13-card:focus-visible {
	border-color: var( --msv-magenta );
}

/* Feature image in the fixed Aufmacher (24/7) frame: 2400×692 fills it whole,
   other ratios (e.g. 1:1) are cover-cropped to the band. */
.msv-v13-img {
	display: block;
	width: 100%;
	aspect-ratio: 2400 / 692;
	object-fit: cover;
}

span.msv-v13-img--empty {
	aspect-ratio: 2400 / 692;
	background: linear-gradient( 160deg, var( --msv-magenta ), var( --msv-cyan ) );
}

.msv-v13-body {
	padding: 0.875rem 1rem 1rem;
}

.msv-v13-n {
	font-family: var( --msv-mono );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --msv-magenta );
}

.msv-v13-title {
	margin: 0.375rem 0 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ----------------------------------------------------------------
   Variant #14 — long, scrollable list (many parts, native scroll box)
   ---------------------------------------------------------------- */

/* Scoped under .msv so the border/padding win over Next Read's
   `.mnr-next-read ul { padding:0 !important; border:0 }` reset. */
.msv .msv-v14-list {
	max-height: 15rem;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-md );
	list-style: none;
}

.msv .msv-v14-item {
	border-bottom: 1px solid var( --msv-line );
}

.msv .msv-v14-item:last-child {
	border-bottom: none;
}

.msv .msv-v14-link,
.msv .msv-v14-static {
	display: flex;
	gap: 0.75rem;
	padding: 0.6rem 0.875rem;
	color: inherit;
	text-decoration: none;
	font-size: 0.875rem;
	line-height: 1.35;
}

.msv .msv-v14-link:hover,
.msv .msv-v14-link:focus-visible {
	background: var( --msv-line );
}

.msv .msv-v14-i {
	flex-shrink: 0;
	width: 1.4rem;
	font-family: var( --msv-mono );
	color: var( --msv-ink-faint );
}

/* Current part: magenta-tinted, bold, magenta number. */
.msv .msv-v14-item.msv-current .msv-v14-static {
	background: var( --msv-magenta-tint );
	font-weight: 700;
}

.msv .msv-v14-item.msv-current .msv-v14-i {
	color: var( --msv-magenta );
}

/* ----------------------------------------------------------------
   Variant #15 — tab bar with a preview panel
   ---------------------------------------------------------------- */

.msv-v15-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-bottom: 1rem;
}

.msv-v15-tab {
	width: 2.125rem;
	height: 2.125rem;
	border: 1px solid var( --msv-line-strong );
	border-radius: var( --msv-radius-sm );
	background: var( --msv-surface );
	color: var( --msv-ink-faint );
	font-family: var( --msv-mono );
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.msv-v15-tab:hover,
.msv-v15-tab:focus-visible {
	border-color: var( --msv-ink );
	color: var( --msv-ink );
}

.msv-v15-tab.is-active {
	background: var( --msv-ink );
	border-color: var( --msv-ink );
	color: #ffffff;
}

.msv-v15-panel {
	display: none;
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-md );
	overflow: hidden;
	background: var( --msv-surface );
	color: var( --msv-ink );
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.msv-v15-panel.is-active {
	display: block;
}

a.msv-v15-panel:hover,
a.msv-v15-panel:focus-visible {
	border-color: var( --msv-magenta );
}

/* Feature image in the fixed Aufmacher (24/7) frame (2400×692 whole, other ratios
   cover-cropped). */
.msv-v15-img {
	display: block;
	width: 100%;
	aspect-ratio: 2400 / 692;
	object-fit: cover;
}

span.msv-v15-img--empty {
	aspect-ratio: 2400 / 692;
	background: linear-gradient( 160deg, var( --msv-lime ), var( --msv-cyan ) );
}

.msv-v15-body {
	padding: 0.875rem 1rem 1rem;
}

.msv-v15-n {
	font-family: var( --msv-mono );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --msv-ink-faint );
}

.msv-v15-title {
	margin: 0.375rem 0 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ----------------------------------------------------------------
   Variant #16 — "Part X of Y" breadcrumb with prev/next arrows
   ---------------------------------------------------------------- */

.msv.msv-v16 {
	display: flex;
	align-items: center;
	gap: 1.125rem;
}

/* The arrows are BUTTONS that step the centred part (not links). */
.msv .msv-v16-arrow {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	padding: 0;
	border: 1px solid var( --msv-line-strong );
	border-radius: 50%;
	background: var( --msv-surface );
	color: var( --msv-ink );
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.msv .msv-v16-arrow:hover:not( :disabled ),
.msv .msv-v16-arrow:focus-visible {
	border-color: var( --msv-ink );
	background: var( --msv-line );
}

.msv .msv-v16-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.msv .msv-v16-mid {
	flex: 1;
	text-align: center;
}

/* One panel visible at a time; the server marks the initial one is-active. */
.msv .msv-v16-panel {
	display: none;
}

.msv .msv-v16-panel.is-active {
	display: block;
}

.msv .msv-v16-crumb {
	display: block;
	font-family: var( --msv-mono );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --msv-magenta );
}

.msv .msv-v16-title {
	display: inline-block;
	margin-top: 0.375rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var( --msv-ink );
	text-decoration: none;
}

.msv a.msv-v16-title:hover,
.msv a.msv-v16-title:focus-visible {
	text-decoration: underline;
}

/* ----------------------------------------------------------------
   Variant #17 — prev/next preview cards + "show all" (#04 list)
   ---------------------------------------------------------------- */

/* Flex so a single card (at the series ends) fills the width and two split it. */
.msv-v17-cards {
	display: flex;
	gap: 1rem;
}

.msv .msv-v17-card {
	flex: 1 1 0;
	min-width: 0;
	padding: 1rem;
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-md );
	color: var( --msv-ink );
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.msv a.msv-v17-card:hover,
.msv a.msv-v17-card:focus-visible {
	border-color: var( --msv-ink );
}

.msv-v17-dir {
	font-family: var( --msv-mono );
	font-size: 0.6875rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --msv-ink-faint );
}

.msv-v17-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.625rem;
}

/* The small feature-image thumbnail beside the title (not large). */
.msv-v17-img {
	flex-shrink: 0;
	width: 56px;
	height: 40px;
	border-radius: var( --msv-radius-sm );
	object-fit: cover;
	background: var( --msv-line );
}

.msv-v17-img--empty {
	background: linear-gradient( 135deg, var( --msv-magenta-tint ), var( --msv-cyan-tint ) );
}

.msv-v17-title {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

.msv .msv-v17-more {
	margin-top: 0.875rem;
}

.msv .msv-v17-more summary {
	font-size: 0.85rem;
	color: var( --msv-ink-faint );
	cursor: pointer;
}

.msv .msv-v17-more[open] summary {
	margin-bottom: 0.625rem;
}

/* ----------------------------------------------------------------
   Variant #18 — split view (current large left, rest small right;
   hovering a right title previews it on the left)
   ---------------------------------------------------------------- */

.msv.msv-v18 {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.375rem;
	align-items: start;
}

.msv .msv-v18-panel {
	display: none;
	color: var( --msv-ink );
	text-decoration: none;
}

.msv .msv-v18-panel.is-active {
	display: block;
}

.msv .msv-v18-img {
	display: block;
	width: 100%;
	aspect-ratio: 2400 / 692;
	object-fit: cover;
	border-radius: var( --msv-radius-md );
}

.msv span.msv-v18-img--empty {
	background: linear-gradient( 135deg, var( --msv-lime ), var( --msv-cyan ) );
}

.msv .msv-v18-kicker {
	display: block;
	margin-top: 0.625rem;
	font-family: var( --msv-mono );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --msv-magenta );
}

/* The map-marker pin in the (uppercase) kicker needs the Material Symbols font +
   liga, and text-transform reset so the "place" ligature is not broken. */
.msv .msv-v18-pin {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-size: 1.1em;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	vertical-align: -0.2em;
	font-feature-settings: "liga";
}

.msv .msv-v18-title {
	margin: 0.25rem 0 0;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
}

.msv .msv-v18-panel:hover .msv-v18-title,
.msv .msv-v18-panel:focus-visible .msv-v18-title {
	text-decoration: underline;
}

/* The right list is dimmed; hovering a row un-dims its text. */
.msv .msv-v18-rest {
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0.6;
}

.msv .msv-v18-rest-item {
	border-bottom: 1px solid var( --msv-line );
}

.msv .msv-v18-rest-item:last-child {
	border-bottom: none;
}

.msv .msv-v18-rest a {
	display: block;
	padding: 0.55rem 0;
	color: var( --msv-ink-faint );
	font-size: 0.85rem;
	text-decoration: none;
}

.msv .msv-v18-rest a:hover,
.msv .msv-v18-rest a:focus-visible {
	color: var( --msv-ink );
}

.msv .msv-v18-n {
	font-family: var( --msv-mono );
	color: var( --msv-ink-faint );
}

/* -------------------------------------------------------------------------
 * Variant #19 — custom dropdown for many parts.
 *
 * A native <details>/<summary> dropdown. The <summary> is styled as a trigger
 * button (default disclosure marker removed); the panel is a scrollable list of
 * every part, the active one magenta-selected. The chevron rotates when open.
 * ------------------------------------------------------------------------- */
.msv.msv-v19 {
	max-width: 24rem;
}

.msv .msv-v19-dd {
	position: relative;
}

.msv .msv-v19-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	border: 1px solid var( --msv-line-strong );
	border-radius: var( --msv-radius-md );
	background: var( --msv-surface );
	color: var( --msv-ink );
	font-size: 0.875rem;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

/* Strip the native disclosure triangle (WebKit + the standard marker). */
.msv .msv-v19-trigger::-webkit-details-marker {
	display: none;
}

.msv .msv-v19-trigger::marker {
	content: "";
}

.msv .msv-v19-dd[open] .msv-v19-trigger,
.msv .msv-v19-trigger:hover {
	border-color: var( --msv-magenta );
}

.msv .msv-v19-label b {
	font-weight: 700;
}

.msv .msv-v19-chevron {
	flex: none;
	color: var( --msv-ink-faint );
	transition: transform 0.18s ease;
}

.msv .msv-v19-dd[open] .msv-v19-chevron {
	transform: rotate( 180deg );
}

.msv .msv-v19-panel {
	margin-top: 0.375rem;
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-md );
	overflow: hidden;
	max-height: 11.25rem;
	overflow-y: auto;
}

.msv .msv-v19-opt {
	display: block;
	padding: 0.625rem 1rem;
	border-bottom: 1px solid var( --msv-line );
	color: var( --msv-ink-faint );
	font-size: 0.875rem;
	text-decoration: none;
}

.msv .msv-v19-opt:last-child {
	border-bottom: none;
}

.msv .msv-v19-opt:hover,
.msv .msv-v19-opt:focus-visible {
	background: var( --msv-magenta-tint );
	color: var( --msv-ink );
}

.msv .msv-v19-n {
	font-family: var( --msv-mono );
	color: var( --msv-ink-light );
}

.msv .msv-v19-sel {
	background: var( --msv-magenta-tint );
	color: var( --msv-magenta );
	font-weight: 700;
}

.msv .msv-v19-sel .msv-v19-n {
	color: var( --msv-magenta );
}

/* -------------------------------------------------------------------------
 * Variant #20 — sticky-style bottom bar with mini progress.
 *
 * A single compact dark bar: kicker + title on the left, a slim lime progress
 * fill in the middle, a magenta "Continue" button on the right. Rendered in the
 * normal flow (not viewport-fixed). Wraps gracefully on narrow screens.
 * ------------------------------------------------------------------------- */
.msv .msv-v20-bar {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	flex-wrap: wrap;
	padding: 0.75rem 1.125rem;
	border-radius: var( --msv-radius-md );
	background: var( --msv-ink );
	color: #ffffff;
	box-shadow: 0 8px 24px -14px rgba( 20, 20, 30, 0.5 );
}

.msv .msv-v20-txt {
	flex: 1 1 12rem;
	min-width: 0;
}

.msv .msv-v20-kicker {
	display: block;
	font-family: var( --msv-mono );
	font-size: 0.66rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.66 );
}

.msv .msv-v20-title {
	display: block;
	margin-top: 0.125rem;
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msv .msv-v20-track {
	flex: 1 1 5rem;
	max-width: 9rem;
	height: 4px;
	border-radius: 4px;
	background: rgba( 255, 255, 255, 0.16 );
	overflow: hidden;
}

.msv .msv-v20-fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var( --msv-lime );
}

.msv .msv-v20-next {
	flex: none;
	padding: 0.5rem 0.875rem;
	border-radius: var( --msv-radius-sm );
	background: var( --msv-magenta );
	color: #ffffff;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.msv .msv-v20-next:hover,
.msv .msv-v20-next:focus-visible {
	filter: brightness( 1.08 );
}

/* -------------------------------------------------------------------------
 * Variant #22 — book-style chapter list.
 *
 * A printed-book contents page: a "Contents" head, an ordered list where each row
 * is a zero-padded chapter number, the title, a dotted leader and the reading time
 * at the end (the "page number" slot). Serif face for the book feel. The current
 * chapter is magenta + bold. The native ol marker is suppressed (the variant draws
 * its own number). Scoped under `.msv` (two classes) so it wins over block-theme
 * `.entry-content ol`/`a` rules and the Next Read `ol { padding: 0 !important }`
 * reset — layout spacing rides on the rows, never on the list padding.
 * ------------------------------------------------------------------------- */
.msv.msv-v22 {
	font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

.msv .msv-v22-head {
	margin-bottom: 0.875rem;
	font-family: var( --msv-mono );
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --msv-ink-faint );
}

.msv .msv-v22-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msv .msv-v22-item {
	margin: 0;
}

.msv .msv-v22-link,
.msv .msv-v22-static {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.5rem 0;
	color: var( --msv-ink );
	text-decoration: none;
}

.msv .msv-v22-num {
	flex: none;
	font-family: var( --msv-mono );
	font-size: 0.78rem;
	color: var( --msv-ink-faint );
}

.msv .msv-v22-t {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.95rem;
}

/* The dotted leader between the title and the reading time. Nudged up so the dots
   sit on the text baseline (the row aligns on `baseline`). Decorative. */
.msv .msv-v22-dots {
	flex: 1 1 auto;
	min-width: 1.5rem;
	align-self: center;
	border-bottom: 1px dotted var( --msv-line-strong );
	transform: translateY( -0.2rem );
}

.msv .msv-v22-p {
	flex: none;
	font-family: var( --msv-mono );
	font-size: 0.75rem;
	color: var( --msv-ink-faint );
}

/* Hover: nudge the title toward the accent, matching the other list variants. */
.msv .msv-v22-link:hover .msv-v22-t,
.msv .msv-v22-link:focus-visible .msv-v22-t {
	color: var( --msv-magenta );
}

/* Current chapter: magenta number + title + time, bold title, unlinked. */
.msv .msv-v22-item.msv-current .msv-v22-num,
.msv .msv-v22-item.msv-current .msv-v22-t,
.msv .msv-v22-item.msv-current .msv-v22-p {
	color: var( --msv-magenta );
}

.msv .msv-v22-item.msv-current .msv-v22-t {
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Variant #25 — tag-grouped list with a series badge.
 *
 * A violet "series" badge (book glyph + label) above a simple list bound by a left
 * violet rule. Current item violet + bold. The left gap rides on the ROWS (not the
 * ul padding) so the Next Read `ul { padding: 0 !important }` reset can't strip it.
 * Scoped under `.msv` so it wins over block-theme `.entry-content ul`/`a` rules.
 * ------------------------------------------------------------------------- */
.msv .msv-v25-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.75rem;
	padding: 0.3rem 0.75rem;
	border-radius: var( --msv-radius-sm );
	background: var( --msv-violet-tint );
	/* A darker violet than --msv-violet for legible text on the tint. */
	color: #5b1d9e;
	font-family: var( --msv-mono );
	font-size: 0.72rem;
	font-weight: 600;
}

/* The badge glyph needs the icon font explicitly — the generic
   `.material-symbols-outlined` class carries no font-family in this plugin. */
.msv .msv-v25-icon {
	font-family: "Material Symbols Outlined";
	font-feature-settings: "liga";
	font-size: 1rem;
	line-height: 1;
	text-transform: none;
}

.msv .msv-v25-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var( --msv-violet-tint );
}

.msv .msv-v25-item {
	margin: 0;
}

.msv .msv-v25-link,
.msv .msv-v25-static {
	display: block;
	padding: 0.375rem 0 0.375rem 1rem;
	color: var( --msv-ink-faint );
	text-decoration: none;
	font-size: 0.9rem;
}

.msv .msv-v25-link:hover,
.msv .msv-v25-link:focus-visible {
	color: var( --msv-ink );
}

.msv .msv-v25-item.msv-current .msv-v25-static {
	color: var( --msv-violet );
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Variant #26 — "series overview" digest box.
 *
 * A bordered, faintly-gradient box: an ink icon tile + title + "N parts · date"
 * subline, a windowed list (with "…" rows for hidden parts), and an optional CTA
 * with a top divider. Faithful to the template: rows stay muted; only the current
 * part's "(current)" flag is magenta. Scoped under `.msv` so it wins over
 * block-theme `.entry-content` rules and the Next Read `a`/`ul` resets.
 * ------------------------------------------------------------------------- */
.msv.msv-v26 {
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-lg );
	padding: 1.25rem;
	background: linear-gradient( 180deg, var( --msv-surface ), rgba( 20, 20, 30, 0.04 ) );
}

.msv .msv-v26-top {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.msv .msv-v26-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var( --msv-radius-sm );
	background: var( --msv-ink );
	color: #ffffff;
	font-family: "Material Symbols Outlined";
	font-feature-settings: "liga";
	font-size: 1.25rem;
	line-height: 1;
	text-transform: none;
}

.msv .msv-v26-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
}

.msv .msv-v26-sub {
	font-size: 0.72rem;
	color: var( --msv-ink-faint );
}

.msv .msv-v26-list {
	margin: 0 0 0.25rem;
	padding: 0;
	list-style: none;
}

.msv .msv-v26-item {
	margin: 0;
}

.msv .msv-v26-link,
.msv .msv-v26-static {
	display: block;
	padding: 0.25rem 0;
	color: var( --msv-ink-faint );
	font-size: 0.85rem;
	text-decoration: none;
}

.msv .msv-v26-link:hover,
.msv .msv-v26-link:focus-visible {
	color: var( --msv-ink );
}

.msv .msv-v26-n {
	font-family: var( --msv-mono );
	color: var( --msv-ink-light );
}

.msv .msv-v26-ellipsis {
	padding: 0.1rem 0;
	color: var( --msv-ink-light );
	font-size: 0.85rem;
	line-height: 1;
	letter-spacing: 0.15em;
}

.msv .msv-v26-flag {
	color: var( --msv-magenta );
	font-style: normal;
	font-weight: 700;
}

.msv .msv-v26-cta {
	display: block;
	margin-top: 0.625rem;
	padding-top: 0.75rem;
	border-top: 1px solid var( --msv-line );
	color: var( --msv-ink );
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.msv .msv-v26-cta:hover,
.msv .msv-v26-cta:focus-visible {
	color: var( --msv-magenta );
}

/* -------------------------------------------------------------------------
 * Variant #29 — author avatar + inline series chips (swiping author preview).
 *
 * One author panel per part sits in a flex track inside a clipped stage; the chips
 * below select which panel shows by translating the track (JS), the active chip
 * filled magenta. Without JS the chips are plain links. Scoped under `.msv` so it
 * wins over block-theme `a`/`img` rules.
 * ------------------------------------------------------------------------- */
.msv .msv-v29-stage {
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.msv .msv-v29-track {
	display: flex;
	transition: transform 0.35s ease;
}

.msv .msv-v29-panel {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.msv .msv-v29-topic {
	color: var( --msv-magenta );
	text-decoration: none;
}

.msv .msv-v29-topic:hover,
.msv .msv-v29-topic:focus-visible {
	text-decoration: underline;
}

.msv .msv-v29-av {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	object-fit: cover;
}

.msv .msv-v29-av--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, var( --msv-magenta ), var( --msv-violet ) );
	color: #ffffff;
	font-family: var( --msv-mono );
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
}

.msv .msv-v29-name {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
}

.msv .msv-v29-sub {
	font-size: 0.75rem;
	color: var( --msv-ink-faint );
}

.msv .msv-v29-row {
	display: flex;
	gap: 0.375rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.msv .msv-v29-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border: 1px solid var( --msv-line-strong );
	border-radius: 50%;
	color: var( --msv-ink-faint );
	font-family: var( --msv-mono );
	font-size: 0.78rem;
	text-decoration: none;
}

.msv .msv-v29-chip:hover,
.msv .msv-v29-chip:focus-visible {
	border-color: var( --msv-ink );
	color: var( --msv-ink );
}

.msv .msv-v29-chip.is-active {
	background: var( --msv-magenta );
	border-color: var( --msv-magenta );
	color: #ffffff;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Variant #31 — git commit graph (creative, deliberately dark).
 *
 * A terminal card: a vertical branch line with one commit per part (node + hash +
 * title). HEAD = the current part (lime node + glow); ghost = future parts
 * (dimmed). The wrapper carries BOTH classes, so it is styled with the COMPOUND
 * selector `.msv.msv-v31` (not the descendant `.msv .msv-v31`).
 * ------------------------------------------------------------------------- */
.msv.msv-v31 {
	position: relative;
	max-width: 29rem;
	padding: 1.25rem;
	border-radius: var( --msv-radius-md );
	background: #16161c;
	color: #e8e7ee;
	font-family: var( --msv-mono );
}

.msv .msv-v31-branch {
	position: absolute;
	top: 1.9rem;
	bottom: 1.9rem;
	left: calc( 1.25rem + 5px );
	width: 2px;
	background: #2c2c36;
}

.msv .msv-v31-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.7rem 0;
	color: inherit;
	text-decoration: none;
}

.msv .msv-v31-node {
	flex: none;
	z-index: 1;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #3a3a46;
	border: 2px solid #55555f;
}

.msv .msv-v31-hash {
	flex: none;
	width: 4rem;
	font-size: 0.72rem;
	color: #7b7a86;
}

.msv .msv-v31-title {
	font-family: var( --msv-sans );
	font-size: 0.85rem;
	color: #c7c6d0;
}

a.msv-v31-item:hover .msv-v31-title,
a.msv-v31-item:focus-visible .msv-v31-title {
	color: #ffffff;
}

/* HEAD — the current part: lime node with a glow, lime label, white title. */
.msv .msv-v31-head .msv-v31-node {
	background: var( --msv-lime );
	border-color: var( --msv-lime );
	box-shadow: 0 0 0 4px rgba( 143, 191, 31, 0.22 );
}

.msv .msv-v31-head .msv-v31-hash {
	color: var( --msv-lime );
	font-weight: 700;
}

.msv .msv-v31-head .msv-v31-title {
	color: #ffffff;
	font-weight: 600;
}

/* Ghost — parts after HEAD (the not-yet-read future commits). */
.msv .msv-v31-ghost {
	opacity: 0.45;
}

/* -------------------------------------------------------------------------
 * Variant #32 — terminal / CLI listing (creative, deliberately dark).
 *
 * A terminal window: a title bar with traffic-light dots and a monospace body
 * listing the parts as "NN_slug.md" files; the current file is cyan with a
 * "← opened" hint, and a blinking block cursor closes the listing. The body
 * scrolls for long series. Wrapper via the COMPOUND selector `.msv.msv-v32`.
 * ------------------------------------------------------------------------- */
.msv.msv-v32 {
	max-width: 32.5rem;
	border: 1px solid #26262f;
	border-radius: var( --msv-radius-md );
	overflow: hidden;
	background: #0d0d12;
	font-family: var( --msv-mono );
}

.msv .msv-v32-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0.625rem 0.875rem;
	background: #17171d;
}

.msv .msv-v32-bar > span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #3a3a44;
}

.msv .msv-v32-title {
	margin-left: 0.5rem;
	font-style: normal;
	font-size: 0.72rem;
	color: #7b7a86;
}

.msv .msv-v32-body {
	padding: 1rem;
	font-size: 0.78rem;
	line-height: 1.9;
	color: #c7c6d0;
	max-height: 18rem;
	overflow-y: auto;
}

.msv .msv-v32-line {
	margin: 0;
}

.msv .msv-v32-prompt {
	margin-right: 0.5rem;
	color: var( --msv-lime );
}

.msv .msv-v32-file {
	display: block;
	padding-left: 1.375rem;
	color: #9d9ca6;
	text-decoration: none;
}

.msv a.msv-v32-file:hover,
.msv a.msv-v32-file:focus-visible {
	color: #ffffff;
}

.msv .msv-v32-cur {
	color: var( --msv-cyan );
	font-weight: 700;
}

.msv .msv-v32-hint {
	margin-left: 0.5rem;
	color: #5c5b66;
	font-weight: 400;
}

.msv .msv-v32-cursor {
	color: var( --msv-lime );
	animation: msv-v32-blink 1s step-end infinite;
}

@keyframes msv-v32-blink {
	50% {
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.msv .msv-v32-cursor {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Variant #35 — changelog / semver list.
 *
 * A CHANGELOG.md-style list (newest first): a version tag + title + a two-line
 * excerpt per entry, the current part lime-tinted with a "· current" marker. Light
 * layout. Wrapper via the COMPOUND selector `.msv.msv-v35`.
 * ------------------------------------------------------------------------- */
.msv.msv-v35 {
	max-width: 32.5rem;
}

.msv .msv-v35-title {
	margin: 0 0 0.875rem;
	font-family: var( --msv-mono );
	font-size: 0.8rem;
	color: var( --msv-ink-faint );
}

.msv .msv-v35-entry {
	display: flex;
	gap: 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid var( --msv-line );
}

.msv .msv-v35-v {
	flex: none;
	width: 3.5rem;
	padding-top: 1px;
	font-family: var( --msv-mono );
	font-weight: 700;
	font-size: 0.8rem;
	color: var( --msv-ink-faint );
}

.msv .msv-v35-body {
	min-width: 0;
}

.msv .msv-v35-name {
	margin: 0 0 0.2rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.msv .msv-v35-name a {
	color: inherit;
	text-decoration: none;
}

.msv .msv-v35-name a:hover,
.msv .msv-v35-name a:focus-visible {
	color: var( --msv-magenta );
}

.msv .msv-v35-desc {
	display: -webkit-box;
	margin: 0;
	font-size: 0.78rem;
	color: var( --msv-ink-faint );
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Current entry: lime-tinted card that bleeds to the edges, with a darker lime
   (readable on the tint) for the version + marker. */
.msv .msv-v35-current {
	margin: 0 -0.875rem;
	padding: 0.75rem 0.875rem;
	border-top-color: transparent;
	border-radius: var( --msv-radius-md );
	background: var( --msv-lime-tint );
}

.msv .msv-v35-current .msv-v35-v {
	color: #5c8c14;
}

.msv .msv-v35-flag {
	font-family: var( --msv-mono );
	font-style: normal;
	font-size: 0.68rem;
	font-weight: 400;
	color: #5c8c14;
}

/* -------------------------------------------------------------------------
 * Variant #36 — stacktrace / call-stack (creative, deliberately dark).
 *
 * A monospace stack trace: a red "rendering frame N of M" header over frames that
 * cascade deeper (inline padding-left per frame), each with a left rule; the
 * current frame's rule + name are lime. Wrapper via COMPOUND `.msv.msv-v36`.
 * ------------------------------------------------------------------------- */
.msv.msv-v36 {
	padding: 1.25rem;
	border-radius: var( --msv-radius-md );
	background: #16161c;
	font-family: var( --msv-mono );
	font-size: 0.78rem;
	line-height: 2;
	color: #9d9ca6;
}

.msv .msv-v36-err {
	margin: 0 0 0.5rem;
	color: #ff6b6b;
}

.msv .msv-v36-frame {
	display: block;
	margin: 0;
	border-left: 2px solid #2c2c36;
	color: inherit;
	text-decoration: none;
}

.msv .msv-v36-frame b {
	color: #c7c6d0;
	font-weight: 700;
}

.msv a.msv-v36-frame:hover,
.msv a.msv-v36-frame:focus-visible {
	color: #ffffff;
}

.msv .msv-v36-cur {
	border-left-color: var( --msv-lime );
	color: #ffffff;
}

.msv .msv-v36-cur b {
	color: var( --msv-lime );
}

.msv .msv-v36-here {
	margin-left: 0.375rem;
	color: #5c5b66;
}

/* -------------------------------------------------------------------------
 * Variant #37 — Docker-layer stack (creative, light).
 *
 * Each part is a layer card (instruction keyword + title), staggered right by an
 * inline margin-left, with a stacked-layer shadow. Current layer is cyan-tinted.
 * Wrapper via the COMPOUND selector `.msv.msv-v37`.
 * ------------------------------------------------------------------------- */
.msv.msv-v37 {
	max-width: 30rem;
}

.msv .msv-v37-layer {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.7rem 1rem;
	border: 1px solid var( --msv-line );
	border-radius: var( --msv-radius-sm );
	background: var( --msv-surface );
	box-shadow: 0 3px 0 -1px var( --msv-line );
	color: var( --msv-ink );
	text-decoration: none;
}

.msv .msv-v37-layer:not( :last-child ) {
	margin-bottom: 0.5rem;
}

.msv a.msv-v37-layer:hover,
.msv a.msv-v37-layer:focus-visible {
	border-color: var( --msv-cyan );
}

.msv .msv-v37-cmd {
	flex: none;
	width: 2.625rem;
	font-family: var( --msv-mono );
	font-size: 0.68rem;
	color: var( --msv-ink-faint );
}

.msv .msv-v37-title {
	font-size: 0.85rem;
	font-weight: 600;
}

.msv .msv-v37-current {
	border-color: var( --msv-cyan );
	background: var( --msv-cyan-tint );
}

.msv .msv-v37-current .msv-v37-cmd {
	color: var( --msv-cyan );
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Variant #38 — vinyl / playlist tracks (creative, deliberately dark).
 *
 * A spinning vinyl disc beside a capped track list (5 visible, rest scroll via the
 * shared "+N more" window). Current track = "▶" + lime/bold. Wrapper via the
 * COMPOUND selector `.msv.msv-v38`; the disc stays put while the list (or the
 * enhance()-inserted `.msv-scroll`) takes the remaining width.
 * ------------------------------------------------------------------------- */
.msv.msv-v38 {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem;
	border-radius: var( --msv-radius-md );
	background: #16161c;
	color: #e8e7ee;
	font-family: var( --msv-mono );
}

.msv .msv-v38-disc {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: repeating-radial-gradient( circle, #1c1c22 0 2px, #26262f 2px 4px );
	box-shadow: 0 0 0 4px #0d0d12;
	animation: msv-v38-spin 6s linear infinite;
}

.msv .msv-v38-hole {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var( --msv-lime );
}

@keyframes msv-v38-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.msv .msv-v38-disc {
		animation: none;
	}
}

/* The list (and the scroll wrapper enhance() inserts around it) fills the row. */
.msv .msv-v38-list,
.msv.msv-v38 > .msv-scroll {
	flex: 1;
	min-width: 0;
}

.msv .msv-v38-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msv .msv-v38-item {
	border-bottom: 1px solid #26262f;
}

.msv .msv-v38-item:last-child {
	border-bottom: none;
}

.msv .msv-v38-link,
.msv .msv-v38-static {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.5rem 0;
	color: inherit;
	font-size: 0.8rem;
	text-decoration: none;
}

.msv .msv-v38-num {
	flex: none;
	width: 1rem;
	color: #5c5b66;
}

.msv .msv-v38-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: #c7c6d0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msv a.msv-v38-link:hover .msv-v38-title,
.msv a.msv-v38-link:focus-visible .msv-v38-title {
	color: #ffffff;
}

.msv .msv-v38-time {
	flex: none;
	color: #5c5b66;
}

.msv .msv-v38-item.msv-current .msv-v38-num {
	color: var( --msv-lime );
}

.msv .msv-v38-item.msv-current .msv-v38-title {
	color: #ffffff;
	font-weight: 700;
}

/* The shared "+N more" fade defaults to the light surface; on #38's dark card it
   would flash white. Fade to the dark background and tint the counter lime. */
.msv.msv-v38 .msv-scroll.is-more::after {
	background: linear-gradient( to bottom, transparent, #16161c );
}

.msv.msv-v38 .msv-scroll.is-more .msv-more {
	color: var( --msv-lime );
}

/* -------------------------------------------------------------------------
 * Variant #39 — filmstrip (creative, deliberately dark, WITH image).
 *
 * A dotted-perforation strip of fixed-width image frames with a number overlay;
 * current frame lime-outlined; "Scene N — title" caption. The frame aspect ratio
 * follows the image source via a wrapper modifier (`is-featured|is-facebook|
 * is-twitter`), so the strip is short (feature 24/7) or taller (social). Wrapper
 * via the COMPOUND selector `.msv.msv-v39`.
 * ------------------------------------------------------------------------- */
.msv.msv-v39 {
	padding: 1.25rem;
	border-radius: var( --msv-radius-md );
	background: #16161c;
	color: #e8e7ee;
}

.msv .msv-v39-row {
	display: flex;
	gap: 2px;
	padding: 10px 0;
	overflow-x: auto;
	background: #0d0d12;
	border-top: 12px dotted #2c2c36;
	border-bottom: 12px dotted #2c2c36;
}

.msv .msv-v39-frame {
	position: relative;
	flex: 0 0 120px;
	display: flex;
	align-items: flex-end;
	padding: 6px;
	overflow: hidden;
	aspect-ratio: 24 / 7;
	text-decoration: none;
}

.msv .msv-v39-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msv .msv-v39-img--empty {
	background: linear-gradient( 135deg, var( --msv-magenta ), var( --msv-violet ) );
}

.msv .msv-v39-n {
	position: relative;
	z-index: 1;
	font-family: var( --msv-mono );
	font-size: 10px;
	color: rgba( 255, 255, 255, 0.78 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 );
}

.msv a.msv-v39-frame:hover,
.msv a.msv-v39-frame:focus-visible {
	filter: brightness( 1.12 );
}

.msv .msv-v39-current {
	outline: 2px solid var( --msv-lime );
	outline-offset: -2px;
}

.msv .msv-v39-caption {
	margin: 0.875rem 0 0;
	font-family: var( --msv-mono );
	font-size: 0.78rem;
	color: #9d9ca6;
}

.msv .msv-v39-caption strong {
	color: #ffffff;
}

/* Frame aspect ratio per image source (is-featured uses the base 24/7). */
.msv.msv-v39.is-facebook .msv-v39-frame {
	aspect-ratio: 1.91 / 1;
}

.msv.msv-v39.is-twitter .msv-v39-frame {
	aspect-ratio: 2 / 1;
}