/* Hallmark · shape: app screen · genre: modern-minimal · theme: custom (by request: the user's references) · the sign-in screen, tokens from styles.css · v2.0.0 */
/* Hallmark · dismissed 25 · the sign-in lede is one sentence beside the asesoría letter, 28ch to 40ch is its range */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, a sign-in could be any tool; the grey side shows the letter a client of the asesoría would receive */

.login { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.login-intro { display: grid; align-content: space-between; gap: var(--space-xl); padding: var(--space-xl) var(--space-2xl); background: var(--color-canvas); border-right: 1px solid var(--color-rule); }
.login-copy { display: grid; gap: var(--space-md); max-width: 34rem; }
.login-copy h1 { font-size: var(--text-3xl); line-height: 1.08; max-width: 16ch; }
.login-copy p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 40ch; }
.login-letter { max-width: 30rem; margin: 0; }
.login-letter .letter-body p { font-size: var(--text-sm); }
.login-note { font-size: var(--text-sm); color: var(--color-muted); }
.login-side { display: grid; align-items: center; justify-items: center; padding: var(--space-xl) var(--space-lg); }
.login-form { display: grid; gap: var(--space-md); width: min(100%, 22rem); }
.login-form h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.login-form .input, .login-form .btn { min-height: 44px; font-size: var(--text-md); }
.login-error { min-height: 1lh; font-size: var(--text-sm); color: var(--bad-ink); }

@media (max-width: 60rem) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-intro { padding: var(--space-lg) var(--space-md); gap: var(--space-lg); border: 0; border-bottom: 1px solid var(--color-rule); }
  .login-letter { display: none; }
  .login-side { align-items: start; padding: var(--space-lg) var(--space-md) var(--space-2xl); }
  .login-form { width: 100%; max-width: 26rem; justify-self: start; }
}