/* ledger — левая панель 7/12 с бесконечной лентой абстрактных строк реестра (полоски вместо значений), одна строка
   подсвечена акцентом; справа форма 360px без карточки. Лента останавливается на ожидании Telegram и схлопывается
   на успех. Ширины полосок — --kit-signin-w из разметки, ленту зацикливает ledger.js. На ≤480px лента — полоса
   сверху, а форма сама становится реестром: ledger.js ставит data-layout="row" и data-look="line". */

.kit-signin-ledger {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-template-rows: 1fr;
    align-content: stretch;
}

.kit-signin-ledger-pane {
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--kit-border);
    background: var(--kit-surface-1);
}

.kit-signin-ledger-pane .kit-signin-brand {
    position: absolute;
    left: 48px;
    top: max(env(safe-area-inset-top, 0px), 40px);
    z-index: 2;
    justify-content: flex-start;
}

.kit-signin-ledger-tape {
    position: absolute;
    inset: 0;
    padding: 0 64px;
    mask-image: linear-gradient(to bottom, transparent, var(--kit-text) 20%, var(--kit-text) 80%, transparent);
}

.kit-signin-ledger-track {
    display: grid;
    align-content: start;
    gap: 10px;
    animation: kit-signin-ledger-scroll 52s linear infinite;
}

.kit-signin-ledger-row {
    display: grid;
    grid-template-columns: 8px 1.4fr 1fr 96px 64px;
    align-content: center;
    align-items: center;
    gap: 16px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--kit-radius-md);
    transition: opacity 0.5s var(--kit-ease), transform 0.5s var(--kit-ease);
}

.kit-signin-ledger-row > i {
    --kit-signin-w: 60%;
    display: block;
    width: var(--kit-signin-w);
    height: 8px;
    border-radius: 2px;
    background: var(--kit-surface-3);
}

.kit-signin-ledger-row > i:first-child {
    width: 8px;
    background: var(--kit-border-strong);
}

.kit-signin-ledger-row[data-hot] {
    border-color: var(--kit-accent-line);
    background: var(--kit-accent-dim);
}

.kit-signin-ledger-row[data-hot] > i {
    background: color-mix(in srgb, var(--kit-accent) 45%, var(--kit-surface-3));
}

.kit-signin-ledger-row[data-hot] > i:first-child {
    background: var(--kit-accent);
}

@keyframes kit-signin-ledger-scroll {
    to {
        transform: translateY(-50%);
    }
}

.kit-signin-ledger-side {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-content: stretch;
    justify-items: center;
    padding: max(env(safe-area-inset-top, 0px), 48px) 48px max(env(safe-area-inset-bottom, 0px), 48px);
}

.kit-signin-ledger-form {
    grid-row: 2;
    display: grid;
    align-content: start;
    gap: var(--kit-space-6);
    width: 100%;
    max-width: 360px;
    animation: kit-signin-rise 0.52s var(--kit-ease) backwards;
}

.kit-signin-ledger-side .kit-signin-foot {
    grid-row: 3;
    align-self: end;
}

.kit-signin[data-state="tg"] .kit-signin-ledger-track {
    animation-play-state: paused;
}

.kit-signin[data-state="success"] .kit-signin-ledger-row:not([data-hot]) {
    opacity: 0;
    transform: scaleY(0);
}

@media (max-width: 480px) {
    .kit-signin-ledger {
        grid-template-columns: 1fr;
        grid-template-rows: 132px 1fr;
    }

    .kit-signin-ledger-pane {
        border-right: 0;
        border-bottom: 1px solid var(--kit-border);
    }

    .kit-signin-ledger-pane .kit-signin-brand {
        left: 16px;
        top: max(env(safe-area-inset-top, 0px), 16px);
    }

    .kit-signin-ledger-tape {
        padding: 0 16px;
        mask-image: linear-gradient(to bottom, transparent 46px, var(--kit-text) 62%, var(--kit-text) 86%, transparent);
    }

    .kit-signin-ledger-row {
        grid-template-columns: 8px 1.4fr 1fr 48px;
        height: 32px;
    }

    .kit-signin-ledger-row > i:nth-child(5) {
        display: none;
    }

    .kit-signin-ledger-side {
        grid-template-rows: auto auto 1fr;
        padding: 24px 16px max(env(safe-area-inset-bottom, 0px), 24px);
    }

    .kit-signin-ledger-form {
        gap: var(--kit-space-5);
    }

    .kit-signin-ledger-form .kit-signin-form {
        gap: 0;
    }

    .kit-signin-ledger-form .kit-field[data-layout="row"] {
        min-height: 52px;
    }

    .kit-signin-ledger-form .kit-signin-error {
        margin-block: 12px;
    }

    .kit-signin-ledger-form .kit-signin-submit {
        margin-block: 16px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kit-signin-ledger-track,
    .kit-signin-ledger-form {
        animation: none;
    }

    .kit-signin-ledger-row {
        transition: none;
    }
}