/*
Theme Name: MorphMath Academy
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morphmath
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

:root {
	--mm-base: var( --wp--preset--color--base );
	--mm-surface: var( --wp--preset--color--surface );
	--mm-panel: var( --wp--preset--color--panel );
	--mm-line: var( --wp--preset--color--line );
	--mm-ink: var( --wp--preset--color--contrast );
	--mm-muted: var( --wp--preset--color--muted );
	--mm-accent: var( --wp--preset--color--accent );
	--mm-correct: var( --wp--preset--color--correct );
	--mm-hint: var( --wp--preset--color--hint );
	--mm-wrong: var( --wp--preset--color--magenta );
	--mm-display: var( --wp--preset--font-family--display );
	--mm-body: var( --wp--preset--font-family--body );
	--mm-mono: var( --wp--preset--font-family--mono );
	--mm-radius: 14px;
	--mm-radius-lg: 22px;
	--mm-hair: 1px solid color-mix( in srgb, var( --mm-line ) 70%, transparent );
	--mm-glow: 0 30px 90px -50px color-mix( in srgb, var( --mm-accent ) 75%, transparent );
	--mm-ease: cubic-bezier( 0.22, 0.68, 0.24, 1 );
}

/* === base === */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var( --mm-base );
	background-image:
		linear-gradient( to right, color-mix( in srgb, var( --mm-line ) 34%, transparent ) 1px, transparent 1px ),
		linear-gradient( to bottom, color-mix( in srgb, var( --mm-line ) 34%, transparent ) 1px, transparent 1px ),
		radial-gradient( 1100px 560px at 62% -8%, color-mix( in srgb, var( --mm-accent ) 22%, transparent ), transparent 68% ),
		radial-gradient( 800px 500px at 8% 8%, color-mix( in srgb, var( --mm-correct ) 10%, transparent ), transparent 70% );
	background-size: 76px 76px, 76px 76px, 100% 100%, 100% 100%;
	background-attachment: fixed;
	color: var( --mm-ink );
}

.wp-site-blocks {
	overflow-x: clip;
}

::selection {
	background: color-mix( in srgb, var( --mm-accent ) 65%, transparent );
	color: #fff;
}

:focus-visible {
	outline: 2px solid var( --mm-correct );
	outline-offset: 3px;
	border-radius: 4px;
}

.mm-hair {
	height: 1px;
	background: color-mix( in srgb, var( --mm-line ) 75%, transparent );
	border: 0;
	width: 100%;
}

.mm-panel {
	background: color-mix( in srgb, var( --mm-surface ) 88%, transparent );
	border: var( --mm-hair );
	border-radius: var( --mm-radius-lg );
	box-shadow: var( --mm-glow );
}

/* === type === */
.mm-eyebrow {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-num {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.16em;
	color: var( --mm-accent );
}

.mm-eq {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--small );
	background: color-mix( in srgb, var( --mm-panel ) 80%, transparent );
	border: var( --mm-hair );
	border-radius: 10px;
	padding: 0.35em 0.7em;
	color: var( --mm-ink );
	white-space: nowrap;
}

.mm-eq--block {
	display: block;
	font-size: var( --wp--preset--font-size--large );
	text-align: center;
	padding: 1em 1.2em;
	white-space: normal;
	letter-spacing: 0.02em;
	text-shadow: 0 0 26px color-mix( in srgb, var( --mm-accent ) 55%, transparent );
}

.mm-lede {
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.55;
	color: color-mix( in srgb, var( --mm-ink ) 82%, var( --mm-muted ) );
}

.mm-muted {
	color: var( --mm-muted );
}

.mm-accent {
	color: var( --mm-accent );
}

.mm-correct-text {
	color: var( --mm-correct );
}

.mm-hint-text {
	color: var( --mm-hint );
}

.mm-underline {
	text-decoration: underline;
	text-decoration-color: color-mix( in srgb, var( --mm-correct ) 70%, transparent );
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

.mm-section-label {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: color-mix( in srgb, var( --mm-line ) 85%, transparent );
}
/* === blocks-extra === */
.mm-page-head {
	padding-block: clamp( 2.5rem, 1.5rem + 3vw, 4.25rem ) clamp( 0.5rem, 0.2rem + 1vw, 1.25rem );
}

.mm-page-head .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	letter-spacing: -0.03em;
}

.mm-stage > p,
.mm-lab__stage > p {
	position: absolute;
	inset-inline: 1rem;
	top: 0.9rem;
	z-index: 3;
	margin: 0;
	max-width: min( 28rem, 78% );
}

.mm-btn-ghost .wp-element-button {
	background: transparent;
	color: var( --mm-ink );
	border: 1px solid color-mix( in srgb, var( --mm-line ) 95%, transparent );
}

.mm-btn-ghost .wp-element-button:hover {
	background: color-mix( in srgb, var( --mm-accent ) 18%, transparent );
	border-color: var( --mm-accent );
	color: var( --mm-ink );
}

.mm-hero__title {
	font-size: clamp( 2.1rem, 1.2rem + 3.4vw, 3.6rem );
	background: linear-gradient( 115deg, #FFFFFF 6%, #D8E5FF 54%, #A6ECC9 96% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

code {
	font-family: var( --mm-mono );
	font-size: 0.9em;
	background: color-mix( in srgb, var( --mm-panel ) 85%, transparent );
	border: 1px solid color-mix( in srgb, var( --mm-line ) 70%, transparent );
	border-radius: 6px;
	padding: 0.08em 0.4em;
	color: var( --mm-ink );
}

.wp-block-list {
	padding-inline-start: 1.15rem;
}

.mm-footer .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mm-footer .wp-block-list li {
	margin-block: 0.4rem;
}

.mm-section__inner > .wp-block-buttons,
.mm-section__inner > .wp-block-heading + .wp-block-buttons {
	margin-block-start: 2.25rem;
}

/* === header === */
.mm-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix( in srgb, var( --mm-base ) 80%, transparent );
	backdrop-filter: blur( 16px ) saturate( 1.3 );
	border-bottom: var( --mm-hair );
	padding-block: 0.85rem;
}

.mm-header .wp-block-group {
	margin-block-start: 0;
}

.mm-header__inner {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	width: 100%;
	align-items: center;
	gap: 1.5rem;
}

.mm-brand {
	margin: 0;
	font-family: var( --mm-display );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
	letter-spacing: -0.03em;
	display: flex;
	align-items: center;
}

.mm-brand::before {
	content: "";
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.5rem;
	background: linear-gradient( 135deg, var( --mm-accent ), var( --mm-correct ) );
	clip-path: polygon( 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38% );
	animation: mm-spin 14s linear infinite;
}

.mm-brand a {
	color: var( --mm-ink );
	text-decoration: none;
}

.mm-brand a:hover {
	color: var( --mm-accent );
}

.mm-nav .wp-block-navigation-item__content {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --mm-muted );
	padding: 0.35rem 0;
	border-bottom: 1px solid transparent;
}

.mm-nav .wp-block-navigation-item__content:hover {
	color: var( --mm-ink );
	border-bottom-color: var( --mm-correct );
}

.mm-nav .current-menu-item .wp-block-navigation-item__content {
	color: var( --mm-ink );
}

.mm-header .wp-block-button__link {
	padding: 0.6rem 1.15rem;
	font-size: var( --wp--preset--font-size--x-small );
}

/* === hero === */
.mm-hero {
	padding-block: clamp( 2.75rem, 1.5rem + 5vw, 5.5rem ) clamp( 3rem, 2rem + 5vw, 6rem );
	position: relative;
	border-bottom: var( --mm-hair );
}

.mm-hero__grid {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	align-items: center;
	display: grid;
	grid-template-columns: minmax( 0, 1.02fr ) minmax( 0, 0.98fr );
	gap: clamp( 2rem, 1rem + 4vw, 4.5rem );
}

.mm-hero__grid > .wp-block-column {
	min-width: 0;
	flex-basis: auto;
}

.mm-hero h1 {
	margin-block: 0.6rem 0;
	letter-spacing: -0.035em;
}

.mm-hero h1 .mm-underline {
	text-decoration-color: color-mix( in srgb, var( --mm-accent ) 70%, transparent );
}

.mm-hero .mm-lede {
	max-width: 34rem;
}

.mm-hero__stats {
	gap: 1.75rem !important;
	flex-wrap: wrap;
	padding-top: 1.5rem;
	margin-block-start: 0.5rem !important;
	border-top: var( --mm-hair );
}

.mm-stat__value {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--large );
	color: var( --mm-correct );
	line-height: 1.1;
}

.mm-stat__label {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-stage {
	position: relative;
	border: var( --mm-hair );
	border-radius: var( --mm-radius-lg );
	background: color-mix( in srgb, var( --mm-surface ) 72%, transparent );
	box-shadow: var( --mm-glow );
	overflow: hidden;
	min-height: 320px;
}

.mm-stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.mm-stage--morph {
	aspect-ratio: 1 / 1;
	max-height: 560px;
}

/* === labs === */
.mm-lab {
	background: color-mix( in srgb, var( --mm-surface ) 86%, transparent );
	border: var( --mm-hair );
	border-radius: var( --mm-radius-lg );
	padding: clamp( 1.25rem, 0.6rem + 2vw, 2.5rem );
	box-shadow: var( --mm-glow );
}

.mm-lab__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.45fr ) minmax( 0, 0.85fr );
	gap: clamp( 1rem, 0.4rem + 1.6vw, 2rem );
	align-items: stretch;
}

.mm-lab__stage {
	position: relative;
	border: var( --mm-hair );
	border-radius: var( --mm-radius );
	background: color-mix( in srgb, var( --mm-base ) 78%, transparent );
	overflow: hidden;
	min-height: 300px;
}

.mm-lab__stage canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
}

.mm-lab--morph .mm-lab__stage { aspect-ratio: 4 / 3; }
.mm-lab--polygon .mm-lab__stage { aspect-ratio: 4 / 3; cursor: crosshair; }
.mm-lab--plot .mm-lab__stage { aspect-ratio: 4 / 3; }

.mm-lab__side {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.mm-ctrl {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.mm-ctrl__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-ctrl__value {
	color: var( --mm-hint );
	letter-spacing: 0;
	text-transform: none;
}

.mm-ctrl input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 5px;
	border-radius: 999px;
	background: linear-gradient( to right, var( --mm-accent ), color-mix( in srgb, var( --mm-accent ) 30%, var( --mm-panel ) ) );
	outline: none;
}

.mm-ctrl input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --mm-ink );
	border: 3px solid var( --mm-base );
	box-shadow: 0 0 0 1px var( --mm-line ), 0 0 18px color-mix( in srgb, var( --mm-accent ) 60%, transparent );
	cursor: grab;
}

.mm-ctrl input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --mm-ink );
	border: 3px solid var( --mm-base );
	cursor: grab;
}

.mm-readout {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.6rem;
	margin-block-start: 0.25rem;
}

.mm-cell {
	border: var( --mm-hair );
	border-radius: 12px;
	padding: 0.7rem 0.85rem;
	background: color-mix( in srgb, var( --mm-panel ) 55%, transparent );
}

.mm-cell__value {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--medium );
	color: var( --mm-correct );
	line-height: 1.2;
}

.mm-cell__label {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-lab__hint {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --mm-hint );
}

.mm-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --mm-muted );
}

.mm-legend span::before {
	content: "";
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 3px;
	margin-right: 0.4rem;
	background: currentColor;
}

.mm-swatch--a::before { background: var( --mm-accent ); }
.mm-swatch--b::before { background: var( --mm-correct ); }
.mm-swatch--c::before { background: var( --mm-hint ); }
.mm-swatch--d::before { background: var( --mm-wrong ); }

/* === sections === */
.mm-section {
	padding-block: clamp( 3rem, 2rem + 5vw, 6rem );
	border-bottom: var( --mm-hair );
}

.mm-section--tint {
	background: color-mix( in srgb, var( --mm-surface ) 55%, transparent );
}

.mm-section__inner {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

.mm-section__head {
	max-width: 46rem;
}

/* === card grid ===
   A disciplined 3-up grid keeps every card the same width, which is what makes
   a row read as a system rather than a stack of boxes. The flagship card opts
   out and spans the full row (see .mm-card--featured). */
.mm-cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 0.55rem + 1.1vw, 1.6rem );
	margin-block-start: 2.5rem;
	align-items: stretch;
}

@media ( max-width: 960px ) {
	.mm-cards { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 620px ) {
	.mm-cards { grid-template-columns: minmax( 0, 1fr ); }
}

/* === card ===
   Layered surface: a tinted panel that settles into surface navy, a hairline
   accent rule across the top edge, and a corner glow that warms on hover. */
.mm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 2rem 1.75rem 1.6rem;
	border: var( --mm-hair );
	border-radius: var( --mm-radius-lg );
	background: linear-gradient( 180deg, color-mix( in srgb, var( --mm-panel ) 80%, transparent ), color-mix( in srgb, var( --mm-surface ) 66%, transparent ) );
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.45s var( --mm-ease ), border-color 0.45s var( --mm-ease ), box-shadow 0.45s var( --mm-ease );
}

.mm-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient( to right, var( --mm-accent ), color-mix( in srgb, var( --mm-accent ) 12%, transparent ) 58%, transparent );
	opacity: 0.6;
	transition: opacity 0.45s var( --mm-ease );
}

.mm-card::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -45%;
	inset-inline-end: -25%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient( closest-side, color-mix( in srgb, var( --mm-accent ) 26%, transparent ), transparent 78% );
	opacity: 0;
	transition: opacity 0.55s var( --mm-ease );
}

.mm-card:hover {
	transform: translateY( -6px );
	border-color: color-mix( in srgb, var( --mm-accent ) 55%, transparent );
	box-shadow: 0 34px 72px -42px color-mix( in srgb, var( --mm-accent ) 85%, transparent );
}

.mm-card:hover::before { opacity: 1; }
.mm-card:hover::after { opacity: 1; }

.mm-card h3 {
	margin: 0;
	font-size: clamp( 1.2rem, 1.08rem + 0.4vw, 1.45rem );
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.mm-card h3 a {
	color: inherit;
	text-decoration: none;
	transition: color 0.35s var( --mm-ease );
}

.mm-card:hover h3 a {
	color: color-mix( in srgb, var( --mm-ink ) 62%, var( --mm-accent ) );
}

.mm-card p { margin: 0; }

.mm-card > p:where( :not( .mm-num ):not( .mm-card__meta ):not( .mm-card__lede ) ) {
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.65;
	color: color-mix( in srgb, var( --mm-ink ) 70%, var( --mm-muted ) );
}

/* Kicker label promoted to a chip — it reads as a tag, not a stray sentence. */
.mm-card p.mm-num {
	align-self: flex-start;
	max-width: 100%;
	padding: 0.32rem 0.62rem;
	border: var( --mm-hair );
	border-radius: 999px;
	background: color-mix( in srgb, var( --mm-panel ) 70%, transparent );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	color: color-mix( in srgb, var( --mm-muted ) 76%, var( --mm-accent ) );
}

/* Footer meta pinned to the card floor behind a hairline, so equal-height cards
   line up their feet instead of drifting. */
.mm-card p.mm-card__meta {
	margin-block-start: auto;
	padding-block-start: 0.9rem;
	border-top: var( --mm-hair );
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --mm-accent ) 82%, var( --mm-muted ) );
}

/* A quiet affordance: only cards that actually link somewhere earn the arrow. */
.mm-card:has( h3 a ) p.mm-card__meta::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 0.55em;
	transition: transform 0.35s var( --mm-ease );
}

.mm-card:has( h3 a ):hover p.mm-card__meta::after { transform: translateX( 0.28em ); }

/* === flagship card ===
   Spans the row and splits into label/title (left) against description
   (right), so the lead track gets a masthead instead of a wider box. */
.mm-card--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.05fr );
	grid-template-rows: auto auto auto;
	column-gap: clamp( 1.5rem, 0.8rem + 2.6vw, 3.5rem );
	row-gap: 0.6rem;
	padding: clamp( 1.8rem, 1.2rem + 1.6vw, 2.6rem ) clamp( 1.6rem, 1rem + 2vw, 2.6rem );
}

.mm-card--featured::before {
	height: 3px;
	opacity: 0.85;
	background: linear-gradient( to right, var( --mm-correct ), color-mix( in srgb, var( --mm-correct ) 14%, transparent ) 55%, transparent );
}

.mm-card--featured p.mm-num {
	grid-area: 1 / 1 / 2 / 2;
	justify-self: start;
	align-self: start;
}

.mm-card--featured h3 {
	grid-area: 2 / 1 / 3 / 2;
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.04;
}

.mm-card--featured p.mm-card__lede {
	grid-area: 1 / 2 / 3 / 3;
	align-self: center;
	max-width: 46ch;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.65;
	color: color-mix( in srgb, var( --mm-ink ) 78%, var( --mm-muted ) );
}

.mm-card--featured p.mm-card__meta {
	grid-area: 3 / 1 / 4 / 3;
	margin-block-start: clamp( 1.1rem, 0.6rem + 1.6vw, 2rem );
}

@media ( max-width: 860px ) {
	.mm-card--featured { grid-template-columns: minmax( 0, 1fr ); }

	.mm-card--featured p.mm-num,
	.mm-card--featured h3,
	.mm-card--featured p.mm-card__lede,
	.mm-card--featured p.mm-card__meta {
		grid-column: 1 / -1;
		grid-row: auto;
		align-self: auto;
		justify-self: auto;
	}

	.mm-card--featured p.mm-card__lede {
		max-width: none;
		font-size: var( --wp--preset--font-size--small );
	}
}

.mm-card--accent::before { background: linear-gradient( to right, var( --mm-correct ), color-mix( in srgb, var( --mm-correct ) 12%, transparent ) 58%, transparent ); }
.mm-card--hint::before { background: linear-gradient( to right, var( --mm-hint ), color-mix( in srgb, var( --mm-hint ) 12%, transparent ) 58%, transparent ); }

.mm-split {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: clamp( 1.5rem, 0.5rem + 3vw, 3.5rem );
	align-items: start;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

.mm-track {
	margin-block-start: 1.5rem;
	border-bottom: var( --mm-hair );
}

.mm-track__row {
	display: grid;
	grid-template-columns: 3.25rem minmax( 0, 1fr ) auto;
	gap: 1rem;
	align-items: center;
	padding-block: 1.05rem;
	border-top: var( --mm-hair );
	transition: background 0.3s var( --mm-ease );
}

.mm-track__row:hover {
	background: color-mix( in srgb, var( --mm-accent ) 8%, transparent );
}

.mm-track__row p { margin: 0; }
.mm-track__row h3 { margin: 0 0 0.15rem; }

.mm-track__num {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--small );
	color: var( --mm-accent );
}

.mm-tag {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --mm-muted );
	border: var( --mm-hair );
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	white-space: nowrap;
}

.mm-tag--correct { color: var( --mm-correct ); border-color: color-mix( in srgb, var( --mm-correct ) 45%, transparent ); }
.mm-tag--hint { color: var( --mm-hint ); border-color: color-mix( in srgb, var( --mm-hint ) 45%, transparent ); }
.mm-tag--accent { color: var( --mm-accent ); border-color: color-mix( in srgb, var( --mm-accent ) 45%, transparent ); }

/* === controls === */
.mm-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.mm-btn {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --mm-muted );
	background: color-mix( in srgb, var( --mm-panel ) 55%, transparent );
	border: 1px solid color-mix( in srgb, var( --mm-line ) 85%, transparent );
	border-radius: 999px;
	padding: 0.5rem 0.95rem;
	cursor: pointer;
	transition: color 0.25s var( --mm-ease ), background 0.25s var( --mm-ease ), border-color 0.25s var( --mm-ease ), transform 0.25s var( --mm-ease );
}

.mm-btn:hover {
	color: var( --mm-ink );
	border-color: color-mix( in srgb, var( --mm-accent ) 60%, transparent );
	background: color-mix( in srgb, var( --mm-accent ) 16%, var( --mm-panel ) );
}

.mm-btn.is-active {
	color: var( --mm-base );
	background: var( --mm-accent );
	border-color: var( --mm-accent );
}

.mm-btn--primary {
	font-size: var( --wp--preset--font-size--small );
	letter-spacing: 0.02em;
	text-transform: none;
	color: var( --mm-base );
	background: var( --mm-correct );
	border-color: var( --mm-correct );
	padding: 0.72rem 1.3rem;
	box-shadow: 0 16px 40px -20px color-mix( in srgb, var( --mm-correct ) 80%, transparent );
}

.mm-btn--primary:hover {
	background: color-mix( in srgb, var( --mm-correct ) 82%, #fff );
	border-color: color-mix( in srgb, var( --mm-correct ) 82%, #fff );
	transform: translateY( -2px );
}

.mm-btn:disabled {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

.mm-lab__side-group {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.mm-hud {
	position: absolute;
	inset-inline: 0.9rem;
	bottom: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --mm-muted );
	pointer-events: none;
}

.mm-hud__name {
	color: var( --mm-accent );
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.mm-hud b {
	color: var( --mm-correct );
	font-weight: 500;
}

.mm-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
	border: 1px solid color-mix( in srgb, var( --mm-correct ) 45%, transparent );
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --mm-correct );
	white-space: normal;
}

.mm-cta {
	border: 1px solid color-mix( in srgb, var( --mm-accent ) 42%, transparent );
	border-radius: 26px;
	background:
		radial-gradient( 620px 320px at 50% 0%, color-mix( in srgb, var( --mm-accent ) 26%, transparent ), transparent 70% ),
		color-mix( in srgb, var( --mm-surface ) 88%, transparent );
	box-shadow: var( --mm-glow );
	padding: clamp( 1.75rem, 1rem + 3vw, 3.5rem );
	text-align: center;
}

.mm-cta .wp-block-buttons { justify-content: center; }
.mm-cta p { margin-inline: auto; max-width: 42rem; }

.mm-aside {
	border-inline-start: 2px solid color-mix( in srgb, var( --mm-hint ) 70%, transparent );
	padding-inline-start: 1.1rem;
	font-size: var( --wp--preset--font-size--small );
	color: color-mix( in srgb, var( --mm-ink ) 88%, var( --mm-muted ) );
}

.mm-note {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --mm-muted );
}

.mm-checklist ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm-checklist li {
	display: grid;
	grid-template-columns: 1.6rem minmax( 0, 1fr );
	gap: 0.6rem;
	padding-block: 0.7rem;
	border-top: var( --mm-hair );
	font-size: var( --wp--preset--font-size--small );
}

.mm-checklist li::before {
	content: "→";
	font-family: var( --mm-mono );
	color: var( --mm-correct );
}

.mm-quote {
	border-inline-start: 3px solid color-mix( in srgb, var( --mm-accent ) 70%, transparent );
	padding-inline-start: 1.35rem;
}

.mm-quote p {
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.5;
	margin: 0 0 0.75rem;
}

/* Resource cards share the card system's surface and lift so the teachers row
   reads as the same family as the track cards. */
.mm-resource {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.9rem 1.7rem 1.7rem;
	border: var( --mm-hair );
	border-radius: var( --mm-radius-lg );
	background: linear-gradient( 180deg, color-mix( in srgb, var( --mm-panel ) 76%, transparent ), color-mix( in srgb, var( --mm-surface ) 62%, transparent ) );
	overflow: hidden;
	transition: transform 0.45s var( --mm-ease ), border-color 0.45s var( --mm-ease ), box-shadow 0.45s var( --mm-ease );
}

.mm-resource::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient( to right, var( --mm-hint ), color-mix( in srgb, var( --mm-hint ) 12%, transparent ) 58%, transparent );
	opacity: 0.55;
	transition: opacity 0.45s var( --mm-ease );
}

.mm-resource:hover {
	transform: translateY( -6px );
	border-color: color-mix( in srgb, var( --mm-hint ) 45%, transparent );
	box-shadow: 0 34px 72px -42px color-mix( in srgb, var( --mm-hint ) 42%, transparent );
}

.mm-resource:hover::before { opacity: 1; }

.mm-resource h3 {
	margin: 0;
	font-size: clamp( 1.15rem, 1.05rem + 0.35vw, 1.35rem );
	line-height: 1.2;
	letter-spacing: -0.012em;
}

.mm-resource p {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.65;
	color: color-mix( in srgb, var( --mm-ink ) 70%, var( --mm-muted ) );
}

.mm-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* === quiz === */
.mm-quiz {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-block-start: 2.25rem;
}

.mm-q {
	border: var( --mm-hair );
	border-radius: var( --mm-radius );
	padding: clamp( 1.15rem, 0.7rem + 1.4vw, 1.9rem );
	background: color-mix( in srgb, var( --mm-surface ) 78%, transparent );
}

.mm-q__text {
	margin: 0 0 1.1rem;
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.4;
}

.mm-q__text .mm-eq { font-size: var( --wp--preset--font-size--small ); }

.mm-opts {
	gap: 0.6rem;
	justify-content: flex-start;
}

.mm-opt .wp-element-button {
	width: 100%;
	justify-content: flex-start;
	text-align: left;
	text-transform: none;
	letter-spacing: 0.01em;
	font-family: var( --mm-mono );
	font-weight: 500;
	font-size: var( --wp--preset--font-size--small );
	padding: 0.9rem 1.1rem;
	border-radius: 12px;
	background: color-mix( in srgb, var( --mm-panel ) 70%, transparent );
	color: var( --mm-ink );
	border: 1px solid color-mix( in srgb, var( --mm-line ) 80%, transparent );
}

.mm-opt .wp-element-button:hover {
	background: color-mix( in srgb, var( --mm-accent ) 18%, var( --mm-panel ) );
	border-color: color-mix( in srgb, var( --mm-accent ) 70%, transparent );
	color: var( --mm-ink );
}

.mm-opt.is-correct .wp-element-button {
	background: color-mix( in srgb, var( --mm-correct ) 24%, var( --mm-panel ) );
	border-color: var( --mm-correct );
	color: #fff;
	animation: mm-pulse-correct 0.9s var( --mm-ease ) both;
}

.mm-opt.is-wrong .wp-element-button {
	background: color-mix( in srgb, var( --mm-wrong ) 20%, var( --mm-panel ) );
	border-color: var( --mm-wrong );
	color: #fff;
	animation: mm-pulse-wrong 0.85s var( --mm-ease ) both;
}

.mm-opt.is-muted .wp-element-button { opacity: 0.55; }

.mm-feedback {
	margin: 0.95rem 0 0;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --mm-muted );
}

.mm-feedback.is-correct { color: var( --mm-correct ); }
.mm-feedback.is-wrong { color: var( --mm-wrong ); }

.mm-q__explain {
	margin-block-start: 0.9rem;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid color-mix( in srgb, var( --mm-hint ) 75%, transparent );
}

.mm-q__explain p { margin: 0; font-size: var( --wp--preset--font-size--small ); color: color-mix( in srgb, var( --mm-ink ) 86%, var( --mm-muted ) ); }
/* Progressive enhancement: JS arms the question, CSS hides the worked answer until revealed. */
.mm-q--armed .mm-q__explain { display: none; }
.mm-q--armed.is-revealed .mm-q__explain { display: block; animation: mm-fade-up 0.5s var( --mm-ease ) both; }

.mm-quiz__score {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-quiz__score .mm-cell__value { font-size: var( --wp--preset--font-size--small ); }

/* === steps === */
.mm-steps {
	margin-block-start: 2rem;
}

.mm-step {
	display: grid;
	grid-template-columns: 4.75rem minmax( 0, 1fr );
	gap: 1.25rem;
	padding-block: 1.2rem;
	border-top: var( --mm-hair );
}

.mm-step__label {
	margin: 0;
	padding-top: 0.25rem;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --mm-accent );
}

.mm-step__body { margin: 0; }
.mm-step__body p { margin: 0 0 0.5rem; }
.mm-step__body .mm-eq { display: inline-block; margin-block: 0.35rem 0.55rem; }
.mm-step.is-hidden { display: none; }
.mm-step.is-revealing { animation: mm-fade-up 0.45s var( --mm-ease ) both; }
.mm-steps__controls { margin-block-start: 1.75rem; }
.mm-steps__count {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --mm-hint );
}

/* === footer === */
.mm-footer {
	background: color-mix( in srgb, var( --mm-surface ) 85%, transparent );
	border-top: var( --mm-hair );
	padding-block: clamp( 2.5rem, 1.5rem + 3vw, 4rem ) 1.5rem;
}

.mm-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 2rem;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

.mm-footer__grid h3 {
	margin: 0 0 0.75rem;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-footer p { margin: 0 0 0.4rem; font-size: var( --wp--preset--font-size--small ); }
.mm-footer a { color: color-mix( in srgb, var( --mm-ink ) 85%, var( --mm-muted ) ); text-decoration: none; }
.mm-footer a:hover { color: var( --mm-correct ); }
.mm-footer .mm-brand { font-size: var( --wp--preset--font-size--medium ); }

.mm-footer__note {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	max-width: var( --wp--style--global--wide-size );
	margin: 2.5rem auto 0;
	padding-top: 1.25rem;
	border-top: var( --mm-hair );
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --mm-muted );
}

/* === motion === */
@keyframes mm-spin { to { transform: rotate( 360deg ); } }
@keyframes mm-fade-up {
	from { opacity: 0; transform: translateY( 14px ); }
	to { opacity: 1; transform: none; }
}
@keyframes mm-pulse-correct {
	0% { box-shadow: 0 0 0 0 color-mix( in srgb, var( --mm-correct ) 65%, transparent ); }
	70% { box-shadow: 0 0 0 16px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes mm-pulse-wrong {
	0% { box-shadow: 0 0 0 0 color-mix( in srgb, var( --mm-wrong ) 60%, transparent ); }
	20% { transform: translateX( -5px ); }
	40% { transform: translateX( 5px ); }
	60% { transform: translateX( -3px ); }
	100% { transform: none; box-shadow: 0 0 0 12px transparent; }
}

.mm-reveal {
	transition: opacity 0.75s var( --mm-ease ), transform 0.75s var( --mm-ease );
}

.mm-reveal.is-below { opacity: 0; transform: translateY( 22px ); }

.mm-live {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.mm-live::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --mm-correct );
	box-shadow: 0 0 12px var( --mm-correct );
	animation: mm-blink 1.8s ease-in-out infinite;
}

@keyframes mm-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* === table === */
.mm-table {
	overflow-x: auto;
}

.mm-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 23rem;
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
}

.mm-table th,
.mm-table td {
	border: var( --mm-hair );
	padding: 0.5rem 0.35rem;
	text-align: center;
}

.mm-table th {
	background: color-mix( in srgb, var( --mm-panel ) 70%, transparent );
	color: var( --mm-muted );
	font-weight: 500;
}

.mm-table tbody td:first-child,
.mm-table thead th:first-child {
	color: var( --mm-accent );
}

.mm-table figcaption {
	font-family: var( --mm-mono );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --mm-muted );
	margin-block-start: 0.7rem;
}

/* === responsive === */
@media ( max-width: 1024px ) {
	.mm-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
	.mm-hero__grid { grid-template-columns: minmax( 0, 1fr ); }
	.mm-stage--morph { aspect-ratio: 4 / 3; }
}

@media ( max-width: 900px ) {
	.mm-lab__grid,
	.mm-split { grid-template-columns: minmax( 0, 1fr ); }
	.mm-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media ( max-width: 700px ) {
	.mm-step { grid-template-columns: minmax( 0, 1fr ); gap: 0.4rem; }
	.mm-step__label { padding-top: 0; }
	.mm-track__row { grid-template-columns: 2.75rem minmax( 0, 1fr ); row-gap: 0.5rem; }
	.mm-readout { grid-template-columns: minmax( 0, 1fr ); }
	.mm-header__inner { gap: 0.75rem; }
	.mm-brand { font-size: var( --wp--preset--font-size--medium ); }
	.mm-footer__grid { grid-template-columns: minmax( 0, 1fr ); gap: 1.5rem; }
}

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.mm-brand::before { animation: none; }
	.mm-reveal.is-below { opacity: 1; transform: none; }
}