/*
 * EAM redesign: forms.css
 * Owner: forms track.
 * Scope: every button (Kadence advancedbtn .kb-button, core .wp-block-button__link, eam-* buttons in mu-plugin templates, MemberPress and Formidable submits, Kadence form submit) and every form control (inputs, selects, textareas, checkboxes, radios, MemberPress login/account/signup forms, Kadence advanced forms, Formidable forms, search fields in content).
 * Contract: docs/redesign/DESIGN-SYSTEM.md (selector ownership map). Every rule starts with
 * body.eam-redesign; use the --rd-* tokens from tokens.css, never raw hex or font names.
 *
 * Rulebook: S-05 (buttons), B-02 (square corners via --rd-radius; resolves D-46 vs X-37),
 * D-42 and S-13 (focus ring, motion, reduced motion), D-50 (keep form 1500's empty
 * "Select..." option), D-05 (16/24 type), D-07 (ink-based borders).
 * Royal Society reference: clone src/components/sites/royalsociety-org-56b184c7/shared/Hero.tsx
 * (BUTTON_BASE_CLASS) and EmailSubscription.tsx (fields, checkbox, black button);
 * main.pretty.css:1906-1985 (.button), :4050-4180 (.checkbox, .form__label, .form__input).
 *
 * How it works
 * - Shape, size, type, motion and focus are the same for every button: 54px tall
 *   (16/24 semibold + 15px padding), small 36px, square corners, hover = opacity .9
 *   plus a slight press (RS), no colour jump.
 * - Kadence block buttons keep the colours set in each block (board editors choose
 *   them in the editor; B-10). Exceptions: Kadence's global fill/outline hover
 *   colour shift is pinned; buttons in the light hero rows (B-02) become RS
 *   primary + white; the closing CTA pair (<page>_cta06/07) gets white and
 *   outline-on-dark.
 * - Template buttons (eam-act/conf/cm, account, announcements), MemberPress and
 *   Kadence form submits, and the old-format Kadence buttons on /account/
 *   (.kt-btns-wrap a.kt-button, no block colours; account.css:92-115 painted
 *   them) are code, so their colours are set here: primary indigo,
 *   white (ink label), ink, outline, outline on dark.
 * - New markup can use .rd-btn with --primary / --white / --ink / --outline /
 *   --outline-light / --small.
 * - Specificity: contexts are grouped in :is(), which takes the specificity of its
 *   most specific argument, so one selector outranks the old rules it replaces
 *   (account.css .kadence-column_account_content_col .kt-inside-inner-col ... (0,3,1)
 *   to (0,4,1); eam-site-polish.css :678/:811 (0,4,1); Kadence per-block hover (0,4,0)).
 *   Two !important, each only undoing MemberPress's own (section 4, floating
 *   labels; section 5, checkbox label display).
 */

/* ---------- Component values (derived from tokens) ---------- */

body.eam-redesign {
  --rd-btn-border: calc(var(--rd-border-width) * 2);              /* 2px */
  --rd-btn-pad-y: calc(15px - var(--rd-btn-border));              /* RS 15px, minus the border every button reserves */
  --rd-btn-pad-x: var(--rd-space-base);                           /* RS 24px */
  --rd-btn-h: 54px;                                               /* RS: 24px line + 2 x 15px */
  --rd-btn-h-small: 36px;                                         /* RS .button--small */
  --rd-field-h: 50px;                                             /* RS .form__input */
  --rd-field-pad: var(--rd-space-xs);                             /* RS 12px */
  --rd-check-size: 24px;                                          /* RS .checkbox__checkmark */
  --rd-check-dot: 12px;
}

/* ==========================================================================
 * 1. Buttons: shared base (shape, size, type, motion)
 * ========================================================================== */

/* Kadence block buttons and form submits, core buttons, template buttons,
 * MemberPress, Formidable and generic submits inside page content. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  .wp-block-kadence-advancedbtn .kb-button.kt-button,
  .wp-block-kadence-advancedbtn .kb-button,
  .kb-advanced-form .kb-adv-form-submit-button.kb-button,
  .kb-advanced-form .kb-adv-form-submit-button,
  .wp-block-button .wp-block-button__link,
  .eam-act-btn, .eam-conf-btn, .eam-cm-btn,
  .eam-self-status__submit, .eam-ann-pref__btn,
  input[type="submit"]:not(.search-submit), button[type="submit"]:not(.search-submit), input[type="button"].button-primary,
  .mepr-submit, .mepr-share-button, a.mepr-invoice-print.mepr-button,
  .frm_forms .frm_button_submit,
  .wp-block-kadence-advancedbtn .kt-btns-wrap .kt-button,
  .rd-btn
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rd-space-xs);
  box-sizing: border-box;
  max-width: 100%;
  min-height: var(--rd-btn-h);
  margin-block: 0;
  padding: var(--rd-btn-pad-y) var(--rd-btn-pad-x);
  border-radius: var(--rd-radius);
  font-family: var(--rd-font);
  font-size: var(--rd-fs-body);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-lh-body);
  letter-spacing: var(--rd-ls-body);
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
  box-shadow: none;
  transition:
    opacity var(--rd-dur-fast) ease,
    transform var(--rd-dur-slow) var(--rd-ease-out-cubic),
    background-color var(--rd-dur-base) ease,
    border-color var(--rd-dur-base) ease,
    color var(--rd-dur-base) ease;
}

/* Kadence's own global button colours: no colour jump on hover or focus
 * (Kadence default fill/outline hover = --global-palette2). */
body.eam-redesign .kb-button {
  --global-palette-btn-bg-hover: var(--global-palette-btn-bg);
  --global-palette-btn-hover: var(--global-palette-btn);
}

/* Kadence buttons without a border of their own: reserve the same 2px so
 * outline and filled buttons end up the same 54px height. min-height does
 * this for borderless ones; the outline variant sets its border below. */
body.eam-redesign main .wp-block-kadence-advancedbtn .kb-button.kb-btn-global-outline {
  border-width: var(--rd-btn-border);
  border-style: solid;
}

/* Kadence icon inside a button (e.g. "Discover More" arrow). */
body.eam-redesign main .wp-block-kadence-advancedbtn .kb-button .kb-svg-icon-wrap {
  margin: 0;
}

body.eam-redesign main .wp-block-kadence-advancedbtn .kb-button .kt-btn-inner-text {
  line-height: inherit;
}

/* Hover (RS): fade slightly and press in. Durations and the transform
 * collapse to 0 / none under prefers-reduced-motion (tokens.css). */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  .wp-block-kadence-advancedbtn .kb-button.kt-button,
  .wp-block-kadence-advancedbtn .kb-button,
  .kb-advanced-form .kb-adv-form-submit-button.kb-button,
  .kb-advanced-form .kb-adv-form-submit-button,
  .wp-block-button .wp-block-button__link,
  .eam-act-btn, .eam-conf-btn, .eam-cm-btn,
  .eam-self-status__submit, .eam-ann-pref__btn,
  input[type="submit"]:not(.search-submit), button[type="submit"]:not(.search-submit), input[type="button"].button-primary,
  .mepr-submit, .mepr-share-button, a.mepr-invoice-print.mepr-button,
  .frm_forms .frm_button_submit,
  .wp-block-kadence-advancedbtn .kt-btns-wrap .kt-button,
  .rd-btn
):not(:disabled, [aria-disabled="true"]):hover {
  opacity: .9;
  transform: var(--rd-press);
  text-decoration: none;
}

/* Keyboard focus: EAM's double ring (D-42), tokens from tokens.css. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  .wp-block-kadence-advancedbtn .kb-button.kt-button,
  .wp-block-kadence-advancedbtn .kb-button,
  .kb-advanced-form .kb-adv-form-submit-button.kb-button,
  .kb-advanced-form .kb-adv-form-submit-button,
  .wp-block-button .wp-block-button__link,
  .eam-act-btn, .eam-conf-btn, .eam-cm-btn,
  .eam-self-status__submit, .eam-ann-pref__btn,
  input[type="submit"]:not(.search-submit), button[type="submit"]:not(.search-submit), input[type="button"].button-primary,
  .mepr-submit, .mepr-share-button, a.mepr-invoice-print.mepr-button,
  .frm_forms .frm_button_submit,
  .wp-block-kadence-advancedbtn .kt-btns-wrap .kt-button,
  .rd-btn
):focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  box-shadow: var(--rd-focus-halo);
}

/* Disabled (RS .button[disabled]): quiet grey, no hover. MemberPress
 * disables its submit while it processes. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  .kb-advanced-form .kb-adv-form-submit-button,
  .eam-self-status__submit, .eam-ann-pref__btn,
  input[type="submit"]:not(.search-submit), button[type="submit"]:not(.search-submit), input[type="button"].button-primary,
  .mepr-submit, .mepr-share-button,
  .frm_forms .frm_button_submit,
  .wp-block-kadence-advancedbtn .kt-btns-wrap .kt-button,
  .rd-btn
):is(:disabled, [aria-disabled="true"]),
body.eam-redesign main :is(.wp-block-kadence-advancedbtn .kb-button, .wp-block-button__link, .eam-act-btn, .eam-conf-btn, .eam-cm-btn, .rd-btn)[aria-disabled="true"] {
  border-color: transparent;
  background-color: var(--rd-color-surface-muted);
  color: var(--rd-color-text-50);
  opacity: 1;
  transform: none;
  cursor: not-allowed;
}

/* Small buttons (RS .button--small, 36px): Kadence "small" size, the About
 * section links (a button group; components.css positions the group). */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  .wp-block-kadence-advancedbtn .kb-button.kt-button.kt-btn-size-small,
  .eam-about-section-nav .wp-block-button .wp-block-button__link,
  .rd-btn.rd-btn--small
) {
  min-height: var(--rd-btn-h-small);
  padding: calc(6px - var(--rd-btn-border)) var(--rd-space-s);
}

/* Below desktop the About section links are the page's in-page nav on touch
 * screens: 44px tap targets (DESIGN-SYSTEM 4.9). (0,8,1) beats the rule above. */
@media (max-width: 1080px) {
  body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) .eam-about-section-nav.wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button {
    min-height: 44px;
  }
}

/* ==========================================================================
 * 2. Button colour variants
 * ========================================================================== */

/* Code-owned buttons (templates, MemberPress, Kadence form submits, .rd-btn)
 * take their colours from three variables. Defaults sit in :where() (0,1,1)
 * so any variant rule below outranks them; the rule that paints them is
 * strong, so the old per-plugin hover colours (eam-activities.css:91-98,
 * eam-login.css:235, account.css:803, eam-site-polish.css:1006) no longer
 * apply: hover is the RS fade and press from section 1, no colour jump. */
body.eam-redesign :where(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :where(
  .kb-advanced-form .kb-adv-form-submit-button,
  .eam-act-btn, .eam-conf-btn, .eam-cm-btn,
  .eam-self-status__submit, .eam-ann-pref__btn,
  input[type="submit"]:not(.search-submit), button[type="submit"]:not(.search-submit), input[type="button"].button-primary,
  .mepr-submit, .mepr-share-button, a.mepr-invoice-print.mepr-button,
  .frm_forms .frm_button_submit,
  .wp-block-kadence-advancedbtn .kt-btns-wrap .kt-button,
  .rd-btn
) {
  --rd-btn-bg: var(--rd-color-primary);
  --rd-btn-fg: var(--rd-color-on-primary);
  --rd-btn-line: var(--rd-btn-bg);
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  .kb-advanced-form .kb-adv-form-submit-button.kb-button,
  .kb-advanced-form .kb-adv-form-submit-button,
  .eam-act-btn, .eam-conf-btn, .eam-cm-btn,
  .eam-self-status__submit, .eam-ann-pref__btn,
  input[type="submit"]:not(.search-submit), button[type="submit"]:not(.search-submit), input[type="button"].button-primary,
  .mepr-submit, .mepr-share-button, a.mepr-invoice-print.mepr-button,
  .frm_forms .frm_button_submit,
  .wp-block-kadence-advancedbtn .kt-btns-wrap .kt-button,
  .rd-btn
):not(:disabled, [aria-disabled="true"]) {
  border: var(--rd-btn-border) solid var(--rd-btn-line);
  background: var(--rd-btn-bg);
  color: var(--rd-btn-fg);
}

/* White (RS .button--white): white fill, ink label. Template "solid"
 * buttons sit on indigo bands and dark hero photos; the Contact "Email
 * updates" submit sits on the indigo band (eam-site-polish.css:993-1009). */
body.eam-redesign :is(.eam-act-btn--solid, .eam-conf-btn--solid, .eam-cm-btn--solid, .rd-btn--white),
body.eam-redesign :is(.kb-row-layout-wrap.has-theme-palette1-background-color, .kb-row-layout-id1064_07bbd8-50) .kb-advanced-form .kb-adv-form-submit-button {
  --rd-btn-bg: var(--rd-white);
  --rd-btn-fg: var(--rd-ink);
}

/* Ink (RS .button--black). For new markup. */
body.eam-redesign .rd-btn--ink {
  --rd-btn-bg: var(--rd-color-dark);
  --rd-btn-fg: var(--rd-white);
}

/* Outline on light (EAM extra, S-05): indigo line and label. */
body.eam-redesign :is(.eam-act-btn--ghost, .eam-ann-pref__btn--ghost, .rd-btn--outline) {
  --rd-btn-bg: transparent;
  --rd-btn-fg: var(--rd-color-primary);
  --rd-btn-line: var(--rd-color-primary);
}

/* Outline on dark: white line and label (template CTA bands, conference hero). */
body.eam-redesign :is(.eam-act-btn--outline, .eam-conf-btn--ghost, .eam-conf-btn--outline, .eam-cm-btn--outline, .rd-btn--outline-light) {
  --rd-btn-bg: transparent;
  --rd-btn-fg: var(--rd-white);
  --rd-btn-line: var(--rd-white);
}

/* Kadence block buttons: core and Kadence outline buttons. Colour from the
 * block (Kadence global outline = indigo); width 2px, square. */
body.eam-redesign main .wp-block-button.is-style-outline .wp-block-button__link,
body.eam-redesign main .eam-about-section-nav .wp-block-button .wp-block-button__link {
  border: var(--rd-btn-border) solid currentColor;
  background-color: transparent;
}

/* Light heroes (B-02; components.css turns the playbook hero rows and the
 * code-rendered heroes into the tint band). RS hero buttons on the light
 * band: the first is primary, the next ones white (clone Hero.tsx
 * BUTTON_VARIANT_CLASS). The blocks were set up for the old indigo band
 * (white first button, white outline second: <page>_herobtn1/2), which
 * would vanish on the tint. Same colours on hover and focus (RS). */
body.eam-redesign .kb-row-layout-wrap:is(:has(> .kt-row-column-wrap .eam-page-hero__title), :has(> .kt-row-column-wrap .eam-page-hero__eyebrow)) .wp-block-kadence-advancedbtn .kb-button.kt-button:first-child,
body.eam-redesign .kb-row-layout-wrap:is(:has(> .kt-row-column-wrap .eam-page-hero__title), :has(> .kt-row-column-wrap .eam-page-hero__eyebrow)) .wp-block-kadence-advancedbtn .kb-button.kt-button:first-child:is(:hover, :focus) {
  border: var(--rd-btn-border) solid var(--rd-color-primary);
  background: var(--rd-color-primary);
  color: var(--rd-color-on-primary);
}

body.eam-redesign .kb-row-layout-wrap:is(:has(> .kt-row-column-wrap .eam-page-hero__title), :has(> .kt-row-column-wrap .eam-page-hero__eyebrow)) .wp-block-kadence-advancedbtn .kb-button.kt-button:not(:first-child),
body.eam-redesign .kb-row-layout-wrap:is(:has(> .kt-row-column-wrap .eam-page-hero__title), :has(> .kt-row-column-wrap .eam-page-hero__eyebrow)) .wp-block-kadence-advancedbtn .kb-button.kt-button:not(:first-child):is(:hover, :focus) {
  border: var(--rd-btn-border) solid var(--rd-white);
  background: var(--rd-white);
  color: var(--rd-ink);
}

/* Closing call-to-action bands stay indigo (components.css section 12).
 * First button (<page>_cta06-*): white with an ink label, as the blocks set
 * it (palette9 / palette3; eam-site-polish.css:868-871 had turned the label
 * #303a8c, and the blocks' own hover faded it, eam-site-polish.css:128-134).
 * Second button (<page>_cta07-*): white outline, 2px like every outline. */
body.eam-redesign main .wp-block-kadence-advancedbtn .kb-button.kt-button[class*="_cta06-"],
body.eam-redesign main .wp-block-kadence-advancedbtn .kb-button.kt-button[class*="_cta06-"]:is(:hover, :focus) {
  border: var(--rd-btn-border) solid var(--rd-white);
  background: var(--rd-white);
  color: var(--rd-ink);
}

body.eam-redesign main .wp-block-kadence-advancedbtn .kb-button.kt-button[class*="_cta07-"],
body.eam-redesign main .wp-block-kadence-advancedbtn .kb-button.kt-button[class*="_cta07-"]:is(:hover, :focus) {
  border: var(--rd-btn-border) solid var(--rd-white);
  background: transparent;
  color: var(--rd-white);
}

/* Conferences hero is light now too (components.css): "View EAM 2027"
 * primary, "Browse archive" white (eam-conferences/templates, .eam-conf-hero__btns). */
body.eam-redesign .eam-conf-hero .eam-conf-btn.eam-conf-btn--solid {
  --rd-btn-bg: var(--rd-color-primary);
  --rd-btn-fg: var(--rd-color-on-primary);
  --rd-btn-line: var(--rd-color-primary);
}

body.eam-redesign .eam-conf-hero .eam-conf-btn:is(.eam-conf-btn--ghost, .eam-conf-btn--outline) {
  --rd-btn-bg: var(--rd-white);
  --rd-btn-fg: var(--rd-ink);
  --rd-btn-line: var(--rd-white);
}

/* Back link on a conference page (eam-conferences/templates/single.php:53):
 * an RS link-button, indigo semibold label with the arrow, underline on hover. */
body.eam-redesign main .eam-conf-single__back a {
  display: inline-flex;
  align-items: center;
  gap: var(--rd-space-2xs);
  min-height: 44px;
  color: var(--rd-color-link);
  font-weight: var(--rd-fw-semibold);
  text-decoration: none;
}

body.eam-redesign main .eam-conf-single__back a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Conference page facts panel links ("Official site", eam-conference-single.css:130-147
 * drew a 6px 36px button): RS small outline button, square, 2px indigo line,
 * 44px tall so it is a full tap target on phones. Hover fills indigo. */
body.eam-redesign main .eam-conf-single .eam-conf-single__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--rd-space-2xs);
  box-sizing: border-box;
  min-height: 44px;
  padding: calc(10px - var(--rd-btn-border)) var(--rd-space-s);
  border: var(--rd-btn-border) solid var(--rd-color-primary);
  border-radius: var(--rd-radius);
  background: var(--rd-white);
  font-family: var(--rd-font);
  font-size: var(--rd-fs-body);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-lh-tight);
  letter-spacing: var(--rd-ls-body);
  color: var(--rd-color-primary);
  text-decoration: none;
  transition: background-color var(--rd-dur-base) ease, color var(--rd-dur-base) ease;
}

body.eam-redesign main .eam-conf-single .eam-conf-single__links a:is(:hover, :focus-visible) {
  background: var(--rd-color-primary);
  color: var(--rd-color-on-primary);
}

/* ==========================================================================
 * 3. Form fields: text inputs, selects, textareas
 * ========================================================================== */

/* Contexts: page content, the login card (eam-login.css:166), the account
 * column (account.css:731), MemberPress ReadyLaunch checkout (.mp_wrapper),
 * Kadence forms, Formidable. The header search is header.css's. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="search"], input[type="date"],
  input:not([type]), select, textarea
) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--rd-field-min, var(--rd-field-h));
  margin: 0;
  padding: var(--rd-field-pad);
  border: var(--rd-border-width) solid var(--rd-border);
  border-radius: var(--rd-radius);
  background-color: var(--rd-color-surface);
  color: var(--rd-color-text);
  font-family: var(--rd-font);
  font-size: var(--rd-fs-body);           /* 16px also stops iOS zooming in on focus */
  font-weight: var(--rd-fw-regular);
  line-height: var(--rd-lh-body);
  letter-spacing: var(--rd-ls-body);
  box-shadow: none;
  transition: border-color var(--rd-dur-base) ease, box-shadow var(--rd-dur-base) ease;
}

/* Textareas: taller box (read by the min-height above). */
body.eam-redesign textarea {
  --rd-field-min: 130px;
  resize: vertical;
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(input, textarea)::placeholder {
  color: var(--rd-color-placeholder);
  opacity: 1;
}

/* Selects: square box with a drawn chevron (no image, token colours). */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--rd-field-pad) * 2 + var(--rd-space-s));
  background-image:
    linear-gradient(45deg, transparent 50%, var(--rd-color-text) 50%),
    linear-gradient(135deg, var(--rd-color-text) 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 50%,
    calc(100% - 15px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* D-50: the "Select..." option stays (form 1500, MemberPress country);
 * while it is the choice, show it in placeholder grey. Form 1500's first
 * option is that placeholder (its value is the text "Select...", not empty). */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(select:has(option[value=""]:checked), .kb-advanced-form select:has(> option:first-child:checked)) {
  color: var(--rd-color-placeholder);
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) select option {
  color: var(--rd-color-text);
}

/* Hover: a firmer line. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="search"], input[type="date"],
  input:not([type]), select, textarea
):not(:disabled, [readonly]):hover {
  border-color: var(--rd-color-text-70);
}

/* Focus (contract section 8): indigo line plus the soft field ring. The
 * inset shadow thickens the line to 2px without moving the text. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="search"], input[type="date"],
  input:not([type]), select, textarea
):is(:focus, :focus-visible) {
  border-color: var(--rd-color-primary);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--rd-color-primary), var(--rd-focus-field);
}

/* Invalid (MemberPress adds .invalid; Kadence and browsers aria-invalid). */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="search"], input[type="date"],
  input:not([type]), select, textarea
):is(.invalid, [aria-invalid="true"], .kb-field-error) {
  border-color: var(--rd-error-text);
}

/* Disabled and read-only. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="search"], input[type="date"],
  input:not([type]), select, textarea
):is(:disabled, [readonly]) {
  border-color: var(--rd-border-light);
  background-color: var(--rd-color-surface-muted);
  color: var(--rd-color-text-70);
  cursor: not-allowed;
}

/* Fields on an indigo band (Contact "Email updates"): no grey line on the
 * blue; the white box is the edge. Focus ring in white. */
body.eam-redesign main :is(.kb-row-layout-wrap.has-theme-palette1-background-color, .kb-row-layout-id1064_07bbd8-50) .kb-advanced-form :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"]) {
  border-color: var(--rd-white);
}

body.eam-redesign main :is(.kb-row-layout-wrap.has-theme-palette1-background-color, .kb-row-layout-id1064_07bbd8-50) .kb-advanced-form :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"]):is(:focus, :focus-visible) {
  border-color: var(--rd-white);
  box-shadow: 0 0 0 3px var(--rd-indigo), 0 0 0 5px var(--rd-white);
}

/* Show/hide password: the eye button sits inside the field (MemberPress
 * .mp-hide-pw). Keep it an icon button, not a styled button. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) div.mp-hide-pw {
  position: relative;
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) div.mp-hide-pw input {
  padding-right: calc(var(--rd-field-h) + var(--rd-space-2xs));
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) button.mp-hide-pw {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--rd-radius);
  background: transparent;
  color: var(--rd-color-text-70);
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) button.mp-hide-pw:hover {
  color: var(--rd-color-primary);
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) button.mp-hide-pw:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: -4px;
  box-shadow: none;
}

/* ==========================================================================
 * 4. Labels, required mark, help and messages
 * ========================================================================== */

/* RS .form__label: semibold, 16px, 10px above the field. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  .kb-advanced-form label.kb-adv-form-label,
  .mp-form-label label,
  .frm_forms .frm_primary_label
) {
  display: block;
  margin: 0 0 10px;
  color: var(--rd-color-text);
  font-family: var(--rd-font);
  font-size: var(--rd-fs-body);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-lh-body);
  letter-spacing: var(--rd-ls-body);
  text-transform: none;
}

/* MemberPress ReadyLaunch checkout (/register/*): the name and address
 * labels float inside the field and jump onto its border when filled
 * (memberpress/css/ui/theme.css, rules for label.placeholder-text and
 * .active). RS puts every label above its field, so they become normal
 * labels like the rest of that form. The !important below only undoes the
 * font-size !important in that file (16px, and 13px when active). */
body.eam-redesign :is(main, .mp_wrapper) .mp_wrapper .mp-form-row :is(.mp-address-group, .mp-form-row-group, .mp-form-row-group-wrapper) label.placeholder-text,
body.eam-redesign :is(main, .mp_wrapper) .mp_wrapper .mp-form-row.mp-address-group label.placeholder-text,
body.eam-redesign :is(main, .mp_wrapper) .mp_wrapper .mp-form-row.mp-address-group label.placeholder-text.active,
body.eam-redesign :is(main, .mp_wrapper) .mp_wrapper .mp-form-row .mp-form-row-group label.placeholder-text.active,
body.eam-redesign :is(main, .mp_wrapper) .mepr_coupon label.placeholder-text {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  display: block;
  margin: 0 0 10px;
  padding: 0;
  background: none;
  color: var(--rd-color-text);
  font-size: var(--rd-fs-body) !important;
  pointer-events: auto;
  transform: none;
  transition: none;
}

/* ReadyLaunch joins the address fields into one rounded block
 * (memberpress/css/readylaunch/checkout.css and theme.css,
 * ".mp-address-group .mp-form-row:first-child/:last-child .mepr-form-input",
 * (0,5,0)); with labels above, each field is its own square box. */
body.eam-redesign :is(main, .mp_wrapper) .mp-address-group .mp-form-row :is(input, select, textarea).mepr-form-input {
  border-radius: var(--rd-radius);
  box-shadow: none;
}

/* First and last name sit side by side (ReadyLaunch .mp-form-row-group is
 * a flex row with no gap); give them the grid gap, stack them on phones. */
body.eam-redesign :is(main, .mp_wrapper) .mp_wrapper .mp-form-row-group {
  gap: var(--rd-space-s);
}

body.eam-redesign :is(main, .mp_wrapper) .mp_wrapper .mp-form-row-group > .mp-form-row-group-wrapper {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

@media (max-width: 480px) {
  body.eam-redesign :is(main, .mp_wrapper) .mp_wrapper .mp-form-row-group {
    flex-direction: column;
  }
}

/* MemberPress puts the label (and its hidden error) in .mp-form-label. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) .mp-form-label {
  margin: 0;
}

/* Field rows: one rhythm (RS .form__row 16px). */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(.kb-advanced-form .kb-adv-form-field, .mepr-form .mp-form-row) {
  margin-bottom: var(--rd-space-s);
}

/* Labels on the indigo band stay white. */
body.eam-redesign main :is(.kb-row-layout-wrap.has-theme-palette1-background-color, .kb-row-layout-id1064_07bbd8-50) .kb-advanced-form label.kb-adv-form-label {
  color: var(--rd-white);
}

/* Required mark: RS puts a primary-colour asterisk after the label. */
body.eam-redesign main .kb-advanced-form .kb-adv-form-required {
  margin-left: var(--rd-space-2xs);
  color: var(--rd-color-primary);
}

body.eam-redesign main :is(.kb-row-layout-wrap.has-theme-palette1-background-color, .kb-row-layout-id1064_07bbd8-50) .kb-advanced-form .kb-adv-form-required {
  color: var(--rd-white);
}

/* Help text under a field. */
body.eam-redesign main :is(.kb-advanced-form .kb-adv-form-help, .mepr-form .mepr-form-input-description, .frm_forms .frm_description) {
  margin-top: var(--rd-space-2xs);
  color: var(--rd-color-text-70);
  font-size: var(--rd-fs-small);
  line-height: var(--rd-lh-body);
}

/* Per-field errors. MemberPress shows .cc-error with an inline style, so no
 * display here (account.css:818 makes the same point). */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(.cc-error, .mepr-form-has-errors, .kb-adv-form-field .kb-adv-form-error, .frm_forms .frm_error) {
  margin-top: var(--rd-space-2xs);
  color: var(--rd-error-text);
  font-size: var(--rd-fs-small);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-lh-body);
}

/* Form-level messages: error and success panels, square, functional colours only. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  .mepr_error, .mepr-error,
  .kb-adv-form-message.kb-adv-form-warning,
  .frm_forms .frm_error_style
) {
  margin: 0 0 var(--rd-space-s);
  padding: var(--rd-space-xs) var(--rd-space-s);
  border: var(--rd-border-width) solid var(--rd-error-border);
  border-radius: var(--rd-radius);
  background: var(--rd-error-bg);
  color: var(--rd-error-text);
  font-size: var(--rd-fs-body);
  line-height: var(--rd-lh-body);
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(
  .mepr_updated, .mepr-updated,
  .kb-adv-form-message.kb-adv-form-success,
  .frm_forms .frm_message
) {
  margin: 0 0 var(--rd-space-s);
  padding: var(--rd-space-xs) var(--rd-space-s);
  border: var(--rd-border-width) solid var(--rd-success-border);
  border-radius: var(--rd-radius);
  background: var(--rd-success-bg);
  color: var(--rd-success-text);
  font-size: var(--rd-fs-body);
  line-height: var(--rd-lh-body);
}

/* ==========================================================================
 * 5. Checkboxes and radios (RS .checkbox: 24px box, 12px primary mark)
 * ========================================================================== */

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) input:is([type="checkbox"], [type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--rd-check-size);
  height: var(--rd-check-size);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: var(--rd-border-width) solid var(--rd-border);
  border-radius: var(--rd-radius);
  background: var(--rd-color-surface);
  vertical-align: middle;
  cursor: pointer;
  transition: border-color var(--rd-dur-base) ease;
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) input[type="radio"] {
  border-radius: 50%;
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) input:is([type="checkbox"], [type="radio"])::before {
  content: "";
  width: var(--rd-check-dot);
  height: var(--rd-check-dot);
  border-radius: inherit;
  background: var(--rd-color-primary);
  transform: scale(0);
  transition: transform var(--rd-dur-fast) ease;
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) input:is([type="checkbox"], [type="radio"]):checked {
  border-color: var(--rd-color-primary);
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) input:is([type="checkbox"], [type="radio"]):checked::before {
  transform: scale(1);
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) input:is([type="checkbox"], [type="radio"]):hover:not(:disabled) {
  border-color: var(--rd-color-primary);
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) input:is([type="checkbox"], [type="radio"]):focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  box-shadow: var(--rd-focus-halo);
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) input:is([type="checkbox"], [type="radio"]):disabled {
  border-color: var(--rd-border-light);
  background: var(--rd-color-surface-muted);
  cursor: not-allowed;
}

/* The label that wraps a checkbox or radio (login "Remember Me",
 * MemberPress "Should address information appear on invoice?", account
 * status radios): regular weight, box and text on one line. */
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) label:has(> input:is([type="checkbox"], [type="radio"])),
body.eam-redesign .mp_wrapper .mp-form-row label:has(> input:is([type="checkbox"], [type="radio"])) {
  /* !important only undoes memberpress/css/ui/theme.css
   * ".mp_wrapper .mp-form-row label { display: inline !important }", which
   * let the invoice checkbox text wrap under the box (/register/*, /account/). */
  display: inline-flex !important;
  align-items: flex-start;
  gap: var(--rd-space-xs);
  min-height: var(--rd-check-size);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rd-color-text);
  font-size: var(--rd-fs-body);
  font-weight: var(--rd-fw-regular);
  line-height: var(--rd-check-size);
  cursor: pointer;
}

/* ==========================================================================
 * 6. Search fields in content
 * ========================================================================== */

/* Course Materials and Conferences toolbars: the label is the box, the
 * input inside is bare (eam-course-materials.css:131, eam-conferences.css:230). */
body.eam-redesign main :is(.eam-cm-search, .eam-conf-search) {
  box-sizing: border-box;
  min-height: var(--rd-field-h);
  padding: 0 var(--rd-field-pad);
  gap: var(--rd-space-xs);
  border: var(--rd-border-width) solid var(--rd-border);
  border-radius: var(--rd-radius);
  background: var(--rd-color-surface);
  color: var(--rd-color-text-70);
  cursor: text;
  transition: border-color var(--rd-dur-base) ease, box-shadow var(--rd-dur-base) ease;
}

body.eam-redesign main :is(.eam-cm-search, .eam-conf-search):hover {
  border-color: var(--rd-color-text-70);
}

body.eam-redesign main :is(.eam-cm-search, .eam-conf-search):focus-within {
  border-color: var(--rd-color-primary);
  box-shadow: inset 0 0 0 1px var(--rd-color-primary), var(--rd-focus-field);
  color: var(--rd-color-primary);
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(.eam-cm-search, .eam-conf-search) input[type="search"],
body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) :is(.eam-cm-search, .eam-conf-search) input[type="search"]:is(:hover, :focus, :focus-visible) {
  min-height: calc(var(--rd-field-h) - 2px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--rd-color-text);
}

/* Kadence search form (404, empty archives): the field takes the system
 * look (section 3); the magnifier sits over its right edge. */
body.eam-redesign main form.search-form {
  position: relative;
  max-width: 560px;
}

body.eam-redesign :is(main, .eam-login-form, .kadence-column_account_content_col .kt-inside-inner-col, .mp_wrapper) form.search-form input.search-field {
  padding-right: var(--rd-field-h);
}

body.eam-redesign main form.search-form .kadence-search-icon-wrap {
  color: var(--rd-color-text-70);
}

/* ==========================================================================
 * 7. MemberPress layout fixes inside the forms (no page layout)
 * ========================================================================== */

/* Login card: the submit runs the card width (eam-login.css:221). The space
 * above it sits on MemberPress's .submit wrapper (pages/login.css): a
 * margin-top here would lose to the button base's margin-block: 0. */
body.eam-redesign :is(main, .eam-login-form) .eam-login-form :is(input[type="submit"], .mepr-submit) {
  width: 100%;
}

/* Account profile: the "Save Profile" submit hugs its label with the button
 * base padding like the page's other primary buttons (undoes the 220px
 * minimum, account.css:783; design-a#12). */
body.eam-redesign .kadence-column_account_content_col .kt-inside-inner-col :is(input[type="submit"], .mepr-submit).mepr-share-button {
  min-width: 0;
  margin-top: var(--rd-space-s);
}

/* ReadyLaunch thank-you receipt (/thank-you/?trans_num=...): the Print link
 * is a primary button (sections 1 and 2; was MemberPress blue, rounded,
 * readylaunch/theme.css:516). Its icon follows the label colour. Hidden for
 * logged-out visitors: its admin-ajax action (mepr_download_invoice) has no
 * logged-out handler, so for them it answered 400 and did nothing. */
body.eam-redesign main .mepr-checkout-container a.mepr-invoice-print.mepr-button svg {
  color: currentColor;
}

/* Space before "Back to home" (MemberPress's own 1em lost to the base margin-block: 0). */
body.eam-redesign.mepr-pro-template main .mepr-checkout-container.thankyou a.mepr-invoice-print.mepr-button {
  margin-bottom: var(--rd-space-s);
}

body.eam-redesign:not(.logged-in) main .mepr-checkout-container.thankyou a.mepr-invoice-print.mepr-button {
  display: none; /* (0,6,3): beats the button base display in section 1, (0,6,1) */
}

/* ReadyLaunch checkout: the chosen payment option's frame is indigo (was
 * MemberPress blue, readylaunch/checkout.css:403). */
body.eam-redesign :is(main, .mp_wrapper) .mepr-payment-methods-radios label.checked {
  border-color: var(--rd-color-primary);
}

/* ReadyLaunch checkout: Sign Up runs full width on phones. */
@media (max-width: 480px) {
  body.eam-redesign .mp_wrapper :is(input[type="submit"], .mepr-submit) {
    width: 100%;
  }
}