/* The login screens (admin, console and deals: assets/auth/<surface>/login.html), on top of /cdn/main.css:
   the split layout of the geth deals login, a form on the left and a dark panel on the right. */
.split { min-height: 100vh; display: flex; flex-wrap: wrap; }
.split > .left { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; padding: 32px clamp(24px, 6vw, 72px) 40px; }
.split > .right { flex: 1 1 420px; min-width: 0; background: var(--bg); color: var(--ink); padding: 40px clamp(24px, 5vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.brandline { display: flex; align-items: baseline; gap: 8px; margin-bottom: auto; }
.form-box { max-width: 380px; width: 100%; padding: 56px 0; }
.form-box > .label { margin-bottom: 16px; }
.form-box h1 { font-size: 30px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 10px; }
.form-box > h1 + .body { margin: 0 0 32px; }
.form-box .help { margin: 0 0 12px; }
.form-box button[type="submit"] { margin-top: 4px; }
.field { width: 100%; box-sizing: border-box; font-size: 14.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 12px 14px; transition: border-color .15s; margin-bottom: 16px; }
.field-word { letter-spacing: .04em; }   /* a code typed as a word: the same type as every field beside it */
.flabel { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-bottom: 7px; }
.msg { font-size: 13px; line-height: 1.45; margin: 10px 0 0; min-height: 19px; }
/* the form's own links (Esqueci minha senha, Pedir outro código): quiet, in the form's type, under the button */
.form-box .small { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.form-box .small a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.form-box .small a:hover { color: var(--accent); }
.right .status { display: flex; align-items: center; gap: 8px; }
.right .status .faint { font-size: 11px; font-weight: 500; letter-spacing: .1em; }
.right .frame { max-width: 460px; box-shadow: none; }
.right .frame-title { padding: 20px 22px; border-bottom: 1px solid var(--hairline); }
.right .frame-title .faint { font-size: 12px; margin-top: 4px; }
.right .small { margin: 0; max-width: 44ch; font-size: 13.5px; line-height: 1.65; color: var(--faint); }
.right .data-row .v.pos { color: var(--accent); }
[hidden] { display: none !important; }
/* the admin's second step: how the code arrives */
.methods .btn { flex: 1; padding: 9px 10px; font-size: 13.5px; white-space: nowrap; }
.methods .btn.chosen { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* a browser without clamp() or flex gap (Safari before 13.1 and 14.1: an iPad that stays on iOS 12) */
@supports not (padding: clamp(1px, 1px, 1px)) {
  .split > .left { padding: 32px 48px 40px; }
  .split > .right { padding: 40px 40px; }
}
@supports not (inset: 0) {
  .split > .right > * + * { margin-top: 20px; }
  .brandline > * + *, .right .status > * + * { margin-left: 8px; }
}