/* the login page (spec 1.4): one card in the middle, the app's tokens and buttons */
/* the sizes of the Grafit layout that base.css reads (--fs, --font-ui, --r-lg, --r-md): layout-grafit.css is not open before login, and
   without them body's `font` shorthand is invalid (a serif page) and the corners are square */
[data-layout="grafit"] { --font-ui: 'Geist', system-ui, 'Segoe UI', sans-serif; --font-num: 'Geist Mono', ui-monospace, Consolas, monospace; --fs: 13px; --r-lg: 12px; --r-md: 8px; --r-sm: 6px; }
.login-body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 16px; background: var(--bg); color: var(--text); }
.login { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.login-logo { height: 22px; align-self: flex-start; }
.login h1 { margin: 0; font-size: 18px; font-weight: 600; }
.login form { display: flex; flex-direction: column; gap: 12px; }
.login form[hidden] { display: none; }
.login .btn-lg { width: 100%; }
.login .fld input { font-size: 16px; } /* 16 px: iOS does not zoom the page on focus */
.login-msg { margin: 0; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--down); color: var(--down); font-size: 13px; }
.login-qr { align-self: center; padding: 8px; background: #fff; border-radius: var(--r-md); line-height: 0; }
.login-qr svg { width: 220px; height: 220px; }
.login code { font-size: 13px; word-break: break-all; }