/* Auth: split, 100vh без скролла страницы, слева одно фото (случайное при загрузке), справа форма (UI Kit). */

:root {
    --gc-auth-form-max-width: 28rem;
    --gc-auth-legal-max-width: 44rem;
    --gc-auth-split-inset: var(--space-4);
}

/* Фон формы: на wrapper (boot / visit overlay без body-класса) + body.gc-auth-body (live). */
.gc-auth-split-wrapper,
body.gc-auth-body {
    --gc-auth-form-bg: var(--surface-canvas);
}

html[data-theme="light"] .gc-auth-split-wrapper,
html[data-theme="light"] body.gc-auth-body {
    --gc-auth-form-bg: var(--surface-secondary);
}

html:has(body.gc-auth-body),
body.gc-auth-body {
    height: 100%;
}

body.gc-auth-body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--gc-auth-form-bg);
}

.gc-auth-split-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    background: var(--gc-auth-form-bg);
    display: flex;
    flex-direction: column;
    padding: max(var(--gc-auth-split-inset), env(safe-area-inset-top, 0px))
        max(var(--gc-auth-split-inset), env(safe-area-inset-right, 0px))
        max(var(--gc-auth-split-inset), env(safe-area-inset-bottom, 0px))
        max(var(--gc-auth-split-inset), env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

.gc-auth-split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--gc-auth-split-inset);
}

.gc-auth-chrome {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
}

.gc-auth-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-6);
}

/* Document: chrome/footer на одной вертикали с контентом */
.gc-auth-split-wrapper--document .gc-auth-chrome,
.gc-auth-split-wrapper--document .gc-auth-footer {
    padding-inline: var(--space-6);
}

/* Фото — скруглённый блок, не фон колонки / viewport */
.gc-auth-left {
    position: relative;
    overflow: hidden;
    min-height: 0;
    border-radius: var(--radius-16);
    background: var(--surface-control);
}

.gc-auth-left-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gc-auth-left-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--fill-emphasis) 24%, transparent);
    z-index: 1;
    pointer-events: none;
}

.gc-auth-right {
    position: relative;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
}

.gc-auth-right-inner {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    padding: var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    overflow: auto;
    box-sizing: border-box;
}

.gc-auth-messages,
.gc-auth-slot,
.gc-auth-links {
    width: 100%;
    max-width: var(--gc-auth-form-max-width);
}

.gc-auth-slot--legal {
    flex: 1 1 auto;
    min-height: 0;
    max-width: var(--gc-auth-legal-max-width);
    justify-content: flex-start;
}

.gc-auth-brand-logo {
    display: inline-flex;
    line-height: 0;
    text-decoration: none;
    color: inherit;
}

.gc-auth-brand-logo img {
    width: 120px;
    height: auto;
}

/* По умолчанию desktop-логотип зависит от темы, на мобиле — mobile-логотип */
.gc-auth-brand-logo .gc-auth-logo-desktop-dark,
.gc-auth-brand-logo .gc-auth-logo-desktop-light,
.gc-auth-brand-logo .gc-auth-logo-mobile {
    width: 120px;
    height: auto;
    display: none !important;
}

.gc-auth-brand-logo .gc-auth-logo-desktop-dark {
    display: block !important;
}

[data-theme="light"] .gc-auth-brand-logo .gc-auth-logo-desktop-dark {
    display: none !important;
}

[data-theme="light"] .gc-auth-brand-logo .gc-auth-logo-desktop-light {
    display: block !important;
}

.gc-auth-theme-toggle-light {
    color: var(--text-on-solid);
    border-color: color-mix(in srgb, var(--text-on-solid) 35%, transparent);
    background: color-mix(in srgb, var(--fill-emphasis) 22%, transparent);
}

.gc-auth-theme-toggle-light:hover {
    color: var(--text-on-solid);
    border-color: color-mix(in srgb, var(--text-on-solid) 45%, transparent);
    background: color-mix(in srgb, var(--fill-emphasis) 36%, transparent);
}

.gc-auth-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gc-auth-slot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.gc-auth-links {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
}

.gc-auth-links a {
    text-decoration: none;
}

.gc-auth-right-inner .gc-form-section {
    margin-bottom: 0;
}

.gc-auth-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.gc-auth-card-title {
    margin: 0;
    text-align: left;
    font-weight: 700;
    font-size: var(--font-size-24);
    line-height: 1.2;
}

.gc-auth-hint {
    margin: 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    line-height: 1.5;
}

.gc-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.gc-auth-form .gc-input {
    font-size: var(--font-size-base);
}

.gc-auth-form .gc-checkbox-wrapper {
    margin-bottom: 0;
    align-items: flex-start;
}

.gc-auth-submit {
    width: 100%;
}

@media (max-width: 991px) {
    body.gc-auth-body {
        background: var(--fill-emphasis);
    }

    .gc-auth-split-wrapper {
        padding: 0;
        background: transparent;
        min-height: 100%;
        min-height: 100dvh;
    }

    .gc-auth-split {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 100%;
        min-height: 100dvh;
        height: auto;
        gap: 0;
    }

    /* Full-bleed фото: сверху слабый оверлей, под формой — плотный, но полупрозрачный */
    .gc-auth-left {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        min-height: 100dvh;
        aspect-ratio: auto;
        flex: none;
        border-radius: 0;
        z-index: 0;
    }

    .gc-auth-left-overlay {
        background:
            linear-gradient(
                to bottom,
                color-mix(in srgb, var(--fill-emphasis) 22%, transparent) 0%,
                color-mix(in srgb, var(--fill-emphasis) 28%, transparent) 30%,
                color-mix(in srgb, var(--fill-emphasis) 78%, transparent) 44%,
                color-mix(in srgb, var(--fill-emphasis) 82%, transparent) 100%
            );
    }

    .gc-auth-right {
        position: relative;
        z-index: 2;
        flex: 1 1 auto;
        min-height: 100%;
        min-height: 100dvh;
        background: transparent;
        overflow: visible;
        padding: calc(var(--space-4) + env(safe-area-inset-top, 0px))
            calc(var(--space-4) + env(safe-area-inset-right, 0px))
            calc(var(--space-8) + env(safe-area-inset-bottom, 0px))
            calc(var(--space-4) + env(safe-area-inset-left, 0px));
        box-sizing: border-box;
    }

    .gc-auth-chrome,
    .gc-auth-footer {
        padding: 0;
    }

    .gc-auth-chrome .theme-toggle {
        color: var(--text-on-scrim);
        border-color: color-mix(in srgb, var(--text-on-scrim) 35%, transparent);
        background: color-mix(in srgb, var(--fill-emphasis) 22%, transparent);
    }

    .gc-auth-chrome .theme-toggle:hover {
        color: var(--text-on-scrim);
        border-color: color-mix(in srgb, var(--text-on-scrim) 45%, transparent);
        background: color-mix(in srgb, var(--fill-emphasis) 36%, transparent);
    }

    .gc-auth-footer {
        /* Язычок из-под формы, как neutral continuation у карточек. */
        margin-top: calc(-1 * var(--radius-16));
        margin-inline: var(--space-4);
        padding-top: var(--radius-16);
        justify-content: center;
        background: var(--tint-tinted-neutral);
        border-radius: 0 0 var(--radius-16) var(--radius-16);
    }

    .gc-auth-footer .gc-auth-legal {
        width: 100%;
    }

    .gc-auth-footer .gc-auth-legal .gc-dropdown-toggle {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px var(--space-3) !important;
        font-size: var(--font-size-12) !important;
        line-height: 20px !important;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary) !important;
        border: 0 !important;
        border-radius: 0 0 var(--radius-16) var(--radius-16) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .gc-auth-footer .gc-auth-legal .gc-dropdown-toggle:hover,
    .gc-auth-footer .gc-auth-legal .gc-dropdown-toggle[data-state="open"] {
        color: var(--text-primary) !important;
        background: color-mix(in srgb, var(--fill-primary) 6%, transparent) !important;
    }

    .gc-auth-slot {
        justify-content: flex-start;
        flex: 0 0 auto;
    }

    .gc-auth-right-inner {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        margin-top: auto;
        min-height: 0;
        width: 100%;
        padding: var(--space-4);
        gap: var(--space-6);
        justify-content: flex-start;
        overflow: visible;
        background-color: var(--surface-primary);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-16);
        box-shadow: 0 4px 12px rgb(0 0 0 / 18%), 0 16px 40px rgb(0 0 0 / 24%);
    }

    .gc-auth-messages,
    .gc-auth-slot,
    .gc-auth-links {
        max-width: 100%;
    }

    .gc-auth-brand-logo .gc-auth-logo-desktop-dark,
    .gc-auth-brand-logo .gc-auth-logo-desktop-light,
    [data-theme="light"] .gc-auth-brand-logo .gc-auth-logo-desktop-dark,
    [data-theme="light"] .gc-auth-brand-logo .gc-auth-logo-desktop-light {
        display: none !important;
    }

    .gc-auth-brand-logo .gc-auth-logo-mobile {
        display: block !important;
    }

    .gc-auth-card {
        gap: var(--space-6);
        border-radius: var(--radius-16);
    }

    .gc-auth-links {
        margin-top: var(--space-4);
    }

    .gc-auth-card-title {
        font-size: var(--font-size-20);
    }

    .gc-auth-form {
        gap: var(--space-4);
    }

    .gc-auth-right-inner .gc-form-section.gc-form-section-card.gc-auth-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        background: transparent;
        border-color: transparent;
    }

    .gc-auth-right-inner .gc-form-section.gc-form-section-card.gc-auth-card .gc-form-label,
    .gc-auth-right-inner .gc-form-section.gc-form-section-card.gc-auth-card .gc-auth-card-title,
    .gc-auth-right-inner .gc-form-section.gc-form-section-card.gc-auth-card .gc-auth-hint {
        color: var(--text-primary);
    }
}

/* Shooter ID на странице регистрации — компактные ячейки (не глобальные 88px из styles.css) */
.gc-auth-card .shooter-id-container {
    display: flex;
    gap: var(--space-1);
    width: 100%;
}

.gc-auth-card .gc-auth-shooter-id-input {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: var(--font-size-18);
    font-weight: 600;
    height: 2.75rem;
    line-height: 2.75rem;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Модалка входа (челлендж и др.): split 50/50 как /login, только gap
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .gc-modal.gc-auth-modal .modal-dialog {
        width: min(56rem, 92vw);
        max-width: min(56rem, 92vw);
    }
}

.gc-modal.gc-auth-modal .modal-content.gc-auth-modal-content {
    padding: 0;
    overflow: hidden;
}

.gc-auth-modal-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: min(32rem, var(--gc-modal-content-max-height));
    max-height: var(--gc-modal-content-max-height);
}

@media (min-width: 768px) {
    .gc-modal.gc-auth-modal .gc-auth-modal-split {
        min-height: min(38rem, calc(var(--gc-modal-content-max-height) - 0.5rem));
    }
}

.gc-auth-modal-split__panel {
    min-width: 0;
    min-height: 0;
}

.gc-auth-modal-split__panel--visual {
    position: relative;
    overflow: hidden;
    background-color: var(--surface-control);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gc-auth-modal-split__visual-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--fill-emphasis) 28%, transparent);
    pointer-events: none;
}

.gc-auth-modal-split__panel--form {
    display: flex;
    flex-direction: column;
    background: var(--gc-auth-form-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gc-auth-modal-split__form-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: var(--space-6);
    gap: var(--space-4);
    box-sizing: border-box;
}

.gc-auth-modal-split__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.gc-auth-modal-split__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.gc-auth-modal-split__alerts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gc-auth-modal-split__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.gc-auth-modal .gc-form-section {
    margin: 0;
}

.gc-auth-modal .gc-form-section.gc-form-section-card.gc-auth-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

.gc-auth-modal-split__footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.gc-auth-modal-split__footer .gc-auth-links {
    margin: 0;
    width: 100%;
    max-width: none;
}

@media (max-width: 767.98px) {
    .gc-auth-modal-split {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(9rem, 28vh) minmax(0, 1fr);
        min-height: 0;
        max-height: none;
    }

    .gc-auth-modal-split__form-inner {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .gc-auth-modal-split__main {
        justify-content: flex-start;
    }

    .gc-auth-modal .gc-auth-card {
        gap: var(--space-6);
    }
}

/* Legal documents: одноколоночный chrome без фото */
.gc-auth-split-wrapper--document {
    background: var(--surface-page);
}

body.gc-legal-body {
    --gc-auth-form-bg: var(--surface-page);
    background: var(--surface-page);
}

.gc-auth-split--document {
    grid-template-columns: 1fr;
    flex: 0 0 auto;
    min-height: auto;
    height: auto;
}

.gc-auth-split-wrapper--document .gc-auth-right {
    overflow: visible;
    min-height: auto;
    height: auto;
}

.gc-auth-split-wrapper--document .gc-auth-right-inner {
    align-items: stretch;
    justify-content: flex-start;
    max-width: none;
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
    /* Один ритм с chrome/footer (space/6), не space/2 сверху */
    padding: var(--space-6);
}

.gc-auth-split-wrapper--document .gc-auth-slot--legal {
    max-width: none;
    width: 100%;
}

@media (max-width: 991px) {
    body.gc-legal-body {
        background: var(--surface-page);
    }

    .gc-auth-split-wrapper--document {
        padding: max(var(--gc-auth-split-inset), env(safe-area-inset-top, 0px))
            max(var(--gc-auth-split-inset), env(safe-area-inset-right, 0px))
            max(var(--gc-auth-split-inset), env(safe-area-inset-bottom, 0px))
            max(var(--gc-auth-split-inset), env(safe-area-inset-left, 0px));
        background: var(--surface-page);
    }

    .gc-auth-split-wrapper--document .gc-auth-split {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 0;
    }

    .gc-auth-split-wrapper--document .gc-auth-right {
        min-height: 0;
        padding: 0;
        background: transparent;
    }

    .gc-auth-split-wrapper--document .gc-auth-chrome,
    .gc-auth-split-wrapper--document .gc-auth-footer {
        padding: var(--space-2) 0;
        margin: 0;
        background: transparent;
        border-radius: 0;
    }

    .gc-auth-split-wrapper--document .gc-auth-chrome .theme-toggle {
        color: var(--text-primary);
        border-color: var(--border-default);
        background: var(--surface-primary);
    }

    .gc-auth-split-wrapper--document .gc-auth-right-inner {
        margin-top: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .gc-auth-split-wrapper--document .gc-auth-footer {
        justify-content: flex-start;
    }

    .gc-auth-split-wrapper--document .gc-auth-footer .gc-auth-legal .gc-dropdown-toggle {
        width: auto;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-default) !important;
        border-radius: var(--radius-full) !important;
        background: var(--surface-primary) !important;
        padding: var(--space-1-5) var(--space-3) !important;
        font-size: var(--font-size-13) !important;
        line-height: 1.25 !important;
    }

    /*
     * Document = surface-page. Общий mobile-блок прячет desktop и показывает
     * белый dark-logo — на светлом chrome это инверсия. Вернуть theme-aware.
     */
    .gc-auth-split-wrapper--document .gc-auth-brand-logo .gc-auth-logo-mobile {
        display: none !important;
    }

    .gc-auth-split-wrapper--document .gc-auth-brand-logo .gc-auth-logo-desktop-dark {
        display: block !important;
    }

    .gc-auth-split-wrapper--document .gc-auth-brand-logo .gc-auth-logo-desktop-light,
    [data-theme="light"] .gc-auth-split-wrapper--document .gc-auth-brand-logo .gc-auth-logo-desktop-dark {
        display: none !important;
    }

    [data-theme="light"] .gc-auth-split-wrapper--document .gc-auth-brand-logo .gc-auth-logo-desktop-light {
        display: block !important;
    }
}

/* Inertia: login заполняет #app внутри inertia-shell (документ не скроллится). */
body.inertia-shell .gc-auth-split-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

body.inertia-shell .gc-auth-split-wrapper--document {
    overflow: auto;
    height: auto;
    min-height: 100%;
}

@media (max-width: 991px) {
    body.inertia-shell .gc-auth-split-wrapper {
        overflow: auto;
    }
}

.gc-auth-visit-skeleton {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: var(--gc-auth-form-bg, var(--surface-canvas));
}

/* Auth skeleton bones — размеры как live chrome / float-input / submit / legal */
.gc-skeleton.gc-skeleton-auth-logo {
    width: 120px;
    height: var(--space-8);
    margin: 0;
    border-radius: var(--radius-8);
    flex-shrink: 0;
}

.gc-skeleton.gc-skeleton-auth-theme-toggle {
    width: var(--gc-btn-md-min-height);
    height: var(--gc-btn-md-min-height);
    margin: 0;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.gc-skeleton.gc-skeleton-auth-card-title {
    width: 5.5rem;
    height: var(--font-size-24);
    margin: 0;
    border-radius: var(--radius-8);
}

.gc-skeleton.gc-skeleton-auth-field {
    display: block;
    width: 100%;
    height: var(--space-12);
    margin: 0;
    border-radius: var(--radius-12);
}

.gc-skeleton.gc-skeleton-auth-checkbox {
    width: 9.5rem;
    height: calc(var(--space-4) + var(--space-1));
    margin: 0;
    border-radius: var(--radius-8);
}

.gc-skeleton.gc-skeleton-auth-link {
    width: 7rem;
    height: var(--font-size-14);
    margin: 0;
    border-radius: var(--radius-8);
}

.gc-skeleton.gc-skeleton-auth-link--wide {
    width: 11rem;
}

.gc-skeleton.gc-skeleton-auth-legal {
    width: 6.5rem;
    height: var(--gc-btn-sm-min-height);
    margin: 0;
    border-radius: var(--radius-full);
}

@media (max-width: 991px) {
    .gc-skeleton.gc-skeleton-auth-legal {
        width: 100%;
    }
}