/* MO Global — coach portal + coaching gate styles. */

.mo-portal { padding: calc(var(--header-h, 88px) + 40px) 0 96px; background: var(--mo-surface, #F6F5F4); min-height: 70vh; }
.mo-portal .mo-container { max-width: 1160px; }

.mo-portal-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.mo-portal-title { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 0.95; margin: 0; }

.mo-portal-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-portal-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--mo-border, #E4E2DE); background: #fff; color: inherit; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all .2s; }
.mo-portal-tab:hover { border-color: var(--mo-lime, #C1FB52); }
.mo-portal-tab.is-active { background: var(--mo-ink, #0E1311); color: var(--mo-lime, #C1FB52); border-color: var(--mo-ink, #0E1311); }

.mo-portal-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.mo-portal-stats { margin-bottom: 28px; }

/* Client view: the major sections carried no margin and no parent gap, so
   Progress ran straight into Calendar into Default programme with nothing
   between them. Reuse the rhythm .mo-coach gives the customer side.
   Scoped to direct children of the portal container — the customer view nests
   its blocks inside .mo-cpanel, so it keeps its own grid gap untouched. */
#mo-editors { display: grid; gap: clamp(2rem, 4vw, 3rem); }
/* Grid items default to min-width:auto, so a section refuses to shrink below
   its content and blows the track out — on a 390px phone these sections went
   502px wide and dragged the calendar off-screen with them. */
#mo-editors > * { min-width: 0; }
.mo-container > .mo-coach-block + .mo-coach-block,
.mo-container > .mo-coach-block + #mo-editors { margin-top: clamp(2rem, 4vw, 3rem); }
/* Six tiles against the shared 4-column rule left an orphaned row of two with
   half the width empty. 3 × 2 divides evenly, and the wider tile fits the
   longest label ("Awaiting email verify") on one line. */
@media (min-width: 768px) {
	.mo-portal-stats { grid-template-columns: repeat(3, 1fr); }
}
.mo-portal-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; text-decoration: none; font-weight: 600; color: inherit; }
.mo-portal-back:hover { color: var(--mo-steel, #2B6B57); }

/* Pills + badges */
.mo-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mo-pill--ok { background: var(--mo-lime-200, #E6FBB4); color: #1F3300; }
.mo-pill--warn { background: #FCE8E6; color: #A6231A; }
.mo-badge-new { display: inline-block; background: var(--mo-ink, #0E1311); color: var(--mo-lime, #C1FB52); font-size: 0.65rem; font-weight: 800; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }

/* Client profile summary */
.mo-portal-profile { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; }
.mo-portal-profile dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mo-text-muted, #5C625C); margin-bottom: 2px; }
.mo-portal-profile dd { margin: 0; font-weight: 600; }
/* Medical notes: prose, so it gets the whole row rather than one narrow track. */
.mo-portal-profile__wide { grid-column: 1 / -1; }
.mo-portal-profile__wide dd { font-weight: 500; max-width: 68ch; }

/* Exercise browse grid */
.mo-portal-search { justify-content: flex-start; margin-bottom: 18px; }
.mo-portal-search input[type="search"] { flex: 1 1 260px; }
.mo-portal-search input, .mo-portal-search select { padding: 10px 14px; border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 12px; font: inherit; background: #fff; }
.mo-ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
/* Collapsed "Add your own…" form — the library view is for browsing, so the
   create form stays folded until asked for rather than pushing the grid down. */
.mo-portal-add { border: 1px solid var(--mo-border, #E4E2DE); border-radius: 14px; background: #fff; margin-bottom: 18px; }
.mo-portal-add > summary {
	list-style: none; cursor: pointer; padding: 14px 16px;
	display: flex; align-items: center; gap: 8px;
	font-family: var(--font-display, 'Barlow Condensed', sans-serif);
	font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.mo-portal-add > summary::-webkit-details-marker { display: none; }
.mo-portal-add > summary:hover { color: var(--mo-steel, #2B6B57); }
.mo-portal-add > summary:focus-visible { outline: 3px solid rgba(193,251,82,.75); outline-offset: -3px; border-radius: 14px; }
.mo-portal-add[open] > summary { border-bottom: 1px solid var(--mo-border, #E4E2DE); }
.mo-portal-add .mo-coach-form { padding: 16px; }

.mo-ex-card { background: #fff; border: 1px solid var(--mo-border, #E4E2DE); border-radius: 12px; overflow: hidden; }
.mo-ex-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mo-ex-card__ph { width: 100%; aspect-ratio: 4/3; display: grid; place-items: center; background: var(--mo-surface-2, #EDEBE8); font-size: 1.6rem; color: var(--mo-text-muted, #5C625C); }
.mo-ex-card__body { padding: 10px 12px; display: grid; gap: 2px; font-size: 0.85rem; }

/* Plan editors */
.mo-ed-day { border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: #fff; }
.mo-ed-day__title { flex: 1; font-weight: 700; padding: 8px 12px; border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 10px; }
.mo-ed-ex, .mo-ed-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--mo-border, #E4E2DE); }
.mo-ed-ex__name { font-weight: 600; flex: 1 1 160px; }
.mo-ed-ex input, .mo-ed-row input, .mo-ed-row select { padding: 7px 10px; border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 8px; font: inherit; font-size: 0.85rem; }
.mo-ed-ex input { width: 76px; }
.mo-ed-ex input[data-f="note"] { flex: 1 1 120px; width: auto; }
/* min-width:0 or the flex basis is ignored: a control's automatic minimum is
   its content, and the meal <select> lists recipe names ~500px long, so it
   refused to shrink and pushed the whole page sideways on a phone. */
.mo-ed-row select { flex: 1 1 180px; min-width: 0; }
.mo-ed-row input { flex: 1 1 110px; min-width: 0; }
.mo-ed-ex input, .mo-ed-ex__name { min-width: 0; }
/* Long option text must not widen the control either. */
.mo-ed-row select, .mo-ed-row input { max-width: 100%; text-overflow: ellipsis; }
.mo-ed-x { border: 0; background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--mo-text-muted, #5C625C); padding: 4px 8px; }
.mo-ed-x:hover { color: #A6231A; }
.mo-ed-search { position: relative; margin-top: 10px; }
.mo-ed-search input { width: 100%; padding: 9px 12px; border: 1.5px dashed var(--mo-border, #E4E2DE); border-radius: 10px; font: inherit; font-size: 0.9rem; }
.mo-ed-search__results { position: absolute; z-index: 30; inset-inline: 0; top: 100%; background: #fff; border: 1px solid var(--mo-border, #E4E2DE); border-radius: 10px; box-shadow: 0 10px 30px rgba(11,15,10,.12); max-height: 260px; overflow: auto; }
.mo-ed-search__results button { display: block; width: 100%; text-align: start; padding: 9px 12px; border: 0; background: none; font: inherit; font-size: 0.88rem; cursor: pointer; }
.mo-ed-search__results button:hover { background: var(--mo-lime-200, #E6FBB4); }
.mo-ed-search__results button span { display: block; font-size: 0.72rem; color: var(--mo-text-muted, #5C625C); }
.mo-portal-macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mo-portal-mealgrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Customer gate + plan display */
.mo-gate { text-align: center; padding: 48px 24px; }
.mo-gate__icon { font-size: 2.6rem; color: var(--mo-steel, #2B6B57); margin-bottom: 8px; }
.mo-gate-notice { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-radius: 12px; font-weight: 600; margin-bottom: 18px; }
.mo-gate-notice--ok { background: var(--mo-lime-200, #E6FBB4); color: #1F3300; }
.mo-gate-notice--err { background: #FCE8E6; color: #A6231A; }

.mo-plan-days { display: grid; gap: 16px; }
.mo-plan-day { border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 12px; padding: 16px; background: #fff; }
.mo-plan-day__title { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; margin: 0 0 10px; }
.mo-plan-day__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mo-plan-ex { display: flex; gap: 12px; align-items: center; }
.mo-plan-ex__img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.mo-plan-ex__body { display: grid; gap: 1px; font-size: 0.92rem; }
.mo-plan-ex__scheme em { font-style: normal; font-weight: 700; }
.mo-plan-notes { margin-top: 14px; padding: 12px 16px; background: var(--mo-surface-2, #EDEBE8); border-radius: 10px; font-size: 0.92rem; }
.mo-coach-stats--macros .mo-coach-stat__num { font-size: 1.6rem; }
.mo-btn--sm { padding: 0.45em 1em; font-size: 0.82rem; }
.mo-coach-form__msg.is-err { color: #A6231A; }
.mo-profile-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Coaching signup page — self-contained form styles so the page never
   depends on another stylesheet being enqueued. */
.mo-signup { max-width: 860px; margin-inline: auto; padding-top: calc(var(--header-h, 88px) + 16px); padding-bottom: 64px; }
.mo-signup .mo-coach-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 8px; }
.mo-signup .mo-coach-field { display: flex; flex-direction: column; gap: 6px; }
.mo-signup .mo-coach-field > span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mo-text-muted, #5C625C); }
.mo-signup .mo-coach-field input,
.mo-signup .mo-coach-field select,
.mo-signup .mo-coach-field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 12px; font: inherit; background: #fff; }
.mo-signup .mo-coach-field input:focus,
.mo-signup .mo-coach-field select:focus,
.mo-signup .mo-coach-field textarea:focus { outline: none; border-color: var(--mo-lime-600, #A6E22E); box-shadow: 0 0 0 3px rgba(193, 251, 82, .45); }
.mo-signup .mo-coach-field--note,
.mo-signup .mo-coach-field:has(textarea) { grid-column: 1 / -1; }
.mo-signup .mo-coach-form__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 22px; }
.mo-signup .mo-coach-form__msg { margin: 0; font-weight: 600; }
.mo-signup__plan .mo-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.mo-signup__plan .mo-btn--ghost:hover { border-color: var(--mo-lime, #C1FB52); color: var(--mo-lime, #C1FB52); }
.mo-signup .mo-coach-muted { color: var(--mo-text-muted, #5C625C); }
.mo-signup__plan { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: var(--mo-ink, #0E1311); color: var(--mo-text-on-ink, #F4F6F2); border-radius: 16px; padding: 22px 26px; margin-bottom: 26px; }
.mo-signup__plan .mo-eyebrow { color: var(--mo-lime, #C1FB52); }
.mo-signup__plan-name { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; margin: 2px 0 4px; color: #fff; }
.mo-signup__plan-price { margin: 0; font-weight: 700; color: var(--mo-lime, #C1FB52); }
.mo-signup__plan-price span { color: var(--mo-text-on-ink, #F4F6F2); font-weight: 400; font-size: 0.85em; }
.mo-signup__h { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; margin: 26px 0 8px; }
.mo-signup__login a { color: var(--mo-steel, #2B6B57); font-weight: 600; }

/* ---- Clickable items (rows, cards) ------------------------------- */
.mo-clickable { cursor: pointer; transition: background .15s ease, transform .15s ease; }
tr.mo-clickable:hover { background: var(--mo-lime-200, #E6FBB4); }
.mo-ex-card.mo-clickable:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,15,10,.12); }
.mo-plan-ex.mo-clickable:hover { background: var(--mo-surface-2, #EDEBE8); border-radius: 10px; }
.mo-clickable:focus-visible { outline: 3px solid rgba(193,251,82,.75); outline-offset: 2px; }
.mo-clickable__hint { font-size: .8em; color: var(--mo-text-muted, #5C625C); opacity: .55; }
.mo-clickable:hover .mo-clickable__hint { opacity: 1; color: var(--mo-steel, #2B6B57); }
.mo-meal-cell { display: flex; align-items: center; gap: 12px; }
.mo-meal-cell__img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; flex: none; }
.mo-portal-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; font-size: .85rem; }

/* ---- Detail modal ------------------------------------------------ */
body.mo-modal-open { overflow: hidden; }
.mo-modal { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: 20px; }
.mo-modal[hidden] { display: none; }
.mo-modal__backdrop { position: absolute; inset: 0; background: rgba(11,15,10,.62); backdrop-filter: blur(2px); }
.mo-modal__panel {
	position: relative; z-index: 1; width: min(680px, 100%); max-height: 88vh; overflow-y: auto;
	background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 30px 80px rgba(11,15,10,.4);
	animation: mo-modal-in .18s ease-out;
}
@keyframes mo-modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mo-modal__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--mo-surface-2, #EDEBE8); cursor: pointer; font-size: .9rem; }
.mo-modal__x:hover { background: var(--mo-lime, #C1FB52); }
.mo-modal__head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 8px; padding-right: 40px; }
.mo-modal__img { width: 132px; height: 132px; object-fit: cover; border-radius: 14px; flex: none; }
.mo-modal__title { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1; margin: 0 0 8px; }
.mo-modal__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.mo-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--mo-surface-2, #EDEBE8); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mo-chip--lime { background: var(--mo-lime, #C1FB52); color: var(--mo-text-on-lime, #0A0F00); }
.mo-modal__section { margin-top: 22px; }
.mo-modal__section h3 { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; margin: 0 0 10px; }
.mo-modal__section p { margin: 0 0 10px; line-height: 1.6; }
.mo-modal__steps { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; line-height: 1.55; }
.mo-modal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mo-modal__list li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--mo-border, #E4E2DE); }
.mo-modal__list em { font-style: normal; font-weight: 700; white-space: nowrap; }
.mo-modal__macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.mo-modal__macros div { background: var(--mo-surface, #F6F5F4); border-radius: 12px; padding: 12px; text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mo-text-muted, #5C625C); }
.mo-modal__macros span { display: block; font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-size: 1.45rem; font-weight: 800; color: var(--mo-text, #14181A); letter-spacing: 0; text-transform: none; }
.mo-modal__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mo-modal__gallery img { width: 100%; border-radius: 12px; }
.mo-modal__buy { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mo-border, #E4E2DE); }
.mo-modal__price { font-weight: 800; font-size: 1.2rem; }
.mo-modal__loading { text-align: center; padding: 40px 0; color: var(--mo-text-muted, #5C625C); }
.mo-modal__source { margin-top: 18px; font-size: .8rem; color: var(--mo-text-muted, #5C625C); }

/* ---- Customer shell: left sidebar + panels ----------------------- */
.mo-shell { display: grid; grid-template-columns: 232px 1fr; gap: 28px; align-items: start; }
/* --header-h covers row 1 only; the desktop header is two rows (~139px),
   so the sticky offset has to clear both or the card hides behind it. */
.mo-side { position: sticky; top: calc(var(--header-h, 88px) + 16px); display: grid; gap: 14px; }
@media (min-width: 992px) {
	.mo-side { top: calc(var(--header-h, 88px) + 84px); }
}
.mo-side__me { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--mo-ink, #0E1311); color: var(--mo-text-on-ink, #F4F6F2); }
.mo-side__who { display: grid; line-height: 1.25; min-width: 0; }
.mo-side__who strong { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
.mo-side__who span { font-size: .72rem; color: var(--mo-lime, #C1FB52); text-transform: uppercase; letter-spacing: .08em; }
/* .mo-avatar--sm lives with the base .mo-avatar rules further down — declared
   here it lost the cascade to .mo-avatar (equal specificity, defined later)
   and rendered at 116px, squeezing the name column to 76px so every sidebar
   name wrapped mid-word. */
.mo-side__nav { display: grid; gap: 4px; }
.mo-side__link {
	display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 14px; border: 0; border-radius: 11px;
	background: transparent; cursor: pointer; text-align: left; color: inherit;
	font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-weight: 600;
	text-transform: uppercase; letter-spacing: .05em; font-size: 1rem;
}
.mo-side__link i { font-size: 1.05rem; color: var(--mo-text-muted, #5C625C); }
.mo-side__link:hover { background: var(--mo-surface-2, #EDEBE8); }
.mo-side__link.is-active { background: var(--mo-lime, #C1FB52); color: var(--mo-text-on-lime, #0A0F00); }
.mo-side__link.is-active i { color: inherit; }
.mo-side__link span { flex: 1; }

/* The account routes (Orders, Downloads, Addresses, Account details) live in
   the header account dropdown — see header.php + mo_account_extra_links(). */

/* ---- Calendar ----------------------------------------------------- */
.mo-cal { background: #fff; border: 1px solid var(--mo-border, #E4E2DE); border-radius: 16px; padding: 16px; }
.mo-cal__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mo-cal__title { flex: 1; font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; font-size: 1.25rem; }
.mo-cal__nav { width: 34px; height: 34px; border: 1px solid var(--mo-border, #E4E2DE); border-radius: 9px; background: #fff; cursor: pointer; }
.mo-cal__nav:hover { border-color: var(--mo-lime, #C1FB52); background: var(--mo-lime-200, #E6FBB4); }
.mo-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mo-cal__dow { text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mo-text-muted, #5C625C); padding-bottom: 4px; }
.mo-cal__cell {
	position: relative; min-height: 62px; padding: 6px; border: 1px solid var(--mo-border, #E4E2DE);
	border-radius: 10px; background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
	align-items: flex-start; font: inherit; color: inherit;
}
.mo-cal__cell--pad { border: 0; background: transparent; cursor: default; min-height: 0; }
.mo-cal__cell:hover { border-color: var(--mo-lime-600, #A6E22E); }
.mo-cal__cell.is-today { border-color: var(--mo-ink, #0E1311); border-width: 2px; }
.mo-cal__cell.is-sel { background: var(--mo-ink, #0E1311); color: #fff; border-color: var(--mo-ink, #0E1311); }
.mo-cal__cell.has-plan { background: var(--mo-lime-200, #E6FBB4); }
.mo-cal__cell.is-sel.has-plan { background: var(--mo-ink, #0E1311); }
.mo-cal__num { font-weight: 700; font-size: .9rem; }
.mo-cal__dots { display: flex; gap: 3px; }
.mo-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.mo-dot--tr { background: #2B6B57; }
.mo-dot--me { background: #E0872B; }
.mo-dot--su { background: #3B6FD4; }
.mo-cal__kcal { font-size: .62rem; font-weight: 700; letter-spacing: .04em; opacity: .75; margin-top: auto; }
.mo-cal__legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; font-size: .74rem; color: var(--mo-text-muted, #5C625C); }
.mo-cal__legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Day panel ---------------------------------------------------- */
.mo-day { margin-top: 20px; }
.mo-day:not(.is-open) { display: none; }
.mo-day__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.mo-day__title { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 2px 0 0; line-height: 1; }
.mo-day__acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* Standing-plan fallback, shown on a day the coach has not set specifically,
   and the counterpart banner on a day they have. Both exist so the client can
   tell which of the two they are looking at. */
.mo-day__fallback-lead {
	display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px;
	padding: 10px 12px; border-radius: 11px;
	background: var(--mo-surface-2, #EDEBE8); color: var(--mo-text-muted, #5C625C);
	font-size: .9rem;
}
.mo-day__fallback-lead i { margin-top: .15em; }
.mo-day__fallback-lead--set { background: var(--mo-lime-200, #E6FBB4); color: var(--mo-text-on-lime, #0A0F00); }
.mo-day__fallback .mo-day__row { justify-content: space-between; }
.mo-day__fallback .mo-day__name { cursor: default; }

.mo-day__sec { background: #fff; border: 1px solid var(--mo-border, #E4E2DE); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.mo-day__sec h4 { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.mo-day__sess { width: 100%; padding: 9px 12px; border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 10px; margin-bottom: 10px; font: inherit; }
.mo-day__sess-ro { font-weight: 700; margin: 0 0 10px; }
.mo-day__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mo-day__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-radius: 11px; background: var(--mo-surface, #F6F5F4); }
.mo-day__img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none; }
.mo-day__name { flex: 1 1 190px; min-width: 150px; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; padding: 0; color: inherit; }
.mo-day__name:hover { color: var(--mo-steel, #2B6B57); }
.mo-day__name i { opacity: .5; font-size: .82em; }
.mo-day__row input { width: 92px; flex: none; padding: 7px 9px; border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 8px; font: inherit; font-size: .88rem; background: #fff; }
/* The note is free text ("Higher dose for this client") but was pinned to the
   same 92px as "sets" or "kcal" and truncated, while .mo-day__name absorbed
   every spare pixel — 634px to show a title needing ~200. Let the note grow
   instead, at twice the name's rate. data-f is the stable hook: placeholders
   are translated and the row is also built in JS. */
.mo-day__row input[data-f="note"] { width: auto; flex: 2 1 150px; min-width: 130px; }
/* Also free text rather than a number: "post-workout" and "Breakfast" need
   more than the 92px that suits "sets" or "kcal". */
.mo-day__row input[data-f="slot"],
.mo-day__row input[data-f="timing"] { width: 120px; }
.mo-day__row input:focus { outline: none; border-color: var(--mo-lime-600, #A6E22E); box-shadow: 0 0 0 3px rgba(193,251,82,.4); }
.mo-day__x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--mo-text-muted, #5C625C); }
.mo-day__x:hover { background: #A6231A; color: #fff; }
.mo-day__ro { flex: 1 1 100%; font-size: .9rem; color: var(--mo-text-muted, #5C625C); }
/* The meta line wraps onto its own flex row, so it starts at the row's padding
   edge — under the thumbnail rather than under the title it describes. Indent
   it by the thumbnail's footprint (44px + 8px gap). Scoped with :has() because
   the thumbnail is conditional (schedule.php only prints it when set). */
.mo-day__row:has(.mo-day__img) .mo-day__ro { margin-left: 52px; }
.mo-day__sec textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 10px; font: inherit; }

/* ---- Picker popup ------------------------------------------------- */
.mo-picker__tabs { display: flex; gap: 6px; margin: 14px 0 10px; }
.mo-picker__tab { flex: 1; padding: 9px; border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 999px; background: #fff; cursor: pointer; font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mo-picker__tab.is-active { background: var(--mo-ink, #0E1311); color: var(--mo-lime, #C1FB52); border-color: var(--mo-ink, #0E1311); }
.mo-picker__search { width: 100%; padding: 11px 14px; border: 1.5px solid var(--mo-border, #E4E2DE); border-radius: 11px; font: inherit; margin-bottom: 10px; }
.mo-picker__search:focus { outline: none; border-color: var(--mo-lime-600, #A6E22E); box-shadow: 0 0 0 3px rgba(193,251,82,.4); }
.mo-picker__results { max-height: 48vh; overflow-y: auto; display: grid; gap: 6px; }
.mo-picker__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px; border: 0; border-radius: 11px; background: var(--mo-surface, #F6F5F4); cursor: pointer; text-align: left; font: inherit; }
.mo-picker__item:hover { background: var(--mo-lime-200, #E6FBB4); }
.mo-picker__item img, .mo-picker__ph { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: none; background: var(--mo-surface-2, #EDEBE8); }
.mo-picker__meta { flex: 1; display: grid; min-width: 0; }
.mo-picker__meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-picker__meta em { font-style: normal; font-size: .76rem; color: var(--mo-text-muted, #5C625C); text-transform: capitalize; }

/* ---- Customer tabs ----------------------------------------------- */
.mo-ctabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.mo-ctab {
	display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
	border: 1.5px solid var(--mo-border, #E4E2DE); background: #fff; cursor: pointer;
	font-family: var(--font-display, 'Barlow Condensed', sans-serif); font-weight: 600;
	text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; color: inherit;
}
.mo-ctab:hover { border-color: var(--mo-lime, #C1FB52); }
.mo-ctab.is-active { background: var(--mo-ink, #0E1311); color: var(--mo-lime, #C1FB52); border-color: var(--mo-ink, #0E1311); }
.mo-ctab__soon { width: 7px; height: 7px; border-radius: 50%; background: #E0B341; }
.mo-cpanel { display: none; }
.mo-cpanel.is-active { display: block; }

/* ---- Profile photos ---------------------------------------------- */
.mo-photos { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; margin-bottom: 26px; }
.mo-photos__avatar { display: grid; gap: 10px; justify-items: center; }
.mo-avatar { width: 116px; height: 116px; border-radius: 50%; overflow: hidden; background: var(--mo-surface-2, #EDEBE8); display: grid; place-items: center; }
.mo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mo-avatar--empty { font-size: 2.6rem; color: var(--mo-text-muted, #5C625C); }
/* Modifiers must follow the base rule — same specificity, so source order
   decides. The placeholder icon is sized here too, otherwise --empty above
   would push a 2.6rem glyph into the 46px circle. */
.mo-avatar--sm { width: 46px; height: 46px; flex: none; }
.mo-avatar--sm.mo-avatar--empty { font-size: 1.3rem; }
.mo-photos__pick { cursor: pointer; }
.mo-photos__h { font-family: var(--font-display, 'Barlow Condensed', sans-serif); text-transform: uppercase; margin: 0; }
.mo-photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 12px; }
.mo-photo { position: relative; margin: 0; }
.mo-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; display: block; }
.mo-photo figcaption { font-size: .72rem; color: var(--mo-text-muted, #5C625C); text-align: center; margin-top: 5px; }
.mo-photo__x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(11,15,10,.72); color: #fff; cursor: pointer; line-height: 1; font-size: 1rem; }
.mo-photo__x:hover { background: #A6231A; }

@media (max-width: 640px) {
	.mo-portal-head { flex-direction: column; align-items: stretch; }
	.mo-ed-ex input { width: 60px; }
	.mo-modal__panel { padding: 20px; }
	.mo-modal__head { flex-direction: column; }
	.mo-modal__img { width: 100%; height: 190px; }
	.mo-photos { grid-template-columns: 1fr; justify-items: center; }
	.mo-photos__progress { width: 100%; }
	.mo-ctabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
	.mo-ctab { flex: none; }
	.mo-day__row input { width: calc(50% - 6px); }
	.mo-picker__tabs { flex-wrap: wrap; }
}
@media (max-width: 900px) {
	/* Sidebar becomes a horizontal scroller above the content. */
	.mo-shell { grid-template-columns: 1fr; gap: 18px; }
	.mo-side { position: static; }

	/* Section nav becomes a floating bottom bar — these sections are the app's
	   primary navigation, and the old horizontal scroller kept half of them
	   off the edge. Fixed, so it stays reachable however far down you are. */
	.mo-side__nav {
		position: fixed;
		left: 50%;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		transform: translateX(-50%);
		z-index: 60;
		display: flex;
		grid-auto-flow: initial;
		overflow: visible;
		width: max-content;
		max-width: calc(100vw - 24px);
		gap: 2px;
		padding: 8px;
		background: var(--mo-ink, #0E1311);
		border-radius: 999px;
		box-shadow: 0 12px 30px rgba(11, 15, 10, .3);
	}
	/* Icons only — six labels will not fit across a phone, and each button
	   keeps its label as its accessible name. */
	.mo-side__link {
		position: relative;
		width: 46px; height: 46px; flex: none;
		padding: 0; gap: 0;
		border: 0; border-radius: 50%;
		justify-content: center;
		background: transparent;
		color: var(--mo-text-on-ink, #F4F6F2);
	}
	/* Visually hidden, not display:none — the label IS the button's accessible
	   name, and removing it from the tree would leave screen readers with an
	   unlabelled icon. */
	.mo-side__link span {
		position: absolute; width: 1px; height: 1px;
		margin: -1px; padding: 0; overflow: hidden;
		clip-path: inset(50%); white-space: nowrap; border: 0;
	}
	.mo-side__link i { font-size: 1.2rem; color: inherit; }
	.mo-side__link:hover { background: rgba(255, 255, 255, .12); }
	.mo-side__link.is-active { background: var(--mo-lime, #C1FB52); color: var(--mo-text-on-lime, #0A0F00); }
	/* The "not set by your coach yet" dot, repositioned for a round button. */
	.mo-side__link .mo-ctab__soon { position: absolute; top: 7px; right: 9px; margin: 0; }

	/* Clearance so the fixed bar never sits on top of the last row of content
	   (bar is 62px tall + 12px offset). */
	.woocommerce-account .mo-shell { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
	.mo-cal__cell { min-height: 52px; }
	.mo-cal__kcal { display: none; }
}

/* ---- Phones ------------------------------------------------------- */
@media (max-width: 560px) {
	/* Seven columns in ~340px: trim the chrome so the cells keep a usable
	   tap area instead of the calendar dictating the page width. */
	.mo-cal { padding: 10px; border-radius: 14px; }
	.mo-cal__grid { gap: 4px; }
	.mo-cal__cell { min-height: 44px; padding: 4px 2px; align-items: center; border-radius: 8px; }
	.mo-cal__num { font-size: .82rem; }
	.mo-cal__dots { gap: 2px; }
	/* .6rem was 9.6px — too small to read at a glance. .7rem fits a 37px
	   column once the tracking comes off. */
	.mo-cal__dow { font-size: .7rem; letter-spacing: 0; }
	.mo-cal__bar { flex-wrap: wrap; }
	.mo-cal__title { flex: 1 1 100%; order: -1; }

	/* Editing a day one thumb at a time: each control gets its own line
	   rather than four 92px boxes competing for 340px. The desktop rules for
	   note/slot/timing are more specific, so they are restated here. */
	.mo-day__row { gap: 6px; }
	.mo-day__row input,
	.mo-day__row input[data-f="note"],
	.mo-day__row input[data-f="slot"],
	.mo-day__row input[data-f="timing"] { width: 100%; flex: 1 1 100%; min-width: 0; }
	/* Short numeric fields pair up two-per-row — one line each turned a single
	   meal into five rows of scrolling. Free text keeps the full width. */
	.mo-day__row input[data-f="qty"],
	.mo-day__row input[data-f="unit"],
	.mo-day__row input[data-f="kcal"],
	.mo-day__row input[data-f="dose"],
	.mo-day__row input[data-f="sets"],
	.mo-day__row input[data-f="reps"],
	.mo-day__row input[data-f="rest"] { width: auto; flex: 1 1 calc(50% - 3px); }
	.mo-day__name { flex: 1 1 calc(100% - 92px); }
	/* The meta line's 52px thumbnail indent is desktop-only — at this width it
	   just steals space from the text. */
	.mo-day__row:has(.mo-day__img) .mo-day__ro { margin-left: 0; }

	/* Comfortable tap targets (44px) for the small icon buttons. */
	.mo-cal__nav { width: 44px; height: 44px; }
	.mo-day__x { width: 40px; height: 40px; }
	.mo-ed-x { min-width: 40px; min-height: 40px; font-size: 1.4rem; }
	.mo-day__name { min-height: 40px; padding: 6px 0; }
	/* Plan-editor controls were 35px — under a thumb's comfortable minimum. */
	.mo-ed-row select,
	.mo-ed-row input,
	.mo-ed-ex input { min-height: 44px; }
	.mo-ed-row, .mo-ed-ex { gap: 6px; }
	.mo-portal-back { padding: 8px 0; display: inline-flex; align-items: center; }

	/* Tables scroll rather than force the page wide. */
	.mo-coach-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	.mo-portal-add .mo-coach-form { padding: 12px; }

	/* Search + filter stack; match the input's height so the pair reads as one
	   control rather than a 48px box above a 43px one. */
	.mo-portal-search { flex-direction: column; align-items: stretch; }
	.mo-portal-search select,
	.mo-portal-search input { width: 100%; min-height: 48px; }

	/* Breathing room at the end of a long editing session. (This used to be
	   76px of clearance for the floating WhatsApp button, which is no longer
	   rendered on portal screens — see inc/whatsapp.php.)
	   .mo-shell is deliberately not listed: it needs the taller bottom-bar
	   clearance set in the 900px block, and this rule would override it. */
	.mo-portal { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.mo-modal__panel { animation: none; }
	.mo-clickable { transition: none; }
}