/* Shared styles for auth pages (login, activation) */

body {
    background-color: var(--wa-color-surface-lowered);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-container {
    max-width: 460px;
    width: 100%;
    padding: var(--wa-space-l);
}

.auth-container--wide {
    max-width: 520px;
}

.auth-card {
    background: var(--wa-color-surface-raised);
    border-radius: var(--wa-border-radius-xl);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

@supports (corner-shape: squircle) {
    .auth-card {
        border-radius: 36px;
        corner-shape: squircle;
    }
}

.auth-header {
    background: var(--brand-gradient);
    color: white;
    padding: var(--wa-space-xl);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-logo {
    height: 60px;
    width: auto;
    -webkit-user-select: none;
    user-select: none;
}

.auth-body {
    padding: var(--wa-space-xl);
}

.auth-title {
    font-size: var(--wa-font-size-xl);
    font-weight: var(--wa-font-weight-bold);
    color: var(--wa-color-text-normal);
    margin-bottom: var(--wa-space-xs);
}

.auth-subtitle {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-m);
    margin-bottom: var(--wa-space-l);
}

/* Form layout */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-m);
}

/* Hide label for inputs that don't need one */
wa-input.no-label::part(form-control-label) {
    display: none;
}

.auth-form wa-button[type="submit"] {
    margin-top: var(--wa-space-xs);
}

/* Callout adjustments */
.auth-body wa-callout {
    margin-bottom: var(--wa-space-m);
}

.auth-body wa-callout::part(icon) {
    align-self: flex-start;
    padding-top: 0.15em;
}

/* Help text below form */
.auth-help {
    text-align: center;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    margin-top: var(--wa-space-l);
    line-height: var(--wa-line-height-normal);
}

/* Conditional fields panel */
.auth-conditional {
    padding: var(--wa-space-l);
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-l);
    border: 1px solid var(--wa-color-surface-border);
    margin-top: var(--wa-space-m);
}

@supports (corner-shape: squircle) {
    .auth-conditional {
        border-radius: 20px;
        corner-shape: squircle;
    }
}

.auth-conditional h3 {
    margin-bottom: var(--wa-space-m);
}

.auth-conditional-note {
    margin-top: var(--wa-space-m);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    line-height: var(--wa-line-height-normal);
}

/* Activation code link below login form */
.activation-code-link {
    text-align: center;
    margin-top: var(--wa-space-m);
    margin-bottom: 0;
    font-size: var(--wa-font-size-s);
}

.activation-code-link a {
    color: var(--wa-color-text-quiet);
}

.activation-code-link a:hover {
    color: var(--wa-color-text-link);
}