/* Login — sequence step 4, and the Reset Password screen (step 5) which
   shares this shell. Geometry from the 412 x 917 design frames. */

.auth-shell {
  width: 100%; max-width: var(--max-content-width); margin: 0 auto;
  min-height: 100dvh; background: var(--color-bg);
  padding: 0 16px calc(32px + env(safe-area-inset-bottom, 0px));
}

.auth-brand {
  padding-top: 78px; display: flex; align-items: center; justify-content: center;
  gap: 10px; color: var(--color-primary);
}
.auth-brand svg { width: 24px; height: 24px; }
.auth-brand span { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

.auth-head { margin-top: 65px; }
.auth-head h1 { font-size: 29px; line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; color: #221d26; }
.auth-head p { margin-top: 6px; font-size: 14px; line-height: 1.35; color: #746a72; }

.auth-form { margin-top: 41px; }
/* Reset screen's subtitle runs to two lines, so it needs less gap below. */
.auth-form.compact { margin-top: 29px; }
.auth-form.compact .auth-submit { margin-top: 37px; }
.auth-field + .auth-field { margin-top: 20px; }
.auth-field label {
  display: block; font-size: 13px; font-weight: 600; color: #746a72; margin-bottom: 6px;
}

.auth-input {
  display: flex; align-items: center; gap: 11px; height: 48px; padding: 0 14px;
  background: #ffffff; border: 1px solid #e6d2d5; border-radius: 11px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.auth-input:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.auth-input.has-error { border-color: var(--color-danger); }
.auth-input > svg { width: 20px; height: 20px; color: #a2969d; flex-shrink: 0; }
.auth-input input {
  flex: 1; min-width: 0; border: none; background: transparent; font-family: inherit;
  font-size: 15px; color: #221d26;
}
.auth-input input:focus { outline: none; }
.auth-input input::placeholder { color: #a2969d; }

.auth-eye {
  flex-shrink: 0; width: 32px; height: 32px; border: none; background: transparent;
  color: #746a72; cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
}
.auth-eye svg { width: 21px; height: 21px; }

.field-error { display: block; margin-top: 6px; font-size: 12px; color: var(--color-danger); }
/* Reserve no space until there is a message, so the resting layout matches
   the design; the shift on error is one line and only on the failing field. */
.field-error:empty { display: none; }

.auth-forgot { margin-top: 10px; text-align: right; }
.auth-forgot a { font-size: 13px; font-weight: 600; color: #e8384f; text-decoration: none; }

.auth-submit {
  width: 100%; height: 48px; margin-top: 34px; border: none; border-radius: 11px;
  background: var(--color-primary); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 130ms ease;
}
.auth-submit:hover:not(:disabled) { background: var(--color-primary-dark); }
.auth-submit:disabled { opacity: 0.65; cursor: default; }

.auth-secondary {
  width: 100%; height: 48px; margin-top: 16px; border: 1px solid #e6d2d5; border-radius: 11px;
  background: var(--color-bg); color: var(--color-primary);
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.auth-secondary:hover { background: #fff2f3; }
.auth-secondary svg { width: 17px; height: 17px; }

.auth-help { margin-top: 32px; text-align: center; font-size: 13px; line-height: 1.5; color: #746a72; }
.auth-help a { display: block; color: #e8384f; text-decoration: none; font-weight: 500; }
.auth-help.single a { display: inline; }

/* Employees have no password, so the field is now always visible with an
   explanatory hint rather than being toggled by a role guess made on the
   previous screen. */
.auth-pw-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-faint);
  margin: 6px 0 0;
}