/*
 * App Lock / PIN / Biometry.
 * Строгий интерфейс без теней.
 * Цвета используются только из root.css.
 * Экран рассчитан на портретную ориентацию приложения.
 */

/* =========================================================
   Полноэкранный экран блокировки
   ========================================================= */

.appAuth-container {
    position: fixed;
    z-index: 10010;
    inset: 0;

    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;

    color: var(--main-black-color);
    background: var(--bg-color);

    animation: app-auth-overlay-in .2s ease both;
}

.appAuth {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    padding-top: var(--safe-area-inset-top-redefined);
    padding-right: max(var(--safe-area-inset-right-redefined), 1rem);
    padding-bottom: var(--safe-area-inset-bottom-redefined);
    padding-left: max(var(--safe-area-inset-left-redefined), 1rem);

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}

.appAuth-inner {
    width: min(23rem, 100%);
    margin: auto 0;
    padding: clamp(.25rem, 1.5vh, .85rem) 0;

    animation: app-auth-panel-in .32s cubic-bezier(.22, 1, .36, 1) both;
}

/* =========================================================
   Текст
   ========================================================= */

.appAuth-title {
    margin: 0 0 clamp(.8rem, 2.2vh, 1.25rem);

    color: var(--main-black-color);

    font-size: clamp(1.18rem, 5vw, 1.38rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.015em;
    text-align: center;
}

.appAuth-info {
    min-height: 0;
    margin: 0 auto;

    color: var(--error-color);

    font-size: .87rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.appAuth-info:not(:empty) {
    min-height: 2.4em;
    margin-bottom: .35rem;

    animation: app-auth-info-in .2s ease both;
}

/* =========================================================
   PIN-индикатор
   ========================================================= */

.pin-container {
    width: 100%;
    text-align: center;
}

.pin-display {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: clamp(4rem, 11vh, 5rem);
    margin: 0 0 clamp(.8rem, 2.2vh, 1.05rem);

    overflow: hidden;

    color: var(--main-black-color-op);

    font-size: clamp(2.35rem, 11vw, 3.4rem);
    font-weight: 650;
    line-height: 1;
    letter-spacing: clamp(.22rem, 2vw, .5rem);
    text-align: center;
    font-variant-numeric: tabular-nums;

    user-select: none;

    transition: color .18s ease;
}

.pin-display.error {
    color: var(--error-color);
    animation: app-auth-pin-error .42s ease both;
}

.pin-display span {
    display: inline-block;
    min-width: .2em;

    transition:
        color .2s ease,
        transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

/*
 * В root.css отсутствует отдельный success-color.
 * Для положительной анимации применяется highlighting-color.
 */
.pin-display span.success {
    color: var(--highlighting-color);
    animation: app-auth-pin-success .38s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* =========================================================
   Клавиатура
   ========================================================= */

.keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.5rem, 2vw, .72rem);

    width: min(100%, 19.5rem);
    margin: 0 auto;
    padding: 0;
}

.keypad button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 0;
    padding: 0;

    color: var(--main-black-color);
    background: var(--btn-light-bg-color);

    border: 1px solid var(--input-border-color);
    border-radius: 50%;
    box-shadow: none;

    cursor: pointer;

    aspect-ratio: 1 / 1;

    font-size: clamp(1.15rem, 5.2vw, 1.4rem);
    font-weight: 600;
    line-height: 1;

    -webkit-tap-highlight-color: transparent;

    transition:
        color .14s ease,
        background .14s ease,
        border-color .14s ease,
        transform .14s cubic-bezier(.34, 1.56, .64, 1);
}

.keypad button:hover {
    background: var(--input-bg-color-2);
    border-color: var(--input-border-color-darker);
}

.keypad button:active,
.keypad button.pressed:active {
    color: var(--btn-text-color);
    background: var(--btn-bg-color);
    border-color: var(--btn-bg-color);
    transform: scale(.93);
}

.keypad button:focus-visible {
    outline: 3px solid var(--shadow-highlighting-color);
    outline-offset: 2px;
}

.keypad button i {
    pointer-events: none;
}

/*
 * Служебные кнопки:
 * - «очистить» слева от 0;
 * - «удалить» / биометрия справа от 0;
 * - «повторить» на экране настройки.
 *
 * Они имеют точно такой же фон, что и цифровые кнопки,
 * но пониженный контраст текста. В светлой теме это
 * не создаёт лишних ярких пятен по краям клавиатуры.
 */
.keypad button.delete,
.keypad button.clear,
.keypad button.repeat,
.keypad button.fingerPrint {
    color: var(--main-black-color-op);
    background: var(--btn-light-bg-color);

    font-size: clamp(1rem, 4.5vw, 1.22rem);
    font-weight: 500;
}

.keypad button.delete:hover,
.keypad button.clear:hover,
.keypad button.repeat:hover,
.keypad button.fingerPrint:hover {
    color: var(--main-black-color);
    background: var(--input-bg-color-2);
}

.keypad button.delete:active,
.keypad button.clear:active,
.keypad button.repeat:active,
.keypad button.fingerPrint:active {
    color: var(--btn-text-color);
    background: var(--btn-bg-color);
    border-color: var(--btn-bg-color);
}

/* =========================================================
   Нижние действия: «Пропустить» / «Сбросить»
   ========================================================= */

.appAuth-bottom {
    margin-top: clamp(.9rem, 2.5vh, 1.2rem);
    text-align: center;
}

/*
 * Компактная вторичная кнопка:
 * - не выглядит как ссылка;
 * - не растягивается на всю ширину;
 * - остаётся удобной для касания.
 */
.appAuth-btn-notConfig,
.appAuth-btn-reboot {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 10.5rem;
    max-width: 100%;
    min-height: 42px;
    margin: 0 auto;
    padding: .62rem 1rem;

    color: var(--main-black-color);
    background: var(--input-bg-color);

    border: 1px solid var(--input-border-color);
    border-radius: 9px;

    cursor: pointer;

    font-size: .87rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    opacity: 0.5;

    transition:
        color .14s ease,
        background .14s ease,
        border-color .14s ease,
        transform .14s ease;
}

.appAuth-btn-notConfig:hover,
.appAuth-btn-reboot:hover {
    color: var(--main-black-color);
    background: var(--input-bg-color-2);
    border-color: var(--input-border-color-darker);
    opacity: 1;
}

.appAuth-btn-notConfig:active,
.appAuth-btn-reboot:active {
    transform: scale(.98);
}

.appAuth-bottom-desc {
    max-width: 18rem;
    margin: .55rem auto 0;

    color: var(--main-black-color-op);

    font-size: .74rem;
    line-height: 1.38;
    text-align: center;
}

/* =========================================================
   Анимации
   ========================================================= */

@keyframes app-auth-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes app-auth-panel-in {
    from {
        opacity: 0;
        transform: translateY(13px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes app-auth-info-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes app-auth-pin-error {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-7px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(3px);
    }
}

@keyframes app-auth-pin-success {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.14);
    }

    100% {
        transform: scale(1);
    }
}

/* =========================================================
   Компактные экраны по высоте
   ========================================================= */

@media (max-height: 680px) {
    .appAuth {
        align-items: flex-start;
    }

    .appAuth-inner {
        margin: auto 0;
        padding-top: .15rem;
        padding-bottom: .15rem;
    }

    .appAuth-title {
        margin-bottom: .62rem;
        font-size: 1.1rem;
    }

    .pin-display {
        min-height: 3.6rem;
        margin-bottom: .58rem;

        font-size: clamp(2.05rem, 10vw, 2.75rem);
    }

    .keypad {
        gap: .42rem;
        width: min(100%, 17.5rem);
    }

    .appAuth-bottom {
        margin-top: .75rem;
    }

    .appAuth-btn-notConfig,
    .appAuth-btn-reboot {
        min-height: 40px;
        padding: .55rem .9rem;
        font-size: .84rem;
    }

    .appAuth-bottom-desc {
        margin-top: .45rem;
        font-size: .71rem;
    }
}

@media (max-height: 570px) {
    .appAuth-title {
        margin-bottom: .4rem;
        font-size: 1.03rem;
    }

    .pin-display {
        min-height: 3.05rem;
        margin-bottom: .42rem;

        font-size: 2rem;
    }

    .keypad {
        gap: .32rem;
        width: min(100%, 15.5rem);
    }

    .appAuth-bottom {
        margin-top: .48rem;
    }

    .appAuth-btn-notConfig,
    .appAuth-btn-reboot {
        min-height: 37px;
        padding: .45rem .8rem;
        font-size: .81rem;
    }

    .appAuth-bottom-desc {
        display: none;
    }
}

/* =========================================================
   Узкие телефоны
   ========================================================= */

@media (max-width: 350px) {
    .appAuth {
        padding-right: .75rem;
        padding-left: .75rem;
    }

    .appAuth-inner {
        width: 100%;
    }

    .keypad {
        gap: .4rem;
    }

    .pin-display {
        letter-spacing: .3rem;
    }
}

/* =========================================================
   Safe area
   ========================================================= */

@supports (padding: max(0px)) {
    .appAuth {
        padding-top: max(var(--safe-area-inset-top-redefined), 1rem);
        padding-right: max(var(--safe-area-inset-right-redefined), 1rem);
        padding-bottom: max(var(--safe-area-inset-bottom-redefined), 1rem);
        padding-left: max(var(--safe-area-inset-left-redefined), 1rem);
    }
}

/* =========================================================
   Системное отключение анимаций
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .appAuth-container,
    .appAuth-inner,
    .appAuth-info:not(:empty),
    .pin-display.error,
    .pin-display span.success {
        animation: none !important;
    }

    .pin-display,
    .pin-display span,
    .keypad button,
    .appAuth-btn-notConfig,
    .appAuth-btn-reboot {
        transition-duration: .01ms !important;
    }
}