/* Account pages (T8; boards X-subscribe, X-checkout, X-login, X-thankyou; decision 32).
   Loaded only on subscribe, checkout, login, account and thank-you. The theme's own parts use
   .tom-acct-*; everything under .tom-acct-mepr is MemberPress's markup, restyled with tokens. */

/* ---------- page frame ---------- */
.tom-acct-shell { max-width: 560px; display: flex; flex-direction: column; gap: 18px; padding-top: 20px; padding-bottom: 48px; }
.tom-acct-head { display: flex; flex-direction: column; gap: 8px; }
.tom-acct-head--center { align-items: center; text-align: center; }
.tom-acct-title { margin: 0; font: 800 34px/36px var(--font-display); text-wrap: balance; }
.tom-acct-lede { margin: 0; font: 500 16px/23px var(--font-sans); color: var(--ink-muted); }
.tom-acct-h2 { margin: 0 0 10px; font: 800 22px/26px var(--font-display); }
.tom-acct-fine { margin: 0; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.tom-acct-fine a, .tom-acct-lede a { color: var(--accent-strong); }
.tom-acct-back { font: 600 14px/18px var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.tom-acct-cols { display: flex; flex-direction: column; gap: 22px; }
.tom-acct-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tom-acct-cta { justify-content: center; height: 50px; font-size: 17px; }
.tom-acct-actions { display: flex; flex-direction: column; gap: 10px; }
.tom-acct-actions .tom-btn { justify-content: center; height: 48px; }
.tom-acct-check { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); }

/* ---------- plans (subscribe) ---------- */
.tom-acct-plans { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.tom-acct-plan { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.tom-acct-plan input { position: absolute; opacity: 0; pointer-events: none; }
.tom-acct-plan__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--hairline); display: grid; place-items: center; }
.tom-acct-plan:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tom-acct-plan input:checked + .tom-acct-plan__radio { border-color: var(--ink); }
.tom-acct-plan input:checked + .tom-acct-plan__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.tom-acct-plan input:focus-visible + .tom-acct-plan__radio { outline: 2px solid var(--accent); outline-offset: 2px; }
.tom-acct-plan__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tom-acct-plan__name { display: flex; align-items: center; gap: 8px; font: 800 20px/22px var(--font-display); }
.tom-acct-plan__note { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.tom-acct-plan__price { display: flex; flex-direction: column; align-items: flex-end; }
.tom-acct-plan__amount { font: 800 24px/26px var(--font-display); font-variant-numeric: tabular-nums; }
.tom-acct-plan__per { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.tom-acct-gets { padding: 18px; }
.tom-acct-gets ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tom-acct-gets li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: var(--accent-strong); }
.tom-acct-gets li > span { display: flex; flex-direction: column; gap: 2px; color: var(--ink); font: 500 14px/19px var(--font-sans); }
.tom-acct-gets li b { font: 700 15px/19px var(--font-sans); }
.tom-acct-gets li > span > span { color: var(--ink-muted); }
.tom-acct-mission p { margin: 0 0 10px; font: 400 16px/25px var(--font-sans); }
.tom-acct-faq details { border-top: 1px solid var(--hairline); padding: 12px 0; }
.tom-acct-faq details:last-of-type { border-bottom: 1px solid var(--hairline); }
.tom-acct-faq summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font: 700 16px/22px var(--font-sans); list-style: none; }
.tom-acct-faq summary::-webkit-details-marker { display: none; }
.tom-acct-faq summary::after { content: "+"; color: var(--ink-muted); font-weight: 600; }
.tom-acct-faq details[open] summary::after { content: "\2212"; }
.tom-acct-faq details p { margin: 8px 0 0; font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }
.tom-acct-faq details a { color: var(--accent-strong); font-weight: 700; }

/* ---------- summary card (checkout, thank-you) ---------- */
.tom-acct-summary { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tom-acct-summary__row { display: flex; justify-content: space-between; gap: 12px; font: 600 15px/20px var(--font-sans); }
.tom-acct-summary__plan { font: 800 19px/22px var(--font-display); }
.tom-acct-summary__note { margin: 0; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.tom-acct-summary__switch { font: 700 14px/18px var(--font-sans); color: var(--accent-strong); text-decoration: none; }
.tom-acct-stripe { margin: 0; display: flex; gap: 6px; align-items: center; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.tom-acct-start { display: flex; flex-direction: column; gap: 8px; }
.tom-acct-link { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; color: var(--ink); text-decoration: none; font: 700 16px/20px var(--font-sans); }
.tom-acct-link span { color: var(--ink-muted); font-size: 22px; }
.tom-acct-card { padding: 18px; }

/* ---------- MemberPress markup ---------- */
.tom-acct-mepr .mp_wrapper { max-width: none; }
.tom-acct-mepr .mepr-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.tom-acct-mepr .mp-form-row { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tom-acct-mepr .mp-form-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tom-acct-mepr .mp-form-label label, .tom-acct-mepr label { font: 600 14px/18px var(--font-sans); color: var(--ink); }
.tom-acct-mepr .cc-error, .tom-acct-mepr .mepr-form-has-errors { color: var(--danger, #b42318); font: 600 12px/16px var(--font-sans); }
.tom-acct-mepr .cc-success { color: var(--accent-strong); font: 600 12px/16px var(--font-sans); }
.tom-acct-mepr input.mepr-form-input, .tom-acct-mepr select.mepr-form-input, .tom-acct-mepr .mepr-form-input[type="text"], .tom-acct-mepr .mepr-form-input[type="email"], .tom-acct-mepr .mepr-form-input[type="password"],
.tom-acct-mepr #mepr_loginform input[type="text"], .tom-acct-mepr #mepr_loginform input[type="password"] {
	width: 100%; height: 48px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 500 16px/1 var(--font-sans);
}
.tom-acct-mepr .mepr-form-input:focus, .tom-acct-mepr input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.tom-acct-mepr .mp-hide-pw { position: relative; }
.tom-acct-mepr .mp-hide-pw button.mp-hide-pw { position: absolute; right: 6px; top: 6px; height: 36px; width: 36px; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; }
.tom-acct-mepr .mepr_first_name, .tom-acct-mepr .mepr_last_name { flex: 1 1 0; }
.tom-acct-mepr .mepr_price, .tom-acct-mepr .mepr_price_cell_label { font: 600 14px/18px var(--font-sans); }
.tom-acct-mepr .have-coupon-link { align-self: flex-start; font: 700 14px/18px var(--font-sans); color: var(--accent-strong); text-decoration: none; }
.tom-acct-mepr .have-coupon-link::before { content: "Code · "; color: var(--ink-muted); font-weight: 600; }
/* price table (single page checkout invoice) */
.tom-acct-mepr .mepr-transaction-invoice, .tom-acct-mepr .mepr_spc_invoice, .tom-acct-mepr .mp_invoice { margin: 0; }
.tom-acct-mepr table { width: 100%; border-collapse: collapse; font: 500 14px/20px var(--font-sans); }
.tom-acct-mepr table th, .tom-acct-mepr table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hairline); }
.tom-acct-mepr table thead th { font: 600 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tom-acct-mepr table tfoot th { font: 800 16px/20px var(--font-display); border-bottom: 0; }
.tom-acct-mepr .mp-currency-cell { text-align: right; font-variant-numeric: tabular-nums; }
/* payment */
.tom-acct-mepr fieldset.mepr-payment-methods-wrapper { margin: 0; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.tom-acct-mepr .mepr-payment-methods-icons img { height: 24px; width: auto; }
.tom-acct-mepr .mepr-stripe-card-element { padding: 4px 0; }
.tom-acct-mepr .mepr-stripe-card-errors { color: var(--danger, #b42318); font: 600 13px/18px var(--font-sans); }
.tom-acct-mepr .mepr_tos label, .tom-acct-mepr .mepr-checkbox-field { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/20px var(--font-sans); }
.tom-acct-mepr .mepr_tos a { color: var(--accent-strong); }
.tom-acct-mepr input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.tom-acct-mepr .mepr_spacer { display: none; }
.tom-acct-mepr .mp-form-submit { display: flex; flex-direction: column; gap: 8px; }
.tom-acct-mepr input.mepr-submit, .tom-acct-mepr #mepr_loginform input[type="submit"], .tom-acct-mepr .mepr-share-button, .tom-acct-mepr button.mepr-submit {
	width: 100%; height: 50px; border: 0; border-radius: var(--radius-md); background: var(--gold); color: var(--on-gold); font: 800 17px/1 var(--font-sans); cursor: pointer;
}
.tom-acct--login .tom-acct-mepr #mepr_loginform input[type="submit"], .tom-acct--account .tom-acct-mepr input.mepr-submit { background: var(--accent-strong); color: #fff; }
.tom-acct-mepr .mepr-loading-gif { align-self: center; }
/* login form */
.tom-acct-mepr #mepr_loginform { display: flex; flex-direction: column; gap: 14px; }
.tom-acct-mepr #mepr_loginform .mp-form-row { gap: 6px; }
.tom-acct-mepr .mepr-login-actions { display: flex; justify-content: space-between; margin-top: 10px; font: 600 14px/18px var(--font-sans); }
.tom-acct-mepr .mepr-login-actions a { color: var(--accent-strong); text-decoration: none; }
.tom-acct-mepr .mepr-remember-me { flex-direction: row; align-items: center; gap: 8px; }
/* account */
.tom-acct-account #mepr-account-nav ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tom-acct-account #mepr-account-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font: 700 14px/1 var(--font-sans); text-decoration: none; }
.tom-acct-account #mepr-account-nav .mepr-active-nav-tab a { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tom-acct-account #mepr-account-welcome-message { display: none; }
.tom-acct-account .mepr-account-form { max-width: 560px; }
.tom-acct-account .mepr-account-table, .tom-acct-account #mepr-account-subs-table, .tom-acct-account #mepr-account-payments-table { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.tom-acct-account .mepr-account-subscr-id, .tom-acct-account .mepr-account-rebill { color: var(--ink-muted); font-size: 13px; }
.tom-acct-account .mepr-account-actions a, .tom-acct-account .mepr-account-row-actions a { color: var(--accent-strong); font-weight: 700; }
.tom-acct-account .mepr-account-change-password { margin-top: 12px; }
.tom-acct-account .mepr-account-change-password a { color: var(--accent-strong); font-weight: 700; }
.tom-acct-mepr .mepr-table-wrap, .tom-acct-account .mp_wrapper { overflow-x: auto; }

@media (min-width: 1024px) {
	.tom-acct-shell { padding-top: 32px; padding-bottom: 64px; gap: 24px; }
	.tom-acct-shell--wide { max-width: 1040px; }
	.tom-acct-title { font-size: 48px; line-height: 48px; }
	.tom-acct-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
	.tom-acct-cols--checkout { grid-template-columns: 360px minmax(0, 1fr); }
	.tom-acct-summarycol { position: sticky; top: 16px; }
	.tom-acct-actions { flex-direction: row; }
	.tom-acct-mepr .mepr-signup-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 14px; }
	.tom-acct-mepr .mepr-signup-form > * { grid-column: 1 / -1; }
	.tom-acct-mepr .mepr-signup-form > .mepr_first_name { grid-column: 1; }
	.tom-acct-mepr .mepr-signup-form > .mepr_last_name { grid-column: 2; }
}

/* MemberPress hides rows with .mepr-hidden (the code field until "Add a code") and shows them with an inline style. */
.tom-acct-mepr .mp-form-row.mepr-hidden, .tom-acct-mepr .mepr-hidden { display: none; }   /* no !important: MemberPress reveals rows with an inline style (jQuery .show()) */
/* The login form nests the password input inside .mp-form-label: stack it like the other fields. */
.tom-acct-mepr .mepr_password .mp-form-label { flex-direction: column; align-items: stretch; gap: 6px; }
.tom-acct-mepr .mepr_password .mp-hide-pw { width: 100%; }
/* Single page checkout (on since T8) shows the price table with the total; the one-line price above repeats it. */
.tom-acct-mepr .mepr-signup-form .mepr_price { display: none !important; }

/* "All Access to <site>": what the plans and the checkout sell (2026-11-07). */
.tom-acct-product { margin: 0 0 2px; font-weight: 700; font-size: 15px; color: var(--ink); }
.tom-acct-summary .tom-acct-product { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }