/* Sign-in and password pages in the v2 look, after Integrity's own sign-in page: a navy
   bar, a centred white card, tall outlined fields and a full-width pill for the one
   action. Labels sit above the fields, as in the portal's "confirm a few details" dialog,
   rather than inside them. */
body{min-height:100vh;display:flex;flex-direction:column}
.barright{margin-left:auto;display:flex;align-items:center;gap:6px}
main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 48px}
/* Integrity's sign-in: a white card with a soft shadow on the grey ground, title centred. */
form{width:100%;max-width:420px;background:var(--surface);border:0;
  border-radius:var(--r-field);padding:36px 40px;box-shadow:0 8px 28px rgba(5,42,99,.10)}
h1{font-size:26px;font-weight:400;margin:0 0 6px;text-align:center}
/* As on Integrity's sign-in card, the company's logo sits above the title. */
.cardlogo{display:flex;justify-content:center;margin:0 0 18px}
.cardlogo img{display:block;height:64px;width:auto}
.cardlogo .logo-on-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cardlogo .logo-on-light{display:none}
  :root:not([data-theme="light"]) .cardlogo .logo-on-dark{display:block}}
:root[data-theme="dark"] .cardlogo .logo-on-light{display:none}
:root[data-theme="dark"] .cardlogo .logo-on-dark{display:block}
p.lede{margin:0 0 24px;color:var(--ink);font-size:15px;text-align:center}
label{display:block;font-size:14px;font-weight:600;color:var(--ink-strong);margin:0 0 6px}
input{width:100%;min-height:52px;padding:12px 14px;font:400 16px var(--font);color:var(--ink);
  background:var(--surface);border:1px solid var(--field-line);border-radius:7px;
  margin-bottom:18px;caret-color:var(--blue)}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
button[type=submit]{width:100%;min-height:52px;font:600 16px var(--font);cursor:pointer;color:#fff;
  background:var(--blue);border:0;border-radius:var(--r-pill);box-shadow:var(--shadow-btn)}
button[type=submit]:hover{background:var(--blue-hover)}
button[disabled]{opacity:.6;cursor:wait}
.err{color:var(--bad-ink);background:var(--bad-bg);font-size:15px;margin:0 0 16px;
  padding:10px 14px;border-radius:var(--r-tile)}
.ok{color:var(--good-ink);background:var(--good-bg);font-size:15px;margin:0 0 16px;
  padding:10px 14px;border-radius:var(--r-tile)}
.foot{margin-top:18px;font-size:14px;color:var(--muted)}
.foot a{color:var(--blue);font-weight:600}
.back{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:6px 14px 6px 10px;
  font:600 15px var(--font);color:var(--blue);text-decoration:none;border-radius:var(--r-pill)}
.back:hover{background:var(--blue-tint)}
label.show{display:flex;align-items:center;gap:8px;font-weight:400;font-size:15px;color:var(--ink);
  margin:-6px 0 16px;cursor:pointer}
label.show input{width:auto;min-height:0;margin:0;accent-color:var(--blue)}
@media (max-width:720px){
  main{padding:24px 16px 40px}
  form{padding:24px 20px}
  h1{font-size:28px}
}