/* Sign in in the new design (page-designs/Login.dc.html). Tokens only; loaded by account/new/login.html. */

.ms-page.si-page { align-content: center; justify-items: center; padding-block: var(--space-12); }
.si-wrap { width: 100%; max-width: 400px; display: grid; gap: var(--space-6); }
.si-head { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.si-logo { display: block; width: 56px; height: 56px; }
.si-head__text { display: grid; gap: var(--space-1); }
.si-title { margin: 0; font: var(--type-title); letter-spacing: var(--type-title-tracking); color: var(--foreground); }
.si-sub { margin: 0; color: var(--muted-foreground); }
.si-preview { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--info-soft); color: var(--foreground); font: var(--type-small); text-align: center; }

.si-card { display: grid; gap: var(--space-4); padding: 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.si-error { display: flex; align-items: flex-start; gap: 10px; padding: 10px var(--space-3); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--foreground); font-size: 14px; line-height: 20px; }
.si-error__icon { flex: none; margin-top: 2px; color: var(--danger); }

.si-field { display: grid; gap: 6px; }
.si-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--foreground); }
.si-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.si-link { color: var(--primary); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; }
.si-link:hover { text-decoration: underline; }
.si-input { display: flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-3); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); }
.si-input:focus-within { outline: 2px solid var(--ring); outline-offset: 1px; }
.si-input--password { padding-right: var(--space-1); }
.si-input input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--foreground); font: var(--type-body); }
.si-eye { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.si-eye:hover { background: var(--muted); color: var(--foreground); }
.si-eye:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.si-eye[hidden] { display: none; }
.si-eye__hide, .si-eye[aria-pressed="true"] .si-eye__show { display: none; }
.si-eye[aria-pressed="true"] .si-eye__hide { display: inline-flex; }
.si-eye__show { display: inline-flex; }
.si-submit { width: 100%; height: 44px; }

.si-note { margin: 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.si-footer { padding: var(--space-6); text-align: center; font: var(--type-small); color: var(--muted-foreground); }

@media (max-width: 600px) {
  .ms-page.si-page { padding-block: var(--space-8); }
  .si-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .si-eye { transition: none; }
}