/* ==========================================================================
   Sign in: the mark, then one white panel on the page with the title, the fields and one ink button.
   Errors sit under the fields in the outlined note. Nothing else on the page.
   ========================================================================== */
.view-login { display: grid; place-items: center; padding: 48px 24px; }
.ln { width: 100%; max-width: 400px; margin: auto; animation: rise var(--dur-3) var(--ease) both; }

.ln-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; }
.ln-brand .brand-mark { width: 26px; height: 26px; }

.ln-card { padding: 32px 32px 28px; border-radius: var(--r-4); background: var(--surface); box-shadow: var(--ring); }
.ln-note { margin-top: 8px; }

.ln-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.ln-form .btn-block { margin-top: 4px; }

/* The password and its Show / Hide, inside the field */
.ln-pass { position: relative; display: block; }
.ln-pass > .input { padding-right: 44px; }
.ln-pass > .icon-btn { position: absolute; top: 5px; right: 5px; }

.ln-switch { display: flex; justify-content: center; margin-top: 20px; }

@media (max-height: 860px) {
  .view-login { padding-top: 32px; padding-bottom: 32px; }
  .ln-brand { margin-bottom: 20px; }
  .ln-card { padding: 28px 28px 24px; }
}