/**
 * Registration page refinements (frontend only, so the sukanTheme
 * `--sukan-*` custom properties are available). Generic card styling stays
 * with the theme; this sheet owns the ORCID connect block, the core ORCID
 * button appearance, the submit-row hint and the PC horizontal form layout.
 *
 * The card spans the full frontend content container. On PC (>=48rem) the
 * official field markup (`fieldset .fields > div > label > .label + input`)
 * is laid out on a left-aligned grid that fills the card: every row block
 * stretches to the card's content width, with a 10rem left-aligned label
 * column and the control column flex-filling the rest. On narrow screens
 * the official vertical stacking is kept.
 */

.page_register.sukan_register {
    inline-size: 100%;
    max-inline-size: none;
}

.page_register.sukan_register > h1 {
    text-align: start;
}

.sukan_register_orcid {
    align-items: flex-start;
    background: var(--sukan-color-surface-subtle, #f9fafb);
    border: 1px solid var(--sukan-color-border-subtle, #e5e7eb);
    border-radius: var(--sukan-radius-medium, 0.5rem);
    display: flex;
    gap: var(--sukan-space-4, 1rem);
    margin-block-end: var(--sukan-space-5, 1.5rem);
    padding: var(--sukan-space-5, 1.5rem);
}

.sukan_register_orcid__badge {
    block-size: 2.5rem;
    flex: none;
    inline-size: 2.5rem;
    margin-block-start: 0.15rem;
}

.sukan_register_orcid__body {
    min-inline-size: 0;
}

.sukan_register_orcid__body > h2 {
    font-size: var(--sukan-font-size-h4, 1.125rem);
    margin: 0 0 var(--sukan-space-2, 0.5rem);
}

.sukan_register_orcid__body > p {
    color: var(--sukan-color-text-muted, #6b7280);
    font-size: var(--sukan-font-size-small, 0.875rem);
    margin: 0 0 var(--sukan-space-4, 1rem);
}

/* Brand the core ORCID connect control without overriding its template. */
.sukan_register_orcid #connect-orcid-button.pkp_button {
    align-items: center;
    background: var(--sukan-color-surface, #fff);
    border: 1px solid #a6ce39;
    border-radius: var(--sukan-radius-small, 0.25rem);
    color: #3c5a00;
    cursor: pointer;
    display: inline-flex;
    font-weight: var(--sukan-font-weight-strong, 700);
    gap: var(--sukan-space-2, 0.5rem);
    justify-content: center;
    line-height: var(--sukan-line-height-control, 1.25);
    min-block-size: var(--sukan-touch-target, 2.75rem);
    padding: 0.6rem 1.25rem;
    text-decoration: none;
    transition: background-color var(--sukan-duration-standard, 160ms) ease,
        color var(--sukan-duration-standard, 160ms) ease;
}

.sukan_register_orcid #connect-orcid-button.pkp_button:hover,
.sukan_register_orcid #connect-orcid-button.pkp_button:focus-visible {
    background: #a6ce39;
    color: #1f2d00;
}

.sukan_register_orcid #connect-orcid-button.pkp_button:focus-visible {
    outline: var(--sukan-focus-width, 0.1875rem) solid var(--sukan-color-focus, #005fcc);
    outline-offset: var(--sukan-focus-offset, 0.1875rem);
}

.sukan_register_orcid #connect-orcid-button .orcid_button_container {
    align-items: center;
    display: inline-flex;
    gap: var(--sukan-space-2, 0.5rem);
    padding: 0;
}

.sukan_register_orcid__body > a {
    color: var(--sukan-color-text-muted, #6b7280);
    font-size: var(--sukan-font-size-small, 0.875rem);
    margin-inline-start: var(--sukan-space-3, 0.75rem);
}

.sukan_register__loginHint {
    align-items: center;
    color: var(--sukan-color-text-muted, #6b7280);
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sukan-space-2, 0.5rem);
}

@media (min-width: 48rem) {
    /* Horizontal fields: 10rem left-aligned label column + flex-fill control. */
    .page_register.sukan_register .cmp_form.register fieldset.identity .fields > div:not(.optin) > label,
    .page_register.sukan_register .cmp_form.register fieldset.login .fields > div:not(.optin) > label,
    .page_register.sukan_register .cmp_form.register fieldset.reviewer .fields > div:not(.optin) > label {
        align-items: center;
        display: flex;
        gap: var(--sukan-space-4, 1rem);
    }

    .page_register.sukan_register .cmp_form.register fieldset.identity .fields > div:not(.optin) > label > .label,
    .page_register.sukan_register .cmp_form.register fieldset.login .fields > div:not(.optin) > label > .label,
    .page_register.sukan_register .cmp_form.register fieldset.reviewer .fields > div:not(.optin) > label > .label {
        flex: 0 0 10rem;
        margin: 0;
        text-align: start;
    }

    .page_register.sukan_register .cmp_form.register fieldset.identity .fields > div:not(.optin) > label > :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
    .page_register.sukan_register .cmp_form.register fieldset.login .fields > div:not(.optin) > label > :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
    .page_register.sukan_register .cmp_form.register fieldset.reviewer .fields > div:not(.optin) > label > :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
        flex: 1 1 0;
        inline-size: auto;
        min-inline-size: 0;
    }

    /* Checkbox groups stay full-row, indented to the control column. */
    .page_register.sukan_register .cmp_form.register fieldset.consent .fields,
    .page_register.sukan_register .cmp_form.register fieldset.reviewer #reviewerOptinGroup {
        padding-inline-start: 11rem;
    }

    /* Submit row aligns with the control column; the button keeps a
       comfortable natural width instead of stretching to the row. */
    .page_register.sukan_register .cmp_form.register > .buttons {
        box-sizing: border-box;
        flex-wrap: wrap;
        padding-inline-start: 11rem;
    }

    .page_register.sukan_register .cmp_form.register > .buttons .submit {
        flex: 0 1 auto;
        min-inline-size: 14rem;
    }
}

@media (max-width: 30rem) {
    .sukan_register_orcid {
        flex-direction: column;
        padding: var(--sukan-space-4, 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sukan_register_orcid #connect-orcid-button.pkp_button {
        transition: none;
    }
}