/* ==========================================================================
   registration-forms.css — Retail / Wholesale / B2B signup + email verification
   Enqueued by TMC_Registration_Shortcode and TMC_Verification_Page.

   Design language: Fresh Market Editorial — cream paper, deep field green, one
   amber signal. The form is the product here, so the chrome stays quiet and the
   only colour decisions are the account-type accent and the error state.

   Every colour, radius and space below resolves against the tokens that
   class-enqueue-assets.php::css_variables() prints into <head>, so a token change
   moves this file with it.
   ========================================================================== */

/* ─── 1. Account-type theming ─────────────────────────────────────────────
 * --tmc-type is the only per-type variable. It drives the active tab, the section
 * numerals and the focus ring. The submit button deliberately ignores it and stays
 * --color-primary-dark: #FF8F00 on white is 3.08:1, which fails AA for button text,
 * and a button that changes colour per tab reads as a different action each time.
 * ---------------------------------------------------------------------- */

.tmc-reg {
    --tmc-type: var(--color-primary);
    --tmc-type-tint: rgba(46, 125, 50, 0.09);
    --tmc-paper: #FFFFFF;
    --tmc-rule: #DCE5D9;
    --tmc-ink: var(--color-text);
    --tmc-ink-soft: var(--color-text-muted);
    --tmc-field-h: 2.875rem;
    position: relative;
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-block: clamp(1.75rem, 5vw, 4rem);
    padding-inline: var(--container-pad);
    color: var(--tmc-ink);
    font-family: var(--font-body);
}

.tmc-reg[data-tmc-type="wholesale"] {
    --tmc-type: var(--color-wholesale);
    --tmc-type-tint: rgba(21, 101, 192, 0.09);
}

.tmc-reg[data-tmc-type="b2b"] {
    --tmc-type: var(--color-accent);
    --tmc-type-tint: rgba(255, 143, 0, 0.12);
}

/* ─── 2. Shell ──────────────────────────────────────────────────────────── */

.tmc-reg__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 2.5rem);
    align-items: start;
}

/* The theme caps every page entry at 760px so prose stays readable. That is right
 * for articles and wrong here: the two-column shell has to fit inside it, so the
 * fluid gap between aside and panel ate the form and made inputs narrower at 1440px
 * (141px) than at 768px (291px). .tmc-reg carries its own max-width, so releasing
 * the cap here cannot let the form run edge-to-edge. Browsers without :has() keep
 * the old single-column-at-desktop behaviour, which is still usable. */
.entry:has(.tmc-reg) {
    max-width: none;
}

@media (min-width: 1024px) {
    .tmc-reg__shell {
        /* A capped aside track, not a fraction: 0.62fr gave the pitch column 38% of
         * the row at 1024px and left the form narrower than it already is on a
         * tablet. The aside is three sentences and a list — it does not need to
         * grow, the form does. */
        grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
        gap: clamp(2.5rem, 4vw, 4.5rem);
    }
}

/* ─── 3. Aside — the value pitch ───────────────────────────────────────── */

.tmc-reg__aside {
    position: relative;
    padding: clamp(1.25rem, 3.5vw, 1.75rem);
    border-radius: var(--radius-lg);
    background: linear-gradient(142deg, #14501A 0%, #1B5E20 52%, #2E7D32 100%);
    color: #fff;
    overflow: hidden;
}

/* Hairline grain so the green band does not read as a flat block on OLED. */
.tmc-reg__aside::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 18px 18px;
}

.tmc-reg__aside > * {
    position: relative;
}

.tmc-reg__eyebrow {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

.tmc-reg__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: balance;
}

.tmc-reg__lede {
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    max-width: 34ch;
}

.tmc-reg__perks {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tmc-perk;
}

.tmc-reg__perks li {
    display: grid;
    grid-template-columns: 1.375rem minmax(0, 1fr);
    gap: 0.625rem;
    align-items: start;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.tmc-reg__perks li::before {
    counter-increment: tmc-perk;
    content: counter(tmc-perk, decimal-leading-zero);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-accent-light);
    padding-top: 0.1rem;
}

.tmc-reg__note {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* ─── 4. Panel ─────────────────────────────────────────────────────────── */

.tmc-registration-wrapper,
.tmc-reg__panel {
    min-width: 0;
    padding: clamp(1.25rem, 3.5vw, 2rem);
    background: var(--tmc-paper);
    border: 1px solid var(--tmc-rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    /* Querying the panel rather than the viewport is the point: in the two-column
     * shell the panel is much narrower than the window, so a viewport media query
     * put two fields side by side in 226px of space at 1024px. The panel is a grid
     * track sized by its container, never by its contents, so inline-size
     * containment here cannot cycle. */
    container-type: inline-size;
    container-name: tmc-panel;
}

.tmc-form-header {
    margin-bottom: 1.125rem;
}

.tmc-form-header__kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    background: var(--tmc-type-tint);
    color: var(--tmc-type);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tmc-form-subtitle {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--tmc-ink-soft);
}

/* ─── 5. Type switcher ────────────────────────────────────────────────────
 * Real links, not buttons that mutate state — the URL has always named the
 * application type, so a shared or bookmarked page stays correct.
 * ---------------------------------------------------------------------- */

.tmc-form-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
    padding: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--tmc-rule);
    border-radius: var(--radius-md);
}

.tmc-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: calc(var(--radius-md) - 3px);
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--tmc-ink-soft);
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.tmc-tab-btn:hover {
    color: var(--tmc-ink);
    background: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.tmc-tab-btn.active {
    background: var(--tmc-paper);
    color: var(--tmc-type);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--tmc-rule);
}

/* ─── 6. Sections ──────────────────────────────────────────────────────── */

.tmc-registration-form {
    display: grid;
    gap: clamp(1.5rem, 3.5vw, 2.25rem);
}

.tmc-form-section {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.tmc-form-section__legend {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    margin-bottom: 1.125rem;
    padding: 0 0 0.625rem;
    border-bottom: 1px solid var(--tmc-rule);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--tmc-ink);
}

.tmc-form-section__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.875rem;
    height: 1.375rem;
    padding-inline: 0.3125rem;
    border-radius: var(--radius-sm);
    background: var(--tmc-type-tint);
    color: var(--tmc-type);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.tmc-form-section--plain {
    display: grid;
    gap: 0.75rem;
}

/* Hidden by the JS visibility model. [hidden] alone loses to any later display
 * rule in this sheet, so it needs !important to mean anything. */
.tmc-reg [hidden],
.tmc-verification-container [hidden] {
    display: none !important;
}

/* ─── 7. Rows and groups ───────────────────────────────────────────────── */

.tmc-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.tmc-form-row + .tmc-form-row,
.tmc-form-row + .tmc-form-group,
.tmc-form-group + .tmc-form-row,
.tmc-form-group + .tmc-form-group {
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .tmc-form-row + .tmc-form-row,
    .tmc-form-row + .tmc-form-group,
    .tmc-form-group + .tmc-form-row,
    .tmc-form-group + .tmc-form-group {
        margin-top: 1.25rem;
    }
}

/* Two columns only once the panel can actually hold two usable fields — about
 * 26rem of content leaves each input under 200px, which is narrower than the
 * single-column phone layout. Browsers without container query support stay on one
 * column, which is degraded but never broken. */
@container tmc-panel (min-width: 33rem) {
    .tmc-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.tmc-form-group {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 0.375rem;
}

.tmc-form-group > label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--tmc-ink);
}

.tmc-form-group .required {
    color: var(--color-error);
    font-weight: 700;
}

.tmc-form-group .optional {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--tmc-ink-soft);
}

/* ─── 8. Fields ──────────────────────────────────────────────────────────
 * font-size stays at 1rem on every input at every width. Below 16px iOS Safari
 * zooms the viewport on focus and never zooms back out, which is the single most
 * common way a mobile form like this one breaks.
 * ---------------------------------------------------------------------- */

.tmc-field {
    position: relative;
    display: grid;
    min-width: 0;
}

.tmc-input {
    width: 100%;
    min-height: var(--tmc-field-h);
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--tmc-rule);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--tmc-ink);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.45;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tmc-input::placeholder {
    color: #9AA79A;
    opacity: 1;
}

.tmc-input:hover:not(:focus) {
    border-color: #C3D2C1;
}

.tmc-input:focus {
    outline: none;
    background: var(--tmc-paper);
    border-color: var(--tmc-type);
    box-shadow: 0 0 0 3px var(--tmc-type-tint);
}

select.tmc-input {
    appearance: none;
    padding-right: 2.375rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1.5 2.5 6 6.5l4.5-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    cursor: pointer;
}

select.tmc-input option[value=""] {
    color: var(--tmc-ink-soft);
}

textarea.tmc-input,
.tmc-input--area {
    min-height: 5.25rem;
    padding-block: 0.75rem;
    resize: vertical;
    line-height: 1.6;
}

/* +977 adornment. It is a hint, not part of the value — the controller stores
 * whatever digits the applicant typed. */
.tmc-input--prefixed {
    padding-left: 3.5rem;
}

.tmc-field__prefix {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.875rem;
    transform: translateY(-50%);
    padding-right: 0.625rem;
    margin-top: 0.0625rem;
    border-right: 1px solid var(--tmc-rule);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tmc-ink-soft);
    pointer-events: none;
}

.tmc-field__status {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-success);
    pointer-events: none;
}

.tmc-field__status[data-state="checking"],
.tmc-field__status[data-state="taken"],
.tmc-field__status[data-state="free"] {
    display: inline-flex;
}

.tmc-field__status[data-state="checking"] {
    color: var(--tmc-ink-soft);
}

.tmc-field__status[data-state="taken"] {
    color: var(--color-error);
}

.tmc-field__status::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='M7.9 14.6 3.4 10.1l1.4-1.4 3.1 3.1 6.9-6.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='M7.9 14.6 3.4 10.1l1.4-1.4 3.1 3.1 6.9-6.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tmc-field__status[data-state="checking"]::before {
    -webkit-mask: none;
    mask: none;
    background-color: transparent;
    border: 2px solid var(--tmc-rule);
    border-top-color: var(--tmc-type);
    border-radius: var(--radius-full);
    animation: tmc-spin 0.7s linear infinite;
}

.tmc-field__status[data-state="taken"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='M10 1.7a8.3 8.3 0 1 0 0 16.6 8.3 8.3 0 0 0 0-16.6Zm3.9 10.5-1.3 1.3L10 12.2l-2.6 2.6-1.3-1.3L8.7 10 6.1 7.4l1.3-1.3L10 8.7l2.6-2.6 1.3 1.3L11.3 10Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='M10 1.7a8.3 8.3 0 1 0 0 16.6 8.3 8.3 0 0 0 0-16.6Zm3.9 10.5-1.3 1.3L10 12.2l-2.6 2.6-1.3-1.3L8.7 10 6.1 7.4l1.3-1.3L10 8.7l2.6-2.6 1.3 1.3L11.3 10Z'/%3E%3C/svg%3E");
}

/* ─── 9. Field states ──────────────────────────────────────────────────── */

.tmc-input.is-error,
.tmc-input.error {
    border-color: var(--color-error);
    background: rgba(211, 47, 47, 0.03);
}

.tmc-input.is-error:focus,
.tmc-input.error:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.13);
}

.tmc-input.is-ok,
.tmc-input.success {
    border-color: var(--color-success);
    background: rgba(56, 142, 60, 0.03);
}

.tmc-help-text {
    min-height: 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--tmc-ink-soft);
}

.tmc-help-text:empty {
    display: none;
}

.tmc-help-text.is-error,
.tmc-help-text.error {
    color: var(--color-error);
    font-weight: 600;
}

.tmc-help-text.is-ok,
.tmc-help-text.success {
    color: var(--color-success);
    font-weight: 600;
}

/* ─── 10. Checkbox ─────────────────────────────────────────────────────── */

.tmc-checkbox-group {
    gap: 0.375rem;
}

.tmc-check {
    display: grid;
    grid-template-columns: 1.375rem minmax(0, 1fr);
    align-items: start;
    gap: 0.625rem;
    cursor: pointer;
    font-weight: 400;
}

/* The real control stays in the accessibility tree and keeps keyboard focus;
 * only its paint is replaced. */
.tmc-check input[type="checkbox"] {
    appearance: none;
    width: 1.375rem;
    height: 1.375rem;
    min-width: 1.375rem;
    margin: 0;
    border: 1px solid var(--tmc-rule);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.tmc-check input[type="checkbox"]::after {
    content: "";
    width: 0.8125rem;
    height: 0.8125rem;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='M7.9 14.6 3.4 10.1l1.4-1.4 3.1 3.1 6.9-6.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='M7.9 14.6 3.4 10.1l1.4-1.4 3.1 3.1 6.9-6.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: scale(0);
    transition: transform 0.14s ease-out;
}

.tmc-check input[type="checkbox"]:checked {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.tmc-check input[type="checkbox"]:checked::after {
    transform: scale(1);
}

.tmc-check input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--tmc-type-tint);
    border-color: var(--tmc-type);
}

.tmc-check input[type="checkbox"].is-error {
    border-color: var(--color-error);
    background: rgba(211, 47, 47, 0.06);
}

.tmc-check__text {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--tmc-ink);
    padding-top: 0.125rem;
}

.tmc-check__text a {
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tmc-check__text a:hover {
    color: var(--color-primary);
}

/* ─── 11. Messages ─────────────────────────────────────────────────────── */

.tmc-form-errors,
.tmc-verification-errors {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(211, 47, 47, 0.05);
    box-shadow: inset 3px 0 0 var(--color-error);
    color: #9C1C1C;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.tmc-form-errors p,
.tmc-verification-errors p {
    margin: 0;
    font-weight: 600;
}

/* Both boxes receive programmatic focus when a submit is rejected. The panel
 * itself is already visually distinct, so a second ring adds noise. */
.tmc-form-errors:focus,
.tmc-form-success:focus,
.tmc-verification-errors:focus,
.tmc-verification-success:focus {
    outline: none;
}

.tmc-form-errors ul,
.tmc-verification-errors ul {
    margin: 0.375rem 0 0;
    padding-left: 1.125rem;
}

.tmc-form-errors li,
.tmc-verification-errors li {
    margin: 0.25rem 0;
}

.tmc-form-success,
.tmc-verification-success {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: rgba(56, 142, 60, 0.07);
    box-shadow: inset 3px 0 0 var(--color-success);
    text-align: left;
}

.tmc-success-message {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-primary-dark);
}

.tmc-form-help,
.tmc-verification-help {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--tmc-ink-soft);
    text-align: center;
}

.tmc-form-help a,
.tmc-verification-help a,
.tmc-notice a {
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tmc-form-help a:hover,
.tmc-verification-help a:hover,
.tmc-notice a:hover {
    color: var(--color-primary);
}

/* Only reachable when the browser cannot run the submit handler. */
.tmc-reg__nojs {
    display: none;
    margin: 0;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(245, 124, 0, 0.08);
    box-shadow: inset 3px 0 0 var(--color-warning);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #7A4A00;
}

html:not(.tmc-js) .tmc-reg__nojs {
    display: block;
}

html:not(.tmc-js) .tmc-reg__actions {
    display: none;
}

/* ─── 12. Submit ───────────────────────────────────────────────────────── */

.tmc-reg__actions {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .tmc-reg__actions {
        justify-items: start;
    }
}

.tmc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1.75rem;
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

@media (min-width: 640px) {
    .tmc-btn {
        width: auto;
        min-width: 18rem;
    }
}

.tmc-btn-primary {
    background: var(--color-primary-dark);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.tmc-btn-primary:hover:not(:disabled) {
    background: #14501A;
    box-shadow: var(--shadow-md);
}

.tmc-btn-primary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: none;
}

.tmc-btn:focus-visible {
    outline: 3px solid var(--tmc-type);
    outline-offset: 2px;
}

.tmc-btn:disabled {
    background: var(--color-neutral-light);
    color: var(--color-neutral-mid);
    cursor: progress;
    box-shadow: none;
}

.tmc-btn-loader {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tmc-spinner {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: var(--radius-full);
    animation: tmc-spin 0.7s linear infinite;
}

@keyframes tmc-spin {
    to { transform: rotate(360deg); }
}

/* ─── 13. Notices (logged-in state, server errors) ─────────────────────── */

.tmc-notice {
    max-width: 42rem;
    margin: 1.5rem auto;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.6;
}

.tmc-notice p {
    margin: 0;
}

.tmc-notice-info {
    background: var(--color-surface);
    box-shadow: inset 3px 0 0 var(--color-primary);
    color: var(--tmc-ink, var(--color-text));
}

.tmc-notice-error {
    background: rgba(211, 47, 47, 0.05);
    box-shadow: inset 3px 0 0 var(--color-error);
    color: #9C1C1C;
}

.tmc-notice-success {
    background: rgba(56, 142, 60, 0.07);
    box-shadow: inset 3px 0 0 var(--color-success);
    color: var(--color-primary-dark);
}

/* ─── 14. Email verification page ─────────────────────────────────────────
 * TMC_Verification_Page reuses the atoms above (.tmc-input, .tmc-btn,
 * .tmc-form-group) so only its own layout needs rules here. It is rendered by a
 * different shortcode on a different page, so .tmc-reg is not present — the type
 * accent is set locally instead.
 * ---------------------------------------------------------------------- */

.tmc-verification-container {
    --tmc-type: var(--color-primary);
    --tmc-type-tint: rgba(46, 125, 50, 0.09);
    --tmc-rule: #DCE5D9;
    --tmc-paper: #FFFFFF;
    --tmc-ink-soft: var(--color-text-muted);
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
    padding-block: clamp(1.75rem, 5vw, 4rem);
    padding-inline: var(--container-pad);
    font-family: var(--font-body);
    color: var(--color-text);
}

.tmc-verification-wrapper {
    padding: clamp(1.25rem, 3.5vw, 2rem);
    background: var(--tmc-paper);
    border: 1px solid var(--tmc-rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.tmc-verification-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.125rem;
    border-bottom: 1px solid var(--tmc-rule);
}

.tmc-verification-header h1 {
    margin: 0 0 0.375rem;
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-primary-dark);
}

.tmc-verification-header p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tmc-ink-soft);
}

.tmc-verification-info {
    margin-bottom: 1.5rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.tmc-verification-info p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.tmc-verification-info p + p {
    margin-top: 0.125rem;
}

.tmc-verification-section {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.tmc-verification-section legend {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    margin-bottom: 1.125rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--tmc-rule);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.tmc-verification-section .tmc-form-group + .tmc-form-group {
    margin-top: 1.125rem;
}

.tmc-verification-section .tmc-checkbox-group {
    margin-top: 1.25rem;
}

.tmc-verification-errors,
.tmc-verification-success {
    margin-bottom: 1.25rem;
}

.tmc-verification-help {
    margin-top: 1rem;
}

/* Static end-states of the verification page — no JS involved, so these are not
 * the .tmc-form-errors boxes the handler toggles. */
.tmc-verification-note,
.tmc-verification-alert {
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.tmc-verification-note {
    background: var(--color-surface);
    box-shadow: inset 3px 0 0 var(--color-primary-dark);
    color: var(--color-text);
}

.tmc-verification-alert {
    background: rgba(211, 47, 47, 0.05);
    box-shadow: inset 3px 0 0 var(--color-error);
    color: #9C1C1C;
    font-weight: 600;
}

.tmc-verification-note p,
.tmc-verification-alert p {
    margin: 0;
}

.tmc-verification-note a {
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: underline;
}

.tmc-verify-submit {
    width: 100%;
}

/* ─── 15. Motion and print ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .tmc-reg *,
    .tmc-verification-container * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .tmc-btn-primary:active:not(:disabled) {
        transform: none;
    }
}

@media print {
    .tmc-form-tabs,
    .tmc-reg__actions,
    .tmc-form-help {
        display: none;
    }

    .tmc-reg__aside {
        background: none;
        color: #000;
        border: 1px solid #999;
    }

    .tmc-reg__aside::before {
        display: none;
    }

    .tmc-reg__title,
    .tmc-reg__lede,
    .tmc-reg__perks li,
    .tmc-reg__note {
        color: #000;
    }
}