/* MemberPress — theme-owned brand styling (ReadyLaunch stays off).
   Covers signup, login, and account so the membership UI matches the site. */

.mp_wrapper {
	max-width: 520px;
	margin: 24px auto;
	text-align: left;
}

/* Signup + login form cards */
.mp_wrapper .mepr-signup-form,
.mp_wrapper .mepr-login-form,
.mp_wrapper form.mepr-form {
	max-width: 480px;
	margin: 0 auto;
	padding: 28px;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--primary ) 25%, transparent );
	border-radius: 2px;
	background: color-mix( in srgb, #ffffff 45%, var( --wp--preset--color--background ) );
}

.mp_wrapper .mp-form-row {
	margin: 0 0 16px;
}
.mp_wrapper label {
	display: block;
	font-size: 15px;
	color: var( --wp--preset--color--muted );
	margin-bottom: 8px;
}
.mp_wrapper input[type="email"],
.mp_wrapper input[type="text"],
.mp_wrapper input[type="password"] {
	font: inherit;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--primary ) 35%, transparent );
	border-radius: 2px;
	background: transparent;
	color: var( --wp--preset--color--foreground );
}
.mp_wrapper input::placeholder {
	color: color-mix( in srgb, var( --wp--preset--color--muted ) 70%, transparent );
}

.mp_wrapper .mepr_price_cell_label,
.mp_wrapper .mepr_price_cell {
	display: inline;
	font-size: 13px;
	color: var( --wp--preset--color--muted );
}

.mp_wrapper .mepr-submit,
.mp_wrapper input[type="submit"],
.mp_wrapper button[type="submit"] {
	font: inherit;
	width: 100%;
	cursor: pointer;
	margin-top: 6px;
	padding: 12px 18px;
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: 2px;
	background: transparent;
	color: var( --wp--preset--color--primary );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: all 0.2s ease-out;
}
.mp_wrapper .mepr-submit:hover,
.mp_wrapper input[type="submit"]:hover,
.mp_wrapper button[type="submit"]:hover {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--background );
}

/* Keep MemberPress's screen-reader/honeypot labels out of layout. MP's own
   ui/theme.css sets `.mp_wrapper label { width: 100% !important }`, which
   out-specifies a bare class — without this, the absolute-positioned "No val"
   label spans the content width and forces a horizontal scrollbar. */
.mepr-visuallyhidden,
.mp_wrapper label.mepr-visuallyhidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	border: 0 !important;
	white-space: nowrap !important;
}
/* NOT `!important`, and that matters more than it looks.
   MemberPress reveals things by calling jQuery `.show()`, which writes an
   inline `display` — that beats a normal rule and loses to an important one.
   This rule carried `!important` from Phase 5, inherited from the
   `.mepr-visuallyhidden` block above it where the flags ARE required (MP's own
   ui/theme.css sets `.mp_wrapper label { width: 100% !important }`). Here it
   was collateral, and it silently disabled every reveal on the checkout —
   most visibly "Have a coupon?", which hid the link and then could not show
   the field, leaving no way to enter a coupon code at all.
   MemberPress's signup.css already declares this without the flag; ours is
   kept only as a fallback for pages that load our CSS without theirs. Nothing
   in this file sets `display` on `.mp-form-row`, so the plain rule is enough. */
.mepr-hidden {
	display: none;
}

/* Signed-out account page: make "Login" the action it actually is.
   Owner, 2026-08-18.

   MemberPress renders the whole signed-out state as one sentence and a bare
   underlined link — `.mepr-login-form-wrap > .mepr-login-link > a`. On a page
   whose entire purpose, when you are signed out, is to get you signed in, the
   only thing to do was styled as an afterthought.

   Borrowed from `.mepr-submit` above rather than restyled from scratch, so it
   is the same button as every other primary action on the site: outlined
   sienna, uppercase, inverting on hover. `inline-block` with `auto` margins
   centres it — the link ships inline with no box of its own, the same reason
   "Have a coupon?" needed fixing.

   Deliberately NOT full-width like `.mepr-submit`: that button sits inside a
   form and spans its field column, while this one stands alone on an otherwise
   empty page, where edge-to-edge would read as a banner rather than a control. */
/* `display: block` is doing the work here, not `text-align`. MemberPress emits
   `.mepr-login-link` as a SPAN, and text-align on an inline element centres
   nothing — it has no line box of its own to centre within, so the button sat
   wherever the text flow left it, which was hard against the left margin. */
.mp_wrapper .mepr-login-link {
	display: block;
	margin-top: 28px;
	text-align: center;
}
.mp_wrapper .mepr-login-link a {
	display: inline-block;
	padding: 12px 32px;
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: 2px;
	background: transparent;
	color: var( --wp--preset--color--primary );
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: all 0.2s ease-out;
}
.mp_wrapper .mepr-login-link a:hover,
.mp_wrapper .mepr-login-link a:focus-visible {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--background );
}

/* The sentence above it is the page's only other content when signed out, so
   it carries the centring too — a centred button under a left-aligned line
   looks like a mistake rather than a composition.

   Only `.mepr-unauthorized-message`: a `.mepr-login-form-wrap > p` was in this
   rule until the DOM was actually read, and it matched nothing. That wrapper
   holds the login span alone; the sentence sits outside it. */
.mp_wrapper .mepr-unauthorized-message {
	text-align: center;
}

/* Account page.
   The `page-account` template gives this page its own 680px column so the
   title, materials, and membership UI all share one width — MP's wrapper and
   form cards fill it rather than sitting in a narrower box inside a wide one. */
.account-area .mp_wrapper {
	max-width: 100%;
	margin-top: 44px;
}
.account-area .mp_wrapper .mepr-signup-form,
.account-area .mp_wrapper .mepr-login-form,
.account-area .mp_wrapper form.mepr-form {
	max-width: 100%;
	padding: 32px;
}

/* MemberPress renders the account tabs as `<nav id="mepr-account-nav">` — an
   ID, not a class. Styling the class silently did nothing. */
#mepr-account-nav {
	margin: 0 0 28px;
	/* Tab links carry #mepr-account-nav (see functions.php) so a tab switch
	   lands on the tab bar rather than the top of the page. Without this the
	   nav would sit flush against the viewport edge on arrival. */
	scroll-margin-top: 32px;
}
#mepr-account-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 0 0 14px;
	margin: 0;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--primary ) 20%, transparent );
}
#mepr-account-nav li {
	margin: 0;
}
/* The tabs are the site's only small uppercase label that wasn't following the
   scale everything else uses — .eyebrow and .course-materials__grouplabel are
   11-12px with wider tracking, these were 13px with 0.08em. Down to 11px and
   out to 0.16em brings them into line; at this size the extra tracking is what
   keeps uppercase legible rather than cramped. */
#mepr-account-nav a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 11px;
	font-weight: 500;
}
#mepr-account-nav .mepr-active-nav-tab a {
	color: var( --wp--preset--color--foreground );
	font-weight: 600;
}
.mp_wrapper table {
	width: 100%;
	border-collapse: collapse;
}
.mp_wrapper th,
.mp_wrapper td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--primary ) 15%, transparent );
}

/* Immediate-delivery consent (mu-plugins/2l2h-checkout-consent.php).
   A required checkbox on paid checkouts; the EU/UK cancellation right is only
   waived if the buyer positively ticks it, so it has to be legible rather than
   tucked away.

   The row carries none of MemberPress's own classes on purpose. Its theme.css
   has `.mp_wrapper .mp-form-row label { display:inline !important }`, which no
   specificity can beat — reusing `mp-form-row` here made the sentence wrap
   under the checkbox. Not matching that selector is cleaner than out-shouting
   it, so the markup and these rules share a private `l2h-consent-*` namespace.

   box-sizing is explicit because the form's rows are content-box: without it
   the 16px side padding pushes the row 32px wider than the form's content area
   and it spills past the card's right edge. */
.mp_wrapper .l2h-consent-row {
	box-sizing: border-box;
	width: 100%;
	margin: 20px 0;
	padding: 14px 16px;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--primary ) 20%, transparent );
	border-radius: 2px;
	background: color-mix( in srgb, var( --wp--preset--color--primary ) 4%, transparent );
}
.mp_wrapper .l2h-consent-row .l2h-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var( --wp--preset--color--foreground );
	cursor: pointer;
}
.mp_wrapper .l2h-consent-row input[type="checkbox"] {
	flex: 0 0 auto;
	/* All four sides set explicitly. The browser default is roughly
	   `3px 3px 3px 4px`, and that stray 3px on the right lands on top of the
	   flex gap — which put the note 3px out of line with the sentence above it.
	   Pinning it makes the indent below arithmetic: 16px box + 10px gap. */
	margin: 3px 0 0 0;
	width: 16px;
	height: 16px;
	accent-color: var( --wp--preset--color--primary );
	cursor: pointer;
}
.mp_wrapper .l2h-consent-row .l2h-consent-note {
	margin: 8px 0 0 26px;
	font-size: 13px;
	line-height: 1.5;
	color: var( --wp--preset--color--muted );
}

/* Subscription ids and price terms arrive italic from MemberPress's own CSS.
   An italic serif on a machine-readable id like `mp-txn-6a62aa120c7fe` is close
   to the least legible pairing available, and italics read as emphasis — put on
   the two least important things in the row. Set upright and muted so the
   membership name carries the row. */
.mp_wrapper .mepr-account-subscr-id,
.mp_wrapper .mepr-account-terms {
	font-style: normal;
	font-size: 12px;
	color: var( --wp--preset--color--muted );
}

/* Alerts.

   MemberPress hardcodes its own, from no palette on this site and all with
   !important: errors are #feb9bb behind a #d40022 border, success is #def4c5
   behind #4d8c2e, and an invalid field gets `border: 2px solid red` with a
   **#ff6666 background** — a lurid fill behind the very text someone is trying
   to read while correcting it.

   Replaced with two colours the site already owns. Errors use the new `alert`
   token (#7A2318): deliberately deeper and more saturated than sienna, because
   sienna is what links and buttons are made of and an error must not look like
   something to click. Success uses Sage, which was sitting in the palette
   unused and is, conveniently, a green.

   Every rule needs a two-class selector to out-specify MemberPress's
   single-class !important. `.mepr_error` always renders inside `.mp_wrapper`
   (verified), so that is the hook. */
.mp_wrapper .mepr_error,
.mp_wrapper .mepr_updated {
	box-sizing: border-box;
	padding: 14px 16px !important;
	margin-bottom: 20px !important;
	border-radius: 2px;
	font-size: 15px;
	line-height: 1.5;
}
.mp_wrapper .mepr_error {
	background-color: color-mix( in srgb, var( --wp--preset--color--alert ) 8%, var( --wp--preset--color--background ) ) !important;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--alert ) 35%, transparent ) !important;
	color: var( --wp--preset--color--alert );
}
.mp_wrapper .mepr_error li,
.mp_wrapper .mepr_error p {
	color: var( --wp--preset--color--alert );
}
.mp_wrapper .mepr_updated {
	background-color: color-mix( in srgb, var( --wp--preset--color--secondary ) 12%, var( --wp--preset--color--background ) ) !important;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--secondary ) 45%, transparent ) !important;
	color: color-mix( in srgb, var( --wp--preset--color--secondary ) 72%, var( --wp--preset--color--foreground ) );
}

/* Invalid fields: mark the boundary, never fill the box. The point of the
   state is to help someone fix what they typed, which means what they typed
   has to stay readable. A 1px border plus a 5% wash reads clearly against the
   form's transparent inputs without touching legibility. */
.mp_wrapper .mepr-form input.invalid,
.mp_wrapper .mepr-form select.invalid,
.mp_wrapper .mepr-form textarea.invalid,
.mp_wrapper .mepr-form label.mepr-checkbox-field.invalid,
.mp_wrapper .mepr-form div.mepr-checkboxes-field.invalid,
.mp_wrapper .mepr-form div.mepr-radios-field.invalid {
	border: 1px solid var( --wp--preset--color--alert ) !important;
	background-color: color-mix( in srgb, var( --wp--preset--color--alert ) 5%, transparent ) !important;
}
.mp_wrapper .mepr-form .mepr-coupon-code.valid {
	border: 1px solid var( --wp--preset--color--secondary ) !important;
	background-color: color-mix( in srgb, var( --wp--preset--color--secondary ) 8%, transparent ) !important;
}
/* MemberPress injects the literal words "Validation failed" / "passed" through
   ::after in raw red and green. Left in place, recoloured. */
.mp_wrapper .validation.failed::after {
	color: var( --wp--preset--color--alert );
}
.mp_wrapper .validation.passed::after {
	color: var( --wp--preset--color--secondary );
}

/* The INLINE messages, which the block rules above never reached: "Invalid
   Coupon" beside the coupon label, "Please fix the errors above" under the
   submit button, and per-field validation text. signup.css gives all three
   `color: #d4151e` — a pillarbox red that belongs to no palette on this site
   and reads as a browser error next to Lora and sienna. Its partner
   `.cc-success` is #14c146, a highlighter green with the same problem.

   Recoloured to the same two tokens the blocks use, so every failure state on
   the site is one colour and every success another, whether it arrives as a
   banner or as three words beside a field.

   NOTE: colour ONLY, and no `!important`. These elements start life
   `display: none` and are revealed by jQuery `.show()`, which writes an inline
   style — an `!important` display here would freeze them hidden, which is
   exactly the bug that made the coupon field unreachable (see the note on
   `.mepr-hidden` above). MemberPress's own rules are single-!important-free
   two-class selectors, and ours load afterwards, so matching specificity is
   enough to win. */
.mp_wrapper .mepr-form-has-errors,
.mp_wrapper .cc-error,
.mp_wrapper .mepr-validation-error {
	color: var( --wp--preset--color--alert );
}
.mp_wrapper .cc-success {
	color: var( --wp--preset--color--secondary );
}

/* MemberPress's own price row is hidden and re-rendered above the button by
   l2h_checkout_price() — see functions.php for why. */
.mp_wrapper .mp-form-row.mepr_price {
	display: none;
}
.mp_wrapper .l2h-checkout-price {
	margin: 4px 0 18px;
	text-align: center;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 24px;
	line-height: 1;
	color: var( --wp--preset--color--foreground );
}

/* "Have a coupon?" — findable, deliberately not promoted.
   Owner + Sam, 2026-08-17: it was getting lost on the buy page.

   The cause is structural, not a matter of size. MemberPress emits this as a
   BARE INLINE <a> dropped straight into the form — no `.mp-form-row` wrapper
   like every other control has, so `display: inline` gave it no box, no
   margins, and nothing to separate it from the email field above or the card
   logos immediately below. It read as a caption belonging to the email input.
   Dropping it to 13px small-print, as this rule previously did, made that
   worse: it was already lost, and the fix it needed was air, not less weight.

   So: give it a box of its own and real space, put it back at a legible size,
   and add a chevron so it reads as something that opens rather than a footnote.
   It stays in the muted ink and stays underlined — no button, no border, no
   accent colour — because the aim is that someone with a code can find it, not
   that everyone paying full price is invited to go looking for one.

   The chevron is a rotated border box rather than a glyph, so it needs no font
   support. `inline-block` also keeps the link's underline from being drawn
   through it — underlines skip inline-block descendants. */
.mp_wrapper .have-coupon-link {
	display: inline-block;
	margin: 10px 0 32px;
	font-size: 15px;
	color: var( --wp--preset--color--muted );
	text-underline-offset: 4px;
}
.mp_wrapper .have-coupon-link::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}
.mp_wrapper .have-coupon-link:hover {
	color: var( --wp--preset--color--primary );
}

/* Once it IS open, the field needs the same separation the link was given —
   otherwise revealing it drops an unspaced input on top of the payment block.
   Scoped to the checkout's own coupon row so the account page is untouched. */
.mp_wrapper .mp-form-row.mepr_coupon {
	margin-bottom: 30px;
}

/* Account tables: drop two columns that can never hold anything here.
   Everything on this site is a one-time purchase, so there is no card on file
   and nothing to cancel, renew or upgrade — "Card Exp." and "Actions" were two
   empty columns squeezing the four that carry information.

   Scoped to the subscriptions table by ID. The payments table alongside it also
   has six columns, and a positional rule would have hidden its Status and
   Receipt instead. The `td`s are matched on their own data-label rather than
   position, so only the headers depend on column order. */
#mepr-account-subscriptions-table th:nth-child(5),
#mepr-account-subscriptions-table th:nth-child(6),
#mepr-account-subscriptions-table td[data-label="Card Expires"],
#mepr-account-subscriptions-table td[data-label="Actions"] {
	display: none;
}

/* The account page runs at the site's 17px body size, which is set for reading
   long-form course prose at 1.85 line-height. A dense table of dates and
   amounts is the opposite kind of text and reads as oversized at that size.
   Scoped to `.account-area` deliberately — dropping the global body size would
   change the course reading experience, which BRAND.md calls the signature of
   the whole system. */
.account-area .mp_wrapper,
.account-area .mp_wrapper th,
.account-area .mp_wrapper td,
.account-area .mp_wrapper p {
	font-size: 15px;
}
.account-area .mp_wrapper .mepr-account-subscr-id,
.account-area .mp_wrapper .mepr-account-terms {
	font-size: 12px;
}

/* The Payments table carried both an "Invoice" column showing the raw
   transaction number and a "Receipt" column linking the PDF — two columns for
   one idea, and the transaction number means nothing to a customer. The number
   is still on the receipt itself for anyone who needs to quote it. */
#mepr-account-payments-table th:nth-child(6),
#mepr-account-payments-table td[data-label="Invoice"] {
	display: none;
}