/* Login / reset pages.
 *
 * Follows the auth-card layout from hpestartqwc/auth: a single centred card,
 * max 350px, header with the brand mark, padded body, footer holding the reset
 * link. Kept deliberately plain - this is the first screen every ILP user meets
 * and it should not need explaining.
 */

body.auth-page {
  background: #f0f2f5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* iOS notch, for when this is opened on a phone */
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.auth-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  max-width: 380px;
  width: 100%;
  overflow: hidden;
}

.auth-header {
  text-align: center;
  padding: 28px 20px 0;
}
.auth-header .brand-mark {
  display: block;
  margin: 0 auto 14px;
  width: 54px; height: 54px; line-height: 54px;
  border-radius: 10px;
  background: #f16100; color: #fff;
  font-weight: 700; font-size: 1.4em; letter-spacing: .5px;
}
.auth-header h1 { margin: 0; font-size: 1.5em; color: #222; }
.auth-header p  { margin: 6px 0 0; color: #777; font-size: .9em; }

.auth-body   { padding: 24px 24px 8px; }
.auth-footer { padding: 8px 24px 24px; text-align: center; font-size: .9em; }
.auth-footer a { color: #f16100; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-footer .sep { color: #ccc; margin: 0 8px; }

.auth-body .form-group { margin-bottom: 16px; }
.auth-body label { font-weight: 500; color: #495057; }
.auth-body .form-control { height: 42px; }
.auth-body .form-control:focus {
  border-color: #f16100;
  box-shadow: 0 0 0 .2rem rgba(241,97,0,.2);
}
.auth-body .btn-primary {
  background-color: #f16100; border-color: #f16100;
  height: 42px; font-weight: 500;
}
.auth-body .btn-primary:hover,
.auth-body .btn-primary:focus { background-color: #d55700; border-color: #d55700; }

/* Show/hide password. A plain button rather than an icon font, so the page has
 * no external font dependency. */
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 58px; }
.pw-toggle {
  position: absolute; right: 1px; top: 1px; bottom: 1px;
  width: 54px; border: 0; background: transparent;
  color: #777; font-size: .82em; cursor: pointer;
}
.pw-toggle:hover { color: #f16100; }

.auth-note {
  background: #fff8f2; border: 1px solid #f6d5bb;
  padding: 10px 12px; border-radius: 4px;
  font-size: .85em; color: #7a4a22; margin-bottom: 16px;
}

.help-block { font-size: .85em; }