/* Log in. The page is the same ink as the other inner pages; the form sits on
   paper so it reads as the one thing to do here. */

.login{min-height:100vh;min-height:100dvh;box-sizing:border-box;display:flex;align-items:center;}
.login__in{
  width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(40px,6vw,96px);align-items:center;
}
.login__form{
  background:var(--paper);color:var(--ink);
  border-radius:18px;
  padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:14px;
}
.login__form button[type="submit"]{margin-top:6px;align-self:flex-start;}
.login__form button[disabled]{opacity:.5;cursor:default;}
.login__help,
.login__new{font-size:13px;line-height:1.55;color:rgba(11,11,11,.55);margin:0;}
.login__new{padding-top:14px;border-top:1px solid rgba(11,11,11,.10);font-size:14px;color:rgba(11,11,11,.7);}
.login__form a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(11,11,11,.3);}
.login__form a:hover{border-bottom-color:var(--ink);}

@media (max-width:900px){
  .login{align-items:flex-start;}
  .login__in{grid-template-columns:minmax(0,1fr);}
}
.login__form .start__said:empty{display:none;}

/* The diary app's own icon, so the page you log in on carries the mark you
   land in. Ink tile on ink, so a hairline gives it its edge. */
.login__mark{
  display:block;width:104px;height:104px;
  border-radius:26px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
  margin:0 auto 40px;
}

/* Fields, button and message drawn the same as the sign up card on
   bookings.ansard.co.uk/signup, so the two pages read as one. */
.login__form .start__f{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0;}
.login__form .start__f > span{font:500 11px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,11,.5);}
.login__form .start__f input{
  box-sizing:border-box;width:100%;min-height:48px;padding:12px 14px;
  border:1px solid rgba(11,11,11,.14);border-radius:12px;
  background:#fff;color:var(--ink);font:400 16px/1.35 var(--face);
  -webkit-appearance:none;appearance:none;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.login__form .start__f input::placeholder{color:rgba(11,11,11,.32);}
.login__form .start__f input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(111,190,0,.35);}
.login__form button.pill{border:0;height:52px;padding:0 26px;font-size:15px;cursor:pointer;}
.login__form button.pill:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(159,255,0,.55);}
.login__form .start__said{margin:0;padding:11px 14px;border-radius:12px;background:rgba(217,54,54,.08);color:#B3261E;font-size:14px;line-height:1.5;}