/* The suite sign-in page (SuiteSignIn): account buttons on top of the concept's auth scene. */
html[data-ui="next"] .signin-group{display:grid;gap:0;}
html[data-ui="next"] .signin-label{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px;}
html[data-ui="next"] .signin-account{display:flex;flex-direction:column;align-items:flex-start;gap:2px;height:auto;min-height:0;padding:10px 14px;text-align:left;white-space:normal;}
html[data-ui="next"] .signin-account b{font-weight:600;color:var(--ink);}
html[data-ui="next"] .signin-account span{font-size:12px;color:var(--ink-4);font-weight:400;}
html[data-ui="next"] .auth-head .auth-tools{display:flex;align-items:center;gap:14px;}

/* ---------- the sign-in forms (CaptureTech Authentication; came from the customer portal) ---------- */

/* Notices take their tones from suite-ui.css; in the auth scene they sit above what they are about. */
html[data-ui="next"] .auth .notice{margin:0 0 16px;}

html[data-ui="next"] .auth-wide{width:100%;}
html[data-ui="next"] .auth-form{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;}
html[data-ui="next"] .auth-row-end{justify-content:flex-end;margin:-4px 0 12px;font-size:13px;}
html[data-ui="next"] .auth-alt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:13px;}
html[data-ui="next"] .auth-linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer;}
html[data-ui="next"] .auth-demo-code{font-variant-numeric:tabular-nums;}
html[data-ui="next"] .auth-for{display:inline-flex;align-items:center;gap:6px;margin:-2px 0 14px;padding:3px 9px;border-radius:var(--r-chip);background:var(--tint);color:var(--blue);font-size:12px;font-weight:600;}
html[data-ui="next"] .auth-for svg{width:13px;height:13px;flex-shrink:0;}

/* The code field: big, spaced, numeric, one glance to compare with the e-mail. */
html[data-ui="next"] .field input.auth-code{
  width:100%;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:24px;letter-spacing:.42em;text-align:center;color:var(--ink);
  padding:10px 12px 10px calc(12px + .42em);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);
  font-variant-numeric:tabular-nums;
}
html[data-ui="next"] .auth-code::placeholder{color:var(--line);letter-spacing:.42em;}

/* "Trust this device": a checkbox with an explanation under its label. */
html[data-ui="next"] .auth-trust-box{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;margin:6px 0 16px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--field);
  cursor:pointer;
}
html[data-ui="next"] .auth-trust-box input{margin-top:2px;flex-shrink:0;}
html[data-ui="next"] .auth-trust-box b{display:block;font-weight:600;font-size:13px;color:var(--ink);}
html[data-ui="next"] .auth-trust-box .help{display:block;margin-top:2px;}