/* Shared action controls for the login, registration, and password-reset flows. */
.auth-action,
.auth-link-action {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 15px;

    background-color: var(--border-accent);
    color: var(--text-primary);
    border: 2px solid var(--auth-action-border, var(--link-color));
    border-radius: 4px;
    box-shadow: none;
    cursor: pointer;

    font: 700 18px/1.2 monospace;
    text-align: center;
    text-indent: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease,
        color 0.3s ease, box-shadow 0.3s ease;
}

.auth-action:hover:not(:disabled) {
    background-color: var(--link-color);
}

.auth-action:focus-visible,
.auth-link-action:focus-visible {
    outline: 3px solid var(--hover-color);
    outline-offset: 3px;
}

.auth-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.auth-link-action {
    width: auto;
    padding: 10px 12px;
    background: transparent;
    color: var(--text-secondary);
    border: 0;
    border-radius: 4px;
    font: 400 14px/1.3 monospace;
    text-decoration: underline;
    box-shadow: none;
}

.auth-link-action:hover {
    color: var(--hover-color);
}