/* Sign-in page. Builds on desktop-vault.css, the app's own unlock screen. */

.login-body {
  min-height: 100vh;
  min-height: 100dvh;
}

.login-body .vault-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.login-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-card .vault-subtitle {
  margin-bottom: 1.6rem;
}

.login-card .vault-form input {
  /* 16px or larger keeps iOS Safari from zooming into the field. */
  font-size: max(1rem, 16px);
  min-height: 3.25rem;
}

.login-card .vault-reveal {
  min-width: 3.5rem;
  min-height: 2.75rem;
  border-radius: .7rem;
}

.login-card .vault-reveal:focus-visible,
.login-card .vault-primary:focus-visible {
  outline: 2px solid #56d9ff;
  outline-offset: 3px;
}

.login-card .vault-primary {
  min-height: 3.4rem;
  font-size: 1rem;
}

.login-card .vault-primary[aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}

@media (max-width: 880px) {
  .login-body .vault-shell {
    align-content: start;
    padding:
      env(safe-area-inset-top, 0px)
      env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px);
  }

  .login-body .vault-brand {
    align-items: center;
    padding: clamp(2.25rem, 9vh, 4.5rem) 1.5rem 0;
  }

  .login-body .vault-brand-glow {
    width: 15rem;
    height: 15rem;
    transform: translate(-6%, -34%);
  }

  .login-body .vault-logo {
    width: 9.5rem;
    object-position: center;
  }

  .login-card {
    width: min(30rem, calc(100% - 2rem));
    margin: 1.75rem auto 2rem;
    padding: 1.75rem 1.4rem 1.6rem;
  }

  .login-card h1 {
    font-size: 2rem;
  }
}

@media (max-width: 380px) {
  .login-card {
    width: calc(100% - 1.5rem);
    padding: 1.5rem 1.1rem 1.35rem;
    border-radius: 1.15rem;
  }

  .login-card .vault-subtitle {
    font-size: .92rem;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .login-body .vault-brand {
    padding-top: 1.25rem;
  }

  .login-body .vault-logo {
    width: 7rem;
  }

  .login-card {
    margin-top: 1rem;
  }
}

/* Short phones (iPhone SE and similar): keep the Sign in button on screen. */
@media (max-width: 880px) and (max-height: 720px) {
  .login-body .vault-brand {
    padding-top: 1.25rem;
  }

  .login-body .vault-brand-glow {
    width: 10rem;
    height: 10rem;
  }

  .login-body .vault-logo {
    width: 5.5rem;
  }

  .login-card {
    margin: 1rem auto 1.25rem;
    padding-top: 1.35rem;
    padding-bottom: 1.25rem;
  }

  .login-card .vault-eyebrow {
    margin-bottom: .55rem;
  }

  .login-card h1 {
    font-size: 1.75rem;
  }

  .login-card .vault-subtitle {
    margin: .6rem 0 1rem;
  }

  .login-card .vault-form {
    gap: .5rem;
  }

  .login-card .vault-form label {
    margin-top: .2rem;
  }
}

/* Same corner radii as the workspace: controls 10px, the card 20px. */
.login-card {
  border-radius: 20px;
}

.login-card .vault-form input,
.login-card .vault-primary {
  border-radius: 10px;
}

.login-card .vault-error {
  border-radius: 10px;
}

@media (max-width: 880px) {
  .login-card {
    border-radius: 18px;
  }
}

/* One-time recovery key page. */
.recovery-card .vault-recovery-key {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  letter-spacing: .08em;
  border-radius: 12px;
}

.recovery-key-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  gap: .55rem 1.1rem;
}

@media (max-width: 420px) {
  .recovery-key-grid {
    grid-template-columns: repeat(2, max-content);
  }
}

.recovery-rules {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
  color: #b9cad6;
  font-size: .9rem;
  line-height: 1.6;
}

.recovery-card .vault-recovery-actions .vault-secondary {
  flex: 1 1 auto;
  min-height: 2.75rem;
  border-radius: 10px;
}

.recovery-card .vault-confirm-check {
  margin-top: 1.25rem;
}

@media print {
  .recovery-rules {
    color: #000;
  }
}

/* Two-factor code and setup pages. */
.code-input {
  font-size: max(1.5rem, 16px) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .35em;
  text-align: center;
}

.code-input::placeholder {
  letter-spacing: .35em;
}

.login-cancel {
  display: block;
  margin-top: .5rem;
  text-align: center;
  text-decoration: none;
}

.setup-card .vault-subtitle {
  margin-bottom: 1.25rem;
}

.setup-steps {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: setup-step;
}

.setup-steps > li {
  position: relative;
  display: grid;
  gap: .45rem;
  padding-left: 2.4rem;
  counter-increment: setup-step;
}

.setup-steps > li::before {
  content: counter(setup-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(86, 217, 255, .45);
  border-radius: 50%;
  color: #56d9ff;
  font-size: .82rem;
  font-weight: 800;
}

.setup-steps > li > span {
  color: #a9bccb;
  font-size: .9rem;
}

.setup-qr {
  width: min(200px, 100%);
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}

.setup-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.setup-manual summary {
  color: #72dffb;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}

.setup-secret {
  display: block;
  margin-top: .5rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(128, 209, 236, .24);
  border-radius: 10px;
  background: rgba(3, 10, 17, .6);
  color: #dff8ff;
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: .9rem;
  letter-spacing: .06em;
  word-spacing: .3em;
  overflow-wrap: anywhere;
}

.setup-steps .vault-form {
  gap: .6rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Turnstile sits between the password and the button. */
.login-turnstile {
  min-height: 65px;
  margin-top: .35rem;
}

/* Opened from the iPhone Home Screen icon: with no browser bars the screen
   counts as tall, but the clock, the home bar and the security check still
   take room, so the Sign in button ended up below the fold. The compact
   layout keeps it on screen. Phone Safari and desktop are unchanged. */
@media (max-width: 880px) {
  html.deed7-standalone .login-body .vault-brand {
    padding-top: 1.25rem;
  }

  html.deed7-standalone .login-body .vault-brand-glow {
    width: 11rem;
    height: 11rem;
  }

  html.deed7-standalone .login-body .vault-logo {
    width: 6.5rem;
  }

  html.deed7-standalone .login-card {
    margin: 1rem auto 1.25rem;
    padding-top: 1.4rem;
    padding-bottom: 1.3rem;
  }

  html.deed7-standalone .login-card .vault-eyebrow {
    margin-bottom: .55rem;
  }

  html.deed7-standalone .login-card h1 {
    font-size: 1.85rem;
  }

  html.deed7-standalone .login-card .vault-subtitle {
    margin: .6rem 0 1.1rem;
  }

  html.deed7-standalone .login-card .vault-form {
    gap: .55rem;
  }

  html.deed7-standalone .login-card .vault-form label {
    margin-top: .2rem;
  }
}