/**
 * MemberPress ReadyLaunch brand skin
 * =================================================================
 * Covers the whole member funnel: /login/ (+ forgot/reset/unauthorized),
 * /account/, /register/* and /thank-you/.
 *
 * WHY THIS FILE EXISTS
 * MemberPress owns those routes while the design_enable_*_template options are
 * on (all four are). ReadyLaunch renders its OWN <html> document and then calls
 * MeprReadyLaunchCtrl::remove_styles(), which deregisters every enqueued
 * stylesheet whose handle is neither allow-listed nor prefixed with one of
 * mepr-/mp-/mpca-/mpcs-/mpgft-/mcpd/ca-course. main.css and the Google Fonts
 * handle both get dropped — which is why the funnel rendered 100% in
 * -apple-system with a #737373 submit button.
 *
 * So: no :root tokens, no @font-face, no theme CSS of any kind is present on
 * these pages. Everything this file needs, it re-declares.
 *
 * DESIGN TARGET: template-parts/premium-wall.php (main.css §16). That is the
 * site's own "log in or subscribe" surface, and it is where most people arrive
 * at /login/ from — so the funnel reuses its exact vocabulary: --tx-alt-bg
 * field, white card with a 4px red cap rule, square corners, Rockwell titles,
 * Source Sans 3 uppercase labels, accent-outline focus.
 *
 * SPECIFICITY NOTE: ReadyLaunch's own rules are ID-scoped
 * (#mepr-template-login .mepro-form input[type="submit"] = 1,2,1), and
 * MeprReadyLaunchCtrl::theme_style prints an inline <style> AFTER this file
 * with `body.mepr-guest-layout{background:<primary>!important}`. Overrides here
 * are deliberately carried on body.mepr-pro-template to clear both.
 *
 * @package TexasBullpen
 */

/* ----------------------------------------------------------------------------
   1. Fonts — main.css is dequeued, so its @font-face rules are gone with it.
   Source Sans 3 + Lora arrive via the `mepr-tx-fonts` Google handle that
   inc/memberpress-design.php enqueues alongside this file.
---------------------------------------------------------------------------- */
@font-face {
    font-family: 'Rockwell';
    src: url('../fonts/Rockwell-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rockwell';
    src: url('../fonts/Rockwell-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Replay Pro';
    src: url('../fonts/ReplayPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------------------------
   2. Tokens — main.css's :root block goes with main.css. Re-declared on the
   body so every value below stays a token reference, never a hardcoded hex.
---------------------------------------------------------------------------- */
body.mepr-pro-template {
    --tx-red: #98080C;
    --tx-red-dark: #7a0609;
    --tx-black: #000000;
    --tx-accent: #436F88;
    --tx-white: #FFFFFF;
    --tx-alt-bg: #F1F4F8;
    --tx-gray: #6D757F;
    --tx-gray-light: #D9D9D9;

    --tx-font-heading: 'Rockwell', Georgia, serif;
    --tx-font-body: 'Replay Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    --tx-font-secondary: 'Lora', Georgia, serif;
    --tx-font-meta: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;

    --tx-shadow-md: 0 6px 10px rgba(0, 0, 0, 0.2);
    --tx-transition: 0.2s ease;
}

/* ----------------------------------------------------------------------------
   3. The field
   The primary colour (#98080C) was being painted across the entire viewport,
   which is why the CTA could not be brand red — red on red is 1:1. The site
   itself is a light field with red as an accent band (see the homepage callout
   bar), so the funnel now matches: light field, red masthead, red button.
---------------------------------------------------------------------------- */
body.mepr-pro-template.mepr-guest-layout,
body.mepr-pro-template.mepr-app-layout {
    background: var(--tx-alt-bg) !important;
    font-family: var(--tx-font-body);
    color: var(--tx-black);
}

body.mepr-pro-template .site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ----------------------------------------------------------------------------
   4. Masthead — a red band echoing the site's callout bar, not a red page.
---------------------------------------------------------------------------- */
body.mepr-pro-template .site-header {
    background: var(--tx-red) !important;
    padding: 1.15rem 1.5rem;
    border-bottom: none;
    box-shadow: none;
}

body.mepr-guest-layout .site-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

body.mepr-pro-template .site-branding {
    margin: 0;
    display: flex;
    align-items: center;
}

/* The MemberPress logo option is the 1200x171 white lockup. Unconstrained it
   rendered 702px wide — 1.2x the width of the login card itself, so the brand
   mark outweighed the only thing on the page that does any work. */
body.mepr-pro-template .site-branding img.site-logo,
body.mepr-pro-template .site-branding img.site-branding__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 38px;
}

/* ----------------------------------------------------------------------------
   5. Main — optically centre the card instead of top-aligning it and leaving a
   quarter of the viewport empty underneath.
---------------------------------------------------------------------------- */
body.mepr-pro-template .site-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 1rem 3.5rem;
    box-sizing: border-box;
}

body.mepr-app-layout .site-main {
    justify-content: flex-start;
}

/* ----------------------------------------------------------------------------
   6. The card — premium-wall__inner's framing, square-cornered with the red cap
---------------------------------------------------------------------------- */
body.mepr-pro-template .mepro-boxed,
body.mepr-pro-template #mepro-login-hero .mepro-boxed {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    padding: 2.25rem 2rem 2rem;
    background: var(--tx-white);
    border: 1px solid var(--tx-gray-light);
    border-top: 4px solid var(--tx-red);
    border-radius: 0;
    box-shadow: var(--tx-shadow-md);
    box-sizing: border-box;
}

/* ReadyLaunch reserves `padding-right: calc(2rem + 36px)` plus a 55% width on
   .mepro-login-contents for the optional welcome image (design_show_login_
   welcome_image). With no image configured the gutter is still reserved, which
   pushed the form 143px from the card's left edge and 31px from its right.
   Reclaim it whenever the hero is running without its sidebar. */
body.mepr-pro-template #mepro-login-hero:not(.with-sidebar) {
    max-width: none;
    padding: 0;
    margin: 0;
}

body.mepr-pro-template #mepro-login-hero:not(.with-sidebar) .mepro-login-contents {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.mepr-pro-template .mepro-boxed > * {
    padding-left: 0;
    padding-right: 0;
}

/* ----------------------------------------------------------------------------
   7. Card typography
---------------------------------------------------------------------------- */
body.mepr-pro-template #mepr-template-login .mepro-form h1,
body.mepr-pro-template #mepr-template-login .mepr-form h1,
body.mepr-pro-template #mepr-template-login h1 {
    font-family: var(--tx-font-heading);
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.1;
    color: var(--tx-black);
    margin: 0 0 1.5rem;
}

body.mepr-pro-template #mepr-template-login h3 {
    font-family: var(--tx-font-heading);
    font-weight: 700;
    color: var(--tx-black);
}

body.mepr-pro-template #mepr-template-login p {
    font-family: var(--tx-font-body);
    color: var(--tx-gray);
    line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   8. Fields
   The float-label wiring (real <label for>, .active toggled by MemberPress's
   own JS) is sound and is left alone — only repainted. Resting state reads as
   a placeholder; floated state becomes the theme's uppercase meta label.
---------------------------------------------------------------------------- */
body.mepr-pro-template #mepr-template-login .mepro-form input,
body.mepr-pro-template #mepr-template-login .mepro-form select,
body.mepr-pro-template #mepr-template-login .mepr-form input,
body.mepr-pro-template #mepr-template-login .mepr-form select {
    font-family: var(--tx-font-body);
    font-size: 1rem;
    color: var(--tx-black);
    border: 1px solid var(--tx-gray-light);
    border-radius: 0;
    margin-bottom: 1rem;
}

body.mepr-pro-template #mepr-template-login .mepro-form input:focus,
body.mepr-pro-template #mepr-template-login .mepro-form input:focus-visible,
body.mepr-pro-template #mepr-template-login .mepr-form input:focus,
body.mepr-pro-template #mepr-template-login .mepr-form input:focus-visible {
    border: 1px solid var(--tx-accent);
    outline: 2px solid var(--tx-accent);
    outline-offset: 0;
}

/* Resting placeholder */
body.mepr-pro-template #mepr_loginform .mp-form-label label.placeholder-text,
body.mepr-pro-template .mp_wrapper .mp-form-row .mp-form-row-group label.placeholder-text,
body.mepr-pro-template .mp_wrapper .mp-form-row.mp-address-group label.placeholder-text:not(.active) {
    font-family: var(--tx-font-body);
    font-size: 1rem;
    color: var(--tx-gray);
    top: 11px;
    left: 12px;
}

/* Floated into the border notch. ReadyLaunch marks its own font-size
   !important here, so this one has to match it. */
body.mepr-pro-template #mepr_loginform .mp-form-label label.placeholder-text.active,
body.mepr-pro-template .mp_wrapper .mp-form-row .mp-form-row-group label.placeholder-text.active,
body.mepr-pro-template .mp_wrapper .mp-form-row.mp-address-group label.placeholder-text.active,
body.mepr-pro-template .mp_wrapper .mp-form-row.mp-address-group label.placeholder-text {
    font-family: var(--tx-font-meta);
    font-size: 0.7rem !important;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tx-red);
    background: var(--tx-white);
    transform: translate(0, -21px);
}

/* ----------------------------------------------------------------------------
   9. Remember Me
---------------------------------------------------------------------------- */
body.mepr-pro-template #mepr-template-login .mepro-form input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0 0.5rem 0 0;
    accent-color: var(--tx-red);
}

body.mepr-pro-template #mepr-template-login .mepro-form label,
body.mepr-pro-template #mepr-template-login .mepr-form label {
    font-family: var(--tx-font-meta);
    font-size: 0.95rem;
    color: var(--tx-gray);
}

body.mepr-pro-template .mepr_remember_me {
    margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------------------
   10. The one action on the page
   Was #737373 with a #063e94 hover — it read as disabled, then as a stray
   WordPress blue. Now .btn--red: square, Rockwell, asymmetric vertical padding
   because Rockwell rides ~3px high in a padded box. White on --tx-red is
   8.8:1.
---------------------------------------------------------------------------- */
body.mepr-pro-template #mepr-template-login .mepro-form input[type="submit"],
body.mepr-pro-template #mepr-template-login .mepro-form button[type="submit"],
body.mepr-pro-template #mepr-template-login .mepr-form input[type="submit"],
body.mepr-pro-template .mepr-pro-button,
body.mepr-pro-template button.mepr-share-button,
body.mepr-pro-template input.mepr-share-button {
    font-family: var(--tx-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--tx-white);
    background: var(--tx-red);
    border: none;
    border-radius: 0;
    padding: 0.875rem 1.5rem 0.625rem;
    cursor: pointer;
    transition: background-color var(--tx-transition);
}

body.mepr-pro-template #mepr-template-login .mepro-form input[type="submit"]:hover,
body.mepr-pro-template #mepr-template-login .mepro-form button[type="submit"]:hover,
body.mepr-pro-template #mepr-template-login .mepr-form input[type="submit"]:hover,
body.mepr-pro-template .mepr-pro-button:hover,
body.mepr-pro-template button.mepr-share-button:hover,
body.mepr-pro-template input.mepr-share-button:hover {
    background: var(--tx-red-dark);
    color: var(--tx-white);
}

body.mepr-pro-template #mepr-template-login .mepro-form input[type="submit"]:focus-visible {
    outline: 2px solid var(--tx-accent);
    outline-offset: 2px;
}

/* The show/hide-password control is a <button> inside the form and must NOT
   inherit the primary treatment above. */
body.mepr-pro-template #mepr-template-login .mepro-form button.mp-hide-pw,
body.mepr-pro-template #mepr-template-login .mepr-form button.mp-hide-pw {
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--tx-gray);
    padding: 0 12px;
}

body.mepr-pro-template #mepr-template-login .mepro-form button.mp-hide-pw:hover {
    background: transparent;
    color: var(--tx-red);
}

/* ----------------------------------------------------------------------------
   11. Links — ReadyLaunch ships stock WordPress blue (#06429E)
---------------------------------------------------------------------------- */
body.mepr-pro-template .mepr-login-actions a,
body.mepr-pro-template #mepr-template-login a {
    font-family: var(--tx-font-meta);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--tx-gray);
    text-decoration: none;
    border-bottom: 1px solid var(--tx-gray-light);
    padding-bottom: 1px;
    transition: color var(--tx-transition), border-color var(--tx-transition);
}

body.mepr-pro-template .mepr-login-actions a:hover,
body.mepr-pro-template #mepr-template-login a:hover {
    color: var(--tx-red);
    border-bottom-color: var(--tx-red);
}

body.mepr-pro-template .mepr-login-actions {
    text-align: center;
    margin-top: 0.5rem;
}

/* ----------------------------------------------------------------------------
   12. Subscribe path (markup from tx_mepr_login_subscribe_cta)
   The stock page offered exactly two links — the logo and Forgot Password — so
   anyone arriving without an account had nowhere to go on a subscription site.
---------------------------------------------------------------------------- */
.tx-mepr-alt {
    max-width: 460px;
    width: 100%;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--tx-font-body);
    font-size: 1rem;
    color: var(--tx-gray);
}

.tx-mepr-alt__link {
    font-family: var(--tx-font-meta);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--tx-red);
    text-decoration: none;
    border-bottom: 1px solid var(--tx-red);
    padding-bottom: 1px;
    white-space: nowrap;
    transition: color var(--tx-transition), border-color var(--tx-transition);
}

.tx-mepr-alt__link:hover {
    color: var(--tx-red-dark);
    border-bottom-color: var(--tx-red-dark);
}

/* ----------------------------------------------------------------------------
   13. App layout (account / checkout / thank-you) — shared shell only
---------------------------------------------------------------------------- */
body.mepr-app-layout .site-header .mepr-header-login-link,
body.mepr-app-layout .site-header .profile-menu__text {
    font-family: var(--tx-font-meta);
}

body.mepr-pro-template h1,
body.mepr-pro-template h2,
body.mepr-pro-template h3,
body.mepr-pro-template h4 {
    font-family: var(--tx-font-heading);
    font-weight: 700;
}


/* ----------------------------------------------------------------------------
   14. Account — the nav rail
   .mepr-account-container is `display: grid` with `250px 658px` tracks, and a
   grid item stretches by default: the rail was rendering 250x882 while its own
   <ul> is 176px tall, so 706px (80% of it) was empty brand red. Red also can't
   carry a "you are here" state when the whole rail is already red — ReadyLaunch
   signalled the active tab by laying rgba(0,0,0,.5) over it, i.e. by going
   DARKER, which reads as recessed rather than selected.

   So the rail becomes a light panel framed like the cards, and red is spent on
   the one row that is actually current.
---------------------------------------------------------------------------- */
body.mepr-app-layout #mepr-account-nav {
    align-self: start;
    background: var(--tx-white) !important;
    border: 1px solid var(--tx-gray-light);
    border-top: 4px solid var(--tx-red);
    border-radius: 0;
    padding: 0.35rem 0;
    margin-bottom: 1.5rem;
    box-shadow: var(--tx-shadow-md);
    overflow: hidden;
}

body.mepr-app-layout #mepr-account-nav ul {
    flex-direction: column;
    gap: 0;
}

body.mepr-app-layout #mepr-account-nav .mepr-nav-item {
    padding: 0;
}

body.mepr-app-layout #mepr-account-nav .mepr-nav-item a {
    justify-content: flex-start;
    font-family: var(--tx-font-meta);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tx-black);
    padding: 0.7rem 1.25rem;
    transition: background-color var(--tx-transition), color var(--tx-transition);
}

body.mepr-app-layout #mepr-account-nav .mepr-nav-item a:hover {
    background: var(--tx-alt-bg);
    color: var(--tx-red);
}

/* The icons are mask-image on `background-color: currentcolor`, so they follow
   the link colour on their own — nothing extra to repaint here. */
body.mepr-app-layout #mepr-account-nav .mepr-nav-item.--active a,
body.mepr-app-layout #mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a {
    background: var(--tx-red);
    color: var(--tx-white);
    font-weight: 700;
}

/* ----------------------------------------------------------------------------
   15. Account — content column
---------------------------------------------------------------------------- */

/* Messages. The welcome variant shipped as a green success alert; green is not
   in the palette (only the Scoville heat ramp and --tx-up), and nothing about
   landing on your own account page is a success state. */
body.mepr-app-layout .mepr-account-message,
body.mepr-app-layout .mepr-account-welcome-message {
    background-color: var(--tx-white);
    border: 1px solid var(--tx-gray-light);
    border-left: 4px solid var(--tx-accent);
    border-radius: 0;
    color: var(--tx-black);
    font-family: var(--tx-font-body);
}

/* The profile box was `background: rgba(0,0,0,0)` behind a 1px #ccc outline at
   13px radius — an outlined region, not a card. Same framing as the login card
   and premium-wall__inner. */
body.mepr-app-layout #mepr-profile-details {
    background: var(--tx-white);
    border: 1px solid var(--tx-gray-light);
    border-top: 4px solid var(--tx-red);
    border-radius: 0;
    box-shadow: var(--tx-shadow-md);
    padding: 1.75rem 2rem 1.5rem;
}

/* ReadyLaunch splits this row 60/40 between #mepr-profile-details and
   #mepr-profile-image. No profile image is rendered, so the 40% was reserved
   for nothing and the card sat 376px wide in a 658px column — the same
   reserved-gutter bug as the login hero's welcome image. */
@media screen and (min-width: 840px) {
    body.mepr-app-layout .mepr-profile-wrapper:not(:has(#mepr-profile-image)) #mepr-profile-details {
        width: 100%;
    }
}

/* ...but full width is the other extreme: the content column runs 992px on a
   wide screen, and a 960px row holding one name reads as broken. Cap the
   profile card and the message block to a shared measure so the column has one
   left AND one right edge. Deliberately not applied to #mepr-account-content
   itself — the Payments and Subscriptions tabs render tables that want room. */
body.mepr-app-layout #mepr-profile-details,
body.mepr-app-layout .mepr-account-message {
    max-width: 640px;
}

body.mepr-app-layout #mepr-profile-details dt {
    font-family: var(--tx-font-meta);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tx-gray);
}

body.mepr-app-layout #mepr-profile-details dd {
    font-family: var(--tx-font-body);
    font-size: 1.05rem;
    color: var(--tx-black);
}

body.mepr-app-layout #mepr-profile-details .mepr-profile-details__button:focus-visible {
    outline: 2px solid var(--tx-accent);
    outline-offset: 2px;
}

/* Buttons. All three rendered as identical #06429E outlines — stock WordPress
   blue, and no primary among them. Quiet by default; the one action a member
   actually came for carries the weight. */
body.mepr-app-layout .mepr-account-container .mepr-button,
body.mepr-app-layout .mepr-account-container .mepr-button.btn-outline,
body.mepr-app-layout .mepr-account-container input[type="submit"] {
    font-family: var(--tx-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    border-radius: 0;
    padding: 0.875rem 1.5rem 0.625rem;
    background: transparent;
    color: var(--tx-black);
    border: 1px solid var(--tx-gray-light);
    transition: color var(--tx-transition), border-color var(--tx-transition), background-color var(--tx-transition);
}

body.mepr-app-layout .mepr-account-container .mepr-button:hover,
body.mepr-app-layout .mepr-account-container .mepr-button.btn-outline:hover {
    background: transparent;
    color: var(--tx-red);
    border-color: var(--tx-red);
}

body.mepr-app-layout .mepr-account-container .mepr-button[href*="action=subscriptions"],
body.mepr-app-layout .mepr-account-container .mepr-button.btn-outline[href*="action=subscriptions"] {
    background: var(--tx-red);
    border-color: var(--tx-red);
    color: var(--tx-white);
}

body.mepr-app-layout .mepr-account-container .mepr-button[href*="action=subscriptions"]:hover,
body.mepr-app-layout .mepr-account-container .mepr-button.btn-outline[href*="action=subscriptions"]:hover {
    background: var(--tx-red-dark);
    border-color: var(--tx-red-dark);
    color: var(--tx-white);
}

/* The inline pencils are .btn-link, not buttons — keep them unframed. */
body.mepr-app-layout .mepr-account-container .mepr-button.btn-link,
body.mepr-app-layout .mepr-profile-details__button {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0.5rem;
    color: var(--tx-gray);
}

body.mepr-app-layout .mepr-profile-details__button:hover {
    color: var(--tx-red);
}

/* An unused widget area that still renders its padding below the card.
   NOT :empty — MemberPress prints newlines inside the div, so it always has
   text nodes; :not(:has(*)) is the test for "no element children". */
body.mepr-pro-template .mepr-rl-footer-widgets:not(:has(*)) {
    display: none;
}


/* ----------------------------------------------------------------------------
   16. One chrome system
   Measured before this block, a single account screen carried four panel
   treatments: the rail (0 radius, 1px rule, heavy shadow, Source Sans 3), the
   profile dropdown (4px radius, hairline rgba border, NO shadow, Replay Pro),
   the profile and row-action buttons (4px, still -apple-system — the skin had
   never reached them) and the status pills (999px/15px). Elevation was also
   inverted: the docked rail cast a shadow while the panel that actually floats
   over content had none.

   One rule from here on. A panel is white, square, 1px --tx-gray-light with a
   4px red cap; what floats simply sits higher than what is docked.
---------------------------------------------------------------------------- */

/* --- The profile dropdown: same panel language as the rail --- */
body.mepr-pro-template .site-header .profile-menu__dropdown {
    background: var(--tx-white);
    border: 1px solid var(--tx-gray-light);
    border-top: 4px solid var(--tx-red);
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    padding: 0;
    min-width: 200px;
}

body.mepr-pro-template .site-header .dropdown__item,
body.mepr-pro-template .site-header .dropdown a {
    font-family: var(--tx-font-meta);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tx-black);
    /* 0.75rem x2 + 1rem line-height clears the 44px target; the rail's rows are
       46px, and the same menu should not be comfortable in one place and tight
       in the other. */
    padding: 0.75rem 1.25rem;
    transition: background-color var(--tx-transition), color var(--tx-transition);
}

body.mepr-pro-template .site-header .dropdown__item:hover,
body.mepr-pro-template .site-header .dropdown__item:focus,
body.mepr-pro-template .site-header .dropdown a:hover,
body.mepr-pro-template .site-header .dropdown a:focus {
    background-color: var(--tx-alt-bg);
    color: var(--tx-red);
}

/* --- Masthead controls --- */
body.mepr-pro-template .site-header .profile-menu__button,
body.mepr-pro-template .site-header .mepr-header-login-link,
body.mepr-pro-template .site-header .profile-menu__text,
body.mepr-pro-template .site-header .profile-menu__text--small {
    font-family: var(--tx-font-meta);
    border-radius: 0;
}

/* Was rgba(0,0,0,0.4) — the same "darken the red" move already replaced on the
   nav rail, which reads as recessed rather than interactive. */
body.mepr-pro-template .site-header .profile-menu__button:hover {
    background: var(--tx-red-dark);
}

/* --- Row action controls --- */
body.mepr-app-layout #mepr-account-content .mepr-pro-account-table__col-actions button {
    font-family: var(--tx-font-meta);
    background: transparent;
    border-radius: 0;
    color: var(--tx-black);
    /* The bare three-dot control measured 20x27 — the smallest hit area on the
       page, and the only way into Cancel/Resume. Pad it to the 44px target. */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

body.mepr-app-layout #mepr-account-content .mepr-pro-account-table__col-actions button:hover {
    background: var(--tx-alt-bg);
    color: var(--tx-red);
}

/* ----------------------------------------------------------------------------
   16b. One status system
   ReadyLaunch shipped a raw Tailwind ramp: green-100/800, red-100/800,
   orange-100/900, purple-100/800 — none of them in the palette. The red pair
   (#FEE2E2 / #991B1B) sat a few hundred pixels from a --tx-red rail item, so
   the page showed two reds, one meaning "brand" and one meaning "failure".

   Mirrors the admin's approach (see the admin reskin: one status set, one pill,
   never a status hex written at the call site). Canceled and refunded are
   deliberately NEUTRAL rather than red — a cancelled subscription is an
   inactive state, not an error, and red is spent on the one state that wants
   attention. Shape is square and uppercase, so it reads as an editorial label
   in the theme's own voice rather than a SaaS pill.
---------------------------------------------------------------------------- */
body.mepr-pro-template {
    /* Text colours are darkened against their own tint to clear 4.5:1 at 12px:
       ok 7.1:1 · neutral 8.4:1 · warn 6.8:1 · danger 7.2:1. */
    --tx-status-ok: #115C28;
    --tx-status-ok-bg: #E8F3EC;
    --tx-status-neutral: #3F464E;
    --tx-status-neutral-bg: #EEF0F3;
    --tx-status-warn: #7A4A00;
    --tx-status-warn-bg: #FDF3E3;
    --tx-status-danger: #8F2A16;
    --tx-status-danger-bg: #FBEAE7;
}

body.mepr-app-layout .mepr-pro-account-table__badge,
body.mepr-app-layout .mepr-pro-account-table__badge.--is-active,
body.mepr-app-layout .mepr-pro-account-table__badge.--is-complete,
body.mepr-app-layout .mepr-pro-account-table__badge.--is-canceled,
body.mepr-app-layout .mepr-pro-account-table__badge.--is-refunded,
body.mepr-app-layout .mepr-pro-account-table__badge.--is-paused,
body.mepr-app-layout .mepr-pro-account-table__badge.--is-lapsed {
    font-family: var(--tx-font-meta);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 0.35rem 0.6rem;
    background-color: var(--tx-status-neutral-bg);
    color: var(--tx-status-neutral);
}

body.mepr-app-layout .mepr-pro-account-table__badge.--is-active,
body.mepr-app-layout .mepr-pro-account-table__badge.--is-complete {
    background-color: var(--tx-status-ok-bg);
    color: var(--tx-status-ok);
}

body.mepr-app-layout .mepr-pro-account-table__badge.--is-paused {
    background-color: var(--tx-status-warn-bg);
    color: var(--tx-status-warn);
}

body.mepr-app-layout .mepr-pro-account-table__badge.--is-lapsed {
    background-color: var(--tx-status-danger-bg);
    color: var(--tx-status-danger);
}

/* ----------------------------------------------------------------------------
   16c. One label convention
   Table headers were Replay Pro 400 #6B6F7B sentence case while the profile
   card's <dt> labels had already moved to the meta convention — the same role
   rendered two ways.
---------------------------------------------------------------------------- */
body.mepr-app-layout .mepr-pro-account-table thead th {
    font-family: var(--tx-font-meta);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tx-gray);
    border-bottom: 1px solid var(--tx-gray-light);
}


/* ----------------------------------------------------------------------------
   16d. Checkout (/register/*) — the money page
   It had none of the account rules, because it has no .mepr-account-container:
   five radii on one form, a #1D1D1D 6px -apple-system "Sign Up" button, a
   #06429E coupon link, 38px inputs against the login's 47px, and two label
   systems disagreeing on the same form — First/Last Name picked up the login
   float-label rule (.mp-form-row-group) while the address block kept
   MemberPress's blue (.mp-address-group). That selector is widened above so one
   label system now covers the whole form.

   ReadyLaunch lays this out as a row-reverse flex with a 1px #ccc divider
   between summary and form, which is a sound checkout pattern — so rather than
   fight it, the container itself becomes the panel and the divider stays.
---------------------------------------------------------------------------- */
body.mepr-pro-template .mepr-checkout-container {
    background: var(--tx-white);
    border: 1px solid var(--tx-gray-light);
    border-top: 4px solid var(--tx-red);
    box-shadow: var(--tx-shadow-md);
    /* ReadyLaunch sets min-height:100vh, which stretched both columns to 1162px
       and dragged the divider far below the content. */
    min-height: 0;
    margin-bottom: 3rem;
}

@media screen and (min-width: 1024px) {
    body.mepr-pro-template .mepr-checkout-container .invoice-wrapper {
        padding: 2.25rem 2.5rem 2.25rem 2.5rem !important;
        padding-top: 2.25rem;
    }

    body.mepr-pro-template .mepr-checkout-container .form-wrapper {
        padding: 2.25rem 2.5rem 2.5rem;
        border-left: 1px solid var(--tx-gray-light);
    }
}

@media screen and (max-width: 1023px) {
    body.mepr-pro-template .mepr-checkout-container .invoice-wrapper,
    body.mepr-pro-template .mepr-checkout-container .form-wrapper {
        padding: 1.5rem 1.25rem;
    }
}

/* The price is the headline; "Pay Texas Bullpen" is a kicker. It shipped the
   other way round — an <h1> at 16px over a 32px amount in the body face. */
body.mepr-pro-template .mepr-checkout-container .invoice-wrapper .invoice-heading {
    font-family: var(--tx-font-meta);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tx-gray);
    margin-bottom: 0.6rem;
}

body.mepr-pro-template .mepr-checkout-container .invoice-wrapper .invoice-amount {
    font-family: var(--tx-font-heading);
    font-weight: 700;
    color: var(--tx-black);
}

/* Fields: match the login form — square, --tx-gray-light, accent focus, and a
   44px target instead of 38px. */
body.mepr-pro-template .mepr-form .mepr-form-input,
body.mepr-pro-template .mepr-form input[type="text"],
body.mepr-pro-template .mepr-form input[type="email"],
body.mepr-pro-template .mepr-form input[type="password"],
body.mepr-pro-template .mepr-form input[type="tel"],
body.mepr-pro-template .mepr-form select {
    font-family: var(--tx-font-body);
    border-radius: 0;
    border: 1px solid var(--tx-gray-light);
    min-height: 44px;
    box-sizing: border-box;
}

body.mepr-pro-template .mepr-form .mepr-form-input:focus,
body.mepr-pro-template .mepr-form input:focus-visible,
body.mepr-pro-template .mepr-form select:focus-visible {
    border-color: var(--tx-accent);
    outline: 2px solid var(--tx-accent);
    outline-offset: 0;
}

/* The one button that takes the money. */
body.mepr-pro-template .mepr-checkout-container .form-wrapper input[type="submit"] {
    font-family: var(--tx-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--tx-red);
    color: var(--tx-white);
    border: none;
    border-radius: 0;
    padding: 1.1rem 1.5rem 0.9rem;
    transition: background-color var(--tx-transition);
}

body.mepr-pro-template .mepr-checkout-container .form-wrapper input[type="submit"]:hover {
    background: var(--tx-red-dark);
}

body.mepr-pro-template .mepr-checkout-container .form-wrapper input[type="submit"]:focus-visible {
    outline: 2px solid var(--tx-accent);
    outline-offset: 2px;
}

/* Coupon toggle — was stock WordPress blue. */
body.mepr-pro-template .mepr-checkout-container a,
body.mepr-pro-template .mepr-form a {
    font-family: var(--tx-font-meta);
    font-weight: 500;
    color: var(--tx-gray);
    text-decoration: none;
    border-bottom: 1px solid var(--tx-gray-light);
    transition: color var(--tx-transition), border-color var(--tx-transition);
}

body.mepr-pro-template .mepr-checkout-container a:hover,
body.mepr-pro-template .mepr-form a:hover {
    color: var(--tx-red);
    border-bottom-color: var(--tx-red);
}

/* Billing terms (the mepr-checkout-before-submit disclosure) and the ToS row —
   legally required copy, so it stays legible rather than shrinking away. */
body.mepr-pro-template .mepr-renewal-terms,
body.mepr-pro-template .mepr_tos {
    font-family: var(--tx-font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--tx-gray);
}

body.mepr-pro-template .mepr-payment-methods-wrapper {
    border: 1px solid var(--tx-gray-light);
    border-radius: 0;
    padding: 1.25rem;
}

/* Two holdouts MemberPress rounds more specifically than the rule above: the
   last field of the stacked address group, and the gateway chooser (hidden
   while there is one gateway, visible the moment a second is added). */
body.mepr-pro-template .mepr-form .mp-address-group .mepr-form-input,
body.mepr-pro-template .mepr-form .mp-address-group input:last-child,
body.mepr-pro-template .mepr-form #mepr-address-zip,
body.mepr-pro-template .mepr-payment-option-label {
    border-radius: 0;
}

/* A bare message with no container of its own — /thank-you/ reloaded without a
   transaction prints `<p>Transaction not found</p>` straight into #primary, and
   it is reachable by bookmark or refresh. Give any orphan message the panel. */
body.mepr-app-layout .site-main > p {
    max-width: 460px;
    margin: 0 auto;
    padding: 1.75rem 2rem;
    background: var(--tx-white);
    border: 1px solid var(--tx-gray-light);
    border-top: 4px solid var(--tx-red);
    box-shadow: var(--tx-shadow-md);
    font-family: var(--tx-font-body);
    color: var(--tx-black);
    text-align: center;
}

/* ----------------------------------------------------------------------------
   16e. Mobile table labels
   Below the breakpoint ReadyLaunch drops <thead> and re-labels each cell with
   td::before, so the 16c rule (which targets thead th) never reached mobile and
   the row labels stayed Replay Pro sentence case.
---------------------------------------------------------------------------- */
body.mepr-app-layout .mepr-pro-account-table td::before {
    font-family: var(--tx-font-meta);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tx-gray);
}

/* ----------------------------------------------------------------------------
   17. Mobile
   The logo ran 0 -> 375 with no gutter while the card kept 19px, so the two
   sat on different left edges and the lockup read as clipped at the bezel.
---------------------------------------------------------------------------- */
@media (max-width: 782px) {
    body.mepr-pro-template .site-header {
        padding: 1rem 1.25rem;
    }

    body.mepr-pro-template .site-branding img.site-logo,
    body.mepr-pro-template .site-branding img.site-branding__logo {
        height: 30px;
    }

    /* One gutter, not three. Measured at 375px, the side inset was stacking
       .site-main 20px + #mepr-account-content 32px + td 12px = 64px a side,
       i.e. 128px of a 375px viewport (34%) spent on margin, leaving 247px of
       content. The outer rule owns the gutter now and the inner two are zeroed;
       td keeps its vertical padding for row rhythm. */
    body.mepr-pro-template .site-main {
        padding: 1.5rem 1rem 2rem;
    }

    body.mepr-app-layout #mepr-account-content {
        padding-left: 0;
        padding-right: 0;
    }

    body.mepr-app-layout .mepr-pro-account-table td,
    body.mepr-app-layout .mepr-pro-account-table th {
        padding-left: 0;
        padding-right: 0;
    }

    body.mepr-pro-template .mepro-boxed {
        padding: 1.75rem 1.5rem 1.5rem;
    }

    body.mepr-pro-template #mepr-template-login .mepro-form h1 {
        font-size: 1.6rem;
    }
}

@media (max-width: 782px) {
    body.mepr-app-layout #mepr-profile-details {
        padding: 1.5rem 1.25rem 1.25rem;
    }
}
