/*
 * Meridian Membership: front end.
 *
 * Course pages follow LearnDash's front-end patterns (status bar, "Course content"
 * list with status circles, focus mode for lessons) but are self-contained: fonts are
 * inherited from the theme, the brand colour comes from Settings → Brand colour
 * (--mm-accent, printed inline), and every rule is scoped under .mm-ui so it does not
 * depend on, or leak into, the theme.
 */

:root {
	/* Brand (overridden inline from Settings). */
	--mm-accent: #1f4034;
	--mm-accent-ink: #fff;

	/* Legacy names used by the login and account forms. */
	--mm-green: #1f4034;
	--mm-green-light: #4c7a5e;
	--mm-gold: #c9a24b;
	--mm-ink: #1f2a24;
	--mm-muted: #66706b;
	--mm-line: #e3e6e4;
	--mm-panel: #f6f7f6;
	--mm-radius: 8px;
}

.mm-ui {
	--mm-accent-hover: color-mix(in srgb, var(--mm-accent) 84%, #000);
	--mm-accent-soft: color-mix(in srgb, var(--mm-accent) 8%, #fff);
	--mm-accent-line: color-mix(in srgb, var(--mm-accent) 28%, #fff);
	--mm-ok: #1f9d6b;
	--mm-ok-soft: #e6f5ee;
	--mm-warn: #b7791f;
	--mm-warn-soft: #fdf3e1;
	--mm-lock: #8a938e;
	--mm-text: #3c4642;
	--mm-line-strong: #cfd5d2;
	--mm-bg: #fff;
	--mm-r: 10px;
	--mm-r-sm: 6px;
	--mm-shadow: 0 1px 2px rgba(16, 24, 20, .05), 0 8px 24px rgba(16, 24, 20, .06);
	--mm-shadow-sm: 0 1px 2px rgba(16, 24, 20, .06);
	color: var(--mm-text);
}

/* ======================================================================
   Shared pieces that also appear outside course pages (unchanged look)
   ====================================================================== */

.mm-button,
.mm-lms .mm-button,
.mm-login .button-primary,
.mm-login input[type="submit"] {
	display: inline-block;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--mm-radius);
	background: var(--mm-green);
	color: #fff;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}
.mm-button:hover,
.mm-button:focus { background: var(--mm-green-light); color: #fff; }
.mm-button:focus-visible { outline: 3px solid var(--mm-gold); outline-offset: 2px; }
.mm-button[disabled] { opacity: .6; cursor: default; }
.mm-button--done { background: var(--mm-panel); color: var(--mm-green); border: 1px solid var(--mm-line); }

/* Restricted view */
.mm-restricted {
	margin: 24px 0;
	padding: 24px;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	background: var(--mm-panel);
	color: var(--mm-ink);
}
.mm-restricted__teaser { color: var(--mm-muted); }
.mm-restricted__message { margin: 12px 0; }
.mm-restricted__note a { font-weight: 600; }

/* Login + forms */
.mm-login,
.mm-reset,
.mm-account { max-width: 420px; }
.mm-login label,
.mm-form label { display: block; margin-bottom: 4px; font-weight: 600; }
.mm-login input[type="text"],
.mm-login input[type="password"],
.mm-form input[type="text"],
.mm-form input[type="email"],
.mm-form input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #c9ccc6;
	border-radius: 6px;
	background: #fff;
}
.mm-login .login-remember label { display: inline; font-weight: normal; }
.mm-login__forgot { margin-top: 8px; }
.mm-form__password { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); }
.mm-notice { padding: 10px 14px; border-left: 4px solid var(--mm-gold); background: var(--mm-panel); }

/* ======================================================================
   Base for our course UI
   ====================================================================== */

.mm-ui,
.mm-ui *,
.mm-ui *::before,
.mm-ui *::after { box-sizing: border-box; }
.mm-ui .mm-lessons,
.mm-ui .mm-topics { margin: 0; padding: 0; list-style: none; }
.mm-ui .mm-lessons > li,
.mm-ui .mm-topics > li { margin: 0; padding: 0; list-style: none; }
.mm-ui .mm-lessons > li::before,
.mm-ui .mm-topics > li::before,
.mm-ui .mm-lessons > li::marker,
.mm-ui .mm-topics > li::marker { content: none; }
.mm-ui a:not(.mm-content a) { text-decoration: none; }
.mm-ui .mm-content a { text-decoration: underline; text-underline-offset: 2px; }

/* Lesson and course text: spacing only; fonts and sizes stay the theme's. */
.mm-ui .mm-content p { margin: 0 0 1.1em; }
.mm-ui .mm-content ul,
.mm-ui .mm-content ol { margin: 0 0 1.1em; padding-left: 1.4em; }
:where(.mm-content) ul { list-style: disc; }
:where(.mm-content) ol { list-style: decimal; }
.mm-ui .mm-content li { margin: .3em 0; }
.mm-ui .mm-content h2,
.mm-ui .mm-content h3,
.mm-ui .mm-content h4 { margin: 1.3em 0 .5em; line-height: 1.3; }
.mm-ui .mm-content > :last-child { margin-bottom: 0; }
.mm-ui svg.mm-icon { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; vertical-align: middle; }
.mm-sr,
.mm-ui .mm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mm-skip { position: absolute; left: -9999px; top: 8px; z-index: 100000; padding: 10px 16px; border-radius: 6px; background: #fff; color: #000; }
.mm-skip:focus { left: 8px; }

.mm-wrap { width: 100%; max-width: 1170px; margin: 0 auto; padding: 48px 21px 80px; }

.mm-ui .mm-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--mm-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}
.mm-ui .mm-eyebrow svg.mm-icon { width: 16px; height: 16px; }
.mm-ui .mm-title {
	margin: 0 0 16px;
	padding: 0;
	color: var(--mm-ink);
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.15;
	text-transform: none;
}
.mm-ui .mm-title--xl { font-size: clamp(30px, 4.4vw, 50px); }
.mm-ui .mm-h2,
.mm-ui .mm-h3 {
	margin: 0;
	padding: 0;
	color: var(--mm-ink);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}
.mm-ui .mm-h3 { font-size: 17px; }
.mm-ui .mm-content { color: var(--mm-text); font-size: 17px; line-height: 1.7; }
.mm-ui .mm-content > :first-child { margin-top: 0; }
.mm-ui .mm-content img,
.mm-ui .mm-content iframe,
.mm-ui .mm-content video { max-width: 100%; }
.mm-ui .mm-empty { margin: 0; padding: 20px; border: 1px dashed var(--mm-line-strong); border-radius: var(--mm-r); color: var(--mm-muted); text-align: center; }

/* Buttons. The :is(.mm-ui, #mm-ui) scope carries ID weight so theme rules such as
   button:not(:hover):not(:active) cannot repaint our buttons. */
:is(.mm-ui, #mm-ui) .mm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: var(--mm-r-sm);
	background: transparent;
	box-shadow: none;
	color: var(--mm-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
:is(.mm-ui, #mm-ui) .mm-btn svg.mm-icon { width: 18px; height: 18px; }
:is(.mm-ui, #mm-ui) .mm-btn--primary { background: var(--mm-accent); border-color: var(--mm-accent); color: var(--mm-accent-ink); }
:is(.mm-ui, #mm-ui) .mm-btn--primary:hover,
:is(.mm-ui, #mm-ui) .mm-btn--primary:focus { background: var(--mm-accent-hover); border-color: var(--mm-accent-hover); color: var(--mm-accent-ink); }
:is(.mm-ui, #mm-ui) .mm-btn--ghost { background: #fff; border-color: var(--mm-line-strong); color: var(--mm-ink); }
:is(.mm-ui, #mm-ui) .mm-btn--ghost:hover,
:is(.mm-ui, #mm-ui) .mm-btn--ghost:focus { border-color: var(--mm-accent); color: var(--mm-accent); background: #fff; }
:is(.mm-ui, #mm-ui) .mm-btn--done { background: var(--mm-ok-soft); border-color: transparent; color: var(--mm-ok); cursor: default; }
:is(.mm-ui, #mm-ui) .mm-btn--lg { min-height: 50px; padding: 12px 26px; font-size: 16px; }
:is(.mm-ui, #mm-ui) .mm-btn:focus-visible,
:is(.mm-ui, #mm-ui) .mm-linkbtn:focus-visible,
:is(.mm-ui, #mm-ui) .mm-iconbtn:focus-visible,
:is(.mm-ui, #mm-ui) .mm-lesson__toggle:focus-visible,
.mm-ui a:focus-visible { outline: 3px solid var(--mm-accent-line); outline-offset: 2px; }
:is(.mm-ui, #mm-ui) .mm-btn[disabled] { opacity: .65; cursor: progress; }
:is(.mm-ui, #mm-ui) .mm-btn--done[disabled] { opacity: 1; cursor: default; }
:is(.mm-ui, #mm-ui) .mm-btn.is-saving svg { animation: mm-spin .8s linear infinite; }
@keyframes mm-spin { to { transform: rotate(360deg); } }
:is(.mm-ui, #mm-ui) .mm-linkbtn {
	margin: 0;
	padding: 4px 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--mm-accent);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
	cursor: pointer;
}
:is(.mm-ui, #mm-ui) .mm-linkbtn:hover { text-decoration: underline; background: none; color: var(--mm-accent-hover); }
:is(.mm-ui, #mm-ui) .mm-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-r-sm);
	background: #fff;
	box-shadow: none;
	color: var(--mm-ink);
	line-height: 1;
	cursor: pointer;
}
:is(.mm-ui, #mm-ui) .mm-iconbtn:hover { border-color: var(--mm-accent); color: var(--mm-accent); background: #fff; }

/* Badge */
.mm-ui .mm-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--mm-panel);
	color: var(--mm-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.mm-ui .mm-badge svg.mm-icon { width: 14px; height: 14px; }
.mm-ui .mm-badge--not-started { background: #eef1f0; color: var(--mm-text); }
.mm-ui .mm-badge--in-progress { background: var(--mm-warn-soft); color: var(--mm-warn); }
.mm-ui .mm-badge--complete { background: var(--mm-ok-soft); color: var(--mm-ok); }
.mm-ui .mm-badge--login,
.mm-ui .mm-badge--locked { background: #eef0ef; color: #5c6661; }
.mm-ui .mm-badge--guest,
.mm-ui .mm-badge--preview { background: var(--mm-accent-soft); color: var(--mm-accent); }

/* Progress */
.mm-progress {
	position: relative;
	height: 8px;
	margin: 8px 0;
	border-radius: 999px;
	background: #e6e9e7;
	overflow: hidden;
}
.mm-progress--sm { height: 6px; margin: 6px 0; }
.mm-progress__fill { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--mm-accent); transition: width .5s ease; }
.mm-progress__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.mm-ui .mm-progress-text { margin: 0; color: var(--mm-muted); font-size: 14px; line-height: 1.4; }
.mm-ui .mm-progress-text strong { color: var(--mm-ink); font-weight: 700; }
.mm-ui .mm-dot { margin: 0 2px; }

/* ======================================================================
   Course page
   ====================================================================== */

.mm-ui .mm-hero { margin: 0 0 28px; }
.mm-ui .mm-hero__meta { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--mm-muted); font-size: 15px; }
.mm-ui .mm-hero__meta svg.mm-icon { width: 17px; height: 17px; }

/* Status bar (LearnDash "course status") */
.mm-ui .mm-status {
	display: grid;
	grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
	align-items: center;
	margin: 0 0 40px;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-r);
	background: var(--mm-bg);
	box-shadow: var(--mm-shadow);
}
.mm-ui .mm-status__cell { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 22px 26px; }
.mm-ui .mm-status__cell + .mm-status__cell { border-left: 1px solid var(--mm-line); }
.mm-ui .mm-status__cell--grow { align-items: stretch; }
.mm-ui .mm-status__cell--grow .mm-progress { margin: 2px 0 0; }
.mm-ui .mm-status__cell--cta { align-items: center; text-align: center; }
.mm-ui .mm-status__label { color: var(--mm-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.mm-ui .mm-status__text { margin: 0; color: var(--mm-ink); font-size: 16px; font-weight: 600; }
.mm-ui .mm-status__note { max-width: 260px; overflow: hidden; color: var(--mm-muted); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.mm-ui .mm-status__cell--note { align-items: flex-start; text-align: left; }
.mm-ui .mm-status__cell--note .mm-status__note { max-width: 240px; white-space: normal; font-size: 14px; }

.mm-ui .mm-course__desc { max-width: 820px; margin: 0 0 44px; }

/* Course content list */
.mm-ui .mm-contents__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.mm-ui .mm-lessons--full { display: flex; flex-direction: column; gap: 10px; }
.mm-ui .mm-lessons--full .mm-lesson {
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-r);
	background: var(--mm-bg);
	box-shadow: var(--mm-shadow-sm);
	transition: border-color .15s, box-shadow .15s;
}
.mm-ui .mm-lessons--full .mm-lesson:hover { border-color: var(--mm-line-strong); box-shadow: var(--mm-shadow); }
.mm-ui .mm-lessons--full .mm-lesson.is-next { border-color: var(--mm-accent-line); }
.mm-ui .mm-lesson__row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px 12px 18px; }
.mm-ui .mm-lesson__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.mm-ui .mm-lesson__num { color: var(--mm-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.mm-ui .mm-lesson__title { color: var(--mm-ink); font-size: 17px; font-weight: 600; line-height: 1.35; }
.mm-ui a.mm-lesson__title:hover,
.mm-ui a.mm-topic__title:hover { color: var(--mm-accent); }
.mm-ui .mm-lesson.is-locked .mm-lesson__title,
.mm-ui .mm-topic .mm-topic__title:not(a) { color: var(--mm-muted); }
.mm-ui .mm-lesson__meta { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--mm-panel); color: var(--mm-muted); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
:is(.mm-ui, #mm-ui) .mm-lesson__toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--mm-muted);
	cursor: pointer;
	transition: background-color .15s, transform .2s;
}
:is(.mm-ui, #mm-ui) .mm-lesson__toggle:hover { background: var(--mm-panel); color: var(--mm-ink); }
.mm-ui .mm-lesson.is-open > .mm-lesson__row .mm-lesson__toggle svg { transform: rotate(180deg); }
:is(.mm-ui, #mm-ui) .mm-lesson__toggle svg { transition: transform .2s; }
.mm-js .mm-ui .mm-lesson.has-topics:not(.is-open) > .mm-lesson__topics { display: none; }
.mm-ui .mm-lessons--full .mm-lesson__topics { padding: 4px 18px 14px 58px; border-top: 1px solid var(--mm-line); background: #fbfcfb; border-radius: 0 0 var(--mm-r) var(--mm-r); }
.mm-ui .mm-topics .mm-topic { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--mm-line); }
.mm-ui .mm-topics .mm-topic:last-child { border-bottom: 0; }
.mm-ui .mm-topic__title { color: var(--mm-text); font-size: 15px; line-height: 1.4; }
.mm-ui .mm-topic.is-current > .mm-topic__title { color: var(--mm-accent); font-weight: 700; }

/* Status circles (LearnDash style) */
.mm-ui .mm-si {
	display: inline-flex;
	flex: 0 0 26px;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--mm-line-strong);
	border-radius: 50%;
	background: #fff;
	color: transparent;
	transition: background-color .2s, border-color .2s, color .2s;
}
.mm-ui .mm-si svg.mm-icon { width: 15px; height: 15px; stroke-width: 3; }
.mm-ui .mm-si--sm { flex-basis: 20px; width: 20px; height: 20px; }
.mm-ui .mm-si--sm svg.mm-icon { width: 12px; height: 12px; }
.mm-ui .mm-si--done { border-color: var(--mm-ok); background: var(--mm-ok); color: #fff; }
.mm-ui .mm-si--locked { border-color: transparent; background: #eef0ef; color: var(--mm-lock); }
.mm-ui .mm-si--locked svg.mm-icon { stroke-width: 2.2; }
.mm-ui .is-current > .mm-lesson__row > .mm-si--todo,
.mm-ui .mm-topic.is-current > .mm-si--todo { border-color: var(--mm-accent); background: radial-gradient(circle, var(--mm-accent) 0 4px, #fff 4.5px); }
.mm-ui .mm-topic.is-current > .mm-si--sm.mm-si--todo { background: radial-gradient(circle, var(--mm-accent) 0 3px, #fff 3.5px); }

/* ======================================================================
   Lesson / topic page (inside the theme)
   ====================================================================== */

.mm-ui .mm-step-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; }
.mm-ui .mm-step-grid--single { grid-template-columns: minmax(0, 1fr); }
.mm-ui .mm-step-main { grid-column: 2; grid-row: 1; min-width: 0; max-width: 820px; }
.mm-ui .mm-step-grid--single .mm-step-main { grid-column: 1; margin: 0 auto; }
.mm-ui .mm-step-side { grid-column: 1; grid-row: 1; position: sticky; top: 24px; }
.admin-bar .mm-ui .mm-step-side { top: 56px; }
.mm-ui .mm-card { border: 1px solid var(--mm-line); border-radius: var(--mm-r); background: var(--mm-bg); box-shadow: var(--mm-shadow); }
.mm-ui .mm-side { overflow: hidden; }
.mm-ui .mm-side__head { padding: 18px 18px 14px; border-bottom: 1px solid var(--mm-line); }
.mm-ui .mm-side__course { display: block; margin-bottom: 8px; }
.mm-ui .mm-side__course .mm-eyebrow { margin-bottom: 4px; font-size: 11px; }
.mm-ui .mm-side__title { display: block; color: var(--mm-ink); font-size: 17px; font-weight: 700; line-height: 1.3; }
.mm-ui a.mm-side__course:hover .mm-side__title { color: var(--mm-accent); }
.mm-ui .mm-side .mm-progress-text { font-size: 13px; }

/* Compact lesson list (sidebars) */
.mm-ui .mm-lessons--side { padding: 6px 0; }
.mm-ui .mm-lessons--side .mm-lesson__row { gap: 10px; min-height: 0; padding: 9px 12px 9px 16px; }
.mm-ui .mm-lessons--side .mm-lesson__title { font-size: 14px; font-weight: 600; }
.mm-ui .mm-lessons--side .mm-si { flex-basis: 22px; width: 22px; height: 22px; }
.mm-ui .mm-lessons--side .mm-si svg.mm-icon { width: 13px; height: 13px; }
.mm-ui .mm-lessons--side .mm-si--sm { flex-basis: 18px; width: 18px; height: 18px; }
.mm-ui .mm-lessons--side .mm-si--sm svg.mm-icon { width: 11px; height: 11px; }
.mm-ui .mm-lessons--side .mm-lesson__meta { padding: 2px 8px; font-size: 11px; }
:is(.mm-ui, #mm-ui) .mm-lessons--side .mm-lesson__toggle { width: 28px; height: 28px; }
.mm-ui .mm-lessons--side .mm-lesson.is-current > .mm-lesson__row { background: var(--mm-accent-soft); box-shadow: inset 3px 0 0 var(--mm-accent); }
.mm-ui .mm-lessons--side .mm-lesson.is-current > .mm-lesson__row .mm-lesson__title { color: var(--mm-accent); }
.mm-ui .mm-lessons--side .mm-lesson__topics { padding: 0 12px 6px 48px; }
.mm-ui .mm-lessons--side .mm-topics .mm-topic { gap: 10px; padding: 6px 0; border-bottom: 0; }
.mm-ui .mm-lessons--side .mm-topic__title { font-size: 13px; }

.mm-ui .mm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; color: var(--mm-muted); font-size: 14px; line-height: 1.4; }
.mm-ui .mm-crumbs a { color: var(--mm-muted); }
.mm-ui .mm-crumbs a:hover { color: var(--mm-accent); }
.mm-ui .mm-crumbs__sep { color: var(--mm-line-strong); }

/* "Lesson content" box on a lesson with topics */
.mm-ui .mm-lessonbox { margin: 36px 0 0; padding: 18px 22px 8px; border: 1px solid var(--mm-line); border-radius: var(--mm-r); background: var(--mm-bg); box-shadow: var(--mm-shadow-sm); }
.mm-ui .mm-lessonbox__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.mm-ui .mm-topics--box .mm-topic { padding: 12px 0; }

/* Previous / mark complete / next */
.mm-ui .mm-stepnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mm-ui .mm-stepnav__prev { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--mm-text); }
.mm-ui .mm-stepnav__prev:hover { color: var(--mm-accent); }
.mm-ui .mm-stepnav__text { display: flex; flex-direction: column; min-width: 0; }
.mm-ui .mm-stepnav__text small { color: var(--mm-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.mm-ui .mm-stepnav__title { max-width: 300px; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.mm-ui .mm-stepnav__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.mm-ui .mm-step-foot { margin: 40px 0 0; padding: 20px 0 0; border-top: 1px solid var(--mm-line); }

/* Locked view inside course pages */
.mm-ui .mm-restricted {
	margin: 0;
	padding: 28px 30px;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-r);
	background: var(--mm-panel);
	color: var(--mm-text);
	font-size: 16px;
}
.mm-ui .mm-restricted .mm-button { border-radius: var(--mm-r-sm); background: var(--mm-accent); color: var(--mm-accent-ink); }
.mm-ui .mm-restricted .mm-button:hover { background: var(--mm-accent-hover); }
.mm-ui .mm-restricted .mm-login .button-primary,
.mm-ui .mm-restricted .mm-login input[type="submit"] { background: var(--mm-accent); color: var(--mm-accent-ink); }

/* ======================================================================
   Focus mode (full screen lesson)
   ====================================================================== */

body.mm-focus-body { margin: 0; background: #f4f5f4; }
.mm-focus {
	--mm-side-w: 340px;
	--mm-top: var(--wp-admin--admin-bar--height, 0px);
	display: grid;
	grid-template-columns: var(--mm-side-w) minmax(0, 1fr);
	min-height: calc(100vh - var(--mm-top));
	background: #f4f5f4;
	font-size: 16px;
	line-height: 1.5;
}
.mm-focus__side {
	position: sticky;
	top: var(--mm-top);
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--mm-top));
	border-right: 1px solid var(--mm-line);
	background: #fff;
	overflow: hidden;
}
.mm-focus__side-head { position: relative; padding: 22px 22px 16px; border-bottom: 1px solid var(--mm-line); }
.mm-focus__side-head .mm-side__course { padding-right: 34px; }
.mm-focus__close { position: absolute; top: 16px; right: 14px; display: none !important; }
.mm-focus__outline { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.mm-focus__main { display: flex; flex-direction: column; min-width: 0; }
.mm-focus__bar {
	position: sticky;
	top: var(--mm-top);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	padding: 10px 28px;
	border-bottom: 1px solid var(--mm-line);
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(1.4) blur(8px);
}
.mm-focus__toggle { display: none !important; }
.mm-focus__exit { display: inline-flex; align-items: center; gap: 8px; color: var(--mm-text); font-size: 15px; font-weight: 600; white-space: nowrap; }
.mm-focus__exit:hover { color: var(--mm-accent); }
.mm-focus__progress { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.mm-focus__progress .mm-progress { flex: 0 1 260px; margin: 0; }
.mm-focus__pct { color: var(--mm-muted); font-size: 13px; white-space: nowrap; }
.mm-focus__pct [data-mm-pct] { color: var(--mm-ink); font-weight: 700; }
.mm-focus__user { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: var(--mm-ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.mm-focus__progress + .mm-focus__user { margin-left: 0; }
.mm-ui .mm-focus__avatar { width: 32px; height: 32px; margin: 0; border-radius: 50%; }
.mm-focus__body { flex: 1 0 auto; padding: 44px 28px 56px; outline: 0; }
.mm-focus__inner { width: 100%; max-width: 860px; margin: 0 auto; }
.mm-focus__body .mm-focus__inner { padding: 40px 48px 48px; border: 1px solid var(--mm-line); border-radius: var(--mm-r); background: #fff; box-shadow: var(--mm-shadow); }
.mm-focus__foot {
	position: sticky;
	bottom: 0;
	z-index: 20;
	padding: 14px 28px;
	border-top: 1px solid var(--mm-line);
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(1.4) blur(8px);
}
.mm-focus__scrim { display: none; }

/* ======================================================================
   Programs (bundles): the program page, steps that open on a schedule
   ====================================================================== */

.mm-ui .mm-step__note { display: block; margin-top: 2px; color: var(--mm-muted); font-size: 14px; line-height: 1.45; }
.mm-ui .mm-step__optional {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--mm-panel);
	color: var(--mm-muted);
	font-size: 11px;
	letter-spacing: .04em;
	vertical-align: 1px;
}
.mm-ui .mm-opens {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--mm-warn-soft);
	color: var(--mm-warn);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}
.mm-ui .mm-opens svg.mm-icon { width: 14px; height: 14px; }
.mm-ui .mm-opens--rule { background: var(--mm-panel); color: var(--mm-muted); }
.mm-ui .mm-lessons--side .mm-opens { padding: 2px 8px; font-size: 11px; }
.mm-ui .mm-steps .mm-lesson.is-locked .mm-lesson__title { color: var(--mm-muted); }
.mm-ui .mm-steps .mm-lesson.is-optional .mm-lesson__row { min-height: 56px; }
.mm-ui .mm-status__link { color: var(--mm-accent); font-size: 14px; font-weight: 600; }
.mm-ui .mm-status__link:hover { text-decoration: underline; }
.mm-ui .mm-badge--scheduled { background: var(--mm-warn-soft); color: var(--mm-warn); }
.mm-ui .mm-bundle-card .mm-eyebrow { margin-bottom: 4px; font-size: 11px; }
:is(.mm-ui, #mm-ui) .mm-btn.is-waiting { border-color: transparent; background: var(--mm-warn-soft); color: var(--mm-warn); cursor: default; }
.mm-ui .mm-lesson.is-scheduled .mm-lesson__title { color: var(--mm-muted); }

/* ======================================================================
   Dashboard shortcodes: [mm_my_courses] [mm_course_progress] [mm_resume]
   ====================================================================== */

.mm-ui.mm-course-list { display: grid; gap: 14px; margin: 0 0 24px; }
.mm-ui .mm-course-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px 28px;
	padding: 20px 24px;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-r);
	background: var(--mm-bg);
	box-shadow: var(--mm-shadow-sm);
	transition: border-color .15s, box-shadow .15s;
}
.mm-ui .mm-course-card:hover { border-color: var(--mm-line-strong); box-shadow: var(--mm-shadow); }
.mm-ui .mm-course-card__body { min-width: 0; }
.mm-ui .mm-course-card__title { margin: 0 0 4px; padding: 0; color: var(--mm-ink); font-size: 19px; font-weight: 700; letter-spacing: 0; line-height: 1.3; text-transform: none; }
.mm-ui .mm-course-card__title a { color: inherit; }
.mm-ui .mm-course-card__title a:hover { color: var(--mm-accent); }
.mm-ui .mm-course-card__meta { margin: 0 0 10px; color: var(--mm-muted); font-size: 14px; }
.mm-ui .mm-course-card__progress { display: flex; align-items: center; gap: 14px; }
.mm-ui .mm-course-card__progress .mm-progress { flex: 1 1 auto; max-width: 420px; margin: 0; }
.mm-ui .mm-course-card__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mm-ui.mm-progress-block { max-width: 520px; padding: 18px 22px; border: 1px solid var(--mm-line); border-radius: var(--mm-r); background: var(--mm-bg); box-shadow: var(--mm-shadow-sm); }
.mm-ui .mm-progress-block__title { margin: 0 0 6px; color: var(--mm-ink); font-size: 16px; font-weight: 700; }
.mm-ui.mm-resume-wrap { display: inline-block; }
.mm-ui .mm-courses--empty { color: var(--mm-muted); }

/* ======================================================================
   Responsive
   ====================================================================== */

@media (max-width: 1100px) {
	.mm-focus { --mm-side-w: 300px; }
	.mm-focus__body .mm-focus__inner { padding: 32px 32px 40px; }
}

@media (max-width: 960px) {
	.mm-ui .mm-step-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.mm-ui .mm-step-main,
	.mm-ui .mm-step-side { grid-column: 1; grid-row: auto; position: static; }

	.mm-focus { grid-template-columns: minmax(0, 1fr); }
	.mm-focus__side {
		position: fixed;
		top: var(--mm-top);
		bottom: 0;
		left: 0;
		z-index: 100;
		width: min(88vw, 360px);
		height: auto;
		transform: translateX(-102%);
		transition: transform .25s ease;
		box-shadow: 0 0 40px rgba(0, 0, 0, .18);
	}
	.mm-focus.is-side-open .mm-focus__side { transform: none; }
	.mm-focus__scrim { position: fixed; inset: var(--mm-top) 0 0; z-index: 90; background: rgba(15, 20, 18, .45); }
	.mm-focus.is-side-open .mm-focus__scrim { display: block; }
	.mm-focus__close,
	.mm-focus__toggle { display: inline-flex !important; }
	.mm-focus__bar { gap: 10px; padding: 8px 14px; }
	.mm-focus__exit span { display: none; }
	.mm-focus__name { display: none; }
	.mm-focus__body { padding: 20px 12px 32px; }
	.mm-focus__body .mm-focus__inner { padding: 24px 20px 28px; }
	.mm-focus__foot { padding: 10px 12px; }
}

@media (max-width: 782px) {
	.mm-wrap { padding: 28px 16px 56px; }
	.mm-ui .mm-status { grid-template-columns: minmax(0, 1fr); }
	.mm-ui .mm-status__cell { padding: 16px 18px; }
	.mm-ui .mm-status__cell + .mm-status__cell { border-left: 0; border-top: 1px solid var(--mm-line); }
	.mm-ui .mm-status__cell--cta { align-items: stretch; }
	:is(.mm-ui, #mm-ui) .mm-status__cell--cta .mm-btn { width: 100%; }
	.mm-ui .mm-status__note { max-width: none; white-space: normal; }
	.mm-ui .mm-lesson__row { gap: 12px; padding: 12px 12px 12px 14px; }
	.mm-ui .mm-lessons--full .mm-lesson__meta { display: none; }
	.mm-ui .mm-lesson__row .mm-opens { padding: 3px 8px; font-size: 12px; white-space: normal; }
	.mm-ui .mm-lessons--full .mm-lesson__topics { padding: 2px 14px 10px 52px; }
	.mm-ui .mm-lesson__title { font-size: 16px; }
	.mm-ui .mm-content { font-size: 16px; }
	.mm-ui .mm-course-card { grid-template-columns: minmax(0, 1fr); padding: 18px; }
	.mm-ui .mm-course-card__aside { flex-direction: row; align-items: center; justify-content: space-between; }
	.mm-ui .mm-stepnav__title { max-width: 140px; }
	.mm-ui .mm-stepnav__text small { display: none; }
}

@media (max-width: 600px) {
	.mm-focus__user { display: none; }
	.mm-focus__pct-word { display: none; }
}

@media (max-width: 480px) {
	.mm-ui .mm-stepnav__prev .mm-stepnav__text { display: none; }
	:is(.mm-ui, #mm-ui) .mm-stepnav__actions .mm-btn { padding: 10px 14px; }
	.mm-ui .mm-stepnav__next span { display: none; }
	.mm-ui .mm-stepnav__next.is-ready span,
	.mm-ui .mm-stepnav__next:only-child span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
	.mm-ui *,
	.mm-focus__side { transition: none !important; animation: none !important; }
}