/* Shared layout for the auth/account flow pages (Login, Register, PolicyPrivacy, password
   recovery): one centered card, same spacing and divider style on all of them, matching the
   AuthCardStyle/AuthPageStyle look from the mobile app. */

.auth-page {
    display: flex;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem) 0;
}

.auth-card {
    width: min(100%, 30rem);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    background: var(--fc-card);
    border: 1px solid var(--fc-border);
    border-radius: 28px; /* AuthCardStyle: RoundRectangle 28 */
    padding: clamp(1.25rem, 4vw, 2.25rem);
    box-shadow: var(--gui-shadow);
}

/* GUI caps inputs at 430px; inside a card they span its width like the buttons, as on mobile. */
.auth-card .gui-input,
.auth-card .gui-phone {
    width: 100%;
}

/* Card plus what sits above it (artwork, avatar, title), as the Login/Register/EditProfile grids on mobile. */
.auth-stack {
    width: min(100%, 30rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auth-stack > .auth-card {
    width: 100%;
    box-sizing: border-box;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}

/* AuthArtworkStyle: 136px on phones, larger on wider screens. */
.auth-brand__artwork {
    width: clamp(8.5rem, 18vw, 11.5rem);
    height: auto;
}

/* ProfileAvatarHintLabelStyle. */
.auth-brand__hint {
    text-align: center;
}

/* AuthAccentStyle: short rounded bar in the brand color. */
.auth-accent {
    align-self: center;
    width: 72px;
    height: 6px;
    border-radius: 3px;
    background: var(--fc-green);
}

.gui-theme[data-theme="dark"] .auth-accent { background: var(--fc-mint); }
@media (prefers-color-scheme: dark) { .gui-theme[data-theme="system"] .auth-accent { background: var(--fc-mint); } }

/* Glyph above the title on the recovery screens (Custom1Label "@" / "•••" on mobile). */
.auth-card__icon {
    text-align: center;
}

.auth-card__section {
    margin-top: .5rem;
}

.auth-card__section-hint {
    margin-top: -.5rem;
}

/* ProfileAvatarFrameStyle: round frame with the brand-color stroke. */
.auth-avatar {
    all: unset;
    cursor: pointer;
    align-self: center;
    box-sizing: border-box;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    overflow: hidden;
    padding: 5px;
    border: 3px solid var(--fc-green);
    background: var(--fc-card);
}

.auth-avatar--large {
    width: 8.5rem;
    height: 8.5rem;
}

.auth-avatar:disabled {
    cursor: default;
}

.auth-avatar__image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Empty picture: the profile silhouette for the active theme (--fc-profile-placeholder). */
.auth-avatar__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--fc-profile-placeholder) center / contain no-repeat;
}

.auth-card__link-row {
    display: flex;
    justify-content: flex-end;
}

.auth-card__submit {
    width: 100%;
    text-align: center;
}

.auth-card__divider {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--fc-muted);
    font-size: .75rem;
}

.auth-card__divider::before,
.auth-card__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fc-border);
}

.auth-card__prompt {
    margin: 0;
    text-align: center;
    color: var(--fc-ink);
}

.auth-card__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.policy-card {
    width: min(100%, 48rem);
}

.policy-card__content {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--fc-border);
    border-radius: .75rem;
    padding: 1rem;
    color: var(--fc-ink);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.policy-card__accept {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--fc-ink);
}

@media (max-width: 26rem) {
    .auth-card__row {
        grid-template-columns: 1fr;
    }
}