/* PE-Class v1.20.21 — consistent brand type and always-visible gold unlock */

/* Restore the familiar gold lock while keeping the stable SVG geometry. */
#loginScreen.peLoginScreen {
  --pe-login-lock-gold: #ffd24a;
}

#loginScreen.peLoginScreen .peLoginLock {
  color: var(--pe-login-lock-gold) !important;
  filter: drop-shadow(0 1px 1px rgba(103, 67, 0, .22));
}

/*
 * The lock opening communicates authentication success, so its small,
 * localized shackle movement remains visible even when the desktop OS asks
 * to reduce larger interface motion. Screen scaling/glow remains suppressed
 * by the earlier accessibility layer.
 */
#loginScreen.peLoginScreen .loginBtn.is-unlocked .peLoginLockShackle,
#loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn .peLoginLockShackle,
#loginScreen.peLoginScreen.is-unlocked .loginBtn .peLoginLockShackle,
#loginScreen.peLoginScreen .peLoginLock[data-lock-state="unlocked"] .peLoginLockShackle {
  transform-box: view-box;
  transform-origin: 7px 10px;
  will-change: transform;
  animation: peLoginShackleOpen12021 2.5s cubic-bezier(.34, .08, .19, 1) both !important;
}

@keyframes peLoginShackleOpen12021 {
  0%, 8% {
    transform: translate(0, 0) rotate(0deg);
  }
  28% {
    transform: translate(0, -.45px) rotate(-4deg);
  }
  52% {
    transform: translate(-.2px, -1px) rotate(-12deg);
  }
  74% {
    transform: translate(-.45px, -1.5px) rotate(-21deg);
  }
  100% {
    transform: translate(-.7px, -1.9px) rotate(-30deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #loginScreen.peLoginScreen .loginBtn.is-unlocked .peLoginLockShackle,
  #loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn .peLoginLockShackle,
  #loginScreen.peLoginScreen.is-unlocked .loginBtn .peLoginLockShackle,
  #loginScreen.peLoginScreen .peLoginLock[data-lock-state="unlocked"] .peLoginLockShackle {
    animation: peLoginShackleOpen12021 2.5s cubic-bezier(.34, .08, .19, 1) both !important;
  }
}

@media (forced-colors: active) {
  #loginScreen.peLoginScreen .peLoginLock {
    color: ButtonText !important;
    filter: none;
  }
}

/* Match both identity lines through one responsive size token. */
#loginScreen.peLoginScreen {
  --pe-login-identity-size: clamp(22px, 2vw, 29px);
}

#loginScreen.peLoginScreen .peLoginIdentity h1,
#loginScreen.peLoginScreen .peLoginIdentity h2 {
  font-size: var(--pe-login-identity-size) !important;
}

@media (max-width: 820px),
       (max-height: 540px) and (pointer: coarse) {
  html:not(.pe87FoldWide):not([data-pe-fold-wide="true"])
  #loginScreen.peLoginScreen {
    --pe-login-identity-size: clamp(17px, 5vw, 20px);
  }
}

@media (min-width: 700px) and (max-width: 920px) and (min-height: 600px) {
  html.pe87FoldWide #loginScreen.peLoginScreen,
  html[data-pe-fold-wide="true"] #loginScreen.peLoginScreen {
    --pe-login-identity-size: 21px;
  }
}