/* The login page (spec 0014): one kit card in the middle of the canvas, like a dialog. */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: min(380px, 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--overlay); animation: fade .1s ease-out;
}
.login-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--divider); }
.login-brand { display: flex; align-items: center; gap: 8px; font-size: var(--fs); }
.login-brand strong { font-weight: 600; }
.login-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 9px var(--accent); flex: none; }
.login-body { display: grid; gap: 14px; padding: 20px; }
.login-body .field input { text-align: left; }